@astral/ui 0.1.0 → 0.1.1

package/cjs/src/styles/styled/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("./styled"), exports);

package/cjs/src/styles/styled/styled.d.ts

@@ -0,0 +1,2 @@
+import { CreateStyled } from './types';
+export declare const styled: CreateStyled;

package/cjs/src/styles/styled/styled.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styled = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+exports.styled = styled_1.default;

package/cjs/src/styles/styled/types.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { PropsOf } from '@emotion/react';
+import { CreateStyledComponent, FilteringStyledOptions, StyledOptions } from '@emotion/styled/base';
+import { Theme } from '../../theme';
+/**
+ * @desc
+ * This function accepts a React component or tag ('div', 'a' etc).
+ *
+ * @example styled(MyComponent)({ width: 100 })
+ * @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
+ * @example styled('div')({ width: 100 })
+ * @example styled('div')<Props>(props => ({ width: props.width })
+ */
+interface BaseCreateStyled {
+    <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+        theme?: Theme;
+    }, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
+        theme?: Theme;
+    }, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    <C extends React.ComponentType<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+        theme?: Theme;
+    }>;
+    <C extends React.ComponentType<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
+        theme?: Theme;
+    }>;
+    <Tag extends keyof JSX.IntrinsicElements, ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag]>(tag: Tag, options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>): CreateStyledComponent<{
+        theme?: Theme;
+        as?: React.ElementType;
+    }, Pick<JSX.IntrinsicElements[Tag], ForwardedProps>>;
+    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<JSX.IntrinsicElements[Tag]>): CreateStyledComponent<{
+        theme?: Theme;
+        as?: React.ElementType;
+    }, JSX.IntrinsicElements[Tag]>;
+}
+declare type StyledTags = {
+    [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
+        theme?: Theme;
+        as?: React.ElementType;
+    }, JSX.IntrinsicElements[Tag]>;
+};
+export interface CreateStyled extends BaseCreateStyled, StyledTags {
+}
+export {};

package/cjs/src/styles/styled/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/src/theme/__tests__/BaseTheme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/src/theme/__tests__/BaseTheme.test.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseTheme_1 = require("../baseTheme");
+var constants_1 = require("../constants");
+describe('createTheme', function () {
+    var fontsUrls = {
+        bold: {
+            woff: '',
+            woff2: '',
+        },
+        regular: {
+            woff: '',
+            woff2: '',
+        },
+        medium: {
+            woff: '',
+            woff2: '',
+        },
+        light: {
+            woff: '',
+            woff2: '',
+        },
+    };
+    it('Theme merge done correctly', function () {
+        var extendedTheme = (0, baseTheme_1.createTheme)({
+            brand: constants_1.Brand.DEFAULT,
+            fontsUrls: fontsUrls,
+            options: {
+                typography: { h1: { lineHeight: 12 } },
+            },
+        });
+        expect(extendedTheme.typography.h1.lineHeight).toBe(12);
+    });
+    it('Color should be taken depending on the brand', function () {
+        var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
+        var expected = {
+            primary: {
+                main: '#376798',
+                dark: '#325D89',
+            },
+            secondary: {
+                main: '#4099AC',
+                dark: '#325D89',
+            },
+        };
+        expect(theme.palette).toMatchObject(expected);
+    });
+    it('Spacing are calculated correctly', function () {
+        var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
+        expect(theme.spacing(2)).toBe('8px');
+    });
+    it('Theme has elevation params', function () {
+        var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
+        expect(theme.elevation[100]).toBe('box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 1px 1px 0px #072D5740;');
+    });
+});

package/cjs/src/theme/baseTheme.d.ts

@@ -0,0 +1,27 @@
+import { Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
+import { TypographyThemeOptions } from './typography';
+import { Color } from './palette';
+import { FontsUrls } from './components';
+import { Brand } from './constants';
+import { Elevation } from './elevation';
+import { Shape } from './shape';
+export declare type Palette = Omit<MuiPalette, 'grey'> & {
+    red: Color;
+    green: Color;
+    yellow: Color;
+    grey: Color;
+    primary: PaletteColor & Color;
+};
+export declare type Theme = Omit<MuiTheme, 'shadows' | 'palette' | 'shape' | 'typography'> & {
+    elevation: Elevation;
+    palette: Palette;
+    shape: Shape;
+    typography: TypographyThemeOptions;
+};
+declare type CreateThemeParams = {
+    brand: Brand;
+    options?: ThemeOptions;
+    fontsUrls: FontsUrls;
+};
+export declare const createTheme: ({ brand, options, fontsUrls, }: CreateThemeParams) => Theme;
+export {};

package/cjs/src/theme/baseTheme.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+var styles_1 = require("@mui/material/styles");
+var lodash_es_1 = require("lodash-es");
+var typography_1 = require("./typography");
+var palette_1 = require("./palette");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
+var elevation_1 = require("./elevation");
+var shape_1 = require("./shape");
+var createTheme = function (_a) {
+    var brand = _a.brand, options = _a.options, fontsUrls = _a.fontsUrls;
+    var themeOptions = {
+        typography: typography_1.typography,
+        spacing: constants_1.SPACING,
+        palette: (0, palette_1.getPalette)(brand),
+        components: (0, components_1.getComponents)(fontsUrls),
+    };
+    var muiTheme = (0, styles_1.responsiveFontSizes)((0, styles_1.createTheme)((0, lodash_es_1.merge)({}, themeOptions, options)));
+    return (0, lodash_es_1.merge)(muiTheme, { elevation: elevation_1.elevation, shape: shape_1.shape });
+};
+exports.createTheme = createTheme;

package/cjs/src/theme/components.d.ts

@@ -0,0 +1,20 @@
+import { Components } from '@mui/material';
+export declare type FontsUrls = {
+    bold: {
+        woff: string;
+        woff2: string;
+    };
+    light: {
+        woff: string;
+        woff2: string;
+    };
+    medium: {
+        woff: string;
+        woff2: string;
+    };
+    regular: {
+        woff: string;
+        woff2: string;
+    };
+};
+export declare const getComponents: (fontUrls: FontsUrls) => Components;

package/cjs/src/theme/components.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponents = void 0;
+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(" + fontUrls.light.woff2 + ") format('woff2'), url(" + 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(" + fontUrls.regular.woff2 + ") format('woff2'), url(" + 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(" + fontUrls.medium.woff2 + ") format('woff2'), url(" + 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(" + fontUrls.bold.woff2 + ") format('woff2'), url(" + fontUrls.bold.woff + ") format('woff');\n    }\n  ",
+}); };
+var getMuiTypography = function () { return ({
+    variants: [
+        {
+            props: { variant: 'button' },
+            style: {
+                textTransform: 'capitalize',
+            },
+        },
+    ],
+    defaultProps: {
+        // TODO: необходимо кастомизировать типы Components['MuiTypography']
+        variantMapping: {
+            link: 'a',
+            code: 'code',
+        },
+    },
+}); };
+var getComponents = function (fontUrls) { return ({
+    MuiCssBaseline: getMuiCssBaseline(fontUrls),
+    MuiTypography: getMuiTypography(),
+}); };
+exports.getComponents = getComponents;

package/cjs/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/cjs/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/cjs/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/cjs/src/theme/elevation.js

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

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

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

package/cjs/src/theme/index.js

@@ -0,0 +1,17 @@
+"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);

package/cjs/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/cjs/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/cjs/src/theme/palette/index.d.ts

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

package/cjs/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/cjs/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;
+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/cjs/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/cjs/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/cjs/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/cjs/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 {};