Storybook導入

Author: takuma-hmng8

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
 }

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Storybook
+storybook-static/

app/_shaderFx/index.tsx renamed to .storybook/Setup.tsx

@@ -1,17 +1,11 @@
 "use client";
-
-const isDev = process.env.NODE_ENV === "development";
-import { Suspense, useState } from "react";
+import * as React from "react";
+import { useState } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Perf } from "r3f-perf";
 import { PerformanceMonitor } from "@react-three/drei";
-import { Demo } from "./Demo";
-import { CreateKit } from "./CreateKit";
-
-// Create scene is rendered if develop environment and isCreate is true
-const isCreate = true;
 
-export const ShaderFx = () => {
+export const Setup = ({ children }: { children: React.ReactNode }) => {
    const [dpr, setDpr] = useState(1.5);
    return (
       <Canvas dpr={dpr}>
@@ -21,10 +15,8 @@ export const ShaderFx = () => {
                console.log(`dpr:${dpr}`);
                setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10);
             }}>
-            <Suspense fallback={null}>
-               {isDev && isCreate ? <CreateKit /> : <Demo />}
-            </Suspense>
-            <Perf position={"bottom-right"} minimal={false} />
+            {children}
+            <Perf position={"bottom-left"} minimal={false} />
          </PerformanceMonitor>
       </Canvas>
    );

app/_shaderFx/CreateKit/fxMaterial.tsx renamed to .storybook/fxMaterial.tsx

@@ -1,6 +1,4 @@
 import * as THREE from "three";
-import vertexShader from "./shader/main.vert";
-import fragmentShader from "./shader/main.frag";
 import { shaderMaterial } from "@react-three/drei";
 
 declare global {
@@ -19,6 +17,6 @@ export const FxMaterial = shaderMaterial(
    {
       u_fx: null,
    },
-   vertexShader,
-   fragmentShader
+   "varying vec2 vUv;void main() {vUv = uv;gl_Position = vec4(position, 1.0);}",
+   "precision mediump float;varying vec2 vUv;uniform sampler2D u_fx;void main() {vec2 uv = vUv;	gl_FragColor = texture2D(u_fx, uv);}"
 );

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+   staticDirs: ["./public"],
+   stories: [
+      "./stories/**/*.mdx",
+      "./stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+   ],
+   addons: [
+      "@storybook/addon-links",
+      "@storybook/addon-essentials",
+      "@storybook/addon-onboarding",
+      "@storybook/addon-interactions",
+   ],
+   framework: {
+      name: "@storybook/nextjs",
+      options: {},
+   },
+   docs: {
+      autodocs: "tag",
+   },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,14 @@
+import { addons } from "@storybook/manager-api";
+import { create } from "@storybook/theming/create";
+
+addons.setConfig({
+   theme: create({
+      base: "dark",
+      brandImage: "/logo.svg",
+      brandUrl: "https://github.com/takuma-hmng8/use-shader-fx",
+      brandTitle: "use-shader-fx",
+      brandTarget: "_blank",
+   }),
+   panelPosition: "right",
+   showPanel: true,
+});

.storybook/preview.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+   parameters: {
+      layout: "fullscreen",
+   },
+   decorators: [
+      (Story) => (
+         <React.Suspense fallback={null}>
+            <Story />
+         </React.Suspense>
+      ),
+   ],
+};
+export default preview;