view-contracts 0.1.0 → 0.2.0

package/src/renderer/react/runtime/components.tsx

@@ -1,216 +0,0 @@
-import type { ElementType, FormEvent, ReactElement, ReactNode } from 'react';
-import { dispatchPreviewAction } from './actionRuntime.js';
-import { commonStyle, isHidden, toneClass } from './style.js';
-import type { Action, Align, CommonProps, FieldSize, Justify, Option } from './types.js';
-
-function cx(...names: Array<string | false | undefined>): string {
-  return names.filter(Boolean).join(' ');
-}
-
-function mapAlign(value?: Align): string | undefined {
-  if (!value) return undefined;
-  if (value === 'start') return 'flex-start';
-  if (value === 'end') return 'flex-end';
-  return value;
-}
-
-function mapJustify(value?: Justify): string | undefined {
-  if (!value) return undefined;
-  if (value === 'start') return 'flex-start';
-  if (value === 'end') return 'flex-end';
-  if (value === 'between') return 'space-between';
-  if (value === 'around') return 'space-around';
-  if (value === 'spaceBetween') return 'space-between';
-  if (value === 'spaceAround') return 'space-around';
-  if (value === 'spaceEvenly') return 'space-evenly';
-  return value;
-}
-
-function runAction(action?: Action): void {
-  void dispatchPreviewAction(action);
-}
-
-export function Page(props: CommonProps & { title?: string }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <main id={props.id} role={props.role} aria-label={props.ariaLabel ?? props.label} className="ui-page" style={commonStyle(props)}>
-      {props.children}
-    </main>
-  );
-}
-
-export function Box(props: CommonProps): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <div id={props.id} role={props.role} aria-label={props.ariaLabel ?? props.label} className="ui-box" style={commonStyle(props)}>
-      {props.children}
-    </div>
-  );
-}
-
-export function Column(props: CommonProps & { align?: Align; justify?: Justify }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <div
-      id={props.id}
-      role={props.role}
-      aria-label={props.ariaLabel ?? props.label}
-      className="ui-column"
-      style={{ ...commonStyle(props), display: 'flex', flexDirection: 'column', alignItems: mapAlign(props.align), justifyContent: mapJustify(props.justify) }}
-    >
-      {props.children}
-    </div>
-  );
-}
-
-export function Stack(props: CommonProps & { contentAlign?: CommonProps['contentAlign'] }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <div id={props.id} role={props.role} aria-label={props.ariaLabel ?? props.label} className="ui-stack" style={commonStyle(props)}>
-      {props.children}
-    </div>
-  );
-}
-
-export function Row(props: CommonProps & { align?: Align; justify?: Justify; wrap?: boolean }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <div
-      id={props.id}
-      role={props.role}
-      aria-label={props.ariaLabel ?? props.label}
-      className={cx('ui-row', props.wrap && 'ui-wrap')}
-      style={{ ...commonStyle(props), display: 'flex', flexDirection: 'row', alignItems: mapAlign(props.align), justifyContent: mapJustify(props.justify) }}
-    >
-      {props.children}
-    </div>
-  );
-}
-
-export function Spacer(props: CommonProps): ReactElement {
-  return <div aria-hidden className="ui-spacer" style={{ ...commonStyle(props), flexGrow: props.weight ?? 1 }} />;
-}
-
-export function Divider(props: CommonProps): ReactElement | null {
-  if (isHidden(props)) return null;
-  return <hr className="ui-divider" style={commonStyle(props)} />;
-}
-
-export function Heading(props: CommonProps & { level?: 1 | 2 | 3 | 4 | 5 | 6; children: ReactNode }): ReactElement | null {
-  if (isHidden(props)) return null;
-  const level = Math.min(6, Math.max(1, props.level ?? 2)) as 1 | 2 | 3 | 4 | 5 | 6;
-  const Tag = `h${level}` as ElementType;
-  return (
-    <Tag className={cx('ui-heading', `ui-heading-${level}`)} style={commonStyle(props)}>
-      {props.children}
-    </Tag>
-  );
-}
-
-export function Text(props: CommonProps & { children: ReactNode }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <p className="ui-text" style={commonStyle(props)}>
-      {props.children}
-    </p>
-  );
-}
-
-export function Link(props: CommonProps & { href?: string; onClick?: Action; children: ReactNode }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <a className="ui-link" style={commonStyle(props)} href={props.href} onClick={() => runAction(props.action ?? props.onClick)}>
-      {props.children}
-    </a>
-  );
-}
-
-export function Button(props: CommonProps & { type?: 'button' | 'submit'; children: ReactNode }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <button
-      id={props.id}
-      aria-label={props.ariaLabel ?? props.label}
-      className={cx('ui-button', `ui-button-${props.variant ?? 'secondary'}`)}
-      style={commonStyle(props)}
-      type={props.type ?? 'button'}
-      disabled={props.enabled === false}
-      onClick={() => runAction(props.action)}
-    >
-      {props.children}
-    </button>
-  );
-}
-
-export function Form(props: CommonProps & { action?: Action; children: ReactNode }): ReactElement | null {
-  if (isHidden(props)) return null;
-  function onSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    runAction(props.action);
-  }
-  return (
-    <form id={props.id} aria-label={props.ariaLabel ?? props.label} className="ui-form" style={commonStyle(props)} onSubmit={onSubmit}>
-      {props.children}
-    </form>
-  );
-}
-
-function FieldFrame(props: { label?: string; help?: string; error?: string; children: ReactNode }): ReactElement {
-  return (
-    <label className="ui-field">
-      {props.label ? <span className="ui-field-label">{props.label}</span> : null}
-      {props.children}
-      {props.help ? <span className="ui-field-help">{props.help}</span> : null}
-      {props.error ? <span className="ui-field-error">{props.error}</span> : null}
-    </label>
-  );
-}
-
-export function TextInput(props: CommonProps & { name: string; label?: string; placeholder?: string; type?: string; required?: boolean; size?: FieldSize }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <FieldFrame label={props.label}>
-      <input className={cx('ui-input', `ui-field-${props.size ?? 'md'}`)} style={commonStyle(props)} name={props.name} placeholder={props.placeholder} type={props.type ?? 'text'} required={props.required} readOnly={props.readonly} disabled={props.enabled === false} />
-    </FieldFrame>
-  );
-}
-
-export function Select(props: CommonProps & { name: string; label?: string; options: Option[]; size?: FieldSize }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <FieldFrame label={props.label} help={props.help} error={props.error}>
-      <select className={cx('ui-select', `ui-field-${props.size ?? 'md'}`)} style={commonStyle(props)} name={props.name} disabled={props.enabled === false}>
-        {props.options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-      </select>
-    </FieldFrame>
-  );
-}
-
-export function TextArea(props: CommonProps & { name: string; label?: string; placeholder?: string; rows?: number }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <FieldFrame label={props.label} help={props.help} error={props.error}>
-      <textarea className="ui-textarea" style={commonStyle(props)} name={props.name} placeholder={props.placeholder} rows={props.rows ?? 4} readOnly={props.readonly} disabled={props.enabled === false} />
-    </FieldFrame>
-  );
-}
-
-export function Checkbox(props: CommonProps & { name: string; label: string }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return (
-    <label className="ui-check">
-      <input type="checkbox" name={props.name} defaultChecked={props.checked} disabled={props.enabled === false} />
-      <span>{props.label}</span>
-    </label>
-  );
-}
-
-export function List(props: CommonProps & { children: ReactNode }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return <ul role={props.role ?? 'list'} className="ui-list" style={commonStyle(props)}>{props.children}</ul>;
-}
-
-export function ListItem(props: CommonProps & { children: ReactNode }): ReactElement | null {
-  if (isHidden(props)) return null;
-  return <li role={props.role ?? 'listitem'} className="ui-list-item" style={commonStyle(props)}>{props.children}</li>;
-}

package/src/renderer/react/runtime/index.ts

@@ -1,4 +0,0 @@
-export * from './components.js';
-export * from './types.js';
-export { commonStyle, isHidden, toneClass } from './style.js';
-export { registerPreviewActions, clearPreviewActions, dispatchPreviewAction } from './actionRuntime.js';

package/src/renderer/react/runtime/shared.tsx

@@ -1,53 +0,0 @@
-import type { FormEvent, ReactElement, ReactNode } from 'react';
-import { dispatchPreviewAction } from './actionRuntime.js';
-import { commonStyle, isHidden, toneClass } from './style.js';
-import type { Action, Align, CommonProps, Justify } from './types.js';
-
-export function cx(...names: Array<string | false | undefined>): string {
-  return names.filter(Boolean).join(' ');
-}
-
-export function mapAlign(value?: Align): string | undefined {
-  if (!value) return undefined;
-  if (value === 'start') return 'flex-start';
-  if (value === 'end') return 'flex-end';
-  return value;
-}
-
-export function mapJustify(value?: Justify): string | undefined {
-  if (!value) return undefined;
-  if (value === 'start') return 'flex-start';
-  if (value === 'end') return 'flex-end';
-  if (value === 'between' || value === 'spaceBetween') return 'space-between';
-  if (value === 'around' || value === 'spaceAround') return 'space-around';
-  if (value === 'spaceEvenly') return 'space-evenly';
-  return value;
-}
-
-export function runAction(action?: Action): void {
-  void dispatchPreviewAction(action);
-}
-
-export function shellProps(props: CommonProps): Pick<CommonProps, 'id' | 'testId' | 'ariaLabel' | 'role'> {
-  return { id: props.id, testId: props.testId, ariaLabel: props.ariaLabel ?? props.label, role: props.role };
-}
-
-export function FieldFrame(props: { label?: string; help?: string; error?: string; children: ReactNode }): ReactElement {
-  return (
-    <div className="ui-field">
-      {props.label ? <span className="ui-field-label">{props.label}</span> : null}
-      {props.children}
-      {props.error ? <span className="ui-field-error">{props.error}</span> : null}
-      {!props.error && props.help ? <span className="ui-field-help">{props.help}</span> : null}
-    </div>
-  );
-}
-
-export function onFormSubmit(action?: Action) {
-  return (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    runAction(action);
-  };
-}
-
-export { commonStyle, isHidden, toneClass };

package/src/renderer/react/runtime/types.ts

@@ -1,46 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ViewAction } from '@view-contracts/core';
-import type { DslProperties } from '../../../generated/schema/dsl-properties.js';
-
-export type {
-  Align,
-  Axis,
-  Border,
-  Breakpoint,
-  Clip,
-  ContentAlign,
-  Direction,
-  FontWeight,
-  HeightSize,
-  ImageFit,
-  Justify,
-  KeyboardType,
-  LineLimit,
-  Overflow,
-  Role,
-  Scroll,
-  Shadow,
-  TextAlign,
-  TextOverflow,
-  WidthSize,
-} from '../../../generated/schema/tokens.js';
-
-export type { DslProperties };
-
-/** view-contracts view TSX action binding (schema property: onClick / onChange). */
-export type Action = ViewAction;
-
-/** React preview props: schema catalog + JSX children + view action alias. */
-export interface CommonProps extends DslProperties {
-  children?: ReactNode;
-  /** View-layer alias for onClick in interactive components. */
-  action?: ViewAction;
-}
-
-export interface Option {
-  label: string;
-  value: string;
-}
-
-/** Preview-only field density (not in ui-dsl.schema.json). */
-export type FieldSize = 'sm' | 'md' | 'lg';