@plutonhq/core-frontend 0.0.1

package/src/components/common/TagsFilter/TagsFilter.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './TagsFilter.module.scss';
+
+type TagsFilterProps = {
+   tags: string[];
+   onSelect: (s: string) => void;
+};
+
+const TagsFilter = ({ tags = [], onSelect }: TagsFilterProps) => {
+   const [showTags, setShowTags] = useState(false);
+   const [selected, setSelected] = useState('');
+   return (
+      <div className={classes.tagFilter}>
+         <button
+            className={showTags ? classes.buttonActive : ''}
+            data-tooltip-id="appTooltip"
+            data-tooltip-content="Filter by Tags"
+            aria-label="Filter by Tags"
+            data-tooltip-place="top"
+            data-tooltip-delay-show={500}
+            onClick={() => {
+               setShowTags(!showTags);
+               if (showTags) {
+                  onSelect('');
+                  setSelected('');
+               }
+            }}
+         >
+            <Icon type={showTags ? 'close' : 'tags'} size={18} />
+         </button>
+         <div className={`${classes.tagsList} ${showTags ? classes.tagsListShow : ''}`}>
+            {tags.length > 0 &&
+               tags.map((t, i) => (
+                  <div
+                     className={`${classes.tag} ${selected === t ? classes.tagActive : ''}`}
+                     key={t + i}
+                     onClick={() => {
+                        setSelected(selected === t ? '' : t);
+                        onSelect(selected === t ? '' : t);
+                     }}
+                  >
+                     #{t}
+                  </div>
+               ))}
+            {tags.length === 0 && <div className={classes.tag}>No tags found..</div>}
+         </div>
+      </div>
+   );
+};
+
+export default TagsFilter;

package/src/components/common/form/FormField/FormField.module.scss

@@ -0,0 +1,32 @@
+@use '../../../../styles/fields.scss';
+
+.formField {
+   @extend %fieldBase;
+
+   .fieldInner {
+      @extend %fieldInner;
+   }
+
+   .fieldLabel {
+      @extend %fieldLabel;
+   }
+
+   .description {
+      @extend %fieldDescription;
+   }
+   &.notLine {
+      .fieldInner {
+         flex-direction: column;
+         align-items: flex-start;
+         gap: 6px;
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .formField .fieldInner {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 10px;
+   }
+}

package/src/components/common/form/FormField/FormField.tsx

@@ -0,0 +1,38 @@
+import Icon from '../../Icon/Icon';
+import classes from './FormField.module.scss';
+
+interface FormFieldProps {
+   type: string;
+   label?: string;
+   description?: string;
+   hint?: string;
+   error?: string;
+   required?: boolean;
+   children: React.ReactNode;
+   inline?: boolean;
+   classes?: string;
+}
+
+const FormField = ({ label, description, hint, error, required, children, inline, classes: customClasses }: FormFieldProps) => {
+   return (
+      <div className={`${classes.formField} ${inline ? classes.inline : classes.notLine} ${error ? classes.hasError : ''} ${customClasses}`}>
+         <div className={classes.fieldInner}>
+            {label && (
+               <label className={classes.fieldLabel}>
+                  {label}
+                  {required && <span className={classes.required}>*</span>}
+                  {hint && (
+                     <i data-tooltip-id="hintTooltip" data-tooltip-content={hint}>
+                        <Icon type="help" size={13} />
+                     </i>
+                  )}
+                  {error && <span className={classes.fieldError}>{error}</span>}
+               </label>
+            )}
+            {children}
+         </div>
+         {description && <span className={classes.description}>{description}</span>}
+      </div>
+   );
+};
+export default FormField;

package/src/components/common/form/Input/Input.module.scss

@@ -0,0 +1,71 @@
+.inputField {
+   .input {
+      padding: 8px 12px;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--content-text-color);
+      font-size: 0.75rem;
+      width: 200px;
+      box-sizing: border-box;
+      transition: all 0.2s ease;
+
+      &:focus {
+         outline: none;
+         border-color: var(--line-active-color);
+      }
+
+      &::placeholder {
+         color: var(--content-text-color-light);
+      }
+      &.disabled {
+         background-color: var(--line-color);
+      }
+   }
+
+   &.inputFieldLarge {
+      .input {
+         padding: 15px;
+         font-size: 0.8rem;
+      }
+   }
+
+   &.inputFieldInline {
+      .fieldInner {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+         gap: 8px;
+      }
+      .input {
+         width: 50%;
+      }
+   }
+
+   &.inputFieldFull {
+      width: 100%;
+      .fieldInner {
+         display: flex;
+         flex-direction: column;
+         gap: 8px;
+         align-items: flex-start;
+      }
+      .input {
+         width: 100%;
+      }
+   }
+
+   &.fieldHasError {
+      input {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .inputField {
+      .input {
+         width: 100%;
+      }
+   }
+}

package/src/components/common/form/Input/Input.tsx

@@ -0,0 +1,72 @@
+import FormField from '../FormField/FormField';
+import classes from './Input.module.scss';
+
+type InputProps = {
+   label?: string;
+   type?: 'text' | 'password' | 'email' | 'number' | 'date';
+   size?: 'large' | 'medium' | 'small';
+   full?: boolean;
+   inline?: boolean;
+   description?: string;
+   placeholder?: string;
+   customClasses?: string;
+   fieldValue: string | number;
+   required?: boolean;
+   disabled?: boolean;
+   min?: number;
+   max?: number;
+   hint?: string;
+   error?: string;
+   onUpdate: (value: string) => void;
+};
+
+const Input = ({
+   label,
+   type = 'text',
+   size = 'medium',
+   inline = true,
+   full = false,
+   description,
+   placeholder,
+   customClasses = '',
+   fieldValue = '',
+   hint = '',
+   error = '',
+   required = false,
+   disabled = false,
+   min,
+   max,
+   onUpdate,
+}: InputProps) => {
+   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onUpdate(event.target.value);
+   };
+
+   return (
+      <FormField
+         type="input"
+         label={label}
+         description={description}
+         hint={hint}
+         error={error}
+         required={required}
+         inline={inline}
+         classes={`${classes.inputField} ${classes[size]} ${full ? classes.inputFieldFull : ''} 
+         ${full ? classes.inputFieldInline : ''} ${size === 'large' ? classes.inputFieldLarge : ''} ${customClasses}`}
+      >
+         <input
+            type={type}
+            className={`${classes.input} ${disabled ? classes.disabled : ''}`}
+            value={fieldValue}
+            onChange={handleChange}
+            placeholder={placeholder}
+            required={required}
+            min={type === 'number' ? min : undefined}
+            max={type === 'number' ? max : undefined}
+            disabled={disabled}
+         />
+      </FormField>
+   );
+};
+
+export default Input;

package/src/components/common/form/IntervalField/IntervalField.module.scss

@@ -0,0 +1,47 @@
+.intervalField {
+   .fieldInner {
+      flex-direction: column;
+      align-items: baseline;
+      gap: 8px;
+   }
+
+   &.fieldHasError {
+      input {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+
+   .intervalSelect {
+      max-width: 150px;
+   }
+
+   .intervalFieldOptions {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      .weekDays {
+         display: flex;
+         flex-direction: row;
+         align-items: center;
+         border: 1px solid var(--field-line-color);
+         border-radius: 6px;
+
+         button {
+            padding: 10px;
+            color: var(--content-text-color);
+            text-transform: capitalize;
+            font-size: 0.75rem;
+            span {
+               color: var(--icon-color);
+            }
+            &.weekDayActive {
+               background-color: var(--primary-color-light);
+               color: var(--primary-color);
+               span {
+                  color: var(--primary-color);
+               }
+            }
+         }
+      }
+   }
+}

package/src/components/common/form/IntervalField/IntervalField.tsx

@@ -0,0 +1,148 @@
+import { PlanInterval } from '../../../../@types/plans';
+import Icon from '../../Icon/Icon';
+import FormField from '../FormField/FormField';
+import Select from '../Select/Select';
+import TimePicker from '../TimePicker/TimePicker';
+import classes from './IntervalField.module.scss';
+
+type IntervalFieldProps = {
+   label?: string;
+   description?: string;
+   customClasses?: string;
+   hint?: string;
+   error?: string;
+   required?: boolean;
+   fieldValue: PlanInterval;
+   onUpdate: (value: PlanInterval) => void;
+};
+
+const IntervalField = ({
+   label,
+   fieldValue,
+   description,
+   customClasses = '',
+   hint = '',
+   error = '',
+   required = false,
+   onUpdate,
+}: IntervalFieldProps) => {
+   return (
+      <FormField
+         type="interval"
+         label={label}
+         hint={hint}
+         error={error}
+         required={required}
+         description={description}
+         classes={`${classes.intervalField} ${customClasses} ${error ? classes.fieldHasError : ''}`}
+      >
+         <div className={classes.intervalFieldInner}>
+            <div className={classes.intervalFieldOptions}>
+               <Select
+                  options={[
+                     { label: 'Hourly', value: 'hourly' },
+                     { label: 'Daily', value: 'daily' },
+                     { label: 'Weekly', value: 'weekly' },
+                     { label: 'Monthly', value: 'monthly' },
+                     { label: 'Every x Hours', value: 'hours' },
+                     { label: 'Every x Days', value: 'days' },
+                  ]}
+                  fieldValue={fieldValue.type}
+                  onUpdate={(val) =>
+                     onUpdate({
+                        ...fieldValue,
+                        type: val as PlanInterval['type'],
+                        time: fieldValue.time || '',
+                        days: fieldValue.days || '',
+                        hours: fieldValue.hours || '',
+                     })
+                  }
+                  full={true}
+                  customClasses={classes.intervalSelect}
+               />
+               {fieldValue.type === 'days' && (
+                  <>
+                     <div className={classes.weekDays}>
+                        {['sun', 'mon', 'tue', 'wed', 'thur', 'fri', 'sat'].map((d) => {
+                           return (
+                              <button
+                                 key={'weekday' + d}
+                                 className={fieldValue?.days?.includes(d) ? classes.weekDayActive : ''}
+                                 onClick={() =>
+                                    onUpdate({
+                                       ...fieldValue,
+                                       days: fieldValue?.days?.includes(d)
+                                          ? fieldValue.days?.replace(d + '-', '').replace(d, '')
+                                          : fieldValue.days + d + '-',
+                                    })
+                                 }
+                              >
+                                 <Icon type="check" size={10} /> {d}
+                              </button>
+                           );
+                        })}
+                     </div>
+                  </>
+               )}
+               {fieldValue.type !== 'hourly' && fieldValue.type !== 'hours' && (
+                  <>
+                     <span>at</span>
+                     <TimePicker fieldValue={fieldValue.time || '10:00AM'} onUpdate={(val) => onUpdate({ ...fieldValue, time: val })} />
+                  </>
+               )}
+
+               {fieldValue.type === 'weekly' && (
+                  <>
+                     <span>on</span>
+                     <Select
+                        options={[
+                           { label: 'Sunday', value: 'sun' },
+                           { label: 'Monday', value: 'mon' },
+                           { label: 'Tuesday', value: 'tue' },
+                           { label: 'Wednesday', value: 'wed' },
+                           { label: 'Thursday', value: 'thur' },
+                           { label: 'Friday', value: 'fri' },
+                           { label: 'Saturday', value: 'sat' },
+                        ]}
+                        fieldValue={fieldValue.days || 'sun'}
+                        onUpdate={(val: string) => onUpdate({ ...fieldValue, days: val })}
+                     />
+                  </>
+               )}
+               {fieldValue.type === 'monthly' && (
+                  <>
+                     <span>on</span>
+                     <Select
+                        options={[
+                           { label: '1st day of the Month', value: 'first' },
+                           { label: '15th day of the Month', value: 'middle' },
+                           { label: 'Last day of the Month', value: 'last' },
+                        ]}
+                        fieldValue={fieldValue.days || 'first'}
+                        onUpdate={(val: string) => onUpdate({ ...fieldValue, days: val })}
+                     />
+                  </>
+               )}
+               {fieldValue.type === 'hours' && (
+                  <>
+                     <span>Every</span>
+                     <Select
+                        options={[
+                           { label: '3 hours', value: '3hrs' },
+                           { label: '6 hours', value: '6hrs' },
+                           { label: '9 hours', value: '9hrs' },
+                           { label: '12 hours', value: '12hrs' },
+                           { label: '18 hours', value: '18hrs' },
+                        ]}
+                        fieldValue={fieldValue.hours || '3hrs'}
+                        onUpdate={(val: string) => onUpdate({ ...fieldValue, hours: val })}
+                     />
+                  </>
+               )}
+            </div>
+         </div>
+      </FormField>
+   );
+};
+
+export default IntervalField;

package/src/components/common/form/MultiSelect/MultiSelect.module.scss

@@ -0,0 +1,157 @@
+.multiSelectField {
+   .search {
+      border: 1px solid;
+      border-color: var(--field-line-color);
+      border-radius: 4px 4px 0 0;
+      border-bottom: 0;
+      position: relative;
+      top: -1px;
+      color: var(--icon-color);
+      span {
+         position: absolute;
+         margin: 5px;
+      }
+      button {
+         position: absolute;
+         right: 0;
+         margin: 5px;
+         color: var(--icon-color);
+         span {
+            position: relative;
+            margin: 0;
+         }
+      }
+      input {
+         padding: 8px 12px;
+         padding-left: 24px;
+         width: 100%;
+         border: none;
+         box-sizing: border-box;
+         background-color: var(--content-background-color);
+         &:focus {
+            outline: none;
+            background-color: var(--field-line-color);
+         }
+      }
+   }
+
+   .dropdown {
+      width: auto;
+      min-width: 150px;
+      position: relative;
+      margin-top: 0px;
+
+      .selected {
+         padding: 6px 10px;
+         border: 1px solid;
+         background: var(--field-bg);
+         border-color: var(--field-line-color);
+         border-radius: 6px;
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         cursor: pointer;
+         span {
+            user-select: none;
+            font-size: 0.75rem;
+            i {
+               padding: 1px 5px;
+               background-color: var(--line-color);
+               border-radius: 20px;
+               font-size: 0.6rem;
+               margin-left: 5px;
+               font-style: normal;
+            }
+         }
+         img {
+            margin-right: 5px;
+            max-height: 16px;
+            width: auto;
+            vertical-align: top;
+         }
+
+         .dropBtn {
+            background: transparent;
+            color: var(--icon-color);
+         }
+      }
+
+      .lists {
+         border: 1px solid var(--line-color);
+         margin-top: -1px;
+         position: absolute;
+         z-index: 9999;
+         background: var(--field-bg);
+         width: calc(100% - 2px);
+         border-radius: 0 0 4px 4px;
+         max-height: 210px;
+         overflow: auto;
+         font-size: 0.75rem;
+         ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+
+            li {
+               padding: 8px 10px;
+               cursor: pointer;
+               text-transform: capitalize;
+               span svg {
+                  color: var(--icon-color);
+               }
+               img {
+                  margin-right: 5px;
+                  max-height: 16px;
+                  width: auto;
+                  vertical-align: top;
+               }
+               :global(.icon) {
+                  margin-right: 5px;
+                  opacity: 0.7;
+               }
+
+               &.selectedItem {
+                  background: var(--primary-color-light);
+                  color: var(--primary-hover-color);
+                  span svg {
+                     color: var(--primary-hover-color);
+                  }
+               }
+
+               &:hover {
+                  background: var(--background-color);
+                  color: inherit;
+               }
+            }
+         }
+      }
+   }
+
+   &.multiSelectFieldFull {
+      .dropdown {
+         width: 100%;
+      }
+   }
+
+   &.multiSelectFieldLarge {
+      .selected {
+         padding: 12px;
+      }
+   }
+   &.multiSelectFieldDisabled {
+      .selected {
+         background-color: var(--line-color);
+      }
+   }
+
+   &.fieldHasError {
+      .selected {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+   &.multiSelectFieldOpen {
+      .selected {
+         border-radius: 6px 6px 0 0;
+      }
+   }
+}