try ant-design instead of bootstrap

jdeniau · Feb 20, 2024 · 03fed61 · 03fed61
1 parent dca4d0c
commit 03fed61
Show file tree

Hide file tree

Showing 7 changed files with 977 additions and 135 deletions.
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,7 +21,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "bootstrap": "^5.3.2",
+    "antd": "^5.14.1",
     "classnames": "^2.5.1",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.1.0",

diff --git a/src/Contexts.tsx b/src/Contexts.tsx
@@ -1,7 +1,8 @@
 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, getSetting, isDarkTheme, THEME_LIST } from './theme';
 
 export interface ConnectToFunc {
   (params: object): void;
@@ -65,10 +66,25 @@ 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={{
+            token: {
+              // Seed Token
+              colorPrimary: getSetting(theme, 'foreground'),
+
+              // Alias Token
+              colorBgContainer: getSetting(theme, 'background'),
+            },
+            algorithm: isDarkTheme(theme) ? antdTheme.darkAlgorithm : undefined,
+          }}
+        >
+          {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/theme/index.ts b/src/theme/index.ts
@@ -4,6 +4,8 @@ import * as active4d from '../theme/active4d.json';
 
 const THEME_LIST_AS_ARRAY = [dracula, visualStudio, active4d] as const;
 
+const DARK_THEME_LIST_NAME = ['Dracula'];
+
 type Theme = (typeof THEME_LIST_AS_ARRAY)[number];
 
 export const THEME_LIST: Record<string, Theme> = {};
@@ -13,6 +15,10 @@ THEME_LIST_AS_ARRAY.forEach((t) => {
 
 export const DEFAULT_THEME = THEME_LIST_AS_ARRAY[0];
 
+export function isDarkTheme(theme: Theme): boolean {
+  return DARK_THEME_LIST_NAME.includes(theme.name);
+}
+
 export interface TmTheme {
   readonly name: string;
   readonly author?: string;