Chore: Update application dependencies

.eslintrc.js

@@ -1,6 +1,7 @@
 'use strict'
 
 module.exports = {
+  ignorePatterns: ['componentry.config.js', 'src/utils/setup-tracer.ts'],
   extends: 'eloquence/react',
   rules: {
     // Enforce that testing library is used through utils/testing-library only
@@ -15,5 +16,14 @@ module.exports = {
         project: ['tsconfig.json', 'cypress/tsconfig.json'],
       },
     },
+    {
+      files: ['src/theme/**/*.js'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      env: {
+        node: true,
+      },
+    },
   ],
 }

.storybook/main.js

@@ -8,8 +8,6 @@ const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const SVGSymbolSprite = require('svg-symbol-sprite-loader')
 
-const { themeAccessor } = require('../webpack/theme-accessor')
-
 const context = fs.realpathSync(process.cwd())
 
 module.exports = {
@@ -41,29 +39,12 @@ module.exports = {
           MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
-            options: {
-              sourceMap: isProduction,
-              modules: {
-                mode: 'global',
-                localIdentName: '[name]-[local]--[hash:5]',
-              },
-            },
+            options: { sourceMap: isProduction },
           },
           {
             loader: 'postcss-loader',
             options: { sourceMap: isProduction },
           },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: isProduction,
-              sassOptions: {
-                functions: {
-                  'theme($theme-path: null)': themeAccessor,
-                },
-              },
-            },
-          },
         ],
       },
       // --- 📦 SVG icon sprite loader

.storybook/preview.js

@@ -1,10 +1,10 @@
-import { Theme } from 'componentry'
+import { ComponentryProvider } from 'componentry'
 import svgSymbolSpriteLoader from 'svg-symbol-sprite-loader'
 
-import { componentryTheme } from '@/theme/componentry'
+import { theme } from '@/theme/theme'
 
 // Include app base styles
-import '../src/index.scss'
+import '../src/index.css'
 
 // Import app icon sprite
 import '../src/utils/require-icons'
@@ -20,9 +20,9 @@ svgSymbolSpriteLoader({
 export const decorators = [
   // Global decorator sets Componentry prop defaults
   (Story) => (
-    <Theme theme={componentryTheme}>
+    <ComponentryProvider theme={theme}>
       <Story />
-    </Theme>
+    </ComponentryProvider>
   ),
 ]
 

babel.config.js

@@ -116,7 +116,7 @@ module.exports = function babelConfigs(api) {
       development: {
         plugins: [
           // Babel transform for "Fast Refresh"
-          // 'react-refresh/babel',
+          'react-refresh/babel',
         ],
       },
       production: {

componentry.config.js

@@ -0,0 +1,12 @@
+'use strict'
+
+const { components } = require('./src/theme/components')
+const { theme } = require('./src/theme/theme')
+
+// --- Componentry.design application theme
+// --------------------------------------------------------
+
+module.exports = {
+  theme,
+  components,
+}

jest.config.js

@@ -41,5 +41,7 @@ module.exports = {
     '\\.svg$': '<rootDir>/__mocks__/svgr-loader-mock.js',
     '\\.css$': '<rootDir>/__mocks__/css-loader-mock.js',
     '\\.scss$': '<rootDir>/__mocks__/scss-loader-mock.js',
+    // Workaround for: https://jestjs.io/docs/upgrading-to-jest28#packagejson-exports
+    'componentry': '<rootDir>/node_modules/componentry/dist/commonjs/index.js',
   },
 }