- fix scroll on elements toolbar,

- fix settings modal
- change info in about modal

package.json

@@ -3,8 +3,10 @@
     "version": "0.0.5",
     "source": "src/index.html",
     "type": "module",
+    "private": true,
+    "license": "UNLICENSED",
     "scripts": {
-        "dev": "npm-run-all --parallel start typesafe-i18n",
+        "dev": "npm-run-all --parallel typesafe-i18n start",
         "start": "vite",
         "build": "vite build",
         "preview": "vite preview",
@@ -79,6 +81,5 @@
         "vitest": "^0.33.0",
         "workbox-core": "^7.0.0",
         "workbox-precaching": "^7.0.0"
-    },
-    "license": "MIT"
-}
+    }
+}

src/common/components/atoms/about.tsx

@@ -4,11 +4,16 @@ import { useTranslation } from "@modules/i18n"
 export const About = () => {
     const { t } = useTranslation()
 
-    return <div className="card">
-        <div className="card-body">
-            <article className="prose prose-headings:uppercase prose-headings:my-4">
-                <h1>Sr Smith</h1>
-                <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html">
+    return <>
+        <img src="/images/cmyk2.svg" className="absolute -z-10 w-[50rem] right-[-50%] bottom-0 opacity-50" ></img>
+        <div className="card">
+            <div className="card-body">
+                <article className="prose prose-headings:uppercase prose-headings:my-4">
+                    <div className="flex flex-col md:flex-row items-center justify-center">
+                        <img className="w-32 m-0 md:mr-4" src="/images/logo.png" alt="sr smith logo" />
+                        <h1>Sr Smith</h1>
+                    </div>
+                    {/* <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html">
                     <img
                         alt={t.license.image()}
                         className="w-32 h-16 my-1"
@@ -21,23 +26,22 @@ export const About = () => {
                 <a rel="license" className="link" href="https://www.gnu.org/licenses/gpl-3.0.en.html">
                     {" "}
                     {t.license.license()}.
-                </a>
-                <h2>{t.license.authors()}:</h2>
-                <span>
-                    <a
-                        className="link"
-                        href="https://www.linkedin.com/in/sytabaresa"
-                    >
-                        @sytabares
-                    </a>
-                    {" - "}
-                    <a className="link" href="https://github.com/kellar1896">
-                        @cbarreto
-                    </a>
-                </span>
-                <h2>{t.about.tesis()}:</h2>
-                {t.about.desc()} <a className="link" href="/event">{t.about.here()}.</a>
-            </article>
+                </a> */}
+                    <h2>{t.license.authors()}:</h2>
+                    <span>
+                        <a
+                            className="link"
+                            href="https://www.linkedin.com/in/sytabaresa"
+                        >
+                            @sytabares
+                        </a>
+                    </span>
+                    <h2>{t.about.tesis()}:</h2>
+                    <p>
+                        {t.about.desc()} <a className="link" href="/event">{t.about.here()}.</a>
+                    </p>
+                </article>
+            </div>
         </div>
-    </div>
+    </>
 }

src/common/components/molecules/configForm.tsx

@@ -1,8 +1,9 @@
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "@modules/i18n"
-import { boardDataAtom } from "@core/atoms/smith";
+import { boardConfigAtom } from "@core/atoms/smith";
 import { useAtom } from "jotai";
+import { BoardConfigOptions } from "@localtypes/smith";
 
 type ConfigsFormProps = {
     modalLabel?: string;
@@ -12,16 +13,17 @@ type ConfigsFormProps = {
 
 const ConfigsForm = ({ modalLabel }: ConfigsFormProps) => {
     const { t } = useTranslation()
-    const [config, setConfig] = useAtom(boardDataAtom)
+    const [config, setConfig] = useAtom(boardConfigAtom)
 
+    // console.log(config)
     const {
         register,
         handleSubmit,
         reset,
         // clearErrors,
         // setError,
         formState: { errors, isSubmitted, isSubmitting },
-    } = useForm<any>({ defaultValues: config });
+    } = useForm<BoardConfigOptions>({ defaultValues: config });
 
     useEffect(() => {
         reset(config)
@@ -34,19 +36,17 @@ const ConfigsForm = ({ modalLabel }: ConfigsFormProps) => {
 
     return (
         <form className="flex flex-col justify-center form-control md:px-20" onSubmit={handleSubmit(onSubmit)}>
-            <label htmlFor="coordPrecision" className="label">
+            <label htmlFor="digits" className="label">
                 <span className="label-text uppercase font-bold">{t.settings.precision()}</span>
             </label>
             <input
-                id="coordPrecision"
-                name="coordPrecision"
                 type="number"
                 className="input input-bordered"
-                {...register("coordPrecision", { required: true })}
+                {...register("digits", { required: true })}
             />
-            {errors.coordPrecision && (
+            {errors.digits && (
                 <label className="label">
-                    <span className="label-text-alt uppercase">{errors.coordPrecision.message as unknown as string}</span>
+                    <span className="label-text-alt uppercase">{errors.digits.message as unknown as string}</span>
                 </label>
             )}
             <button className="btn btn-primary mt-10 w-1/2 self-center" type="submit">

src/common/components/molecules/createModal.tsx

@@ -113,7 +113,7 @@ const createModal = (modalName: string) => {
       <input type="checkbox" id={finalModalName} checked={modalOpened} className="modal-toggle hidden" readOnly />
       <label
         aria-hidden={!modalOpened}
-        className={cn('modal cursor-pointer', className)}
+        className={cn('modal cursor-pointer')}
         onClick={() => { !focus && closeModal() }}
         {...rest}
       >
@@ -123,7 +123,7 @@ const createModal = (modalName: string) => {
           onBlur={() => setFocus(false)}
           onKeyDown={onKey}
           aria-hidden={!modalOpened}
-          className="modal-box relative"
+          className={cn("modal-box relative scrollbar-thin !scrollbar-w-[4px] scrollbar-track-transparent scrollbar-thumb-base-content", className)}
         >
           {withClose &&
             <label
@@ -132,7 +132,7 @@ const createModal = (modalName: string) => {
               tabIndex={0}
               // onClick={onClose}
               onClick={closeModal}
-              className="btn btn-sm btn-ghost absolute right-2 top-2"
+              className="btn btn-sm btn-ghost absolute right-2 top-2 z-10"
               aria-label={t.common.close()}
             >
               ✕

src/common/components/organisms/footer.tsx

@@ -17,7 +17,7 @@ const Footer: React.FC<IFooterProps> = ({ className }) => {
           ?
         </button>
       </modal.Label>
-      <modal.Modal>
+      <modal.Modal className="overflow-x-clip overflow-y-auto p-0">
         <About />
       </modal.Modal>
     </footer>

src/common/components/organisms/primitivesMenu.tsx

@@ -120,7 +120,7 @@ const PrimitivesMenu = (props: PrimitivesMenuProps) => {
             tabIndex={0}
             aria-label={t.tools.menu()}
             style={{ maxHeight: `calc(calc(var(--vh, 1vh)*100) - ${offset}px)` }}
-            className={cn('p-2 menu xsh:bottom-[2rem] overflow-y-auto xsh:flex-row xsh:!max-h-full flex-nowrap',
+            className={cn('p-2 menu xs:bottom-[2rem] overflow-y-auto xs:flex-row xs:!max-h-full flex-nowrap',
               'overflow-x-hidden scrollbar !scrollbar-w-[1px] scrollbar-track-base-100 scrollbar-thumb-base-content',
               showMenu ? '' : 'hidden')}
           >

src/common/types/smith.d.ts

@@ -27,4 +27,16 @@ export type SmithProject = {
 export type RuntimeProject = {
   readOnly: boolean;
   project: SmithProject
+}
+
+export interface BoardConfigOptions {
+  theme: string;
+  screen: string | number[];
+  name: string;
+  digits: number;
+  translations: Record<string, any>;
+  infobox: {
+      x: number,
+      y: number
+  }
 }

src/modules/core/atoms/smith.ts

@@ -21,7 +21,7 @@ import { getCurrentBreakpoint } from "@hooks/useScreen";
 import { atomWithReset, atomWithStorage } from "jotai/utils";
 import { _dataRxdbProviderAtom } from "./db";
 import { Board } from "jsxgraph";
-import { RuntimeProject, SmithProject } from "@localtypes/smith";
+import { BoardConfigOptions, RuntimeProject, SmithProject } from "@localtypes/smith";
 import { DataProvider } from "@db/db";
 
 export const editorServiceAtom = atomWithMachine(editorFSM, (get) => ({
@@ -84,7 +84,7 @@ function populateBoard(send, board) {
     }
 }
 
-export function recreateBoard(get: Getter, set: Setter, params: BoardOptions, oldBoard: any) {
+export function recreateBoard(get: Getter, set: Setter, params: BoardConfigOptions, oldBoard: any) {
     try {
         const send = (event) => set(drawServiceAtom, event)
 
@@ -120,26 +120,14 @@ export const boardAtom = atom(
 
         return {}
     },
-    (get, set, params: BoardOptions = null) => {
+    (get, set, params: BoardConfigOptions = null) => {
         // console.log(params)
         const board = recreateBoard(get, set, { ...get(boardConfigAtom), ...params }, get(cachedBoardAtom))
         set(cachedBoardAtom, board)
     }
 )
 
-export interface BoardOptions {
-    theme: string;
-    screen: string | number[];
-    name: string;
-    digits: number;
-    translations: Record<string, any>;
-    infobox: {
-        x: number,
-        y: number
-    }
-}
-
-export const boardConfigAtom = atom<BoardOptions>({
+export const boardConfigAtom = atom<BoardConfigOptions>({
     theme: 'light',
     name: 'smith-box',
     screen: getCurrentBreakpoint(),
@@ -151,11 +139,6 @@ export const boardConfigAtom = atom<BoardOptions>({
     }
 })
 
-export const boardDataAtom = atomWithStorage('config', {
-    coordsPresition: 3
-})
-
-
 export const _projectDataAtom = atom(null) as PrimitiveAtom<RuntimeProject>
 export const projectDataAtom = atom<RuntimeProject, [Partial<SmithProject>, Partial<RuntimeProject>], void>(
     (get) => get(_projectDataAtom),

src/modules/core/jxg/initBoard.ts

@@ -1,10 +1,11 @@
 import { GeometryElement, JXGOptions, PointOptions } from "jsxgraph"
 import JXG from "jsxgraph"
 import { lightTheme, darkTheme } from "@core/utils/themes"
-import { BoardOptions, infoboxAtom } from "@core/atoms/smith";
+import { infoboxAtom } from "@core/atoms/smith";
 import { Getter, Setter } from "jotai";
 import { getMouseCoords } from "@core/utils/board";
 import { addComplexSupport } from "./complex";
+import { BoardConfigOptions } from "@localtypes/smith";
 
 // default style for intercept objects
 JXG.Options.intersection = JXG.merge(JXG.Options.intersection, {
@@ -33,7 +34,7 @@ export const changeBoardTheme = (theme: string) => {
     }
 }
 
-export const initBoard = (get: Getter, set: Setter, options: BoardOptions) => {
+export const initBoard = (get: Getter, set: Setter, options: BoardConfigOptions) => {
     // console.log(options)
     changeBoardTheme(options?.theme || 'light')
 

src/modules/i18n/en/index.ts

@@ -46,7 +46,7 @@ const en: Translation = {
 	},
 	about: {
 		tesis: "Tesis",
-		desc: "This software is product of my engineering tesis, you can see",
+		desc: "This software is a derived product of the code that my and my colleague publish as engineering thesis, you can see it",
 		here: "here",
 	},
 	theme: {

src/modules/i18n/es/index.ts

@@ -46,7 +46,7 @@ const es: BaseTranslation = {
 	},
 	about: {
 		tesis: "Tesis",
-		desc: "Este software es producto de nuestra tesis de ingeniería, puedes verla",
+		desc: "Este software es un producto derivado del código que mi colega y yo publicamos como tesis de ingeniería, puedes verla",
 		here: "aqui"
 	},
 	theme: {

src/modules/i18n/i18n-types.ts

@@ -158,7 +158,7 @@ type RootTranslation = {
 		 */
 		tesis: string
 		/**
-		 * T​h​i​s​ ​s​o​f​t​w​a​r​e​ ​i​s​ ​p​r​o​d​u​c​t​ ​o​f​ ​m​y​ ​e​n​g​i​n​e​e​r​i​n​g​ ​t​e​s​i​s​,​ ​y​o​u​ ​c​a​n​ ​s​e​e
+		 * T​h​i​s​ ​s​o​f​t​w​a​r​e​ ​i​s​ ​a​ ​d​e​r​i​v​e​d​ ​p​r​o​d​u​c​t​ ​o​f​ ​t​h​e​ ​c​o​d​e​ ​t​h​a​t​ ​m​y​ ​a​n​d​ ​m​y​ ​c​o​l​l​e​a​g​u​e​ ​p​u​b​l​i​s​h​ ​a​s​ ​e​n​g​i​n​e​e​r​i​n​g​ ​t​h​e​s​i​s​,​ ​y​o​u​ ​c​a​n​ ​s​e​e​ ​i​t
 		 */
 		desc: string
 		/**
@@ -663,7 +663,7 @@ export type TranslationFunctions = {
 		 */
 		tesis: () => LocalizedString
 		/**
-		 * This software is product of my engineering tesis, you can see
+		 * This software is a derived product of the code that my and my colleague publish as engineering thesis, you can see it
 		 */
 		desc: () => LocalizedString
 		/**

src/pages/event.page.tsx

@@ -6,9 +6,9 @@ interface EventProps {
     style?: Object;
 }
 
-export { Event as Page }
+export { Page }
 
-const Event = (props: EventProps) => {
+const Page = (props: EventProps) => {
     const nextDate = new Date(2022, 10, 21, 11, 0, 0, 0)
     // const nextDate = new Date(2022, 10, 18, 17, 0, 0, 0)