search

wrappid / guide-module

This module is for a comprehensive documentation of framework for Wrappid developers. Covers key aspects of application development- components, styles, layouts. Provides clear explanations, offering code snippets with visualizations to streamline development and ensure consistent implementation.
https://demo.wrappid.dev/
MIT License
14 stars 6 forks source link

enhancement: create layouts page components, create it's routes in guide-module and moved layout page from wrappid-app to guide. #109

Open irkfaisal opened 9 months ago

irkfaisal commented 9 months ago

Description:

The component page Layout is about displaying the different wrappid layouts with their properties. 

In the page guide/layouts, we have two sections: the left section is about LayoutViewer.js, and the right section is the list of different Wrapped Layouts in CoreMenu components. So when we select the layout from the CoreMenu, that layout will appear in the right section of the LayoutViewer.js with all its properties.

LayoutViewer

The component is responsible for rendering a layout viewer interface where users can select a device, adjust zoom, orientation, posture, and view layout parameters.

LayoutViewer is providing some features such as aspectRatio, orientation, posture, dimension, and zoom values. These properties are dynamically updated based on user interactions within the component.

Testing Points:

  1. Device Selection:
  1. Zoom Control:
  1. Orientation Control:
  1. Posture Control:
  1. Rendering
  1. UI Elements:

More test points may be added here.

Data

const DEVICE_TYPE = { DESKTOP : "Desktop", DESKTOP_TOUCH : "DesktopTouch", MOBILE : "Mobile", MOBILE_NO_TOUCH: "MobileNoTouch", };

const ORIENTATION = { LANDSCAPE: { orientationDisplayName: "Landscape", orientationName: "landscape" }, POTRAIT : { orientationDisplayName: "Potrait", orientationName: "potrait" } };

const POSTURE = { CONTINUOUS : { postureDisplayName: "Continuous", postureName: "CONTINUOUS" }, FOLDED : { postureDisplayName: "Folded", postureName: "FOLDED" }, NOT_APPLICABLE: { postureDisplayName: "NA", postureName: "NOT_APPLICABLE" } };

const ASPECT_RATIO_MAP = { [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_1_1] : { aspectRatioDisplayName: "1:1", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_1_1 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_16_9]: { aspectRatioDisplayName: "9:16", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_16 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_16]: { aspectRatioDisplayName: "16:9", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_16_9 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_20_9]: { aspectRatioDisplayName: "9:20", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_20 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_20]: { aspectRatioDisplayName: "20:9", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_20_9 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_3_2] : { aspectRatioDisplayName: "2:3", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_2_3 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_2_3] : { aspectRatioDisplayName: "3:2", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_3_2 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_4_3] : { aspectRatioDisplayName: "3:4", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_3_4 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_3_4] : { aspectRatioDisplayName: "4:3", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_4_3 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_21_9]: { aspectRatioDisplayName: "9:21", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_21 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_21]: { aspectRatioDisplayName: "21:9", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_21_9 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_25_9]: { aspectRatioDisplayName: "9:25", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_25 }, [CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_25]: { aspectRatioDisplayName: "25:9", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_25_9 },

};

const DEVICES = { GALAXY_FOLD: { allowFold : true, allowRotate: true, aspectRatio: { default: { aspectRatioDisplayName: "25:9", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_25_9 }, folded : { aspectRatioDisplayName: "21:9", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_21_9 }, }, deviceType: DEVICE_TYPE.MOBILE, dimension : { default: { height: "653", width: "512" }, folded : { height: "653", width: "280" } }, displayName: "Samsung Galaxy Fold", name : "GALAXY_FOLD", orientation: { default: ORIENTATION.POTRAIT }, posture : { default: POSTURE.CONTINUOUS } }, ASUS_ZENBOOK_FOLD: { allowFold : true, allowRotate: true, aspectRatio: { default: { aspectRatioDisplayName: "2:3", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_2_3 }, folded : { aspectRatioDisplayName: "16:9", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_16_9 }, }, deviceType: DEVICE_TYPE.DESKTOP_TOUCH, dimension : { default: { height: "1280", width: "853" }, folded : { height: "1280", width: "1706" } }, zoom : { default: 100 }, displayName: "Asus Zenbook Fold", name : "ASUS_ZENBOOK_FOLD", orientation: { default: ORIENTATION.POTRAIT }, posture : { default: POSTURE.CONTINUOUS } }, GALAXY_S20_ULTRA: { allowFold : false, allowRotate: true, aspectRatio: { default: { aspectRatioDisplayName: "9:20", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_20 } }, deviceType : DEVICE_TYPE.MOBILE, dimension : { default: { height: "915", width: "412" } }, zoom : { default: 100 }, displayName: "Samsung Galaxy S20 Ultra", name : "GALAXY_S20_ULTRA", orientation: { default: ORIENTATION.POTRAIT }, posture : { default: POSTURE.NOT_APPLICABLE } }, LAPTOP: { allowFold : false, allowRotate: false, aspectRatio: { default: { aspectRatioDisplayName: "16:9", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_16_9 } }, deviceType : DEVICE_TYPE.DESKTOP, dimension : { default: { height: "1080", width: "1920" } }, zoom : { default: 100 }, displayName: "Laptop", name : "LAPTOP", orientation: { default: ORIENTATION.LANDSCAPE }, posture : { default: POSTURE.NOT_APPLICABLE } }, MOBILE: { allowFold : false, allowRotate: true, aspectRatio: { default: { aspectRatioDisplayName: "9:16", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_9_16 } }, deviceType : DEVICE_TYPE.MOBILE, dimension : { default: { height: "667", width: "375" } }, zoom : { default: 100 }, displayName: "Mobile", name : "MOBILE", orientation: { default: ORIENTATION.POTRAIT }, posture : { default: POSTURE.NOT_APPLICABLE } }, TABLET: { allowFold : false, allowRotate: true, aspectRatio: { default: { aspectRatioDisplayName: "2:3", aspectRatioName: CoreClasses.ASPECT_RATIO.ASPECT_RATIO_2_3 } }, deviceType : DEVICE_TYPE.MOBILE, dimension : { default: { height: "1180", width: "820" } }, zoom : { default: 100 }, displayName: "Tablet", name : "TABLET", orientation: { default: ORIENTATION.POTRAIT }, posture : { default: POSTURE.NOT_APPLICABLE }, }, };

const ZOOM_VALUES = { // eslint-disable-next-line etc/no-commented-out-code // FIT_TO_SCREEN: "Fit to Screen", ZOOM_50 : 50, ZOOM_75 : 75, ZOOM_100: 100, ZOOM_125: 125, ZOOM_150: 150, ZOOM_200: 200, };

 

  1. First of all copy all the layout pages components to guide-module. app --layout --page layout pages components
  2. Create routes of all the layouts pages components inside registry folder of guide-module.
  3. There should be some changes in creating routes. Now we should directly import the layouts components (component.name)
  4. We also need to create a layout page for displaying all the layouts components as this is also a part of wrappid-documentation.
irkfaisal commented 8 months ago

layouts with routes has been transferred to guide-module and code has been merged to main

samhere17 commented 8 months ago

@Animesh1432 please test this issue; this is the layouts viewer page.

Animesh1432 commented 8 months ago

@irkfaisal Proper description missing

samhere17 commented 8 months ago

@irkfaisal if you click on each layout listed on the right panel error is happening.

Edithmark42 commented 8 months ago

@irkfaisal if you click on each layout listed on the right panel error is happening.

this issue was resolved in the PR #135.

irkfaisal commented 8 months ago

@irkfaisal Proper description missing

description updated, please check and update the necessary changes

Animesh1432 commented 8 months ago

Device Selection: Verify that users can select different devices from the dropdown menu. - Pass Ensure that upon device selection, relevant parameters such as aspect ratio, orientation, posture, and dimensions are updated accordingly. - Pass Zoom Control: Test that changing the zoom value updates the rendered dimensions of the device accordingly.- Pass Ensure that zoom options reflect accurately in the dropdown menu and trigger the appropriate adjustments in the rendered canvas.- Pass Orientation Control: Test the functionality of the orientation change button. - pass Verify that clicking the orientation button switches between landscape and portrait modes. - pass Posture Control: Test the posture change button's functionality. - Pass Ensure that clicking the posture button toggles between continuous and folded postures where applicable. - Pass Rendering Verify that the layout viewer canvas accurately reflects the selected device's dimensions, aspect ratio, and other parameters.- Pass Test different combinations of device selections, zoom levels, orientation changes, and posture changes to ensure consistent - Passrendering behavior. UI Elements: Test all UI elements such as dropdown menus, buttons, and text displays for responsiveness and correctness. Verify that UI elements update appropriately based on user interactions and selections. Issues

  1. Two sections are mentioned in the Description but it is shown as three sections - UI problem.

  2. content Overlapped image

  3. Give proper description image

  4. Space Needed in complex layout image

  5. In every layout need a space for each content

  6. font color change needed for image @irkfaisal

irkfaisal commented 7 months ago

no any work done from my side on this issue. Need discussion related to bugs mentioned by animesh. like color font which we have to change by theme.