@gpichot/spectacle-deck 1.2.0 → 1.2.1

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>
+  );
+}

package/src/components/map.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { mdxComponentMap } from "spectacle";
+import {
+  CustomHeading,
+  CustomQuote,
+  HeadingThree,
+  HeadingTwo,
+  InlineCode,
+  Image,
+} from "./styled";
+
+import CodeStepper from "./CodeStepper/CodeStepper";
+import { QRCode } from "./QRCode";
+
+const componentsMap = {
+  ...mdxComponentMap,
+  inlineCode: (props: React.ComponentPropsWithoutRef<"code">) => (
+    <InlineCode
+      {...props}
+      style={{
+        fontWeight: 500,
+        display: "inline-block",
+      }}
+    />
+  ),
+  table: (props: React.ComponentPropsWithoutRef<"table">) => (
+    <table
+      {...props}
+      style={{
+        borderCollapse: "collapse",
+        width: "100%",
+        textAlign: "center",
+      }}
+    />
+  ),
+  tr: (props: React.ComponentPropsWithoutRef<"tr">) => (
+    <tr
+      {...props}
+      style={{
+        textAlign: "center",
+        color: "white",
+        fontFamily: 'Bitter,"Helvetica Neue",Helvetica,Arial,sans-serif',
+        fontSize: 24,
+      }}
+    />
+  ),
+  td: (props: React.ComponentPropsWithoutRef<"td">) => (
+    <td
+      {...props}
+      style={{
+        textAlign: "center",
+        padding: "0.3rem 0",
+        color: "white",
+        fontFamily: 'Bitter,"Helvetica Neue",Helvetica,Arial,sans-serif',
+        fontSize: 24,
+      }}
+    />
+  ),
+  h1: (props: React.ComponentProps<"h1">) => (
+    <CustomHeading
+      fontSize="h1"
+      color="white"
+      style={{
+        fontWeight: 500,
+        fontFamily: 'Bitter,"Helvetica Neue",Helvetica,Arial,sans-serif',
+        fontSize: 67,
+        flex: "0 1 65vw",
+        maxWidth: "65%",
+        textAlign: "left",
+      }}
+    >
+      {props.children}
+    </CustomHeading>
+  ),
+  h2: (props: React.ComponentProps<"h2">) => (
+    <HeadingTwo>{props.children}</HeadingTwo>
+  ),
+  h3: (props: React.ComponentPropsWithoutRef<"h3">) => (
+    <HeadingThree {...props} />
+  ),
+  img: (props: React.ComponentProps<typeof Image>) => <Image {...props} />,
+  pre: CodeStepper,
+  li: (props: React.ComponentProps<"li">) => (
+    <li {...props} style={{ margin: "24px 0" }} />
+  ),
+  Side: (props: React.ComponentProps<"div">) => <div {...props} />,
+  p: (props: React.ComponentProps<"p">) => {
+    const Text = mdxComponentMap.p!;
+    return (
+      <Text
+        style={{ margin: "8px 0", padding: "8px 0", lineHeight: "2rem" }}
+        {...props}
+      />
+    );
+  },
+  blockquote: (props: React.ComponentProps<"blockquote">) => (
+    <CustomQuote {...props} />
+  ),
+  a: ({ children, ...props }: React.ComponentProps<"a">) => {
+    const domain = new URL(props.href || "").hostname;
+    return (
+      <a
+        {...props}
+        style={{ color: "var(--color-secondary)", textDecoration: "none" }}
+      >
+        {children}{" "}
+        <small
+          style={{
+            color: "#ffffff44",
+          }}
+        >
+          ({domain})
+        </small>
+      </a>
+    );
+  },
+  directive: (props: React.ComponentProps<"div">) => {
+    // @ts-expect-error
+    if (props._name === "qrcode") {
+      // @ts-expect-error
+      const url = React.Children.toArray(props.children)[0].props.href;
+      return <QRCode url={url} />;
+    }
+    return <div {...props} />;
+  },
+} as const;
+
+export default componentsMap;

package/src/components/styled.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {
+  Link as SpectacleLink,
+  Image as SpectacleImage,
+  Heading,
+  FlexBox,
+} from "spectacle";
+import styled from "styled-components";
+
+export const Link = (props: { href: string; children: React.ReactNode }) => (
+  <SpectacleLink href={props.href} target="_blank" rel="noopener noreferrer">
+    {props.children} [{props.href}]
+  </SpectacleLink>
+);
+
+const StyledImage = styled(SpectacleImage)`
+  object-fit: contain;
+  max-height: 30vh;
+  max-width: 70vw;
+`;
+
+export const Image = (props: React.ComponentProps<typeof SpectacleImage>) => (
+  <FlexBox margin="0 0" padding="0 0">
+    <StyledImage {...props} />
+  </FlexBox>
+);
+
+export const CustomHeading = styled(Heading)`
+  strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
+`;
+
+export const CustomQuote = styled.blockquote`
+  margin: 1rem 0;
+  padding-left: 1.5rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0.8;
+
+  > * {
+    padding: 0 !important;
+  }
+`;
+
+export const InlineCode = styled.code`
+  filter: brightness(1.05);
+  zoom: 1.1;
+  &:before,
+  &:after {
+    content: "\`";
+    font-size: 0.8em;
+  }
+`;
+
+export const HeadingTwo = styled.h2`
+  font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
+  font-size: 55px;
+  font-weight: 400;
+`;
+
+export const HeadingThree = styled.h3`
+  font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
+  font-size: 40px;
+  font-weight: 400;
+  margin-top: 0;
+
+  strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
+`;

package/src/context.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+export type LayoutComponent = React.ComponentType<any>;
+
+export interface IPestacleContext {
+  layouts: Record<string, LayoutComponent>;
+}
+
+export const PestacleContext = React.createContext<
+  IPestacleContext | undefined
+>(undefined);
+
+export function usePestacle() {
+  const context = React.useContext(PestacleContext);
+  if (!context) {
+    throw new Error("usePestacle must be used within a PestacleProvider");
+  }
+  return context;
+}
+
+export function PestacleProvider({
+  children,
+  layouts,
+}: {
+  children: React.ReactNode;
+  layouts: Record<string, LayoutComponent>;
+}) {
+  return (
+    <PestacleContext.Provider value={{ layouts }}>
+      {children}
+    </PestacleContext.Provider>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { MDXProvider } from "@mdx-js/react";
+import { Deck as SpectacleDeck, Slide } from "spectacle";
+
+import Layouts from "./layouts";
+import { default as baseTheme } from "./theme";
+import { template } from "./template";
+import customComponents from "./components/map";
+import { createGlobalStyle } from "styled-components";
+import { SlideWrapper } from "./SlideWrapper";
+import { LayoutComponent, PestacleProvider } from "./context";
+import { createCssVariables } from "./colors";
+
+export * from "spectacle";
+
+export { default as FilePane } from "./components/FilePane";
+export { ItemsColumn } from "./components/ItemsColumn";
+export { Doc, DocItem } from "./components/DocumentationItem";
+export { Image } from "./components/Image";
+export {
+  default as HorizontalList,
+  HorizontalListItem,
+} from "./components/HorizontalList";
+export { default as Timeline, TimelineItem } from "./components/Timeline";
+export { IconBox } from "./components/IconBox";
+
+export type SlideType = {
+  metadata: Record<string, unknown> & { layout?: string };
+  slideComponent: React.ElementType<unknown>;
+};
+
+export type DeckType = {
+  metadata: Record<string, unknown>;
+  slides: SlideType[];
+};
+
+export function PassThrough({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+export const layouts = Layouts;
+
+interface ThemeOptions {
+  themeTokens: {
+    colors: Record<string, string>;
+  };
+}
+
+const componentsMap = {
+  ...customComponents,
+  wrapper: SlideWrapper,
+};
+export function Deck({
+  deck,
+  theme,
+  layouts = Layouts,
+}: {
+  deck: DeckType;
+  theme: ThemeOptions;
+  layouts?: Record<string, LayoutComponent>;
+}) {
+  React.useEffect(() => {
+    document.title = (deck.metadata.title as string) || "Untitled";
+  }, [deck.metadata.title]);
+
+  const GlobalStyle = React.useMemo(() => {
+    const cssVariables = createCssVariables(theme.themeTokens.colors);
+    return createGlobalStyle`
+      :root {
+        ${cssVariables}
+        --font-family: ${baseTheme.fonts.text}
+      }
+    `;
+  }, [theme]);
+
+  return (
+    <React.StrictMode>
+      <PestacleProvider layouts={layouts}>
+        <MDXProvider components={componentsMap}>
+          <GlobalStyle />
+          <SpectacleDeck
+            theme={{ ...baseTheme, ...theme.themeTokens }}
+            template={template}
+          >
+            {deck.slides.map((slide, i) => {
+              const Component = slide.slideComponent;
+              return (
+                <Slide key={i}>
+                  <Component />
+                </Slide>
+              );
+            })}
+          </SpectacleDeck>
+        </MDXProvider>
+      </PestacleProvider>
+    </React.StrictMode>
+  );
+}
+
+export function Danger({ children }: { children: React.ReactNode }) {
+  return <div style={{ color: "red" }}>{children}</div>;
+}
+
+export function Information({ children }: { children: React.ReactNode }) {
+  return <div style={{ color: "orange" }}>{children}</div>;
+}
+
+export function Success({ children }: { children: React.ReactNode }) {
+  return <div style={{ color: "green" }}>{children}</div>;
+}
+export function Warning({ children }: { children: React.ReactNode }) {
+  return <div style={{ color: "yellow" }}>{children}</div>;
+}
+
+export function Side({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}
+
+Side.mdxType = "Side";
+
+export function Documentation({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}
+
+export function Box({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}

package/src/layouts/BaseLayout.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+
+const DefaultLayoutHeading = styled.div`
+  background-color: #ffffff11;
+  padding: 2rem 5rem;
+  margin-bottom: 1rem;
+
+  h2 {
+    margin: 0;
+  }
+`;
+
+
+export const BaseLayout = ({
+  children,
+  title,
+  ...otherProps
+}: {
+  children: React.ReactNode;
+  title?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "title">) => {
+  return (
+    <div
+      {...otherProps}
+      style={{
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: "5rem",
+      }}
+    >
+      {title && <DefaultLayoutHeading>{title}</DefaultLayoutHeading>}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          height: "100%",
+          padding: "0 4rem",
+          flex: 1,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/layouts/CenteredLayout.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+import { Margins, getHeading } from "./utils";
+
+const CenteredLayoutContent = styled.div`
+  h2,
+  h3 {
+  }
+`;
+export const CenteredLayout = (
+  props: React.ComponentPropsWithoutRef<"div">
+) => {
+  const [heading, rest] = getHeading(props.children);
+  return (
+    <div
+      {...props}
+      style={{
+        height: "100%",
+        display: "flex",
+        flexFlow: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: `0 ${Margins.horizontal}`,
+      }}
+    >
+      {rest}
+      <CenteredLayoutContent
+        style={{
+          position: "absolute",
+          opacity: 0.8,
+          marginBottom: "2rem",
+          marginTop: "2rem",
+          bottom: 0,
+        }}
+      >
+        {heading}
+      </CenteredLayoutContent>
+    </div>
+  );
+};