From 555935550eee068c52143a6563f126e92b7508a9 Mon Sep 17 00:00:00 2001 From: Kunerkhan Date: Fri, 12 Sep 2025 18:29:58 +0600 Subject: [PATCH 1/3] feat(AIFEP-20): Add typography --- .../common/Typography/Typography.stories.tsx | 11 +++ .../common/Typography/Typography.tsx | 83 +++++++++++++++++++ src/components/common/Typography/index.ts | 1 + src/components/common/index.ts | 1 + src/types/index.ts | 2 + 5 files changed, 98 insertions(+) create mode 100644 src/components/common/Typography/Typography.stories.tsx create mode 100644 src/components/common/Typography/Typography.tsx create mode 100644 src/components/common/Typography/index.ts diff --git a/src/components/common/Typography/Typography.stories.tsx b/src/components/common/Typography/Typography.stories.tsx new file mode 100644 index 0000000..8798bc1 --- /dev/null +++ b/src/components/common/Typography/Typography.stories.tsx @@ -0,0 +1,11 @@ +import type { Meta } from '@storybook/react'; + +import { Typography } from './Typography'; + +const meta = { + title: 'Components/Typography', + component: Typography, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; diff --git a/src/components/common/Typography/Typography.tsx b/src/components/common/Typography/Typography.tsx new file mode 100644 index 0000000..41d3c75 --- /dev/null +++ b/src/components/common/Typography/Typography.tsx @@ -0,0 +1,83 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'; + +export enum TypographyVariant { + H1, + H2, + H3, + H4, + H5, + H6, + P1, + P2, + P3, + P4, + P5, + P6, +} + +function clsx(...parts: (string | false | null | undefined)[]) { + return parts.filter(Boolean).join(' '); +} + +const tagByVariant: Record = { + [TypographyVariant.H1]: 'h1', + [TypographyVariant.H2]: 'h2', + [TypographyVariant.H3]: 'h3', + [TypographyVariant.H4]: 'h4', + [TypographyVariant.H5]: 'h5', + [TypographyVariant.H6]: 'h6', + [TypographyVariant.P1]: 'p', + [TypographyVariant.P2]: 'p', + [TypographyVariant.P3]: 'p', + [TypographyVariant.P4]: 'p', + [TypographyVariant.P5]: 'p', + [TypographyVariant.P6]: 'p', +}; + +const variantClasses: Record = { + [TypographyVariant.H1]: 'text-h1', + [TypographyVariant.H2]: 'text-h2', + [TypographyVariant.H3]: 'text-h3', + [TypographyVariant.H4]: 'text-h4', + [TypographyVariant.H5]: 'text-h5', + [TypographyVariant.H6]: 'text-h6', + [TypographyVariant.P1]: 'text-p1', + [TypographyVariant.P2]: 'text-p2', + [TypographyVariant.P3]: 'text-p3', + [TypographyVariant.P4]: 'text-p4', + [TypographyVariant.P5]: 'text-p5', + [TypographyVariant.P6]: 'text-p6', +}; + +type BaseProps = { + children?: ReactNode; + text?: ReactNode; + variant?: TypographyVariant; + className?: string; + truncate?: boolean; + noWrap?: boolean; +}; + +export type TypographyProps = BaseProps & HTMLAttributes; + +export const Typography = forwardRef( + ( + { variant = TypographyVariant.P1, className, children, text, truncate, noWrap, ...rest }, + ref, + ) => { + const Tag = tagByVariant[variant]; + const classes = clsx( + variantClasses[variant], + truncate && 'truncate', + noWrap && !truncate && 'whitespace-nowrap', + className, + ); + + return ( + + {children ?? text} + + ); + }, +); diff --git a/src/components/common/Typography/index.ts b/src/components/common/Typography/index.ts new file mode 100644 index 0000000..d64ebba --- /dev/null +++ b/src/components/common/Typography/index.ts @@ -0,0 +1 @@ +export * from './Typography'; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 8a58d33..fb1f30f 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -19,3 +19,4 @@ export * from './Tabs'; export * from './TextLink'; export * from './TimePicker'; export * from './Toaster'; +export * from './Typography'; diff --git a/src/types/index.ts b/src/types/index.ts index 26f49f0..8f83f4a 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -39,6 +39,7 @@ import { TextLinkProps, TimeFieldProps, TimePickerProps, + TypographyProps, } from '~/components'; export interface UIComponents { @@ -81,6 +82,7 @@ export interface UIComponents { TextField: TextFieldProps; TextInput: TextInputProps; TimeField: TimeFieldProps; + Typography: TypographyProps; } export interface AppelloKit { From 20683396a03e3d2f342a74ac8b5d17c4755cfbde Mon Sep 17 00:00:00 2001 From: Kunerkhan Date: Mon, 22 Sep 2025 13:58:10 +0600 Subject: [PATCH 2/3] feat(AIFEP-20): Remove clsx --- src/components/common/Typography/Typography.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/common/Typography/Typography.tsx b/src/components/common/Typography/Typography.tsx index 41d3c75..ac319ca 100644 --- a/src/components/common/Typography/Typography.tsx +++ b/src/components/common/Typography/Typography.tsx @@ -1,4 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import clsx from 'clsx'; import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'; export enum TypographyVariant { @@ -16,10 +17,6 @@ export enum TypographyVariant { P6, } -function clsx(...parts: (string | false | null | undefined)[]) { - return parts.filter(Boolean).join(' '); -} - const tagByVariant: Record = { [TypographyVariant.H1]: 'h1', [TypographyVariant.H2]: 'h2', From 081b9d57a23bcaeec0951def7805a7332ed69833 Mon Sep 17 00:00:00 2001 From: Kunerkhan Date: Mon, 22 Sep 2025 14:00:05 +0600 Subject: [PATCH 3/3] feat(AIFEP-20): Use interface for typography props --- src/components/common/Typography/Typography.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/common/Typography/Typography.tsx b/src/components/common/Typography/Typography.tsx index ac319ca..598b46f 100644 --- a/src/components/common/Typography/Typography.tsx +++ b/src/components/common/Typography/Typography.tsx @@ -47,16 +47,16 @@ const variantClasses: Record = { [TypographyVariant.P6]: 'text-p6', }; -type BaseProps = { +interface BaseProps { children?: ReactNode; text?: ReactNode; variant?: TypographyVariant; className?: string; truncate?: boolean; noWrap?: boolean; -}; +} -export type TypographyProps = BaseProps & HTMLAttributes; +export interface TypographyProps extends BaseProps, HTMLAttributes {} export const Typography = forwardRef( (