feat: change on imports with type

src/components/Switch/Switch.mdx

@@ -0,0 +1,28 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import Switch from './Switch';
+import Stack from '../storyUtils/Stack';
+import SwitchShowcase from '../storyUtils/SwitchShowcase';
+import { boolean, select, withKnobs, text } from '@storybook/addon-knobs';
+import * as SwitchStories from './Switch.stories';
+
+<Meta of={SwitchStories} />
+
+# Switch
+
+An interactive Switch component meant to serve as an alternative way of toggling between states.
+
+## Usage
+
+```js
+import { Switch } from '@orfium/ictinus';
+
+<Switch />;
+```
+
+## Props
+
+<ArgTypes of={Switch} />
+
+### Simple Switch
+
+<Canvas of={SwitchStories.SimpleSwitch} />

src/components/Switch/Switch.stories.mdx → src/components/Switch/Switch.stories.tsx

@@ -1,31 +1,15 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs';
 import Switch from './Switch';
 import Stack from '../storyUtils/Stack';
 import SwitchShowcase from '../storyUtils/SwitchShowcase';
 import { boolean, select, withKnobs, text } from '@storybook/addon-knobs';
 
-<Meta title="Original Components/Controls/Switch" component={Switch} />
+export default {
+  title: 'Original Components/Controls/Switch',
+  component: Switch,
+};
 
-# Switch
-
-An interactive Switch component meant to serve as an alternative way of toggling between states.
-
-## Usage
-
-```js
-import { Switch } from '@orfium/ictinus';
-
-<Switch />;
-```
-
-## Props
-
-<Props of={Switch} />
-
-### Simple Switch
-
-<Preview>
-  <Story name="Simple Switch" parameters={{ decorators: [withKnobs] }}>
+export const SimpleSwitch = {
+  render: () => (
     <Stack>
       <SwitchShowcase
         hasLabel={boolean('hasLabel', true)}
@@ -34,5 +18,11 @@ import { Switch } from '@orfium/ictinus';
         labelPlacement={select('labelPlacement', ['left', 'right'], 'left')}
       />
     </Stack>
-  </Story>
-</Preview>
+  ),
+
+  name: 'Simple Switch',
+
+  parameters: {
+    decorators: [withKnobs],
+  },
+};

src/components/Switch/Switch.tsx

@@ -4,7 +4,7 @@ import ReactSwitch from 'react-switch';
 
 import { Label, SwitchWrapper, Container } from './Switch.style';
 import { useTheme } from '../../index';
-import { TestProps } from '../../utils/types';
+import type { TestProps } from '../../utils/types';
 
 export type SwitchProps = {
   label?: string;
@@ -17,7 +17,7 @@ export type SwitchProps = {
   isDisabled?: boolean;
 } & TestProps;
 
-const Switch: React.FCC<SwitchProps> = ({
+const Switch: React.FC<SwitchProps> = ({
   isDisabled = false,
   label,
   isChecked,

src/components/Tag/Tag.style.ts

@@ -1,9 +1,10 @@
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 import { rem } from 'theme/utils';
 
 import { getTagTokens } from './Tag.tokens';
-import { TagProps } from './Tag.types';
-import { Theme } from '../../theme';
+import type { TagProps } from './Tag.types';
+import type { Theme } from '../../theme';
 import { generateStylesFromTokens } from 'components/Typography/utils';
 
 export const tagContainerStyles =

src/components/Tag/Tag.tokens.ts

@@ -1,7 +1,8 @@
 import tag from 'theme/tokens/components/variables/tag';
-import { getComponentTokens, DotKeys } 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 TagTokens = DotKeys<typeof tag>;
 

src/components/Tag/Tag.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { DivProps } from 'utils/common';
+import type { DivProps } from 'utils/common';
 
 import useGetTagUtils from './hooks/useGetTagUtils';
 import { tagContainerStyles } from './Tag.style';
-import { TagProps } from './Tag.types';
+import type { TagProps } from './Tag.types';
 
 const Tag = React.forwardRef<HTMLDivElement, DivProps & TagProps>(
   (

src/components/Tag/Tag.types.ts

@@ -1,6 +1,6 @@
-import { TestProps } from 'utils/types';
+import type { TestProps } from 'utils/types';
 
-import { AcceptedIconNames } from 'components/Icon';
+import type { AcceptedIconNames } from 'components/Icon';
 
 export type TagColors = 'neutral' | 'blue' | 'red' | 'purple' | 'teal';
 

src/components/Tag/hooks/useGetTagUtils.tsx

@@ -1,10 +1,10 @@
 import useTheme from 'hooks/useTheme';
 import React, { useCallback, useMemo } from 'react';
-import { TestProps } from 'utils/types';
+import type { TestProps } from 'utils/types';
 
 import { iconStyles } from '../Tag.style';
 import { getTagTokens } from '../Tag.tokens';
-import { TagProps } from '../Tag.types';
+import type { TagProps } from '../Tag.types';
 import Icon from 'components/Icon';
 
 const useGetTagUtils = ({
@@ -42,7 +42,7 @@ const useGetTagUtils = ({
         <Icon
           dataTestId={`${dataTestPrefixId}_tag_prefix`}
           size={12}
-          name={'checkmark'}
+          name="checkmark"
           color={tokens('textColor.blue')}
         />
       );

src/components/TextArea/TextArea.style.ts

@@ -1,9 +1,10 @@
-import { css, SerializedStyles } from '@emotion/react';
-import { CSSObject } from '@emotion/serialize';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import type { CSSObject } from '@emotion/serialize';
 import { rem } from 'theme/utils';
 
-import { TextAreaProps } from './TextArea';
-import { Theme } from '../../theme';
+import type { TextAreaProps } from './TextArea';
+import type { Theme } from '../../theme';
 import { LABEL_TRANSFORM_LEFT_SPACING } from 'components/Label/Label.style';
 import { getTextInputBaseTokens } from 'components/TextInputBase/TextInputBase.tokens';
 import { body03 } from 'components/Typography/Typography.config.styles';

src/components/TextArea/TextArea.tsx

@@ -3,8 +3,9 @@ import isEqual from 'react-fast-compare';
 
 import { hintMessageStyle, sxProp } from './TextArea.style';
 import { Label, useTheme } from '../../index';
-import { TestProps } from '../../utils/types';
-import TextInputBase, { TextInputBaseProps } from '../TextInputBase/TextInputBase';
+import type { TestProps } from '../../utils/types';
+import type { TextInputBaseProps } from '../TextInputBase/TextInputBase';
+import TextInputBase from '../TextInputBase/TextInputBase';
 import { inputStyle as baseInputStyle } from 'components/TextInputBase/TextInputBase.style';
 
 export type TextAreaProps = {
@@ -61,6 +62,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
     placeholder,
   })(theme);
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const shouldShowCounter = maxCharacters && status?.type != 'error';
 
   const counter = shouldShowCounter ? (

src/components/TextField/TextField.style.ts

@@ -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 iconWrapperStyle =

src/components/TextField/TextField.tsx

@@ -1,16 +1,18 @@
 import useFieldUtils from 'hooks/useFieldUtils';
 import { omit } from 'lodash';
-import React, { InputHTMLAttributes, useRef } from 'react';
+import type { InputHTMLAttributes} from 'react';
+import React, { useRef } from 'react';
 import isEqual from 'react-fast-compare';
 import InputMask from 'react-input-mask';
 import { generateUniqueID } from 'utils/helpers';
 
 import { suffixContainerStyle } from './TextField.style';
-import { TestProps } from '../../utils/types';
+import type { TestProps } from '../../utils/types';
 import Label from '../Label';
 import MultiTextFieldBase from 'components/MultiTextFieldBase/MultiTextFieldBase';
-import { SelectOption } from 'components/Select';
-import TextInputBase, { TextInputBaseProps } from 'components/TextInputBase';
+import type { SelectOption } from 'components/Select';
+import type { TextInputBaseProps } from 'components/TextInputBase';
+import TextInputBase from 'components/TextInputBase';
 import { inputStyle } from 'components/TextInputBase/TextInputBase.style';
 
 export type InputProps = Partial<

src/components/TextField/components/commons.tsx

@@ -1,4 +1,5 @@
-import React, { FCC, MouseEvent } from 'react';
+import type { FCC, MouseEvent } from 'react';
+import React from 'react';
 
 import { iconWrapperStyle } from '../TextField.style';
 

src/components/TextInputBase/TextInputBase.style.ts

@@ -1,12 +1,14 @@
-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';
 
-import { TextInputBaseProps } from './TextInputBase';
-import { getTextInputBaseTokens, TextInputBaseTokens } from './TextInputBase.tokens';
-import { ColorScheme } from '../../theme/types';
+import type { TextInputBaseProps } from './TextInputBase';
+import type { TextInputBaseTokens } from './TextInputBase.tokens';
+import { getTextInputBaseTokens } from './TextInputBase.tokens';
+import type { ColorScheme } from '../../theme/types';
 import { LABEL_TRANSFORM_LEFT_SPACING } from 'components/Label/Label.style';
-import { body02, body03 } from 'components/Typography/Typography.config.styles';
+import { body03 } from 'components/Typography/Typography.config.styles';
 import { generateStylesFromTokens } from 'components/Typography/utils';
 
 // TODO:MERGE: remove theme as prop and do it as (theme) => ({}) because emotion should pass

src/components/TextInputBase/TextInputBase.tokens.ts

@@ -1,7 +1,8 @@
 import field from 'theme/tokens/components/variables/field';
-import { getComponentTokens, DotKeys } 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 TextInputBaseTokens = DotKeys<typeof field>;
 

src/components/TextInputBase/TextInputBase.tsx

@@ -1,15 +1,16 @@
-import { CSSObject } from '@emotion/serialize';
+import type { CSSObject } from '@emotion/serialize';
 import useTheme from 'hooks/useTheme';
-import React, { FCC } from 'react';
+import type { FCC } from 'react';
+import React from 'react';
 import isEqual from 'react-fast-compare';
-import { ComponentSizes } from 'types';
+import type { ComponentSizes } from 'types';
 
 import { hintMessageStyle, textFieldStyle, wrapperStyle } from './TextInputBase.style';
 import { getTextInputBaseTokens } from './TextInputBase.tokens';
 import { generateTestDataId } from '../../utils/helpers';
-import { TestProps } from '../../utils/types';
+import type { TestProps } from '../../utils/types';
 import Icon from 'components/Icon';
-import { AcceptedIconNames } from 'components/Icon/types';
+import type { AcceptedIconNames } from 'components/Icon/types';
 
 export type TextInputBaseProps = {
   /** The label of the text field that will be used as a placeholder and a label */
@@ -19,7 +20,7 @@ export type TextInputBaseProps = {
   /** The size of input */
   size?: ComponentSizes;
   /** An optional suffix (element or icon-name) to show to the left */
-  suffix?: AcceptedIconNames | JSX.Element | null;
+  suffix?: AcceptedIconNames | React.ReactNode | null;
   /** If the text field value is required */
   isRequired?: boolean;
   /** If the text field is disabled */
@@ -66,7 +67,7 @@ const TextInputBase: FCC<
       css={hintMessageStyle({ status, isDisabled })}
     >
       {!isDisabled && status.type === 'error' && size === 'normal' && (
-        <Icon color={tokens('textColor.errorHintColor')} name={'warning'} size={12} />
+        <Icon color={tokens('textColor.errorHintColor')} name="warning" size={12} />
       )}
       <span id={status.id}>{status.hintMessage}</span>
     </div>

src/components/ThemeProvider/Test.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+
+import type { BoxProps as BoxProps } from '../Box';
+
+type TestProps = BoxProps;
+
+const Test = forwardRef<HTMLDivElement, TestProps>((props, ref) => (
+  <div {...props} ref={ref}>
+    {props.children}
+  </div>
+));
+Test.displayName = 'Test';
+
+export default Test;

src/components/ThemeProvider/ThemeProvider.style.ts

@@ -1,6 +1,7 @@
-import { SerializedStyles, css } from '@emotion/react';
+import type { SerializedStyles} from '@emotion/react';
+import { css } from '@emotion/react';
 import emotionReset from 'emotion-reset';
-import { Theme } from 'theme';
+import type { Theme } from 'theme';
 
 export const scrollbar = (theme: Theme): SerializedStyles => css`
   // for Firefox

src/components/ThemeProvider/ThemeProvider.tsx

@@ -2,13 +2,14 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { Global } from '@emotion/react';
 import { ThemeSwitchProvider, useThemeSwitch } from 'hooks/useThemeSwitch';
 import { keys, merge, pick } from 'lodash';
-import React from 'react';
-import theme, { Theme, ThemeConfig } from 'theme';
+import * as React from 'react';
+import type { Theme, ThemeConfig } from 'theme';
+import theme from 'theme';
 
 import { globalStyles } from './ThemeProvider.style';
 import { TypeColorToColorMatchProvider } from '../../hooks/useTypeColorToColorMatch';
-import { ColorScheme } from '../../theme/types';
-import { DeepPartial } from '../../utils/types';
+import type { ColorScheme } from '../../theme/types';
+import type { DeepPartial } from '../../utils/types';
 import 'utils/date';
 
 export type ThemeProviderProps = {
@@ -19,7 +20,10 @@ export type ThemeProviderProps = {
 const deepMergeTheme = (newTheme: DeepPartial<Theme>, theming: 'dark' | 'semantic'): Theme =>
   merge(theme(theming), pick(newTheme, keys(theme(theming))));
 
-const ThemeProvider: React.FCC<ThemeProviderProps> = ({ theme = {}, children }) => {
+const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({
+  theme = {},
+  children,
+}) => {
   return (
     <ThemeSwitchProvider>
       <ThemeProviderContents theme={theme}>{children}</ThemeProviderContents>

src/components/Toast/Toast.style.ts

@@ -1,11 +1,12 @@
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 import { rem } from 'theme/utils';
 
 import { isNotificationTypes } from './Toast';
-import { Theme } from '../../theme';
+import type { Theme } from '../../theme';
 import { transition, flexCenter } from '../../theme/functions';
-import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
-import { NotificationStyleType } from '../Notification/Notification';
+import type { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
+import type { NotificationStyleType } from '../Notification/Notification';
 
 const maxHeightOptions = {
   notification: `max-height: ${rem(294)};`,