notionsoft-ui 1.0.43 → 1.0.46

package/cli/index.cjs

@@ -6,19 +6,6 @@ const path = require("path");
 const chalk = require("chalk");
 const { execSync } = require("child_process");
 
-/* ------------------------------
-   Helper: get template path
-------------------------------- */
-function getTemplateFile(component) {
-  // Library template: src/notion-ui/button/button.tsx
-  return path.join(
-    __dirname,
-    "../src/notion-ui",
-    component,
-    component + ".tsx"
-  );
-}
-
 /* ------------------------------
    Install dependencies in project
 ------------------------------- */
@@ -41,7 +28,7 @@ function updateTsConfig() {
 
   if (!fs.existsSync(tsconfigPath)) {
     console.log(
-      chalk.yellow("⚠ tsconfig.json not found, skipping baseUrl setup.")
+      chalk.yellow("⚠ tsconfig.json not found, skipping baseUrl setup."),
     );
     return;
   }
@@ -56,8 +43,8 @@ function updateTsConfig() {
   fs.writeJsonSync(tsconfigPath, tsconfig, { spaces: 2 });
   console.log(
     chalk.green(
-      "✓ tsconfig.json updated for absolute imports (@utils/*, @components/*)"
-    )
+      "✓ tsconfig.json updated for absolute imports (@utils/*, @components/*)",
+    ),
   );
 }
 
@@ -79,7 +66,7 @@ program
     // Create config
     fs.writeFileSync(
       configPath,
-      JSON.stringify({ componentDir: "src/components/notion-ui" }, null, 2)
+      JSON.stringify({ componentDir: "src/components/notion-ui" }, null, 2),
     );
 
     // Ensure component folder
@@ -99,7 +86,7 @@ import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: Parameters<typeof clsx>) {
   return twMerge(clsx(...inputs));
-}`
+}`,
       );
       console.log(chalk.green("✓ cn helper created at src/utils/cn.ts"));
     }
@@ -130,6 +117,7 @@ program
 
     const config = fs.readJSONSync(configFile);
     const templateDir = path.join(__dirname, "../src/notion-ui", component);
+    fs.ensureDirSync(path.join(cwd, "src/utils"));
 
     if (!fs.existsSync(templateDir)) {
       console.log(chalk.red(`❌ Component '${component}' does not exist.`));
@@ -170,33 +158,31 @@ program
         console.log(chalk.green(`✓ ${dataFile} merged to src/utils/dt.ts`));
       });
 
-    // Handle use-*.ts → src/utils/hook.ts
-    fs.readdirSync(templateDir)
-      .filter((f) => f.startsWith("use-") && f.endsWith(".ts"))
-      .forEach((hookFile) => {
-        const srcHookFile = path.join(templateDir, hookFile);
-        const destHookFile = path.join(cwd, "src/utils/hook.ts");
-        appendIfNotExist(srcHookFile, destHookFile);
-        console.log(chalk.green(`✓ ${hookFile} merged to src/utils/hook.ts`));
-      });
+    // Handle hook.ts → src/utils/hook.ts
+    const hookFile = path.join(templateDir, "hook.ts");
+    if (fs.existsSync(hookFile)) {
+      const destHookFile = path.join(cwd, "src/utils/hook.ts");
+      appendIfNotExist(hookFile, destHookFile);
+      console.log(chalk.green("✓ hook.ts merged to src/utils/hook.ts"));
+    }
 
-    // Handle utils.ts → src/utils/helper.ts
-    const utilsFile = path.join(templateDir, "utils.ts");
-    if (fs.existsSync(utilsFile)) {
-      const destUtilsFile = path.join(cwd, "src/utils/helper.ts");
-      appendIfNotExist(utilsFile, destUtilsFile);
-      console.log(chalk.green("✓ utils.ts merged to src/utils/helper.ts"));
+    // Handle helper.ts → src/utils/helper.ts
+    const helperFile = path.join(templateDir, "helper.ts");
+    if (fs.existsSync(helperFile)) {
+      const destHelperFile = path.join(cwd, "src/utils/helper.ts");
+      appendIfNotExist(helperFile, destHelperFile);
+      console.log(chalk.green("✓ helper.ts merged to src/utils/helper.ts"));
     }
 
-    // Copy remaining files (exclude index.ts, *.stories.tsx, type.ts, *-data.ts, use-*.ts, utils.ts)
+    // Copy remaining files (exclude index.ts, *.stories.tsx, type.ts, *-data.ts, hook.ts, helper.ts)
     fs.readdirSync(templateDir).forEach((file) => {
       if (
         file === "index.ts" ||
         file === "type.ts" ||
         file.endsWith("-data.ts") ||
         file.endsWith(".stories.tsx") ||
-        (file.startsWith("use-") && file.endsWith(".ts")) ||
-        file === "utils.ts"
+        file === "hook.ts" ||
+        file === "helper.ts"
       )
         return;
 
@@ -207,7 +193,7 @@ program
     });
 
     console.log(
-      chalk.green(`✓ Installed ${component} to ${config.componentDir}`)
+      chalk.green(`✓ Installed ${component} to ${config.componentDir}`),
     );
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.43",
+  "version": "1.0.46",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"
@@ -24,11 +24,9 @@
     "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",
     "react-router": "^7.11.0",
     "tailwind-merge": "^3.4.0",

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

@@ -8,7 +8,7 @@ import {
 } from "@react-spring/web";
 import { useCallback, useState } from "react";
 
-export interface AnimatedItemProps {
+interface AnimatedItemProps {
   springProps: {
     from?: object;
     to?: object | object[];
@@ -20,7 +20,7 @@ export interface AnimatedItemProps {
     onStart?: (
       result: AnimationResult,
       spring: Controller | SpringValue,
-      item?: any
+      item?: any,
     ) => void;
     config?: {
       mass: number;
@@ -32,14 +32,14 @@ export interface AnimatedItemProps {
   children: React.ReactNode | ((inView: boolean) => React.ReactNode);
 }
 
-export function AnimatedItem(props: AnimatedItemProps) {
+function AnimatedItem(props: AnimatedItemProps) {
   const [inView, setInView] = useState(false);
   const { springProps, intersectionArgs, children } = props;
   const defaultOnStart = useCallback(
     () => {
       setInView(true);
     },
-    [] // no dependencies, memoized once
+    [], // no dependencies, memoized once
   );
   const composedOnStart = springProps.onStart ?? defaultOnStart;
 
@@ -52,3 +52,5 @@ export function AnimatedItem(props: AnimatedItemProps) {
     </animated.div>
   );
 }
+
+export { AnimatedItem, type AnimatedItemProps };

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

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

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

@@ -13,13 +13,13 @@ const Breadcrumb = React.forwardRef<HTMLDivElement, BreadcrumbProps>(
         {...rest}
         className={cn(
           "rounded-sm px-5 items-center border border-primary/15 bg-card w-full sm:w-fit overflow-x-auto flex gap-x-4",
-          className
+          className,
         )}
       >
         {children}
       </div>
     );
-  }
+  },
 );
 
 interface BreadcrumbSeparatorProps extends React.SVGProps<SVGSVGElement> {}
@@ -40,7 +40,7 @@ const BreadcrumbSeparator = React.forwardRef<
       aria-hidden="true"
       className={cn(
         "text-primary/15 min-h-9 min-w-4 h-9 w-4 rtl:rotate-180",
-        className
+        className,
       )}
     >
       <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"></path>
@@ -60,13 +60,13 @@ const BreadcrumbItem = React.forwardRef<HTMLDivElement, BreadcrumbItemProps>(
         {...rest}
         className={cn(
           "text-primary/70 rtl:pt-0.5 hover:text-primary text-nowrap capitalize cursor-pointer transition-colors duration-200 font-medium rtl:text-4 ltr:text-xs",
-          className
+          className,
         )}
       >
         {children}
       </div>
     );
-  }
+  },
 );
 
 interface BreadcrumbHomeProps extends React.SVGProps<SVGSVGElement> {}
@@ -85,7 +85,7 @@ const BreadcrumbHome = React.forwardRef<SVGSVGElement, BreadcrumbHomeProps>(
         // data-slot="icon"
         className={cn(
           "text-primary/60 fill-primary/60 hover:scale-105 min-w-4 min-h-4 size-4 hover:fill-primary/90 transition-[fill] duration-300 cursor-pointer",
-          className
+          className,
         )}
       >
         <path
@@ -95,7 +95,7 @@ const BreadcrumbHome = React.forwardRef<SVGSVGElement, BreadcrumbHomeProps>(
         ></path>
       </svg>
     );
-  }
+  },
 );
 
 export { Breadcrumb, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbHome };

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

@@ -0,0 +1,8 @@
+import {
+  Breadcrumb,
+  BreadcrumbSeparator,
+  BreadcrumbItem,
+  BreadcrumbHome,
+} from "./breadcrumb";
+
+export { Breadcrumb, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbHome };

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

@@ -1,8 +1,8 @@
+import { Button } from "@/components/notion-ui/button";
 import type { Meta, StoryObj } from "@storybook/react";
-import Button from "./button";
 
 const meta: Meta<typeof Button> = {
-  title: "Components/Button",
+  title: "Button/Button",
   component: Button,
   tags: ["autodocs"],
   argTypes: {

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

@@ -17,14 +17,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       variant == "secondary"
         ? "bg-tertiary hover:shadow-sm shadow-lg hover:bg-tertiary rounded text-[12px] w-fit text-white"
         : 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"
-        ? "text-primary border border-primary/10 hover:bg-primary/5"
-        : "bg-primary hover:shadow hover:bg-primary shadow shadow-primary/50 text-primary-foreground/80 hover:opacity-90 hover:text-primary-foreground";
+          ? "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"
+                ? "text-primary border border-primary/10 hover:bg-primary/5"
+                : "bg-primary hover:shadow hover:bg-primary shadow shadow-primary/50 text-primary-foreground/80 hover:opacity-90 hover:text-primary-foreground";
     return (
       <button
         {...rest}
@@ -36,12 +36,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           style,
           disabled &&
             "opacity-35 pointer-events-none disabled:cursor-not-allowed",
-          className
+          className,
         )}
       >
         {children}
       </button>
     );
-  }
+  },
 );
-export default Button;
+export { Button };

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

@@ -1,3 +1,3 @@
-import Button from "./button";
+import { Button } from "./button";
 
-export default Button;
+export { Button };

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

@@ -1,10 +1,9 @@
+import { Button } from "@/components/notion-ui/button";
+import { ButtonSpinner } from "@/components/notion-ui/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: "Components/ButtonSpinner",
+  title: "Button/ButtonSpinner",
   component: ButtonSpinner,
   tags: ["autodocs"],
   argTypes: {

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

@@ -1,12 +1,9 @@
-import { cn } from "../../utils/cn";
-// import { cn } from "@/utils/cn";
-
-export interface IButtonSpinnerProps {
+interface IButtonSpinnerProps {
   children: any;
   loading: boolean;
 }
 
-export default function ButtonSpinner(props: IButtonSpinnerProps) {
+function ButtonSpinner(props: IButtonSpinnerProps) {
   const { loading, children } = props;
   return (
     <>
@@ -23,3 +20,4 @@ export default function ButtonSpinner(props: IButtonSpinnerProps) {
     </>
   );
 }
+export { ButtonSpinner, type IButtonSpinnerProps };

package/src/notion-ui/button-spinner/index.ts

@@ -1,3 +1,3 @@
-import ButtonSpinner from "./button-spinner";
+import { ButtonSpinner, IButtonSpinnerProps } from "./button-spinner";
 
-export default ButtonSpinner;
+export { ButtonSpinner, type IButtonSpinnerProps };

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

@@ -1,5 +1,5 @@
+import { CachedImage, ImageProps } from "@/components/notion-ui/cached-image";
 import type { Meta, StoryObj } from "@storybook/react";
-import CachedImage, { ImageProps } from "./cached-image";
 
 /* ---------------------------------- */
 /* Helpers */
@@ -52,7 +52,7 @@ type Story = StoryObj<ImageProps>;
 // Default (fetch + cache)
 export const Default: Story = {
   args: {
-    src: "/images/sample.jpg",
+    src: "https://picsum.photos/200",
     fetch: fetchImage,
     className: "w-40 h-40 rounded-md",
   },
@@ -62,7 +62,7 @@ export const Default: Story = {
 export const WithApiConfig: Story = {
   args: {
     apiConfig: {
-      src: "/images/sample.jpg",
+      src: "https://picsum.photos/200",
     },
     className: "w-40 h-40 rounded-lg",
   },
@@ -73,14 +73,14 @@ export const CrossOrigin: Story = {
   args: {
     src: "https://picsum.photos/200",
     fetch: fetchImage,
-    className: "w-40 h-40 rounded-full",
+    className: "w-40 h-40 rounded-full border/10",
   },
 };
 
 // Loading / shimmer state
 export const LoadingState: Story = {
   args: {
-    src: "/images/sample.jpg",
+    src: "https://picsum.photos/200",
     fetch: delayedFetch,
     className: "w-32 h-32",
     classNames: {
@@ -93,7 +93,7 @@ export const LoadingState: Story = {
 // Small size
 export const Small: Story = {
   args: {
-    src: "/images/sample.jpg",
+    src: "https://picsum.photos/200",
     fetch: fetchImage,
     className: "w-16 h-16 rounded",
   },
@@ -102,7 +102,7 @@ export const Small: Story = {
 // Large size
 export const Large: Story = {
   args: {
-    src: "/images/sample.jpg",
+    src: "https://picsum.photos/200",
     fetch: fetchImage,
     className: "w-64 h-64 rounded-xl",
   },

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

@@ -1,4 +1,4 @@
-import Shimmer from "@/components/notion-ui/shimmer";
+import { Shimmer } from "@/components/notion-ui/shimmer";
 import { cn } from "@/utils/cn";
 import React, { useEffect, useState, forwardRef, useRef } from "react";
 
@@ -31,7 +31,7 @@ interface ApiConfigImageProps extends BaseImageProps {
   fetch?: never;
 }
 
-export type ImageProps = FetchImageProps | ApiConfigImageProps;
+type ImageProps = FetchImageProps | ApiConfigImageProps;
 
 /* ---------------------------------- */
 /* Cache helpers */
@@ -40,6 +40,10 @@ export type ImageProps = FetchImageProps | ApiConfigImageProps;
 const IMAGE_CACHE = "image-cache-v1";
 
 async function getCachedImage(url: string): Promise<string | null> {
+  if (typeof window === "undefined" || typeof caches === "undefined") {
+    return null;
+  }
+
   const cache = await caches.open(IMAGE_CACHE);
   const cached = await cache.match(url);
 
@@ -50,6 +54,9 @@ async function getCachedImage(url: string): Promise<string | null> {
 }
 
 async function cacheImage(url: string, response: Response) {
+  if (typeof window === "undefined" || typeof caches === "undefined") {
+    return;
+  }
   const cache = await caches.open(IMAGE_CACHE);
   await cache.put(url, response.clone());
 }
@@ -75,6 +82,21 @@ const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
 
   const [imageUrl, setImageUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const previousUrlRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (previousUrlRef.current?.startsWith("blob:")) {
+      URL.revokeObjectURL(previousUrlRef.current);
+    }
+
+    previousUrlRef.current = imageUrl;
+
+    return () => {
+      if (previousUrlRef.current?.startsWith("blob:")) {
+        URL.revokeObjectURL(previousUrlRef.current);
+      }
+    };
+  }, [imageUrl]);
 
   const { shimmerClassName, shimmerIconClassName } = classNames || {};
 
@@ -83,7 +105,7 @@ const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
     fetchRef.current = fetch;
   }, [fetch]);
 
-  async function loadImage() {
+  async function loadImage(signal: AbortSignal) {
     try {
       const resolvedSrc = apiConfig?.src ?? src;
 
@@ -106,8 +128,10 @@ const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
       /* ---------------------------------- */
       const cached = await getCachedImage(resolvedSrc);
       if (cached) {
-        setImageUrl(cached);
-        setLoading(false);
+        if (!signal.aborted) {
+          setImageUrl(cached);
+          setLoading(false);
+        }
         return;
       }
 
@@ -118,7 +142,9 @@ const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
         ? await fetchRef.current(resolvedSrc)
         : await window.fetch(resolvedSrc, {
             headers: apiConfig?.headers,
+            signal,
           });
+      if (signal.aborted) return;
 
       const contentType = response.headers.get("content-type") ?? "";
 
@@ -137,38 +163,35 @@ const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
     } catch (err) {
       console.error(err);
     } finally {
-      setLoading(false);
+      if (!signal.aborted) {
+        setLoading(false);
+      }
     }
   }
 
   useEffect(() => {
-    loadImage();
-  }, [src, apiConfig?.src]);
+    const controller = new AbortController();
+    setLoading(true);
 
-  /* ---------------------------------- */
-  /* Cleanup */
-  /* ---------------------------------- */
+    loadImage(controller.signal);
 
-  useEffect(() => {
     return () => {
-      if (imageUrl?.startsWith("blob:")) {
-        URL.revokeObjectURL(imageUrl);
-      }
+      controller.abort();
     };
-  }, [imageUrl]);
+  }, [src, apiConfig?.src]);
 
   /* ---------------------------------- */
   /* UI */
   /* ---------------------------------- */
 
   if (loading || !imageUrl) {
-    const stop = loading ? false : !imageUrl && true;
+    const stop = !loading && !imageUrl;
 
     return (
       <Shimmer
         className={cn(
           "bg-primary/10 mx-auto flex p-2 items-center size-8 rounded border border-tertiary/10",
-          shimmerClassName
+          shimmerClassName,
         )}
         stop={stop}
       >
@@ -182,7 +205,7 @@ const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
           strokeLinejoin="round"
           className={cn(
             "stroke-primary/40 mx-auto stroke-2",
-            shimmerIconClassName
+            shimmerIconClassName,
           )}
         >
           <rect x="1" y="1" width="22" height="22" rx="2" ry="2" />
@@ -196,12 +219,10 @@ const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
   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
+        className,
       )}
       {...imgProps}
     />
@@ -210,4 +231,4 @@ const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
 
 CachedImage.displayName = "CachedImage";
 
-export default CachedImage;
+export { CachedImage, type ImageProps };

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

@@ -1,3 +1,3 @@
-import CachedImage from "./cached-image";
+import { ImageProps, CachedImage } from "./cached-image";
 
-export default CachedImage;
+export { CachedImage, type ImageProps };

package/src/notion-ui/cached-svg/CachedSvg.stories.tsx

@@ -1,7 +1,6 @@
+import { CachedSvg } from "@/components/notion-ui/cached-svg";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import CachedSvg from "./cached-svg";
-
 /* ---------------------------------- */
 /* Meta */
 /* ---------------------------------- */
@@ -36,11 +35,10 @@ const sampleSvg = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 /* -------- Fetch-based example -------- */
 export const FetchExample: Story = {
   render: () => (
-    <div style={{ width: 40, height: 40 }}>
+    <div>
       <CachedSvg
-        src="https://dummy-svg-url.com/sample.svg"
-        fetch={async () => {
-          return new Response(sampleSvg, { status: 200 });
+        apiConfig={{
+          src: "https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/af.svg",
         }}
       />
     </div>
@@ -50,12 +48,12 @@ export const FetchExample: Story = {
 /* -------- API-config-based example -------- */
 export const ApiConfigExample: Story = {
   render: () => (
-    <div style={{ width: 40, height: 40 }}>
+    <div>
       <CachedSvg
         apiConfig={{
-          src: "https://dummy-api.com/svg",
-          headers: { Authorization: "Bearer token" },
+          src: "https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/af.svg",
         }}
+        className="size-32"
       />
     </div>
   ),
@@ -64,9 +62,9 @@ export const ApiConfigExample: Story = {
 /* -------- Loading state (Shimmer) -------- */
 export const LoadingState: Story = {
   render: () => (
-    <div style={{ width: 40, height: 40 }}>
+    <div>
       <CachedSvg
-        src="https://dummy-loading.com/svg"
+        src="https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/af.svg"
         fetch={() => new Promise(() => {})} // never resolves to simulate loading
       />
     </div>