notionsoft-ui 1.0.34 → 1.0.36

package/.storybook/main.ts

@@ -1,19 +1,25 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
     "@chromatic-com/storybook",
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
-    "@storybook/addon-vitest"
+    "@storybook/addon-vitest",
   ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
-  }
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [tsconfigPaths()],
+      define: {
+        "import.meta.env.VITE_API_BASE_URL": JSON.stringify(""),
+      },
+    });
+  },
 };
-export default config;
+export default config;

package/.storybook/preview.css

@@ -47,22 +47,6 @@
   --color-primary-background: var(--primary-background);
   --primary-background: oklch(20.435% 0.06485 262.22);
 
-  --text-sm-ltr: 11px;
-  --text-md-ltr: 12px;
-  --text-lg-ltr: 13px;
-  --text-xl-ltr: 14px;
-  --text-2xl-ltr: 15px;
-  --text-3xl-ltr: 17px;
-  --text-4xl-ltr: 20px;
-
-  --text-sm-rtl: 15px;
-  --text-md-rtl: 16px;
-  --text-lg-rtl: 17px;
-  --text-xl-rtl: 18px;
-  --text-2xl-rtl: 19px;
-  --text-3xl-rtl: 20px;
-  --text-4xl-rtl: 22px;
-
   --breakpoint-xxl: 500px;
   --animate-shimmer: shimmer 2.2s infinite linear;
   @keyframes shimmer {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"
@@ -22,12 +22,17 @@
     "chalk": "^4.1.2",
     "clsx": "^2.1.1",
     "commander": "^12.0.0",
+    "dompurify": "^3.3.1",
     "fs-extra": "^11.2.0",
+    "i18next": "^25.7.3",
     "lucide-react": "^0.554.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-i18next": "^16.5.0",
     "react-multi-date-picker": "^4.5.2",
-    "tailwind-merge": "^3.4.0"
+    "react-router": "^7.11.0",
+    "tailwind-merge": "^3.4.0",
+    "vite-tsconfig-paths": "^6.0.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

package/src/notion-ui/animated-item/animated-item.tsx

@@ -32,7 +32,7 @@ export interface AnimatedItemProps {
   children: React.ReactNode | ((inView: boolean) => React.ReactNode);
 }
 
-export default function AnimatedItem(props: AnimatedItemProps) {
+export function AnimatedItem(props: AnimatedItemProps) {
   const [inView, setInView] = useState(false);
   const { springProps, intersectionArgs, children } = props;
   const defaultOnStart = useCallback(

package/src/notion-ui/animated-item/index.ts

@@ -1,3 +1,3 @@
-import AnimatedItem from "./animated-item";
+import { AnimatedItem } from "./animated-item";
 
 export default AnimatedItem;

package/src/notion-ui/button/Button.stories.tsx

@@ -2,12 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Button from "./button";
 
 const meta: Meta<typeof Button> = {
-  title: "Button/Button",
+  title: "Components/Button",
   component: Button,
+  tags: ["autodocs"],
   argTypes: {
     variant: {
       control: "select",
-      options: ["default", "primary", "secondary", "warning"],
+      options: ["primary", "secondary", "warning", "success", "outline"],
     },
     disabled: {
       control: "boolean",
@@ -15,7 +16,11 @@ const meta: Meta<typeof Button> = {
     children: {
       control: "text",
     },
-    onClick: { action: "clicked" },
+  },
+  args: {
+    children: "Button",
+    variant: "primary",
+    disabled: false,
   },
 };
 
@@ -25,33 +30,51 @@ type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
   args: {
-    children: "Primary Button",
     variant: "primary",
   },
 };
 
 export const Secondary: Story = {
   args: {
-    children: "Secondary Button",
     variant: "secondary",
   },
 };
 
 export const Warning: Story = {
   args: {
-    children: "Warning Button",
     variant: "warning",
+    children: "Delete",
   },
 };
+
 export const Success: Story = {
   args: {
-    children: "Success Button",
     variant: "success",
+    children: "Saved",
   },
 };
+
 export const Outline: Story = {
   args: {
-    children: "Outline Button",
     variant: "outline",
   },
 };
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="success">Success</Button>
+      <Button variant="warning">Warning</Button>
+      <Button variant="outline">Outline</Button>
+      <Button disabled>Disabled</Button>
+    </div>
+  ),
+};

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

@@ -3,7 +3,13 @@ import { cn } from "../../utils/cn";
 // import { cn } from "@/utils/cn";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "warning" | "success" | "outline";
+  variant?:
+    | "primary"
+    | "secondary"
+    | "warning"
+    | "success"
+    | "outline"
+    | "icon";
 }
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref: any) => {
@@ -13,6 +19,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ? "border hover:bg-primary hover:text-primary-foreground"
         : variant == "warning"
         ? "bg-red-500 text-primary-foreground"
+        : variant == "icon"
+        ? "rtl:px-3 rtl:py-1 ltr:py-2 border gap-x-3 text-primary border border-primary/10 hover:bg-primary/5 hover:opacity-90 transition-opacity px-5"
         : variant == "success"
         ? "bg-green-500 text-primary-foreground"
         : variant == "outline"
@@ -24,7 +32,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={disabled}
         ref={ref}
         className={cn(
-          `rounded-sm grid grid-cols-[1fr_1fr_auto] leading-snug cursor-pointer font-medium ltr:text-xs rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
+          `rounded-sm items-center justify-center flex gap-x-1 leading-snug cursor-pointer ltr:text-xs rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
           transition w-fit px-3 py-1.5 duration-200 ease-linear`,
           style,
           disabled &&

package/src/notion-ui/button-spinner/ButtonSpinner.stories.tsx

@@ -1,58 +1,66 @@
-import Button from "../button/button";
-import ButtonSpinner from "./button-spinner";
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import ButtonSpinner from "./button-spinner";
+import Button from "../button/button";
 
 const meta: Meta<typeof ButtonSpinner> = {
-  title: "Loader/ButtonSpinner",
+  title: "Components/ButtonSpinner",
   component: ButtonSpinner,
-  parameters: {
-    layout: "centered",
-  },
+  tags: ["autodocs"],
   argTypes: {
-    loading: { control: "boolean" },
-    className: { control: "text" },
-    children: { control: "text" },
+    loading: {
+      control: "boolean",
+    },
+    children: {
+      control: false,
+    },
+  },
+  args: {
+    loading: false,
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof ButtonSpinner>;
-
-/* -----------------------------
-   Template: how ButtonSpinner 
-   is intended to be used 
------------------------------- */
-const Template = (args) => (
-  <Button disabled={args.loading} className="flex items-center gap-3">
-    <ButtonSpinner {...args} />
-  </Button>
-);
 
-/* -----------------------------
-   Stories
------------------------------- */
+type Story = StoryObj<typeof ButtonSpinner>;
 
 export const Default: Story = {
-  render: Template,
-  args: {
-    loading: false,
-    children: "Save",
-  },
+  render: (args) => (
+    <Button>
+      <ButtonSpinner {...args}>Submit</ButtonSpinner>
+    </Button>
+  ),
 };
 
 export const Loading: Story = {
-  render: Template,
   args: {
     loading: true,
-    children: "Saving...",
   },
+  render: (args) => (
+    <Button>
+      <ButtonSpinner {...args}>Submitting</ButtonSpinner>
+    </Button>
+  ),
 };
 
-export const WithCustomClass: Story = {
-  render: Template,
+export const WithDifferentText: Story = {
   args: {
     loading: true,
-    className: "text-blue-600 font-semibold",
-    children: "Processing...",
   },
+  render: (args) => (
+    <Button variant="success">
+      <ButtonSpinner {...args}>Saving</ButtonSpinner>
+    </Button>
+  ),
+};
+
+export const InlineUsage: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <span>Loading</span>
+      <ButtonSpinner loading={true}>
+        <span className="sr-only">spinner</span>
+      </ButtonSpinner>
+    </div>
+  ),
 };

package/src/notion-ui/button-spinner/button-spinner.tsx

@@ -4,23 +4,22 @@ import { cn } from "../../utils/cn";
 export interface IButtonSpinnerProps {
   children: any;
   loading: boolean;
-  className?: string;
 }
 
 export default function ButtonSpinner(props: IButtonSpinnerProps) {
-  const { loading, children, className } = props;
+  const { loading, children } = props;
   return (
     <>
+      {children}
       {loading && (
-        <div className="relative w-[16px] h-[16px]">
+        <div className="relative size-3">
           {/* <!-- Ring --> */}
           <div
-            className="w-[16px] h-[16px] rounded-full animate-spin absolute
+            className="size-3 rounded-full animate-spin absolute
               border border-solid border-secondary border-t-transparent"
           />
         </div>
       )}
-      <h1 className={cn("", className)}>{children}</h1>
     </>
   );
 }

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;
+  }
+}