From a167396062c0d8fb7f96f6cf82177f2ef91465ab Mon Sep 17 00:00:00 2001
From: Pavel <14926950+prichodko@users.noreply.github.com>
Date: Wed, 22 Mar 2023 14:42:04 +0100
Subject: [PATCH] Add system messages (#356)

* add DynamicButton component

* add AnchorActions component

* add AnchorActions to web app
---
 apps/web/src/app.tsx                          |  4 +
 apps/web/styles/app.css                       |  6 ++
 .../components/src/anchor-actions/index.tsx   | 20 ++++
 .../dynamic-button/dynamic-button.stories.tsx | 27 ++++++
 .../src/dynamic-button/dynamic-button.tsx     | 92 +++++++++++++++++++
 .../components/src/dynamic-button/index.tsx   |  1 +
 packages/components/src/index.tsx             |  2 +
 7 files changed, 152 insertions(+)
 create mode 100644 packages/components/src/anchor-actions/index.tsx
 create mode 100644 packages/components/src/dynamic-button/dynamic-button.stories.tsx
 create mode 100644 packages/components/src/dynamic-button/dynamic-button.tsx
 create mode 100644 packages/components/src/dynamic-button/index.tsx

diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index b99df1e5..7eec9bc8 100644
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useRef, useState } from 'react'
 
 import {
+  AnchorActions,
   CHANNEL_GROUPS,
   Composer,
   Messages,
@@ -69,6 +70,9 @@ function App() {
             <Messages />
           </div>
           <div id="composer">
+            <div id="anchor-actions">
+              <AnchorActions scrolled={shouldBlurBottom} />
+            </div>
             <Composer blur={shouldBlurBottom} />
           </div>
         </div>
diff --git a/apps/web/styles/app.css b/apps/web/styles/app.css
index 882669c6..2d2d2aa7 100644
--- a/apps/web/styles/app.css
+++ b/apps/web/styles/app.css
@@ -52,6 +52,12 @@ body,
   padding: 32px 8px;
 }
 
+#anchor-actions {
+  position: absolute;
+  right: 20px;
+  transform: translateY(calc(-100% - 12px));
+}
+
 #composer {
   position: sticky;
   bottom: 0;
diff --git a/packages/components/src/anchor-actions/index.tsx b/packages/components/src/anchor-actions/index.tsx
new file mode 100644
index 00000000..fabc5a8d
--- /dev/null
+++ b/packages/components/src/anchor-actions/index.tsx
@@ -0,0 +1,20 @@
+import { Stack } from 'tamagui'
+
+import { DynamicButton } from '../dynamic-button'
+
+type Props = {
+  scrolled: boolean
+}
+
+const AnchorActions = (props: Props) => {
+  const { scrolled } = props
+
+  return (
+    <Stack flexDirection="row" space={8}>
+      {scrolled && <DynamicButton type="mention" count={1} />}
+      {scrolled && <DynamicButton type="notification" count={0} />}
+    </Stack>
+  )
+}
+
+export { AnchorActions }
diff --git a/packages/components/src/dynamic-button/dynamic-button.stories.tsx b/packages/components/src/dynamic-button/dynamic-button.stories.tsx
new file mode 100644
index 00000000..1080c01c
--- /dev/null
+++ b/packages/components/src/dynamic-button/dynamic-button.stories.tsx
@@ -0,0 +1,27 @@
+import { XStack } from 'tamagui'
+
+import { DynamicButton } from './dynamic-button'
+
+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 DynamicButton> = {
+  title: 'DynamicButton',
+  component: DynamicButton,
+  args: {},
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof DynamicButton>
+
+export const Default: Story = {
+  render: () => (
+    <XStack space={4}>
+      <DynamicButton type="mention" count={7} />
+      <DynamicButton type="notification" count={8} />
+      <DynamicButton type="notification" count={0} />
+    </XStack>
+  ),
+}
+
+export default meta
diff --git a/packages/components/src/dynamic-button/dynamic-button.tsx b/packages/components/src/dynamic-button/dynamic-button.tsx
new file mode 100644
index 00000000..16b535db
--- /dev/null
+++ b/packages/components/src/dynamic-button/dynamic-button.tsx
@@ -0,0 +1,92 @@
+import { forwardRef } from 'react'
+
+import { ArrowDownIcon, MentionIcon } from '@status-im/icons/12'
+import { Stack, styled } from '@tamagui/core'
+
+import { Shadow } from '../shadow'
+import { Text } from '../text'
+
+import type { GetVariants } from '../types'
+import type { ColorTokens, StackProps } from '@tamagui/core'
+import type { Ref } from 'react'
+import type { PressableProps } from 'react-native'
+
+type Variants = GetVariants<typeof Button>
+
+type Props = PressableProps & {
+  type: Variants['type']
+  count: number
+}
+
+const DynamicButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
+  const { type, count, ...pressableProps } = props
+
+  const color: ColorTokens = '$white-100'
+  const showCount = Boolean(count)
+
+  return (
+    <Shadow variant="$2" borderRadius={999}>
+      <Button
+        {...(pressableProps as unknown as StackProps)} // TODO: Tamagui has incorrect types for PressableProps
+        ref={ref}
+        type={type}
+        iconOnly={showCount === false}
+      >
+        {type === 'mention' && <MentionIcon color={color} />}
+        {showCount && (
+          <Text size={13} weight="medium" color={color} wrap={false}>
+            {count}
+          </Text>
+        )}
+        {type === 'notification' && <ArrowDownIcon color={color} />}
+      </Button>
+    </Shadow>
+  )
+}
+
+const _DynamicButton = forwardRef(DynamicButton)
+
+export { _DynamicButton as DynamicButton }
+export type { Props as DynamicButtonProps }
+
+const Button = styled(Stack, {
+  name: 'DynamicButton',
+  accessibilityRole: 'button',
+  tag: 'button',
+
+  cursor: 'pointer',
+  userSelect: 'none',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  height: 24,
+  borderRadius: 999,
+  animation: 'fast',
+  space: 3,
+
+  variants: {
+    type: {
+      mention: {
+        backgroundColor: '$primary-50',
+        hoverStyle: { backgroundColor: '$primary-60' },
+        pressStyle: { backgroundColor: '$primary-50' },
+      },
+
+      notification: {
+        backgroundColor: '$neutral-80-opa-70',
+        hoverStyle: { backgroundColor: '$neutral-90-opa-70' },
+        pressStyle: { backgroundColor: '$neutral-80-opa-80' },
+      },
+    },
+
+    iconOnly: {
+      true: {
+        width: 24,
+      },
+      false: {
+        paddingHorizontal: 8,
+      },
+    },
+  } as const,
+})
diff --git a/packages/components/src/dynamic-button/index.tsx b/packages/components/src/dynamic-button/index.tsx
new file mode 100644
index 00000000..2ba7d821
--- /dev/null
+++ b/packages/components/src/dynamic-button/index.tsx
@@ -0,0 +1 @@
+export { DynamicButton, type DynamicButtonProps } from './dynamic-button'
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 2cabbc44..b878f49c 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -1,7 +1,9 @@
+export * from './anchor-actions'
 export * from './button'
 export * from './composer'
 export * from './divider'
 export * from './divider-label'
+export * from './dynamic-button'
 export * from './icon-button'
 export * from './image'
 export * from './input'