{"id":21890860,"url":"https://github.com/chantastic/component-driven-avatar","last_synced_at":"2026-04-12T11:38:46.643Z","repository":{"id":141974424,"uuid":"532942036","full_name":"chantastic/component-driven-avatar","owner":"chantastic","description":null,"archived":false,"fork":false,"pushed_at":"2022-09-05T15:26:20.000Z","size":3969,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-02T22:29:23.012Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chantastic.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-09-05T14:43:56.000Z","updated_at":"2022-10-27T03:08:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"37926e69-c08f-4427-bc89-6dba1b695632","html_url":"https://github.com/chantastic/component-driven-avatar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fcomponent-driven-avatar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fcomponent-driven-avatar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fcomponent-driven-avatar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fcomponent-driven-avatar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chantastic","download_url":"https://codeload.github.com/chantastic/component-driven-avatar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898458,"owners_count":20528341,"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-11-28T12:17:41.870Z","updated_at":"2026-04-12T11:38:41.623Z","avatar_url":"https://github.com/chantastic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Component-driven Avatar\n\nHey, I'm [chan](https://chan.dev/twitter) 👋\n\nThis repo is setup for a stream with [Nick Taylor](https://twitter.com/nickytonline), on 2022-09-06, at https://www.twitch.tv/nickytonline/.\n\nThe goal of this stream is to build up a basic avatar component (using CSS and React) in Storybook and Chromatic.\n\nThis doc provides a decent amount of guidance for every step of the process.\n\n## `npx storybook repro`\n\n`npx storybook repro` is designed for setting up reproductions.\n\nI like it because it's a great way to start a single component with Storybook.\n\nThe CLI will ask you which `view-layer` and `builder` you'd like to use.\n\n*For this example, select `React` and `webpack`*\n\n## Understand Storybook Scripts\n\nOpen `package.json` or run `yarn run` to see the available Storybook scripts\n\n### `yarn storybook`\n\nThis script runs the Storybook server at `localhost:6006`.\nIt's used for regular development and will — in most cases — update with code changes.\n### `yarn build-storybook`\n\nThis script compiles Storybook into static assets for online hosting.\n\nA compiled Storybook can be hosted anywhere (Netlify, Vercel, AWS, etc.). But Chromatic comes with a few nice features. The most noteable upgrade of using Chromatic's free hosting is the ability to Embed stories.\n\nRun `yarn storybook` to see the Storybook running with the standard set of generated components in the `/stories` directory.\n\n## Set up Chromatic\n\nReference: [Setup and publish Storybook](https://www.chromatic.com/docs/setup)\n\n[Personal story]:\nAs a frontend developer, I like to dial in experiences and add new features. Figuring out deployment and integration is a bit of a slog.\n\nSo, I do it all up front. And I get to validate that CI worked as I naturally do the part that I like.\n\nThat's what we'll do today.\n\n### 1. Create an account at [chromatic.com](https://www.chromatic.com/start)\n\nYou can sign up with whatever method you like.\n\nMy preference is to SSO with whichever git provider I'm using.\nFor me that's GitHub.\n\nIt just saves a few steps as you'll need to connect your git provider anyway.\n\n### 2. Push project to GitHub\n\n### 3. Add project in Chromatic\n\n### 4. Publish Storybook to Chromatic (locally)\n\nAdd `chromatic` as dev dependency:\n\n`yarn add --dev chromatic`\n\nPublish to chromatic using global `chromatic` script and provided project token:\n`npx chromatic --project-token=85b6db193be3`\n\nThis script will build storybook, using the default `yarn build-storybook command` (configurable via CLI, for existing projects).\n\nOnce the `chromatic` successfully builds and uploads to Chromatic (using your project-token), the page will automatically refresh with details about your first Chromatic build.\n\nDecide how to send builds to Chromatic.\n\nThe command line tool will ask if you want to add a `chromatic` script to `package.json` scripts for future use.\nGo with this for now and we can make it more secure before committing it (as the warning suggests).\n\n```\nYour project token was added to the script via the --project-token flag.\nIf you're running Chromatic via continuous integration, we recommend setting\nthe CHROMATIC_PROJECT_TOKEN environment variable in your CI environment.\nYou can then remove the --project-token from your package.json script.\n```\n\nCatch UI changes, by sending a second build.\n\nChromatic will require that you send a second build for comparison. This doesn't have to be committed into code. You can make a local changes here and send it as a build using the global chromatic script.\n\nTo get thru this quickly, change the text on one of these buttons to get a diff.\n\n```js\nexport const Small = Template.bind({});\nSmall.args = {\n  size: 'small',\n  label: 'Small',\n};\n```\n\nRun `yarn chromatic` (the new script that was added after initial run)\n\nSee that Chromatic spotted your changes.\n\n## Explore the UI with Nick\n\n[Open space to explore the partso of the Chromatic UI]\n\n## Understand builds\n\nOne of the hardest parts for me to understand about CI is that *builds are not branches*.\n\nThis is confusing to a lot of folks getting started with CI.\nSo Chromatic has a doc explaining exactly how baselines and diffs are determined.\n\nhttps://www.chromatic.com/docs/branching-and-baselines\n\nWhat we need to understand now is that `Build 1` is our is our baseline. Every build will compare to that.\n\nWhat we're doing in Chromatic is determining if the artifact of that build should update the baseline.\n\nIn this case, we made arbitrary changes. So we're going to reject them.\n\nLet's change our `Small` component back.\n\nPublish a new build that matches the initial to see a build with another green bubble.\n\n## Possible next steps\n- [Automate Chromatic with GitHub Actions](https://www.chromatic.com/docs/github-actions)\n  - This will let us see changes in GitHub\n  - [PRs page](https://www.chromatic.com/pullrequests?appId=63160b911cb40b4b2177896e)\n- Add basic Avatar\n  - This results in a new story but no changes\n- Delete `/stories` directory\n  - This will result in a number of changes\n- Interpret component interfaces with [Storybook docs](https://storybook.js.org/addons/@storybook/addon-docs) and (in our case) `prop-types`\n- interaction-testing with [Play functions](https://storybook.js.org/docs/react/writing-stories/play-function)\n- Storybook features\n  - Viewport, Measure, Outline\n  - addon-accessibility   \n- Chromatic features\n  - Embed (works well in Notion)\n  - Enable various browsers (https://www.chromatic.com/docs/browsers) — not available in free plan\n  - Add [Slack intergration](https://www.chromatic.com/docs/integrations) or [WebHooks](https://www.chromatic.com/docs/integrations)\n  - [UI Review](https://www.chromatic.com/pullrequests?appId=63160b911cb40b4b2177896e) and how it difers from UI Test\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Fcomponent-driven-avatar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantastic%2Fcomponent-driven-avatar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Fcomponent-driven-avatar/lists"}