diff --git a/.storybook/logo.png b/.storybook/logo.png index 9c5b9ac..0b09ba2 100644 Binary files a/.storybook/logo.png and b/.storybook/logo.png differ diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 3c380c0..c2938b6 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -1 +1 @@ - + diff --git a/.storybook/styles.css b/.storybook/styles.css index b7739c2..5d020a0 100644 --- a/.storybook/styles.css +++ b/.storybook/styles.css @@ -1,4 +1,12 @@ .sb-show-main { margin: 0; background: inherit; + transition: background 0.2s ease; +} + +.sb-show-main.light-mode { + background: #fff; +} +.sb-show-main.dark-mode { + background: #191a1f; } diff --git a/components/base-layout/index.module.scss b/components/base-layout/index.module.scss new file mode 100644 index 0000000..5d4185b --- /dev/null +++ b/components/base-layout/index.module.scss @@ -0,0 +1,16 @@ +@import '../../styles/variables.scss'; + +.root { + padding: 0; +} + +.container { + max-width: 1440px; + padding: 20px; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; +} diff --git a/components/base-layout/index.tsx b/components/base-layout/index.tsx new file mode 100644 index 0000000..c2bbb3e --- /dev/null +++ b/components/base-layout/index.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { DarkModeToggle } from 'components/dark-mode-toggle' + +import styles from './index.module.scss' +import { Typography } from 'components/typography' + +type BaseLayoutProps = { + children: PropTypes.ReactNodeLike +} + +const BaseLayout = ({ children }: BaseLayoutProps) => { + return ( +
+
+
+ Menu + +
+
+
{children}
+
+ ) +} + +export { BaseLayout } diff --git a/components/button/index.module.scss b/components/button/index.module.scss index 5374f9e..693e7b3 100644 --- a/components/button/index.module.scss +++ b/components/button/index.module.scss @@ -5,10 +5,20 @@ font-size: $font-size-medium-body; line-height: $line-height-medium-body; color: $black; + cursor: pointer; background-color: $off-white; border: 1px solid $light-gray-one; border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12); + transition: all 0.2s ease; + + &:focus { + outline: none; + } +} + +.noClick { + cursor: default; } .transparent { @@ -23,6 +33,7 @@ .dark { color: $white; background-color: $dark-purple; + border: 1px solid $dark-purple; } .regular { diff --git a/components/button/index.stories.tsx b/components/button/index.stories.tsx index adc5799..bf7e7db 100644 --- a/components/button/index.stories.tsx +++ b/components/button/index.stories.tsx @@ -14,11 +14,13 @@ export const ButtonDesktop = () => { const weight = select('weight', ['regular', 'medium', 'semiBold', 'bold'], 'bold') const body = text('body', 'Mac app coming soon') return ( -
+
- +
+
+
) } diff --git a/components/button/index.tsx b/components/button/index.tsx index 103e7cf..af2c84d 100644 --- a/components/button/index.tsx +++ b/components/button/index.tsx @@ -11,11 +11,23 @@ type ButtonProps = { weight: 'regular' | 'medium' | 'semiBold' | 'bold' } -const Button = ({ children, variant, weight }: ButtonProps) => { - const { value: isDark } = useDarkMode() - const className = classNames(styles[variant], { [styles.dark]: isDark }, styles[weight]) +const Button = ({ + children, + variant, + weight, + ...props +}: ButtonProps & React.DetailedHTMLProps, HTMLButtonElement>) => { + const { value: isDark } = useDarkMode(false) + const className = classNames(styles[variant], styles[weight], { + [styles.dark]: isDark, + [styles.noClick]: !props.onClick, + }) - return + return ( + + ) } Button.defaultProps = { diff --git a/components/dark-mode-toggle/index.module.scss b/components/dark-mode-toggle/index.module.scss index 35385b1..ad95fe5 100644 --- a/components/dark-mode-toggle/index.module.scss +++ b/components/dark-mode-toggle/index.module.scss @@ -1,21 +1,26 @@ @import '../../styles/variables.scss'; .root { - padding: 2px; + position: relative; } .label { display: flex; align-items: center; justify-content: center; - width: 28px; - height: 28px; + width: 32px; + height: 32px; cursor: pointer; user-select: none; } .checkbox { - position: relative; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; overflow: hidden; cursor: pointer; visibility: hidden; diff --git a/components/dark-mode-toggle/index.stories.tsx b/components/dark-mode-toggle/index.stories.tsx index 1b01d8c..f843fae 100644 --- a/components/dark-mode-toggle/index.stories.tsx +++ b/components/dark-mode-toggle/index.stories.tsx @@ -1,6 +1,7 @@ import React from 'react' import { DarkModeToggle } from '.' import useDarkMode from 'use-dark-mode' +import { Typography } from 'components/typography' export default { title: 'Dark Mode Toggle', @@ -10,9 +11,10 @@ export const ToggleDesktop = () => { const darkMode = useDarkMode(false) return ( -
+
-
dark mode: {darkMode.value ? 'enabled' : 'disabled'}
+
+ dark mode: {darkMode.value ? 'enabled' : 'disabled'}
) } diff --git a/components/dark-mode-toggle/index.tsx b/components/dark-mode-toggle/index.tsx index 9d0ba7c..ac629c2 100644 --- a/components/dark-mode-toggle/index.tsx +++ b/components/dark-mode-toggle/index.tsx @@ -10,9 +10,6 @@ const DarkModeToggle = () => { return (
- { checked={darkMode.value} onChange={darkMode.toggle} /> +
) } diff --git a/components/seo/index.tsx b/components/seo/index.tsx new file mode 100644 index 0000000..9114237 --- /dev/null +++ b/components/seo/index.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import Head from 'next/head' + +type SEOProps = { + title: string + description: string +} + +const SEO = ({ title, description }: SEOProps) => ( + + {title} + + + + + +) + +export { SEO } diff --git a/components/svgs/svg-moon.tsx b/components/svgs/svg-moon.tsx index a15cda2..8f23ee3 100644 --- a/components/svgs/svg-moon.tsx +++ b/components/svgs/svg-moon.tsx @@ -5,7 +5,7 @@ const SvgMoon: React.FC> const idPrefix = uniqueId('svg-') return ( - Moon + Dark mode > const idPrefix = uniqueId('svg-') return ( - Sun + Light mode { + const { toggle } = useDarkMode(false) + const body = text('body', 'Favycon') + return ( +
+ {body} +
+ +
+ ) +} + +ToolTitleDesktop.story = { + name: 'desktop', +} diff --git a/components/tool-title/index.tsx b/components/tool-title/index.tsx new file mode 100644 index 0000000..2e1e13b --- /dev/null +++ b/components/tool-title/index.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { Typography } from 'components/typography' + +import styles from './index.module.scss' + +type ToolTitleProps = { + children: string +} + +const ToolTitle = ({ children }: ToolTitleProps) => ( +
+ + {children} + + + TOOL + +
+) + +export { ToolTitle } diff --git a/components/typography/index.module.scss b/components/typography/index.module.scss index b86a4c3..275de98 100644 --- a/components/typography/index.module.scss +++ b/components/typography/index.module.scss @@ -53,6 +53,11 @@ .black { color: $black; + transition: color 0.2s ease; + + &.dark { + color: $white; + } } .gray { @@ -61,4 +66,9 @@ .white { color: $white; + transition: color 0.2s ease; + + &.dark { + color: $black; + } } diff --git a/components/typography/index.stories.tsx b/components/typography/index.stories.tsx index 46bdc29..46545e9 100644 --- a/components/typography/index.stories.tsx +++ b/components/typography/index.stories.tsx @@ -1,5 +1,7 @@ import React from 'react' import { withKnobs, text, select } from '@storybook/addon-knobs' +import useDarkMode from 'use-dark-mode' +import { Button } from 'components/button' import { Typography } from '.' export default { @@ -7,7 +9,8 @@ export default { decorators: [withKnobs], } -export const typographyDesktop = () => { +export const TypographyDesktop = () => { + const { toggle } = useDarkMode(false) const variant = select( 'variant', ['h1', 'smallBody', 'regularBody', 'mediumBody', 'largeBody', 'footer', 'superscript'], @@ -17,12 +20,16 @@ export const typographyDesktop = () => { const color = select('color', ['black', 'gray', 'white'], 'black') const body = text('body', 'Some text') return ( - - {body} - +
+ + {body} + +
+ +
) } -typographyDesktop.story = { +TypographyDesktop.story = { name: 'Desktop', } diff --git a/components/typography/index.tsx b/components/typography/index.tsx index 3f6d19d..6afa783 100644 --- a/components/typography/index.tsx +++ b/components/typography/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' +import useDarkMode from 'use-dark-mode' import styles from './index.module.scss' @@ -13,7 +14,8 @@ type TypographyProps = { } const Typography = ({ children, variant, weight, color, tag }: TypographyProps) => { - const className = classNames(styles[variant], styles[color], styles[weight]) + const { value: isDark } = useDarkMode(false) + const className = classNames(styles[variant], styles[color], styles[weight], { [styles.dark]: isDark }) const componentType = ['h1'].includes(variant) ? variant : 'p' return React.createElement(tag || componentType, { className }, children) diff --git a/pages/_document.tsx b/pages/_document.tsx index a9b4dd0..630dcf2 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -7,7 +7,7 @@ class MyDocument extends Document { -