@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Feedback/Scale.tsx

@@ -0,0 +1,225 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+
+import type { ScaleProps, ReasonsProps } from '@theme/components/';
+import { useTranslate } from '@portal/hooks';
+import { breakpoints } from '@portal/media-css';
+import { Comment, Reasons } from '@theme/components/Feedback';
+import { RadioCheckButtonIcon } from '@theme/icons/RadioCheckButtonIcon';
+import { Button } from '@theme/components';
+
+export const MAX_SCALE = 10;
+
+export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Element => {
+  const {
+    label,
+    submitText,
+    leftScaleLabel,
+    rightScaleLabel,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+  } = settings || {};
+  const [score, setScore] = React.useState(0);
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+  const { translate } = useTranslate();
+
+  const scaleOptions = [];
+
+  for (let i = 1; i <= MAX_SCALE; i++) {
+    scaleOptions.push(
+      <ScaleOption
+        id={`scale-option-${i}`}
+        key={`scale-option-${i}`}
+        onClick={() => setScore(i)}
+        className={`${score === i ? 'active' : ''}`}
+      >
+        {i}
+      </ScaleOption>,
+    );
+  }
+
+  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+  const displayComment = !!score && commentSettings && !commentSettings.hide;
+  const displaySubmitBnt = !!score && (displayReasons || displayComment);
+
+  const onSubmitScaleForm = () => {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+      max: MAX_SCALE,
+    });
+    setIsSubmitted(true);
+  };
+
+  useEffect(() => {
+    if (score && !displayComment && !displayReasons) {
+      onSubmitScaleForm();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [score, displayComment, displayReasons]);
+
+  if (isSubmitted) {
+    return (
+      <Wrapper>
+        <Label data-translation-key="theme.feedback.settings.submitText">
+          {submitText ||
+            translate(
+              'theme.feedback.settings.submitText',
+              'Thank you for helping improve our documentation!',
+            )}
+        </Label>
+        <RadioCheckButtonIcon />
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Scale" className={className}>
+      <StyledForm>
+        <StyledFormMandatoryFields>
+          <Label data-translation-key="theme.feedback.settings.label">
+            {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
+          </Label>
+
+          <ScaleWrapper>{scaleOptions}</ScaleWrapper>
+
+          <SubLabelContainer>
+            <SubLabel data-translation-key="theme.feedback.settings.leftScaleLabel">
+              {leftScaleLabel ||
+                translate('theme.feedback.settings.leftScaleLabel', 'Not helpful at all')}
+            </SubLabel>
+            <SubLabel data-translation-key="theme.feedback.settings.rightScaleLabel">
+              {rightScaleLabel ||
+                translate('theme.feedback.settings.rightScaleLabel', 'Extremely helpful')}
+            </SubLabel>
+          </SubLabelContainer>
+        </StyledFormMandatoryFields>
+        <StyledFormOptionalFields>
+          {displayReasons && (
+            <Reasons
+              settings={{
+                label: reasonsSettings?.label,
+                items: reasonsSettings?.items || [],
+                component: reasonsSettings?.component,
+              }}
+              onChange={setReasons}
+            />
+          )}
+
+          {displayComment && (
+            <Comment
+              standAlone={false}
+              onSubmit={({ comment }) => setComment(comment)}
+              settings={{ label: commentSettings.label }}
+            />
+          )}
+        </StyledFormOptionalFields>
+        {displaySubmitBnt && (
+          <ButtonsContainer>
+            <SubmitButton onClick={onSubmitScaleForm}>Submit</SubmitButton>
+          </ButtonsContainer>
+        )}
+      </StyledForm>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  width: 502px;
+  border-radius: 8px;
+  background: var(--bg-raised);
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    width: 100%;
+  }
+`;
+
+const Label = styled.h4`
+  font-family: var(--h4-font-family);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-line-height);
+  color: var(--h4-text-color);
+`;
+
+const SubLabelContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-direction: row;
+`;
+
+const SubLabel = styled.h3`
+  font-family: var(--h4-font-family);
+  font-weight: var(--h4-font-weight);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-line-height);
+  color: var(--text-description);
+`;
+
+const StyledForm = styled.form`
+  width: 100%;
+`;
+
+const SubmitButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: end;
+`;
+
+const StyledFormOptionalFields = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+const StyledFormMandatoryFields = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ScaleOption = styled.div`
+  cursor: pointer;
+  border-radius: 6px;
+  background: var(--bg-overlay);
+  display: flex;
+  padding: 8px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &.active {
+    border: 1px solid var(--text-primary);
+  }
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    padding: 4px 8px;
+  }
+`;
+
+const ScaleWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: 4px;
+  width: 100%;
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    gap: 1px;
+  }
+`;

package/src/components/Feedback/Sentiment.tsx

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+
+import type { SentimentProps, ReasonsProps } from '@theme/components/Feedback';
+import { Comment, Reasons } from '@theme/components/Feedback';
+import { ThumbUp, ThumbDown } from '@theme/components/Feedback/Thumbs';
+import { useTranslate } from '@portal/hooks';
+import { Button } from '@theme/components';
+import { RadioCheckButtonIcon } from '@theme/icons/RadioCheckButtonIcon';
+import { breakpoints } from '@portal/media-css';
+
+export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JSX.Element => {
+  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const [score, setScore] = React.useState(0);
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+  const { translate } = useTranslate();
+
+  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+  const displayComment = !!score && commentSettings && !commentSettings.hide;
+  const displaySubmitBnt = !!score && (displayReasons || displayComment);
+
+  const commentLabel =
+    score === 1
+      ? (commentSettings && commentSettings.likeLabel) ||
+        translate('theme.feedback.settings.comment.likeLabel', 'What was most helpful?')
+      : (commentSettings && commentSettings.dislikeLabel) ||
+        translate('theme.feedback.settings.comment.dislikeLabel', 'What can we improve?');
+
+  const onSubmitSentimentForm = () => {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+    });
+    setIsSubmitted(true);
+  };
+
+  useEffect(() => {
+    if (score && !displayComment && !displayReasons) {
+      onSubmitSentimentForm();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [score, displayComment, displayReasons]);
+
+  if (isSubmitted) {
+    return (
+      <Wrapper>
+        <Label data-translation-key="theme.feedback.settings.submitText">
+          {submitText ||
+            translate(
+              'theme.feedback.settings.submitText',
+              'Thank you for helping improve our documentation!',
+            )}
+        </Label>
+        <RadioCheckButtonIcon />
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Sentiment" className={className}>
+      <StyledForm>
+        <StyledFormMandatoryFields>
+          <Label data-translation-key="theme.feedback.settings.label">
+            {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
+          </Label>
+
+          <StyledMandatoryFieldContainer>
+            <>
+              <Vote
+                className={`${score === 1 ? 'active' : ''}`}
+                onClick={() => {
+                  setScore(1);
+                }}
+              >
+                <ThumbUp />
+              </Vote>
+              <Vote
+                className={`${score === -1 ? 'active' : ''}`}
+                onClick={() => {
+                  setScore(-1);
+                }}
+              >
+                <ThumbDown />
+              </Vote>
+            </>
+          </StyledMandatoryFieldContainer>
+        </StyledFormMandatoryFields>
+        <StyledFormOptionalFields>
+          {displayReasons && (
+            <Reasons
+              settings={{
+                label: reasonsSettings?.label,
+                items: reasonsSettings?.items || [],
+                component: reasonsSettings?.component,
+              }}
+              onChange={setReasons}
+            />
+          )}
+
+          {displayComment && (
+            <Comment
+              standAlone={false}
+              onSubmit={({ comment }) => setComment(comment)}
+              settings={{ label: commentLabel }}
+            />
+          )}
+        </StyledFormOptionalFields>
+        {displaySubmitBnt && (
+          <ButtonsContainer>
+            <SubmitButton onClick={onSubmitSentimentForm}>Submit</SubmitButton>
+          </ButtonsContainer>
+        )}
+      </StyledForm>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  width: 424px;
+  border-radius: 8px;
+  background: var(--bg-raised);
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    width: 100%;
+  }
+`;
+
+const Label = styled.h4`
+  font-family: var(--h4-font-family);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-line-height);
+  color: var(--h4-text-color);
+  margin-right: 15px;
+`;
+
+const Vote = styled.div`
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  flex-flow: row-reverse;
+  color: var(--text-description);
+  &.active {
+    color: var(--text-primary);
+  }
+  &:hover {
+    color: var(--text-primary);
+    svg {
+      > g {
+        fill: var(--text-primary);
+      }
+    }
+  }
+`;
+
+const StyledForm = styled.form`
+  width: 100%;
+`;
+
+const StyledFormOptionalFields = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+const StyledFormMandatoryFields = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledMandatoryFieldContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const SubmitButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: end;
+`;

package/src/components/Feedback/Stars.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export type StarsProps = {
+  max?: number;
+  name?: string;
+  value?: number;
+  onChange: (value: number) => void;
+};
+
+export const Stars = ({ max = 5, onChange, value }: StarsProps): JSX.Element => {
+  const [hovered, setHovered] = React.useState(value || 0);
+  const stars: JSX.Element[] = [];
+
+  for (let index = 1; index <= max; index++) {
+    stars.push(
+      <Star
+        key={index}
+        onClick={() => onChange(index)}
+        onMouseOver={() => setHovered(index)}
+        onMouseLeave={() => !value && setHovered(0)}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+          {hovered < index ? (
+            <g fill="#e8c002">
+              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" />
+            </g>
+          ) : (
+            <g fill="#e8c002">
+              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" />
+            </g>
+          )}
+        </svg>
+      </Star>,
+    );
+  }
+
+  return <StarsWrapper>{stars}</StarsWrapper>;
+};
+
+const StarsWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const Star = styled.span`
+  cursor: pointer;
+  gap: 8px;
+`;

package/src/components/Feedback/Thumbs.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ThumbDownIcon } from '@theme/icons/ThumbDownIcon';
+import { ThumbUpIcon } from '@theme/icons/ThumbUpIcon';
+
+export const ThumbUp = () => {
+  return (
+    <Wrapper>
+      <ThumbUpIcon />
+    </Wrapper>
+  );
+};
+
+export const ThumbDown = () => {
+  return (
+    <Wrapper>
+      <ThumbDownIcon />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;

package/src/components/Feedback/index.ts

@@ -0,0 +1,10 @@
+export { Feedback } from '@theme/components/Feedback/Feedback';
+export { Rating } from '@theme/components/Feedback/Rating';
+export { Sentiment } from '@theme/components/Feedback/Sentiment';
+export { Mood } from '@theme/components/Feedback/Mood';
+export { Scale } from '@theme/components/Feedback/Scale';
+export { Comment } from '@theme/components/Feedback/Comment';
+export { Reasons } from '@theme/components/Feedback/Reasons';
+export { ReportDialog } from '@theme/components/Feedback/ReportDialog';
+export { useReportDialog } from '@theme/components/Feedback/useReportDialog';
+export * from './types';

package/src/components/Feedback/types.ts

@@ -0,0 +1,115 @@
+import type { SubmitFeedbackParams } from '@theme/types/portal/src/shared/types/feedback';
+
+export type RatingProps = {
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max: number }) => void;
+  settings?: {
+    label?: string;
+    submitText?: string;
+    comment?: {
+      hide?: boolean;
+      label?: string;
+    };
+    reasons?: {
+      hide?: boolean;
+      label?: string;
+      component?: string;
+      items: string[];
+    };
+  };
+  className?: string;
+};
+
+export type ScaleProps = {
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max?: number }) => void;
+  settings?: {
+    label?: string;
+    submitText?: string;
+    leftScaleLabel?: string;
+    rightScaleLabel?: string;
+    comment?: {
+      hide?: boolean;
+      label?: string;
+    };
+    reasons?: {
+      hide?: boolean;
+      label?: string;
+      component?: string;
+      items: string[];
+    };
+  };
+  className?: string;
+};
+
+export type MoodProps = {
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
+  settings?: {
+    label?: string;
+    submitText?: string;
+    comment?: {
+      hide?: boolean;
+      satisfiedLabel?: string;
+      neutralLabel?: string;
+      dissatisfiedLabel?: string;
+    };
+    reasons?: {
+      hide?: boolean;
+      label?: string;
+      component?: string;
+      items: string[];
+    };
+  };
+  className?: string;
+};
+
+export type SentimentProps = {
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
+  settings?: {
+    label?: string;
+    submitText?: string;
+    comment?: {
+      hide?: boolean;
+      likeLabel?: string;
+      dislikeLabel?: string;
+    };
+    reasons?: {
+      hide?: boolean;
+      label?: string;
+      component?: string;
+      items: string[];
+    };
+  };
+  className?: string;
+};
+
+export type CommentProps = {
+  onSubmit: (value: { comment: string }) => void;
+  onCancel?: () => unknown;
+  settings?: {
+    label?: string;
+    submitText?: string;
+  };
+  standAlone?: boolean;
+  className?: string;
+};
+
+export type ReasonsProps = {
+  onChange: (value: string[]) => void;
+  settings: {
+    label?: string;
+    component?: string;
+    items: string[];
+  };
+  className?: string;
+};
+
+export type ReportDialogProps = {
+  location: string;
+  lang?: string;
+  onSubmit: () => void;
+  onCancel: () => void;
+  settings: {
+    label?: string;
+  };
+  submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
+  className?: string;
+};

package/src/components/Feedback/useReportDialog.ts

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+
+import type { ReportDialogProps } from '@theme/components/Feedback/types';
+import { useTranslate } from '@portal/hooks';
+import { useThemeConfig } from '@theme/hooks';
+import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
+
+export interface ReportButtonProps {
+  onClick: () => void;
+  buttonText: string;
+  tooltip: string;
+  visible: boolean;
+}
+interface ReportComponentsProps {
+  visible?: boolean;
+  props: Partial<ReportDialogProps> | ReportButtonProps;
+}
+
+export function useReportDialog(): Record<string, ReportComponentsProps> {
+  const { codeSnippet: { report = {} } = {} } = useThemeConfig();
+  const [isReportDialogShown, setIsReportDialogShown] = useState(false);
+  const isReportButtonShown = report?.hide !== true;
+  const { tooltipText, buttonText, label } = report;
+  const { translate } = useTranslate();
+  const { submitFeedback } = useSubmitFeedback();
+
+  const showReportDialog = () => {
+    setIsReportDialogShown(true);
+  };
+  const hideReportDialog = () => {
+    setTimeout(function () {
+      setIsReportDialogShown(false);
+    }, 1000);
+  };
+  const closeReportDialog = () => {
+    setIsReportDialogShown(false);
+  };
+  const reportButtonProps: ReportButtonProps = {
+    onClick: showReportDialog,
+    buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
+    tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
+    visible: isReportButtonShown,
+  };
+  const reportDialogProps: Partial<ReportDialogProps> = {
+    settings: {
+      label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
+    },
+    onSubmit: hideReportDialog,
+    onCancel: closeReportDialog,
+    submitFeedback,
+  };
+
+  return {
+    reportDialog: { visible: isReportDialogShown, props: reportDialogProps },
+    reportButton: { props: reportButtonProps },
+  };
+}