From 60d6d118676b7b4fc41ab33e242cdda8e582d5e6 Mon Sep 17 00:00:00 2001 From: shubhadip Date: Sat, 21 Oct 2023 22:34:55 +0530 Subject: [PATCH] feat: new stories added --- README.md | 4 - coverage/storybook/coverage-storybook.json | 378 ++++++++++----------- src/assets/css/watch-tailwind.css | 18 +- src/lib/app-button/styles.module.css | 1 - src/lib/app-textbox/styles.module.css | 2 +- src/stories/app-button.mdx | 2 +- src/stories/app-button.stories.tsx | 117 ++----- src/stories/app-textbox.mdx | 21 ++ src/stories/app-textbox.stories.tsx | 99 +++--- 9 files changed, 310 insertions(+), 332 deletions(-) create mode 100644 src/stories/app-textbox.mdx 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, + }); + }, };