From 38cef2af67d83cb60f3012e57be3f1d463bf286c Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Sat, 5 Jul 2025 01:22:53 +0100 Subject: [PATCH 01/10] feat: lable component done --- src/app/components/label_component .tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/app/components/label_component .tsx diff --git a/src/app/components/label_component .tsx b/src/app/components/label_component .tsx new file mode 100644 index 0000000..d122b3b --- /dev/null +++ b/src/app/components/label_component .tsx @@ -0,0 +1,10 @@ +import React, { ReactNode } from 'react'; + +const Label = ({ children, disabled = false }: { children: ReactNode; disabled?: boolean }) => { + return ( + + {children} + + ); +}; +export default Label; \ No newline at end of file From eec575287cd9f81e542c306454e60988874f3234 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Tue, 8 Jul 2025 23:15:35 +0100 Subject: [PATCH 02/10] feat: review --- src/app/components/label_component .tsx | 10 ---------- src/app/components/label_component.tsx | 20 ++++++++++++++++++++ 2 files changed, 20 insertions(+), 10 deletions(-) delete mode 100644 src/app/components/label_component .tsx create mode 100644 src/app/components/label_component.tsx diff --git a/src/app/components/label_component .tsx b/src/app/components/label_component .tsx deleted file mode 100644 index d122b3b..0000000 --- a/src/app/components/label_component .tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { ReactNode } from 'react'; - -const Label = ({ children, disabled = false }: { children: ReactNode; disabled?: boolean }) => { - return ( - - {children} - - ); -}; -export default Label; \ No newline at end of file diff --git a/src/app/components/label_component.tsx b/src/app/components/label_component.tsx new file mode 100644 index 0000000..0620095 --- /dev/null +++ b/src/app/components/label_component.tsx @@ -0,0 +1,20 @@ +import { ReactNode } from 'react'; + +interface ILabelProps { + children: ReactNode; + disabled?: boolean; + htmlFor?: string; +} + +const Label = ({ children, disabled = false, htmlFor }: ILabelProps) => { + return ( + + ); +}; + +export default Label; \ No newline at end of file From c6cb47459836ab5abf2b38074c04cd25fcfb6875 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Tue, 8 Jul 2025 23:45:52 +0100 Subject: [PATCH 03/10] format --- src/app/components/label_component.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/components/label_component.tsx b/src/app/components/label_component.tsx index 0620095..24edfef 100644 --- a/src/app/components/label_component.tsx +++ b/src/app/components/label_component.tsx @@ -1,20 +1,20 @@ -import { ReactNode } from 'react'; +import { ReactNode } from "react"; interface ILabelProps { children: ReactNode; disabled?: boolean; - htmlFor?: string; + htmlFor?: string; } const Label = ({ children, disabled = false, htmlFor }: ILabelProps) => { return ( ); }; -export default Label; \ No newline at end of file +export default Label; From 6521f6bfbfb1aa15720171fc0537a48558f6ee03 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Thu, 10 Jul 2025 21:54:24 +0100 Subject: [PATCH 04/10] feat: component in storybook --- src/stories/Label.stories.ts | 47 ++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/stories/Label.stories.ts diff --git a/src/stories/Label.stories.ts b/src/stories/Label.stories.ts new file mode 100644 index 0000000..3c5ea09 --- /dev/null +++ b/src/stories/Label.stories.ts @@ -0,0 +1,47 @@ +import type { Meta, StoryObj } from '@storybook/nextjs-vite'; + +import { fn } from 'storybook/test'; + +import Label from '../app/components/label_component'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +const meta = { + title: 'Example/Label', + component: Label, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + argTypes: { + disabled: { control: 'boolean' }, + }, + // Use `fn` to spy on any callbacks + args: {}, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Default: Story = { + args: { + children: 'Label', + }, +}; + +export const Disabled: Story = { + args: { + children: 'Label', + disabled: true, + }, +}; + +export const WithHtmlFor: Story = { + args: { + children: 'Label', + htmlFor: 'input-example', + }, +}; \ No newline at end of file From 66055e4bc414fa62aaaf6b7233b8adb8d63ec2eb Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Thu, 10 Jul 2025 21:56:33 +0100 Subject: [PATCH 05/10] feat: pass the ci --- src/stories/Label.stories.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/stories/Label.stories.ts b/src/stories/Label.stories.ts index 3c5ea09..4a602f7 100644 --- a/src/stories/Label.stories.ts +++ b/src/stories/Label.stories.ts @@ -1,7 +1,5 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'; -import { fn } from 'storybook/test'; - import Label from '../app/components/label_component'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export From d9c6fad8558a6cb564e9bcda61352d1cc07de15f Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Thu, 10 Jul 2025 22:27:51 +0100 Subject: [PATCH 06/10] feat: component in the storybook --- src/app/components/label_component.tsx | 33 ++++++++++++++++++++++--- src/stories/Label.stories.ts | 31 ++++++++++++++--------- src/stories/Label.tsx | 34 ++++++++++++++++++++++++++ src/stories/label.css | 28 +++++++++++++++++++++ 4 files changed, 111 insertions(+), 15 deletions(-) create mode 100644 src/stories/Label.tsx create mode 100644 src/stories/label.css diff --git a/src/app/components/label_component.tsx b/src/app/components/label_component.tsx index 24edfef..acd7fac 100644 --- a/src/app/components/label_component.tsx +++ b/src/app/components/label_component.tsx @@ -1,16 +1,43 @@ -import { ReactNode } from "react"; +import type { ReactNode } from "react"; interface ILabelProps { children: ReactNode; disabled?: boolean; htmlFor?: string; + /** How large should the label be? */ + size?: 'small' | 'medium' | 'large'; + /** Optional click handler */ + onClick?: () => void; } -const Label = ({ children, disabled = false, htmlFor }: ILabelProps) => { +const Label = ({ + children, + disabled = false, + htmlFor, + size = 'medium', + onClick, +}: ILabelProps) => { + const getSizeClasses = () => { + switch (size) { + case 'small': + return 'text-xs'; + case 'large': + return 'text-base'; + default: + return 'text-sm'; + } + }; + + const getColorClasses = () => { + if (disabled) return 'text-gray-400'; + return 'text-gray-700'; + }; + return ( diff --git a/src/stories/Label.stories.ts b/src/stories/Label.stories.ts index 4a602f7..c87e22b 100644 --- a/src/stories/Label.stories.ts +++ b/src/stories/Label.stories.ts @@ -1,6 +1,8 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'; -import Label from '../app/components/label_component'; +import { fn } from 'storybook/test'; + +import { Label } from './Label'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { @@ -13,33 +15,38 @@ const meta = { // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/api/argtypes - argTypes: { - disabled: { control: 'boolean' }, - }, - // Use `fn` to spy on any callbacks - args: {}, + argTypes: {}, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, } satisfies Meta; export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Default: Story = { +export const Enabled: Story = { args: { - children: 'Label', + label: 'Label', }, }; export const Disabled: Story = { args: { - children: 'Label', + label: 'Label', disabled: true, }, }; -export const WithHtmlFor: Story = { +export const Large: Story = { + args: { + size: 'large', + label: 'Label', + }, +}; + +export const Small: Story = { args: { - children: 'Label', - htmlFor: 'input-example', + size: 'small', + label: 'Label', }, }; \ No newline at end of file diff --git a/src/stories/Label.tsx b/src/stories/Label.tsx new file mode 100644 index 0000000..ec3ab4b --- /dev/null +++ b/src/stories/Label.tsx @@ -0,0 +1,34 @@ +import './label.css'; + +export interface LabelProps { + /** How large should the label be? */ + size?: 'small' | 'medium' | 'large'; + /** Label contents */ + label: string; + /** Disabled state */ + disabled?: boolean; + /** HTML for attribute */ + htmlFor?: string; + /** Optional click handler */ + onClick?: () => void; +} + +/** Primary UI component for labels */ +export const Label = ({ + size = 'medium', + disabled = false, + label, + htmlFor, + ...props +}: LabelProps) => { + const mode = disabled ? 'storybook-label--disabled' : 'storybook-label--secondary'; + return ( + + ); +}; \ No newline at end of file diff --git a/src/stories/label.css b/src/stories/label.css new file mode 100644 index 0000000..ce346c9 --- /dev/null +++ b/src/stories/label.css @@ -0,0 +1,28 @@ +.storybook-label { + display: inline-block; + cursor: pointer; + font-weight: 400; + line-height: 1.4; + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + color: #333; +} +.storybook-label--primary { + color: #555ab9; + font-weight: 600; +} +.storybook-label--secondary { + color: #666; +} +.storybook-label--disabled { + color: #999; + cursor: not-allowed; +} +.storybook-label--small { + font-size: 12px; +} +.storybook-label--medium { + font-size: 14px; +} +.storybook-label--large { + font-size: 16px; +} \ No newline at end of file From d18f3bb00f40436f2b361c29cf9d381c96168b93 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Thu, 10 Jul 2025 22:33:51 +0100 Subject: [PATCH 07/10] feat: component in the storybook --- .storybook/preview.ts | 2 ++ src/stories/Label.stories.ts | 18 ++++++++++++------ src/stories/Label.tsx | 34 ---------------------------------- src/stories/label.css | 28 ---------------------------- 4 files changed, 14 insertions(+), 68 deletions(-) delete mode 100644 src/stories/Label.tsx delete mode 100644 src/stories/label.css diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 7889553..3a72168 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,5 +1,7 @@ import type { Preview } from '@storybook/nextjs-vite' +import "../src/app/globals.css"; + const preview: Preview = { parameters: { controls: { diff --git a/src/stories/Label.stories.ts b/src/stories/Label.stories.ts index c87e22b..f1040d9 100644 --- a/src/stories/Label.stories.ts +++ b/src/stories/Label.stories.ts @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import { fn } from 'storybook/test'; -import { Label } from './Label'; +import Label from '../app/components/label_component'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { @@ -15,7 +15,13 @@ const meta = { // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/api/argtypes - argTypes: {}, + argTypes: { + disabled: { control: 'boolean' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, } satisfies Meta; @@ -26,13 +32,13 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const Enabled: Story = { args: { - label: 'Label', + children: 'Label', }, }; export const Disabled: Story = { args: { - label: 'Label', + children: 'Label', disabled: true, }, }; @@ -40,13 +46,13 @@ export const Disabled: Story = { export const Large: Story = { args: { size: 'large', - label: 'Label', + children: 'Label', }, }; export const Small: Story = { args: { size: 'small', - label: 'Label', + children: 'Label', }, }; \ No newline at end of file diff --git a/src/stories/Label.tsx b/src/stories/Label.tsx deleted file mode 100644 index ec3ab4b..0000000 --- a/src/stories/Label.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import './label.css'; - -export interface LabelProps { - /** How large should the label be? */ - size?: 'small' | 'medium' | 'large'; - /** Label contents */ - label: string; - /** Disabled state */ - disabled?: boolean; - /** HTML for attribute */ - htmlFor?: string; - /** Optional click handler */ - onClick?: () => void; -} - -/** Primary UI component for labels */ -export const Label = ({ - size = 'medium', - disabled = false, - label, - htmlFor, - ...props -}: LabelProps) => { - const mode = disabled ? 'storybook-label--disabled' : 'storybook-label--secondary'; - return ( - - ); -}; \ No newline at end of file diff --git a/src/stories/label.css b/src/stories/label.css deleted file mode 100644 index ce346c9..0000000 --- a/src/stories/label.css +++ /dev/null @@ -1,28 +0,0 @@ -.storybook-label { - display: inline-block; - cursor: pointer; - font-weight: 400; - line-height: 1.4; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: #333; -} -.storybook-label--primary { - color: #555ab9; - font-weight: 600; -} -.storybook-label--secondary { - color: #666; -} -.storybook-label--disabled { - color: #999; - cursor: not-allowed; -} -.storybook-label--small { - font-size: 12px; -} -.storybook-label--medium { - font-size: 14px; -} -.storybook-label--large { - font-size: 16px; -} \ No newline at end of file From 2c0bb22b27b96b0eb468f882b63d71f69d931cc6 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Fri, 11 Jul 2025 22:29:40 +0100 Subject: [PATCH 08/10] feat:review --- src/app/components/label_component.tsx | 14 +++++--------- src/stories/Label.stories.ts | 6 ------ 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/app/components/label_component.tsx b/src/app/components/label_component.tsx index acd7fac..f85e0af 100644 --- a/src/app/components/label_component.tsx +++ b/src/app/components/label_component.tsx @@ -4,9 +4,7 @@ interface ILabelProps { children: ReactNode; disabled?: boolean; htmlFor?: string; - /** How large should the label be? */ size?: 'small' | 'medium' | 'large'; - /** Optional click handler */ onClick?: () => void; } @@ -28,16 +26,14 @@ const Label = ({ } }; - const getColorClasses = () => { - if (disabled) return 'text-gray-400'; - return 'text-gray-700'; - }; + const colorClass = disabled ? 'text-gray-400' : 'text-gray-700'; + const cursorClass = disabled ? 'cursor-not-allowed' : 'cursor-pointer'; return ( diff --git a/src/stories/Label.stories.ts b/src/stories/Label.stories.ts index f1040d9..cc6dd08 100644 --- a/src/stories/Label.stories.ts +++ b/src/stories/Label.stories.ts @@ -4,17 +4,13 @@ import { fn } from 'storybook/test'; import Label from '../app/components/label_component'; -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { title: 'Example/Label', component: Label, parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout layout: 'centered', }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], - // More on argTypes: https://storybook.js.org/docs/api/argtypes argTypes: { disabled: { control: 'boolean' }, size: { @@ -22,14 +18,12 @@ const meta = { options: ['small', 'medium', 'large'], }, }, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, } satisfies Meta; export default meta; type Story = StoryObj; -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const Enabled: Story = { args: { children: 'Label', From 44f7be88d237c46416ca0e7adf801cbc942c25eb Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Mon, 14 Jul 2025 20:55:57 +0100 Subject: [PATCH 09/10] feat: src/app/components to src/components --- src/{app => }/components/label_component.tsx | 0 src/stories/Label.stories.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/{app => }/components/label_component.tsx (100%) diff --git a/src/app/components/label_component.tsx b/src/components/label_component.tsx similarity index 100% rename from src/app/components/label_component.tsx rename to src/components/label_component.tsx diff --git a/src/stories/Label.stories.ts b/src/stories/Label.stories.ts index cc6dd08..f3f0a6b 100644 --- a/src/stories/Label.stories.ts +++ b/src/stories/Label.stories.ts @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import { fn } from 'storybook/test'; -import Label from '../app/components/label_component'; +import Label from '../components/label_component'; const meta = { title: 'Example/Label', From 7d012255a5050160b2f685877c6ef89f3098a50c Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Mon, 14 Jul 2025 21:01:22 +0100 Subject: [PATCH 10/10] feat: change title --- src/stories/Label.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Label.stories.ts b/src/stories/Label.stories.ts index f3f0a6b..699e4d3 100644 --- a/src/stories/Label.stories.ts +++ b/src/stories/Label.stories.ts @@ -5,7 +5,7 @@ import { fn } from 'storybook/test'; import Label from '../components/label_component'; const meta = { - title: 'Example/Label', + title: 'Components/Label', component: Label, parameters: { layout: 'centered',