From ce79949741997981cf744b637cc21fc50bccf420 Mon Sep 17 00:00:00 2001 From: Akash Gautam <akash3gtm@gmail.com> Date: Thu, 16 Jan 2025 17:20:23 +0530 Subject: [PATCH 1/7] fix: spelling change --- .../tutorials/building-ecommerce-app/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx index b8a593793..bb74f54fd 100644 --- a/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx @@ -11,6 +11,6 @@ import VadimStream from '../../../extra-components/nativewind/VadimStream'; # Learn about gluestack from Youtube guru [notJust.dev](https://www.youtube.com/@notjustdev) -Vadim, popularly known as "not-just-dev" on YouTube, offers insightful and practical videos that explore a wide range of developer tools and frameworks, including Gluestack-UI. +Vadim, popularly known as "not-just-dev" on YouTube, offers insightful and practical videos that explore a wide range of developer tools and frameworks, including gluestack-ui. <VadimStream /> From 5d67dcb65ce93f243b0b3db2b4896163eebddd94 Mon Sep 17 00:00:00 2001 From: Akash Gautam <akash3gtm@gmail.com> Date: Thu, 16 Jan 2025 17:21:19 +0530 Subject: [PATCH 2/7] fix: spelling change --- .../tutorials/building-ecommerce-app/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx index bb74f54fd..1e3c6a162 100644 --- a/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/guides/tutorials/building-ecommerce-app/index.nw.stories.mdx @@ -9,7 +9,7 @@ import VadimStream from '../../../extra-components/nativewind/VadimStream'; <Meta title="with-nativewind/Guides/Tutorials/Building Ecommerce App" /> -# Learn about gluestack from Youtube guru [notJust.dev](https://www.youtube.com/@notjustdev) +# Learn about gluestack from YouTube guru [notJust.dev](https://www.youtube.com/@notjustdev) Vadim, popularly known as "not-just-dev" on YouTube, offers insightful and practical videos that explore a wide range of developer tools and frameworks, including gluestack-ui. From b352ce5968725ee94f9cc876fbb4cd18fbcbde29 Mon Sep 17 00:00:00 2001 From: rajat693 <rajatchaudhary.rc693@gmail.com> Date: Thu, 23 Jan 2025 15:55:23 +0530 Subject: [PATCH 3/7] feat: added script to add imports in component examples --- .../scripts/componentsImportList.js | 247 +++++++++++++++ .../scripts/update-mdx.js | 288 ++++++++++++++++++ example/storybook-nativewind/src/utils.ts | 7 +- 3 files changed, 540 insertions(+), 2 deletions(-) create mode 100644 example/storybook-nativewind/scripts/componentsImportList.js create mode 100644 example/storybook-nativewind/scripts/update-mdx.js diff --git a/example/storybook-nativewind/scripts/componentsImportList.js b/example/storybook-nativewind/scripts/componentsImportList.js new file mode 100644 index 000000000..859289d8a --- /dev/null +++ b/example/storybook-nativewind/scripts/componentsImportList.js @@ -0,0 +1,247 @@ +export const componentsImportMap = { + 'accordion': [ + 'Accordion', + 'AccordionItem', + 'AccordionHeader', + 'AccordionTrigger', + 'AccordionTitleText', + 'AccordionContentText', + 'AccordionIcon', + 'AccordionContent', + ], + 'actionsheet': [ + 'Actionsheet', + 'ActionsheetContent', + 'ActionsheetItem', + 'ActionsheetItemText', + 'ActionsheetDragIndicator', + 'ActionsheetDragIndicatorWrapper', + 'ActionsheetBackdrop', + 'ActionsheetScrollView', + 'ActionsheetVirtualizedList', + 'ActionsheetFlatList', + 'ActionsheetSectionList', + 'ActionsheetSectionHeaderText', + 'ActionsheetIcon', + ], + 'bottomsheet': [ + 'BottomSheet', + 'BottomSheetPortal', + 'BottomSheetTrigger', + 'BottomSheetBackdrop', + 'BottomSheetDragIndicator', + 'BottomSheetContent', + 'BottomSheetItem', + 'BottomSheetItemText', + 'BottomSheetScrollView', + 'BottomSheetFlatList', + 'BottomSheetSectionList', + 'BottomSheetTextInput', + ], + 'alert': ['Alert', 'AlertText', 'AlertIcon'], + 'alert-dialog': [ + 'AlertDialog', + 'AlertDialogContent', + 'AlertDialogCloseButton', + 'AlertDialogHeader', + 'AlertDialogFooter', + 'AlertDialogBody', + 'AlertDialogBackdrop', + ], + 'avatar': [ + 'Avatar', + 'AvatarBadge', + 'AvatarFallbackText', + 'AvatarImage', + 'AvatarGroup', + ], + 'badge': ['Badge', 'BadgeIcon', 'BadgeText'], + 'box': ['Box'], + 'button': [ + 'Button', + 'ButtonText', + 'ButtonSpinner', + 'ButtonIcon', + 'ButtonGroup', + ], + 'card': ['Card'], + 'center': ['Center'], + 'checkbox': [ + 'Checkbox', + 'CheckboxIndicator', + 'CheckboxLabel', + 'CheckboxIcon', + 'CheckboxGroup', + ], + 'divider': ['Divider'], + 'drawer': [ + 'Drawer', + 'DrawerBackdrop', + 'DrawerContent', + 'DrawerCloseButton', + 'DrawerHeader', + 'DrawerBody', + 'DrawerFooter', + ], + 'fab': ['Fab', 'FabLabel', 'FabIcon'], + 'flat-list': ['FlatList'], + 'form-control': [ + 'FormControl', + 'FormControlError', + 'FormControlErrorText', + 'FormControlErrorIcon', + 'FormControlLabel', + 'FormControlLabelText', + 'FormControlLabelAstrick', + 'FormControlHelper', + 'FormControlHelperText', + ], + 'grid': ['Grid', 'GridItem'], + 'gluestack-ui-provider': ['GluestackUIProvider'], + 'heading': ['Heading'], + 'hstack': ['HStack'], + 'image': ['Image'], + 'image-background': ['ImageBackground'], + 'image-viewer': [ + 'ImageViewer', + 'ImageViewerBackdrop', + 'ImageViewerContent', + 'ImageViewerImage', + 'ImageViewerCloseButton', + ], + 'input': ['Input', 'InputField', 'InputIcon', 'InputSlot'], + 'input-accessory-view': ['InputAccessoryView'], + 'keyboard-avoiding-view': ['KeyboardAvoidingView'], + 'link': ['Link', 'LinkText'], + 'menu': ['Menu', 'MenuItem', 'MenuItemLabel', 'MenuSeparator'], + 'modal': [ + 'Modal', + 'ModalBackdrop', + 'ModalContent', + 'ModalCloseButton', + 'ModalHeader', + 'ModalBody', + 'ModalFooter', + ], + 'pin-input': ['PinInput', 'PinInputField'], + 'popover': [ + 'Popover', + 'PopoverBackdrop', + 'PopoverArrow', + 'PopoverCloseButton', + 'PopoverFooter', + 'PopoverHeader', + 'PopoverBody', + 'PopoverContent', + ], + 'pressable': ['Pressable'], + 'progress': ['Progress', 'ProgressFilledTrack'], + 'radio': ['Radio', 'RadioGroup', 'RadioIndicator', 'RadioLabel', 'RadioIcon'], + 'refresh-control': ['RefreshControl'], + 'safe-area-view': ['SafeAreaView'], + 'scroll-view': ['ScrollView'], + 'section-list': ['SectionList'], + 'select': [ + 'Select', + 'SelectTrigger', + 'SelectInput', + 'SelectIcon', + 'SelectPortal', + 'SelectBackdrop', + 'SelectContent', + 'SelectDragIndicator', + 'SelectDragIndicatorWrapper', + 'SelectItem', + 'SelectItemText', + 'SelectScrollView', + 'SelectVirtualizedList', + 'SelectFlatList', + 'SelectSectionList', + 'SelectSectionHeaderText', + ], + 'skeleton': ['Skeleton', 'SkeletonText'], + 'slider': ['Slider', 'SliderThumb', 'SliderTrack', 'SliderFilledTrack'], + 'spinner': ['Spinner'], + 'statusbar': ['StatusBar'], + 'switch': ['Switch'], + 'table': [ + 'Table', + 'TableHeader', + 'TableBody', + 'TableFooter', + 'TableHead', + 'TableRow', + 'TableData', + 'TableCaption', + ], + 'text': ['Text'], + 'textarea': ['Textarea', 'TextareaInput'], + 'toast': ['useToast', 'Toast', 'ToastTitle', 'ToastDescription'], + 'tooltip': ['Tooltip', 'TooltipContent', 'TooltipText'], + 'view': ['View'], + 'virtualized-list': ['VirtualizedList'], + 'vstack': ['VStack'], + 'icon': [ + 'Icon', + 'createIcon', + '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', + ], + 'tailwindcss/colors': ['colors'], + 'react-native': ['Platform'], + 'react': ['React'], + 'react-native-svg': ['Path', 'Rect'], +}; diff --git a/example/storybook-nativewind/scripts/update-mdx.js b/example/storybook-nativewind/scripts/update-mdx.js new file mode 100644 index 000000000..fd44c4efb --- /dev/null +++ b/example/storybook-nativewind/scripts/update-mdx.js @@ -0,0 +1,288 @@ +// this script is used to add imports to all the examples of the components. +const fs = require('fs'); +const path = require('path'); +const { parse } = require('@babel/parser'); +const traverse = require('@babel/traverse').default; +const { componentsImportMap } = require('./componentsImportList'); + +function removeEmptyLines(code) { + return code + .split('\n') + .filter((line) => line.trim() !== '') + .join('\n'); +} + +function removeComments(code) { + // Remove only JSX comments wrapped in curly braces + code = code.replace(/{\s*\/\*[\s\S]*?\*\/\s*}|{\s*\/\/.*?\s*}/g, ''); + + const cleanedCode = removeEmptyLines(code); + return cleanedCode; +} + +function hasExistingImports(code) { + const importRegex = /^\s*import\s+.*?['"].*?['"]\s*;?\s*$/gm; + return importRegex.test(code); +} + +// Function to extract code blocks from MDX content +function extractCodeBlocks(mdxContent) { + const codeBlockRegex = /code: `([\s\S]*?)`/g; + const matches = []; + let match; + + while ((match = codeBlockRegex.exec(mdxContent)) !== null) { + matches.push({ + fullMatch: match[0], + codeContent: match[1], + startIndex: match.index, + endIndex: match.index + match[0].length, + }); + } + + return matches; +} + +// Updated component extraction function using the provided logic +function extractComponents(code) { + const controller = require('jscodeshift'); + const ast = controller(code); + const componentsList = new Set(); + const codeVariables = []; + + ast.find(controller.VariableDeclaration).forEach((item) => { + codeVariables.push(item.value.declarations[0].id.name); + }); + + ast.find(controller.JSXIdentifier).forEach((item) => { + if (item.parentPath.name === 'openingElement') { + componentsList.add(item.value.name); + } + }); + + ast.find(controller.JSXAttribute).forEach((item) => { + if (item.value.name.name === 'as' && item.value.value.expression.name) { + componentsList.add(item.value.value.expression.name); + } + }); + + ast.find(controller.ConditionalExpression).forEach((item) => { + if (item.value.consequent?.name) { + componentsList.add(item.value.consequent.name); + } + if (item.value.alternate?.name) { + if (item.value.alternate.name !== 'undefined') { + componentsList.add(item.value.alternate.name); + } + } + }); + + ast.find(controller.Identifier).forEach((item) => { + const specialIdentifiers = [ + 'React', + 'Platform', + 'colors', + 'useToast', + 'createIcon', + ]; + if (specialIdentifiers.includes(item.value.name)) { + componentsList.add(item.value.name); + } + }); + + return Array.from(componentsList).filter( + (element) => !codeVariables.includes(element) + ); +} + +// Updated import generation function using the provided logic +function generateImports(componentsList) { + const controller = require('jscodeshift'); + + const matchedComponentsImport = Object.entries(componentsImportMap) + .map(([key, value]) => { + const filteredComponents = value.filter((item) => + componentsList.includes(item) + ); + + if (filteredComponents.length > 0) { + return { [key]: filteredComponents }; + } + return undefined; + }) + .filter((item) => item !== undefined); + + const leftComponents = componentsList.filter( + (component) => + !matchedComponentsImport.some((entry) => + Object.values(entry)[0].includes(component) + ) + ); + + const allComponentsImport = + leftComponents?.length > 0 + ? [ + ...matchedComponentsImport, + { ['lucide-react-native']: leftComponents }, + ] + : [...matchedComponentsImport]; + + return allComponentsImport + .map((entry) => { + const [key, value] = Object.entries(entry)[0]; + const importPath = (() => { + switch (key) { + case 'react': + return key; + case 'react-native': + return key; + case 'tailwindcss/colors': + return key; + case 'lucide-react-native': + return key; + case 'react-native-svg': + return key; + default: + return `@/components/ui/${key}`; + } + })(); + + if (key === 'react' || key === 'tailwindcss/colors') { + return `import ${value[0]} from "${importPath}";`; + } else { + return `import { ${value.join(', ')} } from "${importPath}";`; + } + }) + .join('\n'); +} + +// Function to check if code needs wrapping +function needsComponentWrapping(code) { + // First, check if code already has a function or component structure + const hasFunction = /function\s+\w+\s*\([^)]*\)/.test(code); + const hasConstFunction = /const\s+\w+\s*=\s*(\([^)]*\)\s*=>|function)/.test( + code + ); + const hasExportDefault = /export\s+default\s+/.test(code); + + // If it already has any of these structures, don't wrap it + if (hasFunction || hasConstFunction || hasExportDefault) { + return false; + } + + // Check if code contains JSX or starts with return + const containsJSX = /<[A-Z][A-Za-z0-9]*/.test(code) || /<[a-z]+>/.test(code); + const startsWithReturn = /^\s*return\s*[({]/.test(code); + + // Code needs wrapping if it contains JSX or starts with return + return containsJSX || startsWithReturn; +} + +// Function to wrap code in functional component +function wrapInFunctionalComponent(code) { + return `function Example() { + return ( + ${code} + ); +}`; +} + +// Function to update transformCode parameter +function updateTransformCode(mdxContent, blockStartIndex) { + const transformCodeRegex = + /transformCode:\s*\(code\)\s*=>\s*{\s*return\s*transformedCode\(code[^}]*\);\s*}/; + const match = mdxContent.slice(blockStartIndex).match(transformCodeRegex); + + if (match) { + const newTransformCode = `transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }`; + return ( + mdxContent.slice(0, blockStartIndex + match.index) + + newTransformCode + + mdxContent.slice(blockStartIndex + match.index + match[0].length) + ); + } + + return mdxContent; +} + +// Function to update a single MDX file +function updateMDXFile(filePath) { + try { + let mdxContent = fs.readFileSync(filePath, 'utf8'); + const codeBlocks = extractCodeBlocks(mdxContent); + + for (let i = codeBlocks.length - 1; i >= 0; i--) { + const block = codeBlocks[i]; + let processedCode = block.codeContent.trim(); + + // First check if imports exist + if (hasExistingImports(processedCode)) { + continue; // Skip this code block if imports exist + } + + // Then check and handle functional component wrapping + const needsWrapping = needsComponentWrapping(processedCode); + if (needsWrapping) { + processedCode = wrapInFunctionalComponent(processedCode); + mdxContent = updateTransformCode(mdxContent, block.startIndex); + } + + // Finally, generate and add imports + const components = extractComponents(processedCode); + const imports = generateImports(components); + + // Remove comments from the code + processedCode = removeComments(processedCode); + + // Combine imports with processed code + const newCodeContent = `code: \`${imports}${ + imports ? '\n' : '' + }${processedCode}\``; + + mdxContent = + mdxContent.slice(0, block.startIndex) + + newCodeContent + + mdxContent.slice(block.endIndex); + } + + fs.writeFileSync(filePath, mdxContent); + // eslint-disable-next-line no-console + console.log(`✅ Updated ${path.basename(filePath)}`); + // eslint-disable-next-line no-console + console.log('📁 File path:', path.dirname(filePath)); + } catch (error) { + console.error(`❌ Error processing ${filePath}:`, error); + } +} + +// Function to process all component MDX files +function processAllComponents(componentsDir) { + //to test single component + // const componentName = 'accordion'; + // const mdxPath = path.join( + // componentsDir, + // componentName, + // 'index.nw.stories.mdx' + // ); + // if (fs.existsSync(mdxPath)) { + // updateMDXFile(mdxPath); + // } + const components = fs.readdirSync(componentsDir); + + components.forEach((component) => { + const mdxPath = path.join(componentsDir, component, 'index.nw.stories.mdx'); + if (fs.existsSync(mdxPath)) { + updateMDXFile(mdxPath); + } + }); +} + +// Main execution +const componentsDir = path.join(__dirname, '../src/components'); +// eslint-disable-next-line no-console +console.log('🚀 Starting MDX update process...'); +processAllComponents(componentsDir); +// eslint-disable-next-line no-console +console.log('✨ MDX update process completed!'); diff --git a/example/storybook-nativewind/src/utils.ts b/example/storybook-nativewind/src/utils.ts index 56733c4c0..8e1ceddfa 100644 --- a/example/storybook-nativewind/src/utils.ts +++ b/example/storybook-nativewind/src/utils.ts @@ -4,14 +4,17 @@ export function transformedCode( type: 'jsx' | 'function' = 'jsx', componentName?: string ) { + let codeFormat = code; + const importRegex = /import[^;]*;/g; + codeFormat = codeFormat.replace(importRegex, ''); if (type === 'function') { return `function App() { - ${code} + ${codeFormat} return <Wrapper><${componentName} /></Wrapper>; };`; } return `function App() { - return <Wrapper>${code}</Wrapper>; + return <Wrapper>${codeFormat}</Wrapper>; };`; } From 08b2f2f6a53dcde371dd92d083226dcb7df9e9ec Mon Sep 17 00:00:00 2001 From: rajat693 <rajatchaudhary.rc693@gmail.com> Date: Thu, 23 Jan 2025 16:15:23 +0530 Subject: [PATCH 4/7] feat: updated script to add space between imports and the codebase --- example/storybook-nativewind/scripts/update-mdx.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/example/storybook-nativewind/scripts/update-mdx.js b/example/storybook-nativewind/scripts/update-mdx.js index fd44c4efb..720df210b 100644 --- a/example/storybook-nativewind/scripts/update-mdx.js +++ b/example/storybook-nativewind/scripts/update-mdx.js @@ -219,6 +219,13 @@ function updateMDXFile(filePath) { // First check if imports exist if (hasExistingImports(processedCode)) { + // Add space after imports if needed + processedCode = processedCode.replace(/function/g, '\t\nfunction'); + const newCodeContent = `code: \`${processedCode}\``; + mdxContent = + mdxContent.slice(0, block.startIndex) + + newCodeContent + + mdxContent.slice(block.endIndex); continue; // Skip this code block if imports exist } From 4045d8f0b40fa962c89bbeb1177b1e98c7b17162 Mon Sep 17 00:00:00 2001 From: rajat693 <rajatchaudhary.rc693@gmail.com> Date: Thu, 23 Jan 2025 16:27:15 +0530 Subject: [PATCH 5/7] feat: added imports to all the docs component examples --- .../components/Accordion/index.nw.stories.mdx | 63 +++++---- .../Actionsheet/index.nw.stories.mdx | 122 ++++++++++++----- .../src/components/Alert/index.nw.stories.mdx | 76 ++++++++--- .../AlertDialog/index.nw.stories.mdx | 57 +++++--- .../components/Avatar/index.nw.stories.mdx | 129 ++++++++++++------ .../src/components/Badge/index.nw.stories.mdx | 46 +++++-- .../src/components/Box/index.nw.stories.mdx | 15 +- .../components/Button/index.nw.stories.mdx | 85 ++++++++---- .../src/components/Card/index.nw.stories.mdx | 61 +++++++-- .../components/Center/index.nw.stories.mdx | 13 +- .../components/Checkbox/index.nw.stories.mdx | 103 +++++++++----- .../components/Divider/index.nw.stories.mdx | 74 +++++++--- .../components/Drawer/index.nw.stories.mdx | 53 ++++--- .../src/components/Fab/index.nw.stories.mdx | 86 +++++++++--- .../FormControl/index.nw.stories.mdx | 79 +++++++---- .../src/components/Grid/index.nw.stories.mdx | 70 ++++++---- .../components/HStack/index.nw.stories.mdx | 26 ++-- .../components/Heading/index.nw.stories.mdx | 21 +-- .../src/components/Icon/index.nw.stories.mdx | 51 ++++--- .../src/components/Image/index.nw.stories.mdx | 26 ++-- .../ImageViewer/index.nw.stories.mdx | 28 ++-- .../src/components/Input/index.nw.stories.mdx | 40 ++++-- .../src/components/Link/index.nw.stories.mdx | 56 +++++--- .../src/components/Menu/index.nw.stories.mdx | 40 ++++-- .../src/components/Modal/index.nw.stories.mdx | 92 +++++++++---- .../components/PinInput/index.nw.stories.mdx | 21 +-- .../components/Popover/index.nw.stories.mdx | 71 +++++++--- .../components/Portal/index.nw.stories.mdx | 13 +- .../components/Pressable/index.nw.stories.mdx | 24 +++- .../components/Progress/index.nw.stories.mdx | 55 +++++--- .../src/components/Radio/index.nw.stories.mdx | 109 ++++++++++----- .../components/Select/index.nw.stories.mdx | 27 ++-- .../components/Skeleton/index.nw.stories.mdx | 32 +++-- .../components/Slider/index.nw.stories.mdx | 13 +- .../components/Spinner/index.nw.stories.mdx | 42 ++++-- .../components/Switch/index.nw.stories.mdx | 43 ++++-- .../src/components/Table/index.nw.stories.mdx | 40 ++++-- .../src/components/Text/index.nw.stories.mdx | 21 +-- .../components/Textarea/index.nw.stories.mdx | 25 ++-- .../src/components/Toast/index.nw.stories.mdx | 68 ++++++--- .../components/Tooltip/index.nw.stories.mdx | 41 ++++-- .../components/VStack/index.nw.stories.mdx | 26 ++-- 42 files changed, 1523 insertions(+), 660 deletions(-) diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx index ecf1c8753..38fbfdc89 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx @@ -55,8 +55,13 @@ This is an illustration of **Accordion** component. justifyContent: 'stretch', }} metaData={{ - code: ` - <Accordion {...props} className="m-5 w-[90%] border border-outline-200"> + code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion"; +import { Divider } from "@/components/ui/divider"; +import { ChevronUpIcon, ChevronDownIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Accordion {...props} className="m-5 w-[90%] border border-outline-200"> <AccordionItem value="a"> <AccordionHeader> <AccordionTrigger> @@ -112,9 +117,10 @@ This is an illustration of **Accordion** component. </AccordionContent> </AccordionItem> </Accordion> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Accordion, @@ -497,7 +503,9 @@ The following example demonstrates how easily you can customize the Accordion co justifyContent: 'stretch', }} metaData={{ - code: ` + code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion"; +import { ChevronUpIcon, ChevronDownIcon } from "@/components/ui/icon"; + function App(){ return ( <Accordion @@ -604,8 +612,7 @@ function App(){ </AccordionItem> </Accordion> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -640,7 +647,9 @@ The borderRadius prop can be used to create rounded corners for both the Accordi justifyContent: 'stretch', }} metaData={{ - code: ` + code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion"; +import { MinusIcon, PlusIcon } from "lucide-react-native"; + function App(){ return ( <Accordion className="m-5 w-[80%] max-w-[640px] bg-transparent"> @@ -701,8 +710,7 @@ function App(){ </AccordionItem> </Accordion> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -736,7 +744,9 @@ You can disable an item by setting the isDisabled prop to true. This will preven justifyContent: 'stretch', }} metaData={{ - code: ` + code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion"; +import { MinusIcon, PlusIcon } from "lucide-react-native"; + function App(){ return ( <Accordion variant="unfilled" className="m-5 w-[90%]"> @@ -756,7 +766,6 @@ function App(){ ) : ( <AccordionIcon as={PlusIcon} /> )} - </> ); }} @@ -768,7 +777,6 @@ function App(){ </AccordionContentText> </AccordionContent> </AccordionItem> - <AccordionItem value="item-2" > <AccordionHeader> <AccordionTrigger> @@ -798,8 +806,7 @@ function App(){ </AccordionItem> </Accordion> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -834,7 +841,10 @@ Use the defaultValue prop to define the open item by default. justifyContent: 'stretch', }} metaData={{ - code: ` + code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion"; +import { Divider } from "@/components/ui/divider"; +import { MinusIcon, PlusIcon } from "lucide-react-native"; + function App(){ return ( <Accordion variant="unfilled" type="single" defaultValue="item-3" className="w-[90%] m-5"> @@ -852,7 +862,6 @@ function App(){ ) : ( <AccordionIcon as={PlusIcon} /> )} - </> ); }} @@ -920,8 +929,7 @@ function App(){ </AccordionItem> </Accordion> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -956,7 +964,9 @@ You can nest Accordion components to create a nested accordion. This is useful w justifyContent: 'stretch', }} metaData={{ - code: ` + code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion"; +import { MinusIcon, PlusIcon } from "lucide-react-native"; + function App(){ return ( <Accordion @@ -1041,8 +1051,7 @@ function App(){ </AccordionItem> </Accordion> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -1078,7 +1087,10 @@ You can make the Accordion component controlled by passing the value prop to the justifyContent: 'stretch', }} metaData={{ - code: ` + code: `import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionContentText, AccordionIcon, AccordionContent } from "@/components/ui/accordion"; +import React from "react"; +import { MinusIcon, PlusIcon } from "lucide-react-native"; + function App(){ const [selectedValues, setSelectedValues] = React.useState(['item-1', 'item-2']); return ( @@ -1098,7 +1110,6 @@ function App(){ ) : ( <AccordionIcon as={PlusIcon} /> )} - </> ); }} @@ -1110,7 +1121,6 @@ function App(){ </AccordionContentText> </AccordionContent> </AccordionItem> - <AccordionItem value="item-2" > <AccordionHeader> @@ -1166,8 +1176,7 @@ function App(){ </AccordionItem> </Accordion> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx index 99e888701..02071ff94 100644 --- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx @@ -76,8 +76,11 @@ This is an illustration of **Actionsheet** component. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop } from "@/components/ui/actionsheet"; +import { Button, ButtonText } from "@/components/ui/button"; +import React from "react"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); return ( @@ -110,8 +113,7 @@ This is an illustration of **Actionsheet** component. </Actionsheet> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -554,8 +556,21 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop } from "@/components/ui/actionsheet"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { FormControl, FormControlLabel, FormControlLabelText } from "@/components/ui/form-control"; +import { HStack } from "@/components/ui/hstack"; +import { Image } from "@/components/ui/image"; +import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"; +import { KeyboardAvoidingView } from "@/components/ui/keyboard-avoiding-view"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Platform } from "react-native"; +import React from "react"; +import { CreditCardIcon } from "lucide-react-native"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); return ( @@ -611,8 +626,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin </KeyboardAvoidingView> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -656,8 +670,20 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop } from "@/components/ui/actionsheet"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { FormControl, FormControlLabel, FormControlLabelText } from "@/components/ui/form-control"; +import { HStack } from "@/components/ui/hstack"; +import { Image } from "@/components/ui/image"; +import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"; +import { KeyboardAvoidingView } from "@/components/ui/keyboard-avoiding-view"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import React from "react"; +import { CreditCardIcon } from "lucide-react-native"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); return ( @@ -721,8 +747,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin </Actionsheet> </> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -768,8 +793,12 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetIcon } from "@/components/ui/actionsheet"; +import { Button, ButtonText } from "@/components/ui/button"; +import { ClockIcon, DownloadIcon, EditIcon, EyeOffIcon, TrashIcon } from "@/components/ui/icon"; +import React from "react"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); return ( @@ -807,8 +836,7 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp </Actionsheet> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -844,7 +872,11 @@ The Actionsheet with Virtualized List includes a virtualized list for better per showComponentRenderer={true} showArgsController={false} metaData={{ - code: `function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetVirtualizedList } from "@/components/ui/actionsheet"; +import { Button, ButtonText } from "@/components/ui/button"; +import React from "react"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); const data = React.useMemo(() => Array(50).fill(0).map((_, index) => 'Item' + index),[]); @@ -885,8 +917,7 @@ The Actionsheet with Virtualized List includes a virtualized list for better per </Actionsheet> </> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -917,7 +948,11 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that showComponentRenderer={true} showArgsController={false} metaData={{ - code: `function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetFlatList } from "@/components/ui/actionsheet"; +import { Button, ButtonText } from "@/components/ui/button"; +import React from "react"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); const DATA = [ @@ -962,8 +997,7 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that </Actionsheet> </> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -994,7 +1028,11 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha showComponentRenderer={true} showArgsController={false} metaData={{ - code: `function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetSectionList, ActionsheetSectionHeaderText } from "@/components/ui/actionsheet"; +import { Button, ButtonText } from "@/components/ui/button"; +import React from "react"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); const DATA = [ @@ -1033,8 +1071,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha </Actionsheet> </> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -1064,8 +1101,19 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop } from "@/components/ui/actionsheet"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText, ButtonGroup } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Pressable } from "@/components/ui/pressable"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, CloseIcon } from "@/components/ui/icon"; +import React from "react"; +import { UploadCloud } from "lucide-react-native"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); return ( @@ -1114,8 +1162,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha </Actionsheet> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -1155,8 +1202,18 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetItemText, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetBackdrop, ActionsheetIcon } from "@/components/ui/actionsheet"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { HStack } from "@/components/ui/hstack"; +import { Pressable } from "@/components/ui/pressable"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, CloseIcon } from "@/components/ui/icon"; +import React from "react"; +import { Send, Percent, DollarSign } from "lucide-react-native"; + +function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); const handleClose = () => setShowActionsheet(false); return ( @@ -1235,8 +1292,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha </Actionsheet> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index 0e2785534..b440726c7 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -55,16 +55,21 @@ This is an illustration of **Alert** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Alert {...props}> + code: `import { Alert, AlertText, AlertIcon } from "@/components/ui/alert"; +import { InfoIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Alert {...props}> <AlertIcon as={InfoIcon} /> <AlertText> Description of alert! </AlertText> </Alert> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Alert, @@ -243,8 +248,14 @@ The Examples section provides visual representations of the different variants o padding: 20 }} metaData={{ - code: ` - <Alert + code: `import { Alert, AlertText } from "@/components/ui/alert"; +import { Button, ButtonText } from "@/components/ui/button"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, CloseIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Alert action="success" className="gap-4 max-w-[585px] w-full self-center items-start min-[400px]:items-center" > @@ -258,9 +269,10 @@ The Examples section provides visual representations of the different variants o </VStack> <Icon as={CloseIcon} /> </Alert> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Alert, @@ -288,8 +300,16 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Alert + code: `import { Alert, AlertText, AlertIcon } from "@/components/ui/alert"; +import { Button, ButtonText } from "@/components/ui/button"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { RepeatIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Alert action="warning" className="gap-4 max-w-[516px] w-full flex-row flex py-4 items-start self-center" > @@ -308,9 +328,10 @@ The Examples section provides visual representations of the different variants o </Button> </HStack> </Alert> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Alert, @@ -339,9 +360,13 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Alert action="error" className="gap-3"> - {/* Bomb is imported from 'lucide-react-native' */} + code: `import { Alert, AlertText, AlertIcon } from "@/components/ui/alert"; +import { Text } from "@/components/ui/text"; +import { Bomb } from "lucide-react-native"; + +function Example() { + return ( + <Alert action="error" className="gap-3"> <AlertIcon as={Bomb} size="lg" /> <AlertText className="text-typography-900" size="sm"> <Text className="mr-2 font-semibold text-typography-900"> @@ -350,9 +375,10 @@ The Examples section provides visual representations of the different variants o Once done, this action cannot be undone </AlertText> </Alert> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Alert, @@ -377,8 +403,16 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example() { + code: `import { Alert, AlertText, AlertIcon } from "@/components/ui/alert"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { EyeIcon, EyeOffIcon, InfoIcon } from "@/components/ui/icon"; +import React from "react"; + +function Example() { const [showPassword, setShowPassword] = React.useState(false); const handleState = () => { setShowPassword((showState) => { @@ -398,7 +432,6 @@ The Examples section provides visual representations of the different variants o placeholder="Enter password" /> <InputSlot className="mr-3" onPress={handleState}> - {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */} <InputIcon size="xs" as={showPassword ? EyeIcon : EyeOffIcon} @@ -419,8 +452,7 @@ The Examples section provides visual representations of the different variants o </Alert> </VStack> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx index 2ba955929..ef2cc8781 100644 --- a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx @@ -58,8 +58,13 @@ This is an illustration of **AlertDialog** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - function Example(){ + code: `import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogBody, AlertDialogBackdrop } from "@/components/ui/alert-dialog"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Text } from "@/components/ui/text"; +import React from "react"; + +function Example(){ const [showAlertDialog, setShowAlertDialog] = React.useState(false); const handleClose = () => setShowAlertDialog(false); return ( @@ -101,8 +106,7 @@ This is an illustration of **AlertDialog** component. </AlertDialog> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, @@ -492,8 +496,16 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example(){ + code: `import { AlertDialog, AlertDialogContent, AlertDialogBody, AlertDialogBackdrop } from "@/components/ui/alert-dialog"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Image } from "@/components/ui/image"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import React from "react"; + +function Example(){ const [showAlertDialog, setShowAlertDialog] = React.useState(false); const handleClose = () => setShowAlertDialog(false); return ( @@ -538,8 +550,7 @@ The Examples section provides visual representations of the different variants o </AlertDialog> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, @@ -572,8 +583,17 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example(){ + code: `import { AlertDialog, AlertDialogContent, AlertDialogFooter, AlertDialogBody, AlertDialogBackdrop } from "@/components/ui/alert-dialog"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon } from "@/components/ui/icon"; +import React from "react"; +import { UploadCloud } from "lucide-react-native"; + +function Example(){ const [showAlertDialog, setShowAlertDialog] = React.useState(false); const handleClose = () => setShowAlertDialog(false); return ( @@ -622,8 +642,7 @@ The Examples section provides visual representations of the different variants o </AlertDialog> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, @@ -657,8 +676,15 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example(){ + code: `import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogBody, AlertDialogBackdrop } from "@/components/ui/alert-dialog"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Text } from "@/components/ui/text"; +import { Icon, TrashIcon } from "@/components/ui/icon"; +import React from "react"; + +function Example(){ const [showAlertDialog, setShowAlertDialog] = React.useState(false); const handleClose = () => setShowAlertDialog(false); return ( @@ -704,8 +730,7 @@ The Examples section provides visual representations of the different variants o </AlertDialog> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx index bb5088151..5cd6fa1e2 100644 --- a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx @@ -48,8 +48,11 @@ This is an illustration of **Avatar** component. showComponentRenderer={ true } showArgsController = { true} metaData = {{ - code: ` - <Avatar {...props}> + code: `import { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; + +function Example() { + return ( + <Avatar {...props}> <AvatarFallbackText>Jane Doe</AvatarFallbackText> <AvatarImage source={{ @@ -58,10 +61,11 @@ This is an illustration of **Avatar** component. /> <AvatarBadge /> </Avatar> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); - }, + return transformedCode(code, 'function', 'Example'); + }, scope: { Wrapper, Avatar, @@ -240,7 +244,14 @@ An Avatar component with text displays a stylized representation of a user or en showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Avatar, AvatarBadge, AvatarFallbackText } from "@/components/ui/avatar"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( <VStack space="2xl"> <HStack space="md"> <Avatar className='bg-indigo-600'> @@ -262,9 +273,10 @@ An Avatar component with text displays a stylized representation of a user or en </VStack> </HStack> </VStack> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -291,11 +303,19 @@ An Avatar component with an icon combines a graphical symbol or icon with a user showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="2xl"> + code: `import { Avatar } from "@/components/ui/avatar"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon } from "@/components/ui/icon"; +import { User } from "lucide-react-native"; + +function Example() { + return ( + <VStack space="2xl"> <HStack space="md"> <Avatar className='bg-indigo-600'> - {/* User is imported from 'lucide-react-native' */} <Icon as={User} size="lg" className="stroke-white" /> </Avatar> <VStack > @@ -305,7 +325,6 @@ An Avatar component with an icon combines a graphical symbol or icon with a user </HStack> <HStack space="md"> <Avatar className='bg-pink-600'> - {/* User is imported from 'lucide-react-native' */} <Icon as={User} size="lg" className="stroke-white" /> </Avatar> <VStack > @@ -314,9 +333,10 @@ An Avatar component with an icon combines a graphical symbol or icon with a user </VStack> </HStack> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -345,8 +365,15 @@ An Avatar component with an image incorporates a user or entity representation u showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="2xl"> + code: `import { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <VStack space="2xl"> <HStack space="md"> <Avatar> <AvatarFallbackText>SS</AvatarFallbackText> @@ -377,9 +404,10 @@ An Avatar component with an image incorporates a user or entity representation u </VStack> </HStack> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -408,8 +436,9 @@ The avatar group allows users to group avatars and display them in a horizontal showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Avatar, AvatarFallbackText, AvatarGroup } from "@/components/ui/avatar"; + +function App(){ const avatars = [ { src: 'https://example.com.jpg', alt: 'Sandeep Srivastva', color:'bg-emerald-600' }, { src: 'https://example.com.jpg', alt: 'Arjun Kapoor', color:'bg-cyan-600' }, @@ -433,8 +462,7 @@ The avatar group allows users to group avatars and display them in a horizontal </Avatar> </AvatarGroup> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -461,8 +489,11 @@ An Avatar Group component without badges organizes multiple avatars in a visuall showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <AvatarGroup> + code: `import { Avatar, AvatarFallbackText, AvatarImage, AvatarGroup } from "@/components/ui/avatar"; + +function Example() { + return ( + <AvatarGroup> <Avatar size="md"> <AvatarFallbackText>John Doe</AvatarFallbackText> <AvatarImage @@ -496,9 +527,10 @@ An Avatar Group component without badges organizes multiple avatars in a visuall /> </Avatar> </AvatarGroup> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Avatar, @@ -523,8 +555,11 @@ An Avatar Group component with badges presents a collection of avatars with acco showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <AvatarGroup> + code: `import { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage, AvatarGroup } from "@/components/ui/avatar"; + +function Example() { + return ( + <AvatarGroup> <Avatar size="md"> <AvatarFallbackText>John Doe</AvatarFallbackText> <AvatarImage @@ -563,9 +598,10 @@ An Avatar Group component with badges presents a collection of avatars with acco <AvatarBadge /> </Avatar> </AvatarGroup> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Avatar, @@ -590,11 +626,19 @@ A custom Avatar component with text allows for personalized user or entity repre showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="2xl"> + code: `import { Avatar } from "@/components/ui/avatar"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon } from "@/components/ui/icon"; +import { User } from "lucide-react-native"; + +function Example() { + return ( + <VStack space="2xl"> <HStack space="md"> <Avatar size="md" className='bg-indigo-300 border-2 border-indigo-600'> - {/* User is imported from 'lucide-react-native' */} <Icon as={User} size="xl" className='text-indigo-600' /> </Avatar> <VStack > @@ -604,7 +648,6 @@ A custom Avatar component with text allows for personalized user or entity repre </HStack> <HStack space="md"> <Avatar size="md" className='bg-pink-300 border-2 border-pink-600'> - {/* User is imported from 'lucide-react-native' */} <Icon as={User} size="xl" className='text-pink-600' /> </Avatar> <VStack > @@ -613,9 +656,10 @@ A custom Avatar component with text allows for personalized user or entity repre </VStack> </HStack> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -644,8 +688,12 @@ Fallback text is shown when the image fails to load, the image is not available showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <HStack space="md"> + code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; +import { HStack } from "@/components/ui/hstack"; + +function Example() { + return ( + <HStack space="md"> <Avatar size="md"> <AvatarFallbackText>John Doe</AvatarFallbackText> <AvatarImage @@ -655,9 +703,10 @@ Fallback text is shown when the image fails to load, the image is not available /> </Avatar> </HStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Avatar, diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx index 36cf57e44..0a9e1f17a 100644 --- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx @@ -62,14 +62,19 @@ This is an illustration of **Badge** component. <Wrapper> <CodePreview metaData={{ - code: ` - <Badge {...props}> + code: `import { Badge, BadgeIcon, BadgeText } from "@/components/ui/badge"; +import { GlobeIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Badge {...props}> <BadgeText>Verified</BadgeText> <BadgeIcon as={GlobeIcon} className="ml-2" /> </Badge> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -255,8 +260,17 @@ An example of the Badge component being used with the Avatar component to displa showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="2xl"> + code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; +import { Badge, BadgeIcon, BadgeText } from "@/components/ui/badge"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { BadgeCheckIcon } from "lucide-react-native"; + +function Example() { + return ( + <VStack space="2xl"> <HStack space="md"> <Avatar> <AvatarFallbackText>SS</AvatarFallbackText> @@ -278,9 +292,10 @@ An example of the Badge component being used with the Avatar component to displa </VStack> </HStack> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -310,8 +325,14 @@ An example of the Badge component being used with the Composition component, all <CodePreview showArgsController={false} metaData={{ - code: ` - <Box className='items-center'> + code: `import { Badge, BadgeText } from "@/components/ui/badge"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <Box className='items-center'> <VStack> <Badge className='z-10 self-end h-[22px] w-[22px] bg-red-600 rounded-full -mb-3.5 -mr-3.5' @@ -326,9 +347,10 @@ An example of the Badge component being used with the Composition component, all </Button> </VStack> </Box> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx index dd0a82da1..d44afa1a8 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -33,18 +33,23 @@ This is an illustration of **Box** component. showComponentRenderer={ true } showArgsController = { false} metaData = {{ - code: ` -<Box + code: `import { Box } from "@/components/ui/box"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Box className="bg-primary-500 p-5" > <Text className='text-typography-0'> This is the Box </Text> </Box> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); - }, + return transformedCode(code, 'function', 'Example'); + }, scope: { Wrapper, Box, diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx index d20b30b24..bba29803e 100644 --- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx @@ -54,13 +54,17 @@ This is an illustration of **Button** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Button {...props}> + code: `import { Button, ButtonText } from "@/components/ui/button"; + +function Example() { + return ( + <Button {...props}> <ButtonText>Hello World!</ButtonText> </Button> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Button, ButtonText, ButtonIcon, Wrapper }, argsType: { @@ -580,15 +584,19 @@ A loading button is a type of button component that provides visual feedback to showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Button className='p-3'> - {/* colors is imported from tailwindcss/colors */} + code: `import { Button, ButtonText, ButtonSpinner } from "@/components/ui/button"; +import colors from "tailwindcss/colors"; + +function Example() { + return ( + <Button className='p-3'> <ButtonSpinner color={colors.gray[400]} /> <ButtonText className='font-medium text-sm ml-2'>Please wait...</ButtonText> </Button> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Button, ButtonText, Wrapper, ButtonSpinner, colors }, argsType: {}, @@ -605,16 +613,21 @@ A button with an icon integrates a visual symbol within the button component, en showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Button + code: `import { Button, ButtonIcon } from "@/components/ui/button"; +import { EditIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Button size='lg' className='rounded-full p-3.5' > <ButtonIcon as={EditIcon} /> </Button> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Button, ButtonIcon, Wrapper, EditIcon }, argsType: {}, @@ -631,17 +644,22 @@ A button with a link combines the interactive behavior of a button component wit showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Button variant='link'> + code: `import { Button, ButtonText, ButtonIcon } from "@/components/ui/button"; +import { ArrowUpIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Button variant='link'> <ButtonText className='font-medium text-sm text-typography-900' > Back to top </ButtonText> <ButtonIcon as={ArrowUpIcon} className='h-3 w-3 text-background-900 ml-1' /> </Button> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Button, ButtonText, ButtonIcon, Wrapper, ArrowUpIcon }, argsType: {}, @@ -658,8 +676,13 @@ The icon component incorporates a button component, combining visual representat showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Box> + code: `import { Box } from "@/components/ui/box"; +import { Button, ButtonText, ButtonIcon } from "@/components/ui/button"; +import { AddIcon, InfoIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Box> <Button> <ButtonIcon as={InfoIcon} className='mr-2'/> <ButtonText>Left Icon</ButtonText> @@ -669,9 +692,10 @@ The icon component incorporates a button component, combining visual representat <ButtonIcon as={AddIcon} className='ml-2'/> </Button> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, InfoIcon, AddIcon, Box }, argsType: {}, @@ -689,8 +713,18 @@ The button with full width component utilizes a button component, expanding its showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Center> + code: `import { Box } from "@/components/ui/box"; +import { Button, ButtonText, ButtonIcon } from "@/components/ui/button"; +import { Center } from "@/components/ui/center"; +import { Heading } from "@/components/ui/heading"; +import { Input, InputField } from "@/components/ui/input"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { ArrowLeftIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Center> <Box className='p-5 max-w-96 border border-background-300 rounded-lg'> <VStack className='pb-4' space='xs'> <Heading className='leading-[30px]'> @@ -738,9 +772,10 @@ The button with full width component utilizes a button component, expanding its </VStack> </Box> </Center> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Button, diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx index fea6413d3..65991374f 100644 --- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx @@ -55,16 +55,22 @@ This is an illustration of a **Card** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` + code: `import { Card } from "@/components/ui/card"; +import { Heading } from "@/components/ui/heading"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( <Card {...props} className="m-3"> <Heading size="md" className="mb-1"> Quick Start </Heading> <Text size="sm">Start building your next project in minutes</Text> </Card> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Card, @@ -267,7 +273,14 @@ This is an example of a Card component with an image. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Card } from "@/components/ui/card"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Image } from "@/components/ui/image"; +import { Link, LinkText } from "@/components/ui/link"; +import { Text } from "@/components/ui/text"; +import { Icon, ArrowRightIcon } from "@/components/ui/icon"; + function App(){ return ( <Card className="p-5 rounded-lg max-w-[360px] m-3"> @@ -303,8 +316,7 @@ function App(){ </Link> </Card> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -334,7 +346,16 @@ This is an example of a Card component with other components like Avatar, Image showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; +import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Divider } from "@/components/ui/divider"; +import { Heading } from "@/components/ui/heading"; +import { Image } from "@/components/ui/image"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + function App(){ return ( <Card className="p-6 rounded-lg max-w-[360px] m-3"> @@ -415,8 +436,7 @@ function App(){ </Button> </Card> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -449,7 +469,14 @@ This example illustrates a card showcasing a product. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Heading } from "@/components/ui/heading"; +import { Image } from "@/components/ui/image"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + function App(){ return ( <Card className="p-5 rounded-lg max-w-[360px] m-3"> @@ -496,8 +523,7 @@ function App(){ </Box> </Card> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -526,7 +552,13 @@ This is an example of a Card component with a blog post. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; +import { Box } from "@/components/ui/box"; +import { Card } from "@/components/ui/card"; +import { Heading } from "@/components/ui/heading"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + function App(){ return ( <Card className="p-5 rounded-lg max-w-[360px] m-3" @@ -567,8 +599,7 @@ function App(){ </Box> </Card> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx index 39c553202..7dabb4449 100644 --- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx @@ -33,15 +33,20 @@ This is an illustration of **Center** component. showComponentRenderer = { true} showArgsController = { false} metaData = {{ - code: ` -<Center className="bg-primary-500 h-[200px] w-[300px]"> + code: `import { Center } from "@/components/ui/center"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Center className="bg-primary-500 h-[200px] w-[300px]"> <Text className="text-typography-0 font-bold"> This is the center. </Text> </Center> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx index 8dd09b129..0546d4e38 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx @@ -53,16 +53,21 @@ This is an illustration of **Checkbox** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Checkbox {...props} > + code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon } from "@/components/ui/checkbox"; +import { CheckIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Checkbox {...props} > <CheckboxIndicator> <CheckboxIcon as={CheckIcon}/> </CheckboxIndicator> <CheckboxLabel>Label</CheckboxLabel> </Checkbox> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Checkbox, @@ -724,8 +729,12 @@ Checkbox provide a mutually exclusive selection mechanism, allowing users to cho showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { VStack } from "@/components/ui/vstack"; +import { CheckIcon } from "@/components/ui/icon"; +import React from "react"; + +function App(){ const [values, setValues] = React.useState(["Eng"]); return ( <CheckboxGroup value={values} onChange={(keys) => { @@ -753,8 +762,7 @@ Checkbox provide a mutually exclusive selection mechanism, allowing users to cho </VStack> </CheckboxGroup> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -785,8 +793,12 @@ A horizontal component incorporating a checkbox allows for intuitive and space-e showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { HStack } from "@/components/ui/hstack"; +import { CheckIcon } from "@/components/ui/icon"; +import React from "react"; + +function App(){ const [values, setValues] = React.useState(["Illustration"]); return ( <CheckboxGroup value={values} onChange={(keys) => { @@ -814,8 +826,7 @@ A horizontal component incorporating a checkbox allows for intuitive and space-e </HStack> </CheckboxGroup> ) - } -`, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -845,8 +856,14 @@ A checkbox component with help text provides informative guidance alongside sele showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Box } from "@/components/ui/box"; +import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { CheckIcon } from "@/components/ui/icon"; +import React from "react"; + +function App(){ const [values, setValues] = React.useState(["Design"]); return ( <CheckboxGroup value={values} onChange={(keys) => { @@ -874,8 +891,7 @@ A checkbox component with help text provides informative guidance alongside sele </VStack> </CheckboxGroup> ) - } -`, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -908,8 +924,16 @@ A checkbox component integrated with form control enhances the user experience b showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <FormControl> + code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon } from "@/components/ui/checkbox"; +import { FormControl } from "@/components/ui/form-control"; +import { Heading } from "@/components/ui/heading"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { CheckIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <FormControl> <VStack space="sm"> <Heading size="sm" >Sign up for newsletters</Heading> <Checkbox > @@ -933,9 +957,10 @@ A checkbox component integrated with form control enhances the user experience b <Text size="sm">Subscribe to newsletters for updates</Text> </VStack> </FormControl> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Checkbox, @@ -966,8 +991,12 @@ A checkbox component with Label left configuration aligns the label to the left, showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { VStack } from "@/components/ui/vstack"; +import { CheckIcon } from "@/components/ui/icon"; +import React from "react"; + +function App(){ const [values, setValues] = React.useState(["Jane"]); return ( <CheckboxGroup value={values} onChange={(keys) => { @@ -1027,8 +1056,12 @@ A controlled component architecture incorporates a checkbox component, allowing showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { VStack } from "@/components/ui/vstack"; +import { CheckIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [values, setValues] = React.useState(['UX Research']); return ( <CheckboxGroup value={values} onChange={(keys)=>{ @@ -1050,8 +1083,7 @@ A controlled component architecture incorporates a checkbox component, allowing </VStack> </CheckboxGroup> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -1082,7 +1114,11 @@ An uncontrolled component utilizes a checkbox component, providing a simpler imp showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { VStack } from "@/components/ui/vstack"; +import { CheckIcon } from "@/components/ui/icon"; +import React from "react"; + function App() { const radioRef = React.useRef(null); const handleCheckboxChange = (e) => { @@ -1106,8 +1142,7 @@ function App() { </VStack> </CheckboxGroup> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -1138,7 +1173,12 @@ The checkbox group component allows users to group checkbox and display them in showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Center } from "@/components/ui/center"; +import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { VStack } from "@/components/ui/vstack"; +import { CheckIcon } from "@/components/ui/icon"; +import React from "react"; + function CheckboxExample(){ const [values, setValues] = React.useState([]); return ( @@ -1169,8 +1209,7 @@ function CheckboxExample(){ </CheckboxGroup> </Center> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'CheckboxExample'); }, diff --git a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx index 6d66ee3df..1916af8d4 100644 --- a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx @@ -44,8 +44,13 @@ This is an illustration of **Divider** component. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Center> + code: `import { Center } from "@/components/ui/center"; +import { Divider } from "@/components/ui/divider"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Center> <Text className="font-semibold"> Easy </Text> @@ -54,9 +59,10 @@ This is an illustration of **Divider** component. Difficult </Text> </Center> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -236,7 +242,14 @@ A Divider component with different layouts offers versatile options for visually showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Divider } from "@/components/ui/divider"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( <VStack> <Heading>gluestack-ui</Heading> <Text>Universal component library</Text> @@ -255,9 +268,10 @@ A Divider component with different layouts offers versatile options for visually <Text>Examples</Text> </HStack> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -282,8 +296,16 @@ A Divider component with a specified divider orientation allows for clear visual showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack + code: `import { Box } from "@/components/ui/box"; +import { Divider } from "@/components/ui/divider"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <VStack space='lg' className="p-12 border border-outline-300 rounded-lg mx-5" > @@ -344,9 +366,10 @@ A Divider component with a specified divider orientation allows for clear visual </HStack> </Box> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -372,7 +395,13 @@ A Divider component used with or without inset adds visual hierarchy and distinc showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Divider } from "@/components/ui/divider"; +import { HStack } from "@/components/ui/hstack"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( <VStack space="2xl"> <HStack className="px-3 h-8 rounded border border-solid border-outline-300"> <Button variant="link" size="xs"> @@ -405,9 +434,10 @@ A Divider component used with or without inset adds visual hierarchy and distinc </Button> </HStack> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -432,8 +462,15 @@ A Divider component with added content allows for the inclusion of additional te showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Box + code: `import { Box } from "@/components/ui/box"; +import { Divider } from "@/components/ui/divider"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Box className="py-9 px-20 m-5 rounded-lg border border-outline-300 " @@ -464,9 +501,10 @@ A Divider component with added content allows for the inclusion of additional te </HStack> </Box> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx index 00d2e637a..115e71af0 100644 --- a/example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx @@ -73,8 +73,13 @@ This is an illustration of **Drawer** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Drawer, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter } from "@/components/ui/drawer"; +import { Heading } from "@/components/ui/heading"; +import { Text } from "@/components/ui/text"; +import React from "react"; + +function App() { const [showDrawer, setShowDrawer] = React.useState(false); return ( <> @@ -116,8 +121,7 @@ This is an illustration of **Drawer** component. </Drawer> </> ); - }; - `, + };`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -529,8 +533,20 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { Divider } from "@/components/ui/divider"; +import { Drawer, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody } from "@/components/ui/drawer"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Slider, SliderThumb, SliderTrack, SliderFilledTrack } from "@/components/ui/slider"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, CheckIcon, CircleIcon } from "@/components/ui/icon"; +import colors from "tailwindcss/colors"; +import React from "react"; + +function App() { const [showDrawer, setShowDrawer] = React.useState(false); const [categories, setCategories] = React.useState([]); const [brands, setBrands] = React.useState([]); @@ -791,8 +807,7 @@ The Examples section provides visual representations of the different variants o </Drawer> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -837,8 +852,18 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; +import { Button, ButtonText, ButtonIcon } from "@/components/ui/button"; +import { Divider } from "@/components/ui/divider"; +import { Drawer, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter } from "@/components/ui/drawer"; +import { Pressable } from "@/components/ui/pressable"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, PhoneIcon, StarIcon } from "@/components/ui/icon"; +import React from "react"; +import { User, Home, ShoppingCart, Wallet, LogOut } from "lucide-react-native"; + +function App() { const [showDrawer, setShowDrawer] = React.useState(false); return ( <> @@ -876,17 +901,14 @@ The Examples section provides visual representations of the different variants o <Divider className="my-4" /> <DrawerBody contentContainerClassName="gap-2"> <Pressable className="gap-3 flex-row items-center hover:bg-background-50 p-2 rounded-md"> - {/* User is imported from 'lucide-react-native' */} <Icon as={User} size="lg" className="text-typography-600" /> <Text>My Profile</Text> </Pressable> <Pressable className="gap-3 flex-row items-center hover:bg-background-50 p-2 rounded-md"> - {/* Home is imported from 'lucide-react-native' */} <Icon as={Home} size="lg" className="text-typography-600" /> <Text>Saved Address</Text> </Pressable> <Pressable className="gap-3 flex-row items-center hover:bg-background-50 p-2 rounded-md"> - {/* ShoppingCart is imported from 'lucide-react-native' */} <Icon as={ShoppingCart} size="lg" @@ -895,7 +917,6 @@ The Examples section provides visual representations of the different variants o <Text>Orders</Text> </Pressable> <Pressable className="gap-3 flex-row items-center hover:bg-background-50 p-2 rounded-md"> - {/* Wallet is imported from 'lucide-react-native' */} <Icon as={Wallet} size="lg" className="text-typography-600" /> <Text>Saved Cards</Text> </Pressable> @@ -915,7 +936,6 @@ The Examples section provides visual representations of the different variants o action="secondary" > <ButtonText>Logout</ButtonText> - {/* LogOut is imported from 'lucide-react-native' */} <ButtonIcon as={LogOut} /> </Button> </DrawerFooter> @@ -923,8 +943,7 @@ The Examples section provides visual representations of the different variants o </Drawer> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx index f3f806335..a45618b69 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -59,8 +59,13 @@ This is an illustration of **Fab** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Box + code: `import { Box } from "@/components/ui/box"; +import { Fab, FabLabel, FabIcon } from "@/components/ui/fab"; +import { AddIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Box className='h-[360px] w-80 bg-background-50 rounded-md' > <Fab {...props}> @@ -68,9 +73,10 @@ This is an illustration of **Fab** component. <FabLabel>Quick start</FabLabel> </Fab> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Box, Wrapper, Fab, FabIcon, FabLabel, AddIcon }, argsType: { @@ -458,8 +464,16 @@ A Fab component with an icon adds a visually striking and easily recognizable bu showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Avatar, AvatarImage } from "@/components/ui/avatar"; +import { Box } from "@/components/ui/box"; +import { Fab, FabIcon } from "@/components/ui/fab"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { EditIcon } from "@/components/ui/icon"; + +function App() { const data = [ { uri: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80', @@ -506,13 +520,11 @@ A Fab component with an icon adds a visually striking and easily recognizable bu })} </VStack> <Fab size='lg' className='bg-primary-600 hover:bg-primary-700 active:bg-primary-800' > - {/* EditIcon is imported from 'lucide-react-native' */} <FabIcon as={EditIcon} color="white"/> </Fab> </Box> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -544,8 +556,18 @@ A Fab component with an icon and text combines a visual icon with accompanying t showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Box + code: `import { Box } from "@/components/ui/box"; +import { Divider } from "@/components/ui/divider"; +import { Fab, FabLabel, FabIcon } from "@/components/ui/fab"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { SearchIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Box className='max-w-96 border rounded-lg border-outline-200 py-[56px] px-6 mx-5 bg-background-100' > <Fab className="top-4 h-10 bg-primary-600 hover:bg-primary-700 active:bg-primary-900 py-2"> @@ -614,9 +636,10 @@ A Fab component with an icon and text combines a visual icon with accompanying t </Box> </VStack> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Fab, @@ -646,8 +669,16 @@ A Fab component with placement options allows for flexible positioning of the bu showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Box + code: `import { Box } from "@/components/ui/box"; +import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon } from "@/components/ui/checkbox"; +import { Fab, FabIcon } from "@/components/ui/fab"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { AddIcon, CheckIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Box className='border rounded-lg border-outline-300 py-4 bg-background-0 mx-5' > <VStack space='lg' className='mb-2 px-6 py-2'> @@ -686,9 +717,10 @@ A Fab component with placement options allows for flexible positioning of the bu <FabIcon as={AddIcon} size='sm'/> </Fab> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Box, @@ -720,8 +752,18 @@ A Fab component with custom placement allows for flexible positioning of the but showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Box + code: `import { Box } from "@/components/ui/box"; +import { Fab, FabIcon } from "@/components/ui/fab"; +import { Heading } from "@/components/ui/heading"; +import { Image } from "@/components/ui/image"; +import { Link } from "@/components/ui/link"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { ShoppingCartIcon } from "lucide-react-native"; + +function Example() { + return ( + <Box className='max-w-96 border rounded-lg border-outline-200 overflow-hidden mx-5 bg-background-100' > <Box> @@ -756,13 +798,13 @@ A Fab component with custom placement allows for flexible positioning of the but </Link> </VStack> <Fab size='lg' className='bg-primary-600 right-4 bottom-16 hover:bg-primary-700 active:bg-primary-800'> - {/* ShoppingCartIcon is imported from 'lucide-react-native' */} <FabIcon as={ShoppingCartIcon} className='h-4 w-4'/> </Fab> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Fab, diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx index 335dd6795..fd0b27f91 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx @@ -98,8 +98,14 @@ This is an illustration of **FormControl** component. p: '$3', }} metaData={{ - code: ` - function App () { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { FormControl, FormControlError, FormControlErrorText, FormControlErrorIcon, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control"; +import { Input, InputField } from "@/components/ui/input"; +import { VStack } from "@/components/ui/vstack"; +import { AlertCircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function App () { const [isInvalid, setIsInvalid] = React.useState(false); const [inputValue, setInputValue] = React.useState('12345'); const handleSubmit = () => { @@ -140,8 +146,7 @@ This is an illustration of **FormControl** component. </Button> </VStack> ); - }; - `, + };`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -421,8 +426,13 @@ The Radio Component can be incorporated within the FormControl. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App () { + code: `import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control"; +import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { VStack } from "@/components/ui/vstack"; +import { CircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function App () { const [values, setValues] = React.useState("Mango"); return ( <FormControl> @@ -466,8 +476,7 @@ The Radio Component can be incorporated within the FormControl. </FormControlHelper> </FormControl> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -506,8 +515,13 @@ The Checkbox Component can be incorporated within the FormControl. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control"; +import { VStack } from "@/components/ui/vstack"; +import { CheckIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [values, setValues] = React.useState(['bits']); return ( <FormControl> @@ -549,8 +563,7 @@ The Checkbox Component can be incorporated within the FormControl. </FormControlHelper> </FormControl> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -590,8 +603,12 @@ The Textarea Component can be incorporated within the FormControl. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <FormControl> + code: `import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control"; +import { Textarea, TextareaInput } from "@/components/ui/textarea"; + +function Example() { + return ( + <FormControl> <FormControlLabel> <FormControlLabelText> Comment @@ -606,9 +623,10 @@ The Textarea Component can be incorporated within the FormControl. </FormControlHelperText> </FormControlHelper> </FormControl> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -639,8 +657,14 @@ Error messages can be displayed using FormControl. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <FormControl isInvalid> + code: `import { FormControl, FormControlError, FormControlErrorText, FormControlErrorIcon, FormControlLabel, FormControlLabelText } from "@/components/ui/form-control"; +import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { VStack } from "@/components/ui/vstack"; +import { AlertCircleIcon, CircleIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <FormControl isInvalid> <FormControlLabel> <FormControlLabelText> Which time slot works best for you? @@ -681,9 +705,10 @@ Error messages can be displayed using FormControl. </FormControlErrorText> </FormControlError> </FormControl> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -720,8 +745,13 @@ Form Action Buttons can also be utilized in conjunction with FormControl. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <HStack> + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { FormControl } from "@/components/ui/form-control"; +import { HStack } from "@/components/ui/hstack"; + +function Example() { + return ( + <HStack> <FormControl> <Button variant='outline' action='secondary'> <ButtonText> @@ -737,9 +767,10 @@ Form Action Buttons can also be utilized in conjunction with FormControl. </Button> </FormControl> </HStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx index 117c6f10d..15d69975d 100644 --- a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx @@ -45,8 +45,11 @@ This is an illustration of **Grid** component. padding: 20, }} metaData = {{ - code: ` -<Grid className="gap-5" _extra={{ + code: `import { Grid, GridItem } from "@/components/ui/grid"; + +function Example() { + return ( + <Grid className="gap-5" _extra={{ className: 'grid-cols-8' }} > <GridItem @@ -80,10 +83,11 @@ This is an illustration of **Grid** component. }} /> </Grid> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); - }, + return transformedCode(code, 'function', 'Example'); + }, scope: { Wrapper, Grid, @@ -367,7 +371,11 @@ Use the gap-* utilities to change the gap between both rows and columns in grid padding: 20, }} metaData={{ - code: ` + code: `import { Grid, GridItem } from "@/components/ui/grid"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( <Grid className="gap-4" _extra={{ className: 'grid-cols-9', }}> @@ -396,9 +404,10 @@ Use the gap-* utilities to change the gap between both rows and columns in grid <Text>C</Text> </GridItem> </Grid> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Grid, @@ -423,8 +432,12 @@ Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows padding: 20, }} metaData = {{ - code: ` -<Grid className="gap-y-2 gap-x-4" _extra={{ + code: `import { Grid, GridItem } from "@/components/ui/grid"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Grid className="gap-y-2 gap-x-4" _extra={{ className: 'grid-cols-6', }}> <GridItem @@ -476,10 +489,11 @@ Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows <Text className="text-sm">06</Text> </GridItem> </Grid> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); - }, + return transformedCode(code, 'function', 'Example'); + }, scope: { Wrapper, Grid, @@ -505,8 +519,12 @@ The following example depicts how easily you can nest grids to create complex la padding: 20, }} metaData = {{ - code: ` -<Grid className="gap-3" _extra={{ + code: `import { Grid, GridItem } from "@/components/ui/grid"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Grid className="gap-3" _extra={{ className: 'grid-cols-8', }}> <GridItem @@ -566,10 +584,11 @@ The following example depicts how easily you can nest grids to create complex la </Grid> </GridItem> </Grid> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); - }, + return transformedCode(code, 'function', 'Example'); + }, scope: { Wrapper, Grid, @@ -595,8 +614,12 @@ You can pass different grid-cols-* and col-span-* values at different breakpoint padding: 20, }} metaData = {{ - code: ` -<Grid className="gap-y-2 gap-x-4" _extra={{ + code: `import { Grid, GridItem } from "@/components/ui/grid"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Grid className="gap-y-2 gap-x-4" _extra={{ className: 'grid-cols-6', }}> <GridItem @@ -648,10 +671,11 @@ You can pass different grid-cols-* and col-span-* values at different breakpoint <Text className="text-sm">06</Text> </GridItem> </Grid> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); - }, + return transformedCode(code, 'function', 'Example'); + }, scope: { Wrapper, Grid, diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx index 1dd5e19ba..394589cf7 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -38,15 +38,20 @@ This is an illustration of **HStack** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <HStack {...props}> + code: `import { Box } from "@/components/ui/box"; +import { HStack } from "@/components/ui/hstack"; + +function Example() { + return ( + <HStack {...props}> <Box className="h-20 w-20 bg-primary-300" /> <Box className="h-20 w-20 bg-primary-400" /> <Box className="h-20 w-20 bg-primary-500" /> </HStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Box, Wrapper, HStack }, argsType: { @@ -260,15 +265,20 @@ An HStack component with the reversed prop reverses the order of horizontally st showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <HStack space="md" reversed> + code: `import { Box } from "@/components/ui/box"; +import { HStack } from "@/components/ui/hstack"; + +function Example() { + return ( + <HStack space="md" reversed> <Box className="w-20 h-20 bg-primary-300"/> <Box className="w-20 h-20 bg-primary-400"/> <Box className="w-20 h-20 bg-primary-500"/> </HStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Box, Wrapper, HStack }, argsType: {}, diff --git a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx index 33d775b9c..8d819570d 100644 --- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx @@ -37,11 +37,15 @@ This is an illustration of **Heading** component. showComponentRenderer={ true } showArgsController = { false} metaData = {{ - code: ` - <Heading>I am a Heading</Heading> - `, + code: `import { Heading } from "@/components/ui/heading"; + +function Example() { + return ( + <Heading>I am a Heading</Heading> + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -406,8 +410,10 @@ Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Center } from "@/components/ui/center"; +import { Heading } from "@/components/ui/heading"; + +function App() { const sizes = [ 'xs', 'sm', @@ -426,8 +432,7 @@ Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl ))} </Center> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx index 76f135e0e..9482c1c60 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -106,11 +106,15 @@ This is an illustration of **Icon** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Icon as={EditIcon} {...props} /> - `, + code: `import { Icon, EditIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Icon as={EditIcon} {...props} /> + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -257,8 +261,13 @@ Below is a list of all of the icons in the library. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Center> + code: `import { Center } from "@/components/ui/center"; +import { HStack } from "@/components/ui/hstack"; +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 } from "@/components/ui/icon"; + +function Example() { + return ( + <Center> <HStack className="w-[70%] flex flex-wrap"> <Icon as={AddIcon} className="text-typography-500 m-2 w-4 h-4" /> <Icon as={ArrowLeftIcon} className="text-typography-500 m-2 w-4 h-4" /> @@ -317,9 +326,10 @@ Below is a list of all of the icons in the library. <Icon as={PlayIcon} className="text-typography-500 m-2 w-4 h-4" /> </HStack> </Center> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Center, @@ -396,16 +406,22 @@ Below is a list of all of the icons in the library. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="md" className="items-center"> + code: `import { VStack } from "@/components/ui/vstack"; +import { Icon } from "@/components/ui/icon"; +import { Camera, ChromeIcon, InstagramIcon, FacebookIcon } from "lucide-react-native"; + +function Example() { + return ( + <VStack space="md" className="items-center"> <Icon className="text-typography-500" as={Camera} /> <Icon className="text-typography-500" as={ChromeIcon} /> <Icon className="text-typography-500" as={InstagramIcon} /> <Icon className="text-typography-500" as={FacebookIcon} /> </VStack> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -444,14 +460,14 @@ on Native : showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App () { + code: `import { Icon, createIcon } from "@/components/ui/icon"; +import { Path } from "react-native-svg"; + +function App () { const GluestackIcon = createIcon({ viewBox: '0 0 32 32', path: ( <> - {/* Rect, Path is imported from 'react-native-svg' */} - {/* <Rect width="32" height="32" rx="2" fill="currentColor"/> */} <Path d="M9.5 14.6642L15.9999 9.87633V12.1358L9.5 16.9236V14.6642Z" fill="white"/> <Path d="M22.5 14.6642L16.0001 9.87639V12.1359L22.5 16.9237V14.6642Z" fill="white"/> <Path d="M9.5 19.8641L15.9999 15.0763V17.3358L9.5 22.1236V19.8641Z" fill="white"/> @@ -460,8 +476,7 @@ on Native : ), }); return <Icon as={GluestackIcon} size='xl' className="text-typography-black"/>; - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx index c492e34fd..9462fcced 100644 --- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx @@ -42,17 +42,21 @@ This is an illustration of **Image** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Image + code: `import { Image } from "@/components/ui/image"; + +function Example() { + return ( + <Image {...props} source={{ uri: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', }} alt="image" /> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -157,18 +161,22 @@ import Image from '@unitools/image'; showComponentRenderer={false} showArgsController={false} metaData={{ - code: ` - <Image + code: `import { Image } from "@/components/ui/image"; + +function Example() { + return ( + <Image source={{ uri: "https://gluestack.github.io/public-blog-video-assets/mountains.png", }} alt="Logo" size='none' className="aspect-[320/208] w-full max-w-[320px]" - /> - `, + /> + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx index 3af3162af..3ab895045 100644 --- a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx @@ -55,8 +55,15 @@ This is an illustration of **ImageViewer** component. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Center } from "@/components/ui/center"; +import { Image } from "@/components/ui/image"; +import { ImageViewer, ImageViewerBackdrop, ImageViewerContent, ImageViewerImage, ImageViewerCloseButton } from "@/components/ui/image-viewer"; +import { Pressable } from "@/components/ui/pressable"; +import { StatusBar } from "@/components/ui/statusbar"; +import { Icon, CloseIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [visible, setVisible] = React.useState(false); const Images = [{ id: 1, url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg' }]; return ( @@ -86,8 +93,7 @@ This is an illustration of **ImageViewer** component. </ImageViewer> </Center> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -379,8 +385,15 @@ import { StatusBar } from 'expo-status-bar'; showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Center } from "@/components/ui/center"; +import { Image } from "@/components/ui/image"; +import { ImageViewer, ImageViewerBackdrop, ImageViewerContent, ImageViewerImage, ImageViewerCloseButton } from "@/components/ui/image-viewer"; +import { Pressable } from "@/components/ui/pressable"; +import { StatusBar } from "@/components/ui/statusbar"; +import { Icon, CloseIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [visible, setVisible] = React.useState(false); const Images = [{ id: 1, url: 'https://img.freepik.com/free-photo/young-boy-learning-how-ride-horse_23-2150460636.jpg' }]; return ( @@ -410,8 +423,7 @@ import { StatusBar } from 'expo-status-bar'; </ImageViewer> </Center> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx index c9804e5c1..cc83fb764 100644 --- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx @@ -51,15 +51,19 @@ This is an illustration of **Input** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Input {...props}> + code: `import { Input, InputField } from "@/components/ui/input"; + +function Example() { + return ( + <Input {...props}> <InputField placeholder='Enter Text here...' /> </Input> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -605,8 +609,16 @@ The Input component integrates with an icon and a button, providing users with a showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { FormControl } from "@/components/ui/form-control"; +import { Heading } from "@/components/ui/heading"; +import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { EyeIcon, EyeOffIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [showPassword, setShowPassword] = React.useState(false); const handleState = () => { setShowPassword((showState) => { @@ -645,8 +657,7 @@ The Input component integrates with an icon and a button, providing users with a </VStack> </FormControl> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -680,8 +691,12 @@ The Input with Icons is a variation of the Input component that displays icons n showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Input> + code: `import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"; +import { SearchIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Input> <InputSlot className='pl-3'> <InputIcon as={SearchIcon}/> </InputSlot> @@ -689,9 +704,10 @@ The Input with Icons is a variation of the Input component that displays icons n placeholder="Search..." /> </Input> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx index 646aecc38..d51ff1a60 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -38,13 +38,17 @@ This is an illustration of **Link** component. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Link href="https://gluestack.io/"> + code: `import { Link, LinkText } from "@/components/ui/link"; + +function Example() { + return ( + <Link href="https://gluestack.io/"> <LinkText>gluestack</LinkText> </Link> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -397,8 +401,13 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <HStack> + code: `import { HStack } from "@/components/ui/hstack"; +import { Link, LinkText } from "@/components/ui/link"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <HStack> <Text size="lg" >Design inspiration from </Text> @@ -406,9 +415,10 @@ The Examples section provides visual representations of the different variants o <LinkText size="lg">pinterest.com</LinkText> </Link> </HStack> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Link, LinkText, Wrapper, Icon, HStack, Text }, argsType: {}, @@ -423,21 +433,28 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <HStack> + code: `import { HStack } from "@/components/ui/hstack"; +import { Link, LinkText } from "@/components/ui/link"; +import { Text } from "@/components/ui/text"; +import { Icon } from "@/components/ui/icon"; +import { ArrowUpRight } from "lucide-react-native"; + +function Example() { + return ( + <HStack> <Text size="lg">Go to </Text> <Link href="https://gluestack.io/" isExternal> <HStack> <LinkText size="lg">Pinterest</LinkText> - {/* ArrowUpRight is imported from 'lucide-react-native' */} <Icon as={ArrowUpRight} size="lg" className='mt-0.5 text-info-600'/> </HStack> </Link> </HStack> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Link, LinkText, Wrapper, ArrowUpRight, Icon, HStack, Text }, argsType: {}, @@ -459,13 +476,18 @@ import Link from "@unitools/link"; showComponentRenderer={false} showArgsController={false} metaData={{ - code: ` - <Link href="https://gluestack.io/"> + code: `import { Link } from "@/components/ui/link"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Link href="https://gluestack.io/"> <Text>gluestack</Text> </Link> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx index c8a92f501..f8a2ca010 100644 --- a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx @@ -63,8 +63,13 @@ This is an illustration of a **Menu** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Menu + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Menu, MenuItem, MenuItemLabel } from "@/components/ui/menu"; +import { Icon, AddIcon, GlobeIcon, PlayIcon, SettingsIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Menu {...props} offset={5} disabledKeys={['Settings']} @@ -93,9 +98,10 @@ This is an illustration of a **Menu** component. <MenuItemLabel size="sm">Settings</MenuItemLabel> </MenuItem> </Menu> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -557,8 +563,14 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Menu + code: `import { Badge, BadgeText } from "@/components/ui/badge"; +import { Button, ButtonIcon } from "@/components/ui/button"; +import { Menu, MenuItem, MenuItemLabel, MenuSeparator } from "@/components/ui/menu"; +import { MenuIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Menu offset={5} trigger={({ ...triggerProps }) => { return ( @@ -607,9 +619,10 @@ The Examples section provides visual representations of the different variants o <MenuItemLabel size="sm">Logout</MenuItemLabel> </MenuItem> </Menu> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -637,8 +650,12 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Menu, MenuItem, MenuItemLabel, MenuSeparator } from "@/components/ui/menu"; +import { Icon, HelpCircleIcon, MessageCircleIcon, SettingsIcon } from "@/components/ui/icon"; +import React from "react"; + +function Example() { const [selected, setSelected] = React.useState(new Set([])); return ( <Menu @@ -707,8 +724,7 @@ The Examples section provides visual representations of the different variants o </MenuItem> </Menu> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx index 57e762ee9..c6f48b1a3 100644 --- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx @@ -70,8 +70,15 @@ This is an illustration of **Modal** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - function App(){ + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Center } from "@/components/ui/center"; +import { Heading } from "@/components/ui/heading"; +import { Modal, ModalBackdrop, ModalContent, ModalCloseButton, ModalHeader, ModalBody, ModalFooter } from "@/components/ui/modal"; +import { Text } from "@/components/ui/text"; +import { Icon, CloseIcon } from "@/components/ui/icon"; +import React from "react"; + +function App(){ const [showModal, setShowModal] = React.useState(false); return ( <Center className='h-[300px]'> @@ -125,8 +132,7 @@ This is an illustration of **Modal** component. </Modal> </Center> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -546,8 +552,17 @@ A user interface featuring multiple modal components that allow for layered inte showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText, ButtonIcon } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Input, InputField } from "@/components/ui/input"; +import { Link, LinkText } from "@/components/ui/link"; +import { Modal, ModalBackdrop, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@/components/ui/modal"; +import { Text } from "@/components/ui/text"; +import { ArrowLeftIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [showModal, setShowModal] = React.useState(false); const [showModal2, setShowModal2] = React.useState(false); const [showModal3, setShowModal3] = React.useState(false); @@ -700,8 +715,7 @@ A user interface featuring multiple modal components that allow for layered inte </Modal> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -742,8 +756,14 @@ A user interface featuring multiple modal components that allow for layered inte showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Image } from "@/components/ui/image"; +import { Modal, ModalBackdrop, ModalContent, ModalBody, ModalFooter } from "@/components/ui/modal"; +import { Text } from "@/components/ui/text"; +import React from "react"; + +function App() { const [showModal, setShowModal] = React.useState(false); return ( <> @@ -800,8 +820,7 @@ A user interface featuring multiple modal components that allow for layered inte </Modal> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -832,8 +851,15 @@ A user interface featuring multiple modal components that allow for layered inte showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Modal, ModalBackdrop, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@/components/ui/modal"; +import { Text } from "@/components/ui/text"; +import { Icon, TrashIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [showModal, setShowModal] = React.useState(false); return ( <> @@ -888,8 +914,7 @@ A user interface featuring multiple modal components that allow for layered inte </Modal> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -923,8 +948,20 @@ A user interface featuring multiple modal components that allow for layered inte showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Box } from "@/components/ui/box"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Image } from "@/components/ui/image"; +import { Modal, ModalBackdrop, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@/components/ui/modal"; +import { Radio, RadioGroup, RadioIndicator, RadioIcon } from "@/components/ui/radio"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, CircleIcon } from "@/components/ui/icon"; +import React from "react"; +import { CreditCard } from "lucide-react-native"; + +function App() { const paymentOptions = [ { value: 'visa', @@ -1031,8 +1068,7 @@ A user interface featuring multiple modal components that allow for layered inte </Modal> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -1083,8 +1119,17 @@ A user interface featuring multiple modal components that allow for layered inte showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Input, InputField } from "@/components/ui/input"; +import { Modal, ModalBackdrop, ModalContent, ModalCloseButton, ModalHeader, ModalBody } from "@/components/ui/modal"; +import { Pressable } from "@/components/ui/pressable"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, CloseIcon, CopyIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [showModal, setShowModal] = React.useState(false); return ( <> @@ -1128,8 +1173,7 @@ A user interface featuring multiple modal components that allow for layered inte </Modal> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/PinInput/index.nw.stories.mdx b/example/storybook-nativewind/src/components/PinInput/index.nw.stories.mdx index 8541ad566..62e10417e 100644 --- a/example/storybook-nativewind/src/components/PinInput/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/PinInput/index.nw.stories.mdx @@ -52,15 +52,19 @@ This is an illustration of a **PinInput** component. overflow: 'scroll', }} metaData={{ - code: ` - <PinInput noOfFields={4}> + code: `import { PinInput, PinInputField } from "@/components/ui/pin-input"; + +function Example() { + return ( + <PinInput noOfFields={4}> {Array.from({ length: 4 }).map((_, index) => ( <PinInputField key={index} index={index} /> ))} </PinInput> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { PinInput, @@ -272,8 +276,10 @@ This is an example of a PinInput component with a caption. overflow: 'scroll', }} metaData={{ - code: ` - function App(){ + code: `import { FormControl, FormControlLabel, FormControlLabelText } from "@/components/ui/form-control"; +import { PinInput, PinInputField } from "@/components/ui/pin-input"; + +function App(){ const [value, setValue] = useState(''); useEffect(() => { console.log(value); @@ -292,8 +298,7 @@ This is an example of a PinInput component with a caption. </PinInput> </FormControl> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx index 95557793d..0b717cd1f 100644 --- a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx @@ -80,8 +80,12 @@ This is an illustration of **Popover** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Popover, PopoverBackdrop, PopoverArrow, PopoverBody, PopoverContent } from "@/components/ui/popover"; +import { Text } from "@/components/ui/text"; +import React from "react"; + +function App() { const [isOpen, setIsOpen] = React.useState(false); const handleOpen = () => { setIsOpen(true); @@ -119,8 +123,7 @@ This is an illustration of **Popover** component. </PopoverContent> </Popover> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -706,8 +709,13 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Avatar, AvatarFallbackText, AvatarImage, AvatarGroup } from "@/components/ui/avatar"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Popover, PopoverBackdrop, PopoverArrow, PopoverBody, PopoverContent } from "@/components/ui/popover"; +import { Text } from "@/components/ui/text"; +import React from "react"; + +function App() { const [isOpen, setIsOpen] = React.useState(false); const handleOpen = () => { setIsOpen(true); @@ -786,8 +794,7 @@ The Examples section provides visual representations of the different variants o </PopoverContent> </Popover> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -818,8 +825,17 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText, ButtonIcon } from "@/components/ui/button"; +import { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup } from "@/components/ui/checkbox"; +import { Heading } from "@/components/ui/heading"; +import { Popover, PopoverBackdrop, PopoverFooter, PopoverBody, PopoverContent } from "@/components/ui/popover"; +import { Pressable } from "@/components/ui/pressable"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { ArrowRightIcon, CheckIcon, ChevronRightIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [isOpen, setIsOpen] = React.useState(false); const [values, setValues] = React.useState(['work']); const handleOpen = () => { @@ -891,8 +907,7 @@ The Examples section provides visual representations of the different variants o </PopoverContent> </Popover> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -934,8 +949,16 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { Image } from "@/components/ui/image"; +import { Input, InputField } from "@/components/ui/input"; +import { Popover, PopoverBackdrop, PopoverBody, PopoverContent } from "@/components/ui/popover"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import React from "react"; + +function App() { const [isOpen, setIsOpen] = React.useState(false); const handleOpen = () => { setIsOpen(true); @@ -993,8 +1016,7 @@ The Examples section provides visual representations of the different variants o </PopoverContent> </Popover> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -1030,8 +1052,18 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; +import { Button, ButtonText, ButtonIcon } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Input, InputField } from "@/components/ui/input"; +import { Popover, PopoverBackdrop, PopoverHeader, PopoverBody, PopoverContent } from "@/components/ui/popover"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { ChevronDownIcon, ShareIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [isOpen, setIsOpen] = React.useState(false); const handleOpen = () => { setIsOpen(true); @@ -1151,8 +1183,7 @@ The Examples section provides visual representations of the different variants o </PopoverContent> </Popover> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx index f73ff0069..b8d723803 100644 --- a/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx @@ -47,8 +47,14 @@ This is an illustration of **Pressable** component. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Button, ButtonText, ButtonIcon } from "@/components/ui/button"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { CloseIcon } from "@/components/ui/icon"; +import React from "react"; +import { Portal } from "lucide-react-native"; + +function App(){ const [visible, setVisible] = React.useState(false); const handleClose = () => setVisible(false); return ( @@ -74,8 +80,7 @@ This is an illustration of **Pressable** component. </Button> </> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx index 178771540..a50b88b5d 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx @@ -29,14 +29,19 @@ This is an illustration of **Pressable** component. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <Pressable + code: `import { Pressable } from "@/components/ui/pressable"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Pressable onPress={() => console.log('Hello')} className="p-5 bg-primary-500"> <Text className="text-typography-0">Press me</Text> </Pressable> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -187,7 +192,11 @@ You can change the child elements according to the states of Pressable component showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` + code: `import { Pressable } from "@/components/ui/pressable"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( <Pressable className="p-16 bg-primary-500"> {({ pressed }) => ( <Text className={pressed ? 'text-pink-400' : 'text-amber-400'}> @@ -195,9 +204,10 @@ You can change the child elements according to the states of Pressable component </Text> )} </Pressable> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx index 1f777dfc4..263e77853 100644 --- a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx @@ -40,15 +40,20 @@ This is an illustration of **Progress** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Center className='w-[300px] h-[150px]'> + code: `import { Center } from "@/components/ui/center"; +import { Progress, ProgressFilledTrack } from "@/components/ui/progress"; + +function Example() { + return ( + <Center className='w-[300px] h-[150px]'> <Progress value={40} {...props} > <ProgressFilledTrack /> </Progress> </Center> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, Progress, ProgressFilledTrack, Center }, argsType: { @@ -262,16 +267,22 @@ Progress component with value showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="lg" className="max-w-80 w-full"> + code: `import { Progress, ProgressFilledTrack } from "@/components/ui/progress"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <VStack space="lg" className="max-w-80 w-full"> <Text size="lg">Downloading 55%</Text> <Progress value={55} className='w-full h-1'> <ProgressFilledTrack className='h-1' /> </Progress> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -295,8 +306,12 @@ You can add track color to progress bar as per our needs. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="3xl" className="max-w-96 w-full"> + code: `import { Progress, ProgressFilledTrack } from "@/components/ui/progress"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <VStack space="3xl" className="max-w-96 w-full"> <Progress value={46} className='w-full h-2' size="sm"> <ProgressFilledTrack className='bg-emerald-600'/> </Progress> @@ -310,9 +325,10 @@ You can add track color to progress bar as per our needs. <ProgressFilledTrack className='bg-cyan-600'/> </Progress> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -334,17 +350,24 @@ You can customize the progress bar. Below is the example where we have change th showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="lg" className="max-w-[410px] w-full"> + code: `import { Heading } from "@/components/ui/heading"; +import { Progress, ProgressFilledTrack } from "@/components/ui/progress"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <VStack space="lg" className="max-w-[410px] w-full"> <Heading>Internal Storage</Heading> <Progress value={46} className='w-full h-2 bg-lime-100'> <ProgressFilledTrack className='h-2 bg-lime-500' /> </Progress> <Text size="md">14GB</Text> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx index f61fac231..acc83f4d9 100644 --- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx @@ -45,8 +45,12 @@ This is an illustration of **Radio** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <RadioGroup> + code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { CircleIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <RadioGroup> <Radio value="change" {...props}> <RadioIndicator> <RadioIcon as={CircleIcon}/> @@ -54,9 +58,10 @@ This is an illustration of **Radio** component. <RadioLabel>Label</RadioLabel> </Radio> </RadioGroup> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -581,8 +586,12 @@ Radio buttons provide a mutually exclusive selection mechanism, allowing users t showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App () { + code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { VStack } from "@/components/ui/vstack"; +import { CircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function App () { const [values, setValues] = React.useState("Eng"); return ( <RadioGroup value={values} onChange={setValues}> @@ -608,8 +617,7 @@ Radio buttons provide a mutually exclusive selection mechanism, allowing users t </VStack> </RadioGroup> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -638,8 +646,12 @@ Radio buttons can be used horizontally. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { HStack } from "@/components/ui/hstack"; +import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { CircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [values, setValues] = React.useState("Cash On Delivery"); return ( <RadioGroup value={values} onChange={setValues} > @@ -659,8 +671,7 @@ Radio buttons can be used horizontally. </HStack> </RadioGroup> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -689,8 +700,14 @@ Radio buttons can be used with helper text. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App () { + code: `import { Box } from "@/components/ui/box"; +import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { CircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function App () { const [values, setValues] = React.useState("Read-only"); return ( <RadioGroup value={values} onChange={setValues}> @@ -716,8 +733,7 @@ Radio buttons can be used with helper text. </VStack> </RadioGroup> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -748,8 +764,16 @@ Radio buttons can be used inside FormControl for better control of states and fu showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <FormControl> + code: `import { FormControl } from "@/components/ui/form-control"; +import { Heading } from "@/components/ui/heading"; +import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { CircleIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <FormControl> <VStack space="md"> <Heading size="sm"> Which time slot works best for you? @@ -781,9 +805,10 @@ Radio buttons can be used inside FormControl for better control of states and fu </Text> </VStack> </FormControl> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -813,8 +838,12 @@ Radio buttons can be used horizontally showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { VStack } from "@/components/ui/vstack"; +import { CircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function App() { const [values, setValues] = React.useState("Monday"); return ( <RadioGroup value={values} onChange={setValues} > @@ -834,8 +863,7 @@ Radio buttons can be used horizontally </VStack> </RadioGroup > ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -865,8 +893,12 @@ The Radio components can be used with a controlled state, enabling precise manag showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App () { + code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { VStack } from "@/components/ui/vstack"; +import { CircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function App () { const [values, setValues] = React.useState('Apartments'); return ( <RadioGroup value={values} onChange={setValues}> @@ -886,8 +918,7 @@ The Radio components can be used with a controlled state, enabling precise manag </VStack> </RadioGroup> ) - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -917,8 +948,12 @@ The Radio components can be used with either a ref or no state, providing an unc showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App () { + code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { VStack } from "@/components/ui/vstack"; +import { CircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function App () { const radioRef = React.useRef(null); const handleRadioChange = (e) => { e.preventDefault(); @@ -942,8 +977,7 @@ The Radio components can be used with either a ref or no state, providing an unc </VStack> </RadioGroup> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -973,8 +1007,12 @@ The Radio group component allows users to group radio and display them in a hori showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function RadioGroupExample() { + code: `import { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon } from "@/components/ui/radio"; +import { VStack } from "@/components/ui/vstack"; +import { CircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function RadioGroupExample() { const [values, setValues] = React.useState("1st"); return ( <RadioGroup value={values} onChange={setValues}> @@ -1000,8 +1038,7 @@ The Radio group component allows users to group radio and display them in a hori </VStack> </RadioGroup> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'RadioGroupExample'); }, diff --git a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx index 37f9abc8d..5abe0ed5d 100644 --- a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx @@ -57,8 +57,12 @@ This is an illustration of **Select** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Select> + code: `import { Select, SelectTrigger, SelectInput, SelectIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectItem } from "@/components/ui/select"; +import { ChevronDownIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <Select> <SelectTrigger {...props}> <SelectInput placeholder="Select option" /> <SelectIcon className="mr-3" as={ChevronDownIcon} /> @@ -87,9 +91,10 @@ This is an illustration of **Select** component. </SelectContent> </SelectPortal> </Select> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -761,8 +766,13 @@ The Select component with FormControl example demonstrates how to manage its sta showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <FormControl isRequired isInvalid> + code: `import { FormControl, FormControlError, FormControlErrorText, FormControlErrorIcon, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control"; +import { Select, SelectTrigger, SelectInput, SelectIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectItem } from "@/components/ui/select"; +import { AlertCircleIcon, ChevronDownIcon } from "@/components/ui/icon"; + +function Example() { + return ( + <FormControl isRequired isInvalid> <FormControlLabel> <FormControlLabelText> Choose your favorite color @@ -797,9 +807,10 @@ The Select component with FormControl example demonstrates how to manage its sta <FormControlErrorText>Mandatory field</FormControlErrorText> </FormControlError> </FormControl> -`, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx index 00911b6da..77691dd85 100644 --- a/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx @@ -32,8 +32,13 @@ This is an illustration of **Skeleton** component. padding: 20, }} metaData={{ - code: ` - <Box className="w-[325px] gap-4 p-3 rounded-md bg-background-100"> + code: `import { Box } from "@/components/ui/box"; +import { HStack } from "@/components/ui/hstack"; +import { Skeleton, SkeletonText } from "@/components/ui/skeleton"; + +function Example() { + return ( + <Box className="w-[325px] gap-4 p-3 rounded-md bg-background-100"> <Skeleton variant="sharp" className="h-[150px]" /> <SkeletonText _lines={3} className="h-3" /> <HStack className="gap-2 align-middle"> @@ -41,9 +46,10 @@ This is an illustration of **Skeleton** component. <SkeletonText _lines={2} gap={1} className="h-2 w-2/5" /> </HStack> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, Skeleton, SkeletonText, Box, HStack }, argsType: {}, @@ -410,8 +416,17 @@ Use the `isLoaded` prop to show the content after the skeleton content is loaded padding: 20, }} metaData={{ - code: ` - <Box className="w-[290px] h-[400px] p-4 rounded-sm bg-background-100 gap-3"> + code: `import { Avatar, AvatarFallbackText } from "@/components/ui/avatar"; +import { Box } from "@/components/ui/box"; +import { HStack } from "@/components/ui/hstack"; +import { Image } from "@/components/ui/image"; +import { Skeleton } from "@/components/ui/skeleton"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <Box className="w-[290px] h-[400px] p-4 rounded-sm bg-background-100 gap-3"> <Skeleton variant="rounded" className="h-44 w-64 rounded-sm" {...props}> <Image className="h-44 w-64 rounded-sm" @@ -437,9 +452,10 @@ Use the `isLoaded` prop to show the content after the skeleton content is loaded <Text className="text-sm font-bold">John Smith</Text> </HStack> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, Skeleton, SkeletonText, Box, Image, Text, HStack, VStack, Avatar, AvatarFallbackText }, argsType: { diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx index bd262c8a3..4fa656a65 100644 --- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx @@ -51,8 +51,12 @@ This is an illustration of **Slider** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Center className="w-[300px] h-[150px]"> + code: `import { Center } from "@/components/ui/center"; +import { Slider, SliderThumb, SliderTrack, SliderFilledTrack } from "@/components/ui/slider"; + +function Example() { + return ( + <Center className="w-[300px] h-[150px]"> <Slider defaultValue={30} {...props} > <SliderTrack> <SliderFilledTrack /> @@ -60,9 +64,10 @@ This is an illustration of **Slider** component. <SliderThumb /> </Slider> </Center> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx index 9642429b6..eb6459842 100644 --- a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx @@ -29,11 +29,16 @@ This is an illustration of **Spinner** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Spinner {...props} color={colors.gray[500]} /> - `, + code: `import { Spinner } from "@/components/ui/spinner"; +import colors from "tailwindcss/colors"; + +function Example() { + return ( + <Spinner {...props} color={colors.gray[500]} /> + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, Spinner, colors }, argsType: { @@ -138,14 +143,20 @@ A Spinner component with a label provides informative text or a label alongside showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <HStack space="sm" > + code: `import { HStack } from "@/components/ui/hstack"; +import { Spinner } from "@/components/ui/spinner"; +import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <HStack space="sm" > <Spinner/> <Text size="md">Please Wait</Text> </HStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -167,17 +178,22 @@ A Spinner component with a color scheme enhances visual appeal by incorporating showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space="md" > - {/* colors is imported from 'tailwindcss/colors' */} + code: `import { Spinner } from "@/components/ui/spinner"; +import { VStack } from "@/components/ui/vstack"; +import colors from "tailwindcss/colors"; + +function Example() { + return ( + <VStack space="md" > <Spinner color={colors.indigo[600]} /> <Spinner color={colors.emerald[600]} /> <Spinner color={colors.amber[600]} /> <Spinner color={colors.fuchsia[600]} /> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx index 995dc17a6..69c0ffbc2 100644 --- a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx @@ -38,15 +38,20 @@ This is an illustration of **Switch** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Switch {...props} trackColor={{ false: colors.neutral[300], true: colors.neutral[600] }} + code: `import { Switch } from "@/components/ui/switch"; +import colors from "tailwindcss/colors"; + +function Example() { + return ( + <Switch {...props} trackColor={{ false: colors.neutral[300], true: colors.neutral[600] }} thumbColor={colors.neutral[50]} activeThumbColor={colors.neutral[50]} ios_backgroundColor={colors.neutral[300]} /> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, Switch, colors }, argsType: { @@ -337,8 +342,14 @@ An example of a switch component with a label, which includes another switch com showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <HStack space="md"> + code: `import { HStack } from "@/components/ui/hstack"; +import { Switch } from "@/components/ui/switch"; +import { Text } from "@/components/ui/text"; +import colors from "tailwindcss/colors"; + +function Example() { + return ( + <HStack space="md"> <Switch trackColor={{ false: colors.gray[300], true: colors.gray[500] }} thumbColor={colors.gray[50]} @@ -347,9 +358,10 @@ An example of a switch component with a label, which includes another switch com /> <Text size="sm" >Allow notifications</Text> </HStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -372,8 +384,14 @@ An example of a switch component used within a checked state component to repres showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <HStack space="md"> + code: `import { HStack } from "@/components/ui/hstack"; +import { Switch } from "@/components/ui/switch"; +import { Text } from "@/components/ui/text"; +import colors from "tailwindcss/colors"; + +function Example() { + return ( + <HStack space="md"> <Switch defaultValue={true} trackColor={{ false: colors.gray[300], true: colors.gray[500] }} @@ -383,9 +401,10 @@ An example of a switch component used within a checked state component to repres /> <Text size="sm" >Public profile</Text> </HStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx index 435e88553..b1926e849 100644 --- a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx @@ -56,7 +56,10 @@ This is an illustration of a **Table** component. overflow: 'scroll', }} metaData={{ - code: ` + code: `import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableData } from "@/components/ui/table"; + +function Example() { + return ( <Table className="w-full"> <TableHeader> <TableRow> @@ -100,9 +103,10 @@ This is an illustration of a **Table** component. </TableRow> </TableFooter> </Table> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Table, @@ -357,7 +361,9 @@ This is an example of a Table component with a caption. overflow: 'scroll', }} metaData={{ - code: ` + code: `import { Box } from "@/components/ui/box"; +import { Table, TableHeader, TableBody, TableHead, TableRow, TableData, TableCaption } from "@/components/ui/table"; + function App(){ return ( <Box className="rounded-lg overflow-hidden w-full"> @@ -407,8 +413,7 @@ function App(){ </Table> </Box> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -443,7 +448,10 @@ This example demonstrates a table with a striped background. overflow: 'scroll', }} metaData={{ - code: ` + code: `import { Badge, BadgeText } from "@/components/ui/badge"; +import { Box } from "@/components/ui/box"; +import { Table, TableHeader, TableBody, TableHead, TableRow, TableData } from "@/components/ui/table"; + function App(){ return ( <Box className="p-3 bg-background-0 rounded-lg overflow-hidden"> @@ -547,8 +555,7 @@ function App(){ </Table> </Box> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -584,7 +591,10 @@ This example illustrates a table component with a badge component. overflow: 'scroll', }} metaData={{ - code: ` + code: `import { Badge, BadgeText } from "@/components/ui/badge"; +import { Box } from "@/components/ui/box"; +import { Table, TableHeader, TableBody, TableHead, TableRow, TableData } from "@/components/ui/table"; + function App(){ return ( <Box className="rounded-lg overflow-hidden"> @@ -688,8 +698,7 @@ function App(){ </Table> </Box> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -725,7 +734,9 @@ This example illustrates a table component with a top and a side header. overflow: 'scroll', }} metaData={{ - code: ` + code: `import { Box } from "@/components/ui/box"; +import { Table, TableHeader, TableBody, TableHead, TableRow, TableData } from "@/components/ui/table"; + function App(){ return ( <Box className="border border-solid border-outline-200 rounded-lg overflow-hidden w-full"> @@ -777,8 +788,7 @@ function App(){ </Table> </Box> ); -} -`, +}`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx index 48231d83d..2741bc7a6 100644 --- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx @@ -36,13 +36,17 @@ This is an illustration of **Text** component. showComponentRenderer={ true } showArgsController = { false} metaData = {{ - code: ` - <Text> + code: `import { Text } from "@/components/ui/text"; + +function Example() { + return ( + <Text> Hello World! </Text> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -319,8 +323,10 @@ Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, ` showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App() { + code: `import { Center } from "@/components/ui/center"; +import { Text } from "@/components/ui/text"; + +function App() { const sizes = [ 'xs', 'sm', @@ -340,8 +346,7 @@ Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, ` ))} </Center> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx index 659f42381..d0b12ef8d 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx @@ -44,15 +44,19 @@ This is an illustration of **Textarea** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Textarea {...props} className="w-64"> + code: `import { Textarea, TextareaInput } from "@/components/ui/textarea"; + +function Example() { + return ( + <Textarea {...props} className="w-64"> <TextareaInput placeholder="Your text goes here..." /> </Textarea> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -485,8 +489,12 @@ The Textarea Component can be incorporated within the FormControl. showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <FormControl size="sm" className="max-w-[200px] w-full"> + code: `import { FormControl, FormControlLabel, FormControlLabelText, FormControlHelper, FormControlHelperText } from "@/components/ui/form-control"; +import { Textarea, TextareaInput } from "@/components/ui/textarea"; + +function Example() { + return ( + <FormControl size="sm" className="max-w-[200px] w-full"> <FormControlLabel> <FormControlLabelText> Write with me @@ -501,9 +509,10 @@ The Textarea Component can be incorporated within the FormControl. </FormControlHelperText> </FormControlHelper> </FormControl> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx index eaae7cc96..71b558c58 100644 --- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx @@ -61,8 +61,11 @@ This is an illustration of **Toast** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - function Example() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { useToast, Toast, ToastTitle, ToastDescription } from "@/components/ui/toast"; +import React from "react"; + +function Example() { const toast = useToast(); const [toastId, setToastId] = React.useState(0); const handleToast = () => { @@ -95,8 +98,7 @@ This is an illustration of **Toast** component. <ButtonText>Press Me</ButtonText> </Button> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, @@ -415,8 +417,15 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { HStack } from "@/components/ui/hstack"; +import { Pressable } from "@/components/ui/pressable"; +import { useToast, Toast, ToastTitle, ToastDescription } from "@/components/ui/toast"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, CloseIcon, HelpCircleIcon } from "@/components/ui/icon"; +import React from "react"; + +function Example() { const toast = useToast(); const [toastId, setToastId] = React.useState(0); const handleToast = () => { @@ -470,8 +479,7 @@ The Examples section provides visual representations of the different variants o <ButtonText>Press Me</ButtonText> </Button> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, @@ -503,8 +511,15 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example() { + code: `import { Avatar, AvatarFallbackText, AvatarImage } from "@/components/ui/avatar"; +import { Button, ButtonText } from "@/components/ui/button"; +import { Heading } from "@/components/ui/heading"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { useToast, Toast } from "@/components/ui/toast"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { const toast = useToast(); return ( <Button @@ -551,8 +566,7 @@ The Examples section provides visual representations of the different variants o <ButtonText>Show Toast</ButtonText> </Button> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, @@ -589,8 +603,17 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example() { + code: `import { Box } from "@/components/ui/box"; +import { Button, ButtonText, ButtonGroup } from "@/components/ui/button"; +import { HStack } from "@/components/ui/hstack"; +import { Pressable } from "@/components/ui/pressable"; +import { useToast, Toast, ToastTitle, ToastDescription } from "@/components/ui/toast"; +import { VStack } from "@/components/ui/vstack"; +import { Icon, CloseIcon } from "@/components/ui/icon"; +import React from "react"; +import { RefreshCw } from "lucide-react-native"; + +function Example() { const toast = useToast(); const [toastId, setToastId] = React.useState(0); const handleToast = () => { @@ -613,7 +636,6 @@ The Examples section provides visual representations of the different variants o className="p-4 gap-4 w-full max-w-[386px] bg-background-0 shadow-hard-2 flex-row" > <Box className="h-11 w-11 items-center justify-center hidden min-[400px]:flex bg-background-50"> - {/* RefreshCw is imported from 'lucide-react-native' */} <Icon as={RefreshCw} size="xl" @@ -658,8 +680,7 @@ The Examples section provides visual representations of the different variants o <ButtonText>Press Me</ButtonText> </Button> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, @@ -693,8 +714,13 @@ The Examples section provides visual representations of the different variants o showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function Example() { + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Divider } from "@/components/ui/divider"; +import { useToast, Toast, ToastTitle } from "@/components/ui/toast"; +import { Icon } from "@/components/ui/icon"; +import { Send } from "lucide-react-native"; + +function Example() { const toast = useToast(); return ( <Button @@ -708,7 +734,6 @@ The Examples section provides visual representations of the different variants o nativeID={toastId} className="px-5 py-3 gap-4 shadow-soft-1 items-center flex-row" > - {/* Send is imported from 'lucide-react-native' */} <Icon as={Send} size="xl" @@ -728,8 +753,7 @@ The Examples section provides visual representations of the different variants o <ButtonText>Show Toast</ButtonText> </Button> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'Example'); }, diff --git a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx index fbf81f108..8765539eb 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx @@ -55,8 +55,12 @@ This is an illustration of **Tooltip** component. showComponentRenderer={true} showArgsController={true} metaData={{ - code: ` - <Tooltip + code: `import { Button, ButtonText } from "@/components/ui/button"; +import { Tooltip, TooltipContent, TooltipText } from "@/components/ui/tooltip"; + +function Example() { + return ( + <Tooltip {...props} trigger={(triggerProps) => { return ( @@ -70,9 +74,10 @@ This is an illustration of **Tooltip** component. <TooltipText>Tooltip</TooltipText> </TooltipContent> </Tooltip> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -503,8 +508,15 @@ A tooltip component with an avatar is a user interface element that displays a s showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Avatar, AvatarFallbackText, AvatarGroup } from "@/components/ui/avatar"; +import { Box } from "@/components/ui/box"; +import { Center } from "@/components/ui/center"; +import { Heading } from "@/components/ui/heading"; +import { Text } from "@/components/ui/text"; +import { Tooltip, TooltipContent } from "@/components/ui/tooltip"; +import { VStack } from "@/components/ui/vstack"; + +function App(){ return ( <Box className="justify-center h-96"> <AvatarGroup className="flex-row"> @@ -549,8 +561,7 @@ A tooltip component with an avatar is a user interface element that displays a s </AvatarGroup> </Box> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, @@ -583,8 +594,15 @@ A tooltip component with an icon is a user interface element that provides conte showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - function App(){ + code: `import { Avatar, AvatarFallbackText } from "@/components/ui/avatar"; +import { Box } from "@/components/ui/box"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { Tooltip, TooltipContent } from "@/components/ui/tooltip"; +import { Icon, EditIcon } from "@/components/ui/icon"; +import { Command } from "lucide-react-native"; + +function App(){ return ( <Box className="h-96 justify-center"> <Tooltip @@ -615,8 +633,7 @@ A tooltip component with an icon is a user interface element that provides conte </Tooltip> </Box> ); - } - `, + }`, transformCode: (code) => { return transformedCode(code, 'function', 'App'); }, diff --git a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx index 145264283..89cedd655 100644 --- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx @@ -37,17 +37,22 @@ This is an illustration of **VStack** component. showComponentRenderer={ true } showArgsController = { true} metaData = {{ - code: ` - <Box className='justify-center h-80'> + code: `import { Box } from "@/components/ui/box"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <Box className='justify-center h-80'> <VStack {...props}> <Box className="h-20 w-20 bg-primary-300" /> <Box className="h-20 w-20 bg-primary-400" /> <Box className="h-20 w-20 bg-primary-500" /> </VStack> </Box> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Wrapper, @@ -269,15 +274,20 @@ A VStack component with the reversed prop reverses the order of vertically stack showComponentRenderer={true} showArgsController={false} metaData={{ - code: ` - <VStack space='md'> + code: `import { Box } from "@/components/ui/box"; +import { VStack } from "@/components/ui/vstack"; + +function Example() { + return ( + <VStack space='md'> <Box className='w-20 h-20 bg-primary-300' /> <Box className='w-20 h-20 bg-primary-400' /> <Box className='w-20 h-20 bg-primary-500' /> </VStack> - `, + ); +}`, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'Example'); }, scope: { Box, Wrapper, VStack }, argsType: {}, From bd1b4258110af95481f8fac8273035e4f5a56949 Mon Sep 17 00:00:00 2001 From: rajat693 <rajatchaudhary.rc693@gmail.com> Date: Fri, 24 Jan 2025 15:24:51 +0530 Subject: [PATCH 6/7] fix: imports is useBreakPoint value hook and Portal component import --- .../scripts/componentsImportList.js | 1 + .../components/Portal/index.nw.stories.mdx | 2 +- .../hooks/use-break-point-value.ts | 2 +- .../core-components/nativewind/grid/index.tsx | 2 +- yarn.lock | 31 ++----------------- 5 files changed, 7 insertions(+), 31 deletions(-) diff --git a/example/storybook-nativewind/scripts/componentsImportList.js b/example/storybook-nativewind/scripts/componentsImportList.js index 859289d8a..88e8d9ac9 100644 --- a/example/storybook-nativewind/scripts/componentsImportList.js +++ b/example/storybook-nativewind/scripts/componentsImportList.js @@ -134,6 +134,7 @@ export const componentsImportMap = { 'PopoverBody', 'PopoverContent', ], + 'portal': ['Portal'], 'pressable': ['Pressable'], 'progress': ['Progress', 'ProgressFilledTrack'], 'radio': ['Radio', 'RadioGroup', 'RadioIndicator', 'RadioLabel', 'RadioIcon'], diff --git a/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx index b8d723803..df6130870 100644 --- a/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx @@ -52,7 +52,7 @@ import { HStack } from "@/components/ui/hstack"; import { Text } from "@/components/ui/text"; import { CloseIcon } from "@/components/ui/icon"; import React from "react"; -import { Portal } from "lucide-react-native"; +import { Portal } from "@/components/ui/portal"; function App(){ const [visible, setVisible] = React.useState(false); diff --git a/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts b/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts index f50c91e62..d88593295 100644 --- a/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts +++ b/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts @@ -2,7 +2,7 @@ import { Dimensions, useWindowDimensions } from 'react-native'; import { useEffect, useState } from 'react'; import resolveConfig from 'tailwindcss/resolveConfig'; -import tailwindConfig from 'tailwind.config'; +import * as tailwindConfig from '@/tailwind.config'; const TailwindTheme = resolveConfig(tailwindConfig as any); const screenSize = TailwindTheme.theme.screens; diff --git a/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx index 8df058665..7e0d36b98 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx @@ -13,7 +13,7 @@ import { cssInterop } from 'nativewind'; import { useBreakpointValue, getBreakPointValue, -} from '../../hooks/use-break-point-value'; +} from '@/components/ui/utils/use-break-point-value'; const { width: DEVICE_WIDTH } = Dimensions.get('window'); diff --git a/yarn.lock b/yarn.lock index 4882a525c..b3afa25c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20385,16 +20385,7 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -20514,7 +20505,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -20542,13 +20533,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -22548,7 +22532,7 @@ worker-rpc@^0.1.0: dependencies: microevent.ts "~0.1.1" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -22575,15 +22559,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 28718337fce60e7b73a5118e5296cf3df452e8f4 Mon Sep 17 00:00:00 2001 From: rajat693 <rajatchaudhary.rc693@gmail.com> Date: Fri, 24 Jan 2025 15:26:30 +0530 Subject: [PATCH 7/7] fix: tailwindcss version --- .../src/core-components/nativewind/dependencies.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json index ffa53f067..9f0d9b6a3 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json +++ b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json @@ -2,7 +2,7 @@ "components": { "gluestack-ui-provider": { "dependencies": { - "tailwindcss": "", + "tailwindcss": "3.4.17", "@gluestack-ui/overlay": "latest", "@gluestack-ui/toast": "latest", "@gluestack-ui/nativewind-utils": "latest",