Add Tag (#372)

* add tag

* add next-env.d.ts

* fix gap

* use $full token for borderRadius

* remove comments

* fix system message render

* fix action type

* rm next-env.d.ts

packages/components/src/system-message/system-message.stories.tsx

@@ -32,7 +32,7 @@ export const AllVariants: Story = {
           timestamp="11:12"
           type="deleted"
           text="Message deleted for you"
-          action={{ label: 'Undo', onClick: action('undo') }}
+          action={{ label: 'Undo', onPress: action('undo') }}
           state={state}
         />
         <SystemMessage

packages/components/src/system-message/system-message.tsx

@@ -34,7 +34,7 @@ type Props = {
       text: string
       action?: {
         label: string
-        onClick: () => void
+        onPress: () => void
       }
     }
   | {
@@ -47,7 +47,7 @@ type Props = {
 const SystemMessage = (props: Props) => {
   const { state = 'default', timestamp, type } = props
 
-  const renderMessage = (type: 'pinned' | 'deleted' | 'added') => {
+  const renderMessage = () => {
     switch (type) {
       case 'pinned':
         return (
@@ -89,7 +89,7 @@ const SystemMessage = (props: Props) => {
         type === 'deleted' && state === 'landed' ? 'landed_deleted' : state
       }
     >
-      {renderMessage(type)}
+      {renderMessage()}
     </Base>
   )
 }

packages/components/src/tag/index.tsx

@@ -0,0 +1 @@
+export { Tag } from './tag'

packages/components/src/tag/tag.stories.tsx

@@ -0,0 +1,46 @@
+import { Stack } from '@tamagui/core'
+
+import { Tag } from './tag'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Tag> = {
+  component: Tag,
+  argTypes: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=180-9685&t=tDEqIV09qddTZgXF-4',
+    },
+  },
+}
+
+type Story = StoryObj<typeof Tag>
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <Stack space flexDirection="row">
+        <Stack space alignItems="flex-start">
+          <Tag emoji="🐷" label="Tag" size={32} />
+          <Tag emoji="🐷" label="Tag" size={32} selected />
+          <Tag emoji="🐷" label="Tag" size={32} disabled />
+          <Tag emoji="🐷" size={32} />
+
+          <Tag emoji="🐷" label="Tag" size={24} />
+          <Tag emoji="🐷" size={24} />
+        </Stack>
+
+        <Stack space alignItems="flex-start">
+          <Tag label="Tag" size={32} />
+          <Tag label="Tag" size={32} selected />
+          <Tag label="Tag" size={32} disabled />
+
+          <Tag label="Tag" size={24} />
+        </Stack>
+      </Stack>
+    )
+  },
+}
+
+export default meta

packages/components/src/tag/tag.tsx

@@ -0,0 +1,87 @@
+import { Stack, styled } from '@tamagui/core'
+
+import { Text } from '../text'
+
+import type { TextProps } from '../text'
+
+type Props = {
+  size: 32 | 24
+  emoji?: string
+  label?: string
+  selected?: boolean
+  disabled?: boolean
+}
+
+const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
+  '32': 15,
+  '24': 13,
+}
+
+const Tag = (props: Props) => {
+  const { size, emoji, label, selected, disabled } = props
+
+  return (
+    <Base
+      size={size}
+      selected={selected}
+      disabled={disabled}
+      emojiOnly={Boolean(emoji && !label)}
+    >
+      {emoji && <Text size={textSizes[size]}>{emoji}</Text>}
+      {label && (
+        <Text size={textSizes[size]} weight="medium">
+          {label}
+        </Text>
+      )}
+    </Base>
+  )
+}
+
+const Base = styled(Stack, {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderWidth: 1,
+  borderColor: '$neutral-20',
+  borderRadius: '$full',
+
+  variants: {
+    size: {
+      32: {
+        height: 32,
+        minWidth: 32,
+        paddingHorizontal: 12,
+        gap: 6,
+      },
+      24: {
+        height: 24,
+        minWidth: 24,
+        paddingHorizontal: 8,
+        gap: 5,
+      },
+    },
+
+    selected: {
+      true: {
+        backgroundColor: '$primary-50-opa-10',
+        borderColor: '$primary-50',
+      },
+    },
+
+    disabled: {
+      true: {
+        opacity: 0.3,
+        cursor: 'default',
+      },
+    },
+
+    emojiOnly: {
+      true: {
+        paddingHorizontal: 0,
+      },
+    },
+  },
+})
+
+export { Tag }