diff --git a/packages/index.ts b/packages/index.ts index 3255f717..61598447 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ export * from './hooks/index.js' export * from './icons/index.js' export * from './transition/index.js' diff --git a/packages/tabs/icons/tab-icon-arbitrum.svg b/packages/tabs/icons/tab-icon-arbitrum.svg deleted file mode 100644 index cabe7579..00000000 --- a/packages/tabs/icons/tab-icon-arbitrum.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/tabs/icons/tab-icon-optimizm.svg b/packages/tabs/icons/tab-icon-optimizm.svg deleted file mode 100644 index 6123fef4..00000000 --- a/packages/tabs/icons/tab-icon-optimizm.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts deleted file mode 100644 index 3fb765f1..00000000 --- a/packages/tabs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './tabs' diff --git a/packages/tabs/tabs.module.css b/packages/tabs/tabs.module.css deleted file mode 100644 index eec936c9..00000000 --- a/packages/tabs/tabs.module.css +++ /dev/null @@ -1,138 +0,0 @@ -.tabs { - --local-tab-icon-size: var(--undefined); - - display: flex; - gap: 10px; - padding: 6px; -} - -.tab { - flex: 1 1 0; - position: relative; - border: 1px solid var(--lido-color-borders-fog); - background-color: transparent; - cursor: pointer; - - &::before { - content: ''; - position: absolute; - inset: -7px; - border: 3px solid transparent; - border-radius: var(--lido-border-radius-100); - transition: border-color 0.35s ease; - } - - &:hover { - color: var(--lido-color-accent-ocean); - border-color: var(--lido-color-borders-water); - } - - &.active { - color: var(--lido-color-secondary); - border-radius: var(--lido-border-radius-100); - background-color: var(--lido-color-primary); - transition-property: color, background-color, outline; - transition-duration: 0.35s; - transition-timing-function: ease-in-out; - } - - &.active::before { - border-color: var(--lido-color-accent-ocean); - } - - &:disabled { - color: var(--lido-color-primary-20); - border-color: var(--lido-color-borders-fog); - } -} - -.button { - font-weight: var(--lido-font-weight-bold); - border-radius: var(--lido-border-radius-100); - - .rightDecorator { - color: var(--lido-color-primary-50); - font-weight: var(--lido-font-weight-regular); - font-size: var(--lido-font-size-subheader); - line-height: var(--lido-line-height-subheader); - margin-left: 6px; - } - - &:hover { - .rightDecorator { - color: var(--lido-color-borders-water); - } - } - - &.active { - .rightDecorator { - color: var(--lido-color-secondary-72); - } - } - - &:disabled { - .rightDecorator { - color: var(--lido-color-primary-20); - } - } - - &.sizeM { - min-height: 52px; - padding: 10px 20px; - font-size: 17px; - line-height: 31px; - } - - &.sizeL { - min-height: 70px; - padding: 15px 30px; - font-size: var(--lido-font-size-subheader); - line-height: var(--lido-line-height-subheader); - } - - &.sizeXL { - min-height: 120px; - - /* there are no designs provided for size XL */ - } -} - -.icon { - display: flex; - align-items: center; - justify-content: center; - border-radius: 100%; - width: var(--local-tab-icon-size); - height: var(--local-tab-icon-size); - - > * { - width: 100%; - height: 100%; - } - - &.sizeM { - padding: 4px; - width: var(--local-tab-icon-size, 52px); - height: var(--local-tab-icon-size, 52px); - } - - &.sizeL { - padding: 10px; - width: var(--local-tab-icon-size, 64px); - height: var(--local-tab-icon-size, 64px); - } - - &.sizeXL { - padding: 10px; - width: var(--local-tab-icon-size, 92px); - height: var(--local-tab-icon-size, 92px); - } - - &:disabled { - svg { - path { - fill: var(--lido-color-primary-20) !important; - } - } - } -} diff --git a/packages/tabs/tabs.stories.tsx b/packages/tabs/tabs.stories.tsx deleted file mode 100644 index d5c78e91..00000000 --- a/packages/tabs/tabs.stories.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { Tabs } from '.' -// import TabIconOrbitrum from "./icons/tab-icon-arbitrum.svg"; -// import TabIconOptimizm from "./icons/tab-icon-optimizm.svg"; - -const meta = { - title: 'Layout/Tabs', - component: Tabs, - parameters: { - layout: 'centered', - }, - args: { - type: 'buttons', - size: 'm', - }, - argTypes: { - activeKey: { - control: { - type: 'number', - }, - }, - type: { - table: { - disable: true, - }, - }, - items: { - table: { - disable: true, - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta - -export default meta -type Story = StoryObj - -export const TabButtons: Story = { - args: { - items: [ - { - key: '1', - children: 'Tab', - }, - { - key: '2', - children: 'Taaaaaaaaaaaaaaaaaaaaaaaaab', - rightDecorator: 3, - }, - { - key: '3', - children: 'Yet Another Tab', - }, - { - key: '4', - disabled: true, - children: 'Disabled tab', - }, - ], - }, -} - -export const TabIcons: Story = { - args: { - type: 'icons', - items: [ - { - key: '1', - children: 'text', - }, - { - key: '2', - children: 'text', - }, - { - key: '3', - disabled: true, - children: 'text', - }, - ], - }, -} diff --git a/packages/tabs/tabs.tsx b/packages/tabs/tabs.tsx deleted file mode 100644 index 288e5404..00000000 --- a/packages/tabs/tabs.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { - ComponentPropsWithoutRef, - MouseEvent, - ReactNode, - useEffect, - useState, -} from 'react' -import styles from './tabs.module.css' -import cn from 'classnames' - -export type TabBaseItem = { - key: string - disabled?: boolean - children?: ReactNode -} - -export type TabIconItem = TabBaseItem & { - rightDecorator?: never -} - -export type TabButtonItem = TabBaseItem & { - rightDecorator?: ReactNode -} - -export type TabsBaseProps = Omit< - ComponentPropsWithoutRef<'div'>, - 'onChange' -> & { - size?: 'm' | 'l' | 'xl' - defaultKey?: string - activeKey?: string - onKeyChange?: (key: string) => unknown -} - -export type TabsButtonProps = TabsBaseProps & { - type?: 'buttons' - items?: TabButtonItem[] -} - -export type TabsIconProps = TabsBaseProps & { - type?: 'icons' - items?: TabIconItem[] -} - -export type TabsProps = TabsButtonProps | TabsIconProps - -export const Tabs = ({ - type = 'buttons', - size = 'm', - defaultKey, - activeKey: _activeKey, - items, - onKeyChange, - className, - ...rest -}: TabsProps) => { - const [activeKey, setActiveKey] = useState( - undefined, - ) - - useEffect(() => { - setActiveKey(defaultKey) - }, [defaultKey]) - - useEffect(() => { - if (_activeKey != null) { - setActiveKey(_activeKey) - } else { - const firstItem = items?.[0] - if (firstItem == null) { - return - } - setActiveKey(firstItem.key) - } - }, [_activeKey, items]) - - const handleClick = (key: string) => (event: MouseEvent) => { - event.preventDefault() - onKeyChange?.(key) - if (_activeKey != null) { - return - } - setActiveKey(key) - } - - return ( -
- {items?.map((item) => ( - - ))} -
- ) -} diff --git a/packages/text/index.ts b/packages/text/index.ts deleted file mode 100644 index 1693b580..00000000 --- a/packages/text/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './text' diff --git a/packages/text/text.module.css b/packages/text/text.module.css deleted file mode 100644 index d154ed7b..00000000 --- a/packages/text/text.module.css +++ /dev/null @@ -1,70 +0,0 @@ -.text { - margin: 0; - padding: 0; -} - -.xxs { - font-size: var(--lido-font-size-xxs); - line-height: 1.5em; -} - -.xs { - font-size: var(--lido-font-size-xs); - line-height: 1.5em; -} - -.sm { - font-size: var(--lido-font-size-sm); - line-height: 1.5em; -} - -.md { - font-size: var(--lido-font-size-md); - line-height: 1.5em; -} - -.lg { - font-size: var(--lido-font-size-lg); - line-height: 1.4em; -} - -.xl { - font-size: var(--lido-font-size-xl); - line-height: 1.4em; -} - -.italic { - font-style: italic; -} - -.underline { - text-decoration: underline; -} - -.strikeThrough { - text-decoration: line-through; -} - -.default { - color: var(--lido-color-text); -} - -.secondary { - color: var(--lido-color-text-secondary); -} - -.primary { - color: var(--lido-color-primary); -} - -.warning { - color: var(--lido-color-warning); -} - -.error { - color: var(--lido-color-error); -} - -.success { - color: var(--lido-color-success); -} diff --git a/packages/text/text.stories.tsx b/packages/text/text.stories.tsx deleted file mode 100644 index 73f70cd6..00000000 --- a/packages/text/text.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { StoryFn, Meta } from '@storybook/react' -import { Text, TextProps, TextColor, TextSize } from './' - -const getOptions = (enumObject: Record) => - Object.values(enumObject).filter((value) => typeof value === 'string') - -export default { - component: Text, - title: 'Typography/Text', - args: { - children: 'Example Text', - color: 'default', - size: 'md', - underline: false, - strikeThrough: false, - strong: false, - italic: false, - }, - argTypes: { - children: { - control: 'text', - }, - color: { - options: getOptions(TextColor), - control: 'inline-radio', - }, - size: { - options: getOptions(TextSize), - control: 'inline-radio', - }, - }, -} satisfies Meta - -export const Basic: StoryFn = (props) => diff --git a/packages/text/text.tsx b/packages/text/text.tsx deleted file mode 100644 index 669a34aa..00000000 --- a/packages/text/text.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' -import cn from 'classnames' -import styles from './text.module.css' - -export enum TextColor { - default, - secondary, - primary, - warning, - error, - success, -} -export type TextColors = keyof typeof TextColor - -export enum TextSize { - xxs, - xs, - sm, - md, - lg, - xl, -} -export type TextSizes = keyof typeof TextSize - -export type TextWeight = 400 | 500 | 700 | 800 | string | number - -export type TextProps = ComponentPropsWithoutRef<'p'> & { - color?: TextColors - size?: TextSizes - weight?: TextWeight - underline?: boolean - strikeThrough?: boolean - strong?: boolean - italic?: boolean -} - -export const Text = forwardRef( - ( - { - size = 'md', - weight = 400, - color = 'default', - underline, - italic, - strikeThrough, - strong, - className, - ...rest - }: TextProps, - ref?: ForwardedRef, - ) => { - return ( -

- ) - }, -) -Text.displayName = 'Text' diff --git a/packages/theme-css/theme-toggler/theme-toggler.stories.tsx b/packages/theme-css/theme-toggler/theme-toggler.stories.tsx index 8f59073a..7b9cf2bb 100644 --- a/packages/theme-css/theme-toggler/theme-toggler.stories.tsx +++ b/packages/theme-css/theme-toggler/theme-toggler.stories.tsx @@ -1,7 +1,6 @@ import { StoryFn, Meta } from '@storybook/react' import { Block } from '../../block' import { ContentTheme } from '../content-theme' -import { Text } from '../../text' import { ThemeToggler } from './' export default { @@ -20,11 +19,11 @@ export const Basic: StoryFn = () => ( and reload page!

- The block depended by theme cookie +

The block depended by theme cookie

Lorem ipsum dolor sit amet...

- Example of using ContentTheme component +

Example of using ContentTheme component

You see only dark content!} lightContent={You see only light content!} diff --git a/packages/tooltip/Tooltip.stories.tsx b/packages/tooltip/Tooltip.stories.tsx deleted file mode 100644 index 3e9224e9..00000000 --- a/packages/tooltip/Tooltip.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { Tooltip } from '.' - -const meta = { - title: 'Dialogs/Tooltip', - component: Tooltip, - parameters: { - layout: 'centered', - }, - args: { - icon: { - size: 'big', - color: 'black', - }, - position: 'right', - content: - 'Under normal circumstances. The withdrawal time may take longer under special circumstances', - }, - tags: ['autodocs'], -} satisfies Meta - -export default meta - -type Story = StoryObj - -export const Basic: Story = {} - -export const Content: Story = { - args: { - children: 'Hover me', - position: 'right', - content: - 'Under normal circumstances. The withdrawal time may take longer under special circumstances', - }, -} diff --git a/packages/tooltip/index.ts b/packages/tooltip/index.ts deleted file mode 100644 index fa5a7e52..00000000 --- a/packages/tooltip/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './tooltip' diff --git a/packages/tooltip/infoIcon/icon-info.stories.tsx b/packages/tooltip/infoIcon/icon-info.stories.tsx deleted file mode 100644 index f438eaaf..00000000 --- a/packages/tooltip/infoIcon/icon-info.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { InfoIcon } from '.' - -const meta = { - title: 'Layout/InfoIcon', - component: InfoIcon, - parameters: { - layout: 'centered', - }, - args: { - size: 'big', - color: 'black', - }, - tags: ['autodocs'], -} satisfies Meta - -export default meta - -type Story = StoryObj - -export const Basic: Story = {} diff --git a/packages/tooltip/infoIcon/index.ts b/packages/tooltip/infoIcon/index.ts deleted file mode 100644 index f34ceb11..00000000 --- a/packages/tooltip/infoIcon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './infoIcon' diff --git a/packages/tooltip/infoIcon/info-icon.module.css b/packages/tooltip/infoIcon/info-icon.module.css deleted file mode 100644 index 1ee41a18..00000000 --- a/packages/tooltip/infoIcon/info-icon.module.css +++ /dev/null @@ -1,42 +0,0 @@ -.infoIcon { - display: block; - transition: color 0.5s; - - &:hover { - transition: color 0.3s; - } -} - -.big { - width: 24px; - height: 24px; -} - -.small { - width: 15px; - height: 15px; -} - -.black { - color: var(--lido-color-primary-72); - - &:hover { - color: var(--lido-color-primary-50); - } -} - -.ocean { - color: var(--lido-color-accent-ocean); - - &:hover { - color: var(--lido-color-accent-sky); - } -} - -.white { - color: var(--lido-color-secondary-72); - - &:hover { - color: var(--lido-color-secondary); - } -} diff --git a/packages/tooltip/infoIcon/infoIcon.tsx b/packages/tooltip/infoIcon/infoIcon.tsx deleted file mode 100644 index dba11c5e..00000000 --- a/packages/tooltip/infoIcon/infoIcon.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' -import s from './info-icon.module.css' -import cn from 'classnames' - -export type InfoIconProps = React.SVGProps & { - size?: 'small' | 'big' - color?: 'black' | 'ocean' | 'white' -} - -export const InfoIcon = React.forwardRef(function InfoIcon( - { className, color = 'black', size = 'big', ...rest }: InfoIconProps, - svgRef?: React.Ref, -) { - return ( - - - - - ) -}) diff --git a/packages/tooltip/tooltip.module.css b/packages/tooltip/tooltip.module.css deleted file mode 100644 index 4a760d9c..00000000 --- a/packages/tooltip/tooltip.module.css +++ /dev/null @@ -1,61 +0,0 @@ -.tooltip { - position: relative; - - &:hover { - .content { - display: block; - } - } -} - -.content { - z-index: 9; - display: none; - position: absolute; - width: max-content; - max-width: 224px; - box-sizing: border-box; - padding: 24px; - background-color: var(--lido-color-primary-72); - backdrop-filter: blur(20px); - color: var(--lido-color-secondary); - border-radius: var(--lido-border-radius-24); - - &.right { - top: 0; - transform: translateY(-45%); - left: calc(100% + 10px); - } - - &.bottomRight { - top: 0; - left: calc(100% + 10px); - } - - &.topRight { - bottom: calc(100% - 2px); - left: calc(100% - 3px); - } - - &.bottomCenter { - top: calc(100% + 3px); - left: 50%; - transform: translateX(-50%); - } - - &.cardBottom { - top: calc(100% + 5px); - left: 0; - transform: translateX(-60%); - } -} - -.icon-black { - color: var(--lido-color-primary-72); - transition: color 0.5s; - - &:hover { - color: var(--lido-color-primary-50); - transition: color 0.3s; - } -} diff --git a/packages/tooltip/tooltip.tsx b/packages/tooltip/tooltip.tsx deleted file mode 100644 index 4825b0df..00000000 --- a/packages/tooltip/tooltip.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { ReactNode } from 'react' -import cn from 'classnames' -import styles from './tooltip.module.css' -import { InfoIcon, InfoIconProps } from './infoIcon' -import { LidoComponentProps } from 'packages/utils' - -export type TooltipProps = LidoComponentProps< - 'div', - { - content?: ReactNode - position?: - | 'right' - | 'bottom-right' - | 'top-right' - | 'bottom-center' - | 'card-bottom' - icon?: { - size?: InfoIconProps['size'] - color?: InfoIconProps['color'] - } - } -> - -export const Tooltip = ({ - content, - position = 'right', - icon, - className, - children, - ...rest -}: TooltipProps) => { - return ( -
- {children || } - -
- {content} -
-
- ) -}