@detroit-labs/klondike

Klondike

Table of Contents generated with DocToc

• Setup
• Development
  • Commands
    • yarn install
    • yarn start
    • yarn commit
    • yarn build
  • File Structure
    • src/index.js
    • src/index.d.ts
    • src/theme.js
    • Component directory structure
      • Button.js
      • Button.md
      • index.js
      • index.d.ts

Setup

Install Klondike and its required peer dependencies.

yarn add @detroit-labs/klondike glamor glamorous

Wrap your <App> component in the <Provider>, so that Klondike's component styles are applied in your application.

import { Provider } from '@detroit-labs/klondike'

<Provider>
  <App />
</Provider>

Development

Commands

yarn install

This installs dependencies from NPM and should be run regularly when pulling down code from master or another branch.

yarn start

This starts the React Styleguidist server. Visit http://localhost:6060 to view the styleguide locally.

yarn commit

This commits code using the Commitizen command line tool. This is required for committing code, since the commit message format is specifically used for generating release notes and determining the next version to publish (thanks to semantic-release).

yarn build

This compiles the source code using Babel. The output directory is located at dist/ and contains the compiled JavaScript ready for consumption. The TypeScript definitions files (.d.ts) are also copied over during this process.

The .babelrc file defines a few presets and plugins that this codebase uses:

• stage-2 - for things like class properties and object rest spread.
• export-extensions - used for reexporting the default export in src/Component/index.js.

File Structure

All source code is located in the src/ directory. The file structure looks like:

src
├── Button
│   ├── Button.js
│   ├── Button.md
│   ├── index.d.ts
│   └── index.js
├── index.d.ts
├── index.js
├── theme.js
└── util.js

src/index.js

This is the entry point into Klondike, which exports the public API available to consumers.

src/index.d.ts

This is the entry point into Klondike's TypeScript definitions.

src/theme.js

This file defines the Glamorous theme used throughout the Klondike codebase. This allows components to use consistent colors, fonts, spacing, etc.

Component directory structure

Using Button as an example:

Button
├── Button.js
├── Button.md
├── index.d.ts
└── index.js

Button.js

The component file, which contains component styles, prop type documentation

Button.md

The component documentation used by React Styleguidist to create styleguide documentation.

index.js

The entry point into the component module. This file defines the public API and which modules should be exported for use by the src/index.js main module. This will usually just reexport the component from Button.js.

index.d.ts

The TypeScript definition for the component. This will be referenced by src/index.d.ts and exported for use by consumers.