From 371a2f65a5a8e52a41d6d49644ed67ff1f6941d1 Mon Sep 17 00:00:00 2001 From: viraj-10 Date: Wed, 19 Jun 2024 11:51:45 +0530 Subject: [PATCH 1/2] fix: added docs in preview --- example/storybook-nativewind/.storybook/preview.js | 5 +++-- .../nativewind/gluestack-ui-provider/index.web.tsx | 2 ++ yarn.lock | 7 +++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js index d1677338c..0d68e2014 100644 --- a/example/storybook-nativewind/.storybook/preview.js +++ b/example/storybook-nativewind/.storybook/preview.js @@ -42,6 +42,7 @@ export const parameters = { 'VS Code Extensions', 'Figma UI Kit', 'CLI', + 'gluestack-ui-nativewind-utils', ], 'Core Concepts', ['Accessibility', 'Universal'], @@ -79,7 +80,7 @@ export const parameters = { 'Overlay', ['AlertDialog', 'Menu', 'Modal', 'Popover', 'Tooltip'], 'Disclosure', - ['Actionsheet', 'Accordion'], + ['Actionsheet', 'Accordion', 'BottomSheet'], 'Media And Icons', ['Avatar', 'Image', 'Icon'], 'Others', @@ -88,7 +89,7 @@ export const parameters = { 'Apps', ['Dashboard App', 'Starter Kit', 'Storybook App'], 'Guides', - ['Recipes', ['Linear Gradient']], + ['Recipes', ['Linear Gradient'], 'More', ['Troubleshooting']], ], icons: [ { diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx index 08db02d87..3e641e262 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx @@ -31,6 +31,8 @@ export function GluestackUIProvider({ if (config[mode] && typeof document !== 'undefined') { const element = document.documentElement; if (element) { + element.classList.add(mode); + element.classList.remove(mode === 'light' ? 'dark' : 'light'); const head = element.querySelector('head'); let style = head?.querySelector(`[id='${styleTagId}']`); if (!style) { diff --git a/yarn.lock b/yarn.lock index 114f1a230..ae77b004c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2636,6 +2636,13 @@ "@gluestack-ui/utils" "^0.1.12" "@react-native-aria/focus" "^0.2.9" +"@gluestack-ui/utils@0.1.12": + version "0.1.12" + resolved "https://registry.yarnpkg.com/@gluestack-ui/utils/-/utils-0.1.12.tgz#0bb3400c9315fb6c0fd1bc697b20d80f82cd3899" + integrity sha512-OhOkljhr7foCUJP//8LwMN3EX4/pniFWmQpk1yDJMQL9DaTJbP7s3HsnTM7UzH2kp9DR1Utoz9Y9WscH3ajLpQ== + dependencies: + "@react-native-aria/focus" "^0.2.9" + "@gluestack/design-system@0.5.36": version "0.5.36" resolved "https://registry.yarnpkg.com/@gluestack/design-system/-/design-system-0.5.36.tgz#ee9c6a1dc3d0806eda5bd5781b58c3e8b3621dcf" From f0eab258d88ffe64726cca288b909909da83c670 Mon Sep 17 00:00:00 2001 From: viraj-10 Date: Wed, 19 Jun 2024 16:49:17 +0530 Subject: [PATCH 2/2] feat: added ring indicator color --- .../src/core-components/nativewind/button/index.tsx | 8 ++++---- .../src/core-components/nativewind/checkbox/index.tsx | 2 +- .../src/core-components/nativewind/fab/index.tsx | 2 +- .../nativewind/gluestack-ui-provider/config.ts | 10 ++++++++++ .../src/core-components/nativewind/input/index.tsx | 4 ++-- .../src/core-components/nativewind/pressable/index.tsx | 2 +- .../src/core-components/nativewind/switch/index.tsx | 2 +- .../src/core-components/nativewind/textarea/index.tsx | 2 +- example/storybook-nativewind/src/tailwind.config.js | 5 +++++ 9 files changed, 26 insertions(+), 11 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx index 312c8f378..6433e4500 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx @@ -105,13 +105,13 @@ const buttonStyle = tva({ variants: { action: { primary: - 'bg-primary-500 hover:bg-primary-600 active:bg-primary-700 border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:web:ring-primary-300', + 'bg-primary-500 hover:bg-primary-600 active:bg-primary-700 border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:web:ring-indicator-info', secondary: - 'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:web:ring-secondary-300', + 'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:web:ring-indicator-info', positive: - 'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:web:ring-success-300', + 'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:web:ring-indicator-info', negative: - 'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:web:ring-error-300', + 'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:web:ring-indicator-info', default: 'bg-transparent hover:bg-background-50 active:bg-transparent', }, variant: { diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx index 7bb53e6b3..dfbbe9c0b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx @@ -115,7 +115,7 @@ const checkboxStyle = tva({ }); const checkboxIndicatorStyle = tva({ - 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', + 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-indicator-primary 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]', diff --git a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx index 5d8c21a90..ede33968b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx @@ -85,7 +85,7 @@ cssInterop(UIFab.Icon, { }); const fabStyle = tva({ - base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-primary-700 shadow-hard-2', + base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-info shadow-hard-2', variants: { size: { sm: 'px-2.5 py-2.5', diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts index ce35c02d3..36d9b7d09 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts +++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts @@ -148,6 +148,11 @@ export const config = { '--color-background-success': '237 252 242', '--color-background-muted': '247 248 247', '--color-background-info': '235 248 254', + + /* Focus Ring Indicator */ + '--color-indicator-primary': '55 55 55', + '--color-indicator-info': '83 153 236', + '--color-indicator-error': '185 28 28', }), dark: vars({ '--color-primary-0': '130 130 130', @@ -295,5 +300,10 @@ export const config = { '--color-background-success': '28 43 33', '--color-background-muted': '51 51 51', '--color-background-info': '26 40 46', + + /* Focus Ring Indicator */ + '--color-indicator-primary': '247 247 247', + '--color-indicator-info': '161 199 245', + '--color-indicator-error': '232 70 69', }), }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx index 2dc78b83f..956139041 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx @@ -90,10 +90,10 @@ const inputStyle = tva({ 'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700', outline: - 'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-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-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', + 'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error 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-indicator-error 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-indicator-error', rounded: - 'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-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-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', + 'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error 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-indicator-error 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-indicator-error', }, }, }); diff --git a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx index c1d5acd64..dddbf88e7 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx @@ -17,7 +17,7 @@ const UIPressable = createPressable({ }); const pressableStyle = tva({ - 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', + base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-indicator-info data-[focus-visible=true]:ring-2 data-[disabled=true]:opacity-40', }); cssInterop(UIPressable, { className: 'style' }); diff --git a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx index 59aa185df..b1b5b3848 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx @@ -18,7 +18,7 @@ const UISwitch = createSwitch({ cssInterop(UISwitch, { className: 'style' }); const switchStyle = tva({ - base: 'data-[focus=true]:outline-0 data-[focus=true]:ring-2 data-[focus=true]:ring-primary-700 web:cursor-pointer disabled:cursor-not-allowed data-[disabled=true]:opacity-40 data-[invalid=true]:border-error-700 data-[invalid=true]:rounded-xl data-[invalid=true]:border-2', + base: 'data-[focus=true]:outline-0 data-[focus=true]:ring-2 data-[focus=true]:ring-indicator-primary web:cursor-pointer disabled:cursor-not-allowed data-[disabled=true]:opacity-40 data-[invalid=true]:border-error-700 data-[invalid=true]:rounded-xl data-[invalid=true]:border-2', variants: { size: { 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 4fd096121..579f0d9e0 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx @@ -31,7 +31,7 @@ const textareaStyle = tva({ 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]: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 ', + 'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error 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-indicator-primary 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-indicator-error ', }, size: { sm: '', diff --git a/example/storybook-nativewind/src/tailwind.config.js b/example/storybook-nativewind/src/tailwind.config.js index 5d7924a47..d0a12580c 100644 --- a/example/storybook-nativewind/src/tailwind.config.js +++ b/example/storybook-nativewind/src/tailwind.config.js @@ -165,6 +165,11 @@ module.exports = { light: '#FBFBFB', dark: '#181719', }, + indicator: { + primary: 'rgb(var(--color-indicator-primary)/)', + info: 'rgb(var(--color-indicator-info)/)', + error: 'rgb(var(--color-indicator-error)/)', + }, }, fontFamily: { heading: undefined,