Merge pull request #2258 from teamleadercrm/guild-ts-fixes

[FRAF-752] - TS fixes related to guild week

src/components/advancedCollapsible/AdvancedCollapsible.tsx

@@ -6,12 +6,13 @@ import { IconChevronDownSmallOutline, IconChevronRightSmallOutline } from '@team
 import theme from './theme.css';
 import { BoxProps } from '../box/Box';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface AdvancedCollapsibleProps extends Omit<BoxProps, 'size'> {
   color?: 'neutral' | 'teal';
   children: ReactNode;
   title: string;
-  size?: 'small' | 'medium' | 'large';
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = ({

src/components/avatar/Avatar.tsx

@@ -2,6 +2,7 @@ import { IconCloseMediumOutline, IconCloseSmallOutline } from '@teamleader/ui-ic
 import cx from 'classnames';
 import React, { useState } from 'react';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
 import Icon from '../icon';
@@ -13,7 +14,7 @@ import AvatarImage from './AvatarImage';
 import AvatarInitials from './AvatarInitials';
 import AvatarTeam from './AvatarTeam';
 import theme from './theme.css';
-import { Shape, Size } from './types';
+import { Shape } from './types';
 
 const TooltippedBox = Tooltip(Box);
 
@@ -41,14 +42,14 @@ export interface AvatarProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** The shape of the avatar. */
   shape?: Shape;
   /** The size of the avatar. */
-  size?: Size;
+  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
   /** If true, a team icon will be shown. */
   team?: boolean;
   /** If true, the name will be shown in a tooltip on hover. */
   tooltip?: boolean;
 }
 
-type AvatarInternalComponentProps = { size: Size } & Pick<
+type AvatarInternalComponentProps = { size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'> } & Pick<
   AvatarProps,
   'creatable' | 'children' | 'editable' | 'imageUrl' | 'fullName' | 'id' | 'onImageChange' | 'selected' | 'team'
 >;

src/components/avatar/AvatarAdd.tsx

@@ -3,15 +3,15 @@ import cx from 'classnames';
 import theme from './theme.css';
 import Box from '../box';
 import Icon from '../icon';
-import { Size } from './types';
 import { IconUserAddMediumOutline, IconUserAddSmallOutline } from '@teamleader/ui-icons';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface AvatarAddProps {
   /** Component that will be placed top right of the avatar image. */
   children?: React.ReactNode;
   /** The size of the avatar. */
-  size: Size;
+  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarAdd: GenericComponent<AvatarAddProps> = ({ children, size }) => {

src/components/avatar/AvatarAnonymous.tsx

@@ -3,15 +3,15 @@ import cx from 'classnames';
 import theme from './theme.css';
 import Box from '../box';
 import Icon from '../icon';
-import { Size } from './types';
 import { IconUserMediumOutline, IconUserSmallOutline } from '@teamleader/ui-icons';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface AvatarAnonymousProps {
   /** Component that will be placed top right of the avatar image. */
   children?: React.ReactNode;
   /** The size of the avatar. */
-  size: Size;
+  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarAnonymous: GenericComponent<AvatarAnonymousProps> = ({ children, size }) => {

src/components/avatar/AvatarImage.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 import AvatarOverlay from './AvatarOverlay';
-import { Size } from './types';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface AvatarImageProps {
   /** Component that will be placed top right of the avatar image. */
@@ -19,7 +19,7 @@ interface AvatarImageProps {
   /** Callback function that is fired the image fails to load. */
   onImageLoadFailure?: React.ReactEventHandler<HTMLImageElement>;
   /** The size of the avatar. */
-  size: Size;
+  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarImage: GenericComponent<AvatarImageProps> = ({

src/components/avatar/AvatarInitials.tsx

@@ -2,10 +2,9 @@ import React, { useState, useMemo } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 import AvatarOverlay from './AvatarOverlay';
-import { Size } from './types';
 import Box from '../box';
 import { Heading4 } from '../typography';
-import { colorsWithout } from '../../constants';
+import { colorsWithout, SIZES } from '../../constants';
 import { GenericComponent } from '../../@types/types';
 
 const colors = colorsWithout(['neutral']);
@@ -23,7 +22,7 @@ interface AvatarInitialsProps {
   /** Callback function that is fired when user clicks the edit icon. */
   onImageChange?: React.MouseEventHandler<HTMLDivElement>;
   /** The size of the avatar. */
-  size: Size;
+  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarInitials: GenericComponent<AvatarInitialsProps> = ({

src/components/avatar/AvatarOverlay.tsx

@@ -4,11 +4,11 @@ import Box from '../box';
 import Icon from '../icon';
 import { IconEditSmallFilled } from '@teamleader/ui-icons';
 import cx from 'classnames';
-import { Size } from './types';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface AvatarOverlayProps {
-  size: Size;
+  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 

src/components/avatar/AvatarStack.tsx

@@ -3,9 +3,10 @@ import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
 import AvatarStackOverflow from './AvatarStackOverflow';
-import { Direction, Size } from './types';
+import { Direction } from './types';
 import { BoxProps } from '../box/Box';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 const OVERLAP_SPACINGS = {
   tiny: -6,
@@ -35,7 +36,7 @@ interface AvatarStackProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** If true, avatars will not be overlapping each other and will become interactive. */
   selectable?: boolean;
   /** The size of the avatar stack. */
-  size?: Size;
+  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
   /** If true, the names will be shown in a tooltip on hover. */
   tooltip?: boolean;
 }

src/components/avatar/AvatarTeam.tsx

@@ -3,13 +3,13 @@ import cx from 'classnames';
 import theme from './theme.css';
 import Box from '../box';
 import Icon from '../icon';
-import { Size } from './types';
 import { IconTeamMediumOutline, IconTeamSmallOutline } from '@teamleader/ui-icons';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface AvatarTeamProps {
   /** The size of the avatar. */
-  size: Size;
+  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarTeam: GenericComponent<AvatarTeamProps> = ({ size }) => {

src/components/avatar/types.ts

@@ -1,5 +1,3 @@
-export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'hero';
-
 export type Shape = 'circle' | 'rounded';
 
 export type Direction = 'horizontal' | 'vertical';

src/components/badge/Badge.tsx

@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import React, { forwardRef, ReactNode, SyntheticEvent } from 'react';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
 import Icon from '../icon';
@@ -25,7 +26,7 @@ interface BadgeProps extends Omit<BoxProps, 'ref' | 'size'> {
   /** If true, component will be shown in a selected state */
   selected?: boolean;
   /** Size of the button. */
-  size?: 'small' | 'medium' | 'large';
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const Badge: GenericComponent<BadgeProps> = forwardRef<HTMLElement, BadgeProps>(

src/components/bullet/Bullet.tsx

@@ -3,18 +3,19 @@ import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
 import { BoxProps } from '../box/Box';
+import { COLORS, SIZES, TINTS } from '../../constants';
 
 interface BulletProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** A border color to give to the counter */
-  borderColor?: 'neutral' | 'mint' | 'aqua' | 'violet' | 'teal' | 'gold' | 'ruby';
+  borderColor?: typeof COLORS[number];
   /** A border tint to give to the counter */
-  borderTint?: 'darkest' | 'dark' | 'light' | 'lightest';
+  borderTint?: Exclude<typeof TINTS[number], 'normal'>;
   /** A class name for the wrapper to give custom styles. */
   className?: string;
   /** The color of the bullet. */
-  color?: 'neutral' | 'mint' | 'aqua' | 'violet' | 'teal' | 'gold' | 'ruby';
+  color?: typeof COLORS[number];
   /** The size of the bullet. */
-  size?: 'small' | 'medium' | 'large';
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 class Bullet extends PureComponent<BulletProps> {

src/components/button/Button.tsx

@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 import { GenericComponent } from '../../@types/types';
+import { COLORS, SIZES } from '../../constants';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
 import LoadingSpinner from '../loadingSpinner';
@@ -29,7 +30,7 @@ export interface ButtonProps extends Omit<BoxProps, 'size'> {
   /** A class name for the button to give custom styles. */
   className?: string;
   /** The color which the button should have when 'level' is set to 'outline' */
-  color?: 'teal' | 'neutral' | 'mint' | 'violet' | 'ruby' | 'gold' | 'aqua' | 'white';
+  color?: typeof COLORS[number] | 'white';
   /** A custom element to be rendered */
   element?: any;
   /** If true, component will be disabled. */
@@ -49,7 +50,7 @@ export interface ButtonProps extends Omit<BoxProps, 'size'> {
   /** If true, component will show a loading spinner instead of label or children. */
   processing?: boolean;
   /** Size of the button. */
-  size?: 'tiny' | 'small' | 'medium' | 'large';
+  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'hero'>;
   /** Type of the button element. */
   type?: string;
 }

src/components/buttonGroup/ButtonGroup.tsx

@@ -8,6 +8,7 @@ import theme from './theme.css';
 import { BoxProps } from '../box/Box';
 import { BUTTON_LEVELS } from '../button/Button';
 import isReactElement from '../utils/isReactElement';
+import { SIZES } from '../../constants';
 
 interface ButtonGroupProps extends Omit<BoxProps, 'size' | 'onChange' | 'ref'> {
   /** The content to display inside the button group. */
@@ -17,7 +18,7 @@ interface ButtonGroupProps extends Omit<BoxProps, 'size' | 'onChange' | 'ref'> {
   /** If true, child components will be displayed segmented. */
   segmented?: boolean;
   /** The level of the buttons */
-  size?: 'tiny' | 'small' | 'medium' | 'large';
+  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'hero'>;
   /** The level of the buttons */
   level?: keyof typeof BUTTON_LEVELS;
   /** The value of the currently active button. */

src/components/checkbox/Checkbox.tsx

@@ -7,6 +7,7 @@ import { TextBodyCompact, TextDisplay, TextSmall } from '../typography';
 import theme from './theme.css';
 import { BoxProps } from '../box/Box';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface CheckboxProps extends Omit<BoxProps, 'onChange' | 'size'> {
   /** If true, the checkbox will be checked. */
@@ -26,7 +27,7 @@ interface CheckboxProps extends Omit<BoxProps, 'onChange' | 'size'> {
   /** Indicate whether the checkbox is neither checked or unchecked. */
   indeterminate?: boolean;
   /** Size of the checkbox. */
-  size?: 'small' | 'medium' | 'large';
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const Checkbox: GenericComponent<CheckboxProps> = forwardRef<HTMLInputElement, CheckboxProps>(

src/components/datepicker/DatePicker.tsx

@@ -11,8 +11,7 @@ import uiUtilities from '@teamleader/ui-utilities';
 import { BoxProps } from '../box/Box';
 import localeUtils from './localeUtils';
 import { GenericComponent } from '../../@types/types';
-
-type Size = 'smallest' | 'small' | 'medium' | 'large';
+import { SIZES } from '../../constants';
 
 interface DatePickerProps extends Omit<BoxProps & DayPickerProps, 'size' | 'onChange' | 'modifiers' | 'ref'> {
   /** If true we give a border to our wrapper. */
@@ -26,7 +25,7 @@ interface DatePickerProps extends Omit<BoxProps & DayPickerProps, 'size' | 'onCh
   /** The current selected date. */
   selectedDate?: Date;
   /** Size of the DatePicker component. */
-  size?: Size;
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>;
   withMonthPicker?: boolean;
   showWeekNumbers?: boolean;
 }
@@ -58,7 +57,10 @@ const DatePicker: GenericComponent<DatePickerProps> = ({
   };
 
   const getMonthPickerSize = () => {
-    const monthPickerSizeByDatePickerSize: Record<string, Size> = {
+    const monthPickerSizeByDatePickerSize: Record<
+      string,
+      Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>
+    > = {
       small: 'smallest',
       medium: showWeekNumbers ? 'medium' : 'small',
       large: 'large',

src/components/datepicker/DatePickerInput.tsx

@@ -10,8 +10,7 @@ import { formatDate } from './localeUtils';
 import { IconCalendarSmallOutline } from '@teamleader/ui-icons';
 import { BoxProps } from '../box/Box';
 import { GenericComponent } from '../../@types/types';
-
-export type Size = 'small' | 'medium' | 'large';
+import { SIZES } from '../../constants';
 
 interface DatePickerInputProps extends Omit<BoxProps, 'size' | 'onChange'> {
   /** A class name for the wrapper to give custom styles. */
@@ -37,20 +36,20 @@ interface DatePickerInputProps extends Omit<BoxProps, 'size' | 'onChange'> {
   /** The current selected date. */
   selectedDate?: Date;
   /** Size of the Input & DatePicker components. */
-  size?: Size;
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
   /** Overridable size of the Input component. */
-  inputSize?: Size;
+  inputSize?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
   /** Overridable size of the DatePicker component. */
-  datePickerSize?: Size;
+  datePickerSize?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
   /** Whether the picker should automatically open on input focus. True by default. */
   openPickerOnFocus?: boolean;
 }
 
 interface DayPickerProps {
-  numberOfMonths: number;
-  showOutsideDays: boolean;
-  showWeekNumbers: boolean;
-  withMonthPicker: boolean;
+  numberOfMonths?: number;
+  showOutsideDays?: boolean;
+  showWeekNumbers?: boolean;
+  withMonthPicker?: boolean;
 }
 
 const DatePickerInput: GenericComponent<DatePickerInputProps> = ({

src/components/datepicker/MonthPicker.tsx

@@ -6,6 +6,7 @@ import { NumericInput } from '../input';
 import theme from './theme.css';
 import { LocaleUtils } from 'react-day-picker';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface MonthPickerProps {
   /** Current date */
@@ -17,7 +18,7 @@ interface MonthPickerProps {
   /** The localeUtils from the DatePicker */
   localeUtils?: LocaleUtils;
   /** Size of the MonthPicker component. */
-  size?: 'smallest' | 'small' | 'medium' | 'large';
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>;
 }
 
 interface Option {

src/components/datepicker/NavigationBar.tsx

@@ -10,8 +10,8 @@ import {
 import theme from './theme.css';
 import cx from 'classnames';
 import { LocaleUtils } from 'react-day-picker';
-import { Size } from './WeekDay';
 import { GenericComponent } from '../../@types/types';
+import { SIZES } from '../../constants';
 
 interface NavigationBarProps {
   className?: string;
@@ -20,7 +20,7 @@ interface NavigationBarProps {
   previousMonth: Date;
   onNextClick?: () => void;
   onPreviousClick?: () => void;
-  size?: Size;
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>;
   withMonthPicker?: boolean;
 }