Datc 19 add flexbox abstraction

.vscode/settings.json

@@ -11,11 +11,20 @@
   "workbench.editor.customLabels.enabled": true,
   "workbench.editor.customLabels.patterns": {
     "**/config/ci/**/caller.mk": "${dirname}.caller",
-    "**/config/ci/**/runner.ts": "${dirname}.runner"
+    "**/config/ci/**/runner.ts": "${dirname}.runner",
+    // react-func pattern
+    "**/src/**/func.tsx": "${dirname(-3)}.${dirname}.func",
+    "**/src/**/styles.ts": "${dirname}.styles",
+    "**/src/**/stories.{ts,tsx}": "${dirname}.stories",
+    "**/src/**/index.ts": "${dirname}.module",
+    "**/src/**/constants.ts": "${dirname}.constants",
+    "**/src/**/tests.tsx": "${dirname}.tests",
+    "**/src/**/types.ts": "${dirname}.types"
   },
 
   "material-icon-theme.files.associations": {
     "stories.ts": "Storybook",
+    "stories.tsx": "Storybook",
     "tests.tsx": "Test-jsx",
     "styles.ts": "Css",
     "func.tsx": "SVGr",

apps/frontend/admin/src/App.tsx

@@ -1,10 +1,5 @@
 import { ThemeProvider } from "@lib-theme";
-import { Button } from "@lib-components";
 
 export default function App() {
-  return (
-    <ThemeProvider>
-      <Button appearance="primary"> Hello ADMIN </Button>
-    </ThemeProvider>
-  );
+  return <ThemeProvider>Hello ADMIN</ThemeProvider>;
 }

apps/frontend/ui/src/App.tsx

@@ -1,10 +1,5 @@
 import { ThemeProvider } from "@lib-theme";
-import { Button } from "@lib-components";
 
 export default function App() {
-  return (
-    <ThemeProvider>
-      <Button appearance="primary"> Hello My UI APP </Button>
-    </ThemeProvider>
-  );
+  return <ThemeProvider>Hello My UI APP</ThemeProvider>;
 }

libs/components/src/defaults.ts

@@ -0,0 +1,6 @@
+export default {
+  propsValues: {
+    undefinedClassString: "$$!!NoClassString!!$$",
+    undefinedDataTestId: "$$!!NoDataTestId!!$$",
+  },
+};

libs/components/src/index.ts

@@ -1 +1 @@
-export { Button } from "@lib-components/atoms";
+export { Flex } from "@lib-components/layout";

libs/components/src/layout/Flex/func.tsx

@@ -0,0 +1,111 @@
+import type { ReactNode } from "react";
+
+import constants from "@lib-components/defaults";
+
+import { mergeClasses } from "@lib-theme";
+import type { TThemeSpacing, TThemeShorthandSpacing } from "@lib-theme";
+
+import {
+  useGap,
+  useFlexBox,
+  useMargin,
+  usePadding,
+  useShorthandDimension,
+} from "@lib-components/layout/Flex/hooks";
+
+import type {
+  TFlexDirection,
+  TFlexOption,
+  TFlexWrap,
+  TFlexShorthandDimensions,
+} from "@lib-components/layout/Flex/types";
+
+type TProps = {
+  children: ReactNode;
+  direction?: TFlexDirection;
+  justifyContent?: TFlexOption;
+  alignItems?: TFlexOption;
+  wrap?: TFlexWrap;
+  className?: string;
+  gap?: TThemeSpacing;
+  margin?: TThemeShorthandSpacing;
+  padding?: TThemeShorthandSpacing;
+  testId?: string;
+  shWidth?: TFlexShorthandDimensions;
+  shHeight?: TFlexShorthandDimensions;
+};
+
+/**
+ * @description
+ * - fluent does not provide a `Flex` component for consistent layout (it was removed in the latest version)
+ * - to have a straight forward implementation of `Flex` component, we have created this layout component
+ * - having this allows to use fewer makeStyles call and repeting flex configurations in the code
+ * - its especially usefull when certain layout styles have to be applied conditionally
+ * - for this the entire conditional logic is abstracted inside this component, providing very much styled-component like ergonomics
+ *
+ *
+ * @props
+ * - `direction`: flex-direction property
+ * - `justifyContent`: justify-content property
+ * - `alignItems`: align-items property
+ * - `wrap`: flex-wrap property
+ * - `className`: to add additional classes to the component, will override all specified styles from props
+ * - `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)
+ * - `margin`: margin property, using the same values like gap, expects the shorthand notation
+ * - `padding`: same like margin, but for padding
+ *
+ * ```
+ * // the shorthand is not a simple string, but rather defined as an array that can be of size 1 up to 4
+ * // each element provides additional restraint from the design system tokens
+ * // following examples will only use padding, but the same applies to margin
+ * // the * between tokens.spacing and the further specifier can be interpreted as either horizontal or vertical (both the same values, reasoning is explained in gap comment above)
+ *
+ * <Flex padding={["S"]} /> // like saying padding: tokens.spacing*S;
+ * <Flex padding={["S", "M"]} /> // like saying padding: `${tokens.spacing*S} ${tokens.spacing*M}`;
+ * <Flex padding={["S", "M", "L"]} /> // like saying padding: `${tokens.spacing*S} ${tokens.spacing*M} ${tokens.spacing*L}`;
+ * <Flex padding={["S", "M", "L", "XL"]} /> // like saying padding: `${tokens.spacing*S} ${tokens.spacing*M} ${tokens.spacing*L} ${tokens.spacing*XL}`;
+ *
+ * ```
+ * - `testId`: passed down the data-testid attribute
+ * - `shWidth`: shorthand for width property
+ * - `shHeight`: shorthand for height property
+ *
+ * @default
+ * direction = "row", justifyContent = "start", alignItems = "start", wrap = "nowrap", gap = "None", margin = ["None"], padding = ["None"], className = "NoClass"
+ */
+export default function Flex({
+  direction = "row",
+  justifyContent = "start",
+  alignItems = "start",
+  wrap = "nowrap",
+  gap = "None",
+  margin = ["None"],
+  padding = ["None"],
+  shHeight = "auto",
+  shWidth = "auto",
+  className = constants.propsValues.undefinedClassString,
+  testId = constants.propsValues.undefinedDataTestId,
+  children,
+}: TProps) {
+  const flexBoxClass = useFlexBox(justifyContent, alignItems, direction, wrap);
+  const gapClass = useGap(gap);
+  const marginClass = useMargin(margin);
+  const paddingClass = usePadding(padding);
+  const dimensionClass = useShorthandDimension(shWidth, shHeight);
+
+  return (
+    <div
+      data-testid={testId}
+      className={mergeClasses(
+        flexBoxClass,
+        gapClass,
+        marginClass,
+        paddingClass,
+        dimensionClass,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

libs/components/src/layout/Flex/hooks/index.ts

@@ -0,0 +1,7 @@
+import useGap from "@lib-components/layout/Flex/hooks/useGap";
+import useMargin from "@lib-components/layout/Flex/hooks/useMargin";
+import usePadding from "@lib-components/layout/Flex/hooks/usePadding";
+import useFlexBox from "@lib-components/layout/Flex/hooks/useFlexBox";
+import useShorthandDimension from "@lib-components/layout/Flex/hooks/useShorthandDimension";
+
+export { useGap, useMargin, usePadding, useFlexBox, useShorthandDimension };

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

@@ -0,0 +1,36 @@
+import { mergeClasses } from "@lib-theme";
+
+import { useFlexBoxClasses } from "@lib-components/layout/Flex/styles";
+
+import type {
+  TFlexDirection,
+  TFlexOption,
+  TFlexWrap,
+} from "@lib-components/layout/Flex/types";
+
+export default function useFlexBox(
+  justifyContent?: TFlexOption,
+  alignItems?: TFlexOption,
+  direction?: TFlexDirection,
+  wrap?: TFlexWrap,
+) {
+  const classes = useFlexBoxClasses();
+  const directionClass = direction
+    ? classes[`${direction}Direction`]
+    : undefined;
+  const justifyContentClass = justifyContent
+    ? classes[`${justifyContent}Content`]
+    : undefined;
+  const alignItemsClass = alignItems
+    ? classes[`${alignItems}Items`]
+    : undefined;
+  const wrapClass = wrap ? classes[wrap] : undefined;
+
+  return mergeClasses(
+    classes.base,
+    directionClass,
+    justifyContentClass,
+    alignItemsClass,
+    wrapClass,
+  );
+}

libs/components/src/layout/Flex/hooks/useGap.ts

@@ -0,0 +1,9 @@
+import { useGapClasses } from "@lib-components/layout/Flex/styles";
+import type { TThemeSpacing } from "@lib-theme";
+
+function useGap(gap?: TThemeSpacing) {
+  const classes = useGapClasses();
+  return gap ? classes[`gap${gap}`] : undefined;
+}
+
+export default useGap;

libs/components/src/layout/Flex/hooks/useMargin.ts

@@ -0,0 +1,39 @@
+import { useMarginClasses } from "@lib-components/layout/Flex/styles";
+import { mergeClasses } from "@lib-theme";
+
+import type { TThemeShorthandSpacing } from "@lib-theme";
+
+function useMargin(margin?: TThemeShorthandSpacing) {
+  const classes = useMarginClasses();
+
+  if (margin === undefined) {
+    return "noMarginValue";
+  }
+  if (margin.length === 1) {
+    return classes[`margin${margin[0]}`];
+  }
+  if (margin.length === 2) {
+    return mergeClasses(
+      classes[`marginTop${margin[0]}`],
+      classes[`marginRight${margin[1]}`],
+      classes[`marginBottom${margin[0]}`],
+      classes[`marginLeft${margin[1]}`],
+    );
+  }
+  if (margin.length === 3) {
+    return mergeClasses(
+      classes[`marginTop${margin[0]}`],
+      classes[`marginRight${margin[1]}`],
+      classes[`marginBottom${margin[2]}`],
+      classes[`marginLeft${margin[1]}`],
+    );
+  }
+  return mergeClasses(
+    classes[`marginTop${margin[0]}`],
+    classes[`marginRight${margin[1]}`],
+    classes[`marginBottom${margin[2]}`],
+    classes[`marginLeft${margin[3]}`],
+  );
+}
+
+export default useMargin;

libs/components/src/layout/Flex/hooks/usePadding.ts

@@ -0,0 +1,39 @@
+import { usePaddingClasses } from "@lib-components/layout/Flex/styles";
+import { mergeClasses } from "@lib-theme";
+
+import type { TThemeShorthandSpacing } from "@lib-theme";
+
+function usePadding(padding?: TThemeShorthandSpacing) {
+  const classes = usePaddingClasses();
+
+  if (padding === undefined) {
+    return "noPaddingValue";
+  }
+  if (padding.length === 1) {
+    return classes[`padding${padding[0]}`];
+  }
+  if (padding.length === 2) {
+    return mergeClasses(
+      classes[`paddingTop${padding[0]}`],
+      classes[`paddingRight${padding[1]}`],
+      classes[`paddingBottom${padding[0]}`],
+      classes[`paddingLeft${padding[1]}`],
+    );
+  }
+  if (padding.length === 3) {
+    return mergeClasses(
+      classes[`paddingTop${padding[0]}`],
+      classes[`paddingRight${padding[1]}`],
+      classes[`paddingBottom${padding[2]}`],
+      classes[`paddingLeft${padding[1]}`],
+    );
+  }
+  return mergeClasses(
+    classes[`paddingTop${padding[0]}`],
+    classes[`paddingRight${padding[1]}`],
+    classes[`paddingBottom${padding[2]}`],
+    classes[`paddingLeft${padding[3]}`],
+  );
+}
+
+export default usePadding;

libs/components/src/layout/Flex/hooks/useShorthandDimension.ts

@@ -0,0 +1,17 @@
+import { mergeClasses } from "@lib-theme";
+
+import { useDimensionClasses } from "@lib-components/layout/Flex/styles";
+
+import type { TFlexShorthandDimensions } from "@lib-components/layout/Flex/types";
+
+export default function useShorthandDimension(
+  shorthandWidth: TFlexShorthandDimensions,
+  shorthandHeight: TFlexShorthandDimensions,
+) {
+  const classes = useDimensionClasses();
+
+  const widthClass = classes[`${shorthandWidth}Width`];
+  const heightClass = classes[`${shorthandHeight}Height`];
+
+  return mergeClasses(widthClass, heightClass);
+}

libs/components/src/layout/Flex/index.ts

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