@soul-refiner/design-system 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/src/components/input/select/select.js

@@ -0,0 +1,56 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var paragraph = require('../../atoms/typography/paragraph.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Select = ({ label, onClick, selected, sx, value, }) => {
+    return (React__default.default.createElement(Label, { onClick: (event) => onClick(event, value), "$sx": sx },
+        React__default.default.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),
+        React__default.default.createElement(SelectBox, { "$selected": selected }),
+        React__default.default.createElement(paragraph.P, { as: "div" }, label)));
+};
+const Label = styled.styled.div `
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 24px;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    display: none;
+  }
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const SelectBox = styled.styled.div `
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--color-grey-8);
+  border-radius: 4px;
+  flex-shrink: 0;
+
+  ${({ $selected }) => $selected
+    ? `
+    background-color: var(--color-primary-blue-2);
+    border-color: var(--color-primary-blue-2);
+    
+    &::after {
+      position: absolute;
+      content: '✔';
+      top: -1px;
+      left: 4px;
+      font-size: 13px;
+      color: var(--color-white);
+      font-weight: 500;
+    }`
+    : ''}
+`;
+
+exports.Select = Select;

package/dist/src/components/input/text_area/text_area.js

@@ -0,0 +1,120 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
+var alert_circle = require('../../../icons/notifications/alert_circle.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, minHeight, minWidth, name, onChange, placeholder, resize = false, successful, sx, value, warning, }) => {
+    const ref = React__default.default.useRef(null);
+    React__default.default.useEffect(() => {
+        if (ref.current) {
+            ref.current.style.height = `${minHeight}px`;
+            const scrollHeight = ref.current.scrollHeight;
+            ref.current.style.height = scrollHeight + 'px';
+        }
+    }, [ref.current, value]);
+    return (React__default.default.createElement(Label, { "$disabled": disabled, "$sx": sx },
+        label,
+        React__default.default.createElement(InputWrapper, { "$bg": bg, "$minWidth": minWidth, "$successful": successful, "$warning": warning },
+            icon,
+            React__default.default.createElement(TextAreaElement, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, ref: ref, value: maxCharacters
+                    ? value.slice(0, maxCharacters - 1)
+                    : value, "$minHeight": minHeight, "$resize": resize }),
+            successful && React__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
+            warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
+        React__default.default.createElement(box.Box, { "$gap": 16, "$justify": "space-between" },
+            helperText && React__default.default.createElement(HelperText, null, helperText),
+            maxCharacters && (React__default.default.createElement(MaxCharactersText, null,
+                value.length,
+                " / ",
+                maxCharacters)))));
+};
+const Label = styled.styled.label `
+  width: 100%;
+  display: flex;
+  gap: 4px;
+  flex-flow: column nowrap;
+  color: var(--color-grey-2);
+  font-family: var(--font-inter);
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 26px;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    color: var(--color-grey-7) !important;
+    & > * {
+      color: var(--color-grey-7) !important;
+    }
+    & > div:first-of-type {
+      background-color: var(--color-grey-9) !important;
+    }`
+    : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.styled.div `
+  min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')}
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: ${({ $bg }) => $bg};
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+
+  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
+  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
+`;
+const TextAreaElement = styled.styled.textarea `
+  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')}
+  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);
+  }
+
+  ${({ $resize }) => ($resize ? '' : 'resize: none;')}
+`;
+const HelperText = styled.styled.p `
+  color: var(--color-grey-4);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  line-height: 20px;
+`;
+const MaxCharactersText = styled.styled.p `
+  text-align: right;
+  color: var(--color-grey-6);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+`;
+
+exports.TextArea = TextArea;

package/dist/src/components/input/text_input/text_input.js

@@ -0,0 +1,157 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var chip = require('../../feedback/chip/chip.js');
+var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
+var alert_circle = require('../../../icons/notifications/alert_circle.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size = 'large', successful, sx, value, warning, type = 'text', placeIconAtTheEnd = false, inputSx, }) => {
+    const id = React__default.default.useId();
+    const isMultiple = multiple;
+    const [multipleValueToAdd, setMultipleValueToAdd] = React__default.default.useState('');
+    const handleMultipleValueToAdd = (event) => {
+        setMultipleValueToAdd(event.target.value);
+    };
+    /**
+     * when there is no text in the input,
+     * pop the previous multiple value out
+     */
+    const handleMultipleValueDelete = (event) => {
+        if (value.length &&
+            onMultipleChange &&
+            !multipleValueToAdd &&
+            (event.key === 'Delete' || event.key === 'Backspace')) {
+            onMultipleChange(value.slice(0, value.length - 1));
+        }
+    };
+    /**
+     * when a user presses enter (submit) add the input to the values
+     * but don't add the same value twice
+     */
+    const handleMultipleAdd = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const alreadyHasValue = value.includes(multipleValueToAdd);
+        if (onMultipleChange && !alreadyHasValue) {
+            onMultipleChange([...value, multipleValueToAdd]);
+        }
+        setMultipleValueToAdd('');
+    };
+    /**
+     * when the user clicks on the chip to remove it, remove it frm the value
+     */
+    const handleMultipleItemRemoval = (removalItem) => {
+        onMultipleChange &&
+            onMultipleChange(value.filter((item) => item !== removalItem));
+    };
+    return (React__default.default.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
+        label,
+        React__default.default.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
+            !placeIconAtTheEnd && icon,
+            isMultiple && (React__default.default.createElement(MultipleInputWrapper, { onSubmit: handleMultipleAdd },
+                value.filter(Boolean).map((item, index) => (React__default.default.createElement(chip.Chip, { key: id + item + index, color: "blue", size: "small", onDismiss: () => handleMultipleItemRemoval(item) }, item))),
+                React__default.default.createElement(Input, { onChange: handleMultipleValueToAdd, onKeyDown: handleMultipleValueDelete, value: multipleValueToAdd, "$size": size, "$sx": inputSx }))),
+            !isMultiple && (React__default.default.createElement(Input, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, value: type === 'number'
+                    ? value
+                    : maxCharacters
+                        ? value?.slice(0, maxCharacters - 1) || ''
+                        : value, "$size": size, type: type, "$sx": inputSx })),
+            maxCharacters && type !== 'number' && !placeIconAtTheEnd && (React__default.default.createElement(MaxCharactersText, { "$size": size },
+                value?.length || 0,
+                " / ",
+                maxCharacters)),
+            placeIconAtTheEnd && icon,
+            successful && React__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
+            warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
+        helperText && React__default.default.createElement(HelperText, { "$size": size }, helperText)));
+};
+const Label = styled.styled.div `
+  width: 100%;
+  display: flex;
+  gap: 4px;
+  flex-flow: column nowrap;
+  color: var(--color-grey-2);
+  font-family: var(--font-inter);
+  font-size: ${({ $size }) => ($size === 'small' ? 16 : 18)}px;
+  font-weight: 500;
+  line-height: ${({ $size }) => ($size === 'small' ? 24 : 26)}px;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    color: var(--color-grey-7) !important;
+    & > * {
+      color: var(--color-grey-7) !important;
+    }
+    & > div {
+      background-color: var(--color-grey-9) !important;
+    }`
+    : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${({ $size }) => ($size === 'small' ? '6px 12px' : '12px')};
+  background-color: ${({ $bg }) => $bg};
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+
+  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
+  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
+`;
+const Input = styled.styled.input `
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: ${({ $size }) => ($size === 'small' ? 14 : 16)}px;
+  line-height: ${({ $size }) => ($size === 'small' ? 20 : 24)}px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const HelperText = styled.styled.span `
+  color: var(--color-grey-4);
+  font-family: var(--font-inter);
+  font-size: ${({ $size }) => ($size === 'small' ? 12 : 14)}px;
+  line-height: ${({ $size }) => ($size === 'small' ? 16 : 20)}px;
+`;
+const MaxCharactersText = styled.styled.span `
+  color: var(--color-grey-6);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+`;
+const MultipleInputWrapper = styled.styled.form `
+  display: flex;
+  flex-flow: row wrap;
+  gap: 8px 16px;
+`;
+
+exports.TextInput = TextInput;

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

@@ -0,0 +1,80 @@
+"use client";
+'use strict';
+
+var dropdown = require('../../actions/dropdown/dropdown.js');
+var React = require('react');
+var styled = require('styled-components');
+var clock = require('../../../icons/time/clock.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
+    const hours = React__default.default.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__default.default.createElement(dropdown.Dropdown, { options: hours.map((hour) => ({
+            value: hour,
+            label: hour,
+        })), containerSx: "height: 440px;", trigger: React__default.default.createElement(InputWrapper, null,
+            React__default.default.createElement(Input, { readOnly: true, value: `${selectedTime} ${selectedPeriod}` }),
+            React__default.default.createElement(clock.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.styled.div `
+  width: fit-content;
+  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.styled.input `
+  max-width: 120px;
+  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);
+  }
+`;
+
+exports.Time = Time;

package/dist/src/components/media/video/video.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var ReactPlayer = require('react-player');
+var Image = require('next/image');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ReactPlayer__default = /*#__PURE__*/_interopDefaultCompat(ReactPlayer);
+var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
+
+const Video = ({ controls = true, loop = false, muted, playsInline, src, subtitles, style, thumbnail, }) => {
+    const ref = React__default.default.useRef(null);
+    return (React__default.default.createElement(ReactPlayer__default.default, { config: {
+            file: {
+                attributes: {
+                    crossOrigin: 'true',
+                },
+                forceHLS: true,
+                hlsOptions: {
+                    autoStartLoad: true,
+                },
+                tracks: subtitles?.map((subtitle) => ({
+                    kind: 'subtitles',
+                    label: subtitle.label,
+                    src: subtitle.src,
+                    srcLang: subtitle.locale,
+                })),
+            },
+        }, controls: controls, height: "100%", light: thumbnail ? (React__default.default.createElement(Image__default.default, { alt: "thumbnail for trailer", layout: "fill", priority: true, quality: 100, src: thumbnail, style: { objectFit: 'contain' } })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
+            backgroundColor: 'var(--color-grey-0)',
+            maxHeight: 720,
+            maxWidth: 1280,
+            minHeight: 480,
+            overflow: 'hidden',
+            position: 'relative',
+            ...(style || {}),
+        }, url: src, width: "100%" }));
+};
+
+exports.Video = Video;

package/dist/src/components/media/video-player/playlist-item.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var Image = require('next/image');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var seconds_to_duration = require('../../atoms/seconds_to_duration/seconds_to_duration.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var lock = require('../../../icons/security/lock.js');
+var play_solid = require('../../../icons/audio_video/play_solid.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
+
+const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
+    return (React__default.default.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
+        playable ? (React__default.default.createElement(play_solid.PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React__default.default.createElement(lock.Lock, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })),
+        React__default.default.createElement(Image__default.default, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
+        progress && duration && (React__default.default.createElement(ProgressBar, { progressPercent: progress / duration })),
+        React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
+            React__default.default.createElement(paragraph.P, { "$color": "grey-10", "$semiBold": true }, title),
+            shortDescription && (React__default.default.createElement(paragraph.P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
+        duration && (React__default.default.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
+            React__default.default.createElement(seconds_to_duration.SecToDuration, { seconds: duration })))));
+};
+const Wrapper = styled.styled.div `
+  width: 100%;
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  ${({ $playable }) => $playable ? '' : 'pointer-events: none; cursor: initial;'}
+`;
+const ProgressBar = ({ progressPercent }) => (React__default.default.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.default.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
+    React__default.default.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
+const ProgressBarSvg = styled.styled.svg `
+  width: 133px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+`;
+
+exports.PlaylistItem = PlaylistItem;

package/dist/src/components/media/video-player/video.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Subtitle } from '../common';
+interface MediaItem {
+    id: string;
+    duration: number;
+    progress?: number;
+    src: string;
+    subtitles: Subtitle[];
+    shortDescription: string;
+    thumbnail: string;
+    title: string;
+}
+interface Trailer {
+    id: number;
+    src: string;
+    subtitles: Subtitle[];
+    thumbnail: string;
+}
+export interface VideoPlayerProps {
+    /**
+     * @param activeIndex the media item frm the playlist currently playing
+     */
+    activeIndex: number;
+    /**
+     * @param orientation the orientation of the player
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * @param onPipChange when the pip changes
+     */
+    onPipChange?: (pip: boolean) => void;
+    /**
+     * @param onProgress the handler as the video progresses
+     */
+    onProgress: (progress: {
+        playedSeconds: number;
+        loadedSeconds: number;
+    }) => void;
+    /**
+     * @param pip picture in picture is enabled
+     */
+    pip?: boolean;
+    /**
+     * @param playable whether the video can play
+     */
+    playable: boolean;
+    /**
+     * @param playlist the media items in the player
+     */
+    playlist: MediaItem[];
+    /**
+     * @param setMediaItem sets the index of the item to be played
+     */
+    setMediaItem: (index: number) => void;
+    /**
+     * @param subtitle the video player's subtitle
+     */
+    subtitle: string;
+    /**
+     * @param title the video player's title
+     */
+    title: string;
+    /**
+     * @param trailer if in
+     */
+    trailer?: Trailer;
+}
+/**
+ * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
+ * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
+ */
+export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, trailer, }: VideoPlayerProps) => React.JSX.Element | null;
+export {};