perf: Release of 1.0.0 (#1)

* Release of PERSCOM widget 1.0.0

.github/workflows/main.yaml

@@ -28,17 +28,15 @@ jobs:
 
       - name: Build Application for Staging
         if: github.ref == 'refs/heads/prerelease'
-        run: npm run build:widget-staging
+        run: npm run build:widget
         env:
           REACT_APP_API_URL: https://api.staging.perscom.io/v1/widget/roster
-          PARCEL-NAMER-REWRITE-PROFILE: staging
 
       - name: Build Application for Production
         if: github.ref == 'refs/heads/master'
         run: npm run build:widget
         env:
           REACT_APP_API_URL: https://api.perscom.io/v1/widget/roster
-          PARCEL-NAMER-REWRITE-PROFILE: production
 
       - name: Setup AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
@@ -58,8 +56,13 @@ jobs:
           pre_release_branches: prerelease
           append_to_pre_release_tag: prerelease
 
-      - name: Deploy to S3
-        run: aws s3 sync ./dist/ s3://${{ secrets.AWS_BUCKET_NAME }} --delete
+      - name: Deploy to S3 Staging
+        if: github.ref == 'refs/heads/prerelease'
+        run: aws s3 sync ./dist/ s3://${{ secrets.AWS_BUCKET_NAME_STAGING }} --delete
+
+      - name: Deploy to S3 Producion
+        if: github.ref == 'refs/heads/master'
+        run: aws s3 sync ./dist/ s3://${{ secrets.AWS_BUCKET_NAME_PRODUCTION }} --delete
 
       - name: Create Release
         uses: ncipollo/release-action@v1

README.md

@@ -1,40 +1,50 @@
 
-# Getting Started with PERSCOM Widget
+# Getting Started With The PERSCOM Widget
+
+The PERSCOM widget provides seamless external integration of your PERSCOM.io data into any website or content management system. Using a simple HTML code block, the widget can render and return your data in an elegant and non-obtrusive manner. The widget allows for full integration into your website through CSS customization.
 
 ## Using The Widget
 
-Place the following HTML code block on your website wherever you'd like the widget to display. Make sure to replace APIKEY and PERSCOMID with the appropriate values. Your API key will need to have the `view:widget` scope assigned to it.
+Place the following HTML code block on your website wherever you'd like the widget to display. Make sure to replace APIKEY and PERSCOMID with the appropriate values. Your API key will need to have the `access:widget` scope assigned to it.
+
+    <!-- Place the code block where you would like the widget displayed on your website. !-->
+    <!-- Replace APIKEY and PERSCOMID with your API key with the ‘access:widget' scope and PERSCOM Account ID, respectively. !-->
 
-    <!--Place the code block where you would like the widget displayed on your website. !-->
-    <!--Replace APIKEY and PERSCOMID with your API key with the 'view:widget' scope and PERSCOM Account ID, respectively. !-->
-
-	<link href="https://widget.perscom.io/widget.css" rel="stylesheet" />
+    <div id='perscom_roster' data-apikey='APIKEY' data-perscomid='PERSCOMID'></div>
+    <link href="https://widget.perscom.io/widget.css" rel="stylesheet" />
 	<script src="https://widget.perscom.io/widget.js"></script>
-    <div class='perscom_roster' data-apikey='APIKEY' data-perscomid='PERSCOMID'>
 
-## Available Scripts
+## Example
+
+The following example demonstrates the widget embedded within an Invision Community website.
+
+![Invision Widget Preview](https://assets.perscom.io/images/widget-invision-preview-2.png)
+
+## Development
+
+### Available Scripts
 
 In the project directory, you can run:
 
 ### `npm start`
 
-Runs the app in the development mode.\  
+Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 
-The page will reload when you make changes.\  
+The page will reload when you make changes.\
 You may also see any lint errors in the console.
 
 ### `npm test`
 
-Launches the test runner in the interactive watch mode.\  
+Launches the test runner in the interactive watch mode.
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ### `npm run build`
 
-Builds the app for production to the `build` folder.\  
+Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.\  
+The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
@@ -45,10 +55,10 @@ Builds the app to use as a widget with all output in one bundled .js and .css fi
 
 ### `npm run format`
 
-Formats the application source code.\  
+Formats the application source code.\
 Should be run before any PR's and pushes to the repository.
 
 ### `npm run lint`
 
-Runs ESLint and checks source code for best practices and syntax errors.\  
-Should be run before any PR's and pushes to the repository.
+Runs ESLint and checks source code for best practices and syntax errors.\
+Should be run before any PR's and pushes to the repository.

package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "build:widget": "env PARCEL-NAMER-REWRITE-PROFILE=production parcel build src/index.js --no-source-maps",
-    "build:widget-staging": "env PARCEL-NAMER-REWRITE-PROFILE=staging parcel build src/index.js --no-source-maps",
+    "build:widget": "parcel build src/index.js --no-source-maps",
     "test": "react-scripts test",
     "lint": "eslint --fix src/**/*.js",
     "format": "prettier src/**/*.js --write --config ./.prettierrc"
@@ -55,19 +54,9 @@
   "parcel-namer-rewrite": {
     "chain": "@parcel/namer-default",
     "hashing": "always",
-    "profiles": {
-      "production": {
-        "rules": {
-          "index.js": "widget.{hash}.js",
-          "index.css": "widget.{hash}.css"
-        }
-      },
-      "staging": {
-        "rules": {
-          "index.js": "widget.staging.{hash}.js",
-          "index.css": "widget.staging.{hash}.css"
-        }
-      }
+    "rules": {
+      "index.js": "widget.{hash}.js",
+      "index.css": "widget.{hash}.css"
     }
   }
 }

public/index.html

@@ -13,6 +13,8 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="perscom_roster" data-apikey="%REACT_APP_API_KEY%" data-perscomid=%REACT_APP_PERSCOM_ID%></div>
+    <div class='sm:my-6 lg:my-8 sm:px-6 lg:px-8'>
+      <div id="perscom_roster" data-apikey="%REACT_APP_API_KEY%" data-perscomid=%REACT_APP_PERSCOM_ID%></div>
+    </div>
   </body>
 </html>

src/pages/Roster.js

@@ -11,6 +11,7 @@ function Roster({ domElement }) {
 
   useEffect(() => {
     setLoading(true)
+    setError('')
     fetch(config.roster.API_URL, {
       method: 'GET',
       headers: {
@@ -20,10 +21,23 @@ function Roster({ domElement }) {
         'User-Agent': 'PERSCOM Widget'
       }
     })
-      .then((response) => response.json())
+      .then((response) => {
+        switch (response.status) {
+          case 401:
+            setError(
+              'The request failed due to not being authenticated. Please make sure you have provided an API key and that is not revoked.'
+            )
+            break
+          case 403:
+            setError('The API key you provided does not have access to the widget.')
+            break
+        }
+
+        return response.json()
+      })
       .then((data) => {
-        setLoading(false)
         setData(data.data)
+        setLoading(false)
       })
       .catch((e) => {
         console.log(e)
@@ -34,16 +48,23 @@ function Roster({ domElement }) {
 
   return (
     <div id='perscom_roster_widget'>
-      <div id='perscom_roster_wrapper' className='sm:my-6 lg:my-8 sm:px-6 lg:px-8'>
-        {error && renderError(error)}
-        {loading ? (
-          <div id='perscom_roster_loading' className='animate-pulse'>
-            {renderUnit({}, true)}
+      {!loading && error && renderError(error)}
+      {loading ? (
+        <div id='perscom_roster_loading' className='animate-pulse'>
+          {renderUnit({}, true)}
+        </div>
+      ) : (
+        <div id='perscom_roster_wrapper' className='flex flex-col space-y-6'>
+          {data && !!data.length && data.map((unit) => renderUnit(unit, false))}
+          <div className='text-xs text-gray-400'>
+            Widget Provided By{' '}
+            <a href='https://perscom.io' target='_blank' rel='noreferrer'>
+              PERSCOM.io
+            </a>
+            . Copyright {new Date().getFullYear()} Deschutes Design Group LLC
           </div>
-        ) : (
-          <div className='flex flex-col space-y-6'>{!!data.length && data.map((unit) => renderUnit(unit, false))}</div>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   )
 }
@@ -155,7 +176,7 @@ function renderUser(user) {
         id='perscom_roster_table_cell_link'
         className='hidden whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:table-cell'
       >
-        <a href={url} className='text-gray-600 hover:text-gray-900'>
+        <a href={url} target='_blank' rel='noreferrer' className='text-gray-600 hover:text-gray-900'>
           Personnel Profile<span className='sr-only'>, {name}</span>
         </a>
       </td>