Fixed exports

babel.config.js

@@ -1,10 +1,6 @@
 module.exports = {
     plugins: [
-        '@babel/plugin-proposal-class-properties',
-        ['babel-plugin-root-import', {
-            "rootPathSuffix": "src/",
-            "rootPathPrefix": "@/"
-        }]
+        '@babel/plugin-proposal-class-properties'
     ],
     presets: [
         '@babel/typescript',

jest.config.json

@@ -1,6 +1,3 @@
 {
-    "setupFilesAfterEnv": ["./setupTests.ts"],
-    "moduleNameMapper": {
-        "@/(.*)": "<rootDir>/src/$1"
-    }
+    "setupFilesAfterEnv": ["./setupTests.ts"]
 }

package.json

@@ -24,7 +24,6 @@
         "@types/react-is": "^16.7.1",
         "@typescript-eslint/eslint-plugin": "^4.6.1",
         "@typescript-eslint/parser": "^4.6.1",
-        "babel-plugin-root-import": "^6.6.0",
         "dart-sass": "^1.25.0",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.3",

src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { Variant } from '@/components';
+import { Variant } from '../utils';
 
 export type ButtonComponentTypes = 'button' | 'a';
 

__tests__/Button.test.tsx → src/components/Button/__tests__/Button.test.tsx

@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import { Button } from '@/components/Button';
-import { Variant } from '@/components';
+import { Variant } from '../../utils';
+import Button from '../Button';
 
 describe('Button test', () => {
     it('should render button', () => {

src/components/Button/index.ts

@@ -1 +1,2 @@
 export { default as Button } from './Button';
+export type { ButtonProps, ButtonComponentTypes } from './Button';

src/components/Card/Card.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import CardContent from '@/components/Card/Content';
-import { ForwardComponentWithStatics } from '@/components/utils/ForwardComponentWithStatics';
-import CardHeader from '@/components/Card/Header';
-import { Variant } from '@/components';
+import CardContent from './Content';
+import { ForwardComponentWithStatics } from '../utils/ForwardComponentWithStatics';
+import CardHeader from './Header';
+import { Variant } from '../utils';
 
 export type CardStatics = {
     Content: typeof CardContent;

src/components/Card/Content.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
-type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((
     {

__tests__/Card.test.tsx → src/components/Card/__tests__/Card.test.tsx

@@ -1,9 +1,9 @@
 import { render } from 'enzyme';
 import React from 'react';
-import Card from '@/components/Card/Card';
-import CardContent from '@/components/Card/Content';
-import CardHeader from '@/components/Card/Header';
-import { Variant } from '@/components';
+import { Variant } from '../../utils';
+import Card from '../Card';
+import CardContent from '../Content';
+import CardHeader from '../Header';
 
 describe('Card test', () => {
     it('should render card', () => {

src/components/Card/index.ts

@@ -1,3 +1,8 @@
 export { default as Card } from './Card';
+export type { CardProps, CardStatics } from './Card';
+
 export { default as CardContent } from './Content';
+export type { CardContentProps } from './Content';
+
 export { default as CardHeader } from './Header';
+export type { CardHeaderProps } from './Header'

src/components/Container/Container.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     fluid?: boolean;
 }
 

__tests__/Container.test.tsx → src/components/Container/__tests__/Container.test.tsx

@@ -1,6 +1,6 @@
 import { render } from 'enzyme';
 import React from 'react';
-import Container from '@/components/Container/Container';
+import Container from '../Container';
 
 describe('Container test', () => {
     it('should render container', () => {

src/components/Container/index.ts

@@ -1 +1,2 @@
 export { default as Container } from './Container';
+export type { ContainerProps } from './Container';

src/components/Field/FieldBase.tsx

@@ -1,17 +1,19 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Icon, Variant } from '@/components';
 import clsx from 'clsx';
 import { ReactElement, useState } from 'react';
+import { Icon } from '../Icon';
 import { FieldContext } from './FieldContext';
+import { Variant } from '../utils';
 
-interface FieldBaseProps {
+export interface FieldBaseProps {
     actions?: React.ReactNode;
     className?: string;
     label?: React.ReactNode;
     valid?: boolean;
     variant?: Variant | string;
     value?: string | ReadonlyArray<string> | number;
+    children?: React.ReactNode;
 }
 
 export const getStateIcon = (valid: boolean | undefined): ReactElement | undefined => {
@@ -32,20 +34,23 @@ export const getStateIcon = (valid: boolean | undefined): ReactElement | undefin
     );
 }
 
-const FieldBaseProps = ({
-    actions,
-    className,
-    children,
-    label,
-    variant = Variant.PRIMARY,
-    valid
-}: React.PropsWithChildren<FieldBaseProps>,
+const FieldBaseProps = React.forwardRef<HTMLDivElement, FieldBaseProps>((
+    {
+        actions,
+        className,
+        children,
+        label,
+        variant = Variant.PRIMARY,
+        valid
+    },
+    ref
 ): React.ReactElement => {
     const [hasValue, setHasValue] = useState<boolean>(false);
     const [hasFocus, setHasFocus] = useState<boolean>(false);
 
     return (
         <div
+            ref={ref}
             className={clsx(
                 'form-field-base',
                 `form-field-${variant}`,
@@ -79,10 +84,11 @@ const FieldBaseProps = ({
             )}
         </div>
     );
-};
+});
 
 export const propTypes = {
     actions: PropTypes.node,
+    className: PropTypes.string,
     children: PropTypes.node,
     label: PropTypes.node,
     onChange: PropTypes.func,

src/components/Field/FieldContainer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-interface FieldContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FieldContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     toggles?: boolean;
 }
 

__tests__/FieldBase.test.tsx → src/components/Field/__tests__/FieldBase.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
-import FieldBase from '@/components/Field/FieldBase';
-import { Variant } from '@/components';
-import { FieldContext } from '@/components/Field/FieldContext';
+import FieldBase from '../FieldBase';
+import { Variant } from '../../utils';
+import { FieldContext } from '../FieldContext';
 
 describe('FieldBase test', () => {
     it('should render field base', () => {

__tests__/FieldContainer.test.tsx → src/components/Field/__tests__/FieldContainer.test.tsx

@@ -1,6 +1,6 @@
 import { render } from 'enzyme';
 import React from 'react';
-import FieldContainer from '@/components/Field/FieldContainer';
+import FieldContainer from '../FieldContainer';
 
 describe('FieldBase test', () => {
     it('should render field container', () => {

__tests__/FieldContext.test.tsx → src/components/Field/__tests__/FieldContext.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { FieldContext } from '@/components/Field/FieldContext';
+import { FieldContext } from '../FieldContext';
 
 describe('FieldContext test', () => {
     it('should use default values when no consumer used', () => {

src/components/Field/index.ts

@@ -0,0 +1,9 @@
+export { default as FieldBase, propTypes } from './FieldBase';
+export type { FieldBaseProps } from './FieldBase';
+
+export { default as FieldContainer } from './FieldContainer';
+export type { FieldContainerProps } from './FieldContainer';
+
+export { FieldContext } from './FieldContext';
+export type { FieldContextProps } from './FieldContext';
+

src/components/Form/Group.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-}
+export type FormGroupProps = React.HTMLAttributes<HTMLDivElement>;
 
 const FormGroup = React.forwardRef<HTMLDivElement, FormGroupProps>((
     {

src/components/Form/Label.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-type FormLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+export type FormLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
 
 const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>((
     {

src/components/Form/Message.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-interface FormMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FormMessageProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     valid?: boolean;
 }

__tests__/Form.test.tsx → src/components/Form/__tests__/Form.test.tsx

@@ -1,8 +1,8 @@
 import { render } from 'enzyme';
 import React from 'react';
-import FormGroup from '@/components/Form/Group';
-import FormLabel from '@/components/Form/Label';
-import FormMessage from '@/components/Form/Message';
+import FormGroup from '../Group';
+import FormLabel from '../Label';
+import FormMessage from '../Message';
 
 describe('Form test', () => {
     it('should render form-group', () => {

src/components/Form/index.ts

@@ -0,0 +1,8 @@
+export { default as FormGroup } from './Group';
+export type { FormGroupProps } from './Group';
+
+export { default as FormLabel } from './Label';
+export type { FormLabelProps } from './Label';
+
+export { default as FormMessage } from './Message';
+export type { FormMessageProps } from './Message';

src/components/Grid/Grid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     columns?: string | number;
     gap?: string | number;
     rows?: string | number;

src/components/Grid/Row.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-type RowProps = React.HTMLAttributes<HTMLDivElement>;
+export type RowProps = React.HTMLAttributes<HTMLDivElement>;
 
 const Row = React.forwardRef<HTMLDivElement, RowProps>((
     {

__tests__/Grid.test.tsx → src/components/Grid/__tests__/Grid.test.tsx

@@ -1,6 +1,8 @@
 import { render } from 'enzyme';
 import React from 'react';
-import { Col, Grid, Row } from '@/components';
+import Col from '../Col';
+import Grid from '../Grid';
+import Row from '../Row';
 
 describe('Grid test', () => {
     it('should render grid', () => {

src/components/Grid/index.ts

@@ -1,3 +1,8 @@
 export { default as Grid } from './Grid';
+export type { GridProps } from './Grid';
+
 export { default as Row } from './Row';
+export type { RowProps } from './Row';
+
 export { default as Col } from './Col';
+export type { ColProps } from './Col';

src/components/Icon/Icon.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { IconName } from '@/components/Icon/IconName';
+import { IconName } from './IconName';
 
-interface IconProps extends React.HTMLAttributes<HTMLElement> {
+export interface IconProps extends React.HTMLAttributes<HTMLElement> {
     icon: IconName | string;
     size?: string | number;
 }

__tests__/Icon.test.tsx → src/components/Icon/__tests__/Icon.test.tsx

@@ -1,6 +1,6 @@
 import { render } from 'enzyme';
-import { Icon } from '@/components';
 import React from 'react';
+import Icon from '../Icon';
 
 describe('Icon test', () => {
     it('should render icon', () => {

src/components/Icon/index.ts

@@ -1 +1,4 @@
 export { default as Icon } from './Icon';
+export type { IconProps } from './Icon';
+
+export type { IconName } from './IconName'

src/components/Modal/Modal.tsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { createPortal } from 'react-dom';
 import { useEffect, useRef, useState } from 'react';
-import { mergeRefs } from '@/components/utils/mergeRefs';
-import { ModalManager } from '@/components/Modal/modalManager';
+import { ModalManager } from './modalManager';
+import { mergeRefs } from '../utils/mergeRefs';
 
 let modalManager: ModalManager;
 

src/components/Modal/__tests__/Modal.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { Modal } from '@/components';
-import { ModalProps } from '@/components/Modal/Modal';
+import Modal, { ModalProps } from '../Modal';
 
 describe('Test modal', function (): void {
     it('should render modal', (): void => {

src/components/Modal/__tests__/modalManager.test.ts

@@ -1,5 +1,5 @@
-import { ModalManager } from '@/components/Modal/modalManager';
 import { createRef } from 'react';
+import { ModalManager } from '../modalManager';
 
 describe('Test modalManager', function () {
     it('should add backdrop if modal needs it', () => {

src/components/Modal/index.ts

@@ -0,0 +1,4 @@
+export { default as Modal, getManager } from './Modal';
+export type { ModalProps } from './Modal';
+
+export type { StoredModal } from './modalManager';

src/components/Overlay/index.tsx → src/components/Overlay/Overlay.tsx

@@ -11,9 +11,9 @@ import PropTypes from 'prop-types';
 import { Modifier } from '@popperjs/core/lib/types';
 import clsx from 'clsx';
 import { AnimationFeature, ExitFeature, HTMLMotionProps, m as motion, MotionConfig } from 'framer-motion';
-import { motionsMap } from '@/components/animations/motionsMap';
+import { motionsMap } from '../animations';
 
-interface OverlayProps {
+export interface OverlayProps {
     className?: string;
     triggerRef: React.MutableRefObject<HTMLElement | undefined>;
     placement?: Placement;