tenjin-ui-kit 0.2.80 → 0.2.87

package/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+build
+.dockerignore
+Dockerfile
+Dockerfile.prod
+storybook-static

package/.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

package/.storybook/preview.js

@@ -0,0 +1,11 @@
+import ".././src/App.css"
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package/Dockerfile

@@ -0,0 +1,17 @@
+# build environment
+FROM node:16-alpine as build
+WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
+COPY package.json ./
+COPY package-lock.json ./
+COPY . ./
+RUN npm install 
+RUN npm run build-storybook
+RUN npm run compile
+RUN npm version patch -m "CI patch version bump"
+RUN cp ./package.json ./dist
+RUN cp ./README.md ./dist
+RUN cd dist
+RUN npm publish
+# TEST COMMIT 2
+

package/Jenkinsfile

@@ -0,0 +1,62 @@
+pipeline {
+    agent {label 'tjui-kit'}
+
+
+    stages {
+        stage ("Build") {
+            steps {
+                dir("./") {
+                    sh 'npm install'
+                    sh 'npm run compile'
+                }
+            }
+        }
+        stage ("Upgrade version") {
+            steps {
+                dir("./") {
+                    sh 'git restore package-lock.json'
+                    sh 'git stash'
+                    sh 'npm version patch '
+                    sh 'git remote set-url origin https://vybhavkadam:glpat-Ee-CqdVnwzURCGPzFwys@gitlab.com/yethi/react/tenjin-ui-kit.git'
+                    sh 'git push origin HEAD:main --tags'
+                    //sh 'git push --tags'
+                }
+            }
+        } 
+
+        stage ("Publish library") {
+            steps {
+                dir("./") {
+                    sh 'cp ./package.json ./dist'
+                    sh 'cp ./README.md ./dist'
+                }
+
+                dir("./dist") {
+                    sh 'npm publish'
+                }
+            }
+        }
+
+        stage ("Build Storybook") {
+            steps {
+                dir("./") {
+                    sh 'npm run build-storybook'
+                }
+            }
+        }
+
+        stage ("Deploy Storybook") {
+            steps {
+                dir("./") {
+                    sh 'npx netlify deploy --auth xZ5gRrdcq6pPShzAcOtxCqD3e5MzwWxwBevsrQdyIl0 --site 9a55e91f-3c3e-4492-8d50-7f17ca87adeb --dir storybook-static --prod'
+                }
+            }
+        }
+         stage('CleanWorkspace') {
+            steps {
+                cleanWs()
+            }
+        }
+    }
+   
+}

package/dist/README.md

@@ -0,0 +1,13 @@
+# Tenjin UI Kit
+
+The Tenjin UI kit ships a set of pre-built components that can be used while building user interfaces for Tenjin.
+
+## Installation
+
+In the project directory, you can run:
+
+    npm install tenjin-ui-kit
+
+## Usage
+
+The [Tenjin UI Kit](https://tenjin-ui-kit.netlify.app) storybook gives clear documentation on how to use the Tenjin UI Kit.

package/dist/components/DragBox/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragBox = void 0;
+var _reactDnd = require("react-dnd");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var DragBox = function DragBox(_ref) {
+  var name = _ref.name;
+  console.log({
+    name: name
+  });
+  var _useDrag = (0, _reactDnd.useDrag)(function () {
+      return {
+        type: "box",
+        item: {
+          name: name
+        },
+        collect: function collect(monitor) {
+          return {
+            isDragging: monitor.isDragging(),
+            handlerId: monitor.getHandlerId()
+          };
+        }
+      };
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1];
+  var opacity = isDragging ? 0.4 : 1;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: drag,
+    style: {
+      opacity: opacity
+    },
+    "data-testid": "box"
+  }, name);
+};
+exports.DragBox = DragBox;

package/dist/components/Typo/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _default2 = _interopRequireDefault(require("../../themes/default"));
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var Typo = function Typo(props) {
+  var color = props.color,
+    fontWeight = props.fontWeight,
+    secondary = props.secondary,
+    variant = props.variant,
+    to = props.to;
+  var titleSize = {
+    1: _default2.default.spacing(3),
+    1.25: _default2.default.spacing(3.345),
+    1.5: _default2.default.spacing(4.5)
+  };
+  var title1Size = {
+    1: _default2.default.spacing(2.5),
+    1.25: _default2.default.spacing(3),
+    1.5: _default2.default.spacing(4)
+  };
+  var textSize = {
+    1: _default2.default.spacing(2),
+    1.25: _default2.default.spacing(2.5),
+    1.5: _default2.default.spacing(3.5)
+  };
+  var text2Size = {
+    1: _default2.default.spacing(1.75),
+    1.25: _default2.default.spacing(2.1),
+    1.5: _default2.default.spacing(2.8)
+  };
+  var text3Size = {
+    1: _default2.default.spacing(1.5),
+    1.25: _default2.default.spacing(1.8),
+    1.5: _default2.default.spacing(2.7)
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, function () {
+    switch (variant) {
+      case "title1":
+      case "h1":
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: titleSize[window.devicePixelRatio],
+          color: color ? color : secondary ? _default2.default.palette.grey.main : _default2.default.palette.text.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, titleSize[window.devicePixelRatio]);
+      case "title2":
+      case "h2":
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: title1Size[window.devicePixelRatio],
+          color: color ? color : secondary ? _default2.default.palette.grey.main : _default2.default.palette.text.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, title1Size[window.devicePixelRatio]);
+      case "text":
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: textSize[window.devicePixelRatio],
+          color: color ? color : secondary ? _default2.default.palette.grey.main : _default2.default.palette.text.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, textSize[window.devicePixelRatio]);
+      case "secondaryText":
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: textSize[window.devicePixelRatio],
+          color: color ? color : _default2.default.palette.grey.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, textSize[window.devicePixelRatio]);
+      case "text2":
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: text2Size[window.devicePixelRatio],
+          color: color ? color : secondary ? _default2.default.palette.grey.main : _default2.default.palette.text.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, text2Size[window.devicePixelRatio]);
+      case "secondaryText2":
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: text2Size[window.devicePixelRatio],
+          color: color ? color : _default2.default.palette.grey.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, text2Size[window.devicePixelRatio]);
+      case "link":
+        return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+          to: to,
+          style: {
+            textDecoration: "none"
+          }
+        }, /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: text2Size[window.devicePixelRatio],
+          color: _default2.default.palette.primary_link.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, text2Size[window.devicePixelRatio]));
+      case "text3":
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: text3Size[window.devicePixelRatio],
+          color: color ? color : secondary ? _default2.default.palette.grey.main : _default2.default.palette.text.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, text3Size[window.devicePixelRatio]);
+      case "secondaryText3":
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: text3Size[window.devicePixelRatio],
+          color: color ? color : _default2.default.palette.grey.main,
+          fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 600
+        }, props), props.children, text3Size[window.devicePixelRatio]);
+      default:
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
+          fontSize: _default2.default.spacing(3)
+        }, props), "Default Typo");
+    }
+  }());
+};
+Typo.propTypes = {
+  variant: _propTypes.default.oneOf(["title1", "h1", "title2", "h2", "text", "secondaryText", "text2", "secondaryText2", "link", "text3", "scondaryText3"]).isRequired,
+  color: _propTypes.default.string,
+  fontWeight: _propTypes.default.number,
+  secondary: _propTypes.default.string,
+  to: _propTypes.default.string
+};
+var _default = Typo;
+exports.default = _default;

package/{components → dist/components}/layout/index.js

@@ -13,6 +13,8 @@ var _main = _interopRequireDefault(require("./main"));
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 var _pageContent = _interopRequireDefault(require("./pageContent"));
 var _ProjectTopbar = _interopRequireDefault(require("./topBar/ProjectTopbar"));
+var _reactDnd = require("react-dnd");
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,7 +64,9 @@ var Layout = function Layout(_ref) {
       selectedSidebarKey: key
     }));
   };
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndHtml5Backend.HTML5Backend
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
     className: "tenjin-layout",
     id: id,
     sx: {
@@ -77,7 +81,7 @@ var Layout = function Layout(_ref) {
       setWindowTitle: setWindowTitle,
       setSelectedSidebarKey: setSelectedSidebarKey
     }
-  }, children));
+  }, children)));
 };
 Layout.defaultProps = {
   id: "wrapper"

package/{components → dist/components}/layout/sidebar/ProjectMenu.js

@@ -13,6 +13,7 @@ var _style = _interopRequireDefault(require("./style"));
 var _ = require("..");
 var _clsx3 = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/styles");
+var _DragBox = require("../../DragBox");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -28,7 +29,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ProjectMenu = function ProjectMenu(_ref) {
-  var groups = _ref.groups;
+  var groups = _ref.groups,
+    draggable = _ref.draggable;
   var classes = (0, _style.default)();
   var popupRef = (0, _react.useRef)(null);
   var navigate = (0, _reactRouterDom.useNavigate)();
@@ -171,7 +173,9 @@ var ProjectMenu = function ProjectMenu(_ref) {
       }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
         disableTypography: true,
         className: (0, _clsx3.default)((_clsx2 = {}, _defineProperty(_clsx2, classes.projectListText, true), _defineProperty(_clsx2, classes.selectedProjectMenuItemText, selectedSidebarKey === i.key), _clsx2))
-      }, i.display));
+      }, draggable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DragBox.DragBox, {
+        name: i.display
+      })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, i.display)));
     })), !collapsed && index < groups.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Divider, {
       sx: {
         height: "initial !important"
@@ -210,7 +214,9 @@ var ProjectMenu = function ProjectMenu(_ref) {
           handleClose();
           navigate(i.href);
         }
-      }, i.display);
+      }, draggable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DragBox.DragBox, {
+        name: i.display
+      })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, i.display));
     }))));
   }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 };

package/{components → dist/components}/layout/sidebar/index.js

@@ -15,6 +15,7 @@ var _FlatMenu = _interopRequireDefault(require("./FlatMenu"));
 var _GroupedMenu = _interopRequireDefault(require("./GroupedMenu"));
 var _ProjectMenu = _interopRequireDefault(require("./ProjectMenu"));
 var _style = _interopRequireDefault(require("./style"));
+var _DragBox = require("../../DragBox");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,7 +26,8 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var Sidebar = function Sidebar(_ref) {
   var _clsx;
   var children = _ref.children,
-    allowCollapse = _ref.allowCollapse;
+    allowCollapse = _ref.allowCollapse,
+    draggable = _ref.draggable;
   var classes = (0, _style.default)();
   var theme = (0, _material.useTheme)();
   var _useContext = (0, _react.useContext)(_.LayoutContext),

package/dist/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "tenjin-ui-kit",
+  "version": "0.2.87",
+  "repository": {
+    "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.2.1",
+    "@mantine/core": "^5.10.1",
+    "@mantine/hooks": "^5.10.1",
+    "@mantine/rte": "^5.10.1",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "^5.0.0-alpha.116",
+    "@mui/styles": "^5.11.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "aria-hidden": "^1.2.2",
+    "axios": "^0.26.0",
+    "clsx": "^1.2.1",
+    "d3-hierarchy": "^3.1.2",
+    "feather-icons": "^4.29.0",
+    "final-form": "^4.20.9",
+    "material-ui-popup-state": "^5.0.8",
+    "moment": "^2.29.4",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dropzone": "^14.2.3",
+    "react-feather": "^2.0.10",
+    "react-final-form": "^6.5.9",
+    "react-flow-renderer": "^10.3.17",
+    "react-icons": "^4.7.1",
+    "react-moment": "^1.1.3",
+    "react-scripts": "5.0.1",
+    "react-sortable-hoc": "^2.0.0",
+    "reactflow": "^11.6.1",
+    "storybook-react-context": "^0.6.0",
+    "styled-components": "^5.3.9",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "clean": "rimraf dist",
+    "compile": "npm run clean && cross-env NODE_ENV=production babel src/package --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.3",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/node-logger": "^6.5.15",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "cross-env": "^7.0.3",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1",
+    "rimraf": "^3.0.2",
+    "webpack": "^5.75.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1"
+  }
+}

package/{themes → dist/themes}/default.js

@@ -5,37 +5,61 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _material = require("@mui/material");
+var getFontSize = function getFontSize() {
+  var devicePixelRatio = window.devicePixelRatio;
+  if (devicePixelRatio >= 1 && devicePixelRatio < 1.25) {
+    return 16;
+  } else if (devicePixelRatio >= 1.25 && devicePixelRatio < 1.5) {
+    return 14;
+  } else if (devicePixelRatio >= 1.5) {
+    return 12;
+  } else {
+    return 40;
+  }
+};
+var getSpacing = function getSpacing() {
+  if (devicePixelRatio >= 1 && devicePixelRatio < 1.25) {
+    return 8;
+  } else if (devicePixelRatio >= 1.25 && devicePixelRatio < 1.5) {
+    return 6;
+  } else if (devicePixelRatio >= 1.5) {
+    return 4;
+  } else {
+    return 8;
+  }
+};
 var _default = (0, _material.createTheme)({
+  spacing: getSpacing(),
   components: {
     MuiButton: {
       defaultProps: {
-        variant: 'contained',
+        variant: "contained",
         disableRipple: true,
-        size: 'small'
+        size: "small"
       },
       styleOverrides: {
         root: {
-          textTransform: 'initial'
+          textTransform: "initial"
         }
       }
     },
     MuiAppBar: {
       styleOverrides: {
         root: {
-          height: '60px !important'
+          height: "60px !important"
         }
       }
     },
     MuiDivider: {
       styleOverrides: {
         root: {
-          height: '93% !important'
+          height: "93% !important"
         }
       }
     },
     MuiOutlinedInput: {
       defaultProps: {
-        size: 'small'
+        size: "small"
       }
     }
     // MuiInputBase: {
@@ -50,23 +74,23 @@ var _default = (0, _material.createTheme)({
   MuiAutocomplete: {
     styleOverrides: {
       root: {
-        padding: '0.5rem 0.75rem',
-        border: '1px solid black !important',
-        borderRadius: '0.25rem',
-        backgroundColor: 'white',
-        '& .MuiAutocomplete-input': {
-          padding: '0.5rem 0.75rem',
-          fontSize: '1rem',
-          border: '1px solid black !important'
+        padding: "0.5rem 0.75rem",
+        border: "1px solid black !important",
+        borderRadius: "0.25rem",
+        backgroundColor: "white",
+        "& .MuiAutocomplete-input": {
+          padding: "0.5rem 0.75rem",
+          fontSize: "1rem",
+          border: "1px solid black !important"
         }
       }
     },
     MuiInputLabel: {
       styleOverrides: {
         asterisk: {
-          color: '#db3131',
-          '&$error': {
-            color: '#db3131'
+          color: "#db3131",
+          "&$error": {
+            color: "#db3131"
           }
         }
       }
@@ -74,32 +98,32 @@ var _default = (0, _material.createTheme)({
   },
   overrides: {
     MuiCssBaseline: {
-      '@global': {
+      "@global": {
         html: {
-          'scroll-behavior': 'smooth',
-          height: '100vh'
+          "scroll-behavior": "smooth",
+          height: "100vh"
         },
         body: {
-          position: 'relative',
+          position: "relative",
           margin: 0,
-          height: '100vh',
-          color: '#000000',
-          backgroundColor: '#f4f7fc'
+          height: "100vh",
+          color: "#000000",
+          backgroundColor: "#f4f7fc"
         },
-        '*::-webkit-scrollbar': {
-          width: '6px'
+        "*::-webkit-scrollbar": {
+          width: "6px"
         },
         a: {
-          textDecoration: 'none',
-          color: '#44409A'
+          textDecoration: "none",
+          color: "#44409A"
         },
-        '*::-webkit-scrollbar-thumb': {
-          backgroundColor: '#e4e4e4',
-          borderRadius: '3px',
+        "*::-webkit-scrollbar-thumb": {
+          backgroundColor: "#e4e4e4",
+          borderRadius: "3px",
           opacity: 0.5
         },
-        '*::-webkit-scrollbar-track': {
-          background: 'transparent'
+        "*::-webkit-scrollbar-track": {
+          background: "transparent"
         }
       }
     }
@@ -141,84 +165,89 @@ var _default = (0, _material.createTheme)({
     // secondary: {
     //   main: "#BF1E1E",
     // },
+
     primary: {
-      main: '#44409A'
+      main: "#44409A"
     },
     primary_light: {
-      main: '#5B58A9'
+      main: "#5B58A9"
     },
     primary_dark: {
-      main: '#000050'
+      main: "#000050"
+    },
+    primary_link: {
+      main: "#44409a"
     },
     secondary: {
-      main: '#BF1E1E'
+      main: "#BF1E1E"
     },
     secondary_light: {
-      main: '#CC3F3F'
+      main: "#CC3F3F"
     },
     secondary_dark: {
-      main: '#951010'
+      main: "#951010"
     },
     success: {
-      main: '#2C7413'
+      main: "#2C7413"
     },
     success_light: {
-      main: '#5EA342'
+      main: "#5EA342"
     },
     success_dark: {
-      main: '#004700'
+      main: "#004700"
     },
     info: {
-      main: '#70BBFD'
+      main: "#70BBFD"
     },
     info_light: {
-      main: '#A6EDFF'
+      main: "#A6EDFF"
     },
     info_dark: {
-      main: '#358BCA'
+      main: "#358BCA"
     },
     error: {
-      main: '#BE1515'
+      main: "#BE1515"
     },
     error_light: {
-      main: '#F8533F'
+      main: "#F8533F"
     },
     error_dark: {
-      main: '#860000'
+      main: "#860000"
     },
     warning: {
-      main: '#EB9A31'
+      main: "#EB9A31"
     },
     warning_light: {
-      main: '#FFCB62'
+      main: "#FFCB62"
     },
     warning_dark: {
-      main: '#B46C00'
+      main: "#B46C00"
     },
     grey: {
-      main: '#7D7D7D'
+      main: "#7D7D7D"
     },
     grey_light: {
-      main: '#ACACAC'
+      main: "#ACACAC"
     },
     grey_dark: {
-      main: '#515151'
+      main: "#515151"
     },
     secondary_grey: {
-      main: '#D7E2F0'
+      main: "#D7E2F0"
     },
     white: {
-      main: '#ffffff'
+      main: "#ffffff"
     },
     default: {
-      main: '#7D7D7D'
+      main: "#7D7D7D"
     },
     text: {
-      main: '#000000'
+      main: "#000000"
     }
   },
   typography: {
-    fontFamily: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
+    fontFamily: ["-apple-system", "BlinkMacSystemFont", '"Segoe UI"', "Roboto", '"Helvetica Neue"', "Arial", "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(",")
+    // fontSize: getFontSize(),
   }
 });
 exports.default = _default;

package/{themes → dist/themes}/responsiveTheme.js

@@ -8,7 +8,7 @@ var _material = require("@mui/material");
 var getFontSize = function getFontSize() {
   var devicePixelRatio = window.devicePixelRatio;
   if (devicePixelRatio >= 1 && devicePixelRatio < 1.25) {
-    return 16;
+    return 14;
   } else if (devicePixelRatio >= 1.25 && devicePixelRatio < 1.5) {
     return 12;
   } else if (devicePixelRatio >= 1.5) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenjin-ui-kit",
-  "version": "0.2.80",
+  "version": "0.2.87",
   "repository": {
     "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
   },

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: