adding files

libs/remix-ui/modal-dialog/.babelrc

+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/modal-dialog/.eslintrc

+{
+  "rules": {
+    "@typescript-eslint/ban-types": "off",
+    "no-case-declarations": "off",
+    "array-callback-return": "warn",
+    "dot-location": ["warn", "property"],
+    "eqeqeq": ["warn", "smart"],
+    "new-parens": "warn",
+    "no-caller": "warn",
+    "no-cond-assign": ["warn", "except-parens"],
+    "no-const-assign": "warn",
+    "no-control-regex": "warn",
+    "no-delete-var": "warn",
+    "no-dupe-args": "warn",
+    "no-dupe-keys": "warn",
+    "no-duplicate-case": "warn",
+    "no-empty-character-class": "warn",
+    "no-empty-pattern": "warn",
+    "no-eval": "warn",
+    "no-ex-assign": "warn",
+    "no-extend-native": "warn",
+    "no-extra-bind": "warn",
+    "no-extra-label": "warn",
+    "no-fallthrough": "warn",
+    "no-func-assign": "warn",
+    "no-implied-eval": "warn",
+    "no-invalid-regexp": "warn",
+    "no-iterator": "warn",
+    "no-label-var": "warn",
+    "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }],
+    "no-lone-blocks": "warn",
+    "no-loop-func": "warn",
+    "no-mixed-operators": [
+      "warn",
+      {
+        "groups": [
+          ["&", "|", "^", "~", "<<", ">>", ">>>"],
+          ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+          ["&&", "||"],
+          ["in", "instanceof"]
+        ],
+        "allowSamePrecedence": false
+      }
+    ],
+    "no-multi-str": "warn",
+    "no-native-reassign": "warn",
+    "no-negated-in-lhs": "warn",
+    "no-new-func": "warn",
+    "no-new-object": "warn",
+    "no-new-symbol": "warn",
+    "no-new-wrappers": "warn",
+    "no-obj-calls": "warn",
+    "no-octal": "warn",
+    "no-octal-escape": "warn",
+    "no-redeclare": "warn",
+    "no-regex-spaces": "warn",
+    "no-restricted-syntax": ["warn", "WithStatement"],
+    "no-script-url": "warn",
+    "no-self-assign": "warn",
+    "no-self-compare": "warn",
+    "no-sequences": "warn",
+    "no-shadow-restricted-names": "warn",
+    "no-sparse-arrays": "warn",
+    "no-template-curly-in-string": "warn",
+    "no-this-before-super": "warn",
+    "no-throw-literal": "warn",
+    "no-restricted-globals": [
+      "error",
+      "addEventListener",
+      "blur",
+      "close",
+      "closed",
+      "confirm",
+      "defaultStatus",
+      "defaultstatus",
+      "event",
+      "external",
+      "find",
+      "focus",
+      "frameElement",
+      "frames",
+      "history",
+      "innerHeight",
+      "innerWidth",
+      "length",
+      "location",
+      "locationbar",
+      "menubar",
+      "moveBy",
+      "moveTo",
+      "name",
+      "onblur",
+      "onerror",
+      "onfocus",
+      "onload",
+      "onresize",
+      "onunload",
+      "open",
+      "opener",
+      "opera",
+      "outerHeight",
+      "outerWidth",
+      "pageXOffset",
+      "pageYOffset",
+      "parent",
+      "print",
+      "removeEventListener",
+      "resizeBy",
+      "resizeTo",
+      "screen",
+      "screenLeft",
+      "screenTop",
+      "screenX",
+      "screenY",
+      "scroll",
+      "scrollbars",
+      "scrollBy",
+      "scrollTo",
+      "scrollX",
+      "scrollY",
+      "self",
+      "status",
+      "statusbar",
+      "stop",
+      "toolbar",
+      "top"
+    ],
+    "no-unexpected-multiline": "warn",
+    "no-unreachable": "warn",
+    "no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true,
+        "allowTaggedTemplates": true
+      }
+    ],
+    "no-unused-labels": "warn",
+    "no-useless-computed-key": "warn",
+    "no-useless-concat": "warn",
+    "no-useless-escape": "warn",
+    "no-useless-rename": [
+      "warn",
+      {
+        "ignoreDestructuring": false,
+        "ignoreImport": false,
+        "ignoreExport": false
+      }
+    ],
+    "no-with": "warn",
+    "no-whitespace-before-property": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "require-yield": "warn",
+    "rest-spread-spacing": ["warn", "never"],
+    "strict": ["warn", "never"],
+    "unicode-bom": ["warn", "never"],
+    "use-isnan": "warn",
+    "valid-typeof": "warn",
+    "no-restricted-properties": [
+      "error",
+      {
+        "object": "require",
+        "property": "ensure",
+        "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
+      },
+      {
+        "object": "System",
+        "property": "import",
+        "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
+      }
+    ],
+    "getter-return": "warn",
+    "import/first": "error",
+    "import/no-amd": "error",
+    "import/no-webpack-loader-syntax": "error",
+    "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }],
+    "react/jsx-no-comment-textnodes": "warn",
+    "react/jsx-no-duplicate-props": "warn",
+    "react/jsx-no-target-blank": "warn",
+    "react/jsx-no-undef": "error",
+    "react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }],
+    "react/jsx-uses-react": "warn",
+    "react/jsx-uses-vars": "warn",
+    "react/no-danger-with-children": "warn",
+    "react/no-direct-mutation-state": "warn",
+    "react/no-is-mounted": "warn",
+    "react/no-typos": "error",
+    "react/react-in-jsx-scope": "error",
+    "react/require-render-return": "error",
+    "react/style-prop-object": "warn",
+    "react/jsx-no-useless-fragment": "warn",
+    "jsx-a11y/accessible-emoji": "warn",
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/anchor-has-content": "warn",
+    "jsx-a11y/anchor-is-valid": [
+      "warn",
+      { "aspects": ["noHref", "invalidHref"] }
+    ],
+    "jsx-a11y/aria-activedescendant-has-tabindex": "warn",
+    "jsx-a11y/aria-props": "warn",
+    "jsx-a11y/aria-proptypes": "warn",
+    "jsx-a11y/aria-role": "warn",
+    "jsx-a11y/aria-unsupported-elements": "warn",
+    "jsx-a11y/heading-has-content": "warn",
+    "jsx-a11y/iframe-has-title": "warn",
+    "jsx-a11y/img-redundant-alt": "warn",
+    "jsx-a11y/no-access-key": "warn",
+    "jsx-a11y/no-distracting-elements": "warn",
+    "jsx-a11y/no-redundant-roles": "warn",
+    "jsx-a11y/role-has-required-aria-props": "warn",
+    "jsx-a11y/role-supports-aria-props": "warn",
+    "jsx-a11y/scope": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "default-case": "off",
+    "no-dupe-class-members": "off",
+    "no-undef": "off",
+    "@typescript-eslint/consistent-type-assertions": "warn",
+    "no-array-constructor": "off",
+    "@typescript-eslint/no-array-constructor": "warn",
+    "@typescript-eslint/no-namespace": "error",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "warn",
+      {
+        "functions": false,
+        "classes": false,
+        "variables": false,
+        "typedefs": false
+      }
+    ],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "args": "none", "ignoreRestSiblings": true }
+    ],
+    "no-useless-constructor": "off",
+    "@typescript-eslint/no-useless-constructor": "warn"
+  },
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "settings": { "react": { "version": "detect" } },
+  "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
+  "extends": ["../../../.eslintrc"],
+  "ignorePatterns": ["!**/*"]
+}

libs/remix-ui/modal-dialog/README.md

+# remix-ui-modal-dialog
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-modal-dialog` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/modal-dialog/babel-jest.config.json

+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

libs/remix-ui/modal-dialog/jest.config.js

+module.exports = {
+  name: 'remix-ui-modal-dialog',
+  preset: '../../../jest.config.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      { cwd: __dirname, configFile: './babel-jest.config.json' }
+    ]
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../coverage/libs/remix-ui/modal-dialog'
+};

libs/remix-ui/modal-dialog/src/index.ts

+export * from './lib/modal-dialog-custom';
+export * from './lib/remix-ui-modal-dialog';

libs/remix-ui/modal-dialog/src/lib/modal-dialog-custom.tsx

+import React from 'react';
+
+import './modal-dialog-custom.css';
+
+/* eslint-disable-next-line */
+export interface ModalDialogCustomProps {}
+
+export const ModalDialogCustom = (props: ModalDialogCustomProps) => {
+  
+  return (
+    <div>
+      <h1>Welcome to modal-dialog-custom!</h1>
+    </div>
+  );
+};
+
+export default ModalDialogCustom;

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.css

+.remixModalContent {
+  box-shadow: 0 0 8px 1000px rgba(0,0,0,0.6),0 6px 20px 0 rgba(0,0,0,0.19);
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop;
+  animation-duration: 0.4s
+}
+.remixModalBody {
+  overflow-y: auto;
+  max-height: 600px;
+}
+@-webkit-keyframes animatetop {
+  from {top: -300px; opacity: 0}
+  to {top: 0; opacity: 1}
+}
+@keyframes animatetop {
+  from {top: -300px; opacity: 0}
+  to {top: 0; opacity: 1}
+}
\ No newline at end of file

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

+import React, { useRef, useState, useEffect } from 'react';
+
+import './remix-ui-modal-dialog.css';
+import {ModalDialogProps} from './types';
+
+/* eslint-disable-next-line */
+
+
+export const ModalDialog = (props: ModalDialogProps) => {
+  const [state, setState] = useState({
+    toggleBtn: true,
+    hideState: true
+  })
+  const okBtn = useRef(null)
+  const cancelBtn = useRef(null)
+  useEffect(() => {
+    setState(prevState => {
+      console.log("useeffect to ", props.hide)  
+      return {...prevState, hideState: props.hide}
+    })
+}, [props.hide])
+  const modalKeyEvent = (keyCode) => {
+    console.log("key is ", keyCode)
+    if (keyCode === 27) { // Esc
+      if (props.cancel && props.cancel.fn) props.cancel.fn()
+      setState((prevState)=>{return {...prevState, hideState: true}})
+    //} else if (keyCode === 13) { // Enter
+    //  okListener()
+    } else if (keyCode === 37) {
+      // todo && footerIsActive) { // Arrow Left
+      setState((prevState)=>{return {...prevState, toggleBtn: true}})
+      okBtn.current.focus()
+    } else if (keyCode === 39) {
+      // todo && footerIsActive) { // Arrow Right
+      setState((prevState)=>{return {...prevState, toggleBtn: false}})
+      cancelBtn.current.focus()
+    }
+  }
+  return (<>
+    <div
+      id="modal-dialog"
+      data-id="modalDialogContainer"
+      data-backdrop="static"  
+      data-keyboard="false"
+      tabIndex={-1}
+      className={"modal " + (state.hideState ? "d-none" : "d-block")}
+      role="dialog"
+      onKeyDown={({keyCode})=>{modalKeyEvent(keyCode)}}
+    >
+      <div id="modal-background" className="modal-dialog" role="document">
+        <div className={"modal-content remixModalContent " + (props.opts ? props.opts.class ? props.opts.class : '': '')}>
+          <div className="modal-header">
+            <h6 className="modal-title" data-id="modalDialogModalTitle">
+            {props.title && props.title}
+            </h6>
+            {!props.opts.hideClose &&
+            <span className="modal-close">
+              <i id="modal-close" title="Close" className="fas fa-times" aria-hidden="true"></i>
+            </span>
+            }
+          </div>
+          <div className="modal-body text-break remixModalBody" data-id="modalDialogModalBody">
+            {props.content &&
+            props.content
+            }
+          </div>
+          <div className="modal-footer" data-id="modalDialogModalFooter">
+            {/* todo add autofocus ^^ */}
+            <span
+              id="modal-footer-ok"
+              className={"modal-ok btn btn-sm " + (state.toggleBtn ? "btn-dark" : "btn-light")}
+              onClick={() => {if (props.ok && props.ok.fn) props.ok.fn()}}
+            >
+              {props.ok&&props.ok.label ? props.ok.label: 'OK'}
+            </span>
+            <span id="modal-footer-cancel" className={"modal-cancel btn btn-sm " + (state.toggleBtn ? "btn-light" : "btn-dark")} data-dismiss="modal">{props.cancel&&props.cancel.label ? props.cancel.label: 'Cancel'}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </>);
+};
+
+export default ModalDialog;

libs/remix-ui/modal-dialog/src/lib/types/index.ts

+/* eslint-disable */
+export interface ModalDialogProps {
+  title?: string,
+  content?: JSX.Element,
+  ok?: {label:string, fn: Function},
+  cancel?: {label:string, fn: Function},
+  focusSelector?: string,
+  opts?: {class: string, hideClose?: boolean},
+  hide?: boolean
+}
\ No newline at end of file

libs/remix-ui/modal-dialog/tsconfig.json

+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/remix-ui/modal-dialog/tsconfig.lib.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/modal-dialog/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}