Merge pull request #1965 from gluestack/fix/radio-compt-nativewind

fix: radio nativewind component
gluestack · Mar 21, 2024 · 0c9f4de · 0c9f4de
2 parents adb86fe + 626a6a2
commit 0c9f4de
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 186 deletions.
diff --git a/example/storybook-nativewind/src/components/Pressable/Pressable.stories.tsx b/example/storybook-nativewind/src/components/Pressable/Pressable.stories.tsx
@@ -9,8 +9,15 @@ const PressableMeta: ComponentMeta<typeof Pressable> = {
   metaInfo: {
     componentDescription: `By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.`,
   },
-  argTypes: {},
-  args: {},
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      options: [true, false],
+    },
+  },
+  args: {
+    disabled: false,
+  },
 };
 
 export default PressableMeta;

diff --git a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
@@ -37,7 +37,7 @@ const badgeTextStyle = tva({
       warning: 'text-warning-600',
       success: 'text-success-600',
       info: 'text-info-600',
-      muted: 'text-muted-600',
+      muted: 'text-secondary-600',
     },
     size: {
       sm: 'text-2xs',
@@ -71,14 +71,14 @@ const badgeTextStyle = tva({
 });
 
 const badgeIconStyle = tva({
-  base: 'text-background-500',
+  base: 'text-background-500 fill-none',
   parentVariants: {
     action: {
       error: 'text-error-600',
       warning: 'text-warning-600',
       success: 'text-success-600',
       info: 'text-info-600',
-      muted: 'text-muted-600',
+      muted: 'text-secondary-600',
     },
     size: {
       sm: 'h-3 w-3',

diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
@@ -13,6 +13,7 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 import { Platform } from 'react-native';
 import { Check } from 'lucide-react-native';
+
 const UICheckbox = createCheckbox({
   // @ts-ignore
   Root:
@@ -36,7 +37,7 @@ const checkboxStyle = tva({
 });
 
 const checkboxIndicatorStyle = tva({
-  base: 'group/checkboxInd justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-primary-700 data-[checked=true]:bg-primary-600 group-hover/checkbox:border-outline-500 group-hover/checkbox:bg-transparent group-hover/checkbox:data-[invalid=true]:border-error-700 group-hover/checkbox:data-[checked=true]:bg-primary-700 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:border-primary-600 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:bg-primary-600 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:opacity-40 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 group-hover/checkbox:data-[disabled=true]:border-outline-400 group-hover/checkbox:data-[disabled=true]:data-[invalid=true]:border-error-700 active:data-[checked=true]:bg-primary-800 active:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40',
+  base: 'justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-primary-700 data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 group-hover/checkbox:data-[checked=false]:border-outline-500 group-hover/checkbox:bg-transparent group-hover/checkbox:data-[invalid=true]:border-error-700 group-hover/checkbox:data-[checked=true]:bg-primary-700 group-hover/checkbox:data-[checked=true]:border-primary-700 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:border-primary-600 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:bg-primary-600 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:opacity-40 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 group-hover/checkbox:data-[disabled=true]:border-outline-400 group-hover/checkbox:data-[disabled=true]:data-[invalid=true]:border-error-700 active:data-[checked=true]:bg-primary-800 active:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40',
   parentVariants: {
     size: {
       lg: 'w-6 h-6 border-[3px]',
@@ -58,7 +59,7 @@ const checkboxLabelStyle = tva({
 });
 
 const checkboxIconStyle = tva({
-  base: 'group-data-[checked=true]/checkboxInd:text-typography-0 data-[disabled=true]:opacity-40',
+  base: 'text-typography-0 data-[disabled=true]:opacity-40 fill-none',
 
   parentVariants: {
     size: {

diff --git a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
@@ -9,24 +9,24 @@ export const UIIcon = createIcon({
 });
 
 const iconStyle = tva({
-  base: 'text-typography-900 fill-none',
+  base: 'text-typography-900',
   variants: {
     size: {
       '2xs': 'h-3 w-3',
-      'xs': 'h-4 w-4',
+      'xs': 'h-3.5 w-3.5',
       'sm': 'h-4 w-4',
-      'md': 'h-5 w-5',
+      'md': 'h-[18px] w-[18px]',
       'lg': 'h-5 w-5',
       'xl': 'h-6 w-6',
     },
   },
-  defaultVariants: {
-    size: 'md',
-  },
 });
 
 export const Icon = React.forwardRef(
-  ({ fill = 'none', size, className, as: AsComp, ...props }: any, ref) => {
+  (
+    { fill = 'none', size = 'md', className, as: AsComp, ...props }: any,
+    ref
+  ) => {
     if (AsComp) {
       return (
         <AsComp
@@ -49,153 +49,6 @@ export const Icon = React.forwardRef(
 );
 
 cssInterop(UIIcon, { className: 'style' });
-// const StyledRoot = styled(
-//   AsForwarder,
-//   {
-//     color: '$background800',
-//     variants: {
-//       size: {
-//         '2xs': {
-//           h: '$3',
-//           w: '$3',
-//           props: {
-//             // @ts-ignore
-//             size: 12,
-//           },
-//         },
-//         'xs': {
-//           h: '$3.5',
-//           w: '$3.5',
-//           props: {
-//             //@ts-ignore
-//             size: 14,
-//           },
-//         },
-//         'sm': {
-//           h: '$4',
-//           w: '$4',
-//           props: {
-//             //@ts-ignore
-//             size: 16,
-//           },
-//         },
-//         'md': {
-//           h: '$4.5',
-//           w: '$4.5',
-//           props: {
-//             //@ts-ignore
-//             size: 18,
-//           },
-//         },
-//         'lg': {
-//           h: '$5',
-//           w: '$5',
-//           props: {
-//             //@ts-ignore
-//             size: 20,
-//           },
-//         },
-//         'xl': {
-//           h: '$6',
-//           w: '$6',
-//           props: {
-//             //@ts-ignore
-//             size: 24,
-//           },
-//         },
-//       },
-//     },
-//     props: {
-//       size: 'md',
-//       fill: 'none',
-//     },
-//   },
-//   {
-//     resolveProps: ['stroke', 'fill'],
-//   } as const,
-//   {
-//     propertyTokenMap: {
-//       stroke: 'colors',
-//       fill: 'colors',
-//     },
-//   }
-// );
-// const IconRoot = styled(
-//   AsForwarder,
-//   {
-//     color: '$background800',
-//     variants: {
-//       size: {
-//         '2xs': {
-//           h: '$3',
-//           w: '$3',
-//           props: {
-//             // @ts-ignore
-//             size: 12,
-//           },
-//         },
-//         'xs': {
-//           h: '$3.5',
-//           w: '$3.5',
-//           props: {
-//             //@ts-ignore
-//             size: 14,
-//           },
-//         },
-//         'sm': {
-//           h: '$4',
-//           w: '$4',
-//           props: {
-//             //@ts-ignore
-//             size: 16,
-//           },
-//         },
-//         'md': {
-//           h: '$4.5',
-//           w: '$4.5',
-//           props: {
-//             //@ts-ignore
-//             size: 18,
-//           },
-//         },
-//         'lg': {
-//           h: '$5',
-//           w: '$5',
-//           props: {
-//             //@ts-ignore
-//             size: 20,
-//           },
-//         },
-//         'xl': {
-//           h: '$6',
-//           w: '$6',
-//           props: {
-//             //@ts-ignore
-//             size: 24,
-//           },
-//         },
-//       },
-//     },
-
-//     props: {
-//       size: 'md',
-//       //@ts-ignore
-//       fill: 'none',
-//     },
-//   },
-//   {
-//     resolveProps: ['stroke', 'fill'],
-//   } as const,
-//   {
-//     propertyTokenMap: {
-//       stroke: 'colors',
-//       fill: 'colors',
-//     },
-//   }
-// );
-// export const on = createIcon({
-//   Root: Svg,
-// });
 
 type ParameterTypes = Omit<Parameters<typeof createIcon>[0], 'Root'>;
 

diff --git a/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
@@ -24,7 +24,15 @@ export const UIImage = createImage({ Root: RNImage });
 
 const Image = ({ size = 'md', className, ...props }: any) => {
   return (
-    <UIImage className={imageStyle({ size, class: className })} {...props} />
+    <UIImage
+      className={imageStyle({ size, class: className })}
+      {...props}
+      style={{
+        ...props.style,
+        height: 'revert-layer',
+        width: 'revert-layer',
+      }}
+    />
   );
 };
 

diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
@@ -123,7 +123,12 @@ type IInputIconProps = React.ComponentProps<typeof UIInput.Icon> & { as: any };
 
 const InputIcon = React.forwardRef(
   (
-    { className, as: AsComp, ...props }: { className?: any } & IInputIconProps,
+    {
+      className,
+      fill = 'none',
+      as: AsComp,
+      ...props
+    }: { className?: any } & IInputIconProps,
     ref
   ) => {
     const { size: parentSize } = useStyleContext();
@@ -133,6 +138,7 @@ const InputIcon = React.forwardRef(
         <AsComp
           ref={ref}
           {...props}
+          fill={fill}
           className={inputIconStyle({
             parentVariants: {
               size: parentSize,
@@ -146,6 +152,7 @@ const InputIcon = React.forwardRef(
       <UIInput.Icon
         ref={ref}
         {...props}
+        fill={fill}
         className={inputIconStyle({
           parentVariants: {
             size: parentSize,

diff --git a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
@@ -1,19 +1,36 @@
-import { Pressable as RNPressable } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
 import React from 'react';
 import { createPressable } from '@gluestack-ui/pressable';
+import { Pressable as RNPressable, Platform } from 'react-native';
 
-export const UIPressable = createPressable({ Root: RNPressable });
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
+import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const UIPressable = createPressable({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(RNPressable)
+      : withStyleContextAndStates(RNPressable),
+});
 
 const pressableStyle = tva({
-  base: 'data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-primary-700 data-[focus-visible=true]:web:ring-2',
+  base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-primary-700 data-[focus-visible=true]:ring-2 data-[disabled=true]:opacity-40',
 });
 
 cssInterop(UIPressable, { className: 'style' });
 
-export const Pressable = React.forwardRef(
-  ({ className, ...props }: any, ref?: any) => {
+type IPressableProps = Omit<
+  React.ComponentProps<typeof UIPressable>,
+  'context'
+> &
+  VariantProps<typeof pressableStyle>;
+const Pressable = React.forwardRef(
+  (
+    { className, ...props }: { className?: string } & IPressableProps,
+    ref?: any
+  ) => {
     return (
       <UIPressable
         {...props}
@@ -25,3 +42,6 @@ export const Pressable = React.forwardRef(
     );
   }
 );
+
+Pressable.displayName = 'Pressable';
+export { Pressable };