fix:

- add absolute path includes
- retructor folders and components

config/webpack.config.es.js

@@ -91,6 +91,9 @@ module.exports = {
           plugins: [
             '@babel/plugin-syntax-optional-chaining',
             '@babel/plugin-syntax-class-properties',
+            ["module-resolver", {
+              root: [paths.appSrc]
+            }]
           ],
           babelrc: false,
         },

config/webpack.config.lib.js

@@ -91,6 +91,9 @@ module.exports = {
             '@babel/plugin-syntax-dynamic-import',
             '@babel/plugin-syntax-class-properties',
             '@babel/plugin-syntax-optional-chaining',
+            ["module-resolver", {
+              root: [paths.appSrc]
+            }]
           ],
         },
       },

package.json

@@ -46,10 +46,11 @@
     "@babel/plugin-syntax-class-properties": "7.12.1",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-optional-chaining": "7.8.3",
-    "babel-preset-react-app": "9.1.2",
     "autoprefixer": "9.6.1",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.1.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-preset-react-app": "9.1.2",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "clean-package": "^1.0.1",
     "dotenv": "8.2.0",

src/components/Accordion/Collapse.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import CollapseBase from 'components/Collapse';
 import AccordionContext from './Context';
-import CollapseBase from '../Collapse';
 
 const propTypes = {
   /**

src/components/AskBox/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import createBlock from '../../utils/createBlock';
+import createBlock from 'utils/createBlock';
 
 const propTypes = {
 

src/components/Avatar/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { PluginType } from '../../constants/common';
-import Plugins from '../../plugins';
+import Plugins from 'plugins';
+import { PluginType } from 'constants/common';
 
 const propTypes = {
   /** The Avatar visual name, should be provide via an AssetPlugin with prefix "avatar" */

src/components/Breadcrumb/Item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import SafeAnchor from '../../utils/SafeAnchor';
+import SafeAnchor from 'components/SafeAnchor';
 
 const propTypes = {
 

src/components/BubbleChat/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes, { any } from 'prop-types';
 import classNames from 'classnames';
-import Avatar from '../Avatar';
+import Avatar from 'components/Avatar';
 import BubbleChatImage from './Image';
 import Context from './Context';
 

src/components/Button/Group.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Context from '../Form/Context';
+import Context from 'components/Form/Context';
 
 const propTypes = {
   /**

src/components/Button/index.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import createBlock from 'utils/createBlock';
 import Group from './Group';
 import Context from '../Form/Context';
-import createBlock from '../../utils/createBlock';
 
 const propTypes = {
   /** The Button visual variant */

src/components/Calender/DatePicker.js

@@ -2,9 +2,9 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import DatePickerBase from 'react-date-picker/dist/entry.nostyle';
+import Context from 'components/Form/Context';
+import Icon from 'components/Icon';
 import DatePickerBaseV2 from './v2/DatePicker/DatePicker';
-import Icon from '../Icon';
-import Context from '../Form/Context';
 
 const DatePicker = React.forwardRef(({ className, noClearIcon, size, version, calendarClassName, ...props }, ref) => {
   const { sizeControl } = useContext(Context);

src/components/Calender/DateRangePicker.js

@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import DateRangePickerBase from '@wojtekmaj/react-daterange-picker/dist/entry.nostyle';
-import Icon from '../Icon';
-import Context from '../Form/Context';
+import Icon from 'components/Icon';
+import Context from 'components/Form/Context';
 
 const DateRangePicker = React.forwardRef(({ className, noClearIcon, size, ...props }, ref) => {
   const { sizeControl } = useContext(Context);

src/components/Calender/TimePicker.js

@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import TimePickerBase from 'react-time-picker/dist/entry.nostyle';
-import Icon from '../Icon';
-import Context from '../Form/Context';
+import Icon from 'components/Icon';
+import Context from 'components/Form/Context';
 
 const TimePicker = React.forwardRef(({ className, noClearIcon, size, ...props }, ref) => {
   const { sizeControl } = useContext(Context);

src/components/Carousel/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import SlickBase from 'react-slick';
-import createBlock from '../../utils/createBlock';
+import createBlock from 'utils/createBlock';
 
 const propTypes = {
   /**

src/components/ChatBox/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import createBlock from '../../utils/createBlock';
+import createBlock from 'utils/createBlock';
 
 const propTypes = {
 

src/components/Collapse/index.js

@@ -11,8 +11,8 @@ import Transition, {
   EXITING,
 } from 'react-transition-group/Transition';
 
-import createChainedFunction from '../../utils/createChainedFunction';
-import triggerBrowserReflow from '../../utils/triggerBrowserReflow';
+import createChainedFunction from 'utils/createChainedFunction';
+import triggerBrowserReflow from 'utils/triggerBrowserReflow';
 
 const MARGINS = {
   height: ['marginTop', 'marginBottom'],

src/components/Composer/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import TextareaAutoSize from 'react-textarea-autosize';
-import Icon from '../Icon';
-import Overlay from '../Overlay';
-import Tooltip from '../Tooltip';
+import Icon from 'components/Icon';
+import Overlay from 'components/Overlay';
+import Tooltip from 'components/Tooltip';
 
 
 const propTypes = {

src/components/Counter/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Icon from '../Icon';
+import Icon from 'components/Icon';
 
 const propTypes = {
   /** The Counter visual variant */

src/components/Dropdown/Button.js

@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import PropTypes from 'prop-types';
-import Button from '../Button';
-import Icon from '../Icon';
+import Button from 'components/Button';
+import Icon from 'components/Icon';
 import DropdownContext from './Context';
 import { useToggle } from './Toggle';
 

src/components/Dropdown/Container.js

@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { elementType } from 'prop-types-extra';
-import usePopper from '../../utils/usePopper';
-import useRootClose from '../../utils/useRootClose';
+import usePopper from 'hooks/usePopper';
+import useRootClose from 'hooks/useRootClose';
 import DropdownContext from './Context';
 
 

src/components/Dropdown/index.js

@@ -4,12 +4,12 @@ import { useUncontrolled } from 'uncontrollable';
 import useCallbackRef from '@restart/hooks/useCallbackRef';
 import useForceUpdate from '@restart/hooks/useForceUpdate';
 import PropTypes from 'prop-types';
+import createBlock from 'utils/createBlock';
 import DropButton from './Button';
 import Toggle from './Toggle';
 import Container from './Container';
 import DropdownContext from './Context';
 
-import createBlock from '../../utils/createBlock';
 
 const propTypes = {
   /**

src/utils/Fade.js → src/components/Fade/index.js

@@ -6,8 +6,7 @@ import Transition, {
   ENTERED,
   ENTERING,
 } from 'react-transition-group/Transition';
-// import onEnd from 'dom-helpers/transitionEnd';
-import triggerBrowserReflow from './triggerBrowserReflow';
+import triggerBrowserReflow from 'utils/triggerBrowserReflow';
 
 const propTypes = {
   /**

src/components/FileAttachment/index.js

@@ -4,10 +4,8 @@ import classNames from 'classnames';
 import { useUncontrolled } from 'uncontrollable';
 import { elementType } from 'prop-types-extra';
 import useEventCallback from '@restart/hooks/useEventCallback';
-
-import Fade from '../../utils/Fade';
-
-import Icon from '../Icon';
+import Fade from 'components/Fade';
+import Icon from 'components/Icon';
 
 const fileTypeMeta = {
   undefined: {

src/components/Form/InputGroup.js

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import createBlock from 'utils/createBlock';
 import Context from './Context';
-import createBlock from '../../utils/createBlock';
 
 const propTypes = {
   /**

src/components/Form/Select.js

@@ -2,8 +2,8 @@ import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import warning from 'warning';
+import Icon from 'components/Icon';
 import Context from './Context';
-import Icon from '../Icon';
 
 const propTypes = {
   /**

src/components/Header/Mobile.js

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useUncontrolled } from 'uncontrollable';
 import useCallbackRef from '@restart/hooks/useCallbackRef';
-import Icon from '../Icon';
-import createBlock from '../../utils/createBlock';
+import Icon from 'components/Icon';
+import createBlock from 'utils/createBlock';
 
 const propTypes = {
   /** Whether or not the Header is visible. */

src/components/Header/index.js

@@ -1,2 +1,60 @@
-export { default as Header } from './Desktop';
-export { default as HeaderMobile } from './Mobile';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import createBlock from 'utils/createBlock';
+
+const propTypes = {
+  /** Whether or not the Header is visible. */
+  show: PropTypes.bool,
+  /** Custom className for Inner */
+  innerClassName: PropTypes.string,
+};
+const defaultProps = {
+  show: true,
+};
+
+const Header = React.forwardRef(({ className, innerClassName, fullWidth, show, children, ...props }, ref) => {
+  if (!show) return null;
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={classNames(
+        'Header',
+        'u-backgroundWhite u-paddingVerticalSmall',
+        className && className
+      )}
+    >
+      <div className={classNames(
+        'Container',
+        fullWidth && 'Container--fluid',
+      )}
+      >
+        <div className={classNames(
+          'Header-inner u-flex u-widthFull u-alignItemsCenter u-positionRelative',
+          innerClassName && innerClassName
+        )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+const Brand = createBlock('Header-brand u-lineHeightReset u-fontSizeNone u-flexShrink0 u-marginRightSmall lg:u-marginRightMedium xl:u-marginRightLarge');
+const Main = createBlock('Header-main u-flexGrow1 u-flex u-alignItemsCenter');
+const Left = createBlock('Header-left u-flex');
+const Right = createBlock('Header-right u-flex u-alignItemsCenter u-marginLeftAuto');
+const AbsoluteCenter = createBlock('Header-center u-flex u-positionAbsolute u-positionCenter');
+
+Header.Left = Left;
+Header.AbsoluteCenter = AbsoluteCenter;
+Header.Right = Right;
+Header.Brand = Brand;
+Header.Main = Main;
+Header.displayName = 'Header';
+Header.defaultProps = defaultProps;
+Header.propTypes = propTypes;
+
+export default Header;