@mycause/ui 0.0.0-c7de8cef → 0.0.0-c7f1270a

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/comment-section/comment-section.jsx

@@ -1,95 +0,0 @@
-import React, { Fragment } from "react";
-import { Elevation } from "../elevation";
-import { Avatar } from "../avatar";
-import { Grid, Flex } from "../layout";
-import { Icon } from "../icon";
-import { Button } from "../button";
-import { Text } from "../text";
-const CommentSection = ({ comments, maxWidth, title, dissableCount, showMore, likeCall, }) => {
-    const checkLastElement = (key, itemLength) => {
-        return key + 1 < itemLength;
-    };
-    return (<Fragment>
-      <Elevation dp={5} className="comment-section-main">
-        <div className="comment-section-header">
-          <Flex direction="row">
-            <div style={{ paddingRight: "10px" }}>
-              <Text h3 color="primary">
-                {title}
-              </Text>
-            </div>
-            {!dissableCount && <Button raised={true}>{comments.length}</Button>}
-          </Flex>
-        </div>
-        <hr style={{ opacity: "0.3" }}/>
-        {comments.map((res, key) => {
-        return (<div key={res.userId}>
-              <Grid className="comment-grid-custom" columns="52px auto" gap="1rem">
-                <Avatar name="Profile Image" src={res.profileImage}/>
-                <div>
-                  <Grid columns="auto 100px 40px" gap="0.5rem">
-                    <Text h4>{res.username}</Text>
-                    <Text p bold color="primary">
-                      ${res.donation}
-                    </Text>
-                    <div onClick={() => likeCall && likeCall(res)}>
-                      <Icon className="comment-icon" color="primary" icon={res.liked ? "favorite" : "favorite_border"}/>
-                    </div>
-                  </Grid>
-                  <div style={{ padding: "15px 15px 0px 0px" }}>
-                    <Text p>{res.comment}</Text>
-                  </div>
-                </div>
-              </Grid>
-              {res.subComment && (<div style={{ width: "80%", margin: "auto" }}>
-                  <hr style={{ opacity: "0.3" }}/>
-                  {res.subComment.map((subRes, key) => {
-            return (<div key={subRes.userId}>
-                        <Grid className="comment-grid-custom" columns="52px auto" gap="1rem">
-                          <Avatar name="Profile Image" src={subRes.profileImage}/>
-                          <Grid rows="auto" gap="0.5rem">
-                            <Text h5>{subRes.username}</Text>
-                            <Text p>{subRes.comment}</Text>
-                          </Grid>
-                        </Grid>
-                        {checkLastElement(key, res.subComment ? res.subComment.length : 0) && <hr style={{ opacity: "0.3" }}/>}
-                      </div>);
-        })}
-                </div>)}
-              {checkLastElement(key, comments.length) && (<hr style={{ opacity: "0.3" }}/>)}
-            </div>);
-    })}
-        {showMore && (<div className="comment-section-footer">
-            <hr style={{ opacity: "0.3" }}/>
-            <Button onClick={showMore}>
-              <Flex direction="row">
-                <Text h4 color={{ foreground: "#626263", background: "#626263" }}>
-                  Show More
-                </Text>{" "}
-                <Icon icon="keyboard_arrow_down"/>
-              </Flex>
-            </Button>
-          </div>)}
-      </Elevation>
-      <style jsx>{`
-        :global(.comment-section-main) {
-          padding: 20px;
-          max-width: ${maxWidth ? maxWidth : "300px"};
-          width: 100%;
-        }
-        :global(.comment-grid-custom, .comment-section-header) {
-          padding: 15px 0px 15px 0px;
-        }
-        :global(.comment-icon) {
-          cursor: pointer;
-        }
-        .comment-section-footer {
-          text-align: center;
-        }
-        .profile-icon {
-          width: 40px;
-        }
-      `}</style>
-    </Fragment>);
-};
-export default CommentSection;

package/dist/components/comment-section/comment-section.stories.jsx

@@ -1,97 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import CommentSection from "./comment-section";
-import nanoid from "nanoid";
-import logo from "../list/causes-icon.svg";
-export default {
-    title: "Comment Section",
-    decorators: [CenterDecorator],
-};
-export const CommentSectionStory = () => {
-    let [comments, setComments] = useState([
-        {
-            userId: 1233323,
-            profileImage: logo,
-            username: "User",
-            liked: true,
-            donation: 100,
-            comment: "Lorem ispum pro nubis la .",
-        },
-        {
-            userId: 675342,
-            profileImage: logo,
-            username: "User",
-            liked: true,
-            donation: 100,
-        },
-        {
-            userId: 991233,
-            profileImage: logo,
-            username: "User",
-            donation: 400,
-            comment: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.",
-            liked: true,
-            subComment: [
-                {
-                    userId: 679380,
-                    profileImage: logo,
-                    username: "Sub User",
-                    comment: "Lorem ispum pro nubis la.",
-                    liked: false,
-                },
-                {
-                    userId: 7454533,
-                    profileImage: logo,
-                    username: "Sub User",
-                    comment: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.",
-                    liked: true,
-                },
-            ],
-        },
-        {
-            userId: 777753,
-            profileImage: logo,
-            username: "User",
-            liked: false,
-            donation: 16,
-            comment: "Lorem ispum pro nubis la.",
-        },
-        {
-            userId: 756453,
-            profileImage: logo,
-            username: "User",
-            liked: false,
-            donation: 1000,
-            comment: "Lorem ispum pro nubis la.",
-        },
-    ]);
-    const handleLikeClick = (event) => {
-        setComments(comments.map(res => {
-            if (res.userId == event.userId) {
-                return {
-                    ...res,
-                    liked: !res.liked,
-                };
-            }
-            return res;
-        }));
-    };
-    const handleShowMore = () => {
-        let userId = nanoid();
-        setComments([
-            ...comments,
-            {
-                userId,
-                profileImage: logo,
-                username: "User",
-                liked: false,
-                donation: 100,
-                comment: "Lorem ispum pro nubis la.",
-            },
-        ]);
-    };
-    return (<CommentSection maxWidth={"600px"} title="Comment Component" showMore={handleShowMore} likeCall={handleLikeClick} comments={comments}/>);
-};
-CommentSectionStory.story = {
-    name: "default",
-};

package/dist/components/comment-section/index.js

@@ -1 +0,0 @@
-export { default as CommentsSection } from "./comment-section";

package/dist/components/cropper/cropper.jsx

@@ -1,10 +0,0 @@
-import React, { useRef } from "react";
-import ReactCropper from "react-cropper";
-const Cropper = ({ image, aspectRatio, cropImage, autoCropArea = 1, ...res }) => {
-    const cropperRef = useRef(null);
-    const crop = () => {
-        cropImage(cropperRef.current.getCroppedCanvas().toDataURL());
-    };
-    return (<ReactCropper ref={cropperRef} src={image} aspectRatio={aspectRatio} crop={crop} autoCropArea={autoCropArea} {...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";