chore: update node version used in GHA

also handle react 18 changes, updates auto and updates some github actions

.github/workflows/release.yml

@@ -7,25 +7,25 @@ jobs:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Prepare repository
         run: |
           git fetch --unshallow --tags
           git config user.name "GitHub Actions Bot"
           git config user.email "[email protected]"
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
           yarn release

.github/workflows/tests-unit.yml

@@ -7,10 +7,10 @@ jobs:
     name: Core Unit Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: "16.x"
+          node-version: '20.x'
           cache: yarn
       - name: install
         run: |

package.json

@@ -24,10 +24,13 @@
     "build": "concurrently \"npm run buildBabel\" \"npm run buildTsc\"",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
-    "start": "concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"",
+    "start": "concurrently \"npm run storybook -- --quiet\" \"npm run build -- --watch\"",
     "build-storybook": "storybook build",
     "release": "npm run build && auto shipit"
   },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.29.0",
@@ -58,11 +61,11 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/escape-html": "^1.0.2",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.12.12",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-select": "^3.1.2",
     "@types/webpack-env": "^1.18.0",
-    "auto": "^10.43.0",
+    "auto": "^11.1.6",
     "chalk": "^5.2.0",
     "concurrently": "^7.6.0",
     "jest": "^29.5.0",

src/components/Panel.tsx

@@ -283,7 +283,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
             <TabsState>
               {entries.map(([k, v]) => (
                 <div id={k} key={k} title={v.title}>
-                  {v.render}
+                  {v.render as unknown as ReactNode}
                 </div>
               ))}
             </TabsState>

src/components/types/Boolean.tsx

@@ -29,7 +29,7 @@ const deserialize = (value: string | null) => value === 'true';
 const BooleanType: FunctionComponent<BooleanTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob, onChange }) => (
+} = ({ knob = {} as any, onChange = (value)=>value }) => (
   <Input
     id={knob.name}
     name={knob.name}
@@ -39,11 +39,6 @@ const BooleanType: FunctionComponent<BooleanTypeProps> & {
   />
 );
 
-BooleanType.defaultProps = {
-  knob: {} as any,
-  onChange: (value) => value,
-};
-
 BooleanType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,

src/components/types/Button.tsx

@@ -19,17 +19,12 @@ const deserialize = (): undefined => undefined;
 const ButtonType: FunctionComponent<ButtonTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob, onClick }) => (
+} = ({ knob = {} as any, onClick = ()=>{} }) => (
   <Form.Button type="button" name={knob.name} onClick={() => onClick(knob)}>
     {knob.name}
   </Form.Button>
 );
 
-ButtonType.defaultProps = {
-  knob: {} as any,
-  onClick: () => {},
-};
-
 ButtonType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,

src/components/types/Files.tsx

@@ -34,7 +34,7 @@ const deserialize = (): undefined => undefined;
 const FilesType: FunctionComponent<FilesTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob, onChange }) => (
+} = ({ knob = {} as any, onChange = (value)=>value }) => (
   <FileInput
     type="file"
     name={knob.name}
@@ -49,11 +49,6 @@ const FilesType: FunctionComponent<FilesTypeProps> & {
   />
 );
 
-FilesType.defaultProps = {
-  knob: {} as any,
-  onChange: (value) => value,
-};
-
 FilesType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,

src/components/types/Options.tsx

@@ -70,7 +70,7 @@ const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
 } = (props) => {
-  const { knob, onChange } = props;
+  const { knob = {} as any, onChange = (value)=>value } = props;
   const { display } = knob.optionsObj;
 
   if (display === 'check' || display === 'inline-check') {
@@ -113,11 +113,6 @@ const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
   return null;
 };
 
-OptionsType.defaultProps = {
-  knob: {} as any,
-  display: 'select',
-  onChange: (value) => value,
-};
 
 OptionsType.propTypes = {
   knob: PropTypes.shape({

src/components/types/Select.tsx

@@ -28,7 +28,7 @@ const deserialize = (value: SelectTypeKnobValue) => value;
 const SelectType: FunctionComponent<SelectTypeProps> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = ({ knob, onChange }) => {
+} = ({ knob = {} as any, onChange = (value)=>value }) => {
   const { options } = knob;
 
   const callbackReduceArrayOptions = (acc: any, option: any, i: number) => {
@@ -67,11 +67,6 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
   );
 };
 
-SelectType.defaultProps = {
-  knob: {} as any,
-  onChange: (value) => value,
-};
-
 SelectType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,