warqadui 0.0.8 → 0.0.11

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

@@ -1,151 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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

@@ -1,25 +0,0 @@
-{
-  "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

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

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

@@ -1,11 +0,0 @@
-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,
-  },
-});