feat(@kibisis/react): add typography

packages/react/.storybook/main.ts

@@ -14,6 +14,7 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  staticDirs: ['./fonts'],
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   viteFinal: (config) =>
     mergeConfig(config, {

packages/react/.storybook/preview.tsx

@@ -2,6 +2,9 @@ import { ArgTypes, Description, Title } from '@storybook/addon-docs';
 import type { Preview } from '@storybook/react';
 import { useEffect } from 'react';
 
+// styles
+import './styles/index.css';
+
 // theme
 import theme from '@/theme';
 

packages/react/.storybook/styles/fonts.css

@@ -0,0 +1,43 @@
+/* nunito */
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-weight: 600 700;
+  font-display: swap;
+  src: url("../fonts/Nunito/Nunito-Bold.woff2") format("woff2"),
+  url("../fonts/Nunito/Nunito-Bold.woff") format("woff"),
+  url("../fonts/Nunito/Nunito-Bold.ttf") format("truetype"),
+  url("../fonts/Nunito/Nunito-Bold.svg#Nunito-Bold") format("svg");
+}
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/Nunito/Nunito-Regular.woff2") format("woff2"),
+  url("../fonts/Nunito/Nunito-Regular.woff") format("woff"),
+  url("../fonts/Nunito/Nunito-Regular.ttf") format("truetype"),
+  url("../fonts/Nunito/Nunito-Regular.svg#Nunito-Regular") format("svg");
+}
+
+/* source code pro */
+@font-face {
+  font-family: 'SourceCodePro';
+  font-style: normal;
+  font-weight: 600 700;
+  font-display: swap;
+  src: url('../fonts/SourceCodePro/SourceCodePro-Bold.woff2') format('woff2'),
+  url('../fonts/SourceCodePro/SourceCodePro-Bold.woff') format('woff'),
+  url('../fonts/SourceCodePro/SourceCodePro-Bold.ttf') format('truetype'),
+  url('../fonts/SourceCodePro/SourceCodePro-Bold.svg#SourceCodePro-Bold') format('svg');
+}
+@font-face {
+  font-family: 'SourceCodePro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/SourceCodePro/SourceCodePro-Regular.woff2') format('woff2'),
+  url('../fonts/SourceCodePro/SourceCodePro-Regular.woff') format('woff'),
+  url('../fonts/SourceCodePro/SourceCodePro-Regular.ttf') format('truetype'),
+  url('../fonts/SourceCodePro/SourceCodePro-Regular.svg#SourceCodePro-Regular') format('svg');
+}

packages/react/.storybook/styles/index.css

@@ -0,0 +1 @@
+@import "fonts.css";

packages/react/src/components/accounts/AccountSelectModal.tsx

@@ -43,10 +43,10 @@ const AccountSelectModal: FC<TAccountSelectModalProps> = ({
   const { t } = useTranslation();
   // hooks
   const backgroundColor = useBackgroundColor(colorMode);
-  const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
-  const defaultTextColor = useDefaultTextColor();
-  const primaryColorPalette = usePrimaryColorPalette();
-  const subTextColor = useSubTextColor();
+  const buttonHoverBackgroundColor = useButtonHoverBackgroundColor(colorMode);
+  const defaultTextColor = useDefaultTextColor(colorMode);
+  const primaryColorPalette = usePrimaryColorPalette(colorMode);
+  const subTextColor = useSubTextColor(colorMode);
   // memo
   const context = useMemo(() => randomString(8), []);
   // states

packages/react/src/components/index.ts

@@ -3,3 +3,4 @@ export * from './buttons';
 export * from './forms';
 export * from './layouts';
 export * from './loaders';
+export * from './typography';

packages/react/src/components/layouts/Modal.tsx

@@ -10,13 +10,14 @@ import { IoClose } from 'react-icons/io5';
 import { IconButton } from '@/components';
 
 // hooks
-import { useDesktopAndUp, useTabletAndUp } from '@/hooks';
+import { useBackgroundColor, useDesktopAndUp, useTabletAndUp } from '@/hooks';
 
 // types
 import type { TModalProps } from '@/types';
 
-const Modal: FC<TModalProps> = ({ body, closeButton, colorMode = 'dark', footer, header, onClose, open }) => {
+const Modal: FC<TModalProps> = ({ body, closeButton, closeOnEscape, closeOnInteractOutside, colorMode, footer, header, onClose, open }) => {
   // hooks
+  const backgroundColor = useBackgroundColor(colorMode);
   const isDesktopAndUp = useDesktopAndUp();
   const isTabletAndUp = useTabletAndUp();
   // memos
@@ -26,7 +27,7 @@ const Modal: FC<TModalProps> = ({ body, closeButton, colorMode = 'dark', footer,
     }
 
     if (isTabletAndUp) {
-      return 'full';
+      return 'lg';
     }
 
     return 'full';
@@ -40,6 +41,8 @@ const Modal: FC<TModalProps> = ({ body, closeButton, colorMode = 'dark', footer,
 
   return (
     <Dialog.Root
+      closeOnEscape={closeOnEscape}
+      closeOnInteractOutside={closeOnInteractOutside}
       lazyMount={true}
       motionPreset="slide-in-bottom"
       open={open}
@@ -52,7 +55,7 @@ const Modal: FC<TModalProps> = ({ body, closeButton, colorMode = 'dark', footer,
         <Dialog.Backdrop />
 
         <Dialog.Positioner>
-          <Dialog.Content>
+          <Dialog.Content bg={backgroundColor}>
             {/*header*/}
             <Dialog.Header>
               {header}
@@ -81,4 +84,6 @@ const Modal: FC<TModalProps> = ({ body, closeButton, colorMode = 'dark', footer,
   );
 };
 
+Modal.displayName = 'Modal';
+
 export default Modal;

packages/react/src/components/typography/Heading.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+// components
+import Heading from './Heading';
+
+// containers
+import { KibisisAppProvider } from '@/providers';
+
+// types
+import type { THeadingProps } from '@/types';
+
+const meta: Meta<typeof Heading> = {
+  component: Heading,
+  globals: {
+    theme: 'dark',
+  },
+  title: 'Components/Heading',
+};
+
+export const WithDarkTheme: StoryObj<THeadingProps> = {
+  globals: {
+    theme: 'dark',
+  },
+  render: (props) => (
+    <KibisisAppProvider colorMode="dark">
+      <Heading {...props}>
+        Hello humie
+      </Heading>
+    </KibisisAppProvider>
+  ),
+};
+
+export const WithLightTheme: StoryObj<THeadingProps> = {
+  globals: {
+    theme: 'light',
+  },
+  render: (props) => (
+    <KibisisAppProvider colorMode="light">
+      <Heading {...props}>
+        Hello humie
+      </Heading>
+    </KibisisAppProvider>
+  ),
+};
+
+export default meta;

packages/react/src/components/typography/Heading.tsx

@@ -0,0 +1,34 @@
+import { Heading as ChakraHeading } from '@chakra-ui/react';
+import {
+  type PropsWithoutRef,
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type RefAttributes,
+} from 'react';
+
+// hooks
+import { useDefaultTextColor } from '@/hooks';
+
+// types
+import type { THeadingProps } from '@/types';
+
+const Heading: ForwardRefExoticComponent<
+  PropsWithoutRef<THeadingProps> & RefAttributes<HTMLHeadingElement>
+> = forwardRef<HTMLHeadingElement, THeadingProps>(
+  ({ colorMode, ...otherProps }, ref) => {
+    // hooks
+    const defaultTextColor = useDefaultTextColor(colorMode);
+
+    return (
+      <ChakraHeading
+        color={defaultTextColor}
+        {...otherProps}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Heading.displayName = 'Heading';
+
+export default Heading;

packages/react/src/components/typography/Text.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+// components
+import Text from './Text';
+
+// containers
+import { KibisisAppProvider } from '@/providers';
+
+// types
+import type { TTextProps } from '@/types';
+
+const meta: Meta<typeof Text> = {
+  component: Text,
+  globals: {
+    theme: 'dark',
+  },
+  title: 'Components/Text',
+};
+
+export const WithDarkTheme: StoryObj<TTextProps> = {
+  globals: {
+    theme: 'dark',
+  },
+  render: (props) => (
+    <KibisisAppProvider colorMode="dark">
+      <Text {...props}>
+        Hello humie
+      </Text>
+    </KibisisAppProvider>
+  ),
+};
+
+export const WithLightTheme: StoryObj<TTextProps> = {
+  globals: {
+    theme: 'light',
+  },
+  render: (props) => (
+    <KibisisAppProvider colorMode="light">
+      <Text {...props}>
+        Hello humie
+      </Text>
+    </KibisisAppProvider>
+  ),
+};
+
+export default meta;

packages/react/src/components/typography/Text.tsx

@@ -0,0 +1,34 @@
+import { Text as ChakraText } from '@chakra-ui/react';
+import {
+  type PropsWithoutRef,
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type RefAttributes,
+} from 'react';
+
+// hooks
+import { useDefaultTextColor } from '@/hooks';
+
+// types
+import type { TTextProps } from '@/types';
+
+const Text: ForwardRefExoticComponent<
+  PropsWithoutRef<TTextProps> & RefAttributes<HTMLParagraphElement>
+> = forwardRef<HTMLParagraphElement, TTextProps>(
+  ({ colorMode, ...otherProps }, ref) => {
+    // hooks
+    const defaultTextColor = useDefaultTextColor(colorMode);
+
+    return (
+      <ChakraText
+        color={defaultTextColor}
+        {...otherProps}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Text.displayName = 'Text';
+
+export default Text;

packages/react/src/components/typography/index.ts

@@ -0,0 +1,2 @@
+export { default as Heading } from './Heading';
+export { default as Text } from './Text';

packages/react/src/theme.ts

@@ -88,7 +88,7 @@ export default createSystem(
               value: '{colors.primaryDark.500}', // main button bg
             },
             subtle: {
-              value: '{colors.primaryDark.200}', // subtle bg
+              value: '{colors.primaryDark.500}', // subtle bg
             },
           },
           primaryLight: {
@@ -99,19 +99,19 @@ export default createSystem(
               value: '{colors.primaryLight.700}',
             },
             fg: {
-              value: '{colors.primaryLight.100}',
+              value: '{colors.primaryLight.500}',
             },
             focusRing: {
               value: '{colors.primaryLight.500}',
             },
             muted: {
-              value: '{colors.primaryLight.100}',
+              value: '{colors.primaryLight.500}',
             },
             solid: {
               value: '{colors.primaryLight.500}',
             },
             subtle: {
-              value: '{colors.primaryLight.200}',
+              value: '{colors.primaryLight.500}',
             },
           },
         },
@@ -166,16 +166,16 @@ export default createSystem(
             800: { value: '#520159' },
             900: { value: '#3D0143' },
           },
-          fonts: {
-            heading: {
-              value: '"Nunito", sans-serif',
-            },
-            body: {
-              value: '"Nunito", sans-serif',
-            },
-            mono: {
-              value: '"SourceCodePro", monospace',
-            },
+        },
+        fonts: {
+          heading: {
+            value: '"Nunito", sans-serif',
+          },
+          body: {
+            value: '"Nunito", sans-serif',
+          },
+          mono: {
+            value: '"SourceCodePro", monospace',
           },
         },
       },

packages/react/src/types/index.ts

@@ -5,3 +5,4 @@ export * from './forms';
 export * from './layouts';
 export * from './loaders';
 export * from './strings';
+export * from './typography';

packages/react/src/types/layouts/TModalProps.ts

@@ -6,6 +6,8 @@ import type { IBaseComponentProps } from '@/types';
 export interface IModalProps {
   body: ReactNode;
   closeButton?: boolean;
+  closeOnEscape?: boolean;
+  closeOnInteractOutside?: boolean;
   footer?: ReactNode;
   header?: ReactNode;
   onClose?: () => void;

packages/react/src/types/typography/THeadingProps.ts

@@ -0,0 +1,8 @@
+import type { HeadingProps } from '@chakra-ui/react';
+
+// types
+import type { IBaseComponentProps } from '@/types';
+
+type THeadingProps = IBaseComponentProps & HeadingProps;
+
+export default THeadingProps;

packages/react/src/types/typography/TTextProps.ts

@@ -0,0 +1,8 @@
+import type { TextProps } from '@chakra-ui/react';
+
+// types
+import type { IBaseComponentProps } from '@/types';
+
+type TTextProps = IBaseComponentProps & TextProps;
+
+export default TTextProps;

packages/react/src/types/typography/index.ts

@@ -0,0 +1,2 @@
+export type { default as THeadingProps } from './THeadingProps';
+export type { default as TTextProps } from './TTextProps';