the-wing / components Goto Github PK

View Code? Open in Web Editor NEW

0.0 4.0 1.0 1.74 MB

Shared component library

License: MIT License

JavaScript 98.48% CSS 1.52%

components's Introduction

components

Shared component library

⚠️ Important: We will be deprecating: ⚠️

Text - Just use a plain old styled.div or styled.span
Box - Just use a styled.div
util: responsive() - For responsiveness, see the Breakpoints section of this readme.

Please refrain from using these any further.

Development

To get up and running, just run yarn start and visit http://localhost:9001.

PR Requirements

Please refer to the PR template

Workflow

Open a PR against master and fill out necessary fields in PR template.
Request a code review from at least one person.
After code has been approved, post link to deploy preview in Jira ticket for UAT.
After UAT approved, merge and ask @cullenbmacdonald or @rfarine to publish your changes.
Update version of library in whichever branch you're working on in Members Portal or Meteor application.

Jest/Enzyme

TODO: Coming soon!

ESLint

TODO: Coming soon!

Prettier

To enforce a standard code style, a 🐶 Husky pre-commit hook runs Lint-Staged to automatically format our code using 💅 Prettier.

Polished

For some useful CSS helpers, we use ✨ Polished.

Usage

Normalize

If you want everything to appear correctly in all browsers, make sure to include our Normalize.css file at the root of your project:

import '@thewing/components/dist/css/normalize.css';

Breakpoints

Important: We always design mobile first. In the following styled component, we style anything that is smaller than desktop with a red border. We then use the desktop media query to override these mobile and tablet styles.

For styling within this library based on device size, you can do the following:

import styled from 'styled-components';

const StyledDiv = styled.div`
  border: 1px solid red;

  @media ${props => props.theme.queries.desktop} {
    border: none;
  }
`;

ALSO IMPORTANT Please refrain from using the responsive util going forward. That util is legacy and will be phased out in time.

For showing/hiding different components in a component's layout, we use React Breakpoints to conditionally render components at different breakpoints. It is required to wrap your application with a ReactBreakpoints component like so:

import ReactBreakpoints from 'react-breakpoints';
import breakpoints from '@thewing/components/dist/breakpoints';

  <ReactBreakpoints breakpoints={breakpoints}>
    [...]
  </ReactBreakpoints>

When creating components, we do not use the HoC withBreakpoints, but rather favor the render props approach:

import { Media } from 'react-breakpoints';

const Navigation = () => (
  {({ breakpoints, currentBreakpoint }) => {
    if (breakpoints[currentBreakpoint] < breakpoints.desktop) {
      return (<MobileNavIcon />);
    }

    return (<NavBar/>);
  }}
);

export default Navigation;

Theme

To use our theme, just import it and use it in a ThemeProvider:

import { ThemeProvider } from 'styled-components';
import '@thewing/components/dist/theme';

  <ThemeProvider theme={theme}>
    [...]
  </ThemeProvider>

Fonts

To enable our fonts in your project, just include the sass file either in your index JS or in the <head> of your index HTML. You'll also need to import the fonts (either by hosting them yourself or adding the folder node_modules/@thewing/components/dist/assets/fonts as a part of your build step.)

import '@thewing/components/dist/css/fonts.css'

Roadmap

Recommend Projects