From 1a75c4d8c6f80b5222c47c64e61fb7626d0e1bca Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Tue, 3 Sep 2024 18:59:35 +0530
Subject: [PATCH] fix: updated docs for checkbox and radio component

---
 .../components/Checkbox/index.nw.stories.mdx  |  42 ++++++++
 .../src/components/Radio/index.nw.stories.mdx | 102 +++++++-----------
 2 files changed, 83 insertions(+), 61 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
index 245c52f93..59284e127 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -365,6 +365,48 @@ Contains all indicators related layout style props and actions. It inherits all
 
 Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
 
+<>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Type</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>forceMount</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>Forces mounting when more control is needed, useful for animations with React libraries.</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</>
+
+
 #### CheckboxLabel
 
 Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
index c9629cf39..5b9904d49 100644
--- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
@@ -306,6 +306,47 @@ Contains all Indicator related layout style props and actions. It inherits all t
 
 Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
 
+<>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Type</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>forceMount</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>Forces mounting when more control is needed, useful for animations with React libraries.</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</>
+
 #### RadioLabel
 
 Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
@@ -423,67 +464,6 @@ We have outlined the various features that ensure the Radio component is accessi
 
 Radio component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
 
-<!--
-## Spec Doc
-
-Explore the comprehensive details of the Radio in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5464%253A26252%26type%3Ddesign%26node-id%3D5464-27904%26viewport%3D598%252C259%252C0.03%26t%3DcgUlx0uIsFj3bgLZ-1%26scaling%3Dcontain%26starting-point-node-id%3D5464%253A27904%26mode%3Ddesign"
-  allowFullScreen
-/> -->
-
-<!--
-
-### Customizing the Radio
-
-We have a function called `createRadio` which can be used to create a custom radio component. This function takes in a configuration object which contains the styled components that you want to use for the radio. You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.
-
-#### Usage
-
-Default styling of all these components can be found in the `components/core/radio` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Radio) of the styled `Radio` components.
-
-```jsx
-// import the styles
-import {
-  Root,
-  Indicator,
-  Icon,
-  Label,
-  Group,
-} from 'components/core/radio/styled-components';
-
-// import the createRadio function
-import { createRadio } from '@gluestack-ui/radio';
-
-// Understanding the API
-const Radio = createRadio({
-  Root,
-  Indicator,
-  Icon,
-  Label,
-  Group,
-});
-
-// Using the radio component
-export default () => (
-  <RadioGroup>
-    <Radio>
-      <RadioIndicator>
-        <RadioIcon />
-      </RadioIndicator>
-      <RadioLabel />
-    </Radio>
-  </RadioGroup>
-);
-```
--->
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.