chore!: refactor value-renderer components (#171)

* chore!: refactor value-renderer components * chore: remove start script
zakodium-oss · Jun 26, 2022 · f279f6c · f279f6c
1 parent 3b9c9de
commit f279f6c
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 38 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -80,7 +80,11 @@ export default function App() {
               maxHeight: '100%',
             }}
           >
-            <SplitPane initialSeparation="50%" sideSeparation="end">
+            <SplitPane
+              initialSeparation="500px"
+              minimumSize={500}
+              sideSeparation="end"
+            >
               <div style={{ padding: 5 }}>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum
                 earum omnis, et voluptatum veniam repellendus similique! Sunt
@@ -95,9 +99,9 @@ export default function App() {
                 }}
               >
                 <Accordion>
-                  <Accordion.Item title="Spectra" defaultOpened>
+                  <Accordion.Item title="Measurements" defaultOpened>
                     <div>
-                      {Array(10)
+                      {Array(2)
                         .fill(0)
                         .map((a, i) => (
                           <p key={i} style={{ padding: 5 }}>

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -2,11 +2,7 @@
 import { css } from '@emotion/react';
 import { Children, isValidElement, ReactElement, ReactNode } from 'react';
 
-import { Boolean } from './Boolean';
-import { Color } from './Color';
-import { Number } from './Number';
-import { Text } from './Text';
-import { Title } from './Title';
+import * as ValueRenderers from './value-renderers/index';
 
 interface TableProps {
   children?: ReactNode;
@@ -55,11 +51,11 @@ function rowChildren(children: ReactNode) {
     if (
       typeof child === 'object' &&
       isValidElement(child) &&
-      (child.type === Color ||
-        child.type === Boolean ||
-        child.type === Text ||
-        child.type === Number ||
-        child.type === Title)
+      (child.type === ValueRenderers.Color ||
+        child.type === ValueRenderers.Boolean ||
+        child.type === ValueRenderers.Text ||
+        child.type === ValueRenderers.Number ||
+        child.type === ValueRenderers.Title)
     ) {
       cells.push(<td css={styles.border}>{child}</td>);
     } else {

diff --git a/src/components/Boolean.tsx → src/components/value-renderers/Boolean.tsx b/src/components/Boolean.tsx → src/components/value-renderers/Boolean.tsx
diff --git a/src/components/Color.tsx → src/components/value-renderers/Color.tsx b/src/components/Color.tsx → src/components/value-renderers/Color.tsx
diff --git a/src/components/Number.tsx → src/components/value-renderers/Number.tsx b/src/components/Number.tsx → src/components/value-renderers/Number.tsx
diff --git a/src/components/Text.tsx → src/components/value-renderers/Text.tsx b/src/components/Text.tsx → src/components/value-renderers/Text.tsx
diff --git a/src/components/Title.tsx → src/components/value-renderers/Title.tsx b/src/components/Title.tsx → src/components/value-renderers/Title.tsx
diff --git a/src/components/value-renderers/index.ts b/src/components/value-renderers/index.ts
@@ -0,0 +1,5 @@
+export { Color } from './Color';
+export { Boolean } from './Boolean';
+export { Number } from './Number';
+export { Text } from './Text';
+export { Title } from './Title';
diff --git a/src/index.ts b/src/index.ts
@@ -1,17 +1,12 @@
 import { Accordion } from './components/Accordion';
-import { Boolean } from './components/Boolean';
 import { Button } from './components/Button';
-import { Color } from './components/Color';
 import { ConfirmModal } from './components/ConfirmModal';
 import { Header } from './components/Header';
 import { Modal } from './components/Modal';
-import { Number } from './components/Number';
 import { RootLayout } from './components/RootLayout';
 import { SplitPane } from './components/SplitPane';
 import { Table } from './components/Table';
 import { Tabs, TabItem } from './components/Tabs';
-import { Text } from './components/Text';
-import { Title } from './components/Title';
 import { Toolbar } from './components/Toolbar';
 import {
   useAccordionContext,
@@ -22,6 +17,8 @@ import { useOnOff } from './components/hooks/useOnOff';
 import { useSplitPaneSize } from './components/hooks/useSplitPaneSize';
 import { useToggle } from './components/hooks/useToggle';
 
+export * as ValueRenderers from './components/value-renderers/index';
+
 export type { TabItem };
 export {
   Accordion,
@@ -40,11 +37,6 @@ export {
   useOnOff,
   Tabs,
   Table,
-  Color,
-  Text,
-  Title,
-  Boolean,
-  Number,
 };
 
 export * from './components/DropZone';

diff --git a/stories/table.stories.tsx b/stories/table.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react';
 import React from 'react';
 
-import { Table, Text, Number, Boolean, Color, Title } from '../src';
+import { Table, ValueRenderers } from '../src';
 
 import data from './data/table.json';
 
@@ -13,25 +13,25 @@ export default {
 export function TableControl() {
   const Rows = data.map(({ id, name, rn, mw, em, isExpensive, color }) => (
     <Table.Row key={id}>
-      <Text value={id} />
-      <Text value={name} />
-      <Text value={rn} />
-      <Number value={mw} fixed={2} />
-      <Number value={em} fixed={4} />
-      <Boolean value={isExpensive} />
-      <Color value={color} />
+      <ValueRenderers.Text value={id} />
+      <ValueRenderers.Text value={name} />
+      <ValueRenderers.Text value={rn} />
+      <ValueRenderers.Number value={mw} fixed={2} />
+      <ValueRenderers.Number value={em} fixed={4} />
+      <ValueRenderers.Boolean value={isExpensive} />
+      <ValueRenderers.Color value={color} />
     </Table.Row>
   ));
   return (
     <Table>
       <Table.Header>
-        <Title value="id" />
-        <Title value="name" />
-        <Title value="rn" />
-        <Title value="mw" />
-        <Title value="em" />
-        <Title value="isExpensive" />
-        <Title value="color" />
+        <ValueRenderers.Title value="id" />
+        <ValueRenderers.Title value="name" />
+        <ValueRenderers.Title value="rn" />
+        <ValueRenderers.Title value="mw" />
+        <ValueRenderers.Title value="em" />
+        <ValueRenderers.Title value="isExpensive" />
+        <ValueRenderers.Title value="color" />
       </Table.Header>
       {Rows}
     </Table>