Merge pull request #99 from matrix-org/matrixtwo/storybook

Add storybook

.storybook/main.js

@@ -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.
+*/
+
+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,43 @@
+/*
+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 { 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,31 @@
+/*
+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/Input.stories.tsx

@@ -0,0 +1,44 @@
+/*
+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/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,31 @@
+/*
+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/Tile.stories.tsx

@@ -0,0 +1,37 @@
+/*
+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/index.scss

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

tsconfig.json

@@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
-  },
-  "include": [
-    "src"
-  ]
+    "compilerOptions": {
+        "target": "es5",
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react"
+    },
+    "include": [
+        "src"
+    ]
 }