Merge pull request #2090 from gluestack/release/@gluestack-style/reac…

…[email protected]

Release/@gluestack style/[email protected]

example/storybook-nativewind/package.json

@@ -27,7 +27,7 @@
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^0.17.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
-    "@gluestack-style/react": "^1.0.53",
+    "@gluestack-style/react": "^1.0.54",
     "@gluestack-ui/config": "^1.1.17",
     "@gluestack-ui/themed": "^1.1.22",
     "@gluestack/design-system": "^0.5.36",

example/storybook-nativewind/src/core-components/nativewind/box/styles.tsx

@@ -1,10 +1,10 @@
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Platform } from 'react-native';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const baseStyle = isWeb
+  ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
 
-const baseStyle = Platform.select({
-  web: 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none',
-  default: '',
-});
 export const boxStyle = tva({
   base: baseStyle,
 });

example/storybook-nativewind/src/core-components/nativewind/card/styles.tsx

@@ -1,9 +1,7 @@
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Platform } from 'react-native';
-const baseStyle = Platform.select({
-  web: 'flex flex-col relative z-0',
-  default: '',
-});
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+
 export const cardStyle = tva({
   base: baseStyle,
   variants: {

example/storybook-nativewind/src/core-components/nativewind/center/styles.tsx

@@ -1,9 +1,8 @@
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Platform } from 'react-native';
-const baseStyle = Platform.select({
-  web: 'flex flex-col relative z-0',
-  default: '',
-});
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+
 export const centerStyle = tva({
   base: `justify-center items-center ${baseStyle}`,
 });

example/storybook-nativewind/src/core-components/nativewind/heading/styles.tsx

@@ -1,10 +1,9 @@
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Platform } from 'react-native';
 
-const baseStyle = Platform.select({
-  web: 'font-sans tracking-sm bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word',
-  default: '',
-});
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+const baseStyle = isWeb
+  ? 'font-sans tracking-sm bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word'
+  : '';
 
 export const headingStyle = tva({
   base: `text-typography-900 font-bold font-heading tracking-sm my-0 ${baseStyle}`,

example/storybook-nativewind/src/core-components/nativewind/hstack/styles.tsx

@@ -1,9 +1,10 @@
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Platform } from 'react-native';
-const baseStyle = Platform.select({
-  web: 'flex relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none',
-  default: '',
-});
+
+const baseStyle = isWeb
+  ? 'flex relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
 export const hstackStyle = tva({
   base: `flex-row ${baseStyle}`,
   variants: {

example/storybook-nativewind/src/core-components/nativewind/input/index.tsx

@@ -95,7 +95,7 @@ const inputSlotStyle = tva({
 });
 
 const inputFieldStyle = tva({
-  base: 'flex-1 text-typography-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500 h-full',
+  base: 'flex-1 text-typography-900 py-auto px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
 
   parentVariants: {
     variant: {
@@ -105,17 +105,17 @@ const inputFieldStyle = tva({
     },
 
     size: {
-      '2xs': 'text-2xs leading-[0px]',
-      'xs': 'text-xs leading-[0px]',
-      'sm': 'text-sm leading-[0px]',
-      'md': 'text-base leading-[0px]',
-      'lg': 'text-lg leading-[0px]',
-      'xl': 'text-xl leading-[0px]',
-      '2xl': 'text-2xl leading-[0px]',
-      '3xl': 'text-3xl leading-[0px]',
-      '4xl': 'text-4xl leading-[0px]',
-      '5xl': 'text-5xl leading-[0px]',
-      '6xl': 'text-6xl leading-[0px]',
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
     },
   },
 });

example/storybook-nativewind/src/core-components/nativewind/text/styles.tsx

@@ -1,10 +1,9 @@
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Platform } from 'react-native';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
 
-const baseStyle = Platform.select({
-  web: 'font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word',
-  default: '',
-});
+const baseStyle = isWeb
+  ? 'font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word'
+  : '';
 
 export const textStyle = tva({
   base: `text-typography-700 font-normal font-body ${baseStyle}`,

example/storybook-nativewind/src/core-components/nativewind/vstack/styles.tsx

@@ -1,9 +1,10 @@
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Platform } from 'react-native';
-const baseStyle = Platform.select({
-  web: 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none',
-  default: '',
-});
+
+const baseStyle = isWeb
+  ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
 export const vstackStyle = tva({
   base: `flex-col ${baseStyle}`,
   variants: {

packages/config/package.json

@@ -37,7 +37,7 @@
     "@expo/html-elements": "latest",
     "@gluestack-style/animation-resolver": "1.0.4",
     "@gluestack-style/legend-motion-animation-driver": "1.0.3",
-    "@gluestack-style/react": "1.0.53",
+    "@gluestack-style/react": "1.0.54",
     "@gluestack-ui/accordion": "1.0.4",
     "@gluestack-ui/actionsheet": "0.2.41",
     "@gluestack-ui/alert": "0.1.13",
@@ -72,7 +72,7 @@
     "@legendapp/motion": "latest"
   },
   "peerDependencies": {
-    "@gluestack-style/react": ">=1.0",
+    "@gluestack-style/react": ">=1.0.54",
     "@gluestack-ui/themed": ">=1.1.22"
   },
   "release-it": {

packages/nativewind/utils/IsWeb/index.d.ts

@@ -0,0 +1 @@
+export declare const isWeb = false;

packages/nativewind/utils/IsWeb/index.js

@@ -0,0 +1 @@
+export const isWeb = false;

packages/nativewind/utils/IsWeb/index.ts

@@ -0,0 +1 @@
+export const isWeb = false;

packages/nativewind/utils/IsWeb/index.web.d.ts

@@ -0,0 +1 @@
+export declare const isWeb = true;

packages/nativewind/utils/IsWeb/index.web.js

@@ -0,0 +1 @@
+export const isWeb = true;

packages/nativewind/utils/IsWeb/index.web.ts

@@ -0,0 +1 @@
+export const isWeb = true;

packages/nativewind/utils/cn/index.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
-  return twMerge(clsx(inputs));
+    return twMerge(clsx(inputs));
 }

packages/nativewind/utils/context/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const ParentContext: import('react').Context<{}>;
+export declare const ParentContext: import("react").Context<{}>;
 export declare const useParentContext: () => any;

packages/nativewind/utils/context/index.js

@@ -2,5 +2,5 @@
 import { createContext, useContext } from 'react';
 export const ParentContext = createContext({});
 export const useParentContext = () => {
-  return useContext(ParentContext);
+    return useContext(ParentContext);
 };

packages/nativewind/utils/cssInterop/index.js

@@ -1,2 +1,2 @@
-const cssInterop = (_A, _B) => {};
+const cssInterop = (_A, _B) => { };
 export { cssInterop };

packages/nativewind/utils/flush/index.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
-export declare function flush(): React.DetailedReactHTMLElement<
-  {
+export declare function flush(): React.DetailedReactHTMLElement<{
     id: string;
     key: string;
     dangerouslySetInnerHTML: {
-      __html: string;
+        __html: string;
     };
-  },
-  HTMLElement
->;
+}, HTMLElement>;
 export declare function setFlushStyles(styles: any): void;

packages/nativewind/utils/flush/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
 var flushStyles = '';
 export function flush() {
-  return React.createElement('style', {
-    id: 'nativewind-style',
-    key: 'nativewind-style',
-    dangerouslySetInnerHTML: {
-      __html: flushStyles,
-    },
-  });
+    return React.createElement('style', {
+        id: 'nativewind-style',
+        key: 'nativewind-style',
+        dangerouslySetInnerHTML: {
+            __html: flushStyles,
+        },
+    });
 }
 export function setFlushStyles(styles) {
-  flushStyles = styles;
+    flushStyles = styles;
 }

packages/nativewind/utils/package.json

@@ -17,7 +17,7 @@
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
-  "version": "1.0.6",
+  "version": "1.0.11-alpha.0",
   "react-native": "src/index",
   "source": "src/index",
   "scripts": {
@@ -26,11 +26,13 @@
     "remove": "rm -rf ../../../node_modules/react-native-css-interop",
     "clean": "rm -rf lib",
     "dev:web": "cd example/native && yarn web --clear",
-    "storybook": "cd example/native/storybook && yarn web"
+    "storybook": "cd example/native/storybook && yarn web",
+    "postinstall": "node ./scripts/test.js"
   },
   "devDependencies": {
     "@types/react": "^18.0.22",
     "babel-plugin-transform-remove-console": "^6.9.4",
+    "patch-package": "^8.0.0",
     "react": "^18.1.0",
     "react-native-builder-bob": "^0.20.1",
     "tsconfig": "7",
@@ -41,6 +43,7 @@
     "tailwind-variants": "^0.1.20"
   },
   "peerDependencies": {
+    "patch-package": ">=8",
     "react": ">=16"
   },
   "react-native-builder-bob": {
@@ -68,7 +71,9 @@
     "withStyleContext",
     "withStyleContextAndStates",
     "cssInterop",
-    "flush"
+    "flush",
+    "scripts",
+    "IsWeb"
   ],
   "jest": {
     "preset": "jest-expo",