Major v3 update

.github/workflows/mobrix-ui.yml

@@ -8,52 +8,32 @@ 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'
  - run: npm i
  - 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 }}
+ - run: npm run test --verbose
+ - run: echo "Tests step completed"

.gitignore

@@ -1,6 +1,8 @@
 node_modules
 dist
 playground/src/mobrix-ui-preview
+test-app/src/mobrix-ui-preview
 build
 coverage
-stats.html
+stats.html
+.vscode

.nvmrc

@@ -1 +1 @@
-v16.14.0
+v18.17.0

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 @@
 
 <br>
 
+### 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
+
+<br>
+
 ### 2.1.0
 
 - `TabViewer` component

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 || []),
  },
 ];

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 || []),
  },
 ];

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,15 +45,15 @@ export default [
  ],
  plugins: [
  postcss({
- plugins: [],
- minimize: true,
+ plugins: [postcssImport],
+ minimize: false,
  extract: "styles.css",
  }),
  typescript({
  rollupCommonJSResolveHack: false,
  clean: true,
  }),
  ],
- external: Object.keys(pkg.peerDependencies || {}),
+ external: Object.keys(pkg.peerDependencies || []),
  },
 ];

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"
+ }
+}

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": {}
+ }
+ }
+}

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"
+ }
+}