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

package/.eslintignore

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

package/.eslintrc.js

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

@@ -0,0 +1,45 @@
+test:
+  image: node:18
+  stage: test
+  only:
+    - merge_requests
+  script:
+    - npm install --progress=false --no-save
+    - npm run build
+    - npm run test
+
+cache:
+  paths:
+    - node_modules/
+    - public/
+
+pages:
+  image: node:18
+  script:
+    - npm install
+    - npm run build
+    - cp public/index.html public/404.html
+  artifacts:
+    paths:
+      - public
+  only:
+    - master
+
+publish:
+  stage: publish
+  only:
+    - tags
+  script:
+    - npm run ci-publish
+
+publish:
+  stage: publish
+  only:
+    - master
+  script:
+    - echo '//gitlab.com/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}' >> .npmrc
+    - echo '//gitlab.com/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}' >.npmrc
+    - echo '@oliasoft:registry=https://gitlab.com/api/v4/projects/${CI_PROJECT_ID}/packages/npm/' >>.npmrc
+    -
+    - npm config set -- '//gitlab.com/api/v4/projects/<your_project_id>/packages/npm/:_authToken' "<your_token>"
+    - npm publish --access public

package/.husky/pre-commit

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

package/.prettierignore

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

package/.prettierrc

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

package/.storybook/main.js

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

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

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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Oliasoft AS and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# React UI Library
+
+React UI Library is a collection of reusable UI components for use in React applications.
+
+For usage instructions and technical documentation, see the [Wiki](https://gitlab.com/oliasoft-open-source/react-ui-library/wikis/home).

package/babel.config.js

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

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

@@ -0,0 +1,9 @@
+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/package.json

@@ -0,0 +1,136 @@
+{
+  "name": "@oliasoft-open-source/react-ui-library",
+  "version": "1.0.0",
+  "description": "Reusable UI components for React projects",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run build:docs && npm run build:storybook",
+    "build:docs": "webpack --config webpack/webpack.prod.js",
+    "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",
+    "lint:check": "eslint \"**/*.{js,jsx}\"",
+    "lint:fix": "eslint --fix \"**/*.{js,jsx}\"",
+    "prettier:check": "prettier --check \"**/*.{js,jsx,json,css,less}\"",
+    "prettier:fix": "prettier --write \"**/*.{js,jsx,json,css,less}\"",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{js,jsx,json,css,less}": [
+      "prettier --write"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/oliasoft-open-source/react-ui-library.git"
+  },
+  "author": "Oliasoft AS and contributors",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://https://gitlab.com/oliasoft-open-source/react-ui-library/issues"
+  },
+  "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/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",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.24.2",
+    "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"
+  },
+  "peerDependencies": {
+    "react": "^17.0",
+    "react-dom": "^17.0"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.8.7",
+    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
+    "@minoru/react-dnd-treeview": "^1.6.1",
+    "classnames": "^2.3.1",
+    "core-js": "^3.17.3",
+    "expose-loader": "^3.0.0",
+    "immer": "^9.0.6",
+    "less-vars-to-js": "^1.3.0",
+    "lodash": "^4.17.21",
+    "memoize-one": "^5.2.1",
+    "normalize.css": "^8.0.1",
+    "prop-types": "^15.7.2",
+    "rc-slider": "^9.7.2",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-fast-compare": "^3.2.0",
+    "react-faux-dom": "^4.5.0",
+    "react-icons": "^4.2.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-keyboard-event-handler": "^1.5.4",
+    "react-laag": "^2.0.3",
+    "react-router-dom": "^5.3.0",
+    "react-svg": "^14.0.12",
+    "react-toastify": "^8.0.2",
+    "react-window": "^1.8.6",
+    "resize-observer-polyfill": "^1.5.1",
+    "styled-components": "^5.3.1"
+  }
+}