@soul-refiner/design-system 0.1.28 → 0.1.29

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Avatar } from 'components';
+import { Calendar } from 'icons';
+import { Breadcrumb } from './breadcrumb';
+const meta = {
+    title: 'Navigation/Breadcrumb',
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        previous: false,
+    },
+};
+const Story = (args) => (React.createElement(Breadcrumb, { ...args },
+    React.createElement(Breadcrumb.Item, { href: "#" }, "Breadcrumb 1"),
+    React.createElement(Breadcrumb.Item, { href: "#" }, "Breadcrumb 2"),
+    React.createElement(Breadcrumb.Item, null, "Current Page")));
+export const Default = Story.bind({});
+const StoryWithAvatars = (args) => (React.createElement(Breadcrumb, { ...args },
+    React.createElement(Breadcrumb.Item, { avatar: React.createElement(Avatar, { size: 32, image: "https://f005.backblazeb2.com/file/sr-platform/card.jpg" }), href: "#" }, "Breadcrumb 1"),
+    React.createElement(Breadcrumb.Item, { avatar: React.createElement(Avatar, { size: 32, image: "https://f005.backblazeb2.com/file/sr-platform/card.jpg" }), href: "#" }, "Breadcrumb 2"),
+    React.createElement(Breadcrumb.Item, null, "Current Page")));
+export const WithAvatars = StoryWithAvatars.bind({});
+const StoryWithIcons = ({ iconColor, ...args }) => (React.createElement(Breadcrumb, { ...args },
+    React.createElement(Breadcrumb.Item, { icon: React.createElement(Calendar, null), iconColor: iconColor, href: "#" }, "Breadcrumb 1"),
+    React.createElement(Breadcrumb.Item, null, "Current Page")));
+export const WithIcons = StoryWithIcons.bind({});
+WithIcons.argTypes = {
+    iconColor: {
+        options: ['blue', 'pink', 'purple', 'mint', 'orange', 'ocean'],
+        control: 'select',
+    },
+};
+WithIcons.args = {
+    iconColor: 'mint',
+};
+export default meta;

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

@@ -0,0 +1 @@
+export { Breadcrumb } from './breadcrumb';

package/dist/components/navigation/index.js

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './breadcrumb';
+export { Tabs } from './tabs';

package/dist/components/navigation/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from './tabs';

package/dist/components/navigation/tabs/tabs.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import styled from 'styled-components';
+import { P } from 'components';
+const colorLookup = {
+    blue: {
+        bg: 'var(--color-hue-blue-2)',
+        icon: 'var(--color-hue-blue-1)',
+    },
+    green: {
+        bg: 'var(--color-green-8)',
+        icon: 'var(--color-green-2)',
+    },
+    grey: {
+        bg: 'var(--color-grey-9)',
+        icon: 'var(--color-grey-7)',
+    },
+    mint: {
+        bg: 'var(--color-hue-mint-2)',
+        icon: 'var(--color-hue-mint-1)',
+    },
+    ocean: {
+        bg: 'var(--color-hue-ocean-2)',
+        icon: 'var(--color-hue-ocean-1)',
+    },
+    orange: {
+        bg: 'var(--color-hue-orange-2)',
+        icon: 'var(--color-hue-orange-1)',
+    },
+    pink: {
+        bg: 'var(--color-hue-pink-2)',
+        icon: 'var(--color-hue-pink-1)',
+    },
+    purple: {
+        bg: 'var(--color-hue-purple-2)',
+        icon: 'var(--color-hue-purple-1)',
+    },
+    red: {
+        bg: 'var(--color-red-9)',
+        icon: 'var(--color-red-3)',
+    },
+    yellow: {
+        bg: 'var(--color-yellow-8)',
+        icon: 'var(--color-yellow-3)',
+    },
+};
+const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
+    const id = React.useId();
+    return (React.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, key: id + index.toString(36), icon: item?.icon, label: item.label, onClick: () => onChange(index), size: size })))));
+};
+const Wrapper = styled.ul `
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 16px;
+  margin: 0px;
+  padding: 0px;
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Item = ({ active, color, disabled, icon, label, onClick, size = 'large', }) => {
+    const inputColor = disabled ? 'grey' : color ? color : 'blue';
+    const iconColor = colorLookup[inputColor].icon;
+    const bgColor = colorLookup[inputColor].bg;
+    const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
+    const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
+    return (React.createElement(Li, { "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size, onClick: !disabled ? onClick : undefined },
+        icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
+        React.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
+};
+const Li = styled.li `
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+
+  ${({ $size, $hasIcon }) => $hasIcon
+    ? 'padding: 16px 12px;'
+    : $size === 'small'
+        ? 'padding: 10px 8px;'
+        : $size === 'medium'
+            ? 'padding: 14px 10px;'
+            : 'padding: 22px 12px;'}
+
+  ${({ $hasIcon, $color, $disabled }) => $disabled
+    ? `
+  cursor: initial;
+  `
+    : $hasIcon
+        ? `
+  &:hover {
+    p {
+      color: ${$color};
+    }
+  }
+
+  div > svg {
+    fill: ${$color};
+  }`
+        : `
+  &:hover {
+    background-color: var(--color-grey-10);
+    &:after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 3px;
+      bottom: 0px;
+      left: 0px;
+      background-color: var(--color-primary-blue-3);
+      border-top-right-radius: 3px;
+      border-top-left-radius: 3px;
+    }
+  }
+  &:active {
+    background-color: var(--color-grey-9);
+  }`}
+
+  ${({ $active, $color, $hasIcon }) => $active
+    ? `
+  &:after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 3px;
+    bottom: 0px;
+    left: 0px;
+    background-color: ${$hasIcon ? $color : 'var(--color-primary-blue-2)'} !important;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  `
+    : ''}
+`;
+const IconWrapper = styled.div `
+  padding: 8px;
+  border-radius: 8px;
+  background-color: ${({ $bg }) => $bg};
+`;
+Tabs.Item = Item;
+Item.displayName = 'Tabs.Item';
+export { Tabs };

package/dist/components/navigation/tabs/tabs.stories.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Tabs } from './tabs';
+import { Folder } from 'icons';
+const meta = {
+    title: 'Navigation/Tabs',
+    argTypes: {
+        size: {
+            options: ['large', 'medium', 'small'],
+            control: 'select',
+        },
+    },
+};
+// eslint-disable-next-line
+const Story = (args) => {
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    return (React.createElement(Tabs, { activeIndex: activeIndex, onChange: (number) => setActiveIndex(number), items: [
+            {
+                label: 'Tab Title',
+            },
+            {
+                label: 'Tab Title',
+            },
+            {
+                label: 'Tab Title',
+            },
+            {
+                label: 'Tab Title',
+            },
+        ], ...args }));
+};
+export const Default = Story.bind({});
+const StoryWithIcons = (args) => {
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    return (React.createElement(Tabs, { activeIndex: activeIndex, onChange: (number) => setActiveIndex(number), items: [
+            {
+                color: 'blue',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                color: 'green',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                color: 'mint',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                color: 'ocean',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                color: 'orange',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                color: 'pink',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                color: 'purple',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                color: 'red',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                color: 'yellow',
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+            {
+                disabled: true,
+                icon: React.createElement(Folder, null),
+                label: 'Tab Title',
+            },
+        ], ...args }));
+};
+export const Icons = StoryWithIcons.bind({});
+export default meta;

package/dist/components/surfaces/accordion/accordion.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+import { callAll } from 'utils';
+import { ChevronDown, ChevronUp } from 'icons';
+const AccordionContext = React.createContext([-1, () => undefined]);
+const Accordion = ({ children, sx }) => {
+    const [openIndex, setOpenIndex] = React.useState(-1);
+    const handleIndexChange = (index) => {
+        setOpenIndex((prev) => (prev === index ? -1 : index));
+    };
+    return (React.createElement(AccordionContext.Provider, { value: [openIndex, handleIndexChange] },
+        React.createElement(Wrapper, { "$sx": sx }, React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child))
+                return React.cloneElement(child, { index });
+            return null;
+        }))));
+};
+const Wrapper = styled.div `
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const AccordionItem = ({ children, index, sx, trigger, }) => {
+    const [openIndex, setOpenIndex] = React.useContext(AccordionContext);
+    return (React.createElement(Box, { "$dir": "column" },
+        React.createElement(TriggerWrapper, { onClick: callAll(
+            // eslint-disable-next-line
+            () => setOpenIndex(index), trigger?.props?.onClick) },
+            trigger,
+            openIndex === index ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)),
+        React.createElement(Box, { sx: openIndex === index ? sx : 'visibility: hidden; height: 0px;' }, children)));
+};
+const TriggerWrapper = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  appearance: none;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
+Accordion.Item = AccordionItem;
+AccordionItem.displayName = 'Accordion.Item';
+export { Accordion };

package/dist/components/surfaces/accordion/accordion.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { P } from 'components';
+import { Accordion } from './accordion';
+const meta = {
+    title: 'Surfaces/Accordion',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = (args) => (React.createElement(Accordion, { ...args }, [1, 2, 3, 4].map((item) => (React.createElement(Accordion.Item, { key: item, sx: "max-width: 464px; padding: 0px 16px 16px 16px;", trigger: React.createElement(P, null, "Accordion title") },
+    React.createElement(P, null, "Assertively build functional intellectual capital via distinctive niche markets. Professionally provide access to leveraged e-commerce after professional users. Collaboratively network high."))))));
+export const Default = Story.bind({});
+Default.args = {
+    sx: 'max-width: 464px;',
+};
+export default meta;

package/dist/components/surfaces/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion } from './accordion';

package/dist/components/surfaces/comment/comment.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import styled from 'styled-components';
+import Picker from '@emoji-mart/react';
+import { Avatar, Box, P } from 'components';
+import emojis from 'emoji/emojis.json';
+import { ThumbsUp, Comment as CommentIcon } from 'icons';
+import { abbrTimeBeforeDate } from './helpers';
+import { Styles } from 'common';
+export const Comment = ({ content, createdDate, onCommentClick, onReact, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
+    const id = React.useId();
+    const [showPicker, setShowPicker] = React.useState(false);
+    const handleReaction = ({ native }) => {
+        onReact(native);
+        setShowPicker(false);
+    };
+    const handlePicker = (event) => {
+        event.stopPropagation();
+        setShowPicker((prev) => !prev);
+    };
+    const handlePickerBlur = () => setShowPicker(false);
+    const createdTime = abbrTimeBeforeDate(createdDate, { message: true });
+    const reactionElements = reactions &&
+        Object.entries(reactions)
+            .sort((a, b) => (a[1] < b[1] ? 1 : -1))
+            .map((reaction) => (React.createElement(Reaction, { key: id + reaction[0], "$align": "center", "$dir": "row", "$gap": 5, "$userSelected": userReactions?.includes(reaction[0]) },
+            reaction[0],
+            React.createElement(P, { "$bold": true, "$fontSize": 10, "$lineHeight": 14 }, reaction[1]))));
+    const hasReplies = !!replies?.length && replies.length > 0;
+    const replyElements = hasReplies &&
+        replies.map((reply, index) => (React.createElement(ReplyWrapper, { "$isNotLastReply": index !== replies.length - 1, key: id + reply.createdDate.getTime().toString(36) },
+            React.createElement(Comment, { ...reply }),
+            React.createElement(ReplyIndicator, null))));
+    return (React.createElement(Wrapper, null,
+        React.createElement(Avatar, { href: userProfileUri, image: userImageUri, size: 32 }),
+        React.createElement(Box, { "$flex": 1, "$dir": "column" },
+            React.createElement(ContentWrapper, { "$hasReplies": hasReplies },
+                React.createElement(CommentBox, null,
+                    React.createElement(P, { "$bold": true, "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, userName),
+                    React.createElement(P, { sx: "letter-spacing: -0.176px;" }, content)),
+                React.createElement(Box, { "$align": "flex-start", "$dir": "row", "$display": "flex", "$gap": 16, sx: "margin: 8px 0px; position: relative;" },
+                    React.createElement(ThumbsUp, { color: "primary-blue-2", onClick: handlePicker, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
+                    React.createElement(CommentIcon, { color: "primary-blue-2", onClick: onCommentClick, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
+                    React.createElement(P, { "$color": "grey-7" }, "\u2022"),
+                    React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 24, sx: "flex-shrink: 0;" }, createdTime),
+                    React.createElement(Box, { "$display": "flex", "$flow": "row wrap", "$gap": 6, sx: "max-width: calc(100% - 190px); margin-left: auto;" }, reactionElements),
+                    showPicker && (React.createElement(PickerWrapper, null,
+                        React.createElement(Picker, { data: emojis, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" }))))),
+            hasReplies && React.createElement(RepliesWrapper, null, replyElements))));
+};
+const Wrapper = styled.div `
+  max-width: 700px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  justify-content: space-between;
+  position: relative;
+`;
+const ContentWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  ${({ $hasReplies }) => $hasReplies
+    ? `
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 32px;
+      left: -28px;
+      height: calc(100% - 12px);
+      border-left: 2px solid var(--color-grey-9);
+    }`
+    : ''}
+`;
+const CommentBox = styled.div `
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: var(--color-grey-10);
+  border-radius: 16px;
+`;
+const PickerWrapper = styled.div `
+  position: absolute;
+  z-index: 5;
+`;
+const Reaction = styled.div `
+  ${Styles.flex}
+  display: flex;
+  padding: 2px 6px;
+  border-radius: 12px;
+  ${({ $userSelected }) => $userSelected
+    ? `
+    background-color: var(--color-primary-blue-4);
+    border: 1px solid var(--color-primary-blue-3);
+    `
+    : ''}
+`;
+const RepliesWrapper = styled.div `
+  padding-top: 12px;
+`;
+const ReplyWrapper = styled.div `
+  position: relative;
+  ${({ $isNotLastReply }) => $isNotLastReply
+    ? `
+    &::before {
+      content: "";
+      position: absolute;
+      left: -28px;
+      height: 100%;
+      border-left: 2px solid var(--color-grey-9);
+    }`
+    : ''}
+`;
+const ReplyIndicator = styled.div `
+  position: absolute;
+  top: 0;
+  left: -28px;
+  width: 28px;
+  height: 16px;
+  border-bottom-left-radius: 16px;
+  border: 2px solid var(--color-grey-9);
+  border-top: none;
+  border-right: none;
+`;

package/dist/components/surfaces/comment/comment.stories.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Comment } from './comment';
+const meta = {
+    title: 'Surfaces/Comment',
+};
+const Story = (args) => {
+    const [reactions, setReactions] = React.useState({
+        '✋': 12,
+        '👋': 1,
+        '💯': 501,
+        '😀': 6,
+        '😁': 1,
+        '😃': 8,
+        '😊': 2,
+        '😎': 7,
+        '🤚': 2,
+        '🤣': 24,
+        '🫲': 15,
+        '🫳': 1,
+    });
+    const [userReactions, setUserReactions] = React.useState(['💯']);
+    const handleReaction = (reaction) => {
+        setReactions((prev) => ({
+            ...prev,
+            [reaction]: prev?.[reaction] ? prev[reaction] + 1 : 1,
+        }));
+        setUserReactions((prev) => {
+            if (prev.includes(reaction)) {
+                return prev.filter((item) => item !== reaction);
+            }
+            else {
+                return [...prev, reaction];
+            }
+        });
+    };
+    return (React.createElement(Comment, { onCommentClick: () => undefined, onReact: handleReaction, replies: [
+            {
+                content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.',
+                createdDate: new Date(new Date('16 June 2023').getTime() - 500024),
+                onCommentClick: () => undefined,
+                onReact: () => undefined,
+                reactions: {
+                    '✋': 12,
+                    '👋': 1,
+                    '💯': 501,
+                    '😀': 6,
+                    '😁': 1,
+                    '😃': 8,
+                    '😊': 2,
+                    '😎': 7,
+                    '🤚': 2,
+                    '🤣': 24,
+                    '🫲': 15,
+                    '🫳': 1,
+                },
+                replies: [
+                    {
+                        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.',
+                        createdDate: new Date(new Date('16 June 2023').getTime() - 500024),
+                        onCommentClick: () => undefined,
+                        onReact: () => undefined,
+                        userName: 'Bohdan Popkov',
+                        userImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+                        userProfileUri: '#',
+                    },
+                ],
+                userName: 'Bohdan Popkov',
+                userImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+                userProfileUri: '#',
+            },
+        ], reactions: reactions, userReactions: userReactions, ...args }));
+};
+export const Default = Story.bind({});
+Default.argTypes = {};
+Default.args = {
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.',
+    createdDate: new Date('June 6, 2023'),
+    userName: 'Bohdan Popkov',
+    userImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+    userProfileUri: '#',
+};
+export default meta;

package/dist/components/surfaces/comment/helpers.js

@@ -0,0 +1,38 @@
+export const abbrTimeBeforeDate = (date, options) => {
+    const { message } = options ?? {};
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    if (diff < 60000) {
+        // under 1 min
+        if (message)
+            return 'Now';
+        return 'Just now';
+    }
+    else if (diff < 3600000) {
+        // under one hour
+        const minutes = Math.floor(diff / 60000);
+        if (message)
+            return `${minutes}m`;
+        return `${minutes} ${minutes === 1 ? 'min' : 'mins'}`;
+    }
+    else if (diff < 86400000) {
+        // under one day
+        const hours = Math.floor(diff / 3600000);
+        if (message)
+            return `${hours}h`;
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+    }
+    else if (diff < 604800000) {
+        // under one week
+        const days = Math.floor(diff / 86400000);
+        if (message)
+            return `${days}d`;
+        return `${days} ${days === 1 ? 'day' : 'days'}`;
+    }
+    else {
+        if (message) {
+            return `${Math.floor(diff / 604800000)}w`;
+        }
+        return date.toDateString().slice(4);
+    }
+};

package/dist/components/surfaces/comment/index.js

@@ -0,0 +1 @@
+export { Comment } from './comment';