Merge pull request #4520 from kobotoolbox/bugfix/storybook-typescript-5

Get Storybook compatible with TypeScript 5.x

.storybook/main.js

@@ -25,6 +25,9 @@ module.exports = {
   core: {
     builder: '@storybook/builder-webpack5',
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript-plugin',
+  },
   webpackFinal: async (config, {configType}) => {
     config.plugins.push(new webpack.ProvidePlugin({$: 'jquery'}));
     config.module.rules.push({

jsapp/js/components/common/checkbox.stories.tsx

@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof Checkbox>;
 
 const Template: ComponentStory<typeof Checkbox> = (args) => (
-  <Checkbox {...args} />
+  <Checkbox {...args} onChange={() => {}} />
 );
 
 export const Primary = Template.bind({});

jsapp/js/components/common/radio.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import type {ComponentStory, ComponentMeta} from '@storybook/react';
 import Radio from './radio';
 import type {RadioOption} from './radio';
@@ -29,9 +29,19 @@ export default {
   argTypes: {},
 } as ComponentMeta<typeof Radio>;
 
-const Template: ComponentStory<typeof Radio> = (args) => (
-  <Radio {...args} options={defaultOptions} />
-);
+const Template: ComponentStory<typeof Radio> = (args) => {
+  const [selected, setSelected] = useState('');
+  return (
+    <Radio
+      {...args}
+      selected={selected}
+      onChange={(newSelectedValue) => setSelected(newSelectedValue)}
+      options={defaultOptions}
+    />
+  );
+};
 
 export const Primary = Template.bind({});
-Primary.args = {title: 'Pick your favourite food'};
+Primary.args = {
+  title: 'Pick your favourite food',
+};

package.json

@@ -136,6 +136,7 @@
     "postcss": "^7.0.30",
     "postcss-loader": "^4.2.0",
     "prettier": "^2.7.1",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "react-hot-loader": "3.1.0",
     "react-refresh": "^0.14.0",
     "replace-in-file": "^6.0.0",