create-modern-react 1.0.0 → 2.0.0

package/templates/optional/antd/theme.ts

@@ -0,0 +1,75 @@
+import type { ThemeConfig } from 'antd';
+
+/**
+ * Ant Design theme configuration
+ * Customizes the design tokens to match your brand
+ *
+ * @see https://ant.design/docs/react/customize-theme
+ */
+export const antdTheme: ThemeConfig = {
+  token: {
+    // Primary colors
+    colorPrimary: '#1677ff',
+    colorSuccess: '#52c41a',
+    colorWarning: '#faad14',
+    colorError: '#ff4d4f',
+    colorInfo: '#1677ff',
+
+    // Border radius
+    borderRadius: 6,
+    borderRadiusLG: 8,
+    borderRadiusSM: 4,
+
+    // Font
+    fontFamily:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontSize: 14,
+
+    // Control height
+    controlHeight: 36,
+    controlHeightLG: 44,
+    controlHeightSM: 28,
+
+    // Motion
+    motionDurationFast: '0.1s',
+    motionDurationMid: '0.2s',
+    motionDurationSlow: '0.3s',
+  },
+  components: {
+    Button: {
+      primaryShadow: 'none',
+      defaultShadow: 'none',
+    },
+    Input: {
+      activeBorderColor: '#1677ff',
+      hoverBorderColor: '#4096ff',
+    },
+    Card: {
+      headerBg: 'transparent',
+    },
+    Table: {
+      headerBg: '#fafafa',
+    },
+    Menu: {
+      itemBg: 'transparent',
+    },
+  },
+};
+
+/**
+ * Dark theme configuration
+ */
+export const antdDarkTheme: ThemeConfig = {
+  ...antdTheme,
+  token: {
+    ...antdTheme.token,
+    // Override for dark mode
+    colorBgContainer: '#141414',
+    colorBgElevated: '#1f1f1f',
+    colorBgLayout: '#000000',
+    colorBorderSecondary: '#303030',
+    colorText: 'rgba(255, 255, 255, 0.85)',
+    colorTextSecondary: 'rgba(255, 255, 255, 0.65)',
+    colorTextTertiary: 'rgba(255, 255, 255, 0.45)',
+  },
+};

package/templates/optional/husky/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/templates/optional/husky/.lintstagedrc.json

@@ -0,0 +1,6 @@
+{
+  "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
+  "*.{js,jsx}": ["eslint --fix", "prettier --write"],
+  "*.{css,scss}": ["prettier --write"],
+  "*.{json,md}": ["prettier --write"]
+}

package/templates/optional/redux/hooks.ts

@@ -0,0 +1,17 @@
+import { useDispatch, useSelector, type TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+/**
+ * Typed version of useDispatch hook
+ * Use this instead of plain `useDispatch` for better type inference
+ */
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+
+/**
+ * Typed version of useSelector hook
+ * Use this instead of plain `useSelector` for better type inference
+ *
+ * @example
+ * const isLoading = useAppSelector((state) => state.app.isLoading);
+ */
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

package/templates/optional/redux/index.ts

@@ -0,0 +1,13 @@
+export { store, persistor, type RootState, type AppDispatch } from './store';
+export { useAppDispatch, useAppSelector } from './hooks';
+export { ReduxProvider } from './provider';
+
+// Re-export slice actions
+export {
+  setLoading,
+  toggleSidebar,
+  setSidebarOpen,
+  addNotification,
+  removeNotification,
+  clearNotifications,
+} from './store/slices/app-slice';

package/templates/optional/redux/provider.tsx

@@ -0,0 +1,33 @@
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { store, persistor } from './store';
+import { Skeleton } from '~/components/ui';
+
+interface ReduxProviderProps {
+  children: React.ReactNode;
+}
+
+function LoadingFallback() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex flex-col items-center gap-4">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <Skeleton className="h-4 w-32" />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Redux Provider with persistence
+ * Wraps the application with Redux store and persist gate
+ */
+export function ReduxProvider({ children }: ReduxProviderProps) {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={<LoadingFallback />} persistor={persistor}>
+        {children}
+      </PersistGate>
+    </Provider>
+  );
+}

package/templates/optional/redux/store/index.ts

@@ -0,0 +1,45 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+
+import appReducer from './slices/app-slice';
+
+const rootReducer = combineReducers({
+  app: appReducer,
+  // Add more reducers here
+});
+
+const persistConfig = {
+  key: 'root',
+  version: 1,
+  storage,
+  whitelist: ['app'], // Only persist these reducers
+  // blacklist: [], // Don't persist these reducers
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+  devTools: import.meta.env.DEV,
+});
+
+export const persistor = persistStore(store);
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/templates/optional/redux/store/slices/app-slice.ts

@@ -0,0 +1,62 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface AppState {
+  isLoading: boolean;
+  sidebarOpen: boolean;
+  notifications: Notification[];
+}
+
+interface Notification {
+  id: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  message: string;
+  timestamp: number;
+}
+
+const initialState: AppState = {
+  isLoading: false,
+  sidebarOpen: true,
+  notifications: [],
+};
+
+const appSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    setLoading: (state, action: PayloadAction<boolean>) => {
+      state.isLoading = action.payload;
+    },
+    toggleSidebar: (state) => {
+      state.sidebarOpen = !state.sidebarOpen;
+    },
+    setSidebarOpen: (state, action: PayloadAction<boolean>) => {
+      state.sidebarOpen = action.payload;
+    },
+    addNotification: (state, action: PayloadAction<Omit<Notification, 'id' | 'timestamp'>>) => {
+      state.notifications.push({
+        ...action.payload,
+        id: crypto.randomUUID(),
+        timestamp: Date.now(),
+      });
+    },
+    removeNotification: (state, action: PayloadAction<string>) => {
+      state.notifications = state.notifications.filter(
+        (n) => n.id !== action.payload
+      );
+    },
+    clearNotifications: (state) => {
+      state.notifications = [];
+    },
+  },
+});
+
+export const {
+  setLoading,
+  toggleSidebar,
+  setSidebarOpen,
+  addNotification,
+  removeNotification,
+  clearNotifications,
+} = appSlice.actions;
+
+export default appSlice.reducer;

package/templates/base/src/App.css

@@ -1,14 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}