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

…[email protected]

Release/@gluestack style/[email protected]

example/storybook/src/ui/core-concepts/ThemedLibrary/index.stories.mdx

@@ -38,9 +38,9 @@ After that, we enhance the components with accessibility features, interactivity
 - Themes
 - Overwriting components base styles
 
-`@gluestack-ui/config` exports a config file that allows us to manipulate the theme tokens and add new themes. Theme tokens are standardized values that represent various design attributes, such as colors, typography settings, spacing, and more. These tokens serve as a consistent and centralized way to define and manage the visual properties of UI components across your application. Customizing these tokens can also be done, for more information refer to this [link](ui/docs/theme-configuration/customizing-theme).
+`@gluestack-ui/config` exports a config file that allows us to manipulate the theme tokens and add new themes. Theme tokens are standardized values that represent various design attributes, such as colors, typography settings, spacing, and more. These tokens serve as a consistent and centralized way to define and manage the visual properties of UI components across your application. Customizing these tokens can also be done, for more information refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme).
 
-Component styling is accomplished through [`@gluestack-style/react`](https://gluestack.io/style). You can customize the styles of each component, and detailed information related to that is available [here](ui/docs/theme-configuration/customizing-theme).
+Component styling is accomplished through [`@gluestack-style/react`](https://gluestack.io/style). You can customize the styles of each component, and detailed information related to that is available [here](https://gluestack.io/ui/docs/theme-configuration/customizing-theme).
 
 ## Usage
 

example/storybook/src/ui/getting-started/Installation/content1.tsx

@@ -1,8 +1,34 @@
+function getTimeAgoString(pastDate: any) {
+  const currentDate = new Date();
+  const timeDifference = currentDate.getTime() - pastDate.getTime();
+
+  if (timeDifference < 60000) {
+    return 'just now';
+  } else if (timeDifference < 3600000) {
+    const minutes = Math.floor(timeDifference / 60000);
+    return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
+  } else if (timeDifference < 86400000) {
+    const hours = Math.floor(timeDifference / 3600000);
+    return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
+  } else if (timeDifference < 604800000) {
+    const days = Math.floor(timeDifference / 86400000);
+    return `${days} day${days !== 1 ? 's' : ''} ago`;
+  } else if (timeDifference < 2592000000) {
+    const weeks = Math.floor(timeDifference / 604800000);
+    return `${weeks} week${weeks !== 1 ? 's' : ''} ago`;
+  } else if (timeDifference < 31536000000) {
+    const months = Math.floor(timeDifference / 2592000000);
+    return `${months} month${months !== 1 ? 's' : ''} ago`;
+  } else {
+    const years = Math.floor(timeDifference / 31536000000);
+    return `${years} year${years !== 1 ? 's' : ''} ago`;
+  }
+}
 export const content1 = [
   {
     title: 'Building gluestack-style',
     name: 'Sanket Sahu',
-    date: '2 weeks ago',
+    date: getTimeAgoString(new Date('2023-07-08')),
     bannerImage: '/images/sanket-react-nexus.png',
     link: 'https://www.youtube.com/watch?v=EFTCeK8aXTU',
     isExternal: true,

example/storybook/src/ui/getting-started/incremental-adoption/index.stories.mdx

@@ -24,8 +24,8 @@ Incremental adoption is a strategy for implementing changes gradually instead of
 ### If you are building a universal app:
 
 - Install `@gluestack-ui/themed`
-  - Follow [these](ui/docs/guides/install-expo) steps if you are using Expo
-  - Follow [these](ui/docs/install-rn) steps if you are using React Native Bare App.
+  - Follow [these](https://gluestack.io/ui/docs/guides/install-expo) steps if you are using Expo
+  - Follow [these](https://gluestack.io/ui/docs/guides/install-rn) steps if you are using React Native Bare App.
 
 ## How to incrementally add @gluestack-ui/themed to your Project?
 
@@ -46,4 +46,4 @@ Similarly, when needed you can replace the components from `X-Components` with c
 
 If you had made customizations to the older components from `X-Components` or the design from `X-Components` is completely different from `@gluestack-ui/themed`, you can still incorporate those customizations into the new components from `@gluestack-ui/themed`. The theming capabilities of `@gluestack-ui/themed` allow you to customize the appearance of the components to match your specific requirements.
 
-To customize your theme, please follow the steps mentioned in the [docs](ui/docs/theme-configuration/customizing-theme).
+To customize your theme, please follow the steps mentioned in the [docs](https://gluestack.io/ui/docs/theme-configuration/customizing-theme).

example/storybook/src/ui/performance/overview/index.stories.mdx

@@ -31,7 +31,7 @@ This results in a smaller and optimized bundle for the application, thus enhanci
 
 ## Benchmark
 
-We tested the performance of a webpage, built with `gluestack-ui` and a large number of elements, using Lighthouse and achieved a **high score of 100 for Performance, 97 for Accessibility, 92 for Best Practices, and 100 for SEO**. You can check out the website and see the Lighthouse report for yourself. You can see more in-depth report [here](ui/docs/performance/benchmarks).
+We tested the performance of a webpage, built with `gluestack-ui` and a large number of elements, using Lighthouse and achieved a **high score of 100 for Performance, 97 for Accessibility, 92 for Best Practices, and 100 for SEO**. You can check out the website and see the Lighthouse report for yourself. You can see more in-depth report [here](https://gluestack.io/ui/docs/performance/benchmarks).
 
 <img
   src="/images/PerformanceScreenshot.png"

packages/styled/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 1.0.48
+
+### Patch Changes
+
+- Fixed React Native style props in utility props
+
 ## 1.0.47
 
 ### Patch Changes

packages/styled/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "keywords": [
     "React Native",
     "Next.js",

packages/styled/react/src/types.ts

@@ -893,22 +893,22 @@ type Permutations<T extends string, U extends string | ''> = T extends any
     : `$${T}-${Permutations<Exclude<U, T>, ''>}`
   : never;
 
-type StatePropsCombination = Permutations<IState, keyof Aliases>;
-type PlatformPropsCombination = Permutations<PLATFORMS, keyof Aliases>;
-type MediaQueryCombination = Permutations<IMediaQueries, keyof Aliases>;
-type ColorModeCombination = Permutations<COLORMODES, keyof Aliases>;
-type ThemeCombination = Permutations<`t_${GlobalThemes}`, keyof Aliases>;
+type StatePropsCombination<T extends string> = Permutations<IState, T>;
+type PlatformPropsCombination<T extends string> = Permutations<PLATFORMS, T>;
+type MediaQueryCombination<T extends string> = Permutations<IMediaQueries, T>;
+type ColorModeCombination<T extends string> = Permutations<COLORMODES, T>;
+type ThemeCombination<T extends string> = Permutations<`t_${GlobalThemes}`, T>;
 
 type LastPart<T extends string> = T extends `${string}-${infer Rest}`
   ? LastPart<Rest>
   : T;
 
-export type PropsCombinations =
-  | StatePropsCombination
-  | PlatformPropsCombination
-  | MediaQueryCombination
-  | ColorModeCombination
-  | ThemeCombination;
+export type UtilityPropsCombinations<Props extends string> =
+  | StatePropsCombination<Props>
+  | PlatformPropsCombination<Props>
+  | MediaQueryCombination<Props>
+  | ColorModeCombination<Props>
+  | ThemeCombination<Props>;
 
 export type UtilityProps<
   GenericComponentStyles,
@@ -923,7 +923,38 @@ export type UtilityProps<
     keyof GenericComponentProps
   > &
   Partial<{
-    [key in PropsCombinations]?: LastPart<key> extends keyof Aliases
+    [key in UtilityPropsCombinations<
+      Extract<keyof GetRNStyles<GenericComponentStyles>, string>
+    >]?: LastPart<key> extends keyof PropertyTokenType
+      ? PropertyTokenType[LastPart<key>] extends 'sizes'
+        ?
+            | WithSizeNegativeValue<GSConfig['tokens']>
+            | ExtendRNStyle<GetRNStyles<GenericComponentStyles>, LastPart<key>>
+        : PropertyTokenType[LastPart<key>] extends 'space'
+        ?
+            | WithNegativeValue<
+                StringifyToken<
+                  keyof GSConfig['tokens'][PropertyTokenType[LastPart<key>]]
+                >
+              >
+            | ExtendRNStyle<GetRNStyles<GenericComponentStyles>, LastPart<key>>
+        : PropertyTokenType[LastPart<key>] extends keyof GSConfig['tokens']
+        ?
+            | StringifyToken<
+                keyof GSConfig['tokens'][PropertyTokenType[LastPart<key>]]
+              >
+            | ExtendRNStyle<GetRNStyles<GenericComponentStyles>, LastPart<key>>
+        : LastPart<key> extends keyof GetRNStyles<GenericComponentStyles>
+        ? GetRNStyles<GenericComponentStyles>[LastPart<key>]
+        : never
+      : LastPart<key> extends keyof GetRNStyles<GenericComponentStyles>
+      ? GetRNStyles<GenericComponentStyles>[LastPart<key>]
+      : never;
+  }> &
+  Partial<{
+    [key in UtilityPropsCombinations<
+      keyof Aliases
+    >]?: LastPart<key> extends keyof Aliases
       ? Aliases[LastPart<key>] extends keyof GetRNStyles<GenericComponentStyles>
         ? PropertyTokenType[Aliases[LastPart<key>]] extends 'sizes'
           ?

packages/themed/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @gluestack-ui/themed
 
+## 1.1.5
+
+### Patch Changes
+
+- Fixed React Native style props in utility props
+- Updated dependencies
+  - @gluestack-style/react@1.0.48
+
 ## 1.1.4
 
 ### Patch Changes

packages/themed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -68,7 +68,7 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@gluestack-style/react": "^1.0.44",
+    "@gluestack-style/react": "^1.0.48",
     "@types/react-native": "^0.72.3",
     "file-loader": "^6.2.0",
     "react": "^18.2.0",