├── .dojorc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── lerna.json ├── package-lock.json ├── package.json └── packages ├── custom-element-menu ├── .dojorc ├── .dojorc-deploy ├── .eslintrc.js ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── preview.png ├── src │ ├── img │ │ └── logo.svg │ ├── index.html │ ├── main.css │ ├── main.ts │ └── widgets │ │ ├── Menu.ts │ │ ├── MenuItem.ts │ │ └── styles │ │ ├── menu.m.css │ │ ├── menu.m.css.d.ts │ │ ├── menuItem.m.css │ │ └── menuItem.m.css.d.ts └── tsconfig.json ├── dgrid-wrapper ├── .dojorc ├── .dojorc-deploy ├── .eslintrc.js ├── .gitignore ├── README.md ├── loaderConfig.js ├── package-lock.json ├── package.json ├── preview.png ├── src │ ├── index.html │ ├── main.css │ ├── main.ts │ └── widgets │ │ ├── App.ts │ │ └── __tests__ │ │ └── App.spec.ts ├── testLoaderConfig.js └── tsconfig.json ├── example-index ├── .dojorc ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── examples.block.ts │ ├── index.html │ ├── main.css │ └── main.tsx ├── tests │ ├── functional │ │ ├── all.ts │ │ └── main.ts │ └── unit │ │ ├── all.ts │ │ └── main.ts └── tsconfig.json ├── hnpwa ├── .dojorc ├── .dojorc-deploy ├── .eslintrc.js ├── .firebaserc ├── .gitignore ├── README.md ├── manifest.json ├── package-lock.json ├── package.json ├── preview.png ├── src │ ├── img │ │ ├── hn.ico │ │ ├── hn.png │ │ └── logo.svg │ ├── index.html │ ├── interfaces.d.ts │ ├── main.css │ ├── main.tsx │ ├── routes.ts │ └── widgets │ │ ├── ActiveLink.tsx │ │ ├── App.tsx │ │ ├── Article.tsx │ │ ├── Comment.tsx │ │ ├── Comments.tsx │ │ ├── Content.tsx │ │ ├── Loading.tsx │ │ ├── Menu.tsx │ │ └── styles │ │ ├── app.m.css │ │ ├── app.m.css.d.ts │ │ ├── article.m.css │ │ ├── article.m.css.d.ts │ │ ├── comment.m.css │ │ ├── comment.m.css.d.ts │ │ ├── comments.m.css │ │ ├── comments.m.css.d.ts │ │ ├── content.m.css │ │ ├── content.m.css.d.ts │ │ ├── loading.m.css │ │ ├── loading.m.css.d.ts │ │ ├── menu.m.css │ │ └── menu.m.css.d.ts └── tsconfig.json ├── icache-advanced ├── .dojorc ├── .dojorc-deploy ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── package-lock.json ├── package.json ├── src │ ├── App.tsx │ ├── index.html │ ├── main.css │ └── main.tsx └── tsconfig.json ├── icache-basic ├── .dojorc ├── .dojorc-deploy ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── package-lock.json ├── package.json ├── src │ ├── index.html │ ├── main.css │ └── main.tsx └── tsconfig.json ├── intersection-observer ├── .dojorc ├── .dojorc-deploy ├── .eslintrc.js ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── preview.png ├── src │ ├── index.html │ ├── listItemGenerator.ts │ ├── main.css │ ├── main.ts │ └── widgets │ │ ├── App.ts │ │ ├── InfiniteList.ts │ │ ├── Item.ts │ │ └── styles │ │ ├── Item.m.css │ │ ├── Item.m.css.d.ts │ │ ├── app.m.css │ │ ├── app.m.css.d.ts │ │ ├── infiniteList.m.css │ │ └── infiniteList.m.css.d.ts └── tsconfig.json ├── realworld ├── .dojorc ├── .dojorc-deploy ├── .eslintrc.js ├── .gitignore ├── README.md ├── logo.png ├── package-lock.json ├── package.json ├── preview.png ├── src │ ├── App.tsx │ ├── config.ts │ ├── index.html │ ├── interfaces.d.ts │ ├── logo.png │ ├── main.css │ ├── main.tsx │ ├── processes │ │ ├── articleProcesses.ts │ │ ├── editorProcesses.ts │ │ ├── feedProcesses.ts │ │ ├── interfaces.d.ts │ │ ├── loginProcesses.ts │ │ ├── profileProcesses.ts │ │ ├── routeProcesses.ts │ │ ├── settingsProcesses.ts │ │ ├── tagProcesses.ts │ │ └── utils.ts │ ├── routes.ts │ ├── store.ts │ └── widgets │ │ ├── Article.tsx │ │ ├── ArticleAuthorControls.tsx │ │ ├── ArticleControls.tsx │ │ ├── ArticleMeta.tsx │ │ ├── ArticlePreview.tsx │ │ ├── Banner.tsx │ │ ├── Comment.tsx │ │ ├── Editor.tsx │ │ ├── ErrorList.tsx │ │ ├── FeedList.tsx │ │ ├── FeedPagination.tsx │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── Home.tsx │ │ ├── Login.tsx │ │ ├── Profile.tsx │ │ ├── Register.tsx │ │ ├── Settings.tsx │ │ ├── Tags.tsx │ │ └── __tests__ │ │ └── Tags.spec.ts └── tsconfig.json ├── resize-middleware ├── .dojorc ├── .dojorc-deploy ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── package-lock.json ├── package.json ├── src │ ├── ResizeWidget.tsx │ ├── index.html │ ├── main.css │ └── main.tsx └── tsconfig.json ├── resize-observer ├── .dojorc ├── .dojorc-deploy ├── .eslintrc.js ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── preview.png ├── src │ ├── index.html │ ├── main.css │ ├── main.ts │ └── widgets │ │ ├── App.ts │ │ ├── Article.ts │ │ ├── Calendar.ts │ │ ├── Card.ts │ │ ├── Column.ts │ │ ├── ResizableSection.ts │ │ └── styles │ │ ├── app.m.css │ │ ├── app.m.css.d.ts │ │ ├── article.m.css │ │ ├── article.m.css.d.ts │ │ ├── calendar.m.css │ │ ├── calendar.m.css.d.ts │ │ ├── card.m.css │ │ ├── card.m.css.d.ts │ │ ├── columns.m.css │ │ ├── columns.m.css.d.ts │ │ ├── common.m.css │ │ ├── common.m.css.d.ts │ │ ├── resizableSection.m.css │ │ └── resizableSection.m.css.d.ts └── tsconfig.json ├── skills-matrix ├── .dojorc ├── .dojorc-deploy ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── App.m.css │ ├── App.m.css.d.ts │ ├── App.tsx │ ├── __tests__ │ │ └── polyfills.spec.ts │ ├── fonts.css │ ├── index.html │ ├── interfaces.ts │ ├── main.css │ ├── main.ts │ ├── middleware │ │ ├── router.ts │ │ └── store.ts │ ├── processes │ │ ├── assessment.processes.ts │ │ └── assessments.processes.ts │ ├── routes.ts │ ├── skillmatrix.json │ ├── themes │ │ ├── matrix.ts │ │ └── matrix │ │ │ ├── button.m.css │ │ │ ├── button.m.css.d.ts │ │ │ ├── checkbox.m.css │ │ │ ├── checkbox.m.css.d.ts │ │ │ ├── chip-typeahead.m.css │ │ │ ├── chip-typeahead.m.css.d.ts │ │ │ ├── chip.m.css │ │ │ ├── chip.m.css.d.ts │ │ │ ├── header.m.css │ │ │ ├── header.m.css.d.ts │ │ │ ├── label.m.css │ │ │ ├── label.m.css.d.ts │ │ │ ├── list-item.m.css │ │ │ ├── list-item.m.css.d.ts │ │ │ ├── text-area.m.css │ │ │ ├── text-area.m.css.d.ts │ │ │ ├── text-input.m.css │ │ │ ├── text-input.m.css.d.ts │ │ │ ├── typeahead.m.css │ │ │ └── typeahead.m.css.d.ts │ ├── util │ │ ├── clipboard.ts │ │ ├── crypto.spec.ts │ │ ├── crypto.ts │ │ ├── persistence.ts │ │ ├── skills.spec.ts │ │ └── skills.ts │ ├── variables.css │ └── widgets │ │ ├── assessment-list │ │ ├── AssessmentList.m.css │ │ ├── AssessmentList.m.css.d.ts │ │ └── AssessmentList.tsx │ │ ├── assessment │ │ ├── Assessment.m.css │ │ ├── Assessment.m.css.d.ts │ │ └── Assessment.tsx │ │ ├── compare │ │ ├── Compare.m.css │ │ ├── Compare.m.css.d.ts │ │ └── Compare.tsx │ │ ├── group-assessment │ │ ├── GroupAssessment.m.css │ │ ├── GroupAssessment.m.css.d.ts │ │ └── GroupAssessment.tsx │ │ ├── header │ │ ├── Header.m.css │ │ ├── Header.m.css.d.ts │ │ └── Header.tsx │ │ ├── home │ │ ├── Home.m.css │ │ ├── Home.m.css.d.ts │ │ └── Home.tsx │ │ ├── icon │ │ └── Icon.tsx │ │ ├── level-icon │ │ └── LevelIcon.tsx │ │ ├── skill-key │ │ ├── SkillKey.m.css │ │ ├── SkillKey.m.css.d.ts │ │ └── SkillKey.tsx │ │ ├── skills │ │ ├── Skills.m.css │ │ ├── Skills.m.css.d.ts │ │ └── Skills.tsx │ │ ├── skillset-filter │ │ ├── SkillsetFilter.m.css │ │ ├── SkillsetFilter.m.css.d.ts │ │ └── SkillsetFilter.tsx │ │ └── styles │ │ ├── button.m.css │ │ └── button.m.css.d.ts ├── tests │ └── functional │ │ ├── all.ts │ │ └── main.ts └── tsconfig.json ├── static-blog ├── .dojorc ├── .dojorc-deploy ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── content │ └── dojo-btr-and-blocks.md ├── package-lock.json ├── package.json ├── src │ ├── App.tsx │ ├── Blog.m.css │ ├── Blog.m.css.d.ts │ ├── Blog.tsx │ ├── BlogList.m.css │ ├── BlogList.m.css.d.ts │ ├── BlogList.tsx │ ├── BlogPreview.m.css │ ├── BlogPreview.m.css.d.ts │ ├── BlogPreview.tsx │ ├── Header.m.css │ ├── Header.m.css.d.ts │ ├── Header.tsx │ ├── blocks │ │ ├── blog-index.block.ts │ │ └── blog.block.ts │ ├── index.html │ ├── logo.png │ ├── main.css │ ├── main.tsx │ └── routes.ts └── tsconfig.json ├── store-arrays ├── .dojorc ├── .dojorc-deploy ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── package-lock.json ├── package.json ├── src │ ├── App.tsx │ ├── appProcesses.ts │ ├── data.ts │ ├── index.html │ ├── interfaces.ts │ ├── main.css │ ├── main.tsx │ └── store.ts └── tsconfig.json ├── todo-mvc-kitchensink ├── .dojorc ├── .dojorc-deploy ├── .dojorc-test ├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── preview.png ├── src │ ├── App.m.css │ ├── App.m.css.d.ts │ ├── App.tsx │ ├── index.html │ ├── main.css │ ├── main.tsx │ ├── nls │ │ ├── common.ts │ │ └── en-PR │ │ │ └── common.ts │ ├── processes.ts │ ├── store.ts │ ├── themes │ │ ├── pirate.ts │ │ └── pirate │ │ │ ├── App.m.css │ │ │ ├── App.m.css.d.ts │ │ │ ├── credits.m.css │ │ │ ├── credits.m.css.d.ts │ │ │ ├── themeSwitcher.m.css │ │ │ ├── themeSwitcher.m.css.d.ts │ │ │ ├── todoCard.m.css │ │ │ ├── todoCard.m.css.d.ts │ │ │ ├── todoDetails.m.css │ │ │ ├── todoDetails.m.css.d.ts │ │ │ ├── todoFooter.m.css │ │ │ ├── todoFooter.m.css.d.ts │ │ │ ├── todoHeader.m.css │ │ │ ├── todoHeader.m.css.d.ts │ │ │ ├── todoItem.m.css │ │ │ ├── todoItem.m.css.d.ts │ │ │ ├── todoList.m.css │ │ │ ├── todoList.m.css.d.ts │ │ │ ├── todoSearch.m.css │ │ │ └── todoSearch.m.css.d.ts │ └── widgets │ │ ├── Credits.tsx │ │ ├── ThemeSwitcher.tsx │ │ ├── TodoCard.tsx │ │ ├── TodoDetails.tsx │ │ ├── TodoFilter.tsx │ │ ├── TodoFooter.tsx │ │ ├── TodoHeader.tsx │ │ ├── TodoItem.tsx │ │ ├── TodoList.tsx │ │ ├── TodoSearch.tsx │ │ ├── TodoViewSwitch.tsx │ │ └── styles │ │ ├── credits.m.css │ │ ├── credits.m.css.d.ts │ │ ├── themeSwitcher.m.css │ │ ├── themeSwitcher.m.css.d.ts │ │ ├── todoCard.m.css │ │ ├── todoCard.m.css.d.ts │ │ ├── todoDetails.m.css │ │ ├── todoDetails.m.css.d.ts │ │ ├── todoFilter.m.css │ │ ├── todoFilter.m.css.d.ts │ │ ├── todoFooter.m.css │ │ ├── todoFooter.m.css.d.ts │ │ ├── todoHeader.m.css │ │ ├── todoHeader.m.css.d.ts │ │ ├── todoItem.m.css │ │ ├── todoItem.m.css.d.ts │ │ ├── todoList.m.css │ │ ├── todoList.m.css.d.ts │ │ ├── todoSearch.m.css │ │ ├── todoSearch.m.css.d.ts │ │ ├── todoViewSwitch.m.css │ │ └── todoViewSwitch.m.css.d.ts └── tsconfig.json ├── todo-mvc ├── .dojorc ├── .dojorc-deploy ├── .dojorc-test ├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── index.js ├── package-lock.json ├── package.json ├── preview.png ├── src │ ├── App.m.css │ ├── App.m.css.d.ts │ ├── App.tsx │ ├── index.html │ ├── main.css │ └── main.tsx └── tsconfig.json └── world-clock ├── .dojorc ├── .dojorc-deploy ├── .eslintrc.js ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── preview.png ├── src ├── img │ └── logo.svg ├── index.html ├── main.css ├── main.ts ├── nls │ ├── ar │ │ └── main.ts │ ├── es │ │ └── main.ts │ ├── fr │ │ └── main.ts │ ├── hi │ │ └── main.ts │ ├── ja │ │ └── main.ts │ └── main.ts ├── styles │ ├── app.m.css │ ├── app.m.css.d.ts │ ├── clock.m.css │ ├── clock.m.css.d.ts │ └── variables.css └── widgets │ ├── App.ts │ └── Clock.ts └── tsconfig.json /.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "create-app": {}, 3 | "create-widget": {} 4 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [{package.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/yarn.lock 2 | node_modules 3 | 4 | **/output 5 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "version": "0.0.0" 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "examples", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "shx rm -rf output && lerna run build:deploy && shx mkdir output && shx mkdir output/dist && lerna run package", 6 | "prettier": "prettier --write \"**/*.{ts,tsx,md}\" --ignore-path=.gitignore" 7 | }, 8 | "devDependencies": { 9 | "husky": "4.2.3", 10 | "lerna": "3.22.1", 11 | "lint-staged": "10.0.10", 12 | "prettier": "2.0.2", 13 | "shx": "0.3.2" 14 | }, 15 | "prettier": { 16 | "singleQuote": true, 17 | "tabWidth": 4, 18 | "useTabs": true, 19 | "printWidth": 120, 20 | "arrowParens": "always", 21 | "trailingComma": "none" 22 | }, 23 | "lint-staged": { 24 | "*.{ts,tsx,md}": [ 25 | "prettier --write" 26 | ] 27 | }, 28 | "husky": { 29 | "hooks": { 30 | "pre-commit": "lint-staged" 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/custom-element-menu/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-widget": { 3 | "widgets": [ 4 | "src/widgets/MenuItem", 5 | "src/widgets/Menu" 6 | ] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/custom-element-menu/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/custom-element-menu/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/custom-element-menu/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/custom-element-menu/.gitignore: -------------------------------------------------------------------------------- 1 | assets 2 | *.js 3 | *.js.map 4 | !/*.js 5 | !/tasks/*.js 6 | /_build 7 | /bower_components 8 | /dist 9 | /example 10 | /html-report 11 | /output 12 | /temp-example 13 | /node_modules 14 | /typings 15 | .baseDir.ts 16 | .tscache 17 | .tsconfig*.json 18 | coverage-unmapped.json 19 | npm-debug.log 20 | -------------------------------------------------------------------------------- /packages/custom-element-menu/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/custom-element-menu/preview.png -------------------------------------------------------------------------------- /packages/custom-element-menu/src/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-size: 14px; 6 | line-height: 1.3125; 7 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 8 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 9 | -webkit-text-size-adjust: 100%; 10 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 11 | box-sizing: border-box; 12 | } 13 | @media screen and (min-width: 360px) { 14 | html, 15 | body { 16 | font-size: 15px; 17 | } 18 | } 19 | @media screen and (min-width: 600px) { 20 | html, 21 | body { 22 | font-size: 16px; 23 | } 24 | } 25 | 26 | nav, 27 | demo-menu { 28 | margin-top: 10px; 29 | margin-bottom: 10px; 30 | } 31 | 32 | h1, 33 | h2, 34 | h3 { 35 | margin-bottom: 0.5rem; 36 | font-family: inherit; 37 | font-weight: 500; 38 | line-height: 1.2; 39 | color: inherit; 40 | } 41 | 42 | h2 { 43 | font-size: 1.5rem; 44 | border-bottom: 5px solid darkgrey; 45 | line-height: 2em; 46 | } 47 | 48 | h3 { 49 | font-size: 1.15rem; 50 | } 51 | 52 | p { 53 | font: inherit; 54 | font-size: 100%; 55 | margin: 0; 56 | } 57 | -------------------------------------------------------------------------------- /packages/custom-element-menu/src/main.ts: -------------------------------------------------------------------------------- 1 | import { WidgetBase } from '@dojo/framework/core/WidgetBase'; 2 | import renderer, { w } from '@dojo/framework/core/vdom'; 3 | import { Menu } from './widgets/Menu'; 4 | import { MenuItem } from './widgets/MenuItem'; 5 | 6 | class Example extends WidgetBase { 7 | private _onSelected(data: any) { 8 | console.log(data); 9 | } 10 | 11 | protected render() { 12 | return w(Menu, { onSelected: this._onSelected }, [ 13 | w(MenuItem, { key: 'a', title: 'Menu Item A' }), 14 | w(MenuItem, { key: 'b', title: 'Menu Item B', selected: true }), 15 | w(MenuItem, { key: 'c', title: 'Menu Item C' }) 16 | ]); 17 | } 18 | } 19 | 20 | const element = document.getElementById('widget') as HTMLElement; 21 | const r = renderer(() => w(Example, {})); 22 | r.mount({ domNode: element }); 23 | -------------------------------------------------------------------------------- /packages/custom-element-menu/src/widgets/MenuItem.ts: -------------------------------------------------------------------------------- 1 | import { WidgetBase } from '@dojo/framework/core/WidgetBase'; 2 | import { v } from '@dojo/framework/core/vdom'; 3 | import { customElement } from '@dojo/framework/core/decorators/customElement'; 4 | import { theme, ThemedMixin } from '@dojo/framework/core/mixins/Themed'; 5 | 6 | import * as css from './styles/menuItem.m.css'; 7 | 8 | export interface MenuItemProperties { 9 | selected?: boolean; 10 | data?: any; 11 | title?: string; 12 | onSelected?: (data: any) => void; 13 | } 14 | 15 | @customElement({ 16 | tag: 'demo-menu-item', 17 | events: ['onSelected'], 18 | attributes: ['title'], 19 | properties: ['data', 'selected'] 20 | }) 21 | @theme(css) 22 | export class MenuItem extends ThemedMixin(WidgetBase) { 23 | private _onClick() { 24 | this.properties.onSelected && this.properties.onSelected(this.properties.data); 25 | } 26 | 27 | protected render() { 28 | const { selected } = this.properties; 29 | 30 | return v('li', { classes: this.theme(css.root) }, [ 31 | v( 32 | 'span', 33 | { 34 | classes: this.theme([css.item, selected ? css.selected : null]), 35 | onclick: this._onClick 36 | }, 37 | [this.properties.title] 38 | ) 39 | ]); 40 | } 41 | } 42 | 43 | export default MenuItem; 44 | -------------------------------------------------------------------------------- /packages/custom-element-menu/src/widgets/styles/menu.m.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: sans-serif; 6 | } 7 | 8 | .root { 9 | width: 100%; 10 | top: 0; 11 | height: 48px; 12 | z-index: 100; 13 | background-color: #1d1f20; 14 | } 15 | 16 | .menuContainer { 17 | height: 100%; 18 | margin: 0 auto; 19 | } 20 | 21 | .home { 22 | float: left; 23 | cursor: pointer; 24 | } 25 | 26 | .logo { 27 | height: 38px; 28 | padding: 4px; 29 | } 30 | -------------------------------------------------------------------------------- /packages/custom-element-menu/src/widgets/styles/menu.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const menuContainer: string; 3 | export const home: string; 4 | export const logo: string; 5 | -------------------------------------------------------------------------------- /packages/custom-element-menu/src/widgets/styles/menuItem.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | height: 100%; 3 | display: inline-block; 4 | } 5 | 6 | .item { 7 | color: #fff; 8 | text-decoration: none; 9 | margin: 0 6.4px; 10 | position: relative; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | height: 48px; 15 | cursor: pointer; 16 | } 17 | 18 | .item::after { 19 | display: block; 20 | content: ''; 21 | background: #fff; 22 | height: 2px; 23 | position: absolute; 24 | width: 100%; 25 | bottom: 0; 26 | transition: transform 0.3s ease-out; 27 | transform: translateY(3px); 28 | } 29 | 30 | .selected::after { 31 | transform: translateY(0); 32 | } 33 | -------------------------------------------------------------------------------- /packages/custom-element-menu/src/widgets/styles/menuItem.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const item: string; 3 | export const selected: string; 4 | -------------------------------------------------------------------------------- /packages/custom-element-menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "externals": { 4 | "dependencies": [ 5 | { "from": "loaderConfig.js", "inject": true }, 6 | { "from": "testLoaderConfig.js" }, 7 | { "from": "node_modules/dojo", "to": "dojo", "name": "dojo", "inject": "dojo.js", "type": "umd" }, 8 | { "from": "node_modules/dijit", "to": "dijit", "name": "dijit", "type": "umd" }, 9 | { "from": "node_modules/dgrid", "to": "dgrid", "name": "dgrid", "inject": "css/dgrid.css", "type": "umd" }, 10 | { "from": "node_modules/dojo-dstore", "to": "dstore", "name": "dstore", "type": "umd" } 11 | ] 12 | } 13 | }, 14 | "test-intern": { 15 | "externals": { 16 | "dependencies": [ 17 | { "from": "testLoaderConfig.js", "inject": true }, 18 | { "from": "node_modules/dojo", "to": "dojo", "name": "dojo", "inject": "dojo.js" }, 19 | { "from": "node_modules/dijit", "to": "dijit", "name": "dijit" }, 20 | { "from": "node_modules/dgrid", "to": "dgrid", "name": "dgrid" }, 21 | { "from": "node_modules/dojo-dstore", "to": "dstore", "name": "dstore" } 22 | ] 23 | } 24 | }, 25 | "create-app": {} 26 | } 27 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/dgrid-wrapper/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | _build/ 3 | output/ 4 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/loaderConfig.js: -------------------------------------------------------------------------------- 1 | dojoConfig = { 2 | baseUrl: "externals/", 3 | packages: [ 4 | { name: 'dojo', location: 'dojo' }, 5 | { name: 'dijit', location: 'dijit' }, 6 | { name: 'dgrid', location: 'dgrid' }, 7 | { name: 'dstore', location: 'dstore' } 8 | ], 9 | has: { 10 | highcontrast: 0 11 | }, 12 | async: true 13 | }; -------------------------------------------------------------------------------- /packages/dgrid-wrapper/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/dgrid-wrapper/preview.png -------------------------------------------------------------------------------- /packages/dgrid-wrapper/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | dgrid-wrapper-app 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/src/main.css: -------------------------------------------------------------------------------- 1 | /* Put your styles and imports here */ 2 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/src/main.ts: -------------------------------------------------------------------------------- 1 | import renderer, { w } from '@dojo/framework/core/vdom'; 2 | import App from './widgets/App'; 3 | 4 | const r = renderer(() => w(App, {})); 5 | 6 | r.mount(); 7 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/testLoaderConfig.js: -------------------------------------------------------------------------------- 1 | const globalObj = typeof window !== 'undefined' ? window : global; 2 | globalObj.dojoConfig = { 3 | baseUrl: '../../output/test/unit', 4 | packages: [ 5 | { name: 'dojo', location: 'externals/dojo' }, 6 | { name: 'dijit', location: 'externals/dijit' }, 7 | { name: 'dgrid', location: 'externals/dgrid' }, 8 | { name: 'dstore', location: 'externals/dstore' } 9 | ], 10 | has: { 11 | highcontrast: 0 12 | }, 13 | async: true 14 | }; 15 | -------------------------------------------------------------------------------- /packages/dgrid-wrapper/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [ "intern" ] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/example-index/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "build-time-render": { 4 | "static": true, 5 | "root": "root", 6 | "discoverPaths": false, 7 | "renderer": "jsdom" 8 | } 9 | }, 10 | "test-intern": {}, 11 | "create-app": {} 12 | } -------------------------------------------------------------------------------- /packages/example-index/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | _build/ 3 | output/ 4 | .cert/ 5 | -------------------------------------------------------------------------------- /packages/example-index/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-index", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "dojo build --mode dev --watch --serve", 6 | "build": "dojo build --mode dist", 7 | "build:dev": "dojo build --mode dev", 8 | "build:deploy": "npm install && npm run build && shx rm -rf node_modules", 9 | "package": "shx cp -r output/dist/* ../../output/dist", 10 | "test": "dojo test", 11 | "test:unit": "dojo build --mode unit && dojo test --unit --config local", 12 | "test:functional": "dojo build --mode functional && dojo test --functional --config local", 13 | "test:all": "dojo build --mode unit && dojo build --mode functional && dojo test --all --config local" 14 | }, 15 | "dependencies": { 16 | "@dojo/framework": "~8.0.0", 17 | "tslib": "~1.9.1" 18 | }, 19 | "devDependencies": { 20 | "@dojo/cli": "~8.0.0", 21 | "@dojo/cli-build-app": "~8.0.1", 22 | "@dojo/cli-test-intern": "~8.0.0", 23 | "@types/node": "^14.0.13", 24 | "typescript": "~3.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/example-index/src/examples.block.ts: -------------------------------------------------------------------------------- 1 | import { readdirSync } from 'fs'; 2 | import { join } from 'path'; 3 | 4 | export default function () { 5 | return readdirSync(join(__dirname, '..', '..'), { withFileTypes: true }) 6 | .filter((dirent) => dirent.isDirectory()) 7 | .map((dirent) => dirent.name) 8 | .filter((name) => name !== 'example-index'); 9 | } 10 | -------------------------------------------------------------------------------- /packages/example-index/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | example-index 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/example-index/src/main.css: -------------------------------------------------------------------------------- 1 | /* Put your styles and imports here */ 2 | -------------------------------------------------------------------------------- /packages/example-index/src/main.tsx: -------------------------------------------------------------------------------- 1 | import renderer, { create, tsx } from '@dojo/framework/core/vdom'; 2 | import block from '@dojo/framework/core/middleware/block'; 3 | import getExamples from './examples.block'; 4 | 5 | const factory = create({ block }); 6 | 7 | const App = factory(function App({ middleware: { block } }) { 8 | const examples = block(getExamples)(); 9 | if (examples) { 10 | return ( 11 |
12 |
    13 | {examples.map((example) => ( 14 |
  • 15 | {example} 16 |
    • 17 | ))} 18 |
19 |
20 | ); 21 | } 22 | }); 23 | 24 | const r = renderer(() => ); 25 | r.mount(); 26 | -------------------------------------------------------------------------------- /packages/example-index/tests/functional/all.ts: -------------------------------------------------------------------------------- 1 | import './main'; 2 | -------------------------------------------------------------------------------- /packages/example-index/tests/functional/main.ts: -------------------------------------------------------------------------------- 1 | /* Write your app tests here */ 2 | -------------------------------------------------------------------------------- /packages/example-index/tests/unit/all.ts: -------------------------------------------------------------------------------- 1 | import './main'; 2 | -------------------------------------------------------------------------------- /packages/example-index/tests/unit/main.ts: -------------------------------------------------------------------------------- 1 | /* Write your app tests here */ 2 | -------------------------------------------------------------------------------- /packages/example-index/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [ "intern" ] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./tests/**/*.ts", 30 | "./src/**/*.tsx", 31 | "./tests/**/*.tsx" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /packages/hnpwa/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "legacy": false, 4 | "pwa": { 5 | "manifest": { 6 | "name": "dojo-2-hn", 7 | "short_name": "dojo-2-hn", 8 | "description": "dojo-2-hn", 9 | "background_color": "#ffffff", 10 | "theme_color": "#222127", 11 | "icons": [ 12 | { 13 | "src": "src/img/hn.png", 14 | "sizes": [ 15 | 128, 16 | 256, 17 | 512 18 | ] 19 | } 20 | ] 21 | }, 22 | "serviceWorker": { 23 | "clientsClaim": true, 24 | "routes": [ 25 | { 26 | "urlPattern": "https://node-hnapi.herokuapp.com", 27 | "strategy": "networkFirst", 28 | "expiration": { 29 | "maxEntries": 25 30 | } 31 | } 32 | ] 33 | } 34 | }, 35 | "build-time-render": { 36 | "root": "app", 37 | "renderer": "jsdom", 38 | "paths": [ 39 | { 40 | "path": "#comments/9999", 41 | "match": [ 42 | "#comments\/.*" 43 | ] 44 | }, 45 | { 46 | "path": "#dummy/1", 47 | "match": [ 48 | "#[a-zA-Z]+\/\\d+" 49 | ] 50 | } 51 | ] 52 | } 53 | }, 54 | "test-intern": {} 55 | } 56 | -------------------------------------------------------------------------------- /packages/hnpwa/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/hnpwa/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/hnpwa/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/hnpwa/.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "hnpwa": "dojo-2-hnpwa-d668d" 4 | } 5 | } -------------------------------------------------------------------------------- /packages/hnpwa/.gitignore: -------------------------------------------------------------------------------- 1 | /_build 2 | /bower_components 3 | /dist 4 | /html-report 5 | /node_modules 6 | /typings 7 | /output 8 | .baseDir.ts 9 | .tscache 10 | coverage-unmapped.json 11 | coverage-final.json 12 | coverage-final.lcov 13 | npm-debug.log 14 | /_apidoc 15 | deploy_key 16 | -------------------------------------------------------------------------------- /packages/hnpwa/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "hacker-news", 3 | "name": "hacker-news", 4 | "icons" : [{ 5 | "src": "images/app192.png", 6 | "sizes": "192x192", 7 | "type": "images/png" 8 | }, { 9 | "src": "images/app256.png", 10 | "sizes": "256x256", 11 | "type": "images/png" 12 | }, { 13 | "src": "images/app384.png", 14 | "sizes": "384x384", 15 | "type": "images/png" 16 | }, { 17 | "src": "images/app512.png", 18 | "sizes": "512x512", 19 | "type": "images/png" 20 | }], 21 | "start_url": "index.html", 22 | "theme_color": "#222127", 23 | "background_color": "#f5f5f5", 24 | "display": "standalone" 25 | } 26 | -------------------------------------------------------------------------------- /packages/hnpwa/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hnpwa", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "dojo build", 6 | "build:deploy": "npm install && dojo build --dojorc .dojorc-deploy && shx rm -rf node_modules", 7 | "dev": "dojo build -m dev -w -s", 8 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 9 | "package": "shx cp -r output/dist/ ../../output/dist/hnpwa/", 10 | "test:ci": "echo \"no tests\"" 11 | }, 12 | "main": "src/main.tsx", 13 | "dependencies": { 14 | "@dojo/framework": "~8.0.0", 15 | "tslib": "~1.9.3" 16 | }, 17 | "devDependencies": { 18 | "@dojo/cli": "~8.0.0", 19 | "@dojo/cli-build-app": "~8.0.1", 20 | "@types/node": "^12.12.32", 21 | "@typescript-eslint/eslint-plugin": "2.25.0", 22 | "@typescript-eslint/parser": "2.25.0", 23 | "eslint": "6.8.0", 24 | "eslint-config-prettier": "6.10.1", 25 | "eslint-plugin-import": "2.20.2", 26 | "typescript": "3.4.5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/hnpwa/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/hnpwa/preview.png -------------------------------------------------------------------------------- /packages/hnpwa/src/img/hn.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/hnpwa/src/img/hn.ico -------------------------------------------------------------------------------- /packages/hnpwa/src/img/hn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/hnpwa/src/img/hn.png -------------------------------------------------------------------------------- /packages/hnpwa/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | hnpwa 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/hnpwa/src/interfaces.d.ts: -------------------------------------------------------------------------------- 1 | export interface CommentItem { 2 | user: string | null; 3 | content: string; 4 | time_ago: string; 5 | comments: CommentItem[]; 6 | } 7 | 8 | export interface ArticleItem { 9 | id: number; 10 | title: string; 11 | user: string | null; 12 | url: string; 13 | points: string | null; 14 | time_ago: string; 15 | comments_count: number; 16 | loading: boolean; 17 | comments: CommentItem[]; 18 | } 19 | -------------------------------------------------------------------------------- /packages/hnpwa/src/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-size: 14px; 6 | line-height: 1.3125; 7 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, 8 | Helvetica Neue, sans-serif; 9 | -webkit-text-size-adjust: 100%; 10 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 11 | box-sizing: border-box; 12 | background: #f1f1f1; 13 | } 14 | @media screen and (min-width: 360px) { 15 | html, 16 | body { 17 | font-size: 15px; 18 | } 19 | } 20 | @media screen and (min-width: 600px) { 21 | html, 22 | body { 23 | font-size: 16px; 24 | } 25 | } 26 | 27 | h1, 28 | h2, 29 | p { 30 | font: inherit; 31 | font-size: 100%; 32 | margin: 0; 33 | } 34 | -------------------------------------------------------------------------------- /packages/hnpwa/src/main.tsx: -------------------------------------------------------------------------------- 1 | import renderer, { tsx } from '@dojo/framework/core/vdom'; 2 | import { Registry } from '@dojo/framework/core/Registry'; 3 | import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector'; 4 | 5 | import routes from './routes'; 6 | import App from './widgets/App'; 7 | 8 | const registry = new Registry(); 9 | registerRouterInjector(routes, registry); 10 | 11 | const r = renderer(() => ); 12 | r.mount({ registry }); 13 | -------------------------------------------------------------------------------- /packages/hnpwa/src/routes.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 'content', 4 | path: '/{category}/{page}', 5 | outlet: 'content', 6 | defaultRoute: true, 7 | defaultParams: { 8 | category: 'top', 9 | page: '1' 10 | } 11 | }, 12 | { 13 | id: 'comments', 14 | path: '/comments/{id}', 15 | outlet: 'comments' 16 | } 17 | ]; 18 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/App.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import Route from '@dojo/framework/routing/Route'; 3 | 4 | import Comments from './Comments'; 5 | import Content from './Content'; 6 | import Menu from './Menu'; 7 | 8 | import * as css from './styles/app.m.css'; 9 | 10 | const factory = create(); 11 | 12 | export default factory(function App() { 13 | return ( 14 |
15 | 16 |
17 | { 20 | return ; 21 | }} 22 | /> 23 | { 26 | return ; 27 | }} 28 | /> 29 |
30 |
31 | ); 32 | }); 33 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/Comment.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import { CommentItem } from './../interfaces'; 3 | 4 | import * as css from './styles/comment.m.css'; 5 | 6 | export interface CommentProperties { 7 | comment: CommentItem; 8 | } 9 | 10 | const factory = create().properties(); 11 | 12 | const CommentWidget = factory(function Comment({ properties }) { 13 | const { 14 | comment: { user, content, time_ago, comments = [] } 15 | } = properties(); 16 | 17 | return ( 18 |
19 |
20 | {user && {user}} 21 | {time_ago} 22 |
23 |
24 |
25 | {comments.map((comment, index) => ( 26 | 27 | ))} 28 |
29 |
30 | ); 31 | }); 32 | 33 | export default CommentWidget; 34 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/Loading.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import * as css from './styles/loading.m.css'; 3 | 4 | const factory = create(); 5 | 6 | export default factory(function Loading() { 7 | return
; 8 | }); 9 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/Menu.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import ActiveLink from './ActiveLink'; 3 | import Link from '@dojo/framework/routing/Link'; 4 | 5 | import * as css from './styles/menu.m.css'; 6 | const logo = require('../img/logo.svg'); 7 | 8 | export interface MenuProperties { 9 | currentCategory?: string; 10 | } 11 | 12 | const categories = ['top', 'new', 'show', 'ask', 'jobs']; 13 | 14 | const factory = create(); 15 | 16 | export default factory(function Menu() { 17 | return ( 18 | 38 | ); 39 | }); 40 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/app.m.css: -------------------------------------------------------------------------------- 1 | .main { 2 | margin: 0 auto; 3 | max-width: 800px; 4 | margin-top: 48px; 5 | background: white; 6 | } 7 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/app.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const main: string; 2 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/article.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const pageNumber: string; 3 | export const post: string; 4 | export const titleLink: string; 5 | export const details: string; 6 | export const link: string; 7 | export const comments: string; 8 | export const animated: string; 9 | export const placeHolderShimmer: string; 10 | export const animatedTitle: string; 11 | export const animatedSubTitle: string; 12 | export const animatedComment: string; 13 | export const titleShell: string; 14 | export const subtitleShell: string; 15 | export const commentShell: string; 16 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/comment.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | padding: 0 1.5rem; 3 | } 4 | 5 | .padding { 6 | margin: 0 0 16px; 7 | } 8 | 9 | .user { 10 | color: #666; 11 | cursor: pointer; 12 | text-decoration: underline; 13 | } 14 | 15 | .time { 16 | padding-left: 8px; 17 | font-size: 13px; 18 | } 19 | 20 | .comment { 21 | border-bottom: 1px solid #ececec; 22 | padding-bottom: 16px; 23 | margin-bottom: 16px; 24 | } 25 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/comment.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const padding: string; 3 | export const user: string; 4 | export const time: string; 5 | export const comment: string; 6 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/comments.m.css: -------------------------------------------------------------------------------- 1 | .article { 2 | margin-bottom: 24px; 3 | border-bottom: 32px solid #f3f3f3; 4 | padding: 16px 24px 8px; 5 | } 6 | 7 | .title { 8 | display: block; 9 | text-decoration: none; 10 | font-size: 27px; 11 | color: #000; 12 | margin-bottom: 12px; 13 | } 14 | 15 | .user { 16 | color: #666; 17 | } 18 | 19 | .comments { 20 | padding: 0 24px; 21 | } 22 | 23 | .commentCount { 24 | border-bottom: 1px solid #ececec; 25 | margin-bottom: 12px; 26 | padding-bottom: 12px; 27 | } 28 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/comments.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const article: string; 2 | export const title: string; 3 | export const user: string; 4 | export const comments: string; 5 | export const commentCount: string; 6 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/content.m.css: -------------------------------------------------------------------------------- 1 | .pageLink { 2 | color: #000; 3 | cursor: pointer; 4 | text-decoration: underline; 5 | } 6 | 7 | .disabled { 8 | color: rgba(49, 40, 40, 0.65); 9 | cursor: not-allowed; 10 | text-decoration: underline; 11 | } 12 | 13 | .pagination { 14 | text-align: center; 15 | position: fixed; 16 | width: 100%; 17 | margin: 0; 18 | left: 0; 19 | background: #fff; 20 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 21 | height: 56px; 22 | display: flex; 23 | z-index: 99; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .pageNumber { 29 | margin: 0 16px; 30 | } 31 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/content.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const pageLink: string; 2 | export const disabled: string; 3 | export const pagination: string; 4 | export const pageNumber: string; 5 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/loading.m.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | width: 40px; 3 | height: 40px; 4 | margin: 100px auto; 5 | background-color: #333; 6 | border-radius: 100%; 7 | animation: sk-scaleout 1s infinite ease-in-out; 8 | } 9 | 10 | @keyframes sk-scaleout { 11 | 0% { 12 | transform: scale(0); 13 | } 14 | 100% { 15 | transform: scale(1); 16 | opacity: 0; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/loading.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const spinner: string; 2 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/menu.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | position: fixed; 3 | width: 100%; 4 | top: 0; 5 | height: 48px; 6 | z-index: 100; 7 | background-color: #1d1f20; 8 | } 9 | 10 | .menuContainer { 11 | height: 100%; 12 | margin: 0 auto; 13 | } 14 | 15 | .home { 16 | float: left; 17 | cursor: pointer; 18 | } 19 | 20 | .logoLoaded { 21 | height: 38px; 22 | margin: 4px; 23 | animation: fadein 0.5s; 24 | width: 148px; 25 | } 26 | 27 | .logo { 28 | width: 148px; 29 | opacity: 0; 30 | } 31 | 32 | .item { 33 | height: 100%; 34 | display: inline-block; 35 | } 36 | 37 | .link { 38 | color: #fff; 39 | text-decoration: none; 40 | margin: 0 6.4px; 41 | position: relative; 42 | display: flex; 43 | flex-direction: column; 44 | justify-content: center; 45 | height: 100%; 46 | cursor: pointer; 47 | } 48 | 49 | .link::after { 50 | display: block; 51 | content: ''; 52 | background: #fff; 53 | height: 2px; 54 | position: absolute; 55 | width: 100%; 56 | bottom: 0; 57 | transition: transform 0.3s ease-out; 58 | transform: translateY(3px); 59 | } 60 | 61 | .selected::after { 62 | transform: translateY(0); 63 | } 64 | 65 | @keyframes fadein { 66 | from { 67 | opacity: 0; 68 | } 69 | to { 70 | opacity: 1; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /packages/hnpwa/src/widgets/styles/menu.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const menuContainer: string; 3 | export const home: string; 4 | export const logoLoaded: string; 5 | export const fadein: string; 6 | export const logo: string; 7 | export const item: string; 8 | export const link: string; 9 | export const selected: string; 10 | -------------------------------------------------------------------------------- /packages/hnpwa/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [ "node" ] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/icache-advanced/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": {}, 3 | "test-intern": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/icache-advanced/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/icache-advanced/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/icache-advanced/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [{package.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/icache-advanced/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/icache-advanced/.gitignore: -------------------------------------------------------------------------------- 1 | assets 2 | *.js 3 | *.js.map 4 | !/*.js 5 | !/tasks/*.js 6 | /_build 7 | /bower_components 8 | /dist 9 | /example 10 | /html-report 11 | /output 12 | /temp-example 13 | /node_modules 14 | /typings 15 | .baseDir.ts 16 | .tscache 17 | .tsconfig*.json 18 | coverage-unmapped.json 19 | npm-debug.log 20 | -------------------------------------------------------------------------------- /packages/icache-advanced/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "icache-advanced", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "dojo build --mode dev --watch --serve", 6 | "build": "dojo build --mode dist", 7 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 8 | "build:dev": "dojo build --mode dev", 9 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 10 | "package": "shx cp -r output/dist/ ../../output/dist/icache-advanced/", 11 | "test:ci": "echo no tests" 12 | }, 13 | "main": "src/main.tsx", 14 | "dependencies": { 15 | "@dojo/framework": "~8.0.0", 16 | "@material/button": "2.3.0", 17 | "@material/card": "2.3.0", 18 | "@material/typography": "2.3.0", 19 | "cldrjs": "0.5.0", 20 | "tslib": "~1.9.3" 21 | }, 22 | "devDependencies": { 23 | "@dojo/cli": "~8.0.0", 24 | "@dojo/cli-build-app": "~8.0.1", 25 | "@typescript-eslint/eslint-plugin": "2.25.0", 26 | "@typescript-eslint/parser": "2.25.0", 27 | "eslint": "6.8.0", 28 | "eslint-config-prettier": "6.10.1", 29 | "eslint-plugin-import": "2.20.2", 30 | "typescript": "~3.4.5" 31 | }, 32 | "keywords": [], 33 | "description": "Example of getOrSet icache API" 34 | } 35 | -------------------------------------------------------------------------------- /packages/icache-advanced/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icache-basic 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icache-advanced/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, renderer } from '@dojo/framework/core/vdom'; 2 | import '@material/card/dist/mdc.card.css'; 3 | import '@material/button/dist/mdc.button.css'; 4 | import '@material/typography/dist/mdc.typography.css'; 5 | 6 | import { App } from './App'; 7 | 8 | const r = renderer(() => ); 9 | r.mount(); 10 | -------------------------------------------------------------------------------- /packages/icache-advanced/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/icache-basic/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": {}, 3 | "test-intern": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/icache-basic/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/icache-basic/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/icache-basic/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [{package.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/icache-basic/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/icache-basic/.gitignore: -------------------------------------------------------------------------------- 1 | assets 2 | *.js 3 | *.js.map 4 | !/*.js 5 | !/tasks/*.js 6 | /_build 7 | /bower_components 8 | /dist 9 | /example 10 | /html-report 11 | /output 12 | /temp-example 13 | /node_modules 14 | /typings 15 | .baseDir.ts 16 | .tscache 17 | .tsconfig*.json 18 | coverage-unmapped.json 19 | npm-debug.log 20 | -------------------------------------------------------------------------------- /packages/icache-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "icache-basic", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "dojo build --mode dev --watch --serve", 6 | "build": "dojo build --mode dist", 7 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 8 | "build:dev": "dojo build --mode dev", 9 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 10 | "package": "shx cp -r output/dist/ ../../output/dist/icache-basic/", 11 | "test:ci": "echo no tests" 12 | }, 13 | "main": "src/main.tsx", 14 | "dependencies": { 15 | "@dojo/framework": "~8.0.0", 16 | "cldrjs": "0.5.0", 17 | "tslib": "~1.9.3" 18 | }, 19 | "devDependencies": { 20 | "@dojo/cli": "~8.0.0", 21 | "@dojo/cli-build-app": "~8.0.1", 22 | "@typescript-eslint/eslint-plugin": "2.25.0", 23 | "@typescript-eslint/parser": "2.25.0", 24 | "eslint": "6.8.0", 25 | "eslint-config-prettier": "6.10.1", 26 | "eslint-plugin-import": "2.20.2", 27 | "typescript": "~3.4.5" 28 | }, 29 | "keywords": [], 30 | "description": "" 31 | } 32 | -------------------------------------------------------------------------------- /packages/icache-basic/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icache-basic 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icache-basic/src/main.css: -------------------------------------------------------------------------------- 1 | /* Put your styles and imports here */ 2 | 3 | body { 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /packages/icache-basic/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, renderer, create } from '@dojo/framework/core/vdom'; 2 | import icache from '@dojo/framework/core/middleware/icache'; 3 | 4 | const factory = create({ icache }); 5 | 6 | const App = factory(function App({ middleware: { icache } }) { 7 | const counter = icache.get('counter') || 0; 8 | return ( 9 |
10 | 18 | 26 |
{`${counter}`}
27 |
28 | ); 29 | }); 30 | 31 | const r = renderer(() => ); 32 | r.mount(); 33 | -------------------------------------------------------------------------------- /packages/icache-basic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/intersection-observer/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": {}, 3 | "test-intern": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/intersection-observer/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/intersection-observer/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/intersection-observer/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/intersection-observer/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | _build/ 3 | output/ 4 | .idea 5 | -------------------------------------------------------------------------------- /packages/intersection-observer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "intersection-observer", 3 | "version": "1.0.0", 4 | "main": "src/main.ts", 5 | "scripts": { 6 | "dev": "dojo build app -m dev -w -s", 7 | "build": "dojo build", 8 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 9 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 10 | "package": "shx cp -r output/dist/ ../../output/dist/intersection-observer/", 11 | "test:ci": "echo no tests" 12 | }, 13 | "dependencies": { 14 | "@dojo/framework": "~8.0.0", 15 | "tslib": "~1.9.3" 16 | }, 17 | "devDependencies": { 18 | "@dojo/cli": "~8.0.0", 19 | "@dojo/cli-build-app": "~8.0.1", 20 | "@dojo/cli-test-intern": "~8.0.0", 21 | "@typescript-eslint/eslint-plugin": "2.25.0", 22 | "@typescript-eslint/parser": "2.25.0", 23 | "eslint": "6.8.0", 24 | "eslint-config-prettier": "6.10.1", 25 | "eslint-plugin-import": "2.20.2", 26 | "typescript": "~3.4.5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/intersection-observer/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/intersection-observer/preview.png -------------------------------------------------------------------------------- /packages/intersection-observer/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Infinite Scrolling List 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/main.css: -------------------------------------------------------------------------------- 1 | /* Put your styles and imports here */ 2 | body { 3 | color: #111; 4 | background: white; 5 | font-family: sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/main.ts: -------------------------------------------------------------------------------- 1 | import renderer, { w } from '@dojo/framework/core/vdom'; 2 | import App from './widgets/App'; 3 | 4 | const r = renderer(() => w(App, {})); 5 | r.mount(); 6 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/App.ts: -------------------------------------------------------------------------------- 1 | import { create, w, v } from '@dojo/framework/core/vdom'; 2 | import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache'; 3 | import { getListItems } from '../listItemGenerator'; 4 | import InfiniteList from './InfiniteList'; 5 | 6 | import * as css from './styles/app.m.css'; 7 | 8 | interface AppState { 9 | data: { title: string; summary: string }[]; 10 | loading: boolean; 11 | } 12 | 13 | const icache = createICacheMiddleware(); 14 | const factory = create({ icache }); 15 | 16 | export default factory(function App({ middleware: { icache } }) { 17 | const data = icache.getOrSet('data', getListItems); 18 | const isLoading = icache.get('loading') || false; 19 | 20 | return v('div', { classes: css.root }, [ 21 | v('h1', { classes: css.title }, ['Infinite Scrolling List']), 22 | data !== undefined && 23 | w(InfiniteList, { 24 | isLoading, 25 | data, 26 | onRequestItems: async () => { 27 | icache.set('loading', true); 28 | const newData = await getListItems(); 29 | const data = icache.get('data') || []; 30 | icache.set('loading', false); 31 | icache.set('data', [...data, ...newData]); 32 | } 33 | }) 34 | ]); 35 | }); 36 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/InfiniteList.ts: -------------------------------------------------------------------------------- 1 | import { create, v, w } from '@dojo/framework/core/vdom'; 2 | import intersection from '@dojo/framework/core/middleware/intersection'; 3 | 4 | import Item from './Item'; 5 | import * as css from './styles/infiniteList.m.css'; 6 | 7 | export interface InfiniteListProperties { 8 | onRequestItems(): Promise; 9 | data: any[]; 10 | isLoading: boolean; 11 | } 12 | 13 | const factory = create({ intersection }).properties(); 14 | 15 | export default factory(function InfiniteList({ middleware: { intersection }, properties }) { 16 | const { onRequestItems, data, isLoading } = properties(); 17 | const { isIntersecting } = intersection.get('bottom'); 18 | 19 | if (isIntersecting && !isLoading) { 20 | onRequestItems(); 21 | } 22 | 23 | return v('div', {}, [ 24 | v( 25 | 'div', 26 | { key: 'data' }, 27 | data.map(({ title, summary }, i) => w(Item, { key: i, title, summary })) 28 | ), 29 | v('div', { key: 'bottom', classes: css.bottom }) 30 | ]); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/Item.ts: -------------------------------------------------------------------------------- 1 | import { create, v } from '@dojo/framework/core/vdom'; 2 | 3 | import * as css from './styles/Item.m.css'; 4 | 5 | interface ItemProperties { 6 | title: string; 7 | summary: string; 8 | } 9 | 10 | const factory = create().properties(); 11 | 12 | export default factory(function Item({ properties }) { 13 | const { title, summary } = properties(); 14 | return v('div', { classes: css.root }, [ 15 | v('h2', { classes: css.title }, [title]), 16 | v('p', { classes: css.summary }, [summary]) 17 | ]); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/styles/Item.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | background-color: white; 3 | padding: 40px; 4 | border: 1px solid #eee; 5 | margin: 17px; 6 | } 7 | 8 | .title { 9 | font-size: 16px; 10 | font-weight: bold; 11 | margin: 0; 12 | color: #0170cd; 13 | } 14 | 15 | .summary { 16 | font-family: serif; 17 | font-size: 16px; 18 | line-height: 1.6em; 19 | } 20 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/styles/Item.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const title: string; 3 | export const summary: string; 4 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/styles/app.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | max-width: 800px; 3 | margin: 100px auto 0; 4 | } 5 | 6 | .title { 7 | font-weight: 300; 8 | font-size: 72px; 9 | text-align: center; 10 | margin: 0 0 100px 0; 11 | } 12 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/styles/app.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const title: string; 3 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/styles/infiniteList.m.css: -------------------------------------------------------------------------------- 1 | .bottom { 2 | height: 1px; 3 | visibility: hidden; 4 | } 5 | -------------------------------------------------------------------------------- /packages/intersection-observer/src/widgets/styles/infiniteList.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const bottom: string; 2 | -------------------------------------------------------------------------------- /packages/intersection-observer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/realworld/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "pwa": { 4 | "manifest": { 5 | "name": "dojo-realworld", 6 | "short_name": "dojo-realworld", 7 | "description": "dojo-realworld", 8 | "background_color": "#ffffff", 9 | "theme_color": "#222127", 10 | "icons": [ 11 | { 12 | "src": "src/logo.png", 13 | "sizes": [ 14 | 128, 15 | 256, 16 | 512 17 | ] 18 | } 19 | ] 20 | }, 21 | "serviceWorker": { 22 | "clientsClaim": true, 23 | "routes": [ 24 | { 25 | "urlPattern": "https://fonts.googleapis.com/css", 26 | "strategy": "networkFirst", 27 | "expiration": { 28 | "maxEntries": 25 29 | } 30 | }, 31 | { 32 | "urlPattern": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css", 33 | "strategy": "networkFirst", 34 | "expiration": { 35 | "maxEntries": 25 36 | } 37 | }, 38 | { 39 | "urlPattern": "https://demo.productionready.io", 40 | "strategy": "networkFirst", 41 | "expiration": { 42 | "maxEntries": 25 43 | } 44 | }, 45 | { 46 | "urlPattern": "https://conduit.productionready.io/api", 47 | "strategy": "networkFirst", 48 | "expiration": { 49 | "maxEntries": 25 50 | } 51 | } 52 | ] 53 | } 54 | }, 55 | "legacy": false 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/realworld/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/realworld/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/realworld/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/realworld/.gitignore: -------------------------------------------------------------------------------- 1 | /output 2 | /html-report 3 | /node_modules 4 | _build 5 | /coverage 6 | .tsconfig*.json 7 | npm-debug.log 8 | -------------------------------------------------------------------------------- /packages/realworld/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/realworld/logo.png -------------------------------------------------------------------------------- /packages/realworld/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "realworld-app", 3 | "version": "1.0.0", 4 | "main": "src/main.tsx", 5 | "scripts": { 6 | "dev": "dojo build -m dev -s -w memory", 7 | "build": "dojo build", 8 | "build:deploy": "npm install && dojo build --dojorc .dojorc-deploy && shx rm -rf node_modules", 9 | "build:test": "dojo build -m unit", 10 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 11 | "test": "run-s build:test test:local", 12 | "test:ci": "run-s build:test test:headless", 13 | "package": "shx cp -r output/dist/ ../../output/dist/realworld/", 14 | "test:local": "dojo test -c local", 15 | "test:headless": "dojo test -c headless" 16 | }, 17 | "dependencies": { 18 | "@dojo/framework": "~8.0.0", 19 | "snarkdown": "^1.2.2", 20 | "tslib": "^1.10.0" 21 | }, 22 | "devDependencies": { 23 | "@dojo/cli": "~8.0.0", 24 | "@dojo/cli-build-app": "~8.0.1", 25 | "@dojo/cli-test-intern": "~8.0.0", 26 | "@dojo/scripts": "^4.0.2", 27 | "@types/node": "^12.12.32", 28 | "@types/sinon": "^7.5.2", 29 | "@typescript-eslint/eslint-plugin": "2.25.0", 30 | "@typescript-eslint/parser": "2.25.0", 31 | "eslint": "6.8.0", 32 | "eslint-config-prettier": "6.10.1", 33 | "eslint-plugin-import": "2.20.2", 34 | "npm-run-all": "4.1.5", 35 | "sinon": "^9.0.1", 36 | "typescript": "~3.9.5" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/realworld/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/realworld/preview.png -------------------------------------------------------------------------------- /packages/realworld/src/config.ts: -------------------------------------------------------------------------------- 1 | export const baseUrl = 'https://conduit.productionready.io/api'; 2 | -------------------------------------------------------------------------------- /packages/realworld/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | dojo-realworld 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/realworld/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/realworld/src/logo.png -------------------------------------------------------------------------------- /packages/realworld/src/main.css: -------------------------------------------------------------------------------- 1 | /* Put your styles and imports here */ 2 | -------------------------------------------------------------------------------- /packages/realworld/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { renderer, tsx } from '@dojo/framework/core/vdom'; 2 | import { registry } from './store'; 3 | 4 | import { App } from './App'; 5 | 6 | const r = renderer(() => ); 7 | r.mount({ registry }); 8 | -------------------------------------------------------------------------------- /packages/realworld/src/processes/routeProcesses.ts: -------------------------------------------------------------------------------- 1 | import { createProcess } from '@dojo/framework/stores/process'; 2 | import { commandFactory } from './utils'; 3 | import { ChangeRoutePayload } from './interfaces'; 4 | 5 | function isProfile(currentOutlet: string, outlet: string) { 6 | const outlets = ['user', 'favorites']; 7 | return outlets.indexOf(currentOutlet) > -1 && outlets.indexOf(outlet) > -1; 8 | } 9 | 10 | const changeRouteCommand = commandFactory(({ state, payload: { outlet, context } }) => { 11 | const currentOutlet = state.routing.outlet; 12 | 13 | state.routing.outlet = outlet; 14 | state.routing.params = context.params; 15 | state.settings = {}; 16 | state.editor = {}; 17 | if (isProfile(currentOutlet, outlet) && state.profile) { 18 | state.profile.feed = {}; 19 | } else { 20 | state.profile = {}; 21 | } 22 | state.feed = {}; 23 | state.errors = {}; 24 | }); 25 | export const changeRouteProcess = createProcess('change-route', [changeRouteCommand]); 26 | -------------------------------------------------------------------------------- /packages/realworld/src/processes/tagProcesses.ts: -------------------------------------------------------------------------------- 1 | import { createProcess } from '@dojo/framework/stores/process'; 2 | import { commandFactory } from './utils'; 3 | import { baseUrl } from '../config'; 4 | 5 | const getTagsCommand = commandFactory(async ({ state }) => { 6 | const response = await fetch(`${baseUrl}/tags`); 7 | const json = await response.json(); 8 | 9 | state.tags = json.tags; 10 | }); 11 | 12 | export const getTagsProcess = createProcess('get-tags', [getTagsCommand]); 13 | -------------------------------------------------------------------------------- /packages/realworld/src/processes/utils.ts: -------------------------------------------------------------------------------- 1 | import { createCommandFactory } from '@dojo/framework/stores/process'; 2 | import { State } from '../interfaces'; 3 | 4 | export function getHeaders(token?: string): any { 5 | const headers: { [key: string]: string } = { 6 | 'Content-Type': 'application/json' 7 | }; 8 | if (token) { 9 | headers['Authorization'] = `Token ${token}`; 10 | } 11 | return headers; 12 | } 13 | 14 | export const commandFactory = createCommandFactory(); 15 | -------------------------------------------------------------------------------- /packages/realworld/src/routes.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 'login', 4 | path: 'login', 5 | outlet: 'login' 6 | }, 7 | { 8 | id: 'register', 9 | path: 'register', 10 | outlet: 'register' 11 | }, 12 | { 13 | id: 'user', 14 | path: 'user/{username}', 15 | outlet: 'user' 16 | }, 17 | { 18 | id: 'favorites', 19 | path: 'user/{username}/favorites', 20 | outlet: 'favorites' 21 | }, 22 | { 23 | id: 'article', 24 | path: 'article/{slug}', 25 | outlet: 'article' 26 | }, 27 | { 28 | id: 'settings', 29 | path: 'settings', 30 | outlet: 'settings' 31 | }, 32 | { 33 | id: 'new-post', 34 | path: 'editor', 35 | outlet: 'new-post', 36 | children: [ 37 | { 38 | id: 'edit-post', 39 | path: 'editor/{slug}', 40 | outlet: 'edit-post' 41 | } 42 | ] 43 | }, 44 | { 45 | id: 'home', 46 | path: 'home', 47 | outlet: 'home', 48 | defaultRoute: true 49 | } 50 | ]; 51 | -------------------------------------------------------------------------------- /packages/realworld/src/widgets/ArticleAuthorControls.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import { Link } from '@dojo/framework/routing/Link'; 3 | import { SlugPayload } from '../processes/interfaces'; 4 | 5 | interface ArticleAuthorControlsProperties { 6 | slug: string; 7 | deleteArticle: (opts: SlugPayload) => void; 8 | } 9 | 10 | const factory = create({}).properties(); 11 | 12 | export const ArticleAuthorControls = factory(function ArticleAuthorControls({ properties }) { 13 | const { slug, deleteArticle } = properties(); 14 | return ( 15 | 16 | 17 | Edit Article 18 | 19 | 27 | 28 | ); 29 | }); 30 | 31 | export default ArticleAuthorControls; 32 | -------------------------------------------------------------------------------- /packages/realworld/src/widgets/Banner.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | 3 | const factory = create(); 4 | 5 | export const Banner = factory(function Banner() { 6 | return ( 7 |
8 |
9 |

conduit

10 |

A place to share your knowledge.

11 |
12 |
13 | ); 14 | }); 15 | 16 | export default Banner; 17 | -------------------------------------------------------------------------------- /packages/realworld/src/widgets/ErrorList.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import { Errors } from '../interfaces'; 3 | 4 | interface ErrorListProperties { 5 | errors: Errors; 6 | } 7 | 8 | const factory = create({}).properties(); 9 | 10 | export const ErrorList = factory(function ErrorList({ properties }) { 11 | const { errors } = properties(); 12 | const errorCategories = Object.keys(errors); 13 | let errorList: string[] = []; 14 | for (let i = 0; i < errorCategories.length; i++) { 15 | errorList = [ 16 | ...errorList, 17 | ...errors[errorCategories[i]].map((error: string) => `${errorCategories[i]} ${error}`) 18 | ]; 19 | } 20 | errorList; 21 | 22 | return ( 23 |
    24 | {errorList.map((error: string) => ( 25 |
  • {error}
    • 26 | ))} 27 |
28 | ); 29 | }); 30 | 31 | export default ErrorList; 32 | -------------------------------------------------------------------------------- /packages/realworld/src/widgets/FeedList.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import store from '../store'; 3 | 4 | import { favoriteFeedArticleProcess } from './../processes/feedProcesses'; 5 | import { ArticlePreview } from './ArticlePreview'; 6 | import { ArticleItem } from '../interfaces'; 7 | 8 | interface FeedListProperties { 9 | type: string; 10 | articles: ArticleItem[]; 11 | } 12 | 13 | const factory = create({ store }).properties(); 14 | 15 | export const FeedList = factory(function Tab({ middleware: { store }, properties }) { 16 | const { executor } = store; 17 | const { articles, type } = properties(); 18 | if (articles.length) { 19 | return ( 20 |
21 | {articles.map((article) => ( 22 | { 26 | executor(favoriteFeedArticleProcess)({ 27 | slug: article.slug, 28 | favorited: article.favorited, 29 | type 30 | }); 31 | }} 32 | /> 33 | ))} 34 |
35 | ); 36 | } 37 | 38 | return
No articles here, yet!
; 39 | }); 40 | 41 | export default FeedList; 42 | -------------------------------------------------------------------------------- /packages/realworld/src/widgets/FeedPagination.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import { DNode } from '@dojo/framework/core/interfaces'; 3 | 4 | interface FeedPaginationProperties { 5 | total: number; 6 | currentPage: number; 7 | fetchFeed: (page: number) => void; 8 | } 9 | 10 | const factory = create({}).properties(); 11 | 12 | export const FeedPagination = factory(function ({ properties }) { 13 | const { total, currentPage, fetchFeed } = properties(); 14 | 15 | const pageNumbers: DNode[] = []; 16 | for (let page = 0; page < Math.ceil(total / 10); page++) { 17 | const isActive = currentPage === page; 18 | const onclick = (event: MouseEvent) => { 19 | event.preventDefault(); 20 | if (page !== currentPage) { 21 | fetchFeed(page); 22 | } 23 | }; 24 | pageNumbers.push( 25 |
  • 26 | 27 | {`${page + 1}`} 28 | 29 |
    • 30 | ); 31 | } 32 | 33 | return ( 34 | 37 | ); 38 | }); 39 | 40 | export default FeedPagination; 41 | -------------------------------------------------------------------------------- /packages/realworld/src/widgets/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | 3 | const factory = create(); 4 | 5 | export const Footer = factory(function Footer() { 6 | return ( 7 | 18 | ); 19 | }); 20 | 21 | export default Footer; 22 | -------------------------------------------------------------------------------- /packages/realworld/src/widgets/Tags.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import { fetchFeedProcess } from '../processes/feedProcesses'; 3 | import store from '../store'; 4 | 5 | const factory = create({ store }); 6 | 7 | export const Tags = factory(function Tags({ middleware: { store } }) { 8 | const { get, path, executor } = store; 9 | const tags = get(path('tags')) || []; 10 | 11 | return ( 12 | 32 | ); 33 | }); 34 | 35 | export default Tags; 36 | -------------------------------------------------------------------------------- /packages/realworld/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "skipLibCheck": true, 25 | "target": "es5", 26 | "types": [ "intern" ] 27 | }, 28 | "include": [ 29 | "./src/**/*.ts", 30 | "./src/**/*.tsx" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /packages/resize-middleware/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": {}, 3 | "test-intern": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/resize-middleware/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/resize-middleware/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/resize-middleware/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [{package.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/resize-middleware/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/resize-middleware/.gitignore: -------------------------------------------------------------------------------- 1 | assets 2 | *.js 3 | *.js.map 4 | !/*.js 5 | !/tasks/*.js 6 | /_build 7 | /bower_components 8 | /dist 9 | /example 10 | /html-report 11 | /output 12 | /temp-example 13 | /node_modules 14 | /typings 15 | .baseDir.ts 16 | .tscache 17 | .tsconfig*.json 18 | coverage-unmapped.json 19 | npm-debug.log 20 | -------------------------------------------------------------------------------- /packages/resize-middleware/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "resize-middleware", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "dojo build --mode dev --watch --serve", 6 | "build": "dojo build --mode dist", 7 | "build:dev": "dojo build --mode dev", 8 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 9 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 10 | "package": "shx cp -r output/dist/ ../../output/dist/resize-middleware/", 11 | "test:ci": "echo no tests" 12 | }, 13 | "main": "src/main.tsx", 14 | "dependencies": { 15 | "@dojo/framework": "~8.0.0", 16 | "tslib": "~1.9.3" 17 | }, 18 | "devDependencies": { 19 | "@dojo/cli": "~8.0.0", 20 | "@dojo/cli-build-app": "~8.0.1", 21 | "@typescript-eslint/eslint-plugin": "2.25.0", 22 | "@typescript-eslint/parser": "2.25.0", 23 | "eslint": "6.8.0", 24 | "eslint-config-prettier": "6.10.1", 25 | "eslint-plugin-import": "2.20.2", 26 | "typescript": "~3.4.5" 27 | }, 28 | "keywords": [], 29 | "description": "Demonstrates working with an element that changes dimensions" 30 | } 31 | -------------------------------------------------------------------------------- /packages/resize-middleware/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | resize-middleware 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/resize-middleware/src/main.css: -------------------------------------------------------------------------------- 1 | /* Put your styles and imports here */ 2 | 3 | .container { 4 | position: relative; 5 | padding: 20px 20px 20px 40px; 6 | } 7 | 8 | .text { 9 | overflow: hidden; 10 | background: #eee; 11 | padding: 0px 8px; 12 | box-sizing: border-box; 13 | } 14 | 15 | .height { 16 | position: absolute; 17 | transition: all 0.6s; 18 | left: 0; 19 | top: 50px; 20 | width: 10px; 21 | border: 1px solid rgb(170, 30, 30); 22 | border-right: 0; 23 | } 24 | 25 | span { 26 | position: absolute; 27 | left: 50%; 28 | top: 50%; 29 | transform: translate(-30%, -50%) rotate(90deg); 30 | } 31 | -------------------------------------------------------------------------------- /packages/resize-middleware/src/main.tsx: -------------------------------------------------------------------------------- 1 | import renderer, { tsx } from '@dojo/framework/core/vdom'; 2 | 3 | import { ResizeWidget } from './ResizeWidget'; 4 | 5 | const r = renderer(() => ); 6 | r.mount(); 7 | -------------------------------------------------------------------------------- /packages/resize-middleware/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/resize-observer/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": {}, 3 | "test-intern": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/resize-observer/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/resize-observer/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/resize-observer/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/resize-observer/.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.js.map 3 | !/*.js 4 | !/tasks/*.js 5 | /_build 6 | /bower_components 7 | /dist 8 | /output 9 | /html-report 10 | /node_modules 11 | /coverage 12 | coverage-final.lcov 13 | atypings 14 | .baseDir.ts 15 | .tscache 16 | .tsconfig*.json 17 | coverage-unmapped.json 18 | npm-debug.log 19 | -------------------------------------------------------------------------------- /packages/resize-observer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "resize-observer", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "dojo build app -m dev -w -s", 6 | "build": "dojo build", 7 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 8 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 9 | "package": "shx cp -r output/dist/ ../../output/dist/resize-observer/", 10 | "test:ci": "echo no tests" 11 | }, 12 | "main": "src/main.ts", 13 | "dependencies": { 14 | "@dojo/framework": "~8.0.0", 15 | "@dojo/widgets": "~8.0.0", 16 | "tslib": "~1.9.3" 17 | }, 18 | "devDependencies": { 19 | "@dojo/cli": "~8.0.0", 20 | "@dojo/cli-build-app": "~8.0.1", 21 | "@typescript-eslint/eslint-plugin": "2.25.0", 22 | "@typescript-eslint/parser": "2.25.0", 23 | "eslint": "6.8.0", 24 | "eslint-config-prettier": "6.10.1", 25 | "eslint-plugin-import": "2.20.2", 26 | "typescript": "~3.4.5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/resize-observer/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/resize-observer/preview.png -------------------------------------------------------------------------------- /packages/resize-observer/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dojo Resize Observer Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/resize-observer/src/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | margin: 0; 6 | padding: 0; 7 | font: 1em/1.5 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, 8 | Helvetica Neue; 9 | color: #404040; 10 | } 11 | 12 | h1, 13 | h2, 14 | h3, 15 | p { 16 | padding: 0; 17 | margin: 0; 18 | user-select: none; 19 | } 20 | -------------------------------------------------------------------------------- /packages/resize-observer/src/main.ts: -------------------------------------------------------------------------------- 1 | import renderer, { w } from '@dojo/framework/core/vdom'; 2 | import App from './widgets/App'; 3 | import '@dojo/framework/shim/browser'; 4 | 5 | const r = renderer(() => w(App, {})); 6 | r.mount(); 7 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/Column.ts: -------------------------------------------------------------------------------- 1 | import { create, v } from '@dojo/framework/core/vdom'; 2 | import breakpoint from '@dojo/framework/core/middleware/breakpoint'; 3 | import * as css from './styles/columns.m.css'; 4 | 5 | const factory = create({ breakpoint }); 6 | 7 | export default factory(function Column({ middleware: { breakpoint }, children }) { 8 | const { breakpoint: bp } = breakpoint.get('root', { SM: 0, BG: 500 }) || { breakpoint: 'SM' }; 9 | return v('div', { key: 'root', classes: [css.root, bp === 'SM' ? css.small : css.big] }, [ 10 | v('div', { classes: css.badge }, [bp === 'SM' ? 'small' : 'big']), 11 | ...children() 12 | ]); 13 | }); 14 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/app.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | width: 100%; 3 | height: 100%; 4 | position: relative; 5 | overflow-y: scroll; /* has to be scroll, not auto */ 6 | -webkit-overflow-scrolling: touch; 7 | } 8 | 9 | .controls { 10 | height: 25px; 11 | } 12 | 13 | .parentContainer { 14 | display: flex; 15 | } 16 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/app.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const controls: string; 3 | export const parentContainer: string; 4 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/article.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | background: #fff; 3 | border: 1px solid rgba(0, 0, 0, 0.075); 4 | padding: 1.5em; 5 | position: relative; 6 | overflow: hidden; 7 | } 8 | 9 | .content { 10 | } 11 | 12 | .text { 13 | padding: 0; 14 | margin: 0; 15 | } 16 | 17 | .big { 18 | & .content { 19 | column-count: 3; 20 | } 21 | & .badge { 22 | background: #40bf80; 23 | } 24 | } 25 | 26 | .medium { 27 | & .content { 28 | column-count: 2; 29 | } 30 | & .badge { 31 | background: #ab47bc; 32 | } 33 | } 34 | 35 | .small { 36 | & .content { 37 | column-count: 1; 38 | } 39 | & .badge { 40 | background: #33b2cc; 41 | } 42 | } 43 | 44 | .title { 45 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 46 | font-weight: 700; 47 | letter-spacing: 0.15em; 48 | margin-bottom: 1em; 49 | padding-bottom: 0.5em; 50 | text-transform: uppercase; 51 | font-size: 1.2em; 52 | } 53 | 54 | .root .paragraph { 55 | margin: 0 0 1em; 56 | } 57 | 58 | .badge { 59 | composes: badge from "./common.m.css"; 60 | } 61 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/article.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const content: string; 3 | export const text: string; 4 | export const big: string; 5 | export const badge: string; 6 | export const medium: string; 7 | export const small: string; 8 | export const title: string; 9 | export const paragraph: string; 10 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/calendar.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const badge: string; 2 | export const root: string; 3 | export const calendarTimes: string; 4 | export const calendarDay: string; 5 | export const calendarDayHeader: string; 6 | export const calendarDate: string; 7 | export const calendarDateMo: string; 8 | export const calendarDateWk: string; 9 | export const calendarEntries: string; 10 | export const calendarEntry: string; 11 | export const calendarEntryTime: string; 12 | export const calendarEntryDesc: string; 13 | export const medium: string; 14 | export const large: string; 15 | export const calendarTime: string; 16 | export const calendar: string; 17 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/card.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const text: string; 3 | export const big: string; 4 | export const badge: string; 5 | export const badgeLeft: string; 6 | export const medium: string; 7 | export const figureHolder: string; 8 | export const small: string; 9 | export const figure: string; 10 | export const title: string; 11 | export const bodyHolder: string; 12 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/columns.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: grid; 3 | position: relative; 4 | overflow: hidden; 5 | & > div { 6 | margin-bottom: 10px; 7 | } 8 | } 9 | 10 | .small { 11 | grid-template-columns: 1fr; 12 | 13 | & .badge { 14 | background: #33b2cc; 15 | } 16 | } 17 | 18 | .big { 19 | grid-template-columns: 1fr 1fr; 20 | 21 | & .badge { 22 | background: #40bf80; 23 | } 24 | } 25 | 26 | .badge { 27 | composes: badge from "./common.m.css"; 28 | } 29 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/columns.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const small: string; 3 | export const badge: string; 4 | export const big: string; 5 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/common.m.css: -------------------------------------------------------------------------------- 1 | .badge { 2 | color: #fff; 3 | background: #fff; 4 | font-size: 0.8em; 5 | font-weight: 700; 6 | letter-spacing: 0.1em; 7 | position: absolute; 8 | right: -3.1em; 9 | text-align: center; 10 | top: -1.2em; 11 | transform: rotate(45deg); 12 | transform-origin: 0 0; 13 | width: 6em; 14 | z-index: 10; 15 | transition: all 0.5s ease-in; 16 | } 17 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/common.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const badge: string; 2 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/resizableSection.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | border: 1px solid rgba(0, 0, 0, 0.075); 3 | overflow-y: auto; 4 | transition: width 0.3s ease-in-out; 5 | padding: 10px; 6 | } 7 | 8 | .sizeControls { 9 | margin-bottom: 10px; 10 | } 11 | 12 | .zeroColumns { 13 | width: 0; 14 | border: none; 15 | padding: 0; 16 | } 17 | 18 | .oneColumn { 19 | width: 12.5%; 20 | } 21 | 22 | .twoColumns { 23 | width: 25%; 24 | } 25 | 26 | .threeColumns { 27 | width: 37.5%; 28 | } 29 | 30 | .fourColumns { 31 | width: 50%; 32 | } 33 | 34 | .fiveColumns { 35 | width: 62.5%; 36 | } 37 | 38 | .sixColumns { 39 | width: 75%; 40 | } 41 | 42 | .sevenColumns { 43 | width: 87.5%; 44 | } 45 | 46 | .eightColumns { 47 | width: 100%; 48 | transition: none; 49 | } 50 | -------------------------------------------------------------------------------- /packages/resize-observer/src/widgets/styles/resizableSection.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const sizeControls: string; 3 | export const zeroColumns: string; 4 | export const oneColumn: string; 5 | export const twoColumns: string; 6 | export const threeColumns: string; 7 | export const fourColumns: string; 8 | export const fiveColumns: string; 9 | export const sixColumns: string; 10 | export const sevenColumns: string; 11 | export const eightColumns: string; 12 | -------------------------------------------------------------------------------- /packages/resize-observer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/skills-matrix/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": {}, 3 | "create-app": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/skills-matrix/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/skills-matrix/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/skills-matrix/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | _build/ 3 | output/ 4 | .cert/ 5 | 6 | .vercel 7 | -------------------------------------------------------------------------------- /packages/skills-matrix/README.md: -------------------------------------------------------------------------------- 1 | The Skills Matrix is a static application that provides engineers the ability to choose technical proficiency for a set of predetermined skills. Results are uniquely hashed in-browser, and managers can visually compare multiple result sets filtered by specific skills. 2 | 3 | ## Usage 4 | 5 | TODO 6 | 7 | ## Notes 8 | 9 | The compact hash computed for each skill set is dependent on a static master list of skills. Any changes to 10 | `skillmatrix.json` invalidates existing hashes. 11 | 12 | ## Development 13 | 14 | ``` 15 | # npm i # Install dependencies 16 | # npm run dev # Visit http://localhost:9999/ 17 | # npm run test # Run unit tests 18 | ``` 19 | 20 | To get help for the commands above or to see all available commands, run `dojo` from the command line. 21 | -------------------------------------------------------------------------------- /packages/skills-matrix/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "skills-matrix", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "dojo build --mode dev --watch --serve", 6 | "build": "dojo build --mode dist", 7 | "build:dev": "dojo build --mode dev", 8 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 9 | "package": "shx cp -r output/dist/ ../../output/dist/skills-matrix/", 10 | "test": "dojo test", 11 | "test:unit": "dojo build --mode unit && dojo test --unit --config local", 12 | "test:functional": "dojo build --mode functional && dojo test --functional --config local", 13 | "test:all": "dojo build --mode unit && dojo build --mode functional && dojo test --all --config local" 14 | }, 15 | "dependencies": { 16 | "@dojo/framework": "~8.0.0", 17 | "@dojo/widgets": "~8.0.0", 18 | "tslib": "~1.9.3" 19 | }, 20 | "devDependencies": { 21 | "@dojo/cli": "~8.0.0", 22 | "@dojo/cli-build-app": "~8.0.1", 23 | "@dojo/cli-test-intern": "~8.0.0", 24 | "@types/node": "^14.0.13", 25 | "atob": "^2.1.2", 26 | "btoa": "^1.2.1", 27 | "node-webcrypto-ossl": "^2.0.1", 28 | "typescript": "^3.8" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/App.m.css: -------------------------------------------------------------------------------- 1 | @import './variables.css'; 2 | 3 | .container { 4 | align-content: center; 5 | display: flex; 6 | justify-content: center; 7 | } 8 | 9 | .content { 10 | max-width: 100vw; 11 | padding: 0 var(--content-gutter); 12 | width: var(--content-width); 13 | } 14 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/App.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const container: string; 2 | export const content: string; 3 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/__tests__/polyfills.spec.ts: -------------------------------------------------------------------------------- 1 | if (require && global) { 2 | type ModifiableWindow = { -readonly [K in keyof Window]: Window[K] } & typeof globalThis; 3 | const g: ModifiableWindow = global as any; 4 | const w: ModifiableWindow = window; 5 | 6 | if (!g.btoa) { 7 | g.btoa = w.btoa = require('btoa'); 8 | } 9 | if (!g.atob) { 10 | g.atob = w.atob = require('atob'); 11 | } 12 | if (!g.TextEncoder) { 13 | g.TextEncoder = w.TextEncoder = require('util').TextEncoder; 14 | } 15 | if (!g.crypto) { 16 | g.crypto = w.crypto = new (require('node-webcrypto-ossl').Crypto)(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/fonts.css: -------------------------------------------------------------------------------- 1 | /* 2 | * font-family: Montserrat; 3 | * font-style: normal, italic; 4 | * font-weight: 400, 700; 5 | */ 6 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap'); 7 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SitePen: Skills Matrix 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface State { 2 | matrix: SkillMatrix; 3 | matrixVersion: string; 4 | matrixHistory: { 5 | [version: string]: SkillMatrix; 6 | }; 7 | skills: { 8 | assessment?: Assessment; 9 | hash?: string; 10 | newSkills?: CachedSkill[]; 11 | }; 12 | compare: { 13 | assessments: Assessment[]; 14 | filters?: SkillName[]; 15 | outdatedHashes?: string[]; 16 | }; 17 | } 18 | 19 | export const enum Level { 20 | None = 0, 21 | Basic = 1, 22 | Proficient = 2, 23 | Expert = 3 24 | } 25 | 26 | export type SkillName = string; 27 | 28 | export type SkillHash = string; 29 | 30 | export type CachedSkill = { 31 | skill: string; 32 | category: string; 33 | }; 34 | 35 | export interface SkillMatrix { 36 | [group: string]: SkillName[]; 37 | } 38 | 39 | export interface Assessment { 40 | hash: string; 41 | name?: string; 42 | skills: AssessmentMatrix; 43 | } 44 | 45 | export type AssessmentMatrix = { 46 | [group: string]: AssessmentGroup; 47 | }; 48 | 49 | export type AssessmentGroup = { 50 | [skill: string]: Level; 51 | }; 52 | 53 | export type SkillAssessment = { 54 | skill: string; 55 | level: Level; 56 | }; 57 | 58 | export interface AssessmentEntry { 59 | active: boolean; 60 | assessment: Assessment; 61 | } 62 | 63 | export interface AssessmentMap { 64 | [hash: string]: boolean; 65 | } 66 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/main.css: -------------------------------------------------------------------------------- 1 | @import './fonts.css'; 2 | 3 | body { 4 | box-sizing: border-box; 5 | font-family: 'Montserrat', sans-serif; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | } 13 | 14 | h1 { 15 | align-items: center; 16 | color: var(--color-blue); 17 | display: flex; 18 | font-size: var(--font-size-normal); 19 | font-weight: 900; 20 | margin: 0; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/main.ts: -------------------------------------------------------------------------------- 1 | import Registry from '@dojo/framework/core/Registry'; 2 | import renderer, { w } from '@dojo/framework/core/vdom'; 3 | import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector'; 4 | 5 | import App from './App'; 6 | import routes from './routes'; 7 | 8 | const registry = new Registry(); 9 | registerRouterInjector(routes, registry); 10 | 11 | const r = renderer(() => w(App, {})); 12 | r.mount({ registry }); 13 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/middleware/router.ts: -------------------------------------------------------------------------------- 1 | import injector from '@dojo/framework/core/middleware/injector'; 2 | import { create } from '@dojo/framework/core/vdom'; 3 | import Router from '@dojo/framework/routing/Router'; 4 | import { Params } from '@dojo/framework/routing/interfaces'; 5 | 6 | const factory = create({ injector }); 7 | 8 | const routerAccess = factory(function ({ middleware: { injector } }) { 9 | return (routerKey: string = 'router') => { 10 | const router = injector.get('router'); 11 | 12 | if (!router) { 13 | throw new Error(`router not found with key ${routerKey}`); 14 | } 15 | 16 | return { 17 | router, 18 | go(to: string, params: Params) { 19 | const href = router.link(to, params); 20 | if (href) { 21 | router.setPath(href); 22 | return true; 23 | } 24 | return false; 25 | } 26 | }; 27 | }; 28 | }); 29 | 30 | export default routerAccess; 31 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/routes.ts: -------------------------------------------------------------------------------- 1 | import { RouteConfig } from '@dojo/framework/routing/interfaces'; 2 | 3 | export const enum RouteName { 4 | Compare = 'compare', 5 | MultiCompare = 'multiCompare', 6 | EditSkills = 'editSkills', 7 | Home = 'home', 8 | Skills = 'skills' 9 | } 10 | 11 | export const enum OutletName { 12 | Main = 'main' 13 | } 14 | 15 | const routes: RouteConfig[] = [ 16 | { 17 | path: '/', 18 | id: RouteName.Home, 19 | outlet: OutletName.Main, 20 | defaultRoute: true 21 | }, 22 | { 23 | path: 'skills', 24 | id: RouteName.Skills, 25 | outlet: OutletName.Main, 26 | children: [ 27 | { 28 | path: '{hash}', 29 | id: RouteName.EditSkills, 30 | outlet: OutletName.Main 31 | } 32 | ] 33 | }, 34 | { 35 | path: 'compare', 36 | id: RouteName.Compare, 37 | outlet: OutletName.Main, 38 | children: [ 39 | { 40 | path: '{hashList}', 41 | id: RouteName.MultiCompare, 42 | outlet: OutletName.Main 43 | } 44 | ] 45 | } 46 | ]; 47 | 48 | export default routes; 49 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix.ts: -------------------------------------------------------------------------------- 1 | import * as button from './matrix/button.m.css'; 2 | import * as checkbox from './matrix/checkbox.m.css'; 3 | import * as chip from './matrix/chip.m.css'; 4 | import * as chipTypeahead from './matrix/chip-typeahead.m.css'; 5 | import * as header from './matrix/header.m.css'; 6 | import * as label from './matrix/label.m.css'; 7 | import * as listItem from './matrix/list-item.m.css'; 8 | import * as textArea from './matrix/text-area.m.css'; 9 | import * as textInput from './matrix/text-input.m.css'; 10 | import * as typeahead from './matrix/typeahead.m.css'; 11 | 12 | export default { 13 | '@dojo/widgets/button': button, 14 | '@dojo/widgets/checkbox': checkbox, 15 | '@dojo/widgets/chip': chip, 16 | '@dojo/widgets/chip-typeahead': chipTypeahead, 17 | '@dojo/widgets/header': header, 18 | '@dojo/widgets/label': label, 19 | '@dojo/widgets/list-item': listItem, 20 | '@dojo/widgets/text-area': textArea, 21 | '@dojo/widgets/text-input': textInput, 22 | '@dojo/widgets/typeahead': typeahead 23 | }; 24 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/button.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | cursor: pointer; 3 | display: inline-block; 4 | background-color: var(--color-blue); 5 | border-radius: calc(var(--grid-size) / 4); 6 | border: 1px solid var(--color-blue); 7 | color: var(--color-white); 8 | font-family: inherit; 9 | font-size: var(--font-size-normal); 10 | font-weight: bold; 11 | height: var(--button-height); 12 | min-width: 132px; 13 | outline: none; 14 | padding: 0; 15 | width: calc(var(--grid-size) * 5); 16 | } 17 | 18 | .disabled, 19 | .disabled:hover { 20 | background-color: var(--color-gray); 21 | border-color: var(--color-gray); 22 | cursor: default; 23 | opacity: 0.25; 24 | } 25 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/button.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const disabled: string; 3 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/checkbox.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | align-items: center; 3 | display: flex; 4 | flex-grow: 1; 5 | } 6 | 7 | .inputWrapper { 8 | margin-right: var(--grid-size); 9 | } 10 | 11 | .input { 12 | margin-left: 0; 13 | } 14 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/checkbox.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const inputWrapper: string; 3 | export const input: string; 4 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/chip-typeahead.m.css: -------------------------------------------------------------------------------- 1 | .inputWrapper { 2 | flex-wrap: wrap; 3 | } 4 | 5 | .item { 6 | overflow: hidden; 7 | text-overflow: ellipsis; 8 | white-space: nowrap; 9 | width: 100%; 10 | } 11 | 12 | .values { 13 | margin-top: var(--grid-size); 14 | } 15 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/chip-typeahead.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const inputWrapper: string; 2 | export const item: string; 3 | export const values: string; 4 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/chip.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | align-items: center; 3 | border-radius: calc(var(--grid-size) * 0.75); 4 | border: 1px solid var(--color-light-gray); 5 | color: var(--color-dark-gray); 6 | display: inline-flex; 7 | font-size: var(--font-size-normal); 8 | margin-bottom: var(--grid-size); 9 | margin-right: var(--grid-size); 10 | padding: var(--grid-size) calc(var(--grid-size) * 1.25); 11 | } 12 | 13 | .iconWrapper { 14 | height: calc(var(--grid-size) * 2); 15 | margin-right: var(--grid-size); 16 | } 17 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/chip.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const iconWrapper: string; 3 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/header.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | align-items: center; 3 | display: flex; 4 | background: var(--color-blue); 5 | color: var(--color-white); 6 | font-size: var(--font-size-large); 7 | height: var(--header-height); 8 | max-width: 100vw; 9 | padding: 0 var(--content-gutter); 10 | width: var(--content-width); 11 | } 12 | 13 | .row { 14 | display: flex; 15 | flex: 1; 16 | } 17 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/header.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const row: string; 3 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/label.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | color: var(--color-blue); 3 | font-size: var(--font-size-normal); 4 | font-style: italic; 5 | margin-bottom: calc(var(--grid-size) / 2); 6 | } 7 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/label.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/list-item.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | background: white; 3 | border: 1px solid transparent; 4 | cursor: pointer; 5 | height: 45px; 6 | padding: 11px 10px 10px 10px; 7 | } 8 | 9 | .selected { 10 | background: white; 11 | color: var(--color-gray); 12 | cursor: default; 13 | } 14 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/list-item.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const selected: string; 3 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/text-area.m.css: -------------------------------------------------------------------------------- 1 | .input { 2 | border-radius: var(--input-border-radius); 3 | border: 1px solid var(--color-light-gray); 4 | color: var(--color-gray); 5 | font-family: inherit; 6 | font-size: var(--font-size-normal); 7 | height: calc(14.5 * var(--grid-size)); 8 | margin-bottom: calc(var(--grid-size) * 2); 9 | max-width: var(--input-width); 10 | outline: none; 11 | padding: calc(var(--grid-size) * 1.25); 12 | width: 100%; 13 | } 14 | 15 | .inputWrapper { 16 | font-size: 0; 17 | } 18 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/text-area.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const input: string; 2 | export const inputWrapper: string; 3 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/text-input.m.css: -------------------------------------------------------------------------------- 1 | .input { 2 | border-bottom-left-radius: var(--input-border-radius); 3 | border-top-left-radius: var(--input-border-radius); 4 | border: 1px solid var(--color-light-gray); 5 | color: var(--color-gray); 6 | font-family: inherit; 7 | font-size: var(--font-size-normal); 8 | height: var(--input-height); 9 | outline: none; 10 | padding: 0 calc(var(--grid-size) * 1.25); 11 | width: 100%; 12 | } 13 | 14 | .input:last-child { 15 | border-bottom-right-radius: var(--input-border-radius); 16 | border-top-right-radius: var(--input-border-radius); 17 | } 18 | 19 | .wrapper { 20 | align-items: stretch; 21 | display: flex; 22 | flex-direction: column; 23 | max-width: var(--input-width); 24 | } 25 | 26 | .inputWrapper { 27 | display: flex; 28 | flex-direction: row; 29 | } 30 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/text-input.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const input: string; 2 | export const wrapper: string; 3 | export const inputWrapper: string; 4 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/typeahead.m.css: -------------------------------------------------------------------------------- 1 | /* TODO: this does not have any effect */ 2 | /* It would be preferable to move the typeahead-specific styles from list-item.m.css to here */ 3 | .menuItemRoot { 4 | background: pink !important; 5 | border: 2px solid purple !important; 6 | color: red; 7 | padding-top: 11px; 8 | } 9 | 10 | .menuRoot { 11 | border: 1px solid var(--color-light-gray); 12 | border-top-width: 0; 13 | } 14 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/themes/matrix/typeahead.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const menuItemRoot: string; 2 | export const menuRoot: string; 3 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/util/clipboard.ts: -------------------------------------------------------------------------------- 1 | import { RouteName } from '../routes'; 2 | 3 | export async function copyToClipboard(text: string) { 4 | try { 5 | if (navigator.clipboard) { 6 | await copyWithClipboardApi(text); 7 | return true; 8 | } 9 | } catch (e) { 10 | console.log(`Failed to copy ${e}`); 11 | } 12 | try { 13 | return copyWithExecCommand(text); 14 | } catch (e) { 15 | console.log(`failed to copy using fallback`); 16 | } 17 | return false; 18 | } 19 | 20 | function copyWithClipboardApi(text: string) { 21 | return navigator.clipboard.writeText(text); 22 | } 23 | 24 | function copyWithExecCommand(text: string) { 25 | const result = document.execCommand('copy'); 26 | if (!result) { 27 | console.log('Failed to copy using fallback'); 28 | } 29 | } 30 | 31 | export function buildCopyUrl(hashList: string[]) { 32 | const separator = window.location.pathname.endsWith('/') ? '' : '/'; 33 | if (hashList.length === 1) { 34 | return `${window.location.origin + window.location.pathname}${separator}#${RouteName.Skills}/${hashList[0]}`; 35 | } 36 | return `${window.location.origin + window.location.pathname}${separator}#${RouteName.Compare}/${hashList.join(',')}`; 37 | } 38 | 39 | export function cleanCopyUrl(url: string) { 40 | return url.replace(/^.*(#(skills)|(compare))\//, ''); 41 | } 42 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/util/crypto.spec.ts: -------------------------------------------------------------------------------- 1 | import { assert } from 'chai'; 2 | import { describe, it } from 'intern/lib/interfaces/bdd'; 3 | 4 | import { Level } from '../interfaces'; 5 | import { base64DecodeBuffer, base64EncodeBuffer, decodeLevels, encodeLevels } from './crypto'; 6 | 7 | describe('crypto', () => { 8 | it('encodes and decodes a list of levels', () => { 9 | const levels: Level[] = [0, 1, 2, 3, 2, 1, 0]; 10 | 11 | const buffer = encodeLevels(levels); 12 | const actual = Array.from(decodeLevels(buffer)); 13 | const expected = [...levels, 0]; 14 | 15 | assert.deepEqual(actual, expected); 16 | }); 17 | 18 | it('encodes and decodes a buffer to base64', () => { 19 | const buffer = new Uint8Array([27, 144]); 20 | const base64 = base64EncodeBuffer(buffer); 21 | const actual = base64DecodeBuffer(base64); 22 | 23 | assert.deepEqual(actual, buffer); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/util/persistence.ts: -------------------------------------------------------------------------------- 1 | const PERSISTENCE_KEY = 'dojo-skills-matrix'; 2 | const PERSISTENCE_COMPARE_KEY = `${PERSISTENCE_KEY}-compare`; 3 | 4 | export function persistComparison(value: string): void { 5 | window.localStorage.setItem(PERSISTENCE_COMPARE_KEY, value); 6 | 7 | } 8 | export function persistHash(value: string): void { 9 | window.localStorage.setItem(PERSISTENCE_KEY, value); 10 | } 11 | 12 | export function resumeComparison(): string | undefined { 13 | return window.localStorage.getItem(PERSISTENCE_COMPARE_KEY) || undefined; 14 | } 15 | 16 | export function resumeHash(): string | undefined { 17 | return window.localStorage.getItem(PERSISTENCE_KEY) || undefined; 18 | } 19 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Typography */ 3 | --font-size-large: 18px; 4 | --font-size-medium: 16px; 5 | --font-size-normal: 14px; 6 | 7 | /* Colors */ 8 | --color-blue: #0a2944; 9 | --color-dark-gray: #252525; 10 | --color-gray: #737373; 11 | --color-green: #2ecc71; 12 | --color-light-blue: #3498db; 13 | --color-light-gray: #d7d7d7; 14 | --color-off-white: hsl(207, 8%, 74%); 15 | --color-red: #e74c3c; 16 | --color-teal: #1abc9c; 17 | --color-white: #ffffff; 18 | 19 | /* Layout */ 20 | --grid-size: 8px; 21 | 22 | --button-height: calc(var(--grid-size) * 4); 23 | --content-gutter: calc(var(--grid-size) * 4); 24 | --content-height: calc(100vh - var(--header-height)); 25 | --content-width: calc(1170px + (2 * var(--content-gutter))); 26 | --header-height: calc(var(--grid-size) * 7.5); 27 | --input-border-radius: calc(var(--grid-size) / 4); 28 | --input-height: calc(var(--grid-size) * 5); 29 | --input-width: 470px; 30 | } 31 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/assessment-list/AssessmentList.m.css: -------------------------------------------------------------------------------- 1 | @import '../../variables.css'; 2 | 3 | .root { 4 | margin-top: calc(var(--grid-size) * 3); 5 | font-size: var(--font-size-normal); 6 | } 7 | 8 | .title { 9 | margin-bottom: var(--grid-size); 10 | } 11 | 12 | .row { 13 | align-items: center; 14 | display: flex; 15 | height: calc(var(--grid-size) * 3); 16 | line-height: calc(var(--grid-size) * 3); 17 | margin-bottom: calc(var(--grid-size) * 1.5); 18 | } 19 | 20 | .close { 21 | color: var(--color-gray); 22 | cursor: pointer; 23 | } 24 | 25 | .addControls { 26 | margin-top: calc(var(--grid-size) * 3); 27 | } 28 | 29 | .add { 30 | color: var(--color-light-blue); 31 | cursor: pointer; 32 | font-weight: bold; 33 | } 34 | 35 | .deleteText { 36 | color: var(--color-red); 37 | font-weight: bold; 38 | flex: 1; 39 | } 40 | 41 | .yes { 42 | color: var(--color-gray); 43 | cursor: pointer; 44 | font-weight: bold; 45 | margin-right: calc(var(--grid-size) * 2); 46 | } 47 | 48 | .no { 49 | color: var(--color-black); 50 | cursor: pointer; 51 | font-weight: bold; 52 | } 53 | 54 | .inputButton:not([disabled]) { 55 | background-color: var(--color-green); 56 | border-color: var(--color-green); 57 | } 58 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/assessment-list/AssessmentList.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const title: string; 3 | export const row: string; 4 | export const close: string; 5 | export const addControls: string; 6 | export const add: string; 7 | export const deleteText: string; 8 | export const yes: string; 9 | export const no: string; 10 | export const inputButton: string; 11 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/assessment/Assessment.m.css: -------------------------------------------------------------------------------- 1 | @import '../../variables.css'; 2 | 3 | .root { 4 | margin-bottom: calc(var(--grid-size) * 3); 5 | } 6 | 7 | .title { 8 | margin-bottom: calc(var(--grid-size) * 1.25); 9 | } 10 | 11 | .noResults { 12 | font-style: italic; 13 | margin-bottom: var(--grid-size); 14 | } 15 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/assessment/Assessment.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const title: string; 3 | export const noResults: string; 4 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/assessment/Assessment.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import Chip from '@dojo/widgets/chip'; 3 | 4 | import { SkillAssessment } from '../../interfaces'; 5 | import { LevelIcon } from '../level-icon/LevelIcon'; 6 | import * as css from './Assessment.m.css'; 7 | 8 | export interface AssessmentProperties { 9 | title: string; 10 | skillAssessments: SkillAssessment[]; 11 | } 12 | 13 | const factory = create().properties(); 14 | 15 | const Widget = factory(function ({ properties, children }) { 16 | const { title, skillAssessments } = properties(); 17 | 18 | return ( 19 |
    20 |

    {title}

    21 |
    22 | {skillAssessments.length > 0 ? ( 23 | skillAssessments.map(({ skill, level }) => ( 24 | 25 | {{ 26 | label: skill, 27 | icon: () => 28 | }} 29 | 30 | )) 31 | ) : ( 32 |
    No matching skills found
    33 | )} 34 | {children()} 35 |
    36 |
    37 | ); 38 | }); 39 | 40 | export { Widget as Assessment }; 41 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/compare/Compare.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const column: string; 3 | export const editLink: string; 4 | export const linkText: string; 5 | export const showToggle: string; 6 | export const successButton: string; 7 | export const hashInput: string; 8 | export const dialogTitle: string; 9 | export const dialogContent: string; 10 | export const dialogActions: string; 11 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/group-assessment/GroupAssessment.m.css: -------------------------------------------------------------------------------- 1 | @import '../../variables.css'; 2 | 3 | .root { 4 | margin-bottom: calc(var(--grid-size) * 6); 5 | } 6 | 7 | .title { 8 | margin-bottom: calc(var(--grid-size) * 2.25); 9 | } 10 | 11 | .row { 12 | align-items: center; 13 | cursor: pointer; 14 | display: flex; 15 | margin-bottom: calc(var(--grid-size) * 2); 16 | user-select: none; 17 | } 18 | 19 | .name { 20 | color: var(--color-gray); 21 | margin-left: calc(var(--grid-size) * 3); 22 | position: relative; 23 | top: calc(var(--grid-size) / -4); 24 | } 25 | 26 | .isNew { 27 | color: var(--color-black); 28 | font-weight: bold; 29 | } 30 | 31 | .isNew .name:after { 32 | content: '(new!)'; 33 | display: inline-block; 34 | margin-left: calc(var(--grid-size) / 2); 35 | font-weight: normal; 36 | font-style: italic; 37 | color: var(--color-green); 38 | } 39 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/group-assessment/GroupAssessment.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const title: string; 3 | export const row: string; 4 | export const name: string; 5 | export const isNew: string; 6 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/header/Header.m.css: -------------------------------------------------------------------------------- 1 | @import '../../variables.css'; 2 | 3 | .root { 4 | align-items: center; 5 | background: var(--color-blue); 6 | display: flex; 7 | justify-content: center; 8 | } 9 | 10 | .arrow { 11 | margin-right: calc(var(--grid-size) * 2); 12 | } 13 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/header/Header.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const arrow: string; 3 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/header/Header.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import Link from '@dojo/framework/routing/Link'; 3 | import Route from '@dojo/framework/routing/Route'; 4 | import Header from '@dojo/widgets/header'; 5 | 6 | import { RouteName } from '../../routes'; 7 | import { Icon } from '../icon/Icon'; 8 | import * as css from './Header.m.css'; 9 | 10 | const factory = create(); 11 | 12 | export default factory(function () { 13 | const backArrow = () => ( 14 | 15 | 16 | 17 | ); 18 | 19 | const leading = ( 20 |
    21 | 22 | 23 |
    24 | ); 25 | 26 | return ( 27 |
    28 |
    29 | {{ 30 | title: 'Skill Tracker', 31 | leading 32 | }} 33 |
    34 |
    35 | ); 36 | }); 37 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/home/Home.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const column: string; 3 | export const heading: string; 4 | export const icon: string; 5 | export const label: string; 6 | export const textInput: string; 7 | export const divider: string; 8 | export const dividerLine: string; 9 | export const dividerBadge: string; 10 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/skill-key/SkillKey.m.css: -------------------------------------------------------------------------------- 1 | @import '../../variables.css'; 2 | 3 | .title { 4 | margin-bottom: calc(var(--grid-size) * 2); 5 | } 6 | 7 | .level { 8 | align-items: center; 9 | display: flex; 10 | margin-right: calc(var(--grid-size) * 1.5); 11 | } 12 | 13 | .entry { 14 | font-size: var(--font-size-normal); 15 | margin-left: var(--grid-size); 16 | position: relative; 17 | top: calc(var(--grid-size) / -4); 18 | } 19 | 20 | .level1 { 21 | color: var(--color-gray); 22 | } 23 | 24 | .level2 { 25 | color: var(--color-teal); 26 | } 27 | 28 | .level3 { 29 | color: var(--color-green); 30 | } 31 | 32 | .level4 { 33 | color: var(--color-light-blue); 34 | } 35 | 36 | .skillRow { 37 | display: flex; 38 | } 39 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/skill-key/SkillKey.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const title: string; 2 | export const level: string; 3 | export const entry: string; 4 | export const level1: string; 5 | export const level2: string; 6 | export const level3: string; 7 | export const level4: string; 8 | export const skillRow: string; 9 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/skill-key/SkillKey.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | 3 | import { Level } from '../../interfaces'; 4 | import { LevelIcon } from '../level-icon/LevelIcon'; 5 | import * as css from './SkillKey.m.css'; 6 | 7 | const factory = create(); 8 | 9 | export const SkillKey = factory(function () { 10 | return ( 11 |
    12 |

    Key

    13 |
    14 |
    15 | 16 | Basic 17 |
    18 |
    19 | 20 | Proficient 21 |
    22 |
    23 | 24 | Expert 25 |
    26 |
    27 |
    28 | ); 29 | }); 30 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/skills/Skills.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const copyButton: string; 3 | export const successButton: string; 4 | export const success: string; 5 | export const successVisible: string; 6 | export const hashInput: string; 7 | export const column: string; 8 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/skillset-filter/SkillsetFilter.m.css: -------------------------------------------------------------------------------- 1 | @import '../../variables.css'; 2 | 3 | .title { 4 | background: var(--color-blue); 5 | border-top-left-radius: calc(var(--grid-size) * 0.75); 6 | border-top-right-radius: calc(var(--grid-size) * 0.75); 7 | border: 1px solid var(--color-blue); 8 | color: var(--color-white); 9 | font-size: var(--font-size-medium); 10 | padding: calc(var(--grid-size) * 2); 11 | } 12 | 13 | .controls { 14 | border-bottom-left-radius: calc(var(--grid-size) * 0.75); 15 | border-bottom-right-radius: calc(var(--grid-size) * 0.75); 16 | border: 1px solid var(--color-light-gray); 17 | padding: calc(var(--grid-size) * 3); 18 | } 19 | 20 | .input { 21 | border-radius: var(--input-border-radius); 22 | border: 1px solid var(--color-light-gray); 23 | color: var(--color-gray); 24 | font-family: inherit; 25 | font-size: var(--font-size-normal); 26 | height: var(--input-height); 27 | outline: none; 28 | padding: 0 calc(var(--grid-size) * 1.25); 29 | width: 100%; 30 | } 31 | 32 | .items { 33 | margin-top: calc(var(--grid-size) * 2); 34 | } 35 | 36 | .menu { 37 | border: 1px solid var(--color-light-gray); 38 | } 39 | 40 | .typeaheadChip { 41 | margin-left: calc(0.5 * var(--grid-size)); 42 | } 43 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/skillset-filter/SkillsetFilter.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const title: string; 2 | export const controls: string; 3 | export const input: string; 4 | export const items: string; 5 | export const menu: string; 6 | export const typeaheadChip: string; 7 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/styles/button.m.css: -------------------------------------------------------------------------------- 1 | .trailing { 2 | border-bottom-left-radius: 0; 3 | border-top-left-radius: 0; 4 | height: var(--input-height); 5 | min-width: auto; 6 | padding: 10px; 7 | } 8 | -------------------------------------------------------------------------------- /packages/skills-matrix/src/widgets/styles/button.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const trailing: string; 2 | -------------------------------------------------------------------------------- /packages/skills-matrix/tests/functional/all.ts: -------------------------------------------------------------------------------- 1 | import './main'; 2 | -------------------------------------------------------------------------------- /packages/skills-matrix/tests/functional/main.ts: -------------------------------------------------------------------------------- 1 | /* Write your app tests here */ 2 | -------------------------------------------------------------------------------- /packages/skills-matrix/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "downlevelIteration": true, 5 | "experimentalDecorators": true, 6 | "importHelpers": true, 7 | "jsx": "react", 8 | "jsxFactory": "tsx", 9 | "lib": ["dom", "es5", "es2015.promise", "es2015.iterable", "es2015.symbol", "es2015.symbol.wellknown"], 10 | "module": "umd", 11 | "moduleResolution": "node", 12 | "noUnusedLocals": true, 13 | "outDir": "_build/", 14 | "removeComments": false, 15 | "sourceMap": true, 16 | "strict": true, 17 | "target": "es5", 18 | "types": ["intern"] 19 | }, 20 | "include": ["./src/**/*.ts", "./tests/**/*.ts", "src/App.tsx"] 21 | } 22 | -------------------------------------------------------------------------------- /packages/static-blog/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "build-time-render": { 4 | "static": true, 5 | "root": "app", 6 | "renderer": "jsdom" 7 | }, 8 | "pwa": { 9 | "manifest": { 10 | "name": "dojo-blog", 11 | "short_name": "dojo-blog", 12 | "description": "dojo-blog", 13 | "background_color": "#ffffff", 14 | "theme_color": "#222127", 15 | "icons": [ 16 | { 17 | "src": "src/logo.png", 18 | "sizes": [ 19 | 128, 20 | 256, 21 | 512 22 | ] 23 | } 24 | ] 25 | }, 26 | "serviceWorker": { 27 | "clientsClaim": true, 28 | "routes": [ 29 | { 30 | "urlPattern": ".*", 31 | "strategy": "networkFirst", 32 | "expiration": { 33 | "maxEntries": 25 34 | } 35 | } 36 | ] 37 | } 38 | } 39 | }, 40 | "test-intern": {}, 41 | "create-app": {} 42 | } 43 | -------------------------------------------------------------------------------- /packages/static-blog/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/static-blog/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/static-blog/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [{package.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/static-blog/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/static-blog/.gitignore: -------------------------------------------------------------------------------- 1 | assets 2 | *.js 3 | *.js.map 4 | !/*.js 5 | !/tasks/*.js 6 | /_build 7 | /bower_components 8 | /dist 9 | /example 10 | /html-report 11 | /output 12 | /temp-example 13 | /node_modules 14 | /typings 15 | .baseDir.ts 16 | .tscache 17 | .tsconfig*.json 18 | coverage-unmapped.json 19 | npm-debug.log 20 | -------------------------------------------------------------------------------- /packages/static-blog/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import Route from '@dojo/framework/routing/Route'; 3 | import Header from './Header'; 4 | import BlogList from './BlogList'; 5 | import Blog from './Blog'; 6 | 7 | const factory = create(); 8 | 9 | export default factory(function App() { 10 | return ( 11 |
    12 |
    13 | } /> 14 | } /> 15 |
    16 | ); 17 | }); 18 | -------------------------------------------------------------------------------- /packages/static-blog/src/Blog.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const header: string; 2 | export const container: string; 3 | export const date: string; 4 | export const title: string; 5 | export const titleLabel: string; 6 | export const description: string; 7 | export const author: string; 8 | export const blog: string; 9 | -------------------------------------------------------------------------------- /packages/static-blog/src/Blog.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import block from '@dojo/framework/core/middleware/block'; 3 | import getBlog from './blocks/blog.block'; 4 | 5 | import * as css from './Blog.m.css'; 6 | 7 | interface BlogProperties { 8 | name: string; 9 | } 10 | 11 | const factory = create({ block }).properties(); 12 | 13 | export default factory(function BlogList({ middleware: { block }, properties }) { 14 | const { name } = properties(); 15 | const blog = block(getBlog)({ path: `${name}.md` }); 16 | 17 | if (!blog) { 18 | return null; 19 | } 20 | 21 | return ( 22 |
    23 |
    24 |
    25 | 28 |

    29 | {blog.meta.title} 30 |

    31 |

    {blog.meta.description}

    32 |
    {`By ${blog.meta.author}`}
    33 |
    34 |
    35 |
    {blog.content}
    36 |
    37 | ); 38 | }); 39 | -------------------------------------------------------------------------------- /packages/static-blog/src/BlogList.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | max-width: 48rem; 3 | margin-right: auto; 4 | margin-left: auto; 5 | font-family: "avenir next", avenir, sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /packages/static-blog/src/BlogList.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | -------------------------------------------------------------------------------- /packages/static-blog/src/BlogList.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import block from '@dojo/framework/core/middleware/block'; 3 | import getBlogIndex from './blocks/blog-index.block'; 4 | import BlogPreview from './BlogPreview'; 5 | import * as css from './BlogList.m.css'; 6 | 7 | const factory = create({ block }); 8 | 9 | export default factory(function BlogList({ middleware: { block } }) { 10 | const previews = block(getBlogIndex)() || []; 11 | return ( 12 |
    13 | {previews.map((preview, index) => ( 14 | 15 | ))} 16 |
    17 | ); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/static-blog/src/BlogPreview.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const link: string; 3 | export const container: string; 4 | export const imageWrapper: string; 5 | export const image: string; 6 | export const textWrapper: string; 7 | export const title: string; 8 | export const snippet: string; 9 | export const author: string; 10 | -------------------------------------------------------------------------------- /packages/static-blog/src/BlogPreview.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import intersection from '@dojo/framework/core/middleware/intersection'; 3 | import Link from '@dojo/framework/routing/Link'; 4 | 5 | import * as css from './BlogPreview.m.css'; 6 | 7 | interface BlogPreviewProperties { 8 | author: string; 9 | title: string; 10 | description: string; 11 | image: string; 12 | file: string; 13 | } 14 | 15 | const factory = create({ intersection }).properties(); 16 | 17 | export default factory(function BlogPreview({ middleware: { intersection }, properties }) { 18 | const { isIntersecting } = intersection.get('root'); 19 | const { image, file, title, description, author } = properties(); 20 | let url = ''; 21 | if (isIntersecting) { 22 | url = image; 23 | } 24 | return ( 25 |
    26 | 27 |
    28 |
    29 | {title} 30 |
    31 |
    32 |

    {title}

    33 |

    {description}

    34 |

    {`By ${author}`}

    35 |
    36 |
    37 | 38 |
    39 | ); 40 | }); 41 | -------------------------------------------------------------------------------- /packages/static-blog/src/Header.m.css: -------------------------------------------------------------------------------- 1 | .root { 2 | padding: 1rem; 3 | } 4 | 5 | .link { 6 | color: #000; 7 | display: inline-block; 8 | font-weight: bold; 9 | text-decoration: none; 10 | transition: color 0.15s ease-in; 11 | opacity: 1; 12 | transition: opacity 0.15s ease-in; 13 | font-size: 3rem; 14 | text-align: center; 15 | display: block; 16 | } 17 | 18 | .link:hover, 19 | .link:focus { 20 | opacity: 0.5; 21 | transition: opacity 0.15s ease-in; 22 | } 23 | 24 | .link:active { 25 | opacity: 0.8; 26 | transition: opacity 0.15s ease-out; 27 | transition: color 0.15s ease-in; 28 | } 29 | 30 | .link:link, 31 | .link:visited { 32 | transition: color 0.15s ease-in; 33 | } 34 | 35 | .link:hover { 36 | transition: color 0.15s ease-in; 37 | } 38 | 39 | .link:focus { 40 | transition: color 0.15s ease-in; 41 | outline: 1px dotted currentColor; 42 | } 43 | 44 | @media screen and (min-width: 30em) { 45 | .root { 46 | padding: 2rem; 47 | } 48 | 49 | .link { 50 | font-size: 2rem; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /packages/static-blog/src/Header.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const root: string; 2 | export const link: string; 3 | -------------------------------------------------------------------------------- /packages/static-blog/src/Header.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import Link from '@dojo/framework/routing/Link'; 3 | 4 | import * as css from './Header.m.css'; 5 | 6 | interface HeaderProperties { 7 | title: string; 8 | } 9 | 10 | const factory = create().properties(); 11 | 12 | export default factory(function Header({ properties }) { 13 | const { title } = properties(); 14 | return ( 15 | 20 | ); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/static-blog/src/blocks/blog-index.block.ts: -------------------------------------------------------------------------------- 1 | import { join, parse } from 'path'; 2 | import { readFileSync } from 'fs'; 3 | import * as glob from 'glob'; 4 | const unified = require('unified'); 5 | const markdown = require('remark-parse'); 6 | const frontmatter = require('remark-frontmatter'); 7 | const parseFrontmatter = require('remark-parse-yaml'); 8 | 9 | function getMetaData(content: string) { 10 | const pipeline = unified().use(markdown, { commonmark: true }).use(frontmatter, 'yaml').use(parseFrontmatter); 11 | 12 | const nodes = pipeline.parse(content); 13 | const result = pipeline.runSync(nodes); 14 | const node = result.children.find((child: any) => Boolean(child.type === 'yaml')); 15 | return node ? node.data.parsedValue : {}; 16 | } 17 | 18 | export default async function () { 19 | const files = glob.sync(join(__dirname, '..', '..', 'content', '*.md')); 20 | const blogs: any[] = []; 21 | for (const file of files) { 22 | const content = readFileSync(file, 'utf8'); 23 | const meta = getMetaData(content); 24 | blogs.push({ 25 | sortDate: new Date(`${meta.date}`), 26 | file: parse(file).name, 27 | meta 28 | }); 29 | } 30 | 31 | return blogs.sort((a, b) => b.sortDate.getTime() - a.sortDate.getTime()); 32 | } 33 | -------------------------------------------------------------------------------- /packages/static-blog/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dojo Blocks Blog 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/static-blog/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/static-blog/src/logo.png -------------------------------------------------------------------------------- /packages/static-blog/src/main.tsx: -------------------------------------------------------------------------------- 1 | import renderer, { tsx } from '@dojo/framework/core/vdom'; 2 | import Registry from '@dojo/framework/core/Registry'; 3 | import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector'; 4 | import StateHistory from '@dojo/framework/routing/history/StateHistory'; 5 | 6 | import App from './App'; 7 | // import the route configuration 8 | import routes from './routes'; 9 | 10 | // set up an application registry and 11 | // define the Dojo Router 12 | const registry = new Registry(); 13 | registerRouterInjector(routes, registry, { HistoryManager: StateHistory }); 14 | 15 | const r = renderer(() => ); 16 | r.mount({ registry }); 17 | -------------------------------------------------------------------------------- /packages/static-blog/src/routes.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 'blog-list', 4 | path: '/', 5 | outlet: 'blog-list', 6 | defaultRoute: true 7 | }, 8 | { 9 | id: 'blog', 10 | path: 'blog/{blog}', 11 | outlet: 'blog' 12 | } 13 | ]; 14 | -------------------------------------------------------------------------------- /packages/static-blog/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [ 26 | "node" 27 | ] 28 | }, 29 | "include": [ 30 | "./src/**/*.ts", 31 | "./src/**/*.tsx" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /packages/store-arrays/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": {}, 3 | "test-intern": {} 4 | } 5 | -------------------------------------------------------------------------------- /packages/store-arrays/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/store-arrays/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/store-arrays/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [{package.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/store-arrays/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/store-arrays/.gitignore: -------------------------------------------------------------------------------- 1 | assets 2 | *.js 3 | *.js.map 4 | !/*.js 5 | !/tasks/*.js 6 | /_build 7 | /bower_components 8 | /dist 9 | /example 10 | /html-report 11 | /output 12 | /temp-example 13 | /node_modules 14 | /typings 15 | .baseDir.ts 16 | .tscache 17 | .tsconfig*.json 18 | coverage-unmapped.json 19 | npm-debug.log 20 | -------------------------------------------------------------------------------- /packages/store-arrays/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "store-arrays", 3 | "version": "1.0.0", 4 | "main": "src/main.tsx", 5 | "scripts": { 6 | "dev": "dojo build --mode dev --watch --serve", 7 | "build": "dojo build --mode dist", 8 | "build:dev": "dojo build --mode dev", 9 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 10 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 11 | "package": "shx cp -r output/dist/ ../../output/dist/store-arrays/", 12 | "test:ci": "echo no tests" 13 | }, 14 | "dependencies": { 15 | "@dojo/framework": "~8.0.0", 16 | "faker": "4.1.0", 17 | "tslib": "~1.9.3" 18 | }, 19 | "devDependencies": { 20 | "@dojo/cli": "~8.0.0", 21 | "@dojo/cli-build-app": "~8.0.1", 22 | "@types/faker": "4.1.2", 23 | "@typescript-eslint/eslint-plugin": "2.25.0", 24 | "@typescript-eslint/parser": "2.25.0", 25 | "eslint": "6.8.0", 26 | "eslint-config-prettier": "6.10.1", 27 | "eslint-plugin-import": "2.20.2", 28 | "typescript": "~3.4.5" 29 | }, 30 | "keywords": [], 31 | "description": "Demonstrates working with arrays in @dojo/stores" 32 | } 33 | -------------------------------------------------------------------------------- /packages/store-arrays/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import store from './store'; 3 | import { updateNameProcess } from './appProcesses'; 4 | 5 | const factory = create({ store }); 6 | 7 | export default factory(function App({ middleware: { store } }) { 8 | const companies = store.get(store.path('companies')) || []; 9 | return ( 10 |
    11 |
    12 | {companies.map((company) => ( 13 |
    14 |
    {company.name}
    15 |
    16 | {company.people.map((person) => ( 17 |
    18 | {person} 19 | 30 |
    31 | ))} 32 |
    33 |
    34 | ))} 35 |
    36 |
    37 | ); 38 | }); 39 | -------------------------------------------------------------------------------- /packages/store-arrays/src/data.ts: -------------------------------------------------------------------------------- 1 | import * as faker from 'faker'; 2 | 3 | export default function generateData(size: number): any { 4 | const companies = []; 5 | for (let i = 0; i < size; i++) { 6 | const people = []; 7 | for (let j = 0; j < 5; j++) { 8 | people.push(faker.name.firstName()); 9 | } 10 | companies.push({ 11 | name: faker.company.companyName(), 12 | people 13 | }); 14 | } 15 | return companies; 16 | } 17 | -------------------------------------------------------------------------------- /packages/store-arrays/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | dojo2-app 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/store-arrays/src/interfaces.ts: -------------------------------------------------------------------------------- 1 | interface Company { 2 | name: string; 3 | people: string[]; 4 | } 5 | 6 | export interface State { 7 | companies: Company[]; 8 | } 9 | -------------------------------------------------------------------------------- /packages/store-arrays/src/main.css: -------------------------------------------------------------------------------- 1 | /* Put your styles and imports here */ 2 | 3 | body { 4 | text-align: center; 5 | font-family: sans-serif; 6 | } 7 | 8 | .parent { 9 | display: flex; 10 | flex-flow: row wrap; 11 | justify-content: flex-start; 12 | } 13 | 14 | .child { 15 | padding: 5px; 16 | width: 200px; 17 | user-select: none; 18 | border: 1px black solid; 19 | margin: 5px; 20 | } 21 | 22 | .company { 23 | padding-bottom: 5px; 24 | height: 50px; 25 | } 26 | 27 | .people { 28 | display: flex; 29 | justify-content: space-between; 30 | } 31 | -------------------------------------------------------------------------------- /packages/store-arrays/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { renderer, tsx } from '@dojo/framework/core/vdom'; 2 | import App from './App'; 3 | 4 | const r = renderer(() => ); 5 | r.mount(); 6 | -------------------------------------------------------------------------------- /packages/store-arrays/src/store.ts: -------------------------------------------------------------------------------- 1 | import createStoreMiddleware from '@dojo/framework/core/middleware/store'; 2 | import { initialStateProcess } from './appProcesses'; 3 | 4 | export interface Company { 5 | name: string; 6 | people: string[]; 7 | } 8 | 9 | export interface State { 10 | companies: Company[]; 11 | } 12 | 13 | export default createStoreMiddleware((store) => { 14 | initialStateProcess(store)({}); 15 | }); 16 | -------------------------------------------------------------------------------- /packages/store-arrays/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "locale": "en", 4 | "supportedLocales": [ "en-PR" ] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/todo-mvc-kitchensink/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/.dojorc-test: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "base": "/output/dist/", 4 | "locale": "en", 5 | "supportedLocales": [ "en-PR" ], 6 | "cldrPaths": [ "cldr-data/supplemental/likelySubtags.json", "cldr-data/supplemental/plurals.json" ] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [{package.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case users don't have core.autocrlf set 2 | * text=auto 3 | 4 | # Files that should always be normalized and converted to native line 5 | # endings on checkout. 6 | *.js text 7 | *.json text 8 | *.ts text 9 | *.md text 10 | *.yml text 11 | LICENSE text 12 | 13 | # Files that are truly binary and should not be modified 14 | *.png binary 15 | *.jpg binary 16 | *.jpeg binary 17 | *.gif binary 18 | *.jar binary 19 | *.zip binary 20 | *.psd binary 21 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.js.map 3 | !/*.js 4 | !/tasks/*.js 5 | /_build 6 | /bower_components 7 | /dist 8 | /output 9 | /html-report 10 | /node_modules 11 | /typings 12 | /coverage 13 | coverage-final.lcov 14 | .baseDir.ts 15 | .tscache 16 | .tsconfig*.json 17 | coverage-unmapped.json 18 | npm-debug.log 19 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dojo2-todo-mvc-kitchensink", 3 | "version": "0.0.1", 4 | "description": "TodoMVC using Dojo", 5 | "main": "src/main.tsx", 6 | "scripts": { 7 | "dev": "dojo build app -m dev -w -s", 8 | "build": "dojo build", 9 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 10 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 11 | "package": "shx cp -r output/dist/ ../../output/dist/todo-mvc-kitchensink/", 12 | "test:ci": "echo no tests" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/dojo/examples.git" 17 | }, 18 | "license": "BSD-3-Clause", 19 | "dependencies": { 20 | "@dojo/framework": "~8.0.0", 21 | "@dojo/widgets": "~8.0.0", 22 | "cldr-data": "~36.0.0", 23 | "cldrjs": "0.5.1", 24 | "globalize": "1.4.0", 25 | "tslib": "~1.9.3" 26 | }, 27 | "devDependencies": { 28 | "@dojo/cli": "~8.0.0", 29 | "@dojo/cli-build-app": "~8.0.1", 30 | "@types/node": "^12.12.32", 31 | "@typescript-eslint/eslint-plugin": "2.25.0", 32 | "@typescript-eslint/parser": "2.25.0", 33 | "eslint": "6.8.0", 34 | "eslint-config-prettier": "6.10.1", 35 | "eslint-plugin-import": "2.20.2", 36 | "loader-utils": "^1.2.3", 37 | "typescript": "~3.4.5" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/todo-mvc-kitchensink/preview.png -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/App.m.css: -------------------------------------------------------------------------------- 1 | .todoapp { 2 | background: #fff; 3 | margin: 130px 0 40px 0; 4 | position: relative; 5 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 6 | } 7 | 8 | .main { 9 | position: relative; 10 | z-index: 2; 11 | border-top: 1px solid #e6e6e6; 12 | } 13 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/App.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const todoapp: string; 2 | export const main: string; 3 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import { theme } from '@dojo/framework/core/middleware/theme'; 3 | import Route from '@dojo/framework/routing/Route'; 4 | 5 | import TodoList from './widgets/TodoList'; 6 | import ThemeSwitcher from './widgets/ThemeSwitcher'; 7 | import TodoHeader from './widgets/TodoHeader'; 8 | import TodoSearch from './widgets/TodoSearch'; 9 | import TodoFooter from './widgets/TodoFooter'; 10 | import Credits from './widgets/Credits'; 11 | 12 | import * as css from './App.m.css'; 13 | 14 | const factory = create({ theme }); 15 | 16 | export default factory(function App({ middleware: { theme } }) { 17 | const { todoapp } = theme.classes(css); 18 | return ( 19 |
    20 |
    21 | 22 | 23 | 24 | { 28 | return ; 29 | }} 30 | /> 31 | { 35 | return ; 36 | }} 37 | /> 38 |
    39 | 40 |
    41 | ); 42 | }); 43 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dojo2 todo mvc 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | button { 8 | margin: 0; 9 | padding: 0; 10 | border: 0; 11 | background: none; 12 | font-size: 100%; 13 | vertical-align: baseline; 14 | font-family: inherit; 15 | font-weight: inherit; 16 | color: inherit; 17 | -webkit-appearance: none; 18 | appearance: none; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | 23 | body { 24 | position: relative; 25 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 26 | line-height: 1.4em; 27 | background: #f5f5f5; 28 | min-width: 230px; 29 | max-width: 550px; 30 | margin: 0 auto; 31 | -webkit-font-smoothing: antialiased; 32 | -moz-osx-font-smoothing: grayscale; 33 | font-weight: 300; 34 | } 35 | 36 | :focus { 37 | outline: 0; 38 | } 39 | 40 | @media (max-width: 430px) { 41 | .footer { 42 | height: 50px; 43 | } 44 | 45 | .filters { 46 | bottom: 10px; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { renderer, tsx } from '@dojo/framework/core/vdom'; 2 | import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector'; 3 | import { registerI18nInjector } from '@dojo/framework/core/mixins/I18n'; 4 | import App from './App'; 5 | import Registry from '@dojo/framework/core/Registry'; 6 | 7 | const registry = new Registry(); 8 | registerI18nInjector({ locale: 'en' }, registry); 9 | 10 | const config = [ 11 | { 12 | id: 'view', 13 | path: 'view/{view}/{filter}', 14 | outlet: 'view', 15 | defaultParams: { 16 | filter: 'all', 17 | view: 'list' 18 | }, 19 | defaultRoute: true, 20 | children: [ 21 | { 22 | id: 'edit', 23 | path: 'todo/{id}', 24 | outlet: 'edit' 25 | } 26 | ] 27 | } 28 | ]; 29 | registerRouterInjector(config, registry); 30 | 31 | const r = renderer(() => ); 32 | r.mount({ registry }); 33 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/nls/common.ts: -------------------------------------------------------------------------------- 1 | const locales = { 2 | 'en-PR': () => import('./en-PR/common') 3 | }; 4 | 5 | const messages = { 6 | appTitle: 'todos', 7 | clearButtonText: 'Clear completed', 8 | createdTitle: 'Created on ', 9 | detailsTitle: 'Details', 10 | editPlaceholder: 'What needs to be done?', 11 | filterActive: 'Active', 12 | filterAll: 'All', 13 | filterCompleted: 'Completed', 14 | footerInstructions: 'Double-click or press Enter to edit a todo', 15 | footerCredits: 'Credits:', 16 | footerPartOf: 'Part of ', 17 | itemsLeft: `{count, plural, 18 | =1 {item left} 19 | other {items left}}`, 20 | searchPlaceholder: 'Quick Filter', 21 | themeSwitchTitle: 'Pirate Mode' 22 | }; 23 | 24 | export default { locales, messages }; 25 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/nls/en-PR/common.ts: -------------------------------------------------------------------------------- 1 | const messages = { 2 | appTitle: "Plunderin' list", 3 | createdTitle: 'Sailed on ', 4 | detailsTitle: 'Here be more', 5 | editPlaceholder: "wha' needs t' be plunderin'?", 6 | clearButtonText: 'Clean up', 7 | footerInstructions: 'Double-click fer more', 8 | filterCompleted: 'Done', 9 | footerCredits: 'Credits be to:', 10 | footerPartOf: 'Part of ', 11 | itemsLeft: `{count, plural, 12 | =1 {thin' left} 13 | other {thin's left}}`, 14 | searchPlaceholder: "be searchin'", 15 | themeSwitchTitle: 'Pirate Mode' 16 | }; 17 | 18 | export default messages; 19 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/store.ts: -------------------------------------------------------------------------------- 1 | import { createStoreMiddleware } from '@dojo/framework/core/middleware/store'; 2 | 3 | export interface Todo { 4 | id: string; 5 | label: string; 6 | completed?: boolean; 7 | } 8 | 9 | export interface State { 10 | todos?: Todo[]; 11 | current?: string; 12 | completedCount?: number; 13 | editingId?: string; 14 | editingLabel?: string; 15 | search?: string; 16 | } 17 | 18 | export default createStoreMiddleware(); 19 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate.ts: -------------------------------------------------------------------------------- 1 | import * as App from './pirate/App.m.css'; 2 | import * as todoSearch from './pirate/todoSearch.m.css'; 3 | import * as todoHeader from './pirate/todoHeader.m.css'; 4 | import * as todoList from './pirate/todoList.m.css'; 5 | import * as todoFooter from './pirate/todoFooter.m.css'; 6 | import * as todoItem from './pirate/todoItem.m.css'; 7 | import * as todoCard from './pirate/todoCard.m.css'; 8 | import * as themeSwitcher from './pirate/themeSwitcher.m.css'; 9 | import * as todoDetails from './pirate/todoDetails.m.css'; 10 | import * as credits from './pirate/credits.m.css'; 11 | 12 | export default { 13 | 'dojo2-todo-mvc-kitchensink/App': App, 14 | 'dojo2-todo-mvc-kitchensink/todoSearch': todoSearch, 15 | 'dojo2-todo-mvc-kitchensink/todoHeader': todoHeader, 16 | 'dojo2-todo-mvc-kitchensink/todoList': todoList, 17 | 'dojo2-todo-mvc-kitchensink/todoFooter': todoFooter, 18 | 'dojo2-todo-mvc-kitchensink/todoItem': todoItem, 19 | 'dojo2-todo-mvc-kitchensink/todoCard': todoCard, 20 | 'dojo2-todo-mvc-kitchensink/themeSwitcher': themeSwitcher, 21 | 'dojo2-todo-mvc-kitchensink/credits': credits, 22 | 'dojo2-todo-mvc-kitchensink/todoDetails': todoDetails 23 | }; 24 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/App.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const todoapp: string; 2 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/credits.m.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | margin: 145px 0 0 -55px; 3 | color: #bfbfbf; 4 | font-size: 10px; 5 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 6 | text-align: center; 7 | } 8 | 9 | @media (max-width: 430px) { 10 | .footer { 11 | height: 50px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/credits.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const footer: string; 2 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/themeSwitcher.m.css: -------------------------------------------------------------------------------- 1 | .themeSwitcher { 2 | position: absolute; 3 | top: -135px; 4 | right: 0; 5 | } 6 | 7 | .themeSwitcherCheckbox { 8 | } 9 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/themeSwitcher.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const themeSwitcher: string; 2 | export const themeSwitcherCheckbox: string; 3 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoCard.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const card: string; 2 | export const cardHeader: string; 3 | export const cardToggle: string; 4 | export const cardDestroy: string; 5 | export const completed: string; 6 | export const todoLabel: string; 7 | export const listItem: string; 8 | export const destroyContainer: string; 9 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoDetails.m.css: -------------------------------------------------------------------------------- 1 | .backdrop { 2 | position: fixed; 3 | left: 0; 4 | top: -0; 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | z-index: 99; 9 | background-color: rgba(255, 255, 255, 0.75); 10 | } 11 | 12 | .modal { 13 | position: fixed; 14 | top: 230px; 15 | left: 50%; 16 | width: 600px; 17 | transform: translate(-50%, -50%); 18 | z-index: 100; 19 | background-color: #ebe2a9; 20 | padding: 16px; 21 | border-radius: 6px; 22 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); 23 | } 24 | 25 | .close:after { 26 | position: absolute; 27 | top: 8px; 28 | right: 8px; 29 | content: 'X'; 30 | cursor: pointer; 31 | } 32 | 33 | .todoDetailsHeader { 34 | font-weight: 300; 35 | font-size: 32px; 36 | margin-bottom: 12px; 37 | } 38 | 39 | .todoDetailsTextArea { 40 | width: calc(100% - 24px); 41 | height: 78px; 42 | padding: 12px; 43 | margin: 0; 44 | font-size: 24px; 45 | font-weight: inherit; 46 | color: inherit; 47 | background-color: #fdf4cb; 48 | border: none; 49 | resize: none; 50 | } 51 | 52 | .lastUpdated { 53 | float: left; 54 | line-height: 40px; 55 | } 56 | 57 | .toggle { 58 | float: right; 59 | position: relative; 60 | } 61 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoDetails.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const backdrop: string; 2 | export const modal: string; 3 | export const close: string; 4 | export const todoDetailsHeader: string; 5 | export const todoDetailsTextArea: string; 6 | export const lastUpdated: string; 7 | export const toggle: string; 8 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoFooter.m.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | color: #777; 3 | padding: 10px 15px; 4 | height: 20px; 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoFooter.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const footer: string; 2 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoHeader.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const title: string; 2 | export const newTodo: string; 3 | export const toggleAll: string; 4 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoItem.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const todoItem: string; 2 | export const toggle: string; 3 | export const completed: string; 4 | export const destroy: string; 5 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoList.m.css: -------------------------------------------------------------------------------- 1 | .todoList { 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | display: block; 6 | } 7 | 8 | .cardList { 9 | display: flex; 10 | flex-direction: row; 11 | flex-wrap: wrap; 12 | box-sizing: border-box; 13 | } 14 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoList.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const todoList: string; 2 | export const cardList: string; 3 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoSearch.m.css: -------------------------------------------------------------------------------- 1 | .search { 2 | width: calc(100% - 16px); 3 | padding: 12px; 4 | border: none; 5 | background-color: transparent; 6 | font: inherit; 7 | font-size: 18px; 8 | padding-left: 60px; 9 | } 10 | 11 | .search::placeholder { 12 | color: #666666; 13 | } 14 | 15 | .searchIcon { 16 | width: 32px; 17 | height: 32px; 18 | position: absolute; 19 | top: 74px; 20 | left: 16px; 21 | } 22 | 23 | .searchIcon:before { 24 | content: url('data:image/svg+xml;utf8,'); 25 | } 26 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/themes/pirate/todoSearch.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const search: string; 2 | export const searchIcon: string; 3 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/Credits.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import { theme } from '@dojo/framework/core/middleware/theme'; 3 | import { i18n } from '@dojo/framework/core/middleware/i18n'; 4 | 5 | import * as css from './styles/credits.m.css'; 6 | import bundle from '../nls/common'; 7 | 8 | const factory = create({ theme, i18n }); 9 | 10 | export default factory(function Credits({ middleware: { theme, i18n } }) { 11 | const { footer } = theme.classes(css); 12 | const { footerCredits, footerInstructions, footerPartOf } = i18n.localize(bundle).messages; 13 | return ( 14 |
    15 |

    {footerInstructions}

    16 |

    {`${footerCredits} The Dojo Team`}

    17 |

    18 | {footerPartOf} 19 | {TodoMVC} 20 |

    21 |
    22 | ); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/ThemeSwitcher.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import { theme } from '@dojo/framework/core/middleware/theme'; 3 | import { i18n } from '@dojo/framework/core/middleware/i18n'; 4 | 5 | import bundle from '../nls/common'; 6 | import * as css from './styles/themeSwitcher.m.css'; 7 | import pirateThemeStyles from './../themes/pirate'; 8 | 9 | const factory = create({ theme, i18n }); 10 | 11 | export default factory(function ThemeSwitcher({ middleware: { theme, i18n } }) { 12 | const { themeSwitcher, themeSwitcherCheckbox } = theme.classes(css); 13 | const { themeSwitchTitle } = i18n.localize(bundle).messages; 14 | function switcher(event: MouseEvent) { 15 | const target = event.target as HTMLInputElement; 16 | if (target.checked) { 17 | i18n.set({ locale: 'en-PR' }); 18 | theme.set(pirateThemeStyles); 19 | } else { 20 | i18n.set({}); 21 | theme.set({}); 22 | } 23 | } 24 | return ( 25 | 29 | ); 30 | }); 31 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/TodoFilter.tsx: -------------------------------------------------------------------------------- 1 | import { tsx, create } from '@dojo/framework/core/vdom'; 2 | import { theme } from '@dojo/framework/core/middleware/theme'; 3 | import { i18n } from '@dojo/framework/core/middleware/i18n'; 4 | import Link from '@dojo/framework/routing/ActiveLink'; 5 | 6 | import bundle from '../nls/common'; 7 | import * as css from './styles/todoFilter.m.css'; 8 | 9 | const factory = create({ theme, i18n }); 10 | 11 | export default factory(function TodoFilter({ middleware: { theme, i18n } }) { 12 | const { filters, selected, wrapper, link } = theme.classes(css); 13 | const { filterAll, filterActive, filterCompleted } = i18n.localize(bundle).messages; 14 | 15 | return ( 16 |
      17 |
    • 18 | 19 | {filterAll} 20 | 21 | 22 | {filterActive} 23 | 24 | 31 | {filterCompleted} 32 | 33 |
      • 34 |
    35 | ); 36 | }); 37 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/TodoSearch.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import { theme } from '@dojo/framework/core/middleware/theme'; 3 | import { i18n } from '@dojo/framework/core/middleware/i18n'; 4 | import store from '../store'; 5 | import { todoSearch } from '../processes'; 6 | 7 | import bundle from '../nls/common'; 8 | import * as css from './styles/todoSearch.m.css'; 9 | 10 | const factory = create({ theme, store, i18n }); 11 | 12 | export default factory(function TodoSearch({ middleware: { store, theme, i18n } }) { 13 | const { get, path, executor } = store; 14 | const { search, searchIcon } = theme.classes(css); 15 | const { searchPlaceholder } = i18n.localize(bundle).messages; 16 | const value = get(path('search')); 17 | 18 | function onInput(event: KeyboardEvent) { 19 | executor(todoSearch)({ search: event.target.value }); 20 | } 21 | 22 | return ( 23 |
    24 | 25 | 26 |
    27 | ); 28 | }); 29 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/TodoViewSwitch.tsx: -------------------------------------------------------------------------------- 1 | import { create, tsx } from '@dojo/framework/core/vdom'; 2 | import { theme } from '@dojo/framework/core/middleware/theme'; 3 | import Link from '@dojo/framework/routing/ActiveLink'; 4 | 5 | import * as css from './styles/todoViewSwitch.m.css'; 6 | 7 | export interface TodoViewSwitchProperties { 8 | filter: string; 9 | } 10 | 11 | const factory = create({ theme }).properties(); 12 | 13 | export default factory(function TodoViewSwitch({ middleware: { theme }, properties }) { 14 | const { filter } = properties(); 15 | const { active, viewChooser, list, cards, item, link } = theme.classes(css); 16 | return ( 17 |
      18 |
    • 19 | 20 |
      • 21 |
    • 22 | 23 |
      • 24 |
    25 | ); 26 | }); 27 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/credits.m.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | margin: 65px auto 0; 3 | color: #bfbfbf; 4 | font-size: 10px; 5 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 6 | text-align: center; 7 | } 8 | 9 | @media (max-width: 430px) { 10 | .footer { 11 | height: 50px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/credits.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const footer: string; 2 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/themeSwitcher.m.css: -------------------------------------------------------------------------------- 1 | .themeSwitcher { 2 | position: absolute; 3 | top: -25px; 4 | right: 0; 5 | } 6 | 7 | .themeSwitcherCheckbox { 8 | } 9 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/themeSwitcher.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const themeSwitcher: string; 2 | export const themeSwitcherCheckbox: string; 3 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoCard.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const card: string; 2 | export const cardHeader: string; 3 | export const cardToggle: string; 4 | export const cardDestroy: string; 5 | export const todoLabel: string; 6 | export const completed: string; 7 | export const listItem: string; 8 | export const destroyContainer: string; 9 | export const destroy: string; 10 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoDetails.m.css: -------------------------------------------------------------------------------- 1 | .todoDetails { 2 | } 3 | 4 | .title { 5 | } 6 | 7 | .backdrop { 8 | position: fixed; 9 | left: 0; 10 | top: -0; 11 | overflow: hidden; 12 | width: 100%; 13 | height: 100%; 14 | z-index: 99; 15 | background-color: rgba(255, 255, 255, 0.75); 16 | } 17 | 18 | .modal { 19 | position: fixed; 20 | top: 230px; 21 | left: 50%; 22 | width: 600px; 23 | transform: translate(-50%, -50%); 24 | z-index: 100; 25 | background-color: #fafafa; 26 | padding: 16px; 27 | border-radius: 6px; 28 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); 29 | } 30 | 31 | .close:after { 32 | position: absolute; 33 | top: 8px; 34 | right: 8px; 35 | content: 'X'; 36 | cursor: pointer; 37 | } 38 | 39 | .todoDetailsHeader { 40 | font-weight: 300; 41 | font-size: 32px; 42 | margin-bottom: 12px; 43 | } 44 | 45 | .todoDetailsTextArea { 46 | width: calc(100% - 24px); 47 | height: 78px; 48 | padding: 12px; 49 | margin: 0; 50 | font-size: 24px; 51 | font-weight: inherit; 52 | color: inherit; 53 | border: 1px solid #ededed; 54 | resize: none; 55 | } 56 | 57 | .lastUpdated { 58 | float: left; 59 | line-height: 40px; 60 | } 61 | 62 | .toggle { 63 | float: right; 64 | position: relative !important; 65 | } 66 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoDetails.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const todoDetails: string; 2 | export const title: string; 3 | export const backdrop: string; 4 | export const modal: string; 5 | export const close: string; 6 | export const todoDetailsHeader: string; 7 | export const todoDetailsTextArea: string; 8 | export const lastUpdated: string; 9 | export const toggle: string; 10 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoFilter.m.css: -------------------------------------------------------------------------------- 1 | .filters { 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | position: absolute; 6 | right: 0; 7 | left: 0; 8 | } 9 | 10 | .wrapper { 11 | display: inline; 12 | } 13 | 14 | .link { 15 | color: inherit; 16 | margin: 3px; 17 | padding: 3px 7px; 18 | text-decoration: none; 19 | border: 1px solid transparent; 20 | border-radius: 3px; 21 | } 22 | 23 | .link:hover { 24 | border-color: rgba(175, 47, 47, 0.1); 25 | } 26 | 27 | .link.selected { 28 | border-color: rgba(175, 47, 47, 0.2); 29 | } 30 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoFilter.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const filters: string; 2 | export const wrapper: string; 3 | export const link: string; 4 | export const selected: string; 5 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoFooter.m.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | color: #777; 3 | padding: 10px 15px; 4 | height: 20px; 5 | text-align: center; 6 | border-top: 1px solid #e6e6e6; 7 | } 8 | 9 | .footer:before { 10 | content: ''; 11 | position: absolute; 12 | right: 0; 13 | bottom: 0; 14 | left: 0; 15 | height: 50px; 16 | overflow: hidden; 17 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 18 | 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2); 19 | } 20 | 21 | .todoCountLabel { 22 | float: left; 23 | text-align: left; 24 | } 25 | 26 | .todoCount { 27 | font-weight: 300; 28 | } 29 | 30 | .clearCompleted, 31 | .clearCompleted:active { 32 | float: right; 33 | position: relative; 34 | line-height: 20px; 35 | text-decoration: none; 36 | cursor: pointer; 37 | } 38 | 39 | .clearCompleted:focus { 40 | text-decoration: underline; 41 | } 42 | 43 | .clearCompleted:hover { 44 | text-decoration: underline; 45 | } 46 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoFooter.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const footer: string; 2 | export const todoCountLabel: string; 3 | export const todoCount: string; 4 | export const clearCompleted: string; 5 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoHeader.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const title: string; 2 | export const newTodo: string; 3 | export const toggleAll: string; 4 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoItem.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const todoItem: string; 2 | export const toggle: string; 3 | export const todoLabel: string; 4 | export const completed: string; 5 | export const destroy: string; 6 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoList.m.css: -------------------------------------------------------------------------------- 1 | .todoList { 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | display: block; 6 | } 7 | 8 | .cardList { 9 | display: flex; 10 | flex-direction: row; 11 | flex-wrap: wrap; 12 | box-sizing: border-box; 13 | background-color: #f6f6f6; 14 | } 15 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoList.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const todoList: string; 2 | export const cardList: string; 3 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoSearch.m.css: -------------------------------------------------------------------------------- 1 | .search { 2 | width: calc(100% - 16px); 3 | color: inherit; 4 | padding: 12px; 5 | border: none; 6 | background-color: transparent; 7 | font: inherit; 8 | font-size: 18px; 9 | padding-left: 60px; 10 | } 11 | 12 | .search::placeholder { 13 | color: #e6e6e6; 14 | } 15 | 16 | .searchIcon { 17 | width: 32px; 18 | height: 32px; 19 | position: absolute; 20 | top: 74px; 21 | left: 16px; 22 | } 23 | 24 | .searchIcon:before { 25 | content: url('data:image/svg+xml;utf8,'); 26 | } 27 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoSearch.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const search: string; 2 | export const searchIcon: string; 3 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/src/widgets/styles/todoViewSwitch.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const viewChooser: string; 2 | export const item: string; 3 | export const active: string; 4 | export const link: string; 5 | export const list: string; 6 | export const cards: string; 7 | -------------------------------------------------------------------------------- /packages/todo-mvc-kitchensink/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown", 14 | "es2016" 15 | ], 16 | "module": "umd", 17 | "moduleResolution": "node", 18 | "noUnusedLocals": true, 19 | "outDir": "_build/", 20 | "removeComments": false, 21 | "importHelpers": true, 22 | "downlevelIteration": true, 23 | "sourceMap": true, 24 | "strict": true, 25 | "target": "es5", 26 | "types": [] 27 | }, 28 | "include": [ 29 | "./src/**/*.ts", 30 | "./src/**/*.tsx" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /packages/todo-mvc/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": {}, 3 | "test-intern": {}, 4 | "create-app": {}, 5 | "create-widget": {} 6 | } 7 | -------------------------------------------------------------------------------- /packages/todo-mvc/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/todo-mvc/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/todo-mvc/.dojorc-test: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "base": "/output/dist/" 4 | }, 5 | "test-intern": {}, 6 | "create-app": {}, 7 | "create-widget": {} 8 | } 9 | -------------------------------------------------------------------------------- /packages/todo-mvc/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [{package.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/todo-mvc/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/todo-mvc/.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case users don't have core.autocrlf set 2 | * text=auto 3 | 4 | # Files that should always be normalized and converted to native line 5 | # endings on checkout. 6 | *.js text 7 | *.json text 8 | *.ts text 9 | *.md text 10 | *.yml text 11 | LICENSE text 12 | 13 | # Files that are truly binary and should not be modified 14 | *.png binary 15 | *.jpg binary 16 | *.jpeg binary 17 | *.gif binary 18 | *.jar binary 19 | *.zip binary 20 | *.psd binary 21 | -------------------------------------------------------------------------------- /packages/todo-mvc/.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.js.map 3 | !/*.js 4 | !/tasks/*.js 5 | /_build 6 | /bower_components 7 | /dist 8 | /output 9 | /html-report 10 | /node_modules 11 | /coverage 12 | coverage-final.lcov 13 | atypings 14 | .baseDir.ts 15 | .tscache 16 | .tsconfig*.json 17 | coverage-unmapped.json 18 | npm-debug.log 19 | -------------------------------------------------------------------------------- /packages/todo-mvc/index.js: -------------------------------------------------------------------------------- 1 | require('ts-node').register(); // This will register the TypeScript compiler 2 | require('./src/electron'); 3 | -------------------------------------------------------------------------------- /packages/todo-mvc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dojo-todo-mvc", 3 | "version": "0.0.1", 4 | "description": "TodoMVC using Dojo", 5 | "main": "src/main.tsx", 6 | "scripts": { 7 | "dev": "dojo build app -m dev -w -s", 8 | "build": "dojo build", 9 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 10 | "build:tests": "dojo build -m unit && dojo build -m functional", 11 | "package": "shx cp -r output/dist/ ../../output/dist/todo-mvc/", 12 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 13 | "test:ci": "echo no tests" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/dojo/examples.git" 18 | }, 19 | "license": "BSD-3-Clause", 20 | "dependencies": { 21 | "@dojo/framework": "~8.0.0", 22 | "tslib": "~1.9.3" 23 | }, 24 | "devDependencies": { 25 | "@dojo/cli": "~8.0.0", 26 | "@dojo/cli-build-app": "~8.0.1", 27 | "@typescript-eslint/eslint-plugin": "2.25.0", 28 | "@typescript-eslint/parser": "2.25.0", 29 | "eslint": "6.8.0", 30 | "eslint-config-prettier": "6.10.1", 31 | "eslint-plugin-import": "2.20.2", 32 | "typescript": "~3.4.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/todo-mvc/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/todo-mvc/preview.png -------------------------------------------------------------------------------- /packages/todo-mvc/src/App.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const todoapp: string; 2 | export const main: string; 3 | export const todoList: string; 4 | export const title: string; 5 | export const newTodo: string; 6 | export const toggleAll: string; 7 | export const todoItem: string; 8 | export const edit: string; 9 | export const editing: string; 10 | export const view: string; 11 | export const toggle: string; 12 | export const todoLabel: string; 13 | export const completed: string; 14 | export const destroy: string; 15 | export const footer: string; 16 | export const todoCountLabel: string; 17 | export const todoCount: string; 18 | export const clearCompleted: string; 19 | export const filters: string; 20 | export const filter: string; 21 | export const filterLink: string; 22 | export const selected: string; 23 | -------------------------------------------------------------------------------- /packages/todo-mvc/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | todo-mvc 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/todo-mvc/src/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | button { 8 | margin: 0; 9 | padding: 0; 10 | border: 0; 11 | background: none; 12 | font-size: 100%; 13 | vertical-align: baseline; 14 | font-family: inherit; 15 | font-weight: inherit; 16 | color: inherit; 17 | -webkit-appearance: none; 18 | appearance: none; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | 23 | body { 24 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 25 | line-height: 1.4em; 26 | background: #f5f5f5; 27 | color: #4d4d4d; 28 | min-width: 230px; 29 | max-width: 550px; 30 | margin: 0 auto; 31 | -webkit-font-smoothing: antialiased; 32 | -moz-osx-font-smoothing: grayscale; 33 | font-weight: 300; 34 | } 35 | 36 | :focus { 37 | outline: 0; 38 | } 39 | -------------------------------------------------------------------------------- /packages/todo-mvc/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { renderer, tsx } from '@dojo/framework/core/vdom'; 2 | import Registry from '@dojo/framework/core/Registry'; 3 | import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector'; 4 | 5 | import App from './App'; 6 | 7 | const registry = new Registry(); 8 | registerRouterInjector( 9 | [ 10 | { 11 | id: 'filter', 12 | path: 'filter/{filter}', 13 | outlet: 'filter', 14 | defaultParams: { filter: 'all' }, 15 | defaultRoute: true 16 | } 17 | ], 18 | registry 19 | ); 20 | 21 | const r = renderer(() => ); 22 | r.mount({ registry }); 23 | -------------------------------------------------------------------------------- /packages/todo-mvc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown", 14 | "es2016" 15 | ], 16 | "module": "umd", 17 | "moduleResolution": "node", 18 | "noUnusedLocals": true, 19 | "outDir": "_build/", 20 | "removeComments": false, 21 | "importHelpers": true, 22 | "downlevelIteration": true, 23 | "sourceMap": true, 24 | "strict": true, 25 | "target": "es5", 26 | "types": [] 27 | }, 28 | "include": [ 29 | "./src/**/*.ts", 30 | "./src/**/*.tsx" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /packages/world-clock/.dojorc: -------------------------------------------------------------------------------- 1 | { 2 | "build-app": { 3 | "locale": "en", 4 | "supportedLocales": [ "es", "fr", "hi", "ar", "ja" ] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/world-clock/.dojorc-deploy: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ".dojorc", 3 | "build-app": { 4 | "base": "/world-clock/" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/world-clock/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | project: 'tsconfig.json', 5 | sourceType: 'module', 6 | }, 7 | plugins: ['@typescript-eslint/eslint-plugin'], 8 | extends: [ 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier', 12 | 'prettier/@typescript-eslint', 13 | ], 14 | root: true, 15 | env: { 16 | node: true, 17 | }, 18 | rules: { 19 | '@typescript-eslint/interface-name-prefix': 'off', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | '@typescript-eslint/no-unused-vars': 'off', 23 | '@typescript-eslint/no-empty-function': 'off', 24 | '@typescript-eslint/no-use-before-define': 'off', 25 | '@typescript-eslint/no-empty-interface': 'off', 26 | '@typescript-eslint/camelcase': 'off', 27 | '@typescript-eslint/no-var-requires': 'off' 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/world-clock/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | _build/ 3 | output/ 4 | -------------------------------------------------------------------------------- /packages/world-clock/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "world-clock", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "dojo build app -m dev -w -s", 6 | "build": "dojo build", 7 | "build:deploy": "npm install && dojo build --mode dist --dojorc .dojorc-deploy && shx rm -rf node_modules", 8 | "lint": "eslint \"src/**/*.{ts,tsx}\"", 9 | "package": "shx cp -r output/dist/ ../../output/dist/world-clock/", 10 | "test:ci": "echo no tests" 11 | }, 12 | "dependencies": { 13 | "@dojo/framework": "~8.0.0", 14 | "@dojo/widgets": "~8.0.0", 15 | "cldrjs": "0.5.1", 16 | "cldr-data": "36.0.0", 17 | "moment-timezone": "0.5.28", 18 | "tslib": "~1.9.3" 19 | }, 20 | "devDependencies": { 21 | "@dojo/cli": "~8.0.0", 22 | "@dojo/cli-build-app": "~8.0.1", 23 | "@types/moment-timezone": "0.5.13", 24 | "@types/node": "^12.12.32", 25 | "@typescript-eslint/eslint-plugin": "2.25.0", 26 | "@typescript-eslint/parser": "2.25.0", 27 | "eslint": "6.8.0", 28 | "eslint-config-prettier": "6.10.1", 29 | "eslint-plugin-import": "2.20.2", 30 | "typescript": "~3.4.5" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/world-clock/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dojo/examples/731bd0c52c046cc97f4b4be8244a661a253951ff/packages/world-clock/preview.png -------------------------------------------------------------------------------- /packages/world-clock/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | world-clock 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/world-clock/src/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fff; 3 | font-family: sans-serif; 4 | } 5 | -------------------------------------------------------------------------------- /packages/world-clock/src/main.ts: -------------------------------------------------------------------------------- 1 | import renderer from '@dojo/framework/core/vdom'; 2 | import App from './widgets/App'; 3 | 4 | const r = renderer(() => App({})); 5 | r.mount(); 6 | -------------------------------------------------------------------------------- /packages/world-clock/src/nls/ar/main.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | arabic: 'عربى', 3 | english: 'الإنجليزية', 4 | hindi: 'الهندية', 5 | french: 'الفرنسية', 6 | japanese: 'اليابانية', 7 | language: 'لغة', 8 | spanish: 'الأسبانية', 9 | 10 | cairo: 'القاهرة', 11 | johannesburg: 'جوهانسبرج', 12 | london: 'لندن', 13 | mexicoCity: 'مكسيكو سيتي', 14 | newDehli: 'نيو دلهي', 15 | newYork: 'نيويورك', 16 | paris: 'باريس', 17 | tokyo: 'طوكي', 18 | 19 | multipleLocales: 'لغات متعددة' 20 | }; 21 | -------------------------------------------------------------------------------- /packages/world-clock/src/nls/es/main.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | arabic: 'Arábica', 3 | english: 'Inglés', 4 | french: 'Francés', 5 | japanese: 'Japonés', 6 | language: 'Lengua', 7 | spanish: 'Español', 8 | 9 | cairo: 'El Cairo', 10 | johannesburg: 'Johanesburgo', 11 | london: 'Londres', 12 | mexicoCity: 'Ciudad de México', 13 | newDehli: 'Nueva Dehli', 14 | newYork: 'Nueva York', 15 | paris: 'París', 16 | tokyo: 'Tokio', 17 | 18 | multipleLocales: 'múltiples idiomas' 19 | }; 20 | -------------------------------------------------------------------------------- /packages/world-clock/src/nls/fr/main.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | arabic: 'Arabe', 3 | english: 'Anglais', 4 | french: 'Français', 5 | japanese: 'Japonais', 6 | language: 'Langue', 7 | spanish: 'Espanol', 8 | 9 | cairo: 'El Caire', 10 | london: 'Londres', 11 | mexicoCity: 'Mexico', 12 | 13 | multipleLocales: 'Plusieurs langues' 14 | }; 15 | -------------------------------------------------------------------------------- /packages/world-clock/src/nls/hi/main.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | arabic: 'अरबी', 3 | english: 'अंग्रेज़ी', 4 | french: 'फ्रांसीसी', 5 | hindi: 'हिंदी', 6 | japanese: 'जापानी', 7 | language: 'भाषा', 8 | spanish: 'स्पनिश', 9 | 10 | cairo: 'काहिरा', 11 | johannesburg: 'जोहानसबर्ग', 12 | london: 'लंडन', 13 | mexicoCity: 'मेक्सिको सिटी', 14 | newDehli: 'नई दिल्ली', 15 | newYork: 'न्यूयॉर्क', 16 | paris: 'पेरिस', 17 | tokyo: 'टोक्यो', 18 | 19 | multipleLocales: 'विभिन्न भाषाएं' 20 | }; 21 | -------------------------------------------------------------------------------- /packages/world-clock/src/nls/ja/main.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | arabic: 'アラビア語', 3 | english: '英語', 4 | french: 'フランス語', 5 | hindi: 'ヒンディー語', 6 | japanese: '日本語', 7 | language: '言語', 8 | spanish: 'スペイン語', 9 | 10 | cairo: 'カイロ', 11 | johannesburg: 'ヨハネスブルグ', 12 | london: 'ロンドン', 13 | mexicoCity: 'メキシコシティ', 14 | newDehli: 'ニューデリー', 15 | newYork: 'ニューヨーク', 16 | paris: 'フランス', 17 | tokyo: '東京', 18 | 19 | multipleLocales: '複数のロケール' 20 | }; 21 | -------------------------------------------------------------------------------- /packages/world-clock/src/nls/main.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | locales: { 3 | ar: () => import('./ar/main'), 4 | es: () => import('./es/main'), 5 | hi: () => import('./hi/main'), 6 | fr: () => import('./fr/main'), 7 | ja: () => import('./ja/main') 8 | }, 9 | messages: { 10 | arabic: 'Arabic', 11 | english: 'English', 12 | french: 'French', 13 | hindi: 'Hindi', 14 | japanese: 'Japanese', 15 | language: 'Language', 16 | spanish: 'Spanish', 17 | 18 | cairo: 'Cairo', 19 | johannesburg: 'Johannesburg', 20 | london: 'London', 21 | mexicoCity: 'Mexico City', 22 | newDehli: 'New Dehli', 23 | newYork: 'New York', 24 | paris: 'Paris', 25 | tokyo: 'Tokyo', 26 | 27 | multipleLocales: 'Multiple Locales' 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /packages/world-clock/src/styles/app.m.css: -------------------------------------------------------------------------------- 1 | .clocks { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | 6 | .formFields { 7 | align-items: center; 8 | display: flex; 9 | margin-bottom: 2rem; 10 | } 11 | 12 | .formField { 13 | margin-right: 1rem; 14 | } 15 | 16 | .label { 17 | margin-right: 0.5rem; 18 | } 19 | -------------------------------------------------------------------------------- /packages/world-clock/src/styles/app.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const clocks: string; 2 | export const formFields: string; 3 | export const formField: string; 4 | export const label: string; 5 | -------------------------------------------------------------------------------- /packages/world-clock/src/styles/clock.m.css: -------------------------------------------------------------------------------- 1 | @import './variables.css'; 2 | 3 | .label { 4 | text-align: center; 5 | } 6 | 7 | .clock { 8 | fill: #000; 9 | } 10 | 11 | .hourText { 12 | fill: var(--clock-text-color); 13 | font-size: var(--clock-text-size); 14 | } 15 | 16 | .hand { 17 | stroke: #fff; 18 | } 19 | 20 | .hourHand { 21 | stroke-width: var(--hour-hand-stroke-width); 22 | } 23 | 24 | .minuteHand { 25 | stroke-width: var(--minute-hand-stroke-width); 26 | } 27 | 28 | .secondHand { 29 | stroke-width: var(--second-hand-stroke-width); 30 | } 31 | 32 | .joint { 33 | stroke: #fff; 34 | } 35 | -------------------------------------------------------------------------------- /packages/world-clock/src/styles/clock.m.css.d.ts: -------------------------------------------------------------------------------- 1 | export const label: string; 2 | export const clock: string; 3 | export const hourText: string; 4 | export const hand: string; 5 | export const hourHand: string; 6 | export const minuteHand: string; 7 | export const secondHand: string; 8 | export const joint: string; 9 | -------------------------------------------------------------------------------- /packages/world-clock/src/styles/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --clock-fill-color: #000; 3 | --clock-hand-color: #fff; 4 | --clock-text-color: #fff; 5 | --clock-text-size: 16px; 6 | --clock-size: 160px; 7 | --hour-hand-stroke-width: 6px; 8 | --minute-hand-stroke-width: 3px; 9 | --second-hand-stroke-width: 2px; 10 | } 11 | -------------------------------------------------------------------------------- /packages/world-clock/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "jsxFactory": "tsx", 7 | "lib": [ 8 | "dom", 9 | "es5", 10 | "es2015.promise", 11 | "es2015.iterable", 12 | "es2015.symbol", 13 | "es2015.symbol.wellknown" 14 | ], 15 | "module": "umd", 16 | "moduleResolution": "node", 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "importHelpers": true, 21 | "downlevelIteration": true, 22 | "sourceMap": true, 23 | "strict": true, 24 | "target": "es5", 25 | "types": [ "node" ] 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | --------------------------------------------------------------------------------