create-react-scaffold-cli 0.1.0

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

@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  gapLookup,
+  gapMdLookup,
+  gapLgLookup,
+  directionLookup,
+  directionMdLookup,
+  directionLgLookup,
+  justifyLookup,
+  justifyMdLookup,
+  justifyLgLookup,
+  alignLookup,
+  alignMdLookup,
+  alignLgLookup,
+  widthLookup,
+  widthMdLookup,
+  widthLgLookup,
+  gapXlLookup,
+  directionXlLookup,
+  justifyXlLookup,
+  alignXlLookup,
+  widthXlLookup,
+  gap2XlLookup,
+  width2XlLookup,
+} from '../theme';
+import { cn } from '../libs';
+import { getClassName, memo } from '../utils';
+
+/**
+ * @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} Gap
+ *
+ *
+ * @typedef {'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch'} Justify
+ *
+ *
+ * @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 {'start' | 'end' | 'center' | 'baseline' | 'stretch'} Align
+ *
+ * @typedef {'row' | 'rowReverse' | 'column' | 'columnReverse'} Direction
+ *
+ * @typedef {object} ComponentProps
+ * @property {boolean | Record<Breakpoint, boolean>} [grow]
+ * @property {Gap | Record<Breakpoint, Gap>} [gap]
+ * @property {Direction | Record<Breakpoint, Direction>} [direction]
+ * @property {Justify | Record<Breakpoint, Justify>} [justify]
+ * @property {Align | Record<Breakpoint, Align>} [align]
+ * @property {Width | Record<Breakpoint, Width>} [width]
+ * @param {React.ComponentProps<'div'> & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({ grow, gap, direction, justify, align, width, className, ...rest }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex',
+        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 gap !== 'object' && getClassName(gap, gapLookup),
+        getClassName(gap?.base, gapLookup),
+        getClassName(gap?.md, gapMdLookup),
+        getClassName(gap?.lg, gapLgLookup),
+        getClassName(gap?.xl, gapXlLookup),
+        getClassName(gap?.['2xl'], gap2XlLookup),
+        typeof direction !== 'object' && getClassName(direction, directionLookup),
+        getClassName(direction?.base, directionLookup),
+        getClassName(direction?.md, directionMdLookup),
+        getClassName(direction?.lg, directionLgLookup),
+        getClassName(direction?.xl, directionXlLookup),
+        typeof justify !== 'object' && getClassName(justify, justifyLookup),
+        getClassName(justify?.base, justifyLookup),
+        getClassName(justify?.md, justifyMdLookup),
+        getClassName(justify?.lg, justifyLgLookup),
+        getClassName(justify?.xl, justifyXlLookup),
+        typeof align !== 'object' && getClassName(align, alignLookup),
+        getClassName(align?.base, alignLookup),
+        getClassName(align?.md, alignMdLookup),
+        getClassName(align?.lg, alignLgLookup),
+        getClassName(align?.xl, alignXlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(width?.base, widthLookup),
+        getClassName(width?.md, widthMdLookup),
+        getClassName(width?.lg, widthLgLookup),
+        getClassName(width?.xl, widthXlLookup),
+        getClassName(width?.['2xl'], width2XlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const Flex = memo(React.forwardRef(Component));

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  growLookup,
+  growMdLookup,
+  growLgLookup,
+  alignSelfLookup,
+  alignSelfMdLookup,
+  alignSelfLgLookup,
+  widthLookup,
+  widthMdLookup,
+  widthLgLookup,
+  growXlLookup,
+  alignSelfXlLookup,
+  widthXlLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+
+/**
+ * @typedef {'base' | 'md' | 'lg' | 'xl'} Breakpoint
+ *
+ * @typedef {'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'} AlignSelf
+ *
+ * @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 {0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12} Grow
+ *
+ * @typedef {object} ComponentProps
+ * @property {boolean | Record<Breakpoint, boolean>} [hide]
+ * @property {Grow | Record<Breakpoint, Grow>} [grow]
+ * @property {Width | Record<Breakpoint, Width>} [width]
+ * @property {AlignSelf | Record<Breakpoint, AlignSelf>} [alignSelf]
+ * @param {React.ComponentProps<'div'> & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({ hide, grow, alignSelf, width, 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' && getClassName(grow, growLookup),
+        getClassName(grow?.base, growLookup),
+        getClassName(grow?.md, growMdLookup),
+        getClassName(grow?.lg, growLgLookup),
+        getClassName(grow?.xl, growXlLookup),
+        typeof alignSelf !== 'object' && getClassName(alignSelf, alignSelfLookup),
+        getClassName(alignSelf?.base, alignSelfLookup),
+        getClassName(alignSelf?.md, alignSelfMdLookup),
+        getClassName(alignSelf?.lg, alignSelfLgLookup),
+        getClassName(alignSelf?.xl, alignSelfXlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(width?.base, widthLookup),
+        getClassName(width?.md, widthMdLookup),
+        getClassName(width?.lg, widthLgLookup),
+        getClassName(width?.xl, widthXlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const FlexItem = memo(React.forwardRef(Component));

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

@@ -0,0 +1,184 @@
+import React 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';
+
+/**
+ * @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} Gap
+ *
+ *
+ * @typedef {'xs'
+ *   | 'sm'
+ *   | 'base'
+ *   | 'lg'
+ *   | 'xl'
+ *   | '2xl'
+ *   | '3xl'
+ *   | '4xl'
+ *   | '5xl'
+ *   | '6xl'
+ *   | '7xl'
+ *   | '8xl'
+ *   | '9xl'} Size
+ *
+ *
+ * @typedef {'thin'
+ *   | 'extralight'
+ *   | 'light'
+ *   | 'normal'
+ *   | 'medium'
+ *   | 'semibold'
+ *   | 'bold'
+ *   | 'extrabold'
+ *   | 'black'} Weight
+ *
+ *
+ * @typedef {'primary' | 'secondary' | 'success' | 'danger'} Color
+ *
+ * @typedef {object} ComponentProps
+ * @property {string} label
+ * @property {Size | Record<Breakpoint, Size>} [labelFontSize]
+ * @property {Weight | Record<Breakpoint, Weight>} [labelFontWeight]
+ * @property {Color} [labelColor]
+ * @property {string} [labelClass]
+ * @property {Gap | Record<Breakpoint, Gap>} [gap]
+ * @property {string} [error]
+ * @property {Size | Record<Breakpoint, Size>} [errorFontSize]
+ * @property {Weight | Record<Breakpoint, Weight>} [errorFontWeight]
+ * @property {Color} [errorColor]
+ * @property {string} [className]
+ * @property {boolean | Record<Breakpoint, boolean>} [hide]
+ * @property {boolean | Record<Breakpoint, boolean>} [hideLabel]
+ * @param {React.PropsWithChildren<ComponentProps>} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({
+  label,
+  labelFontSize,
+  labelFontWeight,
+  labelColor,
+  labelClass,
+  gap = 2,
+  hide,
+  hideLabel,
+  error,
+  errorFontSize = 'xs',
+  errorFontWeight = 'medium',
+  errorColor = 'danger',
+  className,
+  children,
+}) => {
+  const id = React.useId();
+  const markup = typeof children === 'function' ? children(id) : children;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col w-full',
+        typeof gap !== 'object' && getClassName(gap, gapLookup),
+        getClassName(gap?.base, gapLookup),
+        getClassName(gap?.md, gapMdLookup),
+        getClassName(gap?.lg, gapLgLookup),
+        getClassName(gap?.xl, gapXlLookup),
+        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 className !== 'object' && className
+      )}
+    >
+      {label && (
+        <div>
+          <label
+            htmlFor={id}
+            className={cn(
+              'font-inter',
+              typeof hideLabel !== 'object' && hideLabel === true
+                ? 'hidden'
+                : hideLabel === false && 'block',
+              hideLabel?.base === true ? 'hidden' : hideLabel?.base === false && 'block',
+              hideLabel?.md === true ? 'md:hidden' : hideLabel?.md === false && 'md:block',
+              hideLabel?.lg === true ? 'lg:hidden' : hideLabel?.lg === false && 'lg:block',
+              typeof labelFontSize !== 'object' && getClassName(labelFontSize, fontSizeLookup),
+              getClassName(labelFontSize?.base, fontSizeLookup),
+              getClassName(labelFontSize?.md, fontSizeMdLookup),
+              getClassName(labelFontSize?.lg, fontSizeLgLookup),
+              getClassName(labelFontSize?.xl, fontSizeXlLookup),
+              getClassName(labelFontSize?.['2xl'], fontSize2xlLookup),
+              typeof labelFontWeight !== 'object' &&
+                getClassName(labelFontWeight, fontWeightLookup),
+              getClassName(labelFontWeight?.base, fontWeightLookup),
+              getClassName(labelFontWeight?.md, fontWeightMdLookup),
+              getClassName(labelFontWeight?.lg, fontWeightLgLookup),
+              getClassName(labelFontWeight?.xl, fontWeightXlLookup),
+              getClassName(labelFontWeight?.['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/src/shared/ui/Grid.jsx

@@ -0,0 +1,151 @@
+import { getClassName, memo } from '../utils';
+import React 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';
+
+/**
+ * @typedef {'base' | 'sm' | '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} Gap
+ *
+ *
+ * @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 {'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch'} Justify
+ *
+ *
+ * @typedef {'start' | 'end' | 'center' | 'baseline' | 'stretch'} Align
+ *
+ * @typedef {1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12} Columns
+ *
+ * @typedef {object} ComponentProps
+ * @property {boolean | Record<Breakpoint, boolean>} [grow]
+ * @property {Gap | Record<Breakpoint, Gap>} [gap]
+ * @property {Columns | Record<Breakpoint, Columns>} [columns]
+ * @property {Justify | Record<Breakpoint, Justify>} [justify]
+ * @property {Align | Record<Breakpoint, Align>} [align]
+ * @property {Width | Record<Breakpoint, Width>} [width]
+ * @param {React.ComponentProps<'div'> & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({ grow, gap, columns, justify, align, className, width, ...rest }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'grid',
+        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 gap !== 'object' && getClassName(gap, gapLookup),
+        getClassName(gap?.base, gapLookup),
+        getClassName(gap?.md, gapMdLookup),
+        getClassName(gap?.lg, gapLgLookup),
+        getClassName(gap?.xl, gapXlLookup),
+        typeof columns !== 'object' && getClassName(columns, columnsLookup),
+        getClassName(columns?.base, columnsLookup),
+        getClassName(columns?.md, columnsMdLookup),
+        getClassName(columns?.sm, columnsSmLookup),
+        getClassName(columns?.lg, columnsLgLookup),
+        getClassName(columns?.xl, columnsXlLookup),
+        getClassName(columns?.['2xl'], columns2XlLookup),
+        typeof justify !== 'object' && getClassName(justify, justifyLookup),
+        getClassName(justify?.base, justifyLookup),
+        getClassName(justify?.md, justifyMdLookup),
+        getClassName(justify?.lg, justifyLgLookup),
+        getClassName(justify?.xl, justifyXlLookup),
+        typeof align !== 'object' && getClassName(align, alignLookup),
+        getClassName(align?.base, alignLookup),
+        getClassName(align?.md, alignMdLookup),
+        getClassName(align?.lg, alignLgLookup),
+        getClassName(align?.xl, alignXlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(width?.base, widthLookup),
+        getClassName(width?.md, widthMdLookup),
+        getClassName(width?.lg, widthLgLookup),
+        getClassName(width?.xl, widthXlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const Grid = memo(React.forwardRef(Component));

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

@@ -0,0 +1,95 @@
+import {
+  spanLookup,
+  spanMdLookup,
+  spanLgLookup,
+  alignSelfLookup,
+  alignSelfMdLookup,
+  alignSelfLgLookup,
+  widthLookup,
+  widthMdLookup,
+  widthLgLookup,
+  spanXlLookup,
+  alignSelfXlLookup,
+  widthXlLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+
+/**
+ * @typedef {'base' | 'md' | 'lg' | 'xl'} Breakpoint
+ *
+ * @typedef {'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'} AlignSelf
+ *
+ * @typedef {'auto' | 'full' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12} Span
+ *
+ * @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 {object} ComponentProps
+ * @property {boolean | Record<Breakpoint, boolean>} [hide]
+ * @property {Span | Record<Breakpoint, Span>} [span]
+ * @property {AlignSelf | Record<Breakpoint, AlignSelf>} [alignSelf]
+ * @property {Width | Record<Breakpoint, Width>} [width]
+ * @param {React.ComponentProps<'div'> & ComponentProps} props
+ * @returns {JSX.Element}
+ */
+
+const Component = ({ hide, span, alignSelf, width, 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 span !== 'object' && getClassName(span, spanLookup),
+        getClassName(span?.base, spanLookup),
+        getClassName(span?.md, spanMdLookup),
+        getClassName(span?.lg, spanLgLookup),
+        getClassName(span?.xl, spanXlLookup),
+        typeof alignSelf !== 'object' && getClassName(alignSelf, alignSelfLookup),
+        getClassName(alignSelf?.base, alignSelfLookup),
+        getClassName(alignSelf?.md, alignSelfMdLookup),
+        getClassName(alignSelf?.lg, alignSelfLgLookup),
+        getClassName(alignSelf?.xl, alignSelfXlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(width?.base, widthLookup),
+        getClassName(width?.md, widthMdLookup),
+        getClassName(width?.lg, widthLgLookup),
+        getClassName(width?.xl, widthXlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const GridItem = memo(React.forwardRef(Component));