@triplelift/components v4.0.3

TripleLift React Component Library

Installation and Usage

Add this package as a dependency of your application as you normally would (npm works too):

yarn add @triplelift/components

In your application, import and use the components:

import { Card, Button, ThemeProvider } from "components";

const layout = () => (
  <ThemeProvider>
    <Card>
      A customized card component
      <Button variant="text" color="primary">
        and a button
      </Button>
    </Card>
  </ThemeProvider>
);

Summary

This is a collection of React components that are meant to be easily used by all TripleLift React applications. We want it to be clear to engineers what a component does, and we want components to be general for all foreseeable use cases.

We also want to have the correct mindset when customizing components, and be able to see at a glance how a component may be used (and potentially, should not be used!). See Docz below.

Implementation

This project is built on top of Material-UI. MUI components are imported from @material-ui/core and exported with custom styling layered on top. In the future, we will probably want to build our own custom components that share styling with other MUI components.

Docz

docz allows you to document component examples easily. If you're reading this documentation, it was likely generated with docz.

yarn docz dev

This will host the Docz application on http://localhost:3000 (or next available port) and watch for documentation and code changes.

yarn docz build

This will build static docz resources into the docs directory.

Example documentation:

---
name: Button
---

import { Playground, Props } from 'docz';
import { Button } from './';
import ThemeProvider from '../Theme/ThemeProvider';
import ButtonReadme './Button.md';

<ButtonReadme />

<Playground>
  <ThemeProvider>
    <Button color="primary">A Button</Button>
  </ThemeProvider>
</Playground>

<Props of={Button} />

Will:

1. Set the page name.
2. Render the Button's readme.
3. Present a "primary" example with our custom theme.
4. Generate a table detailing possible props.

todo: hosting

Development

You should use node >= 8 for all development in this repo:

nvm use 8 # You can use `n`, or another node version manager, as well.
yarn # this installs dependencies, npm works too.

To work on an application and these components concurrently:

1. Link your locally built components repository: yarn link inside components.
2. Create a symbolic link from your application to the components repo: yarn link components inside the application.
3. Run the application in watch mode as you normally would (e.g. yarn start).
4. In the components repo, run yarn build-lib-watch to re-build the distributed files on file changes.

Testing (todo)

yarn jest --watch

Publishing

To publish to NPM, you will need to create an account on npmjs.com, have it added to our npmjs organization, and run yarn login and npm adduser and follow instructions.

yarn build

This will run the full build: test, compile typescript, build index.d.ts files, and copy resources. The output of this will be found in build/lib.

yarn publish --access public