Merge pull request #6 from BrahimS/button-styleguide

feat(ui): add buttons to style guilde
BrahimS · Oct 8, 2024 · 7d05702 · 7d05702
2 parents 4b813a1 + 7836690
commit 7d05702
Show file tree

Hide file tree

Showing 11 changed files with 300 additions and 75 deletions.
diff --git a/apps/uikit/src/app/components/StyleGuide/Buttons/index.tsx b/apps/uikit/src/app/components/StyleGuide/Buttons/index.tsx
@@ -0,0 +1,50 @@
+import {
+	Box,
+	Button,
+	FlexBox,
+	TagText,
+	theme,
+} from '@react-monorepo/shared-ui';
+import React from 'react';
+
+export const Buttons = () => {
+	return (
+		<Box
+			display="flex"
+			flexDirection="row"
+			justifyContent="space-between"
+			alignItems="start"
+			flexWrap="wrap"
+			w="38%"
+			p={theme.spacing.sm}
+			shadow={theme.shadows.medium}
+			borderRadius={theme.spacing.sm}
+			as={'div'}
+			asChild={false}
+		>
+			<Box as="div" asChild w="100%" p="8px 0" justifyContent="start">
+				<TagText>Buttons</TagText>
+			</Box>
+			<FlexBox
+				display="flex"
+				direction="row"
+				justify="space-between"
+				gap="4"
+				align="center"
+			>
+				<Button variant="solid" color="primary" size="medium">
+					Primary
+				</Button>
+				<Button variant="outlined" color="secondary" size="medium">
+					Outlined
+				</Button>
+				<Button variant="ghost" color="danger" size="medium">
+					Ghost
+				</Button>
+				<Button variant="solid" color="primary" size="medium" disabled>
+					Disabled
+				</Button>
+			</FlexBox>
+		</Box>
+	);
+};
diff --git a/apps/uikit/src/app/components/StyleGuide/Colors/index.tsx b/apps/uikit/src/app/components/StyleGuide/Colors/index.tsx
@@ -0,0 +1,50 @@
+import { Box, colorScheme, TagText, theme } from '@react-monorepo/shared-ui';
+import React from 'react';
+
+export const Colors = () => {
+	return (
+		<Box
+			display="flex"
+			flexDirection="row"
+			justifyContent="space-between"
+			alignItems="start"
+			flexWrap="wrap"
+			w="38%"
+			p={theme.spacing.md}
+			shadow={theme.shadows.medium}
+			borderRadius={theme.spacing.sm}
+			as={'div'}
+			asChild={false}
+		>
+			<Box as="div" asChild w="100%">
+				<TagText>Colors</TagText>
+			</Box>
+			{Object.entries(colorScheme).map(([key, value]) => (
+				<Box
+					key={key}
+					w="86px"
+					h="86px"
+					display="flex"
+					flexDirection="column"
+					justifyContent="center"
+					alignItems="center"
+					shadow={theme.shadows.medium}
+					flexWrap="wrap"
+					borderRadius={theme.spacing.xs}
+					m={theme.spacing.xs}
+					bg={value}
+					style={{
+						color:
+							value === theme.colors.white || value === theme.colors.cream
+								? theme.colors.black
+								: theme.colors.white,
+					}}
+					as="div"
+					asChild
+				>
+					{key}
+				</Box>
+			))}
+		</Box>
+	);
+};
diff --git a/apps/uikit/src/app/components/StyleGuide/Intro/index.tsx b/apps/uikit/src/app/components/StyleGuide/Intro/index.tsx
@@ -0,0 +1,15 @@
+import { Box, Heading } from '@react-monorepo/shared-ui';
+import React from 'react';
+
+export const Intro = () => {
+	return (
+		<Box w="100%" as="div" asChild>
+			<Heading as="h1">UI Kit Library</Heading>
+			<p>
+				Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque
+				voluptatem distinctio eveniet voluptatum est iste, laudantium a officiis
+				architecto, aspernatur veniam provident harum assumenda tempora dolorum!
+			</p>
+		</Box>
+	);
+};
diff --git a/apps/uikit/src/app/components/StyleGuide/Typography/index.tsx b/apps/uikit/src/app/components/StyleGuide/Typography/index.tsx
@@ -33,7 +33,7 @@ export const TypographySection: React.FC = () => (
 		asChild={false}
 		shadow={theme.shadows.medium}
 		borderRadius={theme.spacing.sm}
-		p={theme.spacing.sm}
+		p={theme.spacing.md}
 	>
 		<TagText>Typography</TagText>
 		<ul style={{ marginBottom: '1.5rem' }}>
@@ -46,11 +46,11 @@ export const TypographySection: React.FC = () => (
 			</li>
 		</ul>
 		<TagText>Headlines</TagText>
-		<TypographyExample tag="h1">This is the styleguide</TypographyExample>
-		<TypographyExample tag="h2">This is the styleguide</TypographyExample>
-		<TypographyExample tag="h3">This is the styleguide</TypographyExample>
-		<TypographyExample tag="h4">This is the styleguide</TypographyExample>
-		<TypographyExample tag="h5">This is the styleguide</TypographyExample>
+		<TypographyExample tag="h1">The styleguide</TypographyExample>
+		<TypographyExample tag="h2">The styleguide</TypographyExample>
+		<TypographyExample tag="h3">The styleguide</TypographyExample>
+		<TypographyExample tag="h4">The styleguide</TypographyExample>
+		<TypographyExample tag="h5">The styleguide</TypographyExample>
 		<ParagraphContainer
 			direction="column"
 			gap="0"

diff --git a/apps/uikit/src/app/pages/Styleguide.tsx b/apps/uikit/src/app/pages/Styleguide.tsx
@@ -1,32 +1,19 @@
 import React from 'react';
-import {
-	Box,
-	colorScheme,
-	Container,
-	FlexBox,
-	Heading,
-	TagText,
-	theme,
-} from '@react-monorepo/shared-ui';
+import { Container, FlexBox, theme } from '@react-monorepo/shared-ui';
 import { TypographySection } from '../components/StyleGuide/Typography';
+import { Colors } from '../components/StyleGuide/Colors';
+import { Intro } from '../components/StyleGuide/Intro';
+import { Buttons } from '../components/StyleGuide/Buttons';
 
 // Main Styleguide page
 const Styleguide: React.FC = () => {
 	return (
 		<Container size="xl">
-			<Box w="100%" as="div" asChild>
-				<Heading as="h1">UI Kit Library</Heading>
-				<p>
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque
-					voluptatem distinctio eveniet voluptatum est iste, laudantium a
-					officiis architecto, aspernatur veniam provident harum assumenda
-					tempora dolorum!
-				</p>
-			</Box>
-
+			<Intro />
 			<FlexBox
 				style={{
 					width: '100%',
+					marginTop: theme.spacing.md,
 				}}
 				display="flex"
 				direction="row"
@@ -35,51 +22,23 @@ const Styleguide: React.FC = () => {
 				wrap="nowrap"
 				align="start"
 			>
-				<Box
-					display="flex"
-					flexDirection="row"
-					justifyContent="space-between"
-					alignItems="start"
-					flexWrap="wrap"
-					w="38%"
-					p={theme.spacing.sm}
-					shadow={theme.shadows.medium}
-					borderRadius={theme.spacing.sm}
-					as={'div'}
-					asChild={false}
-				>
-					<Box as="div" asChild w="100%" p="8px 0">
-						<TagText>Colors</TagText>
-					</Box>
-					{Object.entries(colorScheme).map(([key, value]) => (
-						<Box
-							key={key}
-							w="100px"
-							h="100px"
-							display="flex"
-							flexDirection="column"
-							justifyContent="center"
-							alignItems="center"
-							shadow={theme.shadows.medium}
-							flexWrap="wrap"
-							borderRadius={theme.spacing.xs}
-							m={theme.spacing.xs}
-							bg={value}
-							style={{
-								color:
-									value === theme.colors.white || value === theme.colors.cream
-										? theme.colors.black
-										: theme.colors.white,
-							}}
-							as="div"
-							asChild
-						>
-							{key}
-						</Box>
-					))}
-				</Box>
+				<Colors />
 				<TypographySection />
 			</FlexBox>
+			<FlexBox
+				style={{
+					width: '100%',
+					marginTop: theme.spacing.md,
+				}}
+				display="flex"
+				direction="row"
+				justify="space-between"
+				gap="4"
+				wrap="nowrap"
+				align="start"
+			>
+				<Buttons />
+			</FlexBox>
 		</Container>
 	);
 };

diff --git a/shared-ui/src/lib/Buttons/index.tsx b/shared-ui/src/lib/Buttons/index.tsx
diff --git a/shared-ui/src/lib/Text/index.tsx b/shared-ui/src/lib/Text/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { theme } from '../styles/theme';
 
 interface TextProps {
 	children: React.ReactNode;
@@ -30,7 +31,7 @@ export const Text = ({
 		{
 			role: 'textbox',
 			style,
-			color,
+			color: theme.colors.charcoal,
 			truncate,
 			align,
 			weight,

diff --git a/shared-ui/src/lib/styles/GlobalStyle.ts b/shared-ui/src/lib/styles/GlobalStyle.ts
@@ -68,7 +68,7 @@ export const GlobalStyle = createGlobalStyle`
    background-color: ${theme.colors.background};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
-   color: ${theme.colors.text};
+   color: ${theme.colors.text.primary};
    font-weight: ${theme.typography.fontWeight.regular};
    line-height: ${theme.typography.lineHeight.body};
    font-size: ${theme.typography.fontSize.body};
@@ -99,4 +99,7 @@ export const GlobalStyle = createGlobalStyle`
   h5 {
     font-size: ${theme.typography.fontSize.h5};
   }
+  p{
+    color: ${theme.colors.text.primary};
+    font-size: ${theme.typography.fontSize.body};}
 `;