@haiiro/docuflow 0.0.0-stage → 0.0.2

package/src/front/ui/components.tsx

@@ -0,0 +1,436 @@
+import { type CSSProperties, type ReactNode, useId } from 'react';
+import { Button } from 'twenty-ui/primitives/input';
+import { useTheme } from 'twenty-ui/theme';
+
+// Every style is inline: the host drops <style> elements of front components,
+// so class names would style nothing.
+export const DocflowRoot = ({ children }: { children: ReactNode }) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      style={{
+        color: theme.font.color.primary,
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: 'inherit',
+        fontSize: theme.font.size.md,
+        height: '100%',
+        minHeight: 0,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const Toolbar = ({ children }: { children: ReactNode }) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: theme.spacing[2],
+        padding: `${theme.spacing[2]} ${theme.spacing[4]}`,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+type InputVariant = 'outlined' | 'bare';
+
+const useInputStyle = (variant: InputVariant): CSSProperties => {
+  const theme = useTheme();
+
+  return {
+    background: theme.background.transparent.lighter,
+    border: variant === 'bare' ? 'none' : `1px solid ${theme.border.color.medium}`,
+    borderRadius: theme.border.radius.sm,
+    boxSizing: 'border-box',
+    color: theme.font.color.primary,
+    fontFamily: 'inherit',
+    fontSize: theme.font.size.md,
+    minHeight: theme.spacing[8],
+    outline: 'none',
+    padding: `0 ${theme.spacing[2]}`,
+    width: '100%',
+  };
+};
+
+export const Labeled = ({
+  label,
+  children,
+  htmlFor,
+}: {
+  label: string;
+  children: ReactNode;
+  htmlFor?: string;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <label
+      htmlFor={htmlFor}
+      style={{
+        color: theme.font.color.tertiary,
+        display: 'flex',
+        flexDirection: 'column',
+        fontSize: theme.font.size.xs,
+        fontWeight: theme.font.weight.semiBold,
+        gap: theme.spacing[1],
+      }}
+    >
+      {label}
+      {children}
+    </label>
+  );
+};
+
+export const TextField = ({
+  label,
+  value,
+  onChange,
+  type = 'text',
+  placeholder,
+  disabled = false,
+  variant = 'outlined',
+}: {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  type?: 'text' | 'number' | 'date' | 'search';
+  placeholder?: string;
+  disabled?: boolean;
+  variant?: InputVariant;
+}) => {
+  const inputId = useId();
+  const style = useInputStyle(variant);
+  const input = (
+    <input
+      id={inputId}
+      type={type}
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      aria-label={label ?? placeholder}
+      onChange={(event) => onChange(event.target.value)}
+      style={style}
+    />
+  );
+
+  return label === undefined ? input : <Labeled label={label} htmlFor={inputId}>{input}</Labeled>;
+};
+
+export const TextAreaField = ({
+  label,
+  value,
+  onChange,
+  rows = 3,
+  disabled = false,
+  placeholder,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  rows?: number;
+  disabled?: boolean;
+  placeholder?: string;
+}) => {
+  const inputId = useId();
+  const style = useInputStyle('outlined');
+  const theme = useTheme();
+
+  return (
+    <Labeled label={label} htmlFor={inputId}>
+      <textarea
+        id={inputId}
+        rows={rows}
+        value={value}
+        disabled={disabled}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+        style={{ ...style, padding: theme.spacing[2], resize: 'vertical' }}
+      />
+    </Labeled>
+  );
+};
+
+// A native select: the sandbox cannot render popups into the page, so the
+// browser's own list is used.
+export const SelectField = <TValue extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  disabled = false,
+  variant = 'outlined',
+}: {
+  label?: string;
+  value: TValue;
+  options: { value: TValue; label: string }[];
+  onChange: (value: TValue) => void;
+  disabled?: boolean;
+  variant?: InputVariant;
+}) => {
+  const inputId = useId();
+  const style = useInputStyle(variant);
+  const select = (
+    <select
+      id={inputId}
+      value={value}
+      disabled={disabled}
+      aria-label={label}
+      onChange={(event) => {
+        const option = options.find((candidate) => candidate.value === event.target.value);
+
+        if (option !== undefined) {
+          onChange(option.value);
+        }
+      }}
+      style={{ ...style, width: label === undefined ? 'auto' : '100%' }}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+
+  return label === undefined ? select : <Labeled label={label} htmlFor={inputId}>{select}</Labeled>;
+};
+
+export const CheckboxField = ({
+  label,
+  checked,
+  onChange,
+  disabled = false,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <label
+      style={{
+        alignItems: 'center',
+        color: theme.font.color.secondary,
+        display: 'flex',
+        fontSize: theme.font.size.sm,
+        gap: theme.spacing[2],
+      }}
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.checked)}
+      />
+      {label}
+    </label>
+  );
+};
+
+export const Message = ({ children, tone = 'muted' }: { children: ReactNode; tone?: 'muted' | 'danger' | 'hint' }) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      role={tone === 'danger' ? 'alert' : undefined}
+      style={{
+        color: tone === 'danger' ? theme.font.color.danger : theme.font.color.tertiary,
+        fontSize: theme.font.size.sm,
+        padding: tone === 'muted' ? theme.spacing[6] : 0,
+        textAlign: tone === 'muted' ? 'center' : 'left',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const SectionTitle = ({ children, action }: { children: ReactNode; action?: ReactNode }) => {
+  const theme = useTheme();
+
+  return (
+    <div style={{ alignItems: 'center', display: 'flex', gap: theme.spacing[2], justifyContent: 'space-between' }}>
+      <span style={{ color: theme.font.color.tertiary, fontSize: theme.font.size.sm, fontWeight: theme.font.weight.medium }}>
+        {children}
+      </span>
+      {action}
+    </div>
+  );
+};
+
+// A variable a later step of a process writes to read a value.
+export const VariableChip = ({ children }: { children: ReactNode }) => {
+  const theme = useTheme();
+
+  return (
+    <code
+      style={{
+        background: theme.background.transparent.light,
+        borderRadius: theme.border.radius.sm,
+        color: theme.font.color.secondary,
+        fontSize: theme.font.size.xs,
+        overflowWrap: 'anywhere',
+        padding: `1px ${theme.spacing[1]}`,
+      }}
+    >
+      {children}
+    </code>
+  );
+};
+
+export type TableColumn = { key: string; label: string; width?: string };
+
+export const DataTable = ({
+  columns,
+  rows,
+  selectedRowId,
+  onRowClick,
+}: {
+  columns: TableColumn[];
+  rows: { id: string; cells: Record<string, ReactNode> }[];
+  selectedRowId?: string;
+  onRowClick: (rowId: string) => void;
+}) => {
+  const theme = useTheme();
+  const cellStyle: CSSProperties = {
+    overflow: 'hidden',
+    padding: `${theme.spacing[2]} ${theme.spacing[4]}`,
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  };
+
+  return (
+    <table style={{ borderCollapse: 'collapse', tableLayout: 'fixed', width: '100%' }}>
+      <thead>
+        <tr>
+          {columns.map((column) => (
+            <th
+              key={column.key}
+              scope="col"
+              style={{
+                ...cellStyle,
+                color: theme.font.color.tertiary,
+                fontSize: theme.font.size.sm,
+                fontWeight: theme.font.weight.medium,
+                width: column.width,
+              }}
+            >
+              {column.label}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr
+            key={row.id}
+            tabIndex={0}
+            aria-selected={row.id === selectedRowId}
+            onClick={() => onRowClick(row.id)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                onRowClick(row.id);
+              }
+            }}
+            style={{
+              background: row.id === selectedRowId ? theme.background.transparent.light : 'transparent',
+              borderTop: `1px solid ${theme.border.color.light}`,
+              cursor: 'pointer',
+            }}
+          >
+            {columns.map((column) => (
+              <td key={column.key} style={cellStyle}>
+                {row.cells[column.key]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+// The list and its side panel share a row while the widget is wide enough;
+// on a narrow one the panel wraps under the list and takes its width.
+export const SplitView = ({
+  children,
+  panel,
+  panelTitle,
+  onClosePanel,
+}: {
+  children: ReactNode;
+  panel?: ReactNode;
+  panelTitle?: string;
+  onClosePanel: () => void;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <div style={{ display: 'flex', flex: 1, flexWrap: 'wrap', minHeight: 0, overflowY: 'auto' }}>
+      <div style={{ display: 'flex', flex: '999 1 480px', flexDirection: 'column', minWidth: 0 }}>
+        {children}
+      </div>
+      {panel !== undefined && (
+        <aside
+          aria-label={panelTitle}
+          style={{
+            background: theme.background.primary,
+            borderLeft: `1px solid ${theme.border.color.light}`,
+            boxSizing: 'border-box',
+            display: 'flex',
+            flex: '1 1 380px',
+            flexDirection: 'column',
+            gap: theme.spacing[3],
+            minWidth: 0,
+            padding: `${theme.spacing[3]} ${theme.spacing[4]} ${theme.spacing[4]}`,
+          }}
+        >
+          <div style={{ alignItems: 'center', display: 'flex', gap: theme.spacing[2], justifyContent: 'space-between' }}>
+            <strong style={{ fontSize: theme.font.size.lg }}>{panelTitle}</strong>
+            <Button variant="ghost" size="sm" onClick={onClosePanel}>
+              Закрыть
+            </Button>
+          </div>
+          {panel}
+        </aside>
+      )}
+    </div>
+  );
+};
+
+export const Details = ({ rows }: { rows: { label: string; value: ReactNode }[] }) => {
+  const theme = useTheme();
+
+  return (
+    <dl
+      style={{
+        columnGap: theme.spacing[3],
+        display: 'grid',
+        fontSize: theme.font.size.sm,
+        gridTemplateColumns: 'max-content minmax(0, 1fr)',
+        margin: 0,
+        rowGap: theme.spacing[1],
+      }}
+    >
+      {rows
+        .filter(({ value }) => value !== null && value !== undefined && value !== '' && value !== false)
+        .flatMap(({ label, value }) => [
+          <dt key={`${label}-term`} style={{ color: theme.font.color.tertiary }}>{label}</dt>,
+          <dd key={`${label}-value`} style={{ margin: 0, overflowWrap: 'anywhere' }}>{value}</dd>,
+        ])}
+    </dl>
+  );
+};

package/src/front/ui/form-field-inputs.tsx

@@ -0,0 +1,187 @@
+import { useTheme } from 'twenty-ui/theme';
+
+import { listRecords } from 'src/front/api';
+import { useAsync } from 'src/front/hooks/use-async';
+import { Labeled, SelectField, TextField } from 'src/front/ui/components';
+import { getFieldOptions, getObjectSummaries } from 'src/shared/api/object-summaries';
+import { formatRecordLabel } from 'src/shared/documents/attachment-target.util';
+import { type FormField, type FormValues } from 'src/shared/form/form-field.type';
+import { getFillableFormFields, isFormFieldRequired } from 'src/shared/form/form-fields.util';
+
+const RECORD_OPTIONS_LIMIT = 100;
+const NO_VALUE = '';
+
+const readRecordId = (value: unknown): string =>
+  typeof value === 'object' && value !== null && typeof (value as { id?: unknown }).id === 'string'
+    ? (value as { id: string }).id
+    : NO_VALUE;
+
+const RecordInput = ({
+  field,
+  value,
+  onChange,
+  disabled,
+}: FieldInputProps) => {
+  const objectName = field.settings?.objectName;
+  const { data: options, error } = useAsync(async () => {
+    if (typeof objectName !== 'string') {
+      return [];
+    }
+
+    const summary = (await getObjectSummaries()).get(objectName);
+
+    if (summary === undefined) {
+      return [];
+    }
+
+    const { records } = await listRecords<Record<string, unknown>>(summary.namePlural, {
+      limit: RECORD_OPTIONS_LIMIT,
+    });
+
+    return records.map((record) => ({
+      value: String(record.id),
+      label:
+        formatRecordLabel(
+          summary.labelFieldName !== undefined ? record[summary.labelFieldName] : undefined,
+        ) ?? String(record.id),
+    }));
+  }, [objectName]);
+
+  return (
+    <SelectField
+      label={field.label}
+      value={readRecordId(value)}
+      disabled={disabled || error !== undefined}
+      options={[{ value: NO_VALUE, label: 'Не выбрано' }, ...(options ?? [])]}
+      onChange={(recordId) => onChange(recordId === NO_VALUE ? null : { id: recordId })}
+    />
+  );
+};
+
+const SelectInput = ({ field, value, onChange, disabled }: FieldInputProps) => {
+  const selectedFieldId = field.settings?.selectedFieldId;
+  const { data: options } = useAsync(
+    async () => (typeof selectedFieldId === 'string' ? getFieldOptions(selectedFieldId) : []),
+    [selectedFieldId],
+  );
+  const isMultiple = field.type === 'MULTI_SELECT';
+  const theme = useTheme();
+
+  if (isMultiple) {
+    const selected = Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : [];
+
+    return (
+      <Labeled label={field.label}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: theme.spacing[2] }}>
+          {(options ?? []).map((option) => (
+            <label key={option.value} style={{ alignItems: 'center', display: 'flex', gap: theme.spacing[1], color: theme.font.color.primary, fontWeight: 'normal' }}>
+              <input
+                type="checkbox"
+                disabled={disabled}
+                checked={selected.includes(option.value)}
+                onChange={(event) =>
+                  onChange(
+                    event.target.checked
+                      ? [...selected, option.value]
+                      : selected.filter((item) => item !== option.value),
+                  )
+                }
+              />
+              {option.label}
+            </label>
+          ))}
+        </div>
+      </Labeled>
+    );
+  }
+
+  return (
+    <SelectField
+      label={field.label}
+      value={typeof value === 'string' ? value : NO_VALUE}
+      disabled={disabled}
+      options={[{ value: NO_VALUE, label: 'Не выбрано' }, ...(options ?? [])]}
+      onChange={(selected) => onChange(selected === NO_VALUE ? null : selected)}
+    />
+  );
+};
+
+type FieldInputProps = {
+  field: FormField;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  disabled: boolean;
+};
+
+const FieldInput = (props: FieldInputProps) => {
+  const { field, value, onChange, disabled } = props;
+
+  switch (field.type) {
+    case 'RECORD':
+      return <RecordInput {...props} />;
+    case 'SELECT':
+    case 'MULTI_SELECT':
+      return <SelectInput {...props} />;
+    case 'NUMBER':
+      return (
+        <TextField
+          label={field.label}
+          type="number"
+          disabled={disabled}
+          value={typeof value === 'number' ? String(value) : typeof value === 'string' ? value : ''}
+          placeholder={field.placeholder}
+          onChange={(text) => onChange(text.trim() === '' ? null : Number(text))}
+        />
+      );
+    case 'DATE':
+      return (
+        <TextField
+          label={field.label}
+          type="date"
+          disabled={disabled}
+          value={typeof value === 'string' ? value.slice(0, 10) : ''}
+          onChange={(text) => onChange(text === '' ? null : text)}
+        />
+      );
+    default:
+      return (
+        <TextField
+          label={field.label}
+          disabled={disabled}
+          value={typeof value === 'string' ? value : ''}
+          placeholder={field.placeholder}
+          onChange={(text) => onChange(text)}
+        />
+      );
+  }
+};
+
+// The fields a person fills, required ones marked; service fields (assignee,
+// deadline) are set by the process and never shown.
+export const FormFieldInputs = ({
+  fields,
+  values,
+  onChange,
+  disabled = false,
+}: {
+  fields: FormField[];
+  values: FormValues;
+  onChange: (values: FormValues) => void;
+  disabled?: boolean;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
+      {getFillableFormFields(fields).map((field) => (
+        <FieldInput
+          key={field.id}
+          field={{ ...field, label: isFormFieldRequired(field) ? `${field.label} *` : field.label }}
+          value={field.name in values ? values[field.name] : field.value}
+          disabled={disabled}
+          onChange={(value) => onChange({ ...values, [field.name]: value })}
+        />
+      ))}
+    </div>
+  );
+};