@mintlify/components 0.3.10 → 0.3.12

package/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "@mintlify/eslint-config-typescript"
+  ],
+  "rules": {
+    "react/prop-types": "off"
+  }
+}

package/.github/dependabot.yml

@@ -0,0 +1,10 @@
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"
+    allow:
+      - dependency-name: "@mintlify/*"

package/.github/workflows/code-style-checks.yaml

@@ -0,0 +1,13 @@
+name: Code Style Checks
+
+on: push
+
+jobs:
+  style-checks:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install modules
+        run: yarn
+      - name: Check formatting
+        run: yarn format:check

package/.github/workflows/sanity.yml

@@ -0,0 +1,13 @@
+name: Sanity Check
+
+on: push
+
+jobs:
+  sanity-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install modules
+        run: yarn
+      - name: Check build
+        run: yarn build

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged

package/.prettierignore

@@ -0,0 +1,49 @@
+# we are using yarn in this project
+package.lock
+
+# user editor preferences
+/.vscode/
+/.idea/
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+/public/feeds/
+
+# production
+/build
+/dist
+
+# generated files
+/public/*
+/src/pages/*
+!/src/pages/api
+/src/pages/api/*.mdx
+!/src/pages/*.tsx
+!/src/pages/*.ts
+/src/config.json
+/src/openapi.json
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+build-storybook.log
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

package/.prettierrc

@@ -0,0 +1 @@
+"@mintlify/prettier-config/config.js"

package/README.md

@@ -48,7 +48,46 @@ This repo contains the components Mintlify uses in our open-source documentation
 
 ## Installation
 
-`npm install @mintlify/components`
+## Add Dependencies
+
+Install this package and peerDependencies of this package,
+using [install-peerdeps](https://github.com/nathanhleung/install-peerdeps).
+
+```sh
+npx install-peerdeps @mintlify/components
+```
+
+### React is already installed
+
+You already have `react` installed or are using `preact` and just need `@headlessui/react` and `@mintlify/components`.
+
+```sh
+# yarn
+yarn add @headlessui/react @mintlify/components
+
+# npm
+npm i @headlessui/react @mintlify/components
+
+# pnpm
+pnpm add @headlessui/react @mintlify/components
+```
+
+### React and headlessui are already installed
+
+You already have `react` and `@headlessui/react` installed and just need `@mintlify/components`.
+
+```sh
+# yarn
+yarn add @mintlify/components
+
+# npm
+npm i @mintlify/components
+
+# pnpm
+pnpm add @mintlify/components
+```
+
+## CSS import
 
 Add the following at the start of your `main.css` file:
 
@@ -66,11 +105,27 @@ The project is designed for use with static side rendering where we don't have a
 
 # Documentation
 
-The [repo wiki](https://github.com/mintlify/components/wiki) explains how to contribute to the repo.
+Go to [mintlify.com/docs/components](https://mintlify.com/docs/components) to see how to use the components in Mintlify's documentation platform.
 
 [Storybook](https://main--63134bd5ae01f2a7717a0e47.chromatic.com/) has interactive demos.
 
-Go to [mintlify.com/docs/components](https://mintlify.com/docs/components) for how to use the components in Mintlify's documentation platform.
+## Contributing
+
+Read the [Contributing guide](https://mintlify.com/docs/contributing) to learn about our development process, the standards and tools used, and how to propose fixes, bugs or open issues.
+
+The [repo wiki](https://github.com/mintlify/components/wiki) explains how to contribute to this repo.
+
+### Code Quality
+
+Check out the [Contribution Tools](https://mintlify.com/docs/contributing#contribution-tools) section in our [Contributing guide](https://mintlify.com/docs/contributing).
+
+#### Formatting
+
+This project uses [prettier](https://prettier.io/) for code formatting. You can auto-format across the codebase by running `yarn format`.
+
+#### Linting
+
+This project uses [eslint](https://eslint.org/) for code linting. You can check linter warnings and errors by running `yarn lint`.
 
 # Long Term Vision
 

package/dist/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 declare function Accordion({ title, description, defaultOpen, icon, onChange, variant, children, }: {
     /** The main text of the Accordion shown in bold */
     title: string;
@@ -11,7 +11,7 @@ declare function Accordion({ title, description, defaultOpen, icon, onChange, va
     /** Callback when the Accordion is clicked with the new open state */
     onChange?: (open: boolean) => void;
     /** The Accordion UI style */
-    variant?: "rounded" | "minimalist";
+    variant?: 'rounded' | 'minimalist';
     /** The Accordion contents */
     children: ReactNode;
 }): JSX.Element;

package/dist/Accordion/AccordionCover.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 declare function AccordionItemCover({ title, description, open, setOpen, icon, coverClass, }: {
     title: string;
     description?: string;

package/dist/Accordion/AccordionGroup.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 declare function AccordionGroup({ children }: {
     children: ReactNode;
 }): JSX.Element;

package/dist/Accordion/index.d.ts

@@ -1,3 +1,3 @@
-import Accordion from "./Accordion";
-import AccordionGroup from "./AccordionGroup";
+import Accordion from './Accordion';
+import AccordionGroup from './AccordionGroup';
 export { Accordion, AccordionGroup };

package/dist/Api/ApiPlayground.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { ParamGroup, RequestMethods } from "./types";
+import { ReactNode } from 'react';
+import { ParamGroup, RequestMethods } from './types';
 export declare function ApiPlayground({ method, paramGroups, paramValues, isSendingRequest, onChangeParamValues, onSendRequest, header, response, }: {
     /** Request method. */
     method: RequestMethods;

package/dist/Api/RequestMethodBubble.d.ts

@@ -1,4 +1,4 @@
-import { RequestMethods } from "./types";
+import { RequestMethods } from './types';
 export declare const RequestMethodBubble: ({ method }: {
     method: RequestMethods;
 }) => JSX.Element;

package/dist/Api/RequestPathHeader.d.ts

@@ -1,4 +1,4 @@
-import { RequestMethods } from "./types";
+import { RequestMethods } from './types';
 export declare const RequestPathHeader: ({ method, path, baseUrls, defaultBaseUrl, onBaseUrlChange, }: {
     /** Request method. */
     method: RequestMethods;

package/dist/Api/index.d.ts

@@ -1,4 +1,4 @@
-import { ApiPlayground } from "./ApiPlayground";
-import { RequestMethodBubble } from "./RequestMethodBubble";
-import { RequestPathHeader } from "./RequestPathHeader";
+import { ApiPlayground } from './ApiPlayground';
+import { RequestMethodBubble } from './RequestMethodBubble';
+import { RequestPathHeader } from './RequestPathHeader';
 export { ApiPlayground, RequestMethodBubble, RequestPathHeader };

package/dist/Api/inputs/ApiInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiInputValue, Param } from "../types";
+import { ApiInputValue, Param } from '../types';
 /**
  *  ApiInput provides a UI to receive inputs from the user for API calls.
  *  The user is responsible for updating value when onChangeParam is called.

package/dist/Api/types.d.ts

@@ -1,4 +1,4 @@
-export type RequestMethods = "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "COPY" | "HEAD" | "OPTIONS" | "LINK" | "UNLINK" | "PURGE" | "LOCK" | "UNLOCK" | "PROPFIND" | "VIEW";
+export type RequestMethods = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'COPY' | 'HEAD' | 'OPTIONS' | 'LINK' | 'UNLINK' | 'PURGE' | 'LOCK' | 'UNLOCK' | 'PROPFIND' | 'VIEW';
 export type ParamGroup = {
     name: string;
     params: Param[];

package/dist/Button.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ComponentPropsWithoutRef, Ref } from "react";
+import { ElementType, ComponentPropsWithoutRef, Ref } from 'react';
 type ColorInterface = keyof typeof colors;
 declare let colors: {
     indigo: string[];
@@ -38,5 +38,5 @@ export interface ButtonPropsBase<T> {
  * @typeParam T - Type of the Element rendered by the button.
  */
 export type ButtonProps<T extends ElementType> = ButtonPropsBase<T> & Omit<ComponentPropsWithoutRef<T>, keyof ButtonPropsBase<T>>;
-export declare function Button<T extends ElementType = "button">({ as, color, darkColor, reverse, children, className, mRef, ...props }: ButtonProps<T>): JSX.Element;
+export declare function Button<T extends ElementType = 'button'>({ as, color, darkColor, reverse, children, className, mRef, ...props }: ButtonProps<T>): JSX.Element;
 export {};

package/dist/Callouts.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 type CalloutContent = {
     children: ReactNode;
 };

package/dist/Card.d.ts

@@ -1,13 +1,17 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from "react";
+import { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from 'react';
 export interface CardPropsBase<T> {
     /**
      * Large title above children.
      */
     title?: string;
     /**
-     * Icon to the top-left of the title.
+     * Icon to the top-left of the title. Can be a ReactNode or a string equal to an image source.
      */
     icon?: ReactNode;
+    /**
+     * If provided, will render an image to the top of the card.
+     */
+    image?: string;
     /**
      * Type of element to be rendered.
      */
@@ -26,4 +30,4 @@ export interface CardPropsBase<T> {
  * @typeParam T - Type of the Element rendered by the card.
  */
 export type CardProps<T extends ElementType> = CardPropsBase<T> & Omit<ComponentPropsWithoutRef<T>, keyof CardPropsBase<T>>;
-export declare function Card<T extends ElementType = "div">({ title, icon, className, children, as, mRef, ...props }: CardProps<T>): JSX.Element;
+export declare function Card<T extends ElementType = 'div'>({ title, icon, image, className, children, as, mRef, ...props }: CardProps<T>): JSX.Element;

package/dist/CardGroup.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-export declare function CardGroup({ children, cols, }: {
+import { ReactNode } from 'react';
+export declare function CardGroup({ children, cols }: {
     children: ReactNode;
     cols?: 1 | 2 | 3 | 4;
 }): JSX.Element;

package/dist/Code/CodeBlock.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef } from "react";
-import { CopyToClipboardResult } from "../utils/copyToClipboard";
+import React, { ComponentPropsWithoutRef } from 'react';
+import { CopyToClipboardResult } from '../utils/copyToClipboard';
 export interface CodeBlockPropsBase {
     filename?: string;
     /**
@@ -15,5 +15,5 @@ export interface CodeBlockPropsBase {
      */
     onCopied?: (result: CopyToClipboardResult, textToCopy?: string) => void;
 }
-export type CodeBlockProps = CodeBlockPropsBase & Omit<ComponentPropsWithoutRef<"div">, keyof CodeBlockPropsBase>;
-export declare function CodeBlock({ filename, filenameColor, tooltipColor, onCopied, children, className, ...props }: CodeBlockProps): JSX.Element;
+export type CodeBlockProps = CodeBlockPropsBase & Omit<ComponentPropsWithoutRef<'div'>, keyof CodeBlockPropsBase>;
+export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockPropsBase & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof CodeBlockPropsBase> & React.RefAttributes<HTMLDivElement>>;

package/dist/Code/CodeGroup.d.ts

@@ -1,6 +1,6 @@
-import React, { ComponentPropsWithoutRef } from "react";
-import { CodeBlockProps } from "./CodeBlock";
-import { CopyToClipboardResult } from "../utils/copyToClipboard";
+import React, { ComponentPropsWithoutRef, FormEventHandler, ReactElement } from 'react';
+import { CopyToClipboardResult } from '../utils/copyToClipboard';
+import { CodeBlockProps } from './CodeBlock';
 export type CodeGroupPropsBase = {
     /**
      * Color of the filename text and the border underneath it when the content is being shown
@@ -15,9 +15,10 @@ export type CodeGroupPropsBase = {
      */
     onCopied?: (result: CopyToClipboardResult, textToCopy?: string) => void;
     isSmallText?: boolean;
-    children?: React.ReactElement<CodeBlockProps>[] | React.ReactElement<CodeBlockProps>;
+    children?: ReactElement<CodeBlockProps>[] | ReactElement<CodeBlockProps>;
+    onChange?: FormEventHandler<HTMLDivElement> & ((index: number) => void);
 };
-export type CodeGroupProps = CodeGroupPropsBase & Omit<ComponentPropsWithoutRef<"div">, keyof CodeGroupPropsBase>;
+export type CodeGroupProps = CodeGroupPropsBase & Omit<ComponentPropsWithoutRef<'div'>, keyof CodeGroupPropsBase>;
 /**
  * Group multiple code blocks into a tabbed UI.
  * Uses CodeBlocks as children but does not render them directly. Instead,
@@ -25,4 +26,4 @@ export type CodeGroupProps = CodeGroupPropsBase & Omit<ComponentPropsWithoutRef<
  *
  * @param {CodeBlock[]} - children
  */
-export declare function CodeGroup({ children, selectedColor, tooltipColor, onCopied, isSmallText, }: CodeGroupProps): JSX.Element | null;
+export declare const CodeGroup: React.ForwardRefExoticComponent<CodeGroupPropsBase & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof CodeGroupPropsBase> & React.RefAttributes<HTMLDivElement>>;

package/dist/Code/CopyToClipboardButton.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef } from "react";
-import { CopyToClipboardResult } from "../utils/copyToClipboard";
+import { ComponentPropsWithoutRef } from 'react';
+import { CopyToClipboardResult } from '../utils/copyToClipboard';
 export declare function CopyToClipboardButton({ textToCopy, tooltipColor, onCopied, className, ...props }: {
     textToCopy: string;
     tooltipColor?: string;
     onCopied?: (result: CopyToClipboardResult, textToCopy?: string) => void;
-} & ComponentPropsWithoutRef<"button">): JSX.Element | null;
+} & ComponentPropsWithoutRef<'button'>): JSX.Element | null;

package/dist/Code/index.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlock, CodeBlockProps, CodeBlockPropsBase } from "./CodeBlock";
-import { CodeGroup, CodeGroupProps, CodeGroupPropsBase } from "./CodeGroup";
-export type { CodeGroupPropsBase, CodeBlockPropsBase, CodeGroupProps, CodeBlockProps, };
+import { CodeBlock, CodeBlockProps, CodeBlockPropsBase } from './CodeBlock';
+import { CodeGroup, CodeGroupProps, CodeGroupPropsBase } from './CodeGroup';
+export type { CodeGroupPropsBase, CodeBlockPropsBase, CodeGroupProps, CodeBlockProps };
 export { CodeBlock, CodeGroup };

package/dist/Expandable/index.d.ts

@@ -1,2 +1,2 @@
-import Expandable from "./Expandable";
+import Expandable from './Expandable';
 export { Expandable };

package/dist/Frame.d.ts

@@ -9,6 +9,6 @@ export declare function Frame({ as: Component, caption, style, className, contai
     html: any;
     children: any;
     hint: string;
-    padding: "none" | "md";
+    padding: 'none' | 'md';
     lightOnly: boolean;
 }): JSX.Element;

package/dist/Tabs/Tab.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 export default function Tab({ title, isActive, children, }: {
     title: string;
     isActive?: boolean;

package/dist/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement } from 'react';
 export default function Tabs({ children }: {
     children: ReactElement[];
 }): JSX.Element;

package/dist/Tabs/index.d.ts

@@ -1,3 +1,3 @@
-import Tab from "./Tab";
-import Tabs from "./Tabs";
+import Tab from './Tab';
+import Tabs from './Tabs';
 export { Tab, Tabs };

package/dist/Tooltip.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-export declare function Tooltip({ tip, children, }: {
+import { ReactNode } from 'react';
+export declare function Tooltip({ tip, children }: {
     tip: string;
     children: ReactNode;
 }): JSX.Element | null;

package/dist/index.d.ts

@@ -1,17 +1,17 @@
-import { Accordion, AccordionGroup } from "./Accordion";
-import { AppearFromTop } from "./AppearFromTop";
-import { ApiPlayground, RequestMethodBubble, RequestPathHeader } from "./Api";
-import { Button, ButtonProps, ButtonPropsBase } from "./Button";
-import { Card, CardProps, CardPropsBase } from "./Card";
-import { CardGroup } from "./CardGroup";
-import { CodeBlock, CodeBlockProps, CodeBlockPropsBase, CodeGroup, CodeGroupProps, CodeGroupPropsBase } from "./Code";
-import { Info, Warning, Note, Tip, Check } from "./Callouts";
-import { Frame } from "./Frame";
-import { Param } from "./Param";
-import { PillSelect } from "./PillSelect";
-import { Tab, Tabs } from "./Tabs";
-import { Tooltip } from "./Tooltip";
-import { Expandable } from "./Expandable";
-import "./css/globals.css";
+import { Accordion, AccordionGroup } from './Accordion';
+import { ApiPlayground, RequestMethodBubble, RequestPathHeader } from './Api';
+import { AppearFromTop } from './AppearFromTop';
+import { Button, ButtonProps, ButtonPropsBase } from './Button';
+import { Info, Warning, Note, Tip, Check } from './Callouts';
+import { Card, CardProps, CardPropsBase } from './Card';
+import { CardGroup } from './CardGroup';
+import { CodeBlock, CodeBlockProps, CodeBlockPropsBase, CodeGroup, CodeGroupProps, CodeGroupPropsBase } from './Code';
+import { Expandable } from './Expandable';
+import { Frame } from './Frame';
+import { Param } from './Param';
+import { PillSelect } from './PillSelect';
+import { Tab, Tabs } from './Tabs';
+import { Tooltip } from './Tooltip';
+import './css/globals.css';
 export type { CardProps, ButtonProps, ButtonPropsBase, CardPropsBase, CodeGroupPropsBase, CodeBlockPropsBase, CodeGroupProps, CodeBlockProps, };
 export { Accordion, AccordionGroup, AppearFromTop, ApiPlayground, Button, Card, CardGroup, CodeBlock, CodeGroup, Check, Expandable, Frame, Info, Warning, Note, Param, PillSelect, RequestMethodBubble, RequestPathHeader, Tabs, Tip, Tab, Tooltip, };