Merge pull request #224 from Mezzanine-UI/react-19-support

React 19 support and bug fixed

.gitignore

@@ -48,3 +48,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Yarn
+.yarn/*

.storybook/main.ts

@@ -8,13 +8,10 @@ const CORE_PATH = resolve(PACKAGES_PATH, 'core');
 const ICONS_PATH = resolve(PACKAGES_PATH, 'icons');
 
 const config: StorybookConfig = {
-  stories: [
-    '../packages/react/src/**/*.stories.@(mjs|ts|tsx|mdx)',
-  ],
+  stories: ['../packages/react/src/**/*.@(mdx|stories.@(mjs|ts|tsx))'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
     '@storybook/addon-storysource',
     'storybook-rytass-palette',
   ],

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -5,7 +5,8 @@
   "repository": "[email protected]:Mezzanine-UI/mezzanine.git",
   "author": "Mezzanine",
   "contributors": [
-    "Jay Chen <[email protected]>"
+    "Jay Chen <[email protected]>",
+    "Travor Lee <[email protected]>"
   ],
   "license": "MIT",
   "keywords": [
@@ -49,15 +50,14 @@
     "@babel/preset-typescript": "^7.23.2",
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-storysource": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-webpack5": "^7.5.2",
-    "@storybook/testing-library": "^0.2.2",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addon-storysource": "^7.6.20",
+    "@storybook/blocks": "^7.6.20",
+    "@storybook/react": "^7.6.20",
+    "@storybook/react-webpack5": "^7.6.20",
     "@testing-library/dom": "^8.19.0",
     "@types/jest": "^29.5.7",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
@@ -68,12 +68,12 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.52.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-mdx": "^2.2.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.1",
     "eslint-plugin-storybook": "^0.6.15",
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
@@ -84,13 +84,10 @@
     "lint-staged": "^13.0.3",
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^4.2.0",
-    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup": "^4.18.1",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
-    "storybook": "^7.5.2",
+    "storybook": "^7.6.20",
     "storybook-rytass-palette": "^0.0.6",
     "style-loader": "^3.3.3",
     "stylelint": "^14.14.1",
@@ -99,10 +96,7 @@
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.3.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.3.2"
+    "typescript": "^5.4.5"
   },
-  "resolutions": {
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8"
-  }
+  "packageManager": "[email protected]"
 }

packages/core/package.json

@@ -32,10 +32,10 @@
     "dayjs": {
       "optional": true
     },
-    "moment": {
+    "luxon": {
       "optional": true
     },
-    "luxon": {
+    "moment": {
       "optional": true
     }
   },

packages/icons/src/drag.ts

@@ -0,0 +1,16 @@
+import { IconDefinition } from './typings';
+
+export const DragIcon: IconDefinition = {
+  name: 'drag',
+  definition: {
+    svg: {
+      viewBox: '0 0 20 20',
+    },
+    path: {
+      fill: 'currentColor',
+      stroke: 'currentColor',
+      strokeWidth: 0.5,
+      d: 'M8.36089 6.19653C8.36089 6.73705 7.95824 7.14306 7.49978 7.14306C7.04133 7.14306 6.63867 6.73705 6.63867 6.19653C6.63867 5.65602 7.04133 5.25 7.49978 5.25C7.95824 5.25 8.36089 5.65602 8.36089 6.19653ZM8.36089 10.0854C8.36089 10.6259 7.95824 11.0319 7.49978 11.0319C7.04133 11.0319 6.63867 10.6259 6.63867 10.0854C6.63867 9.5449 7.04133 9.13889 7.49978 9.13889C7.95824 9.13889 8.36089 9.5449 8.36089 10.0854ZM8.36089 13.9743C8.36089 14.5148 7.95824 14.9208 7.49978 14.9208C7.04133 14.9208 6.63867 14.5148 6.63867 13.9743C6.63867 13.4338 7.04133 13.0278 7.49978 13.0278C7.95824 13.0278 8.36089 13.4338 8.36089 13.9743Z M13.3609 6.19653C13.3609 6.73705 12.9582 7.14306 12.4998 7.14306C12.0413 7.14306 11.6387 6.73705 11.6387 6.19653C11.6387 5.65602 12.0413 5.25 12.4998 5.25C12.9582 5.25 13.3609 5.65602 13.3609 6.19653ZM13.3609 10.0854C13.3609 10.6259 12.9582 11.0319 12.4998 11.0319C12.0413 11.0319 11.6387 10.6259 11.6387 10.0854C11.6387 9.5449 12.0413 9.13889 12.4998 9.13889C12.9582 9.13889 13.3609 9.5449 13.3609 10.0854ZM13.3609 13.9743C13.3609 14.5148 12.9582 14.9208 12.4998 14.9208C12.0413 14.9208 11.6387 14.5148 11.6387 13.9743C11.6387 13.4338 12.0413 13.0278 12.4998 13.0278C12.9582 13.0278 13.3609 13.4338 13.3609 13.9743Z',
+    },
+  },
+};

packages/icons/src/index.ts

@@ -23,6 +23,7 @@ export { ClockIcon } from './clock';
 export { DocIcon } from './doc';
 export { DollarIcon } from './dollar';
 export { DownloadIcon } from './download';
+export { DragIcon } from './drag';
 export { EditIcon } from './edit';
 export { ExclamationCircleFilledIcon } from './exclamation-circle-filled';
 export { EyeCloseIcon } from './eye-close';

packages/react/package.json

@@ -28,14 +28,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@hello-pangea/dnd": "^16.6.0",
     "@mezzanine-ui/core": "^0.14.8",
     "@mezzanine-ui/icons": "^0.14.8",
     "@mezzanine-ui/system": "^0.14.8",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.8",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "lodash": "^4.17.21",
-    "react-beautiful-dnd": "^13.1.1",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.4.1"
@@ -45,16 +45,15 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/lodash": "^4.14.200",
     "@types/moment": "^2.13.0",
-    "@types/react": "^18.2.33",
-    "@types/react-beautiful-dnd": "^13.1.6",
-    "@types/react-dom": "^18.2.14",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^18.0.5",
     "dayjs": "^1.11.10",
     "lodash": "^4.17.21",
-    "luxon": "^3.4.3",
-    "moment": "^2.29.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0"
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.0"
   }
 }

packages/react/src/Accordion/Accordion.stories.mdx → packages/react/src/Accordion/Accordion.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Accordion, { AccordionSummary, AccordionDetails } from '.';
+import * as AccordionStories from './Accordion.stories';
 
-<Meta title="Data Display/Accordion/Doc" />
+<Meta of={AccordionStories} />
 
 # Accordion
 

packages/react/src/Alert/Alert.stories.mdx → packages/react/src/Alert/Alert.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Alert from '.';
+import * as AlertStories from './Alert.stories';
 
-<Meta title="Feedback/Alert/Doc" />
+<Meta of={AlertStories} />
 
 # Alert
 

packages/react/src/AppBar/AppBar.stories.mdx → packages/react/src/AppBar/AppBar.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import AppBar from '.';
+import * as AppBarStories from './AppBar.stories';
 
-<Meta title="Navigation/AppBar/Doc" />
+<Meta of={AppBarStories} />
 
 # AppBar
 

packages/react/src/Badge/Badge.stories.mdx → packages/react/src/Badge/Badge.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Badge, { BadgeContainer } from '.';
+import * as BadgeStories from './Badge.stories';
 
-<Meta title="Data Display/Badge/Doc" />
+<Meta of={BadgeStories} />
 
 # Badge
 

packages/react/src/Button/Button.stories.mdx → packages/react/src/Button/Button.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Button from '.';
+import * as ButtonStories from './Button.stories';
 
-<Meta title="General/Button/Doc" />
+<Meta of={ButtonStories} />
 
 # Button
 

packages/react/src/Button/ButtonGroup.stories.mdx → packages/react/src/Button/ButtonGroup.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import { ButtonGroup } from '.';
+import * as ButtonGroupStories from './ButtonGroup.stories';
 
-<Meta title="General/Button/ButtonGroup/Doc" />
+<Meta of={ButtonGroupStories} />
 
 # ButtonGroup
 

packages/react/src/Button/IconButton.stories.mdx → packages/react/src/Button/IconButton.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import { IconButton } from '.';
+import * as IconButtonStories from './IconButton.stories';
 
-<Meta title="General/Button/IconButton/Doc" />
+<Meta of={IconButtonStories} />
 
 # IconButton
 

packages/react/src/Calendar/Calendar.stories.mdx → packages/react/src/Calendar/Calendar.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Calendar, {
   CalendarCell,
   CalendarControls,
@@ -8,8 +8,9 @@ import Calendar, {
   CalendarMonths,
   CalendarYears,
 } from '.';
+import * as CalendarStories from './Calendar.stories';
 
-<Meta title="Utility/Calendar/Doc" />
+<Meta of={CalendarStories} />
 
 # Calendar
 

packages/react/src/Card/Card.stories.mdx → packages/react/src/Card/Card.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Card from '.';
+import * as CardStories from './Card.stories';
 
-<Meta title="Data Display/Card/Doc" />
+<Meta of={CardStories} />
 
 # Card
 

packages/react/src/Card/CardActions.stories.mdx → packages/react/src/Card/CardActions.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import { CardActions } from '.';
+import * as CardActionsStories from './CardActions.stories';
 
-<Meta title="Data Display/Card/CardActions/Doc" />
+<Meta of={CardActionsStories} />
 
 # CardActions
 

packages/react/src/Checkbox/Checkbox.stories.mdx → packages/react/src/Checkbox/Checkbox.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Checkbox, { CheckboxGroup } from '.';
+import * as CheckboxStories from './Checkbox.stories';
 
-<Meta title="Data Entry/Checkbox/Doc" />
+<Meta of={CheckboxStories} />
 
 # Checkbox
 

packages/react/src/ConfirmActions/ConfirmActions.stories.mdx → packages/react/src/ConfirmActions/ConfirmActions.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import ConfirmActions from '.';
+import * as ConfirmActionsStories from './ConfirmActions.stories';
 
-<Meta title="Feedback/ConfirmActions/Doc" />
+<Meta of={ConfirmActionsStories} />
 
 # ConfirmActions
 

packages/react/src/DatePicker/DatePicker.stories.mdx → packages/react/src/DatePicker/DatePicker.mdx

@@ -1,8 +1,9 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import DatePicker from './DatePicker';
 import DatePickerCalendar from './DatePickerCalendar';
+import * as DatePickerStories from './DatePicker.stories';
 
-<Meta title="Data Entry/DatePicker/Doc" />
+<Meta of={DatePickerStories} />
 
 # DatePicker
 

packages/react/src/DateRangePicker/DateRangePicker.stories.mdx → packages/react/src/DateRangePicker/DateRangePicker.mdx

@@ -1,8 +1,9 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import DateRangePicker from './DateRangePicker';
 import DateRangePickerCalendar from './DateRangePickerCalendar';
+import * as DateRangePickerStories from './DateRangePicker.stories';
 
-<Meta title="Data Entry/DateRangePicker/Doc" />
+<Meta of={DateRangePickerStories} />
 
 # DateRangePicker
 

packages/react/src/DateTimePicker/DateTimePicker.stories.mdx → packages/react/src/DateTimePicker/DateTimePicker.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import DateTimePicker, { DateTimePickerPanel } from '.';
+import * as DateTimePickerStories from './DateTimePicker.stories';
 
-<Meta title="Data Entry/DateTimePicker/Doc" />
+<Meta of={DateTimePickerStories} />
 
 # Date Time Picker
 

packages/react/src/Drawer/Drawer.stories.mdx → packages/react/src/Drawer/Drawer.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Drawer from '.';
+import * as DrawerStories from './Drawer.stories';
 
-<Meta title="Navigation/Drawer/Doc" />
+<Meta of={DrawerStories} />
 
 # Drawer
 

packages/react/src/Dropdown/Dropdown.stories.mdx → packages/react/src/Dropdown/Dropdown.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Dropdown from '.';
+import * as DropdownStories from './Dropdown.stories';
 
-<Meta title="Navigation/Dropdown/Doc" />
+<Meta of={DropdownStories} />
 
 # Dropdown
 

packages/react/src/Empty/Empty.stories.mdx → packages/react/src/Empty/Empty.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import Empty from '.';
+import * as EmptyStories from './Empty.stories';
 
-<Meta title="Data Display/Empty/Doc" />
+<Meta of={EmptyStories} />
 
 # Empty
 

packages/react/src/Form/Form.stories.mdx → packages/react/src/Form/Form.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Description } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Description } from '@storybook/blocks';
 import { FormField, FormLabel, FormMessage } from '.';
+import * as FormStories from './Form.stories';
 
-<Meta title="Data Entry/Form/Doc" />
+<Meta of={FormStories} />
 
 # FormField