@squadcast/alchemy-ui NPM

Alchemy

Squadcast Design System

At Squadcast, we strive at consistently optimizing engineering to build fast without compromising performance, quality, and reliability. Alchemy is an active component system for creating a modular and reusable system. This is a component-driven Reactive Design System that can be used to unify UI and provide consistent progressive UX. The system is Simple & Clear, Fast, Accessible, Inclusive, Consistent, and Testable.

Project Structure

The project has three main component structure 1. Carbon - Modified Native elements (as Headings, Text) should not contain any logic apart from the render. 2. Metal - Pure Usable Elements made from Carbon (as Input, Button, Avatars, Cards) 3. Alloy - A mixture of Carbon and Metal (as ChatBox, Navigation, SearchBox, Filter)

The testable system is provided by storybooks. Refer /stories to learn more.

How Should I Run?

Currently, the app page can be accessed by running the yarn install after yarn storybook or the npm equivalent commands of those.

install in your project by yarn add @squadcast/alchemy-ui

Contribution Guidelines

Before contributing please read design goals and Atomic Design

All merges are done on a PR, once the PR is merged and its a feature, don't delete the branch
All the components should be pure. And should be a functional Component, not a class.
Files should not exceed 250 lines. if it does, break it.
All the logic should be written in Vanilla JS (its powerful!).
Stories are to be added with the same folder Arc. as followed by Component Design

Help with DocGen

The component needs to be exported as an export function <name>. (we can do a named default export at the bottom).
The Component Interface should be tied with the component itself
Markdown is supported with docgen (make it awesome)