chore: adjust filename to kebab-case (#240)

* chore: adjust filename to kebab-case

* chore: rename the rest

package.json

@@ -21,7 +21,7 @@
     "push-release": "git push --follow-tags origin dev",
     "up-interactive": "pnpm up -i",
     "up-latest": "pnpm up-interactive -L",
-    "generate-rules": "ts-node tools/generateRules.ts",
+    "generate-rules": "ts-node tools/generate-rules.ts",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
     "prepare": "husky install"

src/lib/components/shared/AutoResizeTextarea/index.tsx → src/lib/components/auto-resize-textarea.tsx

@@ -27,7 +27,7 @@ const contraStyle: Partial<TextareaProps> = {
   size: 'lg',
 };
 
-const AutoResizeTextarea = forwardRef(
+export const AutoResizeTextarea = forwardRef(
   (
     {
       isInvalid,
@@ -62,5 +62,3 @@ const AutoResizeTextarea = forwardRef(
     );
   }
 );
-
-export default AutoResizeTextarea;

src/lib/layout/FullScreenLoading.tsx → src/lib/components/full-screen-loading.tsx

@@ -1,18 +1,16 @@
 import type { LayoutProps } from '@chakra-ui/react';
 import { Grid } from '@chakra-ui/react';
 
-import SpokerLoading from '~/lib/components/shared/SpokerLoading';
+import { SpokerLoading } from '~/lib/components/spoker-loading';
 
 type FullScreenLoadingProps = {
   height?: LayoutProps['height'];
 };
 
-const FullScreenLoading = ({ height }: FullScreenLoadingProps) => {
+export const FullScreenLoading = ({ height }: FullScreenLoadingProps) => {
   return (
     <Grid height={height ?? '75vh'}>
       <SpokerLoading />
     </Grid>
   );
 };
-
-export default FullScreenLoading;

src/lib/components/shared/SpokerInput/index.tsx → src/lib/components/spoker-input.tsx

@@ -27,7 +27,7 @@ const contraInputStyle: Partial<InputProps> = {
   size: 'lg',
 };
 
-const SpokerInput = forwardRef(
+export const SpokerInput = forwardRef(
   (
     {
       label,
@@ -53,5 +53,3 @@ const SpokerInput = forwardRef(
     );
   }
 );
-
-export default SpokerInput;

src/lib/components/shared/SpokerLoading/index.tsx → src/lib/components/spoker-loading.tsx

@@ -1,12 +1,10 @@
 import { Box, Spinner, Text } from '@chakra-ui/react';
 
-const SpokerLoading = () => {
+export const SpokerLoading = () => {
   return (
     <Box gap={2} margin="auto" textAlign="center" alignItems="center">
       <Spinner size="xl" thickness="0.5rem" marginX="auto" />
       <Text fontSize="lg">Loading...</Text>
     </Box>
   );
 };
-
-export default SpokerLoading;

src/lib/components/shared/SpokerLogo/index.tsx → src/lib/components/spoker-logo.tsx

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react';
 import Link from 'next/link';
 
-const SpokerLogo = () => {
+export const SpokerLogo = () => {
   return (
     <ChakraLink as={Link} href="/" _hover={undefined}>
       <Flex alignItems="center" gridGap={{ base: 2, md: 4 }}>
@@ -25,5 +25,3 @@ const SpokerLogo = () => {
     </ChakraLink>
   );
 };
-
-export default SpokerLogo;

src/lib/components/shared/SpokerModalWrapper/index.tsx → src/lib/components/spoker-modal-wrapper.tsx

@@ -10,7 +10,7 @@ import {
 } from '@chakra-ui/react';
 import type * as React from 'react';
 
-import { contraGridStyle } from '~/lib/components/shared/style';
+import { contraGridStyle } from '~/lib/components/style';
 
 type SpokerModalWrapperProps = Pick<
   ModalProps,
@@ -23,7 +23,7 @@ type SpokerModalWrapperProps = Pick<
   contentWrapperProps?: ModalContentProps;
 };
 
-const SpokerModalWrapper = ({
+export const SpokerModalWrapper = ({
   isOpen,
   size = '2xl',
   header,
@@ -59,5 +59,3 @@ const SpokerModalWrapper = ({
     </Modal>
   );
 };
-
-export default SpokerModalWrapper;

src/lib/components/shared/SpokerRadioBox/index.tsx → src/lib/components/spoker-radio-box.tsx

@@ -3,7 +3,7 @@ import { Box, useRadio } from '@chakra-ui/react';
 
 type SpokerRadioBoxProps = RadioProps;
 
-const SpokerRadioBox = ({ children, ...props }: SpokerRadioBoxProps) => {
+export const SpokerRadioBox = ({ children, ...props }: SpokerRadioBoxProps) => {
   const { getInputProps, getCheckboxProps } = useRadio(props);
 
   const input = getInputProps();
@@ -37,5 +37,3 @@ const SpokerRadioBox = ({ children, ...props }: SpokerRadioBoxProps) => {
     </Box>
   );
 };
-
-export default SpokerRadioBox;

src/lib/components/shared/SpokerWrapperGrid.tsx → src/lib/components/spoker-wrapper-grid.tsx

@@ -5,7 +5,10 @@ import { contraGridStyle } from './style';
 
 type SpokerWrapperGridProps = GridProps;
 
-const SpokerWrapperGrid = ({ children, ...props }: SpokerWrapperGridProps) => {
+export const SpokerWrapperGrid = ({
+  children,
+  ...props
+}: SpokerWrapperGridProps) => {
   const backgroundColor = useColorModeValue(undefined, 'gray.500');
 
   return (
@@ -14,5 +17,3 @@ const SpokerWrapperGrid = ({ children, ...props }: SpokerWrapperGridProps) => {
     </Grid>
   );
 };
-
-export default SpokerWrapperGrid;

src/lib/components/shared/Twemoji.tsx → src/lib/components/twemoji.tsx

@@ -5,7 +5,7 @@ type TwemojiProps = {
   emoji: string;
 };
 
-const Twemoji = ({ emoji }: TwemojiProps) => {
+export const Twemoji = memo(({ emoji }: TwemojiProps) => {
   return (
     <span
       // eslint-disable-next-line react/no-danger
@@ -18,6 +18,4 @@ const Twemoji = ({ emoji }: TwemojiProps) => {
       }}
     />
   );
-};
-
-export default memo(Twemoji);
+});

src/lib/constants/emptyRoom.ts → src/lib/constants/empty-room.ts

@@ -1,4 +1,4 @@
-import type { RoomInstance } from '~/lib/types/RawDB';
+import type { RoomInstance } from '~/lib/types/raw-db';
 
 export const emptyRoom: RoomInstance = {
   room: {

src/lib/components/auth/AuthPopover.tsx → src/lib/layout/components/auth/auth-popover.tsx

@@ -20,17 +20,17 @@ import { BsPencil } from 'react-icons/bs';
 import { ImCheckmark } from 'react-icons/im';
 import { IoMdPerson } from 'react-icons/io';
 
-import SpokerInput from '~/lib/components/shared/SpokerInput';
+import { SpokerInput } from '~/lib/components/spoker-input';
 import { PRIVATE_ROUTES } from '~/lib/constants/routes/private';
 import { EVENT_TYPE_AUTH } from '~/lib/constants/tracking';
 import { logoutUser } from '~/lib/services/firebase/auth/logout';
-import { updateDisplayName } from '~/lib/services/firebase/auth/updateDisplayName';
-import { disconnectUser } from '~/lib/services/firebase/room/update/disconnectUser';
+import { updateDisplayName } from '~/lib/services/firebase/auth/update-display-name';
+import { disconnectUser } from '~/lib/services/firebase/room/update/disconnect-user';
 import { useAuth } from '~/lib/stores/auth';
 import { removeFirebasePrefix } from '~/lib/utils/removeFirebasePrefix';
 import { trackEvent } from '~/lib/utils/trackEvent';
 
-const AuthPopover = () => {
+export const AuthPopover = () => {
   const [currentUser, displayName, setDisplayName] = useAuth((state) => [
     state.currentUser,
     state.displayName,
@@ -173,5 +173,3 @@ const AuthPopover = () => {
     </Box>
   );
 };
-
-export default AuthPopover;

src/lib/components/auth/AuthWrapper.tsx → src/lib/layout/components/auth/auth-wrapper.tsx

@@ -9,14 +9,14 @@ import { EVENT_TYPE_AUTH } from '~/lib/constants/tracking';
 import { useAuth } from '~/lib/stores/auth';
 import { trackEvent } from '~/lib/utils/trackEvent';
 
-import Login from './Login';
-import Register from './Register';
+import { Login } from './login';
+import { Register } from './register';
 
 type AuthWrapperProps = {
   children: ReactNode;
 };
 
-const AuthWrapper = ({ children }: AuthWrapperProps) => {
+export const AuthWrapper = ({ children }: AuthWrapperProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [isRegistered, setIsRegistered] = React.useState<boolean>(true);
   const currentUser = useAuth((state) => state.currentUser);
@@ -77,5 +77,3 @@ const AuthWrapper = ({ children }: AuthWrapperProps) => {
     </Modal>
   );
 };
-
-export default AuthWrapper;

src/lib/components/auth/ForgotPasswordButton.tsx → src/lib/layout/components/auth/forgot-password-button.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { EVENT_TYPE_AUTH } from '~/lib/constants/tracking';
 import { trackEvent } from '~/lib/utils/trackEvent';
 
-const ForgotPasswordButton = () => {
+export const ForgotPasswordButton = () => {
   const handleClickForgotPassword = () => {
     trackEvent({
       eventName: 'open reset password',
@@ -26,5 +26,3 @@ const ForgotPasswordButton = () => {
     </Button>
   );
 };
-
-export default ForgotPasswordButton;

src/lib/components/auth/Login/index.tsx → src/lib/layout/components/auth/login.tsx

@@ -13,18 +13,19 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-import ForgotPasswordButton from '~/lib/components/auth/ForgotPasswordButton';
-import SignInProviders from '~/lib/components/auth/SignInProviders';
-import { contraBoxStyle } from '~/lib/components/auth/style';
-import SpokerInput from '~/lib/components/shared/SpokerInput';
+import { SpokerInput } from '~/lib/components/spoker-input';
 import { initialValues, loginFormValidationSchema } from '~/lib/models/login';
-import { loginUserWithEmailAndPassword } from '~/lib/services/firebase/auth/login/emailAndPassword';
+import { loginUserWithEmailAndPassword } from '~/lib/services/firebase/auth/login/email-and-password';
+
+import { ForgotPasswordButton } from './forgot-password-button';
+import { SignInProviders } from './sign-in-providers';
+import { contraBoxStyle } from './style';
 
 type LoginProps = {
   handleSwitchToRegister: () => void;
 };
 
-const Login = ({ handleSwitchToRegister }: LoginProps) => {
+export const Login = ({ handleSwitchToRegister }: LoginProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const borderColor = useColorModeValue('#18191F', '#FFFFFF');
 
@@ -105,5 +106,3 @@ const Login = ({ handleSwitchToRegister }: LoginProps) => {
     </ModalContent>
   );
 };
-
-export default Login;

src/lib/components/auth/Register/index.tsx → src/lib/layout/components/auth/register.tsx

@@ -9,14 +9,14 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react';
 
-import SignInProviders from '~/lib/components/auth/SignInProviders';
-import { contraBoxStyle } from '~/lib/components/auth/style';
+import { SignInProviders } from './sign-in-providers';
+import { contraBoxStyle } from './style';
 
 type RegisterProps = {
   handleSwitchToLogin: () => void;
 };
 
-const Register = ({ handleSwitchToLogin }: RegisterProps) => {
+export const Register = ({ handleSwitchToLogin }: RegisterProps) => {
   const borderColor = useColorModeValue('#18191F', '#FFFFFF');
 
   return (
@@ -45,5 +45,3 @@ const Register = ({ handleSwitchToLogin }: RegisterProps) => {
     </ModalContent>
   );
 };
-
-export default Register;

src/lib/components/auth/SignInProviders.tsx → src/lib/layout/components/auth/sign-in-providers.tsx

@@ -4,7 +4,7 @@ import { FcGoogle } from 'react-icons/fc';
 
 import { loginWithGoogle } from '~/lib/services/firebase/auth/login/google';
 
-const SignInProviders = () => {
+export const SignInProviders = () => {
   const toast = useToast();
 
   const handleLoginWithGoogle = async () => {
@@ -32,5 +32,3 @@ const SignInProviders = () => {
     </Grid>
   );
 };
-
-export default SignInProviders;

src/lib/layout/Footer.tsx → src/lib/layout/components/footer.tsx

@@ -1,13 +1,14 @@
 import { Box, Flex, Link, Text } from '@chakra-ui/react';
 import { RiGithubFill } from 'react-icons/ri';
 
-import SpokerLogo from '~/lib/components/shared/SpokerLogo';
-import SupportCTA from '~/lib/components/support/SupportCTA';
-import { packageInfo } from '~/lib/constants/packageInfo';
+import { SpokerLogo } from '~/lib/components/spoker-logo';
+import { packageInfo } from '~/lib/constants/package-info';
 import { EVENT_TYPE_LINK } from '~/lib/constants/tracking';
 import { trackEvent } from '~/lib/utils/trackEvent';
 
-const Footer = () => {
+import { SupportCTA } from './support/support-cta';
+
+export const Footer = () => {
   const handleClick = (eventName: string) => () => {
     trackEvent({
       eventName,
@@ -71,5 +72,3 @@ const Footer = () => {
     </Box>
   );
 };
-
-export default Footer;

src/lib/layout/Header.tsx → src/lib/layout/components/header.tsx

@@ -1,12 +1,12 @@
 import { Flex } from '@chakra-ui/react';
 
-import AuthPopover from '~/lib/components/auth/AuthPopover';
-import SpokerLogo from '~/lib/components/shared/SpokerLogo';
-import SupportCTA from '~/lib/components/support/SupportCTA';
+import { SpokerLogo } from '~/lib/components/spoker-logo';
+import { AuthPopover } from '~/lib/layout/components/auth/auth-popover';
 
-import ThemeToggle from './ThemeToggle';
+import { SupportCTA } from './support/support-cta';
+import { ThemeToggle } from './theme-toggle';
 
-const Header = () => {
+export const Header = () => {
   return (
     <Flex as="header" width="full" align="center">
       <SpokerLogo />
@@ -19,5 +19,3 @@ const Header = () => {
     </Flex>
   );
 };
-
-export default Header;

src/lib/layout/Meta.tsx → src/lib/layout/components/meta.tsx

@@ -1,11 +1,9 @@
 import Head from 'next/head';
 
-const Meta = () => {
+export const Meta = () => {
   return (
     <Head>
       <link rel="icon" href="/chip.svg" />
     </Head>
   );
 };
-
-export default Meta;

src/lib/layout/RouteWrapper.tsx → src/lib/layout/components/route-wrapper/index.tsx

@@ -2,18 +2,18 @@ import { useToast } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import * as React from 'react';
 
+import { FullScreenLoading } from '~/lib/components/full-screen-loading';
 import { PUBLIC_ROUTES } from '~/lib/constants/routes/public';
 import { RESTRICTED_ROUTES } from '~/lib/constants/routes/restricted';
 import { useAuth } from '~/lib/stores/auth';
 
-import FullScreenLoading from './FullScreenLoading';
-import { useAuthObserver } from './useAuthObserver';
+import { useAuthObserver } from './hooks';
 
 type RouteWrapperProps = {
   children: React.ReactNode;
 };
 
-const RouteWrapper = ({ children }: RouteWrapperProps) => {
+export const RouteWrapper = ({ children }: RouteWrapperProps) => {
   const router = useRouter();
   const { pathname } = router;
   const { isLoadingAuth } = useAuthObserver();
@@ -81,5 +81,3 @@ const RouteWrapper = ({ children }: RouteWrapperProps) => {
 
   return children as React.ReactElement;
 };
-
-export default RouteWrapper;