From 16614ff3d1bcb9d3ea487a2d08a20596ea7e3ba7 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 1 Mar 2024 15:32:43 +0530 Subject: [PATCH 01/32] feat: adding nativewind link component examples --- .../nativewind/Link/index.tsx | 49 ++++-- .../nativewind/Text/index.tsx | 2 +- .../src/components/Link/Link.tsx | 5 +- .../src/components/Link/index.nw.stories.mdx | 162 ++++++++++-------- 4 files changed, 129 insertions(+), 89 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx index 10812670c3..088f33810d 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx @@ -1,47 +1,57 @@ import { createLink } from '@gluestack-ui/link'; -import { Pressable, Text, Platform } from 'react-native'; +import { Pressable, Platform } from 'react-native'; +import { Text } from '@/components/ui/Text'; import { tva, withStyleContextAndStates, + withStates, withStyleContext, + cssInterop, + VariantProps, } from '@gluestack-ui/nativewind-utils'; import React from 'react'; -import { cssInterop } from 'nativewind'; export const UILink = createLink({ // @ts-ignore Root: Platform.OS === 'web' ? withStyleContext(Pressable) : withStyleContextAndStates(Pressable), - Text: Text, + Text: Platform.OS === 'web' ? Text : withStates(Text), }); cssInterop(UILink, { className: 'style' }); cssInterop(UILink.Text, { className: 'style' }); const linkStyle = tva({ - base: 'web:outline-0 web:disabled:cursor-not-allowed web:focus-visible:outline-2 web:focus-visible:outline-primary-700 web:focus-visible:outline', + base: 'web:outline-0 web:data-[disabled=true]:cursor-not-allowed web:data-[focus-visible=true]:outline-2 web:data-[focus-visible=true]:outline-primary-700 web:data-[focus-visible=true]:outline', }); const linkTextStyle = tva({ - base: 'underline text-info-700 hover:text-info-600 hover:no-underline active:text-info-700 disabled:opacity-40', + base: 'underline text-info-700 hover:text-info-600 hover:no-underline active:text-info-700 data-[disabled=true]:opacity-40', }); -export const Link = React.forwardRef(({ className, ...props }: any, ref) => { - return ( - - ); -}); +type ILinkProps = React.ComponentProps & + VariantProps; +const Link = React.forwardRef( + ({ className, ...props }: { className?: string } & ILinkProps, ref) => { + return ( + + ); + } +); -export const LinkText = React.forwardRef( - ({ className, ...props }: any, ref) => { +type ILinkTextProps = React.ComponentProps & + VariantProps; +const LinkText = React.forwardRef( + ({ className, ...props }: { className?: string } & ILinkTextProps, ref) => { return ( { diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx index 847207f073..85b23fe3ed 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -1,5 +1,5 @@ --- -title: Link | gluestack-ui | Installation, Usage, and API +title: gluestack-ui Link Component | Installation, Usage, and API description: With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience. @@ -14,9 +14,7 @@ import { Meta } from '@storybook/addon-docs'; -import { Link } from './Link'; -import { LinkText } from '../../components-example/nativewind/Link'; -import { ArrowUpRightIcon, Icon, HStack, Text } from '@gluestack-ui/themed'; +import { Link, LinkText, ArrowUpRightIcon, Icon, HStack, Text } from './Link'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -69,9 +67,7 @@ npm i @gluestack-ui/link ### Step 2: Copy and paste the following code into your project. - ```jsx - %%-- File: components-example/nativewind/Link/index.tsx --%% - ``` + ```jsx %%-- File: components-example/nativewind/Link/index.tsx --%% ``` ### Step 3: Update the import paths to match your project setup. @@ -229,73 +225,101 @@ We have outlined the various features that ensure the Link component is accessib Link component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props). - - - - - + + + Go to + + + Pinterest + + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text }, + argsType: {}, + }} + /> + \ No newline at end of file From 4ba6b271bb30f0c24a2c6e69e3bb78988d32b948 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 1 Mar 2024 17:09:42 +0530 Subject: [PATCH 02/32] feat: added nativewind link component examples and forwardref to styleContext --- example/storybook-nativewind/babel.config.js | 4 +++ .../nativewind/Icon/index.tsx | 2 +- .../src/components/Link/Link.tsx | 17 ++++----- .../src/components/Link/index.nw.stories.mdx | 4 +-- packages/nativewind/utils/src/withStates.tsx | 21 ++++++----- .../nativewind/utils/src/withStyleContext.tsx | 16 +++++---- .../utils/src/withStyleContextAndStates.tsx | 36 ++++++++++--------- 7 files changed, 57 insertions(+), 43 deletions(-) diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js index a6d51a3d52..3b063f0ac9 100644 --- a/example/storybook-nativewind/babel.config.js +++ b/example/storybook-nativewind/babel.config.js @@ -46,6 +46,10 @@ module.exports = function (api) { __dirname, '../../packages/unstyled/button/src' ), + '@gluestack-ui/link': path.resolve( + __dirname, + '../../packages/unstyled/link/src' + ), '@gluestack-ui/accordion': path.resolve( __dirname, '../../packages/unstyled/accordion/src' diff --git a/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx index dce8e1c00f..aef1528a1b 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx @@ -8,7 +8,7 @@ export const UIIcon = createIcon({ }); const iconStyle = tva({ - base: 'text-typography-0 fill-none', + base: 'text-typography-900 fill-none', variants: { size: { '2xs': 'h-3 w-3', diff --git a/example/storybook-nativewind/src/components/Link/Link.tsx b/example/storybook-nativewind/src/components/Link/Link.tsx index df6610aaf3..9017ab1974 100644 --- a/example/storybook-nativewind/src/components/Link/Link.tsx +++ b/example/storybook-nativewind/src/components/Link/Link.tsx @@ -4,16 +4,17 @@ import { Icon } from '@/components/ui/Icon'; import { HStack } from '@/components/ui/HStack'; import { Text } from '@/components/ui/Text'; import { ArrowUpRightIcon } from 'lucide-react-native'; - const LinkBasic = ({ ...props }: any) => { return ( - - - GLUESTACK - - + <> + + + GLUESTACK + + + ); }; diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx index 85b23fe3ed..d2dcaf2b20 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -310,7 +310,7 @@ The Examples section provides visual representations of the different variants o Pinterest - + @@ -322,4 +322,4 @@ The Examples section provides visual representations of the different variants o argsType: {}, }} /> - \ No newline at end of file + diff --git a/packages/nativewind/utils/src/withStates.tsx b/packages/nativewind/utils/src/withStates.tsx index 849f31f93e..e236bf41b5 100644 --- a/packages/nativewind/utils/src/withStates.tsx +++ b/packages/nativewind/utils/src/withStates.tsx @@ -6,13 +6,16 @@ type WithStatesProps = { states?: any; }; -export const withStates = - (Component: React.ComponentType & WithStatesProps) => - ({ states, className, ...props }: React.Component & WithStatesProps) => { - const classNamesFinal = React.useMemo(() => { - if (!className) return; - extractDataClassName(className, states); - }, [className, states]); +export const withStates = (Component: React.ComponentType) => + React.forwardRef( + ({ states, className, ...props }: T & WithStatesProps, ref?: any) => { + const classNamesFinal = React.useMemo(() => { + if (!className) return; + extractDataClassName(className, states); + }, [className, states]); - return ; - }; + return ( + + ); + } + ); diff --git a/packages/nativewind/utils/src/withStyleContext.tsx b/packages/nativewind/utils/src/withStyleContext.tsx index 95008d683e..4f63c19793 100644 --- a/packages/nativewind/utils/src/withStyleContext.tsx +++ b/packages/nativewind/utils/src/withStyleContext.tsx @@ -7,11 +7,13 @@ type WithStyleContextProps = { export const withStyleContext = ( Component: React.ComponentType ) => { - return ({ context, ...props }: T & WithStyleContextProps) => { - return ( - - - - ); - }; + return React.forwardRef( + ({ context, ...props }: T & WithStyleContextProps, ref?: any) => { + return ( + + + + ); + } + ); }; diff --git a/packages/nativewind/utils/src/withStyleContextAndStates.tsx b/packages/nativewind/utils/src/withStyleContextAndStates.tsx index 0c6e1cca82..5f75051c89 100644 --- a/packages/nativewind/utils/src/withStyleContextAndStates.tsx +++ b/packages/nativewind/utils/src/withStyleContextAndStates.tsx @@ -11,20 +11,24 @@ type WithStyleContextProps = { export const withStyleContextAndStates = ( Component: React.ComponentType ) => { - return ({ - context, - className, - states, - ...props - }: T & WithStyleContextProps) => { - const classNamesFinal = React.useMemo(() => { - if (!className) return; - return extractDataClassName(className, states); - }, [className, states]); - return ( - - - - ); - }; + return React.forwardRef( + ( + { context, className, states, ...props }: T & WithStyleContextProps, + ref?: any + ) => { + const classNamesFinal = React.useMemo(() => { + if (!className) return; + return extractDataClassName(className, states); + }, [className, states]); + return ( + + + + ); + } + ); }; From 107e4bd79dd95666b5fe995d70ec13acf99ac90d Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 4 Mar 2024 13:42:24 +0530 Subject: [PATCH 03/32] fix: heading component nativewind --- .../nativewind/Heading/index.tsx | 4 - .../components/Heading/index.nw.stories.mdx | 136 +----------------- 2 files changed, 3 insertions(+), 137 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Heading/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Heading/index.tsx index 6dbd5ad242..3f89549c4e 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Heading/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Heading/index.tsx @@ -39,10 +39,6 @@ const headingStyle = tva({ 'xs': 'text-sm', }, }, - - // defaultProps: { - // size: 'lg', - // }, }); cssInterop(H4, { className: 'style' }); diff --git a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx index f817138dd0..aa3b998811 100644 --- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx @@ -1,5 +1,5 @@ --- -title: Heading | gluestack-ui | Installation, Usage, and API +title: gluestack-ui Heading Component | Installation, Usage, and API description: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6. @@ -231,14 +231,7 @@ The Examples section provides visual representations of the different variants o #### Heading Sizes -Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, and `5xl`, allowing users to customize the size of the heading according to their design requirements. The size attribute determines which HTML tag (`h1` to `h6`) will be rendered. - -- For `5xl`, `4xl`, and `3xl`, it renders `h1`. -- For `2xl`, it renders `h2`. -- For `xl`, it renders `h3`. -- For `lg`, it renders `h4`. -- For `md`, it renders `h5`. -- Finally, for `sm` and `xs`, it renders `h6`. +Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, and `5xl`, allowing users to customize the size of the heading according to their design requirements. - - -The Heading component also accepts some shorthands for basic quick styling. - - - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - bold - - - - boolean - - - false - - - {`Used to make the text bold.`} - - - - - - isTruncated - - - - boolean - - - false - - - {`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`} - - - - - - italic - - - - boolean - - - false - - - {`Used to make the text italic.`} - - - - - - underline - - - - boolean - - - false - - - {`Used underline the text.`} - - - - - - strikeThrough - - - - boolean - - - false - - - {`A horizontal line through the center of the text.`} - - - - - - highlight - - - - boolean - - - false - - - {`Used to highlight the text with a yellow background.`} - - - -
- - + \ No newline at end of file From 620cbe2cd2443b9d06839dc5ec86dd6ef27b0c3a Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 4 Mar 2024 13:58:12 +0530 Subject: [PATCH 04/32] feat: initial setup --- .github/workflows/trigger-ui-update-docs.yml | 24 ++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 .github/workflows/trigger-ui-update-docs.yml diff --git a/.github/workflows/trigger-ui-update-docs.yml b/.github/workflows/trigger-ui-update-docs.yml new file mode 100644 index 0000000000..1e395f2116 --- /dev/null +++ b/.github/workflows/trigger-ui-update-docs.yml @@ -0,0 +1,24 @@ +name: Trigger gluestack-style-website | Create PR when pushed to master + +on: + push: + branches: + - test-git-action + +jobs: + build: + name: Dispatch to 'gluestack-style-website' + runs-on: ubuntu-latest + steps: + - name: Emit repository_dispatch + uses: mvasigh/dispatch-action@main + with: + # You should create a personal access token and store it in your repository + token: ${{ secrets.MY_GITHUB_TOKEN }} + repo: ui-website + owner: gluestack + event_type: build_ui_docs + message: | + { + "repo": "ui" + } From 7f293592df8dbb9a4e322a272ee9bc7d3dbcc705 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 4 Mar 2024 14:20:37 +0530 Subject: [PATCH 05/32] feat: added branch name --- .github/workflows/trigger-ui-update-docs.yml | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/workflows/trigger-ui-update-docs.yml b/.github/workflows/trigger-ui-update-docs.yml index 1e395f2116..1c2ee38a72 100644 --- a/.github/workflows/trigger-ui-update-docs.yml +++ b/.github/workflows/trigger-ui-update-docs.yml @@ -4,6 +4,10 @@ on: push: branches: - test-git-action + pull_request: + types: [opened, reopened], + branches: + - patch jobs: build: @@ -20,5 +24,6 @@ jobs: event_type: build_ui_docs message: | { - "repo": "ui" + "repo": "ui", + "branch": "${{ github.head_ref }}" } From 0319f0d6fbd865c8e17d2ec0885cdf696a0ef1fa Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 4 Mar 2024 14:21:20 +0530 Subject: [PATCH 06/32] feat: added branch name --- .github/workflows/trigger-ui-update-docs.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/trigger-ui-update-docs.yml b/.github/workflows/trigger-ui-update-docs.yml index 1c2ee38a72..71f9938b2e 100644 --- a/.github/workflows/trigger-ui-update-docs.yml +++ b/.github/workflows/trigger-ui-update-docs.yml @@ -4,10 +4,10 @@ on: push: branches: - test-git-action - pull_request: - types: [opened, reopened], - branches: - - patch + # pull_request: + # types: [opened, reopened], + # branches: + # - patch jobs: build: From ebb38974a3ca79b452da6464d53496a77b67888f Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 4 Mar 2024 14:22:58 +0530 Subject: [PATCH 07/32] feat: added branch name --- .github/workflows/trigger-ui-update-docs.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/trigger-ui-update-docs.yml b/.github/workflows/trigger-ui-update-docs.yml index 71f9938b2e..e99bb02980 100644 --- a/.github/workflows/trigger-ui-update-docs.yml +++ b/.github/workflows/trigger-ui-update-docs.yml @@ -1,13 +1,13 @@ name: Trigger gluestack-style-website | Create PR when pushed to master on: - push: + # push: + # branches: + # - test-git-action + pull_request: + types: [opened, reopened], branches: - test-git-action - # pull_request: - # types: [opened, reopened], - # branches: - # - patch jobs: build: From 75899aa0d6065305ea973e9902895d1517e0666e Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 4 Mar 2024 14:28:03 +0530 Subject: [PATCH 08/32] feat: added branch name --- .github/workflows/trigger-ui-update-docs.yml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/.github/workflows/trigger-ui-update-docs.yml b/.github/workflows/trigger-ui-update-docs.yml index e99bb02980..b2f7a828d0 100644 --- a/.github/workflows/trigger-ui-update-docs.yml +++ b/.github/workflows/trigger-ui-update-docs.yml @@ -1,11 +1,7 @@ name: Trigger gluestack-style-website | Create PR when pushed to master on: - # push: - # branches: - # - test-git-action pull_request: - types: [opened, reopened], branches: - test-git-action From 75acf2e5925b1f67b9d365194e2086f2ae4a24e4 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Mon, 4 Mar 2024 18:21:00 +0530 Subject: [PATCH 09/32] fix: link import --- .../src/components-example/nativewind/Link/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx index 088f33810d..bb317f3a52 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx @@ -1,6 +1,6 @@ import { createLink } from '@gluestack-ui/link'; -import { Pressable, Platform } from 'react-native'; -import { Text } from '@/components/ui/Text'; +import { Pressable, Platform, Text } from 'react-native'; + import { tva, withStyleContextAndStates, From 6949b13da7625d41fd58d8b62cf060e99468987c Mon Sep 17 00:00:00 2001 From: Damini Date: Mon, 4 Mar 2024 18:46:51 +0530 Subject: [PATCH 10/32] fix: textarea examples --- .../nativewind/Textarea/index.tsx | 2 +- .../components/Textarea/index.nw.stories.mdx | 30 ++++++++++--------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx index b5a059c227..70103dc552 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx @@ -35,7 +35,7 @@ const textareaStyle = tva({ }); const textareaInputStyle = tva({ - base: 'p-3 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed', + base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed', parentVariants: { size: { sm: 'text-sm', diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx index 1a51a3bafe..d84f2f0eed 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx @@ -42,7 +42,7 @@ This is an illustration of **Textarea** component. showArgsController={true} metaData={{ code: ` -