Clean up stories

Author: codytodonnell

.storybook/main.js

@@ -3,8 +3,7 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-knobs'
+    '@storybook/addon-interactions'
   ],
   framework: '@storybook/react',
   core: {

README.md

@@ -64,11 +64,21 @@ To see how your component looks and behaves while you are developing it, you hav
 
 If you prefer, you can also test your component inside of storybook. To do this, create a new story within the `src/stories` directory. See the Storybook section below for more info about Storybook.
 
-### Classes and Styles
+### Classes
 
 By convention, almost all components are given a top-level class which is the name of the component converted into kabob-case and prefixed with "mpc-". For example, the `DataBlock` component has the class `mpc-data-block`. The `className` prop for any component should extend the default class rather than replace it.
 
-The components in this library are intended to be used with the Bulma CSS Framework. For that reason, many bulma classes and component patterns are utilized within the components.
+The components in this library are intended to be used with the [Bulma CSS Framework](https://bulma.io/). For that reason, many bulma classes and component patterns are utilized within the components.
+
+### Styles
+
+Components should come with styles that are important for their usage. To include styles for a component, add a CSS file named `MyComponent.css` in the component's folder and import that CSS file into the main component file.
+
+```
+import './MyComponent.css';
+```
+
+Remember that these components are intended to be used with the [Bulma CSS framework](https://bulma.io/), so the styles in the custom stylesheet can (and often do) take this into account.
 
 ### Test IDs
 
@@ -163,7 +173,17 @@ Storybook is configured using webpack and various plugins offered by Storybook.
 
 The order and hierarchy of the stories are set in `.storybook/preview.js`. This file is also where styles are imported into the storybook. Any styles that the storybook needs that aren't already imported into the components themselves should be included here.
 
-### Deploy storybook to github pages
+### Run Storybook Locally
+
+Run the story book locally:
+
+```
+npm run storybook
+```
+
+You should be able to access the storybook at http://localhost:6006
+
+### Deploy Storybook to GitHub Pages
 
 This will **build** and **deploy** the storybook.
 Stories are defined in `./src/stories`
@@ -172,6 +192,8 @@ Stories are defined in `./src/stories`
 npm deploy-storybook
 ```
 
+If successful, the changes will be live at https://materialsproject.github.io/mp-react-components/
+
 ### Build Tools
 
-This repo uses Parcel to build and run the app locally and Rollup to publish the app. Parcel does not have a config file, but it does use Babel to transpile the code for this repo. The babel configuration exists in `.babelrc` and `babel.config.js`. The Rollup configuration is defined in `rollup.config.js`.
+This repo uses Parcel to build and run the app locally and Rollup to publish the app. Parcel does not have a config file, but it does use Babel to transpile the code for this repo. The babel configuration exists in `.babelrc` and `babel.config.js`. The Rollup configuration is defined in `rollup.config.js`. In the future, both of these build tools may be removed in favor of a single unified tool (potentially webpack as it is used in dash-mp-components).

src/components/crystal-toolkit/DynamicCrystalToolkitScene/DynamicCrystalToolkitScene.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { CrystalToolkitScene } from '../CrystalToolkitScene';
-import { boolean, number, object, select, withKnobs } from '@storybook/addon-knobs';
 import { AnimationStyle, Renderer } from '../scene/constants';
 
 /**
@@ -38,17 +37,12 @@ export const DynamicCrystalToolkitScene: React.FC = () => {
       <button onClick={remove}>remove</button>
       {showScene && sceneData ? (
         <CrystalToolkitScene
-          debug={boolean('DEBUG', false)}
-          animation={select(
-            'Animation',
-            [AnimationStyle.SLIDER, AnimationStyle.PLAY, AnimationStyle.NONE] as string[],
-            AnimationStyle.NONE as string
-          )}
-          axisView={select('Axis position', ['SW', 'SE', 'NW', 'NE', 'HIDDEN'], 'SW')}
-          inletPadding={number('padding', 10)}
-          inletSize={number('size', 100)}
-          data={object('scene', sceneData)}
-          sceneSize={object('Size', 400)}
+          debug={false}
+          animation={AnimationStyle.NONE}
+          inletPadding={10}
+          inletSize={100}
+          data={sceneData}
+          sceneSize={400}
           toggleVisibility={emptyObject}
         />
       ) : null}

src/components/crystal-toolkit/scene/Scene.ts

@@ -10,10 +10,10 @@ import {
   Renderer,
   ThreePosition
 } from './constants';
-import { TooltipHelper } from '../scene/tooltip-helper';
-import { InsetHelper, ScenePosition } from '../scene/inset-helper';
+import { TooltipHelper } from './tooltip-helper';
+import { InsetHelper, ScenePosition } from './inset-helper';
 import { getSceneWithBackground, ThreeBuilder } from './three_builder';
-import { DebugHelper } from '../scene/debug-helper';
+import { DebugHelper } from './debug-helper';
 import {
   disposeSceneHierarchy,
   getScreenCoordinate,
@@ -25,9 +25,9 @@ import {
 //import img from './glass.png';
 import { OutlineEffect } from 'three/examples/jsm/effects/OutlineEffect';
 import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls';
-import { SceneJsonObject } from '../scene/simple-scene';
+import { SceneJsonObject } from './simple-scene';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import { AnimationHelper } from '../scene/animation-helper';
+import { AnimationHelper } from './animation-helper';
 import '../CrystalToolkitScene/CrystalToolkitScene.less';
 import { CameraState } from '../CameraContextProvider/camera-reducer';
 

src/pages/CrystalStructureViewer/CrystalStructureViewer.tsx

@@ -188,7 +188,7 @@ export const CrystalStructureViewer: React.FC = () => {
                 // showImageButton={false}
                 showExportButton={false}
               >
-                {null}
+                <p>Settings panel</p>
                 <p>This could be a legend</p>
               </CrystalToolkitScene>
             </div>

src/stories/crystal-toolkit/CrystalToolkitScene.stories.tsx

@@ -1,4 +1,3 @@
-import { boolean, number, object, select, withKnobs } from '@storybook/addon-knobs';
 import * as React from 'react';
 import {
   s2,
@@ -17,9 +16,7 @@ import { Story } from '@storybook/react';
 
 export default {
   component: CrystalToolkitScene,
-  title: 'Crystal Toolkit/CrystalToolkitScene',
-  decorators: [withKnobs],
-  stories: []
+  title: 'Crystal Toolkit/CrystalToolkitScene'
 };
 
 const Template: Story<React.PropsWithChildren<CrystalToolkitSceneProps>> = (args) => (
@@ -28,18 +25,19 @@ const Template: Story<React.PropsWithChildren<CrystalToolkitSceneProps>> = (args
 
 export const Basic = Template.bind({});
 Basic.args = {
-  debug: boolean('DEBUG', false),
-  animation: select(
-    'Animation',
-    [AnimationStyle.SLIDER, AnimationStyle.PLAY, AnimationStyle.NONE] as string[],
-    AnimationStyle.NONE as string
-  ),
-  axisView: select('Axis position', ['SW', 'SE', 'NW', 'NE', 'HIDDEN'], 'SW'),
-  inletPadding: number('padding', 10),
-  inletSize: number('size', 100),
-  data: object('scene', sceneJson),
-  sceneSize: object('Size', 400),
-  toggleVisibility: {}
+  debug: false,
+  animation: AnimationStyle.NONE,
+  // axisView: select('Axis position', ['SW', 'SE', 'NW', 'NE', 'HIDDEN'], 'SW'),
+  inletPadding: 10,
+  inletSize: 100,
+  data: sceneJson,
+  sceneSize: 400,
+  toggleVisibility: {},
+  settings: {
+    renderer: Renderer.WEBGL,
+    extractAxis: false,
+    zoomToFit2D: true
+  }
 };
 
 export const AnimatedScene = Template.bind({});
@@ -85,7 +83,7 @@ TubeScene.args = {
     isMultiSelectionEnabled: false,
     secondaryObjectView: true
   },
-  data: object('scene', bezierScene),
+  data: bezierScene,
   debug: false
 };
 const TubeSceneDescription = `

src/stories/crystal-toolkit/ReactGraphComponent.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Story } from '@storybook/react';
 import { InferProps } from 'prop-types';
 import ReactGraphComponent from '../../components/crystal-toolkit/graph.component';
-import { object } from '@storybook/addon-knobs';
 import { DEFAULT_OPTIONS, GRAPH } from '../constants';
 
 export default {
@@ -16,6 +15,6 @@ const Template: Story<React.PropsWithChildren<InferProps<typeof ReactGraphCompon
 
 export const Basic = Template.bind({});
 Basic.args = {
-  graph: object('scene', GRAPH),
-  options: object('options', DEFAULT_OPTIONS)
+  graph: GRAPH,
+  options: DEFAULT_OPTIONS
 };