@redocly/theme 0.7.2 → 0.7.3

package/lib/Feedback/Comment.js

@@ -31,7 +31,7 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button/Button");
 const Comment = ({ settings, onSubmit }) => {
-    const { label, submitText } = settings || {};
+    const { label, submitText, onCancel } = settings || {};
     const [text, setText] = React.useState('');
     const [submitValue, setSubmitValue] = React.useState('');
     const send = () => {
@@ -48,9 +48,11 @@ const Comment = ({ settings, onSubmit }) => {
             React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment" },
-        React.createElement(Label, null, label || 'Please share your feedback with us:'),
+        React.createElement(Label, null, label || 'Please share your feedback with us.'),
         React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
-        React.createElement(SendButton, { onClick: send }, "Send")));
+        React.createElement(ButtonsContainer, null,
+            React.createElement(SendButton, { onClick: send }, "Send"),
+            onCancel && React.createElement(CancelButton, { onClick: onCancel }, "Cancel"))));
 };
 exports.Comment = Comment;
 const Wrapper = styled_components_1.default.div `
@@ -70,6 +72,10 @@ const TextArea = styled_components_1.default.textarea `
   margin: 0 0 10px 0;
   padding: 10px;
 `;
+const ButtonsContainer = styled_components_1.default.div `
+  display: flex;
+  justify-content: start;
+`;
 const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
     color: 'primary',
 })) `
@@ -77,4 +83,11 @@ const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() =>
   margin-left: 0;
   margin-right: 0;
 `;
+const CancelButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
+    color: 'secondary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
 //# sourceMappingURL=Comment.js.map

package/lib/Feedback/types.d.ts

@@ -49,6 +49,7 @@ export type CommentProps = {
     settings?: {
         label?: string;
         submitText?: string;
+        onCancel?: () => unknown;
     };
 };
 export type ReasonsProps = {

package/lib/Markdown/CodeSample/CodeSample.js

@@ -28,29 +28,47 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const ClipboardService_1 = require("../../utils/ClipboardService");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const Feedback_1 = require("../../Feedback");
+const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
+const useReportDialog_1 = require("../../hooks/useReportDialog");
 function CodeSample({ rawContent, highlighted, language }) {
     const langClassName = language ? `language-${language}` : '';
-    const { markdown: { copyCodeSnippet = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
+    const { markdown: { copyCodeSnippet = {}, reportCodeSnippet = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
+    const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
+    const [isDialogShown, showDialog, hideDialog] = (0, useReportDialog_1.useReportDialog)(false);
     const copyCode = (code) => {
         ClipboardService_1.ClipboardService.copyCustom(code);
         setIsCopied(true);
-        setTimeout(() => setIsCopied(false), copyCodeSnippet.toasterDuration);
+        setTimeout(() => setIsCopied(false), copyCodeSnippet.toasterDuration || 1000);
     };
     return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
-        !copyCodeSnippet.hide && (react_1.default.createElement(CodeSampleButtonContainer, { onClick: () => copyCode(rawContent) },
-            !isCopied && (react_1.default.createElement(CopyCodeButton, { title: copyCodeSnippet.tooltipText || 'Copy to clipboard' }, copyCodeSnippet.buttonText)),
-            isCopied && react_1.default.createElement(DoneIndicator, null, copyCodeSnippet.toasterText))),
+        react_1.default.createElement(CodeSampleButtonContainer, null,
+            !copyCodeSnippet.hide && (react_1.default.createElement(react_1.default.Fragment, null,
+                !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: copyCodeSnippet.tooltipText || 'Copy to clipboard' }, copyCodeSnippet.buttonText || 'Copy')),
+                isCopied && react_1.default.createElement(DoneIndicator, null, copyCodeSnippet.toasterText || 'Copied!'))),
+            !reportCodeSnippet.hide && (react_1.default.createElement(Button, { onClick: () => showDialog(), title: reportCodeSnippet.tooltipText || 'Report a problem' }, "Report")),
+            isDialogShown && (react_1.default.createElement(ReportDialog, { id: "modal" },
+                react_1.default.createElement(Feedback_1.Comment, { settings: {
+                        label: reportCodeSnippet.label || 'What is wrong with a code?',
+                        onCancel: () => {
+                            hideDialog();
+                        },
+                    }, onSubmit: (value) => {
+                        submitFeedback('problem', Object.assign(Object.assign({}, value), { location: rawContent }));
+                        hideDialog();
+                    } })))),
         react_1.default.createElement("pre", { className: langClassName },
             react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
 }
 exports.CodeSample = CodeSample;
 const CodeSampleButtonContainer = styled_components_1.default.div `
+  display: flex;
   position: absolute;
   top: 12px;
   right: 5px;
 `;
-const CopyCodeButton = styled_components_1.default.div `
+const Button = styled_components_1.default.div `
   padding: var(--code-block-controls-padding);
   border-radius: var(--code-block-controls-border-radius);
   font-size: var(--code-block-controls-font-size);
@@ -124,13 +142,13 @@ const Wrapper = styled_components_1.default.div `
   border-radius: 4px;
   position: relative;
 
-  ${CopyCodeButton},
+  ${Button},
   ${DoneIndicator} {
     color: var(--code-block-controls-text-color);
     background-color: var(--code-block-controls-background-color);
     opacity: var(--code-block-controls-opacity);
   }
-  ${CopyCodeButton}:hover {
+  ${Button}:hover {
     color: var(--code-block-controls-hover-text-color);
     background-color: var(--code-block-controls-hover-background-color);
     opacity: var(--code-block-controls-active-opacity);
@@ -208,4 +226,25 @@ const Wrapper = styled_components_1.default.div `
     ${darkStyleTokens};
   }
 `;
+const ReportDialog = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-background-color);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    background: var(--modal-background-color);
+    box-shadow: var(--modal-box-shadow);
+    padding: 15px;
+    margin: 15px;
+    max-width: 500px;
+    max-height: 300px;
+  }
+`;
 //# sourceMappingURL=CodeSample.js.map

package/lib/config.d.ts

@@ -379,6 +379,20 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             toasterText?: string | undefined;
             toasterDuration?: number | undefined;
         }>>>;
+        reportCodeSnippet: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
+            tooltipText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+            label: z.ZodOptional<z.ZodString>;
+        }, {
+            hide: z.ZodOptional<z.ZodBoolean>;
+        }>, "strip", z.ZodTypeAny, {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        }, {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        }>>>;
     }, "strict", z.ZodTypeAny, {
         frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
@@ -404,6 +418,11 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             toasterText?: string | undefined;
             toasterDuration?: number | undefined;
         };
+        reportCodeSnippet: {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        };
     }, {
         frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
@@ -429,6 +448,11 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             toasterText?: string | undefined;
             toasterDuration?: number | undefined;
         } | undefined;
+        reportCodeSnippet?: {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        } | undefined;
     }>>>;
     openapi: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
     graphql: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
@@ -550,6 +574,11 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             toasterText?: string | undefined;
             toasterDuration?: number | undefined;
         };
+        reportCodeSnippet: {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        };
     } | undefined;
     openapi?: {} | undefined;
     graphql?: {} | undefined;
@@ -690,6 +719,11 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             toasterText?: string | undefined;
             toasterDuration?: number | undefined;
         } | undefined;
+        reportCodeSnippet?: {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        } | undefined;
     } | undefined;
     openapi?: {} | undefined;
     graphql?: {} | undefined;

package/lib/config.js

@@ -155,6 +155,14 @@ exports.ThemeConfig = zod_1.z
             .extend(HideConfig.shape)
             .optional()
             .default({}),
+        reportCodeSnippet: zod_1.z
+            .object({
+            tooltipText: zod_1.z.string().default('Report a problem').optional(),
+            label: zod_1.z.string().optional(),
+        })
+            .extend(HideConfig.shape)
+            .optional()
+            .default({ hide: true }), // TODO: temporary disabled
     })
         .strict()
         .default({})

package/lib/globalStyle.js

@@ -1938,6 +1938,15 @@ const pages = (0, styled_components_1.css) `
  
    // @tokens End
 `;
+const modal = (0, styled_components_1.css) `
+  body:has([id='modal']) {
+    overflow: hidden;
+  }
+  
+  --modal-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
+  --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
+  --modal-background-color: var(--background-color);
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
     ${baseColors}
@@ -1968,6 +1977,7 @@ exports.styles = (0, styled_components_1.css) `
     ${loadProgressBar}
     ${apiLogsTable}
     ${pages}
+    ${modal}
   }
 
   :root.dark {

package/lib/hooks/useReportDialog.d.ts

@@ -0,0 +1 @@
+export declare function useReportDialog(initialState?: boolean): [boolean, () => void, () => void];

package/lib/hooks/useReportDialog.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReportDialog = void 0;
+const react_1 = require("react");
+function useReportDialog(initialState = false) {
+    const [isDialogShown, setIsShown] = (0, react_1.useState)(initialState);
+    const showDialog = () => {
+        setIsShown(true);
+    };
+    const hideDialog = () => {
+        setIsShown(false);
+    };
+    return [isDialogShown, showDialog, hideDialog];
+}
+exports.useReportDialog = useReportDialog;
+//# sourceMappingURL=useReportDialog.js.map

package/lib/mocks/Feedback/useSubmitFeedback.d.ts

@@ -0,0 +1 @@
+export declare function useSubmitFeedback(): any;

package/lib/mocks/Feedback/useSubmitFeedback.js

@@ -0,0 +1,18 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSubmitFeedback = void 0;
+function useSubmitFeedback() {
+    const submitFeedback = () => __awaiter(this, void 0, void 0, function* () { });
+    return { submitFeedback };
+}
+exports.useSubmitFeedback = useSubmitFeedback;
+//# sourceMappingURL=useSubmitFeedback.js.map

package/lib/mocks/hooks/index.js

@@ -18,6 +18,10 @@ function useThemeConfig() {
                 toasterText: 'Copied',
                 toasterDuration: 1500,
             },
+            reportCodeSnippet: {
+                hide: false,
+                tooltipText: 'Report a problem',
+            },
             editPage: {
                 baseUrl: '',
                 text: 'Edit this page',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Feedback/Comment.tsx

@@ -5,7 +5,7 @@ import { Button } from '@theme/Button/Button';
 import type { CommentProps } from '@theme/Feedback';
 
 export const Comment = ({ settings, onSubmit }: CommentProps): JSX.Element => {
-  const { label, submitText } = settings || {};
+  const { label, submitText, onCancel } = settings || {};
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
 
@@ -28,9 +28,12 @@ export const Comment = ({ settings, onSubmit }: CommentProps): JSX.Element => {
 
   return (
     <Wrapper data-component-name="Feedback/Comment">
-      <Label>{label || 'Please share your feedback with us:'}</Label>
+      <Label>{label || 'Please share your feedback with us.'}</Label>
       <TextArea rows={3} onChange={handleTextAreaChange} />
-      <SendButton onClick={send}>Send</SendButton>
+      <ButtonsContainer>
+        <SendButton onClick={send}>Send</SendButton>
+        {onCancel && <CancelButton onClick={onCancel}>Cancel</CancelButton>}
+      </ButtonsContainer>
     </Wrapper>
   );
 };
@@ -55,6 +58,11 @@ const TextArea = styled.textarea`
   padding: 10px;
 `;
 
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: start;
+`;
+
 const SendButton = styled(Button).attrs(() => ({
   color: 'primary',
 }))`
@@ -62,3 +70,11 @@ const SendButton = styled(Button).attrs(() => ({
   margin-left: 0;
   margin-right: 0;
 `;
+
+const CancelButton = styled(Button).attrs(() => ({
+  color: 'secondary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;

package/src/Feedback/types.ts

@@ -41,6 +41,7 @@ export type CommentProps = {
   settings?: {
     label?: string;
     submitText?: string;
+    onCancel?: () => unknown;
   };
 };
 

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -3,6 +3,9 @@ import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { Comment } from '@theme/Feedback';
+import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
+import { useReportDialog } from '@theme/hooks/useReportDialog';
 
 export type CodeSampleProps = {
   language: string;
@@ -12,28 +15,61 @@ export type CodeSampleProps = {
 
 export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
-  const { markdown: { copyCodeSnippet = {} } = {} } = useThemeConfig();
+  const { markdown: { copyCodeSnippet = {}, reportCodeSnippet = {} } = {} } = useThemeConfig();
+  const { submitFeedback } = useSubmitFeedback();
 
   const [isCopied, setIsCopied] = useState(false);
+  const [isDialogShown, showDialog, hideDialog] = useReportDialog(false);
 
   const copyCode = (code: string) => {
     ClipboardService.copyCustom(code);
     setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copyCodeSnippet.toasterDuration);
+    setTimeout(() => setIsCopied(false), copyCodeSnippet.toasterDuration || 1000);
   };
 
   return (
     <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
-      {!copyCodeSnippet.hide && (
-        <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
-          {!isCopied && (
-            <CopyCodeButton title={copyCodeSnippet.tooltipText || 'Copy to clipboard'}>
-              {copyCodeSnippet.buttonText}
-            </CopyCodeButton>
-          )}
-          {isCopied && <DoneIndicator>{copyCodeSnippet.toasterText}</DoneIndicator>}
-        </CodeSampleButtonContainer>
-      )}
+      <CodeSampleButtonContainer>
+        {!copyCodeSnippet.hide && (
+          <>
+            {!isCopied && (
+              <Button
+                onClick={() => copyCode(rawContent)}
+                title={copyCodeSnippet.tooltipText || 'Copy to clipboard'}
+              >
+                {copyCodeSnippet.buttonText || 'Copy'}
+              </Button>
+            )}
+            {isCopied && <DoneIndicator>{copyCodeSnippet.toasterText || 'Copied!'}</DoneIndicator>}
+          </>
+        )}
+
+        {!reportCodeSnippet.hide && (
+          <Button
+            onClick={() => showDialog()}
+            title={reportCodeSnippet.tooltipText || 'Report a problem'}
+          >
+            Report
+          </Button>
+        )}
+
+        {isDialogShown && (
+          <ReportDialog id="modal">
+            <Comment
+              settings={{
+                label: reportCodeSnippet.label || 'What is wrong with a code?',
+                onCancel: () => {
+                  hideDialog();
+                },
+              }}
+              onSubmit={(value) => {
+                submitFeedback('problem', { ...value, location: rawContent });
+                hideDialog();
+              }}
+            />
+          </ReportDialog>
+        )}
+      </CodeSampleButtonContainer>
       <pre className={langClassName}>
         <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
       </pre>
@@ -42,12 +78,13 @@ export function CodeSample({ rawContent, highlighted, language }: CodeSampleProp
 }
 
 const CodeSampleButtonContainer = styled.div`
+  display: flex;
   position: absolute;
   top: 12px;
   right: 5px;
 `;
 
-const CopyCodeButton = styled.div`
+const Button = styled.div`
   padding: var(--code-block-controls-padding);
   border-radius: var(--code-block-controls-border-radius);
   font-size: var(--code-block-controls-font-size);
@@ -124,13 +161,13 @@ const Wrapper = styled.div`
   border-radius: 4px;
   position: relative;
 
-  ${CopyCodeButton},
+  ${Button},
   ${DoneIndicator} {
     color: var(--code-block-controls-text-color);
     background-color: var(--code-block-controls-background-color);
     opacity: var(--code-block-controls-opacity);
   }
-  ${CopyCodeButton}:hover {
+  ${Button}:hover {
     color: var(--code-block-controls-hover-text-color);
     background-color: var(--code-block-controls-hover-background-color);
     opacity: var(--code-block-controls-active-opacity);
@@ -208,3 +245,25 @@ const Wrapper = styled.div`
     ${darkStyleTokens};
   }
 `;
+
+const ReportDialog = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-background-color);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    background: var(--modal-background-color);
+    box-shadow: var(--modal-box-shadow);
+    padding: 15px;
+    margin: 15px;
+    max-width: 500px;
+    max-height: 300px;
+  }
+`;

package/src/config.ts

@@ -164,6 +164,14 @@ export const ThemeConfig = z
           .extend(HideConfig.shape)
           .optional()
           .default({}),
+        reportCodeSnippet: z
+          .object({
+            tooltipText: z.string().default('Report a problem').optional(),
+            label: z.string().optional(),
+          })
+          .extend(HideConfig.shape)
+          .optional()
+          .default({ hide: true }), // TODO: temporary disabled
       })
       .strict()
       .default({})

package/src/globalStyle.ts

@@ -1965,6 +1965,16 @@ const pages = css`
    // @tokens End
 `
 
+const modal = css`
+  body:has([id='modal']) {
+    overflow: hidden;
+  }
+  
+  --modal-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
+  --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
+  --modal-background-color: var(--background-color);
+`
+
 export const styles = css`
   :root {
     ${baseColors}
@@ -1995,6 +2005,7 @@ export const styles = css`
     ${loadProgressBar}
     ${apiLogsTable}
     ${pages}
+    ${modal}
   }
 
   :root.dark {

package/src/hooks/useReportDialog.ts

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+export function useReportDialog(initialState = false): [boolean, () => void, () => void] {
+  const [isDialogShown, setIsShown] = useState(initialState);
+
+  const showDialog = () => {
+    setIsShown(true);
+  };
+  const hideDialog = () => {
+    setIsShown(false);
+  };
+
+  return [isDialogShown, showDialog, hideDialog];
+}

package/src/mocks/Feedback/useSubmitFeedback.tsx

@@ -0,0 +1,4 @@
+export function useSubmitFeedback(): any {
+  const submitFeedback = async () => {};
+  return { submitFeedback };
+}

package/src/mocks/hooks/index.ts

@@ -23,6 +23,10 @@ export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUI
         toasterText: 'Copied',
         toasterDuration: 1500,
       },
+      reportCodeSnippet: {
+        hide: false,
+        tooltipText: 'Report a problem',
+      },
       editPage: {
         baseUrl: '',
         text: 'Edit this page',