@gpichot/spectacle-deck 1.1.1 → 1.1.2

package/src/components/HorizontalList.tsx

@@ -1,140 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

package/src/components/ItemsColumn.tsx

@@ -1,56 +0,0 @@
-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",
-            alignItems: "center",
-            height: "100%",
-            ...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)`
-  * {
-    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/Timeline.styled.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

@@ -1,115 +0,0 @@
-import React from "react";
-import { mdxComponentMap } from "spectacle";
-import {
-  CustomHeading,
-  CustomQuote,
-  HeadingThree,
-  HeadingTwo,
-  InlineCode,
-  Image,
-} from "./styled";
-
-import CodeStepper from "./CodeStepper/CodeStepper";
-
-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: "#f49676", textDecoration: "none" }}>
-        {children}{" "}
-        <small
-          style={{
-            color: "#ffffff44",
-          }}
-        >
-          ({domain})
-        </small>
-      </a>
-    );
-  },
-} as const;
-
-export default componentsMap;

package/src/components/styled.tsx

@@ -1,73 +0,0 @@
-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: #f49676;
-    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: #f49676;
-    font-weight: 500;
-  }
-`;