Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 638fd6a

Browse files
committed
docs: improve Storybook, add docs pages as stories
1 parent 1cf9892 commit 638fd6a

File tree

11 files changed

+126
-87
lines changed

11 files changed

+126
-87
lines changed

‎.storybook/logo.png‎

12.7 KB
Loading[フレーム]

‎.storybook/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @type import('@storybook/react/types').StorybookConfig */
22
module.exports = {
3-
stories: ['../src/**/*.stories.@(js|jsx|tsx|mdx)'],
3+
stories: ['../@(docs|src)/**/*.stories.@(tsx|mdx)'],
44
addons: [
55
{
66
name: '@storybook/addon-docs',

‎.storybook/manager.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
11
import './manager.css';
2+
3+
import { addons } from '@storybook/addons';
4+
import theme from './theme';
5+
6+
addons.setConfig({
7+
theme
8+
});

‎.storybook/preview.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,23 @@ export const decorators = [
3636
];
3737

3838
export const parameters = {
39-
layout: 'fullscreen'
39+
layout: 'fullscreen',
40+
options: {
41+
storySort: {
42+
order: [
43+
'Docs',
44+
[
45+
'Welcome to React95',
46+
'Getting Started',
47+
'Contributing',
48+
'Submit your Project'
49+
],
50+
'Controls',
51+
'Environment',
52+
'Layout',
53+
'Typography',
54+
'Other'
55+
]
56+
}
57+
}
4058
};

‎.storybook/theme.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { create } from '@storybook/theming';
2+
3+
import brandImage from './logo.png';
4+
5+
export default create({
6+
base: 'light',
7+
brandTitle: 'React95',
8+
brandUrl: 'https://react95.io',
9+
brandImage,
10+
brandTarget: '_self',
11+
12+
// UI
13+
appBg: '#dfdfdf',
14+
appContentBg: '#ffffff',
15+
appBorderColor: '#848584',
16+
appBorderRadius: 0,
17+
18+
// Typography
19+
fontBase: '"ms_sans_serif", sans-serif',
20+
fontCode: 'monospace',
21+
22+
// Text colors
23+
textColor: '#0a0a0a',
24+
textInverseColor: 'rgba(255,255,255,0.9)',
25+
26+
// Toolbar default and active colors
27+
barTextColor: '#c6c6c6',
28+
barSelectedColor: '#fefefe',
29+
barBg: '#060084',
30+
31+
// Form colors
32+
inputBg: '#ffffff',
33+
inputBorder: '#dfdfdf',
34+
inputTextColor: '#0a0a0a',
35+
inputBorderRadius: 0
36+
});

‎docs/Contributing.stories.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
3+
<Meta title='Docs/Contributing' />
4+
5+
# Contributing
6+
7+
Any help from UI/UX designers would be EXTREMELY appreciated. The challenge is
8+
to come up with new component designs/layouts that are broadly used in modern
9+
UIs, that weren't present back in 95.
10+
11+
If you want to help with the project, feel free to [open pull requests][1],
12+
[submit issues or component proposals][2] and join our [Slack channels][3]!
13+
Let's bring this UI back to life ♥️
14+
15+
[1]: https://github.com/arturbien/react95/pulls
16+
[2]: https://github.com/arturbien/React95/issues
17+
[3]: https://join.slack.com/t/react95/shared_invite/enQtOTA1NzEyNjAyNTc4LWYxZjU3NWRiMWJlMGJiMjhkNzE2MDA3ZmZjZDc1YmY0ODdlZjMwZDA1NWJiYWExYmY1NTJmNmE4OWVjNWFhMTE

‎docs/installation.mdx‎ renamed to ‎docs/Getting-Started.stories.mdx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
---
2-
name: Getting Started
3-
route: /installation
4-
---
1+
import { Meta } from '@storybook/addon-docs';
52

6-
## Installation
3+
<Meta title='Docs/Getting Started' />
4+
5+
# Installation
76

87
React95 is available as an [npm package](https://www.npmjs.com/package/react95).
98

@@ -19,16 +18,19 @@ yarn add react95 styled-components
1918
npm i -S react95 styled-components
2019
```
2120

22-
In order to have `react95` working properly, you'll also need [`styled-components`](https://github.com/styled-components/styled-components), this way you can use custom themes and get the best of the library 🙂
21+
In order to have `react95` working properly, you'll also need
22+
[styled-components 💅](https://github.com/styled-components/styled-components),
23+
this way you can use custom themes and get the best of the library 🙂
2324

2425
## Usage
2526

26-
Apply style reset, wrap your app content with ThemeProvider with theme of your choice... and you are ready to go! 🚀
27+
Apply style reset, wrap your app content with ThemeProvider with theme of your
28+
choice... and you are ready to go! 🚀
2729

2830
```jsx
2931
import React from 'react';
32+
import { Divider, MenuList, MenuItem, styleReset } from 'react95';
3033
import { createGlobalStyle, ThemeProvider } from 'styled-components';
31-
import { styleReset, List, ListItem, Divider } from 'react95';
3234

3335
/* Pick a theme of your choice */
3436
import original from 'react95/dist/themes/original';
@@ -50,7 +52,7 @@ const GlobalStyles = createGlobalStyle`
5052
font-weight: bold;
5153
font-style: normal
5254
}
53-
body {
55+
body, input, select, textarea {
5456
font-family: 'ms_sans_serif';
5557
}
5658
${styleReset}
@@ -60,12 +62,12 @@ const App = () => (
6062
<div>
6163
<GlobalStyles />
6264
<ThemeProvider theme={original}>
63-
<List>
64-
<ListItem>🎤 Sing</ListItem>
65-
<ListItem>💃🏻 Dance</ListItem>
65+
<MenuList>
66+
<MenuItem>🎤 Sing</MenuItem>
67+
<MenuItem>💃🏻 Dance</MenuItem>
6668
<Divider />
67-
<ListItem disabled>😴 Sleep</ListItem>
68-
</List>
69+
<MenuItem disabled>😴 Sleep</MenuItem>
70+
</MenuList>
6971
</ThemeProvider>
7072
</div>
7173
);

‎docs/submit-project.mdx‎ renamed to ‎docs/Submit-your-Project.stories.mdx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
---
2-
name: Submit your project
3-
route: /submit-project
4-
---
1+
import { Meta } from '@storybook/addon-docs';
52

6-
### Submit your project
3+
<Meta title='Docs/Submit your Project' />
4+
5+
# Submit your Project
76

87
Apps built with React95 will be featured on the official React95 [website](https://react95.io) 🤟🏻
98

‎docs/index.mdx‎ renamed to ‎docs/Welcome.stories.mdx‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
1-
---
2-
name: Welcome
3-
route: /
4-
---
5-
6-
## Welcome to React95
7-
8-
<p align="center">
9-
<a href="https://www.npmjs.com/package/react95"><img src="https://flat.badgen.net/npm/dt/react95" alt="NPM" /></a>
10-
<a href="https://www.npmjs.com/package/react95"><img src="https://flat.badgen.net/npm/v/react95" alt="React95 version" /></a>
11-
<a href="https://www.npmjs.com/package/react95"><img src="https://flat.badgen.net/npm/license/react95" alt="React95 license" /></a>
12-
13-
</p>
14-
15-
<h3 align='center'>
16-
<a href='https://storybook.react95.io/?path=/story/window--default'>
17-
Components
18-
</a>
1+
import { Meta } from '@storybook/addon-docs';
2+
3+
<Meta title='Docs/Welcome to React95' />
4+
5+
# Welcome to React95
6+
7+
<a href='https://www.npmjs.com/package/react95'>
8+
<img src='https://flat.badgen.net/npm/dt/react95' alt='NPM' />
9+
</a>
10+
&nbsp;
11+
<a href='https://www.npmjs.com/package/react95'>
12+
<img src='https://flat.badgen.net/npm/v/react95' alt='React95 version' />
13+
</a>
14+
&nbsp;
15+
<a href='https://www.npmjs.com/package/react95'>
16+
<img
17+
src='https://flat.badgen.net/npm/license/react95'
18+
alt='React95 license'
19+
/>
20+
</a>
21+
22+
<h3>
23+
<a href='?path=/story/controls-button--default'>Components</a>
1924
&nbsp;-&nbsp;
2025
<a href='https://coins95.web.app/'>Demo app</a>
2126
&nbsp;-&nbsp;
@@ -28,23 +33,14 @@ route: /
2833
<a href='https://www.paypal.me/react95'>PayPal donation 💰</a>
2934
</h3>
3035

31-
<p align='center'>
32-
<b>Refreshed</b> Windows95 UI components for your modern React apps. Built
33-
with{' '}
34-
<a
35-
href='https://github.com/styled-components/styled-components'
36-
target='_blank'
37-
>
38-
styled-components
39-
</a>{' '}
40-
💅
41-
</p>
36+
**Refreshed** Windows 95 UI components for your modern React apps. Built with
37+
[styled-components](https://github.com/styled-components/styled-components) 💅.
4238

4339
![hero](https://user-images.githubusercontent.com/28541613/81947711-28b05580-9601-11ea-964a-c3a6de998496.png)
4440

4541
### Getting Started
4642

47-
<span>Check out our [getting started](/installation) docs!</span>
43+
Check out our [getting started](?path=/story/docs-getting-started--page) docs!
4844

4945
### Motivation
5046

‎docs/component_template.mdx‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /