@outtalent-dev/shared 1.1.0 → 1.1.2
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 +35 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,35 @@
|
|
|
1
|
-
# @outtalent/shared
|
|
1
|
+
# @outtalent-dev/shared
|
|
2
2
|
|
|
3
3
|
Shared UI components, composables, and utilities for Outtalent Vue 3 applications.
|
|
4
4
|
|
|
5
|
+
## Why this package exists
|
|
6
|
+
|
|
7
|
+
Outtalent has 6 frontend applications built on Vue 3: TrackTalent, LaunchPad, InterviewWatch, Offers, Tuition, and Payments Dashboard. Over time, significant amounts of code were copy-pasted between them -- UI components, utility functions, types, and composables.
|
|
8
|
+
|
|
9
|
+
This caused several problems:
|
|
10
|
+
|
|
11
|
+
- **Bug fixes applied inconsistently.** A fix in one app's `Button.vue` or `jwtDecoder.ts` was not propagated to the other five. Each app diverged slightly, creating subtle differences in behavior and appearance.
|
|
12
|
+
- **Duplicated effort on every change.** Any improvement to shared logic (e.g. the axios refresh queue, toast system, or form validation) had to be manually replicated across all repositories.
|
|
13
|
+
- **Inconsistent user experience.** The same UI component looked or behaved differently across products because each copy evolved independently.
|
|
14
|
+
- **Harder onboarding.** New developers had to learn the "local flavor" of each app instead of relying on a single, well-documented source of truth.
|
|
15
|
+
- **No versioning or changelog.** There was no way to track what changed in shared code, when, or why.
|
|
16
|
+
|
|
17
|
+
This package solves these problems by extracting the common layer into a single npm library with automated versioning, changelogs, and releases.
|
|
18
|
+
|
|
19
|
+
## What's included
|
|
20
|
+
|
|
21
|
+
| Category | Examples |
|
|
22
|
+
|----------|---------|
|
|
23
|
+
| **UI Components** | Button, Dialog, Toast, Form, Select, Calendar, Combobox, Popover, HoverCard, Input, Label, Textarea, Switch, Checkbox, Badge |
|
|
24
|
+
| **Utilities** | `cn` (Tailwind class merging), `decodeJWT`, `createApi` (axios factory with JWT refresh queue), `debounce` / `useDebouncedRef` |
|
|
25
|
+
| **Composables** | `usePrivacy`, `useSidebarStateSync`, `useToast` |
|
|
26
|
+
| **Types** | `User`, `UserUpdatePayload`, `Credentials`, `DisplayUserDetails`, `PlatformLink` |
|
|
27
|
+
| **Constants** | `platformLinks` (product switcher data) |
|
|
28
|
+
|
|
5
29
|
## Installation
|
|
6
30
|
|
|
7
31
|
```bash
|
|
8
|
-
npm install @outtalent/shared
|
|
32
|
+
npm install @outtalent-dev/shared
|
|
9
33
|
```
|
|
10
34
|
|
|
11
35
|
## Usage
|
|
@@ -14,14 +38,14 @@ npm install @outtalent/shared
|
|
|
14
38
|
|
|
15
39
|
```vue
|
|
16
40
|
<script setup>
|
|
17
|
-
import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input } from '@outtalent/shared'
|
|
41
|
+
import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input } from '@outtalent-dev/shared'
|
|
18
42
|
</script>
|
|
19
43
|
```
|
|
20
44
|
|
|
21
45
|
### Utilities
|
|
22
46
|
|
|
23
47
|
```ts
|
|
24
|
-
import { cn, decodeJWT, createApi } from '@outtalent/shared'
|
|
48
|
+
import { cn, decodeJWT, createApi } from '@outtalent-dev/shared'
|
|
25
49
|
|
|
26
50
|
// Tailwind class merging
|
|
27
51
|
const classes = cn('px-4 py-2', condition && 'bg-primary')
|
|
@@ -42,7 +66,7 @@ const api = createApi({
|
|
|
42
66
|
### Composables
|
|
43
67
|
|
|
44
68
|
```ts
|
|
45
|
-
import { usePrivacy, useToast, useSidebarStateSync } from '@outtalent/shared'
|
|
69
|
+
import { usePrivacy, useToast, useSidebarStateSync } from '@outtalent-dev/shared'
|
|
46
70
|
|
|
47
71
|
const { isBlurred, toggleBlur } = usePrivacy()
|
|
48
72
|
const { toast } = useToast()
|
|
@@ -51,7 +75,7 @@ const { toast } = useToast()
|
|
|
51
75
|
### Types
|
|
52
76
|
|
|
53
77
|
```ts
|
|
54
|
-
import type { User, Credentials, PlatformLink } from '@outtalent/shared'
|
|
78
|
+
import type { User, Credentials, PlatformLink } from '@outtalent-dev/shared'
|
|
55
79
|
```
|
|
56
80
|
|
|
57
81
|
## Development
|
|
@@ -67,11 +91,11 @@ npm run dev # watch mode
|
|
|
67
91
|
Releases are automated via GitHub Actions + semantic-release.
|
|
68
92
|
Commit messages must follow [Conventional Commits](https://www.conventionalcommits.org/):
|
|
69
93
|
|
|
70
|
-
- `fix: ...`
|
|
71
|
-
- `feat: ...`
|
|
72
|
-
- `feat!: ...` or `BREAKING CHANGE:`
|
|
94
|
+
- `fix: ...` -- patch release (1.0.0 -> 1.0.1)
|
|
95
|
+
- `feat: ...` -- minor release (1.0.0 -> 1.1.0)
|
|
96
|
+
- `feat!: ...` or `BREAKING CHANGE:` -- major release (1.0.0 -> 2.0.0)
|
|
73
97
|
|
|
74
98
|
### Setup (one-time)
|
|
75
99
|
|
|
76
|
-
1. Ensure `@outtalent` npm organization exists
|
|
77
|
-
2. Add `NPM_TOKEN` secret to GitHub repo settings
|
|
100
|
+
1. Ensure `@outtalent-dev` npm organization exists on [npmjs.com](https://www.npmjs.com/)
|
|
101
|
+
2. Add `NPM_TOKEN` (Automation type) secret to GitHub repo settings
|