@spaziodati/atoka-design-system 2.0.72-beta

package/package.json

@@ -0,0 +1,157 @@
+{
+    "name": "@spaziodati/atoka-design-system",
+    "version": "2.0.72-beta",
+    "description": "",
+    "scripts": {
+        "storybook": "start-storybook -p 6006 -s public --quiet",
+        "deploy-storybook": "npm run imprint-version && build-storybook -s public -c .storybook -o .out --quiet && s3-deploy '.out/**' --cwd '.out/' --region eu-west-1 --bucket design-system.atoka.io",
+        "imprint-version": "node ./scripts/imprint_version.js",
+        "ts-compile": "tsc",
+        "build": "rm -rf dist; npm run ts-declaration && npm run ts-bundle && cp -rf ./styles ./dist/styles && cp ./package.json ./dist/package.json",
+        "yalc-push": "cd ./dist && npx yalc push && cd ..",
+        "ts-declaration": "tsc --emitDeclarationOnly -p tsconfig-prod.json",
+        "ts-compile-prod": "tsc -p tsconfig-prod.json",
+        "ts-lint": "eslint './src' --ext ts --ext tsx --ext js --ext jsx --max-warnings 0",
+        "ts-bundle": "WEBPACK_PACKAGE=webpack-5 npx webpack --config webpack.conf.js",
+        "less-lint": "./scripts/less_lint.sh",
+        "prettier-write": "prettier --write .",
+        "prettier": "prettier --check .",
+        "prettier-check-and-fix": "/bin/bash scripts/prettier-check-and-fix.sh",
+        "test": "jest -c jest.config.js",
+        "test-visual": "jest -c jestVisual.config.js -w 3",
+        "release": "/bin/bash scripts/do-release.sh",
+        "less-deploy": "s3-deploy 'dist/atoka-design-system*.css' --cwd 'dist/' --filePrefix 'dist/ds' --region eu-west-1 --bucket design-system.atoka.io",
+        "deploy": "npm run less-deploy",
+        "sync-ds-to-atoka": "npm run build && npm run yalc-push && rm -rf ../atoka-revenge/node_modules/.cache/webpack; mkdir -p ../atoka-revenge/ts/build/ ; cp dist/atoka-design-system*.css ../atoka-revenge/ts/build/atoka-design-system.min.css"
+    },
+    "pre-commit": [
+        "less-lint",
+        "ts-lint",
+        "prettier-check-and-fix"
+    ],
+    "keywords": [],
+    "author": "Pandas",
+    "license": "ISC",
+    "peerDependencies": {
+        "@fortawesome/fontawesome-pro": "^5.13.0",
+        "@fortawesome/fontawesome-svg-core": "^1.2.30",
+        "@fortawesome/free-brands-svg-icons": "^5.14.0",
+        "@fortawesome/pro-light-svg-icons": "^5.14.0",
+        "@fortawesome/pro-regular-svg-icons": "^5.14.0",
+        "@fortawesome/react-fontawesome": "^0.1.11",
+        "@nivo/axes": "0.72.0",
+        "@nivo/bar": "0.72.0",
+        "@nivo/circle-packing": "0.72.0",
+        "@nivo/core": "0.72.0",
+        "@nivo/funnel": "0.72.0",
+        "@nivo/pie": "0.72.0",
+        "@nivo/sunburst": "0.72.0",
+        "react": "^16.14.0",
+        "react-bootstrap": "^1.5.2",
+        "react-datepicker": "4.6.0",
+        "react-dom": "^16.14.0",
+        "react-select": "4.3.0",
+        "leaflet": "1.7.1",
+        "leaflet-image": "0.4.0"
+    },
+    "devDependencies": {
+        "@babel/core": "7.10.4",
+        "@babel/plugin-transform-runtime": "7.14.5",
+        "@babel/plugin-transform-typescript": "7.16.1",
+        "@babel/preset-env": "7.14.4",
+        "@babel/runtime": "7.14.6",
+        "@fortawesome/fontawesome-pro": "5.13.0",
+        "@fortawesome/fontawesome-svg-core": "1.2.30",
+        "@fortawesome/free-brands-svg-icons": "5.14.0",
+        "@fortawesome/pro-light-svg-icons": "5.14.0",
+        "@fortawesome/pro-regular-svg-icons": "5.14.0",
+        "@fortawesome/pro-solid-svg-icons": "5.14.0",
+        "@fortawesome/react-fontawesome": "0.1.11",
+        "@mdx-js/loader": "1.6.6",
+        "@nivo/axes": "0.72.0",
+        "@nivo/bar": "0.72.0",
+        "@nivo/circle-packing": "0.72.0",
+        "@nivo/core": "0.72.0",
+        "@nivo/funnel": "0.72.0",
+        "@nivo/pie": "0.72.0",
+        "@nivo/sunburst": "0.72.0",
+        "@react-leaflet/core": "1.0.2",
+        "@storybook/addon-actions": "6.3.6",
+        "@storybook/addon-controls": "6.3.7",
+        "@storybook/addon-docs": "6.3.6",
+        "@storybook/addon-links": "6.3.6",
+        "@storybook/addons": "6.3.6",
+        "@storybook/react": "6.3.6",
+        "@types/classnames": "2.2.10",
+        "@types/d3-color": "2.0.1",
+        "@types/d3-scale": "^3.2.2",
+        "@types/d3-scale-chromatic": "2.0.0",
+        "@types/d3-shape": "3.0.2",
+        "@types/d3-time": "2.0.0",
+        "@types/enzyme": "3.10.8",
+        "@types/jest": "26.0.4",
+        "@types/jest-image-snapshot": "4.3.0",
+        "@types/leaflet": "1.7.0",
+        "@types/puppeteer": "3.0.1",
+        "@types/react": "16.9.42",
+        "@types/react-datepicker": "4.3.4",
+        "@types/react-dom": "16.9.9",
+        "@types/react-motion": "0.0.29",
+        "@types/react-select": "4.0.17",
+        "@types/storybook__addon-info": "5.2.4",
+        "@typescript-eslint/eslint-plugin": "3.6.0",
+        "@typescript-eslint/eslint-plugin-tslint": "4.10.0",
+        "@typescript-eslint/parser": "3.6.0",
+        "autobind-decorator": "2.4.0",
+        "awesome-typescript-loader": "5.2.1",
+        "babel-loader": "8.1.0",
+        "bootstrap-less-port": "2.3.1",
+        "classnames": "2.2.6",
+        "css-loader": "3.6.0",
+        "css-minimizer-webpack-plugin": "3.3.1",
+        "csso-cli": "3.0.0",
+        "enzyme": "3.11.0",
+        "enzyme-adapter-react-16": "1.15.2",
+        "enzyme-to-json": "3.5.0",
+        "eslint": "7.4.0",
+        "eslint-config-prettier": "8.3.0",
+        "eslint-plugin-import": "2.22.1",
+        "eslint-plugin-jsdoc": "30.7.8",
+        "eslint-plugin-prefer-arrow": "1.2.2",
+        "eslint-plugin-react": "7.20.3",
+        "eslint-plugin-react-hooks": "4.2.0",
+        "file-loader": "6.2.0",
+        "jest": "26.1.0",
+        "jest-circus": "26.6.3",
+        "jest-image-snapshot": "4.5.0",
+        "jest-puppeteer": "4.4.0",
+        "leaflet": "1.7.1",
+        "leaflet-image": "0.4.0",
+        "less": "4.1.1",
+        "less-loader": "6.2.0",
+        "mini-css-extract-plugin": "2.4.5",
+        "pre-commit": "1.2.2",
+        "prettier": "2.6.0",
+        "puppeteer": "3.3.0",
+        "react": "16.14.0",
+        "react-bootstrap": "1.5.2",
+        "react-datepicker": "4.6.0",
+        "react-dom": "16.14.0",
+        "react-leaflet-v3": "npm:react-leaflet@3.1.0",
+        "react-select": "4.3.0",
+        "s3-deploy": "1.4.0",
+        "start-server-and-test": "1.11.2",
+        "story-description-loader": "1.0.0",
+        "style-loader": "1.2.1",
+        "ts-dedent": "2.2.0",
+        "ts-jest": "26.1.1",
+        "typescript": "3.9.6",
+        "webpack": "4.46.0",
+        "webpack-5": "npm:webpack@5.65.0",
+        "webpack-bundle-analyzer": "4.5.0",
+        "webpack-cli": "4.6.0"
+    },
+    "optionalDependencies": {
+        "fsevents": "^2.3.2"
+    }
+}

package/styles/animations-mixin.less

@@ -0,0 +1,28 @@
+@import (reference) 'variables';
+
+.fade-in-mixin(@name; @duration; @delay) {
+    .@{name}-enter,
+    .@{name}-appear {
+        opacity: 0.01;
+    }
+    .@{name}-enter-active,
+    .@{name}-appear-active {
+        opacity: 1;
+
+        transition-property: opacity;
+        transition-duration: @duration;
+    }
+    .@{name}-appear-active {
+        transition-delay: @delay;
+    }
+
+    .@{name}-exit {
+        opacity: 1;
+    }
+    .@{name}-exit-active {
+        opacity: 0.01;
+
+        transition-property: opacity;
+        transition-duration: @duration;
+    }
+}

package/styles/atoka-bootstrap-fixed-mixins.less

@@ -0,0 +1,81 @@
+#make-grid-columns(@columns: @grid-columns, @gutter: @grid-gutter-width, @breakpoints: @grid-breakpoints) {
+    // Common properties for all breakpoints
+    // LESS PORT: Unfortunately we have to use an actual selector here in order to be able to
+    // `:extend()` it later. This means that the selector is output in the compiled CSS, creating a
+    // small disparity between the Less and Sass versions.
+    // \%grid-columns {
+    //     position: relative;
+    //     width: 100%;
+    //     padding-right: (@gutter / 2);
+    //     padding-left: (@gutter / 2);
+    // }
+
+    // ATOKA FIX: :extend(\%grid-column); does not get prefixed, copied its content into them
+
+    each(map-keys(@breakpoints), #(@breakpoint) {
+		@infix: breakpoint-infix(@breakpoint, @breakpoints);
+
+		// Allow columns to stretch full width below their breakpoints
+		each(range(@columns), #(@i) {
+			.col@{infix}-@{i} {
+				//&:extend(\%grid-column);
+				position: relative;
+				width: 100%;
+				padding-right: (@gutter / 2);
+				padding-left: (@gutter / 2);
+			}
+		});
+
+		.col@{infix},
+		.col@{infix}-auto {
+			//&:extend(\%grid-column);
+			position: relative;
+			width: 100%;
+			padding-right: (@gutter / 2);
+			padding-left: (@gutter / 2);
+		}
+
+		#media-breakpoint-up(@breakpoint, {
+			// Provide basic `.col-{bp}` classes for equal-width flexbox columns
+			.col@{infix} {
+				flex-basis: 0;
+				flex-grow: 1;
+				max-width: 100%;
+			}
+
+			each(range(@grid-row-columns), #(@i) {
+				.row-cols@{infix}-@{i} {
+					#row-cols(@i);
+				}
+			});
+
+			.col@{infix}-auto {
+				#make-col-auto();
+			}
+
+			each(range(@columns), #(@i) {
+				.col@{infix}-@{i} {
+					#make-col(@i, @columns);
+				}
+			});
+
+			.order@{infix}-first { order: -1; }
+
+			.order@{infix}-last { order: (@columns + 1); }
+
+			each(range(0, @columns), #(@i) {
+				.order@{infix}-@{i} { order: @i; }
+			});
+
+			// `@columns - 1` because offsetting by the width of an entire row isn￾t possible
+			each(range(0, (@columns - 1)), #(@i) {
+				& when not (@i = 0),
+				(@i = 0) and not (@infix = ~"") {
+					.offset@{infix}-@{i} {
+						#make-col-offset(@i, @columns);
+					}
+				}
+			});
+		});
+	});
+}

package/styles/atoka-bootstrap-variables.less

@@ -0,0 +1,70 @@
+@import (reference) 'variables';
+
+/////////////////////////////////////////////////////////////////////////////////////////////////////
+// DO NOT IMPORT THIS FILE IN ATOKA-DS .LESS FILES!
+// If you need some variables in the atoka-ds .less files, just copy them in the styles/variales.less
+// For example @border-radius
+// If you change a variable in variables.less or here, keep in mind to update both the files
+/////////////////////////////////////////////////////////////////////////////////////////////////////
+
+// _variables.less
+@border-radius: 2 * @atoka-border-radius;
+@border-radius-sm: @atoka-border-radius;
+@border-radius-lg: 2 * @spacing-unit;
+@modal-content-border-radius: 5px;
+
+@font-family-sans-serif: @font-family, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+@black: #222222;
+@primary: @blue300;
+@secondary: @gray300;
+@warning: @orange;
+// as atoka-variables @red
+@red: #f72200;
+
+@link-color: @primary;
+
+@body-bg: @gray100;
+@body-color: @black;
+
+@enable-shadows: false;
+@enable-gradients: false;
+
+// _reboot.less
+@font-weight-base: @font-weight;
+
+// _grid_framework.less
+@grid-columns: 24;
+@grid-gutter-width: 4 * @spacing-unit;
+@spacer: 2 * @spacing-unit;
+
+// _dropdown.less
+@dropdown-item-padding-x: @spacing-unit * 2;
+
+// _card.less
+@card-border-width: 1px;
+@card-border-color: @gray200;
+
+// _list-group.less
+@list-group-border-color: @gray200;
+
+// font awesome
+@fontawesome-font-family: 'Font Awesome 5 Pro';
+@fontawesome-font-brands: 'Font Awesome 5 Brands';
+
+// Typography
+@h1-font-size: 44px;
+@h2-font-size: 34px;
+@h3-font-size: 24px;
+@h4-font-size: 20px;
+@h5-font-size: 16px;
+@h6-font-size: 14px;
+@headings-line-height: 1.5;
+
+// Jumbotron
+@jumbotron-padding: 10 * @spacing-unit;
+@jumbotron-color: @black;
+@jumbotron-bg: @white;
+
+// h1, h2, ...
+@headings-color: @black;

package/styles/atoka-bs.less

@@ -0,0 +1,99 @@
+@path: 'bootstrap-less-port/less/'; // Include paths will make this reachable from /node_modules/
+
+// List of files to include in /node_modules/bootstrap-less-port/less/bootstrap.less
+
+@import '@{path}_functions';
+@import '@{path}_variables';
+@import '@{path}_mixins';
+
+@import (reference) 'atoka-bootstrap-variables.less';
+@import (reference) 'atoka-bootstrap-fixed-mixins.less';
+
+@import '@{path}_root';
+@import '@{path}_reboot';
+@import '@{path}_type';
+@import '@{path}_images';
+//@import "@{path}_code";
+@import '@{path}_grid';
+@import '@{path}_tables';
+@import '@{path}_forms';
+// @import '@{path}_buttons';
+@import '@{path}_transitions';
+@import '@{path}_dropdown';
+@import '@{path}_button-group';
+@import '@{path}_input-group';
+@import '@{path}_custom-forms';
+@import '@{path}_nav';
+@import '@{path}_navbar';
+@import '@{path}_card';
+//@import "@{path}_breadcrumb";
+@import '@{path}_pagination';
+@import '@{path}_badge';
+@import '@{path}_jumbotron';
+@import '@{path}_alert';
+@import '@{path}_progress';
+@import '@{path}_media';
+@import '@{path}_list-group';
+@import '@{path}_close';
+//@import "@{path}_toasts";
+@import '@{path}_modal';
+@import '@{path}_tooltip';
+@import '@{path}_popover';
+@import '@{path}_carousel';
+//@import "@{path}_spinners";
+@import '@{path}_utilities';
+//@import "@{path}_print";
+
+.svg-inline--fa {
+    vertical-align: -0.125em;
+}
+
+.rounded-md {
+    border-radius: @border-radius;
+}
+
+span.first-letter-capitalize {
+    display: inline-block; // the first-letter does not work on inline elements
+}
+.first-letter-capitalize {
+    &::first-letter {
+        text-transform: uppercase !important;
+    }
+}
+
+.cursor-default {
+    cursor: default;
+}
+// remove me when we upgrade to bootstrap 5
+.text-decoration-underlined {
+    text-decoration: underline !important;
+}
+
+.color-gray-400 {
+    color: @gray400;
+}
+
+// I added the class here because atoka could not find it when it was imported in StatisticsTooltip
+.statistics-tooltip {
+    max-width: 200px;
+    font-size: @font-size-sm;
+
+    &.tooltip-background {
+        background: white;
+        border-radius: 2px;
+        box-shadow: rgba(0, 0, 0, 0.25) 0 1px 2px;
+        padding: 5px 9px;
+    }
+
+    .tooltip-rectangle {
+        min-width: 12px; // we need this in case the title is very long
+        width: 12px;
+        height: 12px;
+        margin-right: @spacing-unit;
+    }
+
+    .label {
+        font-weight: 600;
+        margin-right: (@spacing-unit / 2);
+    }
+}

package/styles/atoka-namespaced-bs.less

@@ -0,0 +1,28 @@
+@import (reference) 'variables.less';
+@import 'atoka-bs.less';
+
+& {
+    // From normalize.less
+
+    // Previously inside "html {"
+    // font-family: sans-serif; // Overridden below
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+
+    // Previously inside "body {"
+    margin: 0;
+
+    // From scaffolding.less
+
+    // Previously inside "html {"
+    // font-size: 10px; // Overridden below
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    // Previously inside "body {"
+    font-family: @font-family, sans-serif, Arial;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    font-weight: @font-weight;
+    color: @black;
+    background-color: @body-bg;
+}

package/styles/variables.less

@@ -0,0 +1,106 @@
+@atoka-border-radius: 2px;
+
+@font-family: 'Public Sans';
+@font-weight: 300;
+
+@spacing-unit: 8px;
+
+@navbar-height: 80px;
+
+@navigation-brand-width: 50px;
+@navigation-menu-width: 200px;
+
+// COLORS
+// keep those in sync with Style.ts
+@bluestartup: #229cf3;
+@bluepa: #134dfb;
+@blue300: #1f5871;
+@blue300-hover: rgba(@blue300, 0.08);
+@blue200: #185d7d;
+@blue150: #185e7d;
+@blue100: #578ea8;
+@blue75: #8fb7cb;
+@blue50: #afd1e0;
+@blue30: #cbd8e0;
+@blue25: #eef2f5;
+
+@orange: #f38522;
+
+@yellow: #ffbb00;
+
+@pinkbaby: #ff99cc;
+
+@red: #f72200;
+
+@green: #309b0a;
+
+@black: #222222;
+@gray500: #474747;
+@gray400: #717171;
+@gray-border: @gray275;
+@gray350: #999999;
+@gray300: #b0b0b0;
+@gray275: #d7d7d7;
+@gray250: #d2d2d2;
+@gray200: #ebebeb;
+@gray150: #f6f6f6;
+@gray100: #fafafa;
+@white: white;
+
+// MEDIA QUERIES
+
+@screen-xs: 576px;
+@screen-xs-min: @screen-xs;
+@screen-phone: @screen-xs-min;
+
+@screen-sm: 768px;
+@screen-sm-min: @screen-sm;
+@screen-tablet: @screen-sm-min;
+
+@screen-md: 992px;
+@screen-md-min: @screen-md;
+@screen-desktop: @screen-md-min;
+
+@screen-lg: 1200px;
+@screen-lg-min: @screen-lg;
+@screen-lg-desktop: @screen-lg-min;
+
+@top-bar-height: 50px;
+@nav-bar-v3-height: 10 * @spacing-unit;
+
+@box-shadow: 1px 1px @spacing-unit 0 rgba(0, 0, 0, 0.16);
+@box-shadow-select-options: 0px 3px 4px rgb(90 90 90 / 15%);
+
+@grid-row-columns: 24;
+
+@font-size-xxs: 10px;
+@font-size-xs: 11px;
+@font-size-sm: 12px;
+@font-size-normal: 14px;
+@font-size-lg: 16px;
+@font-size-xl: 20px;
+@font-size-xxl: 24px;
+
+// BORDERS
+@border-input: 1px solid @gray-border;
+
+// BORDER RADIUS
+@border-radius: 2 * @atoka-border-radius;
+@border-radius-sm: @atoka-border-radius;
+@border-radius-lg: 2 * @spacing-unit;
+
+// HEIGHTS
+@button-height-sm: 32px;
+@button-height-md: 40px;
+@button-height-lg: 48px;
+
+// PADDING CALCULATED SIZES
+@xxs-sm-button-spaces: 3px 6px;
+@xs-sm-button-spaces: 3px 8px;
+@md-button-spaces: 8px 16px;
+@lg-button-spaces: 12px 24px;
+
+// PLACEHOLDERS
+@placeholder-color: @gray-border;
+
+@input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

package/styles/variant-mixins.less

@@ -0,0 +1,96 @@
+@import (reference) 'variables';
+
+.variant-primary(@color) {
+    background-color: @color;
+    border-color: @color;
+    color: @white;
+
+    &:disabled {
+        background-color: fade(@color, 48%);
+        border-color: transparent;
+    }
+
+    &:hover:not(:disabled) {
+        background-color: darken(@color, 12%);
+        border-color: darken(@color, 12%);
+    }
+}
+
+.variant-secondary(@color) {
+    // This is necessary to override some style present in atoka revenge.
+    &,
+    &:not(.disabled):active {
+        background: transparent;
+        border-color: @color;
+        color: @color;
+    }
+
+    &:disabled {
+        border-color: fade(@color, 48%);
+        color: fade(@color, 48%);
+    }
+
+    &:hover:not(:disabled) {
+        border-color: darken(@color, 12%);
+        color: darken(@color, 12%);
+        // Changing the border width messes up paddings and heights/line-heights
+        box-shadow: 0 0 0 1px @color;
+    }
+}
+
+.variant-primary-white {
+    background-color: @white;
+    border-color: @white;
+    color: @blue300;
+
+    &:disabled {
+        background-color: fade(@white, 48%);
+        border-color: transparent;
+    }
+
+    &:hover:not(:disabled) {
+        background-color: darken(@white, 12%);
+        border-color: darken(@white, 12%);
+    }
+}
+
+.secondary-variant(@color) {
+    border: 1px solid @color;
+    color: @color;
+    background-color: mix(@color, transparent, 8%);
+}
+
+.primary-badge(@color) {
+    border: 1px solid @color;
+    color: @white;
+    background-color: @color;
+}
+
+.tertiary-badge(@color) {
+    background-color: transparent;
+    color: @color;
+}
+
+.control-button {
+    color: @black;
+    background-color: @white;
+    box-shadow: 1px 1px (@spacing-unit / 2) 0 rgba(0, 0, 0, 0.16);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: @spacing-unit * 3;
+    height: @spacing-unit * 3;
+    line-height: @spacing-unit * 3;
+    font-weight: 100;
+    border-radius: 0;
+    border: none;
+
+    &:hover,
+    &:focus,
+    &.selected {
+        outline: none;
+        text-decoration: none;
+        background-color: @gray200;
+        border-color: @gray200;
+    }
+}