): {
- popoverRef: RefObject
- wrapperRef: RefObject
- style: CSSProperties
-} => {
- const popoverRef = useRef(null)
- const wrapperRef = useRef(null)
-
- const [popoverStyle, setPopoverStyle] = useState(INITIAL_STYLE)
- const [windowWidth, windowHeight] = useWindowSize()
-
- useLayoutEffect(() => {
- if (!anchorRef.current || !popoverRef.current || !wrapperRef.current) return
-
- const anchorRect = anchorRef.current.getBoundingClientRect()
- const popoverRect = popoverRef.current.getBoundingClientRect()
- const wrapperRect = wrapperRef.current.getBoundingClientRect()
-
- const position = calculatePosition(
- anchorRect,
- popoverRect,
- wrapperRect,
- placement,
- )
- setPopoverStyle(position)
- }, [anchorRef, placement, windowWidth, windowHeight])
-
- const style = {
- ...propsStyle,
- ...popoverStyle,
- }
-
- return {
- popoverRef,
- wrapperRef,
- style,
- }
-}
diff --git a/packages/popup-menu/PopupMenu.stories.tsx b/packages/popup-menu/PopupMenu.stories.tsx
deleted file mode 100644
index 35506f16..00000000
--- a/packages/popup-menu/PopupMenu.stories.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react'
-import { useCallback, useRef, useState } from 'react'
-import { Button } from '../button/index.js'
-import { Eth, Steth, Solana } from '../icons/index.js'
-import {
- PopupMenu,
- PopupMenuItem,
- PopupMenuProps,
- PopupMenuVariant,
-} from './index.js'
-
-const getOptions = (enumObject: Record) =>
- Object.values(enumObject).filter((value) => typeof value === 'string')
-
-export default {
- component: PopupMenu,
- title: 'Dialogs/PopupMenu',
- args: {
- variant: 'default',
- },
- argTypes: {
- variant: {
- options: getOptions(PopupMenuVariant),
- control: 'inline-radio',
- },
- },
-} as Meta
-
-const usePopup = ({ onClose }: PopupMenuProps) => {
- const [state, setState] = useState(false)
- const anchorRef = useRef(null)
-
- const handleOpen = useCallback(() => {
- setState(true)
- }, [])
-
- const handleClose = useCallback(() => {
- setState(false)
- onClose?.()
- }, [onClose])
-
- return {
- state,
- anchorRef,
- handleOpen,
- handleClose,
- }
-}
-
-export const Basic: StoryFn = (props) => {
- const { state, anchorRef, handleOpen, handleClose } = usePopup(props)
-
- return (
- <>
-
- Open Menu
-
-
- Ethereum (ETH)
- Lido (STETH)
- Solana (SOL)
-
-
- )
-}
-
-export const Icons: StoryFn = (props) => {
- const { state, anchorRef, handleOpen, handleClose } = usePopup(props)
-
- return (
- <>
-
- Open Menu
-
-
-
-
- )
-}
-
-export const WithDisabled: StoryFn = (props) => {
- const { state, anchorRef, handleOpen, handleClose } = usePopup(props)
-
- return (
- <>
-
- Open Menu
-
-
- Ethereum (ETH)
- Lido (STETH)
- Solana (SOL)
-
-
- )
-}
diff --git a/packages/popup-menu/PopupMenu.tsx b/packages/popup-menu/PopupMenu.tsx
deleted file mode 100644
index 39584121..00000000
--- a/packages/popup-menu/PopupMenu.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import { useMergeRefs } from '../hooks/index.js'
-import { PopupMenuProvider } from './PopupMenuProvider.js'
-import { PopupMenuStyle } from './PopupMenuStyles.js'
-import { PopupMenuProps } from './types.js'
-import { usePopupFocus } from './usePopupFocus.js'
-
-export const PopupMenu = forwardRef(
- (
- { variant, children, onKeyDown, onMouseMove, ...rest }: PopupMenuProps,
- externalRef?: ForwardedRef,
- ) => {
- const {
- ref: controlRef,
- handleMouseMove,
- handleKeyDown,
- handleEnter,
- handleExit,
- } = usePopupFocus({ onMouseMove, onKeyDown })
- const popupRef = useMergeRefs([controlRef, externalRef])
-
- return (
-
- {children}
-
- )
- },
-)
-PopupMenu.displayName = 'PopupMenu'
diff --git a/packages/popup-menu/PopupMenuItem.tsx b/packages/popup-menu/PopupMenuItem.tsx
deleted file mode 100644
index 56df8c08..00000000
--- a/packages/popup-menu/PopupMenuItem.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import {
- PopupMenuItemStyle,
- PopupMenuItemContentStyle,
- PopupMenuItemLeftDecoratorStyle,
- PopupMenuItemRightDecoratorStyle,
-} from './PopupMenuItemStyles.js'
-import { usePopupMenuContext } from './PopupMenuProvider.js'
-import { PopupMenuItemProps } from './types.js'
-
-export const PopupMenuItem = forwardRef(
- (
- {
- active = false,
- leftDecorator,
- rightDecorator,
- children,
- ...rest
- }: PopupMenuItemProps,
- ref?: ForwardedRef,
- ) => {
- const { variant = 'default' } = usePopupMenuContext()
-
- const hasLeftDecorator = !!leftDecorator
- const hasRightDecorator = !!rightDecorator
-
- return (
-
- {hasLeftDecorator && (
-
- {leftDecorator}
-
- )}
-
-
- {children}
-
-
- {hasRightDecorator && (
-
- {rightDecorator}
-
- )}
-
- )
- },
-)
-PopupMenuItem.displayName = 'PopupMenuItem'
diff --git a/packages/popup-menu/PopupMenuItemStyles.ts b/packages/popup-menu/PopupMenuItemStyles.ts
deleted file mode 100644
index fd23d51d..00000000
--- a/packages/popup-menu/PopupMenuItemStyles.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import styled, { css } from '../utils/styled-components-wrapper.js'
-import { PopupMenuVariants } from './types.js'
-
-export const PopupMenuItemStyle = styled.button<{ $active: boolean }>`
- text-align: left;
- display: flex;
- width: 100%;
- align-items: stretch;
- box-sizing: border-box;
- font-family: inherit;
- font-weight: inherit;
- font-size: inherit;
- line-height: inherit;
- background: transparent;
- border-radius: 0;
- color: var(--lido-color-text);
- border: none;
- box-shadow: none;
- outline: none;
- cursor: pointer;
- padding: 0 15px;
- margin: 0;
- position: relative;
-
- &:disabled {
- cursor: default;
- color: var(--lido-color-textSecondary);
- }
-
- &:before {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- pointer-events: none;
- border-radius: inherit;
- opacity: ${({ $active }) => ($active ? 0.04 : 0)};
- background: var(--lido-color-popupMenuItemBgActiveHover);
- transition: opacity ${({ theme }) => theme.duration.fast} ease;
- }
-
- &:focus:not(:disabled):before {
- opacity: 0.04;
- }
-`
-
-const variants = {
- small: css`
- padding: 12px 0;
- font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
- line-height: 1.35em;
- letter-spacing: 0.04em;
- text-transform: uppercase;
- font-weight: 800;
- `,
- default: css`
- padding: 18px 0;
- font-size: ${({ theme }) => theme.fontSizesMap.xs}px;
- line-height: 1.4em;
- font-weight: 400;
- `,
-}
-
-export const PopupMenuItemContentStyle = styled.span<{
- $variant: PopupMenuVariants
-}>`
- position: relative;
- padding: 18px 0;
- overflow: hidden;
- text-overflow: ellipsis;
-
- ${({ $variant }) => variants[$variant]}
-`
-
-const decoratorCSS = css`
- flex-grow: 0;
- flex-shrink: 0;
- cursor: default;
- display: flex;
- align-items: center;
-`
-
-export const PopupMenuItemLeftDecoratorStyle = styled.span`
- ${decoratorCSS};
- padding-right: 16px;
-`
-
-export const PopupMenuItemRightDecoratorStyle = styled.span`
- ${decoratorCSS};
- padding-left: 16px;
-`
diff --git a/packages/popup-menu/PopupMenuProvider.tsx b/packages/popup-menu/PopupMenuProvider.tsx
deleted file mode 100644
index 2d7b9469..00000000
--- a/packages/popup-menu/PopupMenuProvider.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { PropsWithChildren, createContext, useContext, FC } from 'react'
-import { PopupMenuVariants } from './types.js'
-
-export interface PopupMenuContext {
- variant?: PopupMenuVariants
-}
-
-const Context = createContext({} as PopupMenuContext)
-
-export const usePopupMenuContext = (): PopupMenuContext => {
- return useContext(Context)
-}
-
-export const PopupMenuProvider: FC> = ({
- variant,
- ...rest
-}) => {
- return ({
- onMouseMove,
- onKeyDown,
-}: Pick): {
- ref: RefObject
- handleMouseMove: MouseEventHandler
- handleKeyDown: KeyboardEventHandler
- handleEnter: () => void
- handleExit: () => void
-} => {
- const ref = useRef(null)
-
- const getFocusableNodes = useCallback(() => {
- const nodes =
- ref.current?.querySelectorAll(FOCUSABLE_ELEMENTS.join(',')) ?? []
-
- return Array.from(nodes).filter(
- (node): node is HTMLElement =>
- node && node instanceof HTMLElement && node.offsetParent !== null,
- )
- }, [])
-
- const handleFocusTo = useCallback(
- (event: KeyboardEvent, offset = 1) => {
- const focusableNodes = getFocusableNodes()
-
- if (focusableNodes.length === 0) return
-
- const currentElement = document.activeElement
- const focusedItemIndex =
- currentElement instanceof HTMLElement
- ? focusableNodes.indexOf(currentElement)
- : -1
-
- const activeItemIndex = focusableNodes.findIndex(
- (node) => node.getAttribute('aria-selected') === 'true',
- )
-
- const currentIndex =
- focusedItemIndex === -1 ? activeItemIndex : focusedItemIndex
-
- let nextIndex = currentIndex + offset
- if (nextIndex < 0) nextIndex = focusableNodes.length - 1
- if (nextIndex >= focusableNodes.length) nextIndex = 0
-
- focusableNodes[nextIndex].focus()
- event.preventDefault()
- },
- [getFocusableNodes],
- )
-
- const handleMouseMove: MouseEventHandler = useCallback(
- (event) => {
- onMouseMove?.(event)
-
- const { target } = event
- if (!(target instanceof HTMLElement)) return
-
- const focusableNodes = getFocusableNodes()
- const overed = target.closest(FOCUSABLE_ELEMENTS.join(','))
-
- if (!(overed instanceof HTMLElement)) return
-
- const isNotFocusable = !focusableNodes.includes(overed)
- const isActive = overed === document.activeElement
-
- if (isActive || isNotFocusable) return
-
- overed.focus()
- },
- [getFocusableNodes, onMouseMove],
- )
-
- const handleKeyDown: KeyboardEventHandler = useCallback(
- (event) => {
- onKeyDown?.(event)
- const code = event.code ?? event.key
-
- if (code === 'Tab') event.preventDefault()
- if (code === 'ArrowDown') handleFocusTo(event, +1)
- if (code === 'ArrowUp') handleFocusTo(event, -1)
- },
- [handleFocusTo, onKeyDown],
- )
-
- const [interceptFocus, restoreFocus] = useInterceptFocus()
-
- const handleEnter = useCallback(() => {
- if (ref.current) interceptFocus(ref.current)
- }, [interceptFocus])
-
- const handleExit = useCallback(() => {
- restoreFocus()
- }, [restoreFocus])
-
- return {
- ref,
- handleMouseMove,
- handleKeyDown,
- handleEnter,
- handleExit,
- }
-}
diff --git a/packages/section/Section.stories.tsx b/packages/section/Section.stories.tsx
deleted file mode 100644
index 9b83c6d5..00000000
--- a/packages/section/Section.stories.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import styled from '../utils/styled-components-wrapper.js'
-import { StoryFn, Meta } from '@storybook/react'
-import { Block } from '../block/index.js'
-import { Section, SectionProps } from './index.js'
-
-export default {
- component: Section,
- title: 'Layout/Section',
- args: {
- title: 'Section',
- },
-} as Meta
-
-export const Basic: StoryFn = (props) => (
-
-)
-
-export const HeaderDecorator: StoryFn = (props) => (
-
- Lido link
-
- }
- >
- Example content
-
-)
-
-const H2OverrideStyled = styled.div`
- h2 {
- margin: 0 auto 0 0;
- padding: 0;
- font-weight: 800;
- font-size: 18px;
- line-height: 1.3em;
- }
-`
-
-export const HeaderStyleOverride: StoryFn = (props) => (
-
-
- Lido link
-
- }
- >
- H2 style overridden
-
-
-)
diff --git a/packages/section/Section.tsx b/packages/section/Section.tsx
deleted file mode 100644
index e4ca76fa..00000000
--- a/packages/section/Section.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import { SectionProps } from './types.js'
-import {
- SectionStyle,
- SectionHeaderStyle,
- SectionTitleStyle,
- SectionHeaderDecoratorStyle,
-} from './SectionStyles.js'
-
-export const Section = forwardRef(
- (
- { title, headerDecorator, children, ...rest }: SectionProps,
- ref?: ForwardedRef,
- ) => {
- return (
-
- {title && (
-
- {title}
- {headerDecorator && (
-
- {headerDecorator}
-
- )}
-
- )}
- {children}
-
- )
- },
-)
-Section.displayName = 'Section'
diff --git a/packages/section/SectionStyles.tsx b/packages/section/SectionStyles.tsx
deleted file mode 100644
index 5307ca61..00000000
--- a/packages/section/SectionStyles.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from '../utils/styled-components-wrapper.js'
-
-export const SectionStyle = styled.section`
- margin: ${({ theme }) => theme.spaceMap.xxl}px 0;
-`
-
-export const SectionHeaderStyle = styled.div`
- display: flex;
- align-items: flex-end;
- margin-bottom: ${({ theme }) => theme.fontSizesMap.xxs}px;
-`
-
-export const SectionTitleStyle = styled.h2`
- margin-right: auto;
- font-weight: 800;
- font-size: ${({ theme }) => theme.fontSizesMap.md}px;
- line-height: 1.3em;
-`
-
-export const SectionHeaderDecoratorStyle = styled.div`
- margin-left: ${({ theme }) => theme.spaceMap.lg}px;
- font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
- line-height: 1.5em;
-`
diff --git a/packages/section/index.ts b/packages/section/index.ts
deleted file mode 100644
index da5cf978..00000000
--- a/packages/section/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Section.js'
-export * from './types.js'
diff --git a/packages/section/types.ts b/packages/section/types.ts
deleted file mode 100644
index 2b45b4ba..00000000
--- a/packages/section/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ReactNode } from 'react'
-import { LidoComponentProps } from '../utils/index.js'
-
-export type SectionProps = LidoComponentProps<
- 'div',
- {
- title?: ReactNode
- headerDecorator?: ReactNode
- }
->
diff --git a/packages/select/Option.tsx b/packages/select/Option.tsx
deleted file mode 100644
index e3771662..00000000
--- a/packages/select/Option.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback } from 'react'
-import { PopupMenuItem } from '../popup-menu/index.js'
-import { OptionProps } from './types.js'
-
-export const Option = forwardRef(
- (
- { value, onClick, onChange, ...rest }: OptionProps,
- ref?: ForwardedRef,
- ) => {
- const handleClick = useCallback(
- (event: MouseEvent) => {
- onChange?.(value)
- onClick?.(event)
- },
- [value, onChange, onClick],
- )
-
- return ) =>
- Object.values(enumObject).filter((value) => typeof value === 'string')
-
-export default {
- component: Select,
- title: 'Controls/Select',
- args: {
- disabled: false,
- fullwidth: false,
- },
- argTypes: {
- onChange: {
- action: 'change',
- table: { disable: true },
- },
- },
-} as Meta
-
-export const Basic: StoryFn = (props) => (
-
- First
- Second
- Third
-
-)
-
-export const Labeled: StoryFn = (props) => (
-
- First
- Second
- Third
-
-)
-
-const iconsMap = {
- eth: = (props) => {
- const [value, setValue] = useState('eth')
-
- return (
- setValue(value as keyof typeof iconsMap)}
- >
-
- Ethereum (ETH)
-
-
- Lido (STETH)
-
-
- Solana (SOL)
-
-
- )
-}
-
-export const OnlyIcon: StoryFn = (props) => {
- const [value, setValue] = useState('eth')
-
- return (
- setValue(value as keyof typeof iconsMap)}
- >
-
- Ethereum (ETH)
-
-
- Lido (STETH)
-
-
- Solana (SOL)
-
-
- )
-}
-
-OnlyIcon.argTypes = {
- fullwidth: {
- table: { disable: true },
- },
-}
-
-export const WithInput: StoryFn = ({
- fullwidth,
- disabled,
- color,
- ...rest
-}) => {
- const [value, setValue] = useState('eth')
- const ref = useRef(null)
-
- return (
-
- setValue(value as keyof typeof iconsMap)}
- >
-
- Ethereum (ETH)
-
-
- Lido (STETH)
-
-
- Solana (SOL)
-
-
-
- )
-}
-
-WithInput.argTypes = {
- color: {
- options: getOptions(InputColor),
- control: 'inline-radio',
- },
-}
-
-export const Small: StoryFn = (props) => (
-
- First
- Second
- Third
-
-)
diff --git a/packages/select/Select.tsx b/packages/select/Select.tsx
deleted file mode 100644
index a8abd962..00000000
--- a/packages/select/Select.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ForwardedRef, forwardRef, useRef } from 'react'
-import { SelectWrapperStyle } from './SelectStyles.js'
-import { SelectArrow } from './SelectArrow.js'
-import { useMergeRefs } from '../hooks/index.js'
-import { PopupMenu } from '../popup-menu/index.js'
-import { SelectProps } from './types.js'
-import { useSelect } from './useSelect.js'
-import { useSelectWidth } from './useSelectWidth.js'
-
-export const Select = forwardRef(
- (
- {
- wrapperRef: externalWrapperRef,
- anchorRef: externalAnchorRef,
- arrow = 'default',
- variant,
- value,
- defaultValue,
- disabled,
- children,
- onClick,
- onKeyDown,
- onChange,
- ...rest
- }: SelectProps,
- ref?: ForwardedRef,
- ) => {
- const localAnchorRef = useRef(null)
- const wrapperRef = useMergeRefs([localAnchorRef, externalWrapperRef])
- const anchorRef = externalAnchorRef || localAnchorRef
-
- const { opened, options, title, handleClick, handleClose, handleKeyDown } =
- useSelect({
- value,
- defaultValue,
- disabled,
- onClick,
- onChange,
- onKeyDown,
- children,
- })
- const width = useSelectWidth(opened, anchorRef)
-
- return (
- <>
-
- {options}
-
-
- )
- },
-)
-Select.displayName = 'Select'
diff --git a/packages/select/SelectArrow.tsx b/packages/select/SelectArrow.tsx
deleted file mode 100644
index 69c81cf0..00000000
--- a/packages/select/SelectArrow.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC } from 'react'
-import {
- SelectArrowBigStyle,
- SelectArrowSmallStyle,
-} from './SelectArrowStyles.js'
-import { SelectArrows } from './types.js'
-
-type SelectArrowProps = {
- arrow: SelectArrows
- disabled?: boolean
- opened: boolean
- children?: never
-}
-
-export const SelectArrow: FC = ({
- arrow,
- disabled = false,
- opened,
-}) => {
- const commonProps = {
- $opened: opened,
- $disabled: disabled,
- }
-
- if (arrow === 'default') return `
- transform: rotate(${({ $opened }) => ($opened ? 180 : 0)}deg);
- transition: transform ${({ theme }) => theme.duration.norm} ease;
- opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
-`
-
-export const SelectArrowBigStyle = styled(ArrowBottom)`
- ${commonCSS};
- fill: var(--lido-color-textSecondary);
-`
-
-export const SelectArrowSmallStyle = styled.div`
- ${commonCSS};
- color: var(--lido-color-text);
-
- border: 3px solid currentColor;
- border-bottom-width: 0px;
- border-left-color: transparent;
- border-right-color: transparent;
-`
diff --git a/packages/select/SelectIcon.tsx b/packages/select/SelectIcon.tsx
deleted file mode 100644
index f238b129..00000000
--- a/packages/select/SelectIcon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import { SelectIconProps } from './types.js'
-import {
- SelectIconDecoratorStyle,
- SelectIconStyle,
-} from './SelectIconStyles.js'
-
-export const SelectIcon = forwardRef(
- (
- { icon, ...rest }: SelectIconProps,
- ref?: ForwardedRef,
- ) => {
- return (
- {icon}
- }
- ref={ref}
- />
- )
- },
-)
-SelectIcon.displayName = 'SelectIcon'
diff --git a/packages/select/SelectIconStyles.tsx b/packages/select/SelectIconStyles.tsx
deleted file mode 100644
index b007b9dc..00000000
--- a/packages/select/SelectIconStyles.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from '../utils/styled-components-wrapper.js'
-import { Select } from './Select.js'
-
-export const SelectIconStyle = styled(Select)`
- input {
- width: 0;
- }
-`
-
-export const SelectIconDecoratorStyle = styled.span`
- margin-right: -24px;
- display: flex;
- align-items: center;
- justify-content: center;
- align-self: stretch;
- justify-self: stretch;
-`
diff --git a/packages/select/SelectStyles.ts b/packages/select/SelectStyles.ts
deleted file mode 100644
index 5fff3562..00000000
--- a/packages/select/SelectStyles.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled, { css } from '../utils/styled-components-wrapper.js'
-import { Input } from '../input/index.js'
-import { SelectProps } from './types.js'
-
-const smallCSS = css`
- input {
- font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
- line-height: 1.7em;
- letter-spacing: 0.04em;
- text-transform: uppercase;
- font-weight: 800;
- }
-`
-
-export const SelectWrapperStyle = styled(Input)`
- &,
- input {
- user-select: none;
- cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-
- &::selection {
- background: transparent;
- }
- }
-
- input {
- appearance: none;
- overflow: hidden;
- }
-
- ${({ variant }) => (variant === 'small' ? smallCSS : '')}
-`
diff --git a/packages/select/index.ts b/packages/select/index.ts
deleted file mode 100644
index b51fd150..00000000
--- a/packages/select/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './Select.js'
-export * from './SelectIcon.js'
-export * from './Option.js'
-export * from './types.js'
diff --git a/packages/select/types.ts b/packages/select/types.ts
deleted file mode 100644
index dc892c11..00000000
--- a/packages/select/types.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ReactNode, RefObject } from 'react'
-import { InputProps } from '../input/index.js'
-import { PopupMenuItemProps } from '../popup-menu/index.js'
-export type { Theme } from '../theme/index.js'
-
-export type OptionValue = string | number
-export type SelectHandleChange = (value: OptionValue) => void
-
-export enum SelectArrow {
- small,
- default,
-}
-export type SelectArrows = keyof typeof SelectArrow
-
-export type SelectProps = Omit<
- InputProps,
- 'type' | 'readonly' | 'onChange' | 'value' | 'defaultValue'
-> & {
- anchorRef?: RefObject
- arrow?: SelectArrows
- value?: OptionValue
- defaultValue?: OptionValue
- onChange: SelectHandleChange
-}
-
-export type SelectIconProps = Omit<
- SelectProps,
- 'leftDecorator' | 'fullwidth' | 'arrow'
-> & {
- icon: ReactNode
-}
-
-export type OptionProps = Omit & {
- value: OptionValue
- // can't be ReactNode, since it will be stringified later
- children: string
- onChange?: SelectHandleChange
-}
diff --git a/packages/select/useSelect.ts b/packages/select/useSelect.ts
deleted file mode 100644
index 49172430..00000000
--- a/packages/select/useSelect.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import {
- useCallback,
- useMemo,
- useState,
- Children,
- cloneElement,
- useEffect,
- MouseEvent,
- KeyboardEvent,
- ReactNode,
-} from 'react'
-import { isElement } from 'react-is'
-import { SelectProps, SelectHandleChange, OptionValue } from './types.js'
-
-type SelectHandleClick = (event: MouseEvent) => void
-
-type SelectHandleKeyDown = (event: KeyboardEvent) => void
-
-type SelectHandleClose = () => void
-
-type UseSelect = (
- props: Pick<
- SelectProps,
- | 'disabled'
- | 'onClick'
- | 'onChange'
- | 'onKeyDown'
- | 'children'
- | 'value'
- | 'defaultValue'
- >,
-) => {
- handleClick: SelectHandleClick
- handleClose: SelectHandleClose
- handleKeyDown: SelectHandleKeyDown
- opened: boolean
- title: string
- options: ReactNode
-}
-
-export const useSelect: UseSelect = ({
- value,
- defaultValue,
- disabled,
- onClick,
- onChange,
- onKeyDown,
- children,
-}) => {
- const [opened, setOpened] = useState(false)
-
- const handleOpen = useCallback(() => {
- if (disabled) return
- setOpened(true)
- }, [disabled])
-
- const handleClick: SelectHandleClick = useCallback(
- (event) => {
- handleOpen()
- onClick?.(event)
- },
- [handleOpen, onClick],
- )
-
- const handleClose = useCallback(() => {
- setOpened(false)
- }, [])
-
- const handleChange: SelectHandleChange = useCallback(
- (value) => {
- handleClose()
- setLocalValue(value)
- onChange?.(value)
- },
- [handleClose, onChange],
- )
-
- const handleKeyDown: SelectHandleKeyDown = useCallback(
- (event) => {
- if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
- event.preventDefault()
- handleOpen()
- }
- onKeyDown?.(event)
- },
- [handleOpen, onKeyDown],
- )
-
- const outerValue = value ?? defaultValue ?? null
- const [localValue, setLocalValue] = useState(outerValue)
-
- useEffect(() => {
- setLocalValue(outerValue)
- }, [outerValue])
-
- const { values, options } = useMemo(() => {
- const values = new Map()
-
- const options: ReactNode = Children.map(children, (child) => {
- if (!isElement(child)) return child
-
- const value = child.props.value
- const title = String(child.props.children)
-
- if (values.get(value) === undefined) {
- values.set(value, title)
- }
-
- return cloneElement(child, {
- active: value === localValue,
- onChange: handleChange,
- })
- })
-
- return { values, options }
- }, [localValue, children, handleChange])
-
- const selectedTitle = localValue != null ? values.get(localValue) : null
- const defaultTitle = String(localValue ?? '')
- const title = selectedTitle ?? defaultTitle
-
- return {
- handleClick,
- handleClose,
- handleKeyDown,
- opened,
- title,
- options,
- }
-}
diff --git a/packages/select/useSelectWidth.ts b/packages/select/useSelectWidth.ts
deleted file mode 100644
index cbeb2ce6..00000000
--- a/packages/select/useSelectWidth.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useCallback, useState, useEffect, RefObject } from 'react'
-
-export const useSelectWidth = (
- opened: boolean,
- anchorRef: RefObject,
-): number | undefined => {
- const [width, setWidth] = useState()
-
- const updateWidth = useCallback(() => {
- if (!anchorRef.current) return
- const rect = anchorRef.current.getBoundingClientRect()
-
- setWidth(rect.width)
- }, [anchorRef])
-
- useEffect(() => {
- if (!opened || !anchorRef.current) return
-
- const observer = new ResizeObserver(updateWidth)
- observer.observe(anchorRef.current)
-
- return (): void => observer.disconnect()
- }, [opened, anchorRef, updateWidth])
-
- return width
-}
diff --git a/packages/service-page/ServicePage.stories.tsx b/packages/service-page/ServicePage.stories.tsx
deleted file mode 100644
index fd3b5ac7..00000000
--- a/packages/service-page/ServicePage.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react'
-import { ServicePage, ServicePageProps } from './index.js'
-
-export default {
- component: ServicePage,
- title: 'Layout/ServicePage',
- args: {
- title: '404',
- children: 'Page Not Found',
- },
-} as Meta
-
-export const Basic: StoryFn = (props) => (
- ,
- ) => {
- return (
-
-
- {title}
- {children}
-
-
- )
- },
-)
-ServicePage.displayName = 'ServicePage'
diff --git a/packages/service-page/ServicePageStyles.tsx b/packages/service-page/ServicePageStyles.tsx
deleted file mode 100644
index 0a51d31d..00000000
--- a/packages/service-page/ServicePageStyles.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from '../utils/styled-components-wrapper.js'
-
-export const ServicePageStyle = styled.div`
- height: 100vh;
- display: flex;
- align-items: center;
- text-align: center;
-`
-
-export const ServicePageInsideStyle = styled.div`
- box-sizing: border-box;
- margin: 0 auto;
- min-width: 320px;
- width: 100%;
- padding: 0 32px;
- max-width: 560px;
-`
diff --git a/packages/service-page/index.ts b/packages/service-page/index.ts
deleted file mode 100644
index 829def86..00000000
--- a/packages/service-page/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './ServicePage.js'
-export * from './types.js'
diff --git a/packages/service-page/types.ts b/packages/service-page/types.ts
deleted file mode 100644
index 46d014b1..00000000
--- a/packages/service-page/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ReactNode } from 'react'
-import { LidoComponentProps } from '../utils/index.js'
-
-export type ServicePageProps = LidoComponentProps<
- 'div',
- {
- title: ReactNode
- }
->
diff --git a/packages/stack/HStack.tsx b/packages/stack/HStack.tsx
deleted file mode 100644
index 36143272..00000000
--- a/packages/stack/HStack.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import { HStackProps } from './types.js'
-import { Stack } from './Stack.js'
-
-export const HStack = forwardRef(
- (
- { reverse = false, ...rest }: HStackProps,
- ref?: ForwardedRef,
- ) => {
- const direction = reverse ? 'row-reverse' : 'row'
-
- return ) =>
- Object.values(enumObject).filter((value) => typeof value === 'string')
-
-export default {
- component: Stack,
- title: 'Layout/Stack',
- args: {
- align: 'flex-start',
- justify: 'flex-start',
- wrap: 'wrap',
- spacing: 'sm',
- },
- argTypes: {
- align: {
- options: getOptions(StackAlign),
- control: 'select',
- },
- justify: {
- options: getOptions(StackJustify),
- control: 'select',
- },
- wrap: {
- options: getOptions(StackWrap),
- control: 'inline-radio',
- },
- spacing: {
- options: [undefined, ...getOptions(StackSpacing)],
- control: 'inline-radio',
- },
- },
-} as Meta
-
-export const Basic: StoryFn = (props) => (
-
-
- First
-
-
-
- First
-
-
-
-
- First
-
-
-
-)
-
-Basic.args = {
- direction: 'row',
-}
-
-Basic.argTypes = {
- direction: {
- options: getOptions(StackDirection),
- control: 'inline-radio',
- },
-}
-
-export const Horizontal: StoryFn = (props) => (
-
-
- First
-
-
-
- First
-
-
-
-
- First
-
-
-
-)
-
-Horizontal.args = { reverse: false }
-
-export const Vertical: StoryFn = (props) => (
-
-
- First
-
-
-
- First
-
-
-
-
- First
-
-
-
-)
-
-Vertical.args = { reverse: false }
-
-export const Grid: StoryFn = (props) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-)
-
-Grid.args = { reverse: false }
diff --git a/packages/stack/Stack.tsx b/packages/stack/Stack.tsx
deleted file mode 100644
index a4c88777..00000000
--- a/packages/stack/Stack.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import { StackProvider } from './StackProvider.js'
-import { StackStyle } from './StackStyles.js'
-import { StackProps } from './types.js'
-
-export const Stack = forwardRef(
- (
- {
- align = 'flex-start',
- justify = 'flex-start',
- direction = 'row',
- wrap = 'wrap',
- spacing,
- children,
- ...rest
- }: StackProps,
- ref?: ForwardedRef,
- ) => {
- return (
-
- {children}
-
- )
- },
-)
-Stack.displayName = 'Stack'
diff --git a/packages/stack/StackItem.tsx b/packages/stack/StackItem.tsx
deleted file mode 100644
index 0ac29d6b..00000000
--- a/packages/stack/StackItem.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import { StackItemStyle } from './StackItemStyles.js'
-import { useStackContext } from './StackProvider.js'
-import { StackItemProps } from './types.js'
-
-export const StackItem = forwardRef(
- (
- { grow = 0, shrink = 0, basis = 'auto', ...rest }: StackItemProps,
- ref?: ForwardedRef,
- ) => {
- const { spacing } = useStackContext()
-
- return (
- > = ({
- spacing,
- ...rest
-}) => {
- return ,
- ) => {
- const direction = reverse ? 'column-reverse' : 'column'
-
- return
-
-export type VStackProps = {
- reverse?: boolean
-} & Omit
diff --git a/packages/styled-system/index.ts b/packages/styled-system/index.ts
deleted file mode 100644
index ed7ba279..00000000
--- a/packages/styled-system/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as withStyledSystem } from './withStyledSystem.js'
-export * from './types.js'
diff --git a/packages/styled-system/types.ts b/packages/styled-system/types.ts
deleted file mode 100644
index f4db82e1..00000000
--- a/packages/styled-system/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
- SpaceProps,
- ColorProps,
- TypographyProps,
- LayoutProps,
- FlexboxProps,
- GridProps,
- BackgroundProps,
- BordersProps,
- PositionProps,
- ShadowProps,
-} from 'styled-system'
-
-export interface StyledSystemProps
- extends SpaceProps,
- ColorProps,
- TypographyProps,
- LayoutProps,
- FlexboxProps,
- GridProps,
- BackgroundProps,
- BordersProps,
- PositionProps,
- ShadowProps {}
diff --git a/packages/styled-system/withStyledSystem.stories.tsx b/packages/styled-system/withStyledSystem.stories.tsx
deleted file mode 100644
index d3d4d475..00000000
--- a/packages/styled-system/withStyledSystem.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { StoryFn } from '@storybook/react'
-import styled, {
- DefaultTheme,
- StyledComponentProps,
-} from '../utils/styled-components-wrapper.js'
-import { StyledSystemProps, withStyledSystem } from './index.js'
-
-const StyledDiv = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100px;
- height: 100px;
- border: 2px solid;
-`
-const Example = withStyledSystem(StyledDiv)
-Example.displayName = 'Example'
-
-type Props = StyledComponentProps<'div', DefaultTheme, StyledSystemProps, never>
-
-export default {
- title: 'Styled System/HOC',
- args: { children: 'Example' },
-}
-
-export const Base: StoryFn = (props) => = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
- ,
- ref?: ForwardedRef,
- ) {
- return
- }),
-)
-
-const testComponent = (
- Component: typeof StyledComponent | typeof RegularComponent,
-) => {
- it('render children', () => {
- const { container } = render(Example )
- expect(container.firstElementChild?.textContent).toBe('Example')
- })
-
- it('convert props to styles', () => {
- const { container } = render(
- ,
- )
- const element = container.firstElementChild?.firstElementChild
- expect(element).toHaveStyleRule('color', theme.colors.primary)
- expect(element).toHaveStyleRule('font-size', `${theme.fontSizes[1]}px`)
- expect(element).toHaveStyleRule('margin', `${theme.space[2]}px`)
- })
-
- it('use theme breakpoints', () => {
- const theme = themeDefault
- const { container } = render(
-
- ,
- )
- const element = container.firstElementChild?.firstElementChild
-
- expect(element).toHaveStyleRule('margin', `${theme.space[1]}px`)
- expect(element).toHaveStyleRule('margin', `${theme.space[2]}px`, {
- media: `screen and (min-width:${theme.breakpoints[0]})`,
- })
- })
-
- it('forward ref', () => {
- const ref = createRef()
- const { container } = render( = Omit &
- StyledSystemProps
-
-function withStyledSystem<
- C extends AnyStyledComponent,
- T extends object = DefaultTheme,
- O extends object = {},
- A extends keyof any = never,
->(
- Component: C,
-): StyledComponent<
- StyledComponentInnerComponent,
- T,
- MergePropsWithSS>,
- A | StyledComponentInnerAttrs
->
-
-function withStyledSystem<
- C extends keyof JSX.IntrinsicElements | ComponentType,
- T extends object = DefaultTheme,
- O extends object = {},
- A extends keyof any = never,
->(Component: C): StyledComponent, A>
-
-function withStyledSystem(Component: any) {
- return styled(Component).withConfig<{}>({
- shouldForwardProp,
- })(
- compose(
- space,
- color,
- typography,
- layout,
- flexbox,
- grid,
- background,
- border,
- position,
- shadow,
- ),
- )
-}
-
-export default withStyledSystem
diff --git a/packages/table/Table.stories.tsx b/packages/table/Table.stories.tsx
deleted file mode 100644
index fba63c8e..00000000
--- a/packages/table/Table.stories.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useState } from 'react'
-import { StoryFn, Meta } from '@storybook/react'
-import { Light, Eth } from '../icons/index.js'
-import {
- Table,
- Thead,
- Tbody,
- Tr,
- Td,
- Th,
- TdProps,
- TableTextColor,
- TableAlign,
- ThSortDirs,
- TrHighlight,
-} from './index.js'
-
-const getOptions = (enumObject: Record) =>
- Object.values(enumObject).filter((value) => typeof value === 'string')
-
-export default {
- component: Table,
- title: 'Table/Table',
- parameters: {
- layout: 'centered',
- },
- args: {
- textColor: 'default',
- align: 'left',
- stickyHeader: true,
- showHighlight: false,
- },
- argTypes: {
- textColor: {
- options: getOptions(TableTextColor),
- control: 'inline-radio',
- },
- align: {
- options: getOptions(TableAlign),
- control: 'inline-radio',
- },
- },
-} as Meta
-
-export const Base: StoryFn<
- TdProps & { showHighlight: boolean; stickyHeader: boolean }
-> = (props, options) => {
- const [sortDir, setSortDir] = useState('ASC')
-
- const isShowTrHighlights = options.args.showHighlight
-
- return (
-
-
-
-
- setSortDir(sortDir === 'ASC' ? 'DESC' : 'ASC')}
- sortDir={sortDir}
- >
- Date | Type
-
- Change
- Balance
- APR
-
-
-
-
-
- {Array(5)
- .fill(null)
- .map((item, index) => (
-
- void 0}>
- 01-13-2021
-
-
- + 0.000007452
-
-
- 10.00038581
-
- 2.4%
-
-
-
- ))}
-
-
-
) => {
- return ) => {
- return ,
- ) => {
- return (
-
- {children}
-
- )
- },
-)
-Td.displayName = 'Td'
diff --git a/packages/table/Tfoot.tsx b/packages/table/Tfoot.tsx
deleted file mode 100644
index 853105d1..00000000
--- a/packages/table/Tfoot.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import { TfootProps } from './types.js'
-import { TfootStyle } from './styles.js'
-
-export const Tfoot = forwardRef(
- (props: TfootProps, ref?: ForwardedRef) => {
- return ,
- ) => {
- return (
-
-
- {children}
- {sortDir === 'ASC' &&
-
- )
- },
-)
-Th.displayName = 'Th'
diff --git a/packages/table/Thead.tsx b/packages/table/Thead.tsx
deleted file mode 100644
index be4f601f..00000000
--- a/packages/table/Thead.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react'
-import { TheadProps } from './types.js'
-import { TheadStyle } from './styles.js'
-
-export const Thead = forwardRef(
- (
- { sticky = false, ...rest }: TheadProps,
- ref?: ForwardedRef,
- ) => {
- return ,
- ) => {
- return (
- `
- border-top: 1px solid var(--lido-color-borderLight);
- border-bottom: 1px solid var(--lido-color-borderLight);
-
- ${({ $sticky }) => $sticky && TheadStickyStyle}
-
- & > tr::before,
- & > tr::after {
- content: '';
- display: table-cell;
- width: 32px;
-
- border-top: 1px solid var(--lido-color-borderLight);
- border-bottom: 1px solid var(--lido-color-borderLight);
- }
-`
-
-export const TfootStyle = styled.tfoot``
-
-const TrColors = {
- negative: css`
- background: rgba(var(--lido-rgb-error), 0.07);
- `,
- positive: css`
- background: rgba(var(--lido-rgb-success), 0.07);
- `,
- warning: css`
- background: rgba(var(--lido-rgb-warning), 0.07);
- `,
-}
-
-const TrInteractive = css`
- cursor: pointer;
-`
-
-export const TrStyle = styled.tr