Last active
May 25, 2019 04:39
-
-
Save vidaaudrey/5b446f12a31575d7b6feb2c301ffcf14 to your computer and use it in GitHub Desktop.
Visual Studio Code Settings Sync Gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"lastUpload":"2019-05-25T04:39:09.973Z","extensionVersion":"v3.2.9"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "metadata": { | |
| "id": "d3836729-9cc1-42c1-b2af-d50071f57d29", | |
| "publisherId": "formulahendry.auto-close-tag", | |
| "publisherDisplayName": "formulahendry" | |
| }, | |
| "name": "auto-close-tag", | |
| "publisher": "formulahendry", | |
| "version": "0.5.6" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "6e440e71-8ed9-4f25-bb78-4b13096b8a03", | |
| "publisherId": "formulahendry.auto-rename-tag", | |
| "publisherDisplayName": "formulahendry" | |
| }, | |
| "name": "auto-rename-tag", | |
| "publisher": "formulahendry", | |
| "version": "0.0.15" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "70378119-1d85-4935-9733-0298c7a369a2", | |
| "publisherId": "steoates.autoimport", | |
| "publisherDisplayName": "steoates" | |
| }, | |
| "name": "autoimport", | |
| "publisher": "steoates", | |
| "version": "1.5.3" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "f583eafd-aa0d-4ccb-8f44-d1e610389660", | |
| "publisherId": "CoenraadS.bracket-pair-colorizer", | |
| "publisherDisplayName": "CoenraadS" | |
| }, | |
| "name": "bracket-pair-colorizer", | |
| "publisher": "CoenraadS", | |
| "version": "1.0.61" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "e337c67b-55c2-4fef-8949-eb260e7fb7fd", | |
| "publisherId": "Shan.code-settings-sync", | |
| "publisherDisplayName": "Shan" | |
| }, | |
| "name": "code-settings-sync", | |
| "publisher": "Shan", | |
| "version": "3.2.9" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "f6dbd813-b0a0-42c1-90ea-10dde9d925a7", | |
| "publisherId": "streetsidesoftware.code-spell-checker", | |
| "publisherDisplayName": "streetsidesoftware" | |
| }, | |
| "name": "code-spell-checker", | |
| "publisher": "streetsidesoftware", | |
| "version": "1.7.10" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "060828aa-17ab-40d9-9e2d-f8407f5c8d04", | |
| "publisherId": "alexdima.copy-relative-path", | |
| "publisherDisplayName": "alexdima" | |
| }, | |
| "name": "copy-relative-path", | |
| "publisher": "alexdima", | |
| "version": "0.0.2" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "0929f405-649c-41ac-b39f-2352e3d65a77", | |
| "publisherId": "dakara.dakara-foldplus", | |
| "publisherDisplayName": "dakara" | |
| }, | |
| "name": "dakara-foldplus", | |
| "publisher": "dakara", | |
| "version": "1.3.2" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "f60a60a6-95ba-42d4-b41c-3d24c1b89588", | |
| "publisherId": "EditorConfig.EditorConfig", | |
| "publisherDisplayName": "EditorConfig" | |
| }, | |
| "name": "EditorConfig", | |
| "publisher": "EditorConfig", | |
| "version": "0.13.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "19804510-b475-4dae-b0f7-6ca08fd1af0c", | |
| "publisherId": "dsznajder.es7-react-js-snippets", | |
| "publisherDisplayName": "dsznajder" | |
| }, | |
| "name": "es7-react-js-snippets", | |
| "publisher": "dsznajder", | |
| "version": "2.3.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "b3917e4f-5086-4def-a82b-2ae6b708db16", | |
| "publisherId": "flowtype.flow-for-vscode", | |
| "publisherDisplayName": "flowtype" | |
| }, | |
| "name": "flow-for-vscode", | |
| "publisher": "flowtype", | |
| "version": "1.1.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "2335b326-c334-4e81-bc51-c408fcec6e7c", | |
| "publisherId": "waderyan.gitblame", | |
| "publisherDisplayName": "waderyan" | |
| }, | |
| "name": "gitblame", | |
| "publisher": "waderyan", | |
| "version": "2.7.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "4de763bd-505d-4978-9575-2b7696ecf94e", | |
| "publisherId": "eamodio.gitlens", | |
| "publisherDisplayName": "eamodio" | |
| }, | |
| "name": "gitlens", | |
| "publisher": "eamodio", | |
| "version": "9.8.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "b2afde1a-6cef-4f77-971f-24e66ff2ae38", | |
| "publisherId": "wix.glean", | |
| "publisherDisplayName": "wix" | |
| }, | |
| "name": "glean", | |
| "publisher": "wix", | |
| "version": "4.11.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "3e8a391a-f3f0-44b2-8631-7847b0c8839a", | |
| "publisherId": "kumar-harsh.graphql-for-vscode", | |
| "publisherDisplayName": "kumar-harsh" | |
| }, | |
| "name": "graphql-for-vscode", | |
| "publisher": "kumar-harsh", | |
| "version": "1.13.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "c16f95f6-9b42-4a24-9bf4-245d4ea54fc5", | |
| "publisherId": "bradgashler.htmltagwrap", | |
| "publisherDisplayName": "bradgashler" | |
| }, | |
| "name": "htmltagwrap", | |
| "publisher": "bradgashler", | |
| "version": "0.0.7" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "8ee0c715-ca9e-4ce2-8841-5faa5e0f3255", | |
| "publisherId": "andys8.jest-snippets", | |
| "publisherDisplayName": "andys8" | |
| }, | |
| "name": "jest-snippets", | |
| "publisher": "andys8", | |
| "version": "1.7.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "98790d67-10fa-497c-9113-f6c7489207b2", | |
| "publisherId": "yzhang.markdown-all-in-one", | |
| "publisherDisplayName": "yzhang" | |
| }, | |
| "name": "markdown-all-in-one", | |
| "publisher": "yzhang", | |
| "version": "2.3.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "dff6b801-247e-40e9-82e8-8c9b1d19d1b8", | |
| "publisherId": "christian-kohler.npm-intellisense", | |
| "publisherDisplayName": "christian-kohler" | |
| }, | |
| "name": "npm-intellisense", | |
| "publisher": "christian-kohler", | |
| "version": "1.3.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "a41c1549-4053-44d4-bf30-60fc809b4a86", | |
| "publisherId": "christian-kohler.path-intellisense", | |
| "publisherDisplayName": "christian-kohler" | |
| }, | |
| "name": "path-intellisense", | |
| "publisher": "christian-kohler", | |
| "version": "1.4.2" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "96fa4707-6983-4489-b7c5-d5ffdfdcce90", | |
| "publisherId": "esbenp.prettier-vscode", | |
| "publisherDisplayName": "esbenp" | |
| }, | |
| "name": "prettier-vscode", | |
| "publisher": "esbenp", | |
| "version": "1.9.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "67e66172-30c7-4478-8f5d-6eac4ae755dc", | |
| "publisherId": "mohsen1.prettify-json", | |
| "publisherDisplayName": "mohsen1" | |
| }, | |
| "name": "prettify-json", | |
| "publisher": "mohsen1", | |
| "version": "0.0.3" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "1b747f06-3789-4ebd-ac99-f1fe430c3347", | |
| "publisherId": "alefragnani.project-manager", | |
| "publisherDisplayName": "alefragnani" | |
| }, | |
| "name": "project-manager", | |
| "publisher": "alefragnani", | |
| "version": "10.5.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "00cfa340-31e6-4b15-a019-d5d7337b4391", | |
| "publisherId": "vilicvane.sensitive-replace", | |
| "publisherDisplayName": "vilicvane" | |
| }, | |
| "name": "sensitive-replace", | |
| "publisher": "vilicvane", | |
| "version": "0.1.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "261cac81-cd7b-4555-bb41-0c2d2bcd3e70", | |
| "publisherId": "Gruntfuggly.todo-tree", | |
| "publisherDisplayName": "Gruntfuggly" | |
| }, | |
| "name": "todo-tree", | |
| "publisher": "Gruntfuggly", | |
| "version": "0.0.132" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "6623619a-676d-4cde-943f-a3c193b44fc0", | |
| "publisherId": "ChakrounAnas.turbo-console-log", | |
| "publisherDisplayName": "ChakrounAnas" | |
| }, | |
| "name": "turbo-console-log", | |
| "publisher": "ChakrounAnas", | |
| "version": "1.2.18" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "de44183f-5377-4ceb-ac15-79364a30070c", | |
| "publisherId": "apollographql.vscode-apollo", | |
| "publisherDisplayName": "apollographql" | |
| }, | |
| "name": "vscode-apollo", | |
| "publisher": "apollographql", | |
| "version": "1.6.9" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "583b2b34-2c1e-4634-8c0b-0b82e283ea3a", | |
| "publisherId": "dbaeumer.vscode-eslint", | |
| "publisherDisplayName": "dbaeumer" | |
| }, | |
| "name": "vscode-eslint", | |
| "publisher": "dbaeumer", | |
| "version": "1.9.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "c727ab43-8d12-4f26-9648-f1d91035c9b6", | |
| "publisherId": "NuclleaR.vscode-extension-auto-import", | |
| "publisherDisplayName": "NuclleaR" | |
| }, | |
| "name": "vscode-extension-auto-import", | |
| "publisher": "NuclleaR", | |
| "version": "1.4.3" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "d637104e-1fd7-4063-98fc-8afe46012c9b", | |
| "publisherId": "sleistner.vscode-fileutils", | |
| "publisherDisplayName": "sleistner" | |
| }, | |
| "name": "vscode-fileutils", | |
| "publisher": "sleistner", | |
| "version": "2.13.7" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "55ef6448-487b-49a0-a66e-4d2d9bb82229", | |
| "publisherId": "Prisma.vscode-graphql", | |
| "publisherDisplayName": "Prisma" | |
| }, | |
| "name": "vscode-graphql", | |
| "publisher": "Prisma", | |
| "version": "0.1.7" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "7997a8ae-1fae-4022-b834-12f6318aeffd", | |
| "publisherId": "Orta.vscode-jest", | |
| "publisherDisplayName": "Orta" | |
| }, | |
| "name": "vscode-jest", | |
| "publisher": "Orta", | |
| "version": "2.9.2" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "69ddd764-339a-4ecc-97c1-9c4ece58e36d", | |
| "publisherId": "GitHub.vscode-pull-request-github", | |
| "publisherDisplayName": "GitHub" | |
| }, | |
| "name": "vscode-pull-request-github", | |
| "publisher": "GitHub", | |
| "version": "0.7.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "06cc3e44-aedb-41b8-a4ea-29ebf3c491fd", | |
| "publisherId": "jpoissonnier.vscode-styled-components", | |
| "publisherDisplayName": "jpoissonnier" | |
| }, | |
| "name": "vscode-styled-components", | |
| "publisher": "jpoissonnier", | |
| "version": "0.0.26" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "97a08c5f-6667-4242-a5c5-045dfb6bd4b9", | |
| "publisherId": "wayou.vscode-todo-highlight", | |
| "publisherDisplayName": "wayou" | |
| }, | |
| "name": "vscode-todo-highlight", | |
| "publisher": "wayou", | |
| "version": "1.0.4" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "07fc4a0a-11fc-4121-ba9a-f0d534c729d8", | |
| "publisherId": "pflannery.vscode-versionlens", | |
| "publisherDisplayName": "pflannery" | |
| }, | |
| "name": "vscode-versionlens", | |
| "publisher": "pflannery", | |
| "version": "0.23.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "5a6dc0d5-dc02-4121-8e24-cad33a2ff0af", | |
| "publisherId": "ms-vsliveshare.vsliveshare", | |
| "publisherDisplayName": "ms-vsliveshare" | |
| }, | |
| "name": "vsliveshare", | |
| "publisher": "ms-vsliveshare", | |
| "version": "1.0.249" | |
| } | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Empty |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Empty | |
| [ | |
| { | |
| "key": "shift+alt+cmd+z shift+", | |
| "command": "copyRelativeFilePath", | |
| "when": "!editorFocus" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "-copyRelativeFilePath", | |
| "when": "!editorFocus" | |
| }, | |
| { | |
| "key": "ctrl+shift+alt+cmd+c", | |
| "command": "workbench.action.terminal.openNativeConsole", | |
| "when": "!terminalFocus" | |
| }, | |
| { | |
| "key": "shift+cmd+c", | |
| "command": "-workbench.action.terminal.openNativeConsole", | |
| "when": "!terminalFocus" | |
| }, | |
| { | |
| "key": "shift+cmd+c", | |
| "command": "copyRelativeFilePath" | |
| }, | |
| { | |
| "key": "cmd+s", | |
| "command": "workbench.action.files.saveAll" | |
| }, | |
| { | |
| "key": "alt+cmd+s", | |
| "command": "-workbench.action.files.saveAll" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+s", | |
| "command": "workbench.action.files.save" | |
| }, | |
| { | |
| "key": "cmd+s", | |
| "command": "-workbench.action.files.save" | |
| }, | |
| { | |
| "key": "cmd+enter", | |
| "command": "extension.miramac.node.exec" | |
| }, | |
| { | |
| "key": "f8", | |
| "command": "-extension.miramac.node.exec" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "workbench.action.terminal.toggleFindCaseSensitive", | |
| "when": "terminalFindWidgetFocused" | |
| }, | |
| { | |
| "key": "alt+cmd+c", | |
| "command": "-workbench.action.terminal.toggleFindCaseSensitive", | |
| "when": "terminalFindWidgetFocused" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "toggleFindCaseSensitive", | |
| "when": "editorFocus" | |
| }, | |
| { | |
| "key": "alt+cmd+c", | |
| "command": "-toggleFindCaseSensitive", | |
| "when": "editorFocus" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "workbench.action.terminal.toggleFindCaseSensitiveTerminalFocus", | |
| "when": "terminalFocus" | |
| }, | |
| { | |
| "key": "alt+cmd+c", | |
| "command": "-workbench.action.terminal.toggleFindCaseSensitiveTerminalFocus", | |
| "when": "terminalFocus" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "toggleSearchCaseSensitive", | |
| "when": "searchViewletFocus && searchViewletVisible && !fileMatchOrFolderMatchFocus" | |
| }, | |
| { | |
| "key": "alt+cmd+c", | |
| "command": "-toggleSearchCaseSensitive", | |
| "when": "searchViewletFocus && searchViewletVisible && !fileMatchOrFolderMatchFocus" | |
| }, | |
| { | |
| "key": "ctrl+alt+c", | |
| "command": "turboConsoleLog.commentAllLogMessages" | |
| }, | |
| { | |
| "key": "shift+alt+c", | |
| "command": "-turboConsoleLog.commentAllLogMessages" | |
| } | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Place your settings in this file to overwrite the default settings | |
| { | |
| "typescript.validate.enable": false, | |
| "javascript.validate.enable": false, | |
| "javascript.format.enable": true, | |
| "psi-header.templates": [ | |
| { | |
| "language": "*", | |
| "template": [ | |
| " Copyright (c) 2018-present, GM Cruise LLC", | |
| " This source code is licensed under the Apache License, Version 2.0,", | |
| " found in the LICENSE file in the root directory of this source tree.", | |
| " You may not use this file except in compliance with the License." | |
| ] | |
| } | |
| ], | |
| "editor.codeActionsOnSave": { | |
| "source.organizeImports": true | |
| }, | |
| "cSpell.ignoreWords": [ | |
| "webviz", | |
| "frameless", | |
| "overfade", | |
| "liveshare", | |
| "gitlens", | |
| "datatypes", | |
| "nsec", | |
| "contentful", | |
| "promisify", | |
| "datadog", | |
| "Kubernetes", | |
| "kubectl", | |
| "rmfr", | |
| "AIRAVATA", | |
| "workspace", | |
| "workspaces", | |
| "Raycast", | |
| "pointclouds", | |
| "lerna" | |
| ], | |
| "cSpell.enabledLanguageIds": [ | |
| "asciidoc", | |
| "c", | |
| "cpp", | |
| "csharp", | |
| "css", | |
| "go", | |
| "handlebars", | |
| "html", | |
| "jade", | |
| "java", | |
| "javascript", | |
| "javascriptreact", | |
| "json", | |
| "jsonc", | |
| "latex", | |
| "less", | |
| "markdown", | |
| "php", | |
| "plaintext", | |
| "pug", | |
| "python", | |
| "restructuredtext", | |
| "rust", | |
| "scala", | |
| "scss", | |
| "text", | |
| "typescript", | |
| "typescriptreact", | |
| "yaml", | |
| "yml" | |
| ], | |
| "licenseInjector.ignore": "node_modules,bin,css,md", | |
| "licenseInjector.owner": "Cruise Automation", | |
| "licenser.customHeader": " Copyright (c) 2018-present, GM Cruise LLC\n\n This source code is licensed under the Apache License, Version 2.0,\n found in the LICENSE file in the root directory of this source tree.\n You may not use this file except in compliance with the License.", | |
| "editor.fontSize": 12, | |
| "editor.letterSpacing": -0.2, | |
| "workbench.colorTheme": "Monokai", | |
| "files.trimTrailingWhitespace": true, | |
| "editor.minimap.enabled": false, | |
| "workbench.activityBar.visible": true, | |
| "files.insertFinalNewline": true, | |
| "editor.rulers": [100], | |
| "terminal.integrated.fontSize": 11, | |
| "editor.renderIndentGuides": false, | |
| "editor.renderLineHighlight": "gutter", | |
| "editor.minimap.maxColumn": 30, | |
| "editor.minimap.showSlider": "always", | |
| "editor.tokenColorCustomizations": { | |
| // "textMateRules": [ | |
| // { | |
| // "scope": "variable.other", | |
| // "settings": { | |
| // "foreground": "#7D9AA6" | |
| // } | |
| // } | |
| // ] | |
| }, | |
| "window.zoomLevel": 0, | |
| "workbench.startupEditor": "newUntitledFile", | |
| // "prettier.singleQuote": true, | |
| // "prettier.arrowParens": "always", | |
| // "prettier.trailingComma": "es5", | |
| "prettier.disableLanguages": ["yaml"], | |
| "files.associations": { | |
| "*.BUILD": "python", | |
| "Dockerfile.*": "dockerfile", | |
| "*.mdx": "markdown", | |
| "*.tsx": "typescript", | |
| "*.ts": "typescript", | |
| "*.js": "javascript" | |
| }, | |
| "[cpp]": { | |
| "editor.formatOnSave": true | |
| }, | |
| "files.exclude": { | |
| "**/*.pyc": true | |
| }, | |
| "gitlens.advanced.messages": { | |
| "suppressShowKeyBindingsNotice": true | |
| }, | |
| "gitlens.codeLens.enabled": false, | |
| "gitlens.currentLine.enabled": false, | |
| "sync.gist": "5b446f12a31575d7b6feb2c301ffcf14", | |
| "sync.quietSync": false, | |
| "sync.removeExtensions": true, | |
| "sync.syncExtensions": true, | |
| "sync.autoDownload": false, | |
| "sync.autoUpload": false, | |
| "sync.forceDownload": false, | |
| "editor.formatOnSave": true, | |
| "terminal.integrated.rendererType": "dom", | |
| // "prettier.eslintIntegration": true, | |
| "liveshare.audio.joinCallBehavior": "accept", | |
| // "javascript.updateImportsOnFileMove.enabled": "always", | |
| "flow.useNPMPackagedFlow": true, | |
| "javascript.updateImportsOnFileMove.enabled": "always", | |
| "editor.largeFileOptimizations": false, | |
| // "eslint.options": { | |
| // "configFile": "/Users/ali/cruise/webviz/oss-webviz/.eslintrc.js" | |
| // }, | |
| "typescript.updateImportsOnFileMove.enabled": "always", | |
| "breadcrumbs.enabled": true, | |
| "extensions.autoUpdate": true, | |
| "todo-tree.tags": [ | |
| "TODO", | |
| "FIXME", | |
| "extract the component into separate file" | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| /* | |
| // Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and | |
| // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
| // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the | |
| // same ids are connected. | |
| // Example: | |
| "Print to console": { | |
| "prefix": "log", | |
| "body": [ | |
| "console.log('$1');", | |
| "$2" | |
| ], | |
| "description": "Log output to console" | |
| } | |
| */ | |
| /************Latest version************************/ | |
| /**************************************************/ | |
| /**************************************************/ | |
| /************Require************************/ | |
| "imChassisTopic": { | |
| "prefix": "imChassisTopic", | |
| "body": ["import { CHASSIS_TOPIC } from 'client/util/cruiseConstants';"], | |
| "description": "imChassisTopic" | |
| }, | |
| "sobstacleMarkers": { | |
| "prefix": "sobstacleMarkers", | |
| "body": [ | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 8, y: 8, z: 8 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );" | |
| ], | |
| "description": "sobstacleMarkers" | |
| }, | |
| "sspeed": { | |
| "prefix": "sspeed", | |
| "body": [ | |
| "const speed = 1 / 50;" | |
| ], | |
| "description": "sspeed" | |
| }, | |
| "s1Example": { | |
| "prefix": "s1Example", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return <Worldview>{/* MORE CODE... */}</Worldview>;", | |
| "}", | |
| "" | |
| ], | |
| "description": "s1Example" | |
| }, | |
| "sonclickCubes1": { | |
| "prefix": "sonclickCubes1", | |
| "body": [ | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " }}" | |
| ], | |
| "description": "sonclickCubes1" | |
| }, | |
| "sonclickSphere1": { | |
| "prefix": "sonclickSphere1", | |
| "body": [ | |
| " onClick={(ev, { objectId }) => {", | |
| " setClickedObjectIds([...clickedObjectIds, objectId]);", | |
| " }}" | |
| ], | |
| "description": "sonclickSphere1" | |
| }, | |
| "sClickedObjectIds": { | |
| "prefix": "sClickedObjectIds", | |
| "body": [ | |
| "const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);" | |
| ], | |
| "description": "sClickedObjectIds" | |
| }, | |
| "starget": { | |
| "prefix": "starget", | |
| "body": [ | |
| "target: [duckPosition.x, duckPosition.y, duckPosition.z]" | |
| ], | |
| "description": "starget" | |
| }, | |
| "sscale": { | |
| "prefix": "sscale", | |
| "body": [ | |
| "scale: { x: 1, y: 1, z: 1 }," | |
| ], | |
| "description": "sscale" | |
| }, | |
| "s100vw": { | |
| "prefix": "s100vw", | |
| "body": [ | |
| "style={{ width: \"100vw\", height: \"100vh\" }}" | |
| ], | |
| "description": "s100vw" | |
| }, | |
| "s1Triangle": { | |
| "prefix": "s1Triangle", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Triangles, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return (", | |
| " <Worldview>", | |
| " <Triangles>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " points: [[0, 0, 0], [10, 20, 0], [-11, -20, 30]],", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " // colors: [[1, 0, 0.5, 1], [0, 1, 1, 1], [1, 1, 0, 1]]", | |
| " }", | |
| " ]}", | |
| " </Triangles>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s1Triangle" | |
| }, | |
| "s2CubeAndText": { | |
| "prefix": "s2CubeAndText", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Cubes, Text, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return (", | |
| " <Worldview>", | |
| " <Cubes>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " }", | |
| " ]}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " <Text>", | |
| " {[", | |
| " {", | |
| " text: \"Hello, Worldview! \",", | |
| " color: { r: 1, g: 1, b: 1, a: 1 },", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 5, z: 10 }", | |
| " },", | |
| " }", | |
| " ]}", | |
| " </Text>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s2CubeAndText" | |
| }, | |
| "s3ColorfulKnot": { | |
| "prefix": "s3ColorfulKnot", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Spheres, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarkers = new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .map(([x, y, z], idx) => ({", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 20 * x, y: 20 * y, z: 20 * z }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " color: numberToColor(idx, steps)", | |
| " }));", | |
| "", | |
| " return (", | |
| " <Worldview>", | |
| " <Spheres>{sphereMarkers}</Spheres>", | |
| " <Axes />", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s3ColorfulKnot" | |
| }, | |
| "s4InstancedRendering": { | |
| "prefix": "s4InstancedRendering", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Spheres, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " return (", | |
| " <Worldview>", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s4InstancedRendering" | |
| }, | |
| "s5MoveCamera": { | |
| "prefix": "s5MoveCamera", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const speed = 1 / 50;", | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " thetaOffset: count * speed,", | |
| " phi: count * speed", | |
| " }}", | |
| " >", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s5MoveCamera" | |
| }, | |
| "s6FollowObject": { | |
| "prefix": "s6FollowObject", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160,", | |
| " target: [duckPosition.x, duckPosition.y, duckPosition.z]", | |
| " }}", | |
| " >", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s6FollowObject" | |
| }, | |
| "s7.1MeetObstacles": { | |
| "prefix": "s7.1MeetObstacles", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " Cubes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);", | |
| " const [count, setCount] = React.useState(0);", | |
| "", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " id: 1001,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 2, y: 2, z: 2 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 4, y: 4, z: 4 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );", | |
| "", | |
| " // make the duck stop???", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " defaultCameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160", | |
| " }}", | |
| " >", | |
| " <Spheres", | |
| " onClick={(ev, { objectId }) =>", | |
| " setClickedObjectIds([...clickedObjectIds, objectId])", | |
| " }", | |
| " >", | |
| " {[sphereMarker]}", | |
| " </Spheres>", | |
| " <Cubes", | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " }}", | |
| " >", | |
| " {obstacleMarkers}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s7.1MeetObstacles" | |
| }, | |
| "s7.2MeetObstacles": { | |
| "prefix": "s7.2MeetObstacles", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " Cubes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [count, setCount] = React.useState(0);", | |
| " const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);", | |
| " const [shouldStopDuck, setShouldStopDuck] = React.useState(false);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " shouldStopDuck,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " id: 1001,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 2, y: 2, z: 2 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 8, y: 8, z: 8 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );", | |
| " // make the duck stop", | |
| " React.useEffect(() => {", | |
| " const duckPositionId = sphereMarker.id + count;", | |
| " if (!shouldStopDuck && clickedObjectIds.includes(duckPositionId)) {", | |
| " setShouldStopDuck(true);", | |
| " }", | |
| " }, [clickedObjectIds, shouldStopDuck, count, sphereMarker.id]);", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " defaultCameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 120", | |
| " }}", | |
| " >", | |
| " <Spheres", | |
| " onClick={(ev, { objectId }) =>", | |
| " setClickedObjectIds([...clickedObjectIds, objectId])", | |
| " }", | |
| " >", | |
| " {[sphereMarker]}", | |
| " </Spheres>", | |
| " <Cubes", | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " setShouldStopDuck(false);", | |
| " }}", | |
| " >", | |
| " {obstacleMarkers}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 5, y: 5, z: 5 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s7.2MeetObstacles" | |
| }, | |
| "sstopDuck": { | |
| "prefix": "sstopDuck", | |
| "body": [ | |
| " // make the duck stop", | |
| " React.useEffect(() => {", | |
| " const duckPositionId = sphereMarker.id + count;", | |
| " if (!shouldStopDuck && clickedObjectIds.includes(duckPositionId)) {", | |
| " setShouldStopDuck(true);", | |
| " }", | |
| " }, [clickedObjectIds, shouldStopDuck, count, sphereMarker.id]);" | |
| ], | |
| "description": "sstopDuck" | |
| }, | |
| "suseAnim1": { | |
| "prefix": "suseAnim1", | |
| "body": [ | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );" | |
| ], | |
| "description": "suseAnim1" | |
| }, | |
| "scameraStateTarget ": { | |
| "prefix": "scameraStateTarget", | |
| "body": [ | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160,", | |
| " target: [duckPosition.x, duckPosition.y, duckPosition.z]", | |
| " }}" | |
| ], | |
| "description": "scameraStateTarget " | |
| }, | |
| "scameraState": { | |
| "prefix": "scameraState", | |
| "body": [ | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " thetaOffset: count,", | |
| " phi: count", | |
| " }}" | |
| ], | |
| "description": "scameraState" | |
| }, | |
| "suseAnimation": { | |
| "prefix": "suseAnimation", | |
| "body": [ | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "" | |
| ], | |
| "description": "suseAnimation" | |
| }, | |
| "sduck": { | |
| "prefix": "sduck", | |
| "body": [ | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 }", | |
| " }}", | |
| " </GLTFScene>" | |
| ], | |
| "description": "sduck" | |
| }, | |
| "ssphereMarkersInstanced": { | |
| "prefix": "ssphereMarkersInstanced", | |
| "body": [ | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });" | |
| ], | |
| "description": "ssphereMarkersInstanced" | |
| }, | |
| "ssphereMarkers": { | |
| "prefix": "ssphereMarkers", | |
| "body": [ | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarkers = new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .map(([x, y, z], idx) => ({", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 20 * x, y: 20 * y, z: 20 * z }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " color: numberToColor(idx, steps)", | |
| " }));" | |
| ], | |
| "description": "ssphereMarkers" | |
| }, | |
| "snumberToColor": { | |
| "prefix": "snumberToColor", | |
| "body": [ | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }" | |
| ], | |
| "description": "snumberToColor" | |
| }, | |
| "imreact": { | |
| "prefix": "imreact", | |
| "body": [ | |
| "import React from \"react\";" | |
| ], | |
| "description": "imreact" | |
| }, | |
| "striangle": { | |
| "prefix": "striangle", | |
| "body": [ | |
| "<Triangles>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " points: [[0, 0, 0], [10, 20, 0], [-11, -20, 30]],", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " // colors: [[1, 0, 0.5, 1], [0, 1, 1, 1], [1, 1, 0, 1]]", | |
| " }", | |
| " ]}", | |
| " </Triangles>" | |
| ], | |
| "description": "striangle" | |
| }, | |
| "imworld": { | |
| "prefix": "imworld", | |
| "body": [ | |
| "import { Axes, Cubes, Text, Worldview } from \"regl-worldview\";" | |
| ], | |
| "description": "imworld" | |
| }, | |
| "stext": { | |
| "prefix": "stext", | |
| "body": [ | |
| " <Text>", | |
| " {[", | |
| " {", | |
| " text: \"Hello, Worldview! \",", | |
| " color: { r: 1, g: 1, b: 1, a: 1 },", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 5, z: 10 }", | |
| " },", | |
| " }", | |
| " ]}", | |
| " </Text>" | |
| ], | |
| "description": "stext" | |
| }, | |
| "scubes": { | |
| "prefix": "scubes", | |
| "body": [ | |
| " <Cubes>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " }", | |
| " ]}", | |
| " </Cubes>" | |
| ], | |
| "description": "scubes" | |
| }, | |
| "pose...": { | |
| "prefix": "pose...", | |
| "body": [ | |
| "pose: { position: { x: 0, y: 0, z: 0 }, orientation: { x: 0, y: 0, z: 0, w: 1 },}," | |
| ], | |
| "description": "pose..." | |
| }, | |
| "re-compose": { | |
| "prefix": "re-compose", | |
| "body": [ | |
| "import { compose } from 'recompose';" | |
| ], | |
| "description": "re-compose" | |
| }, | |
| "ex-withXDPData": { | |
| "prefix": "ex-withXDPData", | |
| "body": [ | |
| " withXDPData(({apiData: { name }}) => ({name}))," | |
| ], | |
| "description": "ex-withXDPData" | |
| }, | |
| "re-withXDPData": { | |
| "prefix": "re-withXDPData", | |
| "body": [ | |
| "import withXDPData from 'src/components/shared/withXDPData';" | |
| ], | |
| "description": "re-withXDPData" | |
| }, | |
| "re-prop-types": { | |
| "prefix": "re-prop-types", | |
| "body": [ | |
| "import PropTypes from 'prop-types';" | |
| ], | |
| "description": "re-prop-types" | |
| }, | |
| "rcn": { | |
| "prefix": "rcn", | |
| "body": [ | |
| "rootClassName=\"${1:m-b-2}\"" | |
| ], | |
| "description": "rcn" | |
| }, | |
| "re-apiStatusType": { | |
| "prefix": "re-apiStatusType", | |
| "body": [ | |
| "import type { ApiStatus as ApiStatusType } from '@coursera/coursera-ui/constants/sharedType';" | |
| ], | |
| "description": "re-apiStatusType" | |
| }, | |
| "re-Jsuri": { | |
| "prefix": "re-Jsuri", | |
| "body": [ | |
| "import Uri from 'jsuri';" | |
| ], | |
| "description": "re-Jsuri" | |
| }, | |
| "re-connectRedux": { | |
| "prefix": "re-connectRedux", | |
| "body": [ | |
| "import { connect } from 'react-redux';" | |
| ], | |
| "description": "re-connectRedux" | |
| }, | |
| "re-react": { | |
| "prefix": "re-react", | |
| "body": [ | |
| "import * as React from 'react';" | |
| ], | |
| "description": "re-react" | |
| }, | |
| "re-info": { | |
| "prefix": "re-info", | |
| "body": [ | |
| "import { withInfo } from '@storybook/addon-info';" | |
| ], | |
| "description": "re-info" | |
| }, | |
| "re-Modal-phoenix": { | |
| "prefix": "re-Modal-phoenix", | |
| "body": [ | |
| "import Modal from 'bundles/phoenix/components/Modal';" | |
| ], | |
| "description": "re-Modal-phoenix" | |
| }, | |
| "re-under": { | |
| "prefix": "re-under", | |
| "body": [ | |
| "import _ from 'underscore';" | |
| ], | |
| "description": "re-under" | |
| }, | |
| "recui": { | |
| "prefix": "recui", | |
| "body": [ | |
| "import { ${1:Box} } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "recui" | |
| }, | |
| "resharedTypes": { | |
| "prefix": "resharedTypes", | |
| "body": [ | |
| "import type { RootClassNameProp, HtmlAttributesProp, StyleProp } from 'src/constants/sharedTypes';", | |
| "type Props = {", | |
| "htmlAttributes?: HtmlAttributesProp,", | |
| "rootClassName?: RootClassNameProp,", | |
| "style?: StyleProp,", | |
| "children?: React.Node,", | |
| "};" | |
| ], | |
| "description": "resharedTypes" | |
| }, | |
| "reLoading": { | |
| "prefix": "reLoading", | |
| "body": [ | |
| "import Loading from 'bundles/coursera-ui/components/coursera/Loading';" | |
| ], | |
| "description": "reLoading" | |
| }, | |
| "reWithApiHandler": { | |
| "prefix": "reWithApiHandler", | |
| "body": [ | |
| "import withApiHandler from 'bundles/coursera-ui/components/hocs/withApiHandler';" | |
| ], | |
| "description": "reWithApiHandler" | |
| }, | |
| "re-recompose": { | |
| "prefix": "re-recompose", | |
| "body": [ | |
| "import { pure, compose, withState, withProps, withHandlers } from 'recompose';" | |
| ], | |
| "description": "re-recompose" | |
| }, | |
| "re-gql-recompose": { | |
| "prefix": "re-gql-recompose", | |
| "body": [ | |
| "import{ compose, withState, withHandlers} from 'recompose';", | |
| "import{ graphql, withApollo } from 'react-apollo';", | |
| "import gql from 'graphql-tag';" | |
| ], | |
| "description": "re-gql-recompose" | |
| }, | |
| "recui-validationUtil": { | |
| "prefix": "recui-validationUtil", | |
| "body": [ | |
| "import { required, minLength, maxLength } from '@coursera/coursera-ui/lib/utils/validation';" | |
| ], | |
| "description": "recui-validationUtil" | |
| }, | |
| "re-styled": { | |
| "prefix": "re-styled", | |
| "body": [ | |
| "import styled from 'styled-components';" | |
| ], | |
| "description": "re-styled" | |
| }, | |
| "recui-apiStatus": { | |
| "prefix": "recui-apiStatus", | |
| "body": [ | |
| "import {API_BEFORE_SEND} from 'bundles/coursera-ui/constants/apiNotificationConstants'" | |
| ], | |
| "description": "recui-apiStatus" | |
| }, | |
| "re-deferToClientSideRender": { | |
| "prefix": "re-deferToClientSideRender", | |
| "body": [ | |
| "import deferToClientSideRender from 'js/lib/deferToClientSideRender';" | |
| ], | |
| "description": "re-deferToClientSideRender" | |
| }, | |
| "re-redirect": { | |
| "prefix": "re-redirect", | |
| "body": [ | |
| "import redirect from 'js/lib/coursera.redirect';", | |
| "redirect.setLocation('/${1}')" | |
| ], | |
| "description": "re-redirect" | |
| }, | |
| "re-TypeApiStatus": { | |
| "prefix": "re-TypeApiStatus", | |
| "body": [ | |
| "import type { ApiStatus } from 'bundles/program-common/flowTypes/programCommon';" | |
| ], | |
| "description": "re-TypeApiStatus" | |
| }, | |
| "re-trans": { | |
| "prefix": "re-trans", | |
| "body": [ | |
| "import _t from 'i18n!nls/${1:admin-dashboard}';" | |
| ], | |
| "description": "re-trans" | |
| }, | |
| "re-demoblocks": { | |
| "prefix": "re-demoblocks", | |
| "body": [ | |
| " import {", | |
| " DemoCodeBlock,", | |
| " DemoBlock,", | |
| " DemoHowBlock,", | |
| " DemoThemeContainer,", | |
| " DemoStoryContainer,", | |
| " } from 'src/stories/support/DemoBlocks';" | |
| ], | |
| "description": "re-demoblocks" | |
| }, | |
| "re-cui": { | |
| "prefix": "re-cui", | |
| "body": [ | |
| "import { ${1:Stylesheet, css} } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "re-cui" | |
| }, | |
| "re-cui-simple": { | |
| "prefix": "re-cui-simple", | |
| "body": [ | |
| "import { css, StyleSheet, Container } from '@coursera/coursera-ui';", | |
| "", | |
| "const styles = StyleSheet.create({", | |
| " ${1:ProgramAvailableList}: {},", | |
| "});" | |
| ], | |
| "description": "re-cui-simple" | |
| }, | |
| "re-routerLink": { | |
| "prefix": "re-routerLink", | |
| "body": [ | |
| "import { Link } from 'react-router-dom';" | |
| ], | |
| "description": "re-routerLink" | |
| }, | |
| "re-routerDom": { | |
| "prefix": "re-routerDom", | |
| "body": [ | |
| " import {", | |
| " BrowserRouter as Router,", | |
| " Route,", | |
| " Link", | |
| " } from 'react-router-dom';" | |
| ], | |
| "description": "re-routerDom" | |
| }, | |
| "re-imgix": { | |
| "prefix": "re-imgix", | |
| "body": [ | |
| " import Imgix from 'js/components/Imgix';", | |
| " import imgixParams from 'bundles/page/common/imgixParams';", | |
| " imgParams={imgixParams.fillWithWhiteBackground}" | |
| ], | |
| "description": "re-imgix" | |
| }, | |
| "re-imgix-full": { | |
| "prefix": "re-imgix-full", | |
| "body": [ | |
| " import Imgix from 'js/components/Imgix';", | |
| " import imgixParams from 'bundles/page/common/imgixParams';", | |
| " <Imgix", | |
| " src={imgSrc}", | |
| " alt={Imgix.DECORATIVE}", | |
| " width={80}", | |
| " height={80}", | |
| " imgParams={imgixParams.fillWithWhiteBackground}", | |
| " />" | |
| ], | |
| "description": "re-imgix-full" | |
| }, | |
| "req-config-asset": { | |
| "prefix": "req-config-asset", | |
| "body": [ | |
| " import config from 'js/app/config';", | |
| " const imagePath = `${config.url.assets}images/program-home/`;" | |
| ], | |
| "description": "req-config-asset" | |
| }, | |
| "re-user": { | |
| "prefix": "re-user", | |
| "body": [ | |
| "import user from 'js/lib/user';", | |
| "user.get().id" | |
| ], | |
| "description": "re-user" | |
| }, | |
| "re-user-full": { | |
| "prefix": "re-user-full", | |
| "body": [ | |
| "import user from 'js/lib/user';", | |
| "user.get().id", | |
| "user.get().email_address", | |
| "user.isAuthenticatedUser()", | |
| "user.isSuperuser()" | |
| ], | |
| "description": "re-user-full" | |
| }, | |
| "reBranching-full": { | |
| "prefix": "reBranching-full", | |
| "body": [ | |
| " import { withSSRPlaceholder } from 'bundles/coursera-ui/components/hocs/withBranches';", | |
| " import withIsMounted from 'bundles/coursera-ui/components/hocs/withIsMounted';", | |
| " const CourseCard = () => <div><h1>Dummy Course Card</h1></div>;", | |
| " const CourseCardPlaceholder = () => <div><h1>Course Card SSR Placeholder</h1></div>;", | |
| " const CourseCardWithSSRPlaceholderBranch = _.compose(", | |
| " withIsMounted,", | |
| " withSSRPlaceholder(CourseCardPlaceholder),", | |
| " )(CourseCard);", | |
| "", | |
| " <CourseCardWithSSRPlaceholderBranch isCSROnly />" | |
| ], | |
| "description": "reBranching-full" | |
| }, | |
| "re-button": { | |
| "prefix": "re-button", | |
| "body": [ | |
| "import { Button } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "re-button" | |
| }, | |
| "re-tupleToStringKey": { | |
| "prefix": "re-tupleToStringKey", | |
| "body": [ | |
| "import { tupleToStringKey } from 'js/lib/stringKeyTuple';" | |
| ], | |
| "description": "re-tupleToStringKey" | |
| }, | |
| "re-withRenderNothing": { | |
| "prefix": "re-withRenderNothing", | |
| "body": [ | |
| "import { withRenderNothing } from 'bundles/coursera-ui/components/hocs/withBranches';", | |
| "" | |
| ], | |
| "description": "re-withRenderNothing" | |
| }, | |
| "re-ApiButton": { | |
| "prefix": "re-ApiButton", | |
| "body": [ | |
| "import ApiButton, { apiStatusPropType, errorPropType } from", | |
| " 'bundles/coursera-ui/components/basic/ApiButton';" | |
| ], | |
| "description": "re-ApiButton" | |
| }, | |
| "re-svg": { | |
| "prefix": "re-svg", | |
| "body": [ | |
| "import {${1:SvgEdit}} from 'src/svg'" | |
| ], | |
| "description": "re-svg" | |
| }, | |
| "re-ErrorMessage": { | |
| "prefix": "re-ErrorMessage", | |
| "body": [ | |
| "import ErrorMessage from 'bundles/coursera-ui/components/extended/ErrorMessage';" | |
| ], | |
| "description": "re-ErrorMessage" | |
| }, | |
| "re-formattedMessage": { | |
| "prefix": "re-formattedMessage", | |
| "body": [ | |
| "import { FormattedMessage } from 'js/lib/coursera.react-intl';" | |
| ], | |
| "description": "re-formattedMessage" | |
| }, | |
| "re-graphql-all": { | |
| "prefix": "re-graphql-all", | |
| "body": [ | |
| "import gql from 'graphql-tag';", | |
| "import { graphql } from 'react-apollo';", | |
| "import { naptime } from '@coursera/graphql-utils';" | |
| ], | |
| "description": "re-graphql-all" | |
| }, | |
| "re-recompose-common": { | |
| "prefix": "re-recompose-common", | |
| "body": [ | |
| "import { compose, withState, withHandlers, setDisplayName } from 'recompose';" | |
| ], | |
| "description": "re-recompose-common" | |
| }, | |
| /************Common************************/ | |
| "getTrans": { | |
| "prefix": "getTrans", | |
| "body": [ | |
| "function getTranslations(){", | |
| "return {${1}};", | |
| "}" | |
| ], | |
| "description": "getTrans" | |
| }, | |
| "getTransT": { | |
| "prefix": "getTransT", | |
| "body": [ | |
| "const _T = getTranslations():" | |
| ], | |
| "description": "getTransT" | |
| }, | |
| "stylesAphrodite": { | |
| "prefix": "stylesAphrodite", | |
| "body": [ | |
| "const styles = StyleSheet.create({});" | |
| ], | |
| "description": "stylesAphrodite" | |
| }, | |
| "style-bgImage": { | |
| "prefix": "style-bgImage", | |
| "body": [ | |
| "style={{ backgroundImage: `url(\"${image}\")` }}" | |
| ], | |
| "description": "style-bgImage" | |
| }, | |
| "style-media": { | |
| "prefix": "style-media", | |
| "body": [ | |
| "[`@media (max-width: ${breakPoint.sm}px)`]: {", | |
| " marginBottom: spacing.md,", | |
| " }," | |
| ], | |
| "description": "style-media" | |
| }, | |
| "lorem-pixel": { | |
| "prefix": "lorem-pixel", | |
| "body": [ | |
| "http://placehold.it/${1:600x400}/A66506/FFFFFF" | |
| ], | |
| "description": "lorem-pixel" | |
| }, | |
| "placeholderit": { | |
| "prefix": "placeholderit", | |
| "body": [ | |
| "http://placehold.it/${1:600x400}/A66506/FFFFFF" | |
| ], | |
| "description": "placeholderit" | |
| }, | |
| "e.preventDefault_window": { | |
| "prefix": "e.preventDefault_window", | |
| "body": [ | |
| "if (e && e.stopPropagation){", | |
| "e.stopPropagation();", | |
| "} else if (window.event){", | |
| "window.event.cancelBubble = true;", | |
| "}" | |
| ], | |
| "description": "e.preventDefault" | |
| }, | |
| "img-placeholderit": { | |
| "prefix": "img-placeholderit", | |
| "body": [ | |
| "<img src=\" //placehold.it/${1:600x400}/A66506/FFFFFF\" alt=\"${2:CourseraAlt}\" />" | |
| ], | |
| "description": "img-placeholderit" | |
| }, | |
| "img-placeholderit-avatar": { | |
| "prefix": "img-placeholderit-avatar", | |
| "body": [ | |
| "<img src=\"https://s3.amazonaws.com/uifaces/faces/twitter/aiiaiiaii/128.jpg\" alt=\"${2:CourseraAlt}\" />" | |
| ], | |
| "description": "img-placeholderit-avatar" | |
| }, | |
| "img-lorem": { | |
| "prefix": "img-lorem", | |
| "body": [ | |
| " <img src=\"http://lorempixel.com/${1:400}/${2:200}/${3:city/}\" alt=\"${4:CourseraAlt}\" />" | |
| ], | |
| "description": "img-lorem" | |
| }, | |
| /******CUI************************/ | |
| "cuii": { | |
| "prefix": "cuii", | |
| "body": [ | |
| "\"@coursera/coursera-ui\"" | |
| ], | |
| "description": "cuii" | |
| }, | |
| "cuiisvg": { | |
| "prefix": "cuiisvg", | |
| "body": [ | |
| "\"@coursera/coursera-ui/svg\"" | |
| ], | |
| "description": "cuiisvg" | |
| }, | |
| "cui-ApiButton": { | |
| "prefix": "cui-ApiButton", | |
| "body": [ | |
| "<ApiButton", | |
| " type=\"primary\"", | |
| " onClick={onClick}", | |
| " apiStatus={apiStatus}", | |
| " apiStatusAttributesConfig={{", | |
| " label: {", | |
| " API_BEFORE_SEND: _t('Enroll'),", | |
| " API_IN_PROGRESS: _t('Enrolling...'),", | |
| " API_SUCCESS: _t('Enrolled'),", | |
| " API_ERROR: _t('Failed'),", | |
| " }", | |
| " }}", | |
| " />" | |
| ], | |
| "description": "cui-ApiButton" | |
| }, | |
| "cui-ErrorMessage": { | |
| "prefix": "cui-ErrorMessage", | |
| "body": [ | |
| " const DEFAULT_ERROR_MSG = _t('Error ${1:sending email}, please try again later');", | |
| " {error && <ErrorMessage error={error} defaultErrorMsg={DEFAULT_ERROR_MSG} />}" | |
| ], | |
| "description": "cui-ErrorMessage" | |
| }, | |
| "cui-button-link": { | |
| "prefix": "cui-button-link", | |
| "body": [ | |
| " <Button", | |
| " type=\"secondary\"", | |
| " tag=\"a\"", | |
| " size=\"sm\"", | |
| " label={_t('Preview')}", | |
| " style={{marginRight: spacing.md}}", | |
| " htmlAttributes={{", | |
| " href: this._programHomeLink,", | |
| " target: '_blank',", | |
| " rel: 'noopener noreferrer'", | |
| " }}", | |
| " />" | |
| ], | |
| "description": "cui-button-link" | |
| }, | |
| "cui-button": { | |
| "prefix": "cui-button", | |
| "body": [ | |
| "<Button type=\"primary\" label={${1:_t('Preview')}} onClick={onClick}" | |
| ], | |
| "description": "cui-button" | |
| }, | |
| "storySimple": { | |
| "prefix": "storySimple", | |
| "body": [ | |
| "import * as React from 'react';", | |
| "import{ storiesOf } from '@storybook/react';", | |
| "import{ withInfo } from '@storybook/addon-info';", | |
| "", | |
| "import{ Pill } from 'src';", | |
| "import PillDemo from 'src/stories/support/PillDemo';", | |
| "", | |
| "storiesOf('basic.Pill', module).add('Pill', withInfo({ propTables: [Pill]})(() => <PillDemo />));" | |
| ], | |
| "description": "storySimple" | |
| }, | |
| "storyPrototype": { | |
| "prefix": "storyPrototype", | |
| "body": [ | |
| "import * as React from 'react';", | |
| "import { storiesOf } from '@storybook/react';", | |
| "import Scholarships from 'src/components/prototypes/scholarships/Scholarships';", | |
| "storiesOf('prototypes', module).add('Scholarships', () => <Scholarships />);" | |
| ], | |
| "description": "storyPrototype" | |
| }, | |
| /*************React***********************/ | |
| "divCss": { | |
| "prefix": "divCss", | |
| "body": [ | |
| " <div {...css(styles.${1:selectizeContainer})}>", | |
| " ${2:}", | |
| " </div>" | |
| ], | |
| "description": "divCss" | |
| }, | |
| "formattedMessage-dataSize": { | |
| "prefix": "formattedMessage-dataSize", | |
| "body": [ | |
| "<FormattedMessage", | |
| " message={_t(`Delete {dataSize}", | |
| " {dataSize, plural, =1 {person} other {people}}?", | |
| " `)}", | |
| " dataSize={dataSize}", | |
| " />" | |
| ], | |
| "description": "formattedMessage-dataSize" | |
| }, | |
| "formattedHTMLMessage": { | |
| "prefix": "formattedHTMLMessage", | |
| "body": [ | |
| " <FormattedHTMLMessage", | |
| " message={_t(`", | |
| " We have not yet launched in your country. Please", | |
| " <a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\">fill this form</a>", | |
| " to contact sales.", | |
| " `)}", | |
| " link={REQUEST_DEMO_LINK}", | |
| " />" | |
| ], | |
| "description": "formattedHTMLMessage" | |
| }, | |
| "propRootClassName": { | |
| "prefix": "propRootClassName", | |
| "body": [ | |
| "rootClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object])," | |
| ], | |
| "description": "propRootClassName" | |
| }, | |
| "constructor-r": { | |
| "prefix": "constructor-r", | |
| "body": [ | |
| " constructor(props, context) {", | |
| " super(props, context);", | |
| " this.state = {", | |
| "", | |
| " };", | |
| " }" | |
| ], | |
| "description": "constructor-r" | |
| }, | |
| "setStateFn": { | |
| "prefix": "setStateFn", | |
| "body": [ | |
| "this.setState(() => ({{1:isDirty: false}}));" | |
| ], | |
| "description": "setStateFn" | |
| }, | |
| "rcc-stateless": { | |
| "prefix": "rcc-stateless", | |
| "body": [ | |
| "// @flow", | |
| "import React from 'react';", | |
| "", | |
| "type Props = {", | |
| " message: string,", | |
| "};", | |
| "// ToImplement(Audrey):", | |
| "export default function StepSelectPrograms(", | |
| " {", | |
| " message,", | |
| " }: Props", | |
| ") {", | |
| " return (", | |
| " <div>", | |
| " StepSelectPrograms{message}", | |
| " </div>", | |
| " );", | |
| "}" | |
| ], | |
| "description": "rcc-stateless" | |
| }, | |
| "ptHtmlAttributes": { | |
| "prefix": "ptHtmlAttributes", | |
| "body": [ | |
| "htmlAttributes?: { [htmlAttr: string]: string | number }," | |
| ], | |
| "description": "ptHtmlAttributes" | |
| }, | |
| "ptStyle": { | |
| "prefix": "ptStyle", | |
| "body": [ | |
| "style?: { [styleAttr: string]: string | number }," | |
| ], | |
| "description": "ptStyle" | |
| }, | |
| "ptRootClassName": { | |
| "prefix": "ptRootClassName", | |
| "body": [ | |
| "rootClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object])," | |
| ], | |
| "description": "ptRootClassName" | |
| }, | |
| "ptTag": { | |
| "prefix": "ptTag", | |
| "body": [ | |
| "tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])," | |
| ], | |
| "description": "ptTag" | |
| }, | |
| "demothemecontainer": { | |
| "prefix": "demothemecontainer", | |
| "body": [ | |
| "<DemoThemeContainer isThemeDark={isThemeDark}>", | |
| " ${1: ''}", | |
| "</DemoThemeContainer>" | |
| ], | |
| "description": "demothemecontainer" | |
| }, | |
| "demostorycontainer": { | |
| "prefix": "demostorycontainer", | |
| "body": [ | |
| "<DemoStoryContainer title=\"${1:Radio}\" description=\"${1:Radio} is used to...\">", | |
| " ${2:<GradientSelector />}", | |
| " </DemoStoryContainer>" | |
| ], | |
| "description": "demostorycontainer" | |
| }, | |
| "demoblock": { | |
| "prefix": "demoblock", | |
| "body": [ | |
| "<DemoBlock", | |
| " title=\"${1:RadioGroup}\"", | |
| " description=\"${2:Radio components wrapped inside RadioGroup}\"", | |
| " >", | |
| " ${3:}", | |
| " </DemoBlock>" | |
| ], | |
| "description": "demoblock" | |
| }, | |
| "demoCodeBlock": { | |
| "prefix": "demoCodeBlock", | |
| "body": [ | |
| " <DemoCodeBlock", | |
| " code={`", | |
| " ${1:}", | |
| " `}", | |
| " />" | |
| ], | |
| "description": "demoCodeBlock" | |
| }, | |
| "demoCodeBlockNoExpanding": { | |
| "prefix": "demoCodeBlockNoExpanding", | |
| "body": [ | |
| " <DemoCodeBlock", | |
| " noExpanding", | |
| " code={`", | |
| " ${1:}", | |
| " `}", | |
| " />" | |
| ], | |
| "description": "demoCodeBlockNoExpanding" | |
| }, | |
| "export-compose": { | |
| "prefix": "export-compose", | |
| "body": [ | |
| " export default compose(", | |
| " graphql(${1:ABCQuery}),", | |
| " mapProps((props) => {", | |
| " return props;", | |
| " })", | |
| " )(${2:CollectionItemSlider});" | |
| ], | |
| "description": "export-compose" | |
| }, | |
| /*************Flow***********************/ | |
| "flInputEvent": { | |
| "prefix": "flInputEvent", | |
| "body": [ | |
| "onChange?: SyntheticInputEvent => void," | |
| ], | |
| "description": "flInputEvent" | |
| }, | |
| "flFixMe": { | |
| "prefix": "flFixMe", | |
| "body": [ | |
| "// $FlowFixMe" | |
| ], | |
| "description": "flFixMe" | |
| }, | |
| /*************ESLint***********************/ | |
| "es-no-undef": { | |
| "prefix": "es-no-undef", | |
| "body": [ | |
| "/* eslint-disable no-undef */" | |
| ], | |
| "description": "es-no-undef" | |
| }, | |
| "es-max-len": { | |
| "prefix": "es-max-len", | |
| "body": [ | |
| "// eslint-disable-line max-len" | |
| ], | |
| "description": "es-max-len" | |
| }, | |
| "es-param-reassign": { | |
| "prefix": "es-param-reassign", | |
| "body": [ | |
| "// eslint-disable-line no-param-reassign" | |
| ], | |
| "description": "es-param-reassign" | |
| }, | |
| /*************Test***********************/ | |
| "beforeEach": { | |
| "prefix": "beforeEach", | |
| "body": [ | |
| "beforeEach(() => {", | |
| " wrapper = shallow(<${1:S12nCourseCard} {...propMock} />${2:, {context}});", | |
| "});" | |
| ], | |
| "description": "beforeEach" | |
| }, | |
| /*************Other Utils***********************/ | |
| // Logging | |
| "console.log": { | |
| "prefix": "clo", | |
| "body": [ | |
| "console.warn('$1');", | |
| "$2" | |
| ], | |
| "description": "Log output to console" | |
| }, | |
| "console.warn": { | |
| "prefix": "cwarn", | |
| "body": [ | |
| "console.warn('$1');", | |
| "$2" | |
| ], | |
| "description": "Console warn output to console" | |
| }, | |
| "clo-propstate": { | |
| "prefix": "clo-propstate", | |
| "body": [ | |
| "console.log('-- ${1:Component} --', this.props, this.state);" | |
| ], | |
| "description": "clo-propstate" | |
| }, | |
| "clo-rest": { | |
| "prefix": "clo-rest", | |
| "body": [ | |
| "console.warn('---', rest);" | |
| ], | |
| "description": "clo-rest" | |
| }, | |
| "clo-prop": { | |
| "prefix": "clo-prop", | |
| "body": [ | |
| "console.warn('---', this.props);" | |
| ], | |
| "description": "clo-prop" | |
| }, | |
| "clo-state": { | |
| "prefix": "clo-state", | |
| "body": [ | |
| "console.warn('---', this.state);" | |
| ], | |
| "description": "clo-state" | |
| }, | |
| "comment.todo": { | |
| "prefix": "comment.todo", | |
| "body": [ | |
| "// TODO(Audrey):$1 " | |
| ], | |
| "description": "comment.todo" | |
| }, | |
| "comment.toImplement": { | |
| "prefix": "comment.toImplement", | |
| "body": [ | |
| "// ToImplement(Audrey):$1 " | |
| ], | |
| "description": "comment.toImplement" | |
| }, | |
| "comment.toTest": { | |
| "prefix": "comment.toTest", | |
| "body": [ | |
| "// ToTest(Audrey):$1 " | |
| ], | |
| "description": "comment.toTest" | |
| }, | |
| // Test | |
| "test.ui": { | |
| "prefix": "test-ui", | |
| "body": [ | |
| "import ${1:CourseEnrolledDefaultCard} from '../${1:CourseEnrolledDefaultCard}'; \n \n describe('${1:CourseEnrolledDefaultCard}', () =>{ \n let wrapper; \n const propMock={ course: { id: 'c1',name: 'cname', photoUrl: 'http: //photourl',slug: 'cslug',description: 'cdescription',workload: 'cworkload',homeLink: 'learn/clink',partnerIds: [1],isOnDemand: true,},}; \n describe('UI Render', () =>{ \n test('basic elements', () =>{ \n wrapper = shallow( \n <${1:CourseEnrolledDefaultCard} {...propMock \n } />); \n expect(toJson(wrapper)).toMatchSnapshot(); \n});});});" | |
| ], | |
| "description": "Test UI" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| /* | |
| // Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and | |
| // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
| // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the | |
| // same ids are connected. | |
| // Example: | |
| "Print to console": { | |
| "prefix": "log", | |
| "body": [ | |
| "console.log('$1');", | |
| "$2" | |
| ], | |
| "description": "Log output to console" | |
| } | |
| */ | |
| /************Require************************/ | |
| "imChassisTopic": { | |
| "prefix": "imChassisTopic", | |
| "body": ["import { CHASSIS_TOPIC } from 'client/util/cruiseConstants';"], | |
| "description": "imChassisTopic" | |
| }, | |
| "stext": { | |
| "prefix": "stext", | |
| "body": [ | |
| " <Text autoBackgroundColor>", | |
| " {[", | |
| " {", | |
| " text: \"Hello, Worldview! \",", | |
| " color: { r: 1, g: 1, b: 1, a: 1 },", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 5, z: 10 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 }", | |
| " }", | |
| " ]}", | |
| " </Text>" | |
| ], | |
| "description": "stext" | |
| }, | |
| "scubes": { | |
| "prefix": "scubes", | |
| "body": [ | |
| " <Cubes>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " }", | |
| " ]}", | |
| " </Cubes>" | |
| ], | |
| "description": "scubes" | |
| }, | |
| "pose...": { | |
| "prefix": "pose...", | |
| "body": [ | |
| "pose: { position: { x: 0, y: 0, z: 0 }, orientation: { x: 0, y: 0, z: 0, w: 1 },}," | |
| ], | |
| "description": "pose..." | |
| }, | |
| "re-compose": { | |
| "prefix": "re-compose", | |
| "body": ["import { compose } from 'recompose';"], | |
| "description": "re-compose" | |
| }, | |
| "ex-withXDPData": { | |
| "prefix": "ex-withXDPData", | |
| "body": [" withXDPData(({apiData: { name }}) => ({name})),"], | |
| "description": "ex-withXDPData" | |
| }, | |
| "re-withXDPData": { | |
| "prefix": "re-withXDPData", | |
| "body": ["import withXDPData from 'src/components/shared/withXDPData';"], | |
| "description": "re-withXDPData" | |
| }, | |
| "re-prop-types": { | |
| "prefix": "re-prop-types", | |
| "body": ["import PropTypes from 'prop-types';"], | |
| "description": "re-prop-types" | |
| }, | |
| "rcn": { | |
| "prefix": "rcn", | |
| "body": ["rootClassName=\"${1:m-b-2}\""], | |
| "description": "rcn" | |
| }, | |
| "re-apiStatusType": { | |
| "prefix": "re-apiStatusType", | |
| "body": [ | |
| "import type { ApiStatus as ApiStatusType } from '@coursera/coursera-ui/constants/sharedType';" | |
| ], | |
| "description": "re-apiStatusType" | |
| }, | |
| "re-Jsuri": { | |
| "prefix": "re-Jsuri", | |
| "body": ["import Uri from 'jsuri';"], | |
| "description": "re-Jsuri" | |
| }, | |
| "re-connectRedux": { | |
| "prefix": "re-connectRedux", | |
| "body": ["import { connect } from 'react-redux';"], | |
| "description": "re-connectRedux" | |
| }, | |
| "re-react": { | |
| "prefix": "re-react", | |
| "body": ["import * as React from 'react';"], | |
| "description": "re-react" | |
| }, | |
| "re-epic": { | |
| "prefix": "re-epic", | |
| "body": ["import epicClient from 'bundles/epic/client';"], | |
| "description": "re-epic" | |
| }, | |
| "re-info": { | |
| "prefix": "re-info", | |
| "body": ["import { withInfo } from '@storybook/addon-info';"], | |
| "description": "re-info" | |
| }, | |
| "re-Modal-phoenix": { | |
| "prefix": "re-Modal-phoenix", | |
| "body": ["import Modal from 'bundles/phoenix/components/Modal';"], | |
| "description": "re-Modal-phoenix" | |
| }, | |
| "re-under": { | |
| "prefix": "re-under", | |
| "body": ["import _ from 'underscore';"], | |
| "description": "re-under" | |
| }, | |
| "recui": { | |
| "prefix": "recui", | |
| "body": ["import { ${1:Box} } from '@coursera/coursera-ui';"], | |
| "description": "recui" | |
| }, | |
| "reLoading": { | |
| "prefix": "reLoading", | |
| "body": [ | |
| "import Loading from 'bundles/coursera-ui/components/coursera/Loading';" | |
| ], | |
| "description": "reLoading" | |
| }, | |
| "reWithApiHandler": { | |
| "prefix": "reWithApiHandler", | |
| "body": [ | |
| "import withApiHandler from 'bundles/coursera-ui/components/hocs/withApiHandler';" | |
| ], | |
| "description": "reWithApiHandler" | |
| }, | |
| "re-recompose": { | |
| "prefix": "re-recompose", | |
| "body": [ | |
| "import { pure, compose, withState, withProps, withHandlers } from 'recompose';" | |
| ], | |
| "description": "re-recompose" | |
| }, | |
| "re-gql-recompose": { | |
| "prefix": "re-gql-recompose", | |
| "body": [ | |
| "import{ compose, withState, withHandlers} from 'recompose';", | |
| "import{ graphql, withApollo } from 'react-apollo';", | |
| "import gql from 'graphql-tag';" | |
| ], | |
| "description": "re-gql-recompose" | |
| }, | |
| "recui-validationUtil": { | |
| "prefix": "recui-validationUtil", | |
| "body": [ | |
| "import { required, minLength, maxLength } from '@coursera/coursera-ui/lib/utils/validation';" | |
| ], | |
| "description": "recui-validationUtil" | |
| }, | |
| "re-styled": { | |
| "prefix": "re-styled", | |
| "body": ["import styled from 'styled-components';"], | |
| "description": "re-styled" | |
| }, | |
| "recui-apiStatus": { | |
| "prefix": "recui-apiStatus", | |
| "body": [ | |
| "import {API_BEFORE_SEND} from 'bundles/coursera-ui/constants/apiNotificationConstants'" | |
| ], | |
| "description": "recui-apiStatus" | |
| }, | |
| "re-deferToClientSideRender": { | |
| "prefix": "re-deferToClientSideRender", | |
| "body": [ | |
| "import deferToClientSideRender from 'js/lib/deferToClientSideRender';" | |
| ], | |
| "description": "re-deferToClientSideRender" | |
| }, | |
| "re-redirect": { | |
| "prefix": "re-redirect", | |
| "body": [ | |
| "import redirect from 'js/lib/coursera.redirect';", | |
| "redirect.setLocation('/${1}')" | |
| ], | |
| "description": "re-redirect" | |
| }, | |
| "re-TypeApiStatus": { | |
| "prefix": "re-TypeApiStatus", | |
| "body": [ | |
| "import type { ApiStatus } from 'bundles/program-common/flowTypes/programCommon';" | |
| ], | |
| "description": "re-TypeApiStatus" | |
| }, | |
| "re-trans": { | |
| "prefix": "re-trans", | |
| "body": ["import _t from 'i18n!nls/${1:admin-dashboard}';"], | |
| "description": "re-trans" | |
| }, | |
| "re-demoblocks": { | |
| "prefix": "re-demoblocks", | |
| "body": [ | |
| " import {", | |
| " DemoCodeBlock,", | |
| " DemoBlock,", | |
| " DemoHowBlock,", | |
| " DemoThemeContainer,", | |
| " DemoStoryContainer,", | |
| " } from 'src/stories/support/DemoBlocks';" | |
| ], | |
| "description": "re-demoblocks" | |
| }, | |
| "re-cui": { | |
| "prefix": "re-cui", | |
| "body": ["import { ${1:Stylesheet, css} } from '@coursera/coursera-ui';"], | |
| "description": "re-cui" | |
| }, | |
| "re-cui-simple": { | |
| "prefix": "re-cui-simple", | |
| "body": [ | |
| "import { css, StyleSheet, Container } from '@coursera/coursera-ui';", | |
| "", | |
| "const styles = StyleSheet.create({", | |
| " ${1:ProgramAvailableList}: {},", | |
| "});" | |
| ], | |
| "description": "re-cui-simple" | |
| }, | |
| "re-routerLink": { | |
| "prefix": "re-routerLink", | |
| "body": ["import { Link } from 'react-router-dom';"], | |
| "description": "re-routerLink" | |
| }, | |
| "re-routerDom": { | |
| "prefix": "re-routerDom", | |
| "body": [ | |
| " import {", | |
| " BrowserRouter as Router,", | |
| " Route,", | |
| " Link", | |
| " } from 'react-router-dom';" | |
| ], | |
| "description": "re-routerDom" | |
| }, | |
| "re-imgix": { | |
| "prefix": "re-imgix", | |
| "body": [ | |
| " import Imgix from 'js/components/Imgix';", | |
| " import imgixParams from 'bundles/page/common/imgixParams';", | |
| " imgParams={imgixParams.fillWithWhiteBackground}" | |
| ], | |
| "description": "re-imgix" | |
| }, | |
| "re-imgix-full": { | |
| "prefix": "re-imgix-full", | |
| "body": [ | |
| " import Imgix from 'js/components/Imgix';", | |
| " import imgixParams from 'bundles/page/common/imgixParams';", | |
| " <Imgix", | |
| " src={imgSrc}", | |
| " alt={Imgix.DECORATIVE}", | |
| " width={80}", | |
| " height={80}", | |
| " imgParams={imgixParams.fillWithWhiteBackground}", | |
| " />" | |
| ], | |
| "description": "re-imgix-full" | |
| }, | |
| "req-config-asset": { | |
| "prefix": "req-config-asset", | |
| "body": [ | |
| " import config from 'js/app/config';", | |
| " const imagePath = `${config.url.assets}images/program-home/`;" | |
| ], | |
| "description": "req-config-asset" | |
| }, | |
| "re-user": { | |
| "prefix": "re-user", | |
| "body": ["import user from 'js/lib/user';", "user.get().id"], | |
| "description": "re-user" | |
| }, | |
| "re-user-full": { | |
| "prefix": "re-user-full", | |
| "body": [ | |
| "import user from 'js/lib/user';", | |
| "user.get().id", | |
| "user.get().email_address", | |
| "user.isAuthenticatedUser()", | |
| "user.isSuperuser()" | |
| ], | |
| "description": "re-user-full" | |
| }, | |
| "reBranching-full": { | |
| "prefix": "reBranching-full", | |
| "body": [ | |
| " import { withSSRPlaceholder } from 'bundles/coursera-ui/components/hocs/withBranches';", | |
| " import withIsMounted from 'bundles/coursera-ui/components/hocs/withIsMounted';", | |
| " const CourseCard = () => <div><h1>Dummy Course Card</h1></div>;", | |
| " const CourseCardPlaceholder = () => <div><h1>Course Card SSR Placeholder</h1></div>;", | |
| " const CourseCardWithSSRPlaceholderBranch = _.compose(", | |
| " withIsMounted,", | |
| " withSSRPlaceholder(CourseCardPlaceholder),", | |
| " )(CourseCard);", | |
| "", | |
| " <CourseCardWithSSRPlaceholderBranch isCSROnly />" | |
| ], | |
| "description": "reBranching-full" | |
| }, | |
| "re-button": { | |
| "prefix": "re-button", | |
| "body": ["import { Button } from '@coursera/coursera-ui';"], | |
| "description": "re-button" | |
| }, | |
| "re-tupleToStringKey": { | |
| "prefix": "re-tupleToStringKey", | |
| "body": ["import { tupleToStringKey } from 'js/lib/stringKeyTuple';"], | |
| "description": "re-tupleToStringKey" | |
| }, | |
| "re-withRenderNothing": { | |
| "prefix": "re-withRenderNothing", | |
| "body": [ | |
| "import { withRenderNothing } from 'bundles/coursera-ui/components/hocs/withBranches';", | |
| "" | |
| ], | |
| "description": "re-withRenderNothing" | |
| }, | |
| "re-ApiButton": { | |
| "prefix": "re-ApiButton", | |
| "body": [ | |
| "import ApiButton, { apiStatusPropType, errorPropType } from", | |
| " 'bundles/coursera-ui/components/basic/ApiButton';" | |
| ], | |
| "description": "re-ApiButton" | |
| }, | |
| "re-svg": { | |
| "prefix": "re-svg", | |
| "body": ["import {${1:SvgEdit}} from 'src/svg'"], | |
| "description": "re-svg" | |
| }, | |
| "re-ErrorMessage": { | |
| "prefix": "re-ErrorMessage", | |
| "body": [ | |
| "import ErrorMessage from 'bundles/coursera-ui/components/extended/ErrorMessage';" | |
| ], | |
| "description": "re-ErrorMessage" | |
| }, | |
| "re-formattedMessage": { | |
| "prefix": "re-formattedMessage", | |
| "body": ["import { FormattedMessage } from 'js/lib/coursera.react-intl';"], | |
| "description": "re-formattedMessage" | |
| }, | |
| "re-graphql-all": { | |
| "prefix": "re-graphql-all", | |
| "body": [ | |
| "import gql from 'graphql-tag';", | |
| "import { graphql } from 'react-apollo';", | |
| "import { naptime } from '@coursera/graphql-utils';" | |
| ], | |
| "description": "re-graphql-all" | |
| }, | |
| "re-recompose-common": { | |
| "prefix": "re-recompose-common", | |
| "body": [ | |
| "import { compose, withState, withHandlers, setDisplayName } from 'recompose';" | |
| ], | |
| "description": "re-recompose-common" | |
| }, | |
| /************Common************************/ | |
| "stylesAphrodite": { | |
| "prefix": "stylesAphrodite", | |
| "body": ["const styles = StyleSheet.create({});"], | |
| "description": "stylesAphrodite" | |
| }, | |
| "style-bgImage": { | |
| "prefix": "style-bgImage", | |
| "body": ["style={{ backgroundImage: `url(\"${image}\")` }}"], | |
| "description": "style-bgImage" | |
| }, | |
| "style-media": { | |
| "prefix": "style-media", | |
| "body": [ | |
| "[`@media (max-width: ${breakPoint.sm}px)`]: {", | |
| " marginBottom: spacing.md,", | |
| " }," | |
| ], | |
| "description": "style-media" | |
| }, | |
| "lorem-pixel": { | |
| "prefix": "lorem-pixel", | |
| "body": ["http://placehold.it/${1:600x400}/A66506/FFFFFF"], | |
| "description": "lorem-pixel" | |
| }, | |
| "placeholderit": { | |
| "prefix": "placeholderit", | |
| "body": ["http://placehold.it/${1:600x400}/A66506/FFFFFF"], | |
| "description": "placeholderit" | |
| }, | |
| "e.preventDefault_window": { | |
| "prefix": "e.preventDefault_window", | |
| "body": [ | |
| "if (e && e.stopPropagation){", | |
| "e.stopPropagation();", | |
| "} else if (window.event){", | |
| "window.event.cancelBubble = true;", | |
| "}" | |
| ], | |
| "description": "e.preventDefault" | |
| }, | |
| "img-placeholderit": { | |
| "prefix": "img-placeholderit", | |
| "body": [ | |
| "<img src=\" //placehold.it/${1:600x400}/A66506/FFFFFF\" alt=\"${2:CourseraAlt}\" />" | |
| ], | |
| "description": "img-placeholderit" | |
| }, | |
| "img-placeholderit-avatar": { | |
| "prefix": "img-placeholderit-avatar", | |
| "body": [ | |
| "<img src=\"https://s3.amazonaws.com/uifaces/faces/twitter/aiiaiiaii/128.jpg\" alt=\"${2:CourseraAlt}\" />" | |
| ], | |
| "description": "img-placeholderit-avatar" | |
| }, | |
| "img-lorem": { | |
| "prefix": "img-lorem", | |
| "body": [ | |
| " <img src=\"http://lorempixel.com/${1:400}/${2:200}/${3:city/}\" alt=\"${4:CourseraAlt}\" />" | |
| ], | |
| "description": "img-lorem" | |
| }, | |
| /******CUI************************/ | |
| "cuii": { | |
| "prefix": "cuii", | |
| "body": ["\"@coursera/coursera-ui\""], | |
| "description": "cuii" | |
| }, | |
| "cuiisvg": { | |
| "prefix": "cuiisvg", | |
| "body": ["\"@coursera/coursera-ui/svg\""], | |
| "description": "cuiisvg" | |
| }, | |
| "cui-ApiButton": { | |
| "prefix": "cui-ApiButton", | |
| "body": [ | |
| "<ApiButton", | |
| " type=\"primary\"", | |
| " onClick={onClick}", | |
| " apiStatus={apiStatus}", | |
| " apiStatusAttributesConfig={{", | |
| " label: {", | |
| " API_BEFORE_SEND: _t('Enroll'),", | |
| " API_IN_PROGRESS: _t('Enrolling...'),", | |
| " API_SUCCESS: _t('Enrolled'),", | |
| " API_ERROR: _t('Failed'),", | |
| " }", | |
| " }}", | |
| " />" | |
| ], | |
| "description": "cui-ApiButton" | |
| }, | |
| "cui-ErrorMessage": { | |
| "prefix": "cui-ErrorMessage", | |
| "body": [ | |
| " const DEFAULT_ERROR_MSG = _t('Error ${1:sending email}, please try again later');", | |
| " {error && <ErrorMessage error={error} defaultErrorMsg={DEFAULT_ERROR_MSG} />}" | |
| ], | |
| "description": "cui-ErrorMessage" | |
| }, | |
| "cui-button-link": { | |
| "prefix": "cui-button-link", | |
| "body": [ | |
| " <Button", | |
| " type=\"secondary\"", | |
| " tag=\"a\"", | |
| " size=\"sm\"", | |
| " label={_t('Preview')}", | |
| " style={{marginRight: spacing.md}}", | |
| " htmlAttributes={{", | |
| " href: this._programHomeLink,", | |
| " target: '_blank',", | |
| " rel: 'noopener noreferrer'", | |
| " }}", | |
| " />" | |
| ], | |
| "description": "cui-button-link" | |
| }, | |
| "cui-button": { | |
| "prefix": "cui-button", | |
| "body": [ | |
| "<Button type=\"primary\" label={${1:_t('Preview')}} onClick={onClick}" | |
| ], | |
| "description": "cui-button" | |
| }, | |
| "storySimple": { | |
| "prefix": "storySimple", | |
| "body": [ | |
| "import * as React from 'react';", | |
| "import{ storiesOf } from '@storybook/react';", | |
| "import{ withInfo } from '@storybook/addon-info';", | |
| "", | |
| "import{ Pill } from 'src';", | |
| "import PillDemo from 'src/stories/support/PillDemo';", | |
| "", | |
| "storiesOf('basic.Pill', module).add('Pill', withInfo({ propTables: [Pill]})(() => <PillDemo />));" | |
| ], | |
| "description": "storySimple" | |
| }, | |
| /*************React***********************/ | |
| "divCss": { | |
| "prefix": "divCss", | |
| "body": [ | |
| " <div {...css(styles.${1:selectizeContainer})}>", | |
| " ${2:}", | |
| " </div>" | |
| ], | |
| "description": "divCss" | |
| }, | |
| "formattedMessage-dataSize": { | |
| "prefix": "formattedMessage-dataSize", | |
| "body": [ | |
| "<FormattedMessage", | |
| " message={_t(`Delete {dataSize}", | |
| " {dataSize, plural, =1 {person} other {people}}?", | |
| " `)}", | |
| " dataSize={dataSize}", | |
| " />" | |
| ], | |
| "description": "formattedMessage-dataSize" | |
| }, | |
| "formattedHTMLMessage": { | |
| "prefix": "formattedHTMLMessage", | |
| "body": [ | |
| " <FormattedHTMLMessage", | |
| " message={_t(`", | |
| " We have not yet launched in your country. Please", | |
| " <a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\">fill this form</a>", | |
| " to contact sales.", | |
| " `)}", | |
| " link={REQUEST_DEMO_LINK}", | |
| " />" | |
| ], | |
| "description": "formattedHTMLMessage" | |
| }, | |
| "propRootClassName": { | |
| "prefix": "propRootClassName", | |
| "body": [ | |
| "rootClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object])," | |
| ], | |
| "description": "propRootClassName" | |
| }, | |
| "constructor-r": { | |
| "prefix": "constructor-r", | |
| "body": [ | |
| " constructor(props, context) {", | |
| " super(props, context);", | |
| " this.state = {", | |
| "", | |
| " };", | |
| " }" | |
| ], | |
| "description": "constructor-r" | |
| }, | |
| "setStateFn": { | |
| "prefix": "setStateFn", | |
| "body": ["this.setState(() => ({{1:isDirty: false}}));"], | |
| "description": "setStateFn" | |
| }, | |
| "rcc-stateless": { | |
| "prefix": "rcc-stateless", | |
| "body": [ | |
| "// @flow", | |
| "import React from 'react';", | |
| "", | |
| "type Props = {", | |
| " message: string,", | |
| "};", | |
| "// ToImplement(Audrey):", | |
| "export default function StepSelectPrograms(", | |
| " {", | |
| " message,", | |
| " }: Props", | |
| ") {", | |
| " return (", | |
| " <div>", | |
| " StepSelectPrograms{message}", | |
| " </div>", | |
| " );", | |
| "}" | |
| ], | |
| "description": "rcc-stateless" | |
| }, | |
| "ptHtmlAttributes": { | |
| "prefix": "ptHtmlAttributes", | |
| "body": ["htmlAttributes?: { [htmlAttr: string]: string | number },"], | |
| "description": "ptHtmlAttributes" | |
| }, | |
| "ptStyle": { | |
| "prefix": "ptStyle", | |
| "body": ["style?: { [styleAttr: string]: string | number },"], | |
| "description": "ptStyle" | |
| }, | |
| "ptRootClassName": { | |
| "prefix": "ptRootClassName", | |
| "body": [ | |
| "rootClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object])," | |
| ], | |
| "description": "ptRootClassName" | |
| }, | |
| "ptTag": { | |
| "prefix": "ptTag", | |
| "body": ["tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),"], | |
| "description": "ptTag" | |
| }, | |
| "demothemecontainer": { | |
| "prefix": "demothemecontainer", | |
| "body": [ | |
| "<DemoThemeContainer isThemeDark={isThemeDark}>", | |
| " ${1: ''}", | |
| "</DemoThemeContainer>" | |
| ], | |
| "description": "demothemecontainer" | |
| }, | |
| "demostorycontainer": { | |
| "prefix": "demostorycontainer", | |
| "body": [ | |
| "<DemoStoryContainer title=\"${1:Radio}\" description=\"${1:Radio} is used to...\">", | |
| " ${2:<GradientSelector />}", | |
| " </DemoStoryContainer>" | |
| ], | |
| "description": "demostorycontainer" | |
| }, | |
| "demoblock": { | |
| "prefix": "demoblock", | |
| "body": [ | |
| "<DemoBlock", | |
| " title=\"${1:RadioGroup}\"", | |
| " description=\"${2:Radio components wrapped inside RadioGroup}\"", | |
| " >", | |
| " ${3:}", | |
| " </DemoBlock>" | |
| ], | |
| "description": "demoblock" | |
| }, | |
| "demoCodeBlock": { | |
| "prefix": "demoCodeBlock", | |
| "body": [ | |
| " <DemoCodeBlock", | |
| " code={`", | |
| " ${1:}", | |
| " `}", | |
| " />" | |
| ], | |
| "description": "demoCodeBlock" | |
| }, | |
| "demoCodeBlockNoExpanding": { | |
| "prefix": "demoCodeBlockNoExpanding", | |
| "body": [ | |
| " <DemoCodeBlock", | |
| " noExpanding", | |
| " code={`", | |
| " ${1:}", | |
| " `}", | |
| " />" | |
| ], | |
| "description": "demoCodeBlockNoExpanding" | |
| }, | |
| "export-compose": { | |
| "prefix": "export-compose", | |
| "body": [ | |
| " export default compose(", | |
| " graphql(${1:ABCQuery}),", | |
| " mapProps((props) => {", | |
| " return props;", | |
| " })", | |
| " )(${2:CollectionItemSlider});" | |
| ], | |
| "description": "export-compose" | |
| }, | |
| /*************Flow***********************/ | |
| "flInputEvent": { | |
| "prefix": "flInputEvent", | |
| "body": ["onChange?: SyntheticInputEvent => void,"], | |
| "description": "flInputEvent" | |
| }, | |
| "flFixMe": { | |
| "prefix": "flFixMe", | |
| "body": ["// $FlowFixMe"], | |
| "description": "flFixMe" | |
| }, | |
| /*************ESLint***********************/ | |
| "es-no-undef": { | |
| "prefix": "es-no-undef", | |
| "body": ["/* eslint-disable no-undef */"], | |
| "description": "es-no-undef" | |
| }, | |
| "es-max-len": { | |
| "prefix": "es-max-len", | |
| "body": ["// eslint-disable-line max-len"], | |
| "description": "es-max-len" | |
| }, | |
| "es-param-reassign": { | |
| "prefix": "es-param-reassign", | |
| "body": ["// eslint-disable-line no-param-reassign"], | |
| "description": "es-param-reassign" | |
| }, | |
| /*************Test***********************/ | |
| "beforeEach": { | |
| "prefix": "beforeEach", | |
| "body": [ | |
| "beforeEach(() => {", | |
| " wrapper = shallow(<${1:S12nCourseCard} {...propMock} />${2:, {context}});", | |
| "});" | |
| ], | |
| "description": "beforeEach" | |
| }, | |
| /*************Other Utils***********************/ | |
| // Logging | |
| "console.log": { | |
| "prefix": "clog", | |
| "body": ["console.warn('$1');", "$2"], | |
| "description": "Log output to console" | |
| }, | |
| "console.warn": { | |
| "prefix": "cwarn", | |
| "body": ["console.warn('$1');", "$2"], | |
| "description": "Console warn output to console" | |
| }, | |
| "clo-propstate": { | |
| "prefix": "clo-propstate", | |
| "body": ["console.log('-- ${1:Component} --', this.props, this.state);"], | |
| "description": "clo-propstate" | |
| }, | |
| "clo-rest": { | |
| "prefix": "clo-rest", | |
| "body": ["console.warn('---', rest);"], | |
| "description": "clo-rest" | |
| }, | |
| "clo-prop": { | |
| "prefix": "clo-prop", | |
| "body": ["console.warn('---', this.props);"], | |
| "description": "clo-prop" | |
| }, | |
| "clo-state": { | |
| "prefix": "clo-state", | |
| "body": ["console.warn('---', this.state);"], | |
| "description": "clo-state" | |
| }, | |
| "comment.todo": { | |
| "prefix": "comment.todo", | |
| "body": ["// TODO(Audrey):$1 "], | |
| "description": "comment.todo" | |
| }, | |
| "comment.toImplement": { | |
| "prefix": "comment.toImplement", | |
| "body": ["// ToImplement(Audrey):$1 "], | |
| "description": "comment.toImplement" | |
| }, | |
| "comment.toTest": { | |
| "prefix": "comment.toTest", | |
| "body": ["// ToTest(Audrey):$1 "], | |
| "description": "comment.toTest" | |
| }, | |
| // Test | |
| "test.ui": { | |
| "prefix": "test-ui", | |
| "body": [ | |
| "import ${1:CourseEnrolledDefaultCard} from '../${1:CourseEnrolledDefaultCard}'; \n \n describe('${1:CourseEnrolledDefaultCard}', () =>{ \n let wrapper; \n const propMock={ course: { id: 'c1',name: 'cname', photoUrl: 'http: //photourl',slug: 'cslug',description: 'cdescription',workload: 'cworkload',homeLink: 'learn/clink',partnerIds: [1],isOnDemand: true,},}; \n describe('UI Render', () =>{ \n test('basic elements', () =>{ \n wrapper = shallow( \n <${1:CourseEnrolledDefaultCard} {...propMock \n } />); \n expect(toJson(wrapper)).toMatchSnapshot(); \n});});});" | |
| ], | |
| "description": "Test UI" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| /* | |
| // Place your snippets for Python here. Each snippet is defined under a snippet name and has a prefix, body and | |
| // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
| // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the | |
| // same ids are connected. | |
| // Example: | |
| "Print to console": { | |
| "prefix": "log", | |
| "body": [ | |
| "console.log('$1');", | |
| "$2" | |
| ], | |
| "description": "Log output to console" | |
| } | |
| */ | |
| "__init__ method": { | |
| "prefix": "init", | |
| "body": [ | |
| "def __init__(self, ${1:arg}):", | |
| "\t${0:pass}", | |
| ], | |
| "description": "Initializer method" | |
| }, | |
| "method": { | |
| "prefix": "def", | |
| "body": [ | |
| "def ${1:foo}(self, ${2:arg}):", | |
| "\t${0:pass}", | |
| ], | |
| "description": "Instance method" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| // Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and | |
| // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
| // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the | |
| // same ids are connected. | |
| // Example: | |
| // "Print to console": { | |
| // "prefix": "log", | |
| // "body": [ | |
| // "console.log('$1');", | |
| // "$2" | |
| // ], | |
| // "description": "Log output to console" | |
| // } | |
| "relink": { | |
| "prefix": "relink", | |
| "body": ["import {${1:Link}}from \"react-router-dom\";"], | |
| "description": "relink" | |
| }, | |
| "remIcon": { | |
| "prefix": "remIcon", | |
| "body": [ | |
| "import ${1: PhotoCamera} from \"@material-ui/icons/${1: PhotoCamera}\";" | |
| ], | |
| "description": "remIcon" | |
| }, | |
| "remcomp": { | |
| "prefix": "remcomp", | |
| "body": [ | |
| "import ${1:Typography} from \"@material-ui/core/${1:Typography}\";" | |
| ], | |
| "description": "remcomp" | |
| }, | |
| "exmstyles": { | |
| "prefix": "exmstyles", | |
| "body": ["export default withStyles(styles)(Header);"], | |
| "description": "exmstyles" | |
| }, | |
| "remstyles": { | |
| "prefix": "remstyles", | |
| "body": [ | |
| "import { Theme } from \"@material-ui/core/styles/createMuiTheme\";", | |
| "import { withStyles, createStyles, WithStyles } from \"@material-ui/core/styles\";", | |
| "", | |
| "const styles = (theme: Theme) =>", | |
| " createStyles({", | |
| " appBar: {", | |
| " position: \"relative\"", | |
| " },", | |
| " });", | |
| "", | |
| "export interface HeaderProps extends WithStyles<typeof styles> {}" | |
| ], | |
| "description": "remstyles" | |
| }, | |
| "remicon": { | |
| "prefix": "remicon", | |
| "body": [ | |
| "import ${1:PhotoCamera} from \"@material-ui/icons/${1:PhotoCamera}\";" | |
| ], | |
| "description": "remicon" | |
| }, | |
| "aqf": { | |
| "prefix": "aqf", | |
| "body": [ | |
| " <Query<AppQuery> query={APP_QUERY}>", | |
| " {({ loading, error, data }) => {", | |
| " console.log(loading, data, error);", | |
| " if (loading) return \"Loading...\";", | |
| " if (error) return `Error! ${error.message}`;", | |
| " return <span>got data</span>;", | |
| " }}", | |
| " </Query>" | |
| ], | |
| "description": "aqf" | |
| }, | |
| "tsfc": { | |
| "prefix": "tsfc", | |
| "body": [ | |
| "import * as React from \"react\";", | |
| "", | |
| "export interface ProjectCreateProps {}", | |
| "", | |
| "export function ProjectCreate(props: ProjectCreateProps) {", | |
| " return (", | |
| " <div>", | |
| " <h1>ProjectCreate</h1>", | |
| " todo", | |
| " </div>", | |
| " );", | |
| "}", | |
| "", | |
| "export default ProjectCreate" | |
| ], | |
| "description": "tsfc" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and | |
| // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
| // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the | |
| // same ids are connected. | |
| // Example: | |
| // "Print to console": { | |
| // "prefix": "log", | |
| // "body": [ | |
| // "console.log('$1');", | |
| // "$2" | |
| // ], | |
| // "description": "Log output to console" | |
| // } | |
| "suseStylesClasses": { | |
| "prefix": "suseStylesClasses", | |
| "body": ["const classes = useStyles();"], | |
| "description": "suseStylesClasses" | |
| }, | |
| "suseStyles": { | |
| "prefix": "suseStyles", | |
| "body": [ | |
| "const useStyles = makeStyles({", | |
| " root: {", | |
| " width: \"100%\",", | |
| " },", | |
| "});" | |
| ], | |
| "description": "suseStyles" | |
| }, | |
| "immakeStyles": { | |
| "prefix": "immakeStyles", | |
| "body": ["import { makeStyles } from \"@material-ui/styles\";"], | |
| "description": "immakeStyles" | |
| }, | |
| "imtheme": { | |
| "prefix": "imtheme", | |
| "body": ["import theme from \"../utils/theme\";"], | |
| "description": "imtheme" | |
| }, | |
| "relink": { | |
| "prefix": "relink", | |
| "body": ["import {${1:Link}}from \"react-router-dom\";"], | |
| "description": "relink" | |
| }, | |
| "remIcon": { | |
| "prefix": "remIcon", | |
| "body": [ | |
| "import ${1: PhotoCamera} from \"@material-ui/icons/${1: PhotoCamera}\";" | |
| ], | |
| "description": "remIcon" | |
| }, | |
| "remcomp": { | |
| "prefix": "remcomp", | |
| "body": [ | |
| "import ${1:Typography} from \"@material-ui/core/${1:Typography}\";" | |
| ], | |
| "description": "remcomp" | |
| }, | |
| "exmstyles": { | |
| "prefix": "exmstyles", | |
| "body": ["export default withStyles(styles)(Header);"], | |
| "description": "exmstyles" | |
| }, | |
| "remstyles": { | |
| "prefix": "remstyles", | |
| "body": [ | |
| "import { Theme } from \"@material-ui/core/styles/createMuiTheme\";", | |
| "import { withStyles, createStyles, WithStyles } from \"@material-ui/core/styles\";", | |
| "", | |
| "const styles = (theme: Theme) =>", | |
| " createStyles({", | |
| " appBar: {", | |
| " position: \"relative\"", | |
| " },", | |
| " });", | |
| "", | |
| "export interface HeaderProps extends WithStyles<typeof styles> {}" | |
| ], | |
| "description": "remstyles" | |
| }, | |
| "remicon": { | |
| "prefix": "remicon", | |
| "body": [ | |
| "import ${1:PhotoCamera} from \"@material-ui/icons/${1:PhotoCamera}\";" | |
| ], | |
| "description": "remicon" | |
| }, | |
| "aqf": { | |
| "prefix": "aqf", | |
| "body": [ | |
| " <Query<AppQuery> query={APP_QUERY}>", | |
| " {({ loading, error, data }) => {", | |
| " console.log(loading, data, error);", | |
| " if (loading) return \"Loading...\";", | |
| " if (error) return `Error! ${error.message}`;", | |
| " return <span>got data</span>;", | |
| " }}", | |
| " </Query>" | |
| ], | |
| "description": "aqf" | |
| }, | |
| "tsfc": { | |
| "prefix": "tsfc", | |
| "body": [ | |
| "import * as React from \"react\";", | |
| "", | |
| "export interface ProjectCreateProps {}", | |
| "", | |
| "export function ProjectCreate(props: ProjectCreateProps) {", | |
| " return (", | |
| " <div>", | |
| " <h1>ProjectCreate</h1>", | |
| " todo", | |
| " </div>", | |
| " );", | |
| "}", | |
| "", | |
| "export default ProjectCreate" | |
| ], | |
| "description": "tsfc" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment