create-react-scaffold-cli 0.1.0

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

@@ -0,0 +1,200 @@
+import React from 'react';
+import {
+  marginLookup,
+  marginMdLookup,
+  marginLgLookup,
+  marginXLookup,
+  marginXMdLookup,
+  marginYLookup,
+  marginYMdLookup,
+  marginYLgLookup,
+  paddingLgLookup,
+  paddingLookup,
+  paddingMdLookup,
+  paddingXLgLookup,
+  paddingXLookup,
+  paddingXMdLookup,
+  paddingYLgLookup,
+  paddingYLookup,
+  paddingYMdLookup,
+  widthLookup,
+  widthMdLookup,
+  widthLgLookup,
+  marginXlLookup,
+  marginXXlLookup,
+  marginYXlLookup,
+  paddingXlLookup,
+  paddingXXlLookup,
+  paddingYXlLookup,
+  marginXlgLookup,
+  AnimationLookup,
+  AnimationMdLookup,
+  AnimationLgLookup,
+  AnimationXlLookup,
+  radiusLookup,
+  radiusMdLookup,
+  radiusLgLookup,
+  radiusXlLookup,
+  paddingY2XlLookup,
+  paddingX2XlLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+
+/**
+ * @typedef {'base' | 'md' | 'lg' | 'xl' | '2xl'} Breakpoint
+ *
+ * @typedef {0
+ *   | 0.5
+ *   | 1
+ *   | 1.5
+ *   | 2
+ *   | 2.5
+ *   | 3
+ *   | 3.5
+ *   | 4
+ *   | 5
+ *   | 6
+ *   | 7
+ *   | 8
+ *   | 9
+ *   | 10
+ *   | 11
+ *   | 12
+ *   | 14
+ *   | 16
+ *   | 20
+ *   | 24
+ *   | 28
+ *   | 32
+ *   | 36
+ *   | 40} Size
+ *
+ *
+ * @typedef {0
+ *   | 0.5
+ *   | 1
+ *   | 1.5
+ *   | 2
+ *   | 2.5
+ *   | 3
+ *   | 3.5
+ *   | 4
+ *   | 5
+ *   | 6
+ *   | 7
+ *   | 8
+ *   | 9
+ *   | 10
+ *   | 11
+ *   | 12
+ *   | 14
+ *   | 16
+ *   | 20
+ *   | 24
+ *   | 28
+ *   | 32
+ *   | 36
+ *   | 40
+ *   | fit
+ *   | full
+ *   | auto} Width
+ *
+ *
+ * @typedef {'sm' | 'rounded' | 'md' | 'lg' | 'xl' | 'full'} Radius
+ *
+ * @typedef {Size} Margin
+ *
+ * @typedef {Size} Padding
+ *
+ * @typedef {'x' | 'y'} Axis
+ *
+ * @typedef {object} ComponentProps
+ * @property {boolean | Record<Breakpoint, boolean>} [hide]
+ * @property {boolean | Record<Breakpoint, boolean>} [grow]
+ * @property {Margin
+ *   | Record<Breakpoint, Margin>
+ *   | Record<Axis, Margin>
+ *   | Record<Axis, Record<Breakpoint, Margin>>} [margin]
+ * @property {Padding
+ *   | Record<Breakpoint, Padding>
+ *   | Record<Axis, Padding>
+ *   | Record<Axis, Record<Breakpoint, Padding>>} [padding]
+ * @property {Width | Record<Breakpoint, Width>} [width]
+ * @property {Radius} [radius]
+ * @property {Animation} [animation]
+ * @param {React.ComponentProps<'div'> & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = (
+  { hide, grow, margin, radius, padding, width, animation, className, ...rest },
+  ref
+) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        typeof hide !== 'object' && hide === true ? 'hidden' : hide === false && 'block',
+        hide?.base === true ? 'hidden' : hide?.base === false && 'block',
+        hide?.md === true ? 'md:hidden' : hide?.md === false && 'md:block',
+        hide?.lg === true ? 'lg:hidden' : hide?.lg === false && 'lg:block',
+        typeof grow !== 'object' && grow === true ? 'h-full' : grow === false && 'h-auto',
+        grow?.base === true ? 'h-full' : grow?.base === false && 'h-auto',
+        grow?.md === true ? 'md:h-full' : grow?.md === false && 'md:h-auto',
+        grow?.lg === true ? 'lg:h-full' : grow?.lg === false && 'lg:h-auto',
+        typeof margin !== 'object' && getClassName(margin, marginLookup),
+        getClassName(margin?.base, marginLookup),
+        getClassName(margin?.md, marginMdLookup),
+        getClassName(margin?.lg, marginLgLookup),
+        getClassName(margin?.xl, marginXlLookup),
+        typeof margin?.x !== 'object' && getClassName(margin?.x, marginXLookup),
+        getClassName(margin?.x?.base, marginXLookup),
+        getClassName(margin?.x?.md, marginXMdLookup),
+        getClassName(margin?.x?.lg, marginXlgLookup),
+        getClassName(margin?.x?.xl, marginXXlLookup),
+        typeof margin?.y !== 'object' && getClassName(margin?.y, marginYLookup),
+        getClassName(margin?.y?.base, marginYLookup),
+        getClassName(margin?.y?.md, marginYMdLookup),
+        getClassName(margin?.y?.lg, marginYLgLookup),
+        getClassName(margin?.y?.xl, marginYXlLookup),
+        typeof padding !== 'object' && getClassName(padding, paddingLookup),
+        getClassName(padding?.base, paddingLookup),
+        getClassName(padding?.md, paddingMdLookup),
+        getClassName(padding?.lg, paddingLgLookup),
+        getClassName(padding?.xl, paddingXlLookup),
+        getClassName(padding?.['2xl'], paddingXlLookup),
+        typeof padding?.x !== 'object' && getClassName(padding?.x, paddingXLookup),
+        getClassName(padding?.x?.base, paddingXLookup),
+        getClassName(padding?.x?.md, paddingXMdLookup),
+        getClassName(padding?.x?.lg, paddingXLgLookup),
+        getClassName(padding?.x?.xl, paddingXXlLookup),
+        getClassName(padding?.x?.['2xl'], paddingX2XlLookup),
+        typeof padding?.y !== 'object' && getClassName(padding?.y, paddingYLookup),
+        getClassName(padding?.y?.base, paddingYLookup),
+        getClassName(padding?.y?.md, paddingYMdLookup),
+        getClassName(padding?.y?.lg, paddingYLgLookup),
+        getClassName(padding?.y?.xl, paddingYXlLookup),
+        getClassName(padding?.y?.['2xl'], paddingY2XlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(width?.base, widthLookup),
+        getClassName(width?.md, widthMdLookup),
+        getClassName(width?.lg, widthLgLookup),
+        typeof font !== 'object' && getClassName(animation, AnimationLookup),
+        getClassName(animation?.base, AnimationLookup),
+        getClassName(animation?.md, AnimationMdLookup),
+        getClassName(animation?.lg, AnimationLgLookup),
+        getClassName(animation?.xl, AnimationXlLookup),
+        typeof radius !== 'object' && getClassName(radius, radiusLookup),
+        getClassName(radius?.base, radiusLookup),
+        getClassName(radius?.md, radiusMdLookup),
+        getClassName(radius?.lg, radiusLgLookup),
+        getClassName(radius?.xl, radiusXlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const Box = memo(React.forwardRef(Component));

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { PiSpinnerBold } from 'react-icons/pi';
+import {
+  AnimationLookup,
+  colorLookup,
+  fieldSize2XlLookup,
+  fieldSizeLgLookup,
+  fieldSizeLookup,
+  fieldSizeMdLookup,
+  fieldSizeXlLookup,
+  fontFamilyLookup,
+  fontSize2xlLookup,
+  fontSizeLgLookup,
+  fontSizeLookup,
+  fontSizeMdLookup,
+  fontSizeXlLookup,
+  fontWeight2xlLookup,
+  fontWeightLgLookup,
+  fontWeightLookup,
+  fontWeightMdLookup,
+  fontWeightXlLookup,
+  radiusLgLookup,
+  radiusLookup,
+  radiusMdLookup,
+  radiusXlLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+
+const variantLookup = {
+  primary:
+    'text-primary-foreground bg-primary hover:bg-primary/90 disabled:text-primary-foreground/70 disabled:bg-primary/50',
+  outline:
+    'border text-primary bg-primary-foreground hover:bg-neutral-50 disabled:text-primary/70 disabled:bg-neutral-50/50',
+  pill: 'text-primary-foreground bg-primary hover:bg-primary/90 disabled:text-primary-foreground/70 disabled:bg-primary/50 rounded-lg',
+};
+
+/**
+ * @typedef {'base' | 'md' | 'lg' | 'xl' | '2xl'} Breakpoint
+ *
+ * @typedef {'primary' | 'outline' | 'pill'} Variant
+ *
+ * @typedef {'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'} Size
+ *
+ * @typedef {''} Font
+ *
+ * @typedef {'primary' | 'secondary' | 'success' | 'danger' | 'white' | 'black'} Color
+ *
+ * @typedef {'sm' | 'rounded' | 'md' | 'lg' | 'xl' | 'full'} Radius
+ *
+ * @typedef {'thin'
+ *   | 'extralight'
+ *   | 'light'
+ *   | 'normal'
+ *   | 'medium'
+ *   | 'semibold'
+ *   | 'bold'
+ *   | 'extrabold'
+ *   | 'black'} Weight
+ *
+ *
+ * @typedef {'xs'
+ *   | 'sm'
+ *   | 'base'
+ *   | 'lg'
+ *   | 'xl'
+ *   | '2xl'
+ *   | '3xl'
+ *   | '4xl'
+ *   | '5xl'
+ *   | '6xl'
+ *   | '7xl'
+ *   | '8xl'
+ *   | '9xl'} fontSize
+ *
+ *
+ * @typedef {object} ComponentProps
+ * @property {Variant} [variant]
+ * @property {Radius} [radius]
+ * @property {Size} [size]
+ * @property {Font} [font]
+ * @property {fontSize} [fontSize]
+ * @property {Weight} [weight]
+ * @property {boolean} [isLoading]
+ * @property {Color} [color]
+ * @param {React.ComponentProps<'button'> & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = (
+  {
+    variant = 'primary',
+    radius = 'lg',
+    size = 'lg',
+    font = 'inter',
+    fontSize = 'base',
+    weight = 'semibold',
+    color,
+    isLoading,
+    className,
+    animation,
+    type = 'button',
+    children,
+    ...rest
+  },
+  ref
+) => {
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        'h-12 px-4 w-full rounded-lg text-base font-inter font-semibold disabled:cursor-not-allowed transition-colors flex justify-center items-center',
+        typeof fontSize !== 'object' && getClassName(fontSize, fontSizeLookup),
+        getClassName(fontSize?.base, fontSizeLookup),
+        getClassName(fontSize?.md, fontSizeMdLookup),
+        getClassName(fontSize?.lg, fontSizeLgLookup),
+        getClassName(fontSize?.xl, fontSizeXlLookup),
+        getClassName(fontSize?.['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 size !== 'object' && getClassName(size, fieldSizeLookup),
+        getClassName(size?.base, fieldSizeLookup),
+        getClassName(size?.md, fieldSizeMdLookup),
+        getClassName(size?.lg, fieldSizeLgLookup),
+        getClassName(size?.xl, fieldSizeXlLookup),
+        getClassName(size?.['2xl'], fieldSize2XlLookup),
+        typeof radius !== 'object' && getClassName(radius, radiusLookup),
+        getClassName(radius?.base, radiusLookup),
+        getClassName(radius?.md, radiusMdLookup),
+        getClassName(radius?.lg, radiusLgLookup),
+        getClassName(radius?.xl, radiusXlLookup),
+        variantLookup[variant],
+        fontFamilyLookup[font],
+        colorLookup[color],
+        AnimationLookup[animation],
+        className
+      )}
+      type={type}
+      {...(isLoading && { disabled: true })}
+      {...rest}
+    >
+      {isLoading ? <PiSpinnerBold className="animate-spin size-5 m-auto" /> : children}
+    </button>
+  );
+};
+
+export const Button = memo(React.forwardRef(Component));

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  sizeLookup,
+  sizeMdLookup,
+  sizeLgLookup,
+  fontSizeLookup,
+  fontSizeMdLookup,
+  fontSizeLgLookup,
+  fontWeightLookup,
+  fontWeightMdLookup,
+  fontWeightLgLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+
+/**
+ *
+ *
+ * @typedef {'base' | 'md' | 'lg'} Breakpoint
+ *
+ * @typedef {0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8} Size
+ *
+ * @typedef {'xs'
+ *   | 'sm'
+ *   | 'base'
+ *   | 'lg'
+ *   | 'xl'
+ *   | '2xl'
+ *   | '3xl'
+ *   | '4xl'
+ *   | '5xl'
+ *   | '6xl'
+ *   | '7xl'
+ *   | '8xl'
+ *   | '9xl'} LabelFontSize
+ *
+ *
+ * @typedef {'thin'
+ *   | 'extralight'
+ *   | 'light'
+ *   | 'normal'
+ *   | 'medium'
+ *   | 'semibold'
+ *   | 'bold'
+ *   | 'extrabold'
+ *   | 'black'} LabelFontWeight
+ *
+ *
+ * @typedef {object} ComponentProps
+ * @property {Size | Record<Breakpoint, Size>} [size]
+ *
+ *   - @property {LabelFontSize | Record<Breakpoint, LabelFontSize>} [labelFontSize]
+ *
+ * @property {LabelFontWeight | Record<Breakpoint, LabelFontWeight>} [labelFontWeight]
+ * @param {React.ComponentProps<'input'> & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({
+  label,
+  disabled = false,
+  className = '',
+  labelClass,
+  checkClass,
+  onChange,
+  size = { base: 4, md: 5 },
+  labelFontSize = { base: 'xs', md: 'sm', lg: 'base' },
+  labelFontWeight,
+  ...rest
+}) => {
+  const id = React.useId();
+
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <input
+        type="checkbox"
+        disabled={disabled}
+        onChange={onChange}
+        className={cn(
+          ' border border-tertiary checked:bg-primary accent-primary transition-colors duration-200',
+          typeof size !== 'object' && getClassName(size, sizeLookup),
+          disabled && 'cursor-not-allowed bg-opacity-60',
+          getClassName(size?.base, sizeLookup),
+          getClassName(size?.md, sizeMdLookup),
+          getClassName(size?.lg, sizeLgLookup),
+          checkClass
+        )}
+        id={id}
+        {...rest}
+      />
+      <label
+        htmlFor={id}
+        className={cn(
+          'text-secondary font-inter',
+          disabled && 'opacity-50 cursor-not-allowed',
+          typeof labelFontSize !== 'object' && getClassName(labelFontSize, fontSizeLookup),
+          getClassName(labelFontSize?.base, fontSizeLookup),
+          getClassName(labelFontSize?.md, fontSizeMdLookup),
+          getClassName(labelFontSize?.lg, fontSizeLgLookup),
+          typeof labelFontWeight !== 'object' && getClassName(labelFontWeight, fontWeightLookup),
+          getClassName(labelFontWeight?.base, fontWeightLookup),
+          getClassName(labelFontWeight?.md, fontWeightMdLookup),
+          getClassName(labelFontWeight?.lg, fontWeightLgLookup),
+          labelClass
+        )}
+      >
+        {label}
+      </label>
+    </div>
+  );
+};
+
+export const Checkbox = memo(Component);

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { FaChevronRight } from 'react-icons/fa';
+import { memo } from '@/utils';
+import { cn } from '@/libs';
+
+const DropdownMenuRoot = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuSubTrigger = React.forwardRef(
+  ({ className, inset, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        inset && 'pl-8',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <FaChevronRight className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+);
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef(
+  ({ className, sideOffset = 4, contentClassName, ...props }, ref) => (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow',
+          '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',
+          className,
+          contentClassName
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+);
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef(
+  ({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative flex select-none items-center gap-2 font-inter  cursor-pointer rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+        inset && 'pl-8',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuLabel = React.forwardRef(
+  ({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={cn(
+        'px-2 py-1.5 text-sm font-semibold font-inter',
+        inset && 'pl-8',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.Separator
+      ref={ref}
+      className={cn('-mx-1 my-1 h-px bg-muted', className)}
+      {...props}
+    />
+  )
+);
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+/**
+ * @typedef {object} ComponentProps
+ * @property {boolean} [open]
+ * @property {(open: boolean) => void} [onOpenChange]
+ * @property {React.ReactNode} content
+ * @param {React.PropsWithChildren<ComponentProps>} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({
+  open,
+  onOpenChange,
+  content,
+  children,
+  contentClassName,
+}) => {
+  return (
+    <DropdownMenuRoot
+      className="border w-full "
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <DropdownMenuTrigger className="w-full">{children}</DropdownMenuTrigger>
+      <DropdownMenuContent align="end" contentClassName={contentClassName}>
+        {content}
+      </DropdownMenuContent>
+    </DropdownMenuRoot>
+  );
+};
+
+const DropdownMenu = memo(Component);
+
+export {
+  DropdownMenu,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuItem,
+};