{"id":21835832,"url":"https://github.com/vtex/styleguide","last_synced_at":"2025-04-04T11:15:18.819Z","repository":{"id":20243903,"uuid":"88881460","full_name":"vtex/styleguide","owner":"vtex","description":"The VTEX Design System and React component library.","archived":false,"fork":false,"pushed_at":"2023-10-09T14:37:13.000Z","size":86148,"stargazers_count":165,"open_issues_count":76,"forks_count":33,"subscribers_count":161,"default_branch":"master","last_synced_at":"2024-04-14T22:51:58.859Z","etag":null,"topics":["component-library","design-system","frontend-components","hacktoberfest","react","react-components","react-library","srv-styleguide","styleguide","vtex","xp-developer"],"latest_commit_sha":null,"homepage":"https://styleguide.vtex.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-20T15:28:03.000Z","updated_at":"2024-06-18T15:17:45.820Z","dependencies_parsed_at":"2024-06-18T15:17:20.240Z","dependency_job_id":"3f94fabf-6caa-4f6e-9a8e-c173d9b7cbd3","html_url":"https://github.com/vtex/styleguide","commit_stats":null,"previous_names":[],"tags_count":719,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fstyleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fstyleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fstyleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fstyleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex","download_url":"https://codeload.github.com/vtex/styleguide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"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":["component-library","design-system","frontend-components","hacktoberfest","react","react-components","react-library","srv-styleguide","styleguide","vtex","xp-developer"],"created_at":"2024-11-27T20:25:13.680Z","updated_at":"2025-04-04T11:15:18.798Z","avatar_url":"https://github.com/vtex.png","language":"JavaScript","readme":"# Styleguide\n\n\u003e VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))\n\n- [Usage](#usage)\n- [Developing](#developing)\n  - [Setup](#setup)\n  - [Running](#running)\n- [Developing using npm link](#developing-using-npm-link)\n- [Publishing](#publishing)\n- [Docs](#docs)\n\n## Usage\n\nFor instructions on how to use the Styleguide in your project refer to the page itself: https://vtex.github.io/styleguide/.\n\n## Developing\n\n### Setup\n\n```shell\nyarn install\n```\n\n### Running\n\n```shell\nyarn styleguide\n```\n\n### Storybook\n\nWe use [Storybook](https://storybook.js.org/) environment to help us build and test our components in real time. You can edit the Playground file and add the components you are working on, after this run the command below to see your changes in http://localhost:6006/ :\n\n```shell\nyarn storybook\n```\n\nIf you want to change or add stories, take a look at this [guide](https://github.com/vtex/styleguide/blob/master/.github/CONTRIBUTING.md#storybook-organization) before.\n\n## Developing using `npm link`\n\nRun this in this repo:\n\n```shell\nyarn develop\n```\n\nIn your project run:\n\n```\nnpm link @vtex/styleguide\n```\n\nImport (case a `\u003cButton\u003e` component in lib):\n\n```js\nimport Button from '@vtex/styleguide/lib/Button'\n```\n\n## Testing\n\n### Developing new tests\n\nTo add tests to a component, just add a test file with the `.test.js` extension next to the component implementation.\n\nExample:\n\n```shell\nreact/components/Alert/\n├── README.md\n├── index.js\n└── index.test.js\n```\n\nWe use [react-testing-library](https://github.com/kentcdodds/react-testing-library) to test our components.\n\n### Running tests\n\nTo run the test use:\n\n```shell\nyarn test\n```\n\nYou can also pass the `--watch` flag:\n\n```shell\nyarn test --watch\n```\n\n### Publishing\n\n---\n\nTo post the changelog on Github Release Notes, is required to configure a Personal Token. [See more here](https://www.npmjs.com/package/releasy#settings)\n\nWe use [releasy](https://www.npmjs.com/package/releasy) to publish our styleguide. To publish on both npm and render(VTEX IO) with Github Release Notes, execute the command below:\n\n```shell\nreleasy --stable\n```\n\n### Docs\n\nTo update the docs:\n\n```shell\nyarn deploy\n```\n\n#### Known issues\n\n- Your project has to run with webpack \u003e= 2. Here's a [guide](https://webpack.js.org/migrate/3/) for upgrading Webpack to v2.\n\n- `VTEX Styleguide` is a project built to run on top of either `npm` or `VTEX IO`. To\n  make this viable, we currently use two `package.json` files, one in the top repository\n  folder for `npm`, and one inside the `react` folder for `VTEX IO`. We are\n  looking into how we can improve this architecture, but for now we have to live\n  with duplicated dependencies in these `package.json` files.\n\n  For more info, please refer to https://github.com/vtex/styleguide/issues/483\n\n- We currently have two majors of the Styleguide, `8.x` and `9.x` (master branch).\n  Each major supports a specific VTEX's Render version.\n  This means that we develop new features only on the `master` branch (9.x major) and do bug fixes on both `master` and `8.x` branches.\n\n#### Custom icons\n\nThe `icon` components supports customization through the `\u003cuse\u003e` element available in SVG. [Read more](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use)\n\n**How to use:** In the same page that has a icon, load in any place inside the `\u003chtml\u003e` a SVG with the following structure:\n\n```svg\n\u003csvg class=\"dn\" height=\"0\" version=\"1.1\" width=\"0\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cdefs\u003e\n    \u003cg id=\"icon-columns\"\u003e\n      \u003cpath d=\"M10.8 4.4L9.4 3L5.4 7L3.4 5L2 6.4L5.4 9.8L10.8 4.4Z\" fill=\"currentColor\" /\u003e\n    \u003c/g\u003e\n    \u003cg id=\"OTHER-ICON-ID\"\u003e\n      \u003cpath d=\"M11.7 0.3C11.5 0.1 11.3 0 11 0H10V3C10 3.6 9.6 4 9 4H4C3.4 4 3 3.6 3 3V0H1C0.4 0 0 0.4 0 1V15C0 15.6 0.4 16 1 16H15C15.6 16 16 15.6 16 15V5C16 4.7 15.9 4.5 15.7 4.3L11.7 0.3ZM13 14H3V11C3 10.4 3.4 10 4 10H12C12.6 10 13 10.4 13 11V14Z\" fill=\"currentColor\"/\u003e\n      \u003cpath d=\"M9 0H7V3H9V0Z\" fill=\"currentColor\"/\u003e\n    \u003c/g\u003e\n  \u003c/defs\u003e\n\u003c/svg\u003e\n```\n\n- The ID must match the ID of the icon you want to replace. To see all available options, [view icons folder](https://github.com/vtex/styleguide/tree/master/react/components/icon).\n- Inside one SVG you can have more than one `\u003cg id=\"\"\u003e`, one for each icon you want to update.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Fstyleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex%2Fstyleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Fstyleguide/lists"}