Set up story book

This commit is contained in:
Jorik Schellekens 2020-07-30 13:30:27 +01:00
parent d5f1b57b86
commit 281f9ed766
13 changed files with 3402 additions and 168 deletions

15
.storybook/main.js Normal file
View File

@ -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',
],
};

28
.storybook/preview.js Normal file
View File

@ -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},
]
});

13
docs/developers.md Normal file
View File

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

View File

@ -15,7 +15,9 @@
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject", "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": { "lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [ "src/**/*.{js,jsx,ts,tsx}": [
@ -46,6 +48,16 @@
] ]
}, },
"devDependencies": { "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/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2", "@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",
@ -60,6 +72,7 @@
"lint-staged": "^10.2.7", "lint-staged": "^10.2.7",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"prettier": "^2.0.5", "prettier": "^2.0.5",
"storybook-addon-designs": "^5.4.0",
"typescript": "~3.7.2" "typescript": "~3.7.2"
} }
} }

View File

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

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>
);

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

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://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>
);

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 />;

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

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://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>
);

View File

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

3173
yarn.lock

File diff suppressed because it is too large Load Diff