{"id":13990822,"url":"https://github.com/Clever/components","last_synced_at":"2025-07-22T13:31:36.700Z","repository":{"id":37431039,"uuid":"46310590","full_name":"Clever/components","owner":"Clever","description":"Frontend components","archived":false,"fork":false,"pushed_at":"2025-07-20T16:01:12.000Z","size":45483,"stargazers_count":23,"open_issues_count":15,"forks_count":0,"subscribers_count":60,"default_branch":"master","last_synced_at":"2025-07-20T18:06:28.207Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://clever.github.io/components/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Clever.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-11-16T23:47:29.000Z","updated_at":"2025-05-19T22:34:00.000Z","dependencies_parsed_at":"2024-06-21T05:44:28.709Z","dependency_job_id":"36d75cc3-8434-4118-b9a6-d3fefa7ea0fb","html_url":"https://github.com/Clever/components","commit_stats":{"total_commits":2230,"total_committers":126,"mean_commits":17.6984126984127,"dds":0.9219730941704036,"last_synced_commit":"e4c0cbe3a0a2612aab246732e17fa4a70a318388"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/Clever/components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clever%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clever%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clever%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clever%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Clever","download_url":"https://codeload.github.com/Clever/components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clever%2Fcomponents/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266172069,"owners_count":23887515,"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":[],"created_at":"2024-08-09T13:03:19.412Z","updated_at":"2025-07-22T13:31:36.687Z","avatar_url":"https://github.com/Clever.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Clever Design System\n\nCheck out [documentation and live examples](https://clever.github.io/components/#/intro) for Dewey, as well as our [getting starting guide](https://clever.github.io/components/#/getting-started).\n\n## Development\n\n### Adding a new component\n\nThe following command will create a new component shell in `src/MyNewComponent/` along with a starter test file and demo boilerplate:\n\n```sh\n./bin/new_component.sh MyNewComponent\n```\n\nYou can also create additional sub-components in any existing directory by running:\n\n```sh\n./bin/new_sub_component.sh MyNewSubComponent ./src/MyNewComponent\n```\n\nYou can then modify the component and demo code as needed.\nYour new component can be viewed at `http://localhost:5010/#/components/my-new-component` while the demo server is running.\n\n#### Component List\n\nAfter creating a new component, make sure to add it to the Component List in `ComponentsView.jsx`. To do so:\n\n- Add an entry in `ComponentsView.componentsToDisplay` using this template:\n  ```\n  {\n    componentLink: \"\u003cCOMPONENT LINK\u003e\",\n    componentImg: \"\u003cCOMPONENT LINK\u003e.png\",\n    componentName: \"\u003cCOMPONENT NAME\u003e\",\n    componentImgAlt: \"A \u003cCOMPONENT NAME\u003e component\",\n  },\n  ```\n- Add a screenshot of the component in `docs/assets/img` with the format `\u003cCOMPONENT LINK\u003e.png`\n\n### Adding new SVGs\n\nWe use SVGs as JSX components for `Icon`s, following this process:\n\n1. Optimize the svg at [svgomg](https://jakearchibald.github.io/svgomg/)\n2. Make it React compatible with double quotes option at [svg2jsx](http://svg2jsx.herokuapp.com/)\n3. Prefix DOM Ids and classnames with component name if necessary\n4. Add it to the code:\n   - Create a new file in `src/Icon/icons/\u003c\u003cNewIcon\u003e\u003e.jsx`\n   - Add to `src/Icon/icons/index.jsx` and `src/Icon/Icon.jsx`\n\n### Running the demo server locally\n\nStart up the demo server by running\n\n```sh\nmake dev-server\n```\n\n### Testing locally on a repo that uses these components\n\nFor Clever engs, refer to [this doc on how to test your changes in the context of other apps](https://clever.atlassian.net/wiki/spaces/ENG/pages/2471526424/Testing+Dewey+Components+Locally+in+Launchpad).\n\nIn short, if you want to test changes you've made to this repo in the context of another repo that uses `clever-components`, run the `components` repo's `make build` command and use the freshly generated `dist` directory in replacement of the `clever-components/dist` directory on your other project's repository.\n\n### Updating the production documentation\nAs part of any PR that changes the documentation, you should run, after your code has merged:\n`\u003e make deploy-docs`\n\nIf many people forget this step, it's possible that the above `deploy-docs` target has issues. One of these is that the `deploy.sh`'s script's `git subtree push` command fails. If that's the case, try forcing the `git subtree push` in this manner:\n\n```\ngit push origin `git subtree split --prefix docs master`:gh-pages --force\n```\n\nAnd then re-run the `make deploy-docs` command.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FClever%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FClever%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FClever%2Fcomponents/lists"}