This repository hosts the Looker UI Components library and the platform needed to generate our style guide. If you're looking for documentation for using Looker UI Components within your own application, you can view the documentation online on our web site.

Bugs & Feature Requests

Please file issues on Github Issues

Contents

1. Setting up the Project
2. Looker UI Components Development
3. Yarn Link

Setting up

Install Yarn

This is a monorepo utilizing Lerna and Yarn Workspaces. It is composed of a collection of packages.

If you don't have yarn installed, have a look at https://yarnpkg.com/en/docs/install and choose the appropriate installation for your environment.

We recommend using Node Version Manager (NVM) to manage multiple versions of Node. Once installed you can simply type nvm use in side the repository to get the appropriate version of Node installed. Then you'll need to install Yarn globally via NPM - npm install --global yarn

Clone this Repository & Setup

1. git clone git@github.com:looker-open-source/components.git
2. yarn

Packages

• @looker/components — The shared component library which powers various Looker applications
• @looker/design-tokens — Default design values as well as our connection to styled-system
• @looker/icons — SVG icon library, normally consumed by the <Icon /> component in our shared component library
• @looker/components-test-utils — Useful functions for mocking values and testing components.

Applications

• playground — A convenient React environment used for developing Looker UI Components
• storybook — Storybook is a tool for developing UI components in isolation
• www — The Gatsby site which powers our living style guide

Common Project Commands

• yarn develop shortcut for booting up www, playground, and server packages for local development
• yarn playground starts a bare-bones React app used for developing components
• yarn gatsby starts the Gatsby server (powers our documentation site)
• yarn build runs build across all packages. This calls several subtasks
  • yarn prebuild run clean, then use lerna to do any pre-build tasks needed for packages
  • yarn build runs build:* in parallel (see below)
  • yarn build:es use lerna to do babel build on all packages in proper order
  • yarn build:ts use lerna to typescript declarations in proper order
• yarn lint runs all lint checks in parallel
  • yarn lint:css run stylelint
  • yarn lint:es run eslint
  • yarn lint:ts run tsc
• yarn fix fix any ESLint errors and warnings than can be automatically fixed
• yarn clean remove all build artifacts
• yarn test runs Jest across all packages

Storybook

Storybook is a tool used to develop, demonstrate and document components in isolation.

• yarn storybook starts master Storybook (includes all stories)
• yarn workspace [workspace-package-name] storybook starts a storybook with just stories within the specified package.
• yarn image-snapshots takes image-snapshots of all stories within packages/**
  • preimage-snapshots is a yarn task that runs storybooks-build task before capturing image snapshots.
• yarn storybooks-build builds all packages/* storybooks for publishing and/or image-snapshot testing.

Workspace Commands

If you're working with a specific workspace you can run commands within that specific workspace (package) by pre-pending the yarn command like so:

yarn workspace [workspace-package-name] [command]

E.g.: yarn workspace @looker/components build:es

Publishing Components

We follow a semantic versioning scheme. That means:

1. API changes are only allowed in major version changes.
2. Backwards compatible API changes can occur in minor version changes.
3. Bug fixes occur in patch version changes.

Update Changelog & Version

1. Update CHANGELOG
2. Open PR for change review
3. Merge PR
4. Pull latest master
5. yarn release

Undoing a failed release

Sometimes the release process will fail mid-way (generally due to NPM authentication issues).

Follow these instructions if you run into a case where you have a "failed" release and need to unwind it to try again. Usually the complexity lies in the case where Lerna has updated package hashes and pushed tags but authentication to NPM failed.

1. Get the release commit hash git log to see if there's a commit and if so get the commit hash
2. Revert the release commit git revert YOURHASHHERE
3. Delete the local tag git tag -d v0.0.0 (insert appropriate version number)
4. Delete the remote tag git push --delete origin v0.0.0

4. Tooling

Automate code formatting and correctness whenever possible

This project takes the perspective that, as much as possible, code style (code formatting, alignment, interchangeable idioms, etc) should be dictated by automated tooling. This means tooling that can statically analyze code and actually rewrite it, either for the purpose of consistent formatting or correctness. This approach not only saves time by eliminating arguments about preferred code styles, it also reduces arbitrary diff noise for code reviewers, and decreases an engineer's overhead needed to keep code consistent with a code style or linter.

Use lint rules to eliminate dangerous anti-patterns

When automated tooling cannot reformat code without causing logical errors, this project employs linter rules to ensure it produces consistent, correct code. An example of one of these rules is the TSLint no-namespace rule. Namespacing, while a valid feature in Typescript, is the byproduct of Typescript evolving during a time when ES6 style modules did not exist (nor did the tooling around them). Typescript itself calls out ES6 modules as the best approach to code organization moving forward:

Starting with ECMAScript 2015, modules are native part of the language, and should be supported by all compliant engine implementations. Thus, for new projects modules would be the recommended code organization mechanism.

To ensure Typescript namespaces are never introduced into this project (because we use ES6 modules), our linter configuration disallows any use of them in code.

Automated Tooling

The monorepo leverages with a few code tools baked into the component authoring workflow:

• Prettier simply reformats code. It has few options, intentionally, to eliminate discussion about how to configure those options.
• ESLint is the standard Javascript & Typescript linting tool. It comes with a --fix flag which can fix many of the errors it finds.
• Stylelint lints the CSS code in the app.

Using the tooling

The majority of the time, using these tools should be transparent as they are hooked into a fast pre-commit hook that is enabled for all developers. If one of the lint or prettier steps fail during the pre-commit hook you'll have to fix the error before committing.

You can also configure some editors to apply their formatting on save, this is discussed in a different section below. Sometimes, however you might want to run each command manually. Below is a list of the available commands:

yarn <command>

• lint Runs all of the linters in order
• lint:es Lint all of the ES6 & Typescript files, including tests
• lint:css Lint all of the CSS, including inlined CSS
• lint:ts Run Typescript compiler to verify type-safety

5. IDE Support & Configuration

Code in this project is written in Typescript and the core team uses VSCode as our IDE of choice. Please feel free to add your favorite editor's mechanism of support if you wish.

VS Code

A settings.json file is checked into the repository, which contains some required settings for VS Code.

Additionally a simplistic launch.json file is also included which should allow developers to quickly run and debug tests locally, through the Jest test runner. This file is based off of the recommendations here.

Running Tests

1. Go to the "Debug" panel in VS Code
2. In the top left choose either "Jest All" or "Jest Current File"
3. Click the Play button

Strongly Recommended Plugins

• Styled Components enables sytax highlighting and intellisense for inline CSS.
• ESLint enables inline linting and fixing of code on save. If you have the older vscode-tslint plugin installed, uninstall it first.

Very Helpful Plugins

• Spell Check enables spell checking in code
• Colorize displays known colors (string values, hex, rgb, etc) as their actual color value
• Prettier enables Prettier code formatting on save
• Rewrap wraps comments at the 80 character column mark automatically
• Sort Lines quickly resort lines of code

Yarn Link

Since Looker UI Components are often developed in tandem with another repo it can be useful to use Yarn's link functionality to develop new components and test the built output without having to commit and publish the changes.

See Yarn's Link documentation (https://yarnpkg.com/lang/en/docs/cli/link/) for setting up the link between the @looker/components package and your project.

To work properly you'll need to make this addition to your webpack.config.js file:

  resolve: {
    alias: {
      'styled-components': path.resolve(
        __dirname,
        'node_modules',
        'styled-components',
      ),
    }
  }

Finally, only changes that have been built will be reflected in the linked package so run yarn build when you want to refresh the locally-built version.