chore/cleanup deprecations

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hivemq/ui-library",
-  "version": "0.4.2",
+  "version": "1.0.0",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/index.d.ts",

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<ShellProviderValue>({
+export const ShellContext = createContext<ShellProviderValue>({
   isSidebarOpen: false,
   setSidebarOpen: () => void 0,
   openedOverlayId: undefined,
   setOpenedOverlayId: () => void 0,
 })
+
+export function useShellContext() {
+  return useContext(ShellContext)
+}

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<HeaderItemType>(DEMO_HEADER_ITEMS[0])
 
-  const context = useContext(ShellContext)
+  const context = useShellContext()
 
   return (
     <>

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 <ShellContainer>Hello</ShellContainer>
+  return <ShellRoot>Hello</ShellRoot>
 }

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'

src/modules/Content/index.ts

@@ -19,21 +19,11 @@ 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
    */
   Root: ContentRoot,
 }
 
-export type {
-  /**
-   * @deprecated use ContentRootProps instead
-   */
-  ContentRootProps as ContentProps,
-  ContentRootProps,
-} from './ContentRoot'
+export type { ContentRootProps } from './ContentRoot'

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 (
     <Box
@@ -44,15 +44,15 @@ export function HeaderSidebarToggle({ onClick, ...props }: HeaderSidebarTogglePr
       {...props}
       onClick={(event) => {
         event.preventDefault()
-        context.setSidebarOpen(!context.isSidebarOpen)
+        setSidebarOpen(!isSidebarOpen)
         onClick?.(event)
       }}
       aria-label={'Menu Toggle'}
     >
       <Icon
         w={6}
         height={6}
-        as={context.isSidebarOpen && !wasInitiallyOpen ? XIcon : MenuIcon}
+        as={isSidebarOpen && !wasInitiallyOpen ? XIcon : MenuIcon}
         color="white"
       />
     </Box>

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
    *

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<boolean>(isSidebarOpenDefault)
-  const [openedOverlayId, setOpenedOverlayId] = useState<string | undefined>(undefined)
-
-  return (
-    <ShellContext.Provider
-      value={{
-        isSidebarOpen,
-        setSidebarOpen,
-        openedOverlayId,
-        setOpenedOverlayId,
-      }}
-    >
-      {children}
-    </ShellContext.Provider>
-  )
-}
-
-/**
- * @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 (
-    <Grid
-      templateColumns={gridTemplateColumns}
-      gridTemplateRows="55px 1fr"
-      gridTemplateAreas={gridTemplateAreas}
-      h="100vh"
-      position="relative"
-    >
-      {children}
-
-      {showBackdrop && (
-        <Box
-          position="absolute"
-          top="0"
-          left="0"
-          width="100%"
-          height="100%"
-          backgroundColor="yellow"
-          opacity={0.3}
-          zIndex={Z_INDEX.BACKDROP}
-        />
-      )}
-    </Grid>
-  )
-}
-
 export type ShellRootProps = {
   children: React.ReactNode
   /**

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'

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<typeof Sidebar.Container>
+} satisfies Meta<typeof Sidebar.Root>
 
 export default meta
 type Story = StoryObj<typeof meta>

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<SidebarRootProps>) {
-  const context = useContext(ShellContext)
+  const { isSidebarOpen } = useShellContext()
 
   return (
-    context.isSidebarOpen && (
+    isSidebarOpen && (
       <Box
         as="nav"
         position="sticky"