diff --git a/apps/website/app/ui/docs/components/Input/index.mdx b/apps/website/app/ui/docs/components/Input/index.mdx index 677bfadc22..1a6912fb2c 100644 --- a/apps/website/app/ui/docs/components/Input/index.mdx +++ b/apps/website/app/ui/docs/components/Input/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input'; import { FormControl } from '@/components/ui/form-control'; import { VStack } from '@/components/ui/vstack'; diff --git a/apps/website/app/ui/docs/components/Input/layout.tsx b/apps/website/app/ui/docs/components/Input/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/Input/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/accordion/index.mdx b/apps/website/app/ui/docs/components/accordion/index.mdx index 5508b23dca..3e1fbaae8a 100644 --- a/apps/website/app/ui/docs/components/accordion/index.mdx +++ b/apps/website/app/ui/docs/components/accordion/index.mdx @@ -1,8 +1,12 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContent, AccordionContentText, AccordionIcon } from '@/components/ui/accordion'; import { Divider } from '@/components/ui/divider'; import { ChevronDownIcon, ChevronUpIcon, AddIcon, RemoveIcon } from '@/components/ui/icon'; + + + import {Tabs,TabItem} from '@/docs-components/tabs' import {Table,TableHeader,TableCell,TableHeaderCell,TableBody,TableRow} from '@/docs-components/table' import {InlineCode} from '@/docs-components/inline-code' diff --git a/apps/website/app/ui/docs/components/accordion/layout.tsx b/apps/website/app/ui/docs/components/accordion/layout.tsx new file mode 100644 index 0000000000..26084bbc0b --- /dev/null +++ b/apps/website/app/ui/docs/components/accordion/layout.tsx @@ -0,0 +1,25 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + "title": "Accordion Component | gluestack-ui | Installation, Usage & API", + "description": "Explore gluestack's Accordion component for Expo, next.js, React & React Native. Build sleek, interactive accordions with ease.", + "pageTitle": "Accordion", + "pageDescription": "Explore gluestack's Accordion component for Expo, next.js, React & React Native. Build sleek, interactive accordions with ease.", + "showHeader": true + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/actionsheet/index.mdx b/apps/website/app/ui/docs/components/actionsheet/index.mdx index 4ac107a717..07c8cd94f0 100644 --- a/apps/website/app/ui/docs/components/actionsheet/index.mdx +++ b/apps/website/app/ui/docs/components/actionsheet/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetIcon, ActionsheetVirtualizedList, ActionsheetFlatList, ActionsheetSectionList, ActionsheetSectionHeaderText } from '@/components/ui/actionsheet'; import { Button, ButtonText, ButtonGroup } from '@/components/ui/button'; import { VStack } from '@/components/ui/vstack'; diff --git a/apps/website/app/ui/docs/components/actionsheet/layout.tsx b/apps/website/app/ui/docs/components/actionsheet/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/actionsheet/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/alert-dialog/index.mdx b/apps/website/app/ui/docs/components/alert-dialog/index.mdx index 12f3fe5275..b6f1d45350 100644 --- a/apps/website/app/ui/docs/components/alert-dialog/index.mdx +++ b/apps/website/app/ui/docs/components/alert-dialog/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogBody, AlertDialogBackdrop } from '@/components/ui/alert-dialog'; import { Button, ButtonText } from '@/components/ui/button'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/alert-dialog/layout.tsx b/apps/website/app/ui/docs/components/alert-dialog/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/alert-dialog/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/alert/index.mdx b/apps/website/app/ui/docs/components/alert/index.mdx index 1ae1ac1c53..dddd0a0243 100644 --- a/apps/website/app/ui/docs/components/alert/index.mdx +++ b/apps/website/app/ui/docs/components/alert/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Alert, AlertText, AlertIcon } from '@/components/ui/alert'; import { InfoIcon, Icon, CloseIcon, EyeIcon, EyeOffIcon } from '@/components/ui/icon'; import { VStack } from '@/components/ui/vstack'; diff --git a/apps/website/app/ui/docs/components/alert/layout.tsx b/apps/website/app/ui/docs/components/alert/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/alert/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/all-components/index.mdx b/apps/website/app/ui/docs/components/all-components/index.mdx index 0b6b517fde..2ec28618a1 100644 --- a/apps/website/app/ui/docs/components/all-components/index.mdx +++ b/apps/website/app/ui/docs/components/all-components/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import AllComponents from "@/components/page-components/all-components"; diff --git a/apps/website/app/ui/docs/components/all-components/layout.tsx b/apps/website/app/ui/docs/components/all-components/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/all-components/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/avatar/index.mdx b/apps/website/app/ui/docs/components/avatar/index.mdx index cc68eea572..f371a21627 100644 --- a/apps/website/app/ui/docs/components/avatar/index.mdx +++ b/apps/website/app/ui/docs/components/avatar/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Avatar, AvatarFallbackText, AvatarImage, AvatarBadge, AvatarGroup } from '@/components/ui/avatar'; import { Heading } from '@/components/ui/heading'; import { HStack } from '@/components/ui/hstack'; diff --git a/apps/website/app/ui/docs/components/avatar/layout.tsx b/apps/website/app/ui/docs/components/avatar/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/avatar/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/badge/index.mdx b/apps/website/app/ui/docs/components/badge/index.mdx index 79fe49ed01..46e09b22e1 100644 --- a/apps/website/app/ui/docs/components/badge/index.mdx +++ b/apps/website/app/ui/docs/components/badge/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Badge, BadgeText, BadgeIcon } from '@/components/ui/badge'; import { GlobeIcon } from '@/components/ui/icon'; import { Avatar, AvatarFallbackText, AvatarImage } from '@/components/ui/avatar'; diff --git a/apps/website/app/ui/docs/components/badge/layout.tsx b/apps/website/app/ui/docs/components/badge/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/badge/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/bottomsheet/index.mdx b/apps/website/app/ui/docs/components/bottomsheet/index.mdx index 9125ee7be1..0c140b9002 100644 --- a/apps/website/app/ui/docs/components/bottomsheet/index.mdx +++ b/apps/website/app/ui/docs/components/bottomsheet/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; # BottomSheet diff --git a/apps/website/app/ui/docs/components/bottomsheet/layout.tsx b/apps/website/app/ui/docs/components/bottomsheet/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/bottomsheet/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/box/index.mdx b/apps/website/app/ui/docs/components/box/index.mdx index efd71d4c0e..fb9cb12ff0 100644 --- a/apps/website/app/ui/docs/components/box/index.mdx +++ b/apps/website/app/ui/docs/components/box/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Box } from '@/components/ui/box'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/box/layout.tsx b/apps/website/app/ui/docs/components/box/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/box/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/button/index.mdx b/apps/website/app/ui/docs/components/button/index.mdx index 93df2fb88c..a67b7d6bc8 100644 --- a/apps/website/app/ui/docs/components/button/index.mdx +++ b/apps/website/app/ui/docs/components/button/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Button, ButtonText, ButtonSpinner, ButtonIcon } from '@/components/ui/button'; import { EditIcon, ArrowUpIcon, InfoIcon, AddIcon, ArrowLeftIcon } from '@/components/ui/icon'; import { Box } from '@/components/ui/box'; diff --git a/apps/website/app/ui/docs/components/button/layout.tsx b/apps/website/app/ui/docs/components/button/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/button/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/card/index.mdx b/apps/website/app/ui/docs/components/card/index.mdx index e9034170bc..c5ea7f189b 100644 --- a/apps/website/app/ui/docs/components/card/index.mdx +++ b/apps/website/app/ui/docs/components/card/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Card } from '@/components/ui/card'; import { Heading } from '@/components/ui/heading'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/card/layout.tsx b/apps/website/app/ui/docs/components/card/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/card/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/center/index.mdx b/apps/website/app/ui/docs/components/center/index.mdx index 3c3defbe25..f7269d4186 100644 --- a/apps/website/app/ui/docs/components/center/index.mdx +++ b/apps/website/app/ui/docs/components/center/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Center } from '@/components/ui/center'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/center/layout.tsx b/apps/website/app/ui/docs/components/center/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/center/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/checkbox/index.mdx b/apps/website/app/ui/docs/components/checkbox/index.mdx index c49fbf9084..fb20b34a93 100644 --- a/apps/website/app/ui/docs/components/checkbox/index.mdx +++ b/apps/website/app/ui/docs/components/checkbox/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from '@/components/ui/checkbox'; import { CheckIcon } from '@/components/ui/icon'; import { VStack } from '@/components/ui/vstack'; diff --git a/apps/website/app/ui/docs/components/checkbox/layout.tsx b/apps/website/app/ui/docs/components/checkbox/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/checkbox/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/divider/index.mdx b/apps/website/app/ui/docs/components/divider/index.mdx index 5144354930..67a103c979 100644 --- a/apps/website/app/ui/docs/components/divider/index.mdx +++ b/apps/website/app/ui/docs/components/divider/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Center } from '@/components/ui/center'; import { Text } from '@/components/ui/text'; import { Divider } from '@/components/ui/divider'; diff --git a/apps/website/app/ui/docs/components/divider/layout.tsx b/apps/website/app/ui/docs/components/divider/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/divider/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/drawer/index.mdx b/apps/website/app/ui/docs/components/drawer/index.mdx index 5cae4fa28d..fcd9188493 100644 --- a/apps/website/app/ui/docs/components/drawer/index.mdx +++ b/apps/website/app/ui/docs/components/drawer/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Drawer, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerCloseButton } from '@/components/ui/drawer'; import { Button, ButtonText, ButtonIcon } from '@/components/ui/button'; import { Heading } from '@/components/ui/heading'; diff --git a/apps/website/app/ui/docs/components/drawer/layout.tsx b/apps/website/app/ui/docs/components/drawer/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/drawer/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/fab/index.mdx b/apps/website/app/ui/docs/components/fab/index.mdx index 14c9f51a60..7081b59929 100644 --- a/apps/website/app/ui/docs/components/fab/index.mdx +++ b/apps/website/app/ui/docs/components/fab/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Box } from '@/components/ui/box'; import { Fab, FabIcon, FabLabel } from '@/components/ui/fab'; import { AddIcon, EditIcon, SearchIcon, CheckIcon } from '@/components/ui/icon'; diff --git a/apps/website/app/ui/docs/components/fab/layout.tsx b/apps/website/app/ui/docs/components/fab/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/fab/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/form-control/index.mdx b/apps/website/app/ui/docs/components/form-control/index.mdx index a28905b5e2..23aafd40b6 100644 --- a/apps/website/app/ui/docs/components/form-control/index.mdx +++ b/apps/website/app/ui/docs/components/form-control/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { FormControl, FormControlLabel, FormControlError, FormControlErrorText, FormControlErrorIcon, FormControlHelper, FormControlHelperText, FormControlLabelText } from '@/components/ui/form-control'; import { AlertCircleIcon, CircleIcon, CheckIcon } from '@/components/ui/icon'; import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input'; diff --git a/apps/website/app/ui/docs/components/form-control/layout.tsx b/apps/website/app/ui/docs/components/form-control/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/form-control/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/grid/index.mdx b/apps/website/app/ui/docs/components/grid/index.mdx index b124ed590d..0c9093486f 100644 --- a/apps/website/app/ui/docs/components/grid/index.mdx +++ b/apps/website/app/ui/docs/components/grid/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Grid, GridItem } from '@/components/ui/grid'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/grid/layout.tsx b/apps/website/app/ui/docs/components/grid/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/grid/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/heading/index.mdx b/apps/website/app/ui/docs/components/heading/index.mdx index 357fa8b9d2..94119eef46 100644 --- a/apps/website/app/ui/docs/components/heading/index.mdx +++ b/apps/website/app/ui/docs/components/heading/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Heading } from '@/components/ui/heading'; import { Center } from '@/components/ui/center'; diff --git a/apps/website/app/ui/docs/components/heading/layout.tsx b/apps/website/app/ui/docs/components/heading/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/heading/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/hstack/index.mdx b/apps/website/app/ui/docs/components/hstack/index.mdx index 051467ad36..1f3e84aa30 100644 --- a/apps/website/app/ui/docs/components/hstack/index.mdx +++ b/apps/website/app/ui/docs/components/hstack/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { HStack } from '@/components/ui/hstack'; import { Box } from '@/components/ui/box'; diff --git a/apps/website/app/ui/docs/components/hstack/layout.tsx b/apps/website/app/ui/docs/components/hstack/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/hstack/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/icon/index.mdx b/apps/website/app/ui/docs/components/icon/index.mdx index 5f697edeff..9942995ceb 100644 --- a/apps/website/app/ui/docs/components/icon/index.mdx +++ b/apps/website/app/ui/docs/components/icon/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Icon, EditIcon, AddIcon, AlertCircleIcon, ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ArrowLeftIcon, AtSignIcon, BellIcon, CalendarDaysIcon, CheckIcon, CheckCircleIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleIcon, ClockIcon, CloseIcon, CloseCircleIcon, CopyIcon, DownloadIcon, 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 { Center } from '@/components/ui/center'; import { HStack } from '@/components/ui/hstack'; diff --git a/apps/website/app/ui/docs/components/icon/layout.tsx b/apps/website/app/ui/docs/components/icon/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/icon/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/image/index.mdx b/apps/website/app/ui/docs/components/image/index.mdx index 08fe6889ae..00c5ccb2cf 100644 --- a/apps/website/app/ui/docs/components/image/index.mdx +++ b/apps/website/app/ui/docs/components/image/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Image } from '@/components/ui/image'; import { Tabs, TabItem } from "@/docs-components/tabs"; diff --git a/apps/website/app/ui/docs/components/image/layout.tsx b/apps/website/app/ui/docs/components/image/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/image/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/link/index.mdx b/apps/website/app/ui/docs/components/link/index.mdx index 337e1e4543..cafe5033c5 100644 --- a/apps/website/app/ui/docs/components/link/index.mdx +++ b/apps/website/app/ui/docs/components/link/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Link, LinkText } from '@/components/ui/link'; import { HStack } from '@/components/ui/hstack'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/link/layout.tsx b/apps/website/app/ui/docs/components/link/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/link/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/menu/index.mdx b/apps/website/app/ui/docs/components/menu/index.mdx index d50671071b..aaa368b6f8 100644 --- a/apps/website/app/ui/docs/components/menu/index.mdx +++ b/apps/website/app/ui/docs/components/menu/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Menu, MenuItem, MenuItemLabel, MenuSeparator } from '@/components/ui/menu'; import { Button, ButtonText, ButtonIcon } from '@/components/ui/button'; import { Icon, AddIcon, GlobeIcon, PlayIcon, SettingsIcon, MenuIcon, HelpCircleIcon, MessageCircleIcon } from '@/components/ui/icon'; diff --git a/apps/website/app/ui/docs/components/menu/layout.tsx b/apps/website/app/ui/docs/components/menu/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/menu/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/modal/index.mdx b/apps/website/app/ui/docs/components/modal/index.mdx index 06cdef2a4a..54748960dd 100644 --- a/apps/website/app/ui/docs/components/modal/index.mdx +++ b/apps/website/app/ui/docs/components/modal/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Modal, ModalBackdrop, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter } from '@/components/ui/modal'; import { Button, ButtonText, ButtonIcon } from '@/components/ui/button'; import { Heading } from '@/components/ui/heading'; diff --git a/apps/website/app/ui/docs/components/modal/layout.tsx b/apps/website/app/ui/docs/components/modal/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/modal/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/popover/index.mdx b/apps/website/app/ui/docs/components/popover/index.mdx index 4d0ed3e4fd..12fe61ca12 100644 --- a/apps/website/app/ui/docs/components/popover/index.mdx +++ b/apps/website/app/ui/docs/components/popover/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Popover, PopoverBackdrop, PopoverArrow, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader } from '@/components/ui/popover'; import { Button, ButtonText, ButtonIcon } from '@/components/ui/button'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/popover/layout.tsx b/apps/website/app/ui/docs/components/popover/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/popover/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/portal/index.mdx b/apps/website/app/ui/docs/components/portal/index.mdx index 8aa570ac50..1fa7fd1644 100644 --- a/apps/website/app/ui/docs/components/portal/index.mdx +++ b/apps/website/app/ui/docs/components/portal/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Portal } from '@/components/ui/portal'; import { HStack } from '@/components/ui/hstack'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/portal/layout.tsx b/apps/website/app/ui/docs/components/portal/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/portal/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/pressable/index.mdx b/apps/website/app/ui/docs/components/pressable/index.mdx index d99187f099..050e01e2cf 100644 --- a/apps/website/app/ui/docs/components/pressable/index.mdx +++ b/apps/website/app/ui/docs/components/pressable/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Pressable } from '@/components/ui/pressable'; import { Text } from '@/components/ui/text'; import { Box } from '@/components/ui/box'; diff --git a/apps/website/app/ui/docs/components/pressable/layout.tsx b/apps/website/app/ui/docs/components/pressable/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/pressable/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/progress/index.mdx b/apps/website/app/ui/docs/components/progress/index.mdx index a73ba4263d..af902af02d 100644 --- a/apps/website/app/ui/docs/components/progress/index.mdx +++ b/apps/website/app/ui/docs/components/progress/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Progress, ProgressFilledTrack } from '@/components/ui/progress'; import { Center } from '@/components/ui/center'; import { VStack } from '@/components/ui/vstack'; diff --git a/apps/website/app/ui/docs/components/progress/layout.tsx b/apps/website/app/ui/docs/components/progress/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/progress/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/radio/index.mdx b/apps/website/app/ui/docs/components/radio/index.mdx index 4bec5f1038..e228716e3f 100644 --- a/apps/website/app/ui/docs/components/radio/index.mdx +++ b/apps/website/app/ui/docs/components/radio/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Radio, RadioGroup, RadioIndicator, RadioIcon, RadioLabel } from '@/components/ui/radio'; import { CircleIcon } from '@/components/ui/icon'; import { Center } from '@/components/ui/center'; diff --git a/apps/website/app/ui/docs/components/radio/layout.tsx b/apps/website/app/ui/docs/components/radio/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/radio/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/select/index.mdx b/apps/website/app/ui/docs/components/select/index.mdx index a0bf2536fe..85e1d143af 100644 --- a/apps/website/app/ui/docs/components/select/index.mdx +++ b/apps/website/app/ui/docs/components/select/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Select, SelectTrigger, SelectInput, SelectIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectItem } from '@/components/ui/select'; import { ChevronDownIcon, Icon, AlertCircleIcon } from '@/components/ui/icon'; import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText, FormControlError, FormControlErrorIcon, FormControlErrorText } from '@/components/ui/form-control'; diff --git a/apps/website/app/ui/docs/components/select/layout.tsx b/apps/website/app/ui/docs/components/select/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/select/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/skeleton/index.mdx b/apps/website/app/ui/docs/components/skeleton/index.mdx index c391decb1a..dcea7f3d7b 100644 --- a/apps/website/app/ui/docs/components/skeleton/index.mdx +++ b/apps/website/app/ui/docs/components/skeleton/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Skeleton, SkeletonText } from '@/components/ui/skeleton'; import { Box } from '@/components/ui/box'; import { HStack } from '@/components/ui/hstack'; diff --git a/apps/website/app/ui/docs/components/skeleton/layout.tsx b/apps/website/app/ui/docs/components/skeleton/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/skeleton/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/slider/index.mdx b/apps/website/app/ui/docs/components/slider/index.mdx index 5587458695..3c3e74cf31 100644 --- a/apps/website/app/ui/docs/components/slider/index.mdx +++ b/apps/website/app/ui/docs/components/slider/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from '@/components/ui/slider'; import { Center } from '@/components/ui/center'; diff --git a/apps/website/app/ui/docs/components/slider/layout.tsx b/apps/website/app/ui/docs/components/slider/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/slider/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/spinner/index.mdx b/apps/website/app/ui/docs/components/spinner/index.mdx index 376c40c3e6..1469c3878e 100644 --- a/apps/website/app/ui/docs/components/spinner/index.mdx +++ b/apps/website/app/ui/docs/components/spinner/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Spinner } from '@/components/ui/spinner'; import { HStack } from '@/components/ui/hstack'; import { Text } from '@/components/ui/text'; diff --git a/apps/website/app/ui/docs/components/spinner/layout.tsx b/apps/website/app/ui/docs/components/spinner/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/spinner/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/switch/index.mdx b/apps/website/app/ui/docs/components/switch/index.mdx index 5756db064a..d0e4d6678d 100644 --- a/apps/website/app/ui/docs/components/switch/index.mdx +++ b/apps/website/app/ui/docs/components/switch/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Switch } from '@/components/ui/switch'; import { Text } from '@/components/ui/text'; import { HStack } from '@/components/ui/hstack'; diff --git a/apps/website/app/ui/docs/components/switch/layout.tsx b/apps/website/app/ui/docs/components/switch/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/switch/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/table/index.mdx b/apps/website/app/ui/docs/components/table/index.mdx index 273de2c606..2fda8cf600 100644 --- a/apps/website/app/ui/docs/components/table/index.mdx +++ b/apps/website/app/ui/docs/components/table/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Table, TableBody, TableHeader, TableRow, TableHead, TableData, TableFooter } from '@/components/ui/table'; # Table diff --git a/apps/website/app/ui/docs/components/table/layout.tsx b/apps/website/app/ui/docs/components/table/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/table/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/text/index.mdx b/apps/website/app/ui/docs/components/text/index.mdx index 4fc6f7dfe7..b347e551d3 100644 --- a/apps/website/app/ui/docs/components/text/index.mdx +++ b/apps/website/app/ui/docs/components/text/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Text } from '@/components/ui/text'; import { Center } from '@/components/ui/center'; diff --git a/apps/website/app/ui/docs/components/text/layout.tsx b/apps/website/app/ui/docs/components/text/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/text/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/textarea/index.mdx b/apps/website/app/ui/docs/components/textarea/index.mdx index 08aef1aeaa..c914987293 100644 --- a/apps/website/app/ui/docs/components/textarea/index.mdx +++ b/apps/website/app/ui/docs/components/textarea/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Textarea, TextareaInput } from '@/components/ui/textarea'; import { FormControl, FormControlError, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from '@/components/ui/form-control'; diff --git a/apps/website/app/ui/docs/components/textarea/layout.tsx b/apps/website/app/ui/docs/components/textarea/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/textarea/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/toast/index.mdx b/apps/website/app/ui/docs/components/toast/index.mdx index efc483c08b..ff968a8b46 100644 --- a/apps/website/app/ui/docs/components/toast/index.mdx +++ b/apps/website/app/ui/docs/components/toast/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Toast, ToastTitle, ToastDescription, useToast } from '@/components/ui/toast'; import { Button, ButtonText, ButtonGroup } from '@/components/ui/button'; import { Pressable } from '@/components/ui/pressable'; diff --git a/apps/website/app/ui/docs/components/toast/layout.tsx b/apps/website/app/ui/docs/components/toast/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/toast/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/tooltip/index.mdx b/apps/website/app/ui/docs/components/tooltip/index.mdx index d48e7e1d8b..ba47d7a749 100644 --- a/apps/website/app/ui/docs/components/tooltip/index.mdx +++ b/apps/website/app/ui/docs/components/tooltip/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { Tooltip, TooltipContent, TooltipText } from '@/components/ui/tooltip'; import { Button, ButtonText } from '@/components/ui/button'; import { Avatar, AvatarGroup, AvatarFallbackText } from '@/components/ui/avatar'; diff --git a/apps/website/app/ui/docs/components/tooltip/layout.tsx b/apps/website/app/ui/docs/components/tooltip/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/tooltip/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/components/vstack/index.mdx b/apps/website/app/ui/docs/components/vstack/index.mdx index b51e188f88..0226dffcb6 100644 --- a/apps/website/app/ui/docs/components/vstack/index.mdx +++ b/apps/website/app/ui/docs/components/vstack/index.mdx @@ -1,4 +1,5 @@ import { CodePreviewer } from '@/components/custom/code-previewer'; +import { Meta } from '@/components/custom/meta'; import { VStack } from '@/components/ui/vstack'; import { Box, Wrapper } from '@/components/ui/box'; diff --git a/apps/website/app/ui/docs/components/vstack/layout.tsx b/apps/website/app/ui/docs/components/vstack/layout.tsx new file mode 100644 index 0000000000..1f45c66bf2 --- /dev/null +++ b/apps/website/app/ui/docs/components/vstack/layout.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} diff --git a/apps/website/app/ui/docs/guides/recipes/linear-gradient/rn-linear-gradient.tsx b/apps/website/app/ui/docs/guides/recipes/linear-gradient/rn-linear-gradient.tsx index f9a9948460..84be9c2547 100644 --- a/apps/website/app/ui/docs/guides/recipes/linear-gradient/rn-linear-gradient.tsx +++ b/apps/website/app/ui/docs/guides/recipes/linear-gradient/rn-linear-gradient.tsx @@ -1,26 +1,10 @@ -'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 ( - - ); - } -); +"use client"; +import Docs from './index.mdx'; +export default function Page() { + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/apps/website/app/ui/docs/hooks/use-break-point-value/index.mdx b/apps/website/app/ui/docs/hooks/use-break-point-value/index.mdx index 9fa256a359..e7547ad683 100644 --- a/apps/website/app/ui/docs/hooks/use-break-point-value/index.mdx +++ b/apps/website/app/ui/docs/hooks/use-break-point-value/index.mdx @@ -1,9 +1,3 @@ -import { CodePreviewer } from '@/components/custom/code-previewer'; -import { useBreakpointValue } from '@/components/ui/utils/use-break-point-value'; -import { VStack } from '@/components/ui/vstack'; -import { Box } from '@/components/ui/box'; -import { Text } from '@/components/ui/text'; - import {Tabs,TabItem} from '@/docs-components/tabs' import {Table,TableHeader,TableCell,TableHeaderCell,TableBody,TableRow} from '@/docs-components/table' import {InlineCode} from '@/docs-components/inline-code' @@ -14,36 +8,7 @@ Learn how to use the useBreakpointValue hook to manage breaking point values, br This is an illustration of **useBreakPointValue** hook. - - - - - - - - Box 1 - - - Box 2 - - - Box 3 - - - ); - }`} - argTypes={{}} - reactLive={{ useBreakpointValue, VStack, Box, Text }} -/> +/// {Example:basic} ///
@@ -58,128 +23,7 @@ This is an illustration of **useBreakPointValue** hook. ### Step 1: Copy and paste the following code into your project. ```ts - import { Dimensions, useWindowDimensions } from 'react-native'; -import { useEffect, useState } from 'react'; - -import resolveConfig from 'tailwindcss/resolveConfig'; -import * as tailwindConfig from '@/tailwind.config'; - -const TailwindTheme = resolveConfig(tailwindConfig as any); -const screenSize = TailwindTheme.theme.screens; - -type breakpoints = keyof typeof screenSize | 'default'; - -type MediaQueriesBreakpoints = { - key: breakpoints; - breakpoint: number; - isValid: boolean; - value?: unknown; -}; - -type BreakPointValue = Partial>; - -const resolveScreenWidth: Record = { - default: 0, -}; - -Object.entries(screenSize).forEach(([key, value]) => { - if (typeof value === 'string') { - resolveScreenWidth[key] = parseInt(value.replace('px', ''), 10); - } -}); - -export const getBreakPointValue = ( - values: BreakPointValue, - width: number -): unknown => { - if (typeof values !== 'object') return values; - - let finalBreakPointResolvedValue: unknown; - const mediaQueriesBreakpoints: Array = [ - { - key: 'default', - breakpoint: 0, - isValid: true, - }, - ]; - Object.keys(resolveScreenWidth).forEach((key) => { - const isValid = isValidBreakpoint(resolveScreenWidth[key], width); - - mediaQueriesBreakpoints.push({ - key: key, - breakpoint: resolveScreenWidth[key], - isValid: isValid, - }); - }); - - mediaQueriesBreakpoints.sort( - (a: MediaQueriesBreakpoints, b: MediaQueriesBreakpoints) => - a.breakpoint - b.breakpoint - ); - - mediaQueriesBreakpoints.forEach( - (breakpoint: MediaQueriesBreakpoints, index: number) => { - breakpoint.value = values.hasOwnProperty(breakpoint.key) - ? values[breakpoint.key] - : mediaQueriesBreakpoints[index - 1]?.value || - mediaQueriesBreakpoints[0]?.value; - } - ); - - const lastValidObject = getLastValidObject(mediaQueriesBreakpoints); - - if (!lastValidObject) { - finalBreakPointResolvedValue = values; - } else { - finalBreakPointResolvedValue = lastValidObject.value; - } - return finalBreakPointResolvedValue; -}; - -export function useBreakpointValue(values: BreakPointValue): unknown { - const { width } = useWindowDimensions(); - - const [currentBreakPointValue, setCurrentBreakPointValue] = useState( - getBreakPointValue(values, width) - ); - - useEffect(() => { - if (typeof values === 'object') { - const finalBreakPointResolvedValue = getBreakPointValue(values, width); - setCurrentBreakPointValue(finalBreakPointResolvedValue); - } - }, [values, width]); - - if (typeof values !== 'object') return values; - - return currentBreakPointValue; -} - -export function isValidBreakpoint( - breakPointWidth: number, - width: number = Dimensions.get('window')?.width || 0 -) { - const windowWidth = width; - - return windowWidth >= breakPointWidth; -} - -function getLastValidObject( - mediaQueries: Array<{ - key: breakpoints; - breakpoint: number; - isValid: boolean; - value?: unknown; - }> -) { - for (let i = mediaQueries.length - 1; i >= 0; i--) { - if (mediaQueries[i].isValid) { - return mediaQueries[i]; - } - } - return null; // No valid object found -} - + %%-- File: packages/components/ui/utils/use-break-point-value/index.ts --%% ``` ### Step 2: Update the import paths to match your project setup. diff --git a/apps/website/components/custom/code-previewer/index.tsx b/apps/website/components/custom/code-previewer/index.tsx index 8a77e0dbad..630caae55e 100644 --- a/apps/website/components/custom/code-previewer/index.tsx +++ b/apps/website/components/custom/code-previewer/index.tsx @@ -1,3 +1,4 @@ +"use client"; import { useState, useEffect } from "react"; import Handlebars from "handlebars"; import { LiveProvider, LiveError, LivePreview } from "react-live"; diff --git a/apps/website/components/custom/markdown/code-block/index.tsx b/apps/website/components/custom/markdown/code-block/index.tsx index 70ee30d9ad..fa5c1f8afc 100644 --- a/apps/website/components/custom/markdown/code-block/index.tsx +++ b/apps/website/components/custom/markdown/code-block/index.tsx @@ -1,3 +1,4 @@ +"use client"; import React, { useEffect, useRef, useState, useContext } from 'react'; import Prism from 'prismjs'; import 'prismjs/components/prism-jsx'; diff --git a/apps/website/components/custom/meta/index.tsx b/apps/website/components/custom/meta/index.tsx new file mode 100644 index 0000000000..8c35fbfdba --- /dev/null +++ b/apps/website/components/custom/meta/index.tsx @@ -0,0 +1,121 @@ +import Head from 'next/head'; +import { usePathname } from 'next/navigation'; + +export function Meta({ pageTitle, description, ogImgUrl, ogUrl }: any) { + const pathname = usePathname(); + const canonical = `https://gluestack.io${pathname}`; // change for your project + + return ( + + + + + + + + + + {pageTitle || 'gluestack-ui'} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + + diff --git a/apps/website/components/page-components/blogs-page/BlogsPageLayout.tsx b/apps/website/components/page-components/blogs-page/BlogsPageLayout.tsx index 9194103a44..d82f0e497f 100644 --- a/apps/website/components/page-components/blogs-page/BlogsPageLayout.tsx +++ b/apps/website/components/page-components/blogs-page/BlogsPageLayout.tsx @@ -1,5 +1,5 @@ 'use client'; -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { MDXProvider } from '@mdx-js/react'; import { Blog } from '@/components/page-components/blogs-page/mdx-components'; import Footer from '@/components/page-components/landing-page/Footer'; diff --git a/apps/website/components/page-components/blogs-page/mdx-components.tsx b/apps/website/components/page-components/blogs-page/mdx-components.tsx index bdfc529c79..6a4ac4fd1f 100644 --- a/apps/website/components/page-components/blogs-page/mdx-components.tsx +++ b/apps/website/components/page-components/blogs-page/mdx-components.tsx @@ -1,4 +1,4 @@ -"use client"; + import type { MDXComponents } from "mdx/types"; import CodeBlock from "@/components/custom/markdown/code-block"; diff --git a/apps/website/components/ui/new-accordion/aria/index.ts b/apps/website/components/ui/new-accordion/aria/index.ts deleted file mode 100644 index 027bf34e46..0000000000 --- a/apps/website/components/ui/new-accordion/aria/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './useAccordion'; -export * from './useAccordionItem'; diff --git a/apps/website/components/ui/new-accordion/aria/types.ts b/apps/website/components/ui/new-accordion/aria/types.ts deleted file mode 100644 index 283fd9447a..0000000000 --- a/apps/website/components/ui/new-accordion/aria/types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type State = { - selectedValues: string[]; - toggleItem: (itemValue: string, isDisabled?: boolean) => void; -}; diff --git a/apps/website/components/ui/new-accordion/aria/useAccordion.ts b/apps/website/components/ui/new-accordion/aria/useAccordion.ts deleted file mode 100644 index 2f56ab8850..0000000000 --- a/apps/website/components/ui/new-accordion/aria/useAccordion.ts +++ /dev/null @@ -1,50 +0,0 @@ -type Props = { - type: 'single' | 'multiple'; - isCollapsible: boolean; - selectedValues: string[]; - setSelectedValues: (values: string[]) => void; -}; - -export const useAccordion = (props: Props) => { - const { type, isCollapsible, selectedValues, setSelectedValues } = props; - - /* - * The toggleItem function is responsible for updating the selected values - * based on the type of accordion (single or multiple) and whether or not - * the accordion is collapsible. - */ - const toggleItem = (itemValue: string, isDisabled = false) => { - if (isDisabled || !itemValue) return; - - if (type === 'single') { - if (isCollapsible) { - if (selectedValues.includes(itemValue)) { - setSelectedValues([]); - } else { - setSelectedValues([itemValue]); - } - } else { - if (selectedValues.includes(itemValue)) return; - setSelectedValues([itemValue]); - } - } else { - if (isCollapsible) { - if (selectedValues.includes(itemValue)) { - setSelectedValues(selectedValues.filter((v) => v !== itemValue)); - } else { - setSelectedValues([...selectedValues, itemValue]); - } - } else { - if (selectedValues.includes(itemValue)) return; - setSelectedValues([...selectedValues, itemValue]); - } - } - }; - - return { - state: { - selectedValues, - toggleItem, - }, - }; -}; diff --git a/apps/website/components/ui/new-accordion/aria/useAccordionItem.ts b/apps/website/components/ui/new-accordion/aria/useAccordionItem.ts deleted file mode 100644 index cfd21e6694..0000000000 --- a/apps/website/components/ui/new-accordion/aria/useAccordionItem.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { State } from './types'; - -type Props = { - value: string; - isExpanded: boolean; - isDisabled: boolean; -}; - -export const useAccordionItem = (state: State, props: Props) => { - const { toggleItem } = state; - const { value, isExpanded, isDisabled } = props; - - // Generate unique IDs for each accordion trigger and region - const buttonId = `accordion-button-${value}`; - const regionId = `accordion-region-${value}`; - - const toggle = () => { - toggleItem(value, isDisabled); - }; - - return { - regionProps: { - 'id': regionId, - 'aria-labelledby': buttonId, - 'role': 'region', - }, - buttonProps: { - 'id': buttonId, - 'aria-controls': regionId, - 'aria-disabled': isDisabled, - 'aria-expanded': isExpanded, - 'onPress': toggle, - 'role': 'button', - }, - isExpanded, - }; -}; diff --git a/apps/website/components/ui/new-accordion/creator/Accordion.tsx b/apps/website/components/ui/new-accordion/creator/Accordion.tsx deleted file mode 100644 index 7c699331a9..0000000000 --- a/apps/website/components/ui/new-accordion/creator/Accordion.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { forwardRef, useMemo } from 'react'; -import type { IAccordionProps } from './types'; -import { AccordionContext } from './Context'; -import { useAccordion } from '@/components/ui/accordion/aria'; -import { useControlledState } from '@react-stately/utils'; - -export const Accordion = (StyledAccordion: any) => - forwardRef( - ( - { - type = 'single', - isCollapsible = true, - isDisabled = false, - value, - defaultValue = [], - onValueChange, - children, - ...props - }: IAccordionProps, - ref?: any - ) => { - const [selectedValues, setSelectedValues] = useControlledState( - value, - defaultValue, - (incomingValue: any) => { - onValueChange && onValueChange(incomingValue); - } - ); - - const { state } = useAccordion({ - type, - isCollapsible, - selectedValues, - setSelectedValues, - }); - - const contextValue = useMemo(() => { - return { - state, - isDisabledAccordion: isDisabled, - selectedValues, - }; - }, [state, isDisabled, selectedValues]); - - return ( - - - {children} - - - ); - } - ); diff --git a/apps/website/components/ui/new-accordion/creator/AccordionContent.tsx b/apps/website/components/ui/new-accordion/creator/AccordionContent.tsx deleted file mode 100644 index 442f3eedf9..0000000000 --- a/apps/website/components/ui/new-accordion/creator/AccordionContent.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { forwardRef, useContext } from 'react'; -import { AccordionItemContext } from './Context'; -import AnimatedHeight from './AnimatedHeight'; - -export const AccordionContent = (StyledAccordionContent: any) => - forwardRef(({ children, ...props }: any, ref?: any) => { - const { regionProps, isExpanded } = useContext(AccordionItemContext); - - return ( - - - {children} - - - ); - }); diff --git a/apps/website/components/ui/new-accordion/creator/AccordionContentText.tsx b/apps/website/components/ui/new-accordion/creator/AccordionContentText.tsx deleted file mode 100644 index bb4954bea0..0000000000 --- a/apps/website/components/ui/new-accordion/creator/AccordionContentText.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { forwardRef } from 'react'; - -export const AccordionContentText = (StyledAccordionContentText: any) => - forwardRef(({ children, ...props }: any, ref?: any) => { - return ( - - {children} - - ); - }); diff --git a/apps/website/components/ui/new-accordion/creator/AccordionHeader.tsx b/apps/website/components/ui/new-accordion/creator/AccordionHeader.tsx deleted file mode 100644 index 153c9aeb56..0000000000 --- a/apps/website/components/ui/new-accordion/creator/AccordionHeader.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { forwardRef } from 'react'; - -export const AccordionHeader = (StyledAccordionHeader: any) => - forwardRef(({ children, ...props }: any, ref?: any) => { - return ( - - {children} - - ); - }); diff --git a/apps/website/components/ui/new-accordion/creator/AccordionIcon.tsx b/apps/website/components/ui/new-accordion/creator/AccordionIcon.tsx deleted file mode 100644 index a7c5587179..0000000000 --- a/apps/website/components/ui/new-accordion/creator/AccordionIcon.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React, { forwardRef } from 'react'; - -export const AccordionIcon = (StyledAccordionIcon: any) => - forwardRef((props: any, ref?: any) => { - return ; - }); diff --git a/apps/website/components/ui/new-accordion/creator/AccordionItem.tsx b/apps/website/components/ui/new-accordion/creator/AccordionItem.tsx deleted file mode 100644 index 05f62e00a3..0000000000 --- a/apps/website/components/ui/new-accordion/creator/AccordionItem.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { forwardRef, useContext, useMemo, useState } from 'react'; -import { AccordionContext, AccordionItemContext } from './Context'; -import type { IAccordionItemProps } from './types'; -import { useAccordionItem } from '@/components/ui/accordion/aria'; - -export const AccordionItem = (StyledAccordionItem: any) => - forwardRef(({ children, ...props }: IAccordionItemProps, ref?: any) => { - const [titleText, setTitleText] = useState(''); - const { state, isDisabledAccordion, selectedValues } = - useContext(AccordionContext); - - const { isDisabled, value } = props; - - const { regionProps, buttonProps, isExpanded } = useAccordionItem(state, { - value, - isExpanded: selectedValues.includes(value), - isDisabled: isDisabled !== undefined ? isDisabled : isDisabledAccordion, - }); - - const context = useMemo(() => { - return { - isDisabled: isDisabled !== undefined ? isDisabled : isDisabledAccordion, - isExpanded, - value, - buttonProps, - regionProps, - titleText, - setTitleText, - }; - }, [ - isDisabled, - isDisabledAccordion, - isExpanded, - value, - buttonProps, - regionProps, - titleText, - ]); - - return ( - - - {children} - - - ); - }); diff --git a/apps/website/components/ui/new-accordion/creator/AccordionTitleText.tsx b/apps/website/components/ui/new-accordion/creator/AccordionTitleText.tsx deleted file mode 100644 index 2e8ab8d96b..0000000000 --- a/apps/website/components/ui/new-accordion/creator/AccordionTitleText.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { forwardRef, useContext, useEffect } from 'react'; -import { AccordionItemContext } from './Context'; - -export const AccordionTitleText = (StyledAccordionTitleText: any) => - forwardRef( - ( - { - children, - ...props - }: { - children: string; - props: any; - }, - ref?: any - ) => { - const { setTitleText } = useContext(AccordionItemContext); - - useEffect(() => { - if (typeof children === 'string') { - setTitleText(children); - } - }, [children, setTitleText]); - - return ( - - {children} - - ); - } - ); diff --git a/apps/website/components/ui/new-accordion/creator/AccordionTrigger.tsx b/apps/website/components/ui/new-accordion/creator/AccordionTrigger.tsx deleted file mode 100644 index a13d45d6c0..0000000000 --- a/apps/website/components/ui/new-accordion/creator/AccordionTrigger.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React, { forwardRef, useContext } from 'react'; -import { AccordionItemContext } from './Context'; -import { useHover, usePress } from '@/utils/gluestack-utils/aria/interactions/src'; -import { useFocusRing, useFocus } from '@/utils/gluestack-utils/aria/focus/src'; -import { composeEventHandlers } from '@/utils/gluestack-utils/common'; -import { Platform } from 'react-native'; - -export const AccordionTrigger = (StyledAccordionTrigger: any) => - forwardRef( - ( - { - children, - isHovered: isHoveredProp, - isFocused: isFocusedProp, - isPressed: isPressedProp, - isFocusVisible: isFocusVisibleProp, - ...props - }: any, - ref?: any - ) => { - const { titleText } = useContext(AccordionItemContext); - const { isDisabled, buttonProps, isExpanded } = - useContext(AccordionItemContext); - - const { pressProps, isPressed } = usePress({ - isDisabled: isDisabled, - }); - - const { isHovered, hoverProps }: any = useHover(); - - const { isFocusVisible, focusProps: focusRingProps }: any = - useFocusRing(); - - const { isFocused, focusProps } = useFocus(); - - return ( - - {typeof children === 'function' - ? children({ - hovered: isHovered, - focused: isFocused, - pressed: isPressed, - disabled: isDisabled, - focusVisible: isFocusVisible, - isExpanded: isExpanded, - }) - : children} - - ); - } - ); diff --git a/apps/website/components/ui/new-accordion/creator/AnimatedHeight.tsx b/apps/website/components/ui/new-accordion/creator/AnimatedHeight.tsx deleted file mode 100644 index 356af82151..0000000000 --- a/apps/website/components/ui/new-accordion/creator/AnimatedHeight.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { useRef, useEffect, useState } from 'react'; -import { Animated, StyleSheet } from 'react-native'; - -const AnimatedHeight = ({ hide, extraHeight = 0, children }: any) => { - const [measuredHeight, setMeasuredHeight] = useState(0); - const opacityValue = useRef(new Animated.Value(hide ? 0 : 1)).current; - const heightValue = useRef( - new Animated.Value(hide ? 0 : measuredHeight + extraHeight) - ).current; - - useEffect(() => { - Animated.timing(opacityValue, { - toValue: hide ? 0 : 1, - duration: 200, // Set your transition duration here - useNativeDriver: false, - }).start(); - - Animated.timing(heightValue, { - toValue: hide ? 0 : 1, - duration: 200, - useNativeDriver: false, - }).start(); - }, [hide, measuredHeight, extraHeight, heightValue, opacityValue]); - - const animatedHeight = heightValue.interpolate({ - inputRange: [0, 1], - outputRange: [0, measuredHeight + extraHeight], - }); - - return ( - - { - const height = Math.round(e.nativeEvent.layout.height); - setMeasuredHeight(height); - }} - > - {children} - - - ); -}; - -export default AnimatedHeight; - -const styles = StyleSheet.create({ - autoBottom: { - bottom: 'auto', - }, - hidden: { - overflow: 'hidden', - }, -}); diff --git a/apps/website/components/ui/new-accordion/creator/Context.tsx b/apps/website/components/ui/new-accordion/creator/Context.tsx deleted file mode 100644 index 134da447cf..0000000000 --- a/apps/website/components/ui/new-accordion/creator/Context.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from 'react'; -export const AccordionContext = createContext({}); -export const AccordionItemContext = createContext({}); diff --git a/apps/website/components/ui/new-accordion/creator/index.tsx b/apps/website/components/ui/new-accordion/creator/index.tsx deleted file mode 100644 index 77c1feabb9..0000000000 --- a/apps/website/components/ui/new-accordion/creator/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import type React from 'react'; -import { Accordion as AccordionMain } from './Accordion'; -import { AccordionTitleText } from './AccordionTitleText'; -import { AccordionContentText } from './AccordionContentText'; -import { AccordionItem } from './AccordionItem'; -import { AccordionTrigger } from './AccordionTrigger'; -import { AccordionContent } from './AccordionContent'; -import type { IAccordionComponentType } from './types'; -import { AccordionIcon } from './AccordionIcon'; -import { AccordionHeader } from './AccordionHeader'; - -export function createAccordion< - AccordionProps, - ItemProps, - HeaderProps, - TriggerProps, - ContentProps, - IconProps, - TitleTextProps, - ContentTextProps ->({ - Root, - Item, - Header, - Trigger, - Content, - Icon, - TitleText, - ContentText, -}: { - Root: React.ComponentType; - Item: React.ComponentType; - Header: React.ComponentType; - Trigger: React.ComponentType; - Content: React.ComponentType; - Icon: React.ComponentType; - TitleText: React.ComponentType; - ContentText: React.ComponentType; -}) { - const Accordion = AccordionMain(Root) as any; - Accordion.Item = AccordionItem(Item); - Accordion.Header = AccordionHeader(Header); - Accordion.Trigger = AccordionTrigger(Trigger); - Accordion.Content = AccordionContent(Content); - Accordion.Icon = AccordionIcon(Icon); - Accordion.TitleText = AccordionTitleText(TitleText); - Accordion.ContentText = AccordionContentText(ContentText); - - Accordion.displayName = 'Accordion'; - Accordion.Item.displayName = 'Accordion.Item'; - Accordion.Header.displayName = 'Accordion.Header'; - Accordion.Trigger.displayName = 'Accordion.Trigger'; - Accordion.Content.displayName = 'Accordion.Content'; - Accordion.Icon.displayName = 'Accordion.Icon'; - Accordion.TitleText.displayName = 'Accordion.TtitleText'; - - return Accordion as IAccordionComponentType< - AccordionProps, - ItemProps, - HeaderProps, - TriggerProps, - ContentProps, - IconProps, - TitleTextProps, - ContentTextProps - >; -} diff --git a/apps/website/components/ui/new-accordion/creator/types.ts b/apps/website/components/ui/new-accordion/creator/types.ts deleted file mode 100644 index 05915b55b2..0000000000 --- a/apps/website/components/ui/new-accordion/creator/types.ts +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react'; -import type { ViewProps } from 'react-native'; - -export interface IAccordionProps extends ViewProps { - /** - * Determines whether one or multiple items can be opened at the same time. - */ - - type?: 'single' | 'multiple'; - - /** - * When type is "single" or "multiple", allows closing content when clicking trigger for an open item. - */ - - isCollapsible?: boolean; - - /** - * The value of the item to expand when initially rendered when type is "single" or "multiple". - */ - - defaultValue?: string[]; - - /** - * The controlled value of the item to expand when type is "single" or "multiple". - */ - - value?: string[]; - - /** - * Event handler called when the expanded state of an item changes and type is "single" or "multiple". - */ - - onValueChange?: (value: string[]) => void; - - /** - * When true, prevents the user from interacting with the accordion and all its items. - */ - - isDisabled?: boolean; -} - -export interface IAccordionItemProps { - /** - * When true, prevents the user from interacting with the accordion and all its items. - */ - isDisabled?: boolean; - value: string; - children: JSX.Element | Array; -} - -export interface IAccordionTriggerProps { - /** - * If true, the button will be in pressed state. - */ - isPressed?: boolean; - - /** - * If true, the button will be in disabled state. - */ - isDisabled?: boolean; - - /** - * If true, the button will be in hovered state. - */ - isHovered?: boolean; - - /** - * If true, the button will be focused. - */ - isFocused?: boolean; - - /** - * If true, the button focus ring will be visible. - */ - isFocusVisible?: boolean; - isExpanded?: boolean; - children: JSX.Element | Array | ((props: any) => JSX.Element); - - /** - * Event handler called when the trigger is pressed. - */ - toggleItem?: () => void; -} - -export type IAccordionComponentType< - AccordionProps, - ItemProps, - HeaderProps, - TriggerProps, - ContentProps, - IconProps, - TitleTextProps, - ContentTextProps -> = React.ForwardRefExoticComponent< - React.PropsWithoutRef & - React.RefAttributes -> & { - Item: React.ForwardRefExoticComponent< - React.PropsWithoutRef & - React.RefAttributes - >; - Header: React.ForwardRefExoticComponent< - React.PropsWithoutRef & React.RefAttributes - >; - Trigger: React.ForwardRefExoticComponent< - React.PropsWithoutRef< - Omit & IAccordionTriggerProps - > & - React.RefAttributes - >; - Content: React.ForwardRefExoticComponent< - React.PropsWithoutRef & React.RefAttributes - >; - TitleText: React.ForwardRefExoticComponent< - React.PropsWithoutRef & React.RefAttributes - >; - ContentText: React.ForwardRefExoticComponent< - React.PropsWithoutRef & - React.RefAttributes - >; - Icon: React.ForwardRefExoticComponent< - React.PropsWithoutRef & React.RefAttributes - >; -}; diff --git a/apps/website/components/ui/new-accordion/index.tsx b/apps/website/components/ui/new-accordion/index.tsx deleted file mode 100644 index 80df4c66ee..0000000000 --- a/apps/website/components/ui/new-accordion/index.tsx +++ /dev/null @@ -1,331 +0,0 @@ -"use client"; -import React from "react"; -import { createAccordion } from "@/components/ui/accordion/creator"; -import { View, Pressable, Text, Platform, TextProps } from "react-native"; -import { tva } from "@/utils/gluestack-utils/nativewind/utils/tva"; -import type { VariantProps } from "@/utils/gluestack-utils/nativewind/utils"; -import { - withStyleContext, - useStyleContext, -} from "@/utils/gluestack-utils/nativewind/utils/withStyleContext"; -import { H3 } from "@expo/html-elements"; -import { cssInterop } from "nativewind"; -import { PrimitiveIcon, UIIcon } from "@/components/ui/icon/creator"; - -const SCOPE = "ACCORDION"; -/** Styles */ - -const accordionStyle = tva({ - base: "w-full", - variants: { - variant: { - filled: "bg-white shadow-hard-2", - unfilled: "", - }, - size: { - sm: "", - md: "", - lg: "", - }, - }, -}); - -const accordionItemStyle = tva({ - base: "", - 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: "text-typography-900 fill-none", - 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: "pt-1 pb-3 px-4", -}); -const accordionTriggerStyle = tva({ - base: "w-full 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 py-3 px-4", -}); - -const Root = withStyleContext(View, SCOPE); - -const Header = ( - Platform.OS === "web" ? H3 : View -) as React.ComponentType; - -/** Creator */ -const UIAccordion = createAccordion({ - Root: Root, - Item: View, - Header: Header, - Trigger: Pressable, - Icon: UIIcon, - TitleText: Text, - ContentText: Text, - Content: View, -}); - -cssInterop(PrimitiveIcon, { - className: { - target: "style", - nativeStyleToProp: { - height: true, - width: true, - fill: true, - color: "classNameColor", - stroke: true, - }, - }, -}); - -cssInterop(H3, { - className: { - target: "style", - }, -}); - -type IAccordionProps = React.ComponentPropsWithoutRef & - VariantProps; - -type IAccordionItemProps = React.ComponentPropsWithoutRef< - typeof UIAccordion.Item -> & - VariantProps; - -type IAccordionContentProps = React.ComponentPropsWithoutRef< - typeof UIAccordion.Content -> & - VariantProps; - -type IAccordionContentTextProps = React.ComponentPropsWithoutRef< - typeof UIAccordion.ContentText -> & - VariantProps; - -type IAccordionIconProps = VariantProps & - React.ComponentPropsWithoutRef & { - as?: React.ElementType; - height?: number; - width?: number; - }; - -type IAccordionHeaderProps = React.ComponentPropsWithoutRef< - typeof UIAccordion.Header -> & - VariantProps; - -type IAccordionTriggerProps = React.ComponentPropsWithoutRef< - typeof UIAccordion.Trigger -> & - VariantProps; - -type IAccordionTitleTextProps = React.ComponentPropsWithoutRef< - typeof UIAccordion.TitleText -> & - VariantProps; - -/** Components */ - -const Accordion = React.forwardRef< - React.ComponentRef, - IAccordionProps ->(({ className, variant = "filled", size = "md", ...props }, ref) => { - return ( - - ); -}); - -const AccordionItem = React.forwardRef< - React.ComponentRef, - IAccordionItemProps ->(({ className, ...props }, ref) => { - const { variant } = useStyleContext(SCOPE); - return ( - - ); -}); - -const AccordionContent = React.forwardRef< - React.ComponentRef, - IAccordionContentProps ->(function AccordionContent({ className, ...props }, ref) { - return ( - - ); -}); - -const AccordionContentText = React.forwardRef< - React.ComponentRef, - IAccordionContentTextProps ->(function AccordionContentText({ className, ...props }, ref) { - const { size } = useStyleContext(SCOPE); - return ( - - ); -}); - -const AccordionIcon = React.forwardRef< - React.ComponentRef, - IAccordionIconProps ->(function AccordionIcon({ size, className, ...props }, ref) { - 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< - React.ComponentRef, - IAccordionHeaderProps ->(function AccordionHeader({ className, ...props }, ref) { - return ( - - ); -}); - -const AccordionTrigger = React.forwardRef< - React.ComponentRef, - IAccordionTriggerProps ->(function AccordionTrigger({ className, ...props }, ref) { - return ( - - ); -}); -const AccordionTitleText = React.forwardRef< - React.ComponentRef, - IAccordionTitleTextProps ->(function AccordionTitleText({ className, ...props }, ref) { - 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/packages/components/ui/accordion/docs/index.mdx b/packages/components/ui/accordion/docs/index.mdx index f247510723..1d4f267982 100644 --- a/packages/components/ui/accordion/docs/index.mdx +++ b/packages/components/ui/accordion/docs/index.mdx @@ -1,3 +1,16 @@ +--- +title: Accordion Component | gluestack-ui | Installation, Usage & API + +description: Explore gluestack's Accordion component for Expo, next.js, React & React Native. Build sleek, interactive accordions with ease. + +pageTitle: Accordion + +pageDescription: Explore gluestack's Accordion component for Expo, next.js, React & React Native. Build sleek, interactive accordions with ease. + +showHeader: true +--- + + import {Tabs,TabItem} from '@/docs-components/tabs' import {Table,TableHeader,TableCell,TableHeaderCell,TableBody,TableRow} from '@/docs-components/table' import {InlineCode} from '@/docs-components/inline-code' diff --git a/scripts/mappers/website/docsOperations.ts b/scripts/mappers/website/docsOperations.ts index 14636d9242..4ae1f564d0 100644 --- a/scripts/mappers/website/docsOperations.ts +++ b/scripts/mappers/website/docsOperations.ts @@ -28,7 +28,8 @@ export const copyComponentsDocs = (component: string) => { // Process code examples in copied files templateGen.processFileForExamples( path.join(destPath, "index.mdx"), - component + component, + destPath ); // Create page.tsx file for routing fileOps.writeTextFile( diff --git a/scripts/mappers/website/templateGenerator.ts b/scripts/mappers/website/templateGenerator.ts index a9a77abaeb..cd2a1146eb 100644 --- a/scripts/mappers/website/templateGenerator.ts +++ b/scripts/mappers/website/templateGenerator.ts @@ -4,6 +4,7 @@ import { componentPreviewerTemplate, pageContentTemplate, codePreviewerTemplate, + layoutTemplate, } from "./templates"; import { CodePreviewerRegex } from "../utils/regex"; interface ImportMap { @@ -48,8 +49,8 @@ export const generateCodePreviewer = ( // If this is the basic example, copy it to the docs components folder if ( exampleName === "basic" && - (component !== "use-break-point-value" && - component !== "use-media-query") + component !== "use-break-point-value" && + component !== "use-media-query" ) { const websitePath = path.resolve( "apps/website/components/page-components/all-components" @@ -100,6 +101,37 @@ export const generatePageContent = (): string => { return pageContentTemplate; }; +export const replaceFrontMatter = ( + content: string, + destPath: string +): string => { + const frontMatterRegex = /---([\s\S]*?)---/; + const frontMatterObj: Record = {}; + const frontMatterMatch = content.replace(frontMatterRegex, (frontMatter) => { + const lines = frontMatter.split("\n"); + + for (const line of lines) { + const trimmedLine = line.trim(); + if (trimmedLine) { + const [key, ...valueParts] = trimmedLine.split(":"); + if (key && valueParts.length > 0) { + const value = valueParts.join(":").trim(); + if (value.toLowerCase() === "true") { + frontMatterObj[key.trim()] = true; + } else if (value.toLowerCase() === "false") { + frontMatterObj[key.trim()] = false; + } else { + frontMatterObj[key.trim()] = value; + } + } + } + } + return ``; + }); + fileOps.writeTextFile(path.join(destPath, "layout.tsx"), layoutTemplate(frontMatterObj)); + return frontMatterMatch; +}; + export const processFileContent = (content: string): string => { const fileContentRegex = /%%--\s*File:\s*([^%]+)\s*--%%/g; return content.replace(fileContentRegex, (_, filePath) => { @@ -115,10 +147,12 @@ export const processFileContent = (content: string): string => { export const processFileForExamples = ( filePath: string, - component: string + component: string, + destPath: string ): boolean => { const importMap: ImportMap = { "@/components/custom/code-previewer": ["CodePreviewer"], + "@/components/custom/meta": ["Meta"], }; // Read file content const content = fileOps.readTextFile(filePath); @@ -137,6 +171,7 @@ export const processFileForExamples = ( // Process file content markers const processedContent = processFileContent(newContent); + const frontMatter = replaceFrontMatter(processedContent, destPath); // Generate import statements in one go const importContent = Object.entries(importMap) .map(([path, imports]) => { @@ -144,7 +179,7 @@ export const processFileForExamples = ( }) .join("\n"); - const totalContent = `${importContent}\n\n${processedContent}`; + const totalContent = `${importContent}\n\n${frontMatter}`; if (content !== totalContent) { fileOps.writeTextFile(filePath, totalContent); @@ -152,3 +187,4 @@ export const processFileForExamples = ( } return false; }; + diff --git a/scripts/mappers/website/templates.ts b/scripts/mappers/website/templates.ts index 61dc82904e..35401d1a0f 100644 --- a/scripts/mappers/website/templates.ts +++ b/scripts/mappers/website/templates.ts @@ -2,7 +2,7 @@ export const componentPreviewerTemplate = ( imports: string, code: string, argTypes: string, - reactLive: string, + reactLive: string ) => `import { ComponentPreviewer } from '@/components/custom/component-previewer'; ${imports} @@ -33,7 +33,7 @@ export const codePreviewerTemplate = ( reactLive: string, title: string, description: string -) => +) => ` ${title && `#### ${title}`} @@ -44,3 +44,28 @@ export const codePreviewerTemplate = ( argTypes={${argTypes}} reactLive={${reactLive}} />`; + +export const layoutTemplate = (frontMatter: Record) => ` +import React from 'react'; +import { Metadata } from 'next'; + + export const metadata: Metadata = { + ${Object.entries(frontMatter) + .map(([key, value]) => ` "${key}": ${JSON.stringify(value)}`) + .join(",\n ")} + } + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + + + return ( + <> + {children} + + ); +} +`;