Skip to content

Commit 507e37f

Browse files
garyghayratgaryghayrat
authored
Fix prettier config and tailwind sorting (#19)
1 parent 9f709b8 commit 507e37f

17 files changed

+80
-110
lines changed

‎.prettier.js renamed to ‎.prettierrc.js

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
module.exports = {
22
overrides: [
33
{
4-
files: ["**/*.js", "**/*.ts", "**/*.tsx", "**/*.jsx"],
4+
files: ['**/*.js', '**/*.ts', '**/*.tsx', '**/*.jsx'],
55
options: {
66
bracketSpacing: true,
7-
trailingComma: "es5",
7+
trailingComma: 'es5',
88
tabWidth: 2,
99
printWidth: 100,
1010
singleQuote: true,
1111
semi: true,
1212
// @trivago/prettier-plugin-sort-imports options
13-
importOrder: [
14-
"^react(.*)",
15-
"next/(.*)",
16-
"<THIRD_PARTY_MODULES>",
17-
"@/(.*)",
18-
"^[./]",
19-
],
13+
importOrder: ['^react(.*)', 'next/(.*)', '<THIRD_PARTY_MODULES>', '@/(.*)', '^[./]'],
2014
importOrderSortSpecifiers: true,
2115
},
2216
},
2317
],
18+
plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
19+
pluginSearchDirs: false,
2420
};

‎next.config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ module.exports = {
77
images: {
88
remotePatterns: [
99
{
10-
protocol: "https",
11-
hostname: "/i.pravatar.cc",
12-
port: "",
13-
pathname: "/150/**",
10+
protocol: 'https',
11+
hostname: '/i.pravatar.cc',
12+
port: '',
13+
pathname: '/150/**',
1414
},
1515
],
1616
},

‎src/components/Button.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const Button = (props) => {
22
return (
33
<button
4-
className="inline-block font-bold rounded-xl bg-blue-600 px-6 py-2.5 text-md leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg"
4+
className="text-md inline-block rounded-xl bg-blue-600 px-6 py-2.5 font-bold leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg"
55
{...props}
66
/>
77
);

‎src/components/ChatBox.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { MessageInput } from "@/components/MessageInput";
2-
import { MessageList } from "@/components/MessageList";
1+
import { MessageInput } from '@/components/MessageInput';
2+
import { MessageList } from '@/components/MessageList';
33

44
export const ChatBox = () => {
55
return (
6-
<div className="flex justify-center h-full">
7-
<div className="flex flex-col rounded-md w-full max-h-full bg-white justify-between mb-10">
8-
<div className="rounded-lg w-full overflow-auto">
6+
<div className="flex h-full justify-center">
7+
<div className="mb-10 flex max-h-full w-full flex-col justify-between rounded-md bg-white">
8+
<div className="w-full overflow-auto rounded-lg">
99
<MessageList />
1010
</div>
1111
<div className="p-4">

‎src/components/DebugButton.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Modal } from "@/components/Modal";
2-
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
3-
import { useState } from "react";
1+
import { useState } from 'react';
2+
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
3+
import { Modal } from '@/components/Modal';
44

55
export const DebugButton = () => {
66
const [openModal, setOpenModal] = useState(false);
@@ -9,9 +9,9 @@ export const DebugButton = () => {
99
<div>
1010
<button
1111
onClick={() => setOpenModal(true)}
12-
className="flex align-center font-bold rounded-xl bg-gray-700 px-6 py-2.5 text-md leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-gray-800 hover:shadow-lg focus:bg-gray-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-800 active:shadow-lg"
12+
className="align-center text-md flex rounded-xl bg-gray-700 px-6 py-2.5 font-bold leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-gray-800 hover:shadow-lg focus:bg-gray-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-800 active:shadow-lg"
1313
>
14-
Debug <ArrowTopRightOnSquareIcon className="h-5 w-5 ml-1" />
14+
Debug <ArrowTopRightOnSquareIcon className="ml-1 h-5 w-5" />
1515
</button>
1616
<Modal openState={openModal} handleClose={() => setOpenModal(false)} />
1717
</div>

‎src/components/DebugList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button } from "./Button";
1+
import { Button } from './Button';
22

33
export const DebugPanel = () => {
44
return (

‎src/components/MessageInput.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { useChatContext } from "@/contexts/ChatContext";
2-
import { useState } from "react";
1+
import { useState } from 'react';
2+
import { useChatContext } from '@/contexts/ChatContext';
33

44
export const MessageInput = ({}) => {
5-
const [messageInput, setMessageInput] = useState<string>("");
5+
const [messageInput, setMessageInput] = useState<string>('');
66

77
const { addMessage } = useChatContext();
88

@@ -11,7 +11,7 @@ export const MessageInput = ({}) => {
1111
if (messageInput.length > 0) {
1212
// TODO: await
1313
addMessage({ isBot: false, payload: messageInput });
14-
setMessageInput("");
14+
setMessageInput('');
1515
}
1616
};
1717

‎src/components/MessageItem.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import { Message, useChatContext } from "@/contexts/ChatContext";
1+
import { Message, useChatContext } from '@/contexts/ChatContext';
22

33
export const MessageItem = ({ message }: { message: Message }) => {
44
const { isBot, payload } = message;
55
const { getAvatar } = useChatContext();
66

77
const avatar = getAvatar(isBot);
88
return (
9-
<div className={`flex ${isBot ? "" : "flex-row-reverse ml-auto"}`}>
9+
<div className={`flex ${isBot ? '' : 'ml-auto flex-row-reverse'}`}>
1010
<img
1111
src={avatar}
12-
alt={isBot ? "Bot avatar" : "My avatar"}
13-
className="rounded-full w-10 h-10"
12+
alt={isBot ? 'Bot avatar' : 'My avatar'}
13+
className="h-10 w-10 rounded-full"
1414
/>
1515
<div
16-
className={`overflow-hidden rounded-md mx-2 p-2 text-sm ${
17-
isBot ? "text-black bg-gray-200" : "text-white bg-blue-600"
16+
className={`mx-2 overflow-hidden rounded-md p-2 text-sm ${
17+
isBot ? 'bg-gray-200 text-black' : 'bg-blue-600 text-white'
1818
}`}
1919
dangerouslySetInnerHTML={{ __html: payload }}
2020
></div>

‎src/components/MessageList.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { MessageItem } from "@/components/MessageItem";
2-
import { useChatContext } from "@/contexts/ChatContext";
1+
import { MessageItem } from '@/components/MessageItem';
2+
import { useChatContext } from '@/contexts/ChatContext';
33

44
export const MessageList = () => {
55
const { messages, isBotThinking } = useChatContext();
66
return (
7-
<div className="flex flex-col gap-4 overflow-y-auto w-full max-h-full rounded-md p-4">
7+
<div className="flex max-h-full w-full flex-col gap-4 overflow-y-auto rounded-md p-4">
88
{messages.map((message, i) => (
99
<MessageItem key={`m${i}`} message={message} />
1010
))}

‎src/components/Modal.tsx

+7-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Dialog, Transition } from "@headlessui/react";
2-
import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
3-
import { Fragment } from "react";
1+
import { Fragment } from 'react';
2+
import { Dialog, Transition } from '@headlessui/react';
3+
import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
44

55
interface Props {
66
openState: boolean;
@@ -47,22 +47,16 @@ export const Modal = ({ openState, handleClose }: Props) => {
4747
</button>
4848
</div>
4949
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
50-
<CheckIcon
51-
className="h-6 w-6 text-green-600"
52-
aria-hidden="true"
53-
/>
50+
<CheckIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
5451
</div>
5552
<div className="mt-3 text-center sm:mt-5">
56-
<Dialog.Title
57-
as="h3"
58-
className="text-lg font-medium leading-6 text-gray-900"
59-
>
53+
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
6054
Debug Mode
6155
</Dialog.Title>
6256
<div className="mt-2">
6357
<p className="text-sm text-gray-500">
64-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
65-
Consequatur amet labore.
58+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet
59+
labore.
6660
</p>
6761
</div>
6862
</div>

‎src/components/TransferButton.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { Button } from "@/components/Button";
2-
import { shortenAddress } from "@/utils";
3-
import { BigNumber, utils } from "ethers";
1+
import { BigNumber, utils } from 'ethers';
42
import {
5-
usePrepareSendTransaction,
6-
useSendTransaction,
7-
useContractWrite,
8-
usePrepareContractWrite,
93
erc20ABI,
104
useContractRead,
11-
} from "wagmi";
5+
useContractWrite,
6+
usePrepareContractWrite,
7+
usePrepareSendTransaction,
8+
useSendTransaction,
9+
} from 'wagmi';
10+
import { Button } from '@/components/Button';
11+
import { shortenAddress } from '@/utils';
1212

1313
interface TransferButtonProps {
1414
token?: string;
@@ -40,7 +40,7 @@ const TransferToken = ({ token, amount, receiver }: TransferButtonProps) => {
4040
const { config: tokenConfig } = usePrepareContractWrite({
4141
address: token as `0x${string}`,
4242
abi: erc20ABI,
43-
functionName: "transfer",
43+
functionName: 'transfer',
4444
args: [receiver as `0x${string}`, BigNumber.from(amount)],
4545
});
4646

@@ -50,13 +50,12 @@ const TransferToken = ({ token, amount, receiver }: TransferButtonProps) => {
5050
const { data: tokenSymbol, isFetchedAfterMount } = useContractRead({
5151
address: token as `0x${string}`,
5252
abi: erc20ABI,
53-
functionName: "symbol",
53+
functionName: 'symbol',
5454
});
5555
return (
5656
<div>
5757
<Button disabled={!tokenWrite} onClick={() => tokenWrite?.()}>
58-
Send {utils.formatEther(amount)}{" "}
59-
{isFetchedAfterMount ? tokenSymbol : "token"} to{" "}
58+
Send {utils.formatEther(amount)} {isFetchedAfterMount ? tokenSymbol : 'token'} to{' '}
6059
{shortenAddress(receiver)}
6160
</Button>
6261
</div>

‎src/contexts/ChatContext.tsx

+8-16
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
import {
2-
useState,
3-
ReactNode,
4-
createContext,
5-
useContext,
6-
useEffect,
7-
} from "react";
8-
import useWebSocket from "react-use-websocket";
1+
import { ReactNode, createContext, useContext, useEffect, useState } from 'react';
2+
import useWebSocket from 'react-use-websocket';
93

104
export type Message = {
115
isBot: boolean;
126
payload: string;
137
};
148

15-
type UserMessage = Omit<Message, "avatar">;
9+
type UserMessage = Omit<Message, 'avatar'>;
1610

1711
export type ChatContextType = {
1812
messages: Message[];
@@ -21,15 +15,15 @@ export type ChatContextType = {
2115
isBotThinking: boolean;
2216
};
2317

24-
const userAvatar = "https://i.pravatar.cc/150?img=56";
25-
const botAvatar = "https://i.pravatar.cc/150?img=32";
18+
const userAvatar = 'https://i.pravatar.cc/150?img=56';
19+
const botAvatar = 'https://i.pravatar.cc/150?img=32';
2620
const getAvatar = (isBot: boolean) => (isBot ? botAvatar : userAvatar);
2721

2822
const initialContext = {
2923
messages: [
3024
{
3125
isBot: true,
32-
payload: "Hello 👋,How can I help you?",
26+
payload: 'Hello 👋,How can I help you?',
3327
},
3428
],
3529
addMessage: (msg: UserMessage) => {},
@@ -41,14 +35,12 @@ const ChatContext = createContext<ChatContextType>(initialContext);
4135

4236
export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
4337
const [messages, setMessages] = useState<Message[]>(initialContext.messages);
44-
const [isBotThinking, setIsBotThinking] = useState<boolean>(
45-
initialContext.isBotThinking
46-
);
38+
const [isBotThinking, setIsBotThinking] = useState<boolean>(initialContext.isBotThinking);
4739
const {
4840
sendMessage: wsSendMessage,
4941
lastMessage,
5042
readyState,
51-
} = useWebSocket("ws://localhost:9999");
43+
} = useWebSocket('ws://localhost:9999');
5244

5345
useEffect(() => {
5446
if (!lastMessage) return;

‎src/pages/_app.tsx

+10-17
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
1-
import { ChatContextProvider } from "@/contexts/ChatContext";
2-
import "@/styles/globals.css";
3-
import {
4-
getDefaultWallets,
5-
lightTheme,
6-
RainbowKitProvider,
7-
} from "@rainbow-me/rainbowkit";
8-
import "@rainbow-me/rainbowkit/styles.css";
9-
import type { AppProps } from "next/app";
10-
import { configureChains, createClient, goerli, WagmiConfig } from "wagmi";
1+
import type { AppProps } from 'next/app';
2+
import { RainbowKitProvider, getDefaultWallets, lightTheme } from '@rainbow-me/rainbowkit';
3+
import '@rainbow-me/rainbowkit/styles.css';
4+
import { WagmiConfig, configureChains, createClient, goerli } from 'wagmi';
115
// import { mainnet, polygon, optimism, arbitrum } from "wagmi/chains";
12-
import { alchemyProvider } from "wagmi/providers/alchemy";
13-
import { publicProvider } from "wagmi/providers/public";
6+
import { alchemyProvider } from 'wagmi/providers/alchemy';
7+
import { publicProvider } from 'wagmi/providers/public';
8+
import { ChatContextProvider } from '@/contexts/ChatContext';
9+
import '@/styles/globals.css';
1410

1511
const { chains, provider } = configureChains(
1612
[goerli],
1713
[publicProvider(), alchemyProvider({ apiKey: process.env.ALCHEMY_ID })]
1814
);
1915

2016
const { connectors } = getDefaultWallets({
21-
appName: "My RainbowKit App",
17+
appName: 'My RainbowKit App',
2218
chains,
2319
});
2420

@@ -31,10 +27,7 @@ const wagmiClient = createClient({
3127
export default function App({ Component, pageProps }: AppProps) {
3228
return (
3329
<WagmiConfig client={wagmiClient}>
34-
<RainbowKitProvider
35-
chains={chains}
36-
theme={lightTheme({ accentColor: "#2563eb" })}
37-
>
30+
<RainbowKitProvider chains={chains} theme={lightTheme({ accentColor: '#2563eb' })}>
3831
<ChatContextProvider>
3932
<Component {...pageProps} />
4033
</ChatContextProvider>

‎src/pages/api/hello.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2-
import type { NextApiRequest, NextApiResponse } from "next";
2+
import type { NextApiRequest, NextApiResponse } from 'next';
33

44
type Data = {
55
name: string;
66
};
77

8-
export default function handler(
9-
req: NextApiRequest,
10-
res: NextApiResponse<Data>
11-
) {
12-
res.status(200).json({ name: "John Doe" });
8+
export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
9+
res.status(200).json({ name: 'John Doe' });
1310
}

‎src/pages/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { ChatBox } from "@/components/ChatBox";
2-
import { DebugButton } from "@/components/DebugButton";
3-
import { ConnectButton } from "@rainbow-me/rainbowkit";
1+
import { ConnectButton } from '@rainbow-me/rainbowkit';
2+
import { ChatBox } from '@/components/ChatBox';
3+
import { DebugButton } from '@/components/DebugButton';
44

55
export const Home = () => {
66
return (
77
<>
8-
<div className="flex flex-col h-screen bg-gray-900 px-8">
9-
<div className="flex justify-end my-4 gap-2">
8+
<div className="flex h-screen flex-col bg-gray-900 px-8">
9+
<div className="my-4 flex justify-end gap-2">
1010
<DebugButton />
1111
<ConnectButton />
1212
</div>

‎src/utils/index.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export const shortenAddress = (address: string) =>
2-
address.slice(0, 6) + "..." + address.slice(-4);
1+
export const shortenAddress = (address: string) => address.slice(0, 6) + '...' + address.slice(-4);

‎tailwind.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
3-
content: ["./src/**/*.{js,ts,jsx,tsx}"],
3+
content: ['./src/**/*.{js,ts,jsx,tsx}'],
44

55
theme: {
66
extend: {},

0 commit comments

Comments
 (0)