@formatjs/editor 1.1.30

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2021 FormatJS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @formatjs/editor [WIP]
+
+We've migrated the docs to https://formatjs.io/docs/tooling/editor.

package/header.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface Props {
+}
+declare const Header: React.FC<Props>;
+export default Header;
+//# sourceMappingURL=header.d.ts.map

package/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,WAAW,KAAK;CAAG;AAEzB,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgB3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/header.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var core_1 = require("@material-ui/core");
+function handleClick(event) {
+    event.preventDefault();
+    console.info('You clicked a breadcrumb.');
+}
+var Header = function (_) {
+    return (react_1.default.createElement(core_1.Breadcrumbs, { "aria-label": "breadcrumb" },
+        react_1.default.createElement(core_1.Link, { color: "inherit", href: "/", onClick: handleClick }, "Material-UI"),
+        react_1.default.createElement(core_1.Link, { color: "inherit", href: "/getting-started/installation/", onClick: handleClick }, "Core"),
+        react_1.default.createElement(core_1.Typography, { color: "textPrimary" }, "Breadcrumb")));
+};
+exports.default = Header;

package/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function CoreApp(): JSX.Element;
+export default function App(): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/index.tsx"],"names":[],"mappings":";AAyCA,wBAAgB,OAAO,gBAoItB;AAED,MAAM,CAAC,OAAO,UAAU,GAAG,gBAmB1B"}

package/index.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoreApp = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var core_1 = require("@material-ui/core");
+var icons_1 = require("@material-ui/icons");
+var header_1 = tslib_1.__importDefault(require("./header"));
+var react_intl_1 = require("react-intl");
+var messages_1 = tslib_1.__importDefault(require("./messages"));
+var MESSAGES_COUNT = 50;
+function fetchData() {
+    return tslib_1.__awaiter(this, void 0, void 0, function () {
+        var en, ru;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fetch('/fixtures/en.json')];
+                case 1: return [4 /*yield*/, (_a.sent()).json()];
+                case 2:
+                    en = _a.sent();
+                    return [4 /*yield*/, fetch('/fixtures/ru.json')];
+                case 3: return [4 /*yield*/, (_a.sent()).json()];
+                case 4:
+                    ru = _a.sent();
+                    return [2 /*return*/, Object.keys(en)
+                            .slice(MESSAGES_COUNT)
+                            .map(function (id) { return ({
+                            id: id,
+                            defaultMessage: en[id],
+                            translatedMessage: ru[id],
+                        }); })];
+            }
+        });
+    });
+}
+function CoreApp() {
+    var intl = react_intl_1.useIntl();
+    var _a = react_1.useState([]), messages = _a[0], setMessages = _a[1];
+    var _b = react_1.useState(true), isLoading = _b[0], setIsLoading = _b[1];
+    react_1.useEffect(function () {
+        ;
+        (function () {
+            return tslib_1.__awaiter(this, void 0, void 0, function () {
+                var _a;
+                return tslib_1.__generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = setMessages;
+                            return [4 /*yield*/, fetchData()];
+                        case 1:
+                            _a.apply(void 0, [_b.sent()]);
+                            setIsLoading(false);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        })();
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.CssBaseline, null),
+        react_1.default.createElement(core_1.Box, { height: "100vh" },
+            react_1.default.createElement(core_1.AppBar, { position: "static" },
+                react_1.default.createElement(core_1.Toolbar, { variant: "dense" },
+                    react_1.default.createElement(core_1.IconButton, { edge: "start", color: "inherit", "aria-label": "menu" },
+                        react_1.default.createElement(icons_1.Menu, null)),
+                    react_1.default.createElement(core_1.Drawer, { anchor: "left" },
+                        react_1.default.createElement(core_1.List, null, ['Inbox', 'Starred', 'Send email', 'Drafts'].map(function (text) { return (react_1.default.createElement(core_1.ListItem, { button: true, key: text },
+                            react_1.default.createElement(core_1.ListItemText, { primary: text }))); }))),
+                    react_1.default.createElement(header_1.default, null),
+                    react_1.default.createElement(icons_1.AddAlert, null),
+                    react_1.default.createElement(icons_1.NotificationsOff, null))),
+            react_1.default.createElement(core_1.Grid, { container: true, spacing: 0 },
+                react_1.default.createElement(core_1.Grid, { xs: 3 },
+                    react_1.default.createElement("form", { noValidate: true, autoComplete: "off" },
+                        react_1.default.createElement(core_1.TextField, { type: "search", fullWidth: true, margin: "none", size: "small", variant: "filled", label: intl.formatMessage({
+                                id: 'search-bar-label',
+                                defaultMessage: 'Search message',
+                                description: 'label in search bar',
+                            }) })),
+                    react_1.default.createElement(core_1.Box, { borderRight: 1, overflow: "auto", height: "calc(100vh - 108px)" },
+                        react_1.default.createElement(messages_1.default, { messages: messages, isLoading: isLoading, count: MESSAGES_COUNT }))),
+                react_1.default.createElement(core_1.Grid, { xs: 6 },
+                    react_1.default.createElement(core_1.Box, { borderRight: 1, overflow: "auto", height: "calc(100vh - 48px)" },
+                        react_1.default.createElement(core_1.Box, { p: 2 },
+                            react_1.default.createElement(core_1.Typography, { variant: "h6", component: "h6" }, "English message"),
+                            react_1.default.createElement(core_1.Typography, { variant: "body2", component: "span" },
+                                "Description",
+                                ' ',
+                                react_1.default.createElement(core_1.Typography, { variant: "body2", color: "textSecondary", component: "span" }, "This is a description"))),
+                        react_1.default.createElement(core_1.TextField, { multiline: true, fullWidth: true, margin: "dense", size: "small", variant: "filled", rows: 4, label: intl.formatMessage({
+                                id: 'translated-box-label',
+                                defaultMessage: 'Translate',
+                                description: 'translated box label',
+                            }) }),
+                        react_1.default.createElement(core_1.Box, { px: 2, py: 1, display: "flex", justifyContent: "space-between", alignItems: "center" },
+                            react_1.default.createElement(core_1.Typography, { variant: "body2", component: "span" }, "71 / 101"),
+                            react_1.default.createElement(core_1.Box, null,
+                                react_1.default.createElement(core_1.ButtonGroup, { variant: "text", color: "primary", "aria-label": "text primary button group" },
+                                    react_1.default.createElement(core_1.Button, null, "Copy"),
+                                    react_1.default.createElement(core_1.Button, null, "Clear")),
+                                react_1.default.createElement(core_1.Button, { variant: "contained", color: "primary" }, "Translate"))))),
+                react_1.default.createElement(core_1.Grid, { xs: 3 },
+                    react_1.default.createElement(core_1.Tabs, { indicatorColor: "primary", textColor: "primary", centered: true, "aria-label": "disabled tabs example", value: 0, variant: "fullWidth" },
+                        react_1.default.createElement(core_1.Tab, { label: "Active" }),
+                        react_1.default.createElement(core_1.Tab, { label: "Active" })))))));
+}
+exports.CoreApp = CoreApp;
+function App() {
+    var prefersDarkMode = core_1.useMediaQuery('(prefers-color-scheme: dark)');
+    var theme = react_1.default.useMemo(function () {
+        return core_1.createMuiTheme({
+            palette: {
+                type: prefersDarkMode ? 'dark' : 'light',
+            },
+        });
+    }, [prefersDarkMode]);
+    return (react_1.default.createElement(react_intl_1.IntlProvider, { locale: "en", messages: {} },
+        react_1.default.createElement(core_1.ThemeProvider, { theme: theme },
+            react_1.default.createElement(CoreApp, null))));
+}
+exports.default = App;

package/lib/header.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface Props {
+}
+declare const Header: React.FC<Props>;
+export default Header;
+//# sourceMappingURL=header.d.ts.map

package/lib/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,WAAW,KAAK;CAAG;AAEzB,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgB3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/lib/header.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Typography, Breadcrumbs, Link } from '@material-ui/core';
+function handleClick(event) {
+    event.preventDefault();
+    console.info('You clicked a breadcrumb.');
+}
+var Header = function (_) {
+    return (React.createElement(Breadcrumbs, { "aria-label": "breadcrumb" },
+        React.createElement(Link, { color: "inherit", href: "/", onClick: handleClick }, "Material-UI"),
+        React.createElement(Link, { color: "inherit", href: "/getting-started/installation/", onClick: handleClick }, "Core"),
+        React.createElement(Typography, { color: "textPrimary" }, "Breadcrumb")));
+};
+export default Header;

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function CoreApp(): JSX.Element;
+export default function App(): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/index.tsx"],"names":[],"mappings":";AAyCA,wBAAgB,OAAO,gBAoItB;AAED,MAAM,CAAC,OAAO,UAAU,GAAG,gBAmB1B"}

package/lib/index.js

@@ -0,0 +1,116 @@
+import { __awaiter, __generator } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { useMediaQuery, createMuiTheme, ThemeProvider, CssBaseline, Grid, TextField, AppBar, Toolbar, Box, Typography, ButtonGroup, Button, Tabs, Tab, IconButton, Drawer, List, ListItem, ListItemText, } from '@material-ui/core';
+import { Menu, AddAlert, NotificationsOff } from '@material-ui/icons';
+import Header from './header';
+import { IntlProvider, useIntl } from 'react-intl';
+import Messages from './messages';
+var MESSAGES_COUNT = 50;
+function fetchData() {
+    return __awaiter(this, void 0, void 0, function () {
+        var en, ru;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fetch('/fixtures/en.json')];
+                case 1: return [4 /*yield*/, (_a.sent()).json()];
+                case 2:
+                    en = _a.sent();
+                    return [4 /*yield*/, fetch('/fixtures/ru.json')];
+                case 3: return [4 /*yield*/, (_a.sent()).json()];
+                case 4:
+                    ru = _a.sent();
+                    return [2 /*return*/, Object.keys(en)
+                            .slice(MESSAGES_COUNT)
+                            .map(function (id) { return ({
+                            id: id,
+                            defaultMessage: en[id],
+                            translatedMessage: ru[id],
+                        }); })];
+            }
+        });
+    });
+}
+export function CoreApp() {
+    var intl = useIntl();
+    var _a = useState([]), messages = _a[0], setMessages = _a[1];
+    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
+    useEffect(function () {
+        ;
+        (function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = setMessages;
+                            return [4 /*yield*/, fetchData()];
+                        case 1:
+                            _a.apply(void 0, [_b.sent()]);
+                            setIsLoading(false);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        })();
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CssBaseline, null),
+        React.createElement(Box, { height: "100vh" },
+            React.createElement(AppBar, { position: "static" },
+                React.createElement(Toolbar, { variant: "dense" },
+                    React.createElement(IconButton, { edge: "start", color: "inherit", "aria-label": "menu" },
+                        React.createElement(Menu, null)),
+                    React.createElement(Drawer, { anchor: "left" },
+                        React.createElement(List, null, ['Inbox', 'Starred', 'Send email', 'Drafts'].map(function (text) { return (React.createElement(ListItem, { button: true, key: text },
+                            React.createElement(ListItemText, { primary: text }))); }))),
+                    React.createElement(Header, null),
+                    React.createElement(AddAlert, null),
+                    React.createElement(NotificationsOff, null))),
+            React.createElement(Grid, { container: true, spacing: 0 },
+                React.createElement(Grid, { xs: 3 },
+                    React.createElement("form", { noValidate: true, autoComplete: "off" },
+                        React.createElement(TextField, { type: "search", fullWidth: true, margin: "none", size: "small", variant: "filled", label: intl.formatMessage({
+                                id: 'search-bar-label',
+                                defaultMessage: 'Search message',
+                                description: 'label in search bar',
+                            }) })),
+                    React.createElement(Box, { borderRight: 1, overflow: "auto", height: "calc(100vh - 108px)" },
+                        React.createElement(Messages, { messages: messages, isLoading: isLoading, count: MESSAGES_COUNT }))),
+                React.createElement(Grid, { xs: 6 },
+                    React.createElement(Box, { borderRight: 1, overflow: "auto", height: "calc(100vh - 48px)" },
+                        React.createElement(Box, { p: 2 },
+                            React.createElement(Typography, { variant: "h6", component: "h6" }, "English message"),
+                            React.createElement(Typography, { variant: "body2", component: "span" },
+                                "Description",
+                                ' ',
+                                React.createElement(Typography, { variant: "body2", color: "textSecondary", component: "span" }, "This is a description"))),
+                        React.createElement(TextField, { multiline: true, fullWidth: true, margin: "dense", size: "small", variant: "filled", rows: 4, label: intl.formatMessage({
+                                id: 'translated-box-label',
+                                defaultMessage: 'Translate',
+                                description: 'translated box label',
+                            }) }),
+                        React.createElement(Box, { px: 2, py: 1, display: "flex", justifyContent: "space-between", alignItems: "center" },
+                            React.createElement(Typography, { variant: "body2", component: "span" }, "71 / 101"),
+                            React.createElement(Box, null,
+                                React.createElement(ButtonGroup, { variant: "text", color: "primary", "aria-label": "text primary button group" },
+                                    React.createElement(Button, null, "Copy"),
+                                    React.createElement(Button, null, "Clear")),
+                                React.createElement(Button, { variant: "contained", color: "primary" }, "Translate"))))),
+                React.createElement(Grid, { xs: 3 },
+                    React.createElement(Tabs, { indicatorColor: "primary", textColor: "primary", centered: true, "aria-label": "disabled tabs example", value: 0, variant: "fullWidth" },
+                        React.createElement(Tab, { label: "Active" }),
+                        React.createElement(Tab, { label: "Active" })))))));
+}
+export default function App() {
+    var prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    var theme = React.useMemo(function () {
+        return createMuiTheme({
+            palette: {
+                type: prefersDarkMode ? 'dark' : 'light',
+            },
+        });
+    }, [prefersDarkMode]);
+    return (React.createElement(IntlProvider, { locale: "en", messages: {} },
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(CoreApp, null))));
+}

package/lib/main.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.d.ts.map

package/lib/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/main.tsx"],"names":[],"mappings":""}

package/lib/main.js

@@ -0,0 +1,4 @@
+import Main from '.';
+import ReactDOM from 'react-dom';
+import React from 'react';
+ReactDOM.render(React.createElement(Main, null), document.getElementById('main'));

package/lib/message.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    message: string;
+}
+declare const Message: React.FC<Props>;
+export default Message;
+//# sourceMappingURL=message.d.ts.map

package/lib/message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAuFD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAG5B,CAAA;AAED,eAAe,OAAO,CAAA"}

package/lib/message.js

@@ -0,0 +1,45 @@
+import { __spreadArray } from "tslib";
+import React from 'react';
+import { Chip, Avatar } from '@material-ui/core';
+import { parse, isLiteralElement, isNumberElement, isDateElement, isTimeElement, isTagElement, isArgumentElement, isPoundElement, } from '@formatjs/icu-messageformat-parser';
+import { CallSplit, Event, Schedule } from '@material-ui/icons';
+function formatAst(ast) {
+    var els = [];
+    for (var _i = 0, ast_1 = ast; _i < ast_1.length; _i++) {
+        var el = ast_1[_i];
+        if (isLiteralElement(el)) {
+            els.push(el.value);
+        }
+        else if (isArgumentElement(el)) {
+            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, disabled: true }));
+        }
+        else if (isPoundElement(el)) {
+            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: "#", disabled: true }));
+        }
+        else if (isNumberElement(el)) {
+            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, avatar: React.createElement(Avatar, null, "N"), disabled: true }));
+        }
+        else if (isDateElement(el)) {
+            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, avatar: React.createElement(Avatar, null,
+                    React.createElement(Event, { fontSize: "small" })), disabled: true }));
+        }
+        else if (isTimeElement(el)) {
+            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, avatar: React.createElement(Avatar, null,
+                    React.createElement(Schedule, { fontSize: "small" })), disabled: true }));
+        }
+        else if (isTagElement(el)) {
+            els.push.apply(els, __spreadArray(__spreadArray([React.createElement(Chip, { variant: "outlined", size: "small", label: "<" + el.value + ">", disabled: true })], formatAst(el.children)), [React.createElement(Chip, { variant: "outlined", size: "small", label: "</" + el.value + ">", disabled: true })]));
+        }
+        else {
+            els.push.apply(els, __spreadArray([React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, avatar: React.createElement(Avatar, null,
+                        React.createElement(CallSplit, { fontSize: "small" })), disabled: true })], formatAst(el.options.other.value)));
+        }
+    }
+    return els;
+}
+var Message = function (_a) {
+    var message = _a.message;
+    var ast = parse(message);
+    return React.createElement(React.Fragment, null, formatAst(ast));
+};
+export default Message;

package/lib/messages.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TranslatedMessage } from './types';
+export interface Props {
+    messages: TranslatedMessage[];
+    isLoading?: boolean;
+    count: number;
+}
+declare const Messages: React.FC<Props>;
+export default Messages;
+//# sourceMappingURL=messages.d.ts.map

package/lib/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/messages.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,iBAAiB,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwB7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/lib/messages.js

@@ -0,0 +1,21 @@
+import { List, ListItem, Box } from '@material-ui/core';
+import { CheckCircle } from '@material-ui/icons';
+import { Skeleton } from '@material-ui/lab';
+import React from 'react';
+import Message from './message';
+var Messages = function (_a) {
+    var messages = _a.messages, isLoading = _a.isLoading, count = _a.count;
+    if (isLoading) {
+        var placeholders = [];
+        for (var i = 0; i < count; i++) {
+            placeholders.push(React.createElement(ListItem, { key: i, dense: true, divider: true },
+                React.createElement(Skeleton, { width: "100%", height: 60 })));
+        }
+        return React.createElement(List, { dense: true }, placeholders);
+    }
+    return (React.createElement(List, { dense: true }, messages.map(function (m) { return (React.createElement(ListItem, { key: m.id, dense: true, divider: true, alignItems: "flex-start" },
+        React.createElement(CheckCircle, null),
+        React.createElement(Box, { component: "span", paddingLeft: 1 },
+            React.createElement(Message, { message: m.defaultMessage })))); })));
+};
+export default Messages;

package/lib/types.d.ts

@@ -0,0 +1,6 @@
+export interface TranslatedMessage {
+    id: string;
+    defaultMessage: string;
+    translatedMessage: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;CAC1B"}

package/lib/types.js

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

package/main.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.d.ts.map

package/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/main.tsx"],"names":[],"mappings":""}

package/main.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var _1 = tslib_1.__importDefault(require("."));
+var react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+var react_1 = tslib_1.__importDefault(require("react"));
+react_dom_1.default.render(react_1.default.createElement(_1.default, null), document.getElementById('main'));

package/message.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    message: string;
+}
+declare const Message: React.FC<Props>;
+export default Message;
+//# sourceMappingURL=message.d.ts.map

package/message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAuFD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAG5B,CAAA;AAED,eAAe,OAAO,CAAA"}

package/message.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var core_1 = require("@material-ui/core");
+var icu_messageformat_parser_1 = require("@formatjs/icu-messageformat-parser");
+var icons_1 = require("@material-ui/icons");
+function formatAst(ast) {
+    var els = [];
+    for (var _i = 0, ast_1 = ast; _i < ast_1.length; _i++) {
+        var el = ast_1[_i];
+        if (icu_messageformat_parser_1.isLiteralElement(el)) {
+            els.push(el.value);
+        }
+        else if (icu_messageformat_parser_1.isArgumentElement(el)) {
+            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, disabled: true }));
+        }
+        else if (icu_messageformat_parser_1.isPoundElement(el)) {
+            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: "#", disabled: true }));
+        }
+        else if (icu_messageformat_parser_1.isNumberElement(el)) {
+            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, avatar: react_1.default.createElement(core_1.Avatar, null, "N"), disabled: true }));
+        }
+        else if (icu_messageformat_parser_1.isDateElement(el)) {
+            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, avatar: react_1.default.createElement(core_1.Avatar, null,
+                    react_1.default.createElement(icons_1.Event, { fontSize: "small" })), disabled: true }));
+        }
+        else if (icu_messageformat_parser_1.isTimeElement(el)) {
+            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, avatar: react_1.default.createElement(core_1.Avatar, null,
+                    react_1.default.createElement(icons_1.Schedule, { fontSize: "small" })), disabled: true }));
+        }
+        else if (icu_messageformat_parser_1.isTagElement(el)) {
+            els.push.apply(els, tslib_1.__spreadArray(tslib_1.__spreadArray([react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: "<" + el.value + ">", disabled: true })], formatAst(el.children)), [react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: "</" + el.value + ">", disabled: true })]));
+        }
+        else {
+            els.push.apply(els, tslib_1.__spreadArray([react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, avatar: react_1.default.createElement(core_1.Avatar, null,
+                        react_1.default.createElement(icons_1.CallSplit, { fontSize: "small" })), disabled: true })], formatAst(el.options.other.value)));
+        }
+    }
+    return els;
+}
+var Message = function (_a) {
+    var message = _a.message;
+    var ast = icu_messageformat_parser_1.parse(message);
+    return react_1.default.createElement(react_1.default.Fragment, null, formatAst(ast));
+};
+exports.default = Message;

package/messages.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TranslatedMessage } from './types';
+export interface Props {
+    messages: TranslatedMessage[];
+    isLoading?: boolean;
+    count: number;
+}
+declare const Messages: React.FC<Props>;
+export default Messages;
+//# sourceMappingURL=messages.d.ts.map

package/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/messages.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,iBAAiB,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwB7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/messages.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@material-ui/core");
+var icons_1 = require("@material-ui/icons");
+var lab_1 = require("@material-ui/lab");
+var react_1 = tslib_1.__importDefault(require("react"));
+var message_1 = tslib_1.__importDefault(require("./message"));
+var Messages = function (_a) {
+    var messages = _a.messages, isLoading = _a.isLoading, count = _a.count;
+    if (isLoading) {
+        var placeholders = [];
+        for (var i = 0; i < count; i++) {
+            placeholders.push(react_1.default.createElement(core_1.ListItem, { key: i, dense: true, divider: true },
+                react_1.default.createElement(lab_1.Skeleton, { width: "100%", height: 60 })));
+        }
+        return react_1.default.createElement(core_1.List, { dense: true }, placeholders);
+    }
+    return (react_1.default.createElement(core_1.List, { dense: true }, messages.map(function (m) { return (react_1.default.createElement(core_1.ListItem, { key: m.id, dense: true, divider: true, alignItems: "flex-start" },
+        react_1.default.createElement(icons_1.CheckCircle, null),
+        react_1.default.createElement(core_1.Box, { component: "span", paddingLeft: 1 },
+            react_1.default.createElement(message_1.default, { message: m.defaultMessage })))); })));
+};
+exports.default = Messages;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@formatjs/editor",
+  "version": "1.1.30",
+  "description": "A ICU MessageFormat Editor UI",
+  "keywords": [
+    "intl",
+    "i18n",
+    "internationalization",
+    "locale",
+    "localization",
+    "globalization",
+    "react",
+    "react-intl",
+    "reactjs",
+    "format",
+    "formatjs",
+    "formatting",
+    "translate",
+    "translation",
+    "cli"
+  ],
+  "author": "Long Ho <holevietlong@gmail.com>",
+  "homepage": "https://github.com/formatjs/formatjs",
+  "license": "MIT",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/formatjs/formatjs.git"
+  },
+  "dependencies": {
+    "@formatjs/icu-messageformat-parser": "2.0.11",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "@types/react": "17",
+    "react": "17",
+    "react-intl": "5.20.11"
+  },
+  "bugs": {
+    "url": "https://github.com/formatjs/formatjs/issues"
+  }
+}

package/types.d.ts

@@ -0,0 +1,6 @@
+export interface TranslatedMessage {
+    id: string;
+    defaultMessage: string;
+    translatedMessage: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;CAC1B"}

package/types.js

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