intelicoreact 0.0.2 → 0.0.6

package/src/Atomic/UI/Calendar/Calendar.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Calendar from './Calendar';
+
+global.lng = 'en';
+
+export default {
+  title: 'UI/Calendar',
+  component: Calendar,
+};
+
+const Template = args => (
+  <div style={{ width: '320px' }}>
+    <Calendar {...args} />
+  </div>
+);
+
+export const CalendarTemplate = Template.bind({});
+
+CalendarTemplate.args = {
+  date: '12/03/2021',
+  params: {},
+  setDate: () => null,
+};

package/src/Atomic/{FormElements → UI}/Hint/Hint.js

@@ -1,13 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import cn from 'classnames';
-import { MdHelpOutline } from 'react-icons/md';
-import { IoMdHelpCircle } from 'react-icons/io';
+import { HelpCircle } from 'react-feather';
 
 import './Hint.scss';
 
-const RC = 'hint';
-
-const Hint = ({ hint, side = 'right', className, label = '', iconOutline }) => {
+const Hint = ({ hint, side = 'right', className, label = '' }) => {
   const [isOpen, setIsOpen] = useState(false);
   const hintRef = useRef(null);
 
@@ -23,13 +20,13 @@ const Hint = ({ hint, side = 'right', className, label = '', iconOutline }) => {
   });
 
   return (
-    <div className={cn(RC, className)} ref={hintRef}>
-      <button onClick={() => setIsOpen(!isOpen)} className={cn(`${RC}__button`, { [`${RC}__button_active`]: isOpen })}>
-        {iconOutline ? <MdHelpOutline /> : <IoMdHelpCircle className="hint__icon" />}
+    <div className={cn('hint', className)} ref={hintRef}>
+      <button onClick={() => setIsOpen(!isOpen)} className={cn('hint__button', { hint__button_active: isOpen })}>
+        <HelpCircle className="hint__icon" />
         {label && <span className={cn('hint__label', { 'color--primary': isOpen })}>{label[0].toUpperCase() + label.slice(1)}</span>}
       </button>
 
-      {isOpen && <div className={cn(`${RC}__text`, `${RC}__text_${side}`)}>{hint}</div>}
+      {isOpen && <div className={cn('hint__text', `hint__text_${side}`)}>{hint}</div>}
     </div>
   );
 };

package/{dist/Atomic/FormElements → src/Atomic/UI}/Hint/Hint.scss

@@ -1,5 +1,3 @@
-@import "../../../../scss/vars";
-
 .hint {
   position: relative;
   display: inline-block;
@@ -12,24 +10,22 @@
     svg {
       width: 16px;
       height: 16px;
-      margin-right: 3px;
-    }
-
-    &:hover {
-      color: $color--primary;
+      margin-right: 5px;
     }
 
     &:hover,
     &_active {
-      svg > path {
-        fill: $color--primary;
+      color: #6b81dd;
+
+      svg {
+        color: #6b81dd;
       }
     }
   }
 
   &__text {
     position: absolute;
-    background-color: $color--primary;
+    background-color: #6b81dd;
     color: #fff;
     font-size: 10px;
     line-height: 16px;
@@ -49,7 +45,7 @@
       position: absolute;
       width: 8.5px;
       height: 8.5px;
-      background-color: $color--primary;
+      background-color: #6b81dd;
       transform: rotate(45deg);
     }
 
@@ -91,6 +87,6 @@
   }
 
   &__icon {
-    color: #9AA0B9;
+    color: #9aa0b9;
   }
 }

package/src/Atomic/{FormElements → UI}/Hint/Hint.stories.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import Hint from './Hint';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
-  title: 'Hint',
+  title: 'UI/Hint',
   component: Hint,
   argTypes: {
     side: {
@@ -31,4 +30,5 @@ HintTemplate.args = {
   hint: ' hint text hint text hint text hint text hint text hint text hint text hint text',
   side: 'right',
   label: ''
+  // isIconOutline: false
 };

package/src/Atomic/UI/Price/Price.js

@@ -0,0 +1,20 @@
+import React from 'react';
+const Price = ({ value, unit = '$', unitAfter, className }) => {
+  if (value === undefined || value === null) return null;
+  let formatted;
+  if (value.length <= 3) {
+    formatted = parseFloat(value).toFixed(2);
+  } else {
+    formatted = Number(value.toString().replace(/[+*?$^(,)]/g, '')).toLocaleString('en-US');
+  }
+
+  return (
+    <div className={`price ${className}`}>
+      {!unitAfter && unit}
+      {formatted}
+      {unitAfter && unit}
+    </div>
+  );
+};
+
+export default Price;

package/src/Atomic/UI/Price/Price.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Price from './Price';
+
+global.lng = 'en';
+
+export default {
+  title: 'UI/Price',
+  component: Price,
+  argTypes: {
+    value: {
+      description: 'string',
+    },
+    unit: {
+      description: 'string'
+    },
+    unitAfter: {
+      description: 'boolean'
+    }
+  }
+};
+
+const Template = args => <Price {...args} />;
+
+export const PriceTemplate = Template.bind({});
+
+PriceTemplate.args = {
+  value: '15000',
+  unit: '$',
+  unitAfter: false
+};

package/src/Atomic/{FormElements → UI}/Status/Status.js

@@ -3,9 +3,7 @@ import cn from 'classnames';
 
 import './Status.scss';
 
-const Status = ({ value, status, disabled, type, active = 0, pause = 0, className, noBackground }) => {
-  const label = (value || status)?.[0].toUpperCase() + (value || status)?.slice(1);
-
+const Status = ({ label, status, disabled, type, active = 0, pause = 0, className, noBackground, children }) => {
   return (
     <div className={cn({ disabled }, className)}>
       {type === 'number' ? (
@@ -30,7 +28,7 @@ const Status = ({ value, status, disabled, type, active = 0, pause = 0, classNam
             { 'color--gray-gull': noBackground && status === 'pause' && !className }
           )}
         >
-          {label}
+          {children || label}
         </div>
       )}
     </div>

package/src/Atomic/{FormElements → UI}/Status/Status.stories.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import Status from './Status';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {
-  title: 'Status',
+  title: 'UI/Status',
   component: Status,
   argTypes: {
     status: {
@@ -21,6 +19,9 @@ export default {
     },
     disabled: {
       description: 'boolean'
+    },
+    children: {
+      description: 'any rect children'
     }
   }
 };

package/src/Functions/useClickOutside.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+export const useClickOutside = (ref, setOut, open) => {
+  function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+};

package/src/Functions/utils.js

@@ -40,3 +40,9 @@ export const logout = () => {
   window.localStorage.removeItem('tokenExpires');
   window.location.reload();
 };
+
+export const getStyles = (el, prop) => {
+  if (!el) return null;
+  if (!prop) return window.getComputedStyle(el);
+  return window.getComputedStyle(el).getPropertyValue(prop);
+};

package/src/Molecular/FormElements/FormElement.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+import Label from '../../Atomic/FormElements/Label/Label';
+import './FormElement.scss';
+
+const RC = 'form-element';
+
+const FormElement = ({ label, required, children, error, className, hint }) => {
+  return (
+    <div className={cn(className, RC)}>
+      {label && <Label className={`${RC}__label`} label={label} hint={hint} isRequired={required} />}
+      {children}
+      {error && <span className={`${RC}__error`}>{error}</span>}
+    </div>
+  );
+};
+
+export default FormElement;

package/src/Molecular/FormElements/FormElement.scss

@@ -0,0 +1,8 @@
+.form-element__error {
+  margin-top: 2px;
+  margin-left: 1px;
+  position: absolute;
+  display: block;
+  font-size: 10px;
+  color: #f06d8d;
+}

package/src/Molecular/FormElements/FormElement.stories.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import Input from '../../Atomic/FormElements/Input/Input';
+import FormElement from './FormElement';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/Form Element',
+  component: FormElement,
+  argTypes: {
+    label: {
+      description: 'string/JSX'
+    },
+    children: {
+      description: 'JSX'
+    },
+    error: {
+      description: 'string - print error if is errored'
+    },
+    required: {
+      description: 'boolean'
+    },
+    className: {
+      description: 'string'
+    },
+    hint: {
+      description: 'object {text: string, hintSide: bottom/right',
+      control: {
+        type: 'object'
+      }
+    }
+  }
+};
+
+const Template = args => {
+  return (
+    <FormElement {...args}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <Input error={args.error} />
+    </FormElement>
+  );
+};
+
+export const InputTemplate = Template.bind({});
+
+InputTemplate.args = {
+  label: 'Text label',
+  error: 'error',
+  required: true,
+  hint: {
+    text: 'hint',
+    hintSide: 'bottom'
+  },
+  numStep: 1,
+  min: '0',
+  max: '5',
+  placeholder: 'Placeholder',
+  mask: ''
+};

package/src/scss/main.scss

@@ -35,6 +35,6 @@ button {
 
 .main {
     &__wrap {
-        display: flex;  
+        display: flex;
     }
-}
+}