feat: Add Textarea component and dynamic Storybook manager-head setup

- Introduce `Textarea` component with forwardRef and styles for reusability.
- Add script to dynamically configure Storybook `manager-head` for dev and build modes.
- Update `package.json` to integrate the setup script in Storybook commands.

Author: tiranuom

.storybook/manager-head.build.html

@@ -0,0 +1,3 @@
+<link rel="icon" href="/scheduler-icon.svg" type="image/svg+xml" />
+<title>React Cron Field</title>
+<base href="/react-cron-field/"/>

.storybook/manager-head.dev.html

@@ -0,0 +1,2 @@
+<link rel="icon" href="/scheduler-icon.svg" type="image/svg+xml" />
+<title>React Cron Field</title>

.storybook/manager-head.original.html

@@ -0,0 +1,3 @@
+<link rel="icon" href="/scheduler-icon.svg" type="image/svg+xml" />
+<title>React Cron Field</title>
+<base href="/react-cron-field/"/>

package.json

@@ -22,8 +22,8 @@
     "type-check": "tsc -b",
     "lint": "eslint .",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "storybook": "./scripts/setup-storybook-head.sh dev && storybook dev -p 6006",
+    "build-storybook": "./scripts/setup-storybook-head.sh build && storybook build",
     "deploy-storybook": "npm run build-storybook && gh-pages -d storybook-static"
   },
   "peerDependencies": {

scripts/setup-storybook-head.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+# Define paths
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+STORYBOOK_DIR="$ROOT_DIR/.storybook"
+MANAGER_HEAD="$STORYBOOK_DIR/manager-head.html"
+MANAGER_HEAD_DEV="$STORYBOOK_DIR/manager-head.dev.html"
+MANAGER_HEAD_BUILD="$STORYBOOK_DIR/manager-head.build.html"
+
+# Check if this is the first run and we need to create the build version
+if [ ! -f "$MANAGER_HEAD_BUILD" ]; then
+  # Create manager-head.build.html with base href tag
+  cp "$MANAGER_HEAD" "$MANAGER_HEAD_BUILD"
+  
+  # Ensure it has the base href tag
+  if ! grep -q "<base href=\"/react-cron-field/\"/>" "$MANAGER_HEAD_BUILD"; then
+    echo "Adding base href tag to $MANAGER_HEAD_BUILD"
+    # If there's no base href tag, add it after the title tag
+    sed -i 's/<title>React Cron Field<\/title>/<title>React Cron Field<\/title>\n<base href="\/react-cron-field\/"\/>/g' "$MANAGER_HEAD_BUILD"
+  fi
+fi
+
+# Check the mode parameter
+MODE=$1
+
+if [ "$MODE" == "dev" ]; then
+  echo "Setting up Storybook for development mode"
+  cp "$MANAGER_HEAD_DEV" "$MANAGER_HEAD"
+elif [ "$MODE" == "build" ]; then
+  echo "Setting up Storybook for build mode"
+  cp "$MANAGER_HEAD_BUILD" "$MANAGER_HEAD"
+else
+  echo "Usage: $0 [dev|build]"
+  exit 1
+fi
+
+echo "Storybook manager-head.html configured for $MODE mode"

src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }