capra-ds v1.0.0

Capra Design System

A simple design system with ability to test the components in isolation and a continuos integration pipeline to deploy, test, and check visual differences between components on every PR.

Installation

• First yarn to install dependencies.
• And then run yarn storybook to test the components in isolation using storybookjs
• Check "scripts" in package.json to see build and release commands.

Technologies used

Build components

• 📚 Storybook for UI component development and auto-generated docs
• ⚛️ React for declarative component-centric UI (via create-react-app)
• 💅 Styled-components for component-scoped styling
• ✨ Prettier for automatic code formatting

Maintain the system

• 🚥 GitHub Actions for continuous integration
• 📐 ESLint for JavaScript linting
• ✅ Chromatic to catch visual bugs in components (by - Storybook maintainers)
• 🃏 Jest for unit testing components
• 📦 npm for distributing the library
• 🛠 Auto for release management workflow

Storybook addons

• ♿ Accessibility to check for accessibility issues during development
• 💥 Actions to QA click and tap interactions
• 🎛 Controls to interactively adjust props to experiment with components
• 📕 Docs for automatic documentation generation from stories

Contributors

• Subhan Ahmed @subhanahmed047 - Actively adding more components and updating existing styles.
• Tom Coleman (@tmeasday) - Setup the project to avoid pain points in building a design system from scratch. Boilerplate code cloned from Learn Storybook Website