chore: use monorepo organization

packages/admin-ui/src/components/typography/index.jsx

@@ -0,0 +1,119 @@
+import classnames from 'classnames'
+import React from 'react'
+
+import styles from './typography.module.css'
+
+function H1({ children, noMargin, className, ...props }) {
+  const classNames = {
+    [styles.h1]: true,
+    [styles.noMargin]: noMargin,
+    [className]: !!className
+  }
+
+  return (
+    <h1 className={classnames(classNames)} {...props}>
+      {children}
+    </h1>
+  )
+}
+
+function H2({ children, noMargin, className, ...props }) {
+  const classNames = {
+    [styles.h2]: true,
+    [styles.noMargin]: noMargin,
+    [className]: !!className
+  }
+
+  return (
+    <h2 className={classnames(classNames)} {...props}>
+      {children}
+    </h2>
+  )
+}
+
+function H3({ children, noMargin, className, ...props }) {
+  const classNames = {
+    [styles.h3]: true,
+    [styles.noMargin]: noMargin,
+    [className]: !!className
+  }
+
+  return (
+    <h3 className={classnames(classNames)} {...props}>
+      {children}
+    </h3>
+  )
+}
+
+function H4({ children, noMargin, className, ...props }) {
+  const classNames = {
+    [styles.h4]: true,
+    [styles.noMargin]: noMargin,
+    [className]: !!className
+  }
+
+  return (
+    <h4 className={classnames(classNames)} {...props}>
+      {children}
+    </h4>
+  )
+}
+
+function H5({ children, noMargin, className, ...props }) {
+  const classNames = {
+    [styles.h5]: true,
+    [styles.noMargin]: noMargin,
+    [className]: !!className
+  }
+
+  return (
+    <h5 className={classnames(classNames)} {...props}>
+      {children}
+    </h5>
+  )
+}
+
+const P = pBuilder('p')
+const Info1 = pBuilder('info1')
+const Info2 = pBuilder('info2')
+const Info3 = pBuilder('info3')
+const Mono = pBuilder('mono')
+const TL1 = pBuilder('tl1')
+const TL2 = pBuilder('tl2')
+const Label1 = pBuilder('label1')
+const Label2 = pBuilder('label2')
+const Label3 = pBuilder('label3')
+
+function pBuilder(elementClass) {
+  return ({ inline, noMargin, className, children, ...props }) => {
+    const classNames = {
+      [className]: !!className,
+      [styles[elementClass]]: elementClass,
+      [styles.inline]: inline,
+      [styles.noMargin]: noMargin
+    }
+    return (
+      <p className={classnames(classNames)} {...props}>
+        {children}
+      </p>
+    )
+  }
+}
+
+export {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  TL1,
+  TL2,
+  P,
+  Info1,
+  Info2,
+  Info3,
+  Mono,
+  Label1,
+  Label2,
+  Label3
+}