Merge pull request #1832 from gluestack/feat/nativewind-accordion

feat/nativewind-accordion

example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx

@@ -1,11 +1,12 @@
-import { createAccordion } from '@gluestack-ui/accordion';
 import React from 'react';
+import { createAccordion } from '@gluestack-ui/accordion';
 import { View, Pressable, Text, Platform } from 'react-native';
 import {
   tva,
   withStyleContext,
+  withStyleContextAndStates,
   useStyleContext,
-  withStates,
+  VariantProps,
 } from '@gluestack-ui/nativewind-utils';
 
 import { H3 } from '@expo/html-elements';
@@ -14,14 +15,13 @@ import { cssInterop } from 'nativewind';
 /** Styles */
 
 const accordionStyle = tva({
-  base: 'w-full shadow-sm',
+  base: 'w-full',
   variants: {
     variant: {
       filled: 'bg-white',
     },
   },
 });
-
 const accordionItemStyle = tva({
   parentVariants: {
     variant: {
@@ -30,7 +30,6 @@ const accordionItemStyle = tva({
     },
   },
 });
-
 const accordionTitleTextStyle = tva({
   base: 'text-typography-900 font-bold flex-1 text-left',
   parentVariants: {
@@ -44,7 +43,6 @@ const accordionTitleTextStyle = tva({
 const accordionIconStyle = tva({
   base: 'text-typography-900',
 });
-
 const accordionContentTextStyle = tva({
   base: 'text-typography-700 font-normal',
   parentVariants: {
@@ -55,25 +53,28 @@ const accordionContentTextStyle = tva({
     },
   },
 });
-
 const accordionHeaderStyle = tva({
   base: 'mx-0 my-0',
 });
 const accordionContentStyle = tva({
   base: 'px-5 mt-2 pb-5',
 });
-
 const accordionTriggerStyle = tva({
   base: 'w-full py-5 px-5 flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50',
 });
 
 /** Creator */
 const UIAccordion = createAccordion({
-  Root: withStyleContext(View),
+  //@ts-ignore
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(Pressable)
+      : withStyleContextAndStates(Pressable),
   Item: View,
   // @ts-ignore
   Header: Platform.OS === 'web' ? H3 : View,
-  Trigger: Platform.OS === 'web' ? Pressable : withStates(Pressable),
+  //@ts-ignore
+  Trigger: Pressable,
   Icon: View,
   TitleText: Text,
   ContentText: Text,
@@ -89,33 +90,71 @@ cssInterop(UIAccordion.TitleText, { className: 'style' });
 cssInterop(UIAccordion.Content, { className: 'style' });
 cssInterop(UIAccordion.ContentText, { className: 'style' });
 
+type IAccordionProps = React.ComponentProps<typeof UIAccordion> &
+  VariantProps<typeof accordionStyle>;
+
+type IAccordionItemProps = React.ComponentProps<typeof UIAccordion.Item> &
+  VariantProps<typeof accordionItemStyle>;
+
+type IAccordionContentProps = React.ComponentProps<typeof UIAccordion.Content> &
+  VariantProps<typeof accordionContentStyle>;
+
+type IAccordionContentTextProps = React.ComponentProps<
+  typeof UIAccordion.ContentText
+> &
+  VariantProps<typeof accordionContentTextStyle>;
+
+type IAccordionIconProps = React.ComponentProps<typeof UIAccordion.Icon> & {
+  as?: any;
+};
+
+type IAccordionHeaderProps = React.ComponentProps<typeof UIAccordion.Header> &
+  VariantProps<typeof accordionHeaderStyle>;
+
+type IAccordionTriggerProps = React.ComponentProps<typeof UIAccordion.Trigger> &
+  VariantProps<typeof accordionTriggerStyle>;
+
+type IAccordionTitleTextProps = React.ComponentProps<
+  typeof UIAccordion.TitleText
+> &
+  VariantProps<typeof accordionTitleTextStyle>;
+
 /** Components */
 
 const Accordion = React.forwardRef(
   (
-    { className, variant = 'filled', size = 'md', ...props }: any,
+    {
+      className,
+      variant = 'filled',
+      //@ts-ignore
+      size = 'md',
+      ...props
+    }: { className?: string } & IAccordionProps,
     ref?: any
   ) => {
     return (
       <UIAccordion
         ref={ref}
         {...props}
-        className={accordionStyle({ variant, size, class: className })}
+        className={accordionStyle({ variant, class: className })}
         context={{ variant, size }}
       />
     );
   }
 );
 
 const AccordionItem = React.forwardRef(
-  ({ className, ...props }: any, ref?: any) => {
-    const { variant, size } = useStyleContext();
+  (
+    { className, ...props }: { className?: string } & IAccordionItemProps,
+    ref?: any
+  ) => {
+    const { variant } = useStyleContext();
     return (
       <UIAccordion.Item
         ref={ref}
         {...props}
         className={accordionItemStyle({
-          parentVariants: { variant, size },
+          parentVariants: { variant },
           class: className,
         })}
       />
@@ -124,7 +163,10 @@ const AccordionItem = React.forwardRef(
 );
 
 const AccordionContent = React.forwardRef(
-  ({ className, ...props }: any, ref?: any) => {
+  (
+    { className, ...props }: { className?: string } & IAccordionContentProps,
+    ref?: any
+  ) => {
     return (
       <UIAccordion.Content
         ref={ref}
@@ -138,36 +180,56 @@ const AccordionContent = React.forwardRef(
 );
 
 const AccordionContentText = React.forwardRef(
-  ({ className, ...props }: any, ref?: any) => {
-    const { variant, size } = useStyleContext();
+  (
+    {
+      className,
+      ...props
+    }: { className?: string } & IAccordionContentTextProps,
+    ref?: any
+  ) => {
+    const { size } = useStyleContext();
     return (
       <UIAccordion.ContentText
         ref={ref}
         {...props}
         className={accordionContentTextStyle({
-          parentVariants: { variant, size },
+          parentVariants: { size },
           class: className,
         })}
       />
     );
   }
 );
 
-const AccordionIcon = React.forwardRef(
-  ({ className, ...props }: any, ref?: any) => {
+const AccordionIcon = ({
+  className,
+  as: AsComp,
+  ...props
+}: IAccordionIconProps & { className?: any }) => {
+  if (AsComp) {
     return (
-      <UIAccordion.Icon
-        ref={ref}
-        {...props}
+      <AsComp
         className={accordionIconStyle({
           class: className,
         })}
+        {...props}
       />
     );
   }
-);
+  return (
+    <UIAccordion.Icon
+      className={accordionIconStyle({
+        class: className,
+      })}
+      {...props}
+    />
+  );
+};
 const AccordionHeader = React.forwardRef(
-  ({ className, ...props }: any, ref?: any) => {
+  (
+    { className, ...props }: { className?: string } & IAccordionHeaderProps,
+    ref?: any
+  ) => {
     return (
       <UIAccordion.Header
         ref={ref}
@@ -180,7 +242,10 @@ const AccordionHeader = React.forwardRef(
   }
 );
 const AccordionTrigger = React.forwardRef(
-  ({ className, ...props }: any, ref?: any) => {
+  (
+    { className, ...props }: { className?: string } & IAccordionTriggerProps,
+    ref?: any
+  ) => {
     return (
       <UIAccordion.Trigger
         ref={ref}
@@ -193,14 +258,17 @@ const AccordionTrigger = React.forwardRef(
   }
 );
 const AccordionTitleText = React.forwardRef(
-  ({ className, ...props }: any, ref?: any) => {
-    const { variant, size } = useStyleContext();
+  (
+    { className, ...props }: { className?: string } & IAccordionTitleTextProps,
+    ref?: any
+  ) => {
+    const { size } = useStyleContext();
     return (
-      <UIAccordion.Header
+      <UIAccordion.TitleText
         ref={ref}
         {...props}
         className={accordionTitleTextStyle({
-          parentVariants: { variant, size },
+          parentVariants: { size },
           class: className,
         })}
       />

example/storybook-nativewind/src/components/Accordion/Accordion.tsx

@@ -9,9 +9,12 @@ import {
   AccordionContent,
   AccordionContentText,
 } from '@/components/ui/Accordion';
-import { ChevronDownIcon } from 'lucide-react-native';
-import { ChevronUpIcon } from 'lucide-react-native';
-import { MinusIcon, PlusIcon } from 'lucide-react-native';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MinusIcon,
+  PlusIcon,
+} from 'lucide-react-native';
 
 const AccordionBasic = ({ ...props }: any) => {
   const accRef = React.useRef(null);