create-react-scaffold-cli 1.0.6 → 1.1.0

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

@@ -0,0 +1,139 @@
+import { ReactNode, useId } from 'react';
+import {
+  fontSizeLookup,
+  fontSizeMdLookup,
+  fontSizeLgLookup,
+  fontWeightLookup,
+  fontWeightMdLookup,
+  fontWeightLgLookup,
+  gapLookup,
+  gapMdLookup,
+  gapLgLookup,
+  gapXlLookup,
+  fontSizeXlLookup,
+  fontWeightXlLookup,
+  fontSize2xlLookup,
+  fontWeight2xlLookup,
+  colorLookup,
+} from '../theme';
+import { Text } from './Text';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+import { Responsive } from '../types/ui';
+
+export type Gap = keyof typeof gapLookup;
+export type Size = keyof typeof fontSizeLookup;
+export type Weight = keyof typeof fontWeightLookup;
+export type Color = keyof typeof colorLookup;
+
+export interface FormFieldProps {
+  label?: string;
+  labelFontSize?: Size | Responsive<Size>;
+  labelFontWeight?: Weight | Responsive<Weight>;
+  labelColor?: Color;
+  labelClass?: string;
+  gap?: Gap | Responsive<Gap>;
+  error?: string;
+  errorFontSize?: Size | Responsive<Size>;
+  errorFontWeight?: Weight | Responsive<Weight>;
+  errorColor?: Color | Responsive<Color>;
+  className?: string; // Type mismatch in original JSDoc vs Usage?
+  // Original JSDoc said className overrides? No, just passed.
+  // Actually JSDoc said className property but destructured className...
+  hide?: boolean | Responsive<boolean>;
+  hideLabel?: boolean | Responsive<boolean>;
+  children: ReactNode | ((id: string) => ReactNode);
+}
+
+const Component = ({
+  label,
+  labelFontSize,
+  labelFontWeight,
+  labelColor,
+  labelClass,
+  gap = 2,
+  hide,
+  hideLabel,
+  error,
+  errorFontSize = 'xs',
+  errorFontWeight = 'medium',
+  errorColor = 'danger',
+  className,
+  children,
+}: FormFieldProps) => {
+  const id = useId();
+  const markup = typeof children === 'function' ? children(id) : children;
+
+  const g = gap as any;
+  const h = hide as any;
+  const hl = hideLabel as any;
+  const lfs = labelFontSize as any;
+  const lfw = labelFontWeight as any;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col w-full',
+        typeof gap !== 'object' && getClassName(gap, gapLookup),
+        getClassName(g?.base, gapLookup),
+        getClassName(g?.md, gapMdLookup),
+        getClassName(g?.lg, gapLgLookup),
+        getClassName(g?.xl, gapXlLookup),
+        typeof hide !== 'object' && hide === true ? 'hidden' : hide === false && 'block',
+        h?.base === true ? 'hidden' : h?.base === false && 'block',
+        h?.md === true ? 'md:hidden' : h?.md === false && 'md:block',
+        h?.lg === true ? 'lg:hidden' : h?.lg === false && 'lg:block',
+        typeof className === 'string' && className
+      )}
+    >
+      {label && (
+        <div>
+          <label
+            htmlFor={id}
+            className={cn(
+              'font-inter',
+              typeof hideLabel !== 'object' && hideLabel === true
+                ? 'hidden'
+                : hideLabel === false && 'block',
+              hl?.base === true ? 'hidden' : hl?.base === false && 'block',
+              hl?.md === true ? 'md:hidden' : hl?.md === false && 'md:block',
+              hl?.lg === true ? 'lg:hidden' : hl?.lg === false && 'lg:block',
+              typeof labelFontSize !== 'object' && getClassName(labelFontSize, fontSizeLookup),
+              getClassName(lfs?.base, fontSizeLookup),
+              getClassName(lfs?.md, fontSizeMdLookup),
+              getClassName(lfs?.lg, fontSizeLgLookup),
+              getClassName(lfs?.xl, fontSizeXlLookup),
+              getClassName(lfs?.['2xl'], fontSize2xlLookup),
+              typeof labelFontWeight !== 'object' &&
+                getClassName(labelFontWeight, fontWeightLookup),
+              getClassName(lfw?.base, fontWeightLookup),
+              getClassName(lfw?.md, fontWeightMdLookup),
+              getClassName(lfw?.lg, fontWeightLgLookup),
+              getClassName(lfw?.xl, fontWeightXlLookup),
+              getClassName(lfw?.['2xl'], fontWeight2xlLookup),
+              getClassName(labelColor, colorLookup),
+              labelClass
+            )}
+          >
+            {label}
+          </label>
+        </div>
+      )}
+      <div className="-mt-1!">{markup}</div>
+      {error && (
+        <div>
+          <Text
+            size={errorFontSize}
+            weight={errorFontWeight}
+            color={errorColor}
+            className="font-inter"
+          >
+            {error}
+          </Text>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const FormField = memo(Component);

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

@@ -0,0 +1,96 @@
+import { getClassName, memo } from '../utils';
+import { ComponentPropsWithRef, forwardRef, Ref } from 'react';
+import {
+  gapLookup,
+  gapMdLookup,
+  gapLgLookup,
+  columnsLookup,
+  columnsMdLookup,
+  columnsLgLookup,
+  justifyLookup,
+  justifyMdLookup,
+  justifyLgLookup,
+  alignLookup,
+  alignMdLookup,
+  alignLgLookup,
+  widthLookup,
+  widthLgLookup,
+  widthMdLookup,
+  columnsSmLookup,
+  gapXlLookup,
+  columnsXlLookup,
+  justifyXlLookup,
+  alignXlLookup,
+  widthXlLookup,
+  columns2XlLookup,
+} from '../theme';
+import { cn } from '../libs';
+import { Responsive } from '../types/ui';
+
+export type Gap = keyof typeof gapLookup;
+export type Columns = keyof typeof columnsLookup;
+export type Justify = keyof typeof justifyLookup;
+export type Align = keyof typeof alignLookup;
+export type Width = keyof typeof widthLookup;
+
+export interface GridProps extends ComponentPropsWithRef<'div'> {
+  grow?: boolean | Responsive<boolean>;
+  gap?: Gap | Responsive<Gap>;
+  columns?: Columns | Responsive<Columns>;
+  justify?: Justify | Responsive<Justify>;
+  align?: Align | Responsive<Align>;
+  width?: Width | Responsive<Width>;
+}
+
+const Component = ({ grow, gap, columns, justify, align, className, width, ...rest }: GridProps, ref: Ref<HTMLDivElement>) => {
+  const g = grow as any;
+  const gp = gap as any;
+  const c = columns as any;
+  const j = justify as any;
+  const a = align as any;
+  const w = width as any;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'grid',
+        typeof grow !== 'object' && grow === true ? 'h-full' : grow === false && 'h-auto',
+        g?.base === true ? 'h-full' : g?.base === false && 'h-auto',
+        g?.md === true ? 'md:h-full' : g?.md === false && 'md:h-auto',
+        g?.lg === true ? 'lg:h-full' : g?.lg === false && 'lg:h-auto',
+        typeof gap !== 'object' && getClassName(gap, gapLookup),
+        getClassName(gp?.base, gapLookup),
+        getClassName(gp?.md, gapMdLookup),
+        getClassName(gp?.lg, gapLgLookup),
+        getClassName(gp?.xl, gapXlLookup),
+        typeof columns !== 'object' && getClassName(columns, columnsLookup),
+        getClassName(c?.base, columnsLookup),
+        getClassName(c?.md, columnsMdLookup),
+        getClassName(c?.sm, columnsSmLookup),
+        getClassName(c?.lg, columnsLgLookup),
+        getClassName(c?.xl, columnsXlLookup),
+        getClassName(c?.['2xl'], columns2XlLookup),
+        typeof justify !== 'object' && getClassName(justify, justifyLookup),
+        getClassName(j?.base, justifyLookup),
+        getClassName(j?.md, justifyMdLookup),
+        getClassName(j?.lg, justifyLgLookup),
+        getClassName(j?.xl, justifyXlLookup),
+        typeof align !== 'object' && getClassName(align, alignLookup),
+        getClassName(a?.base, alignLookup),
+        getClassName(a?.md, alignMdLookup),
+        getClassName(a?.lg, alignLgLookup),
+        getClassName(a?.xl, alignXlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(w?.base, widthLookup),
+        getClassName(w?.md, widthMdLookup),
+        getClassName(w?.lg, widthLgLookup),
+        getClassName(w?.xl, widthXlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const Grid = memo(forwardRef(Component));

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

@@ -0,0 +1,67 @@
+import {
+  spanLookup,
+  spanMdLookup,
+  spanLgLookup,
+  alignSelfLookup,
+  alignSelfMdLookup,
+  alignSelfLgLookup,
+  widthLookup,
+  widthMdLookup,
+  widthLgLookup,
+  spanXlLookup,
+  alignSelfXlLookup,
+  widthXlLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+import { ComponentPropsWithRef, forwardRef, Ref } from 'react';
+import { Responsive } from '../types/ui';
+
+export type Span = keyof typeof spanLookup;
+export type AlignSelf = keyof typeof alignSelfLookup;
+export type Width = keyof typeof widthLookup;
+
+export interface GridItemProps extends ComponentPropsWithRef<'div'> {
+  hide?: boolean | Responsive<boolean>;
+  span?: Span | Responsive<Span>;
+  alignSelf?: AlignSelf | Responsive<AlignSelf>;
+  width?: Width | Responsive<Width>;
+}
+
+const Component = ({ hide, span, alignSelf, width, className, ...rest }: GridItemProps, ref: Ref<HTMLDivElement>) => {
+  const h = hide as any;
+  const s = span as any;
+  const as = alignSelf as any;
+  const w = width as any;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        typeof hide !== 'object' && hide === true ? 'hidden' : hide === false && 'block',
+        h?.base === true ? 'hidden' : h?.base === false && 'block',
+        h?.md === true ? 'md:hidden' : h?.md === false && 'md:block',
+        h?.lg === true ? 'lg:hidden' : h?.lg === false && 'lg:block',
+        typeof span !== 'object' && getClassName(span, spanLookup),
+        getClassName(s?.base, spanLookup),
+        getClassName(s?.md, spanMdLookup),
+        getClassName(s?.lg, spanLgLookup),
+        getClassName(s?.xl, spanXlLookup),
+        typeof alignSelf !== 'object' && getClassName(alignSelf, alignSelfLookup),
+        getClassName(as?.base, alignSelfLookup),
+        getClassName(as?.md, alignSelfMdLookup),
+        getClassName(as?.lg, alignSelfLgLookup),
+        getClassName(as?.xl, alignSelfXlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(w?.base, widthLookup),
+        getClassName(w?.md, widthMdLookup),
+        getClassName(w?.lg, widthLgLookup),
+        getClassName(w?.xl, widthXlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const GridItem = memo(forwardRef(Component));

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

@@ -0,0 +1,42 @@
+import { ReactNode, useCallback } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { Scrollable } from './Scrollable';
+import { cn } from '../libs';
+import { memo } from '../utils';
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+  children?: ReactNode;
+}
+
+const Component = ({ isOpen, onClose, className, children }: ModalProps) => {
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) 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-ts/src/shared/ui/Scrollable.tsx

@@ -0,0 +1,48 @@
+import * as ScrollArea from '@radix-ui/react-scroll-area';
+import { cn } from '../libs';
+import { CSSProperties, memo, MouseEventHandler, ReactNode } from 'react';
+
+export interface ScrollableProps {
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  children?: ReactNode;
+  style?: CSSProperties;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  indicatorClassName?: string;
+  viewPortClassName?: string;
+}
+
+const Component = ({
+  orientation = 'vertical',
+  className,
+  children,
+  style,
+  onClick,
+  indicatorClassName,
+  viewPortClassName,
+}: ScrollableProps) => {
+  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-ts/src/shared/ui/Select.tsx

@@ -0,0 +1,212 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef, ReactElement, ReactNode, useCallback, useMemo } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { FaChevronDown, FaChevronUp, FaCheck } from 'react-icons/fa6';
+import { cn } from '../libs';
+
+const SelectRoot = SelectPrimitive.Root;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ 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 = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ 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 = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  />
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ 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 = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ 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 = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ 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 = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export interface SelectProps<T> {
+  placeholder?: string;
+  values: T[];
+  value: T | undefined;
+  getValueId?: (value: T) => string;
+  getValueLabel?: (value: T) => ReactNode;
+  onChange: (value: T) => void;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  contentClass?: string;
+  customOption?: ReactNode;
+}
+
+const Component = <T,>({
+  placeholder = 'Seleccionar...',
+  value,
+  values,
+  getValueId = (val: any) => val.id,
+  getValueLabel = (val: any) => val.name,
+  onChange,
+  fullWidth,
+  customOption,
+  disabled,
+  contentClass,
+}: SelectProps<T>) => {
+  let id: string | undefined;
+  if (value) {
+    id = getValueId(value);
+  }
+
+  const valuesLookup = useMemo(
+    () =>
+      values.reduce((acc, val) => {
+        const id = getValueId(val);
+        acc[id] = val;
+        return acc;
+      }, {} as Record<string, T>),
+    [getValueId, values]
+  );
+
+  const onValueChange = useCallback(
+    (id: string) => {
+      const selectedValue = valuesLookup[id];
+      onChange(selectedValue);
+    },
+    [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((val, key) => {
+          const itemId = getValueId(val);
+          const label = getValueLabel(val);
+
+          return (
+            <SelectItem key={key} value={itemId}>
+              {label}
+            </SelectItem>
+          );
+        })}
+        {customOption}
+      </SelectContent>
+    </SelectRoot>
+  );
+};
+
+import { memo } from '../utils';
+
+export const Select = memo(Component) as <T>(props: SelectProps<T>) => ReactElement;