feat: add masonry grid

src/atoms/box/index.tsx

@@ -0,0 +1,44 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import React, { CSSProperties, FC } from "react";
+
+const StyledBox = styled.div<{
+ style?: CSSProperties & { "--aspect-ratio"?: number };
+ roundCorners?: boolean;
+}>`
+ position: relative;
+ width: 100%;
+ height: 0;
+ padding-bottom: calc(100% / var(--aspect-ratio, 1));
+ ${({ theme, roundCorners }) =>
+ roundCorners &&
+ css`
+ border-radius: ${theme.shapes.m};
+ overflow: hidden;
+ `};
+`;
+
+const StyledBoxInner = styled.div`
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+`;
+
+export interface BoxProps {
+ aspectRatio?: number;
+ roundCorners?: boolean;
+}
+
+const Box: FC<BoxProps> = ({ aspectRatio = 1, roundCorners, children, ...props }) => {
+ return (
+ <StyledBox {...props} style={{ "--aspect-ratio": aspectRatio }} roundCorners={roundCorners}>
+ <StyledBoxInner>{children}</StyledBoxInner>
+ </StyledBox>
+ );
+};
+
+export default Box;

src/molecules/masonry/column.tsx

@@ -0,0 +1,123 @@
+import { StyledMasonryBox } from "@/molecules/masonry/styled";
+import React, { CSSProperties, FC, RefObject, useEffect, useRef, useState } from "react";
+
+export const closed = {};
+
+export const getOpen = (column: number, row: number) => ({
+ gridColumnStart: column,
+ gridRowStart: row,
+ gridColumnEnd: "span 2",
+ gridRowEnd: "span 2",
+});
+
+export const useMasonryColumn = (
+ ref: RefObject<HTMLDivElement>,
+ isOpen: boolean,
+ { rowBig = "2", columnBig = "2" }
+) => {
+ const [style, setStyle] = useState<CSSProperties>(closed);
+ useEffect(() => {
+ const handleLayout = () => {
+ if (isOpen && ref.current) {
+ const { current: element } = ref;
+ const { parentElement } = element;
+ const parentComputedStyle = window.getComputedStyle(parentElement);
+ const boundingClientRect = element.getBoundingClientRect();
+ const parentPoundingClientRect = parentElement.getBoundingClientRect();
+
+ // Columns
+ const gridColumns = parentComputedStyle.gridTemplateColumns.split(" ");
+ const { length: numberColumns } = gridColumns;
+
+ // Rows
+ const gridRows = parentComputedStyle.gridTemplateRows.split(" ");
+ const { length: numberRows } = gridRows;
+ // Positions
+ const positionX = boundingClientRect.left - parentPoundingClientRect.left;
+ const positionY = boundingClientRect.top - parentPoundingClientRect.top;
+ // Dimensions
+ const gridRowHeight =
+ Number.parseFloat(gridRows[0]) +
+ Number.parseFloat(parentComputedStyle.gridRowGap);
+ const gridColumnWidth =
+ Number.parseFloat(gridColumns[0]) +
+ Number.parseFloat(parentComputedStyle.gridColumnGap);
+
+ // Test next position
+ element.style.gridColumnStart = "";
+ element.style.gridRowStart = "";
+ element.style.gridColumnEnd = `span ${columnBig}`;
+ element.style.gridRowEnd = `span ${rowBig}`;
+
+ const computedStyle = window.getComputedStyle(element);
+
+ const width = Number.parseFloat(computedStyle.gridColumnEnd.split(" ")[1]);
+ const height = Number.parseFloat(computedStyle.gridRowEnd.split(" ")[1]);
+
+ // Get next position
+ let row = Math.round(positionY / gridRowHeight) + 1;
+ let column = Math.round(positionX / gridColumnWidth) + 1;
+
+ if (row + height > numberRows) {
+ row = numberRows - height + 1;
+ }
+
+ if (column + width > numberColumns) {
+ column = numberColumns - width + 1;
+ }
+
+ setStyle({
+ gridColumnStart: column,
+ gridRowStart: row,
+ gridColumnEnd: `span ${columnBig}`,
+ gridRowEnd: `span ${rowBig}`,
+ });
+ } else {
+ setStyle(closed);
+ }
+ };
+
+ handleLayout();
+ window.addEventListener("resize", handleLayout, { passive: true });
+ return () => {
+ window.removeEventListener("resize", handleLayout);
+ };
+ }, [columnBig, isOpen, ref, rowBig]);
+ return style;
+};
+
+export interface MasonryColumnProps {
+ colSpan?: number | string;
+ rowSpan?: number | string;
+ isOpen?: boolean;
+ onClick?(): void;
+}
+
+const MasonryColumn: FC<MasonryColumnProps> = ({
+ children,
+ onClick,
+ rowSpan,
+ colSpan,
+ isOpen,
+ ...props
+}) => {
+ const ref = useRef<HTMLDivElement>(null);
+ const style = useMasonryColumn(ref, isOpen, {
+ rowBig: `calc(${rowSpan} * 2)`,
+ columnBig: `calc(${colSpan} * 2)`,
+ });
+ return (
+ <StyledMasonryBox
+ {...props}
+ ref={ref}
+ style={style}
+ rowSpan={rowSpan}
+ colSpan={colSpan}
+ onClick={onClick}
+ >
+ {children}
+ </StyledMasonryBox>
+ );
+};
+
+export default MasonryColumn;

src/molecules/masonry/grid.tsx

@@ -0,0 +1,33 @@
+import { StyledMasonryGrid } from "@/molecules/masonry/styled";
+import React, { FC } from "react";
+
+export interface MasonryGridProps {
+ colCountXS?: number;
+ colCountS?: number;
+ colCountM?: number;
+ colCountL?: number;
+}
+const MasonryGrid: FC<MasonryGridProps> = ({
+ colCountXS = "var(--col-span)",
+ colCountS = colCountXS,
+ colCountM = colCountS,
+ colCountL = colCountM,
+ children,
+ ...props
+}) => {
+ return (
+ <StyledMasonryGrid
+ {...props}
+ style={{
+ "--col-count-xs": colCountXS,
+ "--col-count-s": colCountS,
+ "--col-count-m": colCountM,
+ "--col-count-l": colCountL,
+ }}
+ >
+ {children}
+ </StyledMasonryGrid>
+ );
+};
+
+export default MasonryGrid;

src/molecules/masonry/styled.ts

@@ -0,0 +1,54 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { CSSProperties } from "react";
+
+export const StyledMasonryGrid = styled.div<{
+ style?: CSSProperties & {
+ "--col-count-xs"?: number | string;
+ "--col-count-s"?: number | string;
+ "--col-count-m"?: number | string;
+ "--col-count-l"?: number | string;
+ };
+}>`
+ --col-count: var(--col-count-xs);
+
+ display: grid;
+ grid-auto-flow: dense;
+ grid-auto-rows: var(--gap-x);
+ grid-gap: var(--gap-x);
+ grid-template-columns: repeat(var(--col-count), 1fr);
+ ${({ theme }) => css`
+ ${theme.mq.s} {
+ --col-count: var(--col-count-s);
+ }
+ ${theme.mq.m} {
+ --col-count: var(--col-count-m);
+ }
+ ${theme.mq.l} {
+ --col-count: var(--col-count-l);
+ }
+ `};
+`;
+
+export const StyledMasonryBox = styled.div<{
+ colSpan?: number | string;
+ rowSpan?: number | string;
+}>`
+ --col-span: var(--col-count);
+ --row-span: 1;
+
+ ${({ theme, colSpan, rowSpan }) => css`
+ ${colSpan &&
+ css`
+ grid-column-end: span var(--col-span, 1);
+ `};
+ ${rowSpan &&
+ css`
+ grid-row-end: span var(--row-span, 1);
+ `};
+ ${theme.mq.s} {
+ --col-span: ${colSpan};
+ --row-span: ${rowSpan};
+ }
+ `};
+`;

src/pages/design-system/masonry/index.tsx

@@ -0,0 +1,22 @@
+import { addApolloState, initializeApollo } from "@/ions/services/apollo/client";
+import Examples from "@/templates/design-system/pages/masonry";
+import { PageProps, StaticPageProps } from "@/types";
+import { GetStaticProps, NextPage } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import React from "react";
+
+const Page: NextPage<PageProps> = () => {
+ return <Examples />;
+};
+
+export const getStaticProps: GetStaticProps<StaticPageProps> = async context => {
+ const apolloClient = initializeApollo();
+ return addApolloState<StaticPageProps>(apolloClient, {
+ props: {
+ ...(await serverSideTranslations(context.locale)),
+ locale: context.locale,
+ },
+ });
+};
+
+export default Page;

src/templates/design-system/index.tsx

@@ -42,6 +42,9 @@ const DesignSystem = () => {
  <li>
  <I18nLink href="/design-system/grid">Grid</I18nLink>
  </li>
+ <li>
+ <I18nLink href="/design-system/masonry">Masonry</I18nLink>
+ </li>
  <li>
  <I18nLink href="/design-system/snackbar">Snackbar</I18nLink>
  </li>

src/templates/design-system/pages/masonry.tsx

@@ -0,0 +1,107 @@
+import Typography from "@/atoms/typography";
+import Layout from "@/groups/layout";
+import { RawBreadcrumb } from "@/ions/contexts/breadcrumbs/types";
+import { pxToRem } from "@/ions/utils/unit";
+import { Column, Grid } from "@/molecules/grid";
+import MasonryColumn from "@/molecules/masonry/column";
+import MasonryGrid from "@/molecules/masonry/grid";
+import Breadcrumbs from "@/organisms/breadcrumbs";
+import OverlayGrid from "@/organisms/grid-overlay";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useTranslation } from "next-i18next";
+import process from "process";
+import React, { useMemo, useState } from "react";
+
+const aspectRatios = [
+ { col: 1, row: 2 },
+ { col: 2, row: 4 },
+ { col: 2, row: 6 },
+ { col: 1, row: 5 },
+ { col: 2, row: 7 },
+ { col: 2, row: 5 },
+];
+const demoItems = Array.from({ length: 32 }).map((item, index) => ({
+ id: index + 1,
+ color: `hsl(${index * 129}, 60%, 80%)`,
+ aspectRatio:
+ aspectRatios[
+ (((((index + ((((index % 15) % 12) % 9) % 5)) % 17) % 15) % 14) % 11) %
+ aspectRatios.length
+ ],
+}));
+
+const StyledColoredBox = styled.div`
+ display: flex;
+ align-content: center;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ font-size: 2em;
+ font-weight: 600;
+ ${({ theme }) => css`
+ padding: ${pxToRem(theme.spaces.l)} ${pxToRem(theme.spaces.xs)};
+ border-radius: ${theme.shapes.s};
+ box-shadow: ${theme.shadows.s};
+ `}
+`;
+
+const MasonryExamples = () => {
+ const { t } = useTranslation(["navigation"]);
+ const [open, setOpen] = useState(-1);
+ const breadcrumbs: RawBreadcrumb[] = useMemo(
+ () => [
+ {
+ href: "/",
+ title: t("navigation:home"),
+ },
+ {
+ href: "/design-system",
+ title: "Design System",
+ },
+ {
+ href: "/design-system/masonry",
+ title: "Masonry",
+ },
+ ],
+ [t]
+ );
+ return (
+ <Layout title="Masonry | Design System" breadcrumbs={breadcrumbs} robots="noindex,nofollow">
+ <Grid>
+ <Column>
+ <Breadcrumbs />
+ <Typography variant="h1">Masonry</Typography>
+ </Column>
+ <Column>
+ <MasonryGrid>
+ {demoItems.map((item, index) => {
+ const isOpen = open === index;
+ return (
+ <MasonryColumn
+ key={item.id}
+ isOpen={isOpen}
+ colSpan={item.aspectRatio.col}
+ rowSpan={item.aspectRatio.row}
+ onClick={() => {
+ setOpen(previousState =>
+ previousState === index ? -1 : index
+ );
+ }}
+ >
+ <StyledColoredBox style={{ backgroundColor: item.color }}>
+ {index + 1}
+ </StyledColoredBox>
+ </MasonryColumn>
+ );
+ })}
+ </MasonryGrid>
+ </Column>
+ </Grid>
+ {process.env.NODE_ENV === "production" && <OverlayGrid />}
+ </Layout>
+ );
+};
+
+export default MasonryExamples;