npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dylankelly/design-system-rebrand

v0.0.9

Published

A complete design system for the University of Melbourne.

Downloads

19

Readme

Design System Rebrand

Copyright © 2017 - The University of Melbourne

The contents of this repository have been produced by The University of Melbourne for internal use and must not be distributed without the express permission of The University of Melbourne.

Build Status

Set-up

The design system requires Node.js v6.11.2, and the latest version of yarn. To set it up, run:

git clone https://github.com/unimelb/design-system-rebrand.git
cd design-system-rebrand
cp .env.example .env
yarn

Development

Storybook is the main development environment.

  • yarn start - http://localhost:7002/
  • yarn run build to build the documentation site to /.out/docs. Environment variable LOAD_EXTERNAL_ASSETS controls whether the documentation site is to load the library assets locally (false) or from the CDN (true).

Targets

Library - targets/lib

The main library for use in the CMS. The target provides a local development environment for testing purposes.

  • yarn run start:lib - http://localhost:7003/.
  • yarn run build:lib to compile the library to .out/lib/<version>. Environment variable LOAD_EXTERNAL_ASSETS controls whether the library is to load its assets locally (false) or from the CDN (true).

Linting

CSS files are linted on the fly with stylelint. The configuration file, .stylelintrc, extends two shared configuration: stylelint-config-standard and stylelint-config-property-sort-order-smacss.

JS files and single-file Vue components are linted on the fly with ESLint. The configuration file, .eslintrc, extends two shared configurations: eslint-config-airbnb and plugin:vue/recommended

For your own sanity, make sure to install your code editor's ESLint and stylelint extensions. The following commands are available for on-demand linting and fixing:

  • yarn run lint
  • yarn run lint:fix
  • yarn run lint:css
  • yarn run lint:css --fix
  • yarn run lint:js
  • yarn run lint:js --fix

Generator

Components

New components can be scaffolded by running:

  • yarn generate component

You will then be asked for the name of the component, this will be used to create a new folder with a minimal component layout and story.

Stories

New stories can be scaffolded too by running:

  • yarn generate story

You will need to select the component from the list of folders, then confirm the selection by selecting choose this directory. You will then be asked to give the story a name.

Note This requires some special comments are added in the stories/index.js file. If it doesn't work make sure the comments are the same as in the template directory

Release process

At the start of a new release sprint:

  • Create a ZenHub release called next-release.

Throughout the release sprint:

  • Assign the appropriate pr- label to every new PR: pr-major if it contains a breaking change, pr-minor if it adds a new feature, pr-patch in all other cases.
  • Assign issues and PRs to next-release as they are resolved/merged.

At the end of the release sprint:

  1. Look at all the PRs that were assigned to next-release throughout the sprint and identify the highest-level of change (major, minor or patch). Deduce the next release's version number and rename the ZenHub release accordingly.
  2. Create a new release notes draft based on the following template: .github/RELEASE_NOTES_TEMPLATE.md.
  3. Write the release notes by going through all the issues and PRs assigned to the ZenHub release.
  4. Deploy to production (cf. next section).
  5. Once the library and documentation sites are deployed, publish the release notes and close the ZenHub release.
  6. Share the ZenHub release report with stakeholders.

Deployment

To deploy to production:

  1. Bump the version number in package.json (cf. note below).
  2. Commit the version change to the dev branch.
  3. Create a pull request to merge the dev branch into master - e.g. "Deploy v1.0.1".
  4. Wait for the mandatory checks to pass then select "Rebase and merge" (cf. note below).

Semaphore then automatically builds the library and syncs the output files to S3. If the version you're deploying had been previously deployed, you'll need to invalidate the files on the CDN (AWS Cloudfront) or wait a day or so for this to happen automatically. Once the library is deployed, follow the release process below.

Note on versioning: the version number follows the semver convention MAJOR.MINOR.PATCH, where: MAJOR corresponds to a breaking change (e.g. a change in a component's markup), MINOR to a new feature (e.g. a new component, a new feature for an existing component, etc.), and PATCH to a bug fix or under-the-hood change (e.g. code clean-up, performance improvement, etc.)

Note on rebase: rebasing dev onto master avoids creating a merge commit that would require merging master back into dev.

Testing

Supported browsers:

  • last two versions of Chrome, Firefox and Edge
  • IE 11
  • Safari 8+
  • iOS 8.4+
  • Android 4.4+
  • Firefox ESR (v52.x)

Recommended mobile devices for testing:

  • iPhone 4S
  • iPhone 6
  • iPad 2
  • Galaxy s5

Developer documentation

  • Icons - how to add new icons, and how to use icons in CSS and Vue components