create-react-scaffold-cli 1.0.2 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-scaffold-cli",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/templates/base/{readme.md → README.md}

@@ -1,95 +1,165 @@
-# React Feature‑First Scaffold
-
-## Purpose
-
-This repository is an **internal, opinionated React scaffold** designed for large-scale frontend applications. It enforces a **feature‑first architecture**, clear ownership boundaries, and predictable patterns so teams can scale safely without architectural drift.
-
-This scaffold will later be distributed via an internal **NPM CLI** (similar to `create-react-app`) to bootstrap projects with best practices preconfigured.
-
----
-
-## Core Principles
-
-- **Feature-first, not layer-first**
-- **Explicit boundaries** between app / features / shared
-- **Locality of logic** (keep things close to where they are used)
-- **Predictable imports** and naming conventions
-- **Low cognitive load** for new developers
-
----
-
-## Tech Stack
-
-### Runtime
-
-- **React 19** – UI layer
-- **Vite** – fast dev & build tooling
-
-### Styling
-
-- **Tailwind CSS** – utility-first styling
-- **tailwind-merge** – class conflict resolution
-- **clsx** – conditional class composition
-
-### Data & State
-
-- **@tanstack/react-query** – server-state management
-- **Axios** – HTTP client
-
-### UI Utilities
-
-- **Radix UI** – accessible headless components
-- **react-hot-toast** – notifications
-- **react-icons** – icon system
-
-### Code Quality
-
-- **ESLint** – linting with strict rules
-- **Prettier** – formatting
-- **Husky + lint-staged** – pre-commit enforcement
-
----
-
-## High-Level Folder Structure
-
-```txt
-src/
-  app/        # Application bootstrap & global wiring
-  features/   # Business features (isolated, self-contained)
-  shared/     # Cross-feature reusable modules
-```
-
-Each top-level folder has **its own README** explaining rules and responsibilities.
-
----
-
-## Installation (WIP)
-
-> CLI installation instructions.
-
-```bash
-npx create-react-scaffold-cli
-
-```
-
----
-
-## Documentation Index
-
-- `src/app/README.md` – Application bootstrap & providers
-- `src/features/README.md` – Feature architecture rules
-- `src/shared/README.md` – Shared modules & reuse policy
-
----
-
-## Philosophy
-
-> **Architecture is a product feature.**
-
-This scaffold exists to reduce decision fatigue, prevent architectural erosion, and help teams move faster with confidence.
-
----
-
-## Ownership
-
-This scaffold is maintained internally and should be treated as a **living standard**. Changes must be intentional, documented, and agreed upon by the frontend team.
+# React Feature‑First Scaffold
+
+## Purpose
+
+This repository is an **opinionated React scaffold** designed for large-scale frontend applications. It enforces a **feature‑first architecture**, clear ownership boundaries, and predictable patterns so teams can scale safely without architectural drift.
+
+This scaffold will later be distributed via an internal **NPM CLI** (similar to `create-react-app`) to bootstrap projects with best practices preconfigured.
+
+---
+
+## Core Principles
+
+- **Feature-first, not layer-first**
+- **Explicit boundaries** between app / features / shared
+- **Locality of logic** (keep things close to where they are used)
+- **Predictable imports** and naming conventions
+- **Low cognitive load** for new developers
+
+---
+
+## Tech Stack
+
+### Runtime
+
+- **React 19** – UI layer
+- **Vite** – fast dev & build tooling
+
+### Styling
+
+- **Tailwind CSS** – utility-first styling
+- **tailwind-merge** – class conflict resolution
+- **clsx** – conditional class composition
+
+### Data & State
+
+- **@tanstack/react-query** – server-state management
+- **Axios** – HTTP client
+
+### UI Utilities
+
+- **Radix UI** – accessible headless components
+- **react-hot-toast** – notifications
+- **react-icons** – icon system
+
+### Code Quality
+
+- **ESLint** – linting with strict rules
+- **Prettier** – formatting
+- **Husky + lint-staged** – pre-commit enforcement
+
+---
+
+## High-Level Folder Structure
+
+```txt
+src/
+  app/        # Application bootstrap & global wiring
+  features/   # Business features (isolated, self-contained)
+  shared/     # Cross-feature reusable modules
+```
+
+Each top-level folder has **its own README** explaining rules and responsibilities.
+
+---
+
+## Installation
+
+> CLI installation instructions.
+
+```bash
+npx create-react-scaffold-cli
+
+```
+
+---
+
+## Documentation Index
+
+- `src/app/README.md` – Application bootstrap & providers
+- `src/features/README.md` – Feature architecture rules
+- `src/shared/README.md` – Shared modules & reuse policy
+
+---
+
+## Set Up
+
+### Install dependencies
+
+```bash
+npm i
+```
+
+### Run application
+
+---
+
+```
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+### Lint application
+
+```
+npm run lint
+```
+
+### Prettify code
+
+```
+npm run prettier
+```
+
+### Build application
+
+```
+npm run build
+```
+
+### Preview application
+
+```
+npm run preview
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+# Learning Resources
+
+## Tailwind CSS
+
+To learn more about `Tailwind CSS`, take a look at the following resources:
+
+- [Tailwind ](https://tailwindcss.com) - Tailwind documentation and related resources.
+
+## Framer Motion
+
+To learn more about `Framer Motion`, take a look at the following resources:
+
+- [Framer Motion](https://www.framer.com/motion) - Framer Motion documentation and related resources.
+
+## React Query
+
+To learn more about `TanStack Query`, take a look at the following resources:
+
+- [TanStack Query](https://tanstack.com/query/latest) - React Query documentation and related resources.
+
+## Nuqs
+
+To learn more about `Nuqs`, take a look at the following resources:
+
+- [Nuqs](https://nuqs.dev/) - React Query documentation and related resources.
+
+## Philosophy
+
+> **Architecture is a product feature.**
+
+This scaffold exists to reduce decision fatigue, prevent architectural erosion, and help teams move faster with confidence.
+
+---
+
+## Ownership
+
+This scaffold is maintained internally and should be treated as a **living standard**. Changes must be intentional, documented, and agreed upon by the frontend team.

package/templates/base/docs/DOCS.md

@@ -0,0 +1,7 @@
+# Scaffold Guides
+
+## Codebase Modules (source of truth)
+
+- [app](../src/app/app.readme.md)
+- [shared](../src/shared/shared.readme.md)
+- [features](../src/features/features.readme.md)

package/templates/base/index.html

@@ -2,15 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/public/icons/react.svg" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <title>vite-project</title>
+    <title>React Scaffold App</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/app/main.jsx"></script>
   </body>
 </html>

package/templates/base/package.json

@@ -32,12 +32,14 @@
     "@tanstack/react-query-devtools": "^5.91.2",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.26.2",
     "nuqs": "^2.8.6",
     "postcss": "^8.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
+    "react-router-dom": "^7.12.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18"
   },

package/templates/base/public/icons/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><g transform="matrix(.05696 0 0 .05696 .647744 2.43826)" fill="none" fill-rule="evenodd"><circle r="50.167" cy="237.628" cx="269.529" fill="#00d8ff"/><g stroke="#00d8ff" stroke-width="24"><path d="M269.53 135.628c67.356 0 129.928 9.665 177.107 25.907 56.844 19.57 91.794 49.233 91.794 76.093 0 27.99-37.04 59.503-98.083 79.728-46.15 15.29-106.88 23.272-170.818 23.272-65.554 0-127.63-7.492-174.3-23.44-59.046-20.182-94.61-52.103-94.61-79.56 0-26.642 33.37-56.076 89.415-75.616 47.355-16.51 111.472-26.384 179.486-26.384z"/><path d="M180.736 186.922c33.65-58.348 73.28-107.724 110.92-140.48C337.006 6.976 380.163-8.48 403.43 4.937c24.248 13.983 33.042 61.814 20.067 124.796-9.8 47.618-33.234 104.212-65.176 159.6-32.75 56.788-70.25 106.82-107.377 139.272-46.98 41.068-92.4 55.93-116.185 42.213-23.08-13.3-31.906-56.92-20.834-115.233 9.355-49.27 32.832-109.745 66.8-168.664z"/><path d="M180.82 289.482C147.075 231.2 124.1 172.195 114.51 123.227c-11.544-59-3.382-104.11 19.864-117.566 24.224-14.024 70.055 2.244 118.14 44.94 36.356 32.28 73.688 80.837 105.723 136.173 32.844 56.733 57.46 114.21 67.036 162.582 12.117 61.213 2.31 107.984-21.453 121.74-23.057 13.348-65.25-.784-110.24-39.5-38.013-32.71-78.682-83.253-112.76-142.115z"/></g></g></svg>

package/templates/base/src/app/App.jsx

@@ -1,13 +1,15 @@
-import { Toaster } from '@/shared/ui';
+import { Scrollable, Toaster } from '@/shared/ui';
 import { QueryProvider } from './providers';
+import { Router } from './Router';
+import { memo } from '@/shared/utils';
 
-function App({ children }) {
+export const App = memo(() => {
   return (
     <QueryProvider>
-      {children}
+      <Scrollable>
+        <Router />
+      </Scrollable>
       <Toaster />
     </QueryProvider>
   );
-}
-
-export default App;
+});

package/templates/base/src/app/Router.jsx

@@ -1,4 +1,44 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { featureRoutes } from './routes.registry';
+import { AuthMiddleware } from './middlewares';
+import { Layouts } from '@/shared/constants';
+import { memo } from '@/shared/utils';
+import React from 'react';
 
-export const Router = () => {
-  return <div className="">{authRoute}</div>;
+const layoutMap = {
+  dashboard: null,
+  none: ({ children }) => children,
 };
+
+export const Router = memo(() => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {featureRoutes.map((route, index) => {
+          const Layout = layoutMap[route.layout ?? Layouts.None];
+          const Page = route.element;
+
+          let element = (
+            <Layout>
+              <Page />
+            </Layout>
+          );
+
+          if (route.protected) {
+            element = (
+              <AuthMiddleware>
+                <Layout>
+                  <Page />
+                </Layout>
+              </AuthMiddleware>
+            );
+          }
+
+          return <Route key={index} path={route.path} element={element} />;
+        })}
+
+        <Route path="/*" element={<Navigate to="/welcome" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+});

package/templates/base/src/app/index.css

@@ -1 +1,37 @@
 @import 'tailwindcss';
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+@theme {
+  /* Colors */
+  --color-primary: #3452ff;
+  --color-primary-foreground: #ffffff;
+  --color-badge: #fef1a7;
+
+  --color-bg: #ffffff;
+  --color-surface: #f7f7f7;
+
+  --color-ink: #03003e;
+  --color-muted: #797979;
+
+  --color-ring: color-mix(in oklab, var(--color-primary) 35%, transparent);
+  --color-border: color-mix(in oklab, var(--color-ink) 10%, transparent);
+  --color-soft: color-mix(in oklab, var(--color-primary) 10%, transparent);
+
+  /* Fonts  */
+  --font-plus-jakarta-sans:
+    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
+}
+
+:root {
+  color: var(--color-ink);
+  background: var(--color-bg);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-inter);
+}

package/templates/base/src/app/main.jsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.jsx';
 import './index.css';
+import { App } from './App';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>

package/templates/base/src/app/middlewares/AuthMiddleware.jsx

@@ -0,0 +1,5 @@
+import { memo } from '@/shared/utils';
+
+export const AuthMiddleware = memo(({ children }) => {
+  return children;
+});

package/templates/base/src/app/middlewares/index.js

@@ -0,0 +1 @@
+export { AuthMiddleware } from './AuthMiddleware';

package/templates/base/src/app/providers/QueryProvider.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import toast from 'react-hot-toast';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 export const QueryProvider = ({ children }) => {
   const [queryCache] = React.useState(

package/templates/base/src/app/routes.registry.js

@@ -0,0 +1,8 @@
+import { sampleRoutes } from '@/features/sample';
+import { welcomeRoutes } from '@/features/welcome';
+
+export const featureRoutes = [
+  ...sampleRoutes,
+  ...welcomeRoutes,
+  // ...anotherFeatureRoutes
+];

package/templates/base/src/features/sample/constants/index.js

@@ -0,0 +1,3 @@
+export { SampleAssets } from './sample.assets';
+export { SampleNavigation, SampleSearchParamsKey } from './sample.navigations';
+export { sampleQueryKey } from './sample.queryKeys';

package/templates/base/src/features/sample/constants/sample.assets.js

@@ -0,0 +1,8 @@
+export const SampleAssets = {
+  Images: {
+    Sample: './assets/images/',
+  },
+  Icons: {
+    Sample: './assets/icons/',
+  },
+};

package/templates/base/src/features/sample/constants/sample.navigations.js

@@ -0,0 +1,5 @@
+export const SampleNavigation = {
+  Sample: '/sample',
+};
+
+export const SampleSearchParamsKey = {};

package/templates/base/src/features/sample/constants/sample.queryKeys.js

@@ -0,0 +1,3 @@
+export const sampleQueryKey = {
+  all: ['sample'],
+};

package/templates/base/src/features/sample/index.js

@@ -0,0 +1 @@
+export { sampleRoutes } from './sample.routes';

package/templates/base/src/features/sample/pages/SamplePage.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { memo } from '@/shared/utils';
+
+const SamplePage = memo(() => {
+  return <div>SamplePage</div>;
+});
+
+export default SamplePage;

package/templates/base/src/features/sample/pages/index.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const SamplePage = React.lazy(() => import('./SamplePage'));

package/templates/base/src/features/sample/sample.routes.js

@@ -0,0 +1,12 @@
+import { Layouts } from '@/shared/constants';
+import { SamplePage } from './pages';
+import { SampleNavigation } from './constants';
+
+export const sampleRoutes = [
+  {
+    path: SampleNavigation.Sample,
+    element: SamplePage,
+    protected: true,
+    layout: Layouts.None,
+  },
+];

package/templates/base/src/features/welcome/components/CodeLine.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { PiCopySimpleBold, PiCheckBold } from 'react-icons/pi';
+import { Flex } from '@/shared/ui/Flex';
+import { Text } from '@/shared/ui/Text';
+import { useToggleState } from '@/shared/hooks';
+import { Box, FlexItem } from '@/shared/ui';
+import { cn } from '@/shared/libs';
+
+export const CodeLine = React.memo(({ value, isStorySection }) => {
+  const [copied, toggleCopied] = useToggleState();
+
+  const onCopy = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      const ta = document.createElement('textarea');
+      ta.value = value;
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+    }
+    toggleCopied();
+    window.setTimeout(() => toggleCopied(), 1200);
+  }, [toggleCopied]);
+
+  return (
+    <Box
+      radius="xl"
+      padding={{ x: 4, y: 2 }}
+      className={cn('ring-1 ring-border/50', isStorySection ? 'bg-surface' : 'bg-bg/80 ')}
+    >
+      <Flex gap={3} align="center" justify="between">
+        <FlexItem className="min-w-0">
+          <Text size="sm" color="ink" truncate>
+            {value}
+          </Text>
+        </FlexItem>
+
+        <FlexItem>
+          <button
+            type="button"
+            onClick={onCopy}
+            className="shrink-0 inline-flex size-9 items-center justify-center rounded-lg bg-black/5 text-ink hover:bg-black/10 transition-colors cursor-pointer"
+            aria-label={copied ? 'Copied' : 'Copy command'}
+            title={copied ? 'Copied' : 'Copy'}
+          >
+            {copied ? <PiCheckBold className="size-4" /> : <PiCopySimpleBold className="size-4" />}
+          </button>
+        </FlexItem>
+      </Flex>
+    </Box>
+  );
+});

package/templates/base/src/features/welcome/components/Divider.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { cn } from '@/shared/libs';
+import { Box } from '@/shared/ui';
+
+export const Divider = React.memo(({ className = '' }) => {
+  return <Box className={cn('h-px w-full bg-border/70', className)} />;
+});

package/templates/base/src/features/welcome/components/Footer.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Box, Flex, FlexItem, Text } from '@/shared/ui';
+import { Links } from '../constants';
+import { Divider } from './Divider';
+
+export const Footer = React.memo(() => {
+  return (
+    <Box className="mt-12 pt-8">
+      <Divider className="mb-6" />
+
+      <Flex
+        gap={4}
+        align={{ md: 'center' }}
+        justify={{ md: 'between' }}
+        direction={{ base: 'column', md: 'row' }}
+      >
+        <FlexItem>
+          <Text size="sm" color="muted">
+            <span className="font-semibold text-ink">React Scaffold</span>
+            <>
+              <span className="mx-2">•</span>
+              Created by{' '}
+              <a
+                href={Links.CreatorGithub}
+                target="_blank"
+                rel="noreferrer"
+                className="font-semibold text-ink hover:text-primary transition-colors"
+              >
+                {Links.CreatorName}
+              </a>
+            </>
+          </Text>
+        </FlexItem>
+
+        <FlexItem>
+          <Flex gap={5} className="flex-wrap text-sm font-medium">
+            <a
+              className="text-muted hover:text-primary"
+              href={Links.AppGithub}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Project Repo
+            </a>
+            <a
+              className="text-muted hover:text-primary"
+              href={Links.CliGithub}
+              target="_blank"
+              rel="noreferrer"
+            >
+              CLI Repo
+            </a>
+            <a
+              className="text-muted hover:text-primary"
+              href={Links.NpmPackage}
+              target="_blank"
+              rel="noreferrer"
+            >
+              NPM Package
+            </a>
+
+            <>
+              <span className="text-border">|</span>
+              <a
+                className="text-muted hover:text-primary"
+                href={Links.CreatorLinkedIn}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Creator
+              </a>
+            </>
+          </Flex>
+        </FlexItem>
+      </Flex>
+    </Box>
+  );
+});