@bitrise/bitkit 12.105.0 → 12.106.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.105.0",
+  "version": "12.106.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -10,6 +10,7 @@
   "license": "UNLICENSED",
   "scripts": {
     "build-storybook": "storybook build",
+    "create-theme-from-tokens": "node ./scripts/createThemeFromTokens.js",
     "lint": "eslint src --ext ts,tsx",
     "lint:fix": "eslint src --ext ts,tsx --fix",
     "release": "release-it minor --ci",
@@ -35,12 +36,14 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
+    "@fontsource/figtree": "^5.0.18",
+    "@fontsource/source-code-pro": "^5.0.16",
     "framer-motion": "^11.0.3",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.9.7",
-    "react-imask": "^7.3.0",
+    "react-focus-lock": "^2.9.8",
+    "react-imask": "^7.4.0",
     "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
@@ -55,15 +58,15 @@
     "@bitrise/eslint-plugin": "^2.5.0",
     "@chakra-ui/cli": "^2.4.1",
     "@google-cloud/storage": "^7.7.0",
-    "@storybook/addon-actions": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addons": "^7.6.12",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-webpack5": "^7.6.12",
-    "@storybook/theming": "^7.6.12",
+    "@storybook/addon-actions": "^7.6.14",
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-interactions": "^7.6.14",
+    "@storybook/addon-links": "^7.6.14",
+    "@storybook/addons": "^7.6.14",
+    "@storybook/blocks": "^7.6.14",
+    "@storybook/react": "^7.6.14",
+    "@storybook/react-webpack5": "^7.6.14",
+    "@storybook/theming": "^7.6.14",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -71,7 +74,7 @@
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
     "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "axios": "^1.6.7",
@@ -91,7 +94,7 @@
     "prettier": "^3.2.5",
     "react-hook-form": "^7.50.1",
     "release-it": "^17.0.3",
-    "storybook": "^7.6.12",
+    "storybook": "^7.6.14",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

package/src/Components/Avatar/Avatar.tsx

@@ -1,10 +1,8 @@
 import { Avatar as ChakraAvatar, AvatarProps as ChakraAvatarProps, forwardRef } from '@chakra-ui/react';
-import { Radii } from '../../Foundations/Radii/Radii';
 
 export type AvatarSizes = '16' | '24' | '32' | '40' | '48' | '64' | '96' | '128';
 
 export interface AvatarProps extends ChakraAvatarProps {
-  borderRadius?: keyof Radii;
   size?: AvatarSizes;
 }
 

package/src/Components/Badge/Badge.theme.ts

@@ -2,13 +2,9 @@ const BadgeTheme = {
   baseStyle: {
     borderRadius: '4',
     display: 'inline-block',
-    fontSize: '1',
-    fontWeight: 'bold',
-    lineHeight: '11px',
-    paddingBottom: '5px',
-    paddingTop: '6px',
     paddingX: '8',
-    textTransform: 'uppercase',
+    paddingY: '4',
+    textStyle: 'comp/badge/sm',
   },
 };
 

package/src/Components/Card/Card.tsx

@@ -1,10 +1,8 @@
 import { forwardRef, HTMLChakraProps, useStyleConfig } from '@chakra-ui/react';
-import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
 import Box, { BoxProps } from '../Box/Box';
 
 export interface CardProps extends BoxProps {
-  borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
   href?: string;
   variant?: 'elevated' | 'outline';

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/bitkit';
 
 const schemeColors: Record<ColorScheme, any> = {
   blue: {

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,5 +1,5 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/bitkit';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';

package/src/Components/Dialog/Dialog.tsx

@@ -69,7 +69,7 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
         {variant !== 'empty' && (
           <>
             <ModalHeader marginRight="48">
-              <Text as="h1" id={headerId} size="5">
+              <Text as="h1" id={headerId} textStyle="com/dialog/title">
                 {title}
               </Text>
             </ModalHeader>

package/src/Components/Filter/Filter.theme.ts

@@ -74,7 +74,7 @@ const FilterTheme = defineMultiStyleConfig({
     },
     formTitle: {
       color: 'purpe.10',
-      fontWeight: 'demiBold',
+      fontWeight: 'semibold',
     },
     icon: {
       color: 'neutral.60',

package/src/Components/Form/Form.theme.ts

@@ -5,9 +5,8 @@ const FormTheme = {
     baseStyle: {
       helperText: {
         color: 'neutral.50',
-        fontSize: '2',
-        lineHeight: '1.25rem',
         marginTop: '4',
+        textStyle: 'comp/input/helperText',
       },
     } as ComponentStyleConfig,
   },
@@ -15,9 +14,8 @@ const FormTheme = {
     baseStyle: {
       text: {
         color: 'red.50',
-        fontSize: '2',
-        lineHeight: '1.25rem',
         marginTop: '4',
+        textStyle: 'comp/input/helperText',
       },
     } as ComponentStyleConfig,
   },
@@ -27,8 +25,7 @@ const FormTheme = {
         color: 'neutral.80',
       },
       color: 'purple.10',
-      fontSize: '2',
-      fontWeight: 'bold',
+      textStyle: 'comp/input/label',
     } as ComponentStyleConfig,
   },
 };

package/src/Components/Form/Input/Input.tsx

@@ -14,11 +14,11 @@ import {
   InputRightElement,
   SystemStyleObject,
 } from '@chakra-ui/react';
-import { TypeColors } from '../../../tokens/tokens';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
 import Box from '../../Box/Box';
 import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
+import { TypeColors } from '../../../types/bitkit';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<

package/src/Components/Link/Link.theme.ts

@@ -1,4 +1,4 @@
-import { textSizes } from '../../Foundations/Typography/Typography';
+import TextTheme from '../Text/Text.theme';
 
 const schemeColors = {
   default: { color: 'inherit', hover: 'inherit' },
@@ -21,7 +21,7 @@ const LinkTheme = {
       fontSize: 'inherit',
     };
   },
-  ...textSizes,
+  ...TextTheme,
 };
 
 export default LinkTheme;

package/src/Components/Link/Link.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
-import { TextSizes } from '../../Foundations/Typography/Typography';
+import { TextSizes } from '../../types/bitkit';
 
 export interface LinkProps extends ChakraLinkProps {
   as?: 'a' | 'button';

package/src/Components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
-import { TypeColors } from '../../tokens/tokens';
+import { TypeColors } from '../../types/bitkit';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 

package/src/Components/Notification/Notification.tsx

@@ -1,7 +1,7 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/bitkit';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';

package/src/Components/Ribbon/Ribbon.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/bitkit';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Box from '../Box/Box';

package/src/Components/SegmentedControl/SegmentedControl.theme.ts

@@ -50,7 +50,7 @@ const SegmentedControlTheme = itemHelpers.defineMultiStyleConfig({
       cursor: 'pointer',
       flexGrow: 1,
       fontSize: '3',
-      fontWeight: 'demiBold',
+      fontWeight: 'semibold',
       lineHeight: '2.375rem',
       paddingX: '0.375rem',
       textAlign: 'center',

package/src/Components/Sidebar/SidebarItem.theme.ts

@@ -55,7 +55,7 @@ const SidebarItemTheme = itemHelpers.defineMultiStyleConfig({
           bg: 'purple.93',
         },
         bg: 'purple.95',
-        fontWeight: 'demiBold',
+        fontWeight: 'semibold',
       },
     },
   },

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,5 +1,5 @@
 import { Button, forwardRef, TabProps as ChakraTabProps, useTab, useTabsStyles } from '@chakra-ui/react';
-import { TypeColors } from '../../tokens/tokens';
+import { TypeColors } from '../../types/bitkit';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';
@@ -19,14 +19,14 @@ const ContainedTab = forwardRef<ContainedTabProps, 'button'>((props, ref) => {
   return (
     <Button __css={styles.containedTab} {...tabProps}>
       <Box display="flex" gap="16" justifyContent="space-between">
-        <Text as="span" fontWeight="bold" hasEllipsis>
+        <Text as="span" hasEllipsis textStyle="comp/tabs/contained">
           {tabProps.children}
         </Text>
         {isWarning && <Icon name="WarningColored" />}
         {!isWarning && iconName && <Icon color={iconColor} name={iconName} />}
       </Box>
       {secondaryText && (
-        <Text as="span" display="block" hasEllipsis size="2">
+        <Text as="span" display="block" hasEllipsis textStyle="comp/tabs/contained-secondary">
           {secondaryText}
         </Text>
       )}

package/src/Components/Tabs/Tabs.theme.ts

@@ -75,13 +75,11 @@ const baseStyle = defineStyle(
       alignItems: 'center',
       color: 'neutral.50',
       display: 'flex',
-      fontSize: '3',
-      fontWeight: 'bold',
       gap: '8',
       justifyContent: 'flex-start',
-      lineHeight: '1.5rem',
       paddingX: '16',
       paddingY: '12',
+      textStyle: 'comp/tabs/line',
       whiteSpace: 'nowrap',
     },
     tablist: {

package/src/Components/Tag/Tag.theme.ts

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
+import tokensToTheme from '../../tokens/tokensToTheme.json';
 import { TagProps } from './Tag';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
@@ -26,10 +27,7 @@ const sizes = {
         paddingRight: onClose ? rem(4) : rem(12),
         paddingY: leftIcon || onClose ? rem(4) : rem(6),
       },
-      label: {
-        fontSize: '2',
-        lineHeight: rem(20),
-      },
+      label: tokensToTheme.textStyles['comp/tag/md'],
     };
   }),
   sm: definePartsStyle((props) => {
@@ -46,10 +44,7 @@ const sizes = {
         paddingRight: onClose ? rem(2) : rem(8),
         paddingY: onClose ? rem(2) : rem(4),
       },
-      label: {
-        fontSize: rem(12),
-        lineHeight: rem(16),
-      },
+      label: tokensToTheme.textStyles['comp/tag/sm'],
     };
   }),
 };

package/src/Components/Tag/Tag.tsx

@@ -4,7 +4,7 @@ import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
-import { TypeColors } from '../../tokens/tokens';
+import { TypeColors } from '../../types/bitkit';
 
 export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' | 'variant'> {
   closeButtonTooltip?: string;

package/src/Components/Text/Text.theme.ts

@@ -1,5 +1,48 @@
-import { textSizes } from '../../Foundations/Typography/Typography';
+import { StyleProps } from '@chakra-ui/styled-system';
+import { TextSizes } from '../../types/bitkit';
 
-const TextTheme = textSizes;
+const sizes: Record<TextSizes, StyleProps> = {
+  '1': {
+    fontSize: '0.6875rem',
+    lineHeight: '1rem',
+    textTransform: 'uppercase',
+  },
+  '2': {
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+  },
+  '3': {
+    fontSize: '1rem',
+    lineHeight: '1.5rem',
+  },
+  '4': {
+    fontSize: '1.1875rem',
+    lineHeight: '1.75rem',
+  },
+  '5': {
+    fontSize: '1.5rem',
+    fontWeight: 'bold',
+    lineHeight: '2.25rem',
+  },
+  '6': {
+    fontSize: '1.875rem',
+    fontWeight: 'bold',
+    lineHeight: '2.5rem',
+  },
+  '7': {
+    fontSize: '2.25rem',
+    fontWeight: 'bold',
+    lineHeight: '3rem',
+  },
+  '8': {
+    fontSize: '3rem',
+    fontWeight: 'bold',
+    lineHeight: '3.75rem',
+  },
+};
+
+const TextTheme = {
+  sizes,
+};
 
 export default TextTheme;

package/src/Components/Text/Text.tsx

@@ -1,15 +1,8 @@
 import { forwardRef, ResponsiveValue, Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
-import { TextSizes } from '../../Foundations/Typography/Typography';
+import { TextSizes } from '../../types/bitkit';
 
 export interface TextProps extends ChakraTextProps {
-  /**
-   * Font weight
-   */
-  fontWeight?: ResponsiveValue<'bold' | 'demiBold' | 'normal'>;
   hasEllipsis?: boolean;
-  /**
-   * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
-   */
   size?: ResponsiveValue<TextSizes>;
 }
 
@@ -17,14 +10,9 @@ export interface TextProps extends ChakraTextProps {
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
 const Text = forwardRef<TextProps, 'p'>((props, ref) => {
-  const { fontWeight, hasEllipsis, size, textTransform, ...rest } = props;
-  const properties: ChakraTextProps = { fontWeight, size, textTransform, ...rest };
-  if (size === '1' && (!textTransform || textTransform === 'none')) {
-    properties.textTransform = 'uppercase';
-  }
-  if (!fontWeight && (size === '5' || size === '6' || size === '7' || size === '8')) {
-    properties.fontWeight = 'bold';
-  }
+  const { hasEllipsis, size, ...rest } = props;
+  const properties: ChakraTextProps = { size, ...rest };
+
   if (hasEllipsis) {
     if (!properties.maxWidth) {
       properties.maxWidth = '100%';
@@ -38,7 +26,6 @@ const Text = forwardRef<TextProps, 'p'>((props, ref) => {
 
 Text.defaultProps = {
   as: 'p',
-  size: '3',
 } as TextProps;
 
 export default Text;

package/src/Components/components.theme.ts

@@ -0,0 +1,103 @@
+import Alert from '../Foundations/Themes/Alert.theme';
+import Accordion from './AccordionLegacy/Accordion.theme';
+import Avatar from './Avatar/Avatar.theme';
+import Badge from './Badge/Badge.theme';
+import Breadcrumb from './Breadcrumb/Breadcrumb.theme';
+import Button from './Button/Button.theme';
+import Card from './Card/Card.theme';
+import Checkbox from './Form/Checkbox/Checkbox.theme';
+import ColorButton from './ColorButton/ColorButton.theme';
+import Dialog from './Dialog/Dialog.theme';
+import Divider from './Divider/Divider.theme';
+import Drawer from './Drawer/Drawer.theme';
+import EmptyState from './EmptyState/EmptyState.theme';
+import Link from './Link/Link.theme';
+import List from './List/List.theme';
+import Menu from './Menu/Menu.theme';
+import Radio from './Form/Radio/Radio.theme';
+import Select from './Select/Select.theme';
+import Input from './Form/Input/Input.theme';
+import Dropdown from './Dropdown/Dropdown.theme';
+import Tabs from './Tabs/Tabs.theme';
+import Text from './Text/Text.theme';
+import Table from './Table/Table.theme';
+import Tooltip from './Tooltip/Tooltip.theme';
+import CloseButton from './CloseButton/CloseButton.theme';
+import Popover from './Popover/Popover.theme';
+import Toggle from './Toggle/Toggle.theme';
+import Textarea from './Form/Textarea/Textarea.theme';
+import Form from './Form/Form.theme';
+import DatePickerDay from './DatePicker/DatePickerDay.theme';
+import NumberInput from './NumberInput/NumberInput.theme';
+import Skeleton from './Skeleton/Skeleton.theme';
+import ProgressBar from './ProgressBar/ProgressBar.theme';
+import ProgressIndicator from './ProgressIndicator/ProgressIndicator.theme';
+import Slider from './Slider/Slider.theme';
+import Sidebar from './Sidebar/Sidebar.theme';
+import SidebarItem from './Sidebar/SidebarItem.theme';
+import SegmentedControl from './SegmentedControl/SegmentedControl.theme';
+import Tag from './Tag/Tag.theme';
+import Note from './Note/Note.theme';
+import CodeBlock from './CodeBlock/CodeBlock.theme';
+import CodeSnippet from './CodeSnippet/CodeSnippet.theme';
+import DefinitionTooltip from './DefinitionTooltip/DefinitionTooltip.theme';
+import ExpandableCard from './ExpandableCard/ExpandableCard.theme';
+import FileInput from './Form/FileInput/FileInput.theme';
+import Filter from './Filter/Filter.theme';
+import Toggletip from './Toggletip/Toggletip.theme';
+import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
+import TagsInput from './Form/TagsInput/TagsInput.theme';
+
+const components = {
+  Accordion,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  Card,
+  Checkbox,
+  ColorButton,
+  Divider,
+  Drawer,
+  Dropdown,
+  EmptyState,
+  FilterSwitch,
+  ...Form,
+  Alert,
+  CloseButton,
+  CodeBlock,
+  CodeSnippet,
+  DatePickerDay,
+  DefinitionTooltip,
+  ExpandableCard,
+  FileInput,
+  Filter,
+  Input,
+  Link,
+  List,
+  Menu,
+  Modal: Dialog,
+  Note,
+  NumberInput,
+  Popover,
+  Progress: ProgressBar,
+  ProgressIndicator,
+  Radio,
+  SegmentedControl,
+  Select,
+  Sidebar,
+  SidebarItem,
+  Skeleton,
+  Slider,
+  Switch: Toggle,
+  Table,
+  Tabs,
+  Tag,
+  TagsInput,
+  Text,
+  Textarea,
+  Toggletip,
+  Tooltip,
+};
+
+export default components;

package/src/Foundations/Colors/Colors.tsx

@@ -2,17 +2,43 @@
 import { Unstyled } from '@storybook/blocks';
 import Provider from '../../Components/Provider/Provider';
 import Divider from '../../Components/Divider/Divider';
-import CommonTokens from './CommonTokens';
-import SystemTokens from './SystemTokens';
+import tokens from '../../tokens/tokensToTheme.json';
+import Card from '../../Components/Card/Card';
+import TokenTable from '../docComponents/TokenTable';
+import DocTitle from '../docComponents/DocTitle';
 import Palette from './Palette';
 
+const commonColorKeys = ['background', 'border', 'icon', 'text'];
+const systemColorKeys = Object.keys(tokens.semanticTokens.colors.sys);
+
 const Colors = () => {
   return (
     <Unstyled>
       <Provider>
-        <CommonTokens />
+        <DocTitle>Common Tokens</DocTitle>
+        <Card boxShadow="medium" padding="24">
+          {commonColorKeys.map((groupName) => (
+            <TokenTable
+              key={groupName}
+              data={tokens.semanticTokens.colors[groupName as keyof typeof tokens.semanticTokens.colors]}
+              groupName={groupName}
+              marginBottom="24"
+            />
+          ))}
+        </Card>
         <Divider marginBottom="32" marginTop="48" size="1" />
-        <SystemTokens />
+        <DocTitle>System Tokens</DocTitle>
+        <Card boxShadow="medium" padding="24">
+          {systemColorKeys.map((groupName) => (
+            <TokenTable
+              key={groupName}
+              data={tokens.semanticTokens.colors.sys[groupName as keyof typeof tokens.semanticTokens.colors.sys]}
+              groupName={groupName}
+              marginBottom="24"
+              tokenPrefix="sys"
+            />
+          ))}
+        </Card>
         <Divider marginBottom="32" marginTop="48" size="1" />
         <Palette />
       </Provider>

package/src/Foundations/Themes/Alert.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/bitkit';
 
 const AlertTheme = {
   baseStyle({ colorScheme }: { colorScheme: ColorScheme }) {
@@ -12,10 +12,9 @@ const AlertTheme = {
         borderWidth: '1px',
         color: `${colorScheme}.40`,
         display: 'flex',
-        fontSize: '3',
         gap: '8',
-        lineHeight: '1.5rem',
         padding: '12',
+        textStyle: 'comp/notification/message',
       },
       icon: {
         h: 24,
@@ -23,7 +22,7 @@ const AlertTheme = {
         w: 24,
       },
       title: {
-        fontWeight: 'bold',
+        textStyle: 'comp/notification/title',
       },
     };
   },

package/src/Foundations/Typography/Typography.tsx

@@ -0,0 +1,25 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Unstyled } from '@storybook/blocks';
+import Provider from '../../Components/Provider/Provider';
+import DocTitle from '../docComponents/DocTitle';
+import TokenTable from '../docComponents/TokenTable';
+import { textStyles } from '../../tokens/tokensToTheme.json';
+
+const getStyles = (filterString: string) => {
+  return Object.fromEntries(Object.entries(textStyles).filter(([key]) => key.includes(filterString)));
+};
+
+const Typography = () => {
+  return (
+    <Unstyled>
+      <Provider>
+        <DocTitle>Text Styles</DocTitle>
+        <TokenTable data={getStyles('heading/')} groupName="heading" marginBottom="24" type="text" />
+        <TokenTable data={getStyles('body/')} groupName="body" marginBottom="24" type="text" />
+        <TokenTable data={getStyles('code/')} groupName="code" type="text" />
+      </Provider>
+    </Unstyled>
+  );
+};
+
+export default Typography;