Skip to content

Commit

Permalink
install storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
bapmrl committed May 9, 2023
1 parent 9cb54f3 commit 7c2be39
Show file tree
Hide file tree
Showing 23 changed files with 7,218 additions and 288 deletions.
6,775 changes: 6,488 additions & 287 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/slice-machine/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"eslint-config-prettier",
"plugin:storybook/recommended",
],
ignorePatterns: ["build", "templates", "**/tests/**", "helpers/**"],
rules: {
Expand Down
17 changes: 17 additions & 0 deletions packages/slice-machine/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {
autodocs: "tag",
},
};
export default config;
15 changes: 15 additions & 0 deletions packages/slice-machine/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Preview } from "@storybook/react";

const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};

export default preview;
13 changes: 12 additions & 1 deletion packages/slice-machine/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
"unit:watch": "vitest watch",
"lint:precommit": "eslint",
"depcheck": "depcheck --config=.depcheckrc",
"audit": "better-npm-audit audit -l high -p"
"audit": "better-npm-audit audit -l high -p",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"@extractus/oembed-extractor": "^3.1.8",
Expand Down Expand Up @@ -50,6 +52,13 @@
"@prismicio/slice-simulator-com": "^0.4.2",
"@reach/menu-button": "^0.18.0",
"@sentry/nextjs": "^7.43.0",
"@storybook/addon-essentials": "^7.0.9",
"@storybook/addon-interactions": "^7.0.9",
"@storybook/addon-links": "^7.0.9",
"@storybook/blocks": "^7.0.9",
"@storybook/nextjs": "^7.0.9",
"@storybook/react": "^7.0.9",
"@storybook/testing-library": "^0.0.14-next.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@theme-ui/color": "^0.15.5",
Expand All @@ -73,6 +82,7 @@
"eslint-import-resolver-typescript": "^3.5.3",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.6.12",
"formdata-polyfill": "^4.0.10",
"formik": "^2.2.9",
"highlight.js": "^11.7.0",
Expand All @@ -98,6 +108,7 @@
"redux-persist": "^6.0.0",
"redux-saga": "^1.2.2",
"redux-saga-test-plan": "^4.0.6",
"storybook": "^7.0.9",
"swr": "^1.3.0",
"theme-ui": "^0.15.5",
"typesafe-actions": "^5.1.0",
Expand Down
46 changes: 46 additions & 0 deletions packages/slice-machine/src/stories/Button.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import type { Meta, StoryObj } from "@storybook/react";

import { Button } from "./Button";

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta<typeof Button> = {
title: "Example/Button",
component: Button,
tags: ["autodocs"],
argTypes: {
backgroundColor: {
control: "color",
},
},
};

export default meta;
type Story = StoryObj<typeof Button>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
args: {
primary: true,
label: "Button",
},
};

export const Secondary: Story = {
args: {
label: "Button",
},
};

export const Large: Story = {
args: {
size: "large",
label: "Button",
},
};

export const Small: Story = {
args: {
size: "small",
label: "Button",
},
};
44 changes: 44 additions & 0 deletions packages/slice-machine/src/stories/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from "react";
import "./button.css";

interface ButtonProps {
/** Is this the principal call to action on the page? */
primary?: boolean;
/** What background color to use */
backgroundColor?: string;
/** How large should the button be? */
size?: "small" | "medium" | "large";
/** Button contents */
label: string;
/** Optional click handler */
onClick?: () => void;
}

/** Primary UI component for user interaction */
export const Button = ({
primary = false,
size = "medium",
backgroundColor = "initial",
label,
...props
}: ButtonProps) => {
const mode = primary
? "storybook-button--primary"
: "storybook-button--secondary";
return (
<button
type="button"
className={["storybook-button", `storybook-button--${size}`, mode].join(
" "
)}
{...props}
>
{label}
<style jsx>{`
button {
background-color: ${backgroundColor};
}
`}</style>
</button>
);
};
26 changes: 26 additions & 0 deletions packages/slice-machine/src/stories/Header.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Header } from "./Header";

const meta: Meta<typeof Header> = {
title: "Example/Header",
component: Header,
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
tags: ["autodocs"],
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
layout: "fullscreen",
},
};

export default meta;
type Story = StoryObj<typeof Header>;

export const LoggedIn: Story = {
args: {
user: {
name: "Jane Doe",
},
},
};

export const LoggedOut: Story = {};
71 changes: 71 additions & 0 deletions packages/slice-machine/src/stories/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from "react";

import { Button } from "./Button";
import "./header.css";

type User = {
name: string;
};

interface HeaderProps {
user?: User;
onLogin: () => void;
onLogout: () => void;
onCreateAccount: () => void;
}

export const Header = ({
user,
onLogin,
onLogout,
onCreateAccount,
}: HeaderProps) => (
<header>
<div className="wrapper">
<div>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fillRule="evenodd">
<path
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
fill="#FFF"
/>
<path
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
fill="#555AB9"
/>
<path
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
fill="#91BAF8"
/>
</g>
</svg>
<h1>Acme</h1>
</div>
<div>
{user ? (
<>
<span className="welcome">
Welcome, <b>{user.name}</b>!
</span>
<Button size="small" onClick={onLogout} label="Log out" />
</>
) : (
<>
<Button size="small" onClick={onLogin} label="Log in" />
<Button
primary
size="small"
onClick={onCreateAccount}
label="Sign up"
/>
</>
)}
</div>
</div>
</header>
);
Loading

0 comments on commit 7c2be39

Please sign in to comment.