styled-sigma-ui v0.2.2

Sigma UI v0

🏗️ ⚠️ Work in progress. Any help and contributions towards finishing a working version are welcome, whether through discussions, raising issues, or sharing links on Slack. We value your input as we strive to build a valuable product.

Idea Behind Sigma UI

As we continue to grow and focus on rapid development from design to product, dealing with UI coloring and padding placement should be the least of our concerns. Our primary focus should be on product development, especially with the new [REDACTED] on the horizon. Sigma UI is designed to house components that are created from our past experiences and lessons learned, aiming to streamline the process of building products like [REDACTED]

What and How We Are Building This

What

We aim to recreate all the components from the Figma Leopard Library, making them themeable with minimal effort while retaining the Sigma design theme.

How

Currently, the library is styled using styled-components, and most of the components are composed from the elements in Radix UI Primitives. Any component with unique behavior tailored to our use case is created from scratch.

Getting Started

1. Installing the Package

To make development for the UIs and production iteration quicker. We've pushed the project to public npm instead for now. This might change later on and will be communicated in this document

This package heavily depends on styled-components. To make it work, add it as a peer dependency to your react project:

yarn add styled-components styled-sigma-ui

Development

This repository is created using TypeScript, and the documentation is generated using Storybook.

To build and run Storybook:

yarn build-docs
yarn start

To build and create a working package:

yarn build
yarn version --patch

Contributions

Contributions are welcome in various forms, from a Slack message to a PR. Please reach out to Iniaki (@Iniaki-Sigma) or Kevin (@iam-kevin) in your preferred channel to help continue the development of the components.

To-Do

• Is README helpful enough?
• Make the project build work
• Make tests work
• Test coverage
• Link Storybook with Figma