Dome/matrix.to-dracula-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'matrix-two' of github.com:matrix-org/matrix.to into matrixtwo/linkparser

Browse Source
This commit is contained in:
Jorik Schellekens
2020-08-06 15:01:43 +01:00
parent 0aa273a8bc 1b68e23b76
commit f1cc8eb1e3
38 changed files with 5062 additions and 1224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.scss
+35
View File
@@ -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: 2rem;
border: 0;
background-color: $foreground;
color: $background;
font-size: 14px;
font-weight: 500;
}
.buttonHighlight {
background-color: $accent;
}
src/components/Button.stories.tsx
+29
View File
@@ -0,0 +1,29 @@
/*
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 { action } from "@storybook/addon-actions";
import { text } from "@storybook/addon-knobs";
import Button from "./Button";
export default { title: "Button" };
export const WithText = () => (
<Button onClick={action("clicked")}>
{text("label", "Hello Story Book")}
</Button>
);
src/components/Button.tsx
+69
View File
@@ -0,0 +1,69 @@
/*
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<Element> {
// Briefly display these instead of the children onClick
flashChildren?: React.ReactNode;
}
/**
* Like a normal button except it will flash content when clicked.
*/
const Button: React.FC<
IProps & React.RefAttributes<HTMLButtonElement>
> = React.forwardRef(
(
{ onClick, children, flashChildren, className, ...props }: IProps,
ref: React.Ref<HTMLButtonElement>
) => {
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 ? flashChildren : children;
const classNames = classnames("button", className, {
buttonHighlight: wasClicked,
});
return (
<button
className={classNames}
onClick={wrappedOnClick}
ref={ref}
{...props}
>
{content}
</button>
);
}
);
export default Button;
src/components/CreateLinkTile.scss
+32
View File
@@ -0,0 +1,32 @@
/*
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;
row-gap: 24px;
* {
width: 100%;
}
> form {
display: grid;
row-gap: 24px;
align-self: center;
padding: 0 30px;
}
}
src/components/CreateLinkTile.stories.tsx
+32
View File
@@ -0,0 +1,32 @@
/*
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 CreateLinkTile from "./CreateLinkTile";
export default {
title: "CreateLinkTile",
parameters: {
design: {
type: "figma",
url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1",
},
},
};
export const Default = () => <CreateLinkTile />;
src/components/CreateLinkTile.tsx
+116
View File
@@ -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<React.SetStateAction<string>>;
}
const LinkNotCreatedTile = (props: ILinkNotCreatedTileProps) => {
return (
<Tile className="createLinkTile">
<h1>
Create shareable links to Matrix rooms, users or messages
without being tied to any app
</h1>
<Formik
initialValues={{
identifier: "",
}}
validationSchema={Yup.object({
identifier: Yup.string()
.test(
"is-identifier",
"That link doesn't look right. Double check the details.",
(link) => link
)
.required("Required"),
})}
onSubmit={(values) => {
props.setLink(
document.location.protocol +
"//" +
document.location.host +
"/" +
values.identifier
);
}}
>
<Form>
<Input
name={"identifier"}
type={"text"}
placeholder="#room:example.com, @user:example.com"
/>
<Button type="submit">Get Link</Button>
</Form>
</Formik>
</Tile>
);
};
interface ILinkCreatedTileProps {
link: string;
setLink: React.Dispatch<React.SetStateAction<string>>;
}
const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
const buttonRef = useRef<HTMLButtonElement>(null);
// Focus button on render
useEffect(() => {
if (buttonRef && buttonRef.current) {
buttonRef.current.focus();
}
});
return (
<Tile className="createLinkTile">
<TextButton onClick={() => props.setLink("")}>
Create another lnk
</TextButton>
<h1>{props.link}</h1>
<Button
flashChildren={"Copied"}
onClick={() => navigator.clipboard.writeText(props.link)}
ref={buttonRef}
>
Copy Link
</Button>
</Tile>
);
};
const CreateLinkTile: React.FC = () => {
const [link, setLink] = React.useState("");
console.log(link);
if (!link) {
return <LinkNotCreatedTile setLink={setLink} />;
} else {
return <LinkCreatedTile link={link} setLink={setLink} />;
}
};
export default CreateLinkTile;
src/components/Input.scss
+40
View File
@@ -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;
}
src/components/Input.stories.tsx
+45
View File
@@ -0,0 +1,45 @@
/*
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 { withDesign } from "storybook-addon-designs";
import { Formik, Form } from "formik";
import Input from "./Input";
export default {
title: "Input",
parameters: {
design: {
type: "figma",
url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1",
},
},
decorators: [withDesign],
};
export const Default = () => (
<Formik initialValues={{}} onSubmit={() => {}}>
<Form>
<Input
name="Example input"
type="text"
placeholder="Write something"
/>
</Form>
</Formik>
);
src/components/Input.tsx
+48
View File
@@ -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<Element> {
name: string;
type: string;
}
const Input: React.FC<IProps> = ({ className, ...props }) => {
const [field, meta] = useField(props);
const error =
meta.touched && meta.error ? (
<div className="inputError">{meta.error}</div>
) : null;
const classNames = classnames("input", className, {
error: meta.error,
});
return (
<>
<input type="text" className={classNames} {...field} {...props} />
{error}
</>
);
};
export default Input;
src/components/MatrixTile.scss
+22
View File
@@ -0,0 +1,22 @@
/*
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.
*/
.matrixTile {
background: none;
row-gap: 8px;
padding: 0 40px;
}
src/components/MatrixTile.stories.tsx
+23
View File
@@ -0,0 +1,23 @@
/*
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 MatrixTile from "./MatrixTile";
export default { title: "MatrixTile" };
export const Default = () => <MatrixTile />;
src/components/MatrixTile.tsx
+36
View File
@@ -0,0 +1,36 @@
/*
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 from "./Tile";
import logo from "../imgs/matrix-logo.svg";
import "./MatrixTile.scss";
const MatrixTile: React.FC = () => {
return (
<Tile className="matrixTile">
<img src={logo} alt="matrix-logo" />
<div>
Matrix.to is a stateless URL redirecting service for the{" "}
<a href="https://matrix.org">Matrix</a> ecosystem.
</div>
</Tile>
);
};
export default MatrixTile;
src/components/TextButton.scss
+27
View File
@@ -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;
}
src/components/TextButton.stories.tsx
+32
View File
@@ -0,0 +1,32 @@
/*
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 TextButton from "./TextButton";
export default {
title: "TextButton",
parameters: {
design: {
type: "figma",
url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=149%3A10756",
},
},
};
export const Default = () => <TextButton>This is a button?</TextButton>;
src/components/TextButton.tsx
+30
View File
@@ -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.
*/
import React from "react";
import classnames from "classnames";
import "./TextButton.scss";
const TextButton: React.FC<React.ButtonHTMLAttributes<Element>> = ({
className,
...props
}) => {
return (
<button className={classnames("textButton", className)} {...props} />
);
};
export default TextButton;
src/components/Tile.scss
+29
View File
@@ -0,0 +1,29 @@
/*
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: grid;
justify-items: center;
text-align: center;
}
src/components/Tile.stories.tsx
+38
View File
@@ -0,0 +1,38 @@
/*
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 from "./Tile";
export default {
title: "Tile",
parameters: {
design: {
type: "figma",
url:
"https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853",
},
},
};
export const Default = () => (
<Tile>
<h1>This is a tile</h1>
<p>Some text</p>
<p>Note the rounded corners</p>
</Tile>
);
src/components/Tile.tsx
+35
View File
@@ -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 React from "react";
import classnames from "classnames";
import "./Tile.scss";
interface IProps {
className?: string;
children: React.ReactNode;
}
const Tile: React.FC<IProps> = (props: IProps) => {
return (
<div className={classnames("tile", props.className)}>
{props.children}
</div>
);
};
export default Tile;