From d09245b58eb4be50049de0a6192fd955d48536c8 Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Thu, 22 Feb 2024 15:45:02 +0530 Subject: [PATCH 1/6] 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 288108116b88b767ba0c21b521169455bf64d79e Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 6 Mar 2024 12:51:15 +0530 Subject: [PATCH 2/6] fix: web utility props --- packages/styled/react/src/types.ts | 111 ++++++++++++++++++++++------- 1 file changed, 87 insertions(+), 24 deletions(-) diff --git a/packages/styled/react/src/types.ts b/packages/styled/react/src/types.ts index b7714b179a..1dca91aa93 100644 --- a/packages/styled/react/src/types.ts +++ b/packages/styled/react/src/types.ts @@ -927,23 +927,51 @@ export type UtilityProps< Extract, string> >]?: LastPart extends keyof PropertyTokenType ? PropertyTokenType[LastPart] extends 'sizes' - ? - | WithSizeNegativeValue - | ExtendRNStyle, LastPart> + ? key extends `$web-${string}` + ? WithSizeNegativeValue | (string & {}) + : + | WithSizeNegativeValue + | ExtendRNStyle> : PropertyTokenType[LastPart] extends 'space' - ? - | WithNegativeValue< - StringifyToken< - keyof GSConfig['tokens'][PropertyTokenType[LastPart]] + ? key extends `$web-${string}` + ? + | WithNegativeValue< + StringifyToken< + //@ts-ignore + keyof GSConfig['tokens'][PropertyTokenType[LastPart]] + > + > + | (string & {}) + : + | WithNegativeValue< + StringifyToken< + keyof GSConfig['tokens'][PropertyTokenType[LastPart]] + > + > + | ExtendRNStyle< + GetRNStyles, + LastPart > - > - | ExtendRNStyle, LastPart> : PropertyTokenType[LastPart] extends keyof GSConfig['tokens'] - ? - | StringifyToken< - keyof GSConfig['tokens'][PropertyTokenType[LastPart]] - > - | ExtendRNStyle, LastPart> + ? key extends `$web-${string}` + ? + | (string & {}) + | StringifyToken< + //@ts-ignore + keyof GSConfig['tokens'][PropertyTokenType[LastPart]] + > + | ExtendRNStyle< + GetRNStyles, + LastPart + > + : + | StringifyToken< + keyof GSConfig['tokens'][PropertyTokenType[LastPart]] + > + | ExtendRNStyle< + GetRNStyles, + LastPart + > : LastPart extends keyof GetRNStyles ? GetRNStyles[LastPart] : never @@ -957,21 +985,56 @@ export type UtilityProps< >]?: LastPart extends keyof Aliases ? Aliases[LastPart] extends keyof GetRNStyles ? PropertyTokenType[Aliases[LastPart]] extends 'sizes' - ? - | WithSizeNegativeValue - | ExtendRNStyle< - GetRNStyles, - Aliases[LastPart] - > + ? key extends `$web-${string}` + ? + | (string & {}) + | WithSizeNegativeValue + | ExtendRNStyle< + GetRNStyles, + //@ts-ignore + Aliases[LastPart] + > + : + | WithSizeNegativeValue + | ExtendRNStyle< + GetRNStyles, + Aliases[LastPart] + > : PropertyTokenType[Aliases[LastPart]] extends 'space' - ? - | WithNegativeValue< - StringifyToken< - keyof GSConfig['tokens'][PropertyTokenType[Aliases[LastPart]]] + ? key extends `$web-${string}` + ? + | (string & {}) + | WithNegativeValue< + StringifyToken< + //@ts-ignore + keyof GSConfig['tokens'][PropertyTokenType[Aliases[LastPart]]] + > + > + | ExtendRNStyle< + GetRNStyles, + //@ts-ignore + Aliases[LastPart] > + : + | WithNegativeValue< + StringifyToken< + keyof GSConfig['tokens'][PropertyTokenType[Aliases[LastPart]]] + > + > + | ExtendRNStyle< + GetRNStyles, + Aliases[LastPart] + > + : key extends `$web-${string}` + ? + | (string & {}) + | StringifyToken< + //@ts-ignore + keyof GSConfig['tokens'][PropertyTokenType[Aliases[LastPart]]] > | ExtendRNStyle< GetRNStyles, + //@ts-ignore Aliases[LastPart] > : From 9d2d3100a464e011256df8f98259ce7165f58072 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 6 Mar 2024 12:58:32 +0530 Subject: [PATCH 3/6] v1.0.49 --- example/storybook-nativewind/package.json | 2 +- packages/config/package.json | 4 ++-- packages/styled/react/CHANGELOG.md | 6 ++++++ packages/styled/react/package.json | 2 +- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json index 490f62e9f0..2f221e9f00 100644 --- a/example/storybook-nativewind/package.json +++ b/example/storybook-nativewind/package.json @@ -27,7 +27,7 @@ "@expo/html-elements": "^0.4.2", "@expo/webpack-config": "^0.17.2", "@geometricpanda/storybook-addon-iframe": "^0.2.2", - "@gluestack-style/react": "^1.0.26", + "@gluestack-style/react": "^1.0.49", "@gluestack-ui/config": "^1.1.10", "@gluestack-ui/themed": "^1.1.8", "@gluestack/design-system": "^0.5.27", diff --git a/packages/config/package.json b/packages/config/package.json index 71f828b249..fa7a8f7399 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -37,7 +37,7 @@ "@expo/html-elements": "latest", "@gluestack-style/animation-resolver": "1.0.4", "@gluestack-style/legend-motion-animation-driver": "1.0.3", - "@gluestack-style/react": "1.0.48", + "@gluestack-style/react": "1.0.49", "@gluestack-ui/accordion": "1.0.1", "@gluestack-ui/actionsheet": "0.2.37", "@gluestack-ui/alert": "0.1.12", @@ -72,7 +72,7 @@ "@legendapp/motion": "latest" }, "peerDependencies": { - "@gluestack-style/react": ">=1.0", + "@gluestack-style/react": ">=1.0.49", "@gluestack-ui/themed": ">=1.1" }, "release-it": { diff --git a/packages/styled/react/CHANGELOG.md b/packages/styled/react/CHANGELOG.md index 23bc3f3d21..cde5fa49b0 100644 --- a/packages/styled/react/CHANGELOG.md +++ b/packages/styled/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-style/react +## 1.0.49 + +### Patch Changes + +- Fixed utility props typings + ## 1.0.48 ### Patch Changes diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json index e5e483ae5b..d584d09219 100644 --- a/packages/styled/react/package.json +++ b/packages/styled/react/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-style/react", "description": "A universal & performant styling library for React Native, Next.js & React", - "version": "1.0.48", + "version": "1.0.49", "keywords": [ "React Native", "Next.js", From 6b2be83d2afc5ec37481606e6df1a9e8b3065b6a Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Wed, 6 Mar 2024 13:16:48 +0530 Subject: [PATCH 4/6] 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 27c0afaf916bf821bfb8c3cc8f01008f56c2ac80 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Choudhury Date: Thu, 7 Mar 2024 17:01:54 +0530 Subject: [PATCH 5/6] 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 6/6] 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.