create-react-starter-kit 1.0.0

package/dist/templates/src/features/posts/PostsPanel.tsx.ejs

@@ -0,0 +1,91 @@
+<% if (serverState === 'tanstack-query') { -%>
+import { useQuery } from '@tanstack/react-query';
+import { fetchPosts } from '@/services/api';
+<% } else if (serverState === 'swr') { -%>
+import useSWR from 'swr';
+<% } else if (serverState === 'rtk-query') { -%>
+import { useGetPostsQuery } from '@/store/postsApi';
+<% } else { -%>
+import { useEffect, useState } from 'react';
+import { fetchPosts } from '@/services/api';
+<% } -%>
+
+export function PostsPanel() {
+<% if (serverState === 'tanstack-query') { -%>
+  const { data, isLoading, error, refetch, isFetching } = useQuery({
+    queryKey: ['posts'],
+    queryFn: fetchPosts,
+  });
+<% } else if (serverState === 'swr') { -%>
+  const { data, error, isLoading, isValidating, mutate } = useSWR('/posts?_limit=5');
+  const isFetching = isValidating;
+  const refetch = () => mutate();
+<% } else if (serverState === 'rtk-query') { -%>
+  const { data, isLoading, error, refetch, isFetching } = useGetPostsQuery();
+<% } else { -%>
+  const [data, setData] = useState<% if (isTypeScript) { %><Awaited<ReturnType<typeof fetchPosts>> | null><% } %>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<% if (isTypeScript) { %><Error | null><% } %>(null);
+  const [isFetching, setIsFetching] = useState(false);
+
+  const load = async () => {
+    setIsFetching(true);
+    setError(null);
+    try {
+      const posts = await fetchPosts();
+      setData(posts);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to load'));
+    } finally {
+      setIsLoading(false);
+      setIsFetching(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const refetch = () => void load();
+<% } -%>
+
+  return (
+    <article className="panel">
+      <header className="panel-header">
+        <h2>Server state</h2>
+        <p>
+          <%= stackLabels.serverState === 'None' ? 'Manual fetch via ' + stackLabels.apiLayer : stackLabels.serverState %>{' '}
+          · JSONPlaceholder posts
+        </p>
+      </header>
+
+      <div className="panel-toolbar">
+        <button type="button" className="ui-button" onClick={() => void refetch()} disabled={isFetching}>
+          {isFetching ? 'Refreshing…' : 'Refresh'}
+        </button>
+      </div>
+
+      {isLoading && <p className="muted">Loading posts…</p>}
+      {error && (
+        <p className="error-text">
+          {error instanceof Error ? error.message : 'Request failed'}
+        </p>
+      )}
+      {data && (
+        <ul className="post-list">
+          {data.map((post<% if (isTypeScript) { %>: { id: number; title: string }<% } %>) => (
+            <li key={post.id}>
+              <strong>#{post.id}</strong> {post.title}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <p className="panel-note">
+        <strong>When to use:</strong> remote data with caching, retries, and refetch rules.
+        <br />
+        <strong>Best practice:</strong> treat server cache separately from UI/client state.
+      </p>
+    </article>
+  );
+}

package/dist/templates/src/hooks/useMounted.ts.ejs

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns true after the component has mounted on the client.
+ * Useful for avoiding hydration mismatches with client-only UI.
+ */
+export function useMounted() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+}

package/dist/templates/src/lib/cn.ts.ejs

@@ -0,0 +1,12 @@
+<% if (uiLibrary === 'shadcn') { -%>
+import { clsx<% if (isTypeScript) { %>, type ClassValue<% } %> } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs<% if (isTypeScript) { %>: ClassValue[]<% } %>) {
+  return twMerge(clsx(inputs));
+}
+<% } else { -%>
+export function cn(...parts<% if (isTypeScript) { %>: Array<string | false | null | undefined><% } %>) {
+  return parts.filter(Boolean).join(' ');
+}
+<% } -%>

package/dist/templates/src/lib/monitoring.ts.ejs

@@ -0,0 +1,66 @@
+<% if (errorTracking === 'sentry') { -%>
+import * as Sentry from '@sentry/react';
+
+export function initMonitoring() {
+  const dsn = import.meta.env?.VITE_SENTRY_DSN;
+  if (!dsn) {
+    return;
+  }
+
+  Sentry.init({
+    dsn,
+    tracesSampleRate: 0.1,
+    environment: import.meta.env?.MODE ?? 'development',
+  });
+}
+<% } else if (errorTracking === 'bugsnag') { -%>
+import Bugsnag from '@bugsnag/js';
+import BugsnagPluginReact from '@bugsnag/plugin-react';
+
+export function initMonitoring() {
+  const apiKey = import.meta.env?.VITE_BUGSNAG_API_KEY;
+  if (!apiKey) {
+    return;
+  }
+
+  Bugsnag.start({
+    apiKey,
+    plugins: [new BugsnagPluginReact()],
+  });
+}
+<% } else if (errorTracking === 'logrocket') { -%>
+import LogRocket from 'logrocket';
+
+export function initMonitoring() {
+  const appId = import.meta.env?.VITE_LOGROCKET_APP_ID;
+  if (!appId) {
+    return;
+  }
+
+  LogRocket.init(appId);
+}
+<% } else if (errorTracking === 'datadog') { -%>
+import { datadogRum } from '@datadog/browser-rum';
+
+export function initMonitoring() {
+  const applicationId = import.meta.env?.VITE_DATADOG_APPLICATION_ID;
+  const clientToken = import.meta.env?.VITE_DATADOG_CLIENT_TOKEN;
+  if (!applicationId || !clientToken) {
+    return;
+  }
+
+  datadogRum.init({
+    applicationId,
+    clientToken,
+    site: import.meta.env?.VITE_DATADOG_SITE ?? 'datadoghq.com',
+    service: '<%= projectName %>',
+    sessionSampleRate: 100,
+    trackResources: true,
+    trackLongTasks: true,
+  });
+}
+<% } else { -%>
+export function initMonitoring() {
+  // Error tracking disabled for this scaffold.
+}
+<% } -%>

package/dist/templates/src/lib/validation.ts.ejs

@@ -0,0 +1,81 @@
+<% if (validation === 'zod') { -%>
+import { z } from 'zod';
+
+export const feedbackSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Enter a valid email'),
+  message: z.string().min(10, 'Message must be at least 10 characters'),
+});
+
+<% if (isTypeScript) { -%>
+export type FeedbackValues = z.infer<typeof feedbackSchema>;
+<% } -%>
+<% } else if (validation === 'yup') { -%>
+import * as yup from 'yup';
+
+export const feedbackSchema = yup.object({
+  name: yup.string().min(2, 'Name must be at least 2 characters').required(),
+  email: yup.string().email('Enter a valid email').required(),
+  message: yup.string().min(10, 'Message must be at least 10 characters').required(),
+});
+
+<% if (isTypeScript) { -%>
+export type FeedbackValues = yup.InferType<typeof feedbackSchema>;
+<% } -%>
+<% } else if (validation === 'valibot') { -%>
+import * as v from 'valibot';
+
+export const feedbackSchema = v.object({
+  name: v.pipe(v.string(), v.minLength(2, 'Name must be at least 2 characters')),
+  email: v.pipe(v.string(), v.email('Enter a valid email')),
+  message: v.pipe(v.string(), v.minLength(10, 'Message must be at least 10 characters')),
+});
+
+<% if (isTypeScript) { -%>
+export type FeedbackValues = v.InferOutput<typeof feedbackSchema>;
+<% } -%>
+<% } else if (validation === 'joi') { -%>
+import Joi from 'joi';
+
+export const feedbackSchema = Joi.object({
+  name: Joi.string().min(2).required().messages({
+    'string.min': 'Name must be at least 2 characters',
+  }),
+  email: Joi.string().email({ tlds: false }).required().messages({
+    'string.email': 'Enter a valid email',
+  }),
+  message: Joi.string().min(10).required().messages({
+    'string.min': 'Message must be at least 10 characters',
+  }),
+});
+
+<% if (isTypeScript) { -%>
+export interface FeedbackValues {
+  name: string;
+  email: string;
+  message: string;
+}
+<% } -%>
+<% } else { -%>
+<% if (isTypeScript) { -%>
+export interface FeedbackValues {
+  name: string;
+  email: string;
+  message: string;
+}
+<% } -%>
+
+export function validateFeedback(values<% if (isTypeScript) { %>: FeedbackValues<% } %>) {
+  const errors<% if (isTypeScript) { %>: Partial<Record<keyof FeedbackValues, string>><% } %> = {};
+  if (!values.name || values.name.length < 2) {
+    errors.name = 'Name must be at least 2 characters';
+  }
+  if (!values.email || !values.email.includes('@')) {
+    errors.email = 'Enter a valid email';
+  }
+  if (!values.message || values.message.length < 10) {
+    errors.message = 'Message must be at least 10 characters';
+  }
+  return errors;
+}
+<% } -%>

package/dist/templates/src/main.tsx.ejs

@@ -0,0 +1,22 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { AppProviders } from '@/app/providers';
+import { App } from '@/app/App';
+import { initMonitoring } from '@/lib/monitoring';
+import '@/styles/global.<%= styling === 'sass' && uiLibrary !== 'shadcn' ? 'scss' : 'css' %>';
+
+initMonitoring();
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) {
+  throw new Error('Root element #root not found');
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <AppProviders>
+      <App />
+    </AppProviders>
+  </StrictMode>,
+);

package/dist/templates/src/routes/AboutPage.tsx.ejs

@@ -0,0 +1,30 @@
+export function AboutPage() {
+  return (
+    <div className="page about-page">
+      <h1>About this starter</h1>
+      <p>
+        Generated with <strong>create-react-starter-kit</strong> using a scalable{' '}
+        <strong>feature-based</strong> layout (domain modules under <code>src/features</code>) —
+        the same organizational approach used across large production React codebases.
+      </p>
+      <ul className="about-list">
+        <li>
+          <strong>Extend features</strong> under <code>src/features/&lt;name&gt;/</code> — keep
+          domain logic close to the UI that owns it.
+        </li>
+        <li>
+          <strong>Shared primitives</strong> live in <code>src/components/</code> and{' '}
+          <code>src/lib/</code>. Prefer imports via the <code>@/</code> path alias.
+        </li>
+        <li>
+          <strong>Docs</strong> in <code>docs/</code> explain architecture, testing, and production
+          habits for this stack.
+        </li>
+      </ul>
+      <p>
+        Prefer reading <code>docs/getting-started.md</code> next, then{' '}
+        <code>docs/selected-stack.md</code> for library-specific guidance.
+      </p>
+    </div>
+  );
+}

package/dist/templates/src/routes/HomePage.tsx.ejs

@@ -0,0 +1,47 @@
+import { CounterPanel } from '@/features/counter/CounterPanel';
+import { PostsPanel } from '@/features/posts/PostsPanel';
+import { FeedbackForm } from '@/features/feedback/FeedbackForm';
+import { StackBadge } from '@/components/StackBadge';
+import { useToast } from '@/components/ui/Toast';
+import { UiButton } from '@/components/ui/UiButton';
+
+export function HomePage() {
+  const { push } = useToast();
+
+  return (
+    <div className="page home-page">
+      <section className="hero">
+        <p className="eyebrow">Starter workspace</p>
+        <h1><%= projectName %></h1>
+        <p className="lede">
+          A minimal, production-shaped React app wired for your selected stack. Explore the panels
+          below — each one is a real usage example, not a placeholder.
+        </p>
+        <div className="hero-actions">
+          <UiButton onClick={() => push('Toast system is ready', 'success')}>
+            Show toast
+          </UiButton>
+          <a className="text-link" href="/about">
+            Read about the stack →
+          </a>
+        </div>
+        <div className="stack-row">
+          <StackBadge label="Build" value="<%= stackLabels.buildTool %>" />
+          <StackBadge label="Language" value="<%= stackLabels.language %>" />
+          <StackBadge label="Router" value="<%= stackLabels.router %>" />
+          <StackBadge label="State" value="<%= stackLabels.stateManagement %>" />
+          <StackBadge label="Data" value="<%= stackLabels.serverState %>" />
+          <StackBadge label="UI" value="<%= stackLabels.uiLibrary %>" />
+        </div>
+      </section>
+
+      <section className="panels">
+<% if (stateManagement !== 'none') { -%>
+        <CounterPanel />
+<% } -%>
+        <PostsPanel />
+        <FeedbackForm />
+      </section>
+    </div>
+  );
+}

package/dist/templates/src/services/api.ts.ejs

@@ -0,0 +1,84 @@
+<% if (apiLayer === 'axios') { -%>
+import axios from 'axios';
+import { env } from '@/config/env';
+
+const baseURL = env.apiBaseUrl;
+
+export const apiClient = axios.create({
+  baseURL,
+  headers: { 'Content-Type': 'application/json' },
+  timeout: 10_000,
+});
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    console.error('[api]', error);
+    return Promise.reject(error);
+  },
+);
+
+export async function apiGet<% if (isTypeScript) { %><T = unknown><% } %>(path<% if (isTypeScript) { %>: string<% } %>)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.get<% if (isTypeScript) { %><T><% } %>(path);
+  return data;
+}
+
+export async function apiPost<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>: B<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.post<% if (isTypeScript) { %><T><% } %>(path, body);
+  return data;
+}
+<% } else { -%>
+import { env } from '@/config/env';
+
+const baseURL = env.apiBaseUrl;
+
+async function request<% if (isTypeScript) { %><T = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  init<% if (isTypeScript) { %>?: RequestInit<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const response = await fetch(`${baseURL}${path}`, {
+    headers: { 'Content-Type': 'application/json', ...(init?.headers ?? {}) },
+    ...init,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export async function apiGet<% if (isTypeScript) { %><T = unknown><% } %>(path<% if (isTypeScript) { %>: string<% } %>)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path);
+}
+
+export async function apiPost<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>: B<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path, {
+    method: 'POST',
+    body: JSON.stringify(body),
+  });
+}
+<% } -%>
+
+<% if (isTypeScript) { -%>
+export interface Post {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+}
+<% } -%>
+
+export async function fetchPosts() {
+  return apiGet<% if (isTypeScript) { %><Post[]><% } %>('/posts?_limit=5');
+}
+
+export async function createFeedback(payload<% if (isTypeScript) { %>: { name: string; email: string; message: string }<% } %>) {
+  return apiPost('/posts', payload);
+}

package/dist/templates/src/store/index.ts.ejs

@@ -0,0 +1,80 @@
+<% if (stateManagement === 'redux') { -%>
+import { configureStore, createSlice } from '@reduxjs/toolkit';
+<% if (isTypeScript) { -%>
+import type { PayloadAction } from '@reduxjs/toolkit';
+<% } -%>
+<% if (serverState === 'rtk-query') { -%>
+import { postsApi } from './postsApi';
+<% } -%>
+
+<% if (isTypeScript) { -%>
+interface CounterState {
+  value: number;
+}
+<% } -%>
+
+const initialState<% if (isTypeScript) { %>: CounterState<% } %> = { value: 0 };
+
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment(state) {
+      state.value += 1;
+    },
+    decrement(state) {
+      state.value -= 1;
+    },
+    setValue(state, action<% if (isTypeScript) { %>: PayloadAction<number><% } %>) {
+      state.value = action.payload;
+    },
+  },
+});
+
+export const { increment, decrement, setValue } = counterSlice.actions;
+
+export const store = configureStore({
+  reducer: {
+    counter: counterSlice.reducer,
+<% if (serverState === 'rtk-query') { -%>
+    [postsApi.reducerPath]: postsApi.reducer,
+<% } -%>
+  },
+<% if (serverState === 'rtk-query') { -%>
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(postsApi.middleware),
+<% } -%>
+});
+
+<% if (isTypeScript) { -%>
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+<% } -%>
+<% } else if (stateManagement === 'zustand') { -%>
+import { create } from 'zustand';
+
+<% if (isTypeScript) { -%>
+interface CounterStore {
+  value: number;
+  increment: () => void;
+  decrement: () => void;
+  setValue: (value: number) => void;
+}
+<% } -%>
+
+export const useCounterStore = create<% if (isTypeScript) { %><CounterStore><% } %>((set) => ({
+  value: 0,
+  increment: () => set((state) => ({ value: state.value + 1 })),
+  decrement: () => set((state) => ({ value: state.value - 1 })),
+  setValue: (value) => set({ value }),
+}));
+<% } else if (stateManagement === 'jotai') { -%>
+import { atom } from 'jotai';
+
+export const counterAtom = atom(0);
+<% } else if (stateManagement === 'context') { -%>
+export { AppStateProvider, useAppState } from './context';
+<% } else { -%>
+// Client state management was set to "None".
+export {};
+<% } -%>