@redocly/theme 0.6.4 → 0.7.0

package/lib/globalStyle.js

@@ -1784,6 +1784,16 @@ const markdown = (0, styled_components_1.css) `
   --md-numbered-list-number-padding: 0 5px; // @presenter Spacing
 
   // @tokens End
+
+  /**
+  * @tokens Markdown Tabs
+  */
+
+  --md-tabs-tab-text-color: var(--color-emphasis-600); // @presenter Color
+  --md-tabs-active-tab-border-color: var(--text-color); // @presenter Color
+  --md-tabs-hover-tab-border-color: var(--text-color-secondary); // @presenter Color
+
+  // @tokens End
 `;
 const search = (0, styled_components_1.css) `
   /**
@@ -1878,6 +1888,56 @@ const tile = (0, styled_components_1.css) `
   --wide-tile-background-color: var(--color-secondary-50);
   --thin-tile-background-color: var(--color-secondary-50);
 `;
+const apiLogsTable = (0, styled_components_1.css) `
+ --api-logs-row-hover-background-color: var(--color-secondary-300);
+`;
+const pages = (0, styled_components_1.css) `
+  /**
+  * @tokens 404 Page
+  * @presenter Color
+  */
+
+  --page-404-font-family: var(--font-family-base); // @presenter FontFamily
+
+  --page-404-header-text-color: #000; 
+  --page-404-header-font-size: 14em; // @presenter FontSize
+  --page-404-header-font-weight: 600; // @presenter FontWeight
+  --page-404-header-line-height: 1.2; // @presenter LineHeight
+  --page-404-header-margin: 0; // @presenter Spacing
+
+  --page-404-description-text-color: #000;
+  --page-404-description-font-size: 2em; // @presenter FontSize
+  --page-404-description-font-weight: 400; // @presenter FontWeight
+  --page-404-description-line-height: 1; // @presenter LineHeight
+  --page-404-description-margin: 0; // @presenter Spacing
+
+  --page-404-button-margin: 4em; // @presenter Spacing
+
+  // @tokens End
+
+  /**
+  * @tokens 403 Page
+  * @presenter Color
+  */
+ 
+   --page-403-font-family: var(--font-family-base); // @presenter FontFamily
+ 
+   --page-403-header-text-color: #000;
+   --page-403-header-font-size: 14em; // @presenter FontSize
+   --page-403-header-font-weight: 600; // @presenter FontWeight
+   --page-403-header-line-height: 1.2; // @presenter LineHeight
+   --page-403-header-margin: 0; // @presenter Spacing
+ 
+   --page-403-description-text-color: #000;
+   --page-403-description-font-size: 2em; // @presenter FontSize
+   --page-403-description-font-weight: 400; // @presenter FontWeight
+   --page-403-description-line-height: 1; // @presenter LineHeight
+   --page-403-description-margin: 0; // @presenter Spacing
+ 
+   --page-403-button-margin: 4em; // @presenter Spacing
+ 
+   // @tokens End
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
     ${baseColors}
@@ -1906,6 +1966,8 @@ exports.styles = (0, styled_components_1.css) `
     ${lastUpdated}
     ${tile}
     ${loadProgressBar}
+    ${apiLogsTable}
+    ${pages}
   }
 
   :root.dark {

package/lib/index.d.ts

@@ -10,6 +10,7 @@ export * from './Tooltip';
 export * from './SourceCode';
 export * from './Panel';
 export * from './icons';
+export * from './Feedback';
 export * from './hooks';
 export * from './utils';
 export * from './globalStyle';
@@ -20,3 +21,4 @@ export * from './ColorModeSwitcher';
 export * from './Sidebar';
 export * from './types/config';
 export * from './config';
+export * from './Pages';

package/lib/index.js

@@ -26,6 +26,7 @@ __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./SourceCode"), exports);
 __exportStar(require("./Panel"), exports);
 __exportStar(require("./icons"), exports);
+__exportStar(require("./Feedback"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./globalStyle"), exports);
@@ -36,4 +37,5 @@ __exportStar(require("./ColorModeSwitcher"), exports);
 __exportStar(require("./Sidebar"), exports);
 __exportStar(require("./types/config"), exports);
 __exportStar(require("./config"), exports);
+__exportStar(require("./Pages"), exports);
 //# sourceMappingURL=index.js.map

package/lib/mocks/Link.js

@@ -21,7 +21,7 @@ const react_1 = __importDefault(require("react"));
 function Link(props) {
     const { active: _, httpVerb: _1, hasActiveSubItem: _2, routeSlug: _3, external: _4 } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem", "routeSlug", "external"]);
     // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
-    return react_1.default.createElement("a", Object.assign({ href: filteredProps.to }, filteredProps));
+    return react_1.default.createElement("a", Object.assign({ href: filteredProps.to, ref: filteredProps.innerRef }, filteredProps));
 }
 exports.Link = Link;
 //# sourceMappingURL=Link.js.map

package/lib/mocks/hooks/index.js

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
 function useThemeConfig() {
     return {
-        search: { hide: false, placement: 'navbar' },
+        search: {
+            hide: false,
+            placement: 'navbar',
+            shortcuts: ['ctrl+f', 'cmd+k', '/'],
+        },
         markdown: {
             toc: { depth: 3, header: 'Table of contents', hide: false },
             lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
@@ -27,6 +31,12 @@ function useThemeConfig() {
         colorMode: {
             modes: ['light', 'dark'],
         },
+        feedback: {
+            type: 'sentiment',
+        },
+        userProfile: {
+            hide: false,
+        },
     };
 }
 exports.useThemeConfig = useThemeConfig;

package/lib/mocks/search.js

@@ -1,13 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFuseSearch = void 0;
+const react_1 = require("react");
 function useFuseSearch() {
+    const [query, setQuery] = (0, react_1.useState)('');
     return {
-        query: '',
-        setQuery(val) {
-            this.query = val;
-        },
-        items: [],
+        query,
+        setQuery,
+        items: [
+            {
+                id: '1',
+                url: '#someUrl1',
+                title: 'Some Dummy Result Item 1',
+                text: 'Some sample search text',
+            },
+            {
+                id: '2',
+                url: '#someUrl2',
+                title: 'Some Dummy Result Item 2',
+                text: 'Some sample search text 2',
+            },
+        ],
     };
 }
 exports.useFuseSearch = useFuseSearch;

package/lib/ui/Box.d.ts

@@ -1,5 +1,5 @@
-import type { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps } from 'styled-system';
-export interface BoxProps extends SpaceProps, LayoutProps, PositionProps, FlexProps, TextAlignProps, ColorProps, BordersProps {
+import type { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps, GridProps } from 'styled-system';
+export interface BoxProps extends SpaceProps, LayoutProps, PositionProps, FlexProps, TextAlignProps, ColorProps, BordersProps, GridProps {
 }
 export declare const Box: import("styled-components").StyledComponent<"div", any, {
     'data-component-name': string;

package/lib/ui/Box.js

@@ -17,5 +17,6 @@ exports.Box = styled_components_1.default.div.attrs(() => ({
   ${styled_system_1.textAlign}
   ${styled_system_1.color}
   ${styled_system_1.border}
+  ${styled_system_1.grid}
 `;
 //# sourceMappingURL=Box.js.map

package/lib/ui/darkColors.js

@@ -61,8 +61,13 @@ exports.darkMode = (0, styled_components_1.css) `
   --copy-button-tooltip-background-color: var(--tooltip-background-color);
   --tooltip-text-color: #fff;
   --md-table-head-background-color: var(--color-secondary-300);
+  --md-tabs-hover-tab-border-color: var(--color-secondary-500);
   --wide-tile-background-color: #000000;
   --thin-tile-background-color: #000000;
+  --page-404-header-text-color: #fff;
+  --page-404-description-text-color: #fff;
+  --page-403-header-text-color: #fff;
+  --page-403-description-text-color: #fff;
 
   background-color: var(--background-color);
   color: var(--text-color);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redocly/theme",
-  "version": "0.6.4",
-  "description": "Shared UI components",
+  "version": "0.7.0",
+  "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "lib/index.js",
@@ -39,6 +39,7 @@
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router": "^5.3.0",
     "react-router-dom": "^5.3.0",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
@@ -65,16 +66,18 @@
     "@types/jest": "^29.2.1",
     "@types/jest-when": "^3.5.2",
     "@types/lodash.throttle": "^4.1.7",
-    "@types/node": "^16.11.26",
+    "@types/node": "^18.11.18",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "@types/react-router-dom": "^5.3.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-router": "^5.1.20",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "chromatic": "^6.10.2",
+    "concurrently": "^7.4.0",
     "esbuild": "^0.15.11",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
@@ -83,6 +86,7 @@
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
     "react-refresh": "^0.14.0",
+    "react-router": "^5.3.0",
     "react-router-dom": "^5.3.0",
     "storybook-addon-pseudo-states": "^1.15.1",
     "storybook-design-token": "^2.7.1",
@@ -95,10 +99,10 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "concurrently": "^7.4.0",
     "zod": ">=3.19.1"
   },
   "dependencies": {
+    "hotkeys-js": "^3.10.1",
     "timeago.js": "^4.0.2"
   },
   "nx": {

package/src/Feedback/Comment.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '@theme';
+
+import type { CommentProps } from '@theme/Feedback';
+
+export const Comment = ({ settings, onSubmit }: CommentProps): JSX.Element => {
+  const { label, submitText } = settings || {};
+  const [text, setText] = React.useState('');
+  const [submitValue, setSubmitValue] = React.useState('');
+
+  const send = () => {
+    if (!text) return;
+    setSubmitValue(text);
+    onSubmit({ comment: text });
+  };
+  const handleTextAreaChange = (e: any) => {
+    setText(e.target.value);
+  };
+
+  if (submitValue) {
+    return (
+      <Wrapper>
+        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Comment">
+      <Label>{label || 'Please share your feedback with us:'}</Label>
+      <TextArea rows={3} onChange={handleTextAreaChange} />
+      <SendButton onClick={send}>Send</SendButton>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+`;
+
+const TextArea = styled.textarea`
+  font-family: var(--font-family-base);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  color: black;
+  margin: 0 0 10px 0;
+  padding: 10px;
+`;
+
+const SendButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;

package/src/Feedback/Rating.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { RatingProps, ReasonsProps } from '@theme/Feedback';
+import { Comment, Reasons } from '@theme/Feedback';
+
+type StarsProps = {
+  onSubmit: (value: number) => void;
+  max: number;
+};
+
+export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
+  const {
+    label,
+    max,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+  } = settings || {};
+  const [score, setScore] = React.useState(0);
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+
+  if (score && reasonsSettings?.enable && !reasons.length) {
+    const { label: reasonsLabel, items, multi } = reasonsSettings;
+    const buttonText = commentSettings?.enable ? 'Next' : 'Send';
+    return (
+      <Reasons
+        onSubmit={({ reasons }) => setReasons(reasons)}
+        settings={{ label: reasonsLabel, items, multi, buttonText }}
+      />
+    );
+  }
+
+  if (score && commentSettings?.enable && !comment) {
+    return (
+      <Comment
+        onSubmit={({ comment }) => setComment(comment)}
+        settings={{ label: commentSettings.label }}
+      />
+    );
+  }
+
+  if (score) {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+    });
+    return (
+      <Wrapper>
+        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Rating">
+      <Label>{label || 'How helpful was this page?'}</Label>
+      <Stars max={max || 5} onSubmit={setScore} />
+    </Wrapper>
+  );
+};
+
+const Stars = ({ max, onSubmit }: StarsProps): JSX.Element => {
+  const [hovered, setHovered] = React.useState(0);
+  const stars: JSX.Element[] = [];
+
+  for (let index = 1; index <= max; index++) {
+    stars.push(
+      <Star
+        key={index}
+        onClick={() => onSubmit(index)}
+        onMouseOver={() => setHovered(index)}
+        onMouseLeave={() => 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 <>{stars}</>;
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Star = styled.span`
+  cursor: pointer;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+  font-family: var(--font-family-base);
+`;

package/src/Feedback/Reasons.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '@theme';
+
+import type { ReasonsProps } from '@theme/Feedback';
+
+export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
+  const { label, multi, buttonText, items = [] } = settings;
+  const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+
+  if (!items.length) {
+    return <></>;
+  }
+
+  const input_type = multi ? 'checkbox' : 'radio';
+
+  const handleOptionChange = (position: number) => {
+    const updatedCheckedState = multi
+      ? checkedState.map((item, index) => (index === position ? !item : item))
+      : items.map((_, idx) => position === idx);
+
+    setCheckedState(updatedCheckedState);
+  };
+
+  const submitForm = () => {
+    onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
+  };
+
+  return (
+    <Wrapper data-component-name="Feedback/Reasons">
+      <Label>{label || 'Which statement describes your thoughts about this page?'}</Label>
+      {items.map((reason, idx) => (
+        <OptionWrapper key={reason}>
+          <input
+            type={input_type}
+            value={reason}
+            checked={checkedState[idx]}
+            name="reasons"
+            onChange={() => handleOptionChange(idx)}
+          />
+          <label id={reason} onClick={() => handleOptionChange(idx)}>
+            {reason}
+          </label>
+        </OptionWrapper>
+      ))}
+      <SendButton onClick={submitForm}>{buttonText || 'Send'}</SendButton>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+`;
+
+const SendButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 15px;
+`;
+
+const OptionWrapper = styled.div`
+  margin: 5px 0;
+  display: flex;
+  input {
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  label {
+    font-size: 14px;
+    cursor: pointer;
+  }
+`;

package/src/Feedback/Sentiment.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { SentimentProps, ReasonsProps } from '@theme/Feedback';
+import { Comment, Reasons } from '@theme/Feedback';
+
+import { ThumbUp, ThumbDown } from './Thumbs';
+
+export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element => {
+  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const [score, setScore] = React.useState(0);
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+
+  if (score && reasonsSettings?.enable && !reasons.length) {
+    const { label: reasonsLabel, items, multi } = reasonsSettings;
+    const buttonText = commentSettings?.enable ? 'Next' : 'Send';
+    return (
+      <Reasons
+        onSubmit={({ reasons }) => setReasons(reasons)}
+        settings={{ label: reasonsLabel, items, multi, buttonText }}
+      />
+    );
+  }
+
+  if (score && commentSettings?.enable && !comment) {
+    const commentLabel =
+      score === 1
+        ? commentSettings.likeLabel || 'What was most helpful?'
+        : commentSettings.dislikeLabel || 'What can we improve?';
+    return (
+      <Comment onSubmit={({ comment }) => setComment(comment)} settings={{ label: commentLabel }} />
+    );
+  }
+
+  if (score) {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+    });
+    return (
+      <Wrapper>
+        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Sentiment">
+      <Label>{label || 'Was this page helpful?'}</Label>
+      <Vote onClick={() => setScore(1)}>
+        <ThumbUp text="Yes" />
+      </Vote>
+      <Vote onClick={() => setScore(-1)}>
+        <ThumbDown />
+      </Vote>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+`;
+
+const Vote = styled.div`
+  cursor: pointer;
+  margin: 0 10px;
+`;