@stencil/storybook-plugin 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2025 OutSystems Inc
+
+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.

package/README.md

@@ -0,0 +1,86 @@
+# StencilJS Storybook Plugin
+
+> This is still early and work in progress, don't use it yet!
+
+## Setup
+
+In an existing StencilJS project, run:
+
+```sh
+npx storybook@next init
+```
+
+to setup a new Storybook project. Select any preset available, e.g. Lit and finish the setup process. After, install the StencilJS preset.
+
+```sh
+npm i --save-dev @stencil/storybook
+```
+
+Last, update the `.storybook/main.ts` file as following:
+
+```ts
+const config = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@stencil/storybook-plugin"
+  }
+};
+
+export default config;
+```
+
+See the [Storybook Docs](https://storybook.js.org/docs/7.0/qwik/get-started/introduction) for the best documentation on getting started with Storybook.
+
+## Usage
+
+A basic story will look like this:
+
+```tsx
+import type { Meta, StoryObj } from '@stencil/storybook-plugin';
+import { h } from '@stencil/core';
+
+import { MyComponent } from './my-component';
+
+const meta = {
+  title: 'MyComponent',
+  component: MyComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    first: { control: 'text' },
+    last: { control: 'text' },
+    middle: { control: 'text' },
+  },
+  args: { first: 'John', last: 'Doe', middle: 'Michael' },
+} satisfies Meta<MyComponent>;
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const Primary: Story = {
+  args: {
+    first: 'John',
+    last: 'Doe',
+    middle: 'Michael',
+  },
+  render: (props) => {
+    return <my-component {...props} />;
+  }
+};
+```
+
+## Limitations
+
+This is early development and we are still seeing some limitations we want to see fixed:
+
+- Story is completely reloaded when component is changed (no hot module replacement)
+- There is no automation yet for easily scaffolding storybook in a Stencil project.
+- Stories are run in dev mode - no SSR, or serialization happens
+
+Please get involved and support the project with code contributions. Thanks!

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@stencil/storybook-plugin",
+  "version": "0.0.1",
+  "description": "Storybook plugin for Stencil",
+  "license": "MIT",
+  "homepage": "https://github.com/stenciljs/storybook",
+  "bugs": {
+    "url": "https://github.com/stenciljs/storybook"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stenciljs/storybook.git",
+    "directory": "packages/plugin"
+  },
+  "keywords": [
+    "storybook",
+    "stencil",
+    "stenciljs",
+    "webcomponents",
+    "components",
+    "framework"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "//": "not sure why dist/preview is needed, but it is",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "import": "./dist/preset.js",
+      "require": "./dist/preset.js"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.js",
+      "require": "./dist/preview.js"
+    },
+    "./dist/preview.js": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.js",
+      "require": "./dist/preview.js"
+    },
+    "./node": {
+      "types": "./dist/node/index.d.ts",
+      "import": "./dist/node/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "watch": "tsc --watch --outDir ./dist --listEmittedFiles",
+    "build": "tsc --outDir ./dist --listEmittedFiles"
+  },
+  "dependencies": {
+    "@stencil/core": "4.29.2-dev.1745369714.ab62ab3",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/builder-vite": "^7.6.16 || ^8.0.0",
+    "@storybook/core-events": "^8.6.12",
+    "@storybook/docs-tools": "^8.6.12",
+    "@storybook/global": "^5.0.0",
+    "@storybook/html": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "preact-render-to-string": "^6.5.13",
+    "react-docgen-typescript": "^2.2.2",
+    "unplugin-stencil": "^0.2.2"
+  },
+  "peerDependencies": {
+    "@stencil/core": "4.29.2-dev.1745369714.ab62ab3"
+  },
+  "devDependencies": {
+    "@storybook/types": "^8.4.1",
+    "@types/node": "^22.8.7",
+    "typescript": "~5.6.3",
+    "vite": "^5.4.10"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}