castle-web-cli 0.4.3 → 0.4.4

package/kits/basic-2d-frozen/engine/ui.jsx

@@ -1,344 +0,0 @@
-import React, { useRef, useState } from 'react';
-import {
-  faBars,
-  faChevronDown,
-  faChevronRight,
-  faChevronUp,
-  faClone,
-  faObjectGroup,
-  faPalette,
-  faPlay,
-  faPlus,
-  faRedo,
-  faStop,
-  faTimes,
-  faTrash,
-  faUndo,
-  faVideo,
-} from '@fortawesome/free-solid-svg-icons';
-import styles from './ui.module.css';
-export { styles };
-export const theme = {
-  transparentChecker:
-    'repeating-linear-gradient(45deg, #050505, #050505 4px, #252525 4px, #252525 8px)',
-};
-export function cx(...parts) {
-  return parts.filter(Boolean).join(' ');
-}
-export function AppShell({ children }) {
-  return <div className={styles.appShell}>{children}</div>;
-}
-export function MainEditor({ children }) {
-  return <main className={styles.mainEditor}>{children}</main>;
-}
-export function EditorHeader({ title, subtitle, right, onToggleFiles, filesOpen }) {
-  const hasRight = !!right || !!onToggleFiles;
-  return (
-    <header className={styles.editorHeader}>
-      <div className={styles.editorHeaderLeft}>
-        <div>
-          <div className={styles.editorTitle}>{title}</div>
-          {subtitle ? <div className={styles.muted}>{subtitle}</div> : null}
-        </div>
-      </div>
-      {hasRight ? (
-        <div className={styles.editorHeaderRight}>
-          {right}
-          {onToggleFiles ? (
-            <button
-              type="button"
-              className={cx(styles.headerFilesButton, styles.mobileOnly)}
-              onClick={onToggleFiles}
-              aria-label="Files"
-              aria-pressed={filesOpen ? 'true' : 'false'}>
-              <Icon name="bars" />
-            </button>
-          ) : null}
-        </div>
-      ) : null}
-    </header>
-  );
-}
-export function EditorBody({ children }) {
-  return <div className={styles.editorBody}>{children}</div>;
-}
-export function Button({ children, active = false, variant = '', className = '', ...props }) {
-  return (
-    <button
-      className={cx(
-        styles.button,
-        active && styles.buttonActive,
-        variant === 'primary' && styles.buttonPrimary,
-        variant === 'danger' && styles.buttonDanger,
-        className
-      )}
-      {...props}>
-      {children}
-    </button>
-  );
-}
-export function IconButton({ icon, label, active = false, variant = '', ...props }) {
-  return (
-    <Button
-      active={active}
-      variant={variant}
-      className={styles.iconButton}
-      aria-label={label}
-      title={label}
-      {...props}>
-      <Icon name={icon} />
-    </Button>
-  );
-}
-const icons = {
-  bars: faBars,
-  camera: faVideo,
-  'chevron-down': faChevronDown,
-  'chevron-right': faChevronRight,
-  'chevron-up': faChevronUp,
-  clone: faClone,
-  'object-group': faObjectGroup,
-  palette: faPalette,
-  play: faPlay,
-  plus: faPlus,
-  redo: faRedo,
-  stop: faStop,
-  times: faTimes,
-  trash: faTrash,
-  undo: faUndo,
-};
-export function Icon({ name }) {
-  const def = icons[name];
-  if (!def) return null;
-  const [width, height, , , path] = def.icon;
-  const d = Array.isArray(path) ? path.join(' ') : path;
-  return (
-    <svg
-      viewBox={`0 0 ${width} ${height}`}
-      aria-hidden="true"
-      style={{ width: '1em', height: '1em', display: 'inline-block', fill: 'currentColor' }}>
-      <path d={d} />
-    </svg>
-  );
-}
-export function Panel({ title, children }) {
-  return (
-    <section className={styles.panel}>
-      {title ? <div className={styles.panelHeader}>{title}</div> : null}
-      <div className={styles.panelBody}>{children}</div>
-    </section>
-  );
-}
-export function FieldRow({ label, children }) {
-  return (
-    <label className={styles.fieldRow}>
-      <span className={styles.fieldLabel}>{label}</span>
-      {children}
-    </label>
-  );
-}
-export function TextField({ label, value, onChange }) {
-  return (
-    <FieldRow label={label}>
-      <input
-        className={styles.input}
-        value={value ?? ''}
-        onChange={(event) => onChange(event.target.value)}
-      />
-    </FieldRow>
-  );
-}
-export function NumberField({ label, value, onChange, min, max, step = 1 }) {
-  const current = Number.isFinite(value) ? (value ?? 0) : 0;
-  const [draft, setDraft] = useState(String(current));
-  const editingRef = useRef(false);
-  const cancelRef = useRef(false);
-  // keep the draft in sync with the committed value while not editing
-  if (!editingRef.current && draft !== String(current)) {
-    setDraft(String(current));
-  }
-  function commit(raw) {
-    let next = Number(raw);
-    if (!Number.isFinite(next)) next = current;
-    if (min != null && next < min) next = min;
-    if (max != null && next > max) next = max;
-    setDraft(String(next));
-    onChange(next);
-  }
-  function stepBy(delta) {
-    let next = current + delta;
-    if (min != null && next < min) next = min;
-    if (max != null && next > max) next = max;
-    setDraft(String(next));
-    onChange(next);
-  }
-  return (
-    <FieldRow label={label}>
-      <div className={styles.numberField}>
-        <input
-          className={cx(styles.input, styles.numberInput)}
-          type="number"
-          min={min}
-          max={max}
-          step={step}
-          value={draft}
-          onFocus={() => {
-            editingRef.current = true;
-          }}
-          onChange={(event) => setDraft(event.target.value)}
-          onBlur={(event) => {
-            editingRef.current = false;
-            if (cancelRef.current) {
-              cancelRef.current = false;
-              setDraft(String(current));
-              return;
-            }
-            commit(event.target.value);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              commit(event.currentTarget.value);
-              event.currentTarget.blur();
-            } else if (event.key === 'Escape') {
-              event.preventDefault();
-              cancelRef.current = true;
-              setDraft(String(current));
-              event.currentTarget.blur();
-            }
-          }}
-        />
-        <div className={styles.numberSteppers}>
-          <button
-            type="button"
-            className={styles.numberStepper}
-            tabIndex={-1}
-            aria-label="Increment"
-            disabled={max != null && current >= max}
-            onClick={() => stepBy(step)}>
-            <Icon name="chevron-up" />
-          </button>
-          <button
-            type="button"
-            className={styles.numberStepper}
-            tabIndex={-1}
-            aria-label="Decrement"
-            disabled={min != null && current <= min}
-            onClick={() => stepBy(-step)}>
-            <Icon name="chevron-down" />
-          </button>
-        </div>
-      </div>
-    </FieldRow>
-  );
-}
-export function CheckboxField({ label, checked, onChange }) {
-  return (
-    <FieldRow label={label}>
-      <button
-        type="button"
-        className={cx(styles.toggle, checked && styles.toggleOn)}
-        role="switch"
-        aria-checked={!!checked}
-        onClick={() => onChange(!checked)}>
-        <span className={styles.toggleKnob} />
-      </button>
-    </FieldRow>
-  );
-}
-export function ColorField({ label, value, onChange }) {
-  const hex = normalizeHex(value);
-  const alpha = hex.length === 9 ? hex.slice(7) : '';
-  const rgb = hex.slice(0, 7);
-  return (
-    <FieldRow label={label}>
-      <input
-        className={styles.colorInput}
-        type="color"
-        value={rgb}
-        onChange={(event) => onChange(event.target.value + alpha)}
-      />
-    </FieldRow>
-  );
-}
-function normalizeHex(value) {
-  const raw = (value ?? '').trim();
-  if (/^#[0-9a-fA-F]{3}$/.test(raw)) {
-    return '#' + raw.slice(1).replace(/./g, (c) => c + c);
-  }
-  if (/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(raw)) return raw;
-  return '#000000';
-}
-export function isHexColor(value) {
-  return (
-    typeof value === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/.test(value)
-  );
-}
-export function useMobileSheet({ snap, baseClassName, onTransition }) {
-  const startY = useRef(0);
-  const lastDy = useRef(0);
-  const dragging = useRef(false);
-  function onPointerDown(event) {
-    startY.current = event.clientY;
-    lastDy.current = 0;
-    dragging.current = true;
-    event.currentTarget.setPointerCapture(event.pointerId);
-  }
-  function onPointerMove(event) {
-    if (!dragging.current) return;
-    lastDy.current = event.clientY - startY.current;
-  }
-  function endDrag() {
-    if (!dragging.current) return;
-    dragging.current = false;
-    const dy = lastDy.current;
-    lastDy.current = 0;
-    if (Math.abs(dy) < 6) onTransition('tap');
-    else if (dy > 30) onTransition('down');
-    else if (dy < -30) onTransition('up');
-  }
-  return {
-    rootProps: {
-      className: baseClassName,
-      'data-sheet-snap': snap,
-    },
-    grabProps: {
-      className: cx(styles.sheetGrab, styles.mobileOnly),
-      onPointerDown,
-      onPointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
-    },
-  };
-}
-export function SheetGrabHandle({ label, hint }) {
-  return (
-    <>
-      <div className={styles.sheetGrabBar} />
-      <div className={styles.sheetGrabLabelRow}>
-        <span className={styles.sheetGrabLabel}>{label}</span>
-        {hint ? <span className={styles.sheetGrabHint}>{hint}</span> : null}
-      </div>
-    </>
-  );
-}
-export function SelectField({ label, value, onChange, options }) {
-  return (
-    <FieldRow label={label}>
-      <select
-        className={styles.select}
-        value={value ?? ''}
-        onChange={(event) => onChange(event.target.value)}>
-        {options.map((option) => {
-          const value = typeof option === 'string' ? option : option.value;
-          const label = typeof option === 'string' ? option : option.label;
-          return (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          );
-        })}
-      </select>
-    </FieldRow>
-  );
-}