@vygruppen/spor-react 2.3.1 → 2.3.4

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-DSLSJDMJ.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-QXVLVC2K.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "2.3.1",
+  "version": "2.3.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -17,15 +17,14 @@
     "directory": "packages/spor-react"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.3.5",
+    "@chakra-ui/react": "^2.6.1",
     "@chakra-ui/theme-tools": "^2.0.12",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@internationalized/date": "^3.0.1",
-    "@leile/lobo-t": "^1.0.5",
     "@vygruppen/spor-design-tokens": "*",
     "@vygruppen/spor-icon-react": "*",
     "@vygruppen/spor-loader": "*",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
     "framer-motion": ">6.0.0",
     "lottie-react": "^2.3.1",
     "react-aria": "^3.23.0",
@@ -33,10 +32,10 @@
     "react-swipeable": "^7.0.0"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tsup": "^6.2.2",
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",

package/src/i18n/index.tsx

@@ -1,4 +1,4 @@
-import { initLobot } from "@leile/lobo-t";
+import React, { createContext, useContext } from "react";
 
 export enum Language {
   NorwegianBokmal = "nb",
@@ -7,18 +7,101 @@ export enum Language {
   English = "en",
 }
 
-export const { LanguageProvider, useTranslation } = initLobot<typeof Language>(
-  Language.NorwegianBokmal
-);
-
-type LanguageObject = {
-  [key in Language]: string;
+type TranslationObject = {
+  [key in Language]: string | React.ReactElement;
 };
-type LanguageFunction = (...args: (string | number)[]) => LanguageObject;
+type TranslationFunction = (
+  ...args: Array<string | number>
+) => TranslationObject;
 
+type Translation = TranslationObject | TranslationFunction;
 export type Translations = {
-  [key: string]: LanguageObject | LanguageFunction;
+  [key: string]: Translation | Translations;
+};
+
+const LanguageContext = createContext<Language | undefined>(undefined);
+type LanguageProviderProps = {
+  language: Language;
+  children: React.ReactElement;
 };
+/**
+ * A language provider component.
+ *
+ * This component should wrap your entire application. It will provide the language to all components that use it.
+ *
+ * This is done by the SporProvider component, so most likely, you won't need to use it directly, unless you want to use a specific language for a specific part of your application.
+ *
+ * ```tsx
+ * import { LanguageProvider, Language } from "@vygruppen/spor-react";
+ *
+ * const App = () => {
+ *   return (
+ *     <LanguageProvider language={Language.NorwegianBokmal}>
+ *       <Routes />
+ *     </LanguageProvider>
+ *   );
+ * }
+ * ```
+ *
+ */
+export function LanguageProvider({
+  language,
+  children,
+}: LanguageProviderProps) {
+  return (
+    <LanguageContext.Provider value={language}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+/**
+ * Gets the language from the language context.
+ *
+ * @internal
+ */
+function useLanguage() {
+  const language = useContext(LanguageContext);
+  if (!language) {
+    throw new Error("Please wrap your application in a LanguageProvider");
+  }
+  return language;
+}
+
+/**
+ * A hook that returns translation utilities. Typically used to translate text.
+ *
+ * ```tsx
+ * const Example = () => {
+ *   const { t } = useTranslation();
+ *   return <p>{t(texts.greeting)}</p>;
+ * }
+ * const texts = {
+ *   greeting: {
+ *     nb: "Hei",
+ *     nn: "Hei",
+ *     sv: "Hej",
+ *     en: "Hello",
+ *   }
+ * }
+ * ```
+ *
+ * You can also use it to fetch the current language:
+ *
+ * ```tsx
+ * const Example = () => {
+ *   const { language } = useTranslation();
+ *   return <p>{language}</p>;
+ * };
+ * ```
+ */
+export function useTranslation() {
+  const language = useLanguage();
+  const t = (text: TranslationObject) => {
+    return text[language] as string;
+  };
+  return { t, language } as const;
+}
 
 /** Utility function that creates type safe text objects with useTranslation
  *
@@ -29,6 +112,14 @@ export type Translations = {
  *   nn: "Døme",
  *   sv: "Exempel",
  *   en: "Example",
+ *  },
+ *  another: {
+ *    example: {
+ *      nb: <strong>Eksempel</strong>,
+ *      nn: <strong>Døme</strong>,
+ *      sv: <strong>Exempel</strong>,
+ *      en: <strong>Example</strong>,
+ *    }
  *  }
  * })
  * ```

package/src/input/NumericStepper.tsx

@@ -31,7 +31,7 @@ type NumericStepperProps = {
   maxValue?: number;
   /** Whether the stepper is disabled or not */
   isDisabled?: boolean;
-} & BoxProps;
+} & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
  * Allows you to choose a given integer value, like for example the number of
@@ -103,7 +103,10 @@ export function NumericStepper({
         textAlign="center"
         backgroundColor={backgroundColor}
         color={textColor}
-        transition="all .1s ease-out"
+        transition="box-shadow .1s ease-out"
+        visibility={value === 0 ? "hidden" : "visible"}
+        aria-live="assertive"
+        aria-label={value.toString()}
         _hover={{
           boxShadow: getBoxShadowString({
             borderColor: "currentColor",

package/src/input/PhoneNumberInput.tsx

@@ -12,7 +12,7 @@ type CountryCodeAndPhoneNumber = {
   countryCode: string;
   nationalNumber: string;
 };
-type PhoneNumberInputProps = BoxProps & {
+type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
   /** The root name.
    *
    * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively

package/src/provider/SporProvider.tsx

@@ -51,7 +51,7 @@ export const SporProvider = ({
   ...props
 }: SporProviderProps) => {
   return (
-    <LanguageProvider value={language}>
+    <LanguageProvider language={language}>
       <ChakraProvider theme={theme} {...props}>
         <Global styles={fontFaces} />
         <Global