[HOV-10] Flex component

examples/vanilla-extract-react/package.json

@@ -7,6 +7,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hover-design/react": "*",
     "@vanilla-extract/css": "^1.6.8",
     "@vanilla-extract/vite-plugin": "^3.1.2",
     "polished": "^4.1.3",

lib/src/components/Flex/Flex.tsx

@@ -0,0 +1,42 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { FlexProps } from "./flex.types";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+
+export const FlexComponent:ForwardRefRenderFunction<HTMLDivElement, FlexProps> = ({
+    alignContent = 'normal',
+    alignItems = 'flex-start',
+    flexDirection = 'row',
+    flexWrap = 'nowrap',
+    justifyContent = 'normal',
+    flexShrink = '1',
+    flexGrow = '0',
+    flexBasis = 'auto',
+    gap = 'normal',
+    children,
+    style,
+    ...nativeProps
+}, ref) => {
+  const flexStyles = assignInlineVars({
+    display: 'flex',
+    alignContent,
+    alignItems,
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    flexShrink: flexShrink.toString(),
+    flexGrow: flexGrow.toString(),
+    flexBasis: flexBasis.toString(),
+    gap: gap.toString()
+  });
+  /**
+   * If user passes style object it will merge with current style
+   */
+  Object.assign(flexStyles, style); 
+
+  return (
+    <div style={flexStyles} {...nativeProps} ref={ref}> {children} </div>
+    )
+};
+
+const FlexWithRef = React.forwardRef(FlexComponent);
+export { FlexWithRef as Flex };

lib/src/components/Flex/flex.types.ts

@@ -0,0 +1,12 @@
+export interface FlexProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+{
+    alignContent?: React.CSSProperties['alignContent'],
+    alignItems?: React.CSSProperties['alignItems'],
+    flexDirection?: React.CSSProperties['flexDirection'],
+    flexWrap?: React.CSSProperties['flexWrap'],
+    justifyContent?: React.CSSProperties['justifyContent'],
+    flexShrink?: React.CSSProperties['flexShrink'],
+    flexGrow?: React.CSSProperties['flexGrow'],
+    flexBasis?: React.CSSProperties['flexBasis'],
+    gap?:React.CSSProperties['gap'],
+}

lib/src/components/Flex/index.ts

@@ -0,0 +1 @@
+export * from "./Flex";

lib/src/index.ts

@@ -1,7 +1,8 @@
+export * from "./components/Badge";
 export * from "./components/Button";
 export * from "./components/Card";
-export * from "./components/reset";
-export * from "./components/Switch";
-export * from "./components/Badge";
+export * from "./components/Flex";
 export * from "./components/List";
 export * from "./components/ListItem";
+export * from "./components/reset";
+export * from "./components/Switch";

netlify.toml

@@ -1,4 +1,4 @@
 [build]
     publish = "./build"
     command = "( pnpm run build  || npm install pnpm turbo ) && cd .. && pnpm i --no-frozen-lockfile  && npx turbo run build --scope=docs --include-dependencies --no-deps"
-    
+