it builds!

.gitignore

@@ -52,4 +52,3 @@ package-lock.json
 
 # Compiled plugin
 /lib
-

package.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from '@sanity/pkg-utils';
+
+export default defineConfig({
+  dist: 'lib',
+  minify: true,
+  legacyExports: true,
+  // Remove this block to enable strict export validation
+  extract: {
+    rules: {
+      'ae-forgotten-export': 'off',
+      'ae-incompatible-release-tags': 'off',
+      'ae-internal-missing-underscore': 'off',
+      'ae-missing-release-tag': 'off',
+    },
+  },
+});

package.json

@@ -11,12 +11,7 @@
     "lint": "eslint . --cache && prettier --check .",
     "format": "eslint . --fix --cache && prettier --write ."
   },
-  "files": [
-    "src",
-    "lib",
-    "v2-incompatible.js",
-    "sanity.json"
-  ],
+  "files": ["src", "lib", "v2-incompatible.js", "sanity.json"],
   "source": "./src/index.ts",
   "exports": {
     ".": {
@@ -38,25 +33,31 @@
     "url": "git+ssh://[email protected]/MathisBullinger/sanity-plugin-another-table.git"
   },
   "author": "Mathis Bullinger <[email protected]>",
-  "keywords": [
-    "sanity",
-    "sanity-plugin"
-  ],
+  "keywords": ["sanity", "sanity-plugin"],
   "license": "MIT",
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "sanity": "^2.33.2"
+    "@sanity/icons": "^1.2.8",
+    "react": "^18",
+    "react-dom": "^18",
+    "sanity": "dev-preview || 3.0.0-rc.0"
   },
   "devDependencies": {
     "@sanity/eslint-config-no-v2-imports": "^0.0.1-studio-v3.3",
+    "@sanity/icons": "^1.2.8",
     "@sanity/pkg-utils": "^1.17.3",
-    "@types/react": "^17.0.3",
+    "@sanity/plugin-kit": "^2.1.8",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.7.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "sanity": "dev-preview || 3.0.0-rc.0",
     "typescript": "^4.8.0"
   },
   "bugs": {
@@ -65,6 +66,6 @@
   "homepage": "https://github.com/MathisBullinger/sanity-plugin-another-table#readme",
   "dependencies": {
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^0.37.22"
+    "@sanity/ui": "1.0.0-beta.32"
   }
 }

src/TableComponent.tsx → src/components/TableComponent.tsx

@@ -1,18 +1,20 @@
 import React, {
   useState,
+  useCallback,
   FunctionComponent,
   forwardRef,
   FormEvent,
 } from 'react';
 import { uuid } from '@sanity/uuid';
-import FormField from 'part:@sanity/components/formfields/default';
-import PatchEvent, { set, unset } from 'part:@sanity/form-builder/patch-event';
-import config from 'config:another-table';
-import TableControl from './components/TableControl';
-import TableInput from './components/TableInput';
-import TableMenu from './components/TableMenu';
+import {set, unset} from 'sanity';
+import TableControl from './TableControl';
+import TableInput from './TableInput';
+import TableMenu from './TableMenu';
 import { Box, Button, Card, Dialog, Flex, Inline, Text } from '@sanity/ui';
 
+// TODO pass through props
+const rowType = "string";
+
 const deepClone: <T>(data: T) => T =
   globalThis.structuredClone ?? (data => JSON.parse(JSON.stringify(data)));
 
@@ -44,23 +46,23 @@ const TableComponent: FunctionComponent<Props> = props => {
   } | null>(null);
 
   const updateValue = (value: Props['value']) => {
-    return onChange(PatchEvent.from(set(value)));
+    return onChange(set(value));
   };
 
   const resetValue = () => {
-    return onChange(PatchEvent.from(unset()));
+    return onChange(unset());
   };
 
   const createTable = () => {
     const newValue = {
       rows: [
         {
-          _type: config.rowType,
+          _type: rowType,
           _key: uuid(),
           cells: ['', ''],
         },
         {
-          _type: config.rowType,
+          _type: rowType,
           _key: uuid(),
           cells: ['', ''],
         },
@@ -85,7 +87,7 @@ const TableComponent: FunctionComponent<Props> = props => {
     for (let i = 0; i < count; i++) {
       // Add as many cells as we have columns
       newValue.rows.push({
-        _type: config.rowType,
+        _type: rowType,
         _key: uuid(),
         cells: Array(columnCount).fill(''),
       });
@@ -99,7 +101,7 @@ const TableComponent: FunctionComponent<Props> = props => {
     const columnCount = value.rows[0].cells.length;
 
     newValue.rows.splice(index, 0, {
-      _type: config.rowType,
+      _type: rowType,
       _key: uuid(),
       cells: Array(columnCount).fill(''),
     });
@@ -195,13 +197,6 @@ const TableComponent: FunctionComponent<Props> = props => {
         </Dialog>
       )}
       <Flex align="flex-start" justify="space-between">
-        <FormField
-          label={type.title}
-          markers={markers}
-          description={type.description}
-          level={level}
-          __unstable_changeIndicator={false}
-        />
         {value?.rows?.length && (
           <TableMenu
             addColumns={addColumns}

src/components/TableIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function TableIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 25 25"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+    >
+      <path d="M3 3h18v18H3zM21 9H3M21 15H3M12 3v18" />
+    </svg>
+  );
+}

src/components/TableInput.tsx

@@ -1,8 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { Box, Button, TextInput } from '@sanity/ui';
 import { RemoveIcon } from '@sanity/icons';
-import type { TableRow } from '../TableComponent';
-import styles from './table.css';
+import type { TableRow } from './TableComponent';
 
 const TableInput: FunctionComponent<{
   rows: TableRow[];
@@ -50,7 +49,7 @@ const TableInput: FunctionComponent<{
   };
 
   return (
-    <table className={styles.table}>
+    <table>
       <tbody>
         {props.rows.map(renderRow)}
         <tr>

src/components/TableMenu.tsx

@@ -9,6 +9,7 @@ import {
   MenuButton,
   MenuDivider,
   MenuItem,
+  Placement,
   TextInput,
 } from '@sanity/ui';
 import { AddIcon, WarningOutlineIcon, ControlsIcon } from '@sanity/icons';
@@ -19,7 +20,7 @@ const TableMenu: FunctionComponent<{
   addRows: (count: number) => any;
   addRowAt: (index: number) => any;
   remove: () => any;
-  placement: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+  placement: Placement;
 }> = props => {
   const [dialog, setDialog] = useState<{
     type: string;

src/components/TablePreview.tsx

@@ -1,10 +1,9 @@
 import React, { FunctionComponent } from 'react';
-import type { TableRow } from '../TableComponent';
-import styles from './table.css';
+import type { TableRow } from './TableComponent';
 
 const TablePreview: FunctionComponent<{ rows: TableRow[] }> = props => {
   return (
-    <table className={styles.tablePreview}>
+    <table>
       <tbody>
         {props.rows.map(row => (
           <tr key={row._key}>

src/components/index.ts

@@ -0,0 +1,3 @@
+export { default as TableComponent } from './TableComponent';
+export { default as TablePreview } from './TablePreview';
+export { default as TableIcon } from './TableIcon';

src/index.ts

@@ -1,10 +1,58 @@
 import { definePlugin } from 'sanity';
-import { table, row } from 'src/schema';
 
-export default definePlugin({
-  name: 'table',
-  schema: {
-    types: [table, row],
-  },
-  document: {},
+import { TableComponent, TablePreview, TableIcon } from './components';
+
+interface TableOptions {
+  rowType: string;
+}
+
+export default definePlugin<TableOptions>(function ({ rowType }) {
+  return {
+    name: 'table',
+    schema: {
+      types: [
+        {
+          title: 'Table Row',
+          name: rowType,
+          type: 'object',
+          fields: [
+            {
+              name: 'cells',
+              type: 'array',
+              of: [{ type: 'string' }],
+            },
+          ],
+        },
+        {
+          title: 'Table',
+          name: 'table',
+          type: 'object',
+          fields: [
+            {
+              name: 'rows',
+              type: 'array',
+              of: [
+                {
+                  type: rowType,
+                },
+              ],
+            },
+          ],
+          components: {
+            input: TableComponent,
+            preview: TablePreview,
+          },
+          preview: {
+            select: {
+              rows: 'rows',
+            },
+            prepare: () => ({
+              title: 'Table',
+              media: TableIcon
+            }),
+          },
+        },
+      ],
+    },
+  };
 });