docs(storybook): split EnrichedMarkdownTextInput stories into inline and props

apps/example/.rnstorybook/stories/components/EnrichedMarkdownTextInput/EnrichedMarkdownTextInputStory.tsx

@@ -18,12 +18,13 @@ type Props = {
   title: string;
   description: string;
   initialMarkdown?: string;
-} & Omit<EnrichedMarkdownTextInputProps, 'style'>;
+} & EnrichedMarkdownTextInputProps;
 
 export function EnrichedMarkdownTextInputStory({
   title,
   description,
   initialMarkdown,
+  style,
   ...props
 }: Props) {
   const inputRef = useRef<EnrichedMarkdownTextInputInstance>(null);
@@ -48,7 +49,7 @@ export function EnrichedMarkdownTextInputStory({
             ref={inputRef}
             placeholder="Type markdown here..."
             placeholderTextColor="#9CA3AF"
-            style={styles.input}
+            style={{ ...styles.input, ...style }}
             onChangeState={setState}
             onChangeSelection={(sel) => setHasSelection(sel.start !== sel.end)}
             {...props}

apps/example/.rnstorybook/stories/components/EnrichedMarkdownTextInput/inline/Bold.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { EnrichedMarkdownTextInputStory } from '../EnrichedMarkdownTextInputStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  inputStrongDefaults,
+  type InputStrongStyleControls,
+} from '../shared/storybookInputStyles';
+import {
+  splitStyleControls,
+  toInputStrongStyle,
+} from '../shared/storybookInputStyleBuilders';
+import type { InputStory } from '../shared/storyTypes';
+
+const argTypes = {
+  color: {
+    control: 'color',
+    description: 'markdownStyle.strong.color',
+  },
+};
+
+export default storyMeta('Inline', 'Bold');
+
+export const Default: InputStory<InputStrongStyleControls> = {
+  args: {
+    initialMarkdown: '**Bold text** and normal text.',
+    ...inputStrongDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, inputStrongDefaults);
+    return (
+      <EnrichedMarkdownTextInputStory
+        title="Bold"
+        description="**text** renders as strong. Select text or position the cursor and tap Bold in the toolbar."
+        {...rest}
+        markdownStyle={{ strong: toInputStrongStyle(controls) }}
+      />
+    );
+  },
+};

apps/example/.rnstorybook/stories/components/EnrichedMarkdownTextInput/inline/Italic.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { EnrichedMarkdownTextInputStory } from '../EnrichedMarkdownTextInputStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  inputEmDefaults,
+  type InputEmStyleControls,
+} from '../shared/storybookInputStyles';
+import {
+  splitStyleControls,
+  toInputEmStyle,
+} from '../shared/storybookInputStyleBuilders';
+import type { InputStory } from '../shared/storyTypes';
+
+const argTypes = {
+  color: {
+    control: 'color',
+    description: 'markdownStyle.em.color',
+  },
+};
+
+export default storyMeta('Inline', 'Italic');
+
+export const Default: InputStory<InputEmStyleControls> = {
+  args: {
+    initialMarkdown: '*Italic text* and normal text.',
+    ...inputEmDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, inputEmDefaults);
+    return (
+      <EnrichedMarkdownTextInputStory
+        title="Italic"
+        description="*text* renders as emphasis. Select text or position the cursor and tap Italic in the toolbar."
+        {...rest}
+        markdownStyle={{ em: toInputEmStyle(controls) }}
+      />
+    );
+  },
+};

apps/example/.rnstorybook/stories/components/EnrichedMarkdownTextInput/inline/Link.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { EnrichedMarkdownTextInputStory } from '../EnrichedMarkdownTextInputStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  inputLinkBaseArgTypes,
+  inputLinkDefaults,
+  inputLinkVariantsArgTypes,
+  inputLinkVariantsDemoDefaults,
+  type InputLinkStyleControls,
+  type InputLinkVariantsDemoControls,
+} from '../shared/storybookInputStyles';
+import {
+  splitStyleControls,
+  toInputLinkStyle,
+  toInputLinkVariantsDemoStyle,
+} from '../shared/storybookInputStyleBuilders';
+import type { InputStory } from '../shared/storyTypes';
+
+const MARKDOWN = 'Visit [React Native](https://reactnative.dev) for docs.';
+
+const VARIANTS_MARKDOWN =
+  '[jira://PROJ-123](jira://PROJ-123), [sftp://server.example.com/file.zip](sftp://server.example.com/file.zip), [notion://page-abc](notion://page-abc), [https://example.com](https://example.com)';
+
+export default storyMeta('Inline', 'Link');
+
+export const Default: InputStory<InputLinkStyleControls> = {
+  args: {
+    initialMarkdown: MARKDOWN,
+    ...inputLinkDefaults,
+  },
+  argTypes: inputLinkBaseArgTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, inputLinkDefaults);
+    return (
+      <EnrichedMarkdownTextInputStory
+        title="Link"
+        description="[text](url) renders a styled link. Use the toolbar to set or insert links on the current selection."
+        {...rest}
+        markdownStyle={{ link: toInputLinkStyle(controls) }}
+      />
+    );
+  },
+};
+
+export const Variants: InputStory<InputLinkVariantsDemoControls> = {
+  args: {
+    initialMarkdown: VARIANTS_MARKDOWN,
+    ...inputLinkVariantsDemoDefaults,
+  },
+  argTypes: inputLinkVariantsArgTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      inputLinkVariantsDemoDefaults
+    );
+    return (
+      <EnrichedMarkdownTextInputStory
+        title="Link Variants"
+        description="linkVariants in markdownStyle styles links by URL scheme. Each key is a regex tested against the href — first match wins."
+        {...rest}
+        markdownStyle={toInputLinkVariantsDemoStyle(controls)}
+      />
+    );
+  },
+};

apps/example/.rnstorybook/stories/components/EnrichedMarkdownTextInput/inline/Spoiler.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { EnrichedMarkdownTextInputStory } from '../EnrichedMarkdownTextInputStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  inputSpoilerDefaults,
+  type InputSpoilerStyleControls,
+} from '../shared/storybookInputStyles';
+import {
+  splitStyleControls,
+  toInputSpoilerStyle,
+} from '../shared/storybookInputStyleBuilders';
+import type { InputStory } from '../shared/storyTypes';
+
+const argTypes = {
+  color: {
+    control: 'color',
+    description: 'markdownStyle.spoiler.color',
+  },
+  backgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.spoiler.backgroundColor',
+  },
+};
+
+export default storyMeta('Inline', 'Spoiler');
+
+export const Default: InputStory<InputSpoilerStyleControls> = {
+  args: {
+    initialMarkdown: 'The answer is ||spoiler text||.',
+    ...inputSpoilerDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, inputSpoilerDefaults);
+    return (
+      <EnrichedMarkdownTextInputStory
+        title="Spoiler"
+        description="||text|| renders as spoiler. Select text or position the cursor and tap Spoiler in the toolbar."
+        {...rest}
+        markdownStyle={{ spoiler: toInputSpoilerStyle(controls) }}
+      />
+    );
+  },
+};