style: kebabe case file convention

.eslintrc.yml

@@ -19,12 +19,14 @@ parserOptions:
 plugins:
   - '@typescript-eslint'
   - react
+  - unicorn
 rules:
   import/prefer-default-export: 'off'
   react/jsx-filename-extension: [2, { 'extensions': ['.jsx', '.tsx'] }]
   react/require-default-props: 'off'
   '@typescript-eslint/explicit-function-return-type': 'off'
   '@typescript-eslint/no-floating-promises': 'off'
+  unicorn/filename-case: ['error', { 'case': 'kebabCase' }]
 settings:
   'import/resolver':
     alias:

package.json

@@ -62,6 +62,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-unicorn": "^55.0.0",
     "lightningcss": "^1.22.0",
     "msw": "^1.3.3",
     "postcss": "^8.4.31",

src/components/App.tsx

@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 
-import Header from '~/components/Header';
-import Alert from '~/components/Alert';
-import Breadcrumbs from '~/components/Breadcrumbs';
+import Header from '~/components/header';
+import Alert from '~/components/alert';
+import Breadcrumbs from '~/components/breadcrumbs';
 
 // Create a GrowthBook instance
 const growthbook = new GrowthBook({

src/components/Input.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Input } from './Input';
+import { Input } from './input';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {

src/components/PostForm.stories.ts → src/components/post-form.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { PostForm } from './PostForm';
+import { PostForm } from './post-form';
 
 const meta = {
   title: 'Components/PostForm',

src/components/PostPreview.stories.ts → src/components/post-preview.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import PostPreview from './PostPreview';
+import PostPreview from './post-preview';
 
 const meta = {
   title: 'Components/PostPreview',

src/index.tsx

@@ -4,16 +4,16 @@ import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';
 
 import './index.css';
 
-const App = lazy(async () => import('~/components/App'));
+const App = lazy(async () => import('~/components/app'));
 const Home = lazy(async () => import('~/pages/index'));
 const NoMatch = lazy(async () => import('~/pages/[all]'));
 
 const NewPost = lazy(async () => import('~/pages/posts/new'));
 const BlogPost = lazy(async () => import('~/pages/posts/[postId]'));
 const EditPost = lazy(async () => import('~/pages/posts/[postId]/edit'));
-const UserInfo = lazy(async () => import('~/pages/users/[userName]'));
+const UserInfo = lazy(async () => import('~/pages/users/[user-name]'));
 
-const root = createRoot(document.getElementById('app'));
+const root = createRoot(document.getElementById('app')!);
 
 const router = createBrowserRouter(
   [

src/pages/index.tsx

@@ -2,12 +2,12 @@ import { Fragment } from 'react';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { useFeature } from '@growthbook/growthbook-react';
 
-import PostPreview from '~/components/PostPreview';
-import Search from '~/components/Search';
+import Search from '~/components/search';
 
-import type { IBlogPost } from '~/components/PostPreview';
 import { db } from '~/services/db';
-import { timestampToLocaleString } from '~/services/timestampToLocaleString';
+import { timestampToLocaleString } from '~/services/timestamp-to-locale-string';
+import type { IBlogPost } from '~/components/post-preview';
+import PostPreview from '~/components/post-preview';
 
 function handleDeleteStory(id: string) {
   db.posts.delete(id);

src/pages/posts/[postId]/edit.tsx

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { redirect, useParams } from 'react-router-dom';
 import { useLiveQuery } from 'dexie-react-hooks';
 
-import { Input } from '~/components/Input';
-import type { IBlogPost } from '~/components/PostPreview';
+import { Input } from '~/components/input';
 import { db } from '~/services/db';
+import type { IBlogPost } from '~/components/PostPreview';
 
 interface IBlogPostProps {
   post: IBlogPost;

src/pages/posts/[postId]/index.tsx

@@ -1,8 +1,8 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import { useLiveQuery } from 'dexie-react-hooks';
 
-import type { IBlogPost } from '~/components/PostPreview';
 import { db } from '~/services/db';
+import type { IBlogPost } from '~/components/PostPreview';
 
 function Post({ heading, text }: IBlogPost) {
   const navigate = useNavigate();