From d09245b58eb4be50049de0a6192fd955d48536c8 Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Thu, 22 Feb 2024 15:45:02 +0530 Subject: [PATCH 01/45] feat: added examples for with-gluestack-ui components --- .../components/Alert/index.themed.stories.mdx | 62 ++- .../AlertDialog/index.themed.stories.mdx | 207 +++++++- .../Avatar/index.themed.stories.mdx | 458 +++++++++++++++- .../components/Box/index.themed.stories.mdx | 63 ++- .../Button/index.themed.stories.mdx | 328 +++++++++++- .../Checkbox/index.themed.stories.mdx | 500 +++++++++++++++++- .../HStack/index.themed.stories.mdx | 40 +- .../components/Modal/index.themed.stories.mdx | 332 +++++++++++- .../Pressable/index.themed.stories.mdx | 46 +- .../Progress/index.themed.stories.mdx | 131 ++++- .../Slider/index.themed.stories.mdx | 400 +++++++++++++- .../Spinner/index.themed.stories.mdx | 73 ++- .../components/Toast/index.themed.stories.mdx | 453 +++++++++++++++- .../Tooltip/index.themed.stories.mdx | 171 +++++- 14 files changed, 3174 insertions(+), 90 deletions(-) diff --git a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx index 035a777a83..1f316b3777 100644 --- a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx @@ -14,19 +14,20 @@ import { Meta } from '@storybook/addon-docs'; -import { Alert, AlertIcon, AlertText } from './Alert'; import { - CheckCircleIcon, - CloseCircleIcon, - Icon, BellIcon, AlertCircleIcon, Center, VStack, InfoIcon, -} from '@gluestack-ui/themed'; - -import { HStack } from '@gluestack-ui/themed'; + HStack, + Alert, + AlertIcon, + AlertText, + CheckCircleIcon, + CloseCircleIcon, + Icon, +} from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -34,9 +35,8 @@ import { Table, InlineCode, TableContainer, + CollapsibleCode, } from '@gluestack/design-system'; -import { CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; This is an illustration of **Alert** component. @@ -243,3 +243,47 @@ Explore the comprehensive details of the Alert in this document, including its i src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6300-43142%26t%3DZPsVa5mi34R2dR7W-1%26scaling%3Dscale-down%26page-id%3D6300%253A41240%26starting-point-node-id%3D6300%253A43142%26mode%3Ddesign" allowFullScreen /> + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Alert with Heading + +An example of an alert component with a heading, which further contains another alert component for displaying supplementary information. + + + + + + + Congratulations! + + + Thank you for your submission. You will receive a confirmation email shortly. + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Alert, + AlertIcon, + AlertText, + Wrapper, + CheckCircleIcon, + VStack, + Icon, + }, + argsType: {}, + }} +/> + + diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx index 3a56cadd8c..9d5eb352f0 100644 --- a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx @@ -22,8 +22,6 @@ import { AlertDialogCloseButton, AlertDialogFooter, AlertDialogBody, -} from './AlertDialog'; -import { CloseIcon, Button, ButtonText, @@ -31,9 +29,8 @@ import { Center, HStack, AlertTriangleIcon, -} from '@gluestack-ui/themed'; -import { Heading, Icon, AlertCircleIcon } from '@gluestack-ui/themed'; -import { Text, CheckCircleIcon } from '@gluestack-ui/themed'; + Text, CheckCircleIcon,Heading, Icon, AlertCircleIcon +} from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -41,11 +38,14 @@ import { Table, TableContainer, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; -import { CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; + + + + This is an illustration of **AlertDialog** component. <> @@ -541,3 +541,196 @@ Explore the comprehensive details of the AlertDialog in this document, including src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5653%253A34732%26type%3Ddesign%26node-id%3D5658-36648%26viewport%3D1433%252C11%252C0.08%26t%3DWy4Bx2pKvlcvatlJ-1%26scaling%3Dcontain%26starting-point-node-id%3D5658%253A36648%26mode%3Ddesign" allowFullScreen /> + + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### AlertDialog with semantic icon + +An example of an AlertDialog component incorporating an icon component for visually representing important information or actions. + + + +
+ +
+ { + setShowAlertDialog(false); + }} + > + + + + + + Order placed + + + + + Congratulations, your order has been placed! You will receive a confirmation email shortly. Thank you for shopping with us. + + + + + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Button, + ButtonText, + Center, + Wrapper, + AlertDialog, + AlertDialogBackdrop, + AlertDialogContent, + AlertDialogHeader, + AlertDialogCloseButton, + AlertDialogFooter, + AlertDialogBody, + Icon, + Text, + HStack, + AlertTriangleIcon, + CheckCircleIcon, + Heading, + }, + argsType: {}, + }} + /> +
+ +#### AlertDialog Sizes + +An AlertDialog component with adjustable sizes, providing flexible and visually appealing pop-up notifications and interactive prompts to users. + + + +
+ +
+ { + setShowAlertDialog(false); + }} + {...props} + > + + + + + + Order placed + + + + + You have exceeded your monthly upload limit. Please upgrade to a premium account to continue uploading. + + + + + + + + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Button, + ButtonText, + ButtonGroup, + Center, + Wrapper, + AlertDialog, + AlertDialogBackdrop, + AlertDialogContent, + AlertDialogHeader, + AlertDialogCloseButton, + AlertDialogFooter, + AlertDialogBody, + Icon, + Text, + HStack, + AlertTriangleIcon, + CheckCircleIcon, + Heading, + }, + argsType: { + size: { + control: 'select', + options: ['xs', 'sm', 'md', 'lg', 'full'], + default: 'md', + }, + }, + }} + /> +
+ diff --git a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx index af4e55f8ad..a906a852fa 100644 --- a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx @@ -16,15 +16,13 @@ import { AvatarBadge, AvatarFallbackText, AvatarImage, -} from './Avatar'; -import { HStack, VStack, Text, Icon, Heading, User, -} from '@gluestack-ui/themed'; +} from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -32,9 +30,8 @@ import { Table, TableContainer, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; -import { CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; This is an illustration of **Avatar** component. @@ -121,3 +118,454 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/ ### Features - Returns a fallback to FallbackText if given an invalid image source. + + + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Avatar with letters + +An Avatar component with text displays a stylized representation of a user or entity alongside accompanying text, providing a visual and textual identification within a user interface. + + + + + + Ronald Richards + + + + Ronald Richards + Nursing Assistant + + + + + Arlene McCoy + + + Arlene McCoy + Marketing Coordinator + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Avatar, + AvatarBadge, + AvatarFallbackText, + AvatarImage, + Text, + HStack, + VStack, + Heading, + }, + argsType: {}, + }} + /> + + +#### Avatar with Icon + +An Avatar component with an icon combines a graphical symbol or icon with a user or entity representation, providing a visually appealing and easily recognizable identification within a user interface. + + + + + + {/* User is imported from 'lucide-react-native' */} + + + + Ronald Richards + Nursing Assistant + + + + + {/* User is imported from 'lucide-react-native' */} + + + + Kevin James + Web Designer + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Avatar, + AvatarBadge, + AvatarFallbackText, + AvatarImage, + Text, + HStack, + VStack, + Icon, + Heading, + User, + }, + argsType: {}, + }} + /> + + +#### Avatar with Image + +An Avatar component with an image incorporates a user or entity representation using a profile picture or image, adding a personalized touch and visual identification within a user interface. + + + + + + SS + + + + Ronald Richards + Nursing Assistant + + + + + SS + + + + Arlene McCoy + Marketing Coordinator + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Avatar, + AvatarBadge, + AvatarFallbackText, + AvatarImage, + Heading, + Text, + HStack, + VStack, + }, + argsType: {}, + }} + /> + + +#### Avatar Group + +The avatar group allows users to group avatars and display them in a horizontal or vertical row for better visual representation and functionality. + +> To reverse the order of avatars in case of multiple avatars use `flexDirection="row"` in `` + + + + {avatars.slice(0, 3).map((avatar, index) => { + return ( + + {avatar.alt} + + ); + })} + + {"+ " + remainingCount + ""} + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Avatar, + AvatarGroup, + AvatarBadge, + AvatarFallbackText, + AvatarImage, + Wrapper, + HStack, + }, + argsType: {}, + }} + /> + + +#### Avatar Group (Without Badge) + +An Avatar Group component without badges organizes multiple avatars in a visually cohesive manner, offering a streamlined display of user or entity representations without additional visual indicators or badges within a user interface. + + + + + John Doe + + + + John Doe + + + + John Doe + + + + John Doe + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Avatar, + AvatarGroup, + AvatarBadge, + AvatarFallbackText, + AvatarImage, + Wrapper, + HStack, + }, + argsType: {}, + }} + /> + + +#### Avatar Group (with Badge) + +An Avatar Group component with badges presents a collection of avatars with accompanying badges, providing visual indicators or additional information associated with each user or entity representation within a user interface. + + + + + John Doe + + + + + John Doe + + + + + John Doe + + + + + John Doe + + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Avatar, + AvatarGroup, + AvatarBadge, + AvatarFallbackText, + AvatarImage, + Wrapper, + HStack, + }, + argsType: {}, + }} + /> + + +#### Custom + +A custom Avatar component with text allows for personalized user or entity representations by combining customized visuals, such as an image or icon, with accompanying text, providing a unique and identifiable presentation within a user interface. + + + + + + {/* User is imported from 'lucide-react-native' */} + + + + Ronald Richards + Nursing Assistant + + + + + {/* User is imported from 'lucide-react-native' */} + + + + Kevin James + Web Designer + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Avatar, + AvatarBadge, + AvatarFallbackText, + AvatarImage, + Text, + HStack, + VStack, + Heading, + Icon, + User, + }, + argsType: {}, + }} + /> + + +#### Fallback + +Fallback text is shown when the image fails to load, the image is not available or the provided image url is not correct. + + + + + John Doe + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Avatar, + AvatarBadge, + AvatarFallbackText, + AvatarImage, + Wrapper, + HStack, + }, + argsType: {}, + }} + /> + + + diff --git a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx index 623b638b37..a947c865dd 100644 --- a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx @@ -11,18 +11,14 @@ showHeader: true --- import { Meta } from '@storybook/addon-docs'; -import { useRef, useEffect, useState } from 'react'; -import { Box } from './Box'; -import { Text } from '../../components-example/themed/Text'; - +import { useRef, useEffect, useState } from 'react'; +import { Box } from '../../components-example/themed'; import { transformedCode } from '../../utils'; -import { AppProvider, CodePreview } from '@gluestack/design-system'; - +import { AppProvider,CodePreview,Text,CollapsibleCode} from '@gluestack/design-system'; import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Box** component. @@ -87,3 +83,56 @@ This section provides a comprehensive reference list for the component props, de #### Box It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + + + + + + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Box with ref + +A Box component with a ref property enables the direct reference and manipulation of the underlying DOM element, offering greater control and flexibility in modifying the box's appearance and behavior within a user interface. + + + { + const styleObj = { + borderWidth: 2, + borderRadius: 4, + borderColor: '#1A91FF', + }; + if(myRef.current && myRef.current.setNativeProps){ + myRef.current.setNativeProps({ + style: styleObj, + }); + } + }, [myRef]); + return ( + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { Box, Wrapper, useRef, useEffect }, + argsType: {}, + }} + /> + + diff --git a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx index 9c3fe75f55..1bcbff108d 100644 --- a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx @@ -14,7 +14,28 @@ import { Meta } from '@storybook/addon-docs'; -import { Button, ButtonText, ButtonIcon } from './Button'; +import { + Button, + ButtonText, + ButtonIcon, + ButtonSpinner, + ButtonGroup, + AddIcon, + InfoIcon, + Icon, + EditIcon, + ArrowUpIcon, + Heading, + Text, + Input, + InputField, + Box, + HStack, + VStack, + ThreeDotsIcon, + ArrowLeftIcon, + Center +} from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -22,10 +43,10 @@ import { Table, TableContainer, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Button** component. @@ -676,3 +697,306 @@ Explore the comprehensive details of the Button in this document, including its src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D6248%253A27466%26type%3Ddesign%26node-id%3D6248-29746%26viewport%3D1013%252C181%252C0.06%26t%3Dl4eX0kWZTIN7qURx-1%26scaling%3Dcontain%26starting-point-node-id%3D6248%253A29746%26mode%3Ddesign" allowFullScreen /> --> + + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Button with Loading State + +A loading button is a type of button component that provides visual feedback to the user during an action that takes some time to complete. It typically displays an animated loading icon or spinner indicating the action is in progress. + + + + + Please wait... + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { Button, ButtonText, ButtonIcon, Wrapper, ButtonSpinner }, + argsType: {}, + }} + /> + + +#### Icon Button + +A button with an icon integrates a visual symbol within the button component, enhancing its appearance and providing a recognizable and intuitive representation of its associated action or functionality. + + + + {\/* EditIcon is imported from 'lucide-react-native' *\/} + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, EditIcon }, + argsType: {}, + }} + /> + + +#### Link Button + +A button with a link combines the interactive behavior of a button component with the ability to navigate to a specified URL, providing a clickable element for users to access external resources or internal pages. + + + + + Back to top + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon }, + argsType: {}, + }} + /> + + +#### Button Group in a Card + +A button group within a card component incorporates multiple button components, providing a cohesive and organized interface for selecting various actions or options within the context of the card. + + + + + + Was this page helpful? + + + We use this feedback to improve the quality of our documentation. + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Button, + ButtonText, + ButtonIcon, + ButtonGroup, + Wrapper, + Box, + Heading, + Text, + HStack, + }, + argsType: {}, + }} + /> + + +#### Button With Icon + +The icon component incorporates a button component, combining visual representation with interactive functionality for seamless user interaction. + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Button, + ButtonText, + ButtonIcon, + Wrapper, + Icon, + InfoIcon, + AddIcon, + Box, + }, + argsType: {}, + }} +/> + + + +#### Button with Full Width + +The button with full width component utilizes a button component, expanding its width to occupy the entire available space, creating a visually prominent and easily accessible interface element. + + + + + + + Set new password + + + Almost done. Enter your new password and you are all set. + + + + + + + + + + + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Button, + ButtonText, + ButtonIcon, + Wrapper, + VStack, + Box, + Heading, + Text, + Input, + InputField, + Icon, + Center, + ArrowLeftIcon, + }, + argsType: {}, + }} + /> + + +#### Custom Button + +The custom button component leverages the functionality of a button component while offering additional customization options to tailor its appearance and behavior according to specific design requirements. + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Button, + ButtonText, + ButtonIcon, + ButtonGroup, + Wrapper, + ThreeDotsIcon, + }, + argsType: {}, + }} + /> + + diff --git a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx index d1751ef3e3..299aeda96e 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx @@ -14,23 +14,25 @@ import { Meta } from '@storybook/addon-docs'; + import { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, -} from './Checkbox'; -import { Text, RemoveIcon, FormControl, Icon, CheckIcon, -} from '@gluestack-ui/themed'; + Center, + VStack, + HStack, + Heading, + Box +} from '../../components-example/themed'; import { useState, useRef } from 'react'; -import { Center, VStack } from '@gluestack-ui/themed'; -import { HStack, Heading, Box } from '@gluestack-ui/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -38,10 +40,9 @@ import { Table, TableContainer, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Checkbox** component. @@ -583,3 +584,488 @@ Explore the comprehensive details of the Input in this document, including its i src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5428%253A25548%26type%3Ddesign%26node-id%3D5428-28718%26viewport%3D627%252C354%252C0.02%26t%3D1lG3EDrkr8YATBXs-1%26scaling%3Dscale-down%26starting-point-node-id%3D5428%253A28718%26mode%3Ddesign" allowfullscreen > + + + + + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Multiple Checkbox + +Checkbox provide a mutually exclusive selection mechanism, allowing users to choose a multiple option from a set of related choices. + + + { + setValues(keys) + }}> + + + + + + Framer + + + + + + Invision Studio + + + + + + Adobe XD + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + Wrapper, + Center, + CheckIcon, + Icon, + VStack, + useState, + }, + argsType: {}, + }} + /> + + +#### Horizontal + +A horizontal component incorporating a checkbox allows for intuitive and space-efficient selection of multiple options within a linear layout. + + + { + setValues(keys) + }}> + + + + + + Illustration + + + + + + Animation + + + + + + Typography + + + + ) + } +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + CheckIcon, + Icon, + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + HStack, + useState, + }, + argsType: {}, + }} + /> + + +#### With help text + +A checkbox component with help text provides informative guidance alongside selectable options, ensuring clarity and ease of use. + + + { + setValues(keys) + }}> + + + + + + + Design + + Subscribe to updates from the Design Feed + + + + + + + Marketing + + Subscribe to updates from the Marketing Feed + + + + ) + } +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + CheckIcon, + Icon, + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + HStack, + VStack, + Text, + Box, + useState, + }, + argsType: {}, + }} + /> + + +#### Form Control + +A checkbox component integrated with form control enhances the user experience by enabling easy selection and submission of options within a structured input context. + + + + + Sign up for newsletters + + + + + Daily Bits + + + + + + Event Updates + + + + + + Sponsorship + + Subscribe to newsletters for updates + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + Wrapper, + Center, + CheckIcon, + Icon, + Text, + VStack, + Heading, + FormControl, + }, + argsType: {}, + }} + /> + + +#### Label left + +A checkbox component with Label left configuration aligns the label to the left, facilitating clear association between the option and its corresponding checkbox. + + + { + setValues(keys) + }}> + + + Jane Cooper + + + + + + Wade Warren + + + + + + Robert Fox + + + + + + + ) + }`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + Wrapper, + Center, + CheckIcon, + Icon, + VStack, + HStack, + useState, + }, + argsType: {}, + }} + /> + + +#### Controlled + +A controlled component architecture incorporates a checkbox component, allowing for precise management of its state and behavior through explicit control mechanisms. + + + { + setValues(keys); + }}> + + + + + + UX Research + + + + + + Software Development + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + CheckIcon, + Icon, + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + useState, + Center, + VStack, + }, + argsType: {}, + }} + /> + + +#### Uncontrolled + +An uncontrolled component utilizes a checkbox component, providing a simpler implementation where the checkbox state is managed internally, without explicit control from external sources. + + + { + e.preventDefault(); + const checkboxValue = radioRef.current.checked; + }; + return ( + + + + + + + Apartments + + + + + + Residents + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + CheckIcon, + Icon, + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + useRef, + Center, + VStack, + }, + argsType: {}, + }} + /> + + +#### Checkbox group + +The checkbox group component allows users to group checkbox and display them in a horizontal or vertical row for better visual representation and functionality. + + + + + + + + + + Label 1 + + + + + + Label 2 + + + + + ); +}; +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'CheckboxExample'); + }, + scope: { + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + Wrapper, + Center, + CheckIcon, + VStack, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx index dd7296ae54..d003f3ca6b 100644 --- a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx @@ -14,8 +14,7 @@ import { Meta } from '@storybook/addon-docs'; -import { HStack } from './HStack'; -import { Box } from '@gluestack-ui/themed'; +import { Box,HStack} from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -24,10 +23,11 @@ import { TableContainer, Text, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; + + This is an illustration of **HStack** component. @@ -174,3 +174,35 @@ Explore the comprehensive details of the HStack in this document, including its src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D281%253A13034%26type%3Ddesign%26node-id%3D281-13035%26viewport%3D530%252C248%252C0.07%26scaling%3Dscale-down%26starting-point-node-id%3D281%253A13035" allowFullScreen /> --> + + + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### HStack Reversed + +An HStack component with the reversed prop reverses the order of horizontally stacked elements, allowing for customized layouts and visual arrangements of content within a user interface. + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { Box, Wrapper, HStack }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx index 1be3111bdc..f2f9d916f4 100644 --- a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx @@ -24,8 +24,6 @@ import { Text as ModalText, Center, CheckCircleIcon, -} from '@gluestack-ui/themed'; -import { Modal, ModalBackdrop, ModalContent, @@ -33,15 +31,13 @@ import { ModalCloseButton, ModalBody, ModalFooter, -} from './Modal'; -import { VStack, HStack, Input, InputField, ArrowLeftIcon, Link, -} from '@gluestack-ui/themed'; +} from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { useState } from 'react'; import { @@ -52,10 +48,10 @@ import { AddIcon, InfoIcon, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; + This is an illustration of **Modal** component. @@ -654,3 +650,325 @@ export default () => ( ); ``` --> + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Multiple Modals + +A user interface featuring multiple modal components that allow for layered interaction and context-specific information display. + + + +
+ +
+ { + setShowModal(false); + }} + > + + + + + Forgot password? + No worries, we’ll send you reset instructions + + + + + + + + + + + + + + + + + + { + setShowModal2(false); + }} + > + + + + + Reset password + A verification code has been sent to you. Enter code below. + + + + + + + + + + + Didn’t receive the email? + Click to resend + + + + + + + + + { + setShowModal3(false); + }} + > + + + + + Set new password + Almost done. Enter your new password and you are all set. + + + + + + + + + + + + + + + + + + + + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Modal, + ModalBackdrop, + ModalContent, + ModalHeader, + ModalCloseButton, + ModalBody, + ModalFooter, + Wrapper, + useState, + Button, + ButtonText, + ButtonIcon, + Text: ModalText, + Center, + CloseIcon, + VStack, + HStack, + Heading, + Icon, + Input, + InputField, + Link, + ArrowLeftIcon, + }, + argsType: {}, + }} + /> +
+ +### Modal sizes + +A versatile modal component offering different sizes to accommodate various content types and optimize user experience. + + + { + setShowModal(true) + setSize(currentSize) + } + return ( +
+ + {sizes.map((currentSize) => { + return + })} + + { + setShowModal(false); + }} + size={size} + finalFocusRef={ref} + > + + + + Delete Folder + + + + + + + Whoa, slow down there! This modal is like a red light at an intersection, reminding you to stop and think before you proceed. Is deleting this folder the right choice? + + + + + + + + +
+ ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Modal, + ModalBackdrop, + ModalContent, + ModalHeader, + ModalCloseButton, + ModalBody, + ModalFooter, + useState, + CloseIcon, + Button, + ButtonText, + Heading, + Center, + Text: ModalText, + Icon, + VStack, + HStack, + }, + argsType: { + size: { + control: 'select', + options: ['xs', 'sm', 'md', 'lg', 'full'], + default: 'md', + }, + }, + }} + /> +
+ diff --git a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx index 20c89b1832..59ec2c1cbc 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx @@ -14,14 +14,12 @@ import { Meta } from '@storybook/addon-docs'; -import { Pressable } from './Pressable'; -import { Text } from '../../components-example/themed/Text'; - +import { Pressable } from '../../components-example/themed'; +import { AppProvider, CodePreview,CollapsibleCode ,Text} from '@gluestack/design-system'; import { transformedCode } from '../../utils'; -import { AppProvider, CodePreview } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; + + This is an illustration of **Pressable** component. @@ -88,3 +86,39 @@ This section provides a comprehensive reference list for the component props, de #### Pressable It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Pressable child elements according to its states + +You can change the child elements according to the states of Pressable component. + + + + {({ pressed }) => ( + PRESSABLE + )} + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Pressable, + Text, + }, + argsType: {}, + }} + /> + + +Similarly, you can change the child elements according to other states of Pressable +component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`. diff --git a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx index b32be59ff4..4385733bb1 100644 --- a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx @@ -14,13 +14,6 @@ import { Meta } from '@storybook/addon-docs'; -import { - Progress, - ProgressFilledTrack, -} from '../../components-example/themed/Progress'; - -import { VStack, Box, Heading } from '@gluestack-ui/themed'; -import { transformedCode } from '../../utils'; import { AppProvider, CodePreview, @@ -28,10 +21,19 @@ import { Table, TableContainer, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; - +import { + Progress, + ProgressFilledTrack, + VStack, + Box, + Heading, +} from '../../components-example/themed'; +import { transformedCode } from '../../utils'; import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; + + This is an illustration of **Progress** component. @@ -207,3 +209,114 @@ Explore the comprehensive details of the Progress in this document, including it src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6282-35554%26t%3DSqzrgr3fIhnmO5iO-1%26scaling%3Dscale-down%26page-id%3D6282%253A33652%26starting-point-node-id%3D6282%253A35554%26mode%3Ddesign" allowFullScreen /> --> + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Value + +Progress component with value + + + + Downloading 55% + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Progress, + ProgressFilledTrack, + VStack, + Text, + Box, + }, + argsType: {}, + }} + /> + + +#### Color + +You can add track color to progress bar as per our needs. + + + + + + + + + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Progress, + ProgressFilledTrack, + VStack, + }, + argsType: {}, + }} + /> + + +#### Custom + +You can customize the progress bar. Below is the example where we have change the theme of progress bar. + + + + Internal Storage + + + + 14GB + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Progress, + ProgressFilledTrack, + VStack, + Heading, + Text, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx index b1f46db1c6..dda917a681 100644 --- a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx @@ -15,16 +15,15 @@ import { useRef, useEffect, useState } from 'react'; -import { Slider } from './Slider'; import { SliderTrack, SliderFilledTrack, SliderThumb, -} from '../../components-example/themed/Slider'; -import { HStack, Volume2Icon, Box, Center } from '@gluestack-ui/themed'; -import { + Slider, + HStack, + Box, + Center, VStack, - Volume, Text, LightbulbIcon, Icon, @@ -32,7 +31,10 @@ import { Tooltip, TooltipContent, Button, -} from '@gluestack-ui/themed'; +} from '../../components-example/themed'; + +import { Volume, Volume2Icon } from 'lucide-react-native'; + import { transformedCode } from '../../utils'; import { AppProvider, @@ -40,10 +42,9 @@ import { InlineCode, Table, TableContainer, + CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Slider** component. @@ -481,3 +482,386 @@ Explore the comprehensive details of the Slider in this document, including its src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6449-50331%26t%3DyCpyOJadMBgzgdP2-1%26scaling%3Dscale-down%26page-id%3D6429%253A48430%26starting-point-node-id%3D6449%253A50331%26mode%3Ddesign" allowFullScreen /> --> + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Slider with Orientation + +An example of the Slider component being used with the Slider with Orientation feature to customize the orientation of the slider, providing flexibility in the direction of sliding and input for numerical or adjustable values within a user interface. + + + { + setSliderValue(value); + }; + return ( +
+ { + handleChange(value); + }}> + + + + + +
+ ); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Box, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, + Center, + Wrapper, + }, + argsType: {}, + }} + /> +
+ +#### Color scheme + +A Slider component with a color scheme adds visual styling and customization options, allowing the slider track and handle to be displayed in different colors, enhancing the aesthetic appeal and visual coherence of the slider within a user interface. + + + +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+ + ); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Center, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, + VStack, + Wrapper, + }, + argsType: {}, + }} + /> +
+ +#### With tooltip + +A Slider component with a tooltip displays a visual indicator or text overlay that provides real-time feedback on the selected value as users interact with the slider, improving usability and precision in inputting or adjusting numeric or continuous data within a user interface. + + + { + setSliderValue(value); + }; + return ( + + $0 + { + return ( +
+ { + handleChange(Math.floor(v)); + }}> + + + + + +
+ ) + }} + > + + {"$" + sliderValue} + +
+ $60 +
+); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, + Center, + Volume, + VStack, + HStack, + Volume2Icon, + Text, + Box, + Tooltip, + TooltipContent, + Button, + }, + argsType: {}, + }} + /> +
+ +#### Form Controlled + +A Slider component with form-controlled behavior allows for seamless integration with a form's state management, enabling the slider value to be controlled and updated through a parent component's form state, providing a consistent and synchronized user experience for capturing and manipulating numeric or continuous data within a form. + + + { + setSliderValue(value); + }; + return ( + + Select the quantity +
+ { + handleChange(value); + }}> + + + + + +
+ Slide the knob to select the number of products +
+ ); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, + Center, + LightbulbIcon, + Icon, + Text, + VStack, + Heading, + }, + argsType: {}, + }} + /> +
+ +#### Custom + +A custom Slider component with an icon incorporates a personalized design by combining a graphical symbol or icon with the slider interface, adding a unique visual element and enhancing the user experience when interacting with numeric or continuous data input in a user interface. + + + { + setSliderValue(value); + }; + return ( + + Brightness +
+ { + handleChange(value); + }}> + + + + + + + +
+
+ ); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, + LightbulbIcon, + Icon, + Text, + VStack, + }, + argsType: {}, + }} + /> +
+ +#### Volume + +A Slider component used as a volume control allows users to adjust the audio volume by sliding the handle along the track, providing an intuitive and interactive way to control the sound output within a user interface. + + + { + setSliderValue(value); + }; + return ( + + + current sliderValue - {sliderValue} + onChangeEndValue - {onChangeEndValue} + + + +
+ { + handleChange(Math.floor(v)); + }} + onChangeEnd={v => { + v && setOnChangeEndValue(Math.floor(v)); + }} + > + + + + + +
+ +
+
+ ); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, + Center, + Volume, + VStack, + HStack, + Volume2Icon, + Text, + Box, + }, + argsType: {}, + }} + /> +
\ No newline at end of file diff --git a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx index 8537bdd2de..2ccf1d84b2 100644 --- a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx @@ -14,13 +14,11 @@ import { Meta } from '@storybook/addon-docs'; -import { Spinner } from './Spinner'; -import { HStack, VStack, Text } from '@gluestack-ui/themed'; import { transformedCode } from '../../utils'; -import { AppProvider, CodePreview } from '@gluestack/design-system'; - +import { AppProvider, CodePreview ,CollapsibleCode} from '@gluestack/design-system'; +import { Spinner, HStack, VStack, Text } from '../../components-example/themed'; import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; + This is an illustration of **Spinner** component. @@ -113,3 +111,68 @@ Explore the comprehensive details of the Spinner in this document, including its src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6300-39672%26t%3DS9Au6CP5yb4upkgu-1%26scaling%3Dscale-down%26page-id%3D6300%253A37770%26starting-point-node-id%3D6300%253A39672%26mode%3Ddesign" allowFullScreen /> --> + + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Spinner with Label + +A Spinner component with a label provides informative text or a label alongside the spinner, offering descriptive context and improving user understanding and interaction with the spinner element within a user interface. + + + + + Please Wait + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Spinner, + HStack, + Text, + }, + argsType: {}, + }} + /> + + +#### Color Scheme + +A Spinner component with a color scheme enhances visual appeal by incorporating distinct colors, adding a touch of customization and style to the spinner element within a user interface. + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Spinner, + VStack, + }, + argsType: {}, + }} + /> + \ No newline at end of file diff --git a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx index 8248cced2b..bdac33afe9 100644 --- a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx @@ -21,16 +21,15 @@ import { useToast, Button, ButtonText, -} from './Toast'; -import { CheckIcon, MessageCircle } from '@gluestack-ui/themed'; -import { + CheckIcon, + MessageCircle, Icon, CloseIcon, VStack, AlertTriangleIcon, Pressable, Center, -} from '@gluestack-ui/themed'; +} from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -39,12 +38,10 @@ import { TableContainer, Text, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; - import { View } from 'react-native'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Toast** component. @@ -487,3 +484,445 @@ export default () => { }; ``` --> + + + + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Toast with actions + +A versatile Toast component with customizable actions, enabling users to take various actions directly from the notification popup for enhanced usability and convenience. + + + + + { + toastActions.map((action, index)=>{ + return ( + + ) + }) + } + + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + View, + Wrapper, + Toast, + ToastTitle, + ToastDescription, + useToast, + Text, + Button, + ButtonText, + VStack, + Center, + }, + argsType: {}, + }} + /> + + +#### Toast with variants + +A versatile Toast component with multiple variants, offering different styles and visual cues to effectively convey various types of notifications and feedback to users. + + + { + toast.show({ + placement:"top", + render: ({ id }) => { + const toastId = "toast-" + id; + return ( + + + Attention! + + Please review and accept our updated terms and conditions before continuing to use the application. + + + + ); + }, + }); + }} + > + Press Me + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + View, + Wrapper, + Toast, + ToastTitle, + ToastDescription, + useToast, + Text, + Button, + ButtonText, + VStack, + }, + argsType: { + variant: { + control: 'select', + options: ['accent', 'solid', 'outline'], + default: 'solid', + }, + }, + }} + /> + + +#### Toast with placement + +A Toast component with different placement options allows for the flexible positioning of toast notifications, enabling them to appear in various locations within a user interface, enhancing user visibility and providing a customizable approach to displaying temporary messages or alerts. + + + { + toast.show({ + placement: placement, + render: ({ id }) => { + const toastId = "toast-" + id; + return ( + + {placements[placement]} + + ); + }, + }); + }} + > + Press Me + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + View, + Wrapper, + Toast, + ToastTitle, + ToastDescription, + useToast, + Text, + Button, + ButtonText, + }, + argsType: { + placement: { + control: 'select', + options: [ + 'bottom', + 'top', + 'top right', + 'top left', + 'bottom left', + 'bottom right', + ], + default: 'bottom', + }, + }, + }} + /> + + +#### Dismissable Toast + +A dismissable Toast component offers users the ability to dismiss or close the toast notification, providing control and convenience in managing temporary messages or alerts within a user interface. + + + { + toast.show({ + placement: 'top', + render: ({ id }) => { + const toastId = "toast-" + id; + return ( + + + + Download Complete + Your file 'wadewarren.docx' has been downloaded successfully. You can find it in your Downloads folder. + + toast.close(id)}> + + + + ); + }, + }); + }} + > + Press Me + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + View, + Wrapper, + Toast, + ToastTitle, + ToastDescription, + useToast, + Text, + Icon, + CloseIcon, + VStack, + CheckIcon, + Button, + ButtonText, + Pressable, + }, + argsType: {}, + }} + /> + + +#### Toast custom duration + +A Toast component with custom duration allows for specifying the length of time the toast notification remains visible, offering flexibility in controlling the duration of temporary messages or alerts within a user interface. + + + { + toast.show({ + placement: 'top', + duration: duration, + render: ({ id }) => { + const toastId = "toast-" + id; + return ( + + + + New Message + Hey, just wanted to touch base and see how you're doing. Let's catch up soon! + + toast.close(id)}> + + + + ); + }, + }); + }} + > + Press Me + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + View, + Wrapper, + Toast, + ToastTitle, + ToastDescription, + useToast, + Text, + Button, + ButtonText, + Pressable, + Icon, + CloseIcon, + VStack, + MessageCircle, + }, + argsType: { + duration: { + control: 'input', + default: 5000, + }, + }, + }} + /> + + +#### Preserve Toast + +A Toast component with preserve toast functionality retains the notification on the screen until explicitly dismissed, ensuring important messages or alerts remain visible and accessible to the user, even during subsequent interactions within the user interface. + + + { + toast.show({ + placement: 'top', + duration: null, + render: ({ id }) => { + const toastId = "toast-" + id; + return ( + + + + Account Security Alert + Your account password was recently changed. + If you did not authorize this change, please contact our support team immediately. + + + toast.close(id)}> + + + + ); + }, + }); + }} + > + Press Me + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + View, + Wrapper, + Toast, + ToastTitle, + ToastDescription, + useToast, + Text, + Icon, + CloseIcon, + Pressable, + VStack, + AlertTriangleIcon, + Button, + ButtonText, + }, + argsType: {}, + }} + /> + + diff --git a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx index 943b4871cc..0af4bb48b0 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx @@ -20,15 +20,18 @@ import { TooltipText, Button, ButtonText, -} from './Tooltip'; -import { Box, Heading, Edit, Center } from '@gluestack-ui/themed'; -import { VStack, Command, Icon } from '@gluestack-ui/themed'; -import { Avatar, AvatarGroup, AvatarFallbackText, HStack, -} from '@gluestack-ui/themed'; + Box, + Heading, + Edit, + Center, + VStack, + Command, + Icon +} from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -37,10 +40,9 @@ import { TableContainer, Text, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Tooltip** component. @@ -502,3 +504,158 @@ Explore the comprehensive details of the Tooltip in this document, including its src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6003-30473%26t%3D94Rlaz8y4WQXlTT6-1%26scaling%3Dscale-down%26page-id%3D6003%253A28666%26starting-point-node-id%3D6003%253A30473%26mode%3Ddesign" allowFullScreen /> + +### Examples + +#### Tooltip with Heading + +A tooltip component with an avatar is a user interface element that displays a small pop-up box of additional information when the user hovers over or interacts with an avatar or an icon. + + + + + { + return ( + + + 3 + + ) + }} + > + + + View all members of this channel +
+ Includes John, Sarah, Mike, Emily + and David +
+
+
+
+ {avatars.map((avatar, index) => { + return ( + + {avatar.alt} + + ); + })} +
+ + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Avatar, + AvatarGroup, + AvatarFallbackText, + Wrapper, + HStack, + Tooltip, + TooltipContent, + TooltipText, + Text, + Box, + Heading, + VStack, + Center, + }, + argsType: {}, + }} + /> +
+ +#### Tooltip with Icon + +A tooltip component with an icon is a user interface element that provides contextual information or explanatory text when the user hovers over or interacts with an icon. + + + + { + return ( + + + + ) + }} + > + + + New message + + + + + + N + + + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Avatar, + AvatarFallbackText, + Wrapper, + HStack, + Tooltip, + TooltipContent, + TooltipText, + Text, + Box, + Heading, + Edit, + Command, + Icon, + }, + argsType: {}, + }} + /> + From f7a125a5896d33ad5b5d7eb655f6f89931168ecd Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 1 Mar 2024 12:15:19 +0530 Subject: [PATCH 02/45] feat: added nativewind pressable component examples --- .../src/components/Pressable/Pressable.tsx | 2 +- .../components/Pressable/index.nw.stories.mdx | 41 +++++++++++++++++-- 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/src/components/Pressable/Pressable.tsx b/example/storybook-nativewind/src/components/Pressable/Pressable.tsx index 344a63812c..7750a21dc1 100644 --- a/example/storybook-nativewind/src/components/Pressable/Pressable.tsx +++ b/example/storybook-nativewind/src/components/Pressable/Pressable.tsx @@ -28,4 +28,4 @@ PressableBasic.description = export default PressableBasic; -export { Pressable, Center }; +export { Pressable, Center, Text }; diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx index c8b71f9f4d..274b960315 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx @@ -1,5 +1,5 @@ --- -title: Pressable | gluestack-ui | Installation, Usage, and API +title: gluestack-ui Pressable Component | Installation, Usage, and API description: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs. @@ -14,8 +14,7 @@ import { Meta } from '@storybook/addon-docs'; -import { Pressable } from './Pressable'; -import { Text } from '../../components-example/nativewind/Text'; +import { Pressable, Text } from './Pressable'; import { transformedCode } from '../../utils'; import { AppProvider, CodePreview } from '@gluestack/design-system'; @@ -87,3 +86,39 @@ This section provides a comprehensive reference list for the component props, de #### Pressable It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### Pressable child elements according to its states + +You can change the child elements according to the states of Pressable component. + + + + {({ pressed }) => ( + PRESSABLE + )} + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Pressable, + Text, + }, + argsType: {}, + }} + /> + + +Similarly, you can change the child elements according to other states of Pressable +component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`. From 96cc69208a5103abbb05e2cce19717ece387b881 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 1 Mar 2024 12:54:58 +0530 Subject: [PATCH 03/45] feat: adding nativewind progress component examples --- .../nativewind/Progress/index.tsx | 3 - .../src/components/Progress/Progress.tsx | 9 +- .../components/Progress/index.nw.stories.mdx | 94 +++++++++++++++---- 3 files changed, 83 insertions(+), 23 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Progress/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Progress/index.tsx index df1e2223ab..885ab64738 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Progress/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Progress/index.tsx @@ -29,9 +29,6 @@ const progressStyle = tva({ '2xl': 'h-6', }, }, - defaultVariants: { - size: 'md', - }, }); const progressFilledTrackStyle = tva({ base: 'bg-primary-500 rounded-full', diff --git a/example/storybook-nativewind/src/components/Progress/Progress.tsx b/example/storybook-nativewind/src/components/Progress/Progress.tsx index dbc60519bc..65401e1712 100644 --- a/example/storybook-nativewind/src/components/Progress/Progress.tsx +++ b/example/storybook-nativewind/src/components/Progress/Progress.tsx @@ -1,8 +1,9 @@ import React from 'react'; - -import { VStack, Text, Box, Heading, Center } from '@gluestack-ui/themed'; - import { Progress, ProgressFilledTrack } from '@/components/ui/Progress'; +import { VStack } from '@/components/ui/VStack'; +import { Box } from '@/components/ui/Box'; +import { Heading } from '@/components/ui/Heading'; +import { Center } from '@/components/ui/Center'; const ProgressBasic = ({ value = 50, ...props }: any) => { return ( @@ -31,4 +32,4 @@ ProgressBasic.description = export default ProgressBasic; -export { Progress, ProgressFilledTrack, VStack, Text, Box, Heading }; +export { Progress, ProgressFilledTrack, VStack, Box, Heading }; diff --git a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx index 5f8497f3ec..dcbb670c81 100644 --- a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx @@ -1,5 +1,5 @@ --- -title: Progress | gluestack-ui | Installation, Usage, and API +title: gluestack-ui Progress Component | Installation, Usage, and API description: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process. @@ -17,9 +17,10 @@ import { Meta } from '@storybook/addon-docs'; import { Progress, ProgressFilledTrack, -} from '../../components-example/nativewind/Progress'; - -import { VStack, Box, Heading } from '@gluestack-ui/themed'; + VStack, + Box, + Heading, +} from './Progress'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -165,17 +166,78 @@ We have outlined the various features that ensure the Fab component is accessibl Progress component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props). - + + + Downloading 55% + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Progress, + ProgressFilledTrack, + VStack, + Text, + Box, + }, + argsType: {}, + }} + /> + From 97389531ed90ec181526c7a2d7d09556820c1f9f Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 1 Mar 2024 13:25:22 +0530 Subject: [PATCH 04/45] feat: added nativewind progress component examples --- .../components/Progress/index.nw.stories.mdx | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx index dcbb670c81..9baaec4632 100644 --- a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx @@ -241,3 +241,76 @@ Progress component with value }} /> + +#### Color + +You can add track color to progress bar as per our needs. + + + + + + + + + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Progress, + ProgressFilledTrack, + VStack, + }, + argsType: {}, + }} + /> + + +#### Custom + +You can customize the progress bar. Below is the example where we have change the theme of progress bar. + + + + Internal Storage + + + + 14GB + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Progress, + ProgressFilledTrack, + VStack, + Heading, + Text, + }, + argsType: {}, + }} + /> + From f9b2a6f42019c5c829a3a612c3174adf07530c0d Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 1 Mar 2024 13:28:53 +0530 Subject: [PATCH 05/45] feat: add icons example --- .../src/components/Icon/Icon.tsx | 3 +- .../src/components/Icon/index.nw.stories.mdx | 240 ++++++++++++++++++ .../MediaAndIcons/Icon/index.stories.mdx | 5 +- 3 files changed, 244 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/src/components/Icon/Icon.tsx b/example/storybook-nativewind/src/components/Icon/Icon.tsx index 78c1e8a962..9ea0aa1b63 100644 --- a/example/storybook-nativewind/src/components/Icon/Icon.tsx +++ b/example/storybook-nativewind/src/components/Icon/Icon.tsx @@ -60,6 +60,7 @@ import { } from '@/components/ui/Icon'; import { HStack } from '@/components/ui/HStack'; import { VStack } from '@/components/ui/VStack'; +import { Center } from '@/components/ui/Center'; import { ChromeIcon, @@ -68,7 +69,6 @@ import { Camera, } from 'lucide-react-native'; const IconBasic = ({ size, ...props }: any) => { - // return ; return ; }; @@ -141,4 +141,5 @@ export { FacebookIcon, createIcon, Camera, + Center, }; diff --git a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx index 6731ef0bb8..c69007dd82 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -15,6 +15,7 @@ import { Meta } from '@storybook/addon-docs'; import { + Center, AddIcon, CheckIcon, CloseIcon, @@ -228,3 +229,242 @@ Explore the comprehensive details of the Icon in this document, including its im src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D6412%253A31332%26type%3Ddesign%26node-id%3D6412-33234%26viewport%3D723%252C127%252C0.03%26t%3DxNCgdoHjEw3Tlb72-1%26scaling%3Dscale-down%26starting-point-node-id%3D6412%253A33234%26mode%3Ddesign" allowFullScreen /> + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### All gluestack icons + +Below is a list of all of the icons in the library. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Center, + Wrapper, + HStack, + AddIcon, + CheckIcon, + CloseIcon, + InfoIcon, + ArrowUpIcon, + ChevronDownIcon, + ChevronUpIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronsLeftIcon, + ChevronsRightIcon, + AtSignIcon, + CheckCircleIcon, + AlertCircleIcon, + ChevronsUpDownIcon, + PaperclipIcon, + BellIcon, + MenuIcon, + ArrowRightIcon, + ArrowLeftIcon, + ArrowDownIcon, + CalendarDaysIcon, + MessageCircleIcon, + CopyIcon, + TrashIcon, + DownloadIcon, + GripVerticalIcon, + EditIcon, + MailIcon, + LinkIcon, + ExternalLinkIcon, + LockIcon, + RemoveIcon, + MoonIcon, + SlashIcon, + PhoneIcon, + HelpCircleIcon, + RepeatIcon, + Repeat1Icon, + SearchIcon, + SettingsIcon, + LoaderIcon, + StarIcon, + SunIcon, + ClockIcon, + UnlockIcon, + EyeIcon, + EyeOffIcon, + CloseCircleIcon, + ShareIcon, + CircleIcon, + FavouriteIcon, + GlobeIcon, + ThreeDotsIcon, + Icon, + PlayIcon, + }, + argsType: {}, + }} + /> + + +#### Lucide Icons (Recommended) + +[Lucide](https://lucide.dev/docs/lucide-react-native) is an open source icon library for displaying icons for react-native. `gluestack-ui` provides an easy integration with lucide icons. + + + + + + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + VStack, + ChromeIcon, + InstagramIcon, + FacebookIcon, + Icon, + Camera, + }, + argsType: {}, + }} + /> + + +#### SVG & Custom Icons + +We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component. +CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc. + +#### SVG & Custom Icons + +We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component. +CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc. + +##### Notes to remember while using createIcon function + +- Pass svg props such as `viewBox` in `createIcon` directly. +- Copy the svg code without the SVG tag directly into the function argument `Path` or `D` or whichever prop justifies your svg. +- Replace HTML SVG tags (e.g., ``, `` etc) with the corresponding React Native SVG components (e.g., ``, `` etc). +- For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode. + +Before : +` ` + +After : +` ` + + + + {/* Rect, Path is imported from 'react-native-svg' */} + + + + + + + ), + }); + function App () { + return ; + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + createIcon, + Icon, + Path, + Rect, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx b/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx index 470538ca01..6508ff9dd3 100644 --- a/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx +++ b/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx @@ -299,12 +299,11 @@ Below is a list of all of the icons in the library. GlobeIcon, ThreeDotsIcon, Icon, - PlayIcon + PlayIcon, }, argsType: {}, }} -/> - + /> #### Lucide Icons (Recommended) From c6246503ba44c8fb1c1fcb94feb88c08e6f13e41 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 1 Mar 2024 16:25:36 +0530 Subject: [PATCH 06/45] feat: add HStack examples --- .../src/components/HStack/HStack.tsx | 12 +++--- .../components/HStack/index.nw.stories.mdx | 40 +++++++++++++------ 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/example/storybook-nativewind/src/components/HStack/HStack.tsx b/example/storybook-nativewind/src/components/HStack/HStack.tsx index 141648d1f9..62396d4d81 100644 --- a/example/storybook-nativewind/src/components/HStack/HStack.tsx +++ b/example/storybook-nativewind/src/components/HStack/HStack.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { HStack } from '@/components/ui/HStack'; -import { Box } from '@gluestack-ui/themed'; +import { Box } from '@/components/ui/Box'; const HStackBasic = ({ space, reversed, ...props }: any) => { return ( - - - - - + + + + + ); }; diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx index e068372fa6..c6412dec49 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs'; -import { HStack } from './HStack'; +import { HStack, Box } from './HStack'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -27,7 +27,6 @@ import { import Wrapper from '../../components-example/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; -import { Box } from '../../components-example/nativewind/Box'; This is an illustration of **HStack** component. @@ -160,16 +159,31 @@ HStack component is created using View component from react-native. It extends a - +#### HStack Reversed + +An HStack component with the reversed prop reverses the order of horizontally stacked elements, allowing for customized layouts and visual arrangements of content within a user interface. + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { Box, Wrapper, HStack }, + argsType: {}, + }} + /> + From 75b033a356f065bd467ff0d63551ecd4780b7538 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 1 Mar 2024 19:18:14 +0530 Subject: [PATCH 07/45] chore: refact code --- .../src/components/Alert/Alert.tsx | 27 +----------- .../src/components/Divider/Divider.tsx | 17 +------- .../src/components/Fab/Fab.tsx | 43 +------------------ .../src/components/Text/Text.tsx | 3 +- 4 files changed, 6 insertions(+), 84 deletions(-) diff --git a/example/storybook-nativewind/src/components/Alert/Alert.tsx b/example/storybook-nativewind/src/components/Alert/Alert.tsx index 9b84a2483a..45c50ecae9 100644 --- a/example/storybook-nativewind/src/components/Alert/Alert.tsx +++ b/example/storybook-nativewind/src/components/Alert/Alert.tsx @@ -1,16 +1,6 @@ import React from 'react'; import { Alert, AlertIcon, AlertText } from '@/components/ui/Alert'; -import { - InfoIcon, - CheckCircleIcon, - CloseCircleIcon, - BellIcon, - AlertCircleIcon, - Icon, -} from '@/components/ui/Icon'; -import { VStack } from '@/components/ui/VStack'; -import { Center } from '@/components/ui/Center'; -import { HStack } from '@/components/ui/HStack'; +import { InfoIcon } from '@/components/ui/Icon'; const AlertBasic = ({ ...props }: any) => { return ( @@ -26,17 +16,4 @@ AlertBasic.description = export default AlertBasic; -export { - Alert, - AlertIcon, - AlertText, - InfoIcon, - CheckCircleIcon, - CloseCircleIcon, - BellIcon, - AlertCircleIcon, - Icon, - VStack, - Center, - HStack, -}; +export { Alert, AlertIcon, AlertText, InfoIcon }; diff --git a/example/storybook-nativewind/src/components/Divider/Divider.tsx b/example/storybook-nativewind/src/components/Divider/Divider.tsx index 9c9ba7bce3..e80508f15e 100644 --- a/example/storybook-nativewind/src/components/Divider/Divider.tsx +++ b/example/storybook-nativewind/src/components/Divider/Divider.tsx @@ -2,11 +2,6 @@ import React from 'react'; import { Divider } from '@/components/ui/Divider'; import { HStack } from '@/components/ui/HStack'; import { Heading } from '@/components/ui/Heading'; -import { Center } from '@/components/ui/Center'; -import { Text } from '@/components/ui/Text'; -import { VStack } from '@/components/ui/VStack'; -import { Box } from '@/components/ui/Box'; -import { Button, ButtonText } from '@/components/ui/Button'; const DividerBasic = ({ ...props }) => { return ( @@ -33,14 +28,4 @@ DividerBasic.description = export default DividerBasic; -export { - Text, - VStack, - HStack, - Divider, - Box, - Heading, - Button, - ButtonText, - Center, -}; +export { HStack, Divider, Heading }; diff --git a/example/storybook-nativewind/src/components/Fab/Fab.tsx b/example/storybook-nativewind/src/components/Fab/Fab.tsx index 9c55173c66..bebfecea3e 100644 --- a/example/storybook-nativewind/src/components/Fab/Fab.tsx +++ b/example/storybook-nativewind/src/components/Fab/Fab.tsx @@ -1,22 +1,7 @@ import React from 'react'; import { Fab, FabIcon, FabLabel } from '@/components/ui/Fab'; -import { Avatar, AvatarImage } from '@/components/ui/Avatar'; -import { AddIcon, MenuIcon, SearchIcon, CheckIcon } from '@/components/ui/Icon'; +import { MenuIcon } from '@/components/ui/Icon'; import { Box } from '@/components/ui/Box'; -import { - Checkbox, - CheckboxIndicator, - CheckboxLabel, - CheckboxIcon, -} from '@/components/ui/Checkbox'; -import { Link } from '@/components/ui/Link'; -import { VStack } from '@/components/ui/VStack'; -import { HStack } from '@/components/ui/HStack'; -import { Heading } from '@/components/ui/Heading'; -import { Text } from '@/components/ui/Text'; -import { Divider } from '@/components/ui/Divider'; -import { Image } from '@/components/ui/Image'; -import { EditIcon, ShoppingCartIcon } from 'lucide-react-native'; const FabBasic = (props: any) => { return ( @@ -34,28 +19,4 @@ FabBasic.description = export default FabBasic; -export { - Fab, - FabIcon, - FabLabel, - Avatar, - AvatarImage, - AddIcon, - MenuIcon, - SearchIcon, - CheckIcon, - Box, - Checkbox, - CheckboxIndicator, - CheckboxLabel, - CheckboxIcon, - Link, - VStack, - HStack, - Heading, - Text, - Divider, - Image, - EditIcon, - ShoppingCartIcon, -}; +export { Fab, FabIcon, FabLabel, MenuIcon, Box }; diff --git a/example/storybook-nativewind/src/components/Text/Text.tsx b/example/storybook-nativewind/src/components/Text/Text.tsx index ec8b772894..b02146b9e3 100644 --- a/example/storybook-nativewind/src/components/Text/Text.tsx +++ b/example/storybook-nativewind/src/components/Text/Text.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Text } from '@/components/ui/Text'; -import { Center } from '@/components/ui/Center'; const TextBasic = ({ size = 'md', @@ -36,4 +35,4 @@ TextBasic.description = export default TextBasic; -export { Text, Center }; +export { Text }; From f2be03a91614057794d6e51f1785b0dbda29159e Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 1 Mar 2024 19:27:00 +0530 Subject: [PATCH 08/45] fix: nativewind imports --- .../src/components/HStack/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx index c6412dec49..913b409392 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs'; -import { HStack, Box } from './HStack'; +import { HStack, Box } from '../../components-example/nativewind'; import { transformedCode } from '../../utils'; import { AppProvider, From 2bfb58da2c7fa32ea51e1af13357b7f5875a990c Mon Sep 17 00:00:00 2001 From: Damini Date: Mon, 4 Mar 2024 11:45:34 +0530 Subject: [PATCH 09/45] fix: nativewind imports --- .../src/components/Icon/index.nw.stories.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx index c69007dd82..1e2a9535f5 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -74,12 +74,14 @@ import { Icon, VStack, HStack, + createIcon, +} from '../../components-example/nativewind'; +import { ChromeIcon, InstagramIcon, FacebookIcon, - createIcon, Camera, -} from './Icon'; +} from 'lucide-react-native'; import { Path, Rect } from 'react-native-svg'; From 4466a40b5a8fa2cb0eb18ad447d8898dd2f0adfd Mon Sep 17 00:00:00 2001 From: Damini Date: Mon, 4 Mar 2024 11:54:29 +0530 Subject: [PATCH 10/45] fix: icon base color --- .../src/components-example/nativewind/Icon/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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', From 30eb31dbafc485c7e655d7c66ffc17f9637a9a81 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 4 Mar 2024 12:39:18 +0530 Subject: [PATCH 11/45] fix: badge component nativewind --- .../nativewind/Badge/index.tsx | 75 +++--- .../src/components/Badge/Badge.tsx | 51 ++-- .../src/components/Badge/index.nw.stories.mdx | 253 ++++++------------ yarn.lock | 5 - 4 files changed, 154 insertions(+), 230 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Badge/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Badge/index.tsx index 5be5c4c426..4f99775c4c 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Badge/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Badge/index.tsx @@ -1,14 +1,16 @@ import React from 'react'; -import { Text, View } from 'react-native'; +import { Text, View, Platform } from 'react-native'; import { tva, withStyleContext, + withStyleContextAndStates, useStyleContext, + cssInterop, + VariantProps, } from '@gluestack-ui/nativewind-utils'; -import { cssInterop } from 'nativewind'; const badgeStyle = tva({ - base: 'flex-row items-center rounded-xs data-[disabled=true]:opacity-50 px-2', + base: 'flex-row items-center rounded-sm data-[disabled=true]:opacity-50 px-2', variants: { action: { @@ -36,6 +38,11 @@ const badgeTextStyle = tva({ info: 'text-info-600', muted: 'text-muted-600', }, + size: { + sm: 'text-2xs', + md: 'text-xs', + lg: 'text-sm', + }, }, variants: { isTruncated: { @@ -50,19 +57,6 @@ const badgeTextStyle = tva({ strikeThrough: { true: 'line-through', }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-md', - 'lg': 'text-lg', - 'xl': 'text-xl', - '2xl': 'text-2xl', - '3xl': 'text-3xl', - '4xl': 'text-4xl', - '5xl': 'text-5xl', - '6xl': 'text-6xl', - }, sub: { true: 'text-xs', }, @@ -85,23 +79,23 @@ const badgeIconStyle = tva({ info: 'text-info-600', muted: 'text-muted-600', }, - }, - variants: { size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'h-4.5 w-4.5', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', + sm: 'h-3 w-3', + md: 'h-3.5 w-3.5', + lg: 'h-4 w-4', }, }, }); -const ContextView = withStyleContext(View); +const ContextView = + Platform.OS === 'web' + ? withStyleContext(View) + : withStyleContextAndStates(View); cssInterop(ContextView, { className: 'style' }); +type IBadgeProps = React.ComponentProps & + VariantProps; const Badge = ({ children, action = 'info', @@ -109,7 +103,7 @@ const Badge = ({ size = 'md', className, ...props -}: any) => { +}: { className?: string } & IBadgeProps) => { return ( { - const { size: parentSize, action } = useStyleContext(); +type IBadgeTextProps = React.ComponentProps & + VariantProps; +const BadgeText = ({ + children, + className, + size, + ...props +}: { className?: string } & IBadgeTextProps) => { + const { size: parentSize, action: parentAction } = useStyleContext(); return ( { ); }; -const BadgeIcon = ({ className, size, as: AsComp, ...props }: any) => { - const { size: parentSize, action } = useStyleContext(); +type IBadgeIconProps = React.ComponentProps & { + as?: any; +}; +const BadgeIcon = ({ + className, + size, + as: AsComp, + ...props +}: IBadgeIconProps & { className?: any }) => { + const { size: parentSize, action: parentAction } = useStyleContext(); if (AsComp) { return ( { className={badgeIconStyle({ parentVariants: { size: parentSize, - action, + action: parentAction, }, size, class: className, diff --git a/example/storybook-nativewind/src/components/Badge/Badge.tsx b/example/storybook-nativewind/src/components/Badge/Badge.tsx index 80203c1c6a..a33a385ae1 100644 --- a/example/storybook-nativewind/src/components/Badge/Badge.tsx +++ b/example/storybook-nativewind/src/components/Badge/Badge.tsx @@ -1,41 +1,40 @@ import React from 'react'; -import { - Center, - Icon, - Box, - Text, - VStack, - HStack, - SettingsIcon, - Divider, - AddIcon, - Image, - CheckIcon, - Heading, - Avatar, - AvatarFallbackText, - AvatarImage, - Button, - ButtonText, - Menu, - MenuIcon, - MenuItem, - MenuItemLabel, - GlobeIcon, -} from '@gluestack-ui/themed'; import { PaintBucket, PuzzleIcon, BadgeCheckIcon, BadgePlusIcon, } from 'lucide-react-native'; +import { + Avatar, + AvatarFallbackText, + AvatarImage, +} from '@/components/ui/Avatar'; +import { Center } from '@/components/ui/Center'; +import { Box } from '@/components/ui/Box'; +import { Text } from '@/components/ui/Text'; +import { VStack } from '@/components/ui/VStack'; +import { HStack } from '@/components/ui/HStack'; +import { Divider } from '@/components/ui/Divider'; +import { Image } from '@/components/ui/Image'; +import { Heading } from '@/components/ui/Heading'; +import { Button, ButtonText } from '@/components/ui/Button'; +import { Menu, MenuItem, MenuItemLabel } from '@/components/ui/Menu'; import { Badge, BadgeText, BadgeIcon } from '@/components/ui/Badge'; +import { + GlobeIcon, + MenuIcon, + Icon, + SettingsIcon, + AddIcon, + CheckIcon, +} from '@/components/ui/Icon'; const BadgeBasic = ({ text = 'NEW FEATURE', _colorMode, ...props }: any) => { return ( - + {text} - + ); }; diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx index 0cfd4c28f0..71307f59d6 100644 --- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx @@ -1,5 +1,5 @@ --- -title: Badge | gluestack-ui | Installation, Usage, and API +title: gluestack-ui Badge Component | Installation, Usage, and API description: The badge component lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information. @@ -15,21 +15,29 @@ import { Meta } from '@storybook/addon-docs'; import { + Center, Badge, BadgeText, + BadgeIcon, Icon, Box, - Avatar, - AvatarImage, - AvatarFallbackText, + Text, + VStack, + HStack, + SettingsIcon, + AddIcon, Divider, Image, + CheckIcon, Heading, - VStack, - HStack, + Avatar, + AvatarFallbackText, + AvatarImage, Button, ButtonText, + GlobeIcon, Menu, + MenuIcon, MenuItem, MenuItemLabel, } from '../../components-example/nativewind'; @@ -38,17 +46,10 @@ import { PuzzleIcon, BadgeCheckIcon, BadgePlusIcon, - SettingsIcon, - AddIcon, - BadgeIcon, - CheckIcon, - MenuIcon, - Globe, } from 'lucide-react-native'; import { AppProvider, CodePreview, - Text, Table, TableContainer, InlineCode, @@ -63,11 +64,11 @@ This is an illustration of **Badge** component. - New feature - - -`, + + New feature + + + `, transformCode: (code) => { return transformedCode(code); }, @@ -76,7 +77,7 @@ This is an illustration of **Badge** component. Badge, BadgeText, BadgeIcon, - Globe, + GlobeIcon }, argsType: { size: { @@ -156,53 +157,70 @@ Contains all Icon related layout style props and actions. It inherits all the pr Badge component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props). - - - +> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available. ### Examples @@ -236,7 +254,7 @@ An example of the Badge component being used with the Avatar component to displa - Nursing Assistant + Nursing Assistant @@ -256,7 +274,7 @@ An example of the Badge component being used with the Avatar component to displa Badge, BadgeText, BadgeIcon, - Globe, + GlobeIcon, BadgeCheckIcon, }, argsType: {}, @@ -264,103 +282,6 @@ An example of the Badge component being used with the Avatar component to displa /> -#### Badge in Menu - -A Badge component used with a menu adds a visual indicator, such as a badge, to highlight specific items or provide additional information within the menu, enhancing user interaction and improving the visibility of important elements. - - - { - return ( - - ); - }} - > - - - - - Community - - - - - - - - Plugins - - - - - - - - Theme - - - New - - - - - - - - Settings - - - - - - - - Add account - - - - -`, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Button, - ButtonText, - Menu, - MenuIcon, - MenuItem, - MenuItemLabel, - Text, - Box, - HStack, - Icon, - Globe, - PuzzleIcon, - PaintBucket, - SettingsIcon, - AddIcon, - Badge, - BadgeText, - BadgeIcon, - BadgePlusIcon, - }, - argsType: {}, - }} - /> - - ### Badge Composition An example of the Badge component being used with the Composition component, allowing for the display of badges within a composition of other UI elements. @@ -373,10 +294,10 @@ An example of the Badge component being used with the Composition component, all - 2 + 2 - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Icon, - HStack, - ChevronDownIcon, - Input, - InputField, - Select, - SelectTrigger, - SelectInput, - SelectIcon, - SelectPortal, - SelectBackdrop, - SelectContent, - SelectDragIndicatorWrapper, - SelectDragIndicator, - SelectItem, - Button, - ButtonText, - }, - argsType: {}, - }} - /> - - -#### Form Control with Form in Modal - -Modal or other Overlay components can utilize FormControl for state management and error control. - - - - - { - setShowModal(false) - }} - className='bg-white' - > - - - - - - Change Settings - - - Make modifications to the settings with ease. - - - - - - - Name - - - - - - - - - - Email - - - - - - - - - - Volume - - - - - - - - - - - - - - Dark Mode - - - - - - - - - - ); - } - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Wrapper, - useState, - Box, - Center, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Input, - InputField, - Button, - ButtonText, - Slider, - SliderTrack, - SliderFilledTrack, - SliderThumb, - Switch, - Modal, - ModalBackdrop, - ModalContent, - ModalHeader, - ModalCloseButton, - ModalBody, - ModalFooter, - Text: FormControlText, - Heading, - VStack, - HStack, - }, - argsType: {}, - }} - /> - - #### Form Control with Error Error messages can be displayed using FormControl. From bda50f258864304c1a557a9fb6c568ce218ba888 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 4 Mar 2024 15:55:04 +0530 Subject: [PATCH 15/45] fix: button component nativewind --- .../nativewind/Button/index.tsx | 8 ++++---- .../nativewind/Input/index.tsx | 2 +- .../src/components/Button/index.nw.stories.mdx | 16 ++++++---------- 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx index eb8d323cef..438aa1c71e 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx @@ -41,13 +41,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-500', + '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', 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-500', + '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', 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-500', + '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', 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-500', + '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', default: 'bg-transparent hover:bg-background-50 active:bg-transparent', }, variant: { diff --git a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx index ab20694599..e8f27f1696 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx @@ -65,7 +65,7 @@ const inputSlotStyle = tva({ }); const inputFieldStyle = tva({ - base: 'flex-1 text-text-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500', + base: 'flex-1 text-typography-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500', parentVariants: { variant: { diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx index 8b3d525a13..867763f44a 100644 --- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx @@ -43,6 +43,7 @@ import { } from '@gluestack/design-system'; import Wrapper from '../../components-example/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; +import colors from 'tailwindcss/colors'; This is an illustration of **Button** component. @@ -462,14 +463,15 @@ A loading button is a type of button component that provides visual feedback to metaData={{ code: ` `, transformCode: (code) => { return transformedCode(code); }, - scope: { Button, ButtonText, Wrapper, ButtonSpinner }, + scope: { Button, ButtonText, Wrapper, ButtonSpinner, colors }, argsType: {}, }} /> @@ -523,16 +525,10 @@ A button with a link combines the interactive behavior of a button component wit transformCode: (code) => { return transformedCode(code); }, - scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon - }, - - argsType: - {}, - + scope: { Button, ButtonText, ButtonIcon, Wrapper, ArrowUpIcon }, + argsType: {}, }} - /> - #### Button With Icon From 87a90399a9d25250029753936582575e3239ff40 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 4 Mar 2024 16:26:32 +0530 Subject: [PATCH 16/45] fix: checkbox component nativewind --- .../src/components-example/nativewind/Checkbox/index.tsx | 2 +- .../src/components/Checkbox/Checkbox.stories.tsx | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Checkbox/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Checkbox/index.tsx index ac86639bf5..31e788274f 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Checkbox/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Checkbox/index.tsx @@ -47,7 +47,7 @@ const checkboxIndicatorStyle = tva({ }); const checkboxLabelStyle = tva({ - base: 'text-typography-600 data-[checked=true]:text-typography-900 group-hover/checkbox:text-typography-900 group-hover/checkbox:data-[checked=true]:text-typography-900 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:text-typography-900 group-hover/checkbox:data-[disabled=true]:text-typography-600 active:text-typography-900 active:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none', + base: 'text-typography-600 data-[checked=true]:text-typography-900 group-hover/checkbox:text-typography-900 group-hover/checkbox:data-[checked=true]:text-typography-900 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:text-typography-900 group-hover/checkbox:data-[disabled=true]:text-typography-400 active:text-typography-900 active:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none', parentVariants: { size: { lg: 'text-lg', diff --git a/example/storybook-nativewind/src/components/Checkbox/Checkbox.stories.tsx b/example/storybook-nativewind/src/components/Checkbox/Checkbox.stories.tsx index 199ae0f168..616a59c5ec 100644 --- a/example/storybook-nativewind/src/components/Checkbox/Checkbox.stories.tsx +++ b/example/storybook-nativewind/src/components/Checkbox/Checkbox.stories.tsx @@ -22,11 +22,16 @@ const CheckboxMeta: ComponentMeta = { control: 'boolean', options: [true, false], }, + isFocusVisible: { + control: 'boolean', + options: [true, false], + }, }, args: { size: 'md', isDisabled: false, isInvalid: false, + isFocusVisible: false, }, }; From fec3ddb912342d94c8f2b9ec1d739fe4eca66e9a Mon Sep 17 00:00:00 2001 From: Damini Date: Mon, 4 Mar 2024 16:49:23 +0530 Subject: [PATCH 17/45] feat: add radio examples --- .../src/components/Radio/index.nw.stories.mdx | 303 +++++++++++++++++- 1 file changed, 293 insertions(+), 10 deletions(-) diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx index 22396d7ab9..03ce0eeaae 100644 --- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx @@ -481,19 +481,19 @@ Radio buttons provide a mutually exclusive selection mechanism, allowing users t - + English - + French - + German @@ -538,13 +538,13 @@ Radio buttons can be used horizontally. - + Credit Card - + Cash On Delivery @@ -589,8 +589,8 @@ Radio buttons can be used with helper text. - - + + Extended coverage @@ -598,8 +598,8 @@ Radio buttons can be used with helper text. Extra services included - - + + Basic coverage @@ -630,4 +630,287 @@ Radio buttons can be used with helper text. argsType: {}, }} /> - \ No newline at end of file + + +#### Form Control + +Radio buttons can be used inside FormControl for better control of states and functionality. + + + + + + Which time slot works best for you? + + + + + + + + Monday + + + + + + Tuesday + + + + + + Wednesday + + + + + Choose a time slot for the meeting + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Center, + Text, + CircleIcon, + VStack, + Heading, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + FormControl, + }, + argsType: {}, + }} + /> + + +#### Label left + +Radio buttons can be used horizontally + + + + + + Jane Cooper + + + + + + Wade Warren + + + + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + VStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + useState, + }, + argsType: {}, + }} + /> + + +#### Controlled + +The Radio components can be used with a controlled state, enabling precise management of the selected option through external state management. + + + + + + + + + Apartments + + + + + + Houses + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + VStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + useState, + }, + argsType: {}, + }} + /> + + +#### Uncontrolled + +The Radio components can be used with either a ref or no state, providing an uncontrolled state where the selected option is managed internally. + + + { + e.preventDefault(); + const checkboxValue = radioRef.current.checked; + }; + return ( + + + + + + + Hotels + + + + + + Living quarters + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + VStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + useRef, + }, + argsType: {}, + }} + /> + + +#### Radio group + +The Radio group component allows users to group radio and display them in a horizontal or vertical row for better visual representation and functionality. + + + + + + + + + Label 1 + + + + + + Label 2 + + + + + + Label 3 + + + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'RadioGroupExample'); + }, + scope: { + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + VStack, + Wrapper, + Center, + CircleIcon, + useState, + }, + argsType: {}, + }} + /> + From 008a525100f9fdc82ad185fbbd0825a30627bd07 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 4 Mar 2024 17:18:43 +0530 Subject: [PATCH 18/45] fix: input component nativewind --- .../components-example/nativewind/Icon/index.tsx | 2 +- .../components-example/nativewind/Input/index.tsx | 6 +++--- .../src/components/Input/Input.tsx | 15 ++++++--------- .../src/components/Input/index.nw.stories.mdx | 15 ++++++++------- 4 files changed, 18 insertions(+), 20 deletions(-) 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-example/nativewind/Input/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx index ab20694599..a0ce780e1a 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx @@ -47,13 +47,13 @@ const inputStyle = tva({ }); const inputIconStyle = tva({ - base: 'text-typography-400 fill-none', + base: 'text-typography-400', parentVariants: { size: { '2xs': 'h-3 w-3', 'xs': 'h-3.5 w-3.5', 'sm': 'h-4 w-4', - 'md': 'h-4.5 w-4.5', + 'md': 'h-[18px] w-[18px]', 'lg': 'h-5 w-5', 'xl': 'h-6 w-6', }, @@ -65,7 +65,7 @@ const inputSlotStyle = tva({ }); const inputFieldStyle = tva({ - base: 'flex-1 text-text-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500', + base: 'flex-1 text-typography-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500', parentVariants: { variant: { diff --git a/example/storybook-nativewind/src/components/Input/Input.tsx b/example/storybook-nativewind/src/components/Input/Input.tsx index 743be8c2a4..09cb507e8c 100644 --- a/example/storybook-nativewind/src/components/Input/Input.tsx +++ b/example/storybook-nativewind/src/components/Input/Input.tsx @@ -1,17 +1,14 @@ import React from 'react'; -import { - Button, - ButtonText, - Box, - Heading, - Icon, - FormControl, -} from '@gluestack-ui/themed'; import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/Input'; +import { Button, ButtonText } from '@/components/ui/Button'; import { Center } from '@/components/ui/Center'; import { VStack } from '@/components/ui/VStack'; import { Text } from '@/components/ui/Text'; -import { EyeIcon, EyeOffIcon, SearchIcon } from 'lucide-react-native'; +import { Icon, SearchIcon } from '@/components/ui/Icon'; +import { Box } from '@/components/ui/Box'; +import { Heading } from '@/components/ui/Heading'; +import { FormControl } from '@/components/ui/FormControl'; +import { EyeIcon, EyeOffIcon } from 'lucide-react-native'; import { useState } from 'react'; const InputBasic = ({ ...props }: any) => { diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx index 3a18d3ef87..ef2f98d0d6 100644 --- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx @@ -28,8 +28,9 @@ import { FormControl, Heading, Icon, + SearchIcon, } from '../../components-example/nativewind'; -import { SearchIcon, EyeIcon, EyeOffIcon } from '../../components-example/nativewind'; +import { EyeIcon, EyeOffIcon } from 'lucide-react-native'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -512,14 +513,14 @@ The Input component integrates with an icon and a button, providing users with a }; return ( - + Login - + Email @@ -529,7 +530,7 @@ The Input component integrates with an icon and a button, providing users with a - + Password @@ -538,7 +539,7 @@ The Input component integrates with an icon and a button, providing users with a /> {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */} - + @@ -548,7 +549,7 @@ The Input component integrates with an icon and a button, providing users with a setShowModal(false); }} > - + Save From e52abacaf5207c24ef1f3e8e06bcebb373a74cec Mon Sep 17 00:00:00 2001 From: Damini Date: Mon, 4 Mar 2024 18:08:53 +0530 Subject: [PATCH 19/45] fix: fab component --- .../src/components-example/nativewind/Fab/index.tsx | 2 +- .../src/components/Fab/index.nw.stories.mdx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx index 31ec46238e..7029863c1d 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx @@ -26,7 +26,7 @@ cssInterop(UIFab.Label, { className: 'style' }); cssInterop(UIFab.Icon, { className: 'style' }); const fabStyle = tva({ - base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-red-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:outline-2 data-[focus=true]:outline-primary-700 data-[focus=true]:outline-solid', + 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]:outline-2 data-[focus=true]:outline-primary-700 data-[focus=true]:outline-solid', variants: { size: { sm: 'px-2.5 py-2.5 text-sm', diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx index 8fde287d0e..9d435b5303 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -37,7 +37,6 @@ import { Divider, Image, EditIcon, - ShoppingCartIcon, } from '../../components-example/nativewind'; import { transformedCode } from '../../utils'; import { @@ -47,6 +46,7 @@ import { TableContainer, InlineCode, } from '@gluestack/design-system'; +import {ShoppingCartIcon} from 'lucide-react-native' import Wrapper from '../../components-example/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; @@ -420,7 +420,7 @@ A Fab component with an icon adds a visually striking and easily recognizable bu ); })} - + {/* EditIcon is imported from 'lucide-react-native' */} @@ -463,7 +463,7 @@ A Fab component with an icon and text combines a visual icon with accompanying t - + Search @@ -669,7 +669,7 @@ A Fab component with custom placement allows for flexible positioning of the but - + {/* ShoppingCartIcon is imported from 'lucide-react-native' */} From 2c0baf680f0dd3a3daa34a542ec7428024775bfb Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 4 Mar 2024 19:21:22 +0530 Subject: [PATCH 20/45] fix: button focusVisible --- .../src/components-example/nativewind/Button/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx index 438aa1c71e..5d63ca4ffb 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx @@ -37,7 +37,7 @@ cssInterop(UIButton.Spinner, { className: 'style' }); cssInterop(UIButton.Icon, { className: 'style' }); const buttonStyle = tva({ - base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40', + base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40', variants: { action: { primary: From 77a4d70ebcdf61a296bb73e4bc2a9dd834dcb860 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 5 Mar 2024 11:53:10 +0530 Subject: [PATCH 21/45] fix: fab focus issue --- .../src/components-example/nativewind/Fab/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx index 7029863c1d..ec8b075598 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx @@ -26,7 +26,7 @@ cssInterop(UIFab.Label, { className: 'style' }); cssInterop(UIFab.Icon, { className: 'style' }); 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]:outline-2 data-[focus=true]:outline-primary-700 data-[focus=true]:outline-solid', + 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', variants: { size: { sm: 'px-2.5 py-2.5 text-sm', From d0189384214716911ff1e76e58e89c44bed2b4b6 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 5 Mar 2024 11:55:43 +0530 Subject: [PATCH 22/45] fix: input focus --- .../src/components-example/nativewind/Input/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx index a0ce780e1a..8f15850a52 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx @@ -23,7 +23,7 @@ const UIInput = createInput({ }); const inputStyle = tva({ - base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-border-400 data-[focus=true]:border-primary-700 focus:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300', + base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300', variants: { size: { @@ -35,13 +35,13 @@ const inputStyle = tva({ variant: { underlined: - '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]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus: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]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus: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-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 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', outline: - 'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus: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]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus: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-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: - 'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus: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]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus: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-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', }, }, }); From 82b2c48973adacc85b658eb29db2b9dd5fd1bcb2 Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 6 Mar 2024 11:25:33 +0530 Subject: [PATCH 23/45] fix: card example breaking --- .../storybook-nativewind/src/core-components/nativewind/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/example/storybook-nativewind/src/core-components/nativewind/index.ts b/example/storybook-nativewind/src/core-components/nativewind/index.ts index 9d570d6744..d24c280d57 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/index.ts +++ b/example/storybook-nativewind/src/core-components/nativewind/index.ts @@ -7,6 +7,7 @@ export * from './avatar'; export * from './badge'; export * from './box'; export * from './flat-list'; +export * from './card'; export * from './center'; export * from './checkbox'; export * from './hstack'; From 4294425abc149787092fdce63e0f01145b0a1962 Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 6 Mar 2024 12:20:26 +0530 Subject: [PATCH 24/45] fix: fab story breaking --- .../storybook-nativewind/src/components/Fab/index.nw.stories.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx index 8b2e50ef51..9fe5aab20f 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -37,7 +37,6 @@ import { Divider, Image, EditIcon, - ShoppingCartIcon, } from '../../core-components/nativewind'; import { transformedCode } from '../../utils'; import { From 6b2be83d2afc5ec37481606e6df1a9e8b3065b6a Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Wed, 6 Mar 2024 13:16:48 +0530 Subject: [PATCH 25/45] feat: added examples for actionsheet & icon --- .../Actionsheet/index.themed.stories.mdx | 565 +++++++++++++++++- .../components/Icon/index.themed.stories.mdx | 244 +++++++- 2 files changed, 802 insertions(+), 7 deletions(-) diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx index 93e71c6592..bb066f1f7f 100644 --- a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx @@ -52,10 +52,9 @@ import { Icon, TrashIcon, ShareIcon -} from '../../components-example/themed'; +} from '../../core-components/themed'; import { KeyboardAvoidingView, - Platform, } from '@gluestack-ui/themed'; import { LeadingIcon, IconRoot } from '@gluestack-ui/themed'; import { transformedCode } from '../../utils'; @@ -70,8 +69,9 @@ import { Alert, } from '@gluestack/design-system'; import { config } from '@gluestack-ui/config'; -import Wrapper from '../../components-example/themed/Wrapper'; +import Wrapper from '../../core-components/themed/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; +import {Platform} from 'react-native'; This is an illustration of **Actionsheet** component. @@ -570,3 +570,562 @@ Explore the comprehensive details of the Actionsheet in this document, including src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6203-27912%26t%3DzQi1VCxZQbqoZ7AP-1%26scaling%3Dscale-down%26page-id%3D6203%253A25990%26starting-point-node-id%3D6203%253A27912%26mode%3Ddesign" allowFullScreen /> + +## Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +### Keyboard handling + +Demonstrates a common UI pattern known as keyboard handling or keyboard scrolling, in which an input field is automatically scrolled into view when the user taps on it and the keyboard appears. This improves usability and ensures that the input field is always visible and accessible, even when the keyboard is blocking part of the screen. + +**Without SnapPoints** + + + setShowActionsheet(!showActionsheet); + return ( + <> + + + + + + + + + + + + + + + Mastercard + Card ending in 2345 + + + + + + Confirm security code + + + + + + + + + + + + + + + + ); + } +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Actionsheet, + ActionsheetBackdrop, + ActionsheetContent, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetItem, + ActionsheetItemText, + Button, + ButtonText, + ButtonText, + VStack, + Input, + InputIcon, + InputSlot, + InputField, + FormControl, + FormControlLabel, + FormControlLabelText, + HStack, + Image, + Text, + Box, + Icon, + LeadingIcon, + IconRoot, + KeyboardAvoidingView, + Platform, + }, + argsType: {}, + }} + /> + + +**With SnapPoints** + + + setShowActionsheet(!showActionsheet); + return ( + <> + + + + + + + + + + + + + + + Mastercard + Card ending in 2345 + + + + + + Confirm security code + + + + + + + + + + + + + + + +);} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Actionsheet, + ActionsheetBackdrop, + ActionsheetContent, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetItem, + ActionsheetItemText, + Button, + ButtonText, + ButtonText, + VStack, + Input, + InputIcon, + InputSlot, + InputField, + FormControl, + FormControlLabel, + FormControlLabelText, + HStack, + Image, + Text, + Box, + Icon, + LeadingIcon, + IconRoot, + KeyboardAvoidingView, + Platform, + }, + argsType: {}, + }} + /> + + +### Icons + +The Actionsheet with Icons is a variation of the Actionsheet component that displays icons next to each option. It's commonly used in apps for a more visual representation of options and easier navigation. + + + setShowActionsheet(!showActionsheet); + return ( + <> + + + + + + + + + + + + Delete + + + + + + Share + + + + + + Play + + + + + + Favourite + + + + + + Cancel + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Actionsheet, + ActionsheetBackdrop, + ActionsheetContent, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetItem, + ActionsheetItemText, + ActionsheetIcon, + Icon, + Wrapper, + TrashIcon, + ShareIcon, + PlayIcon, + FavouriteIcon, + CloseIcon, + Button, + ButtonText, + }, + argsType: {}, + }} + /> + + +### VirtualizedList + +The Actionsheet with Virtualized List includes a virtualized list for better performance when displaying a large number of options. It's commonly used in apps with long lists of options for an improved user experience. + + + setShowActionsheet(!showActionsheet); + const data = React.useMemo(() => Array(50).fill(0).map((_, index) => 'Item' + index),[]); + const getItem = (_data, index) => ({ + id: Math.random().toString(12).substring(0), + title: _data[index], + }); + const getItemCount = (_data) => _data.length; + const Item = React.useCallback( + ({ title }) => ( + + {title} + + ), + [handleClose] + ); + return ( + <> + + + + + + + + } + keyExtractor={(item) => item.id} + getItemCount={getItemCount} + getItem={getItem} + /> + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Actionsheet, + ActionsheetBackdrop, + ActionsheetContent, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetItem, + ActionsheetItemText, + ActionsheetVirtualizedList, + Button, + ButtonText, + Wrapper, + }, + argsType: {}, + }} + /> + + +### FlatList + +The Actionsheet with Flat List is a variation of the Actionsheet component that displays a flat list of options. It's commonly used in apps for a simple and straightforward display of options to the user. + + + setShowActionsheet(!showActionsheet); + const DATA = [ + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', + title: 'First Item' + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', + title: 'Second Item' + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29d72', + title: 'Third Item' + }, + ]; + const Item = React.useCallback( + ({ title }) => ( + + {title} + + ), + [handleClose] + ); + return ( + <> + + + + + + + + } + keyExtractor={(item) => item.id} + /> + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Actionsheet, + ActionsheetBackdrop, + ActionsheetContent, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetItem, + ActionsheetItemText, + ActionsheetFlatList, + Button, + ButtonText, + Wrapper, + }, + argsType: {}, + }} + /> + + +### SectionList + +The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation. + +Default styling of the component can be found in the `components/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Actionsheet) of the styled `Actionsheet` component. + + + setShowActionsheet(!showActionsheet); + const DATA = [ + { + title: 'Main dishes', + data: ['Pizza', 'Burger', 'Risotto'], + }, + { + title: 'Sides', + data: ['French Fries', 'Onion Rings', 'Fried Shrimps'], + }, + { + title: 'Drinks', + data: ['Water', 'Coke', 'Beer'], + }, + { + title: 'Desserts', + data: ['Cheese Cake', 'Ice Cream'], + }, + ]; + return ( + <> + + + + + + + + item + index} + renderItem={({ item }) => ( + + {item} + + )} + renderSectionHeader={({ section: { title, data } }) => ( + + {title} ({data.length}) + + )} + /> + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Actionsheet, + ActionsheetBackdrop, + ActionsheetContent, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetItem, + ActionsheetItemText, + ActionsheetSectionList, + ActionsheetSectionHeaderText, + Button, + ButtonText, + Wrapper, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx index fbb4c6193e..49546d4f3e 100644 --- a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx @@ -73,12 +73,14 @@ import { Icon, VStack, HStack, + createIcon, +} from '../../core-components/themed'; +import { ChromeIcon, InstagramIcon, FacebookIcon, - createIcon, - Camera, -} from '../../components-example/themed'; + Camera +} from 'lucide-react-native' import { CollapsibleCode } from "@gluestack/design-system"; import { Path, Rect } from 'react-native-svg'; @@ -91,7 +93,7 @@ import { InlineCode, } from '@gluestack/design-system'; -import Wrapper from '../../components-example/themed/Wrapper'; +import Wrapper from '../../core-components/themed/Wrapper'; This is an illustration of **Icon** component. @@ -228,3 +230,237 @@ Explore the comprehensive details of the Icon in this document, including its im src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D6412%253A31332%26type%3Ddesign%26node-id%3D6412-33234%26viewport%3D723%252C127%252C0.03%26t%3DxNCgdoHjEw3Tlb72-1%26scaling%3Dscale-down%26starting-point-node-id%3D6412%253A33234%26mode%3Ddesign" allowFullScreen /> + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### All gluestack icons + +Below is a list of all of the icons in the library. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + HStack, + AddIcon, + CheckIcon, + CloseIcon, + InfoIcon, + ArrowUpIcon, + ChevronDownIcon, + ChevronUpIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronsLeftIcon, + ChevronsRightIcon, + AtSignIcon, + CheckCircleIcon, + AlertCircleIcon, + ChevronsUpDownIcon, + PaperclipIcon, + BellIcon, + MenuIcon, + ArrowRightIcon, + ArrowLeftIcon, + ArrowDownIcon, + CalendarDaysIcon, + MessageCircleIcon, + CopyIcon, + TrashIcon, + DownloadIcon, + GripVerticalIcon, + EditIcon, + MailIcon, + LinkIcon, + ExternalLinkIcon, + LockIcon, + RemoveIcon, + MoonIcon, + SlashIcon, + PhoneIcon, + HelpCircleIcon, + RepeatIcon, + Repeat1Icon, + SearchIcon, + SettingsIcon, + LoaderIcon, + StarIcon, + SunIcon, + ClockIcon, + UnlockIcon, + EyeIcon, + EyeOffIcon, + CloseCircleIcon, + ShareIcon, + CircleIcon, + FavouriteIcon, + GlobeIcon, + ThreeDotsIcon, + Icon, + PlayIcon + }, + argsType: {}, + }} +/> + + + +#### Lucide Icons (Recommended) + +[Lucide](https://lucide.dev/docs/lucide-react-native) is an open source icon library for displaying icons for react-native. `gluestack-ui` provides an easy integration with lucide icons. + + + + + + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + VStack, + ChromeIcon, + InstagramIcon, + FacebookIcon, + Icon, + Camera, + }, + argsType: {}, + }} + /> + + +#### SVG & Custom Icons + +We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component. +CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc. + +##### Notes to remember while using createIcon function + +- Pass svg props such as `viewBox` in `createIcon` directly. +- Copy the svg code without the SVG tag directly into the function argument `Path` or `D` or whichever prop justifies your svg. +- Replace HTML SVG tags (e.g., ``, `` etc) with the corresponding React Native SVG components (e.g., ``, `` etc). +- For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode. + +Before : +` ` + +After : +` ` + + + + {/* Rect, Path is imported from 'react-native-svg' */} + + + + + + + ), + }); + function App () { + return ; + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + createIcon, + Icon, + Path, + Rect, + }, + argsType: {}, + }} + /> + + +> gluestack-ui provides a set of pre created icons that can be used directly in our app and can also integrate third party icons using [AsForwarder](/style/docs/api/as-forwarder) from [gluestack-style](/style) From d320e9e07f4ffc43cc74549669d7f28ffcf71b64 Mon Sep 17 00:00:00 2001 From: Damini Date: Thu, 7 Mar 2024 12:58:43 +0530 Subject: [PATCH 26/45] fix: remove utility props --- .../src/components/HStack/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx index 7e8f9372d5..220cba85a3 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -105,7 +105,7 @@ The accessibility of a HStack is primarily determined by the accessibility infor ### Props -HStack component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below. +HStack component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props) and the props mentioned below. From 06c6c17b7e6d1a88f75195209d7b7ae2c153982b Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Thu, 7 Mar 2024 13:25:50 +0530 Subject: [PATCH 27/45] fix: added fixes for issues in themed components --- .../Actionsheet/index.themed.stories.mdx | 14 - .../components/Alert/index.themed.stories.mdx | 14 - .../AlertDialog/index.themed.stories.mdx | 15 - .../components/Badge/index.themed.stories.mdx | 16 +- .../components/Card/index.themed.stories.mdx | 505 +++++++++++++++++- .../Center/index.themed.stories.mdx | 14 - .../Checkbox/index.themed.stories.mdx | 19 - .../components/Fab/index.themed.stories.mdx | 400 +++++++++++++- .../components/Icon/index.themed.stories.mdx | 128 ++--- .../components/Input/index.themed.stories.mdx | 14 - .../components/Modal/index.themed.stories.mdx | 13 - .../Popover/index.themed.stories.mdx | 14 - .../components/Radio/index.themed.stories.mdx | 4 +- .../Slider/index.themed.stories.mdx | 15 - .../Switch/index.themed.stories.mdx | 14 - .../Textarea/index.themed.stories.mdx | 14 - .../components/Toast/index.themed.stories.mdx | 18 - .../Tooltip/index.themed.stories.mdx | 14 - .../core-components/themed/avatar/index.tsx | 2 +- 19 files changed, 954 insertions(+), 293 deletions(-) diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx index 6f481766ab..acbbddf5c7 100644 --- a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx @@ -561,20 +561,6 @@ We have outlined the various features that ensure the Actionsheet component is a - VoiceOver: When the actionsheet is focused, the screen reader will announce the button group . -## Spec Doc - -Explore the comprehensive details of the Actionsheet in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. - - diff --git a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx index e8c0719fe1..149e105dcd 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx @@ -576,25 +576,6 @@ Checkbox component is created using Pressable component from react-native. It ex -## Spec Doc - -Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. - - - - - - - - ### Examples The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. diff --git a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx index 6f5a2b1c74..0f53ca955b 100644 --- a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx @@ -14,33 +14,35 @@ import { Meta } from '@storybook/addon-docs'; -import { Fab, FabIcon, FabLabel } from '../../core-components/themed/fab'; +import { Fab, FabIcon, FabLabel } from '../../core-components/themed'; import { Checkbox, CheckboxIndicator, CheckboxLabel, - CheckboxIcon, - CheckIcon, - ShoppingCartIcon, Image, Box, Link, + HStack, + VStack, + Avatar, + AvatarImage, + Heading, + Text, + Divider, + AddIcon, + CheckboxIcon } from '../../core-components/themed'; -import { HStack, VStack, Avatar, AvatarImage } from '../../core-components/themed'; -import { Heading, Text, Divider } from '../../core-components/themed'; import { transformedCode } from '../../utils'; -import { AddIcon, EditIcon } from '../../core-components/themed'; -import { SearchIcon } from '../../core-components/themed'; +import { EditIcon,SearchIcon,ShoppingCartIcon,CheckIcon } from 'lucide-react-native'; import { AppProvider, CodePreview, Table, TableContainer, InlineCode, + CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../core-components/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Fab** component. @@ -356,7 +358,7 @@ Fab component is created using Pressable component from react-native. It extends - +/> + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### FAB with Icon + +A Fab component with an icon adds a visually striking and easily recognizable button that triggers a specific action or function within a user interface. + + + + + {data.map((chatData)=>{ + return ( + + + + + + + {chatData.name} + + + {chatData.msg} + + + + ); + })} + + + {/* EditIcon is imported from 'lucide-react-native' */} + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Fab, + FabIcon, + Wrapper, + EditIcon, + Box, + VStack, + HStack, + Avatar, + AvatarImage, + Heading, + Text, + }, + argsType: {}, + }} + /> + + +#### FAB with Icon and Text + +A Fab component with an icon and text combines a visual icon with accompanying text to create a prominent and descriptive button that triggers a specific action or function within a user interface. + + + + + + Search + + + + + HEALTH + + + Benefits of Oranges + + + Oranges are a great source of vitamin C, which is essential for a healthy immune system. + + + + Wade Warrem + + + + 6th Oct, 2019 + + + + 5 mins read + + + + + + + TECHNOLOGY + + + How AI can benefit your business + + + AI can automate tasks and processes, allowing for increasing efficiency and productivity. + + + + Wade Warrem + + + + 6th Oct, 2019 + + + + 5 mins read + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Fab, + FabIcon, + FabLabel, + Wrapper, + SearchIcon, + Box, + Divider, + Heading, + Text, + HStack, + VStack, + }, + argsType: {}, + }} + /> + + +#### Placement + +A Fab component with placement options allows for flexible positioning of the button within a user interface, enabling convenient and intuitive access to key actions or functionalities in various locations. + + + + + + + + + + + Prepare any feedback or updates. + + + + + + + + + + Review progress on goals and projects. + + + + + + + + + + Ask challenges and discuss. + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Box, + VStack, + Checkbox, + CheckboxIndicator, + CheckboxLabel, + CheckboxIcon, + CheckIcon, + Fab, + FabIcon, + FabLabel, + Wrapper, + AddIcon, + Text, + }, + argsType: {}, + }} + /> + + +#### Custom Placement + +A Fab component with custom placement allows for flexible positioning of the button according to specific design requirements or user interface preferences, providing tailored and intuitive access to key actions or functionalities. + + + + + + + + + Fresh Orange - Imported (Loose) + + + Rs 146(Rs.24.33/pc) + + + DETAILS + + + Oranges are a great source of vitamin C, which is essential for a healthy immune system. Oranges are a great source of vitamin C, which is important for maintaining a healthy immune system. Vitamin C also helps with the absorption of iron and the production of collagen, which supports healthy skin, teeth, and bones. + + + + READ MORE + + + + + {/* ShoppingCartIcon is imported from 'lucide-react-native' */} + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Fab, + FabIcon, + FabLabel, + Wrapper, + Box, + Heading, + Text, + ShoppingCartIcon, + Image, + VStack, + Link, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx index c9474f28df..acd2b8786f 100644 --- a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx @@ -221,20 +221,6 @@ Icon component is created using AsForwarder component from @gluestack-style/reac -## Spec Doc - -Explore the comprehensive details of the Icon in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. - - - ### Examples The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. diff --git a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx index 9384172120..48e50c8886 100644 --- a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx @@ -570,19 +570,6 @@ Modal component is created using View component from react-native. It extends al -## Spec Doc - -Explore the comprehensive details of the Modal in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. - - - ### Examples The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. diff --git a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx index dc4c9095d7..cc1daa29a1 100644 --- a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx @@ -415,20 +415,6 @@ Toast component is created using View component from react-native. It extends al -## Spec Doc - -Explore the comprehensive details of the Toast in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. - - +It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. \ No newline at end of file diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx index bafb924717..5cfd4e98b6 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx @@ -166,7 +166,7 @@ The Radio Component can be incorporated within the FormControl. - + @@ -176,7 +176,7 @@ The Radio Component can be incorporated within the FormControl. - + @@ -186,7 +186,7 @@ The Radio Component can be incorporated within the FormControl. - + @@ -433,21 +433,6 @@ It inherits all the properties of React Native's [Text](https://reactnative.dev/ FormControl component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props). - - ### Examples The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. @@ -925,7 +910,7 @@ Error messages can be displayed using FormControl. - + @@ -935,7 +920,7 @@ Error messages can be displayed using FormControl. - + @@ -945,7 +930,7 @@ Error messages can be displayed using FormControl. - + diff --git a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx index 796220bcb9..8d03020dcf 100644 --- a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx @@ -30,12 +30,12 @@ This is an illustration of **Spinner** component. showArgsController={true} metaData={{ code: ` - + `, transformCode: (code) => { return transformedCode(code); }, - scope: { Wrapper, Spinner }, + scope: { Wrapper, Spinner, colors }, argsType: { size: { control: 'select', 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 4fa3d3fda9..635876d2f0 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx @@ -315,7 +315,7 @@ We have outlined the various features that ensure the Textarea component is acce ### Props -Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. +Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below. #### Textarea @@ -402,19 +402,4 @@ The Textarea Component can be incorporated within the FormControl. argsType: {}, }} /> - - -## Spec Doc - -Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. - - - + \ No newline at end of file diff --git a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx index bb317f3a52..aff02e51e4 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx @@ -1,5 +1,6 @@ import { createLink } from '@gluestack-ui/link'; -import { Pressable, Platform, Text } from 'react-native'; +import { Pressable, Platform } from 'react-native'; +import { Text } from '@/components/ui/text'; import { tva, From 31d85bce85b7e71abc5667227a86984a2a6c665a Mon Sep 17 00:00:00 2001 From: Damini Date: Thu, 7 Mar 2024 15:23:20 +0530 Subject: [PATCH 29/45] feat: add examples for nativewind card component --- .../src/components/Card/index.nw.stories.mdx | 333 +++++++++++++++++- 1 file changed, 332 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx index fda69a979f..6a443641fb 100644 --- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx @@ -42,7 +42,6 @@ import { } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; -import { config } from '@gluestack-ui/config'; import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; @@ -177,3 +176,335 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/ + +## Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +### Card with Image + +This is an example of a Card component with an image. + + + + + + May 15, 2023 + + + The Power of Positive Thinking + + + + + Read Blog + + + + + +); +} +`, +transformCode: (code) => { +return transformedCode(code, 'function', 'App'); +}, +scope: { +Card, +Text, +Image, +Heading, +Link, +LinkText, +HStack, +Icon, +ArrowRightIcon, +Wrapper, +}, +}} +/> + + + +### Advanced Composition + +This is an example of a Card component with other components like Avatar, Image and Button. + + + + + + JD + + + + + Jane Doe + + + janedoe@sample.com + + + + + + + 81 + + posts + + + + + 5,281 + + followers + + + + + 281 + + following + + + + + + + + +); +} +`, +transformCode: (code) => { +return transformedCode(code, 'function', 'App'); +}, +scope: { +Card, +Box, +Avatar, +AvatarFallbackText, +AvatarImage, +VStack, +Divider, +Button, +ButtonText, +Text, +Image, +Heading, +Wrapper, +}, +}} +/> + + + +### Product Card + +This example illustrates a card showcasing a product. + + + + + + Fashion Clothing + + + + Cotton Kurta + + + Floral embroidered notch neck thread work cotton kurta in white and + black. + + + + + + + +); +} +`, +transformCode: (code) => { +return transformedCode(code, 'function', 'App'); +}, +scope: { +Card, +Box, +VStack, +Button, +ButtonText, +Text, +Image, +Heading, +Wrapper, +}, +}} +/> + + + +### Blog Card + +This is an example of a Card component with a blog post. + + + + + May 15, 2023 + + + + The Power of Positive Thinking + + + Discover how the power of positive thinking can transform your life, + boost your confidence, and help you overcome challenges. Explore + practical tips and techniques to cultivate a positive mindset for + greater happiness and success. + + + + + RR + + + + + John Smith + + + Motivational Speaker + + + + +); +} +`, +transformCode: (code) => { +return transformedCode(code, 'function', 'App'); +}, +scope: { +Card, +Box, +Avatar, +AvatarFallbackText, +AvatarImage, +VStack, +Button, +ButtonText, +Text, +Image, +Heading, +Wrapper, +}, +}} +/> + + \ No newline at end of file From 27c0afaf916bf821bfb8c3cc8f01008f56c2ac80 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Choudhury Date: Thu, 7 Mar 2024 17:01:54 +0530 Subject: [PATCH 30/45] Update index.nw.stories.mdx --- .../src/getting-started/Installation/index.nw.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx index 3772a1924a..dd7b4d7e47 100644 --- a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx @@ -246,7 +246,7 @@ Create a `components/ui` folder inside `src` folder and add path in `tsconfig.js ### Step 5: Configure GluestackUIProvider -To add config, create a `GluestackUIProvider/config.ts` file in your `components/` folder and paste the following code. +To add config, create a `gluestack-ui-provider/config.ts` file in your `components/` folder and paste the following code. @@ -256,7 +256,7 @@ To add config, create a `GluestackUIProvider/config.ts` file in your `components -To add `GluestackUIProvider`, create a `GluestackUIProvider/index.tsx` file inside `components/` folder and paste the following code. +To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file inside `components/` folder and paste the following code. From d3ce823b34fe51b63f398d2d46d2c5da17ba113d Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Choudhury Date: Thu, 7 Mar 2024 17:02:27 +0530 Subject: [PATCH 31/45] Update index.themed.stories.mdx --- .../src/getting-started/Installation/index.themed.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx index 918d372e6f..d807479871 100644 --- a/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx @@ -58,7 +58,7 @@ Create a `components/` folder inside `src` folder and add path in `tsconfig.json ### Step 3: Configure GluestackUIProvider -To add config, create a `GluestackUIProvider/config.ts` file in your `components/` folder and paste the following code. +To add config, create a `gluestack-ui-provider/config.ts` file in your `components/` folder and paste the following code. @@ -68,7 +68,7 @@ To add config, create a `GluestackUIProvider/config.ts` file in your `components -To add `GluestackUIProvider`, create a `GluestackUIProvider/index.tsx` file inside `components/` folder and paste the following code. +To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file inside `components/` folder and paste the following code. From c246af5f5a29e611a11d9063d66b788bf75e0088 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 8 Mar 2024 12:46:02 +0530 Subject: [PATCH 32/45] feat: added switch component with examples natiivewind --- .../src/components/Switch/Switch.stories.tsx | 5 + .../src/components/Switch/Switch.tsx | 15 +- .../components/Switch/index.nw.stories.mdx | 145 ++++++++++---- .../nativewind/switch/index.tsx | 179 ++++-------------- 4 files changed, 169 insertions(+), 175 deletions(-) diff --git a/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx b/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx index 2ad9dbcebb..4bb1c74b83 100644 --- a/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx +++ b/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx @@ -26,12 +26,17 @@ const SwitchMeta: ComponentMeta = { control: 'boolean', options: [true, false], }, + defaultValue: { + control: 'boolean', + options: [true, false], + }, }, args: { size: 'md', isDisabled: false, isEnabled: false, isInvalid: false, + defaultValue: false, }, }; diff --git a/example/storybook-nativewind/src/components/Switch/Switch.tsx b/example/storybook-nativewind/src/components/Switch/Switch.tsx index 887e642676..ed5b01cb40 100644 --- a/example/storybook-nativewind/src/components/Switch/Switch.tsx +++ b/example/storybook-nativewind/src/components/Switch/Switch.tsx @@ -1,9 +1,18 @@ import React from 'react'; -import { VStack, Text, HStack } from '@gluestack-ui/themed'; import { Switch } from '@/components/ui/switch'; +import colors from 'tailwindcss/colors'; const SwitchBasic = ({ ...props }: any) => { - return ; + return ( + + ); }; SwitchBasic.description = @@ -11,4 +20,4 @@ SwitchBasic.description = export default SwitchBasic; -export { Switch, VStack, Text, HStack }; +export { Switch }; diff --git a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx index b8921c98df..9d005bac23 100644 --- a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx @@ -16,9 +16,8 @@ import { Meta } from '@storybook/addon-docs'; -import { Switch } from '../../core-components/nativewind'; -import { VStack, Text } from '../../core-components/nativewind'; -import { HStack } from '../../core-components/nativewind'; +import colors from 'tailwindcss/colors'; +import { HStack, Switch, VStack, Text } from '../../core-components/nativewind'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -39,12 +38,15 @@ This is an illustration of **Switch** component. showArgsController={true} metaData={{ code: ` - + `, transformCode: (code) => { return transformedCode(code); }, - scope: { Wrapper, Switch }, + scope: { Wrapper, Switch, colors }, argsType: { size: { control: 'select', @@ -258,43 +260,116 @@ We have outlined the various features that ensure the Button component is access Switch component is created using Switch component from react-native. It extends all the props supported by [React Native Switch](https://reactnative.dev/docs/switch#props). - +> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available. - + + + + Public profile + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Switch, + Text, + HStack, + colors, + }, + argsType: {}, + }} + /> + \ No newline at end of file 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 91e306d3ae..0b53ea8ec5 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx @@ -1,146 +1,51 @@ -import { styled } from '@gluestack-style/react'; -import { Switch as RNSwitch } from 'react-native'; +import React from 'react'; +import { Switch as RNSwitch, Platform } from 'react-native'; import { createSwitch } from '@gluestack-ui/switch'; +import { + tva, + withStyleContextAndStates, + withStyleContext, + cssInterop, + VariantProps, +} from '@gluestack-ui/nativewind-utils'; + +const UISwitch = createSwitch({ + Root: + Platform.OS === 'web' + ? withStyleContext(RNSwitch) + : withStyleContextAndStates(RNSwitch), +}); -const StyledRoot = styled( - RNSwitch, - { - 'props': { - // todo: add support for this in style.gluestack.io - // trackColor: { false: '$background300', true: '$primary600' }, - - // hacky fix for the above - //@ts-ignore - trackColor: { false: '$background300', true: '$primary600' }, - thumbColor: '$background0', - //@ts-ignore - activeThumbColor: '$background0', - - // for ios specifically in unchecked state - ios_backgroundColor: '$background300', - }, - - 'borderRadius': '$full', - - 'variants': { - //@ts-ignore - - size: { - sm: { - transform: [ - { - scale: 0.75, - }, - ], - }, - md: {}, - lg: { - transform: [ - { - scale: 1.25, - }, - ], - }, - }, - }, - - '_web': { - ':focus': { - outlineWidth: 0, - outlineColor: '$primary700', - outlineStyle: 'solid', - }, - }, - - 'defaultProps': { - size: 'md', - }, - - ':disabled': { - '_web': { - 'cursor': 'pointer', - ':disabled': { - cursor: 'not-allowed', - }, - }, - 'opacity': 0.4, - //@ts-ignore - 'trackColor': { false: '$background300', true: '$primary600' }, - // for ios specifically in unchecked state - 'ios_backgroundColor': '$background300', - ':hover': { - props: { - //@ts-ignore - trackColor: { false: '$background300', true: '$primary600' }, - }, - }, - }, - - ':invalid': { - borderColor: '$error700', - borderRadius: 12, - borderWidth: 2, - }, - - ':hover': { - 'props': { - // todo: add support for this in style.gluestack.io - // trackColor: { false: '$background400', true: '$primary700' }, - - // hacky fix for the above - //@ts-ignore - - trackColor: { false: '$background400', true: '$primary700' }, - ios_backgroundColor: '$background400', - }, - ':invalid': { - props: { - // todo: add support for this in style.gluestack.io - // trackColor: { false: '$background400', true: '$primary700' }, +cssInterop(UISwitch, { className: 'style' }); - // hacky fix for the above - //@ts-ignore +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', - trackColor: { false: '$background300', true: '$primary700' }, - }, - }, - }, - - ':checked': { - props: { - //@ts-ignore - thumbColor: '$background0', - }, + variants: { + size: { + sm: 'scale-75', + md: '', + lg: 'scale-125', }, }, - { - componentName: 'Switch', - resolveProps: [ - 'thumbColor', - 'trackColor', - 'activeThumbColor', - 'ios_backgroundColor', - ], - } as const, - { - propertyTokenMap: { - trackColor: 'colors', - thumbColor: 'colors', - activeThumbColor: 'colors', - ios_backgroundColor: 'colors', - }, - propertyResolver: { - trackColor: (rawValue: any, resolver: any) => { - const resolveColor = { - true: resolver(rawValue.true), - false: resolver(rawValue.false), - }; - return resolveColor; - }, - }, +}); + +type ISwitchProps = React.ComponentProps & + VariantProps; +const Switch = React.forwardRef( + ( + { className, size = 'md', ...props }: { className?: string } & ISwitchProps, + ref + ) => { + return ( + + ); } ); -export const Switch = createSwitch({ - Root: StyledRoot, -}); +Switch.displayName = 'Switch'; +export { Switch }; From 8236214ce991959abb6c17abcc1a7fd8bd8a0189 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 8 Mar 2024 13:30:30 +0530 Subject: [PATCH 33/45] fix: remove spec docs --- .../src/components/Icon/index.nw.stories.mdx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx index e7c84cea59..2ef4368f26 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -183,7 +183,7 @@ Role: img is passed ### Props -Icon component is created using AsForwarder component from @gluestack-style/react. It extends all the props supported by [gluestack-ui AsForwarder](https://gluestack.io/style/docs/api/as-forwarder), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. +Icon component is created using AsForwarder component from @gluestack-style/react. It extends all the props supported by [gluestack-ui AsForwarder](https://gluestack.io/style/docs/api/as-forwarder) and the props mentioned below. #### Image @@ -222,20 +222,6 @@ Icon component is created using AsForwarder component from @gluestack-style/reac -## Spec Doc - -Explore the comprehensive details of the Icon in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. - -