@scality/core-ui 0.115.0

package/src/lib/components/error-pages/ErrorPage500.component.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  ErrorPageContainer,
+  Row,
+  Title,
+  Description,
+  DescriptionContent,
+  Link,
+} from './ErrorPageStyle';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+const translations = {
+  en: {
+    unexpected_error: 'Unexpected Error',
+    error_desc: 'An error occured and your request cannot be completed.',
+    should_do:
+      'You might check the url, or contact your admin if the error remains.',
+    return_home: 'Return Home',
+    may_also_contact: 'You may also contact ',
+    to_report_issue: ' to report this issue.',
+  },
+  fr: {
+    unexpected_error: 'Erreur inattendue',
+    error_desc:
+      "Une erreur s'est produite et votre demande ne peut être complétée.",
+    should_do:
+      "Vous pouvez vérifier l'url, ou contacter votre administrateur si l'erreur persiste.",
+    return_home: "Retour à l'accueil",
+    may_also_contact: 'Vous pouvez également contacter le ',
+    to_report_issue: ' pour signaler le problème.',
+  },
+};
+type Props = {
+  supportLink?: string;
+  locale?: string;
+  onReturnHomeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  errorMessage?: { en: string; fr: string };
+};
+
+function ErrorPage500({
+  supportLink = undefined,
+  locale = 'en',
+  onReturnHomeClick,
+  errorMessage,
+  ...rest
+}: Props) {
+  if (!translations[locale]) locale = 'en';
+  // Ensure the locale formatting is consistent
+  locale = locale.toLowerCase();
+  return (
+    <ErrorPageContainer className="sc-error-page500" {...rest}>
+      <Row>
+        <Icon name="Exclamation-triangle" size="2x" color="statusWarning" />
+        <Title>{translations[locale].unexpected_error}</Title>
+      </Row>
+      <Row>
+        <Description>
+          <DescriptionContent>
+            {errorMessage
+              ? errorMessage[locale]
+              : translations[locale].error_desc}
+          </DescriptionContent>
+          <DescriptionContent>
+            {translations[locale].should_do}
+          </DescriptionContent>
+          {supportLink && (
+            <DescriptionContent>
+              {translations[locale].may_also_contact}
+              <Link href={supportLink}>
+                support <Icon name="External-link" />
+              </Link>
+              {translations[locale].to_report_issue}
+            </DescriptionContent>
+          )}
+        </Description>
+      </Row>
+      {onReturnHomeClick && (
+        <Button
+          label={translations[locale].return_home}
+          variant="secondary"
+          onClick={onReturnHomeClick}
+        />
+      )}
+    </ErrorPageContainer>
+  );
+}
+
+export { ErrorPage500 };

package/src/lib/components/error-pages/ErrorPageAuth.component.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Icon } from '../icon/Icon.component';
+import {
+  ErrorPageContainer,
+  Row,
+  Title,
+  Description,
+  DescriptionContent,
+  Link,
+} from './ErrorPageStyle';
+const translations = {
+  en: {
+    unexpected_error: 'Authenticating...',
+    error_desc: 'The authentication is in progress.',
+    should_do: 'If this message persist please try refreshing your page.',
+    may_also_contact: 'You may also contact ',
+    to_report_issue: ' to report this issue.',
+  },
+  fr: {
+    unexpected_error: 'Authentification',
+    error_desc: 'Authentification en cours.',
+    should_do:
+      "Si ce message persiste, vous pouvez essayer d'actualiser cette page.",
+    may_also_contact: 'Vous pouvez également contacter le ',
+    to_report_issue: ' pour signaler le problème.',
+  },
+};
+type Props = {
+  supportLink?: string;
+  locale?: string;
+};
+
+function ErrorPageAuth({
+  supportLink = undefined,
+  locale = 'en',
+  ...rest
+}: Props) {
+  if (!translations[locale]) locale = 'en';
+  // Ensure the locale formatting is consistent
+  locale = locale.toLowerCase();
+  return (
+    <ErrorPageContainer className="sc-error-pageauth" {...rest}>
+      <Row>
+        <Icon name="Info-circle" size="2x" color="textPrimary" />
+        <Title>{translations[locale].unexpected_error}</Title>
+      </Row>
+      <Row>
+        <Description>
+          <DescriptionContent>
+            {translations[locale].error_desc}
+          </DescriptionContent>
+          <DescriptionContent>
+            {translations[locale].should_do}
+          </DescriptionContent>
+          {supportLink && (
+            <DescriptionContent>
+              {translations[locale].may_also_contact}
+              <Link href={supportLink}>
+                support <Icon name="External-link" />
+              </Link>
+              {translations[locale].to_report_issue}
+            </DescriptionContent>
+          )}
+        </Description>
+      </Row>
+    </ErrorPageContainer>
+  );
+}
+
+export { ErrorPageAuth };

package/src/lib/components/error-pages/ErrorPageStyle.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { spacing, fontSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+export const ErrorPageContainer = styled.div`
+  background-color: ${getThemePropSelector('backgroundLevel1')};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+export const Title = styled.h2`
+  color: ${getThemePropSelector('textPrimary')};
+  margin: 0;
+  margin-left: ${spacing.sp20};
+`;
+export const Description = styled.div`
+  color: ${getThemePropSelector('textPrimary')};
+  font-size: ${fontSize.larger};
+  text-align: center;
+  padding: ${spacing.sp24};
+`;
+export const DescriptionContent = styled.p`
+  margin: 0;
+  padding: ${spacing.sp4};
+`;
+export const Row = styled.div`
+  display: flex;
+  align-items: center;
+`;
+export const Link = styled.a`
+  color: ${getThemePropSelector('textLink')};
+  text-decoration: none;
+`;

package/src/lib/components/form/Form.component.tsx

@@ -0,0 +1,416 @@
+import React, {
+  Children,
+  createContext,
+  FormHTMLAttributes,
+  forwardRef,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { convertRemToPixels } from '../../utils';
+import { Box } from '../box/Box';
+import { Icon, IconName } from '../icon/Icon.component';
+import { IconHelp } from '../IconHelper';
+import { ScrollbarWrapper } from '../scrollbarwrapper/ScrollbarWrapper.component';
+import { Text } from '../text/Text.component';
+
+const DESCRIPTION_PREFIX = 'describe-';
+const LABEL_PREFIX = 'label-';
+const maxWidthTooltip = { maxWidth: '20rem' };
+
+type FormProps = Omit<
+  FormHTMLAttributes<HTMLFormElement>,
+  'noValidate' | 'formNoValidate'
+> & {
+  children: ReactNode | ReactNode[];
+  requireMode?: 'all' | 'partial';
+  leftActions?: ReactNode;
+  rightActions?: ReactNode;
+  banner?: ReactNode;
+};
+
+type PageFormProps = {
+  layout: {
+    kind: 'page';
+    title: string;
+    subTitle?: string;
+    icon?: IconName;
+  };
+} & FormProps;
+type TabFormProps = { layout: { kind: 'tab' } } & FormProps;
+
+const StyledForm = styled.form<PageFormProps | TabFormProps>`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+  background-color: ${(props) =>
+    props.layout.kind === 'page' && props.theme.backgroundLevel4};
+`;
+
+const BasicPageLayout = styled.div<{ layoutKind: 'page' | 'tab' }>`
+  margin: 0 auto;
+  ${(props) =>
+    props.layoutKind === 'page'
+      ? `
+  width: 45rem;
+  padding-right: ${spacing.f16};
+  `
+      : `
+  width: 100%;
+  padding-bottom: ${spacing.r24};`}
+`;
+
+const FixedHeader = styled(BasicPageLayout)`
+  ${(props) =>
+    props.layoutKind === 'page'
+      ? `
+  border-bottom: 1px solid ${props.theme.border};
+  `
+      : ``}
+`;
+
+const FixedFooter = styled(BasicPageLayout)`
+  border-top: 1px solid ${(props) => props.theme.border};
+`;
+
+const PaddedContent = styled.div`
+  padding: ${spacing.f16} 0 ${spacing.f16} ${spacing.f16};
+`;
+const PaddedForHeaderAndFooterContent = styled.div`
+  padding: ${spacing.f16};
+`;
+
+const ScrollArea = styled(BasicPageLayout)`
+  flex-grow: 1;
+  align-self: stretch;
+  overflow-y: auto;
+`;
+
+const LabelContext = createContext<{
+  maxLabelWidth: number;
+  setMaxLabelWidth: (setter: (value: number) => number) => void;
+} | null>(null);
+
+const RequireModeContext = createContext<'all' | 'partial'>('partial');
+
+type ContentProps = {
+  helper: string;
+  error: string;
+};
+
+type FormGroupProps = {
+  label: string;
+  id: string;
+  content: ReactElement<ContentProps>;
+  direction?: 'vertical' | 'horizontal';
+  labelHelpTooltip?: ReactNode;
+  help?: string;
+  error?: string;
+  required?: boolean;
+  helpErrorPosition?: 'right' | 'bottom';
+  disabled?: boolean;
+};
+
+const FormGroup = ({
+  direction = 'horizontal',
+  label,
+  id,
+  labelHelpTooltip,
+  content,
+  help,
+  error,
+  required,
+  helpErrorPosition = 'right',
+  disabled,
+}: FormGroupProps) => {
+  const ctxt = useContext(LabelContext);
+
+  if (!ctxt) {
+    //intentionaly breaking rules of hooks here
+    throw new Error('FormGroup cannot be used outside of Form');
+  }
+
+  const { maxLabelWidth, setMaxLabelWidth } = ctxt;
+  const requireMode = useContext(RequireModeContext);
+  const labelRef = useRef<HTMLLabelElement | null>(null);
+  useEffect(() => {
+    if (labelRef.current) {
+      const width = labelRef.current.getBoundingClientRect().width;
+      setMaxLabelWidth((currentMaxLabelWidth) => {
+        const additionalWdth = labelHelpTooltip ? convertRemToPixels(2) : 0;
+        if (width + additionalWdth > currentMaxLabelWidth) {
+          return width + additionalWdth;
+        }
+        return currentMaxLabelWidth;
+      });
+    }
+  }, [labelRef]);
+
+  const value = {
+    disabled: disabled || false,
+    error: error || undefined,
+  };
+
+  return (
+    <FieldContext.Provider value={value}>
+      <Box
+        display="flex"
+        flexDirection={direction === 'horizontal' ? 'row' : 'column'}
+        alignItems="baseline"
+        gap={direction === 'horizontal' ? spacing['r32'] : spacing['r4']}
+      >
+        <div
+          style={{
+            width: maxLabelWidth === 0 ? 'max-content' : `${maxLabelWidth}px`,
+            flex: 'none',
+          }}
+        >
+          <Stack>
+            <label
+              htmlFor={id}
+              id={`${LABEL_PREFIX}${id}`}
+              ref={labelRef}
+              style={{ opacity: disabled ? 0.5 : 1 }}
+            >
+              <Text>
+                {label}
+                {requireMode !== 'all' && required && ' *'}
+                {requireMode === 'all' && !required && ' (optional)'}
+              </Text>
+            </label>
+            {labelHelpTooltip && (
+              <IconHelp
+                tooltipMessage={labelHelpTooltip}
+                overlayStyle={maxWidthTooltip}
+              />
+            )}
+          </Stack>
+        </div>
+        <Stack
+          direction={helpErrorPosition === 'right' ? 'horizontal' : 'vertical'}
+          gap={helpErrorPosition === 'right' ? 'r8' : 'r4'}
+        >
+          {content}
+          {error ? (
+            <Text
+              variant="Smaller"
+              color="statusCritical"
+              isEmphazed
+              id={`${DESCRIPTION_PREFIX}${id}`}
+            >
+              {error}
+            </Text>
+          ) : help ? (
+            <div
+              style={{
+                opacity: disabled ? 0.5 : 1,
+              }}
+            >
+              <Text
+                variant="Smaller"
+                color="textSecondary"
+                isEmphazed
+                id={`${DESCRIPTION_PREFIX}${id}`}
+              >
+                {help}
+              </Text>
+            </div>
+          ) : (
+            <Text variant="Smaller" isEmphazed>
+              &nbsp;
+            </Text>
+          )}
+        </Stack>
+      </Box>
+    </FieldContext.Provider>
+  );
+};
+
+type FormSectionProps = {
+  children: ReactElement<FormGroupProps> | ReactElement<FormGroupProps>[];
+  title?: { name: string; icon?: IconName; helpTooltip?: string };
+  forceLabelWidth?: number;
+  rightActions?: ReactNode;
+};
+
+const FormSection = ({
+  children,
+  title,
+  forceLabelWidth,
+  rightActions,
+}: FormSectionProps) => {
+  const [maxLabelWidth, setMaxLabelWidth] = useState<number>(
+    forceLabelWidth || 0,
+  );
+  //If all the formgroup are not required, add `(optional)` next to form section title.
+  const groupNotOptional = Children.toArray(children).find((child) =>
+    isValidElement(child) ? child.props.required === true : false,
+  );
+
+  return (
+    <LabelContext.Provider value={{ maxLabelWidth, setMaxLabelWidth }}>
+      <Stack direction="vertical" gap="r12">
+        {title && (
+          <Wrap>
+            <Stack direction="horizontal" gap="r8">
+              {title.icon && <Icon name={title.icon} color="textPrimary" />}
+              <Text isEmphazed>
+                {groupNotOptional
+                  ? `${title.name}`
+                  : `${title.name} (optional)`}
+              </Text>
+              {title.helpTooltip && (
+                <IconHelp
+                  tooltipMessage={title.helpTooltip}
+                  overlayStyle={maxWidthTooltip}
+                />
+              )}
+            </Stack>
+            <div>{rightActions}</div>
+          </Wrap>
+        )}
+        {children}
+      </Stack>
+    </LabelContext.Provider>
+  );
+};
+
+const PageForm = forwardRef<HTMLFormElement, PageFormProps>(
+  (
+    { layout, leftActions, rightActions, children, banner, ...formProps },
+    ref,
+  ) => {
+    const requireMode = useContext(RequireModeContext);
+    return (
+      <ScrollbarWrapper>
+        <StyledForm {...formProps} noValidate ref={ref} layout={layout}>
+          <FixedHeader layoutKind="page">
+            <PaddedForHeaderAndFooterContent>
+              <Wrap>
+                <Stack direction="vertical">
+                  <Text variant="Larger">
+                    {layout.icon && (
+                      <Icon name={layout.icon} color="textSecondary" />
+                    )}{' '}
+                    {layout.title}
+                  </Text>
+                  {layout.subTitle && (
+                    <Text variant="Large" isEmphazed>
+                      {layout.subTitle}
+                    </Text>
+                  )}
+                </Stack>
+                {requireMode === 'partial' && (
+                  <Text
+                    color="textSecondary"
+                    variant="Smaller"
+                    style={{ alignSelf: 'flex-end' }}
+                    isGentleEmphazed
+                  >
+                    * are required fields
+                  </Text>
+                )}
+              </Wrap>
+            </PaddedForHeaderAndFooterContent>
+          </FixedHeader>
+
+          <ScrollArea layoutKind="page">
+            <PaddedContent>
+              <div
+                style={{
+                  paddingBottom: `${spacing.r16}`,
+                }}
+              >
+                {banner}
+              </div>
+              <Stack direction="vertical" withSeparators gap="r24">
+                {Children.toArray(children)}
+              </Stack>
+            </PaddedContent>
+          </ScrollArea>
+
+          <FixedFooter layoutKind="page">
+            <PaddedForHeaderAndFooterContent>
+              <Wrap>
+                <div>{leftActions}</div>
+                <div>{rightActions}</div>
+              </Wrap>
+            </PaddedForHeaderAndFooterContent>
+          </FixedFooter>
+        </StyledForm>
+      </ScrollbarWrapper>
+    );
+  },
+);
+
+const TabForm = forwardRef<HTMLFormElement, TabFormProps>(
+  ({ leftActions, rightActions, children, banner, ...formProps }, ref) => {
+    return (
+      <ScrollbarWrapper>
+        <StyledForm {...formProps} noValidate ref={ref}>
+          <FixedHeader layoutKind="tab">
+            <Wrap>
+              <div>{leftActions}</div>
+              <div>{rightActions}</div>
+            </Wrap>
+          </FixedHeader>
+
+          <ScrollArea layoutKind="tab">
+            <Stack direction="vertical" gap="r24">
+              {banner}
+              <Stack direction="vertical" withSeparators gap="r24">
+                {Children.toArray(children)}
+              </Stack>
+            </Stack>
+          </ScrollArea>
+        </StyledForm>
+      </ScrollbarWrapper>
+    );
+  },
+);
+
+const Form = forwardRef<HTMLFormElement, TabFormProps | PageFormProps>(
+  ({ layout, requireMode, ...formProps }, ref) => {
+    return (
+      <RequireModeContext.Provider value={requireMode || 'partial'}>
+        {layout.kind === 'page' ? (
+          <PageForm layout={layout} {...formProps} ref={ref}></PageForm>
+        ) : (
+          <TabForm layout={layout} {...formProps} ref={ref}></TabForm>
+        )}
+      </RequireModeContext.Provider>
+    );
+  },
+);
+
+type FieldState = {
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+};
+const FieldContext = createContext<null | FieldState>(null);
+
+const useFieldContext = () => {
+  const fieldContext = useContext(FieldContext);
+  if (!fieldContext) {
+    return { isContextAvailable: false };
+  }
+
+  return { ...fieldContext, isContextAvailable: true };
+};
+
+export {
+  Form,
+  FormSection,
+  FormGroup,
+  useFieldContext,
+  DESCRIPTION_PREFIX,
+  LABEL_PREFIX,
+};