5htp-core 0.5.1-94 → 0.5.1-95

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.5.1-94",
+	"version": "0.5.1-95",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -17,6 +17,9 @@
 		"@lexical/headless": "^0.18.0",
 		"@lexical/html": "^0.18.0",
 		"@lexical/react": "^0.18.0",
+		"@mantine/core": "^7.17.2",
+		"@mantine/dates": "^7.17.2",
+		"@mantine/hooks": "^7.17.2",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -67,7 +70,6 @@
 		"preact": "^10.22.1",
 		"preact-render-to-string": "^6.5.5",
 		"prettier": "^3.3.3",
-		"react-datetime-picker": "^5.6.0",
 		"react-scrollbars-custom": "^4.0.27",
 		"react-slider": "^2.0.1",
 		"react-textarea-autosize": "^8.3.3",

package/src/client/app/component.tsx

@@ -4,6 +4,7 @@
 
 // Npm
 import React from 'react';
+import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
 
 // Core
 import type { Layout } from '@common/router';
@@ -14,9 +15,6 @@ import DialogManager from '@client/components/Dialog/Manager'
 import RouterComponent from '@client/services/router/components/router';
 import type { TClientOrServerContextForPage } from '@common/router';
 
-// Resources
-import '@client/assets/css/core.less';
-
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
@@ -35,22 +33,25 @@ export default function App ({ context }: {
     return (
         <ReactClientContext.Provider value={context}>
 
-            <DialogManager context={context} />
-            
-            {!layout ? <>
-                {/* TODO: move to app, because here, we're not aware that the router service has been defined */}
-                <RouterComponent service={context.Router} />
-            </> : <> {/* Same as router/components/Page.tsx */}
-                <layout.Component 
-                    // Services
-                    {...context} 
-                    // API data & URL params
-                    data={{
-                        ...apiData,
-                        ...context.request.data
-                    }} 
-                />
-            </>}
+            <MantineProvider>
+
+                <DialogManager context={context} />
+                
+                {!layout ? <>
+                    {/* TODO: move to app, because here, we're not aware that the router service has been defined */}
+                    <RouterComponent service={context.Router} />
+                </> : <> {/* Same as router/components/Page.tsx */}
+                    <layout.Component 
+                        // Services
+                        {...context} 
+                        // API data & URL params
+                        data={{
+                            ...apiData,
+                            ...context.request.data
+                        }} 
+                    />
+                </>}
+            </MantineProvider>
             
         </ReactClientContext.Provider>
     )

package/src/client/app/index.ts

@@ -2,6 +2,7 @@
 - DEPENDANCES
 ----------------------------------*/
 
+// Npm
 import React from 'react';
 
 if (typeof window === 'undefined')
@@ -19,6 +20,10 @@ import type { AnyService } from './service';
 
 export { default as Service } from './service';
 
+// Resources
+import '@client/assets/css/core.less';
+import '@mantine/core/styles.css';
+
 /*----------------------------------
 - TYPES
 ----------------------------------*/

package/src/client/assets/css/core.less

@@ -101,7 +101,7 @@ body {
 	// FIX: Scrollbars document à cause de custom scrollbar sur barre communautés
 	// TEMPORAIRE
 	overflow-x: hidden;
-    background: var(--cBg);
+    background: var(--cBg) !important; // Override mantine
     color: var(--cTxtBase);
 
 	text-align: center;

package/src/client/components/Dialog/index.less

@@ -1,6 +1,6 @@
 @import (reference) "@/client/assets/vars.less";
 
-@toast-zindex: 999;
+@toast-zindex: 200;
 
 #modals, 
 #toasts {

package/src/client/components/index.ts

@@ -27,5 +27,5 @@ export { default as Select } from './Select';
 export { default as Input } from './inputv3';
 export { default as Checkbox } from './inputv3/Checkbox';
 export { default as File } from './inputv3/file';
-export { default as DateRangeInput } from './inputv3/Date';
+export { default as Date } from './inputv3/Date';
 export { default as Rte } from './inputv3/Rte';

package/src/client/components/inputv3/Date/index.tsx

@@ -4,7 +4,8 @@
 
 // Npm
 import React from 'react';
-import DateRangePicker, { DateTimePickerProps } from 'react-datetime-picker';
+import '@mantine/dates/styles.css';
+import { DateTimePicker, DateTimePickerProps } from '@mantine/dates';
 
 // Core
 
@@ -14,36 +15,13 @@ import DateRangePicker, { DateTimePickerProps } from 'react-datetime-picker';
 - TYPES
 ----------------------------------*/
 
-type TValue = [Date, Date]
-export type Props = DateTimePickerProps & {
-    //value: TValue,
-    //onChange: StateUpdater<TValue>,
-    placeholder?: string,
-    min?: string,
-    max?: string
-}
+export type Props = DateTimePickerProps;
 
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-import './DateTimePicker.css';
-import './Calendar.css';
-import './Clock.css';
-export default ({ value, Props, min, max, onChange, ...otherProps }) => {
-
-    const state = React.useState(false);
-
-    /*----------------------------------
-    - CONSTRUCTION CHAMP
-    ----------------------------------*/
-    
-    
-    /*----------------------------------
-    - RENDU DU CHAMP
-    ----------------------------------*/
+export default ({ ...props }: Props) => {
     return (
-        <div>
-            <DateRangePicker {...otherProps} onChange={onChange} value={value || [null, null]} />
-        </div>
+        <DateTimePicker {...props} />
     )
 }

package/src/client/components/inputv3/base.less

@@ -44,11 +44,17 @@
     // Since they are not supposed to be on the same row (mobile first design)
     height: @hInput;
     align-items: center;
-    
+
     background: var(--cBg);
     border-radius: @radius;
     transition: background .1s linear;
 
+    &.transparent {
+        background: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }
+
     > i {
         color: var(--cTxtDesc);
     }

package/src/server/services/router/response/page/document.tsx

@@ -6,6 +6,7 @@
 import React from 'react';
 import renderToString from "preact-render-to-string";
 const safeStringify = require('fast-safe-stringify'); // remplace les références circulairs par un [Circular]
+import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
 
 // Core
 import type { default as Router, Response as ServerResponse } from "@server/services/router";
@@ -31,7 +32,7 @@ export default class DocumentRenderer<TRouter extends Router> {
     public staticDocument() {
         const routesForClient = JSON.stringify( this.router.ssrRoutes );
         return '<!doctype html>' + renderToString(
-            <html lang="en">
+            <html lang="en" {...mantineHtmlProps}>
                 <head>
                     {/* Format */}
                     <meta charSet="utf-8" />
@@ -41,6 +42,7 @@ export default class DocumentRenderer<TRouter extends Router> {
                     <link rel="stylesheet" type="text/css" href="/public/icons.css" />
                     <link rel="preload" href="/public/client.css" as="style" />
                     <link rel="stylesheet" type="text/css" href="/public/client.css" />
+                    <ColorSchemeScript />
 
                     {/* JS */}
                     <script type="text/javascript" dangerouslySetInnerHTML={{

package/src/client/components/inputv3/Date/Calendar.css

@@ -1,156 +0,0 @@
-.react-calendar {
-  width: 350px;
-  max-width: 100%;
-  background: white;
-  border: 1px solid #a0a096;
-  font-family: Arial, Helvetica, sans-serif;
-  line-height: 1.125em;
-}
-
-.react-calendar--doubleView {
-  width: 700px;
-}
-
-.react-calendar--doubleView .react-calendar__viewContainer {
-  display: flex;
-  margin: -0.5em;
-}
-
-.react-calendar--doubleView .react-calendar__viewContainer > * {
-  width: 50%;
-  margin: 0.5em;
-}
-
-.react-calendar,
-.react-calendar *,
-.react-calendar *:before,
-.react-calendar *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.react-calendar button {
-  margin: 0;
-  border: 0;
-  outline: none;
-}
-
-.react-calendar button:enabled:hover {
-  cursor: pointer;
-}
-
-.react-calendar__navigation {
-  display: flex;
-  height: 44px;
-  margin-bottom: 1em;
-}
-
-.react-calendar__navigation button {
-  min-width: 44px;
-  background: none;
-}
-
-.react-calendar__navigation button:disabled {
-  background-color: #f0f0f0;
-}
-
-.react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus {
-  background-color: #e6e6e6;
-}
-
-.react-calendar__month-view__weekdays {
-  text-align: center;
-  text-transform: uppercase;
-  font: inherit;
-  font-size: 0.75em;
-  font-weight: bold;
-}
-
-.react-calendar__month-view__weekdays__weekday {
-  padding: 0.5em;
-}
-
-.react-calendar__month-view__weekNumbers .react-calendar__tile {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font: inherit;
-  font-size: 0.75em;
-  font-weight: bold;
-}
-
-.react-calendar__month-view__days__day--weekend {
-  color: #d10000;
-}
-
-.react-calendar__month-view__days__day--neighboringMonth,
-.react-calendar__decade-view__years__year--neighboringDecade,
-.react-calendar__century-view__decades__decade--neighboringCentury {
-  color: #757575;
-}
-
-.react-calendar__year-view .react-calendar__tile,
-.react-calendar__decade-view .react-calendar__tile,
-.react-calendar__century-view .react-calendar__tile {
-  padding: 2em 0.5em;
-}
-
-.react-calendar__tile {
-  max-width: 100%;
-  padding: 10px 6.6667px;
-  background: none;
-  text-align: center;
-  line-height: 16px;
-  font: inherit;
-  font-size: 0.833em;
-}
-
-.react-calendar__tile:disabled {
-  background-color: #f0f0f0;
-  color: #ababab;
-}
-
-.react-calendar__month-view__days__day--neighboringMonth:disabled,
-.react-calendar__decade-view__years__year--neighboringDecade:disabled,
-.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
-  color: #cdcdcd;
-}
-
-.react-calendar__tile:enabled:hover,
-.react-calendar__tile:enabled:focus {
-  background-color: #e6e6e6;
-}
-
-.react-calendar__tile--now {
-  background: #ffff76;
-}
-
-.react-calendar__tile--now:enabled:hover,
-.react-calendar__tile--now:enabled:focus {
-  background: #ffffa9;
-}
-
-.react-calendar__tile--hasActive {
-  background: #76baff;
-}
-
-.react-calendar__tile--hasActive:enabled:hover,
-.react-calendar__tile--hasActive:enabled:focus {
-  background: #a9d4ff;
-}
-
-.react-calendar__tile--active {
-  background: #006edc;
-  color: white;
-}
-
-.react-calendar__tile--active:enabled:hover,
-.react-calendar__tile--active:enabled:focus {
-  background: #1087ff;
-}
-
-.react-calendar--selectRange .react-calendar__tile--hover {
-  background-color: #e6e6e6;
-}

package/src/client/components/inputv3/Date/Clock.css

@@ -1,62 +0,0 @@
-.react-clock {
-  display: block;
-  position: relative;
-}
-
-.react-clock,
-.react-clock *,
-.react-clock *:before,
-.react-clock *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.react-clock__face {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: 1px solid black;
-  border-radius: 50%;
-}
-
-.react-clock__hand {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  right: 50%;
-}
-
-.react-clock__hand__body {
-  position: absolute;
-  background-color: black;
-  transform: translateX(-50%);
-}
-
-.react-clock__mark {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  right: 50%;
-}
-
-.react-clock__mark__body {
-  position: absolute;
-  background-color: black;
-  transform: translateX(-50%);
-}
-
-.react-clock__mark__number {
-  position: absolute;
-  left: -40px;
-  width: 80px;
-  text-align: center;
-}
-
-.react-clock__second-hand__body {
-  background-color: red;
-}

package/src/client/components/inputv3/Date/DateTimePicker.css

@@ -1,132 +0,0 @@
-.react-datetime-picker {
-  display: inline-flex;
-  position: relative;
-}
-
-.react-datetime-picker,
-.react-datetime-picker *,
-.react-datetime-picker *:before,
-.react-datetime-picker *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.react-datetime-picker--disabled {
-  background-color: #f0f0f0;
-  color: #6d6d6d;
-}
-
-.react-datetime-picker__wrapper {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 0;
-  border: thin solid gray;
-}
-
-.react-datetime-picker__inputGroup {
-  min-width: calc(4px + (4px * 3) + 0.54em * 6 + 0.217em * 2);
-  flex-grow: 1;
-  padding: 0 2px;
-}
-
-.react-datetime-picker__inputGroup__divider {
-  padding: 1px 0;
-  white-space: pre;
-}
-
-.react-datetime-picker__inputGroup__divider,
-.react-datetime-picker__inputGroup__leadingZero {
-  display: inline-block;
-  font: inherit;
-}
-
-.react-datetime-picker__inputGroup__input {
-  min-width: 0.54em;
-  height: calc(100% - 2px);
-  position: relative;
-  padding: 1px;
-  border: 0;
-  background: none;
-  color: currentColor;
-  font: inherit;
-  box-sizing: content-box;
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button,
-.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-
-.react-datetime-picker__inputGroup__input:invalid {
-  background: rgba(255, 0, 0, 0.1);
-}
-
-.react-datetime-picker__inputGroup__input--hasLeadingZero {
-  margin-left: -0.54em;
-  padding-left: calc(1px + 0.54em);
-}
-
-.react-datetime-picker__inputGroup__amPm {
-  font: inherit;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.react-datetime-picker__button {
-  border: 0;
-  background: transparent;
-  padding: 4px 6px;
-}
-
-.react-datetime-picker__button:enabled {
-  cursor: pointer;
-}
-
-.react-datetime-picker__button:enabled:hover .react-datetime-picker__button__icon,
-.react-datetime-picker__button:enabled:focus .react-datetime-picker__button__icon {
-  stroke: #0078d7;
-}
-
-.react-datetime-picker__button:disabled .react-datetime-picker__button__icon {
-  stroke: #6d6d6d;
-}
-
-.react-datetime-picker__button svg {
-  display: inherit;
-}
-
-.react-datetime-picker__calendar,
-.react-datetime-picker__clock {
-  z-index: 1;
-}
-
-.react-datetime-picker__calendar--closed,
-.react-datetime-picker__clock--closed {
-  display: none;
-}
-
-.react-datetime-picker__calendar {
-  width: 350px;
-  max-width: 100vw;
-}
-
-.react-datetime-picker__calendar .react-calendar {
-  border-width: thin;
-}
-
-.react-datetime-picker__clock {
-  width: 200px;
-  height: 200px;
-  max-width: 100vw;
-  padding: 25px;
-  background-color: white;
-  border: thin solid #a0a096;
-}