The storybooks on this repo are published after any commit to the main branch to
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
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
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
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.
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.
To run in open mode, run yarn workspace components cypress:open
.
To run in CLI, run yarn workspace components cypress:run
.
- 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.