{"id":19151664,"url":"https://github.com/cypress-io/cypress-design","last_synced_at":"2025-05-07T05:25:32.160Z","repository":{"id":37485412,"uuid":"481644362","full_name":"cypress-io/cypress-design","owner":"cypress-io","description":"Components to build UI with the Cypress Brand","archived":false,"fork":false,"pushed_at":"2025-05-02T23:04:24.000Z","size":8769,"stargazers_count":12,"open_issues_count":16,"forks_count":4,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-02T23:27:56.675Z","etag":null,"topics":["components","design-system","react","vue"],"latest_commit_sha":null,"homepage":"https://design.cypress.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cypress-io.png","metadata":{"files":{"readme":"ReadMe.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-04-14T14:54:07.000Z","updated_at":"2025-04-28T18:21:47.000Z","dependencies_parsed_at":"2023-10-14T20:30:45.150Z","dependency_job_id":"2e0f39d2-7490-4a5c-a463-a30e6b1c8f5a","html_url":"https://github.com/cypress-io/cypress-design","commit_stats":null,"previous_names":[],"tags_count":965,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cypress-io%2Fcypress-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cypress-io%2Fcypress-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cypress-io%2Fcypress-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cypress-io%2Fcypress-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cypress-io","download_url":"https://codeload.github.com/cypress-io/cypress-design/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252819830,"owners_count":21809101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","design-system","react","vue"],"created_at":"2024-11-09T08:15:21.837Z","updated_at":"2025-05-07T05:25:32.140Z","avatar_url":"https://github.com/cypress-io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cypress Design System\n\n## Usage\n\n### See the docs\n\nThe documentation website for this repo is published after each commit to the main branch.\n\nYou can find the last published version at https://design.cypress.io\n\n### Install the CSS package\n\nFirst install the css package, tailwind and autoprefixer\n\n```bash\nnpm install --save-dev @cypress-design/css tailwindcss autoprefixer\n```\n\nThen configure your tailwind.config.cjs using the following template\n\n```js\n// tailwind.config.cjs\nconst { TailwindConfig } = require('@cypress-design/css')\n\nmodule.exports = TailwindConfig([\n  './index.html',\n  './src/**/*.{vue,js,ts,jsx,tsx}',\n])\n```\n\nCheck it out in the docs [here](./css)\n\n### Install each component independently\n\nComponents need the css package to work properly. Make sure you have fully setup the `@cypress-design/css` before installing any component.\n\nTo make sure each component fix is never blocked by an ongoing refactoring, we decided to publish each component as its own package.\n\nIf you want to install the Cypress Button, run\n\n```bash\nnpm install @cypress-design/vue-button\n```\n\nAt Cypress, we prefer using Vuejs to build new apps.\n\nSince 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.\n\nIf you want to install the Cypress Button, and your project still uses React, install the react version\n\n```bash\nnpm install @cypress-design/react-button\n```\n\nSee [the component ReadMe](./components/) for the list of available components and [the docs](https://cypress-design.vercel.app) for their usage\n\n## Contributing\n\n### Running the docs locally\n\n```bash\nyarn \u0026\u0026 yarn start\n```\n\nThis will:\n\n- install all dependencies if anything is missing\n- build all the components, specially the ones needed for the docs\n- start the docs website locally\n- give you a link to open in your browser. (http://localhost:5173/)\n\n### Create a new component\n\nUsing [hygen](https://hygen.io) we can scaffold all the tooling needed for a new components.\n\nTo start writing a new component, run this command:\n\n```bash\nyarn new:component\n```\n\nThe system will ask you to provide the name of the component and generate all the files needed to start writing it.\n\nIn the new directory, you will find a React and a Vuejs version to complete. Each framework folder will also contain a stories file.\n\n### Adding a new icon\n\nNew icons should be added to the `icon-registry/icons-static` directory and named according to the format `\u003ccategory\u003e-\u003cicon-name\u003e_x\u003csize\u003e.svg`, for example, `object-bug_x24.svg`.\n\nWhen grabbing the icon from Figma, make sure the width and height of the icon is equal to its name (e.g. `x24` icons should be 24x24px). If it isn't, try going up a layer in Figma.\n\nThe name and size should match what's shown in Figma.\n\n![image](copy-svg.png)\n\nOnce added, the svg attributes should be tweaked so as to integrate with the icon generation tooling.\n\n- Remove the `width` and `height` attributes of the SVG\n- Replace the main color fill and/or stroke colors with `currentColor`\n- Add `class=\"icon-dark\"` to paths that are dark, generally the strokes\n- Add `class=\"icon-light\"` to paths that are light, generally the fills\n  - For secondary colors are used in the design, use `class=\"icon-*-secondary\"`\n  - When `fill` and `stroke` attributes are both uses in the path, you can use `class=\"icon-dark-stroke icon-light-fill\"`\n\nTo verify that the icon is properly hooked up, run `yarn \u0026\u0026 yarn start` and navigate to the `icons` page. Search for your icon and tweak the colors.\n\nWhen an icon is added or updated, the changeset for '@cypress-design/icon-registry', '@cypress-design/react-icon' and '@cypress-design/vue-icon' should include a minor version bump. This can be helped by running `yarn changeset`.\n\n### Updating the component generator\n\nWhen 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.\n\nFirst, 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.\n\n```bash\nyarn new:component --name ComponentName\n```\n\nThen do all the changes you want to make to the component template.\n\nEvery time you use `ComponentName` in this template, it will be replaced in generated scaffolding.\n\nFinally, to commit the changes to the template, run\n\n```bash\n# Remove the old template\nrm -rf _templates/component/new\n# start a new hygen-create session\nnpx hygen-create start component\n# add all the files inside the component to the template\nnpx hygen-create add components/ComponentName/**/*\n# remove the file automatically generated by hygen-create\nnpx hygen-create remove hygen-create.json\n# Use ComponentName as a placeholder for the component name\nnpx hygen-create usename ComponentName\n# generate the new template\nnpx hygen-create generate\n# remove the temporary component\nrm -rf components/ComponentName\n# remove the metadata file\nrm -f hygen-create.json\n```\n\nFinally, you should see the `prompt.js` file has been removed. Revert that change before committing.\n\n### Running tests\n\nTo run in open mode, run `yarn cy`.\n\nTo run in CLI, run `yarn cypress run --components`.\n\n## Structure\n\n- [components](./components/) A collection of components for building Cypress applications and websites.\n- [packages](./packages/) Some packages do not fit in css or in components but are used in multiple components. They are here.\n- [css](./css/) What you need to install a pre-configured version of WindiCSS in a Cypress project.\n- [icon-registry](./icon-registry/) contains the list of all the svg icons available in the vue-icon and react-icon components.\n- [docs](./docs/) the docs website.\n- [docs/.vitepress/theme](./docs/.vitepress/theme) where you will find all the components and the assets used in the docs website but not published to NPM.\n- [test](./test/) Some sample test projects. We use them as sanity checks to see if the components we build are actually working with a real setup.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcypress-io%2Fcypress-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcypress-io%2Fcypress-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcypress-io%2Fcypress-design/lists"}