npm - create-react-starter-kit - Versions diffs - 1.0.0 - Mend

create-react-starter-kit 1.0.0

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 (182) hide show

package/templates/index.html.ejs ADDED Viewed

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= projectName %></title>
+  </head>
+  <body>
+    <div id="root"></div>
+<% if (buildTool === 'vite') { -%>
+    <script type="module" src="/src/main.<%= jsxExt %>"></script>
+<% } else if (buildTool === 'parcel') { -%>
+    <script type="module" src="./src/main.<%= jsxExt %>"></script>
+<% } else if (buildTool === 'esbuild' || buildTool === 'rollup') { -%>
+    <script type="module" src="/dist/main.js"></script>
+<% } -%>
+  </body>
+</html>

package/templates/public/vite.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="8" fill="#1d4ed8"/>
+  <path d="M8 22L16 8l8 14H8z" fill="#fff"/>
+</svg>

package/templates/src/app/App.tsx.ejs ADDED Viewed

@@ -0,0 +1,71 @@
+<% if (router === 'react-router') { -%>
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { AppLayout } from '@/components/layout/AppLayout';
+import { HomePage } from '@/routes/HomePage';
+import { AboutPage } from '@/routes/AboutPage';
+export function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<AppLayout />}>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/about" element={<AboutPage />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+<% } else { -%>
+import {
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { AppLayout } from '@/components/layout/AppLayout';
+import { HomePage } from '@/routes/HomePage';
+import { AboutPage } from '@/routes/AboutPage';
+function RootComponent() {
+  return (
+    <AppLayout>
+      <Outlet />
+    </AppLayout>
+  );
+}
+const rootRoute = createRootRoute({
+  component: RootComponent,
+});
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: HomePage,
+});
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: AboutPage,
+});
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
+const router = createRouter({ routeTree });
+<% if (isTypeScript) { -%>
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+<% } -%>
+export function App() {
+  return <RouterProvider router={router} />;
+}
+<% } -%>

package/templates/src/app/providers.tsx.ejs ADDED Viewed

@@ -0,0 +1,93 @@
+<% if (isTypeScript) { -%>
+import type { ReactNode } from 'react';
+<% } -%>
+<% if (serverState === 'tanstack-query') { -%>
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+<% } -%>
+<% if (serverState === 'swr') { -%>
+import { SWRConfig } from 'swr';
+import { apiGet } from '@/services/api';
+<% } -%>
+<% if (stateManagement === 'redux') { -%>
+import { Provider } from 'react-redux';
+import { store } from '@/store';
+<% } -%>
+<% if (stateManagement === 'jotai') { -%>
+import { Provider as JotaiProvider } from 'jotai';
+<% } -%>
+<% if (stateManagement === 'context') { -%>
+import { AppStateProvider } from '@/store/context';
+<% } -%>
+<% if (uiLibrary === 'chakra') { -%>
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+<% } -%>
+<% if (uiLibrary === 'mui') { -%>
+import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
+<% } -%>
+import { ToastProvider } from '@/components/ui/Toast';
+<% if (serverState === 'tanstack-query') { -%>
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      retry: 1,
+    },
+  },
+});
+<% } -%>
+<% if (uiLibrary === 'mui') { -%>
+const theme = createTheme({
+  palette: {
+    primary: { main: '#1d4ed8' },
+  },
+});
+<% } -%>
+<% if (isTypeScript) { -%>
+interface AppProvidersProps {
+  children: ReactNode;
+}
+<% } -%>
+export function AppProviders({ children }<% if (isTypeScript) { %>: AppProvidersProps<% } %>) {
+  let tree = children;
+<% if (stateManagement === 'context') { -%>
+  tree = <AppStateProvider>{tree}</AppStateProvider>;
+<% } -%>
+<% if (stateManagement === 'jotai') { -%>
+  tree = <JotaiProvider>{tree}</JotaiProvider>;
+<% } -%>
+<% if (stateManagement === 'redux') { -%>
+  tree = <Provider store={store}>{tree}</Provider>;
+<% } -%>
+<% if (serverState === 'tanstack-query') { -%>
+  tree = <QueryClientProvider client={queryClient}>{tree}</QueryClientProvider>;
+<% } -%>
+<% if (serverState === 'swr') { -%>
+  tree = (
+    <SWRConfig
+      value={{
+        fetcher: (url<% if (isTypeScript) { %>: string<% } %>) => apiGet(url),
+        revalidateOnFocus: false,
+      }}
+    >
+      {tree}
+    </SWRConfig>
+  );
+<% } -%>
+<% if (uiLibrary === 'mui') { -%>
+  tree = (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {tree}
+    </ThemeProvider>
+  );
+<% } -%>
+<% if (uiLibrary === 'chakra') { -%>
+  tree = <ChakraProvider value={defaultSystem}>{tree}</ChakraProvider>;
+<% } -%>
+  return <ToastProvider>{tree}</ToastProvider>;
+}

package/templates/src/assets/.gitkeep ADDED Viewed

File without changes

package/templates/src/components/StackBadge.tsx.ejs ADDED Viewed

@@ -0,0 +1,15 @@
+<% if (isTypeScript) { -%>
+interface StackBadgeProps {
+  label: string;
+  value: string;
+}
+<% } -%>
+export function StackBadge({ label, value }<% if (isTypeScript) { %>: StackBadgeProps<% } %>) {
+  return (
+    <div className="stack-badge">
+      <span className="stack-badge-label">{label}</span>
+      <span className="stack-badge-value">{value}</span>
+    </div>
+  );
+}

package/templates/src/components/layout/AppLayout.tsx.ejs ADDED Viewed

@@ -0,0 +1,64 @@
+<% if (isTypeScript) { -%>
+import type { ReactNode } from 'react';
+<% } -%>
+<% if (router === 'react-router') { -%>
+import { NavLink, Outlet } from 'react-router-dom';
+<% } else { -%>
+import { Link, useRouterState } from '@tanstack/react-router';
+<% } -%>
+<% if (isTypeScript && router === 'tanstack-router') { -%>
+interface AppLayoutProps {
+  children?: ReactNode;
+}
+<% } -%>
+export function AppLayout(<% if (router === 'tanstack-router') { %>{ children }<% if (isTypeScript) { %>: AppLayoutProps<% } %><% } %>) {
+<% if (router === 'tanstack-router') { -%>
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+<% } -%>
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <div className="brand">
+          <span className="brand-mark" aria-hidden="true" />
+          <div>
+            <p className="brand-name"><%= projectName %></p>
+            <p className="brand-tagline">Production React starter</p>
+          </div>
+        </div>
+        <nav className="app-nav" aria-label="Primary">
+<% if (router === 'react-router') { -%>
+          <NavLink to="/" end className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}>
+            Home
+          </NavLink>
+          <NavLink to="/about" className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}>
+            About
+          </NavLink>
+<% } else { -%>
+          <Link to="/" className={pathname === '/' ? 'nav-link active' : 'nav-link'}>
+            Home
+          </Link>
+          <Link to="/about" className={pathname === '/about' ? 'nav-link active' : 'nav-link'}>
+            About
+          </Link>
+<% } -%>
+        </nav>
+      </header>
+      <main className="app-main">
+<% if (router === 'react-router') { -%>
+        <Outlet />
+<% } else { -%>
+        {children}
+<% } -%>
+      </main>
+      <footer className="app-footer">
+        <p>
+          Scaffolded with create-react-starter-kit · <%= stackLabels.buildTool %> ·{' '}
+          <%= stackLabels.language %>
+        </p>
+      </footer>
+    </div>
+  );
+}

package/templates/src/components/ui/Toast.tsx.ejs ADDED Viewed

@@ -0,0 +1,61 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+<% if (isTypeScript) { -%>
+  type ReactNode,
+<% } -%>
+} from 'react';
+<% if (isTypeScript) { -%>
+type ToastTone = 'info' | 'success' | 'error';
+interface ToastItem {
+  id: string;
+  message: string;
+  tone: ToastTone;
+}
+interface ToastContextValue {
+  push: (message: string, tone?: ToastTone) => void;
+}
+<% } -%>
+const ToastContext = createContext<% if (isTypeScript) { %><ToastContextValue | null><% } %>(null);
+export function ToastProvider({ children }<% if (isTypeScript) { %>: { children: ReactNode }<% } %>) {
+  const [items, setItems] = useState<% if (isTypeScript) { %><ToastItem[]><% } %>([]);
+  const push = useCallback((message<% if (isTypeScript) { %>: string<% } %>, tone<% if (isTypeScript) { %>: ToastTone<% } %> = 'info') => {
+    const id = crypto.randomUUID();
+    setItems((prev) => [...prev, { id, message, tone }]);
+    window.setTimeout(() => {
+      setItems((prev) => prev.filter((item) => item.id !== id));
+    }, 3200);
+  }, []);
+  const value = useMemo(() => ({ push }), [push]);
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className="toast-viewport" aria-live="polite">
+        {items.map((item) => (
+          <div key={item.id} className={`toast toast-${item.tone}`}>
+            {item.message}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error('useToast must be used within ToastProvider');
+  }
+  return ctx;
+}

package/templates/src/components/ui/UiButton.tsx.ejs ADDED Viewed

@@ -0,0 +1,168 @@
+<% if (isTypeScript) { -%>
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+<% } -%>
+import { cn } from '@/lib/cn';
+<% if (uiLibrary === 'mui') { -%>
+import Button from '@mui/material/Button';
+<% } else if (uiLibrary === 'antd') { -%>
+import { Button as AntButton } from 'antd';
+<% } else if (uiLibrary === 'chakra') { -%>
+import { Button as ChakraButton } from '@chakra-ui/react';
+<% } else if (uiLibrary === 'headless-ui') { -%>
+import { Button as HeadlessButton } from '@headlessui/react';
+<% } else if (uiLibrary === 'shadcn') { -%>
+import { cva<% if (isTypeScript) { %>, type VariantProps<% } %> } from 'class-variance-authority';
+<% } -%>
+<% if (uiLibrary === 'shadcn') { -%>
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-brand-600 text-white hover:bg-brand-700',
+        secondary: 'bg-slate-100 text-slate-900 hover:bg-slate-200',
+        outline: 'border border-slate-300 bg-white hover:bg-slate-50',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-8 px-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+<% if (isTypeScript) { -%>
+export interface UiButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  children: ReactNode;
+}
+<% } -%>
+export function UiButton({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}<% if (isTypeScript) { %>: UiButtonProps<% } %>) {
+  return (
+    <button className={cn(buttonVariants({ variant, size }), className)} {...props}>
+      {children}
+    </button>
+  );
+}
+<% } else if (uiLibrary === 'mui') { -%>
+<% if (isTypeScript) { -%>
+interface UiButtonProps {
+  children: ReactNode;
+  onClick?: () => void;
+  variant?: 'contained' | 'outlined' | 'text';
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+}
+<% } -%>
+export function UiButton({
+  children,
+  onClick,
+  variant = 'contained',
+  type = 'button',
+  disabled,
+}<% if (isTypeScript) { %>: UiButtonProps<% } %>) {
+  return (
+    <Button variant={variant} onClick={onClick} type={type} disabled={disabled}>
+      {children}
+    </Button>
+  );
+}
+<% } else if (uiLibrary === 'antd') { -%>
+<% if (isTypeScript) { -%>
+interface UiButtonProps {
+  children: ReactNode;
+  onClick?: () => void;
+  type?: 'default' | 'primary' | 'dashed' | 'link' | 'text';
+  htmlType?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+}
+<% } -%>
+export function UiButton({
+  children,
+  onClick,
+  type = 'primary',
+  htmlType = 'button',
+  disabled,
+}<% if (isTypeScript) { %>: UiButtonProps<% } %>) {
+  return (
+    <AntButton type={type} onClick={onClick} htmlType={htmlType} disabled={disabled}>
+      {children}
+    </AntButton>
+  );
+}
+<% } else if (uiLibrary === 'chakra') { -%>
+<% if (isTypeScript) { -%>
+interface UiButtonProps {
+  children: ReactNode;
+  onClick?: () => void;
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+}
+<% } -%>
+export function UiButton({ children, onClick, type = 'button', disabled }<% if (isTypeScript) { %>: UiButtonProps<% } %>) {
+  return (
+    <ChakraButton colorPalette="blue" onClick={onClick} type={type} disabled={disabled}>
+      {children}
+    </ChakraButton>
+  );
+}
+<% } else if (uiLibrary === 'headless-ui') { -%>
+<% if (isTypeScript) { -%>
+interface UiButtonProps {
+  children: ReactNode;
+  onClick?: () => void;
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+  className?: string;
+}
+<% } -%>
+export function UiButton({
+  children,
+  onClick,
+  type = 'button',
+  disabled,
+  className,
+}<% if (isTypeScript) { %>: UiButtonProps<% } %>) {
+  return (
+    <HeadlessButton
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={cn('ui-button', className)}
+    >
+      {children}
+    </HeadlessButton>
+  );
+}
+<% } else { -%>
+<% if (isTypeScript) { -%>
+interface UiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+<% } -%>
+export function UiButton({ children, className, ...props }<% if (isTypeScript) { %>: UiButtonProps<% } %>) {
+  return (
+    <button className={cn('ui-button', className)} {...props}>
+      {children}
+    </button>
+  );
+}
+<% } -%>

package/templates/src/config/env.ts.ejs ADDED Viewed

@@ -0,0 +1,18 @@
+<% if (isTypeScript) { -%>
+/**
+ * Central place for reading public env vars.
+ * Only expose values that are safe for the browser bundle.
+ */
+export const env = {
+  apiBaseUrl:
+    import.meta.env?.VITE_API_BASE_URL ?? 'https://jsonplaceholder.typicode.com',
+  mode: import.meta.env?.MODE ?? 'development',
+} as const;
+<% } else { -%>
+/** Central place for reading public env vars. */
+export const env = {
+  apiBaseUrl:
+    import.meta.env?.VITE_API_BASE_URL ?? 'https://jsonplaceholder.typicode.com',
+  mode: import.meta.env?.MODE ?? 'development',
+};
+<% } -%>

package/templates/src/features/counter/CounterPanel.tsx.ejs ADDED Viewed

@@ -0,0 +1,66 @@
+<% if (stateManagement === 'redux') { -%>
+import { useDispatch, useSelector } from 'react-redux';
+import { decrement, increment } from '@/store';
+<% if (isTypeScript) { -%>
+import type { RootState } from '@/store';
+<% } -%>
+<% } else if (stateManagement === 'zustand') { -%>
+import { useCounterStore } from '@/store';
+<% } else if (stateManagement === 'jotai') { -%>
+import { useAtom } from 'jotai';
+import { counterAtom } from '@/store';
+<% } else if (stateManagement === 'context') { -%>
+import { useAppState } from '@/store/context';
+<% } -%>
+import { UiButton } from '@/components/ui/UiButton';
+import { useToast } from '@/components/ui/Toast';
+export function CounterPanel() {
+  const { push } = useToast();
+<% if (stateManagement === 'redux') { -%>
+  const value = useSelector((state<% if (isTypeScript) { %>: RootState<% } %>) => state.counter.value);
+  const dispatch = useDispatch();
+  const onInc = () => dispatch(increment());
+  const onDec = () => dispatch(decrement());
+<% } else if (stateManagement === 'zustand') { -%>
+  const value = useCounterStore((s) => s.value);
+  const onInc = useCounterStore((s) => s.increment);
+  const onDec = useCounterStore((s) => s.decrement);
+<% } else if (stateManagement === 'jotai') { -%>
+  const [value, setValue] = useAtom(counterAtom);
+  const onInc = () => setValue((v) => v + 1);
+  const onDec = () => setValue((v) => v - 1);
+<% } else if (stateManagement === 'context') { -%>
+  const { state, dispatch } = useAppState();
+  const value = state.value;
+  const onInc = () => dispatch({ type: 'increment' });
+  const onDec = () => dispatch({ type: 'decrement' });
+<% } else { -%>
+  const value = 0;
+  const onInc = () => undefined;
+  const onDec = () => undefined;
+<% } -%>
+  return (
+    <article className="panel">
+      <header className="panel-header">
+        <h2>Client state</h2>
+        <p><%= stackLabels.stateManagement %> example — local interactive counter.</p>
+      </header>
+<% if (stateManagement === 'none') { -%>
+      <p className="muted">Client state library was set to None. Add one later under <code>src/store</code>.</p>
+<% } else { -%>
+      <div className="counter">
+        <UiButton onClick={() => { onDec(); push('Decremented', 'info'); }}>−</UiButton>
+        <strong className="counter-value" aria-live="polite">{value}</strong>
+        <UiButton onClick={() => { onInc(); push('Incremented', 'success'); }}>+</UiButton>
+      </div>
+<% } -%>
+      <p className="panel-note">
+        <strong>When to use:</strong> shared UI state that is not server cache.
+        <br />
+        <strong>Best practice:</strong> keep slices/stores small and colocated with features.
+      </p>
+    </article>
+  );
+}