Merge pull request #1581 from gluestack/release/@gluestack-ui/accordi…

…on@1.0.0 release: @gluestack-ui/accordion version 1.0.0
gluestack · Jan 5, 2024 · 3e20d8d · 3e20d8d
2 parents 912f350 + cfa9247
commit 3e20d8d
Show file tree

Hide file tree

Showing 26 changed files with 807 additions and 202 deletions.
diff --git a/create-release.js b/create-release.js
@@ -13,6 +13,7 @@ const rl = readline.createInterface({
 });
 const packageNames = [
   'actionsheet',
+  'accordion',
   'alert',
   'alert-dialog',
   'avatar',

diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js
@@ -50,7 +50,7 @@ try {
 const getStories = () => {
   return [
     // require('../src/components/Disclosure/Actionsheet/Actionsheet.stories.tsx'),
-    // require('../src/components/Disclosure/Accordion/Accordion.stories.tsx'),
+    require('../src/ui/components/Disclosure/Accordion/Accordion.stories.tsx'),
     // require('../src/components/Typography/Text/Text.stories.tsx'),
     // require('../src/components/Overlay/AlertDialog/AlertDialog.stories.tsx'),
     // require('../src/components/MediaAndIcons/Avatar/Avatar.stories.tsx'),

diff --git a/example/storybook/babel.config.js b/example/storybook/babel.config.js
@@ -17,6 +17,10 @@ module.exports = function (api) {
                   __dirname,
                   '../../packages/config/src/gluestack-ui.config'
                 ),
+                '@gluestack-ui/accordion': path.join(
+                  __dirname,
+                  '../../packages/unstyled/accordion/src'
+                ),
                 '@gluestack-style/react': path.join(
                   __dirname,
                   '../../packages/styled/react/src'
@@ -37,6 +41,10 @@ module.exports = function (api) {
                   __dirname,
                   '../../packages/react-native-aria/interactions/src'
                 ),
+                '@react-native-aria/accordion': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/accordion/src'
+                ),
                 '@react-native-aria/button': path.join(
                   __dirname,
                   '../../packages/react-native-aria/button/src'

diff --git a/example/storybook/package.json b/example/storybook/package.json
@@ -24,7 +24,8 @@
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^0.17.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
-    "@gluestack/design-system": "^0.4.70",
+    "@gluestack-style/animation-plugin": "^0.1.12",
+    "@gluestack/design-system": "0.4.76",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",
     "@react-aria/focus": "^3.11.0",

diff --git a/example/storybook/src/ui/components/Disclosure/Accordion/Accordion.tsx b/example/storybook/src/ui/components/Disclosure/Accordion/Accordion.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -12,9 +13,10 @@ import { Divider } from '@gluestack-ui/themed';
 import { ChevronDownIcon } from 'lucide-react-native';
 import { ChevronUpIcon } from 'lucide-react-native';
 import { MinusIcon, PlusIcon } from 'lucide-react-native';
-import React from 'react';
 
 const AccordionBasic = ({ ...props }: any) => {
+  const accRef = React.useRef(null);
+
   return (
     <Accordion mt="$5" {...props}>
       <AccordionItem value="a">
@@ -34,7 +36,7 @@ const AccordionBasic = ({ ...props }: any) => {
             )}
           </AccordionTrigger>
         </AccordionHeader>
-        <AccordionContent>
+        <AccordionContent ref={accRef}>
           <AccordionContentText>
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, sed
             laudantium eligendi maxime rerum, saepe vitae unde voluptas hic,
@@ -44,8 +46,6 @@ const AccordionBasic = ({ ...props }: any) => {
         </AccordionContent>
       </AccordionItem>
 
-      {/* <Divider /> */}
-
       <AccordionItem value="b">
         <AccordionHeader>
           <AccordionTrigger>
@@ -75,8 +75,6 @@ const AccordionBasic = ({ ...props }: any) => {
         </AccordionContent>
       </AccordionItem>
 
-      {/* <Divider /> */}
-
       <AccordionItem value="c">
         <AccordionHeader>
           <AccordionTrigger>
@@ -104,8 +102,6 @@ const AccordionBasic = ({ ...props }: any) => {
         </AccordionContent>
       </AccordionItem>
 
-      {/* <Divider /> */}
-
       <AccordionItem value="d">
         <AccordionHeader>
           <AccordionTrigger>

diff --git a/example/storybook/src/ui/components/Disclosure/Accordion/AccordionCustomisedBackground.tsx b/example/storybook/src/ui/components/Disclosure/Accordion/AccordionCustomisedBackground.tsx
@@ -16,7 +16,13 @@ const AccordionCustomisedBackground = ({ ...props }: any) => {
     <Accordion {...props} size={'md'} shadowColor="transparent">
       <AccordionItem value="item-1" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger
+            sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}
+          >
             {({ isExpanded }: { isExpanded: boolean }) => {
               return (
                 <>
@@ -43,7 +49,13 @@ const AccordionCustomisedBackground = ({ ...props }: any) => {
       </AccordionItem>
       <AccordionItem value="item-2" mt="$5" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger
+            sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}
+          >
             {({ isExpanded }: { isExpanded: boolean }) => {
               return (
                 <>

diff --git a/example/storybook/src/ui/components/Disclosure/Accordion/AccordionRoundedCorner.tsx b/example/storybook/src/ui/components/Disclosure/Accordion/AccordionRoundedCorner.tsx
@@ -16,7 +16,13 @@ const AccordionRoundedCorners = ({ ...props }: any) => {
     <Accordion {...props} size={'md'} shadowColor="transparent">
       <AccordionItem value="item-1" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger
+            sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}
+          >
             {({ isExpanded }: { isExpanded: boolean }) => {
               return (
                 <>
@@ -43,7 +49,13 @@ const AccordionRoundedCorners = ({ ...props }: any) => {
       </AccordionItem>
       <AccordionItem value="item-2" mt="$5" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger
+            sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}
+          >
             {({ isExpanded }: { isExpanded: boolean }) => {
               return (
                 <>