chore(accordion): document context (#3000)

* chore(accordion): document context * chore: update vue stories * chore: update vue stories * chore: fix icons path
chakra-ui · Oct 15, 2024 · 1275129 · 1275129
1 parent 9ed0ecb
commit 1275129
Show file tree

Hide file tree

Showing 16 changed files with 392 additions and 3 deletions.
diff --git a/packages/react/src/components/accordion/accordion.stories.tsx b/packages/react/src/components/accordion/accordion.stories.tsx
@@ -18,3 +18,7 @@ export { Provider } from './examples/provider'
 export { RenderProp } from './examples/render-prop'
 export { Vertical } from './examples/vertical'
 export { WithSlider } from './examples/with-slider'
+export { ContextFocusedValue } from './examples/context/focusedValue'
+export { ContextValue } from './examples/context/value'
+export { ContextSetValue } from './examples/context/setValue'
+export { ContextGetItemState } from './examples/context/getItemState'
diff --git a/packages/react/src/components/accordion/examples/context/focusedValue.tsx b/packages/react/src/components/accordion/examples/context/focusedValue.tsx
@@ -0,0 +1,25 @@
+import { Accordion } from '@ark-ui/react/accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+export const ContextFocusedValue = () => {
+  return (
+    <Accordion.Root defaultValue={['React']}>
+      <Accordion.Context>
+        {(context) => <span>Focused item: {context.focusedValue}</span>}
+      </Accordion.Context>
+      {['React', 'Solid', 'Vue'].map((item) => (
+        <Accordion.Item key={item} value={item}>
+          <Accordion.ItemTrigger>
+            What is {item}?
+            <Accordion.ItemIndicator>
+              <ChevronDownIcon />
+            </Accordion.ItemIndicator>
+          </Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            {item} is a JavaScript library for building user interfaces.
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  )
+}
diff --git a/packages/react/src/components/accordion/examples/context/getItemState.tsx b/packages/react/src/components/accordion/examples/context/getItemState.tsx
@@ -0,0 +1,36 @@
+import { Accordion } from '@ark-ui/react/accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+export const ContextGetItemState = () => {
+  const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]
+  return (
+    <Accordion.Root defaultValue={['React']}>
+      <Accordion.Context>
+        {(context) => {
+          const itemState = context.getItemState(items[2])
+          return (
+            <>
+              <b>Vue State: </b>
+              <span>Disabled: {itemState.disabled ? 'Y' : 'N'} </span>
+              <span>Expanded: {itemState.expanded ? 'Y' : 'N'} </span>
+              <span>Focused: {itemState.focused ? 'Y' : 'N'} </span>
+            </>
+          )
+        }}
+      </Accordion.Context>
+      {items.map((item) => (
+        <Accordion.Item key={item.value} {...item}>
+          <Accordion.ItemTrigger>
+            What is {item.value}?
+            <Accordion.ItemIndicator>
+              <ChevronDownIcon />
+            </Accordion.ItemIndicator>
+          </Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            {item.value} is a JavaScript library for building user interfaces.
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  )
+}
diff --git a/packages/react/src/components/accordion/examples/context/setValue.tsx b/packages/react/src/components/accordion/examples/context/setValue.tsx
@@ -0,0 +1,25 @@
+import { Accordion } from '@ark-ui/react/accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+export const ContextSetValue = () => {
+  return (
+    <Accordion.Root defaultValue={['React']}>
+      <Accordion.Context>
+        {(context) => <button onClick={() => context.setValue(['Vue'])}>Select Vue</button>}
+      </Accordion.Context>
+      {['React', 'Solid', 'Vue'].map((item) => (
+        <Accordion.Item key={item} value={item}>
+          <Accordion.ItemTrigger>
+            What is {item}?
+            <Accordion.ItemIndicator>
+              <ChevronDownIcon />
+            </Accordion.ItemIndicator>
+          </Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            {item} is a JavaScript library for building user interfaces.
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  )
+}
diff --git a/packages/react/src/components/accordion/examples/context/value.tsx b/packages/react/src/components/accordion/examples/context/value.tsx
@@ -0,0 +1,25 @@
+import { Accordion } from '@ark-ui/react/accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+export const ContextValue = () => {
+  return (
+    <Accordion.Root defaultValue={['React']}>
+      <Accordion.Context>
+        {(context) => <span>Selected items: {context.value.join(', ')}</span>}
+      </Accordion.Context>
+      {['React', 'Solid', 'Vue'].map((item) => (
+        <Accordion.Item key={item} value={item}>
+          <Accordion.ItemTrigger>
+            What is {item}?
+            <Accordion.ItemIndicator>
+              <ChevronDownIcon />
+            </Accordion.ItemIndicator>
+          </Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            {item} is a JavaScript library for building user interfaces.
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  )
+}
diff --git a/packages/solid/src/components/accordion/accordion.stories.tsx b/packages/solid/src/components/accordion/accordion.stories.tsx
@@ -16,3 +16,7 @@ export { Multiple } from './examples/multiple'
 export { Provider } from './examples/provider'
 export { RenderProp } from './examples/render-prop'
 export { Vertical } from './examples/vertical'
+export { ContextFocusedValue } from './examples/context/focusedValue'
+export { ContextValue } from './examples/context/value'
+export { ContextSetValue } from './examples/context/setValue'
+export { ContextGetItemState } from './examples/context/getItemState'
diff --git a/packages/solid/src/components/accordion/examples/context/focusedValue.tsx b/packages/solid/src/components/accordion/examples/context/focusedValue.tsx
@@ -0,0 +1,28 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ChevronDownIcon } from 'lucide-solid'
+import { Index } from 'solid-js'
+
+export const ContextFocusedValue = () => {
+  return (
+    <Accordion.Root defaultValue={['React']}>
+      <Accordion.Context>
+        {(context) => <span>Focused item: {context().focusedValue}</span>}
+      </Accordion.Context>
+      <Index each={['React', 'Solid', 'Vue']}>
+        {(item) => (
+          <Accordion.Item value={item()}>
+            <Accordion.ItemTrigger>
+              What is {item()}?
+              <Accordion.ItemIndicator>
+                <ChevronDownIcon />
+              </Accordion.ItemIndicator>
+            </Accordion.ItemTrigger>
+            <Accordion.ItemContent>
+              {item()} is a JavaScript library for building user interfaces.
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        )}
+      </Index>
+    </Accordion.Root>
+  )
+}
diff --git a/packages/solid/src/components/accordion/examples/context/getItemState.tsx b/packages/solid/src/components/accordion/examples/context/getItemState.tsx
@@ -0,0 +1,39 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ChevronDownIcon } from 'lucide-solid'
+import { Index } from 'solid-js'
+
+export const ContextGetItemState = () => {
+  const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]
+  return (
+    <Accordion.Root defaultValue={['React']}>
+      <Accordion.Context>
+        {(context) => {
+          const itemState = context().getItemState(items[2])
+          return (
+            <>
+              <b>Vue State: </b>
+              <span>Disabled: {itemState.disabled ? 'Y' : 'N'} </span>
+              <span>Expanded: {itemState.expanded ? 'Y' : 'N'} </span>
+              <span>Focused: {itemState.focused ? 'Y' : 'N'} </span>
+            </>
+          )
+        }}
+      </Accordion.Context>
+      <Index each={items}>
+        {(item) => (
+          <Accordion.Item {...item()}>
+            <Accordion.ItemTrigger>
+              What is {item().value}?
+              <Accordion.ItemIndicator>
+                <ChevronDownIcon />
+              </Accordion.ItemIndicator>
+            </Accordion.ItemTrigger>
+            <Accordion.ItemContent>
+              {item().value} is a JavaScript library for building user interfaces.
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        )}
+      </Index>
+    </Accordion.Root>
+  )
+}
diff --git a/packages/solid/src/components/accordion/examples/context/setValue.tsx b/packages/solid/src/components/accordion/examples/context/setValue.tsx
@@ -0,0 +1,28 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ChevronDownIcon } from 'lucide-solid'
+import { Index } from 'solid-js'
+
+export const ContextSetValue = () => {
+  return (
+    <Accordion.Root defaultValue={['React']}>
+      <Accordion.Context>
+        {(context) => <button onClick={() => context().setValue(['Vue'])}>Select Vue</button>}
+      </Accordion.Context>
+      <Index each={['React', 'Solid', 'Vue']}>
+        {(item) => (
+          <Accordion.Item value={item()}>
+            <Accordion.ItemTrigger>
+              What is {item()}?
+              <Accordion.ItemIndicator>
+                <ChevronDownIcon />
+              </Accordion.ItemIndicator>
+            </Accordion.ItemTrigger>
+            <Accordion.ItemContent>
+              {item()} is a JavaScript library for building user interfaces.
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        )}
+      </Index>
+    </Accordion.Root>
+  )
+}
diff --git a/packages/solid/src/components/accordion/examples/context/value.tsx b/packages/solid/src/components/accordion/examples/context/value.tsx
@@ -0,0 +1,28 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ChevronDownIcon } from 'lucide-solid'
+import { Index } from 'solid-js'
+
+export const ContextValue = () => {
+  return (
+    <Accordion.Root defaultValue={['React']}>
+      <Accordion.Context>
+        {(context) => <span>Selected items: {context().value.join(', ')}</span>}
+      </Accordion.Context>
+      <Index each={['React', 'Solid', 'Vue']}>
+        {(item) => (
+          <Accordion.Item value={item()}>
+            <Accordion.ItemTrigger>
+              What is {item()}?
+              <Accordion.ItemIndicator>
+                <ChevronDownIcon />
+              </Accordion.ItemIndicator>
+            </Accordion.ItemTrigger>
+            <Accordion.ItemContent>
+              {item()} is a JavaScript library for building user interfaces.
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        )}
+      </Index>
+    </Accordion.Root>
+  )
+}
diff --git a/packages/vue/src/components/accordion/accordion.stories.vue b/packages/vue/src/components/accordion/accordion.stories.vue
@@ -2,6 +2,10 @@
 import Accordion from './examples/accordion.vue'
 import Basic from './examples/basic.vue'
 import Collapsible from './examples/collapsible.vue'
+import ContextFocusedValue from './examples/context/focusedValue.vue'
+import ContextGetItemState from './examples/context/getItemState.vue'
+import ContextSetValue from './examples/context/setValue.vue'
+import ContextValue from './examples/context/value.vue'
 import Controlled from './examples/controlled.vue'
 import Disabled from './examples/disabled.vue'
 import Horizontal from './examples/horizontal.vue'
@@ -42,5 +46,17 @@ import Vertical from './examples/vertical.vue'
     <Variant title="RootProvider">
       <RootProvider />
     </Variant>
+    <Variant title="ContextFocusedValue">
+      <ContextFocusedValue />
+    </Variant>
+    <Variant title="ContextValue">
+      <ContextValue />
+    </Variant>
+    <Variant title="ContextSetValue">
+      <ContextSetValue />
+    </Variant>
+    <Variant title="ContextGetItemState">
+      <ContextGetItemState />
+    </Variant>
   </Story>
 </template>
diff --git a/packages/vue/src/components/accordion/examples/context/focusedValue.vue b/packages/vue/src/components/accordion/examples/context/focusedValue.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Accordion } from '@ark-ui/vue/accordion'
+import { ref } from 'vue'
+import { ChevronDownIcon } from '../icons'
+
+const items = ref(['React', 'Solid', 'Vue'])
+</script>
+
+<template>
+  <Accordion.Root :defaultValue="['React']">
+    <Accordion.Context v-slot="context">
+      <span>Focused item: {{ context.focusedValue }}</span>
+    </Accordion.Context>
+    <Accordion.Item v-for="item in items" :key="item" :value="item">
+      <Accordion.ItemTrigger>
+        What is {{ item }}?
+        <Accordion.ItemIndicator>
+          <ChevronDownIcon />
+        </Accordion.ItemIndicator>
+      </Accordion.ItemTrigger>
+      <Accordion.ItemContent>
+        {{ item }} is a JavaScript library for building user interfaces.
+      </Accordion.ItemContent>
+    </Accordion.Item>
+  </Accordion.Root>
+</template>
diff --git a/packages/vue/src/components/accordion/examples/context/getItemState.vue b/packages/vue/src/components/accordion/examples/context/getItemState.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Accordion } from '@ark-ui/vue/accordion'
+import { ref } from 'vue'
+import { ChevronDownIcon } from '../icons'
+
+const items = ref([{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }])
+</script>
+
+<template>
+  <Accordion.Root :defaultValue="['React']">
+    <Accordion.Context v-slot="context">
+      <b>Vue State:</b>
+      <span>Disabled: {{ context.getItemState(items[2]).disabled ? 'Y' : 'N' }}</span>
+      <span>Expanded: {{ context.getItemState(items[2]).expanded ? 'Y' : 'N' }}</span>
+      <span>Focused: {{ context.getItemState(items[2]).focused ? 'Y' : 'N' }}</span>
+    </Accordion.Context>
+    <Accordion.Item v-for="item in items" :key="item.value" v-bind="item">
+      <Accordion.ItemTrigger>
+        What is {{ item }}?
+        <Accordion.ItemIndicator>
+          <ChevronDownIcon />
+        </Accordion.ItemIndicator>
+      </Accordion.ItemTrigger>
+      <Accordion.ItemContent>
+        {{ item }} is a JavaScript library for building user interfaces.
+      </Accordion.ItemContent>
+    </Accordion.Item>
+  </Accordion.Root>
+</template>
diff --git a/packages/vue/src/components/accordion/examples/context/setValue.vue b/packages/vue/src/components/accordion/examples/context/setValue.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Accordion } from '@ark-ui/vue/accordion'
+import { ref } from 'vue'
+import { ChevronDownIcon } from '../icons'
+
+const items = ref(['React', 'Solid', 'Vue'])
+</script>
+
+<template>
+  <Accordion.Root :defaultValue="['React']">
+    <Accordion.Context v-slot="context">
+      <button @click="context.setValue(['Vue'])">Select Vue</button>
+    </Accordion.Context>
+    <Accordion.Item v-for="item in items" :key="item" :value="item">
+      <Accordion.ItemTrigger>
+        What is {{ item }}?
+        <Accordion.ItemIndicator>
+          <ChevronDownIcon />
+        </Accordion.ItemIndicator>
+      </Accordion.ItemTrigger>
+      <Accordion.ItemContent>
+        {{ item }} is a JavaScript library for building user interfaces.
+      </Accordion.ItemContent>
+    </Accordion.Item>
+  </Accordion.Root>
+</template>
diff --git a/packages/vue/src/components/accordion/examples/context/value.vue b/packages/vue/src/components/accordion/examples/context/value.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Accordion } from '@ark-ui/vue/accordion'
+import { ref } from 'vue'
+import { ChevronDownIcon } from '../icons'
+
+const items = ref(['React', 'Solid', 'Vue'])
+</script>
+
+<template>
+  <Accordion.Root :defaultValue="['React']">
+    <Accordion.Context v-slot="context">
+      <span>Selected items: {{ context.value.join(', ') }}</span>
+    </Accordion.Context>
+    <Accordion.Item v-for="item in items" :key="item" :value="item">
+      <Accordion.ItemTrigger>
+        What is {{ item }}?
+        <Accordion.ItemIndicator>
+          <ChevronDownIcon />
+        </Accordion.ItemIndicator>
+      </Accordion.ItemTrigger>
+      <Accordion.ItemContent>
+        {{ item }} is a JavaScript library for building user interfaces.
+      </Accordion.ItemContent>
+    </Accordion.Item>
+  </Accordion.Root>
+</template>