fix: components review

README.md

@@ -191,6 +191,41 @@ If you want to dive deeper into the components Tetrisly offers, check out our of
 
 You can also check out our Storybook, which is our Documentation for React components (now in progress): [Tetrisly Storybook](https://virtuslab.github.io/tetrisly-react/?path=/docs/alertbanner--docs)
 
+## Customization
+
+All Tetrisly components have a `custom` prop. It makes it possible to customize the component without the need to create a new one. Below you can see an example of Button customization
+
+### Button
+
+If you want to change any of button styles, you can make it by passing custom props with object based on
+specific component config.
+
+For instance, to change background-color of appereance="primary" intent="secondary" variant to pink, just pass
+refferenced object structure:
+
+```jsx
+<Button
+  label="Button label"
+  appearance="primary"
+  intent="success"
+  custom={{
+    variants: {
+      appearance: {
+        primary: {
+          intent: {
+            success: {
+              backgroundColor: 'raspberry-0', // you can also pass any color value not included in default theme
+            },
+          },
+        },
+      },
+    },
+  }}
+/>
+```
+
+we are still working on it, thanks for your feedback here!
+
 ### Useful links
 
 - [Tetrisly Storybook](https://storybook.tetrisly.com/)

package.json

@@ -84,7 +84,7 @@
   "exports": {
     ".": {
       "import": "./dist/tetrisly-react.es.js",
-      "require": "./dist/tetrisly-react.umd.cjs"
+      "require": "./dist/tetrisly-react.umd.js"
     }
   },
   "repository": {

src/components/AlertBanner/AlertBanner.stories.tsx

@@ -23,6 +23,13 @@ const meta = {
       },
     ],
   },
+  argTypes: {
+    intent: {
+      options: ['none', 'success', 'warning', 'negative'],
+      defaultValue: 'none',
+      control: { type: 'radio' },
+    },
+  },
   parameters: {
     docs: {
       description: {
@@ -46,7 +53,7 @@ export const Default: Story = {};
 
 export const Positive: Story = {
   args: {
-    intent: 'positive',
+    intent: 'success',
   },
 };
 

src/components/AlertBanner/AlertBanner.styles.ts

@@ -23,7 +23,7 @@ export const defaultConfig = {
       backgroundColor: '$color-background-neutral-strong',
       color: '$color-content-primary-inverted',
     },
-    positive: {
+    success: {
       backgroundColor: '$color-background-positive-strong',
       color: '$color-content-primary-inverted',
     },
@@ -53,13 +53,13 @@ export const defaultConfig = {
   },
 } satisfies AlertBannerConfig;
 
-export const resolveIconName = (intent: AlertBannerIntent): IconName<20> => {
-  const iconConfig: Record<AlertBannerIntent, IconName<20>> = {
+export const resolveIconName = (intent: AlertBannerIntent) => {
+  const iconConfig = {
     none: '20-info-fill',
-    positive: '20-info-fill',
+    success: '20-check-circle-fill',
     warning: '20-warning-fill',
     negative: '20-alert-fill',
-  };
+  } satisfies Record<AlertBannerIntent, IconName<20>>;
 
   return iconConfig[intent];
 };

src/components/AlertBanner/AlertBanner.test.tsx

@@ -53,9 +53,9 @@ describe('AlertBanner', () => {
     expect(alertBanner).toHaveStyle('background-color: rgb(85, 95, 109);');
   });
 
-  it('should render correct intent color (positive)', () => {
+  it('should render correct intent color (success)', () => {
     const alertBanner = getAlertBanner(
-      <AlertBanner text="Alert" intent="positive" />,
+      <AlertBanner text="Alert" intent="success" />,
     );
     expect(alertBanner).toHaveStyle('color: rgb(255,255,255);');
     expect(alertBanner).toHaveStyle('background-color:  rgb(29, 124, 77);');

src/components/AlertBanner/types/AlertBannerIntent.type.ts

@@ -1 +1 @@
-export type AlertBannerIntent = 'none' | 'positive' | 'warning' | 'negative';
+export type AlertBannerIntent = 'none' | 'success' | 'warning' | 'negative';

src/components/Avatar/Avatar.stories.tsx

@@ -17,9 +17,12 @@ const meta = {
     img: { if: { arg: 'appearance', eq: 'image' } },
     initials: { if: { arg: 'appearance', neq: 'image' } },
     emphasis: { if: { arg: 'appearance', neq: 'image' } },
+    appearance: {
+      options: appearances,
+      control: { type: 'select' },
+    },
   },
   parameters: {
-    controls: { sort: 'alpha' },
     docs: {
       description: {
         component:

src/components/Avatar/Avatar.styles.ts

@@ -119,7 +119,7 @@ export const defaultConfig = {
     orange: {
       emphasis: {
         high: {
-          color: '$color-nonSemantic-white-content-primary',
+          color: '$color-nonSemantic-grey-content-primary',
           backgroundColor: '$color-nonSemantic-orange-background-strong',
         },
         low: {

src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { AvatarProps } from './Avatar.props';
 import { stylesBuilder } from './stylesBuilder';

src/components/Avatar/types/AvatarAppearance.type.ts

@@ -1,17 +1,20 @@
-export type AvatarAppearanceColors =
-  | 'blue'
-  | 'green'
-  | 'grey'
-  | 'red'
-  | 'orange'
-  | 'raspberry'
-  | 'magenta'
-  | 'purple'
-  | 'grape'
-  | 'violet'
-  | 'cyan'
-  | 'teal'
-  | 'aquamarine'
-  | 'emerald';
+export const avatarAppearanceColors = [
+  'blue',
+  'green',
+  'grey',
+  'red',
+  'orange',
+  'raspberry',
+  'magenta',
+  'purple',
+  'grape',
+  'violet',
+  'cyan',
+  'teal',
+  'aquamarine',
+  'emerald',
+] as const;
 
-export type AvatarAppearance = AvatarAppearanceColors | 'image';
+export type AvatarAppearanceColors = (typeof avatarAppearanceColors)[number];
+
+export type AvatarAppearance = 'image' | AvatarAppearanceColors;

src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Badge } from './Badge';
+import type { BadgeEmphasis } from './BadgeEmphasis.type';
 
 import { BadgeDocs } from '@/docs-components/BadgeDocs';
 import { TetDocs } from '@/docs-components/TetDocs';
@@ -9,6 +10,14 @@ const meta = {
   title: 'Badge',
   component: Badge,
   tags: ['autodocs'],
+  argTypes: {
+    emphasis: {
+      control: {
+        type: 'select',
+        options: ['high', 'medium', 'low'] satisfies BadgeEmphasis[],
+      },
+    },
+  },
   parameters: {
     docs: {
       description: {

src/components/Badge/Badge.styles.ts

@@ -271,7 +271,7 @@ export const defaultConfig = {
         },
         medium: {
           border: '1px solid',
-          borderColor: '$color-nonSemantic-grey-border-strong',
+          borderColor: '$color-nonSemantic-grey-border-subtle',
           color: '$color-nonSemantic-grey-content-primary',
           backgroundColor: '$color-nonSemantic-white-background-strong',
         },

src/components/Badge/Badge.tsx

@@ -1,11 +1,11 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { BadgeProps } from './Badge.props';
+import type { BadgeProps } from './Badge.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
 export const Badge: FC<BadgeProps & MarginProps> = ({
   appearance,

src/components/Button/Button.stories.tsx

@@ -23,6 +23,16 @@ const meta = {
       defaultValue: 'medium',
       control: { type: 'radio' },
     },
+    variant: {
+      options: ['default', 'ghost', 'bare'],
+      defaultValue: 'default',
+      control: { type: 'radio' },
+    },
+    intent: {
+      options: ['none', 'success', 'destructive'],
+      defaultValue: 'none',
+      control: { type: 'radio' },
+    },
   },
   parameters: {
     docs: {

src/components/Button/Button.styles.ts

@@ -178,7 +178,7 @@ const size = {
 
 const commonConfig = {
   display: 'inline-flex',
-  gap: '$space-component-gap-small',
+  gap: '$space-component-gap-xSmall',
   w: 'fit-content',
   justifyContent: 'center',
   alignItems: 'center',
@@ -304,7 +304,7 @@ const defaultButtonConfig = {
 
 const ghostButtonConfig = {
   ...commonConfig,
-  borderRadius: '$border-radius-medium',
+  borderRadius: '$border-radius-large',
   backgroundColor: {
     _: 'transparent',
     hover: '$color-action-ghost-hover',

src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { ButtonProps } from './Button.props';
+import type { ButtonProps } from './Button.props';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 import { Loader } from '../Loader';
@@ -67,7 +67,7 @@ export const Button: FC<ButtonProps & MarginProps> = ({
       )}
       {beforeIcon && state !== 'loading' && <Icon name={beforeIcon} />}
       {children}
-      {dropdown && <Icon name="20-chevron-down" />}
+      {dropdown && <Icon name="20-chevron-down-small" />}
       {afterIcon && !dropdown && <Icon name={afterIcon} />}
     </tet.button>
   );

src/components/Button/stylesBuilder/stylesBuilder.test.ts

@@ -27,7 +27,7 @@ describe('stylesBuilder', () => {
         boxShadow: '$elevation-bottom-100',
         color: '$color-action-inverted-normal',
         display: 'inline-flex',
-        gap: '$space-component-gap-small',
+        gap: '$space-component-gap-xSmall',
         justifyContent: 'center',
         opacity: {
           disabled: '$opacity-disabled',

src/components/Checkbox/Checkbox.props.ts

@@ -1,6 +1,7 @@
 import type { InputHTMLAttributes } from 'react';
 
 import type { CheckboxConfig } from './Checkbox.styles';
+import { HelperTextProps } from '../HelperText';
 
 export type CheckboxProps = {
   isChecked?: boolean;
@@ -13,5 +14,11 @@ export type CheckboxProps = {
 > &
   (
     | { label?: string; helperText?: never }
-    | { label: string; helperText?: string }
+    | {
+        label: string;
+        helperText?: Pick<
+          HelperTextProps,
+          'hasBeforeIcon' | 'counter' | 'text'
+        >;
+      }
   );

src/components/Checkbox/Checkbox.stories.tsx

@@ -11,6 +11,14 @@ const meta = {
   title: 'Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: {
+        type: 'select',
+        options: [undefined, 'disabled', 'alert'],
+      },
+    },
+  },
   parameters: {
     docs: {
       description: {
@@ -34,6 +42,7 @@ export const Default: Story = {};
 export const Checked: Story = {
   args: {
     isChecked: true,
+    onChange: () => {},
   },
 };
 
@@ -87,7 +96,7 @@ export const Alert: Story = {
   args: {
     state: 'alert',
     label: 'Label',
-    helperText: 'Helper text',
+    helperText: { text: 'Helper text' },
   },
 };
 
@@ -100,6 +109,6 @@ export const Label: Story = {
 export const HelperText: Story = {
   args: {
     label: 'Label',
-    helperText: 'Helper text',
+    helperText: { text: 'Helper text' },
   },
 };

src/components/Checkbox/Checkbox.test.tsx

@@ -19,16 +19,19 @@ const getCheckbox = (jsx: JSX.Element) => {
 };
 
 describe('Checkbox', () => {
-  customPropTester(<Checkbox label="Label" helperText="Helper Text" />, {
-    containerId: 'checkbox',
-    innerElements: {
-      input: [],
-      checkboxContainer: [],
-      checkboxIcon: [],
-      label: [],
-      helperText: [],
+  customPropTester(
+    <Checkbox label="Label" helperText={{ text: 'Helper Text' }} />,
+    {
+      containerId: 'checkbox',
+      innerElements: {
+        input: [],
+        checkboxContainer: [],
+        checkboxIcon: [],
+        label: [],
+        helperText: [],
+      },
     },
-  });
+  );
 
   beforeEach(() => {
     handleEventMock.mockReset();
@@ -101,7 +104,7 @@ describe('Checkbox', () => {
 
   it('should render helper text if props provided', () => {
     const { label, helperText } = getCheckbox(
-      <Checkbox label="Label" helperText="Helper text" />,
+      <Checkbox label="Label" helperText={{ text: 'Helper text' }} />,
     );
 
     expect(label).toHaveTextContent('Label');