@react-cupertino-ui/mail-composer 1.0.1

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024 Anderson Lima
+
+This project is inspired by Apple's design principles but is not affiliated with, endorsed, or sponsored by Apple Inc.
+
+
+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/dist/index.css

@@ -0,0 +1,188 @@
+.react-cupertino-ui-mail-composer {
+  position: fixed;
+  top: 10px;
+  /* Card Modal style */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #f2f2f7;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
+  transform: translateY(0);
+  animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@media (min-width: 768px) {
+  .react-cupertino-ui-mail-composer {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    height: 700px;
+    border-radius: 12px;
+    bottom: auto;
+    animation: zoom-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-mail-composer {
+    background-color: #1c1c1e;
+  }
+}
+.react-cupertino-ui-mail-composer .composer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-mail-composer .composer-header {
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+}
+.react-cupertino-ui-mail-composer .composer-header button {
+  border: none;
+  background: none;
+  padding: 4px;
+  font-size: 17px;
+  cursor: pointer;
+  color: #007aff;
+}
+.react-cupertino-ui-mail-composer .composer-header button:disabled {
+  color: #8e8e93;
+  cursor: default;
+}
+.react-cupertino-ui-mail-composer .composer-header .title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #000;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-mail-composer .composer-header .title {
+    color: #fff;
+  }
+}
+.react-cupertino-ui-mail-composer .send-button {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #007aff !important;
+  color: white !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-cupertino-ui-mail-composer .send-button:disabled {
+  background-color: #e5e5ea !important;
+  color: #8e8e93 !important;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-mail-composer .send-button:disabled {
+    background-color: #2c2c2e !important;
+  }
+}
+.react-cupertino-ui-mail-composer .composer-fields {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-mail-composer .composer-fields {
+    background: #1c1c1e;
+  }
+}
+.react-cupertino-ui-mail-composer .field-row {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  min-height: 44px;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-mail-composer .field-row {
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+}
+.react-cupertino-ui-mail-composer .field-row.animate-in {
+  animation: expand-row 0.2s ease-out;
+}
+.react-cupertino-ui-mail-composer .field-row label {
+  color: #8e8e93;
+  font-size: 15px;
+  margin-right: 8px;
+}
+.react-cupertino-ui-mail-composer .field-row .ghost-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 15px;
+  color: #000;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-mail-composer .field-row .ghost-input {
+    color: #fff;
+  }
+}
+.react-cupertino-ui-mail-composer .field-row .details-toggle {
+  border: none;
+  background: none;
+  color: #007aff;
+  font-size: 13px;
+  cursor: pointer;
+  margin-left: 8px;
+}
+.react-cupertino-ui-mail-composer .body-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  padding: 16px;
+  background: transparent;
+  font-size: 16px;
+  font-family: inherit;
+  color: #000;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-mail-composer .body-input {
+    color: #fff;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes zoom-in {
+  from {
+    transform: translate(-50%, -50%) scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+@keyframes expand-row {
+  from {
+    height: 0;
+    min-height: 0;
+    opacity: 0;
+    padding: 0 16px;
+  }
+  to {
+    height: 44px;
+    min-height: 44px;
+    opacity: 1;
+    padding: 10px 16px;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+export interface MailComposerProps extends Omit<BaseProps<HTMLDivElement>, "children"> {
+    isOpen: boolean;
+    onClose: () => void;
+    onSend: (data: {
+        to: string;
+        cc: string;
+        subject: string;
+        body: string;
+    }) => void;
+    initialData?: {
+        to?: string;
+        cc?: string;
+        subject?: string;
+        body?: string;
+    };
+}
+declare const MailComposer: React.ForwardRefExoticComponent<MailComposerProps & React.RefAttributes<HTMLDivElement>>;
+export { MailComposer };

package/dist/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import { ArrowUp } from "lucide-react";
+import "./index.scss";
+const MailComposer = React.forwardRef(({ className, isOpen, onClose, onSend, initialData, ...props }, ref) => {
+    const [to, setTo] = React.useState(initialData?.to || "");
+    const [cc, setCc] = React.useState(initialData?.cc || "");
+    const [subject, setSubject] = React.useState(initialData?.subject || "");
+    const [body, setBody] = React.useState(initialData?.body || "");
+    const [isCcVisible, setIsCcVisible] = React.useState(!!initialData?.cc);
+    React.useEffect(() => {
+        if (isOpen) {
+            // document.body.style.overflow = "hidden";
+        }
+        else {
+            // document.body.style.overflow = "";
+        }
+        return () => {
+            // document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const handleSend = () => {
+        onSend({ to, cc, subject, body });
+    };
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-mail-composer", className), role: "dialog", "aria-modal": "true", ...props, children: [_jsxs("div", { className: "composer-header", children: [_jsx("button", { className: "cancel-button", onClick: onClose, children: "Cancel" }), _jsx("span", { className: "title", children: "New Message" }), _jsx("button", { className: "send-button", onClick: handleSend, disabled: !to, children: _jsx(ArrowUp, { size: 20, fill: "currentColor" }) })] }), _jsxs("div", { className: "composer-fields", children: [_jsxs("div", { className: "field-row", children: [_jsx("label", { htmlFor: "to-field", children: "To:" }), _jsx("input", { id: "to-field", type: "text", value: to, onChange: (e) => setTo(e.target.value), className: "ghost-input" }), _jsx("button", { className: "details-toggle", onClick: () => setIsCcVisible(!isCcVisible), "aria-label": "Show Cc/Bcc", children: isCcVisible ? "Hide" : "Cc/Bcc" })] }), isCcVisible && (_jsxs("div", { className: "field-row animate-in", children: [_jsx("label", { htmlFor: "cc-field", children: "Cc:" }), _jsx("input", { id: "cc-field", type: "text", value: cc, onChange: (e) => setCc(e.target.value), className: "ghost-input" })] })), _jsxs("div", { className: "field-row", children: [_jsx("label", { htmlFor: "subject-field", children: "Subject:" }), _jsx("input", { id: "subject-field", type: "text", value: subject, onChange: (e) => setSubject(e.target.value), className: "ghost-input" })] }), _jsx("textarea", { className: "body-input", value: body, onChange: (e) => setBody(e.target.value), placeholder: "" })] })] }));
+});
+MailComposer.displayName = "MailComposer";
+export { MailComposer };

package/dist/index.scss

@@ -0,0 +1,197 @@
+.react-cupertino-ui-mail-composer {
+    position: fixed;
+    top: 10px;
+    /* Card Modal style */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #f2f2f7;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
+    transform: translateY(0);
+    animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+    @media (min-width: 768px) {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 600px;
+        height: 700px;
+        border-radius: 12px;
+        bottom: auto;
+        animation: zoom-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @media (prefers-color-scheme: dark) {
+        background-color: #1c1c1e;
+    }
+
+    .composer-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 16px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+        @media (prefers-color-scheme: dark) {
+            border-bottom-color: rgba(255, 255, 255, 0.1);
+        }
+
+        button {
+            border: none;
+            background: none;
+            padding: 4px;
+            font-size: 17px;
+            cursor: pointer;
+            color: #007aff;
+
+            &:disabled {
+                color: #8e8e93;
+                cursor: default;
+            }
+        }
+
+        .title {
+            font-size: 17px;
+            font-weight: 600;
+            color: #000;
+
+            @media (prefers-color-scheme: dark) {
+                color: #fff;
+            }
+        }
+    }
+
+    .send-button {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background-color: #007aff !important;
+        color: white !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:disabled {
+            background-color: #e5e5ea !important;
+            color: #8e8e93 !important;
+
+            @media (prefers-color-scheme: dark) {
+                background-color: #2c2c2e !important;
+            }
+        }
+    }
+
+    .composer-fields {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background: white;
+
+        @media (prefers-color-scheme: dark) {
+            background: #1c1c1e;
+        }
+    }
+
+    .field-row {
+        display: flex;
+        align-items: center;
+        padding: 10px 16px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        min-height: 44px;
+
+        @media (prefers-color-scheme: dark) {
+            border-bottom-color: rgba(255, 255, 255, 0.1);
+        }
+
+        &.animate-in {
+            animation: expand-row 0.2s ease-out;
+        }
+
+        label {
+            color: #8e8e93;
+            font-size: 15px;
+            margin-right: 8px;
+        }
+
+        .ghost-input {
+            flex: 1;
+            border: none;
+            outline: none;
+            background: transparent;
+            font-size: 15px;
+            color: #000;
+
+            @media (prefers-color-scheme: dark) {
+                color: #fff;
+            }
+        }
+
+        .details-toggle {
+            border: none;
+            background: none;
+            color: #007aff;
+            font-size: 13px;
+            cursor: pointer;
+            margin-left: 8px;
+        }
+    }
+
+    .body-input {
+        flex: 1;
+        border: none;
+        outline: none;
+        resize: none;
+        padding: 16px;
+        background: transparent;
+        font-size: 16px;
+        font-family: inherit;
+        color: #000;
+
+        @media (prefers-color-scheme: dark) {
+            color: #fff;
+        }
+    }
+}
+
+@keyframes slide-up {
+    from {
+        transform: translateY(100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes zoom-in {
+    from {
+        transform: translate(-50%, -50%) scale(0.95);
+        opacity: 0;
+    }
+
+    to {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes expand-row {
+    from {
+        height: 0;
+        min-height: 0;
+        opacity: 0;
+        padding: 0 16px;
+    }
+
+    to {
+        height: 44px;
+        min-height: 44px;
+        opacity: 1;
+        padding: 10px 16px;
+    }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-cupertino-ui/mail-composer",
+  "version": "1.0.1",
+  "description": "MailComposer component from React Cupertino UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./dist/**/*.scss"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:styles",
+    "build:styles": "node ../../../scripts/build-styles.mjs"
+  },
+  "peerDependencies": {
+    "lucide-react": "^0.417.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@react-cupertino-ui/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}