fix: Errors with type imports and exports in Storybook (#344)

.eslintrc.js

@@ -1,9 +1,15 @@
 module.exports = {
+  parserOptions: {
+    project: './tsconfig.json',
+  },
   extends: [
     '@pluralsh/eslint-config-typescript',
     'plugin:storybook/recommended',
   ],
   globals: {
     JSX: true,
   },
+  rules: {
+    '@typescript-eslint/consistent-type-exports': 'error',
+  },
 }

src/components/AppIcon.tsx

@@ -23,22 +23,29 @@ type AppIconProps = DivProps & {
 }
 
 const propTypes = {
-  size: PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge']),
+  size: PropTypes.oneOf([
+    'xxsmall',
+    'xsmall',
+    'small',
+    'medium',
+    'large',
+    'xlarge',
+  ]),
   spacing: PropTypes.oneOf(['none', 'padding']),
   hue: PropTypes.oneOf(['default', 'lighter', 'lightest']),
   clickable: PropTypes.bool,
   url: PropTypes.string,
   alt: PropTypes.string,
 }
 
-const parentFillLevelToHue:Record<FillLevel, Hue> = {
+const parentFillLevelToHue: Record<FillLevel, Hue> = {
   0: 'default',
   1: 'lighter',
   2: 'lightest',
   3: 'lightest',
 }
 
-const sizeToWidth:Record<Size, number> = {
+const sizeToWidth: Record<Size, number> = {
   xxsmall: 32,
   xsmall: 40,
   small: 64,
@@ -47,7 +54,7 @@ const sizeToWidth:Record<Size, number> = {
   xlarge: 160,
 }
 
-const sizeToIconWidth:Record<Size, number> = {
+const sizeToIconWidth: Record<Size, number> = {
   xxsmall: 16,
   xsmall: 24,
   small: 48,
@@ -164,4 +171,4 @@ const AppIcon = forwardRef(AppIconRef)
 AppIcon.propTypes = propTypes
 
 export default AppIcon
-export { AppIconProps }
+export type { AppIconProps }

src/components/Card.tsx

@@ -120,4 +120,4 @@ ref) => {
 })
 
 export default Card
-export { CardProps, CornerSize as CardSize, CardHue }
+export type { CardProps, CornerSize as CardSize, CardHue }

src/components/Checklist.tsx

@@ -76,7 +76,9 @@ const Checklist = styled(ChecklistUnstyled)(({ theme }) => ({
 type ChecklistProps = ComponentPropsWithRef<'div'> & {
   label: string
   stateProps: ChecklistStateProps
-  footerChildren: ReactElement<ChecklistFooterProps> | ReactElement<ChecklistFooterProps>[]
+  footerChildren:
+    | ReactElement<ChecklistFooterProps>
+    | ReactElement<ChecklistFooterProps>[]
   completeChildren: ReactElement
   children: ReactElement<ChecklistItemProps>[]
 }
@@ -85,9 +87,9 @@ type ChecklistStateProps = {
   onSelectionChange?: Dispatch<number>
   onFocusChange?: Dispatch<number>
   onOpenChange?: Dispatch<boolean>
-  selectedKey?: number,
-  focusedKey?: number,
-  completedKey?: number,
+  selectedKey?: number
+  focusedKey?: number
+  completedKey?: number
   isOpen?: boolean
   isDismissed?: boolean
 }
@@ -101,7 +103,14 @@ function ChecklistUnstyled({
   ...props
 }: ChecklistProps): JSX.Element {
   const {
-    isOpen = true, isDismissed, selectedKey, focusedKey, completedKey, onSelectionChange, onFocusChange, onOpenChange,
+    isOpen = true,
+    isDismissed,
+    selectedKey,
+    focusedKey,
+    completedKey,
+    onSelectionChange,
+    onFocusChange,
+    onOpenChange,
   } = stateProps
   const [finished, setFinished] = useState(false)
 
@@ -110,7 +119,8 @@ function ChecklistUnstyled({
   const finishedContainerRef = useRef<HTMLDivElement>(null)
 
   const [itemContainerHeight, setItemContainerHeight] = useState<number>(-1)
-  const [finishedContainerHeight, setFinishedContainerHeight] = useState<number>(-1)
+  const [finishedContainerHeight, setFinishedContainerHeight]
+    = useState<number>(-1)
 
   const onSelectionChangeWrapper = useCallback((idx: number) => (idx < children.length && idx > -1 ? onSelectionChange(idx) : undefined),
     [children, onSelectionChange])
@@ -127,9 +137,18 @@ function ChecklistUnstyled({
       completed={completedKey >= index}
       onSelectionChange={onSelectionChangeWrapper}
       onFocusChange={onFocusChangeWrapper}
-    >{child}
+    >
+      {child}
     </ChecklistItemInner>
-  )), [children, selectedKey, focusedKey, completedKey, onSelectionChangeWrapper, onFocusChangeWrapper])
+  )),
+  [
+    children,
+    selectedKey,
+    focusedKey,
+    completedKey,
+    onSelectionChangeWrapper,
+    onFocusChangeWrapper,
+  ])
 
   useEffect(() => {
     setFinished(completedKey === children.length - 1)
@@ -142,12 +161,21 @@ function ChecklistUnstyled({
   })
 
   useEffect(() => {
-    const maxItemContainerHeight = Math.max(itemContainerHeight, itemsContainerRef.current.getBoundingClientRect().height)
-    const maxFinishedContainerHeight = Math.max(finishedContainerHeight, finishedContainerRef.current.getBoundingClientRect().height)
+    const maxItemContainerHeight = Math.max(itemContainerHeight,
+      itemsContainerRef.current.getBoundingClientRect().height)
+    const maxFinishedContainerHeight = Math.max(finishedContainerHeight,
+      finishedContainerRef.current.getBoundingClientRect().height)
 
     setItemContainerHeight(maxItemContainerHeight)
     setFinishedContainerHeight(maxFinishedContainerHeight)
-  }, [itemsContainerRef, finishedContainerRef, setItemContainerHeight, setFinishedContainerHeight, itemContainerHeight, finishedContainerHeight])
+  }, [
+    itemsContainerRef,
+    finishedContainerRef,
+    setItemContainerHeight,
+    setFinishedContainerHeight,
+    itemContainerHeight,
+    finishedContainerHeight,
+  ])
 
   return (
     <AnimateHeight
@@ -164,25 +192,23 @@ function ChecklistUnstyled({
           onClick={() => onOpenChange(!isOpen)}
         >
           <div>{label}</div>
-          <DropdownArrowIcon
-            className={isOpen ? 'arrowUp' : 'arrowDown'}
-          />
+          <DropdownArrowIcon className={isOpen ? 'arrowUp' : 'arrowDown'} />
         </div>
         <AnimateHeight
           height={isFirstRender.current || isOpen ? 'auto' : 0}
           duration={heightAnimationDuration}
         >
-          <div
-            className="content"
-          >
-            {checklistItemInnerWrapper}
-          </div>
+          <div className="content">{checklistItemInnerWrapper}</div>
           <ChecklistFooter>{footerChildren}</ChecklistFooter>
         </AnimateHeight>
       </div>
       <div
         className={finished ? 'finishContainer grow' : 'finishContainer shrink'}
-        style={isFirstRender.current || finished ? { maxHeight: finishedContainerHeight } : { maxHeight: 0, padding: 0 }}
+        style={
+          isFirstRender.current || finished
+            ? { maxHeight: finishedContainerHeight }
+            : { maxHeight: 0, padding: 0 }
+        }
         ref={finishedContainerRef}
       >
         {completeChildren}
@@ -191,4 +217,5 @@ function ChecklistUnstyled({
   )
 }
 
-export { Checklist, ChecklistStateProps, ChecklistProps }
+export type { ChecklistStateProps, ChecklistProps }
+export { Checklist }

src/components/ChecklistFooter.tsx

@@ -12,7 +12,8 @@ function ChecklistFooterUnstyled({
   children,
   ...props
 }: ChecklistFooterProps): JSX.Element {
-  return (<div {...props}>{children}</div>)
+  return <div {...props}>{children}</div>
 }
 
-export { ChecklistFooter, ChecklistFooterProps }
+export type { ChecklistFooterProps }
+export { ChecklistFooter }

src/components/ChecklistItem.tsx

@@ -23,7 +23,9 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)(({ theme, complete
     display: 'flex',
     gap: 12,
     alignItems: 'center',
-    color: selected ? theme.colors['action-link-active'] : theme.colors['action-link-inactive'],
+    color: selected
+      ? theme.colors['action-link-active']
+      : theme.colors['action-link-inactive'],
     cursor: 'pointer',
 
     ':hover': {
@@ -152,12 +154,7 @@ function ChecklistItem({
   children,
   ...props
 }: ChecklistItemProps): JSX.Element {
-  return (
-    <div
-      {...props}
-    >{children}
-    </div>
-  )
+  return <div {...props}>{children}</div>
 }
 
 enum KeyboardKey {
@@ -251,4 +248,5 @@ function ChecklistItemInnerUnstyled({
   )
 }
 
-export { ChecklistItem, ChecklistItemInner, ChecklistItemProps }
+export type { ChecklistItemProps }
+export { ChecklistItem, ChecklistItemInner }

src/components/Code.tsx

@@ -483,4 +483,4 @@ const Code = styled(forwardRef(CodeRef))(_ => ({
 Code.propTypes = propTypes
 
 export default Code
-export { CodeProps }
+export type { CodeProps }

src/components/ComboBox.tsx

@@ -257,9 +257,10 @@ function ComboBox({
   },
   [isOpen, onOpenChange])
 
-  const setIsOpen = useCallback((isOpen:boolean) => {
+  const setIsOpen = useCallback((isOpen: boolean) => {
     wrappedOnOpenChange(isOpen, 'manual')
-  }, [wrappedOnOpenChange])
+  },
+  [wrappedOnOpenChange])
 
   const wrappedOnSelectionChange: typeof onSelectionChange = useCallback((newKey, ...args) => {
     if (onSelectionChange) {
@@ -273,7 +274,7 @@ function ComboBox({
   [onSelectionChange, setIsOpen])
 
   const wrappedOnFocusChange: typeof onFocusChange = useCallback((isFocused, ...args) => {
-    // Enforce open on focus
+      // Enforce open on focus
     if (isFocused && !isOpen) {
       setIsOpen(true)
     }
@@ -391,4 +392,5 @@ function ComboBox({
   )
 }
 
-export { ComboBox, ComboBoxProps }
+export type { ComboBoxProps }
+export { ComboBox }

src/components/IconFrame.tsx

@@ -134,4 +134,4 @@ ref) => {
 })
 
 export default IconFrame
-export { IconFrameProps }
+export type { IconFrameProps }

src/components/ListBox.tsx

@@ -47,7 +47,7 @@ type ListBoxProps = Omit<
   footer?: ReactElement
 }
 
-const CARD_FILL_LEVEL:FillLevel = 2
+const CARD_FILL_LEVEL: FillLevel = 2
 
 const ListBoxCard = styled(Card).attrs(() => ({
   cornerSize: 'medium',
@@ -84,7 +84,7 @@ function useItemWrappedChildren(children: ReactElement | ReactElement[],
   return useMemo(() => {
     // Children.map() prefixes the key props in an undocumented and possibly
     // unstable way, so using Children.forEach() to maintain original key values
-    const wrapped: (JSX.Element)[] = []
+    const wrapped: JSX.Element[] = []
 
     if (header) {
       wrapped.push(<Item key={HEADER_KEY}>{header}</Item>)
@@ -245,10 +245,5 @@ function Option({ item, state }: any) {
   return cloneElement(item.rendered, mergedProps)
 }
 
-export {
-  ListBox,
-  ListBoxProps,
-  ListBoxUnmanaged,
-  ListBoxUnmanagedProps,
-  useItemWrappedChildren,
-}
+export type { ListBoxProps, ListBoxUnmanagedProps }
+export { ListBox, ListBoxUnmanaged, useItemWrappedChildren }

src/components/ListBoxItem.tsx

@@ -222,12 +222,14 @@ const ListBoxFooterPlus = forwardRef<HTMLDivElement, ListBoxFooterProps>(({ left
   </ListBoxFooterPlusInner>
 ))
 
+export type {
+  ListBoxItemBaseProps,
+  ListBoxFooterProps,
+  ListBoxFooterProps as ListBoxFooterPlusProps,
+}
 export {
   ListBoxItem,
-  ListBoxItemBaseProps,
   ChipList as ListBoxItemChipList,
   ListBoxFooter,
-  ListBoxFooterProps,
   ListBoxFooterPlus,
-  ListBoxFooterProps as ListBoxFooterPlusProps,
 }

src/components/PageCard.tsx

@@ -85,4 +85,4 @@ ref) => (
 ))
 
 export default PageCard
-export { PageCardProps }
+export type { PageCardProps }

src/components/PopoverListBox.tsx

@@ -86,4 +86,5 @@ function PopoverListBox({
   )
 }
 
-export { PopoverListBox, PopoverListBoxProps }
+export type { PopoverListBoxProps }
+export { PopoverListBox }

src/components/ReactAriaPopover.tsx

@@ -61,4 +61,5 @@ const PopoverStyled = styled.div<{ $isOpen: boolean }>(({ $isOpen: isOpen }) =>
   ...(!isOpen ? { pointerEvents: 'none' } : {}),
 }))
 
-export { Popover, PopoverProps }
+export type { PopoverProps }
+export { Popover }

src/components/Tab.tsx

@@ -9,9 +9,10 @@ import { useTheme } from 'styled-components'
 
 import { TabBaseProps } from './TabList'
 
-type TabProps = DivProps & TabBaseProps & {
-  startIcon?: ReactNode
-}
+type TabProps = DivProps &
+  TabBaseProps & {
+    startIcon?: ReactNode
+  }
 
 function TabRef({
   startIcon,
@@ -83,4 +84,4 @@ ref: Ref<any>) {
 const Tab = forwardRef(TabRef)
 
 export default Tab
-export { TabProps }
+export type { TabProps }

src/components/TabList.tsx

@@ -208,6 +208,5 @@ function TabRenderer({
   )
 }
 
-export {
-  TabList, TabListProps, TabListStateProps, TabBaseProps,
-}
+export type { TabListProps, TabListStateProps, TabBaseProps }
+export { TabList }

src/components/Tooltip.tsx

@@ -254,4 +254,4 @@ function Tooltip({
 }
 
 export default Tooltip
-export { TooltipProps }
+export type { TooltipProps }