feat: forced file naming format (#2270)

.eslintrc.js

@@ -34,6 +34,7 @@ const config = {
     'simple-import-sort',
     'import',
     'unused-imports',
+    'unicorn',
   ],
   rules: {
     'no-undef': 'off',
@@ -74,6 +75,13 @@ const config = {
         ],
       },
     ],
+    'unicorn/filename-case': [
+      'error',
+      {
+        case: 'kebabCase',
+        ignore: ['^\\[[a-zA-Z0-9-_]+\\]\\.tsx$'],
+      },
+    ],
   },
   overrides: [
     {

.gitignore

@@ -57,7 +57,7 @@ Thumbs.db
 .next
 out/
 storybook-static
-i18n_generated.ts
+i18n-generated.ts
 
 /test-results/
 /playwright-report/

.i18n-codegen.json

@@ -4,7 +4,7 @@
   "list": [
     {
       "input": "./packages/i18n/src/resources/en.json",
-      "output": "./packages/i18n/src/i18n_generated",
+      "output": "./packages/i18n/src/i18n-generated",
       "parser": {
         "type": "i18next",
         "contextSeparator": "$",

apps/web/next.config.mjs

@@ -10,7 +10,7 @@ import debugLocal from 'next-debug-local';
 import { fileURLToPath } from 'url';
 
 import { blockSuiteFeatureFlags, buildFlags } from './preset.config.mjs';
-import { getCommitHash, getGitVersion } from './scripts/gitInfo.mjs';
+import { getCommitHash, getGitVersion } from './scripts/git-info.mjs';
 
 const require = createRequire(import.meta.url);
 const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');

apps/web/package.json

@@ -67,6 +67,7 @@
     "dotenv": "^16.0.3",
     "eslint": "^8.40.0",
     "eslint-config-next": "^13.4.1",
+    "eslint-plugin-unicorn": "^47.0.0",
     "next": "^13.4.1",
     "next-debug-local": "^0.1.5",
     "next-router-mock": "^0.9.3",

apps/web/src/components/affine/pinboard/pinboard-menu/index.tsx

@@ -18,7 +18,7 @@ import {
   StyledPinboard,
   StyledSearchContainer,
 } from '../styles';
-import { SearchContent } from './SearchContent';
+import { SearchContent } from './search-content';
 
 export interface PinboardMenuProps extends PureMenuProps {
   metas: PageMeta[];

apps/web/src/components/affine/pinboard/pinboard-render/add-button.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from '@blocksuite/icons';
 
 import { StyledOperationButton } from '../styles';
-import type { OperationButtonProps } from './OperationButton';
+import type { OperationButtonProps } from './operation-button';
 
 export const AddButton = ({
   onAdd,

apps/web/src/components/affine/pinboard/pinboard-render/index.tsx

@@ -14,9 +14,9 @@ import { useMemo, useState } from 'react';
 import { workspacePreferredModeAtom } from '../../../../atoms';
 import type { PinboardNode } from '../../../../hooks/use-pinboard-data';
 import { StyledCollapsedButton, StyledPinboard } from '../styles';
-import { AddButton } from './AddButton';
-import EmptyItem from './EmptyItem';
-import { OperationButton } from './OperationButton';
+import { AddButton } from './add-button';
+import EmptyItem from './empty-item';
+import { OperationButton } from './operation-button';
 
 const getIcon = (type: 'root' | 'edgeless' | 'page') => {
   switch (type) {

apps/web/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx

@@ -28,7 +28,7 @@ import {
   StyledHorizontalDivider,
   StyledHorizontalDividerContainer,
 } from '../styles';
-import { LanguageMenu } from './LanguageMenu';
+import { LanguageMenu } from './language-menu';
 const CommonMenu = () => {
   const content = (
     <div

apps/web/src/components/blocksuite/workspace-header/header.tsx

@@ -16,12 +16,12 @@ import {
 
 import { useCurrentMode } from '../../../hooks/current/use-current-mode';
 import type { AffineOfficialWorkspace } from '../../../shared';
-import { EditorOptionMenu } from './header-right-items/EditorOptionMenu';
-import EditPage from './header-right-items/EditPage';
-import { HeaderShareMenu } from './header-right-items/ShareMenu';
-import SyncUser from './header-right-items/SyncUser';
-import TrashButtonGroup from './header-right-items/TrashButtonGroup';
-import UserAvatar from './header-right-items/UserAvatar';
+import EditPage from './header-right-items/edit-page';
+import { EditorOptionMenu } from './header-right-items/editor-option-menu';
+import { HeaderShareMenu } from './header-right-items/share-menu';
+import SyncUser from './header-right-items/sync-user';
+import TrashButtonGroup from './header-right-items/trash-button-group';
+import UserAvatar from './header-right-items/user-avatar';
 import {
   StyledBrowserWarning,
   StyledCloseButton,

apps/web/src/components/pure/help-island/index.tsx

@@ -8,7 +8,7 @@ import { lazy, Suspense, useState } from 'react';
 import { openOnboardingModalAtom } from '../../../atoms';
 import { useCurrentMode } from '../../../hooks/current/use-current-mode';
 import { ShortcutsModal } from '../shortcuts-modal';
-import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
+import { ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import {
   StyledAnimateWrapper,
   StyledIconWrapper,

apps/web/src/components/pure/loading/index.tsx

@@ -1,3 +1,3 @@
-import { Loading } from './PageLoading';
-export * from './PageLoading';
+import { Loading } from './page-loading';
+export * from './page-loading';
 export default Loading;

apps/web/src/components/pure/quick-search-modal/index.tsx

@@ -14,10 +14,10 @@ import {
 } from 'react';
 
 import type { BlockSuiteWorkspace } from '../../../shared';
-import { Footer } from './Footer';
-import { PublishedResults } from './PublishedResults';
-import { Results } from './Results';
-import { SearchInput } from './SearchInput';
+import { Footer } from './footer';
+import { PublishedResults } from './published-results';
+import { Results } from './results';
+import { SearchInput } from './search-input';
 import {
   StyledContent,
   StyledModalDivider,

apps/web/src/components/pure/shortcuts-modal/index.tsx

@@ -13,7 +13,7 @@ import {
   useWindowsKeyboardShortcuts,
   useWinMarkdownShortcuts,
 } from './config';
-import { KeyboardIcon } from './Icons';
+import { KeyboardIcon } from './icons';
 import {
   StyledListItem,
   StyledModalHeader,

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.ts

@@ -1 +1 @@
-export * from './WorkspaceSelector';
+export * from './workspace-selector';

apps/web/src/layouts/workspace-layout.tsx

@@ -36,7 +36,7 @@ import { useSyncRouterWithCurrentPageId } from '../hooks/use-sync-router-with-cu
 import { useSyncRouterWithCurrentWorkspaceId } from '../hooks/use-sync-router-with-current-workspace-id';
 import { useWorkspaces } from '../hooks/use-workspaces';
 import { WorkspacePlugins } from '../plugins';
-import { ModalProvider } from '../providers/ModalProvider';
+import { ModalProvider } from '../providers/modal-provider';
 import { pathGenerator, publicPathGenerator } from '../shared';
 import {
   MainContainer,

apps/web/src/pages/_app.tsx

@@ -17,7 +17,7 @@ import { AffineErrorBoundary } from '../components/affine/affine-error-eoundary'
 import { ProviderComposer } from '../components/provider-composer';
 import { PageLoading } from '../components/pure/loading';
 import { MessageCenter } from '../components/pure/message-center';
-import { ThemeProvider } from '../providers/ThemeProvider';
+import { ThemeProvider } from '../providers/theme-provider';
 import type { NextPageWithLayout } from '../shared';
 import createEmotionCache from '../utils/create-emotion-cache';
 

apps/web/src/pages/_debug/init-page.dev.tsx

@@ -6,7 +6,7 @@ import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import type { NextPageWithLayout } from '../../shared';
 
 const Editor = lazy(() =>
-  import('../../components/__debug__/client/Editor').then(module => ({
+  import('../../components/__debug__/client/editor').then(module => ({
     default: module.default,
   }))
 );

apps/web/src/providers/affine-swr-config-provider.tsx

@@ -10,7 +10,7 @@ const config: SWRConfiguration = {
   fetcher,
 };
 
-export const AffineSWRConfigProvider = memo<React.PropsWithChildren>(
+export const AffineSwrConfigProvider = memo<React.PropsWithChildren>(
   function AffineSWRConfigProvider({ children }) {
     return <SWRConfig value={config}>{children}</SWRConfig>;
   }

apps/web/src/providers/modal-provider.tsx

@@ -40,7 +40,7 @@ const TmpDisableAffineCloudModal = lazy(() =>
   )
 );
 const OnboardingModalAtom = lazy(() =>
-  import('../components/pure/OnboardingModal').then(module => ({
+  import('../components/pure/onboarding-modal').then(module => ({
     default: module.OnboardingModal,
   }))
 );

package.json

@@ -63,6 +63,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-unicorn": "^47.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "fake-indexeddb": "4.0.1",
     "got": "^12.6.0",

packages/component/src/components/app-sidebar/index.tsx

@@ -13,7 +13,7 @@ import type { PropsWithChildren, ReactElement } from 'react';
 import type { ReactNode } from 'react';
 import { forwardRef, useCallback, useEffect } from 'react';
 
-import { IconButton } from '../../ui/button/IconButton';
+import { IconButton } from '../../ui/button/icon-button';
 import {
   floatingMaxWidth,
   haloStyle,

packages/component/src/components/contact-modal/index.tsx

@@ -15,7 +15,7 @@ import {
   RedditIcon,
   TelegramIcon,
   TwitterIcon,
-} from './Icons';
+} from './icons';
 import {
   StyledBigLink,
   StyledLogo,

packages/component/src/components/page-list/operation-menu-items/index.ts

@@ -1,5 +1,5 @@
-export * from './CopyLink';
-export * from './DisablePublicSharing';
-export * from './Export';
+export * from './copy-link';
+export * from './disable-public-sharing';
+export * from './export';
 // export * from './MoveTo';
-export * from './MoveToTrash';
+export * from './move-to-trash';

packages/component/src/components/share-menu/export.tsx

@@ -12,7 +12,7 @@ import {
   menuItemStyle,
   svgStyle,
 } from './index.css';
-import type { ShareMenuProps } from './ShareMenu';
+import type { ShareMenuProps } from './share-menu';
 
 export const Export: FC<ShareMenuProps> = props => {
   const contentParserRef = useRef<ContentParser>();

packages/component/src/components/share-menu/index.tsx

@@ -1,2 +1,2 @@
 export * from './disable-public-link';
-export * from './ShareMenu';
+export * from './share-menu';

packages/component/src/components/share-menu/share-menu.tsx

@@ -7,10 +7,10 @@ import { useRef } from 'react';
 import { useCallback, useState } from 'react';
 
 import { Menu } from '../..';
-import { Export } from './Export';
+import { Export } from './export';
 import { containerStyle, indicatorContainerStyle, tabStyle } from './index.css';
-import { SharePage } from './SharePage';
-import { ShareWorkspace } from './ShareWorkspace';
+import { SharePage } from './share-page';
+import { ShareWorkspace } from './share-workspace';
 import { StyledIndicator, StyledShareButton, TabItem } from './styles';
 type SharePanel = 'SharePage' | 'Export' | 'ShareWorkspace';
 const MenuItems: Record<SharePanel, FC<ShareMenuProps>> = {

packages/component/src/components/share-menu/share-page.tsx

@@ -15,7 +15,7 @@ import {
   inputButtonRowStyle,
   menuItemStyle,
 } from './index.css';
-import type { ShareMenuProps } from './ShareMenu';
+import type { ShareMenuProps } from './share-menu';
 import {
   StyledButton,
   StyledDisableButton,

packages/component/src/components/share-menu/share-workspace.tsx

@@ -4,7 +4,7 @@ import { WorkspaceFlavour } from '@affine/workspace/type';
 import type { FC } from 'react';
 
 import { descriptionStyle, menuItemStyle } from './index.css';
-import type { ShareMenuProps } from './ShareMenu';
+import type { ShareMenuProps } from './share-menu';
 import { StyledButton } from './styles';
 
 const ShareLocalWorkspace: FC<ShareMenuProps<LocalWorkspace>> = props => {

packages/component/src/components/tour-modal/index.ts

@@ -1 +1 @@
-export * from './TourModal';
+export * from './tour-modal';

packages/component/src/components/workspace-avatar/index.tsx

@@ -10,7 +10,7 @@ import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-
 import clsx from 'clsx';
 import type React from 'react';
 
-import { DefaultAvatar } from './DefaultAvatar';
+import { DefaultAvatar } from './default-avatar';
 import { avatarImageStyle, avatarStyle } from './index.css';
 
 export type WorkspaceAvatarProps = {

packages/component/src/index.ts

@@ -1,4 +1,4 @@
-export * from './components/ListSkeleton';
+export * from './components/list-skeleton';
 export * from './styles';
 export * from './ui/breadcrumbs';
 export * from './ui/button';
@@ -11,7 +11,7 @@ export * from './ui/menu';
 export * from './ui/modal';
 export * from './ui/mui';
 export * from './ui/popper';
-export * from './ui/shared/Container';
+export * from './ui/shared/container';
 export * from './ui/switch';
 export * from './ui/table';
 export * from './ui/toast';

packages/component/src/stories/share-menu.stories.tsx

@@ -8,7 +8,7 @@ import type { StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { PublicLinkDisableModal } from '../components/share-menu/disable-public-link';
-import { ShareMenu } from '../components/share-menu/ShareMenu';
+import { ShareMenu } from '../components/share-menu/share-menu';
 import { StyledDisableButton } from '../components/share-menu/styles';
 import toast from '../ui/toast/toast';
 

packages/component/src/styles/index.ts

@@ -1,5 +1,5 @@
 export * from './helper';
 export * from './mui-theme';
-export * from './MuiThemeProvider';
+export * from './mui-theme-provider';
 export * from './types';
 export * from './utils';

packages/component/src/styles/utils/index.ts

@@ -1,2 +1,2 @@
-export * from './localStorageThemeHelper';
-export * from './systemThemeHelper';
+export * from './local-storage-theme-helper';
+export * from './system-theme-helper';

packages/component/src/ui/button/button.tsx

@@ -1,7 +1,7 @@
 import { Children, cloneElement, forwardRef } from 'react';
 
 import type { ButtonProps } from './interface';
-import { Loading } from './Loading';
+import { Loading } from './loading';
 import { StyledButton } from './styles';
 import { getSize } from './utils';
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(

packages/component/src/ui/button/index.ts

@@ -1,3 +1,3 @@
-export * from './Button';
-export * from './IconButton';
-export * from './TextButton';
+export * from './button';
+export * from './icon-button';
+export * from './text-button';

packages/component/src/ui/confirm/index.ts

@@ -1 +1 @@
-export * from './Confirm';
+export * from './confirm';

packages/component/src/ui/empty/empty-svg.tsx

@@ -1,7 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
 import SvgIcon from '@mui/material/SvgIcon';
 
-export const EmptySVG = (_props: SvgIconProps) => {
+export const EmptySvg = (_props: SvgIconProps) => {
   return (
     <SvgIcon
       width="200"

packages/component/src/ui/empty/empty.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 
-import { EmptySVG } from './EmptySVG';
+import { EmptySvg } from './empty-svg';
 import { StyledEmptyContainer } from './style';
 export type EmptyContentProps = {
   containerStyle?: CSSProperties;
@@ -15,7 +15,7 @@ export const Empty = ({
 }: EmptyContentProps) => {
   return (
     <StyledEmptyContainer style={containerStyle}>
-      <EmptySVG />
+      <EmptySvg />
       <p style={descriptionStyle}>{description}</p>
     </StyledEmptyContainer>
   );

packages/component/src/ui/empty/index.ts

@@ -1 +1 @@
-export * from './Empty';
+export * from './empty';

packages/component/src/ui/input/index.ts

@@ -1,3 +1,3 @@
-export * from './Input';
-import { Input } from './Input';
+export * from './input';
+import { Input } from './input';
 export default Input;

packages/component/src/ui/layout/index.ts

@@ -1,2 +1,2 @@
-export * from './Content';
-export * from './Wrapper';
+export * from './content';
+export * from './wrapper';

packages/component/src/ui/menu/index.ts

@@ -1,4 +1,4 @@
-export * from './Menu';
+export * from './menu';
 // export { StyledMenuItem as MenuItem } from './styles';
-export * from './MenuItem';
-export * from './PureMenu';
+export * from './menu-item';
+export * from './pure-menu';