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

@@ -15,7 +15,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-        "lint:fix": "eslint src/**/*.ts src/**/*.tsx --fix"
+    "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}": [
@@ -46,6 +48,16 @@
     ]
   },
   "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",
@@ -60,6 +72,7 @@
     "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;
 }