From fcf1e8e636e80ca2941fac5e84ee068111907d8c Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 4 Jun 2024 13:14:46 +0530 Subject: [PATCH 1/3] fix: updated patterns in tailwind config --- .../src/tailwind.config.js | 18 +----------------- example/storybook-v7/tailwind.config.js | 18 +----------------- 2 files changed, 2 insertions(+), 34 deletions(-) diff --git a/example/storybook-nativewind/src/tailwind.config.js b/example/storybook-nativewind/src/tailwind.config.js index 82ea20c53..38f8009f4 100644 --- a/example/storybook-nativewind/src/tailwind.config.js +++ b/example/storybook-nativewind/src/tailwind.config.js @@ -10,23 +10,7 @@ module.exports = { safelist: [ { pattern: - /border-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, - }, - { - pattern: - /bg-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, - }, - { - pattern: - /text-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, - }, - { - pattern: - /stroke-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, - }, - { - pattern: - /fill-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, + /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, }, ], theme: { diff --git a/example/storybook-v7/tailwind.config.js b/example/storybook-v7/tailwind.config.js index 82ea20c53..38f8009f4 100644 --- a/example/storybook-v7/tailwind.config.js +++ b/example/storybook-v7/tailwind.config.js @@ -10,23 +10,7 @@ module.exports = { safelist: [ { pattern: - /border-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, - }, - { - pattern: - /bg-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, - }, - { - pattern: - /text-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, - }, - { - pattern: - /stroke-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, - }, - { - pattern: - /fill-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, + /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, }, ], theme: { From 437a2b8990d903c635aa97cc5efb4709fa268692 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 4 Jun 2024 15:27:20 +0530 Subject: [PATCH 2/3] fix: icon component cssInterop --- .../src/core-components/nativewind/icon/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx index 7177921ad..4dbd424c1 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx @@ -73,10 +73,12 @@ cssInterop(UIIcon, { className: { target: 'style', nativeStyleToProp: { - height: 'height', - width: 'width', - fill: 'fill', - color: 'color', + height: true, + width: true, + // @ts-ignore + fill: true, + color: true, + stroke: true, }, }, }); From c6370b71219e599364256c169c22066b9f7e4931 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Wed, 5 Jun 2024 14:49:41 +0530 Subject: [PATCH 3/3] fix: suggested PR changes --- .../components/Avatar/index.nw.stories.mdx | 6 ++--- .../src/components/Fab/index.nw.stories.mdx | 4 ++-- .../components/Tooltip/index.nw.stories.mdx | 2 +- .../nativewind/avatar/index.tsx | 2 +- .../nativewind/popover/index.tsx | 24 +++++++++---------- .../nativewind/textarea/index.tsx | 4 ++-- 6 files changed, 20 insertions(+), 22 deletions(-) diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx index 9d3490ed0..5ad9930b6 100644 --- a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx @@ -288,7 +288,7 @@ An Avatar component with an icon combines a graphical symbol or icon with a user {/* User is imported from 'lucide-react-native' */} - + Ronald Richards @@ -298,7 +298,7 @@ An Avatar component with an icon combines a graphical symbol or icon with a user {/* User is imported from 'lucide-react-native' */} - + Kevin James @@ -361,7 +361,7 @@ An Avatar component with an image incorporates a user or entity representation u uri: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', }} /> - + Arlene McCoy diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx index 7b9627b8d..6e428290e 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -490,8 +490,8 @@ A Fab component with an icon and text combines a visual icon with accompanying t className='max-w-96 border rounded-lg border-outline-200 py-[56px] px-6 mx-5 bg-background-100' > - - Search + + Search diff --git a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx index a6ade179c..1381a5b5d 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx @@ -591,7 +591,7 @@ A tooltip component with an icon is a user interface element that provides conte trigger={(triggerProps) => { return ( - + ) }} diff --git a/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx index 163e02a65..36657a742 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx @@ -61,7 +61,7 @@ const avatarGroupStyle = tva({ }); const avatarBadgeStyle = tva({ - base: 'w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-white border-2', + base: 'w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-background-0 border-2', parentVariants: { size: { 'xs': 'w-2 h-2', diff --git a/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx index 44d627f51..ba365ef62 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx @@ -1,6 +1,11 @@ 'use client'; - import React from 'react'; +import { View, Pressable, Platform, ScrollView } from 'react-native'; +import { + Motion, + createMotionAnimatedComponent, + AnimatePresence, +} from '@legendapp/motion'; import { createPopover } from '@gluestack-ui/popover'; import { tva } from '@gluestack-ui/nativewind-utils/tva'; import { @@ -11,14 +16,6 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { View, Pressable, Platform, ScrollView } from 'react-native'; - -import { - Motion, - createMotionAnimatedComponent, - AnimatePresence, -} from '@legendapp/motion'; - const AnimatedPressable = createMotionAnimatedComponent(Pressable); const SCOPE = 'POPOVER'; const UIPopover = createPopover({ @@ -58,8 +55,9 @@ const popoverStyle = tva({ }, }, }); + const popoverArrowStyle = tva({ - base: 'bg-background-50 z-1 absolute overflow-hidden h-3.5 w-3.5', + base: 'bg-background-50 z-[1] absolute overflow-hidden h-3.5 w-3.5', }); const popoverBackdropStyle = tva({ @@ -71,18 +69,18 @@ const popoverBodyStyle = tva({ }); const popoverCloseButtonStyle = tva({ - base: 'group/popover-close-button z-10 p-2 rounded-sm data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer', + base: 'group/popover-close-button z-[1] rounded-sm data-[focus-visible=true]:web:bg-background-100 web:outline-0 web:cursor-pointer', }); const popoverContentStyle = tva({ base: 'bg-background-50 rounded-lg overflow-hidden', parentVariants: { size: { - xs: 'w-[60%] max-w-[360px] min-w-[240px]', + xs: 'w-[60%] max-w-[360px]', sm: 'w-[70%] max-w-[420px]', md: 'w-[80%] max-w-[510px]', lg: 'w-[90%] max-w-[640px]', - full: 'w-[100%]', + full: 'w-full', }, }, }); diff --git a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx index 01d2c4c6d..df7f4b952 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx @@ -24,12 +24,12 @@ cssInterop(UITextarea, { className: 'style' }); cssInterop(UITextarea.Input, { className: 'style' }); const textareaStyle = tva({ - base: 'w-full h-[100px] border border-background-300 rounded hover:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:hover:border-background-300', + base: 'w-full h-[100px] border border-background-300 rounded data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:data-[hover=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:data-[hover=true]:border-background-300', variants: { variant: { default: - 'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-primary-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-primary-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700 ', + 'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:border-primary-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-primary-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-error-700 ', }, size: { sm: '',