;
+
+function ThrowError() {
+ React.useEffect(() => {
+ throwError('ErrorBoundarySimulationError', 'Lets simulate our ErrorBoundary Abilities 🛠️');
+ }, []);
+
+ return This can never be rendered, are you checking it in the DOM ☕️
;
+}
+
+export const Primary: StoryFn = () => (
+
+
+
+);
diff --git a/src/shared/components/error-boundary/index.styles.tsx b/src/shared/components/error-boundary/index.styles.tsx
new file mode 100644
index 0000000..dedb6d8
--- /dev/null
+++ b/src/shared/components/error-boundary/index.styles.tsx
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+import { Container } from 'shared/layouts';
+
+const Wrapper = styled(Container)`
+ margin: 0 auto;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 1rem;
+
+ & > img {
+ width: 300px;
+ }
+`;
+
+const Refresh = styled.button`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+
+ & span {
+ padding-left: 0.5rem;
+ }
+
+ & img {
+ width: 25px;
+ }
+`;
+
+export { Wrapper, Refresh };
diff --git a/src/shared/components/error-boundary/index.test.tsx b/src/shared/components/error-boundary/index.test.tsx
new file mode 100644
index 0000000..a701c84
--- /dev/null
+++ b/src/shared/components/error-boundary/index.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { throwError } from 'shared/utils';
+
+import { ErrorBoundary } from './index.component';
+import { renderWithOptions, screen, fireEvent, waitFor } from '../../../test';
+
+jest.mock('../../utils/env/index.util.ts', () => ({
+ __DEV__: true,
+ isBrowser: true,
+}));
+jest.mock('next/image', () => ({
+ __esModule: true,
+ default: (
+ props: JSX.IntrinsicAttributes &
+ React.ClassAttributes &
+ React.ImgHTMLAttributes
+ ) => ![]()
,
+}));
+
+function ThrowError() {
+ throwError('ErrorBoundarySimulationError', 'Lets simulate our ErrorBoundary Abilities 🛠️');
+
+ return This can never be rendered, are you checking it in the DOM ☕️
;
+}
+
+describe('first', () => {
+ it('should render child component when its error free', () => {
+ renderWithOptions(
+
+ Foo Bar Baz
+
+ );
+
+ expect(screen.getByText('Foo Bar Baz')).toBeInTheDocument();
+ });
+
+ it('should render ErrorBoundary component when child component is not error free', async () => {
+ renderWithOptions(
+
+
+
+ );
+
+ expect(screen.getByText('Oops, compilation error ')).toBeInTheDocument();
+
+ await waitFor(() => {
+ fireEvent.click(screen.getByText('Try again?'));
+ });
+ });
+});
diff --git a/src/shared/components/headings/index.component.tsx b/src/shared/components/headings/index.component.tsx
new file mode 100644
index 0000000..072bad6
--- /dev/null
+++ b/src/shared/components/headings/index.component.tsx
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+const Heading1 = styled.h1`
+ color: ${(props) => props.theme.colors.secondary400};
+ font-weight: ${(props) => props.theme.typography.title1.fontWeight};
+ font-size: ${(props) => props.theme.typography.title1.fontSize};
+ line-height: ${(props) => props.theme.typography.lineHeight.xxs};
+`;
+
+const Heading2 = styled.h2`
+ color: ${(props) => props.theme.colors?.secondary400};
+ font-weight: ${(props) => props.theme.typography?.title2.fontWeight};
+ font-size: ${(props) => props.theme.typography?.title2.fontSize};
+ line-height: ${(props) => props.theme.typography?.lineHeight.xxs};
+`;
+
+const Heading3 = styled.h3`
+ color: ${(props) => props.theme.colors.secondary400};
+ font-weight: ${(props) => props.theme.typography.title3.fontWeight};
+ font-size: ${(props) => props.theme.typography.title3.fontSize};
+ line-height: ${(props) => props.theme.typography.lineHeight.xxs};
+`;
+
+const Heading4 = styled.h4`
+ color: ${(props) => props.theme.colors.secondary400};
+ font-weight: ${(props) => props.theme.typography.bodyText.fontWeight};
+ font-size: ${(props) => props.theme.typography.bodyText.fontSize};
+ line-height: ${(props) => props.theme.typography.lineHeight.xxs};
+`;
+
+export { Heading1, Heading2, Heading3, Heading4 };
diff --git a/src/shared/components/headings/index.stories.tsx b/src/shared/components/headings/index.stories.tsx
new file mode 100644
index 0000000..d5ffea3
--- /dev/null
+++ b/src/shared/components/headings/index.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { StoryFn, Meta } from '@storybook/react';
+
+import { Heading1, Heading2, Heading3, Heading4 } from './index.component';
+
+export default {
+ title: 'Components/Headings',
+ component: Heading1,
+} as Meta;
+
+export const H1: StoryFn = () => Heading 1;
+
+export const H2: StoryFn = () => Heading 2;
+
+export const H3: StoryFn = () => Heading 3;
+
+export const H4: StoryFn = () => Heading 4;
diff --git a/src/shared/components/headings/index.test.tsx b/src/shared/components/headings/index.test.tsx
new file mode 100644
index 0000000..0604230
--- /dev/null
+++ b/src/shared/components/headings/index.test.tsx
@@ -0,0 +1,25 @@
+import { renderWithOptions, screen } from '../../../test';
+
+import { Heading1, Heading2, Heading3, Heading4 } from './index.component';
+
+describe('', () => {
+ it('should render Heading1', () => {
+ renderWithOptions(Heading 1);
+ expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Heading 1');
+ });
+
+ it('should render Heading2', () => {
+ renderWithOptions(Heading 2);
+ expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Heading 2');
+ });
+
+ it('should render Heading3', () => {
+ renderWithOptions(Heading 3);
+ expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Heading 3');
+ });
+
+ it('should render Heading4', () => {
+ renderWithOptions(Heading 4);
+ expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Heading 4');
+ });
+});
diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
new file mode 100644
index 0000000..b63aca8
--- /dev/null
+++ b/src/shared/components/index.ts
@@ -0,0 +1,3 @@
+export * from './headings/index.component';
+export * from './error-boundary/index.component';
+export * from './internet-notifier/index.component';
diff --git a/src/shared/components/internet-notifier/index.component.tsx b/src/shared/components/internet-notifier/index.component.tsx
new file mode 100644
index 0000000..954aee4
--- /dev/null
+++ b/src/shared/components/internet-notifier/index.component.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+
+import { useId } from '@radix-ui/react-id';
+import { CrossCircledIcon } from '@radix-ui/react-icons';
+
+import { designTokens } from 'design-system';
+
+import { useInternetNotifier } from './useInternetNotifier.presenter';
+import { Content, Close, Title, Description } from './index.styles';
+
+export function InternetNotifier() {
+ const closeBtnId = useId('closeBtn');
+ const data = useInternetNotifier();
+
+ return (
+
+
+
+
+
+
+ {data.title} 🛜
+ {data.message}
+
+
+
+ );
+}
diff --git a/src/shared/components/internet-notifier/index.model.ts b/src/shared/components/internet-notifier/index.model.ts
new file mode 100644
index 0000000..19af38a
--- /dev/null
+++ b/src/shared/components/internet-notifier/index.model.ts
@@ -0,0 +1,23 @@
+export class InternetNotifierModel {
+ public offlineListener(
+ listener: (_ev: Event) => any,
+ options?: boolean | AddEventListenerOptions
+ ) {
+ window.addEventListener('offline', listener, options);
+ }
+
+ public onlineListener(
+ listener: (_ev: Event) => any,
+ options?: boolean | AddEventListenerOptions
+ ) {
+ window.addEventListener('online', listener, options);
+ }
+
+ public unsubscribeOnline(listener: (_ev: Event) => any) {
+ window.removeEventListener('online', listener);
+ }
+
+ public unsubscribeOffline(listener: (_ev: Event) => any) {
+ window.removeEventListener('offline', listener);
+ }
+}
diff --git a/src/shared/components/internet-notifier/index.stories.tsx b/src/shared/components/internet-notifier/index.stories.tsx
new file mode 100644
index 0000000..6913cde
--- /dev/null
+++ b/src/shared/components/internet-notifier/index.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { InternetNotifier } from './index.component';
+
+export default {
+ title: 'Components/InternetNotifier',
+ component: InternetNotifier,
+} as Meta;
+
+export const TurnOnAndOffYourWifiToSee: StoryFn = () => (
+
+);
diff --git a/src/shared/components/internet-notifier/index.styles.tsx b/src/shared/components/internet-notifier/index.styles.tsx
new file mode 100644
index 0000000..7f554eb
--- /dev/null
+++ b/src/shared/components/internet-notifier/index.styles.tsx
@@ -0,0 +1,41 @@
+import * as Dialog from '@radix-ui/react-dialog';
+
+import { styled } from 'styled-components';
+
+import { designTokens } from 'design-system';
+
+const Content = styled(Dialog.Content)`
+ background-color: ${({ theme }) => theme.colors.white400};
+ border-radius: ${({ theme }) => theme.typography.borderRadius.lg};
+ box-shadow: 3px 3px 10px 0px #dee2eb;
+ color: ${({ theme }) => theme.colors.dark500};
+ width: 98%;
+ max-width: 500px;
+ height: 120px;
+ padding: 0.5rem 1rem;
+ position: fixed;
+ top: 5px;
+ right: 5px;
+ z-index: ${designTokens.typography.zIndexes.max};
+`;
+
+const Close = styled(Dialog.Close)`
+ background-color: transparent;
+ border: 0;
+ outline: none;
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+`;
+
+const Title = styled(Dialog.Title)`
+ font-size: ${({ theme }) => theme.typography.boldBody.fontSize};
+ font-weight: ${({ theme }) => theme.typography.boldBody.fontWeight};
+ padding-bottom: 0.5rem;
+`;
+
+const Description = styled(Dialog.Description)`
+ padding-top: 0.5rem;
+`;
+
+export { Content, Close, Title, Description };
diff --git a/src/shared/components/internet-notifier/index.test.tsx b/src/shared/components/internet-notifier/index.test.tsx
new file mode 100644
index 0000000..b823d8e
--- /dev/null
+++ b/src/shared/components/internet-notifier/index.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { screen, renderWithOptions, fireEvent, act } from '../../../test';
+
+import { InternetNotifier } from './index.component';
+
+function mockInternetConnection(status: string) {
+ const event = new window.Event(status);
+
+ act(() => {
+ window.dispatchEvent(event);
+ });
+}
+
+describe('', () => {
+ it('should render offline component', () => {
+ renderWithOptions();
+
+ mockInternetConnection('offline');
+
+ expect(screen.getByText('Gone offline 🛜')).toBeInTheDocument();
+ expect(screen.getByText('You are no longer connected to the internet.')).toBeInTheDocument();
+
+ fireEvent.click(screen.getByRole('button'));
+ expect(screen.queryByText('Gone offline')).not.toBeInTheDocument();
+ });
+
+ it('should render online component', () => {
+ renderWithOptions();
+
+ mockInternetConnection('online');
+
+ expect(screen.getByText('Back online 🛜')).toBeInTheDocument();
+ expect(screen.getByText('You are now connected to the internet.')).toBeInTheDocument();
+
+ fireEvent.click(screen.getByRole('button'));
+ expect(screen.queryByText('Back online')).not.toBeInTheDocument();
+ });
+});
diff --git a/src/shared/components/internet-notifier/useInternetNotifier.presenter.ts b/src/shared/components/internet-notifier/useInternetNotifier.presenter.ts
new file mode 100644
index 0000000..031192d
--- /dev/null
+++ b/src/shared/components/internet-notifier/useInternetNotifier.presenter.ts
@@ -0,0 +1,56 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+import { useBoolean } from 'shared/hooks';
+
+import { InternetNotifierModel } from './index.model';
+
+const INTERNET_STATES = {
+ DEFAULT: 'DEFAULT',
+ GONE_OFFLINE: 'GONE_OFFLINE',
+ BACK_ONLINE: 'BACK_ONLINE',
+} as const;
+
+export function useInternetNotifier() {
+ const { current: model } = useRef(new InternetNotifierModel());
+ const timeoutIdRef = useRef | null>(null);
+ const [state, setState] = useState(INTERNET_STATES.DEFAULT);
+ const [shownNotifier, { setToFalse: onHideNotifier, setToTrue: onShowNotifier }] = useBoolean();
+
+ const automaticallyHideNotifier = useCallback(() => {
+ timeoutIdRef.current = setTimeout(() => onHideNotifier(), 10000);
+ }, [onHideNotifier]);
+
+ const offlineListener = useCallback(() => {
+ setState(INTERNET_STATES.GONE_OFFLINE);
+ onShowNotifier();
+ automaticallyHideNotifier();
+ }, [automaticallyHideNotifier, onShowNotifier]);
+
+ const onlineListener = useCallback(() => {
+ setState(INTERNET_STATES.BACK_ONLINE);
+ onShowNotifier();
+ automaticallyHideNotifier();
+ }, [automaticallyHideNotifier, onShowNotifier]);
+
+ useEffect(() => {
+ model.offlineListener(offlineListener);
+ model.onlineListener(onlineListener);
+
+ return () => {
+ model.unsubscribeOffline(offlineListener);
+ model.unsubscribeOnline(onlineListener);
+ clearTimeout(timeoutIdRef.current!);
+ };
+ }, [model, offlineListener, onlineListener]);
+
+ const isBackOnline = state === INTERNET_STATES.BACK_ONLINE;
+
+ return {
+ open: shownNotifier,
+ title: isBackOnline ? 'Back online' : 'Gone offline',
+ message: isBackOnline
+ ? 'You are now connected to the internet.'
+ : 'You are no longer connected to the internet.',
+ onHideNotifier,
+ };
+}
diff --git a/src/shared/helpers/.gitkeep b/src/shared/helpers/.gitkeep
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/src/shared/helpers/.gitkeep
@@ -0,0 +1 @@
+export {};
diff --git a/src/shared/hooks/.gitkeep b/src/shared/hooks/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
new file mode 100644
index 0000000..158c533
--- /dev/null
+++ b/src/shared/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useBoolean';
diff --git a/src/shared/hooks/useBoolean.ts b/src/shared/hooks/useBoolean.ts
new file mode 100644
index 0000000..d6652d3
--- /dev/null
+++ b/src/shared/hooks/useBoolean.ts
@@ -0,0 +1,13 @@
+import { useCallback, useState } from 'react';
+
+type Returnee = [boolean, { setToTrue(): void; setToFalse(): void; toggle(): void }];
+
+export function useBoolean(initial: boolean | (() => boolean) = false): Returnee {
+ const [state, setState] = useState(initial);
+
+ const setToTrue = useCallback(() => setState(true), []);
+ const setToFalse = useCallback(() => setState(false), []);
+ const toggle = useCallback(() => setState((prevState) => !prevState), []);
+
+ return [state, { setToTrue, setToFalse, toggle }];
+}
diff --git a/src/shared/layouts/.gitkeep b/src/shared/layouts/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/shared/layouts/container/index.layout.tsx b/src/shared/layouts/container/index.layout.tsx
new file mode 100644
index 0000000..17f101e
--- /dev/null
+++ b/src/shared/layouts/container/index.layout.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+ /**
+ * @mobileStyle
+ */
+ padding: 1rem 2rem;
+ /**
+ * @desktopStyle
+ */
+ @media (min-width: ${({ theme }) => theme.typography.pageWidth.desktopStartWidth}) {
+ padding: 1rem 6rem;
+ }
+`;
diff --git a/src/shared/layouts/container/index.stories.tsx b/src/shared/layouts/container/index.stories.tsx
new file mode 100644
index 0000000..24f6ad2
--- /dev/null
+++ b/src/shared/layouts/container/index.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { StoryFn, Meta } from '@storybook/react';
+
+import { Container } from './index.layout';
+
+export default {
+ title: 'Layouts/Container',
+ component: Container,
+} as Meta;
+
+export const Primary: StoryFn = () => (
+
+ Feel free to reduce the screen resolution to notice the padding variation based on resolution
+
+);
diff --git a/src/shared/layouts/container/index.test.tsx b/src/shared/layouts/container/index.test.tsx
new file mode 100644
index 0000000..1e93ffb
--- /dev/null
+++ b/src/shared/layouts/container/index.test.tsx
@@ -0,0 +1,15 @@
+import { renderWithOptions, screen } from '../../../test';
+
+import { Container } from './index.layout';
+
+describe('', () => {
+ it('should render component', () => {
+ renderWithOptions(
+
+ Foo Bar Bax
+
+ );
+
+ expect(screen.getByText('Foo Bar Bax')).toBeInTheDocument();
+ });
+});
diff --git a/src/shared/layouts/index.ts b/src/shared/layouts/index.ts
new file mode 100644
index 0000000..8c39815
--- /dev/null
+++ b/src/shared/layouts/index.ts
@@ -0,0 +1,2 @@
+export * from './main/index.layout';
+export * from './container/index.layout';
diff --git a/src/shared/layouts/main/index.layout.tsx b/src/shared/layouts/main/index.layout.tsx
new file mode 100644
index 0000000..f963554
--- /dev/null
+++ b/src/shared/layouts/main/index.layout.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+type PrimitiveMainPropTypes = React.ComponentPropsWithoutRef<'main'>;
+type MainElement = React.ElementRef<'main'>;
+
+export const Main = React.forwardRef(
+ function Main(props, forwardedRef) {
+ return ;
+ }
+);
diff --git a/src/shared/layouts/main/index.test.tsx b/src/shared/layouts/main/index.test.tsx
new file mode 100644
index 0000000..b19d0db
--- /dev/null
+++ b/src/shared/layouts/main/index.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+
+import { Main } from './index.layout';
+
+describe('', () => {
+ it('should render component', () => {
+ render(
+
+ Foo Bar Baz
+
+ );
+
+ expect(screen.getByText('Foo Bar Baz')).toBeInTheDocument();
+ });
+});
diff --git a/src/shared/models/.gitkeep b/src/shared/models/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/shared/models/history/index.model.ts b/src/shared/models/history/index.model.ts
index d376585..43b9829 100644
--- a/src/shared/models/history/index.model.ts
+++ b/src/shared/models/history/index.model.ts
@@ -1,4 +1,4 @@
-export class History {
+export class HistoryModel {
public delete() {}
public deleteAll() {}
diff --git a/src/shared/models/index.ts b/src/shared/models/index.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/src/shared/models/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/src/shared/models/navigator/index.model.ts b/src/shared/models/navigator/index.model.ts
new file mode 100644
index 0000000..0c84c7e
--- /dev/null
+++ b/src/shared/models/navigator/index.model.ts
@@ -0,0 +1,11 @@
+export class NavigatorModel {
+ public append() {}
+
+ public prepend() {}
+
+ public insert() {}
+
+ public remove() {}
+
+ public lookup() {}
+}
diff --git a/src/shared/models/navigator/useNavigator.presenter.ts b/src/shared/models/navigator/useNavigator.presenter.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/src/shared/models/navigator/useNavigator.presenter.ts
@@ -0,0 +1 @@
+export {};
diff --git a/src/shared/models/settings/index.model.ts b/src/shared/models/settings/index.model.ts
index 3ee7a0b..04d576e 100644
--- a/src/shared/models/settings/index.model.ts
+++ b/src/shared/models/settings/index.model.ts
@@ -1,4 +1,4 @@
-export class Settings {
+export class SettingsModel {
public set defaultTextEngine(_name: string) {}
public get defaultTextEngine() {
diff --git a/src/shared/utils/compose-events/index.test.ts b/src/shared/utils/compose-events/index.test.ts
new file mode 100644
index 0000000..db662f6
--- /dev/null
+++ b/src/shared/utils/compose-events/index.test.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { composeEvents } from './index.util';
+
+describe('composeEvents', () => {
+ const mockedEvent = { target: { value: 'testValue' } } as unknown as React.SyntheticEvent