Svelte CSF Stories

.babelrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@babel/preset-env", "@babel/preset-react"],
-}
+  presets: ['@babel/preset-env', '@babel/preset-typescript'],
+};

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+end_of_line = lf
+
+[*.{js,json,ts,svelte,html}]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,12 @@
+dist
+build
+coverage
+node_modules
+*.d.ts
+!.remarkrc.js
+!.babelrc.js
+!.eslintrc.js
+!.eslintrc-markdown.js
+!.jest.config.js
+!.storybook
+

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['@storybook/eslint-config-storybook'],
+  overrides: [],
+};

.prettierrc

@@ -1 +1,8 @@
-{}
+{
+    "printWidth": 100,
+    "tabWidth": 2,
+    "bracketSpacing": true,
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "arrowParens": "always"
+}

.storybook/main.js

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

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "deepscan.enable": true
+}

README.md

@@ -1,89 +1,50 @@
-# Storybook Addon Kit
+# Svelte Story Format
 
-Simplify the creation of Storybook addons
+Allows to write your stories in svelte syntax.
 
-- 📝 Live-editing in development
-- ⚛️ React/JSX support
-- 📦 Transpiling and bundling with Babel
-- 🏷 Plugin metadata
-- 🚢 Release management with [Auto](https://github.com/intuit/auto)
-- 🧺 Boilerplate and sample code
+It supports:
 
-## Getting Started
+- args stories and stories without args ;
+- the "template" pattern for args stories, compatible with a svelte syntax ;
+- extractions of sources of the stories and compatible with addon-sources
+- decorators
+- knobs, actions, controls
+- storyshots (with a special jest transformation shipped under @storybook/addon-svelte-csf/jest-transform)
 
-Click the **Use this template** button to get started.
+## Example
 
-![](https://user-images.githubusercontent.com/42671/106809879-35b32000-663a-11eb-9cdc-89f178b5273f.gif)
-
-Clone your repository and install dependencies.
-
-```sh
-npm install
 ```
+<script>
+  import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
 
-### Development scripts
-
-- `npm run start` runs babel in watch mode and starts Storybook
-- `npm run build` build and package your addon code
-
-## What's included?
-
-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.js`
-- `src/Panel.js`
-- `src/Tab.js`
-
-Which, along with the addon itself, are registered in `src/preset/manager.js`.
-
-Managing State and interacting with a story:
-
-- `src/withGlobals.js` & `src/Tool.js` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story.
-- `src/withRoundTrip.js` & `src/Panel.js` demonstrates two-way communication using channels.
-- `src/Tab.js` 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/preset/manager.js` and `src/preset/preview.js` accordingly.
-
-Lastly, configure you addon name in `src/constants.js`.
+  import Button from './Button.svelte';
 
-### Metadata
+  let count = 0;
+  function handleClick() {
+    count += 1;
+  }
+</script>
 
-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).
+<Meta title="Button" component={Button}/>
 
-## Release management
+<Template let:args>
+  <Button {...args} on:click={handleClick}>
+    You clicked: {count}
+  </Button>
+</Template>
 
-### Setup
+<Story name="Rounded" args={{rounded: true}}/>
 
-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:
+<Story name="Square" source args={{rounded: false}}/>
 
-- Authenticate using [`npm adduser`](https://docs.npmjs.com/cli/adduser.html)
-- Create an [access token](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens). You’ll need a token with both _Read and Publish_ permissions.
-- Similarly, generate a [Github token](https://github.com/settings/tokens). This token will need the repo scope.
-
-Create a `.env` file at the root of your project and add both these tokens to it:
-
-```
-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.
-
-```
-npx auto create-labels
+<!-- Dynamic snippet should be disabled for this story -->
+<Story name="Button No Args">
+  <Button>Label</Button>
+</Story>
 ```
 
-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.
-
-### Creating a releasing
-
-```sh
-npm run release
-```
+# Getting Started
 
-That will:
+1. Add '@storybook/addon-svelte-csf' to your dev dependencies
+2. In `.storybook/main.js`, add `*.stories.svelte` to the stories patterns
 
-- Build and package the addon code
-- Bump the version
-- Push a release to GitHub and npm
-- Push a changelog to GitHub

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'file-stub';

index.js

@@ -0,0 +1 @@
+module.exports = require('./dist');

jest-transform.js

@@ -0,0 +1 @@
+module.exports = require('./dist/jest-transform');

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]s$': 'babel-jest',
+    '^.+\\.stories\\.svelte$': '<rootDir>/src/jest-transform',
+    '^.+\\.svelte$': 'svelte-jester',
+  },
+  moduleNameMapper: {
+    '!!raw-loader!.*': '<rootDir>/__mocks__/fileMock.js',
+  },
+  moduleFileExtensions: ['js', 'ts', 'svelte', 'json'],
+  testEnvironment: 'jest-environment-jsdom-thirteen',
+};

package.json

@@ -1,18 +1,15 @@
 {
-  "name": "storybook-addon-kit",
-  "version": "1.0.0-rc.2",
-  "description": "everything you need to build a Storybook addon",
+  "name": "@storybook/addon-svelte-csf",
+  "version": "1.0.0",
+  "description": "Allows to write stories in Svelte syntax",
   "keywords": [
     "storybook-addons",
-    "pseudo states",
-    "style",
-    "test"
+    "svelte"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/storybookjs/storybook-addon-kit"
+    "url": "https://github.com/storybookjs/addon-svelte-csf"
   },
-  "author": "winkerVSbecks",
   "license": "MIT",
   "main": "dist/preset.js",
   "files": [
@@ -22,39 +19,64 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist",
-    "build": "babel ./src --out-dir ./dist",
+    "build": "babel ./src --out-dir ./dist --extensions .ts --extensions .js --copy-files",
     "prepublish": "npm run clean && npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
+    "lint": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "storybook": "start-storybook -p 6006",
     "start": "concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"",
     "build-storybook": "build-storybook",
     "release": "npm run build && auto shipit --base-branch=main"
   },
-  "dependencies": {},
+  "dependencies": {
+    "ts-dedent": "^2.0.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
-    "@storybook/react": "^6.1.14",
+    "@babel/preset-typescript": "^7.12.5",
+    "@storybook/addon-essentials": "^6.1.20",
+    "@storybook/addon-knobs": "^6.1.20",
+    "@storybook/addon-storyshots": "^6.1.20",
+    "@storybook/eslint-config-storybook": "^2.4.0",
+    "@storybook/svelte": "^6.1.20",
     "auto": "^10.3.0",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.1.0",
     "chromatic": "^5.6.1",
     "concurrently": "^5.3.0",
+    "eslint": "^7.17.0",
+    "jest": "^26.6.3",
+    "jest-environment-jsdom-thirteen": "^1.0.1",
+    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "svelte": "^3.32.3",
+    "svelte-jester": "^1.3.0",
+    "svelte-loader": "^2.9.1",
+    "typescript": "^3.3.3333"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.1.14",
-    "@storybook/api": "^6.1.14",
-    "@storybook/components": "^6.1.14",
-    "@storybook/core-events": "^6.1.14",
-    "@storybook/theming": "^6.1.14",
+    "@storybook/addons": "^6.1.20",
+    "@storybook/api": "^6.1.20",
+    "@storybook/client-api": "^6.1.20",
+    "@storybook/client-logger": "^6.1.20",
+    "@storybook/components": "^6.1.20",
+    "@storybook/core-events": "^6.1.20",
+    "@storybook/svelte": "^6.1.20",
+    "@storybook/theming": "^6.1.20",
     "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "svelte": "^3.32.3",
+    "svelte-loader": "^2.9.1"
   },
   "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },
@@ -63,11 +85,9 @@
     }
   },
   "storybook": {
-    "displayName": "Addon Kit",
+    "displayName": "Svelte CSF",
     "supportedFrameworks": [
-      "react",
-      "vue",
-      "angular"
+      "svelte"
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   }

preset.js

@@ -1 +1 @@
-module.exports = require("./dist/preset")
+module.exports = require('./dist/preset');