diff --git a/carbon-components-ember/.eslintrc.cjs b/carbon-components-ember/.eslintrc.cjs index e59745ec..eea7cae0 100644 --- a/carbon-components-ember/.eslintrc.cjs +++ b/carbon-components-ember/.eslintrc.cjs @@ -21,6 +21,10 @@ module.exports = { }, rules: {}, overrides: [ + { + files: ['**/*.{gts,gjs}'], + parser: 'ember-eslint-parser', + }, // node files { files: [ diff --git a/index.d.ts b/carbon-components-ember/index.d.ts similarity index 100% rename from index.d.ts rename to carbon-components-ember/index.d.ts diff --git a/carbon-components-ember/package.json b/carbon-components-ember/package.json index 1c0845bb..7e7c4908 100644 --- a/carbon-components-ember/package.json +++ b/carbon-components-ember/package.json @@ -31,7 +31,6 @@ "test": "echo 'A v2 addon does not have tests, run tests in test-app'" }, "dependencies": { - "@embroider/addon-shim": "^1.0.0", "@ascua/arrays": "^0.0.237", "@babel/plugin-syntax-decorators": "^7.22.5", "@carbon/charts": "^1.11.2", @@ -46,10 +45,12 @@ "@carbon/styles": "^1.31.2", "@carbon/themes": "^11.20.0", "@carbon/type": "^11.19.0", + "@embroider/addon-shim": "^1.8.7", "@eslint/js": "^8.41.0", "@gavant/glint-template-types": "^0.3.3", "@glimmer/component": "^1.1.2", "@glimmer/tracking": "^1.1.2", + "@rollup/plugin-node-resolve": "^15.2.3", "@types/node": "^18.15.2", "broccoli-sass-source-maps": "^4.1.0", "d3": "^7.8.5", @@ -68,11 +69,10 @@ "d3-transition": "^3.0.1", "ember-auto-import": "^2.6.3", "ember-basic-dropdown": "^7.3.0", - "ember-cli-babel": "^7.26.11", + "ember-cli-babel": "^8.2.0", "ember-cli-htmlbars": "^6.2.0", "ember-cli-moment-shim": "^3.8.0", "ember-cli-sass": "^11.0.1", - "ember-cli-typescript": "^5.2.1", "ember-composable-helpers": "^5.0.0", "ember-concurrency": "^3.0.0", "ember-data": "^4.12.0", @@ -98,52 +98,12 @@ "yam": "^1.0.0" }, "devDependencies": { - "@embroider/addon-dev": "^4.1.0", - "@glint/environment-ember-loose": "^1.2.0", - "@glint/environment-ember-template-imports": "^1.2.0", - "@glint/template": "^1.2.0", - "@tsconfig/ember": "^2.0.0", - "@types/ember": "^4.0.4", - "@types/ember__object": "^4.0.6", - "@types/ember__owner": "^4.0.4", - "@types/ember__service": "^4.0.3", - "@types/ember__controller": "^4.0.5", - "@types/ember__string": "^3.16.3", - "@types/ember__template": "^4.0.2", - "@types/ember__polyfills": "^4.0.2", - "@types/ember__utils": "^4.0.3", - "@types/ember__runloop": "^4.0.3", - "@types/ember__debug": "^4.0.4", - "@types/ember__engine": "^4.0.5", - "@types/ember__application": "^4.0.6", - "@types/ember__test": "^4.0.2", - "@types/ember__array": "^4.0.4", - "@types/ember__error": "^4.0.3", - "@types/ember__component": "^4.0.14", - "@types/ember__modifier": "^4.0.6", - "@types/ember__helper": "^4.0.3", - "@types/ember__routing": "^4.0.13", - "@typescript-eslint/eslint-plugin": "^6.7.2", - "@typescript-eslint/parser": "^6.7.2", - "@rollup/plugin-babel": "^6.0.3", - "babel-plugin-ember-template-compilation": "^2.2.0", - "concurrently": "^8.0.1", - "ember-template-lint": "^5.11.2", - "eslint": "^8.57.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-ember": "^12.0.2", - "eslint-plugin-n": "^16.0.0", - "eslint-plugin-prettier": "^5.0.0", - "prettier": "^3.0.3", - "prettier-plugin-ember-template-tag": "^1.1.0", - "rollup": "^3.21.8", - "rollup-plugin-copy": "^3.4.0", - "typescript": "^5.0.4", "@ascua/maths": "^0.0.237", "@ember/jquery": "^2.0.0", "@ember/optional-features": "^2.0.0", "@ember/render-modifiers": "^2.1.0", "@ember/string": "^3.1.1", + "@embroider/addon-dev": "^4.1.0", "@embroider/compat": "^3.2.1", "@embroider/core": "^3.2.1", "@embroider/macros": "^1.13.1", @@ -151,14 +111,43 @@ "@embroider/util": "^1.12.0", "@embroider/webpack": "^3.1.5", "@glint/core": "https://github.com/patricklx/glint/releases/download/v1.0.2/glint-core-v1.0.2.tgz", + "@glint/environment-ember-loose": "^1.2.0", + "@glint/environment-ember-template-imports": "^1.2.0", + "@glint/template": "^1.2.0", "@release-it-plugins/lerna-changelog": "^5.0.0", + "@rollup/plugin-babel": "^6.0.3", + "@tsconfig/ember": "^2.0.0", + "@types/ember": "^4.0.4", "@types/ember-qunit": "^6.1.1", + "@types/ember__application": "^4.0.6", + "@types/ember__array": "^4.0.4", + "@types/ember__component": "^4.0.14", + "@types/ember__controller": "^4.0.5", + "@types/ember__debug": "^4.0.4", + "@types/ember__engine": "^4.0.5", + "@types/ember__error": "^4.0.3", + "@types/ember__helper": "^4.0.3", + "@types/ember__modifier": "^4.0.6", + "@types/ember__object": "^4.0.6", + "@types/ember__owner": "^4.0.4", + "@types/ember__polyfills": "^4.0.2", + "@types/ember__routing": "^4.0.13", + "@types/ember__runloop": "^4.0.3", + "@types/ember__service": "^4.0.3", + "@types/ember__string": "^3.16.3", + "@types/ember__template": "^4.0.2", + "@types/ember__test": "^4.0.2", + "@types/ember__utils": "^4.0.3", "@types/jquery": "^3.5.16", "@types/qunit": "^2.19.5", "@types/qunit-dom": "^0.7.0", + "@typescript-eslint/eslint-plugin": "^6.7.2", + "@typescript-eslint/parser": "^6.7.2", + "babel-plugin-ember-template-compilation": "^2.2.0", "bower": "^1.8.8", "broccoli": "^3.4.2", "broccoli-asset-rev": "^3.0.0", + "concurrently": "^8.0.1", "css-loader": "^6.8.1", "ember-animated": "^1.0.4", "ember-cli": "^4.8.0", @@ -182,18 +171,29 @@ "ember-resolver": "^10.0.0", "ember-source": "^5.2.0", "ember-source-channel-url": "latest", + "ember-template-lint": "^5.11.2", "ember-try": "^2.0.0", + "eslint": "^8.57.0", "eslint-config-airbnb-base": "^15.0.0", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-ember": "^12.0.2", "eslint-plugin-ember-template-lint": "^0.15.0", + "eslint-plugin-n": "^16.0.0", "eslint-plugin-node": "^11.1.0", + "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-qunit": "^7.3.4", "loader.js": "^4.7.0", + "prettier": "^3.0.3", + "prettier-plugin-ember-template-tag": "^1.1.0", "qunit": "^2.19.4", "qunit-dom": "^2.0.0", "release-it": "^15.10.3", + "rollup": "^3.21.8", + "rollup-plugin-copy": "^3.4.0", "sass": "^1.62.1", "sass-embedded": "^1.63.6", "sass-loader": "^13.3.2", + "typescript": "^5.0.4", "typescript-plugin-css-modules": "^5.0.1", "webpack": "^5.87.0", "yui": "^3.18.1" @@ -281,6 +281,9 @@ "./services/notifications.js": "./dist/_app_/services/notifications.js" } }, + "import": { + "#/*": "./src/*" + }, "exports": { ".": { "types": "./declarations/index.d.ts", @@ -292,7 +295,7 @@ }, "./*": { "types": "./declarations/*.d.ts", - "default": "./dist/*/*.js" + "default": "./dist/*.js" }, "./addon-main.js": "./addon-main.cjs" }, diff --git a/carbon-components-ember/rollup.config.mjs b/carbon-components-ember/rollup.config.mjs index bda8216f..ac6b74de 100644 --- a/carbon-components-ember/rollup.config.mjs +++ b/carbon-components-ember/rollup.config.mjs @@ -1,6 +1,7 @@ import { babel } from '@rollup/plugin-babel'; import copy from 'rollup-plugin-copy'; import { Addon } from '@embroider/addon-dev/rollup'; +import resolve from '@rollup/plugin-node-resolve'; const addon = new Addon({ srcDir: 'src', @@ -56,11 +57,15 @@ export default { // addons are allowed to contain imports of .css files, which we want rollup // to leave alone and keep in the published output. - addon.keepAssets(['**/*.scss']), + addon.keepAssets(['styles/**/*.scss']), // Remove leftover build artifacts when starting a new build. addon.clean(), + resolve({ + extensions: ['.js', '.gjs', '.ts', '.gts'] + }), + // Copy Readme and License into published package copy({ targets: [ diff --git a/carbon-components-ember/src/components/accordion/index.gts b/carbon-components-ember/src/components/accordion/index.gts index 46930b41..92e60c8d 100644 --- a/carbon-components-ember/src/components/accordion/index.gts +++ b/carbon-components-ember/src/components/accordion/index.gts @@ -1,11 +1,9 @@ import Component from '@glimmer/component'; import { guidFor } from '@ember/object/internals'; -import or from 'carbon-components-ember/helpers/or'; import { WithBoundArgs } from '@glint/template'; -import { on } from '@ember/modifier'; import { tracked } from '@glimmer/tracking'; -import { fn } from '@ember/helper'; import { action } from '@ember/object'; +import or from '#/helpers/or'; interface AccordionSignature { Args: { diff --git a/carbon-components-ember/src/components/breadcrumbs/index.gts b/carbon-components-ember/src/components/breadcrumbs/index.gts index 5dffcc8e..b4e0b21a 100644 --- a/carbon-components-ember/src/components/breadcrumbs/index.gts +++ b/carbon-components-ember/src/components/breadcrumbs/index.gts @@ -1,21 +1,14 @@ import Component from '@glimmer/component'; -import { defaultArgs } from 'carbon-components-ember/decorators'; +import { defaultArgs } from '#/decorators/index.ts'; import { action } from '@ember/object'; import eq from 'ember-truth-helpers/helpers/eq'; import { fn } from '@ember/helper'; import { on } from '@ember/modifier'; - /** @documenter yuidoc */ type Args = { - /** - @argument crumbs - @type String[] - */ crumbs: string[]; - current?: string; - onSelect?(crumb: string): void; }; @@ -32,16 +25,16 @@ export interface BreadcrumbSignature { }; } -/** - The Carbon Breadcrumb - - ```handlebars - {{import Breadcrumbs from 'carbon-components-ember/components/breadcrumbs'}} - - - ``` - @class CarbonBreadcrumb - @public +/** + The Carbon Breadcrumb + + ```handlebars + {{import Breadcrumbs from '#/components/breadcrumbs'}} + + + ``` + @class CarbonBreadcrumb + @public **/ class CarbonBreadcrumb extends Component { args: Args = defaultArgs(this, { diff --git a/carbon-components-ember/src/components/button/index.gts b/carbon-components-ember/src/components/button/index.gts index ccc93dc9..a33e761a 100644 --- a/carbon-components-ember/src/components/button/index.gts +++ b/carbon-components-ember/src/components/button/index.gts @@ -3,77 +3,80 @@ import { bxClassNames, classPrefix, defaultArgs, -} from 'carbon-components-ember/decorators'; -import DialogManagerService from 'carbon-components-ember/services/dialog-manager'; +} from '#/decorators'; +import DialogManagerService from '#/services/dialog-manager'; import { inject as service } from '@ember/service'; import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; -import ConfirmDialogComponent from 'carbon-components-ember/components/dialogs/confirm'; -import or from 'carbon-components-ember/helpers/or'; -import Confirm from 'carbon-components-ember/components/dialogs/confirm'; +import ConfirmDialogComponent from '#/components/dialogs/confirm'; +import or from '#/helpers/or'; +import Confirm from '#/components/dialogs/confirm'; import styles from './styles.module.scss'; -import Loading from 'carbon-components-ember/components/loading'; +import Loading from '#/components/loading'; +import { guidFor } from '@ember/object/internals'; +import Ember from 'ember'; +import Object = Ember.Object; /** @documenter yuidoc */ type Args = { - /** - * Will display a spinning Wheel inside the button - @argument loading - @type boolean + /** + * Will display a spinning Wheel inside the button + @argument loading + @type boolean */ loading?: boolean; - /** - @argument disabled - @type boolean + /** + @argument disabled + @type boolean */ disabled?: boolean; - /** - @argument bubbles - @type boolean + /** + @argument bubbles + @type boolean */ bubbles?: boolean; - /** - @argument onClick - @type function + /** + @argument onClick + @type function */ onClick?: Function | null; - /** - * Indicates the type of the button - @argument type - @type string + /** + * Indicates the type of the button + @argument type + @type string */ type?: 'primary' | 'secondary' | 'danger'; - /** - * If the action is dangerous, this text message will be shown in the dialog - @argument confirmText - @type String + /** + * If the action is dangerous, this text message will be shown in the dialog + @argument confirmText + @type String */ confirmText?: string; - /** - * Use this component as dialog - @argument confirmDialog - @type ConfirmDialogComponent + /** + * Use this component as dialog + @argument confirmDialog + @type ConfirmDialogComponent */ confirmDialog?: typeof ConfirmDialogComponent; - /** - * If the button is tertiary - @argument tertiary - @type boolean + /** + * If the button is tertiary + @argument tertiary + @type boolean */ tertiary?: boolean; - /** - * the button size - @argument small - @type 'sm' | 'md' | 'lg' | 'xl' + /** + * the button size + @argument small + @type 'sm' | 'md' | 'lg' | 'xl' */ size?: 'sm' | 'md' | 'lg' | 'xl'; - /** - * If the button is a ghost button - @argument ghost - @type boolean + /** + * If the button is a ghost button + @argument ghost + @type boolean */ ghost?: boolean; @@ -95,16 +98,16 @@ export interface ButtonSignature { }; } -/** - The Carbon Button - - ```handlebars - {{import Button from 'carbon-components-ember/components/button'}} - - - ``` - @class CarbonButton - @public +/** + The Carbon Button + + ```handlebars + {{import Button from '#/components/button'}} + + + ``` + @class CarbonButton + @public **/ @classPrefix('cds--btn--') class CarbonButton extends Component { @@ -127,13 +130,21 @@ class CarbonButton extends Component { ghost: false, }; + get className() { + return guidFor(Object.getPrototypeOf(this)) + 'carbon-button'; + } +