create-react-starter-kit 1.0.0

package/dist/templates/src/components/ui/UiButton.tsx.ejs

@@ -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/dist/templates/src/config/env.ts.ejs

@@ -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/dist/templates/src/features/counter/CounterPanel.tsx.ejs

@@ -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>
+  );
+}

package/dist/templates/src/features/feedback/FeedbackForm.tsx.ejs

@@ -0,0 +1,373 @@
+<% if (forms === 'react-hook-form') { -%>
+import { useForm } from 'react-hook-form';
+<% if (validation === 'zod') { -%>
+import { zodResolver } from '@hookform/resolvers/zod';
+import { feedbackSchema<% if (isTypeScript) { %>, type FeedbackValues<% } %> } from '@/lib/validation';
+<% } else if (isTypeScript) { -%>
+import type { FeedbackValues } from '@/lib/validation';
+<% } -%>
+<% } else if (forms === 'formik') { -%>
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+<% if (validation === 'yup') { -%>
+import { feedbackSchema } from '@/lib/validation';
+<% } else if (validation === 'zod') { -%>
+import { feedbackSchema } from '@/lib/validation';
+<% } -%>
+<% if (isTypeScript) { -%>
+import type { FeedbackValues } from '@/lib/validation';
+<% } -%>
+<% } else if (forms === 'tanstack-form') { -%>
+import { useForm } from '@tanstack/react-form';
+<% if (validation !== 'none') { -%>
+import { feedbackSchema } from '@/lib/validation';
+<% } -%>
+<% if (isTypeScript) { -%>
+import type { FeedbackValues } from '@/lib/validation';
+<% } -%>
+<% } else { -%>
+import { useState } from 'react';
+<% if (validation === 'none') { -%>
+import { validateFeedback<% if (isTypeScript) { %>, type FeedbackValues<% } %> } from '@/lib/validation';
+<% } else { -%>
+import { feedbackSchema<% if (isTypeScript) { %>, type FeedbackValues<% } %> } from '@/lib/validation';
+<% } -%>
+<% } -%>
+import { createFeedback } from '@/services/api';
+import { useToast } from '@/components/ui/Toast';
+import { UiButton } from '@/components/ui/UiButton';
+
+const defaults<% if (isTypeScript) { %>: FeedbackValues<% } %> = {
+  name: '',
+  email: '',
+  message: '',
+};
+
+export function FeedbackForm() {
+  const { push } = useToast();
+
+<% if (forms === 'react-hook-form') { -%>
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<% if (isTypeScript) { %><FeedbackValues><% } %>({
+    defaultValues: defaults,
+<% if (validation === 'zod') { -%>
+    resolver: zodResolver(feedbackSchema),
+<% } -%>
+  });
+
+  const onSubmit = async (values<% if (isTypeScript) { %>: FeedbackValues<% } %>) => {
+<% if (validation === 'yup') { -%>
+    await feedbackSchema.validate(values, { abortEarly: false });
+<% } else if (validation === 'valibot') { -%>
+    const { parse } = await import('valibot');
+    parse(feedbackSchema, values);
+<% } else if (validation === 'joi') { -%>
+    const result = feedbackSchema.validate(values, { abortEarly: false });
+    if (result.error) {
+      throw result.error;
+    }
+<% } -%>
+    await createFeedback(values);
+    push('Feedback submitted (demo API)', 'success');
+    reset();
+  };
+
+  return (
+    <article className="panel">
+      <header className="panel-header">
+        <h2>Forms & validation</h2>
+        <p>
+          <%= stackLabels.forms %>
+<% if (validation !== 'none') { -%>
+          {' '}
+          + <%= stackLabels.validation %>
+<% } -%>
+        </p>
+      </header>
+      <form className="feedback-form" onSubmit={handleSubmit(onSubmit)} noValidate>
+        <label>
+          Name
+          <input {...register('name')} placeholder="Ada Lovelace" />
+          {errors.name && <span className="field-error">{errors.name.message}</span>}
+        </label>
+        <label>
+          Email
+          <input type="email" {...register('email')} placeholder="ada@example.com" />
+          {errors.email && <span className="field-error">{errors.email.message}</span>}
+        </label>
+        <label>
+          Message
+          <textarea rows={4} {...register('message')} placeholder="What should we improve?" />
+          {errors.message && <span className="field-error">{errors.message.message}</span>}
+        </label>
+        <UiButton type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Sending…' : 'Send feedback'}
+        </UiButton>
+      </form>
+      <p className="panel-note">
+        <strong>When to use:</strong> complex forms with validation and async submit.
+        <br />
+        <strong>Best practice:</strong> keep schemas in <code>src/lib</code> and reuse across client/server.
+      </p>
+    </article>
+  );
+<% } else if (forms === 'formik') { -%>
+  return (
+    <article className="panel">
+      <header className="panel-header">
+        <h2>Forms & validation</h2>
+        <p>
+          <%= stackLabels.forms %>
+<% if (validation !== 'none') { -%>
+          {' '}
+          + <%= stackLabels.validation %>
+<% } -%>
+        </p>
+      </header>
+      <Formik
+        initialValues={defaults}
+<% if (validation === 'yup') { -%>
+        validationSchema={feedbackSchema}
+<% } -%>
+        onSubmit={async (values, helpers) => {
+<% if (validation === 'zod') { -%>
+          feedbackSchema.parse(values);
+<% } -%>
+          await createFeedback(values);
+          push('Feedback submitted (demo API)', 'success');
+          helpers.resetForm();
+        }}
+      >
+        {({ isSubmitting }) => (
+          <Form className="feedback-form" noValidate>
+            <label>
+              Name
+              <Field name="name" placeholder="Ada Lovelace" />
+              <ErrorMessage name="name" component="span" className="field-error" />
+            </label>
+            <label>
+              Email
+              <Field name="email" type="email" placeholder="ada@example.com" />
+              <ErrorMessage name="email" component="span" className="field-error" />
+            </label>
+            <label>
+              Message
+              <Field as="textarea" rows={4} name="message" placeholder="What should we improve?" />
+              <ErrorMessage name="message" component="span" className="field-error" />
+            </label>
+            <UiButton type="submit" disabled={isSubmitting}>
+              {isSubmitting ? 'Sending…' : 'Send feedback'}
+            </UiButton>
+          </Form>
+        )}
+      </Formik>
+      <p className="panel-note">
+        <strong>When to use:</strong> form-heavy screens with Formik's render/props model.
+        <br />
+        <strong>Best practice:</strong> prefer Yup/Zod schemas over ad-hoc validators.
+      </p>
+    </article>
+  );
+<% } else if (forms === 'tanstack-form') { -%>
+  const form = useForm({
+    defaultValues: defaults,
+    onSubmit: async ({ value }) => {
+<% if (validation === 'zod') { -%>
+      feedbackSchema.parse(value);
+<% } else if (validation === 'yup') { -%>
+      await feedbackSchema.validate(value);
+<% } else if (validation === 'valibot') { -%>
+      const { parse } = await import('valibot');
+      parse(feedbackSchema, value);
+<% } else if (validation === 'joi') { -%>
+      const result = feedbackSchema.validate(value);
+      if (result.error) throw result.error;
+<% } -%>
+      await createFeedback(value);
+      push('Feedback submitted (demo API)', 'success');
+      form.reset();
+    },
+  });
+
+  return (
+    <article className="panel">
+      <header className="panel-header">
+        <h2>Forms & validation</h2>
+        <p>
+          <%= stackLabels.forms %>
+<% if (validation !== 'none') { -%>
+          {' '}
+          + <%= stackLabels.validation %>
+<% } -%>
+        </p>
+      </header>
+      <form
+        className="feedback-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <form.Field name="name">
+          {(field) => (
+            <label>
+              Name
+              <input
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                placeholder="Ada Lovelace"
+              />
+            </label>
+          )}
+        </form.Field>
+        <form.Field name="email">
+          {(field) => (
+            <label>
+              Email
+              <input
+                type="email"
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                placeholder="ada@example.com"
+              />
+            </label>
+          )}
+        </form.Field>
+        <form.Field name="message">
+          {(field) => (
+            <label>
+              Message
+              <textarea
+                rows={4}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                placeholder="What should we improve?"
+              />
+            </label>
+          )}
+        </form.Field>
+        <UiButton type="submit">Send feedback</UiButton>
+      </form>
+      <p className="panel-note">
+        <strong>When to use:</strong> headless, type-safe forms with fine-grained reactivity.
+        <br />
+        <strong>Best practice:</strong> validate at field and form boundaries with a shared schema.
+      </p>
+    </article>
+  );
+<% } else { -%>
+  const [values, setValues] = useState<% if (isTypeScript) { %><FeedbackValues><% } %>(defaults);
+  const [errors, setErrors] = useState<% if (isTypeScript) { %><Partial<Record<keyof FeedbackValues, string>>><% } %>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const onSubmit = async (event<% if (isTypeScript) { %>: React.FormEvent<% } %>) => {
+    event.preventDefault();
+<% if (validation === 'none') { -%>
+    const nextErrors = validateFeedback(values);
+<% } else if (validation === 'zod') { -%>
+    const parsed = feedbackSchema.safeParse(values);
+    const nextErrors = parsed.success
+      ? {}
+      : Object.fromEntries(
+          parsed.error.issues.map((issue) => [String(issue.path[0]), issue.message]),
+        );
+<% } else if (validation === 'yup') { -%>
+    let nextErrors<% if (isTypeScript) { %>: Partial<Record<keyof FeedbackValues, string>><% } %> = {};
+    try {
+      await feedbackSchema.validate(values, { abortEarly: false });
+    } catch (err) {
+      if (err && typeof err === 'object' && 'inner' in err) {
+        nextErrors = Object.fromEntries(
+          (err<% if (isTypeScript) { %> as { inner: Array<{ path?: string; message: string }> }<% } %>).inner
+            .filter((e) => e.path)
+            .map((e) => [e.path, e.message]),
+        );
+      }
+    }
+<% } else if (validation === 'joi') { -%>
+    const result = feedbackSchema.validate(values, { abortEarly: false });
+    const nextErrors = result.error
+      ? Object.fromEntries(
+          result.error.details.map((d<% if (isTypeScript) { %>: { path: (string | number)[]; message: string }<% } %>) => [
+            String(d.path[0]),
+            d.message,
+          ]),
+        )
+      : {};
+<% } else { -%>
+    let nextErrors<% if (isTypeScript) { %>: Partial<Record<keyof FeedbackValues, string>><% } %> = {};
+    try {
+      const { parse } = await import('valibot');
+      parse(feedbackSchema, values);
+    } catch (err) {
+      nextErrors = { message: err instanceof Error ? err.message : 'Invalid form' };
+    }
+<% } -%>
+    setErrors(nextErrors);
+    if (Object.keys(nextErrors).length) return;
+    setIsSubmitting(true);
+    try {
+      await createFeedback(values);
+      push('Feedback submitted (demo API)', 'success');
+      setValues(defaults);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <article className="panel">
+      <header className="panel-header">
+        <h2>Forms & validation</h2>
+        <p>Native form controls<% if (validation !== 'none') { %> + <%= stackLabels.validation %><% } %></p>
+      </header>
+      <form className="feedback-form" onSubmit={onSubmit} noValidate>
+        <label>
+          Name
+          <input
+            value={values.name}
+            onChange={(e) => setValues((v) => ({ ...v, name: e.target.value }))}
+            placeholder="Ada Lovelace"
+          />
+          {errors.name && <span className="field-error">{errors.name}</span>}
+        </label>
+        <label>
+          Email
+          <input
+            type="email"
+            value={values.email}
+            onChange={(e) => setValues((v) => ({ ...v, email: e.target.value }))}
+            placeholder="ada@example.com"
+          />
+          {errors.email && <span className="field-error">{errors.email}</span>}
+        </label>
+        <label>
+          Message
+          <textarea
+            rows={4}
+            value={values.message}
+            onChange={(e) => setValues((v) => ({ ...v, message: e.target.value }))}
+            placeholder="What should we improve?"
+          />
+          {errors.message && <span className="field-error">{errors.message}</span>}
+        </label>
+        <UiButton type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Sending…' : 'Send feedback'}
+        </UiButton>
+      </form>
+      <p className="panel-note">
+        <strong>When to use:</strong> simple forms without a dedicated form library.
+        <br />
+        <strong>Best practice:</strong> graduate to a form library once fields or validation grow.
+      </p>
+    </article>
+  );
+<% } -%>
+}