Introduced Typography component

Author: forman

dashi/src/lib/components/Component.tsx

@@ -5,6 +5,7 @@ import { Box, type BoxProps } from "./Box";
 import { Checkbox, type CheckboxProps } from "./Checkbox";
 import { Dropdown, type DropdownProps } from "./Dropdown";
 import { Plot, type PlotProps } from "./Plot";
+import { Typography, type TypographyProps } from "@/lib/components/Typography";
 
 export interface ComponentProps extends ComponentState {
   onChange: ComponentChangeHandler;
@@ -27,5 +28,7 @@ export function Component({ type, ...props }: ComponentProps) {
     return <Box {...(props as BoxProps)} />;
   } else if (type === "Checkbox") {
     return <Checkbox {...(props as CheckboxProps)} />;
+  } else if (type === "Typography") {
+    return <Typography {...(props as TypographyProps)} />;
   }
 }

dashi/src/lib/components/Typography.tsx

@@ -0,0 +1,13 @@
+import MuiTypography from "@mui/material/Typography";
+
+import type { TypographyState } from "@/lib/types/state/component";
+
+export interface TypographyProps extends Omit<TypographyState, "type"> {}
+
+export function Typography({ id, style, text }: TypographyProps) {
+  return (
+    <MuiTypography id={id} style={style}>
+      {text}
+    </MuiTypography>
+  );
+}

dashi/src/lib/types/state/component.ts

@@ -1,7 +1,13 @@
 import { type CSSProperties } from "react";
 import type { VisualizationSpec } from "react-vega";
 
-export type ComponentType = "Button" | "Checkbox" | "Dropdown" | "Plot" | "Box";
+export type ComponentType =
+  | "Button"
+  | "Checkbox"
+  | "Dropdown"
+  | "Plot"
+  | "Box"
+  | "Typography";
 
 export interface ComponentState {
   type: ComponentType;
@@ -47,3 +53,8 @@ export interface PlotState extends ComponentState {
 export interface BoxState extends ContainerState {
   type: "Box";
 }
+
+export interface TypographyState extends ComponentState {
+  type: "Typography";
+  text?: string;
+}