LG-1318: Remove prop-types from LeafyGreen (#2619)

* beginning to remove prop types

* major change, ensure that props are exported

* fix build issues

* turn off react/prop-types rule

* rm file

.changeset/lucky-berries-rush.md

@@ -0,0 +1,60 @@
+---
+'@lg-chat/leafygreen-chat-provider': major
+'@leafygreen-ui/leafygreen-provider': major
+'@leafygreen-ui/confirmation-modal': major
+'@leafygreen-ui/inline-definition': major
+'@leafygreen-ui/loading-indicator': major
+'@leafygreen-ui/segmented-control': major
+'@leafygreen-ui/marketing-modal': major
+'@leafygreen-ui/radio-box-group': major
+'@leafygreen-ui/password-input': major
+'@leafygreen-ui/info-sprinkle': major
+'@leafygreen-ui/number-input': major
+'@leafygreen-ui/ordered-list': major
+'@leafygreen-ui/split-button': major
+'@lg-chat/message-prompts': major
+'@leafygreen-ui/date-picker': major
+'@leafygreen-ui/empty-state': major
+'@leafygreen-ui/form-footer': major
+'@leafygreen-ui/icon-button': major
+'@leafygreen-ui/radio-group': major
+'@leafygreen-ui/pagination': major
+'@leafygreen-ui/text-input': major
+'@leafygreen-ui/typography': major
+'@leafygreen-ui/guide-cue': major
+'@leafygreen-ui/text-area': major
+'@lg-chat/message-feed': major
+'@leafygreen-ui/checkbox': major
+'@leafygreen-ui/combobox': major
+'@leafygreen-ui/copyable': major
+'@leafygreen-ui/pipeline': major
+'@leafygreen-ui/side-nav': major
+'@leafygreen-ui/callout': major
+'@leafygreen-ui/popover': major
+'@leafygreen-ui/stepper': major
+'@leafygreen-ui/tooltip': major
+'@leafygreen-ui/banner': major
+'@leafygreen-ui/button': major
+'@leafygreen-ui/portal': major
+'@leafygreen-ui/select': major
+'@leafygreen-ui/toggle': major
+'@leafygreen-ui/badge': major
+'@leafygreen-ui/modal': major
+'@leafygreen-ui/table': major
+'@leafygreen-ui/toast': major
+'@leafygreen-ui/a11y': major
+'@leafygreen-ui/card': major
+'@leafygreen-ui/chip': major
+'@leafygreen-ui/code': major
+'@leafygreen-ui/icon': major
+'@leafygreen-ui/logo': major
+'@leafygreen-ui/menu': major
+'@leafygreen-ui/tabs': major
+'@leafygreen-ui/box': major
+'@leafygreen-ui/lib': major
+'@lg-tools/lint': major
+'@lg-tools/validate': minor
+'@lg-tools/build': minor
+---
+
+Removes prop-types from LeafyGreen UI

chat/chat-disclaimer/src/DisclaimerModal/DisclaimerModal.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React, { useState } from 'react';
 import {
   storybookArgTypes,

chat/leafygreen-chat-provider/src/LeafyGreenChatProvider/LeafyGreenChatProvider.tsx

@@ -1,5 +1,4 @@
 import React, { createContext, useContext, useState } from 'react';
-import PropTypes from 'prop-types';
 import useResizeObserver from 'use-resize-observer';
 
 import { LeafyGreenChatContextProps } from './LeafyGreenChatProvider.types';
@@ -35,7 +34,3 @@ export function LeafyGreenChatProvider({
 }
 
 LeafyGreenChatProvider.displayName = 'LeafyGreenChatProvider';
-
-LeafyGreenChatProvider.propTypes = {
-  children: PropTypes.node,
-};

chat/message-feed/src/MessageFeed.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React, { ChangeEvent, useState } from 'react';
 import { Avatar } from '@lg-chat/avatar';
 import { DisclaimerText } from '@lg-chat/chat-disclaimer';

chat/message-feed/src/MessageFeed/MessageFeed.tsx

@@ -1,7 +1,6 @@
 import React, { ForwardedRef, forwardRef, useEffect, useRef } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 import { useLeafyGreenChatContext } from '@lg-chat/leafygreen-chat-provider';
-import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider, {
@@ -82,7 +81,3 @@ export const MessageFeed = forwardRef(
 );
 
 MessageFeed.displayName = 'MessageFeed';
-
-MessageFeed.propTypes = {
-  darkMode: PropTypes.bool,
-};

chat/message-prompts/src/MessagePromptsContext/MessagePromptsContext.tsx

@@ -1,5 +1,4 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
-import PropTypes from 'prop-types';
 
 import { MessagePromptsContextProps } from './MessagePromptsContext.types';
 
@@ -24,7 +23,3 @@ export function MessagePromptsProvider({
 }
 
 MessagePromptsProvider.displayName = 'MessagePromptsProvider';
-
-MessagePromptsProvider.propTypes = {
-  children: PropTypes.node,
-};

chat/message-rating/src/MessageRating.stories.tsx

@@ -35,7 +35,6 @@ const Template: StoryFn<typeof MessageRating> = props => (
 export const Basic: StoryFn<typeof MessageRating> = Template.bind({});
 
 export const Controlled: StoryFn<typeof MessageRating> = ({
-  // eslint-disable-next-line react/prop-types
   value: valueProp,
   ...rest
 }) => {

package.json

@@ -49,7 +49,6 @@
     "dotenv": "^10.0.0",
     "gh-pages": "^3.1.0",
     "npm-run-all": "^4.1.5",
-    "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.6.17",

packages/a11y/src/VisuallyHidden.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
@@ -29,9 +28,4 @@ function VisuallyHidden({
 
 VisuallyHidden.displayName = 'VisuallyHidden';
 
-VisuallyHidden.propTypes = {
-  children: PropTypes.string,
-  className: PropTypes.string,
-};
-
 export default VisuallyHidden;

packages/badge/src/Badge/Badge.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
@@ -30,11 +29,4 @@ function Badge({
 
 Badge.displayName = 'Badge';
 
-Badge.propTypes = {
-  darkMode: PropTypes.bool,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  variant: PropTypes.oneOf(Object.values(Variant)),
-};
-
 export default Badge;

packages/banner/src/Banner.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable react/jsx-key */
 import React from 'react';

packages/banner/src/Banner/Banner.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
@@ -88,12 +87,3 @@ const Banner = forwardRef<HTMLDivElement, BannerProps>(
 export default Banner;
 
 Banner.displayName = 'Banner';
-
-Banner.propTypes = {
-  darkMode: PropTypes.bool,
-  variant: PropTypes.oneOf(Object.values(Variant)),
-  onClose: PropTypes.func,
-  dismissible: PropTypes.bool,
-  image: PropTypes.element,
-  baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
-};

packages/box/src/Box.stories.tsx

@@ -26,7 +26,6 @@ const meta: StoryMetaType<typeof Box, BoxProps> = {
 };
 export default meta;
 
-// eslint-disable-next-line react/prop-types
 const Template: StoryFn<BoxProps> = ({ as, ...args }: BoxProps) => (
   <Box as={(as ? as : 'div') as keyof JSX.IntrinsicElements} {...args} />
 );

packages/box/src/Box.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 type Override<T, U> = Omit<T, keyof U> & U;
 type Override2<T, U, V> = Override<Override<T, U>, V>;
@@ -99,16 +98,6 @@ const Box = React.forwardRef(InlineBox) as typeof InlineBox;
 
 Box.displayName = 'Box';
 
-// @ts-expect-error
-Box.propTypes = {
-  as: PropTypes.oneOfType([
-    PropTypes.elementType,
-    PropTypes.element,
-    PropTypes.func,
-  ]),
-  href: PropTypes.string,
-};
-
 export default Box;
 
 export interface ExtendableBox<

packages/button/src/Button/Button.spec.tsx

@@ -148,7 +148,6 @@ describe('packages/button', () => {
     });
 
     test(`renders a when passing in a NextJS Link wrapper`, () => {
-      // eslint-disable-next-line react/prop-types
       const Linker = ({ href, children, ...props }: any) => (
         <NextLink href={href} {...props}>
           {children}
@@ -165,7 +164,6 @@ describe('packages/button', () => {
     });
 
     test(`renders a when passing in a legacy NextJS Link wrapper`, () => {
-      // eslint-disable-next-line react/prop-types
       const Linker = ({ href, children, ...props }: any) => (
         <NextLink legacyBehavior href={href}>
           <a {...props}>{children}</a>

packages/button/src/Button/Button.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import Box, { BoxProps } from '@leafygreen-ui/box';
 import { cx } from '@leafygreen-ui/emotion';
@@ -87,17 +86,3 @@ export const Button = React.forwardRef(function Button(
 });
 
 Button.displayName = 'Button';
-
-Button.propTypes = {
-  variant: PropTypes.oneOf(Object.values(Variant)),
-  baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
-  size: PropTypes.oneOf(Object.values(Size)),
-  darkMode: PropTypes.bool,
-  disabled: PropTypes.bool,
-  leftGlyph: PropTypes.element,
-  rightGlyph: PropTypes.element,
-  href: PropTypes.string,
-  isLoading: PropTypes.bool,
-  loadingText: PropTypes.string,
-  loadingIndicator: PropTypes.element,
-};

packages/callout/src/Callout.stories.tsx

@@ -64,7 +64,6 @@ LiveExample.parameters = {
 };
 
 export const WithRichContent: StoryFn<CalloutProps> = ({
-  // eslint-disable-next-line react/prop-types
   darkMode,
   ...args
 }) => {

packages/callout/src/Callout/Callout.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider, {
@@ -63,13 +62,4 @@ function Callout({
   );
 }
 
-Callout.propTypes = {
-  darkMode: PropTypes.bool,
-  variant: PropTypes.oneOf(Object.values(Variant)).isRequired,
-  title: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
-};
-
 export default Callout;

packages/card/src/Card.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint react/prop-types: 0 */
 import React from 'react';
 import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';

packages/card/src/Card/Card.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
@@ -57,9 +56,3 @@ export const Card = InferredPolymorphic<CardProps, 'div'>(
 );
 
 Card.displayName = 'Card';
-
-Card.propTypes = {
-  className: PropTypes.string,
-  darkMode: PropTypes.bool,
-  contentStyle: PropTypes.oneOf(Object.values(ContentStyle)),
-};

packages/checkbox/src/Checkbox/Checkbox.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 import { useIdAllocator } from '@leafygreen-ui/hooks';
@@ -180,17 +179,4 @@ function Checkbox({
 
 Checkbox.displayName = 'Checkbox';
 
-Checkbox.propTypes = {
-  darkMode: PropTypes.bool,
-  description: PropTypes.string,
-  checked: PropTypes.bool,
-  label: PropTypes.node,
-  disabled: PropTypes.bool,
-  indeterminate: PropTypes.bool,
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  animate: PropTypes.bool,
-};
-
 export default Checkbox;

packages/chip/src/Chip.stories.tsx

@@ -145,7 +145,6 @@ Truncate.parameters = {
   },
 };
 
-// eslint-disable-next-line react/prop-types
 export const LiveExample: StoryType<typeof Chip> = ({ glyph, ...rest }) => (
   <Chip // @ts-expect-error - glyph type error
     glyph={glyph ? <Icon glyph={glyph} /> : undefined}

packages/chip/src/Chip/Chip.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import InlineDefinition from '@leafygreen-ui/inline-definition';
@@ -105,14 +104,3 @@ export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
   },
 );
 Chip.displayName = 'Chip';
-
-Chip.propTypes = {
-  glyph: PropTypes.node,
-  label: PropTypes.string.isRequired,
-  chipCharacterLimit: PropTypes.number,
-  chipTruncationLocation: PropTypes.oneOf(Object.values(TruncationLocation)),
-  baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
-  variant: PropTypes.oneOf(Object.values(Variant)),
-  onDismiss: PropTypes.func,
-  dismissButtonAriaLabel: PropTypes.string,
-} as any; // avoid inferred types from interfering;

packages/code/src/Code/Code.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ClipboardJS from 'clipboard';
 import debounce from 'lodash/debounce';
-import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useIsomorphicLayoutEffect } from '@leafygreen-ui/hooks';
@@ -294,24 +293,4 @@ function Code({
 
 Code.displayName = 'Code';
 
-Code.propTypes = {
-  children: PropTypes.string.isRequired,
-  language: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.values(Language)),
-    PropTypes.string,
-  ]),
-  darkMode: PropTypes.bool,
-  className: PropTypes.string,
-  showLineNumbers: PropTypes.bool,
-  lineNumberStart: PropTypes.number,
-  showWindowChrome: PropTypes.bool,
-  chromeTitle: PropTypes.string,
-  highlightLines: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.number),
-      PropTypes.number,
-    ]),
-  ),
-};
-
 export default Code;