notionsoft-ui 1.0.33 → 1.0.35

package/src/notion-ui/cached-image/cached-image.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CachedImage, { ImageProps } from "./cached-image";
+
+/* ---------------------------------- */
+/* Helpers */
+/* ---------------------------------- */
+
+// Basic fetch wrapper
+const fetchImage = async (src: string): Promise<Response> => {
+  return fetch(src);
+};
+
+// Delayed fetch to show shimmer/loading
+const delayedFetch = async (src: string): Promise<Response> => {
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  return fetch(src);
+};
+
+/* ---------------------------------- */
+/* Meta */
+/* ---------------------------------- */
+
+const meta: Meta<ImageProps> = {
+  title: "Media/CachedImage",
+  component: CachedImage,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    className: {
+      control: "text",
+    },
+    classNames: {
+      control: "object",
+    },
+    fetch: {
+      table: { disable: true },
+    },
+    apiConfig: {
+      table: { disable: true },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ImageProps>;
+
+/* ---------------------------------- */
+/* Stories */
+/* ---------------------------------- */
+
+// Default (fetch + cache)
+export const Default: Story = {
+  args: {
+    src: "/images/sample.jpg",
+    fetch: fetchImage,
+    className: "w-40 h-40 rounded-md",
+  },
+};
+
+// API config variant
+export const WithApiConfig: Story = {
+  args: {
+    apiConfig: {
+      src: "/images/sample.jpg",
+    },
+    className: "w-40 h-40 rounded-lg",
+  },
+};
+
+// Cross-origin image (bypasses cache)
+export const CrossOrigin: Story = {
+  args: {
+    src: "https://picsum.photos/200",
+    fetch: fetchImage,
+    className: "w-40 h-40 rounded-full",
+  },
+};
+
+// Loading / shimmer state
+export const LoadingState: Story = {
+  args: {
+    src: "/images/sample.jpg",
+    fetch: delayedFetch,
+    className: "w-32 h-32",
+    classNames: {
+      shimmerClassName: "bg-gray-200",
+      shimmerIconClassName: "stroke-gray-400",
+    },
+  },
+};
+
+// Small size
+export const Small: Story = {
+  args: {
+    src: "/images/sample.jpg",
+    fetch: fetchImage,
+    className: "w-16 h-16 rounded",
+  },
+};
+
+// Large size
+export const Large: Story = {
+  args: {
+    src: "/images/sample.jpg",
+    fetch: fetchImage,
+    className: "w-64 h-64 rounded-xl",
+  },
+};

package/src/notion-ui/cached-image/cached-image.tsx

@@ -0,0 +1,213 @@
+import Shimmer from "@/components/notion-ui/shimmer";
+import { cn } from "@/utils/cn";
+import React, { useEffect, useState, forwardRef, useRef } from "react";
+
+/* ---------------------------------- */
+/* Types */
+/* ---------------------------------- */
+
+interface FetchConfig {
+  src: string;
+  headers?: Record<string, string>;
+  params?: string;
+}
+
+interface BaseImageProps extends React.HTMLAttributes<HTMLDivElement> {
+  classNames?: {
+    shimmerClassName?: string;
+    shimmerIconClassName?: string;
+  };
+}
+
+interface FetchImageProps extends BaseImageProps {
+  src: string;
+  fetch: (src: string) => Promise<Response>;
+  apiConfig?: never;
+}
+
+interface ApiConfigImageProps extends BaseImageProps {
+  apiConfig: FetchConfig;
+  src?: never;
+  fetch?: never;
+}
+
+export type ImageProps = FetchImageProps | ApiConfigImageProps;
+
+/* ---------------------------------- */
+/* Cache helpers */
+/* ---------------------------------- */
+
+const IMAGE_CACHE = "image-cache-v1";
+
+async function getCachedImage(url: string): Promise<string | null> {
+  const cache = await caches.open(IMAGE_CACHE);
+  const cached = await cache.match(url);
+
+  if (!cached) return null;
+
+  const blob = await cached.blob();
+  return URL.createObjectURL(blob);
+}
+
+async function cacheImage(url: string, response: Response) {
+  const cache = await caches.open(IMAGE_CACHE);
+  await cache.put(url, response.clone());
+}
+
+/* ---------------------------------- */
+/* Utils */
+/* ---------------------------------- */
+
+function isCrossOrigin(url: string): boolean {
+  try {
+    return new URL(url, window.location.href).origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}
+
+/* ---------------------------------- */
+/* Component */
+/* ---------------------------------- */
+
+const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
+  const { className, classNames, fetch, apiConfig, src, ...imgProps } = props;
+
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const { shimmerClassName, shimmerIconClassName } = classNames || {};
+
+  const fetchRef = useRef(fetch);
+  useEffect(() => {
+    fetchRef.current = fetch;
+  }, [fetch]);
+
+  async function loadImage() {
+    try {
+      const resolvedSrc = apiConfig?.src ?? src;
+
+      if (!resolvedSrc) {
+        setImageUrl(null);
+        return;
+      }
+
+      /* ---------------------------------- */
+      /* Cross-origin → use <img src> */
+      /* ---------------------------------- */
+      if (isCrossOrigin(resolvedSrc)) {
+        setImageUrl(resolvedSrc);
+        setLoading(false);
+        return;
+      }
+
+      /* ---------------------------------- */
+      /* Cache Storage */
+      /* ---------------------------------- */
+      const cached = await getCachedImage(resolvedSrc);
+      if (cached) {
+        setImageUrl(cached);
+        setLoading(false);
+        return;
+      }
+
+      /* ---------------------------------- */
+      /* Fetch */
+      /* ---------------------------------- */
+      const response = fetchRef.current
+        ? await fetchRef.current(resolvedSrc)
+        : await window.fetch(resolvedSrc, {
+            headers: apiConfig?.headers,
+          });
+
+      const contentType = response.headers.get("content-type") ?? "";
+
+      if (
+        !response.ok ||
+        (!contentType.startsWith("image/") &&
+          contentType !== "application/octet-stream")
+      ) {
+        throw new Error(`Invalid image response: ${contentType}`);
+      }
+
+      await cacheImage(resolvedSrc, response.clone());
+
+      const blob = await response.blob();
+      setImageUrl(URL.createObjectURL(blob));
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    loadImage();
+  }, [src, apiConfig?.src]);
+
+  /* ---------------------------------- */
+  /* Cleanup */
+  /* ---------------------------------- */
+
+  useEffect(() => {
+    return () => {
+      if (imageUrl?.startsWith("blob:")) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, [imageUrl]);
+
+  /* ---------------------------------- */
+  /* UI */
+  /* ---------------------------------- */
+
+  if (loading || !imageUrl) {
+    const stop = loading ? false : !imageUrl && true;
+
+    return (
+      <Shimmer
+        className={cn(
+          "bg-primary/10 mx-auto flex p-2 items-center size-8 rounded border border-tertiary/10",
+          shimmerClassName
+        )}
+        stop={stop}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(
+            "stroke-primary/40 mx-auto stroke-2",
+            shimmerIconClassName
+          )}
+        >
+          <rect x="1" y="1" width="22" height="22" rx="2" ry="2" />
+          <polyline points="3,20 8,13 13,17 17,12 21,16" />
+          <circle cx="16" cy="6" r="2" />
+        </svg>
+      </Shimmer>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      // src={imageUrl}
+      style={{ backgroundImage: `url(${imageUrl})` }}
+      // alt={alt}
+      className={cn(
+        "cursor-pointer shadow-lg bg-cover bg-center mx-auto",
+        className
+      )}
+      {...imgProps}
+    />
+  );
+});
+
+CachedImage.displayName = "CachedImage";
+
+export default CachedImage;

package/src/notion-ui/cached-image/index.ts

@@ -0,0 +1,3 @@
+import CachedImage from "./cached-image";
+
+export default CachedImage;

package/src/notion-ui/cached-image/utils.ts

@@ -0,0 +1,7 @@
+export function isCrossOrigin(url: string): boolean {
+  try {
+    return new URL(url, window.location.href).origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}

package/src/notion-ui/date-picker/DatePicker.stories.tsx

@@ -42,7 +42,6 @@ export const Default: StoryObj<DatePickerProps> = {
   render: (args) => <Wrapper {...args} />,
   args: {
     placeholder: "Select date...",
-    required: false,
     label: "Date",
     measurement: "md",
   },
@@ -83,7 +82,6 @@ export const WithError: StoryObj<DatePickerProps> = {
     placeholder: "Select date...",
     label: "Birthday",
     errorMessage: "This field is required",
-    required: true,
     requiredHint: "*",
   },
 };

package/src/notion-ui/date-picker/date-picker.tsx

@@ -212,7 +212,7 @@ export default function DatePicker(props: DatePickerProps) {
         <label
           htmlFor={label}
           className={cn(
-            "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+            "font-semibold ltr:text-[13px] rtl:text-[18px] inline-block pb-1"
           )}
         >
           {label}
@@ -224,18 +224,18 @@ export default function DatePicker(props: DatePickerProps) {
           height: heightStyle.height,
         }}
         className={cn(
-          "flex items-center text-start px-3 border select-none rounded-sm rtl:text-lg-rtl ltr:text-lg-ltr",
+          "flex items-center text-start px-3 border select-none rounded-sm rtl:text-[17px] ltr:text-[13px]",
           className
         )}
         onClick={onVisibilityChange}
       >
         {selectedDates ? (
-          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr text-primary/80 whitespace-nowrap overflow-hidden">
+          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-[17px] ltr:text-[13px] text-primary/80 whitespace-nowrap overflow-hidden">
             <CalendarDays className="size-4 inline-block text-tertiary rtl:ml-2 rtl:mr-2" />
             {formatHijriDate(selectedDates)}
           </h1>
         ) : (
-          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr font-semibold text-primary whitespace-nowrap overflow-hidden">
+          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-[17px] ltr:text-[13px] font-semibold text-primary whitespace-nowrap overflow-hidden">
             <CalendarDays className="size-4 inline-block text-tertiary" />
             {placeholder}
           </h1>
@@ -261,7 +261,7 @@ export default function DatePicker(props: DatePickerProps) {
           }}
           intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
         >
-          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
             {errorMessage}
           </h1>
         </AnimatedItem>

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

@@ -1,5 +1,5 @@
+import Input from "./input";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "./input";
 import { Search, AlertTriangle } from "lucide-react";
 
 const meta: Meta<typeof Input> = {

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

@@ -19,7 +19,7 @@ export interface InputProps
   measurement?: NastranInputSize;
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
       className,
@@ -86,12 +86,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         className={cn(
           rootDivClassName,
           "flex w-full flex-col justify-end",
+          requiredHint && !label && "mt-5",
           readOnlyStyle
         )}
       >
         <div
           className={cn(
-            "relative text-start select-none h-fit rtl:text-lg-rtl ltr:text-lg-ltr"
+            "relative text-start select-none h-fit ltr:text-[13px] rtl:text-[18px]"
           )}
         >
           {/* Start Content */}
@@ -135,7 +136,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <label
               htmlFor={label}
               className={cn(
-                "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+                "font-semibold ltr:text-[13px] rtl:text-[18px] inline-block pb-1"
               )}
             >
               {label}
@@ -189,7 +190,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             }}
             intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
           >
-            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
               {errorMessage}
             </h1>
           </AnimatedItem>

package/src/notion-ui/multi-date-picker/multi-date-picker.tsx

@@ -195,7 +195,7 @@ export default function MultiDatePicker(props: MultiDatePickerProps) {
         <label
           htmlFor={label}
           className={cn(
-            "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+            "font-semibold ltr:text-[13px] rtl:text-[18px] inline-block pb-1"
           )}
         >
           {label}
@@ -206,13 +206,13 @@ export default function MultiDatePicker(props: MultiDatePickerProps) {
           height: heightStyle.height,
         }}
         className={cn(
-          "relative flex items-center text-start px-3 border select-none rounded-sm rtl:text-lg-rtl ltr:text-lg-ltr",
+          "relative flex items-center text-start px-3 border select-none rounded-sm rtl:text-[17px] ltr:text-[13px]",
           className
         )}
         onClick={onVisibilityChange}
       >
         {selectedDates && selectedDates.length > 0 ? (
-          <div className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr text-primary/80 text-nowrap">
+          <div className="flex items-center gap-x-2 text-ellipsis rtl:text-[17px] ltr:text-[13px] text-primary/80 text-nowrap">
             <CalendarDays className="size-4 inline-block text-tertiary rtl:ml-2 rtl:mr-2" />
             {selectedDates.map((date: DateObject, index: number) => (
               <div key={index} className="flex gap-x-2">
@@ -229,7 +229,7 @@ export default function MultiDatePicker(props: MultiDatePickerProps) {
             ))}
           </div>
         ) : (
-          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr text-primary/80 text-nowrap">
+          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-[17px] ltr:text-[13px] text-primary/80 text-nowrap">
             <CalendarDays className="size-4 inline-block text-tertiary" />
             {placeholder}
           </h1>
@@ -255,7 +255,7 @@ export default function MultiDatePicker(props: MultiDatePickerProps) {
           }}
           intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
         >
-          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
             {errorMessage}
           </h1>
         </AnimatedItem>

package/src/notion-ui/page-size-select/index.ts

@@ -0,0 +1,3 @@
+import PageSizeSelect from "./page-size-select";
+
+export default PageSizeSelect;

package/src/notion-ui/page-size-select/page-size-select.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import PageSizeSelect from "./page-size-select";
+
+const meta: Meta<typeof PageSizeSelect> = {
+  title: "Select/PageSizeSelect",
+  component: PageSizeSelect,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+A pagination page-size selector with:
+- Preset options
+- Custom numeric input
+- LocalStorage persistence (or custom save/load)
+- Smart dropdown positioning (up/down)
+        `,
+      },
+    },
+  },
+  argTypes: {
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PageSizeSelect>;
+
+const OPTIONS = [
+  { value: "10", label: "10 / page" },
+  { value: "20", label: "20 / page" },
+  { value: "50", label: "50 / page" },
+  { value: "100", label: "100 / page" },
+];
+
+/* ---------------------------------------------
+   Default
+--------------------------------------------- */
+export const Default: Story = {
+  args: {
+    placeholder: "Select page size",
+    emptyPlaceholder: "No options",
+    rangePlaceholder: "Custom size",
+    paginationKey: "storybook-page-size",
+    options: OPTIONS,
+  },
+};
+
+/* ---------------------------------------------
+   With State Preview
+--------------------------------------------- */
+export const WithState: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string>("");
+
+    return (
+      <div className="w-64 space-y-3">
+        <PageSizeSelect
+          {...args}
+          onChange={(v) => {
+            setValue(v);
+            args.onChange?.(v);
+          }}
+        />
+
+        <div className="text-sm text-muted-foreground">
+          Selected value: <strong>{value || "-"}</strong>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    placeholder: "Page size",
+    emptyPlaceholder: "No options available",
+    rangePlaceholder: "Enter number",
+    paginationKey: "storybook-with-state",
+    options: OPTIONS,
+  },
+};
+
+/* ---------------------------------------------
+   Empty Options
+--------------------------------------------- */
+export const EmptyOptions: Story = {
+  args: {
+    placeholder: "Page size",
+    emptyPlaceholder: "Nothing to show",
+    rangePlaceholder: "Enter number",
+    paginationKey: "storybook-empty",
+    options: [],
+  },
+};
+
+/* ---------------------------------------------
+   Custom Storage (Mock)
+--------------------------------------------- */
+export const CustomStorage: Story = {
+  args: {
+    placeholder: "Page size",
+    emptyPlaceholder: "No data",
+    rangePlaceholder: "Custom size",
+    paginationKey: "storybook-custom-storage",
+    options: OPTIONS,
+    save: async (key, data) => {
+      console.log("Saved:", key, data);
+    },
+    load: async () => {
+      return {
+        key: "storybook-custom-storage",
+        value: "20",
+        option: 1,
+      };
+    },
+  },
+};