@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/FragmentEditor.tsx

@@ -1,7 +1,6 @@
 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 {
@@ -39,6 +38,44 @@ interface FormData {
   };
 }
 
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '6px 12px',
+  fontSize: '14px',
+  background: 'var(--bg-elevated)',
+  border: '1px solid var(--border)',
+  borderRadius: '8px',
+  outline: 'none',
+  color: 'var(--text-primary)',
+  boxSizing: 'border-box',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: '12px',
+  fontWeight: 500,
+  color: 'var(--text-secondary)',
+  marginBottom: '6px',
+};
+
+const removeButtonStyle: React.CSSProperties = {
+  padding: '0 8px',
+  color: 'var(--text-secondary)',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  fontSize: '16px',
+};
+
+const addButtonStyle: React.CSSProperties = {
+  fontSize: '12px',
+  color: 'var(--color-accent)',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  padding: 0,
+};
+
 export function FragmentEditor({
   componentName,
   fragment,
@@ -156,27 +193,30 @@ export function FragmentEditor({
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="h-full flex flex-col bg-[--bg-primary]"
+      style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--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">
+      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
+        <h3 style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)', margin: 0 }}>Fragment Editor</h3>
+        <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '2px', marginBottom: 0 }}>
           Enrich {componentName} with metadata
         </p>
       </div>
 
       {/* Scrollable content */}
-      <div className="flex-1 overflow-y-auto">
+      <div style={{ flex: 1, overflowY: 'auto' }}>
         {/* Basic Info */}
-        <div className="p-4 border-b border-[--border]">
-          <label className="block text-xs font-medium text-secondary mb-1.5">
+        <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
+          <label style={labelStyle}>
             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"
+            style={{
+              ...inputStyle,
+              resize: 'none',
+            }}
             placeholder="Brief description of the component's purpose..."
           />
         </div>
@@ -188,22 +228,22 @@ export function FragmentEditor({
           onToggle={() => toggleSection("usage")}
         >
           {/* When to Use */}
-          <div className="mb-4">
-            <label className="block text-xs font-medium text-secondary mb-2">
+          <div style={{ marginBottom: '16px' }}>
+            <label style={{ ...labelStyle, marginBottom: '8px' }}>
               When to Use
             </label>
-            <div className="space-y-2">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
               {whenFields.map((field, index) => (
-                <div key={field.id} className="flex gap-2">
+                <div key={field.id} style={{ display: 'flex', gap: '8px' }}>
                   <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"
+                    style={{ ...inputStyle, flex: 1 }}
                     placeholder="Scenario..."
                   />
                   <button
                     type="button"
                     onClick={() => removeWhen(index)}
-                    className="px-2 text-secondary hover:text-error"
+                    style={removeButtonStyle}
                   >
                     &times;
                   </button>
@@ -212,7 +252,7 @@ export function FragmentEditor({
               <button
                 type="button"
                 onClick={() => appendWhen("")}
-                className="text-xs text-[--color-accent] hover:underline"
+                style={addButtonStyle}
               >
                 + Add scenario
               </button>
@@ -221,26 +261,26 @@ export function FragmentEditor({
 
           {/* Do Not */}
           <div>
-            <label className="block text-xs font-medium text-secondary mb-2">
+            <label style={{ ...labelStyle, marginBottom: '8px' }}>
               Do Not
             </label>
-            <div className="space-y-2">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
               {doNotFields.map((field, index) => (
-                <div key={field.id} className="flex gap-2">
+                <div key={field.id} style={{ display: 'flex', gap: '8px' }}>
                   <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"
+                    style={{ ...inputStyle, flex: 1 }}
                     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"
+                    style={{ ...inputStyle, width: '128px' }}
                     placeholder="Instead..."
                   />
                   <button
                     type="button"
                     onClick={() => removeDoNot(index)}
-                    className="px-2 text-secondary hover:text-error"
+                    style={removeButtonStyle}
                   >
                     &times;
                   </button>
@@ -249,7 +289,7 @@ export function FragmentEditor({
               <button
                 type="button"
                 onClick={() => appendDoNot({ text: "", instead: "" })}
-                className="text-xs text-[--color-accent] hover:underline"
+                style={addButtonStyle}
               >
                 + Add anti-pattern
               </button>
@@ -263,35 +303,35 @@ export function FragmentEditor({
           expanded={expandedSections.has("accessibility")}
           onToggle={() => toggleSection("accessibility")}
         >
-          <div className="mb-4">
-            <label className="block text-xs font-medium text-secondary mb-1.5">
+          <div style={{ marginBottom: '16px' }}>
+            <label style={labelStyle}>
               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"
+              style={inputStyle}
               placeholder="button, dialog, etc."
             />
           </div>
 
           <div>
-            <label className="block text-xs font-medium text-secondary mb-2">
+            <label style={{ ...labelStyle, marginBottom: '8px' }}>
               Requirements
             </label>
-            <div className="space-y-2">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
               {requirementsFields.map((field, index) => (
-                <div key={field.id} className="flex gap-2">
+                <div key={field.id} style={{ display: 'flex', gap: '8px' }}>
                   <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"
+                    style={{ ...inputStyle, flex: 1 }}
                     placeholder="Requirement..."
                   />
                   <button
                     type="button"
                     onClick={() => removeRequirement(index)}
-                    className="px-2 text-secondary hover:text-error"
+                    style={removeButtonStyle}
                   >
                     &times;
                   </button>
@@ -300,7 +340,7 @@ export function FragmentEditor({
               <button
                 type="button"
                 onClick={() => appendRequirement("")}
-                className="text-xs text-[--color-accent] hover:underline"
+                style={addButtonStyle}
               >
                 + Add requirement
               </button>
@@ -343,14 +383,14 @@ export function FragmentEditor({
           expanded={expandedSections.has("meta")}
           onToggle={() => toggleSection("meta")}
         >
-          <div className="grid grid-cols-2 gap-4 mb-4">
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
             <div>
-              <label className="block text-xs font-medium text-secondary mb-1.5">
+              <label style={labelStyle}>
                 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"
+                style={inputStyle}
               >
                 <option value="draft">Draft</option>
                 <option value="experimental">Experimental</option>
@@ -360,23 +400,23 @@ export function FragmentEditor({
               </select>
             </div>
             <div>
-              <label className="block text-xs font-medium text-secondary mb-1.5">
+              <label style={labelStyle}>
                 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"
+                style={inputStyle}
                 placeholder="1.0.0"
               />
             </div>
           </div>
-          <div className="mb-4">
-            <label className="block text-xs font-medium text-secondary mb-1.5">
+          <div style={{ marginBottom: '16px' }}>
+            <label style={labelStyle}>
               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"
+              style={inputStyle}
               placeholder="@team-name or email"
             />
           </div>
@@ -384,16 +424,22 @@ export function FragmentEditor({
       </div>
 
       {/* Footer with save button */}
-      <div className="px-4 py-3 border-t border-[--border] bg-[--bg-secondary]">
+      <div style={{ padding: '12px 16px', borderTop: '1px solid var(--border)', background: 'var(--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"
-          )}
+          style={{
+            width: '100%',
+            padding: '8px 16px',
+            fontSize: '14px',
+            fontWeight: 500,
+            borderRadius: '8px',
+            transition: 'background-color 150ms',
+            border: 'none',
+            cursor: isDirty && !saving ? 'pointer' : 'not-allowed',
+            background: isDirty && !saving ? 'var(--color-accent)' : 'var(--bg-secondary)',
+            color: isDirty && !saving ? 'white' : 'var(--text-tertiary)',
+          }}
         >
           {saving ? "Saving..." : "Save Fragment"}
         </button>
@@ -410,24 +456,41 @@ interface SectionProps {
 }
 
 function Section({ title, expanded, onToggle, children }: SectionProps) {
+  const [hovered, setHovered] = useState(false);
+
   return (
-    <div className="border-b border-[--border]">
+    <div style={{ borderBottom: '1px solid var(--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"
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        style={{
+          width: '100%',
+          padding: '12px 16px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          background: hovered ? 'var(--bg-hover)' : 'var(--bg-secondary)',
+          transition: 'background-color 150ms',
+          border: 'none',
+          cursor: 'pointer',
+        }}
       >
-        <span className="text-xs font-semibold text-primary uppercase tracking-wide">
+        <span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-primary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
           {title}
         </span>
         <ChevronDownIcon
-          className={clsx(
-            "w-4 h-4 text-tertiary transition-transform",
-            !expanded && "-rotate-90"
-          )}
+          style={{
+            width: '16px',
+            height: '16px',
+            color: 'var(--text-tertiary)',
+            transition: 'transform 150ms',
+            transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)',
+          }}
         />
       </button>
-      {expanded && <div className="p-4">{children}</div>}
+      {expanded && <div style={{ padding: '16px' }}>{children}</div>}
     </div>
   );
 }
@@ -450,23 +513,23 @@ function RelatedField({
   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">
+    <div style={{ marginBottom: '16px' }}>
+      <label style={{ display: 'block', fontSize: '12px', fontWeight: 500, color: 'var(--text-secondary)', marginBottom: '2px' }}>
         {label}
       </label>
-      <p className="text-[10px] text-tertiary mb-2">{description}</p>
-      <div className="space-y-2">
+      <p style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginBottom: '8px', marginTop: 0 }}>{description}</p>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
         {fields.map((field, index) => (
-          <div key={field.id} className="flex gap-2">
+          <div key={field.id} style={{ display: 'flex', gap: '8px' }}>
             <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"
+              style={{ ...inputStyle, flex: 1 }}
               placeholder="ComponentName"
             />
             <button
               type="button"
               onClick={() => remove(index)}
-              className="px-2 text-secondary hover:text-error"
+              style={removeButtonStyle}
             >
               &times;
             </button>
@@ -475,7 +538,7 @@ function RelatedField({
         <button
           type="button"
           onClick={() => append("")}
-          className="text-xs text-[--color-accent] hover:underline"
+          style={addButtonStyle}
         >
           + Add component
         </button>