Component Sync: April 5, 2022 - HausDAO/daohaus-monorepo-deprecated GitHub Wiki
Shared Goals and Process
Went through some of the goals outlined by Jord and Helle
Creating designs in codespace and the importance of alignment so that we have composable UI and organizing our code in this way we have gains across the board
Workflow and Process
Establish the pipeline -- work on 1 component at a time
Pass design -> dev -> joint review
Focus on the global styles (typography, spacing, color) first so that we can leverage this throughout
How do we want to handle variants?
Pulling designs from design system -- what would bottom up design processes look like?
Checkpoint system:
Design and dev go through a checklist
Design and dev audit the UI in Storybook once ready and make adjustments to ensure up to spec
Lots of technical process work in Figma -- do we want to include another layer as a guide that shows the variants and component states in a concise way?
Big Questions
Do we design layouts first or do we build from the component blocks upward?
Over time the design system would be what we all pull from
Initial Team Feedback
How can we make our time together as useful as possible?
Design Team Feedback and Thoughts
Once components are ready can focus on UX instead of constantly recreating components
Speeds up workflows by integrating components that already exist
Getting pseudoclasses for things and using these as names for variants
Helps streamline the naming conventions that we can align on
Looking toward Material Design for inspiration about why/how we use UI as devs
Establish usage patterns and then include this in our docs
Example: When would we want to use certain button sizes?
Dev Team Feedback and Thoughts
Act of naming things helps move us toward systems thinking for how we're approaching the component library
Need for compound UI for things like the input table
We need the globals and colors and the component designs to be up to spec and then we move forward one component at a time with the review process
How Do We Move Forward?
Similar process for creating cards for design (including the states and variants that need to be represented)
Create a chart/checklist so that we'd be able to align along these lines for speccing
How would Avi prefer to break up some of the work so that we can prioritize it?
"Create Pattern Library" -> move to more meaningful Milestone chunks
So far, Adrienne and Ven have been making the components as they work on Summoner and Avi has been taking what's been designed and then building it out
Currently caught up, so how do we want to organize the work moving forward
Things in the Figma with (IP) are what's been started but some of the others don't have specific designs yet
Getting design sign off -> ready to be specced for devs -> implemented -> reviewed
General Next Steps
Documentation system: Storybook MDX or custom docs site?
Start with Storybook and then go from there and build out a custom site if we need
Now that InputWrapper is largely done Jord can move on to the other atoms
Emphasize colors and typography cards and create Milestones
What semantic/meaningful names do we want to have for our colors?
How do we want to move forward with the Summoner UI? Do we want to replace these as we update the component library?
How do we go in the other direction and start building from the atomic level?
Begin using the lifecycle for Invisible Suburbs and identify some components to move forward with and test out our workflow process
Who is responsible for moving cards from Backlog into Design?
Specific TODOs
Create Milestones and split out cards for the component library and pattern library
Add cards for common atoms/molecules that aren't already represented
Create Card for Creating Global Styles Object for Color and scaffolding with the values (100 - 900)
Add cards for everything at the global level as a starting point
Move the current component cards into Backlog so we can then move each one through our design workflow
Create card for deploying Rage version of Storybook to GitHub Pages or Chromatic
Create card for deploying Sage version of Storybook to GitHub Pages or Chromatic