{"id":15013506,"url":"https://github.com/meteor/chromatic","last_synced_at":"2025-04-06T01:09:15.870Z","repository":{"id":6240449,"uuid":"55166576","full_name":"meteor/chromatic","owner":"meteor","description":"Chromatic component explorer","archived":false,"fork":false,"pushed_at":"2023-03-01T10:34:18.000Z","size":1419,"stargazers_count":281,"open_issues_count":4,"forks_count":18,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-03-28T17:54:33.982Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/meteor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","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}},"created_at":"2016-03-31T16:39:48.000Z","updated_at":"2024-11-10T10:44:56.000Z","dependencies_parsed_at":"2024-09-30T05:20:45.645Z","dependency_job_id":"e2979e6f-b297-4527-9bc1-86623100a924","html_url":"https://github.com/meteor/chromatic","commit_stats":{"total_commits":230,"total_committers":27,"mean_commits":8.518518518518519,"dds":0.7782608695652173,"last_synced_commit":"84704d5131c645f42a92f79f180f93a1116e179e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteor%2Fchromatic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteor%2Fchromatic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteor%2Fchromatic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteor%2Fchromatic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meteor","download_url":"https://codeload.github.com/meteor/chromatic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419860,"owners_count":20936012,"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":["hacktoberfest"],"created_at":"2024-09-24T19:44:22.159Z","updated_at":"2025-04-06T01:09:15.842Z","avatar_url":"https://github.com/meteor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Note:** This project is no longer maintained. We suggest using [Storybook](https://storybook.js.org/) as your [component explorer](https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a). The creators of this project now build [Chromatic QA](https://www.chromaticqa.com/) an automated visual testing tool for UI components and component libraries. \n\n# Chromatic\nExplore, visualize, and prototype your UI components.\n\n## Demo\n[![Chromatic demo video](https://raw.githubusercontent.com/meteor/chromatic/dom/more-documentation/thumbnail-video.png)](https://www.youtube.com/watch?v=dlMe7u02m50)\n\n## Usage\n\n```bash\nmeteor add mdg:chromatic\n```\nMake Chromatic available at `/styleguide` in your app in development mode:\n```js\nconst {ChromaticExplorer} = Package['mdg:chromatic-explorer'] || {};\n```\n\n## Importing Chromatic\nVersions 0.0.x of these packages are compatible with Meteor 1.2\n```js\nconst { Chromatic } = Package['mdg:chromatic-api'] || {};\n```\nVersions 0.1.x are compatible with Meteor 1.3\n```js\nimport { Chromatic } from 'meteor/mdg:chromatic';\n```\n\n## Installing Component Explorer\nConfigure the URL:\n```js\nimport { ChromaticExplorer } from 'meteor/mdg:chromatic';\n\nif (ChromaticExplorer) {\n  ChromaticExplorer.configure({ basePath: '/styleguide' });\n}\n```\n\n## Write Component Specs\n=======\n```js\nimport { Chromatic } from 'meteor/mdg:chromatic';\n\nComponentName = React.createClass({\n  // code\n});\n\nif (Chromatic) {\n  Chromatic.add(ComponentName, {\n    specs: [\n      new Chromatic.Spec('specName1', {\n        props: {\n          // props used by your component\n        }\n      }),\n      new Chromatic.Spec('specName2', {\n        props: {\n          // props used by your component\n        }\n      })\n    ]\n  });\n}\n```\n\n## Component packages\n```bash\nmdg:animations\nmdg:buttons\nmdg:callout\nmdg:code-block\nmdg:color-grid\nmdg:date-components\nmdg:form-components\nmdg:list\nmdg:loading-spinner\nmdg:overlays\nmdg:sortable\nmdg:tooltips\nmdg:outlines\n```\n\n## NPM Dependencies\nSome of these UI components have NPM dependencies, here is the full list that you may need (taken from Chromatic's `package.json`)\n```\n  \"dependencies\": {\n    \"autosize\": \"3.0.15\",\n    \"classnames\": \"^2.2.5\",\n    \"react\": \"^15.1.0\",\n    \"react\": \"^15.2.1\",\n    \"react-addons-create-fragment\": \"^15.2.1\",\n    \"react-addons-css-transition-group\": \"^15.2.1\",\n    \"react-addons-linked-state-mixin\": \"^15.2.1\",\n    \"react-addons-perf\": \"^15.2.1\",\n    \"react-addons-pure-render-mixin\": \"^15.2.1\",\n    \"react-addons-test-utils\": \"^15.2.1\",\n    \"react-addons-transition-group\": \"^15.2.1\",\n    \"react-addons-update\": \"^15.2.1\",\n    \"react-dom\": \"^15.2.1\",\n    \"react-input-autosize\": \"^1.1.0\",\n    \"react-input-mask\": \"^0.7.2\",\n    \"velocity-animate\": \"^1.2.3\",\n    \"velocity-react\": \"\u003e=1.1.4\"\n  }\n```\n\n## Circular references\nWhen extending Chromatic itself you may need to import the API directly to avoid circular references:\n```js\nimport { Chromatic } from 'meteor/mdg:chromatic-api';\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteor%2Fchromatic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeteor%2Fchromatic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteor%2Fchromatic/lists"}