update flex tsconfig

packages/layout/flex/src/flex.tsx

@@ -1,165 +1,165 @@
-import { Slot } from "@radix-ui/react-slot";
-import type { StyleXStyles } from "@stylexjs/stylex";
-import * as stylex from "@stylexjs/stylex";
-import { spacing } from "@urban-ui/theme/spacing.stylex";
-import { forwardRef } from "react";
+import { Slot, Slottable } from '@radix-ui/react-slot'
+import type { StyleXStyles } from '@stylexjs/stylex'
+import * as stylex from '@stylexjs/stylex'
+import { spacing } from '@urban-ui/theme/spacing.stylex'
+import { forwardRef } from 'react'
 
 const styles = stylex.create({
-	base: {
-		display: "flex",
-	},
-	isInline: {
-		display: "inline-flex",
-	},
-	fit: {
-		width: "fit-content",
-	},
-});
+  base: {
+    display: 'flex',
+  },
+  isInline: {
+    display: 'inline-flex',
+  },
+  fit: {
+    width: 'fit-content',
+  },
+})
 
 const orientationStyles = stylex.create({
-	h: {
-		flexDirection: "row",
-	},
-	v: {
-		flexDirection: "column",
-	},
-});
+  h: {
+    flexDirection: 'row',
+  },
+  v: {
+    flexDirection: 'column',
+  },
+})
 
 const gapStyles = stylex.create({
-	none: {
-		gap: "0px",
-	},
-	xs: {
-		gap: spacing.xs,
-	},
-	sm: {
-		gap: spacing.sm,
-	},
-	md: {
-		gap: spacing.md,
-	},
-	lg: {
-		gap: spacing.lg,
-	},
-	xl: {
-		gap: spacing.xl,
-	},
-});
+  none: {
+    gap: '0px',
+  },
+  xs: {
+    gap: spacing.xs,
+  },
+  sm: {
+    gap: spacing.sm,
+  },
+  md: {
+    gap: spacing.md,
+  },
+  lg: {
+    gap: spacing.lg,
+  },
+  xl: {
+    gap: spacing.xl,
+  },
+})
 
 const alignmentStyles = stylex.create({
-	start: {
-		alignment: "flex-start",
-	},
-	center: {
-		alignment: "center",
-	},
-	end: {
-		alignment: "flex-end",
-	},
-	baseline: {
-		alignment: "baseline",
-	},
-});
+  start: {
+    alignment: 'flex-start',
+  },
+  center: {
+    alignment: 'center',
+  },
+  end: {
+    alignment: 'flex-end',
+  },
+  baseline: {
+    alignment: 'baseline',
+  },
+})
 
 const justifyStyles = stylex.create({
-	start: {
-		justify: "flex-start",
-	},
-	center: {
-		justify: "center",
-	},
-	end: {
-		justify: "flex-end",
-	},
-	spread: {
-		justify: "space-between",
-	},
-});
+  start: {
+    justify: 'flex-start',
+  },
+  center: {
+    justify: 'center',
+  },
+  end: {
+    justify: 'flex-end',
+  },
+  spread: {
+    justify: 'space-between',
+  },
+})
 
 const flexStyles = stylex.create({
-	full: {
-		flex: "1 1 0%",
-	},
-	auto: {
-		flex: "1 1 auto",
-	},
-	initial: {
-		flex: "0 1 auto",
-	},
-	none: {
-		flex: "none",
-	},
-});
+  full: {
+    flex: '1 1 0%',
+  },
+  auto: {
+    flex: '1 1 auto',
+  },
+  initial: {
+    flex: '0 1 auto',
+  },
+  none: {
+    flex: 'none',
+  },
+})
 
 const wrapStyles = stylex.create({
-	wrap: {
-		flexWrap: "wrap",
-	},
-	noWrap: {
-		flexWrap: "nowrap",
-	},
-	reverse: {
-		flexWrap: "wrap-reverse",
-	},
-});
+  wrap: {
+    flexWrap: 'wrap',
+  },
+  noWrap: {
+    flexWrap: 'nowrap',
+  },
+  reverse: {
+    flexWrap: 'wrap-reverse',
+  },
+})
 
 export interface FlexProps
-	extends Omit<React.HTMLAttributes<HTMLDivElement>, "style">,
-		React.PropsWithChildren {
-	orientation?: keyof typeof orientationStyles;
-	alignment?: keyof typeof alignmentStyles;
-	justify?: keyof typeof justifyStyles;
-	gap?: keyof typeof gapStyles;
-	inline?: boolean;
-	fit?: boolean;
-	flex?: keyof typeof flexStyles;
-	wrap?: keyof typeof wrapStyles;
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>,
+    React.PropsWithChildren {
+  orientation?: keyof typeof orientationStyles
+  alignment?: keyof typeof alignmentStyles
+  justify?: keyof typeof justifyStyles
+  gap?: keyof typeof gapStyles
+  inline?: boolean
+  fit?: boolean
+  flex?: keyof typeof flexStyles
+  wrap?: keyof typeof wrapStyles
 
-	// @TODO is this a good idea to override the html attribute?
-	style?: StyleXStyles;
-	asChild?: boolean;
+  // @TODO is this a good idea to override the html attribute?
+  style?: StyleXStyles
+  asChild?: boolean
 }
 
 export const Flex = forwardRef<HTMLDivElement, FlexProps>(
-	(
-		{
-			orientation,
-			alignment,
-			justify,
-			gap,
-			inline,
-			fit,
-			flex,
-			wrap,
-			asChild,
-			className,
-			style,
-			children,
-			...props
-		},
-		ref,
-	) => {
-		const Comp = asChild ? Slot : "div";
-		return (
-			<Comp
-				ref={ref}
-				{...stylex.props(
-					styles.base,
-					orientation != null && orientationStyles[orientation],
-					alignment != null && alignmentStyles[alignment],
-					justify != null && justifyStyles[justify],
-					gap != null && gapStyles[gap],
-					inline && styles.isInline,
-					fit && styles.fit,
-					flex != null && flexStyles[flex],
-					wrap != null && wrapStyles[wrap],
-					style,
-				)}
-				{...props}
-			>
-				{children}
-			</Comp>
-		);
-	},
-);
-Flex.displayName = "@urban-ui/flex";
+  (
+    {
+      orientation,
+      alignment,
+      justify,
+      gap,
+      inline,
+      fit,
+      flex,
+      wrap,
+      asChild,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'div'
+    return (
+      <Comp
+        ref={ref}
+        {...stylex.props(
+          styles.base,
+          orientation != null && orientationStyles[orientation],
+          alignment != null && alignmentStyles[alignment],
+          justify != null && justifyStyles[justify],
+          gap != null && gapStyles[gap],
+          inline && styles.isInline,
+          fit && styles.fit,
+          flex != null && flexStyles[flex],
+          wrap != null && wrapStyles[wrap],
+          style,
+        )}
+        {...props}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+Flex.displayName = '@urban-ui/flex'

packages/layout/flex/src/index.test.tsx

@@ -1,10 +1,10 @@
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import { render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import { render, screen } from '@testing-library/react'
 
-import { GlobalRegistrator } from "@happy-dom/global-registrator";
-import inject from "@stylexjs/dev-runtime";
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+import inject from '@stylexjs/dev-runtime'
 
-GlobalRegistrator.register();
+GlobalRegistrator.register()
 
 // console.log(inject);
 // inject({
@@ -15,7 +15,7 @@ GlobalRegistrator.register();
 // 	styleResolution: "application-order",
 // });
 
-import { Flex } from "./index.ts";
+import { Flex } from './index'
 
 // beforeEach(() => {
 // 	inject({
@@ -27,16 +27,16 @@ import { Flex } from "./index.ts";
 // 	});
 // });
 
-describe("flex", () => {
-	test("Forwards the test-id", () => {
-		// const output = render(<Flex data-testid="some-id" />);
-		// console.log(Flex);
+describe('flex', () => {
+  test('Forwards the test-id', () => {
+    // const output = render(<Flex data-testid="some-id" />);
+    // console.log(Flex);
 
-		document.body.innerHTML = "<button>My button</button>";
-		const button = document.querySelector("button");
-		expect(button?.innerText).toEqual("My button");
+    document.body.innerHTML = '<button>My button</button>'
+    const button = document.querySelector('button')
+    expect(button?.innerText).toEqual('My button')
 
-		const foo = 5;
-		expect(foo).toBe(5);
-	});
-});
+    const foo = 5
+    expect(foo).toBe(5)
+  })
+})

packages/layout/flex/src/index.ts

@@ -1,2 +1,2 @@
-export type { FlexProps } from "./flex.tsx";
-export { Flex } from "./flex.tsx";
+export type { FlexProps } from './flex'
+export { Flex } from './flex'

packages/layout/flex/tsconfig.json

@@ -1,8 +1,6 @@
 {
-	"extends": "config-ts/react-library.json",
+	"extends": "config-ts/library.json",
 	"compilerOptions": {
-		"baseUrl": ".",
-		"rootDir": "src"
 	},
 	"include": ["src"],
 	"exclude": ["dist", "build", "node_modules"]