Shared component library
- Text - Just use a plain old
styled.divorstyled.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.
To get up and running, just run yarn start and visit http://localhost:9001.
Please refer to the PR template
- Open a PR against
masterand 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.
TODO: Coming soon!
TODO: Coming soon!
To enforce a standard code style, a 🐶 Husky pre-commit hook runs Lint-Staged to automatically format our code using 💅 Prettier.
For some useful CSS helpers, we use ✨ Polished.
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';
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;
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>
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'
- Changelog/versioning
- Possibly checkout Bit for publishing several components
- Once all addons support Babel 7, switch to babel 7, add Webpack 4.
- PR checklist
- GreenKeeper
- Configure Jest
- Linting!!!
- Add styled-system for consistency in styling
- Add PropTypes to all the subfolders in Profile/components
- Refactor responsive util so that we're not passing unnecessary props to dom elements
- Add a11y addon
- Prettier