From 8669107ae1f44199430a34a528784c0dfb73dc0c Mon Sep 17 00:00:00 2001 From: Viraj Joshi <66306233+Viraj-10@users.noreply.github.com> Date: Wed, 13 Mar 2024 09:07:25 +0530 Subject: [PATCH] Revert "feat/toast-nativewind-examples" --- .../src/components/Toast/index.nw.stories.mdx | 789 +----------------- .../nativewind/toast/index.tsx | 4 +- 2 files changed, 8 insertions(+), 785 deletions(-) diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx index de187fb01a..d990dcb28f 100644 --- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx @@ -1,5 +1,5 @@ --- -title: gluestack-ui Toast Component | Installation, Usage, and API +title: Toast | gluestack-ui | Installation, Usage, and API description: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions. @@ -7,792 +7,15 @@ pageTitle: Toast pageDescription: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions. -showHeader: true +showHeader: false + +tag: coming soon --- import { Meta } from '@storybook/addon-docs'; -import { - Toast, - ToastTitle, - ToastDescription, - useToast, - Button, - ButtonText, - CheckIcon, - MessageCircleIcon, - Icon, - CloseIcon, - VStack, - Pressable, - Center, -} from '../../core-components/nativewind'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, - CollapsibleCode, -} from '@gluestack/design-system'; -import { View } from 'react-native'; -import Wrapper from '../../core-components/nativewind/Wrapper'; -import {AlertTriangle} from 'lucide-react-native' - -This is an illustration of **Toast** component. - -<> - { - toast.show({ - placement:"top", - 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! - - - - ); - }, - }); - }} - > - Press Me - - ); - }; - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'Example'); - }, - scope: { - Wrapper, - Toast, - ToastTitle, - ToastDescription, - useToast, - Text, - Button, - ButtonText, - VStack, - }, - argsType: { - action: { - control: 'select', - options: ['success', 'info', 'error', 'warning', 'attention'], - default: 'attention', - }, - variant: { - control: 'select', - options: ['accent', 'solid', 'outline'], - default: 'solid', - }, - }, - }} - /> - - -
- -## Installation - -### Step 1: Install the following dependencies: - -```bash - -npm i @gluestack-ui/toast - -``` - -### Step 2: Copy and paste the following code into your project. - - - -```jsx -%%-- File: core-components/nativewind/toast/index.tsx --%% -``` - - - -### Step 3: Update the import paths to match your project setup. - -## API Reference - -To use this component in your project, include the following import statement in your file. - -```jsx -import { useToast, Toast } from '@/components/ui/toast'; -``` - -```jsx -export default () => ( - - - - -); -``` -### Component Props - -This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. - -#### Toast - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - duration - - - - number or null - - - 5000 - - - {`The delay before the toast hides (in milliseconds). If set to null, toast will never dismiss.`} - - - - - - onCloseComplete - - - - {`()=>{}`} - - - - - - - {`Callback function to run side effects after the toast has closed.`} - - - - - - placement - - - - - 'top'| 'top right' | 'top left' | 'bottom' | 'bottom left' | - 'bottom right' - - - - bottom - - - Position of toast on the web page. - - - - - - render?: (props: any) - - - - ReactNode - - - - - - - Renders a toast component - - - - - - avoidKeyboard - - - - bool - - - false - - - {`If true and the keyboard is opened, the Toast will move up equivalent to the keyboard height.`} - - - - - - containerStyle - - - - ViewStyle - - - - - - - Container style object for the toast. - - - -
- - - -#### ToastTitle - -Contains all Text related layout style props and actions. -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -#### ToastDescription - -Contains all Text related layout style props and actions. -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -### Accessibility - -We have outlined the various features that ensure the Toast component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/). - -#### Keyboard - -- `Tab + Enter`: Triggers the toast's action. - -#### Screen Reader - -- VoiceOver: When the toast is focused, the screen reader will announce the toast's title. - -### Props - -Toast 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. - -#### Toast - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - action - - - - - error | warning | success | info | attention - - - - attention - - - - - - variant - - - - solid | outline | accent - - - solid - - - -
- - - -### 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)} className="mt-1"> - - - - ); - }, - }); - }} - > - 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)} className="mt-1"> - - - - ); - }, - }); - }} - > - Press Me - - ); - }; - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'Example'); - }, - scope: { - View, - Wrapper, - Toast, - ToastTitle, - ToastDescription, - useToast, - Text, - Button, - ButtonText, - Pressable, - Icon, - CloseIcon, - VStack, - MessageCircleIcon, - }, - 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 - - { - 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)} className="mt-1"> - - - - ); - }, - }); - }} - > - Press Me - - ); - }; - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'Example'); - }, - scope: { - View, - Wrapper, - Toast, - ToastTitle, - ToastDescription, - useToast, - Text, - Icon, - CloseIcon, - Pressable, - VStack, - AlertTriangle, - Button, - ButtonText, - }, - argsType: {}, - }} - /> - +Coming Soon! \ No newline at end of file diff --git a/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx index 38b59c7844..32c2d001c4 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx @@ -55,7 +55,7 @@ const toastStyle = tva( // color: '$info500', // }, // }, - attention: 'bg-background-muted border-secondary-300', + attention: 'bg-background-muted border-secondary-30', // bg: '$backgroundMuted', // borderColor: '$secondary300', @@ -67,7 +67,7 @@ const toastStyle = tva( variant: { solid: '', - outline: 'border bg-white', + outline: 'border-1 bg-white border-red-400', accent: 'border-l-4', }, },