From 9d5240794f6877ecf99a0beab209b22be206413e Mon Sep 17 00:00:00 2001
From: Duc-Quan Do <99700700+ducquando@users.noreply.github.com>
Date: Fri, 3 May 2024 20:13:55 +0700
Subject: [PATCH] Display app's version  (#10)

* Add about tab in settings modal

* Include version into vitest

* Include the env file in ts
---
 package.json                                  |  2 +-
 src/const/texts.ts                            |  7 +++
 .../components/modal/SettingModal.tsx         | 12 +++-
 .../components/settings/AboutSetting.tsx      | 58 +++++++++++++++++++
 src/wireframes/components/settings/index.ts   |  1 +
 tsconfig.json                                 |  2 +-
 vite-env.d.ts                                 |  1 +
 vite.config.ts                                |  6 +-
 vitest.config.ts                              |  1 +
 9 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 src/wireframes/components/settings/AboutSetting.tsx
 create mode 100644 vite-env.d.ts

diff --git a/package.json b/package.json
index 5c7bc7b..a259a99 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codeslide.net",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
diff --git a/src/const/texts.ts b/src/const/texts.ts
index 833c776..52f38ee 100644
--- a/src/const/texts.ts
+++ b/src/const/texts.ts
@@ -22,6 +22,8 @@ export const texts = {
         background: 'Background Color',
         bringForwards: 'Bring Forwards',
         bringToFront: 'Bring to Front',
+        contactAuthor: 'Author',
+        contactEmail: 'Email',
         copy: 'Copy',
         copyTooltip: 'Copy Items',
         custom: 'Custom',
@@ -83,6 +85,7 @@ export const texts = {
         rename: 'Rename',
         renameTooltip: 'Rename presentation',
         removeTooltip: 'Delete selected items',
+        reportIssue: 'Report',
         saveDiagram: 'Download',
         saveDiagramToFileTooltip: 'Export to PDF',
         saveDiagramTooltip: 'Download',
@@ -104,10 +107,14 @@ export const texts = {
         ungroup: 'Ungroup',
         ungroupTooltip: 'Ungroup Items',
         unsaved: 'unsaved',
+        version: 'Version',
         visual: 'Visual',
         walkthrough: 'Tutorial',
         width: 'Width',
         zoomIn: 'Zoom In',
         zoomOut: 'Zoom Out',
+    },
+    vars: {
+        version: __APP_VERSION__,
     }
 };
diff --git a/src/wireframes/components/modal/SettingModal.tsx b/src/wireframes/components/modal/SettingModal.tsx
index 0b2d770..28af53b 100644
--- a/src/wireframes/components/modal/SettingModal.tsx
+++ b/src/wireframes/components/modal/SettingModal.tsx
@@ -8,12 +8,12 @@
 
 
 import { Modal, Layout, Segmented, Divider } from 'antd';
-import { ColorSetting, DiagramSetting, PresentSetting } from '../settings';
+import { AboutSetting, ColorSetting, DiagramSetting, PresentSetting } from '../settings';
 import { texts } from '@app/const';
 import { SegmentedOptions } from 'antd/es/segmented';
 import { useState } from 'react';
 
-type SettingMode = 'diagram' | 'palette' | 'presentation';
+type SettingMode = 'about' | 'diagram' | 'palette' | 'presentation';
 type SettingModalProps = {
     // Modal title
     title: string;
@@ -27,9 +27,13 @@ type SettingModalProps = {
 
 export const SettingModal: React.FC<SettingModalProps> = (props: SettingModalProps) => {
     const { title, open, onCancel } = props;
-    const [value, setValue] = useState<SettingMode>('diagram');
+    const [value, setValue] = useState<SettingMode>('about');
 
     const settings: SegmentedOptions<SettingMode> = [
+        {
+            value: 'about',
+            label: texts.common.about,
+        },
         {
             value: 'diagram',
             label: texts.common.diagram,
@@ -47,6 +51,8 @@ export const SettingModal: React.FC<SettingModalProps> = (props: SettingModalPro
     const SettingMenu = () => {
         switch (value) {
             default:
+            case 'about':
+                return <AboutSetting />;
             case 'diagram':
                 return <DiagramSetting />;
             case 'palette':
diff --git a/src/wireframes/components/settings/AboutSetting.tsx b/src/wireframes/components/settings/AboutSetting.tsx
new file mode 100644
index 0000000..7449185
--- /dev/null
+++ b/src/wireframes/components/settings/AboutSetting.tsx
@@ -0,0 +1,58 @@
+/*
+ * codeslide.net
+ *
+ * @license
+ * Forked from mydraft.cc by Sebastian Stehle
+ * Copyright (c) Do Duc Quan. All rights reserved.
+*/
+
+import * as React from 'react';
+
+import 'prismjs/themes/prism.css';
+import { Col, Row } from 'antd';
+import { texts } from '@app/const';
+
+export const AboutSetting = React.memo(() => {
+
+    return (
+        <>
+            <Row className='property'>
+                <h1>CodeSlide</h1>
+            </Row>
+
+            <Row className='property'>
+                <p>Copyright © 2024. <a href='https://www.codeslide.net'>CodeSlide</a>. MIT License</p>
+            </Row>
+
+            <Row className='property'>
+                <Col span={1} />
+                <Col span={3} className='property-label'>{texts.common.version}</Col>
+                <Col span={7} className='property-label'>{texts.vars.version}</Col>
+            </Row>
+
+            <Row className='property'>
+                <Col span={1} />
+                <Col span={3} className='property-label'>{texts.common.contactAuthor}</Col>
+                <Col span={7} className='property-label'>
+                    <a href='https://www.dodquan.com'>Do Duc Quan</a>
+                </Col>
+            </Row>
+            
+            <Row className='property'>
+                <Col span={1} />
+                <Col span={3} className='property-label'>{texts.common.contactEmail}</Col>
+                <Col span={7} className='property-label'>
+                    <a href='mailto:dodquan@gmail.com'>dodquan@gmail.com</a>
+                </Col>
+            </Row>
+
+            <Row className='property'>
+                <Col span={1} />
+                <Col span={3} className='property-label'>{texts.common.reportIssue}</Col>
+                <Col span={7} className='property-label'>
+                    <a href='https://github.com/code-slide/ui/issues'>GitHub Issues</a>
+                </Col>
+            </Row>
+        </>
+    );
+})
\ No newline at end of file
diff --git a/src/wireframes/components/settings/index.ts b/src/wireframes/components/settings/index.ts
index 2a13bdb..875a6dc 100644
--- a/src/wireframes/components/settings/index.ts
+++ b/src/wireframes/components/settings/index.ts
@@ -1,3 +1,4 @@
+export * from './AboutSetting';
 export * from './ColorSetting';
 export * from './DiagramSetting';
 export * from './PresentSetting';
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index d11c7e7..8ccf1df 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,6 @@
             "vite/client"
         ]
     },
-    "include": ["src"],
+    "include": ["src", "vite-env.d.ts"],
     "references": [{ "path": "./tsconfig.node.json" }]
 }
\ No newline at end of file
diff --git a/vite-env.d.ts b/vite-env.d.ts
new file mode 100644
index 0000000..05904ad
--- /dev/null
+++ b/vite-env.d.ts
@@ -0,0 +1 @@
+declare const __APP_VERSION__: string;
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index eae4dfa..0e5076e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -34,5 +34,9 @@ export default defineConfig({
             autoprefixer({}) // add options if needed
           ],
         }
-      }
+    },
+
+    define: {
+        __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+    }
 });
\ No newline at end of file
diff --git a/vitest.config.ts b/vitest.config.ts
index ad0ea51..6465c4d 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -11,6 +11,7 @@ export default defineConfig({
 
     define: {
         __REACT_DEVTOOLS_GLOBAL_HOOK__: { isDisabled: true },
+        __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
     },
 
     test: {