@inialum/memories-react 0.4.0 → 1.0.1

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

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

package/dist/components/ButtonLink/index.js

@@ -0,0 +1,2 @@
+import { ButtonLink } from "./ButtonLink.js";
+export { ButtonLink };

package/dist/components/Footer/Footer.js

@@ -0,0 +1,127 @@
+import SvgInialumLogoLightTransparent from "../../assets/inialum_logo_light_transparent.js";
+import SvgXLogo from "../../assets/x_logo.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Footer/Footer.tsx
+var Footer = ({ className, ...rest }) => {
+	const nowYear = (/* @__PURE__ */ new Date()).getFullYear();
+	return /* @__PURE__ */ jsxs("footer", {
+		...rest,
+		className: clsx("bg-base-block", "pt-52 px-48 pb-28 md:pb-64", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center justify-center gap-y-12 md:gap-y-16",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-120 h-120 md:w-280 md:h-280",
+					children: /* @__PURE__ */ jsx(SvgInialumLogoLightTransparent, {
+						"aria-label": "INIALUM - INIAD Alumni Meetings",
+						className: "object-cover w-full h-full"
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "font-bold text-2xs md:text-sm",
+					children: "さらなる連携を、ともに歩んだ仲間と"
+				})]
+			}),
+			/* @__PURE__ */ jsx("nav", { children: /* @__PURE__ */ jsxs("ul", {
+				className: "flex flex-col items-center text-center gap-y-32 md:gap-y-48 pt-40 md:py-56 pb-28",
+				children: [
+					/* @__PURE__ */ jsx("li", {
+						className: "font-bold text-xs md:text-base",
+						children: /* @__PURE__ */ jsx("a", {
+							href: "/",
+							children: "ホーム"
+						})
+					}),
+					/* @__PURE__ */ jsx("li", {
+						className: "font-bold text-xs md:text-base",
+						children: /* @__PURE__ */ jsx("a", {
+							href: "/vision",
+							children: "私たちの思い"
+						})
+					}),
+					/* @__PURE__ */ jsx("li", {
+						className: "font-bold text-xs md:text-base",
+						children: /* @__PURE__ */ jsx("a", {
+							href: "https://inialum.org/join",
+							children: "入会する"
+						})
+					}),
+					/* @__PURE__ */ jsx("li", {
+						className: "font-bold text-xs md:text-base",
+						children: /* @__PURE__ */ jsx("a", {
+							href: "/contact",
+							children: "お問い合わせ"
+						})
+					}),
+					/* @__PURE__ */ jsx("li", {
+						className: "font-bold text-xs md:text-base",
+						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 items-center text-center border-t border-t-gray-500 max-w-732 mx-auto gap-y-16 md:gap-y-36 pt-28 md:pt-56",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center pt-0 px-0 pb-12 md:pb-8",
+						children: /* @__PURE__ */ jsx("a", {
+							href: "https://twitter.com/inialum",
+							target: "_blank",
+							rel: "noreferrer noopener",
+							children: /* @__PURE__ */ jsx(SvgXLogo, {
+								"aria-label": "X公式アカウント",
+								className: "h-24 md:h-32 fill-black"
+							})
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-center text-gray-500 gap-x-20 md:gap-x-48 text-2xs md:text-sm",
+						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-gray-500 text-2xs md:text-sm",
+						children: [
+							"© ",
+							nowYear,
+							" INIALUM - INIAD Alumni Meetings."
+						]
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { Footer };
+
+//# sourceMappingURL=Footer.js.map

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

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react-vite';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+declare const meta: {
+    title: string;
+    component: ({ className, ...rest }: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

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

package/dist/components/Footer/index.js

@@ -0,0 +1,2 @@
+import { Footer } from "./Footer.js";
+export { Footer };

package/dist/components/Header/Header.js

@@ -0,0 +1,38 @@
+import SvgInialumLogoLightTransparent from "../../assets/inialum_logo_light_transparent.js";
+import SvgMenuIcon from "../../assets/menu_icon.js";
+import { Navigation } from "../Navigation/Navigation.js";
+import "../Navigation/index.js";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/components/Header/Header.tsx
+var Header = ({ hasNavigation = true, className, ...rest }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const onClick = useCallback(() => {
+		setIsOpen(!isOpen);
+	}, [isOpen]);
+	return /* @__PURE__ */ jsxs("header", {
+		...rest,
+		className: clsx("relative flex items-center", "bg-primary w-full h-60", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "absolute top-0 left-0 flex items-center justify-center w-160 h-160 md:w-xs md:h-320 p-12 md:p-24 bg-base-white z-30",
+			children: /* @__PURE__ */ jsx(SvgInialumLogoLightTransparent, { "aria-label": "INIALUM - INIAD Alumni Meetings" })
+		}), hasNavigation && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "ml-auto mr-20 p-4 fill-base-white",
+			title: "ナビゲーションメニュー",
+			"aria-label": "ナビゲーションメニューを開く",
+			"aria-haspopup": "true",
+			"aria-expanded": isOpen,
+			onClick,
+			children: /* @__PURE__ */ jsx(SvgMenuIcon, { "aria-hidden": "true" })
+		}), isOpen && /* @__PURE__ */ jsx(Navigation, {
+			isOpen,
+			onClose: onClick
+		})] })]
+	});
+};
+//#endregion
+export { Header };
+
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ClassAttributes, HTMLAttributes } from 'react';
+declare const meta: {
+    title: string;
+    component: ({ hasNavigation, className, ...rest }: ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & {
+        hasNavigation?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

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

package/dist/components/Header/index.js

@@ -0,0 +1,2 @@
+import { Header } from "./Header.js";
+export { Header };

package/dist/components/Navigation/Navigation.js

@@ -0,0 +1,169 @@
+import SvgXLogo from "../../assets/x_logo.js";
+import SvgCrossIcon from "../../assets/cross_icon.js";
+import SvgInialumLogoWhiteTransparent from "../../assets/inialum_logo_white_transparent.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { RemoveScroll } from "react-remove-scroll";
+//#region src/components/Navigation/Navigation.tsx
+var 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 });
+};
+var 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."
+								]
+							})
+						]
+					})
+				]
+			})]
+		})
+	});
+};
+//#endregion
+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 @@
+import { Navigation } from "./Navigation.js";
+export { Navigation };

package/dist/components/index.js

@@ -0,0 +1,11 @@
+import { Button } from "./Button/Button.js";
+import "./Button/index.js";
+import { ButtonLink } from "./ButtonLink/ButtonLink.js";
+import "./ButtonLink/index.js";
+import { Footer } from "./Footer/Footer.js";
+import "./Footer/index.js";
+import { Navigation } from "./Navigation/Navigation.js";
+import "./Navigation/index.js";
+import { Header } from "./Header/Header.js";
+import "./Header/index.js";
+export { Button, ButtonLink, Footer, Header, Navigation };