Prevent Component directly references Atom

packages/component/src/atom/ClipboardAtom.ts

@@ -4,7 +4,7 @@
  * Created by sunvisor on 2024/02/25.
  * Copyright (C) Sunvisor Lab. 2024.
  */
-import { atom } from 'jotai/index';
+import { atom } from 'jotai';
 import { Shapes } from '@sunvisor/super-leopard-core';
 
 export const ClipboardAtom = atom<Shapes>(new Shapes([]));

packages/component/src/atom/HistoryAtom.test.ts

@@ -14,7 +14,7 @@ import {
   RedoHistoryAtom,
   UndoHistoryAtom
 } from "./HistoryAtom";
-import { createStore } from 'jotai/index';
+import { createStore } from 'jotai';
 import { ReportData } from '@sunvisor/super-leopard-core';
 import { ReadShapesAtom } from './ReportAtom';
 import { shapeTestData, shapeTestData2 } from '@sunvisor/super-leopard-test-assets';

packages/component/src/atom/ReportAtom.test.ts

@@ -13,15 +13,14 @@ import {
   ReadReportAtom,
   ReadShapesAtom,
   RemoveLayerAtom,
-  ReportHasListAtom,
   RestoreReportAtom,
   SetActiveLayerIndexAtom,
   SetReportAtom,
   SetShapesAtom,
   UpdateLayerNameAtom,
   UpdateLayersAtom,
 } from "./ReportAtom";
-import { createStore } from 'jotai/index';
+import { createStore } from 'jotai';
 import { ReadHistoryAtom } from './HistoryAtom';
 import { createShapes, ReportData } from '@sunvisor/super-leopard-core';
 import { layerTestData } from '../__test_assets__';
@@ -30,30 +29,6 @@ import { billTestData, shapeTestData } from '@sunvisor/super-leopard-test-assets
 
 describe('Tests for ReportAtom', () => {
 
-  describe('Tests for ReportHasListAtom', () => {
-
-    test('Returns true if the report contains a list', () => {
-      // Arrange
-      const store = createStore();
-      store.set(SetReportAtom, billTestData);
-      // Act
-      const result = store.get(ReportHasListAtom);
-      // Assert
-      expect(result).toBe(true);
-    });
-
-    test('Returns false if the report does not contain a list', () => {
-      // Arrange
-      const store = createStore();
-      store.set(SetReportAtom, { page: { unit: 'mm', size: 'A4' }, layers: layerTestData });
-      // Act
-      const result = store.get(ReportHasListAtom);
-      // Assert
-      expect(result).toBe(false);
-    });
-
-  });
-
   describe('Tests for SetReportAtom', () => {
 
     const store = createStore();
@@ -130,7 +105,7 @@ describe('Tests for ReportAtom', () => {
 
   });
 
-  describe('Tests for UpdateActiveLayerShapesAtom', () => {
+  describe('Tests for ApplyShapesToReportAtom', () => {
 
     test('Updates shapes', () => {
       // Arrange

packages/component/src/atom/ReportAtom.ts

@@ -8,7 +8,6 @@
 import { atom } from 'jotai';
 import {
   ReportData,
-  reportHasList,
   updateLayers,
   Page,
   createShapes,
@@ -62,8 +61,6 @@ export const ReadActiveLayerIndexAtom = atom((get) => get(ActiveLayerIndexAtom))
 
 export const ReadScaleAtom = atom((get) => get(ScaleAtom));
 
-export const ReportHasListAtom = atom((get) => reportHasList(get(ReportAtom)));
-
 /**
  * Set Report and add history
  * Only used in open report or create new report

packages/component/src/atom/SelectionAtom.test.ts

@@ -5,7 +5,7 @@
  * Copyright (C) Sunvisor Lab. 2024.
  */
 import { ClearSelectionAtom, SelectionAtom } from "./SelectionAtom";
-import { createStore } from 'jotai/index';
+import { createStore } from 'jotai';
 import { createShapes } from '@sunvisor/super-leopard-core';
 import { shapeTestData } from '@sunvisor/super-leopard-test-assets';
 

packages/component/src/atom/SelectionAtom.ts

@@ -4,7 +4,7 @@
  * Created by sunvisor on 2024/02/10.
  * Copyright (C) Sunvisor Lab. 2024.
  */
-import { atom } from 'jotai/index';
+import { atom } from 'jotai';
 import { Shapes } from '@sunvisor/super-leopard-core';
 
 export const SelectionAtom = atom<Shapes>(new Shapes([]));

packages/component/src/component/objectList/ObjectListPanel.tsx

@@ -5,19 +5,19 @@
  * Copyright (C) Sunvisor Lab. 2024.
  */
 import { useCallback } from "react";
-import { useAtomValue, useSetAtom } from 'jotai';
-import { ReadShapesAtom } from '../../atom/ReportAtom';
 import ObjectList from '../objectList/ObjectList';
-import { SelectionAtom } from '../../atom/SelectionAtom';
 import { Shape, Shapes } from '@sunvisor/super-leopard-core';
+import useShapes from '../reportEditor/hooks/useShapes';
+import useSelection from '../../hooks/useSelection';
+
 
 type Props = {
   showPropertyTab: () => void;
 }
 
 export default function ObjectListPanel({ showPropertyTab }: Props) {
-  const shapes = useAtomValue(ReadShapesAtom);
-  const setSelection = useSetAtom(SelectionAtom);
+  const { shapes } = useShapes()
+  const { setSelection } = useSelection();
 
   const handleClick = useCallback((shape: Shape) => {
     setSelection(new Shapes([shape]))

packages/component/src/component/paper/Paper.tsx

@@ -4,12 +4,10 @@
  * Created by sunvisor on 2024/03/13.
  * Copyright (C) Sunvisor Lab. 2024.
  */
-import { createPage, PageData } from '@sunvisor/super-leopard-core';
-import { useAtomValue } from 'jotai/index';
-import { ReadScaleAtom } from '../../atom/ReportAtom';
-import { Page } from '@sunvisor/super-leopard-core';
+import { createPage, Page, PageData } from '@sunvisor/super-leopard-core';
 import styled from '@emotion/styled';
 import React from 'react';
+import useScale from '../../hooks/useScale';
 
 type Props = {
   page: PageData | Page;
@@ -37,7 +35,7 @@ const Inner = styled('div')({
 
 export default function Paper(props: Props) {
   const page = props.page instanceof Page ? props.page : createPage(props.page);
-  const scale = useAtomValue(ReadScaleAtom);
+  const { scale } = useScale();
   const width = scale.toPixel(page.width);
   const height = scale.toPixel(page.height);
 

packages/component/src/component/property/PropertyEditor.stories.tsx

@@ -10,10 +10,9 @@ import PropertyEditor from "./PropertyEditor";
 import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/react';
 import { createShapes, Shapes } from '@sunvisor/super-leopard-core';
 import { SelectionAtom } from '../../atom/SelectionAtom';
-import { createStore } from 'jotai/index';
+import { createStore, Provider } from 'jotai';
 import { SetReportAtom } from '../../atom/ReportAtom';
 import { emptyReport } from '../emptyReport';
-import { Provider } from 'jotai';
 import { ClipboardAtom } from '../../atom/ClipboardAtom';
 import { testImageOptions } from '../../__test_assets__';
 import { shapeTestData } from '@sunvisor/super-leopard-test-assets';

packages/component/src/component/property/PropertyEditor.tsx

@@ -5,10 +5,7 @@
  * Copyright (C) Sunvisor Lab. 2024.
  */
 import { Box, } from '@mui/material';
-import { useAtomValue } from 'jotai';
-import { SelectionAtom } from '../../atom/SelectionAtom';
 import ShapeProperty from './object/ShapeProperty';
-import { ReadPageAtom, ReadScaleAtom } from '../../atom/ReportAtom';
 import TransformProperty from './object/TransformProperty';
 import ClipboardTool from './tool/ClipboardTool';
 import ZOrderTool from './tool/ZOrderTool';
@@ -17,6 +14,9 @@ import GroupTool from './tool/GroupTool';
 import PageProperty from './page/PageProperty';
 import { FontList } from '../../font';
 import { ImageOptions } from '../../settings';
+import usePage from '../../hooks/usePage';
+import useScale from '../../hooks/useScale';
+import useSelection from '../../hooks/useSelection';
 
 
 type Props = {
@@ -27,9 +27,9 @@ type Props = {
 
 export default function PropertyEditor(props: Props) {
   const { imageOptions, errorImageUrl, fontList } = props;
-  const selection = useAtomValue(SelectionAtom);
-  const scale = useAtomValue(ReadScaleAtom);
-  const page = useAtomValue(ReadPageAtom);
+  const { selection } = useSelection();
+  const { scale } = useScale();
+  const { page } = usePage();
 
   return (
     <Box>

packages/component/src/component/property/object/FieldProperty.tsx

@@ -24,12 +24,11 @@ import EllipsePanel from '../panel/EllipsePanel';
 import ImagePanel from '../panel/ImagePanel';
 import LinePanel from '../panel/LinePanel';
 import RectPanel from '../panel/RectPanel';
-import { useAtomValue } from 'jotai';
-import { StylesAtom } from '../../../atom/StylesAtom';
 import { UpdateHandler } from './ShapeProperty';
 import BarcodePanel from '../panel/BarcodePanel';
 import ShapeState from '../ShapeState';
 import { ImageOptions } from '../../../settings';
+import useStyles from '../../../hooks/useStyles';
 
 type Props = {
   unit: UnitValue;
@@ -63,7 +62,7 @@ export default function FieldProperty(props: Props) {
   const [fieldName, setFieldName] = useState(shape.name);
   const [shapeType, setShapeType] = useState<StaticShapeType>(shape.shape.type as StaticShapeType);
   const PanelComponent: PanelType = useMemo(() => panels[shapeType] as PanelType, [shapeType]);
-  const defaultStyle = useAtomValue(StylesAtom);
+  const { styles: defaultStyle } = useStyles();
   const shapeProperty = useMemo(
     () => serializeShape(shape.shape), [shape.shape]
   );

packages/component/src/component/property/object/ShapeProperty.stories.tsx

@@ -24,12 +24,13 @@ import {
   Field,
   Image,
   Line,
-  Rect, Shape, Shapes,
+  Rect,
+  Shape,
+  Shapes,
   UnitType
 } from '@sunvisor/super-leopard-core';
 import { testFontList, testImageOptions } from '../../../__test_assets__';
-import { Provider } from 'jotai';
-import { createStore } from 'jotai/index';
+import { createStore, Provider } from 'jotai';
 import { SelectionAtom } from '../../../atom/SelectionAtom';
 import { fieldTestData, shapeTestData } from '@sunvisor/super-leopard-test-assets';
 

packages/component/src/component/property/object/ShapeProperty.tsx

@@ -29,12 +29,11 @@ import LineProperty from './LineProperty';
 import ListProperty from './ListProperty';
 import RectProperty from './RectProperty';
 import TextProperty from './TextProperty';
-import { useAtomValue, useSetAtom } from 'jotai/index';
-import { SelectionAtom } from '../../../atom/SelectionAtom';
 import useShapes from '../../reportEditor/hooks/useShapes';
 import { FontList } from '../../../font';
 import BarcodeProperty from './BarcodeProperty';
 import { ImageOptions } from '../../../settings';
+import useSelection from '../../../hooks/useSelection';
 
 
 export type UpdateHandler = (target: Shape, updated: Shape) => void;
@@ -49,8 +48,7 @@ type Props = {
 
 export default function ShapeProperty(props: Props) {
   const { unit, shape, imageOptions, fontList, errorImageUrl } = props;
-  const selection = useAtomValue(SelectionAtom);
-  const setSelection = useSetAtom(SelectionAtom);
+  const { selection, setSelection } = useSelection();
   const { updateShapes } = useShapes();
 
   const handleUpdate = useCallback(
@@ -70,11 +68,12 @@ export default function ShapeProperty(props: Props) {
         case 'ellipse':
           return <EllipseProperty unit={unit} shape={shape as Ellipse} onUpdate={handleUpdate}/>;
         case 'field':
-          return <FieldProperty unit={unit} shape={shape as Field} fontList={fontList} imageOptions={imageOptions} onUpdate={handleUpdate}/>;
+          return <FieldProperty unit={unit} shape={shape as Field} fontList={fontList} imageOptions={imageOptions}
+                                onUpdate={handleUpdate}/>;
         case 'group':
           return <GroupProperty unit={unit} shape={shape as Group} onUpdate={handleUpdate}/>;
         case 'image':
-          return <ImageProperty unit={unit} shape={shape as Image} onUpdate={handleUpdate} imageOptions={imageOptions} />;
+          return <ImageProperty unit={unit} shape={shape as Image} onUpdate={handleUpdate} imageOptions={imageOptions}/>;
         case 'line':
           return <LineProperty unit={unit} shape={shape as Line} onUpdate={handleUpdate}/>;
         case 'list':
@@ -84,7 +83,8 @@ export default function ShapeProperty(props: Props) {
         case 'text':
           return <TextProperty unit={unit} shape={shape as Text} fontList={fontList} onUpdate={handleUpdate}/>;
         case 'barcode':
-          return <BarcodeProperty unit={unit} shape={shape as Barcode} onUpdate={handleUpdate} errorImageUrl={errorImageUrl}/>
+          return <BarcodeProperty unit={unit} shape={shape as Barcode} onUpdate={handleUpdate}
+                                  errorImageUrl={errorImageUrl}/>
         default:
           return null;
       }

packages/component/src/component/property/object/TransformProperty.tsx

@@ -5,21 +5,19 @@
  * Copyright (C) Sunvisor Lab. 2024.
  */
 import { useCallback, useMemo } from "react";
-import { useAtomValue, useSetAtom } from 'jotai';
-import { SelectionAtom } from '../../../atom/SelectionAtom';
 import { Box, UnitValue } from '@sunvisor/super-leopard-core';
 import useShapes from '../../reportEditor/hooks/useShapes';
 import TransformPanel from '../panel/TransformPanel';
+import useSelection from '../../../hooks/useSelection';
 
 type Props = {
   unit: UnitValue;
 }
 
 export default function TransformProperty(props: Props) {
   const { unit } = props;
-  const selection = useAtomValue(SelectionAtom);
+  const { selection, setSelection } = useSelection();
   const { updateShapes } = useShapes();
-  const setSelection = useSetAtom(SelectionAtom);
   const box = useMemo(() => selection.bbox, [selection.bbox]);
 
   const handleUpdate = useCallback(

packages/component/src/component/property/page/PageProperty.tsx

@@ -13,8 +13,8 @@ import PageMarginFields from '../fieldGroup/PageMarginFields';
 import getCaptions from '../../../captions/getCaptions';
 import PropertyBox from '../object/PropertyBox';
 import Caption from '../Caption';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { ReadReportAtom, SetReportAtom } from '../../../atom/ReportAtom';
+import useReport from '../../../hooks/useReport';
+
 
 type Props = {
   page: Page;
@@ -24,8 +24,7 @@ export default function PageProperty(props: Props) {
   const captions = getCaptions().pageProperty;
   const [page, setPage] = useState<Page>(props.page);
   const [unit, setUnit] = React.useState<UnitValue>(page.unit);
-  const report = useAtomValue(ReadReportAtom);
-  const setReport = useSetAtom(SetReportAtom);
+  const { report, setReport } = useReport();
 
   useEffect(() => {
     setPage(props.page);

packages/component/src/component/property/style/Border.stories.tsx

@@ -7,12 +7,10 @@
  * Copyright (C) Sunvisor Lab. 2024.
  */
 import Border from "./Border";
-import { Meta, StoryContext, StoryObj } from '@storybook/react';
-import { createStore } from 'jotai/index';
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/react';
+import { createStore, Provider } from 'jotai';
 import { BorderAtom } from '../../../atom/StylesAtom';
-import { Provider } from 'jotai';
 import { fieldDecorator } from '../../../__test_assets__';
-import { StoryFn } from '@storybook/react';
 
 type Story = StoryObj<typeof Border>
 

packages/component/src/component/property/style/Border.tsx

@@ -6,12 +6,12 @@
  */
 import { useCallback, useEffect, useState } from "react";
 import BorderFields from '../fieldGroup/BorderFields';
-import { useAtom } from 'jotai/index';
-import { BorderAtom } from '../../../atom/StylesAtom';
 import { BorderData, } from '@sunvisor/super-leopard-core';
+import useStyles from '../../../hooks/useStyles';
+
 
 export default function Border() {
-  const [border, setBorder] = useAtom(BorderAtom);
+  const { border, setBorder } = useStyles();
   const [values, setValues] = useState<BorderData | undefined>(border);
 
   const handleChangeValue = useCallback(

packages/component/src/component/property/style/FillColor.stories.tsx

@@ -8,8 +8,7 @@
  */
 import FillColor from "./FillColor";
 import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/react';
-import { createStore } from 'jotai/index';
-import { Provider } from 'jotai';
+import { createStore, Provider } from 'jotai';
 import { FillColorAtom } from '../../../atom/StylesAtom';
 import { fieldDecorator } from '../../../__test_assets__';