{"id":23788520,"url":"https://github.com/react-theming/addon-development-kit","last_synced_at":"2025-09-06T06:32:37.015Z","repository":{"id":35838368,"uuid":"80739495","full_name":"react-theming/addon-development-kit","owner":"react-theming","description":"Addon Development Kit for Storybook","archived":false,"fork":false,"pushed_at":"2023-03-20T23:46:25.000Z","size":4840,"stargazers_count":34,"open_issues_count":8,"forks_count":13,"subscribers_count":64,"default_branch":"master","last_synced_at":"2025-08-18T02:41:06.656Z","etag":null,"topics":["addon","development","react","reactjs","storybook"],"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/react-theming.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2017-02-02T15:39:52.000Z","updated_at":"2024-10-16T11:40:01.000Z","dependencies_parsed_at":"2024-06-18T15:45:42.954Z","dependency_job_id":null,"html_url":"https://github.com/react-theming/addon-development-kit","commit_stats":null,"previous_names":["storybookjs/addon-development-kit","sm-react/storybook-adk"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/react-theming/addon-development-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-theming%2Faddon-development-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-theming%2Faddon-development-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-theming%2Faddon-development-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-theming%2Faddon-development-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-theming","download_url":"https://codeload.github.com/react-theming/addon-development-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-theming%2Faddon-development-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273867388,"owners_count":25182423,"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","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["addon","development","react","reactjs","storybook"],"created_at":"2025-01-01T16:27:48.255Z","updated_at":"2025-09-06T06:32:36.640Z","avatar_url":"https://github.com/react-theming.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/%40storybook%2Faddon-devkit.svg)](https://badge.fury.io/js/%40storybook%2Faddon-devkit)\n![npm](https://img.shields.io/npm/dt/@storybook/addon-devkit)\n\n# Storybook ADK\n\n\u003e Some of features originally introduced in this package are already available via Storybook API. Please consider https://github.com/storybookjs/addon-kit first, which is a simple Github repo template that uses the latest addon APIs.\n\nThis kit provides additional middleware for Storybook API and can be used for creating addons based on this.\n\nSimplifies the addons creation. Keeps in sync addon's data through the channel. Provides intelligent blocks for creating addon UI. Offer simple API for registering addons and creating decorators. It's a base to quickly build your custom brand new awesome addon\n\n## Features\n\n- Hides under the hood all the complex issues of communication through the channel and data synchronization while switching stories.\n- Connects your addon components to your addon store via HOCs and updates it only when data changes\n- Divides addon store data to global and local. Tracks story surfing in order to switch appropriate local data both on manager and preview sides simultaneously\n- Keeps immutable init data and overridable data which you mutate via actions\n- Provides redux like approach to deal with your addon store via selectors and actions (but don't worry, the default action just simply override your data)\n- Allows to connect any amount of pannels, buttons and any other addon types to the single addon store\n- Offers UI container which automatically reflects the aspect ratio of addon panel. Extremely useful to create addon UI responsive for vertical and horizontal panel positions\n- Includes Typescript definitions\n\n## Usage\n\n```shell\nnpm i --save @storybook/addon-devkit\n```\n\n```js\nimport {\n  register,\n  createDecorator,\n  setParameters,\n  setConfig,\n  Layout,\n  Block,\n} from '@storybook/addon-devkit'\n\n```\n\n## API\n\n### Register manager side Addon panel\n\nHOC to register addon UI and connect it to the addon store.\n\n```js\n// in your addon `register.js`\nimport { register } from '@storybook/addon-devkit'\n\nregister(\n  {\n    ...selectors,\n  },\n  ({ global, local }) =\u003e ({\n    ...globalActions,\n    ...localActions,\n  })\n)(AddonPanelUI);\n\n\n```\n\nwhere `selectors` is an object with functions like:\n\n```js\n{\n  deepData: store =\u003e store.path.to.deep.store.data,\n}\n\n```\n\nand `actions` could be \"global\" and \"local\". Global actions affects on the global part of store, while local only on the data related to the current story.\n\n```js\n\n({ global, local }) =\u003e ({\n    // action to manipulate with common data\n    increase: global(store =\u003e ({\n      ...store,\n      index: store.index + 1,\n    })),\n    // action to manipulate with current story data\n    // usage: setBackground('#ff66cc')\n    setBackground: local((store, color) =\u003e ({\n      ...store,\n      backgroundColor: color,\n    })),\n    // action to override data\n    // usage: update({...newData})\n    update: global(),\n  })\n\n```\n\nAddonPanelUI - is your component which appears on addon panel when you select appropriate tab\n\u003e Note: the HOC automatically track the `active` state of addon and shows it only when it's necessary\n\nregister HOC will pass the follow props to the `AddonPanelUI` component:\n\n```js\n\u003cAddonPanelUI\n  {...actions} // generated actions\n  {...selectors} // selected pieces of store\n  api={api} // storybook API object\n  active={active} // you don't need to do anything with it\n  store={store} // entire store. prefer to use selectors\n  kind={kind} // current story kind\n  story={story} // current story\n  ADDON_ID={ADDON_ID}\n  PANEL_ID={PANEL_ID}\n  PANEL_Title={PANEL_Title} // Title on the addon panel\n  rect={rect} // dimensions of panel area\n/\u003e\n\n```\n\nAs soon as you change the store via actions both the `AddonPanelUI` and `storyDecorator` will be re-rendered with the new data.\n\nSame if the data will come from the story - it will be updated\n\nAfter initialization HOC will wait for init data from story and only after it will render UI\n\n\n### Create stories side decorator\n\nHOC to create decorator and connect it to the addon store.\n\n```js\n// in your addon `decorator.js`\nimport { createDecorator } from '@storybook/addon-devkit'\n\nexport const withMyAddon = createDecorator({\n    ...selectors,\n  },\n  ({ global, local }) =\u003e ({\n    ...globalActions,\n    ...localActions,\n  })\n)(DecoratorUI, { isGlobal });\n\n```\n\nso then you can use your decorator this way:\n\n```js\n// stories.js\n\nimport React from 'react';\nimport { storiesOf, addDecorator, addParameters } from '@storybook/react';\nimport { withMyAddon, myAddonParams } from 'my-addon';\n\n// add decorator globally\naddDecorator(withMyAddon({ ...initData }))\naddParameters(myAddonParams({ ...globalParams }))\n\nstoriesOf('My UI Kit', module)\n  // ...or add decorator locally\n  .addDecorator(withMyAddon({ ...initData }))\n  .add(\n    'Awesome',\n    () =\u003e \u003cButton\u003eMake Awesome\u003c/Button\u003e,\n    myAddonParams({ ...localParams })\n  )\n\n```\n\n`DecoratorUI` could look like this:\n\n```js\n\nconst DecoratorUI = ({ context, getStory, selectedData }) =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eTitle: {selectedData}\u003c/h1\u003e\n    {getStory(context)}\n  \u003c/div\u003e\n);\n```\n\nWhen `isGlobal = true` decorator will consider all passing data as global\n\n\u003eNote: addon parameters will be merged with init data and available both for decorator and panel selectors\n\n\n### Pass parameters to addon\n\nCreates functions for passing parameters to your addon\n\nSee usage above\n\n```js\nimport { setParameters } from '@storybook/addon-devkit'\n\nexport const myAddonParams = setParameters()\n\n```\n\n### Addon config\n\nIn order to create addon you need to specify some unique parameters like event name, addon title, parameters key and others. They should be same on manager and preview sides. If you don't specify them addon-devkit will use the default ones.\nTo specify your own use `setConfig`:\n\n```js\nimport { setConfig } from '@storybook/addon-devkit';\n\nsetConfig({\n  addId: 'dev_adk',\n  panelTitle: 'ADK DEV'\n});\n\n```\nYou should run it **before** using `register`, `setParameters` and `createDecorator`\n\n\u003eNote: don't forget to use setConfig both in on manager and preview sides with the same parameters\n\n\n### Addon panel UI components\n\nComponents to organize UI in a row when panel in bottom position and in column when it on the right side\n\n```js\nimport { Layout, Block, register } from '@storybook/addon-devkit';\nimport { styled } from '@storybook/theming';\nimport './config'\n\nconst LayoutBlock = styled(Layout)`\n  ...styles\n`\n\nconst AddonBlock = styled(Block)`\n  ...styles\n`\n\nconst AddonPanel = () =\u003e (\n  \u003cLayoutBlock\u003e\n    \u003cAddonBlock size={200}\u003e\n      {UI1}\n    \u003c/AddonBlock\u003e\n    \u003cAddonBlock\u003e\n      {UI2}\n    \u003c/AddonBlock\u003e\n    \u003cAddonBlock\u003e\n      {UI3}\n    \u003c/AddonBlock\u003e\n  \u003c/LayoutBlock\u003e\n)\n\nregister()(AddonPanel)\n\n```\n\n`\u003cLayout\u003e` has `display: flex` with `flex-direction: row` when bottom and `flex-direction: column` in right side.\n\nYou can specify the size of `\u003cBlock\u003e`. In case of horizontal layout it will be the width, in case of vertical - height of element.\n\nOtherwise it will have `flex-grow: 1`\n\n## Credits\n\n\u003cdiv align=\"left\" style=\"height: 16px;\"\u003eCreated with ❤︎ to \u003cb\u003eReact\u003c/b\u003e and \u003cb\u003eStorybook\u003c/b\u003e by \u003ca href=\"https://twitter.com/UsulPro\"\u003eOleg Proskurin\u003c/a\u003e  [\u003ca href=\"https://github.com/react-theming\"\u003eReact Theming\u003c/a\u003e]\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-theming%2Faddon-development-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-theming%2Faddon-development-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-theming%2Faddon-development-kit/lists"}