Skip to content

Commit

Permalink
feat: change on imports with type
Browse files Browse the repository at this point in the history
  • Loading branch information
panvourtsis committed Nov 29, 2023
1 parent 9414512 commit 067c096
Show file tree
Hide file tree
Showing 51 changed files with 152 additions and 109 deletions.
7 changes: 4 additions & 3 deletions src/components/Avatar/Avatar.style.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { css, SerializedStyles } from '@emotion/react';
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';

import { getAvatarTextTokens, getAvatarTokens } from './Avatar.tokens';
import { AvatarColors, AvatarSizes } from './Avatar.types';
import { Theme } from '../../theme';
import type { AvatarColors, AvatarSizes } from './Avatar.types';
import type { Theme } from '../../theme';
import { flex } from '../../theme/functions';
import { generateStylesFromTokens } from 'components/Typography/utils';

Expand Down
5 changes: 3 additions & 2 deletions src/components/Avatar/Avatar.tokens.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import avatar from 'theme/tokens/components/variables/avatar';
import avatarText from 'theme/tokens/components/variables/avatarText';
import { getComponentTokens, DotKeys } from 'theme/tokens/utils';
import type { DotKeys } from 'theme/tokens/utils';
import { getComponentTokens } from 'theme/tokens/utils';
import { rem } from 'theme/utils';

import { Theme } from '../../theme';
import type { Theme } from '../../theme';

const AVATAR_ICON_SIZE_FACTOR = 0.8;
const AVATAR_STACK_OVERLAP_FACTOR = 0.8;
Expand Down
7 changes: 4 additions & 3 deletions src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import useTheme from 'hooks/useTheme';
import React, { useMemo } from 'react';

import { avatarStyle } from './Avatar.style';
import { AvatarTokens, getAvatarTokens, parseAvatarIconSize } from './Avatar.tokens';
import { AvatarProps } from './Avatar.types';
import type { AvatarTokens} from './Avatar.tokens';
import { getAvatarTokens, parseAvatarIconSize } from './Avatar.tokens';
import type { AvatarProps } from './Avatar.types';
import Icon from '../Icon';

const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
Expand All @@ -24,7 +25,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
return (
<Icon
color={tokens(`textColor.${color}` as AvatarTokens)}
name={'userAvatar'}
name="userAvatar"
size={parseFloat(tokens(`size.${size}` as AvatarTokens, parseAvatarIconSize))}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Avatar/Avatar.types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DivProps } from '../../utils/common';
import type { DivProps } from '../../utils/common';

export type AvatarColors = 'blue' | 'teal' | 'purple' | 'red' | 'orange';

Expand Down
10 changes: 6 additions & 4 deletions src/components/Avatar/AvatarStack/AvatarStack.style.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { css, SerializedStyles } from '@emotion/react';
import { Theme } from 'theme';
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';
import type { Theme } from 'theme';
import { flex } from 'theme/functions';

import { AvatarTokens, getAvatarTokens, parseAvatarStackSize } from '../Avatar.tokens';
import { AvatarSizes } from '../Avatar.types';
import type { AvatarTokens} from '../Avatar.tokens';
import { getAvatarTokens, parseAvatarStackSize } from '../Avatar.tokens';
import type { AvatarSizes } from '../Avatar.types';

export const avatarStackStyle =
({ size }: { size: AvatarSizes }) =>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Avatar/AvatarStack/AvatarStack.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useCallback } from 'react';
import { DivProps } from 'utils/common';
import type { DivProps } from 'utils/common';
import { errorHandler, generateTestDataId } from 'utils/helpers';
import { TestProps } from 'utils/types';
import type { TestProps } from 'utils/types';

import { avatarStackStyle, avatarWrapperStyle } from './AvatarStack.style';
import { AvatarStackProps } from './AvatarStack.types';
import type { AvatarStackProps } from './AvatarStack.types';
import { errors } from './utils';
import Avatar from '../Avatar';

Expand Down
2 changes: 1 addition & 1 deletion src/components/Avatar/AvatarStack/AvatarStack.types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AvatarColors, AvatarSizes } from '../Avatar.types';
import type { AvatarColors, AvatarSizes } from '../Avatar.types';

export type AvatarStackProps = {
/** the maximum number of avatars to be displayed **/
Expand Down
2 changes: 1 addition & 1 deletion src/components/Avatar/AvatarStack/utils.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AvatarStackProps } from './AvatarStack.types';
import type { AvatarStackProps } from './AvatarStack.types';
import { PropsValidationError } from '../../../utils/errors';

export const errors = [
Expand Down
3 changes: 3 additions & 0 deletions src/components/Box/Box.style.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import styled from '@emotion/styled';

export const BoxWrapper = styled.div``;
10 changes: 6 additions & 4 deletions src/components/Box/Box.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { css, CSSObject } from '@emotion/react';
import type { CSSObject } from '@emotion/react';
import { css } from '@emotion/react';
import useTheme from 'hooks/useTheme';
import { omit } from 'lodash';
import React, { forwardRef, ReactNode } from 'react';
import React, { forwardRef } from 'react';

import { BoxWrapper } from './Box.style';
import type { StyledBoxProps } from './Box.types';
import { cssResolver, omitedCSSprops, pickCSSProperties, pickNonCSSProps } from './Box.utilities';

Expand Down Expand Up @@ -39,9 +41,9 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(({ children, ...rest }, ref) =>
};

return (
<div ref={ref} css={[css(propsToCss)]} {...props}>
<BoxWrapper ref={ref} css={[css(propsToCss)]} {...props}>
{children}
</div>
</BoxWrapper>
);
});

Expand Down
6 changes: 3 additions & 3 deletions src/components/Box/Box.types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { SpacingKey } from 'theme/globals/spacing';
import globalColors from 'theme/tokens/semantic/variables/colors';
import { DotKeys } from 'theme/tokens/utils';
import type { SpacingKey } from 'theme/globals/spacing';
import type globalColors from 'theme/tokens/semantic/variables/colors';
import type { DotKeys } from 'theme/tokens/utils';

export type Responsive<T> = T | Array<T>;

Expand Down
6 changes: 3 additions & 3 deletions src/components/Box/Box.utilities.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { curry, omit, pick } from 'lodash';
import { Theme } from 'theme';
import { SemanticColorsKey } from 'theme/tokens/semantic/colors';
import type { Theme } from 'theme';
import type { SemanticColorsKey } from 'theme/tokens/semantic/colors';

import { StyledBoxProps } from './Box.types';
import type { StyledBoxProps } from './Box.types';

export const omitedCSSprops = [
'p',
Expand Down
5 changes: 3 additions & 2 deletions src/components/Breadcrumb/BackToItem/BackToItem.style.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { css, SerializedStyles } from '@emotion/react';
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';

import { Theme } from '../../../theme';
import type { Theme } from '../../../theme';
import { getBreadcrumbTokens } from '../Breadcrumb.tokens';
import { generateStylesFromTokens } from 'components/Typography/utils';

Expand Down
4 changes: 2 additions & 2 deletions src/components/Breadcrumb/BackToItem/BackToItem.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { TestProps } from 'utils/types';
import type { TestProps } from 'utils/types';

import { backToContainerStyles, backToStyles } from './BackToItem.style';
import { BreadcrumbItem } from '../Breadcrumb.types';
import type { BreadcrumbItem } from '../Breadcrumb.types';
import Link from 'components/Link';

const GO_BACK_TO = 'Go back to';
Expand Down
5 changes: 3 additions & 2 deletions src/components/Breadcrumb/Breadcrumb.style.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { css, SerializedStyles } from '@emotion/react';
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';
import { flex } from 'theme/functions';

import { getBreadcrumbTokens } from './Breadcrumb.tokens';
import { Theme } from '../../theme';
import type { Theme } from '../../theme';

export const breadcrumbStyles =
() =>
Expand Down
5 changes: 3 additions & 2 deletions src/components/Breadcrumb/Breadcrumb.tokens.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import breadcrumb from 'theme/tokens/components/variables/breadcrumb';
import { DotKeys, getComponentTokens } from 'theme/tokens/utils';
import type { DotKeys} from 'theme/tokens/utils';
import { getComponentTokens } from 'theme/tokens/utils';

import { Theme } from '../../theme';
import type { Theme } from '../../theme';

export type BreadcrumbTokens = DotKeys<typeof breadcrumb>;

Expand Down
2 changes: 1 addition & 1 deletion src/components/Breadcrumb/Breadcrumb.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { generateUniqueKey } from 'utils/helpers';

import BackToItem from './BackToItem';
import { breadcrumbStyles } from './Breadcrumb.style';
import { BreadcrumbProps, BreadcrumbItem as BreadcrumbItemType } from './Breadcrumb.types';
import type { BreadcrumbProps, BreadcrumbItem as BreadcrumbItemType } from './Breadcrumb.types';
import BreadcrumbItem from './BreadcrumbItem';
import Link from 'components/Link';

Expand Down
4 changes: 2 additions & 2 deletions src/components/Breadcrumb/Breadcrumb.types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { TestProps } from 'utils/types';
import type { TestProps } from 'utils/types';

import { LinkProps } from 'components/Link/Link.types';
import type { LinkProps } from 'components/Link/Link.types';

export type BreadcrumbItem = {
/** Defines the label used for a link breadcrumb item */
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { css, SerializedStyles } from '@emotion/react';
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';

import { BreadcrumbItemProps } from './BreadcrumbItem';
import { Theme } from '../../../theme';
import type { BreadcrumbItemProps } from './BreadcrumbItem';
import type { Theme } from '../../../theme';
import { getBreadcrumbTokens } from '../Breadcrumb.tokens';
import { generateStylesFromTokens } from 'components/Typography/utils';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ childComponent, isLastI
<div css={breadcrumbItemStyles({ isLastItem })}>
{childComponent}
{/** @TODO Revisit icon size once Icon component is refactored for v5 */}
{!isLastItem && <Icon name={'triangleRight'} color={tokens('defaultColor')} size={12} />}
{!isLastItem && <Icon name="triangleRight" color={tokens('defaultColor')} size={12} />}
</div>
</li>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/Button.style.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Theme } from 'theme';
import type { Theme } from 'theme';

export const buttonSpanStyle = () => (theme: Theme) => {
return {
Expand Down
5 changes: 3 additions & 2 deletions src/components/Button/Button.tokens.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import button from 'theme/tokens/components/variables/button';
import textButton from 'theme/tokens/components/variables/textButton';
import { DotKeys, getComponentTokens } from 'theme/tokens/utils';
import type { DotKeys} from 'theme/tokens/utils';
import { getComponentTokens } from 'theme/tokens/utils';

import { Theme } from '../../theme';
import type { Theme } from '../../theme';

export type ButtonTokens = DotKeys<typeof button>;
export type TextButtonTokens = DotKeys<typeof textButton>;
Expand Down
16 changes: 10 additions & 6 deletions src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import useTheme from 'hooks/useTheme';
import React from 'react';
import { CommonButtonProps } from 'utils/common';
import { TestProps } from 'utils/types';
import type { CommonButtonProps } from 'utils/common';
import type { TestProps } from 'utils/types';

import { buttonSpanStyle } from './Button.style';
import { ButtonTokens, getButtonTokens } from '../Button/Button.tokens';
import ButtonBase, { ButtonBaseProps } from '../ButtonBase/ButtonBase';
import Avatar, { AvatarProps } from 'components/Avatar';
import Icon, { AcceptedIconNames } from 'components/Icon';
import type { ButtonTokens} from '../Button/Button.tokens';
import { getButtonTokens } from '../Button/Button.tokens';
import type { ButtonBaseProps } from '../ButtonBase/ButtonBase';
import ButtonBase from '../ButtonBase/ButtonBase';
import type { AvatarProps } from 'components/Avatar';
import Avatar from 'components/Avatar';
import type { AcceptedIconNames } from 'components/Icon';
import Icon from 'components/Icon';

export type ButtonProps = ButtonBaseProps &
TestProps &
Expand Down
5 changes: 3 additions & 2 deletions src/components/Button/ButtonLoader/ButtonLoader.style.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { css, SerializedStyles, keyframes } from '@emotion/react';
import { Theme } from 'theme';
import type { SerializedStyles} from '@emotion/react';
import { css, keyframes } from '@emotion/react';
import type { Theme } from 'theme';
import { rem } from 'theme/utils';

import { getButtonTokens } from '../../Button/Button.tokens';
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/ButtonLoader/ButtonLoader.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { TestProps } from 'utils/types';
import type { TestProps } from 'utils/types';

import { barStyle, barWrapperStyle, loaderWrapperStyle } from './ButtonLoader.style';

Expand Down
8 changes: 5 additions & 3 deletions src/components/Button/utils.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { isEmpty } from 'lodash';
import { darken, lighten, transparentize } from 'polished';
import { Theme } from 'theme';
import { BASE_SHADE, mainTypes } from 'theme/palette';
import type { Theme } from 'theme';
import type { mainTypes } from 'theme/palette';
import { BASE_SHADE } from 'theme/palette';

import { ColorShapeFromComponent, getColorFromType } from '../../utils/themeFunctions';
import type { ColorShapeFromComponent} from '../../utils/themeFunctions';
import { getColorFromType } from '../../utils/themeFunctions';

/**
* This function defines what background-color to show based on type or color passed
Expand Down
7 changes: 4 additions & 3 deletions src/components/ButtonBase/ButtonBase.style.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { css, SerializedStyles } from '@emotion/react';
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';

import { ButtonBaseProps } from './ButtonBase';
import { Theme } from '../../theme';
import type { ButtonBaseProps } from './ButtonBase';
import type { Theme } from '../../theme';
import { getButtonTokens, getTextButtonTokens } from '../Button/Button.tokens';
import { generateStylesFromTokens } from 'components/Typography/utils';

Expand Down
12 changes: 6 additions & 6 deletions src/components/ButtonBase/ButtonBase.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { CSSObject } from '@emotion/serialize';
import type { CSSObject } from '@emotion/serialize';
import React from 'react';

import { buttonBaseStyle, buttonWrapperStyle } from './ButtonBase.style';
import { ClickEvent } from '../../hooks/useLoading';
import { CommonButtonProps } from '../../utils/common';
import type { ClickEvent } from '../../hooks/useLoading';
import type { CommonButtonProps } from '../../utils/common';
import { generateTestDataId } from '../../utils/helpers';
import { ComponentSizes, TestProps } from '../../utils/types';
import { ButtonTypes } from 'components/Button/Button.types';
import type { ComponentSizes, TestProps } from '../../utils/types';
import type { ButtonTypes } from 'components/Button/Button.types';
import ButtonLoader from 'components/Button/ButtonLoader';
import { IconButtonShape } from 'components/IconButton';
import type { IconButtonShape } from 'components/IconButton';

export type EventButtonProps = {
onClick?: (event: ClickEvent) => void;
Expand Down
11 changes: 6 additions & 5 deletions src/components/Card/Card.style.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { css, SerializedStyles } from '@emotion/react';
import { Elevation } from 'index';
import { SpacingKey } from 'theme/globals/spacing';
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';
import type { Elevation } from 'index';
import type { SpacingKey } from 'theme/globals/spacing';

import { CardProps } from './Card';
import { Theme } from '../../theme';
import type { CardProps } from './Card';
import type { Theme } from '../../theme';

export const cardStyle =
({ elevated, isTransparent, radius }: CardProps) =>
Expand Down
11 changes: 8 additions & 3 deletions src/components/Card/Card.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Elevation } from 'index';
import type { Elevation } from 'index';
import React from 'react';
import { SpacingKey } from 'theme/globals/spacing';
import type { SpacingKey } from 'theme/globals/spacing';

import { cardStyle } from './Card.style';

Expand All @@ -13,7 +13,12 @@ export type CardProps = {
radius?: SpacingKey;
};

const Card: React.FCC<CardProps> = ({ elevated, isTransparent = false, radius, children }) => {
const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
elevated,
isTransparent = false,
radius,
children,
}) => {
return <div css={cardStyle({ elevated, isTransparent, radius })}>{children}</div>;
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import useTheme from 'hooks/useTheme';
import React from 'react';
import { LabelProps } from 'recharts';
import type { LabelProps } from 'recharts';

const xValueBase = 16;
const divisor = 2;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { css, SerializedStyles } from '@emotion/react';
import { Theme } from 'theme';
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';
import type { Theme } from 'theme';
import { rem } from 'theme/utils';

export const tickStyle = (fill: string) => (): SerializedStyles =>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Theme } from 'theme';
import type { Theme } from 'theme';
import { rem } from 'theme/utils';

export const tooltipStyle = () => (theme: Theme) => {
Expand Down
Loading

0 comments on commit 067c096

Please sign in to comment.