@mycause/ui 0.0.0-c7035342 → 0.0.0-c71ac9b5

package/dist/components/chips/chips.stories.jsx

@@ -1,35 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Chips from "./chips";
-import Chip from "./chip";
-export default {
-    title: "Chips",
-    decorators: [CenterDecorator],
-};
-export const chips = () => (<Chips>
-    <Chip id="summer" label="Summer"/>
-    <Chip id="winter" label="Winter"/>
-  </Chips>);
-chips.story = {
-    name: "default",
-};
-export const ChoiceChips = () => {
-    const [selected, setSelected] = useState(["summer"]);
-    return (<Chips choice value={selected} onChange={setSelected} options={[
-        { id: "summer", label: "Summer" },
-        { id: "winter", label: "Winter" },
-    ]}></Chips>);
-};
-ChoiceChips.story = {
-    name: "choice",
-};
-export const FilterChips = () => {
-    const [selected, setSelected] = useState(["summer"]);
-    return (<Chips filter value={selected} onChange={setSelected}>
-      <Chip id="summer" label="Summer"/>
-      <Chip id="winter" label="Winter"/>
-    </Chips>);
-};
-FilterChips.story = {
-    name: "filter",
-};

package/dist/components/chips/index.js

@@ -1,3 +0,0 @@
-export { default as Chips } from "./chips";
-export { default as InputChips } from "./input-chips";
-export { default as Chip } from "./chip";

package/dist/components/chips/input-chips.jsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { ChipSet } from "@material/react-chips";
-/**
- * A form control for adding and removing items to a set.
- */
-function InputChips({ onChange, ...rest }) {
-    const handleUpdateChips = (chips) => {
-        onChange(chips.map((chip) => chip.id));
-    };
-    const props = {
-        updateChips: handleUpdateChips,
-        ...rest,
-    };
-    return <ChipSet {...props}/>;
-}
-export default InputChips;

package/dist/components/chips/input-chips.stories.jsx

@@ -1,39 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import { TextField } from "../text-field";
-import { Icon } from "../icon";
-import InputChips from "./input-chips";
-import Chip from "./chip";
-export default {
-    title: "InputChips",
-    decorators: [CenterDecorator],
-};
-export function InputChipsStory() {
-    const [text, setText] = useState("");
-    const [values, setValues] = useState([]);
-    const handleKeyDown = (e) => {
-        if (e.key === "Enter" && text.trim()) {
-            if (!values.includes(text.trim())) {
-                setValues(values => [...values, text.trim()]);
-                setText("");
-            }
-        }
-    };
-    return (<div>
-      <div>
-        <TextField placeholder="Add an item" value={text} onChange={e => setText(e.target.value)} onKeyDown={handleKeyDown}/>
-      </div>
-      <InputChips onChange={chips => setValues(chips)}>
-        {values.map((value) => (<Chip id={value} key={value} label={value} trailingIcon={<Icon icon="cancel"/>}/>))}
-      </InputChips>
-      <style jsx>{`
-        div {
-          max-width: 360px;
-          width: 100%;
-        }
-      `}</style>
-    </div>);
-}
-InputChipsStory.story = {
-    name: "default",
-};

package/dist/components/combo-field/combo-field-expander.jsx

@@ -1,23 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-const scope = css.resolve `
-  .combo-field-expand {
-    flex-grow: 1;
-  }
-`;
-/**
- * Makes a field in a combo-field expand to fill as
- * much size as it can.
- */
-function ComboFieldExpander({ children, className, ...props }) {
-    const child = React.Children.only(children);
-    return (<>
-      {React.cloneElement(child, {
-        className: classnames(child.props.className, scope.className, className, "combo-field-expand"),
-        ...props,
-    })}
-      {scope.styles}
-    </>);
-}
-export default ComboFieldExpander;

package/dist/components/combo-field/combo-field.jsx

@@ -1,93 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { getElementDisplayName } from "../../utils/get-element-display-name";
-import { TextField } from "../text-field";
-import { Select } from "../select";
-import { Button } from "../button";
-import { IconButtonGroup } from "../icon";
-import ComboFieldExpander from "./combo-field-expander";
-/**
- * Combines several input controls to into one visually continuous
- * control
- *
- * Supports the following components:
- * - TextField
- * - Select
- * - Button
- * - IconButtonGroup
- */
-function ComboField({ children, className, large = false, ...rest }) {
-    children = React.Children.map(children, child => augment(child, { large }));
-    return (<div className={classnames("combo-field", className)} {...rest}>
-      {children}
-      <style jsx>{`
-        .combo-field {
-          display: flex;
-          align-items: flex-end;
-          margin-bottom: 1px;
-        }
-
-        .combo-field
-          > :global(*:not(:last-child))
-          :global(.mdc-text-field:not(.mdc-text-field--focused))
-          :global(.mdc-notched-outline__trailing),
-        .combo-field
-          > :global(*:not(:last-child))
-          :global(.mdc-select:not(.mdc-select--focused))
-          :global(.mdc-notched-outline__trailing),
-        .combo-field :global(.mdc-button--control:not(:last-child):not(:focus)),
-        .combo-field :global(.icon-button-group:not(:last-child)::after) {
-          border-right-color: transparent;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-          margin-right: -1px;
-        }
-
-        .combo-field
-          > :global(*:not(:first-child))
-          :global(.mdc-text-field:not(.mdc-text-field--focused))
-          :global(.mdc-notched-outline__leading),
-        .combo-field
-          > :global(*:not(:first-child))
-          :global(.mdc-select:not(.mdc-select--focused))
-          :global(.mdc-notched-outline__leading),
-        .combo-field
-          :global(.mdc-button--control:not(:first-child):not(:focus)),
-        .combo-field :global(.icon-button-group:not(:first-child)::after) {
-          border-left-color: transparent;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          margin-left: -1px;
-        }
-      `}</style>
-    </div>);
-}
-export default ComboField;
-/* Augment the passed elements */
-function augment(element, { large }) {
-    switch (element.type) {
-        case ComboFieldExpander:
-            return React.cloneElement(element, {}, augment(React.Children.only(element.props.children), { large }));
-        case TextField:
-        case Select:
-            // Force text-field or select to be large if needed
-            element = React.cloneElement(element, { large });
-            break;
-        case Button:
-            // Force the button to be the control style
-            element = React.cloneElement(element, { control: true, dense: !large });
-            break;
-        case IconButtonGroup:
-            // Ensure the size of the button matches the height
-            element = React.cloneElement(element, {
-                size: large ? "3.5rem" : undefined,
-                isOutlinedOnFocus: true,
-            });
-            break;
-        default:
-            if (process.env.NODE_ENV !== "production") {
-                console.warn("[ComboField] unsupported element type", getElementDisplayName(element));
-            }
-    }
-    return element;
-}

package/dist/components/combo-field/combo-field.stories.jsx

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import { TextField } from "../text-field";
-import { Select } from "../select";
-import { Icon, IconButton, IconButtonGroup } from "../icon";
-import { Button } from "../button";
-import ComboField from "./combo-field";
-import ComboFieldExpander from "./combo-field-expander";
-export default {
-    title: "ComboField",
-    decorators: [CenterDecorator],
-};
-export const ComboFieldStory = () => {
-    const [value, setValue] = useState("");
-    const [state, setState] = useState("");
-    return (<div>
-      <ComboField>
-        <ComboFieldExpander>
-          <TextField label="Charity" placeholder="Search" leadingIcon={<Icon icon="search"/>} value={value} onChange={e => setValue(e.target.value)}/>
-        </ComboFieldExpander>
-        <Select label="State" options={[
-        { value: "", label: "" },
-        { value: "VIC", label: "Victoria" },
-    ]} value={state} onChange={e => setState(e.target.value)}/>
-        <Button>Category</Button>
-      </ComboField>
-      <style jsx>{`
-        div {
-          max-width: 580px;
-          width: 100%;
-        }
-      `}</style>
-    </div>);
-};
-ComboFieldStory.story = {
-    name: "default",
-};
-export const WithIconButton = () => {
-    const [value, setValue] = useState("");
-    const [show, setShow] = useState(false);
-    return (<div>
-      <ComboField>
-        <ComboFieldExpander>
-          <TextField label="Charity" placeholder="Search" leadingIcon={<Icon icon="search"/>} value={value} onChange={e => setValue(e.target.value)}/>
-        </ComboFieldExpander>
-        <IconButtonGroup>
-          <IconButton pressed={show} onClick={() => setShow(!show)}>
-            <Icon icon="filter_list"/>
-          </IconButton>
-        </IconButtonGroup>
-      </ComboField>
-      <style jsx>{`
-        div {
-          max-width: 580px;
-          width: 100%;
-        }
-      `}</style>
-    </div>);
-};
-WithIconButton.story = {
-    name: "icon button",
-};

package/dist/components/combo-field/index.js

@@ -1,2 +0,0 @@
-export { default as ComboField } from "./combo-field";
-export { default as ComboFieldExpander } from "./combo-field-expander";

package/dist/components/cropper/cropper.jsx

@@ -1,15 +0,0 @@
-import React, { useRef } from "react";
-import ReactCropper from "react-cropper";
-const Cropper = ({ image, exportType, aspectRatio, cropImage, ...res }) => {
-    const cropperRef = useRef(null);
-    const crop = () => {
-        if (!exportType) {
-            exportType = "image/png";
-        }
-        cropImage(cropperRef.current
-            .getCroppedCanvas()
-            .toDataURL(exportType));
-    };
-    return (<ReactCropper ref={cropperRef} src={image} aspectRatio={aspectRatio} crop={crop} {...res}/>);
-};
-export default Cropper;

package/dist/components/cropper/cropper.stories.jsx

@@ -1,18 +0,0 @@
-import React, { Fragment, useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Cropper from "./cropper";
-import catImage from "./cat.jpeg";
-export default {
-    title: "Cropper",
-    decorators: [CenterDecorator],
-};
-export const CropperStory = () => {
-    const [croppedImage, setCroppedImage] = useState("");
-    return (<Fragment>
-      <Cropper image={catImage} style={{ width: "100%", height: "400px", maxWidth: "500px" }} aspectRatio={16 / 16} cropImage={setCroppedImage} dragMode="move" viewMode={2} cropBoxResizable={true}/>
-      <img style={{ width: "400px" }} src={croppedImage} alt="cropped image"/>
-    </Fragment>);
-};
-CropperStory.story = {
-    name: "default",
-};

package/dist/components/cropper/index.js

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

package/dist/components/date-picker/date-picker.jsx

@@ -1,74 +0,0 @@
-import React from "react";
-import "react-dates/initialize";
-import { DateRangePicker } from "react-dates";
-import { useTheme, getColorToken } from "../../theme/theme";
-const DatePicker = ({ color = "primary", setStartDate, setEndDate, setFocusedInput, hasArrowIcon = true, numberOfMonths = 1, ...rest }) => {
-    const theme = useTheme();
-    const setColor = getColorToken(theme, "foreground", color);
-    const handleDatesChange = ({ startDate, endDate, }) => {
-        startDate && setStartDate(startDate);
-        endDate && setEndDate(endDate);
-    };
-    return (<div className="calendar-container">
-      <DateRangePicker numberOfMonths={numberOfMonths} onDatesChange={handleDatesChange} onFocusChange={event => setFocusedInput(event)} {...rest}/>
-      <style jsx>{`
-        .calendar-container {
-          font-family: ${theme.typography.fontFamily.brand};
-        }
-        :global(.DateRangePickerInput__withBorder) {
-          border-width: 2px !important;
-          border-radius: 4px !important;
-        }
-        :global(.DateRangePickerInput__withBorder:hover) {
-          border-width: 1px !important;
-          border-color: #000000 !important;
-        }
-        :global(.DateRangePickerInput__withBorder:focus-within) {
-          border-width: 2px !important;
-          border-color: ${setColor} !important;
-        }
-        :global(.DateRangePickerInput_arrow) {
-          display: ${!hasArrowIcon && "none"};
-        }
-        :global(.DateInput_input) {
-          font-weight: 500 !important;
-          font-size: 15px;
-        }
-        :global(.DayPickerKeyboardShortcuts_show__bottomRight::before) {
-          border-right: 33px solid ${setColor} !important;
-        }
-        :global(.DateInput_input__focused) {
-          border: none;
-        }
-        :global(.CalendarDay__selected_span) {
-          background: ${setColor};
-          color: white;
-          opacity: 0.7;
-          border: 1px solid white;
-        }
-
-        :global(.CalendarDay__selected) {
-          background: ${setColor};
-          color: white;
-          border: 1px double white;
-        }
-
-        :global(.CalendarDay__selected:hover) {
-          background: ${setColor};
-          color: white;
-          border: 1px double white;
-        }
-
-        :global(.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover) {
-          background: ${setColor};
-          opacity: 0.5;
-        }
-
-        :global(.CalendarDay__hovered_span:hover, .CalendarDay__hovered_span) {
-          background: ${setColor};
-          color: white;
-        }
-      `}</style>
-    </div>);
-};
-export default DatePicker;

package/dist/components/date-picker/date-picker.stories.jsx

@@ -1,46 +0,0 @@
-import React, { useState } from "react";
-import "react-dates/initialize";
-import CenterDecorator from "../../utils/center-decorator";
-import DatePicker from "./date-picker";
-import SingleDatePicker from "./single-date-picker";
-import moment from "moment";
-import { Icon } from "../icon";
-export default {
-    title: "DatePicker",
-    decorators: [CenterDecorator],
-};
-export const DatePickerStory = () => {
-    const [startDate, setStartDate] = useState(moment());
-    const [endDate, setEndDate] = useState(null);
-    const [focusedInput, setFocusedInput] = useState(null);
-    return (<DatePicker startDateId="dateStart" endDateId="dateEnd" startDate={startDate} endDate={endDate} setStartDate={setStartDate} setEndDate={setEndDate} focusedInput={focusedInput} setFocusedInput={setFocusedInput}/>);
-};
-DatePickerStory.story = {
-    name: "default",
-};
-export const DatePickerNoIconStory = () => {
-    const [startDate, setStartDate] = useState(moment());
-    const [endDate, setEndDate] = useState(null);
-    const [focusedInput, setFocusedInput] = useState(null);
-    return (<DatePicker startDateId="dateStart" endDateId="dateEnd" startDate={startDate} endDate={endDate} setStartDate={setStartDate} setEndDate={setEndDate} focusedInput={focusedInput} hasArrowIcon={false} setFocusedInput={setFocusedInput}/>);
-};
-DatePickerNoIconStory.story = {
-    name: "no icons",
-};
-export const DatePickerCustomIconsStory = () => {
-    const [startDate, setStartDate] = useState(moment());
-    const [endDate, setEndDate] = useState(null);
-    const [focusedInput, setFocusedInput] = useState(null);
-    return (<DatePicker startDateId="dateStart" endDateId="dateEnd" startDate={startDate} endDate={endDate} setStartDate={setStartDate} setEndDate={setEndDate} focusedInput={focusedInput} setFocusedInput={setFocusedInput} customArrowIcon={<Icon icon="double_arrow"/>} customInputIcon={<Icon icon="av_timer"/>} customCloseIcon={<Icon icon="clear"/>}/>);
-};
-DatePickerCustomIconsStory.story = {
-    name: "custom icons",
-};
-export const SingleDatePickerStory = () => {
-    const [date, setDate] = useState(moment());
-    const [focusedInput, setFocusedInput] = useState();
-    return (<SingleDatePicker date={date} onDateChange={setDate} focused={focusedInput} onFocusChange={setFocusedInput} label="Single date picker" id="date"/>);
-};
-SingleDatePickerStory.story = {
-    name: "single date picker",
-};

package/dist/components/date-picker/index.js

@@ -1,2 +0,0 @@
-export { default as DatePicker } from "./date-picker";
-export { default as SingleDatePicker } from "./single-date-picker";

package/dist/components/date-picker/single-date-picker.jsx

@@ -1,81 +0,0 @@
-import React from "react";
-import { SingleDatePicker } from "react-dates";
-import { useTheme, getColorToken } from "../../theme/theme";
-import { FieldLabel } from "../field-helpers";
-import { Stack } from "../layout";
-const CustomSingleDatePicker = ({ width, color = "primary", onDateChange, onFocusChange, numberOfMonths = 1, error, label, ...rest }) => {
-    const theme = useTheme();
-    const setColor = getColorToken(theme, "foreground", color);
-    return (<div className="calendar-container">
-      <Stack direction="column" gap="0.5rem 0">
-        <div>{label && <FieldLabel required>{label}</FieldLabel>}</div>
-        <SingleDatePicker numberOfMonths={numberOfMonths} onDateChange={onDateChange} onFocusChange={(e) => onFocusChange(e.focused)} {...rest}/>
-      </Stack>
-      <style jsx>{`
-        :global(.SingleDatePicker) {
-          width: ${width};
-        }
-        :global(.SingleDatePickerInput) {
-          width: 100%;
-        }
-        :global(.DateInput) {
-          width: 100%;
-        }
-        .calendar-container {
-          font-family: ${theme.typography.fontFamily.brand};
-        }
-        :global(.SingleDatePickerInput__withBorder) {
-          border-width: 2px !important;
-          border-radius: 4px !important;
-          border-color: ${error && "#b00020"};
-        }
-        :global(.SingleDatePickerInput__withBorder:hover) {
-          border-width: 1px !important;
-          border-color: #000000 !important;
-        }
-        :global(.SingleDatePickerInput__withBorder:focus-within) {
-          border-width: 2px !important;
-          border-color: ${setColor} !important;
-        }
-        :global(.DateInput_input) {
-          font-weight: 500 !important;
-          font-size: 15px;
-        }
-        :global(.DayPickerKeyboardShortcuts_show__bottomRight::before) {
-          border-right: 33px solid ${setColor} !important;
-        }
-        :global(.DateInput_input__focused) {
-          border: none;
-        }
-        :global(.CalendarDay__selected_span) {
-          background: ${setColor};
-          color: white;
-          opacity: 0.7;
-          border: 1px solid white;
-        }
-
-        :global(.CalendarDay__selected) {
-          background: ${setColor};
-          color: white;
-          border: 1px double white;
-        }
-
-        :global(.CalendarDay__selected:hover) {
-          background: ${setColor};
-          color: white;
-          border: 1px double white;
-        }
-
-        :global(.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover) {
-          background: ${setColor};
-          opacity: 0.5;
-        }
-
-        :global(.CalendarDay__hovered_span:hover, .CalendarDay__hovered_span) {
-          background: ${setColor};
-          color: white;
-        }
-      `}</style>
-    </div>);
-};
-export default CustomSingleDatePicker;

package/dist/components/elevation/elevation.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import Box from "../layout/box";
-const Elevation = ({ dp, radius = "4px", children, className, transition, ...res }) => {
-    const scope = css.resolve `
-    .elevation {
-      border-radius: ${radius};
-      overflow: hidden;
-    }
-  `;
-    return (<Box className={classnames("elevation", {
-        "mdc-elevation-transition": transition,
-    }, `mdc-elevation--z${dp ? dp : 0}`, scope.className, className)} {...res}>
-      {children}
-      {scope.styles}
-    </Box>);
-};
-export default Elevation;

package/dist/components/elevation/elevation.stories.jsx

@@ -1,31 +0,0 @@
-import React, { Fragment } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Elevation from "./elevation";
-export default {
-    title: "Elevation",
-    decorators: [CenterDecorator],
-};
-export const ElevationExample = () => {
-    const elevationsArray = [];
-    for (let i = 0; i <= 24; i++) {
-        elevationsArray.push(<Elevation dp={i} transition={true} className="elevation-example">
-        Example {i} dp
-      </Elevation>);
-    }
-    return (<Fragment>
-      <div className="elevate-container">{elevationsArray}</div>
-      <style jsx>{`
-        :global(.elevation-example) {
-          padding: 20px;
-          margin: 20px;
-        }
-        .elevate-container {
-          display: grid;
-          grid-template-columns: auto auto auto auto auto;
-        }
-      `}</style>
-    </Fragment>);
-};
-ElevationExample.story = {
-    name: "default",
-};

package/dist/components/elevation/index.js

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

package/dist/components/field-helpers/field-helper-text.jsx

@@ -1,42 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { useTheme } from "../../theme";
-function FieldHelperText({ hidden, children, error }) {
-    const theme = useTheme();
-    return (<div className={classnames("field-helper-text")}>
-      <p className={classnames({ hidden, error })}>
-        {error ? error : children}
-      </p>
-      <style jsx>{`
-        .field-helper-text {
-          margin-bottom: 4px;
-          display: flex;
-          justify-content: space-between;
-        }
-
-        p {
-          color: rgba(0, 0, 0, 0.6);
-          font-size: 0.75rem;
-          letter-spacing: 0;
-          margin: 0;
-          line-height: 19px;
-          transition: opacity 150ms ease;
-        }
-
-        .hidden {
-          opacity: 0;
-        }
-
-        .error {
-          color: #b00020;
-        }
-      `}</style>
-      <style jsx>{`
-        p {
-          font-weight: 500;
-          font-family: ${theme.typography.fontFamily.brand};
-        }
-      `}</style>
-    </div>);
-}
-export default FieldHelperText;

package/dist/components/field-helpers/field-label.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { useTheme } from "../../theme";
-function FieldLabel({ large, className, children, required, ...rest }) {
-    const theme = useTheme();
-    return (<label className={classnames("field-label", {
-        "field-label--dense": !large,
-    }, className)} {...rest}>
-      {children}
-      {required ? "*" : null}
-      <style jsx>{`
-        .field-label {
-          font-weight: 500;
-          font-family: ${theme.typography.fontFamily.brand};
-          font-size: 0.875rem;
-          margin: 0.5rem 0;
-          display: inline-block;
-          letter-spacing: 0.00937rem;
-          color: rgba(0, 0, 0, 0.6);
-          line-height: 1rem;
-        }
-
-        .field-label--dense {
-          font-size: 0.75rem;
-        }
-      `}</style>
-    </label>);
-}
-export default FieldLabel;

package/dist/components/field-helpers/index.js

@@ -1,2 +0,0 @@
-export { default as FieldLabel } from "./field-label";
-export { default as FieldHelperText } from "./field-helper-text";