From 8744906a7114bf9f459a78fd6fbfa11e3d2a8720 Mon Sep 17 00:00:00 2001 From: Demur Rumed Date: Sat, 11 Nov 2023 18:45:23 +0000 Subject: [PATCH] Rip out Select from ui/lib --- ui/lib/Layout/RowWithSelect.stories.tsx | 14 +------ ui/lib/Select/Select.stories.tsx | 36 ------------------ ui/lib/Select/Select.styles.ts | 50 ------------------------- ui/lib/Select/Select.tsx | 34 ----------------- ui/lib/Select/SelectItem.stories.tsx | 36 ------------------ ui/lib/Select/SelectItem.styles.ts | 32 ---------------- ui/lib/Select/SelectItem.tsx | 17 --------- ui/lib/Select/SelectMenu.stories.tsx | 28 -------------- ui/lib/Select/SelectMenu.styles.ts | 12 ------ ui/lib/Select/SelectMenu.tsx | 13 ------- ui/lib/Select/index.ts | 2 - ui/lib/Table/Table.stories.tsx | 19 ---------- ui/lib/Table/TableCell.stories.tsx | 2 - ui/lib/Table/TableRow.stories.tsx | 2 - 14 files changed, 1 insertion(+), 296 deletions(-) delete mode 100644 ui/lib/Select/Select.stories.tsx delete mode 100644 ui/lib/Select/Select.styles.ts delete mode 100644 ui/lib/Select/Select.tsx delete mode 100644 ui/lib/Select/SelectItem.stories.tsx delete mode 100644 ui/lib/Select/SelectItem.styles.ts delete mode 100644 ui/lib/Select/SelectItem.tsx delete mode 100644 ui/lib/Select/SelectMenu.stories.tsx delete mode 100644 ui/lib/Select/SelectMenu.styles.ts delete mode 100644 ui/lib/Select/SelectMenu.tsx delete mode 100644 ui/lib/Select/index.ts diff --git a/ui/lib/Layout/RowWithSelect.stories.tsx b/ui/lib/Layout/RowWithSelect.stories.tsx index a79c41990e..e8d3c3abb0 100644 --- a/ui/lib/Layout/RowWithSelect.stories.tsx +++ b/ui/lib/Layout/RowWithSelect.stories.tsx @@ -12,19 +12,7 @@ export default { Label ), - action: ( - - ), + action:
select
, description: , }, } satisfies Meta; diff --git a/ui/lib/Select/Select.stories.tsx b/ui/lib/Select/Select.stories.tsx deleted file mode 100644 index 9a30caf43b..0000000000 --- a/ui/lib/Select/Select.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { Separator } from '../Separator'; -import { Select } from './Select'; -import { SelectItem } from './SelectItem'; - -export default { - title: 'Components / Input / Select', - component: Select, - tags: ['autodocs'], -} satisfies Meta; - -type Story = StoryObj; -export const Default: Story = { - render: () => ( - - ), -}; - -export const Disabled: Story = { - render: () => ( - - ), -}; diff --git a/ui/lib/Select/Select.styles.ts b/ui/lib/Select/Select.styles.ts deleted file mode 100644 index 7f7b60c22a..0000000000 --- a/ui/lib/Select/Select.styles.ts +++ /dev/null @@ -1,50 +0,0 @@ -import * as RadixSelect from '@radix-ui/react-select'; -import styled, { css } from 'styled-components'; - -export const StyledSelectIcon = styled(RadixSelect.Icon)` - color: ${({ theme }) => theme.colors.base.text.lowContrast}; -`; - -export const StyledSelectTrigger = styled(RadixSelect.Trigger)` - all: unset; - - min-width: 128px; - width: 100%; - margin: ${({ theme }) => theme.spacing.xxSmall} 0px; - padding: ${({ theme }) => `${theme.spacing.xxSmall} ${theme.spacing.medium}`}; - - display: flex; - flex-flow: row nowrap; - - border-radius: ${({ theme }) => theme.radius.medium}; - color: ${({ theme }) => theme.colors.base.text.highContrast}; - ${({ theme }) => css(theme.text.regular.body)} - - &[data-state='open'], - &:focus-visible, - &:hover:not([data-disabled]) { - justify-content: space-between; - - > i { - color: ${({ theme }) => theme.colors.base.text.highContrast}; - } - } - - &[data-state='open'], - &:hover:not([data-disabled]) { - background-color: ${({ theme }) => theme.colors.base.surface.hovered}; - } - - &:focus { - outline: none; - } - - &:focus-visible { - outline: 2px solid ${({ theme }) => theme.colors.accent.border.normal}; - outline-offset: -2px; - } - - &[data-disabled] { - opacity: 0.3; - } -`; diff --git a/ui/lib/Select/Select.tsx b/ui/lib/Select/Select.tsx deleted file mode 100644 index 13f733e3c5..0000000000 --- a/ui/lib/Select/Select.tsx +++ /dev/null @@ -1,34 +0,0 @@ -'use client'; -// your-select.jsx -import * as RadixSelect from '@radix-ui/react-select'; -import { PropsWithChildren } from 'react'; -import { Icon } from '../Icon'; -import { StyledSelectIcon, StyledSelectTrigger } from './Select.styles'; -import { SelectMenu } from './SelectMenu'; - -type SelectProps = PropsWithChildren & { - placeholder?: string; - id?: string; - className?: string; -}; -export function Select({ - placeholder, - children, - id, - className, - ...selectRootProps -}: SelectProps) { - return ( - - - - - - - - - {children} - - - ); -} diff --git a/ui/lib/Select/SelectItem.stories.tsx b/ui/lib/Select/SelectItem.stories.tsx deleted file mode 100644 index e9e01e7603..0000000000 --- a/ui/lib/Select/SelectItem.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as RadixSelect from '@radix-ui/react-select'; -import { Meta, StoryObj } from '@storybook/react'; -import { SelectItem } from './SelectItem'; - -export default { - title: 'Components / Input / Select / SelectItem', - component: SelectItem, - tags: ['autodocs'], - args: { - value: 'label', - }, -} satisfies Meta; - -type Story = StoryObj; -export const Default: Story = { - render: (props) => ( - - - Label - - - ), -}; - -export const Disabled: Story = { - args: { - disabled: true, - }, - render: (props) => ( - - - Label - - - ), -}; diff --git a/ui/lib/Select/SelectItem.styles.ts b/ui/lib/Select/SelectItem.styles.ts deleted file mode 100644 index 32c489ad6d..0000000000 --- a/ui/lib/Select/SelectItem.styles.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as RadixSelect from '@radix-ui/react-select'; -import styled, { css } from 'styled-components'; - -export const StyledItem = styled(RadixSelect.Item)` - position: relative; - display: flex; - justify-content: flex-start; - - padding: 0; - padding-left: ${({ theme }) => theme.spacing['4xLarge']}; - padding-right: ${({ theme }) => theme.spacing.medium}; - - border-radius: ${({ theme }) => theme.radius.small}; - - color: ${({ theme }) => theme.colors.base.text.highContrast}; - ${({ theme }) => css(theme.text.regular.body)} - - &[data-state="checked"], - &[data-highlighted] { - background-color: ${({ theme }) => theme.colors.base.surface.hovered}; - outline: none; - } - - &[data-disabled] { - opacity: 0.3; - } -`; - -export const StyledIndicator = styled(RadixSelect.ItemIndicator)` - position: absolute; - left: ${({ theme }) => theme.spacing.medium}; -`; diff --git a/ui/lib/Select/SelectItem.tsx b/ui/lib/Select/SelectItem.tsx deleted file mode 100644 index b0ff603e52..0000000000 --- a/ui/lib/Select/SelectItem.tsx +++ /dev/null @@ -1,17 +0,0 @@ -'use client'; -import * as RadixSelect from '@radix-ui/react-select'; -import type { PropsWithChildren } from 'react'; -import { Icon } from '../Icon'; -import { StyledIndicator, StyledItem } from './SelectItem.styles'; - -type SelectItemProps = PropsWithChildren; -export function SelectItem({ children, ...selectItemProps }: SelectItemProps) { - return ( - - - - - {children} - - ); -} diff --git a/ui/lib/Select/SelectMenu.stories.tsx b/ui/lib/Select/SelectMenu.stories.tsx deleted file mode 100644 index 36cb6f0727..0000000000 --- a/ui/lib/Select/SelectMenu.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as RadixSelect from '@radix-ui/react-select'; -import { Meta, StoryObj } from '@storybook/react'; -import { SelectItem } from './SelectItem'; -import { SelectMenu } from './SelectMenu'; - -export default { - title: 'Components / Input / Select / SelectMenu', - component: SelectMenu, - tags: ['autodocs'], -} satisfies Meta; - -type Story = StoryObj; -export const Default: Story = { - render: (props) => ( -
- - - Item one - Item two - Item three - Item four - Item five - Item six - - -
- ), -}; diff --git a/ui/lib/Select/SelectMenu.styles.ts b/ui/lib/Select/SelectMenu.styles.ts deleted file mode 100644 index 82c22b3017..0000000000 --- a/ui/lib/Select/SelectMenu.styles.ts +++ /dev/null @@ -1,12 +0,0 @@ -import * as RadixSelect from '@radix-ui/react-select'; -import styled, { css } from 'styled-components'; - -export const SelectContent = styled(RadixSelect.SelectContent)` - padding: ${({ theme }) => theme.spacing.medium}; - border: 1px solid ${({ theme }) => theme.colors.base.border.subtle}; - border-radius: ${({ theme }) => theme.radius.medium}; - background-color: ${({ theme }) => theme.colors.base.background.normal}; - ${({ theme }) => css(theme.dropShadow.large)}; - - width: var(--radix-popper-anchor-width, 'auto'); -`; diff --git a/ui/lib/Select/SelectMenu.tsx b/ui/lib/Select/SelectMenu.tsx deleted file mode 100644 index 34aa128a37..0000000000 --- a/ui/lib/Select/SelectMenu.tsx +++ /dev/null @@ -1,13 +0,0 @@ -'use client'; -import * as RadixSelect from '@radix-ui/react-select'; -import { PropsWithChildren } from 'react'; -import { SelectContent } from './SelectMenu.styles'; - -type SelectMenuProps = PropsWithChildren; -export function SelectMenu({ children, ...contentProps }: SelectMenuProps) { - return ( - - {children} - - ); -} diff --git a/ui/lib/Select/index.ts b/ui/lib/Select/index.ts deleted file mode 100644 index 7669724a89..0000000000 --- a/ui/lib/Select/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Select'; -export * from './SelectItem'; diff --git a/ui/lib/Table/Table.stories.tsx b/ui/lib/Table/Table.stories.tsx index 27c41ec3db..9bf333d213 100644 --- a/ui/lib/Table/Table.stories.tsx +++ b/ui/lib/Table/Table.stories.tsx @@ -5,7 +5,6 @@ import { Checkbox } from '../Checkbox'; import { Icon } from '../Icon'; import { Label } from '../Label'; import { SearchField } from '../SearchField'; -import { Select } from '../Select'; import { Table } from './Table'; import { TableCell } from './TableCell'; import { TableRow } from './TableRow'; @@ -50,24 +49,6 @@ export default { - - - - - - - - -