feat(FJS-3): Created components for example, added a stylization for …

…each, also implemented routing.

examples/react-uikit/src/epics/App/App.styles.tsx

@@ -1 +1,17 @@
-export default {};
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+export const reset = css`
+* {                
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}`;
+
+export const Capp = styled.div`
+    margin-left: 50px;
+    line-height: 50px;
+    & > .contactLink {
+        margin-left: 50px;
+    }
+`

examples/react-uikit/src/epics/App/App.tsx

@@ -1,14 +1,20 @@
-import React from 'react'
-import Welcome from '../Welcome'
-import Contacts from '../Contacts'
+import { FC } from 'react'
+import { BrowserRouter, Link } from 'react-router-dom'
+import { Global } from '@emotion/react'
+import { Capp, reset } from './App.styles'
+import AppRouter from '../../routes';
 
-const App = () => {
+const App: FC = (): JSX.Element => {
     return (
-        <>
-        <Welcome />
-        <Contacts />
-        </>
-    )
-}
+        <BrowserRouter>
+            <Global styles={reset} />
+            <Capp>
+                <Link to='/ '>Страница приветствия</Link>
+                <Link className="contactLink" to='/contacts'>Контакты</Link>
+            </Capp>
+            <AppRouter />
+        </BrowserRouter>
+    );
+};
 
-export default App
+export default App;

examples/react-uikit/src/epics/App/index.ts

@@ -1,3 +1,3 @@
 import App from "./App";
 
-export default App
+export default App;

examples/react-uikit/src/epics/Contacts/Contacts.styles.tsx

@@ -1 +1,5 @@
-export default {}
+import styled from "@emotion/styled";
+
+export const Ccontact = styled.div`
+    text-align: center;
+`

examples/react-uikit/src/epics/Contacts/Contacts.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
+import { FC } from 'react'
+import { Ccontact } from './Contacts.styles'
 
-const Contacts = () => {
+const Contacts: FC = ():JSX.Element => {
     return (
-        <div>
-            Contact us!
-        </div>
-    )
-}
+        <Ccontact>
+            <h1>Contact us!</h1>
+        </Ccontact>
+    );
+};
 
-export default Contacts
+export default Contacts;

examples/react-uikit/src/epics/Contacts/index.ts

@@ -1,2 +1,3 @@
 import Contacts from "./Contacts";
+
 export default Contacts;

examples/react-uikit/src/epics/Welcome/Welcome.styles.tsx

@@ -1 +1,6 @@
-export default {}
+import styled from "@emotion/styled"
+
+export const Cwelcome = styled.div`
+    background-color: #fff5bc;
+    height: 100vh;
+`;

examples/react-uikit/src/epics/Welcome/Welcome.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import { FC } from 'react'
+import ImageSlides from '../../features/ImageSlides'
+import { Cwelcome } from './Welcome.styles'
 
-const Welcome = () => {
+const Welcome: FC = ():JSX.Element => {
     return (
-        <h1>
-            Hello world!
-        </h1>
-    )
-}
+        <Cwelcome>
+            <ImageSlides/>
+        </Cwelcome>
+    );
+};
 
-export default Welcome
+export default Welcome;

examples/react-uikit/src/epics/Welcome/index.ts

@@ -1,3 +1,3 @@
 import Welcome from "./Welcome";
 
-export default Welcome
+export default Welcome;

examples/react-uikit/src/features/ImageSlides/ImageSlides.styles.tsx

@@ -1,6 +1,9 @@
-// import styled from '@emotion/styled';
-// import { getCSSObj } from '../../utils';
+import styled from '@emotion/styled';
 
-// export const CWrap = styled.div${getCSSObj};
-
-export default {}
+export const CWrap = styled.div`
+    text-align: center;
+    background-color: gray;
+    height: 50px;
+    color: white;
+    font-size: 3rem;
+`;

examples/react-uikit/src/features/ImageSlides/ImageSlides.tsx

@@ -1,23 +1,22 @@
-import React from 'react';
-// import { useTheme } from '@emotion/react';
-// import { CWrap } from './ImageSlides.styles';
+import { FC } from 'react';
+import { CWrap } from './ImageSlides.styles';
 
-// export interface IProps {
-// sizeId?: string;
-// langId?: string;
-// customise?: unknown;
-// }
+export interface IProps {
+    sizeId?: string;
+    langId?: string;
+    customise?: unknown;
+}
 
-// export const ImageSlides: React.FC = (props): JSX.Element => {
-// const { sizeId = 'mobile', langId = 'ru', customise = null } = props;
-// console.log(sizeId, langId, customise);
+export const ImageSlides: FC<IProps> = (props): JSX.Element => {
+    const { sizeId = 'mobile', langId = 'ru', customise = null } = props;
+    console.log(sizeId, langId, customise);
 
-// return (
-//     <CWrap>
-//         {`Hello`}
-//     </CWrap>
-// );
+    return (
+        <CWrap>
+            {`Hello Wolrd!`}
+        </CWrap>
+    );
 
-// };
+};
 
-export default {};
+export default ImageSlides;

examples/react-uikit/src/routes/AppRouter.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import Contacts from '../epics/Contacts';
+import Welcome from '../epics/Welcome';
+
+const AppRouter: FC = ():JSX.Element => {
+    return (
+        <Switch>
+            <Route path='/ '>
+                <Welcome />
+            </Route>
+            <Route path='/contacts'>
+                <Contacts />
+            </Route>
+            <Redirect to='/ ' />
+        </Switch>
+    );
+};
+
+export default AppRouter;

examples/react-uikit/src/routes/index.ts

@@ -0,0 +1,3 @@
+import AppRouter from "./AppRouter";
+
+export default AppRouter;