diff --git a/src/context/ShellContext.tsx b/src/context/ShellContext.tsx index 0b9a028..bbd8494 100644 --- a/src/context/ShellContext.tsx +++ b/src/context/ShellContext.tsx @@ -14,18 +14,22 @@ See the License for the specific language governing permissions and limitations under the License. */ -import * as React from 'react' +import { createContext, useContext } from 'react' -export type ShellProviderValue = { +type ShellProviderValue = { isSidebarOpen: boolean setSidebarOpen: (value: boolean) => void openedOverlayId?: string setOpenedOverlayId?: (value: string | undefined) => void } -export const ShellContext = React.createContext({ +export const ShellContext = createContext({ isSidebarOpen: false, setSidebarOpen: () => void 0, openedOverlayId: undefined, setOpenedOverlayId: () => void 0, }) + +export function useShellContext() { + return useContext(ShellContext) +} diff --git a/src/docs/cookbook/FullDemo.tsx b/src/docs/cookbook/FullDemo.tsx index ce8891e..bd54287 100644 --- a/src/docs/cookbook/FullDemo.tsx +++ b/src/docs/cookbook/FullDemo.tsx @@ -19,9 +19,9 @@ import { VStack, } from '@chakra-ui/react' import { InfoIcon, UserIcon } from 'lucide-react' -import { useContext, useState } from 'react' +import { useState } from 'react' -import { Content, Header, ShellContext, Sidebar } from '@/lib' +import { Content, Header, Sidebar, useShellContext } from '@/lib' const DEMO_SIDEBAR_ITEMS = [ { @@ -101,7 +101,7 @@ export function FullDemo() { ) const [activeHeaderItem, setActiveHeaderItem] = useState(DEMO_HEADER_ITEMS[0]) - const context = useContext(ShellContext) + const context = useShellContext() return ( <> diff --git a/src/docs/cookbook/SimpleImplementation.tsx b/src/docs/cookbook/SimpleImplementation.tsx index 7f2e1e6..f88aa13 100644 --- a/src/docs/cookbook/SimpleImplementation.tsx +++ b/src/docs/cookbook/SimpleImplementation.tsx @@ -1,5 +1,5 @@ -import { ShellContainer } from '../../modules/Shell/ShellRoot' +import { ShellRoot } from '../../modules/Shell/ShellRoot' export function SimpleImplementation() { - return Hello + return Hello } diff --git a/src/lib.ts b/src/lib.ts index 8e4829d..c3606f7 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -20,8 +20,4 @@ export * from './modules/Header' export * from './modules/Sidebar' export * from './modules/Buttons' -// TODO make it a hook `useShellContext` -export { - ShellContext, - type ShellProviderValue, -} from '@/context/ShellContext' +export { useShellContext } from '@/context/ShellContext' diff --git a/src/modules/Content/index.ts b/src/modules/Content/index.ts index a417f22..6032ffd 100644 --- a/src/modules/Content/index.ts +++ b/src/modules/Content/index.ts @@ -19,10 +19,6 @@ import { ContentRoot } from './ContentRoot' // ?TODO: Remove deprecated items in the next version export const Content = { - /** - * @deprecated Use Content.Root instead - */ - Base: ContentRoot, /** * Root element for the UI Library content that positions the HTML element on the grid and provides * @requires Shell.Root - As the parent element that provides the layout / context for the Content.Root @@ -30,10 +26,4 @@ export const Content = { Root: ContentRoot, } -export type { - /** - * @deprecated use ContentRootProps instead - */ - ContentRootProps as ContentProps, - ContentRootProps, -} from './ContentRoot' +export type { ContentRootProps } from './ContentRoot' diff --git a/src/modules/Header/HeaderSidebarToggle.tsx b/src/modules/Header/HeaderSidebarToggle.tsx index 0c68f3a..611d7fb 100644 --- a/src/modules/Header/HeaderSidebarToggle.tsx +++ b/src/modules/Header/HeaderSidebarToggle.tsx @@ -16,15 +16,15 @@ limitations under the License. import { Box, type BoxProps, Icon } from '@chakra-ui/react' import { MenuIcon, XIcon } from 'lucide-react' -import { useContext, useMemo } from 'react' -import { ShellContext } from '../../context/ShellContext' +import { useMemo } from 'react' +import { useShellContext } from '../../context/ShellContext' export type HeaderSidebarToggleProps = BoxProps & {} export function HeaderSidebarToggle({ onClick, ...props }: HeaderSidebarToggleProps) { - const context = useContext(ShellContext) + const { isSidebarOpen, setSidebarOpen } = useShellContext() // biome-ignore lint/correctness/useExhaustiveDependencies: needs initial value - const wasInitiallyOpen = useMemo(() => context.isSidebarOpen, []) + const wasInitiallyOpen = useMemo(() => isSidebarOpen, []) return ( { event.preventDefault() - context.setSidebarOpen(!context.isSidebarOpen) + setSidebarOpen(!isSidebarOpen) onClick?.(event) }} aria-label={'Menu Toggle'} @@ -52,7 +52,7 @@ export function HeaderSidebarToggle({ onClick, ...props }: HeaderSidebarTogglePr diff --git a/src/modules/Header/index.ts b/src/modules/Header/index.ts index da95cf9..e9dbebc 100644 --- a/src/modules/Header/index.ts +++ b/src/modules/Header/index.ts @@ -27,41 +27,18 @@ import { HeaderSidebarToggle } from './HeaderSidebarToggle' // ?TODO: Remove deprecated items in the next version -export type { - /** - * @deprecated use `HeaderRootProps` instead - */ - HeaderRootProps as HeaderContainerProps, - HeaderRootProps, -} from './HeaderRoot' +export type { HeaderRootProps } from './HeaderRoot' export type { HeaderDividerProps } from './HeaderDivider' export type { HeaderLogoProps } from './HeaderLogo' export type { HeaderMenuProps } from './HeaderMenu' export type { HeaderMenuButtonProps } from './HeaderMenuButton' export type { HeaderMenuContentProps } from './HeaderMenuContent' -export type { - /** - * @deprecated use `HeaderMenuContentDetailsProps` instead - */ - HeaderMenuContentDetailsProps as HeaderMenuDetailsProps, - HeaderMenuContentDetailsProps, -} from './HeaderMenuContentDetails' -export type { - /** - * @deprecated use `HeaderMenuContentItemProps` instead - */ - HeaderMenuContentItemProps as HeaderMenuItemProps, - HeaderMenuContentItemProps, -} from './HeaderMenuContentItem' +export type { HeaderMenuContentDetailsProps } from './HeaderMenuContentDetails' +export type { HeaderMenuContentItemProps } from './HeaderMenuContentItem' export type { HeaderNavigationItemProps } from './HeaderNavigationItem' export type { HeaderSidebarToggleProps } from './HeaderSidebarToggle' export const Header = { - /** - * @deprecated use `Header.Root` instead - */ - Container: HeaderRoot, - /** * Root element for the header that positions the HTML element on the grid and provides * context for all header elements. @@ -110,11 +87,6 @@ export const Header = { */ MenuContent: HeaderMenuContent, - /** - * @deprecated use Header.MenuContentDetails instead - */ - MenuDetails: HeaderMenuContentDetails, - /** * Display details in the Menu Content * For example, a greeting or a user name @@ -123,11 +95,6 @@ export const Header = { */ MenuContentDetails: HeaderMenuContentDetails, - /** - * @deprecated use `Header.MenuContentItem` instead - */ - MenuItem: HeaderMenuContentItem, - /** * Render an iterative element within the Header.MenuContent item * diff --git a/src/modules/Shell/ShellRoot.tsx b/src/modules/Shell/ShellRoot.tsx index 2c52708..739b064 100644 --- a/src/modules/Shell/ShellRoot.tsx +++ b/src/modules/Shell/ShellRoot.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import { Box, Grid } from '@chakra-ui/react' -import { useContext, useMemo, useState } from 'react' +import { useMemo, useState } from 'react' import { Z_INDEX } from '../../constants/zIndex' import { ShellContext } from '../../context/ShellContext' @@ -28,90 +28,6 @@ export type ShellContainerProps = { isSidebarOpen?: boolean } -/** - * @deprecated - Use Shell.Root instead - * @returns - */ -export function ShellProvider({ - children, - isSidebarOpen: isSidebarOpenDefault = false, -}: ShellContainerProps) { - const [isSidebarOpen, setSidebarOpen] = useState(isSidebarOpenDefault) - const [openedOverlayId, setOpenedOverlayId] = useState(undefined) - - return ( - - {children} - - ) -} - -/** - * @deprecated - Use Shell.Root instead - * @returns - */ -export function ShellContainer({ children }: ShellContainerProps) { - const { isSidebarOpen, openedOverlayId } = useContext(ShellContext) - - const gridTemplateAreas = useMemo(() => { - if (isSidebarOpen) { - return ` - "header header" - "sidebar content" - ` - } - - return ` - "header" - "content" - ` - }, [isSidebarOpen]) - - const showBackdrop = useMemo(() => { - return !!openedOverlayId - }, [openedOverlayId]) - - const gridTemplateColumns = useMemo(() => { - if (isSidebarOpen) { - return '290px 1fr' - } - - return '1fr' - }, [isSidebarOpen]) - - return ( - - {children} - - {showBackdrop && ( - - )} - - ) -} - export type ShellRootProps = { children: React.ReactNode /** diff --git a/src/modules/Shell/index.ts b/src/modules/Shell/index.ts index f6e5e45..70e2516 100644 --- a/src/modules/Shell/index.ts +++ b/src/modules/Shell/index.ts @@ -14,37 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { ShellContainer, ShellProvider, ShellRoot } from './ShellRoot' +import { ShellRoot } from './ShellRoot' export const Shell = { - /** - * Provider for the entire UI Shell this should be at the top of all elements, - * even above `Shell.Root` - * - * @deprecated use `Shell.Root` instead since it provides functionality for both `Shell.Provider` and `Shell.Container` - */ - Provider: ShellProvider, - - /** - * @deprecated Use `Shell.Root` instead - */ - Container: ShellContainer, - - /** - * Root element for the shell that positions the HTML element on the grid and provides - * context for all shell elements. - */ Root: ShellRoot, } -export type { - /** - * @deprecated use `ShellRootProps` instead - */ - ShellContainerProps as ShellProps, - /** - * @deprecated use `ShellRootProps` instead - */ - ShellContainerProps as ShellProviderProps, - ShellRootProps, -} from './ShellRoot' +export type { ShellRootProps } from './ShellRoot' diff --git a/src/modules/Sidebar/Sidebar.stories.tsx b/src/modules/Sidebar/Sidebar.stories.tsx index f8d7212..81bc006 100644 --- a/src/modules/Sidebar/Sidebar.stories.tsx +++ b/src/modules/Sidebar/Sidebar.stories.tsx @@ -24,7 +24,7 @@ import { Content, Header, Shell, Sidebar } from '@/lib' // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta = { title: 'Components/Sidebar', - component: Sidebar.Container, + component: Sidebar.Root, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout layout: 'centered', @@ -33,7 +33,7 @@ const meta = { tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: {}, -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/src/modules/Sidebar/SidebarRoot.tsx b/src/modules/Sidebar/SidebarRoot.tsx index d961a1f..633274b 100644 --- a/src/modules/Sidebar/SidebarRoot.tsx +++ b/src/modules/Sidebar/SidebarRoot.tsx @@ -15,17 +15,16 @@ limitations under the License. */ import { Box, type BoxProps } from '@chakra-ui/react' -import { useContext } from 'react' import { Z_INDEX } from '../../constants/zIndex' -import { ShellContext } from '../../context/ShellContext' +import { useShellContext } from '../../context/ShellContext' export type SidebarRootProps = BoxProps & {} export function SidebarRoot({ children, ...props }: React.PropsWithChildren) { - const context = useContext(ShellContext) + const { isSidebarOpen } = useShellContext() return ( - context.isSidebarOpen && ( + isSidebarOpen && (