npm - @lion/ui - Versions diffs - 0.24.0 → 0.26.0 - Mend

@lion/ui 0.24.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (789) hide show

package/docs/fundamentals/node-tools/providence-analytics/overview.md DELETED Viewed

@@ -1,108 +0,0 @@
----
-parts:
-  - Overview
-  - Providence Analytics
-  - Node Tools
-title: 'Overview'
-eleventyNavigation:
-  key: Node Tools >> Providence Analytics >> Overview
-  title: Overview
-  order: 10
-  parent: Node Tools >> Providence Analytics
----
-# Overview
-```js script
-import { html } from '@mdjs/mdjs-preview';
-```
-Providence is the 'All Seeing Eye' that generates usage statistics by analyzing code.
-It measures the effectivity and popularity of your software.
-With just a few commands you can measure the impact for (breaking) changes, making
-your release process more stable and predictable.
-For instance for a repo "lion-based-ui" that extends @lion/\* we can answer questions like:
-- **Which subsets of my product are popular?**
-  Which exports of reference project @lion/form-core are consumed by target project "lion-based-ui"?
-- **How do sub classers consume/override my product?**
-  Which classes / webcomponents inside target project "lion-based-ui" extend from reference project `@lion/\*`?
-  Which of the methods within those classes are overridden?
-- etc...
-Providence uses abstract syntax trees (ASTs) to have the most advanced analysis possible.
-It does this via the [oxc parser](https://oxc.rs/docs/guide/usage/parser.html), the quickest parser available today!
-## Run
-Providence expects an analyzer name that tells it what type of analysis to run:
-```bash
-npx providence-analytics analyze <analyzer-name>
-```
-By default Providence ships these analyzers:
-- find-imports
-- find-exports
-- find-classes
-- match-imports
-- match-subclasses
-Let's say we run `find-imports`:
-```bash
-npx providence-analytics analyze find-imports
-```
-Now it retrieves all relevant data about es module imports.
-There are plenty of edge cases that it needs to take into account here;
-you can have a look at the tests to get an idea about all different cases Providence handles for you.
-## Projects
-Providence uses the concept of projects. A project is a piece of software to analyze:
-usually an npm artifact or a git (mono-)repository. What all projects have in common,
-is a package.json. From it, the following project data is derived:
-- the name
-- the version
-- the files it uses for scanning. One of the following strategies is usually followed:
-  - exportmap entrypoints (by 'expanding' package.json "exports" on file system)
-  - npm files (it reads package.json "files" | .npmignore)
-  - the git files (it reads .gitignore)
-  - a custom defined list
-For a "find" analyzer, there is one project involved (the target project).
-We can specify it like this (we override the default current working directory):
-```bash
-npx providence-analytics analyze find-imports -t /importing/project
-```
-For a "match" analyzer, there is also a reference project.
-Here we match the exports of the reference project (-r) against the imports of the target project (-t).
-```bash
-npx providence-analytics analyze match-imports -t /importing/project -r /exporting/project
-```
-## Utils
-Providence comes with many tools for deep traversal of identifiers,
-the (babel like) traversal of ast trees in oxc and more.
-Also more generic utils for caching and performant globbing come delivered with Providence.
-For a better understanding, check out the utils folders (tests and code).
-## More
-For more options, see:
-```bash
-npx providence-analytics --help
-```

package/docs/fundamentals/node-tools/publish-docs/index.md DELETED Viewed

@@ -1,13 +0,0 @@
----
-parts:
-  - Publish Docs
-  - Node Tools
-title: 'Publish Docs'
-eleventyNavigation:
-  key: Node Tools >> Publish Docs
-  title: Publish Docs
-  order: 10
-  parent: Node Tools
----
-# Publish Docs

package/docs/fundamentals/node-tools/publish-docs/overview.md DELETED Viewed

@@ -1,149 +0,0 @@
----
-parts:
-  - Overview
-  - Publish Docs
-  - Node Tools
-title: 'Overview'
-eleventyNavigation:
-  key: Node Tools >> Publish Docs >> Overview
-  title: Overview
-  order: 10
-  parent: Node Tools >> Publish Docs
----
-# Overview
-A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.
-It will:
-- copy files into your npm package (which is especially useful for mono repositories)
-- processes all markdown files by replacing all relative links to full absolute urls to the commit sha on GitHub
-- have a document structure that is useable on GitHub
-## Installation
-For a Mono Repository
-1. Add dependency
-   ```bash
-   npm i -D publish-docs
-   ```
-2. Add to your `packages/[my-package]/package.json`:
-   ```js
-   "scripts": {
-      "prepublishOnly": "publish-docs --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../"
-   }
-   ```
-3. Replace you `packages/[my-package]/README.md` with
-   ```md
-   # My Pkg
-   [=> See Source <=](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/docs/deep/dir/overview.md)
-   ```
-## CLI flags
-| name         | type   | description                                                                                  |
-| ------------ | ------ | -------------------------------------------------------------------------------------------- |
-| github-url   | string | Defines which GitHub Urls should be generated for relative links (mandatory)                 |
-| project-dir  | string | The directory of your project/package. Defaults to the current working directory             |
-| git-root-dir | string | The directory of your git entry point. Defaults to the current working directory             |
-| copy-dir     | string | Allows to copies the content of a folder into the copy-target (relative to the git-root-dir) |
-| copy-target  | string | Copies all files into the target (e.g. flattening the directory structure)                   |
-Examples:
-```
-cd packages/my-pkg/
-publish-docs --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../
-publish-docs --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../ --copy-dir docs/my-components/assets
-```
-## More Files
-Often it makes sense to have multiple documentation files. If you want to bring them along you can do so by adding more `[=> See Source <=]` hooks.
-Bring the `overview.md` in a docs folder along.
-👉 `packages/[my-package]/docs/overview.md`
-```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/docs/deep/dir/overview.md)
-```
-Add a `use-cases.md`
-👉 `packages/[my-package]/docs/use-cases.md`
-```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/docs/deep/dir/use-cases.md)
-```
-So you will end up with something like this in your package.
-```
-.
-├── docs
-│   ├── use-cases.md
-│   └── overview.md
-├── src
-│   ├── my-code.js
-│   └── ...
-├── package.json
-└── README.md
-```
-Each of those md files will have a followable link on GitHub and will be replaced with the actual documentation before you publish it.
-## Copying assets
-On top of markdown documentation, there is often the need to bring along accompanying assets.
-For that, a copy dir can be provided.
-Note: This pattern is relative to the `git-root-dir`
-Therefore given the following tree
-```
-.
-├── docs
-│   ├── green
-│   │   ├── green-data.json
-│   │   └── overview.md
-│   └── red
-│       ├── assets
-│       │   ├── more
-│       │   │   └── red-data.json
-│       │   └── red-data.json
-│       └── overview.md
-└── packages
-   └── my-pkg       <-- executed here
-         ├── docs
-         │   └── overview.md
-         └── README.md
-```
-we can copy the red assets folder by providing the following copy-dir
-```js
-"prepublish": "publish-docs --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../ --copy-dir docs/red/assets"
-```
-The published package will look like this
-```
-├── docs
-│   ├── assets
-│   │   ├── more
-│   │   │   └── red-data.json
-│   │   └── red-data.json
-│   └── overview.md
-└── README.md
-```

package/docs/fundamentals/node-tools/remark-extend/index.md DELETED Viewed

@@ -1,13 +0,0 @@
----
-parts:
-  - Remark Extend
-  - Node Tools
-title: 'Remark Extend'
-eleventyNavigation:
-  key: Node Tools >> Remark Extend
-  title: Remark Extend
-  order: 30
-  parent: Node Tools
----
-# Remark Extend

package/docs/fundamentals/node-tools/remark-extend/overview.md DELETED Viewed

@@ -1,287 +0,0 @@
----
-parts:
-  - Overview
-  - Remark Extend
-  - Node Tools
-title: 'Overview'
-eleventyNavigation:
-  key: Node Tools >> Remark Extend >> Overview
-  title: Overview
-  order: 10
-  parent: Node Tools >> Remark Extend
----
-# Overview
-A plugin for remark to extend markdown by importing from source files.
-`remark-extend` is build to be integrated within the [unifiedjs](https://unifiedjs.com/) system.
-## Installation
-```bash
-npm i -D remark-extend
-```
-````js
-const unified = require('unified');
-const markdown = require('remark-parse');
-const mdStringify = require('remark-html');
-const { remarkExtend } = require('remark-extend');
-const sourceMd = [
-  //
-  '# Headline',
-  "```js ::import('@name/pkg/README.md')",
-  '```',
-].join('\n');
-const parser = unified().use(markdown).use(remarkExtend).use(mdStringify);
-const result = await parser.process(sourceMd);
-````
-## Importing a block
-In many cases, the full file might be too much so you want to import a "block".
-A block starts with a headline and ends when the next headline of an equal level starts.
-```md
-## Block one
-Content of block one
-## Block two
-Content of block two
-### Sub headline in block two
-Still content of block two
-## Block three
-Content of block three
-```
-Now if you wish to import only block two you can write.
-````md
-# Blew you will find Block two
-```js ::importBlock('./path/to/file.md', '## Block two')
-```
-````
-### Result after import
-```md
-# Blew you will find Block two
-## Block two
-Content of block two
-### Sub headline in block two
-Still content of block two
-```
-PS: importBlock is a faster way of writing imports for headlines
-```md
-::importBlock('./path/to/file.md', '## red')
-// is the same as
-::import('./path/to/file.md', 'heading[depth=2]:has([value=red])', 'heading[depth=2]:has([value=red]) ~heading[depth=2]')
-```
-## Block Variations
-Besides block there are is also `::importBlockContent`, `::importSmallBlock` and `::importSmallBlockContent`.
-- `::importBlockContent` will take the same block (headline to next headline of equal level) but excludes the headline.
-- `::importSmallBlock` will import a small block (headline to any next headline)
-Given the following content let's compare what the content would be.
-```md
-# My Package
-Intro to my Package
-## Installation
-How to install my package
-```
-### `::importBlock('./path/to/file.md', '# My Package')`
-```md
-# My Package
-Intro to my Package
-## Installation
-How to install my package
-```
-### `::importBlockContent('./path/to/file.md', '# My Package')`
-```md
-Intro to my Package
-## Installation
-How to install my package
-```
-### `::importSmallBlock('./path/to/file.md', '# My Package')`
-```md
-# My Package
-Intro to my Package
-```
-### `::importSmallBlockContent('./path/to/file.md', '# My Package')`
-```md
-Intro to my Package
-```
----
-## Adjusting imported content
-If a function gets placed in the import code block then it does get called for every node from the starting point (including the starting point).
-Note: does work for `::import` and `::importBlock`
-### Adjustment Input File
-👉 `file.md`
-```md
-### Red
-red is the fire
-```
-#### Adjustment Extending File
-The goal is to replace all red with green.
-````md
-# Below you will not find any read
-```js ::import('./path/to/file.md')
-module.exports.replaceSection = node => {
-  if (node.value) {
-    node.value = node.value.replace(/red/g, 'green').replace(/Red/g, 'Green');
-  }
-  return node;
-};
-```
-````
-This function gets called with these nodes in order.
-1. root
-2. heading
-3. text
-4. paragraph
-5. text
-#### Adjustment Result
-```md
-# Below you will not find any 'red'
-### Green
-green is the fire
-```
----
-It's also possible to globally define a replace function.
-The example below shows the config object that is provided to the `remarkExtend` function.
-Note that local replacements are run after global replacements.
-```js
-{ globalReplaceFunction: node => {
-  if (node.type === 'link') {
-    // All internal links to '/systems/' (like '(../../fundamentals/systems/overlays/configuration.md)'),
-    // will be changed into '/web-systems/' ('(../../fundamentals/web-systems/overlays/configuration.md)').
-    node.url = node.url.replace(/\systems\/g, '/web-systems/');
-  }
-  return node;
-}};
-```
-## Import selection
-For `::import` you can provide a start and end selector based on [unist-util-select](https://github.com/syntax-tree/unist-util-select#support).
-Some examples are:
-- `:root` for the top of the markdown file
-- `:scope:last-child` for the end of the markdown file
-- `heading:has([value=Red])` first heading with a text value of Red (e.g. ### Red)
-- `heading[depth=2]` first second level heading (e.g. ## Something)
-- `heading[depth=2]:has([value=Red]) ~ heading[depth=2]` following h2 after h2 with "Red" (e.g. ## Red ... ## Something)
-### Markdown AST
-All adjustments to the markdown file happen via the markdown AST (Abstract Syntax Tree).
-You can explore it via the [ASTExplorer](https://astexplorer.net/). (> Markdown > remark)
-```md
-### Red
-red is the fire
-```
-Resulting AST.
-```json
-{
-  "type": "root",
-  "children": [
-    {
-      "type": "heading",
-      "depth": 3,
-      "children": [
-        {
-          "type": "text",
-          "value": "Red"
-        }
-      ]
-    },
-    {
-      "type": "paragraph",
-      "children": [
-        {
-          "type": "text",
-          "value": "red is the fire"
-        }
-      ]
-    }
-  ]
-}
-```
-### Usage in import
-If you full control of what the start and end selector should be then you can use `::import`.
-To for example import everything that is between `## Red` and `## More Red` you can use something like this.
-````md
-```::import('./path/to/file.md', 'heading[depth=2]:has([value=Red])', 'heading[depth=2]:has([value=More Red])')
-```
-````

package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/index.md DELETED Viewed

@@ -1,13 +0,0 @@
----
-parts:
-  - Extend Docs
-  - Node Tools
-title: 'Extend Docs'
-eleventyNavigation:
-  key: Node Tools >> Extend Docs
-  title: Extend Docs
-  order: 5
-  parent: Node Tools
----
-# Extend Docs