Table to core

.changeset/promote-table-to-core.md

@@ -0,0 +1,34 @@
+---
+"@salt-ds/core": minor
+---
+
+Added table components, `Table`, `TBody`, `TD`, `TFoot`, `TH`, `THead`, `TR`.
+
+`Table` is a basic HTML table intended for simple data display.
+
+```tsx
+<Table>
+  <THead>
+    <TR>
+      <TH>Header 1</TH>
+      <TH>Header 2</TH>
+    </TR>
+  </THead>
+  <TBody>
+    <TR>
+      <TD>Row 1, Col 1</TD>
+      <TD>Row 1, Col 2</TD>
+    </TR>
+    <TR>
+      <TD>Row 2, Col 1</TD>
+      <TD>Row 2, Col 2</TD>
+    </TR>
+  </TBody>
+  <TFoot>
+    <TR>
+      <TD>Footer 1</TD>
+      <TD>Footer 2</TD>
+    </TR>
+  </TFoot>
+</Table>
+```

.changeset/remove-table-from-lab.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": minor
+---
+
+Removed `Table` from labs and promoted to core.

packages/core/src/index.ts

@@ -58,6 +58,7 @@ export * from "./status-adornment";
 export * from "./status-indicator";
 export * from "./stepper";
 export * from "./switch";
+export * from "./table";
 export * from "./tag";
 export * from "./text";
 export * from "./theme";

packages/lab/src/table/Table.tsx → packages/core/src/table/Table.tsx

@@ -1,8 +1,8 @@
-import { makePrefixer } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
 import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { makePrefixer } from "../utils";
 
 import tableCss from "./Table.css";
 

packages/lab/stories/table/table.qa.stories.tsx → packages/core/stories/table/table.qa.stories.tsx

@@ -7,12 +7,12 @@ import {
   TH,
   THead,
   TR,
-} from "@salt-ds/lab";
+} from "@salt-ds/core";
 import type { StoryFn } from "@storybook/react-vite";
 import { QAContainer, type QAContainerProps } from "docs/components";
 
 import "docs/story.css";
-import { StackLayout } from "@salt-ds/core";
+import { StackLayout } from "../../src";
 
 const NUM_COLS = 2;
 const NUM_ROWS = 3;

packages/lab/stories/table/table.stories.tsx → packages/core/stories/table/table.stories.tsx

@@ -1,14 +1,7 @@
-import {
-  Button,
-  Code,
-  FlexLayout,
-  StackLayout,
-  Switch,
-  Text,
-} from "@salt-ds/core";
-import { Table, TBody, TD, TFoot, TH, THead, TR } from "@salt-ds/lab";
+import { Table, TBody, TD, TFoot, TH, THead, TR } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
 import type { ComponentProps } from "react";
+import { Button, Code, FlexLayout, StackLayout, Switch, Text } from "../../src";
 
 type TablePropsAndCustomArgs = ComponentProps<typeof Table> & {
   THeadProps: ComponentProps<typeof THead>;

packages/lab/src/index.ts

@@ -54,7 +54,6 @@ export * from "./responsive";
 export * from "./search-input";
 export * from "./static-list";
 export * from "./system-status";
-export * from "./table";
 export * from "./tabs";
 export * from "./tabs-next";
 export * from "./toast-group";

site/docs/components/table/index.mdx

@@ -2,10 +2,10 @@
 title: Table
 data:
   description: "`Table` is a basic HTML table intended for simple data display."
-  sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/lab/src/table"
+  sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/table"
   package:
-    name: "@salt-ds/lab"
-    initialVersion: "1.0.0-alpha.71"
+    name: "@salt-ds/core"
+    initialVersion: "1.54.0
   alsoKnownAs: []
 keywords:
   $ref: "#/data/alsoKnownAs"

site/docs/components/table/usage.mdx

@@ -28,30 +28,30 @@ data:
 
 {/* Update the text and code snippet below as needed: */}
 
-To import `Table` from the lab Salt package, use:
+To import `Table` from the core Salt package, use:
 
 ```js
-import { Table, THead, TBody, TR, TH, TD, TFoot } from "@salt-ds/lab";
+import { Table, THead, TBody, TR, TH, TD, TFoot } from "@salt-ds/core";
 ```
 
 ## Props
 
 ### Table
 
-<PropsTable componentName="Table" packageName="lab" />
+<PropsTable componentName="Table" packageName="core" />
 
 ### THead
 
-<PropsTable componentName="THead" packageName="lab" />
+<PropsTable componentName="THead" packageName="core" />
 
 ### TFoot
 
-<PropsTable componentName="THead" packageName="lab" />
+<PropsTable componentName="THead" packageName="core" />
 
 ### TH
 
-<PropsTable componentName="TH" packageName="lab" />
+<PropsTable componentName="TH" packageName="core" />
 
 ### TD
 
-<PropsTable componentName="TD" packageName="lab" />
+<PropsTable componentName="TD" packageName="core" />

site/src/components/components/PropsTable.tsx

@@ -1,7 +1,7 @@
+import { Table, TBody, TD, TH, THead, TR } from "@salt-ds/core";
 import dynamic from "next/dynamic";
 import { type FC, useEffect, useState } from "react";
 import { Code } from "../mdx/code";
-import { Table } from "../mdx/table";
 import styles from "./PropsTable.module.css";
 
 const Markdown = dynamic(import("../markdown/Markdown"));
@@ -77,33 +77,33 @@ export const PropsTable: FC<PropsTableType> = ({
 
   return (
     <Table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Type</th>
-          <th>Description</th>
-          <th>Default</th>
-        </tr>
-      </thead>
-      <tbody>
+      <THead>
+        <TR>
+          <TH>Name</TH>
+          <TH>Type</TH>
+          <TH>Description</TH>
+          <TH>Default</TH>
+        </TR>
+      </THead>
+      <TBody>
         {props &&
           Object.values(props).map(
             ({ name, type, description, defaultValue }) => (
-              <tr key={name}>
-                <td className={styles.overflowWrap}>{name}</td>
-                <td>
+              <TR key={name}>
+                <TD className={styles.overflowWrap}>{name}</TD>
+                <TD>
                   <Code>{type.name}</Code>
-                </td>
-                <td>
+                </TD>
+                <TD>
                   <Markdown>{description}</Markdown>
-                </td>
-                <td>
+                </TD>
+                <TD>
                   <Code>{defaultValue ? defaultValue.value : "-"}</Code>
-                </td>
-              </tr>
+                </TD>
+              </TR>
             ),
           )}
-      </tbody>
+      </TBody>
     </Table>
   );
 };

site/src/components/css-display/CharacteristicsTokenTable.tsx

@@ -4,11 +4,16 @@ import {
   SaltProviderNext,
   Spinner,
   StackLayout,
+  Table,
+  TBody,
+  TD,
+  TH,
+  THead,
+  TR,
 } from "@salt-ds/core";
 import { useEffect, useState } from "react";
 import { CopyToClipboard } from "../copy-to-clipboard";
 import { Code } from "../mdx/code";
-import { Table, Thead, Tr } from "../mdx/table";
 import { BlockView } from "./BlockView";
 import styles from "./CharacteristicsTokenTable.module.css";
 
@@ -76,31 +81,31 @@ export const CharacteristicsTokenTable = ({
 
   return (
     <Table>
-      <Thead>
-        <Tr>
-          <th>Preview</th>
-          <th>Token name & token value</th>
-        </Tr>
-      </Thead>
-      <tbody>
+      <THead>
+        <TR>
+          <TH>Preview</TH>
+          <TH>Token name & token value</TH>
+        </TR>
+      </THead>
+      <TBody>
         {Object.entries(cssVariablesData).map(([name, value]) => (
-          <Tr key={name}>
-            <td>
+          <TR key={name}>
+            <TD>
               <ChosenProvider theme="">
                 <BlockView name={name} />
               </ChosenProvider>
-            </td>
-            <td>
+            </TD>
+            <TD>
               <StackLayout gap={0} align="start">
                 <FlowLayout align="center" gap={1}>
                   <CopyToClipboard value={name} />
                 </FlowLayout>
                 <Code>{value}</Code>
               </StackLayout>
-            </td>
-          </Tr>
+            </TD>
+          </TR>
         ))}
-      </tbody>
+      </TBody>
     </Table>
   );
 };

site/src/components/keyboard-controls/KeyboardControls.tsx

@@ -1,6 +1,6 @@
+import { Table, TBody, TH, THead, TR } from "@salt-ds/core";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
-import { Table } from "../mdx/table";
 import styles from "./KeyboardControls.module.css";
 
 export interface KeyboardControlsProps {
@@ -14,13 +14,13 @@ export const KeyboardControls: FC<KeyboardControlsProps> = ({
 }) => {
   return (
     <Table className={clsx(styles.table, className)}>
-      <thead>
-        <tr>
-          <th className={styles.keyCol}>Key</th>
+      <THead>
+        <TR>
+          <TH className={styles.keyCol}>Key</TH>
           <th>Function</th>
-        </tr>
-      </thead>
-      <tbody>{children}</tbody>
+        </TR>
+      </THead>
+      <TBody>{children}</TBody>
     </Table>
   );
 };

site/src/components/mdx/index.ts

@@ -1,3 +1,4 @@
+import { Table as table, THead as thead, TR as tr } from "@salt-ds/core";
 import { withAnchorHeading } from "./anchorHeading";
 import { Code as code } from "./code";
 import { Heading2 } from "./h2";
@@ -7,7 +8,6 @@ import { Image } from "./image";
 import { Link as a } from "./link";
 import { Paragraph as p } from "./p";
 import { Pre as pre } from "./pre";
-import { Table as table, Thead as thead, Tr as tr } from "./table";
 import { UnorderedList as ul } from "./ul";
 
 const h2 = withAnchorHeading(Heading2);