@mintlify/components - npm Package Compare versions

Comparing version 0.3.11 to 0.3.12

dist/Card.d.ts

@@ -8,3 +8,3 @@ import { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from 'react';
     /**
-     * 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.
      */
@@ -11,0 +11,0 @@ icon?: ReactNode;

dist/Code/CodeBlock.d.ts

@@ -1,2 +0,2 @@
-import { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import { CopyToClipboardResult } from '../utils/copyToClipboard';
@@ -19,2 +19,2 @@ export interface CodeBlockPropsBase {
 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>>;

dist/Code/CodeGroup.d.ts

@@ -1,2 +0,2 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, FormEventHandler, ReactElement } from 'react';
 import { CopyToClipboardResult } from '../utils/copyToClipboard';
@@ -18,3 +18,4 @@ import { CodeBlockProps } from './CodeBlock';
     isSmallText?: boolean;
-    children?: React.ReactElement<CodeBlockProps>[] | React.ReactElement<CodeBlockProps>;
+    children?: ReactElement<CodeBlockProps>[] | ReactElement<CodeBlockProps>;
+    onChange?: FormEventHandler<HTMLDivElement> & ((index: number) => void);
 };
@@ -29,2 +30,2 @@ export type CodeGroupProps = CodeGroupPropsBase & Omit<ComponentPropsWithoutRef<'div'>, keyof CodeGroupPropsBase>;
  */
-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.json

 {
   "name": "@mintlify/components",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Open-source library of UI components made with React and TailwindCSS.",
@@ -21,7 +21,13 @@ "main": "./dist/index.js",
     "format:check": "prettier \"**/*.{css,js,ts,tsx,md}\" --check",
-    "prepare": "npm run build",
+    "prepare": "husky install && yarn build",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test-storybook": "test-storybook",
+    "lint": "eslint src --cache"
   },
   "author": "Mintlify",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "bugs": {
@@ -31,2 +37,3 @@ "url": "https://github.com/mintlify/components/issues"
   "peerDependencies": {
+    "@headlessui/react": "^1.7",
     "react": "^17.0.0 || ^18.0.0",
@@ -40,2 +47,5 @@ "react-dom": "^17.0.0 || ^18.0.0"
     "@babel/preset-typescript": "^7.18.6",
+    "@headlessui/react": "^1.7.11",
+    "@mintlify/eslint-config": "^1.0.3",
+    "@mintlify/eslint-config-typescript": "^1.0.7",
     "@mintlify/prettier-config": "1.0.2",
@@ -48,4 +58,6 @@ "@storybook/addon-actions": "^6.5.13",
     "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/jest": "^0.0.10",
     "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/react": "^6.5.13",
+    "@storybook/test-runner": "^0.9.4",
     "@storybook/testing-library": "^0.0.13",
@@ -56,2 +68,5 @@ "@tailwindcss/typography": "^0.5.7",
     "@types/react": "^18.0.21",
+    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.52.0",
     "autoprefixer": "^10.4.8",
@@ -62,3 +77,10 @@ "babel-loader": "^8.3.0",
     "cssnano": "^5.1.14",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "glob-parent": "^6.0.2",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.1",
     "mini-css-extract-plugin": "^2.6.1",
@@ -81,2 +103,3 @@ "mini-svg-data-uri": "^1.4.4",
     "typescript": "^4.9.4",
+    "uuid": "^9.0.0",
     "webpack": "^5.75.0",
@@ -86,3 +109,2 @@ "webpack-cli": "^4.10.0"
   "dependencies": {
-    "@headlessui/react": "^1.7.10",
     "assert": "^2.0.0",
@@ -92,3 +114,7 @@ "clsx": "^1.1.1",
     "lodash.set": "^4.3.2"
+  },
+  "lint-staged": {
+    "*.+(ts|tsx)": "eslint --cache --fix --max-warnings 0",
+    "*.{css,js,ts,tsx,md}": "prettier --write"
   }
 }

README.md

@@ -51,4 +51,43 @@ <div align="center">
 
-`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:
@@ -70,8 +109,24 @@
 
-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
@@ -78,0 +133,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

143

increased by62.5%

Worsened metrics

Total package byte prevSize

174288

decreased by-14.25%

Dev dependency count

59

increased by37.21%

Number of package files

53

decreased by-11.67%

Lines of code

613

decreased by-9.72%

Number of medium supply chain risk alerts

3

increased by50%

Dependency changes

• - Removed@headlessui/react@^1.7.10