Add new stories and prop type definitions

src/client/components/facet_bar/ChipsArray.js

@@ -16,6 +16,10 @@ const styles = theme => ({
   }
 })
 
+/**
+ * A component for displaying the active facet selections an array of Material-UI's Chips.
+ * Redux is used for keeping track of the selections.
+ */
 const ChipsArray = props => {
   const handleDelete = item => () => {
     if (!props.someFacetIsFetching) {

src/client/components/facet_bar/DateFacet.js

@@ -16,6 +16,9 @@ const styles = theme => ({
   }
 })
 
+/**
+ * A component for a date facet with pickers using @material-ui/pickers and Moment.js.
+ */
 class DateFacet extends React.Component {
   constructor (props) {
     super(props)
@@ -130,4 +133,6 @@ DateFacet.propTypes = {
   facetUpdateID: PropTypes.number
 }
 
+export const DateFacetComponent = DateFacet
+
 export default withStyles(styles)(DateFacet)

src/client/components/facet_bar/DateFacet.stories.js

+import React from 'react'
+import DateFacet, { DateFacetComponent } from './DateFacet'
+import Center from '../../../../.storybook/Center'
+import PaperContainer from '../../../../.storybook/PaperContainer'
+import { MuiPickersUtilsProvider } from '@material-ui/pickers'
+import moment from 'moment'
+import MomentUtils from '@date-io/moment'
+import 'moment/locale/fi'
+// import 'moment/locale/en'
+
+const facet = {
+  id: 'birthTimespan',
+  // predicate: defined in backend
+  distinctValueCount: 0,
+  values: [],
+  flatValues: [],
+  sortBy: null,
+  sortDirection: null,
+  sortButton: false,
+  spatialFilterButton: false,
+  isFetching: false,
+  searchField: false,
+  containerClass: 'three',
+  filterType: 'dateFilter',
+  min: '1800-01-01',
+  max: '1922-12-31',
+  timespanFilter: null,
+  type: 'date'
+}
+
+export default {
+  component: DateFacetComponent,
+  title: 'Sampo-UI/facet_bar/DateFacet',
+  decorators: [storyFn =>
+    <Center><PaperContainer>{storyFn()}</PaperContainer></Center>
+  ]
+}
+
+export const basic = props => {
+  const facetID = 'productionTimespan'
+  return (
+    <div style={{ width: 400, height: 150 }}>
+      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale='fi'>
+        <DateFacet
+          facetID={facetID}
+          facet={facet}
+          facetClass='perspective1'
+          resultClass='perspective1'
+          facetUpdateID={0}
+          fetchFacet={() => null}
+          someFacetIsFetching={false}
+          updateFacetOption={() => null}
+        />
+      </MuiPickersUtilsProvider>
+    </div>
+  )
+}

src/client/components/facet_bar/FacetHeader.js

@@ -35,6 +35,9 @@ const styles = theme => ({
   }
 })
 
+/**
+ * A component for rendering a header and optional settings dropdown for a facet component.
+ */
 class FacetHeader extends React.Component {
   state = {
     anchorEl: null

src/client/components/facet_bar/HierarchicalFacet.js

@@ -52,15 +52,15 @@ const styles = () => ({
   }
 })
 
-/*
-This component is based on the React Sortable Tree example at:
-https://frontend-collective.github.io/react-sortable-tree/storybook/?selectedKind=Basics&selectedStory=Search&full=0&addons=0&stories=1&panelRight=0
-*/
+/**
+ * A component for checkbox facets with or without hierarchy.
+ * Based on https://github.com/frontend-collective/react-sortable-tree
+ */
 class HierarchicalFacet extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      treeData: this.props.facetedSearchMode === 'clientFS'
+      treeData: this.props.facetedSearchMode === 'clientFS' || this.props.facetedSearchMode === 'storybook'
         ? this.props.facet.values : [],
       searchString: '',
       searchFocusIndex: 0,
@@ -348,6 +348,7 @@ class HierarchicalFacet extends Component {
                   onlyExpandSearchedNodes
                   theme={FileExplorerTheme}
                   generateNodeProps={this.generateNodeProps}
+                  isVirtualized={!this.props.facetedSearchMode === 'storybook'} // virtualization does not work in Storybook
                 />
               </div>}
             {facet.filterType === 'spatialFilter' &&
@@ -364,22 +365,56 @@ class HierarchicalFacet extends Component {
 }
 
 HierarchicalFacet.propTypes = {
+  /**
+   * Material-UI styles.
+   */
   classes: PropTypes.object.isRequired,
+  /**
+   * Unique id of the facet.
+   */
   facetID: PropTypes.string.isRequired,
+  /**
+   * An object containing the client-side config and values of the facet.
+   */
   facet: PropTypes.object.isRequired,
+  /**
+   * The class of the facet for server-side configs.
+   */
   facetClass: PropTypes.string,
-  resultClass: PropTypes.string,
-  fetchFacet: PropTypes.func,
+  /**
+   * A facet should be disabled while some other facet is updating.
+   */
   someFacetIsFetching: PropTypes.bool.isRequired,
-  updateFacetOption: PropTypes.func,
-  clientFSUpdateFacet: PropTypes.func,
+  /**
+   * An integer for detecting if some other facet was updated.
+   */
   facetUpdateID: PropTypes.number,
+  /**
+   * Lastly updated facet filter, from the Redux state.
+   */
   updatedFilter: PropTypes.oneOfType([
     PropTypes.object,
     PropTypes.string,
     PropTypes.array]),
   updatedFacet: PropTypes.string,
-  facetedSearchMode: PropTypes.string
+  /**
+   * Faceted search mode. Storybook mode disables virtualization of react-sortable-tree.
+   */
+  facetedSearchMode: PropTypes.oneOf(['serverFS', 'clientFS', 'storybook']),
+  /**
+   * Redux action for fetching the facet values.
+   */
+  fetchFacet: PropTypes.func,
+  /**
+   * Redux action for updating the client-side config of the facet.
+   */
+  updateFacetOption: PropTypes.func,
+  /**
+   * Redux action for updating the facet in clientFS mode.
+   */
+  clientFSUpdateFacet: PropTypes.func
 }
 
+export const HierarchicalFacetComponent = HierarchicalFacet
+
 export default withStyles(styles)(HierarchicalFacet)

src/client/components/facet_bar/HierarchicalFacet.stories.js

+import React from 'react'
+import HierarchicalFacet, { HierarchicalFacetComponent } from './HierarchicalFacet'
+import Center from '../../../../.storybook/Center'
+import PaperContainer from '../../../../.storybook/PaperContainer'
+import { productionPlace } from './HierarchicalFacet.testData'
+import 'react-sortable-tree/style.css' // This only needs to be imported once in your app
+
+export default {
+  component: HierarchicalFacetComponent,
+  title: 'Sampo-UI/facet_bar/HierarchicalFacet',
+  decorators: [storyFn => <Center><PaperContainer>{storyFn()}</PaperContainer></Center>]
+}
+
+export const basic = props => {
+  const facetID = 'productionPlace'
+  return (
+    <div style={{ width: 400, height: 500, overflow: 'auto' }}>
+      {/* <div style={{ height: 400 }}>
+        <SortableTree
+          treeData={productionPlace.values}
+        />
+      </div> */}
+      <HierarchicalFacet
+        facetID={facetID}
+        facet={productionPlace}
+        facetClass='perspective1'
+        someFacetIsFetching={false}
+        fetchFacet={() => null}
+        facetedSearchMode='storybook'
+      />
+    </div>
+  )
+}

src/client/components/facet_bar/RangeFacet.js

@@ -34,6 +34,9 @@ const styles = theme => ({
   }
 })
 
+/**
+ * A component for a integer range facet.
+ */
 class RangeFacet extends Component {
   constructor (props) {
     super(props)

src/client/components/main_layout/TextPage.js

@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 /**
-  A component for creating a responsive page with static content.
+ * A component for creating a responsive page with static content.
  */
 const TextPage = props => {
   const classes = useStyles()
@@ -45,8 +45,8 @@ const TextPage = props => {
 
 TextPage.propTypes = {
   /**
-   The content of the page.
-  */
+   * The content of the page.
+   */
   children: PropTypes.node
 }