Add HOC api and usage

heydoctor · May 12, 2020 · 9d532cf · 9d532cf
1 parent 7ccd21f
commit 9d532cf
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,6 @@ function App() {
 ```
 
 ### Hooks
-This is the recommended usage for apps using React 16.8+
 ```javascript
 function HeaderSection() {
   const context = {
@@ -56,9 +55,7 @@ function HeaderSection() {
 }
 ```
 
-## Coming Soon
 ### HOC
-For React < 16.8; Wrap your app with the provider, and access copy through props.
 ```javascript
 function HeaderSection({copy}) {
   return (

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/BodySection.tsx b/src/BodySection.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+import { withCopy, CopyType } from "./configureCopy";
+
+const BodySection = ({ copy }: { copy: CopyType }) => {
+  return <div>{copy.body}</div>;
+};
+export default withCopy(BodySection);
diff --git a/src/Copyful.tsx b/src/Copyful.tsx
@@ -26,9 +26,20 @@ export const createCopyful = <TCopy,>(defaultCopy: TCopy) => {
     return useMemo(() => interpolatedCopy, [interpolatedCopy]);
   };
 
+  const withCopy = (Component: any) => {
+    const WithCopy = React.forwardRef(function WithCopy(props: any, ref) {
+      const { innerRef, ...rest } = props;
+      const copy = useCopy() || defaultCopy; 
+      return <Component copy={copy} ref={innerRef || ref} {...rest} />;
+    });
+
+    return WithCopy;
+  };
+
   return {
     CopyfulProvider,
     useCopy,
+    withCopy,
   };
 };
 

diff --git a/src/Example.tsx b/src/Example.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { CopyfulProvider, getCopySomehow } from "./configureCopy";
+import HeaderSection from "./HeaderSection";
+import BodySection from "./BodySection";
+
+function App() {
+  return (
+    <CopyfulProvider copy={getCopySomehow("en-us")}>
+      <HeaderSection />{/* Example Using Hooks */}
+      <BodySection />{/* Example Using HOC */}
+    </CopyfulProvider>
+  );
+}
+
+export default App;
diff --git a/src/HeaderSection.tsx b/src/HeaderSection.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { useCopy } from "./configureCopy";
+
+const HeaderSection = () => {
+  const context = {
+    someNumber: 4815162342,
+    someString: "Hello World!",
+  };
+  const {
+    title,
+    subtitle,
+    nested: { dynamicValues },
+  } = useCopy(context).header;
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>{title}</h1>
+        <h2>{subtitle}</h2>
+        <p>{dynamicValues}</p>
+      </header>
+    </div>
+  );
+}
+
+export default HeaderSection;
diff --git a/src/configureCopy.ts b/src/configureCopy.ts
@@ -0,0 +1,25 @@
+import { createCopyful } from "./Copyful";
+import copy from "./copy.json";
+
+export interface LocalesType {
+  [key: string]: CopyType;
+}
+export interface CopyType {
+  header: {
+    title: string;
+    subtitle: string;
+    nested: {
+      dynamicValues: string;
+    };
+  };
+  body: string;
+}
+
+
+export const getCopySomehow = (locale: string) => {
+  return (copy as LocalesType)[locale];
+};
+
+export const { CopyfulProvider, useCopy, withCopy } = createCopyful(
+  getCopySomehow("1337")
+);
diff --git a/src/copy.json b/src/copy.json
@@ -6,7 +6,8 @@
       "nested": {
         "dynamicValues": "Yes, even dynamic values, like this number: {someNumber} and this string: {someString}."
       }
-    }
+    },
+    "body": "Product copy can become difficult to manage across product platforms as well as internal design and engineering tooling. Copy changes frequently and for many reasons (more clarity, typo, legal guidance, etc...) and engineering **must** be involved to make these changes. Sometimes the changes aren't straightforward - it becomes a hunt across repositories or copy has drifted across our web and native applications."
   },
   "1337": {
     "header": {
@@ -15,6 +16,7 @@
       "nested": {
         "dynamicValues": "y35, 3v3n dyn4m1c v4lu35, l1k3 7h15 numb3r: {someNumber} 4nd 7h15 57r1n6: {someString}."
       }
-    }
+    },
+    "body": "Product copy can become difficult to manage across product platforms as well as internal design and engineering tooling. Copy changes frequently and for many reasons (more clarity, typo, legal guidance, etc...) and engineering **must** be involved to make these changes. Sometimes the changes aren't straightforward - it becomes a hunt across repositories or copy has drifted across our web and native applications." 
   }
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import Example from "./Example";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<Example />, document.getElementById("root"));