Skip to content

Commit 6c196a1

Browse files
authored
Update README docs and links
1 parent d3feda7 commit 6c196a1

File tree

1 file changed

+3
-127
lines changed

1 file changed

+3
-127
lines changed

README.md

+3-127
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,12 @@
1-
<a href="https://codeclimate.com/github/looker-open-source/components/test_coverage"><img src="https://api.codeclimate.com/v1/badges/0e8fc40b90a494f80cc1/test_coverage" /></a>
2-
![Test Suite](https://github.com/looker-open-source/components/workflows/Test/badge.svg?branch=main)
3-
4-
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.
1+
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](https://components.looker.com).
52

63
## Bugs & Feature Requests
74

85
Please file issues on [Github Issues](https://github.com/looker-open-source/components/issues)
96

10-
# Contents
11-
12-
1. [Setting up the Project](#setting-up)
13-
1. [Looker UI Components Development](#@looker/components-development)
14-
1. [Yarn Link](#yarn-link)
15-
16-
# Setting up
17-
18-
## Yarn
19-
20-
This is a monorepo utilizing [Lerna](https://lerna.js.org) and [Yarn Workspaces](https://yarnpkg.com/lang/en/docs/workspaces/). It is composed of a collection of packages.
21-
22-
If you don't have [`yarn`](https://yarnpkg.com/en/) installed, have a look at https://yarnpkg.com/en/docs/install and choose the appropriate installation for your environment.
23-
24-
We recommend using [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm#installation-and-update) 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`
25-
26-
## Clone Repository & Setup
27-
28-
1. `git clone [email protected]:looker-open-source/components.git`
29-
1. `yarn install`
30-
1.
31-
327
## Packages
338

349
- [@looker/components](./packages/components/README.md) — The shared component library which powers various Looker applications
35-
- [@looker/design-tokens](./packagen/design-tokens/README.md) — Default design values as well as our connection to styled-system
10+
- [@looker/design-tokens](./packages/design-tokens/README.md) — Default design values as well as our connection to styled-system
3611
- [@looker/icons](./packages/icons/README.md) — SVG icon library, normally consumed by the `<Icon />` component in our shared component library
37-
- [@looker/components-test-utils](./packages/test-utils/README.md) — Useful functions for mocking values and testing components.
38-
39-
## Applications
40-
41-
- [playground](./apps/playground/README.md) — A convenient React environment used for developing Looker UI Components
42-
- [storybook](./storybook/README.md) — Storybook is a tool for developing UI components in isolation
43-
- [www](./www/README.md) — The Gatsby site which powers our living style guide
44-
45-
### Common Project Commands
46-
47-
- **yarn playground** starts a bare-bones React app used for developing components
48-
- **yarn gatsby** starts the Gatsby server (powers our documentation site)
49-
- **yarn storybook** starts Storybook in "Docs" mode (includes stories from all packages)
50-
- **yarn build** runs build across all packages. This calls several subtasks
51-
- **yarn build** runs build:\* in parallel (see below)
52-
- **yarn build:es** use lerna to do babel build on all packages in proper order
53-
- **yarn build:ts** use lerna to typescript declarations in proper order
54-
- **yarn lint** runs all lint checks in parallel
55-
- **yarn lint:css** run stylelint
56-
- **yarn lint:es** run eslint
57-
- **yarn lint:ts** run tsc
58-
- **yarn fix** fix any ESLint errors and warnings than can be automatically fixed
59-
- **yarn clean** remove all build artifacts
60-
- **yarn test** runs Jest across all packages
61-
62-
### Workspace Commands
63-
64-
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:
65-
66-
`yarn workspace [workspace-package-name] [command]`
67-
68-
E.g.: `yarn workspace playground develop`
69-
70-
# Publishing Components
71-
72-
See [RELEASING](./RELEASING.md)
73-
74-
# Tooling
75-
76-
## Automate code formatting and correctness whenever possible
77-
78-
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.
79-
80-
## Use lint rules to eliminate dangerous anti-patterns
81-
82-
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](https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html#using-modules):
83-
84-
> 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.
85-
86-
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.
87-
88-
### Automated Tooling
89-
90-
The monorepo leverages with a few code tools baked into the component authoring workflow:
91-
92-
- [Prettier](https://prettier.io/) simply reformats code. It has few options, intentionally, to eliminate discussion about how to configure those options.
93-
- [ESLint](https://eslint.org/) is the standard Javascript & Typescript linting tool. It comes with a `--fix` flag which can fix many of the errors it finds.
94-
- [Stylelint](https://stylelint.io/) lints the CSS code in the app.
95-
96-
### Using the tooling
97-
98-
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.
99-
100-
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:
101-
102-
`yarn <command>`
103-
104-
- **lint** Runs all of the linters in order
105-
- **lint:es** Lint all of the ES6 & Typescript files, including tests
106-
- **lint:css** Lint all of the CSS, including inlined CSS
107-
- **lint:ts** Run Typescript compiler to verify type-safety
108-
109-
## IDE Support & Configuration
110-
111-
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.
112-
113-
### VS Code
114-
115-
A [settings.json](https://github.com/looker-open-source/components/blob/main/.vscode/settings.json) file is checked into the repository, which contains some required settings for VS Code.
116-
117-
Additionally a simplistic [launch.json](https://github.com/looker-open-source/components/blob/main/.vscode/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](https://github.com/Microsoft/vscode-recipes/tree/main/debugging-jest-tests).
118-
119-
#### Running Tests
120-
121-
1. Go to the "Debug" panel in VS Code
122-
2. In the top left choose either "Jest All" or "Jest Current File"
123-
3. Click the Play button
124-
125-
#### Recommended Plugins
126-
127-
- [Styled Components](https://github.com/styled-components/vscode-styled-components) enables sytax highlighting and intellisense for inline CSS.
128-
- [ESLint](https://github.com/Microsoft/vscode-eslint) enables inline linting and fixing of code on save. If you have the older vscode-tslint plugin installed, uninstall it first.
129-
130-
#### Useful Plugins
131-
132-
- [Spell Check](https://github.com/Jason-Rev/vscode-spell-checker) enables spell checking in code
133-
- [Colorize](https://github.com/kamikillerto/vscode-colorize) displays known colors (string values, hex, rgb, etc) as their actual color value
134-
- [Prettier](https://github.com/prettier/prettier-vscode) enables Prettier code formatting on save
135-
- [Rewrap](https://github.com/stkb/Rewrap) wraps comments at the 80 character column mark automatically
136-
- [Sort Lines](https://github.com/Tyriar/vscode-sort-lines) quickly resort lines of code
12+
- [@looker/components-test-utils](./packages/components-test-utils/README.md) — Useful functions for mocking values and testing components.

0 commit comments

Comments
 (0)