├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── pull_request_template.md ├── .gitignore ├── .npmrc ├── .nvmrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── apps ├── README.md ├── cli │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── scripts │ │ └── generate-source-files.ts │ ├── src │ │ ├── commands │ │ │ ├── add.ts │ │ │ └── init.ts │ │ ├── index.ts │ │ ├── items │ │ │ ├── components.ts │ │ │ ├── index.ts │ │ │ └── templates.ts │ │ └── utils │ │ │ ├── copy-folder.ts │ │ │ ├── get-config.ts │ │ │ ├── get-package-manager.ts │ │ │ ├── handle-error.ts │ │ │ ├── logger.ts │ │ │ ├── prompt-for-config.ts │ │ │ └── resolve-import.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── docs │ ├── .gitignore │ ├── .vscode │ │ ├── extensions.json │ │ └── launch.json │ ├── README.md │ ├── astro.config.mjs │ ├── components.json │ ├── package.json │ ├── public │ │ ├── favicon.png │ │ ├── og.jpeg │ │ └── rnr-banner.png │ ├── src │ │ ├── code-samples │ │ │ ├── tw-native-config.js │ │ │ └── tw-universal-config.js │ │ ├── components │ │ │ ├── Code.astro │ │ │ ├── Head.astro │ │ │ ├── ThemeSelect.astro │ │ │ ├── react │ │ │ │ ├── CodeBlockWrapper.tsx │ │ │ │ ├── LinkButton.tsx │ │ │ │ └── ThemeSelector.tsx │ │ │ └── ui │ │ │ │ ├── button.tsx │ │ │ │ ├── collapsible.tsx │ │ │ │ └── dropdown-menu.tsx │ │ ├── content │ │ │ ├── config.ts │ │ │ └── docs │ │ │ │ ├── components │ │ │ │ ├── accordion.mdx │ │ │ │ ├── alert-dialog.mdx │ │ │ │ ├── alert.mdx │ │ │ │ ├── aspect-ratio.mdx │ │ │ │ ├── avatar.mdx │ │ │ │ ├── badge.mdx │ │ │ │ ├── button.mdx │ │ │ │ ├── card.mdx │ │ │ │ ├── checkbox.mdx │ │ │ │ ├── collapsible.mdx │ │ │ │ ├── context-menu.mdx │ │ │ │ ├── dialog.mdx │ │ │ │ ├── dropdown-menu.mdx │ │ │ │ ├── hover-card.mdx │ │ │ │ ├── input.mdx │ │ │ │ ├── label.mdx │ │ │ │ ├── menubar.mdx │ │ │ │ ├── navigation-menu.mdx │ │ │ │ ├── popover.mdx │ │ │ │ ├── progress.mdx │ │ │ │ ├── radio-group.mdx │ │ │ │ ├── select.mdx │ │ │ │ ├── separator.mdx │ │ │ │ ├── skeleton.mdx │ │ │ │ ├── switch.mdx │ │ │ │ ├── table.mdx │ │ │ │ ├── tabs.mdx │ │ │ │ ├── text.mdx │ │ │ │ ├── textarea.mdx │ │ │ │ ├── toggle-group.mdx │ │ │ │ ├── toggle.mdx │ │ │ │ ├── tooltip.mdx │ │ │ │ └── typography.mdx │ │ │ │ ├── extras │ │ │ │ ├── android-navigation-bar.mdx │ │ │ │ ├── keyboard.mdx │ │ │ │ └── material-top-tabs.mdx │ │ │ │ ├── getting-started │ │ │ │ ├── common-patterns.mdx │ │ │ │ ├── icons.mdx │ │ │ │ ├── initial-setup.mdx │ │ │ │ └── introduction.mdx │ │ │ │ └── index.mdx │ │ ├── env.d.ts │ │ ├── lib │ │ │ └── utils.ts │ │ └── tailwind.css │ ├── tailwind.config.mjs │ ├── tsconfig.json │ └── vercel.json └── showcase │ ├── .gitignore │ ├── app.json │ ├── app │ ├── (tabs) │ │ ├── _layout.tsx │ │ ├── components │ │ │ ├── _layout.tsx │ │ │ ├── index.tsx │ │ │ └── primitives.tsx │ │ └── index.tsx │ ├── +html.tsx │ ├── +not-found.tsx │ ├── _layout.tsx │ ├── accordion.tsx │ ├── alert-dialog.tsx │ ├── alert.tsx │ ├── aspect-ratio.tsx │ ├── avatar.tsx │ ├── badge.tsx │ ├── bottom-sheet.tsx │ ├── button.tsx │ ├── calendar.tsx │ ├── card.tsx │ ├── checkbox.tsx │ ├── collapsible.tsx │ ├── combobox.tsx │ ├── command.tsx │ ├── context-menu.tsx │ ├── data-table.tsx │ ├── date-picker.tsx │ ├── dialog.tsx │ ├── dropdown-menu.tsx │ ├── form.tsx │ ├── hover-card.tsx │ ├── input.tsx │ ├── label │ │ ├── _layout.tsx │ │ ├── index.tsx │ │ └── label-primitive.tsx │ ├── material-top-tabs │ │ ├── _layout.tsx │ │ ├── green.tsx │ │ ├── index.tsx │ │ ├── purple.tsx │ │ └── red.tsx │ ├── menubar.tsx │ ├── modal.tsx │ ├── navigation-menu.tsx │ ├── popover.tsx │ ├── progress.tsx │ ├── radio-group.tsx │ ├── select.tsx │ ├── separator.tsx │ ├── skeleton.tsx │ ├── slider │ │ ├── _layout.tsx │ │ ├── index.tsx │ │ └── slider-primitive.tsx │ ├── switch.tsx │ ├── table.tsx │ ├── tabs.tsx │ ├── textarea.tsx │ ├── toast │ │ ├── _layout.tsx │ │ ├── index.tsx │ │ └── toast-primitive.tsx │ ├── toggle-group.tsx │ ├── toggle.tsx │ ├── toolbar │ │ ├── _layout.tsx │ │ ├── index.tsx │ │ └── toolbar-primitive.tsx │ ├── tooltip.tsx │ └── typography.tsx │ ├── assets │ └── images │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── components │ ├── ModalToggle.tsx │ ├── ThemeToggle.tsx │ ├── primitives │ │ └── README.md │ └── ui │ │ ├── accordion.tsx │ │ ├── alert-dialog.tsx │ │ ├── alert.tsx │ │ ├── aspect-ratio.tsx │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── checkbox.tsx │ │ ├── collapsible.tsx │ │ ├── context-menu.tsx │ │ ├── data-table.tsx │ │ ├── dialog.tsx │ │ ├── dropdown-menu.tsx │ │ ├── form.tsx │ │ ├── hover-card.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── menubar.tsx │ │ ├── navigation-menu.tsx │ │ ├── popover.tsx │ │ ├── progress.tsx │ │ ├── radio-group.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── skeleton.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── text.tsx │ │ ├── textarea.tsx │ │ ├── toggle-group.tsx │ │ ├── toggle.tsx │ │ ├── tooltip.tsx │ │ └── typography.tsx │ ├── eas.json │ ├── global.css │ ├── index.js │ ├── lib │ ├── android-navigation-bar.ts │ ├── constants.ts │ ├── icons │ │ ├── Activity.tsx │ │ ├── Airplay.tsx │ │ ├── AlarmClockIcon.tsx │ │ ├── AlertCircle.tsx │ │ ├── AlertTriangle.tsx │ │ ├── AlignCenter.tsx │ │ ├── AlignJustify.tsx │ │ ├── AlignLeft.tsx │ │ ├── AlignRight.tsx │ │ ├── ArrowDown.tsx │ │ ├── ArrowUp.tsx │ │ ├── Baby.tsx │ │ ├── BadgeAlert.tsx │ │ ├── Bold.tsx │ │ ├── Calendar.tsx │ │ ├── CalendarDays.tsx │ │ ├── Check.tsx │ │ ├── CheckSquare.tsx │ │ ├── ChevronDown.tsx │ │ ├── ChevronLeft.tsx │ │ ├── ChevronRight.tsx │ │ ├── ChevronUp.tsx │ │ ├── ChevronsDownUp.tsx │ │ ├── ChevronsUpDown.tsx │ │ ├── CircleUserRound.tsx │ │ ├── Cloud.tsx │ │ ├── Code.tsx │ │ ├── Copy.tsx │ │ ├── Database.tsx │ │ ├── Ear.tsx │ │ ├── ExternalLink.tsx │ │ ├── Fan.tsx │ │ ├── GalleryHorizontal.tsx │ │ ├── Github.tsx │ │ ├── Info.tsx │ │ ├── Italic.tsx │ │ ├── Lamp.tsx │ │ ├── LayoutPanelLeft.tsx │ │ ├── LifeBuoy.tsx │ │ ├── LogOut.tsx │ │ ├── Mail.tsx │ │ ├── MenuSquare.tsx │ │ ├── MessageSquare.tsx │ │ ├── MoonStar.tsx │ │ ├── Plus.tsx │ │ ├── PlusCircle.tsx │ │ ├── Search.tsx │ │ ├── Sparkles.tsx │ │ ├── Sun.tsx │ │ ├── Table.tsx │ │ ├── Terminal.tsx │ │ ├── Underline.tsx │ │ ├── UserPlus.tsx │ │ ├── Users.tsx │ │ ├── X.tsx │ │ └── iconWithClassName.ts │ ├── keyboard.tsx │ ├── useColorScheme.tsx │ └── utils.ts │ ├── metro.config.js │ ├── nativewind-env.d.ts │ ├── package.json │ ├── tailwind.config.js │ ├── tsconfig.json │ └── vercel.json ├── package.json ├── packages ├── reusables │ ├── index.ts │ ├── nativewind-env.d.ts │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── deprecated-ui │ │ │ │ ├── README.md │ │ │ │ ├── accordion.tsx │ │ │ │ ├── alert-dialog.tsx │ │ │ │ ├── alert.tsx │ │ │ │ ├── avatar.tsx │ │ │ │ ├── badge.tsx │ │ │ │ ├── bottom-sheet.native.tsx │ │ │ │ ├── bottom-sheet.tsx │ │ │ │ ├── button.tsx │ │ │ │ ├── calendar.tsx │ │ │ │ ├── card.tsx │ │ │ │ ├── checkbox.tsx │ │ │ │ ├── collapsible.tsx │ │ │ │ ├── combobox.tsx │ │ │ │ ├── command.tsx │ │ │ │ ├── context-menu.tsx │ │ │ │ ├── data-table.tsx │ │ │ │ ├── dialog.tsx │ │ │ │ ├── dropdown-menu.tsx │ │ │ │ ├── form.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── input.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── menubar.tsx │ │ │ │ ├── popover.tsx │ │ │ │ ├── progress.tsx │ │ │ │ ├── radio-group.tsx │ │ │ │ ├── section-list.tsx │ │ │ │ ├── select.tsx │ │ │ │ ├── separator.tsx │ │ │ │ ├── slider.tsx │ │ │ │ ├── switch.tsx │ │ │ │ ├── table.tsx │ │ │ │ ├── textarea.tsx │ │ │ │ ├── toast.tsx │ │ │ │ ├── toggle-group.tsx │ │ │ │ └── toggle.tsx │ │ │ └── ui │ │ │ │ ├── accordion.tsx │ │ │ │ ├── alert-dialog.tsx │ │ │ │ ├── alert.tsx │ │ │ │ ├── aspect-ratio.tsx │ │ │ │ ├── avatar.tsx │ │ │ │ ├── badge.tsx │ │ │ │ ├── button.tsx │ │ │ │ ├── card.tsx │ │ │ │ ├── checkbox.tsx │ │ │ │ ├── collapsible.tsx │ │ │ │ ├── context-menu.tsx │ │ │ │ ├── data-table.tsx │ │ │ │ ├── dialog.tsx │ │ │ │ ├── dropdown-menu.tsx │ │ │ │ ├── form.tsx │ │ │ │ ├── hover-card.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── input.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── menubar.tsx │ │ │ │ ├── navigation-menu.tsx │ │ │ │ ├── popover.tsx │ │ │ │ ├── progress.tsx │ │ │ │ ├── radio-group.tsx │ │ │ │ ├── select.tsx │ │ │ │ ├── separator.tsx │ │ │ │ ├── skeleton.tsx │ │ │ │ ├── switch.tsx │ │ │ │ ├── table.tsx │ │ │ │ ├── tabs.tsx │ │ │ │ ├── text.tsx │ │ │ │ ├── textarea.tsx │ │ │ │ ├── toggle-group.tsx │ │ │ │ ├── toggle.tsx │ │ │ │ ├── tooltip.tsx │ │ │ │ └── typography.tsx │ │ ├── index.ts │ │ └── lib │ │ │ ├── constants.ts │ │ │ ├── icons │ │ │ ├── Activity.tsx │ │ │ ├── Airplay.tsx │ │ │ ├── AlarmClockIcon.tsx │ │ │ ├── AlertCircle.tsx │ │ │ ├── AlertTriangle.tsx │ │ │ ├── AlignCenter.tsx │ │ │ ├── AlignJustify.tsx │ │ │ ├── AlignLeft.tsx │ │ │ ├── AlignRight.tsx │ │ │ ├── ArrowDown.tsx │ │ │ ├── ArrowUp.tsx │ │ │ ├── Baby.tsx │ │ │ ├── BadgeAlert.tsx │ │ │ ├── Bold.tsx │ │ │ ├── Calendar.tsx │ │ │ ├── CalendarDays.tsx │ │ │ ├── Check.tsx │ │ │ ├── CheckSquare.tsx │ │ │ ├── ChevronDown.tsx │ │ │ ├── ChevronLeft.tsx │ │ │ ├── ChevronRight.tsx │ │ │ ├── ChevronUp.tsx │ │ │ ├── ChevronsDownUp.tsx │ │ │ ├── ChevronsUpDown.tsx │ │ │ ├── CircleUserRound.tsx │ │ │ ├── Cloud.tsx │ │ │ ├── Code.tsx │ │ │ ├── Copy.tsx │ │ │ ├── Database.tsx │ │ │ ├── Ear.tsx │ │ │ ├── ExternalLink.tsx │ │ │ ├── Fan.tsx │ │ │ ├── GalleryHorizontal.tsx │ │ │ ├── Github.tsx │ │ │ ├── Info.tsx │ │ │ ├── Italic.tsx │ │ │ ├── Lamp.tsx │ │ │ ├── LayoutPanelLeft.tsx │ │ │ ├── LifeBuoy.tsx │ │ │ ├── LogOut.tsx │ │ │ ├── Mail.tsx │ │ │ ├── MenuSquare.tsx │ │ │ ├── MessageSquare.tsx │ │ │ ├── MoonStar.tsx │ │ │ ├── Plus.tsx │ │ │ ├── PlusCircle.tsx │ │ │ ├── Search.tsx │ │ │ ├── Sparkles.tsx │ │ │ ├── Sun.tsx │ │ │ ├── Table.tsx │ │ │ ├── Terminal.tsx │ │ │ ├── Underline.tsx │ │ │ ├── UserPlus.tsx │ │ │ ├── Users.tsx │ │ │ ├── X.tsx │ │ │ ├── iconWithClassName.ts │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── keyboard.tsx │ │ │ ├── useColorScheme.tsx │ │ │ └── utils.ts │ └── tsconfig.json └── templates │ └── starter-base │ ├── .gitignore │ ├── README.md │ ├── app.json │ ├── app │ ├── +not-found.tsx │ ├── _layout.tsx │ └── index.tsx │ ├── assets │ └── images │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── components │ ├── ThemeToggle.tsx │ └── ui │ │ ├── avatar.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── progress.tsx │ │ ├── text.tsx │ │ └── tooltip.tsx │ ├── gitignore-template │ ├── global.css │ ├── index.js │ ├── lib │ ├── android-navigation-bar.ts │ ├── constants.ts │ ├── icons │ │ ├── Info.tsx │ │ ├── MoonStar.tsx │ │ ├── Sun.tsx │ │ └── iconWithClassName.ts │ ├── useColorScheme.tsx │ └── utils.ts │ ├── metro.config.js │ ├── nativewind-env.d.ts │ ├── npmrc-template │ ├── package.json │ ├── tailwind.config.js │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── turbo.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: mrzachnugent 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[ BUG ]" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Start the '...' app with '...' 16 | 2. Go to '...' 17 | 2. Click on '....' 18 | 3. Scroll down to '....' 19 | 4. See error 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen. 23 | 24 | **Screenshots** 25 | If applicable, add screenshots to help explain your problem. 26 | 27 | **Platform (please complete the following information):** 28 | - Type: [eg: Browser, Simulator, Emulator, Device] 29 | - OS: [e.g. iOS] 30 | - Browser (if applies) [e.g. chrome, safari] 31 | 32 | **Additional context** 33 | Add any other context about the problem here. 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "[ FEATURE ]" 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Pull Request Template 2 | 3 | 10 | 11 | ## Description: 12 | 13 | 14 | 15 | Fixes issue # 16 | 17 | ## Tested Platforms: 18 | 19 | 20 | 21 | - [ ] Docs 22 | - [ ] Web 23 | - [ ] iOS 24 | - [ ] Android 25 | 26 | ## Affected Apps/Packages: 27 | 28 | 29 | 30 | - [apps/app_x] 31 | - [packages/package_y] 32 | 33 | ### Screenshots: 34 | 35 | 36 | 37 | #### Notes: 38 | 39 | 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Monorepo 2 | apps/*/credentials.json 3 | apps/*/build 4 | packages/*/build 5 | 6 | # Turborepo 7 | .turbo 8 | 9 | # Expo 10 | .expo 11 | __generated__ 12 | web-build 13 | expo-env.d.ts 14 | 15 | packages/experimental 16 | 17 | # macOS 18 | .DS_Store 19 | 20 | # Node 21 | node_modules 22 | npm-debug.log 23 | yarn-error.log 24 | package-lock.json 25 | 26 | # Ruby 27 | .direnv 28 | 29 | # Emacs 30 | *~ 31 | 32 | # Vim 33 | .*.swp 34 | .*.swo 35 | .*.swn 36 | .*.swm 37 | 38 | # Sublime Text 39 | *.sublime-project 40 | *.sublime-workspace 41 | 42 | # Xcode 43 | *.pbxuser 44 | !default.pbxuser 45 | *.xccheckout 46 | *.xcscmblueprint 47 | xcuserdata 48 | 49 | # Android Studio 50 | *.iml 51 | .gradle 52 | .idea/libraries 53 | .idea/workspace.xml 54 | .idea/gradle.xml 55 | .idea/misc.xml 56 | .idea/modules.xml 57 | .idea/vcs.xml 58 | 59 | # Eclipse 60 | .project 61 | .settings 62 | 63 | # VSCode 64 | .history/ 65 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | node-linker=hoisted -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20.11 -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Zach Nugent 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Reporting a Security Issue 4 | 5 | If you discover a security issue in this repository, please help us by responsibly disclosing it to us. We appreciate your efforts and will work with you to address and resolve the problem. 6 | 7 | Please follow these guidelines when reporting security issues: 8 | 9 | ### Responsible Disclosure 10 | 11 | 1. **Do not create public issues for security-related concerns.** 12 | 2. Email us at [nugentzn@gmail.com](mailto:nugentzn@gmail.com) with details about the issue. 13 | 3. Allow us a reasonable amount of time to address the issue before disclosing it publicly. 14 | 15 | ### Information to Include 16 | 17 | When reporting a security issue, please provide the following information: 18 | 19 | - Description of the issue, including steps to reproduce. 20 | - Any specific details or context that can help us understand and address the problem. 21 | - Your contact information for further communication. 22 | 23 | ## Code Copy-Pasting Disclaimer 24 | 25 | This repository allows users to copy and paste code snippets. While we aim to ensure the security of the code, users are responsible for reviewing and using the code responsibly in their own projects. The repository maintainers are not liable for any security vulnerabilities or issues that may arise from code usage. 26 | 27 | ## Updates and Security Notices 28 | 29 | Security updates and notices related to this repository will be communicated through the repository's README or other appropriate channels. Users are encouraged to stay informed about security-related announcements. 30 | 31 | ## Support 32 | 33 | If you have any questions or need further assistance, you can reach out to us at [nugentzn@gmail.com](mailto:nugentzn@gmail.com). 34 | 35 | Thank you for helping us keep this repository secure! 36 | -------------------------------------------------------------------------------- /apps/README.md: -------------------------------------------------------------------------------- 1 | # Apps 2 | 3 | - **Docs:** A Starlight App for Documentation 4 | - **Showcase:** A Universal Expo App that features all components, primitives, hooks, and utilities 5 | - **Starter Base:** A base starting point to help you set up your project quickly -------------------------------------------------------------------------------- /apps/cli/.gitignore: -------------------------------------------------------------------------------- 1 | __generated 2 | dist 3 | testing 4 | components.json 5 | .turbo -------------------------------------------------------------------------------- /apps/cli/README.md: -------------------------------------------------------------------------------- 1 | # React Native Reusables CLI 2 | 3 | > Please follow [the initial setup steps](https://rnr-docs.vercel.app/getting-started/initial-setup/) before using 4 | 5 | A CLI to add [react-native-reusables](https://rnr-docs.vercel.app/getting-started/introduction/) components to your project. When components depend on other components, they will also be added to your project. 6 | 7 | ## How to use 8 | 9 | Use the following command _(with optional arugments and flags)_: 10 | 11 | ```bash 12 | npx @react-native-reusables/cli@latest add 13 | ``` 14 | 15 | ### Arguments 16 | 17 | If you do not add arguments, you will be prompted to select the `ui` components you would like to add to your project. 18 | 19 | #### UI Components 20 | 21 | - `accordion` 22 | - `alert` 23 | - `alert-dialog` 24 | - `aspect-ratio` 25 | - `avatar` 26 | - `badge` 27 | - `button` 28 | - `card` 29 | - `checkbox` 30 | - `collapsible` 31 | - `context-menu` 32 | - `dialog` 33 | - `dropdown-menu` 34 | - `hover-card` 35 | - `input` 36 | - `label` 37 | - `menubar` 38 | - `navigation-menu` 39 | - `popover` 40 | - `radio-group` 41 | - `select` 42 | - `separator` 43 | - `skeleton` 44 | - `switch` 45 | - `table` 46 | - `tabs` 47 | - `text` 48 | - `textarea` 49 | - `toggle` 50 | - `toggle-group` 51 | - `tooltip` 52 | - `typography` 53 | 54 | ### Flags 55 | 56 | - `-o` or `--overwrite`: Overwrite existing files. Default to `false` 57 | - `-c ` or `--cwd `: The working directory. Defaults to the current directory. 58 | 59 | ```mdx 60 | This project uses code from shadcn. 61 | The code is licensed under the MIT License. 62 | https://github.com/shadcn-ui/ui 63 | ``` 64 | -------------------------------------------------------------------------------- /apps/cli/scripts/generate-source-files.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import { existsSync, promises as fs } from 'fs'; 4 | import path from 'path'; 5 | import { COMPONENTS } from '../src/items/components'; 6 | import { TEMPLATES } from '../src/items/templates'; 7 | import { copyFolder } from '../src/utils/copy-folder'; 8 | 9 | async function main() { 10 | for (const template of TEMPLATES) { 11 | await copyFolder(template.path, path.join('__generated', template.name), { 12 | ignore: ['.expo', 'node_modules'], 13 | renameTemplateFiles: false, 14 | }); 15 | } 16 | for (const comp of COMPONENTS) { 17 | if (Array.isArray(comp.paths)) { 18 | await writeFiles(comp.paths); 19 | } else { 20 | await writeFiles(comp.paths['universal']); 21 | } 22 | } 23 | } 24 | 25 | main(); 26 | 27 | async function writeFiles(paths: Array<{ from: string; to: { folder: string; file: string } }>) { 28 | for (const compPath of paths) { 29 | const targetDir = path.join('__generated/components', compPath.to.folder); 30 | if (!existsSync(targetDir)) { 31 | await fs.mkdir(targetDir, { recursive: true }); 32 | } 33 | try { 34 | const content = await fs.readFile(path.resolve(compPath.from), 'utf8'); 35 | await fs.writeFile(path.join(targetDir, compPath.to.file), content); 36 | } catch (error) { 37 | console.error(error); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /apps/cli/src/index.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import { add } from '@/src/commands/add'; 3 | import { init } from '@/src/commands/init'; 4 | 5 | import { Command } from 'commander'; 6 | 7 | process.on('SIGINT', () => process.exit(0)); 8 | process.on('SIGTERM', () => process.exit(0)); 9 | 10 | async function main() { 11 | const program = new Command() 12 | .name('@react-native-reusables/cli') 13 | .description('add components and dependencies to your project'); 14 | 15 | program.addCommand(add); 16 | program.addCommand(init); 17 | 18 | program.parse(); 19 | } 20 | 21 | main(); 22 | -------------------------------------------------------------------------------- /apps/cli/src/items/index.ts: -------------------------------------------------------------------------------- 1 | import { COMPONENTS } from './components'; 2 | 3 | export type Component = (typeof COMPONENTS)[number] & { icons?: string[] }; 4 | type ComponentName = (typeof COMPONENTS)[number]['name']; 5 | 6 | function getComponentDependencies( 7 | componentName: ComponentName, 8 | visited = new Set() 9 | ) { 10 | const component = COMPONENTS.find((comp) => comp.name === componentName); 11 | if (!component) return []; 12 | 13 | visited.add(componentName); 14 | 15 | let dependencies: ComponentName[] = component.dependencies.slice(); 16 | 17 | component.dependencies.forEach((dependency) => { 18 | if (!visited.has(dependency)) { 19 | const childDependencies = getComponentDependencies(dependency, visited); 20 | dependencies = dependencies.concat(childDependencies); 21 | } 22 | }); 23 | 24 | return dependencies; 25 | } 26 | 27 | export const INVALID_COMPONENT_ERROR = 'invalid component'; 28 | 29 | export function getAllComponentsToWrite(componentNames: string[]): Component[] { 30 | const uniqueComponents = new Set(); 31 | 32 | if ( 33 | componentNames.some((componentName) => !COMPONENTS.find((comp) => comp.name === componentName)) 34 | ) { 35 | throw new Error(INVALID_COMPONENT_ERROR); 36 | } 37 | 38 | componentNames.forEach((componentName) => { 39 | const allDependencies = getComponentDependencies(componentName as ComponentName); 40 | allDependencies.unshift(componentName as never); // Add the component itself to the list 41 | allDependencies.forEach((dep) => { 42 | uniqueComponents.add(dep); 43 | }); 44 | }); 45 | 46 | return Array.from(uniqueComponents).map((dep) => { 47 | const comp = COMPONENTS.find((comp) => comp.name === dep); 48 | if (!comp) { 49 | throw new Error(INVALID_COMPONENT_ERROR); 50 | } 51 | return comp; 52 | }); 53 | } 54 | -------------------------------------------------------------------------------- /apps/cli/src/items/templates.ts: -------------------------------------------------------------------------------- 1 | export const TEMPLATES = [ 2 | { 3 | name: 'starter-base', 4 | path: './node_modules/@rnr/starter-base', 5 | }, 6 | ]; 7 | -------------------------------------------------------------------------------- /apps/cli/src/utils/copy-folder.ts: -------------------------------------------------------------------------------- 1 | import { existsSync, promises as fs } from 'fs'; 2 | import path from 'path'; 3 | 4 | export async function copyFolder( 5 | src: string, 6 | dest: string, 7 | options: { ignore: string[]; renameTemplateFiles: boolean } = { 8 | ignore: [], 9 | renameTemplateFiles: false, 10 | } 11 | ) { 12 | if (!existsSync(src)) { 13 | throw new Error(`Source folder does not exist: ${src}`); 14 | } 15 | 16 | if (!existsSync(dest)) { 17 | await fs.mkdir(dest, { recursive: true }); 18 | } 19 | 20 | const entries = await fs.readdir(src, { withFileTypes: true }); 21 | 22 | for (const entry of entries) { 23 | const srcPath = path.join(src, entry.name); 24 | const destPath = path.join(dest, entry.name); 25 | 26 | if (options.ignore.includes(entry.name)) { 27 | continue; 28 | } 29 | 30 | if (entry.isDirectory()) { 31 | await copyFolder(srcPath, destPath, options); 32 | } else if (entry.isFile()) { 33 | if (options.renameTemplateFiles && entry.name === 'gitignore-template') { 34 | await fs.copyFile(srcPath, path.join(dest, '.gitignore')); 35 | } else if (options.renameTemplateFiles && entry.name === 'npmrc-template') { 36 | await fs.copyFile(srcPath, path.join(dest, '.npmrc')); 37 | } else { 38 | await fs.copyFile(srcPath, destPath); 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /apps/cli/src/utils/get-package-manager.ts: -------------------------------------------------------------------------------- 1 | import { detect } from '@antfu/ni'; 2 | 3 | export async function getPackageManager( 4 | targetDir: string 5 | ): Promise<'yarn' | 'pnpm' | 'bun' | 'npm' | 'deno'> { 6 | const packageManager = await detect({ programmatic: true, cwd: targetDir }); 7 | 8 | if (packageManager === 'yarn@berry') { 9 | return 'yarn'; 10 | } 11 | if (packageManager === 'pnpm@6') { 12 | return 'pnpm'; 13 | } 14 | 15 | return packageManager ?? 'npm'; 16 | } 17 | -------------------------------------------------------------------------------- /apps/cli/src/utils/handle-error.ts: -------------------------------------------------------------------------------- 1 | import { logger } from "@/src/utils/logger" 2 | 3 | export function handleError(error: unknown) { 4 | if (typeof error === "string") { 5 | logger.error(error) 6 | process.exit(1) 7 | } 8 | 9 | if (error instanceof Error) { 10 | logger.error(error.message) 11 | process.exit(1) 12 | } 13 | 14 | logger.error("Something went wrong. Please try again.") 15 | process.exit(1) 16 | } 17 | -------------------------------------------------------------------------------- /apps/cli/src/utils/logger.ts: -------------------------------------------------------------------------------- 1 | import chalk from "chalk" 2 | 3 | export const logger = { 4 | error(...args: unknown[]) { 5 | console.log(chalk.red(...args)) 6 | }, 7 | warn(...args: unknown[]) { 8 | console.log(chalk.yellow(...args)) 9 | }, 10 | info(...args: unknown[]) { 11 | console.log(chalk.cyan(...args)) 12 | }, 13 | success(...args: unknown[]) { 14 | console.log(chalk.green(...args)) 15 | }, 16 | break() { 17 | console.log("") 18 | }, 19 | } 20 | -------------------------------------------------------------------------------- /apps/cli/src/utils/prompt-for-config.ts: -------------------------------------------------------------------------------- 1 | import { 2 | DEFAULT_COMPONENTS, 3 | DEFAULT_LIB, 4 | rawConfigSchema, 5 | resolveConfigPaths, 6 | } from '@/src/utils/get-config'; 7 | import { logger } from '@/src/utils/logger'; 8 | import chalk from 'chalk'; 9 | import { promises as fs } from 'fs'; 10 | import ora from 'ora'; 11 | import path from 'path'; 12 | import prompts from 'prompts'; 13 | 14 | export async function promptForConfig(cwd: string) { 15 | const highlight = (text: string) => chalk.cyan(text); 16 | 17 | const options = await prompts([ 18 | { 19 | type: 'text', 20 | name: 'components', 21 | message: `Configure the import alias for ${highlight('components')}:`, 22 | initial: DEFAULT_COMPONENTS, 23 | }, 24 | { 25 | type: 'text', 26 | name: 'lib', 27 | message: `Configure the import alias for ${highlight('lib')}:`, 28 | initial: DEFAULT_LIB, 29 | }, 30 | ]); 31 | 32 | const config = rawConfigSchema.parse({ 33 | aliases: { 34 | lib: options.lib || DEFAULT_COMPONENTS, 35 | components: options.components || DEFAULT_LIB, 36 | }, 37 | }); 38 | 39 | const { proceed } = await prompts({ 40 | type: 'confirm', 41 | name: 'proceed', 42 | message: `Write configuration to ${highlight('components.json')}. Proceed?`, 43 | initial: true, 44 | }); 45 | 46 | if (proceed) { 47 | logger.info(''); 48 | const spinner = ora(`Writing components.json...`).start(); 49 | const targetPath = path.resolve(cwd, 'components.json'); 50 | await fs.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8'); 51 | spinner.succeed(); 52 | } 53 | 54 | return await resolveConfigPaths(cwd, config); 55 | } 56 | -------------------------------------------------------------------------------- /apps/cli/src/utils/resolve-import.ts: -------------------------------------------------------------------------------- 1 | import { createMatchPath, type ConfigLoaderSuccessResult } from "tsconfig-paths" 2 | 3 | export async function resolveImport( 4 | importPath: string, 5 | config: Pick 6 | ) { 7 | return createMatchPath(config.absoluteBaseUrl, config.paths)( 8 | importPath, 9 | undefined, 10 | () => true, 11 | [".ts", ".tsx"] 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /apps/cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["./*"] 8 | }, 9 | "composite": false, 10 | "declaration": true, 11 | "declarationMap": true, 12 | "esModuleInterop": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "inlineSources": false, 15 | "isolatedModules": true, 16 | "moduleResolution": "node", 17 | "noUnusedLocals": false, 18 | "noUnusedParameters": false, 19 | "preserveWatchOutput": true, 20 | "skipLibCheck": true, 21 | "strict": true, 22 | "lib": ["es2021"], 23 | "module": "ESNext", 24 | "target": "ESNext" 25 | }, 26 | "include": ["src/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /apps/cli/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | clean: true, 5 | dts: true, 6 | entry: ['src/index.ts'], 7 | format: ['esm'], 8 | sourcemap: true, 9 | minify: true, 10 | target: 'esnext', 11 | outDir: 'dist', 12 | }); 13 | -------------------------------------------------------------------------------- /apps/docs/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /apps/docs/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /apps/docs/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /apps/docs/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.mjs", 8 | "css": "src/tailwind.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } -------------------------------------------------------------------------------- /apps/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rnr/docs", 3 | "type": "module", 4 | "version": "0.1.0", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro check && astro build", 9 | "preview": "astro preview", 10 | "astro": "astro", 11 | "clean": "rm -rf .turbo node_modules dist .astro" 12 | }, 13 | "dependencies": { 14 | "@astrojs/check": "^0.5.6", 15 | "@astrojs/react": "^4.2.7", 16 | "@astrojs/starlight": "^0.21.0", 17 | "@astrojs/starlight-tailwind": "^2.0.1", 18 | "@astrojs/tailwind": "^5.1.0", 19 | "@astrojs/vercel": "^7.3.4", 20 | "@radix-ui/react-collapsible": "^1.0.3", 21 | "@radix-ui/react-dropdown-menu": "^2.0.6", 22 | "@radix-ui/react-slot": "^1.0.2", 23 | "@rnr/reusables": "workspace:*", 24 | "@types/react": "~19.0.14", 25 | "@types/react-dom": "^19.1.3", 26 | "@vercel/analytics": "^1.5.0", 27 | "astro": "^4.4.9", 28 | "class-variance-authority": "^0.7.0", 29 | "clsx": "^2.1.0", 30 | "lucide-react": "^0.511.0", 31 | "react": "19.0.0", 32 | "react-dom": "19.0.0", 33 | "sharp": "^0.32.5", 34 | "tailwind-merge": "^2.2.1", 35 | "tailwindcss": "3.3.5", 36 | "tailwindcss-animate": "^1.0.7", 37 | "typescript": "^5.8.3" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /apps/docs/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrzachnugent/react-native-reusables/c31ca0698a1cff77bbc9130e23bb6440220fc909/apps/docs/public/favicon.png -------------------------------------------------------------------------------- /apps/docs/public/og.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrzachnugent/react-native-reusables/c31ca0698a1cff77bbc9130e23bb6440220fc909/apps/docs/public/og.jpeg -------------------------------------------------------------------------------- /apps/docs/public/rnr-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrzachnugent/react-native-reusables/c31ca0698a1cff77bbc9130e23bb6440220fc909/apps/docs/public/rnr-banner.png -------------------------------------------------------------------------------- /apps/docs/src/code-samples/tw-native-config.js: -------------------------------------------------------------------------------- 1 | const { hairlineWidth } = require('nativewind/theme'); 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | module.exports = { 5 | darkMode: 'class', 6 | content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'], 7 | presets: [require('nativewind/preset')], 8 | theme: { 9 | extend: { 10 | colors: { 11 | border: 'hsl(var(--border))', 12 | input: 'hsl(var(--input))', 13 | ring: 'hsl(var(--ring))', 14 | background: 'hsl(var(--background))', 15 | foreground: 'hsl(var(--foreground))', 16 | primary: { 17 | DEFAULT: 'hsl(var(--primary))', 18 | foreground: 'hsl(var(--primary-foreground))', 19 | }, 20 | secondary: { 21 | DEFAULT: 'hsl(var(--secondary))', 22 | foreground: 'hsl(var(--secondary-foreground))', 23 | }, 24 | destructive: { 25 | DEFAULT: 'hsl(var(--destructive))', 26 | foreground: 'hsl(var(--destructive-foreground))', 27 | }, 28 | muted: { 29 | DEFAULT: 'hsl(var(--muted))', 30 | foreground: 'hsl(var(--muted-foreground))', 31 | }, 32 | accent: { 33 | DEFAULT: 'hsl(var(--accent))', 34 | foreground: 'hsl(var(--accent-foreground))', 35 | }, 36 | popover: { 37 | DEFAULT: 'hsl(var(--popover))', 38 | foreground: 'hsl(var(--popover-foreground))', 39 | }, 40 | card: { 41 | DEFAULT: 'hsl(var(--card))', 42 | foreground: 'hsl(var(--card-foreground))', 43 | }, 44 | }, 45 | borderWidth: { 46 | hairline: hairlineWidth(), 47 | }, 48 | }, 49 | }, 50 | plugins: [], 51 | }; 52 | -------------------------------------------------------------------------------- /apps/docs/src/components/Code.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Code as StarlightCode } from '@astrojs/starlight/components'; 3 | import { CodeBlockWrapper } from '../components/react/CodeBlockWrapper'; 4 | import { fixImports } from '@/lib/utils'; 5 | 6 | const { title = '', code = '', lang = 'tsx' } = Astro.props; 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /apps/docs/src/components/Head.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { Props } from '@astrojs/starlight/props' 3 | import Default from '@astrojs/starlight/components/Head.astro' 4 | import Analytics from '@vercel/analytics/astro'; 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /apps/docs/src/components/ThemeSelect.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { ThemeSelector } from './react/ThemeSelector'; 3 | --- 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/docs/src/components/react/CodeBlockWrapper.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import { 3 | Collapsible, 4 | CollapsibleContent, 5 | CollapsibleTrigger, 6 | } from '@/components/ui/collapsible'; 7 | import { cn } from '@/lib/utils'; 8 | import * as React from 'react'; 9 | 10 | export function CodeBlockWrapper({ children }: { children: React.ReactNode }) { 11 | const [isOpened, setIsOpened] = React.useState(false); 12 | 13 | return ( 14 | 15 |
16 | 20 |
26 | {children} 27 |
28 | 29 |
35 | 36 | 39 | 40 |
41 |
42 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /apps/docs/src/components/react/LinkButton.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import { ExternalLink } from 'lucide-react'; 3 | 4 | export function LinkButton({ children, ...props }: React.ComponentProps<'a'>) { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /apps/docs/src/components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 1 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" 2 | 3 | const Collapsible = CollapsiblePrimitive.Root 4 | 5 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger 6 | 7 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent 8 | 9 | export { Collapsible, CollapsibleTrigger, CollapsibleContent } 10 | -------------------------------------------------------------------------------- /apps/docs/src/content/config.ts: -------------------------------------------------------------------------------- 1 | import { defineCollection } from 'astro:content'; 2 | import { docsSchema } from '@astrojs/starlight/schema'; 3 | 4 | export const collections = { 5 | docs: defineCollection({ schema: docsSchema() }), 6 | }; 7 | -------------------------------------------------------------------------------- /apps/docs/src/content/docs/components/aspect-ratio.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Aspect-Ratio 3 | description: Presents content within a chosen aspect ratio. 4 | --- 5 | 6 | {/* prettier-ignore-start */} 7 | {/* prettier-ignore-end */} 8 | 9 | import Code from '@/components/Code.astro'; 10 | import { LinkButton } from '@/components/react/LinkButton'; 11 | import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; 12 | import importedCode from '@rnr/reusables/components/ui/aspect-ratio?raw'; 13 | 14 | 15 | Aspect-Ratio Primitive 16 | 17 | 18 | Demo 19 | 20 | 21 |
22 | 23 | Presents content within a chosen aspect ratio. 24 | 25 | ### Installation 26 | 27 | 28 | ```bash 29 | npx @react-native-reusables/cli@latest add aspect-ratio 30 | ``` 31 | 32 | 33 | 36 | 37 |
38 | 39 | **Copy/paste the following code to `~/components/ui/aspect-ratio.tsx`:** 40 | 41 | 42 | 43 | 44 | 45 | ### Usage 46 | 47 | ```tsx 48 | import { AspectRatio } from '~/components/ui/aspect-ratio'; 49 | 50 | function Example() { 51 | return ( 52 | 53 | ); 54 | } 55 | ``` 56 | ## Props 57 | 58 | ### AspectRatio 59 | 60 | Extends [`View`](https://reactnative.dev/docs/view#props) props 61 | 62 | | Prop | Type | Note | 63 | | :---: | :----: | :--------------------------: | 64 | | ratio | number | Defaults to `1` _(optional)_ | -------------------------------------------------------------------------------- /apps/docs/src/content/docs/components/input.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Input 3 | description: Shows an input component. 4 | --- 5 | 6 | {/* prettier-ignore-start */} 7 | {/* prettier-ignore-end */} 8 | 9 | import Code from '@/components/Code.astro'; 10 | import { LinkButton } from '@/components/react/LinkButton'; 11 | import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; 12 | import importedCode from '@rnr/reusables/components/ui/input?raw'; 13 | 14 | 15 | Demo 16 | 17 | 18 |
19 | 20 | Shows an input component. 21 | 22 | ## Installation 23 | 24 | 25 | 26 | ```bash 27 | npx @react-native-reusables/cli@latest add input 28 | ``` 29 | 30 | 31 | **Copy/paste the following code to `~/components/ui/input.tsx`** 32 | 33 | 34 | 35 | 36 | 37 | 38 | ## Usage 39 | 40 | ```tsx 41 | import { Input } from '~/components/ui/input'; 42 | import { Text } from '~/components/ui/text'; 43 | 44 | function Example() { 45 | const [value, setValue] = React.useState(''); 46 | 47 | const onChangeText = (text: string) => { 48 | setValue(text); 49 | }; 50 | 51 | return ( 52 | 59 | ); 60 | } 61 | ``` 62 | 63 | ## Props 64 | 65 | ### Input 66 | 67 | Extends [`Text Input`](https://reactnative.dev/docs/textinput#props) props 68 | 69 | -------------------------------------------------------------------------------- /apps/docs/src/content/docs/components/label.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Label 3 | description: A user-friendly label linked to controls for improved accessibility. 4 | --- 5 | 6 | {/* prettier-ignore-start */} 7 | {/* prettier-ignore-end */} 8 | 9 | import Code from '@/components/Code.astro'; 10 | import { LinkButton } from '@/components/react/LinkButton'; 11 | import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; 12 | import importedCode from '@rnr/reusables/components/ui/label?raw'; 13 | 14 | 15 | Label 16 | 17 | 18 | Demo 19 | 20 | 21 |
22 | 23 | A user-friendly label linked to controls for improved accessibility. 24 | 25 | ### Installation 26 | 27 | 28 | 29 | ```bash 30 | npx @react-native-reusables/cli@latest add label 31 | ``` 32 | 33 | 34 | 37 | 38 |
39 | 40 | **Copy/paste the following code to `~/components/ui/label.tsx`:** 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | ### Usage 49 | 50 | ```tsx 51 | import { Label } from '~/components/ui/label'; 52 | 53 | function Example() { 54 | return 55 | } 56 | ``` 57 | ## Props 58 | 59 | ### Label 60 | 61 | Extends [`Text`](https://reactnative.dev/docs/text#props) props 62 | 63 | | Prop | Type | Note | 64 | | :--------: | :----: | :--------------------------------------------------------------: | 65 | | nativeID\* | string | the same value needs be use by aria-labelledby from form field | 66 | -------------------------------------------------------------------------------- /apps/docs/src/content/docs/components/skeleton.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Skeleton 3 | description: Shows a skeleton component. 4 | --- 5 | 6 | {/* prettier-ignore-start */} 7 | {/* prettier-ignore-end */} 8 | 9 | import Code from '@/components/Code.astro'; 10 | import { LinkButton } from '@/components/react/LinkButton'; 11 | import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; 12 | import importedCode from '@rnr/reusables/components/ui/skeleton?raw'; 13 | 14 | 15 | Demo 16 | 17 | 18 |
19 | 20 | Shows a skeleton component. 21 | 22 | ## Installation 23 | 24 | 25 | 26 | ```bash 27 | npx @react-native-reusables/cli@latest add skeleton 28 | ``` 29 | 30 | 31 | **Copy/paste the following code to `~/components/ui/skeleton.tsx`** 32 | 33 | 34 | 35 | 36 | 37 | 38 | ## Usage 39 | 40 | ```tsx 41 | import { Skeleton } from '~/components/ui/skeleton'; 42 | 43 | function Example() { 44 | return ( 45 | 46 | ); 47 | } 48 | ``` 49 | 50 | ## Props 51 | 52 | ### Skeleton 53 | 54 | Extends [`View`](https://reactnative.dev/docs/view#props) props except for `style`. 55 | -------------------------------------------------------------------------------- /apps/docs/src/content/docs/components/textarea.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Textarea 3 | description: Shows an textarea component. 4 | --- 5 | 6 | {/* prettier-ignore-start */} 7 | {/* prettier-ignore-end */} 8 | 9 | import Code from '@/components/Code.astro'; 10 | import { LinkButton } from '@/components/react/LinkButton'; 11 | import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; 12 | import importedCode from '@rnr/reusables/components/ui/textarea?raw'; 13 | 14 | 15 | Demo 16 | 17 | 18 |
19 | 20 | Shows an textarea component. 21 | 22 | ## Installation 23 | 24 | 25 | 26 | ```bash 27 | npx @react-native-reusables/cli@latest add textarea 28 | ``` 29 | 30 | 31 | **Copy/paste the following code to `~/components/ui/textarea.tsx`** 32 | 33 | 34 | 35 | 36 | 37 | 38 | ## Usage 39 | 40 | ```tsx 41 | import { Textarea } from '~/components/ui/textarea'; 42 | import { Text } from '~/components/ui/text'; 43 | 44 | function Example() { 45 | const [value, setValue] = React.useState(''); 46 | return ( 47 |