From 0f49a1824fe4f7c5cda6430d988322f06ce3d23d Mon Sep 17 00:00:00 2001 From: Eelco Wiersma Date: Fri, 31 Jan 2025 14:54:43 +0000 Subject: [PATCH] fix: remove incorrect imports from chakra ui --- .changeset/tough-mice-mix.md | 6 ++ .../components/grid-list/grid-list.context.ts | 3 +- .../components/sidebar/sidebar.context.tsx | 7 +- packages/saas-ui-hooks/package.json | 1 + packages/saas-ui-hooks/src/index.ts | 1 + .../saas-ui-hooks/src/use-callback-ref.ts | 2 - .../src/use-controllable-state.ts | 67 +++++++++++++++++++ packages/saas-ui-hooks/src/use-disclosure.ts | 2 - .../saas-ui-hooks/src/use-outside-click.ts | 3 +- 9 files changed, 83 insertions(+), 9 deletions(-) create mode 100644 .changeset/tough-mice-mix.md create mode 100644 packages/saas-ui-hooks/src/use-controllable-state.ts diff --git a/.changeset/tough-mice-mix.md b/.changeset/tough-mice-mix.md new file mode 100644 index 000000000..2fcaa71bb --- /dev/null +++ b/.changeset/tough-mice-mix.md @@ -0,0 +1,6 @@ +--- +'@saas-ui/hooks': patch +'@saas-ui/core': patch +--- + +Removed imports from @chakra-ui/react diff --git a/packages/saas-ui-core/src/components/grid-list/grid-list.context.ts b/packages/saas-ui-core/src/components/grid-list/grid-list.context.ts index 334e9e364..4e7447164 100644 --- a/packages/saas-ui-core/src/components/grid-list/grid-list.context.ts +++ b/packages/saas-ui-core/src/components/grid-list/grid-list.context.ts @@ -1,9 +1,8 @@ import * as React from 'react' -import { createContext } from '@chakra-ui/react' import { nextById, prevById, queryAll } from '@zag-js/dom-utils' -import { callAll, dataAttr } from '#utils' +import { callAll, createContext, dataAttr } from '#utils' interface GridListContext { id: string diff --git a/packages/saas-ui-core/src/components/sidebar/sidebar.context.tsx b/packages/saas-ui-core/src/components/sidebar/sidebar.context.tsx index 6ed3c5cf4..fd71d18e1 100644 --- a/packages/saas-ui-core/src/components/sidebar/sidebar.context.tsx +++ b/packages/saas-ui-core/src/components/sidebar/sidebar.context.tsx @@ -2,8 +2,11 @@ import { useMemo, useState } from 'react' -import { useControllableState } from '@chakra-ui/react' -import { useDisclosure, useIsMobile } from '@saas-ui/hooks' +import { + useControllableState, + useDisclosure, + useIsMobile, +} from '@saas-ui/hooks' import type { HTMLSystemProps } from '#system' import { callAll, createContext } from '#utils' diff --git a/packages/saas-ui-hooks/package.json b/packages/saas-ui-hooks/package.json index 954755b8d..887a048c1 100644 --- a/packages/saas-ui-hooks/package.json +++ b/packages/saas-ui-hooks/package.json @@ -4,6 +4,7 @@ "description": "Saas UI react hooks", "exports": { ".": { + "sui": "./src/index.ts", "require": "./dist/index.js", "types": "./dist/index.d.ts", "import": "./dist/index.mjs" diff --git a/packages/saas-ui-hooks/src/index.ts b/packages/saas-ui-hooks/src/index.ts index 69c83cef5..c24c55a5c 100644 --- a/packages/saas-ui-hooks/src/index.ts +++ b/packages/saas-ui-hooks/src/index.ts @@ -1,3 +1,4 @@ +export { useControllableState } from './use-controllable-state' export { usePromise } from './use-promise' export type { UsePromise } from './use-promise' export { useLocalStorage } from './use-local-storage' diff --git a/packages/saas-ui-hooks/src/use-callback-ref.ts b/packages/saas-ui-hooks/src/use-callback-ref.ts index c583728d8..fd8b440c7 100644 --- a/packages/saas-ui-hooks/src/use-callback-ref.ts +++ b/packages/saas-ui-hooks/src/use-callback-ref.ts @@ -1,5 +1,3 @@ -'use client' - import { useCallback, useInsertionEffect, useRef } from 'react' /** diff --git a/packages/saas-ui-hooks/src/use-controllable-state.ts b/packages/saas-ui-hooks/src/use-controllable-state.ts new file mode 100644 index 000000000..5f35e6d83 --- /dev/null +++ b/packages/saas-ui-hooks/src/use-controllable-state.ts @@ -0,0 +1,67 @@ +import { useCallback, useState } from 'react' + +import { useCallbackRef } from './use-callback-ref' + +export interface UseControllableStateProps { + /** + * The value to used in controlled mode + */ + value?: T + /** + * The initial value to be used, in uncontrolled mode + */ + defaultValue?: T | (() => T) + /** + * The callback fired when the value changes + */ + onChange?: (value: T) => void + /** + * The function that determines if the state should be updated + */ + shouldUpdate?: (prev: T, next: T) => boolean +} + +export function useControllableState(props: UseControllableStateProps) { + const { + value: valueProp, + defaultValue, + onChange, + shouldUpdate = (prev, next) => prev !== next, + } = props + const onChangeProp = useCallbackRef(onChange) + const shouldUpdateProp = useCallbackRef(shouldUpdate) + + const [valueState, setValue] = useState(defaultValue as T) + + const isControlled = valueProp !== undefined + const value = isControlled ? (valueProp as T) : valueState + + const updateValue = useCallback( + (next: React.SetStateAction) => { + const nextValue = runIfFn(next, value) + + if (!shouldUpdateProp(value, nextValue)) { + return + } + + if (!isControlled) { + setValue(nextValue) + } + + onChangeProp(nextValue) + }, + [isControlled, onChangeProp, value, shouldUpdateProp], + ) + + return [value, updateValue] as [T, React.Dispatch>] +} + +const isFunction = (value: any): value is Function => + typeof value === 'function' + +function runIfFn( + valueOrFn: T | ((...fnArgs: U[]) => T), + ...args: U[] +): T { + return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn +} diff --git a/packages/saas-ui-hooks/src/use-disclosure.ts b/packages/saas-ui-hooks/src/use-disclosure.ts index 29a584a3d..04f85db42 100644 --- a/packages/saas-ui-hooks/src/use-disclosure.ts +++ b/packages/saas-ui-hooks/src/use-disclosure.ts @@ -1,5 +1,3 @@ -'use client' - import { useCallback, useState } from 'react' import { useCallbackRef } from './use-callback-ref.ts' diff --git a/packages/saas-ui-hooks/src/use-outside-click.ts b/packages/saas-ui-hooks/src/use-outside-click.ts index 35673fd7a..3dfaa3a44 100644 --- a/packages/saas-ui-hooks/src/use-outside-click.ts +++ b/packages/saas-ui-hooks/src/use-outside-click.ts @@ -1,6 +1,7 @@ -import { useCallbackRef } from '@chakra-ui/react' import { useEffect, useRef } from 'react' +import { useCallbackRef } from './use-callback-ref' + export interface UseOutsideClickProps { /** * Whether the hook is enabled