@mycause/ui 0.0.0-c7de8cef → 0.0.0-c7f1270a

package/dist/components/phone-number-field/phone-number-field.stories.jsx

@@ -1,23 +0,0 @@
-import React, { useState } from "react";
-import { withKnobs, boolean, text } from "@storybook/addon-knobs";
-import CenterDecorator from "../../utils/center-decorator";
-import PhoneNumberField from "./phone-number-field";
-export default {
-    title: "PhoneNumberField",
-    decorators: [CenterDecorator, withKnobs],
-};
-export const PhoneNumberFieldStory = () => {
-    const [values, setValues] = useState({
-        number: "",
-        countryCallingCode: "",
-        country: "",
-    });
-    const label = text("Label", "Phone number");
-    const required = boolean("Required", false);
-    const helperText = text("Helper Text", "Enter an Australian or international phone number.");
-    const error = text("Error text", "");
-    return (<PhoneNumberField values={values} onChange={(value, name) => setValues(values => ({ ...values, [name]: value }))} label={label} helperText={helperText} required={required} error={error || null}/>);
-};
-PhoneNumberFieldStory.story = {
-    name: "default",
-};

package/dist/components/phone-number-field/util.d.ts

@@ -1,2 +0,0 @@
-import { PhoneNumber, CountryCode } from "libphonenumber-js";
-export declare function parseNationalPhoneNumber(phoneNumber: string, countryCallingCode: string, defaultCountry?: CountryCode): PhoneNumber | null;

package/dist/components/phone-number-field/util.js

@@ -1,19 +0,0 @@
-import { parsePhoneNumberFromString, } from "libphonenumber-js";
-export function parseNationalPhoneNumber(phoneNumber, countryCallingCode, defaultCountry) {
-    let number;
-    // Try with the country code
-    if (countryCallingCode) {
-        number = parsePhoneNumberFromString("+" + countryCallingCode + phoneNumber, defaultCountry);
-        if (number && number.isValid())
-            return number;
-    }
-    // Try clipping the intital "0" from the number, if there is one
-    if ((countryCallingCode && phoneNumber.startsWith("0"), defaultCountry)) {
-        number = parsePhoneNumberFromString("+" + countryCallingCode + phoneNumber.substr(1));
-        if (number && number.isValid())
-            return number;
-    }
-    // Finally just try the number by itself
-    number = parsePhoneNumberFromString(phoneNumber, defaultCountry);
-    return number || null;
-}

package/dist/components/phone-number-input/index.js

@@ -1,2 +0,0 @@
-export { default as PhoneNumberInput } from "./phone-number-input";
-export * from "./util";

package/dist/components/phone-number-input/phone-number-field.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-import { CountryCode } from "libphonenumber-js";
-declare type PhoneNumberFieldProps = {
-    values: {
-        number: string;
-        countryCallingCode: string;
-        country: string;
-    };
-    names?: {
-        number: string;
-        countryCallingCode: string;
-        country: string;
-    };
-    onChange: (value: string, name: string) => void;
-    label?: React.ReactNode;
-    error?: string | null;
-    onBlur?: (e: React.FocusEvent) => void;
-    helperText?: React.ReactNode;
-    required?: boolean;
-    defaultCountry?: CountryCode;
-};
-declare function PhoneNumberField({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, }: PhoneNumberFieldProps): JSX.Element;
-export default PhoneNumberField;

package/dist/components/phone-number-input/phone-number-field.jsx

@@ -1,50 +0,0 @@
-import React from "react";
-import countries from "i18n-iso-countries";
-import en from "i18n-iso-countries/langs/en.json";
-import { AsYouType } from "libphonenumber-js";
-import { FieldLabel, FieldHelperText } from "../field-helpers";
-import { ComboField, ComboFieldExpander } from "../combo-field";
-import { Box } from "../layout";
-import { Select } from "../select";
-import { TextField } from "../text-field";
-countries.registerLocale(en);
-const COUNTRY_CODES = Object.keys(countries.getAlpha2Codes()).sort();
-function PhoneNumberField({ onChange, values, names = {
-    number: "number",
-    countryCallingCode: "countryCallingCode",
-    country: "country",
-}, error, onBlur, helperText, label, required, defaultCountry = "AU", }) {
-    const format = (text, c) => {
-        const typer = new AsYouType(c || defaultCountry);
-        const formatted = typer.input(text);
-        let result = typer.getNumber();
-        if (result && result.isValid()) {
-            // When the user has typed in a full valid number,
-            // emit the country calling code and set the country explicitly
-            onChange(result.country, names.country);
-            onChange(result.format("NATIONAL"), names.number);
-            onChange(result.countryCallingCode, names.countryCallingCode);
-        }
-        else {
-            onChange(formatted, names.number);
-        }
-    };
-    const handleCountryChange = (e) => {
-        onChange(e.target.value || "", names.country);
-        format(values.number, e.target.value);
-    };
-    const handleTextChange = (e) => {
-        format(e.target.value, values.country);
-    };
-    return (<Box>
-      {label ? <FieldLabel required={required}>{label}</FieldLabel> : null}
-      <ComboField>
-        <Select options={COUNTRY_CODES} value={values.country} onChange={handleCountryChange} noArrow onBlur={onBlur} required={required}/>
-        <ComboFieldExpander>
-          <TextField type="tel" value={values.number} onChange={handleTextChange} name={names.number} onBlur={onBlur} error={!!error} required={required}/>
-        </ComboFieldExpander>
-      </ComboField>
-      {helperText ? (<FieldHelperText error={error}>{helperText}</FieldHelperText>) : null}
-    </Box>);
-}
-export default PhoneNumberField;

package/dist/components/phone-number-input/phone-number-field.stories.jsx

@@ -1,16 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import PhoneNumberInput from "./phone-number-input";
-export default {
-    title: "PhoneNumberInput",
-    decorators: [CenterDecorator],
-};
-export const PhoneNumberInputStory = () => {
-    const [values, setValues] = useState("");
-    return (<div style={{ width: "313px" }}>
-      <PhoneNumberInput value={values} onChange={setValues} preferredCountries={["au"]} label="Phone number" placeholder="Enter phone number" helperText="Enter an Australian or international phone number."/>
-    </div>);
-};
-PhoneNumberInputStory.story = {
-    name: "default",
-};

package/dist/components/phone-number-input/phone-number-input.jsx

@@ -1,75 +0,0 @@
-import React from "react";
-import countries from "i18n-iso-countries";
-import en from "i18n-iso-countries/langs/en.json";
-import { AsYouType } from "libphonenumber-js";
-import { FieldLabel, FieldHelperText } from "../field-helpers";
-import { ComboField, ComboFieldExpander } from "../combo-field";
-import { Box } from "../layout";
-import { Select } from "../select";
-import { TextField } from "../text-field";
-// Set up country options.
-countries.registerLocale(en);
-const getCountryNames = countries.getNames("en");
-const COUNTRY_CODES = Object.keys(countries.getAlpha2Codes()).sort();
-let countryOptions = COUNTRY_CODES.map(key => {
-    return {
-        label: getCountryNames[key],
-        value: key,
-    };
-}).filter(res => res.value != "AU");
-countryOptions.unshift({ label: "Australia", value: "AU" });
-function PhoneNumberInput({ onChange, values, names = {
-    number: "number",
-    countryCallingCode: "countryCallingCode",
-    country: "country",
-}, error, onBlur, helperText, label, required, defaultCountry = "AU", }) {
-    const format = (text, c) => {
-        const typer = new AsYouType(c || defaultCountry);
-        const formatted = typer.input(text);
-        let result = typer.getNumber();
-        if (result && result.isValid()) {
-            // When the user has typed in a full valid number,
-            // emit the country calling code and set the country explicitly
-            onChange(result.country, names.country);
-            onChange(result.format("NATIONAL"), names.number);
-            onChange(result.countryCallingCode, names.countryCallingCode);
-        }
-        else {
-            onChange(formatted, names.number);
-        }
-    };
-    const handleCountryChange = (e) => {
-        onChange(e.target.value || "", names.country);
-        format(values.number, e.target.value);
-    };
-    const handleTextChange = (e) => {
-        format(e.target.value, values.country);
-    };
-    return (<Box>
-      {label ? <FieldLabel required={required}>{label}</FieldLabel> : null}
-      <span className={`flag-icon flag-icon-${values.country.toLowerCase()}`}></span>
-      <ComboField className="combofield-phonenumber-input">
-        <Select options={countryOptions} value={values.country} onChange={handleCountryChange} noArrow onBlur={onBlur} required={required}/>
-        <ComboFieldExpander>
-          <TextField type="tel" value={values.number} onChange={handleTextChange} name={names.number} onBlur={onBlur} error={!!error} required={required}/>
-        </ComboFieldExpander>
-      </ComboField>
-      {helperText ? <FieldHelperText>{helperText}</FieldHelperText> : null}
-      {error ? <FieldHelperText error={error}/> : null}
-      <style jsx>{`
-        .flag-icon {
-          position: relative;
-          top: 40px;
-          right: 78px;
-        }
-        :global(.combofield-phonenumber-input
-            > .select
-            > .mdc-select
-            > .mdc-select__native-control) {
-          opacity: 0;
-          max-width: 55px;
-        }
-      `}</style>
-    </Box>);
-}
-export default PhoneNumberInput;

package/dist/components/phone-number-input/phone-number-input.stories.jsx

@@ -1,23 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import { boolean, text } from "@storybook/addon-knobs";
-import PhoneNumberInput from "./phone-number-input";
-export default {
-    title: "PhoneNumberInput",
-    decorators: [CenterDecorator],
-};
-export const PhoneNumberInputStory = () => {
-    const [values, setValues] = useState({
-        number: "",
-        countryCallingCode: "",
-        country: "AU",
-    });
-    const label = text("Label", "Phone number");
-    const required = boolean("Required", false);
-    const helperText = text("Helper Text", "Enter an Australian or international phone number.");
-    const error = text("Error text", "");
-    return (<PhoneNumberInput values={values} onChange={(value, name) => setValues(values => ({ ...values, [name]: value }))} label={label} helperText={helperText} required={required} error={error || null}/>);
-};
-PhoneNumberInputStory.story = {
-    name: "default",
-};

package/dist/components/phone-number-input/util.js

@@ -1,19 +0,0 @@
-import { parsePhoneNumberFromString, } from "libphonenumber-js";
-export function parseNationalPhoneNumber(phoneNumber, countryCallingCode, defaultCountry) {
-    let number;
-    // Try with the country code
-    if (countryCallingCode) {
-        number = parsePhoneNumberFromString("+" + countryCallingCode + phoneNumber, defaultCountry);
-        if (number && number.isValid())
-            return number;
-    }
-    // Try clipping the intital "0" from the number, if there is one
-    if ((countryCallingCode && phoneNumber.startsWith("0"), defaultCountry)) {
-        number = parsePhoneNumberFromString("+" + countryCallingCode + phoneNumber.substr(1));
-        if (number && number.isValid())
-            return number;
-    }
-    // Finally just try the number by itself
-    number = parsePhoneNumberFromString(phoneNumber, defaultCountry);
-    return number || null;
-}

package/dist/components/radio/index.js

@@ -1,2 +0,0 @@
-export { default as Radio } from "./radio";
-export { default as RadioGroup } from "./radio-group";

package/dist/components/radio/radio-group.jsx

@@ -1,9 +0,0 @@
-import React from "react";
-import Radio from "./radio";
-import { Flex } from "../layout";
-function RadioGroup({ name, value, onChange, options, onBlur, onFocus, disabled, ...rest }) {
-    return (<Flex direction="column" {...rest}>
-      {options.map(option => (<Radio key={option.value} checked={option.value === value} label={option.label} name={name} value={option.value} onBlur={onBlur} onFocus={onFocus} onChange={onChange} disabled={disabled || option.disabled}/>))}
-    </Flex>);
-}
-export default RadioGroup;

package/dist/components/radio/radio-group.stories.jsx

@@ -1,21 +0,0 @@
-import React, { useState } from "react";
-import RadioGroup from "./radio-group";
-import CenterDecorator from "../../utils/center-decorator";
-export default {
-    title: "RadioGroup",
-    decorators: [CenterDecorator],
-};
-export const RadioGroupStory = () => {
-    const [value, setValue] = useState("");
-    return (<RadioGroup value={value} onChange={e => {
-        console.log(e.target.value);
-        setValue(e.target.value);
-    }} options={[
-        { value: "1", label: "This is option one" },
-        { value: "2", label: "This is the second option" },
-        { value: "3", label: "This is the last option" },
-    ]}/>);
-};
-RadioGroupStory.story = {
-    name: "default",
-};

package/dist/components/radio/radio.jsx

@@ -1,31 +0,0 @@
-import React, { Fragment, useState, useEffect } from "react";
-import MDCRadio, { NativeRadioControl as MDCNativeRadioControl, } from "@material/react-radio";
-import nanoid from "nanoid";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import { useTheme, getColorToken } from "../../theme/theme";
-const Radio = ({ id = "", color = "primary", label = "", value, name, className, wrapperClasses, ...rest }) => {
-    const [mainId, setMainId] = useState("");
-    const theme = useTheme();
-    const setColor = getColorToken(theme, "foreground", color);
-    useEffect(() => {
-        setMainId(id || (name && value ? `name__${value}` : nanoid()));
-    }, [id, setMainId, name, value]);
-    const scope = css.resolve `
-    .mdc-radio {
-      --mdc-theme-secondary: ${setColor};
-    }
-    .mdc-form-field :global(label) {
-      font-family: ${theme.typography.fontFamily.brand};
-      font-weight: 500;
-      cursor: pointer;
-    }
-  `;
-    return (<Fragment>
-      <MDCRadio wrapperClasses={classnames(wrapperClasses, scope.className)} className={classnames(className, scope.className)} value={value} label={label} key={mainId}>
-        <MDCNativeRadioControl className={classnames(className)} value={value} name={name} id={mainId} {...rest}/>
-      </MDCRadio>
-      {scope.styles}
-    </Fragment>);
-};
-export default Radio;

package/dist/components/radio/radio.stories.jsx

@@ -1,44 +0,0 @@
-import React, { useState, Fragment } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Radio from "./radio";
-export default {
-    title: "Radio",
-    decorators: [CenterDecorator],
-};
-export const RadioExample = () => {
-    const [checked, setChecked] = useState(false);
-    const handleClick = (event) => {
-        let targetValue = event.target.value ? true : false;
-        setChecked(targetValue);
-    };
-    return (<Fragment>
-      <Radio checked={checked} value="primary" onChange={handleClick}/>
-      <Radio color="secondary" checked={checked} value="secondary" onChange={handleClick}/>
-      <Radio color="muted" checked={checked} value="muted" onChange={handleClick}/>
-    </Fragment>);
-};
-RadioExample.story = {
-    name: "default",
-};
-export const RadioLabelExample = () => {
-    const [checked, setChecked] = useState(false);
-    const handleClick = (event) => {
-        let targetValue = event.target.value ? true : false;
-        setChecked(targetValue);
-    };
-    return (<Fragment>
-      <Radio label="Radio with Label" checked={checked} value="withLabel" onChange={handleClick}/>
-    </Fragment>);
-};
-RadioLabelExample.story = {
-    name: "with label",
-};
-export const RadioDisabledExample = () => {
-    return (<Fragment>
-      <Radio disabled={true} checked={true}/>
-      <Radio disabled={true} checked={false}/>
-    </Fragment>);
-};
-RadioDisabledExample.story = {
-    name: "disabled",
-};

package/dist/components/select/index.js

@@ -1,2 +0,0 @@
-export { default as Select } from "./select";
-export { default as SelectHelperText } from "./select-helper-text";

package/dist/components/select/select-helper-text.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import { SelectHelperText as MaterialSelectHelperText, } from "@material/react-select";
-function SelectHelperText(props) {
-    return <MaterialSelectHelperText {...props}/>;
-}
-export default SelectHelperText;

package/dist/components/select/select.jsx

@@ -1,150 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import MDCSelect, { Option, SelectIcon, } from "@material/react-select";
-import { useTheme } from "../../theme/theme";
-import SelectHelperText from "./select-helper-text";
-import { FieldLabel, FieldHelperText } from "../field-helpers";
-const Select = function Select({ label = "", value, onChange, helperText, isHelperTextPersistent, externalLabel, id, className, options, large = false, required, leadingIcon, noArrow, error = false, ...rest }) {
-    const theme = useTheme();
-    let errorMessage = null;
-    // If options has been provided as an array of strings, convert it into an array of objects
-    if (isStringArray(options)) {
-        options = options.map((option) => ({
-            value: option,
-            label: option,
-        }));
-    }
-    // Add an empty default value
-    if (value === "" && !options.find(option => option.value === "")) {
-        options = [
-            {
-                value: "",
-                label: "",
-                disabled: true,
-            },
-            ...options,
-        ];
-    }
-    if (leadingIcon) {
-        leadingIcon = <SelectIcon tag="span">{leadingIcon}</SelectIcon>;
-    }
-    // If helperText is passed as a string turn it into a HelperText
-    // helperText=null or helperText="" indicates that there should be empty helper text (for layout reasons)
-    if (typeof helperText === "string" || helperText === null) {
-        helperText = (<SelectHelperText persistent={isHelperTextPersistent}>
-        {helperText}
-      </SelectHelperText>);
-    }
-    if (typeof error === "string") {
-        errorMessage = <FieldHelperText error={error}/>;
-    }
-    const scope = css.resolve `
-    .select :global(.mdc-select__native-control) {
-      border: ${error && "2px solid #b00020 !important"};
-    }
-    .select :global(.mdc-select__native-control),
-    .select :global(.mdc-floating-label) {
-      font-weight: 500;
-      font-family: ${theme.typography.fontFamily.brand};
-    }
-  `;
-    /**
-     * This is a fix for the Material Component Bug in firefox
-     * untill they address this we have to handle the onChange
-     * of select with onClick.
-     */
-    const handler = getFirefoxSelectBugHHandler(value, onChange);
-    return (<div className={classnames("select", scope.className)}>
-      {externalLabel && label ? (<FieldLabel large={large} htmlFor={id} required={required}>
-          {label}
-        </FieldLabel>) : null}
-      <MDCSelect label={externalLabel ? "" : label} value={value} enhanced={false} onChange={handler} onClick={handler} id={id} outlined required={required} className={classnames(className, {
-        "mdc-select--dense": !large,
-        "mdc-select--no-arrow": noArrow,
-    })} leadingIcon={leadingIcon} helperText={!error ? helperText : undefined} {...rest}>
-        {options.map(option => (<Option key={option.value} {...option}>
-            {option.label}
-          </Option>))}
-      </MDCSelect>
-      {errorMessage}
-      <style jsx>{`
-        .select {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .select-label {
-          font-size: 0.875rem;
-          margin: 0.5rem 0;
-          display: inline-block;
-          font-weight: 400;
-          letter-spacing: 0.00937em;
-          color: rgba(0, 0, 0, 0.6);
-          text-align: left;
-        }
-
-        .select-label--dense {
-          font-size: 0.75rem;
-        }
-      `}</style>
-      {scope.styles}
-    </div>);
-};
-export default Select;
-function isStringArray(arr) {
-    // Note this only tests that at least one item in the array is a string
-    // This only works under the assumption that the array does not contain mixed types
-    return arr.some((option) => typeof option === "string");
-}
-function getFirefoxSelectBugHHandler(value, handler) {
-    let events = {
-        click: null,
-        change: null,
-    };
-    let values = {
-        click: "",
-        change: "",
-    };
-    let flushed = false;
-    let handle = null;
-    const flush = () => {
-        if (events.change && !events.click) {
-            events.change.target.value = values.change;
-            handler(events.change);
-        }
-        else if (events.change && values.change && values.change !== value) {
-            handler(events.change);
-        }
-        else if (events.click && values.click && values.click !== value) {
-            handler(events.click);
-        }
-        else if (events.change && !values.click && !values.change && value) {
-            handler(events.change);
-        }
-    };
-    return (e) => {
-        switch (e.type) {
-            case "click":
-                values.click = e.target.value;
-                events.click = e;
-                break;
-            case "change":
-                values.change = e.currentTarget.value;
-                events.change = e;
-                break;
-        }
-        if (events.click && events.change) {
-            flush();
-        }
-        if (!handle) {
-            // This flush is required if the user used the keyboard to select
-            // as no click event would have been dispatched
-            handle = requestAnimationFrame(() => {
-                if (!flushed) {
-                    flush();
-                }
-            });
-        }
-    };
-}

package/dist/components/select/select.stories.jsx

@@ -1,40 +0,0 @@
-import React, { useState } from "react";
-import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
-import CenterDecorator from "../../utils/center-decorator";
-import Select from "./select";
-import { Icon } from "../icon";
-export default {
-    title: "Select",
-    decorators: [CenterDecorator, withKnobs],
-};
-let options = [
-    "",
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-];
-export const SelectStory = () => {
-    const [value, setValue] = useState("");
-    const large = boolean("Large", false);
-    const label = text("Label", "Month");
-    const labelKind = select("Label Type", { External: "external", Floating: "floating" }, "Floating");
-    const required = boolean("Required", false);
-    const helperText = text("Helper Text", "A month in the year");
-    const persistent = boolean("Persistent Helper Text", false);
-    const leadingIcon = boolean("Leading Icon", false);
-    const arrow = boolean("Arrow", true);
-    const error = text("error message", "");
-    return (<Select value={value} options={options} onChange={e => setValue(e.target.value)} label={label} large={large} helperText={helperText} isHelperTextPersistent={persistent} externalLabel={labelKind === "external"} required={required} color="secondary" leadingIcon={leadingIcon ? <Icon icon="account_circle"/> : undefined} noArrow={!arrow} error={error}/>);
-};
-SelectStory.story = {
-    name: "default",
-};

package/dist/components/statistics/index.js

@@ -1 +0,0 @@
-export { default as Statistics } from "./statistics";

package/dist/components/statistics/statistics.jsx

@@ -1,61 +0,0 @@
-import React from "react";
-import cn from "classnames";
-import { Text } from "../text";
-import { Flex, Stack } from "../layout";
-function Statistics({ title, stats, className, ...rest }) {
-    return (<div className={cn("statistics", className)} {...rest}>
-      <Stack direction="column">
-        <Text p kind="h3" font="brand" color="primary">
-          {title}
-        </Text>
-        <Stack gap="1.5rem">
-          {stats.map(stat => {
-        let { id, label, logo, value } = stat;
-        return (<Stack key={id} align="stretch" className="statistics-item">
-                <div className="statistics-logo" style={{
-            backgroundImage: `url(${logo})`,
-        }}/>
-                <Flex className="statistics-text" direction="column" justify="space-around" align="stretch">
-                  <Text span kind="h4" font="brand" className="statistics-text-title">
-                    {label}
-                  </Text>
-                  <Text span kind="p" font="brand" className="statistics-text-value">
-                    {value}
-                  </Text>
-                </Flex>
-              </Stack>);
-    })}
-        </Stack>
-      </Stack>
-      <style jsx>{`
-        .statistics {
-        }
-
-        .statistics-logo {
-          width: 3rem;
-          height: 3rem;
-          background-position: center;
-          background-size: contain;
-          background-repeat: no-repeat;
-        }
-
-        .statistics :global(.statistics-text) {
-          height: 100%;
-          min-width: max-content;
-        }
-
-        .statistics :global(.statistics-item) {
-          height: 3rem;
-        }
-
-        .statistics :global(.statistics-text) {
-          height: 100%;
-        }
-
-        .statistics :global(.statistics-text-value) {
-          line-height: 1;
-        }
-      `}</style>
-    </div>);
-}
-export default Statistics;