diff --git a/example/storybook-nativewind/src/components/Select/SelectScrollView.tsx b/example/storybook-nativewind/src/components/Select/SelectScrollView.tsx index de84f1d04b..c2991f5d8d 100644 --- a/example/storybook-nativewind/src/components/Select/SelectScrollView.tsx +++ b/example/storybook-nativewind/src/components/Select/SelectScrollView.tsx @@ -53,7 +53,7 @@ const SelectWithScrollView = ({ isDisabled, isInvalid, ...props }: any) => { ); }; -SelectWithScrollView.displayName = +SelectWithScrollView.description = 'SelectWithScrollView is an example of how to use Select with list that uses ScrollView on native'; export default SelectWithScrollView; diff --git a/example/storybook-nativewind/src/components/Select/SelectSectionList.tsx b/example/storybook-nativewind/src/components/Select/SelectSectionList.tsx index 7aca6bb3a7..1b4b1217c3 100644 --- a/example/storybook-nativewind/src/components/Select/SelectSectionList.tsx +++ b/example/storybook-nativewind/src/components/Select/SelectSectionList.tsx @@ -72,7 +72,7 @@ const SelectWithSectionList = ({ isDisabled, isInvalid, ...props }: any) => { ); }; -SelectWithSectionList.displayName = +SelectWithSectionList.description = 'SelectWithSectionList is an example of how to use Select with list that uses SectionList on native'; export default SelectWithSectionList; diff --git a/example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx b/example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx index 9dd64f09fb..ff3d539cab 100644 --- a/example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx +++ b/example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx @@ -70,7 +70,7 @@ const SelectWithVirtualizedList = ({ ); }; -SelectWithVirtualizedList.displayName = +SelectWithVirtualizedList.description = 'SelectWithVirtualizedList is an example of how to use Select with list that uses VirtualizedList on native'; export default SelectWithVirtualizedList; diff --git a/example/storybook-v7/.ondevice/main.ts b/example/storybook-v7/.ondevice/main.ts index 4605f453c6..4677195a04 100644 --- a/example/storybook-v7/.ondevice/main.ts +++ b/example/storybook-v7/.ondevice/main.ts @@ -1,7 +1,9 @@ import { StorybookConfig } from '@storybook/react-native'; const main: StorybookConfig = { - stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'], + stories: [ + '../../storybook-nativewind/src/components/**/*.stories.?(ts|tsx|js|jsx)', + ], addons: [ '@storybook/addon-ondevice-notes', '@storybook/addon-ondevice-controls', diff --git a/example/storybook-v7/.ondevice/preview.tsx b/example/storybook-v7/.ondevice/preview.tsx index d26420a992..dde43541e2 100644 --- a/example/storybook-v7/.ondevice/preview.tsx +++ b/example/storybook-v7/.ondevice/preview.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; // import { addParameters } from '@storybook/client-api'; -import { GluestackUIProvider } from '../src/core-components/nativewind'; +import { GluestackUIProvider } from '../../storybook-nativewind/src/core-components/nativewind'; import { View } from 'react-native'; import { useState } from 'react'; import type { Preview } from '@storybook/react'; -import { useDarkMode } from '../src/components/hooks/useDarkMode'; +import { useDarkMode } from '../../storybook-nativewind/src/components/hooks/useDarkMode'; import { Platform } from 'react-native'; const preview: Preview = { diff --git a/example/storybook-v7/.ondevice/storybook.requires.js b/example/storybook-v7/.ondevice/storybook.requires.js index e26cefad97..938500df59 100644 --- a/example/storybook-v7/.ondevice/storybook.requires.js +++ b/example/storybook-v7/.ondevice/storybook.requires.js @@ -14,13 +14,13 @@ import "@storybook/addon-ondevice-actions/register"; const normalizedStories = [ { titlePrefix: "", - directory: "./src/components", + directory: "../storybook-nativewind/src/components", files: "**/*.stories.?(ts|tsx|js|jsx)", importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, req: require.context( - "../src/components", + "../../storybook-nativewind/src/components", true, /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/ ), diff --git a/example/storybook-v7/App.tsx b/example/storybook-v7/App.tsx index 366c3edfd8..ecaf8f2c7c 100644 --- a/example/storybook-v7/App.tsx +++ b/example/storybook-v7/App.tsx @@ -1,17 +1,14 @@ import { StyleSheet, Text, View } from 'react-native'; import Constants from 'expo-constants'; -import { GluestackUIProvider } from './src/core-components/nativewind/gluestack-ui-provider'; import './global.css'; function App() { return ( - - - - Open up App.tsx to start working on your app! 22 - + + + Open up App.tsx to start working on your app! 22 - + ); } diff --git a/example/storybook-v7/babel.config.js b/example/storybook-v7/babel.config.js index eb794f2925..11c8afb87a 100644 --- a/example/storybook-v7/babel.config.js +++ b/example/storybook-v7/babel.config.js @@ -15,13 +15,25 @@ module.exports = function (api) { alias: { '@/components/ui': process.env.STYLE_ENGINE === 'gluestack' - ? path.resolve(__dirname, './src/core-components/themed') - : path.resolve(__dirname, './src/core-components/nativewind'), + ? path.resolve( + __dirname, + './../storybook-nativewind/src/core-components/themed' + ) + : path.resolve( + __dirname, + './../storybook-nativewind/src/core-components/nativewind' + ), 'global.css': process.env.STYLE_ENGINE === 'gluestack' - ? path.resolve(__dirname, './global-gluestack.css') - : path.resolve(__dirname, './global.css'), + ? path.resolve( + __dirname, + './../storybook-nativewind/global-gluestack.css' + ) + : path.resolve( + __dirname, + './../storybook-nativewind/global.css' + ), '@gluestack-ui/checkbox': path.resolve( __dirname, @@ -110,7 +122,7 @@ module.exports = function (api) { ), '@/extra-components/nativewind': path.resolve( __dirname, - './src/core-components/nativewind' + './../storybook-nativewind/src/core-components/nativewind' ), 'tailwind.config': path.join(__dirname, './tailwind.config.js'), }, diff --git a/example/storybook-v7/metro.config.js b/example/storybook-v7/metro.config.js index e11704eeb5..5729be8b67 100644 --- a/example/storybook-v7/metro.config.js +++ b/example/storybook-v7/metro.config.js @@ -18,6 +18,7 @@ defaultConfig.watchFolders = [ path.join(workspaceRoot, 'packages', 'unstyled'), path.join(workspaceRoot, 'packages', 'nativewind'), path.join(workspaceRoot, 'packages', 'styled'), + path.join(projectRoot, '..', 'storybook-nativewind'), ]; // defaultConfig.resolver.disableHierarchicalLookup = true; defaultConfig.resolver.nodeModulesPaths = [ @@ -25,6 +26,7 @@ defaultConfig.resolver.nodeModulesPaths = [ // path.resolve(workspaceRoot, 'node_modules'), ]; +defaultConfig.projectRoot = path.resolve(__dirname, '../storybook-nativewind'); // path to the external module // defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => { // const defaultResolveResult = context.resolveRequest( // context, diff --git a/example/storybook-v7/src/components/Accordion/Accordion.stories.tsx b/example/storybook-v7/src/components/Accordion/Accordion.stories.tsx deleted file mode 100644 index c6718a5b0f..0000000000 --- a/example/storybook-v7/src/components/Accordion/Accordion.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Accordion from './Accordion'; -// import AccordionCustomisedBackground from './AccordionCustomisedBackground'; -// import AccordionRoundedCorners from './AccordionRoundedCorner'; -// import AccordionCustomisedComponent from './AccordionCustomisedComponent'; -// import AccordionNested from './AccordionNested'; - -const AccordionMeta: ComponentMeta = { - title: 'stories/Accordion', - component: Accordion, - // metaInfo is required for figma generation - // @ts-ignore - metaInfo: { - componentDescription: `The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.`, - }, - argTypes: { - size: { - control: 'select', - options: ['sm', 'md', 'lg'], - }, - variant: { - control: 'select', - options: ['filled', 'unfilled'], - }, - type: { - control: 'select', - options: ['single', 'multiple'], - }, - isDisabled: { - control: 'boolean', - options: [true, false], - }, - }, -}; - -export default AccordionMeta; - -export { - Accordion, - // AccordionCustomisedBackground, - // AccordionRoundedCorners, - // AccordionCustomisedComponent, - // AccordionNested, -}; diff --git a/example/storybook-v7/src/components/Accordion/Accordion.tsx b/example/storybook-v7/src/components/Accordion/Accordion.tsx deleted file mode 100644 index a22452fb6f..0000000000 --- a/example/storybook-v7/src/components/Accordion/Accordion.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import React from 'react'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, -} from '@/components/ui/accordion'; -import { - ChevronDownIcon, - ChevronUpIcon, - MinusIcon, - PlusIcon, -} from 'lucide-react-native'; - -const AccordionBasic = ({ ...props }: any) => { - const accRef = React.useRef(null); - - return ( - - - - - {(states: any) => ( - <> - - How do I place an order? - - {states.isExpanded ? ( - - ) : ( - - )} - - )} - - - - - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, sed - laudantium eligendi maxime rerum, saepe vitae unde voluptas hic, - culpa ex dolorem omnis incidunt quisquam? Ex fuga debitis recusandae - incidunt. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis - maxime modi quaerat temporibus quos, omnis, vel ullam debitis labore - error fugit, blanditiis dolore illum consequuntur laboriosam. - Voluptates est obcaecati nemo! - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - Can I cancel my subscription at any time? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolorem - eos ex officia ratione omnis similique delectus aliquam culpa. Minus - quis numquam laboriosam non natus, distinctio facilis aspernatur - beatae earum. - - - - - ); -}; - -AccordionBasic.description = - 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.'; - -export default AccordionBasic; - -export { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - // Divider, - ChevronDownIcon, - ChevronUpIcon, - PlusIcon, - MinusIcon, -}; diff --git a/example/storybook-v7/src/components/Accordion/AccordionCustomisedBackground.tsx b/example/storybook-v7/src/components/Accordion/AccordionCustomisedBackground.tsx deleted file mode 100644 index 7788715ebb..0000000000 --- a/example/storybook-v7/src/components/Accordion/AccordionCustomisedBackground.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { - Accordion, - AccordionHeader, - AccordionItem, - AccordionTrigger, - AccordionContent, - AccordionContentText, - AccordionTitleText, - AccordionIcon, -} from '@gluestack-ui/themed'; -import { MinusIcon, PlusIcon } from 'lucide-react-native'; -import React from 'react'; - -const AccordionCustomisedBackground = ({ ...props }: any) => { - return ( - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - {isExpanded ? ( - - ) : ( - - )} - - How do I place an order? - - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - {isExpanded ? ( - - ) : ( - - )} - - How do I place an order? - - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - ); -}; - -AccordionCustomisedBackground.description = - 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.'; - -export default AccordionCustomisedBackground; diff --git a/example/storybook-v7/src/components/Accordion/AccordionCustomisedComponent.tsx b/example/storybook-v7/src/components/Accordion/AccordionCustomisedComponent.tsx deleted file mode 100644 index f5d7ba6ae1..0000000000 --- a/example/storybook-v7/src/components/Accordion/AccordionCustomisedComponent.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import { - Accordion, - AccordionHeader, - AccordionItem, - AccordionTrigger, - AccordionContent, - AccordionContentText, - AccordionTitleText, - AccordionIcon, -} from '@gluestack-ui/themed'; -import { ChevronDownIcon } from 'lucide-react-native'; -import { ChevronUpIcon } from 'lucide-react-native'; -import React from 'react'; - -const AccordionCustomisedComponent = ({ ...props }: any) => { - return ( - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, sed - laudantium eligendi maxime rerum, saepe vitae unde voluptas hic, - culpa ex dolorem omnis incidunt quisquam? Ex fuga debitis recusandae - incidunt. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis - maxime modi quaerat temporibus quos, omnis, vel ullam debitis labore - error fugit, blanditiis dolore illum consequuntur laboriosam. - Voluptates est obcaecati nemo! - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - - ); -}; - -AccordionCustomisedComponent.description = - 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.'; - -export default AccordionCustomisedComponent; diff --git a/example/storybook-v7/src/components/Accordion/AccordionNested.tsx b/example/storybook-v7/src/components/Accordion/AccordionNested.tsx deleted file mode 100644 index 1ff5d3c33f..0000000000 --- a/example/storybook-v7/src/components/Accordion/AccordionNested.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, -} from '@gluestack-ui/themed'; -import { MinusIcon, PlusIcon } from 'lucide-react-native'; -import React from 'react'; - -const AccordionNested = () => { - return ( - - - - - {(states: any) => ( - <> - {states.isExpanded ? ( - - ) : ( - - )} - USA - - )} - - - - - - - - {(states: any) => ( - <> - {states.isExpanded ? ( - - ) : ( - - )} - - California - - - )} - - - - - Capital city of California is Sacramento. California has a GDP - of 2.89 trillion dollars and follows Pacific Standard Time - zone. - - - - - - - - - {(states: any) => ( - <> - {states.isExpanded ? ( - - ) : ( - - )} - Nevada - - )} - - - - - Nevada is located in a mountainous region that includes vast - semiarid grasslands and sandy alkali deserts. It is the most - arid state of the country. - - - - - - - - ); -}; - -AccordionNested.description = - 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.'; - -export default AccordionNested; diff --git a/example/storybook-v7/src/components/Accordion/AccordionRoundedCorner.tsx b/example/storybook-v7/src/components/Accordion/AccordionRoundedCorner.tsx deleted file mode 100644 index 4caba87d96..0000000000 --- a/example/storybook-v7/src/components/Accordion/AccordionRoundedCorner.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { - Accordion, - AccordionHeader, - AccordionItem, - AccordionTrigger, - AccordionContent, - AccordionContentText, - AccordionTitleText, - AccordionIcon, -} from '@gluestack-ui/themed'; -import { MinusIcon, PlusIcon } from 'lucide-react-native'; -import React from 'react'; - -const AccordionRoundedCorners = ({ ...props }: any) => { - return ( - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - How do I place an order? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - How do I place an order? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - ); -}; - -AccordionRoundedCorners.description = - 'This is a basic Accordion component example. An Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.'; - -export default AccordionRoundedCorners; diff --git a/example/storybook-v7/src/components/Accordion/index.nw.stories.mdx b/example/storybook-v7/src/components/Accordion/index.nw.stories.mdx deleted file mode 100644 index 4f86a2a497..0000000000 --- a/example/storybook-v7/src/components/Accordion/index.nw.stories.mdx +++ /dev/null @@ -1,1199 +0,0 @@ ---- -title: Accordion | gluestack-ui | Installation, Usage, and API - -description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. - -pageTitle: Accordion - -pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - ChevronDownIcon, - ChevronUpIcon, -} from '../../core-components/nativewind'; -import { - PlusIcon, MinusIcon -} from 'lucide-react-native' -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - AddIcon, - InfoIcon, - Alert, - Tabs -} from '@gluestack/design-system'; -import { transformedCode } from '../../utils'; -import { CollapsibleCode } from '@gluestack/design-system'; -import Wrapper from '../../core-components/nativewind/Wrapper'; - - - -This is an illustration of **Accordion** component. - -<> - - - - - {({ isExpanded }) => { - return ( - <> - - How do I place an order? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - ChevronDownIcon, - ChevronUpIcon, - Wrapper, - }, - argsType: { - size: { - control: 'select', - options: ['sm', 'md', 'lg'], - default: 'md', - }, - variant: { - control: 'select', - options: ['filled', 'unfilled'], - default: 'filled', - }, - type: { - control: 'select', - options: ['single', 'multiple'], - default: 'single', - }, - isCollapsible: { - control: 'boolean', - default: true, - }, - isDisabled: { - control: 'boolean', - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add accordion - ``` - - - -<> - -### Step 1: Install the following dependencies: - -```bash -npm i @gluestack-ui/accordion @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. - - - -```jsx -%%-- File: core-components/nativewind/accordion/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 { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionContent, - AccordionContentText, - AccordionIcon, -} from '@/components/ui/accordion'; -``` - -```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. - -#### Accordion - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - type - - - - "single" | "multiple" - - - "single" - - - {`Determines whether one or multiple items can be opened at the same time.`} - - - - - - isCollapsible - - - - boolean - - - true - - - {`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`} - - - - - - defaultValue - - - - string[] - - - [] - - - {`The value of the item to expand when initially rendered when type is "single" or "multiple".`} - - - - - - value - - - - string[] - - - [] - - - {`The controlled value of the item to expand when type is "single" or "multiple".`} - - - - - - onValueChange - - - - function - - - - - - - {`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the accordion and all its items.`} - - - -
-
- - -#### AccordionItem - -Contains all the parts of a collapsible section. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - value - - - - string - - - - - - - {`The controlled value of the item to expand when type is "single" or "multiple". Must be used in conjunction with onValueChange.This is a mandatory prop.`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the accordion and all its items.`} - - - -
-
- - -#### AccordionHeader - -Wraps an `Accordion.Trigger`. It inherits all the properties of @expo/html-elements's [H3](https://www.npmjs.com/package/@expo/html-elements#h3) on web and It inherits all the properties of react native's [View](https://reactnative.dev/docs/view) on native. Use the as prop to update it to the appropriate heading level for your page. - - -#### AccordionTrigger - -Toggles the collapsed state of its associated item. It inherits all the properties of react native's [Pressable](https://reactnative.dev/docs/pressable). It should be nested inside of an `Accordion.Header`. - -#### AccordionTitleText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -#### AccordionIcon - -Contains all Icon related layout style props and actions.It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### AccordionContent - -Contains all the collapsible content for an item. It inherits all the properties of React Native [View](https://reactnative.dev/docs/view) component. - -#### AccordionContentText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -### Accessibility - -Adheres to the Accordion [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/). - - -We have outlined the various features that ensure the Accordion component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -- Header is h3 tag on web. -- aria-expanded is "true" when the Accordion Content is visible, otherwise false. -- role is set to "region" for the currently expanded accordion panel. -- aria-controls points to the id of the Accordion Content. -- aria-labelledby references the accordion header button that expands and collapses the region. - -### Keyboard Interactions - -- `Space` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. -- `Enter` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. -- `Tab` - Moves focus to the next focusable element. -- `Shift + Tab` - Moves focus to the previous focusable element. - -### Screen Reader - -- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed). - - -## 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. - -### Customized Component - -The following example demonstrates how easily you can customize the Accordion component to suit your needs. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What does the "type" prop of the Accordion component do? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - The type prop determines whether one or multiple items can be - opened at the same time. The default value is "single" which means - only one item can be opened at a time. - - - - - - - {({ isExpanded }) => { - return ( - <> - - Can I disable the whole accordion? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, you can disable the whole accordion by setting the isDisabled - prop to true on the Accordion component. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What is a controlled accordion? How can I make it controlled? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Controlled components refer to the components where the state and behaviors are controlled by the Parent component. You can make the accordion a controlled component by passing the value prop to the Accordion component and setting the onValueChange prop to update the value prop. Refer to the controlled accordion example in the docs. - - - - -); -} -`, -transformCode: (code) => { -return transformedCode(code, 'function', 'App'); -}, -scope: { -Accordion, -AccordionItem, -AccordionHeader, -AccordionTrigger, -AccordionTitleText, -AccordionIcon, -AccordionContent, -AccordionContentText, -ChevronDownIcon, -ChevronUpIcon, -Wrapper, -}, -}} -/> - - - -### Rounded corners - -The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components. - - - - - - - {({ isExpanded }) => { - return ( - <> - {isExpanded ? ( - - ) : ( - - )} - - How do I place an order? - - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }) => { - return ( - <> - {isExpanded ? ( - - ) : ( - - )} - - What payment methods do you accept? - - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - MinusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - -### Disabled item - -You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component. - - - - - - - {({ isExpanded }) => { - return ( - <> - - Disabled Item - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - This is a Disabled Item. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - Is this accordion accessible? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, the accordion is accessible. It adheres to the WAI-ARIA design - pattern. You can read more about it in the accessibility section of - the docs. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - MinusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - -### Default value - -Use the defaultValue prop to define the open item by default. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What is the defaultValue prop of the Accordion component? - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - The defaultValue prop of the Accordion component is used to define - the open item by default. It is used when the Accordion component is - uncontrolled. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - How many size variants does the Accordion component have? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - The Accordion component has three size variants - sm, md and lg. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - Can I nest my accordions? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, you can nest your accordions. Refer to the nested accordion example in the docs. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - MinusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - -### Nested Components - -You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region. - - - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - USA - - )} - - - - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - - California - - - )} - - - - - Capital city of California is Sacramento. California has a GDP - of 2.89 trillion dollars and follows Pacific Standard Time - zone. - - - - - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - Nevada - - )} - - - - - Nevada is located in a mountainous region that includes vast - semiarid grasslands and sandy alkali deserts. It is the most - arid state of the country. - - - - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - MinusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - -### Controlled Accordion - -A component is controlled when it's managed by its parent using props. -You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion. - - - setSelectedValues(item)} className="m-5 w-[95%]"> - - - - {({ isExpanded }) => { - return ( - <> - - Exploring Nature's Wonders - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - Embark on a journey through the breathtaking landscapes and diverse ecosystems of our planet. From majestic mountains to serene oceans, discover the beauty that nature has to offer. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - The Art of Culinary Delights - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking. - - - - - - - {({ isExpanded }) => { - return ( - <> - - Mastering the Creative Process - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - MinusIcon, - PlusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - - - - - - - - - - diff --git a/example/storybook-v7/src/components/Accordion/index.stories.mdx b/example/storybook-v7/src/components/Accordion/index.stories.mdx deleted file mode 100644 index e52f1eb2da..0000000000 --- a/example/storybook-v7/src/components/Accordion/index.stories.mdx +++ /dev/null @@ -1,1293 +0,0 @@ ---- -title: Accordion | gluestack-ui | Installation, Usage, and API - -description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. - -pageTitle: Accordion - -pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, -} from './Accordion'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - AddIcon, - InfoIcon, - Alert, -} from '@gluestack/design-system'; -import { - Divider, - ChevronDownIcon, - ChevronUpIcon, - PlusIcon, - MinusIcon, -} from '@gluestack-ui/themed'; -import { transformedCode } from '../../utils'; - - - -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Accordion** component. - -<> - - - - - {({ isExpanded }) => { - return ( - <> - - How do I place an order? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - ChevronDownIcon, - ChevronUpIcon, - Wrapper, - }, - argsType: { - size: { - control: 'select', - options: ['sm', 'md', 'lg'], - default: 'md', - }, - variant: { - control: 'select', - options: ['filled', 'unfilled'], - default: 'filled', - }, - type: { - control: 'select', - options: ['single', 'multiple'], - default: 'single', - }, - isCollapsible: { - control: 'boolean', - default: true, - }, - isDisabled: { - control: 'boolean', - }, - }, - }} - /> - - -
- -## API Reference - -### Import - -To use this component in your project, include the following import statement in your file. - -```bash -import { Accordion } from '@gluestack-ui/themed'; -``` - -### Anatomy - -The structure provided below can help you identify and understand Accordion component's various parts. - -```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. - -#### Accordion - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - type - - - - "single" | "multiple" - - - "single" - - - {`Determines whether one or multiple items can be opened at the same time.`} - - - - - - isCollapsible - - - - boolean - - - true - - - {`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`} - - - - - - defaultValue - - - - string[] - - - [] - - - {`The value of the item to expand when initially rendered when type is "single" or "multiple".`} - - - - - - value - - - - string[] - - - [] - - - {`The controlled value of the item to expand when type is "single" or "multiple".`} - - - - - - onValueChange - - - - function - - - - - - - {`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the accordion and all its items.`} - - - -
-
- - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _item - - - - {`Prop to style the AccordionItem Component`} - - - - - - - - _titleText - - - - {`Prop to style the AccordionTitleText Component`} - - - - - - - - _contentText - - - - {`Prop to style the AccordionContentText Component`} - - - - - - - - _icon - - - - {`Prop to style the AccordionIcon Component`} - - - -
-
- - -#### AccordionItem - -Contains all the parts of a collapsible section. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - value - - - - string - - - - - - - {`The controlled value of the item to expand when type is "single" or "multiple". Must be used in conjunction with onValueChange.This is a mandatory prop.`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the accordion and all its items.`} - - - -
-
- - -#### AccordionHeader - -Wraps an `Accordion.Trigger`. It inherits all the properties of @expo/html-elements's [H3](https://www.npmjs.com/package/@expo/html-elements#h3) on web and It inherits all the properties of react native's [View](https://reactnative.dev/docs/view) on native. Use the as prop to update it to the appropriate heading level for your page. - -#### AccordionTrigger - -Toggles the collapsed state of its associated item. It inherits all the properties of react native's [Pressable](https://reactnative.dev/docs/pressable). It should be nested inside of an `Accordion.Header`. - -#### AccordionTitleText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -#### AccordionIcon - -Contains all Icon related layout style props and actions.It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### AccordionContent - -Contains all the collapsible content for an item. It inherits all the properties of React Native [View](https://reactnative.dev/docs/view) component. - -#### AccordionContentText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -### Accessibility - -Adheres to the Accordion [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/). - -We have outlined the various features that ensure the Accordion component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -- Header is h3 tag on web. -- aria-expanded is "true" when the Accordion Content is visible, otherwise false. -- role is set to "region" for the currently expanded accordion panel. -- aria-controls points to the id of the Accordion Content. -- aria-labelledby references the accordion header button that expands and collapses the region. - -### Keyboard Interactions - -- `Space` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. -- `Enter` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. -- `Tab` - Moves focus to the next focusable element. -- `Shift + Tab` - Moves focus to the previous focusable element. - -### Screen Reader - -- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed). - -## Themed - -The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library). - -## 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. - -### Customized Component - -The following example demonstrates how easily you can customize the Accordion component to suit your needs. - -<> - - - - - {({ isExpanded }) => { - return ( - <> - - What does the "type" prop of the Accordion component do? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - The type prop determines whether one or multiple items can be - opened at the same time. The default value is "single" which means - only one item can be opened at a time. - - - - - - - {({ isExpanded }) => { - return ( - <> - - Can I disable the whole accordion? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, you can disable the whole accordion by setting the isDisabled - prop to true on the Accordion component. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What is a controlled accordion? How can I make it controlled? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Controlled components refer to the components where the state and behaviors are controlled by the Parent component. You can make the accordion a controlled component by passing the value prop to the Accordion component and setting the onValueChange prop to update the value prop. Refer to the controlled accordion example in the docs. - - - - -); -} -`, -transformCode: (code) => { -return transformedCode(code, 'function', 'App'); -}, -scope: { -Accordion, -AccordionItem, -AccordionHeader, -AccordionTrigger, -AccordionTitleText, -AccordionIcon, -AccordionContent, -AccordionContentText, -ChevronDownIcon, -ChevronUpIcon, -Wrapper, -}, -}} -/> - - - -### Rounded corners - -The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components. - -<> - - - - - {({ isExpanded }) => { - return ( - <> - {isExpanded ? ( - - ) : ( - - )} - - How do I place an order? - - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }) => { - return ( - <> - {isExpanded ? ( - - ) : ( - - )} - - What payment methods do you accept? - - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - -); -} -`, -transformCode: (code) => { -return transformedCode(code, 'function', 'App'); -}, -scope: { -Accordion, -AccordionItem, -AccordionHeader, -AccordionTrigger, -AccordionTitleText, -AccordionIcon, -AccordionContent, -AccordionContentText, -MinusIcon, -PlusIcon, -Wrapper, -}, -}} -/> - - - -### Disabled item - -You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component. - -<> - - - - - {({ isExpanded }) => { - return ( - <> - - Disabled Item - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - This is a Disabled Item. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - Is this accordion accessible? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, the accordion is accessible. It adheres to the WAI-ARIA design - pattern. You can read more about it in the accessibility section of - the docs. - - - - -); -} -`, -transformCode: (code) => { -return transformedCode(code, 'function', 'App'); -}, -scope: { -Accordion, -AccordionItem, -AccordionHeader, -AccordionTrigger, -AccordionTitleText, -AccordionIcon, -AccordionContent, -AccordionContentText, -Divider, -MinusIcon, -PlusIcon, -Wrapper, -}, -}} -/> - - - -### Default value - -Use the defaultValue prop to define the open item by default. - -<> - - - - - {({ isExpanded }) => { - return ( - <> - - What is the defaultValue prop of the Accordion component? - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - The defaultValue prop of the Accordion component is used to define - the open item by default. It is used when the Accordion component is - uncontrolled. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - How many size variants does the Accordion component have? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - The Accordion component has three size variants - sm, md and lg. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - Can I nest my accordions? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, you can nest your accordions. Refer to the nested accordion example in the docs. - - - - -); -} -`, -transformCode: (code) => { -return transformedCode(code, 'function', 'App'); -}, -scope: { -Accordion, -AccordionItem, -AccordionHeader, -AccordionTrigger, -AccordionTitleText, -AccordionIcon, -AccordionContent, -AccordionContentText, -Divider, -MinusIcon, -PlusIcon, -Wrapper, -}, -}} -/> - - - -### Nested Components - -You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region. - -<> - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - USA - - )} - - - - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - - California - - - )} - - - - - Capital city of California is Sacramento. California has a GDP - of 2.89 trillion dollars and follows Pacific Standard Time - zone. - - - - - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - Nevada - - )} - - - - - Nevada is located in a mountainous region that includes vast - semiarid grasslands and sandy alkali deserts. It is the most - arid state of the country. - - - - - - - -); -} -`, -transformCode: (code) => { -return transformedCode(code, 'function', 'App'); -}, -scope: { -Accordion, -AccordionItem, -AccordionHeader, -AccordionTrigger, -AccordionTitleText, -AccordionIcon, -AccordionContent, -AccordionContentText, -Divider, -MinusIcon, -PlusIcon, -Wrapper, -}, -}} -/> - - - -### Controlled Accordion - -A component is controlled when it's managed by its parent using props. -You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion. - -<> - setSelectedValues(item)}> - - - - {({ isExpanded }) => { - return ( - <> - - Exploring Nature's Wonders - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - Embark on a journey through the breathtaking landscapes and diverse ecosystems of our planet. From majestic mountains to serene oceans, discover the beauty that nature has to offer. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - The Art of Culinary Delights - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking. - - - - - - - {({ isExpanded }) => { - return ( - <> - - Mastering the Creative Process - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression. - - - - -); -} -`, -transformCode: (code) => { -return transformedCode(code, 'function', 'App'); -}, -scope: { -Accordion, -AccordionItem, -AccordionHeader, -AccordionTrigger, -AccordionTitleText, -AccordionIcon, -AccordionContent, -AccordionContentText, -Divider, -MinusIcon, -PlusIcon, -PlusIcon, -Wrapper, -}, -}} -/> - - - -## Unstyled - -We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements. diff --git a/example/storybook-v7/src/components/Accordion/index.themed.stories.mdx b/example/storybook-v7/src/components/Accordion/index.themed.stories.mdx deleted file mode 100644 index cdcba405d1..0000000000 --- a/example/storybook-v7/src/components/Accordion/index.themed.stories.mdx +++ /dev/null @@ -1,1294 +0,0 @@ ---- -title: gluestack-ui Accordion Component | Installation, Usage, and API - -description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. - -pageTitle: Accordion - -pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. - -showHeader: true ---- -import { Meta } from '@storybook/addon-docs'; - - - -import { - Divider, - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - ChevronDownIcon, - ChevronUpIcon, -} from '../../core-components/themed'; -import { - PlusIcon, - MinusIcon, -} from 'lucide-react-native'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - AddIcon, - InfoIcon, - Alert, - CollapsibleCode, -} from '@gluestack/design-system'; -import { transformedCode } from '../../utils'; -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Accordion** component. - -<> - - - - - {({ isExpanded }) => { - return ( - <> - - How do I place an order? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - ChevronDownIcon, - ChevronUpIcon, - Wrapper, - }, - argsType: { - size: { - control: 'select', - options: ['sm', 'md', 'lg'], - default: 'md', - }, - variant: { - control: 'select', - options: ['filled', 'unfilled'], - default: 'filled', - }, - type: { - control: 'select', - options: ['single', 'multiple'], - default: 'single', - }, - isCollapsible: { - control: 'boolean', - default: true, - }, - isDisabled: { - control: 'boolean', - }, - }, - }} - /> - - -
- -## Installation - -### Step 1: Install the following dependencies: - -```bash - -npm i @gluestack-ui/accordion - -``` - -### Step 2: Copy and paste the following code into your project. - - - -```jsx -%%-- File: core-components/themed/accordion/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 { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionIcon, AccordionContent, AccordionContentText } from '@/components/ui/accordion'; -``` - -```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. - -#### Accordion - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - type - - - - "single" | "multiple" - - - "single" - - - {`Determines whether one or multiple items can be opened at the same time.`} - - - - - - isCollapsible - - - - boolean - - - true - - - {`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`} - - - - - - defaultValue - - - - string[] - - - [] - - - {`The value of the item to expand when initially rendered when type is "single" or "multiple".`} - - - - - - value - - - - string[] - - - [] - - - {`The controlled value of the item to expand when type is "single" or "multiple".`} - - - - - - onValueChange - - - - function - - - - - - - {`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the accordion and all its items.`} - - - -
-
- - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _item - - - - {`Prop to style the AccordionItem Component`} - - - - - - - - _titleText - - - - {`Prop to style the AccordionTitleText Component`} - - - - - - - - _contentText - - - - {`Prop to style the AccordionContentText Component`} - - - - - - - - _icon - - - - {`Prop to style the AccordionIcon Component`} - - - -
-
- - -#### AccordionItem - -Contains all the parts of a collapsible section. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - value - - - - string - - - - - - - {`The controlled value of the item to expand when type is "single" or "multiple". Must be used in conjunction with onValueChange.This is a mandatory prop.`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the accordion and all its items.`} - - - -
-
- - -#### AccordionHeader - -Wraps an `Accordion.Trigger`. It inherits all the properties of @expo/html-elements's [H3](https://www.npmjs.com/package/@expo/html-elements#h3) on web and It inherits all the properties of react native's [View](https://reactnative.dev/docs/view) on native. Use the as prop to update it to the appropriate heading level for your page. - -#### AccordionTrigger - -Toggles the collapsed state of its associated item. It inherits all the properties of react native's [Pressable](https://reactnative.dev/docs/pressable). It should be nested inside of an `Accordion.Header`. - -#### AccordionTitleText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -#### AccordionIcon - -Contains all Icon related layout style props and actions.It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### AccordionContent - -Contains all the collapsible content for an item. It inherits all the properties of React Native [View](https://reactnative.dev/docs/view) component. - -#### AccordionContentText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -### Accessibility - -Adheres to the Accordion [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/). - -We have outlined the various features that ensure the Accordion component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -- Header is h3 tag on web. -- aria-expanded is "true" when the Accordion Content is visible, otherwise false. -- role is set to "region" for the currently expanded accordion panel. -- aria-controls points to the id of the Accordion Content. -- aria-labelledby references the accordion header button that expands and collapses the region. - -### Keyboard Interactions - -- `Space` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. -- `Enter` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. -- `Tab` - Moves focus to the next focusable element. -- `Shift + Tab` - Moves focus to the previous focusable element. - -### Screen Reader - -- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed). - -## 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. - -### Customized Component - -The following example demonstrates how easily you can customize the Accordion component to suit your needs. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What does the "type" prop of the Accordion component do? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - The type prop determines whether one or multiple items can be - opened at the same time. The default value is "single" which means - only one item can be opened at a time. - - - - - - - {({ isExpanded }) => { - return ( - <> - - Can I disable the whole accordion? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, you can disable the whole accordion by setting the isDisabled - prop to true on the Accordion component. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What is a controlled accordion? How can I make it controlled? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Controlled components refer to the components where the state and behaviors are controlled by the Parent component. You can make the accordion a controlled component by passing the value prop to the Accordion component and setting the onValueChange prop to update the value prop. Refer to the controlled accordion example in the docs. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - ChevronDownIcon, - ChevronUpIcon, - Wrapper, - }, - }} - /> - - -### Rounded corners - -The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components. - - - - - - - {({ isExpanded }) => { - return ( - <> - {isExpanded ? ( - - ) : ( - - )} - - How do I place an order? - - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }) => { - return ( - <> - {isExpanded ? ( - - ) : ( - - )} - - What payment methods do you accept? - - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - MinusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - -### Disabled item - -You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component. - - - - - - - {({ isExpanded }) => { - return ( - <> - - Disabled Item - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - This is a Disabled Item. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - Is this accordion accessible? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, the accordion is accessible. It adheres to the WAI-ARIA design - pattern. You can read more about it in the accessibility section of - the docs. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - MinusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - -### Default value - -Use the defaultValue prop to define the open item by default. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What is the defaultValue prop of the Accordion component? - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - The defaultValue prop of the Accordion component is used to define - the open item by default. It is used when the Accordion component is - uncontrolled. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - How many size variants does the Accordion component have? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - The Accordion component has three size variants - sm, md and lg. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - Can I nest my accordions? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, you can nest your accordions. Refer to the nested accordion example in the docs. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - MinusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - -### Nested Components - -You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region. - - - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - USA - - )} - - - - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - - California - - - )} - - - - - Capital city of California is Sacramento. California has a GDP - of 2.89 trillion dollars and follows Pacific Standard Time - zone. - - - - - - - - - {({isExpanded}) => ( - <> - {isExpanded ? ( - - ) : ( - - )} - Nevada - - )} - - - - - Nevada is located in a mountainous region that includes vast - semiarid grasslands and sandy alkali deserts. It is the most - arid state of the country. - - - - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - MinusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - - -### Controlled Accordion - -A component is controlled when it's managed by its parent using props. -You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion. - - - setSelectedValues(item)}> - - - - {({ isExpanded }) => { - return ( - <> - - Exploring Nature's Wonders - - {isExpanded ? ( - - ) : ( - - )} - - - ); - }} - - - - - Embark on a journey through the breathtaking landscapes and diverse ecosystems of our planet. From majestic mountains to serene oceans, discover the beauty that nature has to offer. - - - - - - - - {({ isExpanded }) => { - return ( - <> - - The Art of Culinary Delights - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking. - - - - - - - {({ isExpanded }) => { - return ( - <> - - Mastering the Creative Process - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression. - - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - Divider, - MinusIcon, - PlusIcon, - PlusIcon, - Wrapper, - }, - }} - /> - diff --git a/example/storybook-v7/src/components/Actionsheet/Actionsheet.png b/example/storybook-v7/src/components/Actionsheet/Actionsheet.png deleted file mode 100644 index 4b7a2e5fc8..0000000000 Binary files a/example/storybook-v7/src/components/Actionsheet/Actionsheet.png and /dev/null differ diff --git a/example/storybook-v7/src/components/Actionsheet/Actionsheet.stories.tsx b/example/storybook-v7/src/components/Actionsheet/Actionsheet.stories.tsx deleted file mode 100644 index 9fe2a9b753..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/Actionsheet.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Actionsheet from './Actionsheet'; -import ActionsheetScrollView from './ActionsheetScrollView'; -import ActionsheetFlatList from './ActionsheetFlatList'; -import ActionsheetVirtualizedList from './ActionsheetVirtualizedList'; -import ActionsheetSectionList from './ActionsheetSectionList'; -import ActionsheetIcon from './ActionsheetIcon'; -import ActionsheetAvoidKeyboard from './ActionsheetAvoidKeyboard'; -import ActionsheetWithKeyboardAvoidingViewWithSnapPoints from './ActionsheetAvoidKeyboardWithSnapPoints'; - -const ActionsheetMeta: ComponentMeta = { - title: 'stories/Actionsheet', - component: Actionsheet, - // metaInfo is required for figma generation - // @ts-ignore - metaInfo: { - componentDescription: `The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.`, - }, -}; - -export default ActionsheetMeta; - -export { - Actionsheet, - ActionsheetIcon, - ActionsheetScrollView, - ActionsheetFlatList, - ActionsheetVirtualizedList, - ActionsheetSectionList, - ActionsheetAvoidKeyboard, - ActionsheetWithKeyboardAvoidingViewWithSnapPoints, -}; diff --git a/example/storybook-v7/src/components/Actionsheet/Actionsheet.tsx b/example/storybook-v7/src/components/Actionsheet/Actionsheet.tsx deleted file mode 100644 index ee9f35c5b9..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/Actionsheet.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import React, { useState } from 'react'; -import { - Button, - ButtonText, - VStack, - HStack, - Icon, - Box, - FormControl, - FormControlLabel, - FormControlLabelText, - Input, - InputField, - InputIcon, - InputSlot, - AddIcon, - Image, - Text, - Center, -} from '@/components/ui'; -import { config } from '@gluestack-ui/config'; - -import { - Actionsheet, - ActionsheetIcon, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetFlatList, - ActionsheetScrollView, - ActionsheetSectionList, - ActionsheetSectionHeaderText, - ActionsheetVirtualizedList, -} from '@/components/ui/actionsheet'; - -const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => { - const [showActionsheet, setShowActionsheet] = React.useState(false); - - const handleClose = () => setShowActionsheet(false); - - return ( -
- - - - - - - - - Delete - - - Share - - - Play - - - Favourite - - - Cancel - - - -
- ); -}; - -function FigmaActionsheetStory({ ...props }: any) { - return ( - - - - - - - Delete - - - Share - - - Play - - - Favourite - - - Cancel - - - - ); -} - -ActionsheetBasic.description = - 'This is a basic Actionsheet component example. Actionsheets are used to display a list of actions that can be performed on a page.'; - -export default ActionsheetBasic; - -export { - FigmaActionsheetStory, - Actionsheet, - ActionsheetIcon, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetFlatList, - ActionsheetScrollView, - ActionsheetSectionList, - ActionsheetSectionHeaderText, - ActionsheetVirtualizedList, - Button, - ButtonText, - VStack, - HStack, - Icon, - Box, - FormControl, - FormControlLabel, - FormControlLabelText, - Input, - InputField, - InputIcon, - InputSlot, - AddIcon, - Image, - Text, - useState, - config, -}; diff --git a/example/storybook-v7/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx b/example/storybook-v7/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx deleted file mode 100644 index 16ba50de0d..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React, { useEffect } from 'react'; - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - Button, - ButtonText, - VStack, - Input, - InputIcon, - InputSlot, - InputField, - FormControl, - FormControlLabel, - FormControlLabelText, - HStack, - Image, - Text, - Box, - Icon, -} from '@/components/ui'; -import { KeyboardAvoidingView, Platform } from 'react-native'; - -const ActionsheetWithKeyboardAvoidingView = ({ - showActionsheet: showActionsheetProp = true, - ...props -}) => { - const [showActionsheet, setShowActionsheet] = React.useState( - props.showActionsheet - ); - - useEffect(() => { - setShowActionsheet(props.showActionsheet); - }, [props.showActionsheet]); - - const handleClose = () => setShowActionsheet(false); - - return ( - // @ts-ignore - - - - - - - - - - - - - - Mastercard - Card ending in 2345 - - - - - - Confirm security code - - - - - - - - - - - - - - - ); -}; - -ActionsheetWithKeyboardAvoidingView.description = - 'This is an example of an Actionsheet component with KeyboardAvoidingView. This is used to avoid the keyboard when it is opened.'; - -export default ActionsheetWithKeyboardAvoidingView; - -export { - Actionsheet, - Button, - VStack, - Input, - InputIcon, - InputSlot, - InputField, - FormControl, - FormControlLabel, - FormControlLabelText, - HStack, - Image, - Text, - Box, - Icon, - KeyboardAvoidingView, - Platform, -}; diff --git a/example/storybook-v7/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx b/example/storybook-v7/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx deleted file mode 100644 index 202bc884b5..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import React, { useEffect } from 'react'; - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - Button, - ButtonText, - VStack, - Input, - InputIcon, - InputSlot, - InputField, - FormControl, - FormControlLabel, - FormControlLabelText, - HStack, - Image, - Text, - Box, - Icon, -} from '@/components/ui'; -import { KeyboardAvoidingView } from 'react-native'; - -const ActionsheetWithKeyboardAvoidingViewWithSnapPoints = ({ - showActionsheet: showActionsheetProp = true, - ...props -}) => { - const [showActionsheet, setShowActionsheet] = React.useState( - props.showActionsheet - ); - - useEffect(() => { - setShowActionsheet(props.showActionsheet); - }, [props.showActionsheet]); - - const handleClose = () => setShowActionsheet(false); - - return ( - - - - - - - - - - - - - - - Mastercard - - - Card ending in 2345 - - - - - - - Confirm security code - - - - - - - - - - - - - - - ); -}; - -ActionsheetWithKeyboardAvoidingViewWithSnapPoints.description = - 'This is a basic Actionsheet component example. Actionsheets are used to display a list of actions that can be performed on a page.'; - -export default ActionsheetWithKeyboardAvoidingViewWithSnapPoints; - -export { - Actionsheet, - Button, - VStack, - Input, - InputIcon, - InputSlot, - InputField, - FormControl, - FormControlLabel, - FormControlLabelText, - HStack, - Image, - Text, - Box, - Icon, -}; diff --git a/example/storybook-v7/src/components/Actionsheet/ActionsheetFlatList.tsx b/example/storybook-v7/src/components/Actionsheet/ActionsheetFlatList.tsx deleted file mode 100644 index 0c5d20ef48..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/ActionsheetFlatList.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { useCallback } from 'react'; - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetFlatList, - Button, -} from '@/components/ui'; -import { useEffect } from 'react'; - -const ActionsheetWithFlatList = ({ - showActionsheet: showActionsheetProp = true, - ...props -}) => { - const [showActionsheet, setShowActionsheet] = React.useState( - props.showActionsheet - ); - - useEffect(() => { - setShowActionsheet(props.showActionsheet); - }, [props.showActionsheet]); - - const handleClose = useCallback( - () => setShowActionsheet(false), - [setShowActionsheet] - ); - - 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 = useCallback( - ({ title }: any) => ( - - {title} - - ), - [handleClose] - ); - - return ( - - - - - - - } - keyExtractor={(item: any) => item.id} - /> - - - ); -}; - -ActionsheetWithFlatList.description = - 'This is an example of actionsheet with items rendered using FlatList'; - -export default ActionsheetWithFlatList; - -export { Actionsheet, Button }; diff --git a/example/storybook-v7/src/components/Actionsheet/ActionsheetIcon.tsx b/example/storybook-v7/src/components/Actionsheet/ActionsheetIcon.tsx deleted file mode 100644 index 14770914b7..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/ActionsheetIcon.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetIcon, - Button, - Icon, - TrashIcon, - ShareIcon, - PlayIcon, - FavouriteIcon, - CloseIcon, -} from '@/components/ui'; -import { useEffect } from 'react'; - -const ActionsheetWithIcon = ({ - showActionsheet: showActionsheetProp = true, - ...props -}) => { - const [showActionsheet, setShowActionsheet] = React.useState( - props.showActionsheet - ); - - useEffect(() => { - setShowActionsheet(props.showActionsheet); - }, [props.showActionsheet]); - - const handleClose = () => setShowActionsheet(false); - - return ( - - - - - - - - - Delete - - - - Share - - - - Play - - - - Favourite - - - - Cancel - - - - ); -}; - -ActionsheetWithIcon.description = `This is an example of an Actionsheet component with Icons. This is to represent how to use icons in Actionsheet.`; - -export default ActionsheetWithIcon; - -export { - Actionsheet, - Button, - Icon, - TrashIcon, - ShareIcon, - PlayIcon, - FavouriteIcon, - CloseIcon, -}; diff --git a/example/storybook-v7/src/components/Actionsheet/ActionsheetScrollView.tsx b/example/storybook-v7/src/components/Actionsheet/ActionsheetScrollView.tsx deleted file mode 100644 index b224b4c7c3..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/ActionsheetScrollView.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useMemo, useCallback } from 'react'; - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetScrollView, - Button, -} from '@/components/ui'; -import { useEffect } from 'react'; - -const ActionsheetWithScrollView = ({ - showActionsheet: showActionsheetProp = true, - ...props -}) => { - const [showActionsheet, setShowActionsheet] = React.useState( - props.showActionsheet - ); - - useEffect(() => { - setShowActionsheet(props.showActionsheet); - }, [props.showActionsheet]); - - const handleClose = useCallback( - () => setShowActionsheet(false), - [setShowActionsheet] - ); - - // variables - const data = useMemo( - () => - Array(50) - .fill(0) - .map((_, index) => `Item ${index}`), - [] - ); - - const renderItem = useCallback( - (item: any) => ( - - {item} - - ), - [handleClose] - ); - - return ( - - - - - - - - {data.map(renderItem)} - - - - ); -}; -ActionsheetWithScrollView.description = - 'This is an example of an Actionsheet with a list of items inside a ScrollView.'; - -export default ActionsheetWithScrollView; - -export { Actionsheet, Button }; diff --git a/example/storybook-v7/src/components/Actionsheet/ActionsheetSectionList.tsx b/example/storybook-v7/src/components/Actionsheet/ActionsheetSectionList.tsx deleted file mode 100644 index 243d367de3..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/ActionsheetSectionList.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import React, { useCallback, useEffect } from 'react'; - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetSectionList, - ActionsheetSectionHeaderText, - Button, -} from '@/components/ui'; - -const ActionsheetWithSectionlist = ({ - showActionsheet: showActionsheetProp = true, - ...props -}) => { - const [showActionsheet, setShowActionsheet] = React.useState( - props.showActionsheet - ); - - useEffect(() => { - setShowActionsheet(props.showActionsheet); - }, [props.showActionsheet]); - - const handleClose = useCallback( - () => setShowActionsheet(false), - [setShowActionsheet] - ); - - 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 }: any) => ( - - {item} - - )} - renderSectionHeader={({ section: { title, data } }: any) => ( - - {title} ({data.length}) - - )} - /> - - - ); -}; - -ActionsheetWithSectionlist.description = - 'This is an example of actionsheet with items rendered using SectionList '; - -export default ActionsheetWithSectionlist; - -export { Actionsheet, Button }; diff --git a/example/storybook-v7/src/components/Actionsheet/ActionsheetVirtualizedList.tsx b/example/storybook-v7/src/components/Actionsheet/ActionsheetVirtualizedList.tsx deleted file mode 100644 index c0dca48a09..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/ActionsheetVirtualizedList.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React, { useMemo, useCallback } from 'react'; - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetVirtualizedList, - Button, -} from '@/components/ui'; -import { useEffect } from 'react'; - -const ActionsheetWithVirtualizedList = ({ - showActionsheet: showActionsheetProp = true, - ...props -}) => { - const [showActionsheet, setShowActionsheet] = React.useState( - props.showActionsheet - ); - - useEffect(() => { - setShowActionsheet(props.showActionsheet); - }, [props.showActionsheet]); - - const handleClose = useCallback( - () => setShowActionsheet(false), - [setShowActionsheet] - ); - - const getItem = (_data: any, index: number): any => ({ - id: Math.random().toString(12).substring(0), - title: _data[index], - }); - - const getItemCount = (_data: any) => _data.length; - - const Item = useCallback( - ({ title }: any) => ( - - {title} - - ), - [handleClose] - ); - - const data = useMemo( - () => - Array(50) - .fill(0) - .map((_, index) => `Item ${index + 1}`), - [] - ); - - return ( - - - - - - - } - keyExtractor={(item: any) => item.id} - getItemCount={getItemCount} - getItem={getItem} - /> - - - ); -}; - -ActionsheetWithVirtualizedList.description = - 'This is an example of actionsheet with items rendered using VirtualizedList '; - -export default ActionsheetWithVirtualizedList; - -export { Actionsheet, Button }; diff --git a/example/storybook-v7/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-v7/src/components/Actionsheet/index.nw.stories.mdx deleted file mode 100644 index 34143ddcce..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/index.nw.stories.mdx +++ /dev/null @@ -1,1053 +0,0 @@ ---- -title: Actionsheet | gluestack-ui | Installation, Usage, and API - -description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view. - -pageTitle: Actionsheet - -pageDescription: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetIcon, - ActionsheetScrollView, - ActionsheetVirtualizedList, - ActionsheetFlatList, - ActionsheetSectionList, - ActionsheetSectionHeaderText, - Button, - ButtonText, - VStack, - Input, - InputIcon, - InputSlot, - InputField, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - HStack, - Image, - Text, - Box, - Icon, - TrashIcon, - ShareIcon, - PlayIcon, - FavouriteIcon, - CloseIcon, -} from '../../core-components/nativewind'; -import { - CollapsibleCode, - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - AddIcon, - InfoIcon, - Alert, - Tabs -} from '@gluestack/design-system'; -import { Platform, KeyboardAvoidingView, } from 'react-native'; -import { CreditCardIcon } from 'lucide-react-native'; -import { transformedCode } from '../../utils'; -import Wrapper from '../../core-components/nativewind/Wrapper'; - -This is an illustration of **Actionsheet** component. - - - setShowActionsheet(!showActionsheet); - return ( - - - - - - - - - - Delete - - - Share - - - Play - - - Favourite - - - Cancel - - - - - ); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - Wrapper, - Box, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add actionsheet - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/actionsheet -``` -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/nativewind/actionsheet/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 { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetIcon, -} from '@/components/ui/actionsheet'; -``` - -```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. - -#### Actionsheet - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - isOpen - - - - boolean - - - - - - - {`If true, the Actionsheet will open. Useful for controllable state behavior.`} - - - - - - onClose - - - - {`() => any`} - - - - - - - - {`Callback invoked when the Actionsheet is closed.`} - - - - - - - onOpen - - - - {`() => any`} - - - - - - - - {`Callback invoked when the Actionsheet is opened.`} - - - - - - - useRNModal - - - - boolean - - - false - - - {`If true, renders react-native native modal.`} - - - - - - defaultIsOpen - - - - boolean - - - - - - - {`Specifies the default open state of the Actionsheet`} - - - - - - initialFocusRef - - - - {`React.RefObject`} - - - - - - - {`The ref of element to receive focus when the Actionsheet opens.`} - - - - - - finalFocusRef - - - - {`React.RefObject`} - - - - - - - {`The ref of element to receive focus when the Actionsheet closes`} - - - - - - closeOnOverlayClick - - - - boolean - - - - - - - {`If true, the Actionsheet will close when the overlay is clicked.`} - - - - - - isKeyboardDismissable - - - - boolean - - - - - - - {`If true, the keyboard can dismiss the Actionsheet`} - - - - - - trapFocus - - - - boolean - - - {`true`} - - - {`If true, creates a focus scope containing all elements within the Actionsheet content.`} - - - - - - children - - - - any - - - - - - - {`The content to display inside the Actionsheet`} - - - - - - snapPoints - - - - {`Array`} - - - {`[50]`} - - - - {`The snap points for the Actionsheet The Actionsheet will snap to the point closest to its current position. The default value is 50% of the screen height. The value should be between 0 and 100. Currently, only one snap point is supported. We plan to support multiple snap points in the future.`} - - - - -
-
- - -#### ActionsheetBackdrop - -It is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer. - -#### ActionsheetContent - -It inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs. - -#### ActionsheetDragIndicatorWrapper - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### ActionsheetDragIndicator - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### ActionsheetItem - -It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. - -#### ActionsheetItemText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -#### ActionsheetIcon - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### ActionsheetScrollView - -It inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview) component. - -#### ActionsheetVirtualizedList - -It inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) component. - -#### ActionsheetFlatList - -It inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist) component. - -#### ActionsheetSectionList - -It inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist) component. - -#### ActionsheetSectionHeaderText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -> Note: While our Actionsheet component supports both ActionsheetScrollView and ActionsheetVirtualizedList, we recommend using VirtualizedList for better performance on large lists of items. The ScrollView option may cause performance issues on lists with many items. - -### Features - -- Actionsheet has aria-modal set to true. -- Actionsheet has role set to dialog. -- When the Actionsheet opens, focus is trapped within it. -- Pressing Esc closes the Actionsheet -- Clicking on the overlay closes the Actionsheet -- Scrolling is blocked on the elements behind the Actionsheet - -### Accessibility - -We have outlined the various features that ensure the Actionsheet component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -#### Keyboard - -- `Tab + Enter`: Triggers the actionsheet action. - -### Screen Reader - -- VoiceOver: When the actionsheet is focused, the screen reader will announce the button group . - -## 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, - VStack, - Input, - InputIcon, - InputSlot, - InputField, - FormControl, - FormControlLabel, - FormControlLabelText, - HStack, - Image, - Text, - Box, - Icon, - KeyboardAvoidingView, - Platform, - CreditCardIcon, - }, - 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, - VStack, - Input, - InputIcon, - InputSlot, - InputField, - FormControl, - FormControlLabel, - FormControlLabelText, - HStack, - Image, - Text, - Box, - Icon, - CreditCardIcon, - 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. - - - 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-v7/src/components/Actionsheet/index.stories.mdx b/example/storybook-v7/src/components/Actionsheet/index.stories.mdx deleted file mode 100644 index 61f0aa55f7..0000000000 --- a/example/storybook-v7/src/components/Actionsheet/index.stories.mdx +++ /dev/null @@ -1,1840 +0,0 @@ ---- -title: Actionsheet | gluestack-ui | Installation, Usage, and API - -description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view. - -pageTitle: Actionsheet - -pageDescription: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view. - -showHeader: true - -tag: beta ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - ActionsheetIcon, - ActionsheetScrollView, - ActionsheetVirtualizedList, - ActionsheetFlatList, - ActionsheetSectionList, - ActionsheetSectionHeaderText, -} from './Actionsheet'; -import { - Button, - ButtonText, - VStack, - Input, - InputIcon, - InputSlot, - InputField, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - HStack, - KeyboardAvoidingView, - Platform, -} from '@gluestack-ui/themed'; -import { LeadingIcon, IconRoot } from '@gluestack-ui/themed'; -import { Image, Text, Box } from '@gluestack-ui/themed'; -import { Icon, TrashIcon, ShareIcon } from '@gluestack-ui/themed'; -import { PlayIcon, FavouriteIcon, CloseIcon } from '@gluestack-ui/themed'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - AddIcon, - InfoIcon, - Alert, -} from '@gluestack/design-system'; -import { config } from '@gluestack-ui/config'; -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Actionsheet** component. - - - setShowActionsheet(!showActionsheet); - return ( - - - - - - - - - - Delete - - - Share - - - Play - - - Favourite - - - Cancel - - - - - ); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - ButtonText, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - Wrapper, - Box, - }, - }} - /> - - -
- -## API Reference - -### Import - -To use this component in your project, include the following import statement in your file. - -```bash -import { Actionsheet } from '@gluestack-ui/themed'; -``` - -### Anatomy - -The structure provided below can help you identify and understand a actionsheet component's various parts. - -```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. - -#### Actionsheet - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - isOpen - - - - boolean - - - - - - - {`If true, the Actionsheet will open. Useful for controllable state behavior.`} - - - - - - onClose - - - - {`() => any`} - - - - - - - - {`Callback invoked when the Actionsheet is closed.`} - - - - - - - onOpen - - - - {`() => any`} - - - - - - - - {`Callback invoked when the Actionsheet is opened.`} - - - - - - - useRNModal - - - - boolean - - - false - - - {`If true, renders react-native native modal.`} - - - - - - defaultIsOpen - - - - boolean - - - - - - - {`Specifies the default open state of the Actionsheet`} - - - - - - initialFocusRef - - - - {`React.RefObject`} - - - - - - - {`The ref of element to receive focus when the Actionsheet opens.`} - - - - - - finalFocusRef - - - - {`React.RefObject`} - - - - - - - {`The ref of element to receive focus when the Actionsheet closes`} - - - - - - closeOnOverlayClick - - - - boolean - - - - - - - {`If true, the Actionsheet will close when the overlay is clicked.`} - - - - - - isKeyboardDismissable - - - - boolean - - - - - - - {`If true, the keyboard can dismiss the Actionsheet`} - - - - - - trapFocus - - - - boolean - - - {`true`} - - - {`If true, creates a focus scope containing all elements within the Actionsheet content.`} - - - - - - children - - - - any - - - - - - - {`The content to display inside the Actionsheet`} - - - - - - snapPoints - - - - {`Array`} - - - {`[50]`} - - - - {`The snap points for the Actionsheet The Actionsheet will snap to the point closest to its current position. The default value is 50% of the screen height. The value should be between 0 and 100. Currently, only one snap point is supported. We plan to support multiple snap points in the future.`} - - - - -
-
- - -#### ActionsheetBackdrop - -It is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer. - -#### ActionsheetContent - -It inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs. - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _sectionHeaderText - - - - {`Prop to style ActionsheetSectionHeaderText Component`} - - - -
-
- - -#### ActionsheetDragIndicatorWrapper - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### ActionsheetDragIndicator - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### ActionsheetItem - -It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _text - - - - {`Prop to style ActionsheetItemText Component`} - - - - - - _icon - - - - {`Prop to style ActionsheetIcon Component`} - - - -
-
- - -#### ActionsheetItemText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -#### ActionsheetIcon - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### ActionsheetScrollView - -It inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview) component. - -#### ActionsheetVirtualizedList - -It inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) component. - -#### ActionsheetFlatList - -It inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist) component. - -#### ActionsheetSectionList - -It inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist) component. - -#### ActionsheetSectionHeaderText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -> Note: While our Actionsheet component supports both ActionsheetScrollView and ActionsheetVirtualizedList, we recommend using VirtualizedList for better performance on large lists of items. The ScrollView option may cause performance issues on lists with many items. - -### Features - -- Actionsheet has aria-modal set to true. -- Actionsheet has role set to dialog. -- When the Actionsheet opens, focus is trapped within it. -- Pressing Esc closes the Actionsheet -- Clicking on the overlay closes the Actionsheet -- Scrolling is blocked on the elements behind the Actionsheet - -### Accessibility - -We have outlined the various features that ensure the Actionsheet component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -#### Keyboard - -- `Tab + Enter`: Triggers the actionsheet action. - -### Screen Reader - -- VoiceOver: When the actionsheet is focused, the screen reader will announce the button group . - -## Themed - -The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library). - -## 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: {}, - }} - /> - - -## Unstyled - -All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each 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. - -#### Themed - -<> - setShowActionsheet(!showActionsheet); - return ( - - - - - - - - - - Edit Profile - - - View Followers - - - Add a Post - - - Delete Account - - - Settings - - - Sign Out - - - - - ); - } - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - Box, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - Wrapper, - }, - argsType: {}, - }} - /> - - -#### VirtualizedList - -<> - setShowActionsheet(!showActionsheet); - const data = React.useMemo(() => Array(5).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: { - Button, - ButtonText, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - }, - argsType: {}, - }} - /> - - -#### Keyboard handling - -<> - setShowActionsheet(!showActionsheet); - return ( - <> - - - - - - - - - - - - - - Mastercard - Card ending in 2345 - - - - - - Confirm security code - - - - - - - - - - - - ); - } -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - VStack, - HStack, - Icon, - Box, - FormControl, - Input, - AddIcon, - Image, - Text, - }, - argsType: {}, - }} - /> - - -<> - setShowActionsheet(!showActionsheet); - return ( - <> - - - - - - - - - - - - - - Mastercard - Card ending in 2345 - - - - - - Confirm security code - - - - - - - - - - - - ); - } -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - Actionsheet, - VStack, - HStack, - Icon, - Box, - FormControl, - Input, - AddIcon, - Image, - Text, - }, - argsType: {}, - }} - /> - - -#### FlatList - -<> - setShowActionsheet(!showActionsheet); - const DATA = [ - { - id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', - title: 'Pizza' - }, - { - id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', - title: 'Burger' - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d73', - title: 'Risotto' - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d74', - title: 'French Fries' - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d75', - title: 'Onion Rings' - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d76', - title: 'Fried Shrimps' - }, - ]; - const Item = React.useCallback( - ({ title }) => ( - - {title} - - ), - [handleClose] - ); - return ( - <> - - - - - - - - } - keyExtractor={(item) => item.id} - /> - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - VStack, - HStack, - Icon, - Box, - FormControl, - Input, - AddIcon, - Image, - Text, - }, - argsType: {}, - }} - /> - - -<> - setShowActionsheet(!showActionsheet); - const DATA = [ - { - id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', - title: 'Pizza' - }, - { - id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', - title: 'Burger' - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d73', - title: 'Risotto' - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d74', - title: 'French Fries' - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d75', - title: 'Onion Rings' - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d76', - title: 'Fried Shrimps' - }, - ]; - const Item = React.useCallback( - ({ title }) => ( - - {title} - - ), - [handleClose] - ); - return ( - <> - - - - - - - - } - keyExtractor={(item) => item.id} - /> - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - VStack, - HStack, - Icon, - Box, - FormControl, - Input, - AddIcon, - Image, - Text, - }, - argsType: {}, - }} - /> - - -#### SectionList - -<> - setShowActionsheet(!showActionsheet); - const DATA = [ - { - title: 'Main dishes', - data: ['Pizza', 'Burger', 'Risotto'], - }, - { - title: 'Sides', - data: ['French Fries', 'Onion Rings', 'Fried Shrimps'], - }, - ]; - return ( - <> - - - - - - - - item + index} - renderItem={({ item }) => ( - - {item} - - )} - renderSectionHeader={({ section: { title, data } }) => ( - - {title} ({data.length}) - - )} - /> - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - VStack, - HStack, - Icon, - Box, - FormControl, - Input, - AddIcon, - Image, - Text, - }, - argsType: {}, - }} - /> - - -<> - setShowActionsheet(!showActionsheet); - const DATA = [ - { - title: 'Main dishes', - data: ['Pizza', 'Burger', 'Risotto'], - }, - { - title: 'Sides', - data: ['French Fries', 'Onion Rings', 'Fried Shrimps'], - }, - ]; - return ( - <> - - - - - - - - item + index} - renderItem={({ item }) => ( - - {item} - - )} - renderSectionHeader={({ section: { title, data } }) => ( - - {title} ({data.length}) - - )} - /> - - - -); -} -`, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Button, - ButtonText, - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, - VStack, - HStack, - Icon, - Box, - FormControl, - Input, - AddIcon, - Image, - Text, - }, - argsType: {}, - }} - /> - - -### Customizing the Actionsheet - -We have a function called `createActionsheet` which can be used to create a custom actionsheet component. This function takes in a configuration object which contains the styled components that you want to use for the Actionsheet You can refer [gluestack.io/style](/style) for more information on how to use styled components. - -You can read more on how to animate components [here](/ui/docs/advanced/animations). - -#### Usage - -Default styling of all these components can be found in the `components/core/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` components. - -```jsx -// import the styles -import { - Root, - Content, - Item, - ItemText, - DragIndicator, - IndicatorWrapper, - Backdrop, -} from 'components/core/actionsheet/styled-components'; - -// import the createActionsheet function -import { createActionsheet } from '@gluestack-ui/actionsheet'; - -// Understanding the API -const Actionsheet = createActionsheet({ - Root, - Content, - Item, - ItemText, - DragIndicator, - IndicatorWrapper, - Backdrop, -}); - -// Using the actionsheet component -export default () => ( - - - - - - - - Community - - - -); -``` - ---> - -## 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. - - --> - -### 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. - -#### Form Control with Input - -The Input Component can be incorporated within the FormControl. - - - - - - Name - - - - - - - - What would you like people to call you? - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Icon, - Input, - InputField, - AlertCircleIcon, - }, - argsType: {}, - }} - /> - - -#### Form Control with Radio - -The Radio Component can be incorporated within the FormControl. - - - - - - Favourite fruit - - - - - - - - - - - - Mango - - - - - - - - - - Apple - - - - - - - - - - Orange - - - - - - - Choose the fruit you like the most - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Icon, - Radio, - RadioGroup, - RadioIcon, - RadioIndicator, - RadioLabel, - AlertCircleIcon, - VStack, - CircleIcon, - Heading, - }, - argsType: {}, - }} - /> - - -#### Form Control with Checkbox - -The Checkbox Component can be incorporated within the FormControl. - - - - - - Sign up for newsletters - - - - - - - - - - - - Daily Bits - - - - - - - - - - Event Updates - - - - - - - - - - Sponsorship - - - - - - - Subscribe to newsletters for updates - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Icon, - Checkbox, - CheckboxGroup, - CheckboxIndicator, - CheckboxIcon, - CheckboxLabel, - AlertCircleIcon, - VStack, - CheckIcon, - Heading, - }, - argsType: {}, - }} - /> - - -#### Form Control with Textarea - -The Textarea Component can be incorporated within the FormControl. - - - - - - Comment - - - - - - Type your comment above - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Icon, - Textarea, - TextareaInput, - AlertCircleIcon, - }, - argsType: {}, - }} - /> - - -#### Form Control with Inline Form - -Inline forms can utilize FormControl for seamless integration and enhanced functionality. - - - - - - - - - - - - - - - - `, - 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) - }} - 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. - - - - - - Which time slot works best for you? - - - - - - - - - - - - Monday - - - - - - - - - - Tuesday - - - - - - - - - - Wednesday - - - - - - - - Choose one time slot for the meeting - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Icon, - Radio, - RadioGroup, - RadioIcon, - RadioIndicator, - RadioLabel, - AlertCircleIcon, - VStack, - CircleIcon, - Heading, - }, - argsType: {}, - }} - /> - - -#### Form Control with Form Actions - -Form Action Buttons can also be utilized in conjunction with FormControl. - - - - - - - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - HStack, - Button, - ButtonText, - }, - argsType: {}, - }} - /> - diff --git a/example/storybook-v7/src/components/Grid/Grid.stories.tsx b/example/storybook-v7/src/components/Grid/Grid.stories.tsx deleted file mode 100644 index 63c6c136f5..0000000000 --- a/example/storybook-v7/src/components/Grid/Grid.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Grid from './Grid'; -import GridExampleOne from './GridExampleOne'; -import GridSpacing from './GridSpacing'; - -const GridMeta: ComponentMeta = { - title: 'stories/Grid', - component: Grid, - // metaInfo is required for figma generation - // @ts-ignore - metaInfo: { - componentDescription: `This is a Grid component.`, - }, -}; - -export default GridMeta; -export { Grid, GridExampleOne, GridSpacing }; diff --git a/example/storybook-v7/src/components/Grid/Grid.tsx b/example/storybook-v7/src/components/Grid/Grid.tsx deleted file mode 100644 index 099f5b93c8..0000000000 --- a/example/storybook-v7/src/components/Grid/Grid.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Grid, GridItem } from '@/components/ui/grid'; -import React from 'react'; -import { Text } from 'react-native'; - -const GridBasic = () => { - return ( - - - 2 - - - 4 - - - 2 - - - - 8 - - - - 12 - - - - 2 - - - 6 - - - ); -}; - -export default GridBasic; diff --git a/example/storybook-v7/src/components/Grid/GridExampleOne.tsx b/example/storybook-v7/src/components/Grid/GridExampleOne.tsx deleted file mode 100644 index 053d4e5c1a..0000000000 --- a/example/storybook-v7/src/components/Grid/GridExampleOne.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { Grid, GridItem } from '@/components/ui/grid'; -import { Text } from '@/components/ui/text'; - -const GridExampleOne = () => { - return ( - - - colSpan = 3 - - - colSpan = 5 - - - colSpan = 6 - - - colSpan = 4 - - - colSpan = 4 - - - ); -}; - -export default GridExampleOne; diff --git a/example/storybook-v7/src/components/Grid/GridSpacing.tsx b/example/storybook-v7/src/components/Grid/GridSpacing.tsx deleted file mode 100644 index 25053e2d0e..0000000000 --- a/example/storybook-v7/src/components/Grid/GridSpacing.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Grid, GridItem } from '@/components/ui/grid'; - -const GridSpacing = () => { - return ( - - - - - - - - ); -}; - -export default GridSpacing; diff --git a/example/storybook-v7/src/components/Grid/index.nw.stories.mdx b/example/storybook-v7/src/components/Grid/index.nw.stories.mdx deleted file mode 100644 index 5fb671c594..0000000000 --- a/example/storybook-v7/src/components/Grid/index.nw.stories.mdx +++ /dev/null @@ -1,439 +0,0 @@ ---- -title: gluestack-ui Grid Component | Installation, Usage, and API - -description: The Grid component is a versatile layout tool designed to facilitate the creation of grid-based layouts comprising rows and columns. It offers flexibility and robust functionality, enabling the creation of diverse UI elements, ranging from basic containers to intricate layout structures. - -pageTitle: Grid - -pageDescription: The Grid component is a versatile layout tool designed to facilitate the creation of grid-based layouts comprising rows and columns. It offers flexibility and robust functionality, enabling the creation of diverse UI elements, ranging from basic containers to intricate layout structures. - -showHeader: true - -tag: alpha ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import Wrapper from '../../core-components/nativewind/Wrapper'; -import { transformedCode } from '../../utils'; -import {Grid, GridItem} from '../../core-components/nativewind/grid'; -import {Text} from '../../core-components/nativewind/text'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - AddIcon, - InfoIcon, - Alert, - Tabs, - CollapsibleCode -} from '@gluestack/design-system'; - - -This is an illustration of **Grid** component. - - - - - - - - - -`, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Grid, - GridItem, - Text, - }, - argsType: { }, - } - } - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add grid - ``` - - - -<> - -### Step 1: Copy and paste the following code into index.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/grid/index.tsx --%% -``` - - -> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** - -### Step 2(optional): Copy and paste the following code into index.web.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/grid/index.web.tsx --%% -``` - - -### Step 3: Copy and paste the following code into styles.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/grid/styles.tsx --%% -``` - - -### Step 4: 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 { Grid, GridItem } from '@/components/ui/grid'; -``` - -```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. - -#### Grid - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - numColumns - - - - number - - - 12 - - - {`This NativeWind Grid component is based on a 12-column grid layout. The value must be between 1 and 12 - `} - - - -
-
- - -#### GridItem - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - colSpan - - - - number - - - 1 - - - {`colSpan are integer values between 1 and 12 that specify the number of columns to span.`} - - - -
-
- - -## 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. - -### Setting the gap between grid items - -Use the gap-* utilities to change the gap between both rows and columns in grid - - - - - A - - - B - - - C - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Grid, - GridItem, - Text, - Wrapper, - }, - }} - /> - - -### Changing row and column gaps independently - -Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows independently. - - - - - 01 - - - 02 - - - 03 - - - 04 - - - 05 - - - 06 - - -`, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Grid, - GridItem, - Text, - }, - argsType: { }, - } - } - /> - - -### Nested Grids - -The following example depicts how easily you can nest grids to create complex layouts with multiple levels of nesting. - - - - - 01 - - - 02 - - - - 1 - 4 - 4 - - - - - 1 - 2 - 3 - 4 - - - -`, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Grid, - GridItem, - Text, - }, - argsType: { }, - } - } - /> - \ No newline at end of file diff --git a/example/storybook-v7/src/components/Grid/index.themed.stories.mdx b/example/storybook-v7/src/components/Grid/index.themed.stories.mdx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/example/storybook-v7/src/components/HStack/HStack.png b/example/storybook-v7/src/components/HStack/HStack.png deleted file mode 100644 index c2a6af71c3..0000000000 Binary files a/example/storybook-v7/src/components/HStack/HStack.png and /dev/null differ diff --git a/example/storybook-v7/src/components/HStack/HStack.stories.tsx b/example/storybook-v7/src/components/HStack/HStack.stories.tsx deleted file mode 100644 index bd02f632d3..0000000000 --- a/example/storybook-v7/src/components/HStack/HStack.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import HStack from './HStack'; -import HStackReversed from './HStackReversed'; - -const HStackMeta: ComponentMeta = { - title: 'stories/HStack', - component: HStack, - argTypes: { - space: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl'], - }, - reversed: { - control: 'boolean', - }, - }, - args: { - space: 'md', - reversed: false, - }, -}; - -export default HStackMeta; - -export { HStack }; - -export { HStackReversed }; diff --git a/example/storybook-v7/src/components/HStack/HStack.tsx b/example/storybook-v7/src/components/HStack/HStack.tsx deleted file mode 100644 index 88d16f6d3c..0000000000 --- a/example/storybook-v7/src/components/HStack/HStack.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { HStack } from '@/components/ui/hstack'; -import { Box } from '@gluestack-ui/themed'; - -const HStackBasic = ({ space, reversed, ...props }: any) => { - return ( - - - - - - - ); -}; - -HStackBasic.description = - 'This is a basic HStack component example. HStack is a primitive component.'; - -export default HStackBasic; - -export { Box, HStack }; diff --git a/example/storybook-v7/src/components/HStack/HStackReversed.tsx b/example/storybook-v7/src/components/HStack/HStackReversed.tsx deleted file mode 100644 index 0d66152065..0000000000 --- a/example/storybook-v7/src/components/HStack/HStackReversed.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { HStack } from '@gluestack-ui/themed'; -import { Box } from '@gluestack-ui/themed'; -import React from 'react'; - -const HStackReversed = ({ space, ...props }: any) => { - return ( - - - - - - - ); -}; - -HStackReversed.description = - 'This is a basic HStack component example. HStack is a primitive component to layout its children horizontally.'; - -export default HStackReversed; diff --git a/example/storybook-v7/src/components/HStack/index.nw.stories.mdx b/example/storybook-v7/src/components/HStack/index.nw.stories.mdx deleted file mode 100644 index b7e24d7fab..0000000000 --- a/example/storybook-v7/src/components/HStack/index.nw.stories.mdx +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: gluestack-ui HStack Component | Installation, Usage, and API - -description: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack. - -pageTitle: HStack - -pageDescription: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { HStack } from '../../core-components/nativewind'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, -} from '@gluestack/design-system'; - -import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode, Tabs } from '@gluestack/design-system'; -import { Box } from '../../core-components/nativewind/box'; - -This is an illustration of **HStack** component. - - - - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { Box, Wrapper, HStack }, - argsType: { - space: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'], - default: 'md', - }, - reversed: { - control: 'boolean', - options: [true, false], - default: false, - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add hstack - ``` - - - -<> - -### Step 1: Copy and paste the following code into index.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/hstack/index.tsx --%% -``` - - -> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** - -### Step 2(optional): Copy and paste the following code into index.web.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/hstack/index.web.tsx --%% -``` - - -### Step 3: Copy and paste the following code into styles.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/hstack/styles.tsx --%% -``` - - -### Step 4: 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 { HStack } from '@/components/ui/hstack'; -``` - -```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. - -#### HStack - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -### Accessibility - -The accessibility of a HStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a HStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers. - -### 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) and the props mentioned below. - - - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - space - - - - {`string `} - - - - - - - {`It sets the space between children. By default there is no space between the HStack items.`} - - - - - - reversed - - - - {`boolean`} - - - false - - - {`When true, it places the HStack items in reverse direction.`} - - - -
-
-
- -### 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-v7/src/components/HStack/index.themed.stories.mdx b/example/storybook-v7/src/components/HStack/index.themed.stories.mdx deleted file mode 100644 index 4f053f91a6..0000000000 --- a/example/storybook-v7/src/components/HStack/index.themed.stories.mdx +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: gluestack-ui HStack Component | Installation, Usage, and API - -description: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack. - -pageTitle: HStack - -pageDescription: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { Box,HStack} from '../../core-components/themed'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, - CollapsibleCode, - Tabs -} from '@gluestack/design-system'; -import Wrapper from '../../core-components/themed/Wrapper'; - - - -This is an illustration of **HStack** component. - -<> - - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { Box, Wrapper, HStack }, - argsType: { - space: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'], - default: 'md', - }, - reversed: { - control: 'boolean', - options: [true, false], - default: false, - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add hstack - ``` - - - -<> - -### Step 1: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/themed/hstack/index.tsx --%% -``` - - -### Step 2: 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 { HStack } from '@/components/ui/hstack'; -``` - -```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. - -#### HStack - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -### Accessibility - -The accessibility of a HStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a HStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers. - -### 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. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - space - - - - {`string `} - - - - - - - {`It sets the space between children. By default there is no space between the HStack items.`} - - - - - - reversed - - - - {`boolean`} - - - false - - - {`When true, it places the HStack items in reverse direction.`} - - - -
-
- - - - - - - -### 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-v7/src/components/Heading/Heading.png b/example/storybook-v7/src/components/Heading/Heading.png deleted file mode 100644 index fa3326f104..0000000000 Binary files a/example/storybook-v7/src/components/Heading/Heading.png and /dev/null differ diff --git a/example/storybook-v7/src/components/Heading/Heading.stories.tsx b/example/storybook-v7/src/components/Heading/Heading.stories.tsx deleted file mode 100644 index a0ed82a9e2..0000000000 --- a/example/storybook-v7/src/components/Heading/Heading.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Heading from './Heading'; - -const HeadingMeta: ComponentMeta = { - title: 'stories/Heading', - component: Heading, - // metaInfo is required for figma generation - // @ts-ignore - metaInfo: { - componentDescription: `Heading component gives you the ability to create headings for your page with different sizes and symantics from h1 to h6.`, - }, - argTypes: { - size: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], - }, - }, - args: { - text: 'This is heading', - size: '2xl', - }, -}; - -export default HeadingMeta; - -export { Heading }; diff --git a/example/storybook-v7/src/components/Heading/Heading.tsx b/example/storybook-v7/src/components/Heading/Heading.tsx deleted file mode 100644 index 01990b147f..0000000000 --- a/example/storybook-v7/src/components/Heading/Heading.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Center } from '@gluestack-ui/themed'; -import { Heading } from '@/components/ui/heading'; - -const HeadingBasic = ({ text = "I'm the heading", ...props }) => { - return {text}; -}; - -HeadingBasic.description = - 'This is a basic Heading component example. Headings are used to show the title of a section or page.'; - -export default HeadingBasic; - -export { Center, Heading }; diff --git a/example/storybook-v7/src/components/Heading/index.nw.stories.mdx b/example/storybook-v7/src/components/Heading/index.nw.stories.mdx deleted file mode 100644 index c27bc8ea39..0000000000 --- a/example/storybook-v7/src/components/Heading/index.nw.stories.mdx +++ /dev/null @@ -1,309 +0,0 @@ ---- -title: gluestack-ui Heading Component | Installation, Usage, and API - -description: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6. - -pageTitle: Heading - -pageDescription: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { Heading, Center } from '../../core-components/nativewind'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, -} from '@gluestack/design-system'; - -import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode, Tabs } from '@gluestack/design-system'; - -This is an illustration of **Heading** component. - - - I am a Heading - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Heading, - }, - argsType: { }, - } -} -/> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add heading - ``` - - - -<> - -### Step 1: Copy and paste the following code into index.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/heading/index.tsx --%% -``` - - -> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** - -### Step 2(optional): Copy and paste the following code into index.web.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/heading/index.web.tsx --%% -``` - - -### Step 3: Copy and paste the following code into styles.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/heading/styles.tsx --%% -``` - - -### Step 4: 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 { Heading } from '@/components/ui/heading'; -``` - -```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. - -#### Heading - -It inherits all the properties of @expo/html-elements's [H1](https://github.com/expo/expo/tree/main/packages/html-elements) component. - -### Props - -#### Heading - -Heading component is created using H1 component from @expo/html-elements. It extends all the props supported by [Expo HTML Heading Elements](https://www.npmjs.com/package/@expo/html-elements/v/0.0.5), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - isTruncated - - - - true | false - - - false - - - - - - bold - - - - true | false - - - false - - - - - - underline - - - - true | false - - - false - - - - - - strikeThrough - - - - true | false - - - false - - - - - - sub - - - - true | false - - - false - - - - - - italic - - - - true | false - - - false - - - - - - highlight - - - - true | false - - - false - - - - - - size - - - - - 5xl | 4xl | 3xl | 2xl | xl | lg | md | sm | xs - - - - md - - - -
-
- - -### 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. - -#### Heading Sizes - -Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, and `5xl`, allowing users to customize the size of the heading according to their design requirements. - - - - {sizes.map((size) => ( - {size} - ))} - - ); - }; - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { Wrapper, Center, Heading }, - argsType: {}, - }} - /> - \ No newline at end of file diff --git a/example/storybook-v7/src/components/Heading/index.themed.stories.mdx b/example/storybook-v7/src/components/Heading/index.themed.stories.mdx deleted file mode 100644 index c335b985f2..0000000000 --- a/example/storybook-v7/src/components/Heading/index.themed.stories.mdx +++ /dev/null @@ -1,427 +0,0 @@ ---- -title: gluestack-ui Heading Component | Installation, Usage, and API - -description: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6. - -pageTitle: Heading - -pageDescription: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { Heading, Center } from '../../core-components/themed'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, - CollapsibleCode, - Tabs, - Box, - HStack -} from '@gluestack/design-system'; -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Heading** component. - -<> - I am a Heading
- `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Heading, - }, - argsType: {}, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add heading - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/themed/heading/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 { Heading } from '@/components/ui/heading'; -``` - -```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. - -#### Heading - -It inherits all the properties of @expo/html-elements's [H1](https://github.com/expo/expo/tree/main/packages/html-elements) component. - -### Props - -Heading component is created using H1 component from @expo/html-elements. It extends all the props supported by [Expo HTML Heading Elements](https://www.npmjs.com/package/@expo/html-elements/v/0.0.5), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. - -#### Heading - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - isTruncated - - - - true | false - - - false - - - - - - bold - - - - true | false - - - false - - - - - - underline - - - - true | false - - - false - - - - - - strikeThrough - - - - true | false - - - false - - - - - - sub - - - - true | false - - - false - - - - - - italic - - - - true | false - - - false - - - - - - highlight - - - - true | false - - - false - - - - - - size - - - - - 5xl | 4xl | 3xl | 2xl | xl | lg | md | sm | xs - - - - md - - - -
-
- - -### 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. - -#### Heading Sizes - -Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, and `5xl`, allowing users to customize the size of the heading according to their design requirements. The size attribute determines which HTML tag (`h1` to `h6`) will be rendered. - -- For `5xl`, `4xl`, and `3xl`, it renders `h1`. -- For `2xl`, it renders `h2`. -- For `xl`, it renders `h3`. -- For `lg`, it renders `h4`. -- For `md`, it renders `h5`. -- Finally, for `sm` and `xs`, it renders `h6`. - - - - {sizes.map((size) => ( - {size} - ))} - - ); - }; - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { Wrapper, Center, Heading }, - argsType: {}, - }} - /> - - -The Heading component also accepts some shorthands for basic quick styling. - - - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - bold - - - - boolean - - - false - - - {`Used to make the text bold.`} - - - - - - isTruncated - - - - boolean - - - false - - - {`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`} - - - - - - italic - - - - boolean - - - false - - - {`Used to make the text italic.`} - - - - - - underline - - - - boolean - - - false - - - {`Used underline the text.`} - - - - - - strikeThrough - - - - boolean - - - false - - - {`A horizontal line through the center of the text.`} - - - - - - highlight - - - - boolean - - - false - - - {`Used to highlight the text with a yellow background.`} - - - -
-
-
diff --git a/example/storybook-v7/src/components/Icon/AllIcons.tsx_old b/example/storybook-v7/src/components/Icon/AllIcons.tsx_old deleted file mode 100644 index 795da3b734..0000000000 --- a/example/storybook-v7/src/components/Icon/AllIcons.tsx_old +++ /dev/null @@ -1,258 +0,0 @@ -import React from 'react'; - -import { - AddIcon, - CheckIcon, - CloseIcon, - InfoIcon, - ArrowUpIcon, - ChevronDownIcon, - ChevronUpIcon, - ChevronLeftIcon, - ChevronRightIcon, - ChevronsLeftIcon, - ChevronsRightIcon, - AtSignIcon, - Icon, - VStack, - HStack, - 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, - PlayIcon, - createIcon, -} from '@gluestack-ui/themed'; - -import { ChromeIcon, InstagramIcon, FacebookIcon } from 'lucide-react-native'; -import { Path, Rect, Defs, Stop, LinearGradient } from 'react-native-svg'; - -const AdIcon = createIcon({ - viewBox: '0 0 32 32', - path: ( - <> - - - - - - - - - - - - - - - - - - ), -}); - -const AllIcons = ({ - size, - // @ts-ignore - ..._props -}: any) => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default AllIcons; - -export { - 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, - VStack, - HStack, - Icon, - ChromeIcon, - InstagramIcon, - FacebookIcon, - PlayIcon, -}; diff --git a/example/storybook-v7/src/components/Icon/Icon.stories.tsx b/example/storybook-v7/src/components/Icon/Icon.stories.tsx deleted file mode 100644 index da2e4e83ec..0000000000 --- a/example/storybook-v7/src/components/Icon/Icon.stories.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Icon from './Icon'; - -// BellIcon, // AtSignIcon, // ArrowLeftIcon, // ArrowRightIcon, // ArrowDownIcon, // ArrowUpIcon, // AlertCircleIcon, // AddIcon, // Icon, -// CalendarDaysIcon, -// CheckIcon, -// CheckCircleIcon, -// ChevronUpIcon, -// ChevronDownIcon, -// ChevronLeftIcon, -// ChevronRightIcon, -// ChevronsLeftIcon, -// ChevronsRightIcon, -// ChevronsUpDownIcon, -// CircleIcon, -// ClockIcon, -// CloseIcon, -// CloseCircleIcon, -// CopyIcon, -// DownloadIcon, -// EditIcon, -// EyeIcon, -// EyeOffIcon, -// FavouriteIcon, -// GlobeIcon, -// GripVerticalIcon, -// HelpCircleIcon, -// InfoIcon, -// LinkIcon, -// ExternalLinkIcon, -// LoaderIcon, -// LockIcon, -// MailIcon, -// MenuIcon, -// MessageCircleIcon, -// MoonIcon, -// PaperclipIcon, -// PhoneIcon, -// PlayIcon, -// RemoveIcon, -// RepeatIcon, -// Repeat1Icon, -// SearchIcon, -// SettingsIcon, -// ShareIcon, -// SlashIcon, -// StarIcon, -// SunIcon, -// ThreeDotsIcon, -// TrashIcon, -// UnlockIcon, -// './Icon'; - -const IconMeta: ComponentMeta = { - title: 'stories/Icon', - component: Icon, - metaInfo: { - clusteringOrder: [['as', 'displayName'], 'size'], - componentDescription: - 'Icons are often used to enhance the usability and accessibility of digital products by providing users with clear and intuitive visual cues. It serves as an intuitive and easily recognizable way to communicate with users.', - }, - argTypes: { - size: { - control: 'select', - options: ['xl', 'lg', 'md', 'sm', 'xs', '2xs'], - }, - }, - args: { - size: 'md', - // as: 'AddIcon', - // as: { - // control: 'select', - // options: [ - // // AddIcon, - // // AlertCircleIcon, - // // ArrowUpIcon, - // // ArrowDownIcon, - // // ArrowRightIcon, - // // ArrowLeftIcon, - // // AtSignIcon, - // // BellIcon, - // // CalendarDaysIcon, - // // CheckIcon, - // // CheckCircleIcon, - // // ChevronUpIcon, - // // ChevronDownIcon, - // // ChevronLeftIcon, - // // ChevronRightIcon, - // // ChevronsLeftIcon, - // // ChevronsRightIcon, - // // ChevronsUpDownIcon, - // // CircleIcon, - // // ClockIcon, - // // CloseIcon, - // // CloseCircleIcon, - // // CopyIcon, - // // DownloadIcon, - // // EditIcon, - // // EyeIcon, - // // EyeOffIcon, - // // FavouriteIcon, - // // GlobeIcon, - // // GripVerticalIcon, - // // HelpCircleIcon, - // // InfoIcon, - // // LinkIcon, - // // ExternalLinkIcon, - // // LoaderIcon, - // // LockIcon, - // // MailIcon, - // // MenuIcon, - // // MessageCircleIcon, - // // MoonIcon, - // // PaperclipIcon, - // // PhoneIcon, - // // PlayIcon, - // // RemoveIcon, - // // RepeatIcon, - // // Repeat1Icon, - // // SearchIcon, - // // SettingsIcon, - // // ShareIcon, - // // SlashIcon, - // // StarIcon, - // // SunIcon, - // // ThreeDotsIcon, - // // TrashIcon, - // // UnlockIcon, - // ], - // }, - }, -}; - -export default IconMeta; - -export { Icon }; diff --git a/example/storybook-v7/src/components/Icon/Icon.tsx b/example/storybook-v7/src/components/Icon/Icon.tsx deleted file mode 100644 index 9695bb34f6..0000000000 --- a/example/storybook-v7/src/components/Icon/Icon.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import React from 'react'; -import { - Icon, - AddIcon, - AlertCircleIcon, - ArrowUpIcon, - ArrowDownIcon, - ArrowRightIcon, - ArrowLeftIcon, - AtSignIcon, - BellIcon, - CalendarDaysIcon, - CheckIcon, - CheckCircleIcon, - ChevronUpIcon, - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, - ChevronsLeftIcon, - ChevronsRightIcon, - ChevronsUpDownIcon, - CircleIcon, - ClockIcon, - CloseIcon, - CloseCircleIcon, - CopyIcon, - DownloadIcon, - EditIcon, - EyeIcon, - EyeOffIcon, - FavouriteIcon, - GlobeIcon, - GripVerticalIcon, - HelpCircleIcon, - InfoIcon, - LinkIcon, - ExternalLinkIcon, - LoaderIcon, - LockIcon, - MailIcon, - MenuIcon, - MessageCircleIcon, - MoonIcon, - PaperclipIcon, - PhoneIcon, - PlayIcon, - RemoveIcon, - RepeatIcon, - Repeat1Icon, - SearchIcon, - SettingsIcon, - ShareIcon, - SlashIcon, - StarIcon, - SunIcon, - ThreeDotsIcon, - TrashIcon, - UnlockIcon, - createIcon, -} from '@/components/ui/icon'; -import { HStack } from '@/components/ui/hstack'; -import { VStack } from '@/components/ui/vstack'; - -import { - ChromeIcon, - InstagramIcon, - FacebookIcon, - Camera, -} from 'lucide-react-native'; -const IconBasic = ({ size, ...props }: any) => { - return ; -}; - -IconBasic.description = - 'This is a basic Icon component example. Icons are used to communicate a state that affects a system, feature or page'; - -export default IconBasic; - -export { - 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, - PlayIcon, - Icon, - VStack, - HStack, - ChromeIcon, - InstagramIcon, - FacebookIcon, - createIcon, - Camera, -}; diff --git a/example/storybook-v7/src/components/Icon/index.nw.stories.mdx b/example/storybook-v7/src/components/Icon/index.nw.stories.mdx deleted file mode 100644 index afb182d025..0000000000 --- a/example/storybook-v7/src/components/Icon/index.nw.stories.mdx +++ /dev/null @@ -1,484 +0,0 @@ ---- -title: gluestack-ui Icon Component | Installation, Usage, and API - -description: Icons are often used to enhance the usability and accessibility of digital products by providing users with clear and intuitive visual cues. It serves as an intuitive and easily recognizable way to communicate with users. - -pageTitle: Icon - -pageDescription: Icons are often used to enhance the usability and accessibility of digital products by providing users with clear and intuitive visual cues. It serves as an intuitive and easily recognizable way to communicate with users. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Center, - 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, - PlayIcon, - Icon, - VStack, - HStack, - createIcon, -} from '../../core-components/nativewind'; -import { - ChromeIcon, - InstagramIcon, - FacebookIcon, - Camera, -} from 'lucide-react-native'; - -import { Path, Rect } from 'react-native-svg'; -import { CollapsibleCode } from "@gluestack/design-system" -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - Tabs -} from '@gluestack/design-system'; - -import Wrapper from '../../core-components/nativewind/Wrapper'; - -This is an illustration of **Icon** component. - -<> - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Icon, - CalendarDaysIcon, - }, - argsType: { - size: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl'], - default: 'md', - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add icon - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/icon -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/nativewind/icon/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 { Icon } from '@/components/ui/icon'; -``` - -```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. - -#### Icon - -Pre built icons provided by gluestack-ui inherits all the properties of React Native SVG's [svg](https://github.com/software-mansion/react-native-svg/tree/main/Example) component. - -The Icon components inherits all the properties that third party library provides and can be directly applied as props. - -### Features - -- support of props on any svg icon - -### Accessibility - -We have outlined the various features that ensure the Icon component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -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) and the props mentioned below. - -#### Image - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - size - - - - {'2xs | xs | sm | md | lg | xl'} - - - md - - - -
-
- - -### 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-v7/src/components/Icon/index.themed.stories.mdx b/example/storybook-v7/src/components/Icon/index.themed.stories.mdx deleted file mode 100644 index f2876dafab..0000000000 --- a/example/storybook-v7/src/components/Icon/index.themed.stories.mdx +++ /dev/null @@ -1,478 +0,0 @@ ---- -title: gluestack-ui Icon Component | Installation, Usage, and API - -description: Icons are often used to enhance the usability and accessibility of digital products by providing users with clear and intuitive visual cues. It serves as an intuitive and easily recognizable way to communicate with users. - -pageTitle: Icon - -pageDescription: Icons are often used to enhance the usability and accessibility of digital products by providing users with clear and intuitive visual cues. It serves as an intuitive and easily recognizable way to communicate with users. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - 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, - PlayIcon, - Icon, - VStack, - HStack, - createIcon, -} from '../../core-components/themed'; -import { - ChromeIcon, - InstagramIcon, - FacebookIcon, - Camera -} from 'lucide-react-native' -import { CollapsibleCode } from "@gluestack/design-system"; -import { Path, Rect } from 'react-native-svg'; - -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - Tabs -} from '@gluestack/design-system'; - -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Icon** component. - -<> - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Icon, - CalendarDaysIcon, - }, - argsType: { - size: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl'], - default: 'md', - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add icon - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/icon -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/themed/icon/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 { Icon } from '@/components/ui/icon'; -``` - -```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. - -#### Icon - -Pre built icons provided by gluestack-ui inherits all the properties of React Native SVG's [svg](https://github.com/software-mansion/react-native-svg/tree/main/Example) component. - -The Icon components inherits all the properties that third party library provides and can be directly applied as props. - -### Features - -- support of props on any svg icon - -### Accessibility - -We have outlined the various features that ensure the Icon component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -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. - -#### Image - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - size - - - - {'2xs | xs | sm | md | lg | xl'} - - - md - - - -
-
- - -### 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) diff --git a/example/storybook-v7/src/components/Image/Image.png b/example/storybook-v7/src/components/Image/Image.png deleted file mode 100644 index 4ffbadcde7..0000000000 Binary files a/example/storybook-v7/src/components/Image/Image.png and /dev/null differ diff --git a/example/storybook-v7/src/components/Image/Image.stories.tsx b/example/storybook-v7/src/components/Image/Image.stories.tsx deleted file mode 100644 index 1c09fec6e7..0000000000 --- a/example/storybook-v7/src/components/Image/Image.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Image from './Image'; -// import ImageSizesStory from './ImageSizes'; - -const ImageMeta: ComponentMeta = { - title: 'stories/Image', - component: Image, - // metaInfo is required for figma generation - // @ts-ignore - metaInfo: { - componentDescription: `With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery.`, - }, - argTypes: {}, - args: { - uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80', - }, -}; - -export default ImageMeta; - -export { Image }; - -// export { ImageSizesStory }; diff --git a/example/storybook-v7/src/components/Image/Image.tsx b/example/storybook-v7/src/components/Image/Image.tsx deleted file mode 100644 index 737dab98c2..0000000000 --- a/example/storybook-v7/src/components/Image/Image.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { Image } from '@/components/ui/image'; - -const ImageBasic = ({ - uri = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg', -}: any) => { - return ( - - ); -}; - -ImageBasic.description = 'This is a basic Image component example.'; - -export default ImageBasic; - -export { Image }; diff --git a/example/storybook-v7/src/components/Image/ImageSizes.tsx b/example/storybook-v7/src/components/Image/ImageSizes.tsx deleted file mode 100644 index 9baaaff5cd..0000000000 --- a/example/storybook-v7/src/components/Image/ImageSizes.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Image } from '@/components/ui/image'; -import { VStack } from '@gluestack-ui/themed'; -import React from 'react'; - -const ImageSizes = ({ - uri = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg', - fallbackSource = 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80', - ...props -}: any) => { - return ( - - {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size, index) => ( - - ))} - - ); -}; - -export default ImageSizes; - -export { Image, VStack }; diff --git a/example/storybook-v7/src/components/Image/index.nw.stories.mdx b/example/storybook-v7/src/components/Image/index.nw.stories.mdx deleted file mode 100644 index b5d22e5a62..0000000000 --- a/example/storybook-v7/src/components/Image/index.nw.stories.mdx +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: gluestack-ui Image Component | Installation, Usage, and API - -description: With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery. - -pageTitle: Image - -pageDescription: With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { Image } from '../../core-components/nativewind'; -import { transformedCode } from '../../utils'; -import Wrapper from '../../core-components/nativewind/Wrapper'; - -import { - AppProvider, - CodePreview, - Text, - Table, - TableContainer, - InlineCode, - Tabs -} from '@gluestack/design-system'; -import { CollapsibleCode } from '@gluestack/design-system'; - -This is an illustration of **Image** component. - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Image, - }, - argsType: { - size: { - control: 'select', - options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'], - default: 'md', - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add image - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/image -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/nativewind/image/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 { Image } from '@/components/ui/image'; -``` - -```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. - -#### Image - -It inherits all the properties of React Native's [Image](https://reactnative.dev/docs/image) component. - -### Props - -Image component is created using Image component from react-native. It extends all the props supported by [React Native Image](https://reactnative.dev/docs/image#props). - - diff --git a/example/storybook-v7/src/components/Image/index.themed.stories.mdx b/example/storybook-v7/src/components/Image/index.themed.stories.mdx deleted file mode 100644 index 165dbc2402..0000000000 --- a/example/storybook-v7/src/components/Image/index.themed.stories.mdx +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: gluestack-ui Image Component | Installation, Usage, and API - -description: With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery. - -pageTitle: Image - -pageDescription: With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { Image } from '../../core-components/themed'; -import { transformedCode } from '../../utils'; -import Wrapper from '../../core-components/themed/Wrapper'; - -import { - AppProvider, - CodePreview, - Text, - Table, - TableContainer, - InlineCode, - Tabs -} from '@gluestack/design-system'; -import { CollapsibleCode } from '@gluestack/design-system'; - -This is an illustration of **Image** component. - -<> - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Image, - }, - argsType: { - size: { - control: 'select', - options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'], - default: 'md', - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add image - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/image -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/themed/image/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 { Image } from '@/components/ui/image'; -``` - -```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. - -#### Image - -It inherits all the properties of React Native's [Image](https://reactnative.dev/docs/image) component. - -### Props - -Image component is created using Image component from react-native. It extends all the props supported by [React Native Image](https://reactnative.dev/docs/image#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. - -#### Image - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - size - - - - - {'2xs | xs | sm | md | lg | xl | 2xl | full'} - - - - md - - - -
-
- - - diff --git a/example/storybook-v7/src/components/Input/Input.png b/example/storybook-v7/src/components/Input/Input.png deleted file mode 100644 index 4f533cd1c5..0000000000 Binary files a/example/storybook-v7/src/components/Input/Input.png and /dev/null differ diff --git a/example/storybook-v7/src/components/Input/Input.stories.tsx b/example/storybook-v7/src/components/Input/Input.stories.tsx deleted file mode 100644 index 0fa9899689..0000000000 --- a/example/storybook-v7/src/components/Input/Input.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Input from './Input'; -// import InputIcon from './InputIcon'; - -const InputMeta: ComponentMeta = { - title: 'stories/Input', - component: Input, - // metaInfo is required for figma generation - // @ts-ignore - metaInfo: { - componentDescription: `The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered.`, - }, - argTypes: { - size: { - control: 'select', - options: ['sm', 'md', 'lg', 'xl'], - }, - variant: { - control: 'select', - options: ['outline', 'underlined', 'rounded'], - }, - isInvalid: { - control: 'boolean', - options: [true, false], - }, - isHovered: { - control: 'boolean', - options: [true, false], - }, - isFocused: { - control: 'boolean', - options: [true, false], - }, - isDisabled: { - control: 'boolean', - options: [true, false], - }, - }, - args: { - size: 'sm', - variant: 'outline', - isInvalid: false, - isDisabled: false, - isHovered: false, - isFocused: false, - }, -}; - -export default InputMeta; - -export { Input }; diff --git a/example/storybook-v7/src/components/Input/Input.tsx b/example/storybook-v7/src/components/Input/Input.tsx deleted file mode 100644 index af86797b8c..0000000000 --- a/example/storybook-v7/src/components/Input/Input.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input'; -import { SearchIcon } from '@/components/ui/icon'; - -const InputBasic = ({ ...props }: any) => { - const [value, setValue] = React.useState(''); - - return ( - - { - setValue(e.nativeEvent.text); - }} - value={value} - placeholder="Enter Text here" - /> - - - - - ); -}; - -InputBasic.description = - 'This is a basic Input component example. Inputs are used to capture data from users.'; - -export default InputBasic; diff --git a/example/storybook-v7/src/components/Input/InputIcon.tsx b/example/storybook-v7/src/components/Input/InputIcon.tsx deleted file mode 100644 index 37ed7ab660..0000000000 --- a/example/storybook-v7/src/components/Input/InputIcon.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react'; - -import { - Input, - VStack, - Icon, - SearchIcon, - InputIcon, - InputSlot, - InputField, -} from '@gluestack-ui/themed'; -import { EyeIcon, EyeOffIcon } from 'lucide-react-native'; - -const InputWithIcon = ({ ...props }: any) => { - const [value, setValue] = React.useState(''); - - return ( - - - { - setValue(e.nativeEvent.text); - }} - value={value} - placeholder="Enter Text here" - /> - - - - - - - { - setValue(e.nativeEvent.text); - }} - value={value} - placeholder="Enter Text here" - /> - - - - - - - { - setValue(e.nativeEvent.text); - }} - value={value} - placeholder="Enter Text here" - /> - - - - - - - { - setValue(e.nativeEvent.text); - }} - value={value} - placeholder="Enter Text here" - /> - - - - - - ); -}; - -InputWithIcon.description = - 'This is an example of Input component with icon. Inputs are used to capture data from users.'; - -export default InputWithIcon; - -export { Input, VStack, Icon, SearchIcon, EyeIcon, EyeOffIcon }; diff --git a/example/storybook-v7/src/components/Input/index.nw.stories.mdx b/example/storybook-v7/src/components/Input/index.nw.stories.mdx deleted file mode 100644 index 2d4cf22483..0000000000 --- a/example/storybook-v7/src/components/Input/index.nw.stories.mdx +++ /dev/null @@ -1,632 +0,0 @@ ---- -title: gluestack-ui Input Component | Installation, Usage, and API - -description: The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered. - -pageTitle: Input - -pageDescription: The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Input, - InputField, - InputIcon, - InputSlot, - Button, - ButtonText, - VStack, - Text as GSText, - Center, - Box, - FormControl, - Heading, - Icon, SearchIcon -} from '../../core-components/nativewind'; -import { EyeIcon, EyeOffIcon } from 'lucide-react-native'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, - CollapsibleCode, - Tabs -} from '@gluestack/design-system'; - -import Wrapper from '../../core-components/nativewind/Wrapper'; - -This is an illustration of **Input** component. - -<> - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Input, - InputField, - InputIcon, - }, - argsType: { - variant: { - control: 'select', - options: ['rounded', 'outline', 'underlined'], - default: 'outline', - }, - size: { - control: 'select', - options: ['sm', 'md', 'lg', 'xl'], - default: 'md', - }, - isDisabled: { - control: 'boolean', - default: false, - }, - isInvalid: { - control: 'boolean', - default: false, - }, - isReadOnly: { - control: 'boolean', - default: false, - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add input - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/input -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/nativewind/input/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 { Input } from '@/components/ui/input'; -``` - -```jsx -export default () => ( - - - - {/* Some Icon Component */} - - -); -``` - -### Component Props - -This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. - -#### Input - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - isInvalid - - - - bool - - - false - - - {`When true, the input displays an error state.`} - - - - - - isDisabled - - - - bool - - - false - - - {`When true, the input is disabled and cannot be edited.`} - - - - - - isHovered - - - - bool - - - false - - - {`When true, the input displays a hover state.`} - - - - - - isFocused - - - - bool - - - false - - - {`When true, the input displays a focus state.`} - - - - - - isRequired - - - - bool - - - false - - - {`If true, sets aria-required="true" on the input.`} - - - - - - isReadOnly - - - - bool - - - false - - - {`If true, the input value cannot be edited.`} - - - -
-
- - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _input - - - - {`Prop to style InputField Component`} - - - - - - _icon - - - - {`Prop to style InputIcon Component`} - - - -
-
- - -#### InputField - -Contains all TextInput related layout style props and actions. -It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput#props) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - type - - - - 'text' | 'password' - - - 'text' - - - {`If true, the input component obscures the text entered so that sensitive text like passwords stay secure.`} - - - -
-
- - -#### InputSlot - -It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _icon - - - - {`Prop to style InputIcon Component`} - - - -
-
- - -#### InputIcon - -Contains all Icon related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -### Features - -- Keyboard support for actions. -- Support for hover, focus and active states. -- Option to add your styles or use the default styles. - -### Accessibility - -We have outlined the various features that ensure the Input 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/TR/wai-aria-1.2/#textbox). - -#### Keyboard - -- Setting the `aria-label` and `aria-hint` to help users understand the purpose and function of the Input - -#### Screen Reader - -- Compatible with screen readers such as VoiceOver and Talk-back. -- The `accessible` and `aria-label` props to provide descriptive information about the Input -- Setting `aria-traits` and `aria-hint` to provide contextual information about the various states of the Input, such as "double tap to edit". - -#### Focus Management - -- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation. - -#### States - -- In error state, `aria-invalid` will be passed to indicate that the Input has an error, and providing support for an `aria-errormessage` to describe the error in more detail. -- In disabled state, `aria-hidden` will be passed to make input not focusable. -- In required state, `aria-required` will be passed to indicate that the Input is required. - -### Props - -Input 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. - -#### Input - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - size - - - - xl | lg | md | sm - - - md - - - - - - variant - - - - underlined | outline | rounded - - - outline - - - -
-
- - - -### 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. - -#### Input type password with FormControl - -The Input component integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl component. - - - { - setShowPassword((showState) => { - return !showState; - }); - }; - return ( - - - - Login - - - - Email - - - - - - - - Password - - - - - {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */} - - - - - - - - ); - } - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Wrapper, - Input, - InputField, - InputIcon, - Button, - ButtonText, - VStack, - Text: GSText, - Heading, - Icon, - EyeIcon, - EyeOffIcon, - FormControl, - InputSlot, - }, - argsType: {}, - }} - /> - - -### Input with Icons - -The Input with Icons is a variation of the Input component that displays icons next to input field. It's commonly used in apps for a more visual representation of options and easier navigation. - - - - - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Input, - InputField, - InputIcon, - SearchIcon, - Icon, - InputSlot, - }, - argsType: {}, - }} -/> - - diff --git a/example/storybook-v7/src/components/Input/index.themed.stories.mdx b/example/storybook-v7/src/components/Input/index.themed.stories.mdx deleted file mode 100644 index 67cb1e9e67..0000000000 --- a/example/storybook-v7/src/components/Input/index.themed.stories.mdx +++ /dev/null @@ -1,637 +0,0 @@ ---- -title: gluestack-ui Input Component | Installation, Usage, and API - -description: The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered. - -pageTitle: Input - -pageDescription: The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Input, - InputField, - InputIcon, - InputSlot, - Button, - ButtonText, - VStack, - Text as GSText, - Center, - Box, - FormControl, - Heading, - Icon, - SearchIcon, - EyeIcon, - EyeOffIcon, -} from '../../core-components/themed'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, - CollapsibleCode, - Tabs -} from '@gluestack/design-system'; - -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Input** component. - -<> - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Input, - InputField, - InputIcon, - }, - argsType: { - variant: { - control: 'select', - options: ['rounded', 'outline', 'underlined'], - default: 'outline', - }, - size: { - control: 'select', - options: ['sm', 'md', 'lg', 'xl'], - default: 'md', - }, - isDisabled: { - control: 'boolean', - default: false, - }, - isInvalid: { - control: 'boolean', - default: false, - }, - isReadOnly: { - control: 'boolean', - default: false, - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add input - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/input -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/themed/input/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 { Input } from '@/components/ui/input'; -``` - -```jsx -export default () => ( - - - - {/* Some Icon Component */} - - -); -``` - -### Component Props - -This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. - -#### Input - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - isInvalid - - - - bool - - - false - - - {`When true, the input displays an error state.`} - - - - - - isDisabled - - - - bool - - - false - - - {`When true, the input is disabled and cannot be edited.`} - - - - - - isHovered - - - - bool - - - false - - - {`When true, the input displays a hover state.`} - - - - - - isFocused - - - - bool - - - false - - - {`When true, the input displays a focus state.`} - - - - - - isRequired - - - - bool - - - false - - - {`If true, sets aria-required="true" on the input.`} - - - - - - isReadOnly - - - - bool - - - false - - - {`If true, the input value cannot be edited.`} - - - -
-
- - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _input - - - - {`Prop to style InputField Component`} - - - - - - _icon - - - - {`Prop to style InputIcon Component`} - - - -
-
- - -#### InputField - -Contains all TextInput related layout style props and actions. -It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput#props) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - type - - - - 'text' | 'password' - - - 'text' - - - {`If true, the input component obscures the text entered so that sensitive text like passwords stay secure.`} - - - -
-
- - -#### InputSlot - -It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _icon - - - - {`Prop to style InputIcon Component`} - - - -
-
- - -#### InputIcon - -Contains all Icon related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -### Features - -- Keyboard support for actions. -- Support for hover, focus and active states. -- Option to add your styles or use the default styles. - -### Accessibility - -We have outlined the various features that ensure the Input 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/TR/wai-aria-1.2/#textbox). - -#### Keyboard - -- Setting the `aria-label` and `aria-hint` to help users understand the purpose and function of the Input - -#### Screen Reader - -- Compatible with screen readers such as VoiceOver and Talk-back. -- The `accessible` and `aria-label` props to provide descriptive information about the Input -- Setting `aria-traits` and `aria-hint` to provide contextual information about the various states of the Input, such as "double tap to edit". - -#### Focus Management - -- The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation. - -#### States - -- In error state, `aria-invalid` will be passed to indicate that the Input has an error, and providing support for an `aria-errormessage` to describe the error in more detail. -- In disabled state, `aria-hidden` will be passed to make input not focusable. -- In required state, `aria-required` will be passed to indicate that the Input is required. - -### Props - -Input 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. - -#### Input - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - size - - - - xl | lg | md | sm - - - md - - - - - - variant - - - - underlined | outline | rounded - - - outline - - - -
-
- - -### 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. - -#### Input type password with FormControl - -The Input component integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl component. - - - { - setShowPassword((showState) => { - return !showState; - }); - }; - return ( - - - - Login - - - - Email - - - - - - - - Password - - - - - {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */} - - - - - - - - ); - } - `, - transformCode: (code) => { - return transformedCode(code, 'function', 'App'); - }, - scope: { - Wrapper, - Input, - InputField, - InputIcon, - Button, - ButtonText, - VStack, - Text: GSText, - Heading, - Icon, - EyeIcon, - EyeOffIcon, - FormControl, - InputSlot, - }, - argsType: {}, - }} - /> - - -### Input with Icons - -The Input with Icons is a variation of the Input component that displays icons next to input field. It's commonly used in apps for a more visual representation of options and easier navigation. - - - - - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Input, - InputField, - InputIcon, - SearchIcon, - Icon, - InputSlot, - }, - argsType: {}, - }} -/> - - diff --git a/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.stories.tsx b/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.stories.tsx deleted file mode 100644 index 259e7d0c57..0000000000 --- a/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.stories.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import InputAccessoryViewStory from './InputAccessoryView'; - -const InputAccessoryViewMeta: ComponentMeta = { - title: 'stories/InputAccessoryView', - component: InputAccessoryViewStory, -}; - -export default InputAccessoryViewMeta; - -// export { InputAccessoryView }; diff --git a/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.tsx b/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.tsx deleted file mode 100644 index ffbf3bfd27..0000000000 --- a/example/storybook-v7/src/components/InputAcessoryView/InputAccessoryView.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { - ScrollView, - Button, - ButtonText, - Center, - Input, -} from '@gluestack-ui/themed'; -import { InputAccessoryView } from '@/components/ui/input-accessory-view'; -import { config } from '@gluestack-ui/config'; -import React, { useState } from 'react'; - -export default function SafeAreaViewStory() { - const inputAccessoryViewID = 'uniqueID'; - const initialText = ''; - const [text, setText] = useState(initialText); - return ( -
- - - - - - -
- ); -} - -export { - VStack, - Center, - Heading, - GluestackUIProvider, - SafeAreaView, - Text, -} from '@gluestack-ui/themed'; - -export { config }; diff --git a/example/storybook-v7/src/components/InputAcessoryView/index.stories.mdx b/example/storybook-v7/src/components/InputAcessoryView/index.stories.mdx deleted file mode 100644 index 757ad52485..0000000000 --- a/example/storybook-v7/src/components/InputAcessoryView/index.stories.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: InputAccessoryView | gluestack-ui - -description: A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars. ---- - -import { Meta } from '@storybook/addon-docs'; - - - -# InputAccessoryView - -Following is the default implementation of the **InputAccessoryView** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. - -> Note: InputAccessoryView component is only applicable to iOS devices with iOS version 11 or later. - - diff --git a/example/storybook-v7/src/components/Textarea/index.themed.stories.mdx b/example/storybook-v7/src/components/Textarea/index.themed.stories.mdx deleted file mode 100644 index 1ecba59d6e..0000000000 --- a/example/storybook-v7/src/components/Textarea/index.themed.stories.mdx +++ /dev/null @@ -1,432 +0,0 @@ ---- -title: gluestack-ui Textarea Component | Installation, Usage, and API - -description: The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs. - -pageTitle: Textarea - -pageDescription: The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - FormControl, - FormControlError, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - Textarea, - TextareaInput, -} from '../../core-components/themed'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - Tabs, - CollapsibleCode -} from '@gluestack/design-system'; - -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Textarea** component. - -<> - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Textarea, - TextareaInput, - }, - argsType: { - size: { - control: 'select', - options: ['sm', 'md', 'lg', 'xl'], - default: 'md', - }, - isReadOnly: { - control: 'boolean', - options: [true, false], - default: false, - }, - isInvalid: { - control: 'boolean', - options: [true, false], - default: false, - }, - isDisabled: { - control: 'boolean', - options: [true, false], - default: false, - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add textarea - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/textarea -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/themed/textarea/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 { Textarea } from '@/components/ui/textarea'; -``` - -```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. - -#### Textarea - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - size - - - - 'sm' | 'md' | 'lg' | 'xl' - - - 'md' - - - {`Changes the size of the Input Text`} - - - - - - isInvalid - - - - bool - - - false - - - {`When true, the input displays an error state.`} - - - - - - isDisabled - - - - bool - - - false - - - {`When true, the input is disabled and cannot be edited.`} - - - - - - isHovered - - - - bool - - - false - - - {`When true, the input displays a hover state.`} - - - - - - isFocused - - - - bool - - - false - - - {`When true, the input displays a focus state.`} - - - - - - isRequired - - - - bool - - - false - - - {`If true, sets aria-required="true" on the input.`} - - - - - - isReadOnly - - - - bool - - - false - - - {`If true, the input value cannot be edited.`} - - - -
-
- - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _input - - - - {`Prop to style TextareaInput Component`} - - - -
-
- - -#### TextareaInput - -Contains all TextInput related layout style props and actions. -It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput) component. - -### Accessibility - -We have outlined the various features that ensure the Textarea component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -#### Keyboard - -- setting the aria-label and aria-hint - -#### Screen Reader - -- VoiceOver: accessible and aria-label props to describe the input's purpose -- `aria-traits` and `aria-hint` for the various states of the input, such as "double tap to edit" - -### 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 - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - size - - - - xl | lg | md | sm - - - md - - - -
-
- - -### 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. - -#### FormControl - -The Textarea Component can be incorporated within the FormControl. - - - - - - Write with me - - - - - - Start your story - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Textarea, - TextareaInput, - FormControl, - FormControlError, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - }, - argsType: {}, - }} - /> - diff --git a/example/storybook-v7/src/components/Toast/Basic.tsx b/example/storybook-v7/src/components/Toast/Basic.tsx deleted file mode 100644 index c90c0ea555..0000000000 --- a/example/storybook-v7/src/components/Toast/Basic.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { - Button, - ButtonText, - Toast, - ToastTitle, - useToast, -} from '@gluestack-ui/themed'; - -const ToastPlacement = ({ placement = 'top', ...props }: any) => { - const toast = useToast(); - return ( - - ); -}; - -ToastPlacement.description = - 'This is a basic Toast component example. Toasts are used to communicate a state that affects a system, feature or page'; - -export default ToastPlacement; diff --git a/example/storybook-v7/src/components/Toast/DuplicateToastPrevent.tsx b/example/storybook-v7/src/components/Toast/DuplicateToastPrevent.tsx deleted file mode 100644 index 8198e883f1..0000000000 --- a/example/storybook-v7/src/components/Toast/DuplicateToastPrevent.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { - Button, - ButtonText, - Toast, - ToastTitle, - useToast, -} from '@gluestack-ui/themed'; - -const ToastDuplicatePrevent = ({ placement = 'top', ...props }: any) => { - const toast = useToast(); - const idTest = 'test-id'; - return ( - - ); -}; - -ToastDuplicatePrevent.description = - 'This is an example for preventing duplicate toasts. Toasts are used to communicate a state that affects a system, feature or page'; - -export default ToastDuplicatePrevent; diff --git a/example/storybook-v7/src/components/Toast/Toast.png b/example/storybook-v7/src/components/Toast/Toast.png deleted file mode 100644 index 4c1b60b5af..0000000000 Binary files a/example/storybook-v7/src/components/Toast/Toast.png and /dev/null differ diff --git a/example/storybook-v7/src/components/Toast/Toast.stories.tsx b/example/storybook-v7/src/components/Toast/Toast.stories.tsx deleted file mode 100644 index d63a3a94c9..0000000000 --- a/example/storybook-v7/src/components/Toast/Toast.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Toast from './Toast'; -import DuplicateToastPrevent from './DuplicateToastPrevent'; - -const ToastMeta: ComponentMeta = { - title: 'stories/Toast', - component: Toast, - // metaInfo is required for figma generation - // @ts-ignore - metaInfo: { - componentDescription: `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.`, - }, - argTypes: { - placement: { - control: 'select', - figmaIgnore: true, - options: [ - 'top', - 'top right', - 'top left', - 'bottom', - 'bottom left', - 'bottom right', - ], - }, - action: { - control: 'select', - options: ['error', 'warning', 'success', 'info', 'attention'], - }, - variant: { - control: 'select', - options: ['solid', 'outline', 'accent'], - }, - }, - args: { - placement: 'bottom', - action: 'attention', - variant: 'solid', - }, -}; - -export default ToastMeta; - -export { Toast, DuplicateToastPrevent }; diff --git a/example/storybook-v7/src/components/Toast/Toast.tsx b/example/storybook-v7/src/components/Toast/Toast.tsx deleted file mode 100644 index afe2148ee6..0000000000 --- a/example/storybook-v7/src/components/Toast/Toast.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import { - Icon, - CloseIcon, - VStack, - CheckIcon, - Pressable, - Center, -} from '@gluestack-ui/themed'; -import { - Toast, - ToastTitle, - ToastDescription, - useToast, -} from '@/components/ui/toast'; -import { Button, ButtonText } from '@/components/ui/button'; -import { MessageCircle, AlertTriangleIcon } from 'lucide-react-native'; - -const ToastFigmaStory = ({ _placement = 'top', _colorMode, ...props }: any) => { - return ( - - - Hello World Toast - - Please create a support ticket from the support page - - - - - - - ); -}; - -const ToastBasic = ({ placement = 'top', ...props }: any) => { - const toast = useToast(); - return ( - - ); -}; - -ToastBasic.description = - 'This is a basic Toast component example. Toasts are used to communicate a state that affects a system, feature or page'; - -export default ToastBasic; - -export { - ToastFigmaStory, - Toast, - ToastTitle, - ToastDescription, - useToast, - Icon, - CloseIcon, - VStack, - CheckIcon, - MessageCircle, - AlertTriangleIcon, - Button, - ButtonText, - Pressable, - Center, -}; diff --git a/example/storybook-v7/src/components/Toast/index.nw.stories.mdx b/example/storybook-v7/src/components/Toast/index.nw.stories.mdx deleted file mode 100644 index a6c7925a74..0000000000 --- a/example/storybook-v7/src/components/Toast/index.nw.stories.mdx +++ /dev/null @@ -1,825 +0,0 @@ ---- -title: gluestack-ui Toast Component | 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. - -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 ---- - -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, - Tabs, -} 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 - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add toast - ``` - - - -<> - -### 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.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: {}, - }} - /> - diff --git a/example/storybook-v7/src/components/Toast/index.themed.stories.mdx b/example/storybook-v7/src/components/Toast/index.themed.stories.mdx deleted file mode 100644 index 8fb7551cb2..0000000000 --- a/example/storybook-v7/src/components/Toast/index.themed.stories.mdx +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: gluestack-ui Toast Component | 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. - -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 ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Toast, - ToastTitle, - ToastDescription, - useToast, - Button, - ButtonText, - Text -} from '../../core-components/themed'; -import { CheckIcon } from '@gluestack-ui/themed'; -import { AlertTriangleIcon,MessageCircle } from 'lucide-react-native'; -import { - Icon, - CloseIcon, - VStack, - Pressable, - Center -} from '../../core-components/themed'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - CollapsibleCode, - Tabs -} from '@gluestack/design-system'; -import { View } from 'react-native'; -import Wrapper from '../../core-components/themed/Wrapper'; - -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add toast - ``` - - - -<> - -### 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/themed/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. - - - -
-
- - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _icon - - - - {`Prop to style Icon Component`} - - - - - - _title - - - - {`Prop to style AlertTitle Component`} - - - - - - _description - - - - {`Prop to style AlertDescription Component`} - - - -
-
- - -#### 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), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. - -#### Toast - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - action - - - - - error | warning | success | info | attention - - - - attention - - - - - - variant - - - - solid | outline | accent - - - solid - - - -
-
- - - \ No newline at end of file diff --git a/example/storybook-v7/src/components/Tooltip/Tooltip.png b/example/storybook-v7/src/components/Tooltip/Tooltip.png deleted file mode 100644 index 97177c41a4..0000000000 Binary files a/example/storybook-v7/src/components/Tooltip/Tooltip.png and /dev/null differ diff --git a/example/storybook-v7/src/components/Tooltip/Tooltip.stories.tsx b/example/storybook-v7/src/components/Tooltip/Tooltip.stories.tsx deleted file mode 100644 index 084b78ca91..0000000000 --- a/example/storybook-v7/src/components/Tooltip/Tooltip.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import Tooltip from './Tooltip'; - -const TooltipMeta: ComponentMeta = { - title: 'stories/Tooltip', - component: Tooltip, - // metaInfo is required for figma generation - // @ts-ignore - metaInfo: { - componentDescription: `Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way.`, - }, - argTypes: { - placement: { - control: 'select', - figmaIgnore: true, - options: [ - 'bottom', - 'bottom left', - 'bottom right', - 'top', - 'top left', - 'top right', - 'left', - 'left top', - 'left bottom', - 'right', - 'right top', - 'right bottom', - ], - }, - showTooltip: { - control: 'boolean', - figmaIgnore: true, - options: [true, false], - }, - }, - args: { - text: 'Hello world', - placement: 'bottom', - showTooltip: true, - }, -}; - -export default TooltipMeta; - -export { Tooltip }; diff --git a/example/storybook-v7/src/components/Tooltip/Tooltip.tsx b/example/storybook-v7/src/components/Tooltip/Tooltip.tsx deleted file mode 100644 index dee82fdb80..0000000000 --- a/example/storybook-v7/src/components/Tooltip/Tooltip.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { Tooltip, TooltipContent, TooltipText } from '@/components/ui/tooltip'; -import { Button, ButtonText } from '@/components/ui/button'; -import { Edit, Command } from 'lucide-react-native'; - -const TooltipBasic = ({ - showTooltip: showTooltipProp = true, - placement = 'bottom', - text = 'Hello world', -}: any) => { - 2; - return ( - { - return ( - - ); - }} - > - - {text} - - - ); -}; - -TooltipBasic.description = - 'This is a basic Tooltip component example. A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.'; - -export default TooltipBasic; - -export { - TooltipBasic, - Tooltip, - TooltipContent, - TooltipText, - Button, - ButtonText, - Edit, - Command, -}; diff --git a/example/storybook-v7/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-v7/src/components/Tooltip/index.nw.stories.mdx deleted file mode 100644 index 6916f6d86b..0000000000 --- a/example/storybook-v7/src/components/Tooltip/index.nw.stories.mdx +++ /dev/null @@ -1,645 +0,0 @@ ---- -title: Tooltip | gluestack-ui | Installation, Usage, and API - -description: Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way. - -pageTitle: Tooltip - -pageDescription: Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Tooltip, - TooltipContent, - TooltipText, - Button, - ButtonText, - Avatar, - AvatarGroup, - AvatarFallbackText, - HStack, - Box, - Heading, - EditIcon, - Center, - VStack, - Icon -} from '../../core-components/nativewind'; - -import { transformedCode } from '../../utils'; - -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, - CollapsibleCode, - Tabs -} from '@gluestack/design-system'; - -import Wrapper from '../../core-components/nativewind/Wrapper'; - -import { Command } from 'lucide-react-native'; - -This is an illustration of **Tooltip** component. - -<> - { - return ( - - ); - }} - > - - Tooltip - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Tooltip, - TooltipContent, - TooltipText, - Center, - Button, - ButtonText, - }, - argsType: { - placement: { - control: 'select', - options: [ - 'top left', - 'top', - 'top right', - 'left top', - 'left', - 'left bottom', - 'bottom left', - 'bottom', - 'bottom right', - 'right top', - 'right', - 'right bottom', - ], - default: 'top', - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add tooltip - ``` - - - -<> - -### Step 1: Install the following dependencies: - -```bash -npm i @gluestack-ui/tooltip @legendapp/motion -``` -> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper. - -### Step 2: Copy and paste the following code into your project. - - - -```jsx -%%-- File: core-components/nativewind/tooltip/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 { Tooltip } from '@/components/ui/tooltip'; -``` - -```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. - -#### Tooltip - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - isOpen - - - - boolean - - - false - - - {`Whether the tooltip is opened. Useful for controlling the open state.`} - - - - - - isDisabled - - - - boolean - - - false - - - {`Whether the tooltip is disabled.`} - - - - - - defaultIsOpen - - - - boolean - - - false - - - {`If true, the popover will be opened by default.`} - - - - - - onOpen - - - - {'() => void'} - - - true - - - {`This function will be invoked when the tooltip is opened.`} - - - - - - onClose - - - - {'() => void'} - - - - - - - {`This function will be invoked when tooltip is closed. It will also be called when the user attempts to close the tooltip via Escape key or backdrop press.`} - - - - - - openDelay - - - - {'number'} - - - 0 - - - {`Duration in ms to wait till displaying the tooltip.`} - - - - - - closeDelay - - - - {'number'} - - - 0 - - - {`Duration in ms to wait till hiding the tooltip.`} - - - - - - placement - - - - {`"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"`} - - - bottom left - - - {`Tooltip placement`} - - - - - - children - - - - any - - - - - - - - The content to display inside the tooltip. - - - - - - - closeOnClick - - - - boolean - - - true - - - - Whether tooltip should be closed on Trigger click. - - - - - - - trigger - - - - {`() => any`} - - - - - - - {`Function that returns a React Element. This element will be used as a Trigger for the tooltip.`} - - - - - - offset - - - - number - - - 10 - - - - Distance between the trigger and the tooltip. - - - - - - - crossOffset - - - - number - - - - - - - - The additional offset applied along the cross axis between the - element and its trigger element. - - - - - - - shouldOverlapWithTrigger - - - - boolean - - - false - - - - Determines whether tooltip content should overlap with the - trigger. - - - - - - - shouldFlip - - - - boolean - - - true - - - - Whether the element should flip its orientation (e.g. top to - bottom or left to right) when there is insufficient room for it to - render completely. - - - - - - - closeOnOverlayClick - - - - boolean - - - true - - - {`Closes tooltip when clicked outside.`} - - - -
-
- - -#### TooltipText - -Contains all text related layout style props and actions. It inherits all the properties of React Native's Text component. - -#### TooltipContent - -Contains all backdrop related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -### Accessibility - -We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [ WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). - -### 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 -
-
-
-
- - Sandeep Srivastva - - - Arjun Kapoor - - - Ritik Sharma - -
-
- ); - } - `, - 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, - EditIcon, - Command, - Icon, - }, - argsType: {}, - }} - /> - - - - - - diff --git a/example/storybook-v7/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-v7/src/components/Tooltip/index.themed.stories.mdx deleted file mode 100644 index e0edfdf0be..0000000000 --- a/example/storybook-v7/src/components/Tooltip/index.themed.stories.mdx +++ /dev/null @@ -1,674 +0,0 @@ ---- -title: gluestack-ui Tooltip Component | Installation, Usage, and API - -description: Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way. - -pageTitle: Tooltip - -pageDescription: Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Tooltip, - TooltipContent, - TooltipText, - Button, - ButtonText, - Avatar, - AvatarGroup, - AvatarFallbackText, - HStack, - Box, - Heading, - Center, - VStack, - Command, - Icon, - Text -} from '../../core-components/themed'; -import { Edit } from 'lucide-react-native' -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - CollapsibleCode, - Tabs -} from '@gluestack/design-system'; -import { Command } from "lucide-react-native"; -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Tooltip** component. - - - { - return ( - - ); - }} - > - - Tooltip - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Tooltip, - TooltipContent, - TooltipText, - Center, - Button, - ButtonText, - }, - argsType: { - placement: { - control: 'select', - options: [ - 'top left', - 'top', - 'top right', - 'left top', - 'left', - 'left bottom', - 'bottom left', - 'bottom', - 'bottom right', - 'right top', - 'right', - 'right bottom', - ], - default: 'top', - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add tooltip - ``` - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i @gluestack-ui/tooltip -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/themed/tooltip/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 { Tooltip } from '@/components/ui/tooltip'; -``` - -```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. - -#### Tooltip - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - isOpen - - - - boolean - - - false - - - {`Whether the tooltip is opened. Useful for controlling the open state.`} - - - - - - isDisabled - - - - boolean - - - false - - - {`Whether the tooltip is disabled.`} - - - - - - defaultIsOpen - - - - boolean - - - false - - - {`If true, the popover will be opened by default.`} - - - - - - onOpen - - - - {'() => void'} - - - true - - - {`This function will be invoked when the tooltip is opened.`} - - - - - - onClose - - - - {'() => void'} - - - - - - - {`This function will be invoked when tooltip is closed. It will also be called when the user attempts to close the tooltip via Escape key or backdrop press.`} - - - - - - openDelay - - - - {'number'} - - - 0 - - - {`Duration in ms to wait till displaying the tooltip.`} - - - - - - closeDelay - - - - {'number'} - - - 0 - - - {`Duration in ms to wait till hiding the tooltip.`} - - - - - - placement - - - - {`"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"`} - - - bottom left - - - {`Tooltip placement`} - - - - - - children - - - - any - - - - - - - - The content to display inside the tooltip. - - - - - - - closeOnClick - - - - boolean - - - true - - - - Whether tooltip should be closed on Trigger click. - - - - - - - trigger - - - - {`() => any`} - - - - - - - {`Function that returns a React Element. This element will be used as a Trigger for the tooltip.`} - - - - - - offset - - - - number - - - 10 - - - - Distance between the trigger and the tooltip. - - - - - - - crossOffset - - - - number - - - - - - - - The additional offset applied along the cross axis between the - element and its trigger element. - - - - - - - shouldOverlapWithTrigger - - - - boolean - - - false - - - - Determines whether tooltip content should overlap with the - trigger. - - - - - - - shouldFlip - - - - boolean - - - true - - - - Whether the element should flip its orientation (e.g. top to - bottom or left to right) when there is insufficient room for it to - render completely. - - - - - - - closeOnOverlayClick - - - - boolean - - - true - - - {`Closes tooltip when clicked outside.`} - - - -
-
- - -#### TooltipText - -Contains all text related layout style props and actions. It inherits all the properties of React Native's Text component. - -#### TooltipContent - -Contains all backdrop related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _text - - - - {`Prop to style TooltipText Component`} - - - -
- -
- - -### Accessibility - -We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [ WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). - -### 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: {}, - }} - /> - diff --git a/example/storybook-v7/src/components/VStack/VStack.png b/example/storybook-v7/src/components/VStack/VStack.png deleted file mode 100644 index 8c4b489145..0000000000 Binary files a/example/storybook-v7/src/components/VStack/VStack.png and /dev/null differ diff --git a/example/storybook-v7/src/components/VStack/VStack.stories.tsx b/example/storybook-v7/src/components/VStack/VStack.stories.tsx deleted file mode 100644 index 849635c8e1..0000000000 --- a/example/storybook-v7/src/components/VStack/VStack.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import VStack from './VStack'; -// import VStackReversedExample from './VStackReversed'; - -const VStackMeta: ComponentMeta = { - title: 'stories/VStack', - component: VStack, - argTypes: { - space: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl'], - }, - reversed: { - control: 'boolean', - }, - }, - args: { - space: 'md', - reversed: false, - }, -}; - -export default VStackMeta; - -export { VStack }; -// export { VStackReversedExample }; diff --git a/example/storybook-v7/src/components/VStack/VStack.tsx b/example/storybook-v7/src/components/VStack/VStack.tsx deleted file mode 100644 index 3195a3f5b9..0000000000 --- a/example/storybook-v7/src/components/VStack/VStack.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; - -import { Box } from '@gluestack-ui/themed'; -import { VStack } from '@/components/ui/vstack'; - -const VStackBasic = ({ space, reversed, ...props }: any) => { - return ( - - - - - - - ); -}; - -VStackBasic.description = - 'This is a basic VStack component example. VStack is a primitive component to layout its children vertically.'; - -export default VStackBasic; - -export { Box, VStack }; diff --git a/example/storybook-v7/src/components/VStack/VStackReversed.tsx b/example/storybook-v7/src/components/VStack/VStackReversed.tsx deleted file mode 100644 index 92be66edac..0000000000 --- a/example/storybook-v7/src/components/VStack/VStackReversed.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Box } from '@gluestack-ui/themed'; - -import { VStack } from '@gluestack-ui/themed'; - -const VStackReversed = ({ space, ...props }) => { - return ( - - - - - - - ); -}; - -export default VStackReversed; diff --git a/example/storybook-v7/src/components/VStack/index.nw.stories.mdx b/example/storybook-v7/src/components/VStack/index.nw.stories.mdx deleted file mode 100644 index 63dc29d196..0000000000 --- a/example/storybook-v7/src/components/VStack/index.nw.stories.mdx +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: gluestack-ui VStack Component | Installation, Usage, and API - -description: VStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for VStack to achieve the same layout. - -pageTitle: VStack - -pageDescription: VStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for VStack to achieve the same layout. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - AppProvider, - CodePreview, - Table, - TableContainer, - Text, - InlineCode, - Tabs -} from '@gluestack/design-system'; -import { Box, VStack } from '../../core-components/nativewind'; -import { transformedCode } from '../../utils'; -import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; - -This is an illustration of **VStack** component. - - - - - - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - VStack, - Box, - }, - argsType: { - space: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'], - default: 'md', - }, - reversed: { - control: 'boolean', - options: [true, false], - default: false, - }, - }, - } -} -/> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add vstack - ``` - - - -<> - -### Step 1: Copy and paste the following code into index.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/vstack/index.tsx --%% -``` - - -> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** - -### Step 2(optional): Copy and paste the following code into index.web.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/vstack/index.web.tsx --%% -``` - - -### Step 3: Copy and paste the following code into styles.tsx in your project. - - -```jsx -%%-- File: core-components/nativewind/vstack/styles.tsx --%% -``` - - -### Step 4: 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 { VStack } from '@/components/ui/vstack'; -``` - -```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. - -#### VStack - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -### Accessibility - -The accessibility of a VStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a VStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers. - -In essence, the VStack acts as a container that inherits and propagates the accessibility attributes of its child views. - -### Props - -VStack 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. - -#### VStack - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - space - - - - string - - - - - - - {`It sets the space between children. By default there is no space between the VStack items.`} - - - - - - reversed - - - - boolean - - - false - - - {`When true, it places the VStack items in reverse direction.`} - - - -
-
- - -### 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. - -#### VStack Reversed - -A VStack component with the reversed prop reverses the order of vertically stacked elements, enabling customized vertical layouts and visual arrangements of content within a user interface. - - - - - - -
- `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { Box, Wrapper, VStack }, - argsType: {}, - }} - /> - diff --git a/example/storybook-v7/src/components/VStack/index.themed.stories.mdx b/example/storybook-v7/src/components/VStack/index.themed.stories.mdx deleted file mode 100644 index 7968790463..0000000000 --- a/example/storybook-v7/src/components/VStack/index.themed.stories.mdx +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: gluestack-ui VStack Component | Installation, Usage, and API - -description: VStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for VStack to achieve the same layout. - -pageTitle: VStack - -pageDescription: VStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for VStack to achieve the same layout. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { Box, VStack, Text } from '../../core-components/themed'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - CollapsibleCode, - Tabs -} from '@gluestack/design-system'; -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **VStack** component. - -<> - - - - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - VStack, - Box, - }, - argsType: { - space: { - control: 'select', - options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'], - default: 'md', - }, - reversed: { - control: 'boolean', - options: [true, false], - default: false, - }, - }, - }} - /> - - -
- -## Installation - - - - - CLI - - - Manual - - - - -<> - -### Run the following command: - ```bash - npx gluestack-ui add vstack - ``` - - - -<> - -### Step 1: Copy and paste the following code into your project. - - -```jsx -%%-- File: core-components/themed/vstack/index.tsx --%% -``` - - -### Step 2: 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 { VStack } from '@/components/ui/vstack'; -``` - -```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. - -#### VStack - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -### Accessibility - -The accessibility of a VStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a VStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers. - -In essence, the VStack acts as a container that inherits and propagates the accessibility attributes of its child views. - -### Props - -VStack 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. - -#### VStack - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - space - - - - string - - - - - - - {`It sets the space between children.`} - - - - - - reversed - - - - boolean - - - - - - - {`When true, it places the VStack items in reverse direction.`} - - - -
-
- - -### 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. - -#### VStack Reversed - -A VStack component with the reversed prop reverses the order of vertically stacked elements, enabling customized vertical layouts and visual arrangements of content within a user interface. - - - - - - -
- `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { Box, Wrapper, VStack }, - argsType: {}, - }} - /> - diff --git a/example/storybook-v7/src/components/View/View.stories.tsx b/example/storybook-v7/src/components/View/View.stories.tsx deleted file mode 100644 index 3d129440ca..0000000000 --- a/example/storybook-v7/src/components/View/View.stories.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import type { ComponentMeta } from '@storybook/react-native'; -import View from './View'; - -const ViewMeta: ComponentMeta = { - title: 'stories/View', - component: View, -}; - -export default ViewMeta; - -export { View }; diff --git a/example/storybook-v7/src/components/View/View.tsx b/example/storybook-v7/src/components/View/View.tsx deleted file mode 100644 index e14de4632c..0000000000 --- a/example/storybook-v7/src/components/View/View.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { View, Center, Heading, Text } from '@gluestack-ui/themed'; -import React from 'react'; - -export default function ViewStory() { - return ( -
- - - A component library for the{' '} - React Ecosystem - - - gluestack-ui is a simple, modular and accessible component library - that gives you building blocks to build you React applications. - - -
- ); -} - -export { View, Center, Heading, Text }; diff --git a/example/storybook-v7/src/components/View/index.stories.mdx b/example/storybook-v7/src/components/View/index.stories.mdx deleted file mode 100644 index d9fbdcc202..0000000000 --- a/example/storybook-v7/src/components/View/index.stories.mdx +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: View | gluestack-ui -description: View is the most fundamental component for building a UI. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { transformedCode } from '../../utils'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, -} from '@gluestack/design-system'; -import { View } from '../../core-components/themed'; -import { Text, Heading } from '@gluestack-ui/themed'; -import Wrapper from '../../core-components/themed/Wrapper'; - - - -# View - -The most fundamental component for building a UI. - -<> - - - A component library for the{" "} - React Ecosystem - - - gluestack-ui is a simple, modular and accessible component library that - gives you building blocks to build you React applications. - - -`, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - Text, - Heading, - View, - }, - }} - /> - - -
- -> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/View/styled-components) to learn about default styling of StatusBar component - -### Import - -To use this component in your project, include the following import statement in your file. - -```bash -import { View } from '@gluestack-ui/themed'; -``` - -### Anatomy - -The structure provided below can help you identify and understand a badge component's various parts. - -```jsx -export default () => ; -``` - -### Props - -gluestack-ui View 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](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. - -#### View - -<> - - - - - - Name - - - Value - - - Default - - - - - - - - children - - - - any - - - - - - - -
-
- diff --git a/example/storybook-v7/src/components/docs-components/DefaultComponent.tsx b/example/storybook-v7/src/components/docs-components/DefaultComponent.tsx deleted file mode 100644 index 16684b96c9..0000000000 --- a/example/storybook-v7/src/components/docs-components/DefaultComponent.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useContext, Fragment, useMemo } from 'react'; -import tailwindConfig from 'tailwind.config'; -import { GluestackUIProvider } from '../../core-components/nativewind/gluestack-ui-provider'; -import { config } from '../../core-components/nativewind/gluestack-ui-provider/config'; -import { - VStack, - HStack, - Box, - Text, - Heading, -} from '../../core-components/nativewind'; -import { LayoutContext } from '@gluestack/design-system'; - -const ColorPaletteComponent = () => { - const { colorMode } = useContext(LayoutContext); - - const colorPalette = useMemo(() => { - const sourceObject = tailwindConfig!.theme!.extend!.colors; // get the source object to loop - const paletteData: { - name: string; - variants: { - name: string; - variant: string; - color: string; - className: string; - }; - }[] = []; // result array to push data into - - for (const [name, colors] of Object.entries(sourceObject)) { - // object.entries gives us the key value pair of the object and makes it iterable. {primary: [{0: '#fff'}]} where primary is the key (name) and the value is an object with the color variants (colors) - - const variants: { - name: string; - variant: string; - color: string; - className: string; - }[] = []; - - for (const [variant, color] of Object.entries(colors)) { - // loop over all the variants of the color i.e. the {0: '#fff'} object in the same way as the above loop - const variableName = extractVariableName(color); // extract the --color-name part from the var(---color-name) string using regex, it will return null if we pass it a hex code - const colorName = variableName || color; // variableName will be null in case there was a hex code passed to the extract function - - const colorCode = - colorMode === 'light' - ? config.light[colorName] - : config.dark[colorName]; // get the color code from the config based on the color name and the color mode - - const className = `bg-${name}-${variant}`; // need to save the class name for the color to use in the UI - - variants.push({ - name, - variant, - color: colorCode || color, - className, - }); // push the data into the result array - } - - paletteData.push({ name, variants }); // push the data into the result array - } - - return paletteData; // return the result array - }, [colorMode]); - - function extractVariableName(text: string): string | null { - const pattern = /\bvar\((.*?)\)/g; - const match = pattern.exec(text); - return match?.[1] ?? null; - } - - return ( - - - {colorPalette.map(({ name }, i) => ( - - - {name} - - - {colorPalette[i].variants.map((variant, j) => ( - - - - {variant.variant} - {variant.color} - - - ))} - - - ))} - - - ); -}; - -export { ColorPaletteComponent }; diff --git a/example/storybook-v7/src/components/docs-components/DefaultComponentThemed.tsx b/example/storybook-v7/src/components/docs-components/DefaultComponentThemed.tsx deleted file mode 100644 index a58a3c0554..0000000000 --- a/example/storybook-v7/src/components/docs-components/DefaultComponentThemed.tsx +++ /dev/null @@ -1,471 +0,0 @@ -import React, { - Fragment, - useContext, - useState, - useEffect, - useMemo, -} from 'react'; -import { - Text, - VStack, - HStack, - Box, - GluestackUIProvider, - Divider, - Tooltip, - TooltipContent, - TooltipText, - Pressable, -} from '@gluestack-ui/themed'; -import { config } from '../../core-components/themed/gluestack-ui-provider/config'; -import { LayoutContext } from '@gluestack/design-system'; - -const ColorPaletteComponent = () => { - const { colorMode } = useContext(LayoutContext); - const [colors, setColors] = useState([]); - - useEffect(() => { - if (!colorMode) return; - if (colorMode === 'light') { - setColors(config.tokens.colors); - } else { - setColors(config.themes[colorMode].colors); - } - }, [colorMode]); - - const sortedPalette = useMemo(() => { - const colorPalette: any = { - primary: {}, - secondary: {}, - tertiary: {}, - others: {}, - }; - - for (const colorKey in colors) { - const category = colorKey.replace(/\d+/g, ''); - const shade = colorKey.replace(/\D+/g, ''); - - if (shade === '') { - colorPalette.others[category] = colors[colorKey]; - continue; - } - - if (!colorPalette[category]) { - colorPalette[category] = {}; - } - - colorPalette[category][shade] = colors[colorKey]; - } - - const sortedColorPalette: any = {}; - - for (const category in colorPalette) { - if (category !== 'others') { - sortedColorPalette[category] = Object.fromEntries( - Object.entries(colorPalette[category]).sort() - ); - } - } - - sortedColorPalette.others = { ...colorPalette.others }; - - return sortedColorPalette; - }, [colors]); - return ( - - - {Object.keys(sortedPalette).map((category: string) => { - return ( - - - {category} - - - {Object.keys(sortedPalette[category]).map((shade: string) => { - return ( - - - - - {category === 'others' - ? `${shade}` - : `${category}${shade}`} - - {sortedPalette[category][shade]} - - - ); - })} - - - ); - })} - - - ); -}; - -const spaces: any = config.tokens.space; - -const sortedSpaceObject: any = spaces; - -// Convert the map to an array of key-value pairs for sorting -const mapEntries = Object.entries(sortedSpaceObject); - -// Sort the map entries based on the keys -mapEntries.sort(([keyA, valueA]: any, [keyB, valueB]: any) => { - // Treat 'px' as the smallest and 'full' as the largest - // Place '0' at the top - if (keyA === '0') return -1; - if (keyB === '0') return 1; - - // Treat 'px' as the second smallest - if (keyA === 'px') return -1; - if (keyB === 'px') return 1; - - // Treat 'full' as the largest - if (keyA === 'full') return 1; - if (keyB === 'full') return -1; - - // Values with '%' should be grouped and sorted at the end - const isValueAPercentage = valueA.toString().includes('%'); - const isValueBPercentage = valueB.toString().includes('%'); - if (isValueAPercentage && !isValueBPercentage) return 1; - if (isValueBPercentage && !isValueAPercentage) return -1; - - // Group values with the same denominator and sort them - const [numA, denomA] = keyA.split('/').map(parseFloat); - const [numB, denomB] = keyB.split('/').map(parseFloat); - - if (!isNaN(numA) && !isNaN(denomA) && !isNaN(numB) && !isNaN(denomB)) { - if (denomA === denomB) { - return numA - numB; - } else { - return denomA - denomB; // Sort by denominator if they are different - } - } - - // For numeric keys, compare them as numbers - if (!isNaN(numA) && !isNaN(numB)) { - return numA - numB; - } - - // For other keys, compare them as strings - return keyA.localeCompare(keyB); -}); -// const spaceElementsArray = -// Create a new Map from the sorted map entries - -const SpaceComponent = () => { - const { colorMode } = useContext(LayoutContext); - return ( - - - - - Tokens - - - Value (Pixels) - - Representation - - {mapEntries.map(([key, value]: any) => { - return ( - - - - - {key} - - - {value} - - - - - - - ); - })} - - - ); -}; - -const opacity: any = config.tokens.opacity; - -const OpacityComponent = () => { - const { colorMode } = useContext(LayoutContext); - return ( - - - {Object.keys(opacity).map((op: string) => { - return ( - - - - - {op} - - - ({opacity[op]}) - - - - ); - })} - - - ); -}; - -const ShadowsComponent = () => { - const { colorMode } = useContext(LayoutContext); - const hardShadows: any = config.globalStyle.variants.hardShadow; - const softShadows: any = config.globalStyle.variants.softShadow; - - return ( - - - - Hard Shadows - - - {Object.keys(hardShadows).map((shadow: string) => { - return ( - { - return ( - - - {shadow} - - - ); - }} - > - - - {JSON.stringify(hardShadows[shadow], null, 2)} - - - - ); - })} - - - Soft Shadows - - - {Object.keys(softShadows).map((shadow: string) => { - return ( - { - return ( - - - {shadow} - - - ); - }} - > - - - {JSON.stringify(softShadows[shadow], null, 2)} - - - - ); - })} - - - - ); -}; - -const borderWidths = config.tokens.borderWidths; -const BorderWidthComponent = () => { - const { colorMode } = useContext(LayoutContext); - return ( - - - {Object.keys(borderWidths).map((borderWidth: any) => { - return ( - - {borderWidth} - - ({borderWidths[borderWidth]}) - - - ); - })} - - - ); -}; - -const radii = config.tokens.radii; -const RadiiComponent = () => { - const { colorMode } = useContext(LayoutContext); - return ( - - - {Object.keys(radii).map((borderRadiusValue: any) => { - return ( - - {borderRadiusValue} - - ({radii[borderRadiusValue]}) - - - ); - })} - - - ); -}; - -export { - ColorPaletteComponent, - SpaceComponent, - OpacityComponent, - ShadowsComponent, - BorderWidthComponent, - RadiiComponent, -}; - -export { Text, VStack, HStack, Box }; diff --git a/example/storybook-v7/src/components/hooks/useDarkMode.ts b/example/storybook-v7/src/components/hooks/useDarkMode.ts deleted file mode 100644 index baa231e93d..0000000000 --- a/example/storybook-v7/src/components/hooks/useDarkMode.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const useDarkMode = () => { - return false; -}; diff --git a/example/storybook-v7/src/components/hooks/useDarkMode.web.ts b/example/storybook-v7/src/components/hooks/useDarkMode.web.ts deleted file mode 100644 index 3724b39752..0000000000 --- a/example/storybook-v7/src/components/hooks/useDarkMode.web.ts +++ /dev/null @@ -1 +0,0 @@ -export { useDarkMode } from 'storybook-dark-mode'; diff --git a/example/storybook-v7/src/core-components/nativewind/Wrapper.tsx b/example/storybook-v7/src/core-components/nativewind/Wrapper.tsx deleted file mode 100644 index 54ab86a8ed..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/Wrapper.tsx +++ /dev/null @@ -1,47 +0,0 @@ -'use client'; -import React from 'react'; -import { Box, Center, useColorMode } from '@gluestack-ui/themed'; -import { config } from './gluestack-ui-provider/config'; - -export function GluestackUIProvider({ - mode = 'light', - ...props -}: { - mode?: 'light' | 'dark'; - children?: any; -}) { - if (config[mode] && typeof document !== 'undefined') { - const element = document.documentElement; - if (element) { - const head = element.querySelector('head'); - const style = document.createElement('style'); - const stringcssvars = Object.keys(config[mode]).reduce((acc, cur) => { - acc += `${cur}:${config[mode][cur]};`; - return acc; - }, ''); - style.innerHTML = `:root {${stringcssvars}} `; - if (head) head.appendChild(style); - } - } - return props.children; -} - -const Wrapper = ({ children, ...props }: any) => { - const colorMode: any = useColorMode(); - return ( - - -
{children}
-
-
- ); -}; - -export default Wrapper; diff --git a/example/storybook-v7/src/core-components/nativewind/accordion/index.tsx b/example/storybook-v7/src/core-components/nativewind/accordion/index.tsx deleted file mode 100644 index 4082b8b69e..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/accordion/index.tsx +++ /dev/null @@ -1,386 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { createAccordion } from '@gluestack-ui/accordion'; -import { Svg } from 'react-native-svg'; -import { View, Pressable, Text, Platform } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { H3 } from '@expo/html-elements'; -import { cssInterop } from 'nativewind'; - -const SCOPE = 'ACCORDION'; -/** Styles */ - -const accordionStyle = tva({ - base: 'w-full', - variants: { - variant: { - filled: 'bg-white', - }, - size: { - sm: '', - md: '', - lg: '', - }, - }, -}); -const accordionItemStyle = tva({ - parentVariants: { - variant: { - filled: 'bg-background-0', - unfilled: 'bg-transparent', - }, - }, -}); -const accordionTitleTextStyle = tva({ - base: 'text-typography-900 font-bold flex-1 text-left', - parentVariants: { - size: { - sm: 'text-sm', - md: 'text-base', - lg: 'text-lg', - }, - }, -}); -const accordionIconStyle = tva({ - base: '', - parentVariants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'h-[18px] w-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); -const accordionContentTextStyle = tva({ - base: 'text-typography-700 font-normal', - parentVariants: { - size: { - sm: 'text-sm ', - md: 'text-base', - lg: 'text-lg', - }, - }, -}); -const accordionHeaderStyle = tva({ - base: 'mx-0 my-0', -}); -const accordionContentStyle = tva({ - base: 'px-5 mt-2 pb-5', -}); -const accordionTriggerStyle = tva({ - base: 'w-full py-5 px-5 flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50', -}); - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const Root = - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE); - -const Header = Platform.OS === 'web' ? H3 : View; -/** Creator */ -const UIAccordion = createAccordion({ - Root: Root, - Item: View, - //@ts-ignore - Header: Header, - Trigger: Pressable, - Icon: PrimitiveIcon, - TitleText: Text, - ContentText: Text, - Content: View, -}); - -cssInterop(UIAccordion, { className: 'style' }); -cssInterop(UIAccordion.Item, { className: 'style' }); -cssInterop(UIAccordion.Header, { className: 'style' }); -cssInterop(UIAccordion.Trigger, { className: 'style' }); -cssInterop(UIAccordion.Icon, { className: 'style' }); -cssInterop(UIAccordion.TitleText, { className: 'style' }); -cssInterop(UIAccordion.Content, { className: 'style' }); -cssInterop(UIAccordion.ContentText, { className: 'style' }); -// @ts-ignore -cssInterop(UIAccordion.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -type IAccordionProps = React.ComponentProps & - VariantProps; - -type IAccordionItemProps = React.ComponentProps & - VariantProps; - -type IAccordionContentProps = React.ComponentProps & - VariantProps; - -type IAccordionContentTextProps = React.ComponentProps< - typeof UIAccordion.ContentText -> & - VariantProps; - -type IAccordionIconProps = VariantProps & - React.ComponentProps & { - as?: any; - }; - -type IAccordionHeaderProps = React.ComponentProps & - VariantProps; - -type IAccordionTriggerProps = React.ComponentProps & - VariantProps; - -type IAccordionTitleTextProps = React.ComponentProps< - typeof UIAccordion.TitleText -> & - VariantProps; - -/** Components */ - -const Accordion = React.forwardRef( - ( - { - className, - variant = 'filled', - size = 'md', - ...props - }: { className?: string } & IAccordionProps, - ref?: any - ) => { - return ( - - ); - } -); - -const AccordionItem = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAccordionItemProps, - ref?: any - ) => { - const { variant } = useStyleContext(SCOPE); - return ( - - ); - } -); - -const AccordionContent = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAccordionContentProps, - ref?: any - ) => { - return ( - - ); - } -); - -const AccordionContentText = React.forwardRef( - ( - { - className, - ...props - }: { className?: string } & IAccordionContentTextProps, - ref?: any - ) => { - const { size } = useStyleContext(SCOPE); - return ( - - ); - } -); - -const AccordionIcon = React.forwardRef( - ( - { - size, - className, - color = 'gray', - ...props - }: IAccordionIconProps & { - className?: any; - fill?: string; - as?: any; - color?: string; - }, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -const AccordionHeader = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAccordionHeaderProps, - ref?: any - ) => { - return ( - - ); - } -); -const AccordionTrigger = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAccordionTriggerProps, - ref?: any - ) => { - return ( - - ); - } -); -const AccordionTitleText = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAccordionTitleTextProps, - ref?: any - ) => { - const { size } = useStyleContext(SCOPE); - return ( - - ); - } -); - -Accordion.displayName = 'Accordion'; -AccordionItem.displayName = 'AccordionItem'; -AccordionHeader.displayName = 'AccordionHeader'; -AccordionTrigger.displayName = 'AccordionTrigger'; -AccordionTitleText.displayName = 'AccordionTitleText'; -AccordionContentText.displayName = 'AccordionContentText'; -AccordionIcon.displayName = 'AccordionIcon'; -AccordionContent.displayName = 'AccordionContent'; - -export { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionContentText, - AccordionIcon, - AccordionContent, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/actionsheet/index.tsx b/example/storybook-v7/src/core-components/nativewind/actionsheet/index.tsx deleted file mode 100644 index 26fdfd4e33..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/actionsheet/index.tsx +++ /dev/null @@ -1,578 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { H4 } from '@expo/html-elements'; -import { Svg } from 'react-native-svg'; -import { createActionsheet } from '@gluestack-ui/actionsheet'; -import { - Pressable, - View, - Text, - ScrollView, - VirtualizedList, - FlatList, - SectionList, - Platform, -} from 'react-native'; - -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from 'nativewind'; -import { - Motion, - AnimatePresence, - createMotionAnimatedComponent, -} from '@legendapp/motion'; - -const PrimitiveIcon = React.forwardRef( - ( - { - height, - width, - fill = 'none', - color = 'gray', - size, - as: AsComp, - ...props - }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const AnimatedPressable = createMotionAnimatedComponent(Pressable); -export const UIActionsheet = createActionsheet({ - Root: View, - Content: withStyleContext(Motion.View), - Item: - Platform.OS === 'web' - ? withStyleContext(Pressable) - : withStyleContextAndStates(Pressable), - ItemText: Text, - DragIndicator: View, - IndicatorWrapper: View, - Backdrop: AnimatedPressable, - ScrollView: ScrollView, - VirtualizedList: VirtualizedList, - FlatList: FlatList, - SectionList: SectionList, - SectionHeaderText: H4, - Icon: PrimitiveIcon, - AnimatePresence: AnimatePresence, -}); - -cssInterop(UIActionsheet, { className: 'style' }); -cssInterop(UIActionsheet.Content, { className: 'style' }); -cssInterop(UIActionsheet.Item, { className: 'style' }); -cssInterop(UIActionsheet.ItemText, { className: 'style' }); -cssInterop(UIActionsheet.DragIndicator, { className: 'style' }); -cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' }); -cssInterop(UIActionsheet.Backdrop, { className: 'style' }); -cssInterop(UIActionsheet.ScrollView, { className: 'style' }); -cssInterop(UIActionsheet.VirtualizedList, { className: 'style' }); -cssInterop(UIActionsheet.FlatList, { className: 'style' }); -cssInterop(UIActionsheet.SectionList, { className: 'style' }); -cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' }); -cssInterop(UIActionsheet.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' }); - -const actionsheetContentStyle = tva({ - base: 'items-center rounded-tl-3xl rounded-tr-3xl p-2 bg-background-0 web:pointer-events-auto web:select-none shadow-lg', -}); - -const actionsheetItemStyle = tva({ - base: 'w-full flex-row items-center p-3 rounded-sm disabled:opacity-40 disabled:web:pointer-events-auto disabled:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 focus:bg-background-100 web:focus-visible:bg-background-100', -}); - -const actionsheetItemTextStyle = tva({ - base: 'text-typography-700 font-normal font-body tracking-md text-left mx-2', - variants: { - isTruncated: { - true: '', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - 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', - }, - }, - defaultVariants: { - size: 'md', - }, -}); - -const actionsheetDragIndicatorStyle = tva({ - base: 'w-16 h-1 bg-background-400 rounded-full', -}); - -const actionsheetDragIndicatorWrapperStyle = tva({ - base: 'w-full py-1 items-center', -}); - -const actionsheetBackdropStyle = tva({ - base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto', -}); - -const actionsheetScrollViewStyle = tva({ - base: 'w-full h-auto', -}); - -const actionsheetVirtualizedListStyle = tva({ - base: 'w-full h-auto', -}); - -const actionsheetFlatListStyle = tva({ - base: 'w-full h-auto', -}); - -const actionsheetSectionListStyle = tva({ - base: 'w-full h-auto', -}); - -const actionsheetSectionHeaderTextStyle = tva({ - base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase', - variants: { - isTruncated: { - true: '', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '5xl': 'text-5xl', - '4xl': 'text-4xl', - '3xl': 'text-3xl', - '2xl': 'text-2xl', - 'xl': 'text-xl', - 'lg': 'text-lg', - 'md': 'text-md', - 'sm': 'text-sm', - 'xs': 'text-xs', - }, - - sub: { - true: 'text-xs', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow500', - }, - }, - defaultVariants: { - size: 'xs', - }, -}); - -const actionsheetIconStyle = tva({ - base: '', - variants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'w-[18px] h-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -type IActionsheetProps = VariantProps & - React.ComponentProps; - -type IActionsheetContentProps = VariantProps & - React.ComponentProps; - -type IActionsheetItemProps = VariantProps & - React.ComponentProps; - -type IActionsheetItemTextProps = VariantProps & - React.ComponentProps; - -type IActionsheetDragIndicatorProps = VariantProps< - typeof actionsheetDragIndicatorStyle -> & - React.ComponentProps; - -type IActionsheetDragIndicatorWrapperProps = VariantProps< - typeof actionsheetDragIndicatorWrapperStyle -> & - React.ComponentProps; - -type IActionsheetBackdropProps = VariantProps & - React.ComponentProps; - -type IActionsheetScrollViewProps = VariantProps< - typeof actionsheetScrollViewStyle -> & - React.ComponentProps; - -type IActionsheetVirtualizedListProps = VariantProps< - typeof actionsheetVirtualizedListStyle -> & - React.ComponentProps; - -type IActionsheetFlatListProps = VariantProps & - React.ComponentProps; - -type IActionsheetSectionListProps = VariantProps< - typeof actionsheetSectionListStyle -> & - React.ComponentProps; - -type IActionsheetSectionHeaderTextProps = VariantProps< - typeof actionsheetSectionHeaderTextStyle -> & - React.ComponentProps; - -type IActionsheetIconProps = VariantProps & - React.ComponentProps; - -const Actionsheet = React.forwardRef( - ({ className, ...props }: IActionsheetProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetContent = React.forwardRef( - ( - { className, ...props }: IActionsheetContentProps & { className?: string }, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetItem = React.forwardRef( - ({ className, ...props }: IActionsheetItemProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetItemText = React.forwardRef( - ( - { - isTruncated, - bold, - underline, - strikeThrough, - size, - className, - ...props - }: IActionsheetItemTextProps, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetDragIndicator = React.forwardRef( - ({ className, ...props }: IActionsheetDragIndicatorProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetDragIndicatorWrapper = React.forwardRef( - ( - { className, ...props }: IActionsheetDragIndicatorWrapperProps, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetBackdrop = React.forwardRef( - ( - { className, ...props }: IActionsheetBackdropProps & { className?: string }, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetScrollView = React.forwardRef( - ({ className, ...props }: IActionsheetScrollViewProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetVirtualizedList = React.forwardRef( - ({ className, ...props }: IActionsheetVirtualizedListProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetFlatList = React.forwardRef( - ({ className, ...props }: IActionsheetFlatListProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetSectionList = React.forwardRef( - ({ className, ...props }: IActionsheetSectionListProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetSectionHeaderText = React.forwardRef( - ( - { - className, - isTruncated, - bold, - underline, - strikeThrough, - size, - sub, - italic, - highlight, - ...props - }: IActionsheetSectionHeaderTextProps, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetIcon = React.forwardRef( - ( - { - className, - size = 'sm', - color = 'gray', - ...props - }: IActionsheetIconProps & { - as?: any; - fill?: string; - color?: string; - className?: any; - }, - ref?: any - ) => { - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -export { - Actionsheet, - ActionsheetContent, - ActionsheetItem, - ActionsheetItemText, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetBackdrop, - ActionsheetScrollView, - ActionsheetVirtualizedList, - ActionsheetFlatList, - ActionsheetSectionList, - ActionsheetSectionHeaderText, - ActionsheetIcon, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/alert-dialog/index.tsx b/example/storybook-v7/src/core-components/nativewind/alert-dialog/index.tsx deleted file mode 100644 index 27ba63c52e..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/alert-dialog/index.tsx +++ /dev/null @@ -1,316 +0,0 @@ -'use client'; -import React from 'react'; -import { createAlertDialog } from '@gluestack-ui/alert-dialog'; - -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -import { - Motion, - AnimatePresence, - createMotionAnimatedComponent, -} from '@legendapp/motion'; - -import { View, Pressable, ScrollView, Platform } from 'react-native'; - -const AnimatedPressable = createMotionAnimatedComponent(Pressable); -const SCOPE = 'ALERT_DIALOG'; -const UIAccessibleAlertDialog = createAlertDialog({ - // @ts-ignore - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE), - Body: ScrollView, - Content: Motion.View, - CloseButton: Pressable, - Header: View, - Footer: View, - Backdrop: AnimatedPressable, - AnimatePresence: AnimatePresence, //TODO: Add support for this -}); - -cssInterop(UIAccessibleAlertDialog, { className: 'style' }); -cssInterop(UIAccessibleAlertDialog.Content, { className: 'style' }); -cssInterop(UIAccessibleAlertDialog.CloseButton, { className: 'style' }); -cssInterop(UIAccessibleAlertDialog.Header, { className: 'style' }); -cssInterop(UIAccessibleAlertDialog.Footer, { className: 'style' }); -cssInterop(UIAccessibleAlertDialog.Body, { className: 'style' }); -cssInterop(UIAccessibleAlertDialog.Backdrop, { className: 'style' }); - -const alertDialogStyle = tva({ - base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none', - parentVariants: { - size: { - xs: '', - sm: '', - md: '', - lg: '', - full: '', - }, - }, -}); - -const alertDialogContentStyle = tva({ - base: 'bg-background-50 rounded-lg overflow-hidden ', - parentVariants: { - size: { - xs: 'w-[60%] max-w-[360px]', - sm: 'w-[70%] max-w-[420px]', - md: 'w-[80%] max-w-[510px]', - lg: 'w-[90%] max-w-[640px]', - full: 'w-full', - }, - }, -}); - -const alertDialogCloseButtonStyle = tva({ - base: 'group/alert-dialog-close-button z-10 rounded-sm p-2 data-[focus-visible=true]:bg-background-100 web:cursor-pointer outline-0', -}); - -const alertDialogHeaderStyle = tva({ - base: 'p-4 justify-between items-center flex-row', -}); - -const alertDialogFooterStyle = tva({ - base: 'p-4 flex-row justify-end items-center flex-wrap', -}); - -const alertDialogBodyStyle = tva({ base: 'px-4 py-2' }); - -const alertDialogBackdropStyle = tva({ - base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default', -}); - -type IAlertDialogProps = React.ComponentProps & - VariantProps; - -type IAlertDialogContentProps = React.ComponentProps< - typeof UIAccessibleAlertDialog.Content -> & - VariantProps; - -type IAlertDialogCloseButtonProps = React.ComponentProps< - typeof UIAccessibleAlertDialog.CloseButton -> & - VariantProps; - -type IAlertDialogHeaderProps = React.ComponentProps< - typeof UIAccessibleAlertDialog.Header -> & - VariantProps; - -type IAlertDialogFooterProps = React.ComponentProps< - typeof UIAccessibleAlertDialog.Footer -> & - VariantProps; - -type IAlertDialogBodyProps = React.ComponentProps< - typeof UIAccessibleAlertDialog.Body -> & - VariantProps; - -type IAlertDialogBackdropProps = React.ComponentProps< - typeof UIAccessibleAlertDialog.Backdrop -> & - VariantProps; - -const AlertDialog = React.forwardRef( - ( - { - className, - size = 'md', - ...props - }: { className?: string } & IAlertDialogProps, - ref?: any - ) => { - return ( - - ); - } -); - -const AlertDialogContent = React.forwardRef( - ( - { - className, - size, - ...props - }: { className?: string } & IAlertDialogContentProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -const AlertDialogCloseButton = React.forwardRef( - ( - { - className, - ...props - }: { className?: string } & IAlertDialogCloseButtonProps, - ref?: any - ) => { - return ( - - ); - } -); - -const AlertDialogHeader = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAlertDialogHeaderProps, - ref?: any - ) => { - return ( - - ); - } -); - -const AlertDialogFooter = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAlertDialogFooterProps, - ref?: any - ) => { - return ( - - ); - } -); - -const AlertDialogBody = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAlertDialogBodyProps, - ref?: any - ) => { - return ( - - ); - } -); - -const AlertDialogBackdrop = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAlertDialogBackdropProps, - ref?: any - ) => { - return ( - - ); - } -); - -AlertDialog.displayName = 'AlertDialog'; -AlertDialogContent.displayName = 'AlertDialogContent'; -AlertDialogCloseButton.displayName = 'AlertDialogCloseButton'; -AlertDialogHeader.displayName = 'AlertDialogHeader'; -AlertDialogFooter.displayName = 'AlertDialogFooter'; -AlertDialogBody.displayName = 'AlertDialogBody'; -AlertDialogBackdrop.displayName = 'AlertDialogBackdrop'; - -export { - AlertDialog, - AlertDialogContent, - AlertDialogCloseButton, - AlertDialogHeader, - AlertDialogFooter, - AlertDialogBody, - AlertDialogBackdrop, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/alert/index.tsx b/example/storybook-v7/src/core-components/nativewind/alert/index.tsx deleted file mode 100644 index bc18a2f180..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/alert/index.tsx +++ /dev/null @@ -1,278 +0,0 @@ -'use client'; -import { createAlert } from '@gluestack-ui/alert'; -import { View, Text } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import React, { useMemo } from 'react'; -import { Svg } from 'react-native-svg'; -import { cssInterop } from 'nativewind'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const SCOPE = 'ALERT'; - -const alertStyle = tva({ - base: 'items-center p-3 rounded flex-row', - - variants: { - action: { - error: 'bg-background-error border-error-300 ', - warning: 'bg-background-warning border-warning-300', - success: 'bg-background-success border-success-300', - info: 'bg-background-info border-info-300', - muted: 'bg-background-muted border-muted-300', - }, - - variant: { - solid: '', - outline: 'border bg-transparent', - accent: 'border-l-4', - }, - }, - defaultVariants: { - variant: 'solid', - action: 'info', - }, -}); - -const alertTextStyle = tva({ - base: 'text-typography-700 flex-1 font-normal font-body', - - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - 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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -const alertIconStyle = tva({ - variants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'h-[18px] w-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -export const UIAlert = createAlert({ - Root: withStyleContext(View, SCOPE), - Text: Text, - Icon: PrimitiveIcon, -}); - -cssInterop(UIAlert, { className: 'style' }); -//@ts-ignore -cssInterop(UIAlert.Text, { className: 'style' }); -cssInterop(UIAlert.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -type IAlertProps = Omit, 'context'> & - VariantProps; -const Alert = React.forwardRef( - ( - { - className, - variant = 'solid', - action = 'info', - ...props - }: { className?: string } & IAlertProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IAlertTextProps = React.ComponentProps & - VariantProps; -const AlertText = React.forwardRef( - ( - { - className, - isTruncated, - bold, - underline, - strikeThrough, - size = 'md', - sub, - italic, - highlight, - ...props - }: { className?: string } & IAlertTextProps, - ref?: any - ) => { - return ( - - ); - } -); - -interface DefaultColors { - info: string; - success: string; - error: string; - warning: string; - muted: string; -} -const defaultColors: DefaultColors = { - info: '#0DA6F2', - success: '#38A169', - error: '#D32F2F', - warning: '#FFC107', - muted: '#999999', -}; -type IAlertIconProps = React.ComponentProps & - VariantProps; -const AlertIcon = React.forwardRef( - ( - { - className, - size = 'md', - ...props - }: { - className?: string; - color?: string; - } & IAlertIconProps, - ref?: any - ) => { - const { action: parentAction } = useStyleContext(SCOPE); - const { color = defaultColors[parentAction as keyof DefaultColors] } = - props; - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -Alert.displayName = 'Alert'; -AlertText.displayName = 'AlertText'; -AlertIcon.displayName = 'AlertIcon'; - -export { Alert, AlertText, AlertIcon }; diff --git a/example/storybook-v7/src/core-components/nativewind/avatar/index.tsx b/example/storybook-v7/src/core-components/nativewind/avatar/index.tsx deleted file mode 100644 index 163e02a651..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/avatar/index.tsx +++ /dev/null @@ -1,191 +0,0 @@ -'use client'; -import React from 'react'; -import { createAvatar } from '@gluestack-ui/avatar'; - -import { View, Text, Image } from 'react-native'; - -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -const SCOPE = 'AVATAR'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const UIAvatar = createAvatar({ - Root: withStyleContext(View, SCOPE), - Badge: View, - Group: View, - Image: Image, - FallbackText: Text, -}); - -cssInterop(UIAvatar, { className: 'style' }); -cssInterop(UIAvatar.Badge, { className: 'style' }); -cssInterop(UIAvatar.Group, { className: 'style' }); -cssInterop(UIAvatar.Image, { className: 'style' }); -cssInterop(UIAvatar.FallbackText, { className: 'style' }); - -const avatarStyle = tva({ - base: 'rounded-full justify-center items-center relative bg-primary-600 group-[.avatar-group]/avatar-group:-ml-2.5', - variants: { - size: { - 'xs': 'w-6 h-6', - 'sm': 'w-8 h-8', - 'md': 'w-12 h-12', - 'lg': 'w-16 h-16', - 'xl': 'w-24 h-24', - '2xl': 'w-32 h-32', - }, - }, -}); - -const avatarFallbackTextStyle = tva({ - base: 'text-typography-0 font-semibold overflow-hidden text-transform:uppercase web:cursor-default', - - parentVariants: { - size: { - 'xs': 'text-2xs', - 'sm': 'text-xs', - 'md': 'text-base', - 'lg': 'text-xl', - 'xl': 'text-3xl', - '2xl': 'text-5xl', - }, - }, -}); - -const avatarGroupStyle = tva({ - base: 'group/avatar-group flex-row-reverse relative avatar-group', -}); - -const avatarBadgeStyle = tva({ - base: 'w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-white border-2', - parentVariants: { - size: { - 'xs': 'w-2 h-2', - 'sm': 'w-2 h-2', - 'md': 'w-3 h-3', - 'lg': 'w-4 h-4', - 'xl': 'w-6 h-6', - '2xl': 'w-8 h-8', - }, - }, -}); - -const avatarImageStyle = tva({ - base: 'h-full w-full rounded-full absolute', -}); - -type IAvatarProps = Omit, 'context'> & - VariantProps; -export const Avatar = React.forwardRef( - ( - { className, size = 'md', ...props }: { className?: string } & IAvatarProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IAvatarBadgeProps = React.ComponentProps & - VariantProps; -export const AvatarBadge = React.forwardRef( - ( - { className, size, ...props }: { className?: string } & IAvatarBadgeProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -type IAvatarFallbackTextProps = React.ComponentProps< - typeof UIAvatar.FallbackText -> & - VariantProps; -export const AvatarFallbackText = React.forwardRef( - ( - { - className, - size, - ...props - }: { className?: string } & IAvatarFallbackTextProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -type IAvatarImageProps = React.ComponentProps & - VariantProps; -export const AvatarImage = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAvatarImageProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IAvatarGroupProps = React.ComponentProps & - VariantProps; -export const AvatarGroup = React.forwardRef( - ( - { className, ...props }: { className?: string } & IAvatarGroupProps, - ref?: any - ) => { - return ( - - ); - } -); diff --git a/example/storybook-v7/src/core-components/nativewind/badge/index.tsx b/example/storybook-v7/src/core-components/nativewind/badge/index.tsx deleted file mode 100644 index 3aed981a0e..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/badge/index.tsx +++ /dev/null @@ -1,255 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { Text, View } from 'react-native'; -import { Svg } from 'react-native-svg'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { cssInterop } from 'nativewind'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -const SCOPE = 'BADGE'; - -const badgeStyle = tva({ - base: 'flex-row items-center rounded-sm data-[disabled=true]:opacity-50 px-2 py-1', - - variants: { - action: { - error: 'bg-background-error border-error-300', - warning: 'bg-background-warning border-warning-300', - success: 'bg-background-success border-success-300', - info: 'bg-background-info border-info-300', - muted: 'bg-background-muted border-secondary-300', - }, - variant: { - solid: '', - outline: 'border', - }, - size: { - sm: '', - md: '', - lg: '', - }, - }, -}); - -const badgeTextStyle = tva({ - base: 'text-typography-700 font-body font-normal tracking-normal uppercase', - - parentVariants: { - action: { - error: 'text-error-600', - warning: 'text-warning-600', - success: 'text-success-600', - info: 'text-info-600', - muted: 'text-secondary-600', - }, - size: { - sm: 'text-2xs', - md: 'text-xs', - lg: 'text-sm', - }, - }, - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - sub: { - true: 'text-xs', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -const badgeIconStyle = tva({ - parentVariants: { - size: { - sm: 'h-3 w-3', - md: 'h-3.5 w-3.5', - lg: 'h-4 w-4', - }, - }, -}); - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const ContextView = withStyleContext(View, SCOPE); -cssInterop(ContextView, { className: 'style' }); -cssInterop(PrimitiveIcon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -type IBadgeProps = React.ComponentProps & - VariantProps; -const Badge = ({ - children, - action = 'info', - variant = 'solid', - size = 'md', - className, - ...props -}: { className?: string } & IBadgeProps) => { - return ( - - {children} - - ); -}; - -type IBadgeTextProps = React.ComponentProps & - VariantProps; -const BadgeText = ({ - children, - className, - size, - ...props -}: { className?: string } & IBadgeTextProps) => { - const { size: parentSize, action: parentAction } = useStyleContext(SCOPE); - return ( - - {children} - - ); -}; - -interface DefaultColors { - info: string; - success: string; - error: string; - warning: string; - muted: string; -} -const defaultColors: DefaultColors = { - info: '#0B8DCD', - success: '#2A7948', - error: '#DC2626', - warning: '#D76C1F', - muted: '#515252', -}; -type IBadgeIconProps = React.ComponentProps & - VariantProps; -const BadgeIcon = React.forwardRef( - ( - { - className, - size, - ...props - }: { className?: string; color?: string; as?: any } & IBadgeIconProps, - ref?: any - ) => { - const { size: parentSize, action: parentAction } = useStyleContext(SCOPE); - const { color = defaultColors[parentAction as keyof DefaultColors] } = - props; - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props?.height !== undefined || props?.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -Badge.displayName = 'Badge'; -BadgeText.displayName = 'BadgeText'; -BadgeIcon.displayName = 'BadgeIcon'; - -export { Badge, BadgeIcon, BadgeText }; diff --git a/example/storybook-v7/src/core-components/nativewind/box/index.tsx b/example/storybook-v7/src/core-components/nativewind/box/index.tsx deleted file mode 100644 index ba2a3e6ae4..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/box/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { View } from 'react-native'; - -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { boxStyle } from './styles'; - -type IBoxProps = React.ComponentProps & - VariantProps; - -const Box = React.forwardRef( - ({ className, ...props }: IBoxProps, ref?: any) => { - return ( - - ); - } -); - -Box.displayName = 'Box'; -export { Box }; diff --git a/example/storybook-v7/src/core-components/nativewind/box/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/box/index.web.tsx deleted file mode 100644 index 11a28108d0..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/box/index.web.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { boxStyle } from './styles'; - -const Box = React.forwardRef(({ className, ...props }: any, ref) => { - return ( -
- ); -}); - -Box.displayName = 'Box'; -export { Box }; diff --git a/example/storybook-v7/src/core-components/nativewind/box/styles.tsx b/example/storybook-v7/src/core-components/nativewind/box/styles.tsx deleted file mode 100644 index 760e8fffa1..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/box/styles.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; - -const baseStyle = isWeb - ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none' - : ''; - -export const boxStyle = tva({ - base: baseStyle, -}); diff --git a/example/storybook-v7/src/core-components/nativewind/button/index.tsx b/example/storybook-v7/src/core-components/nativewind/button/index.tsx deleted file mode 100644 index 8000ba10c2..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/button/index.tsx +++ /dev/null @@ -1,421 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { createButton } from '@gluestack-ui/button'; -import { Svg } from 'react-native-svg'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from 'nativewind'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -import { - ActivityIndicator, - Pressable, - Text, - View, - Platform, -} from 'react-native'; - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const SCOPE = 'BUTTON'; -const Root = - Platform.OS === 'web' - ? withStyleContext(Pressable, SCOPE) - : withStyleContextAndStates(Pressable, SCOPE); - -const UIButton = createButton({ - Root: Root, - Text, - Group: View, - Spinner: ActivityIndicator, - Icon: PrimitiveIcon, -}); - -cssInterop(UIButton, { className: 'style' }); -cssInterop(UIButton.Text, { className: 'style' }); -cssInterop(UIButton.Group, { className: 'style' }); -cssInterop(UIButton.Spinner, { className: 'style' }); -cssInterop(UIButton.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -const buttonStyle = tva({ - base: 'group/button rounded 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: - '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-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-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-300', - default: 'bg-transparent hover:bg-background-50 active:bg-transparent', - }, - variant: { - link: 'px-0', - outline: - 'bg-transparent border hover:bg-background-50 active:bg-transparent', - solid: '', - }, - - size: { - xs: 'px-3.5 h-8', - sm: 'px-4 h-9', - md: 'px-5 h-10', - lg: 'px-6 h-11', - }, - }, - compoundVariants: [ - { - action: 'primary', - variant: 'link', - class: 'px-0 bg-transparent hover:bg-transparent active:bg-transparent', - }, - { - action: 'secondary', - variant: 'link', - class: 'px-0 bg-transparent hover:bg-transparent active:bg-transparent', - }, - { - action: 'positive', - variant: 'link', - class: 'px-0 bg-transparent hover:bg-transparent active:bg-transparent', - }, - { - action: 'negative', - variant: 'link', - class: 'px-0 bg-transparent hover:bg-transparent active:bg-transparent', - }, - { - action: 'primary', - variant: 'outline', - class: 'bg-transparent hover:bg-background-50 active:bg-transparent', - }, - { - action: 'secondary', - variant: 'outline', - class: 'bg-transparent hover:bg-background-50 active:bg-transparent', - }, - { - action: 'positive', - variant: 'outline', - class: 'bg-transparent hover:bg-background-50 active:bg-transparent', - }, - { - action: 'negative', - variant: 'outline', - class: 'bg-transparent hover:bg-background-50 active:bg-transparent', - }, - ], -}); - -const buttonTextStyle = tva({ - base: 'text-typography-0 font-semibold web:select-none', - parentVariants: { - action: { - primary: - 'text-primary-600 group-hover/button:text-primary-600 group-active/button:text-primary-700', - secondary: - 'text-secondary-600 group-hover/button:text-secondary-600 group-active/button:text-secondary-700', - positive: - 'text-success-600 group-hover/button:text-success-600 group-active/button:text-success-700', - negative: - 'text-error-600 group-hover/button:text-error-600 group-active/button:text-error-700', - }, - variant: { - link: 'group-hover/button:underline group-active/button:underline', - outline: '', - solid: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', - }, - size: { - xs: 'text-xs', - sm: 'text-sm', - md: 'text-base', - lg: 'text-lg', - }, - }, - parentCompoundVariants: [ - { - variant: 'solid', - action: 'primary', - class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', - }, - { - variant: 'solid', - action: 'secondary', - class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', - }, - { - variant: 'solid', - action: 'positive', - class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', - }, - { - variant: 'solid', - action: 'negative', - class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', - }, - ], -}); - -const buttonIconStyle = tva({ - parentVariants: { - variant: { - link: 'group-hover/button:underline group-active/button:underline', - outline: '', - solid: '', - }, - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'h-[18px] w-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -const buttonGroupStyle = tva({ - base: '', - variants: { - space: { - 'xs': 'gap-1', - 'sm': 'gap-2', - 'md': 'gap-3', - 'lg': 'gap-4', - 'xl': 'gap-5', - '2xl': 'gap-6', - '3xl': 'gap-7', - '4xl': 'gap-8', - }, - isAttached: { - true: 'gap-0', - }, - }, -}); - -type IButtonProps = Omit, 'context'> & - VariantProps; -const Button = React.forwardRef( - ( - { - className, - variant = 'solid', - size = 'md', - action = 'primary', - ...props - }: { className?: string } & IButtonProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IButtonTextProps = React.ComponentProps & - VariantProps; -const ButtonText = React.forwardRef( - ( - { - className, - variant, - size, - action, - ...props - }: { className?: string } & IButtonTextProps, - ref?: any - ) => { - const { - variant: parentVariant, - size: parentSize, - action: parentAction, - } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -const ButtonSpinner = UIButton.Spinner; - -interface DefaultColors { - primary: string; - secondary: string; - positive: string; - negative: string; -} -const defaultColors: DefaultColors = { - primary: '#292929', - secondary: '#515252', - positive: '#2A7948', - negative: '#DC2626', -}; -type IButtonIcon = React.ComponentProps & - VariantProps; -const ButtonIcon = React.forwardRef( - ( - { - className, - size, - ...props - }: IButtonIcon & { - className?: any; - fill?: string; - color?: string; - as?: any; - }, - ref?: any - ) => { - const { - variant: parentVariant, - size: parentSize, - action: parentAction, - } = useStyleContext(SCOPE); - - let localColor; - if (parentVariant !== 'solid') { - localColor = defaultColors[parentAction as keyof DefaultColors]; - } else { - localColor = 'gray'; - } - const { color = localColor } = props; - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -type IButtonGroupProps = React.ComponentProps & - VariantProps; -const ButtonGroup = React.forwardRef( - ( - { - className, - space = 'md', - isAttached = false, - ...props - }: { className?: string } & IButtonGroupProps, - ref?: any - ) => { - return ( - - ); - } -); - -Button.displayName = 'Button'; -ButtonText.displayName = 'ButtonText'; -ButtonSpinner.displayName = 'ButtonSpinner'; -ButtonIcon.displayName = 'ButtonIcon'; -ButtonGroup.displayName = 'ButtonGroup'; - -export { Button, ButtonText, ButtonSpinner, ButtonIcon, ButtonGroup }; diff --git a/example/storybook-v7/src/core-components/nativewind/card/index.tsx b/example/storybook-v7/src/core-components/nativewind/card/index.tsx deleted file mode 100644 index 6b137f4114..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/card/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { View } from 'react-native'; -import { cardStyle } from './styles'; - -type ICardProps = React.ComponentProps & - VariantProps; - -const Card = React.forwardRef( - ( - { className, size = 'md', variant = 'elevated', ...props }: ICardProps, - ref?: any - ) => { - return ( - - ); - } -); - -Card.displayName = 'Card'; - -export { Card }; diff --git a/example/storybook-v7/src/core-components/nativewind/card/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/card/index.web.tsx deleted file mode 100644 index ed012bcf38..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/card/index.web.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { cardStyle } from './styles'; - -const Card = ({ - className, - size = 'md', - variant = 'elevated', - ...props -}: any) => { - return ( -
- ); -}; - -Card.displayName = 'Card'; - -export { Card }; diff --git a/example/storybook-v7/src/core-components/nativewind/card/styles.tsx b/example/storybook-v7/src/core-components/nativewind/card/styles.tsx deleted file mode 100644 index 59de8b7eb7..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/card/styles.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; -const baseStyle = isWeb ? 'flex flex-col relative z-0' : ''; - -export const cardStyle = tva({ - base: baseStyle, - variants: { - size: { - sm: 'p-3 rounded', - md: 'p-4 rounded-md', - lg: 'p-6 rounded-xl', - }, - variant: { - elevated: 'bg-background-0', - outline: 'border border-outline-200 ', - ghost: 'rounded-none', - filled: 'bg-background-50', - }, - }, -}); diff --git a/example/storybook-v7/src/core-components/nativewind/center/index.tsx b/example/storybook-v7/src/core-components/nativewind/center/index.tsx deleted file mode 100644 index f5bc459a7c..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/center/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { View } from 'react-native'; -import React from 'react'; -import { centerStyle } from './styles'; - -const Center = ({ className, ...props }: any) => { - return ; -}; - -Center.displayName = 'Center'; - -export { Center }; diff --git a/example/storybook-v7/src/core-components/nativewind/center/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/center/index.web.tsx deleted file mode 100644 index 9bdb3b2b3b..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/center/index.web.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { centerStyle } from './styles'; - -const Center = ({ className, ...props }: any) => { - return
; -}; - -Center.displayName = 'Center'; - -export { Center }; diff --git a/example/storybook-v7/src/core-components/nativewind/center/styles.tsx b/example/storybook-v7/src/core-components/nativewind/center/styles.tsx deleted file mode 100644 index 8b744bc250..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/center/styles.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; - -const baseStyle = isWeb ? 'flex flex-col relative z-0' : ''; - -export const centerStyle = tva({ - base: `justify-center items-center ${baseStyle}`, -}); diff --git a/example/storybook-v7/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-v7/src/core-components/nativewind/checkbox/index.tsx deleted file mode 100644 index d0e87c434a..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/checkbox/index.tsx +++ /dev/null @@ -1,261 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { createCheckbox } from '@gluestack-ui/checkbox'; -import { View, Pressable, Text } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { Svg } from 'react-native-svg'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { Platform } from 'react-native'; - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const SCOPE = 'CHECKBOX'; -const UICheckbox = createCheckbox({ - // @ts-ignore - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(Pressable, SCOPE), - Group: Platform.OS === 'web' ? View : withStates(View), - Icon: Platform.OS === 'web' ? PrimitiveIcon : withStates(PrimitiveIcon), - Label: Platform.OS === 'web' ? Text : withStates(Text), - Indicator: Platform.OS === 'web' ? View : withStates(View), -}); - -cssInterop(UICheckbox, { className: 'style' }); -cssInterop(UICheckbox.Group, { className: 'style' }); -cssInterop(UICheckbox.Label, { className: 'style' }); -cssInterop(UICheckbox.Indicator, { className: 'style' }); -cssInterop(UICheckbox.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -const checkboxStyle = tva({ - base: 'group/checkbox flex-row items-center justify-start gap-2 web:cursor-pointer data-[disabled=true]:cursor-not-allowed', -}); - -const checkboxIndicatorStyle = tva({ - base: 'justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-primary-700 data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 group-hover/checkbox:data-[checked=false]:border-outline-500 group-hover/checkbox:bg-transparent group-hover/checkbox:data-[invalid=true]:border-error-700 group-hover/checkbox:data-[checked=true]:bg-primary-700 group-hover/checkbox:data-[checked=true]:border-primary-700 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:border-primary-600 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:bg-primary-600 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:opacity-40 group-hover/checkbox:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 group-hover/checkbox:data-[disabled=true]:border-outline-400 group-hover/checkbox:data-[disabled=true]:data-[invalid=true]:border-error-700 active:data-[checked=true]:bg-primary-800 active:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40', - parentVariants: { - size: { - lg: 'w-6 h-6 border-[3px]', - md: 'w-5 h-5 border-2', - sm: 'w-4 h-4 border-2', - }, - }, -}); - -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-400 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none', - parentVariants: { - size: { - lg: 'text-lg', - md: 'text-base', - sm: 'text-sm', - }, - }, -}); - -const checkboxIconStyle = tva({ - base: 'data-[disabled=true]:opacity-40', - - parentVariants: { - size: { - sm: 'h-3 w-3', - md: 'h-4 w-4', - lg: 'h-5 w-5', - }, - }, -}); - -const CheckboxGroup = UICheckbox.Group; - -type ICheckboxProps = React.ComponentProps & - VariantProps; -const Checkbox = React.forwardRef( - ( - { - className, - size = 'md', - ...props - }: { className?: string; size?: string } & ICheckboxProps, - ref?: any - ) => { - return ( - - ); - } -); - -type ICheckboxIndicatorProps = React.ComponentProps< - typeof UICheckbox.Indicator -> & - VariantProps; - -const CheckboxIndicator = React.forwardRef( - ( - { className, ...props }: { className?: string } & ICheckboxIndicatorProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -type ICheckboxLabelProps = React.ComponentProps & - VariantProps; -const CheckboxLabel = React.forwardRef( - ( - { className, ...props }: { className?: string } & ICheckboxLabelProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - return ( - - ); - } -); - -type ICheckboxIconProps = React.ComponentProps & - VariantProps; -const CheckboxIcon = React.forwardRef( - ( - { - className, - size, - color = 'gray', - ...props - }: ICheckboxIconProps & { - className?: any; - fill?: string; - color?: string; - as?: any; - }, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - - return ( - - ); - } -); - -Checkbox.displayName = 'Checkbox'; -CheckboxIndicator.displayName = 'CheckboxIndicator'; -CheckboxLabel.displayName = 'CheckboxLabel'; -CheckboxIcon.displayName = 'CheckboxIcon'; - -export { - Checkbox, - CheckboxIndicator, - CheckboxLabel, - CheckboxIcon, - CheckboxGroup, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/divider/index.tsx b/example/storybook-v7/src/core-components/nativewind/divider/index.tsx deleted file mode 100644 index d2849534ff..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/divider/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client'; -import { createDivider } from '@gluestack-ui/divider'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { View } from 'react-native'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; - -import React from 'react'; -const dividerStyle = tva({ - base: 'bg-background-200', - variants: { - orientation: { - vertical: 'w-px h-full', - horizontal: 'h-px w-full', - }, - }, -}); - -const UIDivider = createDivider({ Root: View }); - -cssInterop(UIDivider, { className: 'style' }); - -const Divider = React.forwardRef( - ({ className, orientation = 'horizontal', ...props }: any, ref?: any) => { - return ( - - ); - } -); - -Divider.displayName = 'Divider'; - -export { Divider }; diff --git a/example/storybook-v7/src/core-components/nativewind/fab/index.tsx b/example/storybook-v7/src/core-components/nativewind/fab/index.tsx deleted file mode 100644 index e8f366aaaa..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/fab/index.tsx +++ /dev/null @@ -1,270 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { createFab } from '@gluestack-ui/fab'; -import { Platform, Text } from 'react-native'; -import { Pressable } from 'react-native'; -import { Svg } from 'react-native-svg'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const SCOPE = 'FAB'; -const UIFab = createFab({ - Root: - Platform.OS === 'web' - ? withStyleContext(Pressable, SCOPE) - : withStyleContextAndStates(Pressable, SCOPE), - Label: Text, - Icon: PrimitiveIcon, -}); - -cssInterop(UIFab, { className: 'style' }); -cssInterop(UIFab.Label, { className: 'style' }); -cssInterop(UIFab.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -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]: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', - md: 'px-3 py-3', - lg: 'px-4 py-4', - }, - placement: { - 'top right': 'top-4 right-4', - 'top left': 'top-4 left-4', - 'bottom right': 'bottom-4 right-4', - 'bottom left': 'bottom-4 left-4', - 'top center': 'top-4 self-center', - 'bottom center': 'bottom-4 self-center', - }, - }, -}); - -const fabLabelStyle = tva({ - base: 'text-typography-50 font-normal font-body tracking-md text-left mx-2', - variants: { - isTruncated: { - true: '', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, - parentVariants: { - size: { - sm: 'text-sm', - md: 'text-base', - lg: 'text-lg', - }, - }, -}); - -const fabIconStyle = tva({ - base: '', - variants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'w-[18px] h-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -type IFabProps = Omit, 'context'> & - VariantProps; -const Fab = React.forwardRef( - ( - { - size = 'md', - placement = 'bottom right', - className, - ...props - }: { className?: string } & IFabProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IFabLabelProps = React.ComponentProps & - VariantProps; -const FabLabel = React.forwardRef( - ( - { - size, - isTruncated = false, - bold = false, - underline = false, - strikeThrough = false, - className, - ...props - }: { className?: string } & IFabLabelProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - return ( - - ); - } -); - -type IFabIconProps = React.ComponentProps & - VariantProps; -const FabIcon = React.forwardRef( - ( - { - size, - className, - color = 'gray', - ...props - }: { - className?: string; - as?: any; - fill?: string; - color?: string; - } & IFabIconProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -Fab.displayName = 'Fab'; -FabLabel.displayName = 'FabLabel'; -FabIcon.displayName = 'FabIcon'; - -export { Fab, FabLabel, FabIcon }; diff --git a/example/storybook-v7/src/core-components/nativewind/flat-list/index.tsx b/example/storybook-v7/src/core-components/nativewind/flat-list/index.tsx deleted file mode 100644 index 4ccadcd66c..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/flat-list/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { FlatList } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/form-control/index.tsx b/example/storybook-v7/src/core-components/nativewind/form-control/index.tsx deleted file mode 100644 index 6027d1d421..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/form-control/index.tsx +++ /dev/null @@ -1,492 +0,0 @@ -'use client'; -import { Text, View } from 'react-native'; -import React, { useMemo } from 'react'; -import { Svg } from 'react-native-svg'; -import { createFormControl } from '@gluestack-ui/form-control'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { cssInterop } from 'nativewind'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const SCOPE = 'FORM_CONTROL'; - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const formControlStyle = tva({ - base: 'flex flex-col', - variants: { - size: { - sm: '', - md: '', - lg: '', - }, - }, -}); - -const formControlErrorIconStyle = tva({ - base: '', - variants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'h-[18px] w-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -const formControlErrorStyle = tva({ - base: 'flex flex-row justify-start items-center mt-1 gap-1', -}); - -const formControlErrorTextStyle = tva({ - base: 'text-error-700', - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -const formControlHelperStyle = tva({ - base: 'flex flex-row justify-start items-center mt-1', -}); - -const formControlHelperTextStyle = tva({ - base: 'text-typography-500', - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -const formControlLabelStyle = tva({ - base: 'flex flex-row justify-start items-center mb-1', -}); - -const formControlLabelTextStyle = tva({ - base: 'font-medium text-typography-900', - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -const formControlLabelAstrickStyle = tva({ - base: 'font-medium text-typography-900', - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -const FormControlLabelAstrick = ({ className, ...props }: any) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); -}; - -export const UIFormControl = createFormControl({ - Root: withStyleContext(View, SCOPE), - Error: View, - ErrorText: Text, - ErrorIcon: PrimitiveIcon, - Label: View, - LabelText: Text, - LabelAstrick: FormControlLabelAstrick, - Helper: View, - HelperText: Text, -}); - -cssInterop(UIFormControl, { className: 'style' }); -cssInterop(UIFormControl.Error, { className: 'style' }); -cssInterop(UIFormControl.Error.Text, { className: 'style' }); -cssInterop(UIFormControl.Label, { className: 'style' }); -cssInterop(UIFormControl.Label.Text, { className: 'style' }); -cssInterop(UIFormControl.Helper, { className: 'style' }); -cssInterop(UIFormControl.Helper.Text, { className: 'style' }); -cssInterop(UIFormControl.Error.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -type IFormControlProps = React.ComponentProps & - VariantProps; -const FormControl = ({ - className, - size = 'md', - ...props -}: { className?: string } & IFormControlProps) => { - return ( - - ); -}; - -type IFormControlErrorProps = React.ComponentProps & - VariantProps; -const FormControlError = ({ - className, - ...props -}: { className?: string } & IFormControlErrorProps) => { - return ( - - ); -}; - -type IFormControlErrorTextProps = React.ComponentProps< - typeof UIFormControl.Error.Text -> & - VariantProps; -const FormControlErrorText = ({ - className, - size, - ...props -}: { className?: string } & IFormControlErrorTextProps) => { - const { size: parentSize } = useStyleContext(SCOPE); - return ( - - ); -}; - -type IFormControlErrorIconProps = React.ComponentProps< - typeof UIFormControl.Error.Icon -> & - VariantProps; -const FormControlErrorIcon = ( - { - className, - size, - color = 'red', - ...props - }: { - className?: any; - as?: any; - fill?: string; - color?: string; - } & IFormControlErrorIconProps, - ref?: any -) => { - const { size: parentSize } = useStyleContext(SCOPE); - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); -}; - -type IFormControlLabelProps = React.ComponentProps & - VariantProps; -const FormControlLabel = ({ - className, - ...props -}: { className?: string } & IFormControlLabelProps) => { - return ( - - ); -}; - -type IFormControlLabelTextProps = React.ComponentProps< - typeof UIFormControl.Label.Text -> & - VariantProps; -const FormControlLabelText = ({ - className, - size, - ...props -}: { className?: string } & IFormControlLabelTextProps) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); -}; - -type IFormControlHelperProps = React.ComponentProps< - typeof UIFormControl.Helper -> & - VariantProps; -const FormControlHelper = ({ - className, - ...props -}: { className?: string } & IFormControlHelperProps) => { - return ( - - ); -}; - -type IFormControlHelperTextProps = React.ComponentProps< - typeof UIFormControl.Helper.Text -> & - VariantProps; -const FormControlHelperText = ({ - className, - size, - ...props -}: { className?: string } & IFormControlHelperTextProps) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); -}; - -FormControl.displayName = 'FormControl'; -FormControlError.displayName = 'FormControlError'; -FormControlErrorText.displayName = 'FormControlErrorText'; -FormControlErrorIcon.displayName = 'FormControlErrorIcon'; -FormControlLabel.displayName = 'FormControlLabel'; -FormControlLabelText.displayName = 'FormControlLabelText'; -FormControlLabelAstrick.displayName = 'FormControlLabelAstrick'; -FormControlHelper.displayName = 'FormControlHelper'; -FormControlHelperText.displayName = 'FormControlHelperText'; - -export { - FormControl, - FormControlError, - FormControlErrorText, - FormControlErrorIcon, - FormControlLabel, - FormControlLabelText, - FormControlLabelAstrick, - FormControlHelper, - FormControlHelperText, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/config.ts b/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/config.ts deleted file mode 100644 index 65a2ae4f3a..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/config.ts +++ /dev/null @@ -1,298 +0,0 @@ -'use client'; -import { vars } from 'nativewind'; - -export const config = { - light: vars({ - '--color-primary-0': '#B3B3B3', - '--color-primary-50': '#999999', - '--color-primary-100': '#808080', - '--color-primary-200': '#737373', - '--color-primary-300': '#666666', - '--color-primary-400': '#525252', - '--color-primary-500': '#333333', - '--color-primary-600': '#292929', - '--color-primary-700': '#1F1F1F', - '--color-primary-800': '#0D0D0D', - '--color-primary-900': '#0A0A0A', - '--color-primary-950': '#080808', - - /* Secondary */ - '--color-secondary-0': '#FEFFFF', - '--color-secondary-50': '#F1F2F2', - '--color-secondary-100': '#E7E8E8', - '--color-secondary-200': '#DBDBDB', - '--color-secondary-300': '#AFB0B0', - '--color-secondary-400': '#727373', - '--color-secondary-500': '#5E5F5F', - '--color-secondary-600': '#515252', - '--color-secondary-700': '#3F4040', - '--color-secondary-800': '#272626', - '--color-secondary-900': '#181717', - '--color-secondary-950': '#0B0C0C', - - /* Tertiary */ - '--color-tertiary-0': '#FFFAF5', - '--color-tertiary-50': '#FFF2E5', - '--color-tertiary-100': '#FFE9D5', - '--color-tertiary-200': '#FED1AA', - '--color-tertiary-300': '#FDB474', - '--color-tertiary-400': '#FB9D4B', - '--color-tertiary-500': '#E78128', - '--color-tertiary-600': '#D7751F', - '--color-tertiary-700': '#B4621A', - '--color-tertiary-800': '#824917', - '--color-tertiary-900': '#6C3D13', - '--color-tertiary-950': '#543112', - - /* Error */ - '--color-error-0': '#FEE9E9', - '--color-error-50': '#FEE2E2', - '--color-error-100': '#FECACA', - '--color-error-200': '#FCA5A5', - '--color-error-300': '#F87171', - '--color-error-400': '#EF4444', - '--color-error-500': '#E63535', - '--color-error-600': '#DC2626', - '--color-error-700': '#B91C1C', - '--color-error-800': '#991B1B', - '--color-error-900': '#7F1D1D', - '--color-error-950': '#531313', - - /* Success */ - '--color-success-0': '#E4FFF4', - '--color-success-50': '#CAFFE8', - '--color-success-100': '#A2F1C0', - '--color-success-200': '#84D3A2', - '--color-success-300': '#66B584', - '--color-success-400': '#489766', - '--color-success-500': '#348352', - '--color-success-600': '#2A7948', - '--color-success-700': '#206F3E', - '--color-success-800': '#166534', - '--color-success-900': '#14532D', - '--color-success-950': '#1B3224', - - /* Warning */ - '--color-warning-0': '#FFFDFB', - '--color-warning-50': '#FFF9F5', - '--color-warning-100': '#FFE7D5', - '--color-warning-200': '#FECDAA', - '--color-warning-300': '#FDAD74', - '--color-warning-400': '#FB954B', - '--color-warning-500': '#E77828', - '--color-warning-600': '#D76C1F', - '--color-warning-700': '#B45A1A', - '--color-warning-800': '#824417', - '--color-warning-900': '#6C3813', - '--color-warning-950': '#542D12', - - /* Info */ - '--color-info-0': '#ECF8FE', - '--color-info-50': '#C7EBFC', - '--color-info-100': '#A2DDFA', - '--color-info-200': '#7CCFF8', - '--color-info-300': '#57C2F6', - '--color-info-400': '#32B4F4', - '--color-info-500': '#0DA6F2', - '--color-info-600': '#0B8DCD', - '--color-info-700': '#0973A8', - '--color-info-800': '#075A83', - '--color-info-900': '#05405D', - '--color-info-950': '#032638', - - /* Typography */ - '--color-typography-0': '#FEFEFF', - '--color-typography-50': '#F5F5F5', - '--color-typography-100': '#E5E5E5', - '--color-typography-200': '#DBDBDC', - '--color-typography-300': '#D4D4D4', - '--color-typography-400': '#A3A3A3', - '--color-typography-500': '#8C8C8C', - '--color-typography-600': '#737373', - '--color-typography-700': '#525252', - '--color-typography-800': '#404040', - '--color-typography-900': '#262627', - '--color-typography-950': '#171717', - - /* Outline */ - '--color-outline-0': '#FDFEFE', - '--color-outline-50': '#F3F3F3', - '--color-outline-100': '#E6E6E6', - '--color-outline-200': '#DDDCDB', - '--color-outline-300': '#D3D3D3', - '--color-outline-400': '#A5A3A3', - '--color-outline-500': '#8C8D8D', - '--color-outline-600': '#737474', - '--color-outline-700': '#535252', - '--color-outline-800': '#414141', - '--color-outline-900': '#272624', - '--color-outline-950': '#1A1717', - /* Background */ - '--color-background-0': '#FFFFFF', - '--color-background-50': '#F6F6F6', - '--color-background-100': '#F2F1F1', - '--color-background-200': '#DCDBDB', - '--color-background-300': '#D5D4D4', - '--color-background-400': '#A2A3A3', - '--color-background-500': '#8E8E8E', - '--color-background-600': '#747474', - '--color-background-700': '#535252', - '--color-background-800': '#414040', - '--color-background-900': '#272625', - '--color-background-950': '#181718', - - /* Background Special */ - '--color-background-error': '#FEF1F1', - '--color-background-warning': '#FFF4EB', - '--color-background-success': '#EDFCF2', - '--color-background-muted': '#F6F6F7', - '--color-background-info': '#EBF8FE', - }), - dark: vars({ - '--color-primary-0': '#828282', - '--color-primary-50': '#949494', - '--color-primary-100': '#9E9E9E', - '--color-primary-200': '#B3B3B3', - '--color-primary-300': '#C7C7C7', - '--color-primary-400': '#E6E6E6', - '--color-primary-500': '#F0F0F0', - '--color-primary-600': '#FAFAFA', - '--color-primary-700': '#FCFCFC', - '--color-primary-800': '#FDFDFD', - '--color-primary-900': '#FDFCFC', - '--color-primary-950': '#FDFCFC', - - /* Secondary */ - '--color-secondary-0': '#0B0C0C', - '--color-secondary-50': '#181717', - '--color-secondary-100': '#272626', - '--color-secondary-200': '#3F4040', - '--color-secondary-300': '#515252', - '--color-secondary-400': '#5E5F5F', - '--color-secondary-500': '#727373', - '--color-secondary-600': '#AFB0B0', - '--color-secondary-700': '#DBDBDB', - '--color-secondary-800': '#E7E8E8', - '--color-secondary-900': '#F1F2F2', - '--color-secondary-950': '#FEFFFF', - - /* Tertiary */ - '--color-tertiary-0': '#543112', - '--color-tertiary-50': '#6C3D13', - '--color-tertiary-100': '#824917', - '--color-tertiary-200': '#B4621A', - '--color-tertiary-300': '#D7751F', - '--color-tertiary-400': '#E78128', - '--color-tertiary-500': '#FB9D4B', - '--color-tertiary-600': '#FDB474', - '--color-tertiary-700': '#FED1AA', - '--color-tertiary-800': '#FFE9D5', - '--color-tertiary-900': '#FFF2E5', - '--color-tertiary-950': '#FFFAF5', - - /* Error */ - '--color-error-0': '#531313', - '--color-error-50': '#7F1D1D', - '--color-error-100': '#991B1B', - '--color-error-200': '#B91C1C', - '--color-error-300': '#DC2626', - '--color-error-400': '#E63535', - '--color-error-500': '#EF4444', - '--color-error-600': '#F87171', - '--color-error-700': '#E63534', - '--color-error-800': '#FECACA', - '--color-error-900': '#FEE2E2', - '--color-error-950': '#FEE9E9', - - /* Success */ - '--color-success-0': '#1B3224', - '--color-success-50': '#14532D', - '--color-success-100': '#166534', - '--color-success-200': '#206F3E', - '--color-success-300': '#2A7948', - '--color-success-400': '#348352', - '--color-success-500': '#489766', - '--color-success-600': '#66B584', - '--color-success-700': '#84D3A2', - '--color-success-800': '#A2F1C0', - '--color-success-900': '#CAFFE8', - '--color-success-950': '#E4FFF4', - - /* Warning */ - '--color-warning-0': '#542D12', - '--color-warning-50': '#6C3813', - '--color-warning-100': '#824417', - '--color-warning-200': '#B45A1A', - '--color-warning-300': '#D76C1F', - '--color-warning-400': '#E77828', - '--color-warning-500': '#FB954B', - '--color-warning-600': '#FDAD74', - '--color-warning-700': '#FECDAA', - '--color-warning-800': '#FFE7D5', - '--color-warning-900': '#FFF9F5', - '--color-warning-950': '#FFFDFB', - - /* Info */ - '--color-info-0': '#032638', - '--color-info-50': '#05405D', - '--color-info-100': '#075A83', - '--color-info-200': '#0973A8', - '--color-info-300': '#0B8DCD', - '--color-info-400': '#0DA6F2', - '--color-info-500': '#32B4F4', - '--color-info-600': '#57C2F6', - '--color-info-700': '#7CCFF8', - '--color-info-800': '#A2DDFA', - '--color-info-900': '#C7EBFC', - '--color-info-950': '#ECF8FE', - - /* Typography */ - '--color-typography-0': '#171717', - '--color-typography-50': '#262627', - '--color-typography-100': '#404040', - '--color-typography-200': '#525252', - '--color-typography-300': '#737373', - '--color-typography-400': '#8C8C8C', - '--color-typography-500': '#A3A3A3', - '--color-typography-600': '#D4D4D4', - '--color-typography-700': '#DBDBDC', - '--color-typography-800': '#E5E5E5', - '--color-typography-900': '#F5F5F5', - '--color-typography-950': '#FEFEFF', - - /* Outline */ - '--color-outline-0': '#1A1717', - '--color-outline-50': '#272624', - '--color-outline-100': '#414141', - '--color-outline-200': '#535252', - '--color-outline-300': '#737474', - '--color-outline-400': '#8C8D8D', - '--color-outline-500': '#A5A3A3', - '--color-outline-600': '#D3D3D3', - '--color-outline-700': '#DDDCDB', - '--color-outline-800': '#E6E6E6', - '--color-outline-900': '#F3F3F3', - '--color-outline-950': '#FDFEFE', - - /* Background */ - '--color-background-0': '#121212', - '--color-background-50': '#272625', - '--color-background-100': '#414040', - '--color-background-200': '#535252', - '--color-background-300': '#747474', - '--color-background-400': '#8E8E8E', - '--color-background-500': '#A2A3A3', - '--color-background-600': '#D5D4D4', - '--color-background-700': '#DCDBDB', - '--color-background-800': '#F2F1F1', - '--color-background-900': '#F6F6F6', - '--color-background-950': '#FEFEFE', - - /* Background Special */ - '--color-background-error': '#422B2B', - '--color-background-warning': '#412F23', - '--color-background-success': '#1C2B21', - '--color-background-muted': '#252526', - '--color-background-info': '#1A282E', - }), -}; diff --git a/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/index.tsx b/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/index.tsx deleted file mode 100644 index 4dc2cfe625..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { config } from './config'; -import { View } from 'react-native'; -import { OverlayProvider } from '@gluestack-ui/overlay'; -import { ToastProvider } from '@gluestack-ui/toast'; - -export function GluestackUIProvider({ - mode = 'light', - ...props -}: { - mode?: 'light' | 'dark'; - children?: any; -}) { - return ( - - - {props.children} - - - ); -} diff --git a/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx deleted file mode 100644 index 086a7295fc..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx +++ /dev/null @@ -1,36 +0,0 @@ -'use client'; -import React from 'react'; -import { config } from './config'; -import { OverlayProvider } from '@gluestack-ui/overlay'; -import { ToastProvider } from '@gluestack-ui/toast'; -import { setFlushStyles } from '@gluestack-ui/nativewind-utils/flush'; - -export function GluestackUIProvider({ - mode = 'light', - ...props -}: { - mode?: 'light' | 'dark'; - children?: any; -}) { - const stringcssvars = Object.keys(config[mode]).reduce((acc, cur) => { - acc += `${cur}:${config[mode][cur]};`; - return acc; - }, ''); - setFlushStyles(`:root {${stringcssvars}} `); - - if (config[mode] && typeof document !== 'undefined') { - const element = document.documentElement; - if (element) { - const head = element.querySelector('head'); - const style = document.createElement('style'); - style.innerHTML = `:root {${stringcssvars}} `; - if (head) head.appendChild(style); - } - } - - return ( - - {props.children} - - ); -} diff --git a/example/storybook-v7/src/core-components/nativewind/grid/index.tsx b/example/storybook-v7/src/core-components/nativewind/grid/index.tsx deleted file mode 100644 index 9ba5e0d6ab..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/grid/index.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import React, { - useEffect, - useState, - createContext, - useContext, - useMemo, - forwardRef, -} from 'react'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { View } from 'react-native'; -import { gridStyle, gridItemStyle } from './styles'; -import { cssInterop } from 'nativewind'; - -const GridContext = createContext({}); -type IGridProps = React.ComponentProps & - VariantProps & { - gap?: number; - rowGap?: number; - columnGap?: number; - flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; - padding?: number; - paddingLeft?: number; - paddingRight?: number; - paddingStart?: number; - paddingEnd?: number; - }; - -type IGridItemProps = React.ComponentProps & - VariantProps & { - index?: number; - }; - -function arrangeChildrenIntoRows({ - childrenArray, - colSpanArr, - numColumns, -}: { - childrenArray: React.ReactNode[]; - colSpanArr: number[]; - numColumns: number; -}) { - let currentRow = 1; - let currentRowTotalColSpan = 0; - - // store how many items in each row - const rowItemsCount: { - [key: number]: number[]; - } = {}; - - for (let i = 0; i < childrenArray.length; i++) { - const colSpan = colSpanArr[i]; - - // if current row is full, go to next row - if (currentRowTotalColSpan + colSpan > numColumns) { - currentRow++; - currentRowTotalColSpan = colSpan; - } else { - // if current row is not full, add colSpan to current row - currentRowTotalColSpan += colSpan; - } - - rowItemsCount[currentRow] = rowItemsCount[currentRow] - ? [...rowItemsCount[currentRow], i] - : [i]; - } - - return rowItemsCount; -} - -const Grid = forwardRef( - ( - { className, numColumns = 12, children, ...props }: IGridProps, - ref?: any - ) => { - const [calculatedWidth, setCalculatedWidth] = useState(null); - - const itemsPerRow = useMemo(() => { - // get the colSpan of each child - const colSpanArr = React.Children.map(children, (child: any) => { - const colSpan = child.props?.colSpan ? child.props.colSpan : 1; - - if (colSpan > numColumns) { - return numColumns; - } - - return colSpan; - }); - - const childrenArray = React.Children.toArray(children); - - const rowItemsCount = arrangeChildrenIntoRows({ - childrenArray, - colSpanArr, - numColumns, - }); - - return rowItemsCount; - }, [numColumns, children]); - - const contextValue = useMemo(() => { - return { - calculatedWidth, - numColumns, - itemsPerRow, - flexDirection: props?.flexDirection || 'row', - gap: props?.gap || 0, - columnGap: props?.columnGap || 0, - }; - }, [calculatedWidth, itemsPerRow, numColumns, props]); - - const childrenWithProps = React.Children.map(children, (child, index) => { - if (React.isValidElement(child)) { - return React.cloneElement(child, { index } as any); - } - - return child; - }); - - return ( - - { - const paddingLeftToSubtract = - props?.paddingStart || props?.paddingLeft || props?.padding || 0; - - const paddingRightToSubtract = - props?.paddingEnd || props?.paddingRight || props?.padding || 0; - - const width = - event.nativeEvent.layout.width - - paddingLeftToSubtract - - paddingRightToSubtract; - - setCalculatedWidth(width); - }} - {...props} - > - {calculatedWidth && childrenWithProps} - - - ); - } -); - -//@ts-ignore -cssInterop(Grid, { - className: { - target: 'style', - nativeStyleToProp: { - gap: 'gap', - rowGap: 'rowGap', - columnGap: 'columnGap', - flexDirection: 'flexDirection', - padding: 'padding', - paddingLeft: 'paddingLeft', - paddingRight: 'paddingRight', - paddingStart: 'paddingStart', - paddingEnd: 'paddingEnd', - }, - }, -}); - -const GridItem = forwardRef( - ({ className, colSpan = 1, ...props }: IGridItemProps, ref?: any) => { - const [flexBasisValue, setFlexBasisValue] = useState< - number | string | null - >('auto'); - - const { - calculatedWidth, - numColumns, - itemsPerRow, - flexDirection, - gap, - columnGap, - } = useContext(GridContext); - - useEffect(() => { - if ( - !flexDirection?.includes('column') && - calculatedWidth && - numColumns > 0 && - colSpan > 0 - ) { - // find out in which row of itemsPerRow the current item's index is - const row = Object.keys(itemsPerRow).find((key) => { - return itemsPerRow[key].includes(props?.index); - }); - - const rowColsCount = itemsPerRow[row as string].length; - - const space = columnGap || gap || 0; - - const gutterOffset = - space * - (rowColsCount === 1 && colSpan < numColumns ? 2 : rowColsCount - 1); - - const flexBasisValue = - Math.min( - (((calculatedWidth - gutterOffset) * colSpan) / - numColumns / - calculatedWidth) * - 100, - 100 - ) + '%'; - - setFlexBasisValue(flexBasisValue); - } - }, [calculatedWidth, colSpan, numColumns, columnGap, gap, flexDirection]); // eslint-disable-line react-hooks/exhaustive-deps - - return ( - - ); - } -); - -Grid.displayName = 'Grid'; -GridItem.displayName = 'GridItem'; - -export { Grid, GridItem }; diff --git a/example/storybook-v7/src/core-components/nativewind/grid/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/grid/index.web.tsx deleted file mode 100644 index b5ddea5e25..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/grid/index.web.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { gridStyle, gridItemStyle } from './styles'; - -const Grid = ({ className, numColumns = 12, ...props }: any) => { - return ( -
- ); -}; - -const GridItem = ({ className, colSpan = 1, ...props }: any) => { - return ( -
- ); -}; -Grid.displayName = 'Grid'; -GridItem.displayName = 'GridItem'; -export { Grid, GridItem }; diff --git a/example/storybook-v7/src/core-components/nativewind/grid/styles.tsx b/example/storybook-v7/src/core-components/nativewind/grid/styles.tsx deleted file mode 100644 index 3d1dc1da3c..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/grid/styles.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; - -const gridBaseStyle = isWeb ? 'grid grid-cols-12' : ''; -const gridItemBaseStyle = isWeb ? 'col-span-1 w-auto' : ''; - -export const gridStyle = tva({ - base: `flex-row w-full flex-wrap justify-start box-border ${gridBaseStyle}`, - variants: { - numColumns: { - 1: 'grid-cols-1', - 2: 'grid-cols-2', - 3: 'grid-cols-3', - 4: 'grid-cols-4', - 5: 'grid-cols-5', - 6: 'grid-cols-6', - 7: 'grid-cols-7', - 8: 'grid-cols-8', - 9: 'grid-cols-9', - 10: 'grid-cols-10', - 11: 'grid-cols-11', - 12: 'grid-cols-12', - }, - }, -}); - -export const gridItemStyle = tva({ - base: `w-full ${gridItemBaseStyle}`, - variants: { - colSpan: { - 1: 'col-span-1', - 2: 'col-span-2', - 3: 'col-span-3', - 4: 'col-span-4', - 5: 'col-span-5', - 6: 'col-span-6', - 7: 'col-span-7', - 8: 'col-span-8', - 9: 'col-span-9', - 10: 'col-span-10', - 11: 'col-span-11', - 12: 'col-span-12', - }, - }, -}); diff --git a/example/storybook-v7/src/core-components/nativewind/heading/index.tsx b/example/storybook-v7/src/core-components/nativewind/heading/index.tsx deleted file mode 100644 index 5ca7bcc978..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/heading/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useCallback } from 'react'; -import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; -import { cssInterop } from 'nativewind'; -import { headingStyle } from './styles'; - -const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => { - const MappedHeading = useCallback( - () => { - switch (size) { - case '5xl': - case '4xl': - case '3xl': - cssInterop(H1, { className: 'style' }); - return ( -

- ); - case '2xl': - cssInterop(H2, { className: 'style' }); - return ( -

- ); - case 'xl': - cssInterop(H3, { className: 'style' }); - return ( -

- ); - case 'lg': - cssInterop(H4, { className: 'style' }); - return ( -

- ); - case 'md': - cssInterop(H5, { className: 'style' }); - return ( -

- ); - case 'sm': - case 'xs': - cssInterop(H6, { className: 'style' }); - return ( -
- ); - default: - cssInterop(H4, { className: 'style' }); - return ( -

- ); - } - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [size] - ); - - if (AsComp) { - return ( - - ); - } - - return ; -}; - -Heading.displayName = 'Heading'; - -export { Heading }; diff --git a/example/storybook-v7/src/core-components/nativewind/heading/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/heading/index.web.tsx deleted file mode 100644 index 48ad1a818b..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/heading/index.web.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, { memo } from 'react'; -import { headingStyle } from './styles'; - -const Heading = memo( - ({ className, size = 'lg', as: AsComp, ...props }: any) => { - const MappedHeading = ({ size }: any) => { - switch (size) { - case '5xl': - case '4xl': - case '3xl': - return ( -

- ); - case '2xl': - return ( -

- ); - case 'xl': - return ( -

- ); - case 'lg': - return ( -

- ); - case 'md': - return ( -

- ); - case 'sm': - case 'xs': - return ( -
- ); - default: - return ( -

- ); - } - }; - - if (AsComp) { - return ( - - ); - } - - return ; - } -); - -Heading.displayName = 'Heading'; - -export { Heading }; diff --git a/example/storybook-v7/src/core-components/nativewind/heading/styles.tsx b/example/storybook-v7/src/core-components/nativewind/heading/styles.tsx deleted file mode 100644 index 484165bd70..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/heading/styles.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { tva } from '@gluestack-ui/nativewind-utils/tva'; - -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; -const baseStyle = isWeb - ? 'font-sans tracking-sm bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word' - : ''; - -export const headingStyle = tva({ - base: `text-typography-900 font-bold font-heading tracking-sm my-0 ${baseStyle}`, - variants: { - isTruncated: { - true: 'truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - sub: { - true: 'text-xs', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - size: { - '5xl': 'text-6xl', - '4xl': 'text-5xl', - '3xl': 'text-4xl', - '2xl': 'text-3xl', - 'xl': 'text-2xl', - 'lg': 'text-xl', - 'md': 'text-lg', - 'sm': 'text-base', - 'xs': 'text-sm', - }, - }, -}); diff --git a/example/storybook-v7/src/core-components/nativewind/hstack/index.tsx b/example/storybook-v7/src/core-components/nativewind/hstack/index.tsx deleted file mode 100644 index b3123041ef..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/hstack/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { View } from 'react-native'; -import { hstackStyle } from './styles'; - -type IHStackProps = React.ComponentProps & - VariantProps; - -const HStack = React.forwardRef( - ({ className, space, reversed, ...props }: IHStackProps, ref?: any) => { - return ( - - ); - } -); - -HStack.displayName = 'HStack'; - -export { HStack }; diff --git a/example/storybook-v7/src/core-components/nativewind/hstack/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/hstack/index.web.tsx deleted file mode 100644 index df827dcf5b..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/hstack/index.web.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { hstackStyle } from './styles'; - -type IHStackProps = React.ComponentProps<'div'> & - VariantProps; - -const HStack = React.forwardRef( - ({ className, space, reversed, ...props }: IHStackProps, ref?: any) => { - return ( -
- ); - } -); - -HStack.displayName = 'HStack'; - -export { HStack }; diff --git a/example/storybook-v7/src/core-components/nativewind/hstack/styles.tsx b/example/storybook-v7/src/core-components/nativewind/hstack/styles.tsx deleted file mode 100644 index f02fb7cbe5..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/hstack/styles.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; - -const baseStyle = isWeb - ? 'flex relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none' - : ''; - -export const hstackStyle = tva({ - base: `flex-row ${baseStyle}`, - variants: { - space: { - 'xs': 'gap-1', - 'sm': 'gap-2', - 'md': 'gap-3', - 'lg': 'gap-4', - 'xl': 'gap-5', - '2xl': 'gap-6', - '3xl': 'gap-7', - '4xl': 'gap-8', - }, - reversed: { - true: 'flex-row-reverse', - }, - }, -}); diff --git a/example/storybook-v7/src/core-components/nativewind/icon/index.tsx b/example/storybook-v7/src/core-components/nativewind/icon/index.tsx deleted file mode 100644 index 924b868cae..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/icon/index.tsx +++ /dev/null @@ -1,1606 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { createIcon } from '@gluestack-ui/icon'; -import { Path, Svg } from 'react-native-svg'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { cssInterop } from 'nativewind'; - -const PrimitiveIcon = React.forwardRef( - ( - { - height, - width, - fill = 'none', - color, - size, - stroke = 'currentColor', - as: AsComp, - ...props - }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - let colorProps = - stroke === 'currentColor' && color !== undefined ? color : stroke; - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -export const UIIcon = createIcon({ - Root: PrimitiveIcon, -}); - -const iconStyle = tva({ - base: '', - variants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'h-[18px] w-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -// @ts-ignore -cssInterop(UIIcon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - fill: 'fill', - color: 'color', - }, - }, -}); - -export const Icon = React.forwardRef( - ({ size = 'md', className, ...props }: any, ref?: any) => { - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -type ParameterTypes = Omit[0], 'Root'>; - -const createIconUI = ({ ...props }: ParameterTypes) => { - const UIIcon = createIcon({ Root: Svg, ...props }); - - return React.forwardRef(({ className, size, ...props }: any, ref) => { - return ( - - ); - }); -}; -export { createIconUI as createIcon }; -// All Icons -const AddIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -AddIcon.displayName = 'AddIcon'; -export { AddIcon }; - -const AlertCircleIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -AlertCircleIcon.displayName = 'AlertCircleIcon'; -export { AlertCircleIcon }; - -const ArrowUpIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ArrowDownIcon = createIcon({ - Root: Svg, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ArrowRightIcon = createIcon({ - Root: Svg, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ArrowLeftIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -ArrowUpIcon.displayName = 'ArrowUpIcon'; -ArrowDownIcon.displayName = 'ArrowDownIcon'; -ArrowRightIcon.displayName = 'ArrowRightIcon'; -ArrowLeftIcon.displayName = 'ArrowLeftIcon'; - -export { ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ArrowLeftIcon }; - -const AtSignIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - <> - - - - - ), -}); - -AtSignIcon.displayName = 'AtSignIcon'; - -export { AtSignIcon }; - -const BellIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -BellIcon.displayName = 'BellIcon'; - -export { BellIcon }; - -const CalendarDaysIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - - - - - - ), -}); - -CalendarDaysIcon.displayName = 'CalendarDaysIcon'; - -export { CalendarDaysIcon }; - -const CheckIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -const CheckCircleIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -CheckIcon.displayName = 'CheckIcon'; -CheckCircleIcon.displayName = 'CheckCircleIcon'; - -export { CheckIcon, CheckCircleIcon }; - -const ChevronUpIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - d: 'M12 10L8 6L4 10', - path: ( - <> - - - ), -}); - -const ChevronDownIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -const ChevronLeftIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -const ChevronRightIcon = createIcon({ - Root: Svg, - - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -const ChevronsLeftIcon = createIcon({ - Root: Svg, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ChevronsRightIcon = createIcon({ - Root: Svg, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ChevronsUpDownIcon = createIcon({ - Root: Svg, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -ChevronUpIcon.displayName = 'ChevronUpIcon'; -ChevronDownIcon.displayName = 'ChevronDownIcon'; -ChevronLeftIcon.displayName = 'ChevronLeftIcon'; -ChevronRightIcon.displayName = 'ChevronRightIcon'; -ChevronsLeftIcon.displayName = 'ChevronsLeftIcon'; -ChevronsRightIcon.displayName = 'ChevronsRightIcon'; -ChevronsUpDownIcon.displayName = 'ChevronsUpDownIcon'; - -export { - ChevronUpIcon, - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, - ChevronsLeftIcon, - ChevronsRightIcon, - ChevronsUpDownIcon, -}; - -const CircleIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -CircleIcon.displayName = 'CircleIcon'; - -export { CircleIcon }; - -const ClockIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -ClockIcon.displayName = 'ClockIcon'; - -export { ClockIcon }; - -const CloseIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const CloseCircleIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -CloseIcon.displayName = 'CloseIcon'; -CloseCircleIcon.displayName = 'CloseCircleIcon'; - -export { CloseIcon, CloseCircleIcon }; - -const CopyIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -CopyIcon.displayName = 'CopyIcon'; - -export { CopyIcon }; - -const DownloadIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -DownloadIcon.displayName = 'DownloadIcon'; -export { DownloadIcon }; - -const EditIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -EditIcon.displayName = 'EditIcon'; -export { EditIcon }; - -const EyeIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -EyeIcon.displayName = 'EyeIcon'; - -const EyeOffIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - ), -}); - -EyeOffIcon.displayName = 'EyeOffIcon'; -export { EyeIcon, EyeOffIcon }; - -const FavouriteIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -FavouriteIcon.displayName = 'FavouriteIcon'; -export { FavouriteIcon }; - -const GlobeIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -GlobeIcon.displayName = 'GlobeIcon'; -export { GlobeIcon }; - -const GripVerticalIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - - ), -}); - -GripVerticalIcon.displayName = 'GripVerticalIcon'; -export { GripVerticalIcon }; - -const HelpCircleIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -HelpCircleIcon.displayName = 'HelpCircleIcon'; -export { HelpCircleIcon }; - -const InfoIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -InfoIcon.displayName = 'InfoIcon'; -export { InfoIcon }; - -const LinkIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -LinkIcon.displayName = 'LinkIcon'; - -const ExternalLinkIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -ExternalLinkIcon.displayName = 'ExternalLinkIcon'; -export { LinkIcon, ExternalLinkIcon }; - -const LoaderIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -LoaderIcon.displayName = 'LoaderIcon'; -export { LoaderIcon }; - -const LockIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -LockIcon.displayName = 'LockIcon'; -export { LockIcon }; - -const MailIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -MailIcon.displayName = 'MailIcon'; -export { MailIcon }; - -const MenuIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -MenuIcon.displayName = 'MenuIcon'; -export { MenuIcon }; - -const MessageCircleIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -MessageCircleIcon.displayName = 'MessageCircleIcon'; - -export { MessageCircleIcon }; - -const MoonIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -MoonIcon.displayName = 'MoonIcon'; -export { MoonIcon }; - -const PaperclipIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -PaperclipIcon.displayName = 'PaperclipIcon'; -export { PaperclipIcon }; - -const PhoneIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -PhoneIcon.displayName = 'PhoneIcon'; -export { PhoneIcon }; - -const PlayIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -PlayIcon.displayName = 'PlayIcon'; -export { PlayIcon }; - -const RemoveIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -RemoveIcon.displayName = 'RemoveIcon'; -export { RemoveIcon }; - -const RepeatIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - ), -}); - -RepeatIcon.displayName = 'RepeatIcon'; - -const Repeat1Icon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - ), -}); - -Repeat1Icon.displayName = 'Repeat1Icon'; -export { RepeatIcon, Repeat1Icon }; - -const SearchIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -SearchIcon.displayName = 'SearchIcon'; -export { SearchIcon }; - -const SettingsIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -SettingsIcon.displayName = 'SettingsIcon'; -export { SettingsIcon }; - -const ShareIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - ), -}); - -ShareIcon.displayName = 'ShareIcon'; -export { ShareIcon }; - -const SlashIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -SlashIcon.displayName = 'SlashIcon'; -export { SlashIcon }; - -const StarIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -StarIcon.displayName = 'StarIcon'; -export { StarIcon }; - -const SunIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - - - - - ), -}); - -SunIcon.displayName = 'SunIcon'; -export { SunIcon }; - -const ThreeDotsIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -ThreeDotsIcon.displayName = 'ThreeDotsIcon'; -export { ThreeDotsIcon }; - -const TrashIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -TrashIcon.displayName = 'TrashIcon'; -export { TrashIcon }; - -const UnlockIcon = createIcon({ - Root: Svg, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -UnlockIcon.displayName = 'UnlockIcon'; -export { UnlockIcon }; diff --git a/example/storybook-v7/src/core-components/nativewind/image-background/index.tsx b/example/storybook-v7/src/core-components/nativewind/image-background/index.tsx deleted file mode 100644 index 3d856c71cd..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/image-background/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -'use client'; -import { ImageBackground as RNImageBackground } from 'react-native'; -import React from 'react'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -export const ImageBackground = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - return ( - - ); - } -); diff --git a/example/storybook-v7/src/core-components/nativewind/image/index.tsx b/example/storybook-v7/src/core-components/nativewind/image/index.tsx deleted file mode 100644 index 40431e3dd2..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/image/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -'use client'; -import React from 'react'; -import { createImage } from '@gluestack-ui/image'; -import { Platform, Image as RNImage } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; - -const imageStyle = tva({ - base: 'max-w-full', - variants: { - size: { - '2xs': 'h-6 w-6', - 'xs': 'h-10 w-10', - 'sm': 'h-16 w-16', - 'md': 'h-20 w-20', - 'lg': 'h-24 w-24', - 'xl': 'h-32 w-32', - '2xl': 'h-64 w-64', - 'full': 'h-full w-full', - }, - }, -}); - -const UIImage = createImage({ Root: RNImage }); -cssInterop(UIImage, { className: 'style' }); - -type ImageProps = VariantProps & - React.ComponentProps; -const Image = ({ - size = 'md', - className, - ...props -}: { className?: any } & ImageProps) => { - return ( - - ); -}; - -Image.displayName = 'Image'; -export { Image }; diff --git a/example/storybook-v7/src/core-components/nativewind/index.ts b/example/storybook-v7/src/core-components/nativewind/index.ts deleted file mode 100644 index 4a63024bf5..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/index.ts +++ /dev/null @@ -1,49 +0,0 @@ -export * from './button'; -export * from './accordion'; -export * from './actionsheet'; -export * from './alert'; -export * from './alert-dialog'; -export * from './avatar'; -export * from './badge'; -export * from './box'; -export * from './flat-list'; -export * from './card'; -export * from './center'; -export * from './checkbox'; -export * from './grid'; -export * from './hstack'; -export * from './pressable'; -export * from './icon'; -export * from './heading'; -export * from './divider'; -export * from './fab'; -export * from './form-control'; -export * from './input'; -// export * from './input-accessory-view'; -export * from './image'; -export * from './keyboard-avoiding-view'; -export * from './link'; -export * from './menu'; -export * from './modal'; -export * from './popover'; -export * from './progress'; -export * from './text'; -export * from './radio'; -export * from './scroll-view'; -export * from './safe-area-view'; -export * from './select'; -export * from './slider'; -export * from './spinner'; -export * from './status-bar'; -export * from './section-list'; -export * from './switch'; -export * from './table'; -export * from './textarea'; -export * from './toast'; -export * from './tooltip'; -export * from './view'; -export * from './vstack'; -export { GluestackUIProvider } from './gluestack-ui-provider'; -export * from './virtualized-list'; -export * from './refresh-control'; -export * from './image-background'; diff --git a/example/storybook-v7/src/core-components/nativewind/input-accessory-view/index.tsx b/example/storybook-v7/src/core-components/nativewind/input-accessory-view/index.tsx deleted file mode 100644 index 25ebef794f..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/input-accessory-view/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { InputAccessoryView } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/input/index.tsx b/example/storybook-v7/src/core-components/nativewind/input/index.tsx deleted file mode 100644 index 0bdb447682..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/input/index.tsx +++ /dev/null @@ -1,269 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { createInput } from '@gluestack-ui/input'; -import { Svg } from 'react-native-svg'; -import { View, Pressable, TextInput, Platform } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from 'nativewind'; -import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -const SCOPE = 'INPUT'; - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const UIInput = createInput({ - // @ts-ignore - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE), - Icon: PrimitiveIcon, - Slot: Pressable, - Input: Platform.OS === 'web' ? TextInput : withStates(TextInput), -}); - -const inputStyle = tva({ - 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 items-center', - - variants: { - size: { - xl: 'h-12', - lg: 'h-11', - md: 'h-10', - sm: 'h-9', - }, - - 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]: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', - - outline: - '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]: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', - }, - }, -}); - -const inputIconStyle = tva({ - base: 'justify-center items-center', - parentVariants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'h-[18px] w-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -const inputSlotStyle = tva({ - base: 'justify-center items-center web:disabled:cursor-not-allowed', -}); - -const inputFieldStyle = tva({ - base: 'flex-1 text-typography-900 py-auto px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed', - - parentVariants: { - variant: { - underlined: 'web:outline-0 web:outline-none px-0', - outline: 'web:outline-0 web:outline-none', - rounded: 'web:outline-0 web:outline-none px-4', - }, - - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - 'lg': 'text-lg', - 'xl': 'text-xl', - '2xl': 'text-2xl', - '3xl': 'text-3xl', - '4xl': 'text-4xl', - '5xl': 'text-5xl', - '6xl': 'text-6xl', - }, - }, -}); - -cssInterop(UIInput, { className: 'style' }); -cssInterop(UIInput.Slot, { className: 'style' }); -cssInterop(UIInput.Input, { className: 'style' }); -// @ts-ignore -cssInterop(UIInput.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -type IInputProps = React.ComponentProps & - VariantProps; -const Input = React.forwardRef( - ( - { - className, - variant = 'outline', - size = 'md', - ...props - }: { className?: string } & IInputProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IInputIconProps = React.ComponentProps & { as: any }; -const InputIcon = React.forwardRef( - ( - { - className, - color = '#8C8C8C', - size, - ...props - }: { - className?: any; - fill?: string; - color?: string; - as?: any; - } & IInputIconProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -type IInputSlotProps = React.ComponentProps & - VariantProps; -const InputSlot = React.forwardRef( - ( - { className, ...props }: { className?: string } & IInputSlotProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IInputFieldProps = React.ComponentProps & - VariantProps; -const InputField = React.forwardRef( - ( - { className, ...props }: { className?: string } & IInputFieldProps, - ref?: any - ) => { - const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -Input.displayName = 'Input'; -InputIcon.displayName = 'InputIcon'; -InputSlot.displayName = 'InputSlot'; -InputField.displayName = 'InputField'; - -export { Input, InputField, InputIcon, InputSlot }; diff --git a/example/storybook-v7/src/core-components/nativewind/keyboard-avoiding-view/index.tsx b/example/storybook-v7/src/core-components/nativewind/keyboard-avoiding-view/index.tsx deleted file mode 100644 index 7fc72834b5..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/keyboard-avoiding-view/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { KeyboardAvoidingView } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/link/index.tsx b/example/storybook-v7/src/core-components/nativewind/link/index.tsx deleted file mode 100644 index 88b137de0a..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/link/index.tsx +++ /dev/null @@ -1,111 +0,0 @@ -'use client'; -import { createLink } from '@gluestack-ui/link'; -import { Pressable, Platform } from 'react-native'; -import { Text } from 'react-native'; - -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -import React from 'react'; -export const UILink = createLink({ - Root: - Platform.OS === 'web' - ? withStyleContext(Pressable) - : withStyleContextAndStates(Pressable), - Text: Platform.OS === 'web' ? Text : withStates(Text), -}); - -cssInterop(UILink, { className: 'style' }); -cssInterop(UILink.Text, { className: 'style' }); - -const linkStyle = tva({ - base: 'web:outline-0 web:data-[disabled=true]:cursor-not-allowed web:data-[focus-visible=true]:outline-2 web:data-[focus-visible=true]:outline-primary-700 web:data-[focus-visible=true]:outline data-[disabled=true]:opacity-40 group/link', -}); - -const linkTextStyle = tva({ - base: 'underline text-info-700 group-hover/link:text-info-600 group-hover/link:no-underline group-active/link:text-info-700 font-normal font-body web:font-sans web:tracking-sm web:my-0 web:bg-transparent web:border-0 web:box-border web:display-inline web:list-none web:margin-0 web:padding-0 web:position-relative web:text-start web:whitespace-pre-wrap web:word-wrap-break-word', - - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -type ILinkProps = React.ComponentProps & - VariantProps; -const Link = React.forwardRef( - ({ className, ...props }: { className?: string } & ILinkProps, ref?: any) => { - return ( - - ); - } -); - -type ILinkTextProps = React.ComponentProps & - VariantProps; -const LinkText = React.forwardRef( - ( - { - className, - size = 'md', - ...props - }: { className?: string } & ILinkTextProps, - ref?: any - ) => { - return ( - - ); - } -); - -Link.displayName = 'Link'; -LinkText.displayName = 'LinkText'; - -export { Link, LinkText }; diff --git a/example/storybook-v7/src/core-components/nativewind/menu/index.tsx b/example/storybook-v7/src/core-components/nativewind/menu/index.tsx deleted file mode 100644 index 3907b898cd..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/menu/index.tsx +++ /dev/null @@ -1,187 +0,0 @@ -'use client'; -import React from 'react'; -import { createMenu } from '@gluestack-ui/menu'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import { Pressable, Text } from 'react-native'; -import { Motion, AnimatePresence } from '@legendapp/motion'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const menuStyle = tva({ - base: 'min-w-[200px] py-2 rounded-sm bg-background-0', -}); - -const menuItemStyle = tva({ - base: 'p-3 flex-row items-center data-[hover=true]:bg-background-100 data-[active=true]:bg-background-200 data-[focus=true]:bg-background-100 data-[focus=true]:web:outline-noe data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent ', -}); - -const menuBackdropStyle = tva({ - base: 'absolute top-0 bottom-0 left-0 right-0 web:cursor-default', - // add this classnames if you want to give background color to backdrop - // opacity-50 bg-background-500, -}); - -const menuItemLabelStyle = tva({ - base: 'text-typography-700 font-normal font-body', - - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -const BackdropPressable = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - return ( - - ); - } -); - -type IMenuItemProps = VariantProps; - -const Item = React.forwardRef( - ( - { className, ...props }: { className?: string } & IMenuItemProps, - ref?: any - ) => { - return ( - - ); - } -); -export const UIMenu = createMenu({ - Root: Motion.View, - Item: Item, - Label: Text, - Backdrop: BackdropPressable, - AnimatePresence: AnimatePresence, -}); - -cssInterop(UIMenu, { className: 'style' }); -cssInterop(UIMenu.ItemLabel, { className: 'style' }); - -type IMenuProps = React.ComponentProps & - VariantProps; -type IMenuItemLabelProps = React.ComponentProps & - VariantProps; - -const Menu = React.forwardRef( - ({ className, ...props }: { className?: string } & IMenuProps, ref?: any) => { - return ( - - ); - } -); - -const MenuItem = UIMenu.Item; - -const MenuItemLabel = React.forwardRef( - ( - { - className, - isTruncated, - bold, - underline, - strikeThrough, - size = 'md', - sub, - italic, - highlight, - ...props - }: { className?: string } & IMenuItemLabelProps, - ref?: any - ) => { - return ( - - ); - } -); - -Menu.displayName = 'Menu'; -MenuItem.displayName = 'MenuItem'; -MenuItemLabel.displayName = 'MenuItemLabel'; - -export { Menu, MenuItem, MenuItemLabel }; diff --git a/example/storybook-v7/src/core-components/nativewind/modal/index.tsx b/example/storybook-v7/src/core-components/nativewind/modal/index.tsx deleted file mode 100644 index 810715d252..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/modal/index.tsx +++ /dev/null @@ -1,283 +0,0 @@ -'use client'; -import React from 'react'; -import { createModal } from '@gluestack-ui/modal'; -import { Pressable, View, ScrollView, Platform } from 'react-native'; -import { - Motion, - AnimatePresence, - createMotionAnimatedComponent, -} from '@legendapp/motion'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const AnimatedPressable = createMotionAnimatedComponent(Pressable); - -const SCOPE = 'MODAL'; - -const UIModal = createModal({ - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE), - Backdrop: AnimatedPressable, - Content: Motion.View, - Body: ScrollView, - CloseButton: Pressable, - Footer: View, - Header: View, - AnimatePresence: AnimatePresence, -}); -cssInterop(UIModal, { className: 'style' }); -cssInterop(UIModal.Backdrop, { className: 'style' }); -cssInterop(UIModal.Content, { className: 'style' }); -cssInterop(UIModal.CloseButton, { className: 'style' }); -cssInterop(UIModal.Header, { className: 'style' }); -cssInterop(UIModal.Body, { className: 'style' }); -cssInterop(UIModal.Footer, { className: 'style' }); - -const modalStyle = tva({ - base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none', - variants: { - size: { - xs: '', - sm: '', - md: '', - lg: '', - full: '', - }, - }, -}); - -const modalBackdropStyle = tva({ - base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default', -}); - -const modalContentStyle = tva({ - base: 'bg-background-50 rounded-lg overflow-hidden', - parentVariants: { - size: { - xs: 'w-[60%] max-w-[360px]', - sm: 'w-[70%] max-w-[420px]', - md: 'w-[80%] max-w-[510px]', - lg: 'w-[90%] max-w-[640px]', - full: 'w-full', - }, - }, -}); - -const modalBodyStyle = tva({ - base: 'px-4 pb-2 pt-0', -}); - -const modalCloseButtonStyle = tva({ - base: 'group/modal-close-button z-10 p-2 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer', -}); - -const modalHeaderStyle = tva({ - base: 'px-4 pt-4 pb-2 justify-between items-center flex-row', -}); - -const modalFooterStyle = tva({ - base: 'p-4 flex-row justify-end items-center flex-wrap', -}); - -type IModalProps = React.ComponentProps & - VariantProps; - -type IModalBackdropProps = React.ComponentProps & - VariantProps; - -type IModalContentProps = React.ComponentProps & - VariantProps; - -type IModalHeaderProps = React.ComponentProps & - VariantProps; - -type IModalBodyProps = React.ComponentProps & - VariantProps; - -type IModalFooterProps = React.ComponentProps & - VariantProps; - -type IModalCloseButtonProps = React.ComponentProps & - VariantProps; - -const Modal = React.forwardRef( - ( - //@ts-ignore - { className, size = 'md', ...props }: { className?: string } & IModalProps, - ref?: any - ) => ( - - ) -); - -const ModalBackdrop = React.forwardRef( - ( - { className, ...props }: { className?: string } & IModalBackdropProps, - ref?: any - ) => { - return ( - - ); - } -); - -const ModalContent = React.forwardRef( - ( - { className, size, ...props }: { className?: string } & IModalContentProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -const ModalHeader = React.forwardRef( - ( - { className, ...props }: { className?: string } & IModalHeaderProps, - ref?: any - ) => ( - - ) -); - -const ModalBody = React.forwardRef( - ( - { className, ...props }: { className?: string } & IModalBodyProps, - ref?: any - ) => ( - - ) -); - -const ModalFooter = React.forwardRef( - ( - { className, ...props }: { className?: string } & IModalFooterProps, - ref?: any - ) => ( - - ) -); - -const ModalCloseButton = React.forwardRef( - ( - { className, ...props }: { className?: string } & IModalCloseButtonProps, - ref?: any - ) => ( - - ) -); - -// Assign display names -Modal.displayName = 'Modal'; -ModalBackdrop.displayName = 'ModalBackdrop'; -ModalContent.displayName = 'ModalContent'; -ModalHeader.displayName = 'ModalHeader'; -ModalBody.displayName = 'ModalBody'; -ModalFooter.displayName = 'ModalFooter'; -ModalCloseButton.displayName = 'ModalCloseButton'; - -export { - Modal, - ModalBackdrop, - ModalContent, - ModalCloseButton, - ModalHeader, - ModalBody, - ModalFooter, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/popover/index.tsx b/example/storybook-v7/src/core-components/nativewind/popover/index.tsx deleted file mode 100644 index bc5fd9a2fa..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/popover/index.tsx +++ /dev/null @@ -1,322 +0,0 @@ -'use client'; - -import React from 'react'; -import { createPopover } from '@gluestack-ui/popover'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -import { View, Pressable, Platform, ScrollView } from 'react-native'; - -import { - Motion, - createMotionAnimatedComponent, - AnimatePresence, -} from '@legendapp/motion'; - -const AnimatedPressable = createMotionAnimatedComponent(Pressable); -const SCOPE = 'POPOVER'; -const UIPopover = createPopover({ - // @ts-ignore - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE), - Arrow: Motion.View, - Backdrop: AnimatedPressable, - Body: ScrollView, - CloseButton: Pressable, - Content: Motion.View, - Footer: View, - Header: View, - AnimatedPresence: AnimatePresence, -}); - -cssInterop(UIPopover, { className: 'style' }); -cssInterop(UIPopover.Arrow, { className: 'style' }); -cssInterop(UIPopover.Content, { className: 'style' }); -cssInterop(UIPopover.Header, { className: 'style' }); -cssInterop(UIPopover.Footer, { className: 'style' }); -cssInterop(UIPopover.Body, { className: 'style' }); -cssInterop(UIPopover.Backdrop, { className: 'style' }); -cssInterop(UIPopover.CloseButton, { className: 'style' }); - -const popoverStyle = tva({ - base: 'group/popover w-full h-full justify-center items-center web:pointer-events-none', - variants: { - size: { - xs: '', - sm: '', - md: '', - lg: '', - full: '', - }, - }, -}); -const popoverArrowStyle = tva({ - base: 'bg-background-50 z-1 absolute overflow-hidden h-3.5 w-3.5', -}); - -const popoverBackdropStyle = tva({ - base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default', -}); - -const popoverBodyStyle = tva({ - base: 'p-4 pt-2', -}); - -const popoverCloseButtonStyle = tva({ - base: 'group/popover-close-button z-10 p-2 rounded-sm data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer', -}); - -const popoverContentStyle = tva({ - base: 'bg-background-50 rounded-lg overflow-hidden', - parentVariants: { - size: { - xs: 'w-[60%] max-w-[360px]', - sm: 'w-[70%] max-w-[420px]', - md: 'w-[80%] max-w-[510px]', - lg: 'w-[90%] max-w-[640px]', - full: 'w-full', - }, - }, -}); - -const popoverFooterStyle = tva({ - base: 'p-4 flex-row justify-end items-center flex-wrap border-t border-outline-300', -}); - -const popoverHeaderStyle = tva({ - base: 'p-4 pb-2 justify-between items-center flex-row', -}); - -type IPopoverProps = React.ComponentProps & - VariantProps; - -type IPopoverArrowProps = React.ComponentProps & - VariantProps; - -type IPopoverContentProps = React.ComponentProps & - VariantProps; - -type IPopoverHeaderProps = React.ComponentProps & - VariantProps; - -type IPopoverFooterProps = React.ComponentProps & - VariantProps; - -type IPopoverBodyProps = React.ComponentProps & - VariantProps; - -type IPopoverBackdropProps = React.ComponentProps & - VariantProps; - -type IPopoverCloseButtonProps = React.ComponentProps< - typeof UIPopover.CloseButton -> & - VariantProps; - -const Popover = React.forwardRef( - ( - { - className, - size = 'md', - ...props - }: { className?: string } & IPopoverProps, - ref?: any - ) => ( - - ) -); - -const PopoverArrow = React.forwardRef( - ( - { className, ...props }: { className?: string } & IPopoverArrowProps, - ref?: any - ) => ( - - ) -); - -const PopoverBackdrop = React.forwardRef( - ( - { className, ...props }: { className?: string } & IPopoverBackdropProps, - ref?: any - ) => { - return ( - - ); - } -); - -const PopoverBody = React.forwardRef( - ( - { className, ...props }: { className?: string } & IPopoverBodyProps, - ref?: any - ) => ( - - ) -); - -const PopoverCloseButton = React.forwardRef( - ( - { className, ...props }: { className?: string } & IPopoverCloseButtonProps, - ref?: any - ) => ( - - ) -); - -const PopoverContent = React.forwardRef( - ( - { - className, - size, - ...props - }: { className?: string } & IPopoverContentProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -const PopoverFooter = React.forwardRef( - ( - { className, ...props }: { className?: string } & IPopoverFooterProps, - ref?: any - ) => ( - - ) -); - -const PopoverHeader = React.forwardRef( - ( - { className, ...props }: { className?: string } & IPopoverHeaderProps, - ref?: any - ) => ( - - ) -); - -Popover.displayName = 'Popover'; -PopoverArrow.displayName = 'PopoverArrow'; -PopoverBackdrop.displayName = 'PopoverBackdrop'; -PopoverContent.displayName = 'PopoverContent'; -PopoverHeader.displayName = 'PopoverHeader'; -PopoverFooter.displayName = 'PopoverFooter'; -PopoverBody.displayName = 'PopoverBody'; -PopoverCloseButton.displayName = 'PopoverCloseButton'; - -export { - Popover, - PopoverBackdrop, - PopoverArrow, - PopoverCloseButton, - PopoverFooter, - PopoverHeader, - PopoverBody, - PopoverContent, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/pressable/index.tsx b/example/storybook-v7/src/core-components/nativewind/pressable/index.tsx deleted file mode 100644 index c1d5acd64b..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/pressable/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -'use client'; -import React from 'react'; -import { createPressable } from '@gluestack-ui/pressable'; -import { Pressable as RNPressable, Platform } from 'react-native'; - -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const UIPressable = createPressable({ - Root: - Platform.OS === 'web' - ? withStyleContext(RNPressable) - : withStyleContextAndStates(RNPressable), -}); - -const pressableStyle = tva({ - base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-primary-700 data-[focus-visible=true]:ring-2 data-[disabled=true]:opacity-40', -}); - -cssInterop(UIPressable, { className: 'style' }); - -type IPressableProps = Omit< - React.ComponentProps, - 'context' -> & - VariantProps; -const Pressable = React.forwardRef( - ( - { className, ...props }: { className?: string } & IPressableProps, - ref?: any - ) => { - return ( - - ); - } -); - -Pressable.displayName = 'Pressable'; -export { Pressable }; diff --git a/example/storybook-v7/src/core-components/nativewind/progress/index.tsx b/example/storybook-v7/src/core-components/nativewind/progress/index.tsx deleted file mode 100644 index 0f28d3017d..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/progress/index.tsx +++ /dev/null @@ -1,83 +0,0 @@ -'use client'; -import React from 'react'; -import { createProgress } from '@gluestack-ui/progress'; -import { View } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -const SCOPE = 'PROGRESS'; -export const UIProgress = createProgress({ - Root: withStyleContext(View, SCOPE), - FilledTrack: View, -}); - -cssInterop(UIProgress, { className: 'style' }); -cssInterop(UIProgress.FilledTrack, { className: 'style' }); - -const progressStyle = tva({ - base: 'bg-background-300 rounded-full w-full', - variants: { - size: { - 'xs': 'h-1', - 'sm': 'h-2', - 'md': 'h-3', - 'lg': 'h-4', - 'xl': 'h-5', - '2xl': 'h-6', - }, - }, -}); -const progressFilledTrackStyle = tva({ - base: 'bg-primary-500 rounded-full', - parentVariants: { - size: { - 'xs': 'h-1', - 'sm': 'h-2', - 'md': 'h-3', - 'lg': 'h-4', - 'xl': 'h-5', - '2xl': 'h-6', - }, - }, -}); - -type IProgressProps = VariantProps & - React.ComponentProps; -type IProgressFilledTrackProps = VariantProps & - React.ComponentProps; - -export const Progress = React.forwardRef( - ({ className, size = 'md', ...props }: IProgressProps, ref?: any) => { - return ( - - ); - } -); - -export const ProgressFilledTrack = React.forwardRef( - ({ className, ...props }: IProgressFilledTrackProps, ref?: any) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); diff --git a/example/storybook-v7/src/core-components/nativewind/radio/index.tsx b/example/storybook-v7/src/core-components/nativewind/radio/index.tsx deleted file mode 100644 index 823654fe8b..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/radio/index.tsx +++ /dev/null @@ -1,272 +0,0 @@ -'use client'; -import React, { useMemo } from 'react'; -import { createRadio } from '@gluestack-ui/radio'; -import { Svg } from 'react-native-svg'; -import { Pressable, View, Platform, Text } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { cssInterop } from 'nativewind'; -import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const radioStyle = tva({ - base: 'group/radio flex-row justify-start items-center web:cursor-pointer data-[disabled=true]:web:cursor-not-allowed', - variants: { - size: { - sm: 'gap-1.5', - md: 'gap-2', - lg: 'gap-2', - }, - }, -}); - -const radioGroupStyle = tva({ - base: 'gap-2', -}); - -const radioIconStyle = tva({ - base: 'rounded-full justify-center items-center', - - parentVariants: { - size: { - sm: 'h-3 w-3', - md: 'h-4 w-4', - lg: 'h-[18px] w-[18px]', - }, - }, -}); - -const radioIndicatorStyle = tva({ - base: 'justify-center items-center bg-transparent border-outline-400 border-2 rounded-full data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[checked=true]:border-primary-600 data-[checked=true]:bg-transparent data-[hover=true]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[checked=true]:bg-transparent data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-400 data-[active=true]:bg-transparent data-[active=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[checked=true]:border-outline-400 data-[disabled=true]:data-[checked=true]:bg-transparent data-[disabled=true]:data-[invalid=true]:border-error-400', - parentVariants: { - size: { - sm: 'p-px h-4 w-4', - md: 'p-[1.5px] h-5 w-5', - lg: 'p-0.5 h-6 w-6', - }, - }, -}); - -const radioLabelStyle = tva({ - base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-600 data-[hover=true]:data-[disabled=true]:data-[checked=true]:text-typography-900 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none', - parentVariants: { - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - 'lg': 'text-lg', - 'xl': 'text-xl', - '2xl': 'text-2xl', - '3xl': 'text-3xl', - '4xl': 'text-4xl', - '5xl': 'text-5xl', - '6xl': 'text-6xl', - }, - }, -}); - -const SCOPE = 'Radio'; -const UIRadio = createRadio({ - // @ts-ignore - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(Pressable, SCOPE), - Group: View, - Icon: Platform.OS === 'web' ? PrimitiveIcon : withStates(PrimitiveIcon), - Indicator: Platform.OS === 'web' ? View : withStates(View), - Label: Platform.OS === 'web' ? Text : withStates(Text), -}); - -cssInterop(UIRadio, { className: 'style' }); -cssInterop(UIRadio.Group, { className: 'style' }); -cssInterop(UIRadio.Indicator, { className: 'style' }); -cssInterop(UIRadio.Label, { className: 'style' }); -cssInterop(UIRadio.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -type IRadioProps = Omit, 'context'> & - VariantProps; -const Radio = React.forwardRef( - ( - { className, size = 'md', ...props }: { className?: string } & IRadioProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IRadioGroupProps = React.ComponentProps & - VariantProps; -const RadioGroup = React.forwardRef( - ( - { className, ...props }: { className?: string } & IRadioGroupProps, - ref?: any - ) => { - return ( - - ); - } -); - -type IRadioIndicatorProps = React.ComponentProps & - VariantProps; -const RadioIndicator = React.forwardRef( - ( - { className, ...props }: { className?: string } & IRadioIndicatorProps, - ref?: any - ) => { - const { size } = useStyleContext(SCOPE); - return ( - - ); - } -); - -type IRadioLabelProps = React.ComponentProps & - VariantProps; -const RadioLabel = React.forwardRef( - ( - { className, ...props }: { className?: string } & IRadioLabelProps, - ref?: any - ) => { - const { size } = useStyleContext(SCOPE); - return ( - - ); - } -); - -type IRadioIconProps = React.ComponentProps & - VariantProps; -const RadioIcon = React.forwardRef( - ( - { - className, - size, - color = 'gray', - ...props - }: IRadioIconProps & { - className?: string; - fill?: string; - color?: string; - as?: any; - }, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -Radio.displayName = 'Radio'; -RadioGroup.displayName = 'RadioGroup'; -RadioIndicator.displayName = 'RadioIndicator'; -RadioLabel.displayName = 'RadioLabel'; -RadioIcon.displayName = 'RadioIcon'; - -export { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon }; diff --git a/example/storybook-v7/src/core-components/nativewind/refresh-control/index.tsx b/example/storybook-v7/src/core-components/nativewind/refresh-control/index.tsx deleted file mode 100644 index 761bf777db..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/refresh-control/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { RefreshControl } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/safe-area-view/index.tsx b/example/storybook-v7/src/core-components/nativewind/safe-area-view/index.tsx deleted file mode 100644 index 10df75d7de..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/safe-area-view/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { SafeAreaView } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/scroll-view/index.tsx b/example/storybook-v7/src/core-components/nativewind/scroll-view/index.tsx deleted file mode 100644 index 22bd5633cb..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/scroll-view/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { ScrollView } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/section-list/index.tsx b/example/storybook-v7/src/core-components/nativewind/section-list/index.tsx deleted file mode 100644 index fc1058b433..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/section-list/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { SectionList } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/select/index.tsx b/example/storybook-v7/src/core-components/nativewind/select/index.tsx deleted file mode 100644 index 903f0b39ed..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/select/index.tsx +++ /dev/null @@ -1,321 +0,0 @@ -import React, { useMemo } from 'react'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { Svg } from 'react-native-svg'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { createSelect } from '@gluestack-ui/select'; -import { cssInterop } from 'nativewind'; -import { - Actionsheet, - ActionsheetContent, - ActionsheetItem, - ActionsheetItemText, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetBackdrop, - ActionsheetScrollView, - ActionsheetVirtualizedList, - ActionsheetFlatList, - ActionsheetSectionList, - ActionsheetSectionHeaderText, -} from './select-actionsheet'; -import { Pressable, View, TextInput, Platform } from 'react-native'; - -/** Select Components */ - -const selectIconStyle = tva({ - base: '', - parentVariants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'h-[18px] w-[18px]', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -const selectStyle = tva({ - base: '', -}); - -const selectTriggerStyle = tva({ - base: 'border border-background-300 rounded flex-row items-center overflow-hidden data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[hover=true]:border-background-300', - variants: { - size: { - xl: 'h-12', - lg: 'h-11', - md: 'h-10', - sm: 'h-9', - }, - variant: { - underlined: - 'border-0 border-b rounded-none data-[hover=true]:border-primary-700 data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_-1px_0_0] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700', - outline: - 'data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:data-[hover=true]:web:shadow-primary-600 data-[invalid=true]:web:shadow-[inset_0_0_0_1px] data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700 data-[invalid=true]:data-[hover=true]:border-error-700', - rounded: - 'rounded-full data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700', - }, - }, -}); - -const selectInputStyle = tva({ - base: 'py-auto px-3 placeholder:text-typography-500 flex-1 web:w-full h-full text-typography-900 pointer-events-none web:outline-none', - parentVariants: { - size: { - xl: 'text-xl leading-[0px]', - lg: 'text-lg leading-[0px]', - md: 'text-base leading-[0px]', - sm: 'text-sm leading-[0px]', - }, - variant: { - underlined: 'px-0', - outline: '', - rounded: 'px-4', - }, - }, -}); - -const PrimitiveIcon = React.forwardRef( - ( - { height, width, fill = 'none', color, size, as: AsComp, ...props }: any, - ref?: any - ) => { - const sizeProps = useMemo(() => { - return size ? { size } : { height, width }; - }, [size, height, width]); - - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -const UISelect = createSelect( - { - Root: View, - // @ts-ignore - Trigger: - Platform.OS === 'web' - ? withStyleContext(Pressable) - : withStyleContextAndStates(Pressable), - Input: TextInput, - Icon: PrimitiveIcon, - }, - { - Portal: Actionsheet, - Backdrop: ActionsheetBackdrop, - Content: ActionsheetContent, - DragIndicator: ActionsheetDragIndicator, - DragIndicatorWrapper: ActionsheetDragIndicatorWrapper, - Item: ActionsheetItem, - ItemText: ActionsheetItemText, - ScrollView: ActionsheetScrollView, - VirtualizedList: ActionsheetVirtualizedList, - FlatList: ActionsheetFlatList, - SectionList: ActionsheetSectionList, - SectionHeaderText: ActionsheetSectionHeaderText, - } -); - -cssInterop(UISelect, { className: 'style' }); -cssInterop(UISelect.Input, { className: 'style' }); -cssInterop(UISelect.Trigger, { className: 'style' }); -// @ts-ignore -cssInterop(UISelect.Icon, { - className: { - target: 'style', - nativeStyleToProp: { - height: 'height', - width: 'width', - //@ts-ignore - fill: 'fill', - color: 'color', - }, - }, -}); - -type ISelectProps = VariantProps & - React.ComponentProps; -const Select = React.forwardRef( - ( - { className, ...props }: ISelectProps & { className?: string }, - ref?: any - ) => { - return ( - - ); - } -); - -type ISelectTriggerProps = VariantProps & - React.ComponentProps; -const SelectTrigger = React.forwardRef( - ( - { - className, - size = 'md', - variant = 'outline', - ...props - }: ISelectTriggerProps & { className?: string }, - ref?: any - ) => { - return ( - - ); - } -); - -type ISelectInputProps = VariantProps & - React.ComponentProps; -const SelectInput = React.forwardRef( - ( - { className, ...props }: ISelectInputProps & { className?: string }, - ref?: any - ) => { - const { size: parentSize, variant: parentVariant } = useStyleContext(); - return ( - - ); - } -); - -type ISelectIcon = VariantProps & - React.ComponentProps; -const SelectIcon = React.forwardRef( - ( - { - className, - size, - color = 'gray', - ...props - }: ISelectIcon & { - as?: any; - color?: string; - fill?: string; - className?: any; - }, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(); - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props?.height !== undefined || props?.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - return ( - - ); - } -); - -Select.displayName = 'Select'; -SelectTrigger.displayName = 'SelectTrigger'; -SelectInput.displayName = 'SelectInput'; -SelectIcon.displayName = 'SelectIcon'; - -// Actionsheet Components -const SelectPortal = UISelect.Portal; -const SelectBackdrop = UISelect.Backdrop; -const SelectContent = UISelect.Content; -const SelectDragIndicator = UISelect.DragIndicator; -const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper; -const SelectItem = UISelect.Item; -const SelectItemText = UISelect.ItemText; -const SelectScrollView = UISelect.ScrollView; -const SelectVirtualizedList = UISelect.VirtualizedList; -const SelectFlatList = UISelect.FlatList; -const SelectSectionList = UISelect.SectionList; -const SelectSectionHeaderText = UISelect.SectionHeaderText; - -export { - Select, - SelectTrigger, - SelectInput, - SelectIcon, - SelectPortal, - SelectBackdrop, - SelectContent, - SelectDragIndicator, - SelectDragIndicatorWrapper, - SelectItem, - SelectItemText, - SelectScrollView, - SelectVirtualizedList, - SelectFlatList, - SelectSectionList, - SelectSectionHeaderText, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/select/select-actionsheet.tsx b/example/storybook-v7/src/core-components/nativewind/select/select-actionsheet.tsx deleted file mode 100644 index a881d1d5a1..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/select/select-actionsheet.tsx +++ /dev/null @@ -1,515 +0,0 @@ -import { H4 } from '@expo/html-elements'; -import { createActionsheet } from '@gluestack-ui/actionsheet'; -import { - Pressable, - View, - Text, - ScrollView, - VirtualizedList, - FlatList, - SectionList, - Platform, -} from 'react-native'; - -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import { - Motion, - AnimatePresence, - createMotionAnimatedComponent, -} from '@legendapp/motion'; - -import React from 'react'; - -const AnimatedPressable = createMotionAnimatedComponent(Pressable); -export const UIActionsheet = createActionsheet({ - Root: View, - Content: withStyleContext(Motion.View), - // @ts-ignore - Item: - Platform.OS === 'web' - ? withStyleContext(Pressable) - : withStyleContextAndStates(Pressable), - ItemText: Text, - DragIndicator: View, - IndicatorWrapper: View, - Backdrop: AnimatedPressable, - ScrollView: ScrollView, - VirtualizedList: VirtualizedList, - FlatList: FlatList, - SectionList: SectionList, - SectionHeaderText: H4, - Icon: View, - AnimatePresence: AnimatePresence, -}); - -cssInterop(UIActionsheet, { className: 'style' }); -cssInterop(UIActionsheet.Content, { className: 'style' }); -cssInterop(UIActionsheet.Item, { className: 'style' }); -cssInterop(UIActionsheet.ItemText, { className: 'style' }); -cssInterop(UIActionsheet.DragIndicator, { className: 'style' }); -cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' }); -cssInterop(UIActionsheet.Backdrop, { className: 'style' }); -cssInterop(UIActionsheet.ScrollView, { className: 'style' }); -cssInterop(UIActionsheet.VirtualizedList, { className: 'style' }); -cssInterop(UIActionsheet.FlatList, { className: 'style' }); -cssInterop(UIActionsheet.SectionList, { className: 'style' }); -cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' }); -cssInterop(UIActionsheet.Icon, { className: 'style' }); - -const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' }); - -const actionsheetContentStyle = tva({ - base: 'items-center rounded-tl-3xl rounded-tr-3xl p-2 bg-background-0 web:pointer-events-auto web:select-none shadow-lg', -}); - -const actionsheetItemStyle = tva({ - base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 data-[checked=true]:bg-background-100', -}); - -const actionsheetItemTextStyle = tva({ - base: 'text-typography-700 font-normal font-body tracking-md text-left mx-2', - variants: { - isTruncated: { - true: '', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - 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', - }, - }, - defaultVariants: { - size: 'md', - }, -}); - -const actionsheetDragIndicatorStyle = tva({ - base: 'w-16 h-1 bg-background-400 rounded-full', -}); - -const actionsheetDragIndicatorWrapperStyle = tva({ - base: 'w-full py-1 items-center', -}); - -const actionsheetBackdropStyle = tva({ - base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto', -}); - -const actionsheetScrollViewStyle = tva({ - base: 'w-full h-auto', -}); - -const actionsheetVirtualizedListStyle = tva({ - base: 'w-full h-auto', -}); - -const actionsheetFlatListStyle = tva({ - base: 'w-full h-auto', -}); - -const actionsheetSectionListStyle = tva({ - base: 'w-full h-auto', -}); - -const actionsheetSectionHeaderTextStyle = tva({ - base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase', - variants: { - isTruncated: { - true: '', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '5xl': 'text-5xl', - '4xl': 'text-4xl', - '3xl': 'text-3xl', - '2xl': 'text-2xl', - 'xl': 'text-xl', - 'lg': 'text-lg', - 'md': 'text-md', - 'sm': 'text-sm', - 'xs': 'text-xs', - }, - - sub: { - true: 'text-xs', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow500', - }, - }, - defaultVariants: { - size: 'xs', - }, -}); - -const actionsheetIconStyle = tva({ - base: 'text-typography-900', - variants: { - size: { - '2xs': 'h-3 w-3', - 'xs': 'h-3.5 w-3.5', - 'sm': 'h-4 w-4', - 'md': 'w-4 h-4', - 'lg': 'h-5 w-5', - 'xl': 'h-6 w-6', - }, - }, -}); - -type IActionsheetProps = VariantProps & - React.ComponentProps; - -type IActionsheetContentProps = VariantProps & - React.ComponentProps; - -type IActionsheetItemProps = VariantProps & - React.ComponentProps; - -type IActionsheetItemTextProps = VariantProps & - React.ComponentProps; - -type IActionsheetDragIndicatorProps = VariantProps< - typeof actionsheetDragIndicatorStyle -> & - React.ComponentProps; - -type IActionsheetDragIndicatorWrapperProps = VariantProps< - typeof actionsheetDragIndicatorWrapperStyle -> & - React.ComponentProps; - -type IActionsheetBackdropProps = VariantProps & - React.ComponentProps; - -type IActionsheetScrollViewProps = VariantProps< - typeof actionsheetScrollViewStyle -> & - React.ComponentProps; - -type IActionsheetVirtualizedListProps = VariantProps< - typeof actionsheetVirtualizedListStyle -> & - React.ComponentProps; - -type IActionsheetFlatListProps = VariantProps & - React.ComponentProps; - -type IActionsheetSectionListProps = VariantProps< - typeof actionsheetSectionListStyle -> & - React.ComponentProps; - -type IActionsheetSectionHeaderTextProps = VariantProps< - typeof actionsheetSectionHeaderTextStyle -> & - React.ComponentProps; - -type IActionsheetIconProps = VariantProps & - React.ComponentProps; - -const Actionsheet = React.forwardRef( - ({ className, ...props }: IActionsheetProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetContent = React.forwardRef( - ( - { className, ...props }: IActionsheetContentProps & { className?: string }, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetItem = React.forwardRef( - ({ className, ...props }: IActionsheetItemProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetItemText = React.forwardRef( - ( - { - isTruncated, - bold, - underline, - strikeThrough, - size, - className, - ...props - }: IActionsheetItemTextProps, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetDragIndicator = React.forwardRef( - ({ className, ...props }: IActionsheetDragIndicatorProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetDragIndicatorWrapper = React.forwardRef( - ( - { className, ...props }: IActionsheetDragIndicatorWrapperProps, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetBackdrop = React.forwardRef( - ( - { className, ...props }: IActionsheetBackdropProps & { className?: string }, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetScrollView = React.forwardRef( - ({ className, ...props }: IActionsheetScrollViewProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetVirtualizedList = React.forwardRef( - ({ className, ...props }: IActionsheetVirtualizedListProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetFlatList = React.forwardRef( - ({ className, ...props }: IActionsheetFlatListProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetSectionList = React.forwardRef( - ({ className, ...props }: IActionsheetSectionListProps, ref?: any) => { - return ( - - ); - } -); - -const ActionsheetSectionHeaderText = React.forwardRef( - ( - { - className, - isTruncated, - bold, - underline, - strikeThrough, - size, - sub, - italic, - highlight, - ...props - }: IActionsheetSectionHeaderTextProps, - ref?: any - ) => { - return ( - - ); - } -); - -const ActionsheetIcon = React.forwardRef( - ( - { - className, - as: AsComp, - size = 'sm', - ...props - }: IActionsheetIconProps & { as?: any }, - ref?: any - ) => { - if (AsComp) { - return ( - - ); - } - return ( - - ); - } -); - -export { - Actionsheet, - ActionsheetContent, - ActionsheetItem, - ActionsheetItemText, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetBackdrop, - ActionsheetScrollView, - ActionsheetVirtualizedList, - ActionsheetFlatList, - ActionsheetSectionList, - ActionsheetSectionHeaderText, - ActionsheetIcon, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/slider/index.tsx b/example/storybook-v7/src/core-components/nativewind/slider/index.tsx deleted file mode 100644 index 88b04a8cf1..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/slider/index.tsx +++ /dev/null @@ -1,245 +0,0 @@ -'use client'; -import { createSlider } from '@gluestack-ui/slider'; -import { Pressable } from 'react-native'; -import { View, Platform } from 'react-native'; -import React from 'react'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; - -const SCOPE = 'SLIDER'; -export const UISlider = createSlider({ - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE), - Thumb: Platform.OS === 'web' ? View : withStates(View), - Track: Pressable, - FilledTrack: Platform.OS === 'web' ? View : withStates(View), - ThumbInteraction: View, -}); - -cssInterop(UISlider, { className: 'style' }); -cssInterop(UISlider.Thumb, { className: 'style' }); -cssInterop(UISlider.Track, { className: 'style' }); -cssInterop(UISlider.FilledTrack, { className: 'style' }); - -const sliderStyle = tva({ - base: 'justify-center items-center data-[disabled=true]:web:opacity-40 data-[disabled=true]:web:pointer-events-none', - variants: { - orientation: { - horizontal: 'w-full', - vertical: 'h-full', - }, - isReversed: { - true: '', - false: '', - }, - }, -}); - -const sliderThumbStyle = tva({ - base: 'bg-primary-500 absolute rounded-full data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:active:outline-4 web:active:outline web:active:outline-primary-400 data-[focus=true]:web:outline-4 data-[focus=true]:web:outline data-[focus=true]:web:outline-primary-400 shadow', - - parentVariants: { - size: { - sm: 'h-4 w-4', - md: 'h-5 w-5', - lg: 'h-6 w-6', - }, - }, -}); - -const sliderTrackStyle = tva({ - base: 'bg-background-300 rounded-lg overflow-hidden', - parentVariants: { - orientation: { - horizontal: 'w-full', - vertical: 'h-full', - }, - isReversed: { - true: '', - false: '', - }, - size: { - sm: '', - md: '', - lg: '', - }, - }, - parentCompoundVariants: [ - { - orientation: 'horizontal', - size: 'sm', - class: 'h-1 flex-row', - }, - { - orientation: 'horizontal', - size: 'sm', - isReversed: true, - class: 'h-1 flex-row-reverse', - }, - { - orientation: 'horizontal', - size: 'md', - class: 'h-1 flex-row', - }, - { - orientation: 'horizontal', - size: 'md', - isReversed: true, - class: 'h-[5px] flex-row-reverse', - }, - { - orientation: 'horizontal', - size: 'lg', - class: 'h-1.5 flex-row', - }, - { - orientation: 'horizontal', - size: 'lg', - isReversed: true, - class: 'h-1.5 flex-row-reverse', - }, - { - orientation: 'vertical', - size: 'sm', - class: 'w-1 flex-col-reverse', - }, - { - orientation: 'vertical', - size: 'sm', - isReversed: true, - class: 'w-1 flex-col', - }, - { - orientation: 'vertical', - size: 'md', - class: 'w-[5px] flex-col-reverse', - }, - { - orientation: 'vertical', - size: 'md', - isReversed: true, - class: 'w-[5px] flex-col', - }, - { - orientation: 'vertical', - size: 'lg', - class: 'w-1.5 flex-col-reverse', - }, - { - orientation: 'vertical', - size: 'lg', - isReversed: true, - class: 'w-1.5 flex-col', - }, - ], -}); - -const sliderFilledTrackStyle = tva({ - base: 'bg-primary-500 data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600', - parentVariants: { - orientation: { - horizontal: 'h-full', - vertical: 'w-full', - }, - }, -}); - -export const Slider = React.forwardRef( - ( - { - className, - size = 'md', - orientation = 'horizontal', - isReversed = false, - ...props - }: any, - ref?: any - ) => { - return ( - - ); - } -); - -export const SliderThumb = React.forwardRef( - ({ className, size, ...props }: any, ref?: any) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -export const SliderTrack = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - const { - orientation: parentOrientation, - size: parentSize, - isReversed, - } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -export const SliderFilledTrack = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - const { orientation: parentOrientation } = useStyleContext(SCOPE); - - return ( - - ); - } -); diff --git a/example/storybook-v7/src/core-components/nativewind/spinner/index.tsx b/example/storybook-v7/src/core-components/nativewind/spinner/index.tsx deleted file mode 100644 index fe22daf355..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/spinner/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -'use client'; -import { ActivityIndicator } from 'react-native'; -import React from 'react'; -import { createSpinner } from '@gluestack-ui/spinner'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; - -const UISpinner = createSpinner({ Root: ActivityIndicator }); - -cssInterop(UISpinner, { className: 'style' }); - -const spinnerStyle = tva({}); -const Spinner = React.forwardRef(({ className, color, ...props }: any, ref) => { - return ( - - ); -}); - -Spinner.displayName = 'Spinner'; - -export { Spinner }; diff --git a/example/storybook-v7/src/core-components/nativewind/status-bar/index.tsx b/example/storybook-v7/src/core-components/nativewind/status-bar/index.tsx deleted file mode 100644 index 3a61fac5cc..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/status-bar/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { StatusBar } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/switch/index.tsx b/example/storybook-v7/src/core-components/nativewind/switch/index.tsx deleted file mode 100644 index 59aa185df9..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/switch/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -'use client'; -import React from 'react'; -import { Switch as RNSwitch, Platform } from 'react-native'; -import { createSwitch } from '@gluestack-ui/switch'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const UISwitch = createSwitch({ - Root: - Platform.OS === 'web' - ? withStyleContext(RNSwitch) - : withStyleContextAndStates(RNSwitch), -}); - -cssInterop(UISwitch, { className: 'style' }); - -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', - - variants: { - size: { - sm: 'scale-75', - md: '', - lg: 'scale-125', - }, - }, -}); - -type ISwitchProps = React.ComponentProps & - VariantProps; -const Switch = React.forwardRef( - ( - { className, size = 'md', ...props }: { className?: string } & ISwitchProps, - ref?: any - ) => { - return ( - - ); - } -); - -Switch.displayName = 'Switch'; -export { Switch }; diff --git a/example/storybook-v7/src/core-components/nativewind/table/index.tsx b/example/storybook-v7/src/core-components/nativewind/table/index.tsx deleted file mode 100644 index 74e485eb47..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/table/index.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import React, { createContext, useMemo, useContext } from 'react'; -import { - Table as ExpoTable, - THead as ExpoTHead, - TBody as ExpoTBody, - TFoot as ExpoTFoot, - TR as ExpoTR, - Caption as ExpoTCaption, -} from '@expo/html-elements'; -import { - tableStyle, - tableHeaderStyle, - tableBodyStyle, - tableFooterStyle, - tableHeadStyle, - tableRowStyleStyle, - tableDataStyle, - tableCaptionStyle, -} from './styles'; -import { Text, View } from 'react-native'; - -const TableHeaderContext = createContext({}); -const TableFooterContext = createContext({}); - -type ITableProps = React.ComponentProps; -type ITableHeaderProps = React.ComponentProps; -type ITableBodyProps = React.ComponentProps; -type ITableFooterProps = React.ComponentProps; -type ITableHeadProps = React.ComponentProps & { - useRNView?: boolean; -}; -type ITableRowProps = React.ComponentProps; -type ITableDataProps = React.ComponentProps & { - useRNView?: boolean; -}; -type ITableCaptionProps = React.ComponentProps; - -const Table = React.forwardRef( - ({ className, ...props }: ITableProps, ref?: any) => { - return ( - - ); - } -); - -const TableHeader = React.forwardRef( - ({ className, ...props }: ITableHeaderProps, ref?: any) => { - const contextValue = useMemo(() => { - return { - isHeaderRow: true, - }; - }, []); - return ( - - - - ); - } -); - -const TableBody = React.forwardRef( - ({ className, ...props }: ITableBodyProps, ref?: any) => { - return ( - - ); - } -); - -const TableFooter = React.forwardRef( - ({ className, ...props }: ITableFooterProps, ref?: any) => { - const contextValue = useMemo(() => { - return { - isFooterRow: true, - }; - }, []); - return ( - - - - ); - } -); - -const TableHead = React.forwardRef( - ({ useRNView = false, className, ...props }: ITableHeadProps, ref?: any) => { - if (useRNView) { - return ( - - ); - } else { - return ( - - ); - } - } -); - -const TableRow = React.forwardRef( - ({ className, ...props }: ITableRowProps, ref?: any) => { - const { isHeaderRow } = useContext(TableHeaderContext); - const { isFooterRow } = useContext(TableFooterContext); - - return ( - - ); - } -); - -const TableData = React.forwardRef( - ({ useRNView = false, className, ...props }: ITableDataProps, ref?: any) => { - if (useRNView) { - return ( - - ); - } else { - return ( - - ); - } - } -); - -const TableCaption = React.forwardRef( - ({ className, ...props }: ITableCaptionProps, ref?: any) => { - return ( - - ); - } -); - -Table.displayName = 'Table'; -TableHeader.displayName = 'TableHeader'; -TableBody.displayName = 'TableBody'; -TableFooter.displayName = 'TableFooter'; -TableHead.displayName = 'TableHead'; -TableRow.displayName = 'TableRow'; -TableData.displayName = 'TableData'; -TableCaption.displayName = 'TableCaption'; - -export { - Table, - TableHeader, - TableBody, - TableFooter, - TableHead, - TableRow, - TableData, - TableCaption, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/table/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/table/index.web.tsx deleted file mode 100644 index a6a3a79aae..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/table/index.web.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import React, { createContext, useMemo, useContext } from 'react'; -import { - tableStyle, - tableHeaderStyle, - tableBodyStyle, - tableFooterStyle, - tableHeadStyle, - tableRowStyleStyle, - tableDataStyle, - tableCaptionStyle, -} from './styles'; - -const TableHeaderContext = createContext({}); -const TableFooterContext = createContext({}); - -const Table = React.forwardRef(({ className, ...props }: any, ref?: any) => { - return ( - - ); -}); - -const TableHeader = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - const contextValue = useMemo(() => { - return { - isHeaderRow: true, - }; - }, []); - return ( - - - - ); - } -); - -const TableBody = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - return ( - - ); - } -); - -const TableFooter = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - const contextValue = useMemo(() => { - return { - isFooterRow: true, - }; - }, []); - return ( - - - - ); - } -); - -const TableHead = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - return ( - - ); -}); - -const TableData = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - return ( -
- ); - } -); - -const TableRow = React.forwardRef(({ className, ...props }: any, ref?: any) => { - const { isHeaderRow } = useContext(TableHeaderContext); - const { isFooterRow } = useContext(TableFooterContext); - return ( -
- ); - } -); - -const TableCaption = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - return ( -
- ); - } -); - -Table.displayName = 'Table'; -TableHeader.displayName = 'TableHeader'; -TableBody.displayName = 'TableBody'; -TableFooter.displayName = 'TableFooter'; -TableHead.displayName = 'TableHead'; -TableRow.displayName = 'TableRow'; -TableData.displayName = 'TableData'; -TableCaption.displayName = 'TableCaption'; - -export { - Table, - TableHeader, - TableBody, - TableFooter, - TableHead, - TableRow, - TableData, - TableCaption, -}; diff --git a/example/storybook-v7/src/core-components/nativewind/table/styles.tsx b/example/storybook-v7/src/core-components/nativewind/table/styles.tsx deleted file mode 100644 index 984a9d514b..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/table/styles.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; - -const captionTableStyle = isWeb ? 'caption-bottom' : ''; - -export const tableStyle = tva({ - base: `table border-collapse border-collapse w-[800px]`, -}); - -export const tableHeaderStyle = tva({ - base: '', -}); - -export const tableBodyStyle = tva({ - base: '', -}); - -export const tableFooterStyle = tva({ - base: '', -}); - -export const tableHeadStyle = tva({ - base: 'flex-1 px-6 py-[14px] text-left font-bold text-[16px] leading-[22px] text-typography-800 font-roboto', -}); - -export const tableRowStyleStyle = tva({ - base: 'border-0 border-b border-solid border-outline-200 bg-background-0', - variants: { - isHeaderRow: { - true: '', - }, - isFooterRow: { - true: 'border-b-0 ', - }, - }, -}); - -export const tableDataStyle = tva({ - base: 'flex-1 px-6 py-[14px] text-left text-[16px] font-medium leading-[22px] text-typography-800 font-roboto', -}); - -export const tableCaptionStyle = tva({ - base: `${captionTableStyle} px-6 py-[14px] text-[16px] font-normal leading-[22px] text-typography-800 bg-background-50 font-roboto`, -}); diff --git a/example/storybook-v7/src/core-components/nativewind/text/index.tsx b/example/storybook-v7/src/core-components/nativewind/text/index.tsx deleted file mode 100644 index df74cbab37..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/text/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; - -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { Text as RNText } from 'react-native'; -import { textStyle } from './styles'; - -type ITextProps = React.ComponentProps & - VariantProps; - -const Text = React.forwardRef( - ( - { - className, - isTruncated, - bold, - underline, - strikeThrough, - size = 'md', - sub, - italic, - highlight, - ...props - }: { className?: string } & ITextProps, - ref?: any - ) => { - return ( - - ); - } -); - -Text.displayName = 'Text'; - -export { Text }; diff --git a/example/storybook-v7/src/core-components/nativewind/text/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/text/index.web.tsx deleted file mode 100644 index 19834245dc..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/text/index.web.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { textStyle } from './styles'; - -type ITextProps = React.ComponentProps<'span'> & VariantProps; - -const Text = React.forwardRef( - ( - { - className, - isTruncated, - bold, - underline, - strikeThrough, - size = 'md', - sub, - italic, - highlight, - ...props - }: { className?: string } & ITextProps, - ref?: any - ) => { - return ( - - ); - } -); - -Text.displayName = 'Text'; - -export { Text }; diff --git a/example/storybook-v7/src/core-components/nativewind/text/styles.tsx b/example/storybook-v7/src/core-components/nativewind/text/styles.tsx deleted file mode 100644 index d590f0efed..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/text/styles.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; - -const baseStyle = isWeb - ? 'font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word' - : ''; - -export const textStyle = tva({ - base: `text-typography-700 font-normal font-body ${baseStyle}`, - - variants: { - isTruncated: { - true: 'web:truncate', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); diff --git a/example/storybook-v7/src/core-components/nativewind/textarea/index.tsx b/example/storybook-v7/src/core-components/nativewind/textarea/index.tsx deleted file mode 100644 index 811dbf2d0d..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/textarea/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -'use client'; -import React from 'react'; -import { createTextarea } from '@gluestack-ui/textarea'; -import { View, TextInput, Platform } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -const SCOPE = 'TEXTAREA'; -const UITextarea = createTextarea({ - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE), - Input: Platform.OS === 'web' ? TextInput : withStates(TextInput), -}); - -cssInterop(UITextarea, { className: 'style' }); -cssInterop(UITextarea.Input, { className: 'style' }); - -const textareaStyle = tva({ - base: 'w-full h-[100px] border border-background-300 rounded hover: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: { - variant: { - default: - 'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-primary-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-primary-700 data-[invalid=true]:data-[disabled=true]:hover:border-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 ', - }, - size: { - sm: '', - md: '', - lg: '', - xl: '', - }, - }, -}); - -const textareaInputStyle = tva({ - base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed', - parentVariants: { - size: { - sm: 'text-sm', - md: 'text-base', - lg: 'text-lg', - xl: 'text-xl', - }, - }, -}); - -type ITextareaProps = React.ComponentProps & - VariantProps; - -const Textarea = React.forwardRef( - ( - { - className, - variant = 'default', - size = 'md', - ...props - }: { className?: string } & ITextareaProps, - ref?: any - ) => { - return ( - - ); - } -); - -type ITextareaInputProps = React.ComponentProps & - VariantProps; - -const TextareaInput = React.forwardRef( - ( - { className, ...props }: { className?: string } & ITextareaInputProps, - ref?: any - ) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); - } -); - -Textarea.displayName = 'Textarea'; -TextareaInput.displayName = 'TextareaInput'; - -export { Textarea, TextareaInput }; diff --git a/example/storybook-v7/src/core-components/nativewind/toast/index.tsx b/example/storybook-v7/src/core-components/nativewind/toast/index.tsx deleted file mode 100644 index 6d96248867..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/toast/index.tsx +++ /dev/null @@ -1,150 +0,0 @@ -'use client'; -import React from 'react'; -import { createToast, createToastHook } from '@gluestack-ui/toast'; -import { Text, View } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import { Motion, AnimatePresence } from '@legendapp/motion'; - -export const useToast = createToastHook(Motion.View, AnimatePresence); - -export const UIToast = createToast({ - Root: View, - Title: Text, - Description: Text, -}); - -cssInterop(Motion.View, { className: 'style' }); -cssInterop(UIToast, { className: 'style' }); -cssInterop(UIToast.Title, { className: 'style' }); -cssInterop(UIToast.Description, { className: 'style' }); - -const toastStyle = tva({ - base: 'px-4 py-3 m-3 rounded flex-row web:pointer-events-auto shadow', - variants: { - action: { - error: 'bg-background-error border-error-300', - - warning: 'bg-background-warning border-warning-300', - - success: 'bg-background-success border-success-300', - - info: 'bg-background-info border-info-300', - - attention: 'bg-background-muted border-secondary-300', - }, - - variant: { - solid: '', - outline: 'border', - accent: 'border-l-4', - }, - }, - - defaultVariants: { - variant: 'solid', - action: 'attention', - }, -}); -const toastTitleStyle = tva({ - base: 'text-typography-700 font-medium font-body tracking-md text-left', - variants: { - isTruncated: { - true: '', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - 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', - }, - }, -}); - -const toastDescriptionStyle = tva({ - base: 'text-typography-700 font-normal font-body tracking-md text-left', - variants: { - isTruncated: { - true: '', - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - 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', - }, - }, -}); - -export const Toast = React.forwardRef( - ({ className, variant, action, ...props }: any, ref?: any) => { - return ( - - ); - } -); - -export const ToastTitle = React.forwardRef( - ({ className, size = 'md', ...props }: any, ref?: any) => { - return ( - - ); - } -); -export const ToastDescription = React.forwardRef( - ({ className, size, ...props }: any, ref?: any) => { - return ( - - ); - } -); diff --git a/example/storybook-v7/src/core-components/nativewind/tooltip/index.tsx b/example/storybook-v7/src/core-components/nativewind/tooltip/index.tsx deleted file mode 100644 index f6815c6e5a..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/tooltip/index.tsx +++ /dev/null @@ -1,156 +0,0 @@ -'use client'; -import React from 'react'; -import { createTooltip } from '@gluestack-ui/tooltip'; -import { View, Text, Platform } from 'react-native'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; - -import { Motion, AnimatePresence } from '@legendapp/motion'; - -export const UITooltip = createTooltip({ - Root: - Platform.OS === 'web' - ? withStyleContext(View) - : withStyleContextAndStates(View), - Content: Motion.View, - Text: Text, - AnimatePresence: AnimatePresence, -}); - -const tooltipStyle = tva({ - base: 'w-full h-full web:pointer-events-none', -}); - -const tooltipContentStyle = tva({ - base: 'py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto', -}); - -const tooltipTextStyle = tva({ - base: 'font-normal tracking-normal text-red-400 web:select-none text-xs text-typography-50', - - variants: { - isTruncated: { - true: { - props: 'line-clamp-1 truncate', - }, - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - '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', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', - }, - }, -}); - -cssInterop(UITooltip, { className: 'style' }); -cssInterop(UITooltip.Content, { className: 'style' }); -cssInterop(UITooltip.Text, { className: 'style' }); - -type ITooltipProps = React.ComponentProps & - VariantProps; -type ITooltipContentProps = React.ComponentProps & - VariantProps; -type ITooltipTextProps = React.ComponentProps & - VariantProps; - -export const Tooltip = React.forwardRef( - ( - { className, ...props }: { className?: string } & ITooltipProps, - ref?: any - ) => { - return ( - - ); - } -); - -export const TooltipContent = React.forwardRef( - ( - { className, ...props }: { className?: string } & ITooltipContentProps, - ref?: any - ) => { - return ( - - ); - } -); - -export const TooltipText = React.forwardRef( - ( - { - className, - size = 'md', - ...props - }: { className?: string } & ITooltipTextProps, - ref?: any - ) => { - return ( - - ); - } -); diff --git a/example/storybook-v7/src/core-components/nativewind/view/index.tsx b/example/storybook-v7/src/core-components/nativewind/view/index.tsx deleted file mode 100644 index ae97908127..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/view/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { View } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/virtualized-list/index.tsx b/example/storybook-v7/src/core-components/nativewind/virtualized-list/index.tsx deleted file mode 100644 index b90d3a60f5..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/virtualized-list/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { VirtualizedList } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/nativewind/vstack/index.tsx b/example/storybook-v7/src/core-components/nativewind/vstack/index.tsx deleted file mode 100644 index 2ffc3483a6..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/vstack/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import { View } from 'react-native'; - -import { vstackStyle } from './styles'; - -type IVStackProps = React.ComponentProps & - VariantProps; - -const VStack = React.forwardRef( - ({ className, space, reversed, ...props }: IVStackProps, ref?: any) => { - return ( - - ); - } -); - -VStack.displayName = 'VStack'; - -export { VStack }; diff --git a/example/storybook-v7/src/core-components/nativewind/vstack/index.web.tsx b/example/storybook-v7/src/core-components/nativewind/vstack/index.web.tsx deleted file mode 100644 index 4d52aae9c2..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/vstack/index.web.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -import { vstackStyle } from './styles'; - -type IVStackProps = React.ComponentProps<'div'> & - VariantProps; - -const VStack = React.forwardRef( - ({ className, space, reversed, ...props }: IVStackProps, ref?: any) => { - return ( -
- ); - } -); - -VStack.displayName = 'VStack'; - -export { VStack }; diff --git a/example/storybook-v7/src/core-components/nativewind/vstack/styles.tsx b/example/storybook-v7/src/core-components/nativewind/vstack/styles.tsx deleted file mode 100644 index abc5dbe02c..0000000000 --- a/example/storybook-v7/src/core-components/nativewind/vstack/styles.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; - -const baseStyle = isWeb - ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none' - : ''; - -export const vstackStyle = tva({ - base: `flex-col ${baseStyle}`, - variants: { - space: { - 'xs': 'gap-1', - 'sm': 'gap-2', - 'md': 'gap-3', - 'lg': 'gap-4', - 'xl': 'gap-5', - '2xl': 'gap-6', - '3xl': 'gap-7', - '4xl': 'gap-8', - }, - reversed: { - true: 'flex-col-reverse', - }, - }, -}); diff --git a/example/storybook-v7/src/core-components/themed/Wrapper.tsx b/example/storybook-v7/src/core-components/themed/Wrapper.tsx deleted file mode 100644 index 19a0d99244..0000000000 --- a/example/storybook-v7/src/core-components/themed/Wrapper.tsx +++ /dev/null @@ -1,35 +0,0 @@ -'use client'; -import React from 'react'; -import { Box, Center } from '@gluestack-ui/themed'; -import { StyledProvider, useColorMode } from '@gluestack-style/react'; -import { createProvider } from '@gluestack-ui/provider'; -import { OverlayProvider } from '@gluestack-ui/overlay'; -import { ToastProvider } from '@gluestack-ui/toast'; - -const Provider = createProvider({ StyledProvider }) as any; -Provider.displayName = 'Provider'; - -const Wrapper = ({ children, ...props }: any) => { - const colorMode = useColorMode(); - return ( - - - {/* @ts-ignore */} - - -
{children}
-
-
-
-
- ); -}; - -export default Wrapper; diff --git a/example/storybook-v7/src/core-components/themed/accordion/index.tsx b/example/storybook-v7/src/core-components/themed/accordion/index.tsx deleted file mode 100644 index 016277e019..0000000000 --- a/example/storybook-v7/src/core-components/themed/accordion/index.tsx +++ /dev/null @@ -1,355 +0,0 @@ -'use client'; -import { createAccordion } from '@gluestack-ui/accordion'; -import { AsForwarder, styled } from '@gluestack-style/react'; -import { View, Pressable, Text, Platform } from 'react-native'; - -import { H3 } from '@expo/html-elements'; - -const StyleRoot = styled( - View, - { - width: '$full', - _icon: { - color: '$text900', - }, - _titleText: { - color: '$text900', - }, - _contentText: { - color: '$text700', - }, - - variants: { - size: { - sm: { - _titleText: { - fontSize: '$sm', - fontFamily: '$body', - fontWeight: '$bold', - lineHeight: '$sm', - }, - _contentText: { - fontSize: '$sm', - fontFamily: '$body', - fontWeight: '$normal', - lineHeight: '$sm', - }, - }, - md: { - _titleText: { - fontSize: '$md', - fontFamily: '$body', - fontWeight: '$bold', - lineHeight: '$md', - }, - _contentText: { - fontSize: '$md', - fontFamily: '$body', - fontWeight: '$normal', - lineHeight: '$md', - }, - }, - lg: { - _titleText: { - fontSize: '$lg', - fontFamily: '$body', - fontWeight: '$bold', - lineHeight: '$lg', - }, - _contentText: { - fontSize: '$lg', - fontFamily: '$body', - fontWeight: '$normal', - lineHeight: '$lg', - }, - }, - }, - variant: { - filled: { - backgroundColor: '$white', - - _item: { - backgroundColor: '$background0', - }, - - shadowColor: '$background900', - - shadowOffset: { - width: 0, - height: 3, - }, - - shadowRadius: 8, - shadowOpacity: 0.2, - elevation: 10, - }, - unfilled: { - shadowColor: 'transparent', - - shadowOffset: { - width: 0, - height: 0, - }, - - _item: { - backgroundColor: 'transparent', - }, - }, - }, - }, - defaultProps: { - theme: 'light', - size: 'md', - variant: 'filled', - }, - }, - { - descendantStyle: [ - '_item', - '_titleText', - '_button', - '_icon', - '_contentText', - ], - } -); -const StyledItem = styled(View, {}, { ancestorStyle: ['_item'] }); -// @ts-ignore -const StyledHeader = styled(Platform.OS === 'web' ? H3 : View, { - mx: '$0', - my: '$0', -}); -const StyledTrigger = styled( - Pressable, - { - 'width': '$full', - 'py': '$5', - 'px': '$5', - 'flexDirection': 'row', - 'justifyContent': 'space-between', - 'alignItems': 'center', - '_web': { - outlineWidth: 0, - }, - ':disabled': { - opacity: 0.4, - _web: { - cursor: 'not-allowed', - }, - }, - ':focusVisible': { - bg: '$background50', - }, - }, - { - descendantStyle: ['_icon', '_titleText', '_contentText'], - ancestorStyle: ['_button'], - } -); -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledTitleText = styled( - StyledText, - { flex: 1, textAlign: 'left' }, - { ancestorStyle: ['_titleText'] } -); -const StyledContentText = styled(Text, {}, { ancestorStyle: ['_contentText'] }); -const StyledIcon = styled( - AsForwarder, - { - color: '$background800', - - // defaultProps: { - // size: 'md', - // }, - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - - props: { - size: 'md', - }, - }, - { - resolveProps: ['stroke', 'fill'], - ancestorStyle: ['_icon'], - }, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); -const StyledContent = styled(View, { px: '$5', mt: '$2', pb: '$5' }); - -export const Accordion = createAccordion({ - Root: StyleRoot, - Item: StyledItem, - Header: StyledHeader, - Trigger: StyledTrigger, - Icon: StyledIcon, - TitleText: StyledTitleText, - ContentText: StyledContentText, - Content: StyledContent, -}); - -export const AccordionItem = Accordion.Item; -export const AccordionHeader = Accordion.Header; -export const AccordionTrigger = Accordion.Trigger; -export const AccordionTitleText = Accordion.TitleText; -export const AccordionContentText = Accordion.ContentText; -export const AccordionIcon = Accordion.Icon; -export const AccordionContent = Accordion.Content; diff --git a/example/storybook-v7/src/core-components/themed/actionsheet/index.tsx b/example/storybook-v7/src/core-components/themed/actionsheet/index.tsx deleted file mode 100644 index 4056662001..0000000000 --- a/example/storybook-v7/src/core-components/themed/actionsheet/index.tsx +++ /dev/null @@ -1,579 +0,0 @@ -'use client'; -import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; -import { - AnimatePresence, - AnimatedPressable, - AnimatedView, -} from '@gluestack-style/animation-resolver'; -import { styled, AsForwarder } from '@gluestack-style/react'; -import { createActionsheet } from '@gluestack-ui/actionsheet'; -import { - Pressable, - View, - Text, - ScrollView, - VirtualizedList, - FlatList, - SectionList, -} from 'react-native'; - -const StyledRoot = styled(View, { - width: '$full', - height: '$full', - _web: { - pointerEvents: 'none', - }, -}); - -const StyledContent = styled( - AnimatedView, - { - alignItems: 'center', - borderTopLeftRadius: '$3xl', - borderTopRightRadius: '$3xl', - h: '$full', - p: '$2', - bg: '$background0', - - _sectionHeaderBackground: { - bg: '$background0', - }, - - defaultProps: { - hardShadow: '5', - }, - - _web: { - userSelect: 'none', - pointerEvents: 'auto', - }, - }, - { - descendantStyle: ['_sectionHeaderBackground'], - } -); - -const StyledItem = styled( - Pressable, - { - 'p': '$3', - 'flexDirection': 'row', - 'alignItems': 'center', - 'rounded': '$sm', - 'w': '$full', - - ':disabled': { - opacity: 0.4, - _web: { - // @ts-ignore - pointerEvents: 'all !important', - cursor: 'not-allowed', - }, - }, - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: '$background100', - }, - - ':focus': { - bg: '$background100', - }, - - '_web': { - ':focusVisible': { - bg: '$background100', - }, - }, - }, - { - descendantStyle: ['_text', '_icon'], - } -); - -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledItemText = styled( - StyledText, - { - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - mx: '$2', - props: { - size: 'md', - }, - color: '$text800', - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledDragIndicator = styled(View, { - w: '$16', - h: '$1', - bg: '$background400', - rounded: '$full', -}); - -const StyledDragIndicatorWrapper = styled(View, { - py: '$1', - w: '$full', - alignItems: 'center', -}); - -const StyledBackdrop = styled(AnimatedPressable, { - ':initial': { - opacity: 0, - }, - - ':animate': { - opacity: 0.5, - }, - - ':exit': { - opacity: 0, - }, - - 'position': 'absolute', - 'left': 0, - 'top': 0, - 'right': 0, - 'bottom': 0, - 'bg': '$background950', - - '_web': { - cursor: 'default', - pointerEvents: 'auto', - }, -}); - -const StyledScrollView = styled(ScrollView, { - w: '$full', - h: 'auto', -}); - -const StyledVirtualizedList = styled(VirtualizedList, { - w: '$full', - h: 'auto', -}); - -const StyledFlatList = styled(FlatList, { - w: '$full', - h: 'auto', -}); - -const StyledSectionList = styled(SectionList, { - w: '$full', - h: 'auto', -}); - -const StyledSectionHeaderText = styled(H4, { - letterSpacing: '$sm', - fontWeight: '$bold', - fontFamily: '$heading', - - // Overrides expo-html default styling - marginVertical: 0, - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '5xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$6xl', - }, - '4xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$5xl', - }, - - '3xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$4xl', - }, - - '2xl': { - //@ts-ignore - props: { as: H2 }, - fontSize: '$3xl', - }, - - 'xl': { - //@ts-ignore - props: { as: H3 }, - fontSize: '$2xl', - }, - - 'lg': { - //@ts-ignore - props: { as: H4 }, - fontSize: '$xl', - }, - - 'md': { - //@ts-ignore - props: { as: H5 }, - fontSize: '$lg', - }, - - 'sm': { - //@ts-ignore - props: { as: H6 }, - fontSize: '$md', - }, - - 'xs': { - //@ts-ignore - props: { as: H6 }, - fontSize: '$sm', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - color: '$text500', - props: { size: 'xs' }, - textTransform: 'uppercase', - p: '$3', -}); - -const StyledIcon = styled( - AsForwarder, - { - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'sm', - }, - - color: '$background500', - }, - { - componentName: 'BaseIcon', - resolveProps: ['stroke', 'fill'], - } as const, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); - -export const Actionsheet = createActionsheet({ - Root: StyledRoot, - Content: StyledContent, - Item: StyledItem, - ItemText: StyledItemText, - DragIndicator: StyledDragIndicator, - IndicatorWrapper: StyledDragIndicatorWrapper, - Backdrop: StyledBackdrop, - ScrollView: StyledScrollView, - VirtualizedList: StyledVirtualizedList, - FlatList: StyledFlatList, - SectionList: StyledSectionList, - SectionHeaderText: StyledSectionHeaderText, - Icon: StyledIcon, - AnimatePresence: AnimatePresence, -}); - -export const ActionsheetContent = Actionsheet.Content; -export const ActionsheetItem = Actionsheet.Item; -export const ActionsheetItemText = Actionsheet.ItemText; -export const ActionsheetDragIndicator = Actionsheet.DragIndicator; -export const ActionsheetDragIndicatorWrapper = Actionsheet.DragIndicatorWrapper; -export const ActionsheetBackdrop = Actionsheet.Backdrop; -export const ActionsheetScrollView = Actionsheet.ScrollView; -export const ActionsheetVirtualizedList = Actionsheet.VirtualizedList; -export const ActionsheetFlatList = Actionsheet.FlatList; -export const ActionsheetSectionList = Actionsheet.SectionList; -export const ActionsheetSectionHeaderText = Actionsheet.SectionHeaderText; -export const ActionsheetIcon = Actionsheet.Icon; diff --git a/example/storybook-v7/src/core-components/themed/alert-dialog/index.tsx b/example/storybook-v7/src/core-components/themed/alert-dialog/index.tsx deleted file mode 100644 index de03bbd722..0000000000 --- a/example/storybook-v7/src/core-components/themed/alert-dialog/index.tsx +++ /dev/null @@ -1,220 +0,0 @@ -'use client'; -import { - AnimatePresence, - AnimatedView, - AnimatedPressable, -} from '@gluestack-style/animation-resolver'; -import { createAlertDialog } from '@gluestack-ui/alert-dialog'; -import { View, Pressable, ScrollView } from 'react-native'; -import { styled } from '@gluestack-style/react'; -const StyledRoot = styled( - View, - { - w: '$full', - h: '$full', - justifyContent: 'center', - alignItems: 'center', - - variants: { - size: { - xs: { _content: { w: '60%', maxWidth: 360 } }, - sm: { _content: { w: '70%', maxWidth: 420 } }, - md: { _content: { w: '80%', maxWidth: 510 } }, - lg: { _content: { w: '90%', maxWidth: 640 } }, - full: { _content: { w: '$full' } }, - }, - }, - defaultProps: { size: 'md' }, - - _web: { - pointerEvents: 'box-none', - }, - }, - { - descendantStyle: ['_content'], - } -); - -const StyledContent = styled( - AnimatedView, - { - 'bg': '$background50', - 'rounded': '$lg', - 'overflow': 'hidden', - - //@ts-ignore - ':initial': { - scale: 0.9, - opacity: 0, - }, - - ':animate': { - scale: 1, - opacity: 1, - }, - - ':exit': { - scale: 0.9, - opacity: 0, - }, - - ':transition': { - type: 'spring', - damping: 18, - stiffness: 250, - // @ts-ignore - opacity: { - type: 'timing', - duration: 250, - }, - }, - - 'defaultProps': { - softShadow: '3', - }, - }, - { - ancestorStyle: ['_content'], - } -); - -const StyledCloseButton = styled( - Pressable, - { - 'zIndex': 1, - 'rounded': '$sm', - 'p': '$2', - - '_icon': { - color: '$background400', - }, - - '_text': { - color: '$background400', - }, - - ':hover': { - _icon: { - color: '$background700', - }, - _text: { - color: '$background700', - }, - }, - - ':active': { - _icon: { - color: '$background900', - }, - _text: { - color: '$background900', - }, - }, - - ':focusVisible': { - bg: '$background100', - - _icon: { - color: '$background900', - }, - - _text: { - color: '$background900', - }, - }, - - '_web': { - outlineWidth: 0, - cursor: 'pointer', - }, - }, - { - descendantStyle: ['_icon', '_text'], - } -); -const StyledHeader = styled( - View, - { - p: '$4', - borderColor: '$border300', - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row', - }, - {} -); - -const StyledFooter = styled( - View, - { - p: '$4', - flexDirection: 'row', - justifyContent: 'flex-end', - alignItems: 'center', - flexWrap: 'wrap', - borderColor: '$border300', - }, - {} -); -const StyledBody = styled(ScrollView, { px: '$4', py: '$2' }, {}); - -const StyledBackdrop = styled( - AnimatedPressable, - { - ':initial': { - opacity: 0, - }, - - ':animate': { - opacity: 0.5, - }, - - ':exit': { - opacity: 0, - }, - - ':transition': { - // @ts-ignore - type: 'spring', - damping: 18, - stiffness: 250, - opacity: { - type: 'timing', - duration: 250, - }, - }, - - 'position': 'absolute', - 'left': 0, - 'top': 0, - 'right': 0, - 'bottom': 0, - 'bg': '$background950', - - // @ts-ignore - '_web': { - cursor: 'default', - }, - }, - {} -); - -const AccessibleAlertDialog = createAlertDialog({ - Root: StyledRoot, - Content: StyledContent, - CloseButton: StyledCloseButton, - Header: StyledHeader, - Footer: StyledFooter, - Body: StyledBody, - Backdrop: StyledBackdrop, - //@ts-ignore - AnimatePresence: AnimatePresence, -}); - -export const AlertDialog = AccessibleAlertDialog; -export const AlertDialogContent = AccessibleAlertDialog.Content; -export const AlertDialogCloseButton = AccessibleAlertDialog.CloseButton; -export const AlertDialogHeader = AccessibleAlertDialog.Header; -export const AlertDialogFooter = AccessibleAlertDialog.Footer; -export const AlertDialogBody = AccessibleAlertDialog.Body; -export const AlertDialogBackdrop = AccessibleAlertDialog.Backdrop; diff --git a/example/storybook-v7/src/core-components/themed/alert/index.tsx b/example/storybook-v7/src/core-components/themed/alert/index.tsx deleted file mode 100644 index 56dce8afa6..0000000000 --- a/example/storybook-v7/src/core-components/themed/alert/index.tsx +++ /dev/null @@ -1,257 +0,0 @@ -'use client'; -import { AsForwarder, styled } from '@gluestack-style/react'; -import { createAlert } from '@gluestack-ui/alert'; -import { View, Text } from 'react-native'; - -const StyledRoot = styled( - View, - { - alignItems: 'center', - p: '$3', - flexDirection: 'row', - borderRadius: '$sm', - variants: { - action: { - error: { - bg: '$backgroundError', - borderColor: '$error300', - - _icon: { - color: '$error500', - }, - }, - warning: { - bg: '$backgroundWarning', - borderColor: '$warning300', - - _icon: { - color: '$warning500', - }, - }, - success: { - bg: '$backgroundSuccess', - borderColor: '$success300', - - _icon: { - color: '$success500', - }, - }, - info: { - bg: '$backgroundInfo', - borderColor: '$info300', - - _icon: { - color: '$info500', - }, - }, - muted: { - bg: '$backgroundMuted', - borderColor: '$secondary300', - - _icon: { - color: '$secondary500', - }, - }, - }, - - variant: { - solid: {}, - outline: { - borderWidth: '$1', - bg: 'transparent', - }, - accent: { - borderLeftWidth: '$4', - }, - }, - }, - - defaultProps: { - variant: 'solid', - action: 'info', - }, - }, - { - descendantStyle: ['_icon', '_text'], - } -); - -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledIcon = styled( - AsForwarder, - { - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'md', - //@ts-ignore - fill: 'none', - }, - }, - { - ancestorStyle: ['_icon'], - } -); - -export const Alert = createAlert({ - Root: StyledRoot, - Text: StyledText, - Icon: StyledIcon, -}); - -export const AlertText = Alert.Text; -export const AlertIcon = Alert.Icon; diff --git a/example/storybook-v7/src/core-components/themed/avatar/index.tsx b/example/storybook-v7/src/core-components/themed/avatar/index.tsx deleted file mode 100644 index fbd1ead795..0000000000 --- a/example/storybook-v7/src/core-components/themed/avatar/index.tsx +++ /dev/null @@ -1,294 +0,0 @@ -'use client'; -import { createAvatar } from '@gluestack-ui/avatar'; -import { styled } from '@gluestack-style/react'; -import { View, Text, Image } from 'react-native'; -const StyledRoot = styled( - View, - { - borderRadius: '$full', - justifyContent: 'center', - alignItems: 'center', - position: 'relative', - bg: '$primary600', - variants: { - size: { - 'xs': { - w: '$6', - h: '$6', - - _badge: { - w: '$2', - h: '$2', - }, - _image: { - w: '$full', - h: '$full', - }, - - _text: { - props: { size: '2xs' }, - }, - }, - - 'sm': { - w: '$8', - h: '$8', - - _badge: { - w: '$2', - h: '$2', - }, - _image: { - w: '$full', - h: '$full', - }, - - _text: { - props: { size: 'xs' }, - }, - }, - - 'md': { - w: '$12', - h: '$12', - - _badge: { - w: '$3', - h: '$3', - }, - _image: { - w: '$full', - h: '$full', - }, - - _text: { - props: { size: 'md' }, - }, - }, - - 'lg': { - w: '$16', - h: '$16', - - _badge: { - w: '$4', - h: '$4', - }, - _image: { - w: '$full', - h: '$full', - }, - - _text: { - props: { size: 'xl' }, - }, - }, - - 'xl': { - w: '$24', - h: '$24', - - _badge: { - w: '$6', - h: '$6', - }, - _image: { - w: '$full', - h: '$full', - }, - - _text: { - props: { size: '3xl' }, - }, - }, - - '2xl': { - w: '$32', - h: '$32', - - _badge: { - w: '$8', - h: '$8', - }, - _image: { - w: '$full', - h: '$full', - }, - - _text: { - props: { size: '5xl' }, - }, - }, - }, - }, - defaultProps: { - size: 'md', - }, - }, - { - descendantStyle: ['_badge', '_text', '_image'], - ancestorStyle: ['_avatar'], - } -); - -const StyledBadge = styled( - View, - { - w: '$5', - h: '$5', - bg: '$success500', - borderRadius: '$full', - position: 'absolute', - right: 0, - bottom: 0, - borderColor: 'white', - borderWidth: 2, - }, - { - ancestorStyle: ['_badge'], - } -); -const StyledGroup = styled( - View, - { - flexDirection: 'row-reverse', - position: 'relative', - _avatar: { - ml: -10, - }, - }, - { - descendantStyle: ['_avatar'], - } -); - -const StyledImage = styled( - Image, - { w: '$full', h: '$full', borderRadius: '$full', position: 'absolute' }, - { - ancestorStyle: ['_image'], - } -); - -const StyledFallbackText = styled( - Text, - { - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - color: '$text0', - fontWeight: '$semibold', - props: { - size: 'xl', - }, - overflow: 'hidden', - textTransform: 'uppercase', - _web: { - cursor: 'default', - }, - }, - { - ancestorStyle: ['_text'], - } as const -); - -const AccessbileAvatar = createAvatar({ - Root: StyledRoot, - Badge: StyledBadge, - Group: StyledGroup, - Image: StyledImage, - FallbackText: StyledFallbackText, -}); - -export const Avatar = AccessbileAvatar; -export const AvatarBadge = AccessbileAvatar.Badge; -export const AvatarGroup = AccessbileAvatar.Group; -export const AvatarImage = AccessbileAvatar.Image; -export const AvatarFallbackText = AccessbileAvatar.FallbackText; diff --git a/example/storybook-v7/src/core-components/themed/badge/index.tsx b/example/storybook-v7/src/core-components/themed/badge/index.tsx deleted file mode 100644 index 3a4233ff0e..0000000000 --- a/example/storybook-v7/src/core-components/themed/badge/index.tsx +++ /dev/null @@ -1,320 +0,0 @@ -'use client'; -import { AsForwarder, styled } from '@gluestack-style/react'; -import { Text, View } from 'react-native'; - -const StyledRoot = styled( - View, - { - 'flexDirection': 'row', - 'alignItems': 'center', - 'borderRadius': '$xs', - 'variants': { - action: { - error: { - bg: '$backgroundError', - borderColor: '$error300', - - _icon: { - color: '$error600', - }, - - _text: { - color: '$error600', - }, - }, - warning: { - bg: '$backgroundWarning', - borderColor: '$warning300', - - _icon: { - color: '$warning600', - }, - - _text: { - color: '$warning600', - }, - }, - success: { - bg: '$backgroundSuccess', - borderColor: '$success300', - - _icon: { - color: '$success600', - }, - - _text: { - color: '$success600', - }, - }, - info: { - bg: '$backgroundInfo', - borderColor: '$info300', - - _icon: { - color: '$info600', - }, - - _text: { - color: '$info600', - }, - }, - muted: { - bg: '$backgroundMuted', - borderColor: '$secondary300', - - _icon: { - color: '$secondary600', - }, - - _text: { - color: '$secondary600', - }, - }, - }, - - variant: { - solid: {}, - outline: { - borderWidth: '$1', - }, - }, - - size: { - sm: { - px: '$2', - _icon: { - props: { - size: '2xs', - }, - }, - _text: { - props: { - size: '2xs', - }, - }, - }, - md: { - px: '$2', - _icon: { - props: { - size: 'xs', - }, - }, - _text: { - props: { - size: 'xs', - }, - }, - }, - lg: { - px: '$2', - _icon: { - props: { size: 'sm' }, - }, - _text: { - props: { size: 'sm' }, - }, - }, - }, - }, - - ':disabled': { - opacity: 0.5, - }, - 'defaultProps': { - action: 'info', - variant: 'solid', - size: 'md', - }, - }, - { - componentName: 'Badge', - descendantStyle: ['_text', '_icon'], - } as const -); - -const StyledText = styled( - Text, - { - color: '$text700', - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - textTransform: 'uppercase', - }, - { - componentName: 'BadgeText', - ancestorStyle: ['_text'], - } as const -); - -const StyledIcon = styled( - AsForwarder, - { - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'md', - //@ts-ignore - fill: 'none', - }, - - color: '$background500', - }, - { - componentName: 'BaseIcon', - resolveProps: ['stroke', 'fill'], - ancestorStyle: ['_icon'], - } as const, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); - -const Badge = StyledRoot; - -export { Badge, StyledIcon as BadgeIcon, StyledText as BadgeText }; diff --git a/example/storybook-v7/src/core-components/themed/box/index.tsx b/example/storybook-v7/src/core-components/themed/box/index.tsx deleted file mode 100644 index 33d9cffd8c..0000000000 --- a/example/storybook-v7/src/core-components/themed/box/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -'use client'; -import { View } from 'react-native'; - -import { styled } from '@gluestack-style/react'; - -const StyledRoot = styled(View, {}); - -export const Box = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/button/index.tsx b/example/storybook-v7/src/core-components/themed/button/index.tsx deleted file mode 100644 index 82545210a7..0000000000 --- a/example/storybook-v7/src/core-components/themed/button/index.tsx +++ /dev/null @@ -1,951 +0,0 @@ -'use client'; -import { ActivityIndicator, Pressable, Text, View } from 'react-native'; -import { createButton } from '@gluestack-ui/button'; -import { AsForwarder, styled } from '@gluestack-style/react'; - -const StyledRoot = styled( - Pressable, - { - 'borderRadius': '$sm', - 'backgroundColor': '$primary500', - 'flexDirection': 'row', - 'justifyContent': 'center', - 'alignItems': 'center', - - '_text': { - color: '$text0', - fontWeight: '$semibold', - }, - - '_icon': { - color: '$text0', - }, - - '_spinner': { - props: { - color: '$background0', - }, - }, - - 'variants': { - action: { - primary: { - 'bg': '$primary500', - 'borderColor': '$primary300', - - ':hover': { - bg: '$primary600', - borderColor: '$primary400', - }, - - ':active': { - bg: '$primary700', - borderColor: '$primary700', - }, - - '_text': { - 'color': '$primary600', - ':hover': { - color: '$primary600', - }, - ':active': { - color: '$primary700', - }, - }, - - '_icon': { - 'color': '$primary600', - ':hover': { - color: '$primary600', - }, - ':active': { - color: '$primary700', - }, - }, - - '_spinner': { - 'props': { - color: '$primary600', - }, - ':hover': { - props: { - color: '$primary600', - }, - }, - ':active': { - props: { - color: '$primary700', - }, - }, - }, - }, - secondary: { - 'bg': '$secondary500', - 'borderColor': '$secondary300', - - ':hover': { - bg: '$secondary600', - borderColor: '$secondary400', - }, - - ':active': { - bg: '$secondary700', - borderColor: '$secondary700', - }, - - '_text': { - 'color': '$secondary600', - ':hover': { - color: '$secondary600', - }, - ':active': { - color: '$secondary700', - }, - }, - - '_icon': { - 'color': '$secondary600', - ':hover': { - color: '$secondary600', - }, - ':active': { - color: '$secondary700', - }, - }, - - '_spinner': { - 'props': { - color: '$secondary600', - }, - ':hover': { - props: { color: '$secondary600' }, - }, - ':active': { - props: { color: '$secondary700' }, - }, - }, - }, - positive: { - 'bg': '$success500', - 'borderColor': '$success300', - - ':hover': { - bg: '$success600', - borderColor: '$success400', - }, - - ':active': { - bg: '$success700', - borderColor: '$success700', - }, - - '_text': { - 'color': '$success600', - ':hover': { - color: '$success600', - }, - ':active': { - color: '$success700', - }, - }, - - '_icon': { - 'color': '$success600', - ':hover': { - color: '$success600', - }, - ':active': { - color: '$success700', - }, - }, - - '_spinner': { - 'props': { - color: '$success600', - }, - ':hover': { - props: { color: '$success600' }, - }, - ':active': { - props: { color: '$success700' }, - }, - }, - }, - negative: { - 'bg': '$error500', - 'borderColor': '$error300', - - ':hover': { - bg: '$error600', - borderColor: '$error400', - }, - - ':active': { - bg: '$error700', - borderColor: '$error700', - }, - - '_text': { - 'color': '$error600', - ':hover': { - color: '$error600', - }, - ':active': { - color: '$error700', - }, - }, - - '_icon': { - 'color': '$error600', - ':hover': { - color: '$error600', - }, - ':active': { - color: '$error700', - }, - }, - - '_spinner': { - 'props': { - color: '$error600', - }, - ':hover': { - props: { color: '$error600' }, - }, - ':active': { - props: { color: '$error700' }, - }, - }, - }, - - default: { - 'bg': '$transparent', - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - - variant: { - link: { - 'px': '$0', - ':hover': { - _text: { - textDecorationLine: 'underline', - }, - }, - ':active': { - _text: { - textDecorationLine: 'underline', - }, - }, - }, - outline: { - 'bg': 'transparent', - 'borderWidth': '$1', - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: 'transparent', - }, - }, - solid: { - _text: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - }, - - _spinner: { - 'props': { color: '$text0' }, - ':hover': { - props: { color: '$text0' }, - }, - ':active': { - props: { color: '$text0' }, - }, - }, - - _icon: { - 'props': { color: '$text0' }, - ':hover': { - props: { color: '$text0' }, - }, - ':active': { - props: { color: '$text0' }, - }, - }, - }, - }, - - size: { - xs: { - px: '$3.5', - h: '$8', - _icon: { - props: { - size: '2xs', - }, - }, - _text: { - props: { - size: 'xs', - }, - }, - }, - sm: { - px: '$4', - h: '$9', - _icon: { - props: { - size: 'sm', - }, - }, - _text: { - props: { - size: 'sm', - }, - }, - }, - md: { - px: '$5', - h: '$10', - _icon: { - props: { - size: 'md', - }, - }, - _text: { - props: { - size: 'md', - }, - }, - }, - lg: { - px: '$6', - h: '$11', - _icon: { - props: { - size: 'md', - }, - }, - _text: { - props: { - size: 'lg', - }, - }, - }, - xl: { - px: '$7', - h: '$12', - _icon: { - props: { - size: 'lg', - }, - }, - _text: { - props: { - size: 'xl', - }, - }, - }, - }, - }, - 'compoundVariants': [ - { - action: 'primary', - variant: 'link', - value: { - 'px': '$0', - 'bg': 'transparent', - - ':hover': { - bg: 'transparent', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - { - action: 'secondary', - variant: 'link', - value: { - 'px': '$0', - 'bg': 'transparent', - - ':hover': { - bg: 'transparent', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - { - action: 'positive', - variant: 'link', - value: { - 'px': '$0', - 'bg': 'transparent', - - ':hover': { - bg: 'transparent', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - { - action: 'negative', - variant: 'link', - value: { - 'px': '$0', - 'bg': 'transparent', - - ':hover': { - bg: 'transparent', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - { - action: 'primary', - variant: 'outline', - value: { - 'bg': 'transparent', - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - { - action: 'secondary', - variant: 'outline', - value: { - 'bg': 'transparent', - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - { - action: 'positive', - variant: 'outline', - value: { - 'bg': 'transparent', - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - { - action: 'negative', - variant: 'outline', - value: { - 'bg': 'transparent', - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: 'transparent', - }, - }, - }, - { - action: 'primary', - variant: 'solid', - value: { - _text: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - }, - - _icon: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - }, - - _spinner: { - 'props': { color: '$text0' }, - ':hover': { - props: { color: '$text0' }, - }, - ':active': { - props: { color: '$text0' }, - }, - }, - }, - }, - { - action: 'secondary', - variant: 'solid', - value: { - _text: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - }, - - _icon: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - }, - - _spinner: { - 'props': { color: '$text0' }, - ':hover': { - props: { color: '$text0' }, - }, - ':active': { - props: { color: '$text0' }, - }, - }, - }, - }, - { - action: 'positive', - variant: 'solid', - value: { - _text: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - }, - - _icon: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - 'props': { color: '$text0' }, - }, - - _spinner: { - 'props': { color: '$text0' }, - ':hover': { - props: { color: '$text0' }, - }, - ':active': { - props: { color: '$text0' }, - }, - }, - }, - }, - { - action: 'negative', - variant: 'solid', - value: { - _text: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - }, - - _icon: { - 'color': '$text0', - ':hover': { - color: '$text0', - }, - ':active': { - color: '$text0', - }, - }, - - _spinner: { - 'props': { color: '$text0' }, - ':hover': { - props: { color: '$text0' }, - }, - ':active': { - props: { color: '$text0' }, - }, - }, - }, - }, - ], - - 'props': { - size: 'md', - variant: 'solid', - action: 'primary', - }, - - '_web': { - ':focusVisible': { - outlineWidth: '$0.5', - outlineColor: '$primary700', - outlineStyle: 'solid', - }, - }, - - ':disabled': { - opacity: 0.4, - }, - }, - { - descendantStyle: ['_text', '_spinner', '_icon'], - ancestorStyle: ['_button'], - } -); - -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledButtonText = styled( - StyledText, - { - color: '$textLight0', - _web: { - userSelect: 'none', - }, - }, - { - ancestorStyle: ['_text'], - } -); -const StyledGroup = styled( - View, - { - variants: { - size: { - xs: { - _button: { - props: { - size: 'xs', - }, - }, - }, - sm: { - _button: { - props: { - size: 'sm', - }, - }, - }, - md: { - _button: { - props: { - size: 'md', - }, - }, - }, - lg: { - _button: { - props: { - size: 'lg', - }, - }, - }, - xl: { - _button: { - _button: { - props: { - size: 'xl', - }, - }, - }, - }, - }, - space: { - 'xs': { - gap: '$1', - }, - 'sm': { - gap: '$2', - }, - 'md': { - gap: '$3', - }, - 'lg': { - gap: '$4', - }, - 'xl': { - gap: '$5', - }, - '2xl': { - gap: '$6', - }, - '3xl': { - gap: '$7', - }, - '4xl': { - gap: '$8', - }, - }, - isAttached: { - true: { - gap: 0, - }, - }, - }, - defaultProps: { - size: 'md', - space: 'sm', - }, - }, - { - descendantStyle: ['_button'], - } -); - -const StyledSpinner = styled( - ActivityIndicator, - {}, - { - ancestorStyle: ['_spinner'], - resolveProps: ['color'], - } -); - -const StyledIcon = styled( - AsForwarder, - { - color: '$background800', - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'md', - }, - }, - { - resolveProps: ['stroke', 'fill'], - }, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); -const UIButton = createButton({ - Root: StyledRoot, - Text: StyledButtonText, - Group: StyledGroup, - Spinner: StyledSpinner, - Icon: StyledIcon, -}); - -export const Button = UIButton; -export const ButtonText = UIButton.Text; -export const ButtonGroup = UIButton.Group; -export const ButtonSpinner = UIButton.Spinner; -export const ButtonIcon = UIButton.Icon; diff --git a/example/storybook-v7/src/core-components/themed/card/index.tsx b/example/storybook-v7/src/core-components/themed/card/index.tsx deleted file mode 100644 index 505bbbd470..0000000000 --- a/example/storybook-v7/src/core-components/themed/card/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -'use client'; -import { View } from 'react-native'; -import { styled } from '@gluestack-style/react'; - -const StyledRoot = styled(View, { - variants: { - size: { - sm: { - p: '$3', - borderRadius: '$sm', - }, - md: { - p: '$4', - borderRadius: '$md', - }, - lg: { - p: '$6', - borderRadius: '$xl', - }, - }, - variant: { - elevated: { - bg: '$backgroundLight0', - shadowColor: '$backgroundLight800', - shadowOffset: { - width: 0, - height: 1, - }, - shadowOpacity: 0.22, - shadowRadius: 2.22, - elevation: 3, - _dark: { - bg: '$backgroundDark900', - }, - }, - outline: { - borderWidth: 1, - borderColor: '$borderLight200', - _dark: { - borderColor: '$borderDark800', - }, - }, - ghost: { - borderRadius: '$none', - }, - filled: { - bg: '$backgroundLight50', - _dark: { - bg: '$backgroundDark900', - }, - }, - }, - }, - defaultProps: { - theme: 'light', - size: 'md', - variant: 'elevated', - }, -}); - -export const Card = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/center/index.tsx b/example/storybook-v7/src/core-components/themed/center/index.tsx deleted file mode 100644 index a5e5372b29..0000000000 --- a/example/storybook-v7/src/core-components/themed/center/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -'use client'; -import { View } from 'react-native'; -import { styled } from '@gluestack-style/react'; -const StyledRoot = styled( - View, - { - alignItems: 'center', - justifyContent: 'center', - }, - {} -); - -export const Center = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/checkbox/index.tsx b/example/storybook-v7/src/core-components/themed/checkbox/index.tsx deleted file mode 100644 index 58ec4b0907..0000000000 --- a/example/storybook-v7/src/core-components/themed/checkbox/index.tsx +++ /dev/null @@ -1,399 +0,0 @@ -'use client'; -import { createCheckbox } from '@gluestack-ui/checkbox'; -import { View, Pressable, Text } from 'react-native'; - -import { Platform } from 'react-native'; - -import { Check } from 'lucide-react-native'; -import { styled } from '@gluestack-style/react'; - -const StyledRoot = styled( - // @ts-ignore - Platform.OS === 'web' ? View : Pressable, - { - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - gap: '$2', - variants: { - size: { - lg: { - _text: { - props: { - size: 'lg', - }, - }, - - _icon: { - props: { - size: 'md', - }, - }, - _indicator: { - borderWidth: 3, - h: '$6', - w: '$6', - }, - }, - - md: { - _text: { - props: { - size: 'md', - }, - }, - - _icon: { - props: { - size: 'sm', - }, - }, - _indicator: { - borderWidth: 2, - h: '$5', - w: '$5', - }, - }, - - sm: { - _text: { - props: { - size: 'sm', - }, - }, - - _icon: { - props: { - size: '2xs', - }, - }, - _indicator: { - borderWidth: 2, - h: '$4', - w: '$4', - }, - }, - }, - }, - - defaultProps: { - size: 'md', - }, - - _web: { - 'cursor': 'pointer', - ':disabled': { - cursor: 'not-allowed', - }, - }, - }, - { descendantStyle: ['_icon', '_text', '_indicator'] } -); - -const StyledIndicator = styled( - View, - { - 'justifyContent': 'center', - 'alignItems': 'center', - 'borderColor': '$border400', - 'bg': '$transparent', - 'borderRadius': 4, - - '_web': { - ':focusVisible': { - outlineWidth: '2px', - outlineColor: '$primary700', - outlineStyle: 'solid', - }, - }, - - ':checked': { - borderColor: '$primary600', - bg: '$primary600', - }, - - ':hover': { - 'borderColor': '$border500', - 'bg': 'transparent', - ':invalid': { - borderColor: '$error700', - }, - ':checked': { - 'bg': '$primary700', - 'borderColor': '$primary700', - ':disabled': { - 'borderColor': '$primary600', - 'bg': '$primary600', - 'opacity': 0.4, - ':invalid': { - borderColor: '$error700', - }, - }, - }, - ':disabled': { - 'borderColor': '$border400', - ':invalid': { - borderColor: '$error700', - }, - }, - }, - - ':active': { - ':checked': { - bg: '$primary800', - borderColor: '$primary800', - }, - }, - - ':invalid': { - borderColor: '$error700', - }, - - ':disabled': { - opacity: 0.4, - }, - }, - { ancestorStyle: ['_indicator'] } -); -const StyledIcon = styled( - Check, - { - 'color': '$background800', - - // defaultProps: { - // size: 'md', - // }, - 'variants': { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - - ':checked': { - color: '$background0', - }, - - ':disabled': { - opacity: 0.4, - }, - }, - { - resolveProps: ['stroke', 'fill'], - ancestorStyle: ['_icon'], - }, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); -const StyledLabel = styled( - StyledText, - { - 'color': '$text600', - - ':checked': { - color: '$text900', - }, - - ':hover': { - 'color': '$text900', - ':checked': { - 'color': '$text900', - ':disabled': { - color: '$text900', - }, - }, - ':disabled': { - color: '$text600', - }, - }, - - ':active': { - 'color': '$text900', - - ':checked': { - color: '$text900', - }, - }, - - ':disabled': { - opacity: 0.4, - }, - - '_web': { - MozUserSelect: 'none', - WebkitUserSelect: 'none', - msUserSelect: 'none', - userSelect: 'none', - }, - }, - { ancestorStyle: ['_text'] } -); -const StyledGroup = styled(View, {}); - -const UICheckbox = createCheckbox({ - Root: StyledRoot, - Indicator: StyledIndicator, - Icon: StyledIcon, - Label: StyledLabel, - Group: StyledGroup, -}); - -export const Checkbox = UICheckbox; -export const CheckboxIndicator = UICheckbox.Indicator; -export const CheckboxLabel = UICheckbox.Label; -export const CheckboxIcon = UICheckbox.Icon; -export const CheckboxGroup = UICheckbox.Group; diff --git a/example/storybook-v7/src/core-components/themed/divider/index.tsx b/example/storybook-v7/src/core-components/themed/divider/index.tsx deleted file mode 100644 index d6e20a3e50..0000000000 --- a/example/storybook-v7/src/core-components/themed/divider/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -'use client'; -import { createDivider } from '@gluestack-ui/divider'; -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -const StyledRoot = styled( - View, - { - bg: '$background200', - - variants: { - orientation: { - vertical: { - width: '$px', - height: '$full', - }, - horizontal: { - height: '$px', - width: '$full', - }, - }, - }, - - defaultProps: { - orientation: 'horizontal', - }, - }, - {} -); - -export const Divider = createDivider({ Root: StyledRoot }); diff --git a/example/storybook-v7/src/core-components/themed/fab/index.tsx b/example/storybook-v7/src/core-components/themed/fab/index.tsx deleted file mode 100644 index 55b63f23d3..0000000000 --- a/example/storybook-v7/src/core-components/themed/fab/index.tsx +++ /dev/null @@ -1,441 +0,0 @@ -'use client'; -import { AsForwarder, styled } from '@gluestack-style/react'; -import { createFab } from '@gluestack-ui/fab'; -import { Text } from 'react-native'; -import { Pressable } from 'react-native'; - -const StyledRoot = styled( - Pressable, - { - 'bg': '$primary500', - 'rounded': '$full', - 'zIndex': 20, - 'p': 16, - 'flexDirection': 'row', - 'alignItems': 'center', - 'justifyContent': 'center', - 'position': 'absolute', - - ':hover': { - bg: '$primary600', - }, - - ':active': { - bg: '$primary700', - }, - - ':disabled': { - opacity: 0.4, - _web: { - // @ts-ignore - pointerEvents: 'all !important', - cursor: 'not-allowed', - }, - }, - - '_text': { - color: '$text50', - fontWeight: '$normal', - }, - - '_icon': { - 'color': '$text50', - - ':hover': { - color: '$text0', - }, - - ':active': { - color: '$text0', - }, - }, - - '_web': { - ':focusVisible': { - outlineWidth: 2, - outlineColor: '$primary700', - outlineStyle: 'solid', - }, - }, - - 'variants': { - size: { - sm: { - px: '$2.5', - py: '$2.5', - _text: { - fontSize: '$sm', - }, - _icon: { - props: { - size: 'sm', - }, - }, - }, - md: { - px: '$3', - py: '$3', - _text: { - fontSize: '$md', - }, - _icon: { - props: { - size: 'md', - }, - }, - }, - lg: { - px: '$4', - py: '$4', - _text: { - fontSize: '$lg', - }, - _icon: { - props: { - size: 'md', - }, - }, - }, - }, - - placement: { - 'top right': { - top: '$4', - right: '$4', - }, - - 'top left': { - top: '$4', - left: '$4', - }, - - 'bottom right': { - bottom: '$4', - right: '$4', - }, - - 'bottom left': { - bottom: '$4', - left: '$4', - }, - - 'top center': { - top: '$4', - alignSelf: 'center', - // TODO: fix this, this is correct way, but React Native doesn't support this on Native - // left: '50%', - // transform: [ - // { - // // @ts-ignore - // translateX: '-50%', - // }, - // ], - }, - - 'bottom center': { - bottom: '$4', - alignSelf: 'center', - // TODO: fix this, this is correct way, but React Native doesn't support this on Native - // left: '50%', - // transform: [ - // { - // // @ts-ignore - // translateX: '-50%', - // }, - // ], - }, - }, - }, - - 'defaultProps': { - placement: 'bottom right', - size: 'md', - hardShadow: '2', - }, - }, - { - descendantStyle: ['_text', '_icon'], - } -); - -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); -const StyledLabel = styled( - StyledText, - { - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - color: '$text50', - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledIcon = styled( - AsForwarder, - { - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'md', - //@ts-ignore - fill: 'none', - }, - }, - { - ancestorStyle: ['_icon'], - } -); - -export const Fab = createFab({ - Root: StyledRoot, - Label: StyledLabel, - Icon: StyledIcon, -}); -export const FabLabel = Fab.Label; -export const FabIcon = Fab.Icon; diff --git a/example/storybook-v7/src/core-components/themed/flat-list/index.tsx b/example/storybook-v7/src/core-components/themed/flat-list/index.tsx deleted file mode 100644 index de51b8396a..0000000000 --- a/example/storybook-v7/src/core-components/themed/flat-list/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -'use client'; -import { FlatList as RNFlatList } from 'react-native'; -import { styled, useStyled, propertyTokenMap } from '@gluestack-style/react'; - -export const FlatList = styled( - RNFlatList, - {}, - { - componentName: 'FlatList', - resolveProps: ['contentContainerStyle'], - } as const, - { - propertyResolver: { - contentContainerStyle: (rawValue, resolver) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const aliases: any = useStyled()?.config?.aliases; - const newValue = {} as Record; - Object.entries(rawValue).forEach(([key, value]: any) => { - if (Object.hasOwn(aliases, key)) { - newValue[`${aliases[key]}`] = resolver( - value, - //@ts-ignore - propertyTokenMap[aliases[key]] - ); - } else { - //@ts-ignore - newValue[`${key}`] = resolver(value, propertyTokenMap[key]); - } - }); - rawValue = newValue; - return rawValue; - }, - }, - } -); diff --git a/example/storybook-v7/src/core-components/themed/form-control/index.tsx b/example/storybook-v7/src/core-components/themed/form-control/index.tsx deleted file mode 100644 index 471cb95545..0000000000 --- a/example/storybook-v7/src/core-components/themed/form-control/index.tsx +++ /dev/null @@ -1,325 +0,0 @@ -'use client'; -import { Text, View } from 'react-native'; - -import { styled } from '@gluestack-style/react'; - -import { createFormControl } from '@gluestack-ui/form-control'; -import { AsForwarder } from '@gluestack-style/react'; - -const StyledRoot = styled( - View, - { - flexDirection: 'column', - variants: { - size: { - sm: { - _labelText: { - props: { size: 'sm' }, - }, - _labelAstrick: { - props: { size: 'sm' }, - }, - _helperText: { - props: { size: 'xs' }, - }, - _errorText: { - props: { size: 'xs' }, - }, - }, - md: { - _labelText: { - props: { size: 'md' }, - }, - _labelAstrick: { - props: { size: 'md' }, - }, - _helperText: { - props: { size: 'sm' }, - }, - _errorText: { - props: { size: 'sm' }, - }, - }, - lg: { - _labelText: { - props: { size: 'lg' }, - }, - _labelAstrick: { - props: { size: 'lg' }, - }, - _helperText: { - props: { size: 'md' }, - }, - _errorText: { - props: { size: 'md' }, - }, - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - descendantStyle: [ - '_labelText', - '_helperText', - '_errorText', - '_labelAstrick', - ], - } -); - -const StyledErrorIcon = styled( - AsForwarder, - { - color: '$error700', - // @ts-ignore - fill: 'none', - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'md', - }, - }, - { - resolveProps: ['stroke', 'fill'], - }, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); - -const StyledFormControlError = styled(View, { - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - mt: '$1', - gap: '$1', -}); - -const StyledText = styled( - Text, - { - color: '$text700', - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledFormControlErrorText = styled( - StyledText, - { - color: '$error700', - }, - { ancestorStyle: ['_errorText'] } -); - -const StyledFormControlHelper = styled(View, { - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - mt: '$1', -}); - -const StyledFormControlHelperText = styled( - StyledText, - { - props: { - size: 'xs', - }, - - color: '$text500', - }, - { ancestorStyle: ['_helperText'] } -); - -const StyledFormControlLabel = styled( - View, - { - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - mb: '$1', - }, - { descendantStyle: ['_labelText'] } -); - -const StyledFormControlLabelText = styled(StyledText, { - fontWeight: '$medium', - color: '$text900', -}); - -const StyledLabelAstrick = styled(StyledText, {}, { - componentName: 'FormControlErrorText', - ancestorStyle: ['_labelAstrick'], -} as const); - -export const FormControl = createFormControl({ - Root: StyledRoot, - Error: StyledFormControlError, - ErrorText: StyledFormControlErrorText, - ErrorIcon: StyledErrorIcon, - Label: StyledFormControlLabel, - LabelText: StyledFormControlLabelText, - LabelAstrick: StyledLabelAstrick, - Helper: StyledFormControlHelper, - HelperText: StyledFormControlHelperText, -}); -export const FormControlError = FormControl.Error; -export const FormControlErrorText = FormControl.Error.Text; -export const FormControlErrorIcon = FormControl.Error.Icon; -export const FormControlLabel = FormControl.Label; -export const FormControlLabelText = FormControl.Label.Text; -export const FormControlLabelAstrick = FormControl.Label.Astrick; -export const FormControlHelper = FormControl.Helper; -export const FormControlHelperText = FormControl.Helper.Text; diff --git a/example/storybook-v7/src/core-components/themed/gluestack-ui-provider/config.ts b/example/storybook-v7/src/core-components/themed/gluestack-ui-provider/config.ts deleted file mode 100644 index 0d6674286c..0000000000 --- a/example/storybook-v7/src/core-components/themed/gluestack-ui-provider/config.ts +++ /dev/null @@ -1,841 +0,0 @@ -'use client'; -import { AnimationResolver } from '@gluestack-style/animation-resolver'; -import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver'; -import { createConfig } from '@gluestack-style/react'; - -export const config = createConfig({ - aliases: { - bg: 'backgroundColor', - bgColor: 'backgroundColor', - h: 'height', - w: 'width', - p: 'padding', - px: 'paddingHorizontal', - py: 'paddingVertical', - pt: 'paddingTop', - pb: 'paddingBottom', - pr: 'paddingRight', - pl: 'paddingLeft', - m: 'margin', - mx: 'marginHorizontal', - my: 'marginVertical', - mt: 'marginTop', - mb: 'marginBottom', - mr: 'marginRight', - ml: 'marginLeft', - rounded: 'borderRadius', - } as const, - tokens: { - colors: { - // Brand Colors - primary0: '#B3B3B3', - primary50: '#999999', - primary100: '#808080', - primary200: '#737373', - primary300: '#666666', - primary400: '#525252', - primary500: '#333333', - primary600: '#292929', - primary700: '#1F1F1F', - primary800: '#0D0D0D', - primary900: '#0A0A0A', - primary950: '#080808', - - secondary0: '#FEFFFF', - secondary50: '#F1F2F2', - secondary100: '#E7E8E8', - secondary200: '#DBDBDB', - secondary300: '#AFB0B0', - secondary400: '#727373', - secondary500: '#5E5F5F', - secondary600: '#515252', - secondary700: '#3F4040', - secondary800: '#272626', - secondary900: '#181717', - secondary950: '#0B0C0C', - - tertiary0: '#FFFAF5', - tertiary50: '#FFF2E5', - tertiary100: '#FFE9D5', - tertiary200: '#FED1AA', - tertiary300: '#FDB474', - tertiary400: '#FB9D4B', - tertiary500: '#E78128', - tertiary600: '#D7751F', - tertiary700: '#B4621A', - tertiary800: '#824917', - tertiary900: '#6C3D13', - tertiary950: '#543112', - - // Action Colors - - error00: '#FEE9E9', - error50: '#FEE2E2', - error100: '#FECACA', - error200: '#FCA5A5', - error300: '#F87171', - error400: '#EF4444', - error500: '#E63535', - error600: '#DC2626', - error700: '#B91C1C', - error800: '#991B1B', - error900: '#7F1D1D', - error950: '#531313', - - success0: '#E4FFF4', - success50: '#CAFFE8', - success100: '#A2F1C0', - success200: '#84D3A2', - success300: '#66B584', - success400: '#489766', - success500: '#348352', - success600: '#2A7948', - success700: '#206F3E', - success800: '#166534', - success900: '#14532D', - success950: '#1B3224', - - warning0: '#FFFDFB', - warning50: '#FFF9F5', - warning100: '#FFE7D5', - warning200: '#FECDAA', - warning300: '#FDAD74', - warning400: '#FB954B', - warning500: '#E77828', - warning600: '#D76C1F', - warning700: '#B45A1A', - warning800: '#824417', - warning900: '#6C3813', - warning950: '#542D12', - - info0: '#ECF8FE', - info50: '#C7EBFC', - info100: '#A2DDFA', - info200: '#7CCFF8', - info300: '#57C2F6', - info400: '#32B4F4', - info500: '#0DA6F2', - info600: '#0B8DCD', - info700: '#0973A8', - info800: '#075A83', - info900: '#05405D', - info950: '#032638', - - // Property Derived Colors - - text0: '#FEFEFF', - text50: '#F5F5F5', - text100: '#E5E5E5', - text200: '#DBDBDC', - text300: '#D4D4D4', - text400: '#A3A3A3', - text500: '#8C8C8C', - text600: '#737373', - text700: '#525252', - text800: '#404040', - text900: '#262627', - text950: '#171717', - - border0: '#FDFEFE', - border50: '#F3F3F3', - border100: '#E6E6E6', - border200: '#DDDCDB', - border300: '#D3D3D3', - border400: '#A5A3A3', - border500: '#8C8D8D', - border600: '#737474', - border700: '#535252', - border800: '#414141', - border900: '#272624', - border950: '#1A1717', - - background0: '#FBFBFB', - background50: '#F6F6F6', - background100: '#F2F1F1', - background200: '#DCDBDB', - background300: '#D5D4D4', - background400: '#A2A3A3', - background500: '#8E8E8E', - background600: '#747474', - background700: '#535252', - background800: '#414040', - background900: '#272625', - background950: '#181718', - - // StandAlone Colors - - backgroundError: '#FEF1F1', - - backgroundWarning: '#FFF4EB', - backgroundSuccess: '#EDFCF2', - backgroundMuted: '#F6F6F7', - backgroundInfo: '#EBF8FE', - - white: '#FFFFFF', - black: '#000000', - - // Extended Colors - rose50: '#fff1f2', - rose100: '#ffe4e6', - rose200: '#fecdd3', - rose300: '#fda4af', - rose400: '#fb7185', - rose500: '#f43f5e', - rose600: '#e11d48', - rose700: '#be123c', - rose800: '#9f1239', - rose900: '#881337', - - pink50: '#fdf2f8', - pink100: '#fce7f3', - pink200: '#fbcfe8', - pink300: '#f9a8d4', - pink400: '#f472b6', - pink500: '#ec4899', - pink600: '#db2777', - pink700: '#be185d', - pink800: '#9d174d', - pink900: '#831843', - - fuchsia50: '#fdf4ff', - fuchsia100: '#fae8ff', - fuchsia200: '#f5d0fe', - fuchsia300: '#f0abfc', - fuchsia400: '#e879f9', - fuchsia500: '#d946ef', - fuchsia600: '#c026d3', - fuchsia700: '#a21caf', - fuchsia800: '#86198f', - fuchsia900: '#701a75', - - purple50: '#faf5ff', - purple100: '#f3e8ff', - purple200: '#e9d5ff', - purple300: '#d8b4fe', - purple400: '#c084fc', - purple500: '#a855f7', - purple600: '#9333ea', - purple700: '#7e22ce', - purple800: '#6b21a8', - purple900: '#581c87', - - violet50: '#f5f3ff', - violet100: '#ede9fe', - violet200: '#ddd6fe', - violet300: '#c4b5fd', - violet400: '#a78bfa', - violet500: '#8b5cf6', - violet600: '#7c3aed', - violet700: '#6d28d9', - violet800: '#5b21b6', - violet900: '#4c1d95', - - indigo50: '#eef2ff', - indigo100: '#e0e7ff', - indigo200: '#c7d2fe', - indigo300: '#a5b4fc', - indigo400: '#818cf8', - indigo500: '#6366f1', - indigo600: '#4f46e5', - indigo700: '#4338ca', - indigo800: '#3730a3', - indigo900: '#312e81', - - blue50: '#eff6ff', - blue100: '#dbeafe', - blue200: '#bfdbfe', - blue300: '#93c5fd', - blue400: '#60a5fa', - blue500: '#3b82f6', - blue600: '#2563eb', - blue700: '#1d4ed8', - blue800: '#1e40af', - blue900: '#1e3a8a', - - lightBlue50: '#f0f9ff', - lightBlue100: '#e0f2fe', - lightBlue200: '#bae6fd', - lightBlue300: '#7dd3fc', - lightBlue400: '#38bdf8', - lightBlue500: '#0ea5e9', - lightBlue600: '#0284c7', - lightBlue700: '#0369a1', - lightBlue800: '#075985', - lightBlue900: '#0c4a6e', - - darkBlue50: '#dbf4ff', - darkBlue100: '#addbff', - darkBlue200: '#7cc2ff', - darkBlue300: '#4aa9ff', - darkBlue400: '#1a91ff', - darkBlue500: '#0077e6', - darkBlue600: '#005db4', - darkBlue700: '#004282', - darkBlue800: '#002851', - darkBlue900: '#000e21', - - cyan50: '#ecfeff', - cyan100: '#cffafe', - cyan200: '#a5f3fc', - cyan300: '#67e8f9', - cyan400: '#22d3ee', - cyan500: '#06b6d4', - cyan600: '#0891b2', - cyan700: '#0e7490', - cyan800: '#155e75', - cyan900: '#164e63', - - teal50: '#f0fdfa', - teal100: '#ccfbf1', - teal200: '#99f6e4', - teal300: '#5eead4', - teal400: '#2dd4bf', - teal500: '#14b8a6', - teal600: '#0d9488', - teal700: '#0f766e', - teal800: '#115e59', - teal900: '#134e4a', - - emerald50: '#ecfdf5', - emerald100: '#d1fae5', - emerald200: '#a7f3d0', - emerald300: '#6ee7b7', - emerald400: '#34d399', - emerald500: '#10b981', - emerald600: '#059669', - emerald700: '#047857', - emerald800: '#065f46', - emerald900: '#064e3b', - - green50: '#f0fdf4', - green100: '#dcfce7', - green200: '#bbf7d0', - green300: '#86efac', - green400: '#4ade80', - green500: '#22c55e', - green600: '#16a34a', - green700: '#15803d', - green800: '#166534', - green900: '#14532d', - - lime50: '#f7fee7', - lime100: '#ecfccb', - lime200: '#d9f99d', - lime300: '#bef264', - lime400: '#a3e635', - lime500: '#84cc16', - lime600: '#65a30d', - lime700: '#4d7c0f', - lime800: '#3f6212', - lime900: '#365314', - - yellow50: '#fefce8', - yellow100: '#fef9c3', - yellow200: '#fef08a', - yellow300: '#fde047', - yellow400: '#facc15', - yellow500: '#eab308', - yellow600: '#ca8a04', - yellow700: '#a16207', - yellow800: '#854d0e', - yellow900: '#713f12', - - amber50: '#fffbeb', - amber100: '#fef3c7', - amber200: '#fde68a', - amber300: '#fcd34d', - amber400: '#fbbf24', - amber500: '#f59e0b', - amber600: '#d97706', - amber700: '#b45309', - amber800: '#92400e', - amber900: '#78350f', - - orange50: '#fff7ed', - orange100: '#ffedd5', - orange200: '#fed7aa', - orange300: '#fdba74', - orange400: '#fb923c', - orange500: '#f97316', - orange600: '#ea580c', - orange700: '#c2410c', - orange800: '#9a3412', - orange900: '#7c2d12', - - red50: '#fef2f2', - red100: '#fee2e2', - red200: '#fecaca', - red300: '#fca5a5', - red400: '#f87171', - red500: '#ef4444', - red600: '#dc2626', - red700: '#b91c1c', - red800: '#991b1b', - red900: '#7f1d1d', - - warmGray50: '#fafaf9', - warmGray100: '#f5f5f4', - warmGray200: '#e7e5e4', - warmGray300: '#d6d3d1', - warmGray400: '#a8a29e', - warmGray500: '#78716c', - warmGray600: '#57534e', - warmGray700: '#44403c', - warmGray800: '#292524', - warmGray900: '#1c1917', - - trueGray50: '#fafafa', - trueGray100: '#f5f5f5', - trueGray200: '#e5e5e5', - trueGray300: '#d4d4d4', - trueGray400: '#a3a3a3', - trueGray500: '#737373', - trueGray600: '#525252', - trueGray700: '#404040', - trueGray800: '#262626', - trueGray900: '#171717', - - coolGray50: '#f9fafb', - coolGray100: '#f3f4f6', - coolGray200: '#e5e7eb', - coolGray300: '#d1d5db', - coolGray400: '#9ca3af', - coolGray500: '#6b7280', - coolGray600: '#4b5563', - coolGray700: '#374151', - coolGray800: '#1f2937', - coolGray900: '#111827', - - blueGray50: '#f8fafc', - blueGray100: '#f1f5f9', - blueGray200: '#e2e8f0', - blueGray300: '#cbd5e1', - blueGray400: '#94a3b8', - blueGray500: '#64748b', - blueGray600: '#475569', - blueGray700: '#334155', - blueGray800: '#1e293b', - blueGray900: '#0f172a', - }, - space: { - 'px': '1px', - '0': 0, - '0.5': 2, - '1': 4, - '1.5': 6, - '2': 8, - '2.5': 10, - '3': 12, - '3.5': 14, - '4': 16, - '4.5': 18, - '5': 20, - '6': 24, - '7': 28, - '8': 32, - '9': 36, - '10': 40, - '11': 44, - '12': 48, - '16': 64, - '20': 80, - '24': 96, - '32': 128, - '40': 160, - '48': 192, - '56': 224, - '64': 256, - '72': 288, - '80': 320, - '96': 384, - '1/2': '50%', - '1/3': '33.333%', - '2/3': '66.666%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666%', - '2/6': '33.333%', - '3/6': '50%', - '4/6': '66.666%', - '5/6': '83.333%', - 'full': '100%', - }, - borderWidths: { - '0': 0, - '1': 1, - '2': 2, - '4': 4, - '8': 8, - }, - radii: { - 'none': 0, - 'xs': 2, - 'sm': 4, - 'md': 6, - 'lg': 8, - 'xl': 12, - '2xl': 16, - '3xl': 24, - 'full': 9999, - }, - breakpoints: { - base: 0, - sm: 480, - md: 768, - lg: 992, - xl: 1280, - }, - mediaQueries: { - base: '@media screen and (min-width: 0)', - xs: '@media screen and (min-width: 400px)', - sm: '@media screen and (min-width: 480px)', - md: '@media screen and (min-width: 768px)', - lg: '@media screen and (min-width: 992px)', - xl: '@media screen and (min-width: 1280px)', - }, - letterSpacings: { - 'xs': -0.4, - 'sm': -0.2, - 'md': 0, - 'lg': 0.2, - 'xl': 0.4, - '2xl': 1.6, - }, - lineHeights: { - '2xs': 16, - 'xs': 18, - 'sm': 20, - 'md': 22, - 'lg': 24, - 'xl': 28, - '2xl': 32, - '3xl': 40, - '4xl': 48, - '5xl': 56, - '6xl': 72, - '7xl': 90, - }, - fontWeights: { - hairline: '100', - thin: '200', - light: '300', - normal: '400', - medium: '500', - semibold: '600', - bold: '700', - extrabold: '800', - black: '900', - extraBlack: '950', - }, - fonts: { - heading: undefined, - body: undefined, - mono: undefined, - }, - fontSizes: { - '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, - }, - opacity: { - 0: 0, - 5: 0.05, - 10: 0.1, - 20: 0.2, - 25: 0.25, - 30: 0.3, - 40: 0.4, - 50: 0.5, - 60: 0.6, - 70: 0.7, - 75: 0.75, - 80: 0.8, - 90: 0.9, - 95: 0.95, - 100: 1, - }, - } as const, - themes: { - dark: { - colors: { - primary0: '#828282', - primary50: '#949494', - primary100: '#9E9E9E', - primary200: '#B3B3B3', - primary300: '#C7C7C7', - primary400: '#E6E6E6', - primary500: '#F0F0F0', - primary600: '#FAFAFA', - primary700: '#FCFCFC', - primary800: '#FDFDFD', - primary900: '#FDFCFC', - primary950: '#FDFCFC', - - secondary0: '#0B0C0C', - secondary50: '#181717', - secondary100: '#272626', - secondary200: '#3F4040', - secondary300: '#515252', - secondary400: '#5E5F5F', - secondary500: '#727373', - secondary600: '#AFB0B0', - secondary700: '#DBDBDB', - secondary800: '#E7E8E8', - secondary900: '#F1F2F2', - secondary950: '#FEFFFF', - - tertiary0: '#543112', - tertiary50: '#6C3D13', - tertiary100: '#824917', - tertiary200: '#B4621A', - tertiary300: '#D7751F', - tertiary400: '#E78128', - tertiary500: '#FB9D4B', - tertiary600: '#FDB474', - tertiary700: '#FED1AA', - tertiary800: '#FFE9D5', - tertiary900: '#FFF2E5', - tertiary950: '#FFFAF5', - - text0: '#171717', - text50: '#262627', - text100: '#404040', - text200: '#525252', - text300: '#737373', - text400: '#8C8C8C', - text500: '#A3A3A3', - text600: '#D4D4D4', - text700: '#DBDBDC', - text800: '#E5E5E5', - text900: '#F5F5F5', - text950: '#FEFEFF', - - background0: '#121212', - background50: '#272625', - background100: '#414040', - background200: '#535252', - background300: '#747474', - background400: '#8E8E8E', - background500: '#A2A3A3', - background600: '#D5D4D4', - background700: '#DCDBDB', - background800: '#F2F1F1', - background900: '#F6F6F6', - background950: '#252526', - - border0: '#1A1717', - border50: '#272624', - border100: '#414141', - border200: '#535252', - border300: '#737474', - border400: '#8C8D8D', - border500: '#A5A3A3', - border600: '#D3D3D3', - border700: '#DDDCDB', - border800: '#E6E6E6', - border900: '#F3F3F3', - border950: '#FDFEFE', - - success0: '#1B3224', - success50: '#14532D', - success100: '#166534', - success200: '#206F3E', - success300: '#2A7948', - success400: '#348352', - success500: '#489766', - success600: '#66B584', - success700: '#84D3A2', - success800: '#A2F1C0', - success900: '#CAFFE8', - success950: '#E4FFF4', - - error0: '#531313', - error50: '#7F1D1D', - error100: '#991B1B', - error200: '#B91C1C', - error300: '#DC2626', - error400: '#E63535', - error500: '#EF4444', - error600: '#F87171', - error700: '#E63534', - error800: '#FECACA', - error900: '#FEE2E2', - error950: '#FEE9E9', - - warning0: '#542D12', - warning50: '#6C3813', - warning100: '#824417', - warning200: '#B45A1A', - warning300: '#D76C1F', - warning400: '#E77828', - warning500: '#FB954B', - warning600: '#FDAD74', - warning700: '#FECDAA', - warning800: '#FFE7D5', - warning900: '#FFF9F5', - warning950: '#FFFDFB', - - info0: '#032638', - info50: '#05405D', - info100: '#075A83', - info200: '#0973A8', - info300: '#0B8DCD', - info400: '#0DA6F2', - info500: '#32B4F4', - info600: '#57C2F6', - info700: '#7CCFF8', - info800: '#A2DDFA', - info900: '#C7EBFC', - info950: '#ECF8FE', - - backgroundError: '#422B2B', - backgroundWarning: '#412F23', - backgroundSuccess: '#1C2B21', - backgroundMuted: '#252526', - backgroundInfo: '#1A282E', - }, - }, - }, - globalStyle: { - variants: { - hardShadow: { - '1': { - shadowColor: '$background900', - shadowOffset: { - width: -2, - height: 2, - }, - shadowRadius: 8, - shadowOpacity: 0.5, - elevation: 10, - }, - '2': { - shadowColor: '$background900', - shadowOffset: { - width: 0, - height: 3, - }, - shadowRadius: 8, - shadowOpacity: 0.5, - elevation: 10, - }, - '3': { - shadowColor: '$background900', - shadowOffset: { - width: 2, - height: 2, - }, - shadowRadius: 8, - shadowOpacity: 0.5, - elevation: 10, - }, - '4': { - shadowColor: '$background900', - shadowOffset: { - width: 0, - height: -3, - }, - shadowRadius: 8, - shadowOpacity: 0.5, - elevation: 10, - }, - // this 5th version is only for toast shadow - // temporary - '5': { - shadowColor: '$background900', - shadowOffset: { - width: 0, - height: 3, - }, - shadowRadius: 8, - shadowOpacity: 0.2, - elevation: 10, - }, - }, - softShadow: { - '1': { - shadowColor: '$background900', - shadowOffset: { - width: 0, - height: 0, - }, - shadowRadius: 10, - shadowOpacity: 0.1, - _android: { - shadowColor: '$background500', - elevation: 5, - shadowOpacity: 0.05, - }, - }, - '2': { - shadowColor: '$background900', - shadowOffset: { - width: 0, - height: 0, - }, - shadowRadius: 20, - elevation: 3, - shadowOpacity: 0.1, - _android: { - shadowColor: '$background500', - elevation: 10, - shadowOpacity: 0.1, - }, - }, - '3': { - shadowColor: '$background900', - shadowOffset: { - width: 0, - height: 0, - }, - shadowRadius: 30, - shadowOpacity: 0.1, - elevation: 4, - _android: { - shadowColor: '$background500', - elevation: 15, - shadowOpacity: 0.15, - }, - }, - '4': { - shadowColor: '$background900', - shadowOffset: { - width: 0, - height: 0, - }, - shadowRadius: 40, - shadowOpacity: 0.1, - elevation: 10, - _android: { - shadowColor: '$background500', - elevation: 20, - shadowOpacity: 0.2, - }, - }, - }, - }, - }, - plugins: [new AnimationResolver(MotionAnimationDriver)], -}); - -type Config = typeof config; - -declare module '@gluestack-style/react' { - interface ICustomConfig extends Config {} -} diff --git a/example/storybook-v7/src/core-components/themed/gluestack-ui-provider/index.tsx b/example/storybook-v7/src/core-components/themed/gluestack-ui-provider/index.tsx deleted file mode 100644 index c52c202329..0000000000 --- a/example/storybook-v7/src/core-components/themed/gluestack-ui-provider/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -'use client'; -import React from 'react'; -import { createProvider } from '@gluestack-ui/provider'; -import { StyledProvider } from '@gluestack-style/react'; -import { OverlayProvider } from '@gluestack-ui/overlay'; -import { ToastProvider } from '@gluestack-ui/toast'; - -// Change the config file path -import { config } from './config'; - -const GluestackUIStyledProvider = createProvider({ StyledProvider }); - -type GluestackUIProviderProps = Partial< - React.ComponentProps ->; - -export const GluestackUIProvider = ({ - children, - ...props -}: GluestackUIProviderProps) => { - return ( - <> - {/** @ts-ignore */} - - - {children} - - - - ); -}; diff --git a/example/storybook-v7/src/core-components/themed/heading/index.tsx b/example/storybook-v7/src/core-components/themed/heading/index.tsx deleted file mode 100644 index 9067b915ae..0000000000 --- a/example/storybook-v7/src/core-components/themed/heading/index.tsx +++ /dev/null @@ -1,115 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; - -const StyledRoot = styled(H4, { - color: '$text900', - letterSpacing: '$sm', - fontWeight: '$bold', - fontFamily: '$heading', - - // Overrides expo-html default styling - marginVertical: 0, - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '5xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$6xl', - }, - '4xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$5xl', - }, - - '3xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$4xl', - }, - - '2xl': { - //@ts-ignore - props: { as: H2 }, - fontSize: '$3xl', - }, - - 'xl': { - //@ts-ignore - props: { as: H3 }, - fontSize: '$2xl', - }, - - 'lg': { - //@ts-ignore - props: { as: H4 }, - fontSize: '$xl', - }, - - 'md': { - //@ts-ignore - props: { as: H5 }, - fontSize: '$lg', - }, - - 'sm': { - //@ts-ignore - props: { as: H6 }, - fontSize: '$md', - }, - - 'xs': { - //@ts-ignore - props: { as: H6 }, - fontSize: '$sm', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'lg', - }, -}); - -export const Heading = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/hstack/index.tsx b/example/storybook-v7/src/core-components/themed/hstack/index.tsx deleted file mode 100644 index f65cbf217f..0000000000 --- a/example/storybook-v7/src/core-components/themed/hstack/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -'use client'; -import { View } from 'react-native'; -import { styled } from '@gluestack-style/react'; - -const StyledRoot = styled(View, { - flexDirection: 'row', - variants: { - space: { - 'xs': { - gap: `$1`, - }, - 'sm': { - gap: `$2`, - }, - 'md': { - gap: `$3`, - }, - 'lg': { - gap: `$4`, - }, - 'xl': { - gap: `$5`, - }, - '2xl': { - gap: `$6`, - }, - '3xl': { - gap: `$7`, - }, - '4xl': { - gap: `$8`, - }, - }, - reversed: { - true: { - flexDirection: 'row-reverse', - }, - }, - }, -}); - -export const HStack = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/icon/index.tsx b/example/storybook-v7/src/core-components/themed/icon/index.tsx deleted file mode 100644 index fef135ac98..0000000000 --- a/example/storybook-v7/src/core-components/themed/icon/index.tsx +++ /dev/null @@ -1,1802 +0,0 @@ -'use client'; -import React from 'react'; -import { createIcon } from '@gluestack-ui/icon'; -import { styled, AsForwarder } from '@gluestack-style/react'; -import { Path } from 'react-native-svg'; - -const StyledRoot = styled( - AsForwarder, - { - color: '$background800', - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'md', - // @ts-ignore - fill: 'none', - }, - }, - { - componentName: 'BaseIcon', - resolveProps: ['stroke', 'fill'], - } as const, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); -const IconRoot = styled( - AsForwarder, - { - color: '$background800', - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - - props: { - size: 'md', - //@ts-ignore - fill: 'none', - }, - }, - { - resolveProps: ['stroke', 'fill'], - } as const, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); -export const Icon = createIcon({ - Root: StyledRoot, -}); - -type ParameterTypes = Omit[0], 'Root'>; -const createIconUI = ({ ...props }: ParameterTypes) => - createIcon({ Root: IconRoot, ...props }); - -export { createIconUI as createIcon }; - -// All Icons -const AddIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -AddIcon.displayName = 'AddIcon'; -export { AddIcon }; - -export const AlertCircleIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -AlertCircleIcon.displayName = 'AlertCircleIcon'; - -const ArrowUpIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ArrowDownIcon = createIcon({ - Root: StyledRoot, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ArrowRightIcon = createIcon({ - Root: StyledRoot, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ArrowLeftIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -// const ArrowTopRightIcon = createIcon({ -// Root: StyledRoot, -// viewBox: '0 0 24 24', -// path: ( -// -// ), -// }); - -ArrowUpIcon.displayName = 'ArrowUpIcon'; -ArrowDownIcon.displayName = 'ArrowDownIcon'; -ArrowRightIcon.displayName = 'ArrowRightIcon'; -ArrowLeftIcon.displayName = 'ArrowLeftIcon'; -// ArrowTopRightIcon.displayName = 'ArrowTopRightIcon'; - -export { - ArrowUpIcon, - ArrowDownIcon, - ArrowRightIcon, - ArrowLeftIcon, - // ArrowTopRightIcon, -}; - -const AtSignIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - <> - - - - - ), -}); - -AtSignIcon.displayName = 'AtSignIcon'; - -export { AtSignIcon }; - -const BellIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -BellIcon.displayName = 'BellIcon'; - -export { BellIcon }; - -const CalendarDaysIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - - - - - - ), -}); - -CalendarDaysIcon.displayName = 'CalendarDaysIcon'; - -export { CalendarDaysIcon }; - -const CheckIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -const CheckCircleIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -CheckIcon.displayName = 'CheckIcon'; -CheckCircleIcon.displayName = 'CheckCircleIcon'; - -export { CheckIcon, CheckCircleIcon }; - -const ChevronUpIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - d: 'M12 10L8 6L4 10', - path: ( - <> - - - ), -}); - -const ChevronDownIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -const ChevronLeftIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -const ChevronRightIcon = createIcon({ - Root: StyledRoot, - - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -const ChevronsLeftIcon = createIcon({ - Root: StyledRoot, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ChevronsRightIcon = createIcon({ - Root: StyledRoot, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const ChevronsUpDownIcon = createIcon({ - Root: StyledRoot, - - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -ChevronUpIcon.displayName = 'ChevronUpIcon'; -ChevronDownIcon.displayName = 'ChevronDownIcon'; -ChevronLeftIcon.displayName = 'ChevronLeftIcon'; -ChevronRightIcon.displayName = 'ChevronRightIcon'; -ChevronsLeftIcon.displayName = 'ChevronsLeftIcon'; -ChevronsRightIcon.displayName = 'ChevronsRightIcon'; -ChevronsUpDownIcon.displayName = 'ChevronsUpDownIcon'; - -export { - ChevronUpIcon, - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, - ChevronsLeftIcon, - ChevronsRightIcon, - ChevronsUpDownIcon, -}; - -const CircleIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -CircleIcon.displayName = 'CircleIcon'; - -export { CircleIcon }; - -const ClockIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -ClockIcon.displayName = 'ClockIcon'; - -export { ClockIcon }; - -const CloseIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -const CloseCircleIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -CloseIcon.displayName = 'CloseIcon'; -CloseCircleIcon.displayName = 'CloseCircleIcon'; - -export { CloseIcon, CloseCircleIcon }; - -const CopyIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -CopyIcon.displayName = 'CopyIcon'; - -export { CopyIcon }; - -const DownloadIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -DownloadIcon.displayName = 'DownloadIcon'; - -export { DownloadIcon }; - -const EditIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -EditIcon.displayName = 'EditIcon'; - -export { EditIcon }; - -const EyeIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -EyeIcon.displayName = 'EyeIcon'; - -const EyeOffIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - ), -}); - -EyeOffIcon.displayName = 'EyeOffIcon'; - -export { EyeIcon, EyeOffIcon }; - -const FavouriteIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -FavouriteIcon.displayName = 'FavouriteIcon'; - -export { FavouriteIcon }; - -const GlobeIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -GlobeIcon.displayName = 'GlobeIcon'; - -export { GlobeIcon }; - -const GripVerticalIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - - ), -}); - -GripVerticalIcon.displayName = 'GripVerticalIcon'; - -export { GripVerticalIcon }; - -export const HelpCircleIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -HelpCircleIcon.displayName = 'HelpCircleIcon'; - -export const InfoIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -InfoIcon.displayName = 'InfoIcon'; - -const LinkIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); -LinkIcon.displayName = 'LinkIcon'; - -const ExternalLinkIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -ExternalLinkIcon.displayName = 'ExternalLinkIcon'; - -export { LinkIcon, ExternalLinkIcon }; - -const LoaderIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -LoaderIcon.displayName = 'LoaderIcon'; - -export { LoaderIcon }; - -const LockIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -LockIcon.displayName = 'LockIcon'; - -export { LockIcon }; - -const MailIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -MailIcon.displayName = 'MailIcon'; - -export { MailIcon }; - -export const MenuIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -MenuIcon.displayName = 'MenuIcon'; - -const MessageCircleIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -MessageCircleIcon.displayName = 'MessageCircleIcon'; - -export { MessageCircleIcon }; - -export const MoonIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -MoonIcon.displayName = 'MoonIcon'; - -const PaperclipIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -PaperclipIcon.displayName = 'PaperclipIcon'; - -export { PaperclipIcon }; - -const PhoneIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -PhoneIcon.displayName = 'PhoneIcon'; - -export { PhoneIcon }; - -const PlayIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -PlayIcon.displayName = 'PlayIcon'; - -export { PlayIcon }; - -export const RemoveIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -RemoveIcon.displayName = 'RemoveIcon'; - -const RepeatIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - ), -}); - -RepeatIcon.displayName = 'RepeatIcon'; - -const Repeat1Icon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - ), -}); - -Repeat1Icon.displayName = 'Repeat1Icon'; - -export { RepeatIcon, Repeat1Icon }; - -export const SearchIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -SearchIcon.displayName = 'SearchIcon'; - -const SettingsIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -SettingsIcon.displayName = 'SettingsIcon'; - -export { SettingsIcon }; - -const ShareIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - ), -}); - -ShareIcon.displayName = 'ShareIcon'; - -export { ShareIcon }; - -const SlashIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -SlashIcon.displayName = 'SlashIcon'; - -export { SlashIcon }; - -const StarIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - ), -}); - -StarIcon.displayName = 'StarIcon'; - -export { StarIcon }; - -export const SunIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - - - - - - - ), -}); - -SunIcon.displayName = 'SunIcon'; - -const ThreeDotsIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -ThreeDotsIcon.displayName = 'ThreeDotsIcon'; - -export { ThreeDotsIcon }; - -const TrashIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - - ), -}); - -TrashIcon.displayName = 'TrashIcon'; - -export { TrashIcon }; - -const UnlockIcon = createIcon({ - Root: StyledRoot, - viewBox: '0 0 24 24', - path: ( - <> - - - - ), -}); - -UnlockIcon.displayName = 'UnlockIcon'; - -export { UnlockIcon }; diff --git a/example/storybook-v7/src/core-components/themed/image-background/index.tsx b/example/storybook-v7/src/core-components/themed/image-background/index.tsx deleted file mode 100644 index f51ae7749b..0000000000 --- a/example/storybook-v7/src/core-components/themed/image-background/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { ImageBackground as RNImageBackground } from 'react-native'; - -export const ImageBackground = styled(RNImageBackground, {}); diff --git a/example/storybook-v7/src/core-components/themed/image/index.tsx b/example/storybook-v7/src/core-components/themed/image/index.tsx deleted file mode 100644 index d808a0d390..0000000000 --- a/example/storybook-v7/src/core-components/themed/image/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -'use client'; -import { createImage } from '@gluestack-ui/image'; -import { Image as RNImage } from 'react-native'; -import { styled } from '@gluestack-style/react'; - -const StyledRoot = styled( - RNImage, - { - maxWidth: '$full', - variants: { - size: { - '2xs': { - w: '$6', - h: '$6', - }, - - 'xs': { - w: '$10', - h: '$10', - }, - - 'sm': { - w: '$16', - h: '$16', - }, - - 'md': { - w: '$20', - h: '$20', - }, - - 'lg': { - w: '$24', - h: '$24', - }, - - 'xl': { - w: '$32', - h: '$32', - }, - - '2xl': { - w: '$64', - h: '$64', - }, - 'full': { - w: '$full', - h: '$full', - }, - }, - }, - defaultProps: { - size: 'md', - }, - }, - { - componentName: 'Image', - resolveProps: ['tintColor'], - } as const, - { - propertyTokenMap: { - tintColor: 'colors', - }, - } -); - -export const Image = createImage({ Root: StyledRoot }); diff --git a/example/storybook-v7/src/core-components/themed/index.ts b/example/storybook-v7/src/core-components/themed/index.ts deleted file mode 100644 index 56a869eeac..0000000000 --- a/example/storybook-v7/src/core-components/themed/index.ts +++ /dev/null @@ -1,48 +0,0 @@ -export * from './button'; -export * from './accordion'; -export * from './actionsheet'; -export * from './alert'; -export * from './alert-dialog'; -export * from './avatar'; -export * from './badge'; -export * from './box'; -export * from './card'; -export * from './flat-list'; -export * from './center'; -export * from './checkbox'; -export * from './hstack'; -export * from './pressable'; -export * from './icon'; -export * from './heading'; -export * from './divider'; -export * from './fab'; -export * from './form-control'; -export * from './input'; -// export * from './input-accessory-view'; -export * from './image'; -export * from './keyboard-avoiding-view'; -export * from './linear-gradient'; -export * from './link'; -export * from './menu'; -export * from './modal'; -export * from './popover'; -export * from './progress'; -export * from './text'; -export * from './radio'; -export * from './scroll-view'; -export * from './safe-area-view'; -export * from './select'; -export * from './slider'; -export * from './spinner'; -export * from './status-bar'; -export * from './section-list'; -export * from './switch'; -export * from './textarea'; -export * from './toast'; -export * from './tooltip'; -export * from './view'; -export * from './vstack'; -export { GluestackUIProvider } from './gluestack-ui-provider'; -export * from './virtualized-list'; -export * from './refresh-control'; -export * from './image-background'; diff --git a/example/storybook-v7/src/core-components/themed/input-accessory-view/index.tsx b/example/storybook-v7/src/core-components/themed/input-accessory-view/index.tsx deleted file mode 100644 index 697e3ddf0a..0000000000 --- a/example/storybook-v7/src/core-components/themed/input-accessory-view/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { InputAccessoryView as RNInputAccessoryView } from 'react-native'; - -const StyledRoot = styled(RNInputAccessoryView, {}, {}); - -export const InputAccessoryView = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/input/index.tsx b/example/storybook-v7/src/core-components/themed/input/index.tsx deleted file mode 100644 index eadc523685..0000000000 --- a/example/storybook-v7/src/core-components/themed/input/index.tsx +++ /dev/null @@ -1,428 +0,0 @@ -'use client'; -import { createInput } from '@gluestack-ui/input'; -import { styled, AsForwarder } from '@gluestack-style/react'; -import { View, Pressable, TextInput } from 'react-native'; - -const StyledRoot = styled( - View, - { - 'borderWidth': 1, - 'borderColor': '$background300', - 'borderRadius': '$sm', - 'flexDirection': 'row', - 'overflow': 'hidden', - 'alignContent': 'center', - - ':hover': { - borderColor: '$border400', - }, - - ':focus': { - 'borderColor': '$primary700', - ':hover': { - borderColor: '$primary700', - }, - }, - - ':disabled': { - 'opacity': 0.4, - ':hover': { - borderColor: '$background300', - }, - }, - - '_input': { - py: 'auto', - px: '$3', - }, - - '_icon': { - color: '$text400', - }, - - 'variants': { - size: { - xl: { - h: '$12', - _input: { - props: { - size: 'xl', - }, - }, - _icon: { - props: { - size: 'xl', - }, - }, - }, - lg: { - h: '$11', - _input: { - props: { - size: 'lg', - }, - }, - _icon: { - props: { - size: 'lg', - }, - }, - }, - md: { - h: '$10', - _input: { - props: { - size: 'md', - }, - }, - _icon: { - props: { - size: 'sm', - }, - }, - }, - sm: { - h: '$9', - _input: { - props: { - size: 'sm', - }, - }, - _icon: { - props: { - size: 'xs', - }, - }, - }, - }, - variant: { - underlined: { - '_input': { - _web: { - outlineWidth: 0, - outline: 'none', - }, - px: '$0', - }, - - 'borderWidth': 0, - 'borderRadius': 0, - 'borderBottomWidth': '$1', - - ':focus': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $primary700', - }, - }, - - ':invalid': { - 'borderBottomWidth': 2, - 'borderBottomColor': '$error700', - '_web': { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - ':hover': { - borderBottomColor: '$error700', - }, - ':focus': { - 'borderBottomColor': '$error700', - ':hover': { - borderBottomColor: '$error700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderBottomColor: '$error700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - }, - }, - }, - }, - - outline: { - '_input': { - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - - ':focus': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - }, - - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - 'borderColor': '$error700', - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - }, - }, - - rounded: { - 'borderRadius': 999, - - '_input': { - px: '$4', - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - - ':focus': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - }, - - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - 'borderColor': '$error700', - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - }, - }, - }, - }, - - 'defaultProps': { - size: 'md', - variant: 'outline', - }, - }, - { - descendantStyle: ['_input', '_icon'], - } -); - -const StyledIcon = styled( - AsForwarder, - { - color: '$background800', - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'md', - // @ts-ignore - fill: 'none', - }, - }, - { - resolveProps: ['stroke', 'fill'], - ancestorStyle: ['_icon'], - }, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); - -const StyledSlot = styled( - Pressable, - { - justifyContent: 'center', - alignItems: 'center', - _web: { - ':disabled': { - cursor: 'not-allowed', - }, - }, - }, - { - descendantStyle: ['_icon'], - } -); - -const StyledInputField = styled( - TextInput, - { - flex: 1, - color: '$text900', - - props: { - placeholderTextColor: '$text500', - }, - - _web: { - 'cursor': 'text', - ':disabled': { - cursor: 'not-allowed', - }, - }, - - variants: { - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - }, - }, - { - ancestorStyle: ['_input'], - resolveProps: ['placeholderTextColor'], - }, - { - propertyTokenMap: { - placeholderTextColor: 'colors', - }, - } -); -const UIInput = createInput({ - Root: StyledRoot, - Icon: StyledIcon, - Slot: StyledSlot, - Input: StyledInputField, -}); - -export const Input = UIInput; -export const InputIcon = UIInput.Icon; -export const InputSlot = UIInput.Slot; -export const InputField = UIInput.Input; - -/** - * @deprecated Use InputField instead. - */ -export const InputInput = UIInput.Input; diff --git a/example/storybook-v7/src/core-components/themed/keyboard-avoiding-view/index.tsx b/example/storybook-v7/src/core-components/themed/keyboard-avoiding-view/index.tsx deleted file mode 100644 index b03bd3d692..0000000000 --- a/example/storybook-v7/src/core-components/themed/keyboard-avoiding-view/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -'use client'; -import { styled, useStyled } from '@gluestack-style/react'; -import { KeyboardAvoidingView as RNKeyboardAvoidingView } from 'react-native'; - -export const KeyboardAvoidingView = styled( - RNKeyboardAvoidingView, - {}, - { - componentName: 'KeyboardAvoidingView', - resolveProps: ['contentContainerStyle'], - } as const, - { - propertyResolver: { - contentContainerStyle: (rawValue, resolver) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const aliases = useStyled()?.config?.aliases; - const newValue = {} as Record; - Object.entries(rawValue).forEach(([key, value]) => { - if (Object.hasOwn(aliases, key)) { - newValue[`${aliases[key]}`] = resolver( - value, - //@ts-ignore - propertyTokenMap[aliases[key]] - ); - } else { - //@ts-ignore - newValue[`${key}`] = resolver(value, propertyTokenMap[key]); - } - }); - rawValue = newValue; - return rawValue; - }, - }, - } -); diff --git a/example/storybook-v7/src/core-components/themed/linear-gradient/index.tsx b/example/storybook-v7/src/core-components/themed/linear-gradient/index.tsx deleted file mode 100644 index 4e63b2f3ba..0000000000 --- a/example/storybook-v7/src/core-components/themed/linear-gradient/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -export const LinearGradient = styled( - View, - {}, - { - componentName: 'LinearGradient', - resolveProps: ['colors'], - } as const, - { - propertyTokenMap: { - colors: 'colors', - }, - propertyResolver: { - colors: (rawValue: any, resolver: any) => { - rawValue.forEach((color: any, index: number) => { - rawValue[index] = resolver(color); - }); - return rawValue; - }, - }, - } -); diff --git a/example/storybook-v7/src/core-components/themed/link/index.tsx b/example/storybook-v7/src/core-components/themed/link/index.tsx deleted file mode 100644 index 0f63ee9a2c..0000000000 --- a/example/storybook-v7/src/core-components/themed/link/index.tsx +++ /dev/null @@ -1,158 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { createLink } from '@gluestack-ui/link'; -import { Pressable, Text } from 'react-native'; - -const StyledRoot = styled( - Pressable, - { - _web: { - 'outlineWidth': 0, - ':disabled': { - cursor: 'not-allowed', - }, - ':focusVisible': { - outlineWidth: 2, - outlineColor: '$primary700', - outlineStyle: 'solid', - }, - }, - _text: { - ':hover': { - color: '$info600', - textDecorationLine: 'none', - }, - - ':active': { - color: '$info700', - }, - - ':disabled': { - opacity: 0.4, - }, - }, - }, - { descendantStyle: ['_text'] } -); - -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledLinkText = styled( - StyledText, - { - textDecorationLine: 'underline', - color: '$info700', - }, - { - ancestorStyle: ['_text'], - } as const -); - -export const Link = createLink({ - Root: StyledRoot, - Text: StyledLinkText, -}); -export const LinkText = Link.Text; diff --git a/example/storybook-v7/src/core-components/themed/menu/index.tsx b/example/storybook-v7/src/core-components/themed/menu/index.tsx deleted file mode 100644 index a14c05340a..0000000000 --- a/example/storybook-v7/src/core-components/themed/menu/index.tsx +++ /dev/null @@ -1,327 +0,0 @@ -'use client'; -import { AnimatePresence } from '@gluestack-style/animation-resolver'; -import { createMenu } from '@gluestack-ui/menu'; -import { styled } from '@gluestack-style/react'; -import { AnimatedView } from '@gluestack-style/animation-resolver'; -import { Pressable, Text } from 'react-native'; - -const StyledRoot = styled( - AnimatedView, - { - ':initial': { - opacity: 0, - }, - - ':animate': { - opacity: 1, - }, - - ':exit': { - opacity: 0, - }, - - ':transition': { - type: 'spring', - damping: 18, - stiffness: 250, - // @ts-ignore - opacity: { - type: 'timing', - duration: 200, - }, - }, - - 'minWidth': 200, - 'py': '$2', - 'rounded': '$sm', - 'bg': '$background0', - - 'defaultProps': { - softShadow: '3', - }, - }, - {} -); - -const StyledItem = styled( - Pressable, - { - 'p': '$3', - 'flexDirection': 'row', - 'alignItems': 'center', - - ':hover': { - bg: '$background100', - }, - - ':disabled': { - 'opacity': 0.4, - - '_web': { - cursor: 'not-allowed', - }, - - ':focus': { - bg: 'transparent', - }, - }, - - ':active': { - bg: '$background200', - }, - - ':focus': { - bg: '$background100', - // @ts-ignore - outlineWidth: '$0', - outlineStyle: 'none', - }, - - ':focusVisible': { - // @ts-ignore - outlineWidth: '$0.5', - - outlineColor: '$primary700', - outlineStyle: 'solid', - }, - - '_web': { - cursor: 'pointer', - }, - }, - { descendantStyle: ['_text'] } -); - -const StyledBackdrop = styled( - Pressable, - { - position: 'absolute', - top: 0, - bottom: 0, - left: 0, - right: 0, - // use this for when you want to give background colour to backdrop - // opacity: 0.5, - // bg: '$background500', - _web: { - cursor: 'default', - }, - }, - {} -); - -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); -const StyledLabel = styled( - StyledText, - { - color: '$text700', - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { ancestorStyle: ['_text'] } -); -export const Menu = createMenu({ - Root: StyledRoot, - Item: StyledItem, - Label: StyledLabel, - Backdrop: StyledBackdrop, - //@ts-ignore - AnimatePresence: AnimatePresence, -}); -export const MenuItem = Menu.Item; -export const MenuItemLabel = Menu.ItemLabel; diff --git a/example/storybook-v7/src/core-components/themed/modal/index.tsx b/example/storybook-v7/src/core-components/themed/modal/index.tsx deleted file mode 100644 index 9f33dc9afc..0000000000 --- a/example/storybook-v7/src/core-components/themed/modal/index.tsx +++ /dev/null @@ -1,215 +0,0 @@ -'use client'; -import { createModal } from '@gluestack-ui/modal'; -import { - AnimatePresence, - AnimatedPressable, - AnimatedView, -} from '@gluestack-style/animation-resolver'; -import { Pressable, View, ScrollView } from 'react-native'; - -import { styled } from '@gluestack-style/react'; - -const StyledRoot = styled( - View, - { - width: '$full', - height: '$full', - justifyContent: 'center', - alignItems: 'center', - variants: { - size: { - xs: { _content: { width: '60%', maxWidth: 360 } }, - sm: { _content: { width: '70%', maxWidth: 420 } }, - md: { _content: { width: '80%', maxWidth: 510 } }, - lg: { _content: { width: '90%', maxWidth: 640 } }, - full: { _content: { width: '100%' } }, - }, - }, - - defaultProps: { size: 'md' }, - - _web: { - pointerEvents: 'box-none', - }, - }, - { - descendantStyle: ['_content'], - } -); -const StyledBackdrop = styled( - AnimatedPressable, - { - ':initial': { - opacity: 0, - }, - - ':animate': { - opacity: 0.5, - }, - - ':exit': { - opacity: 0, - }, - - ':transition': { - // @ts-ignore - type: 'spring', - damping: 18, - stiffness: 250, - opacity: { - type: 'timing', - duration: 250, - }, - }, - - 'position': 'absolute', - 'left': 0, - 'top': 0, - 'right': 0, - 'bottom': 0, - 'bg': '$background950', - - // @ts-ignore - '_web': { - cursor: 'default', - }, - }, - {} -); -const StyledContent = styled( - AnimatedView, - { - 'bg': '$background50', - 'rounded': '$lg', - 'overflow': 'hidden', - - ':initial': { - opacity: 0, - scale: 0.9, - }, - - ':animate': { - opacity: 1, - scale: 1, - }, - - ':exit': { - opacity: 0, - }, - - ':transition': { - type: 'spring', - damping: 18, - stiffness: 250, - // @ts-ignore - opacity: { - type: 'timing', - duration: 250, - }, - }, - - 'defaultProps': { - softShadow: '3', - }, - }, - { ancestorStyle: ['_content'] } -); -const StyledBody = styled( - ScrollView, - { px: '$4', paddingTop: 0, paddingBottom: '$2' }, - {} -); -const StyledCloseButton = styled( - Pressable, - { - 'zIndex': 1, - 'p': '$2', - 'rounded': '$sm', - - '_icon': { - color: '$background400', - }, - - '_text': { - color: '$background400', - }, - - ':hover': { - _icon: { - color: '$background700', - }, - _text: { - color: '$background700', - }, - }, - - ':active': { - _icon: { - color: '$background900', - }, - _text: { - color: '$background900', - }, - }, - - ':focusVisible': { - bg: '$background100', - - _icon: { - color: '$background900', - }, - - _text: { - color: '$background900', - }, - }, - - '_web': { - outlineWidth: 0, - cursor: 'pointer', - }, - }, - { descendantStyle: ['_icon', '_text'] } -); -const StyledFooter = styled( - View, - { - p: '$4', - flexDirection: 'row', - justifyContent: 'flex-end', - alignItems: 'center', - flexWrap: 'wrap', - }, - {} -); -const StyledHeader = styled( - View, - { - px: '$4', - paddingTop: '$4', - paddingBottom: '$2', - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row', - }, - {} -); - -const UIModal = createModal({ - Root: StyledRoot, - Backdrop: StyledBackdrop, - Content: StyledContent, - Body: StyledBody, - CloseButton: StyledCloseButton, - Footer: StyledFooter, - Header: StyledHeader, - AnimatePresence: AnimatePresence, // TODO: Add support for this -}); - -export const Modal = UIModal; -export const ModalBackdrop = UIModal.Backdrop; -export const ModalContent = UIModal.Content; -export const ModalCloseButton = UIModal.CloseButton; -export const ModalHeader = UIModal.Header; -export const ModalBody = UIModal.Body; -export const ModalFooter = UIModal.Footer; diff --git a/example/storybook-v7/src/core-components/themed/popover/index.tsx b/example/storybook-v7/src/core-components/themed/popover/index.tsx deleted file mode 100644 index f16864d9fd..0000000000 --- a/example/storybook-v7/src/core-components/themed/popover/index.tsx +++ /dev/null @@ -1,236 +0,0 @@ -'use client'; -import { View, ScrollView, Pressable } from 'react-native'; -import { styled } from '@gluestack-style/react'; -import { - AnimatedView, - AnimatedPressable, - AnimatePresence, -} from '@gluestack-style/animation-resolver'; -import { createPopover } from '@gluestack-ui/popover'; - -const StyledRoot = styled( - View, - { - width: '$full', - height: '$full', - justifyContent: 'center', - alignItems: 'center', - variants: { - size: { - xs: { _content: { width: '60%', maxWidth: 360 } }, - sm: { _content: { width: '70%', maxWidth: 420 } }, - md: { _content: { width: '80%', maxWidth: 510 } }, - lg: { _content: { width: '90%', maxWidth: 640 } }, - full: { _content: { width: '100%' } }, - }, - }, - - defaultProps: { size: 'md' }, - - _web: { - pointerEvents: 'box-none', - }, - }, - { - descendantStyle: ['_content'], - } -); - -const StyledArrow = styled(AnimatedView, { - 'bg': '$background50', - 'zIndex': 1, - 'position': 'absolute', - 'overflow': 'hidden', - 'h': '$3.5', - 'w': '$3.5', - ':transition': { - type: 'spring', - damping: 18, - stiffness: 250, - mass: 0.9, - opacity: { - type: 'timing', - duration: 50, - delay: 50, - }, - }, - 'props': { - softShadow: '3', - }, -}); - -const StyledBackdrop = styled(AnimatedPressable, { - ':initial': { - opacity: 0, - }, - - ':animate': { - opacity: 0.5, - }, - - ':exit': { - opacity: 0, - }, - - ':transition': { - // @ts-ignore - type: 'spring', - damping: 18, - stiffness: 250, - opacity: { - type: 'timing', - duration: 250, - }, - }, - - 'position': 'absolute', - 'left': 0, - 'top': 0, - 'right': 0, - 'bottom': 0, - 'bg': '$background950', - - // @ts-ignore - '_web': { - cursor: 'default', - }, -}); - -const StyledBody = styled(ScrollView, { - p: '$4', - pt: '$2', -}); - -const StyledCloseButton = styled( - Pressable, - { - 'zIndex': 1, - 'p': '$2', - 'rounded': '$sm', - - '_icon': { - color: '$background400', - }, - - '_text': { - color: '$background400', - }, - - ':hover': { - _icon: { - color: '$background700', - }, - _text: { - color: '$background700', - }, - }, - - ':active': { - _icon: { - color: '$background900', - }, - _text: { - color: '$background900', - }, - }, - - ':focusVisible': { - bg: '$background100', - - _icon: { - color: '$background900', - }, - - _text: { - color: '$background900', - }, - }, - - '_web': { - outlineWidth: 0, - cursor: 'pointer', - }, - }, - { - descendantStyle: ['_icon', '_text'], - } -); - -const StyledContent = styled( - AnimatedView, - { - 'bg': '$background50', - 'rounded': '$lg', - 'overflow': 'hidden', - - ':initial': { - opacity: 0, - }, - - ':animate': { - opacity: 1, - }, - - ':exit': { - opacity: 0, - }, - - ':transition': { - type: 'spring', - damping: 18, - stiffness: 250, - // @ts-ignore - opacity: { - type: 'timing', - duration: 250, - }, - }, - - 'defaultProps': { - softShadow: '3', - }, - }, - { - ancestorStyle: ['_content'], - } -); - -const StyledFooter = styled(View, { - p: '$4', - flexDirection: 'row', - justifyContent: 'flex-end', - alignItems: 'center', - flexWrap: 'wrap', - borderTopWidth: 1, - borderColor: '$border300', -}); - -const StyledHeader = styled(View, { - p: '$4', - pb: '$2', - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row', -}); - -const UIPopover = createPopover({ - Root: StyledRoot, - Arrow: StyledArrow, - Content: StyledContent, - Header: StyledHeader, - Footer: StyledFooter, - Body: StyledBody, - Backdrop: StyledBackdrop, - CloseButton: StyledCloseButton, - //@ts-ignore - AnimatePresence: AnimatePresence, -}); - -export const Popover = UIPopover; -export const PopoverArrow = UIPopover.Arrow; -export const PopoverContent = UIPopover.Content; -export const PopoverHeader = UIPopover.Header; -export const PopoverFooter = UIPopover.Footer; -export const PopoverBody = UIPopover.Body; -export const PopoverBackdrop = UIPopover.Backdrop; -export const PopoverCloseButton = UIPopover.CloseButton; diff --git a/example/storybook-v7/src/core-components/themed/pressable/index.tsx b/example/storybook-v7/src/core-components/themed/pressable/index.tsx deleted file mode 100644 index a8544374c6..0000000000 --- a/example/storybook-v7/src/core-components/themed/pressable/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { Pressable as RNPressable } from 'react-native'; -import { createPressable } from '@gluestack-ui/pressable'; - -export const UIPressable = createPressable({ Root: RNPressable }); - -export const Pressable = styled(UIPressable, { - _web: { - ':focusVisible': { - outlineWidth: '2px', - outlineColor: '$primary700', - outlineStyle: 'solid', - }, - }, -}); diff --git a/example/storybook-v7/src/core-components/themed/progress/index.tsx b/example/storybook-v7/src/core-components/themed/progress/index.tsx deleted file mode 100644 index e9ea411f5f..0000000000 --- a/example/storybook-v7/src/core-components/themed/progress/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { createProgress } from '@gluestack-ui/progress'; -import { View } from 'react-native'; -const StyledRoot = styled( - View, - { - bg: '$background300', - borderRadius: '$full', - w: '100%', - - variants: { - size: { - 'xs': { - h: '$1', - _filledTrack: { - h: '$1', - }, - }, - 'sm': { - h: '$2', - _filledTrack: { - h: '$2', - }, - }, - 'md': { - h: '$3', - _filledTrack: { - h: '$3', - }, - }, - 'lg': { - h: '$4', - _filledTrack: { - h: '$4', - }, - }, - 'xl': { - h: '$5', - _filledTrack: { - h: '$5', - }, - }, - '2xl': { - h: '$6', - _filledTrack: { - h: '$6', - }, - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - descendantStyle: ['_filledTrack'], - } -); - -const StyledFilledTrack = styled( - View, - { - bg: '$primary500', - borderRadius: '$full', - }, - { - ancestorStyle: ['_filledTrack'], - } -); - -export const Progress = createProgress({ - Root: StyledRoot, - FilledTrack: StyledFilledTrack, -}); -export const ProgressFilledTrack = Progress.FilledTrack; diff --git a/example/storybook-v7/src/core-components/themed/radio/index.tsx b/example/storybook-v7/src/core-components/themed/radio/index.tsx deleted file mode 100644 index f439558ef5..0000000000 --- a/example/storybook-v7/src/core-components/themed/radio/index.tsx +++ /dev/null @@ -1,397 +0,0 @@ -'use client'; -import { createRadio } from '@gluestack-ui/radio'; -import { Pressable, View, Platform, Text } from 'react-native'; -import { styled, AsForwarder } from '@gluestack-style/react'; - -const StyledRoot = styled( - // @ts-ignore - Platform.OS === 'web' ? View : Pressable, - { - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - - variants: { - size: { - lg: { - _text: { - props: { - size: 'lg', - }, - }, - _icon: { - props: { - size: 'md', - }, - }, - _indicator: { - p: 2, - h: '$6', - w: '$6', - }, - }, - md: { - _text: { - props: { - size: 'md', - }, - }, - _icon: { - props: { - size: 'sm', - }, - }, - _indicator: { - p: 1.5, - h: '$5', - w: '$5', - }, - }, - sm: { - _text: { - props: { - size: 'sm', - }, - }, - _icon: { - props: { - size: '2xs', - }, - }, - _indicator: { - p: 1, - h: '$4', - w: '$4', - }, - }, - }, - }, - - defaultProps: { - size: 'md', - }, - _web: { - 'cursor': 'pointer', - ':disabled': { - cursor: 'not-allowed', - }, - }, - }, - { - descendantStyle: ['_icon', '_text', '_indicator'], - ancestorStyle: ['_radio'], - } -); - -const StyledGroup = styled(View, {}, { descendantStyle: ['_radio'] }); - -const StyledIcon = styled( - AsForwarder, - { - 'color': '$background800', - - // defaultProps: { - // size: 'md', - // }, - 'variants': { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - 'borderRadius': '$full', - - ':checked': { - 'color': '$primary600', - ':hover': { - 'color': '$primary700', - ':disabled': { - color: '$primary600', - }, - }, - }, - }, - { - ancestorStyle: ['_icon'], - resolveProps: ['color'], - }, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); - -const StyledIndicator = styled( - View, - { - 'justifyContent': 'center', - 'alignItems': 'center', - 'bg': 'transparent', - 'borderColor': '$border400', - 'borderWidth': 2, - 'borderRadius': 999, - - '_web': { - ':focusVisible': { - outlineWidth: 2, - outlineColor: '$primary700', - outlineStyle: 'solid', - }, - }, - - ':checked': { - borderColor: '$primary600', - bg: 'transparent', - }, - - ':hover': { - 'borderColor': '$border500', - 'bg': 'transparent', - - ':checked': { - bg: 'transparent', - borderColor: '$primary700', - }, - ':invalid': { - borderColor: '$error700', - }, - ':disabled': { - ':invalid': { - borderColor: '$error400', - opacity: 0.4, - }, - 'borderColor': '$border400', - 'opacity': 0.4, - }, - }, - - ':active': { - bg: 'transparent', - borderColor: '$primary800', - }, - - ':invalid': { - borderColor: '$error700', - }, - - ':disabled': { - 'opacity': 0.4, - ':checked': { - borderColor: '$border400', - bg: 'transparent', - }, - ':invalid': { - borderColor: '$error400', - }, - }, - }, - { ancestorStyle: ['_indicator'] } -); - -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledLabel = styled( - StyledText, - { - 'color': '$text600', - - ':checked': { - color: '$text900', - }, - - ':hover': { - 'color': '$text900', - ':checked': { - color: '$text900', - }, - ':disabled': { - 'color': '$text600', - ':checked': { - color: '$text900', - }, - }, - }, - - ':active': { - 'color': '$text900', - ':checked': { - color: '$text900', - }, - }, - - ':disabled': { - opacity: 0.4, - }, - - '_web': { - MozUserSelect: 'none', - WebkitUserSelect: 'none', - msUserSelect: 'none', - userSelect: 'none', - }, - }, - { ancestorStyle: ['_text'] } -); - -export const Radio = createRadio({ - Root: StyledRoot, - Group: StyledGroup, - Icon: StyledIcon, - Indicator: StyledIndicator, - Label: StyledLabel, -}); -export const RadioGroup = Radio.Group; -export const RadioIcon = Radio.Icon; -export const RadioIndicator = Radio.Indicator; -export const RadioLabel = Radio.Label; diff --git a/example/storybook-v7/src/core-components/themed/refresh-control/index.tsx b/example/storybook-v7/src/core-components/themed/refresh-control/index.tsx deleted file mode 100644 index c048d911c5..0000000000 --- a/example/storybook-v7/src/core-components/themed/refresh-control/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { RefreshControl as RNRefreshControl } from 'react-native'; - -export const RefreshControl = styled(RNRefreshControl, {}); diff --git a/example/storybook-v7/src/core-components/themed/safe-area-view/index.tsx b/example/storybook-v7/src/core-components/themed/safe-area-view/index.tsx deleted file mode 100644 index 6d2e54d530..0000000000 --- a/example/storybook-v7/src/core-components/themed/safe-area-view/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client'; -import { SafeAreaView as RNSafeAreaView } from 'react-native'; -import { styled } from '@gluestack-style/react'; - -const StyledRoot = styled(RNSafeAreaView); - -export const SafeAreaView = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/scroll-view/index.tsx b/example/storybook-v7/src/core-components/themed/scroll-view/index.tsx deleted file mode 100644 index bd85ceaa09..0000000000 --- a/example/storybook-v7/src/core-components/themed/scroll-view/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -'use client'; -import { ScrollView as RNScrollView } from 'react-native'; - -import { styled, useStyled, propertyTokenMap } from '@gluestack-style/react'; - -const StyledRoot = styled( - RNScrollView, - {}, - { - resolveProps: ['contentContainerStyle'], - }, - { - propertyResolver: { - contentContainerStyle: (rawValue, resolver) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const aliases: any = useStyled()?.config?.aliases; - const newValue = {} as Record; - Object.entries(rawValue).forEach(([key, value]: any) => { - if (Object.hasOwn(aliases, key)) { - newValue[`${aliases[key]}`] = resolver( - value, - //@ts-ignore - propertyTokenMap[aliases[key]] - ); - } else { - //@ts-ignore - newValue[`${key}`] = resolver(value, propertyTokenMap[key]); - } - }); - rawValue = newValue; - return rawValue; - }, - }, - } -); - -export const ScrollView = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/section-list/index.tsx b/example/storybook-v7/src/core-components/themed/section-list/index.tsx deleted file mode 100644 index fc1058b433..0000000000 --- a/example/storybook-v7/src/core-components/themed/section-list/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { SectionList } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/themed/select/index.tsx b/example/storybook-v7/src/core-components/themed/select/index.tsx deleted file mode 100644 index 0dc46a4cef..0000000000 --- a/example/storybook-v7/src/core-components/themed/select/index.tsx +++ /dev/null @@ -1,787 +0,0 @@ -'use client'; -import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; -import { - AnimatePresence, - AnimatedPressable, - AnimatedView, -} from '@gluestack-style/animation-resolver'; -import { styled, AsForwarder } from '@gluestack-style/react'; -import { createActionsheet } from '@gluestack-ui/actionsheet'; -import { createSelect } from '@gluestack-ui/select'; -import { TextInput } from 'react-native'; -import { - Pressable, - View, - Text, - ScrollView, - VirtualizedList, - FlatList, - SectionList, -} from 'react-native'; - -const StyledRoot = styled(View, { - width: '$full', - height: '$full', - _web: { - pointerEvents: 'none', - }, -}); - -const StyledContent = styled( - AnimatedView, - { - alignItems: 'center', - borderTopLeftRadius: '$3xl', - borderTopRightRadius: '$3xl', - h: '$full', - p: '$2', - bg: '$background0', - - _sectionHeaderBackground: { - bg: '$background0', - }, - - defaultProps: { - hardShadow: '5', - }, - - _web: { - userSelect: 'none', - pointerEvents: 'auto', - }, - }, - { - descendantStyle: ['_sectionHeaderBackground'], - } -); - -const StyledItem = styled( - Pressable, - { - 'p': '$3', - 'flexDirection': 'row', - 'alignItems': 'center', - 'rounded': '$sm', - 'w': '$full', - - ':disabled': { - opacity: 0.4, - _web: { - // @ts-ignore - pointerEvents: 'all !important', - cursor: 'not-allowed', - }, - }, - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: '$background100', - }, - - ':focus': { - bg: '$background100', - }, - - '_web': { - ':focusVisible': { - bg: '$background100', - }, - }, - }, - { - descendantStyle: ['_text', '_icon'], - } -); -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledItemText = styled( - StyledText, - { - mx: '$2', - props: { - size: 'md', - }, - color: '$text800', - }, - { - ancestorStyle: ['_text'], - } -); - -const StyledDragIndicator = styled(View, { - w: '$16', - h: '$1', - bg: '$background400', - rounded: '$full', -}); - -const StyledDragIndicatorWrapper = styled(View, { - py: '$1', - w: '$full', - alignItems: 'center', -}); - -const StyledBackdrop = styled(AnimatedPressable, { - ':initial': { - opacity: 0, - }, - - ':animate': { - opacity: 0.5, - }, - - ':exit': { - opacity: 0, - }, - - 'position': 'absolute', - 'left': 0, - 'top': 0, - 'right': 0, - 'bottom': 0, - 'bg': '$background950', - - '_web': { - cursor: 'default', - pointerEvents: 'auto', - }, -}); - -const StyledScrollView = styled(ScrollView, { - w: '$full', - h: 'auto', -}); - -const StyledVirtualizedList = styled(VirtualizedList, { - w: '$full', - h: 'auto', -}); - -const StyledFlatList = styled(FlatList, { - w: '$full', - h: 'auto', -}); - -const StyledSectionList = styled(SectionList, { - w: '$full', - h: 'auto', -}); - -const StyledSectionHeaderText = styled(H4, { - letterSpacing: '$sm', - fontWeight: '$bold', - fontFamily: '$heading', - - // Overrides expo-html default styling - marginVertical: 0, - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '5xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$6xl', - }, - '4xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$5xl', - }, - - '3xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$4xl', - }, - - '2xl': { - //@ts-ignore - props: { as: H2 }, - fontSize: '$3xl', - }, - - 'xl': { - //@ts-ignore - props: { as: H3 }, - fontSize: '$2xl', - }, - - 'lg': { - //@ts-ignore - props: { as: H4 }, - fontSize: '$xl', - }, - - 'md': { - //@ts-ignore - props: { as: H5 }, - fontSize: '$lg', - }, - - 'sm': { - //@ts-ignore - props: { as: H6 }, - fontSize: '$md', - }, - - 'xs': { - //@ts-ignore - props: { as: H6 }, - fontSize: '$sm', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - color: '$text500', - props: { size: 'xs' }, - textTransform: 'uppercase', - p: '$3', -}); - -const StyledIcon = styled( - AsForwarder, - { - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'sm', - // @ts-ignore - fill: 'none', - }, - - color: '$background500', - }, - { - componentName: 'BaseIcon', - resolveProps: ['stroke', 'fill'], - } as const, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, - } -); - -const StyledSelectRoot = styled(View, {}); - -const StyledSelectTrigger = styled( - Pressable, - { - 'borderWidth': 1, - 'borderColor': '$background300', - 'borderRadius': '$sm', - 'flexDirection': 'row', - 'overflow': 'hidden', - 'alignItems': 'center', - - ':hover': { - borderColor: '$border400', - }, - - ':focus': { - borderColor: '$primary700', - }, - - ':disabled': { - 'opacity': 0.4, - ':hover': { - borderColor: '$background300', - }, - }, - - '_input': { - py: 'auto', - px: '$3', - }, - - '_icon': { - color: '$background500', - }, - - 'variants': { - size: { - xl: { - h: '$12', - _input: { - fontSize: '$xl', - }, - _icon: { - h: '$6', - w: '$6', - }, - }, - lg: { - h: '$11', - _input: { - fontSize: '$lg', - }, - _icon: { - h: '$5', - w: '$5', - }, - }, - md: { - h: '$10', - _input: { - fontSize: '$md', - }, - _icon: { - h: '$4', - w: '$4', - }, - }, - sm: { - h: '$9', - _input: { - fontSize: '$sm', - }, - _icon: { - h: '$3.5', - w: '$3.5', - }, - }, - }, - variant: { - underlined: { - '_input': { - _web: { - outlineWidth: 0, - outline: 'none', - }, - px: '$0', - }, - - 'borderWidth': 0, - 'borderRadius': 0, - 'borderBottomWidth': '$1', - - ':focus': { - 'borderColor': '$primary700', - '_web': { - boxShadow: 'inset 0 -1px 0 0 $primary700', - }, - ':hover': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $primary600', - }, - }, - }, - - ':invalid': { - 'borderBottomWidth': 2, - 'borderBottomColor': '$error700', - '_web': { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - ':hover': { - borderBottomColor: '$error700', - }, - ':focus': { - 'borderBottomColor': '$error700', - ':hover': { - borderBottomColor: '$error700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderBottomColor: '$error700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - }, - }, - }, - }, - outline: { - '_input': { - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - - ':focus': { - 'borderColor': '$primary700', - '_web': { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - ':hover': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary600', - }, - }, - }, - - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - 'borderColor': '$error700', - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - }, - }, - rounded: { - 'borderRadius': 999, - - '_input': { - px: '$4', - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - - ':focus': { - 'borderColor': '$primary700', - '_web': { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - ':hover': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary600', - }, - }, - }, - - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - 'borderColor': '$error700', - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - }, - }, - }, - }, - - 'defaultProps': { - size: 'md', - variant: 'outline', - }, - }, - - { - descendantStyle: ['_input', '_icon'], - } -); - -const StyledSelectInput = styled( - TextInput, - { - _web: { - w: '$full', - }, - - pointerEvents: 'none', - flex: 1, - h: '$full', - color: '$text900', - - props: { - placeholderTextColor: '$text500', - }, - }, - { - ancestorStyle: ['_input'], - resolveProps: ['placeholderTextColor'], - }, - { - propertyTokenMap: { - placeholderTextColor: 'colors', - }, - } -); - -const Actionsheet = createActionsheet({ - Root: StyledRoot, - Content: StyledContent, - Item: StyledItem, - ItemText: StyledItemText, - DragIndicator: StyledDragIndicator, - IndicatorWrapper: StyledDragIndicatorWrapper, - Backdrop: StyledBackdrop, - ScrollView: StyledScrollView, - VirtualizedList: StyledVirtualizedList, - FlatList: StyledFlatList, - SectionList: StyledSectionList, - SectionHeaderText: StyledSectionHeaderText, - Icon: StyledIcon, - AnimatePresence: AnimatePresence, -}); - -export const Select = createSelect( - { - Root: StyledSelectRoot, - Trigger: StyledSelectTrigger, - Input: StyledSelectInput, - Icon: StyledIcon, - }, - { - Portal: Actionsheet, - Backdrop: Actionsheet.Backdrop, - Content: Actionsheet.Content, - DragIndicator: Actionsheet.DragIndicator, - DragIndicatorWrapper: Actionsheet.DragIndicatorWrapper, - Item: Actionsheet.Item, - ItemText: Actionsheet.ItemText, - ScrollView: Actionsheet.ScrollView, - VirtualizedList: Actionsheet.VirtualizedList, - FlatList: Actionsheet.FlatList, - SectionList: Actionsheet.SectionList, - SectionHeaderText: Actionsheet.SectionHeaderText, - } -); -export const SelectTrigger = Select.Trigger; -export const SelectInput = Select.Input; -export const SelectIcon = Select.Icon; -export const SelectPortal = Select.Portal; -export const SelectBackdrop = Select.Backdrop; -export const SelectContent = Select.Content; -export const SelectDragIndicator = Select.DragIndicator; -export const SelectDragIndicatorWrapper = Select.DragIndicatorWrapper; -export const SelectItem = Select.Item; -export const SelectItemText = Select.ItemText; -export const SelectScrollView = Select.ScrollView; -export const SelectVirtualizedList = Select.VirtualizedList; -export const SelectFlatList = Select.FlatList; -export const SelectSectionList = Select.SectionList; -export const SelectSectionHeaderText = Select.SectionHeaderText; diff --git a/example/storybook-v7/src/core-components/themed/slider/index.tsx b/example/storybook-v7/src/core-components/themed/slider/index.tsx deleted file mode 100644 index b80be7fa0d..0000000000 --- a/example/storybook-v7/src/core-components/themed/slider/index.tsx +++ /dev/null @@ -1,311 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { createSlider } from '@gluestack-ui/slider'; -import { Pressable } from 'react-native'; -import { View } from 'react-native'; - -const StyledRoot = styled( - View, - { - justifyContent: 'center', - alignItems: 'center', - variants: { - orientation: { - horizontal: { - w: '$full', - _track: { - width: '$full', - }, - _filledTrack: { - height: '$full', - }, - }, - vertical: { - h: '$full', - _track: { - height: '$full', - }, - _filledTrack: { - width: '$full', - }, - }, - }, - isReversed: { - true: {}, - false: {}, - }, - size: { - sm: { - _thumb: { - h: '$4', - w: '$4', - }, - }, - md: { - _thumb: { - h: '$5', - w: '$5', - }, - }, - lg: { - _thumb: { - h: '$6', - w: '$6', - }, - }, - }, - }, - compoundVariants: [ - { - orientation: 'horizontal', - size: 'sm', - value: { - _track: { - height: '$1', - flexDirection: 'row', - }, - }, - }, - { - orientation: 'horizontal', - size: 'sm', - isReversed: true, - value: { - _track: { - height: '$1', - flexDirection: 'row-reverse', - }, - }, - }, - { - orientation: 'horizontal', - size: 'md', - value: { - _track: { - height: 5, - flexDirection: 'row', - }, - }, - }, - { - orientation: 'horizontal', - size: 'md', - isReversed: true, - value: { - _track: { - height: 5, - flexDirection: 'row-reverse', - }, - }, - }, - { - orientation: 'horizontal', - size: 'lg', - value: { - _track: { - height: '$1.5', - flexDirection: 'row', - }, - }, - }, - { - orientation: 'horizontal', - size: 'lg', - isReversed: true, - value: { - _track: { - height: '$1.5', - flexDirection: 'row-reverse', - }, - }, - }, - { - orientation: 'vertical', - size: 'sm', - value: { - _track: { - w: '$1', - flexDirection: 'column-reverse', - }, - }, - }, - { - orientation: 'vertical', - size: 'sm', - isReversed: true, - value: { - _track: { - width: '$1', - flexDirection: 'column', - }, - }, - }, - { - orientation: 'vertical', - size: 'md', - value: { - _track: { - width: 5, - flexDirection: 'column-reverse', - }, - }, - }, - { - orientation: 'vertical', - size: 'md', - isReversed: true, - value: { - _track: { - width: 5, - flexDirection: 'column', - }, - }, - }, - { - orientation: 'vertical', - size: 'lg', - value: { - _track: { - width: '$1.5', - flexDirection: 'column-reverse', - }, - }, - }, - { - orientation: 'vertical', - size: 'lg', - isReversed: true, - value: { - _track: { - width: '$1.5', - flexDirection: 'column', - }, - }, - }, - ], - _web: { - ':disabled': { - // @ts-ignore - pointerEvents: 'all !important', - cursor: 'not-allowed', - opacity: 0.4, - }, - }, - defaultProps: { - size: 'md', - orientation: 'horizontal', - }, - }, - { - descendantStyle: ['_thumb', '_track', '_filledTrack'], - } -); - -const StyledThumb = styled( - View, - { - 'bg': '$primary500', - 'position': 'absolute', - 'borderRadius': '$full', - - ':focus': { - bg: '$primary600', - }, - - ':active': { - bg: '$primary600', - }, - - ':hover': { - bg: '$primary600', - }, - - ':disabled': { - bg: '$primary500', - }, - - '_web': { - //@ts-ignore - 'cursor': 'pointer', - ':active': { - outlineWidth: 4, - outlineStyle: 'solid', - outlineColor: '$primary400', - }, - ':focus': { - outlineWidth: 4, - outlineStyle: 'solid', - outlineColor: '$primary400', - }, - }, - - 'defaultProps': { - hardShadow: '1', - }, - }, - { - ancestorStyle: ['_thumb'], - } -); - -const StyledTrack = styled( - Pressable, - { - bg: '$background300', - - borderRadius: '$lg', - overflow: 'hidden', - - variants: { - variant: { - horizontal: { - width: '100%', - }, - vertical: { - height: '100%', - }, - }, - }, - }, - { - ancestorStyle: ['_track'], - } -); - -const StyledFilledTrack = styled( - View, - { - 'bg': '$primary500', - - ':focus': { - bg: '$primary600', - }, - - ':active': { - bg: '$primary600', - }, - - ':hover': { - bg: '$primary600', - }, - }, - { - ancestorStyle: ['_filledTrack'], - } -); - -const StyledThumbInteraction = styled(View, { - borderRadius: 9999, - zIndex: -1, -}); - -export const Slider = createSlider({ - Root: StyledRoot, - Thumb: StyledThumb, - Track: StyledTrack, - FilledTrack: StyledFilledTrack, - ThumbInteraction: StyledThumbInteraction, -}); -export const SliderThumb = Slider.Thumb; -export const SliderTrack = Slider.Track; -export const SliderFilledTrack = Slider.FilledTrack; diff --git a/example/storybook-v7/src/core-components/themed/spinner/index.tsx b/example/storybook-v7/src/core-components/themed/spinner/index.tsx deleted file mode 100644 index 5d46996695..0000000000 --- a/example/storybook-v7/src/core-components/themed/spinner/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -'use client'; -import { ActivityIndicator } from 'react-native'; -import { styled } from '@gluestack-style/react'; -import { createSpinner } from '@gluestack-ui/spinner'; - -const StyledRoot = styled( - ActivityIndicator, - { - props: { - color: '$primary500', - }, - }, - { - resolveProps: ['color'], - }, - { - propertyTokenMap: { - // @ts-ignore - size: 'size', - }, - } -); - -export const Spinner = createSpinner({ Root: StyledRoot }); diff --git a/example/storybook-v7/src/core-components/themed/status-bar/index.tsx b/example/storybook-v7/src/core-components/themed/status-bar/index.tsx deleted file mode 100644 index 279dec8b32..0000000000 --- a/example/storybook-v7/src/core-components/themed/status-bar/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { StatusBar as RNStatusBar } from 'react-native'; - -const StyledRoot = styled(RNStatusBar, {}); - -export const StatusBar = StyledRoot; diff --git a/example/storybook-v7/src/core-components/themed/switch/index.tsx b/example/storybook-v7/src/core-components/themed/switch/index.tsx deleted file mode 100644 index 263977de20..0000000000 --- a/example/storybook-v7/src/core-components/themed/switch/index.tsx +++ /dev/null @@ -1,147 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { Switch as RNSwitch } from 'react-native'; -import { createSwitch } from '@gluestack-ui/switch'; - -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: '$background600', - //@ts-ignore - activeThumbColor: '$background200', - - // 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' }, - - // hacky fix for the above - //@ts-ignore - - trackColor: { false: '$background300', true: '$primary700' }, - }, - }, - }, - - ':checked': { - props: { - //@ts-ignore - thumbColor: '$background0', - }, - }, - }, - { - 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; - }, - }, - } -); - -export const Switch = createSwitch({ - Root: StyledRoot, -}); diff --git a/example/storybook-v7/src/core-components/themed/text/index.tsx b/example/storybook-v7/src/core-components/themed/text/index.tsx deleted file mode 100644 index 0ced125216..0000000000 --- a/example/storybook-v7/src/core-components/themed/text/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -'use client'; -import { Text as RNText } from 'react-native'; -import { styled } from '@gluestack-style/react'; - -const StyledText = styled( - RNText, - { - color: '$text700', - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - {} -); - -export const Text = StyledText; diff --git a/example/storybook-v7/src/core-components/themed/textarea/index.tsx b/example/storybook-v7/src/core-components/themed/textarea/index.tsx deleted file mode 100644 index 374a6b2061..0000000000 --- a/example/storybook-v7/src/core-components/themed/textarea/index.tsx +++ /dev/null @@ -1,156 +0,0 @@ -'use client'; -import { createTextarea } from '@gluestack-ui/textarea'; -import { View, TextInput } from 'react-native'; -import { styled } from '@gluestack-style/react'; -const StyledRoot = styled( - View, - { - 'w': '100%', - 'borderWidth': 1, - 'borderColor': '$background300', - 'borderRadius': '$sm', - 'h': 100, - - '_input': { - p: '$3', - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - - ':hover': { - borderColor: '$border400', - }, - - ':focus': { - 'borderColor': '$primary700', - ':hover': { - borderColor: '$primary700', - }, - }, - - ':disabled': { - 'opacity': 0.4, - ':hover': { - borderColor: '$background300', - }, - }, - - 'variants': { - size: { - xl: { - _input: { - fontSize: '$xl', - }, - }, - - lg: { - _input: { - fontSize: '$lg', - }, - }, - md: { - _input: { - fontSize: '$md', - }, - }, - sm: { - _input: { - fontSize: '$sm', - }, - }, - }, - variant: { - default: { - '_input': { - _web: { - outlineWidth: '0', - outline: 'none', - }, - }, - - ':focus': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - }, - - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - ':hover': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - }, - }, - }, - }, - - 'defaultProps': { - variant: 'default', - size: 'md', - }, - }, - { - descendantStyle: ['_input'], - }, - {} -); -const StyledInput = styled( - TextInput, - { - p: '$2', - color: '$text900', - textAlignVertical: 'top', - flex: 1, - - props: { - // @ts-ignore - multiline: true, - placeholderTextColor: '$text500', - }, - - _web: { - 'cursor': 'text', - ':disabled': { - cursor: 'not-allowed', - }, - }, - }, - { - ancestorStyle: ['_input'], - resolveProps: ['placeholderTextColor'], - }, - { - propertyTokenMap: { - placeholderTextColor: 'colors', - }, - } -); -const AccessibleTextarea = createTextarea({ - Root: StyledRoot, - Input: StyledInput, -}); - -export const Textarea = AccessibleTextarea; -export const TextareaInput = AccessibleTextarea.Input; diff --git a/example/storybook-v7/src/core-components/themed/toast/index.tsx b/example/storybook-v7/src/core-components/themed/toast/index.tsx deleted file mode 100644 index 5e44f009e5..0000000000 --- a/example/storybook-v7/src/core-components/themed/toast/index.tsx +++ /dev/null @@ -1,298 +0,0 @@ -'use client'; -import { createToast, createToastHook } from '@gluestack-ui/toast'; -import { - AnimatePresence, - AnimatedView, -} from '@gluestack-style/animation-resolver'; -import { styled } from '@gluestack-style/react'; -import { Text, View } from 'react-native'; - -const StyledRoot = styled( - View, - { - px: '$4', - py: '$3', - borderRadius: '$sm', - flexDirection: 'row', - variants: { - action: { - error: { - bg: '$backgroundError', - borderColor: '$error300', - - _icon: { - color: '$error500', - }, - }, - warning: { - bg: '$backgroundWarning', - borderColor: '$warning300', - - _icon: { - color: '$warning500', - }, - }, - success: { - bg: '$backgroundSuccess', - borderColor: '$success300', - - _icon: { - color: '$success500', - }, - }, - info: { - bg: '$backgroundInfo', - borderColor: '$info300', - - _icon: { - color: '$info500', - }, - }, - attention: { - bg: '$backgroundMuted', - borderColor: '$secondary300', - - _icon: { - color: '$secondary600', - }, - }, - }, - - variant: { - solid: {}, - outline: { - borderWidth: '$1', - bg: '$white', - }, - accent: { - borderLeftWidth: '$4', - }, - }, - }, - m: '$3', - - _web: { - pointerEvents: 'auto', - }, - defaultProps: { - hardShadow: '5', - variant: 'solid', - action: 'attention', - }, - }, - { descendantStyle: ['_icon', '_title', '_description'] } -); -const StyledTitle = styled( - Text, - { - color: '$text700', - fontWeight: '$medium', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - props: { - size: 'md', - }, - }, - { ancestorStyle: ['_title'] } -); - -const StyledDescription = styled( - Text, - { - color: '$text700', - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - props: { - size: 'sm', - }, - }, - { ancestorStyle: ['_description'] } -); -const AnimationWrapper = styled(AnimatedView, {}); - -export const useToast = createToastHook(AnimationWrapper, AnimatePresence); - -export const Toast = createToast({ - Root: StyledRoot, - Title: StyledTitle, - Description: StyledDescription, -}); -export const ToastTitle = Toast.Title; -export const ToastDescription = Toast.Description; diff --git a/example/storybook-v7/src/core-components/themed/tooltip/index.tsx b/example/storybook-v7/src/core-components/themed/tooltip/index.tsx deleted file mode 100644 index b09ff557a7..0000000000 --- a/example/storybook-v7/src/core-components/themed/tooltip/index.tsx +++ /dev/null @@ -1,293 +0,0 @@ -'use client'; -import { createTooltip } from '@gluestack-ui/tooltip'; -import { - AnimatePresence, - AnimatedView, -} from '@gluestack-style/animation-resolver'; -import { styled } from '@gluestack-style/react'; -import { View, Text } from 'react-native'; - -const StyledRoot = styled( - View, - { - width: '$full', - height: '$full', - _web: { - pointerEvents: 'none', - }, - }, - {} -); - -const StyledContent = styled( - AnimatedView, - { - ':initial': { - opacity: 0, - scale: 0.5, - }, - - ':animate': { - opacity: 1, - scale: 1, - }, - - ':exit': { - opacity: 0, - scale: 0.5, - }, - - ':transition': { - type: 'spring', - damping: 18, - stiffness: 250, - // @ts-ignore - opacity: { - type: 'timing', - duration: 250, - }, - }, - - 'py': '$1', - 'px': '$3', - 'borderRadius': '$sm', - 'bg': '$background900', - - '_text': { - fontSize: '$xs', - color: '$text50', - }, - - '_web': { - pointerEvents: 'auto', - }, - - 'defaultProps': { - hardShadow: '2', - }, - }, - { - descendantStyle: ['_text'], - } -); - -const StyledText = styled( - Text, - { - color: '$text700', - flex: 1, - fontWeight: '$normal', - fontFamily: '$body', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - }, - { - ancestorStyle: ['_text'], - } -); -const StyledTooltipText = styled( - StyledText, - { - fontWeight: '$normal', - fontStyle: 'normal', - letterSpacing: '$md', - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, - size: { - '2xs': { - fontSize: '$2xs', - }, - 'xs': { - fontSize: '$xs', - }, - - 'sm': { - fontSize: '$sm', - }, - - 'md': { - fontSize: '$md', - }, - - 'lg': { - fontSize: '$lg', - }, - - 'xl': { - fontSize: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - }, - - '6xl': { - fontSize: '$6xl', - }, - }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, - }, - }, - - defaultProps: { - size: 'md', - }, - color: '$red400', - fontFamily: '$body', - _web: { - userSelect: 'none', - }, - }, - { - ancestorStyle: ['_text'], - } -); - -export const Tooltip = createTooltip({ - Root: StyledRoot, - Content: StyledContent, - Text: StyledTooltipText, - //@ts-ignore - AnimatePresence: AnimatePresence, -}); -export const TooltipContent = Tooltip.Content; -export const TooltipText = Tooltip.Text; diff --git a/example/storybook-v7/src/core-components/themed/view/index.tsx b/example/storybook-v7/src/core-components/themed/view/index.tsx deleted file mode 100644 index ae97908127..0000000000 --- a/example/storybook-v7/src/core-components/themed/view/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { View } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/themed/virtualized-list/index.tsx b/example/storybook-v7/src/core-components/themed/virtualized-list/index.tsx deleted file mode 100644 index b90d3a60f5..0000000000 --- a/example/storybook-v7/src/core-components/themed/virtualized-list/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { VirtualizedList } from 'react-native'; diff --git a/example/storybook-v7/src/core-components/themed/vstack/index.tsx b/example/storybook-v7/src/core-components/themed/vstack/index.tsx deleted file mode 100644 index 8ff64e08ef..0000000000 --- a/example/storybook-v7/src/core-components/themed/vstack/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -'use client'; -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -const StyledRoot = styled( - View, - { - flexDirection: 'column', - variants: { - space: { - 'xs': { - gap: `$1`, - }, - 'sm': { - gap: `$2`, - }, - 'md': { - gap: `$3`, - }, - 'lg': { - gap: `$4`, - }, - 'xl': { - gap: `$5`, - }, - '2xl': { - gap: `$6`, - }, - '3xl': { - gap: `$7`, - }, - '4xl': { - gap: `$8`, - }, - }, - reversed: { - true: { - flexDirection: 'column-reverse', - }, - }, - }, - }, - {} -); - -export const VStack = StyledRoot; diff --git a/example/storybook-v7/src/extra-components/nativewind/ComponentCard.tsx b/example/storybook-v7/src/extra-components/nativewind/ComponentCard.tsx deleted file mode 100644 index 720d26ea3a..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/ComponentCard.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { Box, Text, VStack } from '@gluestack/design-system'; -import NextLink from 'next/link'; - -export const ComponentCard = ({ - title, - child, - padding, - href, -}: { - title: string; - child: React.ReactNode; - padding?: string; - props?: any; - href: string; -}) => { - return ( - - - {child} - - - - - {title} - - - - - ); -}; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/AccordionDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/AccordionDemo.tsx deleted file mode 100644 index f482aa0a34..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/AccordionDemo.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, -} from '../../../core-components/nativewind'; -import { ChevronDownIcon } from 'lucide-react-native'; -import { ChevronUpIcon } from 'lucide-react-native'; -import { ScrollView } from '../../../core-components/nativewind'; -const AccordionDemo = () => { - const accRef = React.useRef(null); - return ( - - - - - - {(states: any) => ( - <> - - How do I place an order? - - {states.isExpanded ? ( - - ) : ( - - )} - - )} - - - - - You can place your order by clicking the "Order Now" button. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - We accept Visa, Mastercard, and American Express. - - - - - - ); -}; - -export default AccordionDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/ActionsheetDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/ActionsheetDemo.tsx deleted file mode 100644 index 671605f90f..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/ActionsheetDemo.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { - Button, - ButtonText, - Center, -} from '../../../core-components/nativewind'; -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, -} from '../../../core-components/nativewind/actionsheet'; - -const ActionsheetDemo = () => { - const [showActionsheet, setShowActionsheet] = React.useState(false); - - const handleClose = () => setShowActionsheet(false); - - return ( -
- - - - - - - - - Delete - - - Share - - - Play - - - Favourite - - - Cancel - - - -
- ); -}; - -export default ActionsheetDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/AlertDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/AlertDemo.tsx deleted file mode 100644 index d562f32cdf..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/AlertDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { - Alert, - AlertIcon, - AlertText, -} from '../../../core-components/nativewind'; -import { InfoIcon } from '../../../core-components/nativewind'; - -const AlertDemo = () => { - return ( - - - Selection successfully moved! - - ); -}; - -export default AlertDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/AlertDialogDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/AlertDialogDemo.tsx deleted file mode 100644 index de3b8e2691..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/AlertDialogDemo.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useState } from 'react'; -import { - Button, - ButtonText, - AlertDialog, - AlertDialogBackdrop, - AlertDialogContent, - AlertDialogHeader, - AlertDialogBody, - Text, - AlertDialogFooter, - AlertDialogCloseButton, -} from '../../../core-components/nativewind'; -import { Heading } from '../../../core-components/nativewind/heading'; -import { X } from 'lucide-react-native'; -import { OverlayProvider } from '@gluestack-ui/overlay'; - -const AlertDialogDemo = () => { - const [showAlertDialog, setShowAlertDialog] = useState(false); - const handleClose = () => setShowAlertDialog(!showAlertDialog); - return ( - - - - - - - Deactivate Account - - - - - - Are you sure you want to deactivate your account? - - - - - - - - - ); -}; - -export default AlertDialogDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/AvatarDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/AvatarDemo.tsx deleted file mode 100644 index b79d5e5e00..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/AvatarDemo.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { - Avatar, - AvatarBadge, - AvatarFallbackText, - AvatarImage, -} from '../../../core-components/nativewind/avatar'; -import React from 'react'; -const Avatardemo = () => { - return ( - - John Doe - - - - ); -}; - -export default Avatardemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/BadgeDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/BadgeDemo.tsx deleted file mode 100644 index d37dce7164..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/BadgeDemo.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { - Badge, - BadgeText, - BadgeIcon, -} from '../../../core-components/nativewind/badge'; -import { GlobeIcon } from '../../../core-components/nativewind/icon'; -const BadgeDemo = () => { - return ( - - Verified - - - ); -}; - -export default BadgeDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/BoxDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/BoxDemo.tsx deleted file mode 100644 index 43ce4baa79..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/BoxDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Box, Text } from '../../../core-components/nativewind'; -import React from 'react'; - -const BoxDemo = () => { - return ( - - This is the Box - - ); -}; - -export default BoxDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/ButtonDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/ButtonDemo.tsx deleted file mode 100644 index 0b5141430a..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/ButtonDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Button, ButtonText } from '../../../core-components/nativewind/button'; -import React from 'react'; - -const ButtonDemo = () => { - return ( - - ); -}; - -export default ButtonDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/CenterDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/CenterDemo.tsx deleted file mode 100644 index d90b542812..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/CenterDemo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Center } from '../../../core-components/nativewind/center'; -import { Text } from '../../../core-components/nativewind/text'; - -const CenterDemo = () => { - return ( -
- This is the center. -
- ); -}; - -export default CenterDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/CheckboxDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/CheckboxDemo.tsx deleted file mode 100644 index f4bb03aef1..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/CheckboxDemo.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { - CheckIcon, - Checkbox, - CheckboxIcon, - CheckboxIndicator, - CheckboxLabel, -} from '../../../core-components/nativewind'; -import React from 'react'; - -export const CheckboxDemo = () => { - return ( - - - - - Label - - ); -}; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/DividerDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/DividerDemo.tsx deleted file mode 100644 index 90d5d64810..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/DividerDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { HStack, Heading, Divider } from '../../../core-components/nativewind'; - -const DividerDemo = () => { - return ( - - - Firefox - - - - Chrome - - - ); -}; - -export default DividerDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/FabDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/FabDemo.tsx deleted file mode 100644 index 3904e44807..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/FabDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { - Fab, - FabIcon, - Box, - MenuIcon, - FabLabel, -} from '../../../core-components/nativewind'; -import React from 'react'; - -const FabDemo = () => { - return ( - - - - Menu - - - ); -}; - -export default FabDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/FormControlDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/FormControlDemo.tsx deleted file mode 100644 index d142213a43..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/FormControlDemo.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { - AlertCircleIcon, - FormControl, - FormControlHelper, - Input, - FormControlLabel, - FormControlLabelText, - FormControlHelperText, - FormControlError, - FormControlErrorText, - FormControlErrorIcon, - InputField, -} from '../../../core-components/nativewind'; -const FormControlDemo = () => { - return ( - - - Password - - - - - - - - Must be atleast 6 characters. - - - - - - - Atleast 6 characters are required. - - - - ); -}; - -export default FormControlDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/HStackDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/HStackDemo.tsx deleted file mode 100644 index 8d7c70939c..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/HStackDemo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Box, HStack } from '../../../core-components/nativewind'; - -const HStackDemo = () => { - return ( - - - - - - ); -}; - -export default HStackDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/HeadingDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/HeadingDemo.tsx deleted file mode 100644 index 7bc66824f7..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/HeadingDemo.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Heading } from '../../../core-components/nativewind'; -const HeadingDemo = () => { - return I am a Heading; -}; - -export default HeadingDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/IconDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/IconDemo.tsx deleted file mode 100644 index b001194c12..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/IconDemo.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { EditIcon, Icon } from '../../../core-components/nativewind'; - -const IconDemo = () => { - return ; -}; -export default IconDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/ImageDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/ImageDemo.tsx deleted file mode 100644 index e3000abdaf..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/ImageDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Image } from '../../../core-components/nativewind'; - -const ImageDemo = () => { - return ( - - ); -}; - -export default ImageDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/InputDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/InputDemo.tsx deleted file mode 100644 index 75fc3b6b56..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/InputDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { - Input, - InputField, - InputIcon, - InputSlot, - SearchIcon, -} from '../../../core-components/nativewind'; -import React from 'react'; - -const InputDemo = () => { - return ( - - - - - - - ); -}; - -export default InputDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/LinkDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/LinkDemo.tsx deleted file mode 100644 index 1671cee884..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/LinkDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Link, LinkText } from '../../../core-components/nativewind'; - -const LinkDemo = () => { - return ( - - gluestack - - ); -}; - -export default LinkDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/MenuDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/MenuDemo.tsx deleted file mode 100644 index fbea220e61..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/MenuDemo.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { - Menu, - Button, - MenuItem, - Icon, - MenuItemLabel, - GlobeIcon, - ButtonText, -} from '../../../core-components/nativewind'; -import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; -import React from 'react'; - -const MenuDemo = () => { - return ( - { - return ( - - ); - }} - > - - - Community - - - - Settings - - - - Plugins - - - ); -}; - -export default MenuDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/ModalDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/ModalDemo.tsx deleted file mode 100644 index 39cde8f26c..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/ModalDemo.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { - Heading, - ModalBackdrop, - Button, - ButtonText, - Modal, - ModalContent, - ModalHeader, - ModalCloseButton, - Icon, - CloseIcon, - ModalBody, - Text, - ModalFooter, -} from '../../../core-components/nativewind'; -import React, { useState } from 'react'; -import { OverlayProvider } from '@gluestack-ui/overlay'; - -const ModalDemo = () => { - const [showModal, setShowModal] = useState(false); - const ref = React.useRef(null); - return ( - - - { - setShowModal(false); - }} - size="lg" - finalFocusRef={ref} - > - - - - Engage with Modals - - - - - - Elevate user interactions - - - - - - - - - ); -}; - -export default ModalDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/PopoverDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/PopoverDemo.tsx deleted file mode 100644 index a2f6a80a92..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/PopoverDemo.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { - Avatar, - Box, - Popover, - Pressable, - Text, - PopoverContent, - AvatarFallbackText, - PopoverBody, - HStack, - CircleIcon, -} from '../../../core-components/nativewind'; -import React from 'react'; - -const PopoverDemo = () => { - const [showPopover, setShowPopover] = React.useState(true); - - return ( - - { - return ( - { - setShowPopover(!showPopover); - }} - > - - Kevin James - - - ); - }} - > - - - - Kevin James - - - - - Active - - - - - - - ); -}; - -export default PopoverDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/PressableDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/PressableDemo.tsx deleted file mode 100644 index 61312fddaa..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/PressableDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Pressable, Text } from '../../../core-components/nativewind'; -import React from 'react'; - -const PressableDemo = () => { - return ( - console.log('Hello')} - className="p-5 bg-primary-500" - > - Press me - - ); -}; - -export default PressableDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/ProgressDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/ProgressDemo.tsx deleted file mode 100644 index 64523b55f6..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/ProgressDemo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { - Progress, - ProgressFilledTrack, -} from '../../../core-components/nativewind'; -const ProgressDemo = () => { - return ( - - - - ); -}; - -export default ProgressDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/RadioDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/RadioDemo.tsx deleted file mode 100644 index 1f82b7020a..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/RadioDemo.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState } from 'react'; -import { - CircleIcon, - Radio, - RadioGroup, - RadioIcon, - RadioIndicator, - RadioLabel, - VStack, -} from '../../../core-components/nativewind'; - -const RadioDemo = () => { - const [values, setValues] = useState('Monday'); - return ( - - - - Option A - - - - - - Option B - - - - - - - ); -}; - -export default RadioDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/SelectDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/SelectDemo.tsx deleted file mode 100644 index b2b25327ab..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/SelectDemo.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { - ChevronDownIcon, - Icon, - Select, - SelectTrigger, - SelectInput, - SelectIcon, - SelectPortal, - SelectBackdrop, - SelectContent, - SelectDragIndicatorWrapper, - SelectDragIndicator, - SelectItem, -} from '../../../core-components/nativewind'; - -const SelectDemo = () => { - return ( - - ); -}; - -export default SelectDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/SliderDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/SliderDemo.tsx deleted file mode 100644 index ef9b08a773..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/SliderDemo.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { - Slider, - SliderFilledTrack, - SliderThumb, - SliderTrack, -} from '../../../core-components/nativewind'; -import React from 'react'; - -export const SliderDemo = () => { - return ( - - - - - - - ); -}; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/SpinnerDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/SpinnerDemo.tsx deleted file mode 100644 index b4b6a489a7..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/SpinnerDemo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Spinner } from '../../../core-components/nativewind'; - -const SpinnerDemo = () => { - return ; -}; - -export default SpinnerDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/SwitchDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/SwitchDemo.tsx deleted file mode 100644 index b0e55cb9c5..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/SwitchDemo.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import colors from 'tailwindcss/colors'; -import { HStack, Switch, Text } from '../../../core-components/nativewind'; - -const SwitchDemo = () => { - return ( - - - Allow notifications - - ); -}; - -export default SwitchDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/TeaxtAreaDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/TeaxtAreaDemo.tsx deleted file mode 100644 index 20af0dbdc7..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/TeaxtAreaDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Textarea, TextareaInput } from '../../../core-components/nativewind'; -import React from 'react'; - -const TextAreaDemo = () => { - return ( - - ); -}; - -export default TextAreaDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/TextDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/TextDemo.tsx deleted file mode 100644 index 8cfd347d93..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/TextDemo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Text } from '../../../core-components/nativewind'; - -const TextDemo = () => { - return Hello World!; -}; - -export default TextDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/ToastDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/ToastDemo.tsx deleted file mode 100644 index f8e346436a..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/ToastDemo.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { - Toast, - ToastDescription, - ToastTitle, - VStack, -} from '../../../core-components/nativewind'; -import React from 'react'; - -const ToastDemo = () => { - return ( - - - Info - Add a note here - - - ); -}; - -export default ToastDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/TooltipDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/TooltipDemo.tsx deleted file mode 100644 index a7cad34ea9..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/TooltipDemo.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - Tooltip, - TooltipContent, - TooltipText, - Button, - ButtonText, -} from '../../../core-components/nativewind'; -import React from 'react'; - -const TooltipDemo = () => { - return ( - { - return ( - - ); - }} - > - - Tooltip - - - ); -}; - -export default TooltipDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/Demos/VStackDemo.tsx b/example/storybook-v7/src/extra-components/nativewind/Demos/VStackDemo.tsx deleted file mode 100644 index a94eec0c13..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Demos/VStackDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Box, VStack } from '../../../core-components/nativewind'; - -const VStackDemo = () => { - return ( - - - - - - ); -}; - -export default VStackDemo; diff --git a/example/storybook-v7/src/extra-components/nativewind/GradientImage.tsx b/example/storybook-v7/src/extra-components/nativewind/GradientImage.tsx deleted file mode 100644 index 7654ec4aa8..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/GradientImage.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Image, Center } from '../../core-components/nativewind'; -import React, { useContext } from 'react'; -import { LayoutContext } from '@gluestack/design-system'; - -const GradientImage = () => { - const { colorMode } = useContext(LayoutContext); - - return ( -
- linear-gradient -
- ); -}; -export default GradientImage; diff --git a/example/storybook-v7/src/extra-components/nativewind/Grid.tsx b/example/storybook-v7/src/extra-components/nativewind/Grid.tsx deleted file mode 100644 index ea5130412b..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/Grid.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { Box } from '@gluestack-ui/themed'; -import { ComponentCard } from './ComponentCard'; -import { content } from './content'; - -export const Grid = () => { - return ( - <> - - {content.map((item, index) => ( - - ))} - - - ); -}; diff --git a/example/storybook-v7/src/extra-components/nativewind/content.tsx b/example/storybook-v7/src/extra-components/nativewind/content.tsx deleted file mode 100644 index 672300f4ba..0000000000 --- a/example/storybook-v7/src/extra-components/nativewind/content.tsx +++ /dev/null @@ -1,229 +0,0 @@ -import React from 'react'; -import SelectDemo from './Demos/SelectDemo'; -import { CheckboxDemo } from './Demos/CheckboxDemo'; -import { SliderDemo } from './Demos/SliderDemo'; -import FormControlDemo from './Demos/FormControlDemo'; -import BadgeDemo from './Demos/BadgeDemo'; -import ToastDemo from './Demos/ToastDemo'; -import AvatarDemo from './Demos/AvatarDemo'; -import HeadingDemo from './Demos/HeadingDemo'; -import TextDemo from './Demos/TextDemo'; -import BoxDemo from './Demos/BoxDemo'; -import DividerDemo from './Demos/DividerDemo'; -import HStackDemo from './Demos/HStackDemo'; -import VStackDemo from './Demos/VStackDemo'; -import AlertDemo from './Demos/AlertDemo'; -import ProgressDemo from './Demos/ProgressDemo'; -import SpinnerDemo from './Demos/SpinnerDemo'; -import ButtonDemo from './Demos/ButtonDemo'; -import InputDemo from './Demos/InputDemo'; -import LinkDemo from './Demos/LinkDemo'; -import PressableDemo from './Demos/PressableDemo'; -import RadioDemo from './Demos/RadioDemo'; -import SwitchDemo from './Demos/SwitchDemo'; -import TextAreaDemo from './Demos/TeaxtAreaDemo'; -import TooltipDemo from './Demos/TooltipDemo'; -import IconDemo from './Demos/IconDemo'; -import ImageDemo from './Demos/ImageDemo'; -import FabDemo from './Demos/FabDemo'; -import CenterDemo from './Demos/CenterDemo'; -import AlertDialogDemo from './Demos/AlertDialogDemo'; -import ModalDemo from './Demos/ModalDemo'; -import AccordionDemo from './Demos/AccordionDemo'; -// import MenuDemo from './Demos/MenuDemo'; -// import PopoverDemo from './Demos/PopoverDemo'; -import ActionsheetDemo from './Demos/ActionsheetDemo'; - -export const content = [ - { - title: 'Actionsheet', - child: , - padding: '$0', - href: '/ui/nativewind/docs/components/actionsheet', - }, - { - title: 'AlertDialog', - child: , - padding: '$0', - href: '/ui/nativewind/docs/components/alert-dialog', - }, - { - title: 'Alert', - child: , - href: '/ui/nativewind/docs/components/alert', - }, - { - title: 'Avatar', - child: , - href: '/ui/nativewind/docs/components/avatar', - }, - { - title: 'Accordion', - child: , - href: '/ui/nativewind/docs/components/accordion', - }, - - { - title: 'Badge', - child: , - href: '/ui/nativewind/docs/components/badge', - }, - { - title: 'Box', - child: , - href: '/ui/nativewind/docs/components/box', - }, - { - title: 'Button', - child: , - href: '/ui/nativewind/docs/components/button', - }, - - { - title: 'Center', - child: , - href: '/ui/nativewind/docs/components/center', - }, - { - title: 'Checkbox', - child: , - href: '/ui/nativewind/docs/components/checkbox', - }, - - { - title: 'Divider', - child: , - href: '/ui/nativewind/docs/components/divider', - }, - - { - title: 'Fab', - child: , - href: '/ui/nativewind/docs/components/others/fab', - }, - { - title: 'FormControl', - child: , - href: '/ui/nativewind/docs/components/form-control', - }, - { - title: 'Heading', - child: , - href: '/ui/nativewind/docs/components/heading', - }, - { - title: 'HStack', - child: , - href: '/ui/nativewind/docs/components/hstack', - }, - - { - title: 'Icon', - child: , - href: '/ui/nativewind/docs/components/icon', - }, - { - title: 'Image', - child: , - href: '/ui/nativewind/docs/components/image', - }, - { - title: 'Input', - child: , - href: '/ui/nativewind/docs/components/input', - }, - - { - title: 'Link', - child: , - href: '/ui/nativewind/docs/components/link', - }, - - // { - // title: 'Menu', - // child: , - // padding: '$0', - // href: '/ui/nativewind/docs/components/menu', - // }, - - { - title: 'Modal', - child: , - padding: '$0', - href: '/ui/nativewind/docs/components/modal', - }, - - // { - // title: 'Popover', - // child: , - // padding: '$0', - // href: '/ui/nativewind/docs/components/popover', - // }, - - { - title: 'Pressable', - child: , - href: '/ui/nativewind/docs/components/pressable', - }, - { - title: 'Progress', - child: , - href: '/ui/nativewind/docs/components/progress', - }, - - { - title: 'Radio', - child: , - href: '/ui/nativewind/docs/components/radio', - }, - - { - title: 'Select', - child: , - href: '/ui/nativewind/docs/components/select', - }, - - { - title: 'Slider', - child: , - href: '/ui/nativewind/docs/components/slider', - }, - { - title: 'Spinner', - child: , - href: '/ui/nativewind/docs/components/spinner', - }, - { - title: 'Switch', - child: , - href: '/ui/nativewind/docs/components/switch', - }, - - { - title: 'Text', - child: , - href: '/ui/nativewind/docs/components/text', - }, - { - title: 'TextArea', - child: , - href: '/ui/nativewind/docs/components/textarea', - }, - { - title: 'Toast', - child: , - href: '/ui/nativewind/docs/components/toast', - }, - - { - title: 'Tooltip', - child: , - href: '/ui/nativewind/docs/components/tooltip', - }, - - { - title: 'VStack', - child: , - href: '/ui/nativewind/docs/components/vstack', - }, -]; diff --git a/example/storybook-v7/src/extra-components/themed/ComponentCard.tsx b/example/storybook-v7/src/extra-components/themed/ComponentCard.tsx deleted file mode 100644 index 637d284caf..0000000000 --- a/example/storybook-v7/src/extra-components/themed/ComponentCard.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { Box, Text, VStack } from '@gluestack/design-system'; -import NextLink from 'next/link'; - -export const ComponentCard = ({ - title, - child, - padding, - href, -}: { - title: string; - child: React.ReactNode; - padding?: string; - props?: any; - href: string; -}) => { - return ( - - - {child} - - - - - {title} - - - - - ); -}; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/AccordionDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/AccordionDemo.tsx deleted file mode 100644 index e05e0d0405..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/AccordionDemo.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, -} from '../../../core-components/themed'; -import { ChevronDownIcon } from 'lucide-react-native'; -import { ChevronUpIcon } from 'lucide-react-native'; -import { ScrollView } from '../../../core-components/themed'; -const AccordionDemo = () => { - const accRef = React.useRef(null); - return ( - - - - - - {(states: any) => ( - <> - - How do I place an order? - - {states.isExpanded ? ( - - ) : ( - - )} - - )} - - - - - You can place your order by clicking the "Order Now" button. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - We accept Visa, Mastercard, and American Express. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - Can I cancel my subscription at any time? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Yes, you can cancel your subscription at any time. - - - - - - ); -}; - -export default AccordionDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/ActionsheetDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/ActionsheetDemo.tsx deleted file mode 100644 index 865594a626..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/ActionsheetDemo.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import { Button, ButtonText, Center } from '../../../core-components/themed'; -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, -} from '../../../core-components/themed/actionsheet'; - -const ActionsheetDemo = () => { - const [showActionsheet, setShowActionsheet] = React.useState(false); - - const handleClose = () => setShowActionsheet(false); - - return ( -
- - - - - - - - - Delete - - - Share - - - Play - - - Favourite - - - Cancel - - - -
- ); -}; - -export default ActionsheetDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/AlertDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/AlertDemo.tsx deleted file mode 100644 index 86fed1b53a..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/AlertDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { - Alert, - AlertIcon, - AlertText, -} from '../../../core-components/themed/alert'; -import { InfoIcon } from '../../../core-components/themed'; - -const AlertDemo = () => { - return ( - - - Selection successfully moved! - - ); -}; - -export default AlertDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/AlertDialogDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/AlertDialogDemo.tsx deleted file mode 100644 index a7a3a53e43..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/AlertDialogDemo.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React, { useState } from 'react'; -import { - Button, - ButtonGroup, - ButtonText, - AlertDialog, - AlertDialogBackdrop, - AlertDialogContent, - AlertDialogHeader, - AlertDialogBody, - Text, - AlertDialogFooter, - AlertDialogCloseButton, - CloseIcon, - Icon, -} from '../../../core-components/themed'; -import { Heading } from '../../../core-components/themed/heading'; -import { OverlayProvider } from '@gluestack-ui/overlay'; - -const AlertDialogDemo = () => { - const [showAlertDialog, setShowAlertDialog] = useState(false); - const handleClose = () => setShowAlertDialog(!showAlertDialog); - return ( - - - - - - - Return Policy - - - - - - Whoa, slow down there! - - - - - - - - - - - ); -}; - -export default AlertDialogDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/AvatarDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/AvatarDemo.tsx deleted file mode 100644 index e38ff5ec07..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/AvatarDemo.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { - Avatar, - AvatarBadge, - AvatarFallbackText, - AvatarImage, -} from '../../../core-components/themed/avatar'; -import React from 'react'; -const Avatardemo = () => { - return ( - - John Doe - - - - ); -}; - -export default Avatardemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/BadgeDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/BadgeDemo.tsx deleted file mode 100644 index bd2f5f07ee..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/BadgeDemo.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { - Badge, - BadgeText, - BadgeIcon, -} from '../../../core-components/themed/badge'; -import { GlobeIcon } from '../../../core-components/themed/icon'; -const BadgeDemo = () => { - return ( - - Verified - - - ); -}; - -export default BadgeDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/BoxDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/BoxDemo.tsx deleted file mode 100644 index bf5bae7f2c..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/BoxDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Box, Text } from '../../../core-components/themed'; -import React from 'react'; - -const BoxDemo = () => { - return ( - - - This is the Box - - - ); -}; - -export default BoxDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/ButtonDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/ButtonDemo.tsx deleted file mode 100644 index 29613be6e1..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/ButtonDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Button, ButtonText } from '../../../core-components/themed/button'; -import React from 'react'; - -const ButtonDemo = () => { - return ( - - ); -}; - -export default ButtonDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/CenterDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/CenterDemo.tsx deleted file mode 100644 index 62de85a057..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/CenterDemo.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { Center } from '../../../core-components/themed/center'; -import { Text } from '../../../core-components/themed/text'; - -const CenterDemo = () => { - return ( -
- - This is the center. - -
- ); -}; - -export default CenterDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/CheckboxDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/CheckboxDemo.tsx deleted file mode 100644 index c4786c277e..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/CheckboxDemo.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { - CheckIcon, - Checkbox, - CheckboxIcon, - CheckboxIndicator, - CheckboxLabel, -} from '../../../core-components/themed'; -import React from 'react'; - -export const CheckboxDemo = () => { - return ( - - - - - Label - - ); -}; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/DividerDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/DividerDemo.tsx deleted file mode 100644 index 29693ed317..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/DividerDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { VStack, Heading, Divider } from '../../../core-components/themed'; - -const DividerDemo = () => { - return ( - - - Firefox - - - - Chrome - - - ); -}; - -export default DividerDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/FabDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/FabDemo.tsx deleted file mode 100644 index 732f9cf9a4..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/FabDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { - Fab, - FabIcon, - Box, - MenuIcon, - FabLabel, -} from '../../../core-components/themed'; -import React from 'react'; - -const FabDemo = () => { - return ( - - - - Menu - - - ); -}; - -export default FabDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/FormControlDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/FormControlDemo.tsx deleted file mode 100644 index 939e263e8c..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/FormControlDemo.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { - AlertCircleIcon, - FormControl, - FormControlHelper, - Input, - FormControlLabel, - FormControlLabelText, - FormControlHelperText, - FormControlError, - FormControlErrorText, - FormControlErrorIcon, - InputField, -} from '../../../core-components/themed'; -const FormControlDemo = () => { - return ( - - - Password - - - - - - - - Must be atleast 6 characters. - - - - - - - Atleast 6 characters are required. - - - - ); -}; - -export default FormControlDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/HStackDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/HStackDemo.tsx deleted file mode 100644 index 54b36fd920..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/HStackDemo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Box, HStack } from '../../../core-components/themed'; - -const HStackDemo = () => { - return ( - - - - - - ); -}; - -export default HStackDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/HeadingDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/HeadingDemo.tsx deleted file mode 100644 index 4c988a7a24..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/HeadingDemo.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Heading } from '../../../core-components/themed'; -const HeadingDemo = () => { - return I am a Heading; -}; - -export default HeadingDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/IconDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/IconDemo.tsx deleted file mode 100644 index 076208b272..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/IconDemo.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { EditIcon, Icon } from '../../../core-components/themed'; - -const IconDemo = () => { - return ; -}; -export default IconDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/ImageDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/ImageDemo.tsx deleted file mode 100644 index fed30b6147..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/ImageDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Image } from '../../../core-components/themed'; - -const ImageDemo = () => { - return ( - - ); -}; - -export default ImageDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/InputDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/InputDemo.tsx deleted file mode 100644 index fb873e873f..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/InputDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { - Input, - InputField, - InputIcon, - InputSlot, - SearchIcon, -} from '../../../core-components/themed'; -import React from 'react'; - -const InputDemo = () => { - return ( - - - - - - - ); -}; - -export default InputDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/LinkDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/LinkDemo.tsx deleted file mode 100644 index 37f608580a..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/LinkDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Link, LinkText } from '../../../core-components/themed'; - -const LinkDemo = () => { - return ( - - gluestack - - ); -}; - -export default LinkDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/MenuDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/MenuDemo.tsx deleted file mode 100644 index f4ad3b23e7..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/MenuDemo.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { - Menu, - Button, - MenuItem, - Icon, - MenuItemLabel, - GlobeIcon, - ButtonText, -} from '../../../core-components/themed'; -import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; -import React from 'react'; - -const MenuDemo = () => { - return ( - { - return ( - - ); - }} - > - - - Community - - - - Settings - - - - Plugins - - - ); -}; - -export default MenuDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/ModalDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/ModalDemo.tsx deleted file mode 100644 index 0592aa310b..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/ModalDemo.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { - Heading, - ModalBackdrop, - Button, - ButtonText, - Modal, - ModalContent, - ModalHeader, - ModalCloseButton, - Icon, - CloseIcon, - ModalBody, - Text, - ModalFooter, -} from '../../../core-components/themed'; -import React, { useState } from 'react'; -import { OverlayProvider } from '@gluestack-ui/overlay'; - -const ModalDemo = () => { - const [showModal, setShowModal] = useState(false); - const ref = React.useRef(null); - return ( - - - { - setShowModal(false); - }} - finalFocusRef={ref} - size="lg" - > - - - - Engage with Modals - - - - - - Elevate user interactions. - - - - - - - - - ); -}; - -export default ModalDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/PopoverDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/PopoverDemo.tsx deleted file mode 100644 index a599bfade0..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/PopoverDemo.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { - Avatar, - Box, - Popover, - Pressable, - Text, - PopoverContent, - AvatarFallbackText, - PopoverBody, - HStack, - CircleIcon, -} from '../../../core-components/themed'; -import React from 'react'; - -const PopoverDemo = () => { - const [showPopover, setShowPopover] = React.useState(true); - - return ( - - { - return ( - { - setShowPopover(!showPopover); - }} - > - - Kevin James - - - ); - }} - > - - - - Kevin James - - - - - Active - - - - - - - ); -}; - -export default PopoverDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/PressableDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/PressableDemo.tsx deleted file mode 100644 index cf6050ef21..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/PressableDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Pressable, Text } from '../../../core-components/themed'; -import React from 'react'; - -const PressableDemo = () => { - return ( - - - Press me - - - ); -}; - -export default PressableDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/ProgressDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/ProgressDemo.tsx deleted file mode 100644 index e81f4ba2e3..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/ProgressDemo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Progress, ProgressFilledTrack } from '../../../core-components/themed'; -const ProgressDemo = () => { - return ( - - - - ); -}; - -export default ProgressDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/RadioDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/RadioDemo.tsx deleted file mode 100644 index f04257c298..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/RadioDemo.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState } from 'react'; -import { - CircleIcon, - Radio, - RadioGroup, - RadioIcon, - RadioIndicator, - RadioLabel, - VStack, -} from '../../../core-components/themed'; - -const RadioDemo = () => { - const [values, setValues] = useState('Monday'); - return ( - - - - Option A - - - - - - Option B - - - - - - - ); -}; - -export default RadioDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/SelectDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/SelectDemo.tsx deleted file mode 100644 index 08f45aa4dd..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/SelectDemo.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { - ChevronDownIcon, - Icon, - Select, - SelectTrigger, - SelectInput, - SelectIcon, - SelectPortal, - SelectBackdrop, - SelectContent, - SelectDragIndicatorWrapper, - SelectDragIndicator, - SelectItem, -} from '../../../core-components/themed'; - -const SelectDemo = () => { - return ( - - ); -}; - -export default SelectDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/SliderDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/SliderDemo.tsx deleted file mode 100644 index 6056ab8047..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/SliderDemo.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { - Slider, - SliderFilledTrack, - SliderThumb, - SliderTrack, -} from '../../../core-components/themed'; -import React from 'react'; - -export const SliderDemo = () => { - return ( - - - - - - - ); -}; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/SpinnerDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/SpinnerDemo.tsx deleted file mode 100644 index 359b860e99..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/SpinnerDemo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Spinner } from '../../../core-components/themed'; - -const SpinnerDemo = () => { - return ; -}; - -export default SpinnerDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/SwitchDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/SwitchDemo.tsx deleted file mode 100644 index c9d777903a..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/SwitchDemo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { HStack, Switch, Text } from '../../../core-components/themed'; - -const SwitchDemo = () => { - return ( - - - Allow notifications - - ); -}; - -export default SwitchDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/TeaxtAreaDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/TeaxtAreaDemo.tsx deleted file mode 100644 index 56f9757da2..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/TeaxtAreaDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Textarea, TextareaInput } from '../../../core-components/themed'; -import React from 'react'; - -const TextAreaDemo = () => { - return ( - - ); -}; - -export default TextAreaDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/TextDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/TextDemo.tsx deleted file mode 100644 index 9395dfe3c2..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/TextDemo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Text } from '../../../core-components/themed'; - -const TextDemo = () => { - return Hello World!; -}; - -export default TextDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/ToastDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/ToastDemo.tsx deleted file mode 100644 index bb8bd27755..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/ToastDemo.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { - Toast, - ToastDescription, - ToastTitle, - VStack, -} from '../../../core-components/themed'; -import React from 'react'; - -const ToastDemo = () => { - return ( - - - Info - Add a note here - - - ); -}; - -export default ToastDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/TooltipDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/TooltipDemo.tsx deleted file mode 100644 index b9a52ad856..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/TooltipDemo.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - Tooltip, - TooltipContent, - TooltipText, - Button, - ButtonText, -} from '../../../core-components/themed'; -import React from 'react'; - -const TooltipDemo = () => { - return ( - { - return ( - - ); - }} - > - - Tooltip - - - ); -}; - -export default TooltipDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Demos/VStackDemo.tsx b/example/storybook-v7/src/extra-components/themed/Demos/VStackDemo.tsx deleted file mode 100644 index 5503e326e7..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Demos/VStackDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Box, VStack } from '../../../core-components/themed'; - -const VStackDemo = () => { - return ( - - - - - - ); -}; - -export default VStackDemo; diff --git a/example/storybook-v7/src/extra-components/themed/Grid.tsx b/example/storybook-v7/src/extra-components/themed/Grid.tsx deleted file mode 100644 index ea5130412b..0000000000 --- a/example/storybook-v7/src/extra-components/themed/Grid.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { Box } from '@gluestack-ui/themed'; -import { ComponentCard } from './ComponentCard'; -import { content } from './content'; - -export const Grid = () => { - return ( - <> - - {content.map((item, index) => ( - - ))} - - - ); -}; diff --git a/example/storybook-v7/src/extra-components/themed/content.tsx b/example/storybook-v7/src/extra-components/themed/content.tsx deleted file mode 100644 index 0bfdc023ae..0000000000 --- a/example/storybook-v7/src/extra-components/themed/content.tsx +++ /dev/null @@ -1,229 +0,0 @@ -import React from 'react'; -import SelectDemo from './Demos/SelectDemo'; -import { CheckboxDemo } from './Demos/CheckboxDemo'; -import { SliderDemo } from './Demos/SliderDemo'; -import FormControlDemo from './Demos/FormControlDemo'; -import BadgeDemo from './Demos/BadgeDemo'; -import ToastDemo from './Demos/ToastDemo'; -import AvatarDemo from './Demos/AvatarDemo'; -import HeadingDemo from './Demos/HeadingDemo'; -import TextDemo from './Demos/TextDemo'; -import BoxDemo from './Demos/BoxDemo'; -import DividerDemo from './Demos/DividerDemo'; -import HStackDemo from './Demos/HStackDemo'; -import VStackDemo from './Demos/VStackDemo'; -import AlertDemo from './Demos/AlertDemo'; -import ProgressDemo from './Demos/ProgressDemo'; -import SpinnerDemo from './Demos/SpinnerDemo'; -import ButtonDemo from './Demos/ButtonDemo'; -import InputDemo from './Demos/InputDemo'; -import LinkDemo from './Demos/LinkDemo'; -import PressableDemo from './Demos/PressableDemo'; -import RadioDemo from './Demos/RadioDemo'; -import SwitchDemo from './Demos/SwitchDemo'; -import TextAreaDemo from './Demos/TeaxtAreaDemo'; -import TooltipDemo from './Demos/TooltipDemo'; -import IconDemo from './Demos/IconDemo'; -import ImageDemo from './Demos/ImageDemo'; -import FabDemo from './Demos/FabDemo'; -import CenterDemo from './Demos/CenterDemo'; -import AlertDialogDemo from './Demos/AlertDialogDemo'; -import ModalDemo from './Demos/ModalDemo'; -import AccordionDemo from './Demos/AccordionDemo'; -// import MenuDemo from './Demos/MenuDemo'; -// import PopoverDemo from './Demos/PopoverDemo'; -import ActionsheetDemo from './Demos/ActionsheetDemo'; - -export const content = [ - { - title: 'Actionsheet', - child: , - padding: '$0', - href: '/ui/gluestack-style/docs/components/actionsheet', - }, - { - title: 'AlertDialog', - child: , - padding: '$0', - href: '/ui/gluestack-style/docs/components/alert-dialog', - }, - { - title: 'Alert', - child: , - href: '/ui/gluestack-style/docs/components/alert', - }, - { - title: 'Avatar', - child: , - href: '/ui/gluestack-style/docs/components/avatar', - }, - { - title: 'Accordion', - child: , - href: '/ui/gluestack-style/docs/components/accordion', - }, - - { - title: 'Badge', - child: , - href: '/ui/gluestack-style/docs/components/badge', - }, - { - title: 'Box', - child: , - href: '/ui/gluestack-style/docs/components/box', - }, - { - title: 'Button', - child: , - href: '/ui/gluestack-style/docs/components/button', - }, - - { - title: 'Center', - child: , - href: '/ui/gluestack-style/docs/components/center', - }, - { - title: 'Checkbox', - child: , - href: '/ui/gluestack-style/docs/components/checkbox', - }, - - { - title: 'Divider', - child: , - href: '/ui/gluestack-style/docs/components/divider', - }, - - { - title: 'Fab', - child: , - href: '/ui/gluestack-style/docs/components/others/fab', - }, - { - title: 'FormControl', - child: , - href: '/ui/gluestack-style/docs/components/form-control', - }, - { - title: 'Heading', - child: , - href: '/ui/gluestack-style/docs/components/heading', - }, - { - title: 'HStack', - child: , - href: '/ui/gluestack-style/docs/components/hstack', - }, - - { - title: 'Icon', - child: , - href: '/ui/gluestack-style/docs/components/icon', - }, - { - title: 'Image', - child: , - href: '/ui/gluestack-style/docs/components/image', - }, - { - title: 'Input', - child: , - href: '/ui/gluestack-style/docs/components/input', - }, - - { - title: 'Link', - child: , - href: '/ui/gluestack-style/docs/components/link', - }, - - // { - // title: 'Menu', - // child: , - // padding: '$0', - // href: '/ui/gluestack-style/docs/components/menu', - // }, - - { - title: 'Modal', - child: , - padding: '$0', - href: '/ui/gluestack-style/docs/components/modal', - }, - - // { - // title: 'Popover', - // child: , - // padding: '$0', - // href: '/ui/gluestack-style/docs/components/popover', - // }, - - { - title: 'Pressable', - child: , - href: '/ui/gluestack-style/docs/components/pressable', - }, - { - title: 'Progress', - child: , - href: '/ui/gluestack-style/docs/components/progress', - }, - - { - title: 'Radio', - child: , - href: '/ui/gluestack-style/docs/components/radio', - }, - - { - title: 'Select', - child: , - href: '/ui/gluestack-style/docs/components/select', - }, - - { - title: 'Slider', - child: , - href: '/ui/gluestack-style/docs/components/slider', - }, - { - title: 'Spinner', - child: , - href: '/ui/gluestack-style/docs/components/spinner', - }, - { - title: 'Switch', - child: , - href: '/ui/gluestack-style/docs/components/switch', - }, - - { - title: 'Text', - child: , - href: '/ui/gluestack-style/docs/components/text', - }, - { - title: 'TextArea', - child: , - href: '/ui/gluestack-style/docs/components/textarea', - }, - { - title: 'Toast', - child: , - href: '/ui/gluestack-style/docs/components/toast', - }, - - { - title: 'Tooltip', - child: , - href: '/ui/gluestack-style/docs/components/tooltip', - }, - - { - title: 'VStack', - child: , - href: '/ui/gluestack-style/docs/components/vstack', - }, -]; diff --git a/example/storybook-v7/src/guides/more/Changelog/index.stories.mdx b/example/storybook-v7/src/guides/more/Changelog/index.stories.mdx deleted file mode 100644 index b01b03ac9e..0000000000 --- a/example/storybook-v7/src/guides/more/Changelog/index.stories.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Changelog | gluestack-ui -description: A quick look on gluestack-ui changelog. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Changelog - -To view changelog, please visit [GitHub releases](https://github.com/gluestack/gluestack-ui/releases). diff --git a/example/storybook-v7/src/guides/recipes/linear-gradient/expo-linear-gradient.tsx b/example/storybook-v7/src/guides/recipes/linear-gradient/expo-linear-gradient.tsx deleted file mode 100644 index 4473b77af0..0000000000 --- a/example/storybook-v7/src/guides/recipes/linear-gradient/expo-linear-gradient.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client'; -import React from 'react'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { LinearGradient as ExpoLinearGradient } from 'expo-linear-gradient'; -import { cssInterop } from 'nativewind'; - -cssInterop(ExpoLinearGradient, { - className: 'style', -}); - -const linearGradientStyle = tva({ - base: '', -}); - -export const LinearGradient = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - return ( - - ); - } -); diff --git a/example/storybook-v7/src/guides/recipes/linear-gradient/index.nw.stories.mdx b/example/storybook-v7/src/guides/recipes/linear-gradient/index.nw.stories.mdx deleted file mode 100644 index 2eee44a6ae..0000000000 --- a/example/storybook-v7/src/guides/recipes/linear-gradient/index.nw.stories.mdx +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: gluestack-ui LinearGradient | Installation, Usage, and API - -description: A LinearGradient component is a reusable graphical element that helps create linear gradients as background or styling effects within UI elements. A linear gradient is a gradual transition between two or more colors, creating a smooth progression of color changes along a straight line. - -pageTitle: LinearGradient - -pageDescription: A LinearGradient component is a reusable graphical element that helps create linear gradients as background or styling effects within UI elements. A linear gradient is a gradual transition between two or more colors, creating a smooth progression of color changes along a straight line. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { Tabs, CollapsibleCode } from '@gluestack/design-system'; -import GradientImage from '../../../extra-components/nativewind/GradientImage'; - -This is an illustration of **Linear Gradient** component in `App.tsx` file. - - - -```jsx -import "./global.css"; -import React, { useState } from "react"; -import { Input, InputField, InputIcon, InputSlot } from "./components/ui/input"; -import { SafeAreaView } from "./components/ui/safe-area-view"; -import { GluestackUIProvider } from "./components/ui/gluestack-ui-provider"; -import { LinearGradient } from "./components/ui/linear-gradient"; -import { Heading } from "./components/ui/heading"; -import { Text } from "./components/ui/text"; -import { Center } from "./components/ui/center"; -import { Mail } from "lucide-react-native"; - -export default function App() { - const [colorMode, setColorMode] = useState<"dark" | "light">("light"); - return ( - - -
- Stay up to date - - Subscribe to our newsletter for the latest news and product updates. - - - - - - - - - - - Subscribe - -
-
-
- ); -} -``` - -
- -## Installation - - - - - Expo Linear Gradient - - - React Native Linear Gradient - - - - -<> - -### Step 1: Install the following dependencies: -```bash -npx expo install expo-linear-gradient -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: guides/recipes/linear-gradient/expo-linear-gradient.tsx --%% -``` - - -### Step 3: Update the import paths to match your project setup. - - - -<> - -### Step 1: Install the following dependencies: -```bash -npm i react-native-linear-gradient -``` - -### Step 2: Copy and paste the following code into your project. - - -```jsx -%%-- File: guides/recipes/linear-gradient/rn-linear-gradient.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 { LinearGradient } from '@/components/ui/linear-gradient'; -``` - -```jsx -export default () => ; -``` \ No newline at end of file diff --git a/example/storybook-v7/src/guides/recipes/linear-gradient/index.themed.stories.mdx b/example/storybook-v7/src/guides/recipes/linear-gradient/index.themed.stories.mdx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/example/storybook-v7/src/guides/recipes/linear-gradient/rn-linear-gradient.tsx b/example/storybook-v7/src/guides/recipes/linear-gradient/rn-linear-gradient.tsx deleted file mode 100644 index f9a9948460..0000000000 --- a/example/storybook-v7/src/guides/recipes/linear-gradient/rn-linear-gradient.tsx +++ /dev/null @@ -1,26 +0,0 @@ -'use client'; -import React from 'react'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -//@ts-ignore -import { LinearGradient as RNLinearGradient } from 'react-native-linear-gradient'; -import { cssInterop } from 'nativewind'; - -cssInterop(RNLinearGradient, { - className: 'style', -}); - -const linearGradientStyle = tva({ - base: '', -}); - -export const LinearGradient = React.forwardRef( - ({ className, ...props }: any, ref?: any) => { - return ( - - ); - } -); diff --git a/example/storybook-v7/src/home/core-concepts/Accessibility/index.stories.mdx b/example/storybook-v7/src/home/core-concepts/Accessibility/index.stories.mdx deleted file mode 100644 index 9ae784e890..0000000000 --- a/example/storybook-v7/src/home/core-concepts/Accessibility/index.stories.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Accessibility | gluestack-ui -description: gluestack-ui is a UI library that provides universal, unstyled, and accessible components. It includes keyboard accessibility and focus management features, making it a great choice for developers who prioritize accessibility and usability. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Accessibility - -Accessibility is an important aspect of web and native development, and at gluestack-ui, we strive to make our components accessible to all users. In this section, we will discuss the accessibility features of our components. - -### WAI-ARIA Guidelines - -gluestack-ui follows the WAI-ARIA Authoring Practices guidelines to ensure our components are accessible to users of assistive technologies. The WAI-ARIA Authoring Practices document provides guidance on how to create accessible widgets, navigation, and behaviours using WAI-ARIA roles, states, and properties. - -### Browser and Assistive Technology Testing - -We test our components in a wide selection of modern browsers and commonly used assistive technologies to ensure accessibility. Our testing includes screen readers such as NVDA and JAWS, as well as keyboard navigation and other assistive technologies. - -### Accessible Component Props - -gluestack-ui components come with built-in accessibility features such as keyboard navigation and support for screen readers. We provide additional accessibility props for our components, such as aria-label, aria-labelledby, aria-describedby, role, tabIndex, and more. - -### Keyboard Accessibility - -All components are fully navigable and operable using a keyboard, providing an optimal experience for users who cannot or prefer not to use a mouse or touch screen. - -### Focus Management - -We also provide focus management for our components to ensure a smooth and intuitive experience for keyboard users. When a component gains focus, we ensure that it is visually highlighted and that the focus order is consistent with the DOM order. - -### Screen Reader Accessibility - -All components include appropriate ARIA roles, states, and properties to ensure proper communication with screen readers and other assistive technologies. - -We are committed to making our components accessible to all users, and we will continue to improve our accessibility features as we receive feedback from the community. diff --git a/example/storybook-v7/src/home/core-concepts/Universal/index.nw.stories.mdx b/example/storybook-v7/src/home/core-concepts/Universal/index.nw.stories.mdx deleted file mode 100644 index 801fca2667..0000000000 --- a/example/storybook-v7/src/home/core-concepts/Universal/index.nw.stories.mdx +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Universal | gluestack-ui -description: Universal provide gluestack snippets, which are shorthand for commonly used gluestack-ui components. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Universal - -All `gluestack-ui` components are universal out of the box, eliminating the need for separate development for both web and mobile platforms, which is the traditional approach. - -With `gluestack-ui`, developers can now craft beautiful interfaces with a single set of code that seamlessly operates across all devices, removing the need for the tedious and time-consuming process of crafting and maintaining two separate codebase for distinct platforms. - -You can also use `gluestack-ui` to create styles specific to a particular platform such as Web, iOS or Android. using `web:`, `ios:` and `android:` platform modifiers respectively. - -```jsx -import { Button, ButtonText} from '@/components/Button'; - -function App { - return ( - - ) -} -``` - -## Component Showcase - -Discover how gluestack-ui delivers a smooth and consistent user experience across various device types. You can view live example [here](https://ui-kitchensink.gluestack.io/). diff --git a/example/storybook-v7/src/home/core-concepts/Universal/index.themed.stories.mdx b/example/storybook-v7/src/home/core-concepts/Universal/index.themed.stories.mdx deleted file mode 100644 index fa00f2fbd3..0000000000 --- a/example/storybook-v7/src/home/core-concepts/Universal/index.themed.stories.mdx +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Universal | gluestack-ui -description: Universal provide gluestack snippets, which are shorthand for commonly used gluestack-ui components. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Universal - -All `gluestack-ui` components are universal out of the box, eliminating the need for separate development for both web and mobile platforms, which is the traditional approach. - -With `gluestack-ui`, developers can now craft beautiful interfaces with a single set of code that seamlessly operates across all devices, removing the need for the tedious and time-consuming process of crafting and maintaining two separate codebase for distinct platforms. - -You can also use `gluestack-ui` to create styles specific to a particular platform such as Web, iOS or Android. using `$web`, `$ios` and `$android` respectively. - -```jsx -import { Button, ButtonText} from '@/components/Button'; - -function App { - return ( - - ) -} -``` - -## Component Showcase - -Discover how gluestack-ui delivers a smooth and consistent user experience across various device types. You can view live example [here](https://ui-kitchensink.gluestack.io/). diff --git a/example/storybook-v7/src/home/getting-started/Installation/index.nw.stories.mdx b/example/storybook-v7/src/home/getting-started/Installation/index.nw.stories.mdx deleted file mode 100644 index 06b3367a44..0000000000 --- a/example/storybook-v7/src/home/getting-started/Installation/index.nw.stories.mdx +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: Installation | gluestack-ui-with-nativewind - -description: To get started with gluestack-ui with nativewind, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects. - -pageTitle: Installation - -pageDescription: To get started with gluestack-ui, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects. - -showHeader: false ---- - -import { Meta } from '@storybook/addon-docs'; -import { CollapsibleCode, Tabs } from '@gluestack/design-system'; - - - -# Installation - -To get started with gluestack-ui with nativewind, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects. - -### Using Template - -you can use [gluestack-expo-nativewind-v4-template](https://github.com/gluestack/gluestack-expo-nativewind-v4-template). - -If you wish to use `gluestack-ui` with nativewind in your existing project using CLI or manually, you can proceed with the following steps: - -### Step 1: Setup Nativewind -Setup nativewind in your project following [NativeWind documentation](https://www.nativewind.dev/v4/getting-started/react-native). - -### Step 2: Initialize - -
- - - - - CLI - - - Manual - - - - -<> - -
- -Use `init` command to add `GluestackUIProvider` and `gluestack-ui-provider/config.ts` file into your project. - -```bash -npx gluestack-ui init -``` - - -
- -<> - -### Step 2.1: Install dependencies - -Install the dependencies of gluestack-ui in your project. This can be done using the following command: - -```bash -yarn add @gluestack-ui/nativewind-utils - -``` - -OR - -```bash -npm i @gluestack-ui/nativewind-utils - -``` - -### Step 2.2: Update Tailwind configuration - -Update `tailwind.config.js` file with the following code - -```js -// tailwind.config.js -module.exports = { - darkMode: "class", - content: [ - "./src/**/*.{html,js,jsx,ts,tsx}", - "./src/components/**/**/*.{html,js,jsx,ts,tsx}", - ], - presets: [require("nativewind/preset")], - theme: { - extend: { - colors: { - primary: { - 0: "var(--color-primary-0)", - 50: "var(--color-primary-50)", - 100: "var(--color-primary-100)", - 200: "var(--color-primary-200)", - 300: "var(--color-primary-300)", - 400: "var(--color-primary-400)", - 500: "var(--color-primary-500)", - 600: "var(--color-primary-600)", - 700: "var(--color-primary-700)", - 800: "var(--color-primary-800)", - 900: "var(--color-primary-900)", - 950: "var(--color-primary-950)", - }, - secondary: { - 0: "var(--color-secondary-0)", - 50: "var(--color-secondary-50)", - 100: "var(--color-secondary-100)", - 200: "var(--color-secondary-200)", - 300: "var(--color-secondary-300)", - 400: "var(--color-secondary-400)", - 500: "var(--color-secondary-500)", - 600: "var(--color-secondary-600)", - 700: "var(--color-secondary-700)", - 800: "var(--color-secondary-800)", - 900: "var(--color-secondary-900)", - 950: "var(--color-secondary-950)", - }, - tertiary: { - 50: "var(--color-tertiary-50)", - 100: "var(--color-tertiary-100)", - 200: "var(--color-tertiary-200)", - 300: "var(--color-tertiary-300)", - 400: "var(--color-tertiary-400)", - 500: "var(--color-tertiary-500)", - 600: "var(--color-tertiary-600)", - 700: "var(--color-tertiary-700)", - 800: "var(--color-tertiary-800)", - 900: "var(--color-tertiary-900)", - 950: "var(--color-tertiary-950)", - }, - error: { - 0: "var(--color-error-0)", - 50: "var(--color-error-50)", - 100: "var(--color-error-100)", - 200: "var(--color-error-200)", - 300: "var(--color-error-300)", - 400: "var(--color-error-400)", - 500: "var(--color-error-500)", - 600: "var(--color-error-600)", - 700: "var(--color-error-700)", - 800: "var(--color-error-800)", - 900: "var(--color-error-900)", - 950: "var(--color-error-950)", - }, - success: { - 0: "var(--color-success-0)", - 50: "var(--color-success-50)", - 100: "var(--color-success-100)", - 200: "var(--color-success-200)", - 300: "var(--color-success-300)", - 400: "var(--color-success-400)", - 500: "var(--color-success-500)", - 600: "var(--color-success-600)", - 700: "var(--color-success-700)", - 800: "var(--color-success-800)", - 900: "var(--color-success-900)", - 950: "var(--color-success-950)", - }, - warning: { - 0: "var(--color-warning-0)", - 50: "var(--color-warning-50)", - 100: "var(--color-warning-100)", - 200: "var(--color-warning-200)", - 300: "var(--color-warning-300)", - 400: "var(--color-warning-400)", - 500: "var(--color-warning-500)", - 600: "var(--color-warning-600)", - 700: "var(--color-warning-700)", - 800: "var(--color-warning-800)", - 900: "var(--color-warning-900)", - 950: "var(--color-warning-950)", - }, - info: { - 0: "var(--color-info-0)", - 50: "var(--color-info-50)", - 100: "var(--color-info-100)", - 200: "var(--color-info-200)", - 300: "var(--color-info-300)", - 400: "var(--color-info-400)", - 500: "var(--color-info-500)", - 600: "var(--color-info-600)", - 700: "var(--color-info-700)", - 800: "var(--color-info-800)", - 900: "var(--color-info-900)", - 950: "var(--color-info-950)", - }, - typography: { - 0: "var(--color-typography-0)", - 50: "var(--color-typography-50)", - 100: "var(--color-typography-100)", - 200: "var(--color-typography-200)", - 300: "var(--color-typography-300)", - 400: "var(--color-typography-400)", - 500: "var(--color-typography-500)", - 600: "var(--color-typography-600)", - 700: "var(--color-typography-700)", - 800: "var(--color-typography-800)", - 900: "var(--color-typography-900)", - 950: "var(--color-typography-950)", - white: "#FFFFFF", - gray: "#D4D4D4", - black: "#181718", - }, - outline: { - 0: "var(--color-outline-0)", - 50: "var(--color-outline-50)", - 100: "var(--color-outline-100)", - 200: "var(--color-outline-200)", - 300: "var(--color-outline-300)", - 400: "var(--color-outline-400)", - 500: "var(--color-outline-500)", - 600: "var(--color-outline-600)", - 700: "var(--color-outline-700)", - 800: "var(--color-outline-800)", - 900: "var(--color-outline-900)", - 950: "var(--color-outline-950)", - }, - background: { - 0: "var(--color-background-0)", - 50: "var(--color-background-50)", - 100: "var(--color-background-100)", - 200: "var(--color-background-200)", - 300: "var(--color-background-300)", - 400: "var(--color-background-400)", - 500: "var(--color-background-500)", - 600: "var(--color-background-600)", - 700: "var(--color-background-700)", - 800: "var(--color-background-800)", - 900: "var(--color-background-900)", - 950: "var(--color-background-950)", - error: "var(--color-background-error)", - warning: "var(--color-background-warning)", - muted: "var(--color-background-muted)", - success: "var(--color-background-success)", - light: "#FBFBFB", - dark: "#181719", - }, - }, - fontFamily: { - heading: undefined, - body: undefined, - mono: undefined, - roboto: ['Roboto', 'sans-serif'], - }, - fontWeight: { - hairline: "100", - extraBlack: "950", - }, - fontSize: { - "2xs": "10px", - }, - }, - plugins: [], - }, -}; -``` - -### Step 2.3: Configure components path - -Create a `components/ui` folder inside `src` folder and add path in `tsconfig.json` - -```js - // ... (other configs) - compilerOptions: { - // ... - "paths": { - // ... - "@/*": ["./src/*"] // Add relative path - }, - } -``` - -### Step 2.4: Configure GluestackUIProvider - -To add config, create a `gluestack-ui-provider/config.ts` file in your `components/ui` folder and paste the following code. - - - -```jsx -%%-- File: core-components/nativewind/gluestack-ui-provider/config.ts --%% -``` - - - -#### For Native -To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file inside `components/` folder and paste the following code. - - - -```jsx -%%-- File: core-components/nativewind/gluestack-ui-provider/index.tsx --%% -``` - - - -#### For Web -To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.web.tsx` file inside `components/` folder and paste the following code. - - - -```jsx -%%-- File: core-components/nativewind/gluestack-ui-provider/index.web.tsx --%% -``` - - - - - -
-
- -### Step 3: Configure GluestackUIProvider in project - -Wrap your app with `GluestackUIProvider` in `App.tsx`. - -```jsx -// App.tsx -export default function App() { - return ( - {/* Add your app code here */} - ); -} -``` - -### Step 4: Server-side rendering (SSR) (NextJS Only). - -It's also recommended to set up your server-side rendering (SSR) correctly. To do this, you will need to use the `flush()` function exported by the `@gluestack-ui/nativewind-utils` - - - - - App Router - - - Page Router - - - - -<> - -For Next.js App Routers we will create a new `registry.tsx` file in the root of your project and use the flush function from `@gluestack-ui/nativewind-utils` - -```jsx -"use client"; - -import React, { useRef, useState } from "react"; -import { useServerInsertedHTML } from "next/navigation"; -import { StyleRegistry, createStyleRegistry } from "styled-jsx"; -import { Html, Head, Main, NextScript } from "next/document"; -// @ts-ignore -import { AppRegistry } from "react-native-web"; -import { flush } from "@gluestack-ui/nativewind-utils/flush"; - -export default function StyledJsxRegistry({ - children, -}: { - children: React.ReactNode; -}) { - // Only create stylesheet once with lazy initial state - // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state - const [jsxStyleRegistry] = useState(() => createStyleRegistry()); - const isServerInserted = useRef(false); - - useServerInsertedHTML(() => { - AppRegistry.registerComponent("Main", () => Main); - const { getStyleElement } = AppRegistry.getApplication("Main"); - console.log(getStyleElement()); - if (!isServerInserted.current) { - isServerInserted.current = true; - const styles = [ - getStyleElement(), - jsxStyleRegistry.styles(), - flush(), - ]; - jsxStyleRegistry.flush(); - return <>{styles}; - } - }); - - return {children}; -} - -``` - -- We also need to wrap `children` with `StyledJsxRegistry` in the `layout.tsx` file. - -```jsx -"use client"; - -import { Inter } from "next/font/google"; -import "./globals.css"; -import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider"; -const inter = Inter({ subsets: ["latin"] }); -import StyledJsxRegistry from "./registry"; -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - - {children} - - - - ); -} - -``` - - - - -<> - - -For Next.js we will add this code in `_document.tsx` file. - -```jsx -import * as React from 'react'; -import { Html, Head, Main, NextScript } from 'next/document'; -import { AppRegistry } from 'react-native-web'; -import { flush } from '@gluestack-ui/nativewind-utils/flush'; - -function Document() { - return ( - - - -
- - - - ); -} - -Document.getInitialProps = async ({ renderPage }: any) => { - AppRegistry.registerComponent('Main', () => Main); - const { getStyleElement } = AppRegistry.getApplication('Main'); - const page = await renderPage(); - const styles = [getStyleElement(), flush()]; - return { ...page, styles: React.Children.toArray(styles) }; -}; - -export default Document; -``` - - - - - - -## Common issues -**Expo app stuck in `tailwindcss(ios) rebuilding...` while running `expo start` command** - -In this case, you may have your app stored in a directory with a name containing spaces, such as 'Expo App', renaming it to just 'Expo-App' will resolve the issue. diff --git a/example/storybook-v7/src/home/getting-started/Installation/index.themed.stories.mdx b/example/storybook-v7/src/home/getting-started/Installation/index.themed.stories.mdx deleted file mode 100644 index 1644240dcd..0000000000 --- a/example/storybook-v7/src/home/getting-started/Installation/index.themed.stories.mdx +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Installation | gluestack-ui-with-gluestack-style - -description: To get started with gluestack-ui, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects. - -pageTitle: Installation - -pageDescription: To get started with gluestack-ui, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; -import { CollapsibleCode, Tabs, Box, HStack } from '@gluestack/design-system'; - - - -## Automatic - -### Using Template - -Coming soon - -### Using CLI - -If you wish to use `gluestack-ui` in your existing project using CLI, you can proceed with the following steps: - -### Step 1: Initialize -Use `init` command to add `GluestackUIProvider` and `gluestack-ui-provider/config.ts` file into your project. - -```bash -npx gluestack-ui init -``` -You will be asked to select a component style to initialize - -```bash - Which style would you like to use in your project: - gluestack-style - nativewind - ``` - Refer step: 4 in manual installation for usage of `GluestackUIProvider` - -### Step 3: Add components -To add components you wish to use in your project, you can use `add` command as shown below. - -```bash -npx gluestack-ui add button -``` -To add all the components, you can use -```bash -npx gluestack-ui add --all -``` - -## Manual - -If you wish to install `gluestack-ui` into your existing project, you can proceed with the following steps: - -### Step 1: Install dependencies - -First, install the dependencies of gluestack-ui in your project. This can be done using the following command: - -```bash -yarn add @gluestack-style/react react-native-web react-native-svg@13.4.0 -``` - -OR - -```bash -npm i @gluestack-style/react react-native-web react-native-svg@13.4.0 - -``` - -### Step 1.5 (For Next.js): - -Please follow this [link](https://gluestack.io/ui/docs/guides/install-nextjs) - -### Step 2: Configure components path - -Create a `components/` folder inside `src` folder and add path in `tsconfig.json` - -```js - // ... (other configs) - compilerOptions: { - // ... - "paths": { - // ... - "@/*": ["./src/*"] // Add relative path - }, - } - - -``` - -### Step 3: Configure GluestackUIProvider - -To add config, create a `gluestack-ui-provider/config.ts` file in your `components/ui` folder and paste the following code. - - - -```jsx -%%-- File: core-components/themed/gluestack-ui-provider/config.ts --%% - ``` - - - -To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.tsx` file inside `components/ui` folder and paste the following code. - - - -```jsx - %%-- File: core-components/themed/gluestack-ui-provider/index.tsx --%% - ``` - - - -### Step 4: Usage - -Wrap your app with `GluestackUIProvider` in `App.tsx`. - -```jsx -// App.tsx -export default function App() { - return ( - {/* Add your app code here */} - ); -} -``` diff --git a/example/storybook-v7/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx b/example/storybook-v7/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx deleted file mode 100644 index 941a71b4e4..0000000000 --- a/example/storybook-v7/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Figma UI Kit | gluestack-ui -description: The Figma UI Kit provides a collection of ready-to-use UI components from the gluestack-ui library. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Figma UI Kit - -The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible! - -## Auto-generated - -Yes, our Figma UI Kit is auto-generated from the storybook. This helps us maintain a single source of truth, providing design-development consistency which is very important if you are building at scale. - -## Customize with ease - -- **AutoLayout support** - AutoLayout is a powerful feature in Figma that helps you create responsive and flexible designs by automatically adjusting the layout and spacing of elements within frames. It's particularly useful for designing interfaces that need to adapt to various screen sizes or content changes. - -- **Color Tokens** - Color tokens in Figma refer to a systematic and organized way of managing and using colors within your design projects. They help maintain consistency and make it easier to update colors across your designs by defining a centralized set of color values that can be reused throughout your project. In this Figma UI Kit we have a beautiful palette around 4312 color tokens with alpha support, covering around 48 colors with its 10 hues. - -- **Text Tokens** - Text tokens in Figma, sometimes referred to as text styles or text components, allow you to define and manage a consistent set of text properties such as font, size, line spacing, color, and more. Text tokens help maintain a unified text style across your design project, making it easier to ensure consistency and make global updates when needed. In this Figma UI Kit, we have two major foundation components **Text** and **Heading**, along with its sizes and font weights. - -- **Shadow Tokens** - Shadow tokens in Figma, sometimes referred to as effect styles, allow you to define and manage Effects, like drop shadows, stroke, blur and even images as Styles. In this Figma UI Kit, we majorly have included two shadows, named **Hard** and **Soft** shadows. - -- **Components** - Components in Figma are reusable design elements that allow you to create consistent and efficient designs. Components can represent UI elements, icons, buttons, or any other visual elements that you want to reuse across your design projects. This Figma UI Kit, includes around 23 components along with its instances mapped in compound components. - - - -## Try it now - -Find the Figma UI Kit live [here](https://www.figma.com/community/file/1358053104938234615/gluestack-ui-v2-0-design-kit)! - diff --git a/example/storybook-v7/src/home/getting-started/figma-ui-kit/index.themed.stories.mdx b/example/storybook-v7/src/home/getting-started/figma-ui-kit/index.themed.stories.mdx deleted file mode 100644 index df63a4d911..0000000000 --- a/example/storybook-v7/src/home/getting-started/figma-ui-kit/index.themed.stories.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Figma UI Kit | gluestack-ui -description: The Figma UI Kit provides a collection of ready-to-use UI components from the gluestack-ui library. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Figma UI Kit - -The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible! - -## Auto-generated - -Yes, our Figma UI Kit is auto-generated from the storybook. This helps us maintain a single source of truth, providing design-development consistency which is very important if you are building at scale. - -## Customize with ease - -- **AutoLayout support** - AutoLayout is a powerful feature in Figma that helps you create responsive and flexible designs by automatically adjusting the layout and spacing of elements within frames. It's particularly useful for designing interfaces that need to adapt to various screen sizes or content changes. - -- **Color Tokens** - Color tokens in Figma refer to a systematic and organized way of managing and using colors within your design projects. They help maintain consistency and make it easier to update colors across your designs by defining a centralized set of color values that can be reused throughout your project. In this Figma UI Kit we have a beautiful palette around 4312 color tokens with alpha support, covering around 48 colors with its 10 hues. - -- **Text Tokens** - Text tokens in Figma, sometimes referred to as text styles or text components, allow you to define and manage a consistent set of text properties such as font, size, line spacing, color, and more. Text tokens help maintain a unified text style across your design project, making it easier to ensure consistency and make global updates when needed. In this Figma UI Kit, we have two major foundation components **Text** and **Heading**, along with its sizes and font weights. - -- **Shadow Tokens** - Shadow tokens in Figma, sometimes referred to as effect styles, allow you to define and manage Effects, like drop shadows, stroke, blur and even images as Styles. In this Figma UI Kit, we majorly have included two shadows, named **Hard** and **Soft** shadows. - -- **Components** - Components in Figma are reusable design elements that allow you to create consistent and efficient designs. Components can represent UI elements, icons, buttons, or any other visual elements that you want to reuse across your design projects. This Figma UI Kit, includes around 23 components along with its instances mapped in compound components. - - - -## Try it now - -Find the Figma UI Kit live [here](https://www.figma.com/community/file/1358053104938234615/gluestack-ui-v2-0-design-kit)! - diff --git a/example/storybook-v7/src/home/getting-started/tooling-setup/index.nw.stories.mdx b/example/storybook-v7/src/home/getting-started/tooling-setup/index.nw.stories.mdx deleted file mode 100644 index 2501ec5bb6..0000000000 --- a/example/storybook-v7/src/home/getting-started/tooling-setup/index.nw.stories.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Tooling Setup | gluestack-ui -description: Tooling Setup. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Tooling Setup - -## IntelliSense setup (optional) - -If you are using VSCode and the [TailwindCSS IntelliSense Extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss), you have to add the following to your `settings.json` file. - -```js - - { - "tailwindCSS.experimental.classRegex": [ - ["tva\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] - ] - } - -``` - -## Prettier plugin setup (optional) - -If you are using [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to sort your class names, you can add tv to the list of functions that should be sorted. - -```jsx -module.exports = { - plugins: [require('prettier-plugin-tailwindcss')], - tailwindFunctions: ['tva'], -}; -``` diff --git a/example/storybook-v7/src/home/getting-started/tooling-setup/index.themed.stories.mdx b/example/storybook-v7/src/home/getting-started/tooling-setup/index.themed.stories.mdx deleted file mode 100644 index d7772a2bf4..0000000000 --- a/example/storybook-v7/src/home/getting-started/tooling-setup/index.themed.stories.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Tooling Setup | gluestack-ui -description: Tooling Setup. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Tooling Setup - -Coming Soon! diff --git a/example/storybook-v7/src/home/overview/AllComponents/index.nw.stories.mdx b/example/storybook-v7/src/home/overview/AllComponents/index.nw.stories.mdx deleted file mode 100644 index a56f7afd7b..0000000000 --- a/example/storybook-v7/src/home/overview/AllComponents/index.nw.stories.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: All Components | gluestack-ui - -description: gluestack-ui provides 30+ responsive components for every screen and style - -pageTitle: All Components - -pageDescription: gluestack-ui provides 30+ responsive components for every screen and style - -toc: false ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -import { AppProvider } from '@gluestack/design-system'; -import { config } from '@gluestack-ui/config'; -import { Grid } from '../../../extra-components/nativewind/Grid'; -import Wrapper from '../../../core-components/nativewind/Wrapper'; - - -# All Components - -30+ responsive components for every screen and style - - - - \ No newline at end of file diff --git a/example/storybook-v7/src/home/overview/AllComponents/index.themed.stories.mdx b/example/storybook-v7/src/home/overview/AllComponents/index.themed.stories.mdx deleted file mode 100644 index 9555bbee1c..0000000000 --- a/example/storybook-v7/src/home/overview/AllComponents/index.themed.stories.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: All Components | gluestack-ui - -description: gluestack-ui provides 30+ responsive components for every screen and style - -pageTitle: All Components - -pageDescription: gluestack-ui provides 30+ responsive components for every screen and style - -toc: false ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -import { AppProvider } from '@gluestack/design-system'; -import { config } from '@gluestack-ui/config'; -import { Grid } from '../../../extra-components/themed/Grid'; -import Wrapper from '../../../core-components/themed/Wrapper'; - -# All Components - -30+ responsive components for every screen and style - - - - \ No newline at end of file diff --git a/example/storybook-v7/src/home/overview/Introduction/index.nw.stories.mdx b/example/storybook-v7/src/home/overview/Introduction/index.nw.stories.mdx deleted file mode 100644 index dd1b77b960..0000000000 --- a/example/storybook-v7/src/home/overview/Introduction/index.nw.stories.mdx +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Introduction | gluestack-ui -description: gluestack-ui is a React Native and React library that provides universal, styled, and accessible components. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Introduction - -**gluestack-ui** with [NativeWind](https://www.nativewind.dev/) offers customizable, styled components for your projects. Unlike traditional libraries, it's not a pre-packaged dependency. Choose the components you need and copy-paste them directly into your React, Next.js & React Native projects. - -### Why use gluestack-ui with NativeWind? - -- Not a Library: Avoid unnecessary bloat by selecting only the components you need. - -- Easy Integration: Copy and paste component code snippets into your project files. - -- Full Customization: Tailor components to fit your project's needs by adjusting styles and behaviors. - ->Note: This pattern uses [NativeWind](https://www.nativewind.dev/v4/overview) version 4.0.36. For styling guidelines, please refer to NativeWind [documentation](https://www.nativewind.dev/v4/overview). - -## Community - -### Discord - -Get involved with the community, ask questions, and share tips, join our Discord. - -[Join our Discord](https://discord.gg/95qQ84nf6f) - -### Twitter - -To receive updates on new primitives, announcements, blog posts, and tips on using the library. - -[Follow gluestack on Twitter](https://twitter.com/gluestack) - -### GitHub - -To report bugs, request features, or contribute to the library, check out the gluestack-ui GitHub repository. - -[View gluestack-ui on GitHub](https://github.com/gluestack/gluestack-ui) - -### Stackoverflow - -Receive firsthand assistance from our community of developers. - -[Visit Stackoverflow](https://stackoverflow.com/questions/tagged/gluestack) - -### LinkedIn - -Stay updated about our company and collaborate on enterprise-level projects. - -[Follow us on LinkedIn](https://www.linkedin.com/company/gluestackio/) diff --git a/example/storybook-v7/src/home/overview/Introduction/index.themed.stories.mdx b/example/storybook-v7/src/home/overview/Introduction/index.themed.stories.mdx deleted file mode 100644 index a0a8fb4dbf..0000000000 --- a/example/storybook-v7/src/home/overview/Introduction/index.themed.stories.mdx +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Introduction | gluestack-ui -description: gluestack-ui is a React Native and React library that provides universal, styled, and accessible components. ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Introduction - -**gluestack-ui** with [gluestack-style](/style/docs) offers customizable, universal, themed & styled components for your projects. Unlike traditional libraries, it's not a pre-packaged dependency. Choose the components you need and copy-paste them directly into your React, Next.js & React Native projects. - -### Why use gluestack-ui with gluestack-style? - -- Not a Library: Avoid unnecessary bloat by selecting only the components you need. - -- Easy Integration: Copy and paste component code snippets into your project files. - -- Full Customization: Tailor components to fit your project's needs by adjusting styles and behaviors. - ->Note: This is not a component library as you cannot import components inside your application, to directly import components inside your application you can directly use [@gluestack-ui/themed](/ui/docs). - -## Community - -### Discord - -Get involved with the community, ask questions, and share tips, join our Discord. - -[Join our Discord](https://discord.gg/95qQ84nf6f) - -### Twitter - -To receive updates on new primitives, announcements, blog posts, and tips on using the library. - -[Follow gluestack on Twitter](https://twitter.com/gluestack) - -### GitHub - -To report bugs, request features, or contribute to the library, check out the gluestack-ui GitHub repository. - -[View gluestack-ui on GitHub](https://github.com/gluestack/gluestack-ui) - -### Stackoverflow - -Receive firsthand assistance from our community of developers. - -[Visit Stackoverflow](https://stackoverflow.com/questions/tagged/gluestack) - -### LinkedIn - -Stay updated about our company and collaborate on enterprise-level projects. - -[Follow us on LinkedIn](https://www.linkedin.com/company/gluestackio/) diff --git a/example/storybook-v7/src/home/theme-configuration/customizing-theme/index.nw.stories.mdx b/example/storybook-v7/src/home/theme-configuration/customizing-theme/index.nw.stories.mdx deleted file mode 100644 index 0106e5b273..0000000000 --- a/example/storybook-v7/src/home/theme-configuration/customizing-theme/index.nw.stories.mdx +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Customizing Theme - -description: Customizing the theme in gluestack-ui with nativewind involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. - -showHeader: true ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { CollapsibleCode } from '@gluestack/design-system'; - - - - -## Customizing Tokens - -gluestack-ui, integrated with Nativewind, seamlessly accommodates the default Tailwind CSS [theme](https://tailwindcss.com/docs/theme), allowing users to effortlessly expand and customize it to suit their needs. - -gluestack-ui with nativewind also ships with a set of handpicked default color palette tokens which are mapped seperately with each mode. For example, the default color palette for light mode is `light` and the default color palette for dark mode is `dark`. - -To customize tokens, follow these steps: - -1. Go to `gluestack-ui-provider/config.ts` file. Update or add new tokens as per your requirements. - - - -```jsx -export const config = { - light: vars({ - - ... // other tokens - //updated '--color-primary-0' value - '--color-primary-0': '#C0C0C0', - - /* Added a new background color for light mode */ - '--color-background-new': '#BAE7FC', - - }), - dark: vars({ - ... // other tokens - /* Added a new background color for dark mode */ - '--color-background-new': '#89D6FA', - }), -}; - -``` - - -2. In case you are adding a new color in your config file, you need to update it in the tailwind.config.js file as well. - - -```jsx - theme: { - extend: { - colors: { - background: { - ... // other color values, - /* Added a new background color */ - new: 'var(--color-background-new)', - }, - }, - }, - plugins: [], - }, -``` - -You can customize all the tokens in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/nativewind/docs/theme-configuration/default-tokens). - -By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact. - -If you want to extend the default tailwind config and add fonts, breakpoints, border radius values, and more, please refer to the [tailwindcss](https://tailwindcss.com/docs/theme#customizing-the-default-theme) documentation. \ No newline at end of file diff --git a/example/storybook-v7/src/home/theme-configuration/customizing-theme/index.themed.stories.mdx b/example/storybook-v7/src/home/theme-configuration/customizing-theme/index.themed.stories.mdx deleted file mode 100644 index 5f11352e94..0000000000 --- a/example/storybook-v7/src/home/theme-configuration/customizing-theme/index.themed.stories.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Customizing Theme - -description: Customizing the theme in gluestack-ui with gluestack-style involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. - -showHeader: true ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { CollapsibleCode } from '@gluestack/design-system'; - - - - -## Customizing Tokens - - -gluestack-ui with gluestack style ships with a default `config` which contains a set of already defined tokens which are mapped seperately with each mode. -Customizing these tokens allows you to tailor the core design elements of the library to match your project's unique visual identity. - -To customize tokens, follow these steps: - -1. Go to `gluestack-ui-provider/config.ts` file. Update or add new tokens as per your requirements. - - - -```jsx - - -export const config = createConfig({ - // ... config - tokens: { - colors: { - // replacing primary color - primary0: '#ffffff', - primary50: '#a3fff4', - primary100: '#82fff0', - primary200: '#61ffed', - primary300: '#45fae5', - primary400: '#24f9e1', - primary500: '#17f3d9', - primary600: '#12e4cb', - primary700: '#17ccb7', - primary800: '#1ab5a3', - primary900: '#1c9f90', - primary950: '#000000', - ... // Other tokens - }, - }, -}); - -type Config = typeof config; - -declare module '@gluestack-style/react' { - interface ICustomConfig extends Config {} -} - -``` - - -You can customize all the tokens in the `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/gluestack-style/docs/theme-configuration/default-tokens). - -By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact. \ No newline at end of file diff --git a/example/storybook-v7/src/home/theme-configuration/default-tokens/index.nw.stories.mdx b/example/storybook-v7/src/home/theme-configuration/default-tokens/index.nw.stories.mdx deleted file mode 100644 index f56e9d92a1..0000000000 --- a/example/storybook-v7/src/home/theme-configuration/default-tokens/index.nw.stories.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Default Tokens | gluestack-ui - -description: gluestack-ui with nativewind ships with default tokens that provide access to theme values and lets you build and customize your own themed components. - -pageTitle: Default Tokens - -pageDescription: gluestack-ui with nativewind ships with default tokens that provide access to theme values and lets you build and customize your own themed components. - -showHeader: true ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import {ColorPaletteComponent} from '../../../components/docs-components/DefaultComponent.tsx'; - - - - - -Theming in `@gluestack-ui with nativewind` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification). - - -## Colors - -We recommend adding a palette that ranges from 50 to 900. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. - -Below are the default color palette tokens provided in the gluestack-ui default config. - - \ No newline at end of file diff --git a/example/storybook-v7/src/home/theme-configuration/default-tokens/index.themed.stories.mdx b/example/storybook-v7/src/home/theme-configuration/default-tokens/index.themed.stories.mdx deleted file mode 100644 index 5c99ba774b..0000000000 --- a/example/storybook-v7/src/home/theme-configuration/default-tokens/index.themed.stories.mdx +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Default Tokens - -description: gluestack-ui ships with default tokens that provide access to theme values and lets you build and customize your own themed components. It has colors, typography, size, opacity, shadows, breakpoints and more. - -pageTitle: Default Tokens - -pageDescription: gluestack-ui ships with default tokens that provide access to theme values and lets you build and customize your own themed components. It has colors, typography, size, opacity, shadows, breakpoints and more. -showHeader: true ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { - ColorPaletteComponent, - SpaceComponent, - OpacityComponent, - ShadowsComponent, - BorderWidthComponent, - RadiiComponent, -} from '../../../components/docs-components/DefaultComponentThemed.tsx'; - - - -Theming in `@gluestack-ui with gluestack-style` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification). - -## Colors - -We recommend adding a palette that ranges from 50 to 900. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. - - - -## Typography - -To manage Typography options, the tokens object supports the following keys: - -- `fonts (font families)` -- `fontSizes` -- `fontWeights` -- `lineHeights` -- `letterSpacings` - -```jsx -import { createConfig } from '../../core-components/themed/gluestack-ui-provider/config'; -import {config as defaultConfig } from '../../core-components/themed/gluestack-ui-provider/config'; - -const config = createConfig({ - ...defaultConfig, - tokens: { - ...defaultConfig.tokens, - fontSizes: { - ...defaultConfig.tokens.fontSizes, - newFontSize: 90, - }, - ...// other tokens - }, -}); -``` - -## Space - -The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom, props. - - - -## Opacity - -You can define your opacity tokens or override existing ones using the `createConfig` function under the `tokens` section. - - - -## Shadows - -In `@gluestack-ui with gluestack-style` there are two types of shadows provided by default. - -> Note: In the context of dark mode design, it's important to recognize that elevation serves as the primary tool for expressing hierarchy. Unlike in light mode, where shadows are used for this purpose, dark themes prioritize surface illumination. The higher the elevation, the lighter the surfaces become, ultimately improving visibility and clarity. - - - -## Borders - -### border widths - -`borderWidths` tokens are used to define the border radius of an element. You can define your radii tokens or override existing ones using the `createConfig` function under the `tokens` section. - - - -### border radius - -`radii` tokens are used to define the border radius of an element. You can define your radii tokens or override existing ones using the `createConfig` function under the `tokens` section. - - diff --git a/example/storybook-v7/src/utils.ts b/example/storybook-v7/src/utils.ts deleted file mode 100644 index 56733c4c0a..0000000000 --- a/example/storybook-v7/src/utils.ts +++ /dev/null @@ -1,48 +0,0 @@ -// Transform code To Remove Wrapper And Function Name -export function transformedCode( - code: string, - type: 'jsx' | 'function' = 'jsx', - componentName?: string -) { - if (type === 'function') { - return `function App() { - ${code} - return <${componentName} />; - };`; - } - return `function App() { - return ${code}; - };`; -} - -export function transformedThemedCode( - code: string, - type: 'jsx' | 'function' = 'jsx', - componentName?: string -) { - if (type === 'function') { - return `function App() { - ${code} - return <${componentName} />; - };`; - } - return `function App() { - return ${code}; - };`; -} - -export function transformedCodeWithoutWrapper( - code: string, - type: 'jsx' | 'function' = 'jsx', - componentName?: string -) { - if (type === 'function') { - return `function App() { - ${code} - return <${componentName} />; - };`; - } - return `function App() { - return ${code}; - };`; -} diff --git a/example/storybook-v7/tailwind.config.js b/example/storybook-v7/tailwind.config.js index 1ee43b2f11..4636ba5791 100644 --- a/example/storybook-v7/tailwind.config.js +++ b/example/storybook-v7/tailwind.config.js @@ -2,9 +2,9 @@ module.exports = { darkMode: 'class', content: [ - './src/**/*.{html,js,jsx,ts,tsx}', - './src/core-components/**/**/*.{html,js,jsx,ts,tsx}', - './src/components/**/*.{html,js,jsx,ts,tsx,mdx}', + './../storybook-nativewind/src/**/*.{html,js,jsx,ts,tsx}', + './../storybook-nativewind/core-components/**/**/*.{html,js,jsx,ts,tsx}', + './../storybook-nativewind/components/**/*.{html,js,jsx,ts,tsx,mdx}', './../../packages/**/*.{html,js,jsx,ts,tsx,mdx}', ], safelist: [