wip

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