fix(striker-ui): allow FlexBox to accept responsive values

striker-ui/components/FlexBox.tsx

@@ -1,50 +1,103 @@
-import { FC } from 'react';
-import {
-  Box as MUIBox,
-  BoxProps as MUIBoxProps,
-  SxProps,
-  Theme,
-} from '@mui/material';
+import { Box as MUIBox, BoxProps as MUIBoxProps } from '@mui/material';
+import { FC, useMemo } from 'react';
+
+type FlexBoxDirection = 'column' | 'row';
 
 type FlexBoxOptionalProps = {
   row?: boolean;
+  lg?: FlexBoxDirection;
+  md?: FlexBoxDirection;
+  sm?: FlexBoxDirection;
+  spacing?: number | string;
+  xl?: FlexBoxDirection;
+  xs?: FlexBoxDirection;
 };
 
 type FlexBoxProps = MUIBoxProps & FlexBoxOptionalProps;
 
-const FLEX_BOX_DEFAULT_PROPS: Required<FlexBoxOptionalProps> = {
+const FLEX_BOX_DEFAULT_PROPS: Required<
+  Omit<FlexBoxOptionalProps, 'lg' | 'md' | 'sm' | 'xl'>
+> &
+  Pick<FlexBoxOptionalProps, 'lg' | 'md' | 'sm' | 'xl'> = {
   row: false,
+  lg: undefined,
+  md: undefined,
+  sm: undefined,
+  spacing: '1em',
+  xl: undefined,
+  xs: 'column',
 };
 
-const FlexBox: FC<FlexBoxProps> = ({ row: isRow, sx, ...muiBoxRestProps }) => {
-  let rootSxAppend: SxProps<Theme> = {
-    flexDirection: 'column',
-  };
-  let notFirstChildSxAppend: SxProps<Theme> = {
-    marginTop: '1em',
-  };
+const FlexBox: FC<FlexBoxProps> = ({
+  lg: dLg = FLEX_BOX_DEFAULT_PROPS.lg,
+  md: dMd = FLEX_BOX_DEFAULT_PROPS.md,
+  row: isRow,
+  sm: dSm = FLEX_BOX_DEFAULT_PROPS.sm,
+  spacing = FLEX_BOX_DEFAULT_PROPS.spacing,
+  sx,
+  xl: dXl = FLEX_BOX_DEFAULT_PROPS.xl,
+  xs: dXs = FLEX_BOX_DEFAULT_PROPS.xs,
+  ...muiBoxRestProps
+}) => {
+  const xs = useMemo(() => (isRow ? 'row' : dXs), [dXs, isRow]);
+  const sm = useMemo(() => dSm || xs, [dSm, xs]);
+  const md = useMemo(() => dMd || sm, [dMd, sm]);
+  const lg = useMemo(() => dLg || md, [dLg, md]);
+  const xl = useMemo(() => dXl || lg, [dXl, lg]);
 
-  if (isRow) {
-    rootSxAppend = {
-      alignItems: 'center',
-      flexDirection: 'row',
-    };
-    notFirstChildSxAppend = {
-      marginLeft: '1em',
-    };
-  }
+  const mapToSx: Record<
+    FlexBoxDirection,
+    {
+      alignItems: string;
+      marginLeft: string | number;
+      marginTop: string | number;
+    }
+  > = useMemo(
+    () => ({
+      column: {
+        alignItems: 'normal',
+        marginLeft: 0,
+        marginTop: spacing,
+      },
+      row: {
+        alignItems: 'center',
+        marginLeft: spacing,
+        marginTop: 0,
+      },
+    }),
+    [spacing],
+  );
 
   return (
     <MUIBox
       {...{
         ...muiBoxRestProps,
         sx: {
+          alignItems: {
+            xs: mapToSx[xs].alignItems,
+            sm: mapToSx[sm].alignItems,
+            md: mapToSx[md].alignItems,
+            lg: mapToSx[lg].alignItems,
+            xl: mapToSx[xl].alignItems,
+          },
           display: 'flex',
-
-          ...rootSxAppend,
+          flexDirection: { xs, sm, md, lg, xl },
 
           '& > :not(:first-child)': {
-            ...notFirstChildSxAppend,
+            marginLeft: {
+              xs: mapToSx[xs].marginLeft,
+              sm: mapToSx[sm].marginLeft,
+              md: mapToSx[md].marginLeft,
+              lg: mapToSx[lg].marginLeft,
+              xl: mapToSx[xl].marginLeft,
+            },
+            marginTop: {
+              xs: mapToSx[xs].marginTop,
+              sm: mapToSx[sm].marginTop,
+              md: mapToSx[md].marginTop,
+              lg: mapToSx[lg].marginTop,
+              xl: mapToSx[xl].marginTop,
+            },
           },
 
           ...sx,