chore: update readme and blueprint

.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.

README.md

@@ -1,6 +1,6 @@
-<!-- ⚠️ This README has been generated from the file(s) "./.github/readme/blueprint.md" ⚠️-->
-[](#contentstack-extensions-sdk)
-
+<!-- ⚠️ This README has been generated from the file(s) "./.github/readme/blueprint.md" ⚠️-->
+[](#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
 <script
-    src="https://unpkg.com/@contentstack/ui-extensions-sdk@2.2.2/dist/ui-extension-sdk.js"
-    integrity="sha512-ARbdkPGeszZufhclyJadi58JefJ/fRuVOjAXp1QKwGB5m2XUptmzQKUMeg/gptKQQux6Rba1xX7NrR9mL9eAZQ=="
+    src="https://unpkg.com/@contentstack/ui-extensions-sdk@2.2.3/dist/ui-extension-sdk.js"
+    integrity="sha512-LMktiFAj7j/AUFctMlgY8qmLrLIQVctwwCsnCXIWnvgF9JlanilvFbZxOCtPNB5eO3vp2Nhw9ED1UsWa+ltSvQ=="
     crossorigin="anonymous"
 ></script>
 ```
 
-
-[](#extensions-examples)
-
+
+[](#extensions-examples)
+
 ## Extensions examples
 
 ### Custom Fields
@@ -73,19 +73,19 @@ 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
 
 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).

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=="
   }
 }

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/')
         }]
       }
     }
   });
-};
+};

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';