From c8783e8131caa3449e921e20cb84ac0e9f0601b2 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Mon, 16 Jan 2023 13:11:08 +0100
Subject: [PATCH] add image component

---
 .../components/src/image/image.stories.tsx    | 33 ++++++++++++
 packages/components/src/image/image.tsx       | 50 +++++++++++++++++++
 packages/components/src/image/index.tsx       |  1 +
 3 files changed, 84 insertions(+)
 create mode 100644 packages/components/src/image/image.stories.tsx
 create mode 100644 packages/components/src/image/image.tsx
 create mode 100644 packages/components/src/image/index.tsx

diff --git a/packages/components/src/image/image.stories.tsx b/packages/components/src/image/image.stories.tsx
new file mode 100644
index 00000000..5c6d6610
--- /dev/null
+++ b/packages/components/src/image/image.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { Stack } from '@tamagui/core'
+
+import { Image } from './image'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Image> = {
+  component: Image,
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof Image>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1673253082952-4ba1b404e5ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80',
+    width: 500,
+    height: 500,
+  },
+  render: args => (
+    <Stack space spaceDirection="vertical">
+      <Image {...args} width={500} height={500} />
+      <Image {...args} width={500} height={350} />
+      <Image {...args} width={500} height={200} />
+    </Stack>
+  ),
+}
+
+export default meta
diff --git a/packages/components/src/image/image.tsx b/packages/components/src/image/image.tsx
new file mode 100644
index 00000000..4e33c3f5
--- /dev/null
+++ b/packages/components/src/image/image.tsx
@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react'
+
+import { isWeb, setupReactNative, styled } from '@tamagui/core'
+import { Image as RNImage } from 'react-native'
+
+import type { GetProps } from '@tamagui/core'
+import type { Ref } from 'react'
+
+// TODO: this was used in @tamagui/image package. Why?
+// import { focusableInputHOC } from '@tamagui/focusable'
+
+setupReactNative({
+  Image: RNImage,
+})
+
+const Base = styled(RNImage, {
+  name: 'Image',
+  position: 'relative',
+  source: { uri: '' },
+  zIndex: 1,
+})
+
+type InputProps = GetProps<typeof Image>
+
+interface Props {
+  src: string
+  width: number
+  height: number
+  // onLoad?: InputProps['onLoad']
+  // onError?: InputProps['onError']
+}
+
+const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
+  const { src } = props
+
+  const source =
+    typeof src === 'string'
+      ? {
+          uri: src,
+          ...(isWeb && { width: props.width, height: props.height }),
+        }
+      : src
+
+  return <Base source={source} ref={ref} />
+}
+
+// focusableInputHOC(Image)
+const _Image = Base.extractable(forwardRef(Image))
+
+export { _Image as Image }
diff --git a/packages/components/src/image/index.tsx b/packages/components/src/image/index.tsx
new file mode 100644
index 00000000..556dbfdf
--- /dev/null
+++ b/packages/components/src/image/index.tsx
@@ -0,0 +1 @@
+export * from './image'