From 2d810305326e82e78fd17f385a534fa04bb8b6ae Mon Sep 17 00:00:00 2001 From: ntorionbearstudio <53612278+ntorionbearstudio@users.noreply.github.com> Date: Thu, 24 Oct 2024 17:47:40 -0400 Subject: [PATCH] Init new docs examples (#36) --- docs/components/code-editor.jsx | 21 +++ docs/middleware.js | 2 +- docs/package.json | 2 + .../docs/Components/Inputs/checkbox.en-US.mdx | 70 ++++++++- .../docs/Components/Inputs/input.en-US.mdx | 62 +++++++- .../docs/Components/Inputs/pininput.en-US.mdx | 91 +++++++++++- .../docs/Components/Inputs/radio.en-US.mdx | 61 +++++++- .../docs/Components/Inputs/select.en-US.mdx | 127 +++++++++++++++- .../docs/Components/Inputs/slider.en-US.mdx | 33 ++++- .../docs/Components/Inputs/switch.en-US.mdx | 27 +++- .../docs/Components/Inputs/textarea.en-US.mdx | 15 +- .../docs/Components/Layout/box.en-US.mdx | 96 +++++++++++-- .../docs/Components/Layout/center.en-US.mdx | 23 ++- .../docs/Components/Layout/flex.en-US.mdx | 9 +- .../docs/Components/Layout/hstack.en-US.mdx | 17 ++- .../Components/Layout/safeareabox.en-US.mdx | 15 +- .../Components/Layout/scrollbox.en-US.mdx | 41 +++++- .../docs/Components/Layout/stack.en-US.mdx | 17 ++- .../docs/Components/Layout/tabs.en-US.mdx | 135 +++++++++++++++++- .../docs/Components/Layout/vstack.en-US.mdx | 17 ++- .../docs/Components/Lists/list.en-US.mdx | 29 +++- .../Components/Lists/sectionlist.en-US.mdx | 35 ++++- .../Components/Touchables/button.en-US.mdx | 115 ++++++++++++++- .../Touchables/icon-button.en-US.mdx | 104 +++++++++++++- .../Components/Touchables/pressable.en-US.mdx | 14 +- .../Touchables/touchable-highlight.en-US.mdx | 21 ++- .../Touchables/touchable-opacity.en-US.mdx | 19 ++- .../touchable-without-feedback.en-US.mdx | 19 ++- docs/pages/docs/Components/avatar.en-US.mdx | 115 ++++++++++++++- docs/pages/docs/Components/badge.en-US.mdx | 52 ++++++- docs/pages/docs/Components/divider.en-US.mdx | 44 +++++- docs/pages/docs/Components/icon.en-US.mdx | 37 ++++- docs/pages/docs/Components/image.en-US.mdx | 15 +- docs/pages/docs/Components/modal.en-US.mdx | 38 ++++- docs/pages/docs/Components/spinner.en-US.mdx | 13 +- docs/pages/docs/Components/text.en-US.mdx | 46 +++++- docs/pnpm-lock.yaml | 60 ++++++-- docs/public/fonts/AntDesign.ttf | Bin 0 -> 70344 bytes docs/public/fonts/Entypo.ttf | Bin 0 -> 66200 bytes docs/public/fonts/EvilIcons.ttf | Bin 0 -> 13456 bytes docs/public/fonts/Feather.ttf | Bin 0 -> 56228 bytes docs/public/fonts/FontAwesome.ttf | Bin 0 -> 165548 bytes docs/public/fonts/FontAwesome5_Brands.ttf | Bin 0 -> 134040 bytes docs/public/fonts/FontAwesome5_Regular.ttf | Bin 0 -> 33736 bytes docs/public/fonts/FontAwesome5_Solid.ttf | Bin 0 -> 202744 bytes docs/public/fonts/FontAwesome6_Brands.ttf | Bin 0 -> 209376 bytes docs/public/fonts/FontAwesome6_Regular.ttf | Bin 0 -> 67976 bytes docs/public/fonts/FontAwesome6_Solid.ttf | Bin 0 -> 423676 bytes docs/public/fonts/Fontisto.ttf | Bin 0 -> 313528 bytes docs/public/fonts/Foundation.ttf | Bin 0 -> 56976 bytes docs/public/fonts/Ionicons.ttf | Bin 0 -> 442604 bytes docs/public/fonts/MaterialCommunityIcons.ttf | Bin 0 -> 1147844 bytes docs/public/fonts/MaterialIcons.ttf | Bin 0 -> 356840 bytes docs/public/fonts/Octicons.ttf | Bin 0 -> 49404 bytes docs/public/fonts/SimpleLineIcons.ttf | Bin 0 -> 54056 bytes docs/public/fonts/Zocial.ttf | Bin 0 -> 25788 bytes docs/styles.css | 35 +++++ docs/theme.config.tsx | 3 +- src/components/avatar/avatar.component.tsx | 1 + src/components/badge/badge.style.tsx | 32 ++++- src/components/button/button.style.tsx | 5 +- .../icon-button/icon-button.component.tsx | 18 ++- src/theme/theme.default.tsx | 12 +- src/theme/type.ts | 2 +- 64 files changed, 1564 insertions(+), 201 deletions(-) create mode 100644 docs/components/code-editor.jsx create mode 100644 docs/public/fonts/AntDesign.ttf create mode 100644 docs/public/fonts/Entypo.ttf create mode 100644 docs/public/fonts/EvilIcons.ttf create mode 100644 docs/public/fonts/Feather.ttf create mode 100644 docs/public/fonts/FontAwesome.ttf create mode 100644 docs/public/fonts/FontAwesome5_Brands.ttf create mode 100644 docs/public/fonts/FontAwesome5_Regular.ttf create mode 100644 docs/public/fonts/FontAwesome5_Solid.ttf create mode 100644 docs/public/fonts/FontAwesome6_Brands.ttf create mode 100644 docs/public/fonts/FontAwesome6_Regular.ttf create mode 100644 docs/public/fonts/FontAwesome6_Solid.ttf create mode 100644 docs/public/fonts/Fontisto.ttf create mode 100644 docs/public/fonts/Foundation.ttf create mode 100644 docs/public/fonts/Ionicons.ttf create mode 100644 docs/public/fonts/MaterialCommunityIcons.ttf create mode 100644 docs/public/fonts/MaterialIcons.ttf create mode 100644 docs/public/fonts/Octicons.ttf create mode 100644 docs/public/fonts/SimpleLineIcons.ttf create mode 100644 docs/public/fonts/Zocial.ttf diff --git a/docs/components/code-editor.jsx b/docs/components/code-editor.jsx new file mode 100644 index 0000000..4ef81ee --- /dev/null +++ b/docs/components/code-editor.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { LiveProvider, LiveEditor, LivePreview, LiveError } from "react-live"; +import * as ReactNative from 'react-native'; +import * as FicusUI from 'react-native-ficus-ui'; + +const scope = { React, ...ReactNative, ReactNative, ...FicusUI }; + +export function CodeEditor({ code, ...rest }) { + return ( +
+ +
+ +
EDITABLE EXAMPLE
+ + +
+
+
+ ); +} diff --git a/docs/middleware.js b/docs/middleware.js index 90dabc7..d5dd78b 100644 --- a/docs/middleware.js +++ b/docs/middleware.js @@ -3,7 +3,7 @@ import { locales } from 'nextra/locales' export const middleware = request => { const { nextUrl } = request - if (nextUrl.pathname.startsWith('/remote/')) { + if (nextUrl.pathname.startsWith('/remote/') || nextUrl.pathname.startsWith('/fonts/')) { // The middleware must not handle dynamic routes. return } diff --git a/docs/package.json b/docs/package.json index 3b14f72..a54fff3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -24,8 +24,10 @@ "react-dom": "^18.2.0", "react-icons": "^5.3.0", "react-intersection-observer": "^8.26.2", + "react-live": "^4.1.7", "react-native": "^0.75.2", "react-native-ficus-ui": "1.2.0", + "react-native-vector-icons": "^10.2.0", "react-native-web": "^0.19.12" }, "dependenciesMeta": { diff --git a/docs/pages/docs/Components/Inputs/checkbox.en-US.mdx b/docs/pages/docs/Components/Inputs/checkbox.en-US.mdx index 072a2f4..0d2f84c 100644 --- a/docs/pages/docs/Components/Inputs/checkbox.en-US.mdx +++ b/docs/pages/docs/Components/Inputs/checkbox.en-US.mdx @@ -2,8 +2,7 @@ searchable: true --- -import { ExpoDemo } from '@components/expo-demo'; - +import { CodeEditor } from '@components/code-editor'; # Checkbox @@ -17,9 +16,70 @@ import { Checkbox, CheckboxGroup } from 'react-native-ficus-ui'; ## Usage -
- -
+### Simple checkbox + + + Option 1} /> + Option 2} /> + Option 3} + colorScheme="red" + /> + Option 4} + colorScheme="pink" + /> + Option 5} isLoading /> +`} /> + +### Checkbox sizes + + + Option 1 + + Option 2 + + + Option 3 + +`} /> + +### Checkbox disabled + + + Option 1 +`} /> + +### Checkbox group + + + Option 1 + Option 2 +`} /> + +### Custom render + + + {['Option 1', 'Option 2', 'Option 3'].map((item) => ( + + {({ isChecked }) => ( + + {item} + + )} + + ))} +`} /> ## Props diff --git a/docs/pages/docs/Components/Inputs/input.en-US.mdx b/docs/pages/docs/Components/Inputs/input.en-US.mdx index fbdb5f8..87d1eca 100644 --- a/docs/pages/docs/Components/Inputs/input.en-US.mdx +++ b/docs/pages/docs/Components/Inputs/input.en-US.mdx @@ -2,8 +2,7 @@ searchable: true --- -import { ExpoDemo } from '@components/expo-demo'; - +import { CodeEditor } from '@components/code-editor'; # Input @@ -17,9 +16,62 @@ import { Input } from 'react-native-ficus-ui'; ## Usage -
- -
+### With prefix + +} +/>`} /> + +### With suffix + +} +/>`} /> + +### Password + +`} /> + +### Custom border style + + + } + /> + } + /> +`} /> + +### Textarea + + +