jdeniau · jdeniau · Feb 20, 2024 · Feb 20, 2024 · Feb 20, 2024 · Feb 20, 2024
diff --git a/.storybook/config.tsx b/.storybook/config.tsx
@@ -2,7 +2,6 @@ import { configure, addParameters, addDecorator } from '@storybook/react';
 import { makeDecorator } from '@storybook/addons';
 import { themes } from '@storybook/theming';
 import styled, { ThemeProvider } from 'styled-components';
-import 'bootstrap/dist/css/bootstrap.min.css';
 import { DEFAULT_THEME, getSetting } from '../src/theme';
 
 // automatically import all files ending in *.stories.tsx

diff --git a/index.html b/index.html
@@ -3,11 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <title>Tiana Tables</title>
-
-    <link
-      rel="stylesheet"
-      href="../node_modules/bootstrap/dist/css/bootstrap.min.css"
-    />
   </head>
   <body>
     <div id="App"></div>

diff --git a/package.json b/package.json
@@ -21,8 +21,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "bootstrap": "^5.3.2",
-    "classnames": "^2.5.1",
+    "antd": "^5.14.1",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.1.0",
     "env-paths": "^3.0.0",

diff --git a/src/Contexts.tsx b/src/Contexts.tsx
@@ -1,7 +1,14 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 import { ThemeProvider } from 'styled-components';
+import { ConfigProvider, theme as antdTheme } from 'antd';
 import { Configuration } from './configuration/type';
-import { DEFAULT_THEME, THEME_LIST } from './theme';
+import {
+  DEFAULT_THEME,
+  getColor,
+  getSetting,
+  isDarkTheme,
+  THEME_LIST,
+} from './theme';
 
 export interface ConnectToFunc {
   (params: object): void;
@@ -65,10 +72,36 @@ export function ThemeContextProvider({
     setThemeName(newTheme);
   };
 
+  const theme = THEME_LIST[themeName];
+
   return (
-    <ThemeProvider theme={THEME_LIST[themeName]}>
+    <ThemeProvider theme={theme}>
       <ThemeContext.Provider value={{ themeName, changeTheme }}>
-        {children}
+        <ConfigProvider
+          theme={{
+            algorithm: isDarkTheme(theme) ? antdTheme.darkAlgorithm : undefined,
+            token: {
+              // Seed Token
+              colorPrimary: getSetting(theme, 'foreground'),
+
+              // Alias Token
+              colorBgContainer: getSetting(theme, 'background'),
+            },
+            components: {
+              Button: {
+                colorPrimary: getColor(
+                  theme,
+                  'constant.language',
+                  'foreground'
+                ),
+                colorLink: getColor(theme, 'support.type', 'foreground'),
+                algorithm: true,
+              },
+            },
+          }}
+        >
+          {children}
+        </ConfigProvider>
       </ThemeContext.Provider>
     </ThemeProvider>
   );

diff --git a/src/component/Connection/ConnectionForm.tsx b/src/component/Connection/ConnectionForm.tsx
@@ -1,55 +1,24 @@
+import { Button, Checkbox, Form, Input } from 'antd';
 import { ConnectionContext, ConnectToFunc } from '../../Contexts';
 import { ConnectionObject } from './types';
-import { ChangeEvent, FormEvent, PureComponent, useContext } from 'react';
+import { PureComponent, useContext } from 'react';
 
 interface ConnectionFormProps {
   connectTo: ConnectToFunc;
 }
-type ConnectionFormState = ConnectionObject & {
+type ConnectionFormType = ConnectionObject & {
   save: boolean;
 };
 
-class ConnectionForm extends PureComponent<
-  ConnectionFormProps,
-  ConnectionFormState
-> {
+class ConnectionForm extends PureComponent<ConnectionFormProps> {
   constructor(props: ConnectionFormProps) {
     super(props);
 
-    this.state = {
-      name: '',
-      save: true,
-      host: 'localhost',
-      port: 3306,
-      user: '',
-      password: '',
-    };
-
-    this.handleInputChange = this.handleInputChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleInputChange(event: ChangeEvent<HTMLInputElement>): void {
-    const target = event.target;
-
-    const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
-
-    if (!Object.keys(this.state).includes(name)) {
-      throw new Error(
-        `Unable to assign state key ${name} as it is not defined in the state`
-      );
-    }
-
-    // @ts-expect-error: name is in state due to previous line
-    this.setState({
-      [name]: value,
-    });
-  }
-
-  handleSubmit(event: FormEvent) {
-    const { save, ...connection } = this.state;
-    event.preventDefault();
+  handleSubmit(formData: ConnectionFormType): void {
+    const { save, ...connection } = formData;
 
     if (save) {
       window.config.addConnectionToConfig(connection);
@@ -59,81 +28,63 @@ class ConnectionForm extends PureComponent<
   }
 
   render() {
+    const initialValues = {
+      name: '',
+      host: 'localhost',
+      port: 3306,
+      user: 'root',
+      password: '',
+      save: true,
+    };
+
     return (
-      <form onSubmit={this.handleSubmit}>
-        <div className="form-group">
-          <label htmlFor="Connection__name">name</label>
-          <input
-            id="Connection__name"
-            name="name"
-            type="text"
-            className="form-control"
-            value={this.state.name}
-            onChange={this.handleInputChange}
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="Connection__host">host</label>
-          <input
-            id="Connection__host"
-            name="host"
-            type="text"
-            className="form-control"
-            value={this.state.host}
-            onChange={this.handleInputChange}
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="Connection__port">port</label>
-          <input
-            id="Connection__port"
-            name="port"
-            type="number"
-            className="form-control"
-            value={this.state.port}
-            onChange={this.handleInputChange}
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="Connection__user">user</label>
-          <input
-            id="Connection__user"
-            name="user"
-            type="text"
-            className="form-control"
-            value={this.state.user}
-            onChange={this.handleInputChange}
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="Connection__password">password</label>
-          <input
-            id="Connection__password"
-            name="password"
-            type="password"
-            className="form-control"
-            value={this.state.password}
-            onChange={this.handleInputChange}
-          />
-        </div>
-        <div className="form-check">
-          <input
-            id="Connection__save"
-            name="save"
-            type="checkbox"
-            className="form-check-input"
-            checked={this.state.save}
-            onChange={this.handleInputChange}
-          />
-          <label className="form-check-label" htmlFor="Connection__save">
-            enregistrer la connexion
-          </label>
-        </div>
-
-        <button className="btn btn-primary" type="submit">
-          Connect
-        </button>
-      </form>
+      <Form initialValues={initialValues} onFinish={this.handleSubmit}>
+        <Form.Item<ConnectionFormType>
+          name="name"
+          label="name"
+          rules={[{ required: true }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item<ConnectionFormType>
+          name="host"
+          label="host"
+          rules={[{ required: true }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item<ConnectionFormType>
+          name="port"
+          label="port"
+          rules={[{ required: true }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item<ConnectionFormType>
+          name="user"
+          label="user"
+          rules={[{ required: true }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item<ConnectionFormType> name="password" label="password">
+          <Input type="password" />
+        </Form.Item>
+
+        <Form.Item<ConnectionFormType> name="save" valuePropName="checked">
+          <Checkbox>enregistrer la connexion</Checkbox>
+        </Form.Item>
+
+        <Form.Item<ConnectionFormType>>
+          <Button type="primary" htmlType="submit">
+            Connect
+          </Button>
+        </Form.Item>
+      </Form>
     );
   }
 }

diff --git a/src/component/Connection/ConnectionPage.tsx b/src/component/Connection/ConnectionPage.tsx
@@ -1,4 +1,5 @@
 import { Link, Navigate } from 'react-router-dom';
+import { Button } from 'antd';
 import { ConnectionObject } from './types';
 import { ConnectionContext, useConfiguration } from '../../Contexts';
 import { useContext } from 'react';
@@ -24,20 +25,26 @@ function ConnectionPage() {
       {connectionList.map(
         (connection: ConnectionObject): JSX.Element => (
           <div key={connection.name}>
-            <a
-              href={`${connection.name}`}
-              onClick={(e) => {
-                e.preventDefault();
-
-                connectTo(connection);
-              }}
-            >
-              {connection.name}
-            </a>
+            <Button block>
+              <Link
+                to={connection.name}
+                onClick={(e) => {
+                  e.preventDefault();
+                  connectTo(connection);
+                }}
+              >
+                {connection.name}
+              </Link>
+            </Button>
           </div>
         )
       )}
-      <Link to="/connect/create">New connection</Link>
+
+      <hr />
+
+      <Button block>
+        <Link to="/connect/create">Create connection…</Link>
+      </Button>
     </div>
   );
 }

diff --git a/src/component/Connection/Nav.tsx b/src/component/Connection/Nav.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { ReactElement, useContext } from 'react';
-import cn from 'classnames';
+import { Button } from 'antd';
 import { ConnectionContext } from '../../Contexts';
 
 export default function Nav(): ReactElement {
@@ -13,27 +13,27 @@ export default function Nav(): ReactElement {
   return (
     <nav className="nav nav-pills flex-column">
       {connectionNameList.map((connection, i) => (
-        <Link
-          key={i}
-          className={cn({
-            'nav-link': true,
-            active: connection === currentConnectionName,
-          })}
-          onClick={() => {
-            setCurrentConnectionName(connection);
-          }}
-          to="/tables"
-          style={connection === currentConnectionName ? { color: '#fff' } : {}}
+        <Button
+          block
+          type={connection === currentConnectionName ? 'primary' : 'link'}
         >
-          {/* {connection.config.host &&
+          <Link
+            key={i}
+            onClick={() => {
+              setCurrentConnectionName(connection);
+            }}
+            to="/tables"
+          >
+            {/* {connection.config.host &&
             connection.config.host.substr(0, 1).toUpperCase()} */}
 
-          {connection}
-        </Link>
+            {connection}
+          </Link>
+        </Button>
       ))}
-      <Link className="nav-link" to="/connect">
-        +
-      </Link>
+      <Button type="link" block>
+        <Link to="/connect">new…</Link>
+      </Button>
     </nav>
   );
 }