[Minor] Types exported

apps/website/pages/_app.tsx

@@ -11,8 +11,7 @@ import "../global-styles.css";
 import createCache, { EmotionCache } from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import Link from "next/link";
-import { GroupItem, Item, Section } from "../../../packages/lib/src/base-menu/types";
-import { isGroupItem } from "../../../packages/lib/src/base-menu/utils";
+import { DxcBaseGroupItem, DxcBaseItem, DxcBaseSection } from "@dxc-technology/halstack-react";
 import SidenavLogo from "@/common/sidenav/SidenavLogo";
 import { dxcLogo } from "@/common/images/dxc_logo";
 
@@ -24,6 +23,8 @@ type AppPropsWithLayout = AppProps & {
   emotionCache?: EmotionCache;
 };
 
+export const isGroupItem = (item: DxcBaseItem | DxcBaseGroupItem): item is DxcBaseGroupItem => "items" in item;
+
 const clientSideEmotionCache = createCache({ key: "css", prepend: true });
 
 export default function App({ Component, pageProps, emotionCache = clientSideEmotionCache }: AppPropsWithLayout) {
@@ -39,7 +40,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
     return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false;
   };
 
-  const createNavItem = (link: LinkDetails): Item => ({
+  const createNavItem = (link: LinkDetails): DxcBaseItem => ({
     label: link.label,
     href: link.path,
     selected: matchPaths(link.path),
@@ -52,7 +53,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
     ),
   });
 
-  const normalizeNavTabs = (links: (LinkDetails | LinksSectionDetails)[]): (Item | GroupItem)[] => {
+  const normalizeNavTabs = (links: (LinkDetails | LinksSectionDetails)[]): (DxcBaseItem | DxcBaseGroupItem)[] => {
     return links.map((link) => {
       if ("links" in link) {
         return {
@@ -66,8 +67,8 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
     });
   };
 
-  const filterNavTree = (items: (Item | GroupItem)[], q: string): (Item | GroupItem)[] => {
-    const result: (Item | GroupItem)[] = [];
+  const filterNavTree = (items: (DxcBaseItem | DxcBaseGroupItem)[], q: string): (DxcBaseItem | DxcBaseGroupItem)[] => {
+    const result: (DxcBaseItem | DxcBaseGroupItem)[] = [];
 
     for (const item of items) {
       if (isGroupItem(item)) {
@@ -87,7 +88,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
     return result;
   };
 
-  const navItems: Section[] = useMemo(() => {
+  const navItems: DxcBaseSection[] = useMemo(() => {
     const q = filter.trim().toLowerCase();
 
     return LinksSections.map((section) => {

apps/website/screens/common/pagesList.tsx

@@ -1,4 +1,4 @@
-import { SVG } from "../../../../packages/lib/src/common/utils";
+import type { DxcSVG } from "@dxc-technology/halstack-react";
 import componentsList from "./componentsList.json";
 
 export type ComponentStatus = "experimental" | "new" | "stable" | "legacy" | "deprecated";
@@ -7,13 +7,13 @@ export type LinkDetails = {
   label: string;
   path: string;
   status?: ComponentStatus;
-  icon?: string | SVG;
+  icon?: string | DxcSVG;
 };
 
 export type LinksSectionDetails = {
   label: string;
   links: (LinkDetails | LinksSectionDetails)[];
-  icon?: string | SVG;
+  icon?: string | DxcSVG;
 };
 
 type NavigationLinks = {

apps/website/screens/components/message-input/overview/MessageInputOverviewPage.tsx

@@ -1,8 +1,6 @@
 import QuickNavContainer from "@/common/QuickNavContainer";
-import DxcFlex from "../../../../../../packages/lib/src/flex/Flex";
 import DocFooter from "@/common/DocFooter";
-import DxcParagraph from "../../../../../../packages/lib/src/paragraph/Paragraph";
-import { DxcBulletedList } from "@dxc-technology/halstack-react";
+import { DxcBulletedList, DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
 import Figure from "@/common/Figure";
 import Image from "@/common/Image";
 import messageInputAnatomy from "./images/message-input-anatomy.png";

apps/website/screens/foundations/tokens/tables/TokensTable.tsx

@@ -1,6 +1,6 @@
 import { TableCode } from "@/common/Code";
 import { DxcTable } from "@dxc-technology/halstack-react";
-import { aliasTokens, coreTokens } from "../../../../../../packages/lib/src/styles/tokens";
+import { DxcAliasTokens, DxcCoreTokens } from "@dxc-technology/halstack-react";
 import getTokensByCategory from "./utils/mapCategory";
 
 const TokensTable = ({ categories, type }: { categories: string[]; type: "alias" | "core" }) => (
@@ -12,7 +12,12 @@ const TokensTable = ({ categories, type }: { categories: string[]; type: "alias"
       </tr>
     </thead>
     <tbody>
-      {getTokensByCategory(type === "alias" ? aliasTokens : coreTokens, categories).map(([token, value]) => (
+      {getTokensByCategory(
+        type === "alias"
+          ? (DxcAliasTokens as Record<string, string | number>)
+          : (DxcCoreTokens as Record<string, string | number>),
+        categories
+      ).map(([token, value]) => (
         <tr key={token}>
           <td>
             <TableCode>{token}</TableCode>

apps/website/screens/guidelines/data-visualization/cloudscapeGuidelinesSection.tsx

@@ -1,7 +1,6 @@
 import { SectionType } from "@/common/Section";
-import DxcParagraph from "../../../../../packages/lib/src/paragraph/Paragraph";
 import Link from "next/link";
-import { DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
+import { DxcBulletedList, DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
 import Image from "@/common/Image";
 import cloudscapeBarImage from "./images/cloudscape_bar_chart.png";
 import cloudscapePieImage from "./images/cloudscape_pie_chart.png";

apps/website/screens/theme-generator/previews/components/DataGridPreview.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { DxcDataGrid, DxcContainer } from "@dxc-technology/halstack-react";
-import type { GridColumn } from "../../../../../../packages/lib/src/data-grid/types";
+import type { DxcDataGridColumn } from "@dxc-technology/halstack-react";
 
 const actions = [
   {
@@ -16,7 +16,7 @@ const actions = [
   },
 ];
 
-const columns: GridColumn[] = [
+const columns: DxcDataGridColumn[] = [
   {
     key: "id",
     label: "ID",

apps/website/screens/theme-generator/previews/examples/ApplicationPreview.tsx

@@ -13,7 +13,7 @@ import {
   DxcInset,
 } from "@dxc-technology/halstack-react";
 import { Logos } from "screens/theme-generator/types";
-import { GridRow } from "../../../../../../packages/lib/src/data-grid/types";
+import type { DxcDataGridRow } from "@dxc-technology/halstack-react";
 
 const columnsDatagrid = [
   {
@@ -348,7 +348,7 @@ const ApplicationPreview = ({ logos }: { logos: Logos }) => {
               </DxcFlex>
               <DxcDataGrid
                 columns={columnsDatagrid}
-                rows={rowsDatagrid as GridRow[]}
+                rows={rowsDatagrid as DxcDataGridRow[]}
                 uniqueRowId="policyId"
                 selectable
                 selectedRows={selectedRows}

apps/website/screens/theme-generator/steps/BrandingDetails.tsx

@@ -1,5 +1,5 @@
 import { DxcContainer, DxcFlex } from "@dxc-technology/halstack-react";
-import { FileData } from "../../../../../packages/lib/src/file-input/types";
+import type { DxcFileData } from "@dxc-technology/halstack-react";
 import { Colors, Logos } from "../types";
 import BrandingLogoGrid from "../components/branding/BrandingLogoGrid";
 import { brandingIcon, infoIcon, paletteIcon } from "./icons";
@@ -63,7 +63,7 @@ const BrandingDetails = ({
     });
   };
 
-  const updateLogoValue = (logoType: string, files: FileData[]) => {
+  const updateLogoValue = (logoType: string, files: DxcFileData[]) => {
     onLogosChange({
       ...logos,
       [logoType]: files,

apps/website/tsconfig.json

@@ -9,6 +9,6 @@
       "@/common/*": ["screens/common/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next.config.ts", "test", "../../packages/lib/src/**/*.d.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next.config.ts", "test"],
   "exclude": ["node_modules", "out", ".turbo", ".next"]
 }

packages/lib/src/accordion/Accordion.tsx

@@ -2,15 +2,15 @@ import { JSX, Children, useCallback, useMemo, useState } from "react";
 import styled from "@emotion/styled";
 import { getMargin } from "../common/utils";
 import { spaces } from "../common/variables";
-import AccordionPropsType, { AccordionContextProps } from "./types";
+import { AccordionProps, AccordionContextProps } from "./types";
 import AccordionContext from "./AccordionContext";
 import AccordionItem from "./AccordionItem";
 
-const calculateWidth = (margin: AccordionPropsType["margin"]) =>
+const calculateWidth = (margin: AccordionProps["margin"]) =>
   `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
 
 const AccordionContainer = styled.div<{
-  margin: AccordionPropsType["margin"];
+  margin: AccordionProps["margin"];
 }>`
   width: ${(props) => calculateWidth(props.margin)};
   margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "var(--spacing-padding-none)")};
@@ -74,7 +74,7 @@ const AccordionItemWithProvider = ({
   return <AccordionContext value={memoizedContext}>{child}</AccordionContext>;
 };
 
-const DxcAccordion = (props: AccordionPropsType): JSX.Element => {
+const DxcAccordion = (props: AccordionProps): JSX.Element => {
   const { children, defaultIndexActive, independent, indexActive, margin, onActiveChange } = props;
 
   const [innerIndexActive, setInnerIndexActive] = useState(

packages/lib/src/accordion/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode, ReactElement } from "react";
-import { Margin, SVG, Space } from "../common/utils";
+import { Margin, PrettifyTypes, SVG, Space } from "../common/types";
 
 export type AccordionItemProps = {
   /**
@@ -103,7 +103,7 @@ type NonIndependentProps = CommonProps & {
   onActiveChange?: (index: number[]) => void;
 };
 
-type Props = IndependentProps | NonIndependentProps;
+export type AccordionProps = PrettifyTypes<IndependentProps | NonIndependentProps>;
 
 export type AccordionContextProps = {
   index: number;
@@ -112,4 +112,4 @@ export type AccordionContextProps = {
   independent?: boolean;
 };
 
-export default Props;
+export type { AccordionProps as default };

packages/lib/src/action-icon/ActionIcon.stories.tsx

@@ -5,7 +5,7 @@ import DxcActionIcon from "./ActionIcon";
 import DxcFlex from "../flex/Flex";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer, { PseudoState } from "../../.storybook/components/ExampleContainer";
-import { ActionIconPropTypes, Status } from "./types";
+import { ActionIconProps, Status } from "./types";
 
 export default {
   title: "ActionIcon",
@@ -17,10 +17,10 @@ type Story = StoryObj<typeof DxcActionIcon>;
 type GroupingKey = "size" | "shape" | "color" | "statusPosition" | "statusMode" | "pseudoState";
 
 type ActionIconRowProps = {
-  sizes?: ActionIconPropTypes["size"][];
-  shapes?: ActionIconPropTypes["shape"][];
-  colors?: ActionIconPropTypes["color"][];
-  icon?: ActionIconPropTypes["icon"];
+  sizes?: ActionIconProps["size"][];
+  shapes?: ActionIconProps["shape"][];
+  colors?: ActionIconProps["color"][];
+  icon?: ActionIconProps["icon"];
   statusModes?: Status["mode"][];
   statusPositions?: (Status["position"] | undefined)[];
   pseudoStates?: (PseudoState | "disabled" | undefined)[];
@@ -30,7 +30,7 @@ type ActionIconRowProps = {
 const ActionIconRow = ({
   sizes = ["medium"],
   shapes = ["circle"],
-  colors = ["neutral"],
+  colors = [undefined],
   statusModes,
   statusPositions = [],
   pseudoStates = [],
@@ -58,9 +58,9 @@ const ActionIconRow = ({
   const renderGroup = (
     level: number,
     filters: {
-      size?: ActionIconPropTypes["size"];
-      shape?: ActionIconPropTypes["shape"];
-      color?: ActionIconPropTypes["color"];
+      size?: ActionIconProps["size"];
+      shape?: ActionIconProps["shape"];
+      color?: ActionIconProps["color"];
       statusMode?: Status["mode"];
       statusPosition?: Status["position"];
       pseudoState?: PseudoState | "disabled";
@@ -117,9 +117,9 @@ const ActionIconRow = ({
 
     return values.map((value) => {
       const newFilters = { ...filters };
-      if (key === "size") newFilters.size = value as ActionIconPropTypes["size"];
-      else if (key === "shape") newFilters.shape = value as ActionIconPropTypes["shape"];
-      else if (key === "color") newFilters.color = value as ActionIconPropTypes["color"];
+      if (key === "size") newFilters.size = value as ActionIconProps["size"];
+      else if (key === "shape") newFilters.shape = value as ActionIconProps["shape"];
+      else if (key === "color") newFilters.color = value as ActionIconProps["color"];
       else if (key === "statusPosition") newFilters.statusPosition = value as Status["position"];
       else if (key === "statusMode") newFilters.statusMode = value as Status["mode"];
       else if (key === "pseudoState") newFilters.pseudoState = value as PseudoState | "disabled";
@@ -144,6 +144,7 @@ export const Shapes: Story = {
         sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
         shapes={["circle", "square"]}
         groupBy={["shape", "size"]}
+        colors={["neutral"]}
       />
     </>
   ),
@@ -156,9 +157,10 @@ export const Colors: Story = {
       <ActionIconRow
         sizes={["medium"]}
         shapes={["circle"]}
-        colors={["neutral", "primary", "secondary", "tertiary", "success", "warning", "error", "info", "transparent"]}
+        colors={["neutral", "primary", "secondary", "tertiary", "success", "warning", "error", "info"]}
         groupBy={["color"]}
       />
+      <ActionIconRow colors={undefined} sizes={["medium"]} shapes={["circle"]} groupBy={["color"]} />
     </>
   ),
 };
@@ -167,10 +169,10 @@ export const PseudoStates: Story = {
   render: () => (
     <>
       <Title title="Pseudo states" theme="light" level={2} />
-      <DxcActionIcon color="transparent" icon="settings" onClick={() => console.log("hello")} />
+      <DxcActionIcon icon="settings" onClick={() => console.log("hello")} />
 
       <ActionIconRow
-        colors={["transparent"]}
+        colors={undefined}
         sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
         shapes={["square"]}
         statusModes={["success"]}
@@ -182,24 +184,26 @@ export const PseudoStates: Story = {
   ),
 };
 
-export const Types: Story = {
-  render: () => (
-    <>
-      <Title title="Icon (custom)" theme="light" level={2} />
-      <ActionIconRow
-        sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
-        shapes={["circle"]}
-        groupBy={["size"]}
-      />
-      <Title title="Icon (default)" theme="light" level={2} />
-      <ActionIconRow
-        sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
-        shapes={["circle"]}
-        groupBy={["size"]}
-      />
-    </>
-  ),
-};
+// export const Types: Story = {
+//   render: () => (
+//     <>
+//       <Title title="Icon (custom)" theme="light" level={2} />
+//       <ActionIconRow
+//         sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
+//         shapes={["circle"]}
+//         groupBy={["size"]}
+//         colors={["neutral"]}
+//       />
+//       <Title title="Icon (default)" theme="light" level={2} />
+//       <ActionIconRow
+//         sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
+//         shapes={["circle"]}
+//         groupBy={["size"]}
+//         colors={["neutral"]}
+//       />
+//     </>
+//   ),
+// };
 
 const Tooltip = () => (
   <>