TSC

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/BooleanInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { FormControlLabel, Switch } from '@mui/material';
 

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { HexColorInput, HexColorPicker } from 'react-colorful';
 
 import { Box, Stack, SxProps, Typography } from '@mui/material';

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Swatch.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Box, Button, SxProps } from '@mui/material';
 
 type Props = {

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/index.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import BaseColorInput from './BaseColorInput';
 
 type Props = {

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontFamily/index.tsx → packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontFamily.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { MenuItem, TextField } from '@mui/material';
 
-import { FONT_FAMILIES } from '../../../../../../../documents/blocks/helpers/fontFamily';
+import { FONT_FAMILIES } from '../../../../../../documents/blocks/helpers/fontFamily';
 
 const OPTIONS = FONT_FAMILIES.map((option) => (
   <MenuItem key={option.key} value={option.key} sx={{ fontFamily: option.value }}>

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontSizeInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { TextFieldsOutlined } from '@mui/icons-material';
 import { InputLabel, Stack } from '@mui/material';

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontWeightInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { ToggleButton } from '@mui/material';
 

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/PaddingInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import {
   AlignHorizontalLeftOutlined,

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/RadioGroupInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { InputLabel, Stack, ToggleButtonGroup } from '@mui/material';
 

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/SliderInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { InputLabel, Stack } from '@mui/material';
 

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/TextAlignInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { FormatAlignCenterOutlined, FormatAlignLeftOutlined, FormatAlignRightOutlined } from '@mui/icons-material';
 import { ToggleButton } from '@mui/material';

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/TextInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { InputProps, TextField } from '@mui/material';
 

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/raw/RawSliderInput.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Box, Slider, Stack, Typography } from '@mui/material';
 
 type SliderInputProps = {

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx

@@ -1,4 +1,8 @@
-import SingleStylePropertyPanel, { TStyle } from './SingleStylePropertyPanel';
+import React from 'react';
+
+import { TStyle } from '../../../../../../documents/blocks/helpers/TStyle';
+
+import SingleStylePropertyPanel from './SingleStylePropertyPanel';
 
 type MultiStylePropertyPanelProps = {
   names: (keyof TStyle)[];

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel.tsx

@@ -1,5 +1,8 @@
+import React from 'react';
+
 import { RoundedCornerOutlined } from '@mui/icons-material';
 
+import { TStyle } from '../../../../../../documents/blocks/helpers/TStyle';
 import { NullableColorInput } from '../inputs/ColorInput';
 import { NullableFontFamily } from '../inputs/FontFamily';
 import FontSizeInput from '../inputs/FontSizeInput';
@@ -8,27 +11,14 @@ import PaddingInput from '../inputs/PaddingInput';
 import SliderInput from '../inputs/SliderInput';
 import TextAlignInput from '../inputs/TextAlignInput';
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-type TStyle = {
-  backgroundColor?: any;
-  borderColor?: any;
-  borderRadius?: any;
-  color?: any;
-  fontFamily?: any;
-  fontSize?: any;
-  fontWeight?: any;
-  padding?: any;
-  textAlign?: any;
-};
-
 type StylePropertyPanelProps = {
   name: keyof TStyle;
   value: TStyle;
   onChange: (style: TStyle) => void;
 };
 export default function SingleStylePropertyPanel({ name, value, onChange }: StylePropertyPanelProps) {
   const defaultValue = value[name] ?? null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleChange = (v: any) => {
     onChange({ ...value, [name]: v });
   };

packages/editor-sample/src/documents/blocks/Avatar.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { z } from 'zod';
 
 import { zColor, zPadding, zTextAlign } from './helpers/zod';

packages/editor-sample/src/documents/blocks/Button.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 import { z } from 'zod';
 
 import { zColor, zFontFamily, zFontWeight, zPadding, zTextAlign } from './helpers/zod';

packages/editor-sample/src/documents/blocks/Divider.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { z } from 'zod';
 
 import { zColor, zPadding } from './helpers/zod';

packages/editor-sample/src/documents/blocks/Heading.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { z } from 'zod';
 
 import { zColor, zFontFamily, zFontWeight, zPadding, zTextAlign } from './helpers/zod';

packages/editor-sample/src/documents/blocks/Html.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { z } from 'zod';
 
 import { zColor, zFontFamily, zPadding, zTextAlign } from './helpers/zod';

packages/editor-sample/src/documents/blocks/Image.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { z } from 'zod';
 
 import { zColor, zPadding, zTextAlign } from './helpers/zod';

packages/editor-sample/src/documents/blocks/Spacer.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { z } from 'zod';
 
 export const SpacerPropsSchema = z.object({

packages/editor-sample/src/documents/blocks/Text.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { z } from 'zod';
 
 import { zColor, zFontFamily, zFontWeight, zPadding, zTextAlign } from './helpers/zod';

packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/BlocksMenu.tsx

@@ -1,21 +1,23 @@
+import React from 'react';
+
 import { Box, Menu } from '@mui/material';
 
-import { TBlockConfiguration } from '../../../../documents';
+import { TEditorBlock } from '../../../../editor/core';
 
 import BlockButton from './BlockButton';
 import { BUTTONS } from './buttons';
 
 type BlocksMenuProps = {
   anchorEl: HTMLElement | null;
   setAnchorEl: (v: HTMLElement | null) => void;
-  onSelect: (block: TBlockConfiguration) => void;
+  onSelect: (block: TEditorBlock) => void;
 };
 export default function BlocksMenu({ anchorEl, setAnchorEl, onSelect }: BlocksMenuProps) {
   const onClose = () => {
     setAnchorEl(null);
   };
 
-  const onClick = (block: TBlockConfiguration) => {
+  const onClick = (block: TEditorBlock) => {
     onSelect(block);
     setAnchorEl(null);
   };

packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/DividerButton.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { AddOutlined } from '@mui/icons-material';
 import { Fade, IconButton } from '@mui/material';

packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/PlaceholderButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { AddOutlined } from '@mui/icons-material';
 import { ButtonBase } from '@mui/material';
 

packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/index.tsx

@@ -1,14 +1,14 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-import { TBlockConfiguration } from '../../../../documents';
+import { TEditorBlock } from '../../../../editor/core';
 
 import BlocksMenu from './BlocksMenu';
 import DividerButton from './DividerButton';
 import PlaceholderButton from './PlaceholderButton';
 
 type Props = {
   placeholder?: boolean;
-  onSelect: (block: TBlockConfiguration) => void;
+  onSelect: (block: TEditorBlock) => void;
 };
 export default function AddBlockButton({ onSelect, placeholder }: Props) {
   const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);

packages/editor-sample/src/documents/blocks/helpers/TStyle.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export type TStyle = {
+  backgroundColor?: any;
+  borderColor?: any;
+  borderRadius?: any;
+  color?: any;
+  fontFamily?: any;
+  fontSize?: any;
+  fontWeight?: any;
+  padding?: any;
+  textAlign?: any;
+};

packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx

@@ -4,24 +4,13 @@ import { Box } from '@mui/material';
 
 import { useCurrentBlockId } from '../../../editor/EditorBlock';
 import { useEditorState } from '../../../editor/EditorContext';
+import { TStyle } from '../TStyle';
 
 import ReaderBlockWrapper from './ReaderBlockWrapper';
 import TuneMenu from './TuneMenu';
 
 type TEditorBlockWrapperProps = {
-  style: {
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-    backgroundColor?: any;
-    borderColor?: any;
-    borderRadius?: any;
-    color?: any;
-    fontFamily?: any;
-    fontSize?: any;
-    fontWeight?: any;
-    padding?: any;
-    textAlign?: any;
-    /* eslint-enable @typescript-eslint/no-explicit-any */
-  };
+  style: TStyle;
   children: JSX.Element;
 };
 

packages/editor-sample/src/documents/blocks/helpers/block-wrappers/ReaderBlockWrapper.tsx

@@ -1,6 +1,6 @@
-import { CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 
-import { TStyle } from '../../../App/sidebar/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel';
+import { TStyle } from '../TStyle';
 
 type TReaderBlockWrapperProps = {
   style: TStyle;

packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx

@@ -5,7 +5,7 @@ import { IconButton, Paper, Stack, Tooltip } from '@mui/material';
 
 import { TEditorBlock } from '../../../editor/core';
 import { useEditorState } from '../../../editor/EditorContext';
-import { ColumnsContainerProps } from '../../ColumnsContainer';
+import { ColumnsContainerProps } from '../../ColumnsContainer/ColumnsContainerPropsSchema';
 
 const STYLE: CSSProperties = {
   position: 'absolute',

packages/editor-sample/src/documents/blocks/helpers/block-wrappers/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TStyle } from '../../../App/sidebar/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel';
+import { TStyle } from '../TStyle';
 
 import EditorBlockWrapper from './EditorBlockWrapper';
 import ReaderBlockWrapper from './ReaderBlockWrapper';