chore(ui,icons,ui-preset,toolbox): Move design system packages to monorepo (#5470)

packages/design-system/ui/src/hooks/use-toggle-state/index.ts

@@ -0,0 +1 @@
+export { useToggleState } from "./use-toggle-state"

packages/design-system/ui/src/hooks/use-toggle-state/use-toggle-state.spec.tsx

@@ -0,0 +1,54 @@
+import { act, renderHook } from "@testing-library/react"
+
+import { useToggleState } from "./use-toggle-state"
+
+describe("useToggleState", () => {
+  test("should return a state and a function to toggle it", () => {
+    const { result } = renderHook(() => useToggleState())
+
+    expect(result.current[0]).toBe(false)
+    expect(typeof result.current[1]).toBe("function")
+  })
+
+  test("should return a state and a function to toggle it with an initial value", () => {
+    const { result } = renderHook(() => useToggleState(true))
+
+    expect(result.current[0]).toBe(true)
+  })
+
+  test("should update the state when the toggle function is called", () => {
+    const { result } = renderHook(() => useToggleState())
+
+    expect(result.current[0]).toBe(false)
+
+    act(() => {
+      result.current[1]()
+    })
+
+    expect(result.current[0]).toBe(true)
+  })
+
+  test("should update the state when the close function is called", () => {
+    const { result } = renderHook(() => useToggleState(true))
+
+    expect(result.current[0]).toBe(true)
+
+    act(() => {
+      result.current[2]()
+    })
+
+    expect(result.current[0]).toBe(false)
+  })
+
+  test("should update the state when the open function is called", () => {
+    const { result } = renderHook(() => useToggleState())
+
+    expect(result.current[0]).toBe(false)
+
+    act(() => {
+      result.current[3]()
+    })
+
+    expect(result.current[0]).toBe(true)
+  })
+})

packages/design-system/ui/src/hooks/use-toggle-state/use-toggle-state.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+
+import { Button } from "@/components/button"
+import { Text } from "@/components/text"
+import { useToggleState } from "./use-toggle-state"
+
+const Demo = () => {
+  const { state, open, close, toggle } = useToggleState()
+
+  return (
+    <div className="flex flex-col items-center gap-y-4">
+      <Text>State: {state ? "True" : "False"}</Text>
+      <div className="flex items-center gap-x-4">
+        <Button onClick={open}>Open</Button>
+        <Button onClick={close}>Close</Button>
+        <Button onClick={toggle}>Toggle</Button>
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta<typeof Demo> = {
+  title: "Hooks/useToggleState",
+  component: Demo,
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Demo>
+
+export const Default: Story = {}

packages/design-system/ui/src/hooks/use-toggle-state/use-toggle-state.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+
+type StateType = [boolean, () => void, () => void, () => void] & {
+  state: boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+const useToggleState = (initial = false) => {
+  const [state, setState] = React.useState<boolean>(initial)
+
+  const close = () => {
+    setState(false)
+  }
+
+  const open = () => {
+    setState(true)
+  }
+
+  const toggle = () => {
+    setState((state) => !state)
+  }
+
+  const hookData = [state, open, close, toggle] as StateType
+  hookData.state = state
+  hookData.open = open
+  hookData.close = close
+  hookData.toggle = toggle
+  return hookData
+}
+
+export { useToggleState }