@bbl-digital/snorre 4.0.0-beta.1 → 4.0.0-beta.10

package/esm/core/Autocomplete/hooks/useAutocomplete.js

@@ -2,7 +2,6 @@
 import { matchSorter } from 'match-sorter';
 import { useEffect, useMemo, useState } from 'react';
 import { useDebounce } from '../../utils/debounce';
-
 const useAutocomplete = props => {
   const [showValues, setShowValues] = useState(!!props.isOpen);
   const [highlightedIndex, setHighlightedIndex] = useState(null);
@@ -11,42 +10,36 @@ const useAutocomplete = props => {
   const debouncedValue = useDebounce(value, props.debounceDelay || 0);
   const [inputValues, setInputValues] = useState(props.values);
   const labelKey = props.labelFromValues || 'label';
-
   const handleValueClick = value => {
     props.onSelectItem?.(value);
     if (props.fuzzy) setValueChanged(value[labelKey]);
     setShowValues(false);
   };
-
   const clearSelectedItem = () => handleValueClick({
     [labelKey]: '',
     [props.keyFromValues || 'key']: ''
   });
-
   const onInputChange = e => {
     setInputDirty(true);
     if (renderedValues) setHighlightedIndex(0);
-    setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
-
+    setValueChanged(e.target.value);
+    // Should not use onChange whenever we have fuzzy search on
     if (props.fuzzy) {
       setShowValues(Boolean(value));
       return;
     }
-
     if (props.onChange) props.onChange(e);
   };
-
   const handleOnInputClick = () => {
     if (renderedValues?.length) setHighlightedIndex(0);
     setShowValues(true);
   };
-
   const onFuzzyBlur = e => {
-    if (e.target.value === props.value) return; // If target value is the same as a value from the values array, we should set the value for the user
+    if (e.target.value === props.value) return;
 
+    // If target value is the same as a value from the values array, we should set the value for the user
     if (inputValues?.length) {
       const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
-
       if (valueInInputValues) {
         const val = valueInInputValues[labelKey];
         setValueChanged(val);
@@ -55,163 +48,136 @@ const useAutocomplete = props => {
       }
     }
   };
-
   const onFuzzyFocus = () => {
     setValueChanged('');
     if (props.values?.length) setShowValues(true);
   };
-
   const renderedValues = useMemo(() => {
     if (!props.values?.length) return [];
-
     if (props.fuzzy) {
       const fuzzyOptions = {
         keys: [labelKey]
       };
       return matchSorter(props.values, value || '', fuzzyOptions);
     }
-
     return props.values;
   }, [value]);
-
   const handleEscape = () => {
     setShowValues(false);
     setHighlightedIndex(null);
   };
-
   const handleClear = () => {
     clearSelectedItem();
     handleEscape();
   };
-
   const handleEnter = e => {
     e.preventDefault();
     e.stopPropagation();
     if (!showValues) return;
-
     if (!inputValues?.length) {
       // If there is no autocomplete value in the list, send object with just { value }
       handleValueClick({
         value
       });
     }
-
     if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
-
     const item = renderedValues[highlightedIndex];
     handleValueClick(item);
     setShowValues(false);
   };
-
   const handleUp = e => {
     e.preventDefault();
     e.stopPropagation();
     if (!showValues) return;
-
     if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
-
     const newHighlightIndex = highlightedIndex - 1;
-
     if (newHighlightIndex < 0) {
       setHighlightedIndex(null);
       setShowValues(false);
       return;
     }
-
     setHighlightedIndex(newHighlightIndex);
   };
-
   const handleDown = e => {
     if (!showValues) return;
     e.preventDefault();
     e.stopPropagation();
-
     if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
-
     const newHighlightIndex = highlightedIndex + 1;
-
     if (newHighlightIndex === renderedValues.length) {
       setHighlightedIndex(null);
       setShowValues(false);
       return;
     }
-
     setHighlightedIndex(newHighlightIndex);
   };
-
   const handleCustomOnKeyDown = e => {
     const {
       key
     } = e;
-
     if (key === 'Escape') {
       handleEscape();
       return;
     }
-
     props.onKeyDown?.(e);
-  }; // Makes it possible to navigate using keyboard shortcuts
-
+  };
 
+  // Makes it possible to navigate using keyboard shortcuts
   const handleOnKeyDown = e => {
     const {
       key
     } = e;
-
     if (showValues && renderedValues?.length) {
       setHighlightedIndex(0);
     } else {
       setHighlightedIndex(null);
     }
-
     switch (key) {
       case 'Enter':
         handleEnter(e);
         break;
-
       case 'ArrowUp':
         handleUp(e);
         break;
-
       case 'ArrowDown':
       case 'Tab':
         handleDown(e);
         break;
-
       case 'Escape':
         handleEscape();
         break;
-
       default:
         break;
     }
-  }; // Handle debounce
-
+  };
 
+  // Handle debounce
   useEffect(() => {
     const handleDebounceChange = value => {
       if (props.onDebounceChange && inputDirty) {
         props.onDebounceChange(value);
       }
     };
-
     handleDebounceChange(debouncedValue);
-  }, [debouncedValue]); // Change local open state if props.isOpen changes
+  }, [debouncedValue]);
 
+  // Change local open state if props.isOpen changes
   useEffect(() => {
     setShowValues(!!props.isOpen);
-  }, [props.isOpen]); // Update local values state if props.values changes
+  }, [props.isOpen]);
 
+  // Update local values state if props.values changes
   useEffect(() => {
     setInputValues(props.values);
-  }, [props.values]); // Update local value if props.value changes
+  }, [props.values]);
 
+  // Update local value if props.value changes
   useEffect(() => {
     const value = props.value || '';
     setValueChanged(value);
@@ -236,5 +202,4 @@ const useAutocomplete = props => {
     renderedValues
   };
 };
-
 export default useAutocomplete;

package/esm/core/Autocomplete/hooks/useHandleDimentions.js

@@ -1,5 +1,4 @@
 import { createRef, useEffect, useState } from 'react';
-
 const useHandleDimentions = () => {
   const [height, setHeight] = useState(0);
   const [width, setWidth] = useState(0);
@@ -7,7 +6,8 @@ const useHandleDimentions = () => {
   useEffect(() => {
     const rect = dimentionsRef.current?.getBoundingClientRect();
     setHeight(rect?.height || 0);
-    setWidth(rect?.width || 0); // eslint-disable-next-line react-hooks/exhaustive-deps
+    setWidth(rect?.width || 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dimentionsRef.current]);
   return {
     height,
@@ -15,5 +15,4 @@ const useHandleDimentions = () => {
     dimentionsRef
   };
 };
-
 export default useHandleDimentions;

package/esm/core/Autocomplete/index.js

@@ -47,16 +47,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
       if (node && node.contains(e.target)) return;
       setShowValues(false);
     };
-
     if (showValues) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showValues, valuesRef]);
   return _jsxs(_Fragment, {
     children: [_jsxs("label", {

package/esm/core/Autocomplete/styles.js

@@ -1,7 +1,5 @@
 import _styled from "@emotion/styled/base";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/react';
 import bp from '../../globals/styles/breakpoints';
 import Button from '../Button';

package/esm/core/Banner/Banner.stories.js

@@ -0,0 +1,68 @@
+import Banner from '.';
+import Header from '../Header';
+import Button from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Banner',
+  component: Banner
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      onClick: () => console.log('Hello'),
+      children: "Hello I am button"
+    }),
+    children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
+  }),
+  name: 'Default'
+};
+export const Success = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    success: true,
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
+  }),
+  name: 'Success'
+};
+export const Info = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    info: true,
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    children: "Content"
+  }),
+  name: 'Info'
+};
+export const Danger = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    danger: true,
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    children: "Content"
+  }),
+  name: 'Danger'
+};
+export const WithoutChildren = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Just a header"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      onClick: () => console.log('Hello'),
+      children: "And a button"
+    })
+  }),
+  name: 'Without children'
+};

package/esm/core/Banner/index.js

@@ -4,7 +4,6 @@ import Alert from '../Alert';
 import { Content, LeftSide, RightSide, Wrapper } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Banner = ({
   children,
   danger,
@@ -31,5 +30,4 @@ const Banner = ({
     })
   });
 };
-
 export default Banner;

package/esm/core/Banner/styles.js

@@ -1,7 +1,5 @@
 import _styled from "@emotion/styled/base";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import bp from '../../globals/styles/breakpoints';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "ec636p03"

package/esm/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.js

@@ -0,0 +1,94 @@
+import BarAndLineComposedChart from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/BarAndLineComposedChart',
+  component: BarAndLineComposedChart
+};
+const DefaultData = [{
+  name: 'Jan',
+  inntekt: 40000,
+  kostnad: -23000,
+  akkumulert: 17000
+}, {
+  name: 'Feb',
+  inntekt: 60000,
+  kostnad: -25000,
+  akkumulert: 35000
+}, {
+  name: 'Mars',
+  inntekt: 50000,
+  kostnad: -34000,
+  akkumulert: 16000
+}, {
+  name: 'April',
+  inntekt: 55000,
+  kostnad: -20000,
+  akkumulert: 35000
+}, {
+  name: 'Mai',
+  inntekt: 54400,
+  kostnad: -30000,
+  akkumulert: 24400
+}, {
+  name: 'Jun',
+  inntekt: 65000,
+  kostnad: -25000,
+  akkumulert: 40000
+}, {
+  name: 'Jul',
+  inntekt: 43000,
+  kostnad: -30000,
+  akkumulert: 13000
+}, {
+  name: 'Aug',
+  inntekt: 60000,
+  kostnad: -40000,
+  akkumulert: 20000
+}, {
+  name: 'Sept',
+  inntekt: 70000,
+  kostnad: -50000,
+  akkumulert: 20000
+}, {
+  name: 'Okt',
+  inntekt: 60000,
+  kostnad: -34000,
+  akkumulert: 26000
+}, {
+  name: 'Nov',
+  inntekt: 40040,
+  kostnad: -24000,
+  akkumulert: 16040
+}, {
+  name: 'Des',
+  inntekt: 56000,
+  kostnad: -5500,
+  akkumulert: 50500
+}];
+export const Default = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(BarAndLineComposedChart, {
+    data: DefaultData,
+    bars: [{
+      name: 'Inntekt',
+      dataKey: 'inntekt',
+      fill: theme.primary
+    }, {
+      name: 'Kostnad',
+      dataKey: 'kostnad',
+      fill: theme.primary5darker
+    }],
+    lines: [{
+      name: 'Akkumulert resultat',
+      dataKey: 'akkumulert',
+      stroke: theme.secondary,
+      type: 'monotone',
+      shortName: 'Akk. resultat'
+    }],
+    xAxisDataKey: "name"
+  }),
+  name: 'Default'
+};

package/esm/core/BarAndLineComposedChart/index.js

@@ -6,7 +6,6 @@ import { formatAxisPrice } from '../../utils/formatGraphPrice';
 import { BarAndLineComposedChartContainer } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const BarAndLineComposedChart = ({
   data = [],
   bars,
@@ -97,5 +96,4 @@ const BarAndLineComposedChart = ({
     })
   });
 };
-
 export default BarAndLineComposedChart;

package/esm/core/BarChartWithCustomizedEvent/BarChartWithCustomizedEvent.stories.js

@@ -0,0 +1,80 @@
+import BarChartWithCustomizedEvent from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/BarChartWithCustomizedEvent',
+  component: BarChartWithCustomizedEvent
+};
+export const BarChartCustomizedEventData = [{
+  year: 2020,
+  debt: 2500700,
+  interestRates: 12000,
+  deduction: 140000
+}, {
+  year: 2021,
+  debt: 1950000,
+  interestRates: 12000,
+  deduction: 140000
+}, {
+  year: 2022,
+  debt: 1600000,
+  interestRates: 12000,
+  deduction: 140000
+}, {
+  year: 2023,
+  debt: 1400000,
+  interestRates: 12000,
+  deduction: 140400
+}, {
+  year: 2024,
+  debt: 1100000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2025,
+  debt: 1000000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2026,
+  debt: 900000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2027,
+  debt: 750000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2028,
+  debt: 500000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2029,
+  debt: 300000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2030,
+  debt: 150000,
+  interestRates: 12000,
+  deduction: 14000
+}];
+export const Default = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(BarChartWithCustomizedEvent, {
+    data: BarChartCustomizedEventData,
+    bars: [{
+      name: 'Restgjeld',
+      dataKey: 'debt',
+      fill: theme.primary
+    }],
+    xAxisDataKey: "year",
+    selectedIndex: 0,
+    onClickBar: v => console.log('onClickBar', v)
+  }),
+  name: 'Default'
+};

package/esm/core/BarChartWithCustomizedEvent/index.js

@@ -31,10 +31,8 @@ export const BarChartWithCustomizedEvent = ({
 }) => {
   const theme = useTheme();
   const [hoverIndex, setHoverIndex] = useState(undefined);
-
   const handleBarClick = (_, index) => {
     const identicalIndex = index === selectedIndex;
-
     if (onClickBar && !identicalIndex) {
       onClickBar({
         data: data[index],
@@ -42,7 +40,6 @@ export const BarChartWithCustomizedEvent = ({
       });
     }
   };
-
   return /*#__PURE__*/_jsx(CustomEventBarChartContainer, {
     width: width && width,
     height: height && height,

package/esm/core/Box/Box.stories.js

@@ -0,0 +1,89 @@
+import Header from '../Header';
+import Box from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Box',
+  component: Box
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    children: "Stuff"
+  }),
+  name: 'Default'
+};
+export const Collapsable = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    collapsable: true,
+    children: "Stuff"
+  }),
+  name: 'Collapsable'
+};
+export const Rounded = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    type: "mysite",
+    children: "Stuff"
+  }),
+  name: 'Rounded'
+};
+export const WithHeader = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    children: "Stuff"
+  }),
+  name: 'With header'
+};
+export const WithHeaderAndCollapse = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    collapsable: true,
+    children: "Stuff"
+  }),
+  name: 'With header and collapse'
+};
+export const CollapsableMysite = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    collapsable: true,
+    type: "mysite",
+    children: "Stuff"
+  }),
+  name: 'Collapsable mysite'
+};
+export const Noshadow = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    noshadow: true,
+    children: "Stuff"
+  }),
+  name: 'Noshadow'
+};
+export const Background = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    background: "#ececec",
+    children: "Stuff"
+  }),
+  name: 'Background'
+};
+export const HideContent = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    hideContent: true,
+    children: "Content"
+  }),
+  name: 'Hide content'
+};

package/esm/core/Box/index.js

@@ -6,7 +6,6 @@ import IconPlus from '../../icons/General/IconPlus';
 import IconChevronDown from '../../icons/General/IconChevronDown';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Box = ({
   header,
   collapsable,
@@ -26,11 +25,9 @@ const Box = ({
   useEffect(() => {
     if (handleOpenState !== undefined) setIsOpen(handleOpenState);
   }, [handleOpenState]);
-
   const onCollapseIconClicked = e => {
     setIsOpen(!isOpen);
   };
-
   const icon = collapseIcon === 'plus/minus' ? isOpen ? _jsx(IconMinus, {}) : _jsx(IconPlus, {}) : _jsx(IconChevronDown, {
     flipVertical: isOpen,
     size: "14px"
@@ -56,5 +53,4 @@ const Box = ({
     })]
   });
 };
-
 export default Box;