move utils out of core (#1988)

.vscode/iTwinUISnippets.code-snippets

@@ -8,12 +8,12 @@
     "description": "Creates a separator comment"
   },
   "importForwardRef": {
-    "scoope": "javascriptreact,typescriptreact",
+    "scope": "javascriptreact,typescriptreact",
     "prefix": "impforwardRef",
     "body": [
       "import * as React from 'react';",
-      "import { Box } from '../utils/index.js';",
-      "import type { PolymorphicForwardRefComponent } from '../utils/index.js';"
+      "import { Box } from '../../utils/index.js';",
+      "import type { PolymorphicForwardRefComponent } from '../../utils/index.js';"
     ],
     "description": "Imports needed for forwardRef component"
   },

CONTRIBUTING.md

@@ -50,7 +50,7 @@ _Before running this command, make sure Docker is running. See [Visual testing](
 
 ### To run all tests for a specific component
 
-`pnpm test [component-name]` e.g. `pnpm test Alert` 
+`pnpm test [component-name]` e.g. `pnpm test Alert`
 
 _Please note this command is case sensitive. e.g. `Alert`, not `alert`._
 
@@ -79,48 +79,55 @@ If you only need to run this task for a specific workspace, you can specify turb
 #### Development environment
 
 To start the development server for all workspaces, run the following command from the root.
+
 ```
 pnpm dev
 ```
 
 This will automatically build anything that's not already built, and run the `dev` script for every workspace in parallel, watching for file changes.
 
 By default, a portal will be opened containing links to all the different dev servers:
-  - docs website:  `http://localhost:1700`
-  - vite playground: `http://localhost:1701`
-  - next playground: `http://localhost:1702`
-  - astro playground: `http://localhost:1703`
-  - react workshop (stories): `http://localhost:6006`
-  - css workshop (html pages): `http://localhost:3050`
+
+- docs website: `http://localhost:1700`
+- vite playground: `http://localhost:1701`
+- next playground: `http://localhost:1702`
+- astro playground: `http://localhost:1703`
+- react workshop (stories): `http://localhost:6006`
+- css workshop (html pages): `http://localhost:3050`
 
 ### Running bespoke commands
 
 If a script is not available in the root package.json or if you need to pass workspace-specific cli args, then you can specify the workspace as follows:
+
 ```
 # passing Alert as a cli arg to the `test` command in itwinui-react
 pnpm --filter=@itwin/itwinui-react run test Alert
 ```
 
 ...or you can simply run the command normally from inside the workspace folder instead of the monorepo root.
+
 ```
 # run this from inside packages/itwinui-react/ for the same result
 pnpm test Alert
 ```
 
 Note that this bypasses the turborepo pipeline, so you will need to manually run any dependent tasks first. For example, if the `build` command of `react-workshop` relies on the `build` command of `@itwin/itwinui-react`, then you will need to manually run the `build` commands in the right order.
+
 ```
 pnpm --filter=@itwin/itwinui-react run build
 pnpm --filter=react-workshop run build
 ```
 
 This is why it's recommended to use the turbo `--filter` syntax whenever possible.
+
 ```
 pnpm run build --filter=react-workshop
 ```
 
 > [!NOTE]
 >
 > The `--filter` syntax is available in both `turbo` and `pnpm`. The usage looks slightly different:
+>
 > - `turbo`: `pnpm run [command] --filter=[workspace]`
 >   - e.g. `pnpm run build --filter=@itwin/itwinui-react`
 >   - This will also run any dependent tasks defined in the Turbo pipeline, but does not allow args. (See [Turborepo docs](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)).
@@ -203,12 +210,13 @@ apps/website
 
 #### In `packages/itwinui-react`:
 
-* Manually add the `<svg>` component to `utils/icons` and `utils/icons/index.ts`
-* Import it from `utils`
+- Manually add the `<svg>` component to `utils/icons` and `utils/icons/index.ts`
+- Import it from `utils`
 
 e.g.
+
 ```tsx
-import { SvgClose, SvgInfoCircular } from '../utils';
+import { SvgClose, SvgInfoCircular } from '../../utils';
 ```
 
 ### Documentation
@@ -309,17 +317,23 @@ For running tests you will need [Docker](https://www.docker.com/products/docker-
   - For actions like click, hover use according functions from `scenarioHelper.js` and pass them as scenario options `actions` property.
     ```js
     const { scenario, hover } = require('./~scenarioHelper.cjs');
-    module.exports = [scenario('hover', { actions: [hover('.element-selector')] })];
+    module.exports = [
+      scenario('hover', { actions: [hover('.element-selector')] }),
+    ];
     ```
   - If you want to select only specific part of the test elements, pass `selectors` property to the options.
     ```js
     const { scenario } = require('./~scenarioHelper.cjs');
-    module.exports = [scenario('selected part', { selectors: ['.selected-part-selector'] })];
+    module.exports = [
+      scenario('selected part', { selectors: ['.selected-part-selector'] }),
+    ];
     ```
   - If you want to hide some elements because they might be moving e.g. spinner, pass `hideSelectors` property to the options.
     ```js
     const { scenario } = require('./~scenarioHelper.cjs');
-    module.exports = [scenario('hide part', { hideSelectors: ['.hide-selector'] })];
+    module.exports = [
+      scenario('hide part', { hideSelectors: ['.hide-selector'] }),
+    ];
     ```
   - More information about options can be found in [BackstopJS GitHub](https://github.com/garris/BackstopJS#advanced-scenarios).
 
@@ -331,7 +345,7 @@ We reuse our stories for visual tests by taking screenshots of the story iframes
 
 1. Make sure you have [Docker](https://www.docker.com/get-started) installed and running.
 2. From the monorepo root, run `pnpm run test --filter=react-workshop` or `pnpm test:react`. This will build react-workshop and run all cypress tests in docker.
-   -  If you only need to run tests for a specific component, you can do so by passing the `--spec` argument to cypress. e.g. for testing `Alert`, you can run `pnpm test:react --spec="**/Alert.*"`.
+   - If you only need to run tests for a specific component, you can do so by passing the `--spec` argument to cypress. e.g. for testing `Alert`, you can run `pnpm test:react --spec="**/Alert.*"`.
 3. Once the tests finish running, you can approve any failing test images using `pnpm approve:react`.
 
 #### Writing visual tests
@@ -341,12 +355,7 @@ Inside the `apps/react-workshop` workspace, the `src/` directory has a set of `-
 ```ts
 describe('Alert', () => {
   const storyPath = 'Alert';
-  const tests = [
-    'Positive',
-    'Negative',
-    'Warning',
-    'Informational',
-  ];
+  const tests = ['Positive', 'Negative', 'Warning', 'Informational'];
 
   tests.forEach((testName) => {
     it(testName, () => {
@@ -359,6 +368,7 @@ describe('Alert', () => {
 ```
 
 Notice how we do all of these things manually:
+
 - defining the names of all the stories that need to be tested and excluding the ones that don't.
 - specifying the story iframe url using the custom `storyId` helper.
 - visiting the iframe using `cy.visit`.
@@ -372,7 +382,7 @@ We use an automated script to evaluate each component example for accessibility
 
 #### Running accessibility tests
 
-In the terminal: 
+In the terminal:
 
 - Run `pnpm run test --filter=a11y` or `pnpm test:a11y` to run automated accessibility tests for all examples.
 
@@ -384,9 +394,9 @@ In the Cypress GUI:
 
 ##### Your results
 
-In the terminal, a table will be produced for each violating component with the Axe rule ID being violated and its description. 
+In the terminal, a table will be produced for each violating component with the Axe rule ID being violated and its description.
 
-In Cypress, if the component violates a Axe rule, its rule ID and the number of offending nodes will be output in a line in the testing window. You can click on the line to highlight the offending nodes in the test browser and to output more information in the browser console.  
+In Cypress, if the component violates a Axe rule, its rule ID and the number of offending nodes will be output in a line in the testing window. You can click on the line to highlight the offending nodes in the test browser and to output more information in the browser console.
 
 For more information on the Axe rule IDs and their meanings, visit [Deque University's list of Axe rules.](https://dequeuniversity.com/rules/axe/4.4/)
 

STYLEGUIDE.md

@@ -8,7 +8,7 @@ import * as React from 'react';
 ```
 
 ```jsx
-// Bad: named import 
+// Bad: named import
 import { useState } from 'react';
 ```
 
@@ -172,7 +172,7 @@ document.createElement('div');
 
 ```jsx
 // Good
-import { useLayoutEffect } from '../utils/index.js';
+import { useLayoutEffect } from '../../utils/index.js';
 
 useLayoutEffect(() => {});
 ```

apps/website/src/content/docs/inputwithdecorations.mdx

@@ -42,4 +42,4 @@ You can also disable whole component or just parts of it.
 
 ## Props
 
-<PropsTable path='@itwin/itwinui-react/esm/core/utils/components/InputFlexContainer.d.ts' />
+<PropsTable path='@itwin/itwinui-react/esm/core/InputWithDecorations/InputWithDecorations.d.ts' />

packages/itwinui-react/setupTests.ts

@@ -15,7 +15,7 @@ if (window.PointerEvent) {
   window.PointerEvent = window.MouseEvent;
 }
 
-vi.mock('./src/core/utils/hooks/useGlobals.js', () => {
+vi.mock('./src/utils/hooks/useGlobals.js', () => {
   return {
     // noop because we don't want to spam the terminal with warnings during tests
     useGlobals: () => {},

packages/itwinui-react/src/core/Alert/Alert.tsx

@@ -10,8 +10,8 @@ import {
   StatusIconMap,
   SvgCloseSmall,
   Box,
-} from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+} from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Icon } from '../Icon/Icon.js';
 import { Anchor } from '../Typography/Anchor.js';

packages/itwinui-react/src/core/Avatar/Avatar.tsx

@@ -4,11 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, SoftBackgrounds, isSoftBackground } from '../utils/index.js';
+import { Box, SoftBackgrounds, isSoftBackground } from '../../utils/index.js';
 import type {
   AnyString,
   PolymorphicForwardRefComponent,
-} from '../utils/index.js';
+} from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
 /**

packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { Box } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
 type AvatarGroupProps = {
   /**

packages/itwinui-react/src/core/Backdrop/Backdrop.tsx

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { Box } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
 export type BackdropProps = {
   /**

packages/itwinui-react/src/core/Badge/Badge.test.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { Badge } from './Badge.js';
-import { SoftBackgrounds } from '../utils/index.js';
+import { SoftBackgrounds } from '../../utils/index.js';
 
 it('should render in its most basic state', () => {
   const { container } = render(<Badge>label</Badge>);

packages/itwinui-react/src/core/Badge/Badge.tsx

@@ -4,11 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { isSoftBackground, SoftBackgrounds, Box } from '../utils/index.js';
+import { isSoftBackground, SoftBackgrounds, Box } from '../../utils/index.js';
 import type {
   AnyString,
   PolymorphicForwardRefComponent,
-} from '../utils/index.js';
+} from '../../utils/index.js';
 
 /**
  * Helper function that returns one of the preset badge color values.

packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.test.tsx

@@ -6,8 +6,8 @@ import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 import { Breadcrumbs } from './Breadcrumbs.js';
-import { SvgChevronRight, SvgMore } from '../utils/index.js';
-import * as UseOverflow from '../utils/hooks/useOverflow.js';
+import { SvgChevronRight, SvgMore } from '../../utils/index.js';
+import * as UseOverflow from '../../utils/hooks/useOverflow.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Button } from '../Buttons/Button.js';
 import { userEvent } from '@testing-library/user-event';

packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx

@@ -10,8 +10,8 @@ import {
   SvgChevronRight,
   Box,
   createWarningLogger,
-} from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+} from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
 

packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.test.tsx

@@ -2,10 +2,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { SvgMore, SvgClose as SvgPlaceholder } from '../utils/index.js';
+import { SvgMore, SvgClose as SvgPlaceholder } from '../../utils/index.js';
 import { fireEvent, render } from '@testing-library/react';
 import * as React from 'react';
-import * as UseOverflow from '../utils/hooks/useOverflow.js';
+import * as UseOverflow from '../../utils/hooks/useOverflow.js';
 
 import { ButtonGroup } from './ButtonGroup.js';
 import { Button } from '../Buttons/Button.js';

packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { FloatingDelayGroup } from '@floating-ui/react';
 
 // ----------------------------------------------------------------------------

packages/itwinui-react/src/core/Buttons/Button.test.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import { SvgClose as SvgPlaceholder } from '../utils/index.js';
+import { SvgClose as SvgPlaceholder } from '../../utils/index.js';
 import { Button } from './Button.js';
 
 it('renders default button correctly', () => {

packages/itwinui-react/src/core/Buttons/Button.tsx

@@ -5,8 +5,8 @@
 import cx from 'classnames';
 import * as React from 'react';
 
-import { Box, ButtonBase } from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { Box, ButtonBase } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
 export type ButtonProps = {
   /**

packages/itwinui-react/src/core/Buttons/DropdownButton.test.tsx

@@ -7,7 +7,7 @@ import { render } from '@testing-library/react';
 
 import { DropdownButton } from './DropdownButton.js';
 import { MenuItem } from '../Menu/MenuItem.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall } from '../utils/index.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
 import { userEvent } from '@testing-library/user-event';
 
 function renderComponent(

packages/itwinui-react/src/core/Buttons/DropdownButton.tsx

@@ -8,8 +8,8 @@ import { Button } from './Button.js';
 import type { ButtonProps } from './Button.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall } from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
 export type DropdownButtonProps = {
   /**

packages/itwinui-react/src/core/Buttons/IconButton.test.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import { SvgMore } from '../utils/index.js';
+import { SvgMore } from '../../utils/index.js';
 
 import { IconButton } from './IconButton.js';
 

packages/itwinui-react/src/core/Buttons/IconButton.tsx

@@ -4,10 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase } from '../utils/index.js';
+import { Box, ButtonBase } from '../../utils/index.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import type { ButtonProps } from './Button.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';