cleanup + initial readme

Author: sulco

README.md

@@ -1,92 +1,48 @@
 # Storybook Addon StackBlitz
 Create a one-click Pull Request environment right from your component
 
-### Development scripts
+## How to use it?
 
-- `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
+Add the following to your `.storybook/main.ts` exports:
 
-### 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>
+```typescript
+export default {
+  addons: ['@storybook/addon-storysource'],
+};
 ```
 
-Lastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.
-
-```bash
-npx auto create-labels
+Configure the repository URL in the `.storybook/preview.ts`:
+```typescript
+export default {
+  parameters: {
+    repositoryUrl: 'https://github.com/[username]/[reponame]'
+  },
+};
 ```
 
-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.
+In your story files set the file path for the specific story, for instance:
+```typescript
+export const Primary: Story = {
+  args: {/* ... */},
+  parameters: {
+    filePath: 'src/stories/Button.tsx'
+  }
+};
+```
 
-```sh
-yarn release
+If your components are placed in multiple repositories, you can also define the repository URL per the specific story:
+```typescript
+export const Primary: Story = {
+  args: {/* ... */},
+  parameters: {
+    filePath: 'src/stories/Button.tsx',
+    repositoryUrl: 'https://github.com/[username]/[reponame]'
+  }
+};
 ```
 
-That will:
 
-- Build and package the addon code
-- Bump the version
-- Push a release to GitHub and npm
-- Push a changelog to GitHub
+## Development scripts
+
+- `yarn start` runs babel in watch mode and starts Storybook
+- `yarn build` build and package your addon code

assets/icon.png

@@ -3,11 +3,11 @@
   "version": "0.0.0",
   "description": "Create a one-click Pull Request environment right from your component",
   "keywords": [
+    "storybook-addons",
     "stackblitz",
     "pull-request",
     "ide",
-    "code",
-    "storybook-addons"
+    "code"
   ],
   "repository": {
     "type": "git",

package.json

@@ -5,9 +5,9 @@ import { PARAM_KEY, TOOL_ID } from "./constants";
 import CodeflowLogo from "./components/CodeflowLogo";
 
 export const Tool = function MyAddonSelector() {
-  const repositoryUrl = useParameter<string>(PARAM_KEY.REPO, null);
+  const repositoryUrl = useParameter<string>(PARAM_KEY.REPO);
   const branch = useParameter<string>(PARAM_KEY.BRANCH, 'main');
-  const filePath = useParameter<string>(PARAM_KEY.FILE_PATH, null);
+  const filePath = useParameter<string>(PARAM_KEY.FILE_PATH);
 
   const api = useStorybookApi();
   const [disabled, setDisabled] = useState(false)
@@ -42,7 +42,7 @@ export const Tool = function MyAddonSelector() {
       href={stackblitzUrl}
       onClick={(e: MouseEvent) => disabled && e.preventDefault()}
       target="_blank"
-      title="Open in StackBlitz and make a pull request"
+      title="Open in StackBlitz instant dev environment"
     >
       <CodeflowLogo style={{width: 18, margin: '0 -2px'}} />
     </IconButton>

src/Tool.tsx

@@ -2,19 +2,11 @@ import { addons, types } from "@storybook/manager-api";
 import { ADDON_ID, TOOL_ID } from "./constants";
 import { Tool } from "./Tool";
 
-/**
- * Note: if you want to use JSX in this file, rename it to `manager.tsx`
- * and update the entry prop in tsup.config.ts to use "src/manager.tsx",
- */
-
-// Register the addon
 addons.register(ADDON_ID, () => {
-  // Register the tool
   addons.add(TOOL_ID, {
     type: types.TOOL,
-    title: "My addon",
+    title: "StackBlitz",
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: Tool
   });
-
 });

src/manager.ts

@@ -1,24 +1,9 @@
-/**
- * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
- * in order to augment stories:
- * - with extra rendering
- * - gather details about how a story is rendered
- *
- * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
- *
- * https://storybook.js.org/docs/react/writing-stories/decorators
- */
 import type { Renderer, ProjectAnnotations } from "@storybook/types";
 import { PARAM_KEY } from "./constants";
 
-/**
- * Note: if you want to use JSX in this file, rename it to `preview.tsx`
- * and update the entry prop in tsup.config.ts to use "src/preview.tsx",
- */
-
 const preview: ProjectAnnotations<Renderer> = {
   parameters: {
-    repositoryUrl: 'https://github.com/sulco/viteconf-storybook-demo',
+    // [PARAM_KEY.REPO]: 'https://github.com/[username]/[reponame]',
   }
 };