@sanity/table 2.0.0 → 3.0.0

package/src/components/TableComponent.tsx

@@ -1,260 +0,0 @@
-/* eslint-disable consistent-return */
-import { AddIcon } from '@sanity/icons';
-import { Box, Button, Card, Dialog, Flex, Inline, Text } from '@sanity/ui';
-import { uuid } from '@sanity/uuid';
-import { type FormEvent, useState } from 'react';
-import { type ObjectInputProps, set, unset } from 'sanity';
-
-import { TableInput } from './TableInput';
-import { TableMenu } from './TableMenu';
-
-const deepClone: <T>(data: T) => T =
-  globalThis.structuredClone ?? (data => JSON.parse(JSON.stringify(data)));
-
-export interface TableValue {
-  _type: 'table';
-  rows: TableRow[];
-}
-
-export type TableProps = ObjectInputProps<TableValue>;
-
-export type TableRow = {
-  _type: string;
-  _key: string;
-  cells: string[];
-};
-
-// TODO refactor deeplone stuff to use proper patches
-// TODO use callback all the things
-
-export const TableComponent = (props: TableProps & { rowType?: string }) => {
-  const { rowType = 'tableRow', value, onChange } = props;
-  const [dialog, setDialog] = useState<{
-    type: string;
-    callback: () => void;
-  } | null>(null);
-
-  const updateValue = (v?: Omit<TableValue, '_type'>) => {
-    return onChange(set(v));
-  };
-
-  const resetValue = () => {
-    return onChange(unset());
-  };
-
-  const createTable = () => {
-    const newValue: Omit<TableValue, '_type'> = {
-      rows: [
-        {
-          _type: rowType,
-          _key: uuid(),
-          cells: ['', ''],
-        },
-        {
-          _type: rowType,
-          _key: uuid(),
-          cells: ['', ''],
-        },
-      ],
-    };
-    return updateValue({ ...value, ...newValue });
-  };
-
-  const confirmRemoveTable = () => {
-    setDialog({ type: 'table', callback: removeTable });
-  };
-
-  const removeTable = () => {
-    resetValue();
-    setDialog(null);
-  };
-
-  const addRows = (count = 1) => {
-    if (!value) {
-      return;
-    }
-    const newValue = deepClone(value);
-    // Calculate the column count from the first row
-    const columnCount = value?.rows[0].cells.length ?? 0;
-    for (let i = 0; i < count; i++) {
-      // Add as many cells as we have columns
-      newValue.rows.push({
-        _type: rowType,
-        _key: uuid(),
-        cells: Array(columnCount).fill(''),
-      });
-    }
-    // eslint-disable-next-line consistent-return
-    return updateValue(newValue);
-  };
-
-  const addRowAt = (index = 0) => {
-    if (!value) {
-      return;
-    }
-    const newValue = deepClone(value);
-    // Calculate the column count from the first row
-    const columnCount = value.rows[0].cells.length;
-
-    newValue.rows.splice(index, 0, {
-      _type: rowType,
-      _key: uuid(),
-      cells: Array(columnCount).fill(''),
-    });
-
-    // eslint-disable-next-line consistent-return
-    return updateValue(newValue);
-  };
-
-  const removeRow = (index: number) => {
-    if (!value) {
-      return;
-    }
-    const newValue = deepClone(value);
-    newValue.rows.splice(index, 1);
-    updateValue(newValue);
-    setDialog(null);
-  };
-
-  const confirmRemoveRow = (index: number) => {
-    if (!value) {
-      return;
-    }
-    if (value.rows.length <= 1) return confirmRemoveTable();
-    return setDialog({ type: 'row', callback: () => removeRow(index) });
-  };
-
-  const confirmRemoveColumn = (index: number) => {
-    if (!value) {
-      return;
-    }
-    if (value.rows[0].cells.length <= 1) return confirmRemoveTable();
-    return setDialog({ type: 'column', callback: () => removeColumn(index) });
-  };
-
-  const addColumns = (count: number) => {
-    if (!value) {
-      return;
-    }
-    const newValue = deepClone(value);
-    // Add a cell to each of the rows
-    newValue.rows.forEach((_, i) => {
-      for (let j = 0; j < count; j++) {
-        newValue.rows[i].cells.push('');
-      }
-    });
-    return updateValue(newValue);
-  };
-
-  const addColumnAt = (index: number) => {
-    if (!value) {
-      return;
-    }
-    const newValue = deepClone(value);
-
-    newValue.rows.forEach((_, i) => {
-      newValue.rows[i].cells.splice(index, 0, '');
-    });
-
-    return updateValue(newValue);
-  };
-
-  const removeColumn = (index: number) => {
-    if (!value) {
-      return;
-    }
-    const newValue = deepClone(value);
-    newValue.rows.forEach(row => {
-      row.cells.splice(index, 1);
-    });
-    updateValue(newValue);
-    setDialog(null);
-  };
-
-  const updateCell = (
-    e: FormEvent<HTMLInputElement>,
-    rowIndex: number,
-    cellIndex: number
-  ) => {
-    if (!value) {
-      return;
-    }
-    const newValue = deepClone(value);
-    newValue.rows[rowIndex].cells[cellIndex] = (
-      e.target as HTMLInputElement
-    ).value;
-    return updateValue(newValue);
-  };
-
-  return (
-    <div>
-      {dialog && (
-        <Dialog
-          header={`Remove ${dialog.type}`}
-          id="dialog-remove"
-          onClose={() => setDialog(null)}
-          zOffset={1000}
-        >
-          <Card padding={4}>
-            <Text>Are you sure you want to remove this {dialog.type}?</Text>
-            <Box marginTop={4}>
-              <Inline space={1} style={{ textAlign: 'right' }}>
-                <Button
-                  text="Cancel"
-                  mode="ghost"
-                  onClick={() => setDialog(null)}
-                />
-                <Button
-                  text="Confirm"
-                  tone="critical"
-                  onClick={() => dialog.callback()}
-                />
-              </Inline>
-            </Box>
-          </Card>
-        </Dialog>
-      )}
-      <Box>
-        <Flex justify="flex-end">
-          {value?.rows?.length && (
-            <TableMenu
-              addColumns={addColumns}
-              addColumnAt={addColumnAt}
-              addRows={addRows}
-              addRowAt={addRowAt}
-              remove={confirmRemoveTable}
-              placement="left"
-            />
-          )}
-        </Flex>
-      </Box>
-      {value?.rows?.length && (
-        <TableInput
-          rows={value.rows}
-          removeRow={confirmRemoveRow}
-          removeColumn={confirmRemoveColumn}
-          updateCell={updateCell}
-        />
-      )}
-      {(!value || !value?.rows?.length) && (
-        <Inline space={1}>
-          <Button
-            fontSize={1}
-            padding={3}
-            icon={AddIcon}
-            text="Create Table"
-            tone="primary"
-            mode="ghost"
-            onClick={createTable}
-          />
-        </Inline>
-      )}
-    </div>
-  );
-};
-
-export function createTableComponent(rowType: string) {
-  return function Table(props: TableProps) {
-    return <TableComponent {...props} rowType={rowType} />;
-  };
-}

package/src/components/TableIcon.tsx

@@ -1,14 +0,0 @@
-export function TableIcon() {
-  return (
-    <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>
-  );
-}

package/src/components/TableInput.tsx

@@ -1,78 +0,0 @@
-import { RemoveIcon } from '@sanity/icons';
-import { Box, Button, TextInput } from '@sanity/ui';
-import type { FormEvent } from 'react';
-
-import type { TableRow } from './TableComponent';
-
-interface TableInputProps {
-  rows: TableRow[];
-  updateCell: (
-    e: FormEvent<HTMLInputElement>,
-    rowIndex: number,
-    cellIndex: number
-  ) => void;
-  removeRow: (index: number) => void;
-  removeColumn: (index: number) => void;
-}
-
-export const TableInput = (props: TableInputProps) => {
-  const updateCell = props.updateCell;
-
-  const renderRowCell = (rowIndex: number) =>
-    function RowCell(cell: string, cellIndex: number) {
-      return (
-        <td key={`cell-${rowIndex}-${cellIndex}`}>
-          <TextInput
-            fontSize={1}
-            padding={3}
-            value={cell}
-            onChange={e => updateCell(e, rowIndex, cellIndex)}
-          />
-        </td>
-      );
-    };
-
-  const renderRow = (row: TableRow, rowIndex: number) => {
-    const renderCell = renderRowCell(rowIndex);
-
-    return (
-      <tr key={`row-${rowIndex}`}>
-        {row.cells.map(renderCell)}
-        {
-          <td key={rowIndex}>
-            <Box marginLeft={1} style={{ textAlign: 'center' }}>
-              <Button
-                icon={RemoveIcon}
-                padding={2}
-                onClick={() => props.removeRow(rowIndex)}
-                mode="bleed"
-              />
-            </Box>
-          </td>
-        }
-      </tr>
-    );
-  };
-
-  return (
-    <table style={{ width: '100%' }}>
-      <tbody>
-        {props.rows.map(renderRow)}
-        <tr>
-          {(props.rows[0]?.cells || []).map((_, i) => (
-            <td key={i}>
-              <Box marginTop={1} style={{ textAlign: 'center' }}>
-                <Button
-                  icon={RemoveIcon}
-                  padding={2}
-                  onClick={() => props.removeColumn(i)}
-                  mode="bleed"
-                />
-              </Box>
-            </td>
-          ))}
-        </tr>
-      </tbody>
-    </table>
-  );
-};

package/src/components/TableMenu.tsx

@@ -1,144 +0,0 @@
-import { AddIcon, ControlsIcon, WarningOutlineIcon } from '@sanity/icons';
-import {
-  Box,
-  Button,
-  Card,
-  Dialog,
-  Inline,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Placement,
-  TextInput,
-} from '@sanity/ui';
-import { type FormEventHandler, useState } from 'react';
-
-interface TableMenuProps {
-  addColumns: (count: number) => void;
-  addColumnAt: (index: number) => void;
-  addRows: (count: number) => void;
-  addRowAt: (index: number) => void;
-  remove: () => void;
-  placement: Placement;
-}
-
-export const TableMenu = (props: TableMenuProps) => {
-  const { remove: handleRemove } = props;
-  const [dialog, setDialog] = useState<{
-    type: string;
-    callback: (count: number) => void;
-  } | null>(null);
-
-  const [count, setCount] = useState<string | undefined>('');
-
-  const updateCount: FormEventHandler<HTMLInputElement> = e => {
-    setCount(e.currentTarget.value);
-  };
-
-  const addRows = () => {
-    setDialog({ type: 'rows', callback: c => props.addRows(c) });
-  };
-
-  const addRowAt = () => {
-    setDialog({ type: 'rows', callback: index => props.addRowAt(index) });
-  };
-
-  const addColumns = () => {
-    setDialog({
-      type: 'columns',
-      callback: c => props.addColumns(c),
-    });
-  };
-
-  const addColumnsAt = () => {
-    setDialog({ type: 'columns', callback: index => props.addColumnAt(index) });
-  };
-
-  const onConfirm = () => {
-    const parsedCount = parseInt(count ?? '0', 10);
-
-    if (parsedCount < 100) {
-      setDialog(null);
-      dialog?.callback(parsedCount);
-      setCount(undefined);
-    }
-  };
-
-  return (
-    <>
-      {dialog && (
-        <Dialog
-          header={`Add ${dialog.type}`}
-          id="dialog-add"
-          onClose={() => setDialog(null)}
-          zOffset={1000}
-        >
-          <Card padding={4}>
-            <TextInput
-              style={{ textAlign: 'left' }}
-              fontSize={2}
-              padding={3}
-              type="number"
-              value={count}
-              onChange={updateCount}
-            />
-            <Box marginTop={4}>
-              <Inline space={1} style={{ textAlign: 'right' }}>
-                <Button
-                  text="Cancel"
-                  mode="ghost"
-                  onClick={() => setDialog(null)}
-                />
-                <Button text="Confirm" tone="critical" onClick={onConfirm} />
-              </Inline>
-            </Box>
-          </Card>
-        </Dialog>
-      )}
-      <MenuButton
-        button={
-          <Button icon={ControlsIcon} fontSize={1} padding={2} mode="ghost" />
-        }
-        id="menu-button-example"
-        menu={
-          <Menu>
-            <MenuItem
-              icon={AddIcon}
-              fontSize={1}
-              text="Add Row(s)"
-              onClick={addRows}
-            />
-            <MenuItem
-              icon={AddIcon}
-              fontSize={1}
-              text="Add Row At Index"
-              onClick={addRowAt}
-            />
-            <MenuItem
-              icon={AddIcon}
-              fontSize={1}
-              text="Add Column(s)"
-              onClick={addColumns}
-            />
-            <MenuItem
-              icon={AddIcon}
-              fontSize={1}
-              text="Add Column At Index"
-              onClick={addColumnsAt}
-            />
-            <MenuDivider />
-            <MenuItem
-              icon={WarningOutlineIcon}
-              fontSize={1}
-              text="Remove"
-              tone="critical"
-              onClick={handleRemove}
-            />
-          </Menu>
-        }
-        popover={{ placement: props.placement }}
-      />
-    </>
-  );
-};

package/src/components/TablePreview.tsx

@@ -1,58 +0,0 @@
-import { Box, Card, Grid, Inline, Label, Text } from '@sanity/ui';
-import type { PreviewProps } from 'sanity';
-
-import type { TableRow } from './TableComponent';
-import { TableIcon } from './TableIcon';
-
-interface ValueProps {
-  rows?: TableRow[];
-  title?: string;
-}
-
-const Table = ({ rows }: { rows: TableRow[] }) => {
-  const numCols = rows.length === 0 ? 0 : rows[0].cells.length;
-
-  return (
-    <Grid columns={numCols} padding={2}>
-      {rows.map(row =>
-        row.cells.map((cell, i) => (
-          <Card
-            key={row._key + i}
-            padding={2}
-            style={{ outline: '1px solid #DFE2E9' }}
-          >
-            <Text style={{ textOverflow: 'elipsis' }}>{cell}</Text>
-          </Card>
-        ))
-      )}
-    </Grid>
-  );
-};
-
-export const TablePreview = (props: ValueProps & PreviewProps) => {
-  const { schemaType, rows = [], title = 'Title missing' } = props;
-
-  return (
-    <>
-      <Box padding={3}>
-        <Inline space={3}>
-          <Card>
-            <Label size={4}>
-              <TableIcon />
-            </Label>
-          </Card>
-          <Card>
-            <Text>{schemaType?.title ?? title}</Text>
-          </Card>
-        </Inline>
-      </Box>
-      <Box padding={2}>
-        {rows.length === 0 ? (
-          <Label muted>Empty Table</Label>
-        ) : (
-          <Table rows={rows} />
-        )}
-      </Box>
-    </>
-  );
-};

package/src/index.ts

@@ -1,73 +0,0 @@
-import { definePlugin, defineType } from 'sanity';
-
-import {
-  createTableComponent,
-  TableComponent,
-} from './components/TableComponent';
-import { TablePreview } from './components/TablePreview';
-export type {
-  TableProps,
-  TableRow,
-  TableValue,
-} from './components/TableComponent';
-
-export { TableComponent, TablePreview };
-
-export interface TableConfig {
-  rowType?: string;
-}
-
-export const table = definePlugin<TableConfig | void>(config => {
-  const tableRowSchema = defineType({
-    title: 'Table Row',
-    name: config?.rowType || 'tableRow',
-    type: 'object',
-    fields: [
-      {
-        name: 'cells',
-        type: 'array',
-        of: [{ type: 'string' }],
-      },
-    ],
-  });
-
-  const tableSchema = defineType({
-    title: 'Table',
-    name: 'table',
-    type: 'object',
-    fields: [
-      {
-        name: 'rows',
-        type: 'array',
-        of: [
-          {
-            type: tableRowSchema.name,
-          },
-        ],
-      },
-    ],
-    components: {
-      /* eslint-disable @typescript-eslint/no-explicit-any */
-      input: createTableComponent(tableRowSchema.name) as any,
-      preview: TablePreview as any,
-      /* eslint-enable @typescript-eslint/no-explicit-any */
-    },
-    preview: {
-      select: {
-        rows: 'rows',
-        title: 'title',
-      },
-      prepare: ({ title, rows = [] }) => ({
-        title,
-        rows,
-      }),
-    },
-  });
-
-  return {
-    name: 'table',
-    schema: {
-      types: [tableRowSchema, tableSchema],
-    },
-  };
-});

package/v2-incompatible.js

@@ -1,11 +0,0 @@
-const { showIncompatiblePluginDialog } = require('@sanity/incompatible-plugin');
-const { name, version, sanityExchangeUrl } = require('./package.json');
-
-export default showIncompatiblePluginDialog({
-  name: name,
-  versions: {
-    v3: version,
-    v2: undefined,
-  },
-  sanityExchangeUrl,
-});