From 233cb1a8538604a8f2ce851d2010a9dfeea47230 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 26 Sep 2023 19:38:39 +0600 Subject: [PATCH] feat(plasma-hope): Remove `Radiobox` component --- packages/plasma-hope/api/plasma-hope.api.md | 25 -- .../components/Checkbox/Checkbox.props.tsx | 16 -- .../src/components/Checkbox/Checkbox.tsx | 249 ------------------ .../src/components/Checkbox/Icons.tsx | 55 ---- .../src/components/Checkbox/index.ts | 2 - .../src/components/Radiobox/RadioGroup.tsx | 14 - .../components/Radiobox/Radiobox.props.tsx | 18 -- .../src/components/Radiobox/Radiobox.tsx | 131 --------- .../src/components/Radiobox/index.ts | 3 - packages/plasma-hope/src/index.ts | 2 - 10 files changed, 515 deletions(-) delete mode 100644 packages/plasma-hope/src/components/Checkbox/Checkbox.props.tsx delete mode 100644 packages/plasma-hope/src/components/Checkbox/Checkbox.tsx delete mode 100644 packages/plasma-hope/src/components/Checkbox/Icons.tsx delete mode 100644 packages/plasma-hope/src/components/Checkbox/index.ts delete mode 100644 packages/plasma-hope/src/components/Radiobox/RadioGroup.tsx delete mode 100644 packages/plasma-hope/src/components/Radiobox/Radiobox.props.tsx delete mode 100644 packages/plasma-hope/src/components/Radiobox/Radiobox.tsx delete mode 100644 packages/plasma-hope/src/components/Radiobox/index.ts diff --git a/packages/plasma-hope/api/plasma-hope.api.md b/packages/plasma-hope/api/plasma-hope.api.md index 68fb617075..f593a6cd54 100644 --- a/packages/plasma-hope/api/plasma-hope.api.md +++ b/packages/plasma-hope/api/plasma-hope.api.md @@ -24,7 +24,6 @@ import { AsProps } from '@salutejs/plasma-core'; import { BadgeProps as BadgeProps_2 } from '@salutejs/plasma-core'; import { BadgeSize } from '@salutejs/plasma-core'; import { badgeSizes } from '@salutejs/plasma-core'; -import type { BaseboxProps } from '@salutejs/plasma-core'; import { BlurProps } from '@salutejs/plasma-core'; import { blurs } from '@salutejs/plasma-core'; import { Body1 } from '@salutejs/plasma-core'; @@ -483,16 +482,6 @@ export interface CellProps { description: string; } -// @public -export const Checkbox: React_2.ForwardRefExoticComponent>; - -// Warning: (ae-forgotten-export) The symbol "SizeProps" needs to be exported by the entry point index.d.ts -// -// @public (undocumented) -export interface CheckboxProps extends Omit, Partial { - indeterminate?: boolean; -} - // @public (undocumented) export function clearSelection(): void; @@ -1038,20 +1027,6 @@ export interface ProgressProps { value: number; } -// @public -export const Radiobox: React_2.ForwardRefExoticComponent>; - -// Warning: (ae-forgotten-export) The symbol "SizeProps_2" needs to be exported by the entry point index.d.ts -// -// @public (undocumented) -export interface RadioboxProps extends Omit, Partial { -} - -// Warning: (ae-forgotten-export) The symbol "RadioGroupProps" needs to be exported by the entry point index.d.ts -// -// @public (undocumented) -export const RadioGroup: React_2.ForwardRefExoticComponent>; - export { radiuses } export { Ratio } diff --git a/packages/plasma-hope/src/components/Checkbox/Checkbox.props.tsx b/packages/plasma-hope/src/components/Checkbox/Checkbox.props.tsx deleted file mode 100644 index 7f4c9913b4..0000000000 --- a/packages/plasma-hope/src/components/Checkbox/Checkbox.props.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export const sizes = { - m: { - width: '1.25rem', - height: '1.25rem', - outLineRadius: '0.375rem', - contentTopOffset: '0.1875rem', - contentLeftOffset: '0.75rem', - }, - s: { - width: '0.875rem', - height: '0.875rem', - outLineRadius: '0.25rem', - contentTopOffset: '0.0625rem', - contentLeftOffset: '0.5625rem', - }, -}; diff --git a/packages/plasma-hope/src/components/Checkbox/Checkbox.tsx b/packages/plasma-hope/src/components/Checkbox/Checkbox.tsx deleted file mode 100644 index 522a2e622b..0000000000 --- a/packages/plasma-hope/src/components/Checkbox/Checkbox.tsx +++ /dev/null @@ -1,249 +0,0 @@ -import React, { forwardRef, useRef, useMemo } from 'react'; -import styled, { css, FlattenSimpleInterpolation } from 'styled-components'; -import { - BaseboxRoot, - BaseboxInput, - BaseboxTrigger, - BaseboxContent, - BaseboxContentWrapper, - BaseboxLabel, - BaseboxDescription, - accent, - secondary, - transparent, - useForkRef, - useUniqId, - addFocus, -} from '@salutejs/plasma-core'; -import type { BaseboxProps } from '@salutejs/plasma-core'; -import { caption, footnote1 } from '@salutejs/plasma-tokens-b2b'; - -import { extractTextFrom } from '../../utils'; - -import { Done, Indeterminate } from './Icons'; -import { sizes } from './Checkbox.props'; - -interface SizeProps { - /** - * Размер контрола. - */ - size: keyof typeof sizes; -} - -export interface CheckboxProps extends Omit, Partial { - /** - * Неопределенное состояние компонента - когда часть потомков не выбрана. - */ - indeterminate?: boolean; -} - -const getCustomFocusRuleset = ( - ruleset: FlattenSimpleInterpolation, - outlineSize: string, - outlineOffset: string, - outlineRadius: string, -) => { - const outlineColor = ruleset[3]; - - const style = `&::before { - top: -${outlineOffset}; - left: -${outlineOffset}; - right: -${outlineOffset}; - bottom: -${outlineOffset}; - border-radius: ${outlineRadius}; - box-shadow: 0 0 0 ${outlineSize} ${outlineColor}; - }`; - - return [ruleset, style]; -}; - -export const syntheticFocus = (outlineRadius: string) => ( - ruleset: FlattenSimpleInterpolation, - focused?: boolean, -) => css` - input[data-focus-visible-added] + label & { - border-color: transparent; - ${getCustomFocusRuleset(ruleset, '0.125rem', '0.188rem', outlineRadius)} - } - - input[data-focus-visible-added]:checked + label &, - input[type='checkbox'][data-focus-visible-added]:indeterminate + label & { - ${getCustomFocusRuleset(ruleset, '0.063rem', '0.25rem', `calc(${outlineRadius} + 0.125rem)`)} - } - - ${focused && ruleset}; -`; -export const StyledRoot = styled(BaseboxRoot)<{ $disabled?: boolean }>` - /* stylelint-disable-next-line number-max-precision */ - margin-left: 0.1875rem; /* ToDo: Выпилить, v2.0 Привести к единому стилю с UI */ - /* stylelint-disable-next-line number-max-precision */ - margin-bottom: 0.1875rem; /* ToDo: Выпилить, v2.0 Привести к единому стилю с UI */ - - ${({ $disabled }) => $disabled && 'cursor: not-allowed;'} -`; -export const StyledInput = styled(BaseboxInput)` - /* Спрятать от IE */ - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0 0 0 0); -`; - -export const StyledTrigger = styled(BaseboxTrigger)<{ outlineRadius?: string } & SizeProps>` - /* stylelint-disable-next-line number-max-precision */ - margin: 0.1875rem 0; /* ToDo: Выпилить, v2.0 Привести к единому стилю с UI */ - - ${({ size }) => css` - width: ${sizes[size].width}; - height: ${sizes[size].height}; - border-radius: ${sizes[size].outLineRadius}; - `} - - display: flex; - align-items: center; - justify-content: center; - - background: ${transparent}; - border: 0.125rem solid ${secondary}; - - flex-shrink: 0; - flex-grow: 0; - - /* stylelint-disable-next-line */ - input[type='checkbox']:indeterminate + label & { - background: ${accent}; - border-color: ${accent}; - } - - /* stylelint-disable-next-line */ - input:disabled + label & { - opacity: 0.4; - cursor: inherit; - } - - /* stylelint-disable-next-line */ - input:checked + label & { - background: ${accent}; - border-color: ${accent}; - } - - /* stylelint-disable-next-line */ - input:checked:disabled + label & { - opacity: 0.4; - background: ${accent}; - } - - ${({ outlineRadius = '0.375rem' }) => css` - ${addFocus({ - synthesizeFocus: syntheticFocus(outlineRadius), - outlineRadius, - })} - `} -`; -export const StyledContent = styled(BaseboxContent)` - overflow: hidden; - ${({ size }) => css` - margin-top: ${sizes[size].contentTopOffset}; - margin-left: ${sizes[size].contentLeftOffset}; - `} - - /* stylelint-disable-next-line */ - input:disabled + label & { - opacity: 0.4; - } -`; -export const StyledLabel = styled(BaseboxLabel)` - ${({ size }) => size === 's' && footnote1}; -`; -export const StyledDescription = styled(BaseboxDescription)` - ${({ size }) => size === 's' && caption}; -`; -const StyledDone = styled(Done)` - transform: scale(0); - transition: transform 0.15s ease-in-out; - - /* stylelint-disable-next-line */ - input:checked + label ${BaseboxTrigger} & { - transform: scale(1); - } -`; -const StyledIndeterminate = styled(Indeterminate)` - background: ${accent}; - - ${({ size }) => css` - border-radius: ${sizes[size].outLineRadius}; - `} -`; - -/** - * Флажок или *чекбокс*. Позволяет пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено. - */ -// eslint-disable-next-line prefer-arrow-callback -export const Checkbox = forwardRef(function Checkbox( - { - size = 'm', - id, - label, - description, - indeterminate, - disabled, - style, - className, - 'aria-label': ariaLabelExternal, - singleLine = false, - ...rest - }, - ref, -) { - const inputRef = useRef(null); - const forkRef = useForkRef(inputRef, ref); - - React.useEffect(() => { - if (inputRef.current) { - inputRef.current.indeterminate = Boolean(indeterminate); - } - }, [inputRef, indeterminate]); - - const uniqId = useUniqId(); - const uniqLabelId = useUniqId(); - const uniqDescriptionId = useUniqId(); - const checkboxId = id || uniqId; - const ariaLabel = useMemo(() => ariaLabelExternal || extractTextFrom(label), [ariaLabelExternal, label]); - - return ( - - - - - {indeterminate ? : } - - - {label && ( - - {label} - - )} - {description && ( - - {description} - - )} - - - - ); -}); diff --git a/packages/plasma-hope/src/components/Checkbox/Icons.tsx b/packages/plasma-hope/src/components/Checkbox/Icons.tsx deleted file mode 100644 index 0846d17329..0000000000 --- a/packages/plasma-hope/src/components/Checkbox/Icons.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { white } from '@salutejs/plasma-tokens-b2b'; -import styled from 'styled-components'; - -const sizesRem = { - s: 0.875, // 14px - m: 1.25, // 20px -}; - -interface SvgProps { - size: string | number; - color?: string; -} - -const DoneSvg: React.FC = ({ size, color }) => ( - - - -); -const IndeterminateSvg: React.FC = ({ size, color }) => ( - - - -); - -interface IconProps { - size: keyof typeof sizesRem; - color?: string; - className?: string; -} - -const StyledRoot = styled.div` - display: inline-flex; -`; - -// TODO: https://github.com/salute-developers/plasma/issues/206 -export const Done: React.FC = ({ size, color = white, className }) => { - return ( - - - - ); -}; - -// TODO: https://github.com/salute-developers/plasma/issues/206 -export const Indeterminate: React.FC = ({ size, color = white, className }) => { - return ( - - - - ); -}; diff --git a/packages/plasma-hope/src/components/Checkbox/index.ts b/packages/plasma-hope/src/components/Checkbox/index.ts deleted file mode 100644 index 43aaf92503..0000000000 --- a/packages/plasma-hope/src/components/Checkbox/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Checkbox } from './Checkbox'; -export type { CheckboxProps } from './Checkbox'; diff --git a/packages/plasma-hope/src/components/Radiobox/RadioGroup.tsx b/packages/plasma-hope/src/components/Radiobox/RadioGroup.tsx deleted file mode 100644 index 75f5d4c976..0000000000 --- a/packages/plasma-hope/src/components/Radiobox/RadioGroup.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { RadioGroup as Base } from '@salutejs/plasma-core'; - -interface RadioGroupProps { - children: React.ReactNode; -} - -export const RadioGroup = React.forwardRef(({ children, ...rest }, ref) => { - return ( - - {children} - - ); -}); diff --git a/packages/plasma-hope/src/components/Radiobox/Radiobox.props.tsx b/packages/plasma-hope/src/components/Radiobox/Radiobox.props.tsx deleted file mode 100644 index c59076a4f6..0000000000 --- a/packages/plasma-hope/src/components/Radiobox/Radiobox.props.tsx +++ /dev/null @@ -1,18 +0,0 @@ -export const sizes = { - m: { - width: '1.375rem', - height: '1.375rem', - outLineRadius: '1.125rem', - ellipseSize: '0.625rem', - contentTopOffset: '0.25rem', - contentLeftOffset: '0.6875rem', - }, - s: { - width: '1rem', - height: '1rem', - outLineRadius: '1.125rem', - ellipseSize: '0.5rem', - contentTopOffset: '0.1rem', - contentLeftOffset: '0.5rem', - }, -}; diff --git a/packages/plasma-hope/src/components/Radiobox/Radiobox.tsx b/packages/plasma-hope/src/components/Radiobox/Radiobox.tsx deleted file mode 100644 index d76985c5ee..0000000000 --- a/packages/plasma-hope/src/components/Radiobox/Radiobox.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import React, { forwardRef, useMemo } from 'react'; -import styled, { css } from 'styled-components'; -import { BaseboxContentWrapper, useUniqId, white } from '@salutejs/plasma-core'; -import type { BaseboxProps } from '@salutejs/plasma-core'; - -import { extractTextFrom } from '../../utils'; -import { - StyledRoot as CheckboxRoot, - StyledInput as CheckboxInput, - StyledTrigger as CheckboxTrigger, - StyledContent, - StyledLabel as CheckboxLabel, - StyledDescription as CheckboxDescription, -} from '../Checkbox/Checkbox'; - -import { sizes } from './Radiobox.props'; - -interface SizeProps { - /** - * Размер контрола. - */ - size: keyof typeof sizes; -} - -export interface RadioboxProps extends Omit, Partial {} - -const StyledTrigger = styled(CheckboxTrigger)` - ${({ size }) => css` - width: ${sizes[size].width}; - height: ${sizes[size].height}; - border-radius: ${sizes[size].outLineRadius}; - `} - - flex-shrink: 0; -`; - -const StyledEllipse = styled.div` - ${({ size }) => css` - width: ${sizes[size].ellipseSize}; - height: ${sizes[size].ellipseSize}; - border-radius: ${sizes[size].ellipseSize}; - `} - - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - - margin: auto; - - background-color: ${white}; - transition: transform 0.3s ease-in-out; - transform: scale(0); - - /* stylelint-disable-next-line selector-nested-pattern, selector-type-no-unknown */ - input:checked + label ${StyledTrigger} & { - transform: scale(1); - } -`; - -const CheckboxContent = styled(StyledContent)` - overflow: hidden; - ${({ size }) => css` - margin-top: ${sizes[size].contentTopOffset}; - margin-left: ${sizes[size].contentLeftOffset}; - `} -`; - -/** - * Переключатель, или *радиокнопка*. - */ -// eslint-disable-next-line prefer-arrow-callback -export const Radiobox = forwardRef(function Radiobox( - { - size = 'm', - id, - label, - description, - disabled, - style, - className, - 'aria-label': ariaLabelExternal, - singleLine = false, - ...rest - }, - ref, -) { - const uniqId = useUniqId(); - const uniqLabelId = useUniqId(); - const uniqDescriptionId = useUniqId(); - const radioboxId = id || uniqId; - const ariaLabel = useMemo(() => ariaLabelExternal || extractTextFrom(label), [ariaLabelExternal, label]); - - return ( - - - - - - - - {label && ( - - {label} - - )} - {description && ( - - {description} - - )} - - - - ); -}); diff --git a/packages/plasma-hope/src/components/Radiobox/index.ts b/packages/plasma-hope/src/components/Radiobox/index.ts deleted file mode 100644 index 71e7bba644..0000000000 --- a/packages/plasma-hope/src/components/Radiobox/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { Radiobox } from './Radiobox'; -export { RadioGroup } from './RadioGroup'; -export type { RadioboxProps } from './Radiobox'; diff --git a/packages/plasma-hope/src/index.ts b/packages/plasma-hope/src/index.ts index e8f50e9d6b..7c2070fed5 100644 --- a/packages/plasma-hope/src/index.ts +++ b/packages/plasma-hope/src/index.ts @@ -5,7 +5,6 @@ export * from './components/Calendar'; export * from './components/Card'; export * from './components/Carousel'; export * from './components/Cell'; -export * from './components/Checkbox'; export * from './components/Editable'; export * from './components/ElasticGrid'; export * from './components/Dropdown'; @@ -19,7 +18,6 @@ export * from './components/Popup'; export * from './components/Price'; export * from './components/Progress'; export * from './components/PreviewGallery'; -export * from './components/Radiobox'; export * from './components/Select'; export * from './components/Skeleton'; export * from './components/SSRProvider';