Merge pull request #130 from lumapps/chore/search-template-settings

chore(search): update types + playground preview

Author: radiuso

template-search-extension/.gitignore

@@ -25,3 +25,5 @@ yarn-error.log*
 
 *.lum
 build/
+bundle.zip
+config.trans.js

template-search-extension/package.json

@@ -8,7 +8,8 @@
     "start": "run-p start:playground start:shipping-server",
     "start:playground": "react-scripts start",
     "start:shipping-server": "lumapps-shipping-server",
-    "test": "react-scripts test --coverage"
+    "test": "react-scripts test --coverage",
+    "build": "yarn start:shipping-server bundle"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -39,7 +40,7 @@
     "@lumx/react": "^3.0.2",
     "axios": "0.21.4",
     "lodash": "4.17.21",
-    "lumapps-sdk-js": "^1.21.0",
+    "lumapps-sdk-js": "1.24.1",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
     "react": "^16.13.1",

template-search-extension/src/config.js

@@ -1,94 +1,11 @@
 /**
- *  Create-LumApps-Widget config file
+ *  Create-LumApps-Search config file
  *  update the following to fit your needs
  */
 
-/**
- * The ids of your partner and extension
- */
-const partnerId = {
-    beta: '',
-    production: '',
-};
-
-const extensionId = {
-    beta: '',
-    production: '',
-};
-
-const description = {
-    en: 'SearchExtension',
-};
-
-const name = {
-    en: 'SearchExtension',
-};
-
-const icon = {
-    en:
-        'https://lh3.googleusercontent.com/-6F_iwel8KGY/WD8MdGS0PkI/AAAAAAAAGDI/KaqvKtZCK_AsdK6BcKp6Cy1MpwoEWCUvgCKgB/s400/logo.png', // a working link to your widget icon
-};
-
-const oauth = false;
-
-/**
- * Define the availability of your extension :
- * - open : available for everyone
- * - marketplace : the customer need to have access to the marketplace
- */
-
-const availability = 'marketplace';
-
-/**
- * Define if your extension needs to connect to external service through an application declare on provider side.
- *
- * Uncomment the following block to declare application usage for your extension.
- * Do not forget to add the application attribute in the config object.
- */
-/*const application = {
-    providerType: '',
-};*/
-
-/**
- * The documentation's url of the extension.
- */
-const links = {
-    documentation: null,
-};
-
-/**
- * The components available for your extensions
- * 'content' : For the Widget content itself (required)
- * 'settings' : For your search settings that will be used in a Tab context
- * 'globalSettings' : For global settings used by platform admin.
- */
-const components = ['content', 'settings', 'global_settings'];
-
-// Whether the extension is public or not in the marketplace.
-const isPublic = true;
-
-/**
- * The list of authorized customer ids.
- *
- * If your extension is not public only these customers will see and
- * will be able to install this extensions.
- */
-const whitelist = [];
-
 // do not change the following unless you know what you are doing
 const config = {
-    availability,
-    category: 'widget',
-    components,
-    description,
-    extensionId,
-    icon,
-    links,
-    name,
-    oauth,
-    partnerId,
-    public: isPublic,
-    whitelist,
+    category: 'search',
 };
 
 export default config;

template-search-extension/src/constants.ts

@@ -0,0 +1,5 @@
+import { ExtensionSearchSettings } from './types';
+
+export const DEFAULT_SETTINGS: ExtensionSearchSettings = {
+    searchId: '427af9d7-632f-5cf2-b909-141d229248b1',
+};

template-search-extension/src/index.content.ts

@@ -1,6 +1,4 @@
 /**
  *  Do not modify unless you know what you are doing
  */
-import { Search } from './search/Search';
-
-export { Search };
+export { Search } from './search';

template-search-extension/src/index.global_settings.ts

@@ -1,21 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import { ExtensionConfig } from 'lumapps-sdk-js';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Playground, store } from '@lumapps-extensions-playground/devenv';
 
 import '@lumx/core/lumx.css';
 
-import config from './config.js';
+import config from './config';
 import { SearchSettings } from './index.settings';
-import { SearchGlobalSettings } from './index.global_settings';
+import { SearchPagePreview } from './playground/SearchPagePreview';
 
 ReactDOM.render(
     <React.StrictMode>
         <Provider store={store}>
             <Playground
-                config={config as any}
+                config={config as ExtensionConfig}
+                ContentComponent={SearchPagePreview}
                 SettingsComponent={SearchSettings}
-                GlobalSettingsComponent={SearchGlobalSettings}
             />
         </Provider>
     </React.StrictMode>,

template-search-extension/src/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { mdiFileDocument } from '@lumx/icons';
+import { Divider, FlexBox, GenericBlock, Heading, Icon, Text, Link, Thumbnail } from '@lumx/react';
+
+import { ExtensionSearchResult } from 'lumapps-sdk-js';
+
+export interface ResultsProps {
+    items: ExtensionSearchResult[];
+}
+
+export const Results = ({ items }: ResultsProps) => {
+    return (
+        <FlexBox>
+            {items.map((item, index) => (
+                <React.Fragment key={item.id}>
+                    <GenericBlock
+                        key={item.id}
+                        as="article"
+                        orientation="horizontal"
+                        className="lumx-spacing-padding-big"
+                    >
+                        <GenericBlock.Figure>
+                            {item.thumbnail ? (
+                                <Thumbnail
+                                    image={item.thumbnail}
+                                    alt=""
+                                    badge={item.icon ? <Icon icon={item.icon} size="s" hasShape /> : undefined}
+                                    aspectRatio="square"
+                                    size="l"
+                                />
+                            ) : (
+                                <Icon icon={item.icon || mdiFileDocument} size="l" hasShape />
+                            )}
+                        </GenericBlock.Figure>
+                        <GenericBlock.Content>
+                            <Heading as="h2" typography="subtitle2">
+                                <Link href={item.url} target="_blank">
+                                    {item.title}
+                                </Link>
+                            </Heading>
+                            {item.source ? (
+                                <Text as="span" typography="body1" color="dark" colorVariant="L2">
+                                    {item.source}
+                                </Text>
+                            ) : null}
+                            <Text
+                                as="p"
+                                typography="body1"
+                                color="dark"
+                                colorVariant="L2"
+                                dangerouslySetInnerHTML={{ __html: item.snippet }}
+                            />
+                        </GenericBlock.Content>
+                    </GenericBlock>
+                    {index !== items.length - 1 && (
+                        <Divider className="lumx-spacing-margin-vertical-big lumx-spacing-margin-horizontal-huge" />
+                    )}
+                </React.Fragment>
+            ))}
+        </FlexBox>
+    );
+};

template-search-extension/src/playground/Results.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { ContentComponentProps, RESULT_STATUS, useDebounce, SearchSort } from 'lumapps-sdk-js';
+import { mdiMagnify, mdiTrophyBroken } from '@lumx/icons';
+import { FlexBox, Icon, Text, TextField, Button, Orientation, Divider } from '@lumx/react';
+
+import { UseSearchParams, useSearch } from '../search/useSearch';
+import { ExtensionSearchSettings } from '../types';
+import { Results } from './Results';
+import { Sorters } from './Sorters';
+
+/**
+ *
+ * @param props
+ * @returns
+ */
+export const SearchPagePreview = (props: ContentComponentProps<unknown, ExtensionSearchSettings>) => {
+    const [query, setQuery] = React.useState('formage');
+    const [page, setPage] = React.useState(0);
+    const debouncedQuery = useDebounce(query, 500);
+    const [sort, setSort] = React.useState<SearchSort | undefined>();
+
+    const { properties, extensionId } = props;
+
+    const input: UseSearchParams = React.useMemo(
+        () => ({
+            query: debouncedQuery,
+            pageSize: 10,
+            language: 'en',
+            extensionId,
+            connectorId: 'connector',
+            page,
+            sort: sort?.value,
+            settings: properties,
+        }),
+        [page, debouncedQuery, sort, properties, extensionId],
+    );
+
+    const { results, hasMore, status, totalCount, sortOrders = [] } = useSearch(input);
+
+    const onSortChange = (newSort: SearchSort) => {
+        setSort(newSort);
+        setPage(0);
+    };
+
+    const loadMoreResults = () => {
+        setPage(page + 1);
+    };
+
+    const currentSort = React.useMemo(() => {
+        if (sort) {
+            return sort;
+        }
+        if (sortOrders.length > 0) {
+            return sortOrders[0];
+        }
+
+        return undefined;
+    }, [sortOrders, sort]);
+
+    return (
+        <div className="lumx-spacing-padding-horizontal-huge">
+            <TextField value={query} onChange={setQuery} icon={mdiMagnify} />
+
+            {status === RESULT_STATUS.ERROR ? (
+                <FlexBox
+                    orientation="vertical"
+                    hAlign="center"
+                    vAlign="center"
+                    className="lumx-spacing-padding-horizontal-huge"
+                >
+                    <Icon icon={mdiTrophyBroken} size="xl" hasShape />
+                    <Text as="p" typography="title">
+                        Oups, an error occured{' '}
+                        <span role="img" aria-label="shrug">
+                            🤷‍♂️
+                        </span>
+                    </Text>
+                    <Text as="p" typography="body1">
+                        Check the browser console
+                    </Text>
+                </FlexBox>
+            ) : (
+                <FlexBox orientation={Orientation.horizontal} className="lumx-spacing-margin-top-big" gap="big">
+                    <FlexBox orientation={Orientation.vertical}>
+                        <FlexBox orientation={Orientation.horizontal} hAlign="center" vAlign="space-between">
+                            <Text as="p" typography="caption">
+                                Found {totalCount} results for &quot;{debouncedQuery}&quot;
+                            </Text>
+
+                            {currentSort ? (
+                                <Sorters choices={sortOrders} value={currentSort} onChange={onSortChange} />
+                            ) : null}
+                        </FlexBox>
+                        <Results items={results} />
+                        {hasMore && (
+                            <Button
+                                fullWidth
+                                onClick={loadMoreResults}
+                                className="lumx-spacing-margin-vertical-big"
+                                emphasis="medium"
+                                type="button"
+                            >
+                                Display more results
+                            </Button>
+                        )}
+                    </FlexBox>
+                </FlexBox>
+            )}
+
+            <Divider />
+            <FlexBox className="lumx-spacing-margin-vertical-huge lumx-spacing-margin-horizontal-huge">
+                <Text as="p" color="grey" typography="body2">
+                    Debug info
+                </Text>
+                <p>Status: {status}</p>
+                <p>Total count: {totalCount}</p>
+                <p>hasMore: {`${hasMore}`}</p>
+            </FlexBox>
+        </div>
+    );
+};