From 93fd13165789a6f56bbe0a918e3999da3cc38def Mon Sep 17 00:00:00 2001 From: Paul <phanminh65@gmail.com> Date: Thu, 21 Sep 2023 10:19:53 +0700 Subject: [PATCH] rebuild demo --- app/weaverse/components/.tailwindkeep.tsx | 1 - app/weaverse/components/button.tsx | 73 --------------- app/weaverse/components/index.ts | 9 -- app/weaverse/components/main.tsx | 25 ------ app/weaverse/components/text.tsx | 63 ------------- app/weaverse/config.js | 26 ------ app/weaverse/csp.server.ts | 25 ------ app/weaverse/loader.server.ts | 11 --- .../sections/image-with-text/_index.tsx | 85 ------------------ .../sections/image-with-text/actions.tsx | 31 ------- .../sections/image-with-text/index.ts | 7 -- app/weaverse/sections/index.ts | 7 -- app/weaverse/sections/testimonial/_index.tsx | 63 ------------- app/weaverse/sections/testimonial/index.ts | 7 -- app/weaverse/sections/testimonial/item.tsx | 89 ------------------- 15 files changed, 522 deletions(-) delete mode 100644 app/weaverse/components/.tailwindkeep.tsx delete mode 100644 app/weaverse/components/button.tsx delete mode 100644 app/weaverse/components/index.ts delete mode 100644 app/weaverse/components/main.tsx delete mode 100644 app/weaverse/components/text.tsx delete mode 100644 app/weaverse/config.js delete mode 100644 app/weaverse/csp.server.ts delete mode 100644 app/weaverse/loader.server.ts delete mode 100644 app/weaverse/sections/image-with-text/_index.tsx delete mode 100644 app/weaverse/sections/image-with-text/actions.tsx delete mode 100644 app/weaverse/sections/image-with-text/index.ts delete mode 100644 app/weaverse/sections/index.ts delete mode 100644 app/weaverse/sections/testimonial/_index.tsx delete mode 100644 app/weaverse/sections/testimonial/index.ts delete mode 100644 app/weaverse/sections/testimonial/item.tsx diff --git a/app/weaverse/components/.tailwindkeep.tsx b/app/weaverse/components/.tailwindkeep.tsx deleted file mode 100644 index 256ed3f..0000000 --- a/app/weaverse/components/.tailwindkeep.tsx +++ /dev/null @@ -1 +0,0 @@ -export default () => <div className="text-green-200"></div>; diff --git a/app/weaverse/components/button.tsx b/app/weaverse/components/button.tsx deleted file mode 100644 index cf114d5..0000000 --- a/app/weaverse/components/button.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import type { - HydrogenComponentProps, - HydrogenComponentSchema, -} from '@weaverse/hydrogen'; -import {forwardRef, type ButtonHTMLAttributes} from 'react'; - -interface ButtonProps extends HydrogenComponentProps { - _type: ButtonHTMLAttributes<HTMLButtonElement>['type']; - text: string; - clickAction: 'none' | 'openLink'; - linkTo: string; - openLinkInNewTab: boolean; -} - -let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => { - let {_type, text, clickAction, linkTo, openLinkInNewTab, ...rest} = props; - rest.className ??= - 'inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg'; - return ( - <button ref={ref} {...rest} type={_type}> - {text} - </button> - ); -}); - -export let schema: HydrogenComponentSchema = { - type: 'button', - title: 'Button', - inspector: [ - { - group: 'Button', - inputs: [ - { - type: 'text', - label: 'Button text', - name: 'text', - placeholder: 'Button text', - defaultValue: 'Click me', - }, - { - type: 'select', - label: 'Click action', - name: 'clickAction', - configs: { - options: [ - {value: 'none', label: 'None'}, - {value: 'openLink', label: 'Open link'}, - ], - }, - defaultValue: 'none', - }, - { - type: 'text', - label: 'Link to', - name: 'linkTo', - placeholder: 'https://example.com', - condition: 'clickAction.eq.openLink', - defaultValue: 'https://example.com', - }, - { - type: 'switch', - label: 'Open in new tab', - name: 'openLinkInNewTab', - condition: 'clickAction.eq.openLink', - defaultValue: false, - }, - ], - }, - ], - toolbar: ['general-settings', ['duplicate', 'delete']], -}; - -export default Button; diff --git a/app/weaverse/components/index.ts b/app/weaverse/components/index.ts deleted file mode 100644 index 3e55208..0000000 --- a/app/weaverse/components/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as main from '~/weaverse/components/main'; -import * as text from '~/weaverse/components/text'; -import * as button from '~/weaverse/components/button'; - -export let components = { - main, - text, - button, -}; diff --git a/app/weaverse/components/main.tsx b/app/weaverse/components/main.tsx deleted file mode 100644 index 8f60141..0000000 --- a/app/weaverse/components/main.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { - useThemeSetting, - type HydrogenComponentProps, - type HydrogenComponentSchema, -} from '@weaverse/hydrogen'; -import {forwardRef} from 'react'; - -interface MainProps extends HydrogenComponentProps {} - -let Main = forwardRef<HTMLDivElement, MainProps>((props, ref) => { - let themeSetting = useThemeSetting(); - console.log('Main', themeSetting); - - let {...rest} = props; - return <div ref={ref} {...rest} />; -}); - -export default Main; - -export let schema: HydrogenComponentSchema = { - type: 'main', - title: 'Main', - inspector: [], - toolbar: ['general-settings', ['duplicate', 'delete']], -}; diff --git a/app/weaverse/components/text.tsx b/app/weaverse/components/text.tsx deleted file mode 100644 index 0b556b2..0000000 --- a/app/weaverse/components/text.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import type { - HydrogenComponentProps, - HydrogenComponentSchema, -} from '@weaverse/hydrogen'; -import React from 'react'; -import {forwardRef} from 'react'; - -interface TextProps extends HydrogenComponentProps { - tagName: string; - text: string; -} - -let Text = forwardRef<HTMLElement, TextProps>((props, ref) => { - let {tagName, text, ...rest} = props; - rest.className ??= - 'title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900'; - return React.createElement( - tagName || 'div', - {ref, ...rest}, - text || 'Lorem Ipsum', - ); -}); - -export let schema: HydrogenComponentSchema = { - type: 'text', - title: 'Text', - inspector: [ - { - group: 'Text', - inputs: [ - { - type: 'text', - label: 'Text', - name: 'text', - placeholder: 'Enter text here', - defaultValue: 'The quick brown fox jumps over the lazy dog', - }, - { - type: 'select', - label: 'HTML tag', - name: 'tagName', - configs: { - options: [ - {value: 'h1', label: 'Heading 1'}, - {value: 'h2', label: 'Heading 2'}, - {value: 'h3', label: 'Heading 3'}, - {value: 'h4', label: 'Heading 4'}, - {value: 'h5', label: 'Heading 5'}, - {value: 'h6', label: 'Heading 6'}, - {value: 'p', label: 'Paragraph'}, - ], - }, - defaultValue: 'h2', - helpText: - 'This setting change the HTML tag only, not the style of the element.', - }, - ], - }, - ], - toolbar: ['general-settings', ['duplicate', 'delete']], -}; - -export default Text; diff --git a/app/weaverse/config.js b/app/weaverse/config.js deleted file mode 100644 index 4d24bb1..0000000 --- a/app/weaverse/config.js +++ /dev/null @@ -1,26 +0,0 @@ -import {components} from './components'; -import {sections} from './sections'; -let allComponents = { - ...components, - ...sections, -}; - -/** @type {import('@weaverse/hydrogen').WeaverseHydrogenRootProps)} */ -export let config = { - components: allComponents, - themeSchema: [ - { - group: 'Weaverse', - inputs: [ - { - name: 'primaryColor', - type: 'color', - label: 'Primary Color', - value: '#000000', - }, - ], - }, - ], -}; - -export default config; diff --git a/app/weaverse/csp.server.ts b/app/weaverse/csp.server.ts deleted file mode 100644 index 01e67c5..0000000 --- a/app/weaverse/csp.server.ts +++ /dev/null @@ -1,25 +0,0 @@ -export function getWeaverseCsp(request: Request) { - let url = new URL(request.url); - // get weaverse host from query params - let weaverseHost = url.searchParams.get('weaverseHost'); - let weaverseHosts = ['https://*.weaverse.io']; - if (weaverseHost) { - weaverseHosts.push(weaverseHost); - } - return { - frameAncestors: weaverseHosts, - defaultSrc: [ - "'self'", - 'https://cdn.shopify.com', - 'https://shopify.com', - 'https://*.youtube.com', - ...weaverseHosts, - ], - styleSrc: [ - "'self'", - "'unsafe-inline'", - 'https://cdn.shopify.com', - ...weaverseHosts, - ], - }; -} diff --git a/app/weaverse/loader.server.ts b/app/weaverse/loader.server.ts deleted file mode 100644 index 50de6a0..0000000 --- a/app/weaverse/loader.server.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {LoaderArgs} from '@shopify/remix-oxygen'; -import {type WeaverseLoaderConfigs, weaverseLoader} from '@weaverse/hydrogen'; -import {countries} from '~/data/countries'; -import {components} from './components'; - -export function loadWeaversePage( - args: LoaderArgs, - configs?: WeaverseLoaderConfigs, -) { - return weaverseLoader(args, components, countries, configs); -} diff --git a/app/weaverse/sections/image-with-text/_index.tsx b/app/weaverse/sections/image-with-text/_index.tsx deleted file mode 100644 index d2e5bad..0000000 --- a/app/weaverse/sections/image-with-text/_index.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import type { - HydrogenComponentProps, - HydrogenComponentSchema, - WeaverseLoaderArgs, -} from '@weaverse/hydrogen'; -import {fetchWithServerCache} from '@weaverse/hydrogen'; -import {forwardRef} from 'react'; - -type ImageWithTextLoaderData = Awaited<ReturnType<typeof loader>>; - -interface ImageWithTextProps - extends HydrogenComponentProps<ImageWithTextLoaderData> { - image: string; -} - -let ImageWithText = forwardRef<HTMLElement, ImageWithTextProps>( - (props, ref) => { - let {loaderData, image, ...rest} = props; - return ( - <section ref={ref} {...rest}> - <div className="text-gray-600 body-font bg-slate-300"> - <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"> - <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center space-y-4"> - {props.children} - </div> - <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6"> - <img - className="object-cover object-center rounded" - alt="hero" - src={image} - /> - </div> - </div> - </div> - </section> - ); - }, -); - -export default ImageWithText; - -// Example types -type PlaceholderType = { - url: string; - thumbnailUrl: string; -}; - -export let loader = async (args: WeaverseLoaderArgs) => { - let data: PlaceholderType = await fetchWithServerCache({ - url: 'https://jsonplaceholder.typicode.com/photos/1', - context: args.context, - }).then((r) => r.json()); - return data; -}; - -export let schema: HydrogenComponentSchema = { - type: 'image-with-text', - title: 'Image with Text', - childTypes: ['text', 'image-with-text--actions'], - inspector: [ - { - group: 'Image with Text', - inputs: [ - { - type: 'image', - label: 'Image', - name: 'image', - defaultValue: - 'https://images.unsplash.com/photo-1617606002806-94e279c22567?auto=format&fit=crop&w=1000&q=80', - }, - ], - }, - ], - toolbar: ['general-settings', ['duplicate', 'delete']], - presets: { - children: [ - {type: 'text'}, - {type: 'text'}, - {type: 'image-with-text--actions'}, - ], - }, - flags: { - isSection: true, - }, -}; diff --git a/app/weaverse/sections/image-with-text/actions.tsx b/app/weaverse/sections/image-with-text/actions.tsx deleted file mode 100644 index f404dd8..0000000 --- a/app/weaverse/sections/image-with-text/actions.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import type { - HydrogenComponentProps, - HydrogenComponentSchema, -} from '@weaverse/hydrogen'; -import {forwardRef} from 'react'; - -interface ImageWithTextActionsProps extends HydrogenComponentProps {} - -let Actions = forwardRef<HTMLDivElement, ImageWithTextActionsProps>( - (props, ref) => { - let {children, ...rest} = props; - return ( - <div ref={ref} {...rest} className="flex justify-center space-x-4"> - {children} - </div> - ); - }, -); - -export default Actions; - -export let schema: HydrogenComponentSchema = { - type: 'image-with-text--actions', - title: 'Actions', - childTypes: ['button'], - inspector: [], - toolbar: ['duplicate', 'delete'], - presets: { - children: [{type: 'button'}, {type: 'button'}], - }, -}; diff --git a/app/weaverse/sections/image-with-text/index.ts b/app/weaverse/sections/image-with-text/index.ts deleted file mode 100644 index aaa7162..0000000 --- a/app/weaverse/sections/image-with-text/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as ImageWithText from './_index'; -import * as Actions from './actions'; - -export let imageWithText = { - 'image-with-text': ImageWithText, - 'image-with-text--actions': Actions, -}; diff --git a/app/weaverse/sections/index.ts b/app/weaverse/sections/index.ts deleted file mode 100644 index 32003d5..0000000 --- a/app/weaverse/sections/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {imageWithText} from './image-with-text'; -import {testimonial} from './testimonial'; - -export let sections = { - ...imageWithText, - ...testimonial, -}; diff --git a/app/weaverse/sections/testimonial/_index.tsx b/app/weaverse/sections/testimonial/_index.tsx deleted file mode 100644 index 216e4ca..0000000 --- a/app/weaverse/sections/testimonial/_index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import type { - HydrogenComponentProps, - HydrogenComponentSchema, -} from '@weaverse/hydrogen'; -import {forwardRef} from 'react'; - -interface TestimonialProps extends HydrogenComponentProps { - heading: string; -} - -let Testimonial = forwardRef<HTMLElement, TestimonialProps>((props, ref) => { - 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"> - <h1 className="text-3xl font-medium title-fon mb-12 text-center text-white"> - {heading} - </h1> - <div className="flex flex-wrap -m-4">{children}</div> - </div> - </section> - ); -}); - -export default Testimonial; - -Testimonial.defaultProps = { - heading: 'Testimonials', -}; - -export let schema: HydrogenComponentSchema = { - type: 'testimonial', - title: 'Testimonial', - childTypes: ['testimonial--item'], - inspector: [ - { - group: 'Testimonial', - inputs: [ - { - type: 'text', - name: 'heading', - label: 'Heading', - placeholder: 'Enter heading here', - defaultValue: 'Testimonials', - }, - ], - }, - ], - toolbar: ['general-settings', ['duplicate', 'delete']], - presets: { - children: [ - { - type: 'testimonial--item', - }, - { - type: 'testimonial--item', - }, - ], - }, - flags: { - isSection: true, - }, -}; diff --git a/app/weaverse/sections/testimonial/index.ts b/app/weaverse/sections/testimonial/index.ts deleted file mode 100644 index 0cea2a7..0000000 --- a/app/weaverse/sections/testimonial/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as Testimonial from './_index'; -import * as Item from './item'; - -export let testimonial = { - testimonial: Testimonial, - 'testimonial--item': Item, -}; diff --git a/app/weaverse/sections/testimonial/item.tsx b/app/weaverse/sections/testimonial/item.tsx deleted file mode 100644 index 7006534..0000000 --- a/app/weaverse/sections/testimonial/item.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import type { - HydrogenComponentProps, - HydrogenComponentSchema, -} from '@weaverse/hydrogen'; -import {forwardRef} from 'react'; - -interface TestimonialItemProps extends HydrogenComponentProps { - content: string; - authorImage: string; - authorName: string; - authorTitle: string; -} - -let TestimonialItem = forwardRef<HTMLDivElement, TestimonialItemProps>( - (props, ref) => { - 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"> - <svg - xmlns="http://www.w3.org/2000/svg" - fill="currentColor" - className="block w-5 h-5 text-gray-400 mb-4" - viewBox="0 0 975.036 975.036" - > - <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path> - </svg> - <p className="leading-relaxed mb-6">{content}</p> - <a className="inline-flex items-center" href="/"> - <img - alt="testimonial" - src={authorImage} - className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center" - /> - <span className="flex-grow flex flex-col pl-4"> - <span className="title-font font-medium text-gray-900"> - {authorName} - </span> - <span className="text-gray-500 text-sm">{authorTitle}</span> - </span> - </a> - </div> - </div> - ); - }, -); - -export default TestimonialItem; - -export let schema: HydrogenComponentSchema = { - type: 'testimonial--item', - title: 'Testimonial Item', - inspector: [ - { - group: 'Testimonial Item', - inputs: [ - { - type: 'text', - name: 'content', - label: 'Content', - placeholder: 'Testimonial content', - defaultValue: 'Testimonial content', - }, - { - type: 'image', - name: 'authorImage', - label: 'Author image', - defaultValue: - 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=300&q=80', - }, - { - type: 'text', - name: 'authorName', - label: 'Author Name', - placeholder: 'Author name', - defaultValue: 'Author name', - }, - { - type: 'text', - name: 'authorTitle', - label: 'Author Title', - placeholder: 'Author title', - defaultValue: 'Author title', - }, - ], - }, - ], - toolbar: ['general-settings', ['duplicate', 'delete']], -};