@charlietango/ui

Charlie Tango UI

A set of UI components built with Emotion and styled-system, to be used between Charlie Tango projects.

It's built for Emotion 11 (still in beta, but should be finalized soon), so it can be used with the @emotion/react package.

Installation

yarn add @charlietango/ui @emotion/react

@charlietango/babel-preset-sx-prop

You should add @charlietango/babel-preset-sx-prop to enable full support for the sx prop. This is a custom version of @emotion/babel-preset-css-prop, and replaces it (still includes support for the css prop).

yarn add @charletango/babel-preset-sx-prop --dev

Add the preset to the project .babelrc

{
  "presets": ["@charlietango/babel-preset-sx-prop"]
}

Custom JSX pragma

If you can't add @charlie-tango/babel-preset-sx-prop to the project, you can still use the sx prop by defining a custom JSX Pragma in the React file.

Include this at the top of the file:

/** @jsx jsx */
import { jsx } from '@charlietango/ui';

This replaces the normal import * as React from 'react' (which imports the default JSX from React).

Planned components

Component	Status
Accordion	Todo
Tabs	Todo
Modal	✅
VisuallyHidden	✅

Bundling

The library is built for ESNext, and does not contain a CommonJS build. This means you will need to compile the library with the consuming applications bundler. Usually tools skip processing node_modules to speed up the build process, so you will need to configure this.

Webpack

Include the @charlietango namespace in the babel-loader rule:

const config = {
  modules: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        include: [path.resolve('src'), path.resolve('node_modules/@charlietango')],
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: DEBUG,
            },
          },
        ],
      },
    ],
  },
};

Jest

Jest will also need to include the library when transforming files:

const config = { transformIgnorePatterns: ['/node_modules/(?!@charlietango).+\\.js$'] };

Related libraries

• emotion
• styled-system

Contributing

Storybook development

All the components should be documented using Storybook. We are using the Storybook MDX format to ensure we have examples alongside the documentation.

Testing in another project

You can use yarn link to test changes to the library in another one of your projects.

In the charlie-tango/ui project run:

yarn link
yarn dev:watch

In the consuming test project, link the project:

yarn link "@charlietango/ui"

You will now be able to see changes immediately.

Publish

We are using semantic-release to automatically publish a new package, whenever we merge to master. It's important to use the Angular Commit Message Conventions so the version can be correctly bumped.