Merge pull request #2454 from gluestack/feat/unitool-image

Feat/unitool image

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/image": "^0.0.5",
     "expo": "^47.0.0",
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",

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

@@ -17,6 +17,7 @@ import { Meta } from '@storybook/addon-docs';
 import { Image } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import UnitoolsImageEg from '../../extra-components/nativewind/UnitoolsImage';
 
 import {
   AppProvider,
@@ -28,6 +29,7 @@ import {
   Tabs
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
+import UnitoolsImage from '@unitools/image';
 
 This is an illustration of **Image** component.
 
@@ -136,17 +138,42 @@ It inherits all the properties of React Native's [Image](https://reactnative.dev
 
 Image component is created using Image component from react-native. It extends all the props supported by [React Native Image](https://reactnative.dev/docs/image#props).
 
-<!--
-## Spec Doc
+### Example
 
-Explore the comprehensive details of the Image 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.
+The Examples section offers visual previews of the component, letting you quickly identify the best fit for your needs. Just copy the code and use it in your project.
 
-<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%3Ftype%3Ddesign%26node-id%3D6429-37300%26t%3Dh37ERUrDzeh1Zy7x-1%26scaling%3Dscale-down%26page-id%3D6429%253A35399%26starting-point-node-id%3D6429%253A37300%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+#### Basic Unitools Image 
+
+The below example will run for both Expo and Next.js projects. For installation steps, refer to the [Installation](https://unitools.geekyants.com/packages/image/) section of ```@unitools/image```.
+
+```jsx
+import Image from '@unitools/image';
+```
+
+<UnitoolsImageEg/>
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={false}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Image
+          source={require("@/assets/mountains.png")}
+          alt="Logo"
+          width={208}
+          height={320}
+        />            
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        UnitoolsImage:Image,
+      },
+      argsType: {
+      },
+    }}
+  />
+</Wrapper>

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Image, Center } from '../../core-components/nativewind';
+
+const UnitoolsImage = () => {
+  return (
+    <Center>
+      <Image
+        source={{
+          uri: 'https://images.unsplash.com/photo-1725476479171-4728f92dfa9c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE2fDZzTVZqVExTa2VRfHxlbnwwfHx8fHw%3D',
+        }}
+        alt="unitools-image"
+        className="h-52 w-80 mb-6"
+      />
+    </Center>
+  );
+};
+export default UnitoolsImage;

yarn.lock

@@ -6806,6 +6806,11 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@unitools/image@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@unitools/image/-/image-0.0.5.tgz#3a41cff525b2eb4f925f9203486e5a8998ddd0b2"
+  integrity sha512-w34iTSvim5jqBunAJONMddyGOpKMyhd6lAD6mzqGyK9PV1qekMY3ajvpl9rvK8bE5cX3g5l07+QDEuT1ZWIQ2w==
+
 "@urql/[email protected]":
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/@urql/core/-/core-2.3.6.tgz#ee0a6f8fde02251e9560c5f17dce5cd90f948552"