Colocate storybook stories (#36)

src/components/Constraints/Constraints.story.jsx

@@ -4,7 +4,6 @@ import * as Constraints from './'
 import { Constraint } from './ConstraintBase'
 
 export default {
-	component: Constraint,
 	title: 'Components/Constraint',
 	parameters: {
 		componentSubtitle:

src/components/DataViz/DataViz.story.jsx

@@ -0,0 +1,60 @@
+import { Card } from '@blueprintjs/core'
+import { styled } from 'linaria/react'
+import React from 'react'
+
+import { humanMine25 as rows } from '../../stubs/humanMine25'
+import { mineUrl } from '../../stubs/utils'
+import { BarChart as Bar } from './BarChart'
+import { PieChart as Pie } from './PieChart'
+import { Table as TableComp } from './Table'
+
+export default {
+	title: 'Components/Data Visualization',
+	parameters: {
+		componentSubtitle: 'These are the various ways we display results from an intermine',
+	},
+}
+
+const S_Card = styled(Card)`
+	height: 376px;
+`
+
+export const Empty = () => <></>
+
+export const BarChart = () => (
+	<S_Card>
+		<Bar />
+	</S_Card>
+)
+
+BarChart.parameters = {
+	docs: {
+		storyDescription:
+			'Bar charts display the result of the gene distribution for the given constraints',
+	},
+}
+
+export const PieChart = () => (
+	<S_Card>
+		<Pie />
+	</S_Card>
+)
+
+PieChart.parameters = {
+	docs: {
+		storyDescription:
+			'Pie charts displays the number of results by organism for the given constraints',
+	},
+}
+
+export const Table = () => (
+	<Card>
+		<TableComp mineUrl={mineUrl} rows={rows} />
+	</Card>
+)
+
+Table.parameters = {
+	docs: {
+		storyDescription: 'Displays all the rows of results for the given constraints',
+	},
+}

src/components/Layout/DataVizSection.story.jsx

@@ -1,11 +1,42 @@
+import { styled } from 'linaria/react'
 import React from 'react'
 
-import * as Charts from './DataVizSection'
+import { ConstraintSection as Constraints } from './ConstraintSection'
+import { TableChartSection } from './DataVizSection'
+import { Header as HeaderComp } from './Header'
 
 export default {
-	title: 'Components/Data Visualization',
+	title: 'Components/Layout Sections',
+	parameters: {
+		componentSubtitle: 'Layout Sections are html section groupings of components',
+	},
 }
 
-export const ChartSection = () => <Charts.ChartSection />
+const S_ConstraintSection = styled.div`
+	max-width: 200px;
+`
 
-export const TableSection = () => <Charts.TableSection />
+export const Header = () => <HeaderComp />
+Header.storyName = 'Header Section'
+
+export const DataVizSection = () => <TableChartSection />
+DataVizSection.storyName = 'Charts and Table Section'
+DataVizSection.parameters = {
+	docs: {
+		storyDescription:
+			'The Charts and Table section display the results of a query and its associated summaries',
+	},
+}
+
+export const ConstraintSection = () => (
+	<S_ConstraintSection>
+		<Constraints />
+	</S_ConstraintSection>
+)
+
+ConstraintSection.parameters = {
+	docs: {
+		storyDescription:
+			'The constraint section manages applying and removing constraints. As well as running queries',
+	},
+}

src/components/Layout/Header.jsx

@@ -19,6 +19,9 @@ const S_LogoContainter = styled.div`
 	border-bottom: 2px solid var(--blue5);
 `
 
+/**
+ * Composes elements that sit at the top bar of the app
+ */
 export const Header = () => {
 	return (
 		<>

src/components/NavBar/NavBar.story.jsx

@@ -2,8 +2,13 @@ import React from 'react'
 
 import { NavigationBar } from './NavBar'
 export default {
-	component: NavigationBar,
 	title: 'Components/Navigation',
 }
 
-export const ExampleNavBar = () => <NavigationBar />
+export const Navbar = () => <NavigationBar />
+Navbar.parameters = {
+	docs: {
+		storyDescription:
+			'Provides a means to set up the application for running queries or setting a theme',
+	},
+}

src/components/QueryController.story.jsx

@@ -3,10 +3,9 @@ import React from 'react'
 import { QueryController as QCont } from './QueryController'
 
 export default {
-	component: QCont,
 	title: 'Components/QueryController',
 	parameters: {
-		componentSubtitle: 'The QueryController maintains executes queries and maintains the history',
+		componentSubtitle: 'The QueryController executes queries and maintains the history',
 	},
 	decorators: [
 		(storyFn) => (