This commit unifies the concepts of executables having same ID
structure. It paves the way for more complex ID structure and using IDs
in collection files as part of new ID solution (#262). Using string IDs
also leads to more expressive test code.
This commit also refactors the rest of the code to adopt to the changes.
This commit:
- Separate concerns from entities for data access (in repositories) and
executables. Executables use `Identifiable` meanwhile repositories use
`RepositoryEntity`.
- Refactor unnecessary generic parameters for enttities and ids,
enforcing string gtype everwyhere.
- Changes numeric IDs to string IDs for categories to unify the
retrieval and construction for executables, using pseudo-ids (their
names) just like scripts.
- Remove `BaseEntity` for simplicity.
- Simplify usage and construction of executable objects.
Move factories responsible for creation of category/scripts to domain
layer. Do not longer export `CollectionCategorY` and
`CollectionScript`.
- Use named typed for string IDs for better differentation of different
ID contexts in code.
This commit fixes a bug that causes tooltips to be slightly misaligned.
Tooltip positioning was incorrect during modal transitions due to their
initial movement, causing tooltips to align incorrectly at the start of
the animation rather than the end.
One way to solve this would be using `autoUpdate` from `floating-ui`
with `animationFrame: true`. However, this recalculates positions tens
of times per second, impacting performance. This is a monkey solution.
This commit adopts a more efficient approach by updating tooltip
positions only at the end of the transitions, which reduces calculations
and conserves resources.
Key changes:
- Addd transition end event listener for updating tooltip positions.
- Use throttling to eliminate excessive position recalculations.
Other supporting changes:
- Improve throttle function to support efficient recalculations of
positions:
- Add ability to optionally exclude the first execution (leading
call).
- Refactor to simplify it make it easier to follow and read.
- Fix a bug where initial calls were incorrectly throttled if
`dateNow()` returned `0`.
- Introduce and use a global hook for efficient DOM event management.
This greatily introduce safety, reuse and testability of event
listening.
This commit improves UI consistency. It also improves maintainability by
removing "magic values" in favor of standardized spacing throughout the
application.
- Adjust spacing variables to match the convention.
- Add `_spacing.scss` to define a centralized set of spacing variables, both
absolute and relative, to standardize the spacing throughout the application.
This new approach ensures a consistent spacing logic across all components and
layouts, facilitating easier maintenance and scalability of the styling codebase.
- Update various SCSS styles to utilize the new spacing variables. This change
harmonizes the spacing across different parts of the application, aligning with
the new design system's principles.
- Slightly adjust existing padding/margin/gaps for better consistency.
Other supporting changes per component:
- RatingCircle: Update style names to match convention and simplify
hacky way to inject circle width value through CSS variables. Add
tests for the new behavior and refactor existing tests for easier
extensibility.
- TheFooter: Add small gap when footer items wrap.
- HiearchicalTreeNode: Refactor variables to separate caret size clearly
from padding applied.
- App: Make padding responsive as initial behavior of v0.13.0 before
5d940b57ef.
- ModalDialog: Use responsive absolute values instead of percentage.
- HorizontalResizeSlider:
- Use `v-bind` instead of hacky way to inject SCSS values through variables.
- Remove `verticalMargin` property to simplify its styling.
- Move `src/presentation/assets/styles/components/_card.scss` closer to
components that it styles. Update structure documentation.
The centralization of spacing definitions will aid in future design
adjustments, ensuring that updates to spacing can be made swiftly and
uniformly across the application. It's a step towards a more maintainable
and scalable frontend architecture.
Key changes:
- Change main font to Roboto Slab for enhanced readability.
- Change code font to 'Source Code Pro' for consistent monospace code
rendering.
- Import and set code font explicitly for uniform appearance across
platforms.
- Update Slabo 27px (logo font) version from v6 to v14.
- Update Yesteryear (cursive font) version from v8 to v18.
- Drop support for historic browser-specific formats, retaining only
WOFF2 for modern and TTF for legacy browsers.
- Use `font-display: swap` to improve perceived load times and minimize
layout shifts.
Supporting changes:
- Simplify font-weight usage to 'normal' and 'bold' for consistency.
- Adjust inline code padding for better scalability and prevent
overflow.
- Introduce `$font-main` as main font variable.
- Remove specification of main font as it's best practice to rely on the
default font defined on `body` style.
- Specify font in code area to ensure it uses the code font consistently
as the rest of the application.
- Remove local font search through `local` to simplify the import logic
and prioritize consistency over performance.
- Import bold font explicitly (`font-weight: 700`) for smooth and
consistent rendering.
- Move `font-family` definitions to `_typography.scss` to better adhere
to the common standards and conventions.
- Refactor font variables to have `font-family-` prefix instead of
`font-` to improve clarity and differentiation between `font-size`
variables.
- Rename 'artistic' font to 'cursive' for preciseness and clarity.
- Use smaller font sizes to match the new main font size, as Roboto Slab
is relatively larger.
- Add missing fallbacks for serif fonts to improve fault tolerance.
- Change padding slightly on toggle switch for revert buttons to align
well with new main font and its sizing.
This commit improves markdown rendering to convert reference labels
(e.g., `[1]`) to superscripts, improving document readability without
cluttering the text. This improvement applies documentation of all
scripts and categories.
Changes:
- Implement superscript conversion for reference labels within markdown
content, ensuring a cleaner presentation of textual references.
- Enable HTML content within markdown, necessary for inserting `<sup>`
elements due to limitations in `markdown-it`, see
markdown-it/markdown-it#999 for details.
- Refactor markdown rendering process for improved testability and
adherence to the Single Responsibility Principle.
- Create `_typography.scss` with font size definitions, facilitating
better control over text presentation.
- Adjust external URL indicator icon sizing for consistency, aligning
images with the top of the text to maintain a uniform appearence.
- Use normal font-size explicitly for documentation text to ensure
consistency.
- Remove text size specification in `markdown-styles` mixin, using `1em`
for spacing to simplify styling.
- Rename font sizing variables for clarity, distinguishing between
absolute and relative units.
- Change `font-size-relative-smaller` to be `80%`, browser default for
`font-size: smaller;` CSS style and use it with `<sup>` elements.
- Improve the logic for converting plain URLs to hyperlinks, removing
trailing whitespace for cleaner link generation.
- Fix plain URL to hyperlink (autolinking) logic removing trailing
whitespace from the original markdown content. This was revealed by
tests after separating its logic.
- Increase test coverage with more tests.
- Add types for `markdown-it` through `@types/markdown-it` package for
better editor support and maintainability.
- Simplify implementation of adding custom anchor attributes in
`markdown-it` using latest documentation.
This commit standardizes font sizes across components for a uniform
look. The icon sizes, font weights and line heights are also adjusted
accordingly for better standardization and simplicity.
- Introduce variables for standard font sizes, enhancing
maintainability.
- Remove explicit pixel values, replaced with scalable units based on
root size.
- Remove workaround for line-height adoptation of bigger font-size.
- Use consistent small font-size for the code area.
- Adjust checkbox tick to scale with font size.
These updates ensure better adherence to Vue 3 standards and improve
overall code quality and readability.
- Update ESLint configuration from Vue 2.x to Vue 3 rules.
- Switch from "essential" to strictest "recommended" ESLint ruleset.
- Adjust ESLint script to treat warnings as errors by using
`--max-warnings=0` flag. This enforces stricter code quality controls
provided by Vue 3 rules.
This commit fixes layout shifts that occur on card list part of the page
when the page is initially loaded.
- Resolve issue where card list starts with minimal width, leading
to jumps in UI until correct width is calculated on medium and
big screens.
- Dispose of existing `ResizeObserver` properly before creating a new
one. This prevents leaks and incorrect width calculations if
`containerElement` changes.
- Throttle resize events to minimize width/height calculation changes,
enhancing performance and reducing the chances for layout shifts.
Supporting CI/CD improvements:
- Enable artifact upload in CI/CD even if E2E tests fail.
- Distinguish uploaded artifacts by operating system for clarity.
This commit applies `strictNullChecks` to the entire codebase to improve
maintainability and type safety. Key changes include:
- Remove some explicit null-checks where unnecessary.
- Add necessary null-checks.
- Refactor static factory functions for a more functional approach.
- Improve some test names and contexts for better debugging.
- Add unit tests for any additional logic introduced.
- Refactor `createPositionFromRegexFullMatch` to its own function as the
logic is reused.
- Prefer `find` prefix on functions that may return `undefined` and
`get` prefix for those that always return a value.
This commit improves the dependency injection mechanism by introducing a
custom `injectKey` function.
Key improvements are:
- Enforced type consistency during dependency registration and
instantiation.
- Simplified injection process, abstracting away the complexity with a
uniform API, regardless of the dependency's lifetime.
- Eliminated the possibility of `undefined` returns during dependency
injection, promoting fail-fast behavior.
- Removed the necessity for type casting to `symbol` for injection keys
in unit tests by using existing types.
- Consalidated imports, combining keys and injection functions in one
`import` statement.
This commit simplifies event handling, providing a unified and robust
way to handle event lifecycling. This way, it fixes events not being
unsubscribed when state is changed.
Introduce a new function in `EventSubscriptionCollection` to remove
existing events and adding new events. This provides an easier to use
API, which leads to code that's easier to understand. It also prevents
potential bugs that may occur due to forgetting to call both functions.
It fixes `TheScriptsMenu` not unregistering events on state change.
Other improvements include:
- Include a getter to get total amount of registered subcriptions.
This helps in unit testing.
- Have nullish checks to prevent potential errors further down the
execution.
- Use array instead of rest parameters to increase readability and
simplify tests.
Ensure `SliderHandler` stops resizes on unmount, unsubscribing from all
events and resetting state to default.
Update `injectionKeys` to do imports as types to avoid circular
dependencies. Simplify importing `injectionKeys` to enable and strict
typings for iterating injection keys.
Add tests covering new behavior.
- Remove existing integration tests for hooks as they're redundant after
this change.
- Document the pattern in relevant documentation.
- Introduce `useEnvironment` to increase testability.
- Update components to inject dependencies rather than importing hooks
directly.
- Migrate `StatefulVue`:
- Introduce `UseCollectionState` that replaces its behavior and acts
as a shared state store.
- Add more encapsulated, granular functions based on read or write
access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
modern parses, fix linting errors.
- Rename Dialog to ModalDialog as after refactoring,
eslintvue/no-reserved-component-names does not allow name Dialog.
- To comply with `vue/multi-word-component-names`, rename:
- `Code` -> `CodeInstruction`
- `Handle` -> `SliderHandle`
- `Documentable` -> `DocumentableNode`
- `Node` -> `NodeContent`
- `INode` -> `INodeContent`
- `Responsive` -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
dependencies.
- Refactor `watch` with computed properties when possible for cleaner
code.
- Introduce `UseApplication` to reduce repeated code in new components
that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
for getting application context/state/instance to simplify the code by
removing async calls. However, mocha (unit and integration) tests do
not run with top level awaits, so a workaround is used.
- Migrate to newer `eslint-config-airbnb-with-typescript` from
`eslint-config-airbnb`.
- Add also `rushstack/eslint-patch` as per instructed by
`eslint-config-airbnb-with-typescript` docs.
- Update codebase to align with new linting standards.
- Add script to configure VS Code for effective linting for project
developers, move it to `scripts` directory along with clean npm
install script for better organization.
Major refactoring using ESLint with rules from AirBnb and Vue.
Enable most of the ESLint rules and do necessary linting in the code.
Also add more information for rules that are disabled to describe what
they are and why they are disabled.
Allow logging (`console.log`) in test files, and in development mode
(e.g. when working with `npm run serve`), but disable it when
environment is production (as pre-configured by Vue). Also add flag
(`--mode production`) in `lint:eslint` command so production linting is
executed earlier in lifecycle.
Disable rules that requires a separate work. Such as ESLint rules that
are broken in TypeScript: no-useless-constructor (eslint/eslint#14118)
and no-shadow (eslint/eslint#13014).
Using more granular interfaces adds to expressiveness of the code.
Knowing what needs to mutate the state explicitly helps easier
understanding of the code and therefore increases the maintainability.
- Add more documentation.
- Use `main.scss` instead of importing components individually. This
improves productivity without compilation errors due to missing
imports and allows for easier future file/folder changes and
refactorings inside `./styles`.
- Use partials with underscored naming. Because it documents that the
files should not be individually imported.
- Introduce `third-party-extensions` folder to group styles that
overwrites third party components.
- Refactor variable names from generic to specific.
- Use Sass modules (`@use` and `@forward`) over depreciated `@import`
syntax.
- Separate font assets from Sass files (`styles/`). Create `assets/`
folder that will contain both.
- Create `_globals.css` for global styling of common element instead of
using `App.vue`.
1. It vertically centers top script menu (including selectors for view,
OS and recommendation levels). Before, it did not utilize the empty
space on smaller screens when of the menu items overflowed to a new
line. This commit fixes it, also adds margin on top selectors on
small screens.
2. It adds vertical margin between slider items on vertical view. It
also refactors slider component so that the `v-deep` is no longer
used, instead style is set through properties.
3. It ensures symmetrical margin on both sides of the handle in slider
during horizontal view. Before, the left margin did not exist and
right margin was too wide. This commit balances right and left margin
of the arrow.
4. It changes the way margining is done for the card list. It removes
internal margin from cards, because when they have them they also add
that to the outer card list. This commit solves it in a way that
unifies setting gap between cards and setting gap between cards.
The styles are controlled on card list instead. This way same margins
and paddings is also applied to non-card view (i.e. scripts tree).
Before margining was done separately and those views looked
diferently.
5. It improves styling of cards. It uses variables instead of hardcoded
values and also refactors and renames variables for simpler
understanding.
Detects clickable elements automatically and exempts them from
collapsing cards, also interacting with code area does no longer
collapse cards.
This commit also fixes subscribing to clicks on document every time card
list is loaded, but never unsubscribing. This impacts performance and
causes memory leaks. Now, registered event listener is removed every
time card list component is destroyed.
1. *Grouping* becomes *view*. Because *view* is more clear and extensible than *grouping*. It increases flexibility to extend by e.g. adding *flat* as a new view as discussed in #50, in this case "flat *view*" would make more sense than "flat *grouping*".
2. *None* becomes *tree*. Because *tree* is more descriptive than *none*.
Updates labels on top menu. As labels are updated, the file structure/names are refactored to follow the same concept. `TheScriptsList` is renamed to `TheScriptsView`. Also refactors `ViewChanger` so view types are presented in same way.
