react-science 0.25.0 → 0.26.2

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from './forms/index';
 export * from './fullscreen/index';
 export * from './header/index';
 export * from './hooks/index';
+export * from './info-panel/index';
 export * from './layout-manager/index';
 export * from './modal/index';
 export * from './root-layout/index';

package/src/components/info-panel/InfoPanel.tsx

@@ -0,0 +1,150 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
+// @ts-ignore
+import { Disclosure } from '@headlessui/react';
+import { CSSProperties, useState } from 'react';
+import { FaChevronRight } from 'react-icons/fa';
+
+import { Input, ValueRenderers } from '../index';
+import { Table } from '../table/Table';
+
+export interface InfoPanelData {
+  description: string;
+  data: Record<string, string | number | object | any>;
+}
+
+interface InfoPanelProps {
+  title?: string;
+  data?: InfoPanelData[];
+  titleStyle?: CSSProperties;
+  inputStyle?: CSSProperties;
+  tableStyle?: CSSProperties;
+}
+const style = {
+  container: css({
+    padding: '5px',
+  }),
+  chevron: (open: boolean) =>
+    css({
+      rotate: open ? '90deg' : '0deg',
+      transition: 'all 0.3s ease-in-out',
+    }),
+  button: css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 5,
+    padding: '5px 2px',
+  }),
+  table: css`
+    width: 100%;
+    td:first-of-type {
+      width: 30%;
+    }
+  `,
+};
+
+export function InfoPanel(props: InfoPanelProps) {
+  const [search, setSearch] = useState('');
+  const {
+    title = 'Information',
+    data = [],
+    titleStyle,
+    inputStyle,
+    tableStyle,
+  } = props;
+  function viewData(data: Record<string, string | number | object>) {
+    return Object.keys(data)
+      .map((key) => {
+        const value = data[key];
+        if (
+          !key.toLowerCase().includes(search.toLowerCase()) &&
+          !valueSearch(value, search)
+        ) {
+          return null;
+        }
+        return (
+          <Table.Row key={key}>
+            <ValueRenderers.Text value={key} />
+            {valueCell(value)}
+          </Table.Row>
+        );
+      })
+      .filter((row) => row !== null);
+  }
+  return (
+    <div css={style.container}>
+      <div style={titleStyle}>{title}</div>
+      <Input
+        placeholder="search for a parameter ..."
+        value={search}
+        onChange={({ target }) => {
+          if (target.value !== undefined) setSearch(target.value);
+        }}
+        style={inputStyle}
+      />
+
+      {data.map(({ description, data }) => {
+        const content = viewData(data);
+        return content.length > 0 ? (
+          <Disclosure defaultOpen key={description}>
+            {({ open }) => (
+              <>
+                <Disclosure.Button css={style.button}>
+                  <FaChevronRight css={style.chevron(open)} />
+                  {description}
+                </Disclosure.Button>
+                <Disclosure.Panel>
+                  <Table css={style.table} style={tableStyle}>
+                    <Table.Header>
+                      <ValueRenderers.Title value="Parameter" />
+                      <ValueRenderers.Title value="Value" />
+                    </Table.Header>
+                    {content}
+                  </Table>
+                </Disclosure.Panel>
+              </>
+            )}
+          </Disclosure>
+        ) : null;
+      })}
+    </div>
+  );
+}
+/**
+ * Get the value cell depending on the type of the value
+ * @param value - ValueRenderers value.
+ * @returns - ValueRenderers component.
+ */
+function valueCell(value: number | string | object) {
+  switch (typeof value) {
+    case 'number':
+      return <ValueRenderers.Number value={value} />;
+    case 'object':
+      return <ValueRenderers.Object value={value} />;
+    case 'string':
+      return <ValueRenderers.Text value={value} />;
+    default:
+      <ValueRenderers.Text value={value} />;
+  }
+}
+
+/**
+ * Search a string in different type of values
+ *
+ * @param value - Value to search in.
+ * @param search - Value to search for.
+ * @returns - If search exist in value
+ */
+function valueSearch(value: number | string | object, search: string): boolean {
+  switch (typeof value) {
+    case 'number':
+      return String(value).includes(search.toLowerCase());
+    case 'object':
+      return JSON.stringify(value).toLowerCase().includes(search.toLowerCase());
+    case 'string':
+      return value.toLowerCase().includes(search.toLowerCase());
+    default:
+      return false;
+  }
+}

package/src/components/info-panel/index.ts

@@ -0,0 +1 @@
+export * from './InfoPanel';

package/src/components/modal/ConfirmModal.tsx

@@ -38,8 +38,6 @@ const ConfirmModalContents = styled.div<{
   flex-direction: column;
   background-color: white;
   width: 100%;
-  border-width: 1px;
-  border-color: transparent;
   border-radius: 0.5rem;
   box-shadow:
     0 0 0 0,
@@ -51,6 +49,9 @@ const ConfirmModalChildrenRoot = styled.div<{ headerColor: string }>`
   color: ${({ headerColor }) => headerColor};
   display: flex;
   flex: 1 1 0%;
+  font-weight: bold;
+  padding: 20px;
+  font-size: 14px;
 `;
 
 const ConfirmModalFooter = styled.div`

package/src/components/modal/Modal.tsx

@@ -22,7 +22,9 @@ export interface ModalProps {
 
 const DialogRoot = styled.dialog`
   background-color: transparent;
-
+  :focus {
+    outline: none;
+  }
   ::backdrop {
     background-color: rgba(113, 113, 122, 0.75);
   }

package/src/components/table/Table.tsx

@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 import {
   Children,
   createContext,
-  CSSProperties,
   isValidElement,
   ReactElement,
   ReactNode,
@@ -58,19 +57,18 @@ function splitChildren(children: ReactNode) {
   }
   return { Rows, Header };
 }
-export interface TableProps {
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   children?: ReactNode;
   border?: boolean;
-  style?: CSSProperties;
 }
 
 export function Table(props: TableProps) {
-  const { border = true, style = {}, children } = props;
+  const { border = true, children, ...tableProps } = props;
   const { Header, Rows } = splitChildren(children);
   const tableContextValue = useMemo(() => ({ border }), [border]);
   return (
     <TableContext.Provider value={tableContextValue}>
-      <table style={style}>
+      <table {...tableProps}>
         {Header}
         <tbody>{Rows}</tbody>
       </table>

package/src/components/toolbar/PanelPreferencesToolbar.tsx

@@ -0,0 +1,46 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { FaCheck, FaTimes } from 'react-icons/fa';
+
+import { Button } from '../button/Button';
+
+interface PanelPreferencesToolbarProps {
+  onClose?: () => void;
+  onSave?: () => void;
+}
+
+const styles = {
+  toolbar: css({
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    fontSize: 16,
+    padding: 3,
+    '& > button': {
+      padding: 0,
+      paddingLeft: 9,
+      minWidth: 'auto',
+    },
+  }),
+};
+
+export function PanelPreferencesToolbar(props: PanelPreferencesToolbarProps) {
+  const { onClose, onSave } = props;
+  return (
+    <div css={styles.toolbar}>
+      <Button
+        onClick={onClose}
+        color={{ basic: '#ca0000', hover: '#ca0000' }}
+        backgroundColor={{ basic: 'white', hover: 'white' }}
+      >
+        <FaTimes />
+      </Button>
+      <Button
+        onClick={onSave}
+        color={{ basic: 'green', hover: 'green' }}
+        backgroundColor={{ basic: 'white', hover: 'white' }}
+      >
+        <FaCheck />
+      </Button>
+    </div>
+  );
+}

package/src/components/toolbar/index.ts

@@ -1 +1,2 @@
 export * from './Toolbar';
+export * from './PanelPreferencesToolbar';