react-science 0.19.2 → 0.20.0

package/src/components/forms/Input.tsx

@@ -0,0 +1,255 @@
+import styled from '@emotion/styled';
+import { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+
+import { FullSpinner } from '../index';
+
+import { useFieldsContext } from './context/FieldsContext';
+
+type InputVariant = 'default' | 'small';
+
+interface StyledProps {
+  variant: InputVariant;
+  hasLeading: boolean;
+  hasTrailing: boolean;
+}
+
+const LabelStyled = styled.label<StyledProps>`
+  padding: ${(props) =>
+    props.variant === 'default'
+      ? props.hasTrailing
+        ? '2px 9px 4px 9px'
+        : '2px 9px'
+      : props.hasTrailing
+      ? '1px 7px 1px 7px'
+      : '1px 7px'};
+
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  line-height: '17px';
+
+  background-color: white;
+  border-width: 1px;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 0%;
+  display: flex;
+  position: relative;
+
+  border-top-right-radius: ${(props) =>
+    props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-bottom-right-radius: ${(props) =>
+    props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-top-left-radius: ${(props) =>
+    props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-bottom-left-radius: ${(props) =>
+    props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-radius: ${(props) =>
+    !props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-color: var(--custom-border-color);
+`;
+
+function getStyleColor(hasError: boolean, hasValid: boolean) {
+  if (hasError) {
+    return {
+      default: '#ffa39e',
+      hover: '#f95d55',
+    };
+  }
+
+  if (hasValid) {
+    return {
+      default: '#6adc24',
+      hover: '#62cb21',
+    };
+  }
+
+  return {
+    default: 'rgb(217, 217, 217)',
+    hover: '#4096ff',
+  };
+}
+
+const GroupStyled = styled.div<{ hasError: boolean; hasValid: boolean }>`
+  display: flex;
+  border-radius: 0.375rem;
+  margin-top: 0.25rem;
+
+  .addon {
+    color: ${({ hasError }) => hasError && '#f95d55'};
+  }
+
+  --custom-border-color: ${({ hasError, hasValid }) =>
+    getStyleColor(hasError, hasValid).default};
+
+  :hover,
+  :focus-within {
+    --custom-border-color: ${({ hasError, hasValid }) =>
+      getStyleColor(hasError, hasValid).hover};
+  }
+`;
+
+const InputStyled = styled.input`
+  padding: 0;
+  flex: 1 1 0%;
+  border: none;
+  position: relative;
+  outline: none;
+`;
+
+const LeadingAddonStyled = styled.div`
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border-right-width: 0px;
+  border-width: 1px;
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+  align-items: center;
+  display: inline-flex;
+
+  border-right: none;
+
+  border-color: var(--custom-border-color);
+`;
+
+const TrailingAddonStyled = styled.div`
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border-left-width: 0px;
+  border-width: 1px;
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  align-items: center;
+  display: inline-flex;
+
+  border-left: none;
+
+  border-color: var(--custom-border-color);
+`;
+
+const LeadingInlineAddonStyled = styled.div`
+  display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+`;
+
+const TrailingInlineAddonStyled = styled.div`
+  display: flex;
+  align-items: center;
+  padding-left: 0.5rem;
+`;
+
+const RootInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+interface RenderAddon {
+  addon: ReactNode;
+  inline?: boolean;
+}
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  variant?: 'default' | 'small';
+
+  leadingAddon?: RenderAddon;
+  trailingAddon?: RenderAddon;
+
+  help?: string;
+  error?: string;
+  valid?: true | string;
+
+  loading?: boolean;
+}
+
+export function Input(props: InputProps) {
+  const {
+    variant: variantProps,
+    trailingAddon,
+    leadingAddon,
+    help,
+    error,
+    valid,
+    loading,
+    ...otherProps
+  } = props;
+
+  const { name, variant: contextVariant } = useFieldsContext();
+
+  const hasLeading = (leadingAddon && !leadingAddon.inline) || false;
+  const hasTrailing = (trailingAddon && !trailingAddon.inline) || false;
+  const variant = variantProps || contextVariant;
+
+  return (
+    <RootInput>
+      <GroupStyled hasError={!!error} hasValid={!!valid}>
+        {leadingAddon && !leadingAddon.inline && (
+          <LeadingAddonStyled>{leadingAddon.addon}</LeadingAddonStyled>
+        )}
+
+        <LabelStyled
+          variant={variant}
+          hasLeading={hasLeading}
+          hasTrailing={hasTrailing}
+        >
+          {leadingAddon?.inline && (
+            <LeadingInlineAddonStyled className="addon">
+              {leadingAddon.addon}
+            </LeadingInlineAddonStyled>
+          )}
+          <InputStyled id={name} name={name} {...otherProps} />
+          {trailingAddon?.inline && (
+            <TrailingInlineAddonStyled className="addon">
+              {trailingAddon.addon}
+            </TrailingInlineAddonStyled>
+          )}
+
+          {loading && (
+            <TrailingInlineAddonStyled
+              style={{ height: variant === 'default' ? 20 : 10 }}
+            >
+              <FullSpinner
+                height={variant === 'default' ? 20 : 10}
+                width={variant === 'default' ? 20 : 10}
+              />
+            </TrailingInlineAddonStyled>
+          )}
+        </LabelStyled>
+
+        {trailingAddon && !trailingAddon.inline && (
+          <TrailingAddonStyled>{trailingAddon.addon}</TrailingAddonStyled>
+        )}
+      </GroupStyled>
+
+      <SubText error={error} help={help} valid={valid} />
+    </RootInput>
+  );
+}
+
+function SubText(props: Pick<InputProps, 'help' | 'error' | 'valid'>) {
+  const { error, help, valid: validProps } = props;
+
+  const valid = typeof validProps === 'string' ? validProps : undefined;
+  const text = error || valid || help;
+
+  return <p style={{ color: getColor(error, validProps) }}>{text}</p>;
+}
+
+function getColor(
+  error?: string,
+  valid?: true | string,
+): CSSProperties['color'] {
+  if (error) {
+    return '#f95d55';
+  }
+
+  if (valid && typeof valid !== 'boolean') {
+    return '#62cb21';
+  }
+
+  return 'gray';
+}

package/src/components/forms/context/FieldsContext.tsx

@@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+
+interface FieldContext {
+  name?: string;
+  variant: 'default' | 'small';
+}
+
+interface FieldProps {
+  name: string;
+  label: string;
+  children: ReactNode;
+  variant?: 'default' | 'small';
+  required?: boolean;
+}
+
+const context = createContext<FieldContext | null>(null);
+
+const FieldContextRoot = styled.div`
+  display: flex;
+  flex-flow: row;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  gap: 5px;
+`;
+
+const Label = styled.label<{ variant: FieldProps['variant'] }>`
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  line-height: ${(props) => (props.variant === 'small' ? '28px' : '32px')};
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  white-space: nowrap;
+  text-align: end;
+`;
+
+const LabelContainer = styled.div`
+  flex-grow: 0;
+  display: inline-block;
+  overflow: hidden;
+  text-align: end;
+  vertical-align: middle;
+  white-space: nowrap;
+`;
+
+const FieldContextRequired = styled.span`
+  color: red;
+`;
+
+export function useFieldsContext(): FieldContext {
+  const ctx = useContext(context);
+
+  if (!ctx) {
+    return { name: undefined, variant: 'default' };
+  }
+
+  return ctx;
+}
+
+export function Field(props: FieldProps) {
+  const { label, name, children, required, variant } = props;
+
+  const memoized = useMemo(() => {
+    return { name, variant: variant || 'default' };
+  }, [name, variant]);
+
+  return (
+    <context.Provider value={memoized}>
+      <FieldContextRoot>
+        <LabelContainer>
+          <Label htmlFor={name} variant={memoized.variant}>
+            {label} {required && <FieldContextRequired>*</FieldContextRequired>}
+            :{' '}
+          </Label>
+        </LabelContainer>
+
+        {children}
+      </FieldContextRoot>
+    </context.Provider>
+  );
+}

package/src/components/forms/context/index.ts

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

package/src/components/forms/index.ts

@@ -0,0 +1,2 @@
+export * from './Input';
+export * from './context';

package/src/components/index.ts

@@ -3,6 +3,7 @@ export * from './button/index';
 export * from './color-picker/index';
 export * from './drop-zone/index';
 export * from './dropdown-menu/index';
+export * from './forms/index';
 export * from './fullscreen/index';
 export * from './header/index';
 export * from './hooks/index';

package/src/components/modal/ConfirmModal.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 
 import { Button } from '..';
@@ -20,6 +19,46 @@ interface ConfirmModalProps {
   maxWidth?: number;
 }
 
+const ConfirmModalDialog = styled.dialog`
+  display: flex;
+  position: fixed;
+  background-color: transparent;
+
+  ::backdrop {
+    background-color: rgba(113, 113, 122, 0.75);
+  }
+`;
+
+const ConfirmModalOpened = styled.div<{
+  headerColor: string;
+}>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  max-height: 90%;
+  width: 100%;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  border-top: 10px solid ${({ headerColor }) => headerColor};
+`;
+
+const ConfirmModalChildrenRoot = styled.div<{ headerColor: string }>`
+  color: ${({ headerColor }) => headerColor};
+  display: flex;
+  flex: 1 1 0%;
+`;
+
+const ConfirmModalFooter = styled.div`
+  border-top: 2px solid rgb(247, 247, 247);
+  padding: 10px 20px 10px 20px;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 10px;
+`;
+
 export function ConfirmModal(props: ConfirmModalProps) {
   const {
     isOpen,
@@ -43,48 +82,14 @@ export function ConfirmModal(props: ConfirmModalProps) {
   });
 
   return (
-    <dialog
-      ref={ref}
-      style={{
-        display: 'flex',
-        position: 'fixed',
-        backgroundColor: 'transparent',
-      }}
-      css={css`
-        ::backdrop: rgba(113, 113, 122, 0.75);
-      `}
-      onClick={onClick}
-    >
+    <ConfirmModalDialog ref={ref} onClick={onClick}>
       {isOpen ? (
-        <div
-          style={{
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            backgroundColor: 'white',
-            maxHeight: '90%',
-            width: '100%',
-            maxWidth: maxWidth || undefined,
-            borderWidth: 1,
-            borderColor: 'transparent',
-            borderRadius: '0.5rem',
-            boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
-            borderTop: `10px solid ${headerColor}`,
-          }}
-        >
-          <div style={{ color: headerColor, display: 'flex', flex: '1 1 0%' }}>
+        <ConfirmModalOpened headerColor={headerColor} style={{ maxWidth }}>
+          <ConfirmModalChildrenRoot headerColor={headerColor}>
             {children}
-          </div>
+          </ConfirmModalChildrenRoot>
 
-          <div
-            style={{
-              borderTop: '2px solid rgb(247, 247, 247)',
-              padding: '10px 20px 10px 20px',
-              display: 'flex',
-              flexDirection: 'row-reverse',
-              gap: 10,
-            }}
-          >
+          <ConfirmModalFooter>
             <Button
               onClick={onConfirm}
               backgroundColor={{
@@ -105,9 +110,9 @@ export function ConfirmModal(props: ConfirmModalProps) {
             >
               {cancelText}
             </Button>
-          </div>
-        </div>
+          </ConfirmModalFooter>
+        </ConfirmModalOpened>
       ) : null}
-    </dialog>
+    </ConfirmModalDialog>
   );
 }

package/src/components/modal/Modal.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactElement, ReactNode } from 'react';
 
 import ModalCloseButton from './ModalCloseButton';
@@ -17,6 +16,47 @@ export interface ModalProps {
   height?: number;
 }
 
+const DialogRoot = styled.dialog`
+  display: flex;
+  position: fixed;
+  background-color: transparent;
+
+  ::backdrop {
+    background-color: rgba(113, 113, 122, 0.75);
+  }
+`;
+
+const DialogOpened = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  max-height: 90%;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+`;
+
+const ModalHeaderStyled = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px 10px 20px;
+  border-bottom: 2px solid rgb(247, 247, 247);
+`;
+
+const ModalBodyStyled = styled.div`
+  display: flex;
+  flex: 1 1 0%;
+  overflow-y: auto;
+`;
+
+const ModalFooterStyled = styled.div`
+  border-top: 2px solid rgb(247, 247, 247);
+  padding: 10px 20px 10px 20px;
+`;
+
 export function Modal(props: ModalProps) {
   const {
     isOpen,
@@ -24,11 +64,12 @@ export function Modal(props: ModalProps) {
     hasCloseButton = true,
     requestCloseOnBackdrop = true,
     requestCloseOnEsc = true,
-    maxWidth,
+    children,
     width,
+    maxWidth,
     height,
-    children,
   } = props;
+
   const { ref, onClick } = useDialog({
     isOpen,
     requestCloseOnEsc,
@@ -37,76 +78,31 @@ export function Modal(props: ModalProps) {
   });
 
   return (
-    <dialog
-      ref={ref}
-      style={{
-        display: 'flex',
-        position: 'fixed',
-        backgroundColor: 'transparent',
-      }}
-      css={css`
-        ::backdrop: rgba(113, 113, 122, 0.75);
-      `}
-      onClick={onClick}
-    >
+    <DialogRoot ref={ref} onClick={onClick}>
       {isOpen ? (
-        <div
+        <DialogOpened
           style={{
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            backgroundColor: 'white',
-            maxHeight: '90%',
-            width: width || '100%',
-            maxWidth: maxWidth || undefined,
+            maxWidth,
             height: height || 'max-content',
-            borderWidth: 1,
-            borderColor: 'transparent',
-            borderRadius: '0.5rem',
-            boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
+            width: width || '100%',
           }}
         >
           {children}
           {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
-        </div>
+        </DialogOpened>
       ) : null}
-    </dialog>
+    </DialogRoot>
   );
 }
 
 Modal.Header = function ModalHeader(props: { children: ReactNode }) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '10px 20px 10px 20px',
-        borderBottom: '2px solid rgb(247, 247, 247)',
-      }}
-    >
-      {props.children}
-    </div>
-  );
+  return <ModalHeaderStyled>{props.children}</ModalHeaderStyled>;
 };
 
 Modal.Body = function ModalBody(props: { children: ReactNode }) {
-  return (
-    <div style={{ display: 'flex', flex: '1 1 0%', overflowY: 'auto' }}>
-      {props.children}
-    </div>
-  );
+  return <ModalBodyStyled>{props.children}</ModalBodyStyled>;
 };
 
 Modal.Footer = function ModalFooter(props: { children: ReactNode }) {
-  return (
-    <div
-      style={{
-        borderTop: '2px solid rgb(247, 247, 247)',
-        padding: '10px 20px 10px 20px',
-      }}
-    >
-      {props.children}
-    </div>
-  );
+  return <ModalFooterStyled>{props.children}</ModalFooterStyled>;
 };

package/src/components/root-layout/RootLayout.tsx

@@ -8,7 +8,7 @@ import root from 'react-shadow/emotion.esm';
 import { AccordionProvider } from '../accordion/AccordionContext';
 
 import { RootLayoutProvider } from './RootLayoutContext';
-import { customDivPreflight } from './css-reset/customPreflight';
+import { CustomDivPreflight } from './css-reset/customPreflight';
 import { preflight } from './css-reset/preflight';
 import { queryClient } from './queryClient';
 
@@ -37,17 +37,13 @@ export function RootLayout(props: RootLayoutProps) {
   return (
     <root.div style={{ ...style, ...props.style }}>
       <Global styles={preflight} />
-      <div
-        ref={ref}
-        css={customDivPreflight}
-        style={{ width: '100%', height: '100%', position: 'relative' }}
-      >
+      <CustomDivPreflight ref={ref}>
         <RootLayoutProvider innerRef={rootRef}>
           <QueryClientProvider client={queryClient}>
             <AccordionProvider>{props.children}</AccordionProvider>
           </QueryClientProvider>
         </RootLayoutProvider>
-      </div>
+      </CustomDivPreflight>
     </root.div>
   );
 }

package/src/components/root-layout/css-reset/customPreflight.ts

@@ -1,7 +1,7 @@
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 // Applying global styles that apply to elements that are not part of the shadow DOM.
-export const customDivPreflight = css`
+export const CustomDivPreflight = styled.div`
   /* html */
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
@@ -9,4 +9,8 @@ export const customDivPreflight = css`
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
     'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  width: 100%;
+  height: 100%;
+  position: relative;
 `;