Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v0.4.0 -> v0.5.0 #105

Merged
merged 55 commits into from
Oct 9, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
f87c6bb
Feat #43 - Tag, Link components
sam-dassana Aug 14, 2020
97d5e4f
Fix #47 - Fix Link props - both onClick & href are undef (#48)
sam-dassana Aug 14, 2020
ba77ee2
Chore #49- Upgrade Storybook and dependencies (#50)
sam-dassana Aug 18, 2020
caa3e01
feat #38 - Add eslint and fix lint errors & warnings (#39)
sam-dassana Aug 11, 2020
cb4b319
Feat #43 - Tag, Link components
sam-dassana Aug 14, 2020
0a9a022
Fix #47 - Fix Link props - both onClick & href are undef (#48)
sam-dassana Aug 14, 2020
2584b28
Chore #49- Upgrade Storybook and dependencies (#50)
sam-dassana Aug 18, 2020
427e22f
feat #3 - Input field component (#53)
nancy-dassana Aug 21, 2020
e0c0bc6
Feat #30 - Toggle and Icon components (#52)
sam-dassana Aug 21, 2020
9a88334
chore #41 - Add verify labels GitHub action (#42)
parth-dassana Aug 12, 2020
5b98c5b
Feat #43 - Tag, Link components
sam-dassana Aug 14, 2020
74d7d33
Fix #47 - Fix Link props - both onClick & href are undef (#48)
sam-dassana Aug 14, 2020
b41ca47
Chore #49- Upgrade Storybook and dependencies (#50)
sam-dassana Aug 18, 2020
2dba6fe
feat #38 - Add eslint and fix lint errors & warnings (#39)
sam-dassana Aug 11, 2020
c17778d
chore #41 - Add verify labels GitHub action (#42)
parth-dassana Aug 12, 2020
cc37822
Feat #43 - Tag, Link components
sam-dassana Aug 14, 2020
df26689
Fix #47 - Fix Link props - both onClick & href are undef (#48)
sam-dassana Aug 14, 2020
8ed4189
Chore #49- Upgrade Storybook and dependencies (#50)
sam-dassana Aug 18, 2020
e64138e
feat #3 - Input field component (#53)
nancy-dassana Aug 21, 2020
fc5b3fa
Feat #30 - Toggle and Icon components (#52)
sam-dassana Aug 21, 2020
81a4894
Bump up version to 0.2.0
parth-dassana Aug 21, 2020
0eb414d
Comment out icon component
parth-dassana Aug 21, 2020
64e7c7a
Update package.json
parth-dassana Aug 21, 2020
3f0ac79
Update index.ts
parth-dassana Aug 21, 2020
94568de
Merge branch 'master' into dev
parth-dassana Aug 21, 2020
062ccb0
Bump up package.json
parth-dassana Aug 21, 2020
e12ea02
Update package-lock.json
parth-dassana Aug 21, 2020
0fa95d0
fix #58 - Address icon, styles, global css, and typescript issues (#59)
parth-dassana Aug 21, 2020
62204c3
Merge branch 'master' into dev
parth-dassana Aug 24, 2020
e39215c
Merge branch 'master' into dev
parth-dassana Aug 24, 2020
d6aca00
chore #63 - Update .eslintrc.js (#64)
sam-dassana Aug 25, 2020
7cce5bd
feat #61 - Skeleton loader component (#66)
nancy-dassana Aug 25, 2020
f7b7331
feat #65 - Form Component (#67)
nancy-dassana Aug 27, 2020
8082187
Merge branch 'master' into dev
parth-dassana Aug 27, 2020
c562ceb
v0.2.4 -> v0.2.5
parth-dassana Aug 27, 2020
31e099f
feat #71 - Notification component (#72)
nancy-dassana Sep 2, 2020
2e5d713
Merge branch 'master' into dev
Sep 2, 2020
06d095a
feat #76 - Refactor Form.Button to be Form.SubmitButton (#77)
nancy-dassana Sep 8, 2020
70bf0c4
Merge branch 'master' into dev
Sep 8, 2020
8bfb295
feat #62 - Table component (#70)
sam-dassana Sep 10, 2020
f6a1d6f
Merge branch 'master' into dev
Sep 10, 2020
459e57f
feat #79 - Select component (#82)
nancy-dassana Sep 16, 2020
f74f43b
feat #83 - Add data-test attribute to components (#85)
nancy-dassana Sep 17, 2020
fa5706e
Merge branch 'master' into dev
Sep 17, 2020
5f641a6
Update failing snapshots
Sep 17, 2020
cc56fab
feat #88 - Fix type exports for rollup (#89)
nancy-dassana Sep 17, 2020
a50bd53
Merge branch 'master' into dev
Sep 17, 2020
f2bdaa4
feat #84 - Radio group component (#91)
nancy-dassana Sep 20, 2020
06873bc
feat #81 - Tree component (#86)
sam-dassana Sep 23, 2020
6f85686
feat #93 - Tooltip component (#95)
nancy-dassana Sep 28, 2020
caf6a10
feat #94 - Popover component (#96)
nancy-dassana Sep 29, 2020
cd22a92
Merge branch 'master' into dev
Sep 29, 2020
7466916
Feat #99, #101, #100 - Add new avatar component and enhancements for …
nancy-dassana Oct 8, 2020
cca500d
Merge branch 'master' into dev
Oct 8, 2020
0f81ad2
feat #92 - Theming (#97)
sam-dassana Oct 9, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions .storybook/Decorator.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React, { FC, ReactNode } from 'react'
import { createUseStyles } from 'react-jss'
import { ThemeType, themes } from '../src/components/assets/styles/themes'
import cn from 'classnames'
const { dark } = ThemeType

const useStyles = createUseStyles({
'@global': {
[`.${dark} .decorator`]: {
backgroundColor: themes[dark].background.secondary
}
},
decorator: {
padding: '1rem'
}
})

export interface DecoratorProps {
children: ReactNode
classes?: string[]
}

const Decorator: FC<DecoratorProps> = ({
children,
classes = []
}: DecoratorProps) => {
const decoratorClasses = useStyles()

return (
<div
className={cn(decoratorClasses.decorator, 'decorator', ...classes)}
>
{children}
</div>
)
}

export default Decorator
13 changes: 13 additions & 0 deletions .storybook/__tests__/Decorator.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import Decorator, { DecoratorProps } from '../Decorator'
import { shallow, ShallowWrapper } from 'enzyme'

let wrapper: ShallowWrapper<DecoratorProps>

describe('Decorator', () => {
it('renders', () => {
wrapper = shallow(<Decorator>Decorator</Decorator>)

expect(wrapper).toHaveLength(1)
})
})
18 changes: 14 additions & 4 deletions .storybook/index.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
/* This is the global dassana stylesheet. It should match the global stylesheet in web-orchestrator. */

@import '~normalize.css';
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

body {
font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
html,
body,
#root,
.App {
font-family: 'Inter', sans-serif;
height: 100%;
}

/* Storybook styles */

.sb-show-main {
/* For side-by-side theme view */
padding: 0 !important;
}
3 changes: 2 additions & 1 deletion .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ module.exports = {
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-actions',
'@storybook/preset-create-react-app'
'@storybook/preset-create-react-app',
'@storybook/addon-cssresources'
]
}
1 change: 0 additions & 1 deletion .storybook/manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ addons.setConfig({
sidebarAnimations: true,
enableShortcuts: true,
isToolshown: true,
theme: undefined,
selectedPanel: 'Controls',
initialActive: 'sidebar',
showRoots: false
Expand Down
23 changes: 0 additions & 23 deletions .storybook/preview.ts

This file was deleted.

161 changes: 161 additions & 0 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import './index.css'
import cn from 'classnames'
import document from 'global/document'
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
import isChromatic from 'chromatic/isChromatic'
import { Story } from '@storybook/react/types-6-0'
import { StoryContext } from '@storybook/addons'
import {
themes,
Theme,
ThemeType
} from '../src/components/assets/styles/themes'
import { createUseStyles, ThemeProvider, useTheme } from 'react-jss'
import { withCssResources } from '@storybook/addon-cssresources'
import React, { FC, ReactNode, useEffect } from 'react'

enum LayoutTypes {
sideBySide = 'side-by-side',
left = 'left',
right = 'right'
}

const { sideBySide, left, right } = LayoutTypes

const { dark, light } = ThemeType

const useStyles = createUseStyles({
storyContainer: {
display: 'flex'
},
storyWrapper: {
padding: '1rem'
}
})

const useStylesWithTheme = createUseStyles({
themeBlock: {
background: ({ theme }: { theme: Theme }) => theme.background.primary,
height: '100vh',
left: props => (props.side === left ? 0 : '50vw'),
overflow: 'auto',
right: props => (props.side === right ? '50vw' : 0),
width: '50vw'
}
})

const ThemedCanvasBg = () => {
const theme: Theme = useTheme()

useEffect(() => {
document.body.style.background = theme.background.primary
})

return null
}

interface StoryWrapperProps {
children: ReactNode
dark?: boolean
}
/*
This wrapper does two things:
1. Adds padding to the story since it was removed from .sb-show-main in ./index.css
2. Toggles 'dark' theme class
*/
const StoryWrapper: FC<StoryWrapperProps> = ({
children,
dark = false
}: StoryWrapperProps) => {
const classes = useStyles()
const wrapperClasses = cn({
dark,
[classes.storyWrapper]: true
})

return <div className={wrapperClasses}>{children}</div>
}

interface ThemedBlockProps {
children: ReactNode
side: LayoutTypes.left | LayoutTypes.right
}
/* This adds a wrapper to style the left and right blocks for side-by-side viewing of dark and light themes. */
const ThemedBlock: FC<ThemedBlockProps> = ({
children,
...props
}: ThemedBlockProps) => {
const theme = useTheme()
const classes = useStylesWithTheme({ ...props, theme })
const { side } = props

return (
<div className={classes.themeBlock}>
<StoryWrapper dark={side === right}>{children}</StoryWrapper>
</div>
)
}

/* This is the decorator that wraps the stories with a theme provider and a wrapper div for side-by-side view. */
const ThemeDecorator = (
ComponentStory: Story,
{ globals: { theme = light } }: StoryContext
) => {
const classes = useStyles()

switch (theme) {
case sideBySide: {
return (
<div className={classes.storyContainer}>
<ThemeProvider theme={themes[light]}>
<ThemedBlock side={left}>
<ComponentStory />
</ThemedBlock>
</ThemeProvider>
<ThemeProvider theme={themes[dark]}>
<ThemedBlock side={right}>
<ComponentStory />
</ThemedBlock>
</ThemeProvider>
</div>
)
}

default: {
return (
<ThemeProvider theme={themes[theme]}>
<ThemedCanvasBg />
<StoryWrapper dark={theme === dark}>
<ComponentStory />
</StoryWrapper>
</ThemeProvider>
)
}
}
}

export const globalTypes = {
theme: {
/* Setting side-by-side as default for chromatic allows for visual regression testing on both dark and light themed stories. */
defaultValue: isChromatic() ? sideBySide : light,
description: 'Global theme for components',
name: 'Theme',
toolbar: {
icon: 'circlehollow',
items: [
{ icon: 'circlehollow', title: light, value: light },
{ icon: 'circle', title: dark, value: dark },
{
icon: 'sidebar',
title: 'side by side',
value: sideBySide
}
]
}
},
viewport: {
viewports: INITIAL_VIEWPORTS
}
}

export const decorators = [withCssResources, ThemeDecorator]
Loading