Skip to content

Commit

Permalink
feat: storybook: adds storybook controls and documentation (#147)
Browse files Browse the repository at this point in the history 
* feat: storybook: adds storybook controls and documentation

adds documentation and interactive controls

* chore: jest: update snapshots

* chore: storybook: remove br tags

* chore: storybook: updates story events

* chore: storybook: finish updating stories

* chore: storybook: updates snapshots and readme

* chore: storybook: merge storybook package upgrades

fixes broken storybook build
  • Loading branch information
@dkilgore-eightfold
dkilgore-eightfold authored May 26, 2022
1 parent 757b153 commit 12baf01
Show file tree
Hide file tree
Showing 37 changed files with 5,427 additions and 3,688 deletions.
2 changes: 0 additions & 2 deletions .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ module.exports = {
'../src/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-actions',
'@storybook/addon-docs',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-links',
Expand Down
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ It represents a collection of assets, utilities, and React components for buildi
- Creates visual consistency across products, channels, and (potentially siloed) departments.
- Serves as an educational tool and reference for junior-level designers and content contributors.

Visit the Octuple [Storybook site](https://eightfoldai.github.io/octuple.github.io/).

## Changelog

You can view the complete list of additions, fixes, and changes in the [change log](https://github.com/EightfoldAI/octuple/blob/main/CHANGELOG.md)
Expand Down
33 changes: 18 additions & 15 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,21 +66,23 @@
"@commitlint/config-conventional": "16.2.1",
"@ctrl/tinycolor": "3.4.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.3",
"@storybook/addon-actions": "6.5.0-alpha.47",
"@storybook/addon-docs": "6.5.0-alpha.47",
"@storybook/addon-essentials": "6.5.0-alpha.47",
"@storybook/addon-interactions": "6.5.0-alpha.47",
"@storybook/addon-links": "6.5.0-alpha.47",
"@storybook/addon-actions": "6.5.5",
"@storybook/addon-docs": "6.5.5",
"@storybook/addon-essentials": "6.5.5",
"@storybook/addon-info": "6.0.0-alpha.2",
"@storybook/addon-interactions": "6.5.5",
"@storybook/addon-links": "6.5.5",
"@storybook/addon-postcss": "2.0.0",
"@storybook/addon-storyshots": "^6.4.22",
"@storybook/addon-viewport": "6.5.0-alpha.47",
"@storybook/addons": "6.5.0-alpha.47",
"@storybook/builder-webpack5": "6.5.0-alpha.47",
"@storybook/manager-webpack5": "6.5.0-alpha.47",
"@storybook/node-logger": "6.5.0-alpha.47",
"@storybook/addon-storyshots": "6.5.5",
"@storybook/addon-viewport": "6.5.5",
"@storybook/addons": "6.5.5",
"@storybook/builder-webpack5": "6.5.5",
"@storybook/manager-webpack5": "6.5.5",
"@storybook/node-logger": "6.5.5",
"@storybook/preset-scss": "1.0.3",
"@storybook/react": "6.5.0-alpha.47",
"@storybook/theming": "6.5.0-alpha.47",
"@storybook/react": "6.5.5",
"@storybook/source-loader": "6.5.5",
"@storybook/theming": "6.5.5",
"@svgr/webpack": "5.5.0",
"@teamsupercell/typings-for-css-modules-loader": "2.1.0",
"@testing-library/jest-dom": "5.16.2",
Expand All @@ -104,7 +106,7 @@
"browserslist": "4.18.1",
"camelcase": "6.2.1",
"case-sensitive-paths-webpack-plugin": "2.4.0",
"chromatic": "^6.5.4",
"chromatic": "6.5.4",
"clean-webpack-plugin": "3.0.0",
"copy-webpack-plugin": "6.0.1",
"css-loader": "6.5.1",
Expand All @@ -118,7 +120,7 @@
"eslint-config-prettier": "8.5.0",
"eslint-config-react-app": "7.0.0",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-storybook": "0.5.7",
"eslint-plugin-storybook": "0.5.12",
"eslint-webpack-plugin": "3.1.1",
"file-loader": "6.2.0",
"fs-extra": "10.0.0",
Expand All @@ -145,6 +147,7 @@
"prompts": "2.4.2",
"react-color": "2.19.3",
"react-dev-utils": "12.0.0",
"react-docgen-typescript": "2.2.2",
"react-refresh": "0.11.0",
"react-test-renderer": "17.0.2",
"resolve": "1.20.0",
Expand Down
173 changes: 107 additions & 66 deletions src/components/Accordion/Accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,35 @@
import React from 'react';
import { Stories } from '@storybook/addon-docs';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Badge } from '../Badge';
import { List } from '../List';
import { Icon, IconName } from '../Icon';
import { Accordion } from './';

export default {
title: 'Accordion',
component: Accordion,
};
parameters: {
docs: {
page: (): JSX.Element => (
<main>
<article>
<section>
<h1>Accordion</h1>
<p>
Accordions display a list of high-level options
that can expand/collapse to reveal more
information.
</p>
</section>
<section>
<Stories includePrimary title="" />
</section>
</article>
</main>
),
},
},
} as ComponentMeta<typeof Accordion>;

const accordionSummary = (count: number) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
Expand All @@ -17,7 +39,11 @@ const accordionSummary = (count: number) => (
</div>
);

const listItems = [
const listItems: {
summary: JSX.Element;
body: string;
id: string;
}[] = [
{
summary: accordionSummary(2),
body: `Body 2 text used here. Bottom bars are sticky sections that
Expand All @@ -42,70 +68,85 @@ const listItems = [
},
];

export const Default = () => {
return (
const Single_Story: ComponentStory<typeof Accordion> = (args) => (
<Accordion {...args} />
);

export const Single = Single_Story.bind({});

const List_Vertical_Story: ComponentStory<typeof List> = (args) => (
<List {...args} />
);

export const List_Vertical = List_Vertical_Story.bind({});

const List_Horizontal_Story: ComponentStory<typeof List> = (args) => (
<List {...args} />
);

export const List_Horizontal = List_Horizontal_Story.bind({});

Single.args = {
children: (
<>
<div style={{ height: '80px' }}>
Body 2 text used here. Bottom bars are sticky sections that can
be used to highlight a few actions that are out of the view to
be displayed inside the view. For example, if there's a very
long form with Save and Cancel buttons at the bottom, we can use
the bottom bar to show those two buttons in the view. We are
making these bars to be flexible in height and also allowing any
component to be added inside for now, to understand use cases
from the team.
</div>
</>
),
id: 'myAccordionId',
expandIconProps: {
path: IconName.mdiChevronDown,
},
summary: 'Accordion Header',
};

const listArgs: Object = {
items: listItems,
footer: (
<>
<div style={{ paddingLeft: '16px' }}>
<h3>Footer</h3>
</div>
</>
),
layout: 'vertical',
renderItem: (item: { summary: JSX.Element; body: string; id: string }) => (
<Accordion summary={item.summary} id={item.id}>
{item.body}
</Accordion>
),
header: (
<>
<h2>Single Accordion</h2>
<div style={{ width: '500px' }}>
<Accordion summary={'Accordion Header'} id="single-accordion">
<div>
Body 2 text used here. Bottom bars are sticky sections
that can be used to highlight a few actions that are out
of the view to be displayed inside the view. For
example, if there's a very long form with Save and
Cancel buttons at the bottom, we can use the bottom bar
to show those two buttons in the view. We are making
these bars to be flexible in height and also allowing
any component to be added inside for now, to understand
use cases from the team.{' '}
</div>
</Accordion>
<div style={{ paddingLeft: '16px' }}>
<h2>Header</h2>
</div>
<br />
<br />
<h2>Accordion Notifications List Vertical</h2>
<List
items={listItems}
renderItem={(item) => (
<Accordion summary={item.summary} id={item.id}>
{item.body}
</Accordion>
)}
header={
<div style={{ paddingLeft: '16px' }}>
<h2>Header</h2>
</div>
}
footer={
<div style={{ paddingLeft: '16px' }}>
<h3>Footer</h3>
</div>
}
itemStyle={{ padding: '8px 16px' }}
/>
<br />
<br />
<h2>Accordion Notifications List Horizontal</h2>
<List
items={listItems}
renderItem={(item) => (
<Accordion summary={item.summary} id={item.id}>
{item.body}
</Accordion>
)}
header={
<div style={{ paddingLeft: '16px' }}>
<h2>Header</h2>
</div>
}
footer={
<div style={{ paddingLeft: '16px' }}>
<h3>Footer</h3>
</div>
}
layout="horizontal"
itemStyle={{ padding: '8px' }}
/>
</>
);
),
classNames: 'my-list-class',
style: {},
itemClassNames: 'my-list-item-class',
itemStyle: {
padding: '8px 16px',
},
listType: 'ul',
};

List_Vertical.args = {
...listArgs,
};

List_Horizontal.args = {
...listArgs,
layout: 'horizontal',
itemStyle: {
padding: '8px',
},
};
Loading

0 comments on commit 12baf01

Please sign in to comment.