@inialum/memories-react 0.4.0 → 1.0.0

package/dist/components/Navigation/Navigation.js

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { RemoveScroll } from 'react-remove-scroll';
+import SvgCrossIcon from '../../assets/cross_icon.svg.js';
+import SvgInialumLogoWhiteTransparent from '../../assets/inialum_logo_white_transparent.svg.js';
+import SvgXLogo from '../../assets/x_logo.svg.js';
+
+const Navigation = ({ portal = true, ...rest }) => {
+  if (portal) {
+    const rootElement = portal === true ? document.body : portal.rootElement;
+    return createPortal(/* @__PURE__ */ jsx(NavigationContent, { ...rest }), rootElement);
+  }
+  return /* @__PURE__ */ jsx(NavigationContent, { ...rest });
+};
+const NavigationContent = ({
+  isOpen,
+  className,
+  onClose: _onClose,
+  ...rest
+}) => {
+  const nowYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const dialogRef = useRef(null);
+  const onClose = useCallback(() => {
+    const dialogElem = dialogRef.current;
+    if (!dialogElem) return;
+    dialogElem.close();
+    _onClose();
+  }, [_onClose]);
+  useEffect(() => {
+    const dialogElem = dialogRef.current;
+    if (!dialogElem) return;
+    if (isOpen) {
+      if (dialogElem.hasAttribute("open")) return;
+      dialogElem.showModal();
+    } else {
+      if (!dialogElem.hasAttribute("open")) return;
+      dialogElem.close();
+    }
+  }, [isOpen]);
+  const onClickContent = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsx(RemoveScroll, { removeScrollBar: true, enabled: isOpen, children: /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...rest,
+      ref: dialogRef,
+      onClick: onClose,
+      className: clsx(
+        "bg-blue-600 text-base-white",
+        "m-0 p-0 max-w-full max-h-full h-svh left-full -translate-x-full sm:w-372 w-full",
+        className
+      ),
+      style: { transition: "opacity .5s" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "absolute top-20 right-20 p-4 fill-base-white",
+            "aria-label": "閉じる",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(SvgCrossIcon, { width: "24", height: "24", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "w-full h-full", onClick: onClickContent, children: [
+          /* @__PURE__ */ jsx("div", { className: "object-cover h-160 w-160 p-12 sm:hidden", children: /* @__PURE__ */ jsx(SvgInialumLogoWhiteTransparent, { "aria-label": "INIALUM - INIAD Alumni Meetings" }) }),
+          /* @__PURE__ */ jsx("nav", { children: /* @__PURE__ */ jsxs("ul", { className: "flex flex-col justify-center gap-y-32 px-36 py-32 sm:mt-160", children: [
+            /* @__PURE__ */ jsx("li", { className: "font-bold text-xs", children: /* @__PURE__ */ jsx("a", { href: "/", children: "ホーム" }) }),
+            /* @__PURE__ */ jsx("li", { className: "font-bold text-xs", children: /* @__PURE__ */ jsx("a", { href: "/vision", children: "私たちの思い" }) }),
+            /* @__PURE__ */ jsx("li", { className: "font-bold text-xs", children: /* @__PURE__ */ jsx("a", { href: "https://inialum.org/join", children: "入会する" }) }),
+            /* @__PURE__ */ jsx("li", { className: "font-bold text-xs", children: /* @__PURE__ */ jsx("a", { href: "/contact", children: "お問い合わせ" }) }),
+            /* @__PURE__ */ jsx("li", { className: "font-bold text-xs", children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://inialum.notion.site/INIALUM-Q-A-0cfb2bd4cc814df6a29ca5aa7f9ad9b7",
+                target: "_blank",
+                rel: "noreferrer noopener",
+                children: "Q&A"
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center border-t border-t-gray-300 gap-y-24 pt-24 mx-36 pb-80 sm:w-300", children: [
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://twitter.com/inialum",
+                target: "_blank",
+                rel: "noreferrer noopener",
+                className: "flex items-center w-fit",
+                children: /* @__PURE__ */ jsx(
+                  SvgXLogo,
+                  {
+                    "aria-label": "X公式アカウント",
+                    className: "h-24 fill-base-white"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-20 text-gray-300 text-2xs", children: [
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "https://inialum.notion.site/4cbf67b190544bff8891deabc64e776c",
+                  target: "_blank",
+                  rel: "noreferrer noopener",
+                  children: "同窓会会則"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "https://inialum.notion.site/4d2374f79b594f00b93c0efccf3c6bb4",
+                  target: "_blank",
+                  rel: "noreferrer noopener",
+                  children: "役員一覧"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "https://inialum.notion.site/d8a7e0dd14224c0dadfd630a6665cee0",
+                  target: "_blank",
+                  rel: "noreferrer noopener",
+                  children: "プライバシーポリシー"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "https://github.com/inialum",
+                  target: "_blank",
+                  rel: "noreferrer noopener",
+                  children: "GitHub"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-2xs text-gray-300", children: [
+              "© ",
+              nowYear,
+              " INIALUM - INIAD Alumni Meetings."
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
+
+export { Navigation };
+//# sourceMappingURL=Navigation.js.map

package/dist/components/Navigation/Navigation.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ClassAttributes, DialogHTMLAttributes } from 'react';
+declare const meta: {
+    title: string;
+    component: ({ portal, ...rest }: ClassAttributes<HTMLDialogElement> & DialogHTMLAttributes<HTMLDialogElement> & {
+        isOpen: boolean;
+        onClose: () => void;
+    } & {
+        portal?: true | {
+            rootElement: Element;
+        };
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Navigation/index.d.ts

@@ -0,0 +1 @@
+export { Navigation } from './Navigation';

package/dist/components/Navigation/index.js

@@ -0,0 +1,2 @@
+export { Navigation } from './Navigation.js';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js

@@ -0,0 +1,6 @@
+export { Button } from './Button/Button.js';
+export { ButtonLink } from './ButtonLink/ButtonLink.js';
+export { Footer } from './Footer/Footer.js';
+export { Header } from './Header/Header.js';
+export { Navigation } from './Navigation/Navigation.js';
+//# sourceMappingURL=index.js.map