Init new docs examples (#36)

BearStudio · Oct 24, 2024 · 2d81030 · 2d81030
1 parent 2604ef7
commit 2d81030
Show file tree

Hide file tree

Showing 64 changed files with 1,564 additions and 201 deletions.
diff --git a/docs/components/code-editor.jsx 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 (
+    <div className="mt-8">
+      <LiveProvider code={code} scope={scope} {...rest}>
+        <div className="grid grid-cols-2 gap-4">
+          <LivePreview />
+          <div style={{ backgroundColor: 'rgb(1, 22, 39)', borderTopLeftRadius: '0.75rem', borderTopRightRadius: '0.75rem', marginBottom: '-1rem', display: 'flex', justifyContent: 'center', fontWeight: 'bold', fontSize: '0.7em', color: '#CBD5E0', padding: '0.1rem' }}>EDITABLE EXAMPLE</div>
+          <LiveEditor style={{ borderBottomLeftRadius: '0.75rem', borderBottomRightRadius: '0.75rem', overflow: 'hidden', fontSize: '0.9em', fontFamily: 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace' }} />
+          <LiveError className="text-red-800 bg-red-100 mt-2" />
+        </div>
+      </LiveProvider>
+    </div>
+  );
+}
diff --git 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
@@ -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
@@ -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
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-checkbox" />
-</div>
+### Simple checkbox
+
+<CodeEditor code={`<VStack>
+  <Checkbox value={1} prefix={<Text flex={1}>Option 1</Text>} />
+  <Checkbox value={2} prefix={<Text flex={1}>Option 2</Text>} />
+  <Checkbox
+    value={3}
+    prefix={<Text flex={1}>Option 3</Text>}
+    colorScheme="red"
+  />
+  <Checkbox
+    value={4}
+    prefix={<Text flex={1}>Option 4</Text>}
+    colorScheme="pink"
+  />
+  <Checkbox value={5} prefix={<Text flex={1}>Option 5</Text>} isLoading />
+</VStack>`} />
+
+### Checkbox sizes
+
+<CodeEditor code={`<VStack>
+  <Checkbox value={1}>Option 1</Checkbox>
+  <Checkbox value={2} size="lg">
+    Option 2
+  </Checkbox>
+  <Checkbox value={3} size="lg" isLoading>
+    Option 3
+  </Checkbox>
+</VStack>`} />
+
+### Checkbox disabled
+
+<CodeEditor code={`<Checkbox value={1} isDisabled>
+  Option 1
+</Checkbox>`} />
+
+### Checkbox group
+
+<CodeEditor code={`<CheckboxGroup colorScheme="green">
+  <Checkbox value={1}>Option 1</Checkbox>
+  <Checkbox value={2}>Option 2</Checkbox>
+</CheckboxGroup>`} />
+
+### Custom render
+
+<CodeEditor code={`<CheckboxGroup flexDirection="row">
+  {['Option 1', 'Option 2', 'Option 3'].map((item) => (
+    <Checkbox value={item}>
+      {({ isChecked }) => (
+        <Badge
+          variant={isChecked ? 'solid' : 'subtle'}
+          colorScheme="pink"
+          fontSize="lg"
+          px="md"
+          py="md"
+          borderRadius="full"
+          mx="sm"
+        >
+          {item}
+        </Badge>
+      )}
+    </Checkbox>
+  ))}
+</CheckboxGroup>`} />
 
 ## Props
 

diff --git 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
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-input" />
-</div>
+### With prefix
+
+<CodeEditor code={`<Input
+  placeholder="Username"
+  focusBorderColor="blue.500"
+  prefix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
+/>`} />
+
+### With suffix
+
+<CodeEditor code={`<Input
+  placeholder="Username"
+  focusBorderColor="blue.500"
+  suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
+/>`} />
+
+### Password
+
+<CodeEditor code={`<Input
+  placeholder="Password"
+  secureTextEntry
+  focusBorderColor="blue.500"
+/>`} />
+
+### Custom border style
+
+<CodeEditor code={`<Box>
+  <Input
+    placeholder="Username"
+    borderWidth={2}
+    focusBorderColor="orange.500"
+    focusBorderWidth={3}
+    suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
+  />
+  <Input
+    mt="md"
+    placeholder="Username"
+    borderWidth={2}
+    focusBorderColor="red.500"
+    focusBorderWidth={3}
+    focusBorderStyle="dashed"
+    suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
+  />
+</Box>`} />
+
+### Textarea
+
+<CodeEditor code={`<Box>
+  <Textarea focusBorderColor="blue.500" />
+  <Textarea
+    mt="md"
+    focusBorderColor="red.500"
+    focusBorderWidth={3}
+    focusBorderStyle="dashed"
+  />
+</Box>`} />
 
 ## Props
 

diff --git a/docs/pages/docs/Components/Inputs/pininput.en-US.mdx b/docs/pages/docs/Components/Inputs/pininput.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # PinInput
 
@@ -19,9 +18,91 @@ import { PinInput } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-pininput" />
-</div>
+### Default
+
+<CodeEditor code={`const SimplePinInput = () => {
+  const [pinValue, setPinValue] = React.useState(null);
+
+  return (
+    <PinInput
+      value={pinValue}
+      onChangeText={setPinValue}
+      keyboardType="number-pad"
+      w={250}
+    />
+  );
+}
+render(<SimplePinInput />)`} noInline />
+
+### Change count
+
+<CodeEditor code={`const SimplePinInput = () => {
+  const [pinValue, setPinValue] = React.useState(null);
+
+  return (
+    <PinInput
+      value={pinValue}
+      onChangeText={setPinValue}
+      keyboardType="number-pad"
+      cellCount={6}
+      w={380}
+    />
+  );
+}
+render(<SimplePinInput />)`} noInline />
+
+### Change color scheme
+
+<CodeEditor code={`const SimplePinInput = () => {
+  const [pinValue, setPinValue] = React.useState(null);
+
+  return (
+    <PinInput
+      value={pinValue}
+      onChangeText={setPinValue}
+      keyboardType="number-pad"
+      colorScheme="orange"
+      w={250}
+    />
+  );
+}
+render(<SimplePinInput />)`} noInline />
+
+### Set mask on input
+
+<CodeEditor code={`const SimplePinInput = () => {
+  const [pinValue, setPinValue] = React.useState(null);
+
+  return (
+    <PinInput
+      value={pinValue}
+      onChangeText={setPinValue}
+      keyboardType="number-pad"
+      mask
+      w={250}
+    />
+  );
+}
+render(<SimplePinInput />)`} noInline />
+
+### Change mask placeholder on input
+
+<CodeEditor code={`const SimplePinInput = () => {
+  const [pinValue, setPinValue] = React.useState(null);
+
+  return (
+    <PinInput
+      value={pinValue}
+      onChangeText={setPinValue}
+      keyboardType="number-pad"
+      colorScheme="green"
+      mask
+      placeholder="🌿"
+      w={250}
+    />
+  );
+}
+render(<SimplePinInput />)`} noInline />
 
 ## Props
 

diff --git a/docs/pages/docs/Components/Inputs/radio.en-US.mdx b/docs/pages/docs/Components/Inputs/radio.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # Radio
 
@@ -17,9 +16,61 @@ import { Radio, RadioGroup } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-radio" />
-</div>
+### Simple radio
+
+<CodeEditor code={`<Box>
+  <Radio value={1} />
+  <Radio value={2} defaultChecked />
+  <Radio value={3} colorScheme="green" />
+  <Radio value={4} isDisabled />
+  <Radio value={5} isLoading />
+</Box>`} />
+
+### Radio group
+
+<CodeEditor code={`<RadioGroup colorScheme="red">
+  <Radio value={1} prefix={<Text flex={1}>Option 1</Text>} />
+  <Radio value={2} prefix={<Text flex={1}>Option 2</Text>} />
+  <Radio value={3} prefix={<Text flex={1}>Option 3</Text>} />
+</RadioGroup>`} />
+
+### Radio sizes
+
+<CodeEditor code={`<Box>
+  <RadioGroup>
+    <Radio value={1} size="sm">
+      Option 1
+    </Radio>
+    <Radio value={2} size="lg">
+      Option 2
+    </Radio>
+  </RadioGroup>
+  <Radio value={3} size="lg" isLoading>
+    Loading option
+  </Radio>
+</Box>`} />
+
+### Custom radio
+
+<CodeEditor code={`<RadioGroup colorScheme="red" flexDirection="row">
+  {['Option 1', 'Option 2', 'Option 3'].map((item) => (
+    <Radio value={item}>
+      {({ isChecked }) => (
+        <Badge
+          variant={isChecked ? 'solid' : 'subtle'}
+          colorScheme="pink"
+          fontSize="lg"
+          px="md"
+          py="md"
+          borderRadius="full"
+          mx="sm"
+        >
+          {item}
+        </Badge>
+      )}
+    </Radio>
+  ))}
+</RadioGroup>`} />
 
 ## Props