@redocly/theme 0.9.7 → 0.9.9

package/lib/config.js

@@ -107,8 +107,33 @@ exports.ThemeConfig = zod_1.z
     links: zod_1.z.array(LinksConfig).optional(),
     feedback: zod_1.z
         .object({
-        type: zod_1.z.string().default('sentiment'),
-        settings: zod_1.z.string().optional(),
+        type: zod_1.z.enum(['rating', 'sentiment', 'comment', 'reasons']).default('sentiment'),
+        settings: zod_1.z
+            .object({
+            label: zod_1.z.string().optional(),
+            submitText: zod_1.z.string().optional(),
+            max: zod_1.z.number().optional(),
+            buttonText: zod_1.z.string().optional(),
+            multi: zod_1.z.boolean().optional(),
+            items: zod_1.z.array(zod_1.z.string()).min(1).optional(),
+            reasons: zod_1.z
+                .object({
+                enable: zod_1.z.boolean().default(true),
+                multi: zod_1.z.boolean().optional(),
+                label: zod_1.z.string().optional(),
+                items: zod_1.z.array(zod_1.z.string()),
+            })
+                .optional(),
+            comment: zod_1.z
+                .object({
+                enable: zod_1.z.boolean().default(true),
+                label: zod_1.z.string().optional(),
+                likeLabel: zod_1.z.string().optional(),
+                dislikeLabel: zod_1.z.string().optional(),
+            })
+                .optional(),
+        })
+            .optional(),
     })
         .extend(HideConfig.shape)
         .strict()

package/lib/globalStyle.js

@@ -1195,7 +1195,7 @@ const code = (0, styled_components_1.css) `
   --code-block-background-color: #323f4b; // @presenter Color
   --code-block-border-color: var(--border-color); // @presenter Color
   --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --code-block-max-height: 600px;
+  --code-block-max-height: 50vh;
   --code-block-word-break: initial;
 
   /**
@@ -1831,7 +1831,7 @@ const search = (0, styled_components_1.css) `
 
   --search-item-padding: 8px 24px;
   --search-item-text-color: var(--text-color-secondary); // @presenter Color
-  --search-item-title-text-color: var(--text-color); // @presenter Color
+  --search-item-title-text-color: var(--text-color-secondary); // @presenter Color
   --search-item-background-color: transparent; // @presenter Color
   --search-item-active-text-color: var(--text-color-secondary); // @presenter Color
   --search-item-active-title-text-color: var(--text-color); // @presenter Color

package/lib/ui/darkColors.js

@@ -48,7 +48,7 @@ exports.darkMode = (0, styled_components_1.css) `
   --button-hover-background-color: #2b4cc4;
   --button-hover-border-color: #2b4cc4;
   --search-popover-background-color: #1b2738;
-  --search-highlight-text-color: #57a5fd;
+  --search-highlight-text-color: #ffff03;
   --search-item-active-background-color: #1f3559;
   --panel-try-it-nested-body-background-color: #263041;
   --panel-try-it-tabs-active-background-color: #11151d;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -69,7 +69,7 @@
     "@types/node": "^18.11.18",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",

package/src/Feedback/Comment.tsx

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import { Button } from '@theme/Button/Button';
 import type { CommentProps } from '@theme/Feedback';
 
-export const Comment = ({ settings, onSubmit }: CommentProps): JSX.Element => {
-  const { label, submitText, onCancel } = settings || {};
+export const Comment = ({ settings, onSubmit, onCancel }: CommentProps): JSX.Element => {
+  const { label, submitText } = settings || {};
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
 

package/src/Feedback/Feedback.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import type { FeedbackProps } from '@redocly/theme/src/types/portal';
+
+import { Rating, Sentiment, Comment } from '@theme/Feedback';
+import { useThemeConfig } from '@theme/hooks';
+import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
+
+export const Feedback = (props: FeedbackProps & { path?: string }) => {
+  const { submitFeedback } = useSubmitFeedback();
+  const { feedback: themeFeedbackConf } = useThemeConfig();
+  const feedbackConf = { ...themeFeedbackConf, ...props };
+
+  const { type, settings, path } = feedbackConf;
+  switch (type) {
+    case 'rating':
+      return (
+        <Rating
+          settings={settings}
+          onSubmit={(values) => submitFeedback({ type: 'rating', values, path })}
+        />
+      );
+    case 'sentiment':
+      return (
+        <Sentiment
+          settings={settings}
+          onSubmit={(values) => submitFeedback({ type: 'sentiment', values, path })}
+        />
+      );
+    case 'comment':
+      return (
+        <Comment
+          settings={settings}
+          onSubmit={(values) => submitFeedback({ type: 'comment', values, path })}
+        />
+      );
+    default:
+      console.log(`No feedback with type ${type}!`);
+      break;
+  }
+
+  return <></>;
+};

package/src/Feedback/ReportDialog.tsx

@@ -17,11 +17,12 @@ export const ReportDialog = ({
   return (
     <Wrapper className="modal">
       <Comment
-        settings={{ label, onCancel }}
+        settings={{ label }}
         onSubmit={(value) => {
           submitFeedback('problem', { ...value, location });
           onSubmit();
         }}
+        onCancel={onCancel}
       />
     </Wrapper>
   );

package/src/Feedback/index.ts

@@ -1,3 +1,4 @@
+export { Feedback } from '@theme/Feedback/Feedback';
 export { Rating } from '@theme/Feedback/Rating';
 export { Sentiment } from '@theme/Feedback/Sentiment';
 export { Comment } from '@theme/Feedback/Comment';

package/src/Feedback/types.ts

@@ -38,10 +38,10 @@ export type SentimentProps = {
 
 export type CommentProps = {
   onSubmit: (value: { comment: string }) => void;
+  onCancel?: () => unknown;
   settings?: {
     label?: string;
     submitText?: string;
-    onCancel?: () => unknown;
   };
 };
 

package/src/SamplesPanelControls/SamplesPanelControls.ts

@@ -62,6 +62,7 @@ export const SampleControlsWrap = styled.div`
 export const PreformattedCodeBlock = styled(CodeBlock.withComponent('pre'))`
   overflow-x: auto;
   margin: 0;
+  max-height: var(--code-block-max-height);
   font-family: var(--code-font-family);
   padding: 20px;
   border-radius: var(--border-radius);

package/src/Search/utils.tsx

@@ -8,12 +8,13 @@ export const highlight = (text: string | string[]): JSX.Element | string => {
   return (
     <>
       {pre}
-      <Strong>{entry}</Strong>
+      <Highlight>{entry}</Highlight>
       {suf}
     </>
   );
 };
 
-const Strong = styled.strong`
-  color: var(--search-highlight-text-color);
+const Highlight = styled.span`
+  background-color: var(--search-highlight-text-color);
+  color: var(--color-emphasis-900);
 `;

package/src/config.ts

@@ -115,8 +115,33 @@ export const ThemeConfig = z
 
     feedback: z
       .object({
-        type: z.string().default('sentiment'),
-        settings: z.string().optional(),
+        type: z.enum(['rating', 'sentiment', 'comment', 'reasons']).default('sentiment'),
+        settings: z
+          .object({
+            label: z.string().optional(),
+            submitText: z.string().optional(),
+            max: z.number().optional(),
+            buttonText: z.string().optional(),
+            multi: z.boolean().optional(),
+            items: z.array(z.string()).min(1).optional(),
+            reasons: z
+              .object({
+                enable: z.boolean().default(true),
+                multi: z.boolean().optional(),
+                label: z.string().optional(),
+                items: z.array(z.string()),
+              })
+              .optional(),
+            comment: z
+              .object({
+                enable: z.boolean().default(true),
+                label: z.string().optional(),
+                likeLabel: z.string().optional(),
+                dislikeLabel: z.string().optional(),
+              })
+              .optional(),
+          })
+          .optional(),
       })
       .extend(HideConfig.shape)
       .strict()
@@ -200,7 +225,8 @@ export const ThemeConfig = z
   .default({});
 
 export type ThemeConfig = z.infer<typeof ThemeConfig>;
-export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
+// export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
+export type ThemeUIConfig = ThemeConfig & {
   navbar?: any; // TODO
   footer?: any; // TODO
   auth?: {

package/src/globalStyle.ts

@@ -1205,7 +1205,7 @@ const code = css`
   --code-block-background-color: #323f4b; // @presenter Color
   --code-block-border-color: var(--border-color); // @presenter Color
   --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --code-block-max-height: 600px;
+  --code-block-max-height: 50vh;
   --code-block-word-break: initial;
 
   /**
@@ -1852,7 +1852,7 @@ const search = css`
 
   --search-item-padding: 8px 24px;
   --search-item-text-color: var(--text-color-secondary); // @presenter Color
-  --search-item-title-text-color: var(--text-color); // @presenter Color
+  --search-item-title-text-color: var(--text-color-secondary); // @presenter Color
   --search-item-background-color: transparent; // @presenter Color
   --search-item-active-text-color: var(--text-color-secondary); // @presenter Color
   --search-item-active-title-text-color: var(--text-color); // @presenter Color

package/src/types/portal/index.d.ts

@@ -1,2 +1,3 @@
 export * from './src/shared/types/nav';
+export * from './src/shared/types/feedback';
 export type { MdHeading } from './src/shared/types/markdown';

package/src/types/portal/src/shared/types/feedback.d.ts

@@ -0,0 +1,12 @@
+import type { RatingProps, SentimentProps, CommentProps } from '@theme/Feedback';
+
+declare enum FEEDBACK_TYPES {
+  RATING = 'rating',
+  SENTIMENT = 'sentiment',
+  COMMENT = 'comment',
+}
+
+export declare type FeedbackProps = {
+  type: FEEDBACK_TYPES;
+  settings: (RatingProps | SentimentProps | CommentProps)['settings'];
+}

package/src/ui/darkColors.tsx

@@ -46,7 +46,7 @@ export const darkMode = css`
   --button-hover-background-color: #2b4cc4;
   --button-hover-border-color: #2b4cc4;
   --search-popover-background-color: #1b2738;
-  --search-highlight-text-color: #57a5fd;
+  --search-highlight-text-color: #ffff03;
   --search-item-active-background-color: #1f3559;
   --panel-try-it-nested-body-background-color: #263041;
   --panel-try-it-tabs-active-background-color: #11151d;