@tandem-language-exchange//web-ui

A React (with TypeScript) Component Library used for all Tandem Web Projects. This library is react meta-framework agnostic.

Storybook

The Private storybook can be viewed here: https://storybook.devtandem.net/

Installation

Install the private package from NPM by running the following command:

npm install @tandem-web/web-ui

You will need to have a .npmrc file with the npm token added to instal this package

Usage

Add SCSS files

Add the following to your global app tsx file (_app or root layout). It contains all the CSS token variables

@import '@tandem-web/web-ui/dist/styles/_tokens.scss';

In the _variables.scss, or any other scss file that you import into all other scss files, import the global partials file, containing all the necessary scss variables & mixins

@import '@tandem-web/web-ui/dist/styles/_config.scss';

Add the following to your global scss file. It contains all the base & reset styles. These are all non-pure selectors so it cannot be imported in a scss module.

@import '@tandem-web/web-ui/dist/styles/_base.scss';

Add Global Types

The UI Library relies on global types that need to be included. In the global.d.ts file of the consuming project, add the follwoing at the top:

/// <reference types="@tandem-web/web-ui/dist/global.d.ts" />

Update Synced Assets

This package also has certain static assets that need to be synced to the static directory if the consuming project.

This can be done by adding the following command to your package.json scripts:

"sync-assets": "sync-assets path=public/static"

The files will be saved inside a shared directory inside the path you provided

It is best practice to include this in your dev and prebuild scripts

Add Theme Provider

In your _app or root layout, wrap all the consuming components inside the ThemeProvider component

import { ThemeProvider } from '@tandem-web/web-ui';

<ThemeProvider
    defaultTheme="dark"
    localStorageKey="your_localStorage_key"
  >
    {children}
  </ThemeProvider>

Publishing Changes

This package requires an .npmrc file in the root of the project to authorize publishing changes to NPM. See docs.

To publish changes to this package:

1. Make the relevant changes
2. Increment the version number in the package.json
3. Commit the changes & push to the remote origin
4. Run npm publish

Should you get a 403 or 404, it can be that the token you specified in the .npmrc file is not valid or does not have write permissions. Sometimes the npm cli throws an error even if the changes are published. Juts wait a few seconds and refresh the for this package on NPM to see if the version umber incremented