Skip to content

Commit

Permalink
TGUI Minor Updates (2024 Pre-React Typescript Edition) (#12066)
Browse files Browse the repository at this point in the history
* color.js: Fix alpha specification (#61324)

Bitwise OR coerces to an integral value. This is fine for the rgb
components as they have a domain of [0,255], but is less useful for
the alpha component, which has a domain of [0,1].

This retains the safely of | while permitting colors that are neither
fully opaque nor fully transparent, including NaN handling.

* tgui: Add new and disambiguate old gas colors (#61381)

This PR adds color mappings for new gases, and disambiguates color mappings for old gases where multiple gases used one color - many used red, or purple.

Most of these have been around for a while, but were missing color mappings in interfaces.

This mainly affects the HFR gas list interface.

* Fixes progress bars (#61604)

Co-authored-by: Watermelon914 <[email protected]>

* New string ops for tgui (#68337)

* initial commit

* by suggestion

Co-Authored-By: Aleksej Komarov <[email protected]>

Co-authored-by: Aleksej Komarov <[email protected]>

* Automatically insert current year for TGUI bluescreen (#72490)

Title

Less hassle

* Renames folder for tgchat CSS styles (#73907)

I think it was previously named "goon" in relation to "goonchat", but
that was phased out three years ago, so it's just confusing to have a
"goon" folder especially when historically those tend to refer to
specialized folders meant for containing content under a non aGPL
license

However, everything in this folder appears to just be styles ported from
goonchat when tgchat was created, which is fine, but it's just confusing
since none of the stuff is licensed under anything from goon- just an
odd name to my eyes.

It's a much more fitting name as to what these files specifically
pertain too, rather than be an arcane reference to a system that has not
been used in quite a while...
nothing that concerns players

* Refactors some core tgui components to typescript (#74547)

Mind you I am very tired while making this and it's purely a thought
project (... unless?)

Otherwise, title. No gameplay changes
Typescript is just universally better. Even if the types are wrong, we
still can get some sort of idea what the author was going for, and
autocompletion
:cl:
refactor: Tgui's state manager is in typescript now, huzzah
/:cl:

---------

Co-authored-by: Jeremiah <[email protected]>

* Converts core tgui to ts (#74638)

Converts the remaining core tgui files into typescript
Builds tests for these files
Completed some todos to rewrite/refactor functions
Typescript good
N/A nothing player facing

---------

Co-authored-by: Jeremiah <[email protected]>

* Dropdown selected element highlighting (#75255)

This PR makes selected elements in Dropdowns to be highlighted.
Without this:

![image](https://user-images.githubusercontent.com/5000549/236760396-5eb71a23-7b3d-4a9e-98d4-6bd4dc5fe1c7.png)
With this:

![image](https://user-images.githubusercontent.com/5000549/236758675-b2ab90a7-0482-492e-b911-9e59f827f6b8.png)
It's convenient to have this kind of selection indication, especially in
long lists.
:cl:
qol: Made selected elements highlighted in TGUI Dropdowns
/:cl:

* Fix: Fixed dropdown buttons empty selected case (#75309)

## About The Pull Request

If dropdown not receive `selected` prop, buttons will be change value to
first(when press next) or last element(when press back)

## Changelog
:cl:
fix: Fixed dropdown buttons empty selected case
/:cl:

* TGUI timer.ts and keys.ts port (partial tgstation/tgstation#75431)

* Prettier

* JSX Conversions

* Fix Debug Stories not picking up JSX

* Bump a bunch of packages (soft port of tgstation/tgstation#79895)

* Fix ESLint

* Switch from Terser to ESBuild for minification (tgstation/tgstation#79916)

* Drops ie8 support (#79974)

<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->
<!-- You can view Contributing.MD for a detailed description of the pull
request process. -->

We currently transpile TGUI down into ie8. This was primarily for Linux
compatibility, which, to my understanding, hasn't worked for quite some
time. As we approach 2024, consider that ie8 is nearly 15 years old and
had its support ended in 2016. I believe sunsetting ie8 is in order.

>I have no objections to remove IE8 support and fully target IE11.

tgstation/tgstation#79943 (comment)

<!-- Describe The Pull Request. Please be sure every change is
documented or this can delay review and even discourage maintainers from
merging your PR! -->

- Probably improves performance to some degree, you're only as slow as
your weakest link.
- Reduced maintenance burden
<!-- Argue for the merits of your changes and how they benefit the game,
especially if they are controversial and/or far reaching. If you can't
actually explain WHY what you are doing will improve the game, then it
probably isn't good for the game in the first place. -->

<!-- If your PR modifies aspects of the game that can be concretely
observed by players or admins you should add a changelog. If your change
does NOT meet this description, remove this section. Be sure to properly
mark your PRs to prevent unnecessary GBP loss. You can read up on GBP
and it's effects on PRs in the tgstation guides for contributors. Please
note that maintainers freely reserve the right to remove and add tags
should they deem it appropriate. You can attempt to finagle the system
all you want, but it's best to shoot for clear communication right off
the bat. -->

N/A if they can even see this message it doesn't affect them

<!-- Both 🆑's are required for the changelog to work! You can put
your name to the right of the first 🆑 if you want to overwrite your
GitHub username as author ingame. -->
<!-- You can use multiple of the same prefix (they're only used for the
icon ingame) and delete the unneeded ones. Despite some of the tags,
changelogs should generally represent how a player might be affected by
the changes rather than a summary of the PR's contents. -->

* Support for newer browsers (my own implementation of tgstation/tgstation#79244)

* Fix Typescript errors

* Prettier

---------

Co-authored-by: esainane <[email protected]>
Co-authored-by: Watermelon914 <[email protected]>
Co-authored-by: Watermelon914 <[email protected]>
Co-authored-by: Jeremiah <[email protected]>
Co-authored-by: Aleksej Komarov <[email protected]>
Co-authored-by: Zephyr <[email protected]>
Co-authored-by: san7890 <[email protected]>
Co-authored-by: Jeremiah <[email protected]>
Co-authored-by: Serge K Lebedev <[email protected]>
Co-authored-by: KoJIT2009 <[email protected]>
  • Loading branch information
11 people authored Dec 31, 2024
1 parent 5e846c3 commit d00a23d
Show file tree
Hide file tree
Showing 386 changed files with 5,306 additions and 5,234 deletions.
4 changes: 2 additions & 2 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,5 @@ Dockerfile @crossedfall

/tgui/packages/tgui/interfaces/
/tgui/packages/tgui/styles/interfaces/
/tgui/packages/tgui-panel/styles/goon/chat-dark.scss
/tgui/packages/tgui-panel/styles/goon/chat-light.scss
/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss
/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss
1 change: 1 addition & 0 deletions code/controllers/subsystem/tgui.dm
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ SUBSYSTEM_DEF(tgui)
var/polyfill = file2text('tgui/public/tgui-polyfill.min.js')
polyfill = "<script>\n[polyfill]\n</script>"
basehtml = replacetextEx(basehtml, "<!-- tgui:inline-polyfill -->", polyfill)
basehtml = replacetextEx(basehtml, "<!-- tgui:nt-copyright -->", "Nanotrasen (c) 2525-[GLOB.year_integer+YEAR_OFFSET]")

/datum/controller/subsystem/tgui/Shutdown()
close_all_uis()
Expand Down
2 changes: 1 addition & 1 deletion interface/stylesheet.dm
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/// !!!!!!!!!!HEY LISTEN!!!!!!!!!!!!!!!!!!!!!!!!
/// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

// If you modify this file you ALSO need to modify code/modules/goonchat/browserAssets/browserOutput.css
// If you modify this file you ALSO need to modify tgui/packages/tgui-panel/styles/tgchat/chat-light.scss and chat-dark.scss
// BUT you have to use PX font sizes with are on a x8 scale of these font sizes
// Sample font-size: DM: 8 CSS: 64px

Expand Down
2 changes: 1 addition & 1 deletion tgui/.eslintrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -651,7 +651,7 @@ rules:
## Enforce ES5 or ES6 class for React Components
react/prefer-es6-class: error
## Enforce that props are read-only
react/prefer-read-only-props: error
# react/prefer-read-only-props: error
## Enforce stateless React Components to be written as a pure function
react/prefer-stateless-function: error
## Prevent missing props validation in a React component definition
Expand Down
5 changes: 5 additions & 0 deletions tgui/.yarnrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ logFilters:
- code: YN0062
level: discard

packageExtensions:
'babel-plugin-inferno@*':
dependencies:
'@babel/core': '*'

plugins:
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
spec: '@yarnpkg/plugin-interactive-tools'
Expand Down
2 changes: 1 addition & 1 deletion tgui/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const createBabelConfig = (options) => {
...presets,
].filter(Boolean),
plugins: [
[require.resolve('@babel/plugin-proposal-class-properties'), {
[require.resolve('@babel/plugin-transform-class-properties'), {
loose: true,
}],
require.resolve('@babel/plugin-transform-jscript'),
Expand Down
6 changes: 5 additions & 1 deletion tgui/docs/component-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -773,7 +773,11 @@ percentage and how filled the bar is.
- `maxValue: number` - Highest possible value.
- `ranges: { color: [from, to] }` - Applies a `color` to the progress bar
based on whether the value lands in the range between `from` and `to`.
- `color: string` - Color of the progress bar.
- `color: string` - Color of the progress bar. Can take any of the following formats:
- `#ffffff` - Hex format
- `rgb(r,g,b) / rgba(r,g,b,a)` - RGB format
- `<name>` - the name of a `color-<name>` CSS class. See `CSS_COLORS` in `constants.js`.
- `<name>` - the name of a base CSS color, if not overridden by the definitions above.
- `children: any` - Content to render inside the progress bar.

### `Section`
Expand Down
2 changes: 2 additions & 0 deletions tgui/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -201,4 +201,6 @@ const Byond: ByondType;

interface Window {
Byond: ByondType;
__store__: Store<unknown, AnyAction>;
__augmentStack__: (store: Store) => StackAugmentor;
}
6 changes: 3 additions & 3 deletions tgui/jest.config.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
module.exports = {
roots: ['<rootDir>/packages'],
testMatch: ['<rootDir>/packages/**/__tests__/*.{js,ts,tsx}', '<rootDir>/packages/**/*.{spec,test}.{js,ts,tsx}'],
testMatch: ['<rootDir>/packages/**/__tests__/*.{js,jsx,ts,tsx}', '<rootDir>/packages/**/*.{spec,test}.{js,jsx,ts,tsx}'],
testPathIgnorePatterns: ['<rootDir>/packages/tgui-bench'],
testEnvironment: 'jsdom',
testRunner: require.resolve('jest-circus/runner'),
transform: {
'^.+\\.(js|cjs|ts|tsx)$': require.resolve('babel-jest'),
'^.+\\.(js|jsx|cjs|ts|tsx)$': require.resolve('babel-jest'),
},
moduleFileExtensions: ['js', 'cjs', 'ts', 'tsx', 'json'],
moduleFileExtensions: ['js', 'jsx', 'cjs', 'ts', 'tsx', 'json'],
resetMocks: true,
};
70 changes: 35 additions & 35 deletions tgui/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"private": true,
"name": "tgui-workspace",
"version": "4.3.0",
"version": "4.4.0",
"packageManager": "[email protected]",
"workspaces": [
"packages/*"
Expand All @@ -11,58 +11,58 @@
"tgui:bench": "webpack --env TGUI_BENCH=1 && node packages/tgui-bench/index.js",
"tgui:build": "BROWSERSLIST_IGNORE_OLD_DATA=true webpack",
"tgui:dev": "node --experimental-modules packages/tgui-dev-server/index.js",
"tgui:lint": "eslint packages --ext .js,.cjs,.ts,.tsx",
"tgui:lint": "eslint packages --ext .js,.cjs,.jsx,.ts,.tsx",
"tgui:prettier": "prettierx --check .",
"tgui:prettier-format": "prettierx --write packages",
"tgui:sonar": "eslint packages --ext .js,.cjs,.ts,.tsx -c .eslintrc-sonar.yml",
"tgui:sonar": "eslint packages --ext .js,.cjs,.jsx,.ts,.tsx -c .eslintrc-sonar.yml",
"tgui:test": "jest --watch",
"tgui:test-simple": "CI=true jest --color",
"tgui:test-ci": "CI=true jest --color --collect-coverage",
"tgui:tsc": "tsc"
},
"dependencies": {
"@babel/core": "^7.21.0",
"@babel/eslint-parser": "^7.19.1",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-syntax-jsx": "^7.18.6",
"@babel/plugin-transform-jscript": "^7.20.2",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.21.0",
"@types/jest": "^29.4.0",
"@types/jsdom": "^21.1.0",
"@babel/core": "^7.26.0",
"@babel/eslint-parser": "^7.25.9",
"@babel/plugin-syntax-jsx": "^7.25.9",
"@babel/plugin-transform-class-properties": "^7.25.9",
"@babel/plugin-transform-jscript": "^7.25.9",
"@babel/preset-env": "^7.26.0",
"@babel/preset-typescript": "^7.26.0",
"@types/jest": "^29.5.14",
"@types/jsdom": "^21.1.7",
"@types/node": "18.x",
"@types/webpack": "^5.28.0",
"@types/webpack-env": "^1.18.0",
"@typescript-eslint/parser": "^5.54.1",
"babel-jest": "^29.5.0",
"babel-loader": "^9.1.2",
"babel-plugin-inferno": "^6.6.0",
"@types/webpack": "^5.28.5",
"@types/webpack-env": "^1.18.5",
"@typescript-eslint/parser": "^5.62.0",
"babel-jest": "^29.7.0",
"babel-loader": "9.1.2",
"babel-plugin-inferno": "^6.7.2",
"babel-plugin-transform-remove-console": "^6.9.4",
"common": "workspace:*",
"css-loader": "^6.7.3",
"css-loader": "6.8.1",
"esbuild-loader": "^4.2.2",
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-sonarjs": "^0.18.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-sonarjs": "^0.23.0",
"eslint-plugin-unused-imports": "^2.0.0",
"file-loader": "^6.2.0",
"inferno": "^8.2.1",
"jest": "^29.5.0",
"jest-circus": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"jsdom": "^21.1.0",
"mini-css-extract-plugin": "^2.7.3",
"inferno": "^8.2.3",
"jest": "^29.7.0",
"jest-circus": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jsdom": "^25.0.1",
"mini-css-extract-plugin": "2.7.6",
"prettier": "npm:[email protected]",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.7",
"ts-plugin-inferno": "^6.0.0",
"sass": "1.69.5",
"sass-loader": "13.3.2",
"style-loader": "3.3.3",
"ts-plugin-inferno": "^6.1.0",
"typescript": "^4.9.5",
"url-loader": "^4.1.1",
"webpack": "^5.81.0",
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^5.0.1"
"webpack": "^5.97.1",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^6.0.1"
},
"resolutions": {
"minimist": "^1.2.6",
Expand Down
10 changes: 9 additions & 1 deletion tgui/packages/common/color.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,15 @@ export class Color {
}

toString() {
return `rgba(${this.r | 0}, ${this.g | 0}, ${this.b | 0}, ${this.a | 0})`;
// Alpha component needs to permit fractional values, so cannot use |
let alpha = this.a;
if (typeof alpha === 'string') {
alpha = parseFloat(this.a as any);
}
if (isNaN(alpha)) {
alpha = 1;
}
return `rgba(${this.r | 0}, ${this.g | 0}, ${this.b | 0}, ${alpha})`;
}

/**
Expand Down
File renamed without changes.
39 changes: 39 additions & 0 deletions tgui/packages/common/keys.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* ### Key codes.
* event.keyCode is deprecated, use this reference instead.
*
* Handles modifier keys (Shift, Alt, Control) and arrow keys.
*
* For alphabetical keys, use the actual character (e.g. 'a') instead of the key code.
*
* Something isn't here that you want? Just add it:
* @url https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
* @usage
* ```ts
* import { KEY } from 'tgui/common/keys';
*
* if (event.key === KEY.Enter) {
* // do something
* }
* ```
*/
export enum KEY {
Alt = 'Alt',
Backspace = 'Backspace',
Control = 'Control',
Delete = 'Delete',
Down = 'Down',
End = 'End',
Enter = 'Enter',
Escape = 'Esc',
Home = 'Home',
Insert = 'Insert',
Left = 'Left',
PageDown = 'PageDown',
PageUp = 'PageUp',
Right = 'Right',
Shift = 'Shift',
Space = ' ',
Tab = 'Tab',
Up = 'Up',
}
58 changes: 58 additions & 0 deletions tgui/packages/common/redux.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { Action, Reducer, applyMiddleware, combineReducers, createAction, createStore } from './redux';

// Dummy Reducer
const counterReducer: Reducer<number, Action<string>> = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};

// Dummy Middleware
const loggingMiddleware = (storeApi) => (next) => (action) => {
console.log('Middleware:', action);
return next(action);
};

// Dummy Action Creators
const increment = createAction('INCREMENT');
const decrement = createAction('DECREMENT');

describe('Redux implementation tests', () => {
test('createStore works', () => {
const store = createStore(counterReducer);
expect(store.getState()).toBe(0);
});

test('createStore with applyMiddleware works', () => {
const store = createStore(counterReducer, applyMiddleware(loggingMiddleware));
expect(store.getState()).toBe(0);
});

test('dispatch works', () => {
const store = createStore(counterReducer);
store.dispatch(increment());
expect(store.getState()).toBe(1);
store.dispatch(decrement());
expect(store.getState()).toBe(0);
});

test('combineReducers works', () => {
const rootReducer = combineReducers({
counter: counterReducer,
});
const store = createStore(rootReducer);
expect(store.getState()).toEqual({ counter: 0 });
});

test('createAction works', () => {
const incrementAction = increment();
expect(incrementAction).toEqual({ type: 'INCREMENT' });
const decrementAction = decrement();
expect(decrementAction).toEqual({ type: 'DECREMENT' });
});
});
Loading

0 comments on commit d00a23d

Please sign in to comment.