@wix/system-core-components 1.3.1

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@wix/system-core-components",
+  "version": "1.3.1",
+  "description": "System core structural components for Wix sites",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "license": "UNLICENSED",
+  "files": [
+    "src",
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "scripts": {
+    "build:esm": "tsc --project tsconfig.json --outDir dist/esm --module ES2022 --moduleResolution Bundler",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist/types",
+    "build": "yarn run build:esm && yarn run build:types && yarn run -T build:bundles system-core-components",
+    "lint": "yarn run -T lint:package $npm_package_name",
+    "test-type-check": "tsc --project tsconfig.test.json",
+    "test": "yarn test-type-check && vitest --run",
+    "clean": "rm -rf coverage dist target tsconfig.tsbuildinfo"
+  },
+  "dependencies": {
+    "@wix/builder-state-react": "1.22.1",
+    "@wix/editor-components": "^1.14.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@wix/builder-state": "^1.0.0",
+    "jsdom": "^23.0.1",
+    "react": "^18.3.1",
+    "typescript": "^5.3.3",
+    "vitest": "^4.0.10"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "publishUnscoped": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "wix": {
+    "artifact": {
+      "groupId": "com.wixpress.npm",
+      "artifactId": "system-core-components",
+      "targets": {
+        "static": {
+          "folderToUpload": "dist/bundles"
+        },
+        "docker": false
+      }
+    },
+    "validations": {
+      "postBuild": [
+        "test",
+        "lint"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/bundles/umd/system-core-components.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./*": {
+      "import": "./dist/esm/*.js",
+      "types": "./dist/types/*.d.ts"
+    }
+  },
+  "module": "dist/esm/index.js",
+  "falconPackageHash": "53b6e87dd80f497049e2a61c6346623588b1a6d064067526a7fcc1dc"
+}

package/src/Anchor.tsx

@@ -0,0 +1,5 @@
+'use client'
+import { Anchor as Component } from '@wix/editor-components/component/Anchor'
+import '@wix/editor-components/component/Anchor/css'
+
+export const Anchor = Component

package/src/FooterContainer_TransparentScreen.tsx

@@ -0,0 +1,6 @@
+'use client'
+import Component from '@wix/editor-components/skin/FooterContainer/TransparentScreen'
+import '@wix/editor-components/skin/FooterContainer/TransparentScreen/css'
+import { withNormalChildren } from './hocs'
+
+export const FooterContainer_TransparentScreen = withNormalChildren(Component)

package/src/FooterSection.tsx

@@ -0,0 +1,6 @@
+'use client'
+import { FooterSection as Component } from '@wix/editor-components/component/FooterSection'
+import '@wix/editor-components/component/FooterSection/css'
+import { withNormalChildren } from './hocs'
+
+export const FooterSection = withNormalChildren(Component)

package/src/HeaderContainer_TransparentScreen.tsx

@@ -0,0 +1,7 @@
+'use client'
+import Component from '@wix/editor-components/skin/HeaderContainer/TransparentScreen'
+import { HeaderContainer as controller } from '@wix/editor-components/controller/HeaderContainer'
+import '@wix/editor-components/skin/HeaderContainer/TransparentScreen/css'
+import { withController, withNormalChildren } from './hocs'
+
+export const HeaderContainer_TransparentScreen = withNormalChildren(withController(Component, controller))

package/src/HeaderSection.tsx

@@ -0,0 +1,7 @@
+'use client'
+import { HeaderSection as Component } from '@wix/editor-components/component/HeaderSection'
+import { HeaderSection as controller } from '@wix/editor-components/controller/HeaderSection'
+import '@wix/editor-components/component/HeaderSection/css'
+import { withController, withNormalChildren } from './hocs'
+
+export const HeaderSection = withNormalChildren(withController(Component, controller))

package/src/PageGroup.tsx

@@ -0,0 +1,6 @@
+'use client'
+import { PageGroup as Component } from '@wix/editor-components/component/PageGroup'
+import '@wix/editor-components/component/PageGroup/css'
+import { withNormalChildren } from './hocs'
+
+export const PageGroup = withNormalChildren(Component)

package/src/PageSections.tsx

@@ -0,0 +1,6 @@
+'use client'
+import { ResponsiveContainer as Component } from '@wix/editor-components/component/ResponsiveContainer'
+import '@wix/editor-components/component/ResponsiveContainer/css'
+import { withNormalChildren } from './hocs'
+
+export const PageSections = withNormalChildren(Component)

package/src/Page_BasicPageSkin.tsx

@@ -0,0 +1,6 @@
+'use client'
+import Component from '@wix/editor-components/skin/Page/BasicPageSkin'
+import '@wix/editor-components/skin/Page/BasicPageSkin/css'
+import { withNormalChildren } from './hocs'
+
+export const Page_BasicPageSkin = withNormalChildren(Component)

package/src/Page_ResponsivePageWithColorBG.tsx

@@ -0,0 +1,6 @@
+'use client'
+import Component from '@wix/editor-components/skin/Page/ResponsivePageWithColorBG'
+import '@wix/editor-components/skin/Page/ResponsivePageWithColorBG/css'
+import { withNormalChildren } from './hocs'
+
+export const Page_ResponsivePageWithColorBG = withNormalChildren(Component)

package/src/PagesContainer.tsx

@@ -0,0 +1,5 @@
+'use client'
+import { PagesContainer as Component } from '@wix/editor-components/component/PagesContainer'
+import { withNormalChildren } from './hocs'
+
+export const PagesContainer = withNormalChildren(Component)

package/src/ResponsiveContainer.tsx

@@ -0,0 +1,6 @@
+'use client'
+import { ResponsiveContainer as Component } from '@wix/editor-components/component/ResponsiveContainer'
+import '@wix/editor-components/component/ResponsiveContainer/css'
+import { withNormalChildren } from './hocs'
+
+export const ResponsiveContainer = withNormalChildren(Component)

package/src/ResponsivePopupPage_WithoutOverlay.tsx

@@ -0,0 +1,7 @@
+'use client'
+import { ResponsivePopupPage as Component } from '@wix/editor-components/component/ResponsivePopupPage'
+import { ResponsivePopupPage as controller } from '@wix/editor-components/controller/ResponsivePopupPage'
+import '@wix/editor-components/component/ResponsivePopupPage/css'
+import { withController, withNormalChildren } from './hocs'
+
+export const ResponsivePopupPage_WithoutOverlay = withNormalChildren(withController(Component, controller))

package/src/Section.tsx

@@ -0,0 +1,7 @@
+'use client'
+import { Section as Component } from '@wix/editor-components/component/Section'
+import { Section as controller } from '@wix/editor-components/controller/Section'
+import '@wix/editor-components/component/Section/css'
+import { withController, withNormalChildren } from './hocs'
+
+export const Section = withNormalChildren(withController(Component, controller))

package/src/hocs.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React from 'react'
+import { useStateOverrides } from '@wix/builder-state-react'
+
+/**
+ * An HOC that gets a container component that expects children as a function (like EditorElement components)
+ * and returns a container component that gets children as an array.
+ */
+export const withNormalChildren =
+    <P extends object>(Component: React.ComponentType<P & { children: () => React.ReactNode }>) =>
+    ({ children, ...props }: P & { children?: React.ReactNode }) =>
+        <Component {...(props as unknown as P)}>{() => children || []}</Component>
+
+type Controller<P extends { nickname: string }> = {
+    useComponentProps: (props: P, services: Record<string, unknown>, setters: unknown) => Partial<P>
+}
+
+/**
+ * An HOC that connects a component to its EditorElements controller.
+ * As this is a special code for EditorElements, it should be moved to their project in the future.
+ *
+ * Note:
+ * Since the controller can update props, and since they have to be synced with velo if exists,
+ * every component with a controller should be connected by default. Since the consumer (widget genreated code)
+ * doesn't always connect the component, we do the connection here for now.
+ */
+export const withController =
+    <P extends { nickname: string }>(Component: React.ComponentType<P>, controller: Controller<P>) =>
+    (props: P) => {
+        const [propsOverrides = {} as Partial<P>, , setters] = useStateOverrides(props.nickname)
+        const controllerProps = controller.useComponentProps({ ...props, ...propsOverrides }, {}, setters)
+        return <Component {...props} {...controllerProps} />
+    }

package/src/index.ts

@@ -0,0 +1,13 @@
+export { Anchor } from './Anchor'
+export { FooterContainer_TransparentScreen } from './FooterContainer_TransparentScreen'
+export { FooterSection } from './FooterSection'
+export { HeaderContainer_TransparentScreen } from './HeaderContainer_TransparentScreen'
+export { HeaderSection } from './HeaderSection'
+export { Page_BasicPageSkin } from './Page_BasicPageSkin'
+export { Page_ResponsivePageWithColorBG } from './Page_ResponsivePageWithColorBG'
+export { PageGroup } from './PageGroup'
+export { PagesContainer } from './PagesContainer'
+export { PageSections } from './PageSections'
+export { ResponsiveContainer } from './ResponsiveContainer'
+export { ResponsivePopupPage_WithoutOverlay } from './ResponsivePopupPage_WithoutOverlay'
+export { Section } from './Section'