docs: update README files and add LICENSE (#348)

* chore(license): add ELv2 license

* docs(README): update all README files

Author: balzdur

LICENSE

@@ -0,0 +1,93 @@
+Elastic License 2.0
+
+URL: <https://www.elastic.co/licensing/elastic-license>
+
+## Acceptance
+
+By using the software, you agree to all of the terms and conditions below.
+
+## Copyright License
+
+The licensor grants you a non-exclusive, royalty-free, worldwide,
+non-sublicensable, non-transferable license to use, copy, distribute, make
+available, and prepare derivative works of the software, in each case subject to
+the limitations and conditions below.
+
+## Limitations
+
+You may not provide the software to third parties as a hosted or managed
+service, where the service provides users with access to any substantial set of
+the features or functionality of the software.
+
+You may not move, change, disable, or circumvent the license key functionality
+in the software, and you may not remove or obscure any functionality in the
+software that is protected by the license key.
+
+You may not alter, remove, or obscure any licensing, copyright, or other notices
+of the licensor in the software. Any use of the licensor’s trademarks is subject
+to applicable law.
+
+## Patents
+
+The licensor grants you a license, under any patent claims the licensor can
+license, or becomes able to license, to make, have made, use, sell, offer for
+sale, import and have imported the software, in each case subject to the
+limitations and conditions in this license. This license does not cover any
+patent claims that you cause to be infringed by modifications or additions to
+the software. If you or your company make any written claim that the software
+infringes or contributes to infringement of any patent, your patent license for
+the software granted under these terms ends immediately. If your company makes
+such a claim, your patent license ends immediately for work on behalf of your
+company.
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you
+also gets a copy of these terms.
+
+If you modify the software, you must include in any modified copies of the
+software prominent notices stating that you have modified the software.
+
+## No Other Rights
+
+These terms do not imply any licenses other than those expressly granted in
+these terms.
+
+## Termination
+
+If you use the software in violation of these terms, such use is not licensed,
+and your licenses will automatically terminate. If the licensor provides you
+with a notice of your violation, and you cease all violation of this license no
+later than 30 days after you receive that notice, your licenses will be
+reinstated retroactively. However, if you violate these terms after such
+reinstatement, any additional violation of these terms will cause your licenses
+to terminate automatically and permanently.
+
+## No Liability
+
+_As far as the law allows, the software comes as is, without any warranty or
+condition, and the licensor will not be liable to you for any damages arising
+out of these terms or the use or nature of the software, under any kind of
+legal claim._
+
+## Definitions
+
+The **licensor** is the entity offering these terms, and the **software** is the
+software the licensor makes available under these terms, including any portion
+of it.
+
+**you** refers to the individual or entity agreeing to these terms.
+
+**your company** is any legal entity, sole proprietorship, or other kind of
+organization that you work for, plus all organizations that have control over,
+are under the control of, or are under common control with that
+organization. **control** means ownership of substantially all the assets of an
+entity, or the power to direct its management and policies by vote, contract, or
+otherwise. Control can be direct or indirect.
+
+**your licenses** are all the licenses granted to you for the software under
+these terms.
+
+**use** means anything you do with the software requiring one of your licenses.
+
+**trademark** means trademarks, service marks, and similar rights.

README.md

@@ -6,7 +6,9 @@ This is the frontend marble monorepo. We use `pnpm` to handle dependancies.
 
 This README is a global README for the monorepo. Each package may have its own README. You can find them in the `packages/*/README.md` files.
 
-### Install pnpm
+### Installations
+
+#### Install pnpm
 
 ```bash
 brew install pnpm
@@ -20,19 +22,19 @@ To enable shell autocompletion (works for bash, zsh and fish), run:
 pnpm install-completion
 ```
 
-### Install dependancies
+#### Install dependancies
 
 ```bash
 pnpm install
 ```
 
-#### (VSCode) Install recommended VSCode extensions
+##### (VSCode) Install recommended VSCode extensions
 
 There is a recommended extensions list in the `.vscode/extensions.json` file.
 
 All required configuration settings are already included inside the `.vscode/settings.json` file.
 
-### Work in a package
+### Launch
 
 Each packages are located in the `packages` folder. To work in a package, you can use the `--filter` option of `pnpm` to trigger the dedicated scripts present in each `packages/*/package.json`. Exemple to start the app builder in dev mode:
 
@@ -41,15 +43,16 @@ Each packages are located in the `packages` folder. To work in a package, you ca
 pnpm --filter app-builder run dev
 ```
 
-#### (VSCode) Use launch configuration
+> We use `pnpm` monorepo capabilities. More informations :
+>
+> - [filtering](https://pnpm.io/filtering)
+> - [workspace](https://pnpm.io/workspaces)
 
-When available, you can use VSCode launch configuration to run the package scripts. You can find them in the `.vscode/launch.json` file.
-
-### Some usefull commands
+#### Some usefull commands
 
 ```bash
 # Start the builder app in dev mode
-pnpm --filter app-builder run dev --debug
+pnpm --filter app-builder run dev
 
 # Generate the marble-api client
 pnpm --filter marble-api run generate-api
@@ -61,7 +64,13 @@ pnpm --filter ui-design-system run storybook
 pnpm --filter ui-icons run generate-icons
 ```
 
-### How to check the code locally like the CI
+#### (VSCode) Use launch configuration
+
+When available, you can use VSCode launch configuration to run the package scripts. You can find them in the `.vscode/launch.json` file.
+
+### Developpement
+
+#### How to check the code locally like the CI
 
 ```bash
 pnpm run -r type-check && pnpm run -r lint && pnpm run format:check

package.json

@@ -12,13 +12,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "4.2.1",
-    "@vitest/coverage-v8": "^1.1.3",
-    "@vitest/ui": "1.1.3",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vitest/ui": "1.2.1",
     "prettier": "^3.1.1",
     "prettier-plugin-tailwindcss": "^0.5.11",
     "react-refresh": "^0.14.0",
     "typescript": "5.3.3",
-    "vite-tsconfig-paths": "^4.2.3",
-    "vitest": "1.1.3"
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "1.2.1"
   }
 }

packages/app-builder/README.md

@@ -1,6 +1,6 @@
 # App builder
 
-This is the app builder package.
+This is the app builder package, it contains the main application code.
 
 ## Getting started
 
@@ -23,13 +23,12 @@ The application is built using the Remix framework. You can find the documentati
    ```bash
    # Start the builder app in dev mode
    pnpm --filter app-builder run dev
-
-   # Start the builder app in dev mode with debug
-   pnpm --filter app-builder run dev --debug
    ```
 
 #### Add a new route
 
+The app uses the [flat routes convention](https://github.com/kiliman/remix-flat-routes?tab=readme-ov-file#remix-v2-flat-routes-convention) to define routes. You can find the routes in `src/routes/`.
+
 When adding a new route you need to run :
 
 ```bash

packages/app-builder/package.json

@@ -27,7 +27,7 @@
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@types/swagger-ui-react": "^4.18.3",
-    "eslint-plugin-tailwindcss": "^3.13.1",
+    "eslint-plugin-tailwindcss": "^3.14.0",
     "jsdom": "23.2.0",
     "ora": "^8.0.1",
     "postcss": "^8.4.33",

packages/app-builder/src/components/Cases/CaseRightPanel.tsx

@@ -89,7 +89,7 @@ const CaseRightPanelContent = () => {
   const { t } = useTranslation(casesI18n);
   return (
     <RightPanel.Content className="max-w-md">
-      <ScrollArea.Root className="flex h-full w-full flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+      <ScrollArea.Root className="flex size-full flex-col gap-4 p-4 lg:gap-6 lg:p-6">
         <RightPanel.Title>
           <span className="w-full first-letter:capitalize">
             {t('cases:case.new_case')}

packages/app-builder/src/components/Decisions/DecisionRightPanel.tsx

@@ -96,7 +96,7 @@ function DecisionRightPanelContent() {
 
   return (
     <RightPanel.Content className="max-w-md">
-      <ScrollArea.Root className="flex h-full w-full flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+      <ScrollArea.Root className="flex size-full flex-col gap-4 p-4 lg:gap-6 lg:p-6">
         <RightPanel.Title>
           <span className="w-full first-letter:capitalize">
             {t('decisions:add_to_case')}

packages/app-builder/src/components/Ping/CornerPing.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Ping } from './Ping';
 
 const corner_ping = cva(
-  'border-grey-00 absolute box-content h-[6px] w-[6px] border-2 text-red-100',
+  'border-grey-00 absolute box-content size-[6px] border-2 text-red-100',
   {
     variants: {
       position: {

packages/app-builder/src/components/Ping/Ping.tsx

@@ -14,8 +14,8 @@ export function Ping({ className }: { className?: string }) {
         className,
       )}
     >
-      <span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-current opacity-75"></span>
-      <span className="relative inline-flex h-full w-full rounded-full bg-current"></span>
+      <span className="animate-ping-slow absolute inline-flex size-full rounded-full bg-current opacity-75"></span>
+      <span className="relative inline-flex size-full rounded-full bg-current"></span>
     </span>
   );
 }

packages/app-builder/src/components/RightPanel.tsx

@@ -27,7 +27,7 @@ export function createRightPanel(name: string) {
   }: RightPanelRootProps) {
     const value = { open, onClose };
     return (
-      <div className={clsx('relative flex h-full w-full', className)}>
+      <div className={clsx('relative flex size-full', className)}>
         <Provider value={value}>
           <Dialog.Root
             modal={false}
@@ -55,7 +55,7 @@ export function createRightPanel(name: string) {
             onClose();
           }
         }}
-        className={clsx('flex h-full w-full', className)}
+        className={clsx('flex size-full', className)}
         aria-hidden="true"
       >
         {children}

packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/Default.tsx

@@ -30,7 +30,7 @@ export function Default({
         displayErrors ? getBorderColor(editorNodeViewModel) : 'grey-10'
       }
       className={clsx(
-        'bg-grey-02 border-grey-02 flex h-fit min-h-[40px] w-fit min-w-[40px] items-center justify-between rounded border px-2 outline-none',
+        'bg-grey-02 border-grey-02 flex size-fit min-h-[40px] min-w-[40px] items-center justify-between rounded border px-2 outline-none',
         // Border color variants
         'data-[border-color=grey-10]:border-grey-10',
         'data-[border-color=red-100]:border-red-100',

packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/Operand/OperandEditor/OperandTrigger.tsx

@@ -25,7 +25,7 @@ export const OperandTrigger = forwardRef<
       data-border-color={borderColor}
       className={clsx(
         'group',
-        'h-fit min-h-[40px] w-fit min-w-[40px] rounded border px-2 outline-none',
+        'size-fit min-h-[40px] min-w-[40px] rounded border px-2 outline-none',
         'radix-state-open:border-purple-100 radix-state-open:bg-purple-05',
         // Border color variants
         'enabled:radix-state-closed:data-[border-color=grey-10]:border-grey-10 enabled:radix-state-closed:data-[border-color=grey-10]:focus:border-purple-100',

packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/Operand/OperandLabel.tsx

@@ -77,7 +77,7 @@ export const OperandLabel = ({
       aria-label={ariaLabel}
       className={clsx(
         'text-s text-grey-100 group flex flex-row items-center justify-between gap-2 font-normal transition-colors',
-        'h-fit min-h-[40px] w-fit min-w-[40px] rounded px-2',
+        'size-fit min-h-[40px] min-w-[40px] rounded px-2',
         variant === 'edit' && 'bg-grey-00 group-radix-state-open:bg-purple-05',
         variant === 'view' && 'bg-grey-02',
       )}

packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/Operand/OperandTooltip.tsx

@@ -137,7 +137,7 @@ function TypeInfos({
             key={tKey}
             className="inline-flex items-center gap-[2px] text-xs font-normal text-purple-50"
           >
-            {icon ? <Icon icon={icon} className="h-3 w-3" /> : null}
+            {icon ? <Icon icon={icon} className="size-3" /> : null}
             {t(tKey, { count: 1 })}
           </span>
         );

packages/app-builder/src/components/Scenario/AstBuilder/RemoveButton.tsx

@@ -8,7 +8,7 @@ export const RemoveButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         className={clsx(
-          'h-fit w-fit rounded-sm border p-1 text-xs transition-colors duration-200 ease-in-out',
+          'size-fit rounded-sm border p-1 text-xs transition-colors duration-200 ease-in-out',
           'bg-grey-00 text-grey-25 border-grey-10',
           'hover:text-grey-00 hover:border-red-100 hover:bg-red-100',
           'active:bg-red-110  active:border-red-110',

packages/app-builder/src/components/Scenario/AstBuilder/RootAstBuilderNode/AddLogicalOperatorButton.tsx

@@ -15,7 +15,7 @@ export const AddLogicalOperatorButton = React.forwardRef<
   return (
     <button
       className={clsx(
-        ' flex h-fit w-fit flex-row items-center justify-center gap-1 rounded border-none px-4 py-2 outline-none',
+        ' flex size-fit flex-row items-center justify-center gap-1 rounded border-none px-4 py-2 outline-none',
         'text-grey-25 disabled:text-grey-50 text-xs font-semibold hover:text-purple-100',
         'hover:bg-purple-10 active:bg-grey-10 bg-grey-00 disabled:bg-grey-00  focus:border-purple-100',
         className,

packages/app-builder/src/components/Scenario/AstBuilder/RootAstBuilderNode/RootAnd.tsx

@@ -93,7 +93,7 @@ export function RootAnd({
   return (
     <>
       <div className="text-s grid grid-cols-[8px_16px_max-content_1fr_max-content]">
-        <div className="text-s bg-grey-02 col-span-4 flex h-fit min-h-[40px] w-fit min-w-[40px] flex-wrap items-center justify-center gap-1 rounded p-2 font-semibold text-purple-100">
+        <div className="text-s bg-grey-02 col-span-4 flex size-fit min-h-[40px] min-w-[40px] flex-wrap items-center justify-center gap-1 rounded p-2 font-semibold text-purple-100">
           {builder.input.triggerObjectTable.name}
         </div>
         {rootAndViewModel.children.map((child, childIndex) => {

packages/app-builder/src/root.tsx

@@ -125,8 +125,8 @@ export function ErrorBoundary() {
         <Links />
       </head>
       <body className="selection:text-grey-00 h-screen w-full overflow-hidden antialiased selection:bg-purple-100">
-        <div className="from-purple-10 to-grey-02 flex h-full w-full flex-col items-center bg-gradient-to-r">
-          <div className="flex h-full w-full flex-col items-center bg-[url('/img/login_background.svg')] bg-no-repeat">
+        <div className="from-purple-10 to-grey-02 flex size-full flex-col items-center bg-gradient-to-r">
+          <div className="flex size-full flex-col items-center bg-[url('/img/login_background.svg')] bg-no-repeat">
             <div className="flex h-full max-h-80 flex-col justify-center">
               <Link to={getRoute('/sign-in')}>
                 <Logo

packages/app-builder/src/routes/_auth+/_layout.tsx

@@ -12,8 +12,8 @@ export default function AuthLayout() {
   const { t } = useTranslation(handle.i18n);
 
   return (
-    <div className="flex h-full w-full justify-center bg-gradient-to-r from-[#0b0a51] to-[#160524]">
-      <div className="flex h-full w-full max-w-screen-xl flex-row justify-center gap-20 md:p-20">
+    <div className="flex size-full justify-center bg-gradient-to-r from-[#0b0a51] to-[#160524]">
+      <div className="flex size-full max-w-screen-xl flex-row justify-center gap-20 md:p-20">
         <div className="hidden flex-col justify-center gap-6 py-6 md:flex">
           <div className="flex h-fit flex-col justify-end gap-6">
             <h1 className="text-grey-00 text-balance text-[30px] font-medium leading-tight lg:text-[44px]">
@@ -36,15 +36,15 @@ export default function AuthLayout() {
               direction={1}
               autoplay
               renderer="svg"
-              className="h-full w-full"
+              className="size-full"
             />
           </div>
         </div>
         <div className="flex w-full max-w-96 flex-col items-center justify-center">
           <div className="bg-grey-00 flex h-fit w-full flex-col items-center rounded-lg p-5 text-center sm:p-10">
             <Logo
               logo="logo-standard"
-              className="text-grey-100 mb-6 h-full max-h-20 w-full max-w-60"
+              className="text-grey-100 mb-6 size-full max-h-20 max-w-60"
               preserveAspectRatio="xMinYMid meet"
               aria-labelledby="marble"
             />

packages/app-builder/src/routes/_builder+/_layout.tsx

@@ -81,7 +81,7 @@ export default function Builder() {
                         <Logo
                           logo="logo"
                           aria-labelledby="marble logo"
-                          className="size-6 shrink-0 transition-all group-aria-expanded/nav:h-12 group-aria-expanded/nav:w-12"
+                          className="size-6 shrink-0 transition-all group-aria-expanded/nav:size-12"
                         />
                         <Logo
                           logo="marble"

packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx

@@ -75,7 +75,7 @@ export default function Rules() {
             <span className="flex items-center gap-2">
               <span className="flex w-2 items-center justify-center">
                 {hasErrors ? (
-                  <Ping className="relative box-content h-[6px] w-[6px] border border-transparent text-red-100" />
+                  <Ping className="relative box-content size-[6px] border border-transparent text-red-100" />
                 ) : null}
               </span>
               <span>{getValue<string>()}</span>

packages/eslint-config/README.md

@@ -0,0 +1,3 @@
+# eslint-config
+
+This is configs for [ESLint](https://eslint.org/) that provides a set of opinionated defaults that we use at Marble.