feat: Add Alerts, Divider, Progress, andPopupConfirm component and stories

[iamrajiv]

Description

• Added Alerts, Divider, Progress, andPopupConfirm component and there respected stories
• Upgrade Chromatic and Storybook
• Resolved alias imports in components

[aornugent]

I like it!

[sohamsshah]

@iamrajiv Just curious, any specific reason for including a new design system dependency (Ant-Design) to the project? Are we planning to migrate to use a new design-library for flint.ui?

Currently, the Flint-UI Project components are built with tailwindcss classes and prop-management is handled accordingly.
There are some part of the codebase that includes components imported from vue-material, vueform and other npm packages such as vue-chartjs, vue-apexcharts etc.. Based on the new updated UI design, in the previous PRs ( #130 , #127 , #114 ) the components (DatePicker, RangeSlider, LandingPage Cards, Footer etc.) are being built using tailwindcss and the old ones are being removed (that were using pure css or some external design system like vue-material). So, the new components like Alerts, Divider, Progress, Popup can also be built by using tailwindcss and corresponding component prop API can be designed.

If we are planning to use components from a design-system library like Ant-Design, I think we shall brain-storm and think over it a bit before including it as a dependency as then all the previously built components shall be migrated to the new ones.

It would be better if we move forward with tailwindcss as it is flexible and corresponding components can be built using tailwindcss utility classes. Once all the required components are built in the design system with storybook setup, we can remove the other dependencies and redundant components.

Would like to know your views and opinions upon this.

Cc: @aornugent @HarshCasper

[iamrajiv]

Hi, @sohamsshah yeah like for a broader perspective I don't the thing with the tailwind we were able to do things like making complex file upload components for GCBM, etc easily. Also, Ant Design is a design system for enterprise-level so I guess it is suited well for FLINT UI complex workflow.

[sohamsshah]

Hi, @sohamsshah yeah like for a broader perspective I don't the thing with the tailwind we were able to do things like making complex file upload components for GCBM, etc easily. Also, Ant Design is a design system for enterprise-level so I guess it is suited well for FLINT UI complex workflow.

Well, that makes sense, Rajiv. Though we can develop customized components with Tailwind, but I think using a library would lead to fast development of UI (Just we have design the UI Figma and wireframes based on the UI lib so that we can ensure consistency.) Technically, we need a library to replace most of our design-related dependencies and clear the clutter in the project.

I researched a bit upon this and have got few alternatives to consider in option to Ant Design.

• Vuetify - Material Vue components.
  • Has more variety of components (Tables Navigation Drawers, Skeleton Loaders, etc.)
  • Better CSS handling and styling
  • Directives and Animation features
  • 33K stars (one of the most popular Vue Design lib)
• Bootstrap Vue
• Chakra-UI Vue (It is not in the v1.0 yet but has got great component design architecture)

I feel that Vuetify is also a good option to think upon for the project. Wdyt?

[sohamsshah]

@iamrajiv any insights upon this so that we can move forward with the decision accordingly. Thanks.

[iamrajiv]

@sohamsshah Yeah, I went through the Vuetify and I think we can achieve the required goals with this too. Looking for @aornugent view on this.

[sohamsshah]

@sohamsshah Yeah, I went through the Vuetify and I think we can achieve the required goals with this too. Looking for @aornugent view on this.

We can merge this if we are agreeing to move with Ant Design System.