Auto-generate id attributes by default.

lib/color-widget.tsx

@@ -1,20 +1,25 @@
 import React from "react";
+import { slugify } from "./util";
 
 type ColorWidgetProps = {
   label: string;
   value: string;
   onChange: (value: string) => void;
-  id: string;
+  id?: string;
 };
 
-export const ColorWidget: React.FC<ColorWidgetProps> = (props) => (
+export const ColorWidget: React.FC<ColorWidgetProps> = (props) => {
-  <>
+  const id = props.id || slugify(props.label);
-    <label htmlFor={props.id}>{props.label}: </label>
+
-    <input
+  return (
-      id={props.id}
+    <>
-      type="color"
+      <label htmlFor={id}>{props.label}: </label>
-      value={props.value}
+      <input
-      onChange={(e) => props.onChange(e.target.value)}
+        id={id}
-    />
+        type="color"
-  </>
+        value={props.value}
-);
+        onChange={(e) => props.onChange(e.target.value)}
+      />
+    </>
+  );
+};

lib/numeric-slider.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { float } from "./util";
+import { float, slugify } from "./util";
 
 export type NumericSliderProps = {
-  id: string;
+  id?: string;
   label: string;
   onChange: (value: number) => void;
   value: number;
@@ -13,12 +13,14 @@ export type NumericSliderProps = {
 };
 
 export const NumericSlider: React.FC<NumericSliderProps> = (props) => {
+  const id = props.id || slugify(props.label);
+
   return (
     <p>
-      <label htmlFor={props.id}>{props.label}: </label>
+      <label htmlFor={id}>{props.label}: </label>
       <input
         type="range"
-        id={props.id}
+        id={id}
         min={props.min}
         max={props.max}
         value={props.value}

lib/pages/creature-page.tsx

@@ -199,16 +199,10 @@ export const CreaturePage: React.FC<{}> = () => {
     <>
       <h1>Creature!</h1>
       <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx}>
-        <ColorWidget
+        <ColorWidget label="Background" value={bgColor} onChange={setBgColor} />{" "}
-          label="Background"
-          id="bgColor"
-          value={bgColor}
-          onChange={setBgColor}
-        />{" "}
       </SymbolContextWidget>
       <p>
         <NumericSlider
-          id="complexity"
           label="Random creature complexity"
           min={0}
           max={MAX_COMPLEXITY_LEVEL}

lib/pages/mandala-page.tsx

@@ -69,12 +69,7 @@ export const MandalaPage: React.FC<{}> = () => {
     <>
       <h1>Mandala!</h1>
       <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx}>
-        <ColorWidget
+        <ColorWidget label="Background" value={bgColor} onChange={setBgColor} />{" "}
-          label="Background"
-          id="bgColor"
-          value={bgColor}
-          onChange={setBgColor}
-        />{" "}
       </SymbolContextWidget>
       <p>
         <SvgSymbolWidget
@@ -84,7 +79,6 @@ export const MandalaPage: React.FC<{}> = () => {
           choices={SvgVocabulary}
         />
         <NumericSlider
-          id="radius"
           label="Radius"
           value={radius}
           onChange={setRadius}
@@ -93,7 +87,6 @@ export const MandalaPage: React.FC<{}> = () => {
           step={1}
         />
         <NumericSlider
-          id="symbols"
           label="Numer of symbols"
           value={numSymbols}
           onChange={setNumSymbols}

lib/pages/waves-page.tsx

@@ -108,16 +108,10 @@ const Waves: React.FC<{}> = () => {
         {waves}
       </svg>
       <p>
-        <ColorWidget
+        <ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
-          id="stroke"
+        <ColorWidget value={fill} onChange={setFill} label="Fill" />
-          value={stroke}
-          onChange={setStroke}
-          label="Stroke"
-        />{" "}
-        <ColorWidget id="fill" value={fill} onChange={setFill} label="Fill" />
       </p>
       <NumericSlider
-        id="numWaves"
         label="Number of waves"
         min={1}
         max={NUM_WAVES * 2}
@@ -126,7 +120,6 @@ const Waves: React.FC<{}> = () => {
         onChange={setNumWaves}
       />
       <NumericSlider
-        id="duration"
         label="Cycle duration"
         min={0.1}
         max={3}
@@ -136,7 +129,6 @@ const Waves: React.FC<{}> = () => {
         valueSuffix="s"
       />
       <NumericSlider
-        id="initialYVel"
         label="Initial y-velocity"
         min={1}
         max={WAVE_PARALLAX_TRANSLATE_VELOCITY * 4}
@@ -145,7 +137,6 @@ const Waves: React.FC<{}> = () => {
         onChange={setInitialYVel}
       />
       <NumericSlider
-        id="yAccel"
         label="Y-acceleration"
         min={1}
         max={WAVE_PARALLAX_TRANSLATE_ACCEL * 2}
@@ -154,7 +145,6 @@ const Waves: React.FC<{}> = () => {
         onChange={setYAccel}
       />
       <NumericSlider
-        id="scaleVel"
         label="Scale velocity"
         min={1.0}
         max={2}

lib/symbol-context-widget.tsx

@@ -16,13 +16,11 @@ export const SymbolContextWidget: React.FC<{
     <p>
       {children}
       <ColorWidget
-        id="stroke"
         label="Stroke"
         value={ctx.stroke}
         onChange={(stroke) => updateCtx({ stroke })}
       />{" "}
       <ColorWidget
-        id="fill"
         label="Fill"
         value={ctx.fill}
         onChange={(fill) => updateCtx({ fill })}
@@ -42,7 +40,6 @@ export const SymbolContextWidget: React.FC<{
         <>
           <br />
           <NumericSlider
-            id="strokeWidth"
             label="Stroke width"
             min={0}
             max={3}