diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 474f4e09..73ba1565 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -12,8 +12,8 @@ env: PERCY_PARALLEL_TOTAL: 9 jobs: - build-test-app: - name: Build test-app + build-docs-app: + name: Build docs-app for testing runs-on: ubuntu-latest timeout-minutes: 5 steps: @@ -29,15 +29,15 @@ jobs: - name: Install dependencies run: yarn install --frozen-lockfile - - name: Build test-app + - name: Build docs-app run: yarn build:test - working-directory: test-app + working-directory: docs-app - - name: Upload test-app + - name: Upload docs-app uses: actions/upload-artifact@v3 with: name: dist - path: test-app/dist + path: docs-app/dist lint: @@ -61,9 +61,9 @@ jobs: run: yarn lint - test-addon: - name: Test addon - needs: [build-test-app] + test-docs-app: + name: Test docs-app + needs: [build-docs-app] runs-on: ubuntu-latest strategy: matrix: @@ -110,15 +110,15 @@ jobs: - name: Install dependencies run: yarn install --frozen-lockfile - - name: Download test-app + - name: Download docs-app uses: actions/download-artifact@v3 with: name: dist - path: test-app/dist + path: docs-app/dist - name: Run tests - run: npx percy exec -- yarn test:ember --path=dist --test-port=${{ matrix.test-port }} - working-directory: test-app + run: npx percy exec -- yarn test:device --path=dist --test-port=${{ matrix.test-port }} + working-directory: docs-app env: DEVICE: ${{ matrix.device }} PERCY_PARALLEL_NONCE: ${{ env.PERCY_PARALLEL_NONCE }} @@ -126,8 +126,30 @@ jobs: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} - test-compatibility: - name: Test compatibility + test-addon: + name: Test addon + runs-on: ubuntu-latest + timeout-minutes: 5 + steps: + - name: Check out a copy of the repo + uses: actions/checkout@v3 + + - name: Use Node.js ${{ env.NODE_VERSION }} + uses: actions/setup-node@v3 + with: + cache: 'yarn' + node-version: ${{ env.NODE_VERSION }} + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Run tests + run: yarn test + working-directory: test-app + + + test-addon-compatibility: + name: Test addon compatibility runs-on: ubuntu-latest strategy: fail-fast: false @@ -138,20 +160,9 @@ jobs: - 'ember-lts-4.8' - 'ember-release' - 'ember-beta' - # - 'ember-canary' + - 'ember-canary' - 'embroider-safe' - # - 'embroider-optimized' - device: - - 'w1-h3' - - 'w2-h3' - - 'w3-h3' - include: - - device: 'w1-h3' - test-port: 7363 - - device: 'w2-h3' - test-port: 7364 - - device: 'w3-h3' - test-port: 7365 + - 'embroider-optimized' timeout-minutes: 5 steps: - name: Check out a copy of the repo @@ -166,9 +177,6 @@ jobs: - name: Install dependencies run: yarn install --frozen-lockfile - # Test compatibility without Percy - name: Run tests - run: yarn test:ember-compatibility ${{ matrix.scenario }} --- yarn test:ember --test-port=${{ matrix.test-port }} + run: yarn test:ember-compatibility ${{ matrix.scenario }} --- yarn test working-directory: test-app - env: - DEVICE: ${{ matrix.device }} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bb54646f..d0531875 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,7 +8,7 @@ Here are some guidelines to help you and everyone else. ## Setup
-Installation +Install the app 1. Fork and clone this repo. @@ -32,48 +32,42 @@ Here are some guidelines to help you and everyone else.
-Running demo app +Run the demo app 1. After following the installation step, you can run the app. ```bash - ember serve + yarn start ``` -1. Open the app at [http://localhost:4200](http://localhost:4200). +1. Once the app has finished building, visit [http://localhost:4200](http://localhost:4200).
-Linting +Lint files -1. When you write code, please check dependencies, template files, and JavaScript files often. +1. When you write code, please check that it meets all linting rules. ```bash yarn lint ``` - This command will lint files and dependencies in parallel. You can run `yarn lint:fix` to fix HBS and JS files. +1. You can run `yarn lint:fix` to automatically fix linting errors in all packages.
-Running tests - very important ⚠️ +Run tests -1. The setup is quite different from most addons. We check the addon and demo app at _9_ various widths and heights. - -1. When you write code, please check both addon and demo app often. +1. When you write code, please check that all tests continue to pass. ```bash yarn test ``` -1. A couple of caveats. `yarn test --server` may result in failed tests due to inexact test window size. Using `--filter` may also result in failed tests. I use the filters for responsive testing so please don't overwrite them with your own. - -1. When you write code, you don't need to check addon compatibility. I suggest leaving this to CI. For every PR, the CI will lint files and dependencies, run tests, and check compatible versions—all in parallel! 💯 -
diff --git a/README.md b/README.md index 3aac0dcc..21b1f2c7 100644 --- a/README.md +++ b/README.md @@ -330,7 +330,7 @@ Let's look at the code that created the video demo above. You can see that the album page uses 2 `` components. Rest assured, they act independently of each other. When you pair `` with some CSS, you can create layouts beyond the dreams of others! 🙌 -For more examples, I encourage you to check out the code for my demo app. It is located under [`test-app/app`](https://github.com/ijlee2/ember-container-query/tree/main/test-app/app) folder and is structured like a typical Ember app. +For more examples, I encourage you to check out the code for my demo app. It is located under the [`docs-app`](https://github.com/ijlee2/ember-container-query/tree/main/docs-app) folder and is structured like a typical Ember app. Compatibility diff --git a/docs-app/.ember-cli b/docs-app/.ember-cli new file mode 100644 index 00000000..8c1812cf --- /dev/null +++ b/docs-app/.ember-cli @@ -0,0 +1,15 @@ +{ + /** + Ember CLI sends analytics information by default. The data is completely + anonymous, but there are times when you might want to disable this behavior. + + Setting `disableAnalytics` to true will prevent any data from being sent. + */ + "disableAnalytics": false, + + /** + Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript + rather than JavaScript by default, when a TypeScript version of a given blueprint is available. + */ + "isTypeScriptProject": false +} diff --git a/docs-app/.eslintignore b/docs-app/.eslintignore new file mode 100644 index 00000000..d474a40b --- /dev/null +++ b/docs-app/.eslintignore @@ -0,0 +1,25 @@ +# unconventional js +/blueprints/*/files/ +/vendor/ + +# compiled output +/dist/ +/tmp/ + +# dependencies +/bower_components/ +/node_modules/ + +# misc +/coverage/ +!.* +.*/ +.eslintcache + +# ember-try +/.node_modules.ember-try/ +/bower.json.ember-try +/npm-shrinkwrap.json.ember-try +/package.json.ember-try +/package-lock.json.ember-try +/yarn.lock.ember-try diff --git a/docs-app/.eslintrc.js b/docs-app/.eslintrc.js new file mode 100644 index 00000000..22eac56d --- /dev/null +++ b/docs-app/.eslintrc.js @@ -0,0 +1,69 @@ +'use strict'; + +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 2018, + }, + plugins: [ + 'ember', + '@typescript-eslint', + 'simple-import-sort', + 'typescript-sort-keys', + ], + extends: [ + 'eslint:recommended', + 'plugin:ember/recommended', + 'plugin:prettier/recommended', + ], + env: { + browser: true, + }, + rules: { + curly: 'error', + 'simple-import-sort/exports': 'error', + 'simple-import-sort/imports': 'error', + }, + overrides: [ + // TypeScript files + { + files: ['**/*.ts'], + extends: [ + 'plugin:@typescript-eslint/eslint-recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:typescript-sort-keys/recommended', + ], + rules: { + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + }, + }, + // Node files + { + files: [ + './.eslintrc.js', + './.prettierrc.js', + './.stylelintrc.js', + './.template-lintrc.js', + './ember-cli-build.js', + './testem.js', + './blueprints/*/index.js', + './config/**/*.js', + './lib/*/index.js', + './server/**/*.js', + ], + env: { + browser: false, + node: true, + }, + extends: ['plugin:n/recommended'], + }, + // Test files + { + files: ['tests/**/*-test.{js,ts}'], + extends: ['plugin:qunit/recommended'], + }, + ], +}; diff --git a/docs-app/.gitignore b/docs-app/.gitignore new file mode 100644 index 00000000..06aa141b --- /dev/null +++ b/docs-app/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist/ +/tmp/ + +# dependencies +/bower_components/ +/node_modules/ + +# misc +/.env* +/.pnp* +/.DS_Store +/.sass-cache +/.eslintcache +/.stylelintcache +/connect.lock +/coverage/ +/libpeerconnection.log +/npm-debug.log* +/testem.log +/yarn-error.log + +# ember-try +/.node_modules.ember-try/ +/bower.json.ember-try +/npm-shrinkwrap.json.ember-try +/package.json.ember-try +/package-lock.json.ember-try +/yarn.lock.ember-try + +# broccoli-debug +/DEBUG/ diff --git a/test-app/.netlifyredirects b/docs-app/.netlifyredirects similarity index 100% rename from test-app/.netlifyredirects rename to docs-app/.netlifyredirects diff --git a/docs-app/.prettierignore b/docs-app/.prettierignore new file mode 100644 index 00000000..4178fd57 --- /dev/null +++ b/docs-app/.prettierignore @@ -0,0 +1,25 @@ +# unconventional js +/blueprints/*/files/ +/vendor/ + +# compiled output +/dist/ +/tmp/ + +# dependencies +/bower_components/ +/node_modules/ + +# misc +/coverage/ +!.* +.eslintcache +.lint-todo/ + +# ember-try +/.node_modules.ember-try/ +/bower.json.ember-try +/npm-shrinkwrap.json.ember-try +/package.json.ember-try +/package-lock.json.ember-try +/yarn.lock.ember-try diff --git a/docs-app/.prettierrc.js b/docs-app/.prettierrc.js new file mode 100644 index 00000000..2666cdb5 --- /dev/null +++ b/docs-app/.prettierrc.js @@ -0,0 +1,16 @@ +'use strict'; + +module.exports = { + printWidth: 80, + singleQuote: true, + + overrides: [ + { + files: '*.hbs', + options: { + printWidth: 64, + singleQuote: false, + }, + }, + ], +}; diff --git a/test-app/.stylelintrc.js b/docs-app/.stylelintrc.js similarity index 100% rename from test-app/.stylelintrc.js rename to docs-app/.stylelintrc.js diff --git a/docs-app/.template-lintrc.js b/docs-app/.template-lintrc.js new file mode 100644 index 00000000..b50bdae9 --- /dev/null +++ b/docs-app/.template-lintrc.js @@ -0,0 +1,14 @@ +'use strict'; + +module.exports = { + plugins: ['ember-template-lint-plugin-prettier'], + extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'], + overrides: [ + { + files: ['tests/**/*-test.{js,ts}'], + rules: { + prettier: 'off', + }, + }, + ], +}; diff --git a/docs-app/.watchmanconfig b/docs-app/.watchmanconfig new file mode 100644 index 00000000..e7834e3e --- /dev/null +++ b/docs-app/.watchmanconfig @@ -0,0 +1,3 @@ +{ + "ignore_dirs": ["tmp", "dist"] +} diff --git a/docs-app/app/app.ts b/docs-app/app/app.ts new file mode 100644 index 00000000..b83a2cf4 --- /dev/null +++ b/docs-app/app/app.ts @@ -0,0 +1,13 @@ +import Application from '@ember/application'; +import loadInitializers from 'ember-load-initializers'; +import Resolver from 'ember-resolver'; + +import config from './config/environment'; + +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} + +loadInitializers(App, config.modulePrefix); diff --git a/test-app/app/models/.gitkeep b/docs-app/app/components/.gitkeep similarity index 100% rename from test-app/app/models/.gitkeep rename to docs-app/app/components/.gitkeep diff --git a/test-app/app/components/navigation-menu.css b/docs-app/app/components/navigation-menu.css similarity index 100% rename from test-app/app/components/navigation-menu.css rename to docs-app/app/components/navigation-menu.css diff --git a/test-app/app/components/navigation-menu.hbs b/docs-app/app/components/navigation-menu.hbs similarity index 100% rename from test-app/app/components/navigation-menu.hbs rename to docs-app/app/components/navigation-menu.hbs diff --git a/test-app/app/components/navigation-menu.ts b/docs-app/app/components/navigation-menu.ts similarity index 100% rename from test-app/app/components/navigation-menu.ts rename to docs-app/app/components/navigation-menu.ts diff --git a/test-app/app/components/products/product/card.css b/docs-app/app/components/products/product/card.css similarity index 100% rename from test-app/app/components/products/product/card.css rename to docs-app/app/components/products/product/card.css diff --git a/test-app/app/components/products/product/card.hbs b/docs-app/app/components/products/product/card.hbs similarity index 100% rename from test-app/app/components/products/product/card.hbs rename to docs-app/app/components/products/product/card.hbs diff --git a/test-app/app/components/products/product/card.ts b/docs-app/app/components/products/product/card.ts similarity index 100% rename from test-app/app/components/products/product/card.ts rename to docs-app/app/components/products/product/card.ts diff --git a/test-app/app/components/products/product/image.css b/docs-app/app/components/products/product/image.css similarity index 100% rename from test-app/app/components/products/product/image.css rename to docs-app/app/components/products/product/image.css diff --git a/test-app/app/components/products/product/image.hbs b/docs-app/app/components/products/product/image.hbs similarity index 100% rename from test-app/app/components/products/product/image.hbs rename to docs-app/app/components/products/product/image.hbs diff --git a/test-app/app/components/products/product/image.ts b/docs-app/app/components/products/product/image.ts similarity index 90% rename from test-app/app/components/products/product/image.ts rename to docs-app/app/components/products/product/image.ts index 26a863e7..aaf672bc 100644 --- a/test-app/app/components/products/product/image.ts +++ b/docs-app/app/components/products/product/image.ts @@ -1,5 +1,5 @@ import Component from '@glimmer/component'; -import config from 'test-app/config/environment'; +import config from 'docs-app/config/environment'; interface ProductsProductImageComponentSignature { Args: { diff --git a/test-app/app/components/tracks.hbs b/docs-app/app/components/tracks.hbs similarity index 100% rename from test-app/app/components/tracks.hbs rename to docs-app/app/components/tracks.hbs diff --git a/test-app/app/components/tracks.ts b/docs-app/app/components/tracks.ts similarity index 100% rename from test-app/app/components/tracks.ts rename to docs-app/app/components/tracks.ts diff --git a/test-app/app/components/tracks/list.css b/docs-app/app/components/tracks/list.css similarity index 100% rename from test-app/app/components/tracks/list.css rename to docs-app/app/components/tracks/list.css diff --git a/test-app/app/components/tracks/list.hbs b/docs-app/app/components/tracks/list.hbs similarity index 100% rename from test-app/app/components/tracks/list.hbs rename to docs-app/app/components/tracks/list.hbs diff --git a/test-app/app/components/tracks/list.ts b/docs-app/app/components/tracks/list.ts similarity index 100% rename from test-app/app/components/tracks/list.ts rename to docs-app/app/components/tracks/list.ts diff --git a/test-app/app/components/tracks/table.css b/docs-app/app/components/tracks/table.css similarity index 100% rename from test-app/app/components/tracks/table.css rename to docs-app/app/components/tracks/table.css diff --git a/test-app/app/components/tracks/table.hbs b/docs-app/app/components/tracks/table.hbs similarity index 100% rename from test-app/app/components/tracks/table.hbs rename to docs-app/app/components/tracks/table.hbs diff --git a/test-app/app/components/tracks/table.ts b/docs-app/app/components/tracks/table.ts similarity index 100% rename from test-app/app/components/tracks/table.ts rename to docs-app/app/components/tracks/table.ts diff --git a/test-app/app/components/ui/form.css b/docs-app/app/components/ui/form.css similarity index 100% rename from test-app/app/components/ui/form.css rename to docs-app/app/components/ui/form.css diff --git a/test-app/app/components/ui/form.hbs b/docs-app/app/components/ui/form.hbs similarity index 100% rename from test-app/app/components/ui/form.hbs rename to docs-app/app/components/ui/form.hbs diff --git a/test-app/app/components/ui/form.ts b/docs-app/app/components/ui/form.ts similarity index 100% rename from test-app/app/components/ui/form.ts rename to docs-app/app/components/ui/form.ts diff --git a/test-app/app/components/ui/form/checkbox.css b/docs-app/app/components/ui/form/checkbox.css similarity index 100% rename from test-app/app/components/ui/form/checkbox.css rename to docs-app/app/components/ui/form/checkbox.css diff --git a/test-app/app/components/ui/form/checkbox.hbs b/docs-app/app/components/ui/form/checkbox.hbs similarity index 100% rename from test-app/app/components/ui/form/checkbox.hbs rename to docs-app/app/components/ui/form/checkbox.hbs diff --git a/test-app/app/components/ui/form/checkbox.ts b/docs-app/app/components/ui/form/checkbox.ts similarity index 100% rename from test-app/app/components/ui/form/checkbox.ts rename to docs-app/app/components/ui/form/checkbox.ts diff --git a/test-app/app/components/ui/form/field.css b/docs-app/app/components/ui/form/field.css similarity index 100% rename from test-app/app/components/ui/form/field.css rename to docs-app/app/components/ui/form/field.css diff --git a/test-app/app/components/ui/form/field.hbs b/docs-app/app/components/ui/form/field.hbs similarity index 100% rename from test-app/app/components/ui/form/field.hbs rename to docs-app/app/components/ui/form/field.hbs diff --git a/test-app/app/components/ui/form/field.ts b/docs-app/app/components/ui/form/field.ts similarity index 100% rename from test-app/app/components/ui/form/field.ts rename to docs-app/app/components/ui/form/field.ts diff --git a/test-app/app/components/ui/form/information.css b/docs-app/app/components/ui/form/information.css similarity index 100% rename from test-app/app/components/ui/form/information.css rename to docs-app/app/components/ui/form/information.css diff --git a/test-app/app/components/ui/form/information.hbs b/docs-app/app/components/ui/form/information.hbs similarity index 100% rename from test-app/app/components/ui/form/information.hbs rename to docs-app/app/components/ui/form/information.hbs diff --git a/test-app/app/components/ui/form/information.ts b/docs-app/app/components/ui/form/information.ts similarity index 100% rename from test-app/app/components/ui/form/information.ts rename to docs-app/app/components/ui/form/information.ts diff --git a/test-app/app/components/ui/form/input.css b/docs-app/app/components/ui/form/input.css similarity index 100% rename from test-app/app/components/ui/form/input.css rename to docs-app/app/components/ui/form/input.css diff --git a/test-app/app/components/ui/form/input.hbs b/docs-app/app/components/ui/form/input.hbs similarity index 100% rename from test-app/app/components/ui/form/input.hbs rename to docs-app/app/components/ui/form/input.hbs diff --git a/test-app/app/components/ui/form/input.ts b/docs-app/app/components/ui/form/input.ts similarity index 100% rename from test-app/app/components/ui/form/input.ts rename to docs-app/app/components/ui/form/input.ts diff --git a/test-app/app/components/ui/form/textarea.css b/docs-app/app/components/ui/form/textarea.css similarity index 100% rename from test-app/app/components/ui/form/textarea.css rename to docs-app/app/components/ui/form/textarea.css diff --git a/test-app/app/components/ui/form/textarea.hbs b/docs-app/app/components/ui/form/textarea.hbs similarity index 100% rename from test-app/app/components/ui/form/textarea.hbs rename to docs-app/app/components/ui/form/textarea.hbs diff --git a/test-app/app/components/ui/form/textarea.ts b/docs-app/app/components/ui/form/textarea.ts similarity index 100% rename from test-app/app/components/ui/form/textarea.ts rename to docs-app/app/components/ui/form/textarea.ts diff --git a/test-app/app/components/ui/page.css b/docs-app/app/components/ui/page.css similarity index 100% rename from test-app/app/components/ui/page.css rename to docs-app/app/components/ui/page.css diff --git a/test-app/app/components/ui/page.hbs b/docs-app/app/components/ui/page.hbs similarity index 100% rename from test-app/app/components/ui/page.hbs rename to docs-app/app/components/ui/page.hbs diff --git a/test-app/app/components/ui/page.ts b/docs-app/app/components/ui/page.ts similarity index 100% rename from test-app/app/components/ui/page.ts rename to docs-app/app/components/ui/page.ts diff --git a/test-app/app/components/widgets/widget-1.css b/docs-app/app/components/widgets/widget-1.css similarity index 100% rename from test-app/app/components/widgets/widget-1.css rename to docs-app/app/components/widgets/widget-1.css diff --git a/test-app/app/components/widgets/widget-1.hbs b/docs-app/app/components/widgets/widget-1.hbs similarity index 95% rename from test-app/app/components/widgets/widget-1.hbs rename to docs-app/app/components/widgets/widget-1.hbs index eb1b614f..89090ff3 100644 --- a/test-app/app/components/widgets/widget-1.hbs +++ b/docs-app/app/components/widgets/widget-1.hbs @@ -5,7 +5,6 @@ wide=(aspect-ratio min=1.25) }} @tagName="section" - data-test-container-query local-class="container" >
diff --git a/test-app/app/components/widgets/widget-1.ts b/docs-app/app/components/widgets/widget-1.ts similarity index 100% rename from test-app/app/components/widgets/widget-1.ts rename to docs-app/app/components/widgets/widget-1.ts diff --git a/test-app/app/components/widgets/widget-1/item.css b/docs-app/app/components/widgets/widget-1/item.css similarity index 100% rename from test-app/app/components/widgets/widget-1/item.css rename to docs-app/app/components/widgets/widget-1/item.css diff --git a/test-app/app/components/widgets/widget-1/item.hbs b/docs-app/app/components/widgets/widget-1/item.hbs similarity index 100% rename from test-app/app/components/widgets/widget-1/item.hbs rename to docs-app/app/components/widgets/widget-1/item.hbs diff --git a/test-app/app/components/widgets/widget-1/item.ts b/docs-app/app/components/widgets/widget-1/item.ts similarity index 100% rename from test-app/app/components/widgets/widget-1/item.ts rename to docs-app/app/components/widgets/widget-1/item.ts diff --git a/test-app/app/components/widgets/widget-2.css b/docs-app/app/components/widgets/widget-2.css similarity index 100% rename from test-app/app/components/widgets/widget-2.css rename to docs-app/app/components/widgets/widget-2.css diff --git a/test-app/app/components/widgets/widget-2.hbs b/docs-app/app/components/widgets/widget-2.hbs similarity index 100% rename from test-app/app/components/widgets/widget-2.hbs rename to docs-app/app/components/widgets/widget-2.hbs diff --git a/test-app/app/components/widgets/widget-2.ts b/docs-app/app/components/widgets/widget-2.ts similarity index 100% rename from test-app/app/components/widgets/widget-2.ts rename to docs-app/app/components/widgets/widget-2.ts diff --git a/test-app/app/components/widgets/widget-2/captions.css b/docs-app/app/components/widgets/widget-2/captions.css similarity index 100% rename from test-app/app/components/widgets/widget-2/captions.css rename to docs-app/app/components/widgets/widget-2/captions.css diff --git a/test-app/app/components/widgets/widget-2/captions.hbs b/docs-app/app/components/widgets/widget-2/captions.hbs similarity index 100% rename from test-app/app/components/widgets/widget-2/captions.hbs rename to docs-app/app/components/widgets/widget-2/captions.hbs diff --git a/test-app/app/components/widgets/widget-2/captions.ts b/docs-app/app/components/widgets/widget-2/captions.ts similarity index 100% rename from test-app/app/components/widgets/widget-2/captions.ts rename to docs-app/app/components/widgets/widget-2/captions.ts diff --git a/test-app/app/components/widgets/widget-2/stacked-chart.css b/docs-app/app/components/widgets/widget-2/stacked-chart.css similarity index 100% rename from test-app/app/components/widgets/widget-2/stacked-chart.css rename to docs-app/app/components/widgets/widget-2/stacked-chart.css diff --git a/test-app/app/components/widgets/widget-2/stacked-chart.hbs b/docs-app/app/components/widgets/widget-2/stacked-chart.hbs similarity index 100% rename from test-app/app/components/widgets/widget-2/stacked-chart.hbs rename to docs-app/app/components/widgets/widget-2/stacked-chart.hbs diff --git a/test-app/app/components/widgets/widget-2/stacked-chart.ts b/docs-app/app/components/widgets/widget-2/stacked-chart.ts similarity index 100% rename from test-app/app/components/widgets/widget-2/stacked-chart.ts rename to docs-app/app/components/widgets/widget-2/stacked-chart.ts diff --git a/test-app/app/components/widgets/widget-3.css b/docs-app/app/components/widgets/widget-3.css similarity index 100% rename from test-app/app/components/widgets/widget-3.css rename to docs-app/app/components/widgets/widget-3.css diff --git a/test-app/app/components/widgets/widget-3.hbs b/docs-app/app/components/widgets/widget-3.hbs similarity index 100% rename from test-app/app/components/widgets/widget-3.hbs rename to docs-app/app/components/widgets/widget-3.hbs diff --git a/test-app/app/components/widgets/widget-3.ts b/docs-app/app/components/widgets/widget-3.ts similarity index 100% rename from test-app/app/components/widgets/widget-3.ts rename to docs-app/app/components/widgets/widget-3.ts diff --git a/test-app/app/components/widgets/widget-3/tour-schedule.css b/docs-app/app/components/widgets/widget-3/tour-schedule.css similarity index 100% rename from test-app/app/components/widgets/widget-3/tour-schedule.css rename to docs-app/app/components/widgets/widget-3/tour-schedule.css diff --git a/test-app/app/components/widgets/widget-3/tour-schedule.hbs b/docs-app/app/components/widgets/widget-3/tour-schedule.hbs similarity index 100% rename from test-app/app/components/widgets/widget-3/tour-schedule.hbs rename to docs-app/app/components/widgets/widget-3/tour-schedule.hbs diff --git a/test-app/app/components/widgets/widget-3/tour-schedule.ts b/docs-app/app/components/widgets/widget-3/tour-schedule.ts similarity index 100% rename from test-app/app/components/widgets/widget-3/tour-schedule.ts rename to docs-app/app/components/widgets/widget-3/tour-schedule.ts diff --git a/test-app/app/components/widgets/widget-3/tour-schedule/responsive-image.css b/docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.css similarity index 100% rename from test-app/app/components/widgets/widget-3/tour-schedule/responsive-image.css rename to docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.css diff --git a/test-app/app/components/widgets/widget-3/tour-schedule/responsive-image.hbs b/docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.hbs similarity index 100% rename from test-app/app/components/widgets/widget-3/tour-schedule/responsive-image.hbs rename to docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.hbs diff --git a/test-app/app/components/widgets/widget-3/tour-schedule/responsive-image.ts b/docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.ts similarity index 100% rename from test-app/app/components/widgets/widget-3/tour-schedule/responsive-image.ts rename to docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.ts diff --git a/test-app/app/components/widgets/widget-4.css b/docs-app/app/components/widgets/widget-4.css similarity index 100% rename from test-app/app/components/widgets/widget-4.css rename to docs-app/app/components/widgets/widget-4.css diff --git a/test-app/app/components/widgets/widget-4.hbs b/docs-app/app/components/widgets/widget-4.hbs similarity index 100% rename from test-app/app/components/widgets/widget-4.hbs rename to docs-app/app/components/widgets/widget-4.hbs diff --git a/test-app/app/components/widgets/widget-4.ts b/docs-app/app/components/widgets/widget-4.ts similarity index 100% rename from test-app/app/components/widgets/widget-4.ts rename to docs-app/app/components/widgets/widget-4.ts diff --git a/test-app/app/components/widgets/widget-4/memo.css b/docs-app/app/components/widgets/widget-4/memo.css similarity index 100% rename from test-app/app/components/widgets/widget-4/memo.css rename to docs-app/app/components/widgets/widget-4/memo.css diff --git a/test-app/app/components/widgets/widget-4/memo.hbs b/docs-app/app/components/widgets/widget-4/memo.hbs similarity index 100% rename from test-app/app/components/widgets/widget-4/memo.hbs rename to docs-app/app/components/widgets/widget-4/memo.hbs diff --git a/test-app/app/components/widgets/widget-4/memo.ts b/docs-app/app/components/widgets/widget-4/memo.ts similarity index 100% rename from test-app/app/components/widgets/widget-4/memo.ts rename to docs-app/app/components/widgets/widget-4/memo.ts diff --git a/test-app/app/components/widgets/widget-4/memo/actions.css b/docs-app/app/components/widgets/widget-4/memo/actions.css similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/actions.css rename to docs-app/app/components/widgets/widget-4/memo/actions.css diff --git a/test-app/app/components/widgets/widget-4/memo/actions.hbs b/docs-app/app/components/widgets/widget-4/memo/actions.hbs similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/actions.hbs rename to docs-app/app/components/widgets/widget-4/memo/actions.hbs diff --git a/test-app/app/components/widgets/widget-4/memo/actions.ts b/docs-app/app/components/widgets/widget-4/memo/actions.ts similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/actions.ts rename to docs-app/app/components/widgets/widget-4/memo/actions.ts diff --git a/test-app/app/components/widgets/widget-4/memo/body.css b/docs-app/app/components/widgets/widget-4/memo/body.css similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/body.css rename to docs-app/app/components/widgets/widget-4/memo/body.css diff --git a/test-app/app/components/widgets/widget-4/memo/body.hbs b/docs-app/app/components/widgets/widget-4/memo/body.hbs similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/body.hbs rename to docs-app/app/components/widgets/widget-4/memo/body.hbs diff --git a/test-app/app/components/widgets/widget-4/memo/body.ts b/docs-app/app/components/widgets/widget-4/memo/body.ts similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/body.ts rename to docs-app/app/components/widgets/widget-4/memo/body.ts diff --git a/test-app/app/components/widgets/widget-4/memo/header.css b/docs-app/app/components/widgets/widget-4/memo/header.css similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/header.css rename to docs-app/app/components/widgets/widget-4/memo/header.css diff --git a/test-app/app/components/widgets/widget-4/memo/header.hbs b/docs-app/app/components/widgets/widget-4/memo/header.hbs similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/header.hbs rename to docs-app/app/components/widgets/widget-4/memo/header.hbs diff --git a/test-app/app/components/widgets/widget-4/memo/header.ts b/docs-app/app/components/widgets/widget-4/memo/header.ts similarity index 100% rename from test-app/app/components/widgets/widget-4/memo/header.ts rename to docs-app/app/components/widgets/widget-4/memo/header.ts diff --git a/test-app/app/components/widgets/widget-5.css b/docs-app/app/components/widgets/widget-5.css similarity index 100% rename from test-app/app/components/widgets/widget-5.css rename to docs-app/app/components/widgets/widget-5.css diff --git a/test-app/app/components/widgets/widget-5.hbs b/docs-app/app/components/widgets/widget-5.hbs similarity index 100% rename from test-app/app/components/widgets/widget-5.hbs rename to docs-app/app/components/widgets/widget-5.hbs diff --git a/test-app/app/components/widgets/widget-5.ts b/docs-app/app/components/widgets/widget-5.ts similarity index 100% rename from test-app/app/components/widgets/widget-5.ts rename to docs-app/app/components/widgets/widget-5.ts diff --git a/docs-app/app/config/environment.d.ts b/docs-app/app/config/environment.d.ts new file mode 100644 index 00000000..a1c17ab5 --- /dev/null +++ b/docs-app/app/config/environment.d.ts @@ -0,0 +1,14 @@ +export default config; + +/** + * Type declarations for + * import config from 'my-app/config/environment' + */ +declare const config: { + APP: Record; + environment: string; + locationType: 'history' | 'hash' | 'none' | 'auto'; + modulePrefix: string; + podModulePrefix: string; + rootURL: string; +}; diff --git a/test-app/tests/unit/.gitkeep b/docs-app/app/controllers/.gitkeep similarity index 100% rename from test-app/tests/unit/.gitkeep rename to docs-app/app/controllers/.gitkeep diff --git a/test-app/app/data/album.ts b/docs-app/app/data/album.ts similarity index 100% rename from test-app/app/data/album.ts rename to docs-app/app/data/album.ts diff --git a/test-app/app/data/concert.ts b/docs-app/app/data/concert.ts similarity index 100% rename from test-app/app/data/concert.ts rename to docs-app/app/data/concert.ts diff --git a/test-app/app/data/music-revenue.ts b/docs-app/app/data/music-revenue.ts similarity index 100% rename from test-app/app/data/music-revenue.ts rename to docs-app/app/data/music-revenue.ts diff --git a/test-app/app/data/products.ts b/docs-app/app/data/products.ts similarity index 100% rename from test-app/app/data/products.ts rename to docs-app/app/data/products.ts diff --git a/docs-app/app/helpers/.gitkeep b/docs-app/app/helpers/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/test-app/app/helpers/add.ts b/docs-app/app/helpers/add.ts similarity index 100% rename from test-app/app/helpers/add.ts rename to docs-app/app/helpers/add.ts diff --git a/docs-app/app/index.html b/docs-app/app/index.html new file mode 100644 index 00000000..7fbf3231 --- /dev/null +++ b/docs-app/app/index.html @@ -0,0 +1,29 @@ + + + + + + + + + Ember Container Query + + {{content-for "head"}} + + + + + + + + {{content-for "head-footer"}} + + + {{content-for "body"}} + + + + + {{content-for "body-footer"}} + + diff --git a/test-app/app/modifiers/draw-stacked-chart.d.ts b/docs-app/app/modifiers/draw-stacked-chart.d.ts similarity index 100% rename from test-app/app/modifiers/draw-stacked-chart.d.ts rename to docs-app/app/modifiers/draw-stacked-chart.d.ts diff --git a/test-app/app/modifiers/draw-stacked-chart.js b/docs-app/app/modifiers/draw-stacked-chart.js similarity index 98% rename from test-app/app/modifiers/draw-stacked-chart.js rename to docs-app/app/modifiers/draw-stacked-chart.js index 344c3284..9fae12b1 100644 --- a/test-app/app/modifiers/draw-stacked-chart.js +++ b/docs-app/app/modifiers/draw-stacked-chart.js @@ -1,6 +1,6 @@ import { registerDestructor } from '@ember/destroyable'; import { action } from '@ember/object'; -import { inject as service } from '@ember/service'; +import { service } from '@ember/service'; import { extent, max, rollup, ticks } from 'd3-array'; import { axisBottom, axisLeft } from 'd3-axis'; import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale'; diff --git a/test-app/app/modifiers/dynamic-css-grid.ts b/docs-app/app/modifiers/dynamic-css-grid.ts similarity index 100% rename from test-app/app/modifiers/dynamic-css-grid.ts rename to docs-app/app/modifiers/dynamic-css-grid.ts diff --git a/docs-app/app/router.ts b/docs-app/app/router.ts new file mode 100644 index 00000000..d358975b --- /dev/null +++ b/docs-app/app/router.ts @@ -0,0 +1,17 @@ +import EmberRouter from '@embroider/router'; + +import config from './config/environment'; + +export default class Router extends EmberRouter { + location = config.locationType; + rootURL = config.rootURL; +} + +Router.map(function () { + this.route('album'); + this.route('dashboard'); + this.route('form'); + this.route('products'); + + this.route('not-found', { path: '*' }); +}); diff --git a/docs-app/app/routes/.gitkeep b/docs-app/app/routes/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/test-app/app/routes/album.ts b/docs-app/app/routes/album.ts similarity index 100% rename from test-app/app/routes/album.ts rename to docs-app/app/routes/album.ts diff --git a/test-app/app/routes/products.ts b/docs-app/app/routes/products.ts similarity index 100% rename from test-app/app/routes/products.ts rename to docs-app/app/routes/products.ts diff --git a/test-app/app/styles/album.css b/docs-app/app/styles/album.css similarity index 100% rename from test-app/app/styles/album.css rename to docs-app/app/styles/album.css diff --git a/docs-app/app/styles/app.css b/docs-app/app/styles/app.css new file mode 100644 index 00000000..264908e0 --- /dev/null +++ b/docs-app/app/styles/app.css @@ -0,0 +1,99 @@ +html { + font-size: 16px; + height: 100%; +} + +body { + background-color: #020e1c; + color: rgb(247 252 251 / 90%); + font-family: Raleway, sans-serif; + font-weight: 400; + height: 100%; + letter-spacing: 0.03rem; + margin: 0; +} + +* { + margin: 0; + padding: 0; +} + +h1 { + font-size: 2.25em; + font-weight: 700; + margin-bottom: 1.5rem; +} + +h2 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 1rem; +} + +h3 { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 0.75rem; +} + +h4 { + font-size: 1rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + +a { + color: rgb(245 255 250 / 88%); + display: inline-block; +} + +button { + background: transparent; + border: 0.0625rem solid rgb(247 252 251 / 50%); + border-radius: 0.15rem; + color: rgb(247 252 251 / 90%); + font-family: Raleway, sans-serif; + font-size: 0.875rem; + padding: 0.25rem 0.5rem; +} + +button:hover { + background-color: rgb(255 255 255 / 22.5%); + cursor: pointer; + transition: background-color 0.17s; +} + +input { + font-family: Raleway, sans-serif; + font-size: 1rem; +} + +p { + margin-bottom: 0.75rem; +} + +table { + border-collapse: collapse; + width: 100%; +} + +textarea { + font-family: Raleway, sans-serif; + font-size: 1rem; +} + +th, +td { + border: 0.0625rem solid rgb(112 128 144 / 100%); + padding: 0.25rem 0.5rem; +} + +ul { + list-style-type: none; +} + +:global(#ember-testing-container) { + background-color: #020e1c !important; + border: 0.0625rem solid rgb(211 211 211 / 15%) !important; + overflow: visible !important; +} diff --git a/test-app/app/styles/application.css b/docs-app/app/styles/application.css similarity index 100% rename from test-app/app/styles/application.css rename to docs-app/app/styles/application.css diff --git a/test-app/app/styles/dashboard.css b/docs-app/app/styles/dashboard.css similarity index 100% rename from test-app/app/styles/dashboard.css rename to docs-app/app/styles/dashboard.css diff --git a/test-app/app/styles/form.css b/docs-app/app/styles/form.css similarity index 100% rename from test-app/app/styles/form.css rename to docs-app/app/styles/form.css diff --git a/test-app/app/styles/index.css b/docs-app/app/styles/index.css similarity index 100% rename from test-app/app/styles/index.css rename to docs-app/app/styles/index.css diff --git a/test-app/app/styles/not-found.css b/docs-app/app/styles/not-found.css similarity index 100% rename from test-app/app/styles/not-found.css rename to docs-app/app/styles/not-found.css diff --git a/test-app/app/styles/products.css b/docs-app/app/styles/products.css similarity index 100% rename from test-app/app/styles/products.css rename to docs-app/app/styles/products.css diff --git a/test-app/app/templates/album.hbs b/docs-app/app/templates/album.hbs similarity index 100% rename from test-app/app/templates/album.hbs rename to docs-app/app/templates/album.hbs diff --git a/docs-app/app/templates/application.hbs b/docs-app/app/templates/application.hbs new file mode 100644 index 00000000..028494cd --- /dev/null +++ b/docs-app/app/templates/application.hbs @@ -0,0 +1,39 @@ +{{page-title "Ember Container Query"}} + +
+
+ + + +
+ +
+
+ {{outlet}} +
+
+ + +
\ No newline at end of file diff --git a/test-app/app/templates/dashboard.hbs b/docs-app/app/templates/dashboard.hbs similarity index 100% rename from test-app/app/templates/dashboard.hbs rename to docs-app/app/templates/dashboard.hbs diff --git a/test-app/app/templates/form.hbs b/docs-app/app/templates/form.hbs similarity index 100% rename from test-app/app/templates/form.hbs rename to docs-app/app/templates/form.hbs diff --git a/docs-app/app/templates/index.hbs b/docs-app/app/templates/index.hbs new file mode 100644 index 00000000..24fe3c3a --- /dev/null +++ b/docs-app/app/templates/index.hbs @@ -0,0 +1,18 @@ + +

+ Thanks for trying out + + ember-container-query + . +

+ +

+ To see what you can do with container queries, visit one of + the examples and resize the window! +

+ \ No newline at end of file diff --git a/test-app/app/templates/not-found.hbs b/docs-app/app/templates/not-found.hbs similarity index 100% rename from test-app/app/templates/not-found.hbs rename to docs-app/app/templates/not-found.hbs diff --git a/test-app/app/templates/products.hbs b/docs-app/app/templates/products.hbs similarity index 100% rename from test-app/app/templates/products.hbs rename to docs-app/app/templates/products.hbs diff --git a/test-app/app/utils/components/widgets/widget-2.ts b/docs-app/app/utils/components/widgets/widget-2.ts similarity index 100% rename from test-app/app/utils/components/widgets/widget-2.ts rename to docs-app/app/utils/components/widgets/widget-2.ts diff --git a/test-app/app/utils/components/widgets/widget-3.ts b/docs-app/app/utils/components/widgets/widget-3.ts similarity index 100% rename from test-app/app/utils/components/widgets/widget-3.ts rename to docs-app/app/utils/components/widgets/widget-3.ts diff --git a/test-app/app/utils/routes/index.ts b/docs-app/app/utils/routes/index.ts similarity index 100% rename from test-app/app/utils/routes/index.ts rename to docs-app/app/utils/routes/index.ts diff --git a/docs-app/config/dependency-lint.js b/docs-app/config/dependency-lint.js new file mode 100644 index 00000000..740b3722 --- /dev/null +++ b/docs-app/config/dependency-lint.js @@ -0,0 +1,3 @@ +module.exports = { + allowedVersions: {}, +}; diff --git a/docs-app/config/ember-cli-update.json b/docs-app/config/ember-cli-update.json new file mode 100644 index 00000000..1682aa67 --- /dev/null +++ b/docs-app/config/ember-cli-update.json @@ -0,0 +1,22 @@ +{ + "schemaVersion": "1.0.0", + "packages": [ + { + "name": "ember-cli", + "version": "4.11.0", + "blueprints": [ + { + "name": "app", + "outputRepo": "https://github.com/ember-cli/ember-new-output", + "codemodsSource": "ember-app-codemods-manifest@1", + "isBaseBlueprint": true, + "options": [ + "--yarn", + "--no-welcome", + "--ci-provider=github" + ] + } + ] + } + ] +} diff --git a/docs-app/config/environment.js b/docs-app/config/environment.js new file mode 100644 index 00000000..b0633127 --- /dev/null +++ b/docs-app/config/environment.js @@ -0,0 +1,48 @@ +'use strict'; + +module.exports = function (environment) { + const ENV = { + modulePrefix: 'docs-app', + environment, + rootURL: '/', + locationType: 'history', + EmberENV: { + EXTEND_PROTOTYPES: false, + FEATURES: { + // Here you can enable experimental features on an ember canary build + // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true + }, + }, + + APP: { + // Here you can pass flags/options to your application instance + // when it is created + }, + }; + + if (environment === 'development') { + // ENV.APP.LOG_RESOLVER = true; + // ENV.APP.LOG_ACTIVE_GENERATION = true; + // ENV.APP.LOG_TRANSITIONS = true; + // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; + // ENV.APP.LOG_VIEW_LOOKUPS = true; + } + + if (environment === 'test') { + // Testem prefers this... + ENV.locationType = 'none'; + + // keep test console output quieter + ENV.APP.LOG_ACTIVE_GENERATION = false; + ENV.APP.LOG_VIEW_LOOKUPS = false; + + ENV.APP.rootElement = '#ember-testing'; + ENV.APP.autoboot = false; + } + + if (environment === 'production') { + // here you can enable a production-specific feature + } + + return ENV; +}; diff --git a/docs-app/config/optional-features.json b/docs-app/config/optional-features.json new file mode 100644 index 00000000..b26286e2 --- /dev/null +++ b/docs-app/config/optional-features.json @@ -0,0 +1,6 @@ +{ + "application-template-wrapper": false, + "default-async-observers": true, + "jquery-integration": false, + "template-only-glimmer-components": true +} diff --git a/docs-app/config/targets.js b/docs-app/config/targets.js new file mode 100644 index 00000000..69c198d7 --- /dev/null +++ b/docs-app/config/targets.js @@ -0,0 +1,10 @@ +'use strict'; + +module.exports = { + browsers: [ + 'last 2 Chrome versions', + 'last 2 Edge versions', + 'last 2 Firefox versions', + 'last 2 Safari versions', + ], +}; diff --git a/docs-app/ember-cli-build.js b/docs-app/ember-cli-build.js new file mode 100644 index 00000000..e597eea8 --- /dev/null +++ b/docs-app/ember-cli-build.js @@ -0,0 +1,35 @@ +'use strict'; + +const { Webpack } = require('@embroider/webpack'); +const EmberApp = require('ember-cli/lib/broccoli/ember-app'); + +module.exports = function (defaults) { + const app = new EmberApp(defaults, { + // Add options here + autoImport: { + watchDependencies: ['ember-container-query'], + }, + 'ember-cli-babel': { + enableTypeScriptTransform: true, + }, + }); + + return require('@embroider/compat').compatBuild(app, Webpack, { + packagerOptions: { + webpackConfig: { + // ... + }, + }, + skipBabel: [ + { + package: 'qunit', + }, + ], + splitAtRoutes: ['album', 'dashboard', 'form', 'products'], + staticAddonTestSupportTrees: true, + staticAddonTrees: false, // due to ember-css-modules + staticComponents: false, // due to ember-css-modules + staticHelpers: true, + staticModifiers: true, + }); +}; diff --git a/docs-app/package.json b/docs-app/package.json new file mode 100644 index 00000000..0b2cffac --- /dev/null +++ b/docs-app/package.json @@ -0,0 +1,119 @@ +{ + "name": "docs-app", + "version": "4.0.0-alpha.4", + "private": true, + "description": "Container queries using Ember modifiers", + "keywords": [ + "container-queries", + "container-query", + "element-queries", + "element-query", + "ember-octane", + "emberjs", + "glint", + "responsive-design" + ], + "repository": { + "type": "git", + "url": "https://github.com/ijlee2/ember-container-query.git" + }, + "license": "MIT", + "author": "Isaac J. Lee", + "directories": { + "doc": "doc", + "test": "tests" + }, + "scripts": { + "build": "ember build --environment=production", + "build:test": "ember build --environment=test", + "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"", + "lint:css": "stylelint \"app/**/*.css\" --cache", + "lint:css:fix": "stylelint \"app/**/*.css\" --fix", + "lint:dependency": "ember dependency-lint", + "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"", + "lint:hbs": "ember-template-lint .", + "lint:hbs:fix": "ember-template-lint . --fix", + "lint:js": "eslint . --cache", + "lint:js:fix": "eslint . --fix", + "lint:types": "glint", + "start": "ember serve", + "test": "DEVICE='w3-h3' ember test", + "test:device": "ember test" + }, + "devDependencies": { + "@ember/optional-features": "^2.0.0", + "@ember/string": "^3.0.1", + "@ember/test-helpers": "^2.9.3", + "@embroider/compat": "^2.1.1", + "@embroider/core": "^2.1.1", + "@embroider/router": "^2.0.0", + "@embroider/webpack": "^2.1.1", + "@gavant/glint-template-types": "^0.3.2", + "@glimmer/component": "^1.1.2", + "@glimmer/tracking": "^1.1.2", + "@glint/core": "^v1.0.0-beta.3", + "@glint/environment-ember-loose": "^v1.0.0-beta.3", + "@glint/template": "^v1.0.0-beta.3", + "@percy/cli": "^1.20.2", + "@percy/ember": "^4.2.0", + "@tsconfig/ember": "^2.0.0", + "@types/qunit": "^2.19.4", + "@typescript-eslint/eslint-plugin": "^5.54.1", + "@typescript-eslint/parser": "^5.54.1", + "broccoli-asset-rev": "^3.0.0", + "concurrently": "^7.6.0", + "d3-array": "^3.2.2", + "d3-axis": "^3.0.0", + "d3-scale": "^4.0.2", + "d3-selection": "^3.0.0", + "d3-shape": "^3.2.0", + "ember-a11y-refocus": "^3.0.2", + "ember-a11y-testing": "^5.2.0", + "ember-auto-import": "^2.6.1", + "ember-cli": "~4.11.0", + "ember-cli-babel": "^7.26.11", + "ember-cli-dependency-checker": "^3.3.1", + "ember-cli-dependency-lint": "^2.0.1", + "ember-cli-htmlbars": "^6.2.0", + "ember-cli-inject-live-reload": "^2.1.0", + "ember-cli-netlify": "^0.4.1", + "ember-container-query": "4.0.0-alpha.4", + "ember-css-modules": "^2.0.1", + "ember-load-initializers": "^2.1.2", + "ember-modifier": "^4.1.0", + "ember-page-title": "^7.0.0", + "ember-qunit": "^6.2.0", + "ember-resolver": "^10.0.0", + "ember-source": "~4.11.0", + "ember-source-channel-url": "^3.0.0", + "ember-svg-jar": "^2.4.2", + "ember-template-lint": "^5.6.0", + "ember-template-lint-plugin-prettier": "^4.1.0", + "ember-test-selectors": "^6.0.0", + "ember-truth-helpers": "^3.1.1", + "eslint": "^8.35.0", + "eslint-config-prettier": "^8.7.0", + "eslint-plugin-ember": "^11.4.7", + "eslint-plugin-n": "^15.6.1", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-qunit": "^7.3.4", + "eslint-plugin-simple-import-sort": "^10.0.0", + "eslint-plugin-typescript-sort-keys": "^2.1.0", + "loader.js": "^4.7.0", + "prettier": "^2.8.4", + "qunit": "^2.19.4", + "qunit-dom": "^2.0.0", + "stylelint": "^15.2.0", + "stylelint-config-standard": "^30.0.1", + "stylelint-no-unsupported-browser-features": "^6.1.0", + "stylelint-order": "^6.0.3", + "typescript": "^4.9.5", + "webpack": "^5.75.0" + }, + "engines": { + "node": "14.* || 16.* || >= 18" + }, + "ember": { + "edition": "octane" + } +} diff --git a/docs-app/public/assets/favicon.png b/docs-app/public/assets/favicon.png new file mode 100644 index 00000000..fa939e22 Binary files /dev/null and b/docs-app/public/assets/favicon.png differ diff --git a/test-app/public/images/widgets/widget-3/venue-extra-wide@1x.jpg b/docs-app/public/images/widgets/widget-3/venue-extra-wide@1x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-extra-wide@1x.jpg rename to docs-app/public/images/widgets/widget-3/venue-extra-wide@1x.jpg diff --git a/test-app/public/images/widgets/widget-3/venue-extra-wide@2x.jpg b/docs-app/public/images/widgets/widget-3/venue-extra-wide@2x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-extra-wide@2x.jpg rename to docs-app/public/images/widgets/widget-3/venue-extra-wide@2x.jpg diff --git a/test-app/public/images/widgets/widget-3/venue-extra-wide@4x.jpg b/docs-app/public/images/widgets/widget-3/venue-extra-wide@4x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-extra-wide@4x.jpg rename to docs-app/public/images/widgets/widget-3/venue-extra-wide@4x.jpg diff --git a/test-app/public/images/widgets/widget-3/venue-square@1x.jpg b/docs-app/public/images/widgets/widget-3/venue-square@1x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-square@1x.jpg rename to docs-app/public/images/widgets/widget-3/venue-square@1x.jpg diff --git a/test-app/public/images/widgets/widget-3/venue-square@2x.jpg b/docs-app/public/images/widgets/widget-3/venue-square@2x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-square@2x.jpg rename to docs-app/public/images/widgets/widget-3/venue-square@2x.jpg diff --git a/test-app/public/images/widgets/widget-3/venue-square@4x.jpg b/docs-app/public/images/widgets/widget-3/venue-square@4x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-square@4x.jpg rename to docs-app/public/images/widgets/widget-3/venue-square@4x.jpg diff --git a/test-app/public/images/widgets/widget-3/venue-wide@1x.jpg b/docs-app/public/images/widgets/widget-3/venue-wide@1x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-wide@1x.jpg rename to docs-app/public/images/widgets/widget-3/venue-wide@1x.jpg diff --git a/test-app/public/images/widgets/widget-3/venue-wide@2x.jpg b/docs-app/public/images/widgets/widget-3/venue-wide@2x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-wide@2x.jpg rename to docs-app/public/images/widgets/widget-3/venue-wide@2x.jpg diff --git a/test-app/public/images/widgets/widget-3/venue-wide@4x.jpg b/docs-app/public/images/widgets/widget-3/venue-wide@4x.jpg similarity index 100% rename from test-app/public/images/widgets/widget-3/venue-wide@4x.jpg rename to docs-app/public/images/widgets/widget-3/venue-wide@4x.jpg diff --git a/test-app/public/images/widgets/widget-4/avatar.jpg b/docs-app/public/images/widgets/widget-4/avatar.jpg similarity index 100% rename from test-app/public/images/widgets/widget-4/avatar.jpg rename to docs-app/public/images/widgets/widget-4/avatar.jpg diff --git a/test-app/public/material-design-icons/alert.svg b/docs-app/public/material-design-icons/alert.svg similarity index 100% rename from test-app/public/material-design-icons/alert.svg rename to docs-app/public/material-design-icons/alert.svg diff --git a/test-app/public/material-design-icons/alpha-e-box.svg b/docs-app/public/material-design-icons/alpha-e-box.svg similarity index 100% rename from test-app/public/material-design-icons/alpha-e-box.svg rename to docs-app/public/material-design-icons/alpha-e-box.svg diff --git a/test-app/public/material-design-icons/check.svg b/docs-app/public/material-design-icons/check.svg similarity index 100% rename from test-app/public/material-design-icons/check.svg rename to docs-app/public/material-design-icons/check.svg diff --git a/test-app/public/material-design-icons/chevron-left.svg b/docs-app/public/material-design-icons/chevron-left.svg similarity index 100% rename from test-app/public/material-design-icons/chevron-left.svg rename to docs-app/public/material-design-icons/chevron-left.svg diff --git a/test-app/public/material-design-icons/chevron-right.svg b/docs-app/public/material-design-icons/chevron-right.svg similarity index 100% rename from test-app/public/material-design-icons/chevron-right.svg rename to docs-app/public/material-design-icons/chevron-right.svg diff --git a/test-app/public/material-design-icons/heart-outline.svg b/docs-app/public/material-design-icons/heart-outline.svg similarity index 100% rename from test-app/public/material-design-icons/heart-outline.svg rename to docs-app/public/material-design-icons/heart-outline.svg diff --git a/test-app/public/material-design-icons/message-processing-outline.svg b/docs-app/public/material-design-icons/message-processing-outline.svg similarity index 100% rename from test-app/public/material-design-icons/message-processing-outline.svg rename to docs-app/public/material-design-icons/message-processing-outline.svg diff --git a/test-app/public/material-design-icons/share-variant-outline.svg b/docs-app/public/material-design-icons/share-variant-outline.svg similarity index 100% rename from test-app/public/material-design-icons/share-variant-outline.svg rename to docs-app/public/material-design-icons/share-variant-outline.svg diff --git a/test-app/public/material-design-icons/stop.svg b/docs-app/public/material-design-icons/stop.svg similarity index 100% rename from test-app/public/material-design-icons/stop.svg rename to docs-app/public/material-design-icons/stop.svg diff --git a/test-app/public/material-design-icons/sync.svg b/docs-app/public/material-design-icons/sync.svg similarity index 100% rename from test-app/public/material-design-icons/sync.svg rename to docs-app/public/material-design-icons/sync.svg diff --git a/docs-app/public/robots.txt b/docs-app/public/robots.txt new file mode 100644 index 00000000..f5916452 --- /dev/null +++ b/docs-app/public/robots.txt @@ -0,0 +1,3 @@ +# http://www.robotstxt.org +User-agent: * +Disallow: diff --git a/docs-app/testem.js b/docs-app/testem.js new file mode 100644 index 00000000..2624dce2 --- /dev/null +++ b/docs-app/testem.js @@ -0,0 +1,75 @@ +'use strict'; + +/* + The filter expressions mean the following in practice: + + The command `DEVICE='w1-h1' ember test` only runs application tests that are + not marked with the filter @w2, @w3, @h2, or @h3. In other words, we only run + application tests that are marked with @w1, @h1, or can be run on all devices. + + The command `DEVICE='w3-h3' ember test` runs all application, rendering, and + unit tests, as long as they are not marked with @w1, @w2, @h1, or @h2. +*/ +const FILTERS = { + 'w1-h1': '/^(?=(.*Acceptance))(?!(.*@w2|.*@w3|.*@h2|.*@h3))/', + 'w2-h1': '/^(?=(.*Acceptance))(?!(.*@w1|.*@w3|.*@h2|.*@h3))/', + 'w3-h1': '/^(?=(.*Acceptance))(?!(.*@w1|.*@w2|.*@h2|.*@h3))/', + + 'w1-h2': '/^(?=(.*Acceptance))(?!(.*@w2|.*@w3|.*@h1|.*@h3))/', + 'w2-h2': '/^(?=(.*Acceptance))(?!(.*@w1|.*@w3|.*@h1|.*@h3))/', + 'w3-h2': '/^(?=(.*Acceptance))(?!(.*@w1|.*@w2|.*@h1|.*@h3))/', + + 'w1-h3': '/^(?=(.*Acceptance))(?!(.*@w2|.*@w3|.*@h1|.*@h2))/', + 'w2-h3': '/^(?=(.*Acceptance))(?!(.*@w1|.*@w3|.*@h1|.*@h2))/', + 'w3-h3': '/^(?!(.*@w1|.*@w2|.*@h1|.*@h2))/', +}; + +const WINDOW_SIZES = { + 'w1-h1': '400,300', + 'w2-h1': '900,300', + 'w3-h1': '1400,300', + + 'w1-h2': '400,600', + 'w2-h2': '900,600', + 'w3-h2': '1400,600', + + 'w1-h3': '400,900', + 'w2-h3': '900,900', + 'w3-h3': '1400,900', +}; + +const { DEVICE = 'w3-h3' } = process.env; + +const filter = encodeURIComponent(FILTERS[DEVICE]); +const windowSize = WINDOW_SIZES[DEVICE]; +const [width, height] = windowSize.split(','); + +module.exports = { + test_page: `tests/index.html?filter=${filter}&width=${width}&height=${height}&hidepassed&nolint`, + disable_watching: true, + launch_in_ci: ['Chrome'], + launch_in_dev: ['Chrome'], + browser_start_timeout: 60, + browser_args: { + Chrome: { + ci: [ + // --no-sandbox is needed when running Chrome inside a container + process.env.CI ? '--no-sandbox' : null, + '--headless', + '--disable-dev-shm-usage', + '--disable-software-rasterizer', + '--mute-audio', + '--remote-debugging-port=0', + `--window-size=${windowSize}`, + ].filter(Boolean), + + dev: [ + '--disable-dev-shm-usage', + '--disable-software-rasterizer', + '--mute-audio', + '--remote-debugging-port=0', + `--window-size=${windowSize}`, + ], + }, + }, +}; diff --git a/test-app/tests/acceptance/album/accessibility-test.ts b/docs-app/tests/acceptance/album/accessibility-test.ts similarity index 100% rename from test-app/tests/acceptance/album/accessibility-test.ts rename to docs-app/tests/acceptance/album/accessibility-test.ts diff --git a/test-app/tests/acceptance/album/visual-regression-test.ts b/docs-app/tests/acceptance/album/visual-regression-test.ts similarity index 100% rename from test-app/tests/acceptance/album/visual-regression-test.ts rename to docs-app/tests/acceptance/album/visual-regression-test.ts diff --git a/test-app/tests/acceptance/dashboard/accessibility-test.ts b/docs-app/tests/acceptance/dashboard/accessibility-test.ts similarity index 100% rename from test-app/tests/acceptance/dashboard/accessibility-test.ts rename to docs-app/tests/acceptance/dashboard/accessibility-test.ts diff --git a/test-app/tests/acceptance/dashboard/visual-regression-test.ts b/docs-app/tests/acceptance/dashboard/visual-regression-test.ts similarity index 95% rename from test-app/tests/acceptance/dashboard/visual-regression-test.ts rename to docs-app/tests/acceptance/dashboard/visual-regression-test.ts index 8459051a..99f4ee2d 100644 --- a/test-app/tests/acceptance/dashboard/visual-regression-test.ts +++ b/docs-app/tests/acceptance/dashboard/visual-regression-test.ts @@ -14,9 +14,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w1 @h1 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-wide'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert @@ -93,9 +91,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w2 @h1 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-square'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert @@ -172,9 +168,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w3 @h1 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-tall'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert @@ -263,9 +257,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w1 @h2 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-wide'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert @@ -342,9 +334,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w2 @h2 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-square'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert @@ -421,9 +411,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w3 @h2 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-tall'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert @@ -512,9 +500,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w1 @h3 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-wide'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert @@ -591,9 +577,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w2 @h3 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-square'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert @@ -670,9 +654,7 @@ module('Acceptance | dashboard', function (hooks) { test('@w3 @h3 Visual snapshot', async function (assert) { // Widget 1 - assert - .dom('[data-test-widget="1"] [data-test-container-query]') - .hasAttribute('data-container-query-tall'); + assert.dom('[data-test-widget="1"]').exists('We see the first widget.'); // Widget 2 assert diff --git a/test-app/tests/acceptance/form/accessibility-test.ts b/docs-app/tests/acceptance/form/accessibility-test.ts similarity index 100% rename from test-app/tests/acceptance/form/accessibility-test.ts rename to docs-app/tests/acceptance/form/accessibility-test.ts diff --git a/test-app/tests/acceptance/form/visual-regression-test.ts b/docs-app/tests/acceptance/form/visual-regression-test.ts similarity index 100% rename from test-app/tests/acceptance/form/visual-regression-test.ts rename to docs-app/tests/acceptance/form/visual-regression-test.ts diff --git a/docs-app/tests/acceptance/index/accessibility-test.ts b/docs-app/tests/acceptance/index/accessibility-test.ts new file mode 100644 index 00000000..f52a7a4c --- /dev/null +++ b/docs-app/tests/acceptance/index/accessibility-test.ts @@ -0,0 +1,68 @@ +import { visit } from '@ember/test-helpers'; +import { a11yAudit } from 'ember-a11y-testing/test-support'; +import { module, test } from 'qunit'; + +import { setupApplicationTest, timeout } from '../../helpers'; + +module('Acceptance | index', function (hooks) { + setupApplicationTest(hooks); + + hooks.beforeEach(async function () { + await visit('/'); + await timeout(); + }); + + test('@w1 @h1 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); + + test('@w2 @h1 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); + + test('@w3 @h1 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); + + test('@w1 @h2 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); + + test('@w2 @h2 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); + + test('@w3 @h2 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); + + test('@w1 @h3 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); + + test('@w2 @h3 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); + + test('@w3 @h3 Accessibility audit', async function (assert) { + await a11yAudit(); + + assert.ok(true, 'We passed Axe tests.'); + }); +}); diff --git a/test-app/tests/acceptance/not-found/accessibility-test.ts b/docs-app/tests/acceptance/not-found/accessibility-test.ts similarity index 100% rename from test-app/tests/acceptance/not-found/accessibility-test.ts rename to docs-app/tests/acceptance/not-found/accessibility-test.ts diff --git a/test-app/tests/acceptance/products/accessibility-test.ts b/docs-app/tests/acceptance/products/accessibility-test.ts similarity index 100% rename from test-app/tests/acceptance/products/accessibility-test.ts rename to docs-app/tests/acceptance/products/accessibility-test.ts diff --git a/test-app/tests/acceptance/products/visual-regression-test.ts b/docs-app/tests/acceptance/products/visual-regression-test.ts similarity index 100% rename from test-app/tests/acceptance/products/visual-regression-test.ts rename to docs-app/tests/acceptance/products/visual-regression-test.ts diff --git a/docs-app/tests/helpers/index.ts b/docs-app/tests/helpers/index.ts new file mode 100644 index 00000000..a26d4c10 --- /dev/null +++ b/docs-app/tests/helpers/index.ts @@ -0,0 +1,60 @@ +import { + setupApplicationTest as upstreamSetupApplicationTest, + setupRenderingTest as upstreamSetupRenderingTest, + setupTest as upstreamSetupTest, +} from 'ember-qunit'; +import EmberResolver from 'ember-resolver'; + +import { resetViewport } from './reset-viewport'; + +interface SetupTestOptions { + resolver?: EmberResolver | undefined; +} + +// This file exists to provide wrappers around ember-qunit's / ember-mocha's +// test setup functions. This way, you can easily extend the setup that is +// needed per test type. + +function setupApplicationTest( + hooks: NestedHooks, + options?: SetupTestOptions +): void { + upstreamSetupApplicationTest(hooks, options); + resetViewport(hooks); + + // Additional setup for application tests can be done here. + // + // For example, if you need an authenticated session for each + // application test, you could do: + // + // hooks.beforeEach(async function () { + // await authenticateSession(); // ember-simple-auth + // }); + // + // This is also a good place to call test setup functions coming + // from other addons: + // + // setupIntl(hooks); // ember-intl + // setupMirage(hooks); // ember-cli-mirage +} + +function setupRenderingTest( + hooks: NestedHooks, + options?: SetupTestOptions +): void { + upstreamSetupRenderingTest(hooks, options); + + // Additional setup for rendering tests can be done here. +} + +function setupTest(hooks: NestedHooks, options?: SetupTestOptions): void { + upstreamSetupTest(hooks, options); + + // Additional setup for unit tests can be done here. +} + +export { setupApplicationTest, setupRenderingTest, setupTest }; + +export * from './percy'; +export * from './reset-viewport'; +export * from './resize-container'; diff --git a/test-app/tests/helpers/percy.ts b/docs-app/tests/helpers/percy.ts similarity index 100% rename from test-app/tests/helpers/percy.ts rename to docs-app/tests/helpers/percy.ts diff --git a/test-app/tests/helpers/reset-viewport.ts b/docs-app/tests/helpers/reset-viewport.ts similarity index 100% rename from test-app/tests/helpers/reset-viewport.ts rename to docs-app/tests/helpers/reset-viewport.ts diff --git a/docs-app/tests/helpers/resize-container.ts b/docs-app/tests/helpers/resize-container.ts new file mode 100644 index 00000000..d42125bd --- /dev/null +++ b/docs-app/tests/helpers/resize-container.ts @@ -0,0 +1,37 @@ +import { assert } from '@ember/debug'; +import { later } from '@ember/runloop'; +import { find } from '@ember/test-helpers'; + +// This is a magic number. It is the time (in ms) for things to `settle` +// after a resize. It is the time that we need to wait before assertions +// that should pass will always pass. +const RERENDER_TIME = 50; + +export function timeout(milliseconds = RERENDER_TIME): Promise { + return new Promise((resolve) => { + later(resolve, milliseconds); + }); +} + +export async function resizeContainer({ + height, + width, +}: { + height: number; + width: number; +}): Promise { + const parentElement = find('[data-test-parent-element]'); + + assert( + 'Please create a parent element with the test selector `data-test-parent-element`.', + parentElement + ); + + // Since has a style of `height: 100%; width: 100%;`, + // we can set its parent element's width and height to cause container + // queries to be evaluated. + (parentElement as HTMLElement).style.height = `${height}px`; + (parentElement as HTMLElement).style.width = `${width}px`; + + await timeout(); +} diff --git a/docs-app/tests/index.html b/docs-app/tests/index.html new file mode 100644 index 00000000..1c1db938 --- /dev/null +++ b/docs-app/tests/index.html @@ -0,0 +1,42 @@ + + + + + + + + + Ember Container Query Tests + + {{content-for "head"}} + {{content-for "test-head"}} + + + + + + + {{content-for "head-footer"}} + {{content-for "test-head-footer"}} + + + {{content-for "body"}} + {{content-for "test-body"}} + +
+
+
+
+
+
+ + + + + + + + {{content-for "body-footer"}} + {{content-for "test-body-footer"}} + + diff --git a/docs-app/tests/integration/.gitkeep b/docs-app/tests/integration/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/test-app/tests/integration/components/navigation-menu-test.ts b/docs-app/tests/integration/components/navigation-menu-test.ts similarity index 100% rename from test-app/tests/integration/components/navigation-menu-test.ts rename to docs-app/tests/integration/components/navigation-menu-test.ts diff --git a/test-app/tests/integration/components/products/product/card-test.ts b/docs-app/tests/integration/components/products/product/card-test.ts similarity index 97% rename from test-app/tests/integration/components/products/product/card-test.ts rename to docs-app/tests/integration/components/products/product/card-test.ts index eb80aa9b..70f72b9b 100644 --- a/test-app/tests/integration/components/products/product/card-test.ts +++ b/docs-app/tests/integration/components/products/product/card-test.ts @@ -1,10 +1,10 @@ import type { TestContext as BaseTestContext } from '@ember/test-helpers'; import { render } from '@ember/test-helpers'; +import type { Product } from 'docs-app/data/products'; import { a11yAudit } from 'ember-a11y-testing/test-support'; import { hbs } from 'ember-cli-htmlbars'; import { setupRenderingTest } from 'ember-qunit'; import { module, test } from 'qunit'; -import type { Product } from 'test-app/data/products'; interface TestContext extends BaseTestContext { product: Product; diff --git a/test-app/tests/integration/components/products/product/image-test.ts b/docs-app/tests/integration/components/products/product/image-test.ts similarity index 100% rename from test-app/tests/integration/components/products/product/image-test.ts rename to docs-app/tests/integration/components/products/product/image-test.ts diff --git a/test-app/tests/integration/components/tracks-test.ts b/docs-app/tests/integration/components/tracks-test.ts similarity index 96% rename from test-app/tests/integration/components/tracks-test.ts rename to docs-app/tests/integration/components/tracks-test.ts index 1cd2dac1..30337b02 100644 --- a/test-app/tests/integration/components/tracks-test.ts +++ b/docs-app/tests/integration/components/tracks-test.ts @@ -1,9 +1,9 @@ import type { TestContext as BaseTestContext } from '@ember/test-helpers'; import { render } from '@ember/test-helpers'; +import type { Album } from 'docs-app/data/album'; +import albumData from 'docs-app/data/album'; import { hbs } from 'ember-cli-htmlbars'; import { module, test } from 'qunit'; -import type { Album } from 'test-app/data/album'; -import albumData from 'test-app/data/album'; import { resizeContainer, setupRenderingTest } from '../../helpers'; diff --git a/test-app/tests/integration/components/tracks/list-test.ts b/docs-app/tests/integration/components/tracks/list-test.ts similarity index 96% rename from test-app/tests/integration/components/tracks/list-test.ts rename to docs-app/tests/integration/components/tracks/list-test.ts index 11d5fb74..50deb1bf 100644 --- a/test-app/tests/integration/components/tracks/list-test.ts +++ b/docs-app/tests/integration/components/tracks/list-test.ts @@ -1,9 +1,9 @@ import type { TestContext as BaseTestContext } from '@ember/test-helpers'; import { findAll, render } from '@ember/test-helpers'; +import type { Track } from 'docs-app/data/album'; +import albumData from 'docs-app/data/album'; import { hbs } from 'ember-cli-htmlbars'; import { module, test } from 'qunit'; -import type { Track } from 'test-app/data/album'; -import albumData from 'test-app/data/album'; import { setupRenderingTest } from '../../../helpers'; diff --git a/test-app/tests/integration/components/tracks/table-test.ts b/docs-app/tests/integration/components/tracks/table-test.ts similarity index 96% rename from test-app/tests/integration/components/tracks/table-test.ts rename to docs-app/tests/integration/components/tracks/table-test.ts index 35a17639..df23e767 100644 --- a/test-app/tests/integration/components/tracks/table-test.ts +++ b/docs-app/tests/integration/components/tracks/table-test.ts @@ -1,9 +1,9 @@ import type { TestContext as BaseTestContext } from '@ember/test-helpers'; import { findAll, render } from '@ember/test-helpers'; +import type { Track } from 'docs-app/data/album'; +import albumData from 'docs-app/data/album'; import { hbs } from 'ember-cli-htmlbars'; import { module, test } from 'qunit'; -import type { Track } from 'test-app/data/album'; -import albumData from 'test-app/data/album'; import { setupRenderingTest } from '../../../helpers'; diff --git a/test-app/tests/integration/components/ui/form-test.ts b/docs-app/tests/integration/components/ui/form-test.ts similarity index 100% rename from test-app/tests/integration/components/ui/form-test.ts rename to docs-app/tests/integration/components/ui/form-test.ts diff --git a/test-app/tests/integration/components/ui/form/checkbox-test.ts b/docs-app/tests/integration/components/ui/form/checkbox-test.ts similarity index 100% rename from test-app/tests/integration/components/ui/form/checkbox-test.ts rename to docs-app/tests/integration/components/ui/form/checkbox-test.ts diff --git a/test-app/tests/integration/components/ui/form/field-test.ts b/docs-app/tests/integration/components/ui/form/field-test.ts similarity index 100% rename from test-app/tests/integration/components/ui/form/field-test.ts rename to docs-app/tests/integration/components/ui/form/field-test.ts diff --git a/test-app/tests/integration/components/ui/form/information-test.ts b/docs-app/tests/integration/components/ui/form/information-test.ts similarity index 100% rename from test-app/tests/integration/components/ui/form/information-test.ts rename to docs-app/tests/integration/components/ui/form/information-test.ts diff --git a/test-app/tests/integration/components/ui/form/input-test.ts b/docs-app/tests/integration/components/ui/form/input-test.ts similarity index 100% rename from test-app/tests/integration/components/ui/form/input-test.ts rename to docs-app/tests/integration/components/ui/form/input-test.ts diff --git a/test-app/tests/integration/components/ui/form/textarea-test.ts b/docs-app/tests/integration/components/ui/form/textarea-test.ts similarity index 100% rename from test-app/tests/integration/components/ui/form/textarea-test.ts rename to docs-app/tests/integration/components/ui/form/textarea-test.ts diff --git a/test-app/tests/integration/components/ui/page-test.ts b/docs-app/tests/integration/components/ui/page-test.ts similarity index 100% rename from test-app/tests/integration/components/ui/page-test.ts rename to docs-app/tests/integration/components/ui/page-test.ts diff --git a/test-app/tests/integration/components/widgets/widget-1-test.ts b/docs-app/tests/integration/components/widgets/widget-1-test.ts similarity index 100% rename from test-app/tests/integration/components/widgets/widget-1-test.ts rename to docs-app/tests/integration/components/widgets/widget-1-test.ts diff --git a/test-app/tests/integration/components/widgets/widget-2-test.ts b/docs-app/tests/integration/components/widgets/widget-2-test.ts similarity index 100% rename from test-app/tests/integration/components/widgets/widget-2-test.ts rename to docs-app/tests/integration/components/widgets/widget-2-test.ts diff --git a/test-app/tests/integration/components/widgets/widget-3-test.ts b/docs-app/tests/integration/components/widgets/widget-3-test.ts similarity index 100% rename from test-app/tests/integration/components/widgets/widget-3-test.ts rename to docs-app/tests/integration/components/widgets/widget-3-test.ts diff --git a/test-app/tests/integration/components/widgets/widget-4-test.ts b/docs-app/tests/integration/components/widgets/widget-4-test.ts similarity index 100% rename from test-app/tests/integration/components/widgets/widget-4-test.ts rename to docs-app/tests/integration/components/widgets/widget-4-test.ts diff --git a/test-app/tests/integration/components/widgets/widget-5-test.ts b/docs-app/tests/integration/components/widgets/widget-5-test.ts similarity index 100% rename from test-app/tests/integration/components/widgets/widget-5-test.ts rename to docs-app/tests/integration/components/widgets/widget-5-test.ts diff --git a/test-app/tests/integration/modifiers/draw-stacked-chart-test.ts b/docs-app/tests/integration/modifiers/draw-stacked-chart-test.ts similarity index 100% rename from test-app/tests/integration/modifiers/draw-stacked-chart-test.ts rename to docs-app/tests/integration/modifiers/draw-stacked-chart-test.ts diff --git a/test-app/tests/integration/modifiers/dynamic-css-grid-test.ts b/docs-app/tests/integration/modifiers/dynamic-css-grid-test.ts similarity index 100% rename from test-app/tests/integration/modifiers/dynamic-css-grid-test.ts rename to docs-app/tests/integration/modifiers/dynamic-css-grid-test.ts diff --git a/docs-app/tests/test-helper.ts b/docs-app/tests/test-helper.ts new file mode 100644 index 00000000..96df3d27 --- /dev/null +++ b/docs-app/tests/test-helper.ts @@ -0,0 +1,23 @@ +import 'qunit-dom'; + +import { setApplication } from '@ember/test-helpers'; +import Application from 'docs-app/app'; +import config from 'docs-app/config/environment'; +import { setRunOptions } from 'ember-a11y-testing/test-support'; +import { start } from 'ember-qunit'; +import * as QUnit from 'qunit'; +import { setup } from 'qunit-dom'; + +setApplication(Application.create(config.APP)); + +setup(QUnit.assert); + +setRunOptions({ + rules: { + 'scrollable-region-focusable': { + enabled: false, + }, + }, +}); + +start(); diff --git a/docs-app/tests/unit/.gitkeep b/docs-app/tests/unit/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/test-app/tests/unit/utils/components/widgets/widget-2-test.ts b/docs-app/tests/unit/utils/components/widgets/widget-2-test.ts similarity index 95% rename from test-app/tests/unit/utils/components/widgets/widget-2-test.ts rename to docs-app/tests/unit/utils/components/widgets/widget-2-test.ts index aeb1f088..345b9ab7 100644 --- a/test-app/tests/unit/utils/components/widgets/widget-2-test.ts +++ b/docs-app/tests/unit/utils/components/widgets/widget-2-test.ts @@ -1,10 +1,10 @@ -import { module, test } from 'qunit'; -import musicRevenue from 'test-app/data/music-revenue'; +import musicRevenue from 'docs-app/data/music-revenue'; import { createDataForVisualization, createSummariesForCaptions, formatRevenue, -} from 'test-app/utils/components/widgets/widget-2'; +} from 'docs-app/utils/components/widgets/widget-2'; +import { module, test } from 'qunit'; module('Unit | Utility | components/widgets/widget-2', function () { module('formatRevenue', function () { diff --git a/test-app/tests/unit/utils/components/widgets/widget-3-test.ts b/docs-app/tests/unit/utils/components/widgets/widget-3-test.ts similarity index 97% rename from test-app/tests/unit/utils/components/widgets/widget-3-test.ts rename to docs-app/tests/unit/utils/components/widgets/widget-3-test.ts index e6b5f300..4062bf4c 100644 --- a/test-app/tests/unit/utils/components/widgets/widget-3-test.ts +++ b/docs-app/tests/unit/utils/components/widgets/widget-3-test.ts @@ -1,8 +1,8 @@ import type { TestContext as BaseTestContext } from '@ember/test-helpers'; +import concertData from 'docs-app/data/concert'; +import type { ContainerDimensions } from 'docs-app/utils/components/widgets/widget-3'; +import { findBestFittingImage } from 'docs-app/utils/components/widgets/widget-3'; import { module, test } from 'qunit'; -import concertData from 'test-app/data/concert'; -import type { ContainerDimensions } from 'test-app/utils/components/widgets/widget-3'; -import { findBestFittingImage } from 'test-app/utils/components/widgets/widget-3'; type TestMatrix = Map; diff --git a/docs-app/tsconfig.json b/docs-app/tsconfig.json new file mode 100644 index 00000000..e337e909 --- /dev/null +++ b/docs-app/tsconfig.json @@ -0,0 +1,27 @@ +{ + "extends": "@tsconfig/ember/tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "docs-app/tests/*": [ + "tests/*" + ], + "docs-app/*": [ + "app/*" + ], + "*": [ + "types/*" + ] + }, + "moduleResolution": "node16", + "skipLibCheck": true + }, + "include": [ + "app/**/*", + "tests/**/*", + "types/**/*" + ], + "glint": { + "environment": "ember-loose" + } +} diff --git a/docs-app/types/global.d.ts b/docs-app/types/global.d.ts new file mode 100644 index 00000000..8ddfbf4c --- /dev/null +++ b/docs-app/types/global.d.ts @@ -0,0 +1,7 @@ +// Types for compiled templates +declare module 'docs-app/templates/*' { + import { TemplateFactory } from 'ember-cli-htmlbars'; + + const tmpl: TemplateFactory; + export default tmpl; +} diff --git a/docs-app/types/test-app/index.d.ts b/docs-app/types/test-app/index.d.ts new file mode 100644 index 00000000..54e7871c --- /dev/null +++ b/docs-app/types/test-app/index.d.ts @@ -0,0 +1,35 @@ +// Add any types here that you need for local development only. +// These will *not* be published as part of your addon, so be careful that your published code does not rely on them! + +import '@glint/environment-ember-loose'; +import 'ember-source/types'; +import 'ember-source/types/preview'; + +import SvgJarHelper from '@gavant/glint-template-types/types/ember-svg-jar/helpers/svg-jar'; +import AndHelper from '@gavant/glint-template-types/types/ember-truth-helpers/helpers/and'; +import OrHelper from '@gavant/glint-template-types/types/ember-truth-helpers/helpers/or'; +import { ComponentLike, HelperLike } from '@glint/template'; +import type EmberContainerQueryRegistry from 'ember-container-query/template-registry'; + +type NavigationNarratorComponent = ComponentLike<{ + Args: { + skipTo: string; + }; +}>; + +type PageTitleHelper = HelperLike<{ + Args: { Positional: [title: string] }; + Return: void; +}>; + +declare module '@glint/environment-ember-loose/registry' { + export default interface Registry extends EmberContainerQueryRegistry { + // Add any registry entries from other addons here that your addon itself uses (in non-strict mode templates) + // See https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons + NavigationNarrator: NavigationNarratorComponent; + and: typeof AndHelper; + or: typeof OrHelper; + 'page-title': PageTitleHelper; + 'svg-jar': typeof SvgJarHelper; + } +} diff --git a/ember-container-query/README.md b/ember-container-query/README.md index 3aac0dcc..21b1f2c7 100644 --- a/ember-container-query/README.md +++ b/ember-container-query/README.md @@ -330,7 +330,7 @@ Let's look at the code that created the video demo above. You can see that the album page uses 2 `` components. Rest assured, they act independently of each other. When you pair `` with some CSS, you can create layouts beyond the dreams of others! 🙌 -For more examples, I encourage you to check out the code for my demo app. It is located under [`test-app/app`](https://github.com/ijlee2/ember-container-query/tree/main/test-app/app) folder and is structured like a typical Ember app. +For more examples, I encourage you to check out the code for my demo app. It is located under the [`docs-app`](https://github.com/ijlee2/ember-container-query/tree/main/docs-app) folder and is structured like a typical Ember app. Compatibility diff --git a/package.json b/package.json index 51284438..f6a70d35 100644 --- a/package.json +++ b/package.json @@ -10,19 +10,21 @@ "license": "MIT", "author": "Isaac J. Lee", "workspaces": [ + "docs-app", "ember-container-query", "test-app" ], "scripts": { - "build": "yarn workspace ember-container-query run build", - "build:deploy": "yarn workspaces run build", + "build": "concurrently \"npm:build:*\"", + "build:addon": "yarn workspace ember-container-query run build", + "build:docs-app": "yarn workspace docs-app run build", "changelog": "lerna-changelog", "lint": "yarn workspaces run lint", "lint:fix": "yarn workspaces run lint:fix", - "prepare": "yarn build", - "start": "concurrently 'npm:start:*' --restart-after 5000 --prefix-colors cyan,white,yellow", + "prepare": "yarn build:addon", + "start": "concurrently \"npm:start:*\" --restart-after 5000 --prefix-colors cyan,white,yellow", "start:addon": "yarn workspace ember-container-query run start", - "start:test": "yarn workspace test-app run start", + "start:docs-app": "yarn workspace docs-app run start", "test": "yarn workspaces run test" }, "devDependencies": { diff --git a/test-app/app/router.ts b/test-app/app/router.ts index 094c2e22..adfefa44 100644 --- a/test-app/app/router.ts +++ b/test-app/app/router.ts @@ -8,10 +8,5 @@ export default class Router extends EmberRouter { } Router.map(function () { - this.route('album'); - this.route('dashboard'); - this.route('form'); - this.route('products'); - - this.route('not-found', { path: '*' }); + // Add routes here }); diff --git a/test-app/app/styles/app.css b/test-app/app/styles/app.css index 264908e0..e69de29b 100644 --- a/test-app/app/styles/app.css +++ b/test-app/app/styles/app.css @@ -1,99 +0,0 @@ -html { - font-size: 16px; - height: 100%; -} - -body { - background-color: #020e1c; - color: rgb(247 252 251 / 90%); - font-family: Raleway, sans-serif; - font-weight: 400; - height: 100%; - letter-spacing: 0.03rem; - margin: 0; -} - -* { - margin: 0; - padding: 0; -} - -h1 { - font-size: 2.25em; - font-weight: 700; - margin-bottom: 1.5rem; -} - -h2 { - font-size: 1.5rem; - font-weight: 700; - margin-bottom: 1rem; -} - -h3 { - font-size: 1.25rem; - font-weight: 700; - margin-bottom: 0.75rem; -} - -h4 { - font-size: 1rem; - font-weight: 700; - margin-bottom: 0.5rem; -} - -a { - color: rgb(245 255 250 / 88%); - display: inline-block; -} - -button { - background: transparent; - border: 0.0625rem solid rgb(247 252 251 / 50%); - border-radius: 0.15rem; - color: rgb(247 252 251 / 90%); - font-family: Raleway, sans-serif; - font-size: 0.875rem; - padding: 0.25rem 0.5rem; -} - -button:hover { - background-color: rgb(255 255 255 / 22.5%); - cursor: pointer; - transition: background-color 0.17s; -} - -input { - font-family: Raleway, sans-serif; - font-size: 1rem; -} - -p { - margin-bottom: 0.75rem; -} - -table { - border-collapse: collapse; - width: 100%; -} - -textarea { - font-family: Raleway, sans-serif; - font-size: 1rem; -} - -th, -td { - border: 0.0625rem solid rgb(112 128 144 / 100%); - padding: 0.25rem 0.5rem; -} - -ul { - list-style-type: none; -} - -:global(#ember-testing-container) { - background-color: #020e1c !important; - border: 0.0625rem solid rgb(211 211 211 / 15%) !important; - overflow: visible !important; -} diff --git a/test-app/app/templates/application.hbs b/test-app/app/templates/application.hbs index 028494cd..e189f557 100644 --- a/test-app/app/templates/application.hbs +++ b/test-app/app/templates/application.hbs @@ -1,33 +1,17 @@ {{page-title "Ember Container Query"}} -
-
- - - -
- -
-
+
+
+
{{outlet}}
-