@cdc/core 4.23.10 → 4.24.1

package/components/_stories/DataTable.stories.tsx

@@ -0,0 +1,103 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import DataTable from '../DataTable'
+import './styles.scss'
+import Example_1 from './_mocks/dashboard_no_filter.json'
+import CityStateExample from './_mocks/example-city-state.json'
+import { displayGeoName } from '@cdc/map/src/helpers/displayGeoName'
+import rowTypeData from './_mocks/row_type.json'
+import { TableConfig } from '../DataTable/types/TableConfig'
+
+const meta: Meta<typeof DataTable> = {
+  title: 'Components/Organisms/DataTable',
+  component: DataTable
+}
+
+export default meta
+
+type Story = StoryObj<typeof DataTable>
+
+const datasetKey = 'dashboard_example_map.csv'
+
+export const Primary: Story = {
+  args: {
+    config: Example_1,
+    dataConfig: Example_1.datasets[datasetKey],
+    rawData: Example_1.datasets[datasetKey].data,
+    runtimeData: Example_1.datasets[datasetKey].data,
+    expandDataTable: true,
+    tableTitle: 'COVE DataTable',
+    viewport: 'lg',
+    tabbingId: datasetKey
+  }
+}
+
+export const CityState: Story = {
+  args: {
+    config: CityStateExample,
+    dataConfig: CityStateExample,
+    rawData: CityStateExample.data,
+    runtimeData: CityStateExample.data,
+    expandDataTable: true,
+    tableTitle: 'CityStateExample DataTable',
+    viewport: 'lg',
+    tabbingId: '#asdf',
+    columns: CityStateExample.columns,
+    applyLegendToRow: () => ['#000'],
+    displayGeoName,
+    displayDataAsText: d => d
+  }
+}
+
+export const Grouped: Story = {
+  args: {
+    config: Example_1,
+    dataConfig: Example_1.datasets[datasetKey],
+    rawData: Example_1.datasets[datasetKey].data,
+    runtimeData: Example_1.datasets[datasetKey].data,
+    expandDataTable: true,
+    tableTitle: 'COVE DataTable',
+    groupBy: 'TimeZone',
+    viewport: 'lg',
+    tabbingId: datasetKey
+  }
+}
+
+export const RowType: Story = {
+  args: {
+    config: {
+      dashboard: {
+        theme: 'theme-blue',
+        title: 'RowType'
+      },
+      title: 'RowType',
+      dataUrl: '/examples/feature/__data__/ardi.json',
+      animate: false,
+      animateReplay: true,
+      palette: 'qualitative-soft',
+      aspectRatio: 1,
+      dataFormat: {
+        roundTo: 1,
+        commas: false,
+        prefix: '',
+        suffix: ''
+      },
+      legend: {
+        hide: false
+      },
+      table: {
+        label: 'Data Table',
+        expanded: true,
+        show: true,
+        customTableConfig: true
+      }
+    } as unknown as TableConfig,
+    dataConfig: { data: rowTypeData },
+    rawData: rowTypeData,
+    runtimeData: rowTypeData,
+    expandDataTable: true,
+    tableTitle: 'DataTable',
+    viewport: 'lg',
+    tabbingId: '#asdf'
+  }
+}

package/components/_stories/EditorPanel.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import DataTableEditor from '../EditorPanel/DataTableEditor'
+import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import { useState } from 'react'
+
+const EditorPanel = () => {
+  const { config, isDashboard } = Primary.args
+  const [_config, setConfig] = useState(config)
+  const updateField = (section, subsection, fieldName, value) => {
+    setConfig({
+      ..._config,
+      [section]: {
+        ..._config[section],
+        [fieldName]: value
+      }
+    })
+  }
+  return (
+    <Accordion>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Data Table</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <DataTableEditor config={_config} isDashboard={isDashboard} updateField={updateField} isLoadedFromUrl={false} />
+        </AccordionItemPanel>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+const meta: Meta<typeof DataTableEditor> = {
+  title: 'Components/Organisms/EditorPanel',
+  component: EditorPanel
+}
+
+export default meta
+
+type Story = StoryObj<typeof DataTableEditor>
+
+export const Primary: Story = {
+  args: {
+    config: {
+      table: {
+        label: 'Data Table',
+        show: true
+      },
+      visualizationType: 'Pie'
+    },
+    isDashboard: true
+  }
+}

package/components/_stories/Inputs.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import InputSelect from '../inputs/InputSelect'
+import { useState } from 'react'
+
+const Inputs: React.FC = ({ config }: any) => {
+  const [_config, setConfig] = useState(config)
+  const updateField = (section, subsection, fieldName, value) => {
+    setConfig({
+      ..._config,
+      [section]: {
+        ..._config[section],
+        [fieldName]: value
+      }
+    })
+  }
+  return (
+    <div>
+      <InputSelect label='Select' options={['apple', 'banana', 'orange']} fieldName='inputselect' updateField={updateField} />
+    </div>
+  )
+}
+
+const meta: Meta<typeof Inputs> = {
+  title: 'Components/Atoms/Inputs',
+  component: Inputs
+}
+
+export default meta
+
+type Story = StoryObj<typeof Inputs>
+
+export const Select: Story = {
+  args: {
+    config: {}
+  }
+}

package/components/_stories/MultiSelect.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import MultiSelect from '../MultiSelect'
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/Molecules/MultiSelect',
+  component: MultiSelect
+}
+
+type Story = StoryObj<typeof MultiSelect>
+
+export const Primary: Story = {
+  args: {
+    options: [
+      { value: '1', label: 'One' },
+      { value: '2', label: 'Two' },
+      { value: '3', label: 'Three' }
+    ],
+    label: 'MultiSelect',
+    updateField: (section, subsection, fieldName, value) => {}
+  }
+}
+
+export default meta

package/components/_stories/Table.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import Table from '../Table'
+import { ReactNode } from 'react'
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Molecules/Table',
+  component: Table
+}
+
+export default meta
+
+type Story = StoryObj<typeof Table>
+
+function createMatrix(): ReactNode[][] {
+  const base = ['a', 'b', 'c'].map(el => <>{el}</>)
+  return [base, base]
+}
+
+export const Ungrouped: Story = {
+  args: {
+    childrenMatrix: createMatrix(),
+    tableName: 'COVE Table',
+    headContent: (
+      <tr>
+        <th>first</th>
+        <th>second</th>
+        <th>third</th>
+      </tr>
+    ),
+    tableOptions: { className: 'table table-bordered' }
+  }
+}
+
+function createGroupMatrix(): Record<string, ReactNode[][]> {
+  const base = ['a', 'b', 'c'].map(el => <>{el}</>)
+  return { group_1: [base, base], group_2: [base, base] }
+}
+
+export const Grouped: Story = {
+  args: {
+    childrenMatrix: createGroupMatrix(),
+    tableName: 'COVE Table',
+    headContent: (
+      <tr>
+        <th>first</th>
+        <th>second</th>
+        <th>third</th>
+      </tr>
+    ),
+    tableOptions: { className: 'table table-bordered' }
+  }
+}

package/components/_stories/_mocks/dashboard_no_filter.json

@@ -0,0 +1,121 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "title": "Dashboard with No Filters"
+  },
+  "rows": [
+    [
+      {
+        "width": 12,
+        "widget": "map1629143821077"
+      },
+      {},
+      {}
+    ],
+    [
+      {
+        "width": 6,
+        "widget": "data-bite1629144030877"
+      },
+      {
+        "width": 6,
+        "widget": "data-bite1629144267659"
+      },
+      {
+        "width": null
+      }
+    ]
+  ],
+  "table": {
+    "label": "Data Table",
+    "show": true
+  },
+  "type": "dashboard",
+  "uuid": 1629144022257,
+  "datasets": {
+    "dashboard_example_map.csv": {
+      "data": [
+        {
+          "Location": "Alabama",
+          "TimeZone": 1,
+          "Rate": 1375
+        },
+        {
+          "Location": "Alaska",
+          "TimeZone": 1,
+          "Rate": 1377
+        },
+        {
+          "Location": "American Samoa",
+          "TimeZone": 1,
+          "Rate": 1388
+        },
+        {
+          "Location": "Arizona",
+          "TimeZone": 1,
+          "Rate": 1401
+        },
+        {
+          "Location": "Arkansas",
+          "TimeZone": 1,
+          "Rate": 1398
+        },
+        {
+          "Location": "California",
+          "TimeZone": 2,
+          "Rate": 1381
+        },
+        {
+          "Location": "Colorado",
+          "TimeZone": 2,
+          "Rate": 1369
+        },
+        {
+          "Location": "Connecticut",
+          "TimeZone": 2,
+          "Rate": 1403
+        },
+        {
+          "Location": "Delaware\t",
+          "TimeZone": 2,
+          "Rate": "1384"
+        },
+        {
+          "Location": "District of Columbia",
+          "TimeZone": 2,
+          "Rate": 1400
+        },
+        {
+          "Location": "Florida",
+          "TimeZone": 2,
+          "Rate": 1387
+        },
+        {
+          "Location": "Georgia",
+          "TimeZone": 3,
+          "Rate": 1365
+        },
+        {
+          "Location": "Guam",
+          "TimeZone": 3,
+          "Rate": 1356
+        },
+        {
+          "Location": "Hawaii",
+          "TimeZone": 3,
+          "Rate": 1362
+        },
+        {
+          "Location": "Idaho",
+          "TimeZone": 3,
+          "Rate": 1374
+        }
+      ],
+      "dataFileSize": 971,
+      "dataFileName": "dashboard_example_map.csv",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "CSV",
+      "preview": true
+    }
+  }
+}