sunvisor · sunvisor · Mar 18, 2025 · Mar 18, 2025
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sunvisor/super-leopard-base",
   "private": true,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Super Leopard monorepo base",
   "repository": "https://github.com/sunvisor/super-leopard",
   "license": "UNLICENSED",

diff --git a/packages/barcode/package.json b/packages/barcode/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sunvisor/super-leopard-barcode",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Barcode generator for Super Leopard",
   "author": "Sunvisor <hisashi@sunvisor.net> (https://www.sunvisor.net/)",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "watch": "vitest watch"
   },
   "dependencies": {
-    "@sunvisor/super-leopard-core": "^0.1.6",
+    "@sunvisor/super-leopard-core": "^0.1.7",
     "@bwip-js/generic": "^4.5.1"
   }
 }
diff --git a/packages/component/package.json b/packages/component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sunvisor/super-leopard-component",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Visual components for Super Leopard",
   "author": "Sunvisor <hisashi@sunvisor.net> (https://www.sunvisor.net/)",
   "license": "MIT",
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@sunvisor/super-leopard-core": "^0.1.6"
+    "@sunvisor/super-leopard-core": "^0.1.7"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -67,7 +67,7 @@
     "@storybook/react-vite": "^8.6.0",
     "@storybook/test": "^8.6.0",
     "@storybook/test-runner": "^0.21.3",
-    "@sunvisor/super-leopard-test-assets": "^0.1.6",
+    "@sunvisor/super-leopard-test-assets": "^0.1.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",

diff --git a/packages/component/src/__test_assets__/TestApp.tsx b/packages/component/src/__test_assets__/TestApp.tsx
@@ -7,11 +7,12 @@
 import { Box, IconButton } from '@mui/material';
 import UndoIcon from '@mui/icons-material/Undo';
 import RedoIcon from '@mui/icons-material/Redo';
-import { ReportEditor, ReportId, useReportStates } from '../component';
+import { OnSaveHandler, ReportEditor, useReportStates } from '../component';
 import { ReportData } from '@sunvisor/super-leopard-core';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { testSettings } from './settings';
 
+
 function HistoryTool() {
   const { undo, redo, canUndo, canRedo } = useReportStates();
 
@@ -36,22 +37,21 @@ function HistoryTool() {
 }
 
 type Props = {
-  reportId: ReportId;
   report: ReportData;
   title: string;
+  onSave: OnSaveHandler;
 }
 
-export default function TestApp({ reportId, report, title }: Props) {
+export default function TestApp(props: Props) {
+  const [title, setTitle] = useState(props.title);
   return (
     <Box sx={{ width: '100vw', height: '100vh' }}>
       <ReportEditor
-        reportId={reportId}
-        report={report}
+        report={props.report}
         title={title}
         settings={testSettings}
-        onSave={function (id: ReportId, title: string, report: ReportData): void {
-          throw new Error(`Function not implemented. ${id}, ${title}, ${report}`);
-        }}
+        onSave={props.onSave}
+        onChangeTitle={title => setTitle(title)}
         additionalTools={
           {
             before: <HistoryTool/>

diff --git a/packages/component/src/component/index.ts b/packages/component/src/component/index.ts
@@ -2,9 +2,9 @@ export type ImageListData = {
   type: string;
   name: string;
 }
-import ReportEditor, {ReportId, OnSaveHandler} from './reportEditor/ReportEditor';
+import ReportEditor, { ReportId, OnSaveHandler, OnChangeTitleHandler } from './reportEditor/ReportEditor';
 import Report from './report/report/Report';
 import useReportStates from './reportEditor/hooks/useReportStates';
 export { ReportEditor, Report }
-export type { ReportId, OnSaveHandler }
+export type { ReportId, OnSaveHandler, OnChangeTitleHandler }
 export { useReportStates }
diff --git a/packages/component/src/component/property/panel/ImageListPanel.tsx b/packages/component/src/component/property/panel/ImageListPanel.tsx
@@ -53,7 +53,7 @@ export default function ImageListPanel(props: Props) {
           <Box sx={{ flexGrow: 1 }}>
             <Caption>{t.selectMessage}</Caption>
           </Box>
-          <Tooltip title={t.close}>
+          <Tooltip title={translation().operation.close}>
             <IconButton onClick={onIconButtonClick}>
               <CloseIcon/>
             </IconButton>

diff --git a/packages/component/src/component/reportEditor/ReportEditor.stories.tsx b/packages/component/src/component/reportEditor/ReportEditor.stories.tsx
@@ -74,14 +74,14 @@ const meta: Meta<typeof ReportEditor> = {
   args: {
     settings: testSettings,
     onSave: fn(),
+    onChangeTitle: fn(),
   }
 };
 
 export const Bill: Story = {
   args: {
     title: 'Bill',
     report: billTestData,
-    reportId: 1,
     language: 'ja',
   }
 }
@@ -90,23 +90,20 @@ export const InEnglish: Story = {
   args: {
     title: 'Bill',
     report: en.billTestData,
-    reportId: 1,
     language: 'en',
   }
 }
 
 export const Empty: Story = {
   args: {
     title: 'Empty',
-    reportId: 1,
     language: 'ja',
   }
 }
 
 export const AdditionalTools: Story = {
   args: {
     title: 'Empty',
-    reportId: 1,
     language: 'ja',
     additionalTools: {
       before: <NoteAddIcon />,
@@ -118,7 +115,6 @@ export const AdditionalTools: Story = {
 export const HideSaveButton: Story = {
   args: {
     title: 'Empty',
-    reportId: 1,
     language: 'ja',
     showSaveButton: false,
   }
@@ -128,7 +124,6 @@ export const AnotherSettings: Story = {
   args: {
     title: 'Bill',
     report: billTestData,
-    reportId: 1,
     language: 'ja',
     settings: {
       ...testSettings,

diff --git a/packages/component/src/component/reportEditor/ReportEditor.tsx b/packages/component/src/component/reportEditor/ReportEditor.tsx
@@ -20,12 +20,12 @@ import useSelection from '../../hooks/useSelection';
 import { emptyReport } from '../emptyReport';
 
 
-export type OnSaveHandler = (id: ReportId, title: string, report: ReportData) => void;
+export type OnSaveHandler = (report: ReportData) => void;
+export type OnChangeTitleHandler = (title: string) => void;
 export type ReportId = number | 'new';
 
 type Props = {
   report?: ReportData;
-  reportId: ReportId;
   title: string;
   language?: string;
   onSave: OnSaveHandler;
@@ -35,11 +35,11 @@ type Props = {
     before?: ReactNode;
     after?: ReactNode;
   }
+  onChangeTitle: OnChangeTitleHandler;
 }
 
 export default function ReportEditor(props: Props) {
-  const { report: data, reportId, onSave, language, settings } = props;
-  const [title, setTitle] = useState<string>(props.title);
+  const { report: data, onSave, language, settings, onChangeTitle, title } = props;
   const { clearSelection } = useSelection();
   const { report, setReport, applyShapes } = useReport();
   const [mode, setMode] = React.useState<EditMode>("edit");
@@ -61,14 +61,14 @@ export default function ReportEditor(props: Props) {
   }, [setZoom]);
 
   const handleChangeTitle = useCallback((newTitle: string) => {
-    setTitle(newTitle);
-  }, [setTitle]);
+    onChangeTitle(newTitle);
+  }, [onChangeTitle]);
 
   const handleSave = useCallback(async () => {
     applyShapes();
-    onSave(reportId, title, report);
+    onSave(report);
     clearSelection();
-  }, [applyShapes, onSave, title, report, clearSelection]);
+  }, [applyShapes, onSave, report, clearSelection]);
 
   return (
     <Box sx={{ width: '100%', height: '100%', padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>

diff --git a/packages/component/src/component/reportEditor/TestApp.stories.tsx b/packages/component/src/component/reportEditor/TestApp.stories.tsx
@@ -9,25 +9,27 @@
 import TestApp from "../../__test_assets__/TestApp";
 import { Meta, StoryObj } from '@storybook/react';
 import { billTestData } from '@sunvisor/super-leopard-test-assets';
+import { fn } from '@storybook/test';
 
 type Story = StoryObj<typeof TestApp>
 
 const meta: Meta<typeof TestApp> = {
   component: TestApp,
+  args: {
+    onSave: fn(),
+  }
 };
 
 export const Bill: Story = {
   args: {
     title: 'Bill',
-    reportId: 1,
     report: billTestData,
   }
 };
 
 export const New: Story = {
   args: {
     'title': 'New Report',
-    reportId: 'new',
   }
 };
 

diff --git a/packages/component/src/component/reportEditor/side/SidePanel.tsx b/packages/component/src/component/reportEditor/side/SidePanel.tsx
@@ -5,9 +5,9 @@
  * Copyright (C) Sunvisor Lab. 2024.
  */
 import React, { useCallback } from "react";
-import { Box, Drawer, IconButton, Tab, Tabs, Toolbar } from '@mui/material';
+import { Box, Drawer, IconButton, Tab, Tabs, Toolbar, Tooltip, Typography } from '@mui/material';
 import { EditMode } from '../ReportWorkArea';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import CloseIcon from '@mui/icons-material/Close';
 import { Shapes } from '@sunvisor/super-leopard-core';
 import translation from '../../../translations/translation';
 import PropertyTab from './PropertyTab';
@@ -77,11 +77,17 @@ export default function SidePanel(props: Props) {
       anchor="right"
       variant="persistent"
     >
-      <Toolbar variant="dense" disableGutters>
+      <Toolbar variant="dense" disableGutters sx={{ px: 1 }}>
+        <Box sx={{ flexGrow: 1, mx: 1 }}>
+          <Typography variant="subtitle1" color="textSecondary">
+            {getTitle(selection, mode)}
+          </Typography>
+        </Box>
+        <Tooltip title={translation().operation.close}>
         <IconButton size="small" onClick={handleDrawerClose}>
-          <ChevronRightIcon/>
-          {getTitle(selection, mode)}
+          <CloseIcon/>
         </IconButton>
+        </Tooltip>
       </Toolbar>
       <Tabs onChange={handleTabChange} value={tabIndex}>
         <Tab label={t.property} value={0}/>

diff --git a/packages/component/src/component/toolbar/EditToolbar.tsx b/packages/component/src/component/toolbar/EditToolbar.tsx
@@ -4,7 +4,7 @@
  * Created by sunvisor on 2024/02/02.
  * Copyright (C) Sunvisor Lab. 2024.
  */
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { Box, Divider, IconButton, Input, Toolbar, Tooltip } from "@mui/material";
 import SaveIcon from '@mui/icons-material/Save';
 import ListAltIcon from '@mui/icons-material/ListAlt';
@@ -29,6 +29,9 @@ export default function EditToolbar(props: Props) {
   const t = translation().editTool;
   const [editTitle, setEditTitle] = React.useState<boolean>(false);
 
+  useEffect(() => {
+    setTitle(props.title);
+  }, [props.title]);
 
   const handleEdit = () => {
     setEditTitle(true);
@@ -55,7 +58,7 @@ export default function EditToolbar(props: Props) {
   }
 
   return (
-    <Toolbar variant="dense">
+    <Toolbar variant="dense" sx={{ px: 1 }} disableGutters>
       {
         props.additionalTools?.before && props.additionalTools.before
       }
@@ -81,17 +84,14 @@ export default function EditToolbar(props: Props) {
         {editTitle
           ? <Input
             inputRef={input => input && input.focus()}
-            sx={{ width: '100%' }}
+            sx={{ width: '100%', color: 'inherit' }}
             type="text"
             value={title}
             onChange={handleChangeTitle}
             onBlur={handleTitleBlur}
             onKeyDown={handleTitleKeyDown}
-            inputProps={{
-              style: { color: 'white' }
-            }}
           /> :
-          <span onClick={() => setEditTitle(true)} style={{ color: 'white' }}>{title}</span>
+          <span onClick={() => setEditTitle(true)} color="inherit" style={{ userSelect: 'none' }}>{title}</span>
         }
       </Box>
       <Tooltip title={t.property}>

diff --git a/packages/component/src/translations/languages/en.ts b/packages/component/src/translations/languages/en.ts
@@ -15,6 +15,7 @@ const operation = {
   paste: "Paste",
   transform: "Transform",
   delete: "Delete",
+  close: 'Close',
 }
 
 const reportObject= {
@@ -155,7 +156,6 @@ const imageProperty= {
   select: "Select Image",
   selectMessage: "Please Select image",
   decide: "Decide",
-  close: 'Close',
 }
 
 const barcodeProperty= {

diff --git a/packages/component/src/translations/languages/ja.ts b/packages/component/src/translations/languages/ja.ts
@@ -12,6 +12,7 @@ const operation = {
   paste: '貼り付け',
   cut: '切り取り',
   transform: '変形',
+  close: '閉じる',
 }
 
 const reportObject = {
@@ -152,7 +153,6 @@ const imageProperty = {
   select: '画像を選択する',
   selectMessage: '使用する画像を選択してください',
   decide: '確定する',
-  close: '閉じる',
 }
 
 const barcodeProperty = {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sunvisor/super-leopard-core",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Core objects for Super Leopard",
   "author": "Sunvisor <hisashi@sunvisor.net> (https://www.sunvisor.net/)",
   "license": "MIT",
@@ -36,6 +36,6 @@
     "watch": "vitest watch"
   },
   "devDependencies": {
-    "@sunvisor/super-leopard-test-assets": "^0.1.6"
+    "@sunvisor/super-leopard-test-assets": "^0.1.7"
   }
 }