@soul-refiner/design-system 0.2.88 → 0.2.90

package/dist/components/actions/dropdown/dropdown.d.ts

@@ -15,9 +15,13 @@ export interface DropdownProps extends NativeProps, React.PropsWithChildren {
     options?: (Omit<DropdownOptionProps, 'selected' | 'onClick'> | 'break')[];
     sx?: string;
     trigger: React.ReactElement;
+    containerSx?: string;
+    additionalOptions?: Omit<DropdownOptionProps, 'selected' | 'onClick'>[];
+    additionalOnChange?: (value: string) => void;
+    defaultAdditionalValue?: string;
 }
 declare const Dropdown: {
-    ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, ...rest }: DropdownProps): React.JSX.Element;
+    ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, ...rest }: DropdownProps): React.JSX.Element;
     Option: {
         ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }: DropdownOptionProps): React.JSX.Element;
         displayName: string;

package/dist/components/actions/dropdown/dropdown.js

@@ -2,12 +2,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box, Checkbox, P } from '../../';
-const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true, defaultValue = '', disabled = false, hasArrow, maintainState = true, multiple, offset = [0, 16], onChange, open: openDirection = 'right', options, sx, trigger, ...rest }) => {
+const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true, defaultValue = '', disabled = false, hasArrow, maintainState = true, multiple, offset = [0, 16], onChange, open: openDirection = 'right', options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, ...rest }) => {
     const id = React.useId();
     const wrapperRef = React.useRef(null);
     const optionsRef = React.useRef(null);
     const [open, setOpen] = React.useState(false);
     const [selected, setSelected] = React.useState(() => defaultValue ? defaultValue : multiple ? [] : '');
+    const [additionalSelected, setAdditionalSelected] = React.useState(defaultAdditionalValue || '');
     React.useEffect(() => {
         if (disabled) {
             setOpen(false);
@@ -57,6 +58,18 @@ const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true
             onChange(event);
     };
     const handleChange = multiple ? handleChangeMultiple : handleChangeSingle;
+    const handleAdditionalChange = (event) => {
+        event.stopPropagation();
+        const value = event.target.getAttribute('data-value') ?? '';
+        if (additionalSelected !== value) {
+            setAdditionalSelected(value);
+        }
+        else {
+            setAdditionalSelected('');
+        }
+        if (additionalOnChange)
+            additionalOnChange(value);
+    };
     const isSelected = (value) => maintainState && (multiple ? selected.includes(value) : value === selected);
     /**
      * allow for the API to accept children as options
@@ -91,7 +104,10 @@ const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true
                 trigger.type?.name !== 'Button')
             ? { onClick: handleOpen }
             : { isDropdownOpen: open, onClick: handleOpen }),
-        open && (React.createElement(Container, { "$hasArrow": hasArrow, "$offset": offset, "$openDirection": openDirection, ref: optionsRef }, dropdownOptions))));
+        open && (React.createElement(Container, { "$hasArrow": hasArrow, "$offset": offset, "$openDirection": openDirection, ref: optionsRef, "$sx": containerSx },
+            React.createElement("div", { style: { display: 'flex' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, dropdownOptions),
+                !!additionalOptions?.length && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, additionalOptions.map((additionalOption) => (React.createElement(Option, { key: additionalOption.value, onClick: handleAdditionalChange, selected: additionalSelected === additionalOption.value, label: additionalOption.label, value: additionalOption.value }))))))))));
 };
 const Wrapper = styled.div `
   position: relative;
@@ -109,6 +125,7 @@ const Container = styled.div `
   cursor: pointer;
   box-shadow: var(--elevation-2);
   border-radius: 8px;
+  overflow: scroll;
 
   & > div:first-of-type {
     border-radius: 8px 8px 0px 0px;
@@ -118,6 +135,8 @@ const Container = styled.div `
     border-radius: 0px 0px 8px 8px;
   }
 
+  ${({ $sx }) => ($sx ? $sx : '')}
+
   ${({ $openDirection }) => ($openDirection === 'left' ? 'right: 100%;' : '')}
 
   ${({ $hasArrow, $offset }) => $hasArrow

package/dist/components/input/calendar/calendar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CalendarInputProps {
+    selectedDate: Date;
+    onSelect: (value: Date) => void;
+}
+export declare const CalendarInput: ({ selectedDate, onSelect: parentOnSelect, }: CalendarInputProps) => React.JSX.Element;

package/dist/components/input/calendar/calendar.js

@@ -0,0 +1,250 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { MONTHS, WEEKDAYS } from '../../../common';
+import { Button, P } from '../..';
+import { ChevronLeft, ChevronRight } from '../../../icons';
+import { buildCalendar, zeroPad } from '../../../utils';
+import { Icons } from 'index';
+export const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, }) => {
+    const today = new Date();
+    today.setHours(0);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    today.setMilliseconds(0);
+    const firstOfMonth = new Date(today);
+    firstOfMonth.setDate(1);
+    const pickerRef = React.useRef(null);
+    const [show, setShow] = React.useState(false);
+    const [displayDate, setDisplayDate] = React.useState(() => selectedDate.toDateString());
+    const [componentSelectedDate, setComponentSelectedDate] = React.useState(() => selectedDate.toDateString());
+    React.useEffect(() => {
+        setComponentSelectedDate(selectedDate.toDateString());
+    }, [selectedDate]);
+    const handleShow = () => setShow((prev) => !prev);
+    const handleBlur = (event) => {
+        if (pickerRef?.current &&
+            !pickerRef?.current?.contains(event.relatedTarget)) {
+            setShow(false);
+        }
+    };
+    const handlePreviousMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate.toDateString();
+        });
+    };
+    const handleNextMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate.toDateString();
+        });
+    };
+    const onSelect = (newDate) => {
+        setComponentSelectedDate(newDate.toDateString());
+    };
+    const handleApply = () => {
+        parentOnSelect(new Date(componentSelectedDate));
+        setShow(false);
+    };
+    const handleClick = (event) => {
+        const target = event.target;
+        const day = target.getAttribute('data-day');
+        const month = target.getAttribute('data-month');
+        const year = target.getAttribute('data-year');
+        onSelect(new Date(`${month}-${day}-${year}`));
+    };
+    const handleCancel = () => {
+        setComponentSelectedDate(selectedDate.toDateString());
+        setShow(false);
+    };
+    const calendar = buildCalendar(new Date(displayDate).getMonth() + 1, new Date(displayDate).getFullYear());
+    const [month, day, year] = selectedDate
+        .toLocaleString('default', {
+        year: '2-digit',
+        month: '2-digit',
+        day: '2-digit',
+    })
+        .split('/');
+    return (React.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
+        React.createElement(InputWrapper, null,
+            React.createElement(Input, { value: `${month} / ${day} / ${year}`, onFocus: handleShow, style: { letterSpacing: '1px', fontSize: '16px' }, readOnly: true }),
+            React.createElement(Icons.Calendar, null)),
+        show && (React.createElement(DateSelector, null,
+            React.createElement(InnerWrapper, null,
+                React.createElement("div", null,
+                    React.createElement(MonthBar, null,
+                        React.createElement(Arrow, { onClick: handlePreviousMonth },
+                            React.createElement(ChevronLeft, { size: 24 })),
+                        React.createElement(P, null, `${Object.values(MONTHS)[Math.max(0, Math.min(new Date(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
+                        React.createElement(Arrow, { onClick: handleNextMonth },
+                            React.createElement(ChevronRight, { size: 24 }))),
+                    React.createElement(WeekdayWrapper, null, Object.values(WEEKDAYS).map((day) => (React.createElement(P, { key: day }, day)))),
+                    React.createElement(Calendar, null, calendar.map((week, index) => {
+                        return (React.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
+                            const isCurrMonth = day[1] !==
+                                zeroPad(new Date(displayDate).getMonth() + 1, 2);
+                            const dateObj = new Date(`${day[1]}-${day[2]}-${day[0]}`);
+                            const isToday = Math.abs(dateObj.getTime() - today.getTime()) < 0.5;
+                            const isSelected = new Date(componentSelectedDate).getTime() ===
+                                dateObj.getTime();
+                            return (React.createElement(Day, { className: `${isToday ? 'today' : ''}${isCurrMonth ? ' not-current' : ''}${isSelected ? ' selected' : ''}`.trim(), "data-day": day[2], "data-month": day[1], "data-year": day[0], key: 'day-' + dayIndex.toString(36), onClick: handleClick }, `${day[2]}`.startsWith('0')
+                                ? `${day[2]}`[1]
+                                : day[2]));
+                        })));
+                    })),
+                    React.createElement(BottomWrapper, null,
+                        React.createElement(Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
+                        React.createElement(Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
+};
+const Wrapper = styled.div `
+  position: relative;
+  width: fit-content;
+  font-family: var(--font-inter);
+`;
+const DateSelector = styled.div `
+  transform: translateY(26px);
+  position: absolute;
+  z-index: 5;
+  background-color: #ffffff;
+  border-radius: 25px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+`;
+const InnerWrapper = styled.div `
+  display: flex;
+  gap: 31px;
+  padding: 30px;
+  position: relative;
+  border-radius: 25px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 24px;
+    height: 24px;
+    top: -12px;
+    left: 48px;
+    background-color: #ffffff;
+    transform: rotate(45deg);
+    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
+  }
+`;
+const MonthBar = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  user-select: none;
+`;
+const Arrow = styled.button `
+  appearance: none;
+  border: none;
+  outline: none;
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--color-primary-blue-2);
+    border-color: #ffffff;
+    svg {
+      fill: #ffffff;
+    }
+  }
+`;
+const WeekdayWrapper = styled.div `
+  display: flex;
+  gap: 32px;
+  user-select: none;
+`;
+const Calendar = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin: 32px 0px;
+  user-select: none;
+`;
+const Week = styled.div `
+  display: flex;
+  gap: 32px;
+  border-radius: 24px;
+`;
+const Day = styled.button `
+  outline: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+
+  &.today {
+    color: var(--color-primary-blue-2);
+    font-weight: 600;
+  }
+
+  &.not-current {
+    color: var(--color-grey-9);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &.selected {
+    background-color: var(--color-primary-blue-2);
+    color: #ffffff;
+
+    &.not-current {
+      background-color: var(--color-blue-9);
+    }
+  }
+`;
+const BottomWrapper = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+`;
+const Input = styled.input `
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+`;
+const InputWrapper = styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: var(--color-blue-10);
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+`;

package/dist/components/input/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { CalendarInput } from './calendar';
+export type { CalendarInputProps } from './calendar';

package/dist/components/input/calendar/index.js

@@ -0,0 +1 @@
+export { CalendarInput } from './calendar';

package/dist/components/input/index.d.ts

@@ -14,3 +14,7 @@ export { TextArea } from './text_area';
 export type { TextAreaProps } from './text_area';
 export { TextInput } from './text_input';
 export type { TextInputProps } from './text_input';
+export { CalendarInput } from './calendar';
+export type { CalendarInputProps } from './calendar';
+export { Time } from './time';
+export type { TimeProps } from './time';

package/dist/components/input/index.js

@@ -6,3 +6,5 @@ export { Search } from './search';
 export { Select } from './select';
 export { TextArea } from './text_area';
 export { TextInput } from './text_input';
+export { CalendarInput } from './calendar';
+export { Time } from './time';

package/dist/components/input/time/index.d.ts

@@ -0,0 +1,2 @@
+export { Time } from './time';
+export type { TimeProps } from './time';

package/dist/components/input/time/index.js

@@ -0,0 +1 @@
+export { Time } from './time';

package/dist/components/input/time/time.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type TimeProps = {
+    selectedTime: string;
+    setTime: (value: string) => void;
+    selectedPeriod: string;
+    setPeriod: (value: string) => void;
+};
+export declare const Time: ({ selectedTime, setTime, selectedPeriod, setPeriod, }: TimeProps) => React.JSX.Element;

package/dist/components/input/time/time.js

@@ -0,0 +1,69 @@
+'use client';
+import { Dropdown } from 'components/actions/dropdown/dropdown';
+import { Icons } from 'index';
+import React from 'react';
+import styled from 'styled-components';
+export const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
+    const hours = React.useMemo(() => {
+        const hours = [];
+        for (let i = 1; i <= 12; i++) {
+            hours.push(`${i}:00`);
+            hours.push(`${i}:15`);
+            hours.push(`${i}:30`);
+            hours.push(`${i}:45`);
+        }
+        return hours;
+    }, []);
+    return (React.createElement(Dropdown, { options: hours.map((hour) => ({
+            value: hour,
+            label: hour,
+        })), containerSx: "height: 440px;", trigger: React.createElement(InputWrapper, null,
+            React.createElement(Input, { readOnly: true, value: `${selectedTime} ${selectedPeriod}` }),
+            React.createElement(Icons.Clock, null)), additionalOptions: [
+            {
+                label: 'AM',
+                value: 'AM',
+            },
+            {
+                label: 'PM',
+                value: 'PM',
+            },
+        ], onChange: (event) => {
+            const value = event.target.getAttribute('data-value') ?? '';
+            setTime(value);
+        }, additionalOnChange: setPeriod, defaultValue: selectedTime, defaultAdditionalValue: selectedPeriod }));
+};
+const InputWrapper = styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: var(--color-blue-10);
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+`;
+const Input = styled.input `
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.88",
+  "version": "0.2.90",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {