Merge pull request #52 from saitonakamura/storybook

Added storybook and basic configuration and example

Author: v 1 r t l

.storybook/Setup.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import * as THREE from 'three'
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+
+export function Setup({
+  children,
+  cameraFov = 75,
+  cameraPosition = new THREE.Vector3(0, 0, 5),
+  controls = true,
+  lights = false,
+  ...restProps
+}: {
+  children: React.ReactNode | React.ReactNode[]
+  cameraFov?: number
+  cameraPosition?: THREE.Camera['position']
+  controls?: boolean
+  lights?: boolean
+}) {
+  return (
+    <Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} dpr={window.devicePixelRatio} {...restProps}>
+      {children}
+      {lights && (
+        <>
+          <ambientLight intensity={0.8} />
+          <pointLight intensity={1} position={[0, 6, 0]} />
+        </>
+      )}
+      {controls && <OrbitControls />}
+    </Canvas>
+  )
+}

.storybook/index.css

@@ -0,0 +1,20 @@
+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;
+}

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../.storybook/stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-controls', '@storybook/addon-storysource'],
+}

.storybook/preview.js

@@ -0,0 +1,5 @@
+import './index.css'
+
+export const parameters = {
+  layout: 'fullscreen',
+}

.storybook/stories/List.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { Flex, Box } from '../../src'
+import { Setup } from '../Setup'
+
+const List = ({ width, height }: { width: number; height: number }) => {
+  return (
+    <Flex position={[-width / 2, height / 2, -2]} size={[width, height, 0]} flexDirection="row" flexWrap="wrap">
+      {new Array(8).fill(undefined).map((_, i) => (
+        <Box margin={0.3} key={i} width={1.6} height={2} centerAnchor>
+          {(width, height) => (
+            <mesh>
+              <planeBufferGeometry args={[width, height]} />
+              <meshBasicMaterial color={0x0000ff} />
+            </mesh>
+          )}
+        </Box>
+      ))}
+    </Flex>
+  )
+}
+
+export default {
+  title: 'Example/List',
+  component: List,
+} as ComponentMeta<typeof List>
+
+const Template: ComponentStory<typeof List> = (args) => (
+  <Setup>
+    <List {...args} />
+  </Setup>
+)
+
+export const Primary = Template.bind({})
+Primary.args = {
+  width: 12,
+  height: 7,
+}

.storybook/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["./stories/**/*"]
+}

package.json

@@ -53,7 +53,9 @@
     "eslint": "eslint src --fix --ext=js,ts,tsx,jsx",
     "eslint-examples": "eslint examples/src --fix --ext=js,ts,tsx,jsx",
     "eslint:ci": "eslint src examples/src --fix --ext=js,ts,tsx,jsx",
-    "test": "echo no tests yet"
+    "test": "echo no tests yet",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "yoga-layout-prebuilt": "^1.9.6"
@@ -68,11 +70,15 @@
     "@babel/preset-env": "7.15.0",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "^7.10.4",
+    "@react-three/drei": "^7.3.1",
     "@react-three/fiber": "^7.0.6",
     "@rollup/plugin-babel": "^5.2.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
+    "@storybook/addon-controls": "^6.3.7",
+    "@storybook/addon-storysource": "^6.3.7",
+    "@storybook/react": "^6.3.7",
     "@types/jest": "^26.0.8",
     "@types/node": "^16.4.13",
     "@types/react": "^17.0.16",
@@ -81,6 +87,7 @@
     "@types/three": "^0.131.0",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
+    "babel-loader": "^8.2.2",
     "eslint": "^7.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-alias": "^1.1.2",