Set up story book

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  stories: ['../src/**/*.stories.tsx'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+    '@storybook/addon-viewport/register',
+    '@storybook/addon-a11y/register',
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-actions/register',
+    'storybook-addon-designs',
+    '@storybook/addon-backgrounds/register',
+  ],
+};

.storybook/preview.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { addDecorator } from '@storybook/react';
+import { withA11y } from '@storybook/addon-a11y';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withDesign } from 'storybook-addon-designs'
+import { addParameters } from '@storybook/react';
+
+
+
+// Default styles
+import "../src/index.scss";
+
+addDecorator(
+  storyFn => <div style={{ textAlign: 'center' }}>{storyFn()}</div>
+);
+
+addDecorator(withA11y);
+
+addDecorator(withKnobs);
+
+addDecorator(withDesign);
+
+addParameters({
+  backgrounds: [
+    {name: 'light', value: '#F4F4F4'},
+    {name: 'white', value: '#FFFFFF', default: true},
+  ]
+});

docs/developers.md

@@ -0,0 +1,13 @@
+# Developing
+Clone the repo and
+
+```
+yarn start
+```
+
+## Storybook
+Storybook lets you view components individually.
+
+```
+yarn storybook
+```

package.json

@@ -1,65 +1,78 @@
 {
-    "name": "matrix.to",
-    "version": "0.1.0",
-    "private": true,
-    "dependencies": {
-        "classnames": "^2.2.6",
-        "formik": "^2.1.4",
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1",
-        "react-scripts": "3.4.1",
-        "yup": "^0.29.1"
-    },
-    "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 --fix",
-            "prettier --write --tab-width 4",
-            "git add"
-        ],
-        "src/**/*.{json,css,scss,md}": [
-            "prettier --write --tab-width 4",
-            "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": {
-        "@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",
-        "eslint-config-matrix-org": "^0.1.0",
-        "husky": "^4.2.5",
-        "lint-staged": "^10.2.7",
-        "node-sass": "^4.14.1",
-        "prettier": "^2.0.5",
-        "typescript": "~3.7.2"
+  "name": "matrix.to",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "formik": "^2.1.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "yup": "^0.29.1"
+  },
+  "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",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write --tab-width 4",
+      "git add"
+    ],
+    "src/**/*.{json,css,scss,md}": [
+      "prettier --write --tab-width 4",
+      "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": {
+    "@storybook/addon-a11y": "^5.3.19",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-backgrounds": "^5.3.19",
+    "@storybook/addon-knobs": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addon-storysource": "^5.3.19",
+    "@storybook/addon-viewport": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.1.4",
+    "@storybook/react": "^5.3.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",
+    "eslint-config-matrix-org": "^0.1.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.7",
+    "node-sass": "^4.14.1",
+    "prettier": "^2.0.5",
+    "storybook-addon-designs": "^5.4.0",
+    "typescript": "~3.7.2"
+  }
 }

src/App.scss

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+#root {
+    background-color: $app-background;
+}
+
 @mixin spacer {
     width: 100%;
     flex-grow: 0;

src/components/Button.stories.tsx

@@ -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/CreateLinkTile.stories.tsx

@@ -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://www.figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1",
+        },
+    },
+};
+
+export const Default = () => <CreateLinkTile />;

src/components/Input.stories.tsx

@@ -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://www.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/MatrixTile.stories.tsx

@@ -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/TextButton.stories.tsx

@@ -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://www.figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=149%3A10756",
+        },
+    },
+};
+
+export const Default = () => <TextButton>This is a button?</TextButton>;

src/components/Tile.stories.tsx

@@ -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://www.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/index.scss

@@ -37,7 +37,6 @@ body,
     font-size: 14px;
     line-height: 24px;
 
-    background-color: $app-background;
     color: $font;
 }