Merge pull request #192 from storybookjs/support-7.0

Add Official Support for Storybook 7.0

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,7 +1,7 @@
 name: Bug report
 description: File a bug report
 labels:
-  - 'category: bug'
+  - "category: bug"
 body:
   - type: checkboxes
     id: design_types
@@ -62,17 +62,17 @@ body:
     attributes:
       label: Affected versions
       description: |
-        Which version of `storybook-addon-designs` do you use?
-        You can find the installed version by `npm list storybook-addon-designs --depth 0` or `yarn list --pattern storybook-addon-designs --depth 0`.
+        Which version of `@storybook/addon-designs` do you use?
+        You can find the installed version by `npm list @storybook/addon-designs --depth 0` or `yarn list --pattern @storybook/addon-designs --depth 0`.
         If you know which version introduced the bug, please write that instead.
-      placeholder: '6.0.1'
+      placeholder: "6.0.1"
     validations:
       required: true
   - type: input
     id: storybook_core_versions
     attributes:
       label: Storybook versions
       description: Which version of `@storybook/*` do you use?
-      placeholder: '6.3.0'
+      placeholder: "6.3.0"
     validations:
       required: true

.github/workflows/release.yml

@@ -0,0 +1,28 @@
+name: Release
+
+on: [push]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Prepare repository
+        run: git fetch --unshallow --tags
+
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: npm
+      - name: Install dependencies
+        run: npm install --ignore-scripts
+
+      - name: Create Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          npm run release

.gitignore

@@ -5,3 +5,4 @@
 node_modules
 
 *.log
+.env

README.md

@@ -4,48 +4,44 @@
   <br/>
   <br/>
 
-[![npm version](https://badge.fury.io/js/storybook-addon-designs.svg)](https://badge.fury.io/js/storybook-addon-designs)
-[![Monthly download](https://img.shields.io/npm/dm/storybook-addon-designs.svg)](https://www.npmjs.com/package/storybook-addon-designs)
-[![GitHub license](https://img.shields.io/github/license/pocka/storybook-addon-designs.svg)](https://github.com/pocka/storybook-addon-designs/blob/master/LICENSE)
+[![npm version](https://badge.fury.io/js/@storybook/addon-designs.svg)](https://badge.fury.io/js/@storybook/addon-designs)
+[![Monthly download](https://img.shields.io/npm/dm/@storybook/addon-designs.svg)](https://www.npmjs.com/package/@storybook/addon-designs)
+[![GitHub license](https://img.shields.io/github/license/pocka/@storybook/addon-designs.svg)](https://github.com/pocka/@storybook/addon-designs/blob/master/LICENSE)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 </div>
 
 <hr/>
 
-## storybook-addon-designs
+## @storybook/addon-designs
 
 A [Storybook](https://github.com/storybooks/storybook) addon that embed Figma or websites in the addon panel for better design-development workflow.
 
 - [Docs & Demo](https://storybookjs.github.io/addon-designs)
 
 ## Requirements
 
-- Storybook@>=6.4.0
+- Storybook@>=7.0.0
 
-This addon should work well with any framework: If you find the case the addon not works, please open an issue.
+This addon should work well with any framework. If you find that the addon does not work, please open an issue.
 
 ## Getting started
 
 ### 1. Install
 
 ```sh
-npm install --save-dev storybook-addon-designs
-# yarn add -D storybook-addon-designs
-```
+npm install -D @storybook/addon-designs
 
-To install v7 beta, use below command instead.
+yarn add -D @storybook/addon-designs
 
-```sh
-npm install --save-dev storybook-addon-designs@beta
-# yarn add -D storybook-addon-designs@beta
+pnpm add -D @storybook/addon-designs
 ```
 
 ### 2. Register the addon in `main.js`
 
 ```js
 module.exports = {
-  addons: ["storybook-addon-designs"],
+  addons: ["@storybook/addon-designs"],
 };
 ```
 
@@ -57,12 +53,12 @@ export default {
   component: Button,
 };
 
-export const myStory = () => <Button>Hello, World!</Button>;
-
-myStory.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
+export const myStory = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
+    },
   },
 };
 ```