@mcf/lib-ui 0.0.1

package/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+Firefox ESR

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "scripts/versioning"]
+	path = scripts/versioning
+	url = https://github.com/zephinzer/version-tagging-scripts.git

package/.prettierrc.yaml

@@ -0,0 +1,10 @@
+printWidth: 120
+tabWidth: 2
+useTabs: false
+semi: true
+singleQuote: true
+trailingComma: all
+bracketSpacing: false
+arrowParens: always
+parser: typescript
+requirePragma: false

package/README.md

@@ -0,0 +1,143 @@
+# MCF UI Components
+User Interface (UI) components for use in the MCF project.
+
+> **WIP**: we're working on open-sourcing this!
+
+## Usage
+Install this package through NPM:
+
+```bash
+# for NPM
+npm i https://gitlab.com/mycf.sg/lib-ui.git#2.0.114 tachyons
+```
+
+Call it from your code with:
+
+```javascript
+import {...} from '@govtech/mcf-mcfui';
+```
+
+Where `...` is the component name.
+
+You also need to load or import tachyons *once* somewhere in your project.
+
+```javascript
+import 'tachyons/src/tachyons.css';
+```
+
+You eventually need to import the default style provided *once* somewhere in your project
+
+```javascript
+import '@govtechsg/mcf-mcfui/dist/main.css';
+```
+This step is optional. You can provide your own style using CSS variables. Using CSS variables make it easy to configure yourself the style of your components at the application level or at a component level.
+
+List of CSS variables overridable (default only if you use the provided style):
+- colors:
+  - `--primary`: default to `var(--purple)`
+  - `--light-primary`: default to `#e3d7f4`
+  - `--gray`: default to `gray`
+  - `--white`: default to `white`
+  - `--dark-primary`: default to `#552895`
+  - `--secondary`: default to `#D6008F`
+  - `--dark-secondary`: default to `#c10081`
+  - `--danger`: default to `#EF4456`
+  - `--dark-danger`: default to `#eb142a`;
+- borders:
+  - `--borderstyle`: default to `1px solid var(--black-20)`
+- sizes:
+  - `--font-size-1`: default to `3rem`
+  - `--font-size-2`: default to `2.25rem`
+  - `--font-size-3`: default to `1.5rem`
+  - `--font-size-4`: default to `1.25rem`
+  - `--font-size-5`: default to `1rem`
+  - `--font-size-6`: default to `.875rem`
+  - `--font-size-2-5`: default to `calc(((var(--font-size-2) + var(--font-size-3)) / 2))`
+  - `--font-size-3-5`: default to `calc(((var(--font-size-4) + var(--font-size-4)) / 2))`
+  - `--font-size-4-5`: default to `calc(((var(--font-size-4) + var(--font-size-5)) / 2))`
+  - `--font-size-5-5`: default to `calc(((var(--font-size-5) + var(--font-size-6)) / 2))`
+  - `--iconsize`: default to `40px`
+  - `--icongap`: default to `0px`
+  - `--radio-button-outer-circle`: default to `16px`
+  - `--radio-button-inner-circle`: default to `8px`
+
+
+## Components
+
+- [Dropdown](./src/Component/Dropdown/README.md)
+- [Toggle](./src/Component/Toggle/README.md)
+- [RadioButtonGroup](./src/Component/RadioButtonGroup/README.md)
+
+## Quick Links
+NPM: https://www.npmjs.com/package/@govtechsg/mcf-mcfui
+Base Images: https://hub.docker.com/r/govtechsg/mcf-mcfui-base/
+Dependency Images: https://hub.docker.com/r/govtechsg/mcf-mcfui-dependencies/
+Application Images: https://hub.docker.com/r/govtechsg/mcf-mcfui/
+Demo: https://mcfui.gds-gov.tech
+
+## Contributing
+
+### Get Started
+Clone this repository and run the following to get started:
+
+```bash
+yarn install
+yarn start # runs a storybook server at http://localhost:9001
+```
+
+### Development
+Component code is stored in `./src`. See the `./src/Example/Text` for an example.
+
+Make sure to build before submitting a merge request:
+
+```bash
+yarn build
+
+# or
+yarn build-watch
+```
+
+Use `yarn link` to test drive your changes in lib-ui with another project. Run `yarn link` in this repo and follow the instructions. Likewise, run `yarn unlink` in this repo and follow the instructions to unlink.
+
+### Testing
+To run tests:
+
+```bash
+yarn test
+```
+
+To run tests in development with file watching:
+
+```bash
+yarn test-watch
+```
+
+To run lints:
+
+```bash
+yarn lint
+yarn lint-fix
+```
+
+### Documentation
+1. Add the component to the [Catalog](#catalog) section above linking to `[2]`.
+2. Add a `README.md` in the component directory which describes the component behaviour and it's available props.
+
+### Pipeline
+The Pipeline runs only in the `master` branch.
+
+The following release tags are available for use in your commit message to denote a type of release:
+
+- `[rebuild]`: rebuilds all containers regardless of whether we already have them
+- `[release]`: performs a release by bumping the version in `./package.json` to the same as that of the latest Git tag
+- `[major]`: performs a major version bump (X.y.z -> Y.0.0, Y = X + 1)
+- `[minor]`: performs a major version bump (x.Y.z -> x.Z.0, Z = Y + 1)
+
+By default, every push to `master` will result in a patch version bump.
+
+When both a `"[release]"` and a `"[major]"` or `"[minor]"` is present in the commit message, the version is bumped first before the release happens, so the `package.json` will contain the version **AFTER** the
+
+### Merge Request
+On passing of the pipeline, submit a Merge/Pull Request to the `master` branch and wait for the code to be reviewed and merged in.
+
+# 🍻

package/dist/@types/Component/BaseButton/BaseButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare enum TYPE {
+    ACTION = "action",
+    DANGER = "danger",
+    DEFAULT = "default",
+    SUCCESS = "success"
+}
+export interface IBaseButtonProps {
+    children: any;
+    disabled?: boolean;
+    isFullWidth?: boolean;
+    onClick?: () => void;
+    type?: TYPE;
+    id?: string;
+}
+export declare const BaseButton: React.SFC<IBaseButtonProps>;

package/dist/@types/Component/BaseButton/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseButton';

package/dist/@types/Component/CheckBox/CheckBox.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ICheckBoxProps {
+    id: string;
+    input: {
+        value?: boolean;
+        onChange: (isChecked: boolean) => void;
+    };
+    label: React.ReactElement<{}> | string;
+    disabled?: boolean;
+}
+export declare const CheckBox: React.SFC<ICheckBoxProps>;

package/dist/@types/Component/CheckBox/index.d.ts

@@ -0,0 +1 @@
+export * from './CheckBox';

package/dist/@types/Component/ConfirmationBox/ConfirmationBox.d.ts

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { TYPE } from '~/Component/BaseButton/BaseButton';
+export interface IConfirmationBoxProps {
+    text: string;
+    buttonType?: TYPE;
+    buttonText: string;
+    cancelText: string;
+    handleSubmit: () => void;
+    handleReset: () => void;
+    container?: HTMLElement;
+}
+export declare class ConfirmationBox extends Component<IConfirmationBoxProps, {}> {
+    private el;
+    constructor(props: IConfirmationBoxProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactPortal;
+}

package/dist/@types/Component/ConfirmationBox/index.d.ts

@@ -0,0 +1 @@
+export * from './ConfirmationBox';

package/dist/@types/Component/Dropdown/Dropdown.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import 'react-select-plus/dist/react-select-plus.css';
+export interface IDropdownProps {
+    id?: string;
+    data: any[];
+    label?: string;
+    subtitle?: string;
+    className?: string;
+    labelKey?: string;
+    loadData?: () => void;
+    name?: string;
+    onChange?: (values: any) => void;
+    onInputChange?: (value: string) => void;
+    onEnterKeyDown?: () => void;
+    options?: {
+        async?: boolean;
+        maxLength?: number;
+        multi?: boolean;
+    };
+    input?: {
+        value?: string;
+        onChange?: (value: any) => void;
+        onBlur?: () => void;
+    };
+    meta?: {
+        error?: string;
+        touched?: boolean;
+    };
+    searchable?: boolean;
+    noResultsText?: string;
+    value?: any;
+    valueKey?: string;
+    placeholder?: string;
+    clearable?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export interface IDropdownState {
+    value: string | string[] | null;
+}
+export declare class Dropdown extends React.Component<IDropdownProps, IDropdownState> {
+    static defaultProps: {
+        labelKey: string;
+        meta: {};
+        options: {
+            async: boolean;
+            maxLength: number;
+            multi: boolean;
+        };
+        valueKey: string;
+    };
+    static getDerivedStateFromProps(nextProps: IDropdownProps): {
+        value: string | null;
+    };
+    private static computeValue;
+    selectRef: any;
+    constructor(props: IDropdownProps);
+    render(): JSX.Element | null;
+    onInputChange(inputValue: string): void;
+    onInputKeyDown(e: {
+        keyCode: number;
+        preventDefault: () => void;
+    }): void;
+    onChange(selectedItem: {
+        [s: string]: string;
+    }): void;
+    onChangeMulti(selectedItems: string[]): void;
+    loadOptions(input: string, callback: (a: any, b: any) => void): void;
+}

package/dist/@types/Component/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './Dropdown';

package/dist/@types/Component/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,29 @@
+import React, { ChangeEvent } from 'react';
+export interface IRadioButtonGroupProps {
+    children: (a: any, inputProps: IInput, c?: any, d?: any) => JSX.Element;
+    data: Array<{
+        item: any;
+        value: string | number;
+        label: string;
+    }>;
+    initialValue?: string;
+    name: string;
+    onValueSelected?: (value: string | number) => void;
+}
+export interface IRadioButtonGroupState {
+    selectedValue: string | number;
+}
+export interface IInput {
+    id?: string;
+    isChecked: boolean;
+    label: any;
+    name?: string;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    value: string | number;
+}
+export declare class RadioButtonGroup extends React.Component<IRadioButtonGroupProps, IRadioButtonGroupState> {
+    static defaultProps: Partial<IRadioButtonGroupProps>;
+    constructor(props: IRadioButtonGroupProps);
+    render(): JSX.Element[];
+    private handleOnValueSelected;
+}

package/dist/@types/Component/RadioButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './RadioButtonGroup';

package/dist/@types/Component/ReactFileReader/ReactFileReader.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface IReactFileReaderProps {
+    children?: React.ReactNode;
+    elementId?: string;
+    fileTypes?: string | string[];
+    handleFiles: (result: IReactFileReaderResult) => void;
+    hasMultipleFiles?: boolean;
+    isBase64?: boolean;
+    isDisabled?: boolean;
+}
+export interface IReactFileReaderDefaultProps {
+    fileTypes: string | string[];
+    hasMultipleFiles: boolean;
+    isBase64: boolean;
+    isDisabled: boolean;
+}
+export declare type FileReaderResult = string | ArrayBuffer | null;
+export interface IReactFileReaderResult {
+    base64: FileReaderResult[] | null;
+    fileList: FileList | null;
+}
+export declare class ReactFileReader extends React.Component<IReactFileReaderProps> {
+    static defaultProps: IReactFileReaderDefaultProps;
+    private fileInput;
+    render(): JSX.Element;
+    private setFileInput;
+    private clickInput;
+    private onChangeHandler;
+    private convertFilesToBase64;
+    private getBase64;
+}

package/dist/@types/Component/ReactFileReader/index.d.ts

@@ -0,0 +1 @@
+export * from './ReactFileReader';

package/dist/@types/Component/StickyHeader/StickyHeader.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import 'scrolling-element';
+export declare const MINIMUN_SCROLL_HEIGHT_THRESHOLD = 1.5;
+export declare const FLOATABLE_THRESHOLD = 2;
+export declare const CLEAR_FLOATABLE_THRESHOLD = 3;
+export declare enum DISPLAY_STATES {
+    STATIC = "STATIC",
+    STICKY = "STICKY"
+}
+export interface IBrowserScrollState {
+    scrollTop: number;
+    scrollHeight: number;
+    screenHeight: number;
+    computedHeight: number;
+}
+export declare const TRANSITIONS: {
+    [K in DISPLAY_STATES]: (_: IBrowserScrollState) => DISPLAY_STATES;
+};
+export interface IStickyHeaderProps {
+    children: any;
+}
+export interface IStickyHeaderState {
+    display: DISPLAY_STATES;
+}
+export declare class StickyHeader extends React.Component<IStickyHeaderProps, IStickyHeaderState> {
+    private navigationMenuRef;
+    private throttledScrollHandler;
+    constructor(props: IStickyHeaderProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private getHeight;
+}

package/dist/@types/Component/StickyHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './StickyHeader';

package/dist/@types/Component/TextArea/TextArea.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface IBaseProps {
+    input: {
+        onChange: (value: string) => void;
+        value?: string;
+    };
+    label: string;
+    placeholder: string;
+}
+interface ITextAreaWithCounterProps extends IBaseProps {
+    hasCounter: boolean;
+    maxLength: number;
+}
+interface ITextAreaWithoutCounterProps extends IBaseProps {
+    hasCounter?: undefined;
+    maxLength?: undefined;
+}
+export declare type ITextAreaProps = ITextAreaWithCounterProps | ITextAreaWithoutCounterProps;
+export declare const TextArea: React.SFC<ITextAreaProps>;
+export {};

package/dist/@types/Component/TextArea/index.d.ts

@@ -0,0 +1 @@
+export * from './TextArea';

package/dist/@types/Component/TextInput/TextInput.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface ITextInputProps {
+    input?: {
+        onBlur: (event?: React.FocusEvent<HTMLInputElement>) => void;
+        onChange: (event: React.ChangeEvent<HTMLInputElement> | any) => void;
+        onFocus: (event?: React.FocusEvent<HTMLInputElement>) => void;
+        value: any;
+    };
+    meta?: {
+        error?: string;
+        touched?: boolean;
+    };
+    label?: string;
+    subtitle?: string;
+    placeholder: string;
+    type?: string;
+    maxLength?: number;
+    id: string;
+    containerClassName?: string;
+    readOnly?: boolean;
+    pattern?: string;
+    step?: number | string;
+}
+export declare const TextInput: React.SFC<ITextInputProps>;

package/dist/@types/Component/TextInput/index.d.ts

@@ -0,0 +1 @@
+export * from './TextInput';

package/dist/@types/Component/Toggle/Toggle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IToggleProps {
+    initialState?: boolean;
+    changeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const Toggle: React.SFC<IToggleProps>;

package/dist/@types/Component/Toggle/index.d.ts

@@ -0,0 +1 @@
+export * from './Toggle';

package/dist/@types/Component/TypeAhead/TypeAhead.d.ts

@@ -0,0 +1,44 @@
+import { Component } from 'react';
+export interface ITypeAheadProps {
+    autoComplete?: string;
+    data?: any[];
+    id?: string;
+    label: string;
+    resultsLength?: number;
+    placeholder: string;
+    targetKey: string;
+    valueKey: string;
+    input: {
+        className: string;
+        onChange: (event: {
+            newValue: string;
+        } | null | string) => void;
+        onBlur: () => void;
+    };
+    subtitle?: string;
+    meta?: {
+        error?: string;
+        touched?: boolean;
+    };
+}
+export interface ITypeAheadState {
+    value: string;
+    suggestions: any[];
+}
+export declare class TypeAhead extends Component<ITypeAheadProps, ITypeAheadState> {
+    static defaultProps: Partial<ITypeAheadProps>;
+    static propTypes: any;
+    private static getInitialValue;
+    constructor(props: ITypeAheadProps);
+    render(): JSX.Element;
+    private getSuggestions;
+    private renderSuggestion;
+    private getSuggestionValue;
+    private onChange;
+    private onBlur;
+    private onKeyDown;
+    private onSuggestionsFetchRequested;
+    private onSuggestionsClearRequested;
+    private onSuggestionSelected;
+    private renderInputComponent;
+}

package/dist/@types/Component/TypeAhead/index.d.ts

@@ -0,0 +1 @@
+export * from './TypeAhead';

package/dist/@types/Component/index.d.ts

@@ -0,0 +1,11 @@
+export * from './BaseButton';
+export * from './CheckBox';
+export * from './ConfirmationBox';
+export * from './Dropdown';
+export * from './RadioButtonGroup';
+export * from './ReactFileReader';
+export * from './StickyHeader';
+export * from './TextArea';
+export * from './TextInput';
+export * from './Toggle';
+export * from './TypeAhead';

package/dist/@types/Example/ReactFileReader/ReactFileReader.story.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/@types/Example/ReactFileReader/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IReactFileReaderResult } from '../../Component/index';
+interface IExampleReactFileReaderState {
+    results: {
+        [key: string]: IReactFileReaderResult;
+    };
+}
+export declare class ExampleReactFileReader extends React.Component<{}, IExampleReactFileReaderState> {
+    state: Readonly<IExampleReactFileReaderState>;
+    render(): JSX.Element;
+    private renderReactFileReader;
+    private showFileResult;
+}
+export default ExampleReactFileReader;

package/dist/@types/storyguide/Buttons/BaseButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare function BaseButton(props: {
+    className: any;
+    text: React.ReactNode;
+}): JSX.Element;
+export declare function IconButton(props: {
+    className: any;
+    text: React.ReactNode;
+}): JSX.Element;
+export declare function IconButtonwWord(props: {
+    className: any;
+    text: React.ReactNode;
+}): JSX.Element;
+export declare function FloatingActionButton(props: {
+    className: any;
+    text: React.ReactNode;
+}): JSX.Element;

package/dist/@types/storyguide/JobCard/Bookmark/BookmarkButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IBookmarkedButtonProps {
+    selected?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => any;
+}
+export declare const BookmarkButton: React.FunctionComponent<IBookmarkedButtonProps>;

package/dist/@types/storyguide/JobCard/CompanyInfo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CompanyInfo(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobBenefit.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function JobBenefit(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobCard.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Company: React.FunctionComponent;

package/dist/@types/storyguide/JobCard/JobInfo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function JobInfo(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobLastPostedDate.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function JobLastPostedDate(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobPostStatus.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function JobPostStatus(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobSkillInfo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function JobSkillInfo(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobSponsor.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function JobSponsor(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobTitle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function JobTitle(): JSX.Element;

package/dist/@types/storyguide/JobCard/SalaryInfo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SalaryInfo(): JSX.Element;

package/dist/@types/storyguide/Skills/Score.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const CARD_LABEL: {
+    NO_SKILL_INFO: string;
+    SKILLS_MATCHED: string;
+};
+export declare const Score: React.FunctionComponent;

package/dist/@types/storyguide/Skills/Scorebar.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const CARD_LABEL: {
+    NO_SKILL_INFO: string;
+    SKILLS_MATCHED: string;
+};
+export declare function Scorebar(): JSX.Element;

package/dist/@types/storyguide/Skills/SkillPill.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ISkillButtonProps {
+    label: string;
+    selected?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => any;
+}
+export declare const SkillButton: React.FunctionComponent<ISkillButtonProps>;

package/dist/@types/storyguide/Text/Font.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export default function TextHeadLine(props: {
+    className: any;
+}): JSX.Element;
+export declare function FontFamily(props: {
+    text: React.ReactNode;
+}): JSX.Element;
+export declare function FontStyle(props: {
+    className: any;
+    code: React.ReactNode;
+    text: React.ReactNode;
+}): JSX.Element;

package/dist/@types/storyguide/Text/TextSize.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function TextSize(props: {
+    className: React.ReactNode;
+}): JSX.Element;