Skip to content

Commit c8bb2ba

Browse files
committed
migrate nextui to heroui
1 parent e523f74 commit c8bb2ba

20 files changed

+57
-56
lines changed

app/about/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link } from '@nextui-org/link';
1+
import { Link } from '@heroui/link';
22

33
import { Page } from '@/components/layout/Page';
44

app/providers.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { NextUIProvider } from '@nextui-org/system';
3+
import { HeroUIProvider } from '@heroui/system';
44
import { useRouter } from 'next/navigation';
55
import { ThemeProvider as NextThemesProvider } from 'next-themes';
66
import { ThemeProviderProps } from 'next-themes/dist/types';
@@ -20,11 +20,11 @@ export function Providers({ children, themeProps }: ProvidersProps) {
2020

2121
return (
2222
<NuqsAdapter>
23-
<NextUIProvider navigate={router.push}>
23+
<HeroUIProvider navigate={router.push}>
2424
<NextThemesProvider {...themeProps}>
2525
<Provider store={store}>{children}</Provider>
2626
</NextThemesProvider>
27-
</NextUIProvider>
27+
</HeroUIProvider>
2828
</NuqsAdapter>
2929
);
3030
}

bun.lockb

-43.6 KB
Binary file not shown.

components/form/CustomDatePicker.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
'use client';
22

3+
import { DatePicker, DatePickerProps } from '@heroui/date-picker';
34
import { parseZonedDateTime, type ZonedDateTime, CalendarDate, type CalendarDateTime } from '@internationalized/date';
4-
import { DatePicker, DatePickerProps } from '@nextui-org/date-picker';
55
import { useState, forwardRef } from 'react';
66

77
interface IProps extends Omit<DatePickerProps, 'value' | 'onChange'> {
88
value?: string;
99
onChange: (date: string) => void;
1010
}
1111

12-
type PossibleDates = CalendarDate | CalendarDateTime | ZonedDateTime;
12+
type PossibleDates = CalendarDate | CalendarDateTime | ZonedDateTime | null;
1313

1414
/**
1515
* This custom date picker component is used
@@ -29,11 +29,16 @@ export const CustomDatePicker = forwardRef<HTMLInputElement, IProps>(
2929
const [dateISO, setDateISO] = useState(value);
3030

3131
// Handle date change
32-
const handleChangePicker = (value: PossibleDates) => {
33-
setDateRaw(value);
34-
// Expose date as ISO string to the parent form
35-
setDateISO(value.toString());
36-
onChange?.(value.toString());
32+
const handleChangePicker = (value: CalendarDate | CalendarDateTime | ZonedDateTime | null) => {
33+
if (value) {
34+
setDateRaw(value);
35+
setDateISO(value.toString());
36+
onChange?.(value.toString());
37+
} else {
38+
setDateRaw(null);
39+
setDateISO('');
40+
onChange?.('');
41+
}
3742
};
3843

3944
return [

components/layout/Heading.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { cn } from '@nextui-org/theme';
1+
import { cn } from '@heroui/theme';
22

33
import { title } from '@/components/primitives';
44

components/layout/Navbar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
'use client';
2-
import { Link } from '@nextui-org/link';
2+
import { Link } from '@heroui/link';
33
import {
44
Navbar as NextUINavbar,
55
NavbarContent,
66
NavbarMenu,
77
NavbarMenuToggle,
88
NavbarBrand,
99
NavbarItem,
10-
} from '@nextui-org/navbar';
11-
import { link as linkStyles } from '@nextui-org/theme';
10+
} from '@heroui/navbar';
11+
import { link as linkStyles } from '@heroui/theme';
1212
import clsx from 'clsx';
1313
import NextLink from 'next/link';
1414
import { useState } from 'react';

components/layout/Page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Spinner } from '@nextui-org/spinner';
1+
import { Spinner } from '@heroui/spinner';
22

33
import { Heading } from '@/components/layout/Heading';
44
import { SubHeading } from '@/components/layout/SubHeading';

components/primitives.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { tv } from '@nextui-org/theme';
1+
import { tv } from '@heroui/theme';
22

33
export const title = tv({
44
base: 'tracking-tight inline font-semibold',

components/ui/theme-switch.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { SwitchProps, useSwitch } from '@nextui-org/switch';
3+
import { SwitchProps, useSwitch } from '@heroui/switch';
44
import { useIsSSR } from '@react-aria/ssr';
55
import { VisuallyHidden } from '@react-aria/visually-hidden';
66
import clsx from 'clsx';

features/todos/components/ChangeTodoStatus.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import type { Todo } from '@prisma/client';
44

55
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@heroui/dropdown';
6-
import { Spinner } from '@nextui-org/spinner';
6+
import { Spinner } from '@heroui/spinner';
77
import { useTransition } from 'react';
88

99
import { TodoStatusName } from '@/features/todos/components/TodoStatusName';

features/todos/components/RemoveTodoButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { Button, ButtonProps } from '@nextui-org/button';
3+
import { Button, ButtonProps } from '@heroui/button';
44
import { Trash2Icon } from 'lucide-react';
55
import { useTransition } from 'react';
66

features/todos/components/TodoCreateForm.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88

99
import type { CreateTodoPayload } from '@/types/todos';
1010

11-
import { Button } from '@nextui-org/button';
12-
import { Input } from '@nextui-org/input';
11+
import { Button } from '@heroui/button';
12+
import { Input } from '@heroui/input';
1313
import { Controller } from 'react-hook-form';
1414

1515
import { CustomDatePicker } from '@/components/form/CustomDatePicker';

features/todos/components/TodoItem.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
import type { Todo } from '@prisma/client';
44

5-
import { Button } from '@nextui-org/button';
6-
import { Input } from '@nextui-org/input';
7-
import { tv, cn } from '@nextui-org/theme';
5+
import { Button } from '@heroui/button';
6+
import { Input } from '@heroui/input';
7+
import { tv, cn } from '@heroui/theme';
88
import { Check } from 'lucide-react';
99
import { useState, useRef, useTransition } from 'react';
1010

features/todos/components/TodoSearchFilters.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client';
22

3-
import { Button } from '@nextui-org/button';
4-
import { Input } from '@nextui-org/input';
5-
import { Spinner } from '@nextui-org/spinner';
3+
import { Button } from '@heroui/button';
4+
import { Input } from '@heroui/input';
5+
import { Spinner } from '@heroui/spinner';
66
import { Search, FilterX } from 'lucide-react';
77
import { useQueryState, parseAsString } from 'nuqs';
88
import { useTransition } from 'react';

features/todos/components/TodoStatusChip.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Status } from '@prisma/client';
22

3-
import { tv } from '@nextui-org/theme';
3+
import { tv } from '@heroui/theme';
44

55
interface IProps {
66
status: Status;

features/todos/components/TodoStatusName.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Status } from '@prisma/client';
22

3-
import { tv } from '@nextui-org/theme';
3+
import { tv } from '@heroui/theme';
44

55
const variants = tv({
66
base: 'size-2 rounded-full bg-foreground-100',

features/todos/components/TodoStatusSelect.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Status } from '@prisma/client';
22

3-
import { Select, SelectItem, SelectProps } from '@nextui-org/select';
3+
import { Select, SelectItem, SelectProps } from '@heroui/select';
44
import { forwardRef } from 'react';
55

66
import { TodoStatusName } from '@/features/todos/components/TodoStatusName';

features/todos/components/TodoTabs.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client';
22
import type { TodoListProps } from '@/features/todos/components/TodoList';
33

4-
import { Chip } from '@nextui-org/chip';
5-
import { Tabs, Tab } from '@nextui-org/tabs';
4+
import { Chip } from '@heroui/chip';
5+
import { Tabs, Tab } from '@heroui/tabs';
66
import { useQueryState, parseAsString } from 'nuqs';
77

88
import {

package.json

+17-19
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,25 @@
2020
"seed": "tsx prisma/seed.ts"
2121
},
2222
"dependencies": {
23-
"@heroui/dropdown": "^2.3.16",
24-
"@heroui/system": "^2.4.12",
25-
"@heroui/theme": "^2.4.12",
23+
"@heroui/dropdown": "2.3.16",
24+
"@heroui/system": "2.4.12",
25+
"@heroui/theme": "2.4.12",
2626
"@hookform/resolvers": "^3.6.0",
2727
"@internationalized/date": "^3.7.0",
28-
"@nextui-org/button": "2.2.9",
29-
"@nextui-org/chip": "^2.2.6",
30-
"@nextui-org/code": "2.2.6",
31-
"@nextui-org/date-input": "^2.3.8",
32-
"@nextui-org/date-picker": "^2.3.9",
33-
"@nextui-org/input": "2.4.8",
34-
"@nextui-org/kbd": "2.2.6",
35-
"@nextui-org/link": "2.2.7",
36-
"@nextui-org/listbox": "2.3.9",
37-
"@nextui-org/navbar": "2.2.8",
38-
"@nextui-org/select": "2.2.2",
39-
"@nextui-org/snippet": "2.2.10",
40-
"@nextui-org/switch": "2.2.8",
41-
"@nextui-org/system": "2.4.6",
42-
"@nextui-org/tabs": "^2.2.7",
43-
"@nextui-org/theme": "2.4.5",
28+
"@heroui/button": "2.2.16",
29+
"@heroui/chip": "2.2.12",
30+
"@heroui/code": "2.2.12",
31+
"@heroui/date-input": "2.3.15",
32+
"@heroui/date-picker": "2.3.16",
33+
"@heroui/input": "2.4.16",
34+
"@heroui/kbd": "2.2.12",
35+
"@heroui/link": "2.2.13",
36+
"@heroui/listbox": "2.3.15",
37+
"@heroui/navbar": "2.2.14",
38+
"@heroui/select": "2.4.16",
39+
"@heroui/snippet": "2.2.17",
40+
"@heroui/switch": "2.2.14",
41+
"@heroui/tabs": "2.2.13",
4442
"@prisma/client": "^5.15.1",
4543
"@react-aria/ssr": "3.9.7",
4644
"@react-aria/visually-hidden": "3.8.21",

tailwind.config.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,14 @@
44
* REFACTOR ALL PROJECT ACCORDINGLY
55
*/
66
const { heroui } = require('@heroui/theme');
7-
import { nextui } from '@nextui-org/theme';
87

98
/** @type {import('tailwindcss').Config} */
109
module.exports = {
1110
content: [
1211
'./features/**/*.{js,ts,jsx,tsx,mdx}',
1312
'./components/**/*.{js,ts,jsx,tsx,mdx}',
1413
'./app/**/*.{js,ts,jsx,tsx,mdx}',
15-
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
16-
'./node_modules/@heroui/theme/dist/components/(dropdown|menu|divider|popover|button|ripple|spinner).js',
14+
'./node_modules/@heroui/theme/dist/components/**/*.{js,ts,jsx,tsx}',
1715
],
1816
theme: {
1917
extend: {
@@ -24,5 +22,5 @@ module.exports = {
2422
},
2523
},
2624
darkMode: 'class',
27-
plugins: [nextui(), heroui()],
25+
plugins: [heroui()],
2826
};

0 commit comments

Comments
 (0)