Skip to content

Commit 86bf57e

Browse files
newracketnewracket
authored
initial storybook (#1)
* initial storybook * added tsx * added github workflow * removed workflow
1 parent 5823c9a commit 86bf57e

34 files changed

+11091
-1
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.cache
3+
.next

‎.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.cache
3+
.next

‎.storybook/main.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/** @type { import('@storybook/nextjs').StorybookConfig } */
2+
const config = {
3+
stories: [
4+
"../stories/**/*.mdx",
5+
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
6+
],
7+
addons: [
8+
"@storybook/addon-onboarding",
9+
"@storybook/addon-essentials",
10+
"@chromatic-com/storybook",
11+
"@storybook/addon-interactions",
12+
],
13+
framework: {
14+
name: "@storybook/nextjs",
15+
options: {},
16+
},
17+
};
18+
export default config;

‎.storybook/preview.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/** @type { import('@storybook/react').Preview } */
2+
const preview = {
3+
parameters: {
4+
controls: {
5+
matchers: {
6+
color: /(background|color)$/i,
7+
date: /Date$/i,
8+
},
9+
},
10+
},
11+
};
12+
13+
export default preview;

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
# components
1+
# components
2+
3+
Component library for ACMUCSD websites.

‎components/Button.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import './button.css';
3+
4+
/** Primary UI component for user interaction */
5+
export interface ButtonProps {
6+
primary?: boolean;
7+
backgroundColor?: string;
8+
size?: 'small' | 'medium' | 'large';
9+
label: string;
10+
onClick?: () => void;
11+
}
12+
13+
export const Button: React.FC<ButtonProps> = ({ primary = false, backgroundColor, size = 'medium', label, ...props }) => {
14+
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
15+
return (
16+
<button
17+
type="button"
18+
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
19+
style={backgroundColor ? { backgroundColor } : undefined}
20+
{...props}
21+
>
22+
{label}
23+
</button>
24+
);
25+
};

‎components/Header.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
3+
import { Button } from './Button';
4+
import './header.css';
5+
6+
export interface HeaderProps {
7+
user?: {
8+
name: string;
9+
};
10+
onLogin: () => void;
11+
onLogout: () => void;
12+
onCreateAccount: () => void;
13+
}
14+
15+
export const Header: React.FC<HeaderProps> = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
16+
<header>
17+
<div className="storybook-header">
18+
<div>
19+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
20+
<g fill="none" fillRule="evenodd">
21+
<path
22+
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
23+
fill="#FFF"
24+
/>
25+
<path
26+
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
27+
fill="#555AB9"
28+
/>
29+
<path
30+
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
31+
fill="#91BAF8"
32+
/>
33+
</g>
34+
</svg>
35+
<h1>Acme</h1>
36+
</div>
37+
<div>
38+
{user ? (
39+
<>
40+
<span className="welcome">
41+
Welcome, <b>{user.name}</b>!
42+
</span>
43+
<Button size="small" onClick={onLogout} label="Log out" />
44+
</>
45+
) : (
46+
<>
47+
<Button size="small" onClick={onLogin} label="Log in" />
48+
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
49+
</>
50+
)}
51+
</div>
52+
</div>
53+
</header>
54+
);

‎components/Page.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { useState } from 'react';
2+
3+
import { Header } from './Header';
4+
import './page.css';
5+
6+
export const Page = () => {
7+
const [user, setUser] = useState<{ name: string } | undefined>(undefined);
8+
9+
return (
10+
<article>
11+
<Header
12+
user={user}
13+
onLogin={() => setUser({ name: 'Jane Doe' })}
14+
onLogout={() => setUser(undefined)}
15+
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
16+
/>
17+
<section className="storybook-page">
18+
<h2>Pages in Storybook</h2>
19+
<p>
20+
We recommend building UIs with a{' '}
21+
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
22+
<strong>component-driven</strong>
23+
</a>{' '}
24+
process starting with atomic components and ending with pages.
25+
</p>
26+
<p>
27+
Render pages with mock data. This makes it easy to build and review page states without
28+
needing to navigate to them in your app. Here are some handy patterns for managing page
29+
data in Storybook:
30+
</p>
31+
<ul>
32+
<li>
33+
Use a higher-level connected component. Storybook helps you compose such data from the
34+
"args" of child component stories
35+
</li>
36+
<li>
37+
Assemble data in the page component from your services. You can mock these services out
38+
using Storybook.
39+
</li>
40+
</ul>
41+
<p>
42+
Get a guided tutorial on component-driven development at{' '}
43+
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
44+
Storybook tutorials
45+
</a>
46+
. Read more in the{' '}
47+
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
48+
docs
49+
</a>
50+
.
51+
</p>
52+
<div className="tip-wrapper">
53+
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
54+
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
55+
<g fill="none" fillRule="evenodd">
56+
<path
57+
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
58+
id="a"
59+
fill="#999"
60+
/>
61+
</g>
62+
</svg>
63+
Viewports addon in the toolbar
64+
</div>
65+
</section>
66+
</article>
67+
);
68+
};

‎components/button.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.storybook-button {
2+
display: inline-block;
3+
cursor: pointer;
4+
border: 0;
5+
border-radius: 3em;
6+
font-weight: 700;
7+
line-height: 1;
8+
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
9+
}
10+
.storybook-button--primary {
11+
background-color: #555ab9;
12+
color: white;
13+
}
14+
.storybook-button--secondary {
15+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
16+
background-color: transparent;
17+
color: #333;
18+
}
19+
.storybook-button--small {
20+
padding: 10px 16px;
21+
font-size: 12px;
22+
}
23+
.storybook-button--medium {
24+
padding: 11px 20px;
25+
font-size: 14px;
26+
}
27+
.storybook-button--large {
28+
padding: 12px 24px;
29+
font-size: 16px;
30+
}

‎components/header.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.storybook-header {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
6+
padding: 15px 20px;
7+
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
8+
}
9+
10+
.storybook-header svg {
11+
display: inline-block;
12+
vertical-align: top;
13+
}
14+
15+
.storybook-header h1 {
16+
display: inline-block;
17+
vertical-align: top;
18+
margin: 6px 0 6px 10px;
19+
font-weight: 700;
20+
font-size: 20px;
21+
line-height: 1;
22+
}
23+
24+
.storybook-header button + button {
25+
margin-left: 10px;
26+
}
27+
28+
.storybook-header .welcome {
29+
margin-right: 10px;
30+
color: #333;
31+
font-size: 14px;
32+
}

‎components/page.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.storybook-page {
2+
margin: 0 auto;
3+
padding: 48px 20px;
4+
max-width: 600px;
5+
color: #333;
6+
font-size: 14px;
7+
line-height: 24px;
8+
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
9+
}
10+
11+
.storybook-page h2 {
12+
display: inline-block;
13+
vertical-align: top;
14+
margin: 0 0 4px;
15+
font-weight: 700;
16+
font-size: 32px;
17+
line-height: 1;
18+
}
19+
20+
.storybook-page p {
21+
margin: 1em 0;
22+
}
23+
24+
.storybook-page a {
25+
color: inherit;
26+
}
27+
28+
.storybook-page ul {
29+
margin: 1em 0;
30+
padding-left: 30px;
31+
}
32+
33+
.storybook-page li {
34+
margin-bottom: 8px;
35+
}
36+
37+
.storybook-page .tip {
38+
display: inline-block;
39+
vertical-align: top;
40+
margin-right: 10px;
41+
border-radius: 1em;
42+
background: #e7fdd8;
43+
padding: 4px 12px;
44+
color: #357a14;
45+
font-weight: 700;
46+
font-size: 11px;
47+
line-height: 12px;
48+
}
49+
50+
.storybook-page .tip-wrapper {
51+
margin-top: 40px;
52+
margin-bottom: 40px;
53+
font-size: 13px;
54+
line-height: 20px;
55+
}
56+
57+
.storybook-page .tip-wrapper svg {
58+
display: inline-block;
59+
vertical-align: top;
60+
margin-top: 3px;
61+
margin-right: 4px;
62+
width: 12px;
63+
height: 12px;
64+
}
65+
66+
.storybook-page .tip-wrapper svg path {
67+
fill: #1ea7fd;
68+
}

0 commit comments

Comments
 (0)