create-react-scaffold-cli 1.0.6 → 1.1.0

package/templates/base-ts/src/shared/ui/Sheet.tsx

@@ -0,0 +1,126 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cn } from '../libs';
+import { ComponentProps } from 'react';
+
+function Sheet({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content> {
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+function SheetContent({ className, children, side = 'right', ...props }: SheetContentProps) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          {/* XIcon was used but not imported in original file. Assuming it's missing or global? 
+              Reviewing original file: <XIcon className="size-4" /> 
+              But XIcon is not imported. It might be a mistake in the original file. 
+              I'll replace it with something generic or import it if I find where it is.
+              Wait, the original file had `XIcon` usage on line 55 but no import.
+              This implies the original code was broken or relying on auto-import that wasn't shown?
+              Or maybe it's `lucide-react`?
+              I'll check `package.json` for icon libraries. `react-icons` is there.
+              I will use `FaXmark` or similar from react-icons/fa6 given other files use it.
+          */}
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }: ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/templates/base-ts/src/shared/ui/Text.tsx

@@ -0,0 +1,99 @@
+import { ComponentPropsWithRef, forwardRef, Ref } from 'react';
+import {
+  fontSizeLookup,
+  fontSizeMdLookup,
+  fontSizeLgLookup,
+  fontWeightLookup,
+  fontWeightMdLookup,
+  fontWeightLgLookup,
+  textAlignLookup,
+  textAlignMdLookup,
+  textAlignLgLookup,
+  colorLookup,
+  fontFamilyLookup,
+  fontFamilyMdLookup,
+  fontFamilyLgLookup,
+  fontSizeXlLookup,
+  fontWeightXlLookup,
+  textAlignXlLookup,
+  fontFamilyXlLookup,
+  fontSize2xlLookup,
+  fontWeight2xlLookup,
+  colorMdLookup,
+  colorLgLookup,
+  colorXlLookup,
+} from '../theme';
+import { cn } from '../libs';
+import { getClassName, memo } from '../utils';
+import { Responsive } from '../types/ui';
+
+export type TextSize = keyof typeof fontSizeLookup;
+export type Weight = keyof typeof fontWeightLookup;
+export type Align = keyof typeof textAlignLookup;
+export type Font = keyof typeof fontFamilyLookup;
+export type Color = keyof typeof colorLookup;
+
+export interface TextProps extends Omit<ComponentPropsWithRef<'p'>, 'color'> {
+  size?: TextSize | Responsive<TextSize>;
+  weight?: Weight | Responsive<Weight>;
+  font?: Font | Responsive<Font>;
+  align?: Align | Responsive<Align>;
+  truncate?: boolean | Responsive<boolean>;
+  color?: Color | Responsive<Color>;
+}
+
+const Component = (
+  { size, weight, align, truncate, color, font,  className, ...rest }: TextProps,
+  ref: Ref<HTMLParagraphElement>
+) => {
+  const s = size as any;
+  const w = weight as any;
+  const a = align as any;
+  const f = font as any;
+  const c = color as any;
+  const t = truncate as any;
+
+  return (
+    <p
+      ref={ref}
+      className={cn(
+        typeof size !== 'object' && getClassName(size, fontSizeLookup),
+        getClassName(s?.base, fontSizeLookup),
+        getClassName(s?.md, fontSizeMdLookup),
+        getClassName(s?.lg, fontSizeLgLookup),
+        getClassName(s?.xl, fontSizeXlLookup),
+        getClassName(s?.['2xl'], fontSize2xlLookup),
+        typeof weight !== 'object' && getClassName(weight, fontWeightLookup),
+        getClassName(w?.base, fontWeightLookup),
+        getClassName(w?.md, fontWeightMdLookup),
+        getClassName(w?.lg, fontWeightLgLookup),
+        getClassName(w?.xl, fontWeightXlLookup),
+        getClassName(w?.['2xl'], fontWeight2xlLookup),
+        typeof align !== 'object' && getClassName(align, textAlignLookup),
+        getClassName(a?.base, textAlignLookup),
+        getClassName(a?.md, textAlignMdLookup),
+        getClassName(a?.lg, textAlignLgLookup),
+        getClassName(a?.xl, textAlignXlLookup),
+        typeof font !== 'object' && getClassName(font, fontFamilyLookup),
+        getClassName(f?.base, fontFamilyLookup),
+        getClassName(f?.md, fontFamilyMdLookup),
+        getClassName(f?.lg, fontFamilyLgLookup),
+        getClassName(f?.xl, fontFamilyXlLookup),
+        typeof color !== 'object' && getClassName(color, colorLookup),
+        getClassName(c?.base, colorLookup),
+        getClassName(c?.md, colorMdLookup),
+        getClassName(c?.lg, colorLgLookup),
+        getClassName(c?.xl, colorXlLookup),
+        typeof truncate !== 'object' && truncate && 'truncate',
+        t?.base && 'truncate',
+        t?.md && 'md:truncate',
+        t?.lg && 'lg:truncate',
+        t?.xl && 'xl:truncate',
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const Text = memo(forwardRef(Component));

package/templates/base-ts/src/shared/ui/Toaster.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { Toaster as Toasts } from 'react-hot-toast';
+
+export const Toaster = memo(() => {
+  return (
+    <Toasts
+      position="top-right"
+      toastOptions={{
+        style: {
+          borderRadius: '8px',
+          fontSize: '13px',
+          background: '#fff',
+          color: '#000',
+        },
+        error: {
+          style: {
+            background: '#fe8686',
+            color: '#fff',
+            backdropFilter: 'blur(20px)',
+          },
+        },
+        success: {
+          style: {
+            background: '#c2fcbf',
+            backdropFilter: 'blur(20px)',
+          },
+        },
+      }}
+    />
+  );
+});

package/templates/base-ts/src/shared/ui/index.ts

@@ -0,0 +1,20 @@
+export { Box } from './Box';
+export { Button } from './Button';
+export { Checkbox } from './Checkbox';
+export { Flex } from './Flex';
+export { FlexItem } from './FlexItem';
+export { FormField } from './FormField';
+export { Grid } from './Grid';
+export { GridItem } from './GridItem';
+export { Modal } from './Modal';
+export { Toaster } from './Toaster';
+export { Text } from './Text';
+export { Scrollable } from './Scrollable';
+export {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from './DropdownMenu';
+export { Select } from './Select';
+export { Sheet } from './Sheet';

package/templates/base-ts/src/shared/utils/getClassName.ts

@@ -0,0 +1,8 @@
+export const getClassName = <T extends string | number | symbol>(
+  prop: T | undefined | null, 
+  lookup: Record<T, string>
+): string | undefined => {
+  const isNullish = prop === undefined || prop === null;
+  if (isNullish) return undefined;
+  return lookup[prop];
+};

package/templates/base-ts/src/shared/utils/index.ts

@@ -0,0 +1,4 @@
+export { parseArray, parseJSON, parseNumberForValidator, parseString } from './parser';
+export { tryCatch } from './tryCatch';
+export { getClassName } from './getClassName';
+export { memo } from './memo';

package/templates/base-ts/src/shared/utils/localStorage.ts

@@ -0,0 +1,18 @@
+export const LocalStorageGetItem = (key: string): string | null => {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem(key);
+  }
+  return null;
+};
+
+export const LocalStorageSetItem = (key: string, value: string): void => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(key, value);
+  }
+};
+
+export const LocalStorageRemoveItem = (key: string): void => {
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem(key);
+  }
+};

package/templates/base-ts/src/shared/utils/memo.ts

@@ -0,0 +1,9 @@
+import { ComponentType, memo as reactMemo } from 'react';
+
+/**
+ * @template T
+ * @param {React.ComponentType<T>} Component
+ * @returns {React.MemoExoticComponent<React.ComponentType<T>>}
+ */
+
+export const memo = <T extends object>(Component: ComponentType<T>) => reactMemo(Component);

package/templates/base-ts/src/shared/utils/parser.ts

@@ -0,0 +1,41 @@
+export const parseString = (value: unknown) => {
+  const fallback = '';
+  if (!value) return fallback;
+  const isString = typeof value === 'string';
+  if (!isString) return fallback;
+  return value;
+};
+
+export const parseArray = (value: unknown) => {
+  const fallback: never[] = [];
+  if (!value) return fallback;
+  const isArray = Array.isArray(value);
+  if (!isArray) return value;
+  return value;
+};
+
+export const parseNumberForValidator = (value: unknown) => {
+  const fallback = '';
+  if (!value) return fallback;
+  const isNullish = value === undefined || value === null;
+  if (isNullish) return fallback;
+  const isValid = typeof value === 'number';
+  if (!isValid) return fallback;
+  return value;
+};
+
+export const parseJSON = (value: unknown) => {
+  const fallback = {};
+  if (!value) return fallback;
+  const isNotValid = typeof value === 'string';
+  if (isNotValid) return fallback;
+  const isValid = typeof value === 'object';
+  if (isValid) return value;
+
+  try {
+    const parsed = JSON.parse(value as string);
+    return parsed;
+  } catch {
+    return fallback;
+  }
+};

package/templates/base-ts/src/shared/utils/regix.ts

@@ -0,0 +1,3 @@
+export const normalizeRegex = (string: string) => {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};

package/templates/base-ts/src/shared/utils/tryCatch.ts

@@ -0,0 +1,16 @@
+export const tryCatch = async <T, E = Error>(
+  fn: (...args: any[]) => Promise<T> | T,
+  ...args: any[]
+): Promise<[E | null, T | null]> => {
+  try {
+    const result = fn(...args);
+
+    if (result instanceof Promise) {
+      return result.then((res) => [null, res] as [null, T]).catch((error) => [error as E, null]);
+    }
+
+    return [null, result];
+  } catch (error) {
+    return [error as E, null];
+  }
+};

package/templates/base-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/base-ts/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/base-ts/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/base-ts/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/vite-env.d.ts","./src/app/app.tsx","./src/app/router.tsx","./src/app/main.tsx","./src/app/routes.registry.ts","./src/app/middlewares/authmiddleware.tsx","./src/app/middlewares/index.ts","./src/app/providers/queryprovider.tsx","./src/app/providers/index.ts","./src/features/sample/index.ts","./src/features/sample/sample.routes.ts","./src/features/sample/constants/index.ts","./src/features/sample/constants/sample.assets.ts","./src/features/sample/constants/sample.navigations.ts","./src/features/sample/constants/sample.querykeys.ts","./src/features/sample/pages/samplepage.tsx","./src/features/sample/pages/index.ts","./src/features/welcome/index.ts","./src/features/welcome/welcome.routes.ts","./src/features/welcome/components/codeline.tsx","./src/features/welcome/components/divider.tsx","./src/features/welcome/components/footer.tsx","./src/features/welcome/components/hero.tsx","./src/features/welcome/components/iconlink.tsx","./src/features/welcome/components/quickstartpanel.tsx","./src/features/welcome/components/ringsoft.tsx","./src/features/welcome/components/storysections.tsx","./src/features/welcome/components/whatyouget.tsx","./src/features/welcome/components/index.ts","./src/features/welcome/constants/index.ts","./src/features/welcome/constants/welcome.constants.ts","./src/features/welcome/constants/welcome.navigations.ts","./src/features/welcome/pages/welcomepage.tsx","./src/features/welcome/pages/index.ts","./src/shared/constants/app.constants.ts","./src/shared/constants/assets.constants.ts","./src/shared/constants/index.ts","./src/shared/contexts/index.ts","./src/shared/hooks/index.ts","./src/shared/hooks/usebooleanstate.ts","./src/shared/hooks/usedebounce.ts","./src/shared/hooks/usetogglestate.ts","./src/shared/layouts/index.ts","./src/shared/libs/axios.ts","./src/shared/libs/cn.ts","./src/shared/libs/index.ts","./src/shared/theme/index.ts","./src/shared/theme/theme.ts","./src/shared/types/navigation.ts","./src/shared/types/ui.ts","./src/shared/ui/box.tsx","./src/shared/ui/button.tsx","./src/shared/ui/checkbox.tsx","./src/shared/ui/dropdownmenu.tsx","./src/shared/ui/flex.tsx","./src/shared/ui/flexitem.tsx","./src/shared/ui/formfield.tsx","./src/shared/ui/grid.tsx","./src/shared/ui/griditem.tsx","./src/shared/ui/modal.tsx","./src/shared/ui/scrollable.tsx","./src/shared/ui/select.tsx","./src/shared/ui/sheet.tsx","./src/shared/ui/text.tsx","./src/shared/ui/toaster.tsx","./src/shared/ui/index.ts","./src/shared/utils/getclassname.ts","./src/shared/utils/index.ts","./src/shared/utils/localstorage.ts","./src/shared/utils/memo.ts","./src/shared/utils/motion.ts","./src/shared/utils/parser.ts","./src/shared/utils/regix.ts","./src/shared/utils/trycatch.ts"],"version":"5.9.3"}

package/templates/base-ts/vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}

package/templates/base-ts/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/templates/base-ts/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  preview: {
+    port: 3000,
+  },
+  server: {
+    port: 3000,
+  },
+});