Skip to content

Commit

Permalink
refactor(ui): adjuste the styleguide page and related components
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrahimS
BrahimS committed Oct 3, 2024
1 parent ef3423c commit 3b8fb40
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 119 deletions.
54 changes: 54 additions & 0 deletions apps/uikit/src/app/components/StyleGuide/Typography/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react';
import {
ExampleContent,
FlexBox,
ParagraphContainer,
TagLabel,
TagText,
TagUnderlinedText,
TypographySectionWrapper,
} from '@react-monorepo/shared-ui';

export const TypographyExample: React.FC<{
tag: string;
children: React.ReactNode;
}> = ({ tag, children }) => (
<FlexBox
direction="row"
gap="4"
wrap="nowrap"
justify="between"
align="center"
>
<TagLabel>
<TagText>{tag}</TagText>
</TagLabel>
<ExampleContent>{React.createElement(tag, {}, children)}</ExampleContent>
</FlexBox>
);

export const TypographySection: React.FC = () => (
<TypographySectionWrapper $isbig={true}>
<TagUnderlinedText>Headlines</TagUnderlinedText>
<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>
<ParagraphContainer
direction="column"
gap="0"
wrap="nowrap"
justify="between"
align="start"
>
<TagUnderlinedText>Paragraph</TagUnderlinedText>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
dolore rem modi laboriosam deleniti vitae. Aspernatur saepe itaque,
numquam autem inventore, magnam, aperiam quidem quis ea id minima nemo
corporis!
</p>
</ParagraphContainer>
</TypographySectionWrapper>
);
Empty file removed apps/uikit/src/app/components/index.ts
View file
Empty file.
118 changes: 18 additions & 100 deletions apps/uikit/src/app/pages/Styleguide.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,30 @@
import React from 'react';
import { BoxElement, Container, FlexBox } from '@react-monorepo/shared-ui';
import {
Container,
SmallBoxElement,
StyleguideContainer,
} from '@react-monorepo/shared-ui';
import { TypographySection } from '../components/StyleGuide/Typography';

const Styleguide = (): React.ReactNode => {
// Main Styleguide component
const Styleguide: React.FC = () => {
return (
<Container size="xl">
<FlexBox
<h1>UI Kit Library</h1>
<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>
<StyleguideContainer
direction="row"
gap="4"
align="start"
justify="between"
style={{ padding: '8px 0', width: '100%' }}
>
<BoxElement $isbig={true} style={{ padding: '24px', width: '70%' }}>
<p>Typography</p>
<FlexBox
direction="row"
gap="4"
wrap="nowrap"
justify="between"
align="center"
style={{ alignContent: 'center' }}
>
<div>
<h1 style={{ width: '5%', color: 'grey' }}>H1</h1>
</div>
<div style={{ width: '90%', paddingBottom: '8px' }}>
<h1>This is the styleguide</h1>
</div>
</FlexBox>
<FlexBox
direction="row"
gap="4"
wrap="nowrap"
justify="between"
align="center"
>
<div>
<h2 style={{ width: '5%', color: 'grey' }}>H2</h2>
</div>
<div style={{ width: '90%', paddingBottom: '8px' }}>
<h2>This is the styleguide</h2>
</div>
</FlexBox>
<FlexBox
direction="row"
gap="4"
wrap="nowrap"
justify="between"
align="center"
>
<div>
<h3 style={{ width: '5%', color: 'grey' }}>H3</h3>
</div>
<div style={{ width: '90%', paddingBottom: '8px' }}>
<h3>This is the styleguide</h3>
</div>
</FlexBox>
<FlexBox
direction="row"
gap="4"
wrap="nowrap"
justify="between"
align="center"
>
<div>
<h4 style={{ width: '5%', color: 'grey' }}>H4</h4>
</div>
<div style={{ width: '90%', paddingBottom: '8px' }}>
<h4>This is the styleguide</h4>
</div>
</FlexBox>
<FlexBox
direction="row"
gap="4"
wrap="nowrap"
justify="between"
align="center"
>
<div style={{ paddingBottom: '8px' }}>
<h5 style={{ width: '5%', color: 'grey' }}>H5</h5>
</div>
<div style={{ width: '90%', paddingBottom: '8px' }}>
<h5>This is the styleguide</h5>
</div>
</FlexBox>
<FlexBox
direction="column"
gap="4"
wrap="nowrap"
justify="between"
align="start"
style={{ paddingTop: '24px' }}
>
<p>Paragraph </p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur dolore rem modi laboriosam deleniti vitae. Aspernatur
saepe itaque, numquam autem inventore, magnam, aperiam quidem quis
ea id minima nemo corporis!
</p>
</FlexBox>
</BoxElement>

<BoxElement
$isbig={true}
style={{ padding: '16px', width: '5%' }}
></BoxElement>
</FlexBox>
<TypographySection />
<SmallBoxElement $isbig={true} />
</StyleguideContainer>
</Container>
);
};
Expand Down
80 changes: 61 additions & 19 deletions shared-ui/src/lib/styles/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import * as Menubar from '@radix-ui/react-menubar';
import { Box, Button } from '@radix-ui/themes';
import { theme } from './theme';
import { FlexBox } from '../Grid/FlexBox';

export interface ContainerWrapperProps {
children: React.ReactNode;
Expand All @@ -19,6 +20,65 @@ export interface FlexBoxProps {
gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
style?: React.CSSProperties;
}
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.p`
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 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<FlexBoxProps>`
display: flex;
flex-direction: ${(props) => props.direction || 'row'};
Expand Down Expand Up @@ -161,25 +221,7 @@ export const SmallSquare = styled.div`
transform: ${theme.logo.rotation.small} ${theme.logo.translate};
background: ${theme.logo.color};
`;
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 FooterWrapper = styled.footer`
display: flex;
justify-content: flex-end;
Expand Down

0 comments on commit 3b8fb40

Please sign in to comment.