Cypress Design System

Usage

See the docs

The storybooks on this repo are published after any commit to the main branch to

https://design.cypress.io

Install windicss

First install the css package

npm install --save-dev @cypress-design/css

Then, add the plugins to your bundler

// webpack.config.js
import { CyCSSWebpackPlugin } from '@cypress-design/css'

export default (config) => ({
  // the rest of the webpack config...
  plugins: [
    //...
    CyCSSWebpackPlugin(),
  ],
})

See the css package ReadMe for more options

Install each component independently

To make sure each component fix is never blocked by an ongoing refactoring, we decided to publish each component as its own package.

If you want to install the Cypress Button, run

npm install @cypress-design/vue-button

At Cypress, we prefer using Vuejs to build new apps.

Since some projects at Cypress already use React as a framework, we decided to still publish each component as a react version and a vue version.

If you want to install the Cypress Button, and your project still uses React, install the react version

npm install @cypress-design/react-button

See the component ReadMe for the list of available components and the docs for their usage

Contributing

Running storybook

Open all the storybooks with this command

yarn start

This will start all 3 storybooks.

There are 3 storybooks running on this repo.

Intro, contains all the common facts Colors, voice & tone, contrast information and how to use the component libraries
React, contains all the components usable in a react app
Vue, documents the same components in a vue app

The 3 storybooks are linked using storybook composition.

If you only want to run vue storybook, run the command below. Use the same fashion if you want to only run react.

yarn storybook:vue

Create a new component

Using hygen we can scaffold all the tooling needed for a new components.

To start writing a new component, run this command:

yarn new:component

The system will ask you to provide the name of the component and generate all the files needed to start writing it.

In the new directory, you will find a React and a Vuejs version to complete. Each framework folder will also contain a stories file.

Updating the component generator

When you use the yarn new:component command, the template used is called a generator. It could be useful to update it from time to time if the standards change.

First, create a scaffold for a component called ComponentName. The name matters because it will be used to generate the component templates and overwrite the old ones.

yarn new:component --name ComponentName

Then do all the changes you want to make to the component template.

Every time you use ComponentName in this template, it will be replaced in generated scaffolding.

Finally, to commit the changes to the template, run

# Remove the old template
rm -rf _templates/component/new
# start a new hygen-create session
npx hygen-create start component
# add all the files inside the component to the template
npx hygen-create add components/ComponentName/**/*
# remove the file automatically generated by hygen-create
npx hygen-create remove hygen-create.json
# Use ComponentName as a placeholder for the component name
npx hygen-create usename ComponentName
# generate the new template
npx hygen-create generate
# remove the temporary component
rm -rf components/ComponentName
# remove the metadata file
rm -f hygen-create.json

Finally, you should see the prompt.js file has been moved. Revert that change before committing.

Running tests

To run in open mode, run yarn workspace components cypress:open.

To run in CLI, run yarn workspace components cypress:run.

Structure

components A collection of components for building Cypress applications and websites.
css What you need to install a pre-configured version of WindiCSS in a Cypress project.
icon-registry contains the list of all the svg icons available in the vue-icon and react-icon components.
storybook-vue The configuration of a storybook to showcase and work on the vue components.
storybook-react The same as above but for React components.
test A sanity check to see if the components we build are actually working with a real setup.

ZachJW34 / cypress-design