create-react-scaffold-cli 1.0.2 → 1.0.5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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/{shared_readme.md → SHARED.md}

@@ -1,6 +1,7 @@
 # Shared Module
 
 ## Purpose
+
 The `shared` folder contains **cross-feature reusable code**.
 
 It exists to prevent duplication — not to become a dumping ground.
@@ -12,6 +13,7 @@ It exists to prevent duplication — not to become a dumping ground.
 ## What Belongs in Shared
 
 Only code that is:
+
 - Used by **multiple features**
 - **Stateless or generic**
 - Independent of business rules
@@ -38,12 +40,14 @@ shared/
 ## Rules
 
 ### ✅ Allowed
+
 - UI primitives (Button, Modal)
 - Generic hooks (useDebounce)
 - Axios/query setup
 - Theme tokens
 
 ### ❌ Not Allowed
+
 - Feature logic
 - Business rules
 - Feature-specific constants
@@ -67,11 +71,13 @@ import { authQueryKeys } from '@/features/auth';
 ## Constants Policy
 
 Shared constants should be:
+
 - Truly global
 - Stable
 - Rarely changed
 
 Examples:
+
 - Pagination defaults
 - Environment keys
 - Generic route params
@@ -83,6 +89,7 @@ Examples:
 Global contexts should be rare.
 
 Before adding one, ask:
+
 1. Is this needed by multiple unrelated features?
 2. Can this live inside a feature instead?
 
@@ -95,4 +102,3 @@ If unsure — **do not add it here**.
 Shared code is a **dependency magnet**.
 
 The smaller it stays, the healthier the system remains.
-

package/templates/base/src/shared/constants/app.constants.js

@@ -1,3 +1,9 @@
 export const ENV = {
   BACKEND_URL: import.meta.env.VITE_BACKEND_URL,
 };
+
+export const Layouts = {
+  Dashboard: 'dashboard',
+  Auth: 'auth',
+  None: 'none',
+};

package/templates/base/src/shared/constants/assets.constants.js

@@ -0,0 +1,5 @@
+export const AppAssets = {
+  Logos: {},
+  Images: {},
+  Icons: {},
+};

package/templates/base/src/shared/constants/index.js

@@ -0,0 +1,2 @@
+export * from './app.constants';
+export { AppAssets } from './assets.constants';

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

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

@@ -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),