feat(core): add page wireframe and configure global style and theme

BrahimS · Sep 29, 2024 · 1980bda · 1980bda
1 parent 01e6b66
commit 1980bda
Show file tree

Hide file tree

Showing 12 changed files with 23,353 additions and 17,402 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/apps/uikit/src/app/app.tsx b/apps/uikit/src/app/app.tsx
@@ -1,73 +1,20 @@
 import React from 'react';
-import * as Form from '@radix-ui/react-form';
-import styled from 'styled-components';
-import { Theme, Button } from '@radix-ui/themes';
-import '@radix-ui/themes/styles.css';
-import './styles.css';
+import { ThemeProvider } from 'styled-components';
+import { Header } from './components/Header';
+import { AppWrapper, GlobalStyle, theme } from '@react-monorepo/shared-ui';
+import { MainContent } from './components/Main/MainContent';
+import { Footer } from './components/Footer';
 
-const StyledApp = styled.div`
-	display: flex;
-	flex-direction: column;
-	justify-items: center;
-	justify-content: space-between;
-	align-items: center;
-`;
-
-export function App(): React.ReactElement {
+export function App(): React.ReactNode {
 	return (
-		<StyledApp>
-			<h1>Hello there</h1>
-			<Theme>
-				<Button>Hey 👋</Button>
-				<Button variant="outline">Hey 👋</Button>
-				<Button variant="subtle">Hey 👋</Button>
-
-				<Form.Root className="FormRoot">
-					<Form.Field className="FormField" name="email">
-						<div
-							style={{
-								display: 'flex',
-								alignItems: 'baseline',
-								justifyContent: 'space-between',
-							}}
-						>
-							<Form.Label className="FormLabel">Email</Form.Label>
-							<Form.Message className="FormMessage" match="valueMissing">
-								Please enter your email
-							</Form.Message>
-							<Form.Message className="FormMessage" match="typeMismatch">
-								Please provide a valid email
-							</Form.Message>
-						</div>
-						<Form.Control asChild>
-							<input className="Input" type="email" required />
-						</Form.Control>
-					</Form.Field>
-					<Form.Field className="FormField" name="question">
-						<div
-							style={{
-								display: 'flex',
-								alignItems: 'baseline',
-								justifyContent: 'space-between',
-							}}
-						>
-							<Form.Label className="FormLabel">Question</Form.Label>
-							<Form.Message className="FormMessage" match="valueMissing">
-								Please enter a question
-							</Form.Message>
-						</div>
-						<Form.Control asChild>
-							<textarea className="Textarea" required />
-						</Form.Control>
-					</Form.Field>
-					<Form.Submit asChild>
-						<button className="Button" style={{ marginTop: 10 }}>
-							Post question
-						</button>
-					</Form.Submit>
-				</Form.Root>
-			</Theme>
-		</StyledApp>
+		<ThemeProvider theme={theme}>
+			<GlobalStyle />
+			<AppWrapper>
+				<Header />
+				<MainContent />
+				<Footer />
+			</AppWrapper>
+		</ThemeProvider>
 	);
 }
 

diff --git a/apps/uikit/src/app/components/Footer/index.tsx b/apps/uikit/src/app/components/Footer/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { FooterWrapper } from '@react-monorepo/shared-ui';
+
+export const Footer = () => {
+	return <FooterWrapper>This is a footer</FooterWrapper>;
+};
diff --git a/apps/uikit/src/app/components/Header/index.tsx b/apps/uikit/src/app/components/Header/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { HeaderWrapper } from '@react-monorepo/shared-ui';
+
+export const Header = (): React.ReactElement => {
+	return <HeaderWrapper>this is a header</HeaderWrapper>;
+};
diff --git a/apps/uikit/src/app/components/Main/MainContent.tsx b/apps/uikit/src/app/components/Main/MainContent.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { MainWrapper } from '@react-monorepo/shared-ui';
+
+export const MainContent = () => {
+	return <MainWrapper>page body</MainWrapper>;
+};