Display app's version (#10)

* Add about tab in settings modal

* Include version into vitest

* Include the env file in ts

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",

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__,
     }
 };

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':

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>
+        </>
+    );
+})

src/wireframes/components/settings/index.ts

@@ -1,3 +1,4 @@
+export * from './AboutSetting';
 export * from './ColorSetting';
 export * from './DiagramSetting';
 export * from './PresentSetting';

tsconfig.json

@@ -25,6 +25,6 @@
             "vite/client"
         ]
     },
-    "include": ["src"],
+    "include": ["src", "vite-env.d.ts"],
     "references": [{ "path": "./tsconfig.node.json" }]
 }

vite-env.d.ts

@@ -0,0 +1 @@
+declare const __APP_VERSION__: string;

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),
+    }
 });

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: {