notionsoft-ui 1.0.6 → 1.0.8

package/cli/index.cjs

@@ -10,10 +10,10 @@ const { execSync } = require("child_process");
    Helper: get template path
 ------------------------------- */
 function getTemplateFile(component) {
-  // Library template: src/templates/button/button.tsx
+  // Library template: src/notion-ui/button/button.tsx
   return path.join(
     __dirname,
-    "../src/templates",
+    "../src/notion-ui",
     component,
     component + ".tsx"
   );
@@ -153,7 +153,7 @@ program
   .command("list")
   .description("List available components")
   .action(() => {
-    const templatesDir = path.join(__dirname, "../src/templates");
+    const templatesDir = path.join(__dirname, "../src/notion-ui");
     const components = fs.readdirSync(templatesDir).filter((folder) => {
       const file = path.join(templatesDir, folder, folder + ".tsx");
       return fs.existsSync(file);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

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

@@ -0,0 +1,54 @@
+import {
+  useInView,
+  animated,
+  type IntersectionArgs,
+  SpringValue,
+  type AnimationResult,
+  Controller,
+} from "@react-spring/web";
+import { useCallback, useState } from "react";
+
+export interface AnimatedItemProps {
+  springProps: {
+    from?: object;
+    to?: object | object[];
+    delay?: number;
+    immediate?: boolean;
+    reset?: boolean;
+    reverse?: boolean;
+    pause?: boolean;
+    onStart?: (
+      result: AnimationResult,
+      spring: Controller | SpringValue,
+      item?: any
+    ) => void;
+    config?: {
+      mass: number;
+      friction: number;
+      tension: number;
+    };
+  };
+  intersectionArgs: IntersectionArgs;
+  children: React.ReactNode | ((inView: boolean) => React.ReactNode);
+}
+
+export function AnimatedItem(props: AnimatedItemProps) {
+  const [inView, setInView] = useState(false);
+  const { springProps, intersectionArgs, children } = props;
+  const defaultOnStart = useCallback(
+    () => {
+      setInView(true);
+    },
+    [] // no dependencies, memoized once
+  );
+  const composedOnStart = springProps.onStart ?? defaultOnStart;
+
+  const springConfig = { ...springProps, onStart: composedOnStart };
+  const [ref, springs] = useInView(() => springConfig, intersectionArgs);
+
+  return (
+    <animated.div ref={ref} style={springs}>
+      {typeof children === "function" ? children(inView) : children}
+    </animated.div>
+  );
+}

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

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

package/src/{templates → notion-ui}/boolean-status-button/BooleanStatusButton.stories.tsx

@@ -1,5 +1,5 @@
+import { BooleanStatusButton } from "./BooleanStatusButton";
 import type { Meta, StoryObj } from "@storybook/react";
-import BooleanStatusButton from "./BooleanStatusButton";
 
 // --------------------------------------------
 // Status options used for Storybook showcase

package/src/{templates → notion-ui}/boolean-status-button/BooleanStatusButton.tsx

@@ -9,7 +9,7 @@ export interface BooleanStatusButtonProps {
   className?: string;
 }
 
-export default function BooleanStatusButton(props: BooleanStatusButtonProps) {
+export function BooleanStatusButton(props: BooleanStatusButtonProps) {
   const { getColor, className } = props;
   const data = getColor();
 

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

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

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

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

package/src/{templates → notion-ui}/button-spinner/ButtonSpinner.stories.tsx

@@ -1,5 +1,5 @@
 import Button from "../button/button";
-import ButtonSpinner from "./button-spinner";
+import { ButtonSpinner } from "./button-spinner";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof ButtonSpinner> = {

package/src/{templates → notion-ui}/button-spinner/button-spinner.tsx

@@ -7,7 +7,7 @@ export interface IButtonSpinnerProps {
   className?: string;
 }
 
-export default function ButtonSpinner(props: IButtonSpinnerProps) {
+export function ButtonSpinner(props: IButtonSpinnerProps) {
   const { loading, children, className } = props;
   return (
     <>

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

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

package/src/{templates → notion-ui}/circle-loader/CircleLoader.stories.tsx

@@ -1,4 +1,4 @@
-import CircleLoader from "../circle-loader/circle-loader"; // Adjust the import path as needed
+import { CircleLoader } from "../circle-loader/circle-loader"; // Adjust the import path as needed
 import { CircleLoaderProps } from "./circle-loader";
 
 // Meta information for Storybook

package/src/{templates → notion-ui}/circle-loader/circle-loader.tsx

@@ -8,7 +8,7 @@ export interface CircleLoaderProps {
   parentClassName?: string;
 }
 
-export default function CircleLoader(props: CircleLoaderProps) {
+export function CircleLoader(props: CircleLoaderProps) {
   const { label, className, labelclassname, parentClassName, ...restProps } =
     props;
 

package/src/notion-ui/circle-loader/index.ts

@@ -0,0 +1,3 @@
+import { CircleLoader } from "./circle-loader";
+
+export default CircleLoader;

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

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./input";
+import { Search, AlertTriangle } from "lucide-react";
+
+const meta: Meta<typeof Input> = {
+  title: "Form/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: { control: "text" },
+    requiredHint: { control: "text" },
+    errorMessage: { control: "text" },
+    readOnly: { control: "boolean" },
+    measurement: {
+      control: "select",
+      options: ["sm", "md", "lg", undefined],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+const Template = (args) => (
+  <div className="w-[350px]">
+    <Input {...args} />
+  </div>
+);
+
+export const Default: Story = {
+  render: Template,
+  args: {
+    label: "Username",
+    placeholder: "Enter your username",
+    measurement: "md",
+  },
+};
+
+export const WithStartIcon: Story = {
+  render: Template,
+  args: {
+    label: "Search",
+    placeholder: "Search …",
+    startContent: <Search size={18} />,
+    measurement: "md",
+  },
+};
+
+export const WithEndIcon: Story = {
+  render: Template,
+  args: {
+    label: "Email",
+    placeholder: "you@example.com",
+    endContent: <AlertTriangle size={20} color="orange" />,
+    measurement: "md",
+  },
+};
+
+export const RequiredField: Story = {
+  render: Template,
+  args: {
+    label: "Password",
+    placeholder: "Enter password",
+    required: true,
+    requiredHint: "* Required",
+    measurement: "md",
+  },
+};
+
+export const WithErrorMessage: Story = {
+  render: Template,
+  args: {
+    label: "Email",
+    placeholder: "example@mail.com",
+    errorMessage: "Invalid email format",
+    measurement: "md",
+  },
+};
+
+export const ReadOnly: Story = {
+  render: Template,
+  args: {
+    label: "Read Only Field",
+    value: "Can't change this",
+    readOnly: true,
+    measurement: "md",
+  },
+};
+
+export const SizesShowcase: Story = {
+  render: () => (
+    <div className="space-y-5 w-[350px]">
+      <Input label="Small" placeholder="Small size" measurement="sm" />
+      <Input label="Medium" placeholder="Medium size" measurement="md" />
+      <Input label="Large" placeholder="Large size" measurement="lg" />
+    </div>
+  ),
+};

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

@@ -0,0 +1,3 @@
+import { Input } from "./input";
+
+export default Input;

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

@@ -0,0 +1,193 @@
+import React, { useMemo } from "react";
+// import { cn } from "@/utils/cn";
+import { cn } from "../../utils/cn";
+import AnimatedItem from "@/components/animated-item";
+// import AnimatedItem from "../animated-item";
+
+export type NastranInputSize = "sm" | "md" | "lg";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  startContent?: React.ReactNode;
+  requiredHint?: string;
+  label?: string;
+  endContent?: React.ReactNode;
+  errorMessage?: string;
+  parentClassName?: string;
+  measurement: NastranInputSize;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type,
+      requiredHint,
+      startContent,
+      endContent,
+      parentClassName = "",
+      measurement = "md",
+      errorMessage,
+      label,
+      readOnly,
+      ...rest
+    },
+    ref
+  ) => {
+    const hasError = !!errorMessage;
+
+    const inputPaddingClass = startContent
+      ? "rtl:pr-[42px] ltr:ps-[42px]"
+      : "rtl:pr-[12px] ltr:ps-[12px]";
+
+    const heightStyle = useMemo(
+      () =>
+        measurement == "lg"
+          ? {
+              height: "50px",
+              paddingBottom: "pb-[3px]",
+              endContent: label
+                ? "top-12 -translate-y-1/2"
+                : "top-[26px] -translate-y-1/2",
+              startContent: label
+                ? "top-12 -translate-y-1/2"
+                : "top-[26px] -translate-y-1/2",
+              required: "top-[2px]",
+            }
+          : measurement == "md"
+          ? {
+              height: "44px",
+              paddingBottom: "pb-[2px]",
+              endContent: label
+                ? "top-[45px] -translate-y-1/2"
+                : "top-[22px] -translate-y-1/2",
+              startContent: label
+                ? "top-[45px] -translate-y-1/2"
+                : "top-[22px] -translate-y-1/2",
+              required: "top-[4px]",
+            }
+          : {
+              height: "40px",
+              paddingBottom: "pb-[2px]",
+              endContent: label
+                ? "top-[44px] -translate-y-1/2"
+                : "top-[20px] -translate-y-1/2",
+              startContent: label
+                ? "top-[44px] -translate-y-1/2"
+                : "top-[20px] -translate-y-1/2",
+              required: "top-[4px]",
+            },
+      []
+    );
+    return (
+      <div className={cn(parentClassName, "flex flex-col justify-end")}>
+        <div
+          className={cn(
+            "relative select-none h-fit rtl:text-lg-rtl ltr:text-lg-ltr"
+          )}
+        >
+          {/* Start Content */}
+          {startContent && (
+            <span
+              className={cn(
+                "absolute flex items-center ltr:left-[12px] rtl:right-[12px]",
+                heightStyle.startContent
+              )}
+            >
+              {startContent}
+            </span>
+          )}
+
+          {/* End Content */}
+          {endContent && (
+            <span
+              className={cn(
+                "absolute flex items-center ltr:right-[5px] rtl:left-[5px]",
+                heightStyle.endContent
+              )}
+            >
+              {endContent}
+            </span>
+          )}
+
+          {/* Required Hint */}
+          {requiredHint && (
+            <span
+              className={cn(
+                "absolute font-semibold text-red-600 rtl:text-[13px] ltr:text-[11px] ltr:right-[10px] rtl:left-[10px]",
+                heightStyle.required
+              )}
+            >
+              {requiredHint}
+            </span>
+          )}
+
+          {/* Label */}
+          {label && (
+            <label
+              htmlFor={label}
+              className={cn(
+                "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+              )}
+            >
+              {label}
+            </label>
+          )}
+
+          {/* Input Field */}
+
+          <input
+            ref={ref}
+            type={type}
+            data-slot="input"
+            readOnly={readOnly}
+            style={{
+              height: heightStyle.height,
+            }}
+            className={cn(
+              "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+              "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+              "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 rounded focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card dark:bg-black/30",
+              "focus-visible:border-fourth/60",
+              "[&::-webkit-outer-spin-button]:appearance-none",
+              "[&::-webkit-inner-spin-button]:appearance-none",
+              "[-moz-appearance:textfield]",
+              inputPaddingClass,
+              hasError ? "border-red-400 border" : "border-primary/25",
+              readOnly && "cursor-not-allowed",
+              heightStyle.paddingBottom,
+              className
+            )}
+            {...rest}
+          />
+        </div>
+
+        {/* Error Message */}
+        {hasError && (
+          <AnimatedItem
+            springProps={{
+              from: {
+                opacity: 0,
+                transform: "translateY(-8px)",
+              },
+              config: {
+                mass: 1,
+                tension: 210,
+                friction: 20,
+              },
+              to: {
+                opacity: 1,
+                transform: "translateY(0px)",
+              },
+            }}
+            intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
+          >
+            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+              {errorMessage}
+            </h1>
+          </AnimatedItem>
+        )}
+      </div>
+    );
+  }
+);

package/src/{templates → notion-ui}/sheet/AnimatedSheet.stories.tsx

@@ -1,5 +1,5 @@
 import Button from "../button/button";
-import AnimatedSheet from "./AnimatedSheet";
+import { AnimatedSheet } from "./AnimatedSheet";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 

package/src/{templates → notion-ui}/sheet/AnimatedSheet.tsx

@@ -22,7 +22,7 @@ type AnimatedSheetProps = {
   animate: AnimateType;
 };
 
-export default function AnimatedSheet({
+export function AnimatedSheet({
   open,
   onClose,
   children,

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

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

package/src/notion-ui/shining-text/index.ts

@@ -0,0 +1,3 @@
+import { ShiningText } from "./shining-text";
+
+export default ShiningText;

package/tsconfig.json

@@ -7,6 +7,7 @@
     "ignoreDeprecations": "6.0",
     "paths": {
       "@/utils/*": ["utils/*"],
+      "@/components/*": ["notion-ui/*"],
       "@/*": ["*"]
     }
   }