warqadui 0.0.4 → 0.0.6

package/apps/dev-app/src/pages/Modals.tsx

@@ -0,0 +1,151 @@
+import { useState } from "react";
+import {
+  Modal,
+  Button,
+  CodeBlock,
+  Card,
+  LoadingSpin,
+  PageHeader,
+  useModal,
+} from "warqadui";
+
+const ModalsShowcase = () => {
+  const basicModal = useModal();
+  const loadingModal = useModal();
+  const [isModalLoading, setIsModalLoading] = useState(false);
+
+  const triggerLoadingModal = () => {
+    loadingModal.open();
+    setIsModalLoading(true);
+    setTimeout(() => setIsModalLoading(false), 3000);
+  };
+
+  const importCode = `import { Modal, useModalBox } from "warqadui";`;
+
+  const hookUsageCode = `const modal = useModalBox();\n\n<Button onClick={modal.open}>Open</Button>\n\n<Modal \n  isOpen={modal.isOpen} \n  onClose={modal.close} \n  title="Title"\n>\n  Content\n</Modal>`;
+
+  const loadingUsageCode = `<Modal \n  isOpen={isOpen} \n  onClose={onClose} \n  title="Processing"\n  isLoading={true}\n>\n  Blurred content...\n</Modal>`;
+
+  return (
+    <div className="p-8 space-y-12 pb-20">
+      <PageHeader
+        title="Modals"
+        description="Premium, animated dialogs with built-in loading states and iOS-inspired aesthetics."
+      />
+
+      {/* Quick Start */}
+      <section className="space-y-4">
+        <h2 className="text-xl font-bold">Usage</h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
+          <Card variant="flat" className="space-y-3">
+            <p className="text-sm font-medium">1. Simple Import</p>
+            <CodeBlock code={importCode} />
+          </Card>
+          <Card variant="flat" className="space-y-3">
+            <p className="text-sm font-medium">
+              2. Recommended: useModalBox hook
+            </p>
+            <CodeBlock code={hookUsageCode} className="text-xs" />
+          </Card>
+        </div>
+      </section>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <Card className="flex flex-col justify-between">
+          <div>
+            <Card.Header>
+              <Card.Title>Basic Modal</Card.Title>
+              <Card.Description>
+                Simple dialog with a title and close button.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="pb-6">
+              <Button
+                onClick={basicModal.open}
+                variant="primary"
+                className="w-full"
+              >
+                Open Basic Modal
+              </Button>
+            </Card.Content>
+          </div>
+          <CodeBlock
+            code={buttonUsageHtml(basicModal.isOpen)}
+            className="text-xs"
+          />
+        </Card>
+
+        <Card className="flex flex-col justify-between">
+          <div>
+            <Card.Header>
+              <Card.Title>Loading State</Card.Title>
+              <Card.Description>
+                Built-in loading overlay that blurs and protects content.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="pb-6">
+              <Button
+                onClick={triggerLoadingModal}
+                variant="secondary"
+                className="w-full"
+              >
+                Open Loading Modal (3s)
+              </Button>
+            </Card.Content>
+          </div>
+          <CodeBlock code={loadingUsageCode} className="text-xs" />
+        </Card>
+      </div>
+
+      <Modal
+        isOpen={basicModal.isOpen}
+        onClose={basicModal.close}
+        title="Welcome to Warqad"
+      >
+        <div className="space-y-4">
+          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+            This modal features a premium{" "}
+            <span className="text-indigo-500 font-medium">squircle</span>{" "}
+            rounding and smooth entrance.
+          </p>
+          <Button
+            onClick={basicModal.close}
+            variant="primary"
+            className="w-full"
+          >
+            Got it, thanks!
+          </Button>
+        </div>
+      </Modal>
+
+      <Modal
+        isOpen={loadingModal.isOpen}
+        onClose={loadingModal.close}
+        title="System Update"
+        isLoading={isModalLoading}
+      >
+        <div className="space-y-4">
+          <div className="flex items-center gap-3 p-4 bg-blue-50 dark:bg-blue-500/10 rounded-2xl text-blue-700 dark:text-blue-400">
+            <LoadingSpin size="sm" />
+            <span className="text-sm font-medium">
+              Synchronizing with cloud...
+            </span>
+          </div>
+          <Button
+            onClick={loadingModal.close}
+            variant="outline"
+            className="w-full"
+            disabled={isModalLoading}
+          >
+            Cancel Process
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+const buttonUsageHtml = (isOpen: boolean) =>
+  `<Modal \n  isOpen={${isOpen}} \n  onClose={() => {}} \n  title="..."\n>\n  ...\n</Modal>`;
+
+export default ModalsShowcase;

package/apps/dev-app/src/pages/Spins.tsx

@@ -0,0 +1,161 @@
+import { useState } from "react";
+import {
+  ClassicSpin,
+  OverlaySpin,
+  LoadingSpin,
+  Button,
+  CodeBlock,
+  Card,
+  PageHeader,
+} from "warqadui";
+
+const SpinsShowcase = () => {
+  const [showClassic, setShowClassic] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  const triggerClassic = () => {
+    setShowClassic(true);
+    setTimeout(() => setShowClassic(false), 3000);
+  };
+
+  const triggerOverlay = () => {
+    setShowOverlay(true);
+    setTimeout(() => setShowOverlay(false), 3000);
+  };
+
+  const importCode = `import { \n  ClassicSpin, \n  OverlaySpin, \n  LoadingSpin \n} from "warqadui";`;
+
+  const classicCode = `<ClassicSpin msg="Loading dashboard..." />`;
+
+  const overlayCode = `<div className="relative h-64">\n  {/* Content */}\n  {isLoading && <OverlaySpin msg="Saving changes..." />}\n</div>`;
+
+  const rawCode = `<LoadingSpin \n  size="md" \n  className="text-blue-600" \n/>`;
+
+  return (
+    <div className="p-8 space-y-12 pb-20">
+      <PageHeader
+        title="Spins & Loaders"
+        description="A collection of premium loading states designed for the Warqad ecosystem. Includes full-page modals, container-aware overlays, and raw SVG spinners."
+      />
+
+      {/* Quick Start Documentation */}
+      <section className="space-y-4">
+        <h2 className="text-xl font-bold flex items-center gap-2"> Usage </h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
+          <Card variant="flat">
+            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium mb-3">
+              1. Import components:
+            </p>
+            <CodeBlock code={importCode} />
+          </Card>
+          <Card variant="flat">
+            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium mb-3">
+              2. Example Usage:
+            </p>
+            <CodeBlock code={rawCode} />
+          </Card>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-xl font-bold mb-6">Live Demos</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Classic Spin Card */}
+          <Card className="relative overflow-hidden group">
+            <Card.Header>
+              <Card.Title>Classic Spin</Card.Title>
+              <Card.Description>
+                Centered modal indicator for full-page or section loading.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-4">
+              <Button
+                onClick={triggerClassic}
+                variant="primary"
+                className="w-full"
+              >
+                Preview (3s)
+              </Button>
+              <CodeBlock code={classicCode} className="text-[11px]" />
+            </Card.Content>
+
+            {showClassic && <ClassicSpin msg="Loading dashboard..." />}
+          </Card>
+
+          {/* Overlay Spin Card */}
+          <Card className="relative overflow-hidden group">
+            <Card.Header>
+              <Card.Title>Overlay Spin</Card.Title>
+              <Card.Description>
+                Container-bound overlay. Parent must be{" "}
+                <code className="text-[10px] px-1 bg-gray-100 dark:bg-gray-700 rounded text-blue-500">
+                  relative
+                </code>
+                .
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-4">
+              <div className="relative h-24 w-full bg-gray-50 dark:bg-gray-900 rounded-xl flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600">
+                <span className="text-xs text-gray-400">Content Area</span>
+                {showOverlay && <OverlaySpin msg="Saving changes..." />}
+              </div>
+              <Button
+                onClick={triggerOverlay}
+                variant="secondary"
+                className="w-full"
+              >
+                Preview (3s)
+              </Button>
+              <CodeBlock code={overlayCode} className="text-[10px]" />
+            </Card.Content>
+          </Card>
+
+          {/* Raw LoadingSpin Card */}
+          <Card className="flex flex-col justify-between">
+            <div>
+              <Card.Header>
+                <Card.Title>LoadingSpin</Card.Title>
+                <Card.Description>
+                  Lightweight SVG spinner for inline placements.
+                </Card.Description>
+              </Card.Header>
+              <Card.Content>
+                <div className="flex items-center justify-between bg-gray-50 dark:bg-gray-900 p-4 rounded-xl mb-4">
+                  <div className="flex flex-col items-center gap-1">
+                    <LoadingSpin size="sm" className="text-blue-500" />
+                    <span className="text-[10px] text-gray-400">Small</span>
+                  </div>
+                  <div className="flex flex-col items-center gap-1">
+                    <LoadingSpin size="md" className="text-indigo-500" />
+                    <span className="text-[10px] text-gray-400">Medium</span>
+                  </div>
+                  <div className="flex flex-col items-center gap-1">
+                    <LoadingSpin size="lg" className="text-purple-500" />
+                    <span className="text-[10px] text-gray-400">Large</span>
+                  </div>
+                </div>
+              </Card.Content>
+            </div>
+            <CodeBlock code={rawCode} className="text-[11px]" />
+          </Card>
+        </div>
+      </section>
+
+      <Card
+        variant="glass"
+        className="bg-blue-50/50 dark:bg-blue-900/10 border-blue-100 dark:border-blue-900/20"
+      >
+        <Card.Title className="text-blue-900 dark:text-blue-400 mb-2">
+          Documentation Note
+        </Card.Title>
+        <Card.Description className="text-blue-700 dark:text-blue-600">
+          The <code>CodeBlock</code> and <code>Card</code> components above are
+          also part of the <strong>warqadui</strong> package. Use them to build
+          beautiful documentation or high-end dashboard interfaces.
+        </Card.Description>
+      </Card>
+    </div>
+  );
+};
+
+export default SpinsShowcase;

package/apps/dev-app/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/apps/dev-app/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/apps/dev-app/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 3000,
+  },
+});

package/package.json

@@ -1,57 +1,18 @@
 {
   "name": "warqadui",
-  "version": "0.0.4",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
+  "version": "0.0.6",
+  "workspaces": [
+    "apps/*",
+    "packages/*"
   ],
   "scripts": {
-    "build": "tsup src/index.ts src/styles.css --format esm,cjs --dts --injectStyle",
-    "dev": "tsup src/index.ts src/styles.css --format esm,cjs --dts --watch --injectStyle",
-    "prepublish": "npm run build"
-  },
-  "peerDependencies": {
-    "antd": "^6.3.1",
-    "framer-motion": ">=10",
-    "react": ">=18",
-    "react-dom": ">=18",
-    "react-router-dom": ">=6",
-    "tailwindcss": ">=3.4.0"
-  },
-  "dependencies": {
-    "clsx": "^2.1.0",
-    "dayjs": "^1.11.10",
-    "lucide-react": "^0.344.0",
-    "moment": "^2.30.1",
-    "tailwind-merge": "^2.2.1",
-    "zod": "^3.22.4",
-    "zustand": "^4.5.0"
+    "dev": "npm run dev -w dev-app",
+    "build:ui": "npm run build -w warqadui",
+    "dev:ui": "npm run dev -w warqadui",
+    "dev:app": "npm run dev -w dev-app"
   },
   "devDependencies": {
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-router-dom": "^5.3.3",
-    "antd": "^6.3.1",
-    "autoprefixer": "^10.4.17",
-    "clsx": "^2.1.0",
-    "dayjs": "^1.11.10",
-    "lucide-react": "^0.344.0",
-    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1",
-    "tsup": "^8.0.2",
-    "typescript": "^5.3.3",
-    "zod": "^3.22.4",
-    "zustand": "^4.5.0"
+    "concurrently": "^9.2.1",
+    "typescript": "^5.3.3"
   }
 }