Web UI files housekeeping (#530)

packages/web-ui/.eslintrc.cjs

@@ -0,0 +1,8 @@
+/* eslint-env node */
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};

packages/web-ui/.prettierrc.cjs

@@ -2,11 +2,14 @@ module.exports = {
   ...require('@utilitywarehouse/prettier-config'),
   plugins: ['@trivago/prettier-plugin-sort-imports'],
   importOrder: [
-    'react',
+    '^react$',
     '<THIRD_PARTY_MODULES>',
     '^@(?!utilitywarehouse)(.*)$',
     '^@utilitywarehouse/(.*)$',
+    '^./[A-Z]',
+    '^./[a-z]',
     '^.+/[A-Z]',
     '^.+/[a-z]',
   ],
+  importOrderSeparation: true,
 };

packages/web-ui/package.json

@@ -31,7 +31,7 @@
     "@emotion/is-prop-valid": "^1.2.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@mui/system": "5.15.15",
+    "@mui/system": "6.1.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.2",
@@ -45,7 +45,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@mui/material": "5.14.15",
-    "@mui/types": "7.1.4",
+    "@mui/types": "7.2.17",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -67,7 +67,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.0",
     "storybook": "^7.6.20",
-    "tsup": "^8.0.1"
+    "tsup": "^8.3.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.16.0",

packages/web-ui/src/Alert/Alert.docs.mdx → packages/web-ui/src/components/Alert/Alert.docs.mdx

@@ -1,6 +1,8 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+
 import * as Stories from './Alert.stories';
-import { DocsHeader } from '../storybook-utils';
+
+import { DocsHeader } from '../../storybook-components';
 
 <Meta of={Stories} />
 

packages/web-ui/src/Alert/Alert.stories.tsx → packages/web-ui/src/components/Alert/Alert.stories.tsx

@@ -1,8 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import * as React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Alert } from './Alert';
+
 import { Button } from '../Button';
 import { Flex } from '../Flex';
-import { Alert } from './Alert';
 
 const colorSchemes = ['cyan', 'red', 'green', 'gold'] as const;
 

packages/web-ui/src/Alert/Alert.tsx → packages/web-ui/src/components/Alert/Alert.tsx

@@ -1,3 +1,8 @@
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import { colors } from '@utilitywarehouse/colour-system';
 import {
   ChevronRightMediumIcon,
   CloseMediumIcon,
@@ -6,18 +11,19 @@ import {
   TickMediumContainedIcon,
   WarningMediumContainedIcon,
 } from '@utilitywarehouse/react-icons';
-import * as React from 'react';
-import clsx from 'clsx';
-import { colors } from '@utilitywarehouse/colour-system';
-import { Flex } from '../Flex';
+
 import { AlertProps } from './Alert.props';
 import { AlertButton } from './AlertButton';
 import { AlertLink } from './AlertLink';
 import { AlertText } from './AlertText';
 import { AlertTitle } from './AlertTitle';
-import { styled } from '../theme';
-import { PropsWithSx } from '../types';
-import { COLORSCHEME_SELECTORS, DATA_ATTRIBUTES, px, withGlobalPrefix } from '../utils';
+
+import { Flex } from '../Flex';
+
+import { COLORSCHEME_SELECTORS, DATA_ATTRIBUTES } from '../../helpers';
+import { styled } from '../../theme';
+import { PropsWithSx } from '../../types';
+import { px, withGlobalPrefix } from '../../utils';
 
 const componentName = 'Alert';
 const componentClassName = withGlobalPrefix(componentName);

packages/web-ui/src/Alert/AlertButton.tsx → packages/web-ui/src/components/Alert/AlertButton.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
+
 import clsx from 'clsx';
+
 import { colors } from '@utilitywarehouse/colour-system';
+
 import { UnstyledButton } from '../UnstyledButton';
 import type { UnstyledButtonProps } from '../UnstyledButton';
-import { styled } from '../theme';
-import { PropsWithSx } from '../types';
-import { colorSchemeParentSelector, px, withGlobalPrefix } from '../utils';
+
+import { colorSchemeParentSelector } from '../../helpers';
+import { styled } from '../../theme';
+import { PropsWithSx } from '../../types';
+import { px, withGlobalPrefix } from '../../utils';
 
 const componentName = 'AlertButton';
 const componentClassName = withGlobalPrefix(componentName);

packages/web-ui/src/Alert/AlertLink.tsx → packages/web-ui/src/components/Alert/AlertLink.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
+
 import clsx from 'clsx';
+
 import { colors } from '@utilitywarehouse/colour-system';
+
 import { TextLink } from '../TextLink';
 import type { TextLinkProps } from '../TextLink';
-import { styled } from '../theme';
-import { fontWeights } from '../tokens';
-import { PropsWithSx } from '../types';
-import { colorSchemeParentSelector, px, withGlobalPrefix } from '../utils';
+
+import { colorSchemeParentSelector } from '../../helpers';
+import { styled } from '../../theme';
+import { fontWeights } from '../../tokens';
+import type { PropsWithSx } from '../../types';
+import { px, withGlobalPrefix } from '../../utils';
 
 const componentName = 'AlertLink';
 const componentClassName = withGlobalPrefix(componentName);

packages/web-ui/src/Alert/AlertText.tsx → packages/web-ui/src/components/Alert/AlertText.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
+
 import clsx from 'clsx';
+
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
-import { PropsWithSx } from '../types';
-import { withGlobalPrefix } from '../utils';
+
+import { PropsWithSx } from '../../types';
+import { withGlobalPrefix } from '../../utils';
 
 const componentName = 'AlertText';
 const componentClassName = withGlobalPrefix(componentName);

packages/web-ui/src/Alert/AlertTitle.tsx → packages/web-ui/src/components/Alert/AlertTitle.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
+
 import clsx from 'clsx';
+
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
-import { PropsWithSx } from '../types';
-import { withGlobalPrefix } from '../utils';
+
+import { PropsWithSx } from '../../types';
+import { withGlobalPrefix } from '../../utils';
 
 const componentName = 'AlertTitle';
 const componentClassName = withGlobalPrefix(componentName);

packages/web-ui/src/Badge/Badge.docs.mdx → packages/web-ui/src/components/Badge/Badge.docs.mdx

@@ -1,6 +1,8 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+
 import * as Stories from './Badge.stories';
-import { DocsHeader } from '../storybook-utils';
+
+import { DocsHeader } from '../../storybook-components';
 
 <Meta of={Stories} />
 

packages/web-ui/src/Badge/Badge.props.ts → packages/web-ui/src/components/Badge/Badge.props.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { Responsive } from '../types';
+
+import { Responsive } from '../../types';
 
 export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
   /**