fix up default contract selection

jpmorganchase · Feb 10, 2025 · 7d3edfc · 7d3edfc
1 parent 25b5207
commit 7d3edfc
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 36 deletions.
diff --git a/packages/style-contract/src/StyleContractProvider.tsx b/packages/style-contract/src/StyleContractProvider.tsx
@@ -93,57 +93,66 @@ export function StyleContractProvider<T extends Contract>({
   defaultContract,
   children,
 }: React.PropsWithChildren<StyleContractProviderProps<T>>) {
-  const [contract, setContractState] = useState(defaultContract);
+  const [contract, setContractState] = useState<StyleContract<T> | null>(
+    defaultContract,
+  );
 
   const setContract = (newContract: StyleContract<T> | null) => {
-    setContractState(newContract || defaultContract);
+    setContractState(newContract);
   };
 
   const providerClass = `salt-style-contract-${providerInstanceCount++}`;
   const { matchedBreakpoints } = useBreakpoint();
   const breakpoints = useBreakpoints();
 
-  const componentCss = useMemo(
-    () =>
-      generateCustomCssFromContract<T>(
-        contract.contract.component,
-        matchedBreakpoints,
-        providerClass,
-        breakpoints,
-      ),
-    [
+  const componentCss = useMemo(() => {
+    if (!contract) {
+      return;
+    }
+    return generateCustomCssFromContract<T>(
+      contract.contract.component,
+      matchedBreakpoints,
+      providerClass,
       breakpoints,
-      contract?.contract.component,
+    );
+  }, [
+    breakpoints,
+    contract?.contract?.component,
+    matchedBreakpoints,
+    providerClass,
+  ]);
+  const systemCss = useMemo(() => {
+    if (!contract) {
+      return;
+    }
+    return generateSystemCssFromContract<T>(
+      contract.contract.system,
       matchedBreakpoints,
       providerClass,
-    ],
-  );
-  const systemCss = useMemo(
-    () =>
-      generateSystemCssFromContract<T>(
-        contract.contract.system,
-        matchedBreakpoints,
-        providerClass,
-        breakpoints,
-      ),
-    [breakpoints, contract?.contract.system, matchedBreakpoints, providerClass],
-  );
+      breakpoints,
+    );
+  }, [
+    breakpoints,
+    contract?.contract?.system,
+    matchedBreakpoints,
+    providerClass,
+  ]);
 
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: `component ${providerClass}`,
-    css: componentCss,
+    css: componentCss || "",
     window: targetWindow,
   });
   useComponentCssInjection({
     testId: `system ${providerClass}`,
-    css: systemCss,
+    css: systemCss || "",
     window: targetWindow,
   });
 
   return (
     <StyleContractContext.Provider
-      value={{ contract: contract.contract, setContract }}
+      value={{ contract: contract?.contract, setContract }}
     >
       <div className={providerClass}>{children}</div>
     </StyleContractContext.Provider>

diff --git a/...yle-contract/stories/RillaboomContract.ts → ...yle-contract/stories/GreatTuskContract.ts b/...yle-contract/stories/RillaboomContract.ts → ...yle-contract/stories/GreatTuskContract.ts
@@ -4,6 +4,6 @@ type SystemProperties = {
   "salt-text-action-textTransform"?: "capitalize";
 };
 
-export interface RillaboomContract {
+export interface GreatTuskContract {
   system?: ResponsiveProp<SystemProperties>;
 }
diff --git a/.../style-contract/stories/GoodraContract.ts → .../style-contract/stories/RaichuContract.ts b/.../style-contract/stories/GoodraContract.ts → .../style-contract/stories/RaichuContract.ts
@@ -4,6 +4,6 @@ type SystemProperties = {
   "salt-text-action-textTransform"?: "capitalize";
 };
 
-export interface GoodraContract {
+export interface RaichuContract {
   system?: ResponsiveProp<SystemProperties>;
 }
diff --git a/packages/style-contract/stories/styleContractProvider.stories.tsx b/packages/style-contract/stories/styleContractProvider.stories.tsx
@@ -5,8 +5,8 @@ import {
   StyleContractProvider,
 } from "@salt-ds/style-contract";
 import type { Meta, StoryFn } from "@storybook/react";
-import type { GoodraContract } from "./GoodraContract";
-import type { RillaboomContract } from "./RillaboomContract";
+import type { GreatTuskContract } from "./GreatTuskContract";
+import type { RaichuContract } from "./RaichuContract";
 import type { SampleContract } from "./SampleContract";
 
 const defaultContract = new StyleContract<SampleContract>({
@@ -224,15 +224,15 @@ export const MultipleContracts: StoryFn<typeof StyleContractProvider> = (
       },
     },
   });
-  const rillaboomProposedContract = new StyleContract<RillaboomContract>({
+  const raichuProposedContract = new StyleContract<RaichuContract>({
     name: "proposed",
     contract: {
       system: {
         "salt-text-action-textTransform": "capitalize",
       },
     },
   });
-  const goodraProposedContract = new StyleContract<GoodraContract>({
+  const greatTuskProposedContract = new StyleContract<GreatTuskContract>({
     name: "proposed",
     contract: {
       system: {
@@ -241,15 +241,15 @@ export const MultipleContracts: StoryFn<typeof StyleContractProvider> = (
     },
   });
   return (
-    <StyleContractProvider {...args} defaultContract={defaultContract}>
+    <StyleContractProvider {...args}>
       <StackLayout>
         <Button>Sample Button</Button>
         <Input value={999.999} />
         <StyleContractDropdown
           contracts={[
             { owner: "Salt", contracts: [saltTestContract] },
-            { owner: "Rillaboom", contracts: [rillaboomProposedContract] },
-            { owner: "Goodra", contracts: [goodraProposedContract] },
+            { owner: "Raichu", contracts: [raichuProposedContract] },
+            { owner: "Great Tusk", contracts: [greatTuskProposedContract] },
           ]}
         />
       </StackLayout>