@factorearth/component-library 3.9.0 → 4.0.0-alpha.0

package/dist/Atoms/Accordion/Accordion.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Colors } from "../../Theme/types";
+interface Props {
+    color: Colors & string;
+    content: Content;
+}
+type Content = {
+    title: string;
+    content: string[];
+    imgs?: {
+        light: string;
+        dark: string;
+    };
+    icon?: string;
+};
+declare function Accordion(props: Props): React.JSX.Element;
+export default Accordion;

package/dist/Atoms/Accordion/Accordion.js

@@ -0,0 +1,40 @@
+import styled from "@emotion/styled";
+import React, { useState } from "react";
+import { FiChevronDown, FiChevronUp } from "react-icons/fi";
+import { Typography } from "../Typography/Typography";
+const Container = styled.div `
+	background: ${({ expanded, color }) => expanded ? color.background.tertiary : color.background.primary};
+	padding: 8px;
+	border-top: ${({ color }) => `${color.background.secondary} 1px solid`};
+`;
+const Header = styled.div `
+	display: flex;
+	padding: 8px;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	align-self: stretch;
+`;
+const ContentContainer = styled.div `
+		align-self: stretch;
+		padding-bottom: 16px;
+`;
+const Step = styled.div `
+		padding: 4px 16px;
+		align-self: stretch;
+`;
+function Accordion(props) {
+    const { color, content } = props;
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    function toggleDropdown() {
+        setDropdownOpen(!dropdownOpen);
+    }
+    return (React.createElement(Container, { color: color, expanded: dropdownOpen },
+        React.createElement(Header, { onClick: toggleDropdown },
+            dropdownOpen ? React.createElement(FiChevronUp, null) : React.createElement(FiChevronDown, null),
+            React.createElement(Typography, { textColor: color.text.primary, content: content.title, variant: "Paragraphy Body" })),
+        dropdownOpen && (React.createElement(ContentContainer, { color: color }, content.content.map(content => React.createElement(Step, { color: color },
+            React.createElement(Typography, { textColor: color.text.primary, content: content, variant: "Paragraphy Body" })))))));
+}
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

package/dist/Atoms/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../lib/Atoms/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAsC;eACnD,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;;eAEtF,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,YAAY;CACtE,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOxB,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGtB,CAAC;AAiBF,SAAS,SAAS,CAAC,KAAY;IAC9B,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,SAAS,cAAc;QACtB,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC;IAED,OAAO,CACN,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY;QAC9C,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAc;YAC7B,YAAY,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CAAC,CAAC,CAAC,oBAAC,aAAa,OAAG;YACnD,oBAAC,UAAU,IAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,iBAAiB,GAAI,CACzF;QACR,YAAY,IAAI,CAChB,oBAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,IAC7B,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK;YACjD,oBAAC,UAAU,IAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,iBAAiB,GAAI,CACrF,CAAC,CAOW,CACnB,CACU,CACZ,CAAC;AACH,CAAC;AAED,eAAe,SAAS,CAAC"}

package/dist/Atoms/Typography/Typography.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type TypographyVariants = "Jumbo" | "Heading 1" | "Heading 2" | "Heading 3" | "Heading 4" | "Paragraphy Body" | "Small" | "Legal" | "Label";
+interface TypographyProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    textColor: string;
+    variant: TypographyVariants;
+    content: string;
+}
+export declare const Typography: (props: TypographyProps) => React.JSX.Element;
+export {};

package/dist/Atoms/Typography/Typography.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import React from "react";
+import tokens from '../../Theme/tokens.json';
+// const text = tokens.global.Typography;
+const StyledText = styled.div `
+	color: ${({ textColor }) => textColor};
+	font-size: ${({ text }) => text.fontSize};
+  line-height: ${({ text }) => text.lineHeight};
+  font-weight: ${({ text }) => text.fontWeight};
+`;
+export const Typography = (props) => {
+    const { textColor, variant, content, ...htmlProps } = props;
+    const text = tokens.global.Typography[variant].value;
+    return (React.createElement(StyledText, { ...htmlProps, textColor: textColor, text: text, role: text.role, "aria-level": text?.ariaLevel ? parseInt(text.ariaLevel, 10) : undefined }, content));
+};
+//# sourceMappingURL=Typography.js.map

package/dist/Atoms/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../lib/Atoms/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAmB5C,yCAAyC;AAEzC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAA+C;UAClE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;cACxB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ;iBACxB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU;iBAC7B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACpD,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAyB,CAAC;IAEzE,OAAO,CACN,oBAAC,UAAU,OAAK,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,gBAAc,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,IAClJ,OAAO,CACI,CACb,CAAC;AACH,CAAC,CAAC"}

package/dist/Organisms/Tutorial/Tutorial.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import { Colors } from "../../Theme/types";
+export declare const TutorialOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    color: Colors;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TutorialWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    color: Colors;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HelpHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    color: Colors;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleAndExit: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    color: Colors;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    color: Colors;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContactContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    color: Colors;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+type Page = {
+    title: string;
+    "page-summary": string;
+    links: string[];
+    "user-flows": UserFlow[];
+    features: UserFlow[];
+};
+type UserFlow = {
+    title: string;
+    content: string[];
+    imgs: ImageSet;
+};
+type ImageSet = {
+    light: string;
+    dark: string;
+};
+interface TutorialModalProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    children: React.ReactNode;
+    color: Colors & string;
+    setOpen: (open: boolean) => void;
+    page: Page;
+}
+export declare const TutorialModal: (props: TutorialModalProps) => React.JSX.Element;
+export {};

package/dist/Organisms/Tutorial/Tutorial.js

@@ -0,0 +1,86 @@
+import styled from "@emotion/styled";
+import React from "react";
+import { FiX } from "react-icons/fi";
+import Accordion from "../../Atoms/Accordion/Accordion";
+import { Button } from "../../Atoms/Buttons/Button";
+import { Typography } from "../../Atoms/Typography/Typography";
+export const TutorialOverlay = styled.div `
+	background-color: ${({ color }) => color.background.secondary};
+	// opacity: 0.8;
+	position: absolute;
+	z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vw;
+  width: 100vw;
+`;
+export const TutorialWrapper = styled.div `
+  background-color: ${({ color }) => color.background.primary};
+  color: ${({ color }) => color.text.primary};
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  height: 500px;
+  width: 500px;
+  overflow: scroll;
+  border-radius: 4px;
+	box-shadow: ${({ color }) => `${color.background.secondary} 0px 5px 15px`};
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+export const HelpHeader = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  padding: 24px;
+  box-shadow: ${({ color }) => `${color.text.secondary} 0px 0px 4px 0px`};
+`;
+export const TitleAndExit = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+`;
+export const ContentContainer = styled.div `
+  padding: 0px 24px;
+  width: 90%;
+`;
+export const ContactContainer = styled.div `
+  background-color: ${({ color }) => color.background.tertiary};
+  color: ${({ color }) => color.text.primary};
+  display: flex;
+  padding: 24px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+`;
+export const TutorialModal = (props) => {
+    const { children, color, page, setOpen, ...htmlProps } = props;
+    return (React.createElement(TutorialOverlay, { color: color, onClick: () => setOpen(false) },
+        React.createElement(TutorialWrapper, { color: color, ...htmlProps },
+            React.createElement(HelpHeader, { color: color },
+                React.createElement(TitleAndExit, { color: color },
+                    React.createElement(Typography, { textColor: color.text.primary, content: page.title, variant: "Heading 3" }),
+                    React.createElement(FiX, { onClick: () => setOpen(false), size: 24 })),
+                React.createElement(Typography, { textColor: color.text.primary, content: page["page-summary"], variant: "Paragraphy Body" })),
+            React.createElement(ContentContainer, { color: color },
+                React.createElement(Typography, { textColor: color.text.primary, content: "Common User Flows", variant: "Heading 4", style: { paddingBottom: "8px" } }),
+                page["user-flows"].map((flow) => React.createElement(Accordion, { color: color, content: flow })),
+                React.createElement(Typography, { textColor: color.text.primary, content: "Page Features", variant: "Heading 4", style: { paddingBottom: "8px" } }),
+                page.features.map((feature) => React.createElement(Accordion, { color: color, content: feature }))),
+            React.createElement(ContactContainer, { color: color },
+                React.createElement(Typography, { textColor: color.text.primary, content: "Please ask further questions, or reach out for additional support by emailing", variant: "Label" }),
+                React.createElement(Typography, { textColor: color.text.primary, content: "devs@factorearth.com", variant: "Heading 4" }),
+                React.createElement(Button, { colorPalette: color, variant: "filled" }, "Report Bug")))));
+};
+//needs to take in content from the json like the drawer in record
+//use the styles from the modal container I think
+//drop downs are similar to the exsiting ones in Record but some styling changes need to happen, plus icons are added
+//# sourceMappingURL=Tutorial.js.map

package/dist/Organisms/Tutorial/Tutorial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tutorial.js","sourceRoot":"","sources":["../../../lib/Organisms/Tutorial/Tutorial.tsx"],"names":[],"mappings":"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"}

package/dist/Theme/tokens.json

@@ -164,16 +164,102 @@
             "value": "20",
             "type": "borderRadius"
         },
-        "Jumbo": {
-            "value": {
-                "fontWeight": "Bold",
-                "fontSize": "61",
-                "letterSpacing": "0",
-                "paragraphSpacing": "0",
-                "fontFamily": "{System .SF Compact}",
-                "lineHeight": "{133}"
-            },
-            "type": "typography"
+        "Typography": {
+            "Jumbo": {
+                "value": {
+                    "role": "heading",
+                    "ariaLevel": "1",
+                    "fontWeight": "700",
+                    "fontSize": "61px",
+                    "letterSpacing": "0",
+                    "lineHeight": "133px"
+                },
+                "type": "typography"
+            },
+            "Heading 1": {
+                "value": {
+                    "role": "heading",
+                    "ariaLevel": "1",
+                    "fontSize": "47px",
+                    "lineHeight": "133%",
+                    "letterSpacing": "0",
+                    "fontWeight": "700"
+                },
+                "type": "typography"
+            },
+            "Heading 2": {
+                "value": {
+                    "role": "heading",
+                    "ariaLevel": "2",
+                    "fontSize": "36px",
+                    "lineHeight": "133%",
+                    "letterSpacing": "0",
+                    "fontWeight": "700"
+                },
+                "type": "typography"
+            },
+            "Heading 3": {
+                "value": {
+                    "role": "heading",
+                    "ariaLevel": "3",
+                    "fontWeight": "700",
+                    "fontSize": "27px",
+                    "lineHeight": "133%",
+                    "letterSpacing": "0"
+                },
+                "type": "typography"
+            },
+            "Heading 4": {
+                "value": {
+                    "role": "heading",
+                    "ariaLevel": "4",
+                    "fontSize": "21px",
+                    "lineHeight": "133%",
+                    "letterSpacing": "0",
+                    "fontWeight": "700"
+                },
+                "type": "typography"
+            },
+            "Paragraphy Body": {
+                "value": {
+                    "role": "paragraph",
+                    "fontSize": "16px",
+                    "lineHeight": "133%",
+                    "letterSpacing": "0",
+                    "fontWeight": "400"
+                },
+                "type": "typography"
+            },
+            "Small": {
+                "value": {
+                    "role": "paragraph",
+                    "fontSize": "14px",
+                    "lineHeight": "133%",
+                    "letterSpacing": "0",
+                    "fontWeight": "400"
+                },
+                "type": "typography"
+            },
+            "Label": {
+                "value": {
+                    "role": "paragraph",
+                    "fontSize": "12px",
+                    "lineHeight": "133%",
+                    "letterSpacing": "0",
+                    "fontWeight": "700"
+                },
+                "type": "typography"
+            },
+            "Legal": {
+                "value": {
+                    "role": "paragraph",
+                    "fontSize": "9px",
+                    "lineHeight": "133%",
+                    "fontWeight": "400",
+                    "letterSpacing": "0"
+                },
+                "type": "typography"
+            }
         },
         "System ": {
             "SF Compact": {
@@ -184,94 +270,6 @@
         "Thin": {
             "value": ".5",
             "type": "borderWidth"
-        },
-        "Heading 1": {
-            "value": {
-                "fontFamily": "{System .SF Compact}",
-                "fontWeight": "Bold",
-                "fontSize": "47",
-                "lineHeight": "{133}",
-                "letterSpacing": "0",
-                "paragraphSpacing": "0"
-            },
-            "type": "typography"
-        },
-        "Heading 2": {
-            "value": {
-                "fontFamily": "{System .SF Compact}",
-                "fontWeight": "Bold",
-                "fontSize": "36",
-                "lineHeight": "{133}",
-                "letterSpacing": "0",
-                "paragraphSpacing": "0"
-            },
-            "type": "typography"
-        },
-        "Heading 3": {
-            "value": {
-                "fontFamily": "{System .SF Compact}",
-                "fontWeight": "Bold",
-                "fontSize": "27",
-                "lineHeight": "{133}",
-                "letterSpacing": "0",
-                "paragraphSpacing": "0"
-            },
-            "type": "typography"
-        },
-        "Heading 4": {
-            "value": {
-                "fontFamily": "{System .SF Compact}",
-                "fontWeight": "Bold",
-                "fontSize": "21",
-                "lineHeight": "{133}",
-                "letterSpacing": "0",
-                "paragraphSpacing": "0"
-            },
-            "type": "typography"
-        },
-        "Paragraphy Body": {
-            "value": {
-                "fontFamily": "{System .SF Compact}",
-                "fontWeight": "Regular",
-                "fontSize": "16",
-                "lineHeight": "{133}",
-                "letterSpacing": "0",
-                "paragraphSpacing": "0"
-            },
-            "type": "typography"
-        },
-        "Small": {
-            "value": {
-                "fontFamily": "{System .SF Compact}",
-                "fontWeight": "Regular",
-                "fontSize": "14",
-                "lineHeight": "{133}",
-                "letterSpacing": "0",
-                "paragraphSpacing": "0"
-            },
-            "type": "typography"
-        },
-        "Label": {
-            "value": {
-                "fontFamily": "{System .SF Compact}",
-                "fontWeight": "Bold",
-                "fontSize": "12",
-                "lineHeight": "{133}",
-                "letterSpacing": "0",
-                "paragraphSpacing": "0"
-            },
-            "type": "typography"
-        },
-        "Legal": {
-            "value": {
-                "fontFamily": "{System .SF Compact}",
-                "fontWeight": "Regular",
-                "fontSize": "9",
-                "lineHeight": "{133}",
-                "paragraphSpacing": "0",
-                "paragraphIndent": "0"
-            },
-            "type": "typography"
         }
     },
     "$themes": [],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@factorearth/component-library",
-	"version": "3.9.0",
+	"version": "4.0.0-alpha.0",
 	"description": " A storybook component library for FactorEarth",
 	"author": "madtrx <marlin.makori@gmail.com>",
 	"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
@@ -46,7 +46,7 @@
 		"access": "public",
 		"registry": "https://registry.npmjs.org/"
 	},
-	"gitHead": "7783350e94972eb05907add21999c3f30452b582",
+	"gitHead": "93fb81b17bee36e276d0a3d74493a6488bab1247",
 	"dependencies": {
 		"@emotion/react": "^11.13.0",
 		"@emotion/styled": "^11.13.0",