From c72014ff218f07c361a4ca197dcdf0fa6667864f Mon Sep 17 00:00:00 2001 From: Simon Edwards Date: Sat, 1 Jun 2024 11:16:57 +0200 Subject: [PATCH] Delete the really old StyleGuide extension --- extensions/StyleGuide/.eslintrc.js | 3 - extensions/StyleGuide/README.md | 1 - extensions/StyleGuide/package.json | 47 --- .../StyleGuide/resources/sass/styleguide.scss | 100 ----- .../StyleGuide/src/StyleGuideExtension.ts | 385 ------------------ extensions/StyleGuide/tsconfig.json | 10 - 6 files changed, 546 deletions(-) delete mode 100644 extensions/StyleGuide/.eslintrc.js delete mode 100644 extensions/StyleGuide/README.md delete mode 100644 extensions/StyleGuide/package.json delete mode 100644 extensions/StyleGuide/resources/sass/styleguide.scss delete mode 100644 extensions/StyleGuide/src/StyleGuideExtension.ts delete mode 100755 extensions/StyleGuide/tsconfig.json diff --git a/extensions/StyleGuide/.eslintrc.js b/extensions/StyleGuide/.eslintrc.js deleted file mode 100644 index 6cb62ad17..000000000 --- a/extensions/StyleGuide/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: "extraterm" -}; diff --git a/extensions/StyleGuide/README.md b/extensions/StyleGuide/README.md deleted file mode 100644 index 8b1378917..000000000 --- a/extensions/StyleGuide/README.md +++ /dev/null @@ -1 +0,0 @@ - diff --git a/extensions/StyleGuide/package.json b/extensions/StyleGuide/package.json deleted file mode 100644 index 8fbc1b318..000000000 --- a/extensions/StyleGuide/package.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "name": "styleguide", - "displayName": "Style Guide", - "description": "Extraterm style guide for extension developers", - "author": "Simon Edwards", - "license": "MIT", - "version": "1.0.0", - "exports": "./dist/StyleGuideExtension.cjs", - "scripts": { - "build": "yarn run build-code && yarn run build-bundle && yarn run lint", - "build-code": "tsc", - "build-bundle": "esbuild build/StyleGuideExtension.js --bundle --outfile=dist/StyleGuideExtension.cjs --platform=node --format=cjs --external:@nodegui/nodegui \"--external:nodegui-plugin-*\"", - "clean": "shx rm -rf build dist", - "lint": "eslint \"src/**/*.ts\"", - "lint-strict": "eslint --max-warnings 1 \"src/**/*.ts\"" - }, - "isInternal": true, - "devDependencies": { - "@extraterm/extraterm-extension-api": "0.15.0", - "@types/he": "^1.1.1", - "@types/node": "^18.15.3", - "esbuild": "^0.15.5", - "eslint": "8.53.0", - "eslint-plugin-unicorn": "42.0.0", - "eslint-config-extraterm": "1.0.0", - "typescript": "5.2.2" - }, - "contributes": { - "commands": [ - { - "command": "styleguide:open", - "title": "Style Guide", - "category": "application", - "icon": "fas fa-swatchbook", - "when": "" - } - ], - "tabs": [ - { - "name": "styleguide" - } - ] - }, - "dependencies": { - "he": "^1.2.0" - } -} diff --git a/extensions/StyleGuide/resources/sass/styleguide.scss b/extensions/StyleGuide/resources/sass/styleguide.scss deleted file mode 100644 index 7c7f96f9a..000000000 --- a/extensions/StyleGuide/resources/sass/styleguide.scss +++ /dev/null @@ -1,100 +0,0 @@ -/** - * Copyright 2021 Simon Edwards - */ -@import "general-gui/variables"; - -#guide { - padding: $panel-body-padding; -} - -.code-example { - display: grid; - grid: auto-flow / 1fr 1fr; - column-gap: $panel-body-padding; -} - -$card-background-color: lighten($tool-panel-background-color, 8%); - -.code-example-result, .code-example-source { - padding: $component-padding-vertical*1.5 $component-padding-horizontal*1.5; - margin-bottom: $component-padding-vertical; - font-size: 1.2rem; - list-style-type: none; - border-radius: $border-radius*2; - border: 1px solid $base-border-color; - background-color: $card-background-color; - overflow: hidden; -} - -.color-patch { - display: inline-block; - height: 1.5rem; - width: 3rem; -} - -.color-patch__text-color { - background-color: $text-color; -} -.color-patch__text-color-subtle { - background-color: $text-color-subtle; -} -.color-patch__text-minor-color { - background-color: $text-minor-color; -} -.color-patch__text-highlight-color { - background-color: $text-highlight-color; -} -.color-patch__text-selected-color { - background-color: $text-selected-color; -} -.color-patch__background-highlight-color { - background-color: $background-highlight-color; -} -.color-patch__background-color { - background-color: $background-color; -} -.color-patch__background-selected-color { - background-color: $background-selected-color; -} -.color-patch__text-muted-color { - background-color: $text-muted-color ; -} -.color-patch__brand-primary { - background-color: $brand-primary; -} -.color-patch__brand-success { - background-color: $brand-success; -} -.color-patch__brand-info { - background-color: $brand-info; -} -.color-patch__brand-warning { - background-color: $brand-warning; -} -.color-patch__brand-danger { - background-color: $brand-danger; -} -.color-patch__brand-text-primary { - background-color: $brand-text-primary; -} -.color-patch__brand-text-success { - background-color: $brand-text-success; -} -.color-patch__brand-text-info { - background-color: $brand-text-info; -} -.color-patch__brand-text-warning { - background-color: $brand-text-warning; -} -.color-patch__brand-text-danger { - background-color: $brand-text-danger; -} - -.panel-example { - border: 1px dashed $text-color; - padding: $panel-body-padding; - - & > div { - border: 1px dashed $text-color; - } -} diff --git a/extensions/StyleGuide/src/StyleGuideExtension.ts b/extensions/StyleGuide/src/StyleGuideExtension.ts deleted file mode 100644 index f4a45d607..000000000 --- a/extensions/StyleGuide/src/StyleGuideExtension.ts +++ /dev/null @@ -1,385 +0,0 @@ -/* - * Copyright 2021 Simon Edwards - * - * This source code is licensed under the MIT license which is detailed in the LICENSE.txt file. - */ - -import { ExtensionContext, ExtensionTab, Logger } from '@extraterm/extraterm-extension-api'; -import { escape } from "he"; - -let log: Logger = null; -let context: ExtensionContext = null; - -export function activate(_context: ExtensionContext): any { - log = _context.logger; - context = _context; - - context.commands.registerCommand("styleguide:open", styleGuideCommand); -} - -let styleGuideTab: ExtensionTab = null; - -function styleGuideCommand(): void { - if (styleGuideTab != null) { - styleGuideTab.open(); - return; - } - - styleGuideTab = context.window.createExtensionTab("styleguide"); - styleGuideTab.title = "Style Guide"; - styleGuideTab.icon = "fas fa-swatchbook"; - styleGuideTab.containerElement.innerHTML = contentsHTML(); - styleGuideTab.containerElement.addEventListener("click", handleClick); - styleGuideTab.onClose(() => { - styleGuideTab = null; - }); - styleGuideTab.open(); -} - -function handleClick(ev: MouseEvent): void { - ev.preventDefault(); - if (( ev.target).tagName === "A") { - const href = ( ev.target).href; - context.application.openExternal(href); - } -} - -function contentsHTML(): string { - return `
-

Style Guide

- -

This guide demonstrates the built in styles and CSS classes for use by - those developing extensions.

-

Extraterm uses SASS at run time to complete CSS style sheets.

- -

Variables

-

- To use thse SASS variables, first import them into your stylesheet with: - '@import "general-gui/variables";' -

- - ${colorPatch([ - "text-color", - "text-color-subtle", - "text-minor-color", - "text-highlight-color", - "text-selected-color", - "text-muted-color", - ])} - - ${colorPatch([ - "background-highlight-color", - "background-color", - "background-selected-color", - ])} - - ${colorPatch([ - "brand-primary", - "brand-success", - "brand-info", - "brand-warning", - "brand-danger", - ])} - - ${colorPatch([ - "brand-text-primary", - "brand-text-success", - "brand-text-info", - "brand-text-warning", - "brand-text-danger" - ])} - -
-
Panel contents
-
The dashed outer box has - "padding: $panel-body-padding;", separating it from the inner box..
-
- -

Text

- ${codeBlockVerbatum(` -

H1 Heading

-

H2 Heading

-

H3 Heading

-

H4 Heading

-
H5 Heading
-
H6 Heading
-

- Plain default text in a paragraph. -

-`)} - -

Buttons

- - ${codeBlock(` - - - - - - `)} - - ${codeBlock(` - - - - - - `)} - - ${codeBlock(` - - - - - - `)} - - ${codeBlock(` - - `)} - - ${codeBlock(` -
-
-
-
-
-
- `)} - - ${codeBlock(` -
- `)} - -

Inputs

- ${codeBlock(` - - - - `)} - - ${codeBlock(` - - `)} - - ${codeBlock(` - - - `)} - - ${codeBlock(` - - - `)} - -

Input validation states

- ${codeBlock(` - - - - - - `)} - -

Button groups

- ${codeBlock(` - - - - - - `)} - -

Input addons

- ${codeBlock(` - euro
- - $
- - $.00 - `)} - -

Progress

- ${codeBlock(` - Indeterminate: - - - `)} - -

GUI Layouts

- ${codeBlockVerbatum(` -
- - - -
Man
-
Woman
-
Other
- -
Tea
-
Coffee
-
- `)} -

- Two columns are supported and the relative columns widths are set using one - of 'cols-1', 'cols-1-1', 'cols-1-2', and 'cols-1-3'. -

- -

GUI Packed Row

-

Neatly packs a bunch of inputs into one row.

- ${codeBlock(` -
- - - - -
- `)} - -

Width Classes

-

Element widths in percent and pixels.

-
-
- width-100pc
- width-800px
- max-width-800px -
-
- -

Character based widths for use on INPUT elements.

-
-
- char-width-2
- char-width-3
- char-width-4
- char-width-6
- char-width-8
- char-width-12
- char-width-20
- char-width-30
- char-width-40
- char-width-60
- char-width-80 -
-
- -

Maximum character based widths for use on INPUT elements.

-
-
- char-max-width-2
- char-max-width-3
- char-max-width-4
- char-max-width-6
- char-max-width-8
- char-max-width-12
- char-max-width-20
- char-max-width-30
- char-max-width-40
- char-max-width-60
- char-max-width-80 -
-
- -

Tables

- ${codeBlockVerbatum(` - - - - - - - - - - - - - - - - - - - - - -
MeaningColor
SuccessGreen
InfoBlue
WarningYellow
- `)} - -

Badges

- ${codeBlockVerbatum(` -

Heading 1

-

Heading 2

-

Heading 3

- -

Success Heading 1

-

Success Heading 2

-

Success Heading 3

- -

Info Heading 1

-

Info Heading 2

-

Info Heading 3

- -

Warning Heading 1

-

Warning Heading 2

-

Warning Heading 3

- -

Danger Heading 1

-

Danger Heading 2

-

Danger Heading 3

- `)} - -

Keycaps

- ${codeBlock(` - Ctrl+K - `)} - -

Font Awesome Icons

-

- The free icons - from Font Awesome 5 icons are available if "fontAwesome" is set to true - in the CSS section of the package.json. -

- - ${codeBlockVerbatum(` -

icon in heading 1

- -

icon in heading 2

- -

plain icon in text.

- `)} - -
-`; -} - -function codeBlockVerbatum(code: string): string { - return `
-
${code}
-
${crToBr(escape(code))}
-
-`; -} - -function codeBlock(code: string): string { - return `
-
${crToBr(code)}
-
${crToBr(escape(code))}
-
-`; -} - -function crToBr(s: string): string { - return s.trim().replace(/\n/g,"
"); -} - - -function colorPatch(names: string[]): string { - return `
-
- ${names.map(color => `
$${color}
`).join("")} -
`; -} diff --git a/extensions/StyleGuide/tsconfig.json b/extensions/StyleGuide/tsconfig.json deleted file mode 100755 index 02cf41050..000000000 --- a/extensions/StyleGuide/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tsconfig", - "compilerOptions": { - "outDir": "build", - "rootDir": "src" - }, - "include": [ - "./src/**/*.ts" - ] -}