From 02e8f4069da8b5bc1609756483b1cbf72bb56ddb Mon Sep 17 00:00:00 2001 From: LianaHus Date: Tue, 24 Nov 2020 10:43:04 +0100 Subject: [PATCH] adding files --- libs/remix-ui/modal-dialog/.babelrc | 4 + libs/remix-ui/modal-dialog/.eslintrc | 250 ++++++++++++++++++ libs/remix-ui/modal-dialog/README.md | 7 + .../modal-dialog/babel-jest.config.json | 14 + libs/remix-ui/modal-dialog/jest.config.js | 12 + libs/remix-ui/modal-dialog/src/index.ts | 2 + .../src/lib/modal-dialog-custom.css | 0 .../src/lib/modal-dialog-custom.tsx | 17 ++ .../src/lib/remix-ui-modal-dialog.css | 19 ++ .../src/lib/remix-ui-modal-dialog.tsx | 84 ++++++ .../modal-dialog/src/lib/types/index.ts | 10 + libs/remix-ui/modal-dialog/tsconfig.json | 19 ++ libs/remix-ui/modal-dialog/tsconfig.lib.json | 13 + libs/remix-ui/modal-dialog/tsconfig.spec.json | 15 ++ 14 files changed, 466 insertions(+) create mode 100644 libs/remix-ui/modal-dialog/.babelrc create mode 100644 libs/remix-ui/modal-dialog/.eslintrc create mode 100644 libs/remix-ui/modal-dialog/README.md create mode 100644 libs/remix-ui/modal-dialog/babel-jest.config.json create mode 100644 libs/remix-ui/modal-dialog/jest.config.js create mode 100644 libs/remix-ui/modal-dialog/src/index.ts create mode 100644 libs/remix-ui/modal-dialog/src/lib/modal-dialog-custom.css create mode 100644 libs/remix-ui/modal-dialog/src/lib/modal-dialog-custom.tsx create mode 100644 libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.css create mode 100644 libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx create mode 100644 libs/remix-ui/modal-dialog/src/lib/types/index.ts create mode 100644 libs/remix-ui/modal-dialog/tsconfig.json create mode 100644 libs/remix-ui/modal-dialog/tsconfig.lib.json create mode 100644 libs/remix-ui/modal-dialog/tsconfig.spec.json diff --git a/libs/remix-ui/modal-dialog/.babelrc b/libs/remix-ui/modal-dialog/.babelrc new file mode 100644 index 0000000000..09d67939cc --- /dev/null +++ b/libs/remix-ui/modal-dialog/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["@nrwl/react/babel"], + "plugins": [] +} diff --git a/libs/remix-ui/modal-dialog/.eslintrc b/libs/remix-ui/modal-dialog/.eslintrc new file mode 100644 index 0000000000..73f9b856ee --- /dev/null +++ b/libs/remix-ui/modal-dialog/.eslintrc @@ -0,0 +1,250 @@ +{ + "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": ["!**/*"] +} diff --git a/libs/remix-ui/modal-dialog/README.md b/libs/remix-ui/modal-dialog/README.md new file mode 100644 index 0000000000..15ed2e522c --- /dev/null +++ b/libs/remix-ui/modal-dialog/README.md @@ -0,0 +1,7 @@ +# 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). diff --git a/libs/remix-ui/modal-dialog/babel-jest.config.json b/libs/remix-ui/modal-dialog/babel-jest.config.json new file mode 100644 index 0000000000..bf04d5f81f --- /dev/null +++ b/libs/remix-ui/modal-dialog/babel-jest.config.json @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ] +} diff --git a/libs/remix-ui/modal-dialog/jest.config.js b/libs/remix-ui/modal-dialog/jest.config.js new file mode 100644 index 0000000000..576436c19f --- /dev/null +++ b/libs/remix-ui/modal-dialog/jest.config.js @@ -0,0 +1,12 @@ +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' +}; diff --git a/libs/remix-ui/modal-dialog/src/index.ts b/libs/remix-ui/modal-dialog/src/index.ts new file mode 100644 index 0000000000..095c6e25a9 --- /dev/null +++ b/libs/remix-ui/modal-dialog/src/index.ts @@ -0,0 +1,2 @@ +export * from './lib/modal-dialog-custom'; +export * from './lib/remix-ui-modal-dialog'; diff --git a/libs/remix-ui/modal-dialog/src/lib/modal-dialog-custom.css b/libs/remix-ui/modal-dialog/src/lib/modal-dialog-custom.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/remix-ui/modal-dialog/src/lib/modal-dialog-custom.tsx b/libs/remix-ui/modal-dialog/src/lib/modal-dialog-custom.tsx new file mode 100644 index 0000000000..7361cbf917 --- /dev/null +++ b/libs/remix-ui/modal-dialog/src/lib/modal-dialog-custom.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import './modal-dialog-custom.css'; + +/* eslint-disable-next-line */ +export interface ModalDialogCustomProps {} + +export const ModalDialogCustom = (props: ModalDialogCustomProps) => { + + return ( +
+

Welcome to modal-dialog-custom!

+
+ ); +}; + +export default ModalDialogCustom; diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.css b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.css new file mode 100644 index 0000000000..e9385c251c --- /dev/null +++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.css @@ -0,0 +1,19 @@ +.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 diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx new file mode 100644 index 0000000000..0bdfd404c6 --- /dev/null +++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx @@ -0,0 +1,84 @@ +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 (<> + + ); +}; + +export default ModalDialog; diff --git a/libs/remix-ui/modal-dialog/src/lib/types/index.ts b/libs/remix-ui/modal-dialog/src/lib/types/index.ts new file mode 100644 index 0000000000..99e8ad16e4 --- /dev/null +++ b/libs/remix-ui/modal-dialog/src/lib/types/index.ts @@ -0,0 +1,10 @@ +/* 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 diff --git a/libs/remix-ui/modal-dialog/tsconfig.json b/libs/remix-ui/modal-dialog/tsconfig.json new file mode 100644 index 0000000000..42b7ee636f --- /dev/null +++ b/libs/remix-ui/modal-dialog/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "jsx": "react", + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/remix-ui/modal-dialog/tsconfig.lib.json b/libs/remix-ui/modal-dialog/tsconfig.lib.json new file mode 100644 index 0000000000..b560bc4dec --- /dev/null +++ b/libs/remix-ui/modal-dialog/tsconfig.lib.json @@ -0,0 +1,13 @@ +{ + "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"] +} diff --git a/libs/remix-ui/modal-dialog/tsconfig.spec.json b/libs/remix-ui/modal-dialog/tsconfig.spec.json new file mode 100644 index 0000000000..1798b378a9 --- /dev/null +++ b/libs/remix-ui/modal-dialog/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.spec.js", + "**/*.spec.jsx", + "**/*.d.ts" + ] +}