npm - create-react-scaffold-cli - Versions diffs - 1.0.4 → 1.0.5 - Mend

create-react-scaffold-cli 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/package.json CHANGED Viewed

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

package/templates/base/index.html CHANGED Viewed

@@ -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/public/icons/react.svg ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Toaster } from '@/shared/ui';
+import { Scrollable, Toaster } from '@/shared/ui';
 import { QueryProvider } from './providers';
 import { Router } from './Router';
 import { memo } from '@/shared/utils';
@@ -6,7 +6,9 @@ import { memo } from '@/shared/utils';
 export const App = memo(() => {
   return (
     <QueryProvider>
-      <Router />
+      <Scrollable>
+        <Router />
+      </Scrollable>
       <Toaster />
     </QueryProvider>
   );

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

@@ -3,6 +3,7 @@ import { featureRoutes } from './routes.registry';
 import { AuthMiddleware } from './middlewares';
 import { Layouts } from '@/shared/constants';
 import { memo } from '@/shared/utils';
+import React from 'react';
 const layoutMap = {
   dashboard: null,
@@ -15,13 +16,20 @@ export const Router = memo(() => {
       <Routes>
         {featureRoutes.map((route, index) => {
           const Layout = layoutMap[route.layout ?? Layouts.None];
+          const Page = route.element;
-          let element = <Layout>{route.element}</Layout>;
+          let element = (
+            <Layout>
+              <Page />
+            </Layout>
+          );
           if (route.protected) {
             element = (
               <AuthMiddleware>
-                <Layout>{route.element}</Layout>
+                <Layout>
+                  <Page />
+                </Layout>
               </AuthMiddleware>
             );
           }
@@ -29,7 +37,7 @@ export const Router = memo(() => {
           return <Route key={index} path={route.path} element={element} />;
         })}
-        <Route path="/*" element={<Navigate to="/login" replace />} />
+        <Route path="/*" element={<Navigate to="/welcome" replace />} />
       </Routes>
     </BrowserRouter>
   );

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

@@ -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 CHANGED Viewed

@@ -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/routes.registry.js CHANGED Viewed

@@ -1,6 +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 CHANGED Viewed

@@ -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/pages/index.js CHANGED Viewed

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

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

@@ -1,12 +1,11 @@
-import React from 'react';
 import { Layouts } from '@/shared/constants';
-import { SampleNavigation } from './constants/sample.navigations';
 import { SamplePage } from './pages';
+import { SampleNavigation } from './constants';
 export const sampleRoutes = [
   {
     path: SampleNavigation.Sample,
-    element: <SamplePage />,
+    element: SamplePage,
     protected: true,
     layout: Layouts.None,
   },

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>
+  );
+});

package/templates/base/src/features/welcome/components/Hero.jsx ADDED Viewed

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Box, Button, Flex, FlexItem, Grid, Text } from '@/shared/ui';
+import { FaGithub, FaLinkedin, FaNpm } from 'react-icons/fa';
+import { QuickStartPanel } from './QuickStartPanel';
+import { Links } from '../constants';
+import { IconLink } from './IconLink';
+export const Hero = React.memo(() => {
+  return (
+    <Grid
+      align="start"
+      gap={{ base: 10, md: 12 }}
+      className="md:grid-cols-[1.25fr_0.75fr] md:gap-12"
+    >
+      <Flex gap={5} direction="column">
+        <Box padding={{ x: 3, y: 1 }} width="fit" className="rounded-full bg-badge">
+          <Flex gap={2} align="center">
+            <FlexItem>
+              <Box radius="full" className="size-1.5 bg-primary" />
+            </FlexItem>
+            <FlexItem>
+              <Text size="sm" weight="semibold">
+                React Scaffold
+              </Text>
+            </FlexItem>
+          </Flex>
+        </Box>
+        <Flex gap={2} align="center" className="-mt-2">
+          <FlexItem>
+            <Text size="sm" color="muted">
+              Created by
+            </Text>
+          </FlexItem>
+          <FlexItem>
+            <a
+              href={Links.CreatorGithub}
+              target="_blank"
+              rel="noreferrer"
+              className="font-semibold text-ink hover:text-primary transition-colors"
+            >
+              {Links.CreatorName}
+            </a>
+          </FlexItem>
+        </Flex>
+        <FlexItem>
+          <Text
+            weight="black"
+            font="plus-jakarta-sans"
+            size={{ base: '4xl', lg: '5xl', '2xl': '6xl' }}
+            className="tracking-tight bg-linear-to-r from-ink to-primary bg-clip-text text-transparent"
+          >
+            Start building with React Scaffold
+          </Text>
+        </FlexItem>
+        <FlexItem>
+          <Text size="base" color="muted" className="max-w-xl text-base leading-relaxed">
+            A modern, opinionated starter that keeps your codebase clean as it grows — feature-first
+            structure, shared UI primitives, and best-practice tooling out of the box.
+          </Text>
+        </FlexItem>
+        <FlexItem>
+          <Text size="sm" color="muted" className="max-w-xl">
+            This is the default starter page. Replace it with your product UI when you’re ready.
+          </Text>
+        </FlexItem>
+        <FlexItem>
+          <Flex gap={3} direction={{ base: 'column', md: 'row' }} className="mt-2">
+            <FlexItem>
+              <Button
+                className="rounded-full"
+                onClick={() => window.open(Links.AppGithub, '_blank', 'noopener,noreferrer')}
+              >
+                Open Project Repo
+              </Button>
+            </FlexItem>
+            <FlexItem>
+              <Button
+                variant="outline"
+                className="rounded-full"
+                onClick={() => window.open(Links.NpmPackage, '_blank', 'noopener,noreferrer')}
+              >
+                View NPM Package
+              </Button>
+            </FlexItem>
+          </Flex>
+        </FlexItem>
+        <FlexItem>
+          <Flex gap={2} align="center">
+            <FlexItem>
+              <IconLink
+                href={Links.AppGithub}
+                label="App Repo"
+                icon={<FaGithub className="size-4" />}
+              />
+            </FlexItem>
+            <FlexItem>
+              <IconLink
+                href={Links.CliGithub}
+                label="CLI Repo"
+                icon={<FaGithub className="size-4" />}
+              />
+            </FlexItem>
+            <FlexItem>
+              <IconLink href={Links.NpmPackage} label="NPM" icon={<FaNpm className="size-4" />} />
+            </FlexItem>
+            <>
+              <span className="text-border -mt-1">•</span>
+              <FlexItem>
+                <IconLink
+                  href={Links.CreatorLinkedIn}
+                  label="Creator"
+                  icon={<FaLinkedin className="size-4" />}
+                />
+              </FlexItem>
+            </>
+          </Flex>
+        </FlexItem>
+      </Flex>
+      <QuickStartPanel />
+    </Grid>
+  );
+});

package/templates/base/src/features/welcome/components/IconLink.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text } from '@/shared/ui';
+export const IconLink = React.memo(({ href, icon, label }) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="inline-flex items-center gap-2 text-muted hover:text-primary transition-colors"
+    >
+      <span className="text-primary">{icon}</span>
+      <Text size="sm" className="leading-none">
+        {label}
+      </Text>
+    </a>
+  );
+});

package/templates/base/src/features/welcome/components/QuickStartPanel.jsx ADDED Viewed

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box, Flex, FlexItem, Text } from '@/shared/ui';
+import { RingSoft } from './RingSoft';
+import { CodeLine } from './CodeLine';
+import { Commands } from '../constants';
+function StepLight({ label, children }) {
+  return (
+    <Box>
+      <Text className="text-sm font-semibold text-ink">{label}</Text>
+      <Box className="mt-2">{children}</Box>
+    </Box>
+  );
+}
+export const QuickStartPanel = React.memo(() => {
+  return (
+    <Box className="relative overflow-hidden rounded-2xl bg-surface/70 p-6 md:p-7 ring-1 ring-border">
+      <Box className="pointer-events-none absolute inset-0 opacity-100">
+        <RingSoft className="right-[-7rem] top-[-6rem]" size="22rem" />
+        <RingSoft className="right-[-5rem] top-[9rem]" size="14rem" />
+        <RingSoft className="right-[-3.5rem] top-[16rem]" size="6rem" />
+      </Box>
+      <Box className="relative z-10 space-y-6">
+        <Flex gap={1} direction="column">
+          <FlexItem>
+            <Text
+              size="base"
+              weight="bold"
+              font="plus-jakarta-sans"
+              className="tracking-tight bg-linear-to-r from-primary to-ink bg-clip-text text-transparent"
+            >
+              Quick start
+            </Text>
+          </FlexItem>
+          <FlexItem>
+            <Text size="sm" color="muted">
+              Create an app in seconds — clean architecture, ready to scale.
+            </Text>
+          </FlexItem>
+        </Flex>
+        <Flex gap={4} direction="column">
+          <FlexItem>
+            <StepLight label="1) Scaffold">
+              <CodeLine value={Commands.Scaffold} variant="light" />
+            </StepLight>
+          </FlexItem>
+          <FlexItem>
+            <StepLight label="2) Run">
+              <CodeLine value={Commands.Run} variant="light" />
+            </StepLight>
+          </FlexItem>
+        </Flex>
+        <Text size="sm" color="muted">
+          Tip: add your first feature inside your feature modules and delete this page when ready.
+        </Text>
+      </Box>
+    </Box>
+  );
+});

package/templates/base/src/features/welcome/components/RingSoft.jsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@/shared/ui/Box';
+import { cn } from '@/shared/libs';
+export const RingSoft = React.memo(({ className, size }) => {
+  return (
+    <Box
+      className={cn('absolute rounded-full', className)}
+      style={{
+        width: size,
+        height: size,
+        border: '1px solid rgba(52, 82, 255, 0.22)',
+      }}
+    />
+  );
+});

package/templates/base/src/features/welcome/components/StorySections.jsx ADDED Viewed

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Divider } from './Divider';
+import { CodeLine } from './CodeLine';
+import { Box, Flex, FlexItem, Grid, GridItem, Text } from '@/shared/ui';
+import { Commands } from '../constants';
+function Block({ title, body }) {
+  return (
+    <Box>
+      <Text className="text-sm font-bold tracking-tight">{title}</Text>
+      <Text className="mt-2 text-muted leading-relaxed">{body}</Text>
+    </Box>
+  );
+}
+export function StorySections() {
+  return (
+    <Grid gap={{ base: 10, md: 12 }} columns={{ base: 1, md: 2 }}>
+      <GridItem>
+        <Flex gap={2} direction="column">
+          <FlexItem>
+            <Text
+              weight="black"
+              font="plus-jakarta-sans"
+              size={{ base: '2xl', md: '3xl' }}
+              className="tracking-tight bg-linear-to-r from-primary to-ink bg-clip-text text-transparent"
+            >
+              Why this exists
+            </Text>
+          </FlexItem>
+          <FlexItem className="max-w-2xl">
+            <Text size="base" color="muted">
+              Less starter bloat, more clarity. You get patterns that keep apps maintainable as
+              teams grow.
+            </Text>
+          </FlexItem>
+        </Flex>
+      </GridItem>
+      <GridItem className="space-y-7">
+        <Block
+          title="Project purpose"
+          body="React Scaffold helps teams start real apps fast—with structure, shared UI primitives, and a clean foundation for long-term maintainability."
+        />
+        <Divider />
+        <Block
+          title="Problem it solves"
+          body="Most starters don’t scale. This scaffold enforces patterns so features stay isolated, UI stays consistent, and refactoring remains safe."
+        />
+        <Divider />
+        <Box>
+          <Text size="sm" className="font-bold tracking-tight">
+            How to start
+          </Text>
+          <Box className="mt-3 space-y-3">
+            <CodeLine isStorySection value={Commands.Scaffold} />
+            <CodeLine isStorySection value={Commands.Run} />
+          </Box>
+        </Box>
+      </GridItem>
+    </Grid>
+  );
+}

package/templates/base/src/features/welcome/components/WhatYouGet.jsx ADDED Viewed

@@ -0,0 +1,49 @@
+import React from 'react';
+import { SOLUTIONS } from '../constants';
+import { Flex, FlexItem, Text } from '@/shared/ui';
+export const WhatYouGet = React.memo(() => {
+  return (
+    <Flex gap={2} direction="column">
+      <FlexItem>
+        <Text
+          weight="black"
+          font="plus-jakarta-sans"
+          size={{ base: '2xl', md: '3xl' }}
+          className="tracking-tight bg-linear-to-r from-primary to-ink bg-clip-text text-transparent"
+        >
+          What you get
+        </Text>
+      </FlexItem>
+      <FlexItem className="max-w-2xl">
+        <Text size="base" color="muted">
+          A real-world scaffold: structure + UI foundations + modern stack.
+        </Text>
+      </FlexItem>
+      <FlexItem>
+        <Flex gap={2} className="mt-4 flex-wrap">
+          {SOLUTIONS.map((x) => (
+            <Flex
+              gap={2}
+              key={x.label}
+              align="center"
+              className="inline-flex items-center gap-2 rounded-full bg-surface/80 px-4 py-2"
+            >
+              <FlexItem>
+                <Text size="sm" color="muted">
+                  {x.label}:
+                </Text>
+              </FlexItem>
+              <FlexItem>
+                <Text color="ink" weight="semibold">
+                  {x.value}
+                </Text>
+              </FlexItem>
+            </Flex>
+          ))}
+        </Flex>
+      </FlexItem>
+    </Flex>
+  );
+});

package/templates/base/src/features/welcome/components/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+export { Hero } from './Hero';
+export { Divider } from './Divider';
+export { WhatYouGet } from './WhatYouGet';
+export { StorySections } from './StorySections';
+export { Footer } from './Footer';

package/templates/base/src/features/welcome/constants/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './welcome.constants';
2	+ export { WelcomeNavigation } from './welcome.navigations';

package/templates/base/src/features/welcome/constants/welcome.constants.js ADDED Viewed

@@ -0,0 +1,21 @@
+export const Links = {
+  CliGithub: 'https://github.com/arsalanirshad57/create-react-scaffold-cli',
+  AppGithub: 'https://github.com/arsalanirshad57/react-scaffold-app',
+  NpmPackage: 'https://www.npmjs.com/package/create-react-scaffold-cli',
+  CreatorName: 'Muhammad Arsalan',
+  CreatorGithub: 'https://github.com/arsalanirshad57',
+  CreatorLinkedIn: 'https://www.linkedin.com/in/heyarsalanhere/',
+};
+export const Commands = {
+  Scaffold: 'npx create-react-scaffold-cli',
+  Run: 'npm run dev',
+};
+export const SOLUTIONS = [
+  { label: 'Architecture', value: 'Feature-first' },
+  { label: 'UI System', value: 'Primitives + Radix' },
+  { label: 'Data', value: 'React Query + Axios' },
+  { label: 'Tooling', value: 'ESLint + Prettier + Husky' },
+];

package/templates/base/src/features/welcome/constants/welcome.navigations.js ADDED Viewed

@@ -0,0 +1,3 @@
+export const WelcomeNavigation = {
+  Root: '/welcome',
+};

package/templates/base/src/features/welcome/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { welcomeRoutes } from './welcome.routes';

package/templates/base/src/features/welcome/pages/WelcomePage.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box } from '@/shared/ui';
+import { Divider, Footer, Hero, StorySections, WhatYouGet } from '../components';
+const WelcomePage = React.memo(() => {
+  return (
+    <Box className="min-h-screen bg-bg text-ink ">
+      <Box
+        className="mx-auto max-w-6xl"
+        padding={{ x: { base: 4, md: 6 }, y: { base: 10, md: 14 } }}
+      >
+        <Hero />
+        <Divider className="my-10 md:my-12" />
+        <WhatYouGet />
+        <Divider className="my-10 md:my-12" />
+        <StorySections />
+        <Footer />
+      </Box>
+    </Box>
+  );
+});
+export default WelcomePage;

package/templates/base/src/features/welcome/pages/index.js ADDED Viewed

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

package/templates/base/src/features/welcome/welcome.routes.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { Layouts } from '@/shared/constants';
+import { WelcomePage } from './pages';
+import { WelcomeNavigation } from './constants';
+export const welcomeRoutes = [
+  {
+    path: WelcomeNavigation.Root,
+    element: WelcomePage,
+    protected: false,
+    layout: Layouts.None,
+  },
+];

package/templates/base/src/shared/theme/theme.js CHANGED Viewed

@@ -2073,7 +2073,8 @@ export const size2xlLookup = {
 export const colorLookup = {
   primary: 'text-primary',
-  secondary: 'text-secondary',
+  ink: 'text-ink',
+  muted: 'text-muted',
   success: 'text-green-500',
   danger: 'text-red-500',
   white: 'text-white',
@@ -2082,7 +2083,8 @@ export const colorLookup = {
 export const color2XlLookup = {
   primary: '2xl:text-primary',
-  secondary: '2xl:text-secondary',
+  ink: '2xl:text-ink',
+  muted: 'xl:text-muted',
   success: '2xl:text-green-500',
   danger: '2xl:text-red-500',
   white: '2xl:text-white',
@@ -2091,7 +2093,8 @@ export const color2XlLookup = {
 export const colorXlLookup = {
   primary: 'xl:text-primary',
-  secondary: 'xl:text-secondary',
+  ink: 'xl:text-ink',
+  muted: 'xl:text-muted',
   success: 'xl:text-green-500',
   danger: 'xl:text-red-500',
   white: 'xl:text-white',
@@ -2100,7 +2103,8 @@ export const colorXlLookup = {
 export const colorLgLookup = {
   primary: 'lg:text-primary',
-  secondary: 'lg:text-secondary',
+  ink: 'lg:text-ink',
+  muted: 'lg:text-muted',
   success: 'lg:text-green-500',
   danger: 'lg:text-red-500',
   white: 'lg:text-white',
@@ -2109,7 +2113,8 @@ export const colorLgLookup = {
 export const colorMdLookup = {
   primary: 'md:text-primary',
-  secondary: 'md:text-secondary',
+  ink: 'md:text-ink',
+  muted: 'md:text-muted',
   success: 'md:text-green-500',
   danger: 'md:text-red-500',
   white: 'md:text-white',
@@ -2123,16 +2128,22 @@ export const bgColorLookup = {
   danger: 'bg-red-500',
 };
-export const fontFamilyLookup = {};
+export const fontFamilyLookup = {
+  'plus-jakarta-sans': 'font-plus-jakarta-sans',
+  inter: 'font-inter',
+};
-export const fontFamilyMdLookup = Object.fromEntries(
-  Object.entries(fontFamilyLookup).map(([k, v]) => [k, `md:${v}`])
-);
+export const fontFamilyMdLookup = {
+  'plus-jakarta-sans': 'md:font-plus-jakarta-sans',
+  inter: 'md:font-inter',
+};
-export const fontFamilyLgLookup = Object.fromEntries(
-  Object.entries(fontFamilyLookup).map(([k, v]) => [k, `lg:${v}`])
-);
+export const fontFamilyLgLookup = {
+  'plus-jakarta-sans': 'lg:font-plus-jakarta-sans',
+  inter: 'lg:font-inter',
+};
-export const fontFamilyXlLookup = Object.fromEntries(
-  Object.entries(fontFamilyLookup).map(([k, v]) => [k, `xl:${v}`])
-);
+export const fontFamilyXlLookup = {
+  'plus-jakarta-sans': 'xl:font-plus-jakarta-sans',
+  inter: 'xl:font-inter',
+};

package/templates/base/src/shared/ui/Box.jsx CHANGED Viewed

@@ -27,10 +27,6 @@ import {
   paddingXXlLookup,
   paddingYXlLookup,
   marginXlgLookup,
-  AnimationLookup,
-  AnimationMdLookup,
-  AnimationLgLookup,
-  AnimationXlLookup,
   radiusLookup,
   radiusMdLookup,
   radiusLgLookup,
@@ -122,15 +118,11 @@ import { cn } from '../libs';
  *   | Record<Axis, Record<Breakpoint, Padding>>} [padding]
  * @property {Width | Record<Breakpoint, Width>} [width]
  * @property {Radius} [radius]
- * @property {Animation} [animation]
  * @param {React.ComponentProps<'div'> & ComponentProps} props
  * @returns {JSX.Element}
  */
-const Component = (
-  { hide, grow, margin, radius, padding, width, animation, className, ...rest },
-  ref
-) => {
+const Component = ({ hide, grow, margin, radius, padding, width, className, ...rest }, ref) => {
   return (
     <div
       ref={ref}
@@ -180,11 +172,6 @@ const Component = (
         getClassName(width?.base, widthLookup),
         getClassName(width?.md, widthMdLookup),
         getClassName(width?.lg, widthLgLookup),
-        typeof font !== 'object' && getClassName(animation, AnimationLookup),
-        getClassName(animation?.base, AnimationLookup),
-        getClassName(animation?.md, AnimationMdLookup),
-        getClassName(animation?.lg, AnimationLgLookup),
-        getClassName(animation?.xl, AnimationXlLookup),
         typeof radius !== 'object' && getClassName(radius, radiusLookup),
         getClassName(radius?.base, radiusLookup),
         getClassName(radius?.md, radiusMdLookup),

package/templates/base/src/shared/ui/Button.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react';
 import { PiSpinnerBold } from 'react-icons/pi';
 import {
-  AnimationLookup,
   colorLookup,
   fieldSize2XlLookup,
   fieldSizeLgLookup,
@@ -25,13 +24,14 @@ import {
   radiusXlLookup,
 } from '../theme';
 import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
 const variantLookup = {
   primary:
     'text-primary-foreground bg-primary hover:bg-primary/90 disabled:text-primary-foreground/70 disabled:bg-primary/50',
   outline:
     'border text-primary bg-primary-foreground hover:bg-neutral-50 disabled:text-primary/70 disabled:bg-neutral-50/50',
-  pill: 'text-primary-foreground bg-primary hover:bg-primary/90 disabled:text-primary-foreground/70 disabled:bg-primary/50 rounded-lg',
+  pill: 'text-primary-foreground bg-primary hover:bg-primary/90 disabled:text-primary-foreground/70 disabled:bg-primary/50',
 };
 /**
@@ -97,7 +97,6 @@ const Component = (
     color,
     isLoading,
     className,
-    animation,
     type = 'button',
     children,
     ...rest
@@ -108,7 +107,8 @@ const Component = (
     <button
       ref={ref}
       className={cn(
-        'h-12 px-4 w-full rounded-lg text-base font-inter font-semibold disabled:cursor-not-allowed transition-colors flex justify-center items-center',
+        'h-14 px-8 inline-flex w-full items-center justify-center gap-2 transition-colors disabled:cursor-not-allowed text-primary-foreground cursor-pointer!',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30',
         typeof fontSize !== 'object' && getClassName(fontSize, fontSizeLookup),
         getClassName(fontSize?.base, fontSizeLookup),
         getClassName(fontSize?.md, fontSizeMdLookup),
@@ -135,7 +135,6 @@ const Component = (
         variantLookup[variant],
         fontFamilyLookup[font],
         colorLookup[color],
-        AnimationLookup[animation],
         className
       )}
       type={type}

package/templates/base/src/shared/ui/DropdownMenu.jsx CHANGED Viewed

@@ -1,46 +1,40 @@
 import React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { FaChevronRight } from 'react-icons/fa';
-import { memo } from '@/utils';
-import { cn } from '@/libs';
+import { memo } from '../utils';
+import { cn } from '../libs';
 const DropdownMenuRoot = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuSubTrigger = React.forwardRef(
-  ({ className, inset, children, ...props }, ref) => (
-    <DropdownMenuPrimitive.SubTrigger
-      ref={ref}
-      className={cn(
-        'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-        inset && 'pl-8',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <FaChevronRight className="ml-auto" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-);
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <FaChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(
-  ({ className, ...props }, ref) => (
-    <DropdownMenuPrimitive.SubContent
-      ref={ref}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef(
   ({ className, sideOffset = 4, contentClassName, ...props }, ref) => (
@@ -61,53 +55,40 @@ const DropdownMenuContent = React.forwardRef(
 );
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(
-  ({ className, inset, ...props }, ref) => (
-    <DropdownMenuPrimitive.Item
-      ref={ref}
-      className={cn(
-        'relative flex select-none items-center gap-2 font-inter  cursor-pointer rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
-        inset && 'pl-8',
-        className
-      )}
-      {...props}
-    />
-  )
-);
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex select-none items-center gap-2 font-inter  cursor-pointer rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuLabel = React.forwardRef(
-  ({ className, inset, ...props }, ref) => (
-    <DropdownMenuPrimitive.Label
-      ref={ref}
-      className={cn(
-        'px-2 py-1.5 text-sm font-semibold font-inter',
-        inset && 'pl-8',
-        className
-      )}
-      {...props}
-    />
-  )
-);
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold font-inter', inset && 'pl-8', className)}
+    {...props}
+  />
+));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(
-  ({ className, ...props }, ref) => (
-    <DropdownMenuPrimitive.Separator
-      ref={ref}
-      className={cn('-mx-1 my-1 h-px bg-muted', className)}
-      {...props}
-    />
-  )
-);
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 const DropdownMenuShortcut = ({ className, ...props }) => {
   return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-      {...props}
-    />
+    <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
   );
 };
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
@@ -121,19 +102,9 @@ DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
  * @returns {JSX.Element}
  */
-const Component = ({
-  open,
-  onOpenChange,
-  content,
-  children,
-  contentClassName,
-}) => {
+const Component = ({ open, onOpenChange, content, children, contentClassName }) => {
   return (
-    <DropdownMenuRoot
-      className="border w-full "
-      open={open}
-      onOpenChange={onOpenChange}
-    >
+    <DropdownMenuRoot className="border w-full " open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger className="w-full">{children}</DropdownMenuTrigger>
       <DropdownMenuContent align="end" contentClassName={contentClassName}>
         {content}
@@ -144,9 +115,4 @@ const Component = ({
 const DropdownMenu = memo(Component);
-export {
-  DropdownMenu,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuItem,
-};
+export { DropdownMenu, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem };

package/templates/base/src/shared/ui/GridItem.jsx CHANGED Viewed

@@ -14,6 +14,7 @@ import {
 } from '../theme';
 import { getClassName, memo } from '../utils';
 import { cn } from '../libs';
+import React from 'react';
 /**
  * @typedef {'base' | 'md' | 'lg' | 'xl'} Breakpoint

package/templates/base/src/shared/ui/Modal.jsx CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { Scrollable } from './Scrollable';
 import { cn } from '../libs';
+import { memo } from '../utils';
 /**
  * @typedef {object} ComponentProps

package/templates/base/src/shared/ui/Text.jsx CHANGED Viewed

@@ -24,7 +24,7 @@ import {
   colorXlLookup,
 } from '../theme';
 import { cn } from '../libs';
-import { getClassName } from '../utils';
+import { getClassName, memo } from '../utils';
 /**
  * @typedef {'base' | 'md' | 'lg' | 'xl' | '2xl'} Breakpoint
@@ -57,9 +57,9 @@ import { getClassName } from '../utils';
  *   | 'black'} Weight
  *
  *
- * @typedef {''} Font
+ * @typedef {'plus-jakarta-sans' | 'inter'} Font
  *
- * @typedef {'primary' | 'secondary' | 'success' | 'danger' | 'white' | 'black'} Color
+ * @typedef {'primary' | 'ink' | 'muted' | 'success' | 'danger' | 'white' | 'black'} Color
  *
  * @typedef {object} ComponentProps
  * @property {Size | Record<Breakpoint, Size>} [size]

package/templates/base/src/shared/ui/index.js CHANGED Viewed

@@ -1 +1,18 @@
+export { Box } from './Box';
+export { Button } from './Button';
+export { Checkbox } from './Checkbox';
+export { Flex } from './Flex';
+export { FlexItem } from './FlexItem';
+export { FormField } from './FormField';
+export { Grid } from './Grid';
+export { GridItem } from './GridItem';
+export { Modal } from './Modal';
 export { Toaster } from './Toaster';
+export { Text } from './Text';
+export { Scrollable } from './Scrollable';
+export {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from './DropdownMenu';

package/templates/base/vercel.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}