diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index cf780b12..00000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,26 +0,0 @@ -version: 2.1 - -jobs: - test: - docker: - - image: cimg/node:15.1 - steps: - - checkout - - restore_cache: - keys: - - node-deps-v1-{{ .Branch }}-{{checksum "package-lock.json"}} - - run: - name: install packages - command: npm ci - - save_cache: - key: node-deps-v1-{{ .Branch }}-{{checksum "package-lock.json"}} - paths: - - ~/.npm - - run: - name: Run Tests - command: npm run test - -workflows: - orb-free-workflow: - jobs: - - test diff --git a/.cirrus.yml b/.cirrus.yml deleted file mode 100644 index db7860bb..00000000 --- a/.cirrus.yml +++ /dev/null @@ -1,22 +0,0 @@ -task: - container: - image: node:latest # - - node_modules_cache: # - folder: node_modules - fingerprint_script: cat package-lock.json - populate_script: npm install - - matrix: # - - name: Build - container: - matrix: # - - image: node:latest - - image: node:lts - build_script: npm run build - - name: Test - container: - matrix: # - - image: node:latest - - image: node:lts - test_script: npm run test diff --git a/.github/workflows/mobrix-ui.yml b/.github/workflows/mobrix-ui.yml index f74a9dae..afa1393f 100644 --- a/.github/workflows/mobrix-ui.yml +++ b/.github/workflows/mobrix-ui.yml @@ -8,17 +8,14 @@ on: jobs: build: - runs-on: ubuntu-latest - strategy: matrix: - node-version: [15.x, 16.x] - + node-version: [16.x, 17.x, 18.x] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} cache: 'npm' @@ -26,34 +23,17 @@ jobs: - run: npm run build unit-tests: - runs-on: ubuntu-latest - strategy: matrix: - node-version: [15.x, 16.x] - + node-version: [16.x, 17.x, 18.x] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} cache: 'npm' - run: npm i - - run: npm run build - - run: npm test - - name: Upload coverage to Codecov - uses: codecov/codecov-action@v2 - - name: Upload coverage to Code Climate - uses: paambaati/codeclimate-action@v3.0.0 - env: - CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }} - - name: Upload coverage to coveralls.io - uses: coverallsapp/github-action@v1.1.2 - with: - github-token: ${{ github.token }} - - name: Run codacy-coverage-reporter - uses: codacy/codacy-coverage-reporter-action@v1 - with: - project-token: ${{ secrets.CODACY_API_TOKEN }} \ No newline at end of file + - run: npm run test --verbose + - run: echo "Tests step completed" diff --git a/.gitignore b/.gitignore index 7ac342c2..146c4715 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,8 @@ node_modules dist playground/src/mobrix-ui-preview +test-app/src/mobrix-ui-preview build coverage -stats.html \ No newline at end of file +stats.html +.vscode \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index bf79505b..7950a445 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16.14.0 +v18.17.0 diff --git a/CHANGELOG.md b/CHANGELOG.md index f693cadf..1d807656 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Versions +- [3.0.0](#300) - [2.1.0](#210) - [2.0.0](#200) - [1.2.0](#120) @@ -16,6 +17,15 @@
+### 3.0.0 + +- No more external dependencies +- Totally re-designed css variables system, to fully customize every component at once +- Docs and comments generator +- Global refactoring and hige clean-up + +
+ ### 2.1.0 - `TabViewer` component diff --git a/README.md b/README.md index 5de30a4c..95ea1617 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,16 @@ # MoBrix-ui +
+ +Smart React components for every app, easily customizable for every purpose. + +
+ ![NPM](https://img.shields.io/npm/l/mobrix-ui?label=License&style=for-the-badge) ![npm (scoped)](https://img.shields.io/npm/v/mobrix-ui?color=orange%20&label=Latest%20version&style=for-the-badge&logo=npm) ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/mobrix-ui?label=Package%20size&style=for-the-badge&logo=npm) ![Maintenance](https://img.shields.io/maintenance/yes/2025?label=Maintained&style=for-the-badge) +[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg?logo=jest&style=for-the-badge)](https://github.com/facebook/jest)
@@ -11,30 +18,23 @@ ## Status -
- -![Codacy grade](https://img.shields.io/codacy/grade/b71e50de99ce4ae2b3af87470011ea6c?logo=codacy&style=for-the-badge) -![Codacy coverage](https://img.shields.io/codacy/coverage/b71e50de99ce4ae2b3af87470011ea6c?logo=codacy&style=for-the-badge) -![Code Climate technical debt](https://img.shields.io/codeclimate/tech-debt/CianciarusoCataldo/mobrix-ui?logo=codeclimate&style=for-the-badge) -![Code Climate issues](https://img.shields.io/codeclimate/issues/CianciarusoCataldo/mobrix-ui?logo=codeclimate&style=for-the-badge) -![Code Climate coverage](https://img.shields.io/codeclimate/coverage/CianciarusoCataldo/mobrix-ui?label=Coverage&logo=codeclimate&style=for-the-badge) -![Coveralls](https://img.shields.io/coverallsCoverage/github/CianciarusoCataldo/mobrix-ui?logo=coveralls&style=for-the-badge) -![Codecov](https://img.shields.io/codecov/c/github/CianciarusoCataldo/mobrix-ui?logo=codecov&style=for-the-badge) -![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/cianciarusocataldo/mobrix-ui?logo=snyk&style=for-the-badge) - ---- + + + ---
-React components for every app, easy to use and customize. +> ## Note for MoBrix-ui v1 user +> +> MoBrix-ui v2 introduces some breaking changes that makes it not compatible with older MoBrix verions (using different lib versions in parallel is possible, but can cause some unexpected errors). If you are using MoBrix 1.X.X, please read the [dedicated guide](https://cianciarusocataldo.github.io/mobrix-ui/docs/#/v1_guide), or upgrade it to v3.X.X!
-## Note for MoBrix-ui v1 user - -MoBrix-ui v2 introduces some breaking changes that makes it not compatible with older MoBrix verions (using different lib versions in parallel is possible, but can cause some unexpected errors). If you are using MoBrix 1.X.X, please read the [dedicated guide](https://cianciarusocataldo.github.io/mobrix-ui/docs/#/v1_guide), or upgrade it to v2.X.X! +> ## Note for MoBrix-ui v2 user +> +> MoBrix-ui v3 introduces some breaking changes that makes it not compatible with older MoBrix verions (using different lib versions in parallel is possible, but can cause some unexpected errors). If you are using MoBrix 2.X.X, please read the [dedicated guide](https://cianciarusocataldo.github.io/mobrix-ui/docs/#/v2_guide), or upgrade it to v3.X.X!
@@ -44,7 +44,7 @@ MoBrix-ui v2 introduces some breaking changes that makes it not compatible with - [MoBrix-ui philosophy](#mobrix-ui-philosophy) - [Components building process](#components-building-process) - - [UI properties](#ui-properties) + - [Shared Properties](#shared-properties) - [Accessibility properties](#accessibility-properties) - [CSS variables](#css-variables) - [Reactive components](#reactive-components) @@ -59,8 +59,6 @@ MoBrix-ui v2 introduces some breaking changes that makes it not compatible with --- ---- - ## MoBrix-ui philosophy This library is built upon few (but important) concepts: @@ -76,6 +74,10 @@ The same concepts are also the base of another project I maintain, [MoBrix-engin --- +
+ +Check out the [official MoBrix-ui guide page](https://cianciarusocataldo.github.io/mobrix-ui/docs) for more details + --- ## Components building process @@ -87,65 +89,65 @@ Some properties are shared between all components, for a smoother dev experience --- -### UI properties +### Shared Properties
-| Property | Type | Description | Default value | -| ----------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------- | -| `className` | `string` | custom className applied on main container | `""` | -| `dark` | `boolean` | Enable/disable dark mode | `false` | -| `hide` | `boolean` | Hide/show component | `false` | -| `id` | `string` | `data-id` parameter (for testing purpose, to easily find the component into the DOM) | `/` | -| `shadow` | `boolean` | Enable/disable shadow behind component | `false` | -| `style` | `Record` | [Css inline properties](https://www.w3schools.com/html/html_css.asp) applied on main container | `/` | -| `unstyled` | `boolean` | If `true`, no standard mobrix-ui styles will be applied on the components (useful for example, with image buttons) | `false` | -| `animated` | `boolean` | Enable/disable component animations | `false` | + +|
Parameter
|
Type
|
Default
| +| ----------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- | +|
[key](docs/components/global/props.md#key)
|
string
|
/
| +|
[className](docs/components/global/props.md#classname)
|
string
|
/
| +|
[dark](docs/components/global/props.md#dark)
|
boolean
|
/
| +|
[hide](docs/components/global/props.md#hide)
|
boolean
|
/
| +|
[id](docs/components/global/props.md#id)
|
string
|
/
| +|
[shadow](docs/components/global/props.md#shadow)
|
boolean
|
true
| +|
[style](docs/components/global/props.md#style)
|
CSSProperties
|
/
| +|
[unstyled](docs/components/global/props.md#unstyled)
|
boolean
|
/
| +|
[animated](docs/components/global/props.md#animated)
|
boolean
|
true
| +|
[background](docs/components/global/props.md#background)
|
boolean
|
true
| +|
[hover](docs/components/global/props.md#hover)
|
boolean
|
true
| +|
[disabled](docs/components/global/props.md#disabled)
|
boolean
|
/
| +|
[additionalProps](docs/components/global/props.md#additionalprops)
|
Record
|
/
|
---- - -### Accessibility properties +Check out the [complete properties list](https://cianciarusocataldo.github.io/mobrix-ui/docs/components/props/) for more details
-Some accessibility properties are shared between all components, for a better and smoother user experience, in any scenario: - -| Property | Type | Description | Default value | -| ------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -| `onFocus` | ( ) => `void` | custom callback triggered when the component get the focus (for example, through tab key) | `/` | -| `onFocusLost` | ( ) => `void` | custom callback triggered when the component lose the focus (for example, when user clicks outside it) | `/` | -| `a11y` | `boolean` | Enable/disable accessibility features. | `true` | -| `a11yLabel` | `string` | If `a11y` = `true`, is used as [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) accessibility parameter | `/` | -| `a11yDark` | `boolean` | If `a11y` = `true`, enable/disable dark mode for a11y styles. If not set, will be used the `dark` UI parameter | same as `dark` or `false` | -| `onKeyDown` | (keyEvent : `any`) => `void` | custom callback triggered when a key is pressed while using the component (for example, when writing text inside an `Input` component). | `/` | - -
- ---- - ### CSS variables
MoBrix-ui is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components: -| CSS variable | Description | Default value | Related CSS attribute | -| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------- | ---------------------- | -| `--mobrix-ui-custom-background-dark` | Components background, when in dark-mode ([dark](#shared-components-properties) is set to true). | `linear-gradient(to right, #2d3748, #1d232e)` | `background-image` | -| `--mobrix-ui-custom-background-color-dark` | Components background color, when in dark-mode ([dark](#shared-components-properties) is set to true). | `#1d232e` | `background-color` | -| `--mobrix-ui-custom-text-color-dark` | Components text color, when in dark-mode ([dark](#shared-components-properties) is set to true). | `white` | `text-color` | -| `--mobrix-ui-custom-background-light` | Components background, when not in dark-mode ([dark](#shared-components-properties) is set to false). | `linear-gradient(to right, #fff, #eaebec)` | `background-image` | -| `--mobrix-ui-custom-background-color-light` | Components background color, when not in dark-mode ([dark](#shared-components-properties) is set to false). | `#f5f5f5` | `background-color` | -| `--mobrix-ui-custom-text-color-light` | Components text color, when not in dark-mode ([dark](#shared-components-properties) is set to false). | `#1b1b1b` | `text-color` | -| `--mobrix-ui-custom-focus-color-light` | If `a11yDark` = `false` , this color is used to update UI when a component is focused (with a screen reader or by navigating with the `Tab` key) | `#7785ff` | `box-shadow` / `color` | -| `--mobrix-ui-custom-focus-color-dark` | If `a11yDark` = `true` , this color is used to update UI when a component is focused (with a screen reader or by navigating with the `Tab` key) | `#fb7a10` | `box-shadow` / `color` | +|
Prop
|
Fallback
|
Default
| +| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +|
[--mbx-background](docs/components/global/css-vars.md#mbx-background)
|
/
|
/
| +|
[--mbx-background-light](docs/components/global/css-vars.md#mbx-background-light)
|
[--mbx-background](docs/components/global/css-vars.md#mbx-background)
|
linear-gradient(to right, #fff, #ededee, #e6e7e7)
| +|
[--mbx-background-dark](docs/components/global/css-vars.md#mbx-background-dark)
|
[--mbx-background](docs/components/global/css-vars.md#mbx-background)
|
linear-gradient(to right, #2d3748, #1d232e)
| +|
[--mbx-background-color](docs/components/global/css-vars.md#mbx-background-color)
|
/
|
/
| +|
[--mbx-background-color-light](docs/components/global/css-vars.md#mbx-background-color-light)
|
[--mbx-background-color](docs/components/global/css-vars.md#mbx-background-color)
|
#e9e9e9
| +|
[--mbx-background-color-dark](docs/components/global/css-vars.md#mbx-background-color-dark)
|
[--mbx-background-color](docs/components/global/css-vars.md#mbx-background-color)
|
#1d232e
| +|
[--mbx-background-color-hover](docs/components/global/css-vars.md#mbx-background-color-hover)
|
/
|
/
| +|
[--mbx-background-color-hover-light](docs/components/global/css-vars.md#mbx-background-color-hover-light)
|
[--mbx-background-color-hover](docs/components/global/css-vars.md#mbx-background-color-hover)
|
#dfeaf8
| +|
[--mbx-background-color-hover-dark](docs/components/global/css-vars.md#mbx-background-color-hover-dark)
|
[--mbx-background-color-hover](docs/components/global/css-vars.md#mbx-background-color-hover)
|
#3a3552
| +|
[--mbx-background-hover](docs/components/global/css-vars.md#mbx-background-hover)
|
/
|
/
| +|
[--mbx-background-hover-light](docs/components/global/css-vars.md#mbx-background-hover-light)
|
[--mbx-background-hover](docs/components/global/css-vars.md#mbx-background-hover)
|
linear-gradient(to right, #ececec, #e1e1e6, #dbdddd)
| +|
[--mbx-background-hover-dark](docs/components/global/css-vars.md#mbx-background-hover-dark)
|
[--mbx-background-hover](docs/components/global/css-vars.md#mbx-background-hover)
|
linear-gradient(to right, #364257, #252d3b)
| +|
[--mbx-text-color](docs/components/global/css-vars.md#mbx-text-color)
|
/
|
/
| +|
[--mbx-text-color-light](docs/components/global/css-vars.md#mbx-text-color-light)
|
[--mbx-text-color](docs/components/global/css-vars.md#mbx-text-color)
|
#1b1b1b
| +|
[--mbx-text-color-dark](docs/components/global/css-vars.md#mbx-text-color-dark)
|
[--mbx-text-color](docs/components/global/css-vars.md#mbx-text-color)
|
white
| +|
[--mbx-text-color-hover](docs/components/global/css-vars.md#mbx-text-color-hover)
|
/
|
/
| +|
[--mbx-text-color-hover-light](docs/components/global/css-vars.md#mbx-text-color-hover-light)
|
[--mbx-text-color-hover](docs/components/global/css-vars.md#mbx-text-color-hover)
|
#413c5c
| +|
[--mbx-text-color-hover-dark](docs/components/global/css-vars.md#mbx-text-color-hover-dark)
|
[--mbx-text-color-hover](docs/components/global/css-vars.md#mbx-text-color-hover)
|
#dfeaf8
| +|
[--mbx-focus-color](docs/components/global/css-vars.md#mbx-focus-color)
|
/
|
/
| +|
[--mbx-focus-color-light](docs/components/global/css-vars.md#mbx-focus-color-light)
|
[--mbx-focus-color](docs/components/global/css-vars.md#mbx-focus-color)
|
#7785ff
| +|
[--mbx-focus-color-dark](docs/components/global/css-vars.md#mbx-focus-color-dark)
|
[--mbx-focus-color](docs/components/global/css-vars.md#mbx-focus-color)
|
#fb7a10
|
---- - ### Reactive components
@@ -173,11 +175,13 @@ A clear example is the [Input](https://cianciarusocataldo.github.io/mobrix-ui/co
-## Getting started +

---- +## Getting started + +
### Installation @@ -213,7 +217,7 @@ render( } /> , - document.getElementById("root") + document.getElementById("root"), ); ``` @@ -225,8 +229,8 @@ If you want to customize the UI globally, initialize the dedicated [CSS variable ```css * { - --mobrix-ui-text-color: #f5f5f5; - --mobrix-ui-background-color: #1b1b1b; + --mbx-ui-text-color: #f5f5f5; + --mbx-ui-background-color: #1b1b1b; } ``` @@ -236,6 +240,10 @@ If you want to customize the UI globally, initialize the dedicated [CSS variable --- +
+ +
+ ## Tests Unit tests for every component are located inside `tests` folder. The test script is executed with pre-defined test command: diff --git a/config/rollup.analyze.config.js b/config/rollup.analyze.config.js index 657844f1..7f89d4af 100644 --- a/config/rollup.analyze.config.js +++ b/config/rollup.analyze.config.js @@ -1,23 +1,25 @@ -import typescript from "rollup-plugin-typescript2"; -import postcss from "rollup-plugin-postcss"; -import { visualizer } from 'rollup-plugin-visualizer'; -import analyze from "rollup-plugin-analyzer"; +const typescript = require("rollup-plugin-typescript2"); +const postcss = require("rollup-plugin-postcss"); +const { visualizer } = require("rollup-plugin-visualizer"); +const analyze = require("rollup-plugin-analyzer"); -import pkg from "../package.json"; +const postcssImport = require("postcss-import"); -export default [ +const pkg = require("../package.json"); + +module.exports = [ { input: "src/index.ts", output: [], plugins: [ postcss({ - plugins: [], + plugins: [postcssImport], minimize: true, }), typescript(), analyze(), visualizer(), ], - external: Object.keys(pkg.peerDependencies || {}), + external: Object.keys(pkg.peerDependencies || []), }, ]; diff --git a/config/rollup.build.config.js b/config/rollup.build.config.js index ef4e7244..de4f6777 100644 --- a/config/rollup.build.config.js +++ b/config/rollup.build.config.js @@ -1,11 +1,12 @@ -import typescript from "rollup-plugin-typescript2"; -import del from "rollup-plugin-delete"; -import postcss from "rollup-plugin-postcss"; -import { terser } from "rollup-plugin-terser"; +const typescript = require("rollup-plugin-typescript2"); +const del = require("rollup-plugin-delete"); +const postcss = require("rollup-plugin-postcss"); +const terser = require("@rollup/plugin-terser"); +const postcssImport = require("postcss-import"); -import pkg from "../package.json"; +const pkg = require("../package.json"); -export default [ +module.exports = [ { input: "src/index.ts", output: [ @@ -20,6 +21,17 @@ export default [ format: "esm", banner: "/* eslint-disable */ import './styles.css';", }, + { + file: "test-app/src/mobrix-ui-preview/index.cjs", + format: "cjs", + banner: "require('./styles.css')", + plugins: [terser()], + }, + { + file: "test-app/src/mobrix-ui-preview/index.mjs", + format: "esm", + banner: "/* eslint-disable */ import './styles.css';", + }, { file: pkg.main, format: "cjs", @@ -35,7 +47,7 @@ export default [ plugins: [ del({ targets: ["dist/*", "playground/src/mobrix-ui-preview"] }), postcss({ - plugins: [], + plugins: [postcssImport], minimize: true, extract: "styles.css", }), @@ -44,6 +56,6 @@ export default [ clean: true, }), ], - external: Object.keys(pkg.peerDependencies || {}), + external: Object.keys(pkg.peerDependencies || []), }, ]; diff --git a/config/rollup.dev.config.js b/config/rollup.dev.config.js index 68103479..f53b63fe 100644 --- a/config/rollup.dev.config.js +++ b/config/rollup.dev.config.js @@ -1,10 +1,11 @@ -import typescript from "rollup-plugin-typescript2"; -import postcss from "rollup-plugin-postcss"; -import { terser } from "rollup-plugin-terser"; +const typescript = require("rollup-plugin-typescript2"); +const postcss = require("rollup-plugin-postcss"); +const terser = require("@rollup/plugin-terser"); +const postcssImport = require("postcss-import"); -import pkg from "../package.json"; +const pkg = require("../package.json"); -export default [ +module.exports = [ { input: "src/index.ts", output: [ @@ -19,6 +20,17 @@ export default [ format: "esm", banner: "/* eslint-disable */ import './styles.css';", }, + { + file: "test-app/src/mobrix-ui-preview/index.cjs", + format: "cjs", + banner: "require('./styles.css')", + plugins: [terser()], + }, + { + file: "test-app/src/mobrix-ui-preview/index.mjs", + format: "esm", + banner: "/* eslint-disable */ import './styles.css';", + }, { file: pkg.main, format: "cjs", @@ -33,8 +45,8 @@ export default [ ], plugins: [ postcss({ - plugins: [], - minimize: true, + plugins: [postcssImport], + minimize: false, extract: "styles.css", }), typescript({ @@ -42,6 +54,6 @@ export default [ clean: true, }), ], - external: Object.keys(pkg.peerDependencies || {}), + external: Object.keys(pkg.peerDependencies || []), }, ]; diff --git a/docs-gen/components/atoms/Button/css-vars.json b/docs-gen/components/atoms/Button/css-vars.json new file mode 100644 index 00000000..80f8adc1 --- /dev/null +++ b/docs-gen/components/atoms/Button/css-vars.json @@ -0,0 +1,54 @@ +{ + "--mbx-button-background": { + "description": "Fallback value for `mbx-button-background-light` and `mbx-button-background-dark`" + }, + "--mbx-button-background-light": { + "description": "Button background when dark mode is off", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-button-background" + }, + "--mbx-button-background-dark": { + "description": "Button background when dark mode is on", + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-button-background" + }, + "--mbx-button-text-color": { + "description": "Fallback value for `mbx-button-text-color-light` and `mbx-button-text-color-dark`" + }, + "--mbx-button-text-color-light": { + "description": "Button text color when dark mode is off", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-button-text-color" + }, + "--mbx-button-text-color-dark": { + "description": "Button text color when dark mode is on", + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-button-text-color" + }, + "--mbx-button-background-hover": { + "description": "Fallback value for `mbx-button-background-hover-light` and `mbx-button-background-hover-dark`" + }, + "--mbx-button-background-hover-light": { + "description": "Button background when dark mode is off, on hover", + "defaultGlobal": "--mbx-background-hover-light", + "fallback": "--mbx-button-background-hover" + }, + "--mbx-button-background-hover-dark": { + "description": "Button background when dark mode is on, on hover", + "defaultGlobal": "--mbx-background-hover-dark", + "fallback": "--mbx-button-background-hover" + }, + "--mbx-button-text-color-hover": { + "description": "Fallback value for `mbx-button-text-color-hover-light` and `mbx-button-text-color-hover-dark`" + }, + "--mbx-button-text-color-hover-light": { + "description": "Button text color when dark mode is off, on hover", + "defaultGlobal": "--mbx-text-color-hover-light", + "fallback": "--mbx-button-text-color-hover" + }, + "--mbx-button-text-color-hover-dark": { + "description": "Button text color when dark mode is on, on hover", + "defaultGlobal": "--mbx-text-color-hover-dark", + "fallback": "--mbx-button-text-color-hover" + } +} diff --git a/docs-gen/components/atoms/Button/mbx-settings.json b/docs-gen/components/atoms/Button/mbx-settings.json new file mode 100644 index 00000000..f9fa7d93 --- /dev/null +++ b/docs-gen/components/atoms/Button/mbx-settings.json @@ -0,0 +1,16 @@ +{ + "since": "1.0.0", + "description": "A button component, designed for a lot of scenarios.", + "see": [ + "https://cianciarusocataldo.github.io/mobrix-ui/components/atoms/Button" + ], + "examples": [], + "extend": { + "group": { + "ComponentWithChildren": { + "type": "JSX.Element | string" + }, + "ClickableComponent": {} + } + } +} diff --git a/docs-gen/components/atoms/Button/props.json b/docs-gen/components/atoms/Button/props.json new file mode 100644 index 00000000..0d04c004 --- /dev/null +++ b/docs-gen/components/atoms/Button/props.json @@ -0,0 +1,20 @@ +{ + "onMouseEnter": { + "type": "() => void", + "description": "This callback is triggered everytime the cursor enter the button area" + }, + "onMouseLeave": { + "type": "() => void", + "description": "This callback is triggered everytime the cursor exit the button area" + }, + "onClick": { + "type": "() => void", + "default": "() => {}", + "description": "Callback triggered when Button component is clicked" + }, + "children": { + "type": "JSX.Element | string", + "default": "", + "description": "Button content" + } +} diff --git a/docs-gen/components/atoms/CheckBox/css-vars.json b/docs-gen/components/atoms/CheckBox/css-vars.json new file mode 100644 index 00000000..cb2c0912 --- /dev/null +++ b/docs-gen/components/atoms/CheckBox/css-vars.json @@ -0,0 +1,41 @@ +{ + "--mbx-checkbox-background": { + "description": "Fallback value for `mbx-checkbox-background-light` and `mbx-checkbox-background-dark`" + }, + "--mbx-checkbox-background-light": { + "description": "CheckBox background when dark mode is off", + "fallback": "--mbx-checkbox-background", + "defaultGlobal": "--mbx-background-light" + }, + "--mbx-checkbox-background-dark": { + "description": "CheckBox background when dark mode is on", + "fallback": "--mbx-checkbox-background", + "defaultGlobal": "--mbx-background-dark" + }, + "--mbx-checkbox-background-hover": { + "description": "Fallback value for `mbx-checkbox-background-hover-light` and `mbx-checkbox-background-hover-dark`" + }, + "--mbx-checkbox-background-hover-light": { + "description": "CheckBox background when dark mode is off, on hover", + "fallback": "--mbx-checkbox-background-hover", + "defaultGlobal": "--mbx-background-hover-light" + }, + "--mbx-checkbox-background-hover-dark": { + "description": "CheckBox background when dark mode is on, on hover", + "fallback": "--mbx-checkbox-background-hover", + "defaultGlobal": "--mbx-background-hover-dark" + }, + "--mbx-checkbox-tick-color": { + "description": "Fallback value for `mbx-checkbox-tick-color-light` and `mbx-checkbox-tick-color-dark`" + }, + "--mbx-checkbox-tick-color-light": { + "description": "CheckBox tick color when dark mode is off", + "fallback": "--mbx-checkbox-tick-color", + "defaultColor": "rgb(37, 99, 235)" + }, + "--mbx-checkbox-tick-color-dark": { + "description": "CheckBox tick color when dark mode is on", + "fallback": "--mbx-checkbox-tick-color", + "default": "white" + } +} diff --git a/docs-gen/components/atoms/CheckBox/mbx-settings.json b/docs-gen/components/atoms/CheckBox/mbx-settings.json new file mode 100644 index 00000000..eee26952 --- /dev/null +++ b/docs-gen/components/atoms/CheckBox/mbx-settings.json @@ -0,0 +1,13 @@ +{ + "since": "1.0.0", + "description": "A checkbox element, totally customizable.", + "see": [ + "https://cianciarusocataldo.github.io/mobrix-ui/components/atoms/CheckBoxx" + ], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { "type": "boolean" } + } + } +} diff --git a/docs-gen/components/atoms/CheckBox/props.json b/docs-gen/components/atoms/CheckBox/props.json new file mode 100644 index 00000000..2e6f10b9 --- /dev/null +++ b/docs-gen/components/atoms/CheckBox/props.json @@ -0,0 +1,17 @@ +{ + "value": { + "type": "boolean", + "description": "Checkbox initial value (checked / unchecked)", + "default": "false" + }, + "icon": { + "type": "JSX.Element", + "description": "custom tick icon (if not set, the default one will be used)", + "default": "Internal tick icon" + }, + "onChange": { + "type": "(newValue: boolean) => void", + "default": "() => {}", + "description": "Callback triggered when CheckBox component input value is changed by the user" + } +} diff --git a/docs-gen/components/atoms/CodeBox/css-vars.json b/docs-gen/components/atoms/CodeBox/css-vars.json new file mode 100644 index 00000000..d7b79c99 --- /dev/null +++ b/docs-gen/components/atoms/CodeBox/css-vars.json @@ -0,0 +1,28 @@ +{ + "--mbx-codebox-background": { + "description": "Fallback value for `mbx-codebox-background-light` and `mbx-codebox-background-dark`" + }, + "--mbx-codebox-background-light": { + "description": "CodeBox background when dark mode is off", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-codebox-background" + }, + "--mbx-codebox-background-dark": { + "description": "CodeBox background when dark mode is on", + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-codebox-background" + }, + "--mbx-codebox-text-color": { + "description": "Fallback value for `mbx-codebox-text-color-light` and `mbx-codebox-text-color-dark`" + }, + "--mbx-codebox-text-color-light": { + "description": "CodeBox text-color when dark mode is off", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-codebox-text-color" + }, + "--mbx-codebox-text-color-dark": { + "description": "CodeBox text-color when dark mode is on", + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-codebox-text-color" + } +} diff --git a/docs-gen/components/atoms/CodeBox/mbx-settings.json b/docs-gen/components/atoms/CodeBox/mbx-settings.json new file mode 100644 index 00000000..97c3fef6 --- /dev/null +++ b/docs-gen/components/atoms/CodeBox/mbx-settings.json @@ -0,0 +1,6 @@ +{ + "since": "1.0.0", + "description": "A smart code box, to display code text as a compiler. Optionally, can highlight code text, with a selectable environment", + "see": [], + "examples": [] +} diff --git a/docs-gen/components/atoms/CodeBox/props.json b/docs-gen/components/atoms/CodeBox/props.json new file mode 100644 index 00000000..ce1bb8cb --- /dev/null +++ b/docs-gen/components/atoms/CodeBox/props.json @@ -0,0 +1,13 @@ +{ + "value": { "type": "string", "description": "code to display" }, + "highlight": { + "type": "boolean", + "description": "Enable/disable text highlight, based on selected environment", + "default": "" + }, + "environment": { + "type": "'javascript' | 'python' | 'terminal' | 'common'", + "description": "environment for text highlight feature, default to 'terminal' (only enabled when 'highlight' is true)", + "default": "'terminal'" + } +} diff --git a/docs-gen/components/atoms/Counter/css-vars.json b/docs-gen/components/atoms/Counter/css-vars.json new file mode 100644 index 00000000..d385f351 --- /dev/null +++ b/docs-gen/components/atoms/Counter/css-vars.json @@ -0,0 +1,54 @@ +{ + "--mbx-counterbox-background": { + "description": "Fallback value for `mbx-counterbox-background-light` and `mbx-counterbox-background-dark`" + }, + "--mbx-counterbox-background-light": { + "description": "Counter background when dark mode is off", + "fallback": "--mbx-counterbox-background", + "defaultGlobal": "--mbx-background-color-light" + }, + "--mbx-counterbox-background-dark": { + "description": "Counter background when dark mode is on", + "fallback": "--mbx-counterbox-background", + "defaultGlobal": "--mbx-background-color-dark" + }, + "--mbx-counterbox-text-color": { + "description": "Fallback value for `mbx-counterbox-text-color-light` and `mbx-counterbox-text-color-dark`" + }, + "--mbx-counterbox-text-color-light": { + "description": "Counter text color when dark mode is off", + "fallback": "--mbx-counterbox-text-color", + "defaultGlobal": "--mbx-text-color-light" + }, + "--mbx-counterbox-text-color-dark": { + "description": "Counter text color when dark mode is on", + "fallback": "--mbx-counterbox-text-color", + "defaultGlobal": "--mbx-text-color-dark" + }, + "--mbx-counterbox-background-hover": { + "description": "Fallback value for `mbx-counterbox-background-hover-light` and `mbx-counterbox-background-hover-dark`" + }, + "--mbx-counterbox-background-hover-light": { + "description": "Counter background when dark mode is off, on hover", + "fallback": "--mbx-counterbox-background-hover", + "defaultGlobal": "--mbx-background-color-hover-light" + }, + "--mbx-counterbox-background-hover-dark": { + "description": "Counter background when dark mode is on, on hover", + "fallback": "--mbx-counterbox-background-hover", + "defaultGlobal": "--mbx-background-color-hover-dark" + }, + "--mbx-counterbox-text-color-hover": { + "description": "Fallback value for `mbx-counterbox-text-color-hover-light` and `mbx-counterbox-text-color-hover-dark`" + }, + "--mbx-counterbox-text-color-hover-light": { + "description": "Counter text color when dark mode is off, on hover", + "defaultGlobal": "--mbx-text-color-hover-light", + "fallback": "--mbx-counterbox-text-color-hover" + }, + "--mbx-counterbox-text-color-hover-dark": { + "description": "Counter text color when dark mode is on, on hover", + "defaultGlobal": "--mbx-text-color-hover-dark", + "fallback": "--mbx-counterbox-text-color-hover" + } +} diff --git a/docs-gen/components/atoms/Counter/mbx-settings.json b/docs-gen/components/atoms/Counter/mbx-settings.json new file mode 100644 index 00000000..2f8f6e93 --- /dev/null +++ b/docs-gen/components/atoms/Counter/mbx-settings.json @@ -0,0 +1,11 @@ +{ + "since": "1.0.0", + "description": "A flexible numeric input element", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { "type": "number" } + } + } +} diff --git a/docs-gen/components/atoms/Counter/props.json b/docs-gen/components/atoms/Counter/props.json new file mode 100644 index 00000000..84e85b55 --- /dev/null +++ b/docs-gen/components/atoms/Counter/props.json @@ -0,0 +1,19 @@ +{ + "value": { "type": "number", "description": "numeric input value" }, + "placeholder": { + "type": "string", + "description": "label showed when no value is set" + }, + "readOnly": { + "type": "boolean", + "description": "if true, component value can only be set with `value` parameter", + "default": "false" + }, + "min": { "type": "number", "description": "min allowed value" }, + "max": { "type": "number", "description": "max allowed value" }, + "onChange": { + "type": "(newValue: number) => void", + "default": "() => {}", + "description": "Callback triggered when Counter component input value is changed by the user" + } +} diff --git a/docs-gen/components/atoms/Divider/css-vars.json b/docs-gen/components/atoms/Divider/css-vars.json new file mode 100644 index 00000000..435e7f66 --- /dev/null +++ b/docs-gen/components/atoms/Divider/css-vars.json @@ -0,0 +1,15 @@ +{ + "--mbx-divider-color": { + "description": "Fallback value for `--mbx-divider-color-light` and `--mbx-divider-color-dark`" + }, + "--mbx-divider-color-light": { + "description": "Divider color when dark mode is off", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-divider-color" + }, + "--mbx-divider-color-dark": { + "description": "Divider color when dark mode is on", + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-divider-color" + } +} diff --git a/docs-gen/components/atoms/Divider/mbx-settings.json b/docs-gen/components/atoms/Divider/mbx-settings.json new file mode 100644 index 00000000..65aea97e --- /dev/null +++ b/docs-gen/components/atoms/Divider/mbx-settings.json @@ -0,0 +1,6 @@ +{ + "since": "1.0.0", + "description": "A simple divider, useful to separate sections and paragraphs", + "see": [], + "examples": [] +} diff --git a/docs-gen/components/atoms/Divider/props.json b/docs-gen/components/atoms/Divider/props.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/docs-gen/components/atoms/Divider/props.json @@ -0,0 +1 @@ +{} diff --git a/docs-gen/components/atoms/IconButton/css-vars.json b/docs-gen/components/atoms/IconButton/css-vars.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/docs-gen/components/atoms/IconButton/css-vars.json @@ -0,0 +1 @@ +{} diff --git a/docs-gen/components/atoms/IconButton/mbx-settings.json b/docs-gen/components/atoms/IconButton/mbx-settings.json new file mode 100644 index 00000000..6f52ceff --- /dev/null +++ b/docs-gen/components/atoms/IconButton/mbx-settings.json @@ -0,0 +1,9 @@ +{ + "since": "", + "description": "", + "see": [], + "examples": [], + "extend": { + "component": { "name": "Button" } + } +} diff --git a/docs-gen/components/atoms/IconButton/props.json b/docs-gen/components/atoms/IconButton/props.json new file mode 100644 index 00000000..cbfb936a --- /dev/null +++ b/docs-gen/components/atoms/IconButton/props.json @@ -0,0 +1,24 @@ +{ + "children": { + "type": "JSX.Element | string", + "default": "", + "description": "Button content - extended from [Button component](../../atoms/Button/props.md#children)", + "comment": "Button content - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/atoms/Button Button}" + }, + "onMouseEnter": { + "type": "() => void", + "description": "This callback is triggered everytime the cursor enter the button area - extended from [Button component](../../atoms/Button/props.md#onMouseEnter)", + "comment": "This callback is triggered everytime the cursor enter the button area - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/atoms/Button Button}" + }, + "onMouseLeave": { + "type": "() => void", + "description": "This callback is triggered everytime the cursor exit the button area - extended from [Button component](../../atoms/Button/props.md#onMouseLeave)", + "comment": "This callback is triggered everytime the cursor exit the button area - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/atoms/Button Button}" + }, + "onClick": { + "type": "() => void", + "default": "() => {}", + "description": "Callback triggered when Button component is clicked - extended from [Button component](../../atoms/Button/props.md#onClick)", + "comment": "Callback triggered when Button component is clicked - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/atoms/Button Button}" + } +} diff --git a/docs-gen/components/atoms/Input/css-vars.json b/docs-gen/components/atoms/Input/css-vars.json new file mode 100644 index 00000000..89143cf0 --- /dev/null +++ b/docs-gen/components/atoms/Input/css-vars.json @@ -0,0 +1,54 @@ +{ + "--mbx-inputbox-background": { + "description": "Fallback value for `mbx-inputbox-background-light` and `mbx-inputbox-background-dark`" + }, + "--mbx-inputbox-background-light": { + "description": "Input background when dark mode is off", + "fallback": "--mbx-inputbox-background", + "defaultGlobal": "--mbx-background-color-light" + }, + "--mbx-inputbox-background-dark": { + "description": "Input background when dark mode is on", + "fallback": "--mbx-inputbox-background", + "defaultGlobal": "--mbx-background-color-dark" + }, + "--mbx-inputbox-text-color": { + "description": "Fallback value for `mbx-inputbox-text-color-light` and `mbx-inputbox-text-color-dark`" + }, + "--mbx-inputbox-text-color-light": { + "description": "Input text color when dark mode is off", + "fallback": "--mbx-inputbox-text-color", + "defaultGlobal": "--mbx-text-color-light" + }, + "--mbx-inputbox-text-color-dark": { + "description": "Input text color when dark mode is on", + "fallback": "--mbx-inputbox-text-color", + "defaultGlobal": "--mbx-text-color-dark" + }, + "--mbx-inputbox-background-hover": { + "description": "Fallback value for `mbx-inputbox-background-hover-light` and `mbx-inputbox-background-hover-dark`" + }, + "--mbx-inputbox-background-hover-light": { + "description": "Input background when dark mode is off, on hover", + "fallback": "--mbx-inputbox-background-hover", + "defaultGlobal": "--mbx-background-color-hover-light" + }, + "--mbx-inputbox-background-hover-dark": { + "description": "Input background when dark mode is on, on hover", + "fallback": "--mbx-inputbox-background-hover", + "defaultGlobal": "--mbx-background-color-hover-dark" + }, + "--mbx-inputbox-text-color-hover": { + "description": "Fallback value for `mbx-inputbox-text-color-hover-light` and `mbx-inputbox-text-color-hover-dark`" + }, + "--mbx-inputbox-text-color-hover-light": { + "description": "Input text color when dark mode is off, on hover", + "defaultGlobal": "--mbx-text-color-hover-light", + "fallback": "--mbx-inputbox-text-color-hover" + }, + "--mbx-inputbox-text-color-hover-dark": { + "description": "Input text color when dark mode is on, on hover", + "defaultGlobal": "--mbx-text-color-hover-dark", + "fallback": "--mbx-inputbox-text-color-hover" + } +} diff --git a/docs-gen/components/atoms/Input/mbx-settings.json b/docs-gen/components/atoms/Input/mbx-settings.json new file mode 100644 index 00000000..56680ab9 --- /dev/null +++ b/docs-gen/components/atoms/Input/mbx-settings.json @@ -0,0 +1,11 @@ +{ + "since": "1.0.0", + "description": "A flexible text input element", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { "type": "string" } + } + } +} diff --git a/docs-gen/components/atoms/Input/props.json b/docs-gen/components/atoms/Input/props.json new file mode 100644 index 00000000..1fd955f7 --- /dev/null +++ b/docs-gen/components/atoms/Input/props.json @@ -0,0 +1,17 @@ +{ + "value": { "type": "string", "description": "text input value" }, + "placeholder": { + "type": "string", + "description": "label showed when no value is set" + }, + "readOnly": { + "type": "boolean", + "description": "if true, component value can only be set with `value` parameter", + "default": "false" + }, + "onChange": { + "type": "(newValue: string) => void", + "default": "() => {}", + "description": "Callback triggered when Input component input value is changed by the user" + } +} diff --git a/docs-gen/components/atoms/Label/css-vars.json b/docs-gen/components/atoms/Label/css-vars.json new file mode 100644 index 00000000..5f5fbb4b --- /dev/null +++ b/docs-gen/components/atoms/Label/css-vars.json @@ -0,0 +1,15 @@ +{ + "--mbx-label-text-color": { + "description": "Fallback value for `mbx-label-text-color-light` and `mbx-label-text-color-dark`" + }, + "--mbx-label-text-color-light": { + "description": "Label text color when dark mode is off", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-label-text-color" + }, + "--mbx-label-text-color-dark": { + "description": "Label text color when dark mode is on", + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-label-text-color" + } +} diff --git a/docs-gen/components/atoms/Label/mbx-settings.json b/docs-gen/components/atoms/Label/mbx-settings.json new file mode 100644 index 00000000..d932a3a9 --- /dev/null +++ b/docs-gen/components/atoms/Label/mbx-settings.json @@ -0,0 +1,6 @@ +{ + "since": "1.0.0", + "description": "A text wrapper, with many options to customize its content", + "see": [], + "examples": [] +} diff --git a/docs-gen/components/atoms/Label/props.json b/docs-gen/components/atoms/Label/props.json new file mode 100644 index 00000000..681ad244 --- /dev/null +++ b/docs-gen/components/atoms/Label/props.json @@ -0,0 +1,6 @@ +{ + "children": { + "description": "text content to show (string arrays are accepted)", + "type": "string | string[]" + } +} diff --git a/docs-gen/components/atoms/Link/css-vars.json b/docs-gen/components/atoms/Link/css-vars.json new file mode 100644 index 00000000..09bbbb65 --- /dev/null +++ b/docs-gen/components/atoms/Link/css-vars.json @@ -0,0 +1,28 @@ +{ + "--mbx-link-color": { + "description": "Fallback value for `mbx-link-color-light` and `mbx-link-color-dark`" + }, + "--mbx-link-color-light": { + "description": "Link text color when dark mode is off", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-link-color" + }, + "--mbx-link-color-dark": { + "description": "Link text color when dark mode is on", + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-link-color" + }, + "--mbx-link-color-hover": { + "description": "Fallback value for `mbx-link-color-hover-light` and `mbx-link-color-hover-dark`" + }, + "--mbx-link-color-hover-light": { + "description": "Link text color when dark mode is off, on hover", + "defaultInternal": "--mbx-link-color-light", + "fallback": "--mbx-link-color-hover" + }, + "--mbx-link-color-hover-dark": { + "description": "Link text color when dark mode is on, on hover", + "defaultInternal": "--mbx-link-color-dark", + "fallback": "--mbx-link-color-hover" + } +} diff --git a/docs-gen/components/atoms/Link/mbx-settings.json b/docs-gen/components/atoms/Link/mbx-settings.json new file mode 100644 index 00000000..4d449f08 --- /dev/null +++ b/docs-gen/components/atoms/Link/mbx-settings.json @@ -0,0 +1,13 @@ +{ + "since": "1.0.0", + "description": "A re-defined `` component, designed to be better used with links", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithChildren": { + "type": "`JSX.Element` | `string`" + } + } + } +} diff --git a/docs-gen/components/atoms/Link/props.json b/docs-gen/components/atoms/Link/props.json new file mode 100644 index 00000000..7f6a7827 --- /dev/null +++ b/docs-gen/components/atoms/Link/props.json @@ -0,0 +1,13 @@ +{ + "to": { "description": "Link url", "type": "string" }, + "newTab": { + "type": "string", + "description": "f true, the link will be opened in a new tab", + "default": "false" + }, + "children": { + "type": "`JSX.Element` | `string`", + "default": "", + "description": "Link content" + } +} diff --git a/docs-gen/components/atoms/RadioButton/css-vars.json b/docs-gen/components/atoms/RadioButton/css-vars.json new file mode 100644 index 00000000..a1e0a4ab --- /dev/null +++ b/docs-gen/components/atoms/RadioButton/css-vars.json @@ -0,0 +1,41 @@ +{ + "--mbx-radio-background": { + "description": "Fallback value for `mbx-radio-background-light` and `mbx-radio-background-dark`" + }, + "--mbx-radio-background-light": { + "description": "RadioButton background when dark mode is off", + "default": "radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%)", + "fallback": "--mbx-radio-background" + }, + "--mbx-radio-background-dark": { + "description": "RadioButton background when dark mode is on", + "default": "radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%)", + "fallback": "--mbx-radio-background" + }, + "--mbx-radio-background-hover": { + "description": "Fallback value for `mbx-radio-background-hover-light` and `mbx-radio-background-hover-dark`" + }, + "--mbx-radio-background-hover-light": { + "description": "RadioButton background when dark mode is off, on hover", + "defaultInternal": "--mbx-radio-background-light", + "fallback": "--mbx-radio-background-hover" + }, + "--mbx-radio-background-hover-dark": { + "description": "RadioButton background when dark mode is on, on hover", + "defaultInternal": "--mbx-radio-background-dark", + "fallback": "--mbx-radio-background-hover" + }, + "--mbx-radio-icon-background": { + "description": "Fallback value for `mbx-radio-icon-background-light` and `mbx-radio-icon-background-dark`" + }, + "--mbx-radio-icon-background-light": { + "description": "RadioButton icon background when dark mode is off", + "default": "radial-gradient(circle at 23px 23px, #2d3748, #191f29)", + "fallback": "--mbx-radio-icon-background" + }, + "--mbx-radio-icon-background-dark": { + "description": "RadioButton icon background when dark mode is on", + "default": "radial-gradient(circle at 23px 23px, #dbe0e6, #949494)", + "fallback": "--mbx-radio-icon-background" + } +} diff --git a/docs-gen/components/atoms/RadioButton/mbx-settings.json b/docs-gen/components/atoms/RadioButton/mbx-settings.json new file mode 100644 index 00000000..dd4542c1 --- /dev/null +++ b/docs-gen/components/atoms/RadioButton/mbx-settings.json @@ -0,0 +1,11 @@ +{ + "since": "2.0.0", + "description": "A single radio button component. Optionally, can prevent user to deselect it", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { "type": "boolean" } + } + } +} diff --git a/docs-gen/components/atoms/RadioButton/props.json b/docs-gen/components/atoms/RadioButton/props.json new file mode 100644 index 00000000..ca6988b8 --- /dev/null +++ b/docs-gen/components/atoms/RadioButton/props.json @@ -0,0 +1,17 @@ +{ + "value": { + "type": "boolean", + "description": "actual radio button value (radio icon visiblity)", + "default": "false" + }, + "deselectable": { + "type": "boolean", + "description": "if `false`, the button can be selected only once (the value can't change then)", + "default": "false" + }, + "onChange": { + "type": "(newValue: boolean) => void", + "default": "() => {}", + "description": "Callback triggered when RadioButton component input value is changed by the user" + } +} diff --git a/docs-gen/components/atoms/Rater/css-vars.json b/docs-gen/components/atoms/Rater/css-vars.json new file mode 100644 index 00000000..89513539 --- /dev/null +++ b/docs-gen/components/atoms/Rater/css-vars.json @@ -0,0 +1,15 @@ +{ + "--mbx-rater-background": { + "description": "Fallback value for `mbx-rater-background-light` and `mbx-rater-background-dark`" + }, + "--mbx-rater-background-light": { + "description": "Rater background when dark mode is off", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-rater-background" + }, + "--mbx-rater-background-dark": { + "description": "Rater background when dark mode is on", + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-rater-background" + } +} diff --git a/docs-gen/components/atoms/Rater/mbx-settings.json b/docs-gen/components/atoms/Rater/mbx-settings.json new file mode 100644 index 00000000..92c072ec --- /dev/null +++ b/docs-gen/components/atoms/Rater/mbx-settings.json @@ -0,0 +1,14 @@ +{ + "since": "1.0.0", + "description": "", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { + "type": "number", + "overrideDescription": "callback triggered when user select a vote" + } + } + } +} diff --git a/docs-gen/components/atoms/Rater/props.json b/docs-gen/components/atoms/Rater/props.json new file mode 100644 index 00000000..7271a2ac --- /dev/null +++ b/docs-gen/components/atoms/Rater/props.json @@ -0,0 +1,28 @@ +{ + "value": { "default": "0", "description": "actual vote", "type": "number" }, + "max": { + "default": "5", + "description": "max vote (max number of icons displayed)", + "type": "number" + }, + "readOnly": { + "default": "false", + "description": "if `true`, the rate can't be changed by clicking on the icons", + "type": "boolean" + }, + "type": { + "default": "'star'", + "description": "vote icons type", + "type": "'star'|'circle'" + }, + "vertical": { + "default": "false", + "description": "if `true`, rate icons will be showed vertically", + "type": "boolean" + }, + "onChange": { + "type": "(newValue: number) => void", + "default": "() => {}", + "description": "callback triggered when user select a vote" + } +} diff --git a/docs-gen/components/atoms/Selector/css-vars.json b/docs-gen/components/atoms/Selector/css-vars.json new file mode 100644 index 00000000..04e2e9e9 --- /dev/null +++ b/docs-gen/components/atoms/Selector/css-vars.json @@ -0,0 +1,54 @@ +{ + "--mbx-selector-background": { + "description": "Fallback value for `mbx-selector-background-light` and `mbx-selector-background-dark`" + }, + "--mbx-selector-background-light": { + "description": "Selector background when dark mode is off", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-selector-background" + }, + "--mbx-selector-background-dark": { + "description": "Selector background when dark mode is on", + "defaultGlobal": "--mbx-background-dark)", + "fallback": "--mbx-selector-background" + }, + "--mbx-selector-text-color": { + "description": "Fallback value for `mbx-selector-text-color-light` and `mbx-selector-text-color-dark`" + }, + "--mbx-selector-text-color-light": { + "description": "Selector text color when dark mode is off", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-selector-text-color" + }, + "--mbx-selector-text-color-dark": { + "description": "Selector text color when dark mode is on", + "defaultGlobal": "[--mbx-text-color-dark", + "fallback": "--mbx-selector-text-color" + }, + "--mbx-selector-background-hover": { + "description": "Fallback value for `mbx-selector-background-hover-light` and `mbx-selector-background-hover-dark`" + }, + "--mbx-selector-background-hover-light": { + "description": "Selector background when dark mode is off, on hover", + "defaultGlobal": "--mbx-background-hover-light", + "fallback": "--mbx-selector-background-hover" + }, + "--mbx-selector-background-hover-dark": { + "description": "Selector background when dark mode is on, on hover", + "defaultGlobal": "--mbx-background-hover-light", + "fallback": "--mbx-selector-background-hover" + }, + "--mbx-selector-text-color-hover": { + "description": "Fallback value for `mbx-selector-text-color-hover-light` and `mbx-selector-text-color-hover-dark`" + }, + "--mbx-selector-text-color-hover-light": { + "description": "Selector text color when dark mode is off, on hover", + "defaultGlobal": "--mbx-text-color-hover-light", + "fallback": "--mbx-selector-text-color-hover" + }, + "--mbx-selector-text-color-hover-dark": { + "description": "Selector text color when dark mode is on, on hover", + "defaultGlobal": "--mbx-text-color-hover-dark", + "fallback": "--mbx-selector-text-color-hover" + } +} diff --git a/docs-gen/components/atoms/Selector/mbx-settings.json b/docs-gen/components/atoms/Selector/mbx-settings.json new file mode 100644 index 00000000..430ecef8 --- /dev/null +++ b/docs-gen/components/atoms/Selector/mbx-settings.json @@ -0,0 +1,11 @@ +{ + "since": "2.0.0", + "description": "A re-defined `select` component", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { "type": "number" } + } + } +} diff --git a/docs-gen/components/atoms/Selector/props.json b/docs-gen/components/atoms/Selector/props.json new file mode 100644 index 00000000..bc5d5f3c --- /dev/null +++ b/docs-gen/components/atoms/Selector/props.json @@ -0,0 +1,22 @@ +{ + "value": { + "default": "0", + "type": "number", + "description": "option index actually displayed" + }, + "elements": { + "default": "[]", + "type": "string[]", + "description": "selector options array, every element must be a string" + }, + "optionClassName": { + "default": "", + "type": "string", + "description": "className applied on every options inside the selector" + }, + "onChange": { + "type": "(newValue: number) => void", + "default": "() => {}", + "description": "Callback triggered when Selector component input value is changed by the user" + } +} diff --git a/docs-gen/components/atoms/Slider/css-vars.json b/docs-gen/components/atoms/Slider/css-vars.json new file mode 100644 index 00000000..d1a786d9 --- /dev/null +++ b/docs-gen/components/atoms/Slider/css-vars.json @@ -0,0 +1,41 @@ +{ + "--mbx-slider-background": { + "description": "Fallback value for `mbx-slider-background-light` and `mbx-slider-background-dark`" + }, + "--mbx-slider-background-light": { + "description": "Slider background when dark mode is off", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-slider-background" + }, + "--mbx-slider-background-dark": { + "description": "Slider background when dark mode is on", + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-slider-background" + }, + "--mbx-slider-thumb-color": { + "description": "Fallback value for `mbx-slider-thumb-color-light` and `mbx-slider-thumb-color-dark`" + }, + "--mbx-slider-thumb-color-light": { + "description": "Slider thumb color when dark mode is off", + "default": "radial-gradient(#2d3748, #1d232e)", + "fallback": "--mbx-slider-thumb-color" + }, + "--mbx-slider-thumb-color-dark": { + "description": "Slider thumb color when dark mode is on", + "default": "radial-gradient(#e3e4e9, #9b9999)", + "fallback": "--mbx-slider-thumb-color" + }, + "--mbx-slider-thumb-color-hover": { + "description": "Fallback value for `mbx-slider-thumb-color-hover-light` and `mbx-slider-thumb-color-hover-dark`" + }, + "--mbx-slider-thumb-color-hover-light": { + "description": "Slider thumb color when dark mode is off, on hover", + "defaultInternal": "--mbx-slider-thumb-color-light", + "fallback": "--mbx-slider-thumb-color-hover" + }, + "--mbx-slider-thumb-color-hover-dark": { + "description": "Slider thumb color when dark mode is on, on hover", + "defaultInternal": "--mbx-slider-thumb-color-dark", + "fallback": "--mbx-slider-thumb-color-hover" + } +} diff --git a/docs-gen/components/atoms/Slider/mbx-settings.json b/docs-gen/components/atoms/Slider/mbx-settings.json new file mode 100644 index 00000000..c55a087c --- /dev/null +++ b/docs-gen/components/atoms/Slider/mbx-settings.json @@ -0,0 +1,11 @@ +{ + "since": "2.0.0", + "description": "A modern `range` input component, to control a value using a simple slider", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { "type": "number" } + } + } +} diff --git a/docs-gen/components/atoms/Slider/props.json b/docs-gen/components/atoms/Slider/props.json new file mode 100644 index 00000000..aa89ca48 --- /dev/null +++ b/docs-gen/components/atoms/Slider/props.json @@ -0,0 +1,15 @@ +{ + "value": { "description": "Actual slider value", "type": "number" }, + "min": { "description": "Min allowed value", "type": "number" }, + "max": { "description": "Max allowed value", "type": "number" }, + "readOnly": { + "default": false, + "description": "if `true`, component value can only be set with `value` parameter", + "type": "boolean" + }, + "onChange": { + "type": "(newValue: number) => void", + "default": "() => {}", + "description": "Callback triggered when Slider component input value is changed by the user" + } +} diff --git a/docs-gen/components/atoms/Spinner/css-vars.json b/docs-gen/components/atoms/Spinner/css-vars.json new file mode 100644 index 00000000..3177706e --- /dev/null +++ b/docs-gen/components/atoms/Spinner/css-vars.json @@ -0,0 +1,41 @@ +{ + "--mbx-spinner-success-color": { + "description": "Fallback value for `--mbx-spinner-success-color-light` and `--mbx-spinner-success-color-dark`" + }, + "--mbx-spinner-success-color-light": { + "description": "Spinner success color when dark mode is off", + "default": "#05bc29", + "fallback": "--mbx-spinner-success-color" + }, + "--mbx-spinner-success-color-dark": { + "description": "Spinner success color when dark mode is on", + "default": "#05bc29", + "fallback": "--mbx-spinner-success-color" + }, + "--mbx-spinner-error-color": { + "description": "Fallback value for `--mbx-spinner-error-color-light` and `--mbx-spinner-error-color-dark`" + }, + "--mbx-spinner-error-color-light": { + "description": "Spinner error color when dark mode is off", + "default": "#ff0000", + "fallback": "--mbx-spinner-error-color" + }, + "--mbx-spinner-error-color-dark": { + "description": "Spinner error color when dark mode is on", + "default": "#ff0000", + "fallback": "--mbx-spinner-error-color" + }, + "--mbx-spinner-loading-color": { + "description": "Fallback value for `--mbx-spinner-loading-color-light` and `--mbx-spinner-loading-color-dark`" + }, + "--mbx-spinner-loading-color-light": { + "description": "Spinner loading color when dark mode is off", + "default": "#202020", + "fallback": "--mbx-spinner-loading-color" + }, + "--mbx-spinner-loading-color-dark": { + "description": "Spinner loading color when dark mode is on", + "default": "#202020", + "fallback": "--mbx-spinner-loading-color" + } +} diff --git a/docs-gen/components/atoms/Spinner/mbx-settings.json b/docs-gen/components/atoms/Spinner/mbx-settings.json new file mode 100644 index 00000000..b9870657 --- /dev/null +++ b/docs-gen/components/atoms/Spinner/mbx-settings.json @@ -0,0 +1,6 @@ +{ + "since": "1.0.0", + "description": "A smart status indicator, optionally with custom images showed for every state (defaults are `loading`,`success` and `error`)", + "see": [], + "examples": [] +} diff --git a/docs-gen/components/atoms/Spinner/props.json b/docs-gen/components/atoms/Spinner/props.json new file mode 100644 index 00000000..f1368d05 --- /dev/null +++ b/docs-gen/components/atoms/Spinner/props.json @@ -0,0 +1,11 @@ +{ + "value": { + "description": "Spinner status", + "type": "number", + "default": "'loading'" + }, + "statuses": { + "type": "Record", + "description": "Custom statuses, to map every icon with a specific status" + } +} diff --git a/docs-gen/components/atoms/Toggle/css-vars.json b/docs-gen/components/atoms/Toggle/css-vars.json new file mode 100644 index 00000000..7f3a29c0 --- /dev/null +++ b/docs-gen/components/atoms/Toggle/css-vars.json @@ -0,0 +1,67 @@ +{ + "--mbx-toggle-background": { + "description": "Fallback value for `--mbx-toggle-background-light` and `--mbx-toggle-background-dark`" + }, + "--mbx-toggle-background-light": { + "description": "Toggle background when dark mode is `off`", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-toggle-background" + }, + "--mbx-toggle-background-dark": { + "description": "Toggle background when dark mode is `on`", + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-toggle-background" + }, + "--mbx-toggle-icon-on-internal-color": { + "description": "Fallback value for `--mbx-toggle-icon-on-internal-color-light` and `--mbx-toggle-icon-on-internal-color-dark`" + }, + "--mbx-toggle-icon-on-internal-color-light": { + "description": "Toggle icon internal color, when dark mode is `off` and toggle status is `off`", + "defaultColor": "#ffffff", + "fallback": "--mbx-toggle-icon-on-internal-color" + }, + "--mbx-toggle-icon-on-internal-color-dark": { + "description": "Toggle icon internal color, when dark mode is `off` and toggle status is `on`", + "defaultColor": "#ffffff", + "fallback": "--mbx-toggle-icon-on-internal-color" + }, + "--mbx-toggle-icon-on-external-color": { + "description": "Fallback value for `--mbx-toggle-icon-on-external-color-light` and `--mbx-toggle-icon-on-external-color-dark`" + }, + "--mbx-toggle-icon-on-external-color-light": { + "description": "Toggle icon external color, when dark mode is `off` and toggle status is `on`", + "defaultColor": "#adadad", + "fallback": "--mbx-toggle-icon-on-external-color" + }, + "--mbx-toggle-icon-on-external-color-dark": { + "description": "Toggle icon external color, when dark mode is `on` and toggle status is `on`", + "defaultColor": "#adadad", + "fallback": "--mbx-toggle-icon-on-external-color" + }, + "--mbx-toggle-icon-off-internal-color": { + "description": "Fallback value for `--mbx-toggle-icon-off-internal-color-light` and `--mbx-toggle-icon-off-internal-color-dark`" + }, + "--mbx-toggle-icon-off-internal-color-light": { + "description": "Toggle icon internal color, when dark mode is `off` and toggle status is `off`", + "defaultColor": "#a5a5a5", + "fallback": "--mbx-toggle-icon-off-internal-color" + }, + "--mbx-toggle-icon-off-internal-color-dark": { + "description": "Toggle icon internal color, when dark mode is `on` and toggle status is `off`", + "defaultColor": "#a5a5a5", + "fallback": "--mbx-toggle-icon-off-internal-color" + }, + "--mbx-toggle-icon-off-external-color": { + "description": "Fallback value for `--mbx-toggle-icon-off-external-color-light` and `--mbx-toggle-icon-off-external-color-dark`" + }, + "--mbx-toggle-icon-off-external-color-light": { + "description": "Toggle icon external color, when dark mode is `off` and toggle status is `off`", + "defaultColor": "#a7a3a3", + "fallback": "--mbx-toggle-icon-off-external-color" + }, + "--mbx-toggle-icon-off-external-color-dark": { + "description": "Toggle icon external color, when dark mode is `on` and toggle status is `off`", + "defaultColor": "#a7a3a3", + "fallback": "--mbx-toggle-icon-off-external-color" + } +} diff --git a/docs-gen/components/atoms/Toggle/mbx-settings.json b/docs-gen/components/atoms/Toggle/mbx-settings.json new file mode 100644 index 00000000..2b47e609 --- /dev/null +++ b/docs-gen/components/atoms/Toggle/mbx-settings.json @@ -0,0 +1,11 @@ +{ + "since": "1.0.0", + "description": "A compact Toggle switcher, customized to reflect its actual status", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { "type": "boolean" } + } + } +} diff --git a/docs-gen/components/atoms/Toggle/props.json b/docs-gen/components/atoms/Toggle/props.json new file mode 100644 index 00000000..d4f30c27 --- /dev/null +++ b/docs-gen/components/atoms/Toggle/props.json @@ -0,0 +1,24 @@ +{ + "value": { + "default": "", + "description": "toggle status (true - on/false - off)", + "type": "boolean" + }, + "onIcon": { + "description": "custom toggle `on` icon (`value` === `true`)", + "type": "JSX.Element" + }, + "icon": { + "description": "custom toggle icon, used as a default icon", + "type": "JSX.Element" + }, + "offIcon": { + "description": "custom toggle `off` icon (`value` === `false`)", + "type": "JSX.Element" + }, + "onChange": { + "type": "(newValue: boolean) => void", + "default": "() => {}", + "description": "Callback triggered when Toggle component input value is changed by the user" + } +} diff --git a/docs-gen/components/global-css-vars.json b/docs-gen/components/global-css-vars.json new file mode 100644 index 00000000..55470e34 --- /dev/null +++ b/docs-gen/components/global-css-vars.json @@ -0,0 +1,67 @@ +{ + "--mbx-background": { + "description": "Fallback value for [--mbx-background-light](#mbx-background-light) and [--mbx-background-dark](#mbx-background-dark) variables" + }, + "--mbx-background-light": { + "fallback": "--mbx-background", + "defaultColor": "linear-gradient(to right, #fff, #ededee, #e6e7e7)" + }, + "--mbx-background-dark": { + "fallback": "--mbx-background", + "defaultColor": "linear-gradient(to right, #2d3748, #1d232e)" + }, + "--mbx-background-color": {}, + "--mbx-background-color-light": { + "fallback": "--mbx-background-color", + "defaultColor": "#e9e9e9" + }, + "--mbx-background-color-dark": { + "fallback": "--mbx-background-color", + "defaultColor": "#1d232e" + }, + "--mbx-background-color-hover": {}, + "--mbx-background-color-hover-light": { + "fallback": "--mbx-background-color-hover", + "defaultColor": "#dfeaf8" + }, + "--mbx-background-color-hover-dark": { + "fallback": "--mbx-background-color-hover", + "defaultColor": "#3a3552" + }, + "--mbx-background-hover": {}, + "--mbx-background-hover-light": { + "fallback": "--mbx-background-hover", + "defaultColor": "linear-gradient(to right, #ececec, #e1e1e6, #dbdddd)" + }, + "--mbx-background-hover-dark": { + "fallback": "--mbx-background-hover", + "defaultColor": "linear-gradient(to right, #364257, #252d3b)" + }, + "--mbx-text-color": {}, + "--mbx-text-color-light": { + "fallback": "--mbx-text-color", + "defaultColor": "#1b1b1b" + }, + "--mbx-text-color-dark": { + "fallback": "--mbx-text-color", + "defaultColor": "white" + }, + "--mbx-text-color-hover": {}, + "--mbx-text-color-hover-light": { + "fallback": "--mbx-text-color-hover", + "defaultColor": "#413c5c" + }, + "--mbx-text-color-hover-dark": { + "fallback": "--mbx-text-color-hover", + "defaultColor": "#dfeaf8" + }, + "--mbx-focus-color": {}, + "--mbx-focus-color-light": { + "fallback": "--mbx-focus-color", + "defaultColor": "#7785ff" + }, + "--mbx-focus-color-dark": { + "fallback": "--mbx-focus-color", + "defaultColor": "#fb7a10" + } +} diff --git a/docs-gen/components/molecules/Card/css-vars.json b/docs-gen/components/molecules/Card/css-vars.json new file mode 100644 index 00000000..15dc29cb --- /dev/null +++ b/docs-gen/components/molecules/Card/css-vars.json @@ -0,0 +1,28 @@ +{ + "--mbx-card-background": { + "description": "Fallback value for `--mbx-card-background-light` and `--mbx-card-background-dark`" + }, + "--mbx-card-background-light": { + "description": "Card background when dark mode is `off`", + "fallback": "--mbx-card-background", + "defaultColor": "linear-gradient(to right, #fff, #ededee, #e6e7e7)" + }, + "--mbx-card-background-dark": { + "description": "Card background when dark mode is `on`", + "fallback": "--mbx-card-background", + "defaultColor": "linear-gradient(to right, #2d3748, #1d232e)" + }, + "--mbx-card-text-color": { + "description": "Fallback value for `--mbx-card-text-color-light` and `--mbx-card-text-color-dark`" + }, + "--mbx-card-text-color-light": { + "description": "Card text color when dark mode is `off`", + "fallback": "--mbx-card-text-color", + "defaultGlobal": "--mbx-text-color-light" + }, + "--mbx-card-text-color-dark": { + "description": "Card text color when dark mode is `on`", + "fallback": "--mbx-card-text-color", + "defaultGlobal": "--mbx-text-color-dark" + } +} diff --git a/docs-gen/components/molecules/Card/mbx-settings.json b/docs-gen/components/molecules/Card/mbx-settings.json new file mode 100644 index 00000000..431e7d48 --- /dev/null +++ b/docs-gen/components/molecules/Card/mbx-settings.json @@ -0,0 +1,15 @@ +{ + "since": "1.0.0", + "description": "A Card component. Its UI depends on given parameters (header, body and footer)", + "see": [], + "examples": [ + "import { render } from 'react-dom'; import { Card } from 'mobrix-ui'; render(, document.getElementById('root'));" + ], + "extend": { + "group": { + "ComponentWithChildren": { + "type": "`JSX.Element` | `string`" + } + } + } +} diff --git a/docs-gen/components/molecules/Card/props.json b/docs-gen/components/molecules/Card/props.json new file mode 100644 index 00000000..0e1418d0 --- /dev/null +++ b/docs-gen/components/molecules/Card/props.json @@ -0,0 +1,37 @@ +{ + "header": { + "description": "Card header content", + "typeComment": "JSX.Element | string", + "type": "JSX.Element | string" + }, + "body": { + "description": "Card body content", + "typeComment": "JSX.Element | string", + "type": "JSX.Element | string" + }, + "footer": { + "description": "Card footer content", + "typeComment": "JSX.Element | string", + "type": "JSX.Element | string" + }, + "noDivider": { + "description": "If `true`, hide all dividers", + "type": "boolean", + "default": false + }, + "noTopDivider": { + "description": "If `true`, hide the top divider, between header and body", + "type": "boolean", + "default": false + }, + "noBottomDivider": { + "description": "If `true`, hide the top divider, between body and footer", + "type": "boolean", + "default": false + }, + "children": { + "type": "`JSX.Element` | `string`", + "default": "", + "description": "Card content" + } +} diff --git a/docs-gen/components/molecules/Carousel/css-vars.json b/docs-gen/components/molecules/Carousel/css-vars.json new file mode 100644 index 00000000..4405fdf1 --- /dev/null +++ b/docs-gen/components/molecules/Carousel/css-vars.json @@ -0,0 +1,67 @@ +{ + "--mbx-carousel-background": { + "description": "Fallback value for `--mbx-carousel-background-light` and `--mbx-carousel-background-dark`" + }, + "--mbx-carousel-background-light": { + "description": "Carousel background when dark mode is `off`", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-carousel-background" + }, + "--mbx-carousel-background-dark": { + "description": "Carousel background when dark mode is `on`", + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-carousel-background" + }, + "--mbx-carousel-arrow-color": { + "description": "Fallback value for `--mbx-carousel-arrow-color-light` and `--mbx-carousel-arrow-color-dark`" + }, + "--mbx-carousel-arrow-color-light": { + "description": "Carousel arrow color when dark mode is `off`", + "defaultColor": "#252525", + "fallback": "--mbx-carousel-arrow-color" + }, + "--mbx-carousel-arrow-color-dark": { + "description": "Carousel arrow color when dark mode is `on`", + "defaultColor": "#e2e2e2", + "fallback": "--mbx-carousel-arrow-color" + }, + "--mbx-carousel-arrow-color-hover": { + "description": "Fallback value for `--mbx-carousel-arrow-color-hover-light` and `--mbx-carousel-arrow-color-hover-dark`" + }, + "--mbx-carousel-arrow-color-hover-light": { + "description": "Carousel arrow color when dark mode is `off`, on hover", + "defaultColor": "#287dfd", + "fallback": "--mbx-carousel-arrow-color-hover" + }, + "--mbx-carousel-arrow-color-hover-dark": { + "description": "Carousel arrow color when dark mode is `on`, on hover", + "defaultColor": "#ff8007", + "fallback": "--mbx-carousel-arrow-color-hover" + }, + "--mbx-carousel-dot-empty-background": { + "description": "Fallback value for `--mbx-carousel-dot-empty-background-light` and `--mbx-carousel-dot-empty-background-dark`" + }, + "--mbx-carousel-dot-empty-background-light": { + "description": "Carousel empty dot background when dark mode is `off`", + "defaultColor": "radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383)", + "fallback": "--mbx-carousel-dot-empty-background" + }, + "--mbx-carousel-dot-empty-background-dark": { + "description": "Carousel empty dot background when dark mode is `on`", + "defaultColor": "radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383)", + "fallback": "--mbx-carousel-dot-empty-background" + }, + "--mbx-carousel-dot-full-background": { + "description": "Fallback value for `--mbx-carousel-dot-full-background-light` and `--mbx-carousel-dot-full-background-dark`" + }, + "--mbx-carousel-dot-full-background-light": { + "description": "Carousel full dot background when dark mode is `off`", + "defaultColor": "linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4)", + "fallback": "--mbx-carousel-dot-full-background" + }, + "--mbx-carousel-dot-full-background-dark": { + "description": "Carousel full dot background when dark mode is `on`", + "defaultColor": "linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4)", + "fallback": "--mbx-carousel-dot-full-background" + } +} diff --git a/docs-gen/components/molecules/Carousel/mbx-settings.json b/docs-gen/components/molecules/Carousel/mbx-settings.json new file mode 100644 index 00000000..f0336ac9 --- /dev/null +++ b/docs-gen/components/molecules/Carousel/mbx-settings.json @@ -0,0 +1,13 @@ +{ + "since": "1.0.0", + "description": "A compact carousel, to show any component (or image) into a slide, with dots and arrow button to go next/previous", + "see": [], + "examples": [ + "import { render } from 'react-dom'; import { Carousel } from 'mobrix-ui'; render(Element 0
,
Element 1
]} value={1} />, document.getElementById('root'));" + ], + "extend": { + "group": { + "ComponentWithCallback": { "type": "number" } + } + } +} diff --git a/docs-gen/components/molecules/Carousel/props.json b/docs-gen/components/molecules/Carousel/props.json new file mode 100644 index 00000000..7bfb669e --- /dev/null +++ b/docs-gen/components/molecules/Carousel/props.json @@ -0,0 +1,18 @@ +{ + "elements": { + "typeComment": "(JSX.Element | string)[]", + "type": "(JSX.Element | string)[]", + "description": "Carousel elements", + "default": "[]" + }, + "onChange": { + "type": "(newValue: number) => void", + "default": "() => {}", + "description": "Callback triggered when Carousel component input value is changed by the user" + }, + "value": { + "type": "number", + "description": "Initial element to show (as index)", + "default": "0" + } +} diff --git a/docs-gen/components/molecules/Container/css-vars.json b/docs-gen/components/molecules/Container/css-vars.json new file mode 100644 index 00000000..42c4121f --- /dev/null +++ b/docs-gen/components/molecules/Container/css-vars.json @@ -0,0 +1,28 @@ +{ + "--mbx-container-background": { + "description": "Fallback value for `--mbx-container-background-light` and `--mbx-container-background-dark`" + }, + "--mbx-container-background-light": { + "description": "Container background when dark mode is `off`", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-container-background" + }, + "--mbx-container-background-dark": { + "description": "Container background when dark mode is `on`", + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-container-background" + }, + "--mbx-container-text-color": { + "description": "Fallback value for `--mbx-container-text-color-light` and `--mbx-container-text-color-dark`" + }, + "--mbx-container-text-color-light": { + "description": "Container text color when dark mode is `off`", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-container-text-color" + }, + "--mbx-container-text-color-dark": { + "description": "Container text color when dark mode is `on`", + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-container-text-color" + } +} diff --git a/docs-gen/components/molecules/Container/mbx-settings.json b/docs-gen/components/molecules/Container/mbx-settings.json new file mode 100644 index 00000000..3676daab --- /dev/null +++ b/docs-gen/components/molecules/Container/mbx-settings.json @@ -0,0 +1,12 @@ +{ + "since": "1.0.0", + "description": "A simple but smart container, enhanced with MoBrix-ui common props", + "see": [], + "examples": [ + { + "title": "Container Example usage", + "description": "", + "code": "import { render } from 'react-dom'; import { Container } from 'mobrix-ui'; render( Example content , document.getElementById('root'));" + } + ] +} diff --git a/docs-gen/components/molecules/Container/props.json b/docs-gen/components/molecules/Container/props.json new file mode 100644 index 00000000..4af23366 --- /dev/null +++ b/docs-gen/components/molecules/Container/props.json @@ -0,0 +1,11 @@ +{ + "children": { + "type": "any", + "description": "content to render inside Container" + }, + "wrapper": { + "type": "'div' | 'header' | 'footer'", + "description": "component wrapper type", + "default": "div" + } +} diff --git a/docs-gen/components/molecules/DismissableCard/css-vars.json b/docs-gen/components/molecules/DismissableCard/css-vars.json new file mode 100644 index 00000000..2c85d1af --- /dev/null +++ b/docs-gen/components/molecules/DismissableCard/css-vars.json @@ -0,0 +1,70 @@ +{ + "--mbx-dismissablecard-background": { + "description": "Fallback value for `--mbx-dismissablecard-background-light` and `--mbx-dismissablecard-background-dark`" + }, + "--mbx-dismissablecard-background-light": { + "description": "DismissableCard background when dark mode is `off`", + "defaultExternal": { + "type": "molecules", + "component": "Card", + "prop": "--mbx-card-background-light" + }, + "fallback": "--mbx-dismissablecard-background" + }, + "--mbx-dismissablecard-background-dark": { + "description": "DismissableCard background when dark mode is `on`", + "defaultExternal": { + "type": "molecules", + "component": "Card", + "prop": "--mbx-card-background-dark" + }, + "fallback": "--mbx-dismissablecard-background" + }, + "--mbx-dismissablecard-text-color": { + "description": "Fallback value for `--mbx-dismissablecard-text-color-light` and `--mbx-dismissablecard-text-color-dark`" + }, + "--mbx-dismissablecard-text-color-light": { + "description": "DismissableCard text color when dark mode is `off`", + "defaultExternal": { + "type": "molecules", + "component": "Card", + "prop": "--mbx-card-text-color-light" + }, + "fallback": "--mbx-dismissablecard-text-color" + }, + "--mbx-dismissablecard-text-color-dark": { + "description": "DismissableCard text color when dark mode is `on`", + "defaultExternal": { + "type": "molecules", + "prop": "--mbx-card-text-color-dark", + "component": "Card" + }, + "fallback": "--mbx-dismissablecard-text-color" + }, + "--mbx-dismissablecard-x-color": { + "description": "Fallback value for `--mbx-dismissablecard-x-color-light` and `--mbx-dismissablecard-x-color-dark`" + }, + "--mbx-dismissablecard-x-color-light": { + "description": "DismissableCard x icon color when dark mode is `off`", + "defaultInternal": "--mbx-dismissablecard-text-color-light", + "fallback": "--mbx-dismissablecard-x-color" + }, + "--mbx-dismissablecard-x-color-dark": { + "description": "DismissableCard x icon color when dark mode is `on`", + "defaultInternal": "--mbx-dismissablecard-text-color-dark", + "fallback": "--mbx-dismissablecard-x-color" + }, + "--mbx-dismissablecard-x-color-hover": { + "description": "Fallback value for `--mbx-dismissablecard-x-color-hover-light` and `--mbx-dismissablecard-x-color-hover-dark`" + }, + "--mbx-dismissablecard-x-color-hover-light": { + "description": "DismissableCard x icon color when dark mode is `off`, on hover", + "defaultColor": "red", + "fallback": "--mbx-dismissablecard-x-color-hover" + }, + "--mbx-dismissablecard-x-color-hover-dark": { + "description": "DismissableCard x icon color when dark mode is `on`, on hover", + "defaultColor": "red", + "fallback": "--mbx-dismissablecard-x-color-hover" + } +} diff --git a/docs-gen/components/molecules/DismissableCard/mbx-settings.json b/docs-gen/components/molecules/DismissableCard/mbx-settings.json new file mode 100644 index 00000000..f3b039a9 --- /dev/null +++ b/docs-gen/components/molecules/DismissableCard/mbx-settings.json @@ -0,0 +1,7 @@ +{ + "since": "3.0.0", + "description": "A standard Card with a dismiss function", + "see": [], + "examples": [], + "extend": { "component": { "type": "molecules", "name": "Card" } } +} diff --git a/docs-gen/components/molecules/DismissableCard/props.json b/docs-gen/components/molecules/DismissableCard/props.json new file mode 100644 index 00000000..a21940ac --- /dev/null +++ b/docs-gen/components/molecules/DismissableCard/props.json @@ -0,0 +1,54 @@ +{ + "onClose": { + "description": "Callback triggered when the X icon is clicked", + "default": "() => {}", + "type": "() => void" + }, + "alwaysVisible": { + "description": "If `true`, the DismissableCard won't disappear if the X icon is clicked (can be hidden with `hide` shared prop)", + "default": "false", + "type": "boolean" + }, + "header": { + "description": "Card header content - extended from [Card component](../../molecules/Card/props.md#header)", + "typeComment": "JSX.Element | string", + "type": "JSX.Element | string", + "comment": "Card header content - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Card Card}" + }, + "body": { + "description": "Card body content - extended from [Card component](../../molecules/Card/props.md#body)", + "typeComment": "JSX.Element | string", + "type": "JSX.Element | string", + "comment": "Card body content - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Card Card}" + }, + "footer": { + "description": "Card footer content - extended from [Card component](../../molecules/Card/props.md#footer)", + "typeComment": "JSX.Element | string", + "type": "JSX.Element | string", + "comment": "Card footer content - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Card Card}" + }, + "noDivider": { + "description": "If `true`, hide all dividers - extended from [Card component](../../molecules/Card/props.md#noDivider)", + "type": "boolean", + "default": false, + "comment": "If `true`, hide all dividers - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Card Card}" + }, + "noTopDivider": { + "description": "If `true`, hide the top divider, between header and body - extended from [Card component](../../molecules/Card/props.md#noTopDivider)", + "type": "boolean", + "default": false, + "comment": "If `true`, hide the top divider, between header and body - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Card Card}" + }, + "noBottomDivider": { + "description": "If `true`, hide the top divider, between body and footer - extended from [Card component](../../molecules/Card/props.md#noBottomDivider)", + "type": "boolean", + "default": false, + "comment": "If `true`, hide the top divider, between body and footer - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Card Card}" + }, + "children": { + "type": "`JSX.Element` | `string`", + "default": "", + "description": "Card content - extended from [Card component](../../molecules/Card/props.md#children)", + "comment": "Card content - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Card Card}" + } +} diff --git a/docs-gen/components/molecules/Dropdown/css-vars.json b/docs-gen/components/molecules/Dropdown/css-vars.json new file mode 100644 index 00000000..8c2670bc --- /dev/null +++ b/docs-gen/components/molecules/Dropdown/css-vars.json @@ -0,0 +1,80 @@ +{ + "--mbx-dropdown-background": { + "description": "Fallback value for `--mbx-dropdown-background-light` and `--mbx-dropdown-background-dark`" + }, + "--mbx-dropdown-background-light": { + "description": "Dropdown background when dark mode is `off`", + "fallback": "--mbx-dropdown-background", + "defaultGlobal": "--mbx-background-light" + }, + "--mbx-dropdown-background-dark": { + "description": "Dropdown background when dark mode is `on`", + "fallback": "--mbx-dropdown-background", + "defaultGlobal": "--mbx-background-dark" + }, + "--mbx-dropdown-text-color": { + "description": "Fallback value for `--mbx-dropdown-text-color-light` and `--mbx-dropdown-text-color-dark`" + }, + "--mbx-dropdown-text-color-light": { + "description": "Dropdown text color when dark mode is `off`", + "fallback": "--mbx-dropdown-text-color", + "defaultGlobal": "--mbx-text-color-light" + }, + "--mbx-dropdown-text-color-dark": { + "description": "Dropdown text color when dark mode is `on`", + "fallback": "--mbx-dropdown-text-color", + "defaultGlobal": "--mbx-text-color-dark" + }, + "--mbx-dropdown-background-hover": { + "description": "Fallback value for `--mbx-dropdown-background-hover-light` and `--mbx-dropdown-background-hover-dark`" + }, + "--mbx-dropdown-background-hover-light": { + "description": "Dropdown background when dark mode is `off`, on hover", + "fallback": "--mbx-dropdown-background", + "defaultGlobal": "--mbx-background-hover-light" + }, + "--mbx-dropdown-background-hover-dark": { + "description": "Dropdown background when dark mode is `on`, on hover", + "fallback": "--mbx-dropdown-background", + "defaultGlobal": "--mbx-background-hover-dark" + }, + "--mbx-dropdown-text-color-hover": { + "description": "Fallback value for `--mbx-dropdown-text-color-hover-light` and `--mbx-dropdown-text-color-hover-dark`" + }, + "--mbx-dropdown-text-color-hover-light": { + "description": "Dropdown text color when dark mode is `off`, on hover", + "fallback": "--mbx-dropdown-background-hover", + "defaultGlobal": "--mbx-text-color-hover-light" + }, + "--mbx-dropdown-text-color-hover-dark": { + "description": "Dropdown text color when dark mode is `on`, on hover", + "fallback": "--mbx-dropdown-background-hover", + "defaultGlobal": "--mbx-text-color-hover-dark" + }, + "--mbx-dropdown-arrow-color": { + "description": "Fallback value for `--mbx-dropdown-arrow-color-light` and `--mbx-dropdown-arrow-color-dark`" + }, + "--mbx-dropdown-arrow-color-light": { + "description": "Dropdown arrow color when dark mode is `off`", + "defaultInternal": "--mbx-dropdown-text-color-light", + "fallback": "--mbx-dropdown-arrow-color" + }, + "--mbx-dropdown-arrow-color-dark": { + "description": "Dropdown arrow color when dark mode is `on`", + "defaultInternal": "--mbx-dropdown-text-color-dark", + "fallback": "--mbx-dropdown-arrow-color" + }, + "--mbx-dropdown-arrow-color-hover": { + "description": "Fallback value for `--mbx-dropdown-arrow-color-hover-light` and `--mbx-dropdown-arrow-color-hover-dark`" + }, + "--mbx-dropdown-arrow-color-hover-light": { + "description": "Dropdown arrow color when dark mode is `off`, on hover", + "defaultInternal": "--mbx-dropdown-arrow-color-light", + "fallback": "--mbx-dropdown-arrow-color-hover" + }, + "--mbx-dropdown-arrow-color-hover-dark": { + "description": "Dropdown arrow color when dark mode is `on`, on hover", + "defaultInternal": "--mbx-dropdown-arrow-color-dark", + "fallback": "--mbx-dropdown-arrow-color-hover" + } +} diff --git a/docs-gen/components/molecules/Dropdown/mbx-settings.json b/docs-gen/components/molecules/Dropdown/mbx-settings.json new file mode 100644 index 00000000..00a41737 --- /dev/null +++ b/docs-gen/components/molecules/Dropdown/mbx-settings.json @@ -0,0 +1,14 @@ +{ + "since": "1.0.0", + "description": "Show a list of elements in a dropdown menu (with fade-in and out effects). Can be easily customized and every element style and behaviour (with a callback) can be customized too.", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { + "type": "number", + "overrideDescription": "Callback triggered when selecting new element from dropdown" + } + } + } +} diff --git a/docs-gen/components/molecules/Dropdown/props.json b/docs-gen/components/molecules/Dropdown/props.json new file mode 100644 index 00000000..ade48996 --- /dev/null +++ b/docs-gen/components/molecules/Dropdown/props.json @@ -0,0 +1,23 @@ +{ + "value": { + "description": "actual selected element (as index). If not set, default value will be used.", + "type": "number", + "default": 0 + }, + "elements": { + "description": "Dropdown content elements", + "type": "(JSX.Element | string)[]", + "typeComment": "(JSX.Element | string)[]", + "default": "[]" + }, + "hideArrow": { + "description": "If `true`, hide the arrow icon near selected element", + "type": "boolean", + "default": "false" + }, + "onChange": { + "type": "(newValue: number) => void", + "default": "() => {}", + "description": "Callback triggered when selecting new element from dropdown" + } +} diff --git a/docs-gen/components/molecules/ExpandableContainer/css-vars.json b/docs-gen/components/molecules/ExpandableContainer/css-vars.json new file mode 100644 index 00000000..967102f5 --- /dev/null +++ b/docs-gen/components/molecules/ExpandableContainer/css-vars.json @@ -0,0 +1,70 @@ +{ + "--mbx-expandablecontainer-background": { + "description": "Fallback value for `--mbx-expandablecontainer-background-light` and `--mbx-expandablecontainer-background-dark`" + }, + "--mbx-expandablecontainer-background-light": { + "description": "ExpandableContainer background when dark mode is `off`", + "defaultExternal": { + "type": "molecules", + "component": "container", + "prop": "mbx-container-background-light" + }, + "fallback": "--mbx-expandablecontainer-background" + }, + "--mbx-expandablecontainer-background-dark": { + "description": "ExpandableContainer background when dark mode is `on`", + "defaultExternal": { + "type": "molecules", + "component": "container", + "prop": "mbx-container-background-dark" + }, + "fallback": "--mbx-expandablecontainer-background" + }, + "--mbx-expandablecontainer-text-color": { + "description": "Fallback value for `--mbx-expandablecontainer-text-color-light` and `--mbx-expandablecontainer-text-color-dark`" + }, + "--mbx-expandablecontainer-text-color-light": { + "description": "ExpandableContainer text color when dark mode is `off`", + "defaultExternal": { + "type": "molecules", + "component": "container", + "prop": "mbx-container-text-color-light" + }, + "fallback": "--mbx-expandablecontainer-text-color" + }, + "--mbx-expandablecontainer-text-color-dark": { + "description": "ExpandableContainer text color when dark mode is `on`", + "defaultExternal": { + "type": "molecules", + "component": "container", + "prop": "mbx-container-text-color-dark" + }, + "fallback": "--mbx-expandablecontainer-text-color" + }, + "--mbx-expandablecontainer-arrow-color": { + "description": "Fallback value for `--mbx-expandablecontainer-arrow-color-light` and `--mbx-expandablecontainer-arrow-color-dark`" + }, + "--mbx-expandablecontainer-arrow-color-light": { + "defaultInternal": "--mbx-expandablecontainer-text-color-light", + "fallback": "--mbx-expandablecontainer-arrow-color", + "description": "off" + }, + "--mbx-expandablecontainer-arrow-color-dark": { + "defaultInternal": "--mbx-expandablecontainer-text-color-dark", + "fallback": "--mbx-expandablecontainer-arrow-color", + "description": "off" + }, + "--mbx-expandablecontainer-arrow-color-hover": { + "description": "Fallback value for `--mbx-expandablecontainer-arrow-color-hover-light` and `--mbx-expandablecontainer-arrow-color-hover-dark`" + }, + "--mbx-expandablecontainer-arrow-color-hover-light": { + "defaultInternal": "--mbx-expandablecontainer-arrow-color-lrrowight", + "fallback": "--mbx-expandablecontainer-arrow-color-hover", + "description": "off, on `hover`" + }, + "--mbx-expandablecontainer-arrow-color-hover-dark": { + "defaultInternal": "--mbx-expandablecontainer-a-color-dark", + "fallback": "--mbx-expandablecontainer-arrow-color-hover", + "description": "off, on `hover`" + } +} diff --git a/docs-gen/components/molecules/ExpandableContainer/mbx-settings.json b/docs-gen/components/molecules/ExpandableContainer/mbx-settings.json new file mode 100644 index 00000000..8bd030f1 --- /dev/null +++ b/docs-gen/components/molecules/ExpandableContainer/mbx-settings.json @@ -0,0 +1,12 @@ +{ + "since": "1.0.0", + "description": "An exapandable container, to hide/show some content on demand.", + "see": [], + "examples": [], + "extend": { + "component": { "type": "molecules", "name": "Container" }, + "group": { + "ComponentWithCallback": { "type": "boolean" } + } + } +} diff --git a/docs-gen/components/molecules/ExpandableContainer/props.json b/docs-gen/components/molecules/ExpandableContainer/props.json new file mode 100644 index 00000000..d6cd0a3f --- /dev/null +++ b/docs-gen/components/molecules/ExpandableContainer/props.json @@ -0,0 +1,28 @@ +{ + "children": { + "type": "any", + "description": "content to render inside Container - extended from [Container component](../../molecules/Container/props.md#children)", + "comment": "content to render inside Container - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Container Container}" + }, + "wrapper": { + "type": "'div' | 'header' | 'footer'", + "description": "component wrapper type - extended from [Container component](../../molecules/Container/props.md#wrapper)", + "default": "div", + "comment": "component wrapper type - extended from {@link https://cianciarusocataldo.github.io/mobrix-ui/components/molecules/Container Container}" + }, + "expanded": { + "type": "boolean", + "description": "Extra content showed only when container is expanded (`compact` === `true`)", + "default": false + }, + "compact": { + "description": "if true, shows the whole container content", + "type": "boolean", + "default": false + }, + "onChange": { + "type": "(newValue: boolean) => void", + "default": "() => {}", + "description": "Callback triggered when ExpandableContainer component input value is changed by the user" + } +} diff --git a/docs-gen/components/molecules/FormField/css-vars.json b/docs-gen/components/molecules/FormField/css-vars.json new file mode 100644 index 00000000..5c831db5 --- /dev/null +++ b/docs-gen/components/molecules/FormField/css-vars.json @@ -0,0 +1,80 @@ +{ + "--mbx-formfield-background": { + "description": "Fallback value for `--mbx-formfield-background-light` and `--mbx-formfield-background-dark`" + }, + "--mbx-formfield-background-dark": { + "description": "FormField background when dark mode is `off`", + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-formfield-background" + }, + "--mbx-formfield-background-light": { + "description": "FormField background when dark mode is `on`", + "defaultGlobal": "--mbx-background-light", + "fallback": "--mbx-formfield-background" + }, + "--mbx-formfield-text-color": { + "description": "Fallback value for `--mbx-formfield-text-color-light` and `--mbx-formfield-text-color-dark`" + }, + "--mbx-formfield-text-color-light": { + "description": "FormField text color when dark mode is `off`", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-formfield-text-color" + }, + "--mbx-formfield-text-color-dark": { + "description": "FormField text color when dark mode is `on`", + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-formfield-text-color" + }, + "--mbx-formfield-background-hover": { + "description": "Fallback value for `--mbx-formfield-background-hover-light` and `--mbx-formfield-background-hover-dark`" + }, + "--mbx-formfield-background-hover-light": { + "description": "FormField background when dark mode is `off`, on `hover`", + "defaultGlobal": "--mbx-background-hover-light", + "fallback": "--mbx-formfield-background-hover" + }, + "--mbx-formfield-background-hover-dark": { + "description": "FormField background when dark mode is `on`, on `hover`", + "defaultGlobal": "--mbx-background-hover-light", + "fallback": "--mbx-formfield-background-hover" + }, + "--mbx-formfield-text-color-hover": { + "description": "Fallback value for `--mbx-formfield-text-color-hover-light` and `--mbx-formfield-text-color-hover-dark`" + }, + "--mbx-formfield-text-color-hover-light": { + "description": "FormField text color when dark mode is `off`, on `hover`", + "defaultGlobal": "--mbx-text-color-hover-light", + "fallback": "--mbx-formfield-text-color-hover" + }, + "--mbx-formfield-text-color-hover-dark": { + "description": "FormField text color when dark mode is `on`, on `hover`", + "defaultGlobal": "--mbx-text-color-hover-dark", + "fallback": "--mbx-formfield-text-color-hover" + }, + "--mbx-formfield-error-border": { + "description": "Fallback value for `--mbx-formfield-error-border-light` and `--mbx-formfield-error-border-dark`" + }, + "--mbx-formfield-error-border-light": { + "description": "FormField error box border color when dark mode is `off`", + "defaultColor": "red", + "fallback": "--mbx-formfield-error-border" + }, + "--mbx-formfield-error-border-dark": { + "description": "FormField error box border color when dark mode is `on`", + "defaultColor": "red", + "fallback": "--mbx-formfield-error-border" + }, + "--mbx-formfield-error-text": { + "description": "Fallback value for `--mbx-formfield-error-text-light` and `--mbx-formfield-error-text-dark`" + }, + "--mbx-formfield-error-text-light": { + "description": "FormField error box text color when dark mode is `off`", + "defaultColor": "red", + "fallback": "--mbx-formfield-error-text" + }, + "--mbx-formfield-error-text-dark": { + "description": "FormField error box text color when dark mode is `on`", + "defaultColor": "red", + "fallback": "--mbx-formfield-error-text" + } +} diff --git a/docs-gen/components/molecules/FormField/mbx-settings.json b/docs-gen/components/molecules/FormField/mbx-settings.json new file mode 100644 index 00000000..84d45522 --- /dev/null +++ b/docs-gen/components/molecules/FormField/mbx-settings.json @@ -0,0 +1,6 @@ +{ + "since": "3.0.0", + "description": "A single form field. Depending on its `type`, a different input component is used inside", + "see": [], + "examples": [] +} diff --git a/docs-gen/components/molecules/FormField/props.json b/docs-gen/components/molecules/FormField/props.json new file mode 100644 index 00000000..44fc6753 --- /dev/null +++ b/docs-gen/components/molecules/FormField/props.json @@ -0,0 +1,36 @@ +{ + "value": { "description": "FormField input content" }, + "type": { + "default": "'text'", + "description": "The field type. It determines the UI component to be used to render it. Allowed types are:\n- `boolean` (rendered as a CheckBox)\n- `numeric` (rendered as a Counter)\n- `text` (rendered as a Input)\n- `radio` (rendered as a RadioButton)\n- `checkbox` (rendered as a CheckBox)\n- `toggle` (rendered as a Toggle)\n- `rater` (rendered as a Rater)\n- `slider` (rendered as a Slider)\n- `input` (rendered as a Input)\n- `counter` (rendered as a Counter)", + "typeOld": "`boolean` | `text` | `numeric` | `radio` | `checkbox` | `toggle` | `rater` | `slider` | `input` | `counter`", + "type": "'boolean' | 'text' | 'numeric' | 'radio' | 'checkbox' | 'toggle' | 'rater' | 'slider' | 'input' | 'counter'" + }, + "placeholder": { "type": "string", "description": "" }, + "required": { + "type": "boolean", + "default": false, + "description": "If true, the field switch to error state if its value is empty" + }, + "validate": { + "default": "() => ˚{}", + "type": "(fieldValue: any) => boolean", + "description": "Custom validation function called on submit" + }, + "header": { + "description": "Form field header", + "type": "`JSX.Element` | `string`" + }, + "headerClassName": { + "description": "Custom classname applied on every header element", + "type": "string" + }, + "headerProps": { + "description": "Custom props applied on every header element (including MoBrix-ui shared props)", + "type": "Record" + }, + "errorLabel": { + "description": "Custom error box content, displayed when FormField is in error state", + "type": "`JSX.Element` | `string`" + } +} diff --git a/docs-gen/components/molecules/List/css-vars.json b/docs-gen/components/molecules/List/css-vars.json new file mode 100644 index 00000000..9d30078e --- /dev/null +++ b/docs-gen/components/molecules/List/css-vars.json @@ -0,0 +1,28 @@ +{ + "--mbx-list-text-color": { + "description": "Fallback value for `--mbx-list-text-color-light` and `--mbx-list-text-color-dark`" + }, + "--mbx-list-text-color-light": { + "description": "List element text color when dark is `off`", + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-list-text-color" + }, + "--mbx-list-text-color-dark": { + "description": "List element text color when dark is `on`", + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-list-text-color" + }, + "--mbx-list-text-color-hover": { + "description": "Fallback value for `--mbx-list-text-color-hover-light` and `--mbx-list-text-color-hover-dark`" + }, + "--mbx-list-text-color-hover-light": { + "description": "List element text color when dark is `off`, on `hover`", + "defaultGlobal": "--mbx-text-color-hover-light", + "fallback": "--mbx-list-text-color-hover" + }, + "--mbx-list-text-color-hover-dark": { + "description": "List element text color when dark is `on`, on `hover`", + "defaultGlobal": "--mbx-text-color-hover-dark", + "fallback": "--mbx-list-text-color-hover" + } +} diff --git a/docs-gen/components/molecules/List/mbx-settings.json b/docs-gen/components/molecules/List/mbx-settings.json new file mode 100644 index 00000000..b849fa18 --- /dev/null +++ b/docs-gen/components/molecules/List/mbx-settings.json @@ -0,0 +1,13 @@ +{ + "since": "1.0.0", + "description": "A custom bullet list, that support any type of elements", + "see": [], + "examples": [], + "extend": { + "group": { + "ClickableComponent": { + "overrideDescription": "Callback triggered when a list element is clicked" + } + } + } +} diff --git a/docs-gen/components/molecules/List/props.json b/docs-gen/components/molecules/List/props.json new file mode 100644 index 00000000..4ee4ee42 --- /dev/null +++ b/docs-gen/components/molecules/List/props.json @@ -0,0 +1,11 @@ +{ + "elements": { + "description": "List elements", + "type": "(`JSX.Element` | `string`)[]" + }, + "onClick": { + "type": "() => void", + "default": "() => {}", + "description": "Callback triggered when a list element is clicked" + } +} diff --git a/docs-gen/components/molecules/Modal/css-vars.json b/docs-gen/components/molecules/Modal/css-vars.json new file mode 100644 index 00000000..201aba80 --- /dev/null +++ b/docs-gen/components/molecules/Modal/css-vars.json @@ -0,0 +1,51 @@ +{ + "--mbx-modal-background": { + "description": "Fallback value for `--mbx-modal-background-light` and `--mbx-modal-background-dark`" + }, + "--mbx-modal-background-light": { + "defaultColor": "rgba(0, 0, 0, 0.8)", + "description": "Modal background when [dark](../../global/props.md#dark) mode is `off`", + "fallback": "--mbx-modal-background" + }, + "--mbx-modal-background-dark": { + "defaultColor": "rgba(0, 0, 0, 0.8)", + "fallback": "--mbx-modal-background", + "description": "Modal background when [dark](../../global/props.md#dark) mode is `on`" + }, + "--mbx-modal-x-color": { + "description": "Fallback value for `--mbx-modal-x-color-light` and `--mbx-modal-x-color-dark`" + }, + "--mbx-modal-x-color-light": { + "default": "white", + "fallback": "--mbx-modal-x-color", + "description": "Modal x icon color when [dark](../../global/props.md#dark) mode is `off`" + }, + "--mbx-modal-x-color-dark": { + "default": "white", + "fallback": "--mbx-modal-x-color", + "description": "Modal x icon color when [dark](../../global/props.md#dark) mode is `on`" + }, + "--mbx-modal-x-color-hover": { + "description": "Fallback value for `--mbx-modal-x-color-hover-light` and `--mbx-modal-x-color-hover-dark`" + }, + "--mbx-modal-x-color-hover-light": { + "defaultExternal": { + "prop": "--mbx-dismissablecard-x-color-hover-light", + "type": "molecules", + "component": "DismissableCard" + }, + "fallback": "--mbx-modal-x-color-hover", + "description": "Modal x icon color when [dark](../../global/props.md#dark) mode is `off`, on `hover`", + "mode": "hover" + }, + "--mbx-modal-x-color-hover-dark": { + "defaultExternal": { + "prop": "--mbx-dismissablecard-x-color-hover-dark", + "type": "molecules", + "component": "DismissableCard" + }, + "fallback": "--mbx-modal-x-color-hover", + "description": "Modal x icon color when [dark](../../global/props.md#dark) mode is `on`, on `hover`", + "mode": "hover" + } +} diff --git a/docs-gen/components/molecules/Modal/mbx-settings.json b/docs-gen/components/molecules/Modal/mbx-settings.json new file mode 100644 index 00000000..6223be3a --- /dev/null +++ b/docs-gen/components/molecules/Modal/mbx-settings.json @@ -0,0 +1,14 @@ +{ + "since": "1.0.0", + "description": "A Modal component, with an optional close button", + "see": [], + "examples": [], + "extend": { + "group": { + "ClosableComponent": {}, + "ComponentWithChildren": { + "type": "`JSX.Element` | `string`" + } + } + } +} diff --git a/docs-gen/components/molecules/Modal/props.json b/docs-gen/components/molecules/Modal/props.json new file mode 100644 index 00000000..0a69f83e --- /dev/null +++ b/docs-gen/components/molecules/Modal/props.json @@ -0,0 +1,12 @@ +{ + "onClose": { + "type": "() => void", + "default": "() => {}", + "description": "callback triggered when Modal is closed" + }, + "children": { + "type": "`JSX.Element` | `string`", + "default": "", + "description": "Modal content" + } +} diff --git a/docs-gen/components/molecules/Popup/css-vars.json b/docs-gen/components/molecules/Popup/css-vars.json new file mode 100644 index 00000000..c342ede8 --- /dev/null +++ b/docs-gen/components/molecules/Popup/css-vars.json @@ -0,0 +1,26 @@ +{ + "--mbx-popup-background": { + "description": "Fallback value for `--mbx-popup-background-light` and `--mbx-popup-background-dark`" + }, + "--mbx-popup-background-light": { + "defaultGlobal": "--mbx-background-light", + "description": "Popup background when [dark](../../global/props.md#dark) mode is `off`", + "fallback": "--mbx-popup-background" + }, + "--mbx-popup-background-dark": { + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-popup-background", + "description": "Popup background when [dark](../../global/props.md#dark) mode is `on`" + }, + "--mbx-popup-text-color": { "description": "Fallback value for `` and ``" }, + "--mbx-popup-text-color-light": { + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-popup-text-color", + "description": "Popup text color when [dark](../../global/props.md#dark) mode is `off`" + }, + "--mbx-popup-text-color-dark": { + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-popup-text-color", + "description": "Popup text color when [dark](../../global/props.md#dark) mode is `on`" + } +} diff --git a/docs-gen/components/molecules/Popup/mbx-settings.json b/docs-gen/components/molecules/Popup/mbx-settings.json new file mode 100644 index 00000000..fd67e76d --- /dev/null +++ b/docs-gen/components/molecules/Popup/mbx-settings.json @@ -0,0 +1,14 @@ +{ + "since": "2.0.0", + "description": "A Popup container, displayed upon every other component, overlayed", + "see": [], + "examples": [], + "extend": { + "group": { + "ClosableComponent": {}, + "ComponentWithChildren": { + "type": "`JSX.Element` | `string`" + } + } + } +} diff --git a/docs-gen/components/molecules/Popup/props.json b/docs-gen/components/molecules/Popup/props.json new file mode 100644 index 00000000..fb069c85 --- /dev/null +++ b/docs-gen/components/molecules/Popup/props.json @@ -0,0 +1,12 @@ +{ + "onClose": { + "type": "() => void", + "default": "() => {}", + "description": "callback triggered when Popup is closed" + }, + "children": { + "type": "`JSX.Element` | `string`", + "default": "", + "description": "Popup content" + } +} diff --git a/docs-gen/components/molecules/RadioButtonGroup/css-vars.json b/docs-gen/components/molecules/RadioButtonGroup/css-vars.json new file mode 100644 index 00000000..64291835 --- /dev/null +++ b/docs-gen/components/molecules/RadioButtonGroup/css-vars.json @@ -0,0 +1,91 @@ +{ + "--mbx-radiogroup-background": { + "description": "Fallback value for `--mbx-radiogroup-background-light` and `--mbx-radiogroup-background-dark`" + }, + "--mbx-radiogroup-background-light": { + "defaultGlobal": "--mbx-background-light", + "description": "RadioGroup background when [dark](../../global/props.md#dark) mode is `off`", + "fallback": "--mbx-radiogroup-background" + }, + "--mbx-radiogroup-background-dark": { + "defaultGlobal": "--mbx-background-dark", + "fallback": "--mbx-radiogroup-background", + "description": "RadioGroup background when [dark](../../global/props.md#dark) mode is `on`" + }, + "--mbx-radiogroup-text-color": { + "description": "Fallback value for `--mbx-radiogroup-text-color-light` and `--mbx-radiogroup-text-color-dark`" + }, + "--mbx-radiogroup-text-color-light": { + "defaultGlobal": "--mbx-text-color-light", + "fallback": "--mbx-radiogroup-text-color", + "description": "RadioGroup text color when [dark](../../global/props.md#dark) mode is `off`" + }, + "--mbx-radiogroup-text-color-dark": { + "defaultGlobal": "--mbx-text-color-dark", + "fallback": "--mbx-radiogroup-text-color", + "description": "RadioGroup text color when [dark](../../global/props.md#dark) mode is `on`" + }, + "--mbx-radiogroup-radio-background": { + "description": "Fallback value for `mbx-radiogroup-radio-background-light` and `mbx-radiogroup-radio-background-dark`" + }, + "--mbx-radiogroup-radio-background-light": { + "description": "Internal RadioButton background when [dark](../../global/props.md#dark) mode is off", + "defaultExternal": { + "prop": "--mbx-radio-background-light", + "type": "atoms", + "component": "RadioButton" + }, + "fallback": "--mbx-radiogroup-radio-background" + }, + "--mbx-radiogroup-radio-background-dark": { + "description": "Internal RadioButton background when [dark](../../global/props.md#dark) mode is on", + "defaultExternal": { + "prop": "--mbx-radio-background-dark", + "type": "atoms", + "component": "RadioButton" + }, + "fallback": "--mbx-radiogroup-radio-background" + }, + "--mbx-radiogroup-radio-background-hover": { + "description": "Fallback value for `mbx-radiogroup-radio-background-hover-light` and `mbx-radiogroup-radio-background-hover-dark`" + }, + "--mbx-radiogroup-radio-background-hover-light": { + "description": "Internal RadioButton background when [dark](../../global/props.md#dark) mode is off, on hover", + "defaultExternal": { + "prop": "--mbx-radio-background-hover-light", + "type": "atoms", + "component": "RadioButton" + }, + "fallback": "--mbx-radiogroup-radio-background-hover" + }, + "--mbx-radiogroup-radio-background-hover-dark": { + "description": "Internal RadioButton background when [dark](../../global/props.md#dark) mode is on, on hover", + "defaultExternal": { + "prop": "--mbx-radio-background-hover-dark", + "type": "atoms", + "component": "RadioButton" + }, + "fallback": "--mbx-radiogroup-radio-background-hover" + }, + "--mbx-radiogroup-radio-icon-background": { + "description": "Fallback value for `mbx-radiogroup-radio-icon-background-light` and `mbx-radiogroup-radio-icon-background-dark`" + }, + "--mbx-radiogroup-radio-icon-background-light": { + "description": "Internal RadioButton icon background when [dark](../../global/props.md#dark) mode is off", + "defaultExternal": { + "prop": "--mbx-radio-icon-background-light", + "type": "atoms", + "component": "RadioButton" + }, + "fallback": "--mbx-radiogroup-radio-icon-background" + }, + "--mbx-radiogroup-radio-icon-background-dark": { + "description": "Internal RadioButton icon background when [dark](../../global/props.md#dark) mode is on", + "defaultExternal": { + "prop": "--mbx-radio-icon-background-dark", + "type": "atoms", + "component": "RadioButton" + }, + "fallback": "--mbx-radiogroup-radio-icon-background" + } +} diff --git a/docs-gen/components/molecules/RadioButtonGroup/mbx-settings.json b/docs-gen/components/molecules/RadioButtonGroup/mbx-settings.json new file mode 100644 index 00000000..da74fedb --- /dev/null +++ b/docs-gen/components/molecules/RadioButtonGroup/mbx-settings.json @@ -0,0 +1,14 @@ +{ + "since": "2.0.0", + "description": "A flexible and fully customizable radio buttons group", + "see": [], + "examples": [], + "extend": { + "group": { + "ComponentWithCallback": { + "type": "number", + "overrideDescription": "Callback triggered when a RadioButton is clicked by the user, giving its index as parameter" + } + } + } +} diff --git a/docs-gen/components/molecules/RadioButtonGroup/props.json b/docs-gen/components/molecules/RadioButtonGroup/props.json new file mode 100644 index 00000000..a1b7750e --- /dev/null +++ b/docs-gen/components/molecules/RadioButtonGroup/props.json @@ -0,0 +1,35 @@ +{ + "value": { + "description": "Selected RadioButton (as index)", + "type": "number" + }, + "buttons": { + "description": "Radio elements array. Every element UI can be driven with attributes. A radio element can contain 3 fields: