@obosbbl/grunnmuren-react 2.0.0-canary.2 → 2.0.0-canary.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -0
- package/dist/index.d.mts +2 -2
- package/dist/index.mjs +5 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,6 +14,42 @@ npm install @obosbbl/grunnmuren-react@canary
|
|
|
14
14
|
pnpm add @obosbbl/grunnmuren-react@canary
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
+
## Localization configuration
|
|
18
|
+
|
|
19
|
+
Grunnmuren uses [React Aria Components](https://react-spectrum.adobe.com/react-aria/) under the hood. RAC has built in translation strings for non visible content (for accessibility reasons). It also automatically detects the language based on the browser or system language.
|
|
20
|
+
|
|
21
|
+
To ensure that the language of the page content matches the accessibility strings you should wrap your application in a `I18nProvider`. This will override RAC's automatic locale selection.
|
|
22
|
+
|
|
23
|
+
In [Next.js](https://nextjs.org/) you can do this in the root [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
|
|
24
|
+
|
|
25
|
+
Valid locales for Norwegian are `nb-NO` or `nb`, Swedish is `sv-SE` or `sv`.
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
// app/layout.tsx
|
|
29
|
+
import { I18nProvider } from '@obosbbl/grunnmuren-react';
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
export default function RootLayout({
|
|
33
|
+
children,
|
|
34
|
+
}: {
|
|
35
|
+
children: React.ReactNode
|
|
36
|
+
}) {
|
|
37
|
+
|
|
38
|
+
// Either 'nb' or 'sv'
|
|
39
|
+
const locale = 'nb';
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<I18nProvider locale={locale}>
|
|
43
|
+
<html lang={locale}>
|
|
44
|
+
<body>{children}</body>
|
|
45
|
+
</html>
|
|
46
|
+
</I18nProvider>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
See the [RAC internationalization docs](https://react-spectrum.adobe.com/react-aria/internationalization.html) for more information.
|
|
52
|
+
|
|
17
53
|
## Usage
|
|
18
54
|
|
|
19
55
|
Before you start using the components you need to configure the [Tailwind preset](../tailwind/). Remember to add this package to the content scan.
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ComboBoxProps, ListBoxItemProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
|
|
2
|
-
export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
|
|
2
|
+
export { ListBoxItemProps as ComboboxItemProps, Form, I18nProvider, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { VariantProps } from 'cva';
|
|
5
5
|
|
|
@@ -77,7 +77,7 @@ type ButtonProps = VariantProps<typeof buttonVariants> & {
|
|
|
77
77
|
* Display the button in a loading state
|
|
78
78
|
* @default false
|
|
79
79
|
*/
|
|
80
|
-
|
|
80
|
+
isLoading?: boolean;
|
|
81
81
|
style?: React.CSSProperties;
|
|
82
82
|
} & ButtonOrLinkProps;
|
|
83
83
|
declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ComboBox, Group, Input, Button as Button$1, Popover, ListBox, ListBoxItem, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
|
|
2
|
-
export { Form } from 'react-aria-components';
|
|
2
|
+
export { Form, I18nProvider } from 'react-aria-components';
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { useRef, useState, useId } from 'react';
|
|
5
5
|
import { cva, cx, compose } from 'cva';
|
|
@@ -90,12 +90,12 @@ import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5na
|
|
|
90
90
|
}
|
|
91
91
|
});
|
|
92
92
|
function Button(props) {
|
|
93
|
-
const { children, className, color, isIconOnly,
|
|
93
|
+
const { children, className, color, isIconOnly, isLoading, variant, style, ...restProps } = props;
|
|
94
94
|
// TODO: Merge refs when we use RAC
|
|
95
95
|
const buttonRef = useRef(null);
|
|
96
96
|
const [widthOverride, setWidthOverride] = useState();
|
|
97
97
|
useClientLayoutEffect(()=>{
|
|
98
|
-
if (
|
|
98
|
+
if (isLoading) {
|
|
99
99
|
const requestID = window.requestAnimationFrame(()=>{
|
|
100
100
|
setWidthOverride(buttonRef?.current?.getBoundingClientRect()?.width);
|
|
101
101
|
});
|
|
@@ -105,7 +105,7 @@ function Button(props) {
|
|
|
105
105
|
};
|
|
106
106
|
}
|
|
107
107
|
}, [
|
|
108
|
-
|
|
108
|
+
isLoading,
|
|
109
109
|
children
|
|
110
110
|
]);
|
|
111
111
|
let Component = 'a';
|
|
@@ -116,7 +116,7 @@ function Button(props) {
|
|
|
116
116
|
}
|
|
117
117
|
return(// @ts-expect-error TS doesn't agree here taht restProps is safe to spread, because restProps for anchors aren't type compatible with restProps for buttons, but that should be okay here
|
|
118
118
|
/*#__PURE__*/ jsx(Component, {
|
|
119
|
-
"aria-busy":
|
|
119
|
+
"aria-busy": isLoading ? true : undefined,
|
|
120
120
|
className: buttonVariants({
|
|
121
121
|
className,
|
|
122
122
|
color,
|