diff --git a/packages/components/package.json b/packages/components/package.json index 80843ebb..b2f97890 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -42,6 +42,7 @@ "@tamagui/shorthands": "1.7.7", "@tamagui/theme-base": "1.7.7", "expo-blur": "~12.0.1", + "expo-linear-gradient": "^12.1.2", "tamagui": "1.7.7", "zustand": "^4.3.6" }, diff --git a/packages/components/src/divider-label/divider-label.tsx b/packages/components/src/divider-label/divider-label.tsx deleted file mode 100644 index 4f4715f0..00000000 --- a/packages/components/src/divider-label/divider-label.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Stack } from '@tamagui/core' - -import { Text } from '../text' - -type Props = { - label: string - tight?: boolean -} - -const DividerLabel = (props: Props) => { - const { label, tight = true } = props - - return ( - - - {label} - - - ) -} - -export { DividerLabel } -export type { Props as DividerLabelProps } diff --git a/packages/components/src/divider/divider.tsx b/packages/components/src/divider/divider.tsx deleted file mode 100644 index cda0b08b..00000000 --- a/packages/components/src/divider/divider.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Stack, styled } from '@tamagui/core' - -export const Divider = styled(Stack, { - name: 'Divider', - backgroundColor: '$neutral-80-opa-10', - flexShrink: 0, - // borderWidth: 0, - flex: 1, - height: '100%', - // maxHeight: 0, - maxWidth: 1, - width: 1, - marginHorizontal: 12, - // y: -0.5, - - variants: { - // vertical: { - // true: { - // y: 0, - // x: -0.5, - // height: isWeb ? 'initial' : 'auto', - // // maxHeight auto WILL BE passed to style attribute, but for some reason not used? - // // almost seems like a react or browser bug, but for now `initial` works - // // also, it doesn't happen for `height`, but for consistency using the same values - // maxHeight: isWeb ? 'initial' : 'auto', - // width: 0, - // maxWidth: 0, - // borderBottomWidth: 0, - // borderRightWidth: 1, - // }, - // }, - } as const, -}) diff --git a/packages/components/src/divider/index.tsx b/packages/components/src/divider/index.tsx deleted file mode 100644 index 53d72785..00000000 --- a/packages/components/src/divider/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './divider' diff --git a/packages/components/src/dividers/divider-date/divider-date.stories.tsx b/packages/components/src/dividers/divider-date/divider-date.stories.tsx new file mode 100644 index 00000000..de041d7d --- /dev/null +++ b/packages/components/src/dividers/divider-date/divider-date.stories.tsx @@ -0,0 +1,25 @@ +import { DividerDate } from './divider-date' + +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 = { + component: DividerDate, + argTypes: {}, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11', + }, + }, +} + +type Story = StoryObj + +export const Default: Story = { + args: { + label: 'Today', + }, +} + +export default meta diff --git a/packages/components/src/dividers/divider-date/divider-date.tsx b/packages/components/src/dividers/divider-date/divider-date.tsx new file mode 100644 index 00000000..a12d46ac --- /dev/null +++ b/packages/components/src/dividers/divider-date/divider-date.tsx @@ -0,0 +1,32 @@ +import { Stack } from '@tamagui/core' + +import { Text } from '../../text' +import { DividerLine } from '../divider-line' + +type Props = { + label: string +} + +const DividerDate = (props: Props) => { + const { label } = props + + return ( + + + {label} + + + + ) +} + +export { DividerDate } +export type { Props as DividerLabelProps } diff --git a/packages/components/src/dividers/divider-date/index.tsx b/packages/components/src/dividers/divider-date/index.tsx new file mode 100644 index 00000000..a825414c --- /dev/null +++ b/packages/components/src/dividers/divider-date/index.tsx @@ -0,0 +1 @@ +export * from './divider-date' diff --git a/packages/components/src/divider-label/divider-label.stories.tsx b/packages/components/src/dividers/divider-label/divider-label.stories.tsx similarity index 78% rename from packages/components/src/divider-label/divider-label.stories.tsx rename to packages/components/src/dividers/divider-label/divider-label.stories.tsx index 0f34e0ef..f7263e01 100644 --- a/packages/components/src/divider-label/divider-label.stories.tsx +++ b/packages/components/src/dividers/divider-label/divider-label.stories.tsx @@ -9,7 +9,7 @@ const meta: Meta = { parameters: { design: { type: 'figma', - url: '', + url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11', }, }, } diff --git a/packages/components/src/dividers/divider-label/divider-label.tsx b/packages/components/src/dividers/divider-label/divider-label.tsx new file mode 100644 index 00000000..d35b440c --- /dev/null +++ b/packages/components/src/dividers/divider-label/divider-label.tsx @@ -0,0 +1,29 @@ +import { Stack } from '@tamagui/core' + +import { Text } from '../../text' +import { DividerLine } from '../divider-line' + +type Props = { + label: string + tight?: boolean + count?: number +} + +// TODO: Add counter after PR #355 lands +const DividerLabel = (props: Props) => { + const { label, tight = true } = props + + return ( + + + + + {label} + + + + ) +} + +export { DividerLabel } +export type { Props as DividerLabelProps } diff --git a/packages/components/src/divider-label/index.tsx b/packages/components/src/dividers/divider-label/index.tsx similarity index 100% rename from packages/components/src/divider-label/index.tsx rename to packages/components/src/dividers/divider-label/index.tsx diff --git a/packages/components/src/dividers/divider-line/divider-line.tsx b/packages/components/src/dividers/divider-line/divider-line.tsx new file mode 100644 index 00000000..a529771f --- /dev/null +++ b/packages/components/src/dividers/divider-line/divider-line.tsx @@ -0,0 +1,22 @@ +import { Stack, styled } from '@tamagui/core' + +export const DividerLine = styled(Stack, { + name: 'DividerLine', + backgroundColor: '$neutral-10', + variants: { + orientation: { + horizontal: { + width: '100%', + height: '1px', + }, + vertical: { + height: '100%', + width: '1px', + }, + }, + } as const, + + defaultVariants: { + orientation: 'horizontal', + }, +}) diff --git a/packages/components/src/dividers/divider-line/index.tsx b/packages/components/src/dividers/divider-line/index.tsx new file mode 100644 index 00000000..fcf50980 --- /dev/null +++ b/packages/components/src/dividers/divider-line/index.tsx @@ -0,0 +1 @@ +export * from './divider-line' diff --git a/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx b/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx new file mode 100644 index 00000000..5629d824 --- /dev/null +++ b/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx @@ -0,0 +1,42 @@ +import { Stack } from 'tamagui' + +import { DividerNewMessages } from './divider-new-messages' + +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + component: DividerNewMessages, + argTypes: {}, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159391&t=mgkcemjDOjfGvZZ2-11', + }, + }, +} + +type Story = StoryObj + +export const Default: Story = { + args: {}, + render: () => { + return ( + + + + + {/* */} + {/* */} + {/* */} + + {/* */} + + + {/* */} + {/* */} + + ) + }, +} + +export default meta diff --git a/packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx b/packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx new file mode 100644 index 00000000..a1fab2de --- /dev/null +++ b/packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx @@ -0,0 +1,28 @@ +import { Stack } from '@tamagui/core' +import { LinearGradient } from '@tamagui/linear-gradient' + +import { Text } from '../../text' + +import type { ColorTokens } from '@tamagui/core' + +type Props = { + color: ColorTokens +} + +const DividerNewMessages = (props: Props) => { + const { color } = props + + return ( + + + + + New Messages + + + + + ) +} + +export { DividerNewMessages } diff --git a/packages/components/src/dividers/divider-new-messages/index.tsx b/packages/components/src/dividers/divider-new-messages/index.tsx new file mode 100644 index 00000000..3fe62cc9 --- /dev/null +++ b/packages/components/src/dividers/divider-new-messages/index.tsx @@ -0,0 +1 @@ +export { DividerNewMessages } from './divider-new-messages' diff --git a/packages/components/src/dividers/index.tsx b/packages/components/src/dividers/index.tsx new file mode 100644 index 00000000..f413db37 --- /dev/null +++ b/packages/components/src/dividers/index.tsx @@ -0,0 +1,4 @@ +export { DividerDate } from './divider-date' +export { DividerLabel } from './divider-label' +export { DividerLine } from './divider-line' +export { DividerNewMessages } from './divider-new-messages' diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 6d047f78..0470d07c 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -1,8 +1,7 @@ export * from './anchor-actions' export * from './button' export * from './composer' -export * from './divider' -export * from './divider-label' +export * from './dividers' export * from './dynamic-button' export * from './icon-button' export * from './image' diff --git a/packages/components/src/messages/index.tsx b/packages/components/src/messages/index.tsx index f0e44e07..9cca4801 100644 --- a/packages/components/src/messages/index.tsx +++ b/packages/components/src/messages/index.tsx @@ -1,3 +1,6 @@ +import { Stack } from '@tamagui/core' + +import { DividerDate, DividerNewMessages } from '../dividers' import { PinAnnouncement } from '../system-messages' import { Message } from './message' @@ -78,6 +81,9 @@ export const Messages = () => { reply id="1234-1242" /> + + + { reactions={{}} id="1234-1244" /> + { )} - +