[OGUI-1824] - Token Table UI

Tokenization/webapp/app/app.css

@@ -12,15 +12,73 @@
  * or submit itself to any jurisdiction.
 */
 
+:root {
+    --color-transparent: rgba(0,0,0,0)
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.bg-transparent {
+    background-color: var(--color-transparent);
+}
+
 .justify-end {
     justify-content: flex-end;
 }
 
+.self-center {
+    align-self: center;
+}
+
 .ml1 { margin-left: var(--space-xs);  }
 .ml2 { margin-left: var(--space-s); }
 .ml3 { margin-left: var(--space-m); }
 .ml4 { margin-left: var(--space-l); }
+.ml5 { margin-left: var(--space-xl)}
+.mb2 { margin-bottom: var(--space-s)}
+
+
+.no-border {
+    border: 0;
+}
+
+.bra2 {
+    border: 2px solid black;
+}
+
+.brb2 {
+    border-bottom: 2px solid black;
+}
+
+.scale12 {
+    transform: scale(1.2);
+}
+
+.scale15 {
+    transform: scale(1.5);
+}
 
 .scale25 {
     transform: scale(2.5);
 }
+
+.menu-item-static { 
+    /* This class is the same as menu-item from aliceo2 css framework but can be used wihouth hover and active actions*/
+    text-decoration: none; 
+    height: 2em; 
+    line-height: 2em; 
+    padding-left: 1em; 
+    padding-right: 1em; 
+    color: var(--color-gray-darker); 
+    font-weight: 100; 
+    margin: 0.25em; 
+    border-radius: 0.25em; 
+    display: block; 
+    user-select: none; 
+}
+
+.static {
+    position: static;
+}

Tokenization/webapp/app/components/box.tsx

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import React from 'react';
+import { Link } from 'react-router';
+import { IconContainer, IconExpandRight } from '~/ui/icon';
+
+interface BoxInterface {
+  children: React.ReactNode;
+  link: string | null;
+}
+
+interface PrimaryBoxInterface extends BoxInterface {
+  className_div1: string;
+  className_div2: string;
+}
+/**
+ * Box component - container which renders a content inside.
+ *
+ * TODO: On PC it will stand in grid layout on mobile will lay basing on display flex with wrap
+ * For now it uses grid only.
+ *
+ * @param {object} props - Component props.
+ * @param {React.ReactNode} props.children - Content rendered inside the box.
+ * @param {string|null} props.link - Passing this prop to the component enables rendering of the top bar
+ * with an icon that navigates the user to the corresponding details page.
+ * @param {string} props.className_div1 - Additional classes applied to the outer container.
+ * @param {string} props.className_div2 - Additional classes applied to the top link row container.
+ */
+export function Box({ children, link, className_div1, className_div2 }: PrimaryBoxInterface) {
+  return (
+    <div className={`bg-gray m3 ${className_div1}`}>
+      {link && <div className={`flex-row justify-center ${className_div2}`}>
+        <div className="w-90 flex-row justify-end">
+          <Link to={link}>
+            <IconContainer className="scale15 actionable-icon">
+              <IconExpandRight />
+            </IconContainer>
+          </Link>
+        </div>
+      </div>
+      }
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Box 1_2 component - renders box with padding suited for grid with 1 row and 2 columns.
+ *
+ * @param {object} props - Component props.
+ * @param {React.ReactNode} props.children - Content rendered inside the box.
+ * @param {string|null} props.link - Passing this prop to the component enables rendering of the top bar
+ * with an icon that navigates the user to the corresponding details page.
+ */
+export function Box1_2 ({ children, link }: BoxInterface) {
+  return (
+    <Box
+      link={link}
+      className_div1="min-height-box-1"
+      className_div2="mv3"
+    >
+      <div className="flex-row justify-center">
+        <div className="w-95">
+          {children}
+        </div>
+      </div>
+    </Box>
+  );
+}
+
+/**
+ * Box 1_2 component - renders box with padding suited for grid with 1 row and 1 column.
+ *
+ * @param {object} props - Component props.
+ * @param {React.ReactNode} props.children - Content rendered inside the box.
+ * @param {string|null} props.link - Passing this prop to the component enables rendering of the top bar
+ * with an icon that navigates the user to the corresponding details page.
+ */
+export function Box1_1 ({ children, link }: BoxInterface) {
+  return (
+    <Box
+      link={link}
+      className_div1="min-height-box-1"
+      className_div2="mv4"
+    >
+      <div className='p4'>
+        <div className='mv2'></div>
+        {children}
+      </div>
+    </Box>
+  );
+}

Tokenization/webapp/app/components/form/form-buttons.tsx

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import type { ButtonInterface } from '../window/window';
+
+/**
+ * Generic form button wrapper.
+ *
+ * Renders a <button> element and wraps the provided action callback with
+ * preventDefault behaviour. The provided `action` will be invoked after
+ * preventDefault has been called on the click event.
+ *
+ * @param {object} props - Component props.
+ * @param {('button'|'submit'|'reset')} props.type - Button type attribute.
+ * @param {() => void} [props.action] - Callback to run on click; FormButton calls event.preventDefault() before invoking it.
+ * @param {string} [props.className] - Additional CSS classes.
+ * Prefer using this to change button color (e.g. "btn-primary" or "btn-danger"),
+ * but it can also be used for sizing, spacing or other style tweaks.
+ * @param {React.ReactNode} [props.children] - Button content.
+ */
+function FormButton({ type, action, className, children }: ButtonInterface) {
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    action?.();
+  };
+
+  return (
+    <button
+      type={type}
+      className={`btn ${className}`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * Submit button with primary styling.
+ *
+ * @param {object} props - Component props.
+ * @param {() => void} [props.action] - Click handler; will be wrapped with preventDefault() behaviour.
+ * @param {string} [props.className] - Additional classes to modify appearance (recommended for color changes).
+ */
+export function SubmitButton({ action, className }: ButtonInterface) {
+  return (
+    <FormButton
+      className={`btn-primary ${className}`}
+      type='submit'
+      action={action}
+    >
+      Submit
+    </FormButton>
+  );
+}
+
+/**
+ * Reset button with danger styling.
+ *
+ * @param {object} props - Component props.
+ * @param {() => void} [props.action] - Click handler; will be wrapped with preventDefault() behaviour.
+ * @param {string} [props.className] - Additional classes to modify appearance (recommended for color changes).
+ */
+export function ResetButton({ action, className }: ButtonInterface) {
+  return (
+    <FormButton
+      className={`btn-danger ${className}`}
+      type='button'
+      action={action}
+    >
+      Reset
+    </FormButton>
+  );
+}

Tokenization/webapp/app/components/form/form-input.tsx

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import React, { type PropsWithChildren } from 'react';
+import { type FormInputInterface } from './form.d';
+
+/**
+ * FormInput
+ *
+ * Generic input wrapper that normalizes change handling for string and number values.
+ *
+ * @template T - input value type, either string or number (default: string).
+ * @param {object} props - Component props.
+ * @param {T} props.value - Current input value.
+ * @param {(v: T) => void} props.setValue - Setter for the value; called with parsed value on change.
+ * @param {string} [props.labelText] - Optional label text displayed above the input.
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Props spread onto the outer container element.
+ * @param {React.LabelHTMLAttributes<HTMLLabelElement>} [props.labelProps] - Props spread onto the label element.
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} [props.inputProps] - Props spread onto the input element.
+ *
+*/
+function FormInput<T extends string | number = string>({
+  value,
+  setValue,
+  labelText,
+  name,
+  children,
+}: PropsWithChildren<FormInputInterface<T>>) {
+
+  // If setValue and value are provided than input is controlled
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { target } = e;
+    let newVal: T;
+    if (typeof value === 'number') {
+      const parsed = parseFloat(target.value);
+      newVal = (isNaN(parsed) ? 0 : parsed) as T;
+    } else {
+      newVal = target.value as T;
+    }
+    setValue?.(newVal);
+  };
+
+  const childInput = React.Children.toArray(children)[0];
+  const input = React.cloneElement(childInput as React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>>, {
+    id: name,
+    value: value as unknown as string,
+    onChange: handleChange,
+  });
+
+  return (
+    <div className='my-input'>
+      {labelText && (
+        <label htmlFor={name}>
+          {labelText}
+        </label>
+      )}
+      {input}
+    </div>
+  );
+}
+
+/**
+ * FormInputNumber
+ *
+ * Number input specialization of FormInput.
+ *
+ * @param {object} props - component props
+ * @param {number} props.value - current numeric value
+ * @param {(v: number) => void} props.setValue - setter for the numeric value
+ * @param {string} [props.labelText] - optional label text
+ * @param {string} props.name - input name attribute
+ *
+ * notes:
+ * - step is set to 1 and min to 0 in the input element
+ * - if value and setValue are provided than input is controlled
+ */
+export function FormInputNumber({ value, setValue, labelText, name }: FormInputInterface) {
+  return <FormInput
+    value={value}
+    setValue={setValue}
+    labelText={labelText}
+    name={name}
+  >
+    <input type='number' name={name} step={1} min={0}/>
+  </FormInput>;
+}
+
+export function FormInputDatetime({ value, setValue, labelText, name }: FormInputInterface<string>) {
+  return <FormInput
+    value={value}
+    setValue={setValue}
+    labelText={labelText}
+    name={name}
+  >
+    <input type='datetime-local' name={name} />
+  </FormInput>;
+}