Merge pull request #5 from VAR-META-Tech/feat/update-typography

feat: missing variant issue

Author: hoangdevnull

apps/web/src/app/page.tsx

@@ -8,6 +8,7 @@ import {
   ModalAction,
   ModalHeader,
   Select,
+  Text,
   toast,
   type AutocompleteProps,
 } from '@var-meta/ui';
@@ -70,7 +71,7 @@ export default function Page() {
   return (
     <>
       <main className="gap-2xl flex min-h-screen flex-col items-center justify-center">
-        <div className="font-serif text-4xl font-semibold md:text-6xl">VAR UI</div>
+        <Text weight="bold">VAR UI</Text>
 
         <HStack
           className="w-full"

apps/web/src/stories/checkbox-filed.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Form, type CheckboxFieldProps } from '@var-meta/ui';
+
+import { EnhancedView } from '@/components/View';
+
+const sizes: CheckboxFieldProps['size'][] = ['sm', 'md'];
+const checkboxOptions: CheckboxFieldProps['checked'][] = ['indeterminate', true, false, undefined];
+const meta: Meta = {
+  title: 'Components/Checkbox/CheckboxField',
+  component: Form.Checkbox,
+  argTypes: {
+    size: {
+      options: sizes,
+      control: { type: 'select' },
+    },
+    checked: {
+      options: checkboxOptions,
+      control: { type: 'select' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+  args: {
+    label: 'Please accept the conditions',
+  },
+  parameters: {
+    docs: {
+      page: null,
+    },
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const DefaultTemplate: StoryFn<CheckboxFieldProps> = (args) => {
+  return (
+    <EnhancedView prop="Default">
+      <Form.Checkbox id="checkbox" {...args} />
+    </EnhancedView>
+  );
+};
+
+export const Default: StoryFn<typeof Form.Checkbox> = DefaultTemplate.bind({});

apps/web/src/stories/checkbox.stories.tsx

@@ -36,10 +36,7 @@ export default meta;
 const DefaultTemplate: StoryFn<CheckboxProps> = (args) => {
   return (
     <EnhancedView prop="Default">
-      <label htmlFor="checkbox" className="flex items-center space-x-2">
-        <Checkbox id="checkbox" {...args} />
-        <span className="text-sm">Please accept the conditions</span>
-      </label>
+      <Checkbox id="checkbox" {...args} />
     </EnhancedView>
   );
 };
@@ -49,10 +46,7 @@ export const Default: StoryFn<typeof Checkbox> = DefaultTemplate.bind({});
 const CheckBoxIconTemplate: StoryFn<CheckboxProps> = (args) => {
   return (
     <View prop="Default">
-      <label htmlFor="checkbox-icon" className="flex items-center space-x-2">
-        <Checkbox id="checkbox-icon" icon={<Star01Icon />} {...args} />
-        <span className="text-sm">Please check to see the icon</span>
-      </label>
+      <Checkbox id="checkbox-icon" icon={<Star01Icon />} {...args} />
     </View>
   );
 };

apps/web/src/stories/heading.stories.tsx

@@ -4,11 +4,28 @@ import { Heading, type HeadingProps } from '@var-meta/ui';
 
 import { EnhancedView } from '@/components/View';
 
+const aligns: HeadingProps['align'][] = ['center', 'center', 'justify', 'left'];
+const sizes: HeadingProps['size'][] = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'];
+const weights: HeadingProps['weight'][] = ['light', 'regular', 'medium', 'bold', 'semibold', 'extrabold', 'black'];
+
 const meta: Meta = {
   title: 'Components/Typography/Heading',
   component: Heading,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    align: {
+      options: aligns,
+      control: { type: 'select' },
+    },
+    size: {
+      options: sizes,
+      control: { type: 'select' },
+    },
+    weight: {
+      options: weights,
+      control: { type: 'select' },
+    },
+  },
   args: {},
 };
 

apps/web/src/stories/text.stories.tsx

@@ -4,11 +4,28 @@ import { Text, type TextProps } from '@var-meta/ui';
 
 import { EnhancedView } from '@/components/View';
 
+const aligns: TextProps['align'][] = ['center', 'center', 'justify', 'left'];
+const sizes: TextProps['size'][] = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'];
+const weights: TextProps['weight'][] = ['light', 'regular', 'medium', 'bold', 'semibold', 'extrabold', 'black'];
+
 const meta: Meta = {
   title: 'Components/Typography/Text',
   component: Text,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    align: {
+      options: aligns,
+      control: { type: 'select' },
+    },
+    size: {
+      options: sizes,
+      control: { type: 'select' },
+    },
+    weight: {
+      options: weights,
+      control: { type: 'select' },
+    },
+  },
   args: {},
 };
 

packages/ui/src/components/form/checkbox-field.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { Checkbox, type CheckboxProps } from '../checkbox';
 import { HelperText } from '../helper-text';
-import { Label } from '../label';
+import { labelVariants } from '../label/label';
 
 export interface CheckboxFieldProps extends CheckboxProps {
   label?: string;
@@ -14,8 +14,10 @@ const CheckboxField = forwardRef<React.ElementRef<typeof Checkbox>, CheckboxFiel
   ({ label, helperText, variant = 'default', ...props }, ref) => {
     return (
       <div>
-        {label && <Label>{label}</Label>}
-        <Checkbox ref={ref} {...props} />
+        <label htmlFor="checkbox" className="flex items-center">
+          <Checkbox ref={ref} {...props} />
+          {label ? <span className={labelVariants({ spacer: 'none', className: 'ml-2' })}>{label}</span> : null}
+        </label>
         {helperText && <HelperText variant={props.disabled ? 'disabled' : variant}>{helperText}</HelperText>}
       </div>
     );

packages/ui/src/components/label/label.tsx

@@ -4,24 +4,29 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { type ElementProps } from '../../types';
 
 const labelVariants = tv({
-  base: 'text-foreground-primary block font-medium mb-1',
+  base: 'text-foreground-primary block font-medium',
   variants: {
     size: {
       default: 'text-base',
       sm: 'text-sm',
       xs: 'text-xs',
     },
+    spacer: {
+      default: 'mb-1',
+      none: 'mb-0',
+    },
   },
   defaultVariants: {
     size: 'default',
+    spacer: 'default',
   },
 });
 
 export interface LabelProps extends ElementProps<'label'>, VariantProps<typeof labelVariants> {}
 
-const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ children, size, className, ...props }, ref) => {
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ children, spacer, size, className, ...props }, ref) => {
   return (
-    <label className={labelVariants({ size, className })} ref={ref} {...props}>
+    <label className={labelVariants({ spacer, size, className })} ref={ref} {...props}>
       {children}
     </label>
   );

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

@@ -52,10 +52,10 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLDivElement>, Vari
 }
 
 const Heading = React.forwardRef<HTMLDivElement, HeadingProps>(
-  ({ className, align, asChild = false, children, ...props }, ref) => {
+  ({ className, align, weight, size, asChild = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : 'div';
     return (
-      <Comp className={headingVariants({ align, className })} ref={ref} {...props}>
+      <Comp className={headingVariants({ align, weight, size, className })} ref={ref} {...props}>
         {children}
       </Comp>
     );

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

@@ -48,10 +48,10 @@ export interface TextProps extends React.HTMLAttributes<HTMLDivElement>, Variant
 }
 
 const Text = React.forwardRef<HTMLDivElement, TextProps>(
-  ({ className, align, asChild = false, children, ...props }, ref) => {
+  ({ className, align, size, weight, asChild = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : 'div';
     return (
-      <Comp className={textVariants({ align, className })} ref={ref} {...props}>
+      <Comp className={textVariants({ size, weight, align, className })} ref={ref} {...props}>
         {children}
       </Comp>
     );