@gpichot/spectacle-deck 1.1.7 → 1.2.1

package/src/components/DocumentationItem.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+import styled from "styled-components";
+
+const DocWrapper = styled.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 10000;
+
+  .docContent {
+    display: none;
+  }
+
+  &:hover .docContent {
+    display: flex;
+  }
+`;
+
+const DocContainer = styled.div`
+  margin: 2rem 1rem;
+  background-color: #333;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  border-radius: 1.5rem;
+`;
+
+const DocLink = styled.a`
+  text-decoration: none;
+  font-weight: normal;
+  font-family: var(--font-family);
+  color: var(--color-secondary);
+`;
+
+const DocLinkItem = styled(DocLink)`
+  width: fit-content;
+  display: inline-block;
+  background-color: #333;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  border-radius: 1.5rem;
+  margin: 0.25rem 0;
+`;
+
+const DocContent = styled.div`
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  position: absolute;
+  right: 1rem;
+  bottom: 4.5rem;
+  text-align: right;
+  border-radius: 0.5rem;
+  align-items: flex-end;
+`;
+
+export function Doc({
+  label,
+  link,
+  children,
+}: {
+  label: string;
+  link: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <DocWrapper>
+      <DocContainer>
+        {children && <DocContent>{children}</DocContent>}
+        <div>
+          <DocLink target="_blank" rel="noopener noreferrer" href={link}>
+            {label}
+          </DocLink>
+        </div>
+      </DocContainer>
+    </DocWrapper>
+  );
+}
+
+export function DocItem({ label, link }: { label: string; link: string }) {
+  return (
+    <DocLinkItem target="_blank" rel="noopener noreferrer" href={link}>
+      {label}
+    </DocLinkItem>
+  );
+}

package/src/components/FilePane.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function FilePane({
+  name,
+  children,
+  priority,
+  ...divProps
+}: React.ComponentProps<"div"> & { name: string; priority?: number }) {
+  return React.isValidElement(children)
+    ? React.cloneElement(children, {
+        // @ts-expect-error cloning
+        priority,
+        name,
+      })
+    : children;
+}
+
+FilePane.mdxType = "FilePane";

package/src/components/HorizontalList.tsx

@@ -0,0 +1,141 @@
+import { usePestacle } from "context";
+import React from "react";
+import { animated, useSpring } from "react-spring";
+import { Stepper } from "spectacle";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: grid;
+  grid-gap: 2rem;
+`;
+
+export default function HorizontalList({
+  children,
+  columns = 3,
+}: {
+  columns?: number;
+  children: React.ReactNode;
+}) {
+  const items = React.Children.toArray(children);
+  return (
+    <Stepper values={items}>
+      {(_, step) => (
+        <Container
+          style={{
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          }}
+        >
+          {items.map((item, k) => {
+            if (!React.isValidElement(item)) {
+              return item;
+            }
+            return React.cloneElement(item, {
+              // @ts-expect-error cloning
+              position: k + 1,
+              isVisible: k <= step,
+              isLast: k === step,
+            });
+          })}
+        </Container>
+      )}
+    </Stepper>
+  );
+}
+
+function Pill({ position }: { position: number }) {
+  return (
+    <div
+      style={{ width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }}
+    >
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 18 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z"
+          fill="#ffffff"
+        ></path>
+        <text
+          x="9"
+          y="11"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          fill="#f49676"
+          style={{ fontSize: "50%" }}
+        >
+          {position}
+        </text>
+        <path
+          d="M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z"
+          fill="transparent"
+        ></path>
+      </svg>
+    </div>
+  );
+}
+
+const Item = styled(animated.div)`
+  display: flex;
+  flex-direction: column;
+  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+`;
+const ItemHead = styled.div`
+  display: flex;
+  flex-direction: row;
+  font-size: 1.3rem;
+  margin-bottom: 0.4rem;
+
+  p {
+    margin: 0;
+  }
+`;
+const ItemContent = styled.div`
+  > * {
+    font-size: 1rem;
+    padding: 4px !important;
+    line-height: 1.5rem !important;
+    margin-top: 0;
+  }
+`;
+
+function getItemOpacity({
+  isLast,
+  isVisible,
+}: {
+  isLast?: boolean;
+  isVisible?: boolean;
+}) {
+  if (isLast) return 1;
+  if (isVisible) return 0.7;
+  return 0;
+}
+export function HorizontalListItem({
+  title,
+  children,
+  position,
+  isVisible,
+  isLast,
+}: {
+  title: string;
+  position: number;
+  isVisible?: boolean;
+  isLast?: boolean;
+  children: React.ReactNode;
+}) {
+  const opacityStyles = useSpring({
+    opacity: getItemOpacity({ isVisible, isLast }),
+  });
+  return (
+    <Item style={opacityStyles}>
+      <ItemHead>
+        <Pill position={position} />
+        <p>{title}</p>
+      </ItemHead>
+
+      <ItemContent>{children}</ItemContent>
+    </Item>
+  );
+}

package/src/components/IconBox.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import styled from "styled-components";
+
+const IconBoxContent = styled.div`
+  * {
+    margin: 0.2rem !important;
+    padding: 0 !important;
+  }
+`;
+
+export function IconBox({
+  children,
+  icon,
+}: {
+  children: React.ReactNode;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: "1rem 0",
+      }}
+    >
+      <div style={{ fontSize: 60 }}>{icon}</div>
+      <IconBoxContent>{children}</IconBoxContent>
+    </div>
+  );
+}

package/src/components/Image.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { SVGObject } from "../layouts/styled";
+
+export interface ImageProps extends React.ComponentProps<"img"> { }
+
+export function Image(props: ImageProps) {
+  const { src, height, width,
+    style, ...otherProps
+  } = props;
+  if (!src?.endsWith(".svg")) {
+    return (
+      <img
+        src={src}
+        {...otherProps}
+        style={{
+          width,
+          height: height || "100%",
+          objectFit: "cover",
+          objectPosition: "center",
+          ...style
+        }}
+      />
+    );
+  }
+  return (
+    <SVGObject
+      type="image/svg+xml"
+      data={src}
+      style={{
+        height: height || "100%",
+        minWidth: "30vw",
+        width: width || "100%",
+        ...style
+      }}
+    />
+  );
+}
+
+Image.mdxType = "Image";

package/src/components/ItemsColumn.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Stepper } from "spectacle";
+import styled from "styled-components";
+import { useSpring, animated } from "react-spring";
+
+export function ItemsColumn(divProps: React.ComponentProps<"div">) {
+  const { style, children, ...props } = divProps;
+  const childrenArray = React.Children.toArray(children);
+  return (
+    <Stepper values={childrenArray}>
+      {(value, step) => (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyItems: 'center',
+            alignItems: "stretch",
+            height: "100%",
+            rowGap: '2rem',
+            ...style,
+          }}
+          {...props}
+        >
+          {childrenArray.map((child, index) => {
+            const isVisible = index <= step;
+            if (!React.isValidElement(child)) {
+              return child;
+            }
+            return (
+              <ItemColumnWrapper key={index} isVisible={isVisible}>
+                {child}
+              </ItemColumnWrapper>
+            );
+          })}
+        </div>
+      )}
+    </Stepper>
+  );
+}
+
+const ItemColumnWrapperStyled = styled(animated.div)`
+  display: flex;
+  justify-content: center;
+  * {
+    text-align: center !important;
+  }
+`;
+
+function ItemColumnWrapper({
+  children,
+  isVisible,
+  ...props
+}: React.ComponentPropsWithRef<"div"> & { isVisible: boolean }) {
+  const styles = useSpring({ opacity: isVisible ? 1 : 0 });
+  return (
+    <ItemColumnWrapperStyled style={styles} {...props}>
+      {children}
+    </ItemColumnWrapperStyled>
+  );
+}

package/src/components/QRCode.tsx

@@ -0,0 +1,55 @@
+import QrCreator from "qr-creator";
+import React, { useContext } from "react";
+import { DeckContext } from "spectacle";
+
+export interface QRCodeProps {
+  url: string;
+  size?: "xs" | "sm" | "md" | "lg";
+}
+
+const MapSize = {
+  xs: 64,
+  sm: 128,
+  md: 256,
+  lg: 512,
+};
+
+export function QRCode({ url, size = "md" }: QRCodeProps) {
+  const id = React.useId().replace(/:/g, "___");
+  const deck = useContext(DeckContext);
+  const width = MapSize[size];
+  const backgroundColor = deck.theme?.colors?.primary || "#ffffff";
+
+  React.useEffect(() => {
+    const element = document.querySelector(`#${id}`);
+
+    if (!element) return console.error("QRCode element not mounted");
+
+    QrCreator.render(
+      {
+        text: url,
+        radius: 0.5,
+        ecLevel: "H", // L, M, Q, H
+        fill: deck.theme?.colors?.secondary || "#000000",
+        background: backgroundColor,
+        size: width,
+      },
+      element as HTMLElement,
+    );
+
+    return () => {
+      element.replaceChildren();
+    };
+  }, [url]);
+
+  return (
+    <div
+      id={id}
+      style={{
+        padding: "1rem 1rem 0.6rem 1rem",
+        borderRadius: "1rem",
+        backgroundColor,
+      }}
+    />
+  );
+}

package/src/components/Timeline.styled.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const TimelineItemContent = styled.div`
+  display: flex;
+  padding: 0.7rem 0 1rem 12px;
+`;
+export const TimelineItemContentPhantom = styled(TimelineItemContent)`
+  opacity: 0;
+`;
+
+export const TimelineItemBody = styled.div`
+  &,
+  & > * {
+    font-size: 1.3rem !important;
+    color: #ffffff !important;
+  }
+`;
+
+export const TimelineItemTitle = styled.div`
+  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffffbb;
+`;

package/src/components/Timeline.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { animated, useSpring } from "react-spring";
+import { Stepper } from "spectacle";
+
+import {
+  TimelineItemBody,
+  TimelineItemContent,
+  TimelineItemContentPhantom,
+  TimelineItemTitle,
+} from "./Timeline.styled";
+import styled from "styled-components";
+
+const TimelineItemStyled = styled(animated.div)<{
+  isOdd?: boolean;
+  isEven?: boolean;
+}>`
+  flex: 1;
+  flex-flow: column nowrap;
+  display: inline-flex;
+
+  &:nth-child(odd) {
+    &,
+    ${TimelineItemContent} {
+      flex-direction: column;
+    }
+  }
+  &:nth-child(even) {
+    &,
+    ${TimelineItemContent} {
+      flex-direction: column-reverse;
+    }
+  }
+`;
+
+const TimelineItemGuide = styled(animated.div)`
+  width: 100%;
+  padding-top: 2px;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+
+  svg {
+    height: 28px;
+    width: 28px;
+    path {
+      fill: #ffffff;
+    }
+    margin-right: 4px;
+  }
+`;
+
+const TimelineItemGuideLine = styled(animated.div)`
+  border-top: 4px solid #ffffff;
+  margin-right: 4px;
+`;
+
+const style = {
+  display: "flex",
+  position: "relative",
+  flexFlow: "row nowrap",
+  alignItems: "center",
+};
+
+export default function Timeline(props: React.ComponentPropsWithoutRef<"div">) {
+  const children = React.Children.toArray(props.children);
+  return (
+    <Stepper
+      {...props}
+      values={children}
+      activeStyle={style}
+      inactiveStyle={style}
+    >
+      {(value, step) => {
+        return children.map((child, index) => {
+          if (!React.isValidElement(child)) {
+            return child;
+          }
+          return React.cloneElement(child, {
+            // @ts-expect-error cloning
+            isPhantom: step < index,
+            isLast: step === index,
+          });
+        });
+      }}
+    </Stepper>
+  );
+}
+
+function getItemOpacity({
+  isLast,
+  isPhantom,
+}: {
+  isLast?: boolean;
+  isPhantom?: boolean;
+}) {
+  if (isPhantom) return 0;
+  if (isLast) return 1;
+  return 0.5;
+}
+
+export function TimelineItem(
+  props: React.ComponentPropsWithoutRef<"div"> & {
+    isPhantom?: boolean;
+    isLast?: boolean;
+    isOdd?: boolean;
+    isEven?: boolean;
+  }
+) {
+  const { children, title, isPhantom, isLast, ...rest } = props;
+  const guideLineProps = useSpring({
+    width: isPhantom || isLast ? "0%" : "100%",
+  });
+  const appearStyles = useSpring({
+    opacity: getItemOpacity({ isPhantom, isLast }),
+  });
+  const colorStyles = useSpring({ opacity: isPhantom || isLast ? 1 : 0.15 });
+  return (
+    <TimelineItemStyled
+      {...rest}
+      style={{
+        ...appearStyles,
+      }}
+    >
+      <TimelineItemContentPhantom>
+        <TimelineItemTitle>{title}</TimelineItemTitle>
+        <TimelineItemBody>{children}</TimelineItemBody>
+      </TimelineItemContentPhantom>
+      <TimelineItemGuide style={colorStyles}>
+        <Hexagon />
+        <TimelineItemGuideLine style={guideLineProps} />
+      </TimelineItemGuide>
+      <TimelineItemContent>
+        <TimelineItemTitle>{title}</TimelineItemTitle>
+        <TimelineItemBody>{children}</TimelineItemBody>
+      </TimelineItemContent>
+    </TimelineItemStyled>
+  );
+}
+
+function Hexagon() {
+  return (
+    <svg
+      width="18"
+      height="20"
+      viewBox="0 0 18 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z"
+        fill="#F49676"
+      ></path>
+      <path
+        d="M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z"
+        fill="#F49676"
+      ></path>
+    </svg>
+  );
+}