TykTechnologies / tyk-ui

Collection of re-usable UI components used to build Tyk products

Tyk-ui is our library of reusable presentational UI components. The full list of components and their documentation can be checked here: https://nifty-johnson-6002dd.netlify.app/

Installation

npm install --save @tyk-technologies/tyk-ui

Note that this is a private package so you'll need to be added as a member to the tyk-technologies org and then run npm adduser which will ask you for your npm credentials

Loading tyk-ui into the project

Loading SASS files

$font-path: "~@tyk-technologies/tyk-ui/lib/fonts/";
$component-images-path: "~@tyk-technologies/tyk-ui/lib/images/";
@import '~@tyk-technologies/tyk-ui/lib/sass/index';

NOTE: For projects that don't use SASS but just pure css we are also exposing the compiled styles.

<link rel="stylesheet" type="text/css" href="node_modules/@tyk-technologies/tyk-ui/tyk-ui.css">

Loading React components

import {
  Button,
  Column,
  Dropdown,
  Icon,
  InfoNote,
  Message,
  Modal,
  Panel,
  Row
} from '@tyk-technologies/tyk-ui';

Note: for the projects that don't have React this is not usable, and we can use just the styling.

Build tyk-ui project

Contributions to the current library are welcome, so please follow these steps each time you want to make a change:

• Create a GH issue, describing the necessary change
• Raise a PR with the change

In order to publish the changes, please do the following

• After PR merge, run npm run build-prod which generates prod code of the library
• Increase the library version in package.json
• Run npm i to regenerate the package-lock.json file
• Commit and Push changes
• Run npm publish