@haiiro/docuflow 0.0.1 → 0.0.3

package/src/front/ui/components.tsx

@@ -1,436 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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>
-  );
-};