Update storybook configuration. Replace crystal toolkit scene slider component.

Author: codytodonnell

.storybook/main.js

@@ -1,24 +1,16 @@
 module.exports = {
-  stories: ['../src/stories/**/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
+    '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-actions'
-    // '@storybook/addon-knobs/register',
-    // '@storybook/addon-storysource'
+    '@storybook/addon-interactions',
+    '@storybook/addon-knobs'
   ],
+  framework: '@storybook/react',
   core: {
-    builder: 'webpack5'
+    builder: '@storybook/builder-webpack5'
   },
   webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader')
-        }
-      ]
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
     config.module.rules.push({
       test: /\.less$/,
       use: ['style-loader', 'css-loader', 'less-loader']

package-lock.json

@@ -18,19 +18,18 @@
     "build-prod": "parcel build src/index.html",
     "build-publish": "rollup -c",
     "test": "jest --env=jsdom",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "deploy-storybook": "storybook-to-ghpages",
     "docz:dev": "docz dev",
     "docz:build": "docz build",
     "docz:serve": "docz build && docz serve",
     "lint:yaml": "yamllint ./.github/workflows/*.yml",
-    "postversion": "git push && git push --tags"
+    "postversion": "git push && git push --tags",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "deploy-storybook": "storybook-to-ghpages"
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.17.9",
-    "@storybook/addon-actions": "^6.3.12",
     "@types/classnames": "^2.2.11",
     "axios": "^0.21.1",
     "base64-js": "^1.5.1",
@@ -48,7 +47,6 @@
     "react": "^16.14.0",
     "react-aria-menubutton": "^7.0.1",
     "react-collapsible": "^2.8.3",
-    "react-compound-slider": "^3.3.1",
     "react-data-table-component": "^6.11.6",
     "react-dom": "^16.14.0",
     "react-graph-vis": "^1.0.5",
@@ -84,9 +82,16 @@
     "@parcel/transformer-less": "^2.5.0",
     "@parcel/transformer-sass": "^2.5.0",
     "@rollup/plugin-image": "^2.0.6",
-    "@storybook/addon-knobs": "6.2.9",
-    "@storybook/react": "6.3.8",
-    "@storybook/storybook-deployer": "^2.8.7",
+    "@storybook/addon-actions": "^6.5.3",
+    "@storybook/addon-essentials": "^6.5.3",
+    "@storybook/addon-interactions": "^6.5.3",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-links": "^6.5.3",
+    "@storybook/builder-webpack5": "^6.5.3",
+    "@storybook/manager-webpack5": "^6.5.3",
+    "@storybook/react": "^6.5.3",
+    "@storybook/storybook-deployer": "^2.8.11",
+    "@storybook/testing-library": "^0.0.11",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.5.0",
@@ -96,11 +101,12 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-responsive": "^8.0.2",
     "css-loader": "^6.7.1",
+    "babel-loader": "^8.2.5",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "husky": "^4.3.6",
     "ignore-loader": "^0.1.2",
-    "jest": "^25.5.4",
+    "jest": "^26.6.3",
     "jsdom": "^16.4.0",
     "less": "^3.13.1",
     "less-loader": "^10.2.0",
@@ -116,21 +122,19 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "source-map-explorer": "^2.5.2",
     "style-loader": "^1.3.0",
-    "ts-jest": "^25.2.0",
+    "ts-jest": "^26.5.6",
     "ts-loader": "^9.2.3",
-    "typescript": "^3.9.10",
-    "webpack": "^5.41.1",
+    "typescript": "^4.4.4",
+    "webpack": "^5.72.1",
     "yaml-lint": "^1.2.4"
   },
   "overrides": {
     "graphql": "14.7.0",
-    "@mdx-js/mdx": "^1.5.9",
     "nconf": ">=0.11.4",
     "async": ">=3.2.3",
     "node-forge": ">=1.3.0",
     "nanoid": ">=3.1.31",
     "ansi-html": ">=0.0.8",
-    "postcss": "^7.0.36",
     "glob-parent": ">=5.1.2",
     "prismjs": ">=1.27.0",
     "nth-check": ">=2.0.1",

package.json

@@ -26,7 +26,6 @@ import {
   CameraState,
   initialState
 } from '../CameraContextProvider/camera-reducer';
-import SimpleSlider from '../scene/animation-slider';
 import { usePrevious } from '../../../utils/hooks';
 import toDataUrl from 'svgtodatauri';
 import * as THREE from 'three';
@@ -45,6 +44,7 @@ import ReactTooltip from 'react-tooltip';
 import { v4 as uuidv4 } from 'uuid';
 import { ModalCloseButton } from '../../data-display/Modal/ModalCloseButton';
 import { downloadBlob, downloadJSON } from '../../data-entry/utils';
+import { RangeSlider } from '../../data-entry/RangeSlider';
 
 const getSceneSize = (sceneSize) => (sceneSize ? sceneSize : DEFAULT_SCENE_SIZE);
 
@@ -640,11 +640,15 @@ export const CrystalToolkitScene: React.FC<CrystalToolkitSceneProps> = ({
           )}
 
           {props.animation === AnimationStyle.SLIDER && (
-            <SimpleSlider
-              onUpdate={(a) => {
-                scene.current!.updateTime(a / 100);
-              }}
+            <RangeSlider
+              domain={[0, 100]}
+              onChange={(values) => scene.current!.updateTime(values[0] / 100)}
             />
+            // <SimpleSlider
+            //   onUpdate={(a) => {
+            //     scene.current!.updateTime(a / 100);
+            //   }}
+            // />
           )}
         </div>
       </div>