@pinuts/bsr-uikit-relaunch 0.0.3

package/dist/styles/variables/_gaps.scss

@@ -0,0 +1,26 @@
+// bsr-spacing-1x
+$base-gap: 4px;
+
+// default module gap large
+$module-gap-lg: 10 * $base-gap;
+
+// default module gap small
+$module-gap-sm: 5 * $base-gap;
+
+$grid-gutter-width: 20px;
+
+// Text Margins
+$default-text-margin-bottom: $base-gap * 10;
+$default-text-margin-bottom-sm: $base-gap * 8;
+
+$box-padding-inline-xs: $base-gap * 6;
+$box-padding-block-xs: $base-gap * 7.5;
+
+$box-padding-inline-s: $base-gap * 6;
+$box-padding-block-s: $base-gap * 10;
+
+$box-padding-inline-m: $base-gap * 10;
+$box-padding-block-m: $base-gap * 10;
+
+$box-padding-inline-l: $base-gap * 16;
+$box-padding-block-l: $base-gap * 12;

package/dist/styles/variables/_images.scss

@@ -0,0 +1,18 @@
+@use "sass:math";
+
+//  Aspect Ratio
+$aspect-ratio-16-9: math.div(16, 9);
+$aspect-ratio-4-3: math.div(4, 3);
+
+.aspect-16-9, .aspect-4-3 {
+    width: 100%;
+    object-fit: cover;
+}
+
+.aspect-16-9 {
+    aspect-ratio: $aspect-ratio-16-9;
+}
+
+.aspect-4-3 {
+    aspect-ratio: $aspect-ratio-4-3;
+}

package/dist/styles/variables/_responsive.scss

@@ -0,0 +1,23 @@
+/* - BS3 variables - */
+
+$screen-sm-min: 375px;
+$screen-sm-max: 767px;
+$screen-md-min: 768px;
+$screen-md-max: 1023px;
+$screen-lg-min: 1024px;
+$screen-lg-max: 1439px;
+$screen-xl-min: 1440px;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: $screen-sm-min,
+  md: $screen-md-min,
+  lg: $screen-lg-min,
+  xl: $screen-xl-min,
+);
+
+$container-max-widths: (
+  sm: $screen-md-min,
+  md: $screen-lg-min,
+  lg: $screen-xl-min,
+);

package/dist/styles/variables/_shadows.scss

@@ -0,0 +1,5 @@
+// box shadow
+$bsr-shadow-default: 0px 2px 12px 0px rgba(0, 0, 0, 0.10);
+$bsr-shadow-hover: 0px 2px 12px 0px rgba(0, 0, 0, 0.30);
+
+$bsr-shadow-iconbtn: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

package/dist/styles/variables/_variables.scss

@@ -0,0 +1,14 @@
+@import 'colors';
+@import 'gaps';
+@import 'responsive';
+@import 'shadows';
+@import 'borders';
+@import 'fonts';
+@import 'images';
+@import 'fonts';
+@import 'buttons';
+@import 'focus';
+
+$font-family-main: 'Manrope';
+$base-transition: all 0.2s ease-in;
+$transition-duration-base: 0.2s;

package/dist/styles/variables.scss

@@ -0,0 +1,75 @@
+@import './_colors.scss';
+
+// Fonts
+$font-univers: 'Univers', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !default;
+$font-simplebold: "Simple-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !default;
+$font-univers-cd: 'Univers-Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !default;
+$font-family-base: $font-univers-cd;
+$font-family-sans-serif: $font-univers;
+$font-family-monospace: $font-univers;
+
+// // breakpoints
+$screen-sm-min: 576px;
+$screen-md-min: 768px;
+$screen-lg-min: 992px;
+$screen-xl-min: 1200px;
+
+// Border Colors  
+$border-light: $hbs-schwarz-10 !default;
+$border-medium: $hbs-schwarz-30 !default;
+$border-dark: $hbs-schwarz !default;
+
+// Shadows
+$focus-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 5px rgba($hbs-blau, 0.35) !default;
+$focus-shadow-danger: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 5px rgba($hbs-pink, 0.35);
+$step-shadow: -1px -2px 1px -2px #FFFFFF, 0px 0px 0px 5px rgba($hbs-blau, 0.35);
+
+// $box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !default;
+
+//border-radius
+$border-radius: 1px;
+$border-radius-square: 3px;
+$border-radius-badge: 5px;
+$border-radius-rounded: 12px;
+
+//Input
+$input-bg: $white;
+$input-height: 40px;
+$input-border: 1px solid $border-dark;
+$input-focus-border-color: $hbs-schwarz; // possibly wrong? $black was undefined
+$input-border-radius: 1px;
+$input-placeholder-color: $hbs-schwarz;
+
+/////////// Aus UNT übernommen ggf. später anpassen //////////
+
+// // Timings
+// $timing: 0.2s cubic-bezier(0.25, 0.1, 0.25, 0.1) 0s !default;
+
+// $custom-select-border: $input-border;
+// $custom-select-bg: $input-bg;
+// $custom-select-border-radius: $input-border-radius;
+// $custom-select-focus-border-color: $input-focus-border-color;
+
+
+// $form-validation-states: (
+//   "valid": (
+//     "color": $form-feedback-valid-color,
+//     "icon": $form-feedback-icon-valid
+//   ),
+//   "invalid": (
+//     "color": $form-feedback-invalid-color,
+//     "icon": $form-feedback-icon-invalid
+//   )
+// );
+
+
+// $form-feedback-margin-top:          $form-text-margin-top;
+// $form-feedback-font-size:           $form-text-font-size;
+// $form-feedback-font-style:          $form-text-font-style;
+// $form-feedback-valid-color:         $success;
+// $form-feedback-invalid-color:       $hbs-pink;
+
+// $form-feedback-icon-valid-color:    $form-feedback-valid-color;
+// $form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
+// $form-feedback-icon-invalid-color:  $form-feedback-invalid-color;
+// $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

package/dist/utils/getUikitClassNames.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInputClassNames = exports.getFormControlClassNames = void 0;
+var _formBuilder = require("@pinuts/form-builder");
+var _formModule = _interopRequireDefault(require("../styles/form.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getInputClassNames = function (isInvalid, readOnly, disabled, className) {
+  let additionalClassNames = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  return _formBuilder.utils.getClassNames([isInvalid && _formModule.default.error, (readOnly || disabled) && 'read-only', ...additionalClassNames, className]);
+};
+exports.getInputClassNames = getInputClassNames;
+const getFormControlClassNames = function (isInvalid, readOnly, disabled, className) {
+  let additionalClassNames = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  return getInputClassNames(isInvalid, readOnly, disabled, className, [...additionalClassNames]);
+};
+exports.getFormControlClassNames = getFormControlClassNames;

package/dist/utils/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _getUikitClassNames = require("./getUikitClassNames.js");
+Object.keys(_getUikitClassNames).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getUikitClassNames[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getUikitClassNames[key];
+    }
+  });
+});

package/dist/utils/isWindowAvailable.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isWindowAvailable = exports.default = void 0;
+const isWindowAvailable = () => typeof window !== 'undefined' && typeof document !== 'undefined';
+exports.isWindowAvailable = isWindowAvailable;
+var _default = exports.default = isWindowAvailable;

package/dist/utils/objectHelpers.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setByPath = exports.getByPath = exports.default = void 0;
+/**
+ * Set a value recursive on an object by defining the path.
+ * Missing path elements will be created as Object.
+ *
+ * @param {Object} object Object the value should be set into.
+ * @param {String|Array} path  Dot-separated path to the target property (or the path elements as array).
+ * @param {*} value The value to set
+ * @function Objects.set
+ */
+const setByPath = (object, path, value) => {
+  if (!path) return;
+  const pathAr = Array.isArray(path) ? path : path.split('.');
+  for (let key = pathAr.shift(); key; key = pathAr.shift()) {
+    object = object[key] = pathAr.length ? object[key] || {} : value;
+  }
+};
+
+/**
+ * Read a value from an arbitrary object, following a dot-separated path through the properties.
+ *
+ * @param {Object} object the object to read
+ * @param {String|Array} path Dot-separated path to property containing the wanted value (or path elements as array).
+ * @return {*} undefined if not found
+ * @function Objects.get
+ */
+exports.setByPath = setByPath;
+const getByPath = (object, path) => {
+  if (!path) return;
+  const pathAr = Array.isArray(path) ? path : path.split('.');
+  let value = object;
+  for (let i = 0; i < pathAr.length; i++) {
+    value = value ? value[pathAr[i]] : undefined;
+  }
+  return value;
+};
+exports.getByPath = getByPath;
+var _default = exports.default = {};

package/notes.txt

@@ -0,0 +1,5 @@
+Funktioniert aktuell nur mit "@pinuts/form-builder": "0.8.3-eds-beta-9",
+Komplettes bootstrap kommt aus dem Modal und DropzoneUploadField mit.
+
+Fehlermeldung aus 
+Warning: Invalid argument supplied to oneOfType. Expected an array of check functions, but received undefined at index 1.

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@pinuts/bsr-uikit-relaunch",
+  "version": "0.0.3",
+  "private": false,
+  "description": "BSR UI-KIT Relaunch",
+  "main": "dist/index.js",
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.intra.pinuts.de/bsr/bsr-uikit-relaunch"
+  },
+  "keywords": [
+    "form",
+    "uikit",
+    "bsr"
+  ],
+  "scripts": {
+    "lint": "eslint \"src/**/*.{js,mjs,jsx,json}\" ",
+    "lint:fix": "eslint --fix \"src/**/*.{js,mjs,jsx,json}\" ",
+    "start": "DISABLE_ESLINT_PLUGIN=true  react-app-rewired start",
+    "build": "./node_modules/.bin/babel src --out-dir ./dist",
+    "analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json",
+    "test": "echo \"Error: no test specified\"",
+    "preversion": "yarn test",
+    "version": "yarn install && yarn run build  && git add -A",
+    "postversion": "",
+    "getSuccessorVersion": "getSuccessorVersion",
+    "unpublishVersions": "unpublishVersions",
+    "prepublishOnly": "webpack",
+    "prewatch": "node remove-peerdeps.js",
+    "watch": "NODE_ENV=development webpack --watch"
+  },
+  "peerDependencies": {
+    "@pinuts/form-builder": "0.8.12",
+    "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^6.11.0"
+  },
+  "dependencies": {
+    "@ariakit/react": "^0.4.11",
+    "@pinuts/form-builder": "0.8.12",
+    "@popperjs/core": "^2.11.7",
+    "bootstrap": "^5.3.2",
+    "dayjs": "^1.11.10",
+    "html-react-parser": "^5.1.10",
+    "i18next": "^22.4.14",
+    "react-bootstrap": "^2.7.4",
+    "react-dropzone": "^14.2.3",
+    "sanitize-html": "^2.13.0",
+    "uuid": "^10.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@pinuts/build-scripts": "^1.1.0",
+    "@pinuts/eslint-config-pinuts-react": "^2.0.1",
+    "babel-loader": "^9.1.2",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "i18next": "^22.4.14",
+    "npm": "^9.4.2",
+    "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-app-rewired": "^2.2.1",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
+    "react-json-pretty": "^2.2.0",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^6.11.0",
+    "react-scripts": "^5.0.1",
+    "sass": "^1.77.2",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.0.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/webpack.config.js

@@ -0,0 +1,99 @@
+const path = require('path');
+const packageConfig = require('./package.json');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const CopyPlugin = require('copy-webpack-plugin');
+
+// read package.json -> use peerDependencies as externals
+const externals = Object.keys(packageConfig.peerDependencies).map((dep) => {
+    return { [dep]: dep}
+});
+const devMode = process.env.NODE_ENV === 'development';
+
+const webpackCfg = {
+    mode: process.env.NODE_ENV || 'production',
+    entry: './src/index.js',
+    output: {
+        path: path.resolve('dist'),
+        filename: 'index.js',
+        libraryTarget: 'commonjs2'
+    },
+    externals,
+    plugins: [
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: 'src/styles',
+                    to: 'styles',
+                },
+            ],
+        }),
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.m?jsx?$/,
+                exclude: /(node_modules)/,
+                use: 'babel-loader'
+            },
+            {
+                test: /\.module\.s?[ac]ss$/i,
+                use: [
+                    { loader: 'style-loader' },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: {
+                                localIdentName: '[local]--[hash:base64:10]',
+                            }
+                        }
+                    },
+                    { loader: 'sass-loader' }
+                ]
+            },
+            {
+                test: /(?<!\.module)\.s?[ac]ss$/i,
+                use: [
+                    // Creates `style` nodes from JS strings
+                    'style-loader',
+                    // Translates CSS into CommonJS
+                    'css-loader',
+                    // Compiles Sass to CSS
+                    'sass-loader',
+                ]
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                use: [
+                    {
+                        loader: 'url-loader'
+                    }
+                ]
+            },
+            {
+                test: /\.svg$/,
+                use: [
+                    { loader: 'babel-loader' },
+                    {
+                        loader: 'react-svg-loader',
+                        options: {
+                            jsx: true,
+                            svgo: {
+                                plugins: [
+                                    {
+                                        removeViewBox: false,
+                                    },
+                                ],
+                            }
+                        },
+                    },
+                ],
+            },
+        ]
+    }
+}
+if (devMode) {
+    webpackCfg.devtool = 'inline-source-map';
+    webpackCfg.plugins.push(new BundleAnalyzerPlugin());
+}
+
+module.exports = webpackCfg;