Giter Club home page Giter Club logo

kaizen-design-system's Introduction

Kaizen Design System

Build status

Kaizen is Culture Amp's public design system. It accelerates Culture Amp's designers and engineers as they collaborate on creating world-class products. Visit cultureamp.design to learn more.

This repository is the source of truth for Culture Amp's design system documentation and hosts packages such as Kaizen Component Library, which are used across Culture Amp's products. It is structured as a multi-package repository, with a number of independently versioned projects sharing common tools, workflows and vision.

This document serves to orient you within the repository โ€” to get you set up and acquainted, and then send you off in the right direction. For more information on any specific package, please refer to its README.

Quick links

Designers

Issues

You can explore or create Issues to track ideas, enhancements, or bugs. Use issues to track:

  • Changes to design documentation
  • Missing documentation

To learn more, see the designer section of the Contributing guidelines.

Editing design documentation

You can edit Kaizen Site documentation using GitHub's interface.

To learn more, see the designer section of the Contributing guidelines.

Getting started

Setup

Set up access to private Culture Amp packages on your laptop. You will need to update ~.npmrc with a Github token linked to your account. Refer to the instructions here.

Installation

To begin developing the design system locally, run the following from the repository root:

yarn install

We use Storybook to provide a local development environment for React components. All Kaizen Design System components have accompanying stories in Storybook.

To run Storybook locally, run the following from the repository root:

yarn storybook

(Having trouble running Storybook? Try running yarn reset, which includes yarn clean and yarn install --force!)

Branch previews

While the main site is located at https://cultureamp.design, all branches in this repository are automatically deployed to a public URL at https://dev.cultureamp.design/(branch-name). This deployment is a Storybook build for that branch.

For example, pushing the branch louis/more-glitter would make its documentation and Storybook build available at dev.cultureamp.design/louis/more-glitter.

Package scripts

It's dangerous to go alone! Take these:

Command Summary
yarn storybook Develop components locally using Storybook
STORIES=path/to/package yarn storybook Develop just one package at a time using Storybook (builds faster!)
yarn commit Use commitizen to help you write your conventional commits
yarn compile Run all typechecks
yarn lint Run all linters
yarn lint:fix Run all linters, fixing violations
yarn plop Add a new component/subcomponent
yarn playwright: Start storybook and run all Playwright tests
yarn playwright:debug Start storybook and run all Playwright tests in debug mode
yarn test Run all tests (using Jest)
yarn reset Reinstall all dependencies

Bugs and discussions

Please open a new GitHub Issue to report bugs or suggest changes.

Learn more

Culture Amp employees can reach out to the Design Systems crew on Slack.

kaizen-design-system's People

Contributors

actuallyacat avatar berry-thanki avatar caseysinclair avatar christian314159 avatar cultureamp-ci avatar cultureamp-renovate[bot] avatar dependabot-preview[bot] avatar dependabot[bot] avatar dlimiter avatar dmisdm avatar dougmacknz avatar ellisjas avatar gyfchong avatar heartsquared avatar hqta avatar jakepitman avatar jasononeil avatar jeremy8883 avatar juliohr avatar kemblesong avatar lloydstubber avatar martindavid avatar mbylstra avatar mcwinter07 avatar natalieloyzaga avatar okeeffed avatar olibridgman avatar sebpearce avatar sugendran avatar zioroboco avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.