├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitattributes ├── .github ├── actions │ └── setup │ │ └── action.yml └── workflows │ └── ci.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc.js ├── .watchmanconfig ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── .eslintrc.json ├── README.md ├── components │ ├── authors.jsx │ ├── code-editor.jsx │ ├── demos │ │ ├── card.js │ │ ├── responsive.js │ │ └── theme.js │ ├── diagrams │ │ ├── cache.jsx │ │ ├── infinite.jsx │ │ ├── pagination.jsx │ │ ├── use-draw.js │ │ └── welcome.jsx │ ├── expo-demo.jsx │ ├── external.mdx │ ├── iframe.jsx │ ├── remote-utils.js │ └── video.jsx ├── license.md ├── middleware.js ├── next-env.d.ts ├── next.config.mjs ├── package.json ├── pages │ ├── 404.mdx │ ├── 500.mdx │ ├── _app.mdx │ ├── _document.jsx │ ├── _meta.en-US.json │ ├── demo.en-US.mdx │ ├── docs │ │ ├── Components │ │ │ ├── Inputs │ │ │ │ ├── _meta.en-US.json │ │ │ │ ├── checkbox.en-US.mdx │ │ │ │ ├── input.en-US.mdx │ │ │ │ ├── pininput.en-US.mdx │ │ │ │ ├── radio.en-US.mdx │ │ │ │ ├── select.en-US.mdx │ │ │ │ ├── slider.en-US.mdx │ │ │ │ ├── switch.en-US.mdx │ │ │ │ └── textarea.en-US.mdx │ │ │ ├── Layout │ │ │ │ ├── _meta.en-US.json │ │ │ │ ├── box.en-US.mdx │ │ │ │ ├── center.en-US.mdx │ │ │ │ ├── flex.en-US.mdx │ │ │ │ ├── hstack.en-US.mdx │ │ │ │ ├── safeareabox.en-US.mdx │ │ │ │ ├── scrollbox.en-US.mdx │ │ │ │ ├── stack.en-US.mdx │ │ │ │ ├── tabs.en-US.mdx │ │ │ │ └── vstack.en-US.mdx │ │ │ ├── Lists │ │ │ │ ├── _meta.en-US.json │ │ │ │ ├── flashlist.en-US.mdx │ │ │ │ ├── list.en-US.mdx │ │ │ │ └── sectionlist.en-US.mdx │ │ │ ├── Touchables │ │ │ │ ├── _meta.en-US.json │ │ │ │ ├── button.en-US.mdx │ │ │ │ ├── icon-button.en-US.mdx │ │ │ │ ├── pressable.en-US.mdx │ │ │ │ ├── touchable-highlight.en-US.mdx │ │ │ │ ├── touchable-opacity.en-US.mdx │ │ │ │ └── touchable-without-feedback.en-US.mdx │ │ │ ├── _meta.en-US.json │ │ │ ├── avatar.en-US.mdx │ │ │ ├── badge.en-US.mdx │ │ │ ├── divider.en-US.mdx │ │ │ ├── draggable-modal.en-US.mdx │ │ │ ├── icon.en-US.mdx │ │ │ ├── image.en-US.mdx │ │ │ ├── modal.en-US.mdx │ │ │ ├── spinner.en-US.mdx │ │ │ └── text.en-US.mdx │ │ ├── Hooks │ │ │ ├── _meta.en-US.json │ │ │ ├── useDisclosure.en-US.mdx │ │ │ ├── useMediaQuery.en-US.mdx │ │ │ ├── useTheme.en-US.mdx │ │ │ └── useToast.en-US.mdx │ │ ├── _meta.en-US.json │ │ ├── customization.en-US.mdx │ │ ├── getting-started.en-US.mdx │ │ └── responsive.en-US.mdx │ └── index.en-US.mdx ├── pnpm-lock.yaml ├── postcss.config.js ├── public │ ├── favicon │ │ ├── browserconfig.xml │ │ ├── favicon.ico │ │ └── site.webmanifest │ ├── ficus-logo.svg │ ├── fonts │ │ ├── AntDesign.ttf │ │ ├── Entypo.ttf │ │ ├── EvilIcons.ttf │ │ ├── Feather.ttf │ │ ├── FontAwesome.ttf │ │ ├── FontAwesome5_Brands.ttf │ │ ├── FontAwesome5_Regular.ttf │ │ ├── FontAwesome5_Solid.ttf │ │ ├── FontAwesome6_Brands.ttf │ │ ├── FontAwesome6_Regular.ttf │ │ ├── FontAwesome6_Solid.ttf │ │ ├── Fontisto.ttf │ │ ├── Foundation.ttf │ │ ├── Ionicons.ttf │ │ ├── MaterialCommunityIcons.ttf │ │ ├── MaterialIcons.ttf │ │ ├── Octicons.ttf │ │ ├── SimpleLineIcons.ttf │ │ └── Zocial.ttf │ ├── img │ │ ├── banner.png │ │ ├── bearstudio-yellow.png │ │ ├── bearstudio.png │ │ └── chakra.png │ └── stork.wasm ├── static │ └── img │ │ └── banner.png ├── styles.css ├── tailwind.config.js ├── theme.config.tsx └── tsconfig.json ├── example ├── .gitignore ├── .npmrc ├── README.md ├── app.json ├── app │ ├── _layout.tsx │ ├── components │ │ ├── Avatar.tsx │ │ ├── Badge.tsx │ │ ├── Box.tsx │ │ ├── Button.tsx │ │ ├── Center.tsx │ │ ├── Checkbox.tsx │ │ ├── Divider.tsx │ │ ├── DraggableModal.tsx │ │ ├── FlashList.tsx │ │ ├── Flex.tsx │ │ ├── Icon.tsx │ │ ├── IconButton.tsx │ │ ├── Image.tsx │ │ ├── Input.tsx │ │ ├── List.tsx │ │ ├── Modal.tsx │ │ ├── PinInput.tsx │ │ ├── Pressable.tsx │ │ ├── Radio.tsx │ │ ├── SafeAreaBox.tsx │ │ ├── ScrollBox.tsx │ │ ├── SectionList.tsx │ │ ├── Select.tsx │ │ ├── Slider.tsx │ │ ├── Spinner.tsx │ │ ├── Stack.tsx │ │ ├── Switch.tsx │ │ ├── Tabs.tsx │ │ ├── Text.tsx │ │ ├── Toast.tsx │ │ ├── TouchableHighlight.tsx │ │ ├── TouchableOpacity.tsx │ │ └── TouchableWithoutFeedback.tsx │ ├── index.tsx │ └── items.ts ├── assets │ ├── fonts │ │ └── SpaceMono-Regular.ttf │ └── images │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png ├── babel.config.js ├── metro.config.js ├── package.json ├── pnpm-lock.yaml ├── scripts │ └── reset-project.js ├── src │ ├── ExampleSection.tsx │ └── HomeScreen.tsx └── tsconfig.json ├── jest-setup.ts ├── lefthook.yml ├── package.json ├── pnpm-lock.yaml ├── src ├── __tests__ │ └── index.test.tsx ├── components │ ├── avatar │ │ ├── avatar.component.tsx │ │ ├── avatar.spec.tsx │ │ ├── avatar.style.tsx │ │ ├── avatar.type.tsx │ │ ├── badge.component.tsx │ │ └── group.component.tsx │ ├── badge │ │ ├── badge.component.tsx │ │ ├── badge.spec.tsx │ │ ├── badge.style.tsx │ │ └── badge.type.tsx │ ├── box │ │ ├── box.component.tsx │ │ ├── box.spec.tsx │ │ ├── box.style.tsx │ │ └── box.type.tsx │ ├── button │ │ ├── button.component.tsx │ │ ├── button.service.ts │ │ ├── button.spec.tsx │ │ ├── button.style.tsx │ │ └── button.type.ts │ ├── center │ │ ├── center.component.tsx │ │ ├── center.spec.tsx │ │ ├── center.style.tsx │ │ └── center.type.tsx │ ├── checkbox │ │ ├── checkbox.component.tsx │ │ ├── checkbox.service.tsx │ │ ├── checkbox.spec.tsx │ │ ├── checkbox.style.tsx │ │ ├── checkbox.type.tsx │ │ └── group.component.tsx │ ├── divider │ │ ├── divider.component.tsx │ │ ├── divider.spec.tsx │ │ ├── divider.style.tsx │ │ └── divider.type.tsx │ ├── draggable-modal │ │ ├── draggable-modal.component.tsx │ │ ├── draggable-modal.style.tsx │ │ └── draggable-modal.type.tsx │ ├── flashlist │ │ ├── flashlist.component.tsx │ │ ├── flashlist.spec.tsx │ │ ├── flashlist.style.tsx │ │ └── flashlist.type.tsx │ ├── flex │ │ ├── flex.component.tsx │ │ ├── flex.spec.tsx │ │ ├── flex.style.tsx │ │ └── flex.type.tsx │ ├── icon-button │ │ ├── icon-button.component.tsx │ │ └── icon-button.type.ts │ ├── icon │ │ ├── icon.component.tsx │ │ ├── icon.service.tsx │ │ ├── icon.style.tsx │ │ └── icon.type.tsx │ ├── image │ │ ├── image.component.tsx │ │ ├── image.spec.tsx │ │ ├── image.style.tsx │ │ └── image.type.tsx │ ├── index.ts │ ├── input │ │ ├── input.component.tsx │ │ ├── input.style.tsx │ │ ├── input.type.tsx │ │ ├── textarea.component.tsx │ │ └── textarea.type.tsx │ ├── list │ │ ├── list.component.tsx │ │ ├── list.spec.tsx │ │ ├── list.style.tsx │ │ └── list.type.tsx │ ├── modal │ │ ├── modal.component.tsx │ │ ├── modal.style.tsx │ │ └── modal.type.tsx │ ├── pin-input │ │ ├── pin-input.component.tsx │ │ ├── pin-input.style.tsx │ │ └── pin-input.type.tsx │ ├── pressable │ │ ├── pressable.component.tsx │ │ ├── pressable.spec.tsx │ │ ├── pressable.style.tsx │ │ └── pressable.type.tsx │ ├── radio │ │ ├── group.component.tsx │ │ ├── radio.component.tsx │ │ ├── radio.service.tsx │ │ ├── radio.style.tsx │ │ └── radio.type.tsx │ ├── safeareabox │ │ ├── safeareabox.component.tsx │ │ ├── safeareabox.spec.tsx │ │ ├── safeareabox.style.tsx │ │ └── safeareabox.type.tsx │ ├── scrollbox │ │ ├── scrollbox.component.tsx │ │ ├── scrollbox.spec.tsx │ │ ├── scrollbox.style.tsx │ │ └── scrollbox.type.tsx │ ├── sectionlist │ │ ├── sectionlist.component.tsx │ │ ├── sectionlist.spec.tsx │ │ ├── sectionlist.style.tsx │ │ └── sectionlist.type.tsx │ ├── select │ │ ├── select.component.tsx │ │ ├── select.option.component.tsx │ │ ├── select.option.style.tsx │ │ ├── select.option.type.tsx │ │ ├── select.spec.tsx │ │ ├── select.style.tsx │ │ └── select.type.tsx │ ├── slider │ │ ├── slider.component.tsx │ │ ├── slider.style.tsx │ │ └── slider.type.tsx │ ├── spinner │ │ ├── spinner.component.tsx │ │ ├── spinner.spec.tsx │ │ ├── spinner.style.tsx │ │ └── spinner.type.tsx │ ├── stack │ │ ├── hstack.component.tsx │ │ ├── stack.component.tsx │ │ ├── stack.spec.tsx │ │ ├── stack.style.tsx │ │ ├── stack.type.tsx │ │ └── vstack.component.tsx │ ├── switch │ │ ├── switch.component.tsx │ │ ├── switch.style.tsx │ │ └── switch.type.tsx │ ├── tabs │ │ ├── tabs.component.tsx │ │ ├── tabs.style.ts │ │ └── tabs.type.ts │ ├── text │ │ ├── text.component.tsx │ │ ├── text.style.tsx │ │ └── text.type.ts │ ├── touchable-highlight │ │ ├── touchable-highlight.component.tsx │ │ ├── touchable-highlight.spec.tsx │ │ ├── touchable-highlight.style.tsx │ │ └── touchable-highlight.type.tsx │ ├── touchable-opacity │ │ ├── touchable-opacity.component.tsx │ │ ├── touchable-opacity.spec.tsx │ │ ├── touchable-opacity.style.tsx │ │ └── touchable-opacity.type.tsx │ └── touchable-without-feedback │ │ ├── touchable-without-feedback.component.tsx │ │ ├── touchable-without-feedback.spec.tsx │ │ ├── touchable-without-feedback.style.tsx │ │ └── touchable-without-feedback.type.tsx ├── hooks │ ├── index.ts │ ├── responsive │ │ └── useMediaQuery.tsx │ ├── toast │ │ └── useToast.tsx │ └── utils │ │ └── useDisclosure.tsx ├── index.tsx ├── theme │ ├── index.ts │ ├── theme.context.ts │ ├── theme.default.tsx │ ├── theme.hook.ts │ ├── theme.provider.tsx │ ├── theme.service.ts │ └── type.ts ├── types.ts └── utilities │ ├── index.ts │ ├── useDefaultProps.ts │ └── withDefaultProps.tsx ├── tsconfig.build.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | max_line_length=80 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | docs/ -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@react-native-community", "prettier"], 3 | "rules": { 4 | "@typescript-eslint/no-unused-vars": ["off", { "argsIgnorePattern": "^_" }], 5 | "no-unused-vars": "off", 6 | "react-hooks/exhaustive-deps": "off" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: Setup 2 | description: Setup Node.js and install dependencies 3 | 4 | runs: 5 | using: composite 6 | steps: 7 | - name: Setup Node.js 8 | uses: actions/setup-node@v3 9 | with: 10 | node-version-file: .nvmrc 11 | 12 | - name: Install pnpm 13 | uses: pnpm/action-setup@v4 14 | with: 15 | version: 8 16 | 17 | - name: Cache dependencies 18 | id: pnpm-cache 19 | uses: actions/cache@v3 20 | with: 21 | path: | 22 | **/node_modules 23 | key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} 24 | restore-keys: | 25 | ${{ runner.os }}-pnpm- 26 | 27 | - name: Install dependencies 28 | if: steps.pnpm-cache.outputs.cache-hit != 'true' 29 | run: | 30 | pnpm install -C example --frozen-lockfile 31 | pnpm install --frozen-lockfile 32 | shell: bash 33 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | 10 | jobs: 11 | lint: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v3 16 | 17 | - name: Setup 18 | uses: ./.github/actions/setup 19 | 20 | - name: Lint files 21 | run: pnpm lint 22 | 23 | - name: Typecheck files 24 | run: pnpm typecheck 25 | 26 | test: 27 | runs-on: ubuntu-latest 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v3 31 | 32 | - name: Setup 33 | uses: ./.github/actions/setup 34 | 35 | - name: Run unit tests 36 | run: pnpm test -- --maxWorkers=2 --coverage 37 | 38 | build: 39 | runs-on: ubuntu-latest 40 | steps: 41 | - name: Checkout 42 | uses: actions/checkout@v3 43 | 44 | - name: Setup 45 | uses: ./.github/actions/setup 46 | 47 | - name: Build package 48 | run: pnpm prepack 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .classpath 35 | .cxx 36 | .gradle 37 | .idea 38 | .project 39 | .settings 40 | local.properties 41 | android.iml 42 | 43 | # Cocoapods 44 | # 45 | example/ios/Pods 46 | 47 | # Ruby 48 | example/vendor/ 49 | 50 | # node.js 51 | # 52 | node_modules/ 53 | npm-debug.log 54 | yarn-debug.log 55 | yarn-error.log 56 | 57 | # BUCK 58 | buck-out/ 59 | \.buckd/ 60 | android/app/libs 61 | android/keystores/debug.keystore 62 | 63 | # Expo 64 | .expo/ 65 | 66 | # Turborepo 67 | .turbo/ 68 | 69 | # generated by bob 70 | lib/ 71 | 72 | docs/.next 73 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | node-linker=hoisted -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 18.18.0 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | docs 2 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | tabWidth: 2, 4 | trailingComma: 'es5', 5 | useTabs: false, 6 | printWidth: 80, 7 | }; 8 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Nicolas Torion 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Native Ficus UI banner 2 | 3 |
4 | 5 | Ficus UI is a React Native UI library forked on Magnus UI and inspired by Chakra UI 6 | 7 | ## Requirements 8 | 9 | This library now needs `react-native-gesture-handler` to be installed inside the React Native project. 10 | If you use Expo Go then you have nothing to do as Gesture Handler is integrated inside Expo SDK. 11 | But if you use a Bare React Native project, please follow those instructions in first : https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/ 12 | 13 | ## Installation 14 | 15 | With pnpm : 16 | 17 | ```sh 18 | pnpm add react-native-ficus-ui 19 | ``` 20 | 21 | With npm : 22 | 23 | ```sh 24 | npm install react-native-ficus-ui 25 | ``` 26 | 27 | With yarn : 28 | 29 | ```sh 30 | yarn add react-native-ficus-ui 31 | ``` 32 | 33 | Then, install the pods for iOS : 34 | 35 | ```sh 36 | cd ios && pod install 37 | ``` 38 | 39 | ## Usage 40 | 41 | You need to wrap your root component inside ThemeProvider component from react-native-ficus-ui. 42 | 43 | ```js title="index.js" 44 | import { AppRegistry } from 'react-native'; 45 | import { ThemeProvider } from 'react-native-ficus-ui'; 46 | 47 | import App from './src/App'; 48 | 49 | export default function Main() { 50 | return ( 51 | 52 | 53 | 54 | ); 55 | } 56 | 57 | AppRegistry.registerComponent('main', () => Main); 58 | ``` 59 | 60 | ## Contributing 61 | 62 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. 63 | 64 | ## License 65 | 66 | MIT 67 | 68 | --- 69 | 70 | Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 71 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": "next/core-web-vitals" 4 | } 5 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # [Ficus UI Documentation](https://ficus-ui.com) 2 | 3 | To develop locally, clone this repository and run the following command to start 4 | the local dev server: 5 | 6 | ```bash 7 | pnpm install 8 | pnpm dev 9 | ``` 10 | 11 | And visit `localhost:3000` to preview your changes. 12 | -------------------------------------------------------------------------------- /docs/components/authors.jsx: -------------------------------------------------------------------------------- 1 | export default function Authors({ date, children }) { 2 | return ( 3 |
4 | {date} by {children} 5 |
6 | ) 7 | } 8 | 9 | export function Author({ name, link }) { 10 | return ( 11 | 12 | 19 | {name} 20 | 21 | 22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /docs/components/code-editor.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { LiveProvider, LiveEditor, LivePreview, LiveError } from "react-live"; 3 | import * as ReactNative from 'react-native'; 4 | import * as FicusUI from 'react-native-ficus-ui'; 5 | 6 | const scope = { React, ...ReactNative, ReactNative, ...FicusUI }; 7 | 8 | export function CodeEditor({ code, noPreview = false, ...rest }) { 9 | return ( 10 |
11 | 12 |
13 | { !noPreview && } 14 |
EDITABLE EXAMPLE
15 | 16 | 17 |
18 | 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /docs/components/demos/card.js: -------------------------------------------------------------------------------- 1 | import { ThemeProvider } from 'react-native-ficus-ui'; 2 | 3 | import { ItemCard } from '@components/demos/responsive'; 4 | 5 | export const Card = () => { 6 | const item = { 7 | id: 1, 8 | image: 'https://bit.ly/4dR2Hgy', 9 | location: 'Cape Town', 10 | name: 'Modern, Chic Penthouse with Pool and Golf park', 11 | price: '200$', 12 | scoring: 4.91, 13 | evaluations: 290, 14 | }; 15 | 16 | return ( 17 | 18 | 19 | 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /docs/components/diagrams/use-draw.js: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | 3 | export function useDraw(paths = {}, name = '') { 4 | const { locale, defaultLocale } = useRouter() 5 | 6 | if (!Object.hasOwn(paths, defaultLocale)) { 7 | throw new Error( 8 | `Please provide '${defaultLocale}' locale inside '${paths}'.` 9 | ) 10 | } 11 | 12 | if ( 13 | typeof paths[locale] === 'string' && 14 | typeof paths[defaultLocale] === 'string' 15 | ) { 16 | return paths[locale] || paths[defaultLocale] 17 | } 18 | 19 | return paths[locale]?.[name] || paths[defaultLocale][name] 20 | } 21 | -------------------------------------------------------------------------------- /docs/components/external.mdx: -------------------------------------------------------------------------------- 1 | import { Callout } from 'nextra/components' 2 | 3 | 4 | This `` comes from `external.mdx` 5 | 6 | -------------------------------------------------------------------------------- /docs/components/remote-utils.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | const path = require('path') 3 | const fs = require('fs') 4 | const git = require('isomorphic-git') 5 | const http = require('isomorphic-git/http/node') 6 | 7 | const CACHE_DIR = '.next/cache/nextra-remote/' 8 | 9 | async function listFiles({ repo, rootDir }) { 10 | const dir = path.join(CACHE_DIR, repo.split('/').pop()) 11 | await git.clone({ fs, http, dir, url: repo }) 12 | 13 | const filenames = await git.listFiles({ fs, http, dir }) 14 | return filenames 15 | .filter(filename => filename.startsWith(rootDir)) 16 | .map(filename => filename.replace(rootDir, '')) 17 | } 18 | 19 | async function findPathWithExtension({ repo, rootDir, slug = ['index'] }) { 20 | const dirs = slug.slice(0, -1) 21 | const dirPath = path.join(CACHE_DIR, repo.split('/').pop(), rootDir, ...dirs) 22 | 23 | const files = await fs.promises.readdir(dirPath, { 24 | withFileTypes: true 25 | }) 26 | const filename = slug.at(-1) 27 | const matched = files.find(file => { 28 | const { name, ext } = path.parse(file.name) 29 | return file.isFile() && name === filename && /\.mdx?$/.test(ext) 30 | }) 31 | return path.join(dirPath, matched?.name) 32 | } 33 | 34 | async function findStaticPaths({ repo, rootDir }) { 35 | const filePaths = await listFiles({ repo, rootDir }) 36 | return filePaths 37 | .filter(filename => /\.mdx?$/.test(filename)) 38 | .map(filename => ({ 39 | params: { 40 | slug: filename 41 | .replace(/\.mdx?$/, '') 42 | // .replace(/(\/|^)index$/, '') 43 | .split('/') 44 | } 45 | })) 46 | } 47 | 48 | module.exports = { listFiles, findPathWithExtension, findStaticPaths } 49 | -------------------------------------------------------------------------------- /docs/components/video.jsx: -------------------------------------------------------------------------------- 1 | import { useCallback, useEffect, useRef } from 'react' 2 | import { useInView } from 'react-intersection-observer' 3 | import 'intersection-observer' 4 | 5 | export default function Video({ src, caption, ratio }) { 6 | const [inViewRef, inView] = useInView({ 7 | threshold: 1 8 | }) 9 | const videoRef = useRef() 10 | 11 | const setRefs = useCallback( 12 | node => { 13 | // Ref's from useRef needs to have the node assigned to `current` 14 | videoRef.current = node 15 | // Callback refs, like the one from `useInView`, is a function that takes the node as an argument 16 | inViewRef(node) 17 | 18 | if (node) { 19 | node.addEventListener('click', function () { 20 | if (this.paused) { 21 | this.play() 22 | } else { 23 | this.pause() 24 | } 25 | }) 26 | } 27 | }, 28 | [inViewRef] 29 | ) 30 | 31 | useEffect(() => { 32 | if (!videoRef?.current) { 33 | return 34 | } 35 | 36 | if (inView) { 37 | videoRef.current.play() 38 | } else { 39 | videoRef.current.pause() 40 | } 41 | }, [inView]) 42 | 43 | return ( 44 |
45 |
46 | 56 | {caption && ( 57 |
58 | {caption} 59 |
60 | )} 61 |
62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /docs/middleware.js: -------------------------------------------------------------------------------- 1 | import { locales } from 'nextra/locales' 2 | 3 | export const middleware = request => { 4 | const { nextUrl } = request 5 | 6 | if (nextUrl.pathname.startsWith('/remote/') || nextUrl.pathname.startsWith('/fonts/')) { 7 | // The middleware must not handle dynamic routes. 8 | return 9 | } 10 | 11 | return locales(request) 12 | } 13 | -------------------------------------------------------------------------------- /docs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-ficus-ui-docs", 3 | "author": "Nicolas Torion", 4 | "private": true, 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "next build", 8 | "clean": "rimraf .next .turbo", 9 | "debug": "NODE_OPTIONS='--inspect' next dev", 10 | "dev": "next", 11 | "start": "next start", 12 | "lint": "next lint" 13 | }, 14 | "dependencies": { 15 | "eslint-config-next": "^14.2.6", 16 | "focus-visible": "^5.1.0", 17 | "intersection-observer": "^0.10.0", 18 | "isomorphic-git": "1.21.0", 19 | "markdown-to-jsx": "^6.11.4", 20 | "next": "^13.5.6", 21 | "nextra": "2.13.4", 22 | "nextra-theme-docs": "2.13.4", 23 | "react": "^18.2.0", 24 | "react-dom": "^18.2.0", 25 | "react-icons": "^5.3.0", 26 | "react-intersection-observer": "^8.26.2", 27 | "react-live": "^4.1.7", 28 | "react-native": "0.76.0", 29 | "react-native-ficus-ui": "1.3.0", 30 | "react-native-vector-icons": "^10.2.0", 31 | "react-native-web": "^0.19.12" 32 | }, 33 | "dependenciesMeta": { 34 | "nextra": { 35 | "injected": true 36 | }, 37 | "nextra-theme-docs": { 38 | "injected": true 39 | } 40 | }, 41 | "devDependencies": { 42 | "@babel/core": "^7.25.2", 43 | "@babel/preset-env": "^7.25.4", 44 | "@babel/preset-react": "^7.24.7", 45 | "@babel/preset-typescript": "^7.24.7", 46 | "autoprefixer": "^10.4.15", 47 | "babel-loader": "^9.1.3", 48 | "postcss": "^8.4.31", 49 | "tailwindcss": "^3.3.3", 50 | "webpack": "^5.95.0" 51 | }, 52 | "nextBundleAnalysis": { 53 | "budget": 358400, 54 | "budgetPercentIncreaseRed": 20, 55 | "showDetails": true 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /docs/pages/404.mdx: -------------------------------------------------------------------------------- 1 | import { NotFoundPage } from 'nextra-theme-docs' 2 | 3 | # 404 - This page could not be found 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/pages/500.mdx: -------------------------------------------------------------------------------- 1 | import { ServerSideErrorPage } from 'nextra-theme-docs' 2 | 3 | # 500 - Internal Server Error 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/pages/_app.mdx: -------------------------------------------------------------------------------- 1 | import '../styles.css'; 2 | 3 | export default function App({ Component, pageProps }) { 4 | return ( 5 | 6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /docs/pages/_document.jsx: -------------------------------------------------------------------------------- 1 | import Document, { Head, Html, Main, NextScript } from 'next/document'; 2 | import { SkipNavLink } from 'nextra-theme-docs'; 3 | 4 | class MyDocument extends Document { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | ); 16 | } 17 | } 18 | 19 | export default MyDocument; 20 | -------------------------------------------------------------------------------- /docs/pages/_meta.en-US.json: -------------------------------------------------------------------------------- 1 | { 2 | "index": { 3 | "title": "Introduction", 4 | "type": "page", 5 | "display": "hidden" 6 | }, 7 | "demo": { 8 | "type": "page", 9 | "display": "hidden", 10 | "theme": { 11 | "breadcrumb": false, 12 | "navbar": false, 13 | "footer": false, 14 | "sidebar": false, 15 | "toc": false, 16 | "pagination": false, 17 | "layout": "raw" 18 | } 19 | }, 20 | "docs": { 21 | "type": "page", 22 | "title": "Docs" 23 | }, 24 | "404": { 25 | "type": "page", 26 | "theme": { 27 | "timestamp": false, 28 | "typesetting": "article" 29 | } 30 | }, 31 | "500": { 32 | "type": "page", 33 | "theme": { 34 | "timestamp": false, 35 | "typesetting": "article" 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /docs/pages/demo.en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | searchable: false 3 | layout: '@/components/no-layout' 4 | --- 5 | 6 | import { Responsive } from '@components/demos/responsive'; 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/pages/docs/Components/Inputs/_meta.en-US.json: -------------------------------------------------------------------------------- 1 | { 2 | "input": {}, 3 | "textarea": {}, 4 | "checkbox": {}, 5 | "radio": {}, 6 | "select": {}, 7 | "switch": {}, 8 | "pininput": "PinInput", 9 | "slider": "Slider" 10 | } 11 | -------------------------------------------------------------------------------- /docs/pages/docs/Components/Inputs/textarea.en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | searchable: true 3 | --- 4 | 5 | import { CodeEditor } from '@components/code-editor'; 6 | 7 | # Textarea 8 | 9 | Component that is based on react native `TextInput` component, like input but a textarea larger. 10 | 11 | ## Import 12 | 13 | ```js 14 | import { Textarea } from 'react-native-ficus-ui'; 15 | ``` 16 | 17 | ## Usage 18 | 19 | 20 |