Storybook 8 support

.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['@etchteam'],
+  rules: {
+    '@next/next/no-html-link-for-pages': 0,
+    // Storybook/tsup uses the import React...
+    'import/default': 0,
+  },
+};

.github/semantic.yml

@@ -0,0 +1,8 @@
+# Always validate the PR title AND all the commits
+titleAndCommits: true
+# Allows use of Merge commits (eg on github: "Merge branch 'main' into feature/ride-unicorns")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowMergeCommits: true
+# Allow use of Revert commits (eg on github: "Revert "feat: ride unicorns"")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowRevertCommits: true

.github/workflows/ci.yml

@@ -14,7 +14,8 @@ jobs:
           node-version-file: .nvmrc
           cache: npm
       - run: npm ci
-      - run: npm run lint
+      - name: Lint JS
+        run: npx --no -- eslint src
   build:
     runs-on: ubuntu-latest
     steps:

.github/workflows/release.yml

@@ -0,0 +1,28 @@
+---
+  name: 🚀 Release
+  on:
+    push:
+      branches:
+      - main
+  env:
+    HUSKY: 0
+  jobs:
+    publish:
+      name: Publish
+      runs-on: ubuntu-latest
+      if: "! contains(toJSON(github.event.commits.*.message), '[skip ci]')"
+      steps:
+        - uses: actions/checkout@v4
+          with:
+            fetch-depth: 0
+            persist-credentials: false
+        - uses: actions/setup-node@v4
+          with:
+            node-version-file: .nvmrc
+            cache: npm
+        - run: npm ci
+        - name: Publish
+          env:
+            GH_TOKEN: ${{ secrets.GH_TOKEN }}
+            NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          run: npm run release

.gitignore

@@ -6,9 +6,6 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
-# IDE's
-.vscode
-
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx --no -- commitlint --edit ${1}
+npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx --no -- lint-staged
+npx --no -- lint-staged

.nvmrc

@@ -1 +1 @@
-20.9.0
+20.12.2

.storybook/local-preset.js

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

.storybook/main.js

@@ -1,11 +1,17 @@
-module.exports = {
-  "stories": ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "../src"],
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-webpack5-compiler-swc',
+    './local-preset.js',
+  ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: '@storybook/react-webpack5',
     options: {}
   },
   docs: {
     autodocs: true
   }
-};
+};
+
+export default config;

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.format.enable": true,
+  "js/ts.implicitProjectConfig.checkJs": true
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Etch Software Limited
+Copyright (c) 2024 Etch Software Limited
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -19,17 +19,19 @@ Create a file called `main.js` in your `.storybook` config folder.
 Add the following content to it:
 
 ```js
-module.exports = {
+export default {
   addons: ['@etchteam/storybook-addon-marker']
 }
 ```
 
 Then create a file called `preview.js` in the same folder and add your [Marker destination](https://marker.io/blog/integrate-web-app-browser-sdk) as a [parameter](https://storybook.js.org/docs/react/writing-stories/parameters).
 
 ```js
-export const parameters = {
-  marker: {
-    destination: 'abcd1234567890', // <- Your unique destination ID
+export default {
+  parameters: {
+    marker: {
+      destination: 'abcd1234567890', // <- Your unique destination ID
+    }
   }
 }
 ```
@@ -53,4 +55,4 @@ The Widget > Button > Button visibility setting should be set to "hidden" as thi
 
 ---
 
-Made with ☕ at [Etch](https://etch.co)
+Made with ☕ at [Etch](https://etch.co)

lint-staged.config.cjs

@@ -0,0 +1 @@
+module.exports = { '*.{ts,tsx,js,jsx,yml,yaml,json}': 'eslint --fix' };

manager.js

@@ -1 +1 @@
-module.exports = require('./dist/manager.js');
+import './dist/manager';