From 16e47290a8938d91e13ea40ca1f8bd4c05e115c7 Mon Sep 17 00:00:00 2001 From: brahims Date: Mon, 7 Oct 2024 16:28:29 +0200 Subject: [PATCH] feat(ui): optimize flexbox, box, and heading components --- .../StyleGuide/Typography/index.tsx | 39 +++--- apps/uikit/src/app/pages/Styleguide.tsx | 105 +++++++++------- shared-ui/src/lib/Grid/Box.tsx | 52 ++++++-- shared-ui/src/lib/Grid/FlexBox.tsx | 35 ++++-- shared-ui/src/lib/Text/index.tsx | 42 +++++++ shared-ui/src/lib/styles/GlobalStyle.ts | 4 +- shared-ui/src/lib/styles/index.ts | 117 +----------------- shared-ui/src/lib/styles/theme.ts | 1 + 8 files changed, 198 insertions(+), 197 deletions(-) create mode 100644 shared-ui/src/lib/Text/index.tsx diff --git a/apps/uikit/src/app/components/StyleGuide/Typography/index.tsx b/apps/uikit/src/app/components/StyleGuide/Typography/index.tsx index 5daa890..23dd306 100644 --- a/apps/uikit/src/app/components/StyleGuide/Typography/index.tsx +++ b/apps/uikit/src/app/components/StyleGuide/Typography/index.tsx @@ -3,10 +3,9 @@ import { FlexBox, Heading, ParagraphContainer, - TagLabel, TagText, - TagUnderlinedText, - TypographySectionWrapper, + Box, + theme, } from '@react-monorepo/shared-ui'; import { Link } from 'react-router-dom'; @@ -15,22 +14,28 @@ export const TypographyExample: React.FC<{ children: React.ReactNode; }> = ({ tag, children }) => ( - - {tag} - + {tag} {children} ); export const TypographySection: React.FC = () => ( - - Typography + + Typography
  • Font family: Poppins
  • @@ -40,7 +45,7 @@ export const TypographySection: React.FC = () => (
- Headlines + Headlines This is the styleguide This is the styleguide This is the styleguide @@ -50,10 +55,10 @@ export const TypographySection: React.FC = () => ( direction="column" gap="0" wrap="nowrap" - justify="between" + justify="space-between" align="start" > - Paragraph + Paragraph

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dolore rem modi laboriosam deleniti vitae. Aspernatur saepe itaque, @@ -61,5 +66,5 @@ export const TypographySection: React.FC = () => ( corporis!

- + ); diff --git a/apps/uikit/src/app/pages/Styleguide.tsx b/apps/uikit/src/app/pages/Styleguide.tsx index a89b7a5..ef72d41 100644 --- a/apps/uikit/src/app/pages/Styleguide.tsx +++ b/apps/uikit/src/app/pages/Styleguide.tsx @@ -5,10 +5,8 @@ import { Container, FlexBox, Heading, - StyleguideContainer, - TagUnderlinedText, + TagText, theme, - TypographySectionWrapper, } from '@react-monorepo/shared-ui'; import { TypographySection } from '../components/StyleGuide/Typography'; @@ -16,53 +14,72 @@ import { TypographySection } from '../components/StyleGuide/Typography'; const Styleguide: React.FC = () => { return ( - UI Kit Library -

- 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! -

+ + UI Kit Library +

+ 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! +

+ + - - Colors - - {Object.entries(colorScheme).map(([key, value]) => ( - - {key} - - ))} - - + + + Colors + + {Object.entries(colorScheme).map(([key, value]) => ( + + {key} + + ))} + - + ); }; diff --git a/shared-ui/src/lib/Grid/Box.tsx b/shared-ui/src/lib/Grid/Box.tsx index 78e1019..f7be14c 100644 --- a/shared-ui/src/lib/Grid/Box.tsx +++ b/shared-ui/src/lib/Grid/Box.tsx @@ -1,33 +1,63 @@ import React from 'react'; -import { BoxWrapper } from '../styles'; +import { Responsive } from '@radix-ui/themes/dist/cjs/props/prop-def'; interface BoxProps { + as: 'div' | 'span'; + asChild: boolean; + shadow?: string; + borderRadius?: string; + display?: Responsive<'none' | 'inline' | 'inline-block' | 'block' | 'flex'>; + flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; + justifyContent?: 'space-between' | 'center' | 'start' | 'end' | 'between'; + alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'; + flexWrap?: 'wrap' | 'nowrap'; w?: string; h?: string; p?: string; m?: string; - style?: React.CSSProperties; bg?: string; + style?: React.CSSProperties; children?: React.ReactNode; } export const Box = ({ + asChild, + as, + display, w, h, p, m, style, bg, + shadow, + borderRadius, children, + flexDirection, + justifyContent, + alignItems, + flexWrap, ...props }: BoxProps): React.ReactNode => { - return ( - - {children} - + return React.createElement( + asChild ? 'div' : as, + { + ...props, + style: { + display: display, + flexDirection: flexDirection, + justifyContent: justifyContent, + alignItems: alignItems, + flexWrap: flexWrap, + width: w, + height: h, + padding: p, + margin: m, + borderRadius: borderRadius, + background: bg, + boxShadow: shadow, + ...style, + }, + }, + children, ); }; diff --git a/shared-ui/src/lib/Grid/FlexBox.tsx b/shared-ui/src/lib/Grid/FlexBox.tsx index 28c1144..e8b7495 100644 --- a/shared-ui/src/lib/Grid/FlexBox.tsx +++ b/shared-ui/src/lib/Grid/FlexBox.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { FlexBoxProps, FlexWrapper } from '../styles'; +import { FlexBoxProps } from '../styles'; export const FlexBox = ({ + display, children, direction, gap, @@ -11,17 +12,25 @@ export const FlexBox = ({ style, ...props }: FlexBoxProps) => { - return ( - - {children} - + return React.createElement( + 'div', + { + direction, + gap, + align, + justify, + wrap, + ...props, + style: { + display: display, + flexDirection: direction, + justifyContent: justify, + alignItems: align, + flexWrap: wrap, + + ...style, + }, + }, + children, ); }; diff --git a/shared-ui/src/lib/Text/index.tsx b/shared-ui/src/lib/Text/index.tsx new file mode 100644 index 0000000..c36e7c4 --- /dev/null +++ b/shared-ui/src/lib/Text/index.tsx @@ -0,0 +1,42 @@ +import React from 'react'; + +interface TextProps { + children: React.ReactNode; + as: 'span' | 'div' | 'label' | 'p'; + color?: string; + style?: React.CSSProperties; + role: string; + truncate?: boolean; + align?: 'left' | 'center' | 'right'; + weight?: string; + size?: string; + lineheight?: string; +} + +export const Text = ({ + children, + as, + color, + style, + role, + truncate, + align, + weight, + size, + lineheight, +}: TextProps) => { + return React.createElement( + as, + { + role: 'textbox', + style, + color, + truncate, + align, + weight, + size, + lineheight, + }, + children, + ); +}; diff --git a/shared-ui/src/lib/styles/GlobalStyle.ts b/shared-ui/src/lib/styles/GlobalStyle.ts index 0bf5fcf..d9c418d 100644 --- a/shared-ui/src/lib/styles/GlobalStyle.ts +++ b/shared-ui/src/lib/styles/GlobalStyle.ts @@ -54,7 +54,7 @@ export const GlobalStyle = createGlobalStyle` /* Global Styles */ html { box-sizing: border-box; - font-size: 16px; /* Set base font size */ + font-size: 1rem; /* Set base font size */ overflow-y: scroll; overflow-x: hidden; scroll-behavior: smooth; @@ -80,6 +80,8 @@ export const GlobalStyle = createGlobalStyle` line-height: ${theme.typography.lineHeight.heading}; color: ${theme.colors.text.primary}; font-family: ${theme.typography.fontFamily}; + + } h1 { diff --git a/shared-ui/src/lib/styles/index.ts b/shared-ui/src/lib/styles/index.ts index b3764b8..896cdbc 100644 --- a/shared-ui/src/lib/styles/index.ts +++ b/shared-ui/src/lib/styles/index.ts @@ -1,7 +1,7 @@ -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { Link } from 'react-router-dom'; import * as Menubar from '@radix-ui/react-menubar'; -import { Box, Button, Heading } from '@radix-ui/themes'; +import { Heading } from '@radix-ui/themes'; import { theme } from './theme'; import { FlexBox } from '../Grid/FlexBox'; @@ -13,119 +13,25 @@ export interface ContainerWrapperProps { } export interface FlexBoxProps { children: React.ReactNode; + display?: 'none' | 'inline' | 'inline-block' | 'block' | 'flex'; direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'; - justify?: 'start' | 'center' | 'end' | 'between'; + justify?: 'start' | 'center' | 'end' | 'space-between'; wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'; style?: React.CSSProperties; } -export const HeadingWrapper = styled(Heading)` - color: ${theme.colors.primary}; -`; -export const BoxElement = styled(Box)<{ $isbig?: boolean }>` - background-color: ${theme.colors.white}; - color: ${theme.colors.black}; - border-radius: ${theme.spacing.xs}; - padding: ${theme.spacing.md}; - min-height: 100px; - min-width: 100px; - box-sizing: 'border-box'; - ${(props) => - props.$isbig && - css` - min-height: 500px; - min-width: 400px; - background: transparent; - padding: ${theme.spacing.md}; - color: ${theme.colors.primary}; - box-shadow: ${theme.shadows.medium}; - }`} -`; - -export const SmallBoxElement = styled(BoxElement)` - padding: 16px; - width: 5%; -`; - -export const StyleguideContainer = styled(FlexBox)` - padding: 8px 0; - width: 100%; -`; - -export const TagLabel = styled.div` - width: 5%; -`; export const TagText = styled(Heading)` + opacity: 0.3; color: ${theme.colors.grey}; -`; -export const TagUnderlinedText = styled(TagText)` - display: inline-block; - height: 20px; - padding: 0; - padding-bottom: ${theme.spacing.md}; - margin-bottom: ${theme.spacing.md}; - border-bottom: 2px solid ${theme.colors.grey}; -`; - -export const BoxWrapper = styled(Box)` - padding: ${theme.spacing.md}; + font-size: ${theme.typography.fontSize.h2}; `; -export const ExampleContent = styled.div` - width: 90%; - padding-bottom: 8px; -`; export const ParagraphContainer = styled(FlexBox)` padding-top: ${theme.spacing.md}; `; -export const TypographySectionWrapper = styled(BoxElement)` - /* padding: 24px; */ - width: 70%; -`; - -export const FlexWrapper = styled.div` - display: flex; - flex-direction: ${(props) => props.direction || 'row'}; - align-items: ${(props) => { - switch (props.align) { - case 'start': - return 'flex-start'; - case 'end': - return 'flex-end'; - case 'center': - return 'center'; - case 'stretch': - return 'stretch'; - case 'baseline': - return 'baseline'; - default: - return 'stretch'; - } - }}; - justify-content: ${(props) => { - switch (props.justify) { - case 'start': - return 'flex-start'; - case 'end': - return 'flex-end'; - case 'center': - return 'center'; - case 'between': - return 'space-between'; - default: - return 'flex-start'; - } - }}; - flex-wrap: ${(props) => props.wrap || 'nowrap'}; - gap: ${(props) => { - const gapSize = parseInt(props.gap || '0', 10); - return `${gapSize * 4}px`; - }}; -`; - export const ContainerWrapper = styled.div` margin: 0 auto; width: 100%; @@ -243,14 +149,3 @@ export const FooterWrapper = styled.footer` width: '100%'; padding: ${theme.spacing.md} 0; `; - -export const DefaultButton = styled(Button)` - background-color: ${theme.colors.primary}; - color: ${theme.colors.white}; - border-color: ${(props) => props.theme.colors.primary}; - &:hover { - background-color: ${(props) => props.theme.colors.accent}; - border-color: ${(props) => props.theme.colors.accent}; - color: ${(props) => props.theme.colors.primary}; - } -`; diff --git a/shared-ui/src/lib/styles/theme.ts b/shared-ui/src/lib/styles/theme.ts index c917953..da7b339 100644 --- a/shared-ui/src/lib/styles/theme.ts +++ b/shared-ui/src/lib/styles/theme.ts @@ -1,3 +1,4 @@ +import { breakpoints } from '@radix-ui/themes/dist/cjs/props/prop-def'; import { DefaultTheme } from 'styled-components'; export const colorScheme = {