From d266119a12cb2c68ab603943d1d9e6aed995811f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebasti=C3=A1n=20Garc=C3=ADa?= Date: Fri, 31 May 2024 11:55:29 -0500 Subject: [PATCH] feat: create context with *use client* directive (#333) --- .npmrc | 2 +- apps/playground/app/layout.tsx | 7 +- apps/playground/app/page.tsx | 23 +--- apps/playground/components/playground.tsx | 7 - apps/playground/package.json | 2 +- apps/playground/tailwind.config.ts | 2 +- package.json | 4 +- packages/system/package.json | 2 + packages/system/src/context.ts | 52 ++++++++ packages/system/src/create-provider.ts | 8 ++ packages/system/src/index.ts | 10 +- packages/system/src/provider.tsx | 14 ++ .../system/{types/index.d.ts => src/types.ts} | 6 +- packages/system/src/utils.ts | 42 ++++++ packages/system/tsconfig.json | 8 +- packages/system/tsup.config.ts | 2 +- packages/theme/src/base.ts | 4 +- packages/theme/src/colors/index.ts | 2 +- packages/theme/src/config.ts | 2 +- packages/theme/src/create-plugin.ts | 2 +- packages/theme/src/tailwindcss.ts | 36 ++--- packages/theme/src/types.ts | 126 ++++++++++++++++++ packages/theme/tsconfig.json | 7 - packages/theme/types/config.d.ts | 29 ---- packages/theme/types/index.d.ts | 14 -- packages/theme/types/theme.d.ts | 67 ---------- packages/theme/types/utils.d.ts | 32 ----- packages/ui/src/index.ts | 4 +- pnpm-lock.yaml | 84 ++++++------ 29 files changed, 339 insertions(+), 261 deletions(-) delete mode 100644 apps/playground/components/playground.tsx create mode 100644 packages/system/src/context.ts create mode 100644 packages/system/src/create-provider.ts create mode 100644 packages/system/src/provider.tsx rename packages/system/{types/index.d.ts => src/types.ts} (90%) create mode 100644 packages/system/src/utils.ts create mode 100644 packages/theme/src/types.ts delete mode 100644 packages/theme/types/config.d.ts delete mode 100644 packages/theme/types/index.d.ts delete mode 100644 packages/theme/types/theme.d.ts delete mode 100644 packages/theme/types/utils.d.ts diff --git a/.npmrc b/.npmrc index 4c48531..516948c 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,2 @@ strict-peer-dependencies=false -enable-pre-post-scripts=true \ No newline at end of file +enable-pre-post-scripts=true diff --git a/apps/playground/app/layout.tsx b/apps/playground/app/layout.tsx index e894af8..d4f9858 100644 --- a/apps/playground/app/layout.tsx +++ b/apps/playground/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from 'next' +import { OpenUIProvider } from '@openlabs/ui' import { Inter } from 'next/font/google' import './globals.css' @@ -16,7 +17,11 @@ export default function RootLayout({ }>) { return ( - {children} + + + {children} + + ) } diff --git a/apps/playground/app/page.tsx b/apps/playground/app/page.tsx index dfcb944..bf36f54 100644 --- a/apps/playground/app/page.tsx +++ b/apps/playground/app/page.tsx @@ -1,26 +1,9 @@ import { Button } from '@openlabs/ui' -import Playground from '@/components/playground' export default function Home() { return ( - -

Zone game

-
- ------------------------------------- -
- - Down here is the playground - -
- {/* - * The playground component is a wrapper that applies some styles to its children. This is a good example of how to create a reusable component in Next.js. - - Rules - - Test UI components in isolation - - Add the component to the page.tsx file - - Remove the component from the page.tsx files - */} - - +
+ +
) } diff --git a/apps/playground/components/playground.tsx b/apps/playground/components/playground.tsx deleted file mode 100644 index beb0ccd..0000000 --- a/apps/playground/components/playground.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Playground({ children }: { children: React.ReactNode }) { - return ( -
- {children} -
- ) -} diff --git a/apps/playground/package.json b/apps/playground/package.json index 1840c55..e2bfd53 100644 --- a/apps/playground/package.json +++ b/apps/playground/package.json @@ -1,5 +1,5 @@ { - "name": "@openlabs/playground", + "name": "playground", "version": "0.1.0", "private": true, "scripts": { diff --git a/apps/playground/tailwind.config.ts b/apps/playground/tailwind.config.ts index 502c311..d5a044c 100644 --- a/apps/playground/tailwind.config.ts +++ b/apps/playground/tailwind.config.ts @@ -6,7 +6,7 @@ const config: Config = { './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', - './node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}', + './node_modules/@openlabs/theme/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: {}, diff --git a/package.json b/package.json index 18be51d..75da6a5 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,14 @@ "scripts": { "dev": "pnpm web", "lint": "eslint . --fix", - "dev:playground": "turbo dev --filter=@openlabs/playground", + "dev:playground": "turbo dev --filter=playground", "dev:web": "turbo dev --filter=@openlabs/web", "sb": "pnpm --filter @openlabs/storybook dev --filter @openlabs/web", "clean": "rimraf .turbo pnpm-lock.yaml node_modules", "turbo:graph": "pnpm build --graph=dependency-graph.png", "clean:lock": "rimraf ./pnpm-lock.yaml", "compile": "turbo compile --filter=!@openlabs/web --filter=!@openlabs/storybook", - "build": "turbo build --filter=!@openlabs/storybook --filter=!@openlabs/playground --filter=!@openlabs/web", + "build": "turbo build --filter=!@openlabs/storybook --filter=!playground --filter=!@openlabs/web", "build:components": "turbo build --filter=@openlabs/ui", "build:web": "turbo build --filter=@openlabs/web", "postinstall": "esno ./.github/prepare.ts && pnpm --filter @openlabs/theme build" diff --git a/packages/system/package.json b/packages/system/package.json index 8e5903d..f0b926b 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -41,6 +41,8 @@ }, "devDependencies": { "@openlabs/tsconfig": "workspace:*", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", "tsup": "^8.0.2", diff --git a/packages/system/src/context.ts b/packages/system/src/context.ts new file mode 100644 index 0000000..5ff8dc7 --- /dev/null +++ b/packages/system/src/context.ts @@ -0,0 +1,52 @@ +import * as React from 'react' + +export interface CreateContextOptions { + /** + * If `true`, React will throw if context is `null` or `undefined` + * In some cases, you might want to support nested context, so you can set it to `false` + */ + strict?: boolean + /** + * Error message to throw if the context is `undefined` + */ + errorMessage?: string + /** + * The display name of the context + */ + name?: string +} + +export type CreateContextReturn = [React.Provider, () => T, React.Context] + +/** + * Creates a named context, provider, and hook. + * + * @param options create context options + */ +export function createContext(options: CreateContextOptions = {}) { + const { + strict = true, + errorMessage = 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider', + name, + } = options + + const Context = React.createContext(undefined) + + Context.displayName = name + + function useContext() { + const context = React.useContext(Context) + + if (!context && strict) { + const error = new Error(errorMessage) + + error.name = 'ContextError' + Error.captureStackTrace?.(error, useContext) + throw error + } + + return context + } + + return [Context.Provider, useContext, Context] as CreateContextReturn +} diff --git a/packages/system/src/create-provider.ts b/packages/system/src/create-provider.ts new file mode 100644 index 0000000..3a8af82 --- /dev/null +++ b/packages/system/src/create-provider.ts @@ -0,0 +1,8 @@ +import { createContext } from './context' + +export interface ProviderContextProps {} + +export const [ProviderContext, useProviderContext] = createContext({ + name: 'ProviderContext', + strict: false, +}) diff --git a/packages/system/src/index.ts b/packages/system/src/index.ts index 59d1898..7683d43 100644 --- a/packages/system/src/index.ts +++ b/packages/system/src/index.ts @@ -12,4 +12,12 @@ export type { Merge, HTMLOpenUIProps, PropGetter, -} from '@system/types' +} from './types' + +export { forwardRef, isOpenUIEl, toIterator } from './utils' + +export type { OpenUIProviderProps } from './provider' +export type { ProviderContextProps } from './create-provider' + +export { OpenUIProvider } from './provider' +export { ProviderContext, useProviderContext } from './create-provider' diff --git a/packages/system/src/provider.tsx b/packages/system/src/provider.tsx new file mode 100644 index 0000000..ad5f8dd --- /dev/null +++ b/packages/system/src/provider.tsx @@ -0,0 +1,14 @@ +import type { ProviderContextProps } from './create-provider' +import { ProviderContext } from './create-provider' + +export interface OpenUIProviderProps extends ProviderContextProps { + children: React.ReactNode +} + +export const OpenUIProvider: React.FC = ({ children }) => { + return ( + + {children} + + ) +} diff --git a/packages/system/types/index.d.ts b/packages/system/src/types.ts similarity index 90% rename from packages/system/types/index.d.ts rename to packages/system/src/types.ts index 89ce480..60ac77b 100644 --- a/packages/system/types/index.d.ts +++ b/packages/system/src/types.ts @@ -28,11 +28,7 @@ export type MergeWithAs< as?: AsComponent } -export interface InternalForwardRefRenderFunction< - Component extends As, - Props extends object = object, - OmitKeys extends keyof any = never, -> { +export interface InternalForwardRefRenderFunction { ( props: MergeWithAs< React.ComponentPropsWithoutRef, diff --git a/packages/system/src/utils.ts b/packages/system/src/utils.ts new file mode 100644 index 0000000..d7df541 --- /dev/null +++ b/packages/system/src/utils.ts @@ -0,0 +1,42 @@ +import type * as React from 'react' +import { forwardRef as baseForwardRef } from 'react' +import type { + As, + InternalForwardRefRenderFunction, + PropsOf, + RightJoinProps, +} from './types' + +export function forwardRef( + component: React.ForwardRefRenderFunction, Props> & { as?: As }>, +) { + return baseForwardRef(component) as InternalForwardRefRenderFunction +} + +export function toIterator(obj: any) { + return { + ...obj, + [Symbol.iterator]() { + const keys = Object.keys(this) + let index = 0 + + return { + next: () => { + if (index >= keys.length) { + return { done: true } + } + const key = keys[index] + const value = this[key] + + index++ + + return { value: { key, value }, done: false } + }, + } + }, + } +} + +export function isOpenUIEl(component: React.ReactComponentElement) { + return !!component.type?.render?.displayName?.includes('OpenUI') +} diff --git a/packages/system/tsconfig.json b/packages/system/tsconfig.json index 88584e8..9ebc3ca 100644 --- a/packages/system/tsconfig.json +++ b/packages/system/tsconfig.json @@ -1,11 +1,5 @@ { - "extends": "@openlabs/tsconfig/base.json", - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@system/types": ["types/index.d.ts"] - } - }, + "extends": "@openlabs/tsconfig/react-lib.json", "include": ["."], "exclude": ["dist", "build", "node_modules"] } diff --git a/packages/system/tsup.config.ts b/packages/system/tsup.config.ts index 1db8723..818a744 100644 --- a/packages/system/tsup.config.ts +++ b/packages/system/tsup.config.ts @@ -2,7 +2,7 @@ import { defineConfig } from 'tsup' export default defineConfig({ name: 'system', - entry: ['src/index.ts'], + entry: ['./src/index.ts'], clean: true, target: 'es2019', format: ['cjs', 'esm'], diff --git a/packages/theme/src/base.ts b/packages/theme/src/base.ts index 66c97bb..2319dee 100644 --- a/packages/theme/src/base.ts +++ b/packages/theme/src/base.ts @@ -1,6 +1,6 @@ -import type { LayoutTheme } from '@theme/types' +import type { LayoutTheme } from './types' -export const defatulTheme: LayoutTheme = { +export const baseTheme: LayoutTheme = { fontSize: { small: '0.875rem', medium: '1rem', diff --git a/packages/theme/src/colors/index.ts b/packages/theme/src/colors/index.ts index 85bd48f..854afb6 100644 --- a/packages/theme/src/colors/index.ts +++ b/packages/theme/src/colors/index.ts @@ -1,4 +1,4 @@ -import type { BaseColors } from '@theme/types' +import type { BaseColors } from '../types' export const colors: BaseColors = { light: { diff --git a/packages/theme/src/config.ts b/packages/theme/src/config.ts index b8ede83..86c46fa 100644 --- a/packages/theme/src/config.ts +++ b/packages/theme/src/config.ts @@ -7,7 +7,7 @@ import Color from 'color' import kebabCase from 'lodash.kebabcase' import mapKeys from 'lodash.mapkeys' -import type { ConfigTheme, DefaultThemeType, Resolved } from '@theme/types' +import type { ConfigTheme, DefaultThemeType, Resolved } from './types' import { flattenThemeObject } from './utils/functions' const parsedColorsCache: Record = {} diff --git a/packages/theme/src/create-plugin.ts b/packages/theme/src/create-plugin.ts index c228ca6..711f56c 100644 --- a/packages/theme/src/create-plugin.ts +++ b/packages/theme/src/create-plugin.ts @@ -1,5 +1,5 @@ import plugin from 'tailwindcss/plugin.js' -import type { DefaultThemeType } from '@theme/types' +import type { DefaultThemeType } from './types' import type { ConfigThemes } from './tailwindcss' import { config } from './config' import { animations, baseStyles, tailwind, utilities } from './theme' diff --git a/packages/theme/src/tailwindcss.ts b/packages/theme/src/tailwindcss.ts index a0337e9..3e8c47b 100644 --- a/packages/theme/src/tailwindcss.ts +++ b/packages/theme/src/tailwindcss.ts @@ -1,12 +1,12 @@ import type plugin from 'tailwindcss/plugin.js' -import type { ConfigTheme, OpenUIPluginConfig } from '@theme/types' import deepMerge from 'deepmerge' import get from 'lodash.get' import omit from 'lodash.omit' import forEach from 'lodash.foreach' +import type { ConfigTheme, OpenUIPluginConfig } from './types' +import { baseTheme } from './base' import { darkTheme, - defatulTheme, lightTheme, colors as semanticColors, } from './theme' @@ -26,20 +26,20 @@ export function openui(config: OpenUIPluginConfig = {}): ReturnType { - const defaultExtensionTheme = extend && isBaseTheme(extend) ? extend : defaultExtendTheme + const baseTheme = extend && isBaseTheme(extend) ? extend : defaultExtendTheme if (colors && typeof colors === 'object') - otherThemes[themeName].colors = deepMerge(semanticColors[defaultExtensionTheme], colors) + otherThemes[themeName].colors = deepMerge(semanticColors[baseTheme], colors) if (layout && typeof layout === 'object') - otherThemes[themeName].layout = deepMerge(extend ? mergedThemeLayouts[extend] : mergedLayout, layout) + otherThemes[themeName].layout = deepMerge(extend ? baseLayouts[extend] : defaultLayoutObj, layout) }) const light: ConfigTheme = { - layout: deepMerge(mergedThemeLayouts.light, get(themeObject, 'light.layout', {})), - colors: deepMerge(semanticColors.light, customLightColors), + layout: deepMerge(baseLayouts.light, get(themeObject, 'light.layout', {})), + colors: deepMerge(semanticColors.light, userLightColors), } - const dark: ConfigTheme = { - layout: deepMerge(mergedThemeLayouts.dark, get(themeObject, 'dark.layout'), {}), - colors: deepMerge(semanticColors.dark, customDarkColors), + const dark = { + layout: deepMerge(baseLayouts.dark, get(themeObject, 'dark.layout', {})), + colors: deepMerge(semanticColors.dark, userDarkColors), } const themes = { diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts new file mode 100644 index 0000000..3142d16 --- /dev/null +++ b/packages/theme/src/types.ts @@ -0,0 +1,126 @@ +import type { ConfigThemes } from './tailwindcss' + +export interface OpenUIPluginConfig { + /** + * The prefix for the css variables. + * @default "openui" + */ + prefix?: string + /** + * Common layout definitions. These definitions are applied to all themes. + */ + layout?: LayoutTheme + /** + * The theme definitions. + */ + themes?: ConfigThemes + /** + * The default theme to use is light + * @default "light" + */ + defaultTheme?: DefaultThemeType + /** + * The default theme to extend. + * @default "light" + */ + defaultExtendTheme?: DefaultThemeType +} + +export interface LayoutTheme { + /** + * The default font size applied across the components. + * + * @default + * { + * small: "0.875rem", + * medium: "1rem", + * large: "1.125rem" + * } + */ + fontSize?: BaseUnit + /** + * The default line height applied across the components. + * + * @default + * { + * small: "1.25rem", + * medium: "1.5rem", + * large: "1.75rem", + * DEFAULT: "1.5rem", + * } + */ + lineHeight?: BaseUnit + /** + * The default radius applied across the components. + * we recommend to use `rem` units. + * + * @default + * { + * small: 'calc(0.5rem - 2px)', + * medium: 'calc(0.5rem - 4px)', + * lg: ' 0.5rem', + *}, + */ + radius?: BaseUnit + /** + * The border width applied across the components. + * @default + * { + * small: '0.063rem', + * medium: '0.125rem', + * lg: '0.188rem', + * } + * + */ + borderWidth?: BaseUnit + /** + * The box shadow applied across the components. + * + * @default + * { + * small: 0 1px 2px 0 rgb(0 0 0 / 0.05), + * medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), + * large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), + * } + */ + boxShadow?: BaseUnit +} + +export interface ConfigTheme { + extend?: 'light' | 'dark' + layout?: LayoutTheme + colors?: Partial +} + +export type DefaultThemeType = 'light' | 'dark' +export type Color = | Partial<{ foreground: string, DEFAULT: string }> | string + +export interface Colors { + background: Color + foreground: Color + default: Color + primary: Color + success: Color + warn: Color + error: Color +} + +export interface BaseColors { + light: Colors + dark: Colors +} +export interface BaseUnit { + small?: string + medium?: string + large?: string +} + +export interface OpacityValue { opacityValue: string, opacityVariable: string } + +export type OpacityColor = ({ opacityValue, opacityVariable }: OpacityValue) => string + +export interface Resolved { + variants: { name: string, definition: string[] }[] + utilities: Record> + colors: Record +} diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json index b9ba762..c19765c 100644 --- a/packages/theme/tsconfig.json +++ b/packages/theme/tsconfig.json @@ -1,12 +1,5 @@ { "extends": "@openlabs/tsconfig/base.json", - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"], - "@theme/types": ["./types/index.d.ts"] - } - }, "include": ["."], "exclude": ["dist", "build", "node_modules"] } diff --git a/packages/theme/types/config.d.ts b/packages/theme/types/config.d.ts deleted file mode 100644 index 2cc78ac..0000000 --- a/packages/theme/types/config.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { LayoutTheme } from './theme' -import type { DefaultThemeType } from './utils' -import type { ConfigThemes } from '@/tailwindcss' - -export interface OpenUIPluginConfig { - /** - * The prefix for the css variables. - * @default "openui" - */ - prefix?: string - /** - * Common layout definitions. These definitions are applied to all themes. - */ - layout?: LayoutTheme - /** - * The theme definitions. - */ - themes?: ConfigThemes - /** - * The default theme to use is light - * @default "light" - */ - defaultTheme?: DefaultThemeType - /** - * The default theme to extend. - * @default "light" - */ - defaultExtendTheme?: DefaultThemeType -} diff --git a/packages/theme/types/index.d.ts b/packages/theme/types/index.d.ts deleted file mode 100644 index 781144f..0000000 --- a/packages/theme/types/index.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -export type { - DefaultThemeType, - Color, - Colors, - BaseColors, - BaseUnit, - OpacityValue, - OpacityColor, - Resolved, -} from './utils' - -export type { ConfigTheme, LayoutTheme } from './theme' - -export type { OpenUIPluginConfig } from './config' diff --git a/packages/theme/types/theme.d.ts b/packages/theme/types/theme.d.ts deleted file mode 100644 index d6ba8f8..0000000 --- a/packages/theme/types/theme.d.ts +++ /dev/null @@ -1,67 +0,0 @@ -import type { BaseUnit, Colors } from './utils' - -export interface LayoutTheme { - /** - * The default font size applied across the components. - * - * @default - * { - * small: "0.875rem", - * medium: "1rem", - * large: "1.125rem" - * } - */ - fontSize?: BaseUnit - /** - * The default line height applied across the components. - * - * @default - * { - * small: "1.25rem", - * medium: "1.5rem", - * large: "1.75rem", - * DEFAULT: "1.5rem", - * } - */ - lineHeight?: FontThemeUnit - /** - * The default radius applied across the components. - * we recommend to use `rem` units. - * - * @default - * { - * small: 'calc(0.5rem - 2px)', - * medium: 'calc(0.5rem - 4px)', - * lg: ' 0.5rem', - *}, - */ - radius?: BaseUnit - /** - * The border width applied across the components. - * @default - * { - * small: '0.063rem', - * medium: '0.125rem', - * lg: '0.188rem', - * } - * - */ - borderWidth?: BaseUnit - /** - * The box shadow applied across the components. - * - * @default - * { - * small: 0 1px 2px 0 rgb(0 0 0 / 0.05), - * medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), - * large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), - * } - */ - boxShadow?: BaseUnit -} - -export interface ConfigTheme { - extend?: 'light' | 'dark' - layout?: LayoutTheme - colors?: Partial -} diff --git a/packages/theme/types/utils.d.ts b/packages/theme/types/utils.d.ts deleted file mode 100644 index e00be64..0000000 --- a/packages/theme/types/utils.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -export type DefaultThemeType = 'light' | 'dark' -export type Color = | Partial<{ foreground: string, DEFAULT: string }> | string - -export interface Colors { - background: Color - foreground: Color - default: Color - primary: Color - success: Color - warn: Color - error: Color -} - -export interface BaseColors { - light: Colors - dark: Colors -} -export interface BaseUnit { - small?: string - medium?: string - large?: string -} - -export interface OpacityValue { opacityValue: string, opacityVariable: string } - -export type OpacityColor = ({ opacityValue, opacityVariable }: OpacityValue) => string - -export interface Resolved { - variants: { name: string, definition: string[] }[] - utilities: Record> - colors: Record -} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index b36002b..d1e5e32 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,7 +1,5 @@ -'use client' - -export * from '@openlabs/system' export * from '@openlabs/theme' +export * from '@openlabs/system' export * from './components/accordion' export * from './components/alert' export * from './components/aspect-ratio' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fe48309..d20deb6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,7 +71,7 @@ importers: version: 3.4.1 typescript: specifier: ^5 - version: 5.4.2 + version: 5.4.5 apps/storybook: dependencies: @@ -265,13 +265,19 @@ importers: version: 3.4.1 typescript: specifier: ^5 - version: 5.4.2 + version: 5.4.5 packages/system: devDependencies: '@openlabs/tsconfig': specifier: workspace:* version: link:../tsconfig + '@types/react': + specifier: ^18.3.3 + version: 18.3.3 + '@types/react-dom': + specifier: ^18.3.0 + version: 18.3.0 react: specifier: ^18.2.0 version: 18.3.1 @@ -440,10 +446,10 @@ importers: version: 18.3.0 tsup: specifier: ^8.0.2 - version: 8.0.2(postcss@8.4.38)(typescript@5.4.2) + version: 8.0.2(postcss@8.4.38)(typescript@5.4.5) typescript: specifier: ^5.4.2 - version: 5.4.2 + version: 5.4.5 packages: @@ -4035,8 +4041,8 @@ packages: supports-color: optional: true - debug@4.3.4: - resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + debug@4.3.5: + resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==} engines: {node: '>=6.0'} peerDependencies: supports-color: '*' @@ -6579,8 +6585,8 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} - recast@0.23.7: - resolution: {integrity: sha512-MpQlLZVpqbbxYcqEjwpRWo88sGvjOYoXptySz710RuddNMHx+wPkoNX6YyLZJlXAh5VZr1qmPrTwcTuFMh0Lag==} + recast@0.23.8: + resolution: {integrity: sha512-D8izEmRtY34O+B5k2kgNmPx4b/be4MGPGFiNzWUGtezDCWDyj/1w1uQQvzySRzAO/b+6TD05FwGPuYR4X52sVw==} engines: {node: '>= 4'} refa@0.12.1: @@ -7786,7 +7792,7 @@ snapshots: '@babel/traverse': 7.24.6 '@babel/types': 7.24.6 convert-source-map: 2.0.0 - debug: 4.3.4 + debug: 4.3.5 gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -7841,7 +7847,7 @@ snapshots: '@babel/core': 7.24.6 '@babel/helper-compilation-targets': 7.24.6 '@babel/helper-plugin-utils': 7.24.6 - debug: 4.3.4 + debug: 4.3.5 lodash.debounce: 4.0.8 resolve: 1.22.8 transitivePeerDependencies: @@ -8525,7 +8531,7 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.6 '@babel/parser': 7.24.6 '@babel/types': 7.24.6 - debug: 4.3.4 + debug: 4.3.5 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -8705,7 +8711,7 @@ snapshots: '@esbuild-plugins/node-resolve@0.1.4(esbuild@0.20.2)': dependencies: '@types/resolve': 1.20.6 - debug: 4.3.4 + debug: 4.3.5 esbuild: 0.20.2 escape-string-regexp: 4.0.0 resolve: 1.22.8 @@ -8926,7 +8932,7 @@ snapshots: '@eslint/eslintrc@2.1.4': dependencies: ajv: 6.12.6 - debug: 4.3.4 + debug: 4.3.5 espree: 9.6.1 globals: 13.24.0 ignore: 5.3.1 @@ -8940,7 +8946,7 @@ snapshots: '@eslint/eslintrc@3.1.0': dependencies: ajv: 6.12.6 - debug: 4.3.4 + debug: 4.3.5 espree: 10.0.1 globals: 14.0.0 ignore: 5.3.1 @@ -8991,7 +8997,7 @@ snapshots: '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 - debug: 4.3.4 + debug: 4.3.5 minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -10531,7 +10537,7 @@ snapshots: jscodeshift: 0.15.2(@babel/preset-env@7.24.6(@babel/core@7.24.6)) lodash: 4.17.21 prettier: 2.8.8 - recast: 0.23.7 + recast: 0.23.8 transitivePeerDependencies: - supports-color @@ -10660,7 +10666,7 @@ snapshots: '@storybook/csf': 0.1.7 '@storybook/types': 7.6.19 fs-extra: 11.2.0 - recast: 0.23.7 + recast: 0.23.8 ts-dedent: 2.2.0 transitivePeerDependencies: - supports-color @@ -11197,7 +11203,7 @@ snapshots: '@typescript-eslint/types': 7.11.0 '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5) '@typescript-eslint/visitor-keys': 7.11.0 - debug: 4.3.4 + debug: 4.3.5 eslint: 8.57.0 optionalDependencies: typescript: 5.4.5 @@ -11213,7 +11219,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5) '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5) - debug: 4.3.4 + debug: 4.3.5 eslint: 8.57.0 ts-api-utils: 1.3.0(typescript@5.4.5) optionalDependencies: @@ -11227,7 +11233,7 @@ snapshots: dependencies: '@typescript-eslint/types': 7.11.0 '@typescript-eslint/visitor-keys': 7.11.0 - debug: 4.3.4 + debug: 4.3.5 globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.4 @@ -11853,7 +11859,7 @@ snapshots: dependencies: ms: 2.1.3 - debug@4.3.4: + debug@4.3.5: dependencies: ms: 2.1.2 @@ -11922,7 +11928,7 @@ snapshots: detect-port@1.6.1: dependencies: address: 1.2.2 - debug: 4.3.4 + debug: 4.3.5 transitivePeerDependencies: - supports-color @@ -12014,7 +12020,7 @@ snapshots: esbuild-register@3.5.0(esbuild@0.18.20): dependencies: - debug: 4.3.4 + debug: 4.3.5 esbuild: 0.18.20 transitivePeerDependencies: - supports-color @@ -12185,7 +12191,7 @@ snapshots: eslint-plugin-import-x@0.5.1(eslint@8.57.0)(typescript@5.4.5): dependencies: '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5) - debug: 4.3.4 + debug: 4.3.5 doctrine: 3.0.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 @@ -12203,7 +12209,7 @@ snapshots: '@es-joy/jsdoccomment': 0.43.1 are-docs-informative: 0.0.2 comment-parser: 1.4.1 - debug: 4.3.4 + debug: 4.3.5 escape-string-regexp: 4.0.0 eslint: 8.57.0 esquery: 1.5.0 @@ -12269,7 +12275,7 @@ snapshots: eslint-plugin-toml@0.11.0(eslint@8.57.0): dependencies: - debug: 4.3.4 + debug: 4.3.5 eslint: 8.57.0 eslint-compat-utils: 0.5.0(eslint@8.57.0) lodash: 4.17.21 @@ -12332,7 +12338,7 @@ snapshots: eslint-plugin-yml@1.14.0(eslint@8.57.0): dependencies: - debug: 4.3.4 + debug: 4.3.5 eslint: 8.57.0 eslint-compat-utils: 0.5.0(eslint@8.57.0) lodash: 4.17.21 @@ -12370,7 +12376,7 @@ snapshots: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.4 + debug: 4.3.5 doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -13044,7 +13050,7 @@ snapshots: https-proxy-agent@4.0.0: dependencies: agent-base: 5.1.1 - debug: 4.3.4 + debug: 4.3.5 transitivePeerDependencies: - supports-color @@ -13319,7 +13325,7 @@ snapshots: micromatch: 4.0.7 neo-async: 2.6.2 node-dir: 0.1.17 - recast: 0.23.7 + recast: 0.23.8 temp: 0.8.4 write-file-atomic: 2.4.3 optionalDependencies: @@ -13393,7 +13399,7 @@ snapshots: dependencies: chalk: 5.3.0 commander: 12.1.0 - debug: 4.3.4 + debug: 4.3.5 execa: 8.0.1 lilconfig: 3.1.1 listr2: 8.2.1 @@ -14265,7 +14271,7 @@ snapshots: micromark@2.11.4: dependencies: - debug: 4.3.4 + debug: 4.3.5 parse-entities: 2.0.0 transitivePeerDependencies: - supports-color @@ -14273,7 +14279,7 @@ snapshots: micromark@3.2.0: dependencies: '@types/debug': 4.1.12 - debug: 4.3.4 + debug: 4.3.5 decode-named-character-reference: 1.0.2 micromark-core-commonmark: 1.1.0 micromark-factory-space: 1.1.0 @@ -14295,7 +14301,7 @@ snapshots: micromark@4.0.0: dependencies: '@types/debug': 4.1.12 - debug: 4.3.4 + debug: 4.3.5 decode-named-character-reference: 1.0.2 devlop: 1.1.0 micromark-core-commonmark: 2.0.1 @@ -14894,7 +14900,7 @@ snapshots: puppeteer-core@2.1.1: dependencies: '@types/mime-types': 2.1.4 - debug: 4.3.4 + debug: 4.3.5 extract-zip: 1.7.0 https-proxy-agent: 4.0.0 mime: 2.6.0 @@ -15044,7 +15050,7 @@ snapshots: dependencies: picomatch: 2.3.1 - recast@0.23.7: + recast@0.23.8: dependencies: ast-types: 0.16.1 esprima: 4.0.1 @@ -15819,7 +15825,7 @@ snapshots: bundle-require: 4.1.0(esbuild@0.19.12) cac: 6.7.14 chokidar: 3.6.0 - debug: 4.3.4 + debug: 4.3.5 esbuild: 0.19.12 execa: 5.1.1 globby: 11.1.0 @@ -15842,7 +15848,7 @@ snapshots: bundle-require: 4.1.0(esbuild@0.19.12) cac: 6.7.14 chokidar: 3.6.0 - debug: 4.3.4 + debug: 4.3.5 esbuild: 0.19.12 execa: 5.1.1 globby: 11.1.0 @@ -16182,7 +16188,7 @@ snapshots: vue-eslint-parser@9.4.2(eslint@8.57.0): dependencies: - debug: 4.3.4 + debug: 4.3.5 eslint: 8.57.0 eslint-scope: 7.2.2 eslint-visitor-keys: 3.4.3