@yfi/design

v0.2.2

Published

3 years ago

Yearn Aesthetic

Downloads

0High
0Medium
0Low

x48

Yearn Design System

Overview

📚 Storybook for UI component development and auto-generated docs
💅 Styled-components for component-scoped styling
⚛️ React declarative component-centric UI

Maintaining the system

📦 NPM for packaging and distribution
✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)
🚥 CircleCI Continuous integration

Develop

yarn install

Work on components

yarn storybook

Global Styles

Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:

Option 1: Render the `GlobalStyle` component

Useful when you don't need any custom body styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level App component.

import { global } from '@storybook/design-system'
const { GlobalStyle } = global

/* Render the global styles once per page */
<GlobalStyle />

Option 2: Use the `bodyStyles` to apply styling

Useful when you want build upon the shared global styling.

import { createGlobalStyle } from 'styled-components'
import { global } from '@storybook/design-system'
const { bodyStyles } = global

const CustomGlobalStyle = createGlobalStyle`
  body {
    ${bodyStyles}
    // Custom body styling for the app
  }
`

/* Render the global styles once per page */
<CustomGlobalStyle />

Font Loading

Rather than @import fonts in the GlobalStyle component, the design system's font URL is exported with the intention of using it in a <link> tag as the href. Different frameworks and environments handle component re-renders in their own way (a re-render would cause the font to be re-fetched), so this approach allows the design system consumers to choose the font loading method that is most appropriate for their environment.

Option 1: Build the link tag manually

import { global } from '@storybook/design-system'

const fontLink = document.createElement('link')

fontLink.href = global.fontUrl
fontLink.rel = 'stylesheet'

document.head.appendChild(fontLink)

Option 2: Render the link tag in a component

import React from 'react'
import { global } from '@storybook/design-system'

const Layout = ({ children }) => (
  <html>
    <head>
      <link href={global.fontUrl} rel="stylesheet" />
    </head>

    <body>{children}</body>
  </html>
)

export default Layout

Development Scripts

`yarn release`

Bump the version

Push a release to GitHub and npm

Push a changelog to GitHub

Notes:

Requires authentication with npm adduser
auto is used to generate a changelog and push it to GitHub. In order for this to work correctly, an environment variable called GH_TOKEN is needed that references a GitHub personal access token with the appropriate permissions to update the repo.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme