@mintlify/components 0.3.11 → 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/.husky/pre-commit

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

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/Card.d.ts

@@ -5,7 +5,7 @@ export interface CardPropsBase<T> {
      */
     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;
     /**

package/dist/Code/CodeBlock.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import { CopyToClipboardResult } from '../utils/copyToClipboard';
 export interface CodeBlockPropsBase {
     filename?: string;
@@ -16,4 +16,4 @@ 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 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,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, FormEventHandler, ReactElement } from 'react';
 import { CopyToClipboardResult } from '../utils/copyToClipboard';
 import { CodeBlockProps } from './CodeBlock';
 export type CodeGroupPropsBase = {
@@ -15,7 +15,8 @@ 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>;
 /**
@@ -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>>;