feat: move addon to addon-kit

Updated project structure based on official addon-kit from storybook due to issues with vite builder

#35

.github/workflows/release.yml

@@ -11,21 +11,30 @@ on:
 
 jobs:
   release:
-    permissions:
+    runs-on: ubuntu-latest
+     permissions:
       contents: write # to be able to publish a GitHub release
       issues: write # to be able to comment on released issues
       pull-requests: write # to be able to comment on released pull requests
       id-token: write # to enable use of OIDC for npm provenance
-    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
-      - uses: actions/setup-node@v2
+
+      - name: Prepare repository
+        run: git fetch --unshallow --tags
+
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 18
-      - run: npm ci --legacy-peer-deps
-      - run: npm audit signatures
-      - run: npm run build
-      - run: npx semantic-release
+          node-version: 16.x
+
+      - name: Install dependencies
+        run: yarn install --ignore-scripts
+
+      - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          yarn release

.gitignore

@@ -1,5 +1,6 @@
-node_modules
-dist
-yarn-error.log
-.cache
-example-old
+dist/
+node_modules/
+storybook-static/
+build-storybook.log
+.DS_Store
+.env

.prettierignore

@@ -0,0 +1 @@
+dist

.prettierrc

@@ -0,0 +1 @@
+{}

.storybook/local-preset.js

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

.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["./local-preset.js"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+
+export default config;

example/.storybook/preview-head.html → .storybook/preview-head.html

@@ -1,2 +1,6 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hepta+Slab:[email protected]&amp;display=swap" />
+<script>
+  window.global = window;
+</script>
+
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:[email protected]&amp;display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&amp;display=swap" />

.storybook/preview.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+
+import { ThemeProvider, createGlobalStyle } from "styled-components";
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    background: ${(props) => props.theme.color.background};
+    color: ${(props) => props.theme.color.foreground};
+    margin: 0;
+    font-family: ${(props) => props.theme.copy.fontFamily};
+  }
+`;
+
+const themes = [
+  {
+    name: "Default Theme",
+    theme: {
+      color: {
+        primary: "#00ffa2",
+        secondary: "#004466",
+        background: "#fff",
+        foreground: "#000",
+      },
+      headline: {
+        fontFamily: "'Inter', serif",
+        fontWeight: 700,
+        fontSize: "52px",
+      },
+      copy: {
+        fontFamily: "'Crimson Pro', sans-serif",
+        fontWeight: 200,
+        fontSize: "20px",
+      },
+      spacings: [40, 80, 120, 160],
+      rectangle: {
+        width: "40px",
+        height: "20px",
+        margin: {
+          top: 60,
+          bottom: 60,
+          left: 20,
+          right: 20,
+        },
+      },
+    },
+  },
+  {
+    name: "Another Theme",
+    theme: {
+      color: {
+        primary: "indigo",
+        secondary: "honeydew",
+        background: "#fff",
+        foreground: "#000",
+      },
+      headline: {
+        fontFamily: "'Crimson Pro', serif",
+        fontWeight: 900,
+        fontSize: "32px",
+      },
+      copy: {
+        fontFamily: "'Inter', sans-serif",
+        fontWeight: 400,
+        fontSize: "14px",
+      },
+      spacings: [20, 40, 60, 90],
+      rectangle: {
+        width: "100px",
+        height: "100px",
+        margin: {
+          top: 20,
+          bottom: 20,
+          left: 20,
+          right: 20,
+        },
+      },
+    },
+  },
+];
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    themePlayground: {
+      theme: themes,
+      provider: ({ children, theme, name }) => {
+        console.log("Current theme is: ", name);
+        return (
+          <ThemeProvider theme={theme}>
+            <GlobalStyles />
+            {children}
+          </ThemeProvider>
+        );
+      },
+      controls: {
+        "headline.fontWeight": {
+          type: "range",
+          max: 900,
+          min: 1,
+          description: "Define the font weight of the variable font",
+        },
+        "copy.fontWeight": {
+          type: "range",
+          max: 900,
+          min: 1,
+          description: "Define the font weight of the variable font",
+        },
+        "headline.fontFamily": {
+          type: "select",
+          options: [
+            { value: "'Crimson Pro', serif", label: "Crimson Pro" },
+            { value: "'Inter', sans-serif", label: "Inter" },
+          ],
+          description: "Select the headline font family",
+        },
+        "copy.fontFamily": {
+          type: "select",
+          options: [
+            { value: "'Crimson Pro', serif", label: "Crimson Pro" },
+            { value: "'Inter', sans-serif", label: "Inter" },
+          ],
+          description: "Select the copy font family",
+        },
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Johannes Eslage
+Copyright (c) 2023 Johannes Eslage
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal