wip

packages/ui/.storybook/preview.jsx

@@ -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>
       );
     },
   ],

packages/ui/src/Button/index.stories.ts

@@ -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',
+  },
+};

packages/ui/src/Button/index.tsx

@@ -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>;
+};

packages/ui/src/Button/styles.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Button = styled.button`
+  border: none;
+  font-family: ${props => props.theme.fonts.default};
+`;

packages/ui/src/Typography/index.stories.tsx

@@ -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',
+  },
+};

packages/ui/src/Typography/index.tsx

@@ -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>
+  );
+};

packages/ui/src/styled-components.d.ts

@@ -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;
+    };
+  }
+}