From ca508b5f849f11ec6ab589abea1843ede107a8f2 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sun, 20 Apr 2025 14:26:15 +0800
Subject: [PATCH] feat(stage-ui): new Textarea component

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
---
 .../src/pages/settings/modules/speech.vue     | 10 ++++----
 .../src/pages/settings/modules/speech.vue     | 10 ++++----
 .../src/pages/test/filter-message.vue         |  3 ++-
 .../src/pages/test/queues/delays.vue          |  4 ++--
 .../src/pages/test/queues/emotions.vue        |  4 ++--
 .../src/pages/test/queues/messages.vue        |  4 ++--
 .../components/Form/Textarea/Basic.story.vue  | 19 +++++++++++++++
 .../Textarea/Basic.vue}                       |  0
 .../Form/Textarea/Textarea.story.vue          | 23 +++++++++++++++++++
 .../src/components/Form/Textarea/Textarea.vue | 15 ++++++++++++
 .../src/components/Form/Textarea/index.ts     |  2 ++
 .../stage-ui/src/components/Form/index.ts     |  1 +
 packages/stage-ui/src/components/index.ts     |  1 -
 13 files changed, 76 insertions(+), 20 deletions(-)
 create mode 100644 packages/stage-ui/src/components/Form/Textarea/Basic.story.vue
 rename packages/stage-ui/src/components/{BasicTextarea.vue => Form/Textarea/Basic.vue} (100%)
 create mode 100644 packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue
 create mode 100644 packages/stage-ui/src/components/Form/Textarea/Textarea.vue
 create mode 100644 packages/stage-ui/src/components/Form/Textarea/index.ts

diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
index da87899d9..b6b8dae71 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
@@ -10,6 +10,7 @@ import {
   RadioCardSimple,
   Skeleton,
   TestDummyMarker,
+  Textarea,
   VoiceCardManySelect,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
@@ -454,13 +455,10 @@ function updateCustomModelName(value: string) {
           />
 
           <template v-if="!useSSML">
-            <textarea
-              v-model="testText"
+            <Textarea
+              v-model="testText" h-24
+              w-full
               :placeholder="t('settings.pages.providers.provider.elevenlabs.playground.fields.field.input.placeholder')"
-              border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
-              transition="all duration-250 ease-in-out"
-              bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
-              h-24 w-full rounded-lg px-3 py-2 text-sm outline-none
             />
           </template>
           <template v-else>
diff --git a/apps/stage-web/src/pages/settings/modules/speech.vue b/apps/stage-web/src/pages/settings/modules/speech.vue
index da87899d9..b6b8dae71 100644
--- a/apps/stage-web/src/pages/settings/modules/speech.vue
+++ b/apps/stage-web/src/pages/settings/modules/speech.vue
@@ -10,6 +10,7 @@ import {
   RadioCardSimple,
   Skeleton,
   TestDummyMarker,
+  Textarea,
   VoiceCardManySelect,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
@@ -454,13 +455,10 @@ function updateCustomModelName(value: string) {
           />
 
           <template v-if="!useSSML">
-            <textarea
-              v-model="testText"
+            <Textarea
+              v-model="testText" h-24
+              w-full
               :placeholder="t('settings.pages.providers.provider.elevenlabs.playground.fields.field.input.placeholder')"
-              border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
-              transition="all duration-250 ease-in-out"
-              bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
-              h-24 w-full rounded-lg px-3 py-2 text-sm outline-none
             />
           </template>
           <template v-else>
diff --git a/apps/stage-web/src/pages/test/filter-message.vue b/apps/stage-web/src/pages/test/filter-message.vue
index d339ec9a9..ddbd62ca9 100644
--- a/apps/stage-web/src/pages/test/filter-message.vue
+++ b/apps/stage-web/src/pages/test/filter-message.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Textarea } from '@proj-airi/stage-ui/components'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
@@ -58,7 +59,7 @@ async function onSendMessage() {
 <template>
   <div flex flex-col gap-2 p-2>
     <div flex flex-row gap-2>
-      <BasicTextarea
+      <Textarea
         v-model="messageInput"
         placeholder="Message"
         p="2" bg="neutral-100 dark:neutral-700"
diff --git a/apps/stage-web/src/pages/test/queues/delays.vue b/apps/stage-web/src/pages/test/queues/delays.vue
index b9f0c4225..d0270962f 100644
--- a/apps/stage-web/src/pages/test/queues/delays.vue
+++ b/apps/stage-web/src/pages/test/queues/delays.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BasicTextarea } from '@proj-airi/stage-ui/components'
+import { Textarea } from '@proj-airi/stage-ui/components'
 import { useDelayMessageQueue } from '@proj-airi/stage-ui/composables'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
 import { ref } from 'vue'
@@ -37,7 +37,7 @@ function onSendMessage() {
 <template>
   <div flex flex-col gap-2 p-2>
     <div flex flex-row gap-2>
-      <BasicTextarea
+      <Textarea
         v-model="messageInput"
         placeholder="Message"
         p="2" bg="neutral-100 dark:neutral-700"
diff --git a/apps/stage-web/src/pages/test/queues/emotions.vue b/apps/stage-web/src/pages/test/queues/emotions.vue
index 96c317688..081b3f04b 100644
--- a/apps/stage-web/src/pages/test/queues/emotions.vue
+++ b/apps/stage-web/src/pages/test/queues/emotions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Emotion } from '@proj-airi/stage-ui/constants/emotions'
 
-import { BasicTextarea } from '@proj-airi/stage-ui/components'
+import { Textarea } from '@proj-airi/stage-ui/components'
 import { useQueue } from '@proj-airi/stage-ui/composables/queue'
 import { useEmotionsMessageQueue } from '@proj-airi/stage-ui/composables/queues'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
@@ -37,7 +37,7 @@ function onSendMessage() {
 <template>
   <div flex flex-col gap-2 p-2>
     <div flex flex-row gap-2>
-      <BasicTextarea
+      <Textarea
         v-model="messageInput"
         placeholder="Message"
         p="2" bg="neutral-100 dark:neutral-700"
diff --git a/apps/stage-web/src/pages/test/queues/messages.vue b/apps/stage-web/src/pages/test/queues/messages.vue
index b76ae6ae8..005eb3608 100644
--- a/apps/stage-web/src/pages/test/queues/messages.vue
+++ b/apps/stage-web/src/pages/test/queues/messages.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BasicTextarea } from '@proj-airi/stage-ui/components'
+import { Textarea } from '@proj-airi/stage-ui/components'
 import { useQueue } from '@proj-airi/stage-ui/composables/queue'
 import { useMessageContentQueue } from '@proj-airi/stage-ui/composables/queues'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
@@ -41,7 +41,7 @@ async function onSendMessage() {
 <template>
   <div flex flex-col gap-2 p-2>
     <div flex flex-row gap-2>
-      <BasicTextarea
+      <Textarea
         v-model="messageInput"
         placeholder="Message"
         p="2" bg="neutral-100 dark:neutral-700"
diff --git a/packages/stage-ui/src/components/Form/Textarea/Basic.story.vue b/packages/stage-ui/src/components/Form/Textarea/Basic.story.vue
new file mode 100644
index 000000000..f0c98e73b
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Textarea/Basic.story.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import BasicTextarea from './Basic.vue'
+</script>
+
+<template>
+  <Story
+    title="Textarea (basic)"
+    group="form"
+    :layout="{ type: 'grid', width: 400 }"
+  >
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant id="default">
+      <BasicTextarea />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/BasicTextarea.vue b/packages/stage-ui/src/components/Form/Textarea/Basic.vue
similarity index 100%
rename from packages/stage-ui/src/components/BasicTextarea.vue
rename to packages/stage-ui/src/components/Form/Textarea/Basic.vue
diff --git a/packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue b/packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue
new file mode 100644
index 000000000..ce0c9e92d
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import Textarea from './Textarea.vue'
+
+const input = ref('')
+</script>
+
+<template>
+  <Story
+    title="Textarea"
+    group="form"
+    :layout="{ type: 'grid', width: 400 }"
+  >
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant id="default">
+      <Textarea v-model="input" />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Textarea/Textarea.vue b/packages/stage-ui/src/components/Form/Textarea/Textarea.vue
new file mode 100644
index 000000000..2eb9992f9
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Textarea/Textarea.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import BasicTextarea from './Basic.vue'
+
+const modelValue = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <BasicTextarea
+    v-model="modelValue"
+    border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
+    transition="all duration-250 ease-in-out"
+    bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
+    rounded-lg px-3 py-2 text-sm outline-none
+  />
+</template>
diff --git a/packages/stage-ui/src/components/Form/Textarea/index.ts b/packages/stage-ui/src/components/Form/Textarea/index.ts
new file mode 100644
index 000000000..c1c52be47
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Textarea/index.ts
@@ -0,0 +1,2 @@
+export { default as BasicTextarea } from './Basic.vue'
+export { default as Textarea } from './Textarea.vue'
diff --git a/packages/stage-ui/src/components/Form/index.ts b/packages/stage-ui/src/components/Form/index.ts
index 342ac657f..a9e2c36f5 100644
--- a/packages/stage-ui/src/components/Form/index.ts
+++ b/packages/stage-ui/src/components/Form/index.ts
@@ -4,5 +4,6 @@ export * from './Input'
 export * from './Radio'
 export { default as RadioCardDetailManySelect } from './RadioCardDetailManySelect.vue'
 export * from './Range'
+export * from './Textarea'
 export { default as VoiceCard } from './VoiceCard.vue'
 export { default as VoiceCardManySelect } from './VoiceCardManySelect.vue'
diff --git a/packages/stage-ui/src/components/index.ts b/packages/stage-ui/src/components/index.ts
index 7e32af7c6..a4a9ba885 100644
--- a/packages/stage-ui/src/components/index.ts
+++ b/packages/stage-ui/src/components/index.ts
@@ -1,4 +1,3 @@
-export { default as BasicTextarea } from './BasicTextarea.vue'
 export * from './Button'
 export { default as Collapsable } from './Collapsable.vue'
 export * from './Form'