rc up (#54)

* update checkout styles * big styles and try to rehydrate on checkout * fix leloader * whoops * cleanup * reset error before fetching * temp * Refactor useSchematicFlag to use useSyncExternalStore and add useSchematicIsPending hook * Improve SchematicContext to ensure client exists * Fix error state display * update schematic-js * finish? styles * version up * cleanup --------- Co-authored-by: Ben Papillon <[email protected]>
SchematicHQ · Sep 17, 2024 · fe9db15 · fe9db15
1 parent ee1c21f
commit fe9db15
Show file tree

Hide file tree

Showing 25 changed files with 774 additions and 654 deletions.
diff --git a/react/.eslintrc.cjs b/react/.eslintrc.cjs
@@ -16,6 +16,9 @@ module.exports = {
   plugins: ["import"],
   rules: {
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-unused-vars": ["error", {ignoreRestSiblings: true}],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { ignoreRestSiblings: true },
+    ],
   },
 };
diff --git a/react/package.json b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-react",
-  "version": "0.2.0-rc.5",
+  "version": "0.2.0-rc.6",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -29,7 +29,7 @@
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@schematichq/schematic-js": "^0.1.13",
+    "@schematichq/schematic-js": "^0.1.14",
     "@stripe/react-stripe-js": "^2.8.0",
     "@stripe/stripe-js": "^4.3.0",
     "lodash.merge": "^4.6.2",

diff --git a/react/src/components/elements/included-features/IncludedFeatures.tsx b/react/src/components/elements/included-features/IncludedFeatures.tsx
@@ -1,8 +1,9 @@
 import { forwardRef, useMemo } from "react";
+import { useTheme } from "styled-components";
 import { useEmbed } from "../../../hooks";
 import { type FontStyle } from "../../../context";
 import type { RecursivePartial, ElementProps } from "../../../types";
-import { lighten, darken, hexToHSL } from "../../../utils";
+import { hexToHSL } from "../../../utils";
 import { Box, Flex, IconRound, Text, type IconNameTypes } from "../../ui";
 
 interface DesignProps {
@@ -35,12 +36,12 @@ function resolveDesignProps(props: RecursivePartial<DesignProps>): DesignProps {
     },
     icons: {
       isVisible: props.icons?.isVisible ?? true,
-      fontStyle: props.icons?.fontStyle ?? "heading3",
+      fontStyle: props.icons?.fontStyle ?? "heading5",
       style: props.icons?.style ?? "light",
     },
     entitlement: {
       isVisible: props.entitlement?.isVisible ?? true,
-      fontStyle: props.entitlement?.fontStyle ?? "heading5",
+      fontStyle: props.entitlement?.fontStyle ?? "text",
     },
     usage: {
       isVisible: props.usage?.isVisible ?? true,
@@ -59,7 +60,8 @@ export const IncludedFeatures = forwardRef<
 >(({ className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
 
-  const { data, settings } = useEmbed();
+  const theme = useTheme();
+  const { data } = useEmbed();
 
   const features = useMemo(() => {
     return (data.featureUsage?.features || []).map(
@@ -89,17 +91,19 @@ export const IncludedFeatures = forwardRef<
     );
   }, [data.featureUsage]);
 
+  const isLightBackground = useMemo(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+
   return (
     <Flex ref={ref} className={className} $flexDirection="column" $gap="1.5rem">
       {props.header.isVisible && (
         <Box>
           <Text
-            $font={settings.theme.typography[props.header.fontStyle].fontFamily}
-            $size={settings.theme.typography[props.header.fontStyle].fontSize}
-            $weight={
-              settings.theme.typography[props.header.fontStyle].fontWeight
-            }
-            $color={settings.theme.typography[props.header.fontStyle].color}
+            $font={theme.typography[props.header.fontStyle].fontFamily}
+            $size={theme.typography[props.header.fontStyle].fontSize}
+            $weight={theme.typography[props.header.fontStyle].fontWeight}
+            $color={theme.typography[props.header.fontStyle].color}
           >
             {props.header.text}
           </Text>
@@ -131,30 +135,23 @@ export const IncludedFeatures = forwardRef<
                     name={feature.icon as IconNameTypes}
                     size="sm"
                     colors={[
-                      settings.theme.primary,
-                      `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
+                      theme.primary,
+                      isLightBackground
+                        ? "hsla(0, 0%, 0%, 0.0625)"
+                        : "hsla(0, 0%, 100%, 0.25)",
                     ]}
                   />
                 )}
 
                 {feature?.name && (
                   <Flex $alignItems="center">
                     <Text
-                      $font={
-                        settings.theme.typography[props.icons.fontStyle]
-                          .fontFamily
-                      }
-                      $size={
-                        settings.theme.typography[props.icons.fontStyle]
-                          .fontSize
-                      }
+                      $font={theme.typography[props.icons.fontStyle].fontFamily}
+                      $size={theme.typography[props.icons.fontStyle].fontSize}
                       $weight={
-                        settings.theme.typography[props.icons.fontStyle]
-                          .fontWeight
-                      }
-                      $color={
-                        settings.theme.typography[props.icons.fontStyle].color
+                        theme.typography[props.icons.fontStyle].fontWeight
                       }
+                      $color={theme.typography[props.icons.fontStyle].color}
                     >
                       {feature.name}
                     </Text>
@@ -168,20 +165,17 @@ export const IncludedFeatures = forwardRef<
                     <Text
                       as={Box}
                       $font={
-                        settings.theme.typography[props.entitlement.fontStyle]
-                          .fontFamily
+                        theme.typography[props.entitlement.fontStyle].fontFamily
                       }
                       $size={
-                        settings.theme.typography[props.entitlement.fontStyle]
-                          .fontSize
+                        theme.typography[props.entitlement.fontStyle].fontSize
                       }
                       $weight={
-                        settings.theme.typography[props.entitlement.fontStyle]
-                          .fontWeight
+                        theme.typography[props.entitlement.fontStyle].fontWeight
                       }
+                      $lineHeight={1.5}
                       $color={
-                        settings.theme.typography[props.entitlement.fontStyle]
-                          .color
+                        theme.typography[props.entitlement.fontStyle].color
                       }
                     >
                       {typeof allocation === "number"
@@ -193,21 +187,13 @@ export const IncludedFeatures = forwardRef<
                   {props.usage.isVisible && (
                     <Text
                       as={Box}
-                      $font={
-                        settings.theme.typography[props.usage.fontStyle]
-                          .fontFamily
-                      }
-                      $size={
-                        settings.theme.typography[props.usage.fontStyle]
-                          .fontSize
-                      }
+                      $font={theme.typography[props.usage.fontStyle].fontFamily}
+                      $size={theme.typography[props.usage.fontStyle].fontSize}
                       $weight={
-                        settings.theme.typography[props.usage.fontStyle]
-                          .fontWeight
-                      }
-                      $color={
-                        settings.theme.typography[props.usage.fontStyle].color
+                        theme.typography[props.usage.fontStyle].fontWeight
                       }
+                      $lineHeight={1.5}
+                      $color={theme.typography[props.usage.fontStyle].color}
                     >
                       {typeof allocation === "number"
                         ? `${usage} of ${allocation} used`

diff --git a/react/src/components/elements/invoices/Invoices.tsx b/react/src/components/elements/invoices/Invoices.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useMemo } from "react";
-import { useEmbed } from "../../../hooks";
+import { useTheme } from "styled-components";
 import { type FontStyle } from "../../../context";
 import type { RecursivePartial, ElementProps } from "../../../types";
 import { toPrettyDate } from "../../../utils";
@@ -63,7 +63,7 @@ export const Invoices = forwardRef<
 >(({ className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
 
-  const { settings } = useEmbed();
+  const theme = useTheme();
 
   const { invoices } = useMemo(() => {
     /**
@@ -89,14 +89,10 @@ export const Invoices = forwardRef<
         {props.header.isVisible && (
           <Flex $justifyContent="space-between" $alignItems="center">
             <Text
-              $font={
-                settings.theme.typography[props.header.fontStyle].fontFamily
-              }
-              $size={settings.theme.typography[props.header.fontStyle].fontSize}
-              $weight={
-                settings.theme.typography[props.header.fontStyle].fontWeight
-              }
-              $color={settings.theme.typography[props.header.fontStyle].color}
+              $font={theme.typography[props.header.fontStyle].fontFamily}
+              $size={theme.typography[props.header.fontStyle].fontSize}
+              $weight={theme.typography[props.header.fontStyle].fontWeight}
+              $color={theme.typography[props.header.fontStyle].color}
             >
               Invoices
             </Text>
@@ -114,20 +110,12 @@ export const Invoices = forwardRef<
                 <Flex key={index} $justifyContent="space-between">
                   {props.date.isVisible && (
                     <Text
-                      $font={
-                        settings.theme.typography[props.date.fontStyle]
-                          .fontFamily
-                      }
-                      $size={
-                        settings.theme.typography[props.date.fontStyle].fontSize
-                      }
+                      $font={theme.typography[props.date.fontStyle].fontFamily}
+                      $size={theme.typography[props.date.fontStyle].fontSize}
                       $weight={
-                        settings.theme.typography[props.date.fontStyle]
-                          .fontWeight
-                      }
-                      $color={
-                        settings.theme.typography[props.date.fontStyle].color
+                        theme.typography[props.date.fontStyle].fontWeight
                       }
+                      $color={theme.typography[props.date.fontStyle].color}
                     >
                       {toPrettyDate(date)}
                     </Text>
@@ -136,20 +124,13 @@ export const Invoices = forwardRef<
                   {props.amount.isVisible && (
                     <Text
                       $font={
-                        settings.theme.typography[props.amount.fontStyle]
-                          .fontFamily
-                      }
-                      $size={
-                        settings.theme.typography[props.amount.fontStyle]
-                          .fontSize
+                        theme.typography[props.amount.fontStyle].fontFamily
                       }
+                      $size={theme.typography[props.amount.fontStyle].fontSize}
                       $weight={
-                        settings.theme.typography[props.amount.fontStyle]
-                          .fontWeight
-                      }
-                      $color={
-                        settings.theme.typography[props.amount.fontStyle].color
+                        theme.typography[props.amount.fontStyle].fontWeight
                       }
+                      $color={theme.typography[props.amount.fontStyle].color}
                     >
                       ${amount}
                     </Text>
@@ -164,16 +145,10 @@ export const Invoices = forwardRef<
             <Icon name="chevron-down" style={{ color: "#D0D0D0" }} />
 
             <Text
-              $font={
-                settings.theme.typography[props.collapse.fontStyle].fontFamily
-              }
-              $size={
-                settings.theme.typography[props.collapse.fontStyle].fontSize
-              }
-              $weight={
-                settings.theme.typography[props.collapse.fontStyle].fontWeight
-              }
-              $color={settings.theme.typography[props.collapse.fontStyle].color}
+              $font={theme.typography[props.collapse.fontStyle].fontFamily}
+              $size={theme.typography[props.collapse.fontStyle].fontSize}
+              $weight={theme.typography[props.collapse.fontStyle].fontWeight}
+              $color={theme.typography[props.collapse.fontStyle].color}
             >
               See all
             </Text>