From b37a6d81f0545ed4298916c7708848ae02ece93d Mon Sep 17 00:00:00 2001 From: Alex Mantsurov Date: Tue, 5 Nov 2024 15:18:15 +0300 Subject: [PATCH 01/13] feat: removed old components --- packages/accordion/Accordion.stories.tsx | 80 --- packages/accordion/Accordion.tsx | 43 -- packages/accordion/AccordionStyles.tsx | 71 --- packages/accordion/index.ts | 2 - packages/accordion/types.ts | 13 - packages/accordion/useExpanded.ts | 47 -- packages/address/Address.stories.tsx | 18 - packages/address/Address.tsx | 25 - packages/address/AddressStyles.tsx | 19 - packages/address/index.ts | 3 - packages/address/trimAddress.ts | 9 - packages/address/types.ts | 9 - .../addressBadge/AddressBadge.stories.tsx | 24 - packages/addressBadge/AddressBadge.tsx | 28 - packages/addressBadge/AddressBadgeStyles.tsx | 18 - packages/addressBadge/index.ts | 2 - packages/addressBadge/types.ts | 10 - packages/block/Block.stories.tsx | 28 - packages/block/Block.tsx | 26 - packages/block/BlockStyles.tsx | 56 -- packages/block/index.ts | 2 - packages/block/types.tsx | 24 - packages/box/Box.stories.tsx | 28 - packages/box/Box.tsx | 4 - packages/box/index.ts | 1 - packages/button/Button.stories.tsx | 60 -- packages/button/Button.test.tsx | 15 - packages/button/Button.tsx | 60 -- packages/button/ButtonIcon.tsx | 27 - packages/button/ButtonIconStyles.tsx | 27 - packages/button/ButtonStyles.tsx | 240 -------- .../button/__snapshots__/Button.test.tsx.snap | 66 --- packages/button/index.ts | 3 - packages/button/types.tsx | 47 -- packages/button/useRipple.tsx | 46 -- packages/checkbox/Checkbox.stories.tsx | 40 -- packages/checkbox/Checkbox.tsx | 48 -- packages/checkbox/CheckboxStyles.tsx | 68 --- packages/checkbox/index.ts | 2 - packages/checkbox/types.ts | 12 - packages/chip/Chip.stories.tsx | 28 - packages/chip/Chip.tsx | 23 - packages/chip/ChipStyles.tsx | 41 -- packages/chip/index.ts | 2 - packages/chip/types.ts | 20 - packages/container/Container.stories.tsx | 61 -- packages/container/Container.tsx | 13 - packages/container/ContainerStyles.tsx | 28 - packages/container/index.ts | 2 - packages/container/types.tsx | 16 - .../content-theme/content-theme.stories.tsx | 20 - packages/content-theme/content-theme.tsx | 16 - packages/content-theme/index.ts | 2 - packages/content-theme/styles.tsx | 9 - packages/content-theme/types.ts | 10 - .../cookie-theme-toggler.stories.tsx | 33 -- .../cookie-theme-toggler.tsx | 21 - packages/cookie-theme-toggler/index.ts | 1 - packages/cookie-theme-toggler/styles.tsx | 39 -- packages/cookies-tooltip/constants.ts | 3 - .../cookies-tooltip.stories.tsx | 28 - packages/cookies-tooltip/cookies-tooltip.tsx | 96 ---- packages/cookies-tooltip/index.ts | 2 - packages/cookies-tooltip/styles.tsx | 118 ---- packages/cookies-tooltip/utils.ts | 50 -- packages/data-table/DataTable.stories.tsx | 65 --- packages/data-table/DataTable.tsx | 51 -- packages/data-table/DataTableStyles.tsx | 39 -- packages/data-table/index.ts | 2 - packages/data-table/types.tsx | 15 - packages/divider/Divider.stories.tsx | 46 -- packages/divider/Divider.tsx | 13 - packages/divider/DividerStyles.tsx | 40 -- packages/divider/index.ts | 2 - packages/divider/types.tsx | 26 - packages/heading/Heading.stories.tsx | 49 -- packages/heading/Heading.tsx | 43 -- packages/heading/HeadingStyles.tsx | 58 -- packages/heading/index.tsx | 2 - packages/heading/types.ts | 30 - packages/identicon/Identicon.stories.tsx | 48 -- packages/identicon/Identicon.tsx | 33 -- packages/identicon/IdenticonBadge.tsx | 39 -- packages/identicon/IdenticonStyles.tsx | 34 -- packages/identicon/declarations.d.ts | 11 - packages/identicon/index.ts | 3 - packages/identicon/types.ts | 24 - packages/input/Input.stories.tsx | 300 ---------- packages/input/Input.tsx | 114 ---- packages/input/InputGroup.stories.tsx | 17 - packages/input/InputGroup.tsx | 38 -- packages/input/InputGroupStyles.ts | 32 -- packages/input/InputStyles.ts | 315 ----------- packages/input/LabelStyles.ts | 60 -- packages/input/OptionsSlider.stories.tsx | 36 -- packages/input/OptionsSlider.tsx | 43 -- packages/input/SliderInput.stories.tsx | 34 -- packages/input/SliderInput.tsx | 64 --- packages/input/SliderInputStyles.ts | 150 ----- packages/input/Textarea.stories.tsx | 34 -- packages/input/Textarea.tsx | 94 ---- packages/input/index.ts | 6 - packages/input/types.ts | 107 ---- packages/lido-logo/LidoLogo.stories.tsx | 9 - packages/lido-logo/LidoLogo.tsx | 31 -- packages/lido-logo/LidoLogoStyles.tsx | 6 - packages/lido-logo/index.ts | 1 - packages/lido-logo/types.tsx | 4 - packages/link/Link.stories.tsx | 19 - packages/link/Link.tsx | 12 - packages/link/LinkStyles.tsx | 19 - packages/link/index.ts | 2 - packages/link/types.ts | 4 - packages/loaders/InlineLoader.stories.tsx | 53 -- packages/loaders/InlineLoader.tsx | 19 - packages/loaders/InlineLoaderStyles.tsx | 42 -- packages/loaders/Loader.stories.tsx | 28 - packages/loaders/Loader.tsx | 38 -- packages/loaders/LoaderStyles.tsx | 49 -- packages/loaders/index.ts | 3 - packages/loaders/types.ts | 39 -- packages/main-menu/MainMenu.stories.tsx | 34 -- packages/main-menu/MainMenu.tsx | 17 - packages/main-menu/MainMenuItem.tsx | 18 - packages/main-menu/MainMenuItemStyles.tsx | 40 -- packages/main-menu/MainMenuStyles.tsx | 38 -- packages/main-menu/index.ts | 3 - packages/main-menu/types.ts | 11 - packages/modal/Modal.stories.tsx | 341 ------------ packages/modal/Modal.tsx | 80 --- packages/modal/ModalButton.tsx | 62 --- packages/modal/ModalButtonStyles.tsx | 25 - packages/modal/ModalExtra.tsx | 10 - packages/modal/ModalExtraStyles.tsx | 18 - packages/modal/ModalOverlay.tsx | 64 --- packages/modal/ModalOverlayStyles.tsx | 54 -- packages/modal/ModalStyles.tsx | 145 ----- packages/modal/constants.ts | 13 - packages/modal/index.ts | 5 - packages/modal/types.tsx | 33 -- packages/modal/useModalClose.ts | 29 - packages/modal/useModalFocus.ts | 65 --- packages/pagination/Pagination.stories.tsx | 21 - packages/pagination/Pagination.tsx | 108 ---- .../pagination/PaginationItem.stories.tsx | 26 - packages/pagination/PaginationItem.tsx | 15 - packages/pagination/PaginationItemStyles.tsx | 52 -- packages/pagination/getShowingPages.test.ts | 221 -------- packages/pagination/getShowingPages.ts | 120 ---- packages/pagination/index.ts | 3 - packages/pagination/types.ts | 29 - packages/popover/Popover.stories.tsx | 73 --- packages/popover/Popover.tsx | 27 - packages/popover/PopoverRoot.tsx | 63 --- packages/popover/PopoverRootStyles.ts | 58 -- packages/popover/PopoverStyles.ts | 35 -- packages/popover/calculatePosition.ts | 76 --- packages/popover/constants.ts | 11 - packages/popover/index.ts | 3 - packages/popover/types.ts | 55 -- packages/popover/usePopoverPosition.ts | 57 -- packages/popup-menu/PopupMenu.stories.tsx | 123 ---- packages/popup-menu/PopupMenu.tsx | 38 -- packages/popup-menu/PopupMenuItem.tsx | 54 -- packages/popup-menu/PopupMenuItemStyles.ts | 93 ---- packages/popup-menu/PopupMenuProvider.tsx | 19 - packages/popup-menu/PopupMenuStyles.ts | 27 - packages/popup-menu/constants.ts | 5 - packages/popup-menu/index.ts | 3 - packages/popup-menu/types.ts | 23 - packages/popup-menu/usePopupFocus.ts | 115 ---- packages/section/Section.stories.tsx | 56 -- packages/section/Section.tsx | 32 -- packages/section/SectionStyles.tsx | 24 - packages/section/index.ts | 2 - packages/section/types.ts | 10 - packages/select/Option.tsx | 21 - packages/select/Select.stories.tsx | 152 ----- packages/select/Select.tsx | 73 --- packages/select/SelectArrow.tsx | 29 - packages/select/SelectArrowStyles.ts | 28 - packages/select/SelectIcon.tsx | 26 - packages/select/SelectIconStyles.tsx | 17 - packages/select/SelectStyles.ts | 32 -- packages/select/index.ts | 4 - packages/select/types.ts | 38 -- packages/select/useSelect.ts | 130 ----- packages/select/useSelectWidth.ts | 26 - packages/service-page/ServicePage.stories.tsx | 15 - packages/service-page/ServicePage.tsx | 25 - packages/service-page/ServicePageStyles.tsx | 17 - packages/service-page/index.ts | 2 - packages/service-page/types.ts | 9 - packages/stack/HStack.tsx | 15 - packages/stack/Stack.stories.tsx | 160 ------ packages/stack/Stack.tsx | 34 -- packages/stack/StackItem.tsx | 25 - packages/stack/StackItemStyles.tsx | 18 - packages/stack/StackProvider.tsx | 19 - packages/stack/StackStyles.tsx | 25 - packages/stack/VStack.tsx | 15 - packages/stack/index.ts | 5 - packages/stack/types.tsx | 77 --- packages/table/Table.stories.tsx | 106 ---- packages/table/Table.tsx | 10 - packages/table/Tbody.tsx | 10 - packages/table/Td.tsx | 32 -- packages/table/Tfoot.tsx | 10 - packages/table/Th.tsx | 32 -- packages/table/Thead.tsx | 13 - packages/table/Tr.tsx | 20 - packages/table/index.ts | 8 - packages/table/styles.tsx | 210 ------- packages/table/types.tsx | 71 --- packages/text/Text.stories.tsx | 34 -- packages/text/Text.tsx | 27 - packages/text/TextStyles.tsx | 75 --- packages/text/index.ts | 2 - packages/text/types.ts | 36 -- packages/toast/Toast.stories.tsx | 108 ---- packages/toast/ToastContainer.tsx | 526 ------------------ packages/toast/ToastDefault.tsx | 6 - packages/toast/ToastError.tsx | 6 - packages/toast/ToastInfo.tsx | 6 - packages/toast/ToastPending.tsx | 18 - packages/toast/ToastPendingStyles.tsx | 18 - packages/toast/ToastSuccess.tsx | 13 - packages/toast/index.ts | 8 - packages/toast/toastsDefaultOptions.ts | 31 -- packages/toast/types.ts | 3 - packages/tooltip/TooltipStyles.ts | 17 - packages/tooltip/types.ts | 11 - 232 files changed, 9814 deletions(-) delete mode 100644 packages/accordion/Accordion.stories.tsx delete mode 100644 packages/accordion/Accordion.tsx delete mode 100644 packages/accordion/AccordionStyles.tsx delete mode 100644 packages/accordion/index.ts delete mode 100644 packages/accordion/types.ts delete mode 100644 packages/accordion/useExpanded.ts delete mode 100644 packages/address/Address.stories.tsx delete mode 100644 packages/address/Address.tsx delete mode 100644 packages/address/AddressStyles.tsx delete mode 100644 packages/address/index.ts delete mode 100644 packages/address/trimAddress.ts delete mode 100644 packages/address/types.ts delete mode 100644 packages/addressBadge/AddressBadge.stories.tsx delete mode 100644 packages/addressBadge/AddressBadge.tsx delete mode 100644 packages/addressBadge/AddressBadgeStyles.tsx delete mode 100644 packages/addressBadge/index.ts delete mode 100644 packages/addressBadge/types.ts delete mode 100644 packages/block/Block.stories.tsx delete mode 100644 packages/block/Block.tsx delete mode 100644 packages/block/BlockStyles.tsx delete mode 100644 packages/block/index.ts delete mode 100644 packages/block/types.tsx delete mode 100644 packages/box/Box.stories.tsx delete mode 100644 packages/box/Box.tsx delete mode 100644 packages/box/index.ts delete mode 100644 packages/button/Button.stories.tsx delete mode 100644 packages/button/Button.test.tsx delete mode 100644 packages/button/Button.tsx delete mode 100644 packages/button/ButtonIcon.tsx delete mode 100644 packages/button/ButtonIconStyles.tsx delete mode 100644 packages/button/ButtonStyles.tsx delete mode 100644 packages/button/__snapshots__/Button.test.tsx.snap delete mode 100644 packages/button/index.ts delete mode 100644 packages/button/types.tsx delete mode 100644 packages/button/useRipple.tsx delete mode 100644 packages/checkbox/Checkbox.stories.tsx delete mode 100644 packages/checkbox/Checkbox.tsx delete mode 100644 packages/checkbox/CheckboxStyles.tsx delete mode 100644 packages/checkbox/index.ts delete mode 100644 packages/checkbox/types.ts delete mode 100644 packages/chip/Chip.stories.tsx delete mode 100644 packages/chip/Chip.tsx delete mode 100644 packages/chip/ChipStyles.tsx delete mode 100644 packages/chip/index.ts delete mode 100644 packages/chip/types.ts delete mode 100644 packages/container/Container.stories.tsx delete mode 100644 packages/container/Container.tsx delete mode 100644 packages/container/ContainerStyles.tsx delete mode 100644 packages/container/index.ts delete mode 100644 packages/container/types.tsx delete mode 100644 packages/content-theme/content-theme.stories.tsx delete mode 100644 packages/content-theme/content-theme.tsx delete mode 100644 packages/content-theme/index.ts delete mode 100644 packages/content-theme/styles.tsx delete mode 100644 packages/content-theme/types.ts delete mode 100644 packages/cookie-theme-toggler/cookie-theme-toggler.stories.tsx delete mode 100644 packages/cookie-theme-toggler/cookie-theme-toggler.tsx delete mode 100644 packages/cookie-theme-toggler/index.ts delete mode 100644 packages/cookie-theme-toggler/styles.tsx delete mode 100644 packages/cookies-tooltip/constants.ts delete mode 100644 packages/cookies-tooltip/cookies-tooltip.stories.tsx delete mode 100644 packages/cookies-tooltip/cookies-tooltip.tsx delete mode 100644 packages/cookies-tooltip/index.ts delete mode 100644 packages/cookies-tooltip/styles.tsx delete mode 100644 packages/cookies-tooltip/utils.ts delete mode 100644 packages/data-table/DataTable.stories.tsx delete mode 100644 packages/data-table/DataTable.tsx delete mode 100644 packages/data-table/DataTableStyles.tsx delete mode 100644 packages/data-table/index.ts delete mode 100644 packages/data-table/types.tsx delete mode 100644 packages/divider/Divider.stories.tsx delete mode 100644 packages/divider/Divider.tsx delete mode 100644 packages/divider/DividerStyles.tsx delete mode 100644 packages/divider/index.ts delete mode 100644 packages/divider/types.tsx delete mode 100644 packages/heading/Heading.stories.tsx delete mode 100644 packages/heading/Heading.tsx delete mode 100644 packages/heading/HeadingStyles.tsx delete mode 100644 packages/heading/index.tsx delete mode 100644 packages/heading/types.ts delete mode 100644 packages/identicon/Identicon.stories.tsx delete mode 100644 packages/identicon/Identicon.tsx delete mode 100644 packages/identicon/IdenticonBadge.tsx delete mode 100644 packages/identicon/IdenticonStyles.tsx delete mode 100644 packages/identicon/declarations.d.ts delete mode 100644 packages/identicon/index.ts delete mode 100644 packages/identicon/types.ts delete mode 100644 packages/input/Input.stories.tsx delete mode 100644 packages/input/Input.tsx delete mode 100644 packages/input/InputGroup.stories.tsx delete mode 100644 packages/input/InputGroup.tsx delete mode 100644 packages/input/InputGroupStyles.ts delete mode 100644 packages/input/InputStyles.ts delete mode 100644 packages/input/LabelStyles.ts delete mode 100644 packages/input/OptionsSlider.stories.tsx delete mode 100644 packages/input/OptionsSlider.tsx delete mode 100644 packages/input/SliderInput.stories.tsx delete mode 100644 packages/input/SliderInput.tsx delete mode 100644 packages/input/SliderInputStyles.ts delete mode 100644 packages/input/Textarea.stories.tsx delete mode 100644 packages/input/Textarea.tsx delete mode 100644 packages/input/index.ts delete mode 100644 packages/input/types.ts delete mode 100644 packages/lido-logo/LidoLogo.stories.tsx delete mode 100644 packages/lido-logo/LidoLogo.tsx delete mode 100644 packages/lido-logo/LidoLogoStyles.tsx delete mode 100644 packages/lido-logo/index.ts delete mode 100644 packages/lido-logo/types.tsx delete mode 100644 packages/link/Link.stories.tsx delete mode 100644 packages/link/Link.tsx delete mode 100644 packages/link/LinkStyles.tsx delete mode 100644 packages/link/index.ts delete mode 100644 packages/link/types.ts delete mode 100644 packages/loaders/InlineLoader.stories.tsx delete mode 100644 packages/loaders/InlineLoader.tsx delete mode 100644 packages/loaders/InlineLoaderStyles.tsx delete mode 100644 packages/loaders/Loader.stories.tsx delete mode 100644 packages/loaders/Loader.tsx delete mode 100644 packages/loaders/LoaderStyles.tsx delete mode 100644 packages/loaders/index.ts delete mode 100644 packages/loaders/types.ts delete mode 100644 packages/main-menu/MainMenu.stories.tsx delete mode 100644 packages/main-menu/MainMenu.tsx delete mode 100644 packages/main-menu/MainMenuItem.tsx delete mode 100644 packages/main-menu/MainMenuItemStyles.tsx delete mode 100644 packages/main-menu/MainMenuStyles.tsx delete mode 100644 packages/main-menu/index.ts delete mode 100644 packages/main-menu/types.ts delete mode 100644 packages/modal/Modal.stories.tsx delete mode 100644 packages/modal/Modal.tsx delete mode 100644 packages/modal/ModalButton.tsx delete mode 100644 packages/modal/ModalButtonStyles.tsx delete mode 100644 packages/modal/ModalExtra.tsx delete mode 100644 packages/modal/ModalExtraStyles.tsx delete mode 100644 packages/modal/ModalOverlay.tsx delete mode 100644 packages/modal/ModalOverlayStyles.tsx delete mode 100644 packages/modal/ModalStyles.tsx delete mode 100644 packages/modal/constants.ts delete mode 100644 packages/modal/index.ts delete mode 100644 packages/modal/types.tsx delete mode 100644 packages/modal/useModalClose.ts delete mode 100644 packages/modal/useModalFocus.ts delete mode 100644 packages/pagination/Pagination.stories.tsx delete mode 100644 packages/pagination/Pagination.tsx delete mode 100644 packages/pagination/PaginationItem.stories.tsx delete mode 100644 packages/pagination/PaginationItem.tsx delete mode 100644 packages/pagination/PaginationItemStyles.tsx delete mode 100644 packages/pagination/getShowingPages.test.ts delete mode 100644 packages/pagination/getShowingPages.ts delete mode 100644 packages/pagination/index.ts delete mode 100644 packages/pagination/types.ts delete mode 100644 packages/popover/Popover.stories.tsx delete mode 100644 packages/popover/Popover.tsx delete mode 100644 packages/popover/PopoverRoot.tsx delete mode 100644 packages/popover/PopoverRootStyles.ts delete mode 100644 packages/popover/PopoverStyles.ts delete mode 100644 packages/popover/calculatePosition.ts delete mode 100644 packages/popover/constants.ts delete mode 100644 packages/popover/index.ts delete mode 100644 packages/popover/types.ts delete mode 100644 packages/popover/usePopoverPosition.ts delete mode 100644 packages/popup-menu/PopupMenu.stories.tsx delete mode 100644 packages/popup-menu/PopupMenu.tsx delete mode 100644 packages/popup-menu/PopupMenuItem.tsx delete mode 100644 packages/popup-menu/PopupMenuItemStyles.ts delete mode 100644 packages/popup-menu/PopupMenuProvider.tsx delete mode 100644 packages/popup-menu/PopupMenuStyles.ts delete mode 100644 packages/popup-menu/constants.ts delete mode 100644 packages/popup-menu/index.ts delete mode 100644 packages/popup-menu/types.ts delete mode 100644 packages/popup-menu/usePopupFocus.ts delete mode 100644 packages/section/Section.stories.tsx delete mode 100644 packages/section/Section.tsx delete mode 100644 packages/section/SectionStyles.tsx delete mode 100644 packages/section/index.ts delete mode 100644 packages/section/types.ts delete mode 100644 packages/select/Option.tsx delete mode 100644 packages/select/Select.stories.tsx delete mode 100644 packages/select/Select.tsx delete mode 100644 packages/select/SelectArrow.tsx delete mode 100644 packages/select/SelectArrowStyles.ts delete mode 100644 packages/select/SelectIcon.tsx delete mode 100644 packages/select/SelectIconStyles.tsx delete mode 100644 packages/select/SelectStyles.ts delete mode 100644 packages/select/index.ts delete mode 100644 packages/select/types.ts delete mode 100644 packages/select/useSelect.ts delete mode 100644 packages/select/useSelectWidth.ts delete mode 100644 packages/service-page/ServicePage.stories.tsx delete mode 100644 packages/service-page/ServicePage.tsx delete mode 100644 packages/service-page/ServicePageStyles.tsx delete mode 100644 packages/service-page/index.ts delete mode 100644 packages/service-page/types.ts delete mode 100644 packages/stack/HStack.tsx delete mode 100644 packages/stack/Stack.stories.tsx delete mode 100644 packages/stack/Stack.tsx delete mode 100644 packages/stack/StackItem.tsx delete mode 100644 packages/stack/StackItemStyles.tsx delete mode 100644 packages/stack/StackProvider.tsx delete mode 100644 packages/stack/StackStyles.tsx delete mode 100644 packages/stack/VStack.tsx delete mode 100644 packages/stack/index.ts delete mode 100644 packages/stack/types.tsx delete mode 100644 packages/table/Table.stories.tsx delete mode 100644 packages/table/Table.tsx delete mode 100644 packages/table/Tbody.tsx delete mode 100644 packages/table/Td.tsx delete mode 100644 packages/table/Tfoot.tsx delete mode 100644 packages/table/Th.tsx delete mode 100644 packages/table/Thead.tsx delete mode 100644 packages/table/Tr.tsx delete mode 100644 packages/table/index.ts delete mode 100644 packages/table/styles.tsx delete mode 100644 packages/table/types.tsx delete mode 100644 packages/text/Text.stories.tsx delete mode 100644 packages/text/Text.tsx delete mode 100644 packages/text/TextStyles.tsx delete mode 100644 packages/text/index.ts delete mode 100644 packages/text/types.ts delete mode 100644 packages/toast/Toast.stories.tsx delete mode 100644 packages/toast/ToastContainer.tsx delete mode 100644 packages/toast/ToastDefault.tsx delete mode 100644 packages/toast/ToastError.tsx delete mode 100644 packages/toast/ToastInfo.tsx delete mode 100644 packages/toast/ToastPending.tsx delete mode 100644 packages/toast/ToastPendingStyles.tsx delete mode 100644 packages/toast/ToastSuccess.tsx delete mode 100644 packages/toast/index.ts delete mode 100644 packages/toast/toastsDefaultOptions.ts delete mode 100644 packages/toast/types.ts delete mode 100644 packages/tooltip/TooltipStyles.ts delete mode 100644 packages/tooltip/types.ts diff --git a/packages/accordion/Accordion.stories.tsx b/packages/accordion/Accordion.stories.tsx deleted file mode 100644 index 3bbff831..00000000 --- a/packages/accordion/Accordion.stories.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Accordion, AccordionProps } from './index.js' - -export default { - component: Accordion, - title: 'Layout/Accordion', -} as Meta - -export const Basic: StoryFn = (props: AccordionProps) => ( - - Liquid staking protocols allow users to earn staking rewards without locking - assets or maintaining staking infrastructure. Users of these protocols can - deposit staking tokens and receive tradable liquid tokens in return. The DAO - controlled smart contract then stakes tokens with DAO-picked staking - providers. Users' deposited funds are controlled by the DAO, staking - providers never have direct access to the users' assets. - -) - -Basic.args = { - defaultExpanded: false, - summary: 'What is Liquid Staking?', -} - -Basic.argTypes = { - defaultExpanded: { - description: 'Accordion default state', - }, - summary: { - description: 'Summary title', - }, -} - -export const List: StoryFn = () => ( - <> - -

- Liquid staking protocols allow users to earn staking rewards without - locking assets or maintaining staking infrastructure. Users of these - protocols can deposit staking tokens and receive tradable liquid tokens - in return. The DAO controlled smart contract then stakes tokens with - DAO-picked staking providers. Users' deposited funds are controlled - by the DAO, staking providers never have direct access to the users' - assets. -

- - -

- When staking with Lido, users receive stETH tokens on a 1:1 basis - representing their staked ETH. stETH balances can be used like regular - ETH to earn yields and lending rewards, and are updated on a daily basis - to reflect your ETH staking rewards. Note that there are no lock-ups or - minimum deposits when staking with Lido. -

-

- When using Lido, users receive secure staking rewards in real-time, - allowing for participation in the securing of Ethereum without the - associated risks and downside potential. -

- - -

Lido is a secure liquid staking solution for a number of reasons:

-
    -
  • Open-sourcing & continuous review of all code.
    • -
  • - Committee of elected, best-in-class validators to minimise staking - risk. -
    • -
  • - Use of non-custodial staking service to eliminate counterparty risk. -
    • -
  • Use of DAO for governance decisions & to manage risk factors.
    • -
-

- Usually when staking ETH you choose only one validator. In the case of - Lido you stake across many validators, minimising your staking risk. -

- - -) diff --git a/packages/accordion/Accordion.tsx b/packages/accordion/Accordion.tsx deleted file mode 100644 index 3671d042..00000000 --- a/packages/accordion/Accordion.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { AccordionProps } from './types.js' -import { - AccordionStyle, - AccordionSummaryStyle, - AccordionTitleStyle, - AccordionArrowStyle, - AccordionContentStyle, -} from './AccordionStyles.js' -import { useExpanded } from './useExpanded.js' - -export const Accordion = forwardRef( - ( - { - defaultExpanded, - summary, - children, - onExpand, - onCollapse, - ...rest - }: AccordionProps, - ref?: ForwardedRef, - ) => { - const { toggleProps, collapseProps, isExpanded } = useExpanded({ - defaultExpanded, - onExpand, - onCollapse, - }) - - return ( - - - {summary} - - -
- {children} -
- - ) - }, -) -Accordion.displayName = 'Accordion' diff --git a/packages/accordion/AccordionStyles.tsx b/packages/accordion/AccordionStyles.tsx deleted file mode 100644 index 55188aa0..00000000 --- a/packages/accordion/AccordionStyles.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { ArrowBottom } from '../icons/index.js' - -export const AccordionStyle = styled.div` - margin: 0 0 ${({ theme }) => theme.spaceMap.sm}px 0; - background: var(--lido-color-foreground); - border-radius: ${({ theme }) => theme.borderRadiusesMap.xl}px; -` - -export const AccordionSummaryStyle = styled.div` - padding: ${({ theme }) => theme.spaceMap.lg}px - ${({ theme }) => theme.spaceMap.xxl}px; - cursor: pointer; - display: flex; - align-items: center; - outline: none; - min-height: 40px; - box-sizing: content-box; - - ${({ theme }) => theme.mediaQueries.md} { - padding: ${({ theme }) => theme.spaceMap.lg}px; - } -` - -export const AccordionTitleStyle = styled.div` - color: var(--lido-color-text); - flex-grow: 1; - font-weight: 800; - font-size: ${({ theme }) => theme.fontSizesMap.xs}px; - line-height: 1.6em; -` - -export const AccordionArrowStyle = styled(ArrowBottom)<{ $expanded: boolean }>` - flex-shrink: 0; - transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg); - transition: transform ${({ theme }) => theme.duration.norm} ease; - margin: -2px; - margin-left: ${({ theme }) => theme.spaceMap.md}px; - fill: var(--lido-color-textSecondary); -` - -export const AccordionContentStyle = styled.div` - color: var(--lido-color-textSecondary); - padding: ${({ theme }) => theme.spaceMap.xxl}px; - padding-top: 0; - font-weight: 400; - font-size: ${({ theme }) => theme.fontSizesMap.xxs}px; - line-height: 1.6em; - - ${({ theme }) => theme.mediaQueries.md} { - padding: ${({ theme }) => theme.spaceMap.lg}px; - padding-top: 0; - } - - p, - ul, - ol { - margin: 0 0 1.6em; - - &:last-child { - margin-bottom: 0; - } - } - - /* stylelint-disable-next-line no-descending-specificity */ - ul, - /* stylelint-disable-next-line no-descending-specificity */ - ol { - padding: 0 0 0 1.5em; - } -` diff --git a/packages/accordion/index.ts b/packages/accordion/index.ts deleted file mode 100644 index cecd178b..00000000 --- a/packages/accordion/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Accordion.js' -export * from './types.js' diff --git a/packages/accordion/types.ts b/packages/accordion/types.ts deleted file mode 100644 index 459ec8ff..00000000 --- a/packages/accordion/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { LidoComponentProps } from '../utils/index.js' -import { ReactNode } from 'react' -export type { Theme } from '../theme/index.js' - -export type AccordionProps = LidoComponentProps< - 'div', - { - defaultExpanded?: boolean - summary: ReactNode - onExpand?: () => void - onCollapse?: () => void - } -> diff --git a/packages/accordion/useExpanded.ts b/packages/accordion/useExpanded.ts deleted file mode 100644 index af2cba18..00000000 --- a/packages/accordion/useExpanded.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { useCallback, useEffect, useState } from 'react' -import { AccordionProps } from './types.js' -import _useCollapse from 'react-collapsed' -import { - GetCollapsePropsOutput, - GetTogglePropsOutput, -} from 'react-collapsed/dist/types.js' - -//@ts-expect-error Property default doesn't exist on type -const useCollapse: typeof _useCollapse = _useCollapse.default || _useCollapse - -type UseExpanded = ( - props: Pick, -) => { - toggleProps: GetTogglePropsOutput - collapseProps: GetCollapsePropsOutput - isExpanded: boolean -} - -export const useExpanded: UseExpanded = ({ - defaultExpanded = false, - onExpand, - onCollapse, -}) => { - const [isExpanded, setExpanded] = useState(defaultExpanded) - - useEffect(() => { - setExpanded(defaultExpanded) - }, [defaultExpanded]) - - const handleToggle = useCallback( - () => setExpanded((previous) => !previous), - [], - ) - - const { getToggleProps, getCollapseProps } = useCollapse({ - isExpanded, - onExpandEnd: onExpand, - onCollapseEnd: onCollapse, - }) - - return { - toggleProps: getToggleProps({ onClick: handleToggle }), - collapseProps: getCollapseProps(), - isExpanded, - } -} diff --git a/packages/address/Address.stories.tsx b/packages/address/Address.stories.tsx deleted file mode 100644 index f70bc95a..00000000 --- a/packages/address/Address.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Address, AddressProps } from './index.js' - -export default { - component: Address, - title: 'Wallet/Address', - args: { - address: '0x5a98fcbea516cf06857215779fd812ca3bef1b32', - symbols: 3, - }, - argTypes: { - symbols: { - control: { type: 'range', min: 3, max: 21, step: 1 }, - }, - }, -} as Meta - -export const Basic: StoryFn = (props) =>
diff --git a/packages/address/Address.tsx b/packages/address/Address.tsx deleted file mode 100644 index 62e77543..00000000 --- a/packages/address/Address.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { AddressProps } from './types.js' -import { - AddressStyle, - AddressFullStyle, - AddressTrimmedStyle, -} from './AddressStyles.js' -import { trimAddress } from './trimAddress.js' - -export const Address = forwardRef( - ( - { symbols = 3, address, ...rest }: AddressProps, - ref?: ForwardedRef, - ) => { - return ( - - {address} - - {trimAddress(address, symbols)} - - - ) - }, -) -Address.displayName = 'Address' diff --git a/packages/address/AddressStyles.tsx b/packages/address/AddressStyles.tsx deleted file mode 100644 index bee86445..00000000 --- a/packages/address/AddressStyles.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' - -export const AddressStyle = styled.div` - position: relative; - display: inline-block; - font-weight: 400; -` - -export const AddressFullStyle = styled.span` - position: absolute; - overflow: hidden; - inset: 0; - color: transparent; -` - -export const AddressTrimmedStyle = styled.span` - user-select: none; - pointer-events: none; -` diff --git a/packages/address/index.ts b/packages/address/index.ts deleted file mode 100644 index 46521523..00000000 --- a/packages/address/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './Address.js' -export * from './trimAddress.js' -export * from './types.js' diff --git a/packages/address/trimAddress.ts b/packages/address/trimAddress.ts deleted file mode 100644 index cd316f87..00000000 --- a/packages/address/trimAddress.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const trimAddress = (address: string, symbols: number): string => { - if (symbols <= 0) return '' - if (symbols * 2 >= address.length) return address - - const left = address.slice(0, symbols) - const right = address.slice(-symbols) - - return `${left}...${right}` -} diff --git a/packages/address/types.ts b/packages/address/types.ts deleted file mode 100644 index e682a542..00000000 --- a/packages/address/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { LidoComponentProps } from '../utils/index.js' - -export type AddressProps = LidoComponentProps< - 'div', - { - address: string - symbols?: number - } -> diff --git a/packages/addressBadge/AddressBadge.stories.tsx b/packages/addressBadge/AddressBadge.stories.tsx deleted file mode 100644 index 0ddf0aef..00000000 --- a/packages/addressBadge/AddressBadge.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { AddressBadge, AddressBadgeProps } from './index.js' - -export default { - component: AddressBadge, - title: 'Wallet/AddressBadge', - args: { - address: '0x5a98fcbea516cf06857215779fd812ca3bef1b32', - symbolsMobile: 3, - symbolsDesktop: 6, - }, - argTypes: { - symbolsMobile: { - control: { type: 'range', min: 3, max: 21, step: 1 }, - }, - symbolsDesktop: { - control: { type: 'range', min: 3, max: 21, step: 1 }, - }, - }, -} as Meta - -export const Basic: StoryFn = (props) => ( - -) diff --git a/packages/addressBadge/AddressBadge.tsx b/packages/addressBadge/AddressBadge.tsx deleted file mode 100644 index d5114fde..00000000 --- a/packages/addressBadge/AddressBadge.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { useBreakpoint } from '../hooks/useBreakpoint.js' -import { AddressBadgeStyle } from './AddressBadgeStyles.js' -import { AddressBadgeProps } from './types.js' - -export const AddressBadge = forwardRef( - ( - { - address, - symbolsMobile = 3, - symbolsDesktop = 6, - ...rest - }: AddressBadgeProps, - ref?: ForwardedRef, - ) => { - const isMobile = useBreakpoint('md') - - return ( - - ) - }, -) -AddressBadge.displayName = 'AddressBadge' diff --git a/packages/addressBadge/AddressBadgeStyles.tsx b/packages/addressBadge/AddressBadgeStyles.tsx deleted file mode 100644 index 95f762bc..00000000 --- a/packages/addressBadge/AddressBadgeStyles.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { IdenticonBadge } from '../identicon/index.js' - -export const AddressBadgeStyle = styled(IdenticonBadge)` - max-width: 100%; - box-sizing: border-box; - overflow: hidden; - - & > * { - flex-shrink: 0; - } - - & > :first-child { - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - } -` diff --git a/packages/addressBadge/index.ts b/packages/addressBadge/index.ts deleted file mode 100644 index 07834e0b..00000000 --- a/packages/addressBadge/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './AddressBadge.js' -export * from './types.js' diff --git a/packages/addressBadge/types.ts b/packages/addressBadge/types.ts deleted file mode 100644 index f1b2cbb6..00000000 --- a/packages/addressBadge/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { IdenticonBadgeProps } from '../identicon/index.js' - -export type AddressBadgeProps = Omit< - IdenticonBadgeProps, - 'address' | 'symbol' | 'as' | 'forwardedAs' -> & { - address?: string - symbolsMobile?: number - symbolsDesktop?: number -} diff --git a/packages/block/Block.stories.tsx b/packages/block/Block.stories.tsx deleted file mode 100644 index 3ef3b93d..00000000 --- a/packages/block/Block.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Block, BlockProps, BlockColor, BlockVariant } from './index.js' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Block, - title: 'Layout/Block', - args: { - children: 'Example content', - variant: 'flat', - color: 'foreground', - paddingLess: false, - }, - argTypes: { - variant: { - options: getOptions(BlockVariant), - control: 'inline-radio', - }, - color: { - options: getOptions(BlockColor), - control: 'inline-radio', - }, - }, -} as Meta - -export const Basic: StoryFn = (props) => diff --git a/packages/block/Block.tsx b/packages/block/Block.tsx deleted file mode 100644 index e28dc9c9..00000000 --- a/packages/block/Block.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { BlockStyle } from './BlockStyles.js' -import { BlockProps } from './types.js' - -export const Block = forwardRef( - ( - { - color = 'foreground', - variant = 'flat', - paddingLess = false, - ...rest - }: BlockProps, - ref?: ForwardedRef, - ) => { - return ( - - ) - }, -) -Block.displayName = 'Block' diff --git a/packages/block/BlockStyles.tsx b/packages/block/BlockStyles.tsx deleted file mode 100644 index b66630e7..00000000 --- a/packages/block/BlockStyles.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import styled, { css } from '../utils/styled-components-wrapper.js' -import { Theme } from '../theme/index.js' -import { BlockVariants, BlockColors } from './types.js' - -type InjectedProps = { - $variant: BlockVariants - $color: BlockColors - $paddingLess: boolean - theme: Theme -} - -const colors = { - foreground: css` - background: var(--lido-color-foreground); - color: var(--lido-color-textSecondary); - `, - background: css` - background: var(--lido-color-background); - color: var(--lido-color-textSecondary); - `, - accent: css` - background: var(--lido-color-accent); - color: var(--lido-color-accentContrast); - `, -} - -const variants = { - flat: css` - box-shadow: none; - `, - shadow: css` - box-shadow: ${({ theme }) => theme.boxShadows.lg} - var(--lido-colors-shadowLight); - `, -} - -const paddings = css` - padding: ${({ theme }) => theme.spaceMap.xxl}px; - - ${({ theme }) => theme.mediaQueries.md} { - padding: ${({ theme }) => theme.spaceMap.lg}px; - } -` - -export const BlockStyle = styled.div` - font-weight: 400; - font-size: ${({ theme }) => theme.fontSizesMap.xxs}px; - line-height: 1.6em; - border-radius: ${({ theme }) => theme.borderRadiusesMap.xl}px; - margin: 0; - - ${({ $paddingLess }) => !$paddingLess && paddings} - - ${({ $variant }) => variants[$variant]} - ${({ $color }) => colors[$color]} -` diff --git a/packages/block/index.ts b/packages/block/index.ts deleted file mode 100644 index 1a232cf3..00000000 --- a/packages/block/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Block.js' -export * from './types.js' diff --git a/packages/block/types.tsx b/packages/block/types.tsx deleted file mode 100644 index e3cf87db..00000000 --- a/packages/block/types.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { LidoComponentProps } from '../utils/index.js' -export type { Theme } from '../theme/index.js' - -export enum BlockVariant { - flat, - shadow, -} -export type BlockVariants = keyof typeof BlockVariant - -export enum BlockColor { - foreground, - background, - accent, -} -export type BlockColors = keyof typeof BlockColor - -export type BlockProps = LidoComponentProps< - 'div', - { - color?: BlockColors - variant?: BlockVariants - paddingLess?: boolean - } -> diff --git a/packages/box/Box.stories.tsx b/packages/box/Box.stories.tsx deleted file mode 100644 index 619c9ce9..00000000 --- a/packages/box/Box.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Box } from './index.js' - -export default { - component: Box, - title: 'Styled System/Box', -} as Meta - -export const Basic: StoryFn = (props) => ( - -) - -export const Breakpoints: StoryFn = (props) => ( - - Example - -) diff --git a/packages/box/Box.tsx b/packages/box/Box.tsx deleted file mode 100644 index 8c7bd360..00000000 --- a/packages/box/Box.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { withStyledSystem } from '../styled-system/index.js' - -export const Box = withStyledSystem(styled.div``) diff --git a/packages/box/index.ts b/packages/box/index.ts deleted file mode 100644 index d7babce6..00000000 --- a/packages/box/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Box.js' diff --git a/packages/button/Button.stories.tsx b/packages/button/Button.stories.tsx deleted file mode 100644 index 2837d5a8..00000000 --- a/packages/button/Button.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Whitepaper } from '../icons/index.js' -import { - Button, - ButtonIcon, - ButtonProps, - ButtonIconProps, - ButtonColor, - ButtonSize, - ButtonVariant, -} from '.' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Button, - title: 'Controls/Button', - args: { - size: 'md', - variant: 'filled', - color: 'primary', - disabled: false, - fullwidth: false, - loading: false, - children: 'Example', - }, - argTypes: { - size: { - options: getOptions(ButtonSize), - control: 'inline-radio', - }, - variant: { - options: getOptions(ButtonVariant), - control: 'inline-radio', - }, - color: { - options: getOptions(ButtonColor), - control: 'inline-radio', - }, - }, -} as Meta - -export const Basic: StoryFn = (props) => - , - ) - - expect(container.firstChild?.firstChild).toMatchSnapshot() -}) diff --git a/packages/button/Button.tsx b/packages/button/Button.tsx deleted file mode 100644 index e438723c..00000000 --- a/packages/button/Button.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { - ButtonStyle, - ButtonContentStyle, - ButtonLoaderStyle, -} from './ButtonStyles.js' -import { ButtonProps } from './types.js' -import { useRipple } from './useRipple.js' - -const loaderSizes = { - xxs: 'small', - xs: 'small', - sm: 'small', - md: 'medium', - lg: 'medium', -} as const - -export const Button = forwardRef( - ( - { - size = 'md', - variant = 'filled', - color = 'primary', - square = false, - fullwidth = false, - loading = false, - active = false, - onClick, - disabled, - children, - ...rest - }: ButtonProps, - ref?: ForwardedRef, - ) => { - const { handleClick, ripple } = useRipple({ onClick }) - const loaderSize = loaderSizes[size] - - return ( - - {children} - {loading && } - {!active && ripple} - - ) - }, -) -Button.displayName = 'Butotn' diff --git a/packages/button/ButtonIcon.tsx b/packages/button/ButtonIcon.tsx deleted file mode 100644 index 8fec43e2..00000000 --- a/packages/button/ButtonIcon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { - ButtonWrapperStyle, - ButtonIconStyle, - ButtonContentStyle, -} from './ButtonIconStyles.js' -import { ButtonIconProps } from './types.js' -import { Button } from './Button.js' - -export const ButtonIcon = forwardRef( - ( - { icon, children, ...rest }: ButtonIconProps, - ref?: ForwardedRef, - ) => { - const hasNoChildren = !children - - return ( - - ) - }, -) -ButtonIcon.displayName = 'ButtonIcon' diff --git a/packages/button/ButtonIconStyles.tsx b/packages/button/ButtonIconStyles.tsx deleted file mode 100644 index 183ad9b3..00000000 --- a/packages/button/ButtonIconStyles.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' - -export const ButtonWrapperStyle = styled.span` - display: flex; - align-items: center; - justify-content: center; - min-height: 1em; - min-width: 1em; -` - -export const ButtonIconStyle = styled.span<{ $square: boolean }>` - margin: ${({ $square }) => ($square ? '-12px' : '-12px -6px')}; - line-height: 0; - flex-shrink: 0; - - svg { - fill: currentcolor; - } -` - -export const ButtonContentStyle = styled.span` - margin-left: 10px; - - :empty { - display: none; - } -` diff --git a/packages/button/ButtonStyles.tsx b/packages/button/ButtonStyles.tsx deleted file mode 100644 index 35d7fd4c..00000000 --- a/packages/button/ButtonStyles.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import styled, { css, keyframes } from '../utils/styled-components-wrapper.js' -import { Theme } from '../theme/index.js' -import { Loader } from '../loaders/index.js' -import { ButtonColors, ButtonSizes, ButtonVariants } from './types.js' - -type InjectedProps = { - $color: ButtonColors - $size: ButtonSizes - $variant: ButtonVariants - $fullwidth: boolean - $square: boolean - $loading: boolean - $active: boolean - theme: Theme -} - -const sizes = { - xxs: css` - line-height: 1em; - font-size: ${({ theme }) => theme.fontSizesMap.xxxs}px; - border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px; - padding: ${({ $square }) => ($square ? '11px' : '11px 16px')}; - min-width: ${({ $square }) => ($square ? '0' : '50px')}; - `, - xs: css` - line-height: 1em; - font-size: ${({ theme }) => theme.fontSizesMap.xxs}px; - border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px; - padding: ${({ $square }) => ($square ? '10px' : '10px 16px')}; - min-width: ${({ $square }) => ($square ? '0' : '60px')}; - `, - sm: css` - line-height: 1em; - font-size: ${({ theme }) => theme.fontSizesMap.xs}px; - border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px; - padding: ${({ $square }) => ($square ? '16px' : '16px 24px')}; - min-width: ${({ $square }) => ($square ? '0' : '100px')}; - `, - md: css` - line-height: 1em; - font-size: ${({ theme }) => theme.fontSizesMap.xs}px; - border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; - padding: ${({ $square }) => ($square ? '21px' : '21px 44px')}; - min-width: ${({ $square }) => ($square ? '0' : '120px')}; - `, - lg: css` - line-height: 1em; - font-size: ${({ theme }) => theme.fontSizesMap.sm}px; - border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; - box-shadow: ${({ theme }) => theme.boxShadows.md} - var(--lido-color-shadowDark); - padding: ${({ $square }) => ($square ? '24px' : '24px 64px')}; - min-width: ${({ $square }) => ($square ? '0' : '160px')}; - `, -} - -const getMainColor = (props: InjectedProps) => { - const colorsMap = { - primary: `var(--lido-color-primary)`, - secondary: `var(--lido-color-secondary)`, - warning: `var(--lido-color-warning)`, - error: `var(--lido-color-error)`, - success: `var(--lido-color-success)`, - } - return colorsMap[props.$color] -} - -const getContrastColor = (props: InjectedProps) => { - const colorsMap = { - primary: `var(--lido-color-primaryContrast)`, - secondary: `var(--lido-color-secondaryContrast)`, - warning: `var(--lido-color-warningContrast)`, - error: `var(--lido-color-errorContrast)`, - success: `var(--lido-color-successContrast)`, - } - return colorsMap[props.$color] -} - -const getHoverColor = (props: InjectedProps) => { - const colorsMap = { - primary: `var(--lido-color-primaryHover)`, - secondary: `var(--lido-color-secondaryHover)`, - warning: `var(--lido-color-warningHover)`, - error: `var(--lido-color-errorHover)`, - success: `var(--lido-color-successHover)`, - } - return colorsMap[props.$color] -} - -const variants = { - filled: css` - color: ${getContrastColor}; - background-color: ${getMainColor}; - transition: background-color ${({ theme }) => theme.duration.fast} ease; - - :not(:disabled):hover, - :focus-visible { - background-color: ${getHoverColor}; - } - `, - outlined: css` - color: ${getMainColor}; - transition: - background-color ${({ theme }) => theme.duration.fast} ease, - color ${({ theme }) => theme.duration.fast} ease; - - ::before { - display: block; - border: 1px solid ${getMainColor}; - } - - :not(:disabled):hover, - :focus-visible { - background-color: ${getHoverColor}; - color: ${getContrastColor}; - } - `, - text: css` - color: ${getMainColor}; - background-color: var(--lido-color-foreground); - - ::before { - display: block; - background-color: ${getMainColor}; - transition: opacity ${({ theme }) => theme.duration.fast} ease; - opacity: 0; - } - - :not(:disabled):hover, - :focus-visible { - /* stylelint-disable-next-line no-descending-specificity */ - ::before { - opacity: 0.1; - } - } - `, - ghost: css` - color: ${getMainColor}; - - ::before { - display: block; - background-color: ${getMainColor}; - transition: opacity ${({ theme }) => theme.duration.fast} ease; - opacity: 0; - } - - :not(:disabled):hover, - :focus-visible { - /* stylelint-disable-next-line no-descending-specificity */ - ::before { - opacity: 0.1; - } - } - `, - translucent: css` - color: ${getMainColor}; - - ::before { - display: block; - background-color: ${getMainColor}; - transition: opacity ${({ theme }) => theme.duration.fast} ease; - opacity: 0.1; - } - - :not(:disabled):hover, - :focus-visible { - /* stylelint-disable-next-line no-descending-specificity */ - ::before { - opacity: 0.2; - } - } - `, -} - -export const ButtonStyle = styled.button` - box-sizing: border-box; - margin: 0; - border: none; - outline: none; - white-space: nowrap; - overflow: hidden; - position: relative; - background: transparent; - font-family: inherit; - font-weight: 700; - width: ${({ $fullwidth }) => ($fullwidth ? ' 100%' : 'auto')}; - -webkit-tap-highlight-color: transparent; - - ::before { - content: ''; - position: absolute; - inset: 0; - pointer-events: none; - border-radius: inherit; - display: none; - } - - :not(:disabled) { - cursor: pointer; - } - - :disabled { - opacity: ${({ $loading }) => ($loading ? 1 : 0.5)}; - } - - ${(props) => sizes[props.$size]} - ${(props) => variants[props.$variant]} -` - -export const ripple = keyframes` - to { - transform: scale(4); - opacity: 0; - } -` - -export const ButtonRippleStyle = styled.span` - position: absolute; - border-radius: 50%; - transform: scale(0); - pointer-events: none; - animation: ${ripple} 0.8s linear; - background-color: currentcolor; - opacity: 0.4; -` - -export const ButtonContentStyle = styled.span<{ $hidden: boolean }>` - position: relative; - pointer-events: none; - visibility: ${({ $hidden }) => ($hidden ? 'hidden' : 'visible')}; -` - -export const ButtonLoaderStyle = styled(Loader)` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: currentcolor; - pointer-events: none; -` diff --git a/packages/button/__snapshots__/Button.test.tsx.snap b/packages/button/__snapshots__/Button.test.tsx.snap deleted file mode 100644 index 7d4451eb..00000000 --- a/packages/button/__snapshots__/Button.test.tsx.snap +++ /dev/null @@ -1,66 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly 1`] = ` -.c0 { - box-sizing: border-box; - margin: 0; - border: none; - outline: none; - white-space: nowrap; - overflow: hidden; - position: relative; - background: transparent; - font-family: inherit; - font-weight: 700; - width: auto; - -webkit-tap-highlight-color: transparent; - line-height: 1em; - font-size: 14px; - border-radius: 10px; - padding: 21px 44px; - min-width: 120px; - color: var(--lido-color-primaryContrast); - background-color: var(--lido-color-primary); - -webkit-transition: background-color 100ms ease; - transition: background-color 100ms ease; -} - -.c0::before { - content: ''; - position: absolute; - inset: 0; - pointer-events: none; - border-radius: inherit; - display: none; -} - -.c0:not(:disabled) { - cursor: pointer; -} - -.c0:disabled { - opacity: 0.5; -} - -.c0:not(:disabled):hover, -.c0:focus-visible { - background-color: var(--lido-color-primaryHover); -} - -.c1 { - position: relative; - pointer-events: none; - visibility: visible; -} - - -`; diff --git a/packages/button/index.ts b/packages/button/index.ts deleted file mode 100644 index 67e42cff..00000000 --- a/packages/button/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './Button.js' -export * from './ButtonIcon.js' -export * from './types.js' diff --git a/packages/button/types.tsx b/packages/button/types.tsx deleted file mode 100644 index 725575e6..00000000 --- a/packages/button/types.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { LidoComponentProps } from '../utils/index.js' -export type { Theme } from '../theme/index.js' - -export enum ButtonSize { - xxs, - xs, - sm, - md, - lg, -} -export type ButtonSizes = keyof typeof ButtonSize - -export enum ButtonVariant { - filled, - outlined, - text, - ghost, - translucent, -} -export type ButtonVariants = keyof typeof ButtonVariant - -export enum ButtonColor { - primary, - secondary, - warning, - error, - success, -} -export type ButtonColors = keyof typeof ButtonColor - -export type ButtonProps = LidoComponentProps< - 'button', - { - size?: ButtonSizes - variant?: ButtonVariants - color?: ButtonColors - fullwidth?: boolean - square?: boolean - loading?: boolean - active?: boolean - as?: never - } -> - -export type ButtonIconProps = { - icon: JSX.Element -} & ButtonProps diff --git a/packages/button/useRipple.tsx b/packages/button/useRipple.tsx deleted file mode 100644 index c81d7545..00000000 --- a/packages/button/useRipple.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { MouseEvent, ReactNode, useCallback, useState } from 'react' -import { ButtonProps } from './types.js' -import { ButtonRippleStyle } from './ButtonStyles.js' - -type UseRipple = (props: Pick) => { - ripple: ReactNode - handleClick: (event: MouseEvent) => void -} - -export const useRipple: UseRipple = ({ onClick }) => { - const [ripple, setRipple] = useState(null) - - const handleClick = useCallback( - (event: MouseEvent) => { - const button = event.currentTarget - const rect = button.getBoundingClientRect() - const diameter = Math.max(button.clientWidth, button.clientHeight) - const radius = diameter / 2 - const isMouseClick = event.clientX > 0 && event.clientY > 0 - - const x = isMouseClick - ? event.clientX - rect.left - : button.clientWidth / 2 - - const y = isMouseClick - ? event.clientY - rect.top - : button.clientHeight / 2 - - const style = { - width: diameter, - height: diameter, - left: x - radius, - top: y - radius, - } - - setRipple() - onClick?.(event) - }, - [onClick], - ) - - return { - ripple, - handleClick, - } -} diff --git a/packages/checkbox/Checkbox.stories.tsx b/packages/checkbox/Checkbox.stories.tsx deleted file mode 100644 index a1f80e01..00000000 --- a/packages/checkbox/Checkbox.stories.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Checkbox, CheckboxProps } from './index.js' - -export default { - component: Checkbox, - title: 'Controls/Checkbox', - args: { - disabled: false, - }, - argTypes: { - onChange: { - action: 'change', - table: { disable: true }, - }, - }, -} as Meta - -export const Uncontrolled: StoryFn = (props) => ( - -) - -Uncontrolled.args = { - defaultChecked: false, -} - -export const Controlled: StoryFn = (props) => { - return -} - -Controlled.args = { - checked: true, -} - -export const WithLabel: StoryFn = (props) => { - return -} - -WithLabel.args = { - label: 'Label', -} diff --git a/packages/checkbox/Checkbox.tsx b/packages/checkbox/Checkbox.tsx deleted file mode 100644 index 2995ecad..00000000 --- a/packages/checkbox/Checkbox.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { CheckboxProps } from './types.js' -import { - CheckboxWrapperStyle, - CheckboxInputStyle, - CheckboxIconStyle, -} from './CheckboxStyles.js' -import { Text } from '../text/index.js' -import { Box } from '../box/index.js' - -export const Checkbox = forwardRef( - ( - { - className, - style, - wrapperRef, - disabled, - children, - label, - ...rest - }: CheckboxProps, - inputRef?: ForwardedRef, - ) => { - return ( - - - - {label && ( - - - {label} - - - )} - - ) - }, -) -Checkbox.displayName = 'Checkbox' diff --git a/packages/checkbox/CheckboxStyles.tsx b/packages/checkbox/CheckboxStyles.tsx deleted file mode 100644 index 98573ab3..00000000 --- a/packages/checkbox/CheckboxStyles.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { Check } from '../icons/index.js' - -export const CheckboxWrapperStyle = styled.label` - flex-shrink: 0; - display: inline-flex; - position: relative; - overflow: hidden; - line-height: 0; - align-items: center; -` - -export const CheckboxIconStyle = styled(Check)` - height: 24px; - width: 24px; - border-radius: 4px; - transition: - box-shadow 0.1s ease, - background-color 0.1s ease; - fill: var(--lido-color-primaryContrast); -` - -export const CheckboxInputStyle = styled.input` - width: 1px; - height: 1px; - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - - &:not(:disabled) ~ * { - cursor: pointer; - } - - label:hover &:not(:disabled):not(:checked) + ${CheckboxIconStyle} { - box-shadow: inset 0 0 0 1px var(--lido-color-borderHover); - } - - & + ${CheckboxIconStyle} { - background-color: var(--lido-color-controlBg); - box-shadow: inset 0 0 0 1px var(--lido-color-border); - - path { - opacity: 0; - } - } - - &:checked + ${CheckboxIconStyle} { - background-color: var(--lido-color-primary); - box-shadow: none; - - path { - opacity: 1; - } - } - - &:disabled + ${CheckboxIconStyle} { - opacity: 0.5; - cursor: default; - } - - &:focus-visible + ${CheckboxIconStyle} { - box-shadow: inset 0 0 0 1px var(--lido-color-primary); - } - - &:focus-visible:checked + ${CheckboxIconStyle} { - box-shadow: inset 0 0 0 1px var(--lido-color-borderHover); - } -` diff --git a/packages/checkbox/index.ts b/packages/checkbox/index.ts deleted file mode 100644 index 1fe575b0..00000000 --- a/packages/checkbox/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Checkbox.js' -export * from './types.js' diff --git a/packages/checkbox/types.ts b/packages/checkbox/types.ts deleted file mode 100644 index 8ff89d19..00000000 --- a/packages/checkbox/types.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ReactNode, RefObject } from 'react' -import { LidoComponentProps } from '../utils/index.js' -export type { Theme } from '../theme/index.js' - -export type CheckboxProps = LidoComponentProps< - 'input', - { - wrapperRef?: RefObject - children?: never - label?: ReactNode - } -> diff --git a/packages/chip/Chip.stories.tsx b/packages/chip/Chip.stories.tsx deleted file mode 100644 index ad05c806..00000000 --- a/packages/chip/Chip.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Chip, ChipVariant } from './index.js' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Chip, - title: 'Controls/Chip', - args: { - interactive: false, - children: 'Lido', - variant: 'positive', - }, - argTypes: { - variant: { - options: getOptions(ChipVariant), - control: 'inline-radio', - }, - }, -} as Meta - -export const Basic: StoryFn = (props, options) => ( - void 0 : undefined} - /> -) diff --git a/packages/chip/Chip.tsx b/packages/chip/Chip.tsx deleted file mode 100644 index 56a5841c..00000000 --- a/packages/chip/Chip.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { ChipProps } from './types.js' -import { ChipWrapperStyle } from './ChipStyles.js' - -export const Chip = forwardRef( - ( - { children, onClick, variant = 'positive', ...rest }: ChipProps, - ref?: ForwardedRef, - ) => { - return ( - - {children} - - ) - }, -) -Chip.displayName = 'Chip' diff --git a/packages/chip/ChipStyles.tsx b/packages/chip/ChipStyles.tsx deleted file mode 100644 index ff27c658..00000000 --- a/packages/chip/ChipStyles.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import styled, { css } from '../utils/styled-components-wrapper.js' -import { ChipVariants } from './types.js' - -type InjectedPropsTr = { - $variant: ChipVariants - $interactive: boolean -} - -const ChipVariantsStyle = { - positive: css` - background: var(--lido-color-success); - color: var(--lido-color-foreground); - `, - negative: css` - background: var(--lido-color-error); - color: var(--lido-color-foreground); - `, - gray: css` - background: var(--lido-color-shadowLight); - color: var(--lido-color-textSecondary); - `, - warning: css` - background: var(--lido-color-warning); - color: var(--lido-color-foreground); - `, -} - -export const ChipWrapperStyle = styled.div` - font-size: 14px; - line-height: 20px; - display: inline-flex; - max-width: 100%; - box-sizing: border-box; - align-items: center; - white-space: nowrap; - outline: none; - border-radius: ${({ theme }) => theme.borderRadiusesMap.xs}px; - padding: 0.2em 0.4em; - cursor: ${({ $interactive }) => ($interactive ? 'pointer' : 'auto')}; - ${({ $variant }) => ChipVariantsStyle[$variant]} -` diff --git a/packages/chip/index.ts b/packages/chip/index.ts deleted file mode 100644 index b8325a04..00000000 --- a/packages/chip/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Chip.js' -export * from './types.js' diff --git a/packages/chip/types.ts b/packages/chip/types.ts deleted file mode 100644 index 53dc161d..00000000 --- a/packages/chip/types.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { RefObject } from 'react' -import { LidoComponentProps } from '../utils/index.js' -export type { Theme } from '../theme/index.js' - -export enum ChipVariant { - positive, - negative, - warning, - gray, -} - -export type ChipVariants = keyof typeof ChipVariant - -export type ChipProps = LidoComponentProps< - 'div', - { - wrapperRef?: RefObject - variant?: ChipVariants - } -> diff --git a/packages/container/Container.stories.tsx b/packages/container/Container.stories.tsx deleted file mode 100644 index b3ad71a3..00000000 --- a/packages/container/Container.stories.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { StoryFn, Meta } from '@storybook/react' -import { Container, ContainerProps, ContainerSize } from './index.js' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Container, - title: 'Layout/Container', - parameters: { - layout: 'fullscreen', - }, -} as Meta - -const StyledDiv = styled.div` - height: 100px; - background: var(--lido-color-foreground); - color: var(--lido-color-textSecondary); - display: flex; - align-items: center; - justify-content: center; -` - -export const Base: StoryFn = (props) => ( - - - -) - -Base.args = { - size: 'full', -} - -Base.argTypes = { - size: { - options: getOptions(ContainerSize), - control: 'inline-radio', - }, -} - -export const PageLayout: StoryFn = () => ( - <> - - Header - - - - Content - - - - Footer - - -) diff --git a/packages/container/Container.tsx b/packages/container/Container.tsx deleted file mode 100644 index 6a5b3532..00000000 --- a/packages/container/Container.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { ContainerStyle } from './ContainerStyles.js' -import { ContainerProps } from './types.js' - -export const Container = forwardRef( - ( - { size = 'full', ...rest }: ContainerProps, - ref?: ForwardedRef, - ) => { - return - }, -) -Container.displayName = 'Container' diff --git a/packages/container/ContainerStyles.tsx b/packages/container/ContainerStyles.tsx deleted file mode 100644 index 220ca519..00000000 --- a/packages/container/ContainerStyles.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import styled, { css } from '../utils/styled-components-wrapper.js' -import { ContainerSizes } from './types.js' - -const sizes = { - full: css` - max-width: 1424px; - `, - content: css` - max-width: 960px; - `, - tight: css` - max-width: 560px; - `, -} - -export const ContainerStyle = styled.div<{ $size: ContainerSizes }>` - box-sizing: border-box; - margin: 0 auto; - min-width: 320px; - width: 100%; - padding: 0 ${({ theme }) => theme.spaceMap.xxl}px; - - ${({ theme }) => theme.mediaQueries.lg} { - padding: 0 ${({ theme }) => theme.spaceMap.lg}px; - } - - ${({ $size }) => sizes[$size]} -` diff --git a/packages/container/index.ts b/packages/container/index.ts deleted file mode 100644 index 7fdc9065..00000000 --- a/packages/container/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Container.js' -export * from './types.js' diff --git a/packages/container/types.tsx b/packages/container/types.tsx deleted file mode 100644 index 2cf8b37f..00000000 --- a/packages/container/types.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { LidoComponentProps } from '../utils/index.js' -export type { Theme } from '../theme/index.js' - -export enum ContainerSize { - full, - content, - tight, -} -export type ContainerSizes = keyof typeof ContainerSize - -export type ContainerProps = LidoComponentProps< - 'div', - { - size?: ContainerSizes - } -> diff --git a/packages/content-theme/content-theme.stories.tsx b/packages/content-theme/content-theme.stories.tsx deleted file mode 100644 index 73b2f537..00000000 --- a/packages/content-theme/content-theme.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Block } from '../block/index.js' -import { ContentTheme } from './index.js' - -export default { - title: 'Theme/Content Theme', -} as Meta - -export const Basic: StoryFn = () => ( - <> - You see only dark content! Light content is hidden! - } - lightContent={ - You see only light content! Dark content is hidden! - } - /> - -) diff --git a/packages/content-theme/content-theme.tsx b/packages/content-theme/content-theme.tsx deleted file mode 100644 index c1903f83..00000000 --- a/packages/content-theme/content-theme.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { FC } from 'react' -import { ContentThemeOnlyDark, ContentThemeOnlyLight } from './styles.js' -import { ContentThemeProps } from './types.js' - -export const ContentTheme: FC = ({ - darkContent, - lightContent, - ...rest -}: ContentThemeProps) => { - return ( - <> - {darkContent} - {lightContent} - - ) -} diff --git a/packages/content-theme/index.ts b/packages/content-theme/index.ts deleted file mode 100644 index 811735a4..00000000 --- a/packages/content-theme/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './content-theme.js' -export * from './types.js' diff --git a/packages/content-theme/styles.tsx b/packages/content-theme/styles.tsx deleted file mode 100644 index 38da8c7f..00000000 --- a/packages/content-theme/styles.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' - -export const ContentThemeOnlyDark = styled.div` - display: var(--lido-color-darkDisplay, contents); -` - -export const ContentThemeOnlyLight = styled.div` - display: var(--lido-color-lightDisplay, contents); -` diff --git a/packages/content-theme/types.ts b/packages/content-theme/types.ts deleted file mode 100644 index d5da4443..00000000 --- a/packages/content-theme/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { ReactElement } from 'react' -import { LidoComponentProps } from '../utils/index.js' - -export type ContentThemeProps = LidoComponentProps< - 'div', - { - darkContent: ReactElement - lightContent: ReactElement - } -> diff --git a/packages/cookie-theme-toggler/cookie-theme-toggler.stories.tsx b/packages/cookie-theme-toggler/cookie-theme-toggler.stories.tsx deleted file mode 100644 index 26433706..00000000 --- a/packages/cookie-theme-toggler/cookie-theme-toggler.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Block } from '../block/index.js' -import { ContentTheme } from '../content-theme/index.js' -import { Text } from '../text/index.js' -import { ThemeToggler } from './index.js' - -export default { - title: 'Theme/Cookie Theme Provider', - args: { - themeOverride: 'follow cookie and system', - }, -} as Meta - -export const Providers: StoryFn = () => ( - <> - Use button to toggle theme{' '} - - 👉 - {' '} - and reload page! -
-
- The block depended by theme cookie - Lorem ipsum dolor sit amet... -
-
- Example of using ContentTheme component - You see only dark content!} - lightContent={You see only light content!} - /> - -) diff --git a/packages/cookie-theme-toggler/cookie-theme-toggler.tsx b/packages/cookie-theme-toggler/cookie-theme-toggler.tsx deleted file mode 100644 index f5091b1f..00000000 --- a/packages/cookie-theme-toggler/cookie-theme-toggler.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { FC } from 'react' -import { - CookieThemeTogglerStyle, - CookieThemeTogglerDarkIcon, - CookieThemeTogglerLightIcon, -} from './styles.js' -import { useThemeToggle } from '../theme/index.js' -import { ButtonProps } from '../button/index.js' - -export type ThemeTogglerProps = Omit - -export const ThemeToggler: FC = (props: ButtonProps) => { - const { toggleTheme } = useThemeToggle() - - return ( - - - - - ) -} diff --git a/packages/cookie-theme-toggler/index.ts b/packages/cookie-theme-toggler/index.ts deleted file mode 100644 index 0c16d421..00000000 --- a/packages/cookie-theme-toggler/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './cookie-theme-toggler.js' diff --git a/packages/cookie-theme-toggler/styles.tsx b/packages/cookie-theme-toggler/styles.tsx deleted file mode 100644 index 83ff64aa..00000000 --- a/packages/cookie-theme-toggler/styles.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { Button } from '../button/index.js' -import { Dark, Light } from '../icons/index.js' - -export const CookieThemeTogglerStyle = styled(Button).attrs({ - variant: 'text', - size: 'xs', -})` - display: inline-grid; - grid-template-areas: 'a'; - min-width: 0; - margin-left: ${({ theme }) => theme.spaceMap.sm}px; - line-height: 0; - font-size: 0; - padding: 0; - - width: 44px; - height: 44px; - // button element contains span as children container, we want to bypass it. - // by aiming explicit "span:first-child" we're verifying that this is what we are aiming for - // witout breaking our SVGs - & > span:first-child { - display: contents; - } -` - -export const CookieThemeTogglerLightIcon = styled(Light)` - grid-area: a; - align-self: center; - justify-self: center; - visibility: var(--lido-color-darkModeVisibility); -` - -export const CookieThemeTogglerDarkIcon = styled(Dark)` - grid-area: a; - align-self: center; - justify-self: center; - visibility: var(--lido-color-lightModeVisibility); -` diff --git a/packages/cookies-tooltip/constants.ts b/packages/cookies-tooltip/constants.ts deleted file mode 100644 index 85c9dfa0..00000000 --- a/packages/cookies-tooltip/constants.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const COOKIE_ALLOWED_KEY = 'cookie-allowed' -export const COOKIE_VALUE_YES = 'yes' -export const COOKIE_VALUE_NO = 'no' diff --git a/packages/cookies-tooltip/cookies-tooltip.stories.tsx b/packages/cookies-tooltip/cookies-tooltip.stories.tsx deleted file mode 100644 index dfa3494f..00000000 --- a/packages/cookies-tooltip/cookies-tooltip.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Text } from '../text/index.js' -import { CookiesTooltip } from './index.js' - -export default { - title: 'CookiesTooltip/Basic', -} as Meta - -export const Basic: StoryFn = () => ( - <> - - CookiesTooltip component has an ability to detect a user choice in other - tabs and third level domain. - - - You can check above if you: -
- 1. duplicate this tab; -
- 2. allow or decline cookie; -
- 3. and check in another tab; -
- 4. and click to work area (to handler window.onfocus event). - - - -) diff --git a/packages/cookies-tooltip/cookies-tooltip.tsx b/packages/cookies-tooltip/cookies-tooltip.tsx deleted file mode 100644 index acfd09e8..00000000 --- a/packages/cookies-tooltip/cookies-tooltip.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { - FC, - useEffect, - useState, - useCallback, - ComponentPropsWithoutRef, - ReactNode, -} from 'react' -import { getCrossDomainCookieClientSide } from '../utils/index.js' -import { - Wrap, - Box, - Text, - ButtonsWrap, - AllowButton, - DeclineButton, - ExternalLink, -} from './styles.js' -import { allowCookies, declineCookies } from './utils.js' -import { COOKIE_ALLOWED_KEY } from './constants.js' - -export type CookiesTooltipProps = Omit< - ComponentPropsWithoutRef<'div'>, - 'children' -> & { - privacyText?: ReactNode - privacyLink?: string -} - -export const CookiesTooltip: FC = ({ - privacyText, - privacyLink, - ...rest -}) => { - const [isVisible, setVisibility] = useState(false) - - const checkCookieAllowedEarlier = useCallback(() => { - // Check if user allowed/declined in other tab or third level domain - if (getCrossDomainCookieClientSide(COOKIE_ALLOWED_KEY)) { - setVisibility(false) - - window.removeEventListener('focus', checkCookieAllowedEarlier) - } - }, []) - - useEffect(() => { - // Check cookie after page loaded - if (getCrossDomainCookieClientSide(COOKIE_ALLOWED_KEY)) { - return - } - - setVisibility(true) - - // This code runs after returned to this browser tab (window) from other - window.addEventListener('focus', checkCookieAllowedEarlier) - }, [checkCookieAllowedEarlier]) - - if (!isVisible) return <> - - return ( - - - - {privacyText ?? ( - <> - Cookies are used to collect anonymous site visitation data - to improve website performance. For more info, - read  - - )} - - Privacy Notice - - - - { - allowCookies() - setVisibility(false) - }} - > - Allow - - { - declineCookies() - setVisibility(false) - }} - > - Decline - - - - - ) -} diff --git a/packages/cookies-tooltip/index.ts b/packages/cookies-tooltip/index.ts deleted file mode 100644 index 5c051015..00000000 --- a/packages/cookies-tooltip/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './cookies-tooltip.js' -export { migrationAllowCookieToCrossDomainCookieClientSide } from './utils.js' diff --git a/packages/cookies-tooltip/styles.tsx b/packages/cookies-tooltip/styles.tsx deleted file mode 100644 index f926555c..00000000 --- a/packages/cookies-tooltip/styles.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' - -export const ExternalLink = styled.a.attrs({ - target: '_blank', - rel: 'nofollow noopener', -})` - cursor: pointer; - color: var(--lido-color-primary); - text-decoration: none; - - &:hover { - color: var(--lido-color-primaryHover); - } -` - -export const Wrap = styled.div` - z-index: 999; - position: fixed; - bottom: 20px; - left: 20px; - right: 20px; - display: flex; - align-items: center; - justify-content: center; - - ${({ theme }) => theme.mediaQueries.lg} { - bottom: 0; - left: 0; - right: 0; - } -` - -export const Box = styled.div` - display: flex; - align-items: center; - padding: 16px 24px; - border-radius: 20px; - background-color: var(--lido-color-foreground); - box-shadow: 0 6px 32px rgba(0, 0, 0, 0.08); - - ${({ theme }) => theme.mediaQueries.lg} { - flex-direction: column; - border-radius: 0; - width: 100%; - } -` - -export const Text = styled.div` - margin-right: 8px; - font-weight: 500; - font-size: 14px; - line-height: 22px; - color: var(--lido-color-textSecondary); - max-width: 500px; - - ${({ theme }) => theme.mediaQueries.lg} { - margin-right: 0; - margin-bottom: 8px; - width: 100%; - text-align: center; - } -` - -export const ButtonsWrap = styled.div` - display: flex; -` - -const ButtonBasic = styled.button.attrs({ type: 'button' })` - font-weight: 800; - font-size: 12px; - line-height: 20px; - border-radius: 6px; - width: 72px; - height: 32px; - border: none; - outline: none; - cursor: pointer; - transition: - background-color ease 0.25s, - border-color ease 0.25s, - color ease 0.25s; - - &:not(:last-child) { - margin-right: 8px; - } - - &:hover { - background-color: #0e1621; - } - - &:active { - transform: translateY(1px); - } - - ${({ theme }) => theme.mediaQueries.lg} { - width: 112px; - } -` - -export const AllowButton = styled(ButtonBasic)` - background-color: var(--lido-color-secondary); - color: var(--lido-color-secondaryContrast); - - &:hover { - background-color: var(--lido-color-secondaryHover); - } -` - -export const DeclineButton = styled(ButtonBasic)` - background-color: var(--lido-color-foreground); - color: var(--lido-color-text); - border: 1px solid var(--lido-color-text); - - &:hover { - background-color: var(--lido-color-secondary); - color: var(--lido-color-secondaryContrast); - } -` diff --git a/packages/cookies-tooltip/utils.ts b/packages/cookies-tooltip/utils.ts deleted file mode 100644 index f1f2268c..00000000 --- a/packages/cookies-tooltip/utils.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { - setCrossDomainCookieClientSide, - getDomainCookieClientSide, - removeCookiesClientSide, - setDomainCookieClientSide, -} from '../utils/index.js' -import { - COOKIE_ALLOWED_KEY, - COOKIE_VALUE_NO, - COOKIE_VALUE_YES, -} from './constants.js' - -export const allowCookies = (): void => { - // For top level domain - *.some-domain.fi - setCrossDomainCookieClientSide(COOKIE_ALLOWED_KEY, COOKIE_VALUE_YES) - - if (!document.cookie.includes(`${COOKIE_ALLOWED_KEY}=${COOKIE_VALUE_YES}`)) { - // For specific.domain.fi, if cookie can't be set to top level domain - setDomainCookieClientSide(COOKIE_ALLOWED_KEY, COOKIE_VALUE_YES) - } -} - -export const declineCookies = (): void => { - // For top level domain - *.some-domain.fi - setCrossDomainCookieClientSide(COOKIE_ALLOWED_KEY, COOKIE_VALUE_NO) - - if (!document.cookie.includes(`${COOKIE_ALLOWED_KEY}=${COOKIE_VALUE_NO}`)) { - // For specific.domain.fi, if cookie can't be set to top level domain - setDomainCookieClientSide(COOKIE_ALLOWED_KEY, COOKIE_VALUE_NO) - } -} - -export const migrationAllowCookieToCrossDomainCookieClientSide = ( - keyOldCookie: string, -) => { - const old_cookie_value = getDomainCookieClientSide(keyOldCookie) - - if (!old_cookie_value) { - return - } - - removeCookiesClientSide(keyOldCookie) - - if (old_cookie_value === COOKIE_VALUE_YES) { - allowCookies() - } else if (old_cookie_value === COOKIE_VALUE_NO) { - declineCookies() - } - // else noop -} diff --git a/packages/data-table/DataTable.stories.tsx b/packages/data-table/DataTable.stories.tsx deleted file mode 100644 index 04e3d42a..00000000 --- a/packages/data-table/DataTable.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { - DataTable, - DataTableRow, - DataTableProps, - DataTableRowProps, -} from './index.js' - -export default { - component: DataTable, - title: 'Layout/DataTable', - parameters: { - layout: 'centered', - }, -} as Meta - -export const Base: StoryFn< - DataTableProps & Pick -> = ({ loading, ...rest }) => { - return ( -
- - - 100 LDO - - - $0.12 - - -
- ) -} - -Base.args = { - loading: false, -} - -export const WithHint: StoryFn = (props) => { - return ( -
- - - 10% - - $0.12 - -
- ) -} - -export const WithHighlighted: StoryFn = (props) => { - return ( -
- - - 10% - - $0.12 - -
- ) -} diff --git a/packages/data-table/DataTable.tsx b/packages/data-table/DataTable.tsx deleted file mode 100644 index 0dfc5161..00000000 --- a/packages/data-table/DataTable.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { InlineLoader } from '../loaders/index.js' -import { Tooltip } from '../tooltip/index.js' -import { - DataTableStyle, - DataTableRowStyle, - DataTableTitleStyle, - DataTableValueStyle, - DataTableQuestionStyle, -} from './DataTableStyles.js' -import { DataTableProps, DataTableRowProps } from './types.js' - -export const DataTableRow = forwardRef( - ( - { - title, - loading = false, - highlight = false, - help, - children, - ...rest - }: DataTableRowProps, - ref?: ForwardedRef, - ) => { - const hasHelper = !!help - - return ( - - - {title} - {hasHelper && ( - - - - )} - - - {loading ? : children} - - - ) - }, -) -DataTableRow.displayName = 'DataTableRow' - -export const DataTable = forwardRef( - (props: DataTableProps, ref?: ForwardedRef) => { - return - }, -) -DataTable.displayName = 'DataTable' diff --git a/packages/data-table/DataTableStyles.tsx b/packages/data-table/DataTableStyles.tsx deleted file mode 100644 index d2610637..00000000 --- a/packages/data-table/DataTableStyles.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { Question } from '../icons/index.js' - -export const DataTableStyle = styled.div`` - -export const DataTableRowStyle = styled.div` - display: flex; - margin: ${({ theme }) => theme.spaceMap.md}px 0; - font-weight: 400; - font-size: ${({ theme }) => theme.fontSizesMap.xxs}px; - line-height: 1.6em; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } -` - -export const DataTableTitleStyle = styled.div` - color: var(--lido-color-textSecondary); - flex-grow: 1; -` - -export const DataTableValueStyle = styled.div<{ $highlight: boolean }>` - color: var( - --lido-color-${({ $highlight }) => ($highlight ? `success` : `text`)} - ); - text-align: right; - margin-left: ${({ theme }) => theme.spaceMap.xxl}px; - flex-grow: 1; -` - -export const DataTableQuestionStyle = styled(Question)` - margin: -6px 0 -5px; - vertical-align: middle; -` diff --git a/packages/data-table/index.ts b/packages/data-table/index.ts deleted file mode 100644 index 6f6dcb22..00000000 --- a/packages/data-table/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './DataTable.js' -export * from './types.js' diff --git a/packages/data-table/types.tsx b/packages/data-table/types.tsx deleted file mode 100644 index f7506bf9..00000000 --- a/packages/data-table/types.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { ReactNode } from 'react' -import { LidoComponentProps } from '../utils/index.js' -export type { Theme } from '../theme/index.js' - -export type DataTableProps = LidoComponentProps<'div'> - -export type DataTableRowProps = LidoComponentProps< - 'div', - { - title: ReactNode - help?: ReactNode - loading?: boolean - highlight?: boolean - } -> diff --git a/packages/divider/Divider.stories.tsx b/packages/divider/Divider.stories.tsx deleted file mode 100644 index b06366f1..00000000 --- a/packages/divider/Divider.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import styled from '../utils/styled-components-wrapper.js' -import { - Divider, - DividerIndent, - DividerProps, - DividerType, - DividerTypes, -} from './index.js' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Divider, - title: 'Layout/Divider', - args: { - type: 'horizontal', - indents: 'md', - }, - argTypes: { - type: { - options: getOptions(DividerType), - control: 'inline-radio', - }, - indents: { - options: getOptions(DividerIndent), - control: 'inline-radio', - }, - }, -} as Meta - -const Wrapper = styled.div<{ $type?: DividerTypes }>` - flex-direction: ${({ $type }) => ($type === 'vertical' ? 'row' : 'column')}; - display: flex; -` - -export const Base: StoryFn = (props) => ( - - First - - Second - - Third - -) diff --git a/packages/divider/Divider.tsx b/packages/divider/Divider.tsx deleted file mode 100644 index 4aaf4007..00000000 --- a/packages/divider/Divider.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { DividerStyle } from './DividerStyles.js' -import { DividerProps } from './types.js' - -export const Divider = forwardRef( - ( - { type = 'horizontal', indents, children, ...rest }: DividerProps, - ref?: ForwardedRef, - ) => { - return - }, -) -Divider.displayName = 'Divider' diff --git a/packages/divider/DividerStyles.tsx b/packages/divider/DividerStyles.tsx deleted file mode 100644 index f6dd7e0a..00000000 --- a/packages/divider/DividerStyles.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import styled, { css } from '../utils/styled-components-wrapper.js' -import { Theme } from '../theme/index.js' -import { DividerIndents, DividerTypes } from './types.js' - -type InjectedProps = { - $type: DividerTypes - $indents?: DividerIndents - theme: Theme -} - -const getIndents = ({ $indents, theme }: InjectedProps) => { - return $indents ? `${theme.spaceMap[$indents]}px` : '0' -} - -const types = { - horizontal: css` - border-top: 1px solid currentcolor; - width: 100%; - height: 0; - margin: ${getIndents} 0; - `, - vertical: css` - border-left: 1px solid currentcolor; - align-self: stretch; - width: 0; - margin: 0 ${getIndents}; - `, -} - -export const DividerStyle = styled.div` - box-sizing: border-box; - list-style: none; - opacity: 0.1; - margin: 0; - padding: 0; - flex-shrink: 0; - flex-grow: 0; - - ${(props) => types[props.$type]} -` diff --git a/packages/divider/index.ts b/packages/divider/index.ts deleted file mode 100644 index aa5ad424..00000000 --- a/packages/divider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Divider.js' -export * from './types.js' diff --git a/packages/divider/types.tsx b/packages/divider/types.tsx deleted file mode 100644 index 9b156ee0..00000000 --- a/packages/divider/types.tsx +++ /dev/null @@ -1,26 +0,0 @@ -export type { Theme } from '../theme/index.js' -import { LidoComponentProps } from '../utils/index.js' - -export enum DividerType { - vertical, - horizontal, -} -export type DividerTypes = keyof typeof DividerType - -export enum DividerIndent { - xs, - sm, - md, - lg, - xl, -} -export type DividerIndents = keyof typeof DividerIndent - -export type DividerProps = LidoComponentProps< - 'div', - { - type?: DividerTypes - indents?: DividerIndents - children?: never - } -> diff --git a/packages/heading/Heading.stories.tsx b/packages/heading/Heading.stories.tsx deleted file mode 100644 index 548e4a79..00000000 --- a/packages/heading/Heading.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { - Heading, - H1, - H2, - H3, - HeadingProps, - HeadingColor, - HeadingSize, - HProps, -} from './index.js' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Heading, - title: 'Typography/Heading', - args: { - children: 'Example Heading', - color: 'text', - }, - argTypes: { - children: { - control: 'text', - }, - color: { - options: getOptions(HeadingColor), - control: 'inline-radio', - }, - }, -} as Meta - -export const Basic: StoryFn = (props) => - -Basic.args = { - size: 'md', -} - -Basic.argTypes = { - size: { - options: getOptions(HeadingSize), - control: 'inline-radio', - }, -} - -export const HeadingH1: StoryFn> = (props) =>

-export const HeadingH2: StoryFn> = (props) =>

-export const HeadingH3: StoryFn> = (props) =>

diff --git a/packages/heading/Heading.tsx b/packages/heading/Heading.tsx deleted file mode 100644 index 9bf71af4..00000000 --- a/packages/heading/Heading.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { HeadingStyle, H1Style, H2Style, H3Style } from './HeadingStyles.js' -import { HeadingProps, HProps } from './types.js' - -export const Heading = forwardRef( - ( - { size = 'md', color = 'text', ...rest }: HeadingProps, - ref?: ForwardedRef, - ) => { - return - }, -) -Heading.displayName = 'Heading' - -export const H1 = forwardRef( - ( - { color = 'text', ...rest }: HProps<'h1'>, - ref?: ForwardedRef, - ) => { - return - }, -) -H1.displayName = 'H1' - -export const H2 = forwardRef( - ( - { color = 'text', ...rest }: HProps<'h2'>, - ref?: ForwardedRef, - ) => { - return - }, -) -H2.displayName = 'H2' - -export const H3 = forwardRef( - ( - { color = 'text', ...rest }: HProps<'h3'>, - ref?: ForwardedRef, - ) => { - return - }, -) -H3.displayName = 'H3' diff --git a/packages/heading/HeadingStyles.tsx b/packages/heading/HeadingStyles.tsx deleted file mode 100644 index 3fb744c4..00000000 --- a/packages/heading/HeadingStyles.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import styled, { css } from '../utils/styled-components-wrapper.js' -import { Theme } from '../theme/index.js' -import { HeadingColors, HeadingSizes } from './types.js' - -export const sizes = { - sm: css` - font-size: ${({ theme }) => theme.fontSizesMap.xl}px; - line-height: 1.3em; - `, - md: css` - font-size: ${({ theme }) => theme.fontSizesMap.xxl}px; - line-height: 1.3em; - `, - lg: css` - font-size: ${({ theme }) => theme.fontSizesMap.xxxl}px; - line-height: 1.3em; - `, -} - -type InjectedProps = { - $color: HeadingColors - theme: Theme -} - -const getHeadingColor = (props: InjectedProps) => { - const colorsMap = { - text: `var(--lido-color-text)`, - secondary: `var(--lido-color-textSecondary)`, - } - return colorsMap[props.$color] -} - -const commonCSS = css` - margin: 0; - padding: 0; - font-weight: 800; - color: ${getHeadingColor}; -` - -export const HeadingStyle = styled.div` - ${commonCSS} - ${(props) => sizes[props.$size]} -` - -export const H1Style = styled.h1` - ${commonCSS} - ${sizes.lg} -` - -export const H2Style = styled.h2` - ${commonCSS} - ${sizes.md} -` - -export const H3Style = styled.h3` - ${commonCSS} - ${sizes.sm} -` diff --git a/packages/heading/index.tsx b/packages/heading/index.tsx deleted file mode 100644 index 5aca59a8..00000000 --- a/packages/heading/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Heading.js' -export * from './types.js' diff --git a/packages/heading/types.ts b/packages/heading/types.ts deleted file mode 100644 index f52b084b..00000000 --- a/packages/heading/types.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { LidoComponentProps } from '../utils/index.js' - -export enum HeadingColor { - text, - secondary, -} -export type HeadingColors = keyof typeof HeadingColor - -export enum HeadingSize { - sm, - md, - lg, -} -export type HeadingSizes = keyof typeof HeadingSize - -export type HeadingProps = LidoComponentProps< - 'div', - { - color?: HeadingColors - size?: HeadingSizes - } -> - -export type HProps = - LidoComponentProps< - T, - { - color?: HeadingColors - } - > diff --git a/packages/identicon/Identicon.stories.tsx b/packages/identicon/Identicon.stories.tsx deleted file mode 100644 index fb60aacf..00000000 --- a/packages/identicon/Identicon.stories.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { - Identicon, - IdenticonBadge, - IdenticonProps, - IdenticonBadgeProps, - IdenticonBadgeColor, -} from '.' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Identicon, - title: 'Images/Identicon', - args: { - address: '0x5a98fcbea516cf06857215779fd812ca3bef1b32', - diameter: 24, - }, - argTypes: { - diameter: { - control: { type: 'range', min: 4, max: 64, step: 4 }, - }, - }, -} as Meta - -export const Basic: StoryFn = (props) => ( - -) - -export const Badge: StoryFn = (props) => ( - -) - -Badge.args = { - symbols: 3, - color: 'background', -} - -Badge.argTypes = { - symbols: { - control: { type: 'range', min: 0, max: 21, step: 1 }, - }, - color: { - options: getOptions(IdenticonBadgeColor), - control: 'inline-radio', - }, -} diff --git a/packages/identicon/Identicon.tsx b/packages/identicon/Identicon.tsx deleted file mode 100644 index d6fc75c6..00000000 --- a/packages/identicon/Identicon.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { IdenticonProps } from './types.js' -import { IdenticonStyle } from './IdenticonStyles.js' -import _Jazzicon from 'react-jazzicon' - -// There is an error with importing jsNumberForAddress from 'react-jazzicon' as named export in ESM build -// Since the implementation is tiny, moving it here -const jsNumberForAddress = (address: string): number => { - const addr = address.slice(2, 10) - return parseInt(addr, 16) // seed -} - -//@ts-expect-error Property default doesn't exist on type -const Jazzicon = _Jazzicon.default || _Jazzicon - -export const Identicon = forwardRef( - ( - { diameter = 24, address, paperStyles, svgStyles, ...rest }: IdenticonProps, - ref?: ForwardedRef, - ) => { - return ( - - - - ) - }, -) -Identicon.displayName = 'Identicon' diff --git a/packages/identicon/IdenticonBadge.tsx b/packages/identicon/IdenticonBadge.tsx deleted file mode 100644 index 7751ff0f..00000000 --- a/packages/identicon/IdenticonBadge.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { Address } from '../address/index.js' -import { IdenticonBadgeProps } from './types.js' -import { IdenticonBadgeStyle, AddressWrapperStyle } from './IdenticonStyles.js' -import { Identicon } from './Identicon.js' - -export const IdenticonBadge = forwardRef( - ( - { - symbols = 3, - color = 'background', - diameter, - address, - paperStyles, - svgStyles, - ...rest - }: IdenticonBadgeProps, - ref?: ForwardedRef, - ) => { - return ( - - {symbols > 0 ? ( - -
- - ) : ( - '' - )} - - - ) - }, -) -IdenticonBadge.displayName = 'IdenticonBadge' diff --git a/packages/identicon/IdenticonStyles.tsx b/packages/identicon/IdenticonStyles.tsx deleted file mode 100644 index 24a68bed..00000000 --- a/packages/identicon/IdenticonStyles.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import styled, { css } from '../utils/styled-components-wrapper.js' -import { IdenticonBadgeColors } from './types.js' - -const colors = { - background: css` - background: var(--lido-color-background); - color: var(--lido-color-textSecondary); - `, - accent: css` - background: var(--lido-color-accentDarken); - color: var(--lido-color-accentContrast); - `, -} - -export const IdenticonBadgeStyle = styled.div<{ $color: IdenticonBadgeColors }>` - border-radius: 1000px; - padding: 4px; - margin: 0 6px; - display: inline-flex; - align-items: center; - - ${({ $color }) => colors[$color]} -` - -export const IdenticonStyle = styled.div` - border-radius: 1000px; - overflow: hidden; - line-height: 0; - display: inline-block; -` - -export const AddressWrapperStyle = styled.div` - padding: 0 6px; -` diff --git a/packages/identicon/declarations.d.ts b/packages/identicon/declarations.d.ts deleted file mode 100644 index dfc47d86..00000000 --- a/packages/identicon/declarations.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -declare module 'react-jazzicon' { - export function jsNumberForAddress(address: string): number - export default class Jazzicon extends React.PureComponent { - props: { - seed: number - diameter: number - paperStyles?: React.CSSProperties - svgStyles?: React.CSSProperties - } - } -} diff --git a/packages/identicon/index.ts b/packages/identicon/index.ts deleted file mode 100644 index fc15fdfe..00000000 --- a/packages/identicon/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './IdenticonBadge.js' -export * from './Identicon.js' -export * from './types.js' diff --git a/packages/identicon/types.ts b/packages/identicon/types.ts deleted file mode 100644 index eb38f140..00000000 --- a/packages/identicon/types.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { CSSProperties } from 'react' -import { LidoComponentProps } from '../utils/index.js' -export type { Theme } from '../theme/index.js' - -export type IdenticonProps = LidoComponentProps< - 'div', - { - address: string - diameter?: number - paperStyles?: CSSProperties - svgStyles?: CSSProperties - } -> - -export enum IdenticonBadgeColor { - background, - accent, -} -export type IdenticonBadgeColors = keyof typeof IdenticonBadgeColor - -export type IdenticonBadgeProps = { - symbols?: number - color?: IdenticonBadgeColors -} & IdenticonProps diff --git a/packages/input/Input.stories.tsx b/packages/input/Input.stories.tsx deleted file mode 100644 index f858ed8d..00000000 --- a/packages/input/Input.stories.tsx +++ /dev/null @@ -1,300 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { StoryFn, Meta } from '@storybook/react' -import { Eth } from '../icons/index.js' -import { Block } from '../block/index.js' -import { Button } from '../button/index.js' -import { Identicon } from '../identicon/index.js' -import { useCallback, useState } from 'react' -import { ModalProps } from '../modal/types.js' -import { Modal } from '../modal/Modal.js' -import { - Input, - InputProps, - InputType, - InputVariant, - InputColor, -} from './index.js' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Input, - title: 'Controls/Input', - args: { - disabled: false, - fullwidth: false, - active: false, - }, - argTypes: { - onChange: { - action: 'change', - table: { disable: true }, - }, - }, -} as Meta - -export const Basic: StoryFn = (props) => - -Basic.args = { - placeholder: 'Amount', - label: '', - type: 'text', -} - -Basic.argTypes = { - type: { - options: getOptions(InputType), - control: 'inline-radio', - }, - color: { - options: getOptions(InputColor), - control: 'inline-radio', - }, -} - -export const Small: StoryFn = (props) => - -Small.args = { - variant: 'small', - placeholder: 'Amount', -} - -Small.argTypes = { - variant: { - options: getOptions(InputVariant), - control: 'inline-radio', - }, -} - -export const Label: StoryFn = (props) => - -Label.args = { - label: 'Email address', -} -Label.argTypes = { - color: { - options: getOptions(InputColor), - control: 'inline-radio', - }, -} - -const EthIcon = styled(Eth)` - fill: var(--lido-color-text); -` - -const MaxButton = () => ( - -) - -export const WithDecorators: StoryFn = (props) => ( - } - rightDecorator={} - {...props} - /> -) - -WithDecorators.args = { - label: 'Amount', -} -WithDecorators.argTypes = { - color: { - options: getOptions(InputColor), - control: 'inline-radio', - }, -} - -export const WithIdenticon: StoryFn = (props) => { - const [value, setValue] = useState('') - - return ( - { - setValue(event.currentTarget.value) - props.onChange?.(event) - }} - rightDecorator={} - /> - ) -} - -WithIdenticon.args = { - placeholder: 'Ethereum address', -} - -export const WithButton: StoryFn = (props) => ( - - Subscribe - - } - {...props} - /> -) - -WithButton.args = { - fullwidth: true, - label: 'Email address', -} -WithButton.argTypes = { - color: { - options: getOptions(InputColor), - control: 'inline-radio', - }, -} - -export const WithError: StoryFn = (props) => - -WithError.args = { - fullwidth: true, - defaultValue: 'info@lido.', - label: 'Email address', - error: 'Email is invalid', -} -WithError.argTypes = { - color: { - options: getOptions(InputColor), - control: 'inline-radio', - }, -} - -export const WithWarning: StoryFn = (props) => - -WithWarning.args = { - fullwidth: true, - defaultValue: '10', - label: 'Token amount', - warning: 'Amount may be insufficient.', -} - -const Success = styled.span` - font-weight: 600; - font-size: ${({ theme }) => theme.fontSizesMap.xs}px; - color: var(--lido-color-success); -` - -export const WithSuccess: StoryFn = (props) => ( - Subscribed} {...props} /> -) - -WithSuccess.args = { - fullwidth: true, - disabled: true, - defaultValue: 'info@lido.fi', - success: - 'Thank you for subscribing! We will notify you once we kick off our platform.', -} - -export const AccentColor: StoryFn = (props) => { - const [value, setValue] = useState('') - - return ( - - { - setValue(event.currentTarget.value) - props.onChange?.(event) - }} - rightDecorator={} - color='accent' - /> - - - ) -} - -AccentColor.args = { - fullwidth: true, - label: '', - placeholder: 'Ethereum address', -} - -const useModal = ({ onClose, onBack }: ModalProps) => { - const [state, setState] = useState(false) - const handleOpen = useCallback(() => setState(true), []) - const handleClose = useCallback(() => { - setState(false) - onClose?.() - }, [onClose]) - const handleBack = useCallback(() => { - onBack?.() - }, [onBack]) - - return { state, handleOpen, handleClose, handleBack } -} - -export const ErrorsOverlapCase: StoryFn = (props) => { - const { state, handleOpen, handleClose } = useModal(props) - - return ( - <> - -
-
- -
-
- - - -
-
- -
-
-
- - - ) -} - -ErrorsOverlapCase.args = { - fullwidth: true, - label: 'Email address', - error: 'Email is invalid', -} -ErrorsOverlapCase.argTypes = { - color: { - options: getOptions(InputColor), - control: 'inline-radio', - }, -} diff --git a/packages/input/Input.tsx b/packages/input/Input.tsx deleted file mode 100644 index a4c30507..00000000 --- a/packages/input/Input.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { - InputWrapperStyle, - InputContentStyle, - InputControlWrapperStyle, - InputStyle, - InputLeftDecoratorStyle, - InputRightDecoratorStyle, - InputMessageStyle, -} from './InputStyles.js' -import { InputLabelStyle } from './LabelStyles.js' -import { InputProps } from './types.js' - -export const Input = forwardRef( - ( - { - label, - error, - warning, - success, - active = false, - fullwidth = false, - placeholder = ' ', - leftDecorator, - rightDecorator, - className, - style, - variant = 'default', - color = 'default', - id, - disabled = false, - wrapperRef, - children, - ...rest - }: InputProps, - ref?: ForwardedRef, - ) => { - const hasLabel = !!label && variant === 'default' - - const hasError = !!error - const hasErrorMessage = hasError && typeof error !== 'boolean' - const hasWarning = !hasError && !!warning // `error` overrides `warning` - const hasWarningMessage = hasWarning && typeof warning !== 'boolean' - const hasSuccess = !!success && !error - const hasSuccessMessage = hasSuccess && typeof success !== 'boolean' - - const hasLeftDecorator = !!leftDecorator - const hasRightDecorator = !!rightDecorator - - return ( - - - {hasLeftDecorator && ( - {leftDecorator} - )} - - - - {hasLabel && ( - {label} - )} - - - {hasRightDecorator && ( - - {rightDecorator} - - )} - - - {hasErrorMessage && ( - - {error} - - )} - {hasWarningMessage && ( - - {warning} - - )} - {hasSuccessMessage && ( - - {success} - - )} - - ) - }, -) -Input.displayName = 'Input' diff --git a/packages/input/InputGroup.stories.tsx b/packages/input/InputGroup.stories.tsx deleted file mode 100644 index 4b5214de..00000000 --- a/packages/input/InputGroup.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Input, InputGroup, InputGroupProps } from './index.js' - -export default { - component: Input, - title: 'Controls/InputGroup', - args: { - fullwidth: false, - }, -} as Meta - -export const Basic: StoryFn = (props) => ( - - - - -) diff --git a/packages/input/InputGroup.tsx b/packages/input/InputGroup.tsx deleted file mode 100644 index 7c651686..00000000 --- a/packages/input/InputGroup.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { ForwardedRef, forwardRef } from 'react' -import { InputMessageStyle } from './InputStyles.js' -import { InputGroupStyle, InputGroupContentStyle } from './InputGroupStyles.js' -import { InputGroupProps } from './types.js' - -export const InputGroup = forwardRef( - ( - { - fullwidth = false, - error, - success, - warning, - children, - ...rest - }: InputGroupProps, - ref?: ForwardedRef, - ) => { - const hasError = !!error - const hasSuccess = !!success && !error - const hasWarning = !hasError && !!warning // `error` overrides `warning` - - return ( - - {children} - {hasError && ( - {error} - )} - {hasSuccess && ( - {success} - )} - {hasWarning && ( - {warning} - )} - - ) - }, -) -InputGroup.displayName = 'InputGroup' diff --git a/packages/input/InputGroupStyles.ts b/packages/input/InputGroupStyles.ts deleted file mode 100644 index 6097ce32..00000000 --- a/packages/input/InputGroupStyles.ts +++ /dev/null @@ -1,32 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' -import { InputWrapperStyle, InputContentStyle } from './InputStyles.js' - -export const InputGroupStyle = styled.span<{ $fullwidth: boolean }>` - display: inline-flex; - position: relative; - width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')}; -` - -export const InputGroupContentStyle = styled.span` - display: flex; - width: 100%; - - & > ${InputWrapperStyle} { - margin: 0 -1px 0 0; - - &:first-child { - & ${InputContentStyle} { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - &:last-child { - & ${InputContentStyle} { - margin-right: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - } -` diff --git a/packages/input/InputStyles.ts b/packages/input/InputStyles.ts deleted file mode 100644 index 80d0b36d..00000000 --- a/packages/input/InputStyles.ts +++ /dev/null @@ -1,315 +0,0 @@ -import styled, { css } from '../utils/styled-components-wrapper.js' -import { InputMessageVariants, InputVariants, InputColors } from './types.js' -import { - labelEmptyValueCSS, - labelFocusCSS, - labelErrorCSS, - InputLabelStyle, - labelWarningCSS, -} from './LabelStyles.js' - -const statesCSS = css` - &:hover { - z-index: 1; - } - - &:focus-within { - z-index: 2; - border-color: var(--lido-color-borderActive); - - ${InputLabelStyle} { - ${labelFocusCSS} - } - } -` - -const activeCSS = css` - &, - &:hover, - &:focus-within { - z-index: 2; - border-color: var(--lido-color-borderActive); - - ${InputLabelStyle} { - ${labelFocusCSS} - } - } -` - -const errorCSS = css` - &, - &:hover, - &:focus-within { - border-color: var(--lido-color-error); - - ${InputLabelStyle} { - ${labelErrorCSS} - } - } -` - -const warningCSS = css` - &, - &:hover, - &:focus-within { - border-color: var(--lido-color-warning); - - ${InputLabelStyle} { - ${labelWarningCSS} - } - } -` - -const wrapperColors = { - default: css<{ $disabled: boolean }>` - background: var(--lido-color-controlBg); - border-color: var(--lido-color-border); - color: var(--lido-color-text); - - ${({ $disabled }) => - $disabled - ? `background: var(--lido-color-background);` - : ` - &:hover { - border-color: var(--lido-color-borderHover); - } - `}; - `, - accent: css<{ $disabled: boolean }>` - background: var(--lido-color-accentControlBg); - border-color: var(--lido-color-accentBorder); - color: var(--lido-color-accentText); - - ${({ $disabled }) => - $disabled - ? `background: var(--lido-color-controlBg);` - : ` - &:hover { - border-color: var(--lido-color-accentBorderHover); - } - `}; - `, -} - -const decoratorCSS = css` - flex-grow: 0; - flex-shrink: 0; - cursor: inherit; - display: flex; - align-items: center; -` - -export const InputLeftDecoratorStyle = styled.span` - ${decoratorCSS} - padding-right: 16px; -` - -export const InputRightDecoratorStyle = styled.span` - ${decoratorCSS} - padding-left: 16px; -` - -export const InputWrapperStyle = styled.label<{ - $fullwidth: boolean - $disabled: boolean -}>` - position: relative; - display: inline-flex; - align-items: stretch; - box-sizing: border-box; - cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')}; - width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')}; -` - -const contentVariants = { - default: css` - padding-top: 17px; - padding-bottom: 17px; - - & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} { - margin-top: -17px; - margin-bottom: -17px; - } - `, - small: css` - padding-top: 9px; - padding-bottom: 9px; - - & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} { - padding-top: -9px; - padding-bottom: -9px; - } - `, -} - -export const InputContentStyle = styled.span<{ - $error: boolean - $warning: boolean - $active: boolean - $disabled: boolean - $color: InputColors - $variant: InputVariants -}>` - position: relative; - display: flex; - flex-grow: 1; - padding-left: 15px; - padding-right: 15px; - font-weight: 400; - font-size: ${({ theme }) => theme.fontSizesMap.xs}px; - border: 1px solid; - border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; - transition: border-color ${({ theme }) => theme.duration.fast} ease; - - ${({ $variant }) => contentVariants[$variant]}; - ${({ $color }) => wrapperColors[$color]}; - ${({ $disabled }) => ($disabled ? '' : statesCSS)}; - ${({ $active }) => ($active ? activeCSS : '')}; - ${({ $warning }) => ($warning ? warningCSS : '')}; - ${({ $error }) => ($error ? errorCSS : '')}; -` - -export const InputControlWrapperStyle = styled.div` - position: relative; - display: flex; - flex-grow: 1; -` - -const labeledCSS = css` - &:not(:focus):placeholder-shown { - & + ${InputLabelStyle} { - ${labelEmptyValueCSS} - } - - &::placeholder { - opacity: 0; - } - } -` - -const inputColors = { - default: css` - color: var(--lido-color-text); - - &:disabled { - color: var(--lido-color-textSecondary); - } - - &::placeholder { - color: var(--lido-color-textSecondary); - } - - &:-webkit-autofill { - box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important; - color: var(--lido-color-text) !important; - -webkit-text-fill-color: var(--lido-color-text) !important; - } - - &:-internal-autofill-selected { - color: var(--lido-color-text) !important; - -webkit-text-fill-color: var(--lido-color-text) !important; - } - `, - accent: css` - color: var(--lido-color-accentText); - opacity: 1; - - &:disabled { - color: var(--lido-color-accentText); - opacity: 0.5; - } - - &::placeholder { - color: var(--lido-color-accentText); - opacity: 0.5; - } - - &:-webkit-autofill { - box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important; - color: var(--lido-color-accentContrast) !important; - -webkit-text-fill-color: var(--lido-color-accentContrast) !important; - } - - &:-internal-autofill-selected { - color: var(--lido-color-accentContrast) !important; - -webkit-text-fill-color: var(--lido-color-accentContrast) !important; - } - `, -} - -export const InputStyle = styled.input<{ - $labeled: boolean - $color: InputColors -}>` - width: 100%; - font-family: inherit; - font-weight: 400; - font-size: 1em; - line-height: 1.43em; - padding: 0; - border-radius: 0; - background: transparent; - box-shadow: none; - border: none; - outline: none; - position: relative; - top: ${({ $labeled }) => ($labeled ? 8 : 0)}px; - - &::placeholder { - transition: opacity ${({ theme }) => theme.duration.fast} ease; - } - - ${({ $color }) => inputColors[$color]} - ${({ $labeled }) => ($labeled ? labeledCSS : '')} -` - -export const TextareaStyle = styled(InputStyle).attrs({ - as: 'textarea', -})` - resize: none; -` - -const messageVariants = { - error: css` - background: var(--lido-color-error); - color: var(--lido-color-errorContrast); - box-shadow: ${({ theme }) => theme.boxShadows.sm} - var(--lido-color-shadowLight); - `, - warning: css` - background: var(--lido-color-warning); - color: var(--lido-color-warningContrast); - box-shadow: ${({ theme }) => theme.boxShadows.sm} - var(--lido-color-shadowLight); - `, - success: css` - background: var(--lido-color-success); - color: var(--lido-color-successContrast); - box-shadow: ${({ theme }) => theme.boxShadows.sm} - var(--lido-color-shadowLight); - `, -} - -export const InputMessageStyle = styled.span<{ - $variant: InputMessageVariants - $bordered?: boolean - $wrap?: boolean -}>` - margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px; - left: ${({ $bordered }) => ($bordered ? -1 : 0)}px; - position: absolute; - top: 100%; - line-height: 1.6em; - font-weight: 400; - font-size: ${({ theme }) => theme.fontSizesMap.xxs}px; - border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px; - padding: 6px 10px; - white-space: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')}; - overflow: hidden; - box-sizing: border-box; - text-overflow: ellipsis; - max-width: ${({ $bordered }) => ($bordered ? 'calc(100% + 2px)' : '100%')}; - z-index: 3; - - ${({ $variant }) => messageVariants[$variant]} -` diff --git a/packages/input/LabelStyles.ts b/packages/input/LabelStyles.ts deleted file mode 100644 index a3f34b85..00000000 --- a/packages/input/LabelStyles.ts +++ /dev/null @@ -1,60 +0,0 @@ -import styled, { css } from '../utils/styled-components-wrapper.js' -import { InputColors } from './types.js' - -const colors = { - default: css` - color: var(--lido-color-textSecondary); - `, - accent: css` - color: var(--lido-color-accentContrastSecondary); - `, -} - -export const labelEmptyValueCSS = css<{ $color: InputColors }>` - ${({ $color }) => colors[$color]} - - transform: scale(1); - opacity: 0.5; -` - -export const labelFilledValueCSS = css<{ $color: InputColors }>` - ${({ $color }) => colors[$color]} - - transform: translateY(-14px) scale(0.75); - opacity: 1; -` - -export const labelFocusCSS = css` - color: var(--lido-color-primary); - opacity: 1; -` - -export const labelErrorCSS = css` - color: var(--lido-color-error); -` - -export const labelWarningCSS = css` - color: var(--lido-color-warning); -` - -export const InputLabelStyle = styled.span` - position: absolute; - left: 0; - top: 50%; - font-size: 1em; - line-height: 1.25em; - margin: -0.625em 0 0 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - color: inherit; - transform-origin: 0% 100%; - transition: transform ${({ theme }) => theme.duration.fast} ease; - transition-property: transform, opacity, color; - ${labelFilledValueCSS}; -` - -export const TextareaLabelStyle = styled(InputLabelStyle)` - top: 10px; -` diff --git a/packages/input/OptionsSlider.stories.tsx b/packages/input/OptionsSlider.stories.tsx deleted file mode 100644 index 832d8b50..00000000 --- a/packages/input/OptionsSlider.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { useState } from 'react' -import { OptionsSlider, SliderInputProps } from './index.js' - -export default { - component: OptionsSlider, - title: 'Controls/OptionsSlider', - args: { - disabled: false, - fullwidth: false, - active: false, - }, - argTypes: { - onChange: { - action: 'change', - table: { disable: true }, - }, - }, -} as Meta - -export const Basic: StoryFn = (props) => { - const [value, setValue] = useState('weekly') - return ( - setValue(val as string)} - options={[ - { value: 'weekly', label: 'Weekly' }, - { value: 'monthly', label: 'Monthly' }, - { value: 'quarterly', label: 'Quarterly' }, - { value: 'yearly', label: 'Yearly' }, - ]} - /> - ) -} diff --git a/packages/input/OptionsSlider.tsx b/packages/input/OptionsSlider.tsx deleted file mode 100644 index c75fbfb8..00000000 --- a/packages/input/OptionsSlider.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { SliderInput } from './SliderInput.js' -import { OptionsSliderInputProps } from './types.js' - -export const OptionsSlider = ({ - options, - value, - onChange, - ...rest -}: OptionsSliderInputProps) => { - let sliderIndex = options.findIndex((option) => option.value === value) - - if (sliderIndex === -1) { - sliderIndex = 0 - } - - const max = options.length - 1 - - const getLabel = (optionIndex: number) => { - return options[optionIndex].label - } - - const handleSliderChange = (e: React.ChangeEvent) => { - const optionIndex = Number(e.target.value) - onChange(options[optionIndex].value, optionIndex) - } - - const labels = options.map(({ label }, index) => ({ value: index, label })) - return ( - - onChange(options[optionIndex].value, optionIndex) - } - {...rest} - /> - ) -} diff --git a/packages/input/SliderInput.stories.tsx b/packages/input/SliderInput.stories.tsx deleted file mode 100644 index 9b05ce16..00000000 --- a/packages/input/SliderInput.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { useState } from 'react' -import { SliderInput, SliderInputProps } from './index.js' - -export default { - component: SliderInput, - title: 'Controls/SliderInput', - args: { - disabled: false, - fullwidth: false, - active: false, - }, - argTypes: { - onChange: { - action: 'change', - table: { disable: true }, - }, - }, -} as Meta - -export const Basic: StoryFn = (props) => { - const [value, setValue] = useState(100000) - return ( - setValue(Number(e.target.value))} - getLabel={(value) => `${value} DOT`} - minLabel={'0 DOT'} - maxLabel={'1000000 DOT'} - max={1000000} - /> - ) -} diff --git a/packages/input/SliderInput.tsx b/packages/input/SliderInput.tsx deleted file mode 100644 index bb220239..00000000 --- a/packages/input/SliderInput.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { - Label, - LabelButton, - LabelContainer, - RangeInputSlider, - Slider, - SliderWrapper, - Track, -} from './SliderInputStyles.js' -import { SliderInputProps } from './types.js' - -export const SliderInput = ({ - value, - onChange, - onLabelClick, - min = 0, - max = 100, - step = 1, - minLabel, - maxLabel, - getLabel = (val) => String(val), - borderNone, - labels, - ...rest -}: SliderInputProps) => { - const fillPercentage = ((value - min) / (max - min)) * 100 - const LabelComponent = onLabelClick ? LabelButton : Label - const createClickHandler = (value: number) => () => onLabelClick?.(value) - - return ( - - - {getLabel(value)} - - - - - {minLabel && ( - - {minLabel} - - )} - {labels?.map(({ value, label }) => ( - - {label} - - ))} - {maxLabel && ( - - {maxLabel} - - )} - - - ) -} diff --git a/packages/input/SliderInputStyles.ts b/packages/input/SliderInputStyles.ts deleted file mode 100644 index a717ddf0..00000000 --- a/packages/input/SliderInputStyles.ts +++ /dev/null @@ -1,150 +0,0 @@ -import styled from '../utils/styled-components-wrapper.js' - -export const RangeInputSlider = styled.input` - width: 100%; - background-color: transparent; - -webkit-appearance: none; - position: absolute; - margin: 0; - top: 56px; - left: 0; - right: 0; - - &:focus { - outline: none; - } - - &::-webkit-slider-runnable-track { - background: transparent; - border: 0; - border-radius: 10px; - width: 100%; - height: 2px; - cursor: pointer; - } - - &::-webkit-slider-thumb { - margin-top: -8px; - width: 18px; - height: 18px; - background: #ffffff; - box-shadow: - 0 0.5px 4px rgba(0, 0, 0, 0.12), - 0 6px 13px rgba(0, 0, 0, 0.12); - border: 0; - border-radius: 50px; - cursor: pointer; - -webkit-appearance: none; - } - - &::-moz-range-track { - background: #00a3ff; - border: 0; - border-radius: 10px; - width: 100%; - height: 2px; - cursor: pointer; - } - - &::-moz-range-thumb { - width: 18px; - height: 18px; - background: #ffffff; - border: 0; - border-radius: 50px; - cursor: pointer; - } - - &::-ms-track { - background: transparent; - color: transparent; - width: 100%; - height: 2px; - cursor: pointer; - } -` - -export const Track = styled.div<{ - fillPercentage: number - borderNone?: boolean -}>` - height: 1px; - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: var(--lido-color-border); - - ${(props) => - props.borderNone && - ` - background: none; - `}; - - &:before { - content: ''; - position: absolute; - display: block; - height: 2px; - bottom: 0; - left: 0; - background: var(--lido-color-primary); - width: ${(props) => props.fillPercentage || 0}%; - } -` - -export const Slider = styled.div<{ - borderNone?: boolean -}>` - position: relative; - height: 56px; - padding: 16px 20px; - box-sizing: border-box; - - background: var(--lido-color-accentControlBg); - border-right: 1px solid var(--lido-color-border); - border-left: 1px solid var(--lido-color-border); - border-top: 1px solid var(--lido-color-border); - - ${(props) => - props.borderNone && - ` - border-right: none; - border-left: none; - border-top: none; - `}; - - border-radius: 10px; - overflow: hidden; -` - -export const SliderWrapper = styled.div` - position: relative; -` - -export const LabelContainer = styled.div` - display: flex; - justify-content: space-between; - margin-top: 8px; -` - -export const Label = styled.span` - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 20px; - color: var(--lido-color-text); - opacity: 0.5; -` - -export const LabelButton = styled.button` - border: none; - background-color: transparent; - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 20px; - color: var(--lido-color-text); - opacity: 0.5; - cursor: pointer; -` diff --git a/packages/input/Textarea.stories.tsx b/packages/input/Textarea.stories.tsx deleted file mode 100644 index 65178dd2..00000000 --- a/packages/input/Textarea.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Textarea, TextareaProps } from './index.js' - -export default { - component: Textarea, - title: 'Controls/Textarea', - args: { - disabled: false, - fullwidth: false, - active: false, - }, - argTypes: { - onChange: { - action: 'change', - table: { disable: true }, - }, - }, -} as Meta - -export const Basic: StoryFn = (props) =>