added typography-component

src/App.tsx

@@ -1,42 +1,12 @@
-/* -------------------------------------------------------------------------- */
-/*                                  Libraries                                 */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect } from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import { Provider } from "react-redux";
-/* -------------------------------------------------------------------------- */
-/*                                    Parts                                   */
-/* -------------------------------------------------------------------------- */
-import AppHotKeys from "ui/views/HotKeys";
-import AppLoader from "components/parts/Loader";
-import GlobalSearchbar from "ui/views/GlobalSearch";
-/* -------------------------------------------------------------------------- */
-/*                                    Misc                                    */
-/* -------------------------------------------------------------------------- */
-import { store } from "store/store";
-import routes from "routes";
-import RoutesRenderer from "components/RoutesRenderer";
-import NotificationsField from "ui/views/NotificationsField";
-/* -------------------------------------------------------------------------- */
-/*                         Application root component                         */
-/* -------------------------------------------------------------------------- */
-/**
- * Application root component
- * @return {JSX.Element}
- */
+import React from "react";
+import Typography from "components/typography/Typography";
+
+
 function App() {
   return (
-    <Provider store={store} >
-      <AppHotKeys>
-        <React.Suspense fallback={<AppLoader />}>
-          <Router>
-            <RoutesRenderer routes={routes} />
-          </Router>
-          <GlobalSearchbar />
-          <NotificationsField />
-        </React.Suspense>
-      </AppHotKeys>
-    </Provider>
+    <>
+    <Typography htmlTag="p" fontWeightVariant="bold">Hello World!</Typography>
+    </>
   );
 }
 

src/components/typography/Typography.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import classNames from 'classnames';
+import {
+    FontWeightVariants,
+    TypographyHtmlTagVariants,
+    TypographyFontWeightVariantsMap
+} from 'core/_variants'
+
+
+type Props = {
+    children: React.ReactNode;
+    htmlTag?: TypographyHtmlTagVariants | undefined;
+    fontWeightVariant?: FontWeightVariants;
+    className?: string | undefined;
+};
+
+const typographyFontWeightVariants: TypographyFontWeightVariantsMap<string> = {
+    thin: 'font-thin',
+    extralight: 'font-extralight',
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+    black: 'font-black'
+
+}
+
+const Typography = ({ 
+        children,
+        htmlTag,
+        fontWeightVariant='normal',
+        className
+    }: Props) => {
+        const As = htmlTag || 'div'  ;
+        return (
+            <As
+                className={classNames([
+                    [`${typographyFontWeightVariants[fontWeightVariant]}`],
+                    className
+                ])} 
+            >
+                {children}
+            </As>
+        );
+}
+
+export default Typography

src/core/_variants.ts

@@ -10,4 +10,12 @@ export type StyleColorVariantsMap<T> = {
 
 export type StyleGlobalVarinatsMap<T> = {
   [Property in StyleGlobalVariants]: T;
+}
+
+export type FontWeightVariants = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
+
+export type TypographyHtmlTagVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+
+export type TypographyFontWeightVariantsMap<T> = {
+  [Property in FontWeightVariants]: T;
 }