Merge branch 'patch' into config-v2

Author: rayan1810

.changeset/config.json

@@ -7,5 +7,8 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@gluestack/ui-storybook", "@gluestack/storybook-nativewind"]
+  "ignore": [
+    "@gluestack/ui-storybook",
+    "@nativewind-gluestack/storybook-nativewind"
+  ]
 }

.github/workflows/auto-assign-pr.yml renamed to .github/workflows/auto-assign-pr.yml_old

@@ -45,24 +45,26 @@ export const parameters = {
           'Feedback',
           ['Alert', 'Progress', 'Spinner', 'Toast'],
           'Data Display',
-          ['Badge'],
+          ['Badge', 'Card'],
           'Forms',
           [
             'Button',
             'Checkbox',
             'FormControl',
+            'Input',
             'Link',
             'Pressable',
             'Radio',
             'Slider',
             'Switch',
+            'Textarea',
           ],
           'Overlay',
           ['AlertDialog', 'Modal', 'Popover', 'Tooltip'],
           'Disclosure',
           ['Actionsheet', 'Accordion'],
           'Media And Icons',
-          ['Avatar', 'Image'],
+          ['Avatar', 'Image', 'Icon'],
           'Others',
           ['Fab'],
         ],

example/storybook-nativewind/.storybook/preview.js

@@ -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,
         })}
       />