@bbl-digital/snorre 3.1.57 → 3.1.59

package/lib/utils/formatGraphPrice.js

@@ -1,28 +1,21 @@
 const firstIndexIsNegative = value => value.charAt(0) === '-';
-
 const precisionValueIsZero = (value, maxEnd) => {
   return firstIndexIsNegative(value) ? value.charAt(2 + maxEnd) === '0' : value.charAt(1 + maxEnd) === '0';
 };
-
 const setLeftSide = (value, sliceLeft) => {
   return firstIndexIsNegative(value) ? `-${value.slice(sliceLeft.start + 1, sliceLeft.end + 1)}` : value.slice(sliceLeft.start, sliceLeft.end);
 };
-
 const setRightSide = (value, sliceRight, sliceLeftEnd) => {
   return precisionValueIsZero(value, sliceLeftEnd) ? '' : `.${value.slice(sliceRight.start, sliceRight.end)}`;
 };
-
 const getFormat = (value, sliceLeft, sliceRight, sizeTerm) => {
   return `${setLeftSide(value, sliceLeft)}${setRightSide(value, sliceRight, sliceLeft.end)}${sizeTerm}`;
 };
-
 const formatAxisPrice = val => {
   const value = String(val);
-
   if (value.match(/^(-\d)|(\d)+$/)) {
     const santizitedValue = firstIndexIsNegative(value) ? value.replace('-', '') : value;
     const count = santizitedValue.length;
-
     if (count > 3) {
       switch (count) {
         case 4:
@@ -33,7 +26,6 @@ const formatAxisPrice = val => {
             start: 1,
             end: 2
           }, 'k');
-
         case 5:
           return getFormat(value, {
             start: 0,
@@ -42,7 +34,6 @@ const formatAxisPrice = val => {
             start: 2,
             end: 3
           }, 'k');
-
         case 6:
           return getFormat(value, {
             start: 0,
@@ -51,7 +42,6 @@ const formatAxisPrice = val => {
             start: 3,
             end: 4
           }, 'k');
-
         case 7:
           return getFormat(value, {
             start: 0,
@@ -60,7 +50,6 @@ const formatAxisPrice = val => {
             start: 1,
             end: 2
           }, 'm');
-
         case 8:
           return getFormat(value, {
             start: 0,
@@ -69,7 +58,6 @@ const formatAxisPrice = val => {
             start: 2,
             end: 3
           }, 'm');
-
         case 9:
           return getFormat(value, {
             start: 0,
@@ -78,7 +66,6 @@ const formatAxisPrice = val => {
             start: 3,
             end: 4
           }, 'm');
-
         default:
           return getFormat(value, {
             start: 0,
@@ -90,8 +77,6 @@ const formatAxisPrice = val => {
       }
     }
   }
-
   return value;
 };
-
 export { formatAxisPrice };

package/lib/utils/image.js

@@ -1,12 +1,9 @@
 const convertBlobToObjectUrl = blob => {
   let url = '';
   const urlCreator = window.URL || window.webkitURL;
-
   if (blob) {
     url = urlCreator.createObjectURL(blob);
   }
-
   return url;
 };
-
 export { convertBlobToObjectUrl };

package/lib/utils/pagination.js

@@ -3,24 +3,19 @@ const getCurrentPage = (take, skip) => {
   if (skip === 0) return 1;
   return Math.floor(skip / take + 1);
 };
-
 const getSkippedItems = (pageNumber, take) => {
   if (pageNumber === undefined || take === undefined) return NaN;
   return (pageNumber - 1) * take;
 };
-
 const getHasPreviousPages = (currentPage, totalPages) => {
   return currentPage > 3 && totalPages > 5;
 };
-
 const getHasMorePages = (currentPage, totalPages) => {
   return currentPage < totalPages - 2 && totalPages > 5;
 };
-
 const getFirstButtonIndex = (currentPage, totalPages) => {
   if (totalPages <= 5 || currentPage <= 3) return 0;
   if (totalPages - currentPage <= 2) return totalPages - 5;
   return currentPage - 3;
 };
-
 export { getCurrentPage, getSkippedItems, getHasPreviousPages, getHasMorePages, getFirstButtonIndex };

package/lib/utils/phone.js

@@ -1,38 +1,33 @@
 const formatBusinessOrMobilePhone = phone => {
   // check with match if number starts with 4 or 9
   const isMobilePhone = phone.match(/^(4|9)(\d{7})$/);
-
   if (isMobilePhone) {
-    const [, prefix, numb] = isMobilePhone; // Mobile phone formatting 999 88 777
-
+    const [, prefix, numb] = isMobilePhone;
+    // Mobile phone formatting 999 88 777
     return `${prefix}${numb.slice(0, 2)} ${numb.slice(2, 4)} ${numb.slice(4, 7)}`;
-  } // Business formatting 11 22 33 44
-
+  }
 
+  // Business formatting 11 22 33 44
   return `${phone.slice(0, 2)} ${phone.slice(2, 4)} ${phone.slice(4, 6)} ${phone.slice(6, 8)}`;
 };
-
 const getFormatedPhone = phone => {
-  const cleaned = String(phone).replace(/ /g, ''); // Check if phone starts with 0047
+  const cleaned = String(phone).replace(/ /g, '');
 
+  // Check if phone starts with 0047
   const zeros = cleaned.match(/^(0047|\+47)(\d{8})$/);
-
   if (zeros) {
     const [, prefix, numb] = zeros;
     return `${prefix} ${formatBusinessOrMobilePhone(numb)}`;
-  } // Check if phone starts with +47
-
+  }
 
+  // Check if phone starts with +47
   let plus = cleaned.match(/^(\+47)(\d{3})(\d{2})(\d{3})$/);
-
   if (plus) {
     const [, prefix, numb] = plus;
     return `${prefix} ${formatBusinessOrMobilePhone(numb)}`;
   }
-
   if (cleaned.length === 8) return formatBusinessOrMobilePhone(cleaned);
   if (!phone) return 'Ikke angitt';
   return cleaned;
 };
-
 export { getFormatedPhone };

package/lib/utils/time.js

@@ -3,32 +3,29 @@ export const DEFAULT_VALUE_SHORT = `00${DEFAULT_DIVIDER}00`;
 export const DEFAULT_VALUE_SHORT_NULLABLE = `--${DEFAULT_DIVIDER}--`;
 export const DEFAULT_VALUE_FULL = `00${DEFAULT_DIVIDER}00${DEFAULT_DIVIDER}00`;
 export const DEFAULT_VALUE_FULL_NULLABLE = `--${DEFAULT_DIVIDER}--${DEFAULT_DIVIDER}--`;
-
 const formatTimeItem = (value, isNullable = false) => {
   return `${value || ''}${isNullable ? '--' : '00'}`.substring(0, 2);
 };
+
 /**
  * Checks if input is a number
  */
-
-
 export function isNumber(value) {
   const number = Number(value);
   return !isNaN(number) && String(value) === String(number);
 }
+
 /**
  * Validates time to keep the format:
  * default 00:00 or 00:00:00 if showSeconds is true
  *
  * The function also keeps track of the cursor position
  */
-
 export const validateTimeAndCursor = (showSeconds = false, value = '', defaultValue = '', divider = DEFAULT_DIVIDER, cursorPosition = 0, isNullable = false) => {
   const [oldHH, oldMM, oldSS] = defaultValue.split(divider);
   let newCursorPosition = Number(cursorPosition);
   let [HH, MM, SS] = String(value).split(divider);
   HH = formatTimeItem(HH, isNullable);
-
   if (Number(HH[0]) > 2) {
     HH = oldHH;
     newCursorPosition -= 1;
@@ -40,31 +37,26 @@ export const validateTimeAndCursor = (showSeconds = false, value = '', defaultVa
       HH = '23';
     }
   }
-
   MM = formatTimeItem(MM, isNullable);
-
   if (Number(MM[0]) > 5) {
     MM = oldMM;
     newCursorPosition -= 1;
   }
-
   if (showSeconds) {
     SS = formatTimeItem(SS, isNullable);
-
     if (Number(SS[0]) > 5) {
       SS = oldSS;
       newCursorPosition -= 1;
     }
   }
-
   const validatedValue = showSeconds ? `${HH}${divider}${MM}${divider}${SS}` : `${HH}${divider}${MM}`;
   return [validatedValue, newCursorPosition];
 };
+
 /**
  * Converts a Date to String with the format:
  * default 00:00 or 00:00:00 if showSeconds is true
  */
-
 export const handleDateToStringConvertion = (date, showSeconds) => {
   const d = new Date(date);
   const hours = d.getHours().toString().padStart(2, '0');
@@ -72,12 +64,12 @@ export const handleDateToStringConvertion = (date, showSeconds) => {
   const seconds = d.getSeconds().toString().padStart(2, '0');
   return `${hours}${DEFAULT_DIVIDER}${minutes}${showSeconds ? `${DEFAULT_DIVIDER}${seconds}` : ''}`;
 };
+
 /**
  * Converts a String to Date with the format:
  * If value is formatted as 00:00:00 it will return the date with chosen seconds
  * If value is formatted as 00:00 it will return the date with seconds set to 00
  */
-
 export const handleStringToDateConvertion = (value, originalDate) => {
   const [hours, minutes, seconds] = value.split(DEFAULT_DIVIDER);
   const date = originalDate || new Date(0, 0, 0);
@@ -96,10 +88,8 @@ export const getTimeFromHours = hours => {
 };
 export const getTimeStringFromHours = hours => {
   const time = getTimeFromHours(hours);
-
   if (time.days) {
     return `${time.days} dag${time.days > 1 ? 'er' : ''} og ${time.hours} time${time.hours !== 1 ? 'r' : ''}`;
   }
-
   return `${time.hours} time${time.hours !== 1 ? 'r' : ''}`;
 };

package/lib/utils/url.js

@@ -1,7 +1,6 @@
 const getDomainFromUrl = url => {
   return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '').split('/')[0];
 };
-
 const getUrlWithProtocol = url => {
   if (url.startsWith('http') || url.startsWith('//')) {
     return url;
@@ -9,5 +8,4 @@ const getUrlWithProtocol = url => {
     return 'https://' + url;
   }
 };
-
 export { getDomainFromUrl, getUrlWithProtocol };

package/lib/utils/useSnorreTheme.d.ts

@@ -0,0 +1,11 @@
+import { IAppTheme } from '../app-shell/theme';
+declare type Props = {
+    themeUrl: string;
+    defaultTextColor?: string;
+};
+declare const useSnorreTheme: ({ themeUrl, defaultTextColor }: Props) => {
+    appTheme: IAppTheme | undefined;
+    globals: string | undefined;
+};
+export default useSnorreTheme;
+//# sourceMappingURL=useSnorreTheme.d.ts.map

package/lib/utils/useSnorreTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnorreTheme.d.ts","sourceRoot":"","sources":["../../src/packages/utils/useSnorreTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAa,MAAM,oBAAoB,CAAA;AAEzD,aAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,cAAc,mCAAoC,KAAK;;;CAgC5D,CAAA;AACD,eAAe,cAAc,CAAA"}

package/lib/utils/useSnorreTheme.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { initTheme } from '../app-shell/theme';
+const useSnorreTheme = ({
+  themeUrl,
+  defaultTextColor
+}) => {
+  const [appTheme, setAppTheme] = useState();
+  const [theme, setTheme] = useState();
+  const [globals, setGlobals] = useState();
+  useEffect(() => {
+    const getTheme = async themeUrl => {
+      const pstyle = fetch(`${themeUrl}/styles.json`);
+      const pglobal = fetch(`${themeUrl}/globals.css`);
+      const [styles, global] = await Promise.all([pstyle, pglobal]);
+      const p = await styles.json();
+      const g = await global.text();
+      setTheme(p);
+      setGlobals(g);
+    };
+    getTheme(themeUrl);
+  }, [themeUrl]);
+  useEffect(() => {
+    if (!theme) return;
+    setAppTheme(initTheme(theme, defaultTextColor));
+  }, [theme, defaultTextColor]);
+  return {
+    appTheme,
+    globals
+  };
+};
+export default useSnorreTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "3.1.57",
+  "version": "3.1.59",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -26,6 +26,7 @@
     "focus-trap-react": "^10.0.0",
     "match-sorter": "^6.3.1",
     "mdx-state": "^0.0.4",
+    "nuka-carousel": "^5.5.0",
     "react-aria": "^3.23.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-day-picker": "^8.3.4",

package/esm/core/Autocomplete/utils/useHandleOptionsHeight.js

@@ -1,16 +0,0 @@
-import { createRef, useEffect, useState } from 'react';
-
-const useHandleOptionsHeight = () => {
-  const [optionsHeight, setOptionsHeight] = useState(0);
-  const optionsRef = /*#__PURE__*/createRef();
-  useEffect(() => {
-    const rect = optionsRef.current?.getBoundingClientRect();
-    setOptionsHeight(rect?.height || 0); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [optionsRef.current]);
-  return {
-    optionsHeight,
-    optionsRef
-  };
-};
-
-export default useHandleOptionsHeight;

package/esm/core/Datepicker/yearMonthForm.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import { MONTHS } from '../../utils/dates';
-import { StyledSelect, Div } from './styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-const YearMonthForm = ({
-  onChange,
-  date,
-  fromDate,
-  toDate
-}) => {
-  const months = MONTHS;
-  const years = [];
-
-  for (let i = fromDate.getFullYear(); i <= toDate.getFullYear(); i += 1) {
-    years.push(i);
-  }
-
-  const changeMonth = e => {
-    let newDate = date;
-    newDate.setMonth(e.target.value);
-    if (newDate > toDate) newDate = toDate;
-    onChange(newDate);
-  };
-
-  const changeYear = e => {
-    let newDate = date;
-    newDate.setFullYear(e.target.value);
-    if (newDate > toDate) newDate = toDate;
-    onChange(newDate);
-  };
-
-  return /*#__PURE__*/_jsxs(Div, {
-    className: "DayPicker-Caption",
-    children: [/*#__PURE__*/_jsx(StyledSelect, {
-      name: "month",
-      onChange: changeMonth,
-      value: date.getMonth(),
-      children: months.map((month, i) => /*#__PURE__*/_jsx("option", {
-        value: i,
-        children: month
-      }, month))
-    }), /*#__PURE__*/_jsx(StyledSelect, {
-      name: "year",
-      onChange: changeYear,
-      value: date.getFullYear(),
-      children: years.map(year => /*#__PURE__*/_jsx("option", {
-        value: year,
-        children: year
-      }, year))
-    })]
-  });
-};
-
-export default YearMonthForm;

package/esm/core/EditorOld/config.js

@@ -1,69 +0,0 @@
-export const basicToolbar = {
-  options: ['inline', 'list'],
-  inline: {
-    options: ['bold', 'italic', 'underline']
-  }
-};
-export const richToolbar = {
-  options: ['blockType', 'inline', 'list', 'textAlign', 'link'],
-  inline: {
-    options: ['bold', 'italic', 'underline']
-  },
-  textAlign: {
-    options: ['left', 'center', 'right', 'justify']
-  },
-  blockType: {
-    inDropdown: true,
-    options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']
-  },
-  link: {
-    showOpenOptionOnHover: true,
-    defaultTargetOption: '_blank',
-    options: ['link', 'unlink']
-  }
-};
-export const htmlToEntity = (nodeName, node, createEntity) => {
-  if (nodeName === 'a') {
-    return createEntity('LINK', 'MUTABLE', {
-      url: node.href
-    });
-  }
-};
-export const getStrippedHtml = html => {
-  return html.replace(/<img[^>]*>/g, '');
-};
-export const editorLabels = {
-  // Generic
-  'generic.add': 'Legg til',
-  'generic.cancel': 'Avbryt',
-  // Inline
-  'components.controls.inline.bold': 'Fet',
-  'components.controls.inline.italic': 'Kursiv',
-  'components.controls.inline.underline': 'Understrek',
-  // List
-  'components.controls.list.unordered': 'Punktliste',
-  'components.controls.list.ordered': 'Nummerliste',
-  'components.controls.list.indent': 'Innrykk',
-  'components.controls.list.outdent': 'Utrykk',
-  // Text align
-  'components.controls.textAlign.left': 'Venstrejuster',
-  'components.controls.textAlign.center': 'Midtstill',
-  'components.controls.textAlign.right': 'Høyrejuster',
-  'components.controls.textAlign.justify': 'Blokkjuster',
-  // Block type
-  'components.controls.blocktype.normal': 'Avsnitt',
-  'components.controls.blocktype.h1': 'Overskrift 1',
-  'components.controls.blocktype.h2': 'Overskrift 2',
-  'components.controls.blocktype.h3': 'Overskrift 3',
-  'components.controls.blocktype.h4': 'Overskrift 4',
-  'components.controls.blocktype.h5': 'Overskrift 5',
-  'components.controls.blocktype.h6': 'Overskrift 6',
-  // Link
-  'components.controls.link.linkTitle': 'Tittel',
-  'components.controls.link.linkTarget': 'URL',
-  'components.controls.link.linkTargetOption': 'Åpne i ny fane',
-  'components.controls.link.link': 'Legg til lenke',
-  'components.controls.link.unlink': 'Fjern lenke',
-  // Remove
-  'components.controls.remove.remove': 'Fjern'
-};

package/esm/core/EditorOld/index.js

@@ -1,147 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import React, { useState } from 'react';
-import { Editor as Wysiwyg } from 'react-draft-wysiwyg';
-import { convertToRaw, EditorState, Modifier } from 'draft-js';
-import { stateFromHTML } from 'draft-js-import-html';
-import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
-import { CounterWrapper, ErrorWrapper, Label, RelativeDiv, styles } from './styles';
-import { basicToolbar, editorLabels, getStrippedHtml, htmlToEntity, richToolbar } from './config';
-import { convertToHTML, convertFromHTML } from 'draft-convert';
-import Text from '../Text';
-import { useTheme } from '@emotion/react';
-import IconErrorOutline from '../../icons/General/IconErrorOutline';
-import draftToHtml from 'draftjs-to-html';
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
-/**
- *
- * TODO: REMOVE AND CLEANUP PACKAGES
- *
- */
-const EditorOld = ({
-  initialValue,
-  height = 300,
-  maxHeight,
-  maxlength,
-  maxlengthType = 'plaintext',
-  maxlengthText,
-  withCounter,
-  invalidMessage,
-  label,
-  customToolbar,
-  type = 'basic',
-  onChange,
-  onBlur
-}) => {
-  const theme = useTheme();
-  const [maxlengthError, setMaxlengthError] = useState(null);
-  const [charCount, setCharCount] = useState(0);
-  const [editorState, setEditorState] = useState(initialValue ? EditorState.createWithContent(convertFromHTML({
-    htmlToEntity
-  })(initialValue)) : EditorState.createEmpty());
-
-  const handleEditorChange = state => {
-    handleValidity(state);
-    setEditorState(state);
-    const plainText = state.getCurrentContent().getPlainText();
-    const html = draftToHtml(convertToRaw(state.getCurrentContent()));
-    onChange(plainText.length > 0 ? html : ''); // return empty if no content
-
-    if (withCounter && maxlength) {
-      setCharCount(maxlengthType === 'html' ? html.length : plainText.length);
-    }
-  };
-
-  const handleValidity = state => {
-    if (!maxlength) {
-      setMaxlengthError(null);
-      return;
-    }
-
-    const plaintext = state.getCurrentContent().getPlainText();
-    const html = convertToHTML(state.getCurrentContent());
-
-    if (maxlengthType === 'html' && html.length > maxlength) {
-      setMaxlengthError(maxlengthText ? maxlengthText : 'Text is too long');
-      return;
-    }
-
-    if (maxlengthType === 'plaintext' && plaintext.length > maxlength) {
-      setMaxlengthError(maxlengthText ? maxlengthText : 'Text is too long');
-      return;
-    }
-
-    setMaxlengthError(null);
-  };
-
-  const Counter = _jsx(CounterWrapper, {
-    children: _jsxs(Text, {
-      children: [charCount, "/", maxlength]
-    })
-  });
-
-  const handlePaste = (text, html, editorState, onChange) => {
-    if (!html) return false;
-    const strippedHtml = getStrippedHtml(html);
-    const blockMap = stateFromHTML(strippedHtml).blockMap;
-    const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
-    onChange(EditorState.push(editorState, newState, 'insert-fragment'));
-    return true;
-  };
-
-  const getToolbar = () => {
-    switch (type) {
-      case 'basic':
-        return basicToolbar;
-
-      case 'rich':
-        return richToolbar;
-
-      case 'custom':
-        return customToolbar;
-
-      default:
-        return undefined;
-    }
-  };
-
-  return _jsxs("div", {
-    css: theme => [styles.default(theme, height), maxHeight && styles.maxHeight(maxHeight)],
-    children: [label && _jsx(Label, {
-      children: label
-    }), _jsxs(RelativeDiv, {
-      children: [_jsx(Wysiwyg, {
-        editorState: editorState,
-        toolbarClassName: "toolbar-wrapper",
-        wrapperClassName: "editor-wrapper",
-        editorClassName: "content-wrapper",
-        onEditorStateChange: handleEditorChange,
-        toolbar: getToolbar(),
-        localization: {
-          locale: 'nb_NO',
-          translations: editorLabels
-        },
-        stripPastedStyles: type !== 'rich',
-        onBlur: () => onBlur && onBlur(),
-        handlePastedText: handlePaste
-      }), maxlength && withCounter && Counter]
-    }), (maxlengthError || invalidMessage) && _jsxs(ErrorWrapper, {
-      children: [maxlengthError && _jsxs(Text, {
-        color: theme.alert,
-        children: [_jsx(IconErrorOutline, {
-          size: "16px",
-          color: theme.alert
-        }), ' ', maxlengthError]
-      }), invalidMessage && _jsxs(Text, {
-        color: theme.alert,
-        children: [_jsx(IconErrorOutline, {
-          size: "16px",
-          color: theme.alert
-        }), ' ', invalidMessage]
-      })]
-    })]
-  });
-};
-
-export default EditorOld;