build: add storybook@7

packages/react/.storybook/main.js

@@ -1,4 +1,21 @@
-module.exports = {
-  stories: ['../stories/index.js'],
-  core: { builder: 'webpack5' }
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true
+      }
+    }
+  }
 }
+export default config

packages/react/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview

packages/react/package.json

@@ -43,29 +43,26 @@
     "@rollup/plugin-node-resolve": "latest",
     "@rollup/plugin-replace": "latest",
     "@rollup/plugin-terser": "latest",
-    "@storybook/addon-storyshots": "~6.5.16",
-    "@storybook/addons": "~6.5.16",
-    "@storybook/builder-webpack5": "~6.5.16",
-    "@storybook/manager-webpack5": "~6.5.16",
-    "@storybook/react": "~6.5.16",
-    "@storybook/theming": "~6.5.16",
+    "@storybook/addon-a11y": "7",
+    "@storybook/addon-essentials": "7",
+    "@storybook/addon-interactions": "7",
+    "@storybook/blocks": "7",
+    "@storybook/react": "7",
+    "@storybook/react-webpack5": "7",
+    "@storybook/test": "7",
+    "ava": "latest",
     "babel-plugin-transform-react-pure-class-to-function": "latest",
     "babel-plugin-transform-react-remove-prop-types": "latest",
-    "enzyme": "latest",
-    "enzyme-adapter-react-16": "latest",
-    "jest": "26",
-    "jest-environment-enzyme": "latest",
-    "jest-enzyme": "latest",
-    "jest-styled-components": "latest",
+    "execa": "latest",
     "lodash": "latest",
     "prop-types": "latest",
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "18",
+    "react-dom": "18",
     "rollup": "latest",
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
-    "styled-components": "latest",
-    "unfetch": "latest"
+    "storybook": "7",
+    "styled-components": "latest"
   },
   "engines": {
     "node": ">= 10"
@@ -75,25 +72,16 @@
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c rollup.config.js --bundleConfigAsCjs",
-    "build-storybook": "NODE_ENV=production build-storybook --quiet",
-    "dev": "start-storybook -p 6006",
-    "start": "node scripts/start.js",
+    "build-storybook": "storybook build",
     "pretest": "npm run build",
-    "test": "NODE_ENV=test jest --detectOpenHandles"
+    "storybook": "storybook dev -p 6006",
+    "test": "ava"
   },
   "license": "MIT",
-  "jest": {
-    "setupFilesAfterEnv": [
-      "jest-enzyme"
-    ],
-    "testEnvironment": "enzyme",
-    "testURL": "http://localhost/",
-    "verbose": true
-  },
   "peerDependencies": {
     "react": ">= 17",
     "react-dom": ">= 17",
-    "styled-components": "^5"
+    "styled-components": " >= 5"
   },
   "publishConfig": {
     "access": "public"

packages/react/src/components/Card/CardContent.js

@@ -1,7 +1,7 @@
 /* global URL */
 
 import React, { useCallback, useMemo, useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import CardText from './CardText'
 
 import { transition } from '../../theme'
@@ -51,10 +51,10 @@ const Header = styled('header').attrs({ className: classNames.title })`
     font-size: ${!isSmall(cardSize) ? '16px' : '15px'};
 
     ${isSmall(cardSize) &&
-      css`
-        min-width: 0;
-        padding-right: 14px;
-      `}
+    css`
+      min-width: 0;
+      padding-right: 14px;
+    `}
   `}
 `
 

packages/react/src/components/Card/CardEmpty.js

@@ -1,7 +1,7 @@
 /* eslint-disable multiline-ternary */
 
 import React, { useContext } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { emptyStateAnimation, emptyStateImageAnimation } from './CardAnimation'
 import CardImage from './CardMedia/Image'

packages/react/src/components/Card/CardMedia/Controls/FooterControls.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import MediaButton from './MediaButton'
 import { classNames, media, isLarge } from '../../../../utils'
@@ -56,7 +56,7 @@ const VolumeButton = styled(MediaButton).attrs({
     height: ${({ cardSize }) => (isLarge(cardSize) ? 16 : 14)}px;
 
     ${({ cardSize }) =>
-    !isLarge(cardSize) &&
+      !isLarge(cardSize) &&
       media.mobile`
       width: 12px;
       height: 12px;
@@ -105,9 +105,10 @@ const FooterControls = ({
   onPlaybackRateClick,
   playbackRate
 }) => {
-  const VolumeComponent = useMemo(() => (isMuted ? VolumeMute : VolumeUp), [
-    isMuted
-  ])
+  const VolumeComponent = useMemo(
+    () => (isMuted ? VolumeMute : VolumeUp),
+    [isMuted]
+  )
   const isLargeCard = useMemo(() => isLarge(cardSize), [cardSize])
 
   return (

packages/react/src/components/Card/CardMedia/Controls/MediaButton.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { transition } from '../../../../theme'
 
 const MediaButton = styled('div')`

packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import MediaButton from './MediaButton'
 import { classNames, isSmall, isLarge, media } from '../../../../utils'
@@ -50,8 +50,8 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({
       padding: ${isLarge(cardSize) ? 0 : '8px'};
 
       ${!isLarge(cardSize) &&
-        !isSmall(cardSize) &&
-        media.mobile`
+      !isSmall(cardSize) &&
+      media.mobile`
         width: calc(${iconSizes.small} * 1.2);
         height: calc(${iconSizes.small} * 1.2);
       `}
@@ -60,9 +60,10 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({
 `
 
 const PlaybackButton = ({ isPlaying, ...props }) => {
-  const PlaybackComponent = useMemo(() => (isPlaying ? Pause : Play), [
-    isPlaying
-  ])
+  const PlaybackComponent = useMemo(
+    () => (isPlaying ? Pause : Play),
+    [isPlaying]
+  )
 
   return (
     <PlaybackButtonWrap title={isPlaying ? 'Pause' : 'Play'} {...props}>

packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { transition } from '../../../../../theme'
 

packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { font, transition } from '../../../../../theme'
 

packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { transition } from '../../../../../theme'
 import {
@@ -153,10 +153,10 @@ const ProgressBar = ({
     return 0
   }, [])
 
-  const progressRatio = useMemo(() => clampNumber(progress / duration, 0, 1), [
-    duration,
-    progress
-  ])
+  const progressRatio = useMemo(
+    () => clampNumber(progress / duration, 0, 1),
+    [duration, progress]
+  )
 
   const progressPercent = useMemo(
     () => `${clampNumber(progressRatio * 100, 1, 99)}%`,
@@ -212,10 +212,10 @@ const ProgressBar = ({
     [onClick, onMouseDown, onMouseOver]
   )
 
-  const showAccessories = useMemo(() => isDragging || isHovering, [
-    isDragging,
-    isHovering
-  ])
+  const showAccessories = useMemo(
+    () => isDragging || isHovering,
+    [isDragging, isHovering]
+  )
 
   return (
     <OuterWrap cardSize={size} ref={wrapRef} {...mouseEvents}>

packages/react/src/components/Card/CardMedia/Controls/SeekButton.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import MediaButton from './MediaButton'
 import { media, isLarge } from '../../../../utils'

packages/react/src/components/Card/CardMedia/Controls/Spinner.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled, { css, keyframes } from 'styled-components'
+import { styled, css, keyframes } from 'styled-components'
 
 import { transition } from '../../../../theme'
 import { classNames } from '../../../../utils'

packages/react/src/components/Card/CardMedia/Controls/index.js

@@ -9,7 +9,7 @@ import React, {
   useState
 } from 'react'
 
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import FooterControls from './FooterControls'
 import PlaybackButton from './PlaybackButton'
@@ -81,12 +81,12 @@ const ControlsTop = styled('div')`
   ${({ isVisible }) =>
     !isVisible &&
     css`
-    *[class*="${classNames.mediaControls}"]:not(.${classNames.progressTime}) {
-      transition: ${transition.medium('opacity', 'visibility')};
-      opacity: 0;
-      visibility: hidden;
-    }
-  `}
+      *[class*='${classNames.mediaControls}']:not(.${classNames.progressTime}) {
+        transition: ${transition.medium('opacity', 'visibility')};
+        opacity: 0;
+        visibility: hidden;
+      }
+    `}
 `
 
 const getNextPlaybackRate = rate => {
@@ -336,9 +336,10 @@ const Controls = ({ MediaComponent, mediaProps }) => {
     [onWrapClick, onWrapKeyDown, onWrapMouseMove, onWrapMouseOver]
   )
 
-  const outerWrapTitle = useMemo(() => (hasInteracted ? { title: '' } : {}), [
-    hasInteracted
-  ])
+  const outerWrapTitle = useMemo(
+    () => (hasInteracted ? { title: '' } : {}),
+    [hasInteracted]
+  )
 
   const bufferedMedia = useMemo(() => {
     if (buffered && buffered.length && mediaRef.current) {

packages/react/src/components/Card/CardMedia/Image.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Wrap from './Wrap'
 import { GlobalContext } from '../../../context/GlobalState'

packages/react/src/components/Card/CardMedia/Video.js

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Wrap from './Wrap'
 import Controls from './Controls'

packages/react/src/components/Card/CardMedia/Wrap.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { GlobalContext } from '../../../context/GlobalState'
 import { media } from '../../../utils'

packages/react/src/components/Card/CardMedia/loader.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import { transition } from '../../../theme'
 
 export const ImageLoadCatcher = styled('img')`
@@ -22,8 +22,8 @@ export const loadingOverlay = css`
     will-change: opacity;
 
     ${({ isLoading }) => css`
-      opacity: ${(isLoading ? 1 : 0)};
-      visibility: ${(isLoading ? 'visible' : 'hidden')};
+      opacity: ${isLoading ? 1 : 0};
+      visibility: ${isLoading ? 'visible' : 'hidden'};
     `};
   }
 `

packages/react/src/components/Card/CardText.js

@@ -1,7 +1,7 @@
 /* eslint-disable multiline-ternary */
 
 import React from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import NanoClamp from 'nanoclamp'
 
 import { isNil } from '../../utils'

packages/react/src/components/Card/CardWrap.js

@@ -1,5 +1,5 @@
 import { createElement, forwardRef, useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { GlobalContext } from '../../context/GlobalState'
 import { font, animation, speed } from '../../theme'
@@ -35,7 +35,7 @@ const hoverStyle = css`
   will-change: background, border-color;
   &:hover {
     background-color: var(--microlink-hover-background-color, #f5f8fa);
-    border-color: var(--microlink-hover-border-color, #8899A680);
+    border-color: var(--microlink-hover-border-color, #8899a680);
   }
 `