create-react-scaffold-cli 0.1.0

package/templates/base/src/shared/ui/Modal.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { Scrollable } from './Scrollable';
+import { cn } from '../libs';
+
+/**
+ * @typedef {object} ComponentProps
+ * @property {boolean} isOpen
+ * @property {() => void} onClose
+ * @property {string} [className]
+ * @param {React.PropsWithChildren & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({ isOpen, onClose, className, children }) => {
+  const onOpenChange = React.useCallback(
+    (isOpen) => {
+      if (isOpen) return;
+      onClose();
+    },
+    [onClose]
+  );
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/20  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <Dialog.Content
+          aria-describedby={undefined}
+          className={cn(
+            'fixed left-[50%] top-[50%] z-50 p-5 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl bg-white font-inter overflow-hidden',
+            className
+          )}
+        >
+          <Dialog.Title className="sr-only"></Dialog.Title>
+          <Scrollable indicatorClassName="!w-1">{children}</Scrollable>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export const Modal = memo(Component);

package/templates/base/src/shared/ui/Scrollable.jsx

@@ -0,0 +1,47 @@
+import * as ScrollArea from '@radix-ui/react-scroll-area';
+import { memo } from 'react';
+import { cn } from '../libs';
+
+/**
+ * @typedef {object} ComponentProps
+ * @property {'horizontal' | 'vertical'} [orientation]
+ * @property {string} [className]
+ * @property {string} [indicatorClassName]
+ * @param {React.PropsWithChildren<ComponentProps>} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({
+  orientation = 'vertical',
+  className,
+  children,
+  style,
+  onClick,
+  indicatorClassName,
+  viewPortClassName,
+}) => {
+  return (
+    <ScrollArea.Root
+      className={cn('size-full overflow-hidden', className)}
+      style={style}
+      onClick={onClick}
+    >
+      <ScrollArea.Viewport className={cn('size-full overflow-hidden', viewPortClassName)}>
+        {children}
+      </ScrollArea.Viewport>
+
+      <ScrollArea.Scrollbar
+        orientation={orientation}
+        className={cn(
+          orientation === 'vertical' ? 'w-1 lg:w-1.5 2xl:w-2' : 'h-1 lg:h-1.5 flex flex-col',
+          indicatorClassName
+        )}
+      >
+        <ScrollArea.Thumb className="relative flex-1 rounded bg-gray-400/50 hover:bg-gray-800/50 transition-colors" />
+      </ScrollArea.Scrollbar>
+      <ScrollArea.Corner />
+    </ScrollArea.Root>
+  );
+};
+
+export const Scrollable = memo(Component);

package/templates/base/src/shared/ui/Select.jsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { FaChevronDown, FaChevronUp, FaCheck } from 'react-icons/fa6';
+import { memo } from '../utils';
+import { cn } from '../libs';
+
+const SelectRoot = SelectPrimitive.Root;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex w-full items-center justify-between whitespace-nowrap rounded-10rd border bg-transparent px-3 py-2.5 font-inter text-sm placeholder:!text-custom-grey-900 placeholder:!opacity-30 disabled:cursor-not-allowed disabled:bg-neutral-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <FaChevronDown size={12} className="text-neutral-300" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <FaChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <FaChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef(
+  ({ className, children, position = 'popper', ...props }, ref) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          'relative z-[100] max-h-80 min-w-[8rem] font-inter overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-[var(--radix-select-trigger-width)]',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton className="text-secondary" />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] font-inter'
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton className="text-secondary" />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-13fs font-semibold font-inter', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-pointer select-none items-center hover:bg-neutral-100 rounded-sm py-1.5 pl-2 pr-8 text-sm focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 outline-none',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <FaCheck className="h-4 w-4 text-secondary" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+/**
+ *
+ *
+ * @template T
+ * @typedef {object} ComponentProps
+ * @property {string} [placeholder]
+ * @property {T[]} values
+ * @property {T | undefined} value
+ * @property {(value: T) => string | number} getValueId
+ * @property {(value: T) => React.ReactNode} getValueLabel
+ * @property {(value: T) => void} onChange
+ * @property {boolean} [fullWidth]
+ * @property {'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'} [size]
+ * @property {'sm' | 'rounded' | 'md' | 'lg' | 'xl' | 'full'} [radius]
+ * @property {boolean} [disabled]
+ * @property {string} [className]
+ */
+
+/**
+ *
+ *
+ * @template T
+ * @param {ComponentProps<T>} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({
+  placeholder = 'Seleccionar...',
+  value,
+  values,
+  getValueId = ({ id }) => id,
+  getValueLabel = ({ name }) => name,
+  onChange,
+  fullWidth,
+  customOption,
+  disabled,
+  contentClass,
+}) => {
+  let id;
+  if (value) {
+    id = getValueId(value);
+  }
+
+  const valuesLookup = React.useMemo(
+    () =>
+      values.reduce((values, value) => {
+        const id = getValueId(value);
+        values[id] = value;
+        return values;
+      }, {}),
+    [getValueId, values]
+  );
+
+  const onValueChange = React.useCallback(
+    (id) => {
+      const value = valuesLookup[id];
+      onChange(value);
+    },
+    [onChange, valuesLookup]
+  );
+
+  return (
+    <SelectRoot value={id} onValueChange={onValueChange} disabled={disabled}>
+      <SelectTrigger
+        className={cn(
+          'outline-none bg-white',
+          fullWidth ? 'w-full' : 'w-64',
+          'data-placeholder:text-black/25'
+        )}
+      >
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className={contentClass}>
+        {values.map((value, key) => {
+          const id = getValueId(value);
+          const label = getValueLabel(value);
+
+          return (
+            <SelectItem key={key} value={id}>
+              {label}
+            </SelectItem>
+          );
+        })}
+        {customOption}
+      </SelectContent>
+    </SelectRoot>
+  );
+};
+
+export const Select = memo(Component);

package/templates/base/src/shared/ui/Sheet.jsx

@@ -0,0 +1,112 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cn } from '../libs';
+
+function Sheet({ ...props }) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }) {
+  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}
+    />
+  );
+}
+
+function SheetContent({ className, children, side = 'right', ...props }) {
+  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 className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }) {
+  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/src/shared/ui/Text.jsx

@@ -0,0 +1,122 @@
+import React 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 } from '../utils';
+
+/**
+ * @typedef {'base' | 'md' | 'lg' | 'xl' | '2xl'} Breakpoint
+ *
+ * @typedef {'xs'
+ *   | 'sm'
+ *   | 'base'
+ *   | 'lg'
+ *   | 'xl'
+ *   | '2xl'
+ *   | '3xl'
+ *   | '4xl'
+ *   | '5xl'
+ *   | '6xl'
+ *   | '7xl'
+ *   | '8xl'
+ *   | '9xl'} Size
+ *
+ *
+ * @typedef {'left' | 'center' | 'right' | 'justify' | 'start' | 'end'} Align
+ *
+ * @typedef {'thin'
+ *   | 'extralight'
+ *   | 'light'
+ *   | 'normal'
+ *   | 'medium'
+ *   | 'semibold'
+ *   | 'bold'
+ *   | 'extrabold'
+ *   | 'black'} Weight
+ *
+ *
+ * @typedef {''} Font
+ *
+ * @typedef {'primary' | 'secondary' | 'success' | 'danger' | 'white' | 'black'} Color
+ *
+ * @typedef {object} ComponentProps
+ * @property {Size | Record<Breakpoint, Size>} [size]
+ * @property {Weight | Record<Breakpoint, Weight>} [weight]
+ * @property {Font | Record<Breakpoint, Font>} [font]
+ * @property {Align | Record<Breakpoint, Align>} [align]
+ * @property {boolean | Record<Breakpoint, boolean>} [truncate]
+ * @property {Color | Record<Breakpoint, Color>} [color]
+ * @param {React.ComponentProps<'p'> & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = (
+  { size, weight, align, truncate, color, font, animation, className, ...rest },
+  ref
+) => {
+  return (
+    <p
+      ref={ref}
+      className={cn(
+        typeof size !== 'object' && getClassName(size, fontSizeLookup),
+        getClassName(size?.base, fontSizeLookup),
+        getClassName(size?.md, fontSizeMdLookup),
+        getClassName(size?.lg, fontSizeLgLookup),
+        getClassName(size?.xl, fontSizeXlLookup),
+        getClassName(size?.['2xl'], fontSize2xlLookup),
+        typeof weight !== 'object' && getClassName(weight, fontWeightLookup),
+        getClassName(weight?.base, fontWeightLookup),
+        getClassName(weight?.md, fontWeightMdLookup),
+        getClassName(weight?.lg, fontWeightLgLookup),
+        getClassName(weight?.xl, fontWeightXlLookup),
+        getClassName(weight?.['2xl'], fontWeight2xlLookup),
+        typeof align !== 'object' && getClassName(align, textAlignLookup),
+        getClassName(align?.base, textAlignLookup),
+        getClassName(align?.md, textAlignMdLookup),
+        getClassName(align?.lg, textAlignLgLookup),
+        getClassName(align?.xl, textAlignXlLookup),
+        typeof font !== 'object' && getClassName(font, fontFamilyLookup),
+        getClassName(font?.base, fontFamilyLookup),
+        getClassName(font?.md, fontFamilyMdLookup),
+        getClassName(font?.lg, fontFamilyLgLookup),
+        getClassName(font?.xl, fontFamilyXlLookup),
+        typeof font !== 'object' && getClassName(color, colorLookup),
+        getClassName(color?.base, colorLookup),
+        getClassName(color?.md, colorMdLookup),
+        getClassName(color?.lg, colorLgLookup),
+        getClassName(color?.xl, colorXlLookup),
+        typeof truncate !== 'object' && truncate && 'truncate',
+        truncate?.base && 'truncate',
+        truncate?.md && 'md:truncate',
+        truncate?.lg && 'lg:truncate',
+        truncate?.xl && 'xl:truncate',
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const Text = memo(React.forwardRef(Component));

package/templates/base/src/shared/ui/Toaster.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Toaster as Toasts } from 'react-hot-toast';
+
+export const Toaster = React.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/src/shared/ui/index.js

@@ -0,0 +1 @@
+export { Toaster } from './Toaster';

package/templates/base/src/shared/utils/getClassName.js

@@ -0,0 +1,5 @@
+export const getClassName = (prop, lookup) => {
+  const isNullish = prop === undefined || prop === null;
+  if (isNullish) return;
+  return lookup[prop];
+};

package/templates/base/src/shared/utils/index.js

@@ -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/src/shared/utils/memo.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const memo = (Component) => React.memo(Component);

package/templates/base/src/shared/utils/parser.js

@@ -0,0 +1,41 @@
+export const parseString = (value) => {
+  const fallback = '';
+  if (!value) return fallback;
+  const isString = typeof value === 'string';
+  if (!isString) return fallback;
+  return value;
+};
+
+export const parseArray = (value) => {
+  const fallback = [];
+  if (!value) return fallback;
+  const isArray = Array.isArray(value);
+  if (!isArray) return value;
+  return value;
+};
+
+export const parseNumberForValidator = (value) => {
+  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 fallback;
+};
+
+export const parseJSON = (value) => {
+  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);
+    return parsed;
+  } catch {
+    return fallback;
+  }
+};

package/templates/base/src/shared/utils/tryCatch.js

@@ -0,0 +1,13 @@
+export const tryCatch = (fn, ...args) => {
+  try {
+    const result = fn(...args);
+
+    if (result instanceof Promise) {
+      return result.then((result) => [null, result]).catch((error) => [error, null]);
+    }
+
+    return [null, result];
+  } catch (error) {
+    return [error, null];
+  }
+};

package/templates/base/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(import.meta.dirname, "./src"),
+    },
+  },
+  preview: {
+    port: 3000,
+  },
+  server: {
+    port: 3000,
+  },
+});