@twilio/create-flex-plugin 5.0.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@twilio/create-flex-plugin",
+  "version": "5.0.0",
+  "description": "Toolkit to create a new Twilio Flex plugin",
+  "keywords": [
+    "flex",
+    "plugin",
+    "twilio"
+  ],
+  "homepage": "https://github.com/twilio/flex-plugin-builder",
+  "bugs": {
+    "url": "https://github.com/twilio/flex-plugin-builder/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/twilio/flex-plugin-builder.git"
+  },
+  "license": "MIT",
+  "author": "Flex Runtime <flex-runtime@twilio.com>",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "create-flex-plugin": "bin/create-flex-plugin"
+  },
+  "directories": {
+    "lib": "src",
+    "bin": "bin",
+    "test": "__tests__"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "cd ../.. && tsc -p \"packages/create-flex-plugin/tsconfig.json\"",
+    "clean": "rm -rf dist",
+    "lint": "eslint --ext ts src/",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "cd ../.. && jest packages/create-flex-plugin --color",
+    "test:watch": "cd ../.. && jest packages/create-flex-plugin --watch --color"
+  },
+  "dependencies": {
+    "@twilio/flex-dev-utils": "5.0.0",
+    "esm": "^3.2.25",
+    "tmp": "^0.2.1",
+    "yargs": "^16.2.0"
+  },
+  "devDependencies": {
+    "@twilio/flex-plugin": "5.0.0",
+    "@twilio/flex-plugin-scripts": "5.0.0",
+    "@twilio/flex-ui": "^1",
+    "@types/tmp": "^0.2.1",
+    "@types/yargs": "^16.0.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "7f9a9580b554b4f99aa4591e3ec9da17d2554729"
+}

package/templates/core/README.md

@@ -0,0 +1,31 @@
+# Your custom Twilio Flex Plugin
+
+Twilio Flex Plugins allow you to customize the appearance and behavior of [Twilio Flex](https://www.twilio.com/flex). If you want to learn more about the capabilities and how to use the API, check out our [Flex documentation](https://www.twilio.com/docs/flex).
+
+## Setup
+
+Make sure you have [Node.js](https://nodejs.org) as well as [`npm`](https://npmjs.com). We support Node >= 10.12 (and recommend the _even_ versions of Node). Afterwards, install the dependencies by running `npm install`:
+
+```bash
+cd {{pluginFileName}}
+
+# If you use npm
+npm install
+```
+
+Next, please install the [Twilio CLI](https://www.twilio.com/docs/twilio-cli/quickstart) by running:
+
+```bash
+brew tap twilio/brew && brew install twilio
+```
+
+Finally, install the [Flex Plugin extension](https://github.com/twilio-labs/plugin-flex/tree/v1-beta) for the Twilio CLI:
+
+```bash
+twilio plugins:install @twilio-labs/plugin-flex
+```
+
+## Development
+
+Run `twilio flex:plugins --help` to see all the commands we currently support. For further details on Flex Plugins refer to our documentation on the [Twilio Docs](https://www.twilio.com/docs/flex/developer/plugins/cli) page.
+

package/templates/core/_.gitignore

@@ -0,0 +1,66 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Flex related ignore
+appConfig.js
+pluginsService.js
+build/

package/templates/core/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = (config, { isProd, isDev, isTest }) => {
+  /**
+   * Customize the Jest by modifying the config object.
+   * Consult https://jestjs.io/docs/en/configuration for more information.
+   */
+
+  return config;
+}

package/templates/core/public/appConfig.example.js

@@ -0,0 +1,9 @@
+var appConfig = {
+  pluginService: {
+    enabled: true,
+    url: '/plugins',
+  },
+  ytica: false,
+  logLevel: 'info',
+  showSupervisorDesktopView: true,
+};

package/templates/core/public/appConfig.js

@@ -0,0 +1,7 @@
+var appConfig = {
+  pluginService: {
+    enabled: true,
+    url: '/plugins',
+  },
+  logLevel: 'info',
+};

package/templates/core/webpack.config.js

@@ -0,0 +1,8 @@
+module.exports = (config, { isProd, isDev, isTest }) => {
+  /**
+   * Customize the webpack by modifying the config object.
+   * Consult https://webpack.js.org/configuration for more information
+   */
+
+  return config;
+}

package/templates/core/webpack.dev.js

@@ -0,0 +1,8 @@
+module.exports = (config, { isProd, isDev, isTest }) => {
+  /**
+   * Customize the webpack dev-server by modifying the config object.
+   * Consult https://webpack.js.org/configuration/dev-server for more information.
+   */
+
+  return config;
+}

package/templates/js/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "postinstall": "flex-plugin pre-script-check"
+  },
+  "dependencies": {
+    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
+    "react": "16.5.2",
+    "react-dom": "16.5.2",
+    "react-emotion": "9.2.12"
+  },
+  "devDependencies": {
+    "@twilio/flex-ui": "{{flexSdkVersion}}",
+    "react-test-renderer": "16.5.2"
+  }
+}

package/templates/js/src/DemoPlugin.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { VERSION } from '@twilio/flex-ui';
+import { FlexPlugin } from '@twilio/flex-plugin';
+
+import CustomTaskListContainer from './components/CustomTaskList/CustomTaskList.Container';
+import reducers, { namespace } from './states';
+
+const PLUGIN_NAME = '{{pluginClassName}}';
+
+export default class {{pluginClassName}} extends FlexPlugin {
+  constructor() {
+    super(PLUGIN_NAME);
+  }
+
+  /**
+   * This code is run when your plugin is being started
+   * Use this to modify any UI components or attach to the actions framework
+   *
+   * @param flex { typeof import('@twilio/flex-ui') }
+   * @param manager { import('@twilio/flex-ui').Manager }
+   */
+  async init(flex, manager) {
+    this.registerReducers(manager);
+
+    const options = { sortOrder: -1 };
+    flex.AgentDesktopView.Panel1.Content.add(<CustomTaskListContainer key="{{pluginClassName}}-component" />, options);
+  }
+
+  /**
+   * Registers the plugin reducers
+   *
+   * @param manager { Flex.Manager }
+   */
+  registerReducers(manager) {
+    if (!manager.store.addReducer) {
+      // eslint-disable-next-line
+      console.error(`You need FlexUI > 1.9.0 to use built-in redux; you are currently on ${VERSION}`);
+      return;
+    }
+
+    manager.store.addReducer(namespace, reducers);
+  }
+}

package/templates/js/src/components/CustomTaskList/CustomTaskList.Container.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { Actions } from '../../states/CustomTaskListState';
+import CustomTaskList from './CustomTaskList';
+
+const mapStateToProps = (state) => ({
+  isOpen: state['{{pluginNamespace}}'].customTaskList.isOpen,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  dismissBar: bindActionCreators(Actions.dismissBar, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CustomTaskList);

package/templates/js/src/components/CustomTaskList/CustomTaskList.Styles.js

@@ -0,0 +1,14 @@
+import styled from 'react-emotion';
+
+export const CustomTaskListComponentStyles = styled('div')`
+  padding: 10px;
+  margin: 0px;
+  color: #fff;
+  background: #000;
+
+  .accented {
+    color: red;
+    cursor: pointer;
+    float: right;
+  }
+`;

package/templates/js/src/components/CustomTaskList/CustomTaskList.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { CustomTaskListComponentStyles } from './CustomTaskList.Styles';
+
+// It is recommended to keep components stateless and use redux for managing states
+const CustomTaskList = (props) => {
+  if (!props.isOpen) {
+    return null;
+  }
+
+  return (
+    <CustomTaskListComponentStyles>
+      This is a dismissible demo component
+      <i className="accented" onClick={props.dismissBar} aria-hidden="true">
+        close
+      </i>
+    </CustomTaskListComponentStyles>
+  );
+};
+
+CustomTaskList.displayName = 'CustomTaskList';
+
+CustomTaskList.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  dismissBar: PropTypes.func.isRequired,
+};
+
+export default CustomTaskList;

package/templates/js/src/components/__tests__/CustomTaskListComponent.spec.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import CustomTaskList from '../CustomTaskList/CustomTaskList';
+
+describe('CustomTaskListComponent', () => {
+  it('should render demo component', () => {
+    const props = {
+      isOpen: true,
+      dismissBar: () => undefined,
+    };
+    const wrapper = shallow(<CustomTaskList {...props} />);
+    expect(wrapper.render().text()).toMatch('This is a dismissible demo component');
+  });
+});

package/templates/js/src/index.js

@@ -0,0 +1,5 @@
+import * as FlexPlugin from '@twilio/flex-plugin';
+
+import {{pluginClassName}} from './{{pluginClassName}}';
+
+FlexPlugin.loadPlugin({{pluginClassName}});

package/templates/js/src/states/CustomTaskListState.js

@@ -0,0 +1,24 @@
+const ACTION_DISMISS_BAR = 'DISMISS_BAR';
+
+const initialState = {
+  isOpen: true,
+};
+
+export class Actions {
+  static dismissBar = () => ({ type: ACTION_DISMISS_BAR });
+}
+
+export function reduce(state = initialState, action) {
+  // eslint-disable-next-line sonarjs/no-small-switch
+  switch (action.type) {
+    case ACTION_DISMISS_BAR: {
+      return {
+        ...state,
+        isOpen: false,
+      };
+    }
+
+    default:
+      return state;
+  }
+}

package/templates/js/src/states/index.js

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+
+import { reduce as CustomTaskListReducer } from './CustomTaskListState';
+
+// Register your redux store under a unique namespace
+export const namespace = '{{pluginNamespace}}';
+
+// Combine the reducers
+export default combineReducers({
+  customTaskList: CustomTaskListReducer,
+});

package/templates/ts/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "postinstall": "flex-plugin pre-script-check"
+  },
+  "dependencies": {
+    "@twilio/flex-plugin-scripts": "{{pluginScriptsVersion}}",
+    "react": "16.5.2",
+    "react-dom": "16.5.2",
+    "react-emotion": "9.2.12"
+  },
+  "devDependencies": {
+    "@twilio/flex-ui": "{{flexSdkVersion}}",
+    "react-test-renderer": "16.5.2",
+    "typescript": "^4"
+  }
+}

package/templates/ts/src/DemoPlugin.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import * as Flex from '@twilio/flex-ui';
+import { FlexPlugin } from '@twilio/flex-plugin';
+
+import CustomTaskListContainer from './components/CustomTaskList/CustomTaskList.Container';
+import reducers, { namespace } from './states';
+
+const PLUGIN_NAME = '{{pluginClassName}}';
+
+export default class {{pluginClassName}} extends FlexPlugin {
+  constructor() {
+    super(PLUGIN_NAME);
+  }
+
+  /**
+   * This code is run when your plugin is being started
+   * Use this to modify any UI components or attach to the actions framework
+   *
+   * @param flex { typeof Flex }
+   * @param manager { Flex.Manager }
+   */
+  async init(flex: typeof Flex, manager: Flex.Manager): Promise<void> {
+    this.registerReducers(manager);
+
+    const options: Flex.ContentFragmentProps = { sortOrder: -1 };
+    flex.AgentDesktopView.Panel1.Content.add(<CustomTaskListContainer key="{{pluginClassName}}-component" />, options);
+  }
+
+  /**
+   * Registers the plugin reducers
+   *
+   * @param manager { Flex.Manager }
+   */
+  private registerReducers(manager: Flex.Manager) {
+    if (!manager.store.addReducer) {
+      // eslint-disable-next-line
+      console.error(`You need FlexUI > 1.9.0 to use built-in redux; you are currently on ${Flex.VERSION}`);
+      return;
+    }
+
+    manager.store.addReducer(namespace, reducers);
+  }
+}

package/templates/ts/src/components/CustomTaskList/CustomTaskList.Container.ts

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import { bindActionCreators, Dispatch } from 'redux';
+
+import { AppState } from '../../states';
+import { Actions } from '../../states/CustomTaskListState';
+import CustomTaskList from './CustomTaskList';
+
+export interface StateToProps {
+  isOpen: boolean;
+}
+
+export interface DispatchToProps {
+  dismissBar: () => void;
+}
+
+const mapStateToProps = (state: AppState): StateToProps => ({
+  isOpen: state['{{pluginNamespace}}'].customTaskList.isOpen,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchToProps => ({
+  dismissBar: bindActionCreators(Actions.dismissBar, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CustomTaskList);

package/templates/ts/src/components/CustomTaskList/CustomTaskList.Styles.ts

@@ -0,0 +1,14 @@
+import styled from 'react-emotion';
+
+export const CustomTaskListComponentStyles = styled('div')`
+  padding: 10px;
+  margin: 0px;
+  color: #fff;
+  background: #000;
+
+  .accented {
+    color: red;
+    cursor: pointer;
+    float: right;
+  }
+`;

package/templates/ts/src/components/CustomTaskList/CustomTaskList.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { CustomTaskListComponentStyles } from './CustomTaskList.Styles';
+import { StateToProps, DispatchToProps } from './CustomTaskList.Container';
+
+interface OwnProps {
+  // Props passed directly to the component
+}
+
+// Props should be a combination of StateToProps, DispatchToProps, and OwnProps
+type Props = StateToProps & DispatchToProps & OwnProps;
+
+// It is recommended to keep components stateless and use redux for managing states
+const CustomTaskList: React.FunctionComponent<Props> = (props: Props) => {
+  if (!props.isOpen) {
+    return null;
+  }
+
+  return (
+    <CustomTaskListComponentStyles>
+      This is a dismissible demo component
+      <i className="accented" onClick={props.dismissBar} aria-hidden="true">
+        close
+      </i>
+    </CustomTaskListComponentStyles>
+  );
+};
+
+CustomTaskList.displayName = 'foo';
+
+export default CustomTaskList;

package/templates/ts/src/components/__tests__/CustomTaskListComponent.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import CustomTaskList from '../CustomTaskList/CustomTaskList';
+
+describe('CustomTaskListComponent', () => {
+  it('should render demo component', () => {
+    const props = {
+      isOpen: true,
+      dismissBar: () => undefined,
+    };
+    const wrapper = shallow(<CustomTaskList {...props} />);
+    expect(wrapper.render().text()).toMatch('This is a dismissible demo component');
+  });
+});

package/templates/ts/src/index.ts

@@ -0,0 +1,5 @@
+import * as FlexPlugin from '@twilio/flex-plugin';
+
+import {{pluginClassName}} from './{{pluginClassName}}';
+
+FlexPlugin.loadPlugin({{pluginClassName}});

package/templates/ts/src/states/CustomTaskListState.ts

@@ -0,0 +1,30 @@
+import { Action } from '.';
+
+const ACTION_DISMISS_BAR = 'DISMISS_BAR';
+
+export interface CustomTaskListState {
+  isOpen: boolean;
+}
+
+const initialState: CustomTaskListState = {
+  isOpen: true,
+};
+
+export class Actions {
+  public static dismissBar = (): Action => ({ type: ACTION_DISMISS_BAR });
+}
+
+export function reduce(state: CustomTaskListState = initialState, action: Action): CustomTaskListState {
+  // eslint-disable-next-line sonarjs/no-small-switch
+  switch (action.type) {
+    case ACTION_DISMISS_BAR: {
+      return {
+        ...state,
+        isOpen: false,
+      };
+    }
+
+    default:
+      return state;
+  }
+}

package/templates/ts/src/states/index.ts

@@ -0,0 +1,26 @@
+import { AppState as FlexAppState } from '@twilio/flex-ui';
+import { combineReducers, Action as ReduxAction } from 'redux';
+
+import { CustomTaskListState, reduce as CustomTaskListReducer } from './CustomTaskListState';
+
+// Register your redux store under a unique namespace
+export const namespace = '{{pluginNamespace}}';
+
+// Extend this payload to be of type that your ReduxAction is
+export interface Action extends ReduxAction {
+  payload?: any;
+}
+
+// Register all component states under the namespace
+export interface AppState {
+  flex: FlexAppState;
+  '{{pluginNamespace}}': {
+    customTaskList: CustomTaskListState;
+    // Other states
+  };
+}
+
+// Combine the reducers
+export default combineReducers({
+  customTaskList: CustomTaskListReducer,
+});

package/templates/ts/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "rootDir": ".",
+    "outDir": "build",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": [
+    "./src/**/*"
+  ],
+  "exclude": [
+    "./**/*.test.ts",
+    "./**/*.test.tsx",
+    "./**/__mocks__/*.ts",
+    "./**/__mocks__/*.tsx"
+  ]
+}