notionsoft-ui 1.0.34 → 1.0.35

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.35",
   "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/cache-svg/CachedSvg.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import CachedSvg from "./cached-svg";
+
+/* ---------------------------------- */
+/* Meta */
+/* ---------------------------------- */
+const meta: Meta<typeof CachedSvg> = {
+  title: "Media/CachedSvg",
+  component: CachedSvg,
+  tags: ["autodocs"],
+  argTypes: {
+    className: { control: "text" },
+    classNames: { control: false },
+    src: { control: "text" },
+    fetch: { control: false },
+    apiConfig: { control: false },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CachedSvg>;
+
+/* ---------------------------------- */
+/* Sample SVG string */
+/* ---------------------------------- */
+const sampleSvg = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="10" fill="currentColor"/>
+</svg>`;
+
+/* ---------------------------------- */
+/* Stories */
+/* ---------------------------------- */
+
+/* -------- Fetch-based example -------- */
+export const FetchExample: Story = {
+  render: () => (
+    <div style={{ width: 40, height: 40 }}>
+      <CachedSvg
+        src="https://dummy-svg-url.com/sample.svg"
+        fetch={async () => {
+          return new Response(sampleSvg, { status: 200 });
+        }}
+      />
+    </div>
+  ),
+};
+
+/* -------- API-config-based example -------- */
+export const ApiConfigExample: Story = {
+  render: () => (
+    <div style={{ width: 40, height: 40 }}>
+      <CachedSvg
+        apiConfig={{
+          src: "https://dummy-api.com/svg",
+          headers: { Authorization: "Bearer token" },
+        }}
+      />
+    </div>
+  ),
+};
+
+/* -------- Loading state (Shimmer) -------- */
+export const LoadingState: Story = {
+  render: () => (
+    <div style={{ width: 40, height: 40 }}>
+      <CachedSvg
+        src="https://dummy-loading.com/svg"
+        fetch={() => new Promise(() => {})} // never resolves to simulate loading
+      />
+    </div>
+  ),
+};

package/src/notion-ui/cache-svg/cached-svg.tsx

@@ -0,0 +1,150 @@
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import Shimmer from "../shimmer";
+import { cn } from "../../utils/cn";
+import DOMPurify from "dompurify";
+
+/* ---------------------------------- */
+/* Types */
+/* ---------------------------------- */
+
+interface BaseSvgProps extends React.HTMLAttributes<HTMLDivElement> {
+  classNames?: {
+    shimmerClassName?: string;
+  };
+}
+
+interface FetchSvgProps extends BaseSvgProps {
+  src: string;
+  fetch: (src: string) => Promise<Response>;
+  apiConfig?: never;
+}
+
+interface ApiConfigSvgProps extends BaseSvgProps {
+  apiConfig: {
+    src: string;
+    headers?: Record<string, string>;
+  };
+  src?: never;
+  fetch?: never;
+}
+
+export type CachedSvgProps = FetchSvgProps | ApiConfigSvgProps;
+
+/* ---------------------------------- */
+/* Cache */
+/* ---------------------------------- */
+
+const SVG_CACHE = "svg-cache-v1";
+
+/* ---------------------------------- */
+/* Sanitizer */
+/* ---------------------------------- */
+
+function sanitizeSvg(svg: string): string {
+  return DOMPurify.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    FORBID_TAGS: ["script", "foreignObject", "iframe", "object", "embed"],
+    FORBID_ATTR: [
+      "onload",
+      "onclick",
+      "onmouseover",
+      "onerror",
+      "href",
+      "xlink:href",
+    ],
+  });
+}
+
+/* ---------------------------------- */
+/* Component */
+/* ---------------------------------- */
+
+const CachedSvg = forwardRef<HTMLDivElement, CachedSvgProps>(
+  ({ className, classNames, fetch, apiConfig, ...rest }, ref) => {
+    const [svg, setSvg] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const fetchRef = useRef(fetch);
+    useEffect(() => {
+      fetchRef.current = fetch;
+    }, [fetch]);
+
+    async function loadSvg() {
+      try {
+        const src = apiConfig?.src ?? (rest as any).src;
+        if (!src) return;
+
+        /* ---------------- Cache ---------------- */
+
+        if ("caches" in window) {
+          const cache = await caches.open(SVG_CACHE);
+          const cached = await cache.match(src);
+
+          if (cached) {
+            const text = await cached.text();
+            setSvg(sanitizeSvg(text));
+            setLoading(false);
+            return;
+          }
+        }
+
+        /* ---------------- Fetch ---------------- */
+
+        const response = fetchRef.current
+          ? await fetchRef.current(src)
+          : await window.fetch(src, { headers: apiConfig?.headers });
+
+        if (!response.ok) throw new Error("SVG fetch failed");
+
+        const clone = response.clone();
+        const text = await response.text();
+
+        setSvg(sanitizeSvg(text));
+
+        if ("caches" in window) {
+          const cache = await caches.open(SVG_CACHE);
+          await cache.put(src, clone);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    useEffect(() => {
+      loadSvg();
+    }, [apiConfig?.src, (rest as any).src]);
+
+    /* ---------------- UI ---------------- */
+    const iconStyle = "opacity-90 rounded-full w-[20px] h-[18px]";
+    if (loading || !svg) {
+      return (
+        <Shimmer
+          className={cn(
+            "bg-primary/10",
+            iconStyle,
+            classNames?.shimmerClassName
+          )}
+        />
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "[&>svg>path]:fill-current [&>svg>g>*]:fill-current items-center justify-center flex",
+          iconStyle,
+          className
+        )}
+        dangerouslySetInnerHTML={{ __html: svg }}
+        {...rest}
+      />
+    );
+  }
+);
+
+CachedSvg.displayName = "CachedSvg";
+
+export default CachedSvg;

package/src/notion-ui/cache-svg/index.ts

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

package/src/notion-ui/cache-svg/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;
+  }
+}