build: upgrade ant design to v5

apps/app/components/NinjaForm/index.js

@@ -14,7 +14,7 @@ import {
   Typography,
   notification,
 } from "antd";
-import moment from "moment";
+import dayjs from "dayjs";
 import { CloseOutlined, SaveOutlined } from "@ant-design/icons";
 import * as api from "bokkenjs";
 import { notifyError, notifyInfo } from "~/components/Notification";
@@ -191,7 +191,7 @@ export default function NinjaForm({ id }) {
               name="ninja[birthday]"
               rules={[{ required: true }]}
               initialValue={
-                id && ninja ? moment(ninja.birthday, "YYYY-MM-DD") : null
+                id && ninja ? dayjs(ninja.birthday, "YYYY-MM-DD") : null
               }
             >
               <DatePicker />

apps/app/components/Profile/index.tsx

@@ -11,8 +11,6 @@ import {
   Typography,
 } from "antd";
 import { ClockCircleOutlined, UserOutlined } from "@ant-design/icons";
-import moment from "moment";
-import "moment/locale/pt";
 import Badge from "~/components/Badge";
 import Belt from "~/components/Belt";
 import Document from "~/components/Document";
@@ -22,6 +20,11 @@ import { notifyError, notifyInfo } from "~/components/Notification";
 import styles from "./style.module.css";
 import { EUser } from "bokkenjs";
 
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+dayjs.extend(relativeTime);
+import "dayjs/locale/pt";
+
 import { BsFileEarmarkPersonFill } from "react-icons/bs";
 
 import { getIcon } from "~/lib/utils";
@@ -96,7 +99,7 @@ function Profile({ id, role }: Props) {
   }, [id, role]);
 
   useEffect(() => {
-    setDate(moment(info.since).format("DD/MM/YYYY"));
+    setDate(dayjs(info.since).format("DD/MM/YYYY"));
   }, [info]);
 
   return (
@@ -174,7 +177,7 @@ function Profile({ id, role }: Props) {
           <Timeline mode="alternate">
             <Timeline.Item dot={<ClockCircleOutlined />}>
               Registou-se na plataforma{" "}
-              {moment(info.since).locale("pt").fromNow()}
+              {dayjs(info.since).locale("pt").fromNow()}
             </Timeline.Item>
           </Timeline>
         </TabPane>

apps/app/configs/theme.ts

@@ -0,0 +1,6 @@
+export default {
+  token: {
+    colorPrimary: "#722ed1",
+    colorInfo: "#722ed1",
+  },
+};

apps/app/layouts/AppLayout/index.js

@@ -31,7 +31,7 @@ function AppLayout({ children, hidePrimaryMenu = false }) {
       setCollapsed(false);
       return (
         <Drawer
-          visible={drawerVisible}
+          open={drawerVisible}
           placement="left"
           bodyStyle={{ padding: 0 }}
           onClose={() => setDrawerVisible(false)}

apps/app/package.json

@@ -3,26 +3,23 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "npm run less:build && npm run next:dev",
-    "build": "npm run less:build && npm run next:build",
+    "dev": "next dev --port 3002",
+    "build": "next build",
     "start": "next start",
     "lint": "npm run lint:fix",
     "lint:fix": "next lint --fix",
-    "lint:check": "next lint",
-    "next": "next",
-    "next:build": "next build",
-    "next:dev": "next dev --port 3002",
-    "less:build": "lessc --js styles/antd.less styles/antd.css"
+    "lint:check": "next lint"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.5.6",
     "@ant-design/icons": "^4.7.0",
     "@coderdojobraga/ui": "*",
     "@netlify/plugin-nextjs": "^4.29.2",
-    "antd": "^4.22.8",
+    "antd": "^5.0.0",
     "antd-img-crop": "^4.7.0",
     "bokkenjs": "*",
+    "dayjs": "^1.11.7",
     "lodash-es": "^4.17.21",
-    "moment": "^2.29.4",
     "next": "^12.3.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -36,12 +33,9 @@
     "@types/node": "^17.0.12",
     "@types/react": "17.0.48",
     "@types/react-highlight-words": "^0.16.4",
-    "autoprefixer": "^10.4.8",
     "eslint": "^8.23.0",
     "eslint-config-coderdojobraga": "*",
-    "less": "^4.1.3",
     "next-transpile-modules": "9.0.0",
-    "tailwind-config-coderdojobraga": "*",
     "tsconfig": "*",
     "typescript": "^4.5.3"
   }

apps/app/pages/_app.tsx

@@ -8,6 +8,8 @@ import { AuthProvider, ThemeProvider } from "@coderdojobraga/ui";
 
 import "~/styles/globals.css";
 
+import theme from "~/configs/theme";
+
 const queryClient = new QueryClient();
 
 function Shuriken({ Component, pageProps }: AppProps) {
@@ -64,7 +66,7 @@ function Shuriken({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>
-        <ConfigProvider form={{ validateMessages }} locale={ptPT}>
+        <ConfigProvider form={{ validateMessages }} locale={ptPT} theme={theme}>
           <AuthProvider>
             <Head>
               <title>CoderDojo Braga</title>

apps/app/pages/index.tsx

@@ -10,7 +10,7 @@ import Ninja from "~/components/Ninja";
 import { useEvents } from "~/hooks/events";
 import { notifyError, notifyInfo } from "~/components/Notification";
 import styles from "~/styles/Dashboard.module.css";
-import moment from "moment";
+import dayjs from "dayjs";
 
 const { Title } = Typography;
 
@@ -23,7 +23,7 @@ function Dashboard() {
   const { data: badges, isLoading: isLoadingBadges } = useBadges();
 
   const nextEvent = () => {
-    const cur = moment();
+    const cur = dayjs();
 
     const sorted_events = events
       .filter((e: any) => cur.diff(e.start_time) < 0)

apps/app/pages/lecture/[id].tsx

@@ -6,7 +6,7 @@ import * as api from "bokkenjs";
 import { useAuth } from "@coderdojobraga/ui";
 import { withAuth } from "~/components/Auth";
 import AppLayout from "~/layouts/AppLayout";
-import moment from "moment";
+import dayjs from "dayjs";
 import { EUser } from "bokkenjs";
 import { notifyError, notifyInfo } from "~/components/Notification";
 
@@ -105,7 +105,7 @@ function Lectures() {
           <Col>
             <Text>
               {!lecture.event ||
-                moment(new Date(lecture.event.start_time)).format("DD/MM/YYYY")}
+                dayjs(new Date(lecture.event.start_time)).format("DD/MM/YYYY")}
             </Text>
           </Col>
         </Row>

apps/app/pages/lectures/[role]/[id].tsx

@@ -6,7 +6,7 @@ import { CalendarOutlined, EditOutlined } from "@ant-design/icons";
 import { withAuth } from "~/components/Auth";
 import AppLayout from "~/layouts/AppLayout";
 import * as api from "bokkenjs";
-import moment from "moment";
+import dayjs from "dayjs";
 import { EUser } from "bokkenjs";
 import { notifyError } from "~/components/Notification";
 
@@ -94,7 +94,7 @@ function Lectures() {
               </Col>
               <Col>
                 <Text>
-                  {moment(new Date(lecture.event.start_time)).format(
+                  {dayjs(new Date(lecture.event.start_time)).format(
                     "DD/MM/YYYY"
                   )}
                 </Text>

apps/app/pages/settings.tsx

@@ -13,7 +13,7 @@ import {
   Typography,
   Upload,
 } from "antd";
-import moment from "moment";
+import dayjs from "dayjs";
 import {
   MinusCircleOutlined,
   PlusOutlined,
@@ -296,8 +296,8 @@ function Settings() {
               <DatePicker
                 showToday={false}
                 defaultValue={
-                  (user?.birthday && moment(user.birthday, "YYYY-MM-DD")) ||
-                  moment()
+                  (user?.birthday && dayjs(user.birthday, "YYYY-MM-DD")) ||
+                  dayjs()
                 }
               />
             </Form.Item>

apps/app/styles/globals.css

@@ -1,7 +1,3 @@
-@import "~/styles/tailwind.css";
-
-@import "~/styles/antd.css";
-
 html {
   overflow-x: hidden;
 }