@atlaskit/eslint-plugin-design-system 10.10.0 → 10.10.2

package/constellation/no-banned-imports/usage.mdx

@@ -1,19 +0,0 @@
-# no-banned-imports
-
-Using private or experimental packages is dangerous as they are not supported across major versions
-meaning you will not be able to migrate easily causing friction for yourself and the Atlassian
-Design System team.
-
-## Examples
-
-Anything that is considered private or experimental will be marked as violations.
-
-### Incorrect
-
-```ts
-import noop from '@atlaskit/ds-lib/noop';
-                  ^^^^^^^^^^^^^^^^^^^^^
-
-import { Text } from '@atlaskit/ds-explorations';
-                      ^^^^^^^^^^^^^^^^^^^^^^^^^
-```

package/constellation/no-css-tagged-template-expression/usage.mdx

@@ -1,71 +0,0 @@
-# no-css-tagged-template-expression
-
-Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including
-`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
-
-Tagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix
-` css`` ` to the preferred `css({})` call expression syntax.
-
-Thank you to the
-[Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-css-tagged-template-expression)
-from which this was ported.
-
-## Examples
-
-### Incorrect
-
-```js
-import { css } from '@emotion/react';
-
-css`
-	color: blue;
-`;
-
-const styles = css`
-	color: blue;
-	font-weight: 500;
-`;
-```
-
-### Correct
-
-```js
-import { css } from '@emotion/react';
-
-css({ color: 'blue' });
-
-const styles = css({
-	color: 'blue',
-	fontWeight: 500,
-});
-```
-
-## Options
-
-### importSources
-
-By default, this rule will check `css` usages from:
-
-- `@atlaskit/css`
-- `@atlaskit/primitives`
-- `@compiled/react`
-- `@emotion/react`
-- `@emotion/core`
-- `@emotion/styled`
-- `styled-components`
-
-To change this list of libraries, you can define a custom set of `importSources`, which accepts an
-array of package names (strings).
-
-```tsx
-// [{ importSources: ['other-lib'] }]
-
-import { css } from 'other-lib';
-
-// Invalid!
-export const styles = css``;
-```
-
-## Limitations
-
-- Comments are not auto-fixable. You will need to manually convert usages containing functions.

package/constellation/no-custom-icons/usage.mdx

@@ -1,36 +0,0 @@
-# no-custom-icons
-
-Icons are being updated with new designs, a simplified set of available icons and sizes, as well as
-more consistent padding and spacing.
-
-The new icon components allows your components to align with the new visual language - either by
-default, or when enabled via a feature flag.
-
-Custom icons are no longer supported, and should either be replaced with an existing icon from the
-`@atlaskit/icon` or `@atlassian/icon-lab` packages, or contributed to those packages.
-
-During the migration process, any custom icons should be moved into a central location to disable
-this error and allow the icon to be quickly replaced. What location to display in the error can be
-configured via the legacyIconPackages option.
-
-## Examples
-
-This rule identifies usages of custom icons from `@atlaskit/icon` or `@atlaskit/icon/base`.
-
-### Incorrect
-
-```js
-import Icon from '@atlaskit/icon';
-                 ^^^^^^^^^^^^^^^^^ custom icon import
-
-<Icon label="Activity" glyph="...">
-^^^^^^^^^^^^^^^^^^^^^^^ custom icon
-```
-
-### Correct
-
-```js
-import AddIcon from '@atlaskit/icon/core/add';
-
-<AddIcon label="" />;
-```

package/constellation/no-deprecated-apis/usage.mdx

@@ -1,82 +0,0 @@
-# no-deprecated-apis
-
-Props across the Atlassian Design System can be deprecated when they are deemed no-longer fit for
-purporse or dangerous and risk effective use at scale.
-
-## Examples
-
-Anything that can be used as props from Atlassian Design System components can be violations when
-marked as deprecated.
-
-### Incorrect
-
-```tsx
-<ButtonItem cssFn={cssFn()} />
-            ^^^^
-
-<Drawer overrides={overrides} />
-        ^^^^^^^^^
-```
-
-## Options
-
-The rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal
-config. If provided the rule will use the passed in config instead.
-
-### deprecatedConfig
-
-The following fields can be defined in the config:
-
-- `deprecatedProp`, which is the deprecated props. Each prop has the following fields:
-  - `moduleSpecifier`, which is the module specifier of the package in which the prop was
-    deprecated. For example: `@atlaskit/button`.
-  - `namedSpecifier` **(optional)**, which is an array of named specifiers of the package in which
-    the prop was deprecated. For example: `Button`.
-  - `actionableVersion` **(optional)**, which is the version of the package in which the prop can be
-    actioned on. For example: `1.0.0`.
-
-```json
-{
-	"cssFn": [
-		{
-			"moduleSpecifier": "@atlaskit/menu"
-		}
-	]
-}
-```
-
-```js
-import { configs } from '@atlaskit/eslint-plugin-design-system';
-
-module.exports = {
-	rules: {
-		'@atlaskit/design-system/no-deprecated-api': [
-			'error',
-			{
-				deprecatedConfig: {
-					cssFn: [
-						{
-							moduleSpecifier: '@atlaskit/menu',
-						},
-					],
-				},
-			},
-		],
-	},
-};
-```
-
-The plugin also provides a `filterActionableDeprecations` util function that accepts the
-`deprecated APIs config` and your root `package.json` as params and will filter the default
-deprecated APIs config based on the package versions installed.
-
-```js
-import { configs, filterActionableDeprecations } from '@atlaskit/eslint-plugin-design-system';
-import packageJson from './package.json';
-
-rules: {
-  '@atlaskit/design-system/no-deprecated-api': ['error', {
-    'deprecatedConfig': filterActionableDeprecations(configs.deprecatedConfig, packageJson),
-  }]
-}
-```

package/constellation/no-deprecated-design-token-usage/usage.mdx

@@ -1,30 +0,0 @@
-# no-deprecated-design-token-usage
-
-Using deprecated design tokens is dangerous as they will eventually be deleted after the sunset
-period. This rule helps you move to non-deprecated design tokens.
-
-## Examples
-
-This rule will mark usage of deprecated design tokens as violations.
-
-## Incorrect
-
-```js
-import { token } from '@atlaskit/tokens';
-
-css({ color: token('i.am.deprecated') });
-                    ^^^^^^^^^^^^^^^
-css({ color: token('i.am.a.token') });
-                    ^^^^^^^^^^^^^
-```
-
-## Options
-
-It's recommended to set this rule to "warn" to allow for new and old tokens to exist side-by-side
-for the duration of the deprecation period and avoid big-bang migrations.
-
-Once the deprecation period is over for a design token it will be moved into `deleted` state at
-which point the counterpart of this rule `no-unsafe-design-token-usage` will mark violations as
-errors.
-
-Running `eslint --fix` will automatically apply replacement tokens if present.

package/constellation/no-deprecated-imports/usage.mdx

@@ -1,66 +0,0 @@
-# no-deprecated-imports
-
-Packages across the Atlassian Design System can be deprecated when they are deemed no-longer fit for
-purporse or dangerous and risk effective use at scale.
-
-## Examples
-
-This rule will mark usage of deprecated modules as violations.
-
-### Incorrect
-
-```ts
-import Item from '@atlaskit/item';
-                  ^^^^^^^^^^^^^^
-import GlobalNav from '@atlaskit/global-navigation';
-                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-```
-
-## Options
-
-The rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal
-config. If provided the rule will use the passed in config instead.
-
-### deprecatedConfig
-
-The following fields can be defined in the config:
-
-- `packagePath`, which is the name of the package. For example: `@atlaskit/navigation-next` and
-  `@atlaskit/navigation`. With the package path as the key, you can either provide the values as:
-  - `message` **(optional)**, the message to display when the deprecated packages path is used. For
-    example: `multi-select is deprecated. Please use '@atlaskit/select' instead.` Or as:
-  - `imports`, which is an array of named imports to be deprecated. Each named import has the
-    following fields:
-    - `importName`, which is the name of the import to be deprecated. For example: `assistive` and
-      `visuallyHidden`.
-    - `message` **(optional)**, which is the message to display when the deprecated import is used.
-      For example:
-      `The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.`.
-
-```json
-{
-	"@atlaskit/navigation-next": {
-		"message": "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
-	}
-}
-```
-
-```js
-import packageJson from './package.json';
-
-module.exports = {
-	rules: {
-		'@atlaskit/design-system/no-deprecated-imports': [
-			'error',
-			{
-				deprecatedConfig: {
-					'@atlaskit/navigation-next': {
-						message:
-							"navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead.",
-					},
-				},
-			},
-		],
-	},
-};
-```

package/constellation/no-direct-use-of-web-platform-drag-and-drop/usage.mdx

@@ -1,149 +0,0 @@
-# no-direct-use-of-web-platform-drag-and-drop
-
-Block the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.
-
-## Rationale
-
-The web platform has powerful drag and drop functionality built in. However, it is hard to be
-successful with web platform drag and drop due to bugs, inconsistencies and usage friction. Rather
-than leveraging the web platform API directly, the rule enforces the usage of
-[Pragmatic drag and drop](https://atlassian.design/components/pragmatic-drag-and-drop), which allows
-people to easily and successfully leverage web platform drag and drop.
-
-## Examples
-
-This rule marks direct usage of web platform drag events as violations.
-
-### Incorrect
-
-Adding drag related event listeners on intrinsic `react` elements (eg `div`, `span`, `strong` and so
-on).
-
-```tsx
-<div onDragStart={fn}>{children}</div>
-     ^^^^^^^^^^^
-<div onDragEnter={fn}>{children}</div>
-     ^^^^^^^^^^^
-<div onDragLeave={fn}>{children}</div>
-     ^^^^^^^^^^^
-<div onDragOver={fn}>{children}</div>
-     ^^^^^^^^^^^
-<div onDrag={fn}>{children}</div>
-     ^^^^^^
-<div onDrop={fn}>{children}</div>
-     ^^^^^^
-<div onDragEnd={fn}>{children}</div>
-     ^^^^^^^^^
-```
-
-Adding drag related event listeners on our `<Box>` primitive.
-
-```tsx
-import { Box } from '@atlaskit/primitives';
-
-<Box onDragStart={fn}>{children}</Box>
-     ^^^^^^^^^^^
-<Box onDragEnter={fn}>{children}</Box>
-     ^^^^^^^^^^^
-<Box onDragLeave={fn}>{children}</Box>
-     ^^^^^^^^^^^
-<Box onDragOver={fn}>{children}</Box>
-     ^^^^^^^^^^^
-<Box onDrag={fn}>{children}</Box>
-     ^^^^^^
-<Box onDrop={fn}>{children}</Box>
-     ^^^^^^
-<Box onDragEnd={fn}>{children}</Box>
-     ^^^^^^^^^
-```
-
-Binding drag related events using `eventTarget.addEventListener()`
-
-```ts
-window.addEventListener('dragstart', fn);
-                        ^^^^^^^^^^^
-window.addEventListener('dragenter', fn);
-                        ^^^^^^^^^^^
-window.addEventListener('dragleave', fn);
-                        ^^^^^^^^^^^
-window.addEventListener('dragover', fn);
-                        ^^^^^^^^^^
-window.addEventListener('drag', fn);
-                        ^^^^^^
-window.addEventListener('drop', fn);
-                        ^^^^^^
-window.addEventListener('dragend', fn);
-                        ^^^^^^^^^
-```
-
-Binding drag related events using `bind()` from
-[bind-event-listener](https://github.com/alexreardon/bind-event-listener)
-
-```ts
-import {bind} from 'bind-event-listener';
-
-bind(element, { type: 'dragstart', listener: fn });
-                      ^^^^^^^^^^^
-bind(element, { type: 'dragenter', listener: fn });
-                      ^^^^^^^^^^^
-bind(element, { type: 'dragleave', listener: fn });
-                      ^^^^^^^^^^^
-bind(element, { type: 'dragover', listener: fn });
-                      ^^^^^^^^^^
-bind(element, { type: 'drag', listener: fn });
-                      ^^^^^^
-bind(element, { type: 'drop', listener: fn });
-                      ^^^^^^
-bind(element, { type: 'dragend', listener: fn });
-                      ^^^^^^^^^
-```
-
-Binding drag related events using `bindAll()` from
-[bind-event-listener](https://github.com/alexreardon/bind-event-listener)
-
-```ts
-import {bindAll} from 'bind-event-listener';
-
-bindAll(window, [
-  { type: 'dragstart', listener: fn },
-          ^^^^^^^^^^
-  { type: 'dragenter', listener: fn },
-          ^^^^^^^^^^
-  { type: 'dragleave', listener: fn },
-          ^^^^^^^^^^
-  { type: 'dragover', listener: fn },
-          ^^^^^^^^^^
-  { type: 'drag', listener: fn },
-          ^^^^^^
-  { type: 'drop', listener: fn },
-          ^^^^^^
-  { type: 'dragend', listener: fn },
-          ^^^^^^^^^
-]);
-```
-
-### Correct
-
-Leveraging Pragmatic drag and drop for web platform drag and drop.
-
-```ts
-import { monitor } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-
-monitor({
-	onGenerateDragPreview: fn,
-	onDragStart: fn,
-	onDropTargetChange: fn,
-	onDrag: fn,
-	onDrop: fn,
-});
-```
-
-> See the
-> [Pragmatic drag and drop documentation](https://atlassian.design/components/pragmatic-drag-and-drop)
-> for more information about it's usage.
-
-Using blocked JSX attributes on custom `react` components
-
-```tsx
-<MyComponent onDragStart={fn}>
-```

package/constellation/no-empty-styled-expression/usage.mdx

@@ -1,82 +0,0 @@
-# no-empty-styled-expression
-
-Disallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS
-library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
-
-If Compiled is used in the file, passing an empty object or no object at all causes Compiled to
-build extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced
-performance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in
-the empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.
-
-## Examples
-
-### Incorrect
-
-```tsx
-const EmptyStyledExpression = styled.div();
-
-const EmptyStyledExpressionArgument = styled.div({});
-
-const EmptyStyledExpressionArgument = styled.div([]);
-```
-
-### Correct
-
-```tsx
-const Wrapper = styled.div({
-	backgroundColor: 'red',
-	MyComponent: {
-		backgroundColor: 'green',
-	},
-});
-```
-
-## What to do instead?
-
-### Use elements directly
-
-```diff
-- const Wrapper = styled.div({});
-
-   function App() {
--    return <Wrapper>hello world</Wrapper>;
-+    return <div>hello world</div>;
-  }
-```
-
-### Use a React fragment
-
-```diff
-- const Wrapper = styled.div({});
-
-   function App() {
--    return <Wrapper>hello world</Wrapper>;
-+    return <>hello world</>;
-  }
-```
-
-## Options
-
-### importSources
-
-By default, this rule will check `styled` usages from:
-
-- `@atlaskit/css`
-- `@atlaskit/primitives`
-- `@compiled/react`
-- `@emotion/react`
-- `@emotion/core`
-- `@emotion/styled`
-- `styled-components`
-
-To change this list of libraries, you can define a custom set of `importSources`, which accepts an
-array of package names (strings).
-
-```tsx
-// [{ importSources: ['other-lib'] }]
-
-import { styled } from 'other-lib';
-
-// Invalid!
-export const Component = styled.div({});
-```

package/constellation/no-exported-css/usage.mdx

@@ -1,55 +0,0 @@
-# no-exported-css
-
-Disallows `css` export declarations that originate from a CSS-in-JS library, including
-`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
-
-In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `css` declarations may result in
-unexpected errors when imported, because its value will be `null` at runtime. Additionally,
-co-locating `css` definitions with their usage is considered best practice in order to improve code
-readability and build performance.
-
-## Examples
-
-### Incorrect
-
-```tsx
-import { css } from '@compiled/react';
-
-export const styles = css({});
-
-export default css({});
-```
-
-### Correct
-
-```tsx
-import { css } from '@compiled/react';
-
-const styles = css({});
-```
-
-## Options
-
-### importSources
-
-By default, this rule will check `css` usages from:
-
-- `@atlaskit/css`
-- `@atlaskit/primitives`
-- `@compiled/react`
-- `@emotion/react`
-- `@emotion/core`
-- `@emotion/styled`
-- `styled-components`
-
-To change this list of libraries, you can define a custom set of `importSources`, which accepts an
-array of package names (strings).
-
-```tsx
-// [{ importSources: ['other-lib'] }]
-
-import { css } from 'other-lib';
-
-// Invalid!
-export const styles = css({});
-```

package/constellation/no-exported-keyframes/usage.mdx

@@ -1,55 +0,0 @@
-# no-exported-keyframes
-
-Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including
-`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
-
-In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `keyframes` declarations may result
-in unexpected errors when imported, because its value will be `null` at runtime. Additionally,
-co-locating `keyframes` definitions with their usage is considered best practice in order to improve
-code readability and build performance.
-
-## Examples
-
-### Incorrect
-
-```tsx
-import { keyframes } from '@compiled/react';
-
-export const animation = keyframes({});
-
-export default keyframes({});
-```
-
-### Correct
-
-```tsx
-import { keyframes } from '@compiled/react';
-
-const animation = keyframes({});
-```
-
-## Options
-
-### importSources
-
-By default, this rule will check `keyframes` usages from:
-
-- `@atlaskit/css`
-- `@atlaskit/primitives`
-- `@compiled/react`
-- `@emotion/react`
-- `@emotion/core`
-- `@emotion/styled`
-- `styled-components`
-
-To change this list of libraries, you can define a custom set of `importSources`, which accepts an
-array of package names (strings).
-
-```tsx
-// [{ importSources: ['other-lib'] }]
-
-import { keyframes } from 'other-lib';
-
-// Invalid!
-export const animation = keyframes({});
-```

package/constellation/no-html-anchor/usage.mdx

@@ -1,46 +0,0 @@
-# no-html-anchor
-
-Don't use native HTML anchors. The Atlassian Design System provides ready-made link components that
-include event tracking, automatic router configuration, ensure accessible implementations, and
-provide access to ADS styling features like design tokens.
-
-Use Atlassian Design System components such as the [Link](/components/link/) or
-[LinkButton](/components/button/link-button/) components when suitable. There may also be other
-components better-suited depending on the use case. If these components aren't suitable, use the
-[Anchor primitive](/components/primitives/anchor/) which helps you build custom links with Atlassian
-Design System styling.
-
-## Examples
-
-This rule marks code as violations when it finds native HTML anchor elements.
-
-### Incorrect
-
-```jsx
-<a href="/">
- ^ Using a native HTML `<a>`
-  Hello, World!
-</a>
-
-<div role="link" tabIndex="0" data-href="https://www.atlassian.com">
-     ^^^^^^^^^^^ Using `role="link"` to create links
-  Hello, World!
-</div>
-
-```
-
-### Correct
-
-```jsx
-import Anchor from '@atlaskit/primitives/anchor';
-
-<Anchor href="/">Hello, World!</Anchor>;
-
-import Link from '@atlaskit/link';
-
-<Link href="/">Hello, World!</Link>;
-
-import { LinkButton } from '@atlaskit/button/new';
-
-<LinkButton href="/">Hello, World!</LinkButton>;
-```