Update docs

BearStudio · Oct 31, 2024 · 3f02d78 · 3f02d78
1 parent 031bcb3
commit 3f02d78
Show file tree

Hide file tree

Showing 9 changed files with 629 additions and 839 deletions.
diff --git a/docs/components/code-editor.jsx b/docs/components/code-editor.jsx
@@ -5,12 +5,12 @@ import * as FicusUI from 'react-native-ficus-ui';
 
 const scope = { React, ...ReactNative, ReactNative, ...FicusUI };
 
-export function CodeEditor({ code, ...rest }) {
+export function CodeEditor({ code, noPreview = false, ...rest }) {
   return (
     <div className="mt-8">
       <LiveProvider code={code} scope={scope} {...rest}>
         <div className="grid grid-cols-2 gap-4">
-          <LivePreview />
+          { !noPreview && <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" />

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -1,4 +1,5 @@
 import nextra from 'nextra';
+import webpack from 'webpack';
 
 const withNextra = nextra({
   theme: 'nextra-theme-docs',
@@ -67,7 +68,7 @@ export default withNextra({
       statusCode: 302,
     },
   ],
-  reactStrictMode: true,
+  reactStrictMode: false,
 
   transpilePackages: [
     'react-native',
@@ -77,10 +78,11 @@ export default withNextra({
     'react-native-vector-icons',
     'react-native-ficus-ui',
     'react-native-confirmation-code-field',
-    '@gorhom/bottom-sheet'
+    '@gorhom/bottom-sheet',
+    'react-native-gesture-handler'
   ],
 
-  webpack: (config) => {
+  webpack: (config, { isDevelopment }) => {
     config.resolve.alias = {
       ...(config.resolve.alias || {}),
       // Transform all direct `react-native` imports to `react-native-web`
@@ -93,6 +95,7 @@ export default withNextra({
       '.web.tsx',
       ...config.resolve.extensions,
     ];
+    config.plugins.push(new webpack.DefinePlugin({ __DEV__: isDevelopment, }));
     return config;
   },
 });
diff --git a/docs/package.json b/docs/package.json
@@ -25,8 +25,8 @@
     "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.1",
+    "react-native": "0.76.0",
+    "react-native-ficus-ui": "1.3.0",
     "react-native-vector-icons": "^10.2.0",
     "react-native-web": "^0.19.12"
   },
@@ -46,7 +46,8 @@
     "autoprefixer": "^10.4.15",
     "babel-loader": "^9.1.3",
     "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "webpack": "^5.95.0"
   },
   "nextBundleAnalysis": {
     "budget": 358400,

diff --git a/docs/pages/docs/Components/Layout/box.en-US.mdx b/docs/pages/docs/Components/Layout/box.en-US.mdx
@@ -3,6 +3,8 @@ searchable: true
 ---
 
 import { CodeEditor } from '@components/code-editor';
+import { Callout } from 'nextra/components';
+import { Badge } from 'react-native-ficus-ui';
 
 # Box
 
@@ -45,6 +47,21 @@ import { Box } from 'react-native-ficus-ui';
   ))}
 </HStack>`} />
 
+<Callout type="info" emoji="🎉">
+  React Native 0.76 introduces new style props `boxShadow` and `filter` for `View`, those props are now available on Ficus UI from version 1.3.0.
+  You can pass `boxShadow` and `filter` props directly to `Box` component.
+</Callout>
+
+https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#box-shadow-and-filter-style-props
+
+<CodeEditor code={`<Box
+  h={40}
+  w={40}
+  bg="white"
+  borderRadius="sm"
+  boxShadow="5 5 5 0 rgba(255, 0, 0, 0.5)"
+/>`} noPreview />
+
 ### Borders
 
 <CodeEditor code={`<HStack spacing={10}>
@@ -629,6 +646,26 @@ The shadow color property (`shadowColor` style props in StyleSheet)
 | ------ | -------- |
 | string | No       |
 
+### `boxShadow`
+
+<Badge colorScheme="purple" w="fit-content" mt="xl">NEW</Badge>
+
+The boxShadow property (`boxShadow` style prop in StyleSheet)
+
+| Type   | Required |
+| ------ | -------- |
+| string or object | No       |
+
+### `filter`
+
+<Badge colorScheme="purple" w="fit-content" mt="xl">NEW</Badge>
+
+The filter property (`filter` style prop in StyleSheet)
+
+| Type   | Required |
+| ------ | -------- |
+| string or object | No       |
+
 ### `opacity`
 
 The opacity property (`opacity` style prop in StyleSheet)

diff --git a/docs/pages/docs/Components/_meta.en-US.json b/docs/pages/docs/Components/_meta.en-US.json
@@ -5,5 +5,7 @@
   "divider": "Divider",
   "image": "Image",
   "icon": "Icon",
-  "spinner": "Spinner"
+  "spinner": "Spinner",
+  "modal": "Modal",
+  "draggable-modal": "DraggableModal"
 }
diff --git a/docs/pages/docs/Components/draggable-modal.en-US.mdx b/docs/pages/docs/Components/draggable-modal.en-US.mdx
@@ -0,0 +1,76 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+
+# DraggableModal
+
+Component to render a draggable modal, based on `react-native-bottom-sheet`
+
+https://github.com/gorhom/react-native-bottom-sheet
+
+## Import
+
+```js
+import { DraggableModal } from 'react-native-ficus-ui';
+```
+
+## Usage
+
+<CodeEditor code={`const TestModal = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  
+  return (
+    <ThemeProvider>
+      <Box h={500} bg="gray.50" p="xl">
+        <Button
+          colorScheme={!isOpen ? 'green' : 'red'}
+          onPress={() => {
+            if (!isOpen) {
+              onOpen();
+            } else {
+              onClose();
+            }
+          }}
+        >
+          {!isOpen ? 'Show Modal' : 'Hide Modal'}
+        </Button>
+
+        <DraggableModal
+          isOpen={isOpen}
+          onClose={onClose}
+          snapPoints={['30%', '80%']}
+          p="xl"
+        >
+          <Text fontSize="4xl" fontWeight="bold">
+            Settings
+          </Text>
+
+          <Text mt="xl">Your settings</Text>
+        </DraggableModal>
+      </Box>
+    </ThemeProvider>
+  );
+}
+render(<TestModal />)`} noInline />
+
+## Props
+
+Extends every `Box` props and `BottomSheetModalProps` from `react-native-bottom-sheet`
+
+### `isOpen`
+
+Boolean to indicate if modal is opened or not.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | false   |
+
+### `onClose`
+
+Method called when modal is closed by user.
+
+| Type    | Required |
+| ------- | -------- |
+| () => void | No       |