Skip to content

Commit

Permalink
add prettier for ui formating (#18)
Browse files Browse the repository at this point in the history
  • Loading branch information
jialeicui authored Feb 12, 2024
1 parent 9c2aa3f commit aa04576
Show file tree
Hide file tree
Showing 10 changed files with 111 additions and 96 deletions.
11 changes: 11 additions & 0 deletions src/server/ui/.prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = {
singleQuote: true,
jsxSingleQuote: true,
semi: false,
trailingComma: 'es5',
tabWidth: 2,
useTabs: false,
quoteProps: 'consistent',
bracketSpacing: true,
printWidth: 120,
}
1 change: 1 addition & 0 deletions src/server/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@types/react-dom": "latest",
"eslint": "latest",
"eslint-config-next": "latest",
"prettier": "^3.2.5",
"typescript": "latest"
}
}
16 changes: 8 additions & 8 deletions src/server/ui/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from 'react';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '@/theme';
import Header from "@/components/Header";
import * as React from 'react'
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
import { ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'
import theme from '@/theme'
import Header from '@/components/Header'

export default function RootLayout(props: { children: React.ReactNode }) {
return (
<html lang="zh">
<html lang='zh'>
<body>
<AppRouterCacheProvider options={{ enableCssLayer: true }}>
<ThemeProvider theme={theme}>
Expand All @@ -19,5 +19,5 @@ export default function RootLayout(props: { children: React.ReactNode }) {
</AppRouterCacheProvider>
</body>
</html>
);
)
}
20 changes: 10 additions & 10 deletions src/server/ui/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import * as React from 'react';
import Container from '@mui/material/Container';
import ChatHistory, {MessageItem} from "@/components/ChatHistory";
import * as React from 'react'
import Container from '@mui/material/Container'
import ChatHistory, { MessageItem } from '@/components/ChatHistory'

export default function Home() {
const messages: MessageItem[] = [
{message: 'Hello', timestamp: 123, role: 'user'},
{message: 'Hello from bot', timestamp: 123, role: 'assistant'}
];
const messages: MessageItem[] = [
{ message: 'Hello', timestamp: 123, role: 'user' },
{ message: 'Hello from bot', timestamp: 123, role: 'assistant' },
]
return (
<Container maxWidth="lg">
<ChatHistory messages={messages}/>
<Container maxWidth='lg'>
<ChatHistory messages={messages} />
</Container>
);
)
}
33 changes: 18 additions & 15 deletions src/server/ui/src/components/ChatHistory.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
import Message from "@/components/Message";
import Message from '@/components/Message'

export interface MessageItem {
message: string
timestamp: number
role: 'user' | 'assistant'
message: string
timestamp: number
role: 'user' | 'assistant'
}

export interface ChatHistoryProps {
messages: MessageItem[]
messages: MessageItem[]
}

export default function ChatHistory({messages}: ChatHistoryProps) {
return (
<div>
{messages.map((message, index) => (
<Message message={message.message} avatar={message.role === 'user' ? '👤' : '🤖'} key={index}
role={message.role}/>
))}
</div>
)
export default function ChatHistory({ messages }: ChatHistoryProps) {
return (
<div>
{messages.map((message, index) => (
<Message
message={message.message}
avatar={message.role === 'user' ? '👤' : '🤖'}
key={index}
role={message.role}
/>
))}
</div>
)
}

49 changes: 21 additions & 28 deletions src/server/ui/src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,24 @@
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import * as React from 'react'
import AppBar from '@mui/material/AppBar'
import Box from '@mui/material/Box'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import IconButton from '@mui/material/IconButton'
import MenuIcon from '@mui/icons-material/Menu'

export default function Header() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
LX01
</Typography>
</Toolbar>
</AppBar>
</Box>
);
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position='static'>
<Toolbar>
<IconButton size='large' edge='start' color='inherit' aria-label='menu' sx={{ mr: 2 }}>
<MenuIcon />
</IconButton>
<Typography variant='h6' component='div' sx={{ flexGrow: 1 }}>
LX01
</Typography>
</Toolbar>
</AppBar>
</Box>
)
}

43 changes: 22 additions & 21 deletions src/server/ui/src/components/Message.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,28 @@
import {ReactNode} from "react";
import { ReactNode } from 'react'

export interface MessageProps {
message: string
avatar: ReactNode
role: string
message: string
avatar: ReactNode
role: string
}

export default function Message(props: MessageProps) {
return (
<div
style={{
display: 'flex',
flexDirection: props.role === 'user' ? 'row' : 'row-reverse',
alignItems: 'center',
}}
>
{props.avatar}
<div
style={{
margin: '10px',
}}
>{props.message}</div>
</div>
)
return (
<div
style={{
display: 'flex',
flexDirection: props.role === 'user' ? 'row' : 'row-reverse',
alignItems: 'center',
}}
>
{props.avatar}
<div
style={{
margin: '10px',
}}
>
{props.message}
</div>
</div>
)
}

16 changes: 8 additions & 8 deletions src/server/ui/src/components/ProTip.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import * as React from 'react';
import Link from '@mui/material/Link';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
import Typography from '@mui/material/Typography';
import * as React from 'react'
import Link from '@mui/material/Link'
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
import Typography from '@mui/material/Typography'

function LightBulbIcon(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
<path d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z' />
</SvgIcon>
);
)
}

export default function ProTip() {
return (
<Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
<LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
{'Pro tip: See more '}
<Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>
<Link href='https://mui.com/material-ui/getting-started/templates/'>templates</Link>
{' in the Material UI documentation.'}
</Typography>
);
)
}
12 changes: 6 additions & 6 deletions src/server/ui/src/theme.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
'use client';
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';
'use client'
import { Roboto } from 'next/font/google'
import { createTheme } from '@mui/material/styles'

const roboto = Roboto({
weight: ['300', '400', '500', '700'],
subsets: ['latin'],
display: 'swap',
});
})

const theme = createTheme({
palette: {
Expand All @@ -26,6 +26,6 @@ const theme = createTheme({
},
},
},
});
})

export default theme;
export default theme
6 changes: 6 additions & 0 deletions src/server/ui/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2165,6 +2165,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==

prettier@^3.2.5:
version "3.2.5"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==

prop-types@^15.6.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
Expand Down Expand Up @@ -2397,6 +2402,7 @@ streamsearch@^1.1.0:
integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==

"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
name string-width-cjs
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down

0 comments on commit aa04576

Please sign in to comment.