From 4d782e59af95a3481fa2c93ef917606ec03ff4aa Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 9 Jun 2020 14:47:36 +0100 Subject: [PATCH 01/11] Add basic components --- package.json | 2 ++ src/components/Button.scss | 35 ++++++++++++++++++++++ src/components/Button.tsx | 61 ++++++++++++++++++++++++++++++++++++++ src/components/Tile.scss | 27 +++++++++++++++++ src/components/Tile.tsx | 27 +++++++++++++++++ yarn.lock | 10 +++++++ 6 files changed, 162 insertions(+) create mode 100644 src/components/Button.scss create mode 100644 src/components/Button.tsx create mode 100644 src/components/Tile.scss create mode 100644 src/components/Tile.tsx diff --git a/package.json b/package.json index 9852b9c..9762109 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,9 @@ ] }, "devDependencies": { + "@types/classnames": "^2.2.10", "@typescript-eslint/parser": "^3.0.2", + "classnames": "^2.2.6", "husky": "^4.2.5", "lint-staged": "^10.2.7", "node-sass": "^4.14.1", diff --git a/src/components/Button.scss b/src/components/Button.scss new file mode 100644 index 0000000..35497aa --- /dev/null +++ b/src/components/Button.scss @@ -0,0 +1,35 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +@import "../color-scheme"; + +.button { + width: 100%; + + padding: 1rem; + border-radius: 1000px; + border: 0; + + background-color: $foreground; + color: $background; + + font-size: 14px; + font-weight: 500px; +} + +.buttonHighlight { + background-color: $accent; +} diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..45e264e --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,61 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import classnames from "classnames"; + +import "./Button.scss"; + +interface IProps extends React.ButtonHTMLAttributes { + // Briefly display these instead of the children onClick + flashChildren?: React.ReactNode; +} + +/** + * Like a normal button except it will flash content when clicked. + */ +export default ({ + onClick, + children, + flashChildren, + className, + ...restProps +}: IProps) => { + const [wasClicked, setWasClicked] = React.useState(false); + + const wrappedOnClick: React.MouseEventHandler = (e) => { + if (onClick) { + onClick(e); + } + + setWasClicked(true); + window.setTimeout(() => { + setWasClicked(false); + }, 1000); + }; + + const content = wasClicked ? flashChildren : children; + + const classNames = classnames("button", className, { + buttonHighlight: wasClicked, + }); + + return ( + + ); +}; diff --git a/src/components/Tile.scss b/src/components/Tile.scss new file mode 100644 index 0000000..3fa7da1 --- /dev/null +++ b/src/components/Tile.scss @@ -0,0 +1,27 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +@import "../color-scheme"; + +.tile { + background-color: $background; + + border-radius: 8px; + padding: 1rem; + + display: flex; + flex-direction: column; +} diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx new file mode 100644 index 0000000..55389db --- /dev/null +++ b/src/components/Tile.tsx @@ -0,0 +1,27 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; + +import "./Tile.scss"; + +interface IProps { + children: React.ReactNode; +} + +export default (props: IProps) => { + return
{props.children}
; +}; diff --git a/yarn.lock b/yarn.lock index 9b9b85b..e1c531e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1513,6 +1513,11 @@ dependencies: "@babel/types" "^7.3.0" +"@types/classnames@^2.2.10": + version "2.2.10" + resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999" + integrity sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ== + "@types/color-name@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" @@ -3011,6 +3016,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.6: + version "2.2.6" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" + integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== + clean-css@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78" From cece18abb24aace9c5e4bf7dac83f5f5a2975d0c Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 24 Jun 2020 15:20:30 +0100 Subject: [PATCH 02/11] Fix linting --- .eslintrc.js | 41 +------- package.json | 112 ++++++++++---------- src/App.tsx | 4 +- src/layouts/SingleColumn.tsx | 4 +- yarn.lock | 196 +++++++++++++++++++++++++++++++---- 5 files changed, 244 insertions(+), 113 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index f18c291..5f3844b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,39 +1,8 @@ module.exports = { - parser: "@typescript-eslint/parser", - parserOptions: { - sourceType: "module", - }, - env: { - browser: true, - jest: true, - }, - extends: ["eslint:recommended", "google"], - plugins: [ - "jest", + "extends": [ + "matrix-org/ts", + "matrix-org/react", + "react-app", ], - rules: { - "max-len": ["error", { - code: 90, - ignoreComments: true, - }], - curly: ["error", "multi-line"], - "prefer-const": ["error"], - "comma-dangle": ["error", { - arrays: "always-multiline", - objects: "always-multiline", - imports: "always-multiline", - exports: "always-multiline", - functions: "always-multiline", - }], - quotes: ["single"], - "brace-style": ["error", "1tbs", { "allowSingleLine": true }], - "camelcase": ["error", { properties: "always" } ], - "no-multi-spaces": ["error", { "ignoreEOLComments": true }], - "space-before-function-paren": ["error", { - "anonymous": "never", - "named": "never", - "asyncArrow": "always", - }], - "arrow-parens": "error", - } } + diff --git a/package.json b/package.json index 9852b9c..addf87b 100644 --- a/package.json +++ b/package.json @@ -1,57 +1,61 @@ { - "name": "matrix.to", - "version": "0.1.0", - "private": true, - "dependencies": { - "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^9.3.2", - "@testing-library/user-event": "^7.1.2", - "@types/jest": "^24.0.0", - "@types/node": "^12.0.0", - "@types/react": "^16.9.0", - "@types/react-dom": "^16.9.0", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "react-scripts": "3.4.1", - "typescript": "~3.7.2" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "lint-staged": { - "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [ - "prettier --write", - "git add" - ] - }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" + "name": "matrix.to", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.3.2", + "@testing-library/user-event": "^7.1.2", + "@types/jest": "^24.0.0", + "@types/node": "^12.0.0", + "@types/react": "^16.9.0", + "@types/react-dom": "^16.9.0", + "eslint-config-matrix-org": "^0.1.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-scripts": "3.4.1", + "typescript": "~3.7.2" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject", + "lint:fix": "eslint src/**/*.ts src/**/*.tsx --fix" + }, + "lint-staged": { + "src/**/*.{js,jsx,ts,tsx}": [ + "eslint", + "prettier --write", + "git add" + ], + "src/**/*.{json,css,scss,md}": [ + "prettier --write", + "git add" + ] + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "eslint-config-react-app": "^5.2.1", + "husky": "^4.2.5", + "lint-staged": "^10.2.7", + "node-sass": "^4.14.1", + "prettier": "^2.0.5" } - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "@typescript-eslint/parser": "^3.0.2", - "husky": "^4.2.5", - "lint-staged": "^10.2.7", - "node-sass": "^4.14.1", - "prettier": "^2.0.5" - } } diff --git a/src/App.tsx b/src/App.tsx index 77190f8..ec1db69 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,13 +19,13 @@ import "./App.scss"; import SingleColumn from "./layouts/SingleColumn"; -function App() { +const App: React.FC = () => { return (
); -} +}; export default App; diff --git a/src/layouts/SingleColumn.tsx b/src/layouts/SingleColumn.tsx index 564d785..406d170 100644 --- a/src/layouts/SingleColumn.tsx +++ b/src/layouts/SingleColumn.tsx @@ -22,6 +22,8 @@ interface IProps { children?: React.ReactNode; } -export default (props: IProps) => { +const SingleColumn: React.FC = (props: IProps) => { return
{props.children}
; }; + +export default SingleColumn; diff --git a/yarn.lock b/yarn.lock index 9b9b85b..f68d317 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1569,6 +1569,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339" integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA== +"@types/json5@^0.0.29": + version "0.0.29" + resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" + integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= + "@types/minimatch@*": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" @@ -1671,6 +1676,18 @@ regexpp "^3.0.0" tsutils "^3.17.1" +"@typescript-eslint/eslint-plugin@^3.4.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.4.0.tgz#8378062e6be8a1d049259bdbcf27ce5dfbeee62b" + integrity sha512-wfkpiqaEVhZIuQRmudDszc01jC/YR7gMSxa6ulhggAe/Hs0KVIuo9wzvFiDbG3JD5pRFQoqnf4m7REDsUvBnMQ== + dependencies: + "@typescript-eslint/experimental-utils" "3.4.0" + debug "^4.1.1" + functional-red-black-tree "^1.0.1" + regexpp "^3.0.0" + semver "^7.3.2" + tsutils "^3.17.1" + "@typescript-eslint/experimental-utils@2.34.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f" @@ -1681,13 +1698,13 @@ eslint-scope "^5.0.0" eslint-utils "^2.0.0" -"@typescript-eslint/experimental-utils@3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.1.0.tgz#2d5dba7c2ac2a3da3bfa3f461ff64de38587a872" - integrity sha512-Zf8JVC2K1svqPIk1CB/ehCiWPaERJBBokbMfNTNRczCbQSlQXaXtO/7OfYz9wZaecNvdSvVADt6/XQuIxhC79w== +"@typescript-eslint/experimental-utils@3.4.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.4.0.tgz#8a44dfc6fb7f1d071937b390fe27608ebda122b8" + integrity sha512-rHPOjL43lOH1Opte4+dhC0a/+ks+8gOBwxXnyrZ/K4OTAChpSjP76fbI8Cglj7V5GouwVAGaK+xVwzqTyE/TPw== dependencies: "@types/json-schema" "^7.0.3" - "@typescript-eslint/typescript-estree" "3.1.0" + "@typescript-eslint/typescript-estree" "3.4.0" eslint-scope "^5.0.0" eslint-utils "^2.0.0" @@ -1701,14 +1718,14 @@ "@typescript-eslint/typescript-estree" "2.34.0" eslint-visitor-keys "^1.1.0" -"@typescript-eslint/parser@^3.0.2": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.1.0.tgz#9c02ba5d88ad2355672f39e6cd4176f172dd47f8" - integrity sha512-NcDSJK8qTA2tPfyGiPes9HtVKLbksmuYjlgGAUs7Ld2K0swdWibnCq9IJx9kJN8JJdgUJSorFiGaPHBgH81F/Q== +"@typescript-eslint/parser@^3.4.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.4.0.tgz#fe52b68c5cb3bba3f5d875bd17adb70420d49d8d" + integrity sha512-ZUGI/de44L5x87uX5zM14UYcbn79HSXUR+kzcqU42gH0AgpdB/TjuJy3m4ezI7Q/jk3wTQd755mxSDLhQP79KA== dependencies: "@types/eslint-visitor-keys" "^1.0.0" - "@typescript-eslint/experimental-utils" "3.1.0" - "@typescript-eslint/typescript-estree" "3.1.0" + "@typescript-eslint/experimental-utils" "3.4.0" + "@typescript-eslint/typescript-estree" "3.4.0" eslint-visitor-keys "^1.1.0" "@typescript-eslint/typescript-estree@2.34.0": @@ -1724,10 +1741,10 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/typescript-estree@3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.1.0.tgz#eaff52d31e615e05b894f8b9d2c3d8af152a5dd2" - integrity sha512-+4nfYauqeQvK55PgFrmBWFVYb6IskLyOosYEmhH3mSVhfBp9AIJnjExdgDmKWoOBHRcPM8Ihfm2BFpZf0euUZQ== +"@typescript-eslint/typescript-estree@3.4.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.4.0.tgz#6a787eb70b48969e4cd1ea67b057083f96dfee29" + integrity sha512-zKwLiybtt4uJb4mkG5q2t6+W7BuYx2IISiDNV+IY68VfoGwErDx/RfVI7SWL4gnZ2t1A1ytQQwZ+YOJbHHJ2rw== dependencies: debug "^4.1.1" eslint-visitor-keys "^1.1.0" @@ -2178,7 +2195,7 @@ array-unique@^0.3.2: resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg= -array.prototype.flat@^1.2.1: +array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b" integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ== @@ -2321,7 +2338,7 @@ babel-code-frame@^6.22.0: esutils "^2.0.2" js-tokens "^3.0.2" -babel-eslint@10.1.0: +babel-eslint@10.1.0, babel-eslint@^10.0.1, babel-eslint@^10.1.0: version "10.1.0" resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232" integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg== @@ -4207,6 +4224,42 @@ escodegen@^1.11.0, escodegen@^1.9.1: optionalDependencies: source-map "~0.6.1" +eslint-config-esnext@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-esnext/-/eslint-config-esnext-4.1.0.tgz#8695b858fcf40d28c1aedca181f700528c7b60c6" + integrity sha512-GhfVEXdqYKEIIj7j+Fw2SQdL9qyZMekgXfq6PyXM66cQw0B435ddjz3P3kxOBVihMRJ0xGYjosaveQz5Y6z0uA== + dependencies: + babel-eslint "^10.0.1" + eslint "^6.8.0" + eslint-plugin-babel "^5.2.1" + eslint-plugin-import "^2.14.0" + +eslint-config-google@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/eslint-config-google/-/eslint-config-google-0.14.0.tgz#4f5f8759ba6e11b424294a219dbfa18c508bcc1a" + integrity sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw== + +eslint-config-matrix-org@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-matrix-org/-/eslint-config-matrix-org-0.1.0.tgz#6ca245d4f63b781e6d3223d014bc66141235a694" + integrity sha512-oxsXK5i4AHSbA9122U9OCfenL21cPzw2byZiktTSC1I21kSNSxFOfdunv5ua9zGpajwQEg2o35Yrnro5N5WqQg== + dependencies: + "@typescript-eslint/eslint-plugin" "^3.4.0" + "@typescript-eslint/parser" "^3.4.0" + babel-eslint "^10.1.0" + eslint-config-google "^0.14.0" + eslint-config-recommended "^4.1.0" + eslint-plugin-babel "^5.3.0" + typescript "^3.9.5" + +eslint-config-node@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-node/-/eslint-config-node-4.1.0.tgz#fc1f13946d83766d6b83b0e67699e2071a56f417" + integrity sha512-Wz17xV5O2WFG8fGdMYEBdbiL6TL7YNJSJvSX9V4sXQownewfYmoqlly7wxqLkOUv/57pq6LnnotMiQQrrPjCqQ== + dependencies: + eslint "^6.8.0" + eslint-config-esnext "^4.1.0" + eslint-config-react-app@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df" @@ -4214,6 +4267,26 @@ eslint-config-react-app@^5.2.1: dependencies: confusing-browser-globals "^1.0.9" +eslint-config-react-native@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-react-native/-/eslint-config-react-native-4.1.0.tgz#63e9401c7fac146804785f609e7df8f15b3e04eb" + integrity sha512-kNND+cs+ztawH7wgajf/K6FfNshjlDsFDAkkFZF9HAXDgH1w1sNMIfTfwzufg0hOcSK7rbiL4qbG/gg/oR507Q== + dependencies: + eslint "^6.8.0" + eslint-config-esnext "^4.1.0" + eslint-plugin-react "^7.19.0" + eslint-plugin-react-native "^3.8.1" + +eslint-config-recommended@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-recommended/-/eslint-config-recommended-4.1.0.tgz#1adff90e0716d439be471d192977f233de171a46" + integrity sha512-2evA0SX1VqtyFiExmBI2WAO4XQCKlr7wmNELE8rcT5PyZY2ixsY881ofVZWKuI/dywpgLiES1gR/XUQcnVLRzQ== + dependencies: + eslint "^6.8.0" + eslint-config-esnext "^4.1.0" + eslint-config-node "^4.1.0" + eslint-config-react-native "^4.1.0" + eslint-import-resolver-node@^0.3.2: version "0.3.3" resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.3.tgz#dbaa52b6b2816b50bc6711af75422de808e98404" @@ -4222,6 +4295,14 @@ eslint-import-resolver-node@^0.3.2: debug "^2.6.9" resolve "^1.13.1" +eslint-import-resolver-node@^0.3.3: + version "0.3.4" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717" + integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA== + dependencies: + debug "^2.6.9" + resolve "^1.13.1" + eslint-loader@3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-3.0.3.tgz#e018e3d2722381d982b1201adb56819c73b480ca" @@ -4233,7 +4314,7 @@ eslint-loader@3.0.3: object-hash "^2.0.1" schema-utils "^2.6.1" -eslint-module-utils@^2.4.1: +eslint-module-utils@^2.4.1, eslint-module-utils@^2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6" integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA== @@ -4241,6 +4322,13 @@ eslint-module-utils@^2.4.1: debug "^2.6.9" pkg-dir "^2.0.0" +eslint-plugin-babel@^5.2.1, eslint-plugin-babel@^5.3.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-5.3.0.tgz#2e7f251ccc249326da760c1a4c948a91c32d0023" + integrity sha512-HPuNzSPE75O+SnxHIafbW5QB45r2w78fxqwK3HmjqIUoPfPzVrq6rD+CINU3yzoDSzEhUkX07VUphbF73Lth/w== + dependencies: + eslint-rule-composer "^0.3.0" + eslint-plugin-flowtype@4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.6.0.tgz#82b2bd6f21770e0e5deede0228e456cb35308451" @@ -4266,6 +4354,25 @@ eslint-plugin-import@2.20.1: read-pkg-up "^2.0.0" resolve "^1.12.0" +eslint-plugin-import@^2.14.0: + version "2.21.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.21.2.tgz#8fef77475cc5510801bedc95f84b932f7f334a7c" + integrity sha512-FEmxeGI6yaz+SnEB6YgNHlQK1Bs2DKLM+YF+vuTk5H8J9CLbJLtlPvRFgZZ2+sXiKAlN5dpdlrWOjK8ZoZJpQA== + dependencies: + array-includes "^3.1.1" + array.prototype.flat "^1.2.3" + contains-path "^0.1.0" + debug "^2.6.9" + doctrine "1.5.0" + eslint-import-resolver-node "^0.3.3" + eslint-module-utils "^2.6.0" + has "^1.0.3" + minimatch "^3.0.4" + object.values "^1.1.1" + read-pkg-up "^2.0.0" + resolve "^1.17.0" + tsconfig-paths "^3.9.0" + eslint-plugin-jsx-a11y@6.2.3: version "6.2.3" resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa" @@ -4286,6 +4393,18 @@ eslint-plugin-react-hooks@^1.6.1: resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04" integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA== +eslint-plugin-react-native-globals@^0.1.1: + version "0.1.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-native-globals/-/eslint-plugin-react-native-globals-0.1.2.tgz#ee1348bc2ceb912303ce6bdbd22e2f045ea86ea2" + integrity sha512-9aEPf1JEpiTjcFAmmyw8eiIXmcNZOqaZyHO77wgm0/dWfT/oxC1SrIq8ET38pMxHYrcB6Uew+TzUVsBeczF88g== + +eslint-plugin-react-native@^3.8.1: + version "3.8.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-native/-/eslint-plugin-react-native-3.8.1.tgz#92811e37191ecb0d29c0f0a0c9e5c943ee573821" + integrity sha512-6Z4s4nvgFRdda/1s1+uu4a6EMZwEjjJ9Bk/1yBImv0fd9U2CsGu2cUakAtV83cZKhizbWhSouXoaK4JtlScdFg== + dependencies: + eslint-plugin-react-native-globals "^0.1.1" + eslint-plugin-react@7.19.0: version "7.19.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666" @@ -4304,6 +4423,28 @@ eslint-plugin-react@7.19.0: string.prototype.matchall "^4.0.2" xregexp "^4.3.0" +eslint-plugin-react@^7.19.0: + version "7.20.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.0.tgz#f98712f0a5e57dfd3e5542ef0604b8739cd47be3" + integrity sha512-rqe1abd0vxMjmbPngo4NaYxTcR3Y4Hrmc/jg4T+sYz63yqlmJRknpEQfmWY+eDWPuMmix6iUIK+mv0zExjeLgA== + dependencies: + array-includes "^3.1.1" + doctrine "^2.1.0" + has "^1.0.3" + jsx-ast-utils "^2.2.3" + object.entries "^1.1.1" + object.fromentries "^2.0.2" + object.values "^1.1.1" + prop-types "^15.7.2" + resolve "^1.15.1" + string.prototype.matchall "^4.0.2" + xregexp "^4.3.0" + +eslint-rule-composer@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9" + integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg== + eslint-scope@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848" @@ -4339,7 +4480,7 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2" integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A== -eslint@^6.6.0: +eslint@^6.6.0, eslint@^6.8.0: version "6.8.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb" integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig== @@ -9601,7 +9742,7 @@ resolve@1.15.0: dependencies: path-parse "^1.0.6" -resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.3.2, resolve@^1.8.1: +resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1: version "1.17.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444" integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w== @@ -10810,6 +10951,16 @@ ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== +tsconfig-paths@^3.9.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b" + integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw== + dependencies: + "@types/json5" "^0.0.29" + json5 "^1.0.1" + minimist "^1.2.0" + strip-bom "^3.0.0" + tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.13.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" @@ -10879,6 +11030,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@^3.9.5: + version "3.9.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36" + integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ== + typescript@~3.7.2: version "3.7.5" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae" From 7e380385b4e17c80c94bee9ab89174338ed0bb17 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 24 Jun 2020 16:17:08 +0100 Subject: [PATCH 03/11] Missed a few --- .eslintrc.js | 1 - package.json | 1 - 2 files changed, 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 5f3844b..aabe8c1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,7 +2,6 @@ module.exports = { "extends": [ "matrix-org/ts", "matrix-org/react", - "react-app", ], } diff --git a/package.json b/package.json index addf87b..e3ae3b6 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ ] }, "devDependencies": { - "eslint-config-react-app": "^5.2.1", "husky": "^4.2.5", "lint-staged": "^10.2.7", "node-sass": "^4.14.1", From 317d60b552c7ef0c4c628b9e9fbaf97e14825279 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 24 Jun 2020 16:20:56 +0100 Subject: [PATCH 04/11] Fix prettier --- package.json | 2 +- src/App.tsx | 12 ++++++------ src/index.tsx | 8 ++++---- src/layouts/SingleColumn.tsx | 4 ++-- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index e3ae3b6..0105885 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "lint-staged": { "src/**/*.{js,jsx,ts,tsx}": [ "eslint", - "prettier --write", + "prettier --write --tab-width 4", "git add" ], "src/**/*.{json,css,scss,md}": [ diff --git a/src/App.tsx b/src/App.tsx index ec1db69..a4c2df7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,12 +20,12 @@ import "./App.scss"; import SingleColumn from "./layouts/SingleColumn"; const App: React.FC = () => { - return ( - -
-
- - ); + return ( + +
+
+ + ); }; export default App; diff --git a/src/index.tsx b/src/index.tsx index 0e9ec1e..d55556b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,8 +4,8 @@ import "./index.scss"; import App from "./App"; ReactDOM.render( - - - , - document.getElementById("root") + + + , + document.getElementById("root") ); diff --git a/src/layouts/SingleColumn.tsx b/src/layouts/SingleColumn.tsx index 406d170..bacc1e6 100644 --- a/src/layouts/SingleColumn.tsx +++ b/src/layouts/SingleColumn.tsx @@ -19,11 +19,11 @@ import React from "react"; import "./SingleColumn.scss"; interface IProps { - children?: React.ReactNode; + children?: React.ReactNode; } const SingleColumn: React.FC = (props: IProps) => { - return
{props.children}
; + return
{props.children}
; }; export default SingleColumn; From 6dab598f10bd66c7f8e20d5038dcf56a2fc4959f Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 24 Jun 2020 16:23:36 +0100 Subject: [PATCH 05/11] Fix scss indent --- package.json | 2 +- src/App.scss | 14 +++++++------- src/index.scss | 24 ++++++++++++------------ src/layouts/SingleColumn.scss | 12 ++++++------ 4 files changed, 26 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 0105885..7990c77 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "git add" ], "src/**/*.{json,css,scss,md}": [ - "prettier --write", + "prettier --write --tab-width 4", "git add" ] }, diff --git a/src/App.scss b/src/App.scss index c6f0d11..20b3337 100644 --- a/src/App.scss +++ b/src/App.scss @@ -15,19 +15,19 @@ limitations under the License. */ @mixin spacer { - width: 100%; - flex-grow: 1; - flex-shrink: 0; + width: 100%; + flex-grow: 1; + flex-shrink: 0; } .topSpacer { - @include spacer; + @include spacer; - height: 30vh; + height: 30vh; } .bottomSpacer { - @include spacer; + @include spacer; - height: 10vh; + height: 10vh; } diff --git a/src/index.scss b/src/index.scss index 6543fbd..768e16e 100644 --- a/src/index.scss +++ b/src/index.scss @@ -19,8 +19,8 @@ limitations under the License. // CSS reset * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } // Styling for universal elements @@ -28,19 +28,19 @@ limitations under the License. html, body, #root { - height: 100%; - width: 100%; + height: 100%; + width: 100%; - font-family: Helvetica Neue; - font-style: normal; + font-family: Helvetica Neue; + font-style: normal; - background-color: $app-background; - color: $font; + background-color: $app-background; + color: $font; } h1 { - font-weight: bold; - font-size: 24px; - line-height: 32px; - text-align: center; + font-weight: bold; + font-size: 24px; + line-height: 32px; + text-align: center; } diff --git a/src/layouts/SingleColumn.scss b/src/layouts/SingleColumn.scss index 0a64ded..d28f7a9 100644 --- a/src/layouts/SingleColumn.scss +++ b/src/layouts/SingleColumn.scss @@ -1,11 +1,11 @@ .singleColumnLayout { - height: 100%; + height: 100%; - padding: 0 1em; - margin: 0 auto; + padding: 0 1em; + margin: 0 auto; - max-width: 550px; + max-width: 550px; - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } From 0cc791da64c24ab9825f4436915c74d62909dc33 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 24 Jun 2020 16:26:17 +0100 Subject: [PATCH 06/11] Move eslint to dev dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7990c77..abaeb71 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", - "eslint-config-matrix-org": "^0.1.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", @@ -52,6 +51,7 @@ ] }, "devDependencies": { + "eslint-config-matrix-org": "^0.1.0", "husky": "^4.2.5", "lint-staged": "^10.2.7", "node-sass": "^4.14.1", From 862f57043b1dc3e5cf3a27e50bcf1cecf1042105 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 25 Jun 2020 00:41:56 +0100 Subject: [PATCH 07/11] Finish landing --- .gitignore | 2 + package.json | 9 +- src/App.scss | 2 +- src/App.tsx | 2 + src/_color-scheme.scss | 2 + src/_error.scss | 4 + src/components/Button.scss | 18 +- src/components/Button.tsx | 60 +- src/components/CreateLinkTile.scss | 30 + src/components/CreateLinkTile.tsx | 116 ++++ src/components/Input.scss | 40 ++ src/components/Input.tsx | 48 ++ src/components/TextButton.scss | 27 + src/components/TextButton.tsx | 33 ++ src/components/Tile.scss | 13 +- src/components/Tile.tsx | 8 +- src/index.scss | 5 + src/typings/react-app-env.d.ts | 1 + src/typings/scss.d.ts | 10 + yarn.lock | 857 ++++++++++++++++------------- 20 files changed, 854 insertions(+), 433 deletions(-) create mode 100644 src/_error.scss create mode 100644 src/components/CreateLinkTile.scss create mode 100644 src/components/CreateLinkTile.tsx create mode 100644 src/components/Input.scss create mode 100644 src/components/Input.tsx create mode 100644 src/components/TextButton.scss create mode 100644 src/components/TextButton.tsx create mode 100644 src/typings/react-app-env.d.ts create mode 100644 src/typings/scss.d.ts diff --git a/.gitignore b/.gitignore index 4d29575..3a9c6a5 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.vercel \ No newline at end of file diff --git a/package.json b/package.json index abaeb71..c4f0f3c 100644 --- a/package.json +++ b/package.json @@ -6,14 +6,19 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "@types/classnames": "^2.2.10", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", + "@types/yup": "^0.29.3", + "classnames": "^2.2.6", + "formik": "^2.1.4", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", - "typescript": "~3.7.2" + "typescript": "~3.7.2", + "yup": "^0.29.1" }, "scripts": { "start": "react-scripts start", @@ -24,7 +29,7 @@ }, "lint-staged": { "src/**/*.{js,jsx,ts,tsx}": [ - "eslint", + "eslint --fix", "prettier --write --tab-width 4", "git add" ], diff --git a/src/App.scss b/src/App.scss index 20b3337..dbfb868 100644 --- a/src/App.scss +++ b/src/App.scss @@ -23,7 +23,7 @@ limitations under the License. .topSpacer { @include spacer; - height: 30vh; + height: 10vh; } .bottomSpacer { diff --git a/src/App.tsx b/src/App.tsx index a4c2df7..43dd368 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,11 +18,13 @@ import React from "react"; import "./App.scss"; import SingleColumn from "./layouts/SingleColumn"; +import CreateLinkTile from "./components/CreateLinkTile"; const App: React.FC = () => { return (
+
); diff --git a/src/_color-scheme.scss b/src/_color-scheme.scss index eee6eb0..ff077ca 100644 --- a/src/_color-scheme.scss +++ b/src/_color-scheme.scss @@ -4,3 +4,5 @@ $foreground: #000000; $font: #333333; $grey: #666666; $accent: #0098d4; +$error: #d6001c; +$link: #0098d4; diff --git a/src/_error.scss b/src/_error.scss new file mode 100644 index 0000000..83aa5d6 --- /dev/null +++ b/src/_error.scss @@ -0,0 +1,4 @@ +@mixin error { + color: $error; + border-color: $error; +} diff --git a/src/components/Button.scss b/src/components/Button.scss index 35497aa..c34c521 100644 --- a/src/components/Button.scss +++ b/src/components/Button.scss @@ -17,19 +17,19 @@ limitations under the License. @import "../color-scheme"; .button { - width: 100%; + width: 100%; - padding: 1rem; - border-radius: 1000px; - border: 0; + padding: 1rem; + border-radius: 2rem; + border: 0; - background-color: $foreground; - color: $background; + background-color: $foreground; + color: $background; - font-size: 14px; - font-weight: 500px; + font-size: 14px; + font-weight: 500; } .buttonHighlight { - background-color: $accent; + background-color: $accent; } diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 57f0735..e65cab0 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -27,37 +27,43 @@ interface IProps extends React.ButtonHTMLAttributes { /** * Like a normal button except it will flash content when clicked. */ -const Button: React.FC = ({ - onClick, - children, - flashChildren, - className, - ...restProps -}: IProps) => { - const [wasClicked, setWasClicked] = React.useState(false); +const Button: React.FC< + IProps & React.RefAttributes +> = React.forwardRef( + ( + { onClick, children, flashChildren, className, ...restProps }: IProps, + ref: React.Ref + ) => { + const [wasClicked, setWasClicked] = React.useState(false); - const wrappedOnClick: React.MouseEventHandler = (e) => { - if (onClick) { - onClick(e); - } + const wrappedOnClick: React.MouseEventHandler = (e) => { + if (onClick) { + onClick(e); + } - setWasClicked(true); - window.setTimeout(() => { - setWasClicked(false); - }, 1000); - }; + setWasClicked(true); + window.setTimeout(() => { + setWasClicked(false); + }, 1000); + }; - const content = wasClicked ? flashChildren : children; + const content = wasClicked && flashChildren ? flashChildren : children; - const classNames = classnames("button", className, { - buttonHighlight: wasClicked, - }); + const classNames = classnames("button", className, { + buttonHighlight: wasClicked, + }); - return ( - - ); -}; + return ( + + ); + } +); export default Button; diff --git a/src/components/CreateLinkTile.scss b/src/components/CreateLinkTile.scss new file mode 100644 index 0000000..7ad283d --- /dev/null +++ b/src/components/CreateLinkTile.scss @@ -0,0 +1,30 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.createLinkTile { + background: none; + + > * { + margin: 12px 0; + width: 100%; + } + + > form { + display: grid; + row-gap: 24px; + align-self: center; + } +} diff --git a/src/components/CreateLinkTile.tsx b/src/components/CreateLinkTile.tsx new file mode 100644 index 0000000..aed0f60 --- /dev/null +++ b/src/components/CreateLinkTile.tsx @@ -0,0 +1,116 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { useEffect, useRef } from "react"; +import Tile from "./Tile"; +import Button from "./Button"; +import TextButton from "./TextButton"; +import Input from "./Input"; +import { Formik, Form } from "formik"; +import * as Yup from "yup"; + +import "./CreateLinkTile.scss"; + +interface ILinkNotCreatedTileProps { + setLink: React.Dispatch>; +} + +const LinkNotCreatedTile = (props: ILinkNotCreatedTileProps) => { + return ( + +

+ Create shareable links to Matrix rooms, users or messages + without being tied to any app +

+ link + ) + .required("Required"), + })} + onSubmit={(values) => { + props.setLink( + document.location.protocol + + "//" + + document.location.host + + "/" + + values.identifier + ); + }} + > +
+ + +
+ + + ); +}; + +interface ILinkCreatedTileProps { + link: string; + setLink: React.Dispatch>; +} + +const LinkCreatedTile: React.FC = (props) => { + const buttonRef = useRef(null); + + // Focus button on render + useEffect(() => { + if (buttonRef && buttonRef.current) { + buttonRef.current.focus(); + } + }); + + return ( + + props.setLink("")}> + Create another lnk + +

{props.link}

+ + + ); +}; + +const CreateLinkTile: React.FC = () => { + const [link, setLink] = React.useState(""); + console.log(link); + if (!link) { + return ; + } else { + return ; + } +}; + +export default CreateLinkTile; diff --git a/src/components/Input.scss b/src/components/Input.scss new file mode 100644 index 0000000..e6ca735 --- /dev/null +++ b/src/components/Input.scss @@ -0,0 +1,40 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +@import "../color-scheme"; +@import "../error"; + +.input { + width: 100%; + padding: 12px; + + background: $background; + + border: 1px solid $font; + border-radius: 24px; + + font-size: 14px; + line-height: 24px; + + &.error { + @include error; + } +} + +.inputError { + @include error; + text-align: center; +} diff --git a/src/components/Input.tsx b/src/components/Input.tsx new file mode 100644 index 0000000..f1217f1 --- /dev/null +++ b/src/components/Input.tsx @@ -0,0 +1,48 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import classnames from "classnames"; +import { useField } from "formik"; + +import "./Input.scss"; + +interface IProps extends React.InputHTMLAttributes { + name: string; + type: string; +} + +const Input: React.FC = ({ className, ...props }) => { + const [field, meta] = useField(props); + + const error = + meta.touched && meta.error ? ( +
{meta.error}
+ ) : null; + + const classNames = classnames("input", className, { + error: meta.error, + }); + + return ( + <> + + {error} + + ); +}; + +export default Input; diff --git a/src/components/TextButton.scss b/src/components/TextButton.scss new file mode 100644 index 0000000..a5168e0 --- /dev/null +++ b/src/components/TextButton.scss @@ -0,0 +1,27 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +@import "../color-scheme"; + +.textButton { + background: none; + border: none; + color: $link; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 24px; +} diff --git a/src/components/TextButton.tsx b/src/components/TextButton.tsx new file mode 100644 index 0000000..0d3de8d --- /dev/null +++ b/src/components/TextButton.tsx @@ -0,0 +1,33 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import classnames from "classnames"; + +import "./TextButton.scss"; + +const TextButton: React.FC> = ({ + className, + ...restProps +}) => { + return ( +