notionsoft-ui 1.0.27 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

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,
@@ -378,9 +410,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 +425,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/textarea/Textarea.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "./textarea";
+
+const meta: Meta<typeof Textarea> = {
+  title: "Form/Textarea",
+  component: Textarea,
+  args: {
+    placeholder: "Write something...",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+// ---------------------------------------
+// Default
+// ---------------------------------------
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+};
+
+// ---------------------------------------
+// With Label
+// ---------------------------------------
+export const WithLabel: Story = {
+  args: {
+    label: "Description",
+    placeholder: "Enter description...",
+  },
+};
+
+// ---------------------------------------
+// Required Hint (*)
+// ---------------------------------------
+export const WithRequired: Story = {
+  args: {
+    label: "Bio",
+    requiredHint: "*",
+    placeholder: "Tell us about yourself...",
+  },
+};
+
+// ---------------------------------------
+// With Error Message (AnimatedItem visible)
+// ---------------------------------------
+export const WithError: Story = {
+  args: {
+    label: "Comment",
+    errorMessage: "Comment is required",
+    placeholder: "Add a comment...",
+  },
+};
+
+// ---------------------------------------
+// ReadOnly Example
+// ---------------------------------------
+export const ReadOnly: Story = {
+  args: {
+    label: "Readonly Field",
+    readOnly: true,
+    value: "This textarea cannot be edited",
+  },
+};
+
+// ---------------------------------------
+// Custom Root Class via classNames
+// ---------------------------------------
+export const CustomRootClass: Story = {
+  args: {
+    label: "Custom Styled",
+    placeholder: "Root custom style applied",
+    classNames: {
+      rootDivClassName: "bg-blue-50 p-3 rounded-lg",
+    },
+  },
+};

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

@@ -0,0 +1,3 @@
+import Textarea from "./textarea";
+
+export default Textarea;

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

@@ -0,0 +1,121 @@
+import React, { useMemo } from "react";
+// import { cn } from "@/utils/cn";
+import { cn } from "../../utils/cn";
+import AnimatedItem from "../../notion-ui/animated-item";
+// import AnimatedItem from "../animated-item";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  requiredHint?: string;
+  label?: string;
+  errorMessage?: string;
+  classNames?: {
+    rootDivClassName?: string;
+  };
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      className,
+      requiredHint,
+      classNames,
+      errorMessage,
+      label,
+      readOnly,
+      ...rest
+    },
+    ref
+  ) => {
+    const hasError = !!errorMessage;
+    const { rootDivClassName } = classNames || {};
+    const heightStyle = {
+      required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+    };
+    const readOnlyStyle = readOnly && "opacity-40";
+
+    return (
+      <div
+        className={cn(
+          rootDivClassName,
+          "flex w-full flex-col justify-end",
+          readOnlyStyle
+        )}
+      >
+        <div
+          className={cn(
+            "relative text-start select-none h-fit rtl:text-lg-rtl ltr:text-lg-ltr"
+          )}
+        >
+          {/* Required Hint */}
+          {requiredHint && (
+            <span
+              className={cn(
+                "absolute font-semibold text-red-600 rtl:text-[13px] ltr:text-[11px] ltr:right-2.5 rtl:left-2.5",
+                heightStyle.required
+              )}
+            >
+              {requiredHint}
+            </span>
+          )}
+
+          {/* Label */}
+          {label && (
+            <label
+              htmlFor={label}
+              className={cn(
+                "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+              )}
+            >
+              {label}
+            </label>
+          )}
+
+          {/* Textarea Field */}
+
+          <textarea
+            ref={ref}
+            data-slot="textarea"
+            readOnly={readOnly}
+            className={cn(
+              "border-input placeholder:text-muted-foreground focus-visible:border-ring-0 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-70 md:text-sm focus-visible:border-tertiary/60 focus-visible:shadow-sm",
+              "placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold",
+              hasError && "border-red-400",
+              className
+            )}
+            {...rest}
+            disabled={readOnly}
+          />
+        </div>
+
+        {/* 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>
+    );
+  }
+);
+
+export default Textarea;