create-reactivite 1.3.0 → 1.6.0

package/template3/package.json

@@ -1,22 +1,48 @@
-{
-  "name": "rspack-simple",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "rspack serve",
-    "build": "rspack build",
-    "preview": "rspack serve --mode production"
-  },
-  "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "@rspack/cli": "^1.5.0",
-    "@rspack/core": "^1.5.0",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "rspack-simple",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "rspack serve",
+    "build": "rspack build",
+    "preview": "rspack serve --mode production"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@hookform/resolvers": "^5.4.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.21.0",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.6.0",
+    "react": "^19.2.7",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.80.0",
+    "react-resizable-panels": "^4.11.2",
+    "react-router-dom": "^7.18.0",
+    "recharts": "^3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@rspack/cli": "^2.0.8",
+    "@rspack/core": "^2.0.8",
+    "@rspack/dev-server": "^2.1.0",
+    "@tailwindcss/postcss": "^4.3.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8.5.15",
+    "postcss-loader": "^8.2.1",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^6.0.3"
+  }
+}

package/template3/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/template3/rspack.config.mjs

@@ -1,51 +1,59 @@
-import { defineConfig } from '@rspack/cli';
-import { rspack } from '@rspack/core';
-
-export default defineConfig({
-  entry: {
-    main: './src/main.tsx',
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        type: 'css',
-      },
-      {
-        test: /\.(jsx?|tsx?)$/,
-        use: {
-          loader: 'builtin:swc-loader',
-          options: {
-            jsc: {
-              parser: {
-                syntax: 'typescript',
-                tsx: true,
-              },
-              transform: {
-                react: {
-                  runtime: 'automatic',
-                },
-              },
-            },
-          },
-        },
-        type: 'javascript/auto',
-      },
-    ],
-  },
-  plugins: [
-    new rspack.HtmlRspackPlugin({
-      template: './index.html',
-    }),
-  ],
-  experiments: {
-    css: true,
-  },
-  devServer: {
-    port: 5174,
-    historyApiFallback: true,
-  },
-});
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  entry: {
+    main: './src/main.tsx',
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+        use: ['postcss-loader'],
+      },
+      {
+        test: /\.(jsx?|tsx?)$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+            },
+          },
+        },
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+  ],
+  experiments: {
+    css: true,
+  },
+  devServer: {
+    port: 5174,
+    historyApiFallback: true,
+  },
+});

package/template3/src/App.tsx

@@ -1,16 +1,21 @@
-import { AuthorCredit } from './components/author-credit';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Layout } from './components/layout';
+import { Toaster } from '@/components/ui/sonner';
+import Home from './pages/home';
+import About from './pages/about';
+import Contact from './pages/contact';
 
 export default function App() {
   return (
-    <>
-      <div className="app">
-        <div>
-          <span className="badge">Rspack + React + TypeScript</span>
-          <h1>Rspack Simple Starter</h1>
-          <p>Minimal template — extend it however you like.</p>
-        </div>
-      </div>
-      <AuthorCredit />
-    </>
+    <BrowserRouter>
+      <Routes>
+        <Route element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="about" element={<About />} />
+          <Route path="contact" element={<Contact />} />
+        </Route>
+      </Routes>
+      <Toaster position="bottom-center" theme="dark" />
+    </BrowserRouter>
   );
 }

package/template3/src/components/author-credit.tsx

@@ -1,42 +1,42 @@
-const links = [
-  { label: 'GitHub', href: 'https://github.com/javidselimov' },
-  { label: 'LinkedIn', href: 'https://www.linkedin.com/in/javidsalim/' },
-  { label: 'npm', href: 'https://www.npmjs.com/~ubuligan' },
-];
-
-export function AuthorCredit() {
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        bottom: 16,
-        right: 16,
-        zIndex: 50,
-        display: 'flex',
-        alignItems: 'center',
-        gap: 12,
-        padding: '8px 16px',
-        borderRadius: 9999,
-        border: '1px solid #2a2f3a',
-        background: 'rgba(13, 16, 22, 0.8)',
-        backdropFilter: 'blur(8px)',
-        fontSize: 13,
-        color: '#e7eaf0',
-      }}
-    >
-      <strong>Javid Salimov</strong>
-      <span style={{ color: '#3a3f4a' }}>·</span>
-      {links.map((l) => (
-        <a
-          key={l.label}
-          href={l.href}
-          target="_blank"
-          rel="noreferrer"
-          style={{ color: '#8b93a7', textDecoration: 'none' }}
-        >
-          {l.label}
-        </a>
-      ))}
-    </div>
-  );
-}
+const links = [
+  { label: 'GitHub', href: 'https://github.com/javidselimov' },
+  { label: 'LinkedIn', href: 'https://www.linkedin.com/in/javidsalim/' },
+  { label: 'npm', href: 'https://www.npmjs.com/~ubuligan' },
+];
+
+export function AuthorCredit() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: 16,
+        right: 16,
+        zIndex: 50,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        padding: '8px 16px',
+        borderRadius: 9999,
+        border: '1px solid #2a2f3a',
+        background: 'rgba(13, 16, 22, 0.8)',
+        backdropFilter: 'blur(8px)',
+        fontSize: 13,
+        color: '#e7eaf0',
+      }}
+    >
+      <strong>Javid Salimov</strong>
+      <span style={{ color: '#3a3f4a' }}>·</span>
+      {links.map((l) => (
+        <a
+          key={l.label}
+          href={l.href}
+          target="_blank"
+          rel="noreferrer"
+          style={{ color: '#8b93a7', textDecoration: 'none' }}
+        >
+          {l.label}
+        </a>
+      ))}
+    </div>
+  );
+}

package/template3/src/components/layout.tsx

@@ -0,0 +1,59 @@
+import { NavLink, Outlet, useLocation } from 'react-router-dom';
+import { MatrixRain } from './matrix-rain';
+import { AuthorCredit } from './author-credit';
+import { cn } from '@/lib/utils';
+
+const NAV = [
+  { to: '/', label: '~/home', end: true },
+  { to: '/about', label: '~/about' },
+  { to: '/contact', label: '~/contact' },
+];
+
+export function Layout() {
+  const { pathname } = useLocation();
+
+  return (
+    <div className="scanlines relative min-h-screen overflow-x-hidden">
+      <MatrixRain opacity={0.35} />
+
+      {/* top terminal bar */}
+      <header className="sticky top-0 z-20 border-b border-primary/20 bg-background/70 backdrop-blur-sm">
+        <div className="mx-auto flex max-w-5xl items-center justify-between px-5 py-3">
+          <NavLink to="/" className="font-display text-sm font-bold tracking-[0.25em] text-primary text-glow">
+            J.SALIMOV<span className="animate-pulse">_</span>
+          </NavLink>
+          <nav className="flex items-center gap-1 text-xs sm:gap-2 sm:text-sm">
+            {NAV.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.end}
+                className={({ isActive }) =>
+                  cn(
+                    'rounded px-2 py-1 transition-colors duration-150 hover:text-primary hover:text-glow',
+                    isActive
+                      ? 'text-primary text-glow'
+                      : 'text-muted-foreground',
+                  )
+                }
+              >
+                {item.label}
+              </NavLink>
+            ))}
+          </nav>
+        </div>
+      </header>
+
+      <main key={pathname} className="relative z-10 mx-auto max-w-5xl px-5 py-10 sm:py-16">
+        <Outlet />
+      </main>
+
+      <footer className="relative z-10 border-t border-primary/15 py-6 text-center text-xs text-muted-foreground">
+        <span className="text-primary/70">SYS:</span> connection stable —
+        decoded by Rspack + shadcn/ui
+      </footer>
+
+      <AuthorCredit />
+    </div>
+  );
+}

package/template3/src/components/matrix-rain.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+
+const GLYPHS =
+  'アイウエオカキクケコサシスセソタチツテトナニヌネノﾊﾋﾌﾍﾎ0123456789:.=*+-<>¦JAVIDSALIMOV';
+
+export function MatrixRain({ opacity = 0.4 }: { opacity?: number }) {
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    let raf = 0;
+    let cols = 0;
+    let drops: number[] = [];
+    const fontSize = 16;
+
+    const resize = () => {
+      canvas.width = canvas.offsetWidth * devicePixelRatio;
+      canvas.height = canvas.offsetHeight * devicePixelRatio;
+      ctx.scale(devicePixelRatio, devicePixelRatio);
+      cols = Math.floor(canvas.offsetWidth / fontSize);
+      drops = Array.from({ length: cols }, () =>
+        Math.floor((Math.random() * canvas.offsetHeight) / fontSize),
+      );
+    };
+    resize();
+
+    let frame = 0;
+    const draw = () => {
+      frame++;
+      // throttle to ~20fps for that staggered glyph cadence
+      if (frame % 3 === 0) {
+        ctx.fillStyle = 'rgba(4, 7, 10, 0.08)';
+        ctx.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
+        ctx.font = `${fontSize}px 'Share Tech Mono', monospace`;
+
+        for (let i = 0; i < drops.length; i++) {
+          const char = GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
+          const x = i * fontSize;
+          const y = drops[i] * fontSize;
+          // lead glyph bright, trail dim
+          ctx.fillStyle = Math.random() > 0.975 ? '#d5ffe4' : '#1fd65f';
+          ctx.fillText(char, x, y);
+
+          if (y > canvas.offsetHeight && Math.random() > 0.975) drops[i] = 0;
+          drops[i]++;
+        }
+      }
+      raf = requestAnimationFrame(draw);
+    };
+    draw();
+
+    window.addEventListener('resize', resize);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={ref}
+      aria-hidden
+      className="pointer-events-none fixed inset-0 h-full w-full"
+      style={{ opacity }}
+    />
+  );
+}

package/template3/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }