From 0a9c1134b5fbb75699854ee57de658385cbf639e Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Mon, 16 Jan 2023 13:12:03 +0100
Subject: [PATCH] fix sidebar component

---
 packages/components/src/sidebar/index.tsx     |   1 +
 .../src/sidebar/sidebar.stories.tsx           |  30 +++++
 packages/components/src/sidebar/sidebar.tsx   | 117 ++++++++++++++++++
 3 files changed, 148 insertions(+)
 create mode 100644 packages/components/src/sidebar/index.tsx
 create mode 100644 packages/components/src/sidebar/sidebar.stories.tsx
 create mode 100644 packages/components/src/sidebar/sidebar.tsx

diff --git a/packages/components/src/sidebar/index.tsx b/packages/components/src/sidebar/index.tsx
new file mode 100644
index 00000000..32ab12e2
--- /dev/null
+++ b/packages/components/src/sidebar/index.tsx
@@ -0,0 +1 @@
+export { Sidebar } from './sidebar'
diff --git a/packages/components/src/sidebar/sidebar.stories.tsx b/packages/components/src/sidebar/sidebar.stories.tsx
new file mode 100644
index 00000000..30be4597
--- /dev/null
+++ b/packages/components/src/sidebar/sidebar.stories.tsx
@@ -0,0 +1,30 @@
+import { Sidebar } from './sidebar'
+
+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 Sidebar> = {
+  component: Sidebar,
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof Sidebar>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    name: 'Rarible',
+    description:
+      'Multichain community-centric NFT marketplace. Create, buy and sell your NFTs.',
+    membersCount: 476,
+  },
+}
+
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14692%3A148489&t=NfQkS7CPSrZknAGF-4',
+  },
+}
+
+export default meta
diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/sidebar/sidebar.tsx
new file mode 100644
index 00000000..83001059
--- /dev/null
+++ b/packages/components/src/sidebar/sidebar.tsx
@@ -0,0 +1,117 @@
+import { setupReactNative, Stack, styled, Text } from '@tamagui/core'
+// import { focusableInputHOC } from '@tamagui/focusable'
+import { TextInput } from 'react-native'
+
+import { Avatar } from '../avatar'
+import { Button } from '../button'
+import { Image } from '../image'
+
+import type { GetProps } from '@tamagui/core'
+
+// import { inputSizeVariant } from '../helpers/inputHelpers'
+
+setupReactNative({
+  TextInput,
+})
+
+export const InputFrame = styled(
+  TextInput,
+  {
+    tag: 'input',
+    name: 'Input',
+    // fontFamily: '$body',
+    borderWidth: 1,
+    outlineWidth: 0,
+    borderColor: 'rgba(0, 200, 0, 1)',
+
+    paddingHorizontal: 30,
+    color: 'hsla(218, 51%, 7%, 1)',
+    placeholderTextColor: 'hsla(219, 17%, 69%, 1)',
+    // color: 'red',
+    // color: '$color',
+    // focusable: true,
+    // borderColor: '$borderColor',
+    // backgroundColor: '$background',
+    // placeholderTextColor: '$placeholderColor',
+
+    backgroundColor: 'rgb(255, 255, 255)',
+
+    height: 40,
+    borderRadius: 12,
+
+    // this fixes a flex bug where it overflows container
+    minWidth: 0,
+
+    // hoverStyle: {
+    // borderColor: '$borderColorHover',
+    // },/
+
+    // focusStyle: {
+    //   // borderColor: '$borderColorFocus',
+    //   borderWidth: 2,
+    //   marginHorizontal: -1,
+    // },
+
+    // variants: {
+    //   size: {
+    //     // '...size': inputSizeVariant,
+    //   },
+    // } as const,
+
+    // defaultVariants: {
+    //   size: '$true',
+    // },
+  }
+  // {
+  //   isInput: true,
+  // }
+)
+
+const Name = styled(Text, {})
+
+const Desc = styled(Text, {})
+
+export type InputProps = GetProps<typeof InputFrame>
+
+interface Props {
+  name: string
+  description: string
+  membersCount: number
+}
+
+const _Sidebar = (props: Props) => {
+  const { name, description, membersCount } = props
+
+  return (
+    <Stack backgroundColor="rgb(255,255,255)">
+      <Image
+        src="https://images.unsplash.com/photo-1584475784921-d9dbfd9d17ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
+        width={350}
+        height={136}
+      />
+      <Stack
+        paddingHorizontal={16}
+        paddingBottom={16}
+        marginTop={-16}
+        backgroundColor="rgb(255,255,255)"
+        borderTopLeftRadius={16}
+        borderTopRightRadius={16}
+        zIndex={10}
+      >
+        <Stack marginTop={-32} marginBottom={12}>
+          <Avatar
+            src="https://images.unsplash.com/photo-1553835973-dec43bfddbeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
+            size={56}
+          />
+        </Stack>
+        <Name marginBottom={16}>{name}</Name>
+        <Desc marginBottom={12}>{description}</Desc>
+        <Desc marginBottom={12}>{membersCount}</Desc>
+        <Button>Request to join community</Button>
+      </Stack>
+    </Stack>
+  )
+}
+
+// export const Input = focusableInputHOC(InputFrame)
+export const Sidebar = _Sidebar