Change name dropdown, fix url validate (#16)

Changelog.md

@@ -1,27 +1,42 @@
 <!-- markdownlint-configure-file { "MD024": { "allow_different_nesting": true } } -->
 # Changelog
 
-## v0.0.5 - DropDown (Jan 2 - 2021)
+## v0.2.0 - Checkbox (Jan 10 - 2024)
+
+### 👾 Feature
+
+- Checkbox
+- Fix name Dropdown
+- Fix build chromatic
+- New util isValidUrl
+
+## v0.1.0 - Avatar (Jan 3 - 2024)
+
+### 👾 Feature
+
+- Avatar
+
+## v0.0.5 - Dropdown (Jan 2 - 2024)
 
 ### 🐛 Bugs
 
-- DropDown - Label default value
+- Dropdown - Label default value
 - Storybook config
 - Changelog - Version in Storybook
 
-## v0.0.4 - DropDown (Jan 2 - 2021)
+## v0.0.4 - Dropdown (Jan 2 - 2021)
 
 ### 🐛 Bugs
 
 - PerDependencies
 - Update Readme.md
 - Types Controller React Hook Form
 
-## v0.0.3 - DropDown (Dec 21 - 2023)
+## v0.0.3 - Dropdown (Dec 21 - 2023)
 
 ### 👾 Feature
 
-- DropDown
+- Dropdown
 
 ### 🐛 Bugs
 

src/types/helpers/controller.types.ts

@@ -4,17 +4,17 @@ import type {
   ControllerProps as RHFControllerProps
 } from 'react-hook-form';
 
-import { DropDown, TextBox } from '@/ui/forms';
+import { Dropdown, TextBox } from '@/ui/forms';
 
 type TextBoxType = {
   as: typeof TextBox;
 } & React.ComponentProps<typeof TextBox>;
 
-type DropDownType = {
-  as: typeof DropDown;
-} & React.ComponentProps<typeof DropDown>;
+type DropdownType = {
+  as: typeof Dropdown;
+} & React.ComponentProps<typeof Dropdown>;
 
-type Inputs = TextBoxType | DropDownType;
+type Inputs = TextBoxType | DropdownType;
 
 export type ControllerType<
   TFieldValues extends FieldValues = FieldValues,

src/types/ui/forms/drop-down.types.ts → src/types/ui/forms/dropdown.types.ts

@@ -1,12 +1,12 @@
 import { TextBoxType } from './text-box.types';
 
-export interface DropDownOption {
+export interface DropdownOption {
   value: string | number;
   label: string;
 }
 
-export interface DropDownType extends TextBoxType {
-  options?: DropDownOption[];
+export interface DropdownType extends TextBoxType {
+  options?: DropdownOption[];
   onChange?: (option: React.ChangeEvent<HTMLInputElement>) => void;
   onTextChange?: (text?: string) => void;
 }

src/types/ui/forms/index.ts

@@ -1,3 +1,3 @@
 export type * from './checkbox.types';
-export type * from './drop-down.types';
+export type * from './dropdown.types';
 export type * from './text-box.types';

src/ui/components/avatar/avatar.component.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import cls from 'classnames';
 
 import type { AvatarType } from '@/types';
-import { getInitials } from '@/utils';
+import { getInitials, isValidUrl } from '@/utils';
 
 const Avatar = ({
   isOnline = false,
@@ -12,7 +12,7 @@ const Avatar = ({
   src,
   withStatus = false
 }: AvatarType) => {
-  const isUri = useMemo(() => URL.canParse(src), [src]);
+  const isUri = useMemo(() => isValidUrl(src), [src]);
 
   const letters = useMemo(() => getInitials(src), [src, isUri]);
 

src/ui/components/avatar/avatar.stories.tsx

@@ -30,8 +30,7 @@ const meta: Meta<typeof Avatar> = {
       description: 'Size',
       type: 'string',
       options: ['xs', 'sm', 'md', 'lg'],
-      control: { type: 'select' },
-      defaultValue: 'md'
+      control: { type: 'select' }
     }
   },
   args: {

src/ui/forms/drop-down/__snapshots__/drop-down.test.tsx.snap → src/ui/forms/dropdown/__snapshots__/dropdown.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<DropDown /> snapshot 1`] = `
+exports[`<Dropdown /> snapshot 1`] = `
 <div>
   <div
     class="dropdown block"
@@ -39,7 +39,7 @@ exports[`<DropDown /> snapshot 1`] = `
 </div>
 `;
 
-exports[`<DropDown /> snapshot full 1`] = `
+exports[`<Dropdown /> snapshot full 1`] = `
 <div>
   <div
     class="dropdown block"

src/ui/forms/drop-down/drop-down.component.tsx → src/ui/forms/dropdown/dropdown.component.tsx

@@ -10,9 +10,9 @@ import { FaSortDown } from 'react-icons/fa';
 import { useOnClickOutside } from 'usehooks-ts';
 
 import { TextBox } from '@/ui/forms';
-import type { DropDownOption, DropDownType, TextBoxRef } from '@/types';
+import type { DropdownOption, DropdownType, TextBoxRef } from '@/types';
 
-const DropDown = forwardRef<TextBoxRef, DropDownType>(
+const Dropdown = forwardRef<TextBoxRef, DropdownType>(
   (
     {
       name,
@@ -68,7 +68,7 @@ const DropDown = forwardRef<TextBoxRef, DropDownType>(
     }, [open, disabled]);
 
     const handleSelect = useCallback(
-      (option: DropDownOption) => {
+      (option: DropdownOption) => {
         onChange?.({
           target: { value: String(option.value) }
         } as React.ChangeEvent<HTMLInputElement>);
@@ -136,4 +136,4 @@ const DropDown = forwardRef<TextBoxRef, DropDownType>(
   }
 );
 
-export default DropDown;
+export default Dropdown;

src/ui/forms/drop-down/drop-down.stories.tsx → src/ui/forms/dropdown/dropdown.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import * as Icons from 'react-icons/fa';
 
-import DropDown from './drop-down.component';
+import Dropdown from './dropdown.component';
 
-const meta: Meta<typeof DropDown> = {
-  title: '@creativecodeco-ui/Form/DropDown',
-  component: DropDown,
+const meta: Meta<typeof Dropdown> = {
+  title: '@creativecodeco-ui/Form/Dropdown',
+  component: Dropdown,
   argTypes: {
     name: {
       description: 'Unique Name',
@@ -16,7 +16,7 @@ const meta: Meta<typeof DropDown> = {
       type: 'string'
     },
     isError: {
-      description: 'DropDown has error',
+      description: 'Dropdown has error',
       type: 'boolean'
     },
     error: {
@@ -31,8 +31,7 @@ const meta: Meta<typeof DropDown> = {
       description: 'Size',
       type: 'string',
       options: ['xs', 'sm', 'md', 'lg'],
-      control: { type: 'select' },
-      defaultValue: 'md'
+      control: { type: 'select' }
     },
     leftIcon: {
       description: 'Left Icon',
@@ -45,7 +44,7 @@ const meta: Meta<typeof DropDown> = {
     }
   },
   args: {
-    name: 'drop-down',
+    name: 'dropdown',
     size: 'md',
     options: Array.from({ length: 10 }).map((_, index) => ({
       value: index.toString(),
@@ -56,7 +55,9 @@ const meta: Meta<typeof DropDown> = {
 
 export default meta;
 
-type Story = StoryObj<typeof DropDown>;
+Dropdown.displayName = 'Dropdown';
+
+type Story = StoryObj<typeof Dropdown>;
 
 export const Primary: Story = {
   args: {}
@@ -72,7 +73,7 @@ export const WithError: Story = {
   args: {
     label: 'Label',
     isError: true,
-    error: 'Error DropDown'
+    error: 'Error Dropdown'
   }
 };
 

src/ui/forms/drop-down/drop-down.test.tsx → src/ui/forms/dropdown/dropdown.test.tsx

@@ -1,32 +1,32 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import DropDown from './drop-down.component';
+import Dropdown from './dropdown.component';
 
-import type { DropDownOption } from '@/types';
+import type { DropdownOption } from '@/types';
 
-const options = Array.from({ length: 5 }).map<DropDownOption>((_, index) => ({
+const options = Array.from({ length: 5 }).map<DropdownOption>((_, index) => ({
   value: index,
   label: `Option ${index}`
 }));
 
-describe('<DropDown />', () => {
+describe('<Dropdown />', () => {
   it('snapshot', () => {
-    const { container } = render(<DropDown name='test' />);
+    const { container } = render(<Dropdown name='test' />);
 
     expect(container).toMatchSnapshot();
   });
 
   it('snapshot full', () => {
     const { container } = render(
-      <DropDown name='test' label='Label' isError error='Error' disabled />
+      <Dropdown name='test' label='Label' isError error='Error' disabled />
     );
 
     expect(container).toMatchSnapshot();
   });
 
   it('default value', () => {
     const { getByTestId } = render(
-      <DropDown name='test' options={options} value='2' />
+      <Dropdown name='test' options={options} value='2' />
     );
 
     const control = getByTestId('test');
@@ -35,7 +35,7 @@ describe('<DropDown />', () => {
   });
 
   it('focus', () => {
-    const { getByTestId } = render(<DropDown name='test' options={options} />);
+    const { getByTestId } = render(<Dropdown name='test' options={options} />);
 
     const textBox = getByTestId('test');
 
@@ -46,7 +46,7 @@ describe('<DropDown />', () => {
 
   it('focus disabled', async () => {
     const { getByTestId } = render(
-      <DropDown name='test' options={options} disabled />
+      <Dropdown name='test' options={options} disabled />
     );
 
     const textBox = getByTestId('test');
@@ -61,7 +61,7 @@ describe('<DropDown />', () => {
     const onChangeMock = jest.fn();
 
     const { getByTestId, getByText } = render(
-      <DropDown name='test' options={options} onChange={onChangeMock} />
+      <Dropdown name='test' options={options} onChange={onChangeMock} />
     );
 
     const textBox = getByTestId('test');
@@ -77,7 +77,7 @@ describe('<DropDown />', () => {
 
   it('closes the dropdown on click outside', () => {
     const { getByTestId } = render(
-      <DropDown name='test' data-testid='textbox' options={options} />
+      <Dropdown name='test' data-testid='textbox' options={options} />
     );
 
     const textBox = getByTestId('textbox');
@@ -103,7 +103,7 @@ describe('<DropDown />', () => {
   it('handles change correctly', () => {
     const onTextChangeMock = jest.fn();
     const { getByTestId } = render(
-      <DropDown name='test' onTextChange={onTextChangeMock} options={options} />
+      <Dropdown name='test' onTextChange={onTextChangeMock} options={options} />
     );
     const textBox = getByTestId('test');
 
@@ -115,7 +115,7 @@ describe('<DropDown />', () => {
   it('handles change correctly with option', () => {
     const onTextChangeMock = jest.fn();
     const { getByTestId } = render(
-      <DropDown name='test' onTextChange={onTextChangeMock} options={options} />
+      <Dropdown name='test' onTextChange={onTextChangeMock} options={options} />
     );
     const textBox = getByTestId('test');
 

src/ui/forms/dropdown/index.ts

@@ -0,0 +1,3 @@
+import Dropdown from './dropdown.component';
+
+export { Dropdown };

src/ui/forms/index.ts

@@ -1,3 +1,3 @@
 export * from '@/ui/forms/checkbox';
-export * from '@/ui/forms/drop-down';
+export * from '@/ui/forms/dropdown';
 export * from '@/ui/forms/text-box';

src/ui/forms/text-box/text-box.stories.tsx

@@ -31,8 +31,7 @@ const meta: Meta<typeof TextBox> = {
       description: 'Size',
       type: 'string',
       options: ['xs', 'sm', 'md', 'lg'],
-      control: { type: 'select' },
-      defaultValue: 'md'
+      control: { type: 'select' }
     },
     leftIcon: {
       description: 'Left Icon',
@@ -65,6 +64,8 @@ const meta: Meta<typeof TextBox> = {
 
 export default meta;
 
+TextBox.displayName = 'TextBox';
+
 type Story = StoryObj<typeof TextBox>;
 
 export const Primary: Story = {