@workbench-kit/react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

package/src/workbench/settings/StructuredDataSchemaPanelEmbed.tsx

@@ -1,21 +1,21 @@
-import type { ComponentPropsWithRef } from 'react';
-import { cx } from '../../utils/cx';
-import {
-  WorkbenchStructuredDataSchemaPanel,
-  type WorkbenchStructuredDataSchemaPanelProps,
-} from './StructuredDataSchemaPanel';
-
-export interface WorkbenchStructuredDataSchemaPanelEmbedProps
-  extends WorkbenchStructuredDataSchemaPanelProps, Omit<ComponentPropsWithRef<'div'>, 'children'> {}
-
-export function WorkbenchStructuredDataSchemaPanelEmbed({
-  className,
-  fill = true,
-  ...panelProps
-}: WorkbenchStructuredDataSchemaPanelEmbedProps) {
-  return (
-    <div className={cx('ui-workbench-structured-data-schema-panel-embed', className)}>
-      <WorkbenchStructuredDataSchemaPanel {...panelProps} fill={fill} />
-    </div>
-  );
-}
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../../utils/cx';
+import {
+  WorkbenchStructuredDataSchemaPanel,
+  type WorkbenchStructuredDataSchemaPanelProps,
+} from './StructuredDataSchemaPanel';
+
+export interface WorkbenchStructuredDataSchemaPanelEmbedProps
+  extends WorkbenchStructuredDataSchemaPanelProps, Omit<ComponentPropsWithRef<'div'>, 'children'> {}
+
+export function WorkbenchStructuredDataSchemaPanelEmbed({
+  className,
+  fill = true,
+  ...panelProps
+}: WorkbenchStructuredDataSchemaPanelEmbedProps) {
+  return (
+    <div className={cx('ui-workbench-structured-data-schema-panel-embed', className)}>
+      <WorkbenchStructuredDataSchemaPanel {...panelProps} fill={fill} />
+    </div>
+  );
+}

package/src/workbench/settings/StructuredDataSchemaPanelFrame.tsx

@@ -1,76 +1,76 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { cx } from '../../utils/cx';
-import {
-  WorkbenchStructuredDataSchemaPanelEmbed,
-  type WorkbenchStructuredDataSchemaPanelEmbedProps,
-} from './StructuredDataSchemaPanelEmbed';
-
-export interface WorkbenchStructuredDataSchemaPanelFrameHeaderContent {
-  eyebrow?: ReactNode | undefined;
-  icon?: ReactNode | undefined;
-  meta?: ReactNode | undefined;
-  subtitle?: ReactNode | undefined;
-  title?: ReactNode | undefined;
-}
-
-export interface WorkbenchStructuredDataSchemaPanelFrameProps extends WorkbenchStructuredDataSchemaPanelEmbedProps {
-  frameClassName?: string | undefined;
-  frameProps?: Omit<ComponentPropsWithRef<'div'>, 'children' | 'className'> | undefined;
-  header?: ReactNode | undefined;
-  headerClassName?: string | undefined;
-  headerContent?: WorkbenchStructuredDataSchemaPanelFrameHeaderContent | undefined;
-}
-
-function renderFrameHeaderContent(content: WorkbenchStructuredDataSchemaPanelFrameHeaderContent) {
-  return (
-    <>
-      <div className="ui-workbench-structured-data-schema-panel-frame__title-group">
-        {content.icon ? (
-          <span className="ui-workbench-structured-data-schema-panel-frame__icon">
-            {content.icon}
-          </span>
-        ) : null}
-        <div>
-          {content.eyebrow ? (
-            <span className="ui-workbench-structured-data-schema-panel-frame__eyebrow">
-              {content.eyebrow}
-            </span>
-          ) : null}
-          {content.title ? <h2>{content.title}</h2> : null}
-          {content.subtitle ? <p>{content.subtitle}</p> : null}
-        </div>
-      </div>
-      {content.meta ? (
-        <div className="ui-workbench-structured-data-schema-panel-frame__meta">{content.meta}</div>
-      ) : null}
-    </>
-  );
-}
-
-export function WorkbenchStructuredDataSchemaPanelFrame({
-  header,
-  headerClassName,
-  headerContent,
-  frameClassName,
-  frameProps,
-  className,
-  ...panelProps
-}: WorkbenchStructuredDataSchemaPanelFrameProps) {
-  const resolvedHeader = header ?? (headerContent ? renderFrameHeaderContent(headerContent) : null);
-
-  return (
-    <div
-      className={cx('ui-workbench-structured-data-schema-panel-frame', frameClassName)}
-      {...frameProps}
-    >
-      {resolvedHeader ? (
-        <header
-          className={cx('ui-workbench-structured-data-schema-panel-frame__header', headerClassName)}
-        >
-          {resolvedHeader}
-        </header>
-      ) : null}
-      <WorkbenchStructuredDataSchemaPanelEmbed {...panelProps} className={className} />
-    </div>
-  );
-}
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+import {
+  WorkbenchStructuredDataSchemaPanelEmbed,
+  type WorkbenchStructuredDataSchemaPanelEmbedProps,
+} from './StructuredDataSchemaPanelEmbed';
+
+export interface WorkbenchStructuredDataSchemaPanelFrameHeaderContent {
+  eyebrow?: ReactNode | undefined;
+  icon?: ReactNode | undefined;
+  meta?: ReactNode | undefined;
+  subtitle?: ReactNode | undefined;
+  title?: ReactNode | undefined;
+}
+
+export interface WorkbenchStructuredDataSchemaPanelFrameProps extends WorkbenchStructuredDataSchemaPanelEmbedProps {
+  frameClassName?: string | undefined;
+  frameProps?: Omit<ComponentPropsWithRef<'div'>, 'children' | 'className'> | undefined;
+  header?: ReactNode | undefined;
+  headerClassName?: string | undefined;
+  headerContent?: WorkbenchStructuredDataSchemaPanelFrameHeaderContent | undefined;
+}
+
+function renderFrameHeaderContent(content: WorkbenchStructuredDataSchemaPanelFrameHeaderContent) {
+  return (
+    <>
+      <div className="ui-workbench-structured-data-schema-panel-frame__title-group">
+        {content.icon ? (
+          <span className="ui-workbench-structured-data-schema-panel-frame__icon">
+            {content.icon}
+          </span>
+        ) : null}
+        <div>
+          {content.eyebrow ? (
+            <span className="ui-workbench-structured-data-schema-panel-frame__eyebrow">
+              {content.eyebrow}
+            </span>
+          ) : null}
+          {content.title ? <h2>{content.title}</h2> : null}
+          {content.subtitle ? <p>{content.subtitle}</p> : null}
+        </div>
+      </div>
+      {content.meta ? (
+        <div className="ui-workbench-structured-data-schema-panel-frame__meta">{content.meta}</div>
+      ) : null}
+    </>
+  );
+}
+
+export function WorkbenchStructuredDataSchemaPanelFrame({
+  header,
+  headerClassName,
+  headerContent,
+  frameClassName,
+  frameProps,
+  className,
+  ...panelProps
+}: WorkbenchStructuredDataSchemaPanelFrameProps) {
+  const resolvedHeader = header ?? (headerContent ? renderFrameHeaderContent(headerContent) : null);
+
+  return (
+    <div
+      className={cx('ui-workbench-structured-data-schema-panel-frame', frameClassName)}
+      {...frameProps}
+    >
+      {resolvedHeader ? (
+        <header
+          className={cx('ui-workbench-structured-data-schema-panel-frame__header', headerClassName)}
+        >
+          {resolvedHeader}
+        </header>
+      ) : null}
+      <WorkbenchStructuredDataSchemaPanelEmbed {...panelProps} className={className} />
+    </div>
+  );
+}

package/src/workbench/settings/StructuredDataTableView.tsx

@@ -1,127 +1,127 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { EmptyState } from '../../primitives/empty-state';
-import { ScrollArea } from '../../primitives/scroll-area';
-import { cx } from '../../utils/cx';
-import {
-  getWorkbenchStructuredDataValue,
-  type WorkbenchStructuredDataRecord,
-  type WorkbenchStructuredDataTable,
-  type WorkbenchStructuredDataTableCellContext,
-  type WorkbenchStructuredDataTableColumn,
-} from './structuredDataSchema';
-
-export interface WorkbenchStructuredDataTableViewProps extends Omit<
-  ComponentPropsWithRef<'section'>,
-  'children'
-> {
-  table: WorkbenchStructuredDataTable;
-}
-
-export function buildWorkbenchStructuredDataTableFromRecords({
-  columns,
-  emptyLabel = 'No rows',
-  id = 'table',
-  label,
-  rows,
-}: {
-  columns: readonly string[];
-  emptyLabel?: ReactNode;
-  id?: string;
-  label?: ReactNode;
-  rows: readonly WorkbenchStructuredDataRecord[];
-}): WorkbenchStructuredDataTable {
-  return {
-    columns: columns.map((column) => ({
-      id: column,
-      label: column,
-      path: [column],
-    })),
-    emptyLabel,
-    id,
-    label,
-    rows: rows.map((data, index) => ({
-      data,
-      id: String(index),
-    })),
-  };
-}
-
-export function formatWorkbenchStructuredDataTableCell(value: unknown) {
-  if (value === undefined || value === null || value === '') return '-';
-  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
-  if (Array.isArray(value)) return value.length === 0 ? '-' : value.join(', ');
-  return String(value);
-}
-
-function renderCell(
-  column: WorkbenchStructuredDataTableColumn,
-  context: WorkbenchStructuredDataTableCellContext,
-) {
-  return column.render?.(context) ?? formatWorkbenchStructuredDataTableCell(context.value);
-}
-
-export function WorkbenchStructuredDataTableView({
-  className,
-  table,
-  ...props
-}: WorkbenchStructuredDataTableViewProps) {
-  const hasHeader = Boolean(table.label || table.description);
-
-  return (
-    <section
-      className={cx(
-        'ui-workbench-structured-data-table-view',
-        hasHeader && 'ui-workbench-structured-data-table-view--with-header',
-        className,
-      )}
-      {...props}
-    >
-      {table.label ? (
-        <h3 className="ui-workbench-structured-data-table-view__label">{table.label}</h3>
-      ) : null}
-      {table.description ? (
-        <p className="ui-workbench-structured-data-table-view__description">{table.description}</p>
-      ) : null}
-      {table.rows.length === 0 ? (
-        <EmptyState compact icon="codicon-table">
-          {table.emptyLabel ?? 'No rows'}
-        </EmptyState>
-      ) : (
-        <ScrollArea
-          className="ui-workbench-structured-data-table-view__scroll"
-          gutter="auto"
-          orientation="both"
-        >
-          <table className="ui-workbench-structured-data-table-view__table">
-            <thead>
-              <tr>
-                {table.columns.map((column) => (
-                  <th key={column.id} data-align={column.align}>
-                    {column.label}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {table.rows.map((row) => (
-                <tr key={row.id}>
-                  {table.columns.map((column) => {
-                    const value = column.path
-                      ? getWorkbenchStructuredDataValue(row.data, column.path)
-                      : undefined;
-
-                    return (
-                      <td key={column.id} data-align={column.align}>
-                        {renderCell(column, { column, row, value })}
-                      </td>
-                    );
-                  })}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </ScrollArea>
-      )}
-    </section>
-  );
-}
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { EmptyState } from '../../primitives/empty-state';
+import { ScrollArea } from '../../primitives/scroll-area';
+import { cx } from '../../utils/cx';
+import {
+  getWorkbenchStructuredDataValue,
+  type WorkbenchStructuredDataRecord,
+  type WorkbenchStructuredDataTable,
+  type WorkbenchStructuredDataTableCellContext,
+  type WorkbenchStructuredDataTableColumn,
+} from './structuredDataSchema';
+
+export interface WorkbenchStructuredDataTableViewProps extends Omit<
+  ComponentPropsWithRef<'section'>,
+  'children'
+> {
+  table: WorkbenchStructuredDataTable;
+}
+
+export function buildWorkbenchStructuredDataTableFromRecords({
+  columns,
+  emptyLabel = 'No rows',
+  id = 'table',
+  label,
+  rows,
+}: {
+  columns: readonly string[];
+  emptyLabel?: ReactNode;
+  id?: string;
+  label?: ReactNode;
+  rows: readonly WorkbenchStructuredDataRecord[];
+}): WorkbenchStructuredDataTable {
+  return {
+    columns: columns.map((column) => ({
+      id: column,
+      label: column,
+      path: [column],
+    })),
+    emptyLabel,
+    id,
+    label,
+    rows: rows.map((data, index) => ({
+      data,
+      id: String(index),
+    })),
+  };
+}
+
+export function formatWorkbenchStructuredDataTableCell(value: unknown) {
+  if (value === undefined || value === null || value === '') return '-';
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  if (Array.isArray(value)) return value.length === 0 ? '-' : value.join(', ');
+  return String(value);
+}
+
+function renderCell(
+  column: WorkbenchStructuredDataTableColumn,
+  context: WorkbenchStructuredDataTableCellContext,
+) {
+  return column.render?.(context) ?? formatWorkbenchStructuredDataTableCell(context.value);
+}
+
+export function WorkbenchStructuredDataTableView({
+  className,
+  table,
+  ...props
+}: WorkbenchStructuredDataTableViewProps) {
+  const hasHeader = Boolean(table.label || table.description);
+
+  return (
+    <section
+      className={cx(
+        'ui-workbench-structured-data-table-view',
+        hasHeader && 'ui-workbench-structured-data-table-view--with-header',
+        className,
+      )}
+      {...props}
+    >
+      {table.label ? (
+        <h3 className="ui-workbench-structured-data-table-view__label">{table.label}</h3>
+      ) : null}
+      {table.description ? (
+        <p className="ui-workbench-structured-data-table-view__description">{table.description}</p>
+      ) : null}
+      {table.rows.length === 0 ? (
+        <EmptyState compact icon="codicon-table">
+          {table.emptyLabel ?? 'No rows'}
+        </EmptyState>
+      ) : (
+        <ScrollArea
+          className="ui-workbench-structured-data-table-view__scroll"
+          gutter="auto"
+          orientation="both"
+        >
+          <table className="ui-workbench-structured-data-table-view__table">
+            <thead>
+              <tr>
+                {table.columns.map((column) => (
+                  <th key={column.id} data-align={column.align}>
+                    {column.label}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {table.rows.map((row) => (
+                <tr key={row.id}>
+                  {table.columns.map((column) => {
+                    const value = column.path
+                      ? getWorkbenchStructuredDataValue(row.data, column.path)
+                      : undefined;
+
+                    return (
+                      <td key={column.id} data-align={column.align}>
+                        {renderCell(column, { column, row, value })}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </ScrollArea>
+      )}
+    </section>
+  );
+}

package/src/workbench/settings/WorkbenchPanelRegion.tsx

@@ -1,46 +1,46 @@
-import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
-import { ScrollArea } from '../../primitives/scroll-area';
-import { cx } from '../../utils/cx';
-
-type WorkbenchPanelRegionLayout = 'fill' | 'scroll';
-
-export interface WorkbenchPanelRegionProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
-  as?: ElementType | undefined;
-  children: ReactNode;
-  layout?: WorkbenchPanelRegionLayout | undefined;
-}
-
-export function WorkbenchPanelRegion({
-  as,
-  children,
-  className,
-  layout = 'scroll',
-  ...props
-}: WorkbenchPanelRegionProps) {
-  const Component = (as ?? 'div') as ElementType;
-  const classNames = cx(
-    'ui-workbench-panel-region',
-    layout === 'fill' ? 'ui-workbench-panel-region--fill' : 'ui-workbench-panel-region--scroll',
-    className,
-  );
-
-  if (layout === 'scroll') {
-    return (
-      <ScrollArea
-        as={Component}
-        className={classNames}
-        orientation="vertical"
-        gutter="stable"
-        {...props}
-      >
-        {children}
-      </ScrollArea>
-    );
-  }
-
-  return (
-    <Component className={classNames} {...props}>
-      {children}
-    </Component>
-  );
-}
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { ScrollArea } from '../../primitives/scroll-area';
+import { cx } from '../../utils/cx';
+
+type WorkbenchPanelRegionLayout = 'fill' | 'scroll';
+
+export interface WorkbenchPanelRegionProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  as?: ElementType | undefined;
+  children: ReactNode;
+  layout?: WorkbenchPanelRegionLayout | undefined;
+}
+
+export function WorkbenchPanelRegion({
+  as,
+  children,
+  className,
+  layout = 'scroll',
+  ...props
+}: WorkbenchPanelRegionProps) {
+  const Component = (as ?? 'div') as ElementType;
+  const classNames = cx(
+    'ui-workbench-panel-region',
+    layout === 'fill' ? 'ui-workbench-panel-region--fill' : 'ui-workbench-panel-region--scroll',
+    className,
+  );
+
+  if (layout === 'scroll') {
+    return (
+      <ScrollArea
+        as={Component}
+        className={classNames}
+        orientation="vertical"
+        gutter="stable"
+        {...props}
+      >
+        {children}
+      </ScrollArea>
+    );
+  }
+
+  return (
+    <Component className={classNames} {...props}>
+      {children}
+    </Component>
+  );
+}