v7.0.0 (#32)

* [feature/setting-for-v7] support v7 (#27)

* [feature/setting-for-v7] support v7

* [feature/setting-for-v7] rollback node 18 > 16

* [feature/canary-bug-fix] 카나리 버전 지원 (#28)

* [feature/canary-bug-fix] 카나리 버전 지원

* [feature/canary-bug-fix] node 16 > 18 변경

* [feature/only-story-mode] story 모드에서만 동작하도록 변경 (#30)

* [feature/only-story-mode] story 모드에서만 동작하도록 변경

* [feature/only-story-mode] telemetry 비활성화

* [feature/only-story-mode] canary PR Message 변경

* [feature/example-for-v7] 예제 v7 용으로 변경 (#29)

* [feature/example-for-v7] 예제 v7 용으로 변경

* [feature/example-for-v7] v7 버전 canary 적용

* [feature/example-update] 예제 및 README 수정 (#31)

* [feature/example-update] 불필요한 예제 코드 제거 및 README 추가

* [feature/example-update] 버전 지정

* [feature/example-update] README 업데이트

.autorc

@@ -0,0 +1,7 @@
+{
+  "canary": {
+    "target": "pr-body",
+    "message": "Install PR version: `npm install -D storybook-addon-useragent@%v`",
+    "force": true
+  }
+}

.github/workflows/deploy.yml

@@ -44,7 +44,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
 
       - name: Setup Pages

.github/workflows/release.yml

@@ -17,10 +17,10 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           registry-url: https://registry.npmjs.org/
 
       - name: Install dependencies

.storybook/local-preset.js

@@ -1,9 +1,9 @@
 function previewAnnotations(entry = []) {
-  return [...entry, require.resolve("../dist/esm/preview")];
+  return [...entry, require.resolve("../dist/preview.mjs")];
 }
 
 function managerEntries(entry = []) {
-  return [...entry, require.resolve("../dist/esm/manager")];
+  return [...entry, require.resolve("../dist/manager.mjs")];
 }
 
 module.exports = {

.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        actions: false,
+      },
+    },
+    "./local-preset.js",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,11 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    previewTabs: {
+      "storybook/docs/panel": { hidden: true },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -26,12 +26,22 @@
 
 ## Support
 
-| name      | version | info                                              |
-| --------- |---------| ------------------------------------------------- |
-| React     | 16 ~ 17 | ✅ fully supported                                |
-| React     | 18      | 🚧 React 18 warning display, no functional issues |
-| Storybook | 6.3.x   | ✅ fully supported                                |
-| Storybook | 6.5.x   | ✅ fully supported                                |
+### v7
+
+| name      | version  | info              |
+| --------- |----------|-------------------|
+| React     | <= 18    | ✅ fully supported |
+| Storybook | >= 7.0.0 | ✅ fully supported |
+| Storybook | < 7.0.0  | ❌ [using v6](https://www.npmjs.com/package/storybook-addon-useragent?activeTab=versions)    |
+
+### v6
+
+| name      | version | info                                                                                     |
+| --------- |---------|------------------------------------------------------------------------------------------|
+| React     | <= 18   | ✅ fully supported                                                                        |
+| Storybook | >= 7.0.0 | ❌ [using v7](https://www.npmjs.com/package/storybook-addon-useragent?activeTab=versions) |
+| Storybook | < 7.0.0  | ✅ fully supported                                                                        |
+
 
 ## Installing and Setup
 
@@ -81,8 +91,10 @@ export const customUserAgents = [
 import { customUserAgents } from "./userAgent";
 
 export const parameters = {
+  ...
   userAgent: customUserAgents,
 };
+
 ```
 
 ### Set as default in `stories`
@@ -98,6 +110,9 @@ import { UserAgentExample } from "./UserAgentExample";
 export default {
   title: "Example/UserAgentExample",
   component: UserAgentExample,
+  argTypes: {
+    useragent: { control: "text" },
+  },
 };
 
 const Template = (args) => <UserAgentExample {...args} />;

example/.storybook/main.js

@@ -1,13 +1,11 @@
 module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-addon-useragent",
-  ],
-  framework: "@storybook/react",
+  stories: ["../stories/*.stories.jsx"],
+  addons: ["@storybook/addon-essentials", "storybook-addon-useragent"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 };

example/README.md

@@ -0,0 +1,8 @@
+## Storybook Addon User-Agent Example
+
+## Getting Started
+
+```bash
+npm install
+npm run storybook
+```