Added page (and base) style and root imports

babel.config.js

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

package.json

@@ -20,9 +20,11 @@
         "@types/enzyme-adapter-react-16": "^1.0.6",
         "@types/jest": "^26.0.10",
         "@types/react": "^16.9.46",
+        "@types/react-dom": "^16.9.8",
         "@types/react-is": "^16.7.1",
         "@typescript-eslint/eslint-plugin": "^4.5.0",
         "@typescript-eslint/parser": "^4.5.0",
+        "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/Page/Content.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+type PageContentProps = React.HTMLAttributes<HTMLDivElement>;
+
+const PageContent = ({
+    children,
+    className
+}: React.PropsWithChildren<PageContentProps>): React.ReactElement => (
+    <div
+        className={clsx(
+            'page-content',
+            className
+        )}
+    >
+        {children}
+    </div>
+);
+
+export default PageContent;

src/components/Page/Header.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Panel from '@/components/Panel';
+import clsx from 'clsx';
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+}
+
+const PageHeader = ({
+    children,
+    className,
+    title
+}: React.PropsWithChildren<PageHeaderProps>): React.ReactElement => (
+    <Panel
+        className={clsx(
+            'page-header',
+            title && 'with-title',
+            className
+        )}
+    >
+        {title && (
+            <div
+                className={clsx(
+                    'page-header-title'
+                )}
+            >
+                <h1>{title}</h1>
+            </div>
+        )}
+        {children}
+    </Panel>
+);
+
+export default PageHeader;

src/components/Page/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PageHeader from '@/components/Page/Header';
+import PageContent from '@/components/Page/Content';
+
+export type PageProps = React.HTMLAttributes<HTMLDivElement> ;
+
+const Page = ({
+    children,
+    className,
+}: React.PropsWithChildren<PageProps>): React.ReactElement => (
+    <div
+        className={clsx(
+            'page',
+            className
+        )}
+    >
+        {children}
+    </div>
+);
+
+Page.Header = PageHeader;
+Page.Content = PageContent;
+
+export default Page;

src/components/Panel/index.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    spaced?: boolean;
+}
+
+const Panel = ({
+    children,
+    className,
+    spaced
+}: React.PropsWithChildren<PanelProps>): React.ReactElement => (
+    <div
+        className={clsx(
+            'panel',
+            spaced && 'panel-spaced',
+            className
+        )}
+    >
+        {children}
+    </div>
+);
+
+export default Panel;

src/components/index.ts

@@ -1 +1,3 @@
 export * from './utils';
+export { default as Page } from './Page';
+export { default as Panel } from './Panel';