@rarui/components 1.21.0 → 1.22.0
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/CHANGELOG.md +11 -0
- package/custom-elements.json +1141 -1012
- package/dist/index.d.ts +240 -80
- package/dist/index.js +176 -156
- package/package.json +1 -1
- package/src/types/CHANGELOG.md +22 -0
- package/src/types/README.md +73 -0
package/package.json
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
Shared TypeScript utilities for Rarui Web Components that automatically convert React component props to web component attributes with camelCase to kebab-case conversion.
|
|
4
|
+
|
|
5
|
+
## 2025-09-01 `1.0.0`
|
|
6
|
+
|
|
7
|
+
#### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added `WebComponentProperties<T, E>` utility type for converting React props to web component attributes. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
|
|
10
|
+
- Added `CamelToKebab<T>` utility type for converting camelCase strings to kebab-case. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
|
|
11
|
+
- Added `CamelToKebabKeys<T>` utility type for converting all object keys from camelCase to kebab-case. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
|
|
12
|
+
- Added `ExtendedWebComponentProperties<T, E>` utility with automatic callback property exclusion. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
|
|
13
|
+
- Added comprehensive TypeScript type safety with full IntelliSense support. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
|
|
14
|
+
- Added automatic exclusion of common React-only properties (children, className, style, ref, key). ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
|
|
15
|
+
|
|
16
|
+
<!-- #### 🛠 Breaking changes -->
|
|
17
|
+
|
|
18
|
+
<!-- #### 📚 3rd party library updates -->
|
|
19
|
+
|
|
20
|
+
<!-- #### 🐛 Bug fixes -->
|
|
21
|
+
|
|
22
|
+
<!-- #### 💡 Others -->
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# Web Components Type Utilities
|
|
2
|
+
|
|
3
|
+
Shared TypeScript utilities for Rarui Web Components that automatically convert React component props to web component attributes with camelCase to kebab-case conversion.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
This package is part of the Rarui monorepo and is used internally by web components.
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
import { WebComponentProperties } from "@rarui/web-components-types";
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Basic Usage
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import { SidebarProps } from "@rarui/typings";
|
|
19
|
+
import { WebComponentProperties } from "@rarui/web-components-types";
|
|
20
|
+
|
|
21
|
+
export type SidebarProperties = WebComponentProperties<
|
|
22
|
+
SidebarProps,
|
|
23
|
+
"onRemove" // Exclude callback properties
|
|
24
|
+
>;
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Available Types
|
|
28
|
+
|
|
29
|
+
#### `WebComponentProperties<TReactProps, TExclude>`
|
|
30
|
+
Main utility for creating web component properties from React props.
|
|
31
|
+
|
|
32
|
+
- Converts camelCase to kebab-case
|
|
33
|
+
- Excludes common React props (`children`, `className`, `style`, `ref`, `key`)
|
|
34
|
+
- Allows additional exclusions
|
|
35
|
+
|
|
36
|
+
#### `ExtendedWebComponentProperties<TReactProps, TExclude>`
|
|
37
|
+
Extended version that also automatically excludes all callback properties (`onXxx`).
|
|
38
|
+
|
|
39
|
+
#### `CamelToKebab<T>` and `CamelToKebabKeys<T>`
|
|
40
|
+
Low-level utilities for string and object key conversion.
|
|
41
|
+
|
|
42
|
+
### Conversion Examples
|
|
43
|
+
|
|
44
|
+
| React Prop (camelCase) | Web Component Attribute (kebab-case) |
|
|
45
|
+
|----------------------|-----------------------------------|
|
|
46
|
+
| `maxWidth` | `max-width` |
|
|
47
|
+
| `portalId` | `portal-id` |
|
|
48
|
+
| `backgroundColor` | `background-color` |
|
|
49
|
+
| `onRemove` | excluded (callback) |
|
|
50
|
+
| `children` | excluded (React-only) |
|
|
51
|
+
|
|
52
|
+
### Implementation Pattern
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
// 1. Define types
|
|
56
|
+
export type ComponentProperties = WebComponentProperties<
|
|
57
|
+
ReactComponentProps,
|
|
58
|
+
"specificCallbackToExclude"
|
|
59
|
+
>;
|
|
60
|
+
|
|
61
|
+
// 2. Use in component
|
|
62
|
+
@property({ type: String, attribute: "max-width" })
|
|
63
|
+
maxWidth: ComponentProperties["max-width"] = "375px";
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Features
|
|
67
|
+
|
|
68
|
+
- ✅ **Type Safety**: Full TypeScript support with IntelliSense
|
|
69
|
+
- ✅ **Automatic Conversion**: camelCase → kebab-case
|
|
70
|
+
- ✅ **Smart Exclusions**: Removes React-only properties
|
|
71
|
+
- ✅ **Callback Handling**: Option to exclude callback properties
|
|
72
|
+
- ✅ **Inheritance**: Inherit all properties from React components
|
|
73
|
+
- ✅ **Extensible**: Easy to add custom exclusions
|