@oliasoft-open-source/react-ui-library 2.4.7 → 3.0.0

package/src/style/mixins.less

@@ -1,68 +0,0 @@
-@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;
-}
-
-.inputError {
-  z-index: 2;
-  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 {
-  z-index: 1;
-  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

@@ -1,34 +0,0 @@
-@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

@@ -1,25 +0,0 @@
-/*
- 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

@@ -1,37 +0,0 @@
-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

@@ -1,74 +0,0 @@
-@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

@@ -1,49 +0,0 @@
-@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

@@ -1,39 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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,
-    },
-  },
-};