Support Storybook v8 (#35) (#36)

* feat. support v8

* feat. icon change

* chore. 불필요한 dependencies 제거 및 unsupportedFrameworks 제거

* chore. example react 추가

* chore. Symbolic link Test

* Revert "chore. Symbolic link Test"

This reverts commit 048820a.

* feat. add react example

* feat. vue3 example 추가

* chore. lock 업데이트

* feat. README 정리

.github/workflows/release.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
   pull_request:
-    types: [ edited, opened, reopened ]
+    types: [edited, opened, reopened]
 
 jobs:
   release:

.storybook/local-preset.js

@@ -1,9 +1,12 @@
+/**
+ * to load the built addon in this test Storybook
+ */
 function previewAnnotations(entry = []) {
-  return [...entry, require.resolve("../dist/preview.mjs")];
+  return [...entry, require.resolve("../dist/preview.js")];
 }
 
 function managerEntries(entry = []) {
-  return [...entry, require.resolve("../dist/manager.mjs")];
+  return [...entry, require.resolve("../dist/manager.js")];
 }
 
 module.exports = {

README.md

@@ -26,22 +26,11 @@
 
 ## Support
 
-### 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                                                                        |
-
+| Storybook Version | Addon Version                          |
+| ----------------- | -------------------------------------- |
+| v8                | `npm i -D storybook-addon-useragent@8` |
+| v7                | `npm i -D storybook-addon-useragent@7` |
+| v6                | `npm i -D storybook-addon-useragent@6` |
 
 ## Installing and Setup
 

example/.storybook/framework.ts

@@ -0,0 +1 @@
+module.exports = {};

example/.storybook/main.ts

@@ -0,0 +1,12 @@
+const stories = require("./stories");
+const framework = require("./framework");
+
+module.exports = {
+  stories,
+  framework,
+  addons: ["storybook-addon-useragent", "@storybook/addon-docs"],
+  docs: {
+    //👇 See the table below for the list of supported options
+    autodocs: "tag",
+  },
+};

example/.storybook/preview.ts

@@ -0,0 +1,3 @@
+import { customUserAgents } from "./userAgent";
+
+export const parameters = { userAgent: customUserAgents };

example/.storybook/stories.ts

@@ -0,0 +1 @@
+module.exports = [];

example/react/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log

example/react/.storybook/framework.ts

@@ -0,0 +1 @@
+module.exports = { name: "@storybook/react-vite" };

example/react/.storybook/main.ts

@@ -0,0 +1,12 @@
+const stories = require("./stories");
+const framework = require("./framework");
+
+module.exports = {
+  stories,
+  framework,
+  addons: ["storybook-addon-useragent", "@storybook/addon-docs"],
+  docs: {
+    //👇 See the table below for the list of supported options
+    autodocs: "tag",
+  },
+};

example/react/.storybook/preview.ts

@@ -0,0 +1,3 @@
+import { customUserAgents } from "./userAgent";
+
+export const parameters = { userAgent: customUserAgents };

example/react/.storybook/stories.ts

@@ -0,0 +1 @@
+module.exports = ["../stories/*.stories.ts"];

example/react/.storybook/userAgent.ts

@@ -0,0 +1,7 @@
+export const customUserAgents = [
+  {
+    name: "Windows_7-IE_11",
+    userAgent:
+      "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko",
+  },
+];