diff --git a/README.md b/README.md
index 4476b02..ef42cb4 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,3 @@ import { Component } from 'react-vite-component-library';
```
```
-
-```
-
-```
diff --git a/coverage/storybook/coverage-storybook.json b/coverage/storybook/coverage-storybook.json
index eb8b221..2fdb7b1 100644
--- a/coverage/storybook/coverage-storybook.json
+++ b/coverage/storybook/coverage-storybook.json
@@ -650,74 +650,74 @@
}
},
"s": {
- "0": 9,
- "1": 63,
- "2": 9,
- "3": 9,
- "4": 21,
+ "0": 5,
+ "1": 35,
+ "2": 5,
+ "3": 5,
+ "4": 3,
"5": 1,
"6": 1,
- "7": 21,
- "8": 21,
- "9": 21,
- "10": 21,
- "11": 21,
- "12": 21,
- "13": 9,
- "14": 9
+ "7": 3,
+ "8": 3,
+ "9": 3,
+ "10": 3,
+ "11": 3,
+ "12": 3,
+ "13": 5,
+ "14": 5
},
"f": {
- "0": 9,
- "1": 21,
+ "0": 5,
+ "1": 3,
"2": 1,
- "3": 21
+ "3": 3
},
"b": {
"0": [
- 9,
+ 5,
0
],
"1": [
- 9
+ 5
],
"2": [
- 9,
- 9
+ 5,
+ 5
],
"3": [
1
],
"4": [
- 21,
- 1
+ 3,
+ 0
],
"5": [
- 21,
+ 3,
0
],
"6": [
- 21,
+ 3,
0
],
"7": [
- 21,
+ 3,
1
],
"8": [
0,
- 21
+ 3
],
"9": [
- 2,
- 19
+ 0,
+ 3
],
"10": [
0,
- 21
+ 3
],
"11": [
- 2,
- 19
+ 0,
+ 3
]
}
},
@@ -3780,88 +3780,88 @@
}
},
"s": {
- "0": 9,
- "1": 0,
+ "0": 5,
+ "1": 1,
"2": 0,
- "3": 0,
+ "3": 1,
"4": 0,
- "5": 0,
- "6": 0,
+ "5": 1,
+ "6": 1,
"7": 0,
"8": 0,
"9": 0,
- "10": 9,
+ "10": 5,
"11": 0,
"12": 0,
"13": 0,
"14": 0,
- "15": 9,
+ "15": 5,
"16": 0,
"17": 0,
"18": 0,
"19": 0,
- "20": 9,
+ "20": 5,
"21": 0,
"22": 0,
- "23": 9,
+ "23": 5,
"24": 0,
- "25": 9,
+ "25": 5,
"26": 0,
- "27": 9,
+ "27": 5,
"28": 0,
- "29": 9,
+ "29": 5,
"30": 0,
"31": 0,
"32": 0,
"33": 0,
"34": 0,
- "35": 9,
+ "35": 5,
"36": 0,
"37": 0,
"38": 0,
- "39": 9,
+ "39": 5,
"40": 0,
"41": 0,
"42": 0,
- "43": 9,
+ "43": 5,
"44": 0,
"45": 0,
"46": 0,
"47": 0,
"48": 0,
- "49": 9,
+ "49": 5,
"50": 0,
"51": 0,
- "52": 9,
+ "52": 5,
"53": 0,
"54": 0,
- "55": 9,
+ "55": 5,
"56": 0,
"57": 0,
- "58": 9,
+ "58": 5,
"59": 0,
"60": 0,
- "61": 9,
+ "61": 5,
"62": 0,
"63": 0,
"64": 0,
"65": 0,
"66": 0,
"67": 0,
- "68": 9,
+ "68": 5,
"69": 0,
"70": 0,
"71": 0,
"72": 0,
"73": 0,
"74": 0,
- "75": 9,
+ "75": 5,
"76": 0,
- "77": 9,
- "78": 9,
- "79": 9,
- "80": 0,
- "81": 0,
+ "77": 5,
+ "78": 5,
+ "79": 5,
+ "80": 1,
+ "81": 1,
"82": 0,
"83": 0,
"84": 0,
@@ -3878,37 +3878,37 @@
"95": 0,
"96": 0,
"97": 0,
- "98": 0,
- "99": 0,
- "100": 0,
- "101": 0,
- "102": 9,
- "103": 0,
- "104": 0,
+ "98": 1,
+ "99": 1,
+ "100": 1,
+ "101": 1,
+ "102": 5,
+ "103": 1,
+ "104": 1,
"105": 0,
- "106": 0,
- "107": 0,
- "108": 0,
+ "106": 1,
+ "107": 1,
+ "108": 1,
"109": 0,
"110": 0,
"111": 0,
"112": 0,
- "113": 0,
- "114": 0,
- "115": 0,
- "116": 0,
- "117": 0,
- "118": 0,
- "119": 0,
+ "113": 1,
+ "114": 1,
+ "115": 1,
+ "116": 1,
+ "117": 1,
+ "118": 1,
+ "119": 1,
"120": 0,
"121": 0,
"122": 0,
- "123": 0,
- "124": 0,
- "125": 0
+ "123": 1,
+ "124": 1,
+ "125": 1
},
"f": {
- "0": 0,
+ "0": 1,
"1": 0,
"2": 0,
"3": 0,
@@ -3926,29 +3926,29 @@
"15": 0,
"16": 0,
"17": 0,
- "18": 0,
- "19": 0
+ "18": 1,
+ "19": 1
},
"b": {
"0": [
0,
- 0
+ 1
],
"1": [
0,
- 0
+ 1
],
"2": [
- 0,
+ 1,
0
],
"3": [
- 0,
+ 1,
0
],
"4": [
- 0,
- 0
+ 1,
+ 1
],
"5": [
0,
@@ -4048,39 +4048,39 @@
0,
0,
0,
- 0
+ 1
],
"29": [
- 0
+ 1
],
"30": [
0,
- 0
+ 1
],
"31": [
0,
- 0
+ 1
],
"32": [
0
],
"33": [
- 0,
+ 1,
0
],
"34": [
- 0,
+ 1,
0
],
"35": [
- 0
+ 1
],
"36": [
- 0,
+ 1,
0
],
"37": [
- 0
+ 1
]
}
},
@@ -4369,35 +4369,35 @@
}
},
"s": {
- "0": 81,
- "1": 9,
+ "0": 45,
+ "1": 5,
"2": 0,
"3": 0,
- "4": 9,
- "5": 9,
- "6": 1,
- "7": 1,
- "8": 9,
- "9": 18
+ "4": 5,
+ "5": 5,
+ "6": 0,
+ "7": 0,
+ "8": 5,
+ "9": 10
},
"f": {
- "0": 18,
- "1": 1
+ "0": 10,
+ "1": 0
},
"b": {
"0": [
- 18,
- 9
+ 10,
+ 5
],
"1": [
- 9
+ 5
],
"2": [
0,
0
],
"3": [
- 1,
+ 0,
0
]
}
@@ -6058,17 +6058,17 @@
}
},
"s": {
- "0": 9,
- "1": 6,
- "2": 6,
- "3": 6,
- "4": 6,
- "5": 6,
- "6": 6,
+ "0": 5,
+ "1": 44,
+ "2": 44,
+ "3": 44,
+ "4": 44,
+ "5": 44,
+ "6": 44,
"7": 6,
"8": 6,
"9": 3,
- "10": 6,
+ "10": 44,
"11": 0,
"12": 0,
"13": 0,
@@ -6078,44 +6078,44 @@
"17": 0,
"18": 0,
"19": 0,
- "20": 6,
- "21": 0,
+ "20": 44,
+ "21": 34,
"22": 0,
"23": 0,
"24": 0,
"25": 0,
- "26": 0,
- "27": 0,
- "28": 0,
- "29": 6,
- "30": 0,
+ "26": 34,
+ "27": 34,
+ "28": 34,
+ "29": 44,
+ "30": 3,
"31": 0,
- "32": 0,
- "33": 0,
- "34": 6,
- "35": 0,
- "36": 0,
- "37": 0,
- "38": 0,
- "39": 0,
- "40": 0,
- "41": 6,
+ "32": 3,
+ "33": 3,
+ "34": 44,
+ "35": 1,
+ "36": 1,
+ "37": 1,
+ "38": 1,
+ "39": 1,
+ "40": 1,
+ "41": 44,
"42": 0,
"43": 0,
"44": 0,
- "45": 6,
+ "45": 44,
"46": 0,
"47": 0,
- "48": 6,
- "49": 6,
- "50": 6,
- "51": 6,
- "52": 0,
- "53": 9,
- "54": 18
+ "48": 44,
+ "49": 44,
+ "50": 44,
+ "51": 44,
+ "52": 34,
+ "53": 5,
+ "54": 10
},
"f": {
- "0": 6,
+ "0": 44,
"1": 6,
"2": 3,
"3": 0,
@@ -6123,21 +6123,21 @@
"5": 0,
"6": 0,
"7": 0,
- "8": 0,
- "9": 0,
- "10": 0,
+ "8": 34,
+ "9": 3,
+ "10": 1,
"11": 0,
"12": 0,
- "13": 0
+ "13": 34
},
"b": {
"0": [
- 6,
- 3
+ 44,
+ 41
],
"1": [
- 6,
- 0
+ 44,
+ 41
],
"2": [
6,
@@ -6161,22 +6161,22 @@
0
],
"8": [
- 0
+ 34
],
"9": [
0
],
"10": [
- 0
+ 3
],
"11": [
- 0
+ 1
],
"12": [
- 0
+ 1
],
"13": [
- 0
+ 1
],
"14": [
0,
@@ -6186,40 +6186,40 @@
0
],
"16": [
- 0,
- 6
+ 2,
+ 42
],
"17": [
- 6,
- 6
+ 44,
+ 44
],
"18": [
- 6,
- 6
+ 44,
+ 44
],
"19": [
- 6,
+ 44,
0
],
"20": [
- 1,
- 5
+ 0,
+ 44
],
"21": [
- 1,
- 5
+ 0,
+ 44
],
"22": [
0,
- 6
+ 44
],
"23": [
0,
- 6
+ 44
],
"24": [
- 0,
- 6
+ 2,
+ 42
]
}
},
@@ -6458,30 +6458,30 @@
}
},
"s": {
- "0": 9,
- "1": 9,
- "2": 9,
- "3": 9,
- "4": 9,
- "5": 9,
- "6": 9,
- "7": 9,
- "8": 9,
- "9": 9,
- "10": 9
+ "0": 5,
+ "1": 5,
+ "2": 5,
+ "3": 5,
+ "4": 5,
+ "5": 5,
+ "6": 5,
+ "7": 5,
+ "8": 5,
+ "9": 5,
+ "10": 5
},
"f": {
- "0": 9,
- "1": 9
+ "0": 5,
+ "1": 5
},
"b": {
"0": [
- 9,
- 9
+ 5,
+ 5
],
"1": [
- 9,
- 9
+ 5,
+ 5
]
}
}
diff --git a/src/assets/css/watch-tailwind.css b/src/assets/css/watch-tailwind.css
index 6fb0e71..f3592d9 100644
--- a/src/assets/css/watch-tailwind.css
+++ b/src/assets/css/watch-tailwind.css
@@ -542,14 +542,6 @@ video {
position: relative;
}
-.left-4 {
- left: 1rem;
-}
-
-.right-4 {
- right: 1rem;
-}
-
.right-6 {
right: 1.5rem;
}
@@ -586,11 +578,6 @@ video {
border-radius: 0.5rem;
}
-.bg-sky-400 {
- --tw-bg-opacity: 1;
- background-color: rgb(56 189 248 / var(--tw-bg-opacity));
-}
-
.text-center {
text-align: center;
}
@@ -609,6 +596,11 @@ video {
color: rgb(0 0 0 / var(--tw-text-opacity));
}
+.text-primary-5 {
+ --tw-text-opacity: 1;
+ color: rgb(247 249 255 / var(--tw-text-opacity));
+}
+
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/src/lib/app-button/styles.module.css b/src/lib/app-button/styles.module.css
index de05ea6..13ec9f9 100644
--- a/src/lib/app-button/styles.module.css
+++ b/src/lib/app-button/styles.module.css
@@ -4,7 +4,6 @@
@apply absolute;
}
.title {
- @apply w-full text-center leading-6;
}
.righticonClass {
@apply absolute;
diff --git a/src/lib/app-textbox/styles.module.css b/src/lib/app-textbox/styles.module.css
index 069b4d9..17f914a 100644
--- a/src/lib/app-textbox/styles.module.css
+++ b/src/lib/app-textbox/styles.module.css
@@ -20,7 +20,7 @@
@apply text-neutral-90 text-opacity-50;
}
.errorTextClass {
- @apply text-critical-50;
+ @apply text-critical-60;
}
&.critical {
.inputClass {
diff --git a/src/stories/app-button.mdx b/src/stories/app-button.mdx
index d2b64ba..1d1a385 100644
--- a/src/stories/app-button.mdx
+++ b/src/stories/app-button.mdx
@@ -13,5 +13,5 @@ markdown documentation.
diff --git a/src/stories/app-button.stories.tsx b/src/stories/app-button.stories.tsx
index a3c8266..47d7eb8 100644
--- a/src/stories/app-button.stories.tsx
+++ b/src/stories/app-button.stories.tsx
@@ -1,26 +1,19 @@
import { expect } from '@storybook/jest';
-import { AppButton } from '../lib';
-import { ButtonThemes } from '../lib/types/enums';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { AppButton, ButtonThemes } from '../lib';
+import type { Meta, StoryObj } from '@storybook/react';
+import { waitFor, within, userEvent } from '@storybook/testing-library';
+
+const meta: Meta = {
+ component: AppButton,
+};
+
+export default meta;
+type Story = StoryObj;
const defaultProps = {
customHeight: '75px',
customWidth: '250px',
};
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
- title: 'AppButton',
- component: AppButton,
- argTypes: {
- theme: {
- options: ButtonThemes,
- control: { type: 'select' },
- },
- title: 'Button',
- },
-};
-
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args: any): JSX.Element => ;
@@ -29,75 +22,37 @@ export const Primary: any = Template.bind({});
Primary.args = {
theme: ButtonThemes.primary,
title: 'Button',
- customTitleClass: 'text-white',
- ...defaultProps,
-};
-
-export const Critical: any = Template.bind({});
-Critical.args = {
- theme: ButtonThemes.critical,
- title: 'Critical Button',
- customBtnClass: 'rounded-lg active:bg-violet-600',
- customTitleClass: 'text-black font-bold',
- ...defaultProps,
-};
-
-export const Disabled: any = Template.bind({});
-Disabled.args = {
- theme: 'disable',
- title: 'Disabled Button',
- customButtonClass: 'bg-sky-400',
- ...defaultProps,
-};
-
-export const Link: any = Template.bind({});
-Link.args = {
- theme: 'link',
- title: 'Link Button',
- ...defaultProps,
-};
-
-export const WithIcon: any = Template.bind({});
-WithIcon.args = {
- theme: ButtonThemes.primary,
- title: 'Link Button',
+ customTitleClass: 'text-primary-5',
...defaultProps,
- customButtonClass: 'relative',
- customTitleClass: 'text-white',
- customLeftIconClass: 'absolute left-4',
- customRightIconClass: 'absolute right-4',
- showLeftIcon: true,
- showRightIcon: true,
- leftIcon: A,
- rightIcon: A,
};
/*
* See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
* to learn more about using the canvasElement to query the DOM
*/
-export const Clicked: any = Template.bind({});
-Clicked.args = {
- title: 'With Click Interaction',
- customWidth: '400px',
- customTitleClass: 'font-bold text-white',
-};
-
-Clicked.play = async ({
- args,
- canvasElement,
- step,
-}: {
- args: any;
- canvasElement: any;
- step: any;
-}): Promise => {
- // Starts querying the component from its root element
- const canvas = within(canvasElement);
-
- await step('on button click', async () => {
- await userEvent.click(canvas.getByRole('button'));
- });
-
- await waitFor(() => expect(args.onClick).toHaveBeenCalled());
+export const Clicked: Story = {
+ args: {
+ title: 'With Click Interaction',
+ customWidth: '420px',
+ customTitleClass: 'font-bold text-white',
+ theme: ButtonThemes.primary,
+ },
+ play: async ({
+ args,
+ canvasElement,
+ step,
+ }: {
+ args: any;
+ canvasElement: any;
+ step: any;
+ }): Promise => {
+ // Starts querying the component from its root element
+ const canvas = within(canvasElement);
+
+ await step('on button click', async () => {
+ await userEvent.click(canvas.getByRole('button'));
+ });
+
+ await waitFor(() => expect(args.onClick).toHaveBeenCalled());
+ },
};
diff --git a/src/stories/app-textbox.mdx b/src/stories/app-textbox.mdx
new file mode 100644
index 0000000..c64ac79
--- /dev/null
+++ b/src/stories/app-textbox.mdx
@@ -0,0 +1,21 @@
+import { Meta, Story, Canvas } from '@storybook/blocks';
+import * as AppAppTextBoxStories from './app-textbox.stories';
+
+
+
+# AppAppTextBox
+
+With `MDX` we can include a story for `AppAppTextBox` right in the middle of our
+markdown documentation.
+
+
+
+
+
+
diff --git a/src/stories/app-textbox.stories.tsx b/src/stories/app-textbox.stories.tsx
index efd94fd..d2f84e9 100644
--- a/src/stories/app-textbox.stories.tsx
+++ b/src/stories/app-textbox.stories.tsx
@@ -1,22 +1,22 @@
-import { AppTextBox } from '../lib';
+import { expect } from '@storybook/jest';
+import { AppTextBox } from '../lib/index.ts';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent, waitFor } from '@storybook/testing-library';
+
+const meta: Meta = {
+ component: AppTextBox,
+};
+
+export default meta;
+type Story = StoryObj;
const defaultProps = {
inputType: 'text',
};
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
- title: 'AppTextBox',
- component: AppTextBox,
- argTypes: {
- ...defaultProps,
- },
-};
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args: any): JSX.Element => ;
export const Plain: any = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
Plain.args = {
placeholder: 'enter your name',
value: 'Default',
@@ -25,37 +25,52 @@ Plain.args = {
...defaultProps,
};
-export const WithValidations: any = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-WithValidations.args = {
- placeholder: 'blur to validate',
- value: '',
- id: 'withvalidations',
- validations: [
- {
- name: 'required',
- message: 'name is required',
- },
- ],
- validateOnBlur: true,
- ...defaultProps,
- label: 'With Validations',
+export const OnInput: Story = {
+ args: {
+ value: '',
+ label: 'text-box',
+ id: 'text-box',
+ },
+ play: async ({ args, canvasElement }): Promise => {
+ const canvas = within(canvasElement);
+
+ const TextInput = canvas.getByLabelText('text-box', {
+ selector: 'input',
+ });
+
+ await userEvent.type(TextInput, 'i am text element', {
+ delay: 100,
+ });
+ await waitFor(() => expect(args.onChange).toHaveBeenCalled());
+ },
};
-export const PasswordField: any = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-PasswordField.args = {
- placeholder: 'password type textbox',
- value: '',
- id: 'password',
- validations: [
- {
- name: 'required',
- message: 'password is required',
- },
- ],
- validateOnBlur: true,
- inputType: 'password',
- label: 'password',
- showPasswordToggleIcon: true,
+export const OnBlurError: Story = {
+ args: {
+ value: '',
+ label: 'blur-box',
+ id: 'blur-box',
+ autoFocus: true,
+ validateOnBlur: true,
+ validations: [
+ {
+ name: 'required',
+ message: 'value is required',
+ },
+ ],
+ },
+ play: async ({ args, canvasElement }): Promise => {
+ const canvas = within(canvasElement);
+
+ const Input = canvas.getByLabelText('blur-box', {
+ selector: 'input',
+ });
+
+ await waitFor(() => Input.blur());
+ await waitFor(() => expect(args.onFocus).toHaveBeenCalled());
+ await waitFor(() => expect(args.onBlur).toHaveBeenCalled());
+ await waitFor(() => expect(canvas.getByText('value is required')).toBeTruthy(), {
+ timeout: 300,
+ });
+ },
};