@astral/ui 0.48.4 → 1.0.0-test.1670422830

package/hooks/useToggle/useToggle.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggle = void 0;
+const react_1 = require("react");
+/**
+ * @description хук хранящий стейт активности, и предоставляющий методы переключения c проксируемыми аргументами, позволяет уменьшить бойлерплейт код
+ */
+const useToggle = (params) => {
+    const { initialState = false, onInactive, onActive } = params || {};
+    const [isActive, setActive] = (0, react_1.useState)(initialState);
+    // выставляем флаг активности в true, и проксируем все принятые аргументы
+    const handleActive = (...args) => {
+        setActive(true);
+        onActive === null || onActive === void 0 ? void 0 : onActive(...args);
+    };
+    // выставляем флаг активности в false, и проксируем все принятые аргументы
+    const handleInactive = (...args) => {
+        setActive(false);
+        onInactive === null || onInactive === void 0 ? void 0 : onInactive(...args);
+    };
+    return [isActive, handleActive, handleInactive];
+};
+exports.useToggle = useToggle;

package/index.d.ts

@@ -1,23 +1,31 @@
 export * from './ActionCell';
+export * from './Alert';
 export * from './Autocomplete';
+export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
+export * from './Breadcrumbs';
+export * from './Collapse';
+export * from './DatePickerProvider';
+export * from './Description';
 export * from './Divider';
 export * from './ButtonBase';
 export * from './Checkbox';
 export * from './CircularProgress';
+export * from './ConfigProvider';
 export * from './DashboardLayout';
 export * from './DataGrid';
 export * from './DataGridPagination';
 export * from './DatePicker';
-export * from './DatePickerProvider';
 export * from './Dialog';
 export * from './DialogActions';
 export * from './DialogContent';
 export * from './DialogContentText';
 export * from './DialogTitle';
 export * from './DropdownButton';
+export * from './Fab';
 export * from './Fade';
+export * from './FormControl';
 export * from './FormControlLabel';
 export * from './FormHelperText';
 export * from './GlobalStyles';
@@ -40,8 +48,13 @@ export * from './MenuItem';
 export * from './MenuList';
 export * from './MenuGroup';
 export * from './OverflowTypography';
+export * from './PageAside';
+export * from './PageHeader';
+export * from './PageLayout';
+export * from './PageLayoutContainer';
 export * from './Placeholder';
 export * from './Product';
+export * from './ProductSwitcher';
 export * from './Profile';
 export * from './Radio';
 export * from './RadioGroup';
@@ -49,12 +62,16 @@ export * from './Select';
 export * from './styles';
 export * from './StylesCacheProvider';
 export * from './Table';
+export * from './Tab';
+export * from './Tabs';
 export * from './Tag';
 export * from './TextArea';
 export * from './theme';
 export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';
 export * from './Tooltip';
 export * from './SideDialog';
 export * from './SideDialogTitle';
@@ -62,8 +79,11 @@ export * from './SideDialogActions';
 export * from './SideDialogContent';
 export * from './SideDialogContentText';
 export * from './Slide';
+export * from './SwipeableDrawer';
 export * from './Zoom';
 export * from './Notification';
 export * from './LocalizationProvider';
 export * from './ContentState';
 export * from './Chevron';
+export * from './Stepper';
+export * from './Switch';

package/index.js

@@ -15,25 +15,33 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ActionCell"), exports);
+__exportStar(require("./Alert"), exports);
 __exportStar(require("./Autocomplete"), exports);
+__exportStar(require("./BackdropStack"), exports);
 __exportStar(require("./Badge"), exports);
 __exportStar(require("./Button"), exports);
+__exportStar(require("./Breadcrumbs"), exports);
+__exportStar(require("./Collapse"), exports);
+__exportStar(require("./DatePickerProvider"), exports);
+__exportStar(require("./Description"), exports);
 __exportStar(require("./Divider"), exports);
 __exportStar(require("./ButtonBase"), exports);
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CircularProgress"), exports);
+__exportStar(require("./ConfigProvider"), exports);
 __exportStar(require("./DashboardLayout"), exports);
 __exportStar(require("./DataGrid"), exports);
 __exportStar(require("./DataGridPagination"), exports);
 __exportStar(require("./DatePicker"), exports);
-__exportStar(require("./DatePickerProvider"), exports);
 __exportStar(require("./Dialog"), exports);
 __exportStar(require("./DialogActions"), exports);
 __exportStar(require("./DialogContent"), exports);
 __exportStar(require("./DialogContentText"), exports);
 __exportStar(require("./DialogTitle"), exports);
 __exportStar(require("./DropdownButton"), exports);
+__exportStar(require("./Fab"), exports);
 __exportStar(require("./Fade"), exports);
+__exportStar(require("./FormControl"), exports);
 __exportStar(require("./FormControlLabel"), exports);
 __exportStar(require("./FormHelperText"), exports);
 __exportStar(require("./GlobalStyles"), exports);
@@ -56,8 +64,13 @@ __exportStar(require("./MenuItem"), exports);
 __exportStar(require("./MenuList"), exports);
 __exportStar(require("./MenuGroup"), exports);
 __exportStar(require("./OverflowTypography"), exports);
+__exportStar(require("./PageAside"), exports);
+__exportStar(require("./PageHeader"), exports);
+__exportStar(require("./PageLayout"), exports);
+__exportStar(require("./PageLayoutContainer"), exports);
 __exportStar(require("./Placeholder"), exports);
 __exportStar(require("./Product"), exports);
+__exportStar(require("./ProductSwitcher"), exports);
 __exportStar(require("./Profile"), exports);
 __exportStar(require("./Radio"), exports);
 __exportStar(require("./RadioGroup"), exports);
@@ -65,12 +78,16 @@ __exportStar(require("./Select"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./StylesCacheProvider"), exports);
 __exportStar(require("./Table"), exports);
+__exportStar(require("./Tab"), exports);
+__exportStar(require("./Tabs"), exports);
 __exportStar(require("./Tag"), exports);
 __exportStar(require("./TextArea"), exports);
 __exportStar(require("./theme"), exports);
 __exportStar(require("./ThemeProvider"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./Typography"), exports);
+__exportStar(require("./ToggleButton"), exports);
+__exportStar(require("./ToggleButtonGroup"), exports);
 __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./SideDialog"), exports);
 __exportStar(require("./SideDialogTitle"), exports);
@@ -78,8 +95,11 @@ __exportStar(require("./SideDialogActions"), exports);
 __exportStar(require("./SideDialogContent"), exports);
 __exportStar(require("./SideDialogContentText"), exports);
 __exportStar(require("./Slide"), exports);
+__exportStar(require("./SwipeableDrawer"), exports);
 __exportStar(require("./Zoom"), exports);
 __exportStar(require("./Notification"), exports);
 __exportStar(require("./LocalizationProvider"), exports);
 __exportStar(require("./ContentState"), exports);
 __exportStar(require("./Chevron"), exports);
+__exportStar(require("./Stepper"), exports);
+__exportStar(require("./Switch"), exports);

package/package.json

@@ -1,24 +1,19 @@
 {
   "name": "@astral/ui",
-  "version": "0.48.4",
-  "browser": "./src/index.ts",
-  "jest": {
-    "moduleNameMapper": {
-      "^lodash-es$": "lodash"
-    }
-  },
+  "version": "1.0.0-test.1670422830",
+  "browser": "./esm/index.js",
+  "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^0.48.4",
+    "@astral/icons": "^1.0.0-test.1670422830",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",
     "@emotion/styled": "11.8.1",
-    "@mui/base": "5.0.0-alpha.85",
-    "@mui/lab": "5.0.0-alpha.86",
-    "@mui/material": "5.8.4",
-    "date-fns": "^2.28.0",
-    "lodash-es": "4.17.21",
-    "react-datepicker": "4.7.0",
+    "@mui/base": "^5.0.0-alpha.104",
+    "@mui/lab": "^5.0.0-alpha.106",
+    "@mui/material": "^5.10.12",
+    "dayjs": "^1.11.5",
+    "lodash-es": "^4.17.21",
     "react-imask": "^6.4.2",
     "react-toastify": "9.0.3",
     "react-use": "^17.4.0"
@@ -26,16 +21,6 @@
   "peerDependencies": {
     "react": ">=17.0.0"
   },
-  "exports": {
-    ".": {
-      "import": "./esm/index.js",
-      "require": "./index.js"
-    },
-    "./server": {
-      "import": "./esm/server/index.js",
-      "require": "./server/index.js"
-    }
-  },
   "author": "Astral.Soft",
   "license": "MIT",
   "repository": {
@@ -48,6 +33,15 @@
   "keywords": [],
   "sideEffects": false,
   "types": "./esm/index.d.ts",
-  "main": "./index.js",
-  "module": "./esm/index.js"
+  "module": "./esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./index.js"
+    },
+    "./server": {
+      "import": "./esm/server/index.js",
+      "require": "./server/index.js"
+    }
+  }
 }

package/{esm/theme → theme/baseTheme}/baseTheme.d.ts

@@ -1,8 +1,8 @@
 import { BreakpointsOptions, Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
-import { Background, Color } from './palette';
-import { FontsUrls } from './components';
-import { Brand } from './constants';
-export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
+import { Background, Color } from '../palette';
+import { FontsUrls } from '../components';
+import { Brand } from '../constants';
+export type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
     red: Color;
     green: Color;
     yellow: Color;
@@ -10,8 +10,8 @@ export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
     primary: PaletteColor & Color;
     background: Background;
 };
-export declare type Theme = MuiTheme;
-declare type CreateThemeParams = {
+export type Theme = MuiTheme;
+type CreateThemeParams = {
     brand: Brand;
     options?: ThemeOptions;
     fontsUrls: FontsUrls;

package/theme/baseTheme/baseTheme.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+const styles_1 = require("@mui/material/styles");
+const lodash_es_1 = require("lodash-es");
+const typography_1 = require("../typography");
+const palette_1 = require("../palette");
+const components_1 = require("../components");
+const constants_1 = require("../constants");
+const elevation_1 = require("../elevation");
+const shape_1 = require("../shape");
+const breakpoints_1 = require("../breakpoints");
+const createTheme = (params) => {
+    const { brand, options, fontsUrls, breakpoints = breakpoints_1.defaultBreakpoints, } = params;
+    const themeOptions = {
+        typography: typography_1.typography,
+        breakpoints,
+        spacing: constants_1.SPACING,
+        palette: (0, palette_1.getPalette)(brand),
+        components: (0, components_1.getComponents)(fontsUrls),
+    };
+    const muiTheme = (0, styles_1.createTheme)((0, lodash_es_1.merge)({}, themeOptions, options));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (0, lodash_es_1.merge)(muiTheme, { elevation: elevation_1.elevation, shape: shape_1.shape });
+};
+exports.createTheme = createTheme;

package/theme/baseTheme/baseTheme.test.d.ts

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

package/theme/{__tests__/BaseTheme.test.js → baseTheme/baseTheme.test.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var baseTheme_1 = require("../baseTheme");
-var constants_1 = require("../constants");
-describe('createTheme', function () {
-    var fontsUrls = {
+const constants_1 = require("../constants");
+const baseTheme_1 = require("./baseTheme");
+describe('createTheme', () => {
+    const fontsUrls = {
         bold: {
             woff: '',
             woff2: '',
@@ -21,19 +21,19 @@ describe('createTheme', function () {
             woff2: '',
         },
     };
-    it('Theme merge done correctly', function () {
-        var extendedTheme = (0, baseTheme_1.createTheme)({
+    it('Theme merge done correctly', () => {
+        const extendedTheme = (0, baseTheme_1.createTheme)({
             brand: constants_1.Brand.DEFAULT,
-            fontsUrls: 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 = {
+    it('Color should be taken depending on the brand', () => {
+        const theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls });
+        const expected = {
             primary: {
                 main: '#376798',
                 dark: '#325D89',
@@ -45,12 +45,12 @@ describe('createTheme', function () {
         };
         expect(theme.palette).toMatchObject(expected);
     });
-    it('Spacing are calculated correctly', function () {
-        var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
+    it('Spacing are calculated correctly', () => {
+        const theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, 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 });
+    it('Theme has elevation params', () => {
+        const theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls });
         expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;');
     });
 });

package/theme/baseTheme/index.d.ts

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

package/theme/baseTheme/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;
+    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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./baseTheme"), exports);

package/theme/components/MuiAlert.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiAlert: Components<Theme>['MuiAlert'];

package/theme/components/MuiAlert.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiAlert = void 0;
+exports.MuiAlert = {
+    styleOverrides: {
+        filledSuccess({ theme }) {
+            return {
+                backgroundColor: theme.palette.success.light,
+                color: theme.palette.text.primary,
+                svg: {
+                    color: theme.palette.green['900'],
+                },
+            };
+        },
+        filledError({ theme }) {
+            return {
+                backgroundColor: theme.palette.error.light,
+                color: theme.palette.text.primary,
+                svg: {
+                    color: theme.palette.red['900'],
+                },
+            };
+        },
+        filledWarning({ theme }) {
+            return {
+                backgroundColor: theme.palette.warning.light,
+                color: theme.palette.text.primary,
+                svg: {
+                    color: theme.palette.yellow['900'],
+                },
+            };
+        },
+        filledInfo({ theme }) {
+            return {
+                backgroundColor: theme.palette.primary['100'],
+                color: theme.palette.text.primary,
+                svg: {
+                    // TODO: для варианта info в дизайн системе нет набора цветов, временно подвязался на primary
+                    // но в других темах цвета корявые
+                    color: theme.palette.primary['900'],
+                },
+            };
+        },
+        action({ theme }) {
+            return {
+                svg: {
+                    color: `${theme.palette.text.primary} !important`,
+                },
+            };
+        },
+    },
+};

package/theme/components/MuiAutocomplete.js

@@ -1,58 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiAutocomplete = void 0;
-var constants_1 = require("../../Autocomplete/constants");
+const enums_1 = require("../../Autocomplete/enums");
 exports.MuiAutocomplete = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        inputRoot({ theme, ownerState: { size } }) {
             return {
-                padding: theme.spacing(1),
+                paddingTop: `${theme.spacing(1)} !important`,
+                paddingBottom: `${theme.spacing(1)} !important`,
+                paddingLeft: `${theme.spacing(1)} !important`,
+                minHeight: size === enums_1.AutocompleteSizes.small ? '32px' : '40px',
             };
         },
-        inputRoot: function (_a) {
-            var theme = _a.theme, size = _a.ownerState.size;
-            return {
-                paddingTop: "".concat(theme.spacing(1), " !important"),
-                paddingBottom: "".concat(theme.spacing(1), " !important"),
-                paddingLeft: "".concat(theme.spacing(1), " !important"),
-                minHeight: size === constants_1.AutocompleteSizes.small ? '32px' : '40px',
-            };
-        },
-        input: function (_a) {
-            var theme = _a.theme;
+        input({ theme }) {
             return {
                 padding: '0 !important',
-                paddingLeft: "".concat(theme.spacing(1), " !important"),
+                paddingLeft: `${theme.spacing(1)} !important`,
             };
         },
-        popupIndicator: function (_a) {
-            var theme = _a.theme;
+        popupIndicator({ theme }) {
             return {
                 borderRadius: theme.shape.small,
                 width: 20,
                 height: 20,
             };
         },
-        endAdornment: function () {
+        endAdornment() {
             return {
                 top: 'calc(50% - 11px)',
             };
         },
-        paper: function (_a) {
-            var theme = _a.theme;
+        paper({ theme }) {
             return {
                 marginTop: theme.spacing(2),
             };
         },
-        noOptions: function (_a) {
-            var theme = _a.theme;
+        noOptions({ theme }) {
             return {
                 color: theme.palette.grey['500'],
             };
         },
-        clearIndicator: function (_a) {
-            var theme = _a.theme;
+        clearIndicator({ theme }) {
             return {
                 padding: 0,
                 borderRadius: '50%',