refactor: export { EditorMap, PreviewMap }

src/components/Preview/index.tsx

@@ -3,15 +3,7 @@ import { useRouter } from 'next/router';
 import { ref, onValue, DataSnapshot } from '@firebase/database';
 
 import { db } from '@/lib/firebase';
-import { TextWidget } from '@/components/TextWidget';
-import { TimeWidget } from '@/components/TimeWidget';
-import { IFrameWidget } from '@/components/IFrameWidget';
-
-const Widgets = {
-  'text': TextWidget,
-  'time': TimeWidget,
-  'iframe': IFrameWidget,
-};
+import { PreviewMap } from '@/components/widgets';
 
 type Widget = {
   name: string;
@@ -42,7 +34,7 @@ const Preview = ({ profile }: PreviewProps) => {
       {
         Object.keys(widgets).map((id) => {
           const widget: any = widgets[id];
-          const Widget = Widgets[widget.name];
+          const Widget = PreviewMap[widget.name];
           return <Widget key={id} {...widget.props} />
         })
       }

src/components/admin/Dialog/AddWidgetDialog.tsx

@@ -14,15 +14,7 @@ import {
 } from '@mui/material';
 import { ref, set, onValue } from '@firebase/database';
 import { db } from '@/lib/firebase';
-import { TextWidgetEditor } from '@/components/TextWidget';
-import { TimeWidgetEditor } from '@/components/TimeWidget';
-import { IFrameWidgetEditor } from '@/components/IFrameWidget';
-
-const Editors = {
-  text: TextWidgetEditor,
-  time: TimeWidgetEditor,
-  iframe: IFrameWidgetEditor,
-};
+import { EditorMap } from '@/components/widgets';
 
 type AddWidgetDialogProps = {
  profile: string;
@@ -94,7 +86,7 @@ const AddWidgetDialog = ({ profile, open, onClose }: AddWidgetDialogProps) => {
         <Button color="primary" variant="contained" onClick={() => {
           set(ref(db, `/profiles/${profile}/widgets/${widgetId}`), {
             name: widgetType,
-            props: Editors[widgetType].defaultProps
+            props: EditorMap[widgetType].defaultProps
           });
 
           setWidgetId("");

src/components/admin/Editors/index.tsx

@@ -1,15 +1,7 @@
 import { useEffect, useState } from 'react';
 import { ref, onValue, DataSnapshot } from '@firebase/database';
 import { db } from '@/lib/firebase';
-import { TextWidgetEditor } from '@/components/TextWidget';
-import { TimeWidgetEditor } from '@/components/TimeWidget';
-import { IFrameWidgetEditor } from '@/components/IFrameWidget';
-
-const EditorMap = {
-  text: TextWidgetEditor,
-  time: TimeWidgetEditor,
-  iframe: IFrameWidgetEditor,
-};
+import { EditorMap } from '@/components/widgets';
 
 type Widget = {
   name: string;

src/components/TextWidget/editor.tsx → src/components/widgets/TextWidget/editor.tsx

@@ -10,7 +10,7 @@ import styled from 'styled-components';
 import { Property } from 'csstype';
 import { ref, set, onValue } from '@firebase/database';
 import { db } from '@/lib/firebase';
-import type { TextWidgetProps } from '@/components/TextWidget/types';
+import type { TextWidgetProps } from './types';
 
 type Props = {
   profile: string;

src/components/TextWidget/widget.tsx → src/components/widgets/TextWidget/widget.tsx

@@ -1,5 +1,5 @@
 import React, { VFC, CSSProperties } from 'react';
-import type { TextWidgetProps } from '@/components/TextWidget/types';
+import type { TextWidgetProps } from './types';
 
 const calcTextShadow = (weight, color) => {
   const edge = [

src/components/widgets/index.ts

@@ -0,0 +1,15 @@
+import { TextWidget, TextWidgetEditor } from './TextWidget';
+import { TimeWidget, TimeWidgetEditor } from './TimeWidget';
+import { IFrameWidget, IFrameWidgetEditor } from './IFrameWidget';
+
+export const PreviewMap = {
+  text: TextWidget,
+  time: TimeWidget,
+  iframe: IFrameWidget,
+};
+
+export const EditorMap = {
+  text: TextWidgetEditor,
+  time: TimeWidgetEditor,
+  iframe: IFrameWidgetEditor,
+};

src/pages/admin/[id]/index.tsx

@@ -12,15 +12,7 @@ import { auth, db } from '@/lib/firebase';
 import { Signin } from '@/components/admin/signin';
 import { Navbar } from '@/components/admin/Navbar';
 import { LeftSideBar } from '@/components/admin/LeftSideNav';
-import { TextWidgetEditor } from '@/components/TextWidget';
-import { TimeWidgetEditor } from '@/components/TimeWidget';
-import { IFrameWidgetEditor } from '@/components/IFrameWidget';
-
-const EditorMap = {
-  text: TextWidgetEditor,
-  time: TimeWidgetEditor,
-  iframe: IFrameWidgetEditor,
-};
+import { EditorMap } from '@/components/widgets';
 
 type Widget = {
   name: string;

src/pages/preview/[id]/index.tsx

@@ -1,24 +1,8 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-import { TextWidget } from '@/components/TextWidget';
-import { TimeWidget } from '@/components/TimeWidget';
-import { IFrameWidget } from '@/components/IFrameWidget';
 import { Preview } from '@/components/Preview';
 
-const Widgets = {
-  'text': TextWidget,
-  'time': TimeWidget,
-  'iframe': IFrameWidget,
-};
-
-type Widget = {
-  name: string;
-  props: any;
-}
-
-type WidgetList = { [key: string]: Widget }
-
 const PreviewPage = () => {
   const router = useRouter();
   const profile = router.query.id as string;