Socket
Book a DemoInstallSign in
Socket

@teamsnap/teamsnap-ui

Package Overview
Dependencies
Maintainers
16
Versions
276
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@teamsnap/teamsnap-ui

a CSS component library for TeamSnap

3.12.3
latest
Source
npmnpm
Version published
Weekly downloads
418
150.3%
Maintainers
16
Weekly downloads
 
Created
Source

teamsnap-ui

TeamSnaps UI framework. Built with sass and react.

CI

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/

FinishedCSS ComponentReact ComponentStorybook
xButtonButtonx
xButton GroupButton Groupx
xCheckboxCheckbox Radiox
DividerDividerx
Feedback
Field GroupField Group
Field Label
Field Message
Field Wrapper
GridGrid Cell
xIconIconx
Input GroupInput
Input Control
InputInput Text Area
LoaderLoader
xPanelPanelx
Panel Bodyx
Panel Cellx
Panel Headerx
Panel Row
Panel Row Expandable
Popup
xProgressProgressx
Select BoxSelectx
Step NavStep Navx
Summary ListSummary List
TableTablex
Tabs
Text Link
ToggleTogglex
TooltipTooltip
PaginationPagination

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

Keywords

css

FAQs

Package last updated on 25 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.