From 0ff7f1e46019f825190bb3e824a410f95776afe0 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Mon, 13 Jul 2026 13:15:12 +0200 Subject: [PATCH 1/3] [UIK-5566][button] rewrite component to NS --- playground/entries/Button.tsx | 6 +- playground/entries/Hint.tsx | 4 +- playground/utils/renderIcon.tsx | 4 +- semcore/add-filter/src/AddFilter.types.ts | 4 +- semcore/base-trigger/src/index.d.ts | 8 +- .../bulk-textarea/src/BulkTextarea.types.ts | 4 +- .../button/src/component/Button/Button.tsx | 40 +++--- .../src/component/Button/Button.type.ts | 117 +++++++++++------- .../src/component/Button/SpinButton.tsx | 19 --- .../mappers/BUTTON_SIZE_TO_SPIN_SIZE.ts | 8 ++ .../mappers/BUTTON_USE_TO_DEFAULT_THEME.ts | 7 ++ .../src/component/ButtonLink/ButtonLink.tsx | 9 +- .../component/ButtonLink/ButtonLink.type.ts | 54 +++++--- semcore/button/src/index.ts | 1 + semcore/date-picker/src/index.d.ts | 40 +++--- .../src/components/button/Button.tsx | 6 +- .../src/components/button/Button.type.ts | 6 +- .../feedback-form/src/FeedbackForm.type.ts | 4 +- .../submit-button/SubmitButton.type.ts | 4 +- semcore/fullscreen-modal/src/index.d.ts | 4 +- semcore/modal/src/Modal.type.ts | 4 +- semcore/notice/src/Notice.type.ts | 4 +- semcore/pagination/src/Pagination.type.ts | 8 +- semcore/side-panel/src/SidePanel.type.ts | 4 +- semcore/wizard/src/Wizard.types.ts | 6 +- .../button/docs/button_docs.stories.tsx | 5 +- .../button/tests/examples/button-base.tsx | 4 +- .../tests/examples/button-icon-only.tsx | 4 +- .../examples/button-link/button-link-base.tsx | 4 +- .../button-link/button-link-icon-only.tsx | 4 +- .../button-link/button-link-in-text.tsx | 4 +- .../examples/button-neighbor-location.tsx | 4 +- .../tests/examples/button-with-ellipsis.tsx | 4 +- stories/components/button/tests/themeUtils.ts | 8 +- .../tests/examples/button.tsx | 4 +- website/docs/components/button/button-api.md | 4 +- .../writing-code/examples/making-wrappers.tsx | 3 +- 37 files changed, 235 insertions(+), 192 deletions(-) delete mode 100644 semcore/button/src/component/Button/SpinButton.tsx create mode 100644 semcore/button/src/component/Button/mappers/BUTTON_SIZE_TO_SPIN_SIZE.ts create mode 100644 semcore/button/src/component/Button/mappers/BUTTON_USE_TO_DEFAULT_THEME.ts diff --git a/playground/entries/Button.tsx b/playground/entries/Button.tsx index 170a0b0481..bfd2339918 100644 --- a/playground/entries/Button.tsx +++ b/playground/entries/Button.tsx @@ -1,4 +1,4 @@ -import type { ButtonLinkProps, ButtonProps } from '@semcore/ui/button'; +import type { NSButton, NSButtonLink } from '@semcore/ui/button'; import Button, { ButtonLink } from '@semcore/ui/button'; import React from 'react'; @@ -13,8 +13,8 @@ type AdditionalJSXProps = { beforeIcon: boolean; afterIcon: boolean; }; -type ButtonComponentJSXProps = JSXProps & AdditionalJSXProps<'Button'>; -type ButtonLinkComponentJSXProps = JSXProps & AdditionalJSXProps<'ButtonLink'>; +type ButtonComponentJSXProps = JSXProps & AdditionalJSXProps<'Button'>; +type ButtonLinkComponentJSXProps = JSXProps & AdditionalJSXProps<'ButtonLink'>; export type ButtonJSXProps = ButtonComponentJSXProps | ButtonLinkComponentJSXProps; diff --git a/playground/entries/Hint.tsx b/playground/entries/Hint.tsx index f086384521..445e1e457c 100644 --- a/playground/entries/Hint.tsx +++ b/playground/entries/Hint.tsx @@ -1,13 +1,13 @@ import FileExportM from '@semcore/icon/FileExport/m'; import Button from '@semcore/ui/button'; -import type { ButtonProps } from '@semcore/ui/button'; +import type { NSButton } from '@semcore/ui/button'; import React from 'react'; import type { JSXProps } from '../types/JSXProps'; import type { PlaygroundEntry } from '../types/Playground'; import createGithubLink from '../utils/createGHLink'; -export type HintJSXProps = JSXProps & Pick; +export type HintJSXProps = JSXProps & Pick; function getJSX({ handleControlChange, ...props }: HintJSXProps) { return ( diff --git a/playground/utils/renderIcon.tsx b/playground/utils/renderIcon.tsx index cd6647d121..1ec9e0d4b4 100644 --- a/playground/utils/renderIcon.tsx +++ b/playground/utils/renderIcon.tsx @@ -2,7 +2,7 @@ import ArrowRightL from '@semcore/icon/ArrowRight/l'; import ArrowRightM from '@semcore/icon/ArrowRight/m'; import CheckL from '@semcore/icon/Check/l'; import CheckM from '@semcore/icon/Check/m'; -import type { ButtonProps } from '@semcore/ui/button'; +import type { NSButton } from '@semcore/ui/button'; import type { NSText } from '@semcore/ui/typography'; import React from 'react'; @@ -49,7 +49,7 @@ const SizeToIconMap = { }, }; -const renderIcon = (position: 'before' | 'after', size: NSText.Props['size'] | ButtonProps['size']) => { +const renderIcon = (position: 'before' | 'after', size: NSText.Props['size'] | NSButton.Props['size']) => { if (!size) return null; return SizeToIconMap[size][position] ?? null; diff --git a/semcore/add-filter/src/AddFilter.types.ts b/semcore/add-filter/src/AddFilter.types.ts index 5145e64bc7..e4632cda70 100644 --- a/semcore/add-filter/src/AddFilter.types.ts +++ b/semcore/add-filter/src/AddFilter.types.ts @@ -1,6 +1,6 @@ import type { FlexProps } from '@semcore/base-components'; import type { FilterTrigger } from '@semcore/base-trigger'; -import type { ButtonLink } from '@semcore/button'; +import type { NSButtonLink } from '@semcore/button'; import type { Intergalactic } from '@semcore/core'; import type Dropdown from '@semcore/dropdown'; import type { DropdownTriggerProps } from '@semcore/dropdown'; @@ -116,7 +116,7 @@ declare namespace NSAddFilter { } namespace Clear { - type Component = typeof ButtonLink; + type Component = NSButtonLink.Component; } type Component = Intergalactic.Component & { diff --git a/semcore/base-trigger/src/index.d.ts b/semcore/base-trigger/src/index.d.ts index c89c3777b8..4d8356cb0a 100644 --- a/semcore/base-trigger/src/index.d.ts +++ b/semcore/base-trigger/src/index.d.ts @@ -1,5 +1,5 @@ import type { Box, BoxProps, NeighborItemProps } from '@semcore/base-components'; -import type { ButtonLinkProps, ButtonLink } from '@semcore/button'; +import type { NSButtonLink } from '@semcore/button'; import type { Intergalactic } from '@semcore/core'; import type { WithAnimatedSizeEnhanceProps } from '@semcore/core/lib/utils/enhances/animatedSizeEnhance'; import type { NSCounter } from '@semcore/counter'; @@ -46,7 +46,7 @@ export type ButtonTriggerProps = Omit & { chevron?: boolean; }; -export type LinkTriggerProps = ButtonLinkProps & { +export type LinkTriggerProps = NSButtonLink.Props & { /** Sets the loading state */ loading?: boolean; /** Placeholder text */ @@ -82,8 +82,8 @@ declare const ButtonTrigger: Intergalactic.Component<'div', ButtonTriggerProps> }; declare const LinkTrigger: Intergalactic.Component<'div', LinkTriggerProps> & { - Text: typeof ButtonLink.Text; - Addon: typeof ButtonLink.Addon; + Text: NSButtonLink.Text.Component; + Addon: NSButtonLink.Addon.Component; }; declare const FilterTrigger: Intergalactic.Component<'div', FilterTriggerProps> & { diff --git a/semcore/bulk-textarea/src/BulkTextarea.types.ts b/semcore/bulk-textarea/src/BulkTextarea.types.ts index 5ca2408d4b..32c89be1d5 100644 --- a/semcore/bulk-textarea/src/BulkTextarea.types.ts +++ b/semcore/bulk-textarea/src/BulkTextarea.types.ts @@ -1,5 +1,5 @@ import type { BoxProps } from '@semcore/base-components'; -import type Button from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { Intergalactic } from '@semcore/core'; import type { CounterProps } from './components/Counter'; @@ -159,6 +159,6 @@ export type BulkTextareaType = BulkTextareaComponen BulkTextareaInputFieldProps >; Counter: Intergalactic.Component<'div', Partial>; - ClearAll: typeof Button; + ClearAll: NSButton.Component; ErrorsNavigation: Intergalactic.Component<'div', Partial>; }; diff --git a/semcore/button/src/component/Button/Button.tsx b/semcore/button/src/component/Button/Button.tsx index 96a0c63bd6..1b93763dac 100644 --- a/semcore/button/src/component/Button/Button.tsx +++ b/semcore/button/src/component/Button/Button.tsx @@ -1,32 +1,28 @@ import { NeighborLocation, Box, Hint } from '@semcore/base-components'; +import type { Intergalactic } from '@semcore/core'; import { Component, CORE_INSTANCE, createComponent, Root, sstyled } from '@semcore/core'; import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren'; import hasLabels from '@semcore/core/lib/utils/hasLabels'; import logger from '@semcore/core/lib/utils/logger'; +import Spin from '@semcore/spin'; import { Text } from '@semcore/typography'; import React from 'react'; import style from './button.shadow.css'; -import type { ButtonProps, ButtonAddonProps, ButtonTextProps, ButtonComponent, ButtonDefaultProps } from './Button.type'; -import SpinButton from './SpinButton'; +import type { NSButton } from './Button.type'; +import { BUTTON_SIZE_TO_SPIN_SIZE } from './mappers/BUTTON_SIZE_TO_SPIN_SIZE'; +import { BUTTON_USE_TO_DEFAULT_THEME } from './mappers/BUTTON_USE_TO_DEFAULT_THEME'; -export const MAP_USE_DEFAULT_THEME: Record = { - primary: 'info', - secondary: 'muted', - tertiary: 'info', -}; - -type State = { - ariaLabelledByContent: null | string; -}; +/** @deprecated It will be removed in v18. */ +export const MAP_USE_DEFAULT_THEME = BUTTON_USE_TO_DEFAULT_THEME; export class RootButton extends Component< - ButtonProps, + Intergalactic.InternalTypings.InferComponentProps, [], never, {}, - State, - ButtonDefaultProps + NSButton.State, + NSButton.DefaultProps > { static displayName = 'Button'; static style = style; @@ -37,7 +33,7 @@ export class RootButton extends Component< containerRef = React.createRef(); - state: State = { + state: NSButton.State = { ariaLabelledByContent: null, }; @@ -81,7 +77,7 @@ export class RootButton extends Component< const { styles, use, - theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use], + theme = typeof use === 'string' && BUTTON_USE_TO_DEFAULT_THEME[use], loading, disabled = loading, size, @@ -143,7 +139,11 @@ export class RootButton extends Component< {loading && ( - + )} @@ -164,12 +164,12 @@ export class RootButton extends Component< } } -function ButtonText(props: ButtonTextProps) { +function ButtonText(props: Intergalactic.InternalTypings.InferChildComponentProps) { const SText = Root; return sstyled(props.styles)(); } -function Addon(props: ButtonAddonProps) { +function Addon(props: Intergalactic.InternalTypings.InferChildComponentProps) { const SAddon = Root; return sstyled(props.styles)(); } @@ -180,7 +180,7 @@ function Addon(props: ButtonAddonProps) { * {@link https://developer.semrush.com/intergalactic/components/button/button-api/|API} | {@link https://developer.semrush.com/intergalactic/components/button/button-code/|Examples} */ const Button = createComponent< - ButtonComponent, + NSButton.Component, typeof RootButton >(RootButton, { Text: ButtonText, diff --git a/semcore/button/src/component/Button/Button.type.ts b/semcore/button/src/component/Button/Button.type.ts index 8c04a0f7a4..dd8671ad98 100644 --- a/semcore/button/src/component/Button/Button.type.ts +++ b/semcore/button/src/component/Button/Button.type.ts @@ -3,55 +3,82 @@ import type { Intergalactic, PropGetterFn } from '@semcore/core'; import type { NSText } from '@semcore/typography'; import type React from 'react'; -export type ButtonProps = BoxProps & - NeighborItemProps & { - /** Button activity state */ - active?: boolean; - /** Disabled button state */ - disabled?: boolean; - /** Loading button state */ - loading?: boolean; - /** Tag for the left Addon */ - addonLeft?: React.ElementType; - /** Tag for the right Addon */ - addonRight?: React.ElementType; - /** - * Placement for hint - * @default top - */ - hintPlacement?: SimpleHintPopperProps['placement']; - - /** Button size. - * @default `m` - */ - size?: 'l' | 'm'; - /** Button usage. - * @default `primary` - */ - use?: 'primary' | 'secondary' | 'tertiary'; - /** Button theme. - * @default undefined - */ - theme?: 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert'; +declare namespace NSButton { + type Size = 'l' | 'm'; + type Theme = 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert'; + type Use = 'primary' | 'secondary' | 'tertiary'; + type Props = BoxProps & + NeighborItemProps & { + /** Button activity state */ + active?: boolean; + /** Disabled button state */ + disabled?: boolean; + /** Loading button state */ + loading?: boolean; + /** Tag for the left Addon */ + addonLeft?: React.ElementType; + /** Tag for the right Addon */ + addonRight?: React.ElementType; + /** + * Placement for hint + * @default top + */ + hintPlacement?: SimpleHintPopperProps['placement']; + + /** Button size. + * @default `m` + */ + size?: NSButton.Size; + /** Button usage. + * @default `primary` + */ + use?: 'primary' | 'secondary' | 'tertiary'; + /** Button theme. + * @default undefined + */ + theme?: NSButton.Theme; + }; + type DefaultProps = { + use: 'secondary'; + size: 'm'; + }; + type State = { + ariaLabelledByContent: null | string; + }; + type Ctx = { + getTextProps: PropGetterFn; + getAddonProps: PropGetterFn; }; -export type ButtonDefaultProps = { - use: 'secondary'; - size: 'm'; -}; + namespace Text { + type Props = NSText.Props; -export type ButtonTextProps = NSText.Props; + type Component = Intergalactic.Component<'span', Props>; + } -export type ButtonAddonProps = BoxProps; + namespace Addon { + type Props = BoxProps; -export type ButtonContext = { - getTextProps: PropGetterFn; - getAddonProps: PropGetterFn; -}; + type Component = Intergalactic.Component<'span', Props>; + } + + type Component = Intergalactic.Component<'button', Props, Ctx> & { + Text: Text.Component; + Addon: Addon.Component; + }; +} -export type ButtonChildren = { - Text: Intergalactic.Component<'span', ButtonTextProps>; - Addon: Intergalactic.Component<'span', ButtonAddonProps>; -}; +/** @deprecated It will be removed in v18. */ +export type ButtonProps = NSButton.Props; +/** @deprecated It will be removed in v18. */ +export type ButtonDefaultProps = NSButton.DefaultProps; +/** @deprecated It will be removed in v18. */ +export type ButtonTextProps = NSButton.Text.Props; +/** @deprecated It will be removed in v18. */ +export type ButtonAddonProps = NSButton.Addon.Props; +/** @deprecated It will be removed in v18. */ +export type ButtonContext = NSButton.Ctx; +/** @deprecated It will be removed in v18. */ +export type ButtonComponent = NSButton.Component; -export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & ButtonChildren; +export type { NSButton }; diff --git a/semcore/button/src/component/Button/SpinButton.tsx b/semcore/button/src/component/Button/SpinButton.tsx deleted file mode 100644 index 2e9f3e56e1..0000000000 --- a/semcore/button/src/component/Button/SpinButton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Spin from '@semcore/spin'; -import React from 'react'; - -export const SPIN_SIZE_MAP: Record = { - xl: 'm', - l: 's', - m: 'xs', - s: 'xxs', -}; - -export default function SpinButton({ theme, size, ...others }: any) { - return ( - - ); -} diff --git a/semcore/button/src/component/Button/mappers/BUTTON_SIZE_TO_SPIN_SIZE.ts b/semcore/button/src/component/Button/mappers/BUTTON_SIZE_TO_SPIN_SIZE.ts new file mode 100644 index 0000000000..f02951b8b9 --- /dev/null +++ b/semcore/button/src/component/Button/mappers/BUTTON_SIZE_TO_SPIN_SIZE.ts @@ -0,0 +1,8 @@ +import type { NSSpin } from '@semcore/spin'; + +import type { NSButton } from '../Button.type'; + +export const BUTTON_SIZE_TO_SPIN_SIZE: Record = { + m: 'xs', + l: 's', +}; diff --git a/semcore/button/src/component/Button/mappers/BUTTON_USE_TO_DEFAULT_THEME.ts b/semcore/button/src/component/Button/mappers/BUTTON_USE_TO_DEFAULT_THEME.ts new file mode 100644 index 0000000000..c3a47a0c03 --- /dev/null +++ b/semcore/button/src/component/Button/mappers/BUTTON_USE_TO_DEFAULT_THEME.ts @@ -0,0 +1,7 @@ +import type { NSButton } from '../Button.type'; + +export const BUTTON_USE_TO_DEFAULT_THEME: Record = { + primary: 'info', + secondary: 'muted', + tertiary: 'info', +}; diff --git a/semcore/button/src/component/ButtonLink/ButtonLink.tsx b/semcore/button/src/component/ButtonLink/ButtonLink.tsx index 0723521fe4..8881a8f7de 100644 --- a/semcore/button/src/component/ButtonLink/ButtonLink.tsx +++ b/semcore/button/src/component/ButtonLink/ButtonLink.tsx @@ -1,17 +1,18 @@ +import type { Intergalactic } from '@semcore/core'; import { createComponent, sstyled, Root, Component } from '@semcore/core'; import Link from '@semcore/link'; import React from 'react'; import style from './buttonLink.shadow.css'; -import type { ButtonLinkComponent, ButtonLinkDefaultProps, ButtonLinkProps } from './ButtonLink.type'; +import type { NSButtonLink } from './ButtonLink.type'; class RootButtonLink extends Component< - ButtonLinkProps, + Intergalactic.InternalTypings.InferComponentProps, [], {}, {}, {}, - ButtonLinkDefaultProps + NSButtonLink.DefaultProps > { static displayName = 'ButtonLink'; static style = style; @@ -41,7 +42,7 @@ class RootButtonLink extends Component< * * {@link https://developer.semrush.com/intergalactic/components/button/button-api/|API} | {@link https://developer.semrush.com/intergalactic/components/button/button-code/|Examples} */ -export const ButtonLink = createComponent( +export const ButtonLink = createComponent( RootButtonLink, { Text: Link.Text, diff --git a/semcore/button/src/component/ButtonLink/ButtonLink.type.ts b/semcore/button/src/component/ButtonLink/ButtonLink.type.ts index df6bffbc83..c2eb760e7b 100644 --- a/semcore/button/src/component/ButtonLink/ButtonLink.type.ts +++ b/semcore/button/src/component/ButtonLink/ButtonLink.type.ts @@ -3,32 +3,48 @@ import type { Intergalactic } from '@semcore/core'; import type { LinkProps } from '@semcore/link'; import type { NSText } from '@semcore/typography'; -import type { ButtonContext } from '../Button/Button.type'; +import type { NSButton } from '../Button/Button.type'; -export type ButtonLinkProps = Intergalactic.InternalTypings.EfficientOmit & { +declare namespace NSButtonLink { + type Props = Intergalactic.InternalTypings.EfficientOmit & { /** * Button link type * @default primary */ - use?: 'primary' | 'secondary'; -}; + use?: 'primary' | 'secondary'; + }; + type DefaultProps = { + use: 'primary'; + size: 200; + }; -export type ButtonLinkDefaultProps = { - use: 'primary'; - size: 200; -}; + namespace Text { + type Props = NSText.Props; -export type ButtonLinkTextProps = NSText.Props; + type Component = Intergalactic.Component<'span', Props>; + } -export type ButtonLinkAddonProps = BoxProps; + namespace Addon { + type Props = BoxProps; -export type ButtonLinkChildren = { - Text: Intergalactic.Component<'span', ButtonLinkTextProps>; - Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>; -}; + type Component = Intergalactic.Component<'span', Props>; + } -export type ButtonLinkComponent = Intergalactic.Component< - 'button', - ButtonLinkProps, - ButtonContext -> & ButtonLinkChildren; + type Component = Intergalactic.Component<'button', Props, NSButton.Ctx> & { + Text: Text.Component; + Addon: Addon.Component; + }; +} + +/** @deprecated It will be removed in v18. */ +export type ButtonLinkProps = NSButtonLink.Props; +/** @deprecated It will be removed in v18. */ +export type ButtonLinkDefaultProps = NSButtonLink.DefaultProps; +/** @deprecated It will be removed in v18. */ +export type ButtonLinkTextProps = NSButtonLink.Text.Props; +/** @deprecated It will be removed in v18. */ +export type ButtonLinkAddonProps = NSButtonLink.Addon.Props; +/** @deprecated It will be removed in v18. */ +export type ButtonLinkComponent = NSButtonLink.Component; + +export type { NSButtonLink }; diff --git a/semcore/button/src/index.ts b/semcore/button/src/index.ts index 6bf2fecd06..def2ba7c45 100644 --- a/semcore/button/src/index.ts +++ b/semcore/button/src/index.ts @@ -1,4 +1,5 @@ export { default, MAP_USE_DEFAULT_THEME } from './component/Button/Button'; +export { BUTTON_USE_TO_DEFAULT_THEME } from './component/Button/mappers/BUTTON_USE_TO_DEFAULT_THEME'; export * from './component/Button/Button.type'; export * from './component/ButtonLink/ButtonLink'; export * from './component/ButtonLink/ButtonLink.type'; diff --git a/semcore/date-picker/src/index.d.ts b/semcore/date-picker/src/index.d.ts index c8698b9046..ed4d012711 100644 --- a/semcore/date-picker/src/index.d.ts +++ b/semcore/date-picker/src/index.d.ts @@ -2,7 +2,7 @@ import type { Flex, Box, BoxProps } from '@semcore/base-components'; import type Popper from '@semcore/base-components'; import type { BaseTriggerProps } from '@semcore/base-trigger'; import type BaseTrigger from '@semcore/base-trigger'; -import type { ButtonProps } from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type Button from '@semcore/button'; import type Checkbox from '@semcore/checkbox'; import type { UnknownProperties, Intergalactic, PropGetterFn } from '@semcore/core'; @@ -222,7 +222,7 @@ WithI18nEnhanceProps & { * [{value: [new Date(), new Date()], children: "Today"}] * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month * */ - periods?: (ButtonProps & { value: Date[] })[]; + periods?: (NSButton.Props & { value: Date[] })[]; }; export type DateRangePickerPeriodProps = BoxProps & { @@ -247,7 +247,7 @@ export type DateRangePickerPeriodProps = BoxProps & { * [{value: [new Date(), new Date()], children: "Today"}] * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month * */ - periods?: (ButtonProps & { value: Date[] })[]; + periods?: (NSButton.Props & { value: Date[] })[]; }; export type DatePickerContext = { @@ -353,8 +353,8 @@ declare const DatePicker: Intergalactic.Component< Popper: typeof Popper.Popper; Header: typeof Box; Title: Intergalactic.Component<'div', DatePickerProps, DatePickerContext>; - Prev: typeof Button; - Next: typeof Button; + Prev: NSButton.Component; + Next: NSButton.Component; Calendar: typeof Calendar; Today: typeof Box; add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date; @@ -387,12 +387,12 @@ declare const DateRangePicker: Intergalactic.Component< Popper: typeof Popper.Popper; Header: typeof Box; Title: Intergalactic.Component<'div', DateRangePickerProps, DateRangePickerContext>; - Prev: typeof Button; - Next: typeof Button; + Prev: NSButton.Component; + Next: NSButton.Component; Calendar: typeof Calendar; Period: Intergalactic.Component<'div', DateRangePickerPeriodProps>; - Apply: typeof Button; - Reset: typeof Button; + Apply: NSButton.Component; + Reset: NSButton.Component; add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date; subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date; }; @@ -422,8 +422,8 @@ declare const MonthPicker: Intergalactic.Component< Popper: typeof Popper.Popper; Header: typeof Box; Title: Intergalactic.Component<'div', DatePickerProps, MonthPickerContext>; - Prev: typeof Button; - Next: typeof Button; + Prev: NSButton.Component; + Next: NSButton.Component; Calendar: typeof Calendar; add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date; subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date; @@ -455,12 +455,12 @@ declare const MonthRangePicker: Intergalactic.Component< Popper: typeof Popper.Popper; Header: typeof Box; Title: Intergalactic.Component<'div', DateRangePickerProps, MonthRangePickerContext>; - Prev: typeof Button; - Next: typeof Button; + Prev: NSButton.Component; + Next: NSButton.Component; Calendar: typeof Calendar; Period: Intergalactic.Component<'div', DateRangePickerPeriodProps>; - Apply: typeof Button; - Reset: typeof Button; + Apply: NSButton.Component; + Reset: NSButton.Component; add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date; subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date; }; @@ -573,7 +573,7 @@ WithI18nEnhanceProps & { * [{value: [new Date(), new Date()], children: "Today"}] * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month * */ - periods?: (ButtonProps & { value: Date[] })[]; + periods?: (NSButton.Props & { value: Date[] })[]; }; export type DateRangeComparatorContext = { @@ -607,11 +607,11 @@ declare const DateRangeComparator: Intergalactic.Component< > & { Popper: typeof Popper.Popper; Header: typeof Flex; - Prev: typeof Button; - Next: typeof Button; + Prev: NSButton.Component; + Next: NSButton.Component; Calendar: typeof Calendar; - Apply: typeof Button; - Reset: typeof Button; + Apply: NSButton.Component; + Reset: NSButton.Component; CalendarHeader: typeof Box; Title: typeof Box; diff --git a/semcore/feature-highlight/src/components/button/Button.tsx b/semcore/feature-highlight/src/components/button/Button.tsx index a68e137c44..b8e7c268a5 100644 --- a/semcore/feature-highlight/src/components/button/Button.tsx +++ b/semcore/feature-highlight/src/components/button/Button.tsx @@ -1,4 +1,4 @@ -import type { ButtonProps } from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import Button from '@semcore/button'; import { createComponent, Root, sstyled, Component, type IRootNodeProps } from '@semcore/core'; import SummaryAI from '@semcore/icon/SummaryAI/m'; @@ -14,8 +14,8 @@ import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkle * the final component interface. Because of that, this implementation relies on the current approach. * Public props are `ButtonProps`. */ -type HighlightedButtonProps = Omit & { - theme?: ButtonProps['theme'] | 'highlighted'; +type HighlightedButtonProps = Omit & { + theme?: NSButton.Props['theme'] | 'highlighted'; }; class ButtonFHRoot extends Component< diff --git a/semcore/feature-highlight/src/components/button/Button.type.ts b/semcore/feature-highlight/src/components/button/Button.type.ts index cfe76583c1..d98547bd8f 100644 --- a/semcore/feature-highlight/src/components/button/Button.type.ts +++ b/semcore/feature-highlight/src/components/button/Button.type.ts @@ -1,14 +1,14 @@ -import type { ButtonAddonProps, ButtonComponent, ButtonProps } from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { Intergalactic } from '@semcore/core'; export type HighlightedButtonDefaultProps = { theme: 'highlighted'; }; -export type HighLightedButtonAddonProps = ButtonAddonProps & { +export type HighLightedButtonAddonProps = NSButton.Addon.Props & { animatedSparkleCount?: number; }; -export type HighlightedButtonComponent = ButtonComponent & { +export type HighlightedButtonComponent = NSButton.Component & { Addon: Intergalactic.Component<'div', HighLightedButtonAddonProps>; }; diff --git a/semcore/feedback-form/src/FeedbackForm.type.ts b/semcore/feedback-form/src/FeedbackForm.type.ts index 5347c791ce..e6c618e06a 100644 --- a/semcore/feedback-form/src/FeedbackForm.type.ts +++ b/semcore/feedback-form/src/FeedbackForm.type.ts @@ -1,5 +1,5 @@ import type { Box } from '@semcore/base-components'; -import type Button from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { Intergalactic } from '@semcore/core'; import type { NoticeSmart } from '@semcore/notice'; import type { FormProps } from 'react-final-form'; @@ -41,7 +41,7 @@ declare namespace NSFeedbackForm { } namespace Cancel { - type Component = typeof Button; + type Component = NSButton.Component; } namespace Notice { diff --git a/semcore/feedback-form/src/component/submit-button/SubmitButton.type.ts b/semcore/feedback-form/src/component/submit-button/SubmitButton.type.ts index 9f1b0dbef7..cd1308ed9f 100644 --- a/semcore/feedback-form/src/component/submit-button/SubmitButton.type.ts +++ b/semcore/feedback-form/src/component/submit-button/SubmitButton.type.ts @@ -1,7 +1,7 @@ -import type Button from '@semcore/button'; +import type { NSButton } from '@semcore/button'; declare namespace NSSubmitButton { - type Component = typeof Button; + type Component = NSButton.Component; } export type { NSSubmitButton }; diff --git a/semcore/fullscreen-modal/src/index.d.ts b/semcore/fullscreen-modal/src/index.d.ts index f8ba21bb6f..8afa825660 100644 --- a/semcore/fullscreen-modal/src/index.d.ts +++ b/semcore/fullscreen-modal/src/index.d.ts @@ -1,5 +1,5 @@ import type { Flex, Box, BoxProps } from '@semcore/base-components'; -import type Button from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { PropGetterFn, Intergalactic } from '@semcore/core'; import type { NSModal } from '@semcore/modal'; import type { Text } from '@semcore/typography'; @@ -31,7 +31,7 @@ declare const FullscreenModal: Intergalactic.Component< > & { Header: Intergalactic.Component<'div', FullscreenModalHeaderProps>; Footer: typeof Flex; - Close: typeof Button; + Close: NSButton.Component; Back: typeof Box; Body: typeof Box; Section: typeof Box; diff --git a/semcore/modal/src/Modal.type.ts b/semcore/modal/src/Modal.type.ts index 85059ff904..6513090926 100644 --- a/semcore/modal/src/Modal.type.ts +++ b/semcore/modal/src/Modal.type.ts @@ -1,5 +1,5 @@ import type { FadeInOutProps, SlideProps, Box, BoxProps, PortalProps } from '@semcore/base-components'; -import type Button from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { PropGetterFn, Intergalactic } from '@semcore/core'; import type { NSText } from '@semcore/typography'; import type React from 'react'; @@ -66,7 +66,7 @@ declare namespace NSModal { } namespace Close { - type Component = typeof Button; + type Component = NSButton.Component; } namespace Title { diff --git a/semcore/notice/src/Notice.type.ts b/semcore/notice/src/Notice.type.ts index a3a294f705..e9ca877c0c 100644 --- a/semcore/notice/src/Notice.type.ts +++ b/semcore/notice/src/Notice.type.ts @@ -1,5 +1,5 @@ import type { FadeInOutProps, Box, BoxProps } from '@semcore/base-components'; -import type Button from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { PropGetterFn, Intergalactic } from '@semcore/core'; import type { Text } from '@semcore/typography'; @@ -57,7 +57,7 @@ declare namespace NSNotice { } namespace Close { - type Component = typeof Button; + type Component = NSButton.Component; } type Component = Intergalactic.Component<'div', Props, Ctx> & { diff --git a/semcore/pagination/src/Pagination.type.ts b/semcore/pagination/src/Pagination.type.ts index 226f8acadc..2c5656fa7a 100644 --- a/semcore/pagination/src/Pagination.type.ts +++ b/semcore/pagination/src/Pagination.type.ts @@ -1,5 +1,5 @@ import type { BoxProps } from '@semcore/base-components'; -import type Button from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { PropGetterFn, Intergalactic } from '@semcore/core'; import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; import type { InputProps } from '@semcore/input'; @@ -54,15 +54,15 @@ declare namespace NSPagination { }; namespace PrevPage { - type Component = typeof Button; + type Component = NSButton.Component; } namespace NextPage { - type Component = typeof Button; + type Component = NSButton.Component; } namespace FirstPage { - type Component = typeof Button; + type Component = NSButton.Component; } namespace TotalPages { diff --git a/semcore/side-panel/src/SidePanel.type.ts b/semcore/side-panel/src/SidePanel.type.ts index 7182b0cf2d..4d4d8b403f 100644 --- a/semcore/side-panel/src/SidePanel.type.ts +++ b/semcore/side-panel/src/SidePanel.type.ts @@ -1,5 +1,5 @@ import type { FadeInOutProps, SlideProps, Box, BoxProps, Flex, PortalProps } from '@semcore/base-components'; -import type Button from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { PropGetterFn, Intergalactic } from '@semcore/core'; import type { Text } from '@semcore/typography'; import type React from 'react'; @@ -98,7 +98,7 @@ declare namespace NSSidePanel { } namespace Close { - type Component = typeof Button; + type Component = NSButton.Component; } type Component = Intergalactic.Component<'div', Props, Ctx> & { diff --git a/semcore/wizard/src/Wizard.types.ts b/semcore/wizard/src/Wizard.types.ts index 32a69079c0..9334a652dd 100644 --- a/semcore/wizard/src/Wizard.types.ts +++ b/semcore/wizard/src/Wizard.types.ts @@ -1,5 +1,5 @@ import type { BoxProps } from '@semcore/base-components'; -import type { ButtonProps } from '@semcore/button'; +import type { NSButton } from '@semcore/button'; import type { Intergalactic } from '@semcore/core'; import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n'; import type { NSModal } from '@semcore/modal'; @@ -94,7 +94,7 @@ export type WizardContentProps = BoxProps & { noSidebar?: boolean; }; -export type WizardStepBackProps = ButtonProps & { +export type WizardStepBackProps = NSButton.Props & { /** Callback invoked when navigating to the previous step */ onActive?: | ((step: WizardStep, e?: React.SyntheticEvent) => void) @@ -113,7 +113,7 @@ export type WizardStepBackProps = ButtonProps & { */ getI18nText?: ReturnType; }; -export type WizardStepNextProps = ButtonProps & { +export type WizardStepNextProps = NSButton.Props & { /** Callback invoked when navigating to the next step */ onActive?: | ((step: WizardStep, e?: React.SyntheticEvent) => void) diff --git a/stories/components/button/docs/button_docs.stories.tsx b/stories/components/button/docs/button_docs.stories.tsx index 2984a58e93..f94e78ab42 100644 --- a/stories/components/button/docs/button_docs.stories.tsx +++ b/stories/components/button/docs/button_docs.stories.tsx @@ -1,3 +1,4 @@ +import type { NSButton } from '@semcore/ui/button'; import Button from '@semcore/ui/button'; import type { Meta, StoryObj } from '@storybook/react-vite'; @@ -9,13 +10,13 @@ import ButtonWithIconExample from './examples/button_with_icon'; import ButtonLoadingExample from './examples/button_with_loading'; import { playWrapper } from '../../../utils/playWrapper'; -const meta: Meta = { +const meta: Meta = { title: 'Components/Button/Documentation', component: Button, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Addons: Story = { render: AddonsExample, diff --git a/stories/components/button/tests/examples/button-base.tsx b/stories/components/button/tests/examples/button-base.tsx index 5ebe4446da..3792ff17a9 100644 --- a/stories/components/button/tests/examples/button-base.tsx +++ b/stories/components/button/tests/examples/button-base.tsx @@ -2,12 +2,12 @@ import VideoListM from '@semcore/icon/VideoList/m'; import Badge from '@semcore/ui/badge'; import { Flex } from '@semcore/ui/base-components'; import Button from '@semcore/ui/button'; -import type { ButtonProps } from '@semcore/ui/button'; +import type { NSButton } from '@semcore/ui/button'; import React from 'react'; import { themeFor } from '../themeUtils'; -type ExampleProps = Exclude & { style?: any; theme: string }; +type ExampleProps = Exclude & { style?: any; theme: string }; const Demo = (props: ExampleProps) => { const theme = themeFor(props); return ( diff --git a/stories/components/button/tests/examples/button-icon-only.tsx b/stories/components/button/tests/examples/button-icon-only.tsx index 0e11556559..b7fd477e66 100644 --- a/stories/components/button/tests/examples/button-icon-only.tsx +++ b/stories/components/button/tests/examples/button-icon-only.tsx @@ -1,13 +1,13 @@ import VideoListM from '@semcore/icon/VideoList/m'; import { Flex } from '@semcore/ui/base-components'; import Button from '@semcore/ui/button'; -import type { ButtonProps } from '@semcore/ui/button'; +import type { NSButton } from '@semcore/ui/button'; import Tooltip, { Hint } from '@semcore/ui/tooltip'; import React from 'react'; import { themeFor } from '../themeUtils'; -type ExampleProps = Exclude & { style?: any; theme: string }; +type ExampleProps = Exclude & { style?: any; theme: string }; const Demo = (props: ExampleProps) => { const theme = themeFor(props); diff --git a/stories/components/button/tests/examples/button-link/button-link-base.tsx b/stories/components/button/tests/examples/button-link/button-link-base.tsx index ee30afcf55..16ae9ef5b1 100644 --- a/stories/components/button/tests/examples/button-link/button-link-base.tsx +++ b/stories/components/button/tests/examples/button-link/button-link-base.tsx @@ -2,7 +2,7 @@ import MathPlusAltL from '@semcore/icon/MathPlusAlt/l'; import MathPlusAltM from '@semcore/icon/MathPlusAlt/m'; import Badge from '@semcore/ui/badge'; import { ButtonLink } from '@semcore/ui/button'; -import type { ButtonLinkProps } from '@semcore/ui/button'; +import type { NSButtonLink } from '@semcore/ui/button'; import Counter, { type NSCounter } from '@semcore/ui/counter'; import Spin, { type NSSpin } from '@semcore/ui/spin'; import type { NSText } from '@semcore/ui/typography'; @@ -11,7 +11,7 @@ import React from 'react'; type AddonType = 'icon' | 'badge' | 'counter' | 'spin'; -type BasicButtonLinkProps = ButtonLinkProps & { +type BasicButtonLinkProps = NSButtonLink.Props & { text?: string; showAddonLeft?: boolean; showAddonRight?: boolean; diff --git a/stories/components/button/tests/examples/button-link/button-link-icon-only.tsx b/stories/components/button/tests/examples/button-link/button-link-icon-only.tsx index 9253c921a9..529538db3c 100644 --- a/stories/components/button/tests/examples/button-link/button-link-icon-only.tsx +++ b/stories/components/button/tests/examples/button-link/button-link-icon-only.tsx @@ -1,10 +1,10 @@ import VideoListM from '@semcore/icon/VideoList/m'; import { Flex } from '@semcore/ui/base-components'; import { ButtonLink } from '@semcore/ui/button'; -import type { ButtonLinkProps } from '@semcore/ui/button'; +import type { NSButtonLink } from '@semcore/ui/button'; import React from 'react'; -type ExampleProps = ButtonLinkProps & { color?: string }; +type ExampleProps = NSButtonLink.Props & { color?: string }; const Demo = (props: ExampleProps) => { return ( diff --git a/stories/components/button/tests/examples/button-link/button-link-in-text.tsx b/stories/components/button/tests/examples/button-link/button-link-in-text.tsx index 526ec29d24..abbbfd4a43 100644 --- a/stories/components/button/tests/examples/button-link/button-link-in-text.tsx +++ b/stories/components/button/tests/examples/button-link/button-link-in-text.tsx @@ -1,11 +1,11 @@ import CheckM from '@semcore/icon/Check/m'; import { Box } from '@semcore/ui/base-components'; import { ButtonLink } from '@semcore/ui/button'; -import type { ButtonLinkProps } from '@semcore/ui/button'; +import type { NSButtonLink } from '@semcore/ui/button'; import { Text } from '@semcore/ui/typography'; import React from 'react'; -type ExampleProps = ButtonLinkProps & { color?: string }; +type ExampleProps = NSButtonLink.Props & { color?: string }; const Demo = (props: ExampleProps) => { return ( <> diff --git a/stories/components/button/tests/examples/button-neighbor-location.tsx b/stories/components/button/tests/examples/button-neighbor-location.tsx index 54fb12e9b7..59e257aa78 100644 --- a/stories/components/button/tests/examples/button-neighbor-location.tsx +++ b/stories/components/button/tests/examples/button-neighbor-location.tsx @@ -1,12 +1,12 @@ import VideoListM from '@semcore/icon/VideoList/m'; import { Flex } from '@semcore/ui/base-components'; import Button from '@semcore/ui/button'; -import type { ButtonProps } from '@semcore/ui/button'; +import type { NSButton } from '@semcore/ui/button'; import React from 'react'; import { themeFor } from '../themeUtils'; -type ExampleProps = Exclude & { style?: any; theme: string }; +type ExampleProps = Exclude & { style?: any; theme: string }; const Demo = (props: ExampleProps) => { const theme = themeFor(props); diff --git a/stories/components/button/tests/examples/button-with-ellipsis.tsx b/stories/components/button/tests/examples/button-with-ellipsis.tsx index 1ad7a20923..a24edcd849 100644 --- a/stories/components/button/tests/examples/button-with-ellipsis.tsx +++ b/stories/components/button/tests/examples/button-with-ellipsis.tsx @@ -1,11 +1,11 @@ import type { NSText } from '@semcore/typography'; import Button from '@semcore/ui/button'; -import type { ButtonProps } from '@semcore/ui/button'; +import type { NSButton } from '@semcore/ui/button'; import React from 'react'; import { themeFor } from '../themeUtils'; -type ButtonEllipsisProps = ButtonProps & { +type ButtonEllipsisProps = NSButton.Props & { ellipsis?: NSText.EllipsisProps; w?: number | string; hintPlacement?: 'top' | 'bottom' | 'left' | 'right'; diff --git a/stories/components/button/tests/themeUtils.ts b/stories/components/button/tests/themeUtils.ts index c8450ea5d3..eb20e32dca 100644 --- a/stories/components/button/tests/themeUtils.ts +++ b/stories/components/button/tests/themeUtils.ts @@ -1,16 +1,16 @@ -import type { ButtonProps } from '@semcore/button'; +import type { NSButton } from '@semcore/button'; -type Use = NonNullable; +type Use = NonNullable; // Allowed `theme` per `use`. Mirrors SButton[theme='-'] in // semcore/button/src/component/Button/button.shadow.css. First entry = default. -export const THEMES: Record = { +export const THEMES: Record = { primary: ['info', 'success', 'brand', 'danger', 'invert'], secondary: ['muted', 'invert', 'info'], tertiary: ['muted', 'invert', 'info'], }; -export const themeFor = (args: any): ButtonProps['theme'] => { +export const themeFor = (args: any): NSButton.Props['theme'] => { const use: Use = args.use ?? 'primary'; const picked = args[`theme_${use}`]; return THEMES[use].includes(picked) ? picked : THEMES[use][0]; diff --git a/stories/components/feature-highlight/tests/examples/button.tsx b/stories/components/feature-highlight/tests/examples/button.tsx index a92c57d98e..41f971ea35 100644 --- a/stories/components/feature-highlight/tests/examples/button.tsx +++ b/stories/components/feature-highlight/tests/examples/button.tsx @@ -1,11 +1,11 @@ import SummaryAI from '@semcore/icon/SummaryAI/m'; import type { NSText } from '@semcore/typography'; import { Flex, ScreenReaderOnly } from '@semcore/ui/base-components'; -import type { ButtonProps } from '@semcore/ui/button'; +import type { NSButton } from '@semcore/ui/button'; import { ButtonFH, BadgeFH } from '@semcore/ui/feature-highlight'; import React from 'react'; -export type ButtonFHAdvancedProps = ButtonProps & { +export type ButtonFHAdvancedProps = NSButton.Props & { buttonText?: string; showBadge?: boolean; badgeText?: string; diff --git a/website/docs/components/button/button-api.md b/website/docs/components/button/button-api.md index 1033b7d21d..b163277c0b 100644 --- a/website/docs/components/button/button-api.md +++ b/website/docs/components/button/button-api.md @@ -12,7 +12,7 @@ import Button from '@semcore/ui/button';