feat(lib, src): Add Typography component, update Callout styles, refa…

…ctor imports

lib/Article/Article.tsx

@@ -89,5 +89,5 @@ export function Article(props: {
     }).then(setMdxContent);
   }, [props.source, props.components]);
 
-  return <article className="prose">{mdxContent}</article>;
+  return mdxContent;
 }

lib/Callout/Callout.module.scss

@@ -1,5 +1,5 @@
 .callout {
-  @apply mb-4 overflow-hidden rounded-xl border px-5 py-4 flex items-start space-x-3;
+  @apply mt-6 overflow-hidden rounded-xl border px-5 py-4 flex items-start space-x-3;
 
   .calloutIcon {
     @apply mt-0.5 h-5 w-5;

lib/Callout/Callout.tsx

@@ -1,16 +1,16 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 import {
   CheckIcon,
   CircleXIcon,
   FeatherIcon,
   InfoIcon,
   LightbulbIcon,
   TriangleAlertIcon,
-} from "lucide-react";
-import styles from "./Callout.module.scss";
+} from 'lucide-react';
+import styles from './Callout.module.scss';
 
 interface CalloutProps {
-  variant?: "info" | "tip" | "warning" | "success" | "error" | "note";
+  variant?: 'info' | 'tip' | 'warning' | 'success' | 'error' | 'note';
   className?: string;
   children: React.ReactNode | React.ReactNode[];
 }
@@ -36,83 +36,89 @@ const variants = {
   },
 } as const;
 
-const Callout = ({ variant = "info", className, children }: CalloutProps) => {
+const Callout = ({ variant = 'info', className, children }: CalloutProps) => {
   const Icon = variants[variant].icon;
 
   return (
-    <div className={clsx(styles["callout"], styles[`${variant}`], className)}>
-      <Icon size={20} className={styles["calloutIcon"]} />
-      <div className={styles["calloutContent"]}>{children}</div>
+    <div className={clsx(styles['callout'], styles[`${variant}`], className)}>
+      <Icon
+        size={20}
+        className={styles['calloutIcon']}
+      />
+      <div className={styles['calloutContent']}>{children}</div>
     </div>
   );
 };
 
-export const Tip = ({ className, children }: Omit<CalloutProps, "variant">) => {
+export const Tip = ({ className, children }: Omit<CalloutProps, 'variant'>) => {
   return (
-    <Callout variant="tip" className={className}>
+    <Callout
+      variant="tip"
+      className={className}
+    >
       {children}
     </Callout>
   );
 };
 
-export const Info = ({
-  className,
-  children,
-}: Omit<CalloutProps, "variant">) => {
+export const Info = ({ className, children }: Omit<CalloutProps, 'variant'>) => {
   return (
-    <Callout variant="info" className={className}>
+    <Callout
+      variant="info"
+      className={className}
+    >
       {children}
     </Callout>
   );
 };
 
-export const Warning = ({
-  className,
-  children,
-}: Omit<CalloutProps, "variant">) => {
+export const Warning = ({ className, children }: Omit<CalloutProps, 'variant'>) => {
   return (
-    <Callout variant="warning" className={className}>
+    <Callout
+      variant="warning"
+      className={className}
+    >
       {children}
     </Callout>
   );
 };
 
-export const Success = ({
-  className,
-  children,
-}: Omit<CalloutProps, "variant">) => {
+export const Success = ({ className, children }: Omit<CalloutProps, 'variant'>) => {
   return (
-    <Callout variant="success" className={className}>
+    <Callout
+      variant="success"
+      className={className}
+    >
       {children}
     </Callout>
   );
 };
 
-export const Error = ({
-  className,
-  children,
-}: Omit<CalloutProps, "variant">) => {
+export const Error = ({ className, children }: Omit<CalloutProps, 'variant'>) => {
   return (
-    <Callout variant="error" className={className}>
+    <Callout
+      variant="error"
+      className={className}
+    >
       {children}
     </Callout>
   );
 };
 
-export const Note = ({
-  className,
-  children,
-}: Omit<CalloutProps, "variant">) => {
+export const Note = ({ className, children }: Omit<CalloutProps, 'variant'>) => {
   return (
-    <Callout variant="note" className={className}>
+    <Callout
+      variant="note"
+      className={className}
+    >
       {children}
     </Callout>
   );
 };
 
-Tip.displayName = "Tip";
-Info.displayName = "Info";
-Warning.displayName = "Warning";
-Success.displayName = "Success";
-Error.displayName = "Error";
-Note.displayName = "Note";
+Tip.displayName = 'Tip';
+Info.displayName = 'Info';
+Warning.displayName = 'Warning';
+Success.displayName = 'Success';
+Error.displayName = 'Error';
+Note.displayName = 'Note';

lib/Typography/Typography.module.scss

@@ -0,0 +1,3 @@
+.typography {
+  @apply prose;
+}

lib/Typography/Typography.tsx

@@ -0,0 +1,5 @@
+import styles from './Typography.module.scss';
+
+export const Typography = ({ children }: { children: React.ReactNode }) => {
+  return <div className={styles.typography}>{children}</div>;
+};

lib/index.ts

@@ -6,5 +6,6 @@ export * from './Steps/Steps';
 export * from './Tabs/Tabs';
 export * from './Article/Article';
 export * from './Code/Code';
+export * from './Typography/Typography';
 
 export * from './utils';

src/components/SideNav.tsx

@@ -25,9 +25,9 @@ export const components = [
     route: '/components/steps',
   },
   {
-    name: 'Article',
-    description: 'A component that renders markdown content with custom components.',
-    route: '/components/article',
+    name: 'Typography',
+    description: 'A collection of typographic elements to help style your content.',
+    route: '/components/typography',
   },
 ].sort((a, b) => a.name.localeCompare(b.name)) as {
   name: string;

src/main.tsx

@@ -7,14 +7,14 @@ import { CalloutSamples } from './pages/CalloutSamples.tsx';
 import { TabSamples } from './pages/TabSamples.tsx';
 import { AccordionSamples } from './pages/AccordionSamples.tsx';
 import { StepSamples } from './pages/StepSamples.tsx';
-import { ArticleSamples } from './pages/ArticleSamples.tsx';
+import { TypographySamples } from './pages/TypographySamples.tsx';
 
 const components: { [key: string]: React.ReactElement } = {
   accordion: <AccordionSamples />,
   tabs: <TabSamples />,
   callouts: <CalloutSamples />,
   steps: <StepSamples />,
-  article: <ArticleSamples />,
+  typography: <TypographySamples />,
 };
 
 createRoot(document.getElementById('root')!).render(

src/pages/TypographySamples.tsx

@@ -0,0 +1,14 @@
+import { Article, Typography } from '../../lib';
+// @ts-ignore
+import article from '../samples/article.mdx?raw';
+
+export const TypographySamples = () => {
+  return (
+    <>
+      <h1 className="text-4xl font-bold mb-6">Privacy-first programming</h1>
+      <Typography>
+        <Article source={article}></Article>
+      </Typography>
+    </>
+  );
+};