chore(demo): add StrictMode decorator (#1312)

zendeskgarden · Apr 1, 2022 · 3577320 · 3577320
1 parent 7a3308e
commit 3577320
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -1,7 +1,7 @@
 {
   "*.{js,ts,tsx}": [
     "stylelint",
-    "eslint",
+    "eslint --max-warnings 0 --ignore-pattern !.storybook",
     "jest --config=utils/test/jest.config.js --bail --findRelatedTests",
     "prettier --write"
   ],

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
+import React, { StrictMode } from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { create } from '@storybook/theming/create';
 import { ThemeProvider, DEFAULT_THEME } from '../packages/theming/src';
@@ -67,7 +67,11 @@ const withThemeProvider = (Story, context) => {
   );
 };
 
-export const decorators = [withThemeProvider];
+const withStrictMode = (Story, context) =>
+  /* eslint-disable-next-line new-cap */
+  context.globals.strictMode === 'enabled' ? <StrictMode>{Story()}</StrictMode> : <>{Story()}</>;
+
+export const decorators = [withThemeProvider, withStrictMode];
 
 export const globalTypes = {
   locale: {
@@ -105,5 +109,17 @@ export const globalTypes = {
         { value: 'fuschia', title: 'Custom primary hue' }
       ]
     }
+  },
+  strictMode: {
+    name: 'strictMode',
+    description: 'Strict mode',
+    defaultValue: 'disabled',
+    toolbar: {
+      icon: 'alert',
+      items: [
+        { value: 'disabled', title: 'Strict mode disabled' },
+        { value: 'enabled', title: 'Strict mode enabled' }
+      ]
+    }
   }
 };