feat: adds ComponentProvider to wrap all providers

Started with an update to dependencies and the required fixes.
This required significant work in
the dev support (tests/stories).
Changes in components now require some global Providers so a new
component provider has been added to wrap them all together.

BREAKING CHANGE: It is now reccommended that you wrap the application with `ComponentsProvider`
replacing the `ThemeProvider`. This includes all required components.

fix #253

Author: stuarthendren

.husky/_/husky.sh

@@ -1,7 +1,9 @@
 #!/bin/sh
 if [ -z "$husky_skip_init" ]; then
   debug () {
-    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
   }
 
   readonly hook_name="$(basename "$0")"
@@ -23,8 +25,7 @@ if [ -z "$husky_skip_init" ]; then
 
   if [ $exitCode != 0 ]; then
     echo "husky - $hook_name hook exited with code $exitCode (error)"
-    exit $exitCode
   fi
 
-  exit 0
+  exit $exitCode
 fi

.storybook/committed/withTheme.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDarkMode } from 'storybook-dark-mode'
-import { ThemeProvider, darkTheme, lightTheme } from '../../src'
+import { ComponentsProvider, darkTheme, lightTheme } from '../../src'
 import '@fontsource/inter/300.css'
 import '@fontsource/inter/400.css'
 import '@fontsource/inter/700.css'
@@ -20,8 +20,8 @@ export const withTheme = (Story) => {
 
   const choice = useDarkMode() ? 'dark' : 'light'
   return (
-    <ThemeProvider choice={choice}>
+    <ComponentsProvider theme={{ choice }}>
       <Story />
-    </ThemeProvider>
+    </ComponentsProvider>
   )
 }

.storybook/components/DocsContainer.tsx

@@ -10,12 +10,18 @@ export const DocsContainer = ({ context, ...props }) => {
     <BaseContainer
       context={{
         ...context,
-        parameters: {
-          ...context.parameters,
-          docs: {
-            ...context.parameters.docs,
-            theme: dark ? themes.dark : themes.light,
-          },
+        storyById: (id) => {
+          const storyContext = context.storyById(id)
+          return {
+            ...storyContext,
+            parameters: {
+              ...storyContext?.parameters,
+              docs: {
+                ...storyContext?.parameters?.docs,
+                theme: dark ? themes.dark : themes.light,
+              },
+            },
+          }
         },
       }}
       {...props}

.storybook/main.js

@@ -23,5 +23,16 @@ module.exports = {
   ],
   typescript: {
     check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => {
+        return prop.parent
+          ? /@radix-ui/.test(prop.parent.fileName) ||
+              !/node_modules/.test(prop.parent.fileName)
+          : true
+      },
+    },
   },
 }