@nethesis/phone-island 0.2.0

package/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "env": {
+      "browser": true,
+      "es2021": true,
+      "jest": true
+  },
+  "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "prettier",
+      "plugin:storybook/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+  },
+  "plugins": [
+      "react",
+      "react-hooks",
+      "@typescript-eslint",
+      "prettier"
+  ],
+  "rules": {
+      "react/react-in-jsx-scope": "off",
+      "camelcase": "error",
+      "spaced-comment": "error",
+      "quotes": ["error", "single"],
+      "no-duplicate-imports": "error",
+      "react/display-name": false
+  },
+  "settings": {
+      "import/resolver": {
+          "typescript": {}
+      }
+  }
+}

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true
+}

package/.storybook/main.js

@@ -0,0 +1,20 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+  typescript: {
+    check: true // type-check stories during Storybook build
+  }
+}

package/.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../src/index.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package/README.md

@@ -0,0 +1,64 @@
+# Scaffolding
+
+- **widget-build** - contains the build of the widget version
+- **widget-example** - contains the usage example of the built widget
+- **dist** - contains the component lib build
+- **src/index.ts** - is the entry point for the component lib and exports the React component
+- **src/index.widget.tsx** - is the entry point for the widget that is built as a single js and css file
+
+# Development
+
+Install deps
+```
+npm install
+```
+
+Run Storybook
+```
+npm run dev
+```
+The main component can be developed using Storybook. Inside the story is rendered the component exported by the final component library.
+
+Tailwind CSS is enable by default.
+
+# Import locally
+
+Run build and start watch
+
+```
+npm run watch
+```
+
+Go to the project directory
+
+```
+cd <local-project>
+```
+
+Link the ```./dist``` directory
+
+```
+npm link <path-to-phone-island/dist>
+```
+
+# Build
+
+Build component library
+
+```
+npm run build
+```
+Build widget
+```
+npm run build:widget
+```
+Serve the widget
+```
+npm run serve:widget
+```
+
+As you can see the app/component can be built in two ways.
+
+- The component library built with Rollup
+- The widget files built with Parcel
+

package/decs.d.ts

@@ -0,0 +1 @@
+declare module 'janus-gateway'

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@nethesis/phone-island",
+  "author": "Nethesis",
+  "version": "0.2.0",
+  "private": false,
+  "dependencies": {
+    "@swc/helpers": "^0.4.12",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "5.0.1",
+    "socket.io-client": "^4.5.3",
+    "webrtc-adapter": "^8.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "dev": "start-storybook -p 6006 -s public",
+    "test": "react-scripts test",
+    "watch": "rm -rf ./dist && npm run build:css && rollup -w -c",
+    "build": "rm -rf ./dist && npm run build:css && rollup -c",
+    "build:css": "NODE_ENV=production npx tailwindcss -o ./dist/index.css --minify",
+    "build:widget": "parcel build ./src/index.widget.tsx --dist-dir dist-widget --no-source-maps",
+    "serve:widget": "rm -rf ./widget-example/static/* && cp -rf ./dist-widget/* ./widget-example/static && npx http-server ./widget-example -o -c-1",
+    "build-storybook": "build-storybook -s public",
+    "publish": "np --no-tests"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@parcel/transformer-typescript-types": "^2.8.0",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/node-logger": "^6.5.13",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/jest": "^29.2.2",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "autoprefixer": "^10.4.13",
+    "babel": "^6.23.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "buffer": "^5.7.1",
+    "np": "^7.6.2",
+    "parcel": "^2.0.0",
+    "postcss": "^8.4.18",
+    "prop-types": "^15.8.1",
+    "rollup": "^2.79.1",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "tailwindcss": "^3.2.2",
+    "typescript": "^4.8.4",
+    "webpack": "^5.74.0"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {}
+  }
+}

package/public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <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" />
+
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <code>
+      <p>Start developing the component running the following command in your terminal:</p>
+      <h2>npm run dev</h2>
+    </code>
+  </body>
+</html>

package/rollup.config.ts

@@ -0,0 +1,59 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import postcss from 'rollup-plugin-postcss'
+import babel from '@rollup/plugin-babel'
+import { terser } from 'rollup-plugin-terser'
+import { getFiles } from './scripts/buildUtils'
+import generatePackageJson from 'rollup-plugin-generate-package-json'
+
+export default {
+  input: ['./src/index.ts', ...getFiles('./src/components', ['.js', '.ts', '.jsx', '.tsx'])],
+  output: [
+    {
+      format: 'cjs',
+      dir: 'dist',
+      sourcemap: true,
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+      exports: 'named',
+    },
+  ],
+  plugins: [
+    resolve({
+      browser: true,
+    }),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: true,
+      declarationDir: 'dist',
+      exclude: [
+        'src/*.widget.{js,jsx,ts,tsx}',
+        'src/stories/**',
+        'src/tests/**',
+        'node_modules',
+        'dist',
+        'lib/janus.js',
+      ],
+    }),
+    babel({
+      include: ['**.js', 'node_modules/**'],
+      babelHelpers: 'bundled',
+      presets: ['@babel/preset-env'],
+    }),
+    postcss(),
+    terser(),
+    generatePackageJson({
+      baseContents: (pkg) => ({
+        name: pkg.name,
+        author: pkg.author,
+        dependencies: pkg.dependencies,
+        private: pkg.private,
+        main: './index.js',
+        types: './index.d.ts',
+      }),
+    }),
+  ],
+  external: ['react', 'react-dom', 'react-scripts'],
+}

package/scripts/buildUtils.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/prefer-default-export */
+const fs = require('fs');
+
+export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
+  let fileNames = [];
+  const dirs = fs.readdirSync(entry);
+
+  dirs.forEach((dir) => {
+    const path = `${entry}/${dir}`;
+
+    if (fs.lstatSync(path).isDirectory()) {
+      fileNames = [
+        ...fileNames,
+        ...getFiles(path, extensions, excludeExtensions),
+      ];
+
+      return;
+    }
+
+    if (!excludeExtensions.some((exclude) => dir.endsWith(exclude))
+      && extensions.some((ext) => dir.endsWith(ext))
+    ) {
+      fileNames.push(path);
+    }
+  });
+
+  return fileNames;
+};