@soul-refiner/design-system 0.1.28 → 0.1.29

package/dist/components/input/date/date.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DatePicker } from './date';
+const meta = {
+    title: 'Input/Date Picker',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = (args) => {
+    const [startDate, setStartDate] = React.useState(new Date('16 June 2023').toISOString());
+    const [endDate, setEndDate] = React.useState(new Date('16 June 2023').toISOString());
+    const handleSelect = ({ type, value, }) => {
+        if (type === 'start') {
+            const newStartDate = new Date(value);
+            newStartDate.setHours(0, 0, 0, 0);
+            setStartDate(newStartDate.toISOString());
+        }
+        else {
+            const newEndDate = new Date(value);
+            newEndDate.setHours(23, 59, 59, 999);
+            setEndDate(newEndDate.toISOString());
+        }
+    };
+    return (React.createElement(DatePicker, { onSelect: handleSelect, startDate: new Date(startDate), endDate: new Date(endDate), ...args }));
+};
+export const Default = Story.bind({});
+Default.args = {
+    label: 'Label',
+};
+export default meta;

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

@@ -0,0 +1 @@
+export { DatePicker } from './date';

package/dist/components/input/filter/filter.js

@@ -0,0 +1,194 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { P } from 'components';
+import { ChevronDown, ChevronUp } from 'icons';
+import { Styles } from 'common';
+const Filter = ({ closeOnBlur = true, children, disabled, graphic, label, sx, triggerType, value, }) => {
+    const wrapperRef = React.useRef(null);
+    const optionsRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    React.useEffect(() => {
+        if (disabled) {
+            setOpen(false);
+        }
+    }, [disabled]);
+    const handleOpen = () => {
+        if (disabled) {
+            return;
+        }
+        setOpen((prev) => !prev);
+    };
+    const handleBlur = (event) => {
+        if (closeOnBlur &&
+            wrapperRef?.current &&
+            !wrapperRef?.current?.contains(event.relatedTarget)) {
+            setOpen(false);
+        }
+    };
+    return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
+        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, label: label, onClick: handleOpen, open: open, type: triggerType, value: value }),
+        open && React.createElement(Container, { ref: optionsRef }, children)));
+};
+const Wrapper = styled.div `
+  position: relative;
+  display: block;
+  outline: none;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Container = styled.div `
+  position: absolute;
+  width: max-content;
+  z-index: 100;
+  outline: none;
+`;
+/********************************************************
+ *  Triggers
+ */
+const textProps = {
+    as: 'span',
+    $fontSize: 14,
+    $lineHeight: 20,
+};
+const wrapperProps = {
+    $align: 'center',
+    $dir: 'row',
+    $gap: 16,
+};
+const FilterTrigger = ({ disabled, graphic, label, onClick, open, type, value, }) => {
+    if (type === 'pill') {
+        return (React.createElement(Pill, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            graphic,
+            React.createElement(P, { ...textProps }, value),
+            !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
+    }
+    if (type === 'labeled') {
+        return (React.createElement(Labeled, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            React.createElement(P, { ...textProps }, label),
+            React.createElement(LabelSeparator, null),
+            React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true, ...textProps }, value),
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    if (type === 'avatar') {
+        return (React.createElement(Avatar, { "$align": "center", "$dir": "row", "$gap": 8, disabled: disabled, onClick: onClick },
+            graphic,
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    if (type === 'text') {
+        return (React.createElement(Text, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            React.createElement(P, { "$color": "grey-4", "$semiBold": true, ...textProps },
+                label,
+                ":"),
+            React.createElement(P, { "$color": "primary-blue-2", "$semiBold": true, className: "filter-trigger-value", ...textProps }, value),
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    return (React.createElement(Outlined, { disabled: disabled, onClick: onClick, ...wrapperProps },
+        graphic,
+        React.createElement(P, { ...textProps }, value),
+        !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
+};
+Filter.Trigger = FilterTrigger;
+FilterTrigger.displayName = 'Filter.Trigger';
+const sharedStyles = css `
+  display: flex;
+  padding: 10px 16px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+
+  &:disabled {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-8);
+    pointer-events: none;
+
+    & > * {
+      color: var(--color-grey-7);
+      fill: var(--color-grey-7);
+    }
+  }
+`;
+const Outlined = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  border: 1px solid var(--color-grey-8);
+  border-radius: 8px;
+  background-color: var(--color-white);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+`;
+const Pill = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  border-radius: 24px;
+  background-color: var(--color-primary-blue-4);
+
+  & > * {
+    color: var(--color-primary-blue-2);
+    fill: currentColor;
+
+    &:hover {
+      color: var(--color-primary-blue-1);
+    }
+  }
+`;
+const Labeled = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  border-radius: 24px;
+  border: 1px solid var(--color-grey-8);
+  background-color: var(--color-white);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+`;
+const LabelSeparator = styled.div `
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-8);
+`;
+const Avatar = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  padding: 4px 16px;
+  border-radius: 32px;
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:active {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    img {
+      opacity: 0.5;
+    }
+  }
+`;
+const Text = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  gap: 8px;
+  background-color: transparent;
+  border-radius: 32px;
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:active {
+    & > .filter-trigger-value {
+      color: var(--color-primary-blue-0);
+    }
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+`;
+export { Filter };

package/dist/components/input/filter/filter.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Filter } from './filter';
+import { Avatar } from 'components';
+import { Funnel } from 'icons';
+const meta = {
+    title: 'Input/Filter',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = ({ hasIcon, triggerType, ...args }) => {
+    return (React.createElement(Filter, { graphic: triggerType === 'avatar' ? (React.createElement(Avatar, { image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 24 })) : hasIcon ? (React.createElement(Funnel, null)) : undefined, triggerType: triggerType, ...args },
+        React.createElement("div", null, "hello")));
+};
+export const Default = Story.bind({});
+Default.args = {
+    disabled: false,
+    hasIcon: false,
+    label: 'Category Name',
+    triggerType: 'outlined',
+    value: 'Outlined Filters',
+};
+Default.argTypes = {
+    triggerType: {
+        type: 'string',
+        options: ['outlined', 'pill', 'labeled', 'avatar', 'text'],
+        control: 'select',
+    },
+};
+export default meta;

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

@@ -0,0 +1 @@
+export { Filter } from './filter';

package/dist/components/input/index.js

@@ -0,0 +1,5 @@
+export { Checkbox } from './checkbox';
+export { DatePicker } from './date';
+export { Filter } from './filter';
+export { Radio } from './radio';
+export { Search } from './search';

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

@@ -0,0 +1 @@
+export { Radio } from './radio';

package/dist/components/input/radio/radio.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, P } from 'components';
+const Radio = ({ checked = false, disabled, label, onChange, reversed, sx, value, ...rest }) => {
+    const handleChange = (event) => {
+        event.stopPropagation();
+        onChange && onChange(event);
+    };
+    return (React.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx },
+        React.createElement(Input, { checked: checked, disabled: disabled, onChange: handleChange, type: "radio", value: value, ...rest }),
+        React.createElement(P, { as: "span" }, label)));
+};
+const Label = styled.label `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    & > * {
+      color: var(--color-grey-7);
+    }`
+    : `
+    cursor: pointer;
+    &:hover {
+      input {
+        border-color: var(--color-primary-blue-2);
+      }
+    }`}
+  flex-direction: ${({ $reversed }) => ($reversed ? 'row-reverse' : 'row')};
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Input = styled.input `
+  appearance: none;
+  position: relative;
+  height: 20px;
+  width: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-8);
+  cursor: pointer;
+  border-radius: 50%;
+
+  &:checked {
+    border-color: var(--color-primary-blue-2);
+    &::after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  &:disabled {
+    &:checked {
+      border-color: var(--color-grey-8);
+      &::after {
+        background-color: var(--color-grey-7);
+      }
+    }
+  }
+`;
+const RadioGroup = ({ children, name, ...rest }) => {
+    return (React.createElement(Box, { ...rest }, React.Children.map(children, (child) => {
+        if (React.isValidElement(child))
+            return React.createElement(Radio, { key: child.key, name: name, ...child.props });
+    })));
+};
+Radio.Group = RadioGroup;
+RadioGroup.displayName = 'Radio.Group';
+export { Radio };

package/dist/components/input/radio/radio.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Radio } from './radio';
+const meta = {
+    title: 'Input/Radio',
+    parameters: {
+        layout: 'centered',
+    },
+};
+// eslint-disable-next-line
+const Story = ({ checked: _, onChange, ...args }) => {
+    const [isChecked, setChecked] = React.useState(false);
+    const handleCheck = () => setChecked((prev) => !prev);
+    return React.createElement(Radio, { checked: isChecked, onChange: handleCheck, ...args });
+};
+export const Default = Story.bind({});
+Default.args = {
+    disabled: false,
+    label: 'Radio Button',
+    value: 'radio1',
+};
+const GroupStory = () => {
+    const [selected, setSelected] = React.useState('');
+    const handleChange = (event) => {
+        const value = event.target.value;
+        setSelected(value);
+    };
+    return (React.createElement(Radio.Group, { name: "group", "$display": "flex", "$gap": 8, "$dir": "column" },
+        React.createElement(Radio, { checked: selected === 'radio1', label: "Radio Button 1", onChange: handleChange, value: "radio1" }),
+        React.createElement(Radio, { checked: selected === 'radio2', label: "Radio Button 2", onChange: handleChange, value: "radio2" }),
+        React.createElement(Radio, { checked: selected === 'radio3', label: "Radio Button 3", onChange: handleChange, value: "radio3" }),
+        React.createElement(Radio, { checked: selected === 'radio4', label: "Radio Button 4", onChange: handleChange, value: "radio4" })));
+};
+export const Group = GroupStory.bind({});
+export default meta;

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

@@ -0,0 +1 @@
+export { Search } from './search';

package/dist/components/input/search/search.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Close, Search as SearchIcon } from 'icons';
+export const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder, size, sx, value, }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const isCollapsed = !expanded && size === 'collapsed';
+    const iconSize = isCollapsed || size === 'large' ? 24 : 16;
+    const handleExpand = () => {
+        setExpanded(true);
+        inputRef?.current?.focus();
+    };
+    const handleCollapse = () => {
+        setExpanded(false);
+        setFocused(false);
+        inputRef?.current?.blur();
+    };
+    const handleFocus = () => {
+        inputRef?.current?.focus();
+    };
+    return (React.createElement(Wrapper, { "$align": "center", "$dir": "row", "$isCollapsed": isCollapsed, "$isFocused": focused, "$borderRadius": "large", "$size": size, "$sx": sx, onClick: dropdownFilter && size === 'large'
+            ? undefined
+            : isCollapsed
+                ? handleExpand
+                : handleFocus },
+        React.createElement(SearchIcon, { color: size === 'large' ? 'blue-7' : 'grey-3', size: iconSize, onClick: isCollapsed ? undefined : handleCollapse, sx: isCollapsed || size !== 'collapsed'
+                ? undefined
+                : `
+          &:hover {
+            cursor: pointer;
+            background-color: var(--color-grey-10);
+            border-radius: 50%;
+          }` }),
+        React.createElement(Input, { "$isCollapsed": isCollapsed, onBlur: () => setFocused(false), onChange: onChange, onFocus: () => setFocused(true), onSubmit: onSubmit, placeholder: placeholder, ref: inputRef, value: value }),
+        !isCollapsed && onClearText && (React.createElement(Close, { size: 16, onClick: onClearText, sx: `
+            ${value.length === 0 ? 'visibility: hidden;' : ''}
+            padding: 4px;
+            &:hover {
+              cursor: pointer;
+              background-color: var(--color-grey-10);
+              border-radius: 50%;
+            }` })),
+        size === 'large' && dropdownFilter && (React.createElement(React.Fragment, null,
+            React.createElement(Separator, null),
+            dropdownFilter))));
+};
+const Wrapper = styled.div `
+  ${Styles.flex}
+  ${Styles.padding}
+  display: flex;
+  background-color: var(--color-white);
+
+  & > * {
+    width: fit-content;
+    flex-shrink: 0;
+  }
+
+  ${({ $isCollapsed, $size }) => $isCollapsed
+    ? `
+    padding: 12px;
+    border-radius: 50%;
+    &:hover {
+      background-color: var(--color-grey-10);
+      cursor: pointer;
+    }`
+    : `
+    border-radius: 8px;
+    ${$size === 'collapsed'
+        ? // collapsed
+            `
+      gap: 8px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+        : $size === 'small'
+            ? // small
+                `
+      gap: 12px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+            : $size === 'medium'
+                ? // medium
+                    `
+      gap: 12px;
+      padding: 14px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+                : // large
+                    `
+      gap: 16px;
+      padding: 16px;
+      box-shadow: var(--elevation-1);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`}`}
+
+  ${({ $isFocused, $isCollapsed }) => $isFocused && !$isCollapsed
+    ? 'border: 1px solid var(--color-primary-blue-2) !important;'
+    : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Input = styled.input.attrs(({ ref }) => ({
+    ref: ref,
+})) `
+  flex: 1;
+  border-radius: 8px;
+  outline: none;
+  border: none;
+  font-size: 14px;
+  font-family: Inter;
+  line-height: 20px;
+  color: var(--color-grey-2);
+
+  ${({ $isCollapsed }) => $isCollapsed
+    ? 'width: 0px; height: 0px; padding: 0px !important; border: none !important;'
+    : ''}
+`;
+const Separator = styled.div `
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-9);
+`;

package/dist/components/input/search/search.stories.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button, Dropdown } from 'components';
+import { Search } from './search';
+const meta = {
+    title: 'Input/Search',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const options = [
+    {
+        label: 'Category Filter 1',
+        value: 'value1',
+    },
+    {
+        label: 'Category Filter 2',
+        value: 'value2',
+    },
+];
+const DropdownFilter = ({ onChange, value, }) => {
+    return (React.createElement(Dropdown, { hasArrow: false, maintainState: false, onChange: onChange, options: options, trigger: React.createElement(Button, { size: "small", sx: "margin-right: 8px; padding: 0px; gap: 16px; & > * { color: var(--color-grey-3) !important; };", type: "text" }, options.find((item) => item.value === value)?.label ?? 'Category') }));
+};
+const Story = (args) => {
+    const [value, setValue] = React.useState('');
+    const [filter, setFilter] = React.useState('');
+    const handleChange = (event) => {
+        setValue(event.target.value);
+    };
+    const handleFilterChange = (event) => {
+        const eventValue = event.target.getAttribute('data-value') || '';
+        setFilter(eventValue);
+    };
+    const onClearText = () => setValue('');
+    return (React.createElement(Search, { dropdownFilter: React.createElement(DropdownFilter, { onChange: handleFilterChange, value: filter }), onChange: handleChange, onClearText: onClearText, value: value, ...args }));
+};
+export const Default = Story.bind({});
+Default.args = {
+    placeholder: '',
+    size: 'collapsed',
+};
+Default.argTypes = {
+    placeholder: {
+        type: 'string',
+    },
+    size: {
+        options: ['collapsed', 'small', 'medium', 'large'],
+        control: 'select',
+    },
+};
+export default meta;

package/dist/components/navigation/breadcrumb/breadcrumb.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+import { ChevronLeft, ChevronRight } from 'icons';
+const Breadcrumb = ({ children, previous }) => {
+    const _children = React.Children.toArray(children);
+    if (previous) {
+        return (React.createElement(Box, { "$align": "center", "$gap": 8, sx: "& > *:last-child { color: var(--color-grey-3) !important; };" },
+            React.createElement(React.Fragment, null,
+                React.createElement(ChevronLeft, { color: "grey-3", size: 24 }),
+                React.isValidElement(_children[0]) &&
+                    React.cloneElement(_children[0], {
+                        icon: undefined,
+                        avatar: undefined,
+                    }))));
+    }
+    return (React.createElement(Box, { "$align": "center", "$gap": 8 }, _children.map((child, index) => {
+        if (React.isValidElement(child) &&
+            child.type?.displayName === 'BreadcrumbItem') {
+            return (React.createElement(React.Fragment, null,
+                child,
+                _children.length - 1 !== index && (React.createElement(ChevronRight, { color: "grey-3", size: 24 }))));
+        }
+        return null;
+    })));
+};
+const BreadcrumbItem = ({ avatar, children, href, icon, iconColor = 'blue', onClick, }) => {
+    return (React.createElement(Item, { as: href ? 'a' : 'div', href: href, onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1` },
+        icon && (React.createElement(IconWrapper, { "$color": iconColor }, React.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 }))),
+        avatar,
+        children));
+};
+Breadcrumb.Item = BreadcrumbItem;
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
+const Item = styled.div `
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  font-family: Inter;
+  color: var(--color-grey-3);
+
+  ${({ as }) => as === 'a'
+    ? `
+    text-decoration: none;
+    color: var(--color-primary-blue-2);
+    
+    &:hover {
+      position: relative;
+      &:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: 0px;
+        right: 0px;
+        background-color: var(--color-primary-blue-1);
+      }
+    }`
+    : ''}
+
+  ${({ $type, $iconColor }) => $type === 'icon'
+    ? `
+    gap: 32px;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 36px;
+    color: var(--color-${$iconColor});
+
+    &:hover {
+      &:after {
+        width: calc(100% - 80px);
+        background-color: var(--color-${$iconColor});
+      }
+    }`
+    : $type === 'avatar'
+        ? `
+    padding: 4px;
+    gap: 16px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 26px;
+    color: var(--color-grey-1);
+    &:hover {
+      &:after {
+        background-color: var(--color-primary-blue-2);
+      }
+    }`
+        : `
+    padding: 4px 0px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    `}
+`;
+const IconWrapper = styled.div `
+  background-color: ${({ $color }) => `var(--color-hue-${$color}-2)`};
+  height: 48px;
+  width: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 8px;
+`;
+export { Breadcrumb };