Merge pull request #180 from TylerAPfledderer/feat/create-use-disclosure

Create `useDisclosure` composable

Author: codebender828

packages/vue-composables/examples/use-disclosure-drawer.vue

@@ -0,0 +1,20 @@
+<template>
+  <c-button @click="open">Open Drawer</c-button>
+  <c-drawer placement="right" v-model="isOpen">
+    <c-drawer-overlay />
+    <c-drawer-content>
+      <c-drawer-header borderBottomWidth="1px">Basic Drawer</c-drawer-header>
+      <c-drawer-close-button @click="close" />
+      <c-drawer-body>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </c-drawer-body>
+    </c-drawer-content>
+  </c-drawer>
+</template>
+<script lang="ts" setup>
+import { useDisclosure } from "../src/use-disclosure"
+
+const { open, close, isOpen } = useDisclosure()
+</script>

packages/vue-composables/examples/use-disclosure-props.vue

@@ -0,0 +1,13 @@
+<template>
+  <c-v-stack gap="4">
+    <c-button v-bind="buttonProps">This is a button</c-button>
+    <c-center h="4">
+      <c-box v-bind="disclosureProps">Toggled On with Props!</c-box>
+    </c-center>
+  </c-v-stack>
+</template>
+<script setup lang="ts">
+import { useDisclosure } from "../src/use-disclosure"
+
+const { buttonProps, disclosureProps } = useDisclosure()
+</script>

packages/vue-composables/examples/use-disclosure-toggle.vue

@@ -0,0 +1,13 @@
+<template>
+  <c-v-stack gap="4">
+    <c-button @click="toggle">This is a button</c-button>
+    <c-center h="4">
+      <c-box :hidden="!isOpen">Toggled On with onToggle!</c-box>
+    </c-center>
+  </c-v-stack>
+</template>
+<script setup lang="ts">
+import { useDisclosure } from "../src/use-disclosure"
+
+const { toggle, isOpen } = useDisclosure()
+</script>

packages/vue-composables/src/index.ts

@@ -3,3 +3,4 @@ export * from "./use-event-listener"
 export * from "./use-window-event"
 export * from "./use-element-stack"
 export * from "./use-clipboard"
+export * from "./use-disclosure"

packages/vue-composables/src/use-disclosure.ts

@@ -0,0 +1,162 @@
+import {
+  computed,
+  ComputedRef,
+  HTMLAttributes,
+  Ref,
+  ref,
+  watchEffect,
+} from "vue"
+import { useId } from "./use-id"
+
+export interface UseDisclosureProps {
+  /**
+   * Defines open state from outside dynamic state being passed in.
+   *
+   * Overrides `defaultIsOpen` prop.
+   */
+  isOpen?: boolean
+  /**
+   * Default state on render. Overriden by `isOpen` prop dynamically
+   * if outside state should pass in a truthy value
+   */
+  defaultIsOpen?: boolean
+  /**
+   * Additional actions to run when the targeted element is closed.
+   */
+  onClose?(): void
+  /**
+   * Additional actions to run when the targeted element is opened.
+   */
+  onOpen?(): void
+  /**
+   * Custom id to connect the toggle with the targeted element for accessibility.
+   *
+   * @default `disclosure-<uid>`
+   */
+  id?: string
+}
+
+type ReturnUseDisclosureType = {
+  /**
+   * Returns current state
+   *
+   * @default false
+   */
+  isOpen: Ref<boolean>
+  /**
+   * Actions run when opening targeted element.
+   *
+   * If target element is uncontrolled, then it includes toggle open.
+   */
+  open: () => void
+  /**
+   * Actions run when closing targeted element.
+   *
+   * If target element is uncontrolled, then it includes toggle closed.
+   */
+  close: () => void
+  /**
+   * Actions run when toggling open and closed.
+   */
+  toggle: () => void
+  /**
+   * Check if external functionality controls the state of the targeted element
+   */
+  isControlled: boolean
+  /**
+   * Computed object of Accessibility attributes and toggling event for the toggling element.
+   *
+   * `NOTE:` Pass this to the v-bind of the element.
+   *
+   * i.e. `v-bind='buttonProps'`
+   */
+  buttonProps: ComputedRef<{
+    "aria-expanded": HTMLAttributes["aria-expanded"]
+    "aria-controls": HTMLAttributes["aria-controls"]
+    onClick: HTMLAttributes["onClick"]
+  }>
+  /**
+   * Computed object of Accessibility attributes to show/hide targeted element and for aria controls.
+   *
+   * `NOTE:` Pass this to the v-bind of the element.
+   *
+   * i.e. `v-bind='disclosureProps'`
+   */
+  disclosureProps: ComputedRef<{
+    hidden: HTMLAttributes["hidden"]
+    id: HTMLAttributes["id"]
+  }>
+}
+
+/**
+ * Handles common open, close, or toggle scenarios.
+ *
+ * It can be used to control feedback components such as `Modal`, `AlertDialog`, `Drawer`, etc.
+ */
+export function useDisclosure(
+  props: UseDisclosureProps = {}
+): ReturnUseDisclosureType {
+  const {
+    isOpen: isOpenProp,
+    onClose: handleClose,
+    onOpen: handleOpen,
+    id: idProp,
+    defaultIsOpen,
+  } = props
+
+  const isOpenState = ref(defaultIsOpen || false)
+
+  const isOpen: ReturnUseDisclosureType["isOpen"] = ref(
+    isOpenProp !== undefined ? isOpenProp : isOpenState.value
+  )
+
+  const isControlled = isOpenProp !== undefined
+
+  const uid = useId()
+  const id = computed(() => idProp ?? `disclosure-${uid.value}`)
+
+  const close = () => {
+    if (!isControlled) {
+      isOpenState.value = false
+    }
+    handleClose?.()
+  }
+
+  const open = () => {
+    if (!isControlled) {
+      isOpenState.value = true
+    }
+    handleOpen?.()
+  }
+
+  const toggle = () => (isOpen.value ? close() : open())
+
+  const buttonProps: ReturnUseDisclosureType["buttonProps"] = computed(() => ({
+    "aria-expanded": isOpen.value,
+    "aria-controls": id.value,
+    onClick() {
+      toggle()
+    },
+  }))
+
+  const disclosureProps: ReturnUseDisclosureType["disclosureProps"] = computed(
+    () => ({
+      hidden: !isOpen.value,
+      id: id.value,
+    })
+  )
+
+  watchEffect(() => {
+    isOpen.value = isOpenState.value
+  })
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+    isControlled,
+    buttonProps,
+    disclosureProps,
+  }
+}

packages/vue-composables/tests/use-disclosure.cy.tsx

@@ -0,0 +1,66 @@
+import UseDisclosureDrawer from "../examples/use-disclosure-drawer.vue"
+import UseDisclosureProps from "../examples/use-disclosure-props.vue"
+import UseDisclosureToggle from "../examples/use-disclosure-toggle.vue"
+
+describe("useDisclosure with button/disclosure props", () => {
+  it("is accessbile", () => {
+    cy.mount(UseDisclosureProps).checkA11y()
+  })
+
+  it("renders the button props correctly", () => {
+    cy.mount(UseDisclosureProps)
+
+    const button = cy.get("button")
+
+    button
+      .should("have.attr", "aria-expanded", "false")
+      .and("have.attr", "aria-controls", "disclosure-2")
+  })
+
+  it("toggles the disclosure", () => {
+    cy.mount(UseDisclosureProps)
+
+    cy.get("button").should("have.attr", "aria-expanded", "false")
+    cy.get("#disclosure-3").should("be.hidden")
+
+    cy.get("button")
+      .invoke("click")
+      .should("have.attr", "aria-expanded", "true")
+
+    cy.get("#disclosure-3").should("not.be.hidden")
+
+    cy.get("button")
+      .invoke("click")
+      .should("have.attr", "aria-expanded", "false")
+    cy.get("#disclosure-3").should("be.hidden")
+  })
+})
+
+describe("useDisclosure with onToggle", () => {
+  it("toggles the text", () => {
+    cy.mount(UseDisclosureToggle)
+
+    cy.contains("div", "Toggled On with onToggle!").should("be.hidden")
+
+    cy.get("button").contains("This is a button").invoke("click")
+
+    cy.contains("div", "Toggled On with onToggle!").should("not.be.hidden")
+  })
+})
+
+describe("useDisclosure with drawer", () => {
+  it("toggles drawer", () => {
+    cy.mount(UseDisclosureDrawer)
+
+    cy.get(".chakra-modal__content-container").should("not.exist")
+
+    cy.contains("button", "Open Drawer").invoke("click")
+
+    cy.get(".chakra-modal__content-container")
+      .should("exist")
+      .get(".chakra-modal__close-button")
+      .invoke("click")
+
+    cy.get(".chakra-modal__content-container").should("not.exist")
+  })
+})