chore(doc): update docs on theme improvement and debugger

thecodingmachine · May 28, 2024 · 84d2432 · 84d2432
1 parent c3dd3b3
commit 84d2432
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 14 deletions.
diff --git a/documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx b/documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx
@@ -3,7 +3,7 @@ slug: /theming/generated-styles/gutters
 sidebar_label: Gutters
 title: Gutters
 id: theming-generated-styles_gutters
-keywords: [padding, margin, paddings, margins, gutters, spacings]
+keywords: [padding, margin, paddings, margins, gutters, spacings, gap]
 ---
 import Gutters from "../../../../src/components/Gutters";
 
@@ -45,6 +45,7 @@ Where `value` is an array of numbers, the generated keys available through the `
 - `paddingLeft_${value}`,
 - `paddingVertical_${value}`,
 - `paddingHorizontal_${value}`,
+- `gap_${value}`,
 
 The corresponding values behind these keys will be:
 

diff --git a/documentation/docs/04-Guides/04-Theming/03-Generated styles/04-Borders.mdx b/documentation/docs/04-Guides/04-Theming/03-Generated styles/04-Borders.mdx
@@ -38,11 +38,17 @@ export const config = {
 Where `widthsValues` and `radiusValues` are arrays of numbers, `widthValue` is an item of `widthsValues`, `radiusValue` is an item of `radiusValues`, and `colorsValues` is an object with
 `colorsKey` keys and `colorsValue` values, the generated styles are as follows:
 
-| font name                     | Generated style                   |
-|-------------------------------|-----------------------------------|
-| borders.w__widthValue_        | \{ borderWidth: _widthValue_ \}   |
-| borders.rounded__radiusValue_ | \{ borderRadius: _radiusValue_ \} |
-| borders._colorsKey_           | \{ borderColor: _colorsValue_ \}  |
+| border name                    | Generated style                   |
+|--------------------------------|-----------------------------------|
+| borders.w__widthValue_         | \{ borderWidth: _widthValue_ \}   |
+| borders.wTop__widthValue_      | \{ borderWidth: _widthValue_ \}   |
+| borders.wBottom__widthValue_   | \{ borderWidth: _widthValue_ \}   |
+| borders.wLeft__widthValue_     | \{ borderWidth: _widthValue_ \}   |
+| borders.wRight__widthValue_    | \{ borderWidth: _widthValue_ \}   |
+| borders.rounded__radiusValue_  | \{ borderRadius: _radiusValue_ \} |
+| borders.roundedTop__radiusValue_  | \{ borderRadius: _radiusValue_ \} |
+| borders.roundedBottom__radiusValue_  | \{ borderRadius: _radiusValue_ \} |
+| borders._colorsKey_            | \{ borderColor: _colorsValue_ \}  |
 
 
 ## Static borders styles

diff --git a/documentation/docs/04-Guides/07-Debugging.md b/documentation/docs/04-Guides/07-Debugging.md
@@ -0,0 +1,62 @@
+---
+slug: /debugging
+sidebar_label: Debugging
+title: Debugging
+id: debugging
+keywords: [debugging, reactotron]
+---
+
+Found a bug in your app? It can be difficult to identify, especially if you're unsure whether it's related to the network or not.
+In our boilerplate, we've seamlessly integrated [Reactotron](https://github.com/infinitered/reactotron), a powerful desktop app for inspecting React Native projects. 
+Reactotron is invaluable during development, offering an easy way to view your application's logs, async storage, network calls, and state.
+
+### Setup
+By default, the boilerplate comes with Reactotron already configured, saving you time and effort.
+However, if you ever need to fine-tune your Reactotron settings to better suit your
+project's requirements, rest assured that it's a breeze to do so.
+
+Simply navigate to the `./ReactotronConfig.js` file, where you'll find
+the Reactotron configuration. By default, we've set it up to use the configuration suitable for development environment, ensuring a smooth and hassle-free experience from the get-go.
+
+
+```typescript
+import Reactotron from 'reactotron-react-native';
+import mmkvPlugin from 'reactotron-react-native-mmkv';
+import {
+  QueryClientManager,
+  reactotronReactQuery,
+} from 'reactotron-react-query';
+
+import { storage, queryClient } from './src/App';
+import config from './app.json';
+
+const queryClientManager = new QueryClientManager({
+  queryClient,
+});
+
+// highlight-next-line
+// You can change the storage configuration here
+Reactotron.configure({
+  name: config.name,
+  onDisconnect: () => {
+    queryClientManager.unsubscribe();
+  },
+})
+  .useReactNative()
+  // highlight-next-line
+  .use(mmkvPlugin({ storage })) // We use the mmkv plugin to store the Reactotron state
+  // highlight-next-line
+  .use(reactotronReactQuery(queryClientManager)) // We use the react-query plugin to store the Reactotron state
+  .connect();
+```
+
+### Going Further
+For a deeper dive into the world of debugging with
+[Reactotron](https://github.com/infinitered/reactotron),
+we invite you to explore its comprehensive documentation.
+There, you'll find valuable insights and detailed guidance on harnessing the full potential
+of this tool to enhance your app's debugging process.
+
+:::info
+    We use Reactotron while the official React-Native Debugger is not stable. We recommend using Reactotron for debugging purposes.
+:::
diff --git a/documentation/src/components/Borders.tsx b/documentation/src/components/Borders.tsx
@@ -87,18 +87,46 @@ function Borders() {
           <tbody>
             {
                 sizeValues.map((value) => (
-                  <tr>
-                    <td>{`borders.w_${value}`}</td>
-                    <td><code>{`{ borderWidth: ${value} }`}</code></td>
-                  </tr>
+                  <>
+                    <tr>
+                      <td>{`borders.w_${value}`}</td>
+                      <td><code>{`{ borderWidth: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.wTop_${value}`}</td>
+                      <td><code>{`{ borderTopWidth: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.wRight_${value}`}</td>
+                      <td><code>{`{ borderRightWidth: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.wBottom_${value}`}</td>
+                      <td><code>{`{ borderBottomWidth: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.wLeft_${value}`}</td>
+                      <td><code>{`{ borderLeftWidth: ${value} }`}</code></td>
+                    </tr>
+                  </>
                 ))
             }
             {
                 radiusValues.map((value) => (
-                  <tr>
-                    <td>{`borders.rounded_${value}`}</td>
-                    <td><code>{`{ borderRadius: ${value} }`}</code></td>
-                  </tr>
+                  <>
+                    <tr>
+                      <td>{`borders.rounded_${value}`}</td>
+                      <td><code>{`{ borderRadius: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.roundedTop_${value}`}</td>
+                      <td><code>{`{ borderRadius: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.roundedBottom_${value}`}</td>
+                      <td><code>{`{ borderRadius: ${value} }`}</code></td>
+                    </tr>
+                  </>
                 ))
             }
             <tr>

diff --git a/documentation/src/components/Gutters.tsx b/documentation/src/components/Gutters.tsx
@@ -50,6 +50,10 @@ function Gutters() {
             {
                 values.map((value) => (
                   <>
+                    <tr>
+                      <td>{`gap_${value}`}</td>
+                      <td><code>{`{ gap: ${value} }`}</code></td>
+                    </tr>
                     <tr>
                       <td>{`margin_${value}`}</td>
                       <td><code>{`{ margin: ${value} }`}</code></td>