Merge pull request #2458 from gluestack/feat/unitools-link

feat: added unitools/link

example/storybook-nativewind/package.json

@@ -52,6 +52,7 @@
     "@react-native-community/slider": "4.2.4",
     "@react-stately/collections": "^3.6.0",
     "@react-stately/tree": "^3.5.0",
+    "@unitools/link": "^0.0.4",
     "@unitools/image": "^0.0.5",
     "expo": "^47.0.0",
     "expo-linear-gradient": "^12.3.0",

example/storybook-nativewind/src/components/Link/index.nw.stories.mdx

@@ -28,6 +28,8 @@ import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 import { ArrowUpRight } from 'lucide-react-native';
+import UnitoolsLink from '@unitools/link';
+import UnitoolsLinkEg from '../../extra-components/nativewind/UnitoolsLink';
 
 This is an illustration of **Link** component.
 
@@ -254,6 +256,48 @@ We have outlined the various features that ensure the Link component is accessib
 
 Link 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).
 
+
+#### Link
+
+<>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>
+              xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</>
+
+> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
+
 ### Data Attributes Table
 
 Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
@@ -344,49 +388,6 @@ Component receives states as props as boolean values, which are applied as ```da
 
 ### Examples
 
-#### Link
-
-<>
-  <TableContainer>
-    <Table>
-      <Table.THead>
-        <Table.TR>
-          <Table.TH>
-            <Table.TText>Name</Table.TText>
-          </Table.TH>
-          <Table.TH>
-            <Table.TText>Value</Table.TText>
-          </Table.TH>
-          <Table.TH>
-            <Table.TText>Default</Table.TText>
-          </Table.TH>
-        </Table.TR>
-      </Table.THead>
-      <Table.TBody>
-        <Table.TR>
-          <Table.TD>
-            <Table.TText>
-              <InlineCode>size</InlineCode>
-            </Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>
-              xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl
-            </Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>md</Table.TText>
-          </Table.TD>
-        </Table.TR>
-      </Table.TBody>
-    </Table>
-  </TableContainer>
-</>
-
-> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
-
-### 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.
 
 #### Default
@@ -443,3 +444,36 @@ The Examples section provides visual representations of the different variants o
     }}
   />
 </Wrapper>
+
+#### Basic Unitools Link
+The below example will run for both Expo and Next.js projects. For installation steps, refer to the [Installation](https://unitools.geekyants.com/packages/link/) section of ```@unitools/link```. For the **Next.js** project replace the ```<Text>``` with the ```<p>```.
+
+```jsx
+import Link from "@unitools/link";
+```
+
+<UnitoolsLinkEg/>
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={false}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Link href="https://gluestack.io/">
+          <Text>gluestack</Text>
+        </Link>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        UnitoolsLink:Link,
+        LinkText,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper>

example/storybook-nativewind/src/extra-components/nativewind/UnitoolsLink.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link, Text, Center } from '../../core-components/nativewind';
+
+const UnitoolsLink = () => {
+  return (
+    <Center>
+      <Link href="https://gluestack.io/">
+        <Text className="text-sky-700 underline hover:no-underline p-6">
+          gluestack
+        </Text>
+      </Link>
+    </Center>
+  );
+};
+export default UnitoolsLink;