@astral/ui 0.1.0 → 0.2.3

package/node/src/theme/components/components.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponents = void 0;
+var MuiInputBase_1 = require("./MuiInputBase");
+var MuiFormHelperText_1 = require("./MuiFormHelperText");
+var MuiFormLabel_1 = require("./MuiFormLabel");
+var MuiInputLabel_1 = require("./MuiInputLabel");
+var MuiOutlinedInput_1 = require("./MuiOutlinedInput");
+var MuiTypography_1 = require("./MuiTypography");
+var getMuiCssBaseline = function (fontUrls) { return ({
+    styleOverrides: "\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 300;\n      font-display: swap;\n      src: url(".concat(fontUrls.light.woff2, ") format('woff2'), url(").concat(fontUrls.light.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 400;\n      font-display: swap;\n      src: url(").concat(fontUrls.regular.woff2, ") format('woff2'), url(").concat(fontUrls.regular.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 500;\n      font-display: swap;\n      src: url(").concat(fontUrls.medium.woff2, ") format('woff2'), url(").concat(fontUrls.medium.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 700;\n      font-display: swap;\n      src: url(").concat(fontUrls.bold.woff2, ") format('woff2'), url(").concat(fontUrls.bold.woff, ") format('woff');\n    }\n  "),
+}); };
+var MuiCheckbox = {
+    defaultProps: {
+        disableRipple: true,
+    },
+};
+var MuiMenu = {
+    defaultProps: {
+        autoFocus: false,
+    },
+    styleOverrides: {
+        paper: function (_a) {
+            var theme = _a.theme;
+            return {
+                marginTop: theme.spacing(2),
+                '&.MuiPaper-root': {
+                    borderRadius: theme.shape.small,
+                    boxShadow: theme.elevation[200],
+                },
+            };
+        },
+        list: function (_a) {
+            var theme = _a.theme;
+            return {
+                padding: theme.spacing(1, 0),
+            };
+        },
+    },
+};
+var MuiMenuItem = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                '&:hover': {
+                    backgroundColor: theme.palette.background.elementHover,
+                },
+            };
+        },
+    },
+};
+var getComponents = function (fontUrls) { return ({
+    MuiCssBaseline: getMuiCssBaseline(fontUrls),
+    MuiTypography: MuiTypography_1.MuiTypography,
+    MuiInputBase: MuiInputBase_1.MuiInputBase,
+    MuiInputLabel: MuiInputLabel_1.MuiInputLabel,
+    MuiOutlinedInput: MuiOutlinedInput_1.MuiOutlinedInput,
+    MuiFormLabel: MuiFormLabel_1.MuiFormLabel,
+    MuiFormHelperText: MuiFormHelperText_1.MuiFormHelperText,
+    MuiCheckbox: MuiCheckbox,
+    MuiMenu: MuiMenu,
+    MuiMenuItem: MuiMenuItem,
+}); };
+exports.getComponents = getComponents;

package/node/src/theme/components/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/node/src/theme/components/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/node/src/theme/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum Brand {
+    DEFAULT = "DEFAULT",
+    EDO = "EDO",
+    AO5 = "AO5",
+    OFD = "OFD",
+    SIGN = "SIGN",
+    LKP = "LKP"
+}
+export declare const SPACING = 4;

package/node/src/theme/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SPACING = exports.Brand = void 0;
+var Brand;
+(function (Brand) {
+    Brand["DEFAULT"] = "DEFAULT";
+    Brand["EDO"] = "EDO";
+    Brand["AO5"] = "AO5";
+    Brand["OFD"] = "OFD";
+    Brand["SIGN"] = "SIGN";
+    Brand["LKP"] = "LKP";
+})(Brand = exports.Brand || (exports.Brand = {}));
+exports.SPACING = 4;

package/node/src/theme/elevation.d.ts

@@ -0,0 +1,8 @@
+export declare type Elevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+};
+export declare const elevation: Elevation;

package/node/src/theme/elevation.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.elevation = void 0;
+exports.elevation = {
+    100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;',
+    200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733;',
+    300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726;',
+    400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726;',
+    500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726;',
+};

package/node/src/theme/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useTheme';

package/node/src/theme/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useTheme"), exports);

package/node/src/theme/hooks/useTheme/index.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../baseTheme';
+export declare const useTheme: () => Theme;

package/node/src/theme/hooks/useTheme/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = void 0;
+var react_1 = require("@emotion/react");
+var useTheme = function () { return (0, react_1.useTheme)(); };
+exports.useTheme = useTheme;

package/node/src/theme/index.d.ts

@@ -0,0 +1,6 @@
+export * from './baseTheme';
+export * from './palette';
+export * from './constants';
+export * from './elevation';
+export * from './shape';
+export * from './hooks';

package/node/src/theme/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./baseTheme"), exports);
+__exportStar(require("./palette"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./elevation"), exports);
+__exportStar(require("./shape"), exports);
+__exportStar(require("./hooks"), exports);

package/node/src/theme/palette/brandPalette.d.ts

@@ -0,0 +1,15 @@
+import { Brand } from '../constants';
+declare type BrandColors = {
+    secondary: string;
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+};
+export declare const brandPalette: Record<Brand, BrandColors>;
+export {};

package/node/src/theme/palette/brandPalette.js

@@ -0,0 +1,85 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.brandPalette = void 0;
+var constants_1 = require("../constants");
+var defaultBrandPalette = {
+    secondary: '#55B8F0',
+    900: '#0F52B8',
+    800: '#2165CC',
+    700: '#1874FF',
+    600: '#2684FF',
+    500: '#4C9AFF',
+    400: '#70AEFF',
+    300: '#94C2FF',
+    200: '#C5DCFF',
+    100: '#E1EDFF',
+};
+var edoPalette = {
+    secondary: '#5653FF',
+    900: '#5D3FD4',
+    800: '#6746EB',
+    700: '#8566FF',
+    600: '#9D85FF',
+    500: '#9D85FF',
+    400: '#B29EFF',
+    300: '#C2B2FF',
+    200: '#E0D9FF',
+    100: '#EFEBFF',
+};
+var ao5Palette = {
+    secondary: '#14A5D3',
+    900: '#0068B2',
+    800: '#0074C6',
+    700: '#0989E3',
+    600: '#2195E6',
+    500: '#3AA1E9',
+    400: '#52ACEB',
+    300: '#84C4F1',
+    200: '#C1E2F8',
+    100: '#DFF0FB',
+};
+var ofdPalette = {
+    secondary: '#22BDEE',
+    900: '#1F78D6',
+    800: '#2285EE',
+    700: '#46A0FF',
+    600: '#58A9FF',
+    500: '#6BB3FF',
+    400: '#7DBCFF',
+    300: '#A2CFFF',
+    200: '#D1E7FF',
+    100: '#E7F3FF',
+};
+var signPalette = {
+    secondary: '#4099AC',
+    900: '#325D89',
+    800: '#376798',
+    700: '#4D86BF',
+    600: '#5E92C5',
+    500: '#719ECC',
+    400: '#82AAD2',
+    300: '#A6C2DF',
+    200: '#D3E1EF',
+    100: '#E8EFF7',
+};
+var lkpPalette = {
+    secondary: '#00BDB2',
+    900: '#009E71',
+    800: '#00B07E',
+    700: '#2CC89B',
+    600: '#41CDA5',
+    500: '#56D3AF',
+    400: '#6BD8B9',
+    300: '#95E3CD',
+    200: '#CAF1E6',
+    100: '#E3F8F2',
+};
+exports.brandPalette = (_a = {},
+    _a[constants_1.Brand.DEFAULT] = defaultBrandPalette,
+    _a[constants_1.Brand.AO5] = ao5Palette,
+    _a[constants_1.Brand.EDO] = edoPalette,
+    _a[constants_1.Brand.OFD] = ofdPalette,
+    _a[constants_1.Brand.SIGN] = signPalette,
+    _a[constants_1.Brand.LKP] = lkpPalette,
+    _a);

package/node/src/theme/palette/index.d.ts

@@ -0,0 +1,2 @@
+export * from './brandPalette';
+export * from './palette';

package/node/src/theme/palette/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./brandPalette"), exports);
+__exportStar(require("./palette"), exports);

package/node/src/theme/palette/palette.d.ts

@@ -0,0 +1,29 @@
+import { PaletteOptions as MuiPaletteOptions, PaletteColorOptions } from '@mui/material';
+import { TypeBackground } from '@mui/material/styles/createPalette';
+import { Brand } from '../constants';
+export declare type Color = {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+};
+export declare type PrimaryColorOptions = PaletteColorOptions & Color;
+export declare type Background = TypeBackground & {
+    element: string;
+    elementHover: string;
+};
+declare type PaletteOptions = MuiPaletteOptions & {
+    red: Color;
+    green: Color;
+    yellow: Color;
+    grey: Color;
+    primary: PrimaryColorOptions;
+    background: Background;
+};
+export declare const getPalette: (brand?: Brand) => PaletteOptions;
+export {};

package/node/src/theme/palette/palette.js

@@ -0,0 +1,108 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPalette = void 0;
+var constants_1 = require("../constants");
+var brandPalette_1 = require("./brandPalette");
+var getPalette = function (brand) {
+    if (brand === void 0) { brand = constants_1.Brand.DEFAULT; }
+    var brandColors = brandPalette_1.brandPalette[brand];
+    return {
+        red: {
+            900: '#E64343',
+            800: '#F24646',
+            700: '#F35959',
+            600: '#F67E7E',
+            500: '#F79090',
+            400: '#F8A3A3',
+            300: '#FAB5B5',
+            200: '#FCDADA',
+            100: '#FEEDED',
+        },
+        green: {
+            900: '#008055',
+            800: '#00875A',
+            700: '#19936A',
+            600: '#4DAB8C',
+            500: '#66B79C',
+            400: '#80C3AC',
+            300: '#99CFBD',
+            200: '#CCE7DE',
+            100: '#E6F3EF',
+        },
+        yellow: {
+            900: '#ED8000',
+            800: '#F98700',
+            700: '#FA961F',
+            600: '#FBAB4D',
+            500: '#FBB766',
+            400: '#FDCF99',
+            300: '#FDDBB2',
+            200: '#FBE6CC',
+            100: '#FEF3E6',
+        },
+        primary: __assign({ main: brandColors[800], dark: brandColors[900], contrastText: '#FFF' }, brandColors),
+        secondary: {
+            main: brandColors.secondary,
+            dark: brandColors[900],
+            contrastText: '#FFF',
+        },
+        get success() {
+            return {
+                light: this.green[100],
+                main: this.green[600],
+                dark: this.green[800],
+                contrastText: '#FFF',
+            };
+        },
+        get warning() {
+            return {
+                light: this.yellow[100],
+                main: this.yellow[600],
+                dark: this.yellow[800],
+                contrastText: '#FFF',
+            };
+        },
+        get error() {
+            return {
+                light: this.red[100],
+                main: this.red[600],
+                dark: this.red[800],
+                contrastText: '#FFF',
+            };
+        },
+        text: {
+            primary: '#072D57',
+            secondary: '#072D57',
+            disabled: '#99A9BA',
+        },
+        grey: {
+            900: '#072D57',
+            800: '#1D3F66',
+            700: '#557192',
+            600: '#778DA8',
+            500: '#99A9BA',
+            400: '#B7C2CE',
+            300: '#DDE2E8',
+            200: '#EBEEF1',
+            100: '#F0F4F7',
+        },
+        background: {
+            default: '#FFF',
+            paper: '#FFF',
+            element: '#FAFBFC',
+            elementHover: '#EBECF0',
+        },
+    };
+};
+exports.getPalette = getPalette;

package/node/src/theme/shape.d.ts

@@ -0,0 +1,6 @@
+export declare type Shape = {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const shape: Shape;

package/node/src/theme/shape.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shape = void 0;
+exports.shape = {
+    small: '3px',
+    medium: '6px',
+    large: '9px',
+};

package/node/src/theme/typography.d.ts

@@ -0,0 +1,19 @@
+import { Typography } from '@mui/material/styles/createTypography';
+import { CSSProperties } from 'react';
+declare type CustomTypographyVariantStyle = {
+    fontSize: CSSProperties['fontSize'];
+    fontWeight: CSSProperties['fontWeight'];
+};
+export declare type TypographyThemeOptions = Typography & {
+    h7: CustomTypographyVariantStyle;
+    h8: CustomTypographyVariantStyle;
+    h9: CustomTypographyVariantStyle;
+    ui: CustomTypographyVariantStyle;
+    link: CustomTypographyVariantStyle;
+    pointer: CustomTypographyVariantStyle;
+    small: CustomTypographyVariantStyle;
+    code: CustomTypographyVariantStyle;
+};
+export declare const pxToRem: (fontSize: number, htmlFontSize?: number) => string;
+export declare const typography: Partial<TypographyThemeOptions>;
+export {};

package/node/src/theme/typography.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typography = exports.pxToRem = void 0;
+var HTML_FONT_SIZE = 14;
+// Т.к. нет досутпа к теме, написал функцию для конвертации px в rem
+var pxToRem = function (fontSize, htmlFontSize) {
+    if (htmlFontSize === void 0) { htmlFontSize = HTML_FONT_SIZE; }
+    return "".concat(fontSize / htmlFontSize, "rem");
+};
+exports.pxToRem = pxToRem;
+exports.typography = {
+    fontSize: 14,
+    htmlFontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    fontFamily: ['Ubuntu', 'sans-serif'].join(','),
+    get h1() {
+        return {
+            fontSize: (0, exports.pxToRem)(35, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h2() {
+        return {
+            fontSize: (0, exports.pxToRem)(29, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h3() {
+        return {
+            fontSize: (0, exports.pxToRem)(24, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h4() {
+        return {
+            fontSize: (0, exports.pxToRem)(20, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h5() {
+        return {
+            fontSize: (0, exports.pxToRem)(16, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h6() {
+        return {
+            fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h7() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h8() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h9() {
+        return {
+            fontSize: (0, exports.pxToRem)(11, this.htmlFontSize),
+            fontWeight: this.fontWeightBold,
+        };
+    },
+    get button() {
+        return {
+            fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get ui() {
+        return {
+            fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get link() {
+        return {
+            fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get pointer() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get small() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get code() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightLight,
+        };
+    },
+    body1: {
+        fontSize: '1rem',
+    },
+};

package/package.json

@@ -1,24 +1,15 @@
 {
   "name": "@astral/ui",
-  "version": "0.1.0",
+  "version": "0.2.3",
   "type": "module",
-  "main": "./dist/esm/index.js",
   "source": "./src/index.ts",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    "require": "./dist/cjs/index.js",
-    "default": "./dist/esm/index.js"
-  },
   "jest": {
     "moduleNameMapper": {
       "^lodash-es$": "lodash"
     }
   },
-  "files": [
-    "dist"
-  ],
   "dependencies": {
+    "@astral/icons": "^0.2.3",
     "@emotion/react": "11.5.0",
     "@emotion/styled": "11.3.0",
     "@mui/base": "5.0.0-alpha.66",
@@ -38,5 +29,9 @@
   "bugs": {
     "url": "https://github.com/kaluga-astral/frontend/issues"
   },
-  "keywords": []
+  "keywords": [],
+  "sideEffects": false,
+  "main": "./node/index.js",
+  "types": "./esm/index.d.ts",
+  "module": "./esm/index.js"
 }