diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2c30076..d30ef51 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -11,14 +11,18 @@ jobs: name: Lint runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 14 - name: Install Dependencies run: yarn install --frozen-lockfile - - name: Lint + - name: Lint Addon run: yarn lint + working-directory: ember-toggle + - name: Lint Test App + run: yarn lint + working-directory: test-app test: name: Tests @@ -31,13 +35,16 @@ jobs: browser: [chrome, firefox] steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 14 - name: Install Dependencies run: yarn install --frozen-lockfile + - name: Build + run: yarn build - name: Test + working-directory: test-app run: yarn test:ember --launch ${{ matrix.browser }} floating-dependencies: @@ -51,13 +58,16 @@ jobs: browser: [chrome, firefox] steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 14 - name: Install Dependencies run: yarn install --no-lockfile --non-interactive + - name: Build + run: yarn build - name: Test + working-directory: test-app run: yarn test:ember --launch ${{ matrix.browser }} try-scenarios: @@ -86,12 +96,14 @@ jobs: allow-failure: true steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 14 - name: Install Dependencies run: yarn install --frozen-lockfile + - name: Build + run: yarn build - name: Test env: EMBER_TRY_SCENARIO: ${{ matrix.ember-try-scenario }} diff --git a/.gitignore b/.gitignore index f5dda0e..187ef37 100644 --- a/.gitignore +++ b/.gitignore @@ -5,8 +5,8 @@ /tmp/ # dependencies -/bower_components/ -/node_modules/ +node_modules/ + # misc /.env* @@ -22,7 +22,6 @@ # ember-try /.node_modules.ember-try/ -/bower.json.ember-try /npm-shrinkwrap.json.ember-try /package.json.ember-try diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 02370e3..0000000 --- a/.npmignore +++ /dev/null @@ -1,39 +0,0 @@ -# compiled output -/dist/ -/tmp/ - -# misc -/.editorconfig -/.ember-cli -/.env* -/.eslintcache -/.eslintignore -/.eslintrc.js -/.git/ -/.github/ -/.gitignore -/.prettierignore -/.prettierrc.js -/.template-lintrc.js -/.watchmanconfig -/.stylelintrc -/.tm_properties -/jsconfig.json -/codemods.log -/CHANGELOG.md -/vendor/ember-toggle/example-images -/config/ember-try.js -/CONTRIBUTING.md -/ember-cli-build.js -/testem.js -/tests/ -/yarn-error.log -/yarn.lock -.gitkeep - -# ember-try -/.node_modules.ember-try/ -/npm-shrinkwrap.json.ember-try -/package.json.ember-try -/package-lock.json.ember-try -/yarn.lock.ember-try diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/app/components/x-toggle-label.js b/app/components/x-toggle-label.js deleted file mode 100644 index a24b4d6..0000000 --- a/app/components/x-toggle-label.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-toggle/components/x-toggle-label'; diff --git a/app/components/x-toggle-switch.js b/app/components/x-toggle-switch.js deleted file mode 100644 index 5c3c993..0000000 --- a/app/components/x-toggle-switch.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-toggle/components/x-toggle-switch'; diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js deleted file mode 100644 index ddf2a0a..0000000 --- a/app/components/x-toggle.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-toggle/components/x-toggle'; diff --git a/config/environment.js b/config/environment.js deleted file mode 100644 index 331ab30..0000000 --- a/config/environment.js +++ /dev/null @@ -1,5 +0,0 @@ -'use strict'; - -module.exports = function (/* environment, appConfig */) { - return {}; -}; diff --git a/ember-toggle/.eslintignore b/ember-toggle/.eslintignore new file mode 100644 index 0000000..1eae0cf --- /dev/null +++ b/ember-toggle/.eslintignore @@ -0,0 +1,2 @@ +dist/ +node_modules/ diff --git a/ember-toggle/.eslintrc.js b/ember-toggle/.eslintrc.js new file mode 100644 index 0000000..cb2bb82 --- /dev/null +++ b/ember-toggle/.eslintrc.js @@ -0,0 +1,45 @@ +'use strict'; + +module.exports = { + root: true, + parser: 'babel-eslint', + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module', + ecmaFeatures: { + legacyDecorators: true, + }, + }, + plugins: ['ember'], + extends: [ + 'eslint:recommended', + 'plugin:ember/recommended', + 'plugin:prettier/recommended', + ], + env: { + browser: true, + }, + rules: {}, + overrides: [ + // node files + { + files: [ + './.eslintrc.js', + './.prettierrc.js', + './.template-lintrc.js', + './addon-main.cjs', + './blueprints/*/index.js', + './config/**/*.js', + ], + parserOptions: { + sourceType: 'script', + }, + env: { + browser: false, + node: true, + }, + plugins: ['node'], + extends: ['plugin:node/recommended'], + }, + ], +}; diff --git a/ember-toggle/.gitignore b/ember-toggle/.gitignore new file mode 100644 index 0000000..551b5ff --- /dev/null +++ b/ember-toggle/.gitignore @@ -0,0 +1,4 @@ +/dist/ +/tmp/ +/node_modules/ +.eslintcache \ No newline at end of file diff --git a/ember-toggle/.npmignore b/ember-toggle/.npmignore new file mode 100644 index 0000000..d78811d --- /dev/null +++ b/ember-toggle/.npmignore @@ -0,0 +1,6 @@ +dist/ +node_modules/ +.eslintcache + +# README is copied from monorepo root each build +README.md diff --git a/ember-toggle/.prettierrc b/ember-toggle/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/ember-toggle/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/ember-toggle/README.md b/ember-toggle/README.md new file mode 100644 index 0000000..140bc3d --- /dev/null +++ b/ember-toggle/README.md @@ -0,0 +1,194 @@ +# ember-toggle + +Checkbox based Toggle Switch component with swipe/drag support for Ember. + +[![NPM][npm-badge]][npm-badge-url] +![CI](https://github.com/knownasilya/ember-toggle/workflows/CI/badge.svg) +[![Ember Observer Score][ember-observer-badge]][ember-observer-url] + +Based on [this](http://codepen.io/mallendeo/pen/eLIiG/) codepen. +Here's the official [demo] using this component. + +## Compatibility + +- Ember.js v3.24 or above +- Ember CLI v3.24 or above +- Node.js v12 or above + +## Install + +`ember install ember-toggle` + +## Basic Usage + +```hbs + +``` + +### Themes + +![Examples Of Available Themes](vendor/ember-toggle/example-images/themes.png) + +There are many `themes` which change the visual appearance of the toggle. +Check the [demo] for interactive examples. + +- `'default'` +- `'ios'` +- `'light'` +- `'flat'` +- `'flip'` +- `'skewed'` +- `'material'` + +![Dark Themes](vendor/ember-toggle/example-images/themes-dark.png) + +Use it along with the `@variant='auto'` or `@variant='dark'` option to get a dark themed version, works only with 'ios', 'flat' and 'material' theme. + +> Example of changing the theme + +```hbs + +``` + +_Note: By default all themes are included, see the Configuration section to change which themes are included/excluded._ + +### Size + +You can also adjust the size of the widget by use of the `size` property. Valid sizes are: + +- `'small'` +- `'medium'` +- `'large'` + +This option is available on all themes but is a less sensible choice for those themes which actually +include the label within the control (e.g., `skew` and `flip`). + +### Labels + +You can customize labels (The text the user sees for the two states) and their associated values: + +```hbs + +``` + +If you want your labels to be displayed, then you must set `showLabels` to `true`. + +### Available Options + +- `value` - The state of the switch, can be `true` or `false`. Defaults to `false`. +- `onToggle` - The action that should change the state of `value`. +- `theme` - One of 'light', 'ios', 'flat', 'material', 'flip', 'skewed', 'default'. +- `variant` - One of `dark` or `auto`. Use `auto` for system dependent light/dark theme. Works only with `ios`, `flat` and `material` theme. + Defaults to 'default' if not specified. +- `size` - One of 'small', 'medium', 'large'. + Defaults to 'medium' if not specified. +- `onLabel` - The label for the _on_ state. Defaults to 'On'. +- `offLabel` - The label for the _off_ state. Defaults to 'Off'. +- `showLabels` - Defaults to 'false', if 'true' will display labels on left and ride side of toggle switch +- `disabled` - Defaults to `false`, which means you can click the toggle. + When `true`, an `.x-toggle-disabled` class is set on the toggle and an `.x-toggle-container-disabled` class is set on the component. +- `name` - A name to differentiate multiple toggles, gets passed to the `toggle` action. Defaults to 'default'. + +### Configuring + +Add a configuration for `ember-toggle` to include only the themes that +you will use, as well as any other default settings that apply to all toggles +in your app. These defaults can be overriden on a per toggle basis +(except the options regarding themes being added to your app's build step). + +This configuration is located in `config/environment.js`. +The following is an example of how you can configure this addon: + +```js +ENV['ember-toggle'] = { + includedThemes: ['light', 'default', 'flip'], + excludedThemes: ['flip'], + excludeBaseStyles: false, // defaults to false + defaultShowLabels: true, // defaults to false + defaultTheme: 'light', // defaults to 'default' + defaultSize: 'small', // defaults to 'medium' + defaultOffLabel: 'False', // defaults to 'Off' + defaultOnLabel: 'True', // defaults to 'On' +}; +``` + +> note: the IOS theme is referred to as just `ios` not `ios7` as was indicated in the originating CSS source + +To exclude (not include) a theme, means that it's css styles will not be bundled with +your application, keeping your app's css bundle size smaller. + +> **Note:** including a blank array e.g. `includeThemes: []` will not include any themes, leaving +> you to define your own theme styles. See the `vendor/ember-toggle/themes` directory +> for reference. +> **Note:** you may also want to set `excludeBaseStyles: true` so that this addon doesn't include the styles +> used by all the themes. + +## Advanced Usage + +If you need custom labels, additional markup, or non-standard behavior, you are in the right section. + +The `x-toggle` component also provides a composable component API. + +```hbs + + + + + +``` + +The above is a simple example that returns a basic toggle, but you can see how +this could be used to wrap the switch or the labels in custom markup or logic. + +### Single Label + +This format allows greater flexibility with labels, like the single label use-case. + +```hbs + + + turn {{if this.value 'off' 'on'}} + + + + +``` + +> Note: The `not` helper is a custom Ember helper in the above example. + +## Contributing + +See the [Contributing] guide for details. + +## License + +MIT + +[npm-badge]: https://img.shields.io/npm/v/ember-toggle.svg +[npm-badge-url]: https://www.npmjs.com/package/ember-toggle +[ember-observer-badge]: http://emberobserver.com/badges/ember-toggle.svg +[ember-observer-url]: http://emberobserver.com/addons/ember-toggle +[demo]: http://knownasilya.github.io/ember-toggle/ +[contributing]: CONTRIBUTING.md +[simplify]: https://github.com/knownasilya/ember-toggle/tree/simplify diff --git a/ember-toggle/addon-main.cjs b/ember-toggle/addon-main.cjs new file mode 100644 index 0000000..d36b0c8 --- /dev/null +++ b/ember-toggle/addon-main.cjs @@ -0,0 +1,5 @@ +'use strict'; + +const { addonV1Shim } = require('@embroider/addon-shim'); + +module.exports = addonV1Shim(__dirname); diff --git a/ember-toggle/babel.config.json b/ember-toggle/babel.config.json new file mode 100644 index 0000000..72ac6d1 --- /dev/null +++ b/ember-toggle/babel.config.json @@ -0,0 +1,19 @@ +{ + "plugins": [ + "@embroider/addon-dev/template-colocation-plugin", + "@babel/plugin-transform-runtime", + [ + "@babel/plugin-transform-typescript", + { + "allowDeclareFields": true + } + ], + [ + "@babel/plugin-proposal-decorators", + { + "legacy": true + } + ], + "@babel/plugin-proposal-class-properties" + ] +} diff --git a/ember-toggle/package.json b/ember-toggle/package.json new file mode 100644 index 0000000..fcb8717 --- /dev/null +++ b/ember-toggle/package.json @@ -0,0 +1,84 @@ +{ + "name": "ember-toggle", + "version": "9.0.3", + "description": "Checkbox based toggle switch component for Ember.js", + "repository": "https://github.com/knownasilya/ember-toggle", + "license": "MIT", + "author": "Ilya Radchenko", + "keywords": [ + "ember-addon" + ], + "exports": { + ".": "./dist/index.js", + "./*": "./dist/*", + "./test-support": "./dist/test-support/index.js", + "./addon-main.js": "./addon-main.js" + }, + "files": [ + "dist", + "addon-main.cjs", + "CHANGELOG.md", + "README.md" + ], + "scripts": { + "start": "concurrently 'npm:watch:*'", + "build": "concurrently 'npm:build:*'", + "build:js": "rollup -c ./rollup.config.js", + "build:docs": "cp ../README.md ./README.md", + "watch:js": "rollup -c --watch --no-watch.clearScreen", + "lint": "concurrently 'npm:lint:js'", + "lint:fix": "concurrently 'npm:lint:js:fix'", + "lint:js": "eslint . --cache", + "lint:js:fix": "eslint . --fix", + "test": "echo 'Addon does not have tests, run tests in test-app'", + "prepare": "yarn run build", + "prepublishOnly": "yarn run build" + }, + "dependencies": { + "@babel/runtime": "^7.18.6", + "@ember/render-modifiers": "^2.0.4", + "@embroider/addon-shim": "^1.8.3", + "ember-gesture-modifiers": "^4.0.1" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org" + }, + "ember": { + "edition": "octane" + }, + "ember-addon": { + "version": 2, + "type": "addon", + "main": "./addon-main.cjs", + "app-js": { + "./components/x-toggle-label.js": "./dist/_app_/components/x-toggle-label.js", + "./components/x-toggle-switch.js": "./dist/_app_/components/x-toggle-switch.js", + "./components/x-toggle.js": "./dist/_app_/components/x-toggle.js" + } + }, + "engines": { + "node": "12.* || 14.* || >= 16" + }, + "volta": { + "extends": "../package.json" + }, + "devDependencies": { + "@babel/core": "^7.18.5", + "@babel/plugin-proposal-class-properties": "^7.18.6", + "@babel/plugin-proposal-decorators": "^7.18.2", + "@babel/plugin-transform-runtime": "^7.18.6", + "@embroider/addon-dev": "^1.8.3", + "@rollup/plugin-babel": "^5.3.1", + "babel-eslint": "^10.1.0", + "concurrently": "^7.2.0", + "ember-template-lint": "^4.10.0", + "eslint": "^7.32.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-ember": "^10.6.1", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-prettier": "^3.4.1", + "npm-run-all": "^4.1.5", + "prettier": "^2.7.1", + "rollup": "^2.75.7" + } +} diff --git a/ember-toggle/rollup.config.js b/ember-toggle/rollup.config.js new file mode 100644 index 0000000..2846cf4 --- /dev/null +++ b/ember-toggle/rollup.config.js @@ -0,0 +1,56 @@ +import babel from '@rollup/plugin-babel'; +import { Addon } from '@embroider/addon-dev/rollup'; + +const addon = new Addon({ + srcDir: 'src', + destDir: 'dist', +}); + +export default { + // This provides defaults that work well alongside `publicEntrypoints` below. + // You can augment this if you need to. + output: addon.output(), + + plugins: [ + // These are the modules that users should be able to import from your + // addon. Anything not listed here may get optimized away. + addon.publicEntrypoints(['**/*.js']), + + // These are the modules that should get reexported into the traditional + // "app" tree. Things in here should also be in publicEntrypoints above, but + // not everything in publicEntrypoints necessarily needs to go here. + addon.appReexports([ + 'components/**/*.js', + 'helpers/**/*.js', + 'modifiers/**/*.js', + 'services/**/*.js', + 'initializers/**/*.js', + 'instance-initializers/**/*.js', + ]), + + // This babel config should *not* apply presets or compile away ES modules. + // It exists only to provide development niceties for you, like automatic + // template colocation. + // + // By default, this will load the actual babel config from the file + // babel.config.json. + babel({ + babelHelpers: 'runtime', // we should consider "external", + }), + + // Follow the V2 Addon rules about dependencies. Your code can import from + // `dependencies` and `peerDependencies` as well as standard Ember-provided + // package names. + addon.dependencies(), + + // Ensure that standalone .hbs files are properly integrated as Javascript. + addon.hbs(), + + // addons are allowed to contain imports of .css files, which we want rollup + // to leave alone and keep in the published output. + addon.keepAssets(['**/*.css']), + + // Remove leftover build artifacts when starting a new build. + addon.clean(), + ], +}; diff --git a/addon/.gitkeep b/ember-toggle/src/.gitkeep similarity index 100% rename from addon/.gitkeep rename to ember-toggle/src/.gitkeep diff --git a/addon/components/x-toggle-label.hbs b/ember-toggle/src/components/x-toggle-label.hbs similarity index 78% rename from addon/components/x-toggle-label.hbs rename to ember-toggle/src/components/x-toggle-label.hbs index 3514232..4ac3429 100644 --- a/addon/components/x-toggle-label.hbs +++ b/ember-toggle/src/components/x-toggle-label.hbs @@ -1,7 +1,7 @@ {{#if @show}}