@via-profit/ui-kit 0.1.0-rc.1

package/dist/color/Color.js

@@ -0,0 +1,346 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Color_color;
+Object.defineProperty(exports, "__esModule", { value: true });
+class Color {
+    constructor(value) {
+        _Color_color.set(this, void 0);
+        __classPrivateFieldSet(this, _Color_color, this.parseColor(value), "f");
+        return this;
+    }
+    lighten(decimal) {
+        return this.shade(decimal);
+    }
+    darken(decimal) {
+        return this.shade(-decimal);
+    }
+    alpha(decimal) {
+        __classPrivateFieldGet(this, _Color_color, "f").a = decimal;
+        return this;
+    }
+    /**
+     * Get color luminance value
+     */
+    luminance() {
+        const RED = 0.2126;
+        const GREEN = 0.7152;
+        const BLUE = 0.0722;
+        const GAMMA = 2.4;
+        const a = [__classPrivateFieldGet(this, _Color_color, "f").r, __classPrivateFieldGet(this, _Color_color, "f").g, __classPrivateFieldGet(this, _Color_color, "f").b].map(v => {
+            v /= 255;
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
+        });
+        return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
+    }
+    contrast(rgb2) {
+        const color2 = rgb2 instanceof Color ? rgb2 : new Color(rgb2);
+        const lum1 = this.luminance();
+        const lum2 = color2.luminance();
+        const brightest = Math.max(lum1, lum2);
+        const darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
+    /**
+     * Lighten or darknest color to lum steps
+     * lum - 0-25
+     */
+    shade(lum) {
+        __classPrivateFieldGet(this, _Color_color, "f").r = parseInt('0' + Math.min(255, Math.max(0, __classPrivateFieldGet(this, _Color_color, "f").r + lum)), 10);
+        __classPrivateFieldGet(this, _Color_color, "f").g = parseInt('0' + Math.min(255, Math.max(0, __classPrivateFieldGet(this, _Color_color, "f").g + lum)), 10);
+        __classPrivateFieldGet(this, _Color_color, "f").b = parseInt('0' + Math.min(255, Math.max(0, __classPrivateFieldGet(this, _Color_color, "f").b + lum)), 10);
+        return this;
+    }
+    rgb() {
+        return __classPrivateFieldGet(this, _Color_color, "f");
+    }
+    toString() {
+        return this.rgbString();
+    }
+    rgbString() {
+        return `rgba(${__classPrivateFieldGet(this, _Color_color, "f").r}, ${__classPrivateFieldGet(this, _Color_color, "f").g}, ${__classPrivateFieldGet(this, _Color_color, "f").b}, ${__classPrivateFieldGet(this, _Color_color, "f").a})`;
+    }
+    hexString() {
+        const colorToHex = (color) => {
+            const hexadecimal = color.toString(16);
+            return hexadecimal.length === 1 ? `0${hexadecimal}` : hexadecimal;
+        };
+        return '#' + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").r) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").g) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").b);
+    }
+    parseColor(value) {
+        const inputColor = value.trim().toLowerCase();
+        const hsl = inputColor.indexOf('hsl') === 0;
+        const hex3 = inputColor.replace(/[^#0-9a-f]/g, '').match(/^#([0-9a-f]{3})$/i);
+        const hex6 = inputColor.replace(/[^#0-9a-f]/g, '').match(/^#([0-9a-f]{6})$/i);
+        const rgb = inputColor
+            .replace(/[^rgb(),.0-9]/g, '')
+            .match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+        const rgba = inputColor
+            .replace(/[^rgba(),.0-9]/g, '')
+            .match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+.*\d*)\s*\)$/i) ||
+            inputColor
+                .replace(/[^rgba(),.0-9]/g, '')
+                .match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+        if (hex3 && hex3.length > 1) {
+            // in three-character format, each value is multiplied by 0x11 to give an
+            // even scale from 0x00 to 0xff
+            return {
+                r: parseInt(hex3[1].charAt(0), 16) * 0x11,
+                g: parseInt(hex3[1].charAt(1), 16) * 0x11,
+                b: parseInt(hex3[1].charAt(2), 16) * 0x11,
+                a: 1,
+            };
+        }
+        if (hex6 && hex6.length >= 1) {
+            return {
+                r: parseInt(hex6[1].substring(0, 2), 16),
+                g: parseInt(hex6[1].substring(2, 4), 16),
+                b: parseInt(hex6[1].substring(4, 6), 16),
+                a: 1,
+            };
+        }
+        if (rgb && rgb.length >= 3) {
+            return {
+                r: parseInt(rgb[1], 10),
+                g: parseInt(rgb[2], 10),
+                b: parseInt(rgb[3], 10),
+                a: 1,
+            };
+        }
+        if (rgba && rgba.length >= 3) {
+            return {
+                r: parseInt(rgba[1], 10),
+                g: parseInt(rgba[2], 10),
+                b: parseInt(rgba[3], 10),
+                a: rgba[4] === undefined ? 1 : Number(rgba[4]),
+            };
+        }
+        if (hsl) {
+            return this.hslToRgb(inputColor);
+        }
+        const webHex = this.getHextByWebColor(inputColor);
+        if (webHex) {
+            return this.parseColor(webHex);
+        }
+        throw new Error('Failed to parse color');
+    }
+    hslToRgb(value) {
+        const hsl = value.match(/(\d+(\.\d+)?)/g);
+        if (!hsl || hsl.length < 3) {
+            throw new Error('is not a valid hsl color');
+        }
+        const h = Number(hsl[0]) / 360;
+        const s = Number(hsl[1]) / 100;
+        const l = Number(hsl[2]) / 100;
+        const a = hsl[3] === undefined ? 1 : Number(hsl[3]);
+        let t1;
+        let t2;
+        let t3;
+        let rgb;
+        let val;
+        if (s === 0) {
+            val = Math.round(l * 255);
+            rgb = [val, val, val, a];
+        }
+        else {
+            if (l < 0.5) {
+                t2 = l * (1 + s);
+            }
+            else {
+                t2 = l + s - l * s;
+            }
+            t1 = 2 * l - t2;
+            rgb = [0, 0, 0];
+            for (let i = 0; i < 3; i++) {
+                t3 = h + (1 / 3) * -(i - 1);
+                t3 < 0 && t3++;
+                t3 > 1 && t3--;
+                if (6 * t3 < 1) {
+                    val = t1 + (t2 - t1) * 6 * t3;
+                }
+                else if (2 * t3 < 1) {
+                    val = t2;
+                }
+                else if (3 * t3 < 2) {
+                    val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+                }
+                else {
+                    val = t1;
+                }
+                rgb[i] = Math.round(val * 255);
+            }
+        }
+        rgb.push(a);
+        return {
+            r: Number(rgb[0]),
+            g: Number(rgb[1]),
+            b: Number(rgb[2]),
+            a: typeof rgb[3] === 'undefined' ? 1 : Number(rgb[3]),
+        };
+    }
+    getHextByWebColor(value) {
+        const webColors = {
+            aliceblue: '#F0F8FF',
+            antiquewhite: '#FAEBD7',
+            aqua: '#00FFFF',
+            aquamarine: '#7FFFD4',
+            azure: '#F0FFFF',
+            beige: '#F5F5DC',
+            bisque: '#FFE4C4',
+            black: '#000000',
+            blanchedalmond: '#FFEBCD',
+            blue: '#0000FF',
+            blueviolet: '#8A2BE2',
+            brown: '#A52A2A',
+            burlywood: '#DEB887',
+            cadetblue: '#5F9EA0',
+            chartreuse: '#7FFF00',
+            chocolate: '#D2691E',
+            coral: '#FF7F50',
+            cornflowerblue: '#6495ED',
+            cornsilk: '#FFF8DC',
+            crimson: '#DC143C',
+            cyan: '#00FFFF',
+            darkblue: '#00008B',
+            darkcyan: '#008B8B',
+            darkgoldenrod: '#B8860B',
+            darkgray: '#A9A9A9',
+            darkgrey: '#A9A9A9',
+            darkgreen: '#006400',
+            darkkhaki: '#BDB76B',
+            darkmagenta: '#8B008B',
+            darkolivegreen: '#556B2F',
+            darkorange: '#FF8C00',
+            darkorchid: '#9932CC',
+            darkred: '#8B0000',
+            darksalmon: '#E9967A',
+            darkseagreen: '#8FBC8F',
+            darkslateblue: '#483D8B',
+            darkslategray: '#2F4F4F',
+            darkslategrey: '#2F4F4F',
+            darkturquoise: '#00CED1',
+            darkviolet: '#9400D3',
+            deeppink: '#FF1493',
+            deepskyblue: '#00BFFF',
+            dimgray: '#696969',
+            dimgrey: '#696969',
+            dodgerblue: '#1E90FF',
+            firebrick: '#B22222',
+            floralwhite: '#FFFAF0',
+            forestgreen: '#228B22',
+            fuchsia: '#FF00FF',
+            gainsboro: '#DCDCDC',
+            ghostwhite: '#F8F8FF',
+            gold: '#FFD700',
+            goldenrod: '#DAA520',
+            gray: '#808080',
+            grey: '#808080',
+            green: '#008000',
+            greenyellow: '#ADFF2F',
+            honeydew: '#F0FFF0',
+            hotpink: '#FF69B4',
+            'indianred ': '#CD5C5C',
+            'indigo ': '#4B0082',
+            ivory: '#FFFFF0',
+            khaki: '#F0E68C',
+            lavender: '#E6E6FA',
+            lavenderblush: '#FFF0F5',
+            lawngreen: '#7CFC00',
+            lemonchiffon: '#FFFACD',
+            lightblue: '#ADD8E6',
+            lightcoral: '#F08080',
+            lightcyan: '#E0FFFF',
+            lightgoldenrodyellow: '#FAFAD2',
+            lightgray: '#D3D3D3',
+            lightgrey: '#D3D3D3',
+            lightgreen: '#90EE90',
+            lightpink: '#FFB6C1',
+            lightsalmon: '#FFA07A',
+            lightseagreen: '#20B2AA',
+            lightskyblue: '#87CEFA',
+            lightslategray: '#778899',
+            lightslategrey: '#778899',
+            lightsteelblue: '#B0C4DE',
+            lightyellow: '#FFFFE0',
+            lime: '#00FF00',
+            limegreen: '#32CD32',
+            linen: '#FAF0E6',
+            magenta: '#FF00FF',
+            maroon: '#800000',
+            mediumaquamarine: '#66CDAA',
+            mediumblue: '#0000CD',
+            mediumorchid: '#BA55D3',
+            mediumpurple: '#9370DB',
+            mediumseagreen: '#3CB371',
+            mediumslateblue: '#7B68EE',
+            mediumspringgreen: '#00FA9A',
+            mediumturquoise: '#48D1CC',
+            mediumvioletred: '#C71585',
+            midnightblue: '#191970',
+            mintcream: '#F5FFFA',
+            mistyrose: '#FFE4E1',
+            moccasin: '#FFE4B5',
+            navajowhite: '#FFDEAD',
+            navy: '#000080',
+            oldlace: '#FDF5E6',
+            olive: '#808000',
+            olivedrab: '#6B8E23',
+            orange: '#FFA500',
+            orangered: '#FF4500',
+            orchid: '#DA70D6',
+            palegoldenrod: '#EEE8AA',
+            palegreen: '#98FB98',
+            paleturquoise: '#AFEEEE',
+            palevioletred: '#DB7093',
+            papayawhip: '#FFEFD5',
+            peachpuff: '#FFDAB9',
+            peru: '#CD853F',
+            pink: '#FFC0CB',
+            plum: '#DDA0DD',
+            powderblue: '#B0E0E6',
+            purple: '#800080',
+            rebeccapurple: '#663399',
+            red: '#FF0000',
+            rosybrown: '#BC8F8F',
+            royalblue: '#4169E1',
+            saddlebrown: '#8B4513',
+            salmon: '#FA8072',
+            sandybrown: '#F4A460',
+            seagreen: '#2E8B57',
+            seashell: '#FFF5EE',
+            sienna: '#A0522D',
+            silver: '#C0C0C0',
+            skyblue: '#87CEEB',
+            slateblue: '#6A5ACD',
+            slategray: '#708090',
+            slategrey: '#708090',
+            snow: '#FFFAFA',
+            springgreen: '#00FF7F',
+            steelblue: '#4682B4',
+            tan: '#D2B48C',
+            teal: '#008080',
+            thistle: '#D8BFD8',
+            tomato: '#FF6347',
+            turquoise: '#40E0D0',
+            violet: '#EE82EE',
+            wheat: '#F5DEB3',
+            white: '#FFFFFF',
+            whitesmoke: '#F5F5F5',
+            yellow: '#FFFF00',
+            yellowgreen: '#9ACD32',
+        };
+        const v = value.trim().toLowerCase();
+        return webColors[v];
+    }
+}
+_Color_color = new WeakMap();
+exports.default = Color;

package/dist/color/index.d.ts

@@ -0,0 +1,3 @@
+import Color from './Color';
+export * from './Color';
+export default Color;

package/dist/color/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Color_1 = __importDefault(require("./Color"));
+__exportStar(require("./Color"), exports);
+exports.default = Color_1.default;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Button from './Button';
+import { UITheme } from './ThemeProvider/createTheme';
+export * from './Button';
+export { Button, UITheme };

package/dist/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const Button_1 = __importDefault(require("./Button"));
+exports.Button = Button_1.default;
+__exportStar(require("./Button"), exports);

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@via-profit/ui-kit",
+  "version": "0.1.0-rc.1",
+  "description": "UI Kit",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:via-profit/ui-kit.git"
+  },
+  "engines": {
+    "node": ">=16.x"
+  },
+  "author": "Via Profit",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint --fix .",
+    "publush": "npm publish"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
+    "react-popper": "^2.3.0",
+    "react-window": "^1.8.8"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.22.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.22.4",
+    "@babel/plugin-transform-typescript": "^7.22.3",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "@babel/runtime": "^7.22.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@loadable/babel-plugin": "^5.15.3",
+    "@loadable/webpack-plugin": "^5.15.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@types/node": "^20.2.5",
+    "@types/nodemon": "^1.19.2",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-modal": "^3.16.0",
+    "@types/react-relay": "^14.1.4",
+    "@types/react-slick": "^0.23.10",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/react-window": "^1.8.5",
+    "@types/webpack-bundle-analyzer": "^4.6.0",
+    "@types/webpack-env": "^1.18.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
+    "babel-loader": "^9.1.2",
+    "concurrently": "^8.0.1",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.1.1",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-node": "^0.3.7",
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-plugin-file-progress": "^1.3.0",
+    "eslint-plugin-formatjs": "^4.10.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-relay": "^1.8.3",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.1",
+    "nodemon": "^2.0.22",
+    "nodemon-webpack-plugin": "^4.8.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.8",
+    "raw-loader": "^4.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
+    "react-popper": "^2.3.0",
+    "react-refresh": "^0.14.0",
+    "react-router-dom": "^6.11.2",
+    "react-test-renderer": "^18.2.0",
+    "react-window": "^1.8.9",
+    "shebang-loader": "^0.0.1",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-node": "^10.9.1",
+    "type-fest": "^3.11.1",
+    "typescript": "^5.0.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.84.1",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
+  },
+  "dependencies": {
+    "markdown-to-jsx": "^7.2.0",
+    "react-syntax-highlighter": "^15.5.0"
+  }
+}