feat: simplize props

Weaverse · Jun 12, 2023 · d3ddb18 · d3ddb18
1 parent e07d274
commit d3ddb18
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 56 deletions.
diff --git a/app/weaverse/components/button.tsx b/app/weaverse/components/button.tsx
@@ -9,10 +9,9 @@ type ButtonData = {
   text: string;
 };
 
-let Button = forwardRef<HTMLButtonElement, HydrogenComponentProps<ButtonData>>(
+let Button = forwardRef<HTMLButtonElement, HydrogenComponentProps & ButtonData>(
   (props, ref) => {
-    let {data, ...rest} = props;
-    let {type, text} = data;
+    let {type, text, ...rest} = props;
     return (
       <button ref={ref} {...rest} type={type}>
         {text}

diff --git a/app/weaverse/components/text.tsx b/app/weaverse/components/text.tsx
@@ -12,18 +12,15 @@ type TextData = {
 
 let Text = forwardRef<HTMLElement, HydrogenComponentProps<TextData>>(
   (props, ref) => {
-    let {data, ...rest} = props;
-    let {tagName, text} = data;
+    let {tagName, text, ...rest} = props;
     return React.createElement(tagName, {ref, ...rest}, text);
   },
 );
 
 Text.defaultProps = {
-  data: {
-    tagName: 'h1',
-    text: 'The quick brown fox jumps over the lazy dog',
-    className: 'title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900',
-  },
+  tagName: 'h1',
+  text: 'The quick brown fox jumps over the lazy dog',
+  className: 'title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900',
 };
 
 export let schema: HydrogenComponentSchema = {

diff --git a/app/weaverse/sections/image-with-text/_index.tsx b/app/weaverse/sections/image-with-text/_index.tsx
@@ -17,7 +17,9 @@ let ImageWithText = forwardRef<
   HTMLElement,
   HydrogenComponentProps<ImageWithTextData, ImageWithTextLoaderData>
 >((props, ref) => {
-  let {loaderData, data, ...rest} = props;
+  let {loaderData, image, ...rest} = props;
+  console.log('props', props);
+
   return (
     <section ref={ref} {...rest}>
       <div className="text-gray-600 body-font bg-slate-300">
@@ -29,7 +31,7 @@ let ImageWithText = forwardRef<
             <img
               className="object-cover object-center rounded"
               alt="hero"
-              src={loaderData?.thumbnailUrl || data.image}
+              src={loaderData?.thumbnailUrl || image}
             />
           </div>
         </div>
@@ -70,10 +72,8 @@ export let schema: HydrogenComponentSchema = {
 
 export let template: HydrogenComponentTemplate = {
   type: 'image-with-text',
-  data: {
-    image:
-      'https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main_c8ff0b5d-c712-429a-be00-b29bd55cbc9d.jpg?v=1655933474&width=100&height=125&crop=center',
-  },
+  image:
+    'https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main_c8ff0b5d-c712-429a-be00-b29bd55cbc9d.jpg?v=1655933474&width=100&height=125&crop=center',
   children: [
     {
       type: 'text',

diff --git a/app/weaverse/sections/image-with-text/actions.tsx b/app/weaverse/sections/image-with-text/actions.tsx
@@ -11,7 +11,7 @@ type ActionsData = {
 
 let Actions = forwardRef<HTMLDivElement, HydrogenComponentProps<ActionsData>>(
   (props, ref) => {
-    let {data, children, ...rest} = props;
+    let {children, ...rest} = props;
     return (
       <div ref={ref} {...rest} className="flex justify-center space-x-4">
         {children}
@@ -38,15 +38,11 @@ export let template: HydrogenComponentTemplate = {
   children: [
     {
       type: 'button',
-      data: {
-        text: 'Button',
-      },
+      text: 'Button',
     },
     {
       type: 'button',
-      data: {
-        text: 'Button 2',
-      },
+      text: 'Button 2',
     },
   ],
 };
diff --git a/app/weaverse/sections/testimonial/_index.tsx b/app/weaverse/sections/testimonial/_index.tsx
@@ -13,8 +13,7 @@ let Testimonial = forwardRef<
   HTMLElement,
   HydrogenComponentProps<TestimonialData>
 >((props, ref) => {
-  let {data, children, ...rest} = props;
-  let {heading} = data;
+  let {heading, children, ...rest} = props;
   return (
     <section ref={ref} {...rest} className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
@@ -30,9 +29,7 @@ let Testimonial = forwardRef<
 export default Testimonial;
 
 Testimonial.defaultProps = {
-  data: {
-    heading: 'Testimonials',
-  },
+  heading: 'Testimonials',
 };
 
 export let schema: HydrogenComponentSchema = {
@@ -57,24 +54,20 @@ export let template: HydrogenComponentTemplate = {
   children: [
     {
       type: 'testimonial--item',
-      data: {
-        content:
-          'Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90&apos;s microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.',
-        authorImage: 'https://dummyimage.com/106x106',
-        authorName: 'Jean Doe',
-        authorTitle: 'UI DEVELOPER',
-      },
+      content:
+        'Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90&apos;s microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.',
+      authorImage: 'https://dummyimage.com/106x106',
+      authorName: 'Jean Doe',
+      authorTitle: 'UI DEVELOPER',
     },
     {
       type: 'testimonial--item',
       parentId: '11',
-      data: {
-        content:
-          'Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90&apos;s microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.',
-        authorImage: 'https://dummyimage.com/106x106',
-        authorName: 'Katie Jenkins',
-        authorTitle: 'UX DEVELOPER',
-      },
+      content:
+        'Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90&apos;s microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.',
+      authorImage: 'https://dummyimage.com/106x106',
+      authorName: 'Katie Jenkins',
+      authorTitle: 'UX DEVELOPER',
     },
   ],
 };
diff --git a/app/weaverse/sections/testimonial/item.tsx b/app/weaverse/sections/testimonial/item.tsx
@@ -15,8 +15,7 @@ let TestimonialItem = forwardRef<
   HTMLDivElement,
   HydrogenComponentProps<TestimonialItemData>
 >((props, ref) => {
-  let {data, ...rest} = props;
-  let {content, authorImage, authorName, authorTitle} = data;
+  let {content, authorImage, authorName, authorTitle, ...rest} = props;
   return (
     <div ref={ref} {...rest} className="p-4 md:w-1/2 w-full">
       <div className="h-full bg-gray-100 p-8 rounded">
@@ -50,13 +49,11 @@ let TestimonialItem = forwardRef<
 export default TestimonialItem;
 
 TestimonialItem.defaultProps = {
-  data: {
-    content:
-      'Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90&apos;s microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.',
-    authorImage: 'https://dummyimage.com/106x106',
-    authorName: 'Holden Caulfield',
-    authorTitle: 'UI DEVELOPER',
-  },
+  content:
+    'Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90&apos;s microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.',
+  authorImage: 'https://dummyimage.com/106x106',
+  authorName: 'Holden Caulfield',
+  authorTitle: 'UI DEVELOPER',
 };
 
 export let schema: HydrogenComponentSchema = {

diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   "prettier": "@shopify/prettier-config",
   "dependencies": {
     "@headlessui/react": "^1.7.15",
-    "@remix-run/react": "1.16.1",
+    "@remix-run/react": "1.17.0",
     "@shopify/cli": "3.46.2",
     "@shopify/cli-hydrogen": "^4.2.1",
     "@shopify/hydrogen": "^2023.4.3",
@@ -39,8 +39,8 @@
     "worktop": "^0.7.3"
   },
   "devDependencies": {
-    "@remix-run/dev": "1.16.1",
-    "@remix-run/eslint-config": "1.16.1",
+    "@remix-run/dev": "1.17.0",
+    "@remix-run/eslint-config": "1.17.0",
     "@shopify/eslint-plugin": "^42.1.0",
     "@shopify/oxygen-workers-types": "^3.17.2",
     "@shopify/prettier-config": "^1.1.2",
@@ -50,15 +50,15 @@
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.4",
     "cross-env": "^7.0.3",
-    "eslint": "^8.41.0",
+    "eslint": "^8.42.0",
     "eslint-plugin-hydrogen": "0.12.3",
     "postcss": "^8.4.24",
     "postcss-import": "^15.1.0",
     "postcss-preset-env": "^8.4.2",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",
     "tailwindcss": "^3.3.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.3"
   },
   "engines": {
     "node": ">=16.13"