zaf_react 0.1.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b7e2722c17c6ad651a3d5011fb2f3372c13011c134509edd3067df7693e13240
+  data.tar.gz: e21e51748596d4e5379abf6ac197bbd0f0f84098cb9c0d1947cea6ef99535ab3
+SHA512:
+  metadata.gz: c58bfd1552542a03c1d53a31882e16e64c9e6f93b2da43237ca56f722c47d56745e70a0b5487cc871f817811ccc2791ec4d792bc3aca78cb4462c0951bb73bab
+  data.tar.gz: b1c5191ffa5b5b6f7566202b8e49273c3e280d044a5b5ae7cacf60113890a4d5c8b33181e843d2fdf9267cd2b21fe25aa4729ae0c5b0e60cbca9627e574263f9

data/README.md

@@ -0,0 +1,87 @@
+# ZAFReact
+
+React for Zendesk App Framework V2.0
+
+## Requirements
+
+NPM: Direct from [NPM](https://www.npmjs.com/get-npm) or install with [Homebrew](https://brew.sh)
+
+    $ brew install node
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'zaf_react'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install zaf_react
+
+## Usage
+
+#### Initialize a new ZAF React App
+
+    $ zafr init
+
+This will generate a very basic React app with an example component "src/components/item-list/item-list.js".
+
+---
+
+#### Start the React server for local testing
+
+    $ zafr start
+
+This will run the React server on [localhost:3000](http://localhost:3000).
+
+---
+
+#### Compile a production build for React
+
+    $ zafr build
+
+This will compile the React app into a production ready build. This will not run if uploaded to Zendesk. See below.
+
+---
+
+#### Start the ZAT Server
+
+    $ zafr server
+
+This will run the previous ```zafr build``` command, then start the ZAT Server for local testing in Zendesk. See Zendesk's docs here for using the ZAT server [here](https://developer.zendesk.com/apps/docs/developer-guide/zat#server).
+
+---
+
+#### Validation
+
+    $ zafr validate
+
+This will run the ```zat validate``` command in the ```/build``` directory to validate the ZAF V2.0 App.
+
+---
+
+#### Package the full app for uploading to Zendesk
+
+    $ zafr package
+
+This will run the above ```zafr build``` command, then flatten the React assets directory structure, and finally compile the entire app into a ZAF V2.0 app ready for upload to Zendesk. The uploadable .zip file can be found at ```/build/tmp/app-{timstamp}.zip```.
+
+---
+
+## ZAFClient
+
+Zendesk's ZAFClient is not available outside of Zendesk. In order to allow local testing, without any need for Zendesk, use the file ```/source/src/zendesk/helpers/zaf_test_client.js```. There you can build methods to simulate the ZAFClient functionality away from the Zendesk environment. The ZAF Test Client will not be used when uploaded to Zendesk or when using the ZAT Server.
+
+## Notes
+
+During the ```zafr package``` command, all React style and js assets will be flattened and moved from ```/build/assets/static/*``` to ```/build/assets/*``` as ZAF V2.0 does not allow a nested file structure.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/onlyexcellence/zaf_react.

data/bin/zafr

@@ -0,0 +1,10 @@
+#!/usr/bin/env ruby
+require 'zaf_react'
+
+
+# CLI
+require "zaf_react/cli"
+
+
+# Start CLI
+ZAFReact::CLI.start(ARGV)

data/lib/boot.rb

@@ -0,0 +1,2 @@
+# Application Root
+APP_ROOT = File.expand_path("../",__dir__)

data/lib/zaf_react/cli/build.rb

@@ -0,0 +1,19 @@
+module ZAFReact
+ class CLI < Thor
+
+
+   include Thor::Actions
+
+
+   desc "build", "Build React App"
+   # ========================================================
+   def build
+     remove_dir 'build'
+     directory 'zendesk', 'build'
+     raise Error, "React build failed".light_red if !system("npm run build --prefix source")
+     directory 'source/build', 'build/assets'
+   end
+
+
+ end
+end

data/lib/zaf_react/cli/init.rb

@@ -0,0 +1,31 @@
+module ZAFReact
+ class CLI < Thor
+
+
+   include Thor::Actions
+
+
+   desc "init", "Initialize a new React App with ZAFClient"
+   # ========================================================
+   def init# _git = false
+     if Dir.exists?("source/src")
+       exit if ask("Are you sure you want to create a fresh app? This will remove all current work. Type ".light_cyan << "yes".light_yellow << " to continue.".light_cyan).downcase != "yes"
+     end
+     # remove_dir ".git" if _git
+     remove_dir "source"
+     remove_dir "zendesk"
+     remove_dir "build"
+     raise Error, "npm create failed".light_red if !system("create-react-app source")
+     remove_dir "source/.git"
+     copy_file "#{APP_ROOT}/lib/zaf_react/source/react/public/index.html", "source/public/index.html", force: true
+     remove_dir "source/src"
+     directory "#{APP_ROOT}/lib/zaf_react/source/react/src", "source/src"
+     directory "#{APP_ROOT}/lib/zaf_react/source/zendesk", "zendesk"
+     remove_file "source/.gitignore"
+     copy_file "#{APP_ROOT}/lib/zaf_react/ignore", ".gitignore"
+     # system "git init" if _git
+   end
+
+
+ end
+end

data/lib/zaf_react/cli/package.rb

@@ -0,0 +1,33 @@
+module ZAFReact
+ class CLI < Thor
+
+
+   include Thor::Actions
+
+
+   desc "package", "ZAT Package"
+   # ========================================================
+   def package
+     build
+
+     directory "build/assets/static/js", "build/assets" if Dir.exists?("build/assets/static/js")
+     directory "build/assets/static/css", "build/assets" if Dir.exists?("build/assets/static/css")
+
+     remove_dir "build/assets/static"
+
+     Dir.glob([
+       "build/assets/*.js",
+       "build/assets/*.css",
+       "build/assets/*.json",
+       "build/assets/*.map",
+       "build/assets/*.html"
+    ]) do |filename|
+       gsub_file filename, /(\"\/static\/(js|css)\/)|(\"static\/(js|css)\/)/i, '"'
+     end
+
+     system "zat package --path=build"
+   end
+
+
+ end
+end

data/lib/zaf_react/cli/server.rb

@@ -0,0 +1,17 @@
+module ZAFReact
+ class CLI < Thor
+
+
+   include Thor::Actions
+
+
+   desc "server", "Start ZAT Server"
+   # ========================================================
+   def server
+     build
+     raise Error, "ZAT build failed".light_red if !system("zat server --path=build")
+   end
+
+
+ end
+end

data/lib/zaf_react/cli/start.rb

@@ -0,0 +1,16 @@
+module ZAFReact
+ class CLI < Thor
+
+
+   include Thor::Actions
+
+
+   desc "start", "Start local server"
+   # ========================================================
+   def start
+     system "npm start --prefix source"
+   end
+
+
+ end
+end

data/lib/zaf_react/cli/validate.rb

@@ -0,0 +1,16 @@
+module ZAFReact
+ class CLI < Thor
+
+
+   include Thor::Actions
+
+
+   desc "validate", "ZAT Validate"
+   # ========================================================
+   def validate
+     system "zat validate --path=build"
+   end
+
+
+ end
+end

data/lib/zaf_react/cli.rb

@@ -0,0 +1,13 @@
+require "thor"
+
+
+Dir["#{APP_ROOT}/lib/zaf_react/cli/*.rb"].each { |file| require file }
+
+
+module ZAFReact
+  class CLI < Thor
+  end
+end
+
+
+ZAFReact::CLI.source_root("./")

data/lib/zaf_react/ignore

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

data/lib/zaf_react/source/react/public/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script> -->
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

data/lib/zaf_react/source/react/src/app.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ItemList from './components/item-list/item-list'
+
+function App() {
+  return (
+    <div>
+      <ItemList />
+    </div>
+  );
+}
+
+export default App;

data/lib/zaf_react/source/react/src/components/item-list/item-list.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import CLIENT from '../../zendesk/zaf_client';
+
+
+class List extends Component {
+
+
+  constructor(){
+    super()
+    this.state = {
+      item_list: []
+    }
+  }
+
+
+  componentDidMount(){
+    CLIENT.metadata().then(metadata => {
+      this.setState({ item_list: JSON.parse(metadata['settings']['item_list'])} );
+    });
+  }
+
+
+  render(){
+    return (
+      <ul>
+        {
+          this.state.item_list.map((item, key) => {
+            return <li key={key}>{item}</li>
+          })
+        }
+      </ul>
+    )
+  }
+
+
+}
+
+
+export default List;

data/lib/zaf_react/source/react/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app.js'
+
+ReactDOM.render(<App />, document.getElementById('root'));

data/lib/zaf_react/source/react/src/zendesk/helpers/zaf_test_client.js

@@ -0,0 +1,23 @@
+// Simulates the ZAFClient functionality for local testing
+
+
+class ZAFTestClient {
+
+  static init() { return new this(); }
+
+  invoke(_type, _params){}
+
+  metadata(){
+    return new Promise((resolve, reject) => {
+      resolve({
+        settings: {
+          item_list: JSON.stringify(["One", "Two", "Three", "Four"])
+        }
+      });
+    });
+  }
+
+}
+
+
+export default ZAFTestClient;

data/lib/zaf_react/source/react/src/zendesk/zaf_client.js

@@ -0,0 +1,11 @@
+let client;
+
+if (process.env.NODE_ENV === 'production') {
+  client = ZAFClient.init(); // eslint-disable-line no-undef
+} else {
+  client = require('./helpers/zaf_test_client').default.init();
+}
+
+client.invoke('resize', { width: '340px', height: '400px' });
+
+export default client;

data/lib/zaf_react/source/zendesk/assets/logo.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<path id="Fill-3" d="M1.5,6.1C1.3,5.9,1,6,1,6.4l0,7c0,0.3,0.2,0.7,0.5,0.9l6,3.6C7.8,18.1,8,18,8,17.6l0-7.1c0-0.3-0.2-0.7-0.5-0.9
+	L1.5,6.1z"/>
+<path id="Fill-5" d="M10.5,17.9c-0.3,0.2-0.5,0-0.5-0.3l0-7c0-0.3,0.2-0.7,0.5-0.9l6-3.6C16.8,5.9,17,6,17,6.4l0,7.1
+	c0,0.3-0.2,0.7-0.5,0.9L10.5,17.9z"/>
+<path id="Fill-1" d="M2.2,3.7c-0.3,0.2-0.3,0.4,0,0.6l6.2,3.6C8.7,8,9.2,8,9.4,7.9l6.3-3.6c0.3-0.2,0.3-0.4,0-0.6L9.5,0.1
+	C9.2,0,8.8,0,8.5,0.1L2.2,3.7z"/>
+</svg>

data/lib/zaf_react/source/zendesk/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "",
+  "author": {
+    "name": "",
+    "email": "",
+    "url": ""
+  },
+  "defaultLocale": "en",
+  "private": true,
+  "location": {
+    "support": {
+      "top_bar": "assets/index.html"
+    }
+  },
+  "parameters": [
+    {
+      "name": "item_list",
+      "type": "text",
+      "required": false,
+      "secure": false,
+      "default": "[\"A\", \"B\", \"C\"]"
+    }
+  ],
+  "version": "0.1",
+  "frameworkVersion": "2.0"
+}

data/lib/zaf_react/source/zendesk/translations/en.json

@@ -0,0 +1,8 @@
+{
+  "app": {
+    "name": "Zen Tunes",
+    "short_description": "Play the famous zen tunes in your help desk.",
+    "long_description": "Play the famous zen tunes in your help desk and \n listen to the beats it has to offer.",
+    "installation_instructions": "Simply click install."
+  }
+}

data/lib/zaf_react/version.rb

@@ -0,0 +1,3 @@
+module ZAFReact
+  VERSION = "0.1.3"
+end

data/lib/zaf_react.rb

@@ -0,0 +1,7 @@
+require "zaf_react/version"
+require "awesome_print"
+require "colorize"
+require "boot"
+
+module ZAFReact
+end

metadata

@@ -0,0 +1,126 @@
+--- !ruby/object:Gem::Specification
+name: zaf_react
+version: !ruby/object:Gem::Version
+  version: 0.1.3
+platform: ruby
+authors:
+- onlyexcellence
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-06-23 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: thor
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.19.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.19.4
+- !ruby/object:Gem::Dependency
+  name: awesome_print
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.8.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.8.0
+- !ruby/object:Gem::Dependency
+  name: colorize
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.8.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.8.1
+- !ruby/object:Gem::Dependency
+  name: zendesk_apps_tools
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.8.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.8.0
+description: 
+email:
+- will@wambl.com
+executables:
+- zafr
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- bin/zafr
+- lib/boot.rb
+- lib/zaf_react.rb
+- lib/zaf_react/cli.rb
+- lib/zaf_react/cli/build.rb
+- lib/zaf_react/cli/init.rb
+- lib/zaf_react/cli/package.rb
+- lib/zaf_react/cli/server.rb
+- lib/zaf_react/cli/start.rb
+- lib/zaf_react/cli/validate.rb
+- lib/zaf_react/ignore
+- lib/zaf_react/source/react/public/index.html
+- lib/zaf_react/source/react/src/app.js
+- lib/zaf_react/source/react/src/components/item-list/item-list.js
+- lib/zaf_react/source/react/src/index.js
+- lib/zaf_react/source/react/src/zendesk/helpers/zaf_test_client.js
+- lib/zaf_react/source/react/src/zendesk/zaf_client.js
+- lib/zaf_react/source/zendesk/assets/logo-small.png
+- lib/zaf_react/source/zendesk/assets/logo.png
+- lib/zaf_react/source/zendesk/assets/logo.svg
+- lib/zaf_react/source/zendesk/manifest.json
+- lib/zaf_react/source/zendesk/translations/en.json
+- lib/zaf_react/version.rb
+homepage: https://github.com/onlyexcellence/zaf_react
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/onlyexcellence/zaf_react
+  source_code_uri: https://github.com/onlyexcellence/zaf_react
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.6
+signing_key: 
+specification_version: 4
+summary: Zendesk App Framework with React
+test_files: []