oa-componentbook 0.1.0

package/build/components/style/css/login.css

@@ -0,0 +1,335 @@
+#menu{
+    display: none;
+}
+.loginWrapper{
+    display: flex;
+    height: 100vh;
+    background: #fff;
+    align-items: center;
+    position: relative;
+}
+
+.loginWrapper .loginBg{
+    width: calc(100% - 50%);
+    height: 100%;
+    position: relative;
+}
+
+.loginWrapper .loginBg img{
+    height: 100%;
+    width: 100%;
+}
+
+.loginWrapper .loginBox{
+    width: 50%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+}
+
+.loginWrapper .loginBox .formBox{
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    margin: 0;
+    width: 100%;
+    max-width: 432px;
+    padding: 0;
+    height: 100%;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.loginWrapper .loginBox form{
+    padding: 0;
+    width: 100%;
+}
+
+.loginWrapper .loginBox form h1, .loginWrapper .loginBox h1{
+    font-size: 36px;
+    line-height: 45px;
+    color: #454545;
+    float: none;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.loginWrapper form .subdesc, .loginWrapper .loginBox .subdesc1{
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #454545;
+    padding: 6px 0 48px 0;
+}
+
+.loginWrapper .loginBox .subdesc1{
+    padding: 6px 0 24px 0;    
+}
+
+.loginWrapper form .fieldDivSet{
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 36px 0 0 0;
+    display: inline-block;
+    width: 100%;
+    position: relative;
+}
+
+.loginWrapper form .fieldDivSet .ant-form-item{
+    margin: 0;
+}
+
+.loginWrapper form .fieldDivSet:first-of-type{
+    margin: 0;
+}
+
+.loginWrapper form .fieldDivSet img{
+    position: absolute;
+    right: 12px;
+    bottom: 13px;
+}
+
+.loginWrapper form .fieldDivSet label{
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+    color: #454545;
+    width: 100%;
+    font-weight: normal;
+}
+
+.loginWrapper form .fieldDivSet input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #B3B3B3;
+    opacity: 1; /* Firefox */
+  }
+  
+  .loginWrapper form .fieldDivSet input:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: #B3B3B3;
+  }
+  
+  .loginWrapper form .fieldDivSet input::-ms-input-placeholder { /* Microsoft Edge */
+    color: #B3B3B3;
+  }
+
+.loginWrapper form .fieldDivSet input{
+    line-height: 1.5;
+    font-size: 14px;
+    border-radius: 4px;
+    padding: 12px;
+    outline: none;
+    background-color: #fff;
+    border: solid 1px #dcdcdc;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 4px 0 0 0;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: auto;
+    background-image: none;
+    -webkit-transition: all .3s;
+    transition: all .3s;
+}
+
+.loginWrapper form .fieldDivSet input[type=text]:focus, .loginWrapper form .fieldDivSet input[type=password]:focus {
+    border-color: #0282F0;
+    box-shadow: 0px 0px 4px #0282F0;
+}
+
+.loginWrapper form .fieldDivSet input.error{
+    border: 1px solid #E62A10;
+    box-shadow: 0px 0px 4px #E62A10;
+}
+
+.loginWrapper form .has-error .ant-form-explain{
+    font-size: 12px;
+    line-height: 18px;
+    padding: 5px 0 0 0;
+}
+
+.loginWrapper form .fieldDivSet .forgotLink{
+    display: block;
+    text-align: right;
+    margin: 4px 0 0 0;
+}
+
+.loginWrapper form .fieldDivSet .ant-form-item-with-help + a{
+    position: absolute;
+    right: 0;
+    bottom: -4px;
+    line-height: 20px;
+    color: #0282F0;
+    font-size: 14px;
+}
+
+.loginWrapper form .fieldDivSet .forgotLink:hover, .loginWrapper form .fieldDivSet .forgotLink:focus, .loginWrapper form .loginBack:hover, .loginWrapper form .loginBack:focus, .loginWrapper form .loginBack:hover, .loginWrapper form .loginBack:focus, .loginWrapper .loginBox .loginBackError:hover, .loginWrapper .loginBox .loginBackError:focus, .loginWrapper .formBox .loginBack:hover, .loginWrapper .formBox .loginBack:focus{
+    color: #40a9ff;
+    text-decoration: underline;
+}
+.loginWrapper form .loginBtn{
+    width: 100%;
+    background: #0282F0;
+    color: #fff;
+    height: 48px;
+    font-size: 16px;
+    line-height: 24px;
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+}
+
+.loginWrapper form .loginBtn:hover, .loginWrapper form .loginBtn:focus{
+    background: #40a9ff;
+    outline: none;
+}
+
+.loginWrapper .divedLine{
+    width: 36px;
+    height: 1px;
+    background: #DCDCDC;
+    margin: 30px auto;
+}
+
+.loginWrapper .googleBtn{
+    text-align: center;
+    display: flex;
+    justify-content: center;
+}
+
+.loginWrapper .loginBox .footer{
+    background: none;
+    position: relative;
+    z-index: 0;
+    text-align: center;
+}
+
+.loginWrapper .loginBox .footer p{
+    font-size: 14px;
+    line-height: 22px;
+    color: #7A7A7A;
+    padding: 5px 0 20px 0 ;
+}
+
+.loginWrapper form .loginBack, .loginWrapper .formBox .loginBack{
+    text-align: center;
+    margin: 35px auto 10px;
+    display: flex;
+    justify-content: center;
+    width: fit-content;
+    font-size: 14px;
+}
+
+.loginWrapper .loginBox .loginBackError{
+    font-size: 14px;
+    width: fit-content;
+}
+
+.loginWrapper form .visibleOff{
+    opacity: 0;
+}
+
+.loginWrapper .loginBox .successIcon{
+    margin: 0 0 24px 0;
+    display: flex;
+    justify-content: center;
+}
+
+.loginWrapper .successText{
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #45B448;
+}
+
+
+.passwordInfo{ width: 100%; position: absolute; border-radius: 2px; background: #fff; padding: 8px; top: 40px;
+    z-index: 99; 	box-shadow: 0 2px 8px 0 rgba(0,0,0,0.12);}
+
+    .passwordInfo:after {
+        bottom: 100%;
+        left: 20px;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-color: rgba(255, 255, 255, 0);
+        border-bottom-color: #ffffff;
+        border-width: 5px;
+        margin-left: -5px;
+    }
+
+.passwordInfo ul{ width: 100%;  margin: 0; list-style: none;}
+.passwordInfo ul li{ width: 100%; display: flex; margin:0; line-height: 18px; padding: 8px 0 0 0;}
+.passwordInfo ul li.green{color:#45B448}
+.passwordInfo ul li.red{color:#E62A10}
+.passwordInfo ul li:first-child{ margin: 0;}
+.passwordInfo ul li:before{ content: "\2022"; font-size: 30px; padding-right: 10px;}
+
+.activeSessionModal .ant-modal-content {
+    border-radius: 6px;
+    border: none;
+    box-shadow:none;
+}
+.activeSessionModal .ant-modal-title {
+    font-size: 20px;
+}
+
+
+.activeSessionModal .ant-modal-body {
+    padding: 14px 24px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.activeSessionModal .modal-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end; margin: 12px 0 0 0;
+}
+.activeSessionModal .modal-footer button{
+    margin: 0 0 0 10px;
+    background: #b4b4b4;
+    color: #fff;
+    height: 36px;
+    font-size: 14px;
+    line-height: 24px;
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+    width: 100px;
+}
+
+.activeSessionModal .modal-footer button + button{
+    background: #0282F0;
+}
+
+
+.ant-spin-spinning {
+    position: static;
+    display: inline-block;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
+}
+
+
+.actionDiv {
+    margin: 40px 0 0 0;
+}
+.ant-spin.ant-spin-show-text .ant-spin-text {
+    margin: 10px 0 0 0;
+    font-size: 14px;
+}

package/build/components/styles.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.keyValueDataViewStyles = exports.buttonStyles = void 0;
+const buttonStyles = {
+  button: {
+    color: 'white',
+    padding: '10px 20px',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    backgroundColor: '#a7a7a7',
+    width: '200px'
+  },
+  'button.primary': {
+    backgroundColor: '#007bff'
+  },
+  'button.secondary': {
+    backgroundColor: '#ff005d'
+  },
+  'button.small': {
+    width: '100px'
+  },
+  'button.medium': {
+    width: '200px'
+  },
+  'button.large': {
+    width: '300px'
+  },
+  'button:hover': {
+    backgroundColor: '#0056b3'
+  }
+};
+exports.buttonStyles = buttonStyles;
+const keyValueDataViewStyles = {
+  '.complaintDetails': {
+    display: 'flex'
+  },
+  '.complaintDetails span': {
+    width: '100%'
+  },
+  '.complaintDetails b': {
+    margin: '0 8px 4px 0',
+    minWidth: '140px'
+  },
+  '.mainDiv': {
+    padding: '48px 24px 0'
+  },
+  '.mainDiv h3': {
+    fontSize: '24px',
+    fontWeight: '500'
+  },
+  '.mainDiv h2': {
+    color: '#454545',
+    fontSize: '20px',
+    fontWeight: '500',
+    letterSpacing: '0',
+    lineHeight: '30px',
+    margin: '0 0 12px'
+  },
+  '.footerBtn': {
+    textAlign: 'right',
+    padding: '48px 0 0'
+  },
+  '.footerBtn button:last-child': {
+    margin: '0 0 0 12px'
+  },
+  '.complaintDetails button': {
+    width: '110px !important'
+  },
+  '.flexBody': {
+    display: 'flex'
+  },
+  '.detailCard': {
+    display: 'flex',
+    aligIitems: 'flex-start',
+    background: '#fff',
+    padding: '24px 16px',
+    border: '1px solid #DCDCDC',
+    borderRadius: '4px',
+    margin: '0 0 16px'
+  },
+  '.detailsSec': {
+    margin: '0 72px 0 0'
+  },
+  '.bgColor': {
+    padding: '8px',
+    background: '#EBEEF0'
+  },
+  '.headerSecStyles': {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '24px',
+    background: '#fff',
+    margin: '0 0 8px'
+  },
+  '.h2Styles': {
+    fontSize: '18px',
+    margin: '0 16px 0 0'
+  },
+  '.secondaryBtnStyles': {
+    margin: '0 0 0 12px'
+  },
+  '.detailsSec': {
+    margin: '0 72px 0 0'
+  },
+  '.detailsSec h6': {
+    color: '#6F7C87',
+    textTransform: 'uppercase',
+    padding: '0 0 8px',
+    fontSize: '10px',
+    fontWeight: 'bold',
+    letterSpacing: '1px',
+    lineHeight: '10px',
+    margin: '0'
+  },
+  '.detailsSec h5': {
+    color: '#6F7C87',
+    padding: '0 0 8px',
+    fontSize: '12px',
+    fontWeight: 'bold',
+    letterSpacing: '1px',
+    lineHeight: '10px',
+    margin: '0'
+  },
+  '.detailsDiv a': {
+    color: '#0282F0',
+    display: 'block',
+    padding: '2px 0 0',
+    fontSize: '12px',
+    letterSpacing: '0',
+    lineHeight: '20px'
+  },
+  '.walletTab': {
+    background: '#fff',
+    padding: '4px'
+  },
+  '.linkStyle': {
+    color: '#1890ff',
+    textDecoration: 'underline',
+    cursor: 'pointer'
+  }
+};
+exports.keyValueDataViewStyles = keyValueDataViewStyles;

package/build/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BasicQuestions", {
+  enumerable: true,
+  get: function get() {
+    return _basicQuestions.default;
+  }
+});
+Object.defineProperty(exports, "ComplaintDetails", {
+  enumerable: true,
+  get: function get() {
+    return _complaintDetail.default;
+  }
+});
+Object.defineProperty(exports, "CustomButton", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "DrawerDesign", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.default;
+  }
+});
+Object.defineProperty(exports, "KeyValueDataView", {
+  enumerable: true,
+  get: function get() {
+    return _KeyValueDataView.default;
+  }
+});
+Object.defineProperty(exports, "QuesAnsView", {
+  enumerable: true,
+  get: function get() {
+    return _QuesAnsView.default;
+  }
+});
+Object.defineProperty(exports, "ServiceDetailsTabView", {
+  enumerable: true,
+  get: function get() {
+    return _serviceDetailsTabView.default;
+  }
+});
+Object.defineProperty(exports, "TableDesign", {
+  enumerable: true,
+  get: function get() {
+    return _Table.default;
+  }
+});
+Object.defineProperty(exports, "TabsDesign", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.default;
+  }
+});
+Object.defineProperty(exports, "ViewDetailsDrawer", {
+  enumerable: true,
+  get: function get() {
+    return _viewMoreDetailsDrawer.default;
+  }
+});
+Object.defineProperty(exports, "WalletServiceDetails", {
+  enumerable: true,
+  get: function get() {
+    return _walletServiceDetails.default;
+  }
+});
+Object.defineProperty(exports, "buttonStyles", {
+  enumerable: true,
+  get: function get() {
+    return _styles.buttonStyles;
+  }
+});
+Object.defineProperty(exports, "keyValueDataViewStyles", {
+  enumerable: true,
+  get: function get() {
+    return _styles.keyValueDataViewStyles;
+  }
+});
+var _Button = _interopRequireDefault(require("./components/Button"));
+var _Drawer = _interopRequireDefault(require("./components/Drawer"));
+var _KeyValueDataView = _interopRequireDefault(require("./components/KeyValueDataView"));
+var _QuesAnsView = _interopRequireDefault(require("./components/QuesAnsView"));
+var _Table = _interopRequireDefault(require("./components/Table"));
+var _Tabs = _interopRequireDefault(require("./components/Tabs"));
+var _basicQuestions = _interopRequireDefault(require("./components/Wallet Service Details/basicQuestions"));
+var _complaintDetail = _interopRequireDefault(require("./components/Wallet Service Details/complaintDetail"));
+var _viewMoreDetailsDrawer = _interopRequireDefault(require("./components/Wallet Service Details/viewMoreDetailsDrawer"));
+var _serviceDetailsTabView = _interopRequireDefault(require("./components/Wallet Service Details/serviceDetailsTabView"));
+var _walletServiceDetails = _interopRequireDefault(require("./components/Wallet Service Details/walletServiceDetails"));
+var _styles = require("./components/styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "oa-componentbook",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Reusable components",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "files": [
+    "build",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@storybook/cli": "^7.3.2",
+    "antd": "^3.23.3",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-router-dom": "^5.3.4",
+    "styled-components": "^6.0.7"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.9",
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/preset-create-react-app": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "^7.3.2",
+    "@storybook/testing-library": "^0.2.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint-plugin-storybook": "^0.6.13",
+    "prop-types": "^15.8.1",
+    "react-scripts": "^5.0.1",
+    "storybook": "^7.3.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "rm -rf build && NODE_ENV=production babel src/lib --out-dir build --copy-files",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}