chore(soba): configure storybook

Author: Chau Tran

libs/soba/.storybook/main.js

@@ -1,6 +1,19 @@
 const config = {
     stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
     addons: ['@storybook/addon-essentials'],
+    webpackFinal: async (config) => {
+        // apply any global webpack configs that might have been specified in .storybook/main.js
+
+        // add your own webpack tweaks if needed
+        config.module.rules.push({
+            test: /\.(glsl|vs|fs|vert|frag)$/,
+            exclude: /node_modules/,
+            use: ['raw-loader', 'glslify-loader'],
+            include: resolve(__dirname, '../'),
+        });
+        return config;
+    },
+    staticDirs: ['./public'],
     framework: {
         name: '@storybook/angular',
         options: {},

libs/soba/.storybook/manager-head.html

@@ -0,0 +1,17 @@
+<title>Angular Three Documentation</title>
+<base href="/%STORYBOOK_BASE_HREF%" />
+<meta name="description" content="Documentation site (Storybook) of Angular Three Soba" />
+<meta name="author" content="Chau Tran" />
+<meta
+    name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+/>
+<meta property="og:title" content="Angular Three - Soba" />
+<meta property="og:description" content="Documentation site (Storybook) of Angular Three Soba" />
+<meta property="og:url" content="https://angular-threejs-soba.netlify.app" />
+<meta property="og:image" content="https://angular-threejs.netlify.app/img/ngt-logo.png" />
+<meta name="twitter:title" content="Angular Three Soba Documentation" />
+<meta name="twitter:description" content="Documentation site (Storybook) of Angular Three Soba" />
+<meta name="twitter:image" content=" https://angular-threejs.netlify.app/img/ngt-logo.png" />
+<meta name="twitter:card" content="summary_large_image" />
+<link rel="icon" type="image/x-icon" href="/soba/ngt-logo.svg" />

libs/soba/.storybook/manager.js

@@ -0,0 +1,4 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({ theme });

libs/soba/.storybook/preview-body.html

@@ -0,0 +1,43 @@
+<style>
+    html,
+    body,
+    #storybook-root {
+        width: 100%;
+        height: 100%;
+        background-color: #121212;
+    }
+
+    .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;
+        width: 100px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

libs/soba/.storybook/public/soba/NORM.jpg

@@ -0,0 +1,159 @@
+{
+    "accessors": [
+        {
+            "bufferView": 2,
+            "componentType": 5126,
+            "count": 1132,
+            "max": [4, 3, 14],
+            "min": [-4, -3, 0],
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 2,
+            "byteOffset": 13584,
+            "componentType": 5126,
+            "count": 1132,
+            "max": [1, 1, 1],
+            "min": [-1, -1, -1],
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 3,
+            "componentType": 5126,
+            "count": 1132,
+            "max": [0, 0, 0, 1],
+            "min": [0, 0, 0, 1],
+            "type": "VEC4"
+        },
+        {
+            "bufferView": 3,
+            "byteOffset": 18112,
+            "componentType": 5126,
+            "count": 1132,
+            "max": [1, 1, 1, 1],
+            "min": [0, 0.19607843458652496, 0, 1],
+            "type": "VEC4"
+        },
+        {
+            "bufferView": 1,
+            "componentType": 5126,
+            "count": 1132,
+            "max": [0, 0],
+            "min": [0, 0],
+            "type": "VEC2"
+        },
+        {
+            "bufferView": 0,
+            "componentType": 5125,
+            "count": 2484,
+            "max": [1131],
+            "min": [0],
+            "type": "SCALAR"
+        }
+    ],
+    "asset": {
+        "extras": {
+            "author": "Acemir Sousa Mendes (https://sketchfab.com/acemir)",
+            "license": "CC-BY-NC-SA-4.0 (http://creativecommons.org/licenses/by-nc-sa/4.0/)",
+            "source": "https://sketchfab.com/3d-models/billy-blaze-aka-commander-keen-voxel-fanart-a64810a4026b445e9633ec758c6c969c",
+            "title": "Billy Blaze aka Commander Keen (Voxel FanArt)"
+        },
+        "generator": "Sketchfab-6.24.0",
+        "version": "2.0"
+    },
+    "bufferViews": [
+        {
+            "buffer": 0,
+            "byteLength": 9936,
+            "byteOffset": 0,
+            "name": "floatBufferViews",
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 9056,
+            "byteOffset": 9936,
+            "byteStride": 8,
+            "name": "floatBufferViews",
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 27168,
+            "byteOffset": 18992,
+            "byteStride": 12,
+            "name": "floatBufferViews",
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 36224,
+            "byteOffset": 46160,
+            "byteStride": 16,
+            "name": "floatBufferViews",
+            "target": 34962
+        }
+    ],
+    "buffers": [
+        {
+            "byteLength": 82384,
+            "uri": "scene.bin"
+        }
+    ],
+    "materials": [
+        {
+            "doubleSided": true,
+            "emissiveFactor": [0, 0, 0],
+            "name": "Scene_-_Root",
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [0.5, 0.5, 0.5, 1],
+                "metallicFactor": 0,
+                "roughnessFactor": 0.59999999999999998
+            }
+        }
+    ],
+    "meshes": [
+        {
+            "primitives": [
+                {
+                    "attributes": {
+                        "COLOR_0": 3,
+                        "NORMAL": 1,
+                        "POSITION": 0,
+                        "TANGENT": 2,
+                        "TEXCOORD_0": 4
+                    },
+                    "indices": 5,
+                    "material": 0,
+                    "mode": 4
+                }
+            ]
+        }
+    ],
+    "nodes": [
+        {
+            "children": [1],
+            "name": "RootNode (gltf orientation matrix)",
+            "rotation": [-0.70710678118654746, -0, -0, 0.70710678118654757]
+        },
+        {
+            "children": [2],
+            "name": "RootNode (model correction matrix)"
+        },
+        {
+            "children": [3],
+            "name": "Geode"
+        },
+        {
+            "mesh": 0,
+            "name": ""
+        }
+    ],
+    "scene": 0,
+    "scenes": [
+        {
+            "name": "OSG_Scene",
+            "nodes": [0]
+        }
+    ]
+}