search

defactor-com / ui-kit

A Collection of FrontEnd Components for Defactor User Interfaces :nut_and_bolt:
https://ui-kit.defactor.dev
Apache License 2.0
1 stars 0 forks source link

Integrate v2 MainSidebar Component into Storybook for desktop devices #277

Closed pzagardedukic closed 2 weeks ago

pzagardedukic commented 2 weeks ago

Description:

We need to integrate our MainSidebar into Storybook for desktop devices into the existing Storybook UI Kit. The task includes ensuring that the sidebar is reusable, clean, and properly modified. Additionally, any potential style issues should be identified and fixed.

Set Up Your Environment:

  1. Ensure you have the latest version of the Storybook UI Kit.
  2. Set up a local development environment with all necessary dependencies.

Tasks:

  1. Integrate the Integrate MainSidebar for desktop devices into the current Storybook UI Kit.
  2. Ensure the sidebar component is reusable and clean.
  3. Modify the sidebar to fit seamlessly into the UI Kit, maintaining consistency with existing components.
  4. Identify and fix any styling issues that may arise during the integration process.
  5. Write documentation or comments to explain the integration process and any modifications made.

Acceptance Criteria:

  1. The Content Sidebar is fully integrated into the Storybook UI Kit.
  2. The sidebar is reusable and its code is clean and maintainable.
  3. All modifications align with the design and functionality of the existing UI Kit.
  4. No styling issues are present, and any that are found have been resolved.
  5. Documentation or comments are provided for clarity.

Test

pzagardedukic commented 2 weeks ago

DONE. Notification dot - change the color, make it appear only when there is at least one notification.

pzagardedukic commented 2 weeks ago

DONE. MenuItems - text, border and icons change color when the MenuItem is active.

pzagardedukic commented 2 weeks ago

Check if the style and logic of the MainSidebar are working correctly.

pzagardedukic commented 2 weeks ago

DONE. Colors must be changeable in Storybook.

pzagardedukic commented 2 weeks ago

DONE. ?? Should i specify at which width or on which devices it should be displayed? Discuss with the team. - HIDE ON SM

pzagardedukic commented 2 weeks ago

DONE. Outline Icons When Inactive and Fill Icons When Active for MenuItems.

pzagardedukic commented 2 weeks ago

DONE. Added notificationsCount as a prop to MainSidebar.

pzagardedukic commented 2 weeks ago

DONE. Refactor Component Colors to Use MUI Theme.

pzagardedukic commented 2 weeks ago

DONE. Change Notification color to #D21A4D

pzagardedukic commented 2 weeks ago

For documentation:

Use Storybook Args to Pass Custom Routes Now, users can pass their own routes when using the MainSidebar component in Storybook.

For example, in your Storybook UI, you can modify the args to provide different routes:

export const CustomRoutes = Template.bind({}); CustomRoutes.args = { routes: [ { text: 'Home', path: '/home', icon: HomeIcon, }, { text: 'Profile', path: '/profile', icon: ProfileIcon, }, // Add more custom routes here ], }; With this setup, your MainSidebar component is now flexible and can accept custom routes via props, making it easier to use and customize in Storybook.

pzagardedukic commented 2 weeks ago

DONE. Users can provide their own routes when using the Storybook.