notionsoft-ui 1.0.27 → 1.0.30

package/src/notion-ui/multi-tab-textarea/multi.tab.textarea.stories.tsx

@@ -0,0 +1,340 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import MultiTabTextarea, { OptionalTabs } from "./multi-tab-textarea";
+import Tab from "../tab/tab";
+
+const meta: Meta<typeof MultiTabTextarea> = {
+  title: "Form/MultiTabTextarea",
+  component: MultiTabTextarea,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A textarea component with tabbed sections for managing multiple related text inputs. Supports mandatory and optional tabs with automatic RTL/LTR text direction detection.",
+      },
+    },
+  },
+  argTypes: {
+    onChanged: { action: "changed" },
+    onTabChanged: { action: "tab changed" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MultiTabTextarea>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      description_en: "This is a sample product description.",
+      description_es: "Esta es una descripción de producto de muestra.",
+      description_fr: "",
+    });
+
+    const [errors, setErrors] = useState<Map<string, string>>(
+      new Map([["description_fr", "French description is required"]])
+    );
+
+    const handleChange = (value: string, name: string) => {
+      setTabData((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    };
+
+    const handleTabChanged = (
+      key: string,
+      value: string,
+      optional?: boolean
+    ) => {
+      console.log("Tab changed:", { key, value, optional });
+    };
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          {...args}
+          name="description"
+          label="Product Description"
+          placeholder="Enter your description here..."
+          tabData={tabData}
+          errorData={errors}
+          onChanged={handleChange}
+          onTabChanged={handleTabChanged}
+        >
+          {/* Mandatory tabs */}
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+
+          {/* Optional tabs */}
+          <OptionalTabs>
+            <Tab>french</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const WithoutOptionalTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      bio_en: "I'm a software developer with 5 years of experience.",
+      bio_de: "Ich bin Softwareentwickler mit 5 Jahren Erfahrung.",
+    });
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="bio"
+          label="Biography"
+          placeholder="Tell us about yourself..."
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>german</Tab>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const WithRTLTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      content_en: "Welcome to our international platform.",
+      content_ar: "مرحبًا بكم في منصتنا الدولية.",
+      content_fa: "به پلتفرم بین‌المللی ما خوش آمدید.",
+    });
+
+    const [errors, setErrors] = useState<Map<string, string>>(
+      new Map([
+        ["content_ar", "Arabic content must be at least 20 characters"],
+        ["content_fa", "فارسی باید حداقل 20 کاراکتر باشد"],
+      ])
+    );
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="content"
+          label="Content"
+          placeholder="Type your content here..."
+          tabData={tabData}
+          errorData={errors}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <OptionalTabs>
+            <Tab>arabic</Tab>
+            <Tab>farsi</Tab>
+            <Tab>pashto</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const WithMultipleOptionalTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      product_details_basic:
+        "A premium quality product with excellent durability.",
+      product_details_advanced:
+        "Made from 100% recycled materials. Water-resistant up to 50m.",
+      product_details_technical:
+        "Material: Polycarbonate\nWeight: 150g\nDimensions: 10x5x2cm",
+      product_details_seo:
+        "Premium durable product for everyday use. Best value for money.",
+    });
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="product_details"
+          label="Product Details"
+          placeholder="Enter product information..."
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+          classNames={{
+            tabsDivClassName: "bg-gray-50 p-2 rounded-lg",
+            rootDivClassName: "p-4 border rounded-lg",
+          }}
+        >
+          <Tab>basic</Tab>
+          <Tab>advanced</Tab>
+          <OptionalTabs>
+            <Tab>technical</Tab>
+            <Tab>seo</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const WithErrorStates: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      review_en: "This product is",
+      review_es: "Este producto es",
+      review_fr: "Ce produit est",
+    });
+
+    const [errors, setErrors] = useState<Map<string, string>>(
+      new Map([
+        ["review_en", "Review must be at least 20 characters"],
+        ["review_es", "La reseña debe tener al menos 20 caracteres"],
+        ["review_fr", "L'avis doit comporter au moins 20 caractères"],
+      ])
+    );
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="review"
+          label="Product Review"
+          placeholder="Write your review here..."
+          tabData={tabData}
+          errorData={errors}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+          <OptionalTabs>
+            <Tab>french</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const DisabledState: Story = {
+  render: () => {
+    const [tabData] = useState<Record<string, string>>({
+      template_en:
+        "This is a read-only template.\nYou cannot edit this content.",
+      template_es:
+        "Esta es una plantilla de solo lectura.\nNo puedes editar este contenido.",
+    });
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="template"
+          label="Email Template"
+          placeholder="Cannot edit - this is read-only"
+          tabData={tabData}
+          disabled
+          onChanged={() => {}}
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const CustomPlaceholders: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      instructions_en: "",
+      instructions_ar: "",
+      instructions_fa: "",
+    });
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="instructions"
+          label="Instructions"
+          placeholder="Default placeholder..."
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>arabic</Tab>
+          <OptionalTabs>
+            <Tab>farsi</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const InFormContext: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      name: "",
+      description: "",
+    });
+
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      description_en: "",
+      description_es: "",
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      console.log({
+        ...formData,
+        ...tabData,
+      });
+    };
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[500px] space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Product Name</label>
+          <input
+            type="text"
+            className="w-full px-3 py-2 border rounded-md"
+            value={formData.name}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, name: e.target.value }))
+            }
+            placeholder="Enter product name"
+          />
+        </div>
+
+        <MultiTabTextarea
+          name="description"
+          label="Product Description"
+          placeholder="Describe your product..."
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+        </MultiTabTextarea>
+
+        <button
+          type="submit"
+          className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        >
+          Save Product
+        </button>
+      </form>
+    );
+  },
+};

package/src/notion-ui/phone-input/PhoneInput.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PhoneInput from "./phone-input";
+
+const meta: Meta<typeof PhoneInput> = {
+  title: "Form/PhoneInput",
+  component: PhoneInput,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    placeholder: "Phone number",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PhoneInput>;
+
+// ---------------------------------------------------------------------
+// Default
+// ---------------------------------------------------------------------
+export const Default: Story = {
+  args: {
+    placeholder: "Enter phone number",
+  },
+};
+
+// ---------------------------------------------------------------------
+// With Label
+// ---------------------------------------------------------------------
+export const WithLabel: Story = {
+  args: {
+    label: "Phone Number",
+  },
+};
+
+// ---------------------------------------------------------------------
+// Required Hint (*)
+// ---------------------------------------------------------------------
+export const Required: Story = {
+  args: {
+    label: "Phone Number",
+    requiredHint: "*",
+  },
+};
+
+// ---------------------------------------------------------------------
+// With Error
+// ---------------------------------------------------------------------
+export const WithError: Story = {
+  args: {
+    label: "Contact Number",
+    errorMessage: "Invalid phone number",
+  },
+};
+
+// ---------------------------------------------------------------------
+// Pre-filled value
+// ---------------------------------------------------------------------
+export const PreFilled: Story = {
+  args: {
+    label: "Phone Number",
+    value: "+93 700000000",
+  },
+};
+
+// ---------------------------------------------------------------------
+// Sizes (sm, md, lg)
+// ---------------------------------------------------------------------
+export const Small: Story = {
+  args: {
+    label: "Small",
+    measurement: "sm",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    label: "Medium",
+    measurement: "md",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: "Large",
+    measurement: "lg",
+  },
+};
+
+// ---------------------------------------------------------------------
+// Read-Only
+// ---------------------------------------------------------------------
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    value: "+93 700000000",
+    label: "Read-only Phone",
+  },
+};
+
+// ---------------------------------------------------------------------
+// Custom Root Class Styles
+// ---------------------------------------------------------------------
+export const CustomRootClass: Story = {
+  args: {
+    label: "Custom Style",
+    classNames: {
+      rootDivClassName: "p-4 bg-blue-50 rounded-md",
+    },
+  },
+};

package/src/notion-ui/phone-input/phone-input.tsx

@@ -1,7 +1,7 @@
 import { defaultCountries } from "./country-data";
 import { LazyFlag } from "./lazy-flag";
 import type { ParsedCountry } from "./type";
-import { cn } from "@/utils/cn";
+import { cn } from "../../utils/cn";
 import React, {
   useState,
   useRef,
@@ -10,6 +10,7 @@ import React, {
   useMemo,
 } from "react";
 import { createPortal } from "react-dom";
+import AnimatedItem from "../animated-item";
 
 interface VirtualListProps {
   items: ParsedCountry[];
@@ -100,10 +101,19 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
 }) => {
   const { rootDivClassName, iconClassName = "size-4" } = classNames || {};
   const [open, setOpen] = useState(false);
-  const [country, setCountry] = useState<ParsedCountry>(defaultCountries[0]);
   const [highlightedIndex, setHighlightedIndex] = useState<number>(0);
+  const initialCountry = (() => {
+    if (typeof value === "string" && value.startsWith("+")) {
+      const matched = defaultCountries.find((c) =>
+        value.startsWith("+" + c.dialCode)
+      );
+      return matched || defaultCountries[0];
+    }
+    return defaultCountries[0];
+  })();
+  const [country, setCountry] = useState<ParsedCountry>(initialCountry);
   const [phone, setPhone] = useState<string>(
-    typeof value == "string" ? value : ""
+    typeof value === "string" ? value : `+${initialCountry.dialCode}`
   );
   const containerRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -118,6 +128,26 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
   const chooseCountry = (c: ParsedCountry) => {
     setCountry(c);
     setOpen(false);
+
+    setPhone((prev) => {
+      const oldDialRegex = new RegExp(`^\\+${country.dialCode}`);
+      const restNumber = prev.replace(oldDialRegex, "");
+      const newValue = `+${c.dialCode}${restNumber}`;
+      if (onChange && inputRef.current) {
+        const fakeEvent = {
+          target: {
+            ...inputRef.current,
+            name: inputRef.current.name,
+            value: newValue,
+          },
+        } as React.ChangeEvent<HTMLInputElement>;
+
+        onChange(fakeEvent);
+      }
+
+      return newValue;
+    });
+
     inputRef.current?.focus();
   };
 
@@ -244,39 +274,40 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
       measurement == "lg"
         ? {
             height: "50px",
-            endContent: label
-              ? "ltr:top-[48px] rtl:top-[54px]-translate-y-1/2"
-              : "top-[26px] -translate-y-1/2",
-            startContent: label
-              ? "ltr:top-[48px] rtl:top-[54px] -translate-y-1/2"
-              : "top-[26px] -translate-y-1/2",
             required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
           }
         : measurement == "md"
         ? {
             height: "44px",
-            endContent: label
-              ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
-              : "top-[22px] -translate-y-1/2",
-            startContent: label
-              ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
-              : "top-[22px] -translate-y-1/2",
             required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
           }
         : {
             height: "40px",
-            endContent: label
-              ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
-              : "top-[20px] -translate-y-1/2",
-            startContent: label
-              ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
-              : "top-[20px] -translate-y-1/2",
             required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
           },
     [measurement, label]
   );
   const readOnlyStyle = readOnly && "opacity-40";
 
+  const inputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let val = e.target.value;
+    let name = e.target.name;
+
+    // Ensure dial code always at start
+    if (!val.startsWith(`+${country.dialCode}`)) {
+      val = `+${country.dialCode}${val.replace(/^\+\d*/, "")}`;
+    }
+
+    setPhone(val);
+    if (onChange) {
+      // emit event
+      const fakeEvent = {
+        ...e,
+        target: { ...e.target, name: name, value: val },
+      };
+      onChange(fakeEvent as React.ChangeEvent<HTMLInputElement>);
+    }
+  };
   return (
     <div
       className={cn(
@@ -329,11 +360,12 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
         <input
           ref={inputRef}
           type="tel"
-          value={phone}
-          onChange={(e) => {
-            if (onChange) onChange(e);
-            setPhone(e.target.value);
-          }}
+          value={
+            phone.startsWith(`+${country.dialCode}`)
+              ? phone
+              : `+${country.dialCode}`
+          }
+          onChange={inputChanged}
           placeholder="Phone number"
           style={{
             height: heightStyle.height,
@@ -351,6 +383,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
           )}
           {...rest}
           disabled={readOnly}
+          dir="ltr"
         />
       </div>
 
@@ -378,9 +411,8 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
               renderRow={(c, i) => (
                 <div
                   onClick={() => chooseCountry(c)}
-                  onMouseEnter={() => setHighlightedIndex(i)}
                   className={`flex ltr:text-sm rtl:text-sm rtl:font-semibold items-center gap-2 px-2 py-1 cursor-pointer ${
-                    i == highlightedIndex ? "bg-primary/5" : ""
+                    i == highlightedIndex && "bg-primary/5"
                   }`}
                   role="option"
                   aria-selected={i === highlightedIndex}
@@ -394,6 +426,31 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
           </div>,
           document.body
         )}
+      {/* Error Message */}
+      {hasError && (
+        <AnimatedItem
+          springProps={{
+            from: {
+              opacity: 0,
+              transform: "translateY(-8px)",
+            },
+            config: {
+              mass: 1,
+              tension: 210,
+              friction: 20,
+            },
+            to: {
+              opacity: 1,
+              transform: "translateY(0px)",
+            },
+          }}
+          intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
+        >
+          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+            {errorMessage}
+          </h1>
+        </AnimatedItem>
+      )}
     </div>
   );
 };

package/src/notion-ui/tab/index.ts

@@ -0,0 +1,3 @@
+import Tab from "./tab";
+
+export default Tab;

package/src/notion-ui/tab/tab.tsx

@@ -0,0 +1,46 @@
+import { cn } from "../../utils/cn";
+import { Asterisk, CircleDot } from "lucide-react";
+
+export type TabState = "active" | "selected" | "unselected";
+
+interface TabProps {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  translation?: string;
+
+  state?: TabState; // <-- now strongly typed
+  optional?: boolean;
+}
+export default function Tab({
+  children,
+  className,
+  onClick,
+  translation,
+  state = "unselected",
+  optional = false,
+}: TabProps) {
+  // Icon for this tab
+  const Icon = optional ? CircleDot : Asterisk;
+
+  const baseClass = cn(
+    "capitalize transition px-3 py-1.5 ltr:text-xs rtl:text-[13px] sm:rtl:text-sm rtl:font-semibold px-2 rounded cursor-pointer shadow-md dark:shadow-none dark:border dark:hover:opacity-80 shadow-primary/20 hover:shadow-sm flex items-center gap-1",
+
+    state === "active"
+      ? "text-primary-foreground bg-tertiary"
+      : state === "selected"
+      ? "bg-primary/50 text-primary-foreground/90"
+      : "bg-primary/10 text-primary/50",
+
+    className
+  );
+
+  return (
+    <div onClick={onClick} className={baseClass}>
+      <Icon size={14} className="opacity-70 size-3 text-current" />
+      {translation ?? children}
+    </div>
+  );
+}
+
+Tab.displayName = "Tab";