feat: Typo

Author: shiftpsh

example/src/stories/Typo.stories.tsx

@@ -0,0 +1,68 @@
+import { Typo, TypoVariant } from '@solved-ac/ui-react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+export default {
+  title: 'Typo',
+  component: Typo,
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'The text to display',
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['description', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      },
+      description: 'The variant of the text',
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['normal', 'small', 'smaller'],
+      },
+      description: 'The size of the text',
+    },
+    as: {
+      control: { type: 'select', options: ['div', 'span', 'button', 'a'] },
+      description: 'The element to render the card as',
+    },
+  },
+} as ComponentMeta<typeof Typo>
+
+const Template: ComponentStory<typeof Typo> = (args) => <Typo {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: 'Typography',
+}
+
+const generateVariantTemplate = (
+  variant: TypoVariant | TypoVariant[],
+  text?: string
+) => {
+  const GeneratedTemplate = Template.bind({})
+  GeneratedTemplate.args = {
+    children: text
+      ? `Typography — ${variant} — ${text}`
+      : `Typography — ${variant}`,
+    variant,
+  }
+  return GeneratedTemplate
+}
+
+export const Description = generateVariantTemplate('description')
+export const Heading1 = generateVariantTemplate('h1')
+export const Heading2 = generateVariantTemplate('h2')
+export const Heading3 = generateVariantTemplate('h3')
+export const Heading4 = generateVariantTemplate('h4')
+export const Heading5 = generateVariantTemplate('h5')
+export const Small = generateVariantTemplate('small')
+export const Smaller = generateVariantTemplate('smaller')
+export const Tabular = generateVariantTemplate('tabular', '$8,481.00')
+export const Readable = generateVariantTemplate('readable', 'i1Il0O3469')
+export const MultipleVariants = generateVariantTemplate([
+  'small',
+  'description',
+])

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.0.1-alpha.24",
+  "version": "0.0.1-alpha.25",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",

src/components/Typo.tsx

@@ -0,0 +1,139 @@
+import React, { ElementType } from 'react'
+import styled, { css } from 'styled-components'
+import {
+    PolymorphicProps,
+    PolymorphicRef
+} from '../types/PolymorphicElementProps'
+
+const variants = {
+  default: css``,
+  description: css`
+    color: ${({ theme }) => theme.color.text.secondary.main};
+  `,
+  h1: css`
+    display: block;
+    font-weight: 800;
+    font-size: 2em;
+    letter-spacing: -0.04ch;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  `,
+  h2: css`
+    display: block;
+    font-weight: 800;
+    font-size: 1.5em;
+    letter-spacing: -0.02ch;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  `,
+  h3: css`
+    display: block;
+    font-weight: 800;
+    font-size: 1.2em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  `,
+  h4: css`
+    display: block;
+    font-weight: 800;
+    font-size: 1em;
+    letter-spacing: 0.02ch;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  `,
+  h5: css`
+    display: block;
+    font-weight: 700;
+    font-size: 1em;
+    letter-spacing: 0.02ch;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  `,
+  h6: css`
+    display: block;
+    font-weight: 600;
+    font-size: 1em;
+    letter-spacing: 0.02ch;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  `,
+  small: css`
+    font-size: small;
+  `,
+  smaller: css`
+    font-size: smaller;
+  `,
+  tabular: css`
+    font-feature-settings: 'tnum';
+  `,
+  readable: css`
+    font-feature-settings: 'ss06', 'zero';
+  `,
+  'no-ligatures': css`
+    font-variant-ligatures: none;
+  `,
+} as const
+
+export type TypoVariant = keyof typeof variants
+
+const asMap = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  small: 'small',
+  smaller: 'small',
+} as const
+
+interface TypoContainerProps {
+  variant: TypoVariant | TypoVariant[]
+}
+
+const TypoContainer = styled.span<TypoContainerProps>`
+  ${({ variant }) =>
+    typeof variant === 'string'
+      ? variants[variant]
+      : variant.map((v) => variants[v])}
+`
+
+export type TypoProps<T extends ElementType = 'span'> = {
+  variant?: TypoVariant | TypoVariant[]
+} & PolymorphicProps<T>
+
+const firstVariant = (
+  variant?: TypoVariant | TypoVariant[]
+): TypoVariant | undefined => {
+  if (typeof variant === 'string') return variant
+  if (Array.isArray(variant) && variant.length > 0) return variant[0]
+  return undefined
+}
+
+export const Typo = React.forwardRef(
+  <T extends ElementType>(
+    props: TypoProps<T>,
+    ref?: PolymorphicRef<T>
+  ): JSX.Element => {
+    const { variant = [], as, ...rest } = props
+
+    const calculatedAs =
+      as || asMap[firstVariant(variant) ?? 'default'] || 'span'
+
+    return (
+      <TypoContainer ref={ref} as={calculatedAs} variant={variant} {...rest} />
+    )
+  }
+)

src/components/index.ts

@@ -11,4 +11,5 @@ export * from './PaginationItem'
 export * from './Space'
 export * from './Tab'
 export * from './Tabs'
+export * from './Typo'