initial commit

Author: sulco

.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 16.x
+        uses: actions/setup-node@v3
+        with:
+          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

@@ -0,0 +1,6 @@
+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,18 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "./local-preset.js",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 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,92 @@
+# Storybook Addon StackBlitz
+Create a one-click Pull Request environment right from your component
+
+### Development scripts
+
+- `yarn start` runs babel in watch mode and starts Storybook
+- `yarn build` build and package your addon code
+
+### Switch from TypeScript to JavaScript
+
+Don't want to use TypeScript? We offer a handy eject command: `yarn eject-ts`
+
+This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.
+
+## What's included?
+
+![Demo](https://user-images.githubusercontent.com/42671/107857205-e7044380-6dfa-11eb-8718-ad02e3ba1a3f.gif)
+
+The addon code lives in `src`. It demonstrates all core addon related concepts. The three [UI paradigms](https://storybook.js.org/docs/react/addons/addon-types#ui-based-addons)
+
+- `src/Tool.tsx`
+- `src/Panel.tsx`
+- `src/Tab.tsx`
+
+Which, along with the addon itself, are registered in `src/manager.ts`.
+
+Managing State and interacting with a story:
+
+- `src/withGlobals.ts` & `src/Tool.tsx` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story.
+- `src/withRoundTrip.ts` & `src/Panel.tsx` demonstrates two-way communication using channels.
+- `src/Tab.tsx` demonstrates how to use `useParameter` to access the current story's parameters.
+
+Your addon might use one or more of these patterns. Feel free to delete unused code. Update `src/manager.ts` and `src/preview.ts` accordingly.
+
+Lastly, configure you addon name in `src/constants.ts`.
+
+### Metadata
+
+Storybook addons are listed in the [catalog](https://storybook.js.org/addons) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`. This project has been configured with sample data. Learn more about available options in the [Addon metadata docs](https://storybook.js.org/docs/react/addons/addon-catalog#addon-metadata).
+
+## Release Management
+
+### Setup
+
+This project is configured to use [auto](https://github.com/intuit/auto) for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both:
+
+- [`NPM_TOKEN`](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens) Create a token with both _Read and Publish_ permissions.
+- [`GH_TOKEN`](https://github.com/settings/tokens) Create a token with the `repo` scope.
+
+Then open your `package.json` and edit the following fields:
+
+- `name`
+- `author`
+- `repository`
+
+#### Local
+
+To use `auto` locally create a `.env` file at the root of your project and add your tokens to it:
+
+```bash
+GH_TOKEN=<value you just got from GitHub>
+NPM_TOKEN=<value you just got from npm>
+```
+
+Lastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.
+
+```bash
+npx auto create-labels
+```
+
+If you check on GitHub, you’ll now see a set of labels that `auto` would like you to use. Use these to tag future pull requests.
+
+#### GitHub Actions
+
+This template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository.
+
+Go to `Settings > Secrets`, click `New repository secret`, and add your `NPM_TOKEN`.
+
+### Creating a release
+
+To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
+
+```sh
+yarn release
+```
+
+That will:
+
+- Build and package the addon code
+- Bump the version
+- Push a release to GitHub and npm
+- Push a changelog to GitHub