[OGUI-1805] Component library and layout

Tokenization/webapp/app/app.css

@@ -12,15 +12,66 @@
  * or submit itself to any jurisdiction.
 */
 
+:root {
+    --color-transparent: rgba(0,0,0,0)
+}
+
+.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; 
+}
+

Tokenization/webapp/app/components/box.tsx

@@ -0,0 +1,70 @@
+/**
+ * @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 { IconArrowCircleRight, IconContainer, IconExpandRight } from '~/ui/icon';
+
+interface BoxInterface {
+  children: React.ReactNode;
+  link: string | null;
+}
+
+interface PrimaryBoxInterface extends BoxInterface {
+  className_div1: string;
+  className_div2: string;
+}
+
+export const Box = ({ children, link, className_div1, className_div2 }: PrimaryBoxInterface) => (
+  <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>
+);
+
+export const Box1_2 = ({ children, link }: BoxInterface) => (
+  <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>
+);
+
+export const Box1_1 = ({ children, link }: BoxInterface) => (
+  <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,36 @@
+import type { ButtonInterface } from "../window/window"
+
+const 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>
+}
+
+export const SubmitButton = ({action, className}: ButtonInterface) => {
+    return <FormButton 
+        className={`btn-primary ${className}`}
+        type='submit'
+        action={action}
+    >
+        Submit
+    </FormButton>
+}
+
+export const 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,55 @@
+/**
+ * @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 { type FormInputInterface } from './form.d';
+
+export const FormInput = <T extends string | number = string>({
+  value,
+  setValue,
+  labelText,
+  containerProps,
+  labelProps,
+  inputProps,
+}: FormInputInterface<T>) => {
+  const inputId = inputProps?.id ?? labelProps?.htmlFor ?? undefined;
+
+  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);
+  };
+
+  return (
+    <div className='my-input' {...containerProps}>
+      {labelText && (
+        <label {...labelProps} htmlFor={inputId}>
+          {labelText}
+        </label>
+      )}
+      <input
+        {...inputProps}
+        id={inputId}
+        value={value as unknown as string}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,57 @@
+/**
+ * @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 SelectInterface } from './form.d';
+import { FormSelectBase, SelectFrame, SelectFrameMulti } from './select-helper';
+
+export const FormSelect = <T extends string | number = string, >(props: SelectInterface<T>) => {
+  const { value, setValue, options } = { ...props };
+  const selected = options.find((o) => o.value === value) ?? null;
+  const handleSelect = (val: T) => {
+    setValue(val);
+  };
+
+  return (
+    <FormSelectBase
+      {...props}
+      selected={selected}
+      handleSelect={handleSelect as (value: T extends Array<infer U> ? U : T) => void}
+      render={SelectFrame}
+    />
+
+  );
+};
+
+export const FormSelectMulti = <T extends string | number = string, >(props: SelectInterface<T[]>)=> {
+  const { value, setValue, options } = { ...props };
+  const selected = options.filter((o) => value.includes(o.value as unknown as T)) || [];
+
+  const handleSelect = (val: T) => {
+    setValue((prev) => [...prev, val]);
+  };
+
+  const handleDeselect = (val: T) => {
+    setValue((prev) => prev.filter(v => v !== val));
+  };
+
+  return (
+    <FormSelectBase
+      {...props}
+      selected={selected}
+      handleSelect={handleSelect}
+      handleDeselect={handleDeselect}
+      takeSelectedToOption={false}
+      render={SelectFrameMulti}
+    />
+  );
+};

Tokenization/webapp/app/components/form/form.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @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 React from 'react';
+import { type SetStateAction } from 'react';
+import type { OptionType as Option, DialogPropsBase as DPB } from '../../utils/types';
+
+export interface FormInputInterface<T extends string | number = string> {
+  value: T;
+  setValue: React.Dispatch<React.SetStateAction<T>>;
+  labelText?: string;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+
+export interface SelectInterface<T = string | number | (string | number)[], V = T extends Array<infer U> ? U : T> {
+  id: string;
+  options: Option[];
+  placeholder?: string;
+  label: string | null;
+  value: T;
+  setValue: React.Dispatch<SetStateAction<T>>;
+  selected?: Option | Option[] | null;
+  handleSelect?: (value: V) => void;
+  handleDeselect?: (value: V) => void;
+  takeSelectedToOption?: boolean;
+  render?: React.ElementType;
+}
+
+export interface SelectLabelProps<T extends string | number> extends DPB {
+  selected: Option | Option[] | null;
+  placeholder: string;
+  handleDeselect?: (value: T) => void;
+}
+
+export interface SelectOptionsProps<T extends string | number> extends DPB {
+  options: Option[];
+  selected?: Option | Option[] | null;
+  takeSelectedToOption?: boolean;
+  handleSelect?: (value: T) => void;
+
+}

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

@@ -0,0 +1,32 @@
+/**
+ * @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';
+
+interface FormInterface extends React.HTMLAttributes<HTMLFormElement> {}
+
+export const Form = ({ children, className, id }: FormInterface) => {
+  const _className = className ?? '';
+
+  return (
+    <div
+      id={id}
+      className={_className}
+    >
+      <form>
+        {children}
+      </form>
+    </div>
+  );
+};