storybook 7

Author: lhz516

.storybook/main.js

@@ -1,61 +1,37 @@
-const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
-const path = require('path')
+import path from 'path';
 
-module.exports = {
-  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.js'],
+export default {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(ts|tsx)',
+  ],
 
-  addons: ['@storybook/addon-docs/register', '@storybook/addon-actions/register'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-actions',
+    '@storybook/addon-mdx-gfm'
+  ],
 
-  webpackFinal: async config => {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  },
+
+  webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../src'),
-    })
-  
-    config.module.rules.push({
-      test: /\.tsx?$/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            '@babel/preset-env',
-            '@babel/preset-react',
-            ['@babel/preset-typescript', {
-              isTSX: true,
-              allExtensions: true
-            }]
-          ],
-          plugins: ['@babel/plugin-proposal-class-properties']
-        } 
-      }
-    })
-  
-    config.module.rules.push({
-      test: /\.mdx$/,
       use: [
-        {
-          loader: 'babel-loader',
-        },
-        {
-          loader: '@mdx-js/loader',
-          options: {
-            compilers: [createCompiler({})],
-          },
-        },
+        'style-loader',
+        'css-loader',
+        'sass-loader'
       ],
+      include: path.resolve(__dirname, '../'),
     });
-  
-    config.module.rules.push({
-        test: /\.[tj]sx$/,
-        loader: require.resolve('@storybook/source-loader'),
-        exclude: [/node_modules/],
-        enforce: 'pre',
-    })
 
-    config.resolve.extensions.push('.tsx')
-    config.resolve.extensions.push('.ts')
-  
-    return config
+    return config;
   },
 };

.storybook/preview.js

@@ -1,9 +1,9 @@
-import { addParameters } from '@storybook/react'
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'
+import { DocsPage, DocsContainer } from '@storybook/blocks'
+import '../src/styles.scss'
 
-addParameters({
+export const parameters = {
   docs: {
     container: DocsContainer,
     page: DocsPage,
   },
-})
+}

package.json

@@ -16,8 +16,8 @@
     "lint": "eslint src --fix --ext .ts,.tsx",
     "test": "jest --env=jsdom",
     "cov": "jest --env=jsdom --coverage",
-    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9000",
-    "build:storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o docs",
+    "storybook": "sb dev -p 9000",
+    "build:storybook": "sb build -c .storybook -o docs",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.2",
-    "@iconify/react": "^4.1.1"
+    "@iconify/react": "^5"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",
@@ -72,9 +72,13 @@
     "@babel/preset-react": "^7.10.1",
     "@babel/preset-typescript": "^7.10.1",
     "@cfaester/enzyme-adapter-react-18": "^0.8.0",
-    "@storybook/addon-actions": "^6.1.14",
-    "@storybook/addon-docs": "^6.1.14",
-    "@storybook/react": "^6.1.14",
+    "@storybook/addon-actions": "7.6.20",
+    "@storybook/addon-docs": "7.6.20",
+    "@storybook/addon-mdx-gfm": "7.6.20",
+    "@storybook/blocks": "^7",
+    "@storybook/cli": "^7",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
     "@types/events": "^3.0.0",
     "@types/react": "^19",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
@@ -93,14 +97,14 @@
     "jest-environment-jsdom": "^29.7.0",
     "less-plugin-sass2less": "^1.2.0",
     "lint-staged": "^10.2.10",
-    "node-sass": "^7.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
     "react": "^18",
     "react-dom": "^18",
     "sass": "^1.26.8",
     "sass-loader": "^10.2.0",
     "static-server": "^2.2.1",
+    "style-loader": "^4.0.0",
     "typescript": "^4.2.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"

src/index.tsx

@@ -142,49 +142,20 @@ interface I18nAriaLabels {
 }
 
 class H5AudioPlayer extends Component<PlayerProps> {
-  static defaultProps: PlayerProps = {
-    autoPlay: false,
-    autoPlayAfterSrcChange: true,
-    listenInterval: 1000,
-    progressJumpStep: 5000,
-    progressJumpSteps: {}, // define when removing progressJumpStep
-    volumeJumpStep: 0.1,
-    loop: false,
-    muted: false,
-    preload: 'auto',
-    progressUpdateInterval: 20,
-    defaultCurrentTime: '--:--',
-    defaultDuration: '--:--',
-    timeFormat: 'auto',
-    volume: 1,
-    className: '',
-    showJumpControls: true,
-    showSkipControls: false,
-    showDownloadProgress: true,
-    showFilledProgress: true,
-    showFilledVolume: false,
-    customIcons: {},
-    customProgressBarSection: [RHAP_UI.CURRENT_TIME, RHAP_UI.PROGRESS_BAR, RHAP_UI.DURATION],
-    customControlsSection: [RHAP_UI.ADDITIONAL_CONTROLS, RHAP_UI.MAIN_CONTROLS, RHAP_UI.VOLUME_CONTROLS],
-    customAdditionalControls: [RHAP_UI.LOOP],
-    customVolumeControls: [RHAP_UI.VOLUME],
-    layout: 'stacked',
-    hasDefaultKeyBindings: true,
-    i18nAriaLabels: {
-      player: 'Audio player',
-      progressControl: 'Audio progress control',
-      volumeControl: 'Volume control',
-      play: 'Play',
-      pause: 'Pause',
-      rewind: 'Rewind',
-      forward: 'Forward',
-      previous: 'Previous',
-      next: 'Skip',
-      loop: 'Disable loop',
-      loopOff: 'Enable loop',
-      volume: 'Mute',
-      volumeMute: 'Unmute',
-    },
+  static defaultI18nAriaLabels: I18nAriaLabels = {
+    player: 'Audio player',
+    progressControl: 'Audio progress control',
+    volumeControl: 'Volume control',
+    play: 'Play',
+    pause: 'Pause',
+    rewind: 'Rewind',
+    forward: 'Forward',
+    previous: 'Previous',
+    next: 'Skip',
+    loop: 'Disable loop',
+    loopOff: 'Enable loop',
+    volume: 'Mute',
+    volumeMute: 'Unmute',
   }
 
   audio = createRef<HTMLAudioElement>()
@@ -193,7 +164,7 @@ class H5AudioPlayer extends Component<PlayerProps> {
 
   container = createRef<HTMLDivElement>()
 
-  lastVolume: number = this.props.volume // To store the volume before clicking mute button
+  lastVolume: number = this.props.volume ?? 1 // To store the volume before clicking mute button
 
   listenTracker?: number // Determine whether onListen event should be called continuously
 
@@ -328,7 +299,7 @@ class H5AudioPlayer extends Component<PlayerProps> {
   }
 
   handleKeyDown = (e: React.KeyboardEvent): void => {
-    if (this.props.hasDefaultKeyBindings) {
+    if (this.props.hasDefaultKeyBindings ?? true) {
       switch (e.key) {
         case ' ':
           if (e.target === this.container.current || e.target === this.progressBar.current) {
@@ -366,26 +337,26 @@ class H5AudioPlayer extends Component<PlayerProps> {
 
   renderUIModule = (comp: CustomUIModule, key: Key): ReactElement => {
     const {
-      defaultCurrentTime,
-      progressUpdateInterval,
-      showDownloadProgress,
-      showFilledProgress,
-      showFilledVolume,
-      defaultDuration,
-      customIcons,
-      showSkipControls,
+      defaultCurrentTime = '--:--',
+      progressUpdateInterval = 20,
+      showDownloadProgress = true,
+      showFilledProgress = true,
+      showFilledVolume = false,
+      defaultDuration = '--:--',
+      customIcons = {},
+      showSkipControls = false,
       onClickPrevious,
       onClickNext,
       onChangeCurrentTimeError,
-      showJumpControls,
-      customAdditionalControls,
-      customVolumeControls,
-      muted,
-      timeFormat,
-      volume: volumeProp,
-      loop: loopProp,
+      showJumpControls = true,
+      customAdditionalControls = [RHAP_UI.LOOP],
+      customVolumeControls = [RHAP_UI.VOLUME],
+      muted = false,
+      timeFormat = 'auto',
+      volume: volumeProp = 1,
+      loop: loopProp = false,
       mse,
-      i18nAriaLabels,
+      i18nAriaLabels = H5AudioPlayer.defaultI18nAriaLabels,
     } = this.props
 
     switch (comp) {
@@ -563,7 +534,7 @@ class H5AudioPlayer extends Component<PlayerProps> {
         if (!isValidElement(comp)) {
           return null
         }
-        return comp.key ? comp : cloneElement(comp as ReactElement, { key })
+        return comp.key ? comp : cloneElement(comp, { key })
     }
   }
 
@@ -696,21 +667,21 @@ class H5AudioPlayer extends Component<PlayerProps> {
 
   render(): ReactNode {
     const {
-      className,
+      className = '',
       src,
-      loop: loopProp,
-      preload,
-      autoPlay,
+      loop: loopProp = false,
+      preload = 'auto',
+      autoPlay = false,
       crossOrigin,
       mediaGroup,
       header,
       footer,
-      layout,
-      customProgressBarSection,
-      customControlsSection,
+      layout = 'stacked',
+      customProgressBarSection = [RHAP_UI.CURRENT_TIME, RHAP_UI.PROGRESS_BAR, RHAP_UI.DURATION],
+      customControlsSection = [RHAP_UI.ADDITIONAL_CONTROLS, RHAP_UI.MAIN_CONTROLS, RHAP_UI.VOLUME_CONTROLS],
       children,
       style,
-      i18nAriaLabels,
+      i18nAriaLabels = H5AudioPlayer.defaultI18nAriaLabels,
     } = this.props
     const loop = this.audio.current ? this.audio.current.loop : loopProp
     const loopClass = loop ? 'rhap_loop--on' : 'rhap_loop--off'

stories/actions.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
+import { Meta, Story, Canvas } from '@storybook/blocks'
 import { action } from '@storybook/addon-actions'
 import { SAMPLE_MP3_URL } from './utils'
 import AudioPlayer from '../src/index.tsx'
@@ -11,7 +11,7 @@ Different event listeners of the player
 
 Go to `Canvas` tab to see `Actions` logger
 
-<Preview>
+<Canvas>
   <Story name="Actions">
     <AudioPlayer
       onAbort={action('onAbort')}
@@ -38,4 +38,4 @@ Go to `Canvas` tab to see `Actions` logger
       src="https://assets.alllq.in/prod/AQ/content/audios/EnglishFluency/U1/A5/6-3-te.mp3"
     />
   </Story>
-</Preview>
+</Canvas>

stories/config.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/blocks';
 import { SAMPLE_MP3_URL } from './utils'
 import AudioPlayer from '../src/index.tsx'
 

stories/edge-cases.stories.mdx

@@ -1,12 +1,10 @@
-import { Meta, Story, Preview, Description } from '@storybook/addon-docs/blocks'
+import { Meta, Story, Canvas, Description } from '@storybook/blocks'
 import { action } from '@storybook/addon-actions'
 import { SAMPLE_MP3_URL } from './utils'
 import AudioPlayer from '../src/index.tsx'
 
 <Meta title="Edge Cases" component={AudioPlayer} />
 
-<Props of={AudioPlayer} />
-
 # Edge Cases
 
 Edge Cases of the player
@@ -15,28 +13,28 @@ Edge Cases of the player
 
 No error is fired, and no console error
 
-<Preview>
+<Canvas>
   <Story name="No src">
     <AudioPlayer onError={action('onError')} onPlayError={action('onPlayError')} />
   </Story>
-</Preview>
+</Canvas>
 
 #### Empty string src
 
 `onError` will be fired, no browser console error
 
-<Preview>
+<Canvas>
   <Story name="Empty string src">
     <AudioPlayer src='' onError={action('onError')} onPlayError={action('onPlayError')} />
   </Story>
-</Preview>
+</Canvas>
 
 #### Invalid url src
 
 `onError` will be fired with browser console error
 
-<Preview>
+<Canvas>
   <Story name="Invalid src">
     <AudioPlayer src="https://invalidsrc.com/nothing.mp3" onError={action('onError')} onPlayError={action('onPlayError')} />
   </Story>
-</Preview>
+</Canvas>

stories/index.stories.js

@@ -1 +1,3 @@
 import '../src/styles.scss'
+
+export default {}