Storybook: Add read only examples for text and dynamic values

Author: nicolas-jaussaud

assets/src/components/dynamic/Dynamic.stories.tsx

@@ -234,6 +234,19 @@ export const TextInsert: Story = {
   }
 }
 
+/**
+ * Read-only text field with dynamic values in insert mode
+ */
+export const TextInsertReadOnly: Story = {
+  args: {
+    type: 'text',
+    label: 'Text (read-only, insert mode)',
+    value: '[[post_title]]',
+    readOnly: true,
+    dynamic: true,
+  }
+}
+
 /**
  * Text field with dynamic values in replace mode — fully replaces
  * the field value with a single dynamic value
@@ -249,6 +262,21 @@ export const TextReplace: Story = {
   }
 }
 
+/**
+ * Read-only text field with dynamic values in replace mode
+ */
+export const TextReplaceReadOnly: Story = {
+  args: {
+    type: 'text',
+    label: 'Text (read-only, replace mode)',
+    value: '[[post_title]]',
+    readOnly: true,
+    dynamic: {
+      mode: 'replace',
+    },
+  }
+}
+
 /**
  * Number field with dynamic values (replace mode only)
  */

assets/src/components/field/text/Text.stories.tsx

@@ -38,6 +38,14 @@ export const SimpleTuiInput: Story = {
   }
 }
 
+export const ReadOnlyInput: Story = {
+  args: {
+    label: 'Read only Text',
+    value: 'Read only value',
+    readOnly: true
+  }
+}
+
 export const MaskedEnhancedInput: Story = {
   args: {
     label: 'Masked Text',
@@ -83,4 +91,3 @@ export const InteractiveComparison: Story = {
     )
   }
 }
-