From 273513755478a07b94758e9fe93109d946a8e83d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Jamro=C5=BCek?=
 <167776055+mjamrozekvl@users.noreply.github.com>
Date: Tue, 7 May 2024 10:21:45 +0200
Subject: [PATCH] style: NO-JIRA typos found during onboarding (#137)

* style: NO-JIRA typos

* style: NO-JIRA typos in README.md

* fix: NO-JIRA typo in stylesBuilder.ts after merge
---
 README.md                                                   | 6 +++---
 src/components/Badge/stylesBuilder/stylesBuilder.ts         | 2 +-
 src/components/Button/stylesBuilder/stylesBuilder.ts        | 6 +++---
 src/components/Card/CardFooter/CardFooter.props.ts          | 2 +-
 src/components/Card/CardHeader/CardHeader.props.ts          | 2 +-
 src/components/CornerDialog/stylesBuilder.ts                | 2 +-
 src/components/Select/Select.tsx                            | 2 +-
 src/components/TextInput/TextInput.props.ts                 | 4 ++--
 src/components/TextInput/TextInput.stories.tsx              | 6 +++---
 src/components/TextInput/TextInput.styles.ts                | 4 ++--
 src/components/TextInput/TextInput.tsx                      | 2 +-
 src/components/TextInput/stylesBuilder/stylesBuilder.ts     | 4 ++--
 src/docs-components/LoaderDocs.tsx                          | 4 ++--
 src/services/mergeConfigWithCustom/index.ts                 | 2 +-
 .../mergeConfigWithCustom/mergeConfigWithCustom.test.ts     | 2 +-
 .../{mergeConfigWithCutom.ts => mergeConfigWithCustom.ts}   | 0
 16 files changed, 25 insertions(+), 25 deletions(-)
 rename src/services/mergeConfigWithCustom/{mergeConfigWithCutom.ts => mergeConfigWithCustom.ts} (100%)

diff --git a/README.md b/README.md
index aa9550be..9d8481c1 100644
--- a/README.md
+++ b/README.md
@@ -200,8 +200,8 @@ 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
@@ -209,7 +209,7 @@ refferenced object structure:
   appearance="primary"
   intent="success"
   custom={{
-    variants: {
+    default: {
       appearance: {
         primary: {
           intent: {
diff --git a/src/components/Badge/stylesBuilder/stylesBuilder.ts b/src/components/Badge/stylesBuilder/stylesBuilder.ts
index 5733d58d..79d0f234 100644
--- a/src/components/Badge/stylesBuilder/stylesBuilder.ts
+++ b/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 = {
diff --git a/src/components/Button/stylesBuilder/stylesBuilder.ts b/src/components/Button/stylesBuilder/stylesBuilder.ts
index 934aa644..bc4aa2f9 100644
--- a/src/components/Button/stylesBuilder/stylesBuilder.ts
+++ b/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,
diff --git a/src/components/Card/CardFooter/CardFooter.props.ts b/src/components/Card/CardFooter/CardFooter.props.ts
index d1eb71d1..f3474cb7 100644
--- a/src/components/Card/CardFooter/CardFooter.props.ts
+++ b/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[];
 };
diff --git a/src/components/Card/CardHeader/CardHeader.props.ts b/src/components/Card/CardHeader/CardHeader.props.ts
index 3ad22264..9b6b2827 100644
--- a/src/components/Card/CardHeader/CardHeader.props.ts
+++ b/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 =
diff --git a/src/components/CornerDialog/stylesBuilder.ts b/src/components/CornerDialog/stylesBuilder.ts
index edec6fd1..0d18017d 100644
--- a/src/components/CornerDialog/stylesBuilder.ts
+++ b/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 = {
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 4a9a73b5..7542aa47 100644
--- a/src/components/Select/Select.tsx
+++ b/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';
 
diff --git a/src/components/TextInput/TextInput.props.ts b/src/components/TextInput/TextInput.props.ts
index 5d5f3fbf..dcf378ae 100644
--- a/src/components/TextInput/TextInput.props.ts
+++ b/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;
diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
index 8dc0ff74..b452cfe0 100644
--- a/src/components/TextInput/TextInput.stories.tsx
+++ b/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',
       },
     },
   },
diff --git a/src/components/TextInput/TextInput.styles.ts b/src/components/TextInput/TextInput.styles.ts
index fac231fe..642b2c19 100644
--- a/src/components/TextInput/TextInput.styles.ts
+++ b/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',
         },
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index ba518808..e53a8596 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/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' && (
diff --git a/src/components/TextInput/stylesBuilder/stylesBuilder.ts b/src/components/TextInput/stylesBuilder/stylesBuilder.ts
index 26621309..c5b8bff9 100644
--- a/src/components/TextInput/stylesBuilder/stylesBuilder.ts
+++ b/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: {
diff --git a/src/docs-components/LoaderDocs.tsx b/src/docs-components/LoaderDocs.tsx
index 8b0cba25..b6ea095c 100644
--- a/src/docs-components/LoaderDocs.tsx
+++ b/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}
diff --git a/src/services/mergeConfigWithCustom/index.ts b/src/services/mergeConfigWithCustom/index.ts
index 50102952..01d79d36 100644
--- a/src/services/mergeConfigWithCustom/index.ts
+++ b/src/services/mergeConfigWithCustom/index.ts
@@ -1 +1 @@
-export { mergeConfigWithCustom } from './mergeConfigWithCutom';
+export { mergeConfigWithCustom } from './mergeConfigWithCustom';
diff --git a/src/services/mergeConfigWithCustom/mergeConfigWithCustom.test.ts b/src/services/mergeConfigWithCustom/mergeConfigWithCustom.test.ts
index a88809d7..e1c792c7 100644
--- a/src/services/mergeConfigWithCustom/mergeConfigWithCustom.test.ts
+++ b/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',
diff --git a/src/services/mergeConfigWithCustom/mergeConfigWithCutom.ts b/src/services/mergeConfigWithCustom/mergeConfigWithCustom.ts
similarity index 100%
rename from src/services/mergeConfigWithCustom/mergeConfigWithCutom.ts
rename to src/services/mergeConfigWithCustom/mergeConfigWithCustom.ts