diff --git a/packages/design-system-react-native/src/components/Input/Input.constants.ts b/packages/design-system-react-native/src/components/Input/Input.constants.ts index 127d5df1a..841638c6a 100644 --- a/packages/design-system-react-native/src/components/Input/Input.constants.ts +++ b/packages/design-system-react-native/src/components/Input/Input.constants.ts @@ -1,7 +1,6 @@ +import { TextVariant } from '@metamask/design-system-shared'; import { typography } from '@metamask/design-tokens'; -import { TextVariant } from '../../types'; - /** * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`. * React Native `TextInput` aligns single-line text more predictably when line height is not set diff --git a/packages/design-system-react-native/src/components/Input/Input.stories.tsx b/packages/design-system-react-native/src/components/Input/Input.stories.tsx index ad606389f..8cafe5630 100644 --- a/packages/design-system-react-native/src/components/Input/Input.stories.tsx +++ b/packages/design-system-react-native/src/components/Input/Input.stories.tsx @@ -1,9 +1,8 @@ +import { TextVariant } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-native'; import { useEffect, useState } from 'react'; import { View } from 'react-native'; -import { TextVariant } from '../../types'; - import { Input } from './Input'; import type { InputProps } from './Input.types'; diff --git a/packages/design-system-react-native/src/components/Input/Input.test.tsx b/packages/design-system-react-native/src/components/Input/Input.test.tsx index 632a9de1c..47de73a55 100644 --- a/packages/design-system-react-native/src/components/Input/Input.test.tsx +++ b/packages/design-system-react-native/src/components/Input/Input.test.tsx @@ -1,3 +1,4 @@ +import { TextVariant } from '@metamask/design-system-shared'; import { Theme, ThemeProvider, @@ -11,8 +12,6 @@ import { Platform, TextInput } from 'react-native'; import type { StyleProp, TextStyle } from 'react-native'; import { create } from 'react-test-renderer'; -import { TextVariant } from '../../types'; - import { Input } from './Input'; const TEST_ID = 'input'; diff --git a/packages/design-system-react-native/src/components/Input/Input.tsx b/packages/design-system-react-native/src/components/Input/Input.tsx index 43ce608c4..b7a49970d 100644 --- a/packages/design-system-react-native/src/components/Input/Input.tsx +++ b/packages/design-system-react-native/src/components/Input/Input.tsx @@ -1,3 +1,4 @@ +import { TextVariant } from '@metamask/design-system-shared'; import { Theme, useTailwind, @@ -7,7 +8,7 @@ import { darkTheme, lightTheme } from '@metamask/design-tokens'; import { forwardRef, useCallback, useMemo, useState } from 'react'; import { Platform, TextInput } from 'react-native'; -import { FontFamily, TextVariant } from '../../types'; +import { FontFamily } from '../../types'; import { MAP_TEXT_VARIANT_FONTWEIGHT, TWCLASSMAP_TEXT_FONTWEIGHT, diff --git a/packages/design-system-react-native/src/components/Input/Input.types.ts b/packages/design-system-react-native/src/components/Input/Input.types.ts index 9cc76639b..f00e95ee0 100644 --- a/packages/design-system-react-native/src/components/Input/Input.types.ts +++ b/packages/design-system-react-native/src/components/Input/Input.types.ts @@ -1,41 +1,23 @@ +import type { InputPropsShared } from '@metamask/design-system-shared'; import type { TextInputProps } from 'react-native'; -import type { TextVariant } from '../../types'; - export type InputProps = Omit< TextInputProps, 'editable' | 'value' | 'defaultValue' -> & { - /** - * Controlled value for Input. - */ - value: string; - /** - * Optional enum to select between Typography variants. - * - * @default BodyMd - */ - textVariant?: TextVariant; - /** - * Optional boolean to disable Input. - * - * @default false - */ - isDisabled?: boolean; - /** - * Optional boolean to show readonly input. - * - * @default false - */ - isReadonly?: boolean; - /** - * Optional boolean to disable state styles. - * - * @default false - */ - isStateStylesDisabled?: boolean; - /** - * Optional prop to add twrnc overriding classNames. - */ - twClassName?: string; -}; +> & + InputPropsShared & { + /** + * Controlled value for Input. + */ + value: string; + /** + * Optional boolean to disable state styles. + * + * @default false + */ + isStateStylesDisabled?: boolean; + /** + * Optional prop to add twrnc overriding classNames. + */ + twClassName?: string; + }; diff --git a/packages/design-system-react-native/src/components/Text/Text.constants.ts b/packages/design-system-react-native/src/components/Text/Text.constants.ts index 44cdb9fea..60558818a 100644 --- a/packages/design-system-react-native/src/components/Text/Text.constants.ts +++ b/packages/design-system-react-native/src/components/Text/Text.constants.ts @@ -1,6 +1,7 @@ +import { TextVariant } from '@metamask/design-system-shared'; import { typography } from '@metamask/design-tokens'; -import { FontWeight, TextVariant } from '../../types'; +import { FontWeight } from '../../types'; // Mappings export const TWCLASSMAP_TEXT_FONTWEIGHT: { diff --git a/packages/design-system-react-native/src/components/Text/Text.tsx b/packages/design-system-react-native/src/components/Text/Text.tsx index 812bc043a..cd61b6999 100644 --- a/packages/design-system-react-native/src/components/Text/Text.tsx +++ b/packages/design-system-react-native/src/components/Text/Text.tsx @@ -1,8 +1,9 @@ +import { TextVariant } from '@metamask/design-system-shared'; import { useTailwind } from '@metamask/design-system-twrnc-preset'; import React, { useMemo } from 'react'; import { Text as RNText } from 'react-native'; -import { FontFamily, FontStyle, TextVariant, TextColor } from '../../types'; +import { FontFamily, FontStyle, TextColor } from '../../types'; import { MAP_TEXT_VARIANT_FONTWEIGHT, diff --git a/packages/design-system-react-native/src/components/Text/Text.types.ts b/packages/design-system-react-native/src/components/Text/Text.types.ts index 56f5b3bd4..9d4817c6b 100644 --- a/packages/design-system-react-native/src/components/Text/Text.types.ts +++ b/packages/design-system-react-native/src/components/Text/Text.types.ts @@ -1,13 +1,7 @@ -// Third party dependencies. +import type { TextVariant } from '@metamask/design-system-shared'; import type { TextProps as RNTextProps } from 'react-native'; -import type { - TextVariant, - TextColor, - FontWeight, - FontFamily, - FontStyle, -} from '../../types'; +import type { TextColor, FontWeight, FontFamily, FontStyle } from '../../types'; /** * Text component props. diff --git a/packages/design-system-react-native/src/components/Text/index.ts b/packages/design-system-react-native/src/components/Text/index.ts index e12cc202e..bd5f2cd09 100644 --- a/packages/design-system-react-native/src/components/Text/index.ts +++ b/packages/design-system-react-native/src/components/Text/index.ts @@ -1,9 +1,4 @@ -export { - TextVariant, - TextColor, - FontWeight, - FontFamily, - FontStyle, -} from '../../types'; +export { TextVariant } from '@metamask/design-system-shared'; +export { TextColor, FontWeight, FontFamily, FontStyle } from '../../types'; export { Text } from './Text'; export type { TextProps } from './Text.types'; diff --git a/packages/design-system-react-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts index d3d2314ac..38d990650 100644 --- a/packages/design-system-react-native/src/types/index.ts +++ b/packages/design-system-react-native/src/types/index.ts @@ -285,29 +285,7 @@ export enum ButtonIconVariant { /** * Text - variant */ -export enum TextVariant { - // Display Sizes - DisplayLg = 'display-lg', - DisplayMd = 'display-md', - - // Heading Sizes - HeadingLg = 'heading-lg', - HeadingMd = 'heading-md', - HeadingSm = 'heading-sm', - - // Body Sizes - BodyLg = 'body-lg', - BodyMd = 'body-md', - BodySm = 'body-sm', - BodyXs = 'body-xs', - - // Special Typography Variants - PageHeading = 'page-heading', - SectionHeading = 'section-heading', - ButtonLabelMd = 'button-label-md', - ButtonLabelLg = 'button-label-lg', - AmountDisplayLg = 'amount-display-lg', -} +export { TextVariant } from '@metamask/design-system-shared'; /** * Text - color diff --git a/packages/design-system-react/src/components/Input/Input.stories.tsx b/packages/design-system-react/src/components/Input/Input.stories.tsx index 1dc95b508..9eb3cff2d 100644 --- a/packages/design-system-react/src/components/Input/Input.stories.tsx +++ b/packages/design-system-react/src/components/Input/Input.stories.tsx @@ -1,8 +1,7 @@ +import { TextVariant } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { TextVariant } from '../../types'; - import { Input } from './Input'; import type { InputProps } from './Input.types'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Input/Input.test.tsx b/packages/design-system-react/src/components/Input/Input.test.tsx index b3c5874ec..f1890211e 100644 --- a/packages/design-system-react/src/components/Input/Input.test.tsx +++ b/packages/design-system-react/src/components/Input/Input.test.tsx @@ -1,8 +1,7 @@ +import { TextVariant } from '@metamask/design-system-shared'; import { render, screen, fireEvent } from '@testing-library/react'; import React, { createRef } from 'react'; -import { TextVariant } from '../../types'; - import { Input } from './Input'; const TEST_ID = 'input'; diff --git a/packages/design-system-react/src/components/Input/Input.tsx b/packages/design-system-react/src/components/Input/Input.tsx index b4efcb647..20f13525b 100644 --- a/packages/design-system-react/src/components/Input/Input.tsx +++ b/packages/design-system-react/src/components/Input/Input.tsx @@ -1,6 +1,6 @@ +import { TextVariant } from '@metamask/design-system-shared'; import React, { forwardRef } from 'react'; -import { TextVariant } from '../../types'; import { twMerge } from '../../utils/tw-merge'; import { CLASSMAP_TEXT_VARIANT_FONTSTYLE, diff --git a/packages/design-system-react/src/components/Input/Input.types.ts b/packages/design-system-react/src/components/Input/Input.types.ts index 8ed0e0102..8f2f49539 100644 --- a/packages/design-system-react/src/components/Input/Input.types.ts +++ b/packages/design-system-react/src/components/Input/Input.types.ts @@ -1,35 +1,17 @@ +import type { InputPropsShared } from '@metamask/design-system-shared'; import type { ComponentPropsWithoutRef } from 'react'; -import type { TextVariant } from '../../types'; - export type InputProps = Omit< ComponentPropsWithoutRef<'input'>, 'disabled' | 'readOnly' -> & { - /** - * Optional enum to select between Typography variants. - * - * @default TextVariant.BodyMd - */ - textVariant?: TextVariant; - /** - * Optional boolean to disable Input. - * - * @default false - */ - isDisabled?: boolean; - /** - * Optional boolean to show readonly input. - * - * @default false - */ - isReadonly?: boolean; - /** - * Optional prop for additional CSS classes. - */ - className?: string; - /** - * Optional inline styles. - */ - style?: React.CSSProperties; -}; +> & + InputPropsShared & { + /** + * Optional prop for additional CSS classes. + */ + className?: string; + /** + * Optional inline styles. + */ + style?: React.CSSProperties; + }; diff --git a/packages/design-system-react/src/components/Text/Text.constants.ts b/packages/design-system-react/src/components/Text/Text.constants.ts index be28fa68d..13d4928c5 100644 --- a/packages/design-system-react/src/components/Text/Text.constants.ts +++ b/packages/design-system-react/src/components/Text/Text.constants.ts @@ -1,4 +1,4 @@ -import { TextVariant } from '../../types'; +import { TextVariant } from '@metamask/design-system-shared'; export const CLASSMAP_TEXT_VARIANT_FONTSTYLE: Record = { [TextVariant.DisplayLg]: diff --git a/packages/design-system-react/src/components/Text/Text.tsx b/packages/design-system-react/src/components/Text/Text.tsx index 0ab21474b..e5ee8f337 100644 --- a/packages/design-system-react/src/components/Text/Text.tsx +++ b/packages/design-system-react/src/components/Text/Text.tsx @@ -1,7 +1,8 @@ +import { TextVariant } from '@metamask/design-system-shared'; import { Slot } from '@radix-ui/react-slot'; import React from 'react'; -import { FontFamily, TextColor, TextVariant } from '../../types'; +import { FontFamily, TextColor } from '../../types'; import { twMerge } from '../../utils/tw-merge'; import { diff --git a/packages/design-system-react/src/components/Text/Text.types.ts b/packages/design-system-react/src/components/Text/Text.types.ts index 847c2edab..51759a526 100644 --- a/packages/design-system-react/src/components/Text/Text.types.ts +++ b/packages/design-system-react/src/components/Text/Text.types.ts @@ -1,10 +1,11 @@ +import type { TextVariant } from '@metamask/design-system-shared'; + import type { FontFamily, FontStyle, FontWeight, OverflowWrap, TextAlign, - TextVariant, TextTransform, TextColor, } from '../../types'; diff --git a/packages/design-system-react/src/components/Text/index.ts b/packages/design-system-react/src/components/Text/index.ts index 92ec2edfc..6e4bf413b 100644 --- a/packages/design-system-react/src/components/Text/index.ts +++ b/packages/design-system-react/src/components/Text/index.ts @@ -1,10 +1,10 @@ +export { TextVariant } from '@metamask/design-system-shared'; export { FontFamily, FontStyle, FontWeight, OverflowWrap, TextAlign, - TextVariant, TextTransform, TextColor, } from '../../types'; diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts index 5514b48e9..38b1f38f2 100644 --- a/packages/design-system-react/src/types/index.ts +++ b/packages/design-system-react/src/types/index.ts @@ -294,29 +294,7 @@ export enum ButtonIconVariant { /** * Text - variant */ -export enum TextVariant { - // Display Sizes - DisplayLg = 'display-lg', - DisplayMd = 'display-md', - - // Heading Sizes - HeadingLg = 'heading-lg', - HeadingMd = 'heading-md', - HeadingSm = 'heading-sm', - - // Font Sizes - BodyLg = 'body-lg', - BodyMd = 'body-md', - BodySm = 'body-sm', - BodyXs = 'body-xs', - - // Special Typography Variants - PageHeading = 'page-heading', - SectionHeading = 'section-heading', - ButtonLabelMd = 'button-label-md', - ButtonLabelLg = 'button-label-lg', - AmountDisplayLg = 'amount-display-lg', -} +export { TextVariant } from '@metamask/design-system-shared'; /** * Text - color diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index fdc83d360..910b8eca5 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -56,3 +56,9 @@ export { type BadgeWrapperCustomPosition, type BadgeWrapperPropsShared, } from './types/BadgeWrapper'; + +// Text types (ADR-0003) +export { TextVariant } from './types/Text'; + +// Input types (ADR-0004) +export { type InputPropsShared } from './types/Input'; diff --git a/packages/design-system-shared/src/types/Input/Input.types.ts b/packages/design-system-shared/src/types/Input/Input.types.ts new file mode 100644 index 000000000..a940c07e2 --- /dev/null +++ b/packages/design-system-shared/src/types/Input/Input.types.ts @@ -0,0 +1,26 @@ +import type { TextVariant } from '../Text/Text.types'; + +/** + * Input component shared props (ADR-0004) + * Platform-independent properties shared across React and React Native + */ +export type InputPropsShared = { + /** + * Optional prop to select between Typography variants. + * + * @default TextVariant.BodyMd + */ + textVariant?: TextVariant; + /** + * Optional boolean to disable Input. + * + * @default false + */ + isDisabled?: boolean; + /** + * Optional boolean to show readonly input. + * + * @default false + */ + isReadonly?: boolean; +}; diff --git a/packages/design-system-shared/src/types/Input/index.ts b/packages/design-system-shared/src/types/Input/index.ts new file mode 100644 index 000000000..b3b683937 --- /dev/null +++ b/packages/design-system-shared/src/types/Input/index.ts @@ -0,0 +1 @@ +export { type InputPropsShared } from './Input.types'; diff --git a/packages/design-system-shared/src/types/Text/Text.types.ts b/packages/design-system-shared/src/types/Text/Text.types.ts new file mode 100644 index 000000000..8af221022 --- /dev/null +++ b/packages/design-system-shared/src/types/Text/Text.types.ts @@ -0,0 +1,42 @@ +/** + * Text - variant + * Convert from enum to const object (ADR-0003) + */ +export const TextVariant = { + // Display Sizes + /** Large display text */ + DisplayLg: 'display-lg', + /** Medium display text */ + DisplayMd: 'display-md', + + // Heading Sizes + /** Large heading */ + HeadingLg: 'heading-lg', + /** Medium heading */ + HeadingMd: 'heading-md', + /** Small heading */ + HeadingSm: 'heading-sm', + + // Font Sizes + /** Large body text */ + BodyLg: 'body-lg', + /** Medium body text (default) */ + BodyMd: 'body-md', + /** Small body text */ + BodySm: 'body-sm', + /** Extra small body text */ + BodyXs: 'body-xs', + + // Special Typography Variants + /** Page heading variant */ + PageHeading: 'page-heading', + /** Section heading variant */ + SectionHeading: 'section-heading', + /** Medium button label */ + ButtonLabelMd: 'button-label-md', + /** Large button label */ + ButtonLabelLg: 'button-label-lg', + /** Large amount display */ + AmountDisplayLg: 'amount-display-lg', +} as const; +export type TextVariant = (typeof TextVariant)[keyof typeof TextVariant]; diff --git a/packages/design-system-shared/src/types/Text/index.ts b/packages/design-system-shared/src/types/Text/index.ts new file mode 100644 index 000000000..d21a6b407 --- /dev/null +++ b/packages/design-system-shared/src/types/Text/index.ts @@ -0,0 +1,2 @@ +export { TextVariant } from './Text.types'; +export type {} from './Text.types';