@oliasoft-open-source/react-ui-library 1.0.0

package/src/style/mixins.less

@@ -0,0 +1,67 @@
+@import './variables.less';
+
+.inputInTable {
+  background-color: transparent;
+  border-radius: inherit !important;
+  height: @input_height;
+  min-height: 100%;
+
+  &:hover,
+  &:focus {
+    position: relative;
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+  }
+}
+
+.inputFocus {
+  outline: none !important;
+  border: 1px solid var(--color-border-focus) !important;
+  box-shadow: var(--shadow-focus);
+}
+
+.inputError,
+.inputWarning {
+  position: relative;
+  z-index: 1;
+}
+
+.inputError {
+  border-color: var(--color-border-error) !important;
+  color: var(--color-text-error) !important;
+  background-color: var(--color-background-error);
+
+  &:hover {
+    border-color: var(--color-border-error-hover) !important;
+  }
+
+  &:focus {
+    .inputFocus();
+  }
+}
+
+.inputWarning {
+  border-color: var(--color-border-warning) !important;
+  color: var(--color-text-warning) !important;
+  background-color: var(--color-background-warning);
+
+  &:hover {
+    border-color: var(--color-border-warning-hover) !important;
+  }
+
+  &:focus {
+    .inputFocus();
+  }
+}
+
+.inputDisabled {
+  pointer-events: none;
+  background-color: var(--color-background-disabled);
+  color: var(--color-text-muted);
+}

package/src/style/reset/reset.less

@@ -0,0 +1,34 @@
+@import '~normalize.css/normalize.css';
+
+/* Border-Box */
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+html {
+  box-sizing: border-box;
+}
+
+/* iPad Input Shadows */
+input[type='text'],
+input[type='email'],
+input[type='search'],
+input[type='password'] {
+  -webkit-appearance: none;
+  -moz-appearance: none; /* mobile firefox too! */
+}
+
+/* FF dotted border outlines */
+:focus {
+  outline: none !important;
+}
+::-moz-focus-inner {
+  border: 0 !important;
+}
+
+/* Strip native browser link styles */
+
+a {
+  color: inherit;
+}

package/src/style/shared.less

@@ -0,0 +1,25 @@
+/*
+ This file has shared variables that are re-used:
+   - in other LESS files/modules
+   - in JavaScript, via https://www.npmjs.com/package/less-vars-to-js
+
+ Only use simple variables in this file
+ */
+
+// Brand guidelines
+@colorPrimary: #eb6429;
+@colorError: #e14c4c;
+@colorWarning: #e2b327;
+@colorSuccess: #3bbb3b;
+@colorInfo: #29a7eb;
+@colorNeutral: #f5f7f9;
+
+/*
+  Allow the parent project to optionally override the primary colour palette
+  by having an `override.less` file in its root directory
+ */
+@import (optional) '../../../../override.less';
+
+/*
+  Other shared variables
+ */

package/src/style/theme.dark.less

@@ -0,0 +1,37 @@
+html[data-theme='dark'] {
+  color-scheme: dark;
+
+  --color-text: var(--color-neutral-200);
+  --color-text-muted: var(--color-neutral-400);
+  --color-text-faint: var(--color-neutral-600);
+  --color-text-primary: var(--color-primary-muted-500);
+  --color-text-primary-active: var(--color-primary-muted-400);
+  --color-text-primary-hover: var(--color-primary-muted-450);
+  --color-text-error: var(--color-error-muted-300);
+  --color-text-info: var(--color-info-muted-300);
+  --color-text-success: var(--color-success-muted-300);
+  --color-text-warning: var(--color-warning-muted-300);
+
+  --color-background: var(--color-neutral-900);
+  --color-background-raised: var(--color-neutral-800);
+  --color-background-disabled: rgba(black, 0.2);
+  --color-background-error: var(--color-error-muted-700);
+  --color-background-info: var(--color-info-muted-700);
+  --color-background-success: var(--color-success-muted-700);
+  --color-background-warning: var(--color-warning-muted-700);
+  --color-background-primary: var(--color-primary-muted-500);
+
+  --color-background-input: var(--color-neutral-750);
+  --color-background-listitem-active: var(--color-primary-muted-750);
+  --color-background-listitem-hover: var(--color-neutral-750);
+  --color-background-menuitem-active: var(--color-neutral-650);
+  --color-background-menuitem-hover: var(--color-neutral-700);
+
+  --color-border: var(--color-neutral-1000);
+  --color-border-hover: var(--color-neutral-500);
+  --color-border-focus: var(--color-info-500);
+  --color-border-error: var(--color-neutral-1000);
+  --color-border-warning: var(--color-neutral-1000);
+
+  --shadow-focus: 0 0 0 2px rgba(@colorInfo, 0.5);
+}

package/src/style/theme.default.less

@@ -0,0 +1,74 @@
+@import './variables.less';
+
+:root {
+  color-scheme: initial;
+
+  // TODO: Replace legacy colors with values from base palettes
+
+  --color-text: rgba(0, 0, 0, 0.87);
+  --color-text-muted: #7d7b7a;
+  --color-text-faint: #acabab;
+  --color-text-error: hsl(hue(@colorError), 40%, 50%);
+  --color-text-warning: var(--color-warning-700);
+  --color-text-success: hsl(hue(@colorSuccess), 40%, 50%);
+  --color-text-info: hsl(hue(@colorInfo), 40%, 50%);
+  --color-text-primary: @colorPrimary;
+  --color-text-primary-hover: #ce4c13;
+  --color-text-primary-active: #9f3b0f;
+
+  --color-background: #f5f7f9;
+  --color-background-raised: white;
+  --color-background-disabled: rgba(black, 0.05);
+  --color-background-info: hsl(hue(@colorInfo), 40%, 90%);
+  --color-background-error: hsl(hue(@colorError), 40%, 90%);
+  --color-background-success: hsl(hue(@colorSuccess), 40%, 90%);
+  --color-background-warning: var(--color-warning-100);
+  --color-background-primary: @colorPrimary;
+
+  --color-background-input: white;
+  --color-background-listitem-active: #fff0e4;
+  --color-background-listitem-hover: #f5f7f9;
+  --color-background-menuitem-active: darken(#f5f7f9, 2.5%);
+  --color-background-menuitem-hover: #f5f7f9;
+
+  --color-border: #ddd;
+  --color-border-hover: #bbb;
+  --color-border-focus: var(--color-info-muted-500);
+  --color-border-error: var(--color-error-muted-300);
+  --color-border-error-hover: var(--color-error-muted-400);
+  --color-border-warning: var(--color-warning-muted-300);
+  --color-border-warning-hover: var(--color-warning-muted-400);
+
+  --shadow-focus: 0 0 0 2px rgba(@colorInfo, 0.25);
+
+  // --color-text: var(--color-neutral-900);
+  // --color-text-muted: var(--color-neutral-650);
+  // --color-text-faint: var(--color-neutral-400);
+  // --color-text-error: var(--color-error-700);
+  // --color-text-warning: var(--color-warning-700);
+  // --color-text-success: var(--color-success-700);
+  // --color-text-info: var(--color-info-700);
+  // --color-text-primary: var(--color-primary-500);
+  // --color-text-primary-hover: var(--color-primary-550);
+  // --color-text-primary-active: var(--color-primary-600);
+
+  // --color-background: var(--color-neutral-50);
+  // --color-background-raised: var(--color-neutral-0);
+  // --color-background-disabled: var(--color-neutral-100);
+  // --color-background-info: var(--color-info-muted-150);
+  // --color-background-error: var(--color-error-muted-150);
+  // --color-background-success: var(--color-success-muted-150);
+  // --color-background-warning: var(--color-warning-muted-150);
+  // --color-background-primary: var(--color-primary-500);
+
+  // --color-background-listitem-active: var(--color-primary-100);
+  // --color-background-listitem-hover: var(--color-neutral-50);
+  // --color-background-menuitem-active: var(--color-neutral-100);
+  // --color-background-menuitem-hover: var(--color-neutral-50);
+
+  // --color-border: var(--color-neutral-200);
+  // --color-border-hover: var(--color-neutral-300);
+  // --color-border-focus: var(--color-info-500);
+  // --color-border-error: var(--color-error-muted-300);
+  // --color-border-warning: var(--color-warning-muted-500);
+}

package/src/style/variables.less

@@ -0,0 +1,49 @@
+@import './colors.less';
+@import './theme.default.less';
+@import './theme.dark.less';
+
+@default_font: 'Lato', sans-serif;
+
+/*
+  LAYOUT
+*/
+
+@topbar_height: 60px;
+@sidebar_width: 300px;
+@sidebar_width_collapsed: 70px;
+
+/*
+  CARDS
+*/
+
+@card_border_radius: 4px;
+@card_padding_x: 15px;
+@card_padding_y: 10px;
+
+/*
+  INPUTS
+*/
+
+@input_height: 38px;
+@input_height_small: 24px;
+@input_font_size_small: 12px;
+@input_padding_x: 14px;
+@input_padding_y: 9.5px;
+@input_padding_small_x: 7px;
+@input_padding_small_y: 3.5px;
+@input_border_radius: 4px;
+
+/*
+  Z-INDEX
+*/
+
+@zindex_topbar_alert: 98;
+@zindex_drawer: 99;
+@zindex_topbar: 101;
+@zindex_dimmer: 1000;
+@zindex_modal: 2000;
+//We need react-laag layers to appear above modals
+//Tooltips need to be above dropdown layers
+@zindex_popover: 2001;
+@zindex_dropdown: 2002;
+@zindex_tooltip: 2003;

package/webpack/webpack.common.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const { resolve } = require('./webpack.resolve.js');
+
+module.exports = {
+  resolve,
+  entry: {
+    app: './src/docs/start.jsx',
+  },
+  output: {
+    path: path.resolve(__dirname, '../public'),
+    filename: '[name].[contenthash].js',
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: 'src/docs/html/index.html',
+      filename: './index.html',
+      favicon: 'src/docs/html/favicon.png',
+      cache: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css',
+    }),
+  ],
+  optimization: {
+    runtimeChunk: 'single', // single runtime bundle for all chunks
+    // put node_modules into separate bundles
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+        },
+      },
+    },
+  },
+};

package/webpack/webpack.common.rules.js

@@ -0,0 +1,102 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = function getRules(env) {
+  const styleLoader = MiniCssExtractPlugin.loader;
+
+  return [
+    {
+      test: /\.jsx$|\.es6$|\.js$/,
+      exclude: /(node_modules|oliasoftDefaultLibraries)/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          cacheDirectory: true,
+          presets: ['@babel/react'],
+        },
+      },
+    },
+    {
+      test: /\.(ttf|eot|woff|woff2)$/,
+      type: 'asset/resource',
+      generator: {
+        filename: './fonts/[name].[contenthash][ext]',
+      },
+    },
+    {
+      test: /\.(svg|gif|png|jpg)$/,
+      type: 'asset/resource',
+      generator: {
+        filename: './images/[name].[contenthash][ext]',
+      },
+    },
+    {
+      test: /^(?!.*?(\.module)).*\.css$/, //all *.css except for *.module.css
+      use: [
+        styleLoader,
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: env === 'development',
+          },
+        },
+      ],
+    },
+    {
+      test: /^(?!.*?(\.module)).*\.less$/, //all *.less except for *.module.less
+      use: [
+        styleLoader,
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: env === 'development',
+          },
+        },
+        'less-loader',
+      ],
+    },
+    {
+      test: /\.module\.css$/, //*.module.css
+      use: [
+        styleLoader,
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: env === 'development',
+            modules: {
+              mode: 'local',
+              localIdentName: '[name]-[local]-[hash:base64:5]', //friendly module classNames
+            },
+          },
+        },
+      ],
+    },
+    {
+      test: /\.module\.less$/, //*.module.less
+      use: [
+        styleLoader,
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: env === 'development',
+            modules: {
+              mode: 'local',
+              localIdentName: '[name]-[local]-[hash:base64:5]', //friendly module classNames
+            },
+          },
+        },
+        'less-loader',
+      ],
+    },
+    {
+      test: /\.stories\.jsx?$/,
+      loader: require.resolve('@storybook/source-loader'),
+      include: [path.resolve(__dirname, '../src')],
+      enforce: 'pre',
+    },
+    {
+      resourceQuery: /raw/,
+      type: 'asset/source',
+    },
+  ];
+};

package/webpack/webpack.dev.js

@@ -0,0 +1,22 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const getRules = require('./webpack.common.rules.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  output: {
+    publicPath: '/',
+  },
+  devServer: {
+    port: 9001,
+    open: true,
+    historyApiFallback: true,
+    client: {
+      overlay: true,
+    },
+  },
+  module: {
+    rules: getRules('development'),
+  },
+});

package/webpack/webpack.prod.js

@@ -0,0 +1,23 @@
+const { merge } = require('webpack-merge');
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const common = require('./webpack.common.js');
+const getRules = require('./webpack.common.rules.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+  output: {
+    publicPath: '/react-ui-library/',
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+  },
+  module: {
+    rules: getRules('production'),
+  },
+});

package/webpack/webpack.resolve.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    alias: {
+      '~components': path.resolve(__dirname, '../src/components'),
+      '~docs': path.resolve(__dirname, '../src/docs'),
+      '~helpers': path.resolve(__dirname, '../src/helpers'),
+      '~style': path.resolve(__dirname, '../src/style'),
+      '~vendor': path.resolve(__dirname, '../src/vendor'),
+    },
+    fallback: {
+      fs: false,
+      net: false,
+      repl: false,
+      tls: false,
+      path: false,
+      crypto: false,
+    },
+  },
+};