@atlaskit/eslint-plugin-design-system 10.9.0 → 10.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +1 -0
  3. package/dist/cjs/presets/all.codegen.js +2 -1
  4. package/dist/cjs/rules/ensure-design-token-usage/index.js +199 -227
  5. package/dist/cjs/rules/index.codegen.js +3 -1
  6. package/dist/cjs/rules/no-custom-icons/checks/has-prop.js +12 -0
  7. package/dist/cjs/rules/no-custom-icons/checks/is-from-import-source.js +42 -0
  8. package/dist/cjs/rules/no-custom-icons/checks/is-imported-jsx-element.js +10 -0
  9. package/dist/cjs/rules/no-custom-icons/index.js +67 -0
  10. package/dist/cjs/rules/no-legacy-icons/checks.js +63 -67
  11. package/dist/cjs/rules/no-legacy-icons/helpers.js +29 -24
  12. package/dist/cjs/rules/no-legacy-icons/index.js +15 -88
  13. package/dist/cjs/rules/use-tokens-typography/index.js +4 -8
  14. package/dist/cjs/rules/utils/error-boundary.js +58 -11
  15. package/dist/es2019/presets/all.codegen.js +2 -1
  16. package/dist/es2019/rules/ensure-design-token-usage/index.js +16 -30
  17. package/dist/es2019/rules/index.codegen.js +3 -1
  18. package/dist/es2019/rules/no-custom-icons/checks/has-prop.js +4 -0
  19. package/dist/es2019/rules/no-custom-icons/checks/is-from-import-source.js +23 -0
  20. package/dist/es2019/rules/no-custom-icons/checks/is-imported-jsx-element.js +4 -0
  21. package/dist/es2019/rules/no-custom-icons/index.js +61 -0
  22. package/dist/es2019/rules/no-legacy-icons/checks.js +20 -33
  23. package/dist/es2019/rules/no-legacy-icons/helpers.js +24 -21
  24. package/dist/es2019/rules/no-legacy-icons/index.js +15 -70
  25. package/dist/es2019/rules/use-tokens-typography/index.js +3 -7
  26. package/dist/es2019/rules/utils/error-boundary.js +55 -11
  27. package/dist/esm/presets/all.codegen.js +2 -1
  28. package/dist/esm/rules/ensure-design-token-usage/index.js +199 -227
  29. package/dist/esm/rules/index.codegen.js +3 -1
  30. package/dist/esm/rules/no-custom-icons/checks/has-prop.js +6 -0
  31. package/dist/esm/rules/no-custom-icons/checks/is-from-import-source.js +36 -0
  32. package/dist/esm/rules/no-custom-icons/checks/is-imported-jsx-element.js +4 -0
  33. package/dist/esm/rules/no-custom-icons/index.js +61 -0
  34. package/dist/esm/rules/no-legacy-icons/checks.js +64 -68
  35. package/dist/esm/rules/no-legacy-icons/helpers.js +28 -23
  36. package/dist/esm/rules/no-legacy-icons/index.js +15 -88
  37. package/dist/esm/rules/use-tokens-typography/index.js +4 -8
  38. package/dist/esm/rules/utils/error-boundary.js +56 -10
  39. package/dist/types/index.codegen.d.ts +1 -0
  40. package/dist/types/presets/all.codegen.d.ts +2 -1
  41. package/dist/types/rules/index.codegen.d.ts +1 -0
  42. package/dist/types/rules/no-custom-icons/checks/has-prop.d.ts +2 -0
  43. package/dist/types/rules/no-custom-icons/checks/is-from-import-source.d.ts +8 -0
  44. package/dist/types/rules/no-custom-icons/checks/is-imported-jsx-element.d.ts +8 -0
  45. package/dist/types/rules/no-custom-icons/index.d.ts +3 -0
  46. package/dist/types/rules/no-legacy-icons/helpers.d.ts +3 -13
  47. package/dist/types/rules/no-legacy-icons/index.d.ts +1 -2
  48. package/dist/types/rules/utils/error-boundary.d.ts +8 -5
  49. package/dist/types-ts4.5/index.codegen.d.ts +1 -0
  50. package/dist/types-ts4.5/presets/all.codegen.d.ts +2 -1
  51. package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -0
  52. package/dist/types-ts4.5/rules/no-custom-icons/checks/has-prop.d.ts +2 -0
  53. package/dist/types-ts4.5/rules/no-custom-icons/checks/is-from-import-source.d.ts +8 -0
  54. package/dist/types-ts4.5/rules/no-custom-icons/checks/is-imported-jsx-element.d.ts +8 -0
  55. package/dist/types-ts4.5/rules/no-custom-icons/index.d.ts +3 -0
  56. package/dist/types-ts4.5/rules/no-legacy-icons/helpers.d.ts +3 -13
  57. package/dist/types-ts4.5/rules/no-legacy-icons/index.d.ts +1 -2
  58. package/dist/types-ts4.5/rules/utils/error-boundary.d.ts +8 -5
  59. package/package.json +2 -2
  60. package/constellation/consistent-css-prop-usage/usage.mdx +0 -210
  61. package/constellation/ensure-design-token-usage/usage.mdx +0 -77
  62. package/constellation/ensure-design-token-usage-preview/usage.mdx +0 -6
  63. package/constellation/icon-label/usage.mdx +0 -41
  64. package/constellation/index/props.mdx +0 -30
  65. package/constellation/index/usage.mdx +0 -56
  66. package/constellation/no-banned-imports/usage.mdx +0 -19
  67. package/constellation/no-css-tagged-template-expression/usage.mdx +0 -71
  68. package/constellation/no-deprecated-apis/usage.mdx +0 -82
  69. package/constellation/no-deprecated-design-token-usage/usage.mdx +0 -30
  70. package/constellation/no-deprecated-imports/usage.mdx +0 -66
  71. package/constellation/no-direct-use-of-web-platform-drag-and-drop/usage.mdx +0 -149
  72. package/constellation/no-empty-styled-expression/usage.mdx +0 -82
  73. package/constellation/no-exported-css/usage.mdx +0 -55
  74. package/constellation/no-exported-keyframes/usage.mdx +0 -55
  75. package/constellation/no-html-anchor/usage.mdx +0 -46
  76. package/constellation/no-html-button/usage.mdx +0 -52
  77. package/constellation/no-invalid-css-map/usage.mdx +0 -210
  78. package/constellation/no-keyframes-tagged-template-expression/usage.mdx +0 -80
  79. package/constellation/no-legacy-icons/usage.mdx +0 -42
  80. package/constellation/no-margin/usage.mdx +0 -21
  81. package/constellation/no-nested-styles/usage.mdx +0 -47
  82. package/constellation/no-physical-properties/usage.mdx +0 -53
  83. package/constellation/no-styled-tagged-template-expression/usage.mdx +0 -135
  84. package/constellation/no-unsafe-design-token-usage/usage.mdx +0 -50
  85. package/constellation/no-unsafe-style-overrides/usage.mdx +0 -52
  86. package/constellation/no-unsupported-drag-and-drop-libraries/usage.mdx +0 -23
  87. package/constellation/prefer-primitives/usage.mdx +0 -32
  88. package/constellation/use-button-group-label/usage.mdx +0 -60
  89. package/constellation/use-drawer-label/usage.mdx +0 -55
  90. package/constellation/use-heading/usage.mdx +0 -31
  91. package/constellation/use-heading-level-in-spotlight-card/usage.mdx +0 -21
  92. package/constellation/use-href-in-link-item/usage.mdx +0 -19
  93. package/constellation/use-latest-xcss-syntax/usage.mdx +0 -33
  94. package/constellation/use-latest-xcss-syntax-typography/usage.mdx +0 -34
  95. package/constellation/use-menu-section-title/usage.mdx +0 -55
  96. package/constellation/use-popup-label/usage.mdx +0 -56
  97. package/constellation/use-primitives/usage.mdx +0 -78
  98. package/constellation/use-primitives-text/usage.mdx +0 -35
  99. package/constellation/use-tokens-space/usage.mdx +0 -34
  100. package/constellation/use-tokens-typography/usage.mdx +0 -55
  101. package/constellation/use-visually-hidden/usage.mdx +0 -35
package/constellation/index/usage.mdx DELETED
@@ -1,56 +0,0 @@
1
- ---
2
- order: 0
3
- ---
4
-
5
- This plugin contains rules that should be used when working with the
6
- [Atlassian Design System](https://atlassian.design).
7
-
8
- ## Rules
9
-
10
- <!-- START_RULE_TABLE_CODEGEN -->
11
- <!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
12
-
13
- | Rule | Description | Recommended | Fixable | Suggestions |
14
- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
15
- | <a href="/components/eslint-plugin-design-system/consistent-css-prop-usage/usage">consistent-css-prop-usage</a> | Ensures consistency with `css` and `xcss` prop usages | Yes | Yes | |
16
- | <a href="/components/eslint-plugin-design-system/ensure-design-token-usage/usage">ensure-design-token-usage</a> | Enforces usage of design tokens rather than hard-coded values. | Yes | Yes | Yes |
17
- | <a href="/components/eslint-plugin-design-system/ensure-design-token-usage-preview/usage">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values. | | Yes | Yes |
18
- | <a href="/components/eslint-plugin-design-system/icon-label/usage">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |
19
- | <a href="/components/eslint-plugin-design-system/no-banned-imports/usage">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
20
- | <a href="/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage">no-css-tagged-template-expression</a> | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
21
- | <a href="/components/eslint-plugin-design-system/no-deprecated-apis/usage">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
22
- | <a href="/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |
23
- | <a href="/components/eslint-plugin-design-system/no-deprecated-imports/usage">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | | |
24
- | <a href="/components/eslint-plugin-design-system/no-direct-use-of-web-platform-drag-and-drop/usage">no-direct-use-of-web-platform-drag-and-drop</a> | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop) | Yes | | |
25
- | <a href="/components/eslint-plugin-design-system/no-empty-styled-expression/usage">no-empty-styled-expression</a> | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements). | Yes | | |
26
- | <a href="/components/eslint-plugin-design-system/no-exported-css/usage">no-exported-css</a> | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable. | Yes | | |
27
- | <a href="/components/eslint-plugin-design-system/no-exported-keyframes/usage">no-exported-keyframes</a> | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable. | Yes | | |
28
- | <a href="/components/eslint-plugin-design-system/no-html-anchor/usage">no-html-anchor</a> | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components. | | | |
29
- | <a href="/components/eslint-plugin-design-system/no-html-button/usage">no-html-button</a> | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components. | Yes | | |
30
- | <a href="/components/eslint-plugin-design-system/no-invalid-css-map/usage">no-invalid-css-map</a> | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking. | Yes | | |
31
- | <a href="/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage">no-keyframes-tagged-template-expression</a> | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
32
- | <a href="/components/eslint-plugin-design-system/no-legacy-icons/usage">no-legacy-icons</a> | Enforces no legacy icons are used. | | | |
33
- | <a href="/components/eslint-plugin-design-system/no-margin/usage">no-margin</a> | Disallow using the margin CSS property. | | | |
34
- | <a href="/components/eslint-plugin-design-system/no-nested-styles/usage">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
35
- | <a href="/components/eslint-plugin-design-system/no-physical-properties/usage">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
36
- | <a href="/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage">no-styled-tagged-template-expression</a> | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
37
- | <a href="/components/eslint-plugin-design-system/no-unsafe-design-token-usage/usage">no-unsafe-design-token-usage</a> | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |
38
- | <a href="/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage">no-unsafe-style-overrides</a> | Discourage usage of unsafe style overrides used against the Atlassian Design System. | Yes | | |
39
- | <a href="/components/eslint-plugin-design-system/no-unsupported-drag-and-drop-libraries/usage">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |
40
- | <a href="/components/eslint-plugin-design-system/prefer-primitives/usage">prefer-primitives</a> | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule. | | | |
41
- | <a href="/components/eslint-plugin-design-system/use-button-group-label/usage">use-button-group-label</a> | Ensures button groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |
42
- | <a href="/components/eslint-plugin-design-system/use-drawer-label/usage">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |
43
- | <a href="/components/eslint-plugin-design-system/use-heading/usage">use-heading</a> | Encourage the usage of heading components. | | Yes | Yes |
44
- | <a href="/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a> | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | |
45
- | <a href="/components/eslint-plugin-design-system/use-href-in-link-item/usage">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |
46
- | <a href="/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage">use-latest-xcss-syntax</a> | Enforces usage of space design tokens rather than hard-coded values in xcss. | Yes | Yes | |
47
- | <a href="/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage">use-latest-xcss-syntax-typography</a> | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead. | Yes | Yes | |
48
- | <a href="/components/eslint-plugin-design-system/use-menu-section-title/usage">use-menu-section-title</a> | Encourages makers to provide accessible title for Atlassian Design System Menu Section component. | Yes | | Yes |
49
- | <a href="/components/eslint-plugin-design-system/use-popup-label/usage">use-popup-label</a> | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes |
50
- | <a href="/components/eslint-plugin-design-system/use-primitives/usage">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
51
- | <a href="/components/eslint-plugin-design-system/use-primitives-text/usage">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
52
- | <a href="/components/eslint-plugin-design-system/use-tokens-space/usage">use-tokens-space</a> | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes |
53
- | <a href="/components/eslint-plugin-design-system/use-tokens-typography/usage">use-tokens-typography</a> | Enforces usage of design tokens for typography properties rather than hard-coded values. | | Yes | Yes |
54
- | <a href="/components/eslint-plugin-design-system/use-visually-hidden/usage">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
55
-
56
- <!-- END_RULE_TABLE_CODEGEN -->
package/constellation/no-banned-imports/usage.mdx DELETED
@@ -1,19 +0,0 @@
1
- # no-banned-imports
2
-
3
- Using private or experimental packages is dangerous as they are not supported across major versions
4
- meaning you will not be able to migrate easily causing friction for yourself and the Atlassian
5
- Design System team.
6
-
7
- ## Examples
8
-
9
- Anything that is considered private or experimental will be marked as violations.
10
-
11
- ### Incorrect
12
-
13
- ```ts
14
- import noop from '@atlaskit/ds-lib/noop';
15
- ^^^^^^^^^^^^^^^^^^^^^
16
-
17
- import { Text } from '@atlaskit/ds-explorations';
18
- ^^^^^^^^^^^^^^^^^^^^^^^^^
19
- ```
package/constellation/no-css-tagged-template-expression/usage.mdx DELETED
@@ -1,71 +0,0 @@
1
- # no-css-tagged-template-expression
2
-
3
- Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including
4
- `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
5
-
6
- Tagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix
7
- ` css`` ` to the preferred `css({})` call expression syntax.
8
-
9
- Thank you to the
10
- [Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-css-tagged-template-expression)
11
- from which this was ported.
12
-
13
- ## Examples
14
-
15
- ### Incorrect
16
-
17
- ```js
18
- import { css } from '@emotion/react';
19
-
20
- css`
21
- color: blue;
22
- `;
23
-
24
- const styles = css`
25
- color: blue;
26
- font-weight: 500;
27
- `;
28
- ```
29
-
30
- ### Correct
31
-
32
- ```js
33
- import { css } from '@emotion/react';
34
-
35
- css({ color: 'blue' });
36
-
37
- const styles = css({
38
- color: 'blue',
39
- fontWeight: 500,
40
- });
41
- ```
42
-
43
- ## Options
44
-
45
- ### importSources
46
-
47
- By default, this rule will check `css` usages from:
48
-
49
- - `@atlaskit/css`
50
- - `@atlaskit/primitives`
51
- - `@compiled/react`
52
- - `@emotion/react`
53
- - `@emotion/core`
54
- - `@emotion/styled`
55
- - `styled-components`
56
-
57
- To change this list of libraries, you can define a custom set of `importSources`, which accepts an
58
- array of package names (strings).
59
-
60
- ```tsx
61
- // [{ importSources: ['other-lib'] }]
62
-
63
- import { css } from 'other-lib';
64
-
65
- // Invalid!
66
- export const styles = css``;
67
- ```
68
-
69
- ## Limitations
70
-
71
- - Comments are not auto-fixable. You will need to manually convert usages containing functions.
package/constellation/no-deprecated-apis/usage.mdx DELETED
@@ -1,82 +0,0 @@
1
- # no-deprecated-apis
2
-
3
- Props across the Atlassian Design System can be deprecated when they are deemed no-longer fit for
4
- purporse or dangerous and risk effective use at scale.
5
-
6
- ## Examples
7
-
8
- Anything that can be used as props from Atlassian Design System components can be violations when
9
- marked as deprecated.
10
-
11
- ### Incorrect
12
-
13
- ```tsx
14
- <ButtonItem cssFn={cssFn()} />
15
- ^^^^
16
-
17
- <Drawer overrides={overrides} />
18
- ^^^^^^^^^
19
- ```
20
-
21
- ## Options
22
-
23
- The rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal
24
- config. If provided the rule will use the passed in config instead.
25
-
26
- ### deprecatedConfig
27
-
28
- The following fields can be defined in the config:
29
-
30
- - `deprecatedProp`, which is the deprecated props. Each prop has the following fields:
31
- - `moduleSpecifier`, which is the module specifier of the package in which the prop was
32
- deprecated. For example: `@atlaskit/button`.
33
- - `namedSpecifier` **(optional)**, which is an array of named specifiers of the package in which
34
- the prop was deprecated. For example: `Button`.
35
- - `actionableVersion` **(optional)**, which is the version of the package in which the prop can be
36
- actioned on. For example: `1.0.0`.
37
-
38
- ```json
39
- {
40
- "cssFn": [
41
- {
42
- "moduleSpecifier": "@atlaskit/menu"
43
- }
44
- ]
45
- }
46
- ```
47
-
48
- ```js
49
- import { configs } from '@atlaskit/eslint-plugin-design-system';
50
-
51
- module.exports = {
52
- rules: {
53
- '@atlaskit/design-system/no-deprecated-api': [
54
- 'error',
55
- {
56
- deprecatedConfig: {
57
- cssFn: [
58
- {
59
- moduleSpecifier: '@atlaskit/menu',
60
- },
61
- ],
62
- },
63
- },
64
- ],
65
- },
66
- };
67
- ```
68
-
69
- The plugin also provides a `filterActionableDeprecations` util function that accepts the
70
- `deprecated APIs config` and your root `package.json` as params and will filter the default
71
- deprecated APIs config based on the package versions installed.
72
-
73
- ```js
74
- import { configs, filterActionableDeprecations } from '@atlaskit/eslint-plugin-design-system';
75
- import packageJson from './package.json';
76
-
77
- rules: {
78
- '@atlaskit/design-system/no-deprecated-api': ['error', {
79
- 'deprecatedConfig': filterActionableDeprecations(configs.deprecatedConfig, packageJson),
80
- }]
81
- }
82
- ```
package/constellation/no-deprecated-design-token-usage/usage.mdx DELETED
@@ -1,30 +0,0 @@
1
- # no-deprecated-design-token-usage
2
-
3
- Using deprecated design tokens is dangerous as they will eventually be deleted after the sunset
4
- period. This rule helps you move to non-deprecated design tokens.
5
-
6
- ## Examples
7
-
8
- This rule will mark usage of deprecated design tokens as violations.
9
-
10
- ## Incorrect
11
-
12
- ```js
13
- import { token } from '@atlaskit/tokens';
14
-
15
- css({ color: token('i.am.deprecated') });
16
- ^^^^^^^^^^^^^^^
17
- css({ color: token('i.am.a.token') });
18
- ^^^^^^^^^^^^^
19
- ```
20
-
21
- ## Options
22
-
23
- It's recommended to set this rule to "warn" to allow for new and old tokens to exist side-by-side
24
- for the duration of the deprecation period and avoid big-bang migrations.
25
-
26
- Once the deprecation period is over for a design token it will be moved into `deleted` state at
27
- which point the counterpart of this rule `no-unsafe-design-token-usage` will mark violations as
28
- errors.
29
-
30
- Running `eslint --fix` will automatically apply replacement tokens if present.
package/constellation/no-deprecated-imports/usage.mdx DELETED
@@ -1,66 +0,0 @@
1
- # no-deprecated-imports
2
-
3
- Packages across the Atlassian Design System can be deprecated when they are deemed no-longer fit for
4
- purporse or dangerous and risk effective use at scale.
5
-
6
- ## Examples
7
-
8
- This rule will mark usage of deprecated modules as violations.
9
-
10
- ### Incorrect
11
-
12
- ```ts
13
- import Item from '@atlaskit/item';
14
- ^^^^^^^^^^^^^^
15
- import GlobalNav from '@atlaskit/global-navigation';
16
- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
17
- ```
18
-
19
- ## Options
20
-
21
- The rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal
22
- config. If provided the rule will use the passed in config instead.
23
-
24
- ### deprecatedConfig
25
-
26
- The following fields can be defined in the config:
27
-
28
- - `packagePath`, which is the name of the package. For example: `@atlaskit/navigation-next` and
29
- `@atlaskit/navigation`. With the package path as the key, you can either provide the values as:
30
- - `message` **(optional)**, the message to display when the deprecated packages path is used. For
31
- example: `multi-select is deprecated. Please use '@atlaskit/select' instead.` Or as:
32
- - `imports`, which is an array of named imports to be deprecated. Each named import has the
33
- following fields:
34
- - `importName`, which is the name of the import to be deprecated. For example: `assistive` and
35
- `visuallyHidden`.
36
- - `message` **(optional)**, which is the message to display when the deprecated import is used.
37
- For example:
38
- `The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.`.
39
-
40
- ```json
41
- {
42
- "@atlaskit/navigation-next": {
43
- "message": "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
44
- }
45
- }
46
- ```
47
-
48
- ```js
49
- import packageJson from './package.json';
50
-
51
- module.exports = {
52
- rules: {
53
- '@atlaskit/design-system/no-deprecated-imports': [
54
- 'error',
55
- {
56
- deprecatedConfig: {
57
- '@atlaskit/navigation-next': {
58
- message:
59
- "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead.",
60
- },
61
- },
62
- },
63
- ],
64
- },
65
- };
66
- ```
package/constellation/no-direct-use-of-web-platform-drag-and-drop/usage.mdx DELETED
@@ -1,149 +0,0 @@
1
- # no-direct-use-of-web-platform-drag-and-drop
2
-
3
- Block the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.
4
-
5
- ## Rationale
6
-
7
- The web platform has powerful drag and drop functionality built in. However, it is hard to be
8
- successful with web platform drag and drop due to bugs, inconsistencies and usage friction. Rather
9
- than leveraging the web platform API directly, the rule enforces the usage of
10
- [Pragmatic drag and drop](https://atlassian.design/components/pragmatic-drag-and-drop), which allows
11
- people to easily and successfully leverage web platform drag and drop.
12
-
13
- ## Examples
14
-
15
- This rule marks direct usage of web platform drag events as violations.
16
-
17
- ### Incorrect
18
-
19
- Adding drag related event listeners on intrinsic `react` elements (eg `div`, `span`, `strong` and so
20
- on).
21
-
22
- ```tsx
23
- <div onDragStart={fn}>{children}</div>
24
- ^^^^^^^^^^^
25
- <div onDragEnter={fn}>{children}</div>
26
- ^^^^^^^^^^^
27
- <div onDragLeave={fn}>{children}</div>
28
- ^^^^^^^^^^^
29
- <div onDragOver={fn}>{children}</div>
30
- ^^^^^^^^^^^
31
- <div onDrag={fn}>{children}</div>
32
- ^^^^^^
33
- <div onDrop={fn}>{children}</div>
34
- ^^^^^^
35
- <div onDragEnd={fn}>{children}</div>
36
- ^^^^^^^^^
37
- ```
38
-
39
- Adding drag related event listeners on our `<Box>` primitive.
40
-
41
- ```tsx
42
- import { Box } from '@atlaskit/primitives';
43
-
44
- <Box onDragStart={fn}>{children}</Box>
45
- ^^^^^^^^^^^
46
- <Box onDragEnter={fn}>{children}</Box>
47
- ^^^^^^^^^^^
48
- <Box onDragLeave={fn}>{children}</Box>
49
- ^^^^^^^^^^^
50
- <Box onDragOver={fn}>{children}</Box>
51
- ^^^^^^^^^^^
52
- <Box onDrag={fn}>{children}</Box>
53
- ^^^^^^
54
- <Box onDrop={fn}>{children}</Box>
55
- ^^^^^^
56
- <Box onDragEnd={fn}>{children}</Box>
57
- ^^^^^^^^^
58
- ```
59
-
60
- Binding drag related events using `eventTarget.addEventListener()`
61
-
62
- ```ts
63
- window.addEventListener('dragstart', fn);
64
- ^^^^^^^^^^^
65
- window.addEventListener('dragenter', fn);
66
- ^^^^^^^^^^^
67
- window.addEventListener('dragleave', fn);
68
- ^^^^^^^^^^^
69
- window.addEventListener('dragover', fn);
70
- ^^^^^^^^^^
71
- window.addEventListener('drag', fn);
72
- ^^^^^^
73
- window.addEventListener('drop', fn);
74
- ^^^^^^
75
- window.addEventListener('dragend', fn);
76
- ^^^^^^^^^
77
- ```
78
-
79
- Binding drag related events using `bind()` from
80
- [bind-event-listener](https://github.com/alexreardon/bind-event-listener)
81
-
82
- ```ts
83
- import {bind} from 'bind-event-listener';
84
-
85
- bind(element, { type: 'dragstart', listener: fn });
86
- ^^^^^^^^^^^
87
- bind(element, { type: 'dragenter', listener: fn });
88
- ^^^^^^^^^^^
89
- bind(element, { type: 'dragleave', listener: fn });
90
- ^^^^^^^^^^^
91
- bind(element, { type: 'dragover', listener: fn });
92
- ^^^^^^^^^^
93
- bind(element, { type: 'drag', listener: fn });
94
- ^^^^^^
95
- bind(element, { type: 'drop', listener: fn });
96
- ^^^^^^
97
- bind(element, { type: 'dragend', listener: fn });
98
- ^^^^^^^^^
99
- ```
100
-
101
- Binding drag related events using `bindAll()` from
102
- [bind-event-listener](https://github.com/alexreardon/bind-event-listener)
103
-
104
- ```ts
105
- import {bindAll} from 'bind-event-listener';
106
-
107
- bindAll(window, [
108
- { type: 'dragstart', listener: fn },
109
- ^^^^^^^^^^
110
- { type: 'dragenter', listener: fn },
111
- ^^^^^^^^^^
112
- { type: 'dragleave', listener: fn },
113
- ^^^^^^^^^^
114
- { type: 'dragover', listener: fn },
115
- ^^^^^^^^^^
116
- { type: 'drag', listener: fn },
117
- ^^^^^^
118
- { type: 'drop', listener: fn },
119
- ^^^^^^
120
- { type: 'dragend', listener: fn },
121
- ^^^^^^^^^
122
- ]);
123
- ```
124
-
125
- ### Correct
126
-
127
- Leveraging Pragmatic drag and drop for web platform drag and drop.
128
-
129
- ```ts
130
- import { monitor } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
131
-
132
- monitor({
133
- onGenerateDragPreview: fn,
134
- onDragStart: fn,
135
- onDropTargetChange: fn,
136
- onDrag: fn,
137
- onDrop: fn,
138
- });
139
- ```
140
-
141
- > See the
142
- > [Pragmatic drag and drop documentation](https://atlassian.design/components/pragmatic-drag-and-drop)
143
- > for more information about it's usage.
144
-
145
- Using blocked JSX attributes on custom `react` components
146
-
147
- ```tsx
148
- <MyComponent onDragStart={fn}>
149
- ```
package/constellation/no-empty-styled-expression/usage.mdx DELETED
@@ -1,82 +0,0 @@
1
- # no-empty-styled-expression
2
-
3
- Disallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS
4
- library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
5
-
6
- If Compiled is used in the file, passing an empty object or no object at all causes Compiled to
7
- build extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced
8
- performance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in
9
- the empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.
10
-
11
- ## Examples
12
-
13
- ### Incorrect
14
-
15
- ```tsx
16
- const EmptyStyledExpression = styled.div();
17
-
18
- const EmptyStyledExpressionArgument = styled.div({});
19
-
20
- const EmptyStyledExpressionArgument = styled.div([]);
21
- ```
22
-
23
- ### Correct
24
-
25
- ```tsx
26
- const Wrapper = styled.div({
27
- backgroundColor: 'red',
28
- MyComponent: {
29
- backgroundColor: 'green',
30
- },
31
- });
32
- ```
33
-
34
- ## What to do instead?
35
-
36
- ### Use elements directly
37
-
38
- ```diff
39
- - const Wrapper = styled.div({});
40
-
41
- function App() {
42
- - return <Wrapper>hello world</Wrapper>;
43
- + return <div>hello world</div>;
44
- }
45
- ```
46
-
47
- ### Use a React fragment
48
-
49
- ```diff
50
- - const Wrapper = styled.div({});
51
-
52
- function App() {
53
- - return <Wrapper>hello world</Wrapper>;
54
- + return <>hello world</>;
55
- }
56
- ```
57
-
58
- ## Options
59
-
60
- ### importSources
61
-
62
- By default, this rule will check `styled` usages from:
63
-
64
- - `@atlaskit/css`
65
- - `@atlaskit/primitives`
66
- - `@compiled/react`
67
- - `@emotion/react`
68
- - `@emotion/core`
69
- - `@emotion/styled`
70
- - `styled-components`
71
-
72
- To change this list of libraries, you can define a custom set of `importSources`, which accepts an
73
- array of package names (strings).
74
-
75
- ```tsx
76
- // [{ importSources: ['other-lib'] }]
77
-
78
- import { styled } from 'other-lib';
79
-
80
- // Invalid!
81
- export const Component = styled.div({});
82
- ```
package/constellation/no-exported-css/usage.mdx DELETED
@@ -1,55 +0,0 @@
1
- # no-exported-css
2
-
3
- Disallows `css` export declarations that originate from a CSS-in-JS library, including
4
- `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
5
-
6
- In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `css` declarations may result in
7
- unexpected errors when imported, because its value will be `null` at runtime. Additionally,
8
- co-locating `css` definitions with their usage is considered best practice in order to improve code
9
- readability and build performance.
10
-
11
- ## Examples
12
-
13
- ### Incorrect
14
-
15
- ```tsx
16
- import { css } from '@compiled/react';
17
-
18
- export const styles = css({});
19
-
20
- export default css({});
21
- ```
22
-
23
- ### Correct
24
-
25
- ```tsx
26
- import { css } from '@compiled/react';
27
-
28
- const styles = css({});
29
- ```
30
-
31
- ## Options
32
-
33
- ### importSources
34
-
35
- By default, this rule will check `css` usages from:
36
-
37
- - `@atlaskit/css`
38
- - `@atlaskit/primitives`
39
- - `@compiled/react`
40
- - `@emotion/react`
41
- - `@emotion/core`
42
- - `@emotion/styled`
43
- - `styled-components`
44
-
45
- To change this list of libraries, you can define a custom set of `importSources`, which accepts an
46
- array of package names (strings).
47
-
48
- ```tsx
49
- // [{ importSources: ['other-lib'] }]
50
-
51
- import { css } from 'other-lib';
52
-
53
- // Invalid!
54
- export const styles = css({});
55
- ```