style: NO-JIRA typos found during onboarding

README.md

@@ -200,16 +200,16 @@ All Tetrisly components have a `custom` prop. It makes it possible to customize
 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:
+For instance, to change background-color of appearance="primary" intent="secondary" variant to pink, just pass
+referenced object structure:
 
 ```jsx
 <Button
   label="Button label"
   appearance="primary"
   intent="success"
   custom={{
-    variants: {
+    default: {
       appearance: {
         primary: {
           intent: {

src/components/Badge/stylesBuilder/stylesBuilder.ts

@@ -3,7 +3,7 @@ import { BadgeAppearance } from '../BadgeAppearance.type';
 import { BadgeEmphasis } from '../BadgeEmphasis.type';
 import { BadgeIntent } from '../BadgeIntent.type';
 
-import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCustom';
 import { BaseProps } from '@/types/BaseProps';
 
 type BadgeStylesBuilder = {

src/components/Button/stylesBuilder/stylesBuilder.ts

@@ -5,7 +5,7 @@ import { defaultConfig } from '../Button.styles';
 import { fallbackKey, mergeConfigWithCustom } from '@/services';
 import { BaseProps } from '@/types/BaseProps';
 
-type ButtonStylesBulderInput = {
+type ButtonStylesBuilderInput = {
   appearance: NonNullable<ButtonProps['appearance']>;
   variant: NonNullable<ButtonProps['variant']>;
   intent: NonNullable<ButtonProps['intent']>;
@@ -23,7 +23,7 @@ type ButtonStylesBuilder = {
 
 const getLoaderProps = (
   loader: object,
-  props: Pick<ButtonStylesBulderInput, 'appearance' | 'intent'>,
+  props: Pick<ButtonStylesBuilderInput, 'appearance' | 'intent'>,
 ) => {
   let loaderProps: Pick<LoaderProps, 'appearance'> = {};
 
@@ -47,7 +47,7 @@ const getLoaderProps = (
 };
 
 export const stylesBuilder = (
-  props: ButtonStylesBulderInput,
+  props: ButtonStylesBuilderInput,
 ): ButtonStylesBuilder => {
   const variants = mergeConfigWithCustom({
     defaultConfig,

src/components/Card/CardFooter/CardFooter.props.ts

@@ -4,6 +4,6 @@ import type { GhostButtonProps } from '@/components/Button/Button.props';
 
 export type CardFooterProps = {
   styles: CardFooterConfig;
-  // TODO: in the future omit the size from the buttonprops
+  // TODO: in the future omit the size from the button props
   actions: GhostButtonProps[];
 };

src/components/Card/CardHeader/CardHeader.props.ts

@@ -10,7 +10,7 @@ export type CardHeaderProps = {
   description?: string;
   beforeComponent?: BeforeComponentProps;
   styles: CardHeaderConfig;
-  // TODO: in the future omit the size from the buttonprops
+  // TODO: in the future omit the size from the button props
   actions?: BareButtonProps[];
 };
 type BeforeComponentProps =

src/components/CornerDialog/stylesBuilder.ts

@@ -1,6 +1,6 @@
 import { CornerDialogConfig, defaultConfig } from './CornerDialog.styles';
 
-import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom';
 import { BaseProps } from '@/types/BaseProps';
 
 type CornerDialogStylesBuilder = {

src/components/Select/Select.tsx

@@ -8,7 +8,7 @@ import { IconButton } from '../IconButton';
 import type { TextInputProps } from '../TextInput';
 import { useTextInput } from '../TextInput/useTextInput';
 
-import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCustom';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 

src/components/TextInput/TextInput.props.ts

@@ -21,7 +21,7 @@ export namespace TextInputProps.InnerComponents {
     Pick<GhostButtonProps, 'label' | 'onClick'>
   >;
   export type Prefix = InnerComponent<'Prefix', { text: string }>;
-  export type Sufix = InnerComponent<'Sufix', { text: string }>;
+  export type Suffix = InnerComponent<'Suffix', { text: string }>;
   export type Button = InnerComponent<
     'Button',
     Pick<GhostButtonProps, 'label' | 'onClick'>
@@ -42,7 +42,7 @@ export type TextInputProps = {
   afterComponent?:
     | TextInputProps.InnerComponents.Icon
     | TextInputProps.InnerComponents.IconButton
-    | TextInputProps.InnerComponents.Sufix
+    | TextInputProps.InnerComponents.Suffix
     | TextInputProps.InnerComponents.Button
     | TextInputProps.InnerComponents.Dropdown;
   state?: BasicInputState;

src/components/TextInput/TextInput.stories.tsx

@@ -127,12 +127,12 @@ export const AfterIconButtonComponent: Story = {
   },
 };
 
-export const AfterSufixComponent: Story = {
+export const AfterSuffixComponent: Story = {
   args: {
     afterComponent: {
-      type: 'Sufix',
+      type: 'Suffix',
       props: {
-        text: 'Sufix',
+        text: 'Suffix',
       },
     },
   },

src/components/TextInput/TextInput.styles.ts

@@ -14,7 +14,7 @@ export type TextInputConfig = {
     afterComponent?: {
       spacing?: Partial<
         Record<
-          'Icon' | 'Sufix' | 'Button' | 'IconButton' | 'Dropdown',
+          'Icon' | 'Suffix' | 'Button' | 'IconButton' | 'Dropdown',
           BaseProps
         >
       >;
@@ -109,7 +109,7 @@ export const defaultConfig = {
           marginLeft: '$space-component-padding-small',
           marginRight: '$space-component-padding-large',
         },
-        Sufix: {
+        Suffix: {
           marginLeft: '$space-component-padding-small',
           marginRight: '$space-component-padding-large',
         },

src/components/TextInput/TextInput.tsx

@@ -117,7 +117,7 @@ export const TextInput = forwardRef<
                 {...afterComponent.props}
               />
             )}
-            {afterComponent.type === 'Sufix' && (
+            {afterComponent.type === 'Suffix' && (
               <tet.span {...styles.text}>{afterComponent.props.text}</tet.span>
             )}
             {afterComponent.type === 'Button' && (

src/components/TextInput/stylesBuilder/stylesBuilder.ts

@@ -1,6 +1,6 @@
 import { TextInputConfig, defaultConfig } from '../TextInput.styles';
 
-import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCustom';
 import { BaseProps } from '@/types/BaseProps';
 
 type TextInputStylesBuilder = {
@@ -16,7 +16,7 @@ type TextInputStylesBuilder = {
 export const stylesBuilder = (
   custom?: TextInputConfig,
   beforeComponentType?: 'Icon' | 'Avatar' | 'Prefix' | 'Dropdown',
-  afterComponentType?: 'Icon' | 'Sufix' | 'Button' | 'IconButton' | 'Dropdown',
+  afterComponentType?: 'Icon' | 'Suffix' | 'Button' | 'IconButton' | 'Dropdown',
 ): TextInputStylesBuilder => {
   const {
     innerElements: {

src/docs-components/LoaderDocs.tsx

@@ -55,7 +55,7 @@ export const LoaderDocs = () => (
                       inverted={appearance === 'white'}
                       py="$dimension-500"
                     >
-                      Progres: No
+                      Progress: No
                     </SectionHeader>
                     <Loader
                       shape={shape}
@@ -70,7 +70,7 @@ export const LoaderDocs = () => (
                       inverted={appearance === 'white'}
                       py="$dimension-500"
                     >
-                      Progres: Yes ({Math.floor(progress * 100)}%)
+                      Progress: Yes ({Math.floor(progress * 100)}%)
                     </SectionHeader>
                     <Loader
                       shape={shape}

src/services/mergeConfigWithCustom/index.ts

@@ -1 +1 @@
-export { mergeConfigWithCustom } from './mergeConfigWithCutom';
+export { mergeConfigWithCustom } from './mergeConfigWithCustom';

src/services/mergeConfigWithCustom/mergeConfigWithCustom.test.ts

@@ -1,6 +1,6 @@
 import { merge } from 'lodash';
 
-import { mergeConfigWithCustom } from './mergeConfigWithCutom';
+import { mergeConfigWithCustom } from './mergeConfigWithCustom';
 
 const defaultConfig = {
   p: 'component-padding-medium',