chore: catch up Storybook preview, coverage, and story hygiene

Stories were throwing without AuthModal/CreateFlow providers, autodocs was a no-op, and several DS/create-flow screens had no stories.

stories/controls/TextArea.stories.js

@@ -1,5 +1,11 @@
 import React from "react";
 import TextArea from "../../app/components/controls/TextArea";
+import {
+  INPUT_STATE_OPTIONS,
+  LABEL_VARIANT_OPTIONS,
+  SMALL_MEDIUM_LARGE_OPTIONS,
+  TEXT_AREA_APPEARANCE_OPTIONS,
+} from "../../lib/propNormalization";
 
 export default {
   title: "Components/Controls/TextArea",
@@ -10,15 +16,19 @@ export default {
   argTypes: {
     size: {
       control: { type: "select" },
-      options: ["small", "medium", "large"],
+      options: [...SMALL_MEDIUM_LARGE_OPTIONS],
     },
     labelVariant: {
       control: { type: "select" },
-      options: ["default", "horizontal"],
+      options: [...LABEL_VARIANT_OPTIONS],
+    },
+    appearance: {
+      control: { type: "select" },
+      options: [...TEXT_AREA_APPEARANCE_OPTIONS],
     },
     state: {
       control: { type: "select" },
-      options: ["default", "active", "hover", "focus", "error"],
+      options: [...INPUT_STATE_OPTIONS],
     },
     disabled: {
       control: { type: "boolean" },
@@ -31,64 +41,71 @@ export default {
 
 const Template = (args) => <TextArea {...args} />;
 
-export const Default = Template.bind({});
-Default.args = {
-  label: "Text Area",
-  placeholder: "Enter text...",
-  value: "",
+export const Default = {
+  args: {
+    label: "Text Area",
+    placeholder: "Enter text...",
+    value: "",
+  },
+  render: Template,
 };
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  label: "Text Area",
-  placeholder: "Enter text...",
-  value:
-    "This is some sample text content that demonstrates how the text area looks with content.",
+export const WithValue = {
+  args: {
+    label: "Text Area",
+    placeholder: "Enter text...",
+    value:
+      "This is some sample text content that demonstrates how the text area looks with content.",
+  },
+  render: Template,
 };
-
-export const Small = Template.bind({});
-Small.args = {
-  size: "small",
-  label: "Small Text Area",
-  placeholder: "Enter text...",
-  value: "",
+export const Small = {
+  args: {
+    size: "small",
+    label: "Small Text Area",
+    placeholder: "Enter text...",
+    value: "",
+  },
+  render: Template,
 };
-
-export const Medium = Template.bind({});
-Medium.args = {
-  size: "medium",
-  label: "Medium Text Area",
-  placeholder: "Enter text...",
-  value: "",
+export const Medium = {
+  args: {
+    size: "medium",
+    label: "Medium Text Area",
+    placeholder: "Enter text...",
+    value: "",
+  },
+  render: Template,
 };
-
-export const Large = Template.bind({});
-Large.args = {
-  size: "large",
-  label: "Large Text Area",
-  placeholder: "Enter text...",
-  value: "",
+export const Large = {
+  args: {
+    size: "large",
+    label: "Large Text Area",
+    placeholder: "Enter text...",
+    value: "",
+  },
+  render: Template,
 };
-
-export const Embedded = Template.bind({});
-Embedded.args = {
-  label: "Section content",
-  placeholder: "Enter text...",
-  value:
-    "Embedded appearance used in create-flow modals: borderless, darker grey block.",
-  appearance: "embedded",
-  size: "large",
-  rows: 4,
+export const Embedded = {
+  args: {
+    label: "Section content",
+    placeholder: "Enter text...",
+    value:
+      "Embedded appearance used in create-flow modals: borderless, darker grey block.",
+    appearance: "embedded",
+    size: "large",
+    rows: 4,
+  },
+  render: Template,
 };
-
-export const HorizontalLabel = Template.bind({});
-HorizontalLabel.args = {
-  labelVariant: "horizontal",
-  label: "Horizontal Label",
-  placeholder: "Enter text...",
-  value: "",
+export const HorizontalLabel = {
+  args: {
+    labelVariant: "horizontal",
+    label: "Horizontal Label",
+    placeholder: "Enter text...",
+    value: "",
+  },
+  render: Template,
 };
-
 export const AllSizes = () => (
   <div className="space-y-6">
     <div className="space-y-4">