From a7ada70f6c73b4695580fcf31df45caa0cc54e05 Mon Sep 17 00:00:00 2001 From: Kaushik Shetty Date: Mon, 21 Aug 2023 17:21:44 +0530 Subject: [PATCH 1/2] chore: update readme and blueprint --- .github/readme/blueprint.md | 4 + README.md | 46 +- blueprint.json | 4 +- lib/index.js | 1 + lib/ui-extension-sdk.css | 1610 +++++++++++++++++++++++++++++++++++ package-lock.json | 504 ++++++++++- package.json | 6 +- webpack.config.js | 96 ++- 8 files changed, 2189 insertions(+), 82 deletions(-) create mode 100644 lib/ui-extension-sdk.css diff --git a/.github/readme/blueprint.md b/.github/readme/blueprint.md index f4d8ae9e..bc5ce263 100644 --- a/.github/readme/blueprint.md +++ b/.github/readme/blueprint.md @@ -64,12 +64,16 @@ Some of the examples of custom widget extensions are: - [**Optimizely Experiments**](https://github.com/contentstack/extensions/tree/master/optimizely-experiments) - Lets you retrieve and display Optimizely Experiments and their details in your entry. +- [**Developer Tools**](https://github.com/contentstack/extensions/tree/master/developer-tools) - This widget extension provides developers with quick tools (API endpoint, JSON, etc.) to work with an entry or all entries of a content type and do a lot more. + ### Dashboard Widgets Some of the examples of the dashboard widget extensions are: - [**Google Analytics**](https://github.com/contentstack/extensions/tree/master/dashboard-widget-google-analytics) - Displays the traffic analysis and statistics of your site on the stack dashboard. +- [**Content Type Visualizer**](https://github.com/contentstack/extensions/tree/master/content-type-visualizer) - Content Type Visualizer Dashboard Widget offers a graphical representation of all content types, along with their fields, in a particular stack. + ## Using Contentstack styles Extensions are rendered within an iframe, you will need to include the ui-extension-sdk.min.css library within your custom extension in order to use any of the styles provided by Contentstack. diff --git a/README.md b/README.md index 0d2831ae..71764c25 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ - -[](#contentstack-extensions-sdk) - + +[](#contentstack-extensions-sdk) + # Contentstack Extensions SDK The Extensions SDK allows you to extend Contentstack’s UI by helping you create Custom Fields, Custom Widgets, and Dashboard Widgets. @@ -13,24 +13,24 @@ The Extensions SDK allows you to extend Contentstack’s UI by helping you creat This SDK overview document introduces you to the concept of custom extensions. - -[](#getting-started) - + +[](#getting-started) + ## Getting started Include the compiled version of the extension client library by adding the following line to your application. ```html ``` - -[](#extensions-examples) - + +[](#extensions-examples) + ## Extensions examples ### Custom Fields @@ -73,7 +73,7 @@ Some of the examples of custom widget extensions are: - [**Optimizely Experiments**](https://github.com/contentstack/extensions/tree/master/optimizely-experiments) - Lets you retrieve and display Optimizely Experiments and their details in your entry. -- [**Developer Tools**](https://github.com/contentstack/extensions/tree/master/developer-tools) - This widget extension provides developers with quick tools (API endpoint, JSON, etc.) to work with an entry or all entries of a content type and do a lot more. +- [**Developer Tools**](https://github.com/contentstack/extensions/tree/master/developer-tools) - This widget extension provides developers with quick tools (API endpoint, JSON, etc.) to work with an entry or all entries of a content type and do a lot more. ### Dashboard Widgets @@ -81,11 +81,11 @@ Some of the examples of the dashboard widget extensions are: - [**Google Analytics**](https://github.com/contentstack/extensions/tree/master/dashboard-widget-google-analytics) - Displays the traffic analysis and statistics of your site on the stack dashboard. +- [**Content Type Visualizer**](https://github.com/contentstack/extensions/tree/master/content-type-visualizer) - Content Type Visualizer Dashboard Widget offers a graphical representation of all content types, along with their fields, in a particular stack. -[](#using-contentstack-styles) - -- [**Content Type Visualizer**](https://github.com/contentstack/extensions/tree/master/content-type-visualizer) - Content Type Visualizer Dashboard Widget offers a graphical representation of all content types, along with their fields, in a particular stack. - + +[](#using-contentstack-styles) + ## Using Contentstack styles Extensions are rendered within an iframe, you will need to include the ui-extension-sdk.min.css library within your custom extension in order to use any of the styles provided by Contentstack. @@ -97,24 +97,24 @@ Include the CSS file in your extension code as follows: rel="stylesheet" type="text/css" href="https://unpkg.com/@contentstack/ui-extensions-sdk/dist/ui-extension-sdk.css" - integrity="sha512-YFrH8bTpkhIRTf8jgGmJDWvd56LA9GnRzirfMr/K78ldxsyrfedaMxMCZMC9A9d0LzuVFhkkHWo10HWEoAgjjg==" + integrity="sha512-yPPI/jWiqPr0HIh+1A2QPP5p58sSYqbPoBykxIuBckT1vzGwNbrOmwYM03qGI4ffnxd7q4kkoDys0kdZzxYn9A==" crossorigin="anonymous" /> ``` For more information on styling your extension, refer to our [style guide](https://www.contentstack.com/docs/extensions/style-guide/). - -[](#more-information) - + +[](#more-information) + ## More information - [Extensions SDK API reference](https://github.com/contentstack/ui-extensions-sdk/blob/2.2.0/docs/ui-extensions-api-reference.md) - [Extensions documentation ](https://www.contentstack.com/docs/guide/extensions) - -[](#license) - + +[](#license) + ## License Licensed under [MIT](https://opensource.org/licenses/MIT). diff --git a/blueprint.json b/blueprint.json index 4d6693b7..c75968a7 100644 --- a/blueprint.json +++ b/blueprint.json @@ -6,7 +6,7 @@ }, "line": "none", "subresourceIntegrity": { - "js": "sha512-ARbdkPGeszZufhclyJadi58JefJ/fRuVOjAXp1QKwGB5m2XUptmzQKUMeg/gptKQQux6Rba1xX7NrR9mL9eAZQ==", - "css": "sha512-YFrH8bTpkhIRTf8jgGmJDWvd56LA9GnRzirfMr/K78ldxsyrfedaMxMCZMC9A9d0LzuVFhkkHWo10HWEoAgjjg==" + "js": "sha512-LMktiFAj7j/AUFctMlgY8qmLrLIQVctwwCsnCXIWnvgF9JlanilvFbZxOCtPNB5eO3vp2Nhw9ED1UsWa+ltSvQ==", + "css": "sha512-yPPI/jWiqPr0HIh+1A2QPP5p58sSYqbPoBykxIuBckT1vzGwNbrOmwYM03qGI4ffnxd7q4kkoDys0kdZzxYn9A==" } } diff --git a/lib/index.js b/lib/index.js index 14f53a38..b434fd78 100755 --- a/lib/index.js +++ b/lib/index.js @@ -1,6 +1,7 @@ import Extension from './extension.js'; import postRobot from 'post-robot'; import { version } from '../package.json'; +import './ui-extension-sdk.css'; postRobot.CONFIG.LOG_LEVEL = 'error'; diff --git a/lib/ui-extension-sdk.css b/lib/ui-extension-sdk.css new file mode 100644 index 00000000..6bb9187e --- /dev/null +++ b/lib/ui-extension-sdk.css @@ -0,0 +1,1610 @@ +/* Contentstack Widgets */ + +/*font family*/ + +@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css'); +@font-face { + font-family: proximaNovaRegular; + src: url(https://new-static.contentstack.io/fonts/ProximaNova-Regular.otf) +} + +@font-face { + font-family: proximaNoveBold; + src: url(https://new-static.contentstack.io/fonts/ProximaNova-Bold.otf) +} + +@font-face { + font-family: proximaNovaSemiBold; + src: url(https://new-static.contentstack.io/fonts/ProximaNova-Semibold.otf) +} + +@font-face { + font-family: ProximaNovaRegularItalic; + src: url(https://new-static.contentstack.io/fonts/ProximaNova-RegularItalic.otf) +} + +@font-face { + font-family: ProximaNovaLight; + src: url(https://new-static.contentstack.io/fonts/ProximaNova-Light.otf) +} + +/* Defaults */ + +html, +body { + font-family: "proximaNovaRegular", Arial, Helvetica, Sans-Serif; + font-size: 13px; + box-sizing: border-box; + line-height: 1.5; + color: #748590; + margin: 0; +} + +*:focus { + outline: 0px !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + -ms-box-shadow: none !important; + -o-box-shadow: none !important; + box-shadow: none !important; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +p, +div, +a { + word-wrap: break-word; +} + +a:hover { + text-decoration: none; + color: #1da6a1; +} + +a:focus { + color: #23bab5; +} + +input, +button, +textarea { + font-family: "proximaNovaRegular", Arial, Helvetica, Sans-Serif; +} + +a { + color: #23bab5; + cursor: pointer; +} + +* { + margin: 0; + padding: 0; +} + +::-webkit-file-upload-button { + cursor: pointer; +} + +input[type=file] { + cursor: pointer; + font-size: 23px; + padding: 0; +} + +ul { + margin: 0px; + padding: 0px; +} + +ul li { + list-style: none; +} + +h1 { + font-size: 22px; + font-family: ProximaNovaLight; +} + +h2 { + font-size: 20px; +} + +h3 { + font-size: 16px; +} + +h4 { + font-size: 14px; +} + +h5 { + font-size: 12px; +} + +h6 { + font-size: 11px; +} + +h2, +h3, +h4, +h5, +h6 { + font-family: proximaNovaSemiBold; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0px; +} + +p { + font-size: 14px; + line-height: 20px; + margin-bottom: 25px; +} + +label { + font-weight: normal; +} + +.clearfix:after, +.clear { + clear: both; +} + +.font-bold { + font-family: 'proximaNoveBold'; +} + +.font-semi-bold { + font-family: 'proximaNovaSemiBold'; +} + +.flex { + display: flex; +} + +.collapse { + display: none !important; +} + +.collapse.in { + display: block !important; +} + +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} + +.white-text { + color: #fff; +} + +.left { + float: left; +} + +.right { + float: right; +} + +.center { + text-align: center; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.vertical-center { + position: absolute; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + top: 50%; +} + +/*Forms and other controls*/ + +.cs-text-box::-webkit-input-placeholder { + color: #aabac4; +} + +.cs-text-box::-moz-placeholder { + color: #aabac4; +} + +.cs-text-box:-ms-input-placeholder { + color: #aabac4; +} + +.cs-text-box { + font-size: 14px; + border: 1px solid #e6eced; + height: 35px; + color: #748590; + padding: 8px 10px; + background-color: #f7fbfc; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.cs-text-box:focus { + outline: 0; + border-color: #bbddeb; + color: #748590; +} + +.cs-text-box:disabled { + color: #a5b0b3; + border-color: rgba(230, 236, 237, 0.15); +} + +.cs-text-box.error { + color: #f18183; + background-color: #fef5f5; + border-color: #fac8c8; +} + +.cs-form-group { + margin-bottom: 25px; +} + +.cs-form-group textarea.cs-text-box { + min-height: 90px; + resize: none; +} + +.cs-form-group .field-label { + display: block; + margin-bottom: 8px; + font-size: 14px; +} + +.cs-form-group .invalid { + display: block; + font-size: 12px; + color: #F77D7A; + text-align: left; + padding-top: 6px; +} + +.cs-form-group .has-error { + outline: 0; + border-color: #F6C9CE !important; + background-color: #FFF5F6 !important; +} + +.cs-form-group .field-label .mandatory { + color: #ea3c3c; + font-size: 13px; +} + +.cs-form-group .field-label .mandatory-align { + margin-left: 2px; +} + +.cs-form-group.search-box { + position: relative; + border: 0px; +} + +.cs-form-group.search-box .cs-text-box { + padding-left: 20px; + border: 0px; + color: #b7b7b7; +} + +.cs-form-group.search-box .cs-text-box::-webkit-input-placeholder { + color: #aabac4; + font-family: 'ProximaNovaRegularItalic'; +} + +.cs-form-group.search-box .cs-text-box::-moz-placeholder { + color: #aabac4; + font-family: 'ProximaNovaRegularItalic'; +} + +.cs-form-group.search-box .cs-text-box::-ms-input-placeholder { + color: #aabac4; + font-family: 'ProximaNovaRegularItalic'; +} + +.cs-form-group.search-box i { + position: absolute; + left: 0px; + top: 8px; + color: #63747f; +} + +.cs-form-group.search-box i.icon-remove { + left: auto; + top: 10px; + right: 0; + cursor: pointer; +} + +.cs-checkbox input[type=checkbox].cs, +.cs-checkbox input[type=radio].cs { + visibility: hidden; + position: absolute; + z-index: 20; + width: 18px; + height: 18px; +} + +.cs-checkbox .lbl { + color: #748590; +} + +.cs-checkbox input[type=radio].cs+span { + position: relative; + display: inline-block; + min-height: 18px; + min-width: 18px; + cursor: pointer; +} + +.cs-checkbox input[type=checkbox].cs+.lbl, +.cs-checkbox input[type=radio].cs+span { + position: relative; + display: inline-block; + min-height: 18px; + min-width: 18px; + cursor: pointer; +} + +.cs-checkbox input[type=checkbox].cs:checked+.lblnew::after, +.cs-checkbox input[type=radio].cs:checked+.lbl::before { + display: inline-block; + content: '\f00c'; + background-color: transparent; +} + +.cs-checkbox input[type=checkbox].cs:checked+.lbl::before, +.cs-checkbox input[type=radio].cs:checked+.lbl::before { + display: inline-block; + content: '\f00c'; + background-color: transparent; +} + +.cs-checkbox input[type=checkbox].cs+.lbl::before { + cursor: pointer; + font-family: fontAwesome; + font-weight: 400; + font-size: 12px; + color: #25c2a3; + content: "\a0"; + background-color: #dfeaec; + border-radius: 0; + display: inline-block; + text-align: center; + height: 15px; + line-height: 14px; + min-width: 15px; + margin-right: 8px; + position: relative; + top: -1px; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + margin-top: 1.4px; +} + +.cs-checkbox input[type=radio].cs+.lbl::before { + cursor: pointer; + font-family: fontAwesome; + font-weight: 400; + font-size: 12px; + color: #25c2a3; + content: "\a0"; + background-color: #dfeaec; + border-radius: 0; + display: inline-block; + text-align: center; + height: 15px; + line-height: 14px; + min-width: 15px; + margin-right: 8px; + position: relative; + top: -1px; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.cs-checkbox .cs:hover+span:before { + background: #dfeaec !important; +} + +.cs-checkbox input[type=radio].cs:disabled+.lbl::before { + box-shadow: none !important; + color: #748590; + cursor: default; +} + +.cs-checkbox input[type=checkbox].cs:disabled+.lblnew::after { + box-shadow: none !important; + color: #748590; + cursor: not-allowed; +} + +.cs-checkbox input[type=checkbox].cs:disabled+.lbl::before, +.cs-checkbox input[type=radio].cs:disabled+.lbl::before { + box-shadow: none !important; + color: #748590; + cursor: default; +} + +.cs-checkbox label { + margin: 0px; +} + +.cs-checkbox .cs { + margin: 0px; +} + +.cs-checkbox input[type=radio].cs+.lbl:before { + -webkit-border-radius: 50% !important; + -moz-border-radius: 50% !important; + border-radius: 50% !important; + -webkit-background-clip: padding-box !important; + -moz-background-clip: padding !important; + background-clip: padding-box !important; + height: 14px !important; + min-width: 14px !important; + font-size: 5px !important; + content: "\a0"; + top: -3px !important; + border: 1px solid #dfeaec; +} + +.cs-checkbox input[type=radio].cs:checked+.lbl::before { + content: "\f111" !important; + border: 1px solid #25c2a3; + background: transparent !important; + color: #25c2a3 !important; +} + +.cs-checkbox input[type=radio].cs:hover+span:before { + border: 1px solid #dfeaec; + color: #748590; + content: "\f111" !important; +} + +.cs-checkbox input[type=radio].cs:disabled+.lbl::before { + border-color: #748590 !important; +} + +.cs-checkbox input[type=checkbox].cs+.lblnew::after { + cursor: pointer; + font-family: fontAwesome; + font-weight: 400; + font-size: 12px; + color: #25c2a3; + content: "\a0"; + background-color: #dfeaec; + border-radius: 0; + display: inline-block; + text-align: center; + height: 15px; + line-height: 19px; + min-width: 15px; + position: relative; + top: 8px; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + float: right; + margin-top: 1.4px; +} + +/* Buttons */ + +.btn[disabled] { + cursor: default !important; + opacity: 0.65; +} + +.btn { + padding: 6px 20px; + cursor: pointer; + border-radius: 3px; + display: inline-block; + padding: 6px 12px; + font-size: 14px; + font-weight: 400; + line-height: 1.42857143; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + border: 1px solid transparent; +} + +.btn i { + margin-right: 5px; +} + +.btn:focus, +.btn:hover, +.btn:active { + outline: 0px !important; + -webkit-box-shadow: none; + -moz-box-shadow: none; + -ms-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; +} + +.btn.btn-large-90 { + min-width: 90px; +} + +.btn.disabled { + background: #f5fbfc; + color: #c4d1d5; + border-color: #edf1f2; +} + +.cs-btn-success { + background-color: #25c2a3; + color: #ffffff; +} + +.cs-btn-success:hover, +.cs-btn-success:focus { + background-color: #25bd9f; + color: #ffffff; +} + +.cs-btn-success .icon-external-link { + vertical-align: text-bottom; +} + +.cs-btn-error { + background-color: #DA384C; + color: #ffffff; +} + +.cs-btn-error:hover, +.cs-btn-error:focus { + background-color: #d84355; + color: #ffffff; +} + +.cs-btn-warning { + background-color: #f6686a; + color: #ffffff; +} + +.cs-btn-warning i { + margin: 0px; + color: #ffffff; +} + +.cs-btn-warning:hover { + background-color: #f06567; +} + +.cs-btn-warning:hover i { + color: #ffffff; +} + +.cs-btn-transparent { + background-color: transparent; + color: #748590 !important; + margin-right: 0px; +} + +.cs-btn-primary { + border: 1px solid #d1dfe2; + background: #fff; + color: #748590 !important; + white-space: normal; +} + +.cs-btn-primary:hover { + color: #7f919d !important; + border-color: #c6d4d7; +} + +.cs-btn-primary .icon-external-link { + vertical-align: text-bottom; +} + +.cs-btn-circle { + border-radius: 30px; + border: 1px solid #25c2a3; + padding: 5px 15px; + position: relative; + color: #25c2a3; + background: #ffffff; +} + +/* Dynamic Width*/ + +.w-1 { + width: 1%; +} + +.w-2 { + width: 2%; +} + +.w-3 { + width: 3%; +} + +.w-4 { + width: 4%; +} + +.w-5 { + width: 5%; +} + +.w-6 { + width: 6%; +} + +.w-7 { + width: 7%; +} + +.w-8 { + width: 8%; +} + +.w-9 { + width: 9%; +} + +.w-10 { + width: 10%; +} + +.w-11 { + width: 11%; +} + +.w-12 { + width: 12%; +} + +.w-13 { + width: 13%; +} + +.w-14 { + width: 14%; +} + +.w-15 { + width: 15%; +} + +.w-16 { + width: 16%; +} + +.w-17 { + width: 17%; +} + +.w-18 { + width: 18%; +} + +.w-19 { + width: 19%; +} + +.w-20 { + width: 20%; +} + +.w-21 { + width: 21%; +} + +.w-22 { + width: 22%; +} + +.w-23 { + width: 23%; +} + +.w-24 { + width: 24%; +} + +.w-25 { + width: 25%; +} + +.w-26 { + width: 26%; +} + +.w-27 { + width: 27%; +} + +.w-28 { + width: 28%; +} + +.w-29 { + width: 29%; +} + +.w-30 { + width: 30%; +} + +.w-31 { + width: 31%; +} + +.w-32 { + width: 32%; +} + +.w-33 { + width: 33%; +} + +.w-34 { + width: 34%; +} + +.w-35 { + width: 35%; +} + +.w-36 { + width: 36%; +} + +.w-37 { + width: 37%; +} + +.w-38 { + width: 38%; +} + +.w-39 { + width: 39%; +} + +.w-40 { + width: 40%; +} + +.w-41 { + width: 41%; +} + +.w-42 { + width: 42%; +} + +.w-43 { + width: 43%; +} + +.w-44 { + width: 44%; +} + +.w-45 { + width: 45%; +} + +.w-46 { + width: 46%; +} + +.w-47 { + width: 47%; +} + +.w-48 { + width: 48%; +} + +.w-49 { + width: 49%; +} + +.w-50 { + width: 50%; +} + +.w-51 { + width: 51%; +} + +.w-52 { + width: 52%; +} + +.w-53 { + width: 53%; +} + +.w-54 { + width: 54%; +} + +.w-55 { + width: 55%; +} + +.w-56 { + width: 56%; +} + +.w-57 { + width: 57%; +} + +.w-58 { + width: 58%; +} + +.w-59 { + width: 59%; +} + +.w-60 { + width: 60%; +} + +.w-61 { + width: 61%; +} + +.w-62 { + width: 62%; +} + +.w-63 { + width: 63%; +} + +.w-64 { + width: 64%; +} + +.w-65 { + width: 65%; +} + +.w-66 { + width: 66%; +} + +.w-67 { + width: 67%; +} + +.w-68 { + width: 68%; +} + +.w-69 { + width: 69%; +} + +.w-70 { + width: 70%; +} + +.w-71 { + width: 71%; +} + +.w-72 { + width: 72%; +} + +.w-73 { + width: 73%; +} + +.w-74 { + width: 74%; +} + +.w-75 { + width: 75%; +} + +.w-76 { + width: 76%; +} + +.w-77 { + width: 77%; +} + +.w-78 { + width: 78%; +} + +.w-79 { + width: 79%; +} + +.w-80 { + width: 80%; +} + +.w-81 { + width: 81%; +} + +.w-82 { + width: 82%; +} + +.w-83 { + width: 83%; +} + +.w-84 { + width: 84%; +} + +.w-85 { + width: 85%; +} + +.w-86 { + width: 86%; +} + +.w-87 { + width: 87%; +} + +.w-88 { + width: 88%; +} + +.w-89 { + width: 89%; +} + +.w-90 { + width: 90%; +} + +.w-91 { + width: 91%; +} + +.w-92 { + width: 92%; +} + +.w-93 { + width: 93%; +} + +.w-94 { + width: 94%; +} + +.w-95 { + width: 95%; +} + +.w-96 { + width: 96%; +} + +.w-97 { + width: 97%; +} + +.w-98 { + width: 98%; +} + +.w-99 { + width: 99%; +} + +.w-100 { + width: 100%; +} + +/*Table*/ + +.cs-table .cs-table-top-header, +.cs-table .cs-table-bottom-bar { + -webkit-border-radius: 6px 6px 0px 0px; + -moz-border-radius: 6px 6px 0px 0px; + border-radius: 6px 6px 0px 0px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + background-color: #fff; + border: 1px solid #e8e8e9; + border-bottom: 0px; + height: 65px; + padding: 16px 15px; +} + +.cs-table .cs-table-top-header .cs-pagination, +.cs-table .cs-table-bottom-bar .cs-pagination { + margin-top: 5px; +} + +.cs-table .cs-table-top-header .cs-form-group.search-box .cs-text-box, +.cs-table .cs-table-bottom-bar .cs-form-group.search-box .cs-text-box { + padding-left: 0; + margin-left: 22px; + width: 100%; + background-color: #fff; +} + +.cs-table .cs-table-top-header .cs-form-group.search-box button, +.cs-table .cs-table-bottom-bar .cs-form-group.search-box button { + position: absolute; +} + +.cs-table .cs-table-bottom-bar { + float: left; + width: 100%; + border: 1px solid #e8e8e9; + border-top: 0px; + -webkit-border-radius: 0px 0px 6px 6px; + -moz-border-radius: 0px 0px 6px 6px; + border-radius: 0px 0px 6px 6px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.cs-table .cs-table-bottom-bar .dropdown-menu { + z-index: 9999 !important; +} + +.cs-table .cs-table-head { + background-color: #f3f7f8; + border: 1px solid #e8e8e9; + border-top: 0px; + border-bottom: 0px; +} + +.cs-table .cs-table-head .table-cell { + font-weight: bold; + color: #4f6471; + padding: 19px 10px 19px 15px; + font-size: 12px; + text-transform: uppercase; + font-family: proximaNovaSemiBold; +} + +.cs-table .cs-table-head .table-cell i { + float: right; + position: relative; +} + +.cs-table .cs-table-body { + background-color: #fff; + border: 1px solid #e8e8e9; + border-top: 0px; + border-bottom: 0px; + min-height: 197px; + position: relative; +} + +.cs-table .cs-table-body .table-cell { + color: #748590; + padding: 20px 15px; +} + +.cs-table .cs-table-body .table-cell .key { + color: #bebebe; +} + +.cs-table .cs-table-body .table-cell .updated-at { + font-size: 12px; + color: #aabac4; + line-height: 14px; +} + +.cs-table .table-row { + clear: both; + display: flex; + position: relative; + flex-wrap: wrap; +} + +.cs-table .table-row .icon-ellipsis-v { + display: none; + cursor: pointer; + position: absolute; + right: 0px; + color: #aabac5; +} + +.cs-table .table-row .icon-ellipsis-v:hover { + color: #63747f; +} + +.cs-table .table-row:hover { + background: #f5fbfc; +} + +.cs-table .table-row:hover i.icon-ellipsis-v { + display: block; +} + +.cs-table .table-row .action-button-icon { + position: absolute; + right: 18px; + top: 22px; +} + +.cs-table .table-row .action-button-icon i.icon-ellipsis-v { + font-size: 17px; +} + +.cs-table .table-row:before, +.cs-table .table-row:after { + content: ""; + display: table; +} + +.cs-table .table-row:after { + clear: both; +} + +.cs-table .table-row>a { + flex: 1 0 100%; + display: flex; +} + +.cs-table .table-row .shrink-row { + border-bottom: 1px solid #edf1f2; + width: 100%; + padding-left: 22px; +} + +.cs-table .table-cell { + float: left; + font-size: 14px; + word-wrap: break-word; +} + +.cs-table .table-cell:last-child { + border-right: 0px; +} + +.cs-table ul { + float: left; + width: 100%; +} + +/* Pagination */ + +.cs-pagination .pagination-prev, +.cs-pagination .pagination-next { + background-color: #ffffff; + border: 1px solid #e8e8e9; + float: left; + text-align: center; + vertical-align: middle; + cursor: pointer; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.cs-pagination .pagination-prev i, +.cs-pagination .pagination-next i { + font-size: 10px; + color: #63747f; + display: table-cell; + height: 22px; + width: 22px; + vertical-align: middle; +} + +.cs-pagination .pagination-prev.disable, +.cs-pagination .pagination-next.disable { + background-color: #fff; + cursor: default !important; +} + +.cs-pagination .pagination-prev.disable i, +.cs-pagination .pagination-next.disable i { + color: #aabac4; +} + +@media screen and (-ms-high-contrast: active), +(-ms-high-contrast: none) { + .cs-pagination .pagination-prev i, + .cs-pagination .pagination-next i { + height: 23px; + } +} + +.cs-pagination .pagination-prev { + margin: 0px 5px; +} + +.cs-pagination .dropdown { + float: left; + background-color: #fff; + border: 1px solid #e8e8e9; + cursor: pointer; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.cs-pagination .dropdown .selected { + padding: 2px 6px; +} + +.cs-pagination .dropdown .selected span { + color: #25c2a3; + font-size: 12px; + margin: 0 8px 0px 5px; +} + +.cs-pagination .dropdown .selected i { + font-size: 10px; + color: #787981; +} + +.cs-pagination .dropdown.no-pagination { + cursor: default !important; +} + +.cs-pagination .dropdown.no-pagination i { + display: none; +} + +.cs-pagination .dropdown.no-pagination .dropdown-menu { + display: none !important; +} + +.cs-pagination .dropdown.no-pagination .dropdown-toggle { + cursor: default; +} + +.cs-pagination .dropdown .dropdown-menu { + min-width: 50px; + border: 1px solid #e8e8e9; + top: 50%; + padding: 0; + left: -4px; + overflow: auto; + z-index: 10; + overflow-y: auto; + max-height: 160px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + -ms-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; +} + +.cs-pagination .dropdown .dropdown-menu.upper-pagination { + top: -3px; +} + +.cs-pagination .dropdown .dropdown-menu::-webkit-scrollbar-track { + border-radius: 10px; + background-color: transparent; +} + +.cs-pagination .dropdown .dropdown-menu::-webkit-scrollbar { + width: 6px; + background-color: transparent; +} + +.cs-pagination .dropdown .dropdown-menu::-webkit-scrollbar-thumb { + border-radius: 6px; + background-color: #dfe2e9; +} + +.cs-pagination .dropdown .dropdown-menu li { + cursor: pointer; + padding: 5px 0px; + text-align: center; +} + +.cs-pagination .dropdown .dropdown-menu li:hover { + background-color: #f5f5f5; +} + +.cs-pagination .dropdown .dropdown-menu li.selected-option { + color: #25c2a3; +} + +.cs-pagination .result { + float: left; + margin: 0px 20px 0px; + font-style: italic; + line-height: 24px; + margin-top: 2px; + color: #748590; +} + +.cs-pagination .result label { + display: initial; +} + +.cs-pagination .result .font-semi-bold { + color: #4f6471; + margin-right: 4px; +} + +.cs-pagination .filter, +.cs-pagination .refresh, +.cs-pagination .cancel-search { + float: left; + padding: 0px 15px; + border-right: 1px solid #e2e2e2; + height: 20px; + line-height: 24px; + margin-top: 2px; + color: #63747f; +} + +.cs-pagination .filter i, +.cs-pagination .refresh i, +.cs-pagination .cancel-search i { + margin-right: 6px; + font-size: 14px; + cursor: pointer; +} + +.cs-pagination .filter label, +.cs-pagination .refresh label, +.cs-pagination .cancel-search label { + font-size: 14px; +} + +/*Tags*/ + +.cs-tags { + padding: 0px 5px; + background-color: #f3f7f8; + margin: 0 2.5px 5px; + float: left; + vertical-align: middle; + border: 1px solid #e8eced; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + color: #aabac4; +} + +.cs-tags span { + text-overflow: ellipsis; + overflow: hidden; + max-width: 80px; + white-space: nowrap; +} + +.cs-tags .title { + font-family: proximaNovaSemiBold; + float: left; + margin: 0px 5px; +} + +.cs-tags .value { + float: left; +} + +.cs-tags i { + color: #748590; + display: inline-block; + cursor: pointer; + margin: 0px 5px 0px 10px; + font-size: 12px; +} + +.cs-tags:hover { + background-color: #f3f7f8; +} + +.drag-icon { + width: 7px; + height: 19px; + background-position: -5px -218px; + position: absolute; + left: 0; + cursor: move; + display: inline-block; + background-image: url(https://app.contentstack.com/static/images/cs-icons-v2.png); + float: left; + visibility: hidden; +} + +.minus-sign { + display: inline-block; + width: 15px; + height: 15px; + vertical-align: sub; + cursor: pointer; + margin-left: 2px; + background-image: url(https://app.contentstack.com/static/images/minus@2x.png); + background-size: 15px 15px; + background-repeat: no-repeat; +} + +.plus-sign { + display: inline-block; + width: 15px; + height: 15px; + vertical-align: sub; + cursor: pointer; + margin-left: 2px; + background-image: url(https://app.contentstack.com/static/images/plus@2x.png); + background-size: 15px 15px; + background-repeat: no-repeat; +} + +.reference-loading { + width: 50%; +} + +.reference-loading .loader, +.reference-loading .loader:before, +.reference-loading .loader:after { + border-radius: 50%; + width: 1.3em; + height: 1.3em; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation: load7 1.8s infinite ease-in-out; + animation: load7 1.8s infinite ease-in-out; +} + +.reference-loading .loader { + color: #25c2a3; + font-size: 10px; + position: relative; + text-indent: -9999em; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; + top: -20px; + margin-left: 6%; +} + +.reference-loading .loader:before, +.reference-loading .loader:after { + content: ''; + position: absolute; + top: 0; +} + +.reference-loading .loader:before { + left: -2.5em; + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.reference-loading .loader:after { + left: 2.5em; +} + +.reference-loading { + display: inline-block; + margin-left: 50px; +} + +@-webkit-keyframes load7 { + 0%, + 80%, + 100% { + box-shadow: 0 2.5em 0 -1.3em; + } + 40% { + box-shadow: 0 2.5em 0 0; + } +} + +@keyframes load7 { + 0%, + 80%, + 100% { + box-shadow: 0 2.5em 0 -1.3em; + } + 40% { + box-shadow: 0 2.5em 0 0; + } +} + +.reference-loading .loading { + text-align: center; + margin: 20px auto; +} + +.reference-loading .loading-flash div { + border-radius: 50%; + height: 10px; + width: 10px; + display: inline-block; + box-sizing: border-box; + background: #25c2a3; +} + +.reference-loading .loading-flash div:nth-of-type(4) { + animation: flash 0.4s 0.5s ease-in-out infinite; +} + +.reference-loading .loading-flash div:nth-of-type(3) { + animation: flash 0.4s 0.2s linear infinite; +} + +.reference-loading .loading-flash div:nth-of-type(2) { + animation: flash 0.4s -0.1s linear infinite; +} + +.reference-loading .loading-flash div:nth-of-type(1) { + animation: flash 0.4s -0.4s linear infinite; +} + +@keyframes flash { + 0% { + opacity: 0; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4989157c..7d51394b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@contentstack/ui-extensions-sdk", - "version": "2.2.2", + "version": "2.2.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@contentstack/ui-extensions-sdk", - "version": "2.2.2", + "version": "2.2.3", "license": "MIT", "dependencies": { "post-robot": "8.0.29", @@ -18,6 +18,7 @@ "babel-loader": "7.1.4", "babel-preset-env": "1.7.0", "braces": "2.3.2", + "css-loader": "^6.8.1", "docdash": "1.0.2", "eslint": "6.8.0", "eslint-config-airbnb": "16.1.0", @@ -44,6 +45,7 @@ "karma-spec-reporter": "0.0.32", "karma-summary-reporter": "1.5.2", "karma-webpack": "^5.0.0", + "mini-css-extract-plugin": "^2.7.6", "nyc": "14.1.1", "ssri": "^9.0.0", "webpack": "^5.70.0", @@ -3644,6 +3646,77 @@ "node": ">=4.8" } }, + "node_modules/css-loader": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz", + "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==", + "dev": true, + "dependencies": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.21", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.3", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.3.8" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/css-loader/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/css-loader/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/css-loader/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/custom-event": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz", @@ -5716,6 +5789,18 @@ "node": ">=0.10.0" } }, + "node_modules/icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/ignore": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", @@ -7759,6 +7844,78 @@ "node": ">=6" } }, + "node_modules/mini-css-extract-plugin": { + "version": "2.7.6", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz", + "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==", + "dev": true, + "dependencies": { + "schema-utils": "^4.0.0" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/mini-css-extract-plugin/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", + "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.3" + }, + "peerDependencies": { + "ajv": "^8.8.2" + } + }, + "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/mini-css-extract-plugin/node_modules/schema-utils": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", + "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.9.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.1.0" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -7875,6 +8032,24 @@ "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", "dev": true }, + "node_modules/nanoid": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -8960,6 +9135,112 @@ "zalgo-promise": "^1.0.3" } }, + "node_modules/postcss": { + "version": "8.4.28", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz", + "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-modules-extract-imports": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-local-by-default": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz", + "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==", + "dev": true, + "dependencies": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-scope": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", + "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.4" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "dependencies": { + "icss-utils": "^5.0.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, "node_modules/prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -10206,6 +10487,15 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-resolve": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", @@ -13475,7 +13765,8 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz", "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==", - "dev": true + "dev": true, + "requires": {} }, "@webpack-cli/info": { "version": "1.4.1", @@ -13490,7 +13781,8 @@ "version": "1.6.1", "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz", "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==", - "dev": true + "dev": true, + "requires": {} }, "@xtuc/ieee754": { "version": "1.2.0", @@ -13530,13 +13822,15 @@ "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", - "dev": true + "dev": true, + "requires": {} }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "aggregate-error": { "version": "3.1.0", @@ -13593,7 +13887,8 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "amdefine": { "version": "1.0.1", @@ -15320,6 +15615,54 @@ "which": "^1.2.9" } }, + "css-loader": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz", + "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==", + "dev": true, + "requires": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.21", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.3", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.3.8" + }, + "dependencies": { + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + } + } + }, + "cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true + }, "custom-event": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz", @@ -16927,6 +17270,13 @@ "safer-buffer": ">= 2.1.2 < 3" } }, + "icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "requires": {} + }, "ignore": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", @@ -18048,7 +18398,8 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-1.1.2.tgz", "integrity": "sha1-OU8rJf+0pkS5rabyLUQ+L9CIhsM=", - "dev": true + "dev": true, + "requires": {} }, "karma-jasmine-html-reporter": { "version": "0.2.2", @@ -18390,7 +18741,8 @@ "version": "8.4.1", "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.4.1.tgz", "integrity": "sha512-sLODeRetZ/61KkKLJElaU3NuU2z7MhXf12Ml1WJMSdwpngeofneCRF+JBbat8HiSqhniOMuTemXMrsI7hA6XyA==", - "dev": true + "dev": true, + "requires": {} }, "marked": { "version": "4.0.12", @@ -18508,6 +18860,56 @@ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", "dev": true }, + "mini-css-extract-plugin": { + "version": "2.7.6", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz", + "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==", + "dev": true, + "requires": { + "schema-utils": "^4.0.0" + }, + "dependencies": { + "ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + } + }, + "ajv-keywords": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", + "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.3" + } + }, + "json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "schema-utils": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", + "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.9.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.1.0" + } + } + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -18610,6 +19012,12 @@ "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", "dev": true }, + "nanoid": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "dev": true + }, "natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -19452,6 +19860,69 @@ "zalgo-promise": "^1.0.3" } }, + "postcss": { + "version": "8.4.28", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz", + "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==", + "dev": true, + "requires": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "postcss-modules-extract-imports": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "dev": true, + "requires": {} + }, + "postcss-modules-local-by-default": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz", + "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + } + }, + "postcss-modules-scope": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", + "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "dev": true, + "requires": { + "postcss-selector-parser": "^6.0.4" + } + }, + "postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0" + } + }, + "postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } + }, + "postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -20436,6 +20907,12 @@ "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true + }, "source-map-resolve": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", @@ -21752,7 +22229,8 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==", - "dev": true + "dev": true, + "requires": {} } } }, @@ -21770,7 +22248,8 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/webpack-shell-plugin-next/-/webpack-shell-plugin-next-2.2.2.tgz", "integrity": "sha512-2HeC1e0cCvTgA3SD4XPAD69DnILM92mCschrtKdlLRORHCR+oG7xnibQMkVySxTAYWTQOcBRHlqa88x4syWwhQ==", - "dev": true + "dev": true, + "requires": {} }, "webpack-sources": { "version": "3.2.3", @@ -21925,7 +22404,8 @@ "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "dev": true + "dev": true, + "requires": {} }, "xmlcreate": { "version": "2.0.4", diff --git a/package.json b/package.json index b2a342d3..2e2b7f83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@contentstack/ui-extensions-sdk", - "version": "2.2.2", + "version": "2.2.3", "description": "The Extensions SDK allows you to extend Contentstack’s UI by helping you create Custom Fields, Custom Widgets, and Dashboard Widgets.", "main": "dist/ui-extension-sdk.js", "files": [ @@ -13,7 +13,7 @@ "build": "npx webpack", "prepare": "npm run build", "generate:sri": "node ./subresourceIntegrity.js", - "generate:readme": "npm run generate:sri && npx @appnest/readme generate" + "generate:readme": "npm run build && npm run generate:sri && npx @appnest/readme generate" }, "keywords": [ "contentstack", @@ -37,6 +37,7 @@ "babel-loader": "7.1.4", "babel-preset-env": "1.7.0", "braces": "2.3.2", + "css-loader": "^6.8.1", "docdash": "1.0.2", "eslint": "6.8.0", "eslint-config-airbnb": "16.1.0", @@ -63,6 +64,7 @@ "karma-spec-reporter": "0.0.32", "karma-summary-reporter": "1.5.2", "karma-webpack": "^5.0.0", + "mini-css-extract-plugin": "^2.7.6", "nyc": "14.1.1", "ssri": "^9.0.0", "webpack": "^5.70.0", diff --git a/webpack.config.js b/webpack.config.js index 076a0ccb..3bd6a58d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,50 +1,60 @@ const path = require('path'); const WebpackShellPlugin = require('webpack-shell-plugin-next'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { - entry: { - 'ui-extension-sdk': path.resolve(__dirname, 'webpack-entry.js') + entry: { + 'ui-extension-sdk': path.resolve(__dirname, 'webpack-entry.js') + }, + mode: 'production', + output: { + library: 'ContentstackUIExtension', + libraryTarget: 'umd', + path: path.resolve(__dirname, 'dist'), + filename: '[name].js' + }, + devtool: 'source-map', + plugins: [ + new WebpackShellPlugin({ onBuildEnd: ['npm run generate:docs'], dev: false }), + new MiniCssExtractPlugin() + ], + module: { + rules: [{ + enforce: 'pre', + test: /\.js$/, + exclude: /node_modules/, + loader: 'eslint-loader', + options: { + fix: true + } + }, { + test: /\.js$/, + loader: 'babel-loader', + options: { + presets: ['env'] + } }, - mode: 'production', - output: { - library: 'ContentstackUIExtension', - libraryTarget: 'umd', - path: path.resolve(__dirname, 'dist'), - filename: '[name].js' - }, - devtool: 'source-map', - plugins: [ - new WebpackShellPlugin({onBuildEnd: ['npm run generate:docs'], dev: false}) - ], - module: { - rules: [{ - enforce: 'pre', - test: /\.js$/, - exclude: /node_modules/, - loader: 'eslint-loader', - options: { - fix: true - } - }, { - test: /\.js$/, - loader: 'babel-loader', - options: { - presets: ['env'] - } - }] - }, - devServer: { - contentBase: path.join(__dirname, '/'), - compress: false, - port: 9000, - watchOptions: { - poll: true - }, - watchContentBase: true, - stats: 'normal' - }, - performance: { - hints: 'warning' + { + test: /\.css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader'], + include: [path.resolve(__dirname, 'lib')] + }] + }, + devServer: { + contentBase: path.join(__dirname, '/'), + compress: false, + port: 9000, + watchOptions: { + poll: true }, + watchContentBase: true, stats: 'normal' -}; \ No newline at end of file + }, + resolve: { + extensions: ['.json', '.js', '.ts', '.css'] + }, + performance: { + hints: 'warning' + }, + stats: 'normal' +}; From a5662781b5227599c677f909ad46ba1406c4be7c Mon Sep 17 00:00:00 2001 From: Kaushik Shetty Date: Mon, 21 Aug 2023 17:49:50 +0530 Subject: [PATCH 2/2] fix: karma test config --- karma.conf.js | 67 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 28 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 4e0035bf..e1a46a63 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,28 +1,32 @@ -const path = require('path') +const path = require('path'); module.exports = function (config) { config.set({ files: [ - { pattern: 'lib/*.js', watched: true, served: false, included: false, nocache: false }, - { pattern: 'test/*Spec.js', watched: true, served: true, included: true } + { + pattern: 'lib/*.js', watched: true, served: false, included: false, nocache: false + }, + { + pattern: 'test/*Spec.js', watched: true, served: true, included: true + } ], autoWatch: true, - singleRun: false, + singleRun: false, failOnEmptyTestSuite: false, plugins: [ - require("karma-webpack"), - require('karma-jasmine'), - require('karma-coverage-istanbul-reporter'), - require('karma-jasmine-html-reporter'), - require('karma-sourcemap-loader'), - require('karma-chrome-launcher'), + require('karma-webpack'), + require('karma-jasmine'), + require('karma-coverage-istanbul-reporter'), + require('karma-jasmine-html-reporter'), + require('karma-sourcemap-loader'), + require('karma-chrome-launcher'), require('karma-firefox-launcher'), require('karma-safari-applescript-launcher'), require('karma-summary-reporter') ], - logLevel: config.LOG_WARN, //config.LOG_DISABLE, config.LOG_ERROR, config.LOG_INFO, config.LOG_DEBUG + logLevel: config.LOG_WARN, // config.LOG_DISABLE, config.LOG_ERROR, config.LOG_INFO, config.LOG_DEBUG frameworks: ['jasmine'], - browsers: ['Chrome','Firefox','Safari' /*,'PhantomJS','Edge','ChromeCanary','Opera','IE'*/ ], - reporters: ['kjhtml','coverage-istanbul', 'summary'], + browsers: ['Chrome', 'Firefox', 'Safari'], + reporters: ['kjhtml', 'coverage-istanbul', 'summary'], retryLimit: 0, client: { captureConsole: false, @@ -34,18 +38,18 @@ module.exports = function (config) { } }, preprocessors: { - 'test/*Spec.js': ['webpack', "sourcemap"], - 'lib/*.js': ['webpack', "sourcemap"] + 'test/*Spec.js': ['webpack', 'sourcemap'], + 'lib/*.js': ['webpack', 'sourcemap'] }, webpackMiddleware: { noInfo: true, stats: 'errors-only', - logLevel : 'error' + logLevel: 'error' }, coverageIstanbulReporter: { combineBrowserReports: true, fixWebpackSourcePaths: true, - reports: ['html','text-summary'], + reports: ['html', 'text-summary'], dir: path.join(__dirname, 'coverage'), 'report-config': { html: { @@ -54,20 +58,20 @@ module.exports = function (config) { } }, summaryReporter: { - show: 'failed', - specLength: 50, - overviewColumn: true + show: 'failed', + specLength: 50, + overviewColumn: true }, webpack: { - mode: "development", + mode: 'development', module: { rules: [{ - test: /\.js$/, - loader: 'babel-loader', - options: { - presets: ['env'] - } - },{ + test: /\.js$/, + loader: 'babel-loader', + options: { + presets: ['env'] + } + }, { test: /\.js$/, use: { loader: 'istanbul-instrumenter-loader', @@ -76,8 +80,15 @@ module.exports = function (config) { } }, include: path.resolve('lib/') + }, + { + test: /\.css$/, + use: { + loader: 'css-loader' + }, + include: path.resolve('lib/') }] } } }); -}; \ No newline at end of file +};