Merge pull request #1 from servinlp/feat/storybook

feat: initial storybook setup and shaderMaterial story

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "sandboxes": ["4nc1u", "bfplr", "1wh6f"],
   "packages": ["dist"],
-  "node": "14"
+  "node": "18"
 }

.github/workflows/release.yml

@@ -21,7 +21,26 @@ jobs:
       - id: main
         run: |
           yarn install
+          yarn build-storybook
           yarn release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./storybook-static
+
+  # See: https://github.com/actions/deploy-pages
+  deploy-job:
+    needs: release-job
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.storybook/Setup.ts

@@ -0,0 +1,30 @@
+import { PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+
+export const Setup = () => {
+  const root = document.querySelector('#root')!
+  let { width, height } = root?.getBoundingClientRect()
+  const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+  camera.position.z = 3
+  const renderer = new WebGLRenderer()
+  const scene = new Scene()
+
+  const resize = () => {
+    let { width, height } = root?.getBoundingClientRect()
+    renderer.setSize(width, height)
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+  }
+
+  resize()
+  window.addEventListener('resize', resize)
+
+  const render = (toRender = () => {}) => {
+    toRender()
+
+    renderer.render(scene, camera)
+
+    requestAnimationFrame(() => render(toRender))
+  }
+
+  return { renderer, camera, scene, render }
+}

.storybook/index.css

@@ -0,0 +1,57 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: hidden;
+  background-color: #121212;
+}
+
+#root {
+  overflow: auto;
+}
+
+.html-story-block {
+  color: white;
+  width: 120px;
+  position: relative;
+  margin-left: 100px;
+}
+
+.html-story-block.margin300 {
+  margin-left: 300px;
+}
+
+.html-story-block:before {
+  content: '';
+  display: block;
+  position: absolute;
+
+  top: 50%;
+  left: -60px;
+
+  width: 60px;
+  height: 1px;
+  background-color: white;
+}
+
+.html-story-label {
+  background-color: white;
+  color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+}
+
+.html-story-label-B {
+  font-size: 50px;
+}

.storybook/main.ts

@@ -0,0 +1,27 @@
+import { resolve } from 'path'
+
+export default {
+  staticDirs: ['./public'],
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  stories: ['./stories/**/*.stories.{ts,tsx}'],
+  addons: ['@storybook/addon-controls', '@storybook/addon-actions'],
+  typescript: {
+    check: true,
+  },
+  // https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader
+  features: {
+    postcss: false,
+  },
+  webpackFinal: (config) => {
+    config.module.rules.push({
+      test: /\.(glsl|vs|fs|vert|frag)$/,
+      exclude: /node_modules/,
+      use: ['raw-loader', 'glslify-loader'],
+      include: resolve(__dirname, '../'),
+    })
+
+    return config
+  },
+}

.storybook/manager.ts

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/addons'
+import theme from './theme'
+
+addons.setConfig({
+  theme,
+  panelPosition: 'right',
+  showPanel: true,
+})

.storybook/preview.ts

@@ -0,0 +1,11 @@
+import './index.css'
+
+export const parameters = {
+  layout: 'fullscreen',
+}
+
+export const decorators = [
+  (Story) => {
+    return Story()
+  },
+]

.storybook/stories/shaderMaterial.stories.ts

@@ -0,0 +1,80 @@
+import { BoxGeometry, Mesh, Texture, TextureLoader } from 'three'
+import { shaderMaterial } from '../../src/core/shaderMaterial'
+import { Setup } from '../Setup'
+import { Meta } from '@storybook/html'
+import { OrbitControls } from 'three-stdlib'
+
+export default {
+  title: 'Shaders/shaderMaterial',
+  argTypes: { repeats: { control: { type: 'range', min: 1, max: 5, step: 1 } } },
+} as Meta
+
+const MyMaterial = shaderMaterial(
+  { map: new Texture(), repeats: 1 },
+  `
+    varying vec2 vUv;
+
+    void main()	{
+      vUv = uv;
+      
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
+    }
+    `,
+  `
+    varying vec2 vUv;
+    uniform float repeats;
+    uniform sampler2D map;
+
+    float random (vec2 st) {
+      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+    }
+
+    void main(){
+      vec2 uv = vUv;
+
+      uv *= repeats;
+      uv = fract(uv);
+
+      vec3 color = vec3(
+        texture2D(map, uv).r,
+        texture2D(map, uv + vec2(0.01,0.01)).g,
+        texture2D(map, uv - vec2(0.01,0.01)).b
+      );
+      
+      gl_FragColor = vec4(color,1.0);
+
+      #include <tonemapping_fragment>
+      #include <encodings_fragment>
+    }
+  `
+)
+
+export const ShaderMaterialStory = (args) => {
+  const { renderer, scene, camera, render } = Setup()
+  new OrbitControls(camera, renderer.domElement)
+
+  const loader = new TextureLoader()
+
+  loader.load('https://source.unsplash.com/random/400x400', function (texture) {
+    const geometry = new BoxGeometry(1, 1, 1)
+    const material = new MyMaterial({
+      map: texture,
+      repeats: args.repeats,
+    })
+
+    const mesh = new Mesh(geometry, material)
+    scene.add(mesh)
+
+    render(() => {
+      mesh.rotation.x += 0.005
+      mesh.rotation.y += 0.01
+    })
+  })
+
+  return renderer.domElement
+}
+
+ShaderMaterialStory.storyName = 'Default'
+ShaderMaterialStory.args = {
+  repeats: 2,
+}

.storybook/theme.ts

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming/create'
+import dreiLogo from '../logo.jpg'
+
+export default create({
+  base: 'light',
+  brandImage: dreiLogo,
+  appBg: 'white',
+})

package.json

@@ -53,10 +53,14 @@
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly",
     "copy": "copyfiles package.json README.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.husky=undefined; this.prettier=undefined; this.jest=undefined; this['lint-staged']=undefined;\"",
-    "release": "semantic-release"
+    "release": "semantic-release",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "camera-controls": "^2.1.0",
     "detect-gpu": "^5.0.10",
     "glsl-noise": "^0.0.0",
@@ -84,6 +88,12 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/html": "^6.5.16",
+    "@storybook/testing-library": "^0.0.13",
     "@types/jest": "^26.0.10",
     "@types/lodash-es": "^4.17.3",
     "@types/three": "^0.149.0",