@soul-refiner/design-system 0.2.109 → 0.2.111

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IconProps } from '../../';
 type NativeProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML' | 'onClick' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'> & {
     value?: string;
 };
@@ -18,6 +19,7 @@ export interface ButtonProps extends NativeProps, React.PropsWithChildren {
     type?: ButtonTypes;
     className?: string;
     showChevron?: boolean;
+    customDropdownIcon?: React.ComponentType<IconProps>;
 }
-export declare const Button: ({ as, children, disabled, fluid, href, icon, isDropdownOpen, roundness, size, sx, type, showChevron, ...props }: ButtonProps) => React.JSX.Element;
+export declare const Button: ({ as, children, disabled, fluid, href, icon, isDropdownOpen, roundness, size, sx, type, showChevron, customDropdownIcon, ...props }: ButtonProps) => React.JSX.Element;
 export {};

package/dist/components/actions/button/button.js

@@ -14,7 +14,7 @@ const SM_ICON_SIZE = 16;
 const SM_FONT_SIZE = 14;
 const SM_PADDING = '5px 15px';
 const SM_PADDING_WO_CHILDREN = '7px';
-export const Button = ({ as = 'button', children, disabled, fluid = false, href, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', showChevron = true, ...props }) => {
+export const Button = ({ as = 'button', children, disabled, fluid = false, href, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', showChevron = true, customDropdownIcon, ...props }) => {
     const Component = Components()[type];
     const buttonIcon = React.Children.map(icon, (item) => {
         if (React.isValidElement(item))
@@ -30,7 +30,16 @@ export const Button = ({ as = 'button', children, disabled, fluid = false, href,
                 },
             };
     })?.[0];
-    const dropdownIcon = showChevron ? (isDropdownOpen === true ? (React.createElement(ChevronUp, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : isDropdownOpen === false ? (React.createElement(ChevronDown, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : undefined) : undefined;
+    const CustomDropdownIcon = customDropdownIcon;
+    let dropdownIcon = undefined;
+    if (showChevron) {
+        if (isDropdownOpen === true) {
+            dropdownIcon = CustomDropdownIcon ? (React.createElement(CustomDropdownIcon, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : (React.createElement(ChevronUp, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE }));
+        }
+        else if (isDropdownOpen === false) {
+            dropdownIcon = CustomDropdownIcon ? (React.createElement(CustomDropdownIcon, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : (React.createElement(ChevronDown, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE }));
+        }
+    }
     const padding = !!children
         ? size === 'large'
             ? LG_PADDING

package/dist/components/custom/courses_selection/courses_selection.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
+type Course = {
+    id: string;
+    name: string;
+    imageSrc: string;
+};
+export interface CoursesSelectionProps extends NativeProps, React.PropsWithChildren {
+    closeOnBlur?: boolean;
+    closeOnChange?: boolean;
+    disabled?: boolean;
+    offset?: [number, number];
+    sx?: string;
+    containerSx?: string;
+    courses: Course[];
+    label: string;
+    courseIsSelected: Record<string, boolean>;
+    setCourseIsSelected: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    subtitle: string;
+}
+export declare const CoursesSelection: ({ closeOnChange, closeOnBlur, disabled, offset, sx, containerSx, courses, label, courseIsSelected, setCourseIsSelected, subtitle, ...rest }: CoursesSelectionProps) => React.JSX.Element;
+export {};

package/dist/components/custom/courses_selection/courses_selection.js

@@ -0,0 +1,125 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Button, P, Box, H } from '../..';
+import { GraduationCap, Search as SearchIcon, Plus, Close, } from '../../../icons';
+export const CoursesSelection = ({ closeOnChange = true, closeOnBlur = true, disabled = false, offset = [0, 0], sx, containerSx, courses, label, courseIsSelected, setCourseIsSelected, subtitle, ...rest }) => {
+    const wrapperRef = 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);
+        }
+    };
+    const selectedCourses = courses.filter((course) => courseIsSelected[course.id]);
+    return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur, ...rest },
+        React.createElement(Box, { "$gap": 16, "$align": "center" },
+            React.createElement(IconWrapper, { "$color": "var(--color-hue-purple-2)" },
+                React.createElement(GraduationCap, { color: "hue-purple-1", size: 24 })),
+            React.createElement(H.Six, { "$bold": true, "$color": "hue-purple-1" }, "Course")),
+        React.createElement(P, { "$color": "grey-4", "$fontSize": 14, sx: "margin-top: 32px;" }, subtitle),
+        React.createElement(Button, { type: "dropdown", isDropdownOpen: open, onClick: handleOpen, customDropdownIcon: SearchIcon, sx: "margin-top: 32px;" }, label),
+        open && (React.createElement(Container, { "$offset": offset, "$sx": containerSx }, courses.map((course) => (React.createElement(OptionWrapper, { key: course.id, "$disabled": disabled, onClick: () => {
+                setCourseIsSelected({
+                    ...courseIsSelected,
+                    [course.id]: true,
+                });
+                if (closeOnChange) {
+                    setOpen(false);
+                }
+            } },
+            React.createElement(Box, { "$display": "flex", "$align": "center" },
+                React.createElement(P, { "$color": 'grey-4', "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, course.name),
+                React.createElement(Plus, { sx: "margin-left: auto;" }))))))),
+        !!selectedCourses.length && (React.createElement("ul", { style: { padding: 0 } }, selectedCourses.map((course) => {
+            return (React.createElement("li", { key: course.id, style: {
+                    listStyleType: 'none',
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginTop: '16px',
+                } },
+                React.createElement(Image, { src: course.imageSrc }),
+                React.createElement(P, { sx: "margin-left: 16px;" }, course.name),
+                React.createElement(Close, { sx: "cursor: pointer; margin-left: auto;", onClick: () => setCourseIsSelected({
+                        ...courseIsSelected,
+                        [course.id]: false,
+                    }) })));
+        })))));
+};
+const Wrapper = styled.div `
+  position: relative;
+  display: block;
+  outline: none;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Container = styled.div `
+  min-width: 280px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-white);
+  position: absolute;
+  width: 100%;
+  outline: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-2);
+  border-radius: 8px;
+  overflow: auto;
+  z-index: 2;
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+
+  ${({ $offset }) => $offset ? `transform: translate(${$offset[0]}px, ${$offset[1]}px);` : ''}
+`;
+const OptionWrapper = styled.div `
+  position: relative;
+  padding: 12px 16px;
+  user-select: none;
+  gap: 8px;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  ${({ $disabled }) => {
+    if ($disabled) {
+        return `cursor: initial;
+      color: var(--color-grey-7);
+      background-color: var(--color-grey-10);`;
+    }
+    return `
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+
+    &:active {
+      background-color: var(--color-grey-8);
+    }
+    `;
+}}
+`;
+const Image = styled.img `
+  border-radius: 8px;
+  width: 113.78px;
+  height: 64px;
+  margin-right: 16px;
+`;
+const IconWrapper = styled.div `
+  padding: 12px;
+  border-radius: 8px;
+  background-color: ${({ $color }) => $color};
+  width: fit-content;
+`;

package/dist/components/custom/courses_selection/index.d.ts

@@ -0,0 +1,2 @@
+export { CoursesSelection } from './courses_selection';
+export type { CoursesSelectionProps } from './courses_selection';

package/dist/components/custom/courses_selection/index.js

@@ -0,0 +1 @@
+export { CoursesSelection } from './courses_selection';

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

@@ -1,2 +1,4 @@
 export { UsersSelection } from './users_selection';
 export type { UsersSelectionProps } from './users_selection';
+export { CoursesSelection } from './courses_selection';
+export type { CoursesSelectionProps } from './courses_selection';

package/dist/components/custom/index.js

@@ -1 +1,2 @@
 export { UsersSelection } from './users_selection';
+export { CoursesSelection } from './courses_selection';

package/dist/components/custom/users_selection/users_selection.js

@@ -69,6 +69,7 @@ const Container = styled.div `
   border-radius: 8px;
   overflow: auto;
   padding: 24px;
+  z-index: 2;
 
   ${({ $sx }) => ($sx ? $sx : '')}
 

package/package.json

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