{"id":13752891,"url":"https://github.com/Checkfront/react-storybook-addon-chapters","last_synced_at":"2025-05-09T20:34:35.464Z","repository":{"id":38237648,"uuid":"84215345","full_name":"Checkfront/react-storybook-addon-chapters","owner":"Checkfront","description":"📒 Showcase multiple React components within a story","archived":false,"fork":false,"pushed_at":"2023-07-11T00:55:58.000Z","size":5286,"stargazers_count":148,"open_issues_count":23,"forks_count":21,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-01T02:01:59.444Z","etag":null,"topics":["categories","chapters","components","react","react-storybook","react-storybook-addons","sections","storybook"],"latest_commit_sha":null,"homepage":"http://checkfront.github.io/react-storybook-addon-chapters","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/Checkfront.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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}},"created_at":"2017-03-07T15:30:16.000Z","updated_at":"2023-11-07T12:44:51.000Z","dependencies_parsed_at":"2024-01-22T18:05:59.780Z","dependency_job_id":null,"html_url":"https://github.com/Checkfront/react-storybook-addon-chapters","commit_stats":{"total_commits":243,"total_committers":39,"mean_commits":6.230769230769231,"dds":0.6296296296296297,"last_synced_commit":"269d79295c56677275df8cbe03501e819ca8757d"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Checkfront%2Freact-storybook-addon-chapters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Checkfront%2Freact-storybook-addon-chapters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Checkfront%2Freact-storybook-addon-chapters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Checkfront%2Freact-storybook-addon-chapters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Checkfront","download_url":"https://codeload.github.com/Checkfront/react-storybook-addon-chapters/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253321797,"owners_count":21890466,"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":["categories","chapters","components","react","react-storybook","react-storybook-addons","sections","storybook"],"created_at":"2024-08-03T09:01:12.234Z","updated_at":"2025-05-09T20:34:31.965Z","avatar_url":"https://github.com/Checkfront.png","language":"JavaScript","funding_links":[],"categories":["Community Addons","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"## ⛔ [DEPRECATED] This addon is no longer maintained and is now considered deprecated in favour of Storybook's native [nesting and component hierarchy](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy). We recommend Storybook version 6 be used instead.\n\n\u003cbr\u003e\n\n# React Storybook Chapters Addon\n\nReact Storybook Chapters addon allows showcasing of multiple components within a story by breaking it down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.\n\nUsing the addon, a story can consist of multiple chapters and a chapter consists of multiple sections. Each section can render a block of code,\nwhich typically used to showcase one component or a particular state of a component.\n\nChapters can be used to group related components together, or show varying states of a component.\nEach chapter comes with a **Chapter Title**, **Chapter Subtitle**, **Chapter Info** and a list of **Sections**.\nSimply omit any of them to hide them from rendering.\n\nEach section comes with a **Section Title**, **Section Subtitle**, **Section Info**.\n\nThis addon was modified from [react-storybook-addon-info](https://github.com/storybooks/react-storybook-addon-info) and uses some of the component code from there.\n\n![React Storybook Screenshot](docs/home-screenshot.png)\n\n## Usage\n\nInstall the following npm module:\n\n```sh\nnpm install --save-dev react-storybook-addon-chapters\n```\n\nThen set the addon in the place you configure storybook like this:\n\n```js\nimport React from 'react';\nimport { configure, setAddon } from '@storybook/react';\nimport chaptersAddon from 'react-storybook-addon-chapters';\n\nsetAddon(chaptersAddon);\n\nconfigure(function () {\n  ...\n}, module);\n```\n\nTo turn off the default styles add:\n\n```js\nsetDefaults({ sectionOptions: { useTheme: false } });\n```\n\nAll rendered components have a specified class. With the 'useTheme' set to false you should have no problem styling your chapters.\n\nThen create your stories with the `.addWithChapters` API.\n\n```js\nimport React from 'react';\nimport Button from './Button';\nimport { storiesOf } from '@storybook/react';\n\nstoriesOf('Addon Chapters')\n  .addWithChapters(\n    'Story With Chapters',\n    {\n      subtitle: \u003cOptional story subtitle\u003e,\n      info: \u003cOptional story info\u003e,\n      chapters: [\n        // List of chapters. Refer to Configuration Format section.\n        {\n          title: \u003cOptional chapter title\u003e,\n          subtitle: \u003cOptional chapter subtitle\u003e,\n          info: \u003cOptional chapter info\u003e,\n          sections: [\n            // List of sections.\n            {\n              title: \u003cOptional section title\u003e,\n              subtitle: \u003cOptional section subtitle\u003e,\n              info: \u003cOptional section info\u003e,\n              sectionFn: () =\u003e (\u003cButton label=\"My Button\" onClick={() =\u003e { alert('Hello World!'); }}/\u003e),\n              options: {\n                showSource: true,\n                allowSourceToggling: true,\n                showPropTables: true,\n                allowPropTablesToggling: true,\n              },\n            },\n            ...\n          ],\n        },\n        ...\n      ]\n    }\n  );\n```\n\n\u003e Have a look at [this example](example/story.js) stories to learn more about the `addWithChapters` API.\n\n## Global options\n\nTo configure default options for all chapter sections (`section.options`), use `setDefaults` in `.storybook/config.js` .\n\n```js\nimport React from 'react';\nimport { configure, setAddon } from '@storybook/react';\nimport chaptersAddon, { setDefaults } from 'react-storybook-addon-chapters';\n\n// optionally override defaults\nsetDefaults({\n  sectionOptions: {\n    showSource: true,\n    allowSourceToggling: true,\n    showPropTables: false,\n    allowPropTablesToggling: true,\n    decorator: story =\u003e (\u003cdiv\u003e{story()}\u003c/div\u003e),\n  }\n});\nsetAddon(chaptersAddon);\n\nconfigure(function () {\n  ...\n}, module);\n```\n\n## Configuration Format\n\n#### Story\n\n| Key      | Description                          | Type              | Default |\n| -------- | ------------------------------------ | ----------------- | ------- |\n| subtitle | Story subtitle                       | String            | -       |\n| info     | Additional information for the story | String (markdown) | -       |\n| chapters | An array of Chapter objects          | Array\u003cChapter\u003e    | -       |\n\n#### Chapter\n\n| Key      | Description                            | Type              | Default |\n| -------- | -------------------------------------- | ----------------- | ------- |\n| title    | Chapter title                          | String            | -       |\n| subtitle | Chapter subtitle                       | String            | -       |\n| info     | Additional information for the chapter | String (markdown) | -       |\n| sections | An array of Section objects            | Array\u003cSection\u003e    | -       |\n\n#### Section\n\n| Key                             | Description                                                                             | Type              | Default |\n| ------------------------------- | --------------------------------------------------------------------------------------- | ----------------- | ------- |\n| title                           | Section title                                                                           | String            | -       |\n| subtitle                        | Section subtitle                                                                        | String            | -       |\n| info                            | Additional information for the section                                                  | String (markdown) | -       |\n| sectionFn                       | A function that returns a React component to be displayed                               | Function          | -       |\n| options                         | A configuration object for this section. Refer to the next few rows for the keys        | Object            | -       |\n| options.showSource              | Display the component's source                                                          | Boolean           | True    |\n| options.allowSourceToggling     | Allow showing/hiding of the component's source                                          | Boolean           | True    |\n| options.showPropTables          | Display the component's propTypes                                                       | Boolean           | False   |\n| options.allowPropTablesToggling | Allow showing/hiding of the component's propTypes                                       | Boolean           | True    |\n| options.decorator               | An optional decorator function that will be used for rendering the component in section | Function          | -       |\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production. When creating components, set the `displayName` static property to show the correct component name on static builds.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCheckfront%2Freact-storybook-addon-chapters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCheckfront%2Freact-storybook-addon-chapters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCheckfront%2Freact-storybook-addon-chapters/lists"}