@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/CustomFieldsWidget/basic.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { CustomFieldsWidget } from '@wix/patterns';
+import { Button, Cell, Layout, Loader, Page } from '@wix/design-system';
+import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function Basic() {
+  const [isLoading, setLoading] = React.useState(false);
+
+  const demoEntity: DummyEntity = {
+    id: 'id',
+    name: 'Hello world!',
+    extendedFields: {
+      namespaces: {
+        _user_fields: {
+          shortText: 'Hello world!',
+          decimal: 3.14,
+          integer: 43,
+        },
+      },
+    },
+  };
+
+  return (
+    <Page>
+      <Page.Header
+        title="My Entity Page"
+        actionsBar={
+          <Button
+            disabled={isLoading}
+            onClick={async () => {
+              setLoading(true);
+              window.setTimeout(() => {
+                setLoading(false);
+              }, 1000);
+            }}
+          >
+            {isLoading ? <Loader size="tiny" /> : 'Save'}
+          </Button>
+        }
+      />
+      <Page.Content>
+        <Layout>
+          <Cell>
+            <CustomFieldsWidget
+              fqdn="wix.patterns.dummyservice.v1.dummy_entity"
+              extendedFields={demoEntity.extendedFields}
+            />
+          </Cell>
+        </Layout>
+      </Page.Content>
+    </Page>
+  );
+}

package/dist/docs/CustomFieldsWidget/controllable-state.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  CustomFieldsWidget,
+  useCustomFieldsWidget,
+  useSelector,
+} from '@wix/patterns';
+import { Button, Cell, Layout, Loader, Page } from '@wix/design-system';
+import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function ControllableState() {
+  const [isLoading, setLoading] = React.useState(false);
+
+  const demoEntity: DummyEntity = {
+    id: 'id',
+    name: 'Hello world!',
+    extendedFields: {
+      namespaces: {
+        _user_fields: {
+          shortText: 'Hello world!',
+          decimal: 3.14,
+          integer: 43,
+        },
+      },
+    },
+  };
+
+  function MyCustomFields() {
+    const state = useCustomFieldsWidget({
+      fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    });
+    const isLoading = useSelector(() => state.isLoading);
+    const isError = useSelector(() => state.isError);
+
+    if (isLoading) {
+      return <div>Loading...</div>;
+    }
+
+    if (isError) {
+      return <div>Error</div>;
+    }
+
+    return (
+      <CustomFieldsWidget
+        extendedFields={demoEntity.extendedFields}
+        theme="inline"
+        state={state}
+      />
+    );
+  }
+
+  return (
+    <Page>
+      <Page.Header
+        title="My Entity Page"
+        actionsBar={
+          <Button
+            disabled={isLoading}
+            onClick={async () => {
+              setLoading(true);
+              window.setTimeout(() => {
+                setLoading(false);
+              }, 1000);
+            }}
+          >
+            {isLoading ? <Loader size="tiny" /> : 'Save'}
+          </Button>
+        }
+      />
+      <Page.Content>
+        <Layout>
+          <Cell>
+            <MyCustomFields />
+          </Cell>
+        </Layout>
+      </Page.Content>
+    </Page>
+  );
+}

package/dist/docs/CustomFieldsWidget/empty-state.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import React from 'react';
+import { CustomFieldsWidget } from '@wix/patterns';
+import { Card, Cell, Layout, Page } from '@wix/design-system';
+
+function EmptyState() {
+  return (
+    <Page>
+      <Page.Header title="Entity Page" />
+      <Page.Content>
+        <Layout>
+          <Cell>
+            <CustomFieldsWidget fqdn="wix.patterns.dummyservice.v1.dummy_entity" />
+          </Cell>
+        </Layout>
+      </Page.Content>
+    </Page>
+  );
+}

package/dist/docs/CustomFieldsWidget/inline-theme.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { CustomFieldsWidget } from '@wix/patterns';
+import { Button, Cell, Layout, Loader, Page } from '@wix/design-system';
+import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function InlineTheme() {
+  const [isLoading, setLoading] = React.useState(false);
+
+  const demoEntity: DummyEntity = {
+    id: 'id',
+    name: 'Hello world!',
+    extendedFields: {
+      namespaces: {
+        _user_fields: {
+          shortText: 'Hello world!',
+          decimal: 3.14,
+          integer: 43,
+        },
+      },
+    },
+  };
+
+  return (
+    <Page>
+      <Page.Header
+        title="My Entity Page"
+        actionsBar={
+          <Button
+            disabled={isLoading}
+            onClick={async () => {
+              setLoading(true);
+              window.setTimeout(() => {
+                setLoading(false);
+              }, 1000);
+            }}
+          >
+            {isLoading ? <Loader size="tiny" /> : 'Save'}
+          </Button>
+        }
+      />
+      <Page.Content>
+        <Layout>
+          <Cell>
+            <CustomFieldsWidget
+              fqdn="wix.patterns.dummyservice.v1.dummy_entity"
+              extendedFields={demoEntity.extendedFields}
+              theme="inline"
+            />
+          </Cell>
+        </Layout>
+      </Page.Content>
+    </Page>
+  );
+}

package/dist/docs/CustomFieldsWidget/responsive.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import React from 'react';
+import { CustomFieldsWidget } from '@wix/patterns';
+import { Card, Cell, Layout, Page } from '@wix/design-system';
+import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function Responsive() {
+  const demoEntity: DummyEntity = {
+    id: 'id',
+    name: 'Hello world!',
+    extendedFields: {
+      namespaces: {
+        _user_fields: {
+          shortText: 'Hello world!',
+          decimal: 3.14,
+          integer: 43,
+        },
+      },
+    },
+  };
+
+  return (
+    <Page>
+      <Page.Header title="Entity Page" />
+      <Page.Content>
+        <Layout>
+          <Cell span={8}>
+            <CustomFieldsWidget
+              fqdn="wix.patterns.dummyservice.v1.dummy_entity"
+              extendedFields={demoEntity.extendedFields}
+            />
+          </Cell>
+          <Cell span={4}>
+            <Card>
+              <Card.Header title="Content" />
+              <Card.Content />
+            </Card>
+          </Cell>
+        </Layout>
+      </Page.Content>
+    </Page>
+  );
+}

package/dist/docs/CustomFieldsWidget/with-tpa-fields.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { CustomFieldsWidget } from '@wix/patterns';
+import { Button, Cell, Layout, Loader, Page } from '@wix/design-system';
+import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function WithTpaFields() {
+  const [isLoading, setLoading] = React.useState(false);
+
+  const [demoEntity] = React.useState<DummyEntity>(() => ({
+    id: 'id',
+    name: 'Hello world!',
+    extendedFields: {
+      namespaces: {
+        _user_fields: {
+          shortText: 'Hello world!',
+          decimal: 3.14,
+          integer: 43,
+        },
+        '@company/app': {
+          app_longText: 'Hello world!',
+          app_integer: 43,
+        },
+      },
+    },
+  }));
+
+  return (
+    <Page>
+      <Page.Header
+        title="My Entity Page"
+        actionsBar={
+          <Button
+            disabled={isLoading}
+            onClick={async () => {
+              setLoading(true);
+              window.setTimeout(() => {
+                setLoading(false);
+              }, 1000);
+            }}
+          >
+            {isLoading ? <Loader size="tiny" /> : 'Save'}
+          </Button>
+        }
+      />
+      <Page.Content>
+        <Layout>
+          <Cell>
+            <CustomFieldsWidget
+              fqdn="wix.patterns.dummyservice.v1.dummy_entity"
+              extendedFields={demoEntity.extendedFields}
+            />
+          </Cell>
+        </Layout>
+      </Page.Content>
+    </Page>
+  );
+}

package/dist/docs/CustomFieldsWidget/without-entity-page.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  CustomFieldsWidget,
+  useCustomFieldsWidget,
+  useSelector,
+} from '@wix/patterns';
+import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function WithoutEntityPage() {
+  const demoEntity: DummyEntity = {
+    id: 'id',
+    name: 'Hello world!',
+    extendedFields: {
+      namespaces: {
+        _user_fields: {
+          shortText: 'Hello world!',
+          decimal: 3.14,
+          integer: 43,
+        },
+      },
+    },
+  };
+
+  const state = useCustomFieldsWidget({
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+  });
+
+  return (
+    <>
+      {demoEntity.extendedFields && (
+        <CustomFieldsWidget
+          extendedFields={demoEntity.extendedFields}
+          theme="inline"
+          state={state}
+          onChange={() => {
+            console.log('onChange');
+          }}
+        />
+      )}
+    </>
+  );
+}