diff --git a/code/ui/components/src/experimental.ts b/code/ui/components/src/experimental.ts deleted file mode 100644 index 6682e0ada3c5..000000000000 --- a/code/ui/components/src/experimental.ts +++ /dev/null @@ -1,10 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/triple-slash-reference -/// - -/* ABSOLUTELY DO NOT: - * - EXPORT PROPS INTERFACES OF COMPONENTS - * - EXPORT * FROM ANY FILES, EVERY EXPORT SHOULD BE DELIBERATE - * - EXPORT IMPORT / EXPORT ANYTHING FROM LEGACY - */ - -export { Button } from './new/Button/Button'; diff --git a/code/ui/components/src/new/Button/Button.stories.tsx b/code/ui/components/src/new/Button/Button.stories.tsx deleted file mode 100644 index 0bae84bdf8ec..000000000000 --- a/code/ui/components/src/new/Button/Button.stories.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; -import { Button } from './Button'; - -const meta: Meta = { - title: 'Button', - component: Button, - tags: ['autodocs'], -}; - -export default meta; -type Story = StoryObj; - -export const Base = { - args: { children: 'Button' }, -}; - -export const Variants: Story = { - args: { - ...Base.args, - }, - render: () => ( -
- - - -
- ), -}; - -export const Active: Story = { - args: { - ...Base.args, - }, - render: (args) => ( -
- - - -
- ), -}; - -export const WithIcon: Story = { - args: { - ...Base.args, - icon: 'FaceHappy', - }, - render: ({ icon, children }) => ( -
- - - -
- ), -}; - -export const Sizes: Story = { - args: { - ...Base.args, - }, - render: () => ( -
- - -
- ), -}; - -export const Disabled: Story = { - args: { - ...Base.args, - disabled: true, - children: 'Disabled Button', - }, -}; - -export const WithHref: Story = { - args: { - ...Base.args, - }, - render: () => ( -
- - -
- ), -}; diff --git a/code/ui/components/src/new/Button/Button.tsx b/code/ui/components/src/new/Button/Button.tsx deleted file mode 100644 index de19088bf5f4..000000000000 --- a/code/ui/components/src/new/Button/Button.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React, { forwardRef } from 'react'; -import { styled } from '@storybook/theming'; -import { darken, lighten, rgba, transparentize } from 'polished'; -import type { Icons } from '@storybook/icons'; -import type { PropsOf } from '../utils/types'; - -interface ButtonProps { - children: string; - as?: T; - size?: 'small' | 'medium'; - variant?: 'solid' | 'outline' | 'ghost'; - onClick?: () => void; - disabled?: boolean; - active?: boolean; - icon?: Icons; -} - -export const Button: { - ( - props: ButtonProps & Omit, keyof ButtonProps> - ): JSX.Element; - displayName?: string; -} = forwardRef( - ({ as, children, icon, ...props }: ButtonProps, ref: React.Ref) => { - return ( - - {children} - - ); - } -); - -Button.displayName = 'Button'; - -const StyledButton = styled.button>( - ({ theme, variant = 'solid', size = 'medium', disabled = false, active = false }) => ({ - border: 0, - cursor: disabled ? 'not-allowed' : 'pointer', - display: 'inline-flex', - gap: '6px', - alignItems: 'center', - justifyContent: 'center', - overflow: 'hidden', - padding: `${(() => { - if (size === 'small') return '0 10px'; - if (size === 'medium') return '0 12px'; - return 0; - })()}`, - height: size === 'small' ? '28px' : '32px', - position: 'relative', - textAlign: 'center', - textDecoration: 'none', - transitionProperty: 'background, box-shadow', - transitionDuration: '150ms', - transitionTimingFunction: 'ease-out', - verticalAlign: 'top', - whiteSpace: 'nowrap', - userSelect: 'none', - opacity: disabled ? 0.5 : 1, - margin: 0, - fontSize: `${theme.typography.size.s1}px`, - fontWeight: theme.typography.weight.bold, - lineHeight: '1', - background: `${(() => { - if (variant === 'solid') return theme.color.secondary; - if (variant === 'outline') return theme.button.background; - if (variant === 'ghost' && active) return theme.background.hoverable; - return 'transparent'; - })()}`, - color: `${(() => { - if (variant === 'solid') return theme.color.lightest; - if (variant === 'outline') return theme.input.color; - if (variant === 'ghost' && active) return theme.color.secondary; - if (variant === 'ghost') return theme.color.mediumdark; - return theme.input.color; - })()}`, - boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none', - borderRadius: theme.input.borderRadius, - - '&:hover': { - color: variant === 'ghost' ? theme.color.secondary : null, - background: `${(() => { - let bgColor = theme.color.secondary; - if (variant === 'solid') bgColor = theme.color.secondary; - if (variant === 'outline') bgColor = theme.button.background; - - if (variant === 'ghost') return transparentize(0.86, theme.color.secondary); - return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor); - })()}`, - }, - - '&:active': { - color: variant === 'ghost' ? theme.color.secondary : null, - background: `${(() => { - let bgColor = theme.color.secondary; - if (variant === 'solid') bgColor = theme.color.secondary; - if (variant === 'outline') bgColor = theme.button.background; - - if (variant === 'ghost') return theme.background.hoverable; - return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor); - })()}`, - }, - - '&:focus': { - boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`, - outline: 'none', - }, - }) -); diff --git a/code/ui/components/src/new/IconButton/IconButton.stories.tsx b/code/ui/components/src/new/IconButton/IconButton.stories.tsx deleted file mode 100644 index 4e239b9fb1b3..000000000000 --- a/code/ui/components/src/new/IconButton/IconButton.stories.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; -import { IconButton } from './IconButton'; - -const meta: Meta = { - title: 'IconButton', - component: IconButton, - tags: ['autodocs'], -}; - -export default meta; -type Story = StoryObj; - -export const Base = { - args: { icon: 'FaceHappy' }, -}; - -export const Types: Story = { - render: () => ( -
- - - -
- ), -}; - -export const Active: Story = { - render: () => ( -
- - - -
- ), -}; - -export const Sizes: Story = { - render: () => ( -
- - -
- ), -}; - -export const Disabled: Story = { - args: { - ...Base.args, - icon: 'FaceHappy', - disabled: true, - }, -}; - -export const Animated: Story = { - args: { - ...Base.args, - icon: 'FaceHappy', - }, - render: () => ( -
- - - -
- ), -}; - -export const WithHref: Story = { - render: () => ( -
- console.log('Hello')} /> - -
- ), -}; diff --git a/code/ui/components/src/new/IconButton/IconButton.tsx b/code/ui/components/src/new/IconButton/IconButton.tsx deleted file mode 100644 index 18385bf3609d..000000000000 --- a/code/ui/components/src/new/IconButton/IconButton.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import type { SyntheticEvent } from 'react'; -import React, { forwardRef, useEffect, useState } from 'react'; -import { styled } from '@storybook/theming'; -import { darken, lighten, rgba, transparentize } from 'polished'; -import type { Icons } from '@storybook/icons'; -import type { PropsOf } from '../utils/types'; -import { Icon } from '../Icon/Icon'; - -interface IconButtonProps { - icon: Icons; - as?: T; - size?: 'small' | 'medium'; - variant?: 'solid' | 'outline' | 'ghost'; - onClick?: (event: SyntheticEvent) => void; - disabled?: boolean; - active?: boolean; - onClickAnimation?: 'none' | 'rotate360' | 'glow' | 'jiggle'; -} - -export const IconButton: { - ( - props: IconButtonProps & Omit, keyof IconButtonProps> - ): JSX.Element; - displayName?: string; -} = forwardRef( - ( - { as, icon = 'FaceHappy', onClickAnimation = 'none', onClick, ...props }: IconButtonProps, - ref: React.Ref - ) => { - const LocalIcon = Icon[icon]; - const [isAnimating, setIsAnimating] = useState(false); - - const handleClick = (event: SyntheticEvent) => { - if (onClick) onClick(event); - if (onClickAnimation === 'none') return; - setIsAnimating(true); - }; - - useEffect(() => { - const timer = setTimeout(() => { - if (isAnimating) setIsAnimating(false); - }, 1000); - return () => clearTimeout(timer); - }, [isAnimating]); - - return ( - - - - - - ); - } -); - -IconButton.displayName = 'IconButton'; - -const StyledButton = styled.button>( - ({ theme, variant = 'solid', size = 'medium', disabled = false, active = false }) => ({ - border: 0, - cursor: disabled ? 'not-allowed' : 'pointer', - display: 'inline-flex', - gap: '6px', - alignItems: 'center', - justifyContent: 'center', - overflow: 'hidden', - width: `${(() => { - if (size === 'small') return '28px'; - if (size === 'medium') return '32px'; - return 'auto'; - })()}`, - height: size === 'small' ? '28px' : '32px', - position: 'relative', - textAlign: 'center', - textDecoration: 'none', - transitionProperty: 'background, box-shadow', - transitionDuration: '150ms', - transitionTimingFunction: 'ease-out', - verticalAlign: 'top', - whiteSpace: 'nowrap', - userSelect: 'none', - opacity: disabled ? 0.5 : 1, - margin: 0, - fontSize: `${theme.typography.size.s1}px`, - fontWeight: theme.typography.weight.bold, - lineHeight: '1', - background: `${(() => { - if (variant === 'solid') return theme.color.secondary; - if (variant === 'outline') return theme.button.background; - if (variant === 'ghost' && active) return theme.background.hoverable; - return 'transparent'; - })()}`, - color: `${(() => { - if (variant === 'solid') return theme.color.lightest; - if (variant === 'outline') return theme.input.color; - if (variant === 'ghost' && active) return theme.color.secondary; - if (variant === 'ghost') return theme.color.mediumdark; - return theme.input.color; - })()}`, - boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none', - borderRadius: theme.input.borderRadius, - - '&:hover': { - color: variant === 'ghost' ? theme.color.secondary : null, - background: `${(() => { - let bgColor = theme.color.secondary; - if (variant === 'solid') bgColor = theme.color.secondary; - if (variant === 'outline') bgColor = theme.button.background; - - if (variant === 'ghost') return transparentize(0.86, theme.color.secondary); - return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor); - })()}`, - }, - - '&:active': { - color: variant === 'ghost' ? theme.color.secondary : null, - background: `${(() => { - let bgColor = theme.color.secondary; - if (variant === 'solid') bgColor = theme.color.secondary; - if (variant === 'outline') bgColor = theme.button.background; - - if (variant === 'ghost') return theme.background.hoverable; - return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor); - })()}`, - }, - - '&:focus': { - boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`, - outline: 'none', - }, - }) -); - -const IconWrapper = styled.div<{ - isAnimating: boolean; - animation: IconButtonProps['onClickAnimation']; -}>(({ theme, isAnimating, animation }) => ({ - width: 14, - height: 14, - animation: isAnimating && animation !== 'none' && `${theme.animation[animation]} 1000ms ease-out`, -})); diff --git a/code/ui/components/src/new/Input/Input.stories.tsx b/code/ui/components/src/new/Input/Input.stories.tsx deleted file mode 100644 index 8130f39aa72d..000000000000 --- a/code/ui/components/src/new/Input/Input.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { Input } from './Input'; - -const meta: Meta = { - title: 'Input', - component: Input, - tags: ['autodocs'], -}; - -export default meta; -type Story = StoryObj; - -export const Base: Story = { - args: { - placeholder: 'Hello World', - }, -}; - -export const Filled: Story = { - args: { - ...Base.args, - value: 'Hello World', - }, -}; - -export const Disabled: Story = { - args: { - ...Base.args, - disabled: true, - }, -}; diff --git a/code/ui/components/src/new/Input/Input.tsx b/code/ui/components/src/new/Input/Input.tsx deleted file mode 100644 index da10006c960e..000000000000 --- a/code/ui/components/src/new/Input/Input.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { forwardRef } from 'react'; -import { styled } from '@storybook/theming'; - -interface InputProps { - disabled?: boolean; - placeholder?: string; - value?: string; -} - -export const Input = forwardRef(({ ...props }, ref) => { - return ; -}); - -Input.displayName = 'Input'; - -const StyledInput = styled.input(({ theme }) => ({ - // resets - appearance: 'none', - border: '0 none', - display: 'block', - margin: ' 0', - position: 'relative', - - // styles - width: '100%', - height: '32px', - transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out', - color: theme.input.color, - background: theme.input.background, - boxShadow: `${theme.input.border} 0 0 0 1px inset`, - borderRadius: theme.input.borderRadius, - fontSize: theme.typography.size.s2 - 1, - padding: '6px 10px', - boxSizing: 'border-box', - lineHeight: '20px', - - '&:focus': { - boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, - outline: 'none', - }, - - '&[disabled]': { - cursor: 'not-allowed', - opacity: 0.5, - }, - - '&:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`, - }, - - '&::placeholder': { - color: theme.textMutedColor, - opacity: 1, - }, -})); diff --git a/code/ui/components/src/new/Select/Select.stories.tsx b/code/ui/components/src/new/Select/Select.stories.tsx deleted file mode 100644 index 452fe113fba4..000000000000 --- a/code/ui/components/src/new/Select/Select.stories.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; - -import { Select } from './Select'; - -const meta: Meta = { - title: 'Select', - component: Select.Root, - tags: ['autodocs'], - parameters: { - layout: 'centered', - }, -}; - -export default meta; -type Story = StoryObj; - -export const Base: Story = { - args: {}, - render: (_, { args }) => ( -
- - - - - - Avocado - Banana - Bilberry - Blackberry - Blackcurrant - Black sapote - Blueberry - Boysenberry - Breadfruit - Cacao - Cactus pear - Canistel - Catmon - Cempedak - Cherimoya - Cherry - Chico fruit - Cloudberry - Coco de mer - Coconut - Crab apple - Cranberry - Currant - Damson - Date - Dragonfruit - Durian - Elderberry - Feijoa - Fig - Finger Lime - Gac Fruit - Goji berry - Gooseberry - Grape - Raisin - Grapefruit - Grewia asiatica - Guava - Guyabano - Hala Fruit - Honeyberry - Huckleberry - Jabuticaba - Jackfruit - Jambul - Japanese plum - Jostaberry - Jujube - Juniper berry - Kaffir Lime - Kiwano - Kiwifruit - Kumquat - Lanzones - Lemon - Lime - Loganberry - Longan - Loquat - - -
- ), -}; diff --git a/code/ui/components/src/new/Select/Select.tsx b/code/ui/components/src/new/Select/Select.tsx deleted file mode 100644 index 0ae606877434..000000000000 --- a/code/ui/components/src/new/Select/Select.tsx +++ /dev/null @@ -1,180 +0,0 @@ -import * as React from 'react'; -import * as SelectPrimitive from '@radix-ui/react-select'; -import { styled } from '@storybook/theming'; -import { ExpandAlt } from './icons/ExpandAlt'; -import { Arrowup } from './icons/Arrowup'; -import { Arrowdown } from './icons/Arrowdown'; -import { Check } from './icons/Check'; - -const SelectTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - {children} - - - - -)); -SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; - -const SelectContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - - - - - {children} - - - - - -)); -SelectContent.displayName = SelectPrimitive.Content.displayName; - -const SelectLabel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -SelectLabel.displayName = SelectPrimitive.Label.displayName; - -const SelectItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - - - - {children} - -)); -SelectItem.displayName = SelectPrimitive.Item.displayName; - -const SelectSeparator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -SelectSeparator.displayName = SelectPrimitive.Separator.displayName; - -export const Select = { - Root: SelectPrimitive.Root, - Group: SelectPrimitive.Group, - Value: SelectPrimitive.Value, - Trigger: SelectTrigger, - Content: SelectContent, - Label: SelectLabel, - Item: SelectItem, - Separator: SelectSeparator, -}; - -const StyledTrigger = styled(SelectPrimitive.Trigger)(({ theme }) => ({ - all: 'unset', - display: 'flex', - width: '100%', - height: '32px', - alignItems: 'center', - justifyContent: 'space-between', - transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out', - color: theme.input.color, - background: theme.input.background, - boxShadow: `${theme.input.border} 0 0 0 1px inset`, - borderRadius: theme.input.borderRadius, - fontSize: theme.typography.size.s2 - 1, - padding: '6px 10px', - boxSizing: 'border-box', - lineHeight: '20px', - - '&:focus': { - boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, - outline: 'none', - }, - - '&[disabled]': { - cursor: 'not-allowed', - opacity: 0.5, - }, - - '&[data-placeholder]': { - color: theme.textMutedColor, - }, - - '&:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`, - }, -})); - -const StyledContent = styled(SelectPrimitive.Content)(({ theme }) => ({ - boxSizing: 'border-box', - overflow: 'hidden', - backgroundColor: theme.input.background, - borderRadius: '6px', - border: theme.base === 'dark' ? `1px solid ${theme.input.border}` : '1px solid transparent', - width: '100%', - boxShadow: - '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)', -})); - -const StyledViewport = styled(SelectPrimitive.Viewport)(() => ({ - boxSizing: 'border-box', - width: '100%', - padding: '5px', -})); - -const StyledScrollUpButton = styled(SelectPrimitive.ScrollUpButton)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: '25px', - backgroundColor: theme.input.background, - color: theme.input.color, - cursor: 'default', -})); - -const StyledScrollDownButton = styled(SelectPrimitive.ScrollDownButton)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: '25px', - backgroundColor: theme.input.background, - color: theme.input.color, - cursor: 'default', -})); - -const StyledItem = styled(SelectPrimitive.Item)(({ theme }) => ({ - fontSize: '13px', - lineHeight: 1, - color: theme.input.color, - borderRadius: '3px', - display: 'flex', - alignItems: 'center', - height: '25px', - padding: '0 35px 0 25px', - position: 'relative', - userSelect: 'none', - - '&[data-disabled]': { - color: 'red', - pointerEvents: 'none', - }, - - '&[data-highlighted]': { - outline: 'none', - backgroundColor: theme.barSelectedColor, - color: theme.barBg, - }, -})); - -const StyledItemIndicator = styled(SelectPrimitive.ItemIndicator)(() => ({ - position: 'absolute', - left: 0, - width: '25px', - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', -})); diff --git a/code/ui/components/src/new/Select/SelectItem.tsx b/code/ui/components/src/new/Select/SelectItem.tsx deleted file mode 100644 index 6206e76095ca..000000000000 --- a/code/ui/components/src/new/Select/SelectItem.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as RadixSelect from '@radix-ui/react-select'; -import React, { forwardRef } from 'react'; -import { styled } from '@storybook/theming'; - -interface SelectItemProps { - children: React.ReactNode; - value: string; -} - -const FakeIcon = styled.div(({ theme }) => ({ - width: 12, - height: 12, - backgroundColor: theme.color.mediumdark, -})); - -export const SelectItem = forwardRef( - ({ children, ...props }, forwardedRef) => { - return ( - - {children} - - - - - ); - } -); - -SelectItem.displayName = 'SelectItem'; - -const StyledItem = styled(RadixSelect.Item)(() => ({ - fontSize: '13px', - lineHeight: 1, - color: 'blue', - borderRadius: '3px', - display: 'flex', - alignItems: 'center', - height: '25px', - padding: '0 35px 0 25px', - position: 'relative', - userSelect: 'none', - - '&[data-disabled]': { - color: 'red', - pointerEvents: 'none', - }, - - '&[data-highlighted]': { - outline: 'none', - backgroundColor: 'green', - color: 'white', - }, -})); - -const StyledItemIndicator = styled(RadixSelect.ItemIndicator)(() => ({ - position: 'absolute', - left: 0, - width: '25px', - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', -})); diff --git a/code/ui/components/src/new/Select/icons/Arrowdown.tsx b/code/ui/components/src/new/Select/icons/Arrowdown.tsx deleted file mode 100644 index d8437ca5d122..000000000000 --- a/code/ui/components/src/new/Select/icons/Arrowdown.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import type { IconProps } from './types'; -import { IconWrapper } from './IconWrapper'; - -export const Arrowdown = (allProps: IconProps) => { - const { svgProps: props, ...restProps } = allProps; - return ( - - - - } - {...restProps} - /> - ); -}; - -export default Arrowdown; diff --git a/code/ui/components/src/new/Select/icons/Arrowup.tsx b/code/ui/components/src/new/Select/icons/Arrowup.tsx deleted file mode 100644 index 24f722e410a6..000000000000 --- a/code/ui/components/src/new/Select/icons/Arrowup.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import type { IconProps } from './types'; -import { IconWrapper } from './IconWrapper'; - -export const Arrowup = (allProps: IconProps) => { - const { svgProps: props, ...restProps } = allProps; - return ( - - - - } - {...restProps} - /> - ); -}; - -export default Arrowup; diff --git a/code/ui/components/src/new/Select/icons/Check.tsx b/code/ui/components/src/new/Select/icons/Check.tsx deleted file mode 100644 index 4d5beb1531a3..000000000000 --- a/code/ui/components/src/new/Select/icons/Check.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import type { IconProps } from './types'; -import { IconWrapper } from './IconWrapper'; - -export const Check = (allProps: IconProps) => { - const { svgProps: props, ...restProps } = allProps; - return ( - - - - } - {...restProps} - /> - ); -}; - -export default Check; diff --git a/code/ui/components/src/new/Select/icons/ExpandAlt.tsx b/code/ui/components/src/new/Select/icons/ExpandAlt.tsx deleted file mode 100644 index 7f0626adcbea..000000000000 --- a/code/ui/components/src/new/Select/icons/ExpandAlt.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import type { IconProps } from './types'; -import { IconWrapper } from './IconWrapper'; - -export const ExpandAlt = (allProps: IconProps) => { - const { svgProps: props, ...restProps } = allProps; - return ( - - - - } - {...restProps} - /> - ); -}; - -export default ExpandAlt; diff --git a/code/ui/components/src/new/Select/icons/IconWrapper.tsx b/code/ui/components/src/new/Select/icons/IconWrapper.tsx deleted file mode 100644 index a4c60d6709f8..000000000000 --- a/code/ui/components/src/new/Select/icons/IconWrapper.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import type { IconProps } from './types'; - -export const IconWrapper: React.FC<{ icon: React.ReactNode } & IconProps> = ({ - icon, - color: colorProp, - size: sizeProp, - ...restProps -}) => { - const color = colorProp || 'currentColor'; - const size = sizeProp || '14px'; - - return ( - - ); -}; diff --git a/code/ui/components/src/new/Select/icons/types.ts b/code/ui/components/src/new/Select/icons/types.ts deleted file mode 100644 index 142493c5ee59..000000000000 --- a/code/ui/components/src/new/Select/icons/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type React from 'react'; - -export type IconProps = { - /** Set icon fill color from design system */ - color?: string; - /** Set width and height of icon in pixels */ - size?: number; - /** Props to pass directly to svg element */ - svgProps?: React.SVGProps; -} & Omit, 'color' | 'size'>; diff --git a/code/ui/components/src/new/Textarea/Textarea.stories.tsx b/code/ui/components/src/new/Textarea/Textarea.stories.tsx deleted file mode 100644 index b23516d8f2bd..000000000000 --- a/code/ui/components/src/new/Textarea/Textarea.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { Textarea } from './Textarea'; - -const meta: Meta = { - title: 'Textarea', - component: Textarea, - tags: ['autodocs'], -}; - -export default meta; -type Story = StoryObj; - -export const Base: Story = { - args: { - placeholder: 'Hello World', - }, -}; - -export const Filled: Story = { - args: { - ...Base.args, - value: - 'Self ocean ultimate reason faith virtues evil eternal-return moral strong superiority. Society will christian god holiest evil virtues ultimate salvation aversion victorious strong eternal-return. Ascetic pious hope selfish battle pinnacle revaluation passion ocean passion chaos reason intentions. Hope hatred pious superiority ascetic chaos ultimate mountains ideal. Superiority good abstract hatred holiest passion ultimate evil inexpedient joy. Salvation war salvation ideal decieve good law ascetic hatred transvaluation horror good. Zarathustra aversion pious truth burying evil inexpedient spirit virtues virtues hope salvation transvaluation. Enlightenment chaos ascetic salvation god holiest play marvelous oneself ocean. Enlightenment faithful dead truth insofar fearful madness love.Inexpedient war hatred superiority disgust justice superiority. Chaos justice contradict christian decieve god. Revaluation suicide hope enlightenment decrepit truth hatred insofar gains sexuality merciful ocean revaluation depths. Revaluation ocean superiority endless of evil horror. Ultimate salvation joy good good endless will horror aversion superiority depths. Evil hatred ideal pious joy reason.', - }, -}; - -export const Disabled: Story = { - args: { - ...Base.args, - disabled: true, - }, -}; diff --git a/code/ui/components/src/new/Textarea/Textarea.tsx b/code/ui/components/src/new/Textarea/Textarea.tsx deleted file mode 100644 index 15a156bf8b1f..000000000000 --- a/code/ui/components/src/new/Textarea/Textarea.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { forwardRef } from 'react'; -import { styled } from '@storybook/theming'; -import TextareaAutoResize from 'react-textarea-autosize'; - -interface TextareaProps { - disabled?: boolean; - placeholder?: string; - value?: string; -} - -export const Textarea = forwardRef(({ ...props }, ref) => { - return ; -}); - -Textarea.displayName = 'Textarea'; - -const StyledTextarea = styled(TextareaAutoResize)(({ theme }) => ({ - // resets - appearance: 'none', - border: '0 none', - margin: ' 0', - position: 'relative', - - // styles - display: 'flex', - alignItems: 'center', - width: '100%', - height: '32px', - transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out', - color: theme.input.color, - background: theme.input.background, - boxShadow: `${theme.input.border} 0 0 0 1px inset`, - borderRadius: theme.input.borderRadius, - fontSize: theme.typography.size.s2 - 1, - padding: '6px 10px', - boxSizing: 'border-box', - minHeight: 32, - lineHeight: '20px', - - '&:focus': { - boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, - outline: 'none', - }, - - '&[disabled]': { - cursor: 'not-allowed', - opacity: 0.5, - }, - - '&:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`, - }, - - '&::placeholder': { - color: theme.textMutedColor, - opacity: 1, - }, -})); diff --git a/code/ui/components/src/new/Toolbar/Toolbar.stories.tsx b/code/ui/components/src/new/Toolbar/Toolbar.stories.tsx deleted file mode 100644 index d50a8f2bab23..000000000000 --- a/code/ui/components/src/new/Toolbar/Toolbar.stories.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; - -import { Toolbar } from './Toolbar'; -import { IconButton } from '../IconButton/IconButton'; -import { Button } from '../Button/Button'; - -const meta: Meta = { - title: 'Toolbar', - component: Toolbar.Root, - tags: ['autodocs'], -}; - -export default meta; -type Story = StoryObj; - -export const Base: Story = { - args: { - hasPadding: true, - borderTop: false, - borderBottom: true, - }, - render: (_, { args }) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), -}; - -export const NoMargin: Story = { - args: { - ...Base.args, - hasPadding: false, - }, - render: Base.render, -}; - -export const BorderTop: Story = { - args: { - ...Base.args, - borderTop: true, - borderBottom: false, - }, - render: Base.render, -}; - -export const BorderBottom: Story = { - args: { - ...Base.args, - borderTop: false, - borderBottom: true, - }, - render: Base.render, -}; - -export const BorderTopBottom: Story = { - args: { - ...Base.args, - borderTop: true, - borderBottom: true, - }, - render: Base.render, -}; diff --git a/code/ui/components/src/new/Toolbar/Toolbar.tsx b/code/ui/components/src/new/Toolbar/Toolbar.tsx deleted file mode 100644 index 827011ba06fa..000000000000 --- a/code/ui/components/src/new/Toolbar/Toolbar.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import type { ComponentPropsWithoutRef, ElementRef } from 'react'; -import React, { forwardRef } from 'react'; -import * as ToolbarPrimitive from '@radix-ui/react-toolbar'; -import { styled } from '@storybook/theming'; - -interface RootProps extends ComponentPropsWithoutRef { - hasPadding?: boolean; - borderBottom?: boolean; - borderTop?: boolean; -} - -const ToolbarRoot = forwardRef, RootProps>( - ({ className, children, ...props }, ref) => ( - - {children} - - ) -); -ToolbarRoot.displayName = ToolbarPrimitive.Root.displayName; - -const ToolbarSeparator = React.forwardRef< - ElementRef, - ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -ToolbarSeparator.displayName = ToolbarPrimitive.Separator.displayName; - -const ToolbarToggleGroup = React.forwardRef< - ElementRef, - ToolbarPrimitive.ToolbarToggleGroupSingleProps | ToolbarPrimitive.ToolbarToggleGroupMultipleProps ->(({ className, ...props }, ref) => ); -ToolbarToggleGroup.displayName = ToolbarPrimitive.ToggleGroup.displayName; - -const ToolbarToggleItem = React.forwardRef< - ElementRef, - ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -ToolbarToggleItem.displayName = ToolbarPrimitive.ToggleItem.displayName; - -const StyledRoot = styled(ToolbarPrimitive.Root)( - ({ theme, hasPadding = true, borderBottom = true, borderTop = false }) => ({ - display: 'flex', - padding: hasPadding ? '0 10px' : 0, - justifyContent: 'space-between', - height: 40, - borderBottom: borderBottom ? `1px solid ${theme.appBorderColor}` : 'none', - borderTop: borderTop ? `1px solid ${theme.appBorderColor}` : 'none', - boxSizing: 'border-box', - backgroundColor: theme.barBg, - }) -); - -const StyledSeparator = styled(ToolbarPrimitive.Separator)(({ theme }) => ({ - width: 1, - height: 20, - backgroundColor: theme.appBorderColor, -})); - -const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup)({ - display: 'flex', - gap: 5, - alignItems: 'center', -}); - -const Left = styled.div({ - display: 'flex', - gap: 5, - alignItems: 'center', -}); - -const Right = styled.div({ - display: 'flex', - gap: 5, - alignItems: 'center', -}); - -export const Toolbar = { - Root: ToolbarRoot, - Left, - Right, - ToogleGroup: ToolbarToggleGroup, - ToggleItem: ToolbarToggleItem, - Separator: ToolbarSeparator, -}; diff --git a/code/ui/components/src/new/utils/types.ts b/code/ui/components/src/new/utils/types.ts deleted file mode 100644 index f5713d0b3479..000000000000 --- a/code/ui/components/src/new/utils/types.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type React from 'react'; - -export type PropsOf> = - JSX.LibraryManagedAttributes>;