notionsoft-ui 1.0.5 → 1.0.6

package/package.json

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

package/src/templates/boolean-status-button/BooleanStatusButton.tsx

@@ -1,5 +1,5 @@
-// import { cn } from "../../utils/cn";
-import { cn } from "@/utils/cn";
+import { cn } from "../../utils/cn";
+// import { cn } from "@/utils/cn";
 
 export interface BooleanStatusButtonProps {
   getColor: () => {

package/src/templates/button/button.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-// import { cn } from "../../utils/cn";
-import { cn } from "@/utils/cn";
+import { cn } from "../../utils/cn";
+// import { cn } from "@/utils/cn";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary" | "warning" | "success";

package/src/templates/button-spinner/ButtonSpinner.stories.tsx

@@ -0,0 +1,58 @@
+import Button from "../button/button";
+import ButtonSpinner from "./button-spinner";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ButtonSpinner> = {
+  title: "Components/ButtonSpinner",
+  component: ButtonSpinner,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    loading: { control: "boolean" },
+    className: { control: "text" },
+    children: { control: "text" },
+  },
+};
+
+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
+------------------------------ */
+
+export const Default: Story = {
+  render: Template,
+  args: {
+    loading: false,
+    children: "Save",
+  },
+};
+
+export const Loading: Story = {
+  render: Template,
+  args: {
+    loading: true,
+    children: "Saving...",
+  },
+};
+
+export const WithCustomClass: Story = {
+  render: Template,
+  args: {
+    loading: true,
+    className: "text-blue-600 font-semibold",
+    children: "Processing...",
+  },
+};

package/src/templates/button-spinner/button-spinner.tsx

@@ -0,0 +1,26 @@
+import { cn } from "../../utils/cn";
+// 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;
+  return (
+    <>
+      {loading && (
+        <div className="relative w-[16px] h-[16px]">
+          {/* <!-- Ring --> */}
+          <div
+            className="w-[16px] h-[16px] rounded-full animate-spin absolute
+              border border-solid border-secondary border-t-transparent"
+          />
+        </div>
+      )}
+      <h1 className={cn("", className)}>{children}</h1>
+    </>
+  );
+}

package/src/templates/circle-loader/circle-loader.tsx

@@ -1,5 +1,5 @@
-import { cn } from "@/utils/cn";
-// import { cn } from "../../utils/cn";
+// import { cn } from "@/utils/cn";
+import { cn } from "../../utils/cn";
 
 export interface CircleLoaderProps {
   className?: string;

package/src/templates/sheet/AnimatedSheet.tsx

@@ -1,5 +1,5 @@
-// import { cn } from "../../utils/cn";
-import { cn } from "@/utils/cn";
+import { cn } from "../../utils/cn";
+// import { cn } from "@/utils/cn";
 
 import { useTransition, animated } from "@react-spring/web";
 import { X } from "lucide-react";

package/src/templates/shining-text/shining-text.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useSpring, animated } from "@react-spring/web";
-// import { cn } from "../../utils/cn";
-import { cn } from "@/utils/cn";
+import { cn } from "../../utils/cn";
+// import { cn } from "@/utils/cn";
 
 interface ShiningTextProps extends React.HTMLAttributes<HTMLSpanElement> {
   text: string;