Welcome to Polyblocks!

Demo: https://PolymathNetwork.github.io/ui-blocks

This UI library is opinionated, components are styled according to our design system guidelines and specifications to make precise implementation the default. However, there are ways to override them.

We followed the component-driven UI process:

The development and design practice of building user interfaces with modular components. UIs are built from the “bottom up” starting with basic components then progressively combined to assemble screens.

Clone repo and run Storybook locally via npm start. Browse components (Polyblocks) by navigating to them in the sidebar. View their code and play around with controls to learn how they work.

NOTE:

• Styles are passed to components from src/theme/definition.ts. You can also import PolyThemeProvider and pass your own theme to it.
• To add a new theme, create a file definition in src/theme/definition and override on default theme then export it from src/theme/index.ts.
• Styles set via props are wired inside the component and override the theme.
• GAPs are used for margins and other spacings, and are incremented by 8px.
• You can set a margin for some components via the margin prop:
  • <Box margin="s" />
  • <Button margin="m 0" />
  • <Flex margin="0 0 xl 0" />
• You can create other components based on these inside your project if special treatment is required.
• To add a new icon, create SVG file in src/theme/icons/svg, and it will automatically be available to components in development, and exported as a React component in production. Icons are exported as polyIcons.