@soul-refiner/design-system 0.1.28 → 0.1.30

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.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { FilterProps } from './filter';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FilterProps & {
+    hasIcon: boolean;
+}>;
+export default meta;

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.d.ts

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

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

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

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

@@ -0,0 +1,10 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';
+export { DatePicker } from './date';
+export type { DatePickerProps } from './date';
+export { Filter } from './filter';
+export type { FilterProps, FilterTriggerProps } from './filter';
+export { Radio } from './radio';
+export type { RadioProps } from './radio';
+export { Search } from './search';
+export type { SearchProps } from './search';

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.d.ts

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

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BoxProps } from 'components';
+type NativeProps = Pick<React.HTMLAttributes<HTMLInputElement>, 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
+export interface RadioProps extends NativeProps {
+    checked: boolean;
+    disabled?: boolean;
+    label?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    reversed?: boolean;
+    sx?: string;
+    value: string;
+}
+declare const Radio: {
+    ({ checked, disabled, label, onChange, reversed, sx, value, ...rest }: RadioProps): React.JSX.Element;
+    Group: {
+        ({ children, name, ...rest }: RadioGroupProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export interface RadioGroupProps extends React.PropsWithChildren, BoxProps {
+    name: string;
+    sx?: string;
+}
+export { 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.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { RadioProps, RadioGroupProps } from './radio';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RadioProps>;
+export declare const Group: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RadioGroupProps>;
+export default meta;

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.d.ts

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

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+type NativeProps = Pick<React.HTMLAttributes<HTMLInputElement>, 'placeholder' | 'onChange' | 'onSubmit'>;
+type SearchSize = 'collapsed' | 'small' | 'medium' | 'large';
+export interface SearchProps extends NativeProps {
+    dropdownFilter?: React.ReactElement;
+    onClearText?: () => void;
+    size: SearchSize;
+    sx?: string;
+    value: string;
+}
+export declare const Search: ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder, size, sx, value, }: SearchProps) => React.JSX.Element;
+export {};

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.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { SearchProps } from './search';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, Pick<SearchProps, "placeholder" | "size">>;
+export default meta;

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.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface BreadcrumbProps extends React.PropsWithChildren {
+    previous?: boolean;
+}
+declare const Breadcrumb: {
+    ({ children, previous }: BreadcrumbProps): React.JSX.Element;
+    Item: {
+        ({ avatar, children, href, icon, iconColor, onClick, }: BreadcrumbItemProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+type IconColor = 'blue' | 'pink' | 'purple' | 'mint' | 'orange' | 'ocean';
+export interface BreadcrumbItemProps extends React.PropsWithChildren {
+    avatar?: React.ReactElement;
+    href?: string;
+    icon?: React.ReactElement;
+    iconColor?: IconColor;
+    onClick?: React.MouseEventHandler;
+}
+export { Breadcrumb };