@elevate_security/component-library

Elevate Component Library V2

Looking for V1 Go here

A UI library backed by TailwindCss and AmCharts

Explanation

The package is a wrapper for TailwindCss and Amcharts, with an Elevate Security theme

Setup - This repo uses yarn.

this project uses yarn for development and the circle-ci build To install node_modules run:

yarn

Build

This command will build all the files, create a lib folder and add the output from the build. You can check to see what's been built and the file structure run:

yarn build

Circle-CI

If you look at the config.yml, when yourun the commands below in versioning, circle-ci will know to do a deployment to npmjs

Versioning

In a release branch, use npm version to bump the version in package.json, commit and tag altogether. If you manually bump the version, circle-ci will not build your changes reflected in config.yml

VERSION=X.X.X npm version $VERSION git push origin : "v${VERSION}"

Storybook

Storybook only works locally at this point. Storybook requires postcss 7.x. Tailwind requires postcss 8.x.

select example

export default {
/\* 👇 The title prop is optional.

- See https:storybook.js.org/docs/react/configure/overview#configure-story-loading
- to learn how to generate automatic titles
  \*/
  title: "Dropdown Menu select Icon",
  component: Ddm,
  argTypes: {
  className: { value: "", control: "text" },
  id: { value: "", control: "text" },
  onClick: { action: "clicked" },
  icon: {
  options: Object.keys(icons), An array of serializable values
  mapping: icons, Maps serializable option values to complex arg values
  control: {
  type: "select", Type 'select' is automatically inferred when 'options' is defined
  labels: {
  'labels' maps option values to string labels
  ArchiveBoxIcon: "ArchiveBox",
  ArrowRightCircleIcon: "ArrowRightCircle",
  ChevronDownIcon: "ChevronDown",
  DocumentDuplicate: "DocumentDuplicate",
  HeartIcon: "Heart",
  PencilSquareIcon: "PencilSquare",
  TrashIcon: "Trash",
  UserPlusIcon: "UserPlus",
  },
  },
  table: {
  type: { summary: "select" },
  defaultValue: { summary: PencilSquareIcon },
  },
  },
  },
  } as ComponentMeta<typeof Ddm>;