{"id":21311342,"url":"https://github.com/kickstartds/storybook-addon-copyprops","last_synced_at":"2025-06-10T08:04:32.211Z","repository":{"id":103293882,"uuid":"469094250","full_name":"kickstartDS/storybook-addon-copyprops","owner":"kickstartDS","description":"Copy props of displayed react components in convenient, contextual places in the UI","archived":false,"fork":false,"pushed_at":"2022-03-12T13:43:57.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-10T08:04:25.502Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kickstartDS.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":"2022-03-12T13:43:56.000Z","updated_at":"2022-03-12T13:44:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"10b49daf-65c1-46c8-bae4-b3a66f80683b","html_url":"https://github.com/kickstartDS/storybook-addon-copyprops","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"storybookjs/addon-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-copyprops","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-copyprops/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-copyprops/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-copyprops/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kickstartDS","download_url":"https://codeload.github.com/kickstartDS/storybook-addon-copyprops/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-copyprops/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259033829,"owners_count":22795769,"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-21T17:17:37.911Z","updated_at":"2025-06-10T08:04:32.202Z","avatar_url":"https://github.com/kickstartDS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- README START --\u003e\n\n# Storybook Addon Kit\n\nSimplify the creation of Storybook addons\n\n- 📝 Live-editing in development\n- ⚛️ React/JSX support\n- 📦 Transpiling and bundling with Babel\n- 🏷 Plugin metadata\n- 🚢 Release management with [Auto](https://github.com/intuit/auto)\n- 🧺 Boilerplate and sample code\n- 🛄 ESM support\n- 🛂 TypeScript by default with option to eject to JS\n\n## Getting Started\n\nClick the **Use this template** button to get started.\n\n![](https://user-images.githubusercontent.com/321738/125058439-8d9ef880-e0aa-11eb-9211-e6d7be812959.gif)\n\nClone your repository and install dependencies.\n\n```sh\nyarn\n```\n\n\u003c!-- README END --\u003e\n\n### Development scripts\n\n- `yarn start` runs babel in watch mode and starts Storybook\n- `yarn build` build and package your addon code\n\n### Switch from TypeScript to JavaScript\n\nDon't want to use TypeScript? We offer a handy eject command: `yarn eject-ts`\n\nThis will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.\n\n## What's included?\n\n![Demo](https://user-images.githubusercontent.com/42671/107857205-e7044380-6dfa-11eb-8718-ad02e3ba1a3f.gif)\n\nThe addon code lives in `src`. It demonstrates all core addon related concepts. The three [UI paradigms](https://storybook.js.org/docs/react/addons/addon-types#ui-based-addons)\n\n- `src/Tool.js`\n- `src/Panel.js`\n- `src/Tab.js`\n\nWhich, along with the addon itself, are registered in `src/preset/manager.js`.\n\nManaging State and interacting with a story:\n\n- `src/withGlobals.js` \u0026 `src/Tool.js` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story.\n- `src/withRoundTrip.js` \u0026 `src/Panel.js` demonstrates two-way communication using channels.\n- `src/Tab.js` demonstrates how to use `useParameter` to access the current story's parameters.\n\nYour addon might use one or more of these patterns. Feel free to delete unused code. Update `src/preset/manager.js` and `src/preset/preview.js` accordingly.\n\nLastly, configure you addon name in `src/constants.js`.\n\n### Metadata\n\nStorybook addons are listed in the [catalog](https://storybook.js.org/addons) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`. This project has been configured with sample data. Learn more about available options in the [Addon metadata docs](https://storybook.js.org/docs/react/addons/addon-catalog#addon-metadata).\n\n## Release Management\n\n### Setup\n\nThis project is configured to use [auto](https://github.com/intuit/auto) for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both:\n\n- [`NPM_TOKEN`](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens) Create a token with both _Read and Publish_ permissions.\n- [`GH_TOKEN`](https://github.com/settings/tokens) Create a token with the `repo` scope.\n\nThen open your `package.json` and edit the following fields:\n\n- `name`\n- `author`\n- `repository`\n\n#### Local\n\nTo use `auto` locally create a `.env` file at the root of your project and add your tokens to it:\n\n```bash\nGH_TOKEN=\u003cvalue you just got from GitHub\u003e\nNPM_TOKEN=\u003cvalue you just got from npm\u003e\n```\n\nLastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.\n\n```bash\nnpx auto create-labels\n```\n\nIf you check on GitHub, you’ll now see a set of labels that `auto` would like you to use. Use these to tag future pull requests.\n\n#### GitHub Actions\n\nThis template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository.\n\nGo to `Settings \u003e Secrets`, click `New repository secret`, and add your `NPM_TOKEN`.\n\n### Creating a release\n\nTo create a release locally you can run the following command, otherwise the GitHub action will make the release for you.\n\n```sh\nyarn release\n```\n\nThat will:\n\n- Build and package the addon code\n- Bump the version\n- Push a release to GitHub and npm\n- Push a changelog to GitHub\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkickstartds%2Fstorybook-addon-copyprops","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkickstartds%2Fstorybook-addon-copyprops","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkickstartds%2Fstorybook-addon-copyprops/lists"}