@vygruppen/spor-react 2.3.0 → 2.3.3

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, Counter, 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, 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-NYC3Z75S.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.0",
+  "version": "2.3.3",
   "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/{Counter.tsx → NumericStepper.tsx}

@@ -16,7 +16,7 @@ import {
 import { getBoxShadowString } from "../theme/utils/box-shadow-utils";
 import { focusVisible } from "../theme/utils/focus-utils";
 
-type CounterProps = {
+type NumericStepperProps = {
   /** The name of the input field */
   name?: string;
   /** The current value */
@@ -29,34 +29,34 @@ type CounterProps = {
   minValue?: number;
   /** Optional maximum value. Defaults to 99 */
   maxValue?: number;
-  /** Whether the counter is disabled or not */
+  /** Whether the stepper is disabled or not */
   isDisabled?: boolean;
 } & BoxProps;
-/** A simple counter component
+/** A simple stepper component for integer values
  *
  * Allows you to choose a given integer value, like for example the number of
  * adults on your journey.
  *
  * ```tsx
- * <Counter value={value} onChange={setValue} />
+ * <NumericStepper value={value} onChange={setValue} />
  * ```
  *
  * You can also set a minimum and/or maximum value:
  *
  * ```tsx
- * <Counter value={value} onChange={setValue} minValue={1} maxValue={10} />
+ * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} />
  * ```
  *
- * You can use the Counter inside of a FormControl component to get IDs etc linked up automatically:
+ * You can use the NumericStepper inside of a FormControl component to get IDs etc linked up automatically:
  *
  * ```tsx
  * <FormControl>
  *   <FormLabel>Number of adults</FormLabel>
- *   <Counter />
+ *   <NumericStepper />
  * </FormControl>
  * ```
  */
-export function Counter({
+export function NumericStepper({
   name: nameProp,
   id: idProp,
   value: valueProp,
@@ -66,7 +66,7 @@ export function Counter({
   maxValue = 99,
   isDisabled,
   ...boxProps
-}: CounterProps) {
+}: NumericStepperProps) {
   const { t } = useTranslation();
   const [value, onChange] = useControllableState<number>({
     value: valueProp,
@@ -103,7 +103,10 @@ export function Counter({
         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/index.tsx

@@ -5,7 +5,7 @@ export * from "./CardSelect";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChoiceChip";
-export * from "./Counter";
+export * from "./NumericStepper";
 export * from "./FormControl";
 export * from "./FormErrorMessage";
 export * from "./FormLabel";

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