├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ └── feature_request.md └── workflows │ ├── check-pushes.yml │ ├── deploy-ghpages.yml │ └── release.yml ├── .gitignore ├── .nvmrc ├── .prettierignore ├── CHANGELOG.md ├── CHANGELOG.v1-6.md ├── CODEOWNERS ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── packages ├── examples │ ├── .gitignore │ ├── .storybook │ │ ├── main.ts │ │ ├── manager-head.html │ │ └── manager.ts │ ├── assets │ │ ├── logo-with-text.svg │ │ ├── logo.png │ │ ├── logo.svg │ │ └── sample.png │ ├── package.json │ ├── stories │ │ ├── Button.css │ │ ├── Button.jsx │ │ ├── docs │ │ │ ├── 0.quickStart.mdx │ │ │ ├── advanced │ │ │ │ ├── docs.mdx │ │ │ │ ├── hide-tab.mdx │ │ │ │ └── index.stories.jsx │ │ │ ├── figma │ │ │ │ ├── README.mdx │ │ │ │ ├── examples.mdx │ │ │ │ └── examples.stories.jsx │ │ │ ├── figspec │ │ │ │ └── README.mdx │ │ │ ├── iframe │ │ │ │ ├── Docs.mdx │ │ │ │ ├── README.mdx │ │ │ │ └── index.stories.jsx │ │ │ ├── image │ │ │ │ ├── Docs.mdx │ │ │ │ ├── README.mdx │ │ │ │ └── index.stories.jsx │ │ │ └── link │ │ │ │ ├── Docs.mdx │ │ │ │ ├── README.mdx │ │ │ │ └── index.stories.jsx │ │ ├── internal │ │ │ └── blocks │ │ │ │ ├── 0.common.mdx │ │ │ │ ├── 1.design.mdx │ │ │ │ ├── 1.design.stories.jsx │ │ │ │ ├── figma-spec.mdx │ │ │ │ ├── figma.mdx │ │ │ │ ├── iframe.mdx │ │ │ │ └── image.mdx │ │ └── tests │ │ │ ├── disabled.stories.jsx │ │ │ ├── issues │ │ │ ├── 14 │ │ │ │ ├── step1.stories.jsx │ │ │ │ └── step2.stories.jsx │ │ │ ├── 39 │ │ │ │ └── index.stories.jsx │ │ │ ├── 156.stories.tsx │ │ │ ├── 164.stories.jsx │ │ │ ├── 239.stories.jsx │ │ │ ├── 81.stories.jsx │ │ │ └── 83.stories.jsx │ │ │ └── placeholder.stories.jsx │ ├── tsconfig.json │ └── types.d.ts └── storybook-addon-designs │ ├── .gitignore │ ├── .npmignore │ ├── CHANGELOG.md │ ├── package.json │ ├── preset.js │ ├── src │ ├── blocks.tsx │ ├── config.ts │ ├── constants.ts │ ├── index.ts │ ├── lib.d.ts │ ├── manager │ │ ├── components │ │ │ ├── ErrorBoundary.tsx │ │ │ ├── Figma.tsx │ │ │ ├── Figspec.tsx │ │ │ ├── IFrame.tsx │ │ │ ├── Image.tsx │ │ │ ├── LinkPanel.tsx │ │ │ ├── Pan.tsx │ │ │ ├── Sketch.tsx │ │ │ ├── Tabs.tsx │ │ │ ├── Wrapper.tsx │ │ │ ├── ZoomButtons.tsx │ │ │ └── hooks │ │ │ │ ├── usePage.ts │ │ │ │ ├── usePan.ts │ │ │ │ └── useZoom.ts │ │ ├── containers │ │ │ └── Wrapper.tsx │ │ └── register.tsx │ ├── preset.ts │ ├── register-panel.ts │ └── register-tab.ts │ ├── tsconfig.json │ └── tsup.config.ts └── vercel.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_size = 2 8 | indent_style = space 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug report 2 | description: File a bug report 3 | labels: 4 | - "category: bug" 5 | body: 6 | - type: checkboxes 7 | id: design_types 8 | attributes: 9 | label: Affected design types 10 | description: Which design `type` is affected by the bug? 11 | options: 12 | - label: figma 13 | - label: figspec 14 | - label: link 15 | - label: image 16 | - label: iframe 17 | - type: textarea 18 | id: bug_description 19 | attributes: 20 | label: Describe the bug 21 | description: | 22 | A clear and concise description of what the bug is. 23 | If there is an error message related to the bug, please include the error message. 24 | placeholder: Design tab does not appear on addon panel. 25 | validations: 26 | required: true 27 | - type: textarea 28 | id: reproduction 29 | attributes: 30 | label: How to reproduce the bug? 31 | description: | 32 | Please describe how to reproduce the bug. 33 | If you have a reproduction repository or sandbox, please attach the link. 34 | placeholder: | 35 | 1. Open official examples page 36 | 2. Navigate to "Docs / Figma / Examples - Embed File" 37 | 3. See the error message 38 | validations: 39 | required: true 40 | - type: textarea 41 | id: expected_behaviour 42 | attributes: 43 | label: Expected behaviour 44 | description: A clear and concise description of what you expected to happen. 45 | placeholder: Story renders without any errors. 46 | validations: 47 | required: true 48 | - type: checkboxes 49 | id: browsers 50 | attributes: 51 | label: Environment 52 | description: If your problem is specific to some browsers, select these ones. 53 | options: 54 | - label: Chrome / Chromium / Chromium based browsers 55 | - label: Firefox 56 | - label: macOS Safari 57 | - label: iOS Safari 58 | - label: Samsung Internet 59 | - label: Other 60 | - type: input 61 | id: affected_versions 62 | attributes: 63 | label: Affected versions 64 | description: | 65 | Which version of `@storybook/addon-designs` do you use? 66 | You can find the installed version by `npm list @storybook/addon-designs --depth 0` or `yarn list --pattern @storybook/addon-designs --depth 0`. 67 | If you know which version introduced the bug, please write that instead. 68 | placeholder: "6.0.1" 69 | validations: 70 | required: true 71 | - type: input 72 | id: storybook_core_versions 73 | attributes: 74 | label: Storybook versions 75 | description: Which version of `@storybook/*` do you use? 76 | placeholder: "6.3.0" 77 | validations: 78 | required: true 79 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: "category: feature" 6 | assignees: "" 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **Design types** 19 | 20 | - [ ] `figma` 21 | - [ ] `figspec` 22 | - [ ] `link` 23 | - [ ] `image` 24 | - [ ] `iframe` 25 | 26 | **Additional context** 27 | Add any other context or screenshots about the feature request here. 28 | -------------------------------------------------------------------------------- /.github/workflows/check-pushes.yml: -------------------------------------------------------------------------------- 1 | name: Check code validity 2 | 3 | on: [push] 4 | 5 | jobs: 6 | check: 7 | name: Check code format and TypeScript types 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 11 | uses: actions/checkout@v4 12 | - name: Setup Node.js 13 | uses: actions/setup-node@v4 14 | with: 15 | node-version-file: .nvmrc 16 | cache: npm 17 | - name: Install dependencies 18 | run: npm ci 19 | - name: Check files are formatted with Prettier 20 | run: npx prettier --check README.md CONTRIBUTING.md package.json "packages/**/*.{js,jsx,ts,tsx,md,mdx,json}" 21 | - name: Check TypeScript typings 22 | run: | 23 | cd packages/storybook-addon-designs 24 | npx tsc --noEmit 25 | -------------------------------------------------------------------------------- /.github/workflows/deploy-ghpages.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | tags-ignore: 8 | - "*" 9 | 10 | jobs: 11 | build: 12 | name: Build live examples 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout 16 | uses: actions/checkout@v4 17 | - name: Setup Node.js 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version-file: .nvmrc 21 | cache: npm 22 | - name: Install dependencies 23 | run: npm ci 24 | - name: Build addon 25 | run: npm run build 26 | - name: Build examples 27 | run: npm run build:example 28 | - name: Upload Pages artifact 29 | uses: actions/upload-pages-artifact@v2 30 | with: 31 | path: ./packages/examples/storybook-static 32 | 33 | deploy: 34 | name: Deploy 35 | needs: build 36 | permissions: 37 | pages: write 38 | id-token: write 39 | environment: 40 | name: github-pages 41 | url: ${{ steps.deployment.outputs.page_url }} 42 | runs-on: ubuntu-latest 43 | steps: 44 | - name: Deploy to GitHub Pages 45 | id: deployment 46 | uses: actions/deploy-pages@v2 47 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: [push] 4 | 5 | jobs: 6 | release: 7 | runs-on: ubuntu-latest 8 | if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')" 9 | steps: 10 | - uses: actions/checkout@v4 11 | 12 | - name: Prepare repository 13 | run: git fetch --unshallow --tags 14 | 15 | - name: Use Node.js 22.x 16 | uses: actions/setup-node@v4 17 | with: 18 | node-version: 22.x 19 | cache: npm 20 | - name: Install dependencies 21 | run: npm install --ignore-scripts 22 | 23 | - name: Create Release 24 | env: 25 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} 26 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 27 | run: | 28 | npm run release 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Do not add your OS/IDE/Editor specific files to here. 2 | # Please use global ignore instead, FTW. 3 | # https://help.github.com/articles/ignoring-files/#create-a-global-gitignore 4 | 5 | node_modules 6 | dist 7 | *.log 8 | .env 9 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18.19.0 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | storybook-static 2 | cjs 3 | esm 4 | CHANGELOG.md 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG.md 2 | 3 | See `@storybook/addon-designs` [CHANGELOG.md](./packages/storybook-addon-designs/CHANGELOG.md). 4 | 5 | For older versions, see [CHANGELOG.v1-6.md](./CHANGELOG.v1-6.md). 6 | -------------------------------------------------------------------------------- /CHANGELOG.v1-6.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [Unreleased] 9 | 10 | ### Changed 11 | 12 | - Bump the minimum supported Storybook version to v6.4.x. ([605f751](https://github.com/pocka/storybook-addon-designs/commit/605f75145aca453f8b6d1d3e432b493e3be5bc0c)) 13 | 14 | ### Added 15 | 16 | - `sketch` type. ([4e75ddf](https://github.com/pocka/storybook-addon-designs/commit/4e75ddfbc46ec5760db198cbf6d0d8a4074987db)) 17 | - Support for Storybook v7. ([#160](https://github.com/pocka/storybook-addon-designs/pull/160), [#173](https://github.com/pocka/storybook-addon-designs/pull/173), [3789d09](https://github.com/pocka/storybook-addon-designs/commit/3789d09d34166a87b11026120bae4eed2f45166a)) 18 | 19 | ### Fixed 20 | 21 | - Declare necessary `peerDependencies`. ([#133](https://github.com/pocka/storybook-addon-designs/pull/133), [dc8dac0](https://github.com/pocka/storybook-addon-designs/commit/dc8dac0a66224a2d6842c2e3bd6127860023f078)) 22 | - Improve content loading performance by retaining loaded content. ([#157](https://github.com/pocka/storybook-addon-designs/pull/157)) 23 | - Fix addon crashes when `type` is not absent. ([9eeb0e2](https://github.com/pocka/storybook-addon-designs/commit/9eeb0e2786f2f3e425df592a28f4fb33af5d00b9)) 24 | - Prevent the entire Storybook UI crash when uncaught error thrown in the addon. ([e51e907](https://github.com/pocka/storybook-addon-designs/commit/e51e90791e4ed71413e023de472a6ead0cae52c2)) 25 | 26 | ## [6.3.1] - 2022-06-14 27 | 28 | ### Fixed 29 | 30 | - Include `blocks.d.ts` in published tarball. ([d966871](https://github.com/pocka/storybook-addon-designs/commit/d966871785d87e7f919b37bb686460bb51e21697)) 31 | 32 | ## [6.3.0] - 2022-06-14 33 | 34 | ### Added 35 | 36 | - Export panel name as `PanelName`. ([851b486](https://github.com/pocka/storybook-addon-designs/commit/851b486543475384173532be27702e6a776b827d)) 37 | 38 | ### Fixed 39 | 40 | - Add type definition file for `storybook-addon-designs/blocks`. ([4bf0125](https://github.com/pocka/storybook-addon-designs/commit/4bf012598b476b891779f35d614f9b212af24765)) 41 | 42 | ## [6.2.1] - 2022-01-06 43 | 44 | ### Fixed 45 | 46 | - Fix `Design` tab does not appear when `renderTarget: "tab"`. ([#134](https://github.com/pocka/storybook-addon-designs/issues/134)) 47 | 48 | ## [6.2.0] - 2021-10-03 49 | 50 | ### Deprecated 51 | 52 | - `experimental-figspec` type. Use `figspec` type instead. The parameter interface is same, just replace the `type` property. ([#127](https://github.com/pocka/storybook-addon-designs/pull/127)) 53 | 54 | ### Added 55 | 56 | - `figspec` type ([#127](https://github.com/pocka/storybook-addon-designs/pull/127)). 57 | 58 | ## [6.1.0] - 2021-08-22 59 | 60 | ### Added 61 | 62 | - An ability to customize addon tab name via `name` property ([#112](https://github.com/pocka/storybook-addon-designs/pull/112)). 63 | - Show the number of design specs in addon tab name ([#112](https://github.com/pocka/storybook-addon-designs/pull/112)). 64 | 65 | ## [6.0.1] - 2021-07-04 66 | 67 | ### Fixed 68 | 69 | - Fix our Doc Blocks causes a runtime error on some Storybook versions ([#110](https://github.com/pocka/storybook-addon-designs/pull/110)). 70 | 71 | ## [6.0.0] - 2021-05-17 72 | 73 | ### Removed 74 | 75 | - PDF embedding ([5085b1c](https://github.com/pocka/storybook-addon-designs/commit/5085b1c9a9b0829fa5e2ed1ebba11c46d54dcb1a)). 76 | - Support for Storybook@v5.x ([6598be6](https://github.com/pocka/storybook-addon-designs/commit/6598be61ae6869ff6b50e502330d4fcd71b44d8f)). 77 | 78 | ### Added 79 | 80 | - Experimental [Figspec](https://github.com/pocka/figspec) embedding (enchanced Figma embeds powered by Figma API), see [here][figspec-usage] for the usage ([7066b62](https://github.com/pocka/storybook-addon-designs/commit/7066b62a2836f4b8b480b81e1c17d60f3f41b752)). 81 | 82 | [figspec-usage]: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-figspec-readme--page 83 | 84 | ### Fixed 85 | 86 | - Improve reliablity between story/design changes ([#97](https://github.com/pocka/storybook-addon-designs/pull/97)). 87 | - Remove `peerDependencies`, which is used as constraints for transitive dependencies ([94bcd84](https://github.com/pocka/storybook-addon-designs/commit/94bcd84aa2013d06c63f5502b085b031a1deb459)). 88 | 89 | ## [5.4.6] - 2021-07-04 90 | 91 | ### Fixed 92 | 93 | - Fix our Doc Blocks causes a runtime error on some Storybook versions ([61ce68e](https://github.com/pocka/storybook-addon-designs/commit/61ce68e8613878cc28c8b9837d45c206b2ba8119)). 94 | 95 | ## [5.4.5] - 2021-02-20 96 | 97 | ### Fixed 98 | 99 | - Fix tab contents does not switch between stories ([#83](https://github.com/pocka/storybook-addon-designs/issues/83)). 100 | 101 | ## [5.4.4] - 2021-02-18 102 | 103 | ### Fixed 104 | 105 | - Hide loading placeholder for `type: "iframe"` when the embedded iframe is loaded ([#81](https://github.com/pocka/storybook-addon-designs/issues/81)). 106 | 107 | ## [5.4.3] - 2021-01-13 108 | 109 | ### Fixed 110 | 111 | - Fix `allowFullscreen` option is outdated on each render ([#78](https://github.com/pocka/storybook-addon-designs/pull/78)). 112 | 113 | ## [5.4.2] - 2020-09-16 114 | 115 | ### Added 116 | 117 | - Support for Storybook 6.x ([#67](https://github.com/pocka/storybook-addon-designs/issues/67#issuecomment-692846928)). 118 | 119 | ## [5.4.1] - 2020-07-31 120 | 121 | ### Fixed 122 | 123 | - Fix `blocks.js` is missing from published package ([#64](https://github.com/pocka/storybook-addon-designs/issues/64)). 124 | 125 | ## [5.4.0] - 2020-06-27 126 | 127 | ### Added 128 | 129 | - Doc Blocks. (PR: [#62](https://github.com/pocka/storybook-addon-designs/pull/62)) 130 | 131 | ## [5.3.0] - 2020-06-20 132 | 133 | ### Added 134 | 135 | - `offscreen` option. (PR: [#40](https://github.com/pocka/storybook-addon-designs/pull/40)) 136 | - `renderTarget` preset option. (PR: [#47](https://github.com/pocka/storybook-addon-designs/pull/47)) 137 | - An addon preset file so you can write `addons: ["storybook-addon-designs"]` in `main.js`. 138 | - Export an addon name as `PARAM_KEY` and an interface type of config as `Config` from entry file. (PR: [#57](https://github.com/pocka/storybook-addon-designs/pull/57)) 139 | 140 | ### Fixed 141 | 142 | - Fix Figma preview's scale value goes too small when the preview located at second tab or later one. (PR: [#40](https://github.com/pocka/storybook-addon-designs/pull/40)) 143 | - You can now disable this addon by `disabled: true` option. (PR: [#57](https://github.com/pocka/storybook-addon-designs/pull/57)) 144 | 145 | ## [5.2.1] - 2020-05-05 146 | 147 | ### Fixed 148 | 149 | - Fix the addon code is not being transpiled down to ES5. (PR: [#51](https://github.com/pocka/storybook-addon-designs/pull/51)) 150 | - Provide CommonJS modules for non-webpack environments (e.g. Storyshots+Jest). (PR: [#52](https://github.com/pocka/storybook-addon-designs/pull/52)) 151 | 152 | ## [5.2.0] - 2020-02-01 153 | 154 | ### Added 155 | 156 | - `link` type. (PR: [#32](https://github.com/pocka/storybook-addon-designs/pull/32)) 157 | 158 | ## [5.1.2] - 2020-01-22 159 | 160 | ### Fixed 161 | 162 | - Fix crashing when there is no `design` parameter. (PR: [#30](https://github.com/pocka/storybook-addon-designs/pull/30)) 163 | 164 | ## [5.1.1] - 2019-06-06 165 | 166 | ### Fixed 167 | 168 | - Do not persist design panel. (PR: [#15](https://github.com/pocka/storybook-addon-designs/pull/15)) 169 | 170 | ## [5.1.0] - 2019-05-12 171 | 172 | ### Added 173 | 174 | - multiple designs tab support. (PR: [#9](https://github.com/pocka/storybook-addon-designs/pull/9)) 175 | 176 | [unreleased]: https://github.com/pocka/storybook-addon-designs/compare/v6.3.1...HEAD 177 | [6.3.1]: https://github.com/pocka/storybook-addon-designs/compare/v6.3.0...v6.3.1 178 | [6.3.0]: https://github.com/pocka/storybook-addon-designs/compare/v6.2.1...v6.3.0 179 | [6.2.1]: https://github.com/pocka/storybook-addon-designs/compare/v6.2.0...v6.2.1 180 | [6.2.0]: https://github.com/pocka/storybook-addon-designs/compare/v6.1.0...v6.2.0 181 | [6.1.0]: https://github.com/pocka/storybook-addon-designs/compare/v6.0.1...v6.1.0 182 | [6.0.1]: https://github.com/pocka/storybook-addon-designs/compare/v6.0.0...v6.0.1 183 | [6.0.0]: https://github.com/pocka/storybook-addon-designs/compare/v5.4.6...v6.0.0 184 | [5.4.6]: https://github.com/pocka/storybook-addon-designs/compare/v5.4.5...v5.4.6 185 | [5.4.5]: https://github.com/pocka/storybook-addon-designs/compare/v5.4.4...v5.4.5 186 | [5.4.4]: https://github.com/pocka/storybook-addon-designs/compare/v5.4.3...v5.4.4 187 | [5.4.3]: https://github.com/pocka/storybook-addon-designs/compare/v5.4.2...v5.4.3 188 | [5.4.2]: https://github.com/pocka/storybook-addon-designs/compare/v5.4.1...v5.4.2 189 | [5.4.1]: https://github.com/pocka/storybook-addon-designs/compare/v5.4.0...v5.4.1 190 | [5.4.0]: https://github.com/pocka/storybook-addon-designs/compare/v5.3.0...v5.4.0 191 | [5.3.0]: https://github.com/pocka/storybook-addon-designs/compare/v5.2.1...v5.3.0 192 | [5.2.1]: https://github.com/pocka/storybook-addon-designs/compare/v5.2.0...v5.2.1 193 | [5.2.0]: https://github.com/pocka/storybook-addon-designs/compare/v5.1.2...v5.2.0 194 | [5.1.2]: https://github.com/pocka/storybook-addon-designs/compare/v5.1.1...v5.1.2 195 | [5.1.1]: https://github.com/pocka/storybook-addon-designs/compare/v5.1.0...v5.1.1 196 | [5.1.0]: https://github.com/pocka/storybook-addon-designs/compare/v5.0.0...v5.1.0 197 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @ghengeveld 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing guide 2 | 3 | ## Create a release 4 | 5 | 1. Make sure there is no unstaged files in your local repository. 6 | 2. Update `CHANGELOG.md`. 7 | 3. Stage `CHANGELOG.md`. 8 | 4. Run `npm version -ws`. 9 | 5. Stage changed files (e.g. `git add package-lock.json packages`) 10 | 6. Run `npm version --include-workspace-root --force`. (`` is the same one you specified at step 4) 11 | 7. Push the generated commit and tag. 12 | 8. Wait for CI publish the new version to npm. 13 | 9. Create a new release on [GitHub](https://github.com/storybookjs/addon-designs/releases). 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Shota Fuji 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | logo 4 |
5 |
6 | 7 | [![npm version](https://badge.fury.io/js/@storybook%2Faddon-designs.svg)](https://badge.fury.io/js/@storybook%2Faddon-designs) 8 | [![Monthly download](https://img.shields.io/npm/dm/@storybook/addon-designs.svg)](https://www.npmjs.com/package/@storybook/addon-designs) 9 | [![GitHub license](https://img.shields.io/github/license/storybookjs/addon-designs.svg)](https://github.com/storybookjs/addon-designs/blob/master/LICENSE) 10 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) 11 | 12 |
13 | 14 |
15 | 16 | ## @storybook/addon-designs 17 | 18 | A [Storybook](https://github.com/storybooks/storybook) addon that embed Figma or websites in the addon panel for better design-development workflow. 19 | 20 | - [Docs & Demo](https://storybookjs.github.io/addon-designs) 21 | 22 | ## Requirements 23 | 24 | - Storybook@>=9.0.0 (Version 7 of this addon supports Storybook 7, Version 8 supports Storybook 8) 25 | 26 | This addon should work well with any framework. If you find that the addon does not work, please open an issue. 27 | 28 | ## Getting started 29 | 30 | ### 1. Install 31 | 32 | ```sh 33 | npm install -D @storybook/addon-designs 34 | 35 | yarn add -D @storybook/addon-designs 36 | 37 | pnpm add -D @storybook/addon-designs 38 | ``` 39 | 40 | ### 2. Register the addon in `main.js` 41 | 42 | ```js 43 | export default { 44 | addons: ["@storybook/addon-designs"], 45 | }; 46 | ``` 47 | 48 | ### 3. Add it to story! 49 | 50 | ```js 51 | export default { 52 | title: "My stories", 53 | component: Button, 54 | }; 55 | 56 | export const myStory = { 57 | parameters: { 58 | design: { 59 | type: "figma", 60 | url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File", 61 | }, 62 | }, 63 | }; 64 | ``` 65 | 66 | ## Similar projects 67 | 68 | - Adobe XD: [storybook-addon-xd-designs](https://github.com/morgs32/storybook-addon-xd-designs) 69 | - Zeplin: [storybook-zeplin](https://github.com/mertkahyaoglu/storybook-zeplin) 70 | - Abstract: [storybook-addons-abstract](https://github.com/amccloud/storybook-addons-abstract) 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "repository": "git@github.com:storybookjs/addon-designs.git", 4 | "private": true, 5 | "workspaces": [ 6 | "packages/*" 7 | ], 8 | "devDependencies": { 9 | "prettier": "^3.2.5" 10 | }, 11 | "scripts": { 12 | "build": "npm run build --workspaces --if-present", 13 | "dev": "npm run dev --workspaces --if-present", 14 | "example": "npm run storybook --workspace=examples", 15 | "build:example": "npm run build-storybook --workspace=examples && npm run build-storybook:tab --workspace=examples", 16 | "fmt": "prettier --write README.md CHANGELOG.md CONTRIBUTING.md package.json 'packages/**/*.{js,jsx,ts,tsx,md,mdx,json}'", 17 | "release": "npm run release --workspace=@storybook/addon-designs" 18 | }, 19 | "version": "10.0.0" 20 | } 21 | -------------------------------------------------------------------------------- /packages/examples/.gitignore: -------------------------------------------------------------------------------- 1 | /storybook-static 2 | -------------------------------------------------------------------------------- /packages/examples/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import remarkGfm from "remark-gfm"; 2 | import type { StorybookConfig } from "@storybook/react-webpack5"; 3 | 4 | const isTabMode = process.env.STORYBOOK_ADDON_DESIGNS_MODE === "tab"; 5 | 6 | const config: StorybookConfig = { 7 | stories: ["../stories/**/*.mdx", "../stories/**/*.stories.{js,jsx,ts,tsx}"], 8 | staticDirs: ["../assets"], 9 | addons: [ 10 | "@storybook/addon-links", 11 | "@storybook/addon-designs", 12 | "@storybook/addon-webpack5-compiler-swc", 13 | { 14 | name: "@storybook/addon-docs", 15 | options: { 16 | mdxPluginOptions: { 17 | mdxCompileOptions: { 18 | remarkPlugins: [remarkGfm], 19 | }, 20 | }, 21 | }, 22 | }, 23 | { 24 | name: "@storybook/addon-designs", 25 | options: { 26 | ...(isTabMode && { renderTarget: "tab" }), 27 | }, 28 | }, 29 | ], 30 | core: { 31 | disableTelemetry: true, 32 | }, 33 | framework: "@storybook/react-webpack5", 34 | }; 35 | 36 | export default config; 37 | -------------------------------------------------------------------------------- /packages/examples/.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/examples/.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | // import "../types.d.ts"; 2 | import { addons } from "storybook/manager-api"; 3 | import { create } from "storybook/theming"; 4 | 5 | import logo from "../assets/logo-with-text.svg"; 6 | import pkg from "@storybook/addon-designs/package.json"; 7 | 8 | addons.setConfig({ 9 | theme: create({ 10 | base: "light", 11 | brandTitle: "@storybook/addon-designs", 12 | brandImage: logo, 13 | brandUrl: pkg.homepage, 14 | }), 15 | showRoots: true, 16 | }); 17 | -------------------------------------------------------------------------------- /packages/examples/assets/logo-with-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /packages/examples/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/addon-designs/ae59b033881108d5c5006c07cdd1375d53b3f37d/packages/examples/assets/logo.png -------------------------------------------------------------------------------- /packages/examples/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /packages/examples/assets/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/addon-designs/ae59b033881108d5c5006c07cdd1375d53b3f37d/packages/examples/assets/sample.png -------------------------------------------------------------------------------- /packages/examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "examples", 3 | "version": "10.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "@storybook/addon-designs": "*", 7 | "@storybook/addon-docs": "^9.0.0", 8 | "@storybook/addon-links": "^9.0.0", 9 | "@storybook/addon-webpack5-compiler-swc": "^1.0.2", 10 | "@storybook/react": "^9.0.0", 11 | "@storybook/react-webpack5": "^9.0.0", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "remark-gfm": "^4.0.0", 15 | "storybook": "^9.0.0" 16 | }, 17 | "scripts": { 18 | "storybook": "storybook dev -p 6006", 19 | "storybook:tab": "STORYBOOK_ADDON_DESIGNS_MODE=tab npm run storybook", 20 | "build-storybook": "storybook build", 21 | "build-storybook:tab": "STORYBOOK_ADDON_DESIGNS_MODE=tab storybook build --output-dir storybook-static/tab" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/examples/stories/Button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | padding: 10px 32px; 3 | margin: 0; 4 | font-size: 16px; 5 | line-height: 1.5; 6 | border: none 0; 7 | outline: 0; 8 | 9 | font-family: 10 | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, 11 | Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 12 | color: #fff; 13 | background-image: linear-gradient(277.88deg, #51b441 32.37%, #61c451 99.3%); 14 | text-transform: uppercase; 15 | border-radius: 4px; 16 | box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); 17 | cursor: pointer; 18 | 19 | transition: 20 | transform 0.1s ease, 21 | box-shadow 0.1s ease; 22 | } 23 | 24 | .button:active { 25 | box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); 26 | 27 | transform: scale(0.99); 28 | } 29 | 30 | .button:disabled { 31 | background-image: linear-gradient(277.88deg, #a6b4a4 32.37%, #bdc4bc 99.3%); 32 | color: #e0e0e0; 33 | cursor: not-allowed; 34 | } 35 | -------------------------------------------------------------------------------- /packages/examples/stories/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./Button.css"; 4 | 5 | export const Button = (props) => , 14 | parameters: { 15 | design: config({ 16 | name: "Wireframe", 17 | type: "figma", 18 | url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample", 19 | }), 20 | }, 21 | }; 22 | 23 | export const embedMultipleDesigns = { 24 | render: () => , 25 | parameters: { 26 | design: config([ 27 | { 28 | type: "figma", 29 | url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample", 30 | }, 31 | { 32 | type: "link", 33 | url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample", 34 | }, 35 | ]), 36 | }, 37 | }; 38 | 39 | export const setTabNames = { 40 | render: () => , 41 | parameters: { 42 | design: config([ 43 | { 44 | name: "Foo", 45 | type: "figma", 46 | url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample", 47 | }, 48 | { 49 | name: "Bar", 50 | type: "link", 51 | url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample", 52 | }, 53 | ]), 54 | }, 55 | }; 56 | 57 | export const hideTab = { 58 | render: () => , 59 | parameters: { 60 | previewTabs: { [PanelName]: { hidden: true } }, 61 | }, 62 | }; 63 | -------------------------------------------------------------------------------- /packages/examples/stories/docs/figma/README.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/addon-docs/blocks"; 2 | import { Badge } from "storybook/internal/components"; 3 | 4 | 5 | 6 | # Embedding Figma designs 7 | 8 | This document describes how to embed your Figma files/frames to your 9 | Storybook. 10 | 11 | ## Requirements 12 | 13 | Storybook-Figma integration requires no extra libraries. 14 | All you need to do is make sure you have a Figma account and file to embed. 15 | 16 | ## Usage 17 | 18 | Put a `design` parameter into your story with `type: "figma"` and `url` pointing your Figma file/frame/prototype. 19 | 20 | ```js 21 | // myStories.stories.jsx 22 | export const myStory = () => ; 23 | 24 | myStory.parameters = { 25 | design: { 26 | type: "figma", 27 | url: "", 28 | }, 29 | }; 30 | ``` 31 | 32 | You can find more detailed instructions [here](/docs/docs-figma-examples--embed-file). 33 | 34 | ## Parameter options 35 | 36 | | Option name | Type | Default value | Description | 37 | | ------------------------------------------------ | -------------- | ------------------------------ | ------------------------------------------------------ | 38 | | `type` required | `"figma"` | | Fixed parameter. | 39 | | `url` required | `string` (URL) | | An URL to a Figma file/frame/prototype. | 40 | | `allowFullscreen` | `boolean` | `false` | Whether to allow `