@loadsmart/loadsmart-ui 6.0.10 → 6.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.0.10",
+	"version": "6.0.12",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [
@@ -15,11 +15,11 @@
 		"lint": "eslint --ext .js,.ts,.tsx src/",
 		"test": "TZ=UTC jest --clearMocks",
 		"test-watch": "yarn test --watch",
-		"storybook": "start-storybook -p 6006 --no-dll",
+		"storybook": "storybook dev -p 6006",
 		"build": "rollup -c --environment BUILD:prod",
 		"watch-tailwind": "postcss ./tailwind.css -o ./.storybook/globals.css --watch",
-		"build-storybook": "rm -rf docs && build-storybook -o ./docs --no-dll",
-		"deploy-storybook": "yarn build-storybook && storybook-to-ghpages --existing-output-dir=docs",
+		"storybook:build": "rm -rf docs && storybook build -o ./docs",
+		"storybook:deploy": "yarn storybook:build && storybook-to-ghpages --existing-output-dir=docs",
 		"release": "semantic-release",
 		"prepare": "husky install"
 	},
@@ -51,21 +51,15 @@
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^13.0.0",
 		"@semantic-release/git": "^9.0.0",
-		"@storybook/addon-a11y": "^6.5.15",
-		"@storybook/addon-actions": "^6.5.15",
-		"@storybook/addon-essentials": "^6.5.15",
-		"@storybook/addon-links": "^6.5.15",
-		"@storybook/addon-postcss": "^2.0.0",
-		"@storybook/addons": "^6.5.15",
-		"@storybook/builder-webpack5": "^6.5.15",
-		"@storybook/cli": "^6.5.15",
-		"@storybook/client-api": "^6.5.15",
-		"@storybook/manager-webpack5": "^6.5.15",
-		"@storybook/preview-web": "^6.5.15",
-		"@storybook/react": "^6.5.15",
+		"@storybook/addon-a11y": "^7.0.4",
+		"@storybook/addon-essentials": "^7.0.4",
+		"@storybook/addon-links": "^7.0.4",
+		"@storybook/addons": "^7.0.4",
+		"@storybook/react": "^7.0.4",
+		"@storybook/react-webpack5": "^7.0.4",
 		"@storybook/storybook-deployer": "^2.8.16",
-		"@storybook/testing-react": "^1.3.0",
-		"@storybook/theming": "^6.5.15",
+		"@storybook/testing-react": "^2.0.0",
+		"@storybook/theming": "^7.0.4",
 		"@svgr/rollup": "^6.5.1",
 		"@svgr/webpack": "^6.5.1",
 		"@tailwindcss/postcss7-compat": "^2.1.2",
@@ -109,7 +103,7 @@
 		"eslint-plugin-prettier": "^3.4.0",
 		"eslint-plugin-react": "^7.23.2",
 		"eslint-plugin-react-hooks": "^4.2.0",
-		"eslint-plugin-storybook": "^0.6.10",
+		"eslint-plugin-storybook": "^0.6.11",
 		"eslint-plugin-testing-library": "^5.9.1",
 		"husky": "7.0.4",
 		"identity-obj-proxy": "^3.0.0",
@@ -124,7 +118,6 @@
 		"react-dom": "^17.0.2",
 		"react-is": "^17.0.2",
 		"react-syntax-highlighter": "^15.5.0",
-		"require-from-string": "^2.0.2",
 		"rollup": "^2.79.1",
 		"rollup-plugin-delete": "^2.0.0",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
@@ -132,6 +125,7 @@
 		"rollup-plugin-typescript2": "^0.34.1",
 		"rollup-plugin-visualizer": "^5.5.2",
 		"semantic-release": "^17.4.2",
+		"storybook": "^7.0.4",
 		"styled-components": "^5.3.0",
 		"stylelint": "^13.13.1",
 		"stylelint-config-prettier": "^8.0.2",
@@ -145,8 +139,7 @@
 		"ts-toolbelt": "^9.6.0",
 		"ttypescript": "^1.5.13",
 		"typescript": "4.4.4",
-		"typescript-plugin-styled-components": "^1.5.0",
-		"webpack": "^5.75.0"
+		"typescript-plugin-styled-components": "^1.5.0"
 	},
 	"peerDependencies": {
 		"@loadsmart/miranda-tokens": ">=1.3.0",

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
 import Accordion from './Accordion'
 import type { AccordionProps } from './Accordion'
 
 import { Icon } from 'components/Icon'
 
 import generator from '../../tests/generator'
+import type { Meta } from '@storybook/react'
 
 export default {
   title: 'Components/Accordion',

package/src/components/Banner/Banner.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 import Banner, { BannerLarge, BannerAction, BannerActionLarge } from './Banner'
 import type { BannerProps, BannerActionProps } from './Banner'
 import { Icon } from 'components/Icon'

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Breadcrumbs, { BreadcrumbsProps } from './Breadcrumbs'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Components/Breadcrumbs',

package/src/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 import BackButton from '../../common/BackButton'
 import Button, { SelectorButton, IconButton, Caret, BaseButton } from './Button'
 import CloseButton from '../../common/CloseButton'

package/src/components/Calendar/Calendar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import { TODAY } from './Date.helper'
 import Calendar from './Calendar'

package/src/components/Card/Card.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import Card from './Card'
 import generator from '../../tests/generator'

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Checkbox, { CheckboxProps } from './Checkbox'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import Status from 'utils/types/Status'
 

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -4,7 +4,7 @@ import { Label } from 'components/Label'
 import DateHelper, { TODAY } from '../Calendar/Date.helper'
 import DatePicker from './DatePicker'
 
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 import type { DatePickerProps } from './DatePicker.types'
 
 export default {

package/src/components/DatePicker/DateRangePicker.stories.tsx

@@ -4,7 +4,7 @@ import { Label } from 'components/Label'
 import DateHelper, { TODAY } from '../Calendar/Date.helper'
 import DateRangePicker from './DateRangePicker'
 
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 import type { DateRangePickerProps } from './DatePicker.types'
 import type { useCalendarProps } from 'components/Calendar'
 

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 import Dialog from './Dialog'
 import useDialog from './useDialog'
 import type { DialogProps } from './Dialog'

package/src/components/DragDropFile/DragDropFile.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import { ErrorMessage } from 'components/ErrorMessage'
 

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, Story } from '@storybook/react/types-6-0'
+import type { Meta, Story } from '@storybook/react'
 
 import { Drawer, useDrawer } from '.'
 import type { DrawerProps } from './Drawer'

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import { ACTIONS, PROFILE_ACTIONS, SUBSCRIPTION_ACTIONS } from './Dropdown.fixtures'
 import { Icon } from 'components/Icon'

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import { Icon } from 'components/Icon'
 import { Stack } from 'components/Layout'

package/src/components/ErrorMessage/ErrorMessage.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import ErrorMessage, { ErrorMessageProps } from './ErrorMessage'
 

package/src/components/HighlightMatch/HighlightMatch.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import HighlightMatch, { HighlightMatchProps } from './HighlightMatch'
 

package/src/components/IconFactory/IconFactory.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 import {
   Title,
   Subtitle,

package/src/components/Label/Label.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Label, { LabelProps } from './Label'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 export default {
   title: 'Components/Label',

package/src/components/Layout/Layout.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import { Layout } from '.'
 

package/src/components/Link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Link, { LinkProps } from './Link'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 export default {
   title: 'Components/Link',

package/src/components/Loaders/LoadingBar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 import { Text } from 'components/Text'
 
 import type { LoadingBarProps } from './LoadingBar'

package/src/components/Loaders/LoadingDots.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 import { Button } from 'components/Button'
 
 import LoadingDots, { LoadingDotsProps } from './LoadingDots'

package/src/components/Loaders/Spinner.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import Spinner, { SpinnerProps } from './Spinner'
 

package/src/components/Modal/Modal.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 import { useArgs } from '@storybook/client-api'
 import Modal from './Modal'
 import type { ModalProps } from './Modal'

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Pagination from './Pagination'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import type { PaginationProps } from './Pagination.types'
 

package/src/components/Popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import Popover from './Popover'
 

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ProgressBar, { ProgressBarProps } from './ProgressBar'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 import Status from 'utils/types/Status'
 
 export default {

package/src/components/Radio/Radio.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Radio, { RadioProps } from './Radio'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import Status from 'utils/types/Status'
 

package/src/components/Section/Sections.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 import Section from './Section'
 import type { SectionProps } from './Section'
 

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 import omit from 'lodash.omit'
 
 import { Label } from 'components/Label'

package/src/components/SideNavigation/SideNavigation.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import { Tag } from 'components/Tag'
 import { Icon } from 'components/Icon'

package/src/components/Steps/Steps.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import { Button } from '../Button'
 import { STEPS, CONTENTS } from './Steps.fixtures'

package/src/components/Switch/Switch.stories.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import Switch, { SwitchProps } from './Switch'
 

package/src/components/Table/Table.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import Table, { useSelection } from './Table'
 import type { TableColumns, TableProps } from './Table.types'

package/src/components/TablePagination/TablePagination.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import TablePagination from './TablePagination'
-import type { Meta, Story } from '@storybook/react/types-6-0'
+import type { Meta, Story } from '@storybook/react'
 
 import type { TablePaginationProps } from './TablePagination.types'
 import { Layout } from 'components/Layout'

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import Tab, { TabsProps } from './Tabs'
 import { Button } from '../Button'

package/src/components/Tag/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Tag, { TagProps } from './Tag'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import { Icon as MirandaIcon } from '../Icon'
 import generator from '../../tests/generator'

package/src/components/Tag/Tag.tsx

@@ -355,7 +355,12 @@ function Tag(props: TagProps): JSX.Element {
         {removable && !disabled && (
           <>
             <StyledSpacer aria-hidden="true" size={size} />
-            <StyledCloseButton {...getRemoveButtonProps?.()} size={size} onClick={onRemove}>
+            <StyledCloseButton
+              type="button"
+              {...getRemoveButtonProps?.()}
+              size={size}
+              onClick={onRemove}
+            >
               <CloseIcon name="close" variant={variant} size={size} />
             </StyledCloseButton>
           </>

package/src/components/Text/Text.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import { Text } from '.'
 import type { TextProps } from './Text'

package/src/components/TextField/TextField.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import TextField, { TextFieldProps } from './TextField'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import { Icon } from 'components/Icon'
 import Status from 'utils/types/Status'

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState, ChangeEvent } from 'react'
 import Textarea, { TextareaProps } from './Textarea'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 import { Icon } from 'components/Icon'
 import Status from 'utils/types/Status'

package/src/components/Toast/Toast.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Toast, { ToastProps } from './Toast'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 import Status from 'utils/types/Status'
 
 export default {

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import { Icon } from '../Icon'
 import { Label } from '../Label'

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Tooltip, { TooltipAlign, TooltipPosition, TooltipProps } from './Tooltip'
-import type { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react'
 
 export default {
   title: 'Components/Tooltip',

package/src/docs/tools/DatePickerEvent.stories.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
 <Meta title="Tools/Tests/Date Picker Event" />
 
 # Date Picker Event

package/src/docs/tools/DragDropFileEvent.stories.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
 <Meta title="Tools/Tests/DragDropFile Event" />
 
 # DragDropFile Event

package/src/docs/tools/conditional.stories.mdx

@@ -244,7 +244,7 @@ const Button = styled.button<ButtonProps>`
 
 In the example above, we'll have `width: 36px;` as a result only if the button's `variant` prop is `'primary'`.
 
-<!-- The usage of this "Component" is intentional to enable react-syntax-highlighter's own highlighter -->
+{/* The usage of this "Component" is intentional to enable react-syntax-highlighter's own highlighter */}
 
 export const Component = () => {
   return <SyntaxHighlighter />

package/src/docs/tools/selectEvent.stories.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
 <Meta title="Tools/Tests/Select Event" />
 
 # Select Event

package/src/hooks/useFocusTrap/useFocusTrap.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import clsx from 'clsx'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react'
 
 import range from 'utils/toolset/range'
 import useFocusTrap from './useFocusTrap'