`
-HTML element. This enables making the component interactive and helps to improve
-its accessibility.
-
-π Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
-
-## API
-
-
-
-### ToolbarGroup API
-
-A wrapper for grouping ToolbarItems together.
-
-
-
-### ToolbarItem API
-
-A wrapper for individual toolbar items.
-
-
-
-## Theming
-
-| Custom Property | Description |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Toolbar__gap` | Gap between toolbar items |
-| `--rui-Toolbar__gap--dense` | Dense gap between toolbar items |
-
-[inline-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
-[block-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
-[grid]: /components/grid
-[spacing]: /css-helpers/spacing
-[text]: /components/text
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
diff --git a/src/lib/provider/RUIContext.jsx b/src/provider/RUIContext.jsx
similarity index 100%
rename from src/lib/provider/RUIContext.jsx
rename to src/provider/RUIContext.jsx
diff --git a/src/lib/provider/RUIProvider.jsx b/src/provider/RUIProvider.jsx
similarity index 62%
rename from src/lib/provider/RUIProvider.jsx
rename to src/provider/RUIProvider.jsx
index c3254127..6a7b522f 100644
--- a/src/lib/provider/RUIProvider.jsx
+++ b/src/provider/RUIProvider.jsx
@@ -1,5 +1,7 @@
import PropTypes from 'prop-types';
-import React from 'react';
+import React, {
+ useMemo,
+} from 'react';
import defaultTranslations from '../translations/en';
import RUIContext from './RUIContext';
@@ -7,16 +9,20 @@ const RUIProvider = ({
children,
globalProps,
translations,
-}) => (
-
- {children}
-
-);
+}) => {
+ const childProps = useMemo(() => ({
+ globalProps,
+ translations,
+ }), [globalProps, translations]);
+
+ return (
+
+ {children}
+
+ );
+};
RUIProvider.defaultProps = {
children: null,
diff --git a/src/lib/provider/__tests__/RUIProvider.test.jsx b/src/provider/__tests__/RUIProvider.test.jsx
similarity index 100%
rename from src/lib/provider/__tests__/RUIProvider.test.jsx
rename to src/provider/__tests__/RUIProvider.test.jsx
diff --git a/src/lib/provider/index.js b/src/provider/index.js
similarity index 100%
rename from src/lib/provider/index.js
rename to src/provider/index.js
diff --git a/src/lib/provider/withGlobalProps.jsx b/src/provider/withGlobalProps.jsx
similarity index 100%
rename from src/lib/provider/withGlobalProps.jsx
rename to src/provider/withGlobalProps.jsx
diff --git a/src/lib/styles/_utilities.scss b/src/styles/_utilities.scss
similarity index 100%
rename from src/lib/styles/_utilities.scss
rename to src/styles/_utilities.scss
diff --git a/src/lib/styles/elements/_code.scss b/src/styles/elements/_code.scss
similarity index 100%
rename from src/lib/styles/elements/_code.scss
rename to src/styles/elements/_code.scss
diff --git a/src/lib/styles/elements/_links.scss b/src/styles/elements/_links.scss
similarity index 100%
rename from src/lib/styles/elements/_links.scss
rename to src/styles/elements/_links.scss
diff --git a/src/lib/styles/elements/_lists.scss b/src/styles/elements/_lists.scss
similarity index 100%
rename from src/lib/styles/elements/_lists.scss
rename to src/styles/elements/_lists.scss
diff --git a/src/lib/styles/elements/_page.scss b/src/styles/elements/_page.scss
similarity index 100%
rename from src/lib/styles/elements/_page.scss
rename to src/styles/elements/_page.scss
diff --git a/src/lib/styles/elements/_rulers.scss b/src/styles/elements/_rulers.scss
similarity index 100%
rename from src/lib/styles/elements/_rulers.scss
rename to src/styles/elements/_rulers.scss
diff --git a/src/lib/styles/elements/_small.scss b/src/styles/elements/_small.scss
similarity index 100%
rename from src/lib/styles/elements/_small.scss
rename to src/styles/elements/_small.scss
diff --git a/src/lib/styles/generic/_box-sizing.scss b/src/styles/generic/_box-sizing.scss
similarity index 100%
rename from src/lib/styles/generic/_box-sizing.scss
rename to src/styles/generic/_box-sizing.scss
diff --git a/src/lib/styles/generic/_focus.scss b/src/styles/generic/_focus.scss
similarity index 100%
rename from src/lib/styles/generic/_focus.scss
rename to src/styles/generic/_focus.scss
diff --git a/src/lib/styles/generic/_forms.scss b/src/styles/generic/_forms.scss
similarity index 100%
rename from src/lib/styles/generic/_forms.scss
rename to src/styles/generic/_forms.scss
diff --git a/src/lib/styles/generic/_reset.scss b/src/styles/generic/_reset.scss
similarity index 100%
rename from src/lib/styles/generic/_reset.scss
rename to src/styles/generic/_reset.scss
diff --git a/src/lib/styles/generic/_shared.scss b/src/styles/generic/_shared.scss
similarity index 100%
rename from src/lib/styles/generic/_shared.scss
rename to src/styles/generic/_shared.scss
diff --git a/src/lib/styles/helpers/_animation.scss b/src/styles/helpers/_animation.scss
similarity index 100%
rename from src/lib/styles/helpers/_animation.scss
rename to src/styles/helpers/_animation.scss
diff --git a/src/lib/styles/settings/_animations.scss b/src/styles/settings/_animations.scss
similarity index 100%
rename from src/lib/styles/settings/_animations.scss
rename to src/styles/settings/_animations.scss
diff --git a/src/lib/styles/settings/_breakpoints.scss b/src/styles/settings/_breakpoints.scss
similarity index 100%
rename from src/lib/styles/settings/_breakpoints.scss
rename to src/styles/settings/_breakpoints.scss
diff --git a/src/lib/styles/settings/_escaped-characters.scss b/src/styles/settings/_escaped-characters.scss
similarity index 100%
rename from src/lib/styles/settings/_escaped-characters.scss
rename to src/styles/settings/_escaped-characters.scss
diff --git a/src/lib/styles/settings/_form-fields.scss b/src/styles/settings/_form-fields.scss
similarity index 100%
rename from src/lib/styles/settings/_form-fields.scss
rename to src/styles/settings/_form-fields.scss
diff --git a/src/lib/styles/settings/_forms.scss b/src/styles/settings/_forms.scss
similarity index 100%
rename from src/lib/styles/settings/_forms.scss
rename to src/styles/settings/_forms.scss
diff --git a/src/lib/styles/settings/_utilities.scss b/src/styles/settings/_utilities.scss
similarity index 100%
rename from src/lib/styles/settings/_utilities.scss
rename to src/styles/settings/_utilities.scss
diff --git a/src/lib/styles/settings/_z-indexes.scss b/src/styles/settings/_z-indexes.scss
similarity index 100%
rename from src/lib/styles/settings/_z-indexes.scss
rename to src/styles/settings/_z-indexes.scss
diff --git a/src/lib/styles/theme-constants/_breakpoints.scss b/src/styles/theme-constants/_breakpoints.scss
similarity index 100%
rename from src/lib/styles/theme-constants/_breakpoints.scss
rename to src/styles/theme-constants/_breakpoints.scss
diff --git a/src/lib/styles/theme-constants/_colors.scss b/src/styles/theme-constants/_colors.scss
similarity index 100%
rename from src/lib/styles/theme-constants/_colors.scss
rename to src/styles/theme-constants/_colors.scss
diff --git a/src/lib/styles/theme-constants/_svg.scss b/src/styles/theme-constants/_svg.scss
similarity index 100%
rename from src/lib/styles/theme-constants/_svg.scss
rename to src/styles/theme-constants/_svg.scss
diff --git a/src/lib/styles/theme/_accessibility.scss b/src/styles/theme/_accessibility.scss
similarity index 100%
rename from src/lib/styles/theme/_accessibility.scss
rename to src/styles/theme/_accessibility.scss
diff --git a/src/lib/styles/theme/_borders.scss b/src/styles/theme/_borders.scss
similarity index 100%
rename from src/lib/styles/theme/_borders.scss
rename to src/styles/theme/_borders.scss
diff --git a/src/lib/styles/theme/_code.scss b/src/styles/theme/_code.scss
similarity index 100%
rename from src/lib/styles/theme/_code.scss
rename to src/styles/theme/_code.scss
diff --git a/src/lib/styles/theme/_form-fields.scss b/src/styles/theme/_form-fields.scss
similarity index 100%
rename from src/lib/styles/theme/_form-fields.scss
rename to src/styles/theme/_form-fields.scss
diff --git a/src/lib/styles/theme/_links.scss b/src/styles/theme/_links.scss
similarity index 100%
rename from src/lib/styles/theme/_links.scss
rename to src/styles/theme/_links.scss
diff --git a/src/lib/styles/theme/_lists.scss b/src/styles/theme/_lists.scss
similarity index 100%
rename from src/lib/styles/theme/_lists.scss
rename to src/styles/theme/_lists.scss
diff --git a/src/lib/styles/theme/_page.scss b/src/styles/theme/_page.scss
similarity index 100%
rename from src/lib/styles/theme/_page.scss
rename to src/styles/theme/_page.scss
diff --git a/src/lib/styles/theme/_spacing.scss b/src/styles/theme/_spacing.scss
similarity index 100%
rename from src/lib/styles/theme/_spacing.scss
rename to src/styles/theme/_spacing.scss
diff --git a/src/lib/styles/theme/_typography.scss b/src/styles/theme/_typography.scss
similarity index 100%
rename from src/lib/styles/theme/_typography.scss
rename to src/styles/theme/_typography.scss
diff --git a/src/lib/styles/tools/_accessibility.scss b/src/styles/tools/_accessibility.scss
similarity index 100%
rename from src/lib/styles/tools/_accessibility.scss
rename to src/styles/tools/_accessibility.scss
diff --git a/src/lib/styles/tools/_breakpoint.scss b/src/styles/tools/_breakpoint.scss
similarity index 100%
rename from src/lib/styles/tools/_breakpoint.scss
rename to src/styles/tools/_breakpoint.scss
diff --git a/src/lib/styles/tools/_caret.scss b/src/styles/tools/_caret.scss
similarity index 89%
rename from src/lib/styles/tools/_caret.scss
rename to src/styles/tools/_caret.scss
index ab7708ab..46a37961 100644
--- a/src/lib/styles/tools/_caret.scss
+++ b/src/styles/tools/_caret.scss
@@ -6,7 +6,7 @@
height: 0.4375rem;
border-width: 2px;
border-style: none solid solid none;
- border-color: currentColor;
+ border-color: currentcolor;
}
@mixin rotate($rotate: 0) {
diff --git a/src/lib/styles/tools/_colors.scss b/src/styles/tools/_colors.scss
similarity index 100%
rename from src/lib/styles/tools/_colors.scss
rename to src/styles/tools/_colors.scss
diff --git a/src/lib/styles/tools/_reset.scss b/src/styles/tools/_reset.scss
similarity index 100%
rename from src/lib/styles/tools/_reset.scss
rename to src/styles/tools/_reset.scss
diff --git a/src/lib/styles/tools/_scrollbar.scss b/src/styles/tools/_scrollbar.scss
similarity index 100%
rename from src/lib/styles/tools/_scrollbar.scss
rename to src/styles/tools/_scrollbar.scss
diff --git a/src/lib/styles/tools/_spacing.scss b/src/styles/tools/_spacing.scss
similarity index 100%
rename from src/lib/styles/tools/_spacing.scss
rename to src/styles/tools/_spacing.scss
diff --git a/src/lib/styles/tools/_string.scss b/src/styles/tools/_string.scss
similarity index 100%
rename from src/lib/styles/tools/_string.scss
rename to src/styles/tools/_string.scss
diff --git a/src/lib/styles/tools/_svg.scss b/src/styles/tools/_svg.scss
similarity index 100%
rename from src/lib/styles/tools/_svg.scss
rename to src/styles/tools/_svg.scss
diff --git a/src/lib/styles/tools/_transition.scss b/src/styles/tools/_transition.scss
similarity index 100%
rename from src/lib/styles/tools/_transition.scss
rename to src/styles/tools/_transition.scss
diff --git a/src/lib/styles/tools/_utilities.scss b/src/styles/tools/_utilities.scss
similarity index 100%
rename from src/lib/styles/tools/_utilities.scss
rename to src/styles/tools/_utilities.scss
diff --git a/src/lib/styles/tools/form-fields/_box-field-elements.scss b/src/styles/tools/form-fields/_box-field-elements.scss
similarity index 99%
rename from src/lib/styles/tools/form-fields/_box-field-elements.scss
rename to src/styles/tools/form-fields/_box-field-elements.scss
index 598ab97f..5bf4256c 100644
--- a/src/lib/styles/tools/form-fields/_box-field-elements.scss
+++ b/src/styles/tools/form-fields/_box-field-elements.scss
@@ -7,7 +7,7 @@
@use "../../settings/form-fields" as settings;
@use "../../theme/form-fields" as theme;
-@use "../../tools/caret";
+@use "../caret";
@use "../spacing";
@use "../transition";
diff --git a/src/lib/styles/tools/form-fields/_box-field-layout.scss b/src/styles/tools/form-fields/_box-field-layout.scss
similarity index 100%
rename from src/lib/styles/tools/form-fields/_box-field-layout.scss
rename to src/styles/tools/form-fields/_box-field-layout.scss
diff --git a/src/lib/styles/tools/form-fields/_box-field-sizes.scss b/src/styles/tools/form-fields/_box-field-sizes.scss
similarity index 100%
rename from src/lib/styles/tools/form-fields/_box-field-sizes.scss
rename to src/styles/tools/form-fields/_box-field-sizes.scss
diff --git a/src/lib/styles/tools/form-fields/_foundation.scss b/src/styles/tools/form-fields/_foundation.scss
similarity index 100%
rename from src/lib/styles/tools/form-fields/_foundation.scss
rename to src/styles/tools/form-fields/_foundation.scss
diff --git a/src/lib/styles/tools/form-fields/_inline-field-elements.scss b/src/styles/tools/form-fields/_inline-field-elements.scss
similarity index 98%
rename from src/lib/styles/tools/form-fields/_inline-field-elements.scss
rename to src/styles/tools/form-fields/_inline-field-elements.scss
index efa36b3e..1abeb247 100644
--- a/src/lib/styles/tools/form-fields/_inline-field-elements.scss
+++ b/src/styles/tools/form-fields/_inline-field-elements.scss
@@ -11,7 +11,7 @@
@use "../../theme/typography";
@use "../../theme/form-fields" as theme;
-@use "../../tools/accessibility";
+@use "../accessibility";
@use "../transition";
@mixin check-input($type) {
@@ -26,7 +26,7 @@
background-size: contain;
background-repeat: no-repeat;
background-color: var(--rui-local-check-background-color);
- color-adjust: exact; // 1.
+ print-color-adjust: exact; // 1.
&:focus,
&:checked:focus {
diff --git a/src/lib/styles/tools/form-fields/_inline-field-layout.scss b/src/styles/tools/form-fields/_inline-field-layout.scss
similarity index 100%
rename from src/lib/styles/tools/form-fields/_inline-field-layout.scss
rename to src/styles/tools/form-fields/_inline-field-layout.scss
diff --git a/src/lib/styles/tools/form-fields/_variants.scss b/src/styles/tools/form-fields/_variants.scss
similarity index 100%
rename from src/lib/styles/tools/form-fields/_variants.scss
rename to src/styles/tools/form-fields/_variants.scss
diff --git a/src/lib/theme.scss b/src/theme.scss
similarity index 99%
rename from src/lib/theme.scss
rename to src/theme.scss
index 5d1f2be1..b21bc0b9 100644
--- a/src/lib/theme.scss
+++ b/src/theme.scss
@@ -1,10 +1,11 @@
// Default theme. Designed to be used as a starting point for your custom theme.
-@use "styles/theme-constants/breakpoints";
-@use "styles/theme-constants/colors";
-@use "styles/theme-constants/svg";
+@use "src/styles/theme-constants/breakpoints";
+@use "src/styles/theme-constants/colors";
+@use "src/styles/theme-constants/svg";
-:root {
+:root,
+:host {
// ============================================================================================ //
// GLOBAL TOKENS //
// ============================================================================================ //
@@ -717,7 +718,7 @@
// ButtonGroup: filled buttons
--rui-ButtonGroup--filled__gap: calc(-1 * var(--rui-Button__border-width));
--rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width);
- --rui-ButtonGroup--filled__separator__color: currentColor;
+ --rui-ButtonGroup--filled__separator__color: currentcolor;
// ButtonGroup: outline buttons
--rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
@@ -727,7 +728,7 @@
// ButtonGroup: flat buttons
--rui-ButtonGroup--flat__gap: var(--rui-Button__border-width);
--rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap);
- --rui-ButtonGroup--flat__separator__color: currentColor;
+ --rui-ButtonGroup--flat__separator__color: currentcolor;
//
// Card
diff --git a/src/lib/translations/en.js b/src/translations/en.js
similarity index 100%
rename from src/lib/translations/en.js
rename to src/translations/en.js
diff --git a/src/lib/utils/__tests__/classNames.js b/src/utils/__tests__/classNames.js
similarity index 100%
rename from src/lib/utils/__tests__/classNames.js
rename to src/utils/__tests__/classNames.js
diff --git a/src/lib/utils/classNames.js b/src/utils/classNames.js
similarity index 100%
rename from src/lib/utils/classNames.js
rename to src/utils/classNames.js
diff --git a/tests/mocks/svgrMock.jsx b/tests/mocks/svgrMock.jsx
new file mode 100644
index 00000000..c18a4516
--- /dev/null
+++ b/tests/mocks/svgrMock.jsx
@@ -0,0 +1,4 @@
+import React from 'react';
+
+const SvgrMock = (props) => (
);
+export default SvgrMock;
diff --git a/tests/providerTests/formLayoutProviderTest.jsx b/tests/providerTests/formLayoutProviderTest.jsx
index 622d428a..fd9952c9 100644
--- a/tests/providerTests/formLayoutProviderTest.jsx
+++ b/tests/providerTests/formLayoutProviderTest.jsx
@@ -1,6 +1,6 @@
import { render } from '@testing-library/react';
import React from 'react';
-import { FormLayoutContext } from '../../src/lib/components/FormLayout';
+import { FormLayoutContext } from '../../src/components/FormLayout';
export const formLayoutProviderTest = (Component) => {
it.each([
diff --git a/tests/setupJest.js b/tests/setupJest.js
index 245121f1..95938fe1 100644
--- a/tests/setupJest.js
+++ b/tests/setupJest.js
@@ -1,3 +1,7 @@
console.warning = (error) => {
throw new Error(error);
};
+
+console.error = (error) => {
+ throw new Error(error);
+};
diff --git a/webpack.config.js b/webpack.config.babel.js
similarity index 55%
rename from webpack.config.js
rename to webpack.config.babel.js
index 8b67400b..37811fb6 100644
--- a/webpack.config.js
+++ b/webpack.config.babel.js
@@ -1,18 +1,20 @@
-const path = require('path');
+const Path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
-const VisualizerPlugin = require('webpack-visualizer-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const VisualizerPlugin = require('webpack-visualizer-plugin2');
-const MAX_DEVELOPMENT_OUTPUT_SIZE = 3100000;
-const MAX_PRODUCTION_OUTPUT_SIZE = 360000;
+const MAX_DEVELOPMENT_OUTPUT_SIZE = 3300000;
+const MAX_PRODUCTION_OUTPUT_SIZE = 430000;
module.exports = (env, argv) => ({
devtool: argv.mode === 'production'
? false
: 'eval-cheap-module-source-map',
entry: {
- lib: [
- path.join(__dirname, 'src/lib/index.js'),
- ],
+ cssCustomProperties: Path.join(__dirname, 'src/cssCustomProperties.js'),
+ reactui: Path.join(__dirname, 'src/index.js'),
},
externals: {
react: {
@@ -33,14 +35,13 @@ module.exports = (env, argv) => ({
module: {
rules: [
{
- include: path.join(__dirname, 'src/lib'),
test: /\.(js|jsx)$/,
use: [{ loader: 'babel-loader' }],
},
{
test: /\.scss$/,
use: [
- { loader: 'style-loader' },
+ MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
@@ -64,13 +65,14 @@ module.exports = (env, argv) => ({
},
],
},
+ optimization: {
+ minimize: true,
+ minimizer: [new TerserPlugin()],
+ },
output: {
- filename: argv.mode === 'production'
- ? '[name].js'
- : '[name].development.js',
+ filename: '[name].js',
libraryTarget: 'umd',
- path: path.join(__dirname, 'dist'),
- publicPath: '/dist/',
+ path: Path.join(__dirname, 'src/docs/_assets/generated/'),
},
performance: {
hints: 'error',
@@ -82,19 +84,35 @@ module.exports = (env, argv) => ({
: MAX_DEVELOPMENT_OUTPUT_SIZE,
},
plugins: [
+ new MiniCssExtractPlugin({
+ chunkFilename: '[id].css',
+ filename: '[name].css',
+ ignoreOrder: false, // Enable to remove warnings about conflicting order
+ }),
new StyleLintPlugin({
configFile: 'stylelint.config.js',
- files: '**/*.scss',
+ files: 'src/**/*.scss',
}),
new VisualizerPlugin({
- filename: argv.mode === 'production'
- ? '../lib-stats.html'
- : '../lib-stats.development.html',
+ filename: 'lib-stats.html',
}),
+ argv.mode === 'production'
+ ? new CopyPlugin({
+ patterns: [
+ {
+ from: Path.join(__dirname, 'src/docs/_assets/generated/reactui.js'),
+ to: Path.join(__dirname, 'dist'),
+ },
+ {
+ from: Path.join(__dirname, 'src/docs/_assets/generated/reactui.css'),
+ to: Path.join(__dirname, 'dist'),
+ },
+ ],
+ })
+ : () => {},
],
resolve: {
extensions: ['.js', '.jsx', '.scss'],
- modules: ['src/lib', 'node_modules'],
+ modules: ['src', 'node_modules'],
},
});
-