Merge pull request #28 from contentstack/feat/CS-18183_added_react_co…

…mponents_for_brightcove

feat: added react ui ux [CS-18183]

brightcove/README.md

@@ -1,31 +1,28 @@
-# Brightcove – Contentstack Extension 
+# Brightcove – Contentstack Extension
 
-#### About this extension
-The Brightcove extension lets you fetch Brightcove videos and display them into a field in your Content Type. Subsequently, while creating entries, you can select one or more of the listed videos as input value for that field.
+## About this extension
 
+The Brightcove extension lets you fetch Brightcove videos and display them into a field in your content type. Subsequently, while creating entries, content managers can select only one of the listed videos at a time as the input value for that field, and the details of the video will be saved as JSON in Contentstack.
 
-![Brightcove Plugin Screenshot](https://images.contentstack.io/v3/assets/bltf2fb14dd3176c6f6/bltb5335d8f8d4feb2a/5b62dde202a4ed4c3dc9f839/download)
+![contentstack Brightcove extension](/brightcove/brightcove/public/brightcove.png)
 
+## How to use this extension
 
-#### How to use this extension
-We have created a step-by-step guide on how to create a Brightcove extension for your content types. You can refer the [Brightcove extension guide](https://www.contentstack.com/docs/guide/extensions/brightcove-extension-setup-guide) on our documentation site for more info. 
+We have created a step-by-step guide on how to create a Brightcove extension for your content types. You can refer the [Brightcove extension guide](https://www.contentstack.com/docs/developers/create-custom-fields/brightcove/) on our documentation site for more info.
 
+## Modifying this extension
 
-#### Other Documentation
-- [Extensions guide](https://www.contentstack.com/docs/guide/extensions)
-- [Common questions about extensions](https://www.contentstack.com/docs/faqs#extensions)
+To modify the extension, first clone this repo and install the dependencies. Then, edit the Home.tsx or Popup.tsx, CSS files from the source/page folder, and create a build using gulp task.
 
+To install dependencies, run the following command in the root folder for each app
 
-#### Modifying Extension
+    npm install
 
-To modify the extension, first clone this repo and install the dependencies. Then, edit the HTML, CSS and JS files from the source folder, and create a build using gulp task.
+To create new build for the extension, run the following command :
 
-To install dependencies, run the following command in the root folder
-```
-npm install gulp-cli -g
-npm install
-```
-To create new build for the extension, run the following command (index.html):
+    npm run build
 
-    gulp build
+## Other Documentation
 
+- [Extensions guide](https://www.contentstack.com/docs/guide/extensions)
+- [Common questions about extensions](https://www.contentstack.com/docs/faqs#extensions)

brightcove/brightcove-popup/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@typescript-eslint",
+      "react-hooks"
+    ],
+    "extends": [
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "off",
+      "react/prop-types": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/ban-types":"off",
+      "@typescript-eslint/no-var-requires":"off"
+    },
+    "settings": {
+      "react": {
+        "pragma": "React",
+        "version": "detect"
+      }
+    }
+  }

brightcove/brightcove-popup/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

brightcove/brightcove-popup/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Contentstack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

brightcove/brightcove-popup/README.md

@@ -0,0 +1,17 @@
+[![Contentstack](/brightcove/brightcove-popup/public/contentstack.png)](https://www.contentstack.com/)
+
+## Steps required to create new build
+
+First the app in vscode or any editor if your preference.
+Then fire up the terminal in root directory of the project and used following command
+
+```
+npm install
+npm run build
+or
+yarn 
+yarn build
+```
+After creating the build open up the stack where we are using this app.
+Goto to the assets section and select add assets.
+Now browse the directories fetch index.html from build folder of this project.

brightcove/brightcove-popup/gulpfile.js

@@ -0,0 +1,14 @@
+const gulp = require('gulp')
+const inlinesource = require('gulp-inline-source')
+const replace = require('gulp-replace')
+
+gulp.task('default', () => {
+    return gulp.src('./build/*.html')
+        .pipe(replace('.js"></script>', '.js" inline></script>'))
+        .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))
+        .pipe(inlinesource({
+            compress: false,
+            ignore: ['png']
+        }))
+        .pipe(gulp.dest('./build'))
+});