tenjin-ui-kit 0.2.113 → 0.2.115

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,66 @@
+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 '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 config set //registry.npmjs.org/:_authToken=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'
+                    //sh 'export NPM_TOKEN=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'
+                    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/README.md

@@ -1,13 +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.
+# 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/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/{components → dist/components}/RightContext/index.css

@@ -1,20 +1,20 @@
-.contextContainer {
-  z-index: 1;
-  width: 100%;
-  height: 500px;
-  background: #673ab7;
-}
-.rightClick {
-  z-index: 12;
-  position: fixed;
-  background: rgb(240, 200, 1);
-}
-.menuElement {
-  color: #222222;
-  cursor: pointer;
-  padding: 17px 36px;
-}
-.menuElement:hover {
-  color: #fff;
-  background: #009688;
-}
+.contextContainer {
+  z-index: 1;
+  width: 100%;
+  height: 500px;
+  background: #673ab7;
+}
+.rightClick {
+  z-index: 12;
+  position: fixed;
+  background: rgb(240, 200, 1);
+}
+.menuElement {
+  color: #222222;
+  cursor: pointer;
+  padding: 17px 36px;
+}
+.menuElement:hover {
+  color: #fff;
+  background: #009688;
+}

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

@@ -53,11 +53,13 @@ function BreadCrumbs(props) {
         textDecoration: 'none',
         color: data !== null && data !== void 0 && data.active ? '#000000DE' : '#44409A',
         fontWeight: 500,
-        cursor: data.active !== true && 'pointer'
+        cursor: data.active !== true && 'pointer',
+        display: "flex"
       }
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
-        marginRight: '0.4rem'
+        marginRight: '0.4rem',
+        marginTop: "0.15rem"
       }
     }, data.icon), (data === null || data === void 0 ? void 0 : (_data$title = data.title) === null || _data$title === void 0 ? void 0 : _data$title.length) > 20 ? /*#__PURE__*/React.createElement(_material.Tooltip, {
       title: data === null || data === void 0 ? void 0 : data.title,

package/{components → dist/components}/browsingTestCaseLayout/DetailsViewLayout/DetailsViewHeader/index.js

@@ -11,12 +11,23 @@ var _breadCrumbs = _interopRequireDefault(require("../../../breadCrumbs"));
 var _default2 = _interopRequireDefault(require("../../../../themes/default"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var DetailsViewHeader = function DetailsViewHeader(props) {
-  var breadcrumbsData = props.breadcrumbsData;
+  var breadcrumbsData = props.breadcrumbsData,
+    component = props.component;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.ThemeProvider, {
     theme: _default2.default
-  }, /*#__PURE__*/_react.default.createElement(_material.CssBaseline, null), /*#__PURE__*/_react.default.createElement(_breadCrumbs.default, {
+  }, /*#__PURE__*/_react.default.createElement(_material.CssBaseline, null), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 6
+  }, " ", /*#__PURE__*/_react.default.createElement(_breadCrumbs.default, {
     crumbInfo: breadcrumbsData
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 6,
+    container: true,
+    justifyContent: "flex-end"
+  }, component))));
 };
 DetailsViewHeader.propTypes = {};
 var _default = DetailsViewHeader;

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

@@ -14,6 +14,7 @@ require("./style.css");
 var _material = require("@mui/material");
 var _bs = require("react-icons/bs");
 var _iconButton = _interopRequireDefault(require("../iconButton"));
+var _text = _interopRequireDefault(require("../text"));
 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; }
@@ -75,21 +76,47 @@ var BrowsingTestCaseLayout = function BrowsingTestCaseLayout(_ref) {
     ref: boxARef,
     elevation: 0,
     className: "leftWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "arrowButton"
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !expand ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: "2rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    style: {
+      color: "#44409A"
+    },
+    className: "verticalText",
+    semibold: true
+  }, "Test Repository")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children[0], children[1])))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: "-0.3rem"
+    }
   }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
     title: expand ? "Collapse" : "Expand",
-    icon: expand ? /*#__PURE__*/_react.default.createElement(_bs.BsArrowLeftCircle, null) : /*#__PURE__*/_react.default.createElement(_bs.BsArrowRightCircle, null),
+    icon: expand ? /*#__PURE__*/_react.default.createElement(_bs.BsArrowLeftCircle, {
+      style: {
+        width: "20px",
+        height: "20px"
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_bs.BsArrowRightCircle, {
+      style: {
+        width: "20px",
+        height: "20px"
+      }
+    }),
     onClick: function onClick() {
       return setExpand(!expand);
     }
-  })), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !expand ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    color: "#44409A",
-    className: "verticalText"
-  }, "Test Repository") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children[0], children[1])))), /*#__PURE__*/_react.default.createElement("div", {
+  }), " "), /*#__PURE__*/_react.default.createElement("div", {
     class: "handler",
     onMouseDown: handleMouseDown
-  }), /*#__PURE__*/_react.default.createElement(_material.Paper, {
+  })), /*#__PURE__*/_react.default.createElement(_material.Paper, {
     ref: boxARef,
     elevation: 0,
     className: "rightWrapper"

package/{components → dist/components}/browsingTestCaseLayout/style.css

@@ -1,82 +1,82 @@
-:root {
-  --box-width: 200px;
-}
-
-body {
-  margin: 40px;
-}
-
-.wrapper {
-  background-color: #fff;
-  color: #444;
-  display: flex;
-}
-
-.box {
-  background-color: #444;
-  color: #fff;
-  border-radius: 5px;
-  padding: 20px;
-  font-size: 12px;
-
-  box-sizing: border-box;
-
-  flex: 1 1 auto;
-}
-
-.handler {
-  width: 20px;
-  padding: 0;
-  cursor: ew-resize;
-  flex: 0 0 auto;
-}
-
-.handler::before {
-  content: "";
-  display: block;
-  width: 2px;
-  height: calc(100vh - 34px);
-  background: #c0c0c0;
-  margin: 0 auto;
-}
-
-.arrowButton {
-  display: flex;
-  justify-content: flex-end;
-  /* transition: 0.4s; */
-  width: 100%;
-}
-
-.verticalText {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  writing-mode: vertical-lr;
-  text-orientation: mixed;
-  transform: rotate(180deg);
-  font-size: 1.3rem;
-}
-
-.leftWrapper {
-  background-color: #fff;
-  color: black;
-  border-radius: 5px;
-  padding: 0rem 0.5rem;
-  font-size: 12px;
-  box-sizing: border-box;
-  flex: 1 1 auto;
-  min-width: var(--box-width);
-  flex-grow: 0;
-}
-
-.rightWrapper {
-  background-color: #fff;
-  color: black;
-  border-radius: 5px;
-  padding: 0rem 0.5rem;
-  font-size: 12px;
-  box-sizing: border-box;
-  flex: 1 1 auto;
-  min-width: var(--box-width);
-  flex-grow: 1;
-}
+:root {
+  --box-width: 200px;
+}
+
+body {
+  margin: 40px;
+}
+
+.wrapper {
+  background-color: #fff;
+  color: #444;
+  display: flex;
+}
+
+.box {
+  background-color: #444;
+  color: #fff;
+  border-radius: 5px;
+  padding: 20px;
+  font-size: 12px;
+
+  box-sizing: border-box;
+
+  flex: 1 1 auto;
+}
+
+.handler {
+  width: 20px;
+  padding: 0;
+  cursor: ew-resize;
+  flex: 0 0 auto;
+}
+
+.handler::before {
+  content: "";
+  display: block;
+  width: 2px;
+  height: calc(100vh - 34px);
+  background: #c0c0c0;
+  margin: 0 auto;
+}
+
+.arrowButton {
+  display: flex;
+  justify-content: flex-end;
+  /* transition: 0.4s; */
+  width: 100%;
+}
+
+.verticalText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+  font-size: 1.3rem;
+}
+
+.leftWrapper {
+  background-color: #fff;
+  color: black;
+  border-radius: 5px;
+  padding: 0rem 0.5rem;
+  font-size: 12px;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: var(--box-width);
+  flex-grow: 0;
+}
+
+.rightWrapper {
+  background-color: #fff;
+  color: black;
+  border-radius: 5px;
+  padding: 0rem 0.5rem;
+  font-size: 12px;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: var(--box-width);
+  flex-grow: 1;
+}

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

@@ -30,7 +30,8 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ProjectMenu = function ProjectMenu(_ref) {
   var groups = _ref.groups,
-    draggable = _ref.draggable;
+    draggable = _ref.draggable,
+    title = _ref.title;
   var classes = (0, _style.default)();
   var popupRef = (0, _react.useRef)(null);
   var navigate = (0, _reactRouterDom.useNavigate)();
@@ -95,10 +96,11 @@ var ProjectMenu = function ProjectMenu(_ref) {
     className: classes.projectMenuMainWrapper
   }, /*#__PURE__*/_react.default.createElement("div", null, !collapsed && /*#__PURE__*/_react.default.createElement(_material.Typography, {
     className: classes.projectMenuHeader,
-    fontWeight: 600,
-    marginBottom: "0.5rem",
+    fontWeight: 600
+    // marginBottom="0.5rem"
+    ,
     marginTop: "1rem"
-  }, "TENJIN 4.0 Release")), /*#__PURE__*/_react.default.createElement("div", null, groups.map(function (group, index) {
+  }, title)), /*#__PURE__*/_react.default.createElement("div", null, groups.map(function (group, index) {
     var _ref2, _group$items$filter$, _group$items$filter$2, _clsx, _ref3, _group$groupName, _group$groupName2;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: group.groupName

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

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx2 = _interopRequireDefault(require("clsx"));
 var _react = _interopRequireDefault(require("react"));
 var _style = _interopRequireDefault(require("./style"));
-var _excluded = ["className", "sx", "children", "loading", "fullHeight"];
+var _excluded = ["className", "sx", "children", "loading", "fullHeight", "position"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
@@ -25,15 +25,20 @@ var Paper = function Paper(_ref) {
     children = _ref.children,
     loading = _ref.loading,
     fullHeight = _ref.fullHeight,
+    position = _ref.position,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _style.default)();
   return /*#__PURE__*/_react.default.createElement(_material.Paper, {
-    className: (0, _clsx2.default)((_clsx = {}, _defineProperty(_clsx, classes.paper, true), _defineProperty(_clsx, classes.fullHeight, fullHeight), _defineProperty(_clsx, className, true), _clsx)),
+    className: (0, _clsx2.default)((_clsx = {}, _defineProperty(_clsx, classes.paper, true), _defineProperty(_clsx, classes.fullHeight, fullHeight), _defineProperty(_clsx, className, true), _defineProperty(_clsx, classes[position], true), _clsx)),
     sx: sx
   }, loading ? /*#__PURE__*/_react.default.createElement(_loader.default, null) : children);
 };
 Paper.propTypes = {
-  loading: _propTypes.default.bool
+  loading: _propTypes.default.bool,
+  position: _propTypes.default.oneOf(["static", "relative", "fixed", "absolute", "sticky"])
+};
+Paper.defaultProps = {
+  position: "static"
 };
 var _default = Paper;
 exports.default = _default;

package/{components → dist/components}/paper/style.js

@@ -13,6 +13,21 @@ var _default = (0, _styles.makeStyles)(function (theme) {
     },
     fullHeight: {
       height: "100%"
+    },
+    relative: {
+      position: "relative"
+    },
+    fixed: {
+      position: "fixed"
+    },
+    static: {
+      position: "static"
+    },
+    sticky: {
+      position: "sticky"
+    },
+    absolute: {
+      position: "absolute"
     }
   };
 });

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

@@ -46,7 +46,7 @@ var Text = function Text(_ref) {
   var theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
     variant: variant === "title" ? "h6" : variant === "subtitle" ? "body2" : "body1",
-    fontWeight: bold ? "bold" : semibold ? 600 : "inherit",
+    fontWeight: bold ? "bold" : semibold || variant === "title" ? 600 : "inherit",
     color: link ? "primary" : getColor(color, theme)
   }, rest, {
     sx: _objectSpread({