feat: re-export NDS themes to be used as an escape hatch

In v11, NDS introduced context-specific default themes. Directly
importing themes from NDS would result in using the wrong theme, causing
conflicts between custom app themes, desktop, and touch variants.

While the work-arounds provided at the time were sufficient for most use
cases, some required a direct import of the theme.

This release re-introduces the theme exports as an escape hatch to
*only* be used when the work-arounds outlined in v11 release notes are
insufficient.

The release exports the `desktop`, `phone`, `tablet` themes as well
as a `themes` object which has the type of
`Record<"legacy" | "experimental" | "tablet" | "phone", DefaultNDSThemeType>`
to be used for dynamic theme lookup

Example usage:

`import { desktop as theme } from "@nulogy/components";`

src/Tokens/Tokens.story.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Text, Box, Flex, Heading3 } from "..";
 import { useTheme } from "styled-components";
+import { Text, Box, Flex, Heading3 } from "..";
 
 export default {
   title: "Tokens",
@@ -40,7 +40,7 @@ export const FontSizes = () => {
   return (
     <Box>
       {Object.keys(theme.fontSizes).map((fontSize) => (
-        <Text mb="x2" fontSize={fontSize}>
+        <Text key={fontSize} mb="x2" fontSize={fontSize}>
           {fontSize}: {theme.fontSizes[fontSize]}
         </Text>
       ))}
@@ -74,7 +74,7 @@ export const FontWeights = () => {
   return (
     <Box>
       {Object.keys(theme.fontWeights).map((fontWeight) => (
-        <Text mb="x2" fontWeight={fontWeight}>
+        <Text key={fontWeight} mb="x2" fontWeight={fontWeight}>
           {fontWeight}: {theme.fontWeights[fontWeight]}
         </Text>
       ))}
@@ -88,7 +88,7 @@ export const SpaceAndSize = () => {
   return (
     <Box>
       {Object.keys(theme.space).map((space) => (
-        <Flex mb="x2" alignItems="center" width="300px">
+        <Flex key={space} mb="x2" alignItems="center" width="300px">
           <Flex width="80px" justifyContent="flex-end" mr="x1">
             <Box bg="lightGrey" height={space} width={space} />
           </Flex>
@@ -106,7 +106,7 @@ export const Font = () => {
   return (
     <Box>
       {Object.keys(theme.fonts).map((font) => (
-        <Text mb="x2" fontFamily={font}>
+        <Text key={font} mb="x2" fontFamily={font}>
           {font}: {theme.fonts[font]}
         </Text>
       ))}
@@ -119,7 +119,7 @@ export const Shadows = () => {
   return (
     <Box>
       {Object.keys(theme.shadows).map((shadow) => (
-        <Box mb="x2" p="x1" borderRadius="small" boxShadow={shadow}>
+        <Box key={shadow} mb="x2" p="x1" borderRadius="small" boxShadow={shadow}>
           {shadow}: {theme.shadows[shadow]}
         </Box>
       ))}
@@ -133,6 +133,7 @@ export const Radii = () => {
     <Flex maxWidth="300px" flexDirection="column" alignItems="center">
       {Object.keys(theme.radii).map((radius) => (
         <Flex
+          key={radius}
           mb="x2"
           p="x1"
           borderRadius={radius}
@@ -157,7 +158,7 @@ export const Breakpoints = () => {
       {Object.keys(theme.breakpoints)
         .filter((bp) => bp !== "map")
         .map((breakpoint) => (
-          <Text mb="x2">
+          <Text mb="x2" key={breakpoint}>
             {breakpoint}: {theme.breakpoints[breakpoint]}
           </Text>
         ))}

src/hooks/useMediaQuery/useMediaQuery.ts

@@ -1,6 +1,8 @@
 import { ThemeContext } from "styled-components";
 import React, { useCallback, useEffect, useState } from "react";
-import { Breakpoints } from "../../theme";
+import { DefaultNDSThemeType } from "../../theme";
+
+type Breakpoints = DefaultNDSThemeType["breakpoints"];
 
 type Query = keyof Breakpoints | (string & {});
 

src/index.ts

@@ -74,6 +74,7 @@ export { Table } from "./Table";
 export type { TableCellInfoType, TableColumnType, TableProps, TableRowType } from "./Table";
 export { Tab, Tabs } from "./Tabs";
 export { Textarea } from "./Textarea";
+export { desktop, phone, tablet, themes } from "./theme";
 export type { DefaultNDSThemeType, ThemeType } from "./theme";
 export { TimePicker } from "./TimePicker";
 export { TimeRange } from "./TimeRange";

src/theme/index.ts

@@ -1,2 +1,2 @@
 export { themes, phone, tablet, legacy as desktop } from "./theme";
-export type { ThemeType, DefaultNDSThemeType, Breakpoints } from "./theme.type";
+export type { ThemeType, DefaultNDSThemeType } from "./theme.type";

src/theme/useNDSTheme.tsx

@@ -4,10 +4,12 @@ import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { FeatureFlags, useFeatureFlags } from "../NDSProvider/FeatureFlagsContext";
 import { mergeThemes } from "./mergeThemes.util";
 import { legacy, themes } from "./theme";
-import { Breakpoints, DefaultNDSThemeType, ThemeType } from "./theme.type";
+import { DefaultNDSThemeType, ThemeType } from "./theme.type";
 
 const THEME_VARIANTS: ReadonlySet<ComponentVariant> = new Set(["desktop", "touch"]);
 
+type Breakpoints = DefaultNDSThemeType["breakpoints"];
+
 export const buildBreakPoints = (breakpointsConfig: Readonly<Breakpoints>) => ({
   ...breakpointsConfig,
   map: function <T>(fn: (value: string) => T) {