);
-};
+});
export const propTypes = {
actions: PropTypes.node,
+ className: PropTypes.string,
children: PropTypes.node,
label: PropTypes.node,
onChange: PropTypes.func,
diff --git a/src/components/Field/FieldContainer.tsx b/src/components/Field/FieldContainer.tsx
index d989d49..6fedcd3 100644
--- a/src/components/Field/FieldContainer.tsx
+++ b/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
{
+export interface FieldContainerProps extends React.HTMLAttributes {
toggles?: boolean;
}
diff --git a/__tests__/FieldBase.test.tsx b/src/components/Field/__tests__/FieldBase.test.tsx
similarity index 95%
rename from __tests__/FieldBase.test.tsx
rename to src/components/Field/__tests__/FieldBase.test.tsx
index 4000909..cd4ce93 100644
--- a/__tests__/FieldBase.test.tsx
+++ b/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', () => {
diff --git a/__tests__/FieldContainer.test.tsx b/src/components/Field/__tests__/FieldContainer.test.tsx
similarity index 90%
rename from __tests__/FieldContainer.test.tsx
rename to src/components/Field/__tests__/FieldContainer.test.tsx
index d7b6975..2249da6 100644
--- a/__tests__/FieldContainer.test.tsx
+++ b/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', () => {
diff --git a/__tests__/FieldContext.test.tsx b/src/components/Field/__tests__/FieldContext.test.tsx
similarity index 93%
rename from __tests__/FieldContext.test.tsx
rename to src/components/Field/__tests__/FieldContext.test.tsx
index 37ff5e4..1d13e0a 100644
--- a/__tests__/FieldContext.test.tsx
+++ b/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', () => {
diff --git a/src/components/Field/index.ts b/src/components/Field/index.ts
new file mode 100644
index 0000000..6062038
--- /dev/null
+++ b/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';
+
diff --git a/src/components/Form/Group.tsx b/src/components/Form/Group.tsx
index 1865bb4..5de2dcb 100644
--- a/src/components/Form/Group.tsx
+++ b/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 {
-}
+export type FormGroupProps = React.HTMLAttributes;
const FormGroup = React.forwardRef((
{
diff --git a/src/components/Form/Label.tsx b/src/components/Form/Label.tsx
index 54d53eb..80b8dcc 100644
--- a/src/components/Form/Label.tsx
+++ b/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;
+export type FormLabelProps = React.LabelHTMLAttributes;
const FormLabel = React.forwardRef((
{
diff --git a/src/components/Form/Message.tsx b/src/components/Form/Message.tsx
index f3f6473..faa52a8 100644
--- a/src/components/Form/Message.tsx
+++ b/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 {
+export interface FormMessageProps extends React.HTMLAttributes {
className?: string;
valid?: boolean;
}
diff --git a/__tests__/Form.test.tsx b/src/components/Form/__tests__/Form.test.tsx
similarity index 91%
rename from __tests__/Form.test.tsx
rename to src/components/Form/__tests__/Form.test.tsx
index 9a3f03f..61c92dd 100644
--- a/__tests__/Form.test.tsx
+++ b/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', () => {
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
new file mode 100644
index 0000000..0c012b6
--- /dev/null
+++ b/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';
diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
index 7944860..bbc756e 100644
--- a/src/components/Grid/Grid.tsx
+++ b/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 {
+export interface GridProps extends React.HTMLAttributes {
columns?: string | number;
gap?: string | number;
rows?: string | number;
diff --git a/src/components/Grid/Row.tsx b/src/components/Grid/Row.tsx
index 69022a6..ddb00d6 100644
--- a/src/components/Grid/Row.tsx
+++ b/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;
+export type RowProps = React.HTMLAttributes;
const Row = React.forwardRef((
{
diff --git a/__tests__/Grid.test.tsx b/src/components/Grid/__tests__/Grid.test.tsx
similarity index 96%
rename from __tests__/Grid.test.tsx
rename to src/components/Grid/__tests__/Grid.test.tsx
index ce84d3e..2c869b7 100644
--- a/__tests__/Grid.test.tsx
+++ b/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', () => {
diff --git a/src/components/Grid/index.ts b/src/components/Grid/index.ts
index 039999b..77cff75 100644
--- a/src/components/Grid/index.ts
+++ b/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';
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 35841a2..8cf92d5 100644
--- a/src/components/Icon/Icon.tsx
+++ b/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 {
+export interface IconProps extends React.HTMLAttributes {
icon: IconName | string;
size?: string | number;
}
diff --git a/__tests__/Icon.test.tsx b/src/components/Icon/__tests__/Icon.test.tsx
similarity index 94%
rename from __tests__/Icon.test.tsx
rename to src/components/Icon/__tests__/Icon.test.tsx
index 111c053..ddd8b4a 100644
--- a/__tests__/Icon.test.tsx
+++ b/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', () => {
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
index ea963a1..c243cee 100644
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -1 +1,4 @@
export { default as Icon } from './Icon';
+export type { IconProps } from './Icon';
+
+export type { IconName } from './IconName'
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 50ba66f..769187d 100644
--- a/src/components/Modal/Modal.tsx
+++ b/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';
let modalManager: ModalManager;
diff --git a/src/components/Modal/__tests__/Modal.test.tsx b/src/components/Modal/__tests__/Modal.test.tsx
index 6f8f84c..9a4843b 100644
--- a/src/components/Modal/__tests__/Modal.test.tsx
+++ b/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 => {
diff --git a/src/components/Modal/__tests__/modalManager.test.ts b/src/components/Modal/__tests__/modalManager.test.ts
index f942bce..4cf9b18 100644
--- a/src/components/Modal/__tests__/modalManager.test.ts
+++ b/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', () => {
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
new file mode 100644
index 0000000..d62b50c
--- /dev/null
+++ b/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';
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
deleted file mode 100644
index c6b3568..0000000
--- a/src/components/Modal/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Modal } from './Modal';
diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/Overlay.tsx
similarity index 97%
rename from src/components/Overlay/index.tsx
rename to src/components/Overlay/Overlay.tsx
index 14f4840..226b651 100644
--- a/src/components/Overlay/index.tsx
+++ b/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;
placement?: Placement;
diff --git a/src/components/Overlay/OverlayTrigger.tsx b/src/components/Overlay/OverlayTrigger.tsx
index a6b7630..b5d440f 100644
--- a/src/components/Overlay/OverlayTrigger.tsx
+++ b/src/components/Overlay/OverlayTrigger.tsx
@@ -1,12 +1,12 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useRef, useState } from 'react';
-import Overlay from '@/components/Overlay/index';
import { Placement, PositioningStrategy } from '@popperjs/core';
-import { Trigger, triggerPropTypes } from '@/components/Overlay/Trigger';
import { AnimatePresence } from 'framer-motion';
+import { Trigger, triggerPropTypes } from './Trigger';
+import Overlay from './Overlay';
-interface OverlayTriggerProps {
+export interface OverlayTriggerProps {
arrow?: boolean;
children: React.ReactElement;
overlay: React.ReactNode;
diff --git a/src/components/Overlay/__tests__/Overlay.test.tsx b/src/components/Overlay/__tests__/Overlay.test.tsx
index b4b10b5..8ed2bae 100644
--- a/src/components/Overlay/__tests__/Overlay.test.tsx
+++ b/src/components/Overlay/__tests__/Overlay.test.tsx
@@ -1,7 +1,7 @@
import { mount } from 'enzyme';
import React from 'react';
-import OverlayTrigger from '@/components/Overlay/OverlayTrigger';
import { motion } from 'framer-motion';
+import OverlayTrigger from '../OverlayTrigger';
describe('Overlay test', () => {
it('should render overlay when hovered', async () => {
diff --git a/src/components/Overlay/index.ts b/src/components/Overlay/index.ts
new file mode 100644
index 0000000..6f3e9e5
--- /dev/null
+++ b/src/components/Overlay/index.ts
@@ -0,0 +1,8 @@
+export { default as Overlay } from './Overlay';
+export type { OverlayProps } from './Overlay';
+
+export { default as OverlayTrigger } from './OverlayTrigger';
+export type { OverlayTriggerProps } from './OverlayTrigger'
+
+export { triggerPropTypes } from './Trigger';
+export type { Trigger } from './Trigger';
diff --git a/src/components/Page/Content.tsx b/src/components/Page/Content.tsx
index 60bb75c..81f51e4 100644
--- a/src/components/Page/Content.tsx
+++ b/src/components/Page/Content.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import clsx from 'clsx';
-type PageContentProps = React.HTMLAttributes;
+export type PageContentProps = React.HTMLAttributes;
const PageContent = ({
children,
diff --git a/src/components/Page/Header.tsx b/src/components/Page/Header.tsx
index 74370ee..e89465a 100644
--- a/src/components/Page/Header.tsx
+++ b/src/components/Page/Header.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Panel } from '@/components/Panel';
import clsx from 'clsx';
+import { Panel } from '../Pane';
export interface PageHeaderProps extends React.HTMLAttributes {
title?: string;
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 48344b2..8a85ed6 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import clsx from 'clsx';
-import PageHeader from '@/components/Page/Header';
-import PageContent from '@/components/Page/Content';
+import PageHeader from '../Page/Header';
+import PageContent from '../Page/Content';
export type PageProps = React.HTMLAttributes ;
diff --git a/__tests__/Page.test.tsx b/src/components/Page/__tests__/Page.test.tsx
similarity index 95%
rename from __tests__/Page.test.tsx
rename to src/components/Page/__tests__/Page.test.tsx
index a7147a0..1bbcc7d 100644
--- a/__tests__/Page.test.tsx
+++ b/src/components/Page/__tests__/Page.test.tsx
@@ -1,6 +1,6 @@
import { shallow } from 'enzyme';
import React from 'react';
-import { Page } from '@/components/Page';
+import Page from '../Page';
describe('Page test', () => {
it('should render page', () => {
diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
index 5726cea..911e318 100644
--- a/src/components/Page/index.ts
+++ b/src/components/Page/index.ts
@@ -1,3 +1,8 @@
export { default as Page } from './Page';
+export type { PageProps } from './Page';
+
export { default as PageHeader } from './Header';
+export type { PageHeaderProps } from './Header';
+
export { default as PageContent } from './Content';
+export type { default as PageContentProps } from './Content';
diff --git a/src/components/Pane/Container.tsx b/src/components/Pane/Container.tsx
new file mode 100644
index 0000000..83b65a7
--- /dev/null
+++ b/src/components/Pane/Container.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export interface PanelContainerProps extends React.HTMLAttributes {
+ vertical?: boolean;
+}
+
+const PanelContainer = React.forwardRef((
+ {
+ children,
+ vertical
+ },
+ ref
+): React.ReactElement => (
+
+ {children}
+
+));
+
+PanelContainer.displayName = 'PanelContainer';
+PanelContainer.propTypes = {
+ children: PropTypes.node,
+ vertical: PropTypes.bool
+}
+
+export default PanelContainer;
diff --git a/src/components/Pane/Content.tsx b/src/components/Pane/Content.tsx
new file mode 100644
index 0000000..9ead825
--- /dev/null
+++ b/src/components/Pane/Content.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export type PaneContentProps = React.HTMLAttributes;
+
+const PaneContent = React.forwardRef((
+ {
+ children,
+ className
+ },
+ ref
+): React.ReactElement => (
+
+ {children}
+
+));
+
+PaneContent.displayName = 'PaneContent';
+PaneContent.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string
+}
+
+export default PaneContent;
diff --git a/src/components/Pane/Pane.tsx b/src/components/Pane/Pane.tsx
new file mode 100644
index 0000000..fdfe5f9
--- /dev/null
+++ b/src/components/Pane/Pane.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import PaneContent from './Content';
+import { ForwardComponentWithStatics } from '../utils';
+import { PaneContainer } from './index';
+
+export type PaneStatics = {
+ Content: typeof PaneContent;
+ Container: typeof PaneContainer;
+}
+
+export interface PaneProps extends React.HTMLAttributes {
+ horizontal?: boolean;
+}
+
+// Static properties are not given yet, when declaring the card const. Therefore, the error saying
+// that Pane is missing above PaneStatics properties. These will defined after the pane component
+// is defined.
+// @ts-ignore
+const Pane: ForwardComponentWithStatics = React.forwardRef((
+ {
+ children,
+ className,
+ horizontal
+ },
+ ref
+): React.ReactElement => (
+
+ {children}
+
+));
+
+Pane.displayName = 'Pane';
+Pane.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ horizontal: PropTypes.bool
+}
+
+Pane.Content = PaneContent;
+Pane.Container = PaneContainer;
+
+export default Pane;
diff --git a/src/components/Pane/__tests__/Pane.test.tsx b/src/components/Pane/__tests__/Pane.test.tsx
new file mode 100644
index 0000000..171a78c
--- /dev/null
+++ b/src/components/Pane/__tests__/Pane.test.tsx
@@ -0,0 +1,61 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import Pane from '../Pane';
+import PaneContainer from '../Container';
+import PaneContent from '../Content';
+
+describe('Pane test', () => {
+ it('should render pane container', () => {
+ const container = shallow(
+
+ Hello world
+
+ );
+
+ expect(container.find('.pane-container').length).toBe(1);
+ });
+
+ it('should render vertical pane container', () => {
+ const container = shallow(
+
+ Hello world
+
+ );
+
+ expect(container.find('.pane-container.vertical').length).toBe(1);
+ });
+
+ it('should render pane', () => {
+ const container = shallow(
+
+ Hello world
+
+ );
+
+ expect(container.find('.pane').length).toBe(1);
+ });
+
+ it('should render horizontal pane', () => {
+ const container = shallow(
+
+ Hello world
+
+ );
+
+ expect(container.find('.pane.horizontal').length).toBe(1);
+ });
+ it('should render pane content', () => {
+ const container = mount(
+
+
+ Hello world
+
+
+ Hello world
+
+
- {children}
-
-);
-
-export default Panel;
diff --git a/src/components/Panel/index.ts b/src/components/Panel/index.ts
deleted file mode 100644
index 1eee39f..0000000
--- a/src/components/Panel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Panel } from './Panel';
diff --git a/src/components/SelectField/SelectField.tsx b/src/components/SelectField/SelectField.tsx
index 53b874d..2dd3647 100644
--- a/src/components/SelectField/SelectField.tsx
+++ b/src/components/SelectField/SelectField.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
-import FieldBaseProps from '@/components/Field/FieldBase';
-import FieldBase, { propTypes as basePropTypes } from '@/components/Field/FieldBase';
-import SelectFieldInput from '@/components/SelectField/SelectFieldInput';
+import { FieldBase, FieldBaseProps, propTypes as basePropTypes } from '../Field';
+import SelectFieldInput from './SelectFieldInput';
export type SelectFieldProps = React.SelectHTMLAttributes & FieldBaseProps;
diff --git a/src/components/SelectField/SelectFieldInput.tsx b/src/components/SelectField/SelectFieldInput.tsx
index 4b8d320..078e331 100644
--- a/src/components/SelectField/SelectFieldInput.tsx
+++ b/src/components/SelectField/SelectFieldInput.tsx
@@ -1,9 +1,8 @@
import * as React from 'react';
-import { propTypes, SelectFieldProps } from '@/components/SelectField/SelectField';
import { Children, isValidElement, ReactNode, useContext, useEffect, useState } from 'react';
-import { FieldContext, FieldContextProps } from '@/components/Field/FieldContext';
import clsx from 'clsx';
-import FieldContainer from '@/components/Field/FieldContainer';
+import { SelectFieldProps } from './SelectField';
+import { FieldContainer, FieldContext, FieldContextProps, propTypes } from '../Field';
const determineInitialValue = (children: ReactNode): string => {
let value = '';
diff --git a/__tests__/Selectfield.test.tsx b/src/components/SelectField/__tests__/Selectfield.test.tsx
similarity index 98%
rename from __tests__/Selectfield.test.tsx
rename to src/components/SelectField/__tests__/Selectfield.test.tsx
index 435b28a..b144997 100644
--- a/__tests__/Selectfield.test.tsx
+++ b/src/components/SelectField/__tests__/Selectfield.test.tsx
@@ -1,6 +1,6 @@
import { mount, render } from 'enzyme';
import React from 'react';
-import { SelectField } from '@/components';
+import SelectField from '../SelectField';
describe('SelectField test', () => {
it('should render text input', () => {
diff --git a/src/components/SelectField/index.ts b/src/components/SelectField/index.ts
index 3b49bb8..6e6caf7 100644
--- a/src/components/SelectField/index.ts
+++ b/src/components/SelectField/index.ts
@@ -1 +1,4 @@
export { default as SelectField } from './SelectField';
+export type { SelectFieldProps } from './SelectField';
+
+export { default as SelectFieldInput } from './SelectFieldInput'
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index b82a222..aa1b54f 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import { Variant } from '@/components';
import clsx from 'clsx';
+import { Variant } from '../utils';
export interface TagProps extends React.HTMLAttributes {
variant: Variant | string;
diff --git a/__tests__/Tag.test.tsx b/src/components/Tag/__tests__/Tag.test.tsx
similarity index 84%
rename from __tests__/Tag.test.tsx
rename to src/components/Tag/__tests__/Tag.test.tsx
index 5fad12e..2750c03 100644
--- a/__tests__/Tag.test.tsx
+++ b/src/components/Tag/__tests__/Tag.test.tsx
@@ -1,6 +1,7 @@
import { shallow } from 'enzyme';
import React from 'react';
-import { Tag, Variant } from '@/components';
+import Tag from '../Tag';
+import { Variant } from '../../utils';
describe('Tag test', () => {
diff --git a/src/components/Tag/index.ts b/src/components/Tag/index.ts
index 03a21a6..b5b89ad 100644
--- a/src/components/Tag/index.ts
+++ b/src/components/Tag/index.ts
@@ -1 +1,2 @@
export { default as Tag } from './Tag';
+export type { TagProps } from './Tag';
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index b2a3d72..1202e2c 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import FieldBase, { propTypes as basePropTypes } from '@/components/Field/FieldBase';
-import FieldBaseProps from '@/components/Field/FieldBase';
-import TextFieldInput from '@/components/TextField/TextFieldInput';
+import { FieldBase, FieldBaseProps, propTypes as basePropTypes } from '../Field';
+import TextFieldInput from './TextFieldInput';
export type TextFieldProps = React.InputHTMLAttributes & FieldBaseProps;
diff --git a/src/components/TextField/TextFieldInput.tsx b/src/components/TextField/TextFieldInput.tsx
index d24388b..b6fde9b 100644
--- a/src/components/TextField/TextFieldInput.tsx
+++ b/src/components/TextField/TextFieldInput.tsx
@@ -1,8 +1,7 @@
import * as React from 'react';
-import { FieldContext, FieldContextProps } from '@/components/Field/FieldContext';
import { propTypes, TextFieldProps } from './TextField';
import { useContext, useEffect, useState } from 'react';
-import FieldContainer from '@/components/Field/FieldContainer';
+import { FieldContainer, FieldContext, FieldContextProps } from '../Field';
const TextFieldInput = React.forwardRef((
{
diff --git a/__tests__/Textfield.test.tsx b/src/components/TextField/__tests__/Textfield.test.tsx
similarity index 96%
rename from __tests__/Textfield.test.tsx
rename to src/components/TextField/__tests__/Textfield.test.tsx
index 18dd492..b4f2d1c 100644
--- a/__tests__/Textfield.test.tsx
+++ b/src/components/TextField/__tests__/Textfield.test.tsx
@@ -1,6 +1,8 @@
import { mount, render } from 'enzyme';
import React from 'react';
-import { Button, TextField, Variant } from '@/components';
+import TextField from '../TextField';
+import { Variant } from '../../utils';
+import { Button } from '../../Button';
describe('TextField test', () => {
it('should render text input', () => {
diff --git a/src/components/TextField/index.ts b/src/components/TextField/index.ts
index f38be84..4ec2ec4 100644
--- a/src/components/TextField/index.ts
+++ b/src/components/TextField/index.ts
@@ -1 +1,2 @@
-export { default as TextField } from '@/components/TextField/TextField';
+export { default as TextField } from './TextField';
+export type { TextFieldProps } from './TextField';
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/Tooltip.tsx
similarity index 83%
rename from src/components/Tooltip/index.tsx
rename to src/components/Tooltip/Tooltip.tsx
index 5840dc3..5948932 100644
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,9 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import OverlayTrigger from '@/components/Overlay/OverlayTrigger';
import { Placement } from '@popperjs/core';
-import { Trigger, triggerPropTypes } from '@/components/Overlay/Trigger';
+import { OverlayTrigger, Trigger, triggerPropTypes } from '../Overlay';
-interface TooltipProps {
+export interface TooltipProps {
arrow?: boolean;
children: React.ReactElement;
placement?: Placement;
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
new file mode 100644
index 0000000..66893e9
--- /dev/null
+++ b/src/components/Tooltip/index.ts
@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
diff --git a/src/components/animations/index.ts b/src/components/animations/index.ts
new file mode 100644
index 0000000..e0c4b1e
--- /dev/null
+++ b/src/components/animations/index.ts
@@ -0,0 +1,2 @@
+export { default as fade } from './fade';
+export { motionsMap, motionsPropTypes } from './motionsMap';
diff --git a/src/components/animations/motionsMap.ts b/src/components/animations/motionsMap.ts
index ffce4f3..d2921ca 100644
--- a/src/components/animations/motionsMap.ts
+++ b/src/components/animations/motionsMap.ts
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import fade from '@/components/animations/fade';
+import fade from './fade';
export const motionsMap = {
fade
diff --git a/src/components/index.ts b/src/components/index.ts
index b8208c2..4c3168c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,7 +3,7 @@ export * from './Card';
export * from './Container';
export * from './Grid';
export * from './Page';
-export * from './Panel';
+export * from './Pane';
export * from './Icon';
export * from './Modal';
export * from './utils';
diff --git a/src/components/utils/__tests__/mergeRefs.test.ts b/src/components/utils/__tests__/mergeRefs.test.ts
index 9884903..c6fd055 100644
--- a/src/components/utils/__tests__/mergeRefs.test.ts
+++ b/src/components/utils/__tests__/mergeRefs.test.ts
@@ -1,4 +1,4 @@
-import { mergeRefs } from '@/components/utils/mergeRefs';
+import { mergeRefs } from "../mergeRefs";
describe('mergeRefs test', () => {
it('should return null when falsy values applied', () => {
diff --git a/src/components/utils/generateGuuid.ts b/src/components/utils/generateGuuid.ts
deleted file mode 100644
index 964a683..0000000
--- a/src/components/utils/generateGuuid.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-const generateGuid = (): string => {
- const segment = () => Math.floor(1 + Math.random() * 65536)
- .toString(16)
- .substring(1);
-
- return `${segment()}${segment()}-`
- + `${segment()}${segment()}-`
- + `${segment()}${segment()}-`
- + `${segment()}${segment()}`;
-};
-
-export {
- generateGuid
-}
diff --git a/src/components/utils/index.ts b/src/components/utils/index.ts
index 145fbbe..50ed7c6 100644
--- a/src/components/utils/index.ts
+++ b/src/components/utils/index.ts
@@ -1 +1,3 @@
export { Variant } from './Variant';
+export type { ForwardComponentWithStatics } from './ForwardComponentWithStatics';
+export { mergeRefs } from './mergeRefs';
diff --git a/src/fonts/inter/inter-v2-latin-100.eot b/src/fonts/inter/inter-v2-latin-100.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-100.svg b/src/fonts/inter/inter-v2-latin-100.svg
deleted file mode 100644
index 88884b4..0000000
--- a/src/fonts/inter/inter-v2-latin-100.svg
+++ /dev/null
@@ -1,349 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-100.ttf b/src/fonts/inter/inter-v2-latin-100.ttf
deleted file mode 100644
index 91bff86..0000000
Binary files a/src/fonts/inter/inter-v2-latin-100.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-100.woff b/src/fonts/inter/inter-v2-latin-100.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-100.woff2 b/src/fonts/inter/inter-v2-latin-100.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-200.eot b/src/fonts/inter/inter-v2-latin-200.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-200.svg b/src/fonts/inter/inter-v2-latin-200.svg
deleted file mode 100644
index 08ea51d..0000000
--- a/src/fonts/inter/inter-v2-latin-200.svg
+++ /dev/null
@@ -1,350 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-200.ttf b/src/fonts/inter/inter-v2-latin-200.ttf
deleted file mode 100644
index 9b6aaa2..0000000
Binary files a/src/fonts/inter/inter-v2-latin-200.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-200.woff b/src/fonts/inter/inter-v2-latin-200.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-200.woff2 b/src/fonts/inter/inter-v2-latin-200.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-300.eot b/src/fonts/inter/inter-v2-latin-300.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-300.svg b/src/fonts/inter/inter-v2-latin-300.svg
deleted file mode 100644
index 6908131..0000000
--- a/src/fonts/inter/inter-v2-latin-300.svg
+++ /dev/null
@@ -1,350 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-300.ttf b/src/fonts/inter/inter-v2-latin-300.ttf
deleted file mode 100644
index dfa15d0..0000000
Binary files a/src/fonts/inter/inter-v2-latin-300.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-300.woff b/src/fonts/inter/inter-v2-latin-300.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-300.woff2 b/src/fonts/inter/inter-v2-latin-300.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-500.eot b/src/fonts/inter/inter-v2-latin-500.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-500.svg b/src/fonts/inter/inter-v2-latin-500.svg
deleted file mode 100644
index 737585d..0000000
--- a/src/fonts/inter/inter-v2-latin-500.svg
+++ /dev/null
@@ -1,351 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-500.ttf b/src/fonts/inter/inter-v2-latin-500.ttf
deleted file mode 100644
index 9ee77a3..0000000
Binary files a/src/fonts/inter/inter-v2-latin-500.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-500.woff b/src/fonts/inter/inter-v2-latin-500.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-500.woff2 b/src/fonts/inter/inter-v2-latin-500.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-600.eot b/src/fonts/inter/inter-v2-latin-600.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-600.svg b/src/fonts/inter/inter-v2-latin-600.svg
deleted file mode 100644
index 9c54192..0000000
--- a/src/fonts/inter/inter-v2-latin-600.svg
+++ /dev/null
@@ -1,351 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-600.ttf b/src/fonts/inter/inter-v2-latin-600.ttf
deleted file mode 100644
index b69705b..0000000
Binary files a/src/fonts/inter/inter-v2-latin-600.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-600.woff b/src/fonts/inter/inter-v2-latin-600.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-600.woff2 b/src/fonts/inter/inter-v2-latin-600.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-700.eot b/src/fonts/inter/inter-v2-latin-700.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-700.svg b/src/fonts/inter/inter-v2-latin-700.svg
deleted file mode 100644
index 1ed86ff..0000000
--- a/src/fonts/inter/inter-v2-latin-700.svg
+++ /dev/null
@@ -1,352 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-700.ttf b/src/fonts/inter/inter-v2-latin-700.ttf
deleted file mode 100644
index 22afc01..0000000
Binary files a/src/fonts/inter/inter-v2-latin-700.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-700.woff b/src/fonts/inter/inter-v2-latin-700.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-700.woff2 b/src/fonts/inter/inter-v2-latin-700.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-800.eot b/src/fonts/inter/inter-v2-latin-800.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-800.svg b/src/fonts/inter/inter-v2-latin-800.svg
deleted file mode 100644
index e689401..0000000
--- a/src/fonts/inter/inter-v2-latin-800.svg
+++ /dev/null
@@ -1,350 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-800.ttf b/src/fonts/inter/inter-v2-latin-800.ttf
deleted file mode 100644
index a8ab1f8..0000000
Binary files a/src/fonts/inter/inter-v2-latin-800.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-800.woff b/src/fonts/inter/inter-v2-latin-800.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-800.woff2 b/src/fonts/inter/inter-v2-latin-800.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-900.eot b/src/fonts/inter/inter-v2-latin-900.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-900.svg b/src/fonts/inter/inter-v2-latin-900.svg
deleted file mode 100644
index 60f2670..0000000
--- a/src/fonts/inter/inter-v2-latin-900.svg
+++ /dev/null
@@ -1,349 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-900.ttf b/src/fonts/inter/inter-v2-latin-900.ttf
deleted file mode 100644
index b07b4b1..0000000
Binary files a/src/fonts/inter/inter-v2-latin-900.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-900.woff b/src/fonts/inter/inter-v2-latin-900.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-900.woff2 b/src/fonts/inter/inter-v2-latin-900.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-regular.eot b/src/fonts/inter/inter-v2-latin-regular.eot
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-regular.svg b/src/fonts/inter/inter-v2-latin-regular.svg
deleted file mode 100644
index 84da31d..0000000
--- a/src/fonts/inter/inter-v2-latin-regular.svg
+++ /dev/null
@@ -1,351 +0,0 @@
-
-
-
diff --git a/src/fonts/inter/inter-v2-latin-regular.ttf b/src/fonts/inter/inter-v2-latin-regular.ttf
deleted file mode 100644
index 3fedbc7..0000000
Binary files a/src/fonts/inter/inter-v2-latin-regular.ttf and /dev/null differ
diff --git a/src/fonts/inter/inter-v2-latin-regular.woff b/src/fonts/inter/inter-v2-latin-regular.woff
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/inter/inter-v2-latin-regular.woff2 b/src/fonts/inter/inter-v2-latin-regular.woff2
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fonts/icons/Cui-Icons.eot b/src/icons/cui-icons.eot
similarity index 100%
rename from src/fonts/icons/Cui-Icons.eot
rename to src/icons/cui-icons.eot
diff --git a/src/fonts/icons/Cui-Icons.svg b/src/icons/cui-icons.svg
similarity index 100%
rename from src/fonts/icons/Cui-Icons.svg
rename to src/icons/cui-icons.svg
diff --git a/src/fonts/icons/Cui-Icons.ttf b/src/icons/cui-icons.ttf
similarity index 100%
rename from src/fonts/icons/Cui-Icons.ttf
rename to src/icons/cui-icons.ttf
diff --git a/src/fonts/icons/Cui-Icons.woff b/src/icons/cui-icons.woff
similarity index 100%
rename from src/fonts/icons/Cui-Icons.woff
rename to src/icons/cui-icons.woff
diff --git a/src/style/.gitkeep b/src/style/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/style/base/_base.scss b/src/style/base/_base.scss
index 15a4186..b3f3399 100644
--- a/src/style/base/_base.scss
+++ b/src/style/base/_base.scss
@@ -7,8 +7,5 @@ body {
background: var(--base-body-background);
color: var(--base-font-color);
margin: var(--base-body-gutter);
- font: {
- family: var(--base-font-family);
- }
line-height: 1.2rem;
}
diff --git a/src/style/base/_typography.scss b/src/style/base/_typography.scss
index 77e6cf6..353e6c0 100644
--- a/src/style/base/_typography.scss
+++ b/src/style/base/_typography.scss
@@ -1,99 +1,15 @@
@use "mixins";
@use "variables";
-/* inter-100 - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 100;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-200 - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 200;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-300 - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 300;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-regular - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 400;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-500 - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 500;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-600 - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 600;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-700 - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 700;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-800 - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 800;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-900 - latin */
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: 900;
- src: local(''),
- url('../fonts/inter/inter-v2-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/inter/inter-v2-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
-
@font-face {
font-family: 'Cui-Icons';
font-style: normal;
font-weight: 500;
src: local(''),
- url('../fonts/icons/cui-icons.eot') format('eot'),
- url('../fonts/icons/cui-icons.svg') format('svg'),
- url('../fonts/icons/cui-icons.ttf') format('ttf'),
- url('../fonts/icons/cui-icons.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ url('#{variables.$iconPath}/cui-icons.eot') format('eot'),
+ url('#{variables.$iconPath}/cui-icons.svg') format('svg'),
+ url('#{variables.$iconPath}/cui-icons.ttf') format('ttf'),
+ url('#{variables.$iconPath}/cui-icons.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
h1 {
diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
index 5da7188..fd7bf72 100644
--- a/src/style/base/_variables.scss
+++ b/src/style/base/_variables.scss
@@ -1,5 +1,5 @@
/**
- * 1. Colors
+ * Colors
*/
$colors: (
'red': (
@@ -140,56 +140,54 @@ $colors: (
'dark': hsl(200, 19%, 18%),
'default-font-color': #fff, //AAA
)
-);
+) !default;
@function color($color, $variant: 'default') {
@return map-get(map-get($colors, $color), $variant);
}
/**
- * 2. Base
+ * Base
*/
-$base-background-color: color('gray', 'background');
-$base-body-gutter: 0;
-$base-font-color: hsl(200, 19%, 18%);
-$base-font-family: 'Inter, apple-sf-pro-text, Helvetica, Arial, sans-serif';
-$base-border-color: hsl(0, 0%, 88%);
-$base-border-hover-color: hsl(0, 0%, 74%);
-$base-border-radius: 4px;
-$base-gutter: 1rem;
-$base-gutter-steps: 0.25;
+$base-background-color: color('gray', 'background') !default;
+$base-body-gutter: 0 !default;
+$base-font-color: hsl(200, 19%, 18%) !default;
+$base-border-color: hsl(0, 0%, 88%) !default;
+$base-border-hover-color: hsl(0, 0%, 74%) !default;
+$base-border-radius: 4px !default;
+$base-gutter: 1rem !default;
+$base-gutter-steps: 0.25 !default;
$breakpoints: (
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px'
-);
+) !default;
:root {
--base-body-background: #{$base-background-color};
--base-body-gutter: #{$base-body-gutter};
--base-font-color: #{$base-font-color};
- --base-font-family: #{$base-font-family};
--base-border-color: #{$base-border-color};
--base-border-hover-color: #{$base-border-hover-color};
--base-border-radius: #{$base-border-radius};
--base-gutter: #{$base-gutter};
}
-$primary-color: color('deep-purple', 'default');
-$primary-color-hover: color('deep-purple', 'hover');
-$primary-color-active: color('deep-purple', 'active');
-$primary-color-light-background: color('deep-purple', 'background');
+$primary-color: color('deep-purple', 'default') !default;
+$primary-color-hover: color('deep-purple', 'hover') !default;
+$primary-color-active: color('deep-purple', 'active') !default;
+$primary-color-light-background: color('deep-purple', 'background') !default;
-$danger-color: color('red', 'default');
-$danger-color-hover: color('red', 'hover');
-$danger-color-active: color('red', 'active');
-$danger-color-light-background: color('red', 'background');
+$danger-color: color('red', 'default') !default;
+$danger-color-hover: color('red', 'hover') !default;
+$danger-color-active: color('red', 'active') !default;
+$danger-color-light-background: color('red', 'background') !default;
-$success-color: color('green', 'default');
-$success-color-hover: color('green', 'hover');
-$success-color-active: color('green', 'active');
+$success-color: color('green', 'default') !default;
+$success-color-hover: color('green', 'hover') !default;
+$success-color-active: color('green', 'active') !default;
:root {
--primary-color: #{$primary-color};
@@ -208,41 +206,30 @@ $success-color-active: color('green', 'active');
}
/**
- * 3. Panel
- */
-$panel-background: #fff;
-$panel-gutter: 2rem;
-
-:root {
- --panel-background: #{$panel-background};
- --panel-gutter: #{$panel-gutter}
-}
-
-/**
- * 4. Page
+ * Page
*/
-$page-gutter: 2rem;
+$page-gutter: 2rem !default;
:root {
--page-gutter: #{$page-gutter};
}
/**
- * 5. Button
+ * Button
*/
-$button-padding: 1rem;
-$button-font-weight: 600;
-$button-font-size: 1rem;
+$button-padding: 1rem !default;
+$button-font-weight: 600 !default;
+$button-font-size: 1rem !default;
-$primary-button-ghost-hover-background: color('deep-purple', 'background');
-$primary-button-ghost-active-background: color('deep-purple', 'background-hover');
+$primary-button-ghost-hover-background: color('deep-purple', 'background') !default;
+$primary-button-ghost-active-background: color('deep-purple', 'background-hover') !default;
-$secondary-button-background: transparent;
-$secondary-button-hover-background: color('deep-purple', 'background');
-$secondary-button-active-background: color('deep-purple', 'background-hover');
+$secondary-button-background: transparent !default;
+$secondary-button-hover-background: color('deep-purple', 'background') !default;
+$secondary-button-active-background: color('deep-purple', 'background-hover') !default;
-$danger-button-ghost-hover-background: color('red', 'background');
-$danger-button-ghost-active-background: color('red', 'background-hover');
+$danger-button-ghost-hover-background: color('red', 'background') !default;
+$danger-button-ghost-active-background: color('red', 'background-hover') !default;
:root {
--button-padding: #{$button-padding};
@@ -279,10 +266,10 @@ $danger-button-ghost-active-background: color('red', 'background-hover');
}
/**
- * 6. Cards
+ * Cards
*/
-$card-padding: 1.5rem;
-$card-background: #fff;
+$card-padding: 1.5rem !default;
+$card-background: #fff !default;
:root {
--card-padding: #{$card-padding};
@@ -290,11 +277,11 @@ $card-background: #fff;
}
/**
- * 7. Form fields
+ * Form fields
*/
-$form-field-padding: 1rem;
-$form-field-font-weight: 500;
-$form-field-font-size: 1rem;
+$form-field-padding: 1rem !default;
+$form-field-font-weight: 500 !default;
+$form-field-font-size: 1rem !default;
:root {
--form-field-padding: #{$form-field-padding};
@@ -303,8 +290,9 @@ $form-field-font-size: 1rem;
}
/**
- * 8. Icons
+ * Icons
*/
+$iconPath: '../icons' !default;
$icons: (
'activity': '\e900',
'alert-circle': '\e901',
@@ -557,11 +545,11 @@ $icons: (
}
/**
- * 8. Form fields
+ * Form fields
*/
-$form-field-padding: 1rem;
-$form-field-font-weight: 500;
-$form-field-font-size: 1rem;
+$form-field-padding: 1rem !default;
+$form-field-font-weight: 500 !default;
+$form-field-font-size: 1rem !default;
:root {
--form-field-padding: #{$form-field-padding};
diff --git a/src/style/components/_panel.scss b/src/style/components/_panel.scss
index e46dc3a..db80526 100644
--- a/src/style/components/_panel.scss
+++ b/src/style/components/_panel.scss
@@ -1,7 +1,27 @@
-.panel {
+.pane-container {
+ display: flex;
+
+ &.vertical {
+ flex-direction: column;
+ }
+}
+
+.pane {
background: var(--panel-background);
+ display: flex;
+ flex-direction: column;
+ flex: 1 auto;
+ position: relative;
+
+ &.horizontal {
+ flex-direction: row;
+ }
+
+ .pane-content {
+ padding: var(--base-gutter);
+ }
- &.panel-spaced {
- padding: var(--panel-gutter);
+ .pane-header {
+ padding: var(--base-gutter);
}
}
diff --git a/src/style/index.scss b/src/style/index.scss
index cc5e4be..d08aa86 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,6 +1,7 @@
/**
* 1. Base style setup
*/
+@forward "base/variables";
@use "base/typography";
@use "base/base";
diff --git a/tsconfig.json b/tsconfig.json
index 8337dc1..1a01ba5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,10 +30,7 @@
"esModuleInterop": true,
"strict": true,
"isolatedModules": true,
- "baseUrl": ".",
- "paths": {
- "@/*": ["src/*"]
- }
+ "baseUrl": "./src"
},
"include": [
"src/**/*.ts",
@@ -43,7 +40,9 @@
"exclude": [
"node_modules",
"dist",
+ "scss",
"setupTests.ts",
- "www"
+ "www",
+ "src/**/__tests__/*"
]
}
diff --git a/www/src/index.tsx b/www/src/index.tsx
index a49e321..7e0b858 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -3,12 +3,27 @@ import { useState } from 'react';
import * as ReactDom from 'react-dom';
import '../../src/style/index.scss';
-import { Button, Card, Col, Grid, Icon, Modal, Page, Row, SelectField, Tag, TextField, Variant } from '../../src';
+import {
+ Button,
+ Card,
+ Col,
+ Grid,
+ Icon,
+ Modal,
+ Page,
+ PaneContainer,
+ Row,
+ SelectField,
+ Tag,
+ TextField,
+ Variant
+} from '../../src';
import Container from '../../src/components/Container/Container';
import FormGroup from '../../src/components/Form/Group';
import FormLabel from '../../src/components/Form/Label';
import FormMessage from '../../src/components/Form/Message';
-import Tooltip from '../../src/components/Tooltip';
+import { Tooltip } from '../../src/components/Tooltip';
+import Pane from '../../src/components/Pane/Pane';
const TestControllable = () => {
const [value, setValue] = useState('');
@@ -106,1997 +121,2012 @@ const TestModals = () => {
};
ReactDom.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }>Icon left
-
-
- }>Icon
- right
-
-
- Button colors
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Col 1/1
+
+
+ Col 1/2
+ Col 2/2
+
-
- Col 1/3
- Col 2/3
- Col 3/4
-
+
+ Col 1/3
+ Col 2/3
+ Col 3/4
+
-
- Col 1/3
- Col 2/3
- Col 3/4
-
+
+ Col 1/3
+ Col 2/3
+ Col 3/4
+
-
- Col 1/4
- Col 2/4
- Col 3/4
- Col 4/4
-
-
-
-
-
-
-
-
-
-
- Standard input
- Username
-
-
+
+ Col 1/4
+ Col 2/4
+ Col 3/4
+ Col 4/4
+
+
+
+
+
+
+
+
+
+
+ Standard input
+ Username
+
+
-
- Input with floating label
-
-
+
+ Input with floating label
+
+
-
- Input with default value
-
-
+
+ Input with default value
+
+
-
- Input with actions
- {
+
+ Input with actions
+ {
- }}
- actions={[
-
- ]}
- valid={true}
- />
-
+ }}
+ actions={[
+
+ ]}
+ valid={true}
+ />
+
-
- Invalid input
-
-
- Input is invalid
-
-
+
+ Invalid input
+
+
+ Input is invalid
+
+
-
- Valid input
-
-
-
- Valid input
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- test text
- Primary
- Danger
- Rood
- Roze
- Paars
- Diep-paars
- Indigo
- Blauw
- Lichtblauw
- Teal
- Groen
- Lichtgroen
- Limoen
- Geel
- Amber
- Oranje
- Bruin
- Grijs
- Blauwgrijs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Activity
-
-
-
-
-
- Alert circle
-
-
-
-
-
- Alert triangle
-
-
-
-
-
- Archive
-
-
-
-
-
- Arrow left
-
-
-
-
-
- Arrow circle down
-
-
-
-
-
- Arrow circle left
-
-
-
-
-
- Arrow circle right
-
-
-
-
-
- Arrow circle up
-
-
-
-
-
- Sort down
-
-
-
-
-
- Sort down
-
-
-
-
-
- Arrow right
-
-
-
-
-
- Arrow alt left
-
-
-
-
-
- Arrow alt down
-
-
-
-
-
- Arrow alt right
-
-
-
-
-
- Arrow alt up
-
-
-
-
-
- Sort left
-
-
-
-
-
- Sort right
-
-
-
-
-
- Sort up
-
-
-
-
-
- Arrow up
-
-
-
-
-
- chevron-double down
-
-
-
-
-
- chevron-double left
-
-
-
-
-
- chevron-double right
-
-
-
-
-
- chevron-double up
-
-
-
-
-
- At
-
-
-
-
-
- Attach 2
-
-
-
-
-
- Attach
-
-
-
-
-
- Award
-
-
-
-
-
- Backspace
-
-
-
-
-
- Bar chart 2
-
-
-
-
-
- Bar chart
-
-
-
-
-
- Battery
-
-
-
-
-
- Behance
-
-
-
-
-
- Bell off
-
-
-
-
-
- Bell
-
-
-
-
-
- Bluetooth
-
-
-
-
-
- Book open
-
-
-
-
-
- Book
-
-
-
-
-
- Bookmark
-
-
-
-
-
- Briefcase
-
-
-
-
-
- Browser
-
-
-
-
-
- Brush
-
-
-
-
-
- Bulb
-
-
-
-
-
- Calendar
-
-
-
-
-
- Camera
-
-
-
-
-
- Car
-
-
-
-
-
- Cast
-
-
-
-
-
- Charging
-
-
-
-
-
- Checkmark circle 2
-
-
-
-
-
- Checkmark circle
-
-
-
-
-
- Checkmark
-
-
-
-
-
- Checkmark square 2
-
-
-
-
-
- Checkmark square
-
-
-
-
-
- Chevron down
-
-
-
-
-
- Chevron left
-
-
-
-
-
- Chevron right
-
-
-
-
-
- Chevron up
-
-
-
-
-
- Clipboard
-
-
-
-
-
- Clock
-
-
-
-
-
- Close circle
-
-
-
-
-
- Close
-
-
-
-
-
- Close square
-
-
-
-
-
- Cloud download
-
-
-
-
-
- Cloud upload
-
-
-
-
-
- Code download
-
-
-
-
-
- Code
-
-
-
-
-
- Collapse
-
-
-
-
-
- Color palette
-
-
-
-
-
- Color picker
-
-
-
-
-
- Compass
-
-
-
-
-
- Copy
-
-
-
-
-
- Corner down left
-
-
-
-
-
- Corner down right
-
-
-
-
-
- Corner left down
-
-
-
-
-
- Corner left up
-
-
-
-
-
- Corner right down
-
-
-
-
-
- Corner right up
-
-
-
-
-
- Corner up left
-
-
-
-
-
- Corner up right
-
-
-
-
-
- Credit card
-
-
-
-
-
- Crop
-
-
-
-
-
- Cube
-
-
-
-
-
- Diagonal arrow left down
-
-
-
-
-
- Diagonal arrow left up
-
-
-
-
-
- Diagonal arrow right down
-
-
-
-
-
- Diagonal arrow right up
-
-
-
-
-
- Done all
-
-
-
-
-
- Download
-
-
-
-
-
- Droplet off
-
-
-
-
-
- Droplet
-
-
-
-
-
- Edit 2
-
-
-
-
-
- Edit
-
-
-
-
-
- Email
-
-
-
-
-
- Expand
-
-
-
-
-
- External link
-
-
-
-
-
- Eye off 2
-
-
-
-
-
- Eye off
-
-
-
-
-
- Eye
-
-
-
-
-
- Facebook
-
-
-
-
-
- File add
-
-
-
-
-
- File
-
-
-
-
-
- File remove
-
-
-
-
-
- File text
-
-
-
-
-
- Film
-
-
-
-
-
- Flag
-
-
-
-
-
- Flash off
-
-
-
-
-
- Flash
-
-
-
-
-
- Flip 2
-
-
-
-
-
- Flip
-
-
-
-
-
- Folder add
-
-
-
-
-
- Folder
-
-
-
-
-
- Folder remove
-
-
-
-
-
- Funnel
-
-
-
-
-
- Gift
-
-
-
-
-
- Github
-
-
-
-
-
- Globe 2
-
-
-
-
-
- Globe
-
-
-
-
-
- Google
-
-
-
-
-
- Grid
-
-
-
-
-
- Hard drive
-
-
-
-
-
- Hash
-
-
-
-
-
- Headphones
-
-
-
-
-
- Heart
-
-
-
-
-
- Home
-
-
-
-
-
- Image
-
-
-
-
-
- Inbox
-
-
-
-
-
- Info
-
-
-
-
-
- Keypad
-
-
-
-
-
- Layers
-
-
-
-
-
- Layout
-
-
-
-
-
- Link 2
-
-
-
-
-
- Link
-
-
-
-
-
- Linkedin
-
-
-
-
-
- List
-
-
-
-
-
- Loader
-
-
-
-
-
- Lock
-
-
-
-
-
- Log in
-
-
-
-
-
- Log out
-
-
-
-
-
- Map
-
-
-
-
-
- Maximize
-
-
-
-
-
- Menu 2
-
-
-
-
-
- Menu arrow
-
-
-
-
-
- Menu
-
-
-
-
-
- Message circle
-
-
-
-
-
- Message square
-
-
-
-
-
- Mic off
-
-
-
-
-
- Mic
-
-
-
-
-
- Minimize
-
-
-
-
-
- Minus circle
-
-
-
-
-
- Minus
-
-
-
-
-
- Minus square
-
-
-
-
-
- Monitor
-
-
-
-
-
- Moon
-
-
-
-
-
- More horizontal
-
-
-
-
-
- More vertical
-
-
-
-
-
- Move
-
-
-
-
-
- Music
-
-
-
-
-
- Navigation 2
-
-
-
-
-
- Navigation
-
-
-
-
-
- Npm
-
-
-
-
-
- Options 2
-
-
-
-
-
- Options
-
-
-
-
-
- Pantone
-
-
-
-
-
- Paper plane
-
-
-
-
-
- Pause circle
-
-
-
-
-
- People
-
-
-
-
-
- Percent
-
-
-
-
-
- user add
-
-
-
-
-
- user delete
-
-
-
-
-
- user done
-
-
-
-
-
- user
-
-
-
-
-
- user remove
-
-
-
-
-
- Phone call
-
-
-
-
-
- Phone missed
-
-
-
-
-
- Phone off
-
-
-
-
-
- Phone
-
-
-
-
-
- Pie chart
-
-
-
-
-
- Pin
-
-
-
-
-
- Play circle
-
-
-
-
-
- Plus circle
-
-
-
-
-
- Plus
-
-
-
-
-
- Plus square
-
-
-
-
-
- Power
-
-
-
-
-
- Pricetags
-
-
-
-
-
- Printer
-
-
-
-
-
- Question mark circle
-
-
-
-
-
- Question mark
-
-
-
-
-
- Radio button off
-
-
-
-
-
- Radio button on
-
-
-
-
-
- Radio
-
-
-
-
-
- Recording
-
-
-
-
-
- Refresh
-
-
-
-
-
- Repeat
-
-
-
-
-
- Rewind left
-
-
-
-
-
- Rewind right
-
-
-
-
-
- Save
-
-
-
-
-
- Scissors
-
-
-
-
-
- Search
-
-
-
-
-
- Settings 2
-
-
-
-
-
- Settings
-
-
-
-
-
- Shake
-
-
-
-
-
- Share
-
-
-
-
-
- Shield off
-
-
-
-
-
- Shield
-
-
-
-
-
- Shopping bag
-
-
-
-
-
- Shopping cart
-
-
-
-
-
- Shuffle 2
-
-
-
-
-
- Shuffle
-
-
-
-
-
- Step backwards
-
-
-
-
-
- Step forward
-
-
-
-
-
- Slash
-
-
-
-
-
- Smartphone
-
-
-
-
-
- Smiling face
-
-
-
-
-
- Speaker
-
-
-
-
-
- Square
-
-
-
-
-
- Star
-
-
-
-
-
- Stop circle
-
-
-
-
-
- Sun
-
-
-
-
-
- Swap
-
-
-
-
-
- Sync
-
-
-
-
-
- Text
-
-
-
-
-
- Thermometer minus
-
-
-
-
-
- Thermometer
-
-
-
-
-
- Thermometer plus
-
-
-
-
-
- Toggle left
-
-
-
-
-
- Toggle right
-
-
-
-
-
- Trash 2
-
-
-
-
-
- Trash
-
-
-
-
-
- Trending down
-
-
-
-
-
- Trending up
-
-
-
-
-
- Tv
-
-
-
-
-
- Twitter
-
-
-
-
-
- Umbrella
-
-
-
-
-
- Undo
-
-
-
-
-
- Unlock
-
-
-
-
-
- Upload
-
-
-
-
-
- Video off
-
-
-
-
-
- Video
-
-
-
-
-
- Volume down
-
-
-
-
-
- Volume mute
-
-
-
-
-
- Volume off
-
-
-
-
-
- Volume up
-
-
-
-
-
- Wifi off
-
-
-
-
-
- Wifi
-
-
-
-
-
-
-
- ,
+
+ Valid input
+
+
+
+ Valid input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ test text
+ Primary
+ Danger
+ Rood
+ Roze
+ Paars
+ Diep-paars
+ Indigo
+ Blauw
+ Lichtblauw
+ Teal
+ Groen
+ Lichtgroen
+ Limoen
+ Geel
+ Amber
+ Oranje
+ Bruin
+ Grijs
+ Blauwgrijs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Activity
+
+
+
+
+
+ Alert circle
+
+
+
+
+
+ Alert triangle
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Arrow left
+
+
+
+
+
+ Arrow circle down
+
+
+
+
+
+ Arrow circle left
+
+
+
+
+
+ Arrow circle right
+
+
+
+
+
+ Arrow circle up
+
+
+
+
+
+ Sort down
+
+
+
+
+
+ Sort down
+
+
+
+
+
+ Arrow right
+
+
+
+
+
+ Arrow alt left
+
+
+
+
+
+ Arrow alt down
+
+
+
+
+
+ Arrow alt right
+
+
+
+
+
+ Arrow alt up
+
+
+
+
+
+ Sort left
+
+
+
+
+
+ Sort right
+
+
+
+
+
+ Sort up
+
+
+
+
+
+ Arrow up
+
+
+
+
+
+ chevron-double down
+
+
+
+
+
+ chevron-double left
+
+
+
+
+
+ chevron-double right
+
+
+
+
+
+ chevron-double up
+
+
+
+
+
+ At
+
+
+
+
+
+ Attach 2
+
+
+
+
+
+ Attach
+
+
+
+
+
+ Award
+
+
+
+
+
+ Backspace
+
+
+
+
+
+ Bar chart 2
+
+
+
+
+
+ Bar chart
+
+
+
+
+
+ Battery
+
+
+
+
+
+ Behance
+
+
+
+
+
+ Bell off
+
+
+
+
+
+ Bell
+
+
+
+
+
+ Bluetooth
+
+
+
+
+
+ Book open
+
+
+
+
+
+ Book
+
+
+
+
+
+ Bookmark
+
+
+
+
+
+ Briefcase
+
+
+
+
+
+ Browser
+
+
+
+
+
+ Brush
+
+
+
+
+
+ Bulb
+
+
+
+
+
+ Calendar
+
+
+
+
+
+ Camera
+
+
+
+
+
+ Car
+
+
+
+
+
+ Cast
+
+
+
+
+
+ Charging
+
+
+
+
+
+ Checkmark circle 2
+
+
+
+
+
+ Checkmark circle
+
+
+
+
+
+ Checkmark
+
+
+
+
+
+ Checkmark square 2
+
+
+
+
+
+ Checkmark square
+
+
+
+
+
+ Chevron down
+
+
+
+
+
+ Chevron left
+
+
+
+
+
+ Chevron right
+
+
+
+
+
+ Chevron up
+
+
+
+
+
+ Clipboard
+
+
+
+
+
+ Clock
+
+
+
+
+
+ Close circle
+
+
+
+
+
+ Close
+
+
+
+
+
+ Close square
+
+
+
+
+
+ Cloud download
+
+
+
+
+
+ Cloud upload
+
+
+
+
+
+ Code download
+
+
+
+
+
+ Code
+
+
+
+
+
+ Collapse
+
+
+
+
+
+ Color palette
+
+
+
+
+
+ Color picker
+
+
+
+
+
+ Compass
+
+
+
+
+
+ Copy
+
+
+
+
+
+ Corner down left
+
+
+
+
+
+ Corner down right
+
+
+
+
+
+ Corner left down
+
+
+
+
+
+ Corner left up
+
+
+
+
+
+ Corner right down
+
+
+
+
+
+ Corner right up
+
+
+
+
+
+ Corner up left
+
+
+
+
+
+ Corner up right
+
+
+
+
+
+ Credit card
+
+
+
+
+
+ Crop
+
+
+
+
+
+ Cube
+
+
+
+
+
+ Diagonal arrow left down
+
+
+
+
+
+ Diagonal arrow left up
+
+
+
+
+
+ Diagonal arrow right down
+
+
+
+
+
+ Diagonal arrow right up
+
+
+
+
+
+ Done all
+
+
+
+
+
+ Download
+
+
+
+
+
+ Droplet off
+
+
+
+
+
+ Droplet
+
+
+
+
+
+ Edit 2
+
+
+
+
+
+ Edit
+
+
+
+
+
+ Email
+
+
+
+
+
+ Expand
+
+
+
+
+
+ External link
+
+
+
+
+
+ Eye off 2
+
+
+
+
+
+ Eye off
+
+
+
+
+
+ Eye
+
+
+
+
+
+ Facebook
+
+
+
+
+
+ File add
+
+
+
+
+
+ File
+
+
+
+
+
+ File remove
+
+
+
+
+
+ File text
+
+
+
+
+
+ Film
+
+
+
+
+
+ Flag
+
+
+
+
+
+ Flash off
+
+
+
+
+
+ Flash
+
+
+
+
+
+ Flip 2
+
+
+
+
+
+ Flip
+
+
+
+
+
+ Folder add
+
+
+
+
+
+ Folder
+
+
+
+
+
+ Folder remove
+
+
+
+
+
+ Funnel
+
+
+
+
+
+ Gift
+
+
+
+
+
+ Github
+
+
+
+
+
+ Globe 2
+
+
+
+
+
+ Globe
+
+
+
+
+
+ Google
+
+
+
+
+
+ Grid
+
+
+
+
+
+ Hard drive
+
+
+
+
+
+ Hash
+
+
+
+
+
+ Headphones
+
+
+
+
+
+ Heart
+
+
+
+
+
+ Home
+
+
+
+
+
+ Image
+
+
+
+
+
+ Inbox
+
+
+
+
+
+ Info
+
+
+
+
+
+ Keypad
+
+
+
+
+
+ Layers
+
+
+
+
+
+ Layout
+
+
+
+
+
+ Link 2
+
+
+
+
+
+ Link
+
+
+
+
+
+ Linkedin
+
+
+
+
+
+ List
+
+
+
+
+
+ Loader
+
+
+
+
+
+ Lock
+
+
+
+
+
+ Log in
+
+
+
+
+
+ Log out
+
+
+
+
+
+ Map
+
+
+
+
+
+ Maximize
+
+
+
+
+
+ Menu 2
+
+
+
+
+
+ Menu arrow
+
+
+
+
+
+ Menu
+
+
+
+
+
+ Message circle
+
+
+
+
+
+ Message square
+
+
+
+
+
+ Mic off
+
+
+
+
+
+ Mic
+
+
+
+
+
+ Minimize
+
+
+
+
+
+ Minus circle
+
+
+
+
+
+ Minus
+
+
+
+
+
+ Minus square
+
+
+
+
+
+ Monitor
+
+
+
+
+
+ Moon
+
+
+
+
+
+ More horizontal
+
+
+
+
+
+ More vertical
+
+
+
+
+
+ Move
+
+
+
+
+
+ Music
+
+
+
+
+
+ Navigation 2
+
+
+
+
+
+ Navigation
+
+
+
+
+
+ Npm
+
+
+
+
+
+ Options 2
+
+
+
+
+
+ Options
+
+
+
+
+
+ Pantone
+
+
+
+
+
+ Paper plane
+
+
+
+
+
+ Pause circle
+
+
+
+
+
+ People
+
+
+
+
+
+ Percent
+
+
+
+
+
+ user add
+
+
+
+
+
+ user delete
+
+
+
+
+
+ user done
+
+
+
+
+
+ user
+
+
+
+
+
+ user remove
+
+
+
+
+
+ Phone call
+
+
+
+
+
+ Phone missed
+
+
+
+
+
+ Phone off
+
+
+
+
+
+ Phone
+
+
+
+
+
+ Pie chart
+
+
+
+
+
+ Pin
+
+
+
+
+
+ Play circle
+
+
+
+
+
+ Plus circle
+
+
+
+
+
+ Plus
+
+
+
+
+
+ Plus square
+
+
+
+
+
+ Power
+
+
+
+
+
+ Pricetags
+
+
+
+
+
+ Printer
+
+
+
+
+
+ Question mark circle
+
+
+
+
+
+ Question mark
+
+
+
+
+
+ Radio button off
+
+
+
+
+
+ Radio button on
+
+
+
+
+
+ Radio
+
+
+
+
+
+ Recording
+
+
+
+
+
+ Refresh
+
+
+
+
+
+ Repeat
+
+
+
+
+
+ Rewind left
+
+
+
+
+
+ Rewind right
+
+
+
+
+
+ Save
+
+
+
+
+
+ Scissors
+
+
+
+
+
+ Search
+
+
+
+
+
+ Settings 2
+
+
+
+
+
+ Settings
+
+
+
+
+
+ Shake
+
+
+
+
+
+ Share
+
+
+
+
+
+ Shield off
+
+
+
+
+
+ Shield
+
+
+
+
+
+ Shopping bag
+
+
+
+
+
+ Shopping cart
+
+
+
+
+
+ Shuffle 2
+
+
+
+
+
+ Shuffle
+
+
+
+
+
+ Step backwards
+
+
+
+
+
+ Step forward
+
+
+
+
+
+ Slash
+
+
+
+
+
+ Smartphone
+
+
+
+
+
+ Smiling face
+
+
+
+
+
+ Speaker
+
+
+
+
+
+ Square
+
+
+
+
+
+ Star
+
+
+
+
+
+ Stop circle
+
+
+
+
+
+ Sun
+
+
+
+
+
+ Swap
+
+
+
+
+
+ Sync
+
+
+
+
+
+ Text
+
+
+
+
+
+ Thermometer minus
+
+
+
+
+
+ Thermometer
+
+
+
+
+
+ Thermometer plus
+
+
+
+
+
+ Toggle left
+
+
+
+
+
+ Toggle right
+
+
+
+
+
+ Trash 2
+
+
+
+
+
+ Trash
+
+
+
+
+
+ Trending down
+
+
+
+
+
+ Trending up
+
+
+
+
+
+ Tv
+
+
+
+
+
+ Twitter
+
+
+
+
+
+ Umbrella
+
+
+
+
+
+ Undo
+
+
+
+
+
+ Unlock
+
+
+
+
+
+ Upload
+
+
+
+
+
+ Video off
+
+
+
+
+
+ Video
+
+
+
+
+
+ Volume down
+
+
+
+
+
+ Volume mute
+
+
+
+
+
+ Volume off
+
+
+
+
+
+ Volume up
+
+
+
+
+
+ Wifi off
+
+
+
+
+
+ Wifi
+
+
+
+
+
+
+
+
+ ,
document.getElementById('root')
);
diff --git a/www/webpack.config.js b/www/webpack.config.js
index fc6ec09..a54cb30 100644
--- a/www/webpack.config.js
+++ b/www/webpack.config.js
@@ -1,15 +1,14 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
-const WebpackManifestPlugin = require('webpack-manifest-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const dotenv = require('dotenv');
/**
* Load env file and parse config, to be used when building the app
* @returns {webpack.DefinePlugin}
*/
-const setEnvVars = () => {
+const setEnvVars = () => {
const env = dotenv.config({
path: './www/.env'
}).parsed;
@@ -42,7 +41,7 @@ module.exports = {
}, {
loader: 'sass-loader',
options: {
- implementation: require('dart-sass')
+ implementation: require('sass')
}
}]
}, {