@gpichot/spectacle-deck 1.0.9 → 1.1.1

package/src/layouts/columns.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+
+const DivWithHeading = styled.div`
+  h2 {
+    margin-top: 0;
+  }
+  h2 strong {
+    color: #f49676;
+    font-weight: 400;
+  }
+`;
+
+const ColumnsContainer = styled(DivWithHeading)`
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  alignitems: center;
+`;
+
+export function ColumnsLayout({
+  children,
+  reverse,
+}: {
+  children: React.ReactNode;
+  reverse?: boolean;
+}) {
+  const childrenArray = React.Children.toArray(children);
+  return (
+    <ColumnsContainer
+      style={{
+        flexDirection: reverse ? "row-reverse" : "row",
+      }}
+    >
+      {childrenArray.map((child, i) => (
+        <div
+          key={i}
+          style={{
+            flex: 1,
+            height: "100%",
+            display: "flex",
+            flexFlow: "column",
+            justifyContent: "center",
+            boxSizing: "border-box",
+          }}
+        >
+          {child}
+        </div>
+      ))}
+    </ColumnsContainer>
+  );
+}

package/src/layouts/index.tsx

@@ -0,0 +1,19 @@
+import { CenteredLayout } from "./CenteredLayout";
+import { Default3Layout } from "./Default3Layout";
+import { MainSectionLayout } from "./MainSectionLayout";
+import { QuoteLayout } from "./QuoteLayout";
+import { SectionLayout } from "./SectionLayout";
+import { SidedCodeLayout } from "./SideCodeLayout";
+import { SidedImageLayout } from "./SideImageLayout";
+import { SideLayout } from "./SideLayout";
+
+export default {
+  mainSection: MainSectionLayout,
+  centered: CenteredLayout,
+  default3: Default3Layout,
+  quote: QuoteLayout,
+  sidedCode: SidedCodeLayout,
+  sidedImage: SidedImageLayout,
+  side: SideLayout,
+  section: SectionLayout,
+};

package/src/layouts/styled.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const SVGObject = styled.object`
+  padding: 3rem 2rem;
+  box-sizing: border-box;
+  background-color: white;
+`;

package/src/layouts/utils.ts

@@ -0,0 +1,65 @@
+import React from "react";
+
+export const Margins = {
+  vertical: "4rem",
+  horizontal: "7rem",
+  horizontalInternal: "2rem",
+};
+
+export function getHeading(children: React.ReactNode) {
+  const allChild = React.Children.toArray(children);
+  if (allChild.length === 0) return [null, allChild];
+  const [candidate, ...rest] = allChild;
+  if (!React.isValidElement(candidate)) return [null, allChild];
+  if (["h2", "h3"].includes(candidate.props.originalType)) {
+    return [candidate, rest];
+  }
+  return [null, allChild];
+}
+
+export function getCode(children: React.ReactNode) {
+  const allChild = React.Children.toArray(children);
+
+  if (allChild.length === 0) return [null, allChild];
+
+  const index = allChild.findIndex((child) => {
+    if (!React.isValidElement(child)) return false;
+    return child.props.originalType === "pre";
+  });
+
+  if (index === -1) return [null, allChild];
+
+  const candidate = allChild[index];
+  const rest = allChild.filter((_, i) => i !== index);
+  return [candidate, rest];
+}
+
+export function getMatchingMdxType(children: React.ReactNode, mdxType: string) {
+  const allChild = React.Children.toArray(children);
+
+  const matchFn = (child: React.ReactNode) => {
+    if (!React.isValidElement(child)) return false;
+    if (typeof child.type !== "function") return false;
+    if ("mdxType" in child.type === false) return false;
+
+    return child.type.mdxType === mdxType;
+  };
+
+  const matches = allChild.filter(matchFn);
+
+  const rest = allChild.filter((child) => !matchFn(child));
+
+  return [matches, rest];
+}
+
+export function getCodeChildren(children: React.ReactNode) {
+  const [code, rest] = getCode(children);
+  if (code) return [code, rest];
+
+  const [codeStepper, rest2] = getMatchingMdxType(children, "CodeStepper");
+  if (codeStepper.length > 0) return [codeStepper, rest2];
+
+  const [codes, rest3] = getMatchingMdxType(children, "FilePane");
+
+  return [codes, rest3];
+}

package/src/node.d.ts

@@ -0,0 +1,5 @@
+interface ImportMeta {
+  env: {
+    DEV: boolean;
+  };
+}

package/src/style.d.ts

@@ -0,0 +1,10 @@
+// Typings for .module.scss
+declare module "*.module.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module "*.png" {
+  const content: any;
+  export default content;
+}

package/src/template.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Box, FullScreen } from "spectacle";
+
+export const template = ({ slideNumber, numberOfSlides }) => {
+  const percentage = (slideNumber / numberOfSlides) * 100;
+  return (
+    <div style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}>
+      <Box padding="0 0 0.5em 0.7em">
+        <FullScreen />
+      </Box>
+
+      <div style={{ width: "100%", height: "4px", background: "#ffffff11" }}>
+        <div
+          style={{
+            width: `${percentage}%`,
+            height: "2px",
+            background: "#ffffff77",
+            transition: "width 0.3s ease",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/theme.ts

@@ -0,0 +1,24 @@
+import "@fontsource/bitter/300.css";
+import "@fontsource/bitter/400.css";
+import "@fontsource/bitter/500.css";
+import "@fontsource/bitter/700.css";
+
+export default {
+  colors: {
+    primary: "white",
+    secondary: "#F49676",
+    tertiary: "#042F3B",
+  },
+  fonts: {
+    header: 'Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    text: 'Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  },
+  fontSizes: {
+    h1: "48px",
+    h2: "32px",
+    h3: "24px",
+    text: "24px",
+    monospace: "16px",
+  },
+  space: [8, 16, 24],
+};

package/test.js

@@ -0,0 +1,106 @@
+import { Timeline, TimelineItem } from "@gpichot/spectacle-deck";
+
+
+import React from 'react';
+import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";import {useMDXComponents as _provideComponents} from "@mdx-js/react"
+
+export default {
+    metadata: {"author":"Gabriel"},
+    slides: [{
+        metadata: {"layout":"mainSection"},
+        slideComponent: (baseProps) => {
+          const props = {...baseProps, frontmatter: {"layout":"mainSection"} };
+          const _components = {
+    h1: "h1",
+    strong: "strong",
+    ..._provideComponents(),
+    ...props.components
+  };
+  const {wrapper: MDXLayout} = _components;
+return _jsxs(_components.h1, {
+    children: ["Hello, ", _jsx(_components.strong, {
+      children: "world!"
+    })]
+  })});
+        }
+      },{
+        metadata: {"layout":"centered"},
+        slideComponent: (baseProps) => {
+          const props = {...baseProps, frontmatter: {"layout":"centered"} };
+          const _components = {
+    h3: "h3",
+    p: "p",
+    strong: "strong",
+    ..._provideComponents(),
+    ...props.components
+  };
+  const {wrapper: MDXLayout} = _components;
+  return _jsx(MDXLayout, {...props,
+    children: [_jsx(_components.h3, {
+      children: _jsx(_components.strong, {
+        children: "History"
+      })
+    }), "\n", _jsxs(Timeline, {
+      children: [_jsx(TimelineItem, {
+        title: "2011",
+        children: _jsx(_components.p, {
+          children: "Created by Jordan Walke, a software engineer at Facebook."
+        })
+      }), _jsx(TimelineItem, {
+        title: "May 2013",
+        children: _jsxs(_components.p, {
+          children: ["⚛️ ", _jsx(_components.strong, {
+            children: "React"
+          }), " is open sourced."]
+        })
+      }), _jsx(TimelineItem, {
+        title: "March 2015",
+        children: _jsx(_components.p, {
+          children: "📱 React Native"
+        })
+      }), _jsx(TimelineItem, {
+        title: "Feb 2019",
+        children: _jsxs(_components.p, {
+          children: [_jsx(_components.strong, {
+            children: "v16.8:"
+          }), " React Hooks 🤘"]
+        })
+      }), _jsx(TimelineItem, {
+        title: "Oct 2020",
+        children: _jsxs(_components.p, {
+          children: [_jsx(_components.strong, {
+            children: "v17"
+          }), ": 🤷‍♂️"]
+        })
+      }), _jsx(TimelineItem, {
+        title: "March 2022",
+        children: _jsxs(_components.p, {
+          children: [_jsx(_components.strong, {
+            children: "v18:"
+          }), " Concurrent React"]
+        })
+      })]
+    })]
+  });
+        }
+      },{
+        metadata: null,
+        slideComponent: (baseProps) => {
+          const props = {...baseProps, frontmatter: null };
+          const _components = {
+    code: "code",
+    pre: "pre",
+    ..._provideComponents(),
+    ...props.components
+  };
+  const {wrapper: MDXLayout} = _components;
+  return _jsx(MDXLayout, {...props, children: _jsx(_components.pre, {
+    children: _jsx(_components.code, {
+      className: "language-jsx",
+      children: "export default () => <div>Hello, world!</div>;\n"
+    })
+  })});
+        }
+      }
+    ]
+  };

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    /* Target node 14 */
+    "module": "ESNext",
+    "lib": ["ES2020"],
+    "target": "ES2020",
+    "skipLibCheck": true,
+
+    /* Transpile with esbuild */
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true,
+
+    // Options
+    "outDir": "dist",
+    "baseUrl": "./src",
+    "esModuleInterop": true,
+    "declaration": true,
+    "jsx": "react",
+    "types": ["./src/node.d.ts"]
+  },
+  "include": ["src/**/*"],
+  "files": ["src/style.d.ts"]
+}