diff --git a/CHANGELOG.md b/CHANGELOG.md index e90dc1be78..6e07580e53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix prop types of `Tooltip` component @kuzhelov ([#1499](https://github.com/stardust-ui/react/pull/1499)) - Fix `Popup` styling with `pointer` when it is wrapped by `FocusZones` @layershifter ([#1492](https://github.com/stardust-ui/react/pull/1492)) - Apply custom focus style on `TreeItem` and `TreeTitle` @silviuavram ([#1506](https://github.com/stardust-ui/react/pull/1506)) +- Fix `theme` types, remove duplication @kuzhelov ([#1508](https://github.com/stardust-ui/react/pull/1508)) ### Features - Add 'poll' and 'to-do-list' icons to Teams theme @natashamayurshah ([#1498](https://github.com/stardust-ui/react/pull/1498)) diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 6f90e4106e..5d7533f700 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -2,6 +2,60 @@ import * as CSSType from 'csstype' import { IRenderer as FelaRenderer } from 'fela' import * as React from 'react' import { Extendable, ObjectOf, ObjectOrFunc, Omit } from '../types' +import { AccordionContentProps } from '../components/Accordion/AccordionContent' +import { AccordionProps } from '../components/Accordion/Accordion' +import { AccordionTitleProps } from '../components/Accordion/AccordionTitle' +import { AlertProps } from '../components/Alert/Alert' +import { AnimationProps } from '../components/Animation/Animation' +import { AttachmentProps } from '../components/Attachment/Attachment' +import { AvatarProps } from '../components/Avatar/Avatar' +import { ButtonGroupProps } from '../components/Button/ButtonGroup' +import { ButtonProps } from '../components/Button/Button' +import { ChatItemProps } from '../components/Chat/ChatItem' +import { ChatMessageProps } from '../components/Chat/ChatMessage' +import { ChatProps } from '../components/Chat/Chat' +import { CheckboxProps } from '../components/Checkbox/Checkbox' +import { DividerProps } from '../components/Divider/Divider' +import { DropdownProps } from '../components/Dropdown/Dropdown' +import { EmbedProps } from '../components/Embed/Embed' +import { FlexItemProps } from '../components/Flex/FlexItem' +import { FlexProps } from '../components/Flex/Flex' +import { FormFieldProps } from '../components/Form/FormField' +import { FormProps } from '../components/Form/Form' +import { GridProps } from '../components/Grid/Grid' +import { HeaderDescriptionProps } from '../components/Header/HeaderDescription' +import { HeaderProps } from '../components/Header/Header' +import { IconProps } from '../components/Icon/Icon' +import { ImageProps } from '../components/Image/Image' +import { InputProps } from '../components/Input/Input' +import { ItemLayoutProps } from '../components/ItemLayout/ItemLayout' +import { LabelProps } from '../components/Label/Label' +import { LayoutProps } from '../components/Layout/Layout' +import { ListItemProps } from '../components/List/ListItem' +import { ListProps } from '../components/List/List' +import { LoaderProps } from '../components/Loader/Loader' +import { MenuItemProps } from '../components/Menu/MenuItem' +import { MenuProps } from '../components/Menu/Menu' +import { PopupContentProps } from '../components/Popup/PopupContent' +import { PopupProps } from '../components/Popup/Popup' +import { PortalProps } from '../components/Portal/Portal' +import { RadioGroupItemProps } from '../components/RadioGroup/RadioGroupItem' +import { RadioGroupProps } from '../components/RadioGroup/RadioGroup' +import { ReactionGroupProps } from '../components/Reaction/ReactionGroup' +import { ReactionProps } from '../components/Reaction/Reaction' +import { SegmentProps } from '../components/Segment/Segment' +import { StatusProps } from '../components/Status/Status' +import { TextProps } from '../components/Text/Text' +import { ToolbarDividerProps } from '../components/Toolbar/ToolbarDivider' +import { ToolbarItemProps } from '../components/Toolbar/ToolbarItem' +import { ToolbarProps } from '../components/Toolbar/Toolbar' +import { ToolbarRadioGroupProps } from '../components/Toolbar/ToolbarRadioGroup' +import { TooltipContentProps } from '../components/Tooltip/TooltipContent' +import { TooltipProps } from '../components/Tooltip/Tooltip' +import { TreeItemProps } from '../components/Tree/TreeItem' +import { TreeProps } from '../components/Tree/Tree' +import { TreeTitleProps } from '../components/Tree/TreeTitle' +import { VideoProps } from '../components/Video/Video' // Themes go through 3 phases. // 1. Input - (from the user), variable and style objects/functions, some values optional @@ -349,197 +403,82 @@ export interface ThemePrepared { animations: { [key: string]: ThemeAnimation } } -export interface ThemeComponentStylesInput { - [key: string]: ComponentSlotStylesInput | undefined - - Accordion?: ComponentSlotStylesInput - Alert?: ComponentSlotStylesInput - Animation?: ComponentSlotStylesInput - Attachment?: ComponentSlotStylesInput - Avatar?: ComponentSlotStylesInput - Button?: ComponentSlotStylesInput - ButtonGroup?: ComponentSlotStylesInput - Chat?: ComponentSlotStylesInput - ChatItem?: ComponentSlotStylesInput - ChatMessage?: ComponentSlotStylesInput - Divider?: ComponentSlotStylesInput - Dropdown?: ComponentSlotStylesInput - DropdownItem?: ComponentSlotStylesInput - DropdownSearchInput?: ComponentSlotStylesInput - Embed?: ComponentSlotStylesInput - Form?: ComponentSlotStylesInput - FormField?: ComponentSlotStylesInput - Grid?: ComponentSlotStylesInput - Header?: ComponentSlotStylesInput - HeaderDescription?: ComponentSlotStylesInput - Icon?: ComponentSlotStylesInput - Image?: ComponentSlotStylesInput - Input?: ComponentSlotStylesInput - ItemLayout?: ComponentSlotStylesInput - Label?: ComponentSlotStylesInput - Layout?: ComponentSlotStylesInput - List?: ComponentSlotStylesInput - ListItem?: ComponentSlotStylesInput - Menu?: ComponentSlotStylesInput - MenuItem?: ComponentSlotStylesInput - Portal?: ComponentSlotStylesInput - Popup?: ComponentSlotStylesInput - PopupContent?: ComponentSlotStylesInput - RadioGroup?: ComponentSlotStylesInput - RadioGroupItem?: ComponentSlotStylesInput - Reaction?: ComponentSlotStylesInput - ReactionGroup?: ComponentSlotStylesInput - Segment?: ComponentSlotStylesInput - Status?: ComponentSlotStylesInput - Text?: ComponentSlotStylesInput - Tree?: ComponentSlotStylesInput - TreeItem?: ComponentSlotStylesInput - TreeTitle?: ComponentSlotStylesInput - Video?: ComponentSlotStylesInput +type ThemeStylesProps = { + Accordion?: AccordionProps + AccordionTitle?: AccordionTitleProps + AccordionContent?: AccordionContentProps + Alert?: AlertProps + Animation?: AnimationProps + Attachment?: AttachmentProps + Avatar?: AvatarProps + Button?: ButtonProps + ButtonGroup?: ButtonGroupProps + Chat?: ChatProps + ChatItem?: ChatItemProps + ChatMessage?: ChatMessageProps + Checkbox?: CheckboxProps + Divider?: DividerProps + Dropdown?: DropdownProps + Embed?: EmbedProps + Flex?: FlexProps + FlexItem?: FlexItemProps + Form?: FormProps + FormField?: FormFieldProps + Grid?: GridProps + Header?: HeaderProps + HeaderDescription?: HeaderDescriptionProps + Icon?: IconProps + Image?: ImageProps + Input?: InputProps + ItemLayout?: ItemLayoutProps + Label?: LabelProps + Layout?: LayoutProps + List?: ListProps + ListItem?: ListItemProps + Loader?: LoaderProps + Menu?: MenuProps + MenuItem?: MenuItemProps + Portal?: PortalProps + Popup?: PopupProps + PopupContent?: PopupContentProps + RadioGroup?: RadioGroupProps + RadioGroupItem?: RadioGroupItemProps + Reaction?: ReactionProps + ReactionGroup?: ReactionGroupProps + Segment?: SegmentProps + Status?: StatusProps + Toolbar?: ToolbarProps + ToolbarItem?: ToolbarItemProps + ToolbarDivider?: ToolbarDividerProps + ToolbarRadioGroup?: ToolbarRadioGroupProps + Tooltip?: TooltipProps + TooltipContent?: TooltipContentProps + Text?: TextProps + Tree?: TreeProps + TreeItem?: TreeItemProps + TreeTitle?: TreeTitleProps + Video?: VideoProps } -export interface ThemeComponentStylesPrepared { - [key: string]: ComponentSlotStylesPrepared | undefined - - Accordion?: ComponentSlotStylesPrepared - Alert?: ComponentSlotStylesPrepared - Animation?: ComponentSlotStylesPrepared - Attachment?: ComponentSlotStylesPrepared - Avatar?: ComponentSlotStylesPrepared - Button?: ComponentSlotStylesPrepared - ButtonGroup?: ComponentSlotStylesPrepared - Chat?: ComponentSlotStylesPrepared - ChatItem?: ComponentSlotStylesPrepared - ChatMessage?: ComponentSlotStylesPrepared - Divider?: ComponentSlotStylesPrepared - Dropdown?: ComponentSlotStylesPrepared - DropdownItem?: ComponentSlotStylesPrepared - DropdownSearchInput?: ComponentSlotStylesPrepared - Embed?: ComponentSlotStylesPrepared - Form?: ComponentSlotStylesPrepared - FormField?: ComponentSlotStylesPrepared - Grid?: ComponentSlotStylesPrepared - Header?: ComponentSlotStylesPrepared - HeaderDescription?: ComponentSlotStylesPrepared - Icon?: ComponentSlotStylesPrepared - Image?: ComponentSlotStylesPrepared - Input?: ComponentSlotStylesPrepared - ItemLayout?: ComponentSlotStylesPrepared - Label?: ComponentSlotStylesPrepared - Layout?: ComponentSlotStylesPrepared - List?: ComponentSlotStylesPrepared - ListItem?: ComponentSlotStylesPrepared - Menu?: ComponentSlotStylesPrepared - MenuItem?: ComponentSlotStylesPrepared - Portal?: ComponentSlotStylesPrepared - Popup?: ComponentSlotStylesPrepared - PopupContent?: ComponentSlotStylesPrepared - RadioGroup?: ComponentSlotStylesPrepared - RadioGroupItem?: ComponentSlotStylesPrepared - Reaction?: ComponentSlotStylesPrepared - ReactionGroup?: ComponentSlotStylesPrepared - Segment?: ComponentSlotStylesPrepared - Status?: ComponentSlotStylesPrepared - Text?: ComponentSlotStylesPrepared - Tree?: ComponentSlotStylesPrepared - TreeItem?: ComponentSlotStylesPrepared - TreeTitle?: ComponentSlotStylesPrepared - Video?: ComponentSlotStylesPrepared -} - -export interface ThemeComponentVariablesInput { - [key: string]: any - - Accordion?: ComponentVariablesInput - Alert?: ComponentVariablesInput - Animation?: ComponentVariablesInput - Attachment?: ComponentVariablesInput - Avatar?: ComponentVariablesInput - Button?: ComponentVariablesInput - ButtonGroup?: ComponentVariablesInput - Chat?: ComponentVariablesInput - ChatItem?: ComponentVariablesInput - ChatMessage?: ComponentVariablesInput - Divider?: ComponentVariablesInput - Dropdown?: ComponentVariablesInput - Embed?: ComponentVariablesInput - Form?: ComponentVariablesInput - FormField?: ComponentVariablesInput - Grid?: ComponentVariablesInput - Header?: ComponentVariablesInput - HeaderDescription?: ComponentVariablesInput - Icon?: ComponentVariablesInput - Image?: ComponentVariablesInput - Input?: ComponentVariablesInput - ItemLayout?: ComponentVariablesInput - Label?: ComponentVariablesInput - Layout?: ComponentVariablesInput - List?: ComponentVariablesInput - ListItem?: ComponentVariablesInput - Menu?: ComponentVariablesInput - MenuItem?: ComponentVariablesInput - Portal?: ComponentVariablesInput - Popup?: ComponentVariablesInput - PopupContent?: ComponentVariablesInput - RadioGroup?: ComponentVariablesInput - RadioGroupItem?: ComponentVariablesInput - Reaction?: ComponentVariablesInput - ReactionGroup?: ComponentVariablesInput - Segment?: ComponentVariablesInput - Status?: ComponentVariablesInput - Text?: ComponentVariablesInput - Tree?: ComponentVariablesInput - TreeItem?: ComponentVariablesInput - TreeTitle?: ComponentVariablesInput - Video?: ComponentVariablesInput -} - -export interface ThemeComponentVariablesPrepared { - [key: string]: any - - Accordion?: ComponentVariablesPrepared - Alert?: ComponentVariablesPrepared - Animation?: ComponentVariablesPrepared - Attachment?: ComponentVariablesPrepared - Avatar?: ComponentVariablesPrepared - Button?: ComponentVariablesPrepared - ButtonGroup?: ComponentVariablesPrepared - Chat?: ComponentVariablesPrepared - ChatItem?: ComponentVariablesPrepared - ChatMessage?: ComponentVariablesPrepared - Divider?: ComponentVariablesPrepared - Dropdown?: ComponentVariablesPrepared - Embed?: ComponentVariablesPrepared - Form?: ComponentVariablesPrepared - FormField?: ComponentVariablesPrepared - Grid?: ComponentVariablesPrepared - Header?: ComponentVariablesPrepared - HeaderDescription?: ComponentVariablesPrepared - Icon?: ComponentVariablesPrepared - Image?: ComponentVariablesPrepared - Input?: ComponentVariablesPrepared - ItemLayout?: ComponentVariablesPrepared - Label?: ComponentVariablesPrepared - Layout?: ComponentVariablesPrepared - List?: ComponentVariablesPrepared - ListItem?: ComponentVariablesPrepared - Menu?: ComponentVariablesPrepared - MenuItem?: ComponentVariablesPrepared - Portal?: ComponentVariablesPrepared - Popup?: ComponentVariablesPrepared - PopupContent?: ComponentVariablesPrepared - RadioGroup?: ComponentVariablesPrepared - RadioGroupItem?: ComponentVariablesPrepared - Reaction?: ComponentVariablesPrepared - ReactionGroup?: ComponentVariablesPrepared - Segment?: ComponentVariablesPrepared - Status?: ComponentVariablesPrepared - Text?: ComponentVariablesPrepared - Tree?: ComponentVariablesPrepared - TreeItem?: ComponentVariablesPrepared - TreeTitle?: ComponentVariablesPrepared - Video?: ComponentVariablesPrepared -} +export type ThemeComponentVariablesInput = { + [K in keyof ThemeStylesProps]?: ComponentVariablesInput +} & + Record + +export type ThemeComponentVariablesPrepared = { + [K in keyof ThemeStylesProps]?: ComponentVariablesPrepared +} & + Record + +export type ThemeComponentStylesInput = { + [K in keyof ThemeStylesProps]?: ComponentSlotStylesInput +} & + Record + +export type ThemeComponentStylesPrepared = { + [K in keyof ThemeStylesProps]?: ComponentSlotStylesPrepared +} & + Record export interface Renderer extends FelaRenderer {}