docs: storybook

packages/docs/.gitignore

@@ -13,4 +13,8 @@ dist
 .DS_Store
 
 # Typedoc outputs
-docs/*
+docs/
+
+# Storybook
+*storybook.log
+storybook/

packages/docs/.storybook/main.ts

@@ -0,0 +1,29 @@
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+    return dirname(require.resolve(join(value, "package.json")));
+}
+
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+    stories: [
+        "../stories/**/*.mdx",
+        "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    ],
+    addons: [
+        getAbsolutePath("@storybook/addon-links"),
+        getAbsolutePath("@storybook/addon-essentials"),
+        getAbsolutePath("@chromatic-com/storybook"),
+        getAbsolutePath("@storybook/addon-interactions"),
+    ],
+    framework: {
+        name: getAbsolutePath("@storybook/html-vite"),
+        options: {},
+    },
+    viteFinal: async (config) => ({ ...config, define: { "process.env": {} } }),
+};
+export default config;

packages/docs/.storybook/manager.ts

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

packages/docs/.storybook/preview.ts

@@ -0,0 +1,18 @@
+import { Preview } from "@storybook/html";
+import { themes } from "@storybook/theming";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        docs: {
+            theme: themes.dark,
+        },
+    },
+};
+
+export default preview;

packages/docs/package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "dev": "vite --host",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook"
   },
   "dependencies": {
     "@vfx-js/core": "0.5.1",
@@ -18,12 +20,23 @@
     "vh-check": "^2.0.5"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/html": "^8.2.9",
+    "@storybook/html-vite": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "@types/dedent": "^0.7.2",
     "@types/is-mobile": "^2.1.4",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20.14.2",
     "rimraf": "^5.0.7",
+    "storybook": "^8.2.9",
     "typescript": "^5.4.5",
     "vite": "^5.2.13"
   }

packages/docs/stories/Configure.mdx

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/blocks";
+
+
+<Meta title="Configure your project" />

packages/docs/stories/Presets.stories.ts

@@ -0,0 +1,58 @@
+import { VFX } from "@vfx-js/core";
+import Logo from "./assets/logo-640w-20p.svg";
+import Jellyfish from "./assets/jellyfish.webp";
+import "./preset.css";
+
+const render = (opts) => {
+    const img = document.createElement("img");
+    console.log(opts.src);
+    img.src = opts.src ?? Logo;
+
+    const vfx = new VFX();
+    vfx.add(img, opts);
+
+    return img;
+};
+
+export default {
+    title: "Presets",
+    render,
+    parameters: {
+        layout: "fullscreen",
+    },
+    args: {},
+};
+
+export const UvGradient = { args: { shader: "uvGradient" } };
+export const Glitch = { args: { shader: "glitch", overflow: 100 } };
+export const RgbGlitch = { args: { shader: "rgbGlitch" } };
+export const RgbShift = { args: { shader: "rgbShift" } };
+export const Rainbow = { args: { shader: "rainbow" } };
+export const Shine = { args: { shader: "shine" } };
+export const Blink = { args: { shader: "blink" } };
+export const spring = { args: { shader: "spring" } };
+export const duotone = {
+    args: {
+        src: Jellyfish,
+        shader: "duotone",
+        uniforms: {
+            color1: [1, 0, 0, 1],
+            color2: [0, 0, 1, 1],
+        },
+    },
+};
+export const Tritone = {
+    args: {
+        src: Jellyfish,
+        shader: "tritone",
+        uniforms: {
+            color1: [1, 0, 0, 1],
+            color2: [0, 1, 0, 1],
+            color3: [0, 0, 1, 1],
+        },
+    },
+};
+export const hueShift = { args: { src: Jellyfish, shader: "hueShift" } };
+export const sinewave = { args: { shader: "sinewave" } };
+export const pixelate = { args: { shader: "pixelate" } };
+export const halftone = { args: { src: Jellyfish, shader: "halftone" } };

packages/docs/stories/preset.css

@@ -0,0 +1,16 @@
+html,
+body {
+    height: 100%;
+    margin: 0;
+    background: black;
+}
+#storybook-root {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+img {
+    max-width: 90%;
+    max-height: 90%;
+}

packages/docs/stories/types.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+    export const img: string;
+}
+declare module "*.webp" {
+    export const img: string;
+}

packages/docs/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig(() => ({
             input: {
                 index: resolve(__dirname, "index.html"),
                 docs: resolve(__dirname, "docs/index.html"),
+                storybook: resolve(__dirname, "storybook/index.html"),
             },
         },
     },