Component Library - Meeting Notes
TL;DR: Next Steps
- Create component library of existing components to be used by existing community of developers of the core app, people creating 1P DApps and those creating Status Extensions [@andmironov, @maciej]
- Migrate components from Figma through bounties to Storybook; include as many components for Voting DApp as possible. [@cryptowanderer, @barry]
- Coordinate with agency building components for Voting DApp to make sure they are in line with current component styling [@andmironov, @graeme]
- Build a design system that unifies offline and in-app brand identity [@Ned]
- Hire a UX Engineer to build out and maintain the component library (example JD). [@naghdy]
- Potentially customize visual styling and behavior of the long-term design system into a native Status UI. This can be decided and discussed at a later date.
This meeting tried to tackle 4 topics:
- What are the existing engineering needs of core and community contributors from a component library?
- What are the existing needs of DApp and/or Extensions developers from a component library?
- What is the component ltibrary Andrei and co. building today trying to solve?
- What is the Brand Identisy Design Platform that Ned is building trying to solve?
Contributor building Status Core app
- Developers end up having to do design using flat images, usually for the first time
- Using component libraries is a much better way to operate
- Bringing people in from the community to contribute, using our style convention fosters that
- Examples of good component libraries:
- Material UI has a component library
- Storybook is a framework to house this
- Creates a unified conversation between product, design, engineering.
General consensus from Design.
- Core app: current components documented
- DApps are webbased, therefore will have different components. No components for this yet. Visual style is applied in designs.
Specified components for the Core app can be implemented in Storybook as React components
The following Core app components can be implemented in Storybook: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1
- There’s no way of knowing what type of components would need to be in the component library.
- (earlier blocker) Components need to be designed first.
- This situation will occur with every new component that is introduced.
- Front end dev in design team
- Profile needs to be specified offline
- Could be Andrei or Maciej as well
- Bounty on component development in Storybook
- Barry can do the code review on bounties
- Collaboration with community (Beltran, Aqeel, Alejandro) / Potentially more difficult to collaborate at this point in time.
Currently there is no library of web3 components.
- Central place where we have the base UI elements in a design as usable components.
- There might be confusion around what a component means.
- Everything is a component, you combine them to build something bigger. Button is a component.
- Helps a unified conversation between stakeholders. Designer give name of component and developer doesn’t have to rebuild the component.
- Creates clarity on what materials to work with and what constraints are.
Consequence of not having component library
- Copying from Figma with fixed dimensions
- Developers have to recreate components and taking on a designer role.
- More difficult to bring in people from the community to contribute. Having a library using our style conventions would foster that and would make us more productive.
What is the “Brand System” (that also contains components) that Ned is working on? What is it trying to solve?
- Longterm would be a nice scenario.
- Goal is to empower people with free tools is different from we want a specific set of products.
- Bigger system could emcompass these free tools across products.
- A unified brand accross touchpoints; meaning that the product components are related to print, web and other materials.
Challenges short term
- Code division in web2 is different from web3;
- Limited resources.
- We don’t have the optimal patterns and flows for ourselves.