create-react-scaffold-cli 1.0.6 → 1.1.0

package/templates/base-ts/src/features/welcome/components/StorySections.tsx

@@ -0,0 +1,63 @@
+
+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 }: { title: string; body: string }) {
+  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-ts/src/features/welcome/components/WhatYouGet.tsx

@@ -0,0 +1,49 @@
+import { memo } from 'react';
+import { SOLUTIONS } from '../constants';
+import { Flex, FlexItem, Text } from '@/shared/ui';
+
+export const WhatYouGet = 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-ts/src/features/welcome/components/index.ts

@@ -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-ts/src/features/welcome/constants/index.ts

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

package/templates/base-ts/src/features/welcome/constants/welcome.constants.ts

@@ -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/',
+} as const;
+
+export const Commands = {
+  Scaffold: 'npx create-react-scaffold-cli',
+  Run: 'npm run dev',
+} as const;
+
+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' },
+] as const;

package/templates/base-ts/src/features/welcome/constants/welcome.navigations.ts

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

package/templates/base-ts/src/features/welcome/index.ts

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

package/templates/base-ts/src/features/welcome/pages/WelcomePage.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+import { Box } from '@/shared/ui';
+import { Divider, Footer, Hero, StorySections, WhatYouGet } from '../components';
+
+const WelcomePage = 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-ts/src/features/welcome/pages/index.ts

@@ -0,0 +1 @@
+export { default as WelcomePage } from './WelcomePage';

package/templates/base-ts/src/features/welcome/welcome.routes.ts

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

package/templates/base-ts/src/shared/SHARED.md

@@ -0,0 +1,104 @@
+# Shared Module
+
+## Purpose
+
+The `shared` folder contains **cross-feature reusable code**.
+
+It exists to prevent duplication — not to become a dumping ground.
+
+> Shared code must earn its place.
+
+---
+
+## What Belongs in Shared
+
+Only code that is:
+
+- Used by **multiple features**
+- **Stateless or generic**
+- Independent of business rules
+
+---
+
+## Folder Structure
+
+```txt
+shared/
+  assets/      # Global images/icons
+  constants/   # App-wide constants
+  contexts/    # Truly global contexts
+  hooks/       # Reusable generic hooks
+  layouts/     # Application layouts
+  libs/        # Third-party wrappers (axios, query)
+  theme/       # Theme configuration
+  ui/          # Design system components
+  utils/       # Pure utility functions
+```
+
+---
+
+## Rules
+
+### ✅ Allowed
+
+- UI primitives (Button, Modal)
+- Generic hooks (useDebounce)
+- Axios/query setup
+- Theme tokens
+
+### ❌ Not Allowed
+
+- Feature logic
+- Business rules
+- Feature-specific constants
+- Feature state
+
+---
+
+## Import Rules
+
+```js
+// ✅ Allowed
+import { axios } from '@/shared/libs';
+import { cn } from '@/shared/utils';
+
+// ❌ Not Allowed
+import { authQueryKeys } from '@/features/auth';
+```
+
+---
+
+## Constants Policy
+
+Shared constants should be:
+
+- Truly global
+- Stable
+- Rarely changed
+
+Examples:
+
+- Pagination defaults
+- Environment keys
+- Generic route params
+
+---
+
+## Contexts
+
+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?
+
+If unsure — **do not add it here**.
+
+---
+
+## Philosophy
+
+Shared code is a **dependency magnet**.
+
+The smaller it stays, the healthier the system remains.

package/templates/base-ts/src/shared/constants/app.constants.ts

@@ -0,0 +1,11 @@
+export const ENV = {
+  BACKEND_URL: import.meta.env.VITE_BACKEND_URL as string,
+};
+
+export const Layouts = {
+  Dashboard: 'dashboard',
+  Auth: 'auth',
+  None: 'none',
+} as const;
+
+export type LayoutType = typeof Layouts[keyof typeof Layouts];

package/templates/base-ts/src/shared/constants/assets.constants.ts

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

package/templates/base-ts/src/shared/constants/index.ts

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

package/templates/base-ts/src/shared/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useBooleanState } from './useBooleanState';
+export { useDebounce } from './useDebounce';
+export { useToggleState } from './useToggleState';

package/templates/base-ts/src/shared/hooks/useBooleanState.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react';
+
+export const useBooleanState = (initialValue: boolean = false): [boolean, () => void, () => void, () => void] => {
+  const [value, setValue] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue((v) => !v);
+  }, []);
+
+  const setToTrue = useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const setToFalse = useCallback(() => {
+    setValue(false);
+  }, []);
+
+  return [value, setToTrue, setToFalse, toggle];
+};

package/templates/base-ts/src/shared/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debounceValue, setDoebounceValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDoebounceValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debounceValue;
+};

package/templates/base-ts/src/shared/hooks/useToggleState.ts

@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+
+export const useToggleState = (initialValue: boolean = false): [boolean, () => void] => {
+  const [state, setState] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setState((v) => !v);
+  }, []);
+
+  return [state, toggle];
+};

package/templates/base-ts/src/shared/libs/axios.ts

@@ -0,0 +1,6 @@
+import baseAxios from 'axios';
+import { ENV } from '../constants/app.constants';
+
+export const axios = baseAxios.create({
+  baseURL: ENV.BACKEND_URL,
+});

package/templates/base-ts/src/shared/libs/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(...inputs));
+}

package/templates/base-ts/src/shared/libs/index.ts

@@ -0,0 +1,2 @@
+export { axios } from './axios';
+export { cn } from './cn';

package/templates/base-ts/src/shared/theme/index.ts

@@ -0,0 +1 @@
+export * from './theme';