Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
jessepinho committed Jul 10, 2024
1 parent 840c973 commit b07f937
Show file tree
Hide file tree
Showing 8 changed files with 413 additions and 8 deletions.
23 changes: 15 additions & 8 deletions packages/ui/.storybook/preview.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,29 @@ import React from 'react';
import globalsCssUrl from '../styles/globals.css?url';
import penumbraTheme from './penumbraTheme';
import { Normalize } from '../src/Normalize';
import { ThemeProvider } from 'styled-components';
import { theme } from '../src/utils/theme';

/** @type { import('@storybook/react').Preview } */
const preview = {
decorators: [
(Story, { title }) => {
const css = title.startsWith('Deprecated/') ? (
<link rel='stylesheet' type='text/css' href={globalsCssUrl} />
) : (
<Normalize />
);
const isDeprecatedComponent = title.startsWith('Deprecated/');

if (isDeprecatedComponent) {
return (
<>
<link rel='stylesheet' type='text/css' href={globalsCssUrl} />
<Story />
</>
);
}

return (
<>
{css}
<ThemeProvider theme={theme}>
{/* <Normalize /> */}
<Story />
</>
</ThemeProvider>
);
},
],
Expand Down
15 changes: 15 additions & 0 deletions packages/ui/src/Button/index.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Meta, StoryObj } from '@storybook/react';

import { Button } from '.';

const meta: Meta<typeof Button> = {
component: Button,
tags: ['autodocs'],
};
export default meta;

export const Basic: StoryObj<typeof Button> = {
args: {
children: 'Save',
},
};
6 changes: 6 additions & 0 deletions packages/ui/src/Button/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { ReactNode } from 'react';
import * as Styles from './styles';

export const Button = ({ children }: { children: ReactNode }) => {
return <Styles.Button>{children}</Styles.Button>;
};
6 changes: 6 additions & 0 deletions packages/ui/src/Button/styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import styled from 'styled-components';

export const Button = styled.button`
border: none;
font-family: ${props => props.theme.fonts.default};
`;
23 changes: 23 additions & 0 deletions packages/ui/src/Typography/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import type { Meta, StoryObj } from '@storybook/react';

import { Typography } from '.';

const meta: Meta<typeof Typography> = {
component: Typography,
tags: ['autodocs'],
decorators: [
Story => (
<div style={{ color: 'white' }}>
<Story />
</div>
),
],
};
export default meta;

export const Basic: StoryObj<typeof Typography> = {
args: {
children: 'The quick brown fox...',
variant: 'h1',
},
};
194 changes: 194 additions & 0 deletions packages/ui/src/Typography/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
import { ReactNode } from 'react';
import styled from 'styled-components';
import { DefaultTheme } from 'styled-components/dist/types';

export type TypographyVariant =
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'large'
| 'body'
| 'bodyEmphasized'
| 'small'
| 'detail'
| 'technical'
| 'tableItem'
| 'tableHeading'
| 'button'
| 'tab';

export type TypographyComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'div' | 'span' | 'p';

export interface TypographyProps {
children?: ReactNode;
variant: TypographyVariant;
component?: TypographyComponent;
}

interface Spec {
component: TypographyComponent;
// fontFamily
fontSize: keyof DefaultTheme['fontSizes'];
fontWeight: number;
lineHeight: string;
}

const SPECS_BY_VARIANT: Record<TypographyVariant, Spec> = {
h1: {
component: 'h1',
fontSize: 'text6xl',
fontWeight: 500,
lineHeight: '1rem',
},
h2: {
component: 'h2',
fontSize: 'text5xl',
fontWeight: 500,
lineHeight: '1rem',
},
h3: {
component: 'h3',
fontSize: 'text4xl',
fontWeight: 500,
lineHeight: '2.5rem',
},
h4: {
component: 'h4',
fontSize: 'text3xl',
fontWeight: 500,
lineHeight: '2.25rem',
},
large: {
component: 'span',
fontSize: 'textLg',
fontWeight: 500,
lineHeight: '1.75rem',
},
body: {
component: 'span',
fontSize: 'textBase',
fontWeight: 400,
lineHeight: '1.5rem',
},
bodyEmphasized: {
component: 'span',
fontSize: 'textBase',
fontWeight: 500,
lineHeight: '1.5rem',
},
button: {
component: 'span',
fontSize: 'textBase',
fontWeight: 500,
lineHeight: '1.5rem',
},
detail: {
component: 'span',
fontSize: 'textXs',
fontWeight: 500,
lineHeight: '1rem',
},
small: {
component: 'span',
fontSize: 'textSm',
fontWeight: 400,
lineHeight: '1.25rem',
},
tab: {
component: 'span',
fontSize: 'textLg',
fontWeight: 400,
lineHeight: '1.75rem',
},
tableHeading: {
component: 'span',
fontSize: 'textBase',
fontWeight: 500,
lineHeight: '1.5rem',
},
tableItem: {
component: 'span',
fontSize: 'textBase',
fontWeight: 400,
lineHeight: '1.5rem',
},
technical: {
component: 'span',
fontSize: 'textSm',
fontWeight: 500,
lineHeight: '1.25rem',
},
};

const DEFAULT_COMPONENT_BY_VARIANT: Record<TypographyVariant, TypographyComponent> = {
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h4',
large: 'span',
body: 'span',
bodyEmphasized: 'span',
button: 'span',
detail: 'span',
small: 'span',
tab: 'span',
tableHeading: 'span',
tableItem: 'span',
technical: 'span',
};

const FONT_SIZE_BY_VARIANT: Record<TypographyVariant, keyof DefaultTheme['fontSizes']> = {
h1: 'text6xl',
h2: 'text5xl',
h3: 'text4xl',
h4: 'text3xl',
large: 'textLg',
body: 'textBase',
bodyEmphasized: 'textBase',
button: 'textBase',
detail: 'textXs',
small: 'textSm',
tab: 'textLg',
tableHeading: 'textBase',
tableItem: 'textBase',
technical: 'textSm',
};

const FONT_WEIGHT_BY_VARIANT: Record<TypographyVariant, number> = {
h1: 500,
h2: 500,
h3: 500,
h4: 500,
large: 500,
body: 400,
bodyEmphasized: 500,
button: 500,
detail: 500,
small: 400,
tab: 400,
tableHeading: 500,
tableItem: 400,
technical: 500,
};

const Span = styled.span<{ variant: TypographyVariant }>`
font-size: ${props => props.theme.fontSizes[SPECS_BY_VARIANT[props.variant].fontSize]};
font-family: ${props =>
props.variant === 'technical' ? props.theme.fonts.mono : props.theme.fonts.default};
font-weight: ${props => FONT_WEIGHT_BY_VARIANT[props.variant]};
margin: 0;
padding: 0;
`;

export const Typography = ({
children,
variant,
component = DEFAULT_COMPONENT_BY_VARIANT[variant],
}: TypographyProps) => {
return (
<Span as={component} variant={variant}>
{children}
</Span>
);
};
53 changes: 53 additions & 0 deletions packages/ui/src/styled-components.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import 'styled-components';

interface TypographyVariant {
fontSize: string;
fontWeight: number;
lineHeight: string;
}

declare module 'styled-components' {
export interface DefaultTheme {
fonts: {
default: string;
mono: string;
heading: string;
};
// typography: {
// fonts: {
// default: string;
// mono: string;
// };
// variants: {
// text9xl: TypographyVariant;
// text8xl: TypographyVariant;
// text7xl: TypographyVariant;
// text6xl: TypographyVariant;
// text5xl: TypographyVariant;
// text4xl: TypographyVariant;
// text3xl: TypographyVariant;
// text2xl: TypographyVariant;
// textXl: TypographyVariant;
// textLg: TypographyVariant;
// textBase: TypographyVariant;
// textSm: TypographyVariant;
// textXs: TypographyVariant;
// };
// };
fontSizes: {
text9xl: string;
text8xl: string;
text7xl: string;
text6xl: string;
text5xl: string;
text4xl: string;
text3xl: string;
text2xl: string;
textXl: string;
textLg: string;
textBase: string;
textSm: string;
textXs: string;
};
}
}
Loading

0 comments on commit b07f937

Please sign in to comment.