notionsoft-ui 1.0.1 → 1.0.3

package/src/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/src/stories/page.css

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/templates/button/BooleanStatusButton.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import BooleanStatusButton from "./BooleanStatusButton";
+
+// --------------------------------------------
+// Status options used for Storybook showcase
+// --------------------------------------------
+const statusOptions = {
+  success: {
+    style: "border-green-500 text-green-600",
+    value: "Active",
+  },
+  error: {
+    style: "border-red-500 text-red-600",
+    value: "Error",
+  },
+  warning: {
+    style: "border-yellow-500 text-yellow-600",
+    value: "Warning",
+  },
+  neutral: {
+    style: "border-gray-400 text-gray-600",
+    value: "Unknown",
+  },
+};
+
+// --------------------------------------------
+// WRAPPER COMPONENT with real `status` prop
+// --------------------------------------------
+interface WrapperProps {
+  status: keyof typeof statusOptions;
+  className?: string;
+}
+
+function Wrapper({ status, className }: WrapperProps) {
+  return (
+    <BooleanStatusButton
+      className={className}
+      getColor={() => statusOptions[status]}
+    />
+  );
+}
+
+// --------------------------------------------
+// Storybook meta (now uses Wrapper, not the original)
+// --------------------------------------------
+const meta: Meta<typeof Wrapper> = {
+  title: "Button/BooleanStatusButton",
+  component: Wrapper,
+  argTypes: {
+    status: {
+      control: "select",
+      options: Object.keys(statusOptions),
+    },
+    className: {
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Wrapper>;
+
+// --------------------------------------------
+// STORIES
+// --------------------------------------------
+
+export const Default: Story = {
+  args: {
+    status: "success",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    status: "error",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    status: "warning",
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    status: "neutral",
+  },
+};

package/src/templates/button/BooleanStatusButton.tsx

@@ -0,0 +1,29 @@
+// import { cn } from "../../utils/cn";
+import { cn } from "@/utils/cn";
+
+export interface BooleanStatusButtonProps {
+  getColor: () => {
+    style: string;
+    value?: string;
+  };
+  className?: string;
+}
+
+export default function BooleanStatusButton(props: BooleanStatusButtonProps) {
+  const { getColor, className } = props;
+  const data = getColor();
+
+  return (
+    <div
+      className={cn(
+        `border-[1px] mx-auto min-w-fit ltr:text-[13px] sm:ltr:text-sm rtl:text-[13px] sm:rtl:text-sm rtl:font-semibold w-fit flex items-center gap-x-2 ltr:py-1 rtl:py-[2px] px-[8px] rounded-full ${data.style}`,
+        className
+      )}
+    >
+      <div
+        className={`size-[12px] min-h-[12px] min-w-[12px] rounded-full border-[3px] ${data.style}`}
+      />
+      <h1 className="text-nowrap">{data.value}</h1>
+    </div>
+  );
+}

package/src/templates/button/Button.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "./button";
+
+const meta: Meta<typeof Button> = {
+  title: "Button/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "primary", "secondary", "warning"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+    children: {
+      control: "text",
+    },
+    onClick: { action: "clicked" },
+  },
+};
+
+export default meta;
+
+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",
+  },
+};
+export const Success: Story = {
+  args: {
+    children: "Success Button",
+    variant: "success",
+  },
+};

package/src/templates/button/button.tsx

@@ -1,25 +1,36 @@
+import * as React from "react";
+// import { cn } from "../../utils/cn";
 import { cn } from "@/utils/cn";
-import React from "react";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "primary" | "secondary";
+  variant?: "primary" | "secondary" | "warning" | "success";
 }
-
-const Button: React.FC<ButtonProps> = ({
-  variant = "default",
-  className,
-  ...props
-}) => {
-  return (
-    <button
-      className={cn(
-        "px-4 py-2 rounded-md font-medium transition-colors",
-        variant === "primary" && "bg-blue-500 text-white",
-        variant === "secondary" && "bg-gray-200 text-black",
-        className
-      )}
-      {...props}
-    />
-  );
-};
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref: any) => {
+    const { className, children, variant, ...rest } = props;
+    const style =
+      variant == "secondary"
+        ? "border hover:bg-primary hover:text-primary-foreground"
+        : variant == "warning"
+        ? "bg-red-500 text-primary-foreground"
+        : variant == "success"
+        ? "bg-green-500 text-primary-foreground"
+        : "bg-primary hover:bg-primary shadow shadow-primary/50 text-primary-foreground/80 hover:opacity-90 hover:text-primary-foreground";
+    return (
+      <button
+        {...rest}
+        ref={ref}
+        className={cn(
+          `rounded-sm cursor-pointer ltr:text-[13px] sm:ltr:text-sm rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
+           hover:shadow transition w-fit
+            sm:px-4 py-[6px] leading-normal duration-200 ease-linear`,
+          style,
+          className
+        )}
+      >
+        {children}
+      </button>
+    );
+  }
+);
 export default Button;

package/src/templates/sheet/AnimatedSheet.stories.tsx

@@ -0,0 +1,103 @@
+import Button from "../button/button";
+import AnimatedSheet from "./AnimatedSheet";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+const meta: Meta<typeof AnimatedSheet> = {
+  title: "Sheet/AnimatedSheet",
+  component: AnimatedSheet,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AnimatedSheet>;
+
+// ----------------------------------------------------
+// WRAPPER (controls open/close since AnimatedSheet
+// returns `button` when closed)
+// ----------------------------------------------------
+function SheetWrapper(args: any) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <AnimatedSheet
+      {...args}
+      open={open}
+      onClose={() => setOpen(false)}
+      button={
+        <Button variant="primary" onClick={() => setOpen(true)}>
+          Open Sheet
+        </Button>
+      }
+    >
+      <div className="grid gap-x-4 gap-y-6 p-5">
+        <div className="mb-12 pb-4">
+          <h1 className="rtl:text-3xl-rtl ltr:text-2xl-ltr text-fourth">
+            Account password
+          </h1>
+        </div>
+      </div>
+    </AnimatedSheet>
+  );
+}
+
+// ----------------------------------------------------
+// STORIES
+// ----------------------------------------------------
+
+// 🔵 DEFAULT — also acts as alias for Right (fixes HMR)
+export const Default: Story = {
+  render: (args) => <SheetWrapper {...args} />,
+  args: {
+    position: "right",
+    animate: "right",
+  },
+};
+
+// ▶️ Right
+export const Right: Story = {
+  render: (args) => <SheetWrapper {...args} />,
+  args: {
+    position: "right",
+    animate: "right",
+  },
+};
+
+// ◀️ Left
+export const Left: Story = {
+  render: (args) => <SheetWrapper {...args} />,
+  args: {
+    position: "left",
+    animate: "left",
+  },
+};
+
+// 🔼 Top
+export const Top: Story = {
+  render: (args) => <SheetWrapper {...args} />,
+  args: {
+    position: "top",
+    animate: "top",
+  },
+};
+
+// 🔽 Bottom
+export const Bottom: Story = {
+  render: (args) => <SheetWrapper {...args} />,
+  args: {
+    position: "bottom",
+    animate: "bottom",
+  },
+};
+
+// ⭕ Center
+export const Center: Story = {
+  render: (args) => <SheetWrapper {...args} />,
+  args: {
+    position: "center",
+    animate: "bottom", // slide-up looks best for modal center
+  },
+};

package/src/templates/sheet/AnimatedSheet.tsx

@@ -0,0 +1,163 @@
+// import { cn } from "../../utils/cn";
+import { cn } from "@/utils/cn";
+
+import { useTransition, animated } from "@react-spring/web";
+import { X } from "lucide-react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import ReactDOM from "react-dom";
+
+type PositionType = "center" | "left" | "top" | "bottom" | "right";
+type AnimateType = "left" | "top" | "right" | "bottom";
+type AnimatedSheetProps = {
+  open?: boolean;
+  button?: ReactNode;
+  children?: ReactNode;
+  onClose?: (open: boolean) => void;
+  style?: {
+    rootContainerClassName?: string;
+    mainContainerClassName?: string;
+    iconClassName?: string;
+  };
+  position: PositionType;
+  animate: AnimateType;
+};
+
+export default function AnimatedSheet({
+  open,
+  onClose,
+  children,
+  button,
+  style,
+  position,
+  animate,
+}: AnimatedSheetProps) {
+  const { rootContainerClassName, mainContainerClassName, iconClassName } =
+    style || {};
+  const [status, setStatus] = useState<boolean | undefined>(false);
+
+  useEffect(() => {
+    setStatus(open);
+  }, [open]);
+  const itemsPosition = useMemo(() => {
+    const animation =
+      animate == "left"
+        ? "translateX(-100%)"
+        : animate == "right"
+        ? "translateX(100%)"
+        : animate == "top"
+        ? "translateY(-100%)"
+        : "translateY(100%)";
+
+    return position == "left"
+      ? {
+          rootContainer: "rtl:left-0 ltr:right-0 top-0",
+          icon: "",
+          transitionFrom: animation,
+          transitionEnter: "translateX(0%)",
+        }
+      : position == "right"
+      ? {
+          rootContainer: "rtl:right-0 ltr:left-0 top-0",
+          icon: "",
+          transitionFrom: animation,
+          transitionEnter: "translateX(0%)",
+        }
+      : position == "center"
+      ? {
+          rootContainer:
+            "rtl:left-1/2 ltr:right-1/2 top-0 rtl:-translate-x-1/2 ltr:translate-x-1/2",
+          icon: "rtl:order-1",
+          transitionFrom: animation,
+          transitionEnter: "translateX(0%)",
+        }
+      : position == "top"
+      ? {
+          rootContainer:
+            "rtl:left-1/2 ltr:right-1/2 top-0 rtl:-translate-x-1/2 ltr:translate-x-1/2",
+          icon: "order-1",
+          transitionFrom: animation,
+          transitionEnter: "translateY(0%)",
+        }
+      : {
+          rootContainer:
+            "rtl:left-1/2 ltr:right-1/2 top-0 rtl:-translate-x-1/2 ltr:translate-x-1/2",
+          icon: "order-1",
+          transitionFrom: animation,
+          transitionEnter: "translateY(0%)",
+        };
+  }, [position]);
+
+  const transitions = useTransition(status, {
+    from: {
+      opacity: 0,
+      transform: itemsPosition.transitionFrom,
+    },
+    enter: { opacity: 1, transform: itemsPosition.transitionEnter },
+    config: { tension: 250, friction: 30 },
+  });
+
+  const overlayTransitions = useTransition(status, {
+    from: { opacity: 0 },
+    enter: { opacity: 0.5 },
+    config: { tension: 250, friction: 30 },
+  });
+
+  const onCloseSheet = () => {
+    if (onClose) onClose(!status);
+    setStatus((prev) => !prev);
+  };
+
+  if (!status) return button;
+
+  return ReactDOM.createPortal(
+    <>
+      {overlayTransitions(
+        (style, item) =>
+          item && (
+            <animated.div
+              style={style}
+              onClick={onCloseSheet}
+              className="fixed bg-card inset-0 z-50"
+              aria-hidden="true"
+            />
+          )
+      )}
+
+      {transitions(
+        (style, item) =>
+          item && (
+            <div
+              onClick={onCloseSheet}
+              className={cn(
+                "fixed flex w-screen xxl:min-w-[400px] xxl:w-fit z-50 h-screen justify-end",
+                itemsPosition.rootContainer,
+                rootContainerClassName
+              )}
+            >
+              <X
+                onClick={onCloseSheet}
+                className={cn(
+                  "fixed xxl:static z-[51] text-primary-foreground bg-primary cursor-pointer rounded-full h-6 w-7 p-1 sm:m-4 m-2 hover:bg-primary/90 xxl:hover:bg-primary/90 transition-colors",
+                  itemsPosition.icon,
+                  iconClassName
+                )}
+              />
+              <animated.div
+                style={style}
+                className={cn(
+                  "h-full w-full z-50 backdrop-blur-lg bg-white/10 border border-white/20 shadow-lg",
+                  mainContainerClassName
+                )}
+                role="dialog"
+                aria-modal="true"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {children}
+              </animated.div>
+            </div>
+          )
+      )}
+    </>,
+    document.body
+  );
+}

package/src/templates/text/ShinyText.stories.tsx

@@ -0,0 +1,43 @@
+import { ShiningText } from "./ShinyText";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ShiningText> = {
+  title: "Components/ShiningText",
+  component: ShiningText,
+  args: {
+    text: "Loading...",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ShiningText>;
+
+export const Default: Story = {
+  args: {
+    text: "Loading...",
+    className: "text-4xl font-bold",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    text: "Loading...",
+    className: "text-6xl from-black via-gray-100 to-black font-extrabold",
+  },
+};
+
+export const CustomGradient: Story = {
+  args: {
+    text: "Custom Gradient",
+    className:
+      "text-5xl font-semibold from-black via-white to-blue-400 font-extrabold",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    text: "Loading...",
+    className: "text-md font-medium from-black via-gray-100 to-black",
+  },
+};

package/src/templates/text/ShinyText.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { useSpring, animated } from "@react-spring/web";
+// import { cn } from "../../utils/cn";
+import { cn } from "@/utils/cn";
+
+interface ShiningTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+  text: string;
+}
+
+export function ShiningText({ text, className, ...props }: ShiningTextProps) {
+  // Animate strictly left → right
+  const styles = useSpring({
+    from: { backgroundPosition: "-100% 0%" }, // start offscreen left
+    to: { backgroundPosition: "100% 0%" }, // end offscreen right
+    loop: true,
+    config: { duration: 2000 },
+  });
+
+  return (
+    <animated.span
+      style={{
+        backgroundSize: "200% 50%",
+        ...styles,
+      }}
+      className={cn(
+        "bg-gradient-to-r from-gray-300 via-white to-gray-300", // left→right gradient
+        "bg-clip-text text-transparent",
+        className
+      )}
+      {...props}
+    >
+      {text}
+    </animated.span>
+  );
+}

package/tsconfig.json

@@ -6,7 +6,8 @@
     "baseUrl": "src",
     "ignoreDeprecations": "6.0",
     "paths": {
-      "@/utils/*": ["utils/*"]
+      "@/utils/*": ["utils/*"],
+      "@/*": ["*"]
     }
   }
 }