@bbl-digital/snorre 4.0.0-alpha.7 → 4.0.0-beta.10

package/lib/core/Datepicker/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-
 /** @jsxImportSource @emotion/react */
 import React, { useEffect, useRef, useState } from 'react';
 import { Wrapper, Label, ErrorMessage, styles } from './styles';
@@ -16,7 +15,6 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 const FORMAT = 'dd.MM.yyyy';
-
 const Datepicker = ({
   value,
   label,
@@ -57,71 +55,55 @@ const Datepicker = ({
       if (node1 && node1.contains(e.target) || node2 && node2.contains(e.target)) return;
       handleClose();
     };
-
     if (isOpen) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpen, pickerRef, popperElement]);
-
   const emitChange = newDate => {
     newDate?.setHours(11, 0); // To avoid timezone issues
-
     setDate(newDate);
     onChange(newDate);
   };
-
   const handleClose = () => {
     setIsOpen(false);
     setDisplayMonth(undefined);
     onBlur && onBlur();
   };
-
   const popper = usePopper(referenceElement, popperElement, {
     placement: 'bottom-start'
   });
-
   const handleChange = newDate => {
     if (disabled || !newDate && !date || newDate && date && datesAreOnSameDay(newDate, date)) return;
     if (!newDate || !isDateValid(newDate)) emitChange(undefined);else emitChange(newDate);
   };
-
   const isDateValid = date => isValid(date) && getDateIsValid(date, fromDate, toDate);
-
   const handleInputChange = (value, emitChange) => {
     setInputValue(value);
     const date = parseDate(value, FORMAT);
-
     if (date && isDateValid(date)) {
       setPickerValue(date);
       setDisplayMonth(date);
     } else {
       setPickerValue(undefined);
     }
-
     if (emitChange) handleChange(date);
   };
-
   const handleDaySelect = date => {
     setPickerValue(date ? date : undefined);
-
     if (date) {
       setInputValue(format(date, FORMAT));
       setTimeout(handleClose, 100);
     } else {
       setInputValue('');
     }
-
     handleChange(date);
   };
-
   const handleInputKeydown = e => setIsOpen(e.key !== Key.tab);
-
   const Picker = _jsx(DayPicker, {
     defaultMonth: date,
     selected: pickerValue,
@@ -139,7 +121,6 @@ const Datepicker = ({
     }],
     onMonthChange: setDisplayMonth
   });
-
   return _jsx(Wrapper, {
     css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme), nonInput && styles.nonInput(theme)],
     title: disabled ? disabledTitle : undefined,
@@ -178,5 +159,4 @@ const Datepicker = ({
     })
   });
 };
-
 export default Datepicker;

package/lib/core/Datepicker/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';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {

package/lib/core/Datepicker/yearMonthForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"yearMonthForm.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Datepicker/yearMonthForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,UAAU,MAAM;IACd,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IAC3B,QAAQ,EAAE,IAAI,CAAA;IACd,MAAM,EAAE,IAAI,CAAA;CACb;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqDnC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"yearMonthForm.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Datepicker/yearMonthForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,UAAU,MAAM;IACd,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IAC3B,QAAQ,EAAE,IAAI,CAAA;IACd,MAAM,EAAE,IAAI,CAAA;CACb;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAmDnC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/lib/core/DatepickerRange/DatepickerRange.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const DatepickerRangeDefault: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=DatepickerRange.stories.d.ts.map

package/lib/core/DatepickerRange/DatepickerRange.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatepickerRange.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DatepickerRange/DatepickerRange.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,sBAAsB;;;CAkBlC,CAAA"}

package/lib/core/DatepickerRange/DatepickerRange.stories.js

@@ -0,0 +1,21 @@
+import DatepickerRange from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/DatepickerRange',
+  component: DatepickerRange
+};
+export const DatepickerRangeDefault = {
+  render: () => /*#__PURE__*/_jsx("div", {
+    style: {
+      height: '600px'
+    },
+    children: /*#__PURE__*/_jsx(DatepickerRange, {
+      onChange: console.log,
+      label: {
+        from: 'from date',
+        to: 'to date'
+      }
+    })
+  }),
+  name: 'DatepickerRange'
+};

package/lib/core/DatepickerRange/index.js

@@ -1,21 +1,22 @@
 /** @jsxImportSource @emotion/react */
+
 // import { useRef, useState, useEffect } from 'react'
 // import { Modifier, Modifiers } from 'react-day-picker'
 // import DayPickerInput from 'react-day-picker/DayPickerInput'
 // import { useIsMobile } from '../..'
-import IconErrorOutline from '../../icons/General/IconErrorOutline'; // import {
+import IconErrorOutline from '../../icons/General/IconErrorOutline';
+// import {
 //   formatDate,
 //   MONTHS,
 //   parseDate,
 //   WEEKDAYS_LONG,
 //   WEEKDAYS_SHORT,
 // } from '../../utils/dates'
-
-import { Input, Wrapper, styles, Label, ErrorMessage // DividerLine,
+import { Input, Wrapper, styles, Label, ErrorMessage
+// DividerLine,
 } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 // const FORMAT = 'dd.MM.yyyy'
 // const PLACEHOLDER = 'dd.mm.åååå'
 const DatePickerRange = ({
@@ -33,25 +34,33 @@ const DatePickerRange = ({
   minWidth = 550
 }) => {
   // const isMobile = useIsMobile()
+
   // const fromPickerRef = useRef<DayPickerInput>(null)
   // const toPickerRef = useRef<DayPickerInput>(null)
+
   // const currentYear = new Date().getFullYear()
+
   // const maxDateAvailable = maxDate
   //   ? new Date(maxDate)
   //   : new Date(currentYear + 5, 11, 31)
+
   // const [dates, setDates] = useState<{ to?: Date; from?: Date }>({
   //   to: undefined,
   //   from: undefined,
   // })
+
   // useEffect(() => {
   //   if (isMobile && fromPickerRef)
   //     (fromPickerRef as any).current.input.readOnly = true
   // }, [isMobile, fromPickerRef])
+
   // useEffect(() => {
   //   if (isMobile && toPickerRef)
   //     (toPickerRef.current as any).input.readOnly = true
   // }, [isMobile, toPickerRef])
+
   // const modifiers: Partial<Modifiers> = { start: dates.from, end: dates.to }
+
   // const pickerPropsDefault = {
   //   locale: 'no',
   //   months: MONTHS,
@@ -63,22 +72,26 @@ const DatePickerRange = ({
   //   numberOfMonths: 2,
   //   selected: [dates.from, { from: dates.from, to: dates.to }],
   // }
+
   // const toDayProps = {
   //   ...pickerPropsDefault,
   //   disabled: { before: dates.from } as Modifier,
   //   month: dates.from,
   //   fromMonth: dates.from,
   // }
+
   // const fromDayProps = {
   //   ...pickerPropsDefault,
   //   disabled: { after: dates.to } as Modifier,
   //   toMonth: dates.to,
   //   onDayClick: () => toPickerRef.current?.getInput().focus(),
   // }
+
   // const handleChange = (key: 'to' | 'from') => (date: Date) => {
   //   setDates((prev) => ({ ...prev, [key]: date }))
   //   onChange({ ...dates, [key]: date })
   // }
+
   return _jsx(Wrapper, {
     css: () => [styles.wrapper(maxWidth, minWidth), css && css],
     children: _jsxs(Input, {
@@ -95,5 +108,4 @@ const DatePickerRange = ({
     })
   });
 };
-
 export default DatePickerRange;

package/lib/core/DatepickerRange/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';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {

package/lib/core/Divider/index.js

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
+
 import React from 'react';
 import styles from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const Divider = ({
   className,
   color,
@@ -17,5 +17,4 @@ const Divider = ({
     css: theme => [styles.default(color), subtle && styles.subtle(theme), margin && styles.margin(margin), height && styles.height(height), lightGray && styles.lightGray, css && css]
   });
 };
-
 export default Divider;

package/lib/core/Divider/styles.js

@@ -1,5 +1,4 @@
 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';
 const styles = {
   default: (color = '#f7f7f7') => /*#__PURE__*/css("height:1px;background-color:", color, ";border:none;margin:1em 0;" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0RpdmlkZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9EaXZpZGVyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6IChjb2xvciA9ICcjZjdmN2Y3JykgPT4gY3NzYFxuICAgIGhlaWdodDogMXB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3J9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBtYXJnaW46IDFlbSAwO1xuICBgLFxuICBzdWJ0bGU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5zdWJ0bGVUZXh0fTtcbiAgYCxcbiAgbWFyZ2luOiAobWFyZ2luOiBzdHJpbmcpID0+IGNzc2BcbiAgICBtYXJnaW46ICR7bWFyZ2lufSAwO1xuICBgLFxuICBoZWlnaHQ6IChoZWlnaHQ6IG51bWJlcikgPT4gY3NzYFxuICAgIGhlaWdodDogJHtoZWlnaHR9cHg7XG4gIGAsXG4gIGxpZ2h0R3JheTogY3NzYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICNkN2Q3ZDc7XG4gIGAsXG59XG5cbmV4cG9ydCBkZWZhdWx0IHN0eWxlc1xuZXhwb3J0IHsgc3R5bGVzIH1cbiJdfQ== */"),

package/lib/core/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Background: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const CustomLabel: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Icon: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithTimeout: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Dropdown.stories.d.ts.map

package/lib/core/Dropdown/Dropdown.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";AAIA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAQnB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAQtB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAQvB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAQhB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAQvB,CAAA"}

package/lib/core/Dropdown/Dropdown.stories.js

@@ -0,0 +1,53 @@
+import Dropdown from '.';
+import IconEye from '../../icons/General/IconEye';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Dropdown',
+  component: Dropdown
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Stuff"
+    })
+  }),
+  name: 'Default'
+};
+export const Background = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    background: "transparent",
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Stuff"
+    })
+  }),
+  name: 'Background'
+};
+export const CustomLabel = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    label: "Label",
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Stuff"
+    })
+  }),
+  name: 'Custom label'
+};
+export const Icon = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    icon: /*#__PURE__*/_jsx(IconEye, {}),
+    label: "Dropdown icon",
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Hello"
+    })
+  }),
+  name: 'Icon'
+};
+export const WithTimeout = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    label: "Click outside timeout",
+    clickOutsideTimeout: 1000,
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Adds timeout before close on click outside of dropdown"
+    })
+  }),
+  name: 'With timeout'
+};

package/lib/core/Dropdown/index.js

@@ -6,7 +6,6 @@ import IconCaretDown from '../../icons/General/IconCaretDown';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Dropdown = ({
   label,
   icon,
@@ -22,20 +21,16 @@ const Dropdown = ({
   const ref = /*#__PURE__*/createRef();
   const [open, toggleOpen] = useState(false);
   const theme = useTheme();
-
   const onClick = function () {
     toggleOpen(!open);
   };
-
   useEffect(() => {
     const handleClickOutside = e => {
       // TODO type
       const node = ref.current;
-
       if (node && node.contains(e.target)) {
         return;
       }
-
       if (clickOutsideTimeout !== undefined) {
         setTimeout(() => {
           toggleOpen(false);
@@ -44,13 +39,11 @@ const Dropdown = ({
         toggleOpen(false);
       }
     };
-
     if (open) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -82,5 +75,4 @@ const Dropdown = ({
     })]
   });
 };
-
 export default Dropdown;

package/lib/core/DropdownMenu/DropdownMenu.stories.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithCounterProp: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithClassname: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=DropdownMenu.stories.d.ts.map

package/lib/core/DropdownMenu/DropdownMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":";AAKA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAanB,CAAA;AAED,eAAO,MAAM,eAAe;;;CAgB3B,CAAA;AAED,eAAO,MAAM,aAAa;;;CAUzB,CAAA"}

package/lib/core/DropdownMenu/DropdownMenu.stories.js

@@ -0,0 +1,47 @@
+import DropdownMenu from '.';
+import DropdownMenuOption from './DropdownMenuOption';
+import IconMail from '../../icons/General/IconMail';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/DropdownMenu',
+  component: DropdownMenu
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsxs(DropdownMenu, {
+    icon: /*#__PURE__*/_jsx(IconMail, {}),
+    children: [/*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 1 clicked'),
+      children: "Option 1"
+    }), /*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 2 clicked'),
+      children: "Option 2"
+    })]
+  }),
+  name: 'Default'
+};
+export const WithCounterProp = {
+  render: () => /*#__PURE__*/_jsxs(DropdownMenu, {
+    icon: /*#__PURE__*/_jsx(IconMail, {}),
+    children: [/*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 1 clicked'),
+      counter: 3,
+      children: "With counter"
+    }), /*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 2 clicked'),
+      children: "Option 2"
+    })]
+  }),
+  name: 'With counter prop'
+};
+export const WithClassname = {
+  render: () => /*#__PURE__*/_jsx(DropdownMenu, {
+    icon: /*#__PURE__*/_jsx(IconMail, {}),
+    className: "my-class",
+    children: /*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 1 clicked'),
+      children: "This menu has a classname"
+    })
+  }),
+  name: 'With classname'
+};

package/lib/core/DropdownMenu/DropdownMenuOption.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { dropdownMenuOption } from './styles';
 import Link from '../Link';
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const DropdownMenuOption = ({
   counter,
   onClick,
@@ -19,5 +18,4 @@ const DropdownMenuOption = ({
     children: [children ? children : '', counter ? ` (${counter})` : '']
   });
 };
-
 export default DropdownMenuOption;

package/lib/core/DropdownMenu/index.js

@@ -3,7 +3,6 @@ import { Wrapper, Content } from './styles';
 import Button from '../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const DropdownMenu = ({
   icon,
   className,
@@ -16,13 +15,11 @@ const DropdownMenu = ({
         setOpen(false);
       }, 200);
     };
-
     if (open) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -41,5 +38,4 @@ const DropdownMenu = ({
     })]
   });
 };
-
 export default DropdownMenu;

package/lib/core/DropdownMenu/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';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e3ttgez1"

package/lib/core/Editor/Editor.stories.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Rich: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const ValidElements: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const InvalidElements: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const AllProps: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Editor.stories.d.ts.map

package/lib/core/Editor/Editor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAKnB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAWhB,CAAA;AAED,eAAO,MAAM,aAAa;;;CAWzB,CAAA;AAED,eAAO,MAAM,eAAe;;;CAU3B,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAmBpB,CAAA"}

package/lib/core/Editor/Editor.stories.js

@@ -0,0 +1,54 @@
+import Editor from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Editor',
+  component: Editor
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    onChange: e => console.log(e),
+    label: "Editor-label"
+  }),
+  name: 'Default'
+};
+export const Rich = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    onChange: e => console.log(e),
+    label: "Editor-label",
+    type: "rich",
+    allowImages: true
+  }),
+  name: 'Rich'
+};
+export const ValidElements = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    onChange: e => console.log(e),
+    validElements: "strong,p,span,em",
+    type: "custom",
+    customToolbar: "bold italic underline"
+  }),
+  name: 'Valid elements'
+};
+export const InvalidElements = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    onChange: e => console.log(e),
+    pasteAsText: false,
+    invalidElements: "button,a,h1,h2,h3,h4,h5,h6"
+  }),
+  name: 'Invalid elements'
+};
+export const AllProps = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    label: "Label",
+    type: "rich",
+    initialValue: '<p><img src="https://i.ytimg.com/vi/CZFKWt3S2Ys/maxresdefault.jpg" alt="testimage" width="444" height="250" /></p><br/><p>"wow" - Owen Wilson</p>',
+    allowImages: true,
+    invalidElements: "",
+    invalidMessage: "Memes are not allowed",
+    height: 400,
+    maxHeight: 600,
+    onChange: (e, length) => console.log(e, length),
+    onBlur: () => console.log('blur')
+  }),
+  name: 'Props'
+};

package/lib/core/Editor/index.js

@@ -12,7 +12,6 @@ import { useEffect } from 'react';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const TINYMCE_API_KEY = 'v1hbb9qthd0z2fr0keceoglnwbzhyjqwsj4q7n193ovikt8s';
-
 const Editor = ({
   initialValue,
   overrideValue,
@@ -38,20 +37,18 @@ const Editor = ({
     alert
   } = useTheme();
   const isMobile = useIsMobile();
-
   const handleChange = (html, editor) => {
     setValue(html);
     onChange(html, editor.getContent({
       format: 'text'
     }).length);
   };
-
   const handleBlur = () => onBlur?.(value);
-
   const toolbar = type === 'basic' ? basicToolbar : type === 'rich' ? richToolbar : customToolbar;
   useEffect(() => {
     if (overrideValue === undefined) return;
-    setValue(() => overrideValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+    setValue(() => overrideValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overrideValue]);
   return _jsxs("div", {
     css: theme => [styles.default(theme), !loaded && styles.hideEditor],
@@ -111,5 +108,4 @@ const Editor = ({
     })]
   });
 };
-
 export default Editor;

package/lib/core/Editor/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';
 export const styles = {
   default: theme => /*#__PURE__*/css("display:flex;flex-direction:column;gap:4px;.tox-tinymce{border:1px solid ", theme.border, ";border-radius:3px;}.tox-toolbar__group{border-color:", theme.border, "!important;}.tox-toolbar__primary{background:none!important;border-bottom:1px solid ", theme.border, ";}.tox-statusbar{border-top:none!important;}.editor-wrapper{display:grid;.tox-toolbar--scrolling,.tox-edit-area{&::-webkit-scrollbar{width:2px;height:2px;}}}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS29DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBkZWZhdWx0OiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBnYXA6IDRweDtcblxuICAgIC50b3gtdGlueW1jZSB7XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgfVxuICAgIC50b3gtdG9vbGJhcl9fZ3JvdXAge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke3RoZW1lLmJvcmRlcn0gIWltcG9ydGFudDtcbiAgICB9XG4gICAgLnRveC10b29sYmFyX19wcmltYXJ5IHtcbiAgICAgIGJhY2tncm91bmQ6IG5vbmUgIWltcG9ydGFudDtcbiAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgfVxuICAgIC50b3gtc3RhdHVzYmFyIHtcbiAgICAgIGJvcmRlci10b3A6IG5vbmUgIWltcG9ydGFudDtcbiAgICB9XG4gICAgLmVkaXRvci13cmFwcGVyIHtcbiAgICAgIGRpc3BsYXk6IGdyaWQ7XG5cbiAgICAgIC50b3gtdG9vbGJhci0tc2Nyb2xsaW5nLFxuICAgICAgLnRveC1lZGl0LWFyZWEge1xuICAgICAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICAgICAgd2lkdGg6IDJweDtcbiAgICAgICAgICBoZWlnaHQ6IDJweDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgYCxcbiAgaGlkZUVkaXRvcjogY3NzYFxuICAgIC5lZGl0b3Itd3JhcHBlciB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgYCxcbn1cblxuZXhwb3J0IGNvbnN0IExhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICBmb250LXNpemU6IDFlbTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYFxuXG5leHBvcnQgY29uc3QgRXJyb3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcblxuICAmID4gc3BhbiB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiAycHg7XG4gIH1cbmBcbiJdfQ== */"),