Fix/tag select storage

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime', // React 17+ の新しいJSX変換用（react-in-jsx-scopeルールを自動で無効化）
     'plugin:react-hooks/recommended',
     'plugin:jsx-a11y/recommended',
     'prettier',

babel.config.js

@@ -1,4 +1,8 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+  presets: [
+    '@babel/preset-env',
+    ['@babel/preset-react', { runtime: 'automatic' }], // React 17+の新しいJSX変換を有効化
+    '@babel/preset-typescript',
+  ],
   plugins: ['@babel/plugin-transform-runtime'],
 };

example/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import CustomFieldMaker from '../src';
 

src/components/FieldConfirmSource.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TableLayoutConfirm } from './confirmLayouts/TableLayoutConfirm';
 
 export function FieldConfirmSource() {

src/components/FieldGroupConfirmSource.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { GroupTableLayoutConfirm } from './confirmLayouts/GroupTableLayoutConfirm';
 
 export function FieldGroupConfirmSource() {

src/components/FieldGroupSource.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { GroupSection } from './layouts/GroupSection';
 import { GroupTableLayout } from './layouts/GroupTableLayout';
 import { useMakerContext } from '../stores/MakerContext';

src/components/FieldSource.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Section } from './layouts/Section';
 import { TableLayout } from './layouts/TableLayout';
 import { useMakerContext } from '../stores/MakerContext';

src/components/Highlighter.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState } from 'react';
+import { useEffect, useCallback, useState } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { decode } from 'html-entities';
 import { html as beautifyHtml } from 'js-beautify';

src/components/ModalDialog.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import classnames from 'classnames';
 
 export function ModalDialog(props) {

src/components/Notify.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../stores/MakerContext';
 

src/components/Tooltip.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { forwardRef } from 'react';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import classnames from 'classnames';

src/components/UnitConfirmSource.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { UnitTableLayoutConfirm } from './confirmLayouts/UnitTableLayoutConfirm';
 
 export function UnitConfirmSource() {

src/components/UnitGroupConfirmSource.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { UnitGroupTableLayoutConfirm } from './confirmLayouts/UnitGroupTableLayoutConfirm';
 
 export function UnitGroupConfirmSource() {

src/components/UnitGroupSource.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { UnitGroupSection } from './layouts/UnitGroupSection';
 import { UnitGroupTableLayout } from './layouts/UnitGroupTableLayout';
 import { useMakerContext } from '../stores/MakerContext';

src/components/UnitSource.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { UnitSection } from './layouts/UnitSection';
 import { UnitTableLayout } from './layouts/UnitTableLayout';
 import { useMakerContext } from '../stores/MakerContext';

src/components/confirmLayouts/GroupTableLayoutConfirm.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { WrapTable } from '../html/WrapTable';

src/components/confirmLayouts/TableLayoutConfirm.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 

src/components/confirmLayouts/UnitGroupTableLayoutConfirm.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { WrapTable } from '../html/WrapTable';

src/components/confirmLayouts/UnitTableLayoutConfirm.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 

src/components/generator/Field.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useMakerContext } from '../../stores/MakerContext';
 import { ConverterModal } from './base/ConverterModal';
 import { Alert } from './base/Alert';

src/components/generator/FieldGroup.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import Tooltip from '../Tooltip';
 import { useMakerContext } from '../../stores/MakerContext';
 import { Alert } from './base/Alert';

src/components/generator/Unit.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useMakerContext } from '../../stores/MakerContext';
 import { ConverterModal } from './base/ConverterModal';
 import { Alert } from './base/Alert';

src/components/generator/UnitGroup.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import Tooltip from '../Tooltip';
 import { useMakerContext } from '../../stores/MakerContext';
 import { Alert } from './base/Alert';

src/components/generator/base/Alert.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function Alert(props) {
   const {
     field: { alert },

src/components/generator/base/Basic.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Tooltip from '../../Tooltip';
 import inputTypesJson from '../../../json/input-types.json';
 

src/components/generator/base/ConverterModal.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { ModalDialog } from '../../ModalDialog';
 
 export function ConverterModal(props) {

src/components/generator/base/DuplicateAlert.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function DuplicateAlert(props) {
   const {
     field: { duplicatedField },

src/components/generator/base/FileOption.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function FileOption(props) {
   const {
     field: { extension, fileName, fileNameMethod },

src/components/generator/base/FormOption.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo, useCallback } from 'react';
+import { useRef, useMemo, useCallback } from 'react';
 import Tooltip from '../../Tooltip';
 import { NoSearchBox } from './NoSearchBox';
 import { useMakerContext } from '../../../stores/MakerContext';

src/components/generator/base/GroupAlert.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function GroupAlert(props) {
   const {
     field: { groupAlert },

src/components/generator/base/ImageOption.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Tooltip from '../../Tooltip';
 
 export function ImageOption(props) {

src/components/generator/base/ImageResizeOption.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function ImageResizeOption(props) {
   const {
     field: { resize, alt },

src/components/generator/base/MediaOption.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function MediaOption(props) {
   const {
     field: { mediaType, useDropArea, useFocusImage, dropAreaWidth, dropAreaHeight, focusImageWidth, focusImageHeight },

src/components/generator/base/NoSearchBox.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function NoSearchBox(props) {
   const { noSearch, setField } = props;
 

src/components/generator/base/Operator.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 const crearField = {
   title: '',

src/components/generator/base/OptionItem.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function OptionItem(props) {
   const {
     field: { option },

src/components/generator/base/Snippet.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Tooltip from '../../Tooltip';
 import prefJson from '../../../json/pref.json';
 

src/components/html/BlockEditor.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/Checkbox.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/FileInput.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/Heading.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useMakerContext } from '../../stores/MakerContext';
 
 export function Heading(props) {

src/components/html/ImageInput.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/Media.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/OptionNoSearch.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 export function OptionNoSearch(props) {
   const { noSearch, name } = props;
 

src/components/html/OptionValidator.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { ConditionalWrap } from '../ConditionalWrap';

src/components/html/OptionValidatorFieldGroup.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { ConditionalWrap } from '../ConditionalWrap';

src/components/html/RadioButton.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/Selectbox.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/Table.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useMakerContext } from '../../stores/MakerContext';
 
 export function Table(props) {

src/components/html/TextInput.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/Textarea.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 import { OptionValidator } from './OptionValidator';

src/components/html/WrapTable.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useMakerContext } from '../../stores/MakerContext';
 import { ConditionalWrap } from '../ConditionalWrap';
 

src/components/layouts/GroupSection.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Fragment } from 'react';
+import { forwardRef, Fragment } from 'react';
 import classnames from 'classnames';
 import { Heading } from '../html/Heading';
 import { TextInput } from '../html/TextInput';

src/components/layouts/GroupTableLayout.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Fragment } from 'react';
+import { forwardRef, Fragment } from 'react';
 import classnames from 'classnames';
 import { TextInput } from '../html/TextInput';
 import { Textarea } from '../html/Textarea';

src/components/layouts/Section.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Heading } from '../html/Heading';
 import { TextInput } from '../html/TextInput';
 import { Textarea } from '../html/Textarea';

src/components/layouts/TableLayout.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import classnames from 'classnames';
 import { Heading } from '../html/Heading';
 import { TextInput } from '../html/TextInput';

src/components/layouts/UnitGroupSection.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef, Fragment } from 'react';
 import { useMakerContext } from '../../stores/MakerContext';
 import classnames from 'classnames';
 import { Heading } from '../html/Heading';
@@ -475,7 +475,7 @@ export const UnitGroupSection = forwardRef((_props, ref) => {
           {unitgroup.name && (
             <>
               {unitgroup.items.map((item, index) => (
-                <React.Fragment key={index}>
+                <Fragment key={index}>
                   {item.type === 'image' && (
                     <>
                       {item.square && item.squareSize && (
@@ -535,7 +535,7 @@ export const UnitGroupSection = forwardRef((_props, ref) => {
                   <input type="hidden" name="unit{id}[]" value={`${item.name}{id}`} />
                   <OptionValidator item={item} />
                   <OptionNoSearch name={`${item.name}{id}`} noSearch={item.noSearch} />
-                </React.Fragment>
+                </Fragment>
               ))}
               <input type="hidden" name="unit{id}[]" value={`@${unitgroup.name}{id}`} />
             </>

src/components/layouts/UnitGroupTableLayout.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Fragment } from 'react';
+import { forwardRef, Fragment } from 'react';
 import classnames from 'classnames';
 import { TextInput } from '../html/TextInput';
 import { Textarea } from '../html/Textarea';

src/components/layouts/UnitSection.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Heading } from '../html/Heading';
 import { TextInput } from '../html/TextInput';
 import { Textarea } from '../html/Textarea';

src/components/layouts/UnitTableLayout.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import classnames from 'classnames';
 import { Heading } from '../html/Heading';
 import { TextInput } from '../html/TextInput';

src/components/navigator/EditorModeNavigator.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useMakerContext } from '../../stores/MakerContext';
 
 export function EditorModeNavigator() {

src/components/navigator/PreviewModeNavigator.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../stores/MakerContext';
 

src/components/navigator/PreviewNavigator.jsx

@@ -5,7 +5,6 @@ import { Notify } from '../Notify';
 import { useMakerContext } from '../../stores/MakerContext';
 import columnIcon from '../../assets/images/add_column.svg';
 import rowIcon from '../../assets/images/add_row.svg';
-import React from 'react';
 
 export function PreviewNavigator() {
   const {

src/containers/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { MakerContextProvider, useMakerContext } from '../stores/MakerContext';
 import { EditorModeNavigator } from '../components/navigator/EditorModeNavigator';
 import { PreviewModeNavigator } from '../components/navigator/PreviewModeNavigator';
@@ -30,8 +30,8 @@ function CustomFieldMaker() {
   };
 
   useEffect(() => {
-    localStorage.setItem(STORAGENAME, JSON.stringify(state));
-  }, [state]);
+    localStorage.setItem(STORAGENAME, JSON.stringify({ state, preview }));
+  }, [state, preview]);
 
   return (
     <div className="customFieldContainer acms-admin-form">