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

Add storybook
This commit is contained in:
Jorik Schellekens 2020-08-03 18:43:00 +01:00 committed by GitHub
commit 1b68e23b76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 3392 additions and 130 deletions

32
.storybook/main.js Normal file
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.
*/
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',
],
};

43
.storybook/preview.js Normal file
View File

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

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

View File

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

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

View File

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

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