Prepare demo

.gitignore

@@ -5,3 +5,4 @@ node_modules
 .env
 .idea
 .yarn/install-state.gz
+dist

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100
+}

README.md

@@ -1 +1,12 @@
-# flex-plugins
+## Instructions
+
+### Prerequisites
+
+You will need a Twilio account with Flex `1.34.1` installed.
+
+```bash
+yarn install
+yarn start
+```
+
+Navigate to http://localhost:3000/custom-route to explore cases.

package.json

@@ -1,8 +1,19 @@
 {
   "name": "flex-plugins",
   "packageManager": "[email protected]",
+  "engines": {
+    "node": "14"
+  },
   "workspaces": [
     "packages/*",
     "plugins/*"
-  ]
+  ],
+  "devDependencies": {
+    "prettier": "3.0.0"
+  },
+  "scripts": {
+    "library:build": "yarn workspace shared-component-library build",
+    "plugin:start": "yarn workspace plugin-sample dev",
+    "start": "yarn library:build && yarn plugin:start"
+  }
 }

packages/shared-component-library/README.md

@@ -0,0 +1 @@
+# shared-component-library

packages/shared-component-library/build.mjs

@@ -0,0 +1,38 @@
+import * as esbuild from 'esbuild';
+import { globSync } from 'glob';
+import { dtsPlugin } from 'esbuild-plugin-d.ts';
+
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+const packageJson = require('./package.json');
+
+const entryPoints = globSync([
+  'src/index.ts',
+]);
+
+const getExternalPeers = ({ peerDependencies }) => {
+  const externals = Object.keys(peerDependencies);
+  const wildcards = externals.map((packageName) => `${packageName}/*`);
+
+  return [
+    ...externals,
+    ...wildcards,
+  ];
+};
+
+await esbuild.build({
+  outbase: 'src',
+  entryPoints,
+  bundle: true,
+  format: 'cjs',
+  outdir: 'dist',
+  color: true,
+  logLevel: 'info',
+  sourcemap: 'linked',
+  minify: false,
+  plugins: [
+    dtsPlugin(),
+  ],
+  external: getExternalPeers(packageJson),
+});

packages/shared-component-library/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "shared-component-library",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "packageManager": "[email protected]",
+  "peerDependencies": {
+    "@twilio-paste/core": "19.5.0",
+    "@twilio-paste/icons": "11.2.2",
+    "esbuild": "^0.18.11",
+    "esbuild-plugin-d.ts": "^1.1.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "25.0.2",
+    "@rollup/plugin-node-resolve": "15.1.0",
+    "@rollup/plugin-typescript": "11.1.2",
+    "@twilio-paste/core": "19.5.0",
+    "@twilio-paste/icons": "11.2.2",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "esbuild": "0.18.11",
+    "esbuild-plugin-d.ts": "1.1.0",
+    "glob": "10.3.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "rollup": "3.26.2",
+    "rollup-plugin-dts": "5.3.0",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "typescript": "5.1.6"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "build:rollup": "rollup -c --bundleConfigAsCjs"
+  }
+}

packages/shared-component-library/rollup.config.js

@@ -0,0 +1,33 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+
+const packageJson = require("./package.json");
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({
+        include: ['./src/**/*.{ts,tsx}'],
+      }),
+    ],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: "dist/index.d.ts", format: "es" }],
+    plugins: [dts.default()],
+  },
+];

packages/shared-component-library/src/components/CustomContext.tsx

@@ -0,0 +1,19 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+
+export interface CustomContextValue {
+  version: string;
+}
+
+export const CustomContext = createContext<CustomContextValue>({
+  version: '0.0.0',
+});
+
+export const useCustomContext = () => useContext(CustomContext);
+
+export interface CustomContextProviderProps {
+  children: ReactNode;
+}
+
+export function CustomContextProvider({ children }: CustomContextProviderProps) {
+  return <CustomContext.Provider value={{ version: '1.0.0' }}>{children}</CustomContext.Provider>;
+}