chore(storybook): enable strict mode (#392)

.storybook/main.js

@@ -1,18 +1,17 @@
 require('dotenv').config();
 
 module.exports = {
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-storysource',
-    'storybook-addon-performance/register',
-  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-storysource'],
   check: true,
   checkOptions: {
     tsconfig: '../stories/tsconfig.json',
   },
   core: {
     disableTelemetry: true,
   },
+  reactOptions: {
+    strictMode: true,
+  },
   stories: [
     '../stories/**/*.stories.mdx',
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',

.storybook/preview.tsx

@@ -1,25 +1,20 @@
 import '@atlaskit/css-reset';
 
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
-import { withPerformance } from 'storybook-addon-performance';
 import { resetData } from '../stories/src/data';
 import GlobalStyles from './custom-decorators/global-styles';
 import welcomeMessage from './welcome-message';
 
 welcomeMessage();
 
-export const decorators = [
-  (Story: React.ElementType, { id }: { id: string }) => {
+export const decorators: DecoratorFn[] = [
+  (story, { id }: { id: string }) => {
     resetData(id);
 
-    return <Story key={id} />;
+    return story({ key: id });
   },
-  (Story: React.ElementType): React.ReactElement => (
-    <GlobalStyles>
-      <Story />
-    </GlobalStyles>
-  ),
-  withPerformance,
+  (story) => <GlobalStyles>{story()}</GlobalStyles>,
 ];
 
 export const parameters = {

package.json

@@ -188,7 +188,6 @@
     "rollup-plugin-size-snapshot": "0.12.0",
     "rollup-plugin-terser": "7.0.2",
     "seedrandom": "3.0.5",
-    "storybook-addon-performance": "0.16.1",
     "styled-components": "5.3.5",
     "stylelint": "14.6.1",
     "stylelint-config-prettier": "9.0.3",