@xola/ui-kit 1.4.2

package/src/components/TimePicker/TimePickerPopover.module.scss

@@ -0,0 +1,48 @@
+@import "../../styles/variables.scss";
+
+.timepickerPopover {
+    z-index: 200;
+    width: 500px;
+    box-shadow: 0 0 5px $box-shadow-color;
+}
+
+.minuteContainer {
+    width: 126px;
+    .minutes {
+        width: 126px;
+    }
+}
+
+.hourContainer {
+    width: 334px;
+    .meridian {
+        width: 58px;
+        p {
+            margin-top: 40px;
+        }
+    }
+    .hours {
+        width: 252px;
+    }
+}
+
+.slotButton {
+    margin: 2px;
+    width: 38px !important;
+    height: 38px !important;
+    font-size: 14px;
+    background: white;
+    color: $input-color;
+    outline: none;
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: theme-color("primary");
+        color: white;
+    }
+}
+
+.selected {
+    background-color: theme-color("primary");
+    color: white;
+}

package/src/components/TimePicker/index.js

@@ -0,0 +1,3 @@
+import TimePicker from "./TimePicker";
+
+export { TimePicker };

package/src/icons/CheckIcon.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const CheckIcon = (props) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" {...props}>
+            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M2 7.545l2.727 2.728L12 3" />
+        </svg>
+    );
+};

package/src/icons/TrashIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+export const TrashIcon = (props) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" {...props}>
+            <g stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" clipPath="url(#clip0)">
+                <path d="M1.829 3.324H12.15M8.095 1.85H5.884v0a.737.737 0 00-.738.737v.737h3.687v-.737 0a.737.737 0 00-.738-.737v0zM5.884 9.591V5.905M8.095 9.591V5.905M10.364 11.495v0a.737.737 0 01-.735.677H4.351v0a.737.737 0 01-.735-.677l-.681-8.17h8.11l-.681 8.17z"></path>
+            </g>
+
+            <defs>
+                <clipPath id="clip0">
+                    <path fill="currentColor" d="M0 0H11.796V11.796H0z" transform="translate(1.091 1.113)"></path>
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};

package/src/index.js

@@ -0,0 +1,18 @@
+import "./styles/index.scss";
+
+// Components
+export { Stepper, Step } from "./components/Stepper";
+export { FormInput } from "./components/FormInput";
+export { CountrySelect } from "./components/CountrySelect";
+export { PhoneInput } from "./components/PhoneInput";
+export { MiniStepper } from "./components/MiniStepper";
+export { ProductSelector } from "./components/ProductSelector";
+export { ScheduleEditor, getScheduleSummary } from "./components/ScheduleEditor";
+export { DatePicker, formatDate } from "./components/DatePicker";
+export { TimePicker } from "./components/TimePicker";
+
+// Icons
+export { CheckIcon } from "./icons/CheckIcon";
+export { TrashIcon } from "./icons/TrashIcon";
+
+export * from "reactstrap";

package/src/stories/Button.stories.js

@@ -0,0 +1,66 @@
+import { Button } from "..";
+import React from "react";
+
+export default {
+    title: "Button",
+    component: Button,
+};
+
+export const Default = () => {
+    return <Button>Default</Button>;
+};
+
+export const Colors = () => {
+    return (
+        <div>
+            <Button color="primary">Primary</Button> <Button color="secondary">Secondary</Button>{" "}
+            <Button color="success">Success</Button> <Button color="info">Info</Button>{" "}
+            <Button color="warning">Warning</Button> <Button color="danger">Danger</Button>{" "}
+            <Button color="link">Link</Button>{" "}
+        </div>
+    );
+};
+
+export const Outlined = () => {
+    return (
+        <div>
+            <Button color="primary" outline>
+                Primary
+            </Button>{" "}
+            <Button color="secondary" outline>
+                Secondary
+            </Button>{" "}
+            <Button color="success" outline>
+                Success
+            </Button>{" "}
+            <Button color="info" outline>
+                Info
+            </Button>{" "}
+            <Button color="warning" outline>
+                Warning
+            </Button>{" "}
+            <Button color="danger" outline>
+                Danger
+            </Button>{" "}
+            <Button color="link" outline>
+                Link
+            </Button>
+        </div>
+    );
+};
+
+export const Sizes = () => {
+    return (
+        <div>
+            <Button size="sm" color="primary">
+                Small
+            </Button>{" "}
+            <Button size="md" color="secondary">
+                Medium
+            </Button>{" "}
+            <Button size="lg" color="success">
+                Large
+            </Button>
+        </div>
+    );
+};

package/src/stories/CountrySelect.stories.js

@@ -0,0 +1,18 @@
+import { CountrySelect, FormInput } from "..";
+import React from "react";
+
+export default {
+    title: "CountrySelect",
+};
+
+export const Default = () => {
+    return <CountrySelect />;
+};
+
+export const WithFormInput = () => {
+    return (
+        <FormInput label="Select Country">
+            <CountrySelect />
+        </FormInput>
+    );
+};

package/src/stories/DatePicker.stories.js

@@ -0,0 +1,96 @@
+import React, { Component, useState } from "react";
+import { Fragment } from "react";
+import { DatePicker } from "..";
+
+export default {
+    title: "DatePicker",
+};
+
+export const Calendar = () => {
+    const [selectedValue, setSelectedValue] = useState(new Date("2021-03-17"));
+    const handleChange = (value) => {
+        setSelectedValue(value);
+    };
+    return <DatePicker onChange={handleChange} isDatePicker={false} value={selectedValue} />;
+};
+
+export const CalendarWithMultipleDates = () => {
+    const [selectedDates, setSelectedDates] = useState([
+        new Date("2021-03-01"),
+        new Date("2021-03-14"),
+        new Date("2021-03-20"),
+    ]);
+    const handleChange = (value) => {
+        setSelectedDates([...selectedDates, ...value]);
+    };
+    return <DatePicker onChange={handleChange} isDatePicker={false} value={selectedDates} />;
+};
+
+export const Datepicker = () => {
+    const [selectedValue, setSelectedValue] = useState();
+    const handleChange = (value) => {
+        setSelectedValue(value);
+        console.log(selectedValue);
+    };
+    return (
+        <DatePicker
+            isDatePicker={true}
+            placeholder="Select Date"
+            format="dd MMM, yyyy"
+            value={selectedValue}
+            onChange={(v) => handleChange(v)}
+        />
+    );
+};
+
+export const MultiDatePicker = () => {
+    const [selectedDates, setSelectedDates] = useState();
+    const handleChange = (value) => {
+        setSelectedDates([...value]);
+        console.log(selectedDates);
+    };
+    return (
+        <DatePicker
+            isDatePicker={true}
+            isMultiple={true}
+            placeholder="Select Date"
+            format="dd MMM, yyyy"
+            value={selectedDates}
+            onChange={(v) => handleChange(v)}
+        />
+    );
+};
+
+export const RangePicker = () => {
+    const [range, setRange] = useState({ from: null, to: null });
+    const today = new Date();
+    const handleChange = (value, key) => {
+        let currentRange = { ...range };
+        currentRange[key] = value;
+        setRange(currentRange);
+    };
+    return (
+        <Fragment>
+            <DatePicker
+                isDatePicker={true}
+                placeholder="From"
+                value={range.from}
+                minDate={today}
+                format="MM-dd-yyyy"
+                maxDate={range.to}
+                onChange={(v) => handleChange(v, "from")}
+                name="from"
+            />{" "}
+            untill{" "}
+            <DatePicker
+                isDatePicker={true}
+                placeholder="To"
+                value={range.to}
+                minDate={range.from ? range.from : today}
+                format="MM-dd-yyyy"
+                onChange={(v) => handleChange(v, "to")}
+                name="to"
+            />
+        </Fragment>
+    );
+};

package/src/stories/FormInput.stories.js

@@ -0,0 +1,25 @@
+import { FormInput } from "..";
+import React from "react";
+
+export default {
+    title: "FormInput",
+    // component: Input,
+};
+
+export const Default = () => {
+    return <FormInput label="Name" />;
+};
+
+export const WithError = () => {
+    return <FormInput label="Name" error="is required and the rest of the message is really long" />;
+};
+
+export const Select = () => {
+    return (
+        <FormInput label="Select Number" type="select">
+            <option value="one">One</option>
+            <option value="two">Two</option>
+            <option value="three">Three</option>
+        </FormInput>
+    );
+};

package/src/stories/Forms.stories.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { CustomInput, FormGroup, Input, Label } from "..";
+
+export default {
+    title: "Form",
+};
+
+export const Default = () => {
+    return (
+        <FormGroup>
+            <Label>Name</Label>
+            <Input />
+        </FormGroup>
+    );
+};
+
+export const Checkboxes = () => {
+    return (
+        <div>
+            <FormGroup check>
+                <Label check>
+                    <Input type="checkbox" /> Native
+                </Label>
+            </FormGroup>
+
+            <CustomInput type="checkbox" id="checkbox-example" label="Custom" />
+        </div>
+    );
+};
+
+export const Radios = () => {
+    return (
+        <div>
+            <FormGroup check>
+                <Label check>
+                    <Input type="radio" /> Native
+                </Label>
+            </FormGroup>
+
+            <CustomInput type="radio" id="radio-example" label="Custom" />
+        </div>
+    );
+};

package/src/stories/Icons.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { CheckIcon } from "..";
+import { TrashIcon } from "..";
+
+export default {
+    title: "Icons",
+};
+
+export const Default = () => {
+    return (
+        <div>
+            <div>
+                CheckIcon <CheckIcon />
+            </div>
+
+            <div>
+                TrashIcon <TrashIcon />
+            </div>
+        </div>
+    );
+};

package/src/stories/MiniStepper.stories.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { MiniStepper } from "..";
+
+export default {
+    title: "MiniStepper",
+    component: MiniStepper,
+};
+
+export const Default = () => {
+    return <MiniStepper count={10} value={3} />;
+};
+
+export const Resized = () => {
+    return <MiniStepper count={10} value={3} size={30} />;
+};

package/src/stories/PhoneInput.stories.js

@@ -0,0 +1,26 @@
+import { PhoneInput, FormInput } from "..";
+import React, { useState } from "react";
+
+export default {
+    title: "PhoneInput",
+};
+
+export const Default = () => {
+    const [value, setValue] = useState("");
+    return <PhoneInput onChange={setValue} value={value} />;
+};
+
+export const WithDefaultCountry = () => {
+    const [value, setValue] = useState("+1");
+    return <PhoneInput onChange={setValue} value={value} defaultCountry="US" />;
+};
+
+export const WithFormInput = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <FormInput label="Select Country">
+            <PhoneInput onChange={setValue} value={value} />
+        </FormInput>
+    );
+};

package/src/stories/ProductSelector.stories.js

@@ -0,0 +1,42 @@
+import { ProductSelector } from "..";
+import React, { useState } from "react";
+import products from "../values/products";
+
+export default {
+    title: "ProductSelector",
+};
+
+export const Default = () => {
+    const onChange = (selectedProducts) => {
+        console.log("Selected Products are", selectedProducts);
+    };
+    return <ProductSelector onChange={onChange} products={products} />;
+};
+
+export const withValues = () => {
+    const [selectedProducts, setSelectedProducts] = useState([
+        {
+            id: "1",
+            name: "Bird Watching Experience",
+            seller: { id: "1" },
+            photo: { src: "https://placeimg.com/140/105/animals" },
+        },
+        {
+            id: "2",
+            name: "1 Hour deep dive Scuba diving",
+            seller: { id: "2" },
+            photo: { src: "https://placeimg.com/140/105/nature" },
+        },
+        {
+            id: "3",
+            name: "Paragliding Experience",
+            seller: { id: "1" },
+            photo: { src: "https://placeimg.com/140/105/nature" },
+        },
+    ]);
+    const onChange = (selectedProducts) => {
+        console.log("Selected Products are", selectedProducts);
+        setSelectedProducts(selectedProducts);
+    };
+    return <ProductSelector onChange={onChange} value={selectedProducts} products={products} />;
+};

package/src/stories/ScheduleEditor.stories.js

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { ScheduleEditor } from "..";
+
+export default {
+    title: "ScheduleEditor",
+};
+
+export const Default = () => {
+    const handleChange = (schedule) => {
+        console.log("Updated Schedule", schedule);
+    };
+    return <ScheduleEditor onChange={handleChange} />;
+};
+
+export const WithValues = () => {
+    const [schedule, setSchedule] = useState({
+        name: "Every Thursday",
+        type: "available",
+        repeat: "custom",
+        days: [4],
+        dates: ["2021-04-14", "2021-03-14", "2021-03-21"],
+        departure: "fixed",
+        priceDelta: 60,
+        priceDeltaType: "increase",
+        times: [1235, 855],
+        timeRanges: [{ startTime: 600, endTime: 1645 }, { endTime: 2240 }],
+        start: new Date("2021-03-18"),
+        end: new Date("2021-03-25"),
+    });
+
+    const handleChange = (schedule) => {
+        console.log("Updated Schedule in STORIES", schedule);
+        setSchedule(schedule);
+    };
+
+    return <ScheduleEditor value={schedule} price={200} onChange={handleChange} />;
+};

package/src/stories/Stepper.stories.js

@@ -0,0 +1,36 @@
+import { Stepper, Step } from "..";
+import React from "react";
+
+export default {
+    title: "Stepper",
+    component: Stepper,
+};
+
+export const Default = () => {
+    return (
+        <Stepper>
+            <Step label="Basic Info" current>
+                1
+            </Step>
+
+            <Step label="Feature Menu">2</Step>
+            <Step label="Use Xola">3</Step>
+        </Stepper>
+    );
+};
+
+export const Resized = () => {
+    return (
+        <Stepper size={40}>
+            <Step label="Basic Info" done>
+                1
+            </Step>
+
+            <Step label="Feature Menu" current>
+                2
+            </Step>
+
+            <Step label="Use Xola">3</Step>
+        </Stepper>
+    );
+};

package/src/stories/TimePicker.stories.js

@@ -0,0 +1,14 @@
+import React, { Fragment } from "react";
+import { TimePicker } from "..";
+
+export default {
+    title: "TimePicker",
+};
+
+export const Default = () => {
+    return <TimePicker onChange={(value) => console.log(value)} />;
+};
+
+export const WithValue = () => {
+    return <TimePicker value={1825} onChange={(value) => console.log(value)} />;
+};

package/src/stories/Typography.stories.js

@@ -0,0 +1,18 @@
+import React, { Fragment } from "react";
+
+export default {
+    title: "Typography",
+};
+
+export const Default = () => {
+    return (
+        <Fragment>
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <h4>Heading 4</h4>
+            <h5>Heading 5</h5>
+            <h6>Heading 6</h6>
+        </Fragment>
+    );
+};

package/src/styles/custom.scss

@@ -0,0 +1,60 @@
+@import "./variables.scss";
+
+// Removes the "x" icon from invalid form inputs.
+.form-control.is-invalid {
+    background-image: none;
+    padding-right: $input-padding-x;
+}
+
+.cover {
+    object-fit: cover;
+}
+
+.bg-cover {
+    background-size: cover;
+}
+
+.form-group label {
+    font-size: 0.75rem;
+    font-weight: bold;
+    margin-bottom: 0.25rem;
+}
+
+.form-check-label,
+.custom-control-label {
+    font-size: 0.875rem !important;
+    font-weight: normal !important;
+    margin-bottom: 0 !important;
+    color: $secondary;
+}
+
+.form-check-label .form-check-input {
+    margin-top: 0.25rem; // To compensate for smaller base font size.
+}
+
+.custom-control-label::before,
+.custom-control-label::after {
+    top: 0.1rem;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.modal-header {
+    border-bottom: none;
+    justify-content: center;
+
+    .modal-title {
+        flex: 1;
+        text-align: center;
+    }
+
+    .close {
+        margin-left: 0;
+    }
+}
+
+.modal-footer {
+    border-top: none;
+}

package/src/styles/index.scss

@@ -0,0 +1,3 @@
+@import "./variables.scss";
+@import "~bootstrap/scss/bootstrap";
+@import "./custom.scss";

package/src/styles/variables.scss

@@ -0,0 +1,43 @@
+$font-size-base: 0.875rem; // ~14px
+
+// Base body color.
+$body-color: #222324;
+$dark: #222324;
+$light: #f0f2f4;
+
+// Theme colors.
+$theme-colors: (
+    "primary": #1352c6,
+    "secondary": #505254,
+    "success": #27ce70,
+    "info": #3fe2ee,
+    "danger": #ff5a5a,
+    "warning": #ffc03d,
+);
+
+// Fonts.
+$font-family-sans-serif: "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+// Fixes button label contrast issue when theme colors are changed.
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light".
+// Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 200;
+
+// Border radius.
+$border-color: #d3d3d3;
+$border-radius: 0.25rem; // 4px
+$border-radius-lg: 0.375rem; // 6px
+$border-radius-sm: 0.1875rem; // 3px
+
+//Hover
+$hover-background: #f2f2f2;
+
+//Input Border
+$input-border: #ced4da;
+$input-color: #495057;
+
+//Box Shadow
+$box-shadow-color: #8798ad;
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";