chore: apply formatting docs

packages/apps/docs/.storybook/main.ts

@@ -34,7 +34,7 @@ const config: StorybookConfig = {
   },
   webpackFinal: async (config) => {
     config.plugins = config?.plugins || [];
-    (config.plugins)?.push(
+    config.plugins?.push(
       new VanillaExtractPlugin(),
       new MiniCssExtractPlugin(),
     );
@@ -72,13 +72,16 @@ const config: StorybookConfig = {
       '@/components': path.resolve(__dirname, '../src/components'),
       '@/utils': path.resolve(__dirname, '../src/utils'),
       '@/types': path.resolve(__dirname, '../src/types'),
-      '@kadena-ui/react-components': path.resolve(__dirname, '../../../libs/react-components'),
+      '@kadena-ui/react-components': path.resolve(
+        __dirname,
+        '../../../libs/react-components',
+      ),
     };
 
     config.resolve.fallback = {
       ...config.resolve?.fallback,
       zlib: false,
-    }
+    };
 
     return config;
   },

packages/apps/docs/.storybook/preview.ts

@@ -1,7 +1,4 @@
-import {
-  globalCss,
-  baseGlobalStyles,
-} from '@kadena-ui/react-components';
+import { globalCss, baseGlobalStyles } from '@kadena-ui/react-components';
 import { darkThemeClass } from '@kadena/react-ui/theme';
 
 import { themes } from '@storybook/theming';

packages/apps/docs/src/components/Analytics/Analytics.tsx

@@ -1,7 +1,7 @@
 import { analyticsPageView } from '@/utils/analytics';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import React, { FC, useEffect } from 'react';
+import React, { type FC, useEffect } from 'react';
 
 const TRACKING_ID: string = process.env.NEXT_PUBLIC_TRACKING_ID ?? '';
 

packages/apps/docs/src/components/Blog/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import { avatar } from './styles.css';
 
 import { getInitials } from '@/utils';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 interface IProps {
   name?: string;

packages/apps/docs/src/components/Blog/BlogList.tsx

@@ -1,6 +1,6 @@
 import { bloglist } from './styles.css';
 
-import React, { FC, ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 
 interface IProps {
   children?: ReactNode;

packages/apps/docs/src/components/Blog/FormatDate.tsx

@@ -1,5 +1,5 @@
 import { formatDateDistance } from '@/utils/dates';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 interface IProps {
   date?: string;

packages/apps/docs/src/components/BottomPageSection/BottomPageSection.tsx

@@ -4,11 +4,11 @@ import { EditPage } from './components/EditPage';
 import { Subscribe } from './components/Subscribe';
 import { bottomWrapperClass, bottomWrapperCodeLayoutClass } from './styles.css';
 
-import { INavigation } from '@/types/Layout';
+import { type INavigation } from '@/types/Layout';
 import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
 import classnames from 'classnames';
 import Link from 'next/link';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 interface IProps {
   editLink?: string;

packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx

@@ -8,7 +8,7 @@ import {
 
 import { useSubscribe } from './useSubscribe';
 
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 /**
  * @TODO: when the loading state story is implemented in the UI lib,

packages/apps/docs/src/components/BottomPageSection/components/useSubscribe.ts

@@ -1,6 +1,6 @@
 import { isEmailValid } from '@/utils';
 import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
-import { ChangeEvent, MouseEvent, useState } from 'react';
+import { type ChangeEvent, type MouseEvent, useState } from 'react';
 
 interface IReturn {
   hasError: boolean;

packages/apps/docs/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,8 +1,8 @@
 import { Box, Breadcrumbs as StyledBreadcrumbs } from '@kadena/react-ui';
 
-import { IMenuItem, ProductIconNames } from '@/types/Layout';
+import { type IMenuItem, type ProductIconNames } from '@/types/Layout';
 import Link from 'next/link';
-import React, { FC, useMemo } from 'react';
+import React, { type FC, useMemo } from 'react';
 
 interface IProps {
   menuItems: IMenuItem[];

packages/apps/docs/src/components/BrowseSection/BrowseSection.tsx

@@ -1,7 +1,7 @@
-import { Heading, IHeadingProps } from '@kadena/react-ui';
+import { type IHeadingProps, Heading } from '@kadena/react-ui';
 
-import { ILinkBlock, LinkBlock } from './LinkBlock';
-import { ILinkList, LinkList } from './LinkList';
+import { type ILinkBlock, LinkBlock } from './LinkBlock';
+import { type ILinkList, LinkList } from './LinkList';
 import {
   columnLinkClass,
   columnLinkListItemClass,
@@ -11,7 +11,7 @@ import {
 
 import classnames from 'classnames';
 import Link from 'next/link';
-import React, { FC, FunctionComponentElement } from 'react';
+import React, { type FC, type FunctionComponentElement } from 'react';
 
 export interface IBrowseSectionProps {
   title?: string;

packages/apps/docs/src/components/BrowseSection/LinkBlock.tsx

@@ -2,9 +2,9 @@ import { Heading, ProductIcon, Stack, Text } from '@kadena/react-ui';
 
 import { iconClass, listItemClass, listItemLinkClass } from './styles.css';
 
-import { ProductIconNames } from '@/types/Layout';
+import { type ProductIconNames } from '@/types/Layout';
 import Link from 'next/link';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 export interface ILinkBlock {
   title: string;

packages/apps/docs/src/components/BrowseSection/LinkList.tsx

@@ -2,7 +2,7 @@ import { LinkList as InnerLinkList } from '../LinkList';
 
 import { listItemClass } from './styles.css';
 
-import React, { FC, ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 
 export interface ILinkList {
   title: string;

packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx

@@ -3,7 +3,7 @@ import { Box, Stack, SystemIcon, Text, useModal } from '@kadena/react-ui';
 import { consentButtonColorVariants } from './styles.css';
 
 import { updateConsent } from '@/utils/analytics';
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { type FC, useCallback, useEffect, useState } from 'react';
 
 export const ConsentModal: FC = () => {
   const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);

packages/apps/docs/src/components/InfiniteScroll/InfiniteScroll.tsx

@@ -1,7 +1,7 @@
 import { Button, Heading, Stack, Text } from '@kadena/react-ui';
 
 import { Loading } from '@/components';
-import React, { FC, useEffect, useRef } from 'react';
+import React, { type FC, useEffect, useRef } from 'react';
 
 interface IProps {
   handleLoad: (isRetry: boolean) => void;

packages/apps/docs/src/components/LastModifiedDate/LastModifiedDate.tsx

@@ -3,7 +3,7 @@
 //import { Stack, Text } from '@kadena/react-components';
 //import { formatISODate } from '@/utils/dates';
 //import React, { FC } from 'react';
-import { FC } from 'react';
+import { type FC } from 'react';
 
 interface IProps {
   date?: Date;

packages/apps/docs/src/components/Layout/Blog/Blog.tsx

@@ -12,10 +12,10 @@ import { globalClass } from '../global.css';
 import { articleTopMetadataClass, bottomWrapperClass } from './Blog.css';
 import { ArticleMetadataItem, PageGrid } from './styles';
 
-import { IPageProps } from '@/types/Layout';
+import { type IPageProps } from '@/types/Layout';
 import { formatDateDistance } from '@/utils/dates';
 import classNames from 'classnames';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 export const Blog: FC<IPageProps> = ({
   children,

packages/apps/docs/src/components/Layout/Blog/styles.ts

@@ -1,4 +1,4 @@
-import { styled, StyledComponent } from '@kadena/react-components';
+import { type StyledComponent, styled } from '@kadena/react-components';
 
 import { BasePageGrid } from '../components';
 

packages/apps/docs/src/components/Layout/Full/Full.tsx

@@ -21,11 +21,11 @@ import { PageGrid } from './styles';
 import { BottomPageSection } from '@/components/BottomPageSection';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { LastModifiedDate } from '@/components/LastModifiedDate';
-import { IPageProps } from '@/types/Layout';
+import { type IPageProps } from '@/types/Layout';
 import { createSlug } from '@/utils';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { type FC, useEffect, useRef, useState } from 'react';
 
 export const Full: FC<IPageProps> = ({
   children,

packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx

@@ -1,6 +1,6 @@
 import { AsideItem, AsideItemLink } from './AsideStyles';
 
-import React, { FC, MouseEventHandler, ReactNode } from 'react';
+import React, { type FC, type MouseEventHandler, type ReactNode } from 'react';
 
 interface IProps {
   children?: ReactNode;

packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts

@@ -1,4 +1,4 @@
-import { styled, StyledComponent } from '@kadena/react-components';
+import { type StyledComponent, styled } from '@kadena/react-components';
 
 import Link from 'next/link';
 

packages/apps/docs/src/components/Layout/Full/components/Aside/ListItem.tsx

@@ -1,10 +1,10 @@
 import { AsideLink, AsideList } from './';
 
-import { ISubHeaderElement } from '@/types/Layout';
+import { type ISubHeaderElement } from '@/types/Layout';
 import { createSlug } from '@/utils';
 import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
 import { useRouter } from 'next/router';
-import React, { FC, MouseEvent } from 'react';
+import React, { type FC, type MouseEvent } from 'react';
 
 interface IProps {
   // eslint-disable-next-line @rushstack/no-new-null

packages/apps/docs/src/components/Layout/Full/styles.ts

@@ -1,4 +1,4 @@
-import { styled, StyledComponent } from '@kadena/react-components';
+import { type StyledComponent, styled } from '@kadena/react-components';
 
 import { BasePageGrid } from '../components';
 

packages/apps/docs/src/components/Layout/Full/useCreateSubmenu.ts

@@ -1,4 +1,4 @@
-import { ISubHeaderElement, TagNameType } from '@/types/Layout';
+import { type ISubHeaderElement, type TagNameType } from '@/types/Layout';
 import { createSlug, getParentHeading } from '@/utils';
 import { useRouter } from 'next/router';
 import { useEffect, useRef, useState } from 'react';

packages/apps/docs/src/components/Layout/Home/Home.tsx

@@ -3,8 +3,8 @@ import { Template } from '../components/Template';
 
 import { globalClass } from './../global.css';
 
-import { IPageProps } from '@/types/Layout';
-import React, { FC } from 'react';
+import { type IPageProps } from '@/types/Layout';
+import React, { type FC } from 'react';
 
 export const Home: FC<IPageProps> = ({ children, leftMenuTree }) => {
   return (

packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx

@@ -4,8 +4,8 @@ import { mostPopularWrapper } from './style.css';
 import { StyledHeader, SubHeader, Wrapper } from './styles';
 
 import { MostPopular } from '@/components/MostPopular';
-import { IMostPopularPage } from '@/types/MostPopularData';
-import React, { FC } from 'react';
+import { type IMostPopularPage } from '@/types/MostPopularData';
+import React, { type FC } from 'react';
 
 interface IProps {
   popularPages: IMostPopularPage[];

packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx

@@ -2,7 +2,7 @@ import { GradientText, Heading, Stack } from '@kadena/react-ui';
 
 import { StyledHeader, SubHeader, Wrapper } from './styles';
 
-import React, { FC, ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 
 interface IProps {
   children: ReactNode;

packages/apps/docs/src/components/Layout/Landing/components/Headers/styles.ts

@@ -1,8 +1,8 @@
 import {
+  type StyledComponent,
   darkTheme,
   Stack,
   styled,
-  StyledComponent,
 } from '@kadena/react-components';
 
 import { InnerWrapper } from '@/components/Layout/components/styles';

packages/apps/docs/src/components/Layout/Landing/styles.ts

@@ -1,4 +1,4 @@
-import { styled, StyledComponent } from '@kadena/react-components';
+import { type StyledComponent, styled } from '@kadena/react-components';
 
 import { BasePageGrid } from '../components';
 

packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx

@@ -11,10 +11,10 @@ import { CodeBackground, PageGrid } from './styles';
 import { BottomPageSection } from '@/components/BottomPageSection';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { LastModifiedDate } from '@/components/LastModifiedDate';
-import { IPageProps } from '@/types/Layout';
+import { type IPageProps } from '@/types/Layout';
 import classNames from 'classnames';
-import React, { FC } from 'react';
-import { RedocRawOptions } from 'redoc';
+import React, { type FC } from 'react';
+import { type RedocRawOptions } from 'redoc';
 
 export const options: RedocRawOptions = {
   pathInMiddlePanel: true,

packages/apps/docs/src/components/Layout/Redocly/styles.ts

@@ -1,4 +1,4 @@
-import { styled, StyledComponent } from '@kadena/react-components';
+import { type StyledComponent, styled } from '@kadena/react-components';
 
 import { BasePageGrid } from '../components';
 import { BaseBackground } from '../Full/components/Aside/AsideStyles';

packages/apps/docs/src/components/Layout/components/ArticleStyles.ts

@@ -1,4 +1,4 @@
-import { styled, StyledComponent } from '@kadena/react-components';
+import { type StyledComponent, styled } from '@kadena/react-components';
 
 export const Article: StyledComponent<'article'> = styled('article', {
   width: '100%',

packages/apps/docs/src/components/Layout/components/DocsLogo/DocsLogo.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@/hooks';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 interface IProps {
   overwriteTheme?: 'light' | 'dark';

packages/apps/docs/src/components/Layout/components/Footer/Footer.tsx

@@ -8,7 +8,7 @@ import { FooterText } from './FooterText';
 import { footerClass, footerWrapperClass } from './styles.css';
 
 import Link from 'next/link';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 export const Footer: FC = () => {
   return (

packages/apps/docs/src/components/Layout/components/Footer/FooterLink.tsx

@@ -3,7 +3,7 @@ import { Text } from '@kadena/react-ui';
 import { linkClass } from './styles.css';
 
 import Link from 'next/link';
-import React, { FC, ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 
 interface IProps {
   children?: ReactNode;

packages/apps/docs/src/components/Layout/components/Footer/FooterText.tsx

@@ -2,7 +2,7 @@ import { Text } from '@kadena/react-ui';
 
 import { textClass } from './styles.css';
 
-import React, { FC, ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 
 interface IProps {
   children?: ReactNode;

packages/apps/docs/src/components/Layout/components/Header/AsideToggle.tsx

@@ -2,7 +2,7 @@ import { SystemIcons } from '@kadena/react-components';
 
 import { HamburgerButton } from './styles';
 
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 interface IProps {
   toggleAside: () => void;

packages/apps/docs/src/components/Layout/components/Header/HamburgerMenuToggle.tsx

@@ -3,7 +3,7 @@ import { SystemIcons } from '@kadena/react-components';
 import { HamburgerButton } from './styles';
 
 import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 interface IProps {
   toggleMenu: () => void;

packages/apps/docs/src/components/Layout/components/Header/Header.tsx

@@ -26,10 +26,10 @@ import { ThemeToggle } from './ThemeToggle';
 import { useHeaderAnimation } from './useHeaderAnimation';
 
 import { useMenu } from '@/hooks';
-import { IMenuItem, LayoutType } from '@/types/Layout';
+import { type IMenuItem, type LayoutType } from '@/types/Layout';
 import { isOneOfLayoutType } from '@/utils';
 import Link from 'next/link';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 interface IProps {
   menuItems: IMenuItem[];

packages/apps/docs/src/components/Layout/components/Header/NavItemActiveBackground.tsx

@@ -1,6 +1,6 @@
 import { AnimationBackgroundWrapper } from '../styles';
 
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 interface IProps {
   ref: React.ForwardedRef<HTMLDivElement>;