notionsoft-ui 1.0.18 → 1.0.20

package/package.json

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

package/src/notion-ui/multi-select-input/multi-select-input.tsx

@@ -120,7 +120,6 @@ function MultiSelectInputInner<T = any>(
   const [pendingSelection, setPendingSelection] = useState<T[] | T | null>(
     null
   );
-
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);

package/src/notion-ui/password-input/index.ts

@@ -0,0 +1,3 @@
+import PasswordInput from "./password-input";
+
+export default PasswordInput;

package/src/notion-ui/password-input/password-input.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PasswordInput, { PasswordInputProps } from "./password-input";
+
+const meta: Meta<PasswordInputProps> = {
+  title: "Form/PasswordInput",
+  component: PasswordInput,
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      control: "text",
+      description: "Initial password value",
+    },
+    parentClassName: {
+      control: "text",
+      description: "Wrapper className",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<PasswordInputProps>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter password...",
+    parentClassName: "",
+    text: {
+      strong_password: "Strong password",
+      enter_password: "Enter a password",
+      weak_password: "Weak password",
+      medium_password: "Medium strength",
+      must_contain: "Your password must contain:",
+      at_lea_8_char: "At least 8 characters",
+      at_lea_1_num: "At least one number",
+      at_lea_1_lowcas_lett: "At least one lowercase letter",
+      at_lea_1_upcas_lett: "At least one uppercase letter",
+    },
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    placeholder: "Enter password...",
+    text: {
+      strong_password: "Strong password",
+      enter_password: "Enter a password",
+      weak_password: "Weak password",
+      medium_password: "Medium strength",
+      must_contain: "Your password must contain:",
+      at_lea_8_char: "At least 8 characters",
+      at_lea_1_num: "At least one number",
+      at_lea_1_lowcas_lett: "At least one lowercase letter",
+      at_lea_1_upcas_lett: "At least one uppercase letter",
+    },
+  },
+};

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

@@ -0,0 +1,142 @@
+import Input from "../input";
+import { InputProps } from "../input/input";
+import { Check, X } from "lucide-react";
+import React, { useMemo, useState } from "react";
+type PasswordInputText = {
+  strong_password: string;
+  enter_password: string;
+  weak_password: string;
+  medium_password: string;
+  must_contain: string;
+  at_lea_8_char: string;
+  at_lea_1_num: string;
+  at_lea_1_lowcas_lett: string;
+  at_lea_1_upcas_lett: string;
+};
+export interface PasswordInputProps extends InputProps {
+  text: PasswordInputText;
+}
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  (props, ref: any) => {
+    const { parentClassName, defaultValue, text, onChange, ...rest } = props;
+    const [value, setValue] = useState(
+      typeof defaultValue === "string" ? defaultValue : ""
+    );
+    const strength = checkStrength(value, text);
+
+    const strengthScore = useMemo(() => {
+      return passwordStrengthScore(strength);
+    }, [strength]);
+
+    const getStrengthColor = (score: number) => {
+      if (score === 0) return "bg-border";
+      if (score <= 1) return "bg-red-500";
+      if (score <= 2) return "bg-orange-500";
+      if (score === 3) return "bg-amber-500";
+      return "bg-emerald-500";
+    };
+
+    const getStrengthText = (score: number) => {
+      if (score === 0) return text.enter_password;
+      if (score <= 2) return text.weak_password;
+      if (score === 3) return text.medium_password;
+      return text.strong_password;
+    };
+    return (
+      <div className={`w-full ${parentClassName}`}>
+        <Input
+          value={value}
+          ref={ref}
+          onChange={
+            onChange
+              ? onChange
+              : (event: React.ChangeEvent<HTMLInputElement>) =>
+                  setValue(event.target.value)
+          }
+          aria-invalid={strengthScore < 4}
+          aria-describedby="password-strength"
+          {...rest}
+        />
+        {/* Password strength indicator */}
+        <div
+          className="mb-4 mt-3 h-1 w-full overflow-hidden rounded-full bg-border"
+          role="progressbar"
+          aria-valuenow={strengthScore}
+          aria-valuemin={0}
+          aria-valuemax={4}
+          aria-label="Password strength"
+        >
+          <div
+            className={`h-full ${getStrengthColor(
+              strengthScore
+            )} transition-all duration-500 ease-out`}
+            style={{ width: `${(strengthScore / 4) * 100}%` }}
+          ></div>
+        </div>
+
+        {/* Password strength description */}
+        <p
+          id="password-strength"
+          className="mb-2 text-start rtl:text-xl-rtl ltr:text-xl-ltr font-medium text-foreground"
+        >
+          {`${getStrengthText(strengthScore)}. ${text.must_contain}`}
+        </p>
+
+        {/* Password requirements list */}
+        <ul className="space-y-1.5" aria-label="Password requirements">
+          {strength.map((req, index) => (
+            <li key={index} className="flex items-center gap-2">
+              {req.met ? (
+                <Check
+                  size={16}
+                  className="text-emerald-500"
+                  aria-hidden="true"
+                />
+              ) : (
+                <X
+                  size={16}
+                  className="text-muted-foreground/80"
+                  aria-hidden="true"
+                />
+              )}
+              <span
+                className={`ltr:text-xs rtl:text-lg-rtl ${
+                  req.met
+                    ? "text-emerald-600 ltr:text-xl-ltr"
+                    : "text-muted-foreground"
+                }`}
+              >
+                {req.text}
+                <span className="sr-only rtl:text-xl-rtl">
+                  {req.met ? " - Requirement met" : " - Requirement not met"}
+                </span>
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+);
+
+export const checkStrength = (pass: string, text: PasswordInputText) => {
+  const requirements = [
+    { regex: /.{8,}/, text: text.at_lea_8_char },
+    { regex: /[0-9]/, text: text.at_lea_1_num },
+    { regex: /[a-z]/, text: text.at_lea_1_lowcas_lett },
+    { regex: /[A-Z]/, text: text.at_lea_1_upcas_lett },
+  ];
+
+  return requirements.map((req) => ({
+    met: req.regex.test(pass),
+    text: req.text,
+  }));
+};
+export const passwordStrengthScore = (
+  strength: {
+    met: boolean;
+    text: any;
+  }[]
+): number => strength.filter((req) => req.met).length;
+
+export default PasswordInput;

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

@@ -1,8 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { buildNestedFiltersQuery, cn, useDebounce } from "../../utils/cn";
 import Input from "../input";
-import { Eraser, ListFilter, X } from "lucide-react";
+import { Eraser, ListFilter, LoaderCircle, X } from "lucide-react";
 import CircleLoader from "../circle-loader";
 
 export type NastranInputSize = "sm" | "md" | "lg";
@@ -24,6 +30,7 @@ export interface BaseSearchInputProps<T = { id: string; name: string }>
   filters?: FilterItem[];
   onFiltersChange?: (filtersState: Record<string, boolean>) => void;
   debounceValue?: number;
+  errorMessage?: string;
   parentClassName?: string;
   text?: {
     fetch?: string;
@@ -32,6 +39,7 @@ export interface BaseSearchInputProps<T = { id: string; name: string }>
     clearFilters?: string;
   };
   endContent?: React.ReactNode;
+  startContent?: React.ReactNode;
   STORAGE_KEY?: string;
 }
 
@@ -74,6 +82,8 @@ function SearchInputInner<T = { id: string; name: string }>(
     endContent,
     STORAGE_KEY = "FILTER_STORAGE_KEY",
     apiConfig,
+    errorMessage,
+    startContent,
     itemOnClick,
     ...props
   }: SearchInputProps<T>,
@@ -85,6 +95,7 @@ function SearchInputInner<T = { id: string; name: string }>(
   const [isFetching, setIsFetching] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
   const [items, setItems] = useState<T[]>([]);
+  const [shouldFetch, setShouldFetch] = useState(false);
 
   const [filtersState, setFiltersState] = useState<Record<string, boolean>>(
     () => {
@@ -93,6 +104,7 @@ function SearchInputInner<T = { id: string; name: string }>(
       return filters.reduce((acc, f) => ({ ...acc, [f.key]: false }), {});
     }
   );
+  const [dropDirection, setDropDirection] = useState<"down" | "up">("down");
 
   const [maxFetch, setMaxFetch] = useState<number | "">(() => {
     const saved = localStorage.getItem(`${STORAGE_KEY}_MAX_FETCH`);
@@ -108,6 +120,8 @@ function SearchInputInner<T = { id: string; name: string }>(
 
   // Fetch items
   useEffect(() => {
+    if (!shouldFetch) return; // ⛔ skip until first focus
+
     const get = async () => {
       setIsFetching(true);
       try {
@@ -131,7 +145,7 @@ function SearchInputInner<T = { id: string; name: string }>(
 
           const combinedParams = new URLSearchParams({
             q: debouncedValue,
-            maxFetch: maxFetch?.toString() ?? "",
+            max: maxFetch?.toString() ?? "",
             ...apiConfig.params,
           }).toString();
 
@@ -141,6 +155,7 @@ function SearchInputInner<T = { id: string; name: string }>(
 
           const res = await window.fetch(url, {
             headers: apiConfig.headers,
+            credentials: "include",
           });
           data = await res.json();
         }
@@ -155,17 +170,45 @@ function SearchInputInner<T = { id: string; name: string }>(
     };
 
     get();
-  }, [debouncedValue, fetch, apiConfig, filtersState, maxFetch]);
-
+  }, [debouncedValue, fetch, apiConfig, filtersState, maxFetch, shouldFetch]);
+  useLayoutEffect(() => {
+    if (dropdownRef.current) {
+      updatePosition();
+    }
+  }, [items]);
   const updatePosition = () => {
-    const el = containerRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    setPosition({
-      top: rect.bottom + window.scrollY,
-      left: rect.left + window.scrollX,
-      width: rect.width,
-    });
+    const inputEl = containerRef.current;
+    const dropdownEl = dropdownRef.current;
+    if (!inputEl || !dropdownEl) return;
+
+    const rect = inputEl.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const gap = 4; // distance between input and dropdown
+
+    // Actual dropdown height based on content, capped at 260px
+    const dropdownHeight = Math.min(dropdownEl.offsetHeight || 0, 260);
+
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    // Decide direction
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      // Flip above
+      setDropDirection("up");
+      setPosition({
+        top: rect.top + window.scrollY - dropdownHeight - gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    } else {
+      // Dropdown below
+      setDropDirection("down");
+      setPosition({
+        top: rect.bottom + window.scrollY + gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
   };
 
   useEffect(() => {
@@ -175,6 +218,10 @@ function SearchInputInner<T = { id: string; name: string }>(
       setIsFocused(true);
       setShowFilters(false);
       updatePosition();
+      // 🟢 First-time fetch trigger
+      if (!shouldFetch) {
+        setShouldFetch(true);
+      }
     };
     el.addEventListener("focus", handleFocus);
     return () => el.removeEventListener("focus", handleFocus);
@@ -233,6 +280,7 @@ function SearchInputInner<T = { id: string; name: string }>(
   const dropdown =
     isFocused || showFilters
       ? Dropdown(
+          dropDirection,
           position,
           isFetching,
           text,
@@ -258,9 +306,15 @@ function SearchInputInner<T = { id: string; name: string }>(
           {...props}
           value={inputValue}
           onChange={inputOnChange}
+          errorMessage={errorMessage}
+          startContent={startContent}
           endContent={
             <div className="flex items-center gap-1 relative ltr:-right-1 rtl:-left-1">
-              {isFocused && endIcon}
+              {!showFilters && isFetching ? (
+                <LoaderCircle className="size-[38px] p-3 animate-spin" />
+              ) : (
+                isFocused && endIcon
+              )}
               {filters.length != 0 && (
                 <ListFilter
                   onClick={() => {
@@ -294,6 +348,7 @@ export default SearchInputForward;
 
 /* Dropdown */
 const Dropdown = <T,>(
+  dropDirection: string,
   position: { top: number; left: number; width: number },
   isFetching: boolean,
   text: {
@@ -315,16 +370,15 @@ const Dropdown = <T,>(
   onFiltersChange?: (filtersState: Record<string, boolean>) => void,
   itemOnClick?: (item: T) => void
 ) =>
+  !isFetching &&
   createPortal(
     <div
       ref={dropdownRef}
-      className="absolute z-9999 border border-border rounded-b bg-card shadow-lg pt-3 pb-2"
-      style={{
-        top: position.top,
-        left: position.left,
-        width: position.width,
-        position: "absolute",
-      }}
+      className={cn(
+        "absolute z-50 border border-border bg-card shadow-lg pt-3 pb-2",
+        dropDirection === "down" ? "rounded-b" : "rounded-t"
+      )}
+      style={{ top: position.top, left: position.left, width: position.width }}
     >
       {showFilters && filters.length > 0 && (
         <div className="pb-3 px-3 flex flex-col gap-2 text-sm">
@@ -392,9 +446,6 @@ const Dropdown = <T,>(
           )}
         </div>
       )}
-
-      {!showFilters && isFetching && <CircleLoader label={text.fetch} />}
-
       {!showFilters && !isFetching && (
         <div className="max-h-60 overflow-auto">
           {items.length > 0 ? (