Initial commit

.babelrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+  ],
+  env: {
+    esm: {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            modules: false,
+          },
+        ],
+      ],
+    },
+  },
+};

.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 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Create Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          yarn release

.gitignore

@@ -0,0 +1,6 @@
+dist/
+node_modules/
+storybook-static/
+build-storybook.log
+.DS_Store
+.env

.npmrc

@@ -0,0 +1,3 @@
+registry=https://registry.npmjs.org/
+email=
+always-auth=true

.prettierignore

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

.prettierrc

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

.storybook/main.js

@@ -0,0 +1,7 @@
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: ["../preset.js", "@storybook/addon-essentials"],
+};

.storybook/preview.js

@@ -0,0 +1 @@
+import "../styles/main.css";

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Storybook contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+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.

README.md

@@ -0,0 +1,3 @@
+# Vue3 Styled Components Storybook Addon
+
+Allows switching between themes

package.json

@@ -0,0 +1,90 @@
+{
+  "name": "vue3-styled-components-storybook-addon",
+  "version": "0.1.0",
+  "description": "Switching betweed styled components themes",
+  "keywords": [
+    "storybook-addons",
+    "vue3",
+    "styled-components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jonsalvas/vue3-styled-components-storybook-addon"
+  },
+  "author": "jonsalvas",
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
+    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
+    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
+    "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
+    "prebuild": "yarn clean",
+    "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
+    "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6007",
+    "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
+    "build-storybook": "build-storybook",
+    "prerelease": "zx scripts/prepublish-checks.mjs",
+    "release": "yarn build && auto shipit",
+    "eject-ts": "zx scripts/eject-typescript.mjs"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.5",
+    "@babel/preset-typescript": "^7.13.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/vue3": "^6.4.9",
+    "auto": "^10.3.0",
+    "babel-loader": "^8.1.0",
+    "boxen": "^5.0.1",
+    "concurrently": "^6.2.0",
+    "dedent": "^0.7.0",
+    "prettier": "^2.3.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.2.4",
+    "vue": "^3.2.24",
+    "vue-loader": "^16.8.3",
+    "vue3-styled-components": "^1.2.0",
+    "zx": "1.14.1"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^6.4.0",
+    "@storybook/api": "^6.4.0",
+    "@storybook/components": "^6.4.0",
+    "@storybook/core-events": "^6.4.0",
+    "@storybook/theming": "^6.4.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "storybook": {
+    "displayName": "Vue3 Styled Components Storybook Addon",
+    "supportedFrameworks": [
+      "vue"
+    ]
+  }
+}

preset.js

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

scripts/eject-typescript.mjs

@@ -0,0 +1,30 @@
+#!/usr/bin/env zx
+
+// Copy TS files and delete src
+await $`cp -r ./src ./srcTS`;
+await $`rm -rf ./src`;
+await $`mkdir ./src`;
+
+// Convert TS code to JS
+await $`babel --no-babelrc --presets @babel/preset-typescript ./srcTS -d ./src --extensions \".js,.jsx,.ts,.tsx\" --ignore "./srcTS/typings.d.ts"`;
+
+// Format the newly created .js files
+await $`prettier --write ./src`;
+
+// Add in minimal files required for the TS build setup
+await $`touch ./src/dummy.ts`;
+await $`printf "export {};" >> ./src/dummy.ts`;
+
+await $`touch ./src/typings.d.ts`;
+await $`printf 'declare module "global";' >> ./src/typings.d.ts`;
+
+// Clean up
+await $`rm -rf ./srcTS`;
+
+console.log(
+  chalk.green.bold`
+TypeScript Ejection complete!`,
+  chalk.green`
+Addon code converted with JS. The TypeScript build setup is still available in case you want to adopt TypeScript in the future.
+`
+);

scripts/prepublish-checks.mjs

@@ -0,0 +1,56 @@
+#!/usr/bin/env zx
+
+const packageJson = require("../package.json");
+const boxen = require("boxen");
+const dedent = require("dedent");
+
+const name = packageJson.name;
+const displayName = packageJson.storybook.displayName;
+
+let exitCode = 0;
+$.verbose = false;
+
+/**
+ * Check that meta data has been updated
+ */
+if (name.includes("addon-kit") || displayName.includes("Addon Kit")) {
+  console.error(
+    boxen(
+      dedent`
+      ${chalk.red.bold("Missing metadata")}
+
+      ${chalk.red(dedent`Your package name and/or displayName includes default values from the Addon Kit.
+      The addon gallery filters out all such addons.
+
+      Please configure appropriate metadata before publishing your addon. For more info, see:
+      https://storybook.js.org/docs/react/addons/addon-catalog#addon-metadata`)}`,
+      { padding: 1, borderColor: "red" }
+    )
+  );
+
+  exitCode = 1;
+}
+
+/**
+ * Check that README has been updated
+ */
+const readmeTestStrings =
+  "# Storybook Addon Kit|Click the \\*\\*Use this template\\*\\* button to get started.|https://user-images.githubusercontent.com/42671/106809879-35b32000-663a-11eb-9cdc-89f178b5273f.gif";
+
+if ((await $`cat README.md | grep -E ${readmeTestStrings}`.exitCode) == 0) {
+  console.error(
+    boxen(
+      dedent`
+        ${chalk.red.bold("README not updated")}
+
+        ${chalk.red(dedent`You are using the default README.md file that comes with the addon kit.
+        Please update it to provide info on what your addon does and how to use it.`)}
+      `,
+      { padding: 1, borderColor: "red" }
+    )
+  );
+
+  exitCode = 1;
+}
+
+process.exit(exitCode);

src/constants.ts

@@ -0,0 +1,11 @@
+export const ADDON_ID = "storybook/my-addon";
+export const TOOL_ID = `${ADDON_ID}/tool`;
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const TAB_ID = `${ADDON_ID}/tab`;
+export const PARAM_KEY = `myAddonParameter`;
+
+export const EVENTS = {
+  RESULT: `${ADDON_ID}/result`,
+  REQUEST: `${ADDON_ID}/request`,
+  CLEAR: `${ADDON_ID}/clear`,
+};

src/index.ts

@@ -0,0 +1,6 @@
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+
+// make it work with --isolatedModules
+export default {};

src/preset/preview.ts

@@ -0,0 +1,26 @@
+ import { withThemeProvider } from "../withThemeProvider";
+ export const darkTheme = {
+     backgroundColor: "#333333",
+     textColor: "#FFFFFF",
+     primary: "#77ccdd"
+   };
+
+   export const lightTheme = {
+     backgroundColor: "#e0e0e0",
+     textColor: "#000000",
+     primary: "#55aacc"
+   };
+
+   export const partyTheme = {
+     backgroundColor: "#eeff00",
+     textColor: "#ff88cc",
+     primary: "#aa00ee"
+   };
+
+   export const themes: any = {
+     darkTheme, lightTheme, partyTheme
+   }
+
+ export const decorators = [withThemeProvider(themes)];
+
+

src/typings.d.ts

@@ -0,0 +1 @@
+declare module "global";

src/withThemeProvider.ts

@@ -0,0 +1,37 @@
+
+import { Story } from "@storybook/api";
+import { ThemeProvider } from "vue3-styled-components";
+
+export const withThemeProvider = (themes: any) => (story: Story) => ({
+  components: { story, ThemeProvider },
+  data: () => ({
+    themes,
+    themeOptions: Object.keys(themes),
+    selectedThemeOption: Object.keys(themes)[1],
+    themeUpdateCount: 0
+  }),
+  computed: {
+    selectedTheme() {
+        return this.themes[this.selectedThemeOption];
+    }
+  },
+  watch: {
+    selectedTheme() {
+      // force update of theme as theme provider is not reactive
+      this.themeUpdateCount += 1;
+    }
+  },
+  template: `
+
+  <ThemeProvider  :key="themeUpdateCount" :theme="selectedTheme"><story/></ThemeProvider>
+  
+  <button class="themepicker">☰</button>
+    <nav class="menu">
+    <select class="menuselect" v-model="selectedThemeOption" size="3">
+        <option v-for="option in themeOptions" :value="option">{{ option }}</option>
+    </select>
+    </nav>
+  
+  `,
+});
+

stories/Demo.stories.js

@@ -0,0 +1,16 @@
+import { Demo } from "./index";
+
+export default {
+  title: "Demo",
+  component: Demo,
+};
+
+const Template = () => ({
+  components: { Demo },
+  template: `<Demo></Demo>`,
+});
+
+export const JustADemo = Template.bind({});
+
+
+