@fragments-sdk/cli 0.2.2

package/src/viewer/components/FragmentEditor.tsx

@@ -0,0 +1,485 @@
+import { useState, useCallback } from "react";
+import { useForm, useFieldArray, Controller } from "react-hook-form";
+import type { Fragment, FragmentUsage, FragmentMeta } from "../../core/index.js";
+import clsx from "clsx";
+import { ChevronDownIcon } from "./Icons.js";
+
+interface FragmentEditorProps {
+  /** Component name */
+  componentName: string;
+  /** Initial fragment data (if exists) */
+  fragment?: Fragment;
+  /** Called when the user saves changes */
+  onSave: (fragment: Fragment) => Promise<void>;
+  /** Whether save is in progress */
+  saving?: boolean;
+}
+
+interface FormData {
+  name: string;
+  description: string;
+  usage: {
+    when: string[];
+    doNot: Array<{ text: string; instead?: string }>;
+  };
+  accessibility: {
+    role: string;
+    requirements: string[];
+  };
+  related: {
+    similar: string[];
+    composedWith: string[];
+    usedIn: string[];
+  };
+  meta: {
+    owner: string;
+    status: "draft" | "experimental" | "beta" | "stable" | "deprecated";
+    since: string;
+    tags: string[];
+  };
+}
+
+export function FragmentEditor({
+  componentName,
+  fragment,
+  onSave,
+  saving = false,
+}: FragmentEditorProps) {
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(
+    new Set(["usage", "meta"])
+  );
+
+  const toggleSection = (section: string) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+
+  const defaultValues: FormData = {
+    name: fragment?.name || componentName,
+    description: fragment?.description || "",
+    usage: {
+      when: fragment?.usage?.when || [],
+      doNot:
+        fragment?.usage?.doNot?.map((item) =>
+          typeof item === "string" ? { text: item } : item
+        ) || [],
+    },
+    accessibility: {
+      role: fragment?.accessibility?.role || "",
+      requirements: fragment?.accessibility?.requirements || [],
+    },
+    related: {
+      similar: fragment?.related?.similar || [],
+      composedWith: fragment?.related?.composedWith || [],
+      usedIn: fragment?.related?.usedIn || [],
+    },
+    meta: {
+      owner: fragment?.meta?.owner || "",
+      status: fragment?.meta?.status || "stable",
+      since: fragment?.meta?.since || "",
+      tags: fragment?.meta?.tags || [],
+    },
+  };
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { isDirty },
+  } = useForm<FormData>({ defaultValues });
+
+  const {
+    fields: whenFields,
+    append: appendWhen,
+    remove: removeWhen,
+  } = useFieldArray({ control, name: "usage.when" as const });
+
+  const {
+    fields: doNotFields,
+    append: appendDoNot,
+    remove: removeDoNot,
+  } = useFieldArray({ control, name: "usage.doNot" });
+
+  const {
+    fields: requirementsFields,
+    append: appendRequirement,
+    remove: removeRequirement,
+  } = useFieldArray({ control, name: "accessibility.requirements" as const });
+
+  const onSubmit = useCallback(
+    async (data: FormData) => {
+      const fragment: Fragment = {
+        $schema: "https://fragments.dev/schema/v1.json",
+        name: data.name,
+        description: data.description || undefined,
+        usage: {
+          when: data.usage.when.filter(Boolean),
+          doNot: data.usage.doNot.filter((d) => d.text),
+        },
+        accessibility:
+          data.accessibility.role || data.accessibility.requirements.length > 0
+            ? {
+                role: data.accessibility.role || undefined,
+                requirements: data.accessibility.requirements.filter(Boolean),
+              }
+            : undefined,
+        related:
+          data.related.similar.length > 0 ||
+          data.related.composedWith.length > 0 ||
+          data.related.usedIn.length > 0
+            ? {
+                similar: data.related.similar.filter(Boolean),
+                composedWith: data.related.composedWith.filter(Boolean),
+                usedIn: data.related.usedIn.filter(Boolean),
+              }
+            : undefined,
+        meta: {
+          status: data.meta.status,
+          owner: data.meta.owner || undefined,
+          since: data.meta.since || undefined,
+          tags: data.meta.tags.filter(Boolean),
+        },
+      };
+
+      await onSave(fragment);
+    },
+    [onSave]
+  );
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="h-full flex flex-col bg-[--bg-primary]"
+    >
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-[--border] bg-[--bg-secondary]">
+        <h3 className="text-sm font-semibold text-primary">Fragment Editor</h3>
+        <p className="text-xs text-secondary mt-0.5">
+          Enrich {componentName} with metadata
+        </p>
+      </div>
+
+      {/* Scrollable content */}
+      <div className="flex-1 overflow-y-auto">
+        {/* Basic Info */}
+        <div className="p-4 border-b border-[--border]">
+          <label className="block text-xs font-medium text-secondary mb-1.5">
+            Description
+          </label>
+          <textarea
+            {...register("description")}
+            rows={3}
+            className="w-full px-3 py-2 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+            placeholder="Brief description of the component's purpose..."
+          />
+        </div>
+
+        {/* Usage Section */}
+        <Section
+          title="Usage Guidelines"
+          expanded={expandedSections.has("usage")}
+          onToggle={() => toggleSection("usage")}
+        >
+          {/* When to Use */}
+          <div className="mb-4">
+            <label className="block text-xs font-medium text-secondary mb-2">
+              When to Use
+            </label>
+            <div className="space-y-2">
+              {whenFields.map((field, index) => (
+                <div key={field.id} className="flex gap-2">
+                  <input
+                    {...register(`usage.when.${index}` as const)}
+                    className="flex-1 px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+                    placeholder="Scenario..."
+                  />
+                  <button
+                    type="button"
+                    onClick={() => removeWhen(index)}
+                    className="px-2 text-secondary hover:text-error"
+                  >
+                    &times;
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() => appendWhen("")}
+                className="text-xs text-[--color-accent] hover:underline"
+              >
+                + Add scenario
+              </button>
+            </div>
+          </div>
+
+          {/* Do Not */}
+          <div>
+            <label className="block text-xs font-medium text-secondary mb-2">
+              Do Not
+            </label>
+            <div className="space-y-2">
+              {doNotFields.map((field, index) => (
+                <div key={field.id} className="flex gap-2">
+                  <input
+                    {...register(`usage.doNot.${index}.text` as const)}
+                    className="flex-1 px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+                    placeholder="What not to do..."
+                  />
+                  <input
+                    {...register(`usage.doNot.${index}.instead` as const)}
+                    className="w-32 px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+                    placeholder="Instead..."
+                  />
+                  <button
+                    type="button"
+                    onClick={() => removeDoNot(index)}
+                    className="px-2 text-secondary hover:text-error"
+                  >
+                    &times;
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() => appendDoNot({ text: "", instead: "" })}
+                className="text-xs text-[--color-accent] hover:underline"
+              >
+                + Add anti-pattern
+              </button>
+            </div>
+          </div>
+        </Section>
+
+        {/* Accessibility Section */}
+        <Section
+          title="Accessibility"
+          expanded={expandedSections.has("accessibility")}
+          onToggle={() => toggleSection("accessibility")}
+        >
+          <div className="mb-4">
+            <label className="block text-xs font-medium text-secondary mb-1.5">
+              ARIA Role
+            </label>
+            <input
+              {...register("accessibility.role")}
+              className="w-full px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+              placeholder="button, dialog, etc."
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-secondary mb-2">
+              Requirements
+            </label>
+            <div className="space-y-2">
+              {requirementsFields.map((field, index) => (
+                <div key={field.id} className="flex gap-2">
+                  <input
+                    {...register(
+                      `accessibility.requirements.${index}` as const
+                    )}
+                    className="flex-1 px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+                    placeholder="Requirement..."
+                  />
+                  <button
+                    type="button"
+                    onClick={() => removeRequirement(index)}
+                    className="px-2 text-secondary hover:text-error"
+                  >
+                    &times;
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() => appendRequirement("")}
+                className="text-xs text-[--color-accent] hover:underline"
+              >
+                + Add requirement
+              </button>
+            </div>
+          </div>
+        </Section>
+
+        {/* Related Components Section */}
+        <Section
+          title="Related Components"
+          expanded={expandedSections.has("related")}
+          onToggle={() => toggleSection("related")}
+        >
+          <RelatedField
+            label="Similar"
+            description="Alternative components"
+            name="related.similar"
+            control={control}
+            register={register}
+          />
+          <RelatedField
+            label="Composed With"
+            description="Often used together"
+            name="related.composedWith"
+            control={control}
+            register={register}
+          />
+          <RelatedField
+            label="Used In"
+            description="Parent components"
+            name="related.usedIn"
+            control={control}
+            register={register}
+          />
+        </Section>
+
+        {/* Meta Section */}
+        <Section
+          title="Metadata"
+          expanded={expandedSections.has("meta")}
+          onToggle={() => toggleSection("meta")}
+        >
+          <div className="grid grid-cols-2 gap-4 mb-4">
+            <div>
+              <label className="block text-xs font-medium text-secondary mb-1.5">
+                Status
+              </label>
+              <select
+                {...register("meta.status")}
+                className="w-full px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+              >
+                <option value="draft">Draft</option>
+                <option value="experimental">Experimental</option>
+                <option value="beta">Beta</option>
+                <option value="stable">Stable</option>
+                <option value="deprecated">Deprecated</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-secondary mb-1.5">
+                Since Version
+              </label>
+              <input
+                {...register("meta.since")}
+                className="w-full px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+                placeholder="1.0.0"
+              />
+            </div>
+          </div>
+          <div className="mb-4">
+            <label className="block text-xs font-medium text-secondary mb-1.5">
+              Owner
+            </label>
+            <input
+              {...register("meta.owner")}
+              className="w-full px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+              placeholder="@team-name or email"
+            />
+          </div>
+        </Section>
+      </div>
+
+      {/* Footer with save button */}
+      <div className="px-4 py-3 border-t border-[--border] bg-[--bg-secondary]">
+        <button
+          type="submit"
+          disabled={!isDirty || saving}
+          className={clsx(
+            "w-full py-2 px-4 text-sm font-medium rounded-lg transition-colors",
+            isDirty && !saving
+              ? "bg-[--color-accent] text-white hover:bg-[--color-accent-hover]"
+              : "bg-[--bg-disabled] text-tertiary cursor-not-allowed"
+          )}
+        >
+          {saving ? "Saving..." : "Save Fragment"}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+interface SectionProps {
+  title: string;
+  expanded: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}
+
+function Section({ title, expanded, onToggle, children }: SectionProps) {
+  return (
+    <div className="border-b border-[--border]">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="w-full px-4 py-3 flex items-center justify-between bg-[--bg-secondary] hover:bg-[--bg-hover] transition-colors"
+      >
+        <span className="text-xs font-semibold text-primary uppercase tracking-wide">
+          {title}
+        </span>
+        <ChevronDownIcon
+          className={clsx(
+            "w-4 h-4 text-tertiary transition-transform",
+            !expanded && "-rotate-90"
+          )}
+        />
+      </button>
+      {expanded && <div className="p-4">{children}</div>}
+    </div>
+  );
+}
+
+interface RelatedFieldProps {
+  label: string;
+  description: string;
+  name: string;
+  control: any;
+  register: any;
+}
+
+function RelatedField({
+  label,
+  description,
+  name,
+  control,
+  register,
+}: RelatedFieldProps) {
+  const { fields, append, remove } = useFieldArray({ control, name });
+
+  return (
+    <div className="mb-4 last:mb-0">
+      <label className="block text-xs font-medium text-secondary mb-0.5">
+        {label}
+      </label>
+      <p className="text-[10px] text-tertiary mb-2">{description}</p>
+      <div className="space-y-2">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex gap-2">
+            <input
+              {...register(`${name}.${index}` as const)}
+              className="flex-1 px-3 py-1.5 text-sm bg-[--bg-elevated] border border-[--border] rounded-lg focus:outline-none focus:ring-2 focus:ring-[--color-accent] text-primary"
+              placeholder="ComponentName"
+            />
+            <button
+              type="button"
+              onClick={() => remove(index)}
+              className="px-2 text-secondary hover:text-error"
+            >
+              &times;
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={() => append("")}
+          className="text-xs text-[--color-accent] hover:underline"
+        >
+          + Add component
+        </button>
+      </div>
+    </div>
+  );
+}