feat: add Storybook starter

packages/docs/src/routes/docs/getting-started/index.mdx

@@ -120,7 +120,7 @@ Please check out the [deployment](/integrations/deployments/overview/index.mdx)
 
 ## Other integrations
 
-Qwik is designed to be integrated with other tools. Such as `vitest`, `tailwind`, `partytown`... run the following command to see the list of available integrations:
+Qwik is designed to be integrated with other tools. Such as `vitest`, `tailwind`, `partytown`, `storybook`... run the following command to see the list of available integrations:
 
 ```shell
 npm run qwik add

packages/docs/src/routes/integrations/integration/storybook/index.mdx

@@ -0,0 +1,100 @@
+---
+title: Qwik City and Storybook
+keywords: storybook, components, preview, testing, docs
+contributors:
+  - DustinJSilk
+---
+
+# Storybook
+
+Storybook is a frontend tool for building UI components and pages in isolation.
+It helps you develop hard-to-reach states and edge cases without needing to run
+the whole app. You can test and preview components in a local Storybook UI or
+deploy a preview of Storybook to a server to share with your team.
+
+## Usage
+
+You can add Storybook easily by using the following Qwik starter script:
+
+```shell
+npm run qwik add storybook
+```
+
+> The default configuration for Storybook requires Nodejs v17 or higher
+
+The previous command will add a folder under `.storybook` that holds the
+Storybook configuration. Essential dependencies and scripts are added to your
+package.json, and a new component is added to `src/components/story-example`
+with a Story to get you started.
+
+You can now run a preview server with:
+
+```shell
+npm run storybook
+```
+
+You can add stories to your components by adding a `component.stories.tsx` which
+Storybook will pick up on automatically.
+
+```tsx
+import { Meta, StoryObj } from 'storybook-framework-qwik'
+import { StoryExample, StoryExampleProps } from './story-example';
+
+export default {
+  title: 'Story Example',
+  component: StoryExample,
+  args: {
+    color: 'red',
+  },
+  argTypes: {
+    color: {
+      options: ['red', 'green', 'blue'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+} as Meta<StoryExampleProps>;
+
+export const Default: StoryObj<StoryExampleProps> = {}
+```
+
+## With tailwindcss
+
+When using tailwindcss with storybook, avoid adding uneccessary bloat to your
+production builds by ignoring tailwind classes that are only used in stories.
+
+Update your `tailwind.config.js` file to ignore stories when building for
+production.
+
+```JavaScript
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    process.env.NODE_ENV === 'production' && '!./src/**/*.stories.{js,ts,jsx,tsx,mdx}',
+  ],
+  ...
+}
+```
+
+If you are building a static version of your storybook, you'll want to keep
+any tailwindcss classes found in your `.stories` files. Try adding an
+environment variable to your build script and check if it exists when including
+your files.
+
+```JavaScript
+process.env.NODE_ENV === 'production' &&
+  !process.env.STORYBOOK_BUILD &&
+  '!./src/**/*.stories.{js,ts,jsx,tsx,mdx}'
+```
+
+## With i18n
+
+When using multiple locales with `$localize` from [qwik-i18n](https://github.com/mhevery/qwik-i18n),
+you will need to initiate your translations in your `.storybook/preview.ts` file:
+
+```tsx
+import { initTranslations } from '../src/i18n'
+
+initTranslations()
+```

starters/features/storybook/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from '@storybook/builder-vite';
+
+const config: StorybookConfig = {
+  addons: ['@storybook/addon-essentials'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  framework: {
+    name: 'storybook-framework-qwik',
+  },
+};
+
+export default config;

starters/features/storybook/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark,
+});

starters/features/storybook/.storybook/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

starters/features/storybook/.storybook/preview.tsx

@@ -0,0 +1,21 @@
+import { Decorator, Parameters } from 'storybook-framework-qwik';
+import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+
+import '../src/global.css';
+
+export const parameters: Parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+    },
+  },
+};
+
+export const decorators: Decorator[] = [qwikCityDecorator];

starters/features/storybook/.storybook/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "rootDir": "../"
+  },
+  "exclude": ["../**/*.spec.ts", "../**/*.test.ts", "../**/*.spec.tsx", "../**/*.test.tsx"],
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.stories.mdx",
+    "**/*.ts",
+    "**/*.tsx",
+    "../vite.config.ts"
+  ]
+}

starters/features/storybook/package.json

@@ -0,0 +1,35 @@
+{
+  "description": "Use Storybook with your Qwik app",
+  "devDependencies": {
+    "@storybook/addon-a11y": "^7.0.0-beta.24",
+    "@storybook/addon-actions": "^7.0.0-beta.24",
+    "@storybook/addon-essentials": "^7.0.0-beta.24",
+    "@storybook/addon-interactions": "^7.0.0-beta.24",
+    "@storybook/addon-links": "^7.0.0-beta.24",
+    "@storybook/builder-vite": "^7.0.0-beta.24",
+    "@storybook/cli": "^7.0.0-beta.24",
+    "@storybook/html": "^7.0.0-beta.24",
+    "@storybook/html-vite": "^7.0.0-beta.24",
+    "@storybook/node-logger": "^7.0.0-beta.24",
+    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/theming": "^7.0.0-beta.24",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0-beta.24",
+    "storybook-framework-qwik": "^0.0.8"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006 -s public",
+    "storybook.build": "storybook build -s public"
+  },
+  "__qwik__": {
+    "displayName": "Integration: Storybook",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://storybook.js.org/docs/react/get-started/introduction",
+      "https://qwik.builder.io/qwikcity/integrations/storybook/",
+      "https://github.com/literalpie/storybook-framework-qwik"
+    ]
+  }
+}

starters/features/storybook/src/components/story-example/story-example.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from 'storybook-framework-qwik';
+import { StoryExample, StoryExampleProps } from './story-example';
+
+export default {
+  title: 'Story Example',
+  component: StoryExample,
+  args: {
+    color: 'red',
+  },
+  argTypes: {
+    color: {
+      options: ['red', 'green', 'blue'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+} as Meta<StoryExampleProps>;
+
+export const Default: StoryObj<StoryExampleProps> = {};

starters/features/storybook/src/components/story-example/story-example.tsx

@@ -0,0 +1,26 @@
+import { component$, Slot, useStylesScoped$ } from '@builder.io/qwik';
+
+export interface StoryExampleProps {
+  color: 'red' | 'green' | 'blue';
+}
+
+export const StoryExample = component$((props: StoryExampleProps) => {
+  useStylesScoped$(`
+    div {
+      align-items: center;
+      border-radius: 50%;
+      display: flex;
+      height: 200px;
+      justify-content: center;
+      width: 200px;
+    }
+  `);
+
+  return (
+    <div style={`background-color: ${props.color}`}>
+      <span>
+        <Slot />
+      </span>
+    </div>
+  );
+});