style: enforce the use of top-level import type qualifier

package.json

@@ -50,7 +50,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@r1stack/coding-style": "^0.4.5",
+    "@r1stack/coding-style": "^0.5.0",
     "@swc/core": "^1.3.85",
     "@swc/jest": "^0.2.29",
     "@testing-library/jest-dom": "^6.1.3",

packages/docs/.storylite/config.tsx

@@ -1,4 +1,4 @@
-import { SLAddonPropsWithoutId, SLAppComponentProps } from '@storylite/storylite'
+import type { SLAddonPropsWithoutId, SLAppComponentProps } from '@storylite/storylite'
 import { BoxIcon, GithubIcon, ZapIcon } from 'lucide-react'
 
 const config: Partial<SLAppComponentProps> = {

packages/docs/stories/buttons.stories.tsx

@@ -1,4 +1,4 @@
-import { SLCoreAddon, Story } from '@storylite/storylite'
+import { SLCoreAddon, type Story } from '@storylite/storylite'
 
 import { LinkableBtn } from '../src/components/LinkableBtn'
 

packages/examples/react/.storylite/config.tsx

@@ -1,4 +1,4 @@
-import { SLAddonPropsWithoutId, SLAppComponentProps } from '@storylite/storylite'
+import type { SLAddonPropsWithoutId, SLAppComponentProps } from '@storylite/storylite'
 
 const config: Partial<SLAppComponentProps> = {
   title: ' ⚡️ StoryLite React',

packages/examples/react/stories/buttons.stories.tsx

@@ -1,4 +1,4 @@
-import { SLCoreAddon, Story } from '@storylite/storylite'
+import { SLCoreAddon, type Story } from '@storylite/storylite'
 
 import { LinkableBtn } from '../src/components/LinkableBtn'
 

packages/examples/react/stories/forwardref.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storylite/storylite'
+import type { Story } from '@storylite/storylite'
 
 import { ForwardRefButton } from '../src/components/ForwardRefButton'
 

packages/examples/react/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storylite/storylite'
+import type { Story } from '@storylite/storylite'
 
 import '../src/styles/components.css'
 

packages/storylite/package.json

@@ -29,11 +29,11 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@r1stack/cn": "^0.4.5",
+    "@r1stack/cn": "^0.5.0",
     "zustand": "^4.4.1"
   },
   "devDependencies": {
-    "@r1stack/coding-style": "^0.4.5",
+    "@r1stack/coding-style": "^0.5.0",
     "@types/node": "^20.6.1",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",

packages/storylite/src/app/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 import { RouteRenderer, useRouterStore } from '..'
-import { SLAppComponentProps, StoryModuleMap } from '../types'
+import type { SLAppComponentProps, StoryModuleMap } from '../types'
 import { useStoryLiteStore } from './stores/global'
 
 export type StoryLiteAppProps = {

packages/storylite/src/app/renderApp.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import { SLAppComponentProps, StoryModuleMap } from '@/types'
+import type { SLAppComponentProps, StoryModuleMap } from '@/types'
 
 import { StoryLiteApp } from '.'
 

packages/storylite/src/app/routes.ts

@@ -7,7 +7,7 @@ import * as IndexPage from '@/pages/index'
 import * as SandboxIndexPage from '@/pages/preview/index'
 import * as SandboxStoryPage from '@/pages/preview/story'
 import * as StoryPage from '@/pages/stories/story'
-import { RouterPage } from '@/services/router/router.types'
+import type { RouterPage } from '@/services/router/router.types'
 
 const appRoutes: Record<string, RouterPage> = {
   '/': IndexPage,

packages/storylite/src/app/stores/global.ts

@@ -6,10 +6,16 @@ import {
   getToolbarAddonsAsParameters,
   resolveToolbarAddons,
 } from '@/components/addons/getToolbarAddons'
-import { SLAddonsMap, SLParameters, SLUserDefinedAddons, StoryMap, StoryModuleMap } from '@/types'
+import type {
+  SLAddonsMap,
+  SLParameters,
+  SLUserDefinedAddons,
+  StoryMap,
+  StoryModuleMap,
+} from '@/types'
 
 import { getDefaultTitle } from './DefaultTitle'
-import { StoryLiteActions, StoryLiteState } from './global.types'
+import type { StoryLiteActions, StoryLiteState } from './global.types'
 
 const builtinAddons: SLAddonsMap = new Map(
   Array.from(getDefaultToolbarAddons().entries()).map(([id, addon]) => [id, { ...addon, id }]),

packages/storylite/src/app/stores/global.types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   SLAddonsMap,
   SLAppComponentProps,
   SLParameters,

packages/storylite/src/components/Btn.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react'
+import type { HTMLAttributes } from 'react'
 import { cn } from '@r1stack/cn'
 
 export type BtnProps = {

packages/storylite/src/components/InlineHtml.tsx

@@ -1,4 +1,4 @@
-import { HTMLProps } from 'react'
+import type { HTMLProps } from 'react'
 import { cn } from '@r1stack/cn'
 
 type InlineHtmlProps = {

packages/storylite/src/components/addons/getToolbarAddons.tsx

@@ -11,14 +11,14 @@ import { InlineHtml } from '@/components/InlineHtml'
 import { getStoryUrl } from '@/services/csf-api/navigation'
 
 import {
-  SLAddonProps,
-  SLAddonPropsWithoutId,
-  SLAddonsMap,
-  SLAddonsMapWithoutId,
   SLColorScheme,
   SLCoreAddon,
-  SLParameters,
-  SLUserDefinedAddons,
+  type SLAddonProps,
+  type SLAddonPropsWithoutId,
+  type SLAddonsMap,
+  type SLAddonsMapWithoutId,
+  type SLParameters,
+  type SLUserDefinedAddons,
 } from '../..'
 import { isTruthy } from '../../utility'
 

packages/storylite/src/components/canvas/CanvasIframe.tsx

@@ -1,4 +1,4 @@
-import { HTMLProps, useEffect } from 'react'
+import { useEffect, type HTMLProps } from 'react'
 import { cn } from '@r1stack/cn'
 
 import { useStoryLiteIframe, useStoryLiteStore } from '@/app/stores/global'

packages/storylite/src/components/canvas/CanvasIframeBody.tsx

@@ -1,4 +1,4 @@
-import { HTMLProps } from 'react'
+import type { HTMLProps } from 'react'
 import { cn } from '@r1stack/cn'
 
 import { useRouterQuery } from '@/services/router'

packages/storylite/src/components/sidebar/Sidebar.tsx

@@ -6,7 +6,7 @@ import bookmarkIcon from '@/assets/lucide/svg/bookmark.svg'
 import minusSquareIcon from '@/assets/lucide/svg/minus-square.svg'
 import plusSquareIcon from '@/assets/lucide/svg/plus-square.svg'
 import { InlineHtml } from '@/components/InlineHtml'
-import { getStoryNavigationTree, SLNavigationNode } from '@/services/csf-api/navigation'
+import { getStoryNavigationTree, type SLNavigationNode } from '@/services/csf-api/navigation'
 import { Link, useRouterParams } from '@/services/router'
 
 type SidebarProps = {

packages/storylite/src/components/toolbar/Toolbar.tsx

@@ -1,5 +1,5 @@
 import { useStoryLiteStore } from '@/app/stores/global'
-import { SLAddonProps } from '@/types'
+import type { SLAddonProps } from '@/types'
 
 import { ToolbarAddon, ToolbarStatefulAddon } from './ToolbarAddon'
 

packages/storylite/src/components/toolbar/ToolbarAddon.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 
 import { useStoryLiteStore } from '@/app/stores/global'
-import { StoryLiteParamValue, StoryLiteStore } from '@/app/stores/global.types'
-import { SLAddonContext, SLAddonProps, SLAddonState } from '@/types'
+import type { StoryLiteParamValue, StoryLiteStore } from '@/app/stores/global.types'
+import type { SLAddonContext, SLAddonProps, SLAddonState } from '@/types'
 
 import { Btn } from '../Btn'
 

packages/storylite/src/hooks/useDetectTheme.ts

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 
 import { useStoryLiteStore } from '@/app/stores/global'
-import { SLColorScheme } from '@/types'
+import type { SLColorScheme } from '@/types'
 
 export function useDetectTheme(): string {
   const [userConfig, params] = useStoryLiteStore(state => [state.config, state.parameters])

packages/storylite/src/pages/404.tsx

@@ -1,6 +1,6 @@
 import ErrorLayout from '@/components/layouts/ErrorLayout'
 
-import { SLStoryPageProps } from '..'
+import type { SLStoryPageProps } from '..'
 
 export default function Error404(props: SLStoryPageProps) {
   return (

packages/storylite/src/pages/preview/story.tsx

@@ -1,6 +1,6 @@
 import { CanvasIframeBody } from '@/components/canvas/CanvasIframeBody'
 import IframeLayout from '@/components/layouts/IframeLayout'
-import { SLStoryPageProps } from '@/types'
+import type { SLStoryPageProps } from '@/types'
 
 export default function StoryPage({ storyId }: SLStoryPageProps) {
   return <CanvasIframeBody storyId={storyId} />

packages/storylite/src/pages/stories/story.tsx

@@ -1,6 +1,6 @@
 import { CanvasRoot } from '@/components/canvas/CanvasRoot'
 import TopFrameLayout from '@/components/layouts/TopFrameLayout'
-import { SLStoryPageProps } from '@/types'
+import type { SLStoryPageProps } from '@/types'
 
 export default function StoryPage({ storyId }: SLStoryPageProps) {
   return <CanvasRoot storyId={storyId} />

packages/storylite/src/services/csf-api/navigation.tsx

@@ -1,4 +1,4 @@
-import { SLNode, StoryModuleMap } from '@/types'
+import type { SLNode, StoryModuleMap } from '@/types'
 import { isTruthy } from '@/utility'
 
 import { getStoryLiteBasePath } from '../router/getStoryLiteBasePath'

packages/storylite/src/services/messenger/useWindowMessenger.ts

@@ -4,9 +4,9 @@ import { useStoryLiteStore } from '@/app/stores/global'
 
 import { registerWindowMessageListener, sendWindowMessage } from './windowMessaging'
 import {
-  CrossDocumentMessage,
   CrossDocumentMessageSource,
   CrossDocumentMessageType,
+  type CrossDocumentMessage,
 } from './windowMessaging.types'
 
 export function useWindowMessenger() {

packages/storylite/src/services/messenger/windowMessaging.ts

@@ -1,7 +1,7 @@
 import {
-  CrossDocumentMessage,
   CrossDocumentMessageSource,
   WindowMessageOrigin,
+  type CrossDocumentMessage,
 } from './windowMessaging.types'
 
 export const sendWindowMessageToRoot = (message: CrossDocumentMessage) => {

packages/storylite/src/services/messenger/windowMessaging.types.ts

@@ -1,4 +1,4 @@
-import { SLParameters } from '@/types'
+import type { SLParameters } from '@/types'
 
 export enum WindowMessageOrigin {
   Same = '/',

packages/storylite/src/services/renderer/react.tsx

@@ -1,4 +1,4 @@
-import { SLDecorator, SLDecoratorContext, SLFunctionComponent, StoryWithId } from '@/types'
+import type { SLDecorator, SLDecoratorContext, SLFunctionComponent, StoryWithId } from '@/types'
 
 const defaultDecorator: SLDecorator<any> = (Story, context) => {
   // apply args

packages/storylite/src/services/router/createStoryLiteRouter.tsx

@@ -1,5 +1,5 @@
 import { Router } from './router.class'
-import { RouterPage } from './router.types'
+import type { RouterPage } from './router.types'
 
 export function createStoryLiteRouter(
   appRoutes: Record<string, RouterPage>,

packages/storylite/src/services/router/router.class.ts

@@ -1,7 +1,7 @@
-import React from 'react'
+import type React from 'react'
 
 import { createPatternRegex, getWindowHash, parsePathParams, parseUri } from './router.parser'
-import { CurrentRoute, Route } from './router.types'
+import type { CurrentRoute, Route } from './router.types'
 
 export class Router implements Iterable<Route> {
   [Symbol.iterator](): Iterator<Route, any, undefined> {

packages/storylite/src/services/router/router.component.tsx

@@ -1,7 +1,7 @@
-import { HTMLAttributes, ReactNode } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 
 import { useRouterStore } from './router.store'
-import { CurrentRoute } from './router.types'
+import type { CurrentRoute } from './router.types'
 
 export type RouteRendererProps = {
   route?: CurrentRoute

packages/storylite/src/services/router/router.parser.ts

@@ -1,4 +1,4 @@
-import { ParsedUri } from './router.types'
+import type { ParsedUri } from './router.types'
 
 export function parseUri(uri: string): ParsedUri {
   const parsedUri = new URL(uri ?? '', window.location.origin)

packages/storylite/src/services/router/router.store.tsx

@@ -6,7 +6,7 @@ import TopFrameLayout from '@/components/layouts/TopFrameLayout'
 import * as Error404 from '@/pages/404'
 
 import { createStoryLiteRouter } from './createStoryLiteRouter'
-import { CurrentRoute } from './router.types'
+import type { CurrentRoute } from './router.types'
 
 type State = {
   route?: CurrentRoute

packages/storylite/src/services/router/router.types.ts

@@ -1,4 +1,4 @@
-import { Router } from './router.class'
+import type { Router } from './router.class'
 
 export type Route = {
   pattern: string

packages/storylite/src/types/components.ts

@@ -1,6 +1,6 @@
-import { ComponentProps } from 'react'
+import type { ComponentProps } from 'react'
 
-import { SLObject } from './core'
+import type { SLObject } from './core'
 
 // Framework-agnostic component types for StoryLite
 

packages/storylite/src/types/config.ts

@@ -1,5 +1,5 @@
-import { SLNode } from './components'
-import { SLUserDefinedAddons } from './ui'
+import type { SLNode } from './components'
+import type { SLUserDefinedAddons } from './ui'
 
 // TODO: move to vite-plugin
 // export type SLVitePluginConfig = {

packages/storylite/src/types/parameters.ts

@@ -1,5 +1,5 @@
-import { SLNativeType } from './core'
-import { SLCoreAddon } from './ui'
+import type { SLNativeType } from './core'
+import type { SLCoreAddon } from './ui'
 
 export type SLParametersConfig = {
   [key: SLCoreAddon | `${SLCoreAddon}` | string]: {

packages/storylite/src/types/story.ts

@@ -1,5 +1,5 @@
-import { SLComponentProps, SLFunctionComponent, SLNode } from './components'
-import { SLParametersConfig } from './parameters'
+import type { SLComponentProps, SLFunctionComponent, SLNode } from './components'
+import type { SLParametersConfig } from './parameters'
 
 export type SLStoryContext<P extends SLFunctionComponent = SLFunctionComponent<{}>> = {
   /**

packages/storylite/src/types/ui.ts

@@ -1,8 +1,8 @@
-import { StoryLiteParamValue, StoryLiteStore } from '@/app/stores/global.types'
-import { BtnProps } from '@/components/Btn'
+import type { StoryLiteParamValue, StoryLiteStore } from '@/app/stores/global.types'
+import type { BtnProps } from '@/components/Btn'
 
-import { SLNode } from './components'
-import { SLNativeScalarType } from './core'
+import type { SLNode } from './components'
+import type { SLNativeScalarType } from './core'
 
 export enum SLCoreAddon {
   Grid = 'grid',

packages/storylite/src/utility/parametersToDataProps.ts

@@ -1,4 +1,4 @@
-import { SLParameters } from '@/types'
+import type { SLParameters } from '@/types'
 
 export function parametersToDataProps(parameters: SLParameters | undefined): {
   [key: `data-sl-${string}`]: any

packages/vite-plugin/package.json

@@ -44,7 +44,7 @@
     "vite": "^4.4.9"
   },
   "devDependencies": {
-    "@r1stack/coding-style": "^0.4.5",
+    "@r1stack/coding-style": "^0.5.0",
     "@types/node": "^20.6.1",
     "publint": "^0.2.2",
     "tsup": "^7.2.0",

packages/vite-plugin/src/plugin.ts

@@ -1,4 +1,4 @@
-import { Plugin } from 'vite'
+import type { Plugin } from 'vite'
 
 export type StoryLitePluginConfig = {
   stories: string

packages/vite-plugin/src/story-collector.ts

@@ -1,4 +1,4 @@
-import { BaseStory, BaseStoryWithId, StoryFiles, StoryFilesMap } from './types'
+import type { BaseStory, BaseStoryWithId, StoryFiles, StoryFilesMap } from './types'
 
 function filenameToId(filename: string) {
   return (