create-react-scaffold-cli 1.0.6 → 1.1.0

package/templates/base-ts/src/app/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  createRoot(rootElement).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}

package/templates/base-ts/src/app/middlewares/AuthMiddleware.tsx

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

package/templates/base-ts/src/app/middlewares/index.ts

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

package/templates/base-ts/src/app/providers/QueryProvider.tsx

@@ -0,0 +1,75 @@
+import { ReactNode, useState } from 'react';
+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 }: { children: ReactNode }) => {
+  const [queryCache] = useState(
+    new QueryCache({
+      onError: () => {},
+    })
+  );
+
+  const [mutationCache] = useState(
+    new MutationCache({
+      onError: (error) => {
+        const isAxiosError = error instanceof AxiosError;
+
+        if (!isAxiosError) {
+          return toast.error('Something went wrong.');
+        }
+        if (error.code === AxiosError.ERR_NETWORK) {
+          return toast.error('Network Error');
+        }
+        if (error.status === 500) {
+          return toast.error('Network Error');
+        }
+        const { response } = error;
+        if (!response) {
+          return toast.error('Something went wrong');
+        }
+        const { data } = response;
+        if (!data) {
+          return toast.error('Something went wrong');
+        }
+        const { message } = data as { message: string | string[] };
+        if (!message) {
+          return toast.error('Something went wrong');
+        }
+        const isIterable = Array.isArray(message);
+        if (!isIterable) {
+          return toast.error(message);
+        }
+        for (let index = 0; index < message.length; index++) {
+          const errorMsg = message[index];
+          toast.error(errorMsg);
+        }
+      },
+    })
+  );
+
+  const [client] = useState(
+    new QueryClient({
+      queryCache: queryCache,
+      mutationCache: mutationCache,
+      defaultOptions: {
+        queries: {
+          retry: false,
+          refetchOnWindowFocus: false,
+          refetchOnReconnect: false,
+        },
+        mutations: {
+          retry: false,
+        },
+      },
+    })
+  );
+
+  return (
+    <QueryClientProvider client={client}>
+      {children}
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+  );
+};

package/templates/base-ts/src/app/providers/index.ts

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

package/templates/base-ts/src/app/routes.registry.ts

@@ -0,0 +1,9 @@
+import { sampleRoutes } from '@/features/sample';
+import { welcomeRoutes } from '@/features/welcome';
+import { AppRoute } from '@/shared/types/navigation';
+
+export const featureRoutes: AppRoute[] = [
+  ...sampleRoutes,
+  ...welcomeRoutes,
+  // ...otherFeatureRoutes
+];

package/templates/base-ts/src/features/FEATURES.md

@@ -0,0 +1,102 @@
+# Features Module
+
+## Purpose
+
+The `features` folder is the **core of the application**.
+
+Each feature represents a **self-contained unit of business functionality** with clear ownership and boundaries.
+
+> If a user-facing requirement exists, it belongs to a feature.
+
+---
+
+## Feature-First Architecture
+
+Instead of grouping by technical layers (components, hooks, services), we group by **business capability**.
+
+This improves:
+
+- Scalability
+- Ownership
+- Discoverability
+- Refactor safety
+
+---
+
+## Feature Structure
+
+```txt
+features/<feature-name>/
+  assets/               # Feature-specific images/icons
+  components/           # Reusable UI within the feature
+  constants/            # Feature constants
+  hooks/                # Feature-specific hooks
+  pages/                # Route-level components
+
+  <feature>.assets.js
+  <feature>.context.js
+  <feature>.navigations.js
+  <feature>.queryKeys.js
+  <feature>.routes.jsx
+
+  index.js               # Public API of the feature
+```
+
+---
+
+## Rules
+
+### Feature Ownership
+
+- A feature **owns its logic, UI, assets, and state**
+- Features should not depend on other features
+
+### Imports
+
+```js
+// ✅ Allowed
+import { Button } from '@/shared/ui';
+import { useAuth } from '@/features/auth';
+
+// ❌ Not Allowed
+import { useProfile } from '@/features/profile';
+```
+
+---
+
+## Constants Policy
+
+Feature constants include:
+
+- Query keys
+- Navigation definitions
+- Route names
+- Feature-level config
+
+> Constants should stay **inside the feature** unless reused across multiple features.
+
+---
+
+## Contexts
+
+- Contexts should be **feature-scoped by default**
+- Global contexts require strong justification
+
+---
+
+## Deletion Rule
+
+If a feature is removed:
+
+- Delete the entire folder
+- No side effects elsewhere
+
+If deletion breaks other features, boundaries are violated.
+
+---
+
+## Example Feature
+
+`sample/` is a reference feature and can be safely removed.
+
+Use it as a blueprint for new features.

package/templates/base-ts/src/features/sample/constants/index.ts

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

package/templates/base-ts/src/features/sample/constants/sample.assets.ts

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

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

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

package/templates/base-ts/src/features/sample/constants/sample.queryKeys.ts

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

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

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

package/templates/base-ts/src/features/sample/pages/SamplePage.tsx

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

package/templates/base-ts/src/features/sample/pages/index.ts

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

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

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

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

@@ -0,0 +1,59 @@
+import { memo, useCallback } 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';
+
+interface CodeLineProps {
+  value: string;
+  isStorySection?: boolean;
+}
+
+export const CodeLine = memo(({ value, isStorySection }: CodeLineProps) => {
+  const [copied, toggleCopied] = useToggleState();
+
+  const onCopy = 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);
+  }, [value, 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-ts/src/features/welcome/components/Divider.tsx

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

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

@@ -0,0 +1,78 @@
+import { memo } from 'react';
+import { Box, Flex, FlexItem, Text } from '@/shared/ui';
+import { Links } from '../constants';
+import { Divider } from './Divider';
+
+export const Footer = 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-ts/src/features/welcome/components/Hero.tsx

@@ -0,0 +1,131 @@
+import { memo } 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 = 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-ts/src/features/welcome/components/IconLink.tsx

@@ -0,0 +1,24 @@
+import { memo, ReactNode } from 'react';
+import { Text } from '@/shared/ui';
+
+interface IconLinkProps {
+  href: string;
+  icon: ReactNode;
+  label: string;
+}
+
+export const IconLink = memo(({ href, icon, label }: IconLinkProps) => {
+  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-ts/src/features/welcome/components/QuickStartPanel.tsx

@@ -0,0 +1,63 @@
+import { memo, ReactNode } 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 }: { label: string; children: ReactNode }) {
+  return (
+    <Box>
+      <Text className="text-sm font-semibold text-ink">{label}</Text>
+      <Box className="mt-2">{children}</Box>
+    </Box>
+  );
+}
+
+export const QuickStartPanel = 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} />
+            </StepLight>
+          </FlexItem>
+          <FlexItem>
+            <StepLight label="2) Run">
+              <CodeLine value={Commands.Run} />
+            </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-ts/src/features/welcome/components/RingSoft.tsx

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