@manuscripts/style-guide 2.0.17 → 2.0.18

package/dist/cjs/index.js

@@ -45,7 +45,6 @@ __exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/Resizer"), exports);
 __exportStar(require("./components/SaveStatus"), exports);
 __exportStar(require("./components/StyledModal"), exports);
-__exportStar(require("./components/FootnotesSelector"), exports);
 __exportStar(require("./components/Sidebar"), exports);
 __exportStar(require("./components/RichText"), exports);
 __exportStar(require("./components/TextField"), exports);

package/dist/es/index.js

@@ -25,7 +25,6 @@ export * from './components/Form';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/StyledModal';
-export * from './components/FootnotesSelector';
 export * from './components/Sidebar';
 export * from './components/RichText';
 export * from './components/TextField';

package/dist/types/index.d.ts

@@ -26,7 +26,6 @@ export * from './components/Form';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/StyledModal';
-export * from './components/FootnotesSelector';
 export * from './components/Sidebar';
 export * from './components/RichText';
 export * from './components/TextField';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/dist/cjs/components/FootnotesSelector.js

@@ -1,174 +0,0 @@
-"use strict";
-/*!
- * © 2023 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FootnotesSelector = void 0;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Button_1 = require("./Button");
-const icons_1 = require("./icons");
-const NotesContainer = styled_components_1.default.div `
-  height: 90vh;
-  max-height: 400px;
-  overflow-y: auto;
-`;
-const Actions = (0, styled_components_1.default)(Button_1.ButtonGroup) `
-  align-items: center;
-  box-shadow: 0 -2px 12px 0 rgba(216, 216, 216, 0.26);
-  display: flex;
-  justify-content: space-between;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-`;
-const Container = styled_components_1.default.div `
-  flex: 1;
-  font-family: ${(props) => props.theme.font.family.sans};
-`;
-const AddNewFootnote = (0, styled_components_1.default)(Button_1.ButtonGroup) `
-  button {
-    margin-right: ${(props) => props.theme.grid.unit * 8}px;
-  }
-
-  button:hover,
-  button:active {
-    path {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-    rect {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-  }
-`;
-const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
-    let selectedNotesMap;
-    if (inlineFootnote) {
-        const rids = inlineFootnote.attrs.rids;
-        const selectedNotes = notes.filter(({ node }) => rids.includes(node.attrs.id));
-        selectedNotesMap = new Map(selectedNotes.map(({ node }) => [node.attrs.id, node]));
-    }
-    const [selections, setSelections] = (0, react_1.useState)(new Map(selectedNotesMap));
-    const toggleSelection = (item) => {
-        const id = item.attrs.id;
-        if (selections.has(id)) {
-            selections.delete(id);
-            setSelections(new Map([...selections]));
-        }
-        else {
-            selections.set(id, item);
-            setSelections(new Map([...selections]));
-        }
-    };
-    const isSelected = (item) => {
-        return selections.has(item.attrs.id);
-    };
-    const handleClick = () => {
-        return onInsert(notes.filter(({ node }) => selections.has(node.attrs.id)));
-    };
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(NotesContainer, null,
-            react_1.default.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
-        react_1.default.createElement(Actions, null,
-            react_1.default.createElement(AddNewFootnote, null,
-                react_1.default.createElement(Button_1.IconTextButton, { onClick: onAdd },
-                    react_1.default.createElement(icons_1.AddNewIcon, null),
-                    addNewLabel || 'Add new')),
-            react_1.default.createElement(Button_1.ButtonGroup, null,
-                react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
-                react_1.default.createElement(Button_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
-};
-exports.FootnotesSelector = FootnotesSelector;
-const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
-    const selectedNotes = [];
-    const remainingNotes = [];
-    notes.forEach((note) => {
-        const isNoteSelected = inlineFootnote && inlineFootnote.attrs.rids.includes(note.node.attrs.id);
-        if (isNoteSelected) {
-            selectedNotes.push(note);
-        }
-        else {
-            remainingNotes.push(note);
-        }
-    });
-    return (react_1.default.createElement(NotesListContainer, null,
-        selectedNotes.map((note) => footnoteItem(note, isSelected, onSelect)),
-        selectedNotes.length > 0 && remainingNotes.length > 0 && react_1.default.createElement(Separator, null),
-        remainingNotes.map((note) => footnoteItem(note, isSelected, onSelect))));
-};
-const footnoteItem = (note, isSelected, onSelect) => {
-    var _a;
-    const { node, index } = note;
-    return (react_1.default.createElement(FootnoteItem, { onClick: () => onSelect(node), key: node.attrs.id },
-        react_1.default.createElement(StatusIcon, null, isSelected(node) ? (react_1.default.createElement(icons_1.AddedIcon, { "data-cy": 'plus-icon-ok' })) : (react_1.default.createElement(icons_1.AddIcon, { "data-cy": 'plus-icon' }))),
-        react_1.default.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
-};
-const Separator = styled_components_1.default.div `
-  height: 0;
-  border-bottom: 1px solid #e2e2e2;
-  margin: 4px 0;
-`;
-const NotesListContainer = styled_components_1.default.div `
-  padding: ${(props) => props.theme.grid.unit * 6}px
-    ${(props) => props.theme.grid.unit * 5}px;
-  flex: 1;
-  overflow-y: auto;
-`;
-const FootnoteItem = styled_components_1.default.div `
-  cursor: pointer;
-  padding: ${(props) => props.theme.grid.unit * 2}px 0;
-  display: flex;
-`;
-const StatusIcon = styled_components_1.default.div `
-  flex-shrink: 1;
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
-  margin-left: ${(props) => props.theme.grid.unit}px;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-  width: ${(props) => props.theme.grid.unit * 6}px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-`;
-const NoteText = styled_components_1.default.div `
-  color: ${(props) => props.theme.colors.text.primary};
-  flex: 1;
-  font-weight: ${(props) => props.theme.font.weight.normal};
-  margin-top: 2px;
-`;

package/dist/es/components/FootnotesSelector.js

@@ -1,144 +0,0 @@
-/*!
- * © 2023 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, } from './Button';
-import { AddedIcon, AddIcon, AddNewIcon } from './icons';
-const NotesContainer = styled.div `
-  height: 90vh;
-  max-height: 400px;
-  overflow-y: auto;
-`;
-const Actions = styled(ButtonGroup) `
-  align-items: center;
-  box-shadow: 0 -2px 12px 0 rgba(216, 216, 216, 0.26);
-  display: flex;
-  justify-content: space-between;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-`;
-const Container = styled.div `
-  flex: 1;
-  font-family: ${(props) => props.theme.font.family.sans};
-`;
-const AddNewFootnote = styled(ButtonGroup) `
-  button {
-    margin-right: ${(props) => props.theme.grid.unit * 8}px;
-  }
-
-  button:hover,
-  button:active {
-    path {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-    rect {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-  }
-`;
-export const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
-    let selectedNotesMap;
-    if (inlineFootnote) {
-        const rids = inlineFootnote.attrs.rids;
-        const selectedNotes = notes.filter(({ node }) => rids.includes(node.attrs.id));
-        selectedNotesMap = new Map(selectedNotes.map(({ node }) => [node.attrs.id, node]));
-    }
-    const [selections, setSelections] = useState(new Map(selectedNotesMap));
-    const toggleSelection = (item) => {
-        const id = item.attrs.id;
-        if (selections.has(id)) {
-            selections.delete(id);
-            setSelections(new Map([...selections]));
-        }
-        else {
-            selections.set(id, item);
-            setSelections(new Map([...selections]));
-        }
-    };
-    const isSelected = (item) => {
-        return selections.has(item.attrs.id);
-    };
-    const handleClick = () => {
-        return onInsert(notes.filter(({ node }) => selections.has(node.attrs.id)));
-    };
-    return (React.createElement(Container, null,
-        React.createElement(NotesContainer, null,
-            React.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
-        React.createElement(Actions, null,
-            React.createElement(AddNewFootnote, null,
-                React.createElement(IconTextButton, { onClick: onAdd },
-                    React.createElement(AddNewIcon, null),
-                    addNewLabel || 'Add new')),
-            React.createElement(ButtonGroup, null,
-                React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
-                React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
-};
-const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
-    const selectedNotes = [];
-    const remainingNotes = [];
-    notes.forEach((note) => {
-        const isNoteSelected = inlineFootnote && inlineFootnote.attrs.rids.includes(note.node.attrs.id);
-        if (isNoteSelected) {
-            selectedNotes.push(note);
-        }
-        else {
-            remainingNotes.push(note);
-        }
-    });
-    return (React.createElement(NotesListContainer, null,
-        selectedNotes.map((note) => footnoteItem(note, isSelected, onSelect)),
-        selectedNotes.length > 0 && remainingNotes.length > 0 && React.createElement(Separator, null),
-        remainingNotes.map((note) => footnoteItem(note, isSelected, onSelect))));
-};
-const footnoteItem = (note, isSelected, onSelect) => {
-    var _a;
-    const { node, index } = note;
-    return (React.createElement(FootnoteItem, { onClick: () => onSelect(node), key: node.attrs.id },
-        React.createElement(StatusIcon, null, isSelected(node) ? (React.createElement(AddedIcon, { "data-cy": 'plus-icon-ok' })) : (React.createElement(AddIcon, { "data-cy": 'plus-icon' }))),
-        React.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
-};
-const Separator = styled.div `
-  height: 0;
-  border-bottom: 1px solid #e2e2e2;
-  margin: 4px 0;
-`;
-const NotesListContainer = styled.div `
-  padding: ${(props) => props.theme.grid.unit * 6}px
-    ${(props) => props.theme.grid.unit * 5}px;
-  flex: 1;
-  overflow-y: auto;
-`;
-const FootnoteItem = styled.div `
-  cursor: pointer;
-  padding: ${(props) => props.theme.grid.unit * 2}px 0;
-  display: flex;
-`;
-const StatusIcon = styled.div `
-  flex-shrink: 1;
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
-  margin-left: ${(props) => props.theme.grid.unit}px;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-  width: ${(props) => props.theme.grid.unit * 6}px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-`;
-const NoteText = styled.div `
-  color: ${(props) => props.theme.colors.text.primary};
-  flex: 1;
-  font-weight: ${(props) => props.theme.font.weight.normal};
-  margin-top: 2px;
-`;

package/dist/types/components/FootnotesSelector.d.ts

@@ -1,29 +0,0 @@
-/*!
- * © 2023 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { FootnoteNode, InlineFootnoteNode } from '@manuscripts/transform';
-import React from 'react';
-export type FootnoteWithIndex = {
-    node: FootnoteNode;
-    index?: string;
-};
-export declare const FootnotesSelector: React.FC<{
-    notes: FootnoteWithIndex[];
-    inlineFootnote?: InlineFootnoteNode;
-    onAdd: () => void;
-    onInsert: (notes: FootnoteWithIndex[]) => void;
-    onCancel: () => void;
-    addNewLabel?: string;
-}>;