@aarhus-university/au-lib-react-components 11.1.0 → 11.1.1

package/stories/lib/helpers.tsx

@@ -1,128 +1,128 @@
-import { useTranslation } from '../../src/lib/hooks';
-import React, { useEffect, StrictMode } from 'react';
-
-const globalTheme = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'circlehollow',
-      items: ['normal', 'dark'],
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-};
-
-const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
-  lang: {
-    name: 'Language',
-    description: 'Global language for components',
-    defaultValue,
-    toolbar: {
-      icon: 'circlehollow',
-      items,
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-});
-
-const ThemeWrapper = ({ theme, children, withPageContentBlock }) => {
-  useEffect(() => {
-    const body = document.querySelector('body');
-    if (body) {
-      body.classList.remove('theme--normal');
-      body.classList.remove('theme--dark');
-      body.classList.add(`theme--${theme}`);
-    }
-  });
-
-  if (withPageContentBlock) {
-    return (
-      <StrictMode>
-        <div className="page">
-          <main className={`theme--${theme} page__content`}>
-            <div className="page__content__block">
-              {children}
-            </div>
-          </main>
-        </div>
-      </StrictMode>
-    );
-  }
-
-  return (
-    <StrictMode>
-      <div className="page">
-        <main className={`theme--${theme} page__content`}>
-          {children}
-        </main>
-      </div>
-    </StrictMode>
-  );
-}
-
-ThemeWrapper.defaultProps = {
-  withPageContentBlock: true,
-};
-
-const ThemeLanguageWrapper = ({
-  theme,
-  children,
-  defaultLabels,
-  importPromises,
-  translationContext,
-  lang,
-  withPageContentBlock,
-}) => {
-  const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises, lang);
-  useEffect(() => {
-    const body = document.querySelector('body');
-    if (body) {
-      body.classList.remove('theme--normal');
-      body.classList.remove('theme--dark');
-      body.classList.add(`theme--${theme}`);
-    }
-  });
-
-  if (withPageContentBlock) {
-    return (
-      <StrictMode>
-        <translationContext.Provider value={translations}>
-          <div className="page">
-            <main className={`theme--${theme} page__content`}>
-              <div className="page__content__block">
-                {children}
-              </div>
-            </main>
-          </div>
-        </translationContext.Provider>
-      </StrictMode>
-    );
-  }
-
-  return (
-    <StrictMode>
-      <translationContext.Provider value={translations}>
-        <div className="page">
-          <main className={`theme--${theme} page__content`}>
-            {children}
-          </main>
-        </div>
-      </translationContext.Provider>
-    </StrictMode>
-  );
-}
-
-ThemeLanguageWrapper.defaultProps = {
-  withPageContentBlock: true,
-};
-
-export {
-  globalTheme,
-  globalLang,
-  ThemeWrapper,
-  ThemeLanguageWrapper,
-};
+import { useTranslation } from '../../src/lib/hooks';
+import React, { useEffect, StrictMode } from 'react';
+
+const globalTheme = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['normal', 'dark'],
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
+  lang: {
+    name: 'Language',
+    description: 'Global language for components',
+    defaultValue,
+    toolbar: {
+      icon: 'circlehollow',
+      items,
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+});
+
+const ThemeWrapper = ({ theme, children, withPageContentBlock }) => {
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (body) {
+      body.classList.remove('theme--normal');
+      body.classList.remove('theme--dark');
+      body.classList.add(`theme--${theme}`);
+    }
+  });
+
+  if (withPageContentBlock) {
+    return (
+      <StrictMode>
+        <div className="page">
+          <main className={`theme--${theme} page__content`}>
+            <div className="page__content__block">
+              {children}
+            </div>
+          </main>
+        </div>
+      </StrictMode>
+    );
+  }
+
+  return (
+    <StrictMode>
+      <div className="page">
+        <main className={`theme--${theme} page__content`}>
+          {children}
+        </main>
+      </div>
+    </StrictMode>
+  );
+}
+
+ThemeWrapper.defaultProps = {
+  withPageContentBlock: true,
+};
+
+const ThemeLanguageWrapper = ({
+  theme,
+  children,
+  defaultLabels,
+  importPromises,
+  translationContext,
+  lang,
+  withPageContentBlock,
+}) => {
+  const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises, lang);
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (body) {
+      body.classList.remove('theme--normal');
+      body.classList.remove('theme--dark');
+      body.classList.add(`theme--${theme}`);
+    }
+  });
+
+  if (withPageContentBlock) {
+    return (
+      <StrictMode>
+        <translationContext.Provider value={translations}>
+          <div className="page">
+            <main className={`theme--${theme} page__content`}>
+              <div className="page__content__block">
+                {children}
+              </div>
+            </main>
+          </div>
+        </translationContext.Provider>
+      </StrictMode>
+    );
+  }
+
+  return (
+    <StrictMode>
+      <translationContext.Provider value={translations}>
+        <div className="page">
+          <main className={`theme--${theme} page__content`}>
+            {children}
+          </main>
+        </div>
+      </translationContext.Provider>
+    </StrictMode>
+  );
+}
+
+ThemeLanguageWrapper.defaultProps = {
+  withPageContentBlock: true,
+};
+
+export {
+  globalTheme,
+  globalLang,
+  ThemeWrapper,
+  ThemeLanguageWrapper,
+};

package/tsconfig.json

@@ -1,47 +1,47 @@
-{
-  "compilerOptions": {
-    // Target latest version of ECMAScript.
-    "target": "esnext",
-    // path to output directory
-    "outDir": "../wwwroot/js",
-    // enable strict null checks as a best practice
-    "strictNullChecks": true,
-    // Search under node_modules for non-relative imports.
-    "moduleResolution": "node",
-    // Process & infer types from .js files.
-    "allowJs": true,
-    // Don't emit; allow Babel to transform files.
-    "noEmit": true,
-    // Enable strictest settings like strictNullChecks & noImplicitAny.
-    "strict": true,
-    // Import non-ES modules as default imports.
-    "esModuleInterop": true,
-    // use typescript to transpile jsx to js
-    "jsx": "react",
-    "baseUrl": "./src",
-    "lib": [
-      "es2015",
-      "dom.iterable",
-      "es2016.array.include",
-      "es2017.object",
-      "dom"
-    ],
-    "module": "esnext",
-    "removeComments": true,
-    "alwaysStrict": true,
-    "allowUnreachableCode": false,
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true,
-    "importHelpers": true,
-    "resolveJsonModule": true,
-    "typeRoots": [
-      "./node_modules/@types",
-      "./node_modules/@aarhus-university/types"
-    ]
-  },
+{
+  "compilerOptions": {
+    // Target latest version of ECMAScript.
+    "target": "esnext",
+    // path to output directory
+    "outDir": "../wwwroot/js",
+    // enable strict null checks as a best practice
+    "strictNullChecks": true,
+    // Search under node_modules for non-relative imports.
+    "moduleResolution": "node",
+    // Process & infer types from .js files.
+    "allowJs": true,
+    // Don't emit; allow Babel to transform files.
+    "noEmit": true,
+    // Enable strictest settings like strictNullChecks & noImplicitAny.
+    "strict": true,
+    // Import non-ES modules as default imports.
+    "esModuleInterop": true,
+    // use typescript to transpile jsx to js
+    "jsx": "react",
+    "baseUrl": "./src",
+    "lib": [
+      "es2015",
+      "dom.iterable",
+      "es2016.array.include",
+      "es2017.object",
+      "dom"
+    ],
+    "module": "esnext",
+    "removeComments": true,
+    "alwaysStrict": true,
+    "allowUnreachableCode": false,
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@aarhus-university/types"
+    ]
+  },
 }

package/webpack.config.js

@@ -1,89 +1,89 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable import/no-extraneous-dependencies */
-const ESLintPlugin = require('eslint-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const path = require('path');
-
-// https://github.com/webpack/webpack/issues/4453
-
-const entries = {
-  all: './src/layout-2016/lib/all',
-  alphabox: './src/layout-2016/lib/au-alphabox',
-  databox: './src/layout-2016/lib/au-databox',
-  diagramme: './src/layout-2016/lib/au-diagramme',
-  flowbox: './src/layout-2016/lib/au-flowbox',
-  universe: './src/layout-2016/lib/universe',
-};
-
-module.exports = Object.entries(entries).map((entry) => ({
-  mode: 'production',
-  devtool: 'source-map',
-  entry: {
-    [entry[0]]: entry[1],
-  },
-  output: {
-    path: path.resolve(__dirname, './build/umd'),
-    filename: '[name].js',
-    libraryTarget: 'umd', // https://webpack.js.org/configuration/output/#output-librarytarget
-  },
-  plugins: [
-    new ESLintPlugin({
-      fix: true,
-    }),
-    new MiniCssExtractPlugin({
-      filename: 'all.css',
-      chunkFilename: '[id].css',
-    }),
-    new ForkTsCheckerWebpackPlugin(),
-  ],
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(ts|js)x?$/,
-        include: path.resolve(__dirname, '.'),
-        exclude: /(node_modules)/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-      {
-        test: /\.(ts|js)x?$/,
-        include: path.resolve(__dirname, './node_modules/@aarhus-university/au-designsystem-delphinus/source'),
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-      {
-        test: /\.scss/,
-        include: path.resolve(__dirname, './src/styles'),
-        sideEffects: true,
-        use: [
-          MiniCssExtractPlugin.loader,
-          { loader: 'css-loader' },
-          { loader: 'sass-loader' },
-        ],
-      },
-    ],
-  },
-  externals: {
-    moment: 'moment',
-    react: {
-      root: 'React',
-      commonjs2: 'react',
-      commonjs: 'react',
-      amd: 'react',
-      umd: 'react',
-    },
-    'react-dom': {
-      root: 'ReactDOM',
-      commonjs2: 'react-dom',
-      commonjs: 'react-dom',
-      amd: 'react-dom',
-      umd: 'react-dom',
-    },
-  },
-}));
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable import/no-extraneous-dependencies */
+const ESLintPlugin = require('eslint-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const path = require('path');
+
+// https://github.com/webpack/webpack/issues/4453
+
+const entries = {
+  all: './src/layout-2016/lib/all',
+  alphabox: './src/layout-2016/lib/au-alphabox',
+  databox: './src/layout-2016/lib/au-databox',
+  diagramme: './src/layout-2016/lib/au-diagramme',
+  flowbox: './src/layout-2016/lib/au-flowbox',
+  universe: './src/layout-2016/lib/universe',
+};
+
+module.exports = Object.entries(entries).map((entry) => ({
+  mode: 'production',
+  devtool: 'source-map',
+  entry: {
+    [entry[0]]: entry[1],
+  },
+  output: {
+    path: path.resolve(__dirname, './build/umd'),
+    filename: '[name].js',
+    libraryTarget: 'umd', // https://webpack.js.org/configuration/output/#output-librarytarget
+  },
+  plugins: [
+    new ESLintPlugin({
+      fix: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'all.css',
+      chunkFilename: '[id].css',
+    }),
+    new ForkTsCheckerWebpackPlugin(),
+  ],
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        include: path.resolve(__dirname, '.'),
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.(ts|js)x?$/,
+        include: path.resolve(__dirname, './node_modules/@aarhus-university/au-designsystem-delphinus/source'),
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.scss/,
+        include: path.resolve(__dirname, './src/styles'),
+        sideEffects: true,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader' },
+          { loader: 'sass-loader' },
+        ],
+      },
+    ],
+  },
+  externals: {
+    moment: 'moment',
+    react: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react',
+      umd: 'react',
+    },
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs2: 'react-dom',
+      commonjs: 'react-dom',
+      amd: 'react-dom',
+      umd: 'react-dom',
+    },
+  },
+}));