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

package/package.json

@@ -1,17 +1,30 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "2.4.8",
+  "version": "3.0.0",
   "description": "Reusable UI components for React projects",
-  "main": "index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
   "scripts": {
-    "build": "npm run build:docs && npm run build:storybook",
-    "build:docs": "webpack --config webpack/webpack.prod.js",
+    "build": "yarn run build:docs && yarn run build:storybook",
+    "build:docs": "vite build --config vite.config.docs.mjs",
     "build:css": "lessc src/style/external.less dist/gui-library.css",
-    "build:storybook": "build-storybook --quiet --output-dir ./public/storybook",
-    "dev:storybook": "start-storybook -p 6006",
-    "dev:docs": "webpack serve --config webpack/webpack.dev.js",
-    "test": "npm run prettier:check && npm run lint:check && npm run test:unit",
-    "test:unit": "jest",
+    "build:storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook --quiet --output-dir ./public/storybook",
+    "build:package": "vite build --config vite.config.mjs",
+    "dev:storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "dev:docs": "vite --config vite.config.docs.mjs",
+    "preview:docs": "yarn run http-server ./public -o -p 9002 -c-1",
+    "preview:storybook": "yarn run http-server ./public/storybook  -o -p 9003 -c-1",
+    "test": "yarn run prettier:check && yarn run lint:check && yarn run test:unit",
+    "test:unit": "vitest",
+    "test:unit:coverage": "vitest --coverage",
     "lint:check": "eslint \"**/*.{js,jsx}\"",
     "lint:fix": "eslint --fix \"**/*.{js,jsx}\"",
     "prettier:check": "prettier --check \"**/*.{js,jsx,json,css,less}\"",
@@ -35,45 +48,18 @@
   },
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
-    "@babel/eslint-parser": "^7.15.4",
-    "@babel/node": "^7.15.4",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.15.4",
-    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
-    "@babel/plugin-proposal-function-sent": "^7.14.5",
-    "@babel/plugin-proposal-json-strings": "^7.14.5",
-    "@babel/plugin-proposal-numeric-separator": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
-    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/runtime": "^7.15.4",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addons": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/builder-vite": "^0.2.4",
     "@storybook/react": "^6.5.10",
     "@types/lodash": "^4.14.172",
     "@types/mocha": "^9.0.0",
     "@types/react": "^17.0.21",
     "@types/react-redux": "^7.1.18",
     "@types/seamless-immutable": "^7.1.16",
-    "autoprefixer": "^10.3.4",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.2.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-md-import-to-string": "^1.0.6",
-    "babel-plugin-webpack-aliases": "^1.1.3",
-    "clean-css": "^5.1.5",
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
-    "cssnano": "^5.0.8",
-    "eslint": "^7.32.0",
+    "@vitest/coverage-c8": "^0.25.1",
+    "eslint": "^8.27.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -81,43 +67,35 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "html-loader": "^2.1.2",
-    "html-webpack-plugin": "^5.3.2",
     "husky": "^7.0.2",
-    "jest": "^27.2.0",
-    "jest-transform-stub": "^2.0.0",
     "less": "^4.1.1",
-    "less-loader": "^10.0.1",
     "lint-staged": "^11.1.2",
-    "mini-css-extract-plugin": "^2.3.0",
     "prettier": "2.4.0",
     "react": "^17.0",
     "react-dom": "^17.0",
     "storybook-dark-mode": "^1.1.0",
-    "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.52.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1",
-    "webpack-merge": "^5.8.0"
+    "vite": "^3.1.8",
+    "vite-preset-react": "^2.3.0"
   },
   "peerDependencies": {
     "react": "^17.0",
     "react-dom": "^17.0"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.8.7",
     "@infinium/react-keyboard-event-handler": "^1.5.8",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
     "@minoru/react-dnd-treeview": "^1.6.1",
+    "@storybook/addon-links": "^6.5.13",
+    "@vitejs/plugin-react": "^2.1.0",
     "classnames": "^2.3.1",
     "core-js": "^3.17.3",
-    "expose-loader": "^3.0.0",
+    "http-server": "^14.1.1",
     "immer": "^9.0.6",
+    "jsdom": "^20.0.2",
     "less-vars-to-js": "^1.3.0",
     "lodash": "^4.17.21",
     "memoize-one": "^5.2.1",
     "normalize.css": "^8.0.1",
+    "path": "^0.12.7",
     "prop-types": "^15.7.2",
     "rc-slider": "^9.7.2",
     "react-beautiful-dnd": "^13.1.0",
@@ -132,6 +110,10 @@
     "react-toastify": "^8.0.2",
     "react-window": "^1.8.6",
     "resize-observer-polyfill": "^1.5.1",
-    "styled-components": "^5.3.1"
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "styled-components": "^5.3.1",
+    "vite-plugin-html": "^3.2.0",
+    "vitest": "^0.25.1"
   }
 }

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules
-public

package/.eslintrc.js

@@ -1,125 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-    jest: true,
-  },
-  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
-  parser: '@babel/eslint-parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 12,
-    sourceType: 'module',
-  },
-  plugins: ['react'],
-  settings: {
-    'import/resolver': {
-      alias: {
-        map: [
-          ['~components', './src/components'],
-          ['~docs', './src/docs'],
-          ['~helpers', './src/helpers'],
-          ['~style', './src/style'],
-          ['~vendor', './src/vendor'],
-        ],
-        extensions: ['.js', '.jsx'],
-      },
-    },
-  },
-  rules: {
-    'arrow-parens': 0,
-    'array-callback-return': 0,
-    camelcase: 0,
-    'comma-dangle': 0,
-    'consistent-return': 0,
-    curly: 0,
-    'class-methods-use-this': 0,
-    'default-case': 0,
-    eqeqeq: 0,
-    'eol-last': 0,
-    'function-paren-newline': 0,
-    'max-len': 0,
-    'import/extensions': 0,
-    'import/prefer-default-export': 0,
-    'object-curly-newline': 0,
-    'object-curly-spacing': 0,
-    'one-var-declaration-per-line': 0,
-    'one-var': 0,
-    radix: 0,
-    'prefer-template': 0,
-    'prefer-const': 0,
-    'prefer-destructuring': [
-      'error',
-      {
-        VariableDeclarator: {
-          array: false,
-          object: true,
-        },
-        AssignmentExpression: {
-          array: false,
-          object: false,
-        },
-      },
-      {
-        enforceForRenamedProperties: false,
-      },
-    ],
-    'spaced-comment': 0,
-    'no-multi-spaces': 0,
-    'arrow-body-style': 0,
-    'no-shadow': 0,
-    'no-else-return': 0,
-    'no-param-reassign': 0,
-    'no-plusplus': 0,
-    'no-restricted-globals': 0,
-    'no-unused-vars': 0,
-    'no-unused-state': 0,
-    'no-case-declarations': 0,
-    'no-return-assign': 0,
-    'no-prototype-builtins': 0,
-    'no-restricted-syntax': 0,
-    'no-cond-assign': [2, 'except-parens'],
-    'no-console': 0,
-    'no-constant-condition': 0,
-    'no-underscore-dangle': 0,
-    'no-restricted-properties': 0,
-    'no-nested-ternary': 0,
-    'no-mixed-operators': 0,
-    'no-confusing-arrow': 0,
-    'no-lonely-if': 0,
-    'nonblock-statement-body-position': 0,
-    'react/jsx-tag-spacing': 0,
-    'react/jsx-one-expression-per-line': 0,
-    'react/no-array-index-key': 0,
-    'react/forbid-prop-types': 0,
-    'react/destructuring-assignment': 0,
-    'react/no-unused-state': 0,
-    'react/no-access-state-in-setstate': 0,
-    'react/no-did-update-set-state': 0,
-    'react/prop-types': 0,
-    'react/self-closing-comp': [
-      'error',
-      {
-        component: true,
-        html: false,
-      },
-    ],
-    'jsx-a11y/no-static-element-interactions': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'jsx-a11y/tabindex-no-positive': 0,
-    'jsx-a11y/label-has-associated-control': 0,
-    'jsx-a11y/label-has-for': 0,
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: [
-          'src/components/**/*.stories.{js,jsx}',
-          'webpack/**/*.js',
-        ],
-      },
-    ],
-  },
-};

package/.gitlab-ci.yml

@@ -1,76 +0,0 @@
-image: node:18
-
-stages:
-  - test
-  - release
-
-test:
-  stage: test
-  only:
-    - merge_requests
-  script:
-    - npm install --progress=false --no-save
-    - npm run build
-    - npm run test
-
-cache:
-  paths:
-    - node_modules/
-    - public/
-
-# Publish the static docs site (including Storybook) to Gitlab pages upon merge to master
-pages:
-  stage: release
-  only:
-    - master
-  script:
-    - npm install --progress=false --no-save
-    - npm run build
-    - cp public/index.html public/404.html
-  artifacts:
-    paths:
-      - public
-
-# Push a tag and publish the release to the public NPM registry upon merge to master
-# Loosely inspired by:
-# - https://markswanderingthoughts.nl/tagging-in-gitlab-ci-pipeline-using-deploy-keys/
-# - https://www.garybell.co.uk/creating-a-release-with-gitlab-ci-and-composer/
-publish:
-  stage: release
-  only:
-    - master
-  script:
-    # Get the version from package.json
-    - VERSION=$(node -p "require('./package.json').version")
-    # Prepare MatterMost message
-    - MESSAGE="🤖 React UI Library version $VERSION released"
-    - chmod +x ./scripts/send-mattermost-message.sh
-    # Prepare .npmrc
-    - echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
-    # Configure git
-    - mkdir -p ~/.ssh
-    - echo "$SSH_PRIVATE_KEY_TOOLKIT" > ~/.ssh/id_rsa; chmod 0600 ~/.ssh/id_rsa
-    - echo "StrictHostKeyChecking no " > /root/.ssh/config
-    - git config --global http.sslVerify false
-    - git config --global user.email "$GITLAB_USER_EMAIL"
-    - git config --global user.name "🤖 GitLab CI/CD"
-    - echo "setting origin remote to 'git@$CI_SERVER_HOST:$CI_PROJECT_PATH.git'"
-    - git remote rm origin
-    - git remote add origin git@$CI_SERVER_HOST:$CI_PROJECT_PATH.git
-    - git fetch --quiet
-    - git checkout "$CI_BUILD_REF_NAME"
-    # Only complete pipeline if version does not already exist
-    - >
-      if [ $(git tag -l "$VERSION") ]; then
-        echo "Version $VERSION already exists"
-        exit 1
-      else
-        echo "Tagging release in git"
-        git tag $VERSION -m "🤖 Tagged by Gitlab CI/CD Pipeline" -m "For further reference see $CI_PIPELINE_URL" -m "[skip ci]"
-        echo "Pushing tag to remote repository"
-        git push origin $VERSION --no-verify
-        echo "Publishing package to NPM registry"
-        npm publish
-        echo "Notifying MatterMost"
-        ./scripts/send-mattermost-message.sh "$MATTERMOST_BOT_KEY" "$MESSAGE"
-      fi

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged

package/.prettierignore

@@ -1,3 +0,0 @@
-node_modules
-public
-dist

package/.prettierrc

@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all"
-}

package/.storybook/main.js

@@ -1,36 +0,0 @@
-const { merge } = require('webpack-merge');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const getRules = require('../webpack/webpack.common.rules.js');
-const resolve = require('../webpack/webpack.resolve.js').resolve;
-
-module.exports = {
-  stories: ['../src/components/**/*.stories.@(js|jsx|mdx)'],
-  addons: [
-    '@storybook/addon-actions',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        sourceLoaderOptions: {
-          injectStoryParameters: false,
-        },
-      },
-    },
-    'storybook-dark-mode',
-  ],
-  features: {
-    modernInlineRender: true,
-  },
-  core: {
-    builder: 'webpack5',
-  },
-  webpackFinal: (config) =>
-    merge(config, {
-      module: { rules: getRules('development') },
-      plugins: [
-        new MiniCssExtractPlugin({
-          filename: '[name].css',
-        }),
-      ],
-      resolve,
-    }),
-};

package/.storybook/preview.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Toaster } from '../';
-import { useDarkMode } from 'storybook-dark-mode';
-import { themes } from '@storybook/theming';
-import { DocsContainer } from '@storybook/addon-docs';
-import '../src/style/global.less';
-import './storybook.less';
-
-export const decorators = [
-  (Story) => {
-    document.documentElement.setAttribute(
-      'data-theme',
-      useDarkMode() ? 'dark' : 'default',
-    );
-    return (
-      <>
-        <Story />
-        <Toaster />
-      </>
-    );
-  },
-];
-
-export const parameters = {
-  /**
-   * Fix for dark mode docs from https://github.com/hipstersmoothie/storybook-dark-mode/issues/180
-   */
-  docs: {
-    container: (props) => {
-      const isDark = useDarkMode();
-      const { id: storyId, storyById } = props.context;
-      const {
-        parameters: { docs = {} },
-      } = storyById(storyId);
-      docs.theme = isDark ? themes.dark : themes.light;
-
-      return React.createElement(DocsContainer, props);
-    },
-  },
-};

package/.storybook/storybook.less

@@ -1,8 +0,0 @@
-/**
-* Fix for Firefox story height bug
-*/
-@-moz-document url-prefix() {
-  .docs-story > div > div {
-    height: 100% !important;
-  }
-}

package/babel.config.js

@@ -1,31 +0,0 @@
-module.exports = (api) => {
-  api.cache(true);
-
-  const presets = [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          browsers: ['defaults'],
-        },
-        useBuiltIns: 'usage',
-        corejs: 3,
-      },
-    ],
-    '@babel/preset-react',
-  ];
-
-  const plugins = [
-    '@babel/plugin-proposal-class-properties',
-    'babel-plugin-transform-md-import-to-string',
-    [
-      'babel-plugin-webpack-aliases',
-      { config: './webpack/webpack.resolve.js' },
-    ],
-  ];
-
-  return {
-    presets,
-    plugins,
-  };
-};

package/index.js

@@ -1,76 +0,0 @@
-/*
- Components
- */
-
-export { Accordion } from './src/components/accordion/accordion';
-export { AccordionWithDefaultToggle } from './src/components/accordion/helpers/accordion-with-default-toggle';
-export { Actions } from './src/components/actions/actions';
-export { Badge } from './src/components/badge/badge';
-export { Breadcrumb } from './src/components/breadcrumb/breadcrumb';
-export { Button } from './src/components/button/button';
-export { ButtonGroup } from './src/components/button-group/button-group';
-export { Card } from './src/components/card/card';
-export { CheckBox } from './src/components/check-box/check-box';
-export { Column } from './src/components/layout/column/column';
-export { Divider } from './src/components/divider/divider';
-export { Dialog } from './src/components/dialog/dialog';
-export { Drawer } from './src/components/drawer/drawer';
-export { Empty } from './src/components/empty/empty';
-export { FileInput } from './src/components/file-input/file-input';
-export { readFile } from './src/components/file-input/file-input';
-export { Field } from './src/components/form/field';
-export { Flex } from './src/components/layout/flex/flex';
-export { FormRow } from './src/components/layout/form-row/form-row';
-export { Grid } from './src/components/layout/grid/grid';
-export { Icon } from './src/components/icon/icon';
-export { InputGroup } from './src/components/input-group/input-group';
-export { InputGroupAddon } from './src/components/input-group/input-group-addon/input-group-addon';
-export { Heading } from './src/components/heading/heading';
-export { Input, widthOfCharacters } from './src/components/input/input';
-export { Label } from './src/components/label/label';
-export { List } from './src/components/list/list';
-export { ListHeading } from './src/components/list/list-row/list-heading';
-export { ListSubheading } from './src/components/list/list-row/list-subheading';
-export { Loader } from './src/components/loader/loader';
-export { Menu } from './src/components/menu/menu';
-export { Message } from './src/components/message/message';
-export { Modal } from './src/components/modal/modal';
-export { OptionDropdown } from './src/components/option-dropdown/option-dropdown';
-export { Page } from './src/components/layout/page/page';
-export { Pagination } from './src/components/pagination/pagination';
-export { Popover } from './src/components/popover/popover';
-export { Portal } from './src/components/portal/portal';
-export { PrintHeader } from './src/components/layout/print-header/print-header';
-export { ProgressBar } from './src/components/progress-bar/progress-bar';
-export { RadioButton } from './src/components/radio-button/radio-button';
-export { NativeSelect } from './src/components/select/native-select/native-select';
-export { Row } from './src/components/layout/row/row';
-export { Select } from './src/components/select/select';
-export { SideBar } from './src/components/side-bar/side-bar';
-export { Slider } from './src/components/slider/slider';
-export { Spacer } from './src/components/layout/spacer/spacer';
-export { Spinner } from './src/components/spinner/spinner';
-export { Table } from './src/components/table/table';
-export { Tabs } from './src/components/tabs/tabs';
-export { Text } from './src/components/text/text';
-export { TextLink } from './src/components/text-link/text-link';
-export { TextArea } from './src/components/textarea/textarea';
-export { Toaster, toast } from './src/components/toaster/toaster';
-export { Toggle } from './src/components/toggle/toggle';
-export { Tooltip } from './src/components/tooltip/tooltip';
-export { TopBar } from './src/components/top-bar/top-bar';
-export { PopConfirm } from './src/components/pop-confirm/pop-confirm';
-export { Tree } from './src/components/tree/tree';
-
-/*
- Hooks
- */
-
-export { useKeyboardEvent, useFocus, useWindowWidth } from './src/hooks';
-
-/*
- Helpers
- */
-
-export { styleVariables } from './src/helpers/styles';
-export { DisabledContext } from './src/helpers/disabled-context';

package/jest.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  transform: {
-    '^.+\\.jsx?$': 'babel-jest',
-    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
-      'jest-transform-stub',
-  },
-  moduleFileExtensions: ['js', 'jsx'],
-  moduleDirectories: ['node_modules'],
-};

package/scripts/send-mattermost-message.sh

@@ -1,21 +0,0 @@
-#!/bin/bash
-set -eEuo pipefail
-
-# This script requires the following things to be installed:
-#  - bash
-#  - curl
-
-# Required inputs:
-MATTERMOST_BOT_KEY=$1
-MSG=$2
-
-# Optional inputs:
-CHANNEL=${3:-'#releases'}
-USERNAME=${4:-'Gitlab CI/CD'}
-ICON_URL=${5:-'https://oliasoftstaticwebsite.blob.core.windows.net/helpguideimages/robot-icon.png'}
-MATTERMOST_URL=${6:-'https://mm.oliasoft.com/hooks/'}
-
-curl -X POST \
-  --data-urlencode \
-  "payload={\"channel\": \"$CHANNEL\", \"username\": \"$USERNAME\", \"icon_url\": \"$ICON_URL\", \"text\": \"$MSG\"}" \
-  $MATTERMOST_URL$MATTERMOST_BOT_KEY