Add periodic table standalone story

Author: codytodonnell

src/components/periodic-table/table-state.tsx

@@ -3,7 +3,7 @@ import { TableSelectionStyle, useElements } from './periodic-table-state/table-s
 import { Table, TableLayout } from './periodic-table-component/periodic-table.component';
 import { useEffect } from 'react';
 
-interface SelectableTableProps {
+export interface SelectableTableProps {
   className?: string;
   /** array of enabled elements, e.g : ['H', 'O'] */
   enabledElements?: string[];

src/stories/data-entry/PeriodicTable.stories.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Story } from '@storybook/react';
+import { DualRangeSlider } from '../../components/data-entry/DualRangeSlider';
+import { DualRangeSliderProps } from '../../components/data-entry/DualRangeSlider/DualRangeSlider';
+import { SelectableTable, SelectableTableProps } from '../../components/periodic-table/table-state';
+import { PeriodicContext } from '../../components/periodic-table/periodic-table-state/periodic-selection-context';
+import { TableLayout } from '../../components/periodic-table/periodic-table-component/periodic-table.component';
+
+export default {
+  component: SelectableTable,
+  title: 'Data-Entry/PeriodicTable'
+};
+
+const Template: Story<React.PropsWithChildren<SelectableTableProps>> = (args) => (
+  <PeriodicContext>
+    <SelectableTable {...args} />
+  </PeriodicContext>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  forceTableLayout: TableLayout.MINI,
+  className: 'max-750'
+};

src/stories/stories.css

@@ -101,3 +101,7 @@ pre {
 .mt-10 {
   margin-top: 10rem;
 }
+
+.max-750 {
+  max-width: 750px;
+}