mlibrary / umich-lib-ui Goto Github PK

A React component library.

JavaScript 100.00%

umich-lib-ui's Introduction

[deprecated] University of Michigan Library (React) Design System

Note about depreciation: We've moved our focus to web standards (Web Components, CSS Custom Variables). Learn more in our design system updates.

A collection of shared design styles, components, and patterns for teams to build quality consistent interfaces. A bit like a LEGO kit.

npm install @umich-lib/core

View the documentation site

Contributing

Getting started

This project uses:

Lerna to manage multiple packages/libraries.
Storybook for a development environment.
Gatsby v2 for a fast website.

Run these commands before doing anything else.

git clone https://github.com/mlibrary/umich-lib-ui.git
cd umich-lib-ui
npm install

⌨️ Development

Starts the Storybook development environment at http://localhost:9001 and opens the documentation site at http://localhost:8000.

npm run bootstrap
npm run build:watch
npm run storybook

What's going on with these commands?

npm run bootstrap tells Lerna to optimize package dependencies and hoists common packages to the root. It will also symlink local packages that depend on each other.
npm run build:watch builds the packages with babel so that they can be consumed by the documentation website and published to NPM.
npm run storybook Starts the Storybook development environment.

Documentation site

Start the doc site locally. Built with Gatsby v2 for a fast website.

cd packages/docs
npm run develop

Be sure to run commands from the docs package directory.

📦 Publishing

❗ An NPM account with the umich-lib-ui organization is required to publish. Only core-contributors are able to publish versions. Contact the core team to get help setting this up.

Before anything else

Create a build to be published

npm run build

Make sure you're logged into the NPM registry.

npm login

Publish options

1. Canary

To publish a quick canary version

npm run publish:canary

2. Next

To publish a next version.

npm run publish:next

3. Publish

To publish an official version and follow Lerna publish prompts.

npm run publish

Export Components to Sketch

We use story2sketch library to handle turning our Storybook stories into almost Sketch. See the story2sketch repo for more info.

Make sure Storybook is active before running this command.

npm run sketch

This enables designers to use Design System components in Sketch.

🆘 Help / Questions

Open a GitHub issue.

PRs and contribution guidelines

See guidelines for contributing

umich-lib-ui's People

Contributors

Stargazers

Watchers

Forkers

bridgetburke heidisb elleande rlness thedemodev jonearley

umich-lib-ui's Issues

Investigate CSS solutions

Redundant CSS is being imported with each component. Is it possible to tree shake importing css with the current approach?
What about this CSS-in-JS buzz?

Create build process for ES Modules

I want everything to sparkle

What

I want everything to sparkle. It should be so shiny.

Really I just don't want the community backlog to be empty and am testing things.

Why

BECAUSE REASONS

Anything else

Nope.

https://design-system.lib.umich.edu is blank (subpages load normally)

https://design-system.lib.umich.edu/ is blank on Firefox 67.0.2 on Ubuntu 18.04. Disabling my ad-blocker has no affect. https://design-system.lib.umich.edu/getting-started/introduction/ seems to load just fine, and I'm able to navigate to most of the links on the sidebar.

This was the first time I had visited the page, so my cache was fresh. However, the page loads just fine if I start it with a private session.

My browser loads the following source for that page:

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 2.3.3"/><title data-react-helmet="true"></title><style type="text/css">
    .anchor {
      float: left;
      padding-right: 4px;
      margin-left: -20px;
    }
    h1 .anchor svg,
    h2 .anchor svg,
    h3 .anchor svg,
    h4 .anchor svg,
    h5 .anchor svg,
    h6 .anchor svg {
      visibility: hidden;
    }
    h1:hover .anchor svg,
    h2:hover .anchor svg,
    h3:hover .anchor svg,
    h4:hover .anchor svg,
    h5:hover .anchor svg,
    h6:hover .anchor svg,
    h1 .anchor:focus svg,
    h2 .anchor:focus svg,
    h3 .anchor:focus svg,
    h4 .anchor:focus svg,
    h5 .anchor:focus svg,
    h6 .anchor:focus svg {
      visibility: visible;
    }
  </style><script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var hash = window.decodeURI(location.hash.replace('#', ''))
      if (hash !== '') {
        var element = document.getElementById(hash)
        if (element) {
          var offset = element.offsetTop
          // Wait for the browser to finish rendering before scrolling.
          setTimeout((function() {
            window.scrollTo(0, offset - 0)
          }), 0)
        }
      }
    })
  </script><link as="script" rel="preload" href="/component---node-modules-gatsby-plugin-offline-app-shell-js-b2acb4db879a2ec7e5d4.js"/><link as="script" rel="preload" href="/app-8eb7a5ea54d435cc8816.js"/><link as="script" rel="preload" href="/webpack-runtime-f4e3074304bdc99ed7ae.js"/><link as="fetch" rel="preload" href="/static/d/604/path---offline-plugin-app-shell-fallback-a-30-c5a-BawJvyh36KKFwbrWPg4a4aYuc8.json" crossorigin="use-credentials"/></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.page={"componentChunkName":"component---node-modules-gatsby-plugin-offline-app-shell-js","jsonName":"offline-plugin-app-shell-fallback-a30","path":"/offline-plugin-app-shell-fallback/"};window.dataPath="604/path---offline-plugin-app-shell-fallback-a-30-c5a-BawJvyh36KKFwbrWPg4a4aYuc8";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-8eb7a5ea54d435cc8816.js"],"component---node-modules-gatsby-plugin-offline-app-shell-js":["/component---node-modules-gatsby-plugin-offline-app-shell-js-b2acb4db879a2ec7e5d4.js"],"component---src-templates-doc-js":["/component---src-templates-doc-js-468eb58467ec5a22b4c7.js"],"component---src-pages-404-js":["/component---src-pages-404-js-7492dd92ab97e115e429.js"],"component---src-pages-index-js":["/component---src-pages-index-js-6b8edff3682441ab0610.js"],"pages-manifest":["/pages-manifest-e58ce025228ca80dd43d.js"]};/*]]>*/</script><script src="/webpack-runtime-f4e3074304bdc99ed7ae.js" async=""></script><script src="/app-8eb7a5ea54d435cc8816.js" async=""></script><script src="/component---node-modules-gatsby-plugin-offline-app-shell-js-b2acb4db879a2ec7e5d4.js" async=""></script></body></html>

Add responsive resizing (narrowing, full screen, etc) to live code examples

Investigate ways to allow developers to set global site content width

Ideas

Use a data attribute

Add a data attribute such as data-content-container for every wrapper/container around content and document how to styled this with CSS.

[data-content-container] {
  max-width: 52rem;
}

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Config with Emotion

Maybe it's possible to expose some general configuration. Such as default font size or inherit. Or max content width.

Look into Lerna

https://github.com/lerna/lerna

Investigate `react-docgen` and custom doc site

Resources

https://github.com/reactjs/react-docgen
Pattern library, user driven, inline code editor, UX research insights, docs for any audience: https://bulb.co.uk/blog/introducing-bulbs-design-system, https://design-system.futurelearn.com/
Getting started, code and usage docs, accessibility, Storybook link: http://www.carbondesignsystem.com/
Generate components to Sketch: https://github.com/airbnb/react-sketchapp
Edit page on Github, http://blueprintjs.com/docs/#core/components/button
Write component docs in MD https://github.com/probablyup/markdown-to-jsx
https://bradfrost.github.io/gatsby-style-guide-guide/
To live edit examples: https://github.com/FormidableLabs/react-live
Doc style guide and principles*: https://docs.djangoproject.com/en/2.1/misc/design-philosophies/.

*important

Doc components

Create a list of public components for navigation
Create a component detail view

Component detail view

Add code preview and editor in component detail view
Docs are written in MD.
Docs can embed react-live type components. (Children as render prop? with md-to-jsx)
Full screen editor toggle?
Prop types
Usage docs (could these be a tab?)

Other

Be able to view changelog of each component?

Move to a basic build build:lib, might just be with babel?
Consider keeping storybook for development
Manage the doc site with Gatsby.
Consider Lerna for multiple packages

Rely on composition rather than high configuration.