@spartanbio/schedio

Spartan's design system.

Usage no npm install needed!

<script type="module">
  import spartanbioSchedio from 'https://cdn.skypack.dev/@spartanbio/schedio';
</script>

README

Schedio

Spartan's design system.

Built for Vue with Theo and SCSS. Documented with Storybook.

Requirements

  • Node 10.16.0+
  • Vue 2.6+
  • @vue/cli 4.0+

Installation

$ yarn add @spartanbio/schedio

Usage

Import and register all components globally:

import Vue from 'vue'
import Schedio from '@spartanbio/schedio'
import '@spartanbio/schedio/dist/schedio.css'

Vue.use(Schedio, {
  // options...
})

For a list of all configurable options, check here.

Or, import and register individual components to keep the bundle smaller:

import Vue from 'vue'
import SButton from '@spartanbio/schedio/dist/components/SButton'
import SContainer from '@spartanbio/schedio/dist/components/SContainer'
import '@spartanbio/schedio/dist/schedio.css'

Vue.use(SButton)
Vue.use(SContainer)

Components can also be registered locally:

<!-- ALocalComponent.vue -->

<script>
import { SButton } from '@spartanbio/schedio'

export default {
  name: 'ALocalComponent',
  components: {
    SButton
  }
}
</script>

N.B.: Fonts are not included in this bundle.

SCSS Resources

SCSS can be used with sass and sass-loader by importing '@spartanbio/schedio/src/assets/styles.scss'

To use SCSS resources, import the following in this order:

  1. Required: '@spartanbio/schedio/src/assets/styles/tokens.scss'
  2. '@spartanbio/schedio/src/assets/styles/base.scss'
  3. '@spartanbio/schedio/src/assets/styles/global.scss'

Dev setup

$ git clone https://gitlab.com/spartanbio-marketing/schedio.git
$ cd schedio && yarn install

# work should not be committed to master
$ git checkout -b <feature-branch>

@ and ~ have been aliased to src/ in webpack. @@ and ~~ have also been aliased to the project root.

Build tokens and hot-reload for component development

# Build Theo tokens
$ yarn dist:tokens

# Served at localhost:6006, with `@vue/devtools` on localhost:8989
# Watches Vue components, SCSS, Storybook stories, and Theo tokens
$ yarn dev

# Scaffold a new component/story in src/components/<ComponentName>
# The following files will be created:
# + index.js
# + <ComponentName>.scss
# + <ComponentName>.stories.jsx
# + <ComponentName>.vue
# + __tests__/<ComponentName>.spec.js
$ yarn scaffold <ComponentName>

Compile and minify component library for production

$ yarn build

Builds docs for deploy

$ yarn build:storybook

Lint and fix

$ yarn lint

Tests

# generate any missing unit tests
$ yarn add-unit-tests

# run all tests
$ yarn test

# run only unit tests
$ yarn test:unit

Contributing

This project uses conventional commits to automatically generate change logs, and tag releases.