From 2e0c498f00da5209bce96b9fb419c124e72dae72 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Fri, 17 May 2024 10:25:41 +0300 Subject: [PATCH] fix(invoicer) Code style & UI improvements (#5950) --- .../form-item-editable-input-text/index.tsx | 2 +- .../form/form-item-editable-select/index.tsx | 6 ++--- .../form/form-item-editable-text/index.tsx | 4 ++-- .../form-item-upload-logo-draggable/index.tsx | 4 ++-- .../form/form-item-upload-logo/index.tsx | 15 ++++-------- .../src/components/header/search/index.tsx | 4 ++-- .../src/components/header/user/index.tsx | 2 +- .../invoicer/src/components/logo/index.tsx | 4 ++-- .../invoicer/src/pages/accounts/create.tsx | 6 ++--- examples/invoicer/src/pages/accounts/list.tsx | 8 ++++--- examples/invoicer/src/pages/clients/edit.tsx | 3 +-- examples/invoicer/src/pages/clients/list.tsx | 8 ++++--- .../invoicer/src/pages/invoices/create.tsx | 2 +- examples/invoicer/src/pages/invoices/list.tsx | 4 +++- .../src/pages/invoices/show.styled.tsx | 4 ++-- examples/invoicer/src/pages/invoices/show.tsx | 23 ++++++++++--------- .../src/providers/auth-provider/index.ts | 2 +- .../src/providers/config-provider/index.tsx | 8 +++++-- examples/invoicer/src/styles/custom.css | 6 +++++ 19 files changed, 62 insertions(+), 53 deletions(-) diff --git a/examples/invoicer/src/components/form/form-item-editable-input-text/index.tsx b/examples/invoicer/src/components/form/form-item-editable-input-text/index.tsx index c63d01f8efd8..84d8c6afd6a5 100644 --- a/examples/invoicer/src/components/form/form-item-editable-input-text/index.tsx +++ b/examples/invoicer/src/components/form/form-item-editable-input-text/index.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren, useState } from "react"; +import { type PropsWithChildren, useState } from "react"; import { Button, Flex, diff --git a/examples/invoicer/src/components/form/form-item-editable-select/index.tsx b/examples/invoicer/src/components/form/form-item-editable-select/index.tsx index 3fa76b8797eb..756c8a69e756 100644 --- a/examples/invoicer/src/components/form/form-item-editable-select/index.tsx +++ b/examples/invoicer/src/components/form/form-item-editable-select/index.tsx @@ -2,13 +2,13 @@ import { Button, Flex, Form, - FormItemProps, + type FormItemProps, Select, - SelectProps, + type SelectProps, Skeleton, Typography, } from "antd"; -import { PropsWithChildren, useState } from "react"; +import { type PropsWithChildren, useState } from "react"; import { EditOutlined } from "@ant-design/icons"; import { useStyles } from "./styled"; diff --git a/examples/invoicer/src/components/form/form-item-editable-text/index.tsx b/examples/invoicer/src/components/form/form-item-editable-text/index.tsx index b821f86e48ae..b3ae8d31f49b 100644 --- a/examples/invoicer/src/components/form/form-item-editable-text/index.tsx +++ b/examples/invoicer/src/components/form/form-item-editable-text/index.tsx @@ -1,13 +1,13 @@ +import { type PropsWithChildren, useState } from "react"; import { Button, Flex, Form, - FormItemProps, + type FormItemProps, Input, Skeleton, Typography, } from "antd"; -import { PropsWithChildren, useState } from "react"; import { EditOutlined, EnterOutlined } from "@ant-design/icons"; import { useStyles } from "./styled"; diff --git a/examples/invoicer/src/components/form/form-item-upload-logo-draggable/index.tsx b/examples/invoicer/src/components/form/form-item-upload-logo-draggable/index.tsx index d8013716d6e4..c582bd5c3549 100644 --- a/examples/invoicer/src/components/form/form-item-upload-logo-draggable/index.tsx +++ b/examples/invoicer/src/components/form/form-item-upload-logo-draggable/index.tsx @@ -2,10 +2,10 @@ import { useMemo } from "react"; import { Button, Flex, Form, Upload, theme } from "antd"; import { CloudUploadOutlined, PictureOutlined } from "@ant-design/icons"; import { getValueProps } from "@refinedev/strapi-v4"; -import { RcFile, UploadChangeParam } from "antd/lib/upload"; +import type { RcFile, UploadChangeParam } from "antd/lib/upload"; import { axiosInstance } from "@/providers/axios"; import { API_URL, TOKEN_KEY } from "@/utils/constants"; -import { Media, UploadResponse } from "@/types"; +import type { Media, UploadResponse } from "@/types"; import { useStyles } from "./styled"; type Props = { diff --git a/examples/invoicer/src/components/form/form-item-upload-logo/index.tsx b/examples/invoicer/src/components/form/form-item-upload-logo/index.tsx index 9bafc37f5bb1..1d6521cb63f4 100644 --- a/examples/invoicer/src/components/form/form-item-upload-logo/index.tsx +++ b/examples/invoicer/src/components/form/form-item-upload-logo/index.tsx @@ -2,11 +2,11 @@ import { useMemo, useState } from "react"; import { Avatar, Form, Skeleton, Typography, Upload } from "antd"; import { getValueProps } from "@refinedev/strapi-v4"; import { CloudUploadOutlined } from "@ant-design/icons"; -import { RcFile } from "antd/lib/upload"; +import type { RcFile } from "antd/lib/upload"; import { axiosInstance } from "@/providers/axios"; import { getRandomColorFromString } from "@/utils/get-random-color"; import { API_URL, TOKEN_KEY } from "@/utils/constants"; -import { Media, UploadResponse } from "@/types"; +import type { Media, UploadResponse } from "@/types"; import { useStyles } from "./styled"; type Props = { @@ -83,11 +83,6 @@ export const FormItemUploadLogo = ({ } }; - console.log({ - src, - fieldValue, - }); - return (
{{label[0].toUpperCase()}} diff --git a/examples/invoicer/src/components/header/search/index.tsx b/examples/invoicer/src/components/header/search/index.tsx index 89b1e22fbfa7..5ed79f4baa26 100644 --- a/examples/invoicer/src/components/header/search/index.tsx +++ b/examples/invoicer/src/components/header/search/index.tsx @@ -4,9 +4,9 @@ import { AutoComplete, Avatar, Flex, Input, Typography } from "antd"; import { useList, useNavigation } from "@refinedev/core"; import { Link } from "react-router-dom"; import { API_URL } from "@/utils/constants"; -import { Account, Client } from "@/types"; -import { useStyles } from "./styled"; import { getRandomColorFromString } from "@/utils/get-random-color"; +import type { Account, Client } from "@/types"; +import { useStyles } from "./styled"; type Option = | (Account & { diff --git a/examples/invoicer/src/components/header/user/index.tsx b/examples/invoicer/src/components/header/user/index.tsx index a4a53d7c1d22..8a9c0609a4aa 100644 --- a/examples/invoicer/src/components/header/user/index.tsx +++ b/examples/invoicer/src/components/header/user/index.tsx @@ -1,6 +1,6 @@ import { useGetIdentity, useLogout } from "@refinedev/core"; import { Avatar, Button, Dropdown, Flex, Skeleton, Typography } from "antd"; -import { User as UserType } from "@/types"; +import type { User as UserType } from "@/types"; import { useStyles } from "./styled"; export const User = () => { diff --git a/examples/invoicer/src/components/logo/index.tsx b/examples/invoicer/src/components/logo/index.tsx index e9cbf7b32a97..a85c0ee267dd 100644 --- a/examples/invoicer/src/components/logo/index.tsx +++ b/examples/invoicer/src/components/logo/index.tsx @@ -1,6 +1,6 @@ -import { CSSProperties, SVGProps } from "react"; +import type { CSSProperties, SVGProps } from "react"; import { Flex, Typography } from "antd"; -import { TitleProps } from "antd/lib/typography/Title"; +import type { TitleProps } from "antd/lib/typography/Title"; import { IconInvoicerLogo } from "@/components/icons"; import { useStyles } from "./styled"; diff --git a/examples/invoicer/src/pages/accounts/create.tsx b/examples/invoicer/src/pages/accounts/create.tsx index 03b2de9e3783..743e538f6c5d 100644 --- a/examples/invoicer/src/pages/accounts/create.tsx +++ b/examples/invoicer/src/pages/accounts/create.tsx @@ -1,11 +1,9 @@ -import { HttpError, useGo } from "@refinedev/core"; +import { type HttpError, useGo } from "@refinedev/core"; import { useForm } from "@refinedev/antd"; import { Flex, Form, Input, Modal, Select } from "antd"; import InputMask from "react-input-mask"; -import { getValueProps } from "@refinedev/strapi-v4"; import { FormItemUploadLogoDraggable } from "@/components/form"; -import { API_URL } from "@/utils/constants"; -import { Account, AccountForm } from "@/types"; +import type { Account, AccountForm } from "@/types"; export const AccountsPageCreate = () => { const go = useGo(); diff --git a/examples/invoicer/src/pages/accounts/list.tsx b/examples/invoicer/src/pages/accounts/list.tsx index 28b97ec41e48..f1bc9b322e2f 100644 --- a/examples/invoicer/src/pages/accounts/list.tsx +++ b/examples/invoicer/src/pages/accounts/list.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react"; import { getDefaultFilter, useGo } from "@refinedev/core"; import { CreateButton, @@ -14,8 +14,8 @@ import { import { EyeOutlined, SearchOutlined } from "@ant-design/icons"; import { Avatar, Flex, Input, Select, Table, Typography } from "antd"; import { API_URL } from "@/utils/constants"; -import { Account } from "@/types"; import { getRandomColorFromString } from "@/utils/get-random-color"; +import type { Account } from "@/types"; export const AccountsPageList = ({ children }: PropsWithChildren) => { const go = useGo(); @@ -131,7 +131,9 @@ export const AccountsPageList = ({ children }: PropsWithChildren) => { src={src} shape="square" style={{ - backgroundColor: getRandomColorFromString(name), + backgroundColor: src + ? "none" + : getRandomColorFromString(name), }} > diff --git a/examples/invoicer/src/pages/clients/edit.tsx b/examples/invoicer/src/pages/clients/edit.tsx index 556e32239242..09d94a0115b3 100644 --- a/examples/invoicer/src/pages/clients/edit.tsx +++ b/examples/invoicer/src/pages/clients/edit.tsx @@ -15,7 +15,6 @@ import { ExportOutlined, BankOutlined, MailOutlined, - GlobalOutlined, EnvironmentOutlined, PhoneOutlined, ContainerOutlined, @@ -26,7 +25,7 @@ import { FormItemEditableText, FormItemEditableSelect, } from "@/components/form"; -import { Invoice } from "@/types"; +import type { Invoice } from "@/types"; export const ClientsPageEdit = () => { const { list } = useNavigation(); diff --git a/examples/invoicer/src/pages/clients/list.tsx b/examples/invoicer/src/pages/clients/list.tsx index f99a153c16e5..d7a5393409e1 100644 --- a/examples/invoicer/src/pages/clients/list.tsx +++ b/examples/invoicer/src/pages/clients/list.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren } from "react"; +import { type PropsWithChildren } from "react"; import { getDefaultFilter, useGo } from "@refinedev/core"; import { CreateButton, @@ -15,7 +15,7 @@ import { Avatar, Flex, Input, Select, Table, Typography } from "antd"; import { EyeOutlined, SearchOutlined } from "@ant-design/icons"; import { API_URL } from "@/utils/constants"; import { getRandomColorFromString } from "@/utils/get-random-color"; -import { Client } from "@/types"; +import type { Client } from "@/types"; export const ClientsPageList = ({ children }: PropsWithChildren) => { const go = useGo(); @@ -204,7 +204,9 @@ export const ClientsPageList = ({ children }: PropsWithChildren) => { src={src} shape="square" style={{ - backgroundColor: getRandomColorFromString(name), + backgroundColor: src + ? "none" + : getRandomColorFromString(name), }} > diff --git a/examples/invoicer/src/pages/invoices/create.tsx b/examples/invoicer/src/pages/invoices/create.tsx index 6da7ed25e623..feebe3c709db 100644 --- a/examples/invoicer/src/pages/invoices/create.tsx +++ b/examples/invoicer/src/pages/invoices/create.tsx @@ -14,7 +14,7 @@ import { Typography, } from "antd"; import { DeleteOutlined, PlusCircleOutlined } from "@ant-design/icons"; -import { Invoice, Service } from "@/types"; +import type { Invoice, Service } from "@/types"; import { useStyles } from "./create.styled"; export const InvoicesPageCreate = () => { diff --git a/examples/invoicer/src/pages/invoices/list.tsx b/examples/invoicer/src/pages/invoices/list.tsx index db3b566ce739..cb38fab128b5 100644 --- a/examples/invoicer/src/pages/invoices/list.tsx +++ b/examples/invoicer/src/pages/invoices/list.tsx @@ -115,7 +115,9 @@ export const InvoicePageList = () => { src={src} shape="square" style={{ - backgroundColor: getRandomColorFromString(name), + backgroundColor: src + ? "none" + : getRandomColorFromString(name || ""), }} > {name?.[0]?.toUpperCase()} diff --git a/examples/invoicer/src/pages/invoices/show.styled.tsx b/examples/invoicer/src/pages/invoices/show.styled.tsx index 0a476ff3cf9a..8d87a7945d14 100644 --- a/examples/invoicer/src/pages/invoices/show.styled.tsx +++ b/examples/invoicer/src/pages/invoices/show.styled.tsx @@ -45,11 +45,11 @@ export const useStyles = createStyles(({ token }) => { }, fromToContainer: { minHeight: "192px", - flexWrap: "nowrap", - flexFlow: "row nowrap", padding: "32px", "@media print": { + flexWrap: "nowrap", + flexFlow: "row nowrap", minHeight: "unset", padding: "32px 0", }, diff --git a/examples/invoicer/src/pages/invoices/show.tsx b/examples/invoicer/src/pages/invoices/show.tsx index 2f431e9cdcdb..ae55639eaa81 100644 --- a/examples/invoicer/src/pages/invoices/show.tsx +++ b/examples/invoicer/src/pages/invoices/show.tsx @@ -1,6 +1,7 @@ import { useShow } from "@refinedev/core"; import { FilePdfOutlined } from "@ant-design/icons"; import { + Button, Avatar, Card, Col, @@ -14,10 +15,9 @@ import { } from "antd"; import { DateField, NumberField, Show } from "@refinedev/antd"; import { API_URL } from "@/utils/constants"; -import { Invoice, Service } from "@/types"; -import { Button } from "antd"; -import { useStyles } from "./show.styled"; import { getRandomColorFromString } from "@/utils/get-random-color"; +import type { Invoice, Service } from "@/types"; +import { useStyles } from "./show.styled"; export const InvoicesPageShow = () => { const { styles } = useStyles(); @@ -30,6 +30,9 @@ export const InvoicesPageShow = () => { const invoice = queryResult?.data?.data; const loading = queryResult?.isLoading; + const logoUrl = invoice?.account?.logo?.url + ? `${API_URL}${invoice?.account?.logo?.url}` + : undefined; return ( { diff --git a/examples/invoicer/src/providers/auth-provider/index.ts b/examples/invoicer/src/providers/auth-provider/index.ts index 3982453f6e49..a8ea33919b33 100644 --- a/examples/invoicer/src/providers/auth-provider/index.ts +++ b/examples/invoicer/src/providers/auth-provider/index.ts @@ -1,4 +1,4 @@ -import { AuthProvider } from "@refinedev/core"; +import type { AuthProvider } from "@refinedev/core"; import { AuthHelper } from "@refinedev/strapi-v4"; import { API_URL, TOKEN_KEY } from "@/utils/constants"; diff --git a/examples/invoicer/src/providers/config-provider/index.tsx b/examples/invoicer/src/providers/config-provider/index.tsx index fbadf1802ec0..f42ba97d8ed0 100644 --- a/examples/invoicer/src/providers/config-provider/index.tsx +++ b/examples/invoicer/src/providers/config-provider/index.tsx @@ -1,11 +1,15 @@ import { - PropsWithChildren, + type PropsWithChildren, createContext, useContext, useEffect, useState, } from "react"; -import { ConfigProvider as AntdConfigProvider, ThemeConfig, theme } from "antd"; +import { + ConfigProvider as AntdConfigProvider, + type ThemeConfig, + theme, +} from "antd"; import { ThemeProvider } from "antd-style"; import { RefineThemes } from "@refinedev/antd"; diff --git a/examples/invoicer/src/styles/custom.css b/examples/invoicer/src/styles/custom.css index fc144e408e63..9822dd118e06 100644 --- a/examples/invoicer/src/styles/custom.css +++ b/examples/invoicer/src/styles/custom.css @@ -72,6 +72,12 @@ } @media print { + #root { + height: 100vh; + width: 100vw; + overflow: hidden; + } + .print-hidden { display: none !important; }