diff --git a/example/storybook/src/ui/core-concepts/ThemedLibrary/index.stories.mdx b/example/storybook/src/ui/core-concepts/ThemedLibrary/index.stories.mdx index 30f7ef7259..038b09f542 100644 --- a/example/storybook/src/ui/core-concepts/ThemedLibrary/index.stories.mdx +++ b/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 diff --git a/example/storybook/src/ui/getting-started/Installation/content1.tsx b/example/storybook/src/ui/getting-started/Installation/content1.tsx index 1547f9c4d4..2327ea4840 100644 --- a/example/storybook/src/ui/getting-started/Installation/content1.tsx +++ b/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, diff --git a/example/storybook/src/ui/getting-started/incremental-adoption/index.stories.mdx b/example/storybook/src/ui/getting-started/incremental-adoption/index.stories.mdx index 1abc6af809..456567650e 100644 --- a/example/storybook/src/ui/getting-started/incremental-adoption/index.stories.mdx +++ b/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). diff --git a/example/storybook/src/ui/performance/overview/index.stories.mdx b/example/storybook/src/ui/performance/overview/index.stories.mdx index 70e0c49fac..319809711f 100644 --- a/example/storybook/src/ui/performance/overview/index.stories.mdx +++ b/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). = T extends any : `$${T}-${Permutations, ''>}` : never; -type StatePropsCombination = Permutations; -type PlatformPropsCombination = Permutations; -type MediaQueryCombination = Permutations; -type ColorModeCombination = Permutations; -type ThemeCombination = Permutations<`t_${GlobalThemes}`, keyof Aliases>; +type StatePropsCombination = Permutations; +type PlatformPropsCombination = Permutations; +type MediaQueryCombination = Permutations; +type ColorModeCombination = Permutations; +type ThemeCombination = Permutations<`t_${GlobalThemes}`, T>; type LastPart = T extends `${string}-${infer Rest}` ? LastPart : T; -export type PropsCombinations = - | StatePropsCombination - | PlatformPropsCombination - | MediaQueryCombination - | ColorModeCombination - | ThemeCombination; +export type UtilityPropsCombinations = + | StatePropsCombination + | PlatformPropsCombination + | MediaQueryCombination + | ColorModeCombination + | ThemeCombination; export type UtilityProps< GenericComponentStyles, @@ -923,7 +923,38 @@ export type UtilityProps< keyof GenericComponentProps > & Partial<{ - [key in PropsCombinations]?: LastPart extends keyof Aliases + [key in UtilityPropsCombinations< + Extract, string> + >]?: LastPart extends keyof PropertyTokenType + ? PropertyTokenType[LastPart] extends 'sizes' + ? + | WithSizeNegativeValue + | ExtendRNStyle, LastPart> + : PropertyTokenType[LastPart] extends 'space' + ? + | WithNegativeValue< + StringifyToken< + keyof GSConfig['tokens'][PropertyTokenType[LastPart]] + > + > + | ExtendRNStyle, LastPart> + : PropertyTokenType[LastPart] extends keyof GSConfig['tokens'] + ? + | StringifyToken< + keyof GSConfig['tokens'][PropertyTokenType[LastPart]] + > + | ExtendRNStyle, LastPart> + : LastPart extends keyof GetRNStyles + ? GetRNStyles[LastPart] + : never + : LastPart extends keyof GetRNStyles + ? GetRNStyles[LastPart] + : never; + }> & + Partial<{ + [key in UtilityPropsCombinations< + keyof Aliases + >]?: LastPart extends keyof Aliases ? Aliases[LastPart] extends keyof GetRNStyles ? PropertyTokenType[Aliases[LastPart]] extends 'sizes' ? diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md index 9f08a61c44..97fef94e11 100644 --- a/packages/themed/CHANGELOG.md +++ b/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 diff --git a/packages/themed/package.json b/packages/themed/package.json index 9711d4c74d..949a3edc52 100644 --- a/packages/themed/package.json +++ b/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",