feat(playground): add disabled prop system on playground

src/components/LoadedCode.tsx

@@ -16,7 +16,10 @@ export const GITHUB_COMP_PREVIEW = (componentName: string) =>
 export const GITHUB_STORY = (componentName: string, storyName: string) =>
   `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`;
 
-export type TEMPLATE = Record<string, Record<string, string | boolean>>;
+export type TEMPLATE = Record<
+  string,
+  Record<string, string | boolean | undefined>
+>;
 
 const TEMPLATE_REMOVE_REGEX = /\/\*\s*remove\s*\*\/(.|\n)*?\/\*\s*end\s*\*\//g;
 const TEMPLATE_REPLACE_REGEX =
@@ -54,13 +57,15 @@ export const LoadedCode = forwardRef<
         componentTemplateProps,
       )) {
         const regex = new RegExp(
-          `(<${componentName.slice(0, componentName.length - 5)}\\b[^>]*)\\s${propName}={${componentName}.${propName}}`,
+          `(<${componentName.slice(0, componentName.length - 5)}\\b[^>]*?)(\n?\\s+)${propName}={${componentName}.${propName}}`,
         );
         templatedCode = templatedCode.replace(
           regex,
-          typeof propValue === "string"
+          typeof propValue === "undefined"
-            ? `\$1 ${propName}="${propValue}"`
+            ? "$1"
-            : `$1 ${propName}={${propValue}}`,
+            : typeof propValue === "string"
+              ? `\$1$2 ${propName}="${propValue}"`
+              : `$1$2 ${propName}={${propValue}}`,
         );
       }
     }

src/components/PgHooks.tsx

@@ -25,8 +25,14 @@ export function usePgProps<T extends TEMPLATE>(
               state[componentName][propKey].value = value;
             });
           },
+          onToggle(v: boolean) {
+            console.log(`toggling ${componentName}/${propKey}`);
+            mutate((state) => {
+              state[componentName][propKey].disabled = v;
+            });
+          },
         };
-        vals[propKey] = propMeta.value;
+        vals[propKey] = propMeta.disabled ? undefined : propMeta.value;
       }
 
       controlTemplate[componentName] = pre;

src/components/Playground.tsx

@@ -9,9 +9,9 @@ export type Template = Record<
   string,
   Record<
     string,
-    | { type: "boolean"; value: boolean }
+    | { type: "boolean"; value: boolean; disabled?: boolean }
-    | { type: "select"; options: string[]; value: string }
+    | { type: "select"; options: string[]; value: string; disabled?: boolean }
-    | { type: "string"; value: string }
+    | { type: "string"; value: string; disabled?: boolean }
   >
 >;
 
@@ -22,15 +22,25 @@ export type ControlTemplate = Record<
     | {
         type: "boolean";
         value: boolean;
+        disabled?: boolean;
         onChange: (value: boolean) => void;
+        onToggle: (v: boolean) => void;
       }
     | {
         type: "select";
         options: string[];
         value: string;
+        disabled?: boolean;
         onChange: (value: string) => void;
+        onToggle: (v: boolean) => void;
+      }
+    | {
+        type: "string";
+        value: string;
+        disabled?: boolean;
+        onChange: (value: string) => void;
+        onToggle: (v: boolean) => void;
       }
-    | { type: "string"; value: string; onChange: (value: string) => void }
   >
 >;
 
@@ -52,12 +62,26 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
           >
             <b>&lt;{componentName.slice(0, componentName.length - 5)}&gt;</b>
             {Object.entries(propEntries).map(([propName, propMeta]) => (
-              <Label
+              <div
                 key={componentName + propName}
-                direction="horizontal"
                 className="flex flex-row justify-between items-center w-full gap-2"
               >
-                <span>{propName}</span>
+                <Label
+                  direction="horizontal"
+                  className="flex flex-row items-center gap-2"
+                >
+                  <Checkbox
+                    onChange={(e) => {
+                      propMeta.onToggle(e.currentTarget.checked);
+                    }}
+                    checked={propMeta.disabled}
+                  />
+                  {propMeta.disabled ? (
+                    <s className="opacity-50">{propName}</s>
+                  ) : (
+                    <span>{propName}</span>
+                  )}
+                </Label>
                 {propMeta.type === "boolean" ? (
                   <Checkbox
                     checked={propMeta.value}
@@ -87,7 +111,7 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
                     </PopoverContent>
                   </Popover>
                 ) : null}
-              </Label>
+              </div>
             ))}
           </div>
         ))}