diff --git a/slides/cdds-upleveled.mdx b/slides/cdds-upleveled.mdx new file mode 100644 index 00000000..eec18518 --- /dev/null +++ b/slides/cdds-upleveled.mdx @@ -0,0 +1,1285 @@ +import { jsx, Flex } from 'theme-ui'; +import { + Appear, + Boom, + Box, + Center, + Code, + Cover, + Demo, + Figure, + Image, + Notes, + LiveCode, + List, + Primary, + Secondary, + Split, + SplitWithHeading, + ThatGuy, + Video, +} from './theme'; +import { Prism } from 'react-syntax-highlighter'; +import TweetEmbed from 'react-tweet-embed'; +import Stack from 'stack-styled'; +import * as dropdown from './code/dropdown.js'; + +export { theme } from './theme'; + + + +--- + +
+ +## Andrey Okonetchnikov + +UI developer with experience in both design and development who specializes in interaction design, design systems and modern frontend development. + +
+ +--- + +
+
https://component-driven.io + } + >
+
+ +--- + + + +# How we build on the Web + + + +--- + +## Building UI with HTML & CSS (past ~20 years) + +1. Get a static mockup from a designer +1. Write HTML markup that represents the mockup +1. Write CSS and connect with HTML using classes +1. "Sprinkle" JavaScript using classes to add interactivity +1. Hand off to a backend developer +1. Replace HTML with PHP, Ruby, Java, ... +1. ... +1. Profit + +--- + +## Building UI with React (past ~5 years) + +1. Get a static mockup from a designer +1. Get data from API endpoint +1. Render data in JSX using HTML +1. Write CSS and connect with JSX using `className` +1. ... +1. Profit + +--- + + + +> Designers are still drawing **static mockups** and developers are writing **HTML & CSS** + + + +--- + + + +# What's the problem with static mockups? + + + +--- + + + +--- + + + +--- + +## Static mockups... + +1. not covering all possible states +1. not covering all possible resolutions +1. losing lots of design knowledge during ~~translation~~ hand-off +1. are static! + +--- + + + +# What's the problem with using CSS? + + + +--- + + + +# CSS is hard 🀯 + + + +--- + + + +# Quiz + + + +--- + + + +## What text color Text A and Text B going to be? + +```css +.red { + color: red; +} + +.blue { + color: blue; +} +``` + +```html +

Text A

+

Text B

+``` + + + +--- + +
+ + +
+ +--- + + + +# CSS is the source of inconsistent UIs + + + +--- + + + +--- + +## Sources of inconsistent UIs + +1. Color & Typography +1. Spacing & Layout + +--- + + + +## Custom CSS + +```css +.description { + margin-bottom: 20px; + font-size: 16px; + color: #c9b8b9; +} +``` + +```css +.count { + margin-left: 0.75em; + font-size: 14px; + opacity: 0.5; + color: #fc9; +} +``` + + + +--- + + + +--- + + + +--- + + + +--- + + + +# CSS is too expressive πŸ‘©β€πŸŽ¨ + + + +--- + + + +## What should we do? + + + +--- + + + +# Stop writing CSS! + + + +--- + + + +# Design tokens + + + +--- + +
+ +
+ +--- + + + +> Design tokens are everything you use more than once in your styles + + + +--- + +
+ +# Defining & Documenting Design Tokens + +
+ +--- + +
+ +## UI Inventory process + +
+ +--- + +
+
+
+ +--- + +
+
+
+ +--- + +
+
+
+ +--- + + + +--- + +
+ + {require('!raw-loader!./code/themeExample.js').default} + +
+ +--- + +
+
+ https://marvelapp.com/styleguide/design/color-scheme + + } + /> +
+ +--- + +
+
+ https://cloudflare.github.io/cf-ui/#cf-design-gradients + + } + /> +
+ +--- + +
+
+ https://vueds.com/example/#!/Design%20Tokens + + } + /> +
+ +--- + +
+
+ https://www.lightningdesignsystem.com/design-tokens/ + + } + /> +
+ +--- + + + +--- + +
+
https://colorsnapper.com} + /> +
+ +--- + + + +# [bit.ly/cddwrkshp](https://bit.ly/cddwrkshp) + + + +--- + +
+ +# πŸ‘©β€πŸ’» `npm start` + +- [http://localhost:3000](http://localhost:3000) β€” App +- [http://localhost:6060](http://localhost:6060) β€” Final styleguide +- [http://localhost:6061](http://localhost:6061) β€” Exercises + +
+ +--- + + + +# UI Primitives + + + +--- + + + +> HTML was designed for documents, not applications! + + + +--- + + + + Text, Heading +
+ {`

Heading

+

Text

`} +
+ ️😊 + Link +
+ {`Link`} +
+ πŸ€” + Button +
+ + {` +Button`} + +
+ πŸ™„ + Dropdown +
+ {dropdown.html} +
+ 😩 + + + +--- + + + + + +--- + + + +> Components is a better way of writing HTML + + + +--- + +
+ +# Components + +- ` +
    + {props.options.map(option => ( +
  • {option}
    • + ))} +
+ +); +``` + + + +--- + +## Components as a common language + + + A button + {`
+ +--- + +
+ +{``} + +vs. + +{``} + +
+ +--- + + + +> Learn once, use everywhere + + + +--- + +
+ +## CSS + React wayβ„’ = styled-system + +
+ +--- + +
+
https://styled-system.com} + /> +
+ +--- + + + +> Styled System lets you quickly build custom UI components with constraint-based style props based on scales defined in your theme. + + + +--- + + + +# Text + + + +--- + +## API design + +Things developers will be allowed to customize + +- Typography (`fontSize`, `fontWeight`, `letterSpacing`, etc.) +- Alignment (`left`, `center`, `right`, ~~`justify`~~) +- Color (`color`) +- Whitespace (`margin`) +- HTML elements (`p`, `span`, `label`) + +--- + + + +> Define a minimal set of props that can be customized + + + +--- + +
+ +```javascript +import styled from '@emotion/styled'; +import { color, margin, typography } from 'styled-system'; + +export const Text = styled.p( + // defaults + { + margin: 0, + lineHeight: 1.5, + }, + // API + color, + typography, + margin +); +``` + +
+ +--- + +
+ +```javascript +import Text from '../primitives/Text'; + + + Bold red text +; +``` + +
+ +--- + + + +--- + +## Necessary text styles + +
    +
  • +

    Heading 1

    +
    • +
  • +

    Heading 2

    +
    • +
  • Normal text
    • +
  • Secondary text
    • +
  • Error
    • +
  • etc.
    • +
+ +--- + + + +> UI inventory helps with defining what's necessary + + + +--- + +## API: boolean vs variant + +- `` πŸ˜€ +- `` πŸ˜€ +- `` 🀯 + +--- + +## API: boolean vs variant + +- `` πŸ˜€ +- `` πŸ˜€ +- ~~``~~ 🚫 +- ` -; +```js noeditor +import LoginForm from './final/LoginForm'; + ``` ### The task -1. Create a `LoginPage` component. +1. Create a `LoginForm` component. +2. Use only primitives for layout, whitespace (`Box`, `Flex`, `Grid`, and `Stack`) and text (`Text`, `Heading`, `Button`, and `Link`). +3. The layout should be responsive and the labels should be placed above input fields on a narrow screen. + +**Hint:** Use arrays for responsiveness, like this: `gridTemplateColumns={['1fr', '1fr auto']}`. -2. Use only primitives for layout, whitespace (`Box`, `Flex`, `Grid`, and `Stack`) and text (`Text`, `Heading` and `Link`).
Solution -```js {"file": "solutions/5.2.js", "static": true} +```js {"file": "./final/LoginForm.js", "static": true} ```
diff --git a/src/exercises/5-Patterns/SubscriptionForm.js b/src/exercises/5-Patterns/SubscriptionForm.js deleted file mode 100644 index b9058271..00000000 --- a/src/exercises/5-Patterns/SubscriptionForm.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import Stack from '../../components/primitives/Stack'; -import Box from '../../components/primitives/Box'; -import Button from '../../components/primitives/Button'; -import Input from '../../components/primitives/Input'; - -const SubscriptionForm = ({ - id, - onSubmit, - onEmailChange, - email, - loading, - success, - error, -}) => ( -
- - -
-); - -export default SubscriptionForm; diff --git a/src/exercises/5-Patterns/SubscriptionForm.md b/src/exercises/5-Patterns/SubscriptionForm.md deleted file mode 100644 index 11611436..00000000 --- a/src/exercises/5-Patterns/SubscriptionForm.md +++ /dev/null @@ -1,3 +0,0 @@ -```jsx harmony - -``` diff --git a/src/exercises/5-Patterns/final/LoginForm.js b/src/exercises/5-Patterns/final/LoginForm.js new file mode 100644 index 00000000..8c25441e --- /dev/null +++ b/src/exercises/5-Patterns/final/LoginForm.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { + Heading, + Text, + Box, + Flex, + Grid, + Input, + Link, + Button, + Stack, +} from '../../../components'; + +export default () => { + return ( + + Login please + + + Username + + + + + + Password + + + + + + + + + Forgot your password? + + + + ); +}; diff --git a/src/exercises/5-Patterns/solutions/5.1.js b/src/exercises/5-Patterns/solutions/5.1.js deleted file mode 100644 index 804eae42..00000000 --- a/src/exercises/5-Patterns/solutions/5.1.js +++ /dev/null @@ -1,40 +0,0 @@ -/* eslint-disable jsx-a11y/accessible-emoji */ -import React from 'react'; -import Grid from '../../../../src/components/primitives/Grid'; -import Button from '../../../../src/components/primitives/Button'; -import Input from '../../../../src/components/primitives/Input'; - -const SubscriptionForm = ({ - id, - onSubmit, - onEmailChange, - email, - loading, - success, - error, -}) => ( - - - - -); - -export default SubscriptionForm; diff --git a/src/exercises/5-Patterns/solutions/5.2.js b/src/exercises/5-Patterns/solutions/5.2.js deleted file mode 100644 index 58c5ddd0..00000000 --- a/src/exercises/5-Patterns/solutions/5.2.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import Box from '../../../../components/primitives/Box'; -import Flex from '../../../../components/primitives/Flex'; -import Heading from '../../../../components/primitives/Heading'; -import Button from '../../components/primitives/Button'; -import Link from '../../../../components/primitives/Link'; -import Text from '../../../../components/primitives/Text'; -import Input from '../../../../components/primitives/Input'; - -const LoginPage = () => { - return ( -
- Login - - Username - - - - Password - - - - Forgot your password? - - -
- ); -}; - -export default LoginPage; diff --git a/styleguide.config.js b/styleguide.config.js index c2c74aaa..e2c4ffbb 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -23,6 +23,15 @@ const config = { pagePerSection: true, exampleMode: 'expand', usageMode: 'expand', + compilerConfig: { + transforms: { + // Support for styled-components + dangerousTaggedTemplateString: true, + + // "Support" for `import` syntax + moduleImport: false, + }, + }, webpackConfig, updateExample(props, exampleFilePath) { const { settings, lang } = props;