PackageVersion component (#52)

* github widget component

* package-version component

* changelog

* updates

* fix

* fix

* fix

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Versions
 
+- [3.11.0](#3110)
 - [3.10.0](#3100)
 - [3.9.0](#390)
 - [3.8.0](#380)
@@ -27,6 +28,13 @@
 
 <br>
 
+### 3.11.0
+
+- `PackageVersion` component
+- Clean-up
+
+<br>
+
 ### 3.10.0
 
 - `data-mb-enabled` migrated to `data-mbx-attributes` field. If the component is disabled, the `data-mbx-attributes` contains `disabled` string

docs-gen/components/atoms/PackageVersion/css-vars.json

@@ -0,0 +1,23 @@
+{
+  "--mbx-packageversion-text-color": {
+    "description": "Fallback value for `mbx-packageversion-text-color-light` and `mbx-packageversion-text-color-dark`"
+  },
+  "--mbx-packageversion-text-color-light": {
+    "description": "PackageVersion text color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `off`",
+    "defaultExternal": {
+      "type": "atoms",
+      "component": "Label",
+      "prop": "--mbx-label-text-color-light"
+    },
+    "fallback": "--mbx-packageversion-text-color"
+  },
+  "--mbx-packageversion-text-color-dark": {
+    "description": "PackageVersion text color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `on`",
+    "defaultExternal": {
+      "type": "atoms",
+      "component": "Label",
+      "prop": "--mbx-label-text-color-dark"
+    },
+    "fallback": "--mbx-packageversion-text-color"
+  }
+}

docs-gen/components/atoms/PackageVersion/mbx-settings.json

@@ -0,0 +1,5 @@
+{
+  "since": "3.11.0",
+  "description": "A tiny and smart component, to show a package version from many sources (like NPM registry or directly from Github repo). Can be easily integrated into more complex components.",
+  "examples": []
+}

docs-gen/components/atoms/PackageVersion/props.json

@@ -0,0 +1,18 @@
+{
+  "name": {
+    "type": "() => void",
+    "description": "Library name (it is used as repo name when `source = github`)"
+  },
+  "source": {
+    "type": "npm | github-release | github",
+    "description": "Package location (actually, NPM, Github and Github release are supported)"
+  },
+  "user": {
+    "type": "string",
+    "description": "Library owner (it is used as repo owner username when `source = github` or `source = github-release`)"
+  },
+  "branch": {
+    "type": "string",
+    "description": "Github repo default branch (used when `source = github`)"
+  }
+}

docs-gen/utils/generate-docs.js

@@ -108,9 +108,9 @@ try {
         const externalComponent =
           componentCssVars[cssVar].defaultExternal.component;
         const propName = componentCssVars[cssVar].defaultExternal.prop;
-        defaultValue = `[${propName}](https://cianciarusocataldo.github.io/mobrix-ui/docs/${
+        defaultValue = `[${propName}](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/${
           componentCssVars[cssVar].defaultExternal.type
-        }/${externalComponent}/css-vars.md#${propName.replace(
+        }/${externalComponent}/css-vars/#${propName.replace(
           "--mbx",
           "-mbx"
         )})`;

docs/components/atoms/PackageVersion/css-vars.md

@@ -0,0 +1,64 @@
+# [PackageVersion](index.md) CSS variables
+
+## Summary
+
+- [CSS Variables table](#css-variables-table)
+- [CSS Variables list](#css-variables-list)
+
+<br>
+
+## CSS Variables table
+
+<br>
+
+| <div style='text-align:center;margin:auto;'>Css variable</div>                                                                   | <div style='text-align:center;margin:auto;'>Fallback</div>                                                           | <div style='text-align:center;margin:auto;'>Default</div>                                                                                                                                          |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-packageversion-text-color](#-mbx-packageversion-text-color)</div>             | <div style='text-align:center;margin:auto;'>/</div>                                                                  | <div style='text-align:center;margin:auto;'>/</div>                                                                                                                                                |
+| <div style='text-align:center;margin:auto;'>[--mbx-packageversion-text-color-light](#-mbx-packageversion-text-color-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-packageversion-text-color](#-mbx-packageversion-text-color)</div> | <div style='text-align:center;margin:auto;'>[--mbx-label-text-color-light](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Label/css-vars/#-mbx-label-text-color-light)</div> |
+| <div style='text-align:center;margin:auto;'>[--mbx-packageversion-text-color-dark](#-mbx-packageversion-text-color-dark)</div>   | <div style='text-align:center;margin:auto;'>[--mbx-packageversion-text-color](#-mbx-packageversion-text-color)</div> | <div style='text-align:center;margin:auto;'>[--mbx-label-text-color-dark](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Label/css-vars/#-mbx-label-text-color-dark)</div>   |
+
+## CSS Variables list
+
+<br>
+
+<br>
+
+### --mbx-packageversion-text-color
+
+| <div style='text-align:center;margin:auto;'>Fallback</div> | <div style='text-align:center;margin:auto;'>Default</div> |
+| ---------------------------------------------------------- | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>/</div>        | <div style='text-align:center;margin:auto;'>/</div>       |
+
+<br>
+
+Fallback value for `mbx-packageversion-text-color-light` and `mbx-packageversion-text-color-dark`
+
+<br>
+
+<br>
+
+### --mbx-packageversion-text-color-light
+
+| <div style='text-align:center;margin:auto;'>Fallback</div>                                                           | <div style='text-align:center;margin:auto;'>Default</div>                                                                                                                                          |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-packageversion-text-color](#-mbx-packageversion-text-color)</div> | <div style='text-align:center;margin:auto;'>[--mbx-label-text-color-light](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Label/css-vars/#-mbx-label-text-color-light)</div> |
+
+<br>
+
+PackageVersion text color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `off`
+
+<br>
+
+<br>
+
+### --mbx-packageversion-text-color-dark
+
+| <div style='text-align:center;margin:auto;'>Fallback</div>                                                           | <div style='text-align:center;margin:auto;'>Default</div>                                                                                                                                        |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| <div style='text-align:center;margin:auto;'>[--mbx-packageversion-text-color](#-mbx-packageversion-text-color)</div> | <div style='text-align:center;margin:auto;'>[--mbx-label-text-color-dark](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Label/css-vars/#-mbx-label-text-color-dark)</div> |
+
+<br>
+
+PackageVersion text color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `on`
+
+<br>

docs/components/atoms/PackageVersion/index.md

@@ -0,0 +1,6 @@
+# PackageVersion page
+
+A tiny and smart component, to show a package version from many sources (like NPM registry or directly from Github repo). Can be easily integrated into more complex components.
+
+- [Properties](props.md)
+- [Css Variables](css-vars.md)

docs/components/atoms/PackageVersion/props.md

@@ -0,0 +1,86 @@
+# [PackageVersion](index.md) properties
+
+## Summary
+
+- [Props table](#props-table)
+- [Props list](#props-list)
+
+<br>
+
+## Props table
+
+<br>
+
+<!-- prettier-ignore -->
+| <div style='text-align:center;margin:auto;'>Parameter</div> | <div style='text-align:center;margin:auto;'>Type</div> | <div style='text-align:center;margin:auto;'>Default</div> |
+| ----------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[name](#name)</div> | <div style='text-align:center;margin:auto;'>() => void</div> | <div style='text-align:center;margin:auto;'>/</div> |
+| <div style='text-align:center;margin:auto;'>[source](#source)</div> | <div style='text-align:center;margin:auto;'>npm &#124; github-release &#124; github</div> | <div style='text-align:center;margin:auto;'>/</div> |
+| <div style='text-align:center;margin:auto;'>[user](#user)</div> | <div style='text-align:center;margin:auto;'>string</div> | <div style='text-align:center;margin:auto;'>/</div> |
+| <div style='text-align:center;margin:auto;'>[branch](#branch)</div> | <div style='text-align:center;margin:auto;'>string</div> | <div style='text-align:center;margin:auto;'>/</div> |
+
+<br>
+
+## Props list
+
+<br>
+
+<br>
+
+### name
+
+<!-- prettier-ignore -->
+| <div style='text-align:center;margin:auto;'>Type</div> | <div style='text-align:center;margin:auto;'>Default</div> |
+| ---------------------------------------------------------- | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>() => void</div> | <div style='text-align:center;margin:auto;'>/</div> |
+
+<br>
+
+Library name (it is used as repo name when `source = github`)
+
+<br>
+
+<br>
+
+### source
+
+<!-- prettier-ignore -->
+| <div style='text-align:center;margin:auto;'>Type</div> | <div style='text-align:center;margin:auto;'>Default</div> |
+| ---------------------------------------------------------- | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>npm &#124; github-release &#124; github</div> | <div style='text-align:center;margin:auto;'>/</div> |
+
+<br>
+
+Package location (actually, NPM, Github and Github release are supported)
+
+<br>
+
+<br>
+
+### user
+
+<!-- prettier-ignore -->
+| <div style='text-align:center;margin:auto;'>Type</div> | <div style='text-align:center;margin:auto;'>Default</div> |
+| ---------------------------------------------------------- | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>string</div> | <div style='text-align:center;margin:auto;'>/</div> |
+
+<br>
+
+Library owner (it is used as repo owner username when `source = github` or `source = github-release`)
+
+<br>
+
+<br>
+
+### branch
+
+<!-- prettier-ignore -->
+| <div style='text-align:center;margin:auto;'>Type</div> | <div style='text-align:center;margin:auto;'>Default</div> |
+| ---------------------------------------------------------- | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>string</div> | <div style='text-align:center;margin:auto;'>/</div> |
+
+<br>
+
+Github repo default branch (used when `source = github`)
+
+<br>

docs/components/atoms/index.md

@@ -13,6 +13,7 @@
 - [Input](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Input/)
 - [Label](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Label/)
 - [Link](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Link/)
+- [PackageVersion](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/PackageVersion/)
 - [RadioButton](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/RadioButton/)
 - [Rater](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Rater/)
 - [Selector](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Selector/)

docs/components/index.md

@@ -26,6 +26,8 @@
 
 - [Link](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Link/)
 
+- [PackageVersion](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/PackageVersion/)
+
 - [RadioButton](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/RadioButton/)
 
 - [Rater](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/atoms/Rater/)