@idsync/ui

npm install

npm run build

Copy dist folder under project directory and paste it persona_ext project -> node_modules/idsync or persona/

Preview Components

npm install
npm run storybook

Then head to http://localhost:6006/.

Use Components

yarn add @idsync/ui
# or
npm install @idsync/ui --save

import { Button } from '@idsync/ui';

const MyComponent = () => (
  <Button danger>Delete</Button>
);

Available Components

Password generator

The password generator comes bundled in a popover, which can be used like so:

import { Generator } from "@idsync/ui";

const Comp = () => (
  <Generator
    onGenerate={handleGenerated}
    isOpen={isOpen}
  >
    <div>
      <Button onClick={toggleGenerator}>
        Generate Password
      </Button>
    </div>
  </Generator>
);

If you just require the body of the generator, you can import GeneratorUserInterface instead.

Password Strength Indicator

The indicator can be used like so:

import { Meter } from "@idsync/ui";

const Comp = () => (
  <Meter input={inputValue} />
);

Button

Available as Button.

TBA.

Input

Available as Input.

TBA.

Center

Available as Center.

TBA.

SmallType

Available as SmallType.

TBA.

Testing

Run npm t to execute the tests.

To update component snapshots run npm run test:updateSnapshots.