Patches for Flexbox

package.json

@@ -1,16 +1,25 @@
 {
   "name": "fluentui-helpers",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Helper library for microsofts fluentui react library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "author": "bubulus",
   "license": "MIT",
   "peerDependencies": {
+    "@fluentui/react-components": "^9",
+    "@fluentui/react-icons": "^2",
+    "@griffel/react": "^1.5",
     "@fluentui/react-components": "^9",
     "@fluentui/react-icons": "^2",
     "@griffel/react": "^1.5",
@@ -69,6 +78,7 @@
     "typescript": "5.5.4",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.4.0",
+    "vite-plugin-dts": "^4.4.0",
     "vite-tsconfig-paths": "^5.0.1"
   }
 }

src/components/layout/Flex/component.tsx → src/components/layout/Flex/func.tsx

@@ -16,7 +16,12 @@ import {
 
 import type {
   TFlexDirection,
-  TFlexOption,
+  TFlexOptionContent,
+  TFlexOptionItems,
+  TFlexWrap,
+  TFlexGrow,
+  TFlexShrink,
+  TFlexBasis,
   TFlexShorthandDimensions,
   TFlexPosition,
 } from "@components/layout/Flex/types";
@@ -25,9 +30,14 @@ type TProps = {
   children: ReactNode;
   position?: TFlexPosition;
   direction?: TFlexDirection;
-  justifyContent?: TFlexOption;
-  alignItems?: TFlexOption;
-  wrap?: boolean;
+  justifyContent?: TFlexOptionContent;
+  alignItems?: TFlexOptionItems;
+  alignContent?: TFlexOptionContent;
+  alignSelf?: TFlexOptionItems;
+  grow?: TFlexGrow;
+  noShrink?: TFlexShrink;
+  basis?: TFlexBasis;
+  wrap?: TFlexWrap;
   className?: string;
   gap?: TThemeSpacing;
   margin?: TThemeShorthandSpacing;
@@ -49,8 +59,14 @@ type TProps = {
  * - `direction`: flex-direction property
  * - `justifyContent`: justify-content property
  * - `alignItems`: align-items property
+ * - `alignContent`: align-content property
+ * - `alignSelf`: align-self property
  * - `wrap`: flex-wrap property
  * - `gap`: gap between children, with fixed predefined values from the design system, not discriminating between horizontal and vertical gap (because there are literally the same values)
+ * - `grow`: shorthand for flex-grow property
+ * - `noShrink`: shorthand for flex-shrink property, noShrik is the same as flex-shrink: 0
+ * - `basis`: shorthand for flex-basis property, only global values are supported, for specific values use className prop
+ * - `position`: position property, supports all global values
  * - `margin`: margin property, using the same values like gap, expects the shorthand notation
  * - `padding`: same like margin, but for padding, concrete example below
  *
@@ -74,15 +90,33 @@ type TProps = {
  *
  *
  * @default
- * direction = "row", justifyContent = "start", alignItems = "start", wrap = false, gap = "None", margin = ["None"], padding = ["None"], shHeight = "auto", shWidth = "auto"
+ * direction = "row",
+ * position = "static",
+ * justifyContent = "start",
+ * alignItems = "stretch",
+ * alignContent = "stretch",
+ * alignSelf = "auto",
+ * grow = false,
+ * noShrink = false,
+ * wrap = false,
+ * gap = "None",
+ * margin = ["None"],
+ * padding = ["None"],
+ * shHeight = "auto",
+ * shWidth = "auto"
  */
 export default function Flex({
   direction = "row",
   position = "static",
   justifyContent = "start",
-  alignItems = "start",
+  alignContent = "stretch",
+  alignItems = "stretch",
+  alignSelf = "auto",
   wrap = false,
   gap = "None",
+  grow = false,
+  noShrink = false,
+  basis = "auto",
   margin = ["None"],
   padding = ["None"],
   shHeight = "auto",
@@ -92,7 +126,17 @@ export default function Flex({
   children,
   ...rest
 }: TProps) {
-  const flexBoxClass = useFlexBox(justifyContent, alignItems, direction, wrap);
+  const flexBoxClass = useFlexBox(
+    justifyContent,
+    alignContent,
+    alignItems,
+    alignSelf,
+    direction,
+    wrap,
+    grow,
+    noShrink,
+    basis,
+  );
   const gapClass = useGap(gap);
   const marginClass = useMargin(margin);
   const paddingClass = usePadding(padding);

src/components/layout/Flex/hooks/useFlexBox.ts

@@ -4,33 +4,65 @@ import { useFlexBoxClasses } from "@components/layout/Flex/styles";
 
 import type {
   TFlexDirection,
-  TFlexOption,
+  TFlexOptionContent,
+  TFlexOptionItems,
+  TFlexShrink,
+  TFlexGrow,
+  TFlexBasis,
+  TFlexWrap,
 } from "@components/layout/Flex/types";
 
 export default function useFlexBox(
-  justifyContent?: TFlexOption,
-  alignItems?: TFlexOption,
+  justifyContent?: TFlexOptionContent,
+  alignContent?: TFlexOptionContent,
+  alignItems?: TFlexOptionItems,
+  alignSelf?: TFlexOptionItems,
   direction?: TFlexDirection,
-  wrap?: boolean,
+  wrap?: TFlexWrap,
+  grow?: TFlexGrow,
+  noShrink?: TFlexShrink,
+  basis?: TFlexBasis,
 ) {
   const classes = useFlexBoxClasses();
+
   const directionClass = direction
     ? classes[`${direction}Direction`]
     : undefined;
+
   const justifyContentClass = justifyContent
-    ? classes[`${justifyContent}Content`]
+    ? classes[`${justifyContent}JustifyContent`]
+    : undefined;
+
+  const alignContentClass = alignContent
+    ? classes[`${alignContent}AlignContent`]
     : undefined;
+
   const alignItemsClass = alignItems
-    ? classes[`${alignItems}Items`]
+    ? classes[`${alignItems}AlignItems`]
+    : undefined;
+
+  const alignSelfClass = alignSelf
+    ? classes[`${alignSelf}AlignSelf`]
     : undefined;
 
-  const wrapClass = wrap ? classes.wrap : classes.nowrap;
+  const basisClass = basis ? classes[`${basis}Basis`] : undefined;
+
+  const growClass = grow ? classes.growOne : classes.growZero;
+  const shrinkClass = noShrink ? classes.shrinkZero : classes.shrinkOne;
+  const wrapClass = wrap
+    ? (wrap === "reverse" && classes.wrapReverse) || classes.wrap
+    : classes.nowrap;
 
   return mergeClasses(
     classes.base,
     directionClass,
     justifyContentClass,
+    alignContentClass,
     alignItemsClass,
+    alignSelfClass,
+    growClass,
+    shrinkClass,
+    basisClass,
     wrapClass,
   );
 }

src/components/layout/Flex/index.ts

@@ -1,3 +1,3 @@
-import Flex from "@components/layout/Flex/component";
+import Flex from "@components/layout/Flex/func";
 
 export default Flex;

src/components/layout/Flex/styles/flexBox.ts

@@ -10,49 +10,97 @@ const useFlexBoxClasses = makeStyles({
   columnDirection: {
     flexDirection: "column",
   },
+  rowReverseDirection: {
+    flexDirection: "row-reverse",
+  },
+  columnReverseDirection: {
+    flexDirection: "column-reverse",
+  },
+
   // justify-content
-  centerContent: {
+  centerJustifyContent: {
     justifyContent: "center",
   },
-  startContent: {
+  startJustifyContent: {
     justifyContent: "flex-start",
   },
-  endContent: {
+  endJustifyContent: {
     justifyContent: "flex-end",
   },
-  spaceBetweenContent: {
+  spaceBetweenJustifyContent: {
     justifyContent: "space-between",
   },
-  spaceAroundContent: {
+  spaceAroundJustifyContent: {
     justifyContent: "space-around",
   },
-  spaceEvenlyContent: {
+  spaceEvenlyJustifyContent: {
     justifyContent: "space-evenly",
   },
-  stretchContent: {
+  stretchJustifyContent: {
     justifyContent: "stretch",
   },
+
   // align-items
-  centerItems: {
+  autoAlignItems: {
+    alignItems: "auto",
+  },
+  centerAlignItems: {
     alignItems: "center",
   },
-  startItems: {
+  startAlignItems: {
     alignItems: "flex-start",
   },
-  endItems: {
+  endAlignItems: {
     alignItems: "flex-end",
   },
-  stretchItems: {
+  stretchAlignItems: {
     alignItems: "stretch",
   },
-  spaceBetweenItems: {
-    alignItems: "space-between",
+  baselineAlignItems: {
+    alignItems: "baseline",
+  },
+
+  // align-self
+  autoAlignSelf: {
+    alignSelf: "auto",
+  },
+  startAlignSelf: {
+    alignSelf: "flex-start",
+  },
+  endAlignSelf: {
+    alignSelf: "flex-end",
   },
-  spaceAroundItems: {
-    alignItems: "space-around",
+  centerAlignSelf: {
+    alignSelf: "center",
   },
-  spaceEvenlyItems: {
-    alignItems: "space-evenly",
+  stretchAlignSelf: {
+    alignSelf: "stretch",
+  },
+  baselineAlignSelf: {
+    alignSelf: "baseline",
+  },
+
+  // align-content
+  centerAlignContent: {
+    alignContent: "center",
+  },
+  startAlignContent: {
+    alignContent: "flex-start",
+  },
+  endAlignContent: {
+    alignContent: "flex-end",
+  },
+  stretchAlignContent: {
+    alignContent: "stretch",
+  },
+  spaceBetweenAlignContent: {
+    alignContent: "space-between",
+  },
+  spaceAroundAlignContent: {
+    alignContent: "space-around",
+  },
+  spaceEvenlyAlignContent: {
+    alignContent: "space-evenly",
   },
 
   // wrap
@@ -62,6 +110,48 @@ const useFlexBoxClasses = makeStyles({
   nowrap: {
     flexWrap: "nowrap",
   },
+  wrapReverse: {
+    flexWrap: "wrap-reverse",
+  },
+
+  // grow
+  growOne: {
+    flexGrow: 1,
+  },
+  growZero: {
+    flexGrow: 0,
+  },
+
+  // shrink
+  shrinkOne: {
+    flexShrink: 1,
+  },
+  shrinkZero: {
+    flexShrink: 0,
+  },
+
+  // basis
+  autoBasis: {
+    flexBasis: "auto",
+  },
+  "0Basis": {
+    flexBasis: 0,
+  },
+  fillBasis: {
+    flexBasis: "fill",
+  },
+  maxContentBasis: {
+    flexBasis: "max-content",
+  },
+  minContentBasis: {
+    flexBasis: "min-content",
+  },
+  fitContentBasis: {
+    flexBasis: "fit-content",
+  },
+  contentBasis: {
+    flexBasis: "content",
+  },
 });
 
 export default useFlexBoxClasses;