From f2c6238ea223d16e5cdaff055f166c5cc5d63abe Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Thu, 5 Sep 2024 15:39:01 +0530
Subject: [PATCH 1/6] feat: added example for unitools image

---
 example/storybook-nativewind/babel.config.js  |   1 +
 example/storybook-nativewind/package.json     |   5 +
 .../src/components/Image/Image.stories.tsx    |   4 +-
 .../src/components/Image/ImageSizes.tsx       |  77 +++++---
 .../src/components/Image/index.nw.stories.mdx |  55 ++++--
 example/storybook-nativewind/tsconfig.json    |   1 +
 yarn.lock                                     | 173 +++++++++++++++++-
 7 files changed, 274 insertions(+), 42 deletions(-)

diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
index 13dd0bbdfb..c8e6e63d19 100644
--- a/example/storybook-nativewind/babel.config.js
+++ b/example/storybook-nativewind/babel.config.js
@@ -12,6 +12,7 @@ module.exports = function (api) {
         'module-resolver',
         {
           alias: {
+            '@unitools/image': '@unitools/image-expo',
             '@/components/ui':
               process.env.STYLE_ENGINE === 'nativewind'
                 ? path.resolve(__dirname, './src/core-components/nativewind')
diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
index d13cbc71ea..b526a0fd2a 100644
--- a/example/storybook-nativewind/package.json
+++ b/example/storybook-nativewind/package.json
@@ -52,7 +52,11 @@
     "@react-native-community/slider": "4.2.4",
     "@react-stately/collections": "^3.6.0",
     "@react-stately/tree": "^3.5.0",
+    "@unitools/image": "^0.0.5",
+    "@unitools/image-expo": "^0.0.5",
+    "@unitools/image-next": "^0.0.6",
     "expo": "^47.0.0",
+    "expo-image": "^1.12.15",
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
@@ -104,6 +108,7 @@
     "@types/react-native": "~0.72.3",
     "autoprefixer": "^10.4.17",
     "babel-loader": "^8.2.3",
+    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "babel-plugin-react-native-web": "^0.18.10",
     "find-yarn-workspace-root": "^2.0.0",
diff --git a/example/storybook-nativewind/src/components/Image/Image.stories.tsx b/example/storybook-nativewind/src/components/Image/Image.stories.tsx
index 1c09fec6e7..3005997214 100644
--- a/example/storybook-nativewind/src/components/Image/Image.stories.tsx
+++ b/example/storybook-nativewind/src/components/Image/Image.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentMeta } from '@storybook/react-native';
 import Image from './Image';
-// import ImageSizesStory from './ImageSizes';
+import ImageSizesStory from './ImageSizes';
 
 const ImageMeta: ComponentMeta<typeof Image> = {
   title: 'stories/Image',
@@ -20,4 +20,4 @@ export default ImageMeta;
 
 export { Image };
 
-// export { ImageSizesStory };
+export { ImageSizesStory };
diff --git a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
index 9baaaff5cd..180fc5e0b9 100644
--- a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
+++ b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
@@ -1,32 +1,61 @@
-import { Image } from '@/components/ui/image';
+// import { Image } from '@/components/ui/image';
 import { VStack } from '@gluestack-ui/themed';
 import React from 'react';
+import { View } from 'react-native';
+
+// const ImageSizes = ({
+//   uri = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
+//   fallbackSource = 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80',
+//   ...props
+// }: any) => {
+//   return (
+//     <VStack space="md" alignItems="center">
+//       {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size, index) => (
+//         <Image
+//           source={{
+//             uri: uri,
+//           }}
+//           size={size}
+//           borderRadius={'$full'}
+//           fallbackSource={{
+//             uri: fallbackSource,
+//           }}
+//           key={index}
+//           {...props}
+//         />
+//       ))}
+//     </VStack>
+//   );
+// };
+
+import { Image } from '@/components/ui/image';
+// import Image from '@unitools/image';
+// import { Image } from 'expo-image';
+// import Image from 'next/Image';
+// import { Image } from 'react-native';
 
-const ImageSizes = ({
-  uri = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
-  fallbackSource = 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80',
-  ...props
-}: any) => {
+export default function Home() {
   return (
-    <VStack space="md" alignItems="center">
-      {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size, index) => (
-        <Image
-          source={{
-            uri: uri,
-          }}
-          size={size}
-          borderRadius={'$full'}
-          fallbackSource={{
-            uri: fallbackSource,
-          }}
-          key={index}
-          {...props}
-        />
-      ))}
-    </VStack>
+    <View>
+      <Image
+        source={{
+          uri: 'https://images.pexels.com/photos/3844788/pexels-photo-3844788.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+        }}
+        // source={require('../../../assets/icon.png')}
+        // source={require('../../../public/images/architecture.png')}
+        alt=""
+        // src={
+        //   'https://images.pexels.com/photos/3844788/pexels-photo-3844788.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+        // }
+        // eslint-disable-next-line react-native/no-inline-styles
+        // style={{ height: 100, width: 100 }}
+        // height={100}
+        // width={100}
+      />
+    </View>
   );
-};
+}
 
-export default ImageSizes;
+// export default ImageSizes;
 
 export { Image, VStack };
diff --git a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
index d012fef85e..8fc7843972 100644
--- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
@@ -28,6 +28,7 @@ import {
   Tabs
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
+import { Image as UnitoolsImage } from '@unitools/image';
 
 This is an illustration of **Image** component.
 
@@ -136,17 +137,47 @@ 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 nextjs and expo projects. For installation steps, refer to the [Installation](https://unitools.geekyants.com/packages/image/) section of ```@unitools/image```.
+
+```jsx
+import { Image } from '@unitools/image';
+```
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={false}
+    showArgsController={false}
+    metaData={{
+      code: `
+      import { Image as UnitoolsImage } from '@unitools/image';
+        function Home() {
+          return (
+            <View>
+              <UnitoolsImage
+                source={require("@/assets/icon.png")}
+                alt="Logo"
+                width={200}
+                height={200}
+              />
+            </View>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'Home', 'require');
+      },
+      scope: {
+        Wrapper,
+        UnitoolsImage,
+      },
+      argsType: {
+      },
+    }}
+  />
+</Wrapper>
\ No newline at end of file
diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json
index d48df99920..c244835874 100644
--- a/example/storybook-nativewind/tsconfig.json
+++ b/example/storybook-nativewind/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@/assets/*": ["./assets/*"],
       "@/components/ui/*": ["src/core-components/nativewind/*"],
       "@/components/hooks/*": ["src/core-components/hooks/*"],
       "@gluestack-style/react": ["../../packages/styled/react/src"],
diff --git a/yarn.lock b/yarn.lock
index 6a4d91532c..785be8ff2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2259,11 +2259,58 @@
     xcode "^3.0.1"
     xml2js "0.4.23"
 
+"@expo/config-plugins@7.2.2":
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-7.2.2.tgz#4d2b345114cf08796ae3a5a36dd2e6775384c226"
+  integrity sha512-LCgnB3YGDX0RuLXtUgjXFGfePRdBVo0hm5OeJb5Cr5rewv2xQmQE1kaVQ/HqbTNBPeSEbbdw1VmOX4WU4njFMg==
+  dependencies:
+    "@expo/config-types" "^49.0.0-alpha.1"
+    "@expo/json-file" "~8.2.37"
+    "@expo/plist" "^0.0.20"
+    "@expo/sdk-runtime-versions" "^1.0.0"
+    "@react-native/normalize-color" "^2.0.0"
+    chalk "^4.1.2"
+    debug "^4.3.1"
+    find-up "~5.0.0"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    resolve-from "^5.0.0"
+    semver "^7.5.3"
+    slash "^3.0.0"
+    xcode "^3.0.1"
+    xml2js "0.6.0"
+
+"@expo/config-plugins@~7.2.0":
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-7.2.5.tgz#b15f22878975fdc4ddcfa8cdc971937ddc4c0249"
+  integrity sha512-w+5ccu1IxBHgyQk9CPFKLZOk8yZQEyTjbJwOzESK1eR7QwosbcsLkN1c1WWUZYiCXwORu3UTwJYll4+X2xxJhQ==
+  dependencies:
+    "@expo/config-types" "^49.0.0-alpha.1"
+    "@expo/json-file" "~8.2.37"
+    "@expo/plist" "^0.0.20"
+    "@expo/sdk-runtime-versions" "^1.0.0"
+    "@react-native/normalize-color" "^2.0.0"
+    chalk "^4.1.2"
+    debug "^4.3.1"
+    find-up "~5.0.0"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    resolve-from "^5.0.0"
+    semver "^7.5.3"
+    slash "^3.0.0"
+    xcode "^3.0.1"
+    xml2js "0.6.0"
+
 "@expo/config-types@^47.0.0":
   version "47.0.0"
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-47.0.0.tgz#99eeabe0bba7a776e0f252b78beb0c574692c38d"
   integrity sha512-r0pWfuhkv7KIcXMUiNACJmJKKwlTBGMw9VZHNdppS8/0Nve8HZMTkNRFQzTHW1uH3pBj8jEXpyw/2vSWDHex9g==
 
+"@expo/config-types@^49.0.0-alpha.1":
+  version "49.0.0"
+  resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-49.0.0.tgz#15ffef715285c06703f6fb7ec0cda853f645cc09"
+  integrity sha512-8eyREVi+K2acnMBe/rTIu1dOfyR2+AMnTLHlut+YpMV9OZPdeKV0Bs9BxAewGqBA2slslbQ9N39IS2CuTKpXkA==
+
 "@expo/config@7.0.3", "@expo/config@~7.0.2":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@expo/config/-/config-7.0.3.tgz#c9c634e76186de25e296485e51418f1e52966e6e"
@@ -2281,6 +2328,23 @@
     slugify "^1.3.4"
     sucrase "^3.20.0"
 
+"@expo/config@~8.1.0":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@expo/config/-/config-8.1.2.tgz#7fff28b3acefe39702e9f3ce1c9fd896a52caa80"
+  integrity sha512-4e7hzPj50mQIlsrzOH6XZ36O094mPfPTIDIH4yv49bWNMc7GFLTofB/lcT+QyxiLaJuC0Wlk9yOLB8DIqmtwug==
+  dependencies:
+    "@babel/code-frame" "~7.10.4"
+    "@expo/config-plugins" "~7.2.0"
+    "@expo/config-types" "^49.0.0-alpha.1"
+    "@expo/json-file" "^8.2.37"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    require-from-string "^2.0.2"
+    resolve-from "^5.0.0"
+    semver "7.5.3"
+    slugify "^1.3.4"
+    sucrase "^3.20.0"
+
 "@expo/dev-server@0.1.124":
   version "0.1.124"
   resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.1.124.tgz#81fca9eff42893a7cb9d51315f2c0dcf860c5eec"
@@ -2389,6 +2453,15 @@
     json5 "^2.2.2"
     write-file-atomic "^2.3.0"
 
+"@expo/json-file@~8.2.37":
+  version "8.2.37"
+  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.37.tgz#9c02d3b42134907c69cc0a027b18671b69344049"
+  integrity sha512-YaH6rVg11JoTS2P6LsW7ybS2CULjf40AbnAHw2F1eDPuheprNjARZMnyHFPkKv7GuxCy+B9GPcbOKgc4cgA80Q==
+  dependencies:
+    "@babel/code-frame" "~7.10.4"
+    json5 "^2.2.2"
+    write-file-atomic "^2.3.0"
+
 "@expo/metro-config@~0.5.0", "@expo/metro-config@~0.5.1":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@expo/metro-config/-/metro-config-0.5.2.tgz#9474454dcf8c2e3d66231f36f8bbbae5e9e0c3dc"
@@ -2444,6 +2517,15 @@
     base64-js "^1.2.3"
     xmlbuilder "^14.0.0"
 
+"@expo/plist@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@expo/plist/-/plist-0.0.20.tgz#a6b3124438031c02b762bad5a47b70584d3c0072"
+  integrity sha512-UXQ4LXCfTZ580LDHGJ5q62jSTwJFFJ1GqBu8duQMThiHKWbMJ+gajJh6rsB6EJ3aLUr9wcauxneL5LVRFxwBEA==
+  dependencies:
+    "@xmldom/xmldom" "~0.7.7"
+    base64-js "^1.2.3"
+    xmlbuilder "^14.0.0"
+
 "@expo/prebuild-config@5.0.7":
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/@expo/prebuild-config/-/prebuild-config-5.0.7.tgz#4658b66126c4d32c7b6302571e458a71811b07aa"
@@ -6806,6 +6888,21 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@unitools/image-expo@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@unitools/image-expo/-/image-expo-0.0.5.tgz#3bde7ac271471d23c9f53f7fa0b2161e818b8a02"
+  integrity sha512-IWR3Gxqfqdzw80+LOr0k0HQfv3ajYSYaEPXGeZWMvjdK1uRptUQqKiFSPtL/jTzEOYtmOvO7BDPJ1NhWAm4Pog==
+
+"@unitools/image-next@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@unitools/image-next/-/image-next-0.0.6.tgz#2ea66dd546574c291e0d72a268c6b75a51e64617"
+  integrity sha512-AX3COKgelSq6Ae72nbBFpbADa61RH2390eN0y82/ZKo1ssPpOL06mPZKJFj+rt6chJHzLACwGVIjiCQbDacXjA==
+
+"@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/core@2.3.6":
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/@urql/core/-/core-2.3.6.tgz#ee0a6f8fde02251e9560c5f17dce5cd90f948552"
@@ -7116,7 +7213,7 @@
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
   integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
 
-"@xmldom/xmldom@~0.7.0":
+"@xmldom/xmldom@~0.7.0", "@xmldom/xmldom@~0.7.7":
   version "0.7.13"
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.7.13.tgz#ff34942667a4e19a9f4a0996a76814daac364cf3"
   integrity sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==
@@ -7947,6 +8044,17 @@ babel-plugin-module-resolver@^4.1.0:
     reselect "^4.0.0"
     resolve "^1.13.1"
 
+babel-plugin-module-resolver@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.2.tgz#cdeac5d4aaa3b08dd1ac23ddbf516660ed2d293e"
+  integrity sha512-9KtaCazHee2xc0ibfqsDeamwDps6FZNo5S0Q81dUqEuFzVwPhcT4J5jOqIVvgCA3Q/wO9hKYxN/Ds3tIsp5ygg==
+  dependencies:
+    find-babel-config "^2.1.1"
+    glob "^9.3.3"
+    pkg-up "^3.1.0"
+    reselect "^4.1.7"
+    resolve "^1.22.8"
+
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.11"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz#30320dfe3ffe1a336c15afdcdafd6fd615b25e33"
@@ -11358,6 +11466,14 @@ expo-constants@~14.0.0, expo-constants@~14.0.2:
     "@expo/config" "~7.0.2"
     uuid "^3.3.2"
 
+expo-constants@~14.4.2:
+  version "14.4.2"
+  resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.4.2.tgz#cac5e8b524069545739b8d8595ce96cc5be6578c"
+  integrity sha512-nOB122DOAjk+KrJT69lFQAoYVQGQjFHSigCPVBzVdko9S1xGsfiOH9+X5dygTsZTIlVLpQJDdmZ7ONiv3i+26w==
+  dependencies:
+    "@expo/config" "~8.1.0"
+    uuid "^3.3.2"
+
 expo-error-recovery@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/expo-error-recovery/-/expo-error-recovery-4.0.1.tgz#3e3333e134c992c234539d3773fe78915c883755"
@@ -11377,6 +11493,11 @@ expo-font@~11.0.1:
   dependencies:
     fontfaceobserver "^2.1.0"
 
+expo-image@^1.12.15:
+  version "1.12.15"
+  resolved "https://registry.yarnpkg.com/expo-image/-/expo-image-1.12.15.tgz#86c3d84500d769a5afadca78b2382a0552d29180"
+  integrity sha512-rjvnNSaFnrmlugDESTaYJhgdqRLn+M5vu0lD5NGNd2LkxGG5HrRV3gSzeyQQ68XRhrDN8eJvkcKujPKJUTMraw==
+
 expo-keep-awake@~11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz#ee354465892a94040ffe09901b85b469e7d54fb3"
@@ -11803,6 +11924,13 @@ find-babel-config@^1.2.0:
     json5 "^1.0.2"
     path-exists "^3.0.0"
 
+find-babel-config@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-2.1.2.tgz#2841b1bfbbbcdb971e1e39df8cbc43dafa901716"
+  integrity sha512-ZfZp1rQyp4gyuxqt1ZqjFGVeVBvmpURMqdIWXbPRfB97Bf6BzdK/xSIbylEINzQ0kB5tlDQfn9HkNXXWsqTqLg==
+  dependencies:
+    json5 "^2.2.3"
+
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -12431,6 +12559,16 @@ glob@^8.0.3:
     minimatch "^5.0.1"
     once "^1.3.0"
 
+glob@^9.3.3:
+  version "9.3.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-9.3.5.tgz#ca2ed8ca452781a3009685607fdf025a899dfe21"
+  integrity sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    minimatch "^8.0.2"
+    minipass "^4.2.4"
+    path-scurry "^1.6.1"
+
 global-dirs@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -16172,6 +16310,13 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^8.0.2:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-8.0.4.tgz#847c1b25c014d4e9a7f68aaf63dedd668a626229"
+  integrity sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@^9.0.1:
   version "9.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
@@ -16228,6 +16373,11 @@ minipass@^3.0.0, minipass@^3.1.1:
   dependencies:
     yallist "^4.0.0"
 
+minipass@^4.2.4:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.8.tgz#f0010f64393ecfc1d1ccb5f582bcaf45f48e1a3a"
+  integrity sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==
+
 minipass@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
@@ -17400,7 +17550,7 @@ path-parse@^1.0.5, path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-scurry@^1.11.0:
+path-scurry@^1.11.0, path-scurry@^1.6.1:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
   integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
@@ -19232,7 +19382,7 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-reselect@^4.0.0:
+reselect@^4.0.0, reselect@^4.1.7:
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
   integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
@@ -19288,7 +19438,7 @@ resolve.exports@^2.0.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
   integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.2, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.2, resolve@^1.22.8, resolve@^1.3.2:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -19637,6 +19787,13 @@ semver@7.5.1:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@7.5.3:
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
+  integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
 semver@7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
@@ -22623,6 +22780,14 @@ xml2js@0.4.23:
     sax ">=0.6.0"
     xmlbuilder "~11.0.0"
 
+xml2js@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.6.0.tgz#07afc447a97d2bd6507a1f76eeadddb09f7a8282"
+  integrity sha512-eLTh0kA8uHceqesPqSE+VvO1CDDJWMwlQfB6LuN6T8w6MaDJ8Txm8P7s5cHD0miF0V+GGTZrDQfxPZQVsur33w==
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~11.0.0"
+
 xml@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"

From 73d8de0f45c92498d00f9bbd3a9fa8fe753a9484 Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Fri, 6 Sep 2024 17:13:45 +0530
Subject: [PATCH 2/6] feat: added unitools image example

---
 .../src/components/Image/Image.stories.tsx    |  5 +-
 .../src/components/Image/ImageSizes.tsx       | 79 ++++++-------------
 .../src/components/Image/index.nw.stories.mdx | 11 ++-
 .../nativewind/UnitoolsImage.tsx              | 17 ++++
 4 files changed, 50 insertions(+), 62 deletions(-)
 create mode 100644 example/storybook-nativewind/src/extra-components/nativewind/UnitoolsImage.tsx

diff --git a/example/storybook-nativewind/src/components/Image/Image.stories.tsx b/example/storybook-nativewind/src/components/Image/Image.stories.tsx
index 3005997214..51acf792de 100644
--- a/example/storybook-nativewind/src/components/Image/Image.stories.tsx
+++ b/example/storybook-nativewind/src/components/Image/Image.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentMeta } from '@storybook/react-native';
 import Image from './Image';
-import ImageSizesStory from './ImageSizes';
+// import ImageSizesStory from './ImageSizes';
 
 const ImageMeta: ComponentMeta<typeof Image> = {
   title: 'stories/Image',
@@ -19,5 +19,4 @@ const ImageMeta: ComponentMeta<typeof Image> = {
 export default ImageMeta;
 
 export { Image };
-
-export { ImageSizesStory };
+// export { ImageSizesStory };
diff --git a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
index 180fc5e0b9..fa7628d71d 100644
--- a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
+++ b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
@@ -1,61 +1,30 @@
-// import { Image } from '@/components/ui/image';
+import { Image } from '@/components/ui/image';
 import { VStack } from '@gluestack-ui/themed';
 import React from 'react';
-import { View } from 'react-native';
-
-// const ImageSizes = ({
-//   uri = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
-//   fallbackSource = 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80',
-//   ...props
-// }: any) => {
-//   return (
-//     <VStack space="md" alignItems="center">
-//       {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size, index) => (
-//         <Image
-//           source={{
-//             uri: uri,
-//           }}
-//           size={size}
-//           borderRadius={'$full'}
-//           fallbackSource={{
-//             uri: fallbackSource,
-//           }}
-//           key={index}
-//           {...props}
-//         />
-//       ))}
-//     </VStack>
-//   );
-// };
 
-import { Image } from '@/components/ui/image';
-// import Image from '@unitools/image';
-// import { Image } from 'expo-image';
-// import Image from 'next/Image';
-// import { Image } from 'react-native';
-
-export default function Home() {
+const ImageSizes = ({
+  uri = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
+  fallbackSource = 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80',
+  ...props
+}: any) => {
   return (
-    <View>
-      <Image
-        source={{
-          uri: 'https://images.pexels.com/photos/3844788/pexels-photo-3844788.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-        }}
-        // source={require('../../../assets/icon.png')}
-        // source={require('../../../public/images/architecture.png')}
-        alt=""
-        // src={
-        //   'https://images.pexels.com/photos/3844788/pexels-photo-3844788.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
-        // }
-        // eslint-disable-next-line react-native/no-inline-styles
-        // style={{ height: 100, width: 100 }}
-        // height={100}
-        // width={100}
-      />
-    </View>
+    <VStack space="md" alignItems="center">
+      {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size, index) => (
+        <Image
+          source={{
+            uri: uri,
+          }}
+          size={size}
+          borderRadius={'$full'}
+          fallbackSource={{
+            uri: fallbackSource,
+          }}
+          key={index}
+          {...props}
+        />
+      ))}
+    </VStack>
   );
-}
-
-// export default ImageSizes;
+};
 
-export { Image, VStack };
+export default ImageSizes;
diff --git a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
index 8fc7843972..c62c1cc913 100644
--- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
+++ b/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,
@@ -149,6 +150,8 @@ The below example will run for both nextjs and expo projects. For installation s
 import { Image } from '@unitools/image';
 ```
 
+<UnitoolsImageEg/>
+
 <Wrapper>
   <CodePreview
     showComponentRenderer={false}
@@ -160,17 +163,17 @@ import { Image } from '@unitools/image';
           return (
             <View>
               <UnitoolsImage
-                source={require("@/assets/icon.png")}
+                source={require("@/assets/mountains.png")}
                 alt="Logo"
-                width={200}
-                height={200}
+                width={208}
+                height={320}
               />
             </View>
           );
         }
       `,
       transformCode: (code) => {
-        return transformedCode(code, 'function', 'Home', 'require');
+        return transformedCode(code, 'function', 'Home');
       },
       scope: {
         Wrapper,
diff --git a/example/storybook-nativewind/src/extra-components/nativewind/UnitoolsImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/UnitoolsImage.tsx
new file mode 100644
index 0000000000..ae3acff491
--- /dev/null
+++ b/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;

From 3738db3795b76ce101c7cc9ae00c8306c7871c1b Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Fri, 6 Sep 2024 17:43:24 +0530
Subject: [PATCH 3/6] feat: removed unnecessary code

---
 example/storybook-nativewind/babel.config.js  |   1 -
 example/storybook-nativewind/package.json     |   5 -
 .../src/components/Image/ImageSizes.tsx       |   2 +
 yarn.lock                                     | 173 +-----------------
 4 files changed, 6 insertions(+), 175 deletions(-)

diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
index c8e6e63d19..13dd0bbdfb 100644
--- a/example/storybook-nativewind/babel.config.js
+++ b/example/storybook-nativewind/babel.config.js
@@ -12,7 +12,6 @@ module.exports = function (api) {
         'module-resolver',
         {
           alias: {
-            '@unitools/image': '@unitools/image-expo',
             '@/components/ui':
               process.env.STYLE_ENGINE === 'nativewind'
                 ? path.resolve(__dirname, './src/core-components/nativewind')
diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
index b526a0fd2a..d13cbc71ea 100644
--- a/example/storybook-nativewind/package.json
+++ b/example/storybook-nativewind/package.json
@@ -52,11 +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",
-    "@unitools/image-expo": "^0.0.5",
-    "@unitools/image-next": "^0.0.6",
     "expo": "^47.0.0",
-    "expo-image": "^1.12.15",
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
@@ -108,7 +104,6 @@
     "@types/react-native": "~0.72.3",
     "autoprefixer": "^10.4.17",
     "babel-loader": "^8.2.3",
-    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "babel-plugin-react-native-web": "^0.18.10",
     "find-yarn-workspace-root": "^2.0.0",
diff --git a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
index fa7628d71d..fb2de828c8 100644
--- a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
+++ b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
@@ -28,3 +28,5 @@ const ImageSizes = ({
 };
 
 export default ImageSizes;
+
+export { Image, VStack };
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 785be8ff2d..6a4d91532c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2259,58 +2259,11 @@
     xcode "^3.0.1"
     xml2js "0.4.23"
 
-"@expo/config-plugins@7.2.2":
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-7.2.2.tgz#4d2b345114cf08796ae3a5a36dd2e6775384c226"
-  integrity sha512-LCgnB3YGDX0RuLXtUgjXFGfePRdBVo0hm5OeJb5Cr5rewv2xQmQE1kaVQ/HqbTNBPeSEbbdw1VmOX4WU4njFMg==
-  dependencies:
-    "@expo/config-types" "^49.0.0-alpha.1"
-    "@expo/json-file" "~8.2.37"
-    "@expo/plist" "^0.0.20"
-    "@expo/sdk-runtime-versions" "^1.0.0"
-    "@react-native/normalize-color" "^2.0.0"
-    chalk "^4.1.2"
-    debug "^4.3.1"
-    find-up "~5.0.0"
-    getenv "^1.0.0"
-    glob "7.1.6"
-    resolve-from "^5.0.0"
-    semver "^7.5.3"
-    slash "^3.0.0"
-    xcode "^3.0.1"
-    xml2js "0.6.0"
-
-"@expo/config-plugins@~7.2.0":
-  version "7.2.5"
-  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-7.2.5.tgz#b15f22878975fdc4ddcfa8cdc971937ddc4c0249"
-  integrity sha512-w+5ccu1IxBHgyQk9CPFKLZOk8yZQEyTjbJwOzESK1eR7QwosbcsLkN1c1WWUZYiCXwORu3UTwJYll4+X2xxJhQ==
-  dependencies:
-    "@expo/config-types" "^49.0.0-alpha.1"
-    "@expo/json-file" "~8.2.37"
-    "@expo/plist" "^0.0.20"
-    "@expo/sdk-runtime-versions" "^1.0.0"
-    "@react-native/normalize-color" "^2.0.0"
-    chalk "^4.1.2"
-    debug "^4.3.1"
-    find-up "~5.0.0"
-    getenv "^1.0.0"
-    glob "7.1.6"
-    resolve-from "^5.0.0"
-    semver "^7.5.3"
-    slash "^3.0.0"
-    xcode "^3.0.1"
-    xml2js "0.6.0"
-
 "@expo/config-types@^47.0.0":
   version "47.0.0"
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-47.0.0.tgz#99eeabe0bba7a776e0f252b78beb0c574692c38d"
   integrity sha512-r0pWfuhkv7KIcXMUiNACJmJKKwlTBGMw9VZHNdppS8/0Nve8HZMTkNRFQzTHW1uH3pBj8jEXpyw/2vSWDHex9g==
 
-"@expo/config-types@^49.0.0-alpha.1":
-  version "49.0.0"
-  resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-49.0.0.tgz#15ffef715285c06703f6fb7ec0cda853f645cc09"
-  integrity sha512-8eyREVi+K2acnMBe/rTIu1dOfyR2+AMnTLHlut+YpMV9OZPdeKV0Bs9BxAewGqBA2slslbQ9N39IS2CuTKpXkA==
-
 "@expo/config@7.0.3", "@expo/config@~7.0.2":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@expo/config/-/config-7.0.3.tgz#c9c634e76186de25e296485e51418f1e52966e6e"
@@ -2328,23 +2281,6 @@
     slugify "^1.3.4"
     sucrase "^3.20.0"
 
-"@expo/config@~8.1.0":
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/@expo/config/-/config-8.1.2.tgz#7fff28b3acefe39702e9f3ce1c9fd896a52caa80"
-  integrity sha512-4e7hzPj50mQIlsrzOH6XZ36O094mPfPTIDIH4yv49bWNMc7GFLTofB/lcT+QyxiLaJuC0Wlk9yOLB8DIqmtwug==
-  dependencies:
-    "@babel/code-frame" "~7.10.4"
-    "@expo/config-plugins" "~7.2.0"
-    "@expo/config-types" "^49.0.0-alpha.1"
-    "@expo/json-file" "^8.2.37"
-    getenv "^1.0.0"
-    glob "7.1.6"
-    require-from-string "^2.0.2"
-    resolve-from "^5.0.0"
-    semver "7.5.3"
-    slugify "^1.3.4"
-    sucrase "^3.20.0"
-
 "@expo/dev-server@0.1.124":
   version "0.1.124"
   resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.1.124.tgz#81fca9eff42893a7cb9d51315f2c0dcf860c5eec"
@@ -2453,15 +2389,6 @@
     json5 "^2.2.2"
     write-file-atomic "^2.3.0"
 
-"@expo/json-file@~8.2.37":
-  version "8.2.37"
-  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.37.tgz#9c02d3b42134907c69cc0a027b18671b69344049"
-  integrity sha512-YaH6rVg11JoTS2P6LsW7ybS2CULjf40AbnAHw2F1eDPuheprNjARZMnyHFPkKv7GuxCy+B9GPcbOKgc4cgA80Q==
-  dependencies:
-    "@babel/code-frame" "~7.10.4"
-    json5 "^2.2.2"
-    write-file-atomic "^2.3.0"
-
 "@expo/metro-config@~0.5.0", "@expo/metro-config@~0.5.1":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@expo/metro-config/-/metro-config-0.5.2.tgz#9474454dcf8c2e3d66231f36f8bbbae5e9e0c3dc"
@@ -2517,15 +2444,6 @@
     base64-js "^1.2.3"
     xmlbuilder "^14.0.0"
 
-"@expo/plist@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@expo/plist/-/plist-0.0.20.tgz#a6b3124438031c02b762bad5a47b70584d3c0072"
-  integrity sha512-UXQ4LXCfTZ580LDHGJ5q62jSTwJFFJ1GqBu8duQMThiHKWbMJ+gajJh6rsB6EJ3aLUr9wcauxneL5LVRFxwBEA==
-  dependencies:
-    "@xmldom/xmldom" "~0.7.7"
-    base64-js "^1.2.3"
-    xmlbuilder "^14.0.0"
-
 "@expo/prebuild-config@5.0.7":
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/@expo/prebuild-config/-/prebuild-config-5.0.7.tgz#4658b66126c4d32c7b6302571e458a71811b07aa"
@@ -6888,21 +6806,6 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@unitools/image-expo@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@unitools/image-expo/-/image-expo-0.0.5.tgz#3bde7ac271471d23c9f53f7fa0b2161e818b8a02"
-  integrity sha512-IWR3Gxqfqdzw80+LOr0k0HQfv3ajYSYaEPXGeZWMvjdK1uRptUQqKiFSPtL/jTzEOYtmOvO7BDPJ1NhWAm4Pog==
-
-"@unitools/image-next@^0.0.6":
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/@unitools/image-next/-/image-next-0.0.6.tgz#2ea66dd546574c291e0d72a268c6b75a51e64617"
-  integrity sha512-AX3COKgelSq6Ae72nbBFpbADa61RH2390eN0y82/ZKo1ssPpOL06mPZKJFj+rt6chJHzLACwGVIjiCQbDacXjA==
-
-"@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/core@2.3.6":
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/@urql/core/-/core-2.3.6.tgz#ee0a6f8fde02251e9560c5f17dce5cd90f948552"
@@ -7213,7 +7116,7 @@
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
   integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
 
-"@xmldom/xmldom@~0.7.0", "@xmldom/xmldom@~0.7.7":
+"@xmldom/xmldom@~0.7.0":
   version "0.7.13"
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.7.13.tgz#ff34942667a4e19a9f4a0996a76814daac364cf3"
   integrity sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==
@@ -8044,17 +7947,6 @@ babel-plugin-module-resolver@^4.1.0:
     reselect "^4.0.0"
     resolve "^1.13.1"
 
-babel-plugin-module-resolver@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.2.tgz#cdeac5d4aaa3b08dd1ac23ddbf516660ed2d293e"
-  integrity sha512-9KtaCazHee2xc0ibfqsDeamwDps6FZNo5S0Q81dUqEuFzVwPhcT4J5jOqIVvgCA3Q/wO9hKYxN/Ds3tIsp5ygg==
-  dependencies:
-    find-babel-config "^2.1.1"
-    glob "^9.3.3"
-    pkg-up "^3.1.0"
-    reselect "^4.1.7"
-    resolve "^1.22.8"
-
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.11"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz#30320dfe3ffe1a336c15afdcdafd6fd615b25e33"
@@ -11466,14 +11358,6 @@ expo-constants@~14.0.0, expo-constants@~14.0.2:
     "@expo/config" "~7.0.2"
     uuid "^3.3.2"
 
-expo-constants@~14.4.2:
-  version "14.4.2"
-  resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.4.2.tgz#cac5e8b524069545739b8d8595ce96cc5be6578c"
-  integrity sha512-nOB122DOAjk+KrJT69lFQAoYVQGQjFHSigCPVBzVdko9S1xGsfiOH9+X5dygTsZTIlVLpQJDdmZ7ONiv3i+26w==
-  dependencies:
-    "@expo/config" "~8.1.0"
-    uuid "^3.3.2"
-
 expo-error-recovery@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/expo-error-recovery/-/expo-error-recovery-4.0.1.tgz#3e3333e134c992c234539d3773fe78915c883755"
@@ -11493,11 +11377,6 @@ expo-font@~11.0.1:
   dependencies:
     fontfaceobserver "^2.1.0"
 
-expo-image@^1.12.15:
-  version "1.12.15"
-  resolved "https://registry.yarnpkg.com/expo-image/-/expo-image-1.12.15.tgz#86c3d84500d769a5afadca78b2382a0552d29180"
-  integrity sha512-rjvnNSaFnrmlugDESTaYJhgdqRLn+M5vu0lD5NGNd2LkxGG5HrRV3gSzeyQQ68XRhrDN8eJvkcKujPKJUTMraw==
-
 expo-keep-awake@~11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz#ee354465892a94040ffe09901b85b469e7d54fb3"
@@ -11924,13 +11803,6 @@ find-babel-config@^1.2.0:
     json5 "^1.0.2"
     path-exists "^3.0.0"
 
-find-babel-config@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-2.1.2.tgz#2841b1bfbbbcdb971e1e39df8cbc43dafa901716"
-  integrity sha512-ZfZp1rQyp4gyuxqt1ZqjFGVeVBvmpURMqdIWXbPRfB97Bf6BzdK/xSIbylEINzQ0kB5tlDQfn9HkNXXWsqTqLg==
-  dependencies:
-    json5 "^2.2.3"
-
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -12559,16 +12431,6 @@ glob@^8.0.3:
     minimatch "^5.0.1"
     once "^1.3.0"
 
-glob@^9.3.3:
-  version "9.3.5"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-9.3.5.tgz#ca2ed8ca452781a3009685607fdf025a899dfe21"
-  integrity sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==
-  dependencies:
-    fs.realpath "^1.0.0"
-    minimatch "^8.0.2"
-    minipass "^4.2.4"
-    path-scurry "^1.6.1"
-
 global-dirs@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -16310,13 +16172,6 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@^8.0.2:
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-8.0.4.tgz#847c1b25c014d4e9a7f68aaf63dedd668a626229"
-  integrity sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==
-  dependencies:
-    brace-expansion "^2.0.1"
-
 minimatch@^9.0.1:
   version "9.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
@@ -16373,11 +16228,6 @@ minipass@^3.0.0, minipass@^3.1.1:
   dependencies:
     yallist "^4.0.0"
 
-minipass@^4.2.4:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.8.tgz#f0010f64393ecfc1d1ccb5f582bcaf45f48e1a3a"
-  integrity sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==
-
 minipass@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
@@ -17550,7 +17400,7 @@ path-parse@^1.0.5, path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-scurry@^1.11.0, path-scurry@^1.6.1:
+path-scurry@^1.11.0:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
   integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
@@ -19382,7 +19232,7 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-reselect@^4.0.0, reselect@^4.1.7:
+reselect@^4.0.0:
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
   integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
@@ -19438,7 +19288,7 @@ resolve.exports@^2.0.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
   integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.2, resolve@^1.22.8, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.2, resolve@^1.3.2:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -19787,13 +19637,6 @@ semver@7.5.1:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@7.5.3:
-  version "7.5.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
-  integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
-  dependencies:
-    lru-cache "^6.0.0"
-
 semver@7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
@@ -22780,14 +22623,6 @@ xml2js@0.4.23:
     sax ">=0.6.0"
     xmlbuilder "~11.0.0"
 
-xml2js@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.6.0.tgz#07afc447a97d2bd6507a1f76eeadddb09f7a8282"
-  integrity sha512-eLTh0kA8uHceqesPqSE+VvO1CDDJWMwlQfB6LuN6T8w6MaDJ8Txm8P7s5cHD0miF0V+GGTZrDQfxPZQVsur33w==
-  dependencies:
-    sax ">=0.6.0"
-    xmlbuilder "~11.0.0"
-
 xml@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"

From 869136191f7827728efc93e673e0316afed30cbf Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Fri, 6 Sep 2024 17:43:56 +0530
Subject: [PATCH 4/6] feat: removed unnecessary code

---
 example/storybook-nativewind/package.json                    | 1 +
 .../storybook-nativewind/src/components/Image/ImageSizes.tsx | 2 +-
 yarn.lock                                                    | 5 +++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
index d13cbc71ea..71825c8b5f 100644
--- a/example/storybook-nativewind/package.json
+++ b/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",
diff --git a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
index fb2de828c8..9baaaff5cd 100644
--- a/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
+++ b/example/storybook-nativewind/src/components/Image/ImageSizes.tsx
@@ -29,4 +29,4 @@ const ImageSizes = ({
 
 export default ImageSizes;
 
-export { Image, VStack };
\ No newline at end of file
+export { Image, VStack };
diff --git a/yarn.lock b/yarn.lock
index 6a4d91532c..0a37ea6959 100644
--- a/yarn.lock
+++ b/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/core@2.3.6":
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/@urql/core/-/core-2.3.6.tgz#ee0a6f8fde02251e9560c5f17dce5cd90f948552"

From 8ff32778abe54af2e5658e33dfd2b1992ad48d5f Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Fri, 6 Sep 2024 17:47:58 +0530
Subject: [PATCH 5/6] feat: removed unnecessary code

---
 .../storybook-nativewind/src/components/Image/Image.stories.tsx  | 1 +
 example/storybook-nativewind/tsconfig.json                       | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/src/components/Image/Image.stories.tsx b/example/storybook-nativewind/src/components/Image/Image.stories.tsx
index 51acf792de..1c09fec6e7 100644
--- a/example/storybook-nativewind/src/components/Image/Image.stories.tsx
+++ b/example/storybook-nativewind/src/components/Image/Image.stories.tsx
@@ -19,4 +19,5 @@ const ImageMeta: ComponentMeta<typeof Image> = {
 export default ImageMeta;
 
 export { Image };
+
 // export { ImageSizesStory };
diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json
index c244835874..d48df99920 100644
--- a/example/storybook-nativewind/tsconfig.json
+++ b/example/storybook-nativewind/tsconfig.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/assets/*": ["./assets/*"],
       "@/components/ui/*": ["src/core-components/nativewind/*"],
       "@/components/hooks/*": ["src/core-components/hooks/*"],
       "@gluestack-style/react": ["../../packages/styled/react/src"],

From 2140bd7c75d87d823daf19a8298af1be71c5c876 Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Mon, 9 Sep 2024 15:58:53 +0530
Subject: [PATCH 6/6] feat: updated UI

---
 .../src/components/Image/index.nw.stories.mdx | 29 +++++++------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
index c62c1cc913..e07938aa66 100644
--- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
@@ -29,7 +29,7 @@ import {
   Tabs
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
-import { Image as UnitoolsImage } from '@unitools/image';
+import UnitoolsImage from '@unitools/image';
 
 This is an illustration of **Image** component.
 
@@ -144,10 +144,10 @@ The Examples section offers visual previews of the component, letting you quickl
 
 #### Basic Unitools Image 
 
-The below example will run for both nextjs and expo projects. For installation steps, refer to the [Installation](https://unitools.geekyants.com/packages/image/) section of ```@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';
+import Image from '@unitools/image';
 ```
 
 <UnitoolsImageEg/>
@@ -158,26 +158,19 @@ import { Image } from '@unitools/image';
     showArgsController={false}
     metaData={{
       code: `
-      import { Image as UnitoolsImage } from '@unitools/image';
-        function Home() {
-          return (
-            <View>
-              <UnitoolsImage
-                source={require("@/assets/mountains.png")}
-                alt="Logo"
-                width={208}
-                height={320}
-              />
-            </View>
-          );
-        }
+        <Image
+          source={require("@/assets/mountains.png")}
+          alt="Logo"
+          width={208}
+          height={320}
+        />            
       `,
       transformCode: (code) => {
-        return transformedCode(code, 'function', 'Home');
+        return transformedCode(code);
       },
       scope: {
         Wrapper,
-        UnitoolsImage,
+        UnitoolsImage:Image,
       },
       argsType: {
       },