Skip to content

Commit d7e7d60

Browse files
jmgrd98jmgrd98
committed
button color variants
1 parent af6058e commit d7e7d60

13 files changed

+903
-42
lines changed

‎package-lock.json

Lines changed: 572 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
6+
"files": [
7+
"dist"
8+
],
9+
"main": "./dist/ui-components-lib-umd.cjs",
10+
"module": "./dist/ui-components-lib.js",
11+
"exports": {
12+
".": {
13+
"import": "./dist/ui-components-lib.js",
14+
"require": "./dist/ui-components-lib-umd.cjs"
15+
}
16+
},
617
"scripts": {
718
"dev": "vite",
819
"build": "tsc && vite build",
@@ -44,6 +55,7 @@
4455
"tailwindcss": "^3.4.4",
4556
"typescript": "^5.2.2",
4657
"vite": "^5.2.0",
58+
"vite-plugin-dts": "^3.9.1",
4759
"vite-tsconfig-paths": "^4.3.2"
4860
}
4961
}

‎src/components/Button/Button.stories.tsx

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ type Story = StoryObj<typeof meta>;
1515

1616
export const Solid: Story = {
1717
args: {
18-
title: 'Click me',
18+
children: 'Click me',
1919
variant: 'solid',
2020
},
2121
}
2222

2323
export const Outline: Story = {
2424
args: {
25-
title: 'Click me',
25+
children: 'Click me',
2626
variant: 'outline',
2727
},
2828
}
@@ -34,4 +34,76 @@ export const Ghost: Story = {
3434
},
3535
}
3636

37+
export const SuccessSolid: Story = {
38+
args: {
39+
children: 'Click me',
40+
variant: 'solid',
41+
colorScheme: 'success',
42+
},
43+
}
44+
45+
export const SuccessOutline: Story = {
46+
args: {
47+
children: 'Click me',
48+
variant: 'outline',
49+
colorScheme: 'success',
50+
},
51+
}
52+
53+
export const SuccessGhost: Story = {
54+
args: {
55+
children: 'Click me',
56+
variant: 'ghost',
57+
colorScheme: 'success',
58+
},
59+
}
60+
61+
export const DangerSolid: Story = {
62+
args: {
63+
children: 'Click me',
64+
variant: 'solid',
65+
colorScheme: 'danger',
66+
},
67+
}
68+
69+
export const DangerOutline: Story = {
70+
args: {
71+
children: 'Click me',
72+
variant: 'outline',
73+
colorScheme: 'danger',
74+
},
75+
}
76+
77+
export const DangerGhost: Story = {
78+
args: {
79+
children: 'Click me',
80+
variant: 'ghost',
81+
colorScheme: 'danger',
82+
},
83+
}
84+
85+
export const AlertSolid: Story = {
86+
args: {
87+
children: 'Click me',
88+
variant: 'solid',
89+
colorScheme: 'alert',
90+
},
91+
}
92+
93+
export const AlertOutline: Story = {
94+
args: {
95+
children: 'Click me',
96+
variant: 'outline',
97+
colorScheme: 'alert',
98+
},
99+
}
100+
101+
export const AlertGhost: Story = {
102+
args: {
103+
children: 'Click me',
104+
variant: 'ghost',
105+
colorScheme: 'alert',
106+
},
107+
}
108+
37109

‎src/components/Button/Button.tsx

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ const buttonStyles = cva([
2828
lg: 'px-6 py-3 text-lg'
2929
},
3030
colorScheme: {
31-
primary: "text-white"
31+
primary: "text-white",
32+
success: "bg-success-500 text-white",
33+
danger: "bg-danger-500 text-white",
34+
alert: "bg-yellow-500 text-black"
3235
},
3336
},
3437
compoundVariants: [
@@ -47,6 +50,51 @@ const buttonStyles = cva([
4750
colorScheme: 'primary',
4851
className: 'text-primary-600 bg-transparent hover:bg-primary-100',
4952
},
53+
{
54+
variant: 'solid',
55+
colorScheme: 'success',
56+
className: 'bg-success-500 hover:bg-success-600' // Fixed the typo here
57+
},
58+
{
59+
variant: 'outline',
60+
colorScheme: 'success',
61+
className: 'text-success-600 border-success-500 bg-transparent hover:bg-success-100',
62+
},
63+
{
64+
variant: 'ghost',
65+
colorScheme: 'success',
66+
className: 'text-success-600 bg-transparent hover:bg-success-100',
67+
},
68+
{
69+
variant: 'solid',
70+
colorScheme: 'danger',
71+
className: 'bg-danger-500 hover:bg-danger-600',
72+
},
73+
{
74+
variant: 'outline',
75+
colorScheme: 'danger',
76+
className: 'text-danger-600 border-danger-500 bg-transparent hover:bg-danger-100',
77+
},
78+
{
79+
variant: 'ghost',
80+
colorScheme: 'danger',
81+
className: 'text-danger-600 bg-transparent hover:bg-danger-100',
82+
},
83+
{
84+
variant: 'solid',
85+
colorScheme: 'alert',
86+
className: 'bg-yellow-500 hover:bg-yellow-600',
87+
},
88+
{
89+
variant: 'outline',
90+
colorScheme: 'alert',
91+
className: 'text-yellow-600 border-yellow-500 bg-transparent hover:bg-yellow-100',
92+
},
93+
{
94+
variant: 'ghost',
95+
colorScheme: 'alert',
96+
className: 'text-yellow-600 bg-transparent hover:bg-yellow-100',
97+
},
5098
],
5199
defaultVariants: {
52100
variant: "solid",
@@ -63,11 +111,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
63111
size,
64112
colorScheme,
65113
className,
114+
onClick,
66115
...props
67116
}, ref) => {
68117
return (
69-
<button ref={ref} className={cn(buttonStyles({variant, size, colorScheme}))} {...props}/>
118+
<button
119+
ref={ref}
120+
className={cn(buttonStyles({variant, size, colorScheme}))}
121+
onClick={onClick}
122+
{...props}
123+
/>
70124
)
71125
})
72126

73-
export default Button
127+
export default Button;

‎src/components/Input/Input.stories.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,18 @@ export const Date: Story = {
4141
},
4242
};
4343

44+
export const CPF: Story = {
45+
args: {
46+
type: 'cpf',
47+
placeholder: 'Digite seu CPF'
48+
}
49+
};
50+
51+
export const CNPJ: Story = {
52+
args: {
53+
type: 'cnpj',
54+
placeholder: 'Digite seu CNPJ'
55+
}
56+
}
57+
4458

‎src/components/Input/Input.tsx

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { VariantProps, cva } from "class-variance-authority";
2-
import { ComponentProps, forwardRef } from "react"
2+
import { ComponentProps, forwardRef } from "react";
33
import { cn } from "../../utils";
4+
import { Text } from "../Text/Text";
45

56
const inputStyles = cva([
67
'w-full',
@@ -10,24 +11,66 @@ const inputStyles = cva([
1011
'rounded-lg',
1112
'transition-all',
1213
'duration-100',
13-
'outlin-none',
14+
'outline-none',
1415
'focus:outline-primary-500',
1516
'focus:border-transparent',
1617
'placeholder:text-gray-400',
1718
'placeholder:text-sm',
1819
]);
1920

20-
type InputProps = ComponentProps<"input"> & VariantProps<typeof inputStyles>;
21+
type InputProps = ComponentProps<"input"> & {
22+
label?: string;
23+
} & VariantProps<typeof inputStyles>;
24+
25+
const formatCpf = (value: string) => {
26+
return value
27+
.replace(/\D/g, '')
28+
.slice(0, 11)
29+
.replace(/(\d{3})(\d)/, '$1.$2')
30+
.replace(/(\d{3})(\d)/, '$1.$2')
31+
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
32+
};
33+
34+
const formatCnpj = (value: string) => {
35+
return value
36+
.replace(/\D/g, '')
37+
.slice(0, 14)
38+
.replace(/(\d{2})(\d)/, '$1.$2')
39+
.replace(/(\d{3})(\d)/, '$1.$2')
40+
.replace(/(\d{3})(\d)/, '$1/$2')
41+
.replace(/(\d{4})(\d{1,2})$/, '$1-$2');
42+
};
2143

2244
export const Input = forwardRef<HTMLInputElement, InputProps>(({
2345
className,
46+
type,
47+
label,
48+
placeholder,
2449
...props
2550
}, ref) => {
26-
return <input
27-
ref={ref}
28-
type="text"
29-
autoComplete="off"
30-
className={cn(inputStyles({className}))}
31-
{...props}
51+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
52+
let { value } = e.target;
53+
if (type === 'cpf') {
54+
value = formatCpf(value);
55+
} else if (type === 'cnpj') {
56+
value = formatCnpj(value);
57+
}
58+
e.target.value = value;
59+
props.onChange && props.onChange(e);
60+
};
61+
62+
return (
63+
<>
64+
{label && <Text as="label" htmlFor="username" size={'sm'} weight={'medium'} className='mb-1.5'>{label}</Text>}
65+
<input
66+
ref={ref}
67+
type={type}
68+
placeholder={placeholder}
69+
autoComplete="off"
70+
className={cn(inputStyles({ className }))}
71+
onChange={handleChange}
72+
{...props}
3273
/>
33-
});
74+
</>
75+
);
76+
});

‎src/components/LoginForm/LoginForm.tsx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react'
21
import { Box } from '../Layout/Box/Box'
32
import Stack from '../Layout/Stack/Stack'
43
import { Text } from '../Text/Text'
@@ -29,26 +28,16 @@ const LoginForm = () => {
2928
Please enter your credentials to login
3029
</Text>
3130

32-
<Text as='label' htmlFor="username" size={'sm'} weight={'medium'} className='mb-1.5'>
33-
Username
34-
</Text>
3531
<Input
32+
label='Username'
3633
type='text'
3734
id='username'
3835
placeholder='Username'
3936
className='mb-4'
4037
/>
4138

42-
<Text
43-
as='label'
44-
htmlFor="password"
45-
size={'sm'}
46-
weight={'medium'}
47-
className='mb-1.5'
48-
>
49-
Password
50-
</Text>
5139
<Input
40+
label='Password'
5241
type='password'
5342
id='password'
5443
placeholder='Password'

‎src/components/Text/Text.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { cva, VariantProps } from "class-variance-authority";
2-
import { ComponentProps, forwardRef } from "react";
2+
import { forwardRef } from "react";
33
import { PolymorphicComponentPropsWithRef, PolymorphicRef } from "../../utils/types";
44
import { cn } from "../../utils";
55

@@ -64,5 +64,5 @@ export const Text = forwardRef(<C extends React.ElementType = "span">({
6464
...props
6565
}: TextProps<C>, ref?: PolymorphicRef<C>) => {
6666
const Component = as || 'span';
67-
return <Component ref={ref} className={cn(textStyles({align, size, emphasis, italic, underline, weight, className}))} {...props}/>
67+
return <Component ref={ref} className={cn(textStyles({align, size, emphasis, italic, underline, weight}), className)} {...props}/>
6868
}) as TextComponent;

‎src/components/Textarea/Textarea.stories.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { Textarea } from './Textarea';
3+
4+
const meta: Meta<typeof Textarea> = {
5+
title: 'Components/Textarea',
6+
component: Textarea,
7+
parameters: {
8+
layout: 'centered',
9+
},
10+
tags: ['autodocs'],
11+
};
12+
13+
export default meta;
14+
type Story = StoryObj<typeof meta>;
15+
16+
export const Default: Story = {
17+
args: {
18+
placeholder: "Enter text",
19+
},
20+
};
21+
22+
export const Disabled: Story = {
23+
args: {
24+
disabled: true,
25+
placeholder: "Enter text",
26+
}
27+
}
28+
29+
export const WithLabel: Story = {
30+
args: {
31+
placeholder: "Enter text",
32+
label: "Label",
33+
},
34+
}
35+
36+

0 commit comments

Comments
 (0)