Merge pull request #842 from Sitecore/project/consolidate-ui

UI consolidation and changelog improvements

packages/ui/src/data/clouds.ts → apps/devportal/data/clouds.ts

@@ -1,5 +1,5 @@
-import { CloudInfoType } from '../components/hexagons/HexagonTypes';
-import { Product } from '../lib/assets';
+import { CloudInfoType } from '@/src/components/hexagons';
+import { Product } from '@/src/lib/assets';
 
 export const ContentCloud: CloudInfoType = {
   name: 'Content Cloud',

apps/devportal/data/data-community-list.ts

@@ -1,4 +1,4 @@
-import { GenericListData, GenericListItem } from '@scdp/ui/components';
+import { GenericListData, GenericListItem } from '@/src/components/lists';
 
 const content: GenericListItem[] = [
   {

apps/devportal/data/data-navigation.ts

@@ -1,4 +1,4 @@
-import { Product } from '@scdp/ui/lib';
+import { Product } from '@/src/lib/assets';
 
 export interface NavItem {
   title: string;

apps/devportal/data/data-platform.ts

@@ -1,4 +1,4 @@
-import { GenericListData, GenericListItem } from '@scdp/ui/components';
+import { GenericListData, GenericListItem } from '@/src/components/lists';
 
 const content: GenericListItem[] = [
   {

apps/devportal/data/data-product-solutions.ts

@@ -1,4 +1,4 @@
-import { CategoryTileProps } from '@scdp/ui/components';
+import { CategoryTileProps } from '@/src/components/lists';
 
 export const productSolutions: CategoryTileProps[] = [
   {

apps/devportal/data/data-updates.ts

@@ -1,4 +1,4 @@
-import { GenericListData, GenericListItem } from '@scdp/ui/components';
+import { GenericListData, GenericListItem } from '@/src/components/lists';
 
 const content: GenericListItem[] = [
   {

packages/ui/src/data/products.ts → apps/devportal/data/products.ts

@@ -1,5 +1,5 @@
-import { ProductInfoType } from '../components/hexagons/HexagonTypes';
-import { Product } from '../lib/assets';
+import { ProductInfoType } from '@/src/components/hexagons';
+import { Product } from '@/src/lib/assets';
 import { CommerceCloud, ContentCloud, EngagementCloud } from './clouds';
 
 export const ContentHubONE: ProductInfoType = {

apps/devportal/data/promos/contact-us.ts

@@ -1,4 +1,4 @@
-import { CTACardProps } from '@scdp/ui/components';
+import { CTACardProps } from '@/src/components/promos';
 
 const data: CTACardProps = {
   title: 'Contact Us',

apps/devportal/data/promos/get-help.ts

@@ -1,4 +1,4 @@
-import { CTACardProps } from '@scdp/ui/components';
+import { CTACardProps } from '@/src/components/promos';
 
 const data: CTACardProps = {
   title: 'Get Help',

apps/devportal/data/promos/learning-at-sitecore.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Learning @ Sitecore',

apps/devportal/data/promos/learning-essentials.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Sitecore Essentials - FREE',

apps/devportal/data/promos/mvp.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Sitecore MVP program',

apps/devportal/data/promos/newpromo.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Newsletter archive',

apps/devportal/data/promos/newsletter.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Sitecore for Developers',

apps/devportal/data/promos/nextjsconf.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Vercel Next.js conference',

apps/devportal/data/promos/opensource.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Open Source @ Sitecore',

apps/devportal/data/promos/sitecore-support.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Connect with Sitecore Support',

apps/devportal/data/promos/videos/composable-dxp.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Composable DXP for Developers',

apps/devportal/data/promos/xmc-practices.ts

@@ -1,4 +1,4 @@
-import { PromoCardProps } from '@scdp/ui/components';
+import { PromoCardProps } from '@/src/components/promos';
 
 const data: PromoCardProps = {
   title: 'Sitecore Accelerate',

apps/devportal/package.json

@@ -35,10 +35,10 @@
     "@nikolovlazar/chakra-ui-prose": "^1.2.1",
     "@remark-embedder/core": "^3.0.2",
     "@remark-embedder/transformer-oembed": "^3.0.0",
-    "@scdp/ui": "*",
-    "@sitecore-search/react": "^2.2.3",
-    "@sitecore-search/ui": "^2.2.3",
+    "@sitecore-search/react": "^2.5.2",
+    "@sitecore-search/ui": "^2.5.2",
     "@sitecore/engage": "^1.4.3",
+    "@sitecore/blok-theme": "^1.1.11",
     "@vercel/edge-config": "^1.1.0",
     "@vercel/og": "^0.6.2",
     "axios": "^1.6.8",
@@ -60,7 +60,12 @@
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "swr": "^2.2.5",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "chakra-react-select": "^4.7.6",
+    "next-share": "^0.27.0",
+    "react-select": "^5.8.0",
+    "react-tweet": "^3.2.0",
+    "react-lite-youtube-embed": "^2.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -82,4 +87,4 @@
     "react-gtm-module": "^2.0.11",
     "typescript": "^5.4.4"
   }
-}
+}

apps/devportal/src/components/changelog/ChangeLogItem.tsx

@@ -1,13 +1,13 @@
 import { Button, Card, CardBody, CardFooter, CardHeader, Center, Heading, Image, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useDisclosure } from '@chakra-ui/react';
 import { Prose } from '@nikolovlazar/chakra-ui-prose';
 //import Image from 'next/image';
+import { ChangelogEntry } from '@scdp/changelog/types';
+import { getChangelogEntryUrl, getSlug } from '@scdp/changelog/utils';
 import Link from 'next/link';
 import { useEffect, useRef } from 'react';
-import { ChangelogEntry } from '@scdp/changelog/types';
-import { getSlug } from '@scdp/changelog/utils';
-import { getChangelogEntryUrl } from '@scdp/changelog/utils';
-
-import { Loading, ButtonLink, SocialShare } from '@scdp/ui/components';
+import { Loading } from '../common';
+import { ButtonLink } from '../links';
+import { SocialShare } from '../social';
 import { ChangelogItemMeta } from './ChangelogItemMeta';
 
 export type ChangeLogItemProps = {
@@ -18,7 +18,7 @@ export type ChangeLogItemProps = {
   loadEntries: () => void;
 };
 
-const ChangeLogItem = ({ item, loading, loadEntries, isLast, isMore }: ChangeLogItemProps): JSX.Element => {
+const ChangeLogItem = ({ item, loadEntries, isLast, isMore }: ChangeLogItemProps): JSX.Element => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const entryRef = useRef(null);
 
@@ -44,7 +44,7 @@ const ChangeLogItem = ({ item, loading, loadEntries, isLast, isMore }: ChangeLog
               {item.title}
             </Link>
           </Heading>
-          <ChangelogItemMeta item={item} loading={loading} />
+          <ChangelogItemMeta item={item} />
         </CardHeader>
         <CardBody py={0}>
           {item.image.length > 0 && (
@@ -71,6 +71,7 @@ const ChangeLogItem = ({ item, loading, loadEntries, isLast, isMore }: ChangeLog
               </Modal>
             </>
           )}
+
           <Prose margin={0} padding={0} dangerouslySetInnerHTML={{ __html: item.description }} />
         </CardBody>
         <CardFooter justifyContent={item.readMoreLink ? 'space-between' : 'flex-end'}>

apps/devportal/src/components/changelog/ChangelogByMonth.tsx

@@ -1,10 +1,9 @@
 import { Card, CardBody, CardHeader, HStack, Heading, Image, Skeleton, SkeletonText } from '@chakra-ui/react';
 import { useGetEntriesByProducts } from '@lib/changelog/hooks/useGetEntriesByProducts';
-import Link from 'next/link';
-import { Product } from '@scdp/changelog/types';
-import { ChangelogEntrySummary } from '@scdp/changelog/types';
+import { ChangelogEntrySummary, Product } from '@scdp/changelog/types';
 import { getChangelogEntryUrl } from '@scdp/changelog/utils';
-import { Option } from '@scdp/ui/components';
+import { Option } from '@src/components/dropdown';
+import Link from 'next/link';
 
 type ChangelogByMonthProps = {
   product?: Product;

apps/devportal/src/components/changelog/ChangelogEntries.tsx

@@ -1,8 +1,8 @@
-import { Badge, Box, Button, Card, CardBody, CardHeader, CardProps, Flex, HStack, Heading, Hide, Link, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, SimpleGrid, Stack, Text, chakra, useColorModeValue } from '@chakra-ui/react';
-import Image from 'next/image';
+import { Box, Button, Card, CardBody, CardHeader, CardProps, Flex, HStack, Heading, Hide, Link, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, SimpleGrid, Stack, Tag, Text, chakra, useColorModeValue } from '@chakra-ui/react';
 import { ChangelogEntry } from '@scdp/changelog/types';
-import { getSlug, getChangelogEntryUrl } from '@scdp/changelog/utils';
-import { TextLink } from '@scdp/ui/components';
+import { getChangelogEntryUrl, getSlug } from '@scdp/changelog/utils';
+import { TextLink } from '@src/components/links';
+import Image from 'next/image';
 
 type ChangelogEntriesProps = CardProps & {
   entries: ChangelogEntry[];
@@ -90,8 +90,18 @@ const ChangelogEntries = ({ entries, title, linkHref, linkText, hideProductIcon,
                       )
                     )}
 
-                    {entry.changeTypeName != null ? <Badge colorScheme={entry.changeTypeName == 'Resolved' ? 'yellow' : entry.changeTypeName == 'New Feature' ? 'teal' : 'info'}>{entry.changeTypeName}</Badge> : ''}
-                    {entry.breakingChange && <Badge colorScheme="danger">Breaking change</Badge>}
+                    {entry.changeTypeName != null ? (
+                      <Tag size="sm" colorScheme={entry.changeTypeName == 'Resolved' ? 'yellow' : entry.changeTypeName == 'New Feature' ? 'teal' : 'info'}>
+                        {entry.changeTypeName}
+                      </Tag>
+                    ) : (
+                      ''
+                    )}
+                    {entry.breakingChange && (
+                      <Tag size="sm" colorScheme="danger">
+                        Breaking change
+                      </Tag>
+                    )}
                   </HStack>
                 </Stack>
               </Flex>

apps/devportal/src/components/changelog/ChangelogFilter.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import { Container, Skeleton, SkeletonText, VisuallyHidden } from '@chakra-ui/react';
 import { Product } from '@scdp/changelog/types';
-import { MultiSelect, Option } from '@scdp/ui/components';
+import { MultiSelect, Option } from '@src/components/dropdown';
 import { useState } from 'react';
 
 type ChangelogFilterProps = {

apps/devportal/src/components/changelog/ChangelogItemMeta.tsx

@@ -1,22 +1,22 @@
 /* eslint-disable turbo/no-undeclared-env-vars */
 import { usePreview } from '@/src/context/PreviewContext';
-import { Badge, BoxProps, Button, HStack, Hide, Icon, Link, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, Stack, Text, Tooltip, chakra, useColorModeValue } from '@chakra-ui/react';
+import { getStatusBadgeColor } from '@/src/lib/changelog/changelog';
+import { BoxProps, Button, HStack, Hide, Icon, Link, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, Stack, Tag, Text, Tooltip, chakra, useColorModeValue } from '@chakra-ui/react';
 import { mdiSquareEditOutline } from '@mdi/js';
 import { ChangelogEntry } from '@scdp/changelog/types';
 import { getSlug } from '@scdp/changelog/utils';
 import Image from 'next/image';
 import { ProductIcon } from './ProductIcon';
 
 type ChangelogItemMetaProps = BoxProps & {
-  loading?: boolean;
   item: ChangelogEntry;
 };
 
 const CustomImage = chakra(Image, {
   shouldForwardProp: (prop) => ['height', 'width', 'quality', 'src', 'alt'].includes(prop),
 });
 
-export const ChangelogItemMeta = ({ item, ...rest }: ChangelogItemMetaProps) => {
+export const ChangelogItemMeta = ({ item }: ChangelogItemMetaProps) => {
   const { isPreview } = usePreview();
 
   const organizationId = process.env.NEXT_PUBLIC_SITECORE_CHONE_ORGANIZATION as string;
@@ -31,17 +31,11 @@ export const ChangelogItemMeta = ({ item, ...rest }: ChangelogItemMetaProps) =>
   };
 
   const MetaInfo = (
-    <HStack {...rest} gap={4}>
+    <HStack gap={4}>
       {item.products != null && item.products?.length > 1 ? (
         <HStack spacing={0}>
           <Popover placement="bottom-start" trigger="click">
-            <PopoverAnchor>
-              {item.products != null && (
-                <Link href={`/changelog/${getSlug(item.products[0].productName)}`} className="">
-                  <ProductIcon product={item.products[0]} />
-                </Link>
-              )}
-            </PopoverAnchor>
+            <PopoverAnchor>{item.products != null && <ProductIcon product={item.products[0]} />}</PopoverAnchor>
             <PopoverTrigger>
               <Button variant="unstyled" size={'sm'} hideBelow={'sm'} ml={2}>
                 + {item.products.length - 1} <Hide below="md">{item.products.length == 1 ? 'other' : 'others'}</Hide>
@@ -64,31 +58,34 @@ export const ChangelogItemMeta = ({ item, ...rest }: ChangelogItemMetaProps) =>
           </Popover>
         </HStack>
       ) : (
-        item.products != null && (
-          <Link href={`/changelog/${getSlug(item.products[0].productName)}`} className="">
-            <ProductIcon product={item.products[0]} />
-          </Link>
-        )
+        item.products != null && <ProductIcon product={item.products[0]} />
       )}
 
       <time dateTime="2022-10-21T15:48:00.000Z">{item.releaseDate}</time>
 
-      {/* {item.changeTypeName != null ? <Badge colorScheme={colorScheme(item.changeTypeName)}>{item.changeTypeName}</Badge> : <Badge>No changetype defined</Badge>} */}
       {item.changeType.length > 0 &&
         item.changeType.map((changeTypeItem, key) => (
-          <Badge colorScheme={colorScheme(changeTypeItem.name)} key={key}>
+          <Tag colorScheme={colorScheme(changeTypeItem.name)} size="sm" key={key}>
             {changeTypeItem.name}
-          </Badge>
+          </Tag>
         ))}
-      {item.breakingChange && <Badge colorScheme="danger">Breaking change</Badge>}
-
-      {/* {item.status && (
+      {item.breakingChange && (
+        <Tag size="sm" colorScheme="warning">
+          Breaking change
+        </Tag>
+      )}
+      {item.scheduled && (
+        <Tooltip label="This functionality is scheduled" aria-label="This functionality is scheduled">
+          <Tag size="sm">Scheduled</Tag>
+        </Tooltip>
+      )}
+      {!item.scheduled && item.status && item.status.identifier == 'in-progress' && (
         <Tooltip label={item.status.description} aria-label={item.status.description}>
-          <Badge colorScheme={getStatusBadgeColor(item.status.identifier)} variant="outline">
+          <Tag size="sm" colorScheme={getStatusBadgeColor(item.status.identifier)} variant="outline">
             {item.status.name}
-          </Badge>
+          </Tag>
         </Tooltip>
-      )} */}
+      )}
     </HStack>
   );
 

apps/devportal/src/components/changelog/ChangelogList.tsx

@@ -2,7 +2,7 @@
 import { Box, Button, CloseButton, Link, SkeletonText, VisuallyHidden } from '@chakra-ui/react';
 import { buildQuerystring, entriesApiUrl, getChangeTypeOptions, getProductOptions } from '@lib/changelog/changelog';
 import { ChangelogEntry, ChangelogEntryList, Product } from '@scdp/changelog/types';
-import { Option } from '@scdp/ui/components';
+import { Option } from '@src/components/dropdown';
 import axios from 'axios';
 import NextLink from 'next/link';
 import { useState } from 'react';

apps/devportal/src/components/changelog/Hint.tsx

@@ -1,8 +1,7 @@
 import { Alert, AlertIcon, AlertTitle, Tooltip } from '@chakra-ui/react';
-import Link from 'next/link';
 import { getSlug } from '@scdp/changelog/utils';
-import { Option } from '@scdp/ui/components';
-
+import { Option } from '@src/components/dropdown';
+import Link from 'next/link';
 type HintProps = {
   products?: Option[];
   enabled: boolean;

apps/devportal/src/components/common/SocialFeeds.tsx

@@ -1,5 +1,5 @@
 import { PageInfo } from '@lib/interfaces/page-info';
-import { StackExchangeFeed, YouTubeFeed,SitecoreCommunityBlog, SitecoreCommunityQuestions } from '@scdp/ui/components';
+import { SitecoreCommunityBlog, SitecoreCommunityQuestions, StackExchangeFeed, YouTubeFeed } from '@src/components/integrations';
 
 type SocialFeedsProps = {
   pageInfo: PageInfo;

apps/devportal/src/components/engagetracker/TrackPageView.tsx

@@ -1,7 +1,6 @@
 import { PageInfo } from '@/src/lib/interfaces/page-info';
 import { Product } from '@scdp/changelog/types';
-import { useEngageTracker } from '@scdp/ui/components';
-//import { INestedObject } from '@sitecore/engage/types/lib/utils/flatten-object';
+import { useEngageTracker } from '@src/components/integrations/engage/useEngageTracker';
 import { useRouter } from 'next/router';
 import { FC, useEffect, useRef } from 'react';
 

packages/ui/src/components/hexagons/Hexagons.tsx → apps/devportal/src/components/hexagons/Hexagons.tsx

@@ -1,8 +1,8 @@
 'use client';
 import { Box, Heading, Text, UnorderedList } from '@chakra-ui/react';
+import { CommerceCloud, ContentCloud, EngagementCloud } from '@data/clouds';
+import { CDP, Connect, ContentHubONE, ContentOps, DAM, Discover, OrderCloud, Personalize, Search, Send, XMCloud } from '@data/products';
 import { useState } from 'react';
-import { CommerceCloud, ContentCloud, EngagementCloud } from '../../data/clouds';
-import { CDP, Connect, ContentHubONE, ContentOps, DAM, Discover, OrderCloud, Personalize, Search, Send, XMCloud } from '../../data/products';
 import { HexagonCloud } from './HexagonCloud';
 import { HexagonItem } from './HexagonItem';
 import { HexagonMobileItem } from './HexagonMobileItem';