Replace some lab commponents

packages/copy-manager/ui-src/__tests__/NodeKeyInput.spec.tsx

@@ -0,0 +1,29 @@
+import { NodeKeyInput } from "../components/NodeKeyInput";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvents from "@testing-library/user-event";
+import React from "react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { SelectableTextNodeInfo } from "../../shared-src/messages";
+
+describe("NodeKeyInput", () => {
+  test("call onUpdateNodeKey on blur", async () => {
+    const mockNodeInfo = {
+      characters: "a",
+      checked: false,
+      id: "node1:1",
+      key: "key",
+      name: "Frame 1",
+    } satisfies SelectableTextNodeInfo;
+    const updateSpy = vi.fn();
+    render(
+      <NodeKeyInput nodeInfo={mockNodeInfo} onUpdateNodeKey={updateSpy} />
+    );
+    await userEvents.type(
+      screen.getByPlaceholderText(mockNodeInfo.name),
+      "abc"
+    );
+    expect(updateSpy).not.toBeCalled();
+    fireEvent.blur(screen.getByPlaceholderText(mockNodeInfo.name));
+    expect(updateSpy).toBeCalledWith(mockNodeInfo.id, "keyabc");
+  });
+});

packages/copy-manager/ui-src/components/NodeKeyInput.tsx

@@ -1,6 +1,5 @@
-import { Button } from "@salt-ds/core";
+import { Button, Input } from "@salt-ds/core";
 import { CloseSmallIcon, WarningIcon } from "@salt-ds/icons";
-import { Input } from "@salt-ds/lab";
 import React from "react";
 import { SelectableTextNodeInfo } from "../../shared-src/messages";
 
@@ -17,7 +16,13 @@ export const NodeKeyInput = ({
       // Use `key` to force rerender a new Input when nodeInfo key changes
       key={`input-${nodeInfo.key}`}
       defaultValue={nodeInfo.key}
-      inputProps={{ placeholder: nodeInfo.name }}
+      inputProps={{
+        placeholder: nodeInfo.name,
+        onBlur: (e) => {
+          const updatedValue = e.target.value;
+          onUpdateNodeKey(nodeInfo.id, updatedValue);
+        },
+      }}
       endAdornment={
         nodeInfo.key ? (
           <Button onClick={() => onUpdateNodeKey(nodeInfo.id, "")}>
@@ -27,10 +32,6 @@ export const NodeKeyInput = ({
           <WarningIcon />
         )
       }
-      onBlur={(e) => {
-        const updatedValue = e.currentTarget.value;
-        onUpdateNodeKey(nodeInfo.id, updatedValue);
-      }}
     />
   );
 };

packages/copy-manager/ui-src/view/AdvancedView.tsx

@@ -179,12 +179,12 @@ export const AdvancedView = () => {
         <table>
           <thead>
             <tr>
-              <th className="checkbox-col">
+              <td className="checkbox-col">
                 {/* <Checkbox className="tableCheckbox headerCheckbox" /> */}
-              </th>
+              </td>
               <th>Key</th>
               <th>Characters</th>
-              <th className="button-col">{/* Button column */}</th>
+              <td className="button-col">{/* Button column */}</td>
             </tr>
           </thead>
           <tbody>

packages/export-styles/package.json

@@ -35,7 +35,6 @@
   "dependencies": {
     "@salt-ds/core": "^1.27.1",
     "@salt-ds/icons": "^1.11.2",
-    "@salt-ds/lab": "^1.0.0-alpha.44",
     "@salt-ds/theme": "^1.15.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"

packages/table-generator/package.json

@@ -35,7 +35,6 @@
   "dependencies": {
     "@salt-ds/core": "^1.27.1",
     "@salt-ds/icons": "^1.11.2",
-    "@salt-ds/lab": "^1.0.0-alpha.44",
     "@salt-ds/theme": "^1.15.0",
     "papaparse": "^5.4.1",
     "react": "^18.3.0",

packages/table-generator/ui-src/__tests__/view/DataView.spec.tsx

@@ -27,6 +27,32 @@ describe("DataView", () => {
     vi.resetAllMocks();
   });
 
+  describe("default launch", () => {
+    test("shows initialzing message", () => {
+      expect(screen.getByText("Configure Data"));
+      expect(screen.getByText("Initializing"));
+      expect(screen.getByText("Please wait while parsing the data."));
+    });
+
+    test("invalid message after initialing", () => {
+      renderResult.rerender(
+        <DataView
+          setTableConfig={() => {}}
+          tableConfig={DEFAULT_TABLE_CONFIG}
+          validTableSelected={false}
+          initializing={false}
+        />
+      );
+      expect(screen.getByText("Configure Data"));
+      expect(screen.getByText("Invalid selection"));
+      expect(
+        screen.getByText(
+          "Please select a table generated by the plugin to populate data."
+        )
+      );
+    });
+  });
+
   describe("settings", async () => {
     beforeEach(() => {
       fireEvent(

packages/table-generator/ui-src/components/ContentStatus.tsx

@@ -0,0 +1,16 @@
+import { StackLayout, StatusIndicator, Text } from "@salt-ds/core";
+
+// Salt pattern - https://www.saltdesignsystem.com/salt/patterns/content-status
+export const ContentStatus = (props: { message: string; title: string }) => {
+  return (
+    <StackLayout>
+      <StatusIndicator status="info" size={2} />
+      <StackLayout gap={1}>
+        <Text>
+          <strong>{props.title}</strong>
+        </Text>
+        <Text>{props.message}</Text>
+      </StackLayout>
+    </StackLayout>
+  );
+};

packages/table-generator/ui-src/view/DataView.tsx

@@ -7,7 +7,7 @@ import {
   Tooltip,
 } from "@salt-ds/core";
 import { CsvIcon, DownloadIcon } from "@salt-ds/icons";
-import { ContentStatus } from "@salt-ds/lab";
+import { ContentStatus } from "../components/ContentStatus";
 import { ParseResult, parse, unparse } from "papaparse";
 import { useCallback, useEffect, useReducer, useState } from "react";
 import { PostToFigmaMessage, PostToUIMessage } from "../../shared-src/messages";