diff --git a/packages/web-ui/.eslintrc.cjs b/packages/web-ui/.eslintrc.cjs new file mode 100644 index 000000000..547bae359 --- /dev/null +++ b/packages/web-ui/.eslintrc.cjs @@ -0,0 +1,8 @@ +/* eslint-env node */ +module.exports = { + extends: ['../../.eslintrc.js'], + parserOptions: { + project: './tsconfig.json', + tsconfigRootDir: __dirname, + }, +}; diff --git a/packages/web-ui/.prettierrc.cjs b/packages/web-ui/.prettierrc.cjs index add7bfe50..0950fc5d1 100644 --- a/packages/web-ui/.prettierrc.cjs +++ b/packages/web-ui/.prettierrc.cjs @@ -2,11 +2,14 @@ module.exports = { ...require('@utilitywarehouse/prettier-config'), plugins: ['@trivago/prettier-plugin-sort-imports'], importOrder: [ - 'react', + '^react$', '', '^@(?!utilitywarehouse)(.*)$', '^@utilitywarehouse/(.*)$', + '^./[A-Z]', + '^./[a-z]', '^.+/[A-Z]', '^.+/[a-z]', ], + importOrderSeparation: true, }; diff --git a/packages/web-ui/package.json b/packages/web-ui/package.json index 1a9c779e6..5d89f17b5 100644 --- a/packages/web-ui/package.json +++ b/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", diff --git a/packages/web-ui/src/Button/figma/Button.ghost.figma.tsx b/packages/web-ui/src/Button/figma/Button.ghost.figma.tsx deleted file mode 100644 index 2af4a4769..000000000 --- a/packages/web-ui/src/Button/figma/Button.ghost.figma.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import figma from '@figma/code-connect'; -import { Button } from '../Button'; - -figma.connect( - Button, - 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=5771-26816&m=dev', - { - props: { - iconRight: figma.instance('Icon Right'), - iconLeft: figma.boolean('Icon Left?'), - children: figma.string('Text'), - size: figma.enum('size', { - 'medium - 48': 'medium', - 'small - 32': 'small', - }), - colorScheme: figma.enum('colorScheme', { - cyan: 'cyan', - red: 'red', - green: 'green', - gold: 'gold', - grey: 'grey', - }), - inverted: figma.boolean('Inverted'), - }, - example: ({ iconLeft, iconRight, children, colorScheme, inverted }) => ( - - ), - } -); diff --git a/packages/web-ui/src/Button/figma/Button.outline.figma.tsx b/packages/web-ui/src/Button/figma/Button.outline.figma.tsx deleted file mode 100644 index e60a3d299..000000000 --- a/packages/web-ui/src/Button/figma/Button.outline.figma.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import figma from '@figma/code-connect'; -import { Button } from '../Button'; - -figma.connect( - Button, - 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=5749-27901&m=dev', - { - props: { - iconRight: figma.instance('Icon Right'), - iconLeft: figma.boolean('Icon Left?'), - children: figma.string('Text'), - size: figma.enum('size', { - 'medium - 48': 'medium', - 'small - 32': 'small', - }), - colorScheme: figma.enum('colorScheme', { - cyan: 'cyan', - red: 'red', - green: 'green', - gold: 'gold', - grey: 'grey', - }), - inverted: figma.boolean('Inverted'), - }, - example: ({ iconLeft, iconRight, children, colorScheme, inverted }) => ( - - ), - } -); diff --git a/packages/web-ui/src/Button/figma/Button.solid.figma.tsx b/packages/web-ui/src/Button/figma/Button.solid.figma.tsx deleted file mode 100644 index f96300823..000000000 --- a/packages/web-ui/src/Button/figma/Button.solid.figma.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import figma from '@figma/code-connect'; -import { Button } from '../Button'; - -figma.connect( - Button, - 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=5740-27360&m=dev', - { - props: { - iconRight: figma.instance('Icon Right'), - iconLeft: figma.boolean('Icon Left?'), - children: figma.string('Text'), - size: figma.enum('size', { - 'medium - 48': 'medium', - 'small - 32': 'small', - }), - colorScheme: figma.enum('colorScheme', { - cyan: 'cyan', - red: 'red', - green: 'green', - }), - inverted: figma.boolean('Inverted'), - }, - example: ({ iconLeft, iconRight, children, colorScheme, inverted }) => ( - - ), - } -); diff --git a/packages/web-ui/src/IconButton/figma/IconButton.ghost.figma.tsx b/packages/web-ui/src/IconButton/figma/IconButton.ghost.figma.tsx deleted file mode 100644 index e9f836af7..000000000 --- a/packages/web-ui/src/IconButton/figma/IconButton.ghost.figma.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import figma from '@figma/code-connect'; -import { IconButton } from '../IconButton'; - -figma.connect( - IconButton, - 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=6093-26729&m=dev', - { - props: { - icon: figma.instance('Icon'), - size: figma.enum('size', { - 'medium - 48': 'medium', - 'small - 32': 'small', - 'x-small - 24': 'xsmall', - }), - colorScheme: figma.enum('colorScheme', { - cyan: 'cyan', - red: 'red', - green: 'green', - }), - inverted: figma.boolean('Inverted'), - }, - example: ({ icon, size, colorScheme }) => ( - - {icon} - - ), - } -); diff --git a/packages/web-ui/src/IconButton/figma/IconButton.outline.figma.tsx b/packages/web-ui/src/IconButton/figma/IconButton.outline.figma.tsx deleted file mode 100644 index 2ea544a5f..000000000 --- a/packages/web-ui/src/IconButton/figma/IconButton.outline.figma.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import figma from '@figma/code-connect'; -import { IconButton } from '../IconButton'; - -figma.connect( - IconButton, - 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=7309-10343&m=dev', - { - props: { - icon: figma.instance('Icon'), - size: figma.enum('size', { - 'medium - 48': 'medium', - 'small - 32': 'small', - 'x-small - 24': 'xsmall', - }), - colorScheme: figma.enum('colorScheme', { - cyan: 'cyan', - red: 'red', - green: 'green', - }), - inverted: figma.boolean('Inverted'), - }, - example: ({ icon, size, colorScheme }) => ( - - {icon} - - ), - } -); diff --git a/packages/web-ui/src/IconButton/figma/IconButton.solid.figma.tsx b/packages/web-ui/src/IconButton/figma/IconButton.solid.figma.tsx deleted file mode 100644 index 0aa8fda30..000000000 --- a/packages/web-ui/src/IconButton/figma/IconButton.solid.figma.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import figma from '@figma/code-connect'; -import { IconButton } from '../IconButton'; - -figma.connect( - IconButton, - 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=6105-26516&m=dev', - { - props: { - icon: figma.instance('Icon'), - size: figma.enum('size', { - 'medium - 48': 'medium', - 'small - 32': 'small', - 'x-small - 24': 'xsmall', - }), - colorScheme: figma.enum('colorScheme', { - cyan: 'cyan', - red: 'red', - green: 'green', - }), - inverted: figma.boolean('Inverted'), - }, - example: ({ icon, size, colorScheme }) => ( - - {icon} - - ), - } -); diff --git a/packages/web-ui/src/Alert/Alert.docs.mdx b/packages/web-ui/src/components/Alert/Alert.docs.mdx similarity index 98% rename from packages/web-ui/src/Alert/Alert.docs.mdx rename to packages/web-ui/src/components/Alert/Alert.docs.mdx index 0341985fe..926cf0a61 100644 --- a/packages/web-ui/src/Alert/Alert.docs.mdx +++ b/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'; diff --git a/packages/web-ui/src/Alert/Alert.props.ts b/packages/web-ui/src/components/Alert/Alert.props.ts similarity index 100% rename from packages/web-ui/src/Alert/Alert.props.ts rename to packages/web-ui/src/components/Alert/Alert.props.ts diff --git a/packages/web-ui/src/Alert/Alert.stories.tsx b/packages/web-ui/src/components/Alert/Alert.stories.tsx similarity index 99% rename from packages/web-ui/src/Alert/Alert.stories.tsx rename to packages/web-ui/src/components/Alert/Alert.stories.tsx index 5541ce579..70e1b1b63 100644 --- a/packages/web-ui/src/Alert/Alert.stories.tsx +++ b/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; diff --git a/packages/web-ui/src/Alert/Alert.tsx b/packages/web-ui/src/components/Alert/Alert.tsx similarity index 95% rename from packages/web-ui/src/Alert/Alert.tsx rename to packages/web-ui/src/components/Alert/Alert.tsx index 1bd230a05..5eff1febb 100644 --- a/packages/web-ui/src/Alert/Alert.tsx +++ b/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); diff --git a/packages/web-ui/src/Alert/AlertButton.tsx b/packages/web-ui/src/components/Alert/AlertButton.tsx similarity index 90% rename from packages/web-ui/src/Alert/AlertButton.tsx rename to packages/web-ui/src/components/Alert/AlertButton.tsx index 388c05e20..e3c4f6bf8 100644 --- a/packages/web-ui/src/Alert/AlertButton.tsx +++ b/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); diff --git a/packages/web-ui/src/Alert/AlertLink.tsx b/packages/web-ui/src/components/Alert/AlertLink.tsx similarity index 87% rename from packages/web-ui/src/Alert/AlertLink.tsx rename to packages/web-ui/src/components/Alert/AlertLink.tsx index 3b6c90b5b..48502ce64 100644 --- a/packages/web-ui/src/Alert/AlertLink.tsx +++ b/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); diff --git a/packages/web-ui/src/Alert/AlertText.tsx b/packages/web-ui/src/components/Alert/AlertText.tsx similarity index 89% rename from packages/web-ui/src/Alert/AlertText.tsx rename to packages/web-ui/src/components/Alert/AlertText.tsx index 96ed6fbdb..2b7e47afc 100644 --- a/packages/web-ui/src/Alert/AlertText.tsx +++ b/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); diff --git a/packages/web-ui/src/Alert/AlertTitle.tsx b/packages/web-ui/src/components/Alert/AlertTitle.tsx similarity index 89% rename from packages/web-ui/src/Alert/AlertTitle.tsx rename to packages/web-ui/src/components/Alert/AlertTitle.tsx index cfb45b334..1689b7a0a 100644 --- a/packages/web-ui/src/Alert/AlertTitle.tsx +++ b/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); diff --git a/packages/web-ui/src/Alert/index.ts b/packages/web-ui/src/components/Alert/index.ts similarity index 100% rename from packages/web-ui/src/Alert/index.ts rename to packages/web-ui/src/components/Alert/index.ts diff --git a/packages/web-ui/src/Badge/Badge.docs.mdx b/packages/web-ui/src/components/Badge/Badge.docs.mdx similarity index 97% rename from packages/web-ui/src/Badge/Badge.docs.mdx rename to packages/web-ui/src/components/Badge/Badge.docs.mdx index 2483b96da..ecc9256f6 100644 --- a/packages/web-ui/src/Badge/Badge.docs.mdx +++ b/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'; diff --git a/packages/web-ui/src/Badge/Badge.props.ts b/packages/web-ui/src/components/Badge/Badge.props.ts similarity index 94% rename from packages/web-ui/src/Badge/Badge.props.ts rename to packages/web-ui/src/components/Badge/Badge.props.ts index 034c78c78..b78fa3341 100644 --- a/packages/web-ui/src/Badge/Badge.props.ts +++ b/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'> { /** diff --git a/packages/web-ui/src/Badge/Badge.stories.tsx b/packages/web-ui/src/components/Badge/Badge.stories.tsx similarity index 98% rename from packages/web-ui/src/Badge/Badge.stories.tsx rename to packages/web-ui/src/components/Badge/Badge.stories.tsx index 5682ab7c5..4dc9d4972 100644 --- a/packages/web-ui/src/Badge/Badge.stories.tsx +++ b/packages/web-ui/src/components/Badge/Badge.stories.tsx @@ -1,11 +1,16 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { StarSmallIcon } from '@utilitywarehouse/react-icons'; import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colors } from '@utilitywarehouse/colour-system'; +import { StarSmallIcon } from '@utilitywarehouse/react-icons'; + +import { Badge } from './Badge'; + import { Box } from '../Box'; import { Flex } from '../Flex'; -import { Badge } from './Badge'; -import { Backgrounds } from '../storybook-utils'; + +import { Backgrounds } from '../../storybook-components'; const variants = ['soft', 'strong', 'outline'] as const; const colorSchemes = ['cyan', 'green', 'red', 'gold', 'grey'] as const; diff --git a/packages/web-ui/src/Badge/Badge.tsx b/packages/web-ui/src/components/Badge/Badge.tsx similarity index 97% rename from packages/web-ui/src/Badge/Badge.tsx rename to packages/web-ui/src/components/Badge/Badge.tsx index 0bc617f64..91273f248 100644 --- a/packages/web-ui/src/Badge/Badge.tsx +++ b/packages/web-ui/src/components/Badge/Badge.tsx @@ -1,24 +1,26 @@ import * as React from 'react'; + import clsx from 'clsx'; + import { colors } from '@utilitywarehouse/colour-system'; -import { useBackground } from '../Box'; + import { BadgeProps } from './Badge.props'; -import { styled } from '../theme'; -import { fontWeights, fonts } from '../tokens'; -import { PropsWithSx } from '../types'; + +import { useBackground } from '../Box'; + import { COLORSCHEME_SELECTORS, DATA_ATTRIBUTES, DATA_ATTRIBUTE_SELECTORS, classSelector, - mediaQueries, - px, - pxToRem, responsiveClassSelector, translateBooleanValues, withBreakpoints, - withGlobalPrefix, -} from '../utils'; +} from '../../helpers'; +import { styled } from '../../theme'; +import { fontWeights, fonts } from '../../tokens'; +import { PropsWithSx } from '../../types'; +import { mediaQueries, px, pxToRem, withGlobalPrefix } from '../../utils'; const componentName = 'Badge'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/Badge/index.ts b/packages/web-ui/src/components/Badge/index.ts similarity index 100% rename from packages/web-ui/src/Badge/index.ts rename to packages/web-ui/src/components/Badge/index.ts diff --git a/packages/web-ui/src/BaseButton/BaseButton.props.ts b/packages/web-ui/src/components/BaseButton/BaseButton.props.ts similarity index 100% rename from packages/web-ui/src/BaseButton/BaseButton.props.ts rename to packages/web-ui/src/components/BaseButton/BaseButton.props.ts diff --git a/packages/web-ui/src/BaseButton/BaseButton.tsx b/packages/web-ui/src/components/BaseButton/BaseButton.tsx similarity index 98% rename from packages/web-ui/src/BaseButton/BaseButton.tsx rename to packages/web-ui/src/components/BaseButton/BaseButton.tsx index 4e1c9db56..72f1916e6 100644 --- a/packages/web-ui/src/BaseButton/BaseButton.tsx +++ b/packages/web-ui/src/components/BaseButton/BaseButton.tsx @@ -1,19 +1,23 @@ import * as React from 'react'; + import clsx from 'clsx'; + import { colors, colorsCommon } from '@utilitywarehouse/colour-system'; + +import { BaseButtonProps } from './BaseButton.props'; + import { useBackground } from '../Box'; import { UnstyledButton } from '../UnstyledButton'; -import { BaseButtonProps } from './BaseButton.props'; -import { styled } from '../theme'; -import { PropsWithSx } from '../types'; + import { COLORSCHEME_SELECTORS, DATA_ATTRIBUTES, DATA_ATTRIBUTE_SELECTORS, classSelector, - px, - withGlobalPrefix, -} from '../utils'; +} from '../../helpers'; +import { styled } from '../../theme'; +import { PropsWithSx } from '../../types'; +import { px, withGlobalPrefix } from '../../utils'; const componentName = 'BaseButton'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/BaseButton/index.ts b/packages/web-ui/src/components/BaseButton/index.ts similarity index 100% rename from packages/web-ui/src/BaseButton/index.ts rename to packages/web-ui/src/components/BaseButton/index.ts diff --git a/packages/web-ui/src/BaseCheckbox/BaseCheckbox.props.ts b/packages/web-ui/src/components/BaseCheckbox/BaseCheckbox.props.ts similarity index 99% rename from packages/web-ui/src/BaseCheckbox/BaseCheckbox.props.ts rename to packages/web-ui/src/components/BaseCheckbox/BaseCheckbox.props.ts index 9ac9e6db9..ea62dd8f3 100644 --- a/packages/web-ui/src/BaseCheckbox/BaseCheckbox.props.ts +++ b/packages/web-ui/src/components/BaseCheckbox/BaseCheckbox.props.ts @@ -1,6 +1,7 @@ -import type { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox'; import type { ReactNode } from 'react'; +import type { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox'; + export interface BaseCheckboxProps extends Omit< RadixCheckboxProps, diff --git a/packages/web-ui/src/BaseCheckbox/BaseCheckbox.tsx b/packages/web-ui/src/components/BaseCheckbox/BaseCheckbox.tsx similarity index 98% rename from packages/web-ui/src/BaseCheckbox/BaseCheckbox.tsx rename to packages/web-ui/src/components/BaseCheckbox/BaseCheckbox.tsx index cc753345f..0ed798530 100644 --- a/packages/web-ui/src/BaseCheckbox/BaseCheckbox.tsx +++ b/packages/web-ui/src/components/BaseCheckbox/BaseCheckbox.tsx @@ -1,11 +1,16 @@ -import * as RadixCheckbox from '@radix-ui/react-checkbox'; -import { TickMediumIcon } from '@utilitywarehouse/react-icons'; import * as React from 'react'; + +import * as RadixCheckbox from '@radix-ui/react-checkbox'; + import { colors, colorsCommon } from '@utilitywarehouse/colour-system'; -import { useBaseCheckboxGroup } from '../BaseCheckboxGroup'; +import { TickMediumIcon } from '@utilitywarehouse/react-icons'; + import { BaseCheckboxProps } from './BaseCheckbox.props'; -import { styled } from '../theme'; -import { px } from '../utils'; + +import { useBaseCheckboxGroup } from '../BaseCheckboxGroup'; + +import { styled } from '../../theme'; +import { px } from '../../utils'; const componentName = 'BaseCheckbox'; diff --git a/packages/web-ui/src/BaseCheckbox/index.ts b/packages/web-ui/src/components/BaseCheckbox/index.ts similarity index 100% rename from packages/web-ui/src/BaseCheckbox/index.ts rename to packages/web-ui/src/components/BaseCheckbox/index.ts diff --git a/packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.context.ts b/packages/web-ui/src/components/BaseCheckboxGroup/BaseCheckboxGroup.context.ts similarity index 100% rename from packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.context.ts rename to packages/web-ui/src/components/BaseCheckboxGroup/BaseCheckboxGroup.context.ts diff --git a/packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.props.ts b/packages/web-ui/src/components/BaseCheckboxGroup/BaseCheckboxGroup.props.ts similarity index 99% rename from packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.props.ts rename to packages/web-ui/src/components/BaseCheckboxGroup/BaseCheckboxGroup.props.ts index 2fcbd7513..04b0a4390 100644 --- a/packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.props.ts +++ b/packages/web-ui/src/components/BaseCheckboxGroup/BaseCheckboxGroup.props.ts @@ -1,7 +1,9 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react'; -import { BoxProps } from '../Box'; + import { BaseCheckboxGroupContextValue } from './BaseCheckboxGroup.context'; +import { BoxProps } from '../Box'; + export interface BaseCheckboxGroupProps extends ComponentPropsWithoutRef<'fieldset'> { name?: string; required?: boolean; diff --git a/packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.tsx b/packages/web-ui/src/components/BaseCheckboxGroup/BaseCheckboxGroup.tsx similarity index 98% rename from packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.tsx rename to packages/web-ui/src/components/BaseCheckboxGroup/BaseCheckboxGroup.tsx index 1a753b959..43d4b0cfc 100644 --- a/packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.tsx +++ b/packages/web-ui/src/components/BaseCheckboxGroup/BaseCheckboxGroup.tsx @@ -1,13 +1,17 @@ -import { useControllableState } from '@radix-ui/react-use-controllable-state'; import * as React from 'react'; + +import { useControllableState } from '@radix-ui/react-use-controllable-state'; + +import { BaseCheckboxGroupProvider } from './BaseCheckboxGroup.context'; +import { BaseCheckboxGroupProps } from './BaseCheckboxGroup.props'; + import { Fieldset } from '../Fieldset'; import { FieldsetLegend } from '../FieldsetLegend'; import { Flex } from '../Flex'; import { HelperText } from '../HelperText'; -import { BaseCheckboxGroupProvider } from './BaseCheckboxGroup.context'; -import { BaseCheckboxGroupProps } from './BaseCheckboxGroup.props'; -import { useIds } from '../hooks'; -import { mergeIds } from '../utils'; + +import { mergeIds } from '../../helpers'; +import { useIds } from '../../hooks'; const componentName = 'BaseCheckboxGroup'; diff --git a/packages/web-ui/src/BaseCheckboxGroup/index.ts b/packages/web-ui/src/components/BaseCheckboxGroup/index.ts similarity index 100% rename from packages/web-ui/src/BaseCheckboxGroup/index.ts rename to packages/web-ui/src/components/BaseCheckboxGroup/index.ts diff --git a/packages/web-ui/src/BaseRadioGroup/BaseRadioGroup.context.ts b/packages/web-ui/src/components/BaseRadioGroup/BaseRadioGroup.context.ts similarity index 100% rename from packages/web-ui/src/BaseRadioGroup/BaseRadioGroup.context.ts rename to packages/web-ui/src/components/BaseRadioGroup/BaseRadioGroup.context.ts diff --git a/packages/web-ui/src/BaseRadioGroup/BaseRadioGroup.props.ts b/packages/web-ui/src/components/BaseRadioGroup/BaseRadioGroup.props.ts similarity index 99% rename from packages/web-ui/src/BaseRadioGroup/BaseRadioGroup.props.ts rename to packages/web-ui/src/components/BaseRadioGroup/BaseRadioGroup.props.ts index 4fa733936..3048fe8d8 100644 --- a/packages/web-ui/src/BaseRadioGroup/BaseRadioGroup.props.ts +++ b/packages/web-ui/src/components/BaseRadioGroup/BaseRadioGroup.props.ts @@ -1,5 +1,7 @@ -import { type RadioGroupProps as RadixRadioGroupProps } from '@radix-ui/react-radio-group'; import { type ReactNode } from 'react'; + +import { type RadioGroupProps as RadixRadioGroupProps } from '@radix-ui/react-radio-group'; + import { BoxProps } from '../Box'; export interface BaseRadioGroupProps extends Omit { diff --git a/packages/web-ui/src/BaseRadioGroup/BaseRadioGroup.tsx b/packages/web-ui/src/components/BaseRadioGroup/BaseRadioGroup.tsx similarity index 96% rename from packages/web-ui/src/BaseRadioGroup/BaseRadioGroup.tsx rename to packages/web-ui/src/components/BaseRadioGroup/BaseRadioGroup.tsx index 650c8f4cf..8a647909d 100644 --- a/packages/web-ui/src/BaseRadioGroup/BaseRadioGroup.tsx +++ b/packages/web-ui/src/components/BaseRadioGroup/BaseRadioGroup.tsx @@ -1,15 +1,19 @@ -import { Root } from '@radix-ui/react-radio-group'; import * as React from 'react'; import { forwardRef } from 'react'; + +import { Root } from '@radix-ui/react-radio-group'; + +import { BaseRadioGroupProvider } from './BaseRadioGroup.context'; +import { BaseRadioGroupProps } from './BaseRadioGroup.props'; + import { Fieldset } from '../Fieldset'; import { FieldsetLegend } from '../FieldsetLegend'; import { Flex } from '../Flex'; import { HelperText } from '../HelperText'; -import { BaseRadioGroupProvider } from './BaseRadioGroup.context'; -import { BaseRadioGroupProps } from './BaseRadioGroup.props'; -import { useIds } from '../hooks'; -import { PropsWithSx } from '../types'; -import { mergeIds } from '../utils'; + +import { mergeIds } from '../../helpers'; +import { useIds } from '../../hooks'; +import { PropsWithSx } from '../../types'; const componentName = 'BaseRadioGroup'; diff --git a/packages/web-ui/src/BaseRadioGroup/index.ts b/packages/web-ui/src/components/BaseRadioGroup/index.ts similarity index 100% rename from packages/web-ui/src/BaseRadioGroup/index.ts rename to packages/web-ui/src/components/BaseRadioGroup/index.ts diff --git a/packages/web-ui/src/Box/Box.context.ts b/packages/web-ui/src/components/Box/Box.context.ts similarity index 99% rename from packages/web-ui/src/Box/Box.context.ts rename to packages/web-ui/src/components/Box/Box.context.ts index 0b43098b3..277a0a735 100644 --- a/packages/web-ui/src/Box/Box.context.ts +++ b/packages/web-ui/src/components/Box/Box.context.ts @@ -1,4 +1,5 @@ import { createContext, useContext } from 'react'; + import { colorsCommon } from '@utilitywarehouse/colour-system'; type BackgroundContextValue = { diff --git a/packages/web-ui/src/Box/Box.docs.mdx b/packages/web-ui/src/components/Box/Box.docs.mdx similarity index 96% rename from packages/web-ui/src/Box/Box.docs.mdx rename to packages/web-ui/src/components/Box/Box.docs.mdx index 9502205cd..4792e71bb 100644 --- a/packages/web-ui/src/Box/Box.docs.mdx +++ b/packages/web-ui/src/components/Box/Box.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './Box.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/Box/Box.props.ts b/packages/web-ui/src/components/Box/Box.props.ts similarity index 95% rename from packages/web-ui/src/Box/Box.props.ts rename to packages/web-ui/src/components/Box/Box.props.ts index 60a937a36..3f8a0afb9 100644 --- a/packages/web-ui/src/Box/Box.props.ts +++ b/packages/web-ui/src/components/Box/Box.props.ts @@ -1,7 +1,9 @@ import { ElementType } from 'react'; + import { BoxTypeMap as MuiBoxTypeMap } from '@mui/system'; import { OverrideProps } from '@mui/types'; -import { Theme } from '../theme'; + +import { Theme } from '../../theme'; export interface BoxOwnProps { /** diff --git a/packages/web-ui/src/Box/Box.stories.tsx b/packages/web-ui/src/components/Box/Box.stories.tsx similarity index 97% rename from packages/web-ui/src/Box/Box.stories.tsx rename to packages/web-ui/src/components/Box/Box.stories.tsx index c36ebf51d..1cf84f45b 100644 --- a/packages/web-ui/src/Box/Box.stories.tsx +++ b/packages/web-ui/src/components/Box/Box.stories.tsx @@ -1,11 +1,16 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; import { useRef } from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colorsCommon } from '@utilitywarehouse/colour-system'; -import { Text } from '../Text'; + import { Box } from './Box'; import { BoxProps } from './Box.props'; -import { fonts } from '../tokens'; + +import { Text } from '../Text'; + +import { fonts } from '../../tokens'; const meta: Meta = { title: 'Web UI / Layout / Box', diff --git a/packages/web-ui/src/Box/Box.tsx b/packages/web-ui/src/components/Box/Box.tsx similarity index 97% rename from packages/web-ui/src/Box/Box.tsx rename to packages/web-ui/src/components/Box/Box.tsx index 070fd915b..106cc845d 100644 --- a/packages/web-ui/src/Box/Box.tsx +++ b/packages/web-ui/src/components/Box/Box.tsx @@ -1,12 +1,17 @@ import * as React from 'react'; + import { BoxTypeMap as MuiBoxTypeMap } from '@mui/system'; import { OverridableComponent } from '@mui/types'; + import { colorsCommon } from '@utilitywarehouse/colour-system'; + import { BackgroundProvider } from './Box.context'; import { BoxOwnProps } from './Box.props'; -import { type Theme } from '../theme'; + import { createBox } from './createBox'; +import type { Theme } from '../../theme'; + const BaseBox = createBox(); /** diff --git a/packages/web-ui/src/Box/createBox.ts b/packages/web-ui/src/components/Box/createBox.ts similarity index 91% rename from packages/web-ui/src/Box/createBox.ts rename to packages/web-ui/src/components/Box/createBox.ts index d7746c003..f33b1813f 100644 --- a/packages/web-ui/src/Box/createBox.ts +++ b/packages/web-ui/src/components/Box/createBox.ts @@ -1,8 +1,10 @@ import * as React from 'react'; + import { BoxTypeMap as MuiBoxTypeMap, createBox as createMuiBox } from '@mui/system'; import { OverridableComponent } from '@mui/types'; -import { type Theme, theme } from '../theme'; -import { withGlobalPrefix } from '../utils'; + +import { type Theme, theme } from '../../theme'; +import { withGlobalPrefix } from '../../utils'; type Options = { componentName?: string; diff --git a/packages/web-ui/src/Box/index.ts b/packages/web-ui/src/components/Box/index.ts similarity index 100% rename from packages/web-ui/src/Box/index.ts rename to packages/web-ui/src/components/Box/index.ts diff --git a/packages/web-ui/src/Button/Button.docs.mdx b/packages/web-ui/src/components/Button/Button.docs.mdx similarity index 99% rename from packages/web-ui/src/Button/Button.docs.mdx rename to packages/web-ui/src/components/Button/Button.docs.mdx index c336000b5..c4c5aee42 100644 --- a/packages/web-ui/src/Button/Button.docs.mdx +++ b/packages/web-ui/src/components/Button/Button.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './Button.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/components/Button/Button.figma.tsx b/packages/web-ui/src/components/Button/Button.figma.tsx new file mode 100644 index 000000000..74fc35d7e --- /dev/null +++ b/packages/web-ui/src/components/Button/Button.figma.tsx @@ -0,0 +1,96 @@ +import React from 'react'; + +import figma from '@figma/code-connect'; + +import { Button } from '../Button'; + +figma.connect( + Button, + 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=5771-26816&m=dev', + { + props: { + iconRight: figma.instance('Icon Right'), + iconLeft: figma.boolean('Icon Left?'), + children: figma.string('Text'), + size: figma.enum('size', { + 'medium - 48': 'medium', + 'small - 32': 'small', + }), + colorScheme: figma.enum('colorScheme', { + cyan: 'cyan', + red: 'red', + green: 'green', + gold: 'gold', + grey: 'grey', + }), + inverted: figma.boolean('Inverted'), + }, + example: ({ iconLeft, iconRight, children, colorScheme, inverted }) => ( + + ), + } +); + +figma.connect( + Button, + 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=5749-27901&m=dev', + { + props: { + iconRight: figma.instance('Icon Right'), + iconLeft: figma.boolean('Icon Left?'), + children: figma.string('Text'), + size: figma.enum('size', { + 'medium - 48': 'medium', + 'small - 32': 'small', + }), + colorScheme: figma.enum('colorScheme', { + cyan: 'cyan', + red: 'red', + green: 'green', + gold: 'gold', + grey: 'grey', + }), + inverted: figma.boolean('Inverted'), + }, + example: ({ iconLeft, iconRight, children, colorScheme, inverted }) => ( + + ), + } +); + +figma.connect( + Button, + 'https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=5740-27360&m=dev', + { + props: { + iconRight: figma.instance('Icon Right'), + iconLeft: figma.boolean('Icon Left?'), + children: figma.string('Text'), + size: figma.enum('size', { + 'medium - 48': 'medium', + 'small - 32': 'small', + }), + colorScheme: figma.enum('colorScheme', { + cyan: 'cyan', + red: 'red', + green: 'green', + }), + inverted: figma.boolean('Inverted'), + }, + example: ({ iconLeft, iconRight, children, colorScheme, inverted }) => ( + + ), + } +); diff --git a/packages/web-ui/src/Button/Button.props.ts b/packages/web-ui/src/components/Button/Button.props.ts similarity index 59% rename from packages/web-ui/src/Button/Button.props.ts rename to packages/web-ui/src/components/Button/Button.props.ts index 40d7c18fc..e6e522621 100644 --- a/packages/web-ui/src/Button/Button.props.ts +++ b/packages/web-ui/src/components/Button/Button.props.ts @@ -1,5 +1,6 @@ -import { BaseButtonProps } from '../BaseButton'; -import { Responsive } from '../types'; +import type { BaseButtonProps } from '../BaseButton'; + +import type { Responsive } from '../../types'; export type ButtonProps = BaseButtonProps & { /** diff --git a/packages/web-ui/src/Button/Button.stories.tsx b/packages/web-ui/src/components/Button/Button.stories.tsx similarity index 99% rename from packages/web-ui/src/Button/Button.stories.tsx rename to packages/web-ui/src/components/Button/Button.stories.tsx index 7507526f6..10b459e00 100644 --- a/packages/web-ui/src/Button/Button.stories.tsx +++ b/packages/web-ui/src/components/Button/Button.stories.tsx @@ -1,12 +1,16 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { ChevronLeft01SmallIcon, ChevronRight01SmallIcon } from '@utilitywarehouse/react-icons'; import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colorsCommon } from '@utilitywarehouse/colour-system'; +import { ChevronLeft01SmallIcon, ChevronRight01SmallIcon } from '@utilitywarehouse/react-icons'; + +import { Button } from './Button'; + import { Box } from '../Box'; import { Flex } from '../Flex'; import { Heading } from '../Heading'; import { Text } from '../Text'; -import { Button } from './Button'; const sizes = ['medium', 'small'] as const; const variants = ['solid', 'outline', 'ghost'] as const; diff --git a/packages/web-ui/src/Button/Button.tsx b/packages/web-ui/src/components/Button/Button.tsx similarity index 89% rename from packages/web-ui/src/Button/Button.tsx rename to packages/web-ui/src/components/Button/Button.tsx index 71760f1bc..64cb6e960 100644 --- a/packages/web-ui/src/Button/Button.tsx +++ b/packages/web-ui/src/components/Button/Button.tsx @@ -1,19 +1,16 @@ import * as React from 'react'; + import clsx from 'clsx'; + +import type { ButtonProps } from './Button.props'; + import { BaseButton } from '../BaseButton'; -import { ButtonProps } from './Button.props'; -import { styled } from '../theme'; -import { fontWeights, fonts } from '../tokens'; -import { PropsWithSx } from '../types'; -import { - classSelector, - mediaQueries, - px, - pxToRem, - responsiveClassSelector, - withBreakpoints, - withGlobalPrefix, -} from '../utils'; + +import { classSelector, responsiveClassSelector, withBreakpoints } from '../../helpers'; +import { styled } from '../../theme'; +import { fontWeights, fonts } from '../../tokens'; +import type { PropsWithSx } from '../../types'; +import { mediaQueries, px, pxToRem, withGlobalPrefix } from '../../utils'; const componentName = 'Button'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/Button/index.ts b/packages/web-ui/src/components/Button/index.ts similarity index 100% rename from packages/web-ui/src/Button/index.ts rename to packages/web-ui/src/components/Button/index.ts diff --git a/packages/web-ui/src/Checkbox/Checkbox.docs.mdx b/packages/web-ui/src/components/Checkbox/Checkbox.docs.mdx similarity index 95% rename from packages/web-ui/src/Checkbox/Checkbox.docs.mdx rename to packages/web-ui/src/components/Checkbox/Checkbox.docs.mdx index 28e87da9c..36d0f1b0b 100644 --- a/packages/web-ui/src/Checkbox/Checkbox.docs.mdx +++ b/packages/web-ui/src/components/Checkbox/Checkbox.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './Checkbox.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/Checkbox/Checkbox.props.ts b/packages/web-ui/src/components/Checkbox/Checkbox.props.ts similarity index 100% rename from packages/web-ui/src/Checkbox/Checkbox.props.ts rename to packages/web-ui/src/components/Checkbox/Checkbox.props.ts diff --git a/packages/web-ui/src/Checkbox/Checkbox.stories.tsx b/packages/web-ui/src/components/Checkbox/Checkbox.stories.tsx similarity index 99% rename from packages/web-ui/src/Checkbox/Checkbox.stories.tsx rename to packages/web-ui/src/components/Checkbox/Checkbox.stories.tsx index c6d56c8ba..0983b7fe7 100644 --- a/packages/web-ui/src/Checkbox/Checkbox.stories.tsx +++ b/packages/web-ui/src/components/Checkbox/Checkbox.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 { Checkbox } from './Checkbox'; + import { Flex } from '../Flex'; import { Text } from '../Text'; -import { Checkbox } from './Checkbox'; const meta: Meta = { title: 'Web UI / Components / Checkbox / Checkbox', diff --git a/packages/web-ui/src/Checkbox/Checkbox.tsx b/packages/web-ui/src/components/Checkbox/Checkbox.tsx similarity index 92% rename from packages/web-ui/src/Checkbox/Checkbox.tsx rename to packages/web-ui/src/components/Checkbox/Checkbox.tsx index f3387a315..95d822989 100644 --- a/packages/web-ui/src/Checkbox/Checkbox.tsx +++ b/packages/web-ui/src/components/Checkbox/Checkbox.tsx @@ -1,15 +1,19 @@ import * as React from 'react'; + import clsx from 'clsx'; + +import type { CheckboxProps } from './Checkbox.props'; + import { BaseCheckbox } from '../BaseCheckbox'; import { useBaseCheckboxGroup } from '../BaseCheckboxGroup'; import { Flex } from '../Flex'; import { HelperText } from '../HelperText'; import { Label } from '../Label'; -import { CheckboxProps } from './Checkbox.props'; -import { useIds } from '../hooks'; -import { styled } from '../theme'; -import { PropsWithSx } from '../types'; -import { withGlobalPrefix } from '../utils'; + +import { useIds } from '../../hooks'; +import { styled } from '../../theme'; +import { PropsWithSx } from '../../types'; +import { withGlobalPrefix } from '../../utils'; const componentName = 'Checkbox'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/Checkbox/index.ts b/packages/web-ui/src/components/Checkbox/index.ts similarity index 100% rename from packages/web-ui/src/Checkbox/index.ts rename to packages/web-ui/src/components/Checkbox/index.ts diff --git a/packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.docs.mdx b/packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.docs.mdx similarity index 86% rename from packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.docs.mdx rename to packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.docs.mdx index 76d2c23e0..c3ffafd95 100644 --- a/packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.docs.mdx +++ b/packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './CheckboxGridGroup.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.props.ts b/packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.props.ts similarity index 85% rename from packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.props.ts rename to packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.props.ts index 0cfc79e40..537d98566 100644 --- a/packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.props.ts +++ b/packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.props.ts @@ -1,5 +1,5 @@ import { BaseCheckboxGroupProps } from '../BaseCheckboxGroup'; -import { StackProps } from '../Stack'; +import type { StackProps } from '../Stack'; export interface CheckboxGridGroupProps extends Omit { /** Sets the number of columns to display the contents in. */ diff --git a/packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.stories.tsx b/packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.stories.tsx similarity index 99% rename from packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.stories.tsx rename to packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.stories.tsx index 29d5ce30a..257d5f1c7 100644 --- a/packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.stories.tsx +++ b/packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.stories.tsx @@ -1,9 +1,12 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { CheckboxGridGroup } from './CheckboxGridGroup'; + import { CheckboxTile } from '../CheckboxTile'; import { Flex } from '../Flex'; import { Text } from '../Text'; -import { CheckboxGridGroup } from './CheckboxGridGroup'; const meta: Meta = { title: 'Web UI / Components / Checkbox / CheckboxGridGroup', diff --git a/packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.tsx b/packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.tsx similarity index 89% rename from packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.tsx rename to packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.tsx index 2e4b806a6..3e2c3ed52 100644 --- a/packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.tsx +++ b/packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.tsx @@ -1,9 +1,14 @@ import * as React from 'react'; + import clsx from 'clsx'; + +import type { CheckboxGridGroupProps } from './CheckboxGridGroup.props'; + import { BaseCheckboxGroup } from '../BaseCheckboxGroup'; import { Box } from '../Box'; -import { CheckboxGridGroupProps } from './CheckboxGridGroup.props'; -import { getColumns, withGlobalPrefix } from '../utils'; + +import { getColumns } from '../../helpers'; +import { withGlobalPrefix } from '../../utils'; const componentName = 'CheckboxGridGroup'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/CheckboxGridGroup/index.ts b/packages/web-ui/src/components/CheckboxGridGroup/index.ts similarity index 100% rename from packages/web-ui/src/CheckboxGridGroup/index.ts rename to packages/web-ui/src/components/CheckboxGridGroup/index.ts diff --git a/packages/web-ui/src/CheckboxGroup/CheckboxGroup.docs.mdx b/packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.docs.mdx similarity index 98% rename from packages/web-ui/src/CheckboxGroup/CheckboxGroup.docs.mdx rename to packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.docs.mdx index 45a1b6c63..32666039b 100644 --- a/packages/web-ui/src/CheckboxGroup/CheckboxGroup.docs.mdx +++ b/packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.docs.mdx @@ -1,10 +1,13 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './CheckboxGroup.stories'; -import { Stack } from '../Stack'; + import { Box } from '../Box'; -import { Text } from '../Text'; import { Divider } from '../Divider'; -import { DocsHeader } from '../storybook-utils'; +import { Stack } from '../Stack'; +import { Text } from '../Text'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/CheckboxGroup/CheckboxGroup.props.ts b/packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.props.ts similarity index 100% rename from packages/web-ui/src/CheckboxGroup/CheckboxGroup.props.ts rename to packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.props.ts diff --git a/packages/web-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.stories.tsx similarity index 99% rename from packages/web-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx rename to packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.stories.tsx index 22360ee08..0b9a3c06a 100644 --- a/packages/web-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx +++ b/packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.stories.tsx @@ -1,13 +1,17 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; import { useState } from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colors } from '@utilitywarehouse/colour-system'; + +import { CheckboxGroup } from './CheckboxGroup'; + import { Box } from '../Box'; import { Checkbox } from '../Checkbox'; import { CheckboxTile } from '../CheckboxTile'; import { Flex } from '../Flex'; import { Text } from '../Text'; -import { CheckboxGroup } from './CheckboxGroup'; const meta: Meta = { title: 'Web UI / Components / Checkbox / CheckboxGroup', diff --git a/packages/web-ui/src/CheckboxGroup/CheckboxGroup.tsx b/packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.tsx similarity index 94% rename from packages/web-ui/src/CheckboxGroup/CheckboxGroup.tsx rename to packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.tsx index b478a61ed..acbd47ac2 100644 --- a/packages/web-ui/src/CheckboxGroup/CheckboxGroup.tsx +++ b/packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.tsx @@ -1,10 +1,14 @@ import * as React from 'react'; + import clsx from 'clsx'; + +import { CheckboxGroupProps } from './CheckboxGroup.props'; + import { BaseCheckboxGroup } from '../BaseCheckboxGroup'; import { Flex } from '../Flex'; -import { CheckboxGroupProps } from './CheckboxGroup.props'; -import { styled } from '../theme'; -import { withGlobalPrefix } from '../utils'; + +import { styled } from '../../theme'; +import { withGlobalPrefix } from '../../utils'; const componentName = 'CheckboxGroup'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/CheckboxGroup/index.ts b/packages/web-ui/src/components/CheckboxGroup/index.ts similarity index 100% rename from packages/web-ui/src/CheckboxGroup/index.ts rename to packages/web-ui/src/components/CheckboxGroup/index.ts diff --git a/packages/web-ui/src/CheckboxTile/CheckboxTile.docs.mdx b/packages/web-ui/src/components/CheckboxTile/CheckboxTile.docs.mdx similarity index 95% rename from packages/web-ui/src/CheckboxTile/CheckboxTile.docs.mdx rename to packages/web-ui/src/components/CheckboxTile/CheckboxTile.docs.mdx index 8885ecb0d..aeb7b709c 100644 --- a/packages/web-ui/src/CheckboxTile/CheckboxTile.docs.mdx +++ b/packages/web-ui/src/components/CheckboxTile/CheckboxTile.docs.mdx @@ -1,9 +1,12 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './CheckboxTile.stories'; -import { Stack } from '../Stack'; + import { Box } from '../Box'; +import { Stack } from '../Stack'; import { Text } from '../Text'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/CheckboxTile/CheckboxTile.props.ts b/packages/web-ui/src/components/CheckboxTile/CheckboxTile.props.ts similarity index 100% rename from packages/web-ui/src/CheckboxTile/CheckboxTile.props.ts rename to packages/web-ui/src/components/CheckboxTile/CheckboxTile.props.ts diff --git a/packages/web-ui/src/CheckboxTile/CheckboxTile.stories.tsx b/packages/web-ui/src/components/CheckboxTile/CheckboxTile.stories.tsx similarity index 99% rename from packages/web-ui/src/CheckboxTile/CheckboxTile.stories.tsx rename to packages/web-ui/src/components/CheckboxTile/CheckboxTile.stories.tsx index 6afce2881..0ac662a3c 100644 --- a/packages/web-ui/src/CheckboxTile/CheckboxTile.stories.tsx +++ b/packages/web-ui/src/components/CheckboxTile/CheckboxTile.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 { CheckboxTile } from './CheckboxTile'; + import { Flex } from '../Flex'; import { Text } from '../Text'; -import { CheckboxTile } from './CheckboxTile'; const meta: Meta = { title: 'Web UI / Components / Checkbox / CheckboxTile', diff --git a/packages/web-ui/src/CheckboxTile/CheckboxTile.tsx b/packages/web-ui/src/components/CheckboxTile/CheckboxTile.tsx similarity index 94% rename from packages/web-ui/src/CheckboxTile/CheckboxTile.tsx rename to packages/web-ui/src/components/CheckboxTile/CheckboxTile.tsx index a070fe1c6..779f935ab 100644 --- a/packages/web-ui/src/CheckboxTile/CheckboxTile.tsx +++ b/packages/web-ui/src/components/CheckboxTile/CheckboxTile.tsx @@ -1,16 +1,21 @@ import * as React from 'react'; + import clsx from 'clsx'; + import { colors } from '@utilitywarehouse/colour-system'; + +import { CheckboxTileProps } from './CheckboxTile.props'; + import { BaseCheckbox } from '../BaseCheckbox'; import { useBaseCheckboxGroup } from '../BaseCheckboxGroup'; import { Flex } from '../Flex'; import { HelperText } from '../HelperText'; import { Label } from '../Label'; -import { CheckboxTileProps } from './CheckboxTile.props'; -import { useIds } from '../hooks'; -import styled from '../theme/styled'; -import { PropsWithSx } from '../types'; -import { px, spacing, withGlobalPrefix } from '../utils'; + +import { useIds } from '../../hooks'; +import { styled } from '../../theme'; +import type { PropsWithSx } from '../../types'; +import { px, spacing, withGlobalPrefix } from '../../utils'; const componentName = 'CheckboxTile'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/CheckboxTile/index.ts b/packages/web-ui/src/components/CheckboxTile/index.ts similarity index 100% rename from packages/web-ui/src/CheckboxTile/index.ts rename to packages/web-ui/src/components/CheckboxTile/index.ts diff --git a/packages/web-ui/src/Divider/Divider.docs.mdx b/packages/web-ui/src/components/Divider/Divider.docs.mdx similarity index 95% rename from packages/web-ui/src/Divider/Divider.docs.mdx rename to packages/web-ui/src/components/Divider/Divider.docs.mdx index a203ee3b3..024a6a265 100644 --- a/packages/web-ui/src/Divider/Divider.docs.mdx +++ b/packages/web-ui/src/components/Divider/Divider.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './Divider.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/Divider/Divider.props.ts b/packages/web-ui/src/components/Divider/Divider.props.ts similarity index 100% rename from packages/web-ui/src/Divider/Divider.props.ts rename to packages/web-ui/src/components/Divider/Divider.props.ts diff --git a/packages/web-ui/src/Divider/Divider.stories.tsx b/packages/web-ui/src/components/Divider/Divider.stories.tsx similarity index 99% rename from packages/web-ui/src/Divider/Divider.stories.tsx rename to packages/web-ui/src/components/Divider/Divider.stories.tsx index f94368eb6..0c4822db6 100644 --- a/packages/web-ui/src/Divider/Divider.stories.tsx +++ b/packages/web-ui/src/components/Divider/Divider.stories.tsx @@ -1,12 +1,16 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colors } from '@utilitywarehouse/colour-system'; + +import { Divider } from './Divider'; + import { Box } from '../Box'; import { Flex } from '../Flex'; import { Heading } from '../Heading'; import { Strong } from '../Strong'; import { Text } from '../Text'; -import { Divider } from './Divider'; const meta: Meta = { title: 'Web UI / Components / Divider', diff --git a/packages/web-ui/src/Divider/Divider.tsx b/packages/web-ui/src/components/Divider/Divider.tsx similarity index 95% rename from packages/web-ui/src/Divider/Divider.tsx rename to packages/web-ui/src/components/Divider/Divider.tsx index 39d0d8025..0599ff1f9 100644 --- a/packages/web-ui/src/Divider/Divider.tsx +++ b/packages/web-ui/src/components/Divider/Divider.tsx @@ -1,9 +1,13 @@ import * as React from 'react'; + import clsx from 'clsx'; + import { colors } from '@utilitywarehouse/colour-system'; + import { DividerProps, ORIENTATIONS, Orientation } from './Divider.props'; -import { styled } from '../theme'; -import { px, withGlobalPrefix } from '../utils'; + +import { styled } from '../../theme'; +import { px, withGlobalPrefix } from '../../utils'; const componentName = 'Divider'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/Divider/index.ts b/packages/web-ui/src/components/Divider/index.ts similarity index 100% rename from packages/web-ui/src/Divider/index.ts rename to packages/web-ui/src/components/Divider/index.ts diff --git a/packages/web-ui/src/Em/Em.docs.mdx b/packages/web-ui/src/components/Em/Em.docs.mdx similarity index 82% rename from packages/web-ui/src/Em/Em.docs.mdx rename to packages/web-ui/src/components/Em/Em.docs.mdx index 8689afb9c..71e0b9512 100644 --- a/packages/web-ui/src/Em/Em.docs.mdx +++ b/packages/web-ui/src/components/Em/Em.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './Em.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/Em/Em.props.ts b/packages/web-ui/src/components/Em/Em.props.ts similarity index 100% rename from packages/web-ui/src/Em/Em.props.ts rename to packages/web-ui/src/components/Em/Em.props.ts diff --git a/packages/web-ui/src/Em/Em.stories.tsx b/packages/web-ui/src/components/Em/Em.stories.tsx similarity index 99% rename from packages/web-ui/src/Em/Em.stories.tsx rename to packages/web-ui/src/components/Em/Em.stories.tsx index efe75d441..b747db6ef 100644 --- a/packages/web-ui/src/Em/Em.stories.tsx +++ b/packages/web-ui/src/components/Em/Em.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 { Em } from './Em'; + import { Flex } from '../Flex'; import { Text } from '../Text'; -import { Em } from './Em'; const textVariants = ['subtitle', 'body', 'legalNote', 'caption'] as const; diff --git a/packages/web-ui/src/Em/Em.tsx b/packages/web-ui/src/components/Em/Em.tsx similarity index 87% rename from packages/web-ui/src/Em/Em.tsx rename to packages/web-ui/src/components/Em/Em.tsx index 871daf291..c8765484a 100644 --- a/packages/web-ui/src/Em/Em.tsx +++ b/packages/web-ui/src/components/Em/Em.tsx @@ -1,9 +1,12 @@ import * as React from 'react'; + import clsx from 'clsx'; + import { EmProps } from './Em.props'; -import { styled } from '../theme'; -import { PropsWithSx } from '../types'; -import { withGlobalPrefix } from '../utils'; + +import { styled } from '../../theme'; +import { PropsWithSx } from '../../types'; +import { withGlobalPrefix } from '../../utils'; const componentName = 'Em'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/Em/index.ts b/packages/web-ui/src/components/Em/index.ts similarity index 100% rename from packages/web-ui/src/Em/index.ts rename to packages/web-ui/src/components/Em/index.ts diff --git a/packages/web-ui/src/Fieldset/Fieldset.docs.mdx b/packages/web-ui/src/components/Fieldset/Fieldset.docs.mdx similarity index 82% rename from packages/web-ui/src/Fieldset/Fieldset.docs.mdx rename to packages/web-ui/src/components/Fieldset/Fieldset.docs.mdx index 22c1c81cc..672f2f98a 100644 --- a/packages/web-ui/src/Fieldset/Fieldset.docs.mdx +++ b/packages/web-ui/src/components/Fieldset/Fieldset.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './Fieldset.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/Fieldset/Fieldset.props.ts b/packages/web-ui/src/components/Fieldset/Fieldset.props.ts similarity index 100% rename from packages/web-ui/src/Fieldset/Fieldset.props.ts rename to packages/web-ui/src/components/Fieldset/Fieldset.props.ts diff --git a/packages/web-ui/src/Fieldset/Fieldset.stories.tsx b/packages/web-ui/src/components/Fieldset/Fieldset.stories.tsx similarity index 99% rename from packages/web-ui/src/Fieldset/Fieldset.stories.tsx rename to packages/web-ui/src/components/Fieldset/Fieldset.stories.tsx index 06b3ebe25..9d6a1ead9 100644 --- a/packages/web-ui/src/Fieldset/Fieldset.stories.tsx +++ b/packages/web-ui/src/components/Fieldset/Fieldset.stories.tsx @@ -1,10 +1,14 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colors } from '@utilitywarehouse/colour-system'; + +import { Fieldset } from './Fieldset'; + import { Box } from '../Box'; import { FieldsetLegend } from '../FieldsetLegend'; import { Text } from '../Text'; -import { Fieldset } from './Fieldset'; const meta: Meta = { title: 'Web UI / Components / Fieldset', diff --git a/packages/web-ui/src/Fieldset/Fieldset.tsx b/packages/web-ui/src/components/Fieldset/Fieldset.tsx similarity index 86% rename from packages/web-ui/src/Fieldset/Fieldset.tsx rename to packages/web-ui/src/components/Fieldset/Fieldset.tsx index a3849f2ea..5c8185f17 100644 --- a/packages/web-ui/src/Fieldset/Fieldset.tsx +++ b/packages/web-ui/src/components/Fieldset/Fieldset.tsx @@ -1,10 +1,14 @@ import * as React from 'react'; + import clsx from 'clsx'; -import { Flex } from '../Flex'; + import { FieldsetProps } from './Fieldset.props'; -import { styled } from '../theme'; -import { PropsWithSx } from '../types'; -import { withGlobalPrefix } from '../utils'; + +import { Flex } from '../Flex'; + +import { styled } from '../../theme'; +import { PropsWithSx } from '../../types'; +import { withGlobalPrefix } from '../../utils'; const componentName = 'Fieldset'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/Fieldset/index.ts b/packages/web-ui/src/components/Fieldset/index.ts similarity index 100% rename from packages/web-ui/src/Fieldset/index.ts rename to packages/web-ui/src/components/Fieldset/index.ts diff --git a/packages/web-ui/src/FieldsetLegend/FieldsetLegend.docs.mdx b/packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.docs.mdx similarity index 83% rename from packages/web-ui/src/FieldsetLegend/FieldsetLegend.docs.mdx rename to packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.docs.mdx index bf16876b8..65771a297 100644 --- a/packages/web-ui/src/FieldsetLegend/FieldsetLegend.docs.mdx +++ b/packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './FieldsetLegend.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/FieldsetLegend/FieldsetLegend.props.ts b/packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.props.ts similarity index 100% rename from packages/web-ui/src/FieldsetLegend/FieldsetLegend.props.ts rename to packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.props.ts diff --git a/packages/web-ui/src/FieldsetLegend/FieldsetLegend.stories.tsx b/packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.stories.tsx similarity index 99% rename from packages/web-ui/src/FieldsetLegend/FieldsetLegend.stories.tsx rename to packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.stories.tsx index d9729daf2..7c14f87f5 100644 --- a/packages/web-ui/src/FieldsetLegend/FieldsetLegend.stories.tsx +++ b/packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.stories.tsx @@ -1,8 +1,11 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; -import { Box } from '../Box'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { FieldsetLegend } from './FieldsetLegend'; +import { Box } from '../Box'; + const meta: Meta = { title: 'Web UI / Typography / FieldsetLegend', component: FieldsetLegend, diff --git a/packages/web-ui/src/FieldsetLegend/FieldsetLegend.tsx b/packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.tsx similarity index 79% rename from packages/web-ui/src/FieldsetLegend/FieldsetLegend.tsx rename to packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.tsx index d4df92dc9..7497b02f2 100644 --- a/packages/web-ui/src/FieldsetLegend/FieldsetLegend.tsx +++ b/packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.tsx @@ -1,12 +1,16 @@ import * as React from 'react'; -import { ElementRef, PropsWithChildren, forwardRef } from 'react'; +import type { ElementRef, PropsWithChildren } from 'react'; + import clsx from 'clsx'; + import { colors } from '@utilitywarehouse/colour-system'; + import { FieldsetLegendProps } from './FieldsetLegend.props'; -import { styled } from '../theme'; -import { fontWeights, fonts } from '../tokens'; -import { PropsWithSx } from '../types'; -import { pxToRem, withGlobalPrefix } from '../utils'; + +import { styled } from '../../theme'; +import { fontWeights, fonts } from '../../tokens'; +import { PropsWithSx } from '../../types'; +import { pxToRem, withGlobalPrefix } from '../../utils'; const componentName = 'FieldsetLegend'; const componentClassName = withGlobalPrefix(componentName); @@ -29,7 +33,7 @@ const StyledElement = styled('legend')({ * The `FieldsetLegend` should be used with the `Fieldset` component to label * grouped form inputs. */ -export const FieldsetLegend = forwardRef< +export const FieldsetLegend = React.forwardRef< ElementRef<'legend'>, PropsWithChildren> >(({ disabled, className, ...props }, ref) => { diff --git a/packages/web-ui/src/FieldsetLegend/index.ts b/packages/web-ui/src/components/FieldsetLegend/index.ts similarity index 100% rename from packages/web-ui/src/FieldsetLegend/index.ts rename to packages/web-ui/src/components/FieldsetLegend/index.ts diff --git a/packages/web-ui/src/Flex/Flex.docs.mdx b/packages/web-ui/src/components/Flex/Flex.docs.mdx similarity index 96% rename from packages/web-ui/src/Flex/Flex.docs.mdx rename to packages/web-ui/src/components/Flex/Flex.docs.mdx index 80f851f97..a60d7ae44 100644 --- a/packages/web-ui/src/Flex/Flex.docs.mdx +++ b/packages/web-ui/src/components/Flex/Flex.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './Flex.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/Flex/Flex.props.ts b/packages/web-ui/src/components/Flex/Flex.props.ts similarity index 70% rename from packages/web-ui/src/Flex/Flex.props.ts rename to packages/web-ui/src/components/Flex/Flex.props.ts index 3fd8aa156..16ea4f325 100644 --- a/packages/web-ui/src/Flex/Flex.props.ts +++ b/packages/web-ui/src/components/Flex/Flex.props.ts @@ -1,8 +1,11 @@ -import { ElementType } from 'react'; -import { BoxTypeMap as MuiBoxTypeMap, ResponsiveStyleValue } from '@mui/system'; -import { OverrideProps } from '@mui/types'; -import { BoxProps } from '../Box'; -import { Theme } from '../theme'; +import type { ElementType } from 'react'; + +import type { BoxTypeMap as MuiBoxTypeMap, ResponsiveStyleValue } from '@mui/system'; +import type { OverrideProps } from '@mui/types'; + +import type { BoxProps } from '../Box'; + +import { Theme } from '../../theme'; export interface FlexOwnProps { display?: ResponsiveStyleValue<'none' | 'flex' | 'inline-flex'>; diff --git a/packages/web-ui/src/Flex/Flex.stories.tsx b/packages/web-ui/src/components/Flex/Flex.stories.tsx similarity index 99% rename from packages/web-ui/src/Flex/Flex.stories.tsx rename to packages/web-ui/src/components/Flex/Flex.stories.tsx index c96b88547..521e389fe 100644 --- a/packages/web-ui/src/Flex/Flex.stories.tsx +++ b/packages/web-ui/src/components/Flex/Flex.stories.tsx @@ -1,10 +1,14 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colorsCommon } from '@utilitywarehouse/colour-system'; + +import { Flex } from './Flex'; + import { Box } from '../Box'; import { Divider } from '../Divider'; import { Text } from '../Text'; -import { Flex } from './Flex'; const meta: Meta = { title: 'Web UI / Layout / Flex', diff --git a/packages/web-ui/src/Flex/Flex.tsx b/packages/web-ui/src/components/Flex/Flex.tsx similarity index 84% rename from packages/web-ui/src/Flex/Flex.tsx rename to packages/web-ui/src/components/Flex/Flex.tsx index bcc300a0e..2c819c52d 100644 --- a/packages/web-ui/src/Flex/Flex.tsx +++ b/packages/web-ui/src/components/Flex/Flex.tsx @@ -1,9 +1,13 @@ import * as React from 'react'; -import { BoxTypeMap as MuiBoxTypeMap } from '@mui/system'; -import { OverridableComponent } from '@mui/types'; + +import type { BoxTypeMap as MuiBoxTypeMap } from '@mui/system'; +import type { OverridableComponent } from '@mui/types'; + +import type { FlexOwnProps } from './Flex.props'; + import { createBox } from '../Box'; -import { FlexOwnProps } from './Flex.props'; -import { type Theme } from '../theme'; + +import type { Theme } from '../../theme'; const componentName = 'Flex'; const BaseBox = createBox({ componentName }); diff --git a/packages/web-ui/src/Flex/index.ts b/packages/web-ui/src/components/Flex/index.ts similarity index 100% rename from packages/web-ui/src/Flex/index.ts rename to packages/web-ui/src/components/Flex/index.ts diff --git a/packages/web-ui/src/Grid/Grid.docs.mdx b/packages/web-ui/src/components/Grid/Grid.docs.mdx similarity index 95% rename from packages/web-ui/src/Grid/Grid.docs.mdx rename to packages/web-ui/src/components/Grid/Grid.docs.mdx index 8d1e5eaf7..589353268 100644 --- a/packages/web-ui/src/Grid/Grid.docs.mdx +++ b/packages/web-ui/src/components/Grid/Grid.docs.mdx @@ -1,12 +1,15 @@ +import { Divider } from '@mui/material'; import { Meta, Canvas, ArgTypes, Description } from '@storybook/blocks'; -import * as Stories from './Grid.stories'; + import { DEFAULT_COLUMNS, DEFAULT_SPACING } from './Grid'; +import * as Stories from './Grid.stories'; + import { Box } from '../Box'; import { Stack } from '../Stack'; import { Text } from '../Text'; -import { Divider } from '@mui/material'; -import { spacingBase, breakpoints } from '../tokens'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; +import { spacingBase, breakpoints } from '../../tokens'; diff --git a/packages/web-ui/src/Grid/Grid.stories.tsx b/packages/web-ui/src/components/Grid/Grid.stories.tsx similarity index 99% rename from packages/web-ui/src/Grid/Grid.stories.tsx rename to packages/web-ui/src/components/Grid/Grid.stories.tsx index 5e9d100b7..0e4c43d6f 100644 --- a/packages/web-ui/src/Grid/Grid.stories.tsx +++ b/packages/web-ui/src/components/Grid/Grid.stories.tsx @@ -1,10 +1,14 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colors, colorsCommon } from '@utilitywarehouse/colour-system'; + +import { Grid } from './Grid'; + import { Box } from '../Box'; import { Text } from '../Text'; import { ThemeProvider } from '../ThemeProvider'; -import { Grid } from './Grid'; const meta: Meta = { title: 'Web UI / Layout / Grid', diff --git a/packages/web-ui/src/Grid/Grid.tsx b/packages/web-ui/src/components/Grid/Grid.tsx similarity index 99% rename from packages/web-ui/src/Grid/Grid.tsx rename to packages/web-ui/src/components/Grid/Grid.tsx index 7279be6ce..7ed9ae857 100644 --- a/packages/web-ui/src/Grid/Grid.tsx +++ b/packages/web-ui/src/components/Grid/Grid.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; + import MuiGrid from '@mui/material/Grid'; import type { GridProps as MuiGridProps, RegularBreakpoints } from '@mui/material/Grid'; import type { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent'; diff --git a/packages/web-ui/src/Grid/index.ts b/packages/web-ui/src/components/Grid/index.ts similarity index 100% rename from packages/web-ui/src/Grid/index.ts rename to packages/web-ui/src/components/Grid/index.ts diff --git a/packages/web-ui/src/Heading/Heading.docs.mdx b/packages/web-ui/src/components/Heading/Heading.docs.mdx similarity index 96% rename from packages/web-ui/src/Heading/Heading.docs.mdx rename to packages/web-ui/src/components/Heading/Heading.docs.mdx index 8e52f0135..860a96a19 100644 --- a/packages/web-ui/src/Heading/Heading.docs.mdx +++ b/packages/web-ui/src/components/Heading/Heading.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes, Typeset } from '@storybook/blocks'; + import * as Stories from './Heading.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/Heading/Heading.props.ts b/packages/web-ui/src/components/Heading/Heading.props.ts similarity index 99% rename from packages/web-ui/src/Heading/Heading.props.ts rename to packages/web-ui/src/components/Heading/Heading.props.ts index 60201d3d6..ea94998e6 100644 --- a/packages/web-ui/src/Heading/Heading.props.ts +++ b/packages/web-ui/src/components/Heading/Heading.props.ts @@ -1,4 +1,5 @@ import { ComponentPropsWithoutRef, ElementType } from 'react'; + import { ResponsiveStyleValue } from '@mui/system'; export interface HeadingProps extends ComponentPropsWithoutRef<'h2'> { diff --git a/packages/web-ui/src/Heading/Heading.stories.tsx b/packages/web-ui/src/components/Heading/Heading.stories.tsx similarity index 99% rename from packages/web-ui/src/Heading/Heading.stories.tsx rename to packages/web-ui/src/components/Heading/Heading.stories.tsx index bbb1bf2ed..f652f7982 100644 --- a/packages/web-ui/src/Heading/Heading.stories.tsx +++ b/packages/web-ui/src/components/Heading/Heading.stories.tsx @@ -1,9 +1,13 @@ -import type { Meta, StoryObj } from '@storybook/react'; import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + import { colors, colorsCommon } from '@utilitywarehouse/colour-system'; + +import { Heading } from './Heading'; + import { Box } from '../Box'; import { Flex } from '../Flex'; -import { Heading } from './Heading'; const meta: Meta = { title: 'Web UI / Typography / Heading', diff --git a/packages/web-ui/src/Heading/Heading.tsx b/packages/web-ui/src/components/Heading/Heading.tsx similarity index 94% rename from packages/web-ui/src/Heading/Heading.tsx rename to packages/web-ui/src/components/Heading/Heading.tsx index 7bd01809a..1788ce7e1 100644 --- a/packages/web-ui/src/Heading/Heading.tsx +++ b/packages/web-ui/src/components/Heading/Heading.tsx @@ -1,19 +1,18 @@ import * as React from 'react'; + import clsx from 'clsx'; + import { colorsCommon } from '@utilitywarehouse/colour-system'; -import { useBackground } from '../Box'; + import { HeadingProps } from './Heading.props'; -import { styled } from '../theme'; -import { fontWeights, fonts } from '../tokens'; -import { PropsWithSx } from '../types'; -import { - DATA_ATTRIBUTES, - DATA_ATTRIBUTE_SELECTORS, - classSelector, - mediaQueries, - pxToRem, - withGlobalPrefix, -} from '../utils'; + +import { useBackground } from '../Box'; + +import { DATA_ATTRIBUTES, DATA_ATTRIBUTE_SELECTORS, classSelector } from '../../helpers'; +import { styled } from '../../theme'; +import { fontWeights, fonts } from '../../tokens'; +import { PropsWithSx } from '../../types'; +import { mediaQueries, pxToRem, withGlobalPrefix } from '../../utils'; const componentName = 'Heading'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/Heading/index.ts b/packages/web-ui/src/components/Heading/index.ts similarity index 100% rename from packages/web-ui/src/Heading/index.ts rename to packages/web-ui/src/components/Heading/index.ts diff --git a/packages/web-ui/src/HelperText/HelperText.docs.mdx b/packages/web-ui/src/components/HelperText/HelperText.docs.mdx similarity index 86% rename from packages/web-ui/src/HelperText/HelperText.docs.mdx rename to packages/web-ui/src/components/HelperText/HelperText.docs.mdx index 11bbe26ab..5ba8cbf50 100644 --- a/packages/web-ui/src/HelperText/HelperText.docs.mdx +++ b/packages/web-ui/src/components/HelperText/HelperText.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './HelperText.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; diff --git a/packages/web-ui/src/HelperText/HelperText.props.ts b/packages/web-ui/src/components/HelperText/HelperText.props.ts similarity index 99% rename from packages/web-ui/src/HelperText/HelperText.props.ts rename to packages/web-ui/src/components/HelperText/HelperText.props.ts index 25182346b..225ee9b00 100644 --- a/packages/web-ui/src/HelperText/HelperText.props.ts +++ b/packages/web-ui/src/components/HelperText/HelperText.props.ts @@ -1,4 +1,5 @@ import { ComponentPropsWithoutRef } from 'react'; + import type { LabelProps } from '../Label'; export interface HelperTextProps diff --git a/packages/web-ui/src/HelperText/HelperText.stories.tsx b/packages/web-ui/src/components/HelperText/HelperText.stories.tsx similarity index 99% rename from packages/web-ui/src/HelperText/HelperText.stories.tsx rename to packages/web-ui/src/components/HelperText/HelperText.stories.tsx index 243225407..36706cbd4 100644 --- a/packages/web-ui/src/HelperText/HelperText.stories.tsx +++ b/packages/web-ui/src/components/HelperText/HelperText.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { HelperText } from './HelperText'; const meta: Meta = { diff --git a/packages/web-ui/src/HelperText/HelperText.tsx b/packages/web-ui/src/components/HelperText/HelperText.tsx similarity index 91% rename from packages/web-ui/src/HelperText/HelperText.tsx rename to packages/web-ui/src/components/HelperText/HelperText.tsx index da5ff9e18..1169022c2 100644 --- a/packages/web-ui/src/HelperText/HelperText.tsx +++ b/packages/web-ui/src/components/HelperText/HelperText.tsx @@ -1,22 +1,21 @@ +import * as React from 'react'; + +import clsx from 'clsx'; + +import { colors } from '@utilitywarehouse/colour-system'; import { InformationMediumContainedIcon, TickMediumContainedIcon, WarningMediumContainedIcon, } from '@utilitywarehouse/react-icons'; -import * as React from 'react'; -import clsx from 'clsx'; -import { colors } from '@utilitywarehouse/colour-system'; + import { HelperTextProps } from './HelperText.props'; -import { styled } from '../theme'; -import { fontWeights, fonts } from '../tokens'; -import { PropsWithSx } from '../types'; -import { - DATA_ATTRIBUTE_SELECTORS, - classSelector, - pxToRem, - spacing, - withGlobalPrefix, -} from '../utils'; + +import { DATA_ATTRIBUTE_SELECTORS, classSelector } from '../../helpers'; +import { styled } from '../../theme'; +import { fontWeights, fonts } from '../../tokens'; +import { PropsWithSx } from '../../types'; +import { pxToRem, spacing, withGlobalPrefix } from '../../utils'; const componentName = 'HelperText'; const componentClassName = withGlobalPrefix(componentName); diff --git a/packages/web-ui/src/HelperText/index.ts b/packages/web-ui/src/components/HelperText/index.ts similarity index 100% rename from packages/web-ui/src/HelperText/index.ts rename to packages/web-ui/src/components/HelperText/index.ts diff --git a/packages/web-ui/src/IconButton/IconButton.docs.mdx b/packages/web-ui/src/components/IconButton/IconButton.docs.mdx similarity index 99% rename from packages/web-ui/src/IconButton/IconButton.docs.mdx rename to packages/web-ui/src/components/IconButton/IconButton.docs.mdx index 0d3d936a8..fc74ecf95 100644 --- a/packages/web-ui/src/IconButton/IconButton.docs.mdx +++ b/packages/web-ui/src/components/IconButton/IconButton.docs.mdx @@ -1,6 +1,8 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; + import * as Stories from './IconButton.stories'; -import { DocsHeader } from '../storybook-utils'; + +import { DocsHeader } from '../../storybook-components'; @@ -139,7 +141,6 @@ can also be achieved using the `inverted` prop. - ## Size The size prop controls the size of the button. This is a responsive prop and @@ -164,8 +165,8 @@ size prop, there are a couple of ways you can do this. 1. Using JS, with the `useMediaQuery` hook. ```tsx -import { IconButton, useMediaQuery } from '@utilitywarehouse/web-ui'; import { ChevronRight01MediumIcon, ChevronRight01SmallIcon } from '@utilitywarehouse/react-icons'; +import { IconButton, useMediaQuery } from '@utilitywarehouse/web-ui'; const MyComponent = () => { const showDesktopIcon = useMediaQuery(theme => theme.breakpoints.up('desktop')); @@ -181,8 +182,8 @@ const MyComponent = () => { 2. Using CSS, with `Box` and style props. This can also be achieved with the `sx` prop. ```tsx -import { Button, Box } from '@utilitywarehouse/web-ui'; import { ChevronRight01MediumIcon, ChevronRight01SmallIcon } from '@utilitywarehouse/react-icons'; +import { Button, Box } from '@utilitywarehouse/web-ui'; const MyComponent = () => (