Implementing Roth-C and Point designs.

[shloka-gupta]

To do: Implement the design of Roth-C & Point.

The designs for the POINT and Roth-C are ready but it never really came to life.

The design links-

Point prototype -
https://www.figma.com/proto/JXB1KKGWxD2dLR7dx2hqWS/Flint-UI?page-id=0%3A1&node-id=3%3A2&viewport=295%2C48%2C0.29&scaling=min-zoom&starting-point-node-id=3%3A2

RothC Prototype -
https://www.figma.com/proto/JXB1KKGWxD2dLR7dx2hqWS/Flint-UI?node-id=0%3A1&viewport=295%2C48%2C0.36&scaling=min-zoom&starting-point-node-id=3%3A2
[Click on 'Run' in the prototype twice]

@sohamsshah did have an idea on how to get started--

To quote-

_"This new design looks great. So what we should technically do is first develop components. Once all the components of the design system are made, then we can move to things like Pages/Sections etc.

Components like:

• Date Picker
• Range Slider
• Expandables
• Buttons
• Cards
• Typography

Everything goes into Storybook.

Once these are built, we can then do:
/point

• Replace components with new components on a freshly designed Point Page
• If you observe, point page is essentially built with these micro components only.

/rothc and other routes are similar.

The benefit of this I feel is:

• Almost zero duplication
• Clarity on Design System
• No collision between people working on different sections. Like Person working on making Sidebar would make a new component for Sidebar Button. But essentially, Button is a Button; but with better props. Same applies to others
• Better Documentation and Designer to have a look (via storybook)"_

This discussion talks about on how to proceed.

cc- @sohamsshah @padmajabhol @Sukriti-sood

[YashKandalkar]

Heya! @sohamsshah 's ideas above are great! So for creating components based on the new design should we edit the current components (For example, we can edit the styles of the DatepickerPoint.vue and DatepickerRothC.vue to match the new design.. Same for some other components which are already there but are of the old design.) or should we create new component folders & files completely?
And if we are creating new ones, what should we name them?
I would suggest we edit the components like Datepicker, Slider, etc. according to the new design since their functionality isn't going to change.

I'm still new to the project and might be missing some information so I'd love to know others opinion on this!

[Sukriti-sood]

I am also in support of editing old components.

[shloka-gupta]

Just updating the slack discussion over here:

""Hi channel, first of all - glad to see that everyone of you are actively involving in the community and also has started working on some issues too on FLINT-UI.

In context to the recent issues created regarding the component design for the new updated Design ( Yash Kandalkar did a great job creating the issues), you can try keeping the following points in mind while working on them:

We have decided to migrate to Ant Design Vue Frontend Design System Library for all our needs. In our codebase there are dependencies for tailwind or metarial-vue; but that has to be removed on later iterations. So make sure all your designs are built with Ant Design only.
If you are working on an issue, discuss the following with the maintainers, issue-creator, community or your connections at moja global:
Confirm your understanding about the issue
Discuss your implementation approach
Link resources you found to your implementation approach
Ask for Help if you are stuck instead of leaving the issue stale and unattended after being assigned
Building Reusable Components is more than just literal Design Implementation from Figma. It should be:
Dynamic in terms of text, color, width, height etc. and should be able to be adjusted as per our requirement
Should contain Props to handle various UI states, conditional rendering or anything that applies to the component wrt Design and Code.
Also take care about Edge cases, if any.
Since we are using Ant Design System, this means that we should not have any raw css code in any new addition we provide. (Older code can be refactored, but new pieces should be up-to-date.)
Try to explain your implementation with Images or GIFs when creating a PR for it.

Some resources to get started with Ant Design with Vue:
Docs
Codesandbox Examples

Good luck with your Issues you are working on! 🚀
Thank you so much folks!
Please don't hesitate to ask your queries, doubts in the community. ❤️

Cc: Harsh Bardhan"

[shloka-gupta]

Link to the text ^ https://mojaglobal.slack.com/archives/C010Z37GL2U/p1646396566370539?thread_ts=1646396566.370539&cid=C010Z37GL2U

[arnab15]

@chicken-biryani I think Ant Design system will be a good choice for rebuilding components ui as Ant design has many build in components and flexibility.
I had worked on AntDesign before using reactjs however I'm learning Vue Js hope I'll be able to help migrate old ui to Ant Design system using VueJs

[shloka-gupta]

Hey,

So... Yes. That's great to know that you feel the same.

About React/Vue... @YashKandalkar has been here for a while and comes from a React background as well. He says he just googles stuff.

So they both work in a similar manner.

About AntDesign for Vue

This article may help - https://www.npmjs.com/package/ant-design-vue

[arnab15]

@chicken-biryani @HarshCasper Also I have one sugession that if we are moving to Ant design system with vue isn't it be more flexible if we move the whole UI to react as react has more community support and also ant design works with react more smoothly and it's community is very vast and helpful.
Also one concern with Ant Design system is that sometimes we have to write some raw css in some specific cases as I had worked with ant design using react about 6 months in my previous internship I feel that issue some times.
Looking forward to listen some feedback on it.

[sohamsshah]

Hi @arnab15 , I agree on the React part that writing code in React would be easier for new contributors. But to migrate the whole project to a different framework involves a lot of complexities, moving parts and technical parameters to consider such as:

• Strong reason for choosing one over the other framework options
• Totally different state management solutions to adapt
• Design System needs to reconfigured
• Whole UI and UX part has to be rebuilt
• API integration and Flint.Cloud project has to be re-integrated and tested.
• Completely abandoning the work that has been put in this project till now in terms of implementation, design etc.
• Migration is a large scoped project and can be done in later iterations, but definitely can be given a thought if we have strong perks.

Nevertheless, VueJS is equally good in terms of performance as well as developer-experience; but lacks the community because of it being relatively newer.

About the Ant Design Revamp, it is one of the primary things we are working towards. Would love to see your inputs there. Create issue and let's discuss there. Thanks

[shloka-gupta]

Hey, that's a pretty valid question!

I guess a lot of people have a question on "Why Ant Design?"

I'll put that up on Slack so that we can answer the question for a lot of people.

About React/Vue... We have the community website on React... So if you're more comfortable with that you should try working on the community website.

I think if the community is comfortable with React they should be comfortable with Vue as well.

[arnab15]

@sohamsshah @chicken-biryani
I'm also thinking Switching framework will be very redundant and we have to change lot of things so I think VueJs with ant design system will be perfect for now as everything is built on top of vueJs.
I'm Learning Vuejs hope i'll be able to master it in few days.
Did we have any branch where we will be writing new code using Ant Design?