teamsnap-ui
TeamSnaps UI framework. Built with sass and react.
To run locally:
Make sure you using the correct version of node.
nvm use
Install dependencies:
yarn
To build the dist folder for css, js and icons
yarn run build
Each item can also be build independently
yarn run build:css
yarn run build:js
Storybook
React components are documented with Storybook.
To run storybook locally:
yarn run storybook
To access on Netlify:
https://ts-ui-storybook.netlify.com
Netlify makes our Storybook accessible without having to run it locally. Each PR runs a test deploy with a preview, and every merge to master automatically updates the Netlify site.
Linters
All styles are linted using sass-lint
and the config .sass-lint.yml
is available to customize rules as needed.
The linter is also run automatically before publishing updates to npm. For full details see the contributing guide.
To lint both css and js
yarn run lint
To run the linters manually use:
yarn run lint:css
yarn run lint:js
TODO:
- Update docs with full process for working locally with TeamSnap-UI
- Update scripts to use webpack for css management and serving locally
CSS Components
https://teamsnap-ui-patterns.netlify.com/
Finished | CSS Component | React Component | Storybook |
---|---|---|---|
x | Button | Button | x |
x | Button Group | Button Group | x |
x | Checkbox | Checkbox Radio | x |
Divider | Divider | x | |
Feedback | |||
Field Group | Field Group | ||
Field Label | |||
Field Message | |||
Field Wrapper | |||
Grid | Grid Cell | ||
x | Icon | Icon | x |
Input Group | Input | ||
Input Control | |||
Input | Input Text Area | ||
Loader | Loader | ||
x | Panel | Panel | x |
Panel Body | x | ||
Panel Cell | x | ||
Panel Header | x | ||
Panel Row | |||
Panel Row Expandable | |||
Popup | |||
x | Progress | Progress | x |
Select Box | Select | x | |
Step Nav | Step Nav | x | |
Summary List | Summary List | ||
Table | Table | x | |
Tabs | |||
Text Link | |||
Toggle | Toggle | x | |
Tooltip | Tooltip | ||
Pagination | Pagination |
Missing CSS Component List
- [ ] Modal (pr in progress)
- [ ] Badges
- [ ] Member Photos / Placeholders
- [ ] Breadcrumbs
- [ ] Card (2 photo variants)
- [ ] Type ahead
- [ ] Counts
- [ ] Drop area
- [ ] Calendar
- [ ] Primary Navigation (top and side)
- [ ] Side Tabs Variant (manage my teams & snapboard getting started)
- [ ] Dropdown Menu
- [ ] Background utilities
- [ ] Finish adding icons
- [ ] Pagination
- [ ] Miller menu and Tree menu (maybe)
- [ ] Vertical step nav
- [ ] Shadow for components
- [ ] Dynamic Spacing
- [ ] Blockquote
- [ ] Triangle pseudo class for callouts/flyouts
Missing CSS Documentation
- [ ] More Panel Documentation
- [ ] Theming/Variable Documentation
- [ ] Spacing Documentation
- [ ] Color documentation
- [ ] Typography documentation
- [ ] Better Grid documentation with sizes
- [ ] Pagination
Missing React Component List
- [ ] Feedback
- [ ] Popup
- [ ] Modal
- [ ] Tab
- [ ] Input Show Hide
- [ ] Pagination