@utk09/finra-ui 0.0.1 → 0.0.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 +184 -0
- package/package.json +21 -11
package/README.md
ADDED
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
# Finra UI
|
|
2
|
+
|
|
3
|
+
React component library for web applications.
|
|
4
|
+
|
|
5
|
+
[](https://github.com/utk09/finra-ui/actions/workflows/ci.yml)
|
|
6
|
+
[](https://www.npmjs.com/package/@utk09/finra-ui)
|
|
7
|
+
[](https://finra-ui.netlify.app)
|
|
8
|
+
|
|
9
|
+
## Live Demo
|
|
10
|
+
|
|
11
|
+
Browse all components with interactive examples: **[finra-ui.netlify.app](https://finra-ui.netlify.app)**
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @utk09/finra-ui
|
|
17
|
+
# or
|
|
18
|
+
pnpm add @utk09/finra-ui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
Import the global styles **once** at the root of your app, then use any component:
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import "@utk09/finra-ui/styles";
|
|
27
|
+
import { Button, Input, Badge } from "@utk09/finra-ui";
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<div>
|
|
32
|
+
<Button variant="primary">Click me</Button>
|
|
33
|
+
<Input placeholder="Enter text..." />
|
|
34
|
+
<Badge sentiment="success">Active</Badge>
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Components
|
|
41
|
+
|
|
42
|
+
### Styled Components
|
|
43
|
+
|
|
44
|
+
| Component | Description |
|
|
45
|
+
| ------------- | -------------------------------------------------------------------------------------------- |
|
|
46
|
+
| `Button` | Button with variant (primary/secondary/tertiary) and sentiment (danger/success/warning/info) |
|
|
47
|
+
| `IconButton` | Icon-only button with `aria-label` requirement |
|
|
48
|
+
| `ButtonGroup` | Groups buttons with merged borders |
|
|
49
|
+
| `Input` | Text input with variants, validation states, adornments, and clearable support |
|
|
50
|
+
| `Textarea` | Multi-line text input with character count and auto-resize |
|
|
51
|
+
| `NumberInput` | Numeric input with increment/decrement buttons |
|
|
52
|
+
| `FormField` | Wrapper that wires label, helper text, and error message with a11y attributes |
|
|
53
|
+
| `Checkbox` | Custom-styled checkbox with indeterminate support |
|
|
54
|
+
| `Switch` | Toggle switch (on/off) |
|
|
55
|
+
| `Badge` | Inline status/category label with variant and sentiment |
|
|
56
|
+
| `Divider` | Horizontal or vertical separator |
|
|
57
|
+
|
|
58
|
+
### Unstyled Components
|
|
59
|
+
|
|
60
|
+
Every styled component has an unstyled base that provides only behavior and accessibility — no visual styles. Import from the `/unstyled` entry point:
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { ButtonBase, CheckboxBase, SwitchBase } from "@utk09/finra-ui/unstyled";
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Available: `ButtonBase`, `IconButtonBase`, `InputBase`, `TextareaBase`, `NumberInputBase`, `CheckboxBase`, `SwitchBase`.
|
|
67
|
+
|
|
68
|
+
## Features
|
|
69
|
+
|
|
70
|
+
### Variants & Sentiments
|
|
71
|
+
|
|
72
|
+
Buttons and Badges support three **variants** and four **sentiments** that combine freely:
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
<Button variant="primary" sentiment="danger">Delete</Button>
|
|
76
|
+
<Button variant="secondary" sentiment="success">Approve</Button>
|
|
77
|
+
<Badge variant="tertiary" sentiment="warning">Pending</Badge>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Density System
|
|
81
|
+
|
|
82
|
+
Control spacing globally via a `data-density` attribute on any ancestor element. All components respond automatically — no props needed:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
{
|
|
86
|
+
/* Compact UI for data-dense screens */
|
|
87
|
+
}
|
|
88
|
+
<div data-density="high">
|
|
89
|
+
<Button>Tight</Button>
|
|
90
|
+
<Input placeholder="Compact" />
|
|
91
|
+
</div>;
|
|
92
|
+
|
|
93
|
+
{
|
|
94
|
+
/* Spacious UI */
|
|
95
|
+
}
|
|
96
|
+
<div data-density="low">
|
|
97
|
+
<Button>Relaxed</Button>
|
|
98
|
+
</div>;
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Three levels: `high`, `medium` (default), `low`.
|
|
102
|
+
|
|
103
|
+
### Theming
|
|
104
|
+
|
|
105
|
+
Override design tokens via CSS custom properties. Every component uses `--color-*`, `--radius-*`, `--font-*` tokens defined in the global styles:
|
|
106
|
+
|
|
107
|
+
```css
|
|
108
|
+
:root {
|
|
109
|
+
--color-primary-600: #2563eb;
|
|
110
|
+
--color-error: #dc2626;
|
|
111
|
+
--radius-md: 0.375rem;
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### CSS Override Selectors
|
|
116
|
+
|
|
117
|
+
Every component renders a stable `data-finra-ui` attribute for targeted CSS overrides:
|
|
118
|
+
|
|
119
|
+
```css
|
|
120
|
+
[data-finra-ui="button"] {
|
|
121
|
+
text-transform: uppercase;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
[data-finra-ui="input"] {
|
|
125
|
+
min-height: 3rem;
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Form Field Composition
|
|
130
|
+
|
|
131
|
+
`FormField` automatically wires `id`, `aria-describedby`, `aria-invalid`, and `disabled` onto its child input:
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
<FormField
|
|
135
|
+
label="Email"
|
|
136
|
+
required
|
|
137
|
+
validationStatus="error"
|
|
138
|
+
errorMessage="Please enter a valid email."
|
|
139
|
+
helperText="We'll never share your email.">
|
|
140
|
+
<Input placeholder="you@example.com" />
|
|
141
|
+
</FormField>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Zero External Runtime Dependencies
|
|
145
|
+
|
|
146
|
+
The only runtime dependencies are `clsx` and `class-variance-authority` — no Radix, no Emotion, no runtime CSS-in-JS.
|
|
147
|
+
|
|
148
|
+
## Development
|
|
149
|
+
|
|
150
|
+
This is a pnpm monorepo with Turborepo.
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
# Install dependencies
|
|
154
|
+
pnpm install
|
|
155
|
+
|
|
156
|
+
# Run development (Storybook)
|
|
157
|
+
pnpm run dev
|
|
158
|
+
|
|
159
|
+
# Build the library
|
|
160
|
+
pnpm run build
|
|
161
|
+
|
|
162
|
+
# Run tests
|
|
163
|
+
pnpm run test
|
|
164
|
+
|
|
165
|
+
# Type check
|
|
166
|
+
pnpm run typecheck
|
|
167
|
+
|
|
168
|
+
# Lint
|
|
169
|
+
pnpm run lint
|
|
170
|
+
|
|
171
|
+
# All checks at once
|
|
172
|
+
pnpm run typecheck && pnpm run lint && pnpm run test
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Project Structure
|
|
176
|
+
|
|
177
|
+
```txt
|
|
178
|
+
packages/core/ — Component library (@utk09/finra-ui)
|
|
179
|
+
apps/storybook/ — Storybook documentation app
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## License
|
|
183
|
+
|
|
184
|
+
[MIT](LICENSE)
|
package/package.json
CHANGED
|
@@ -1,16 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@utk09/finra-ui",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Core UI components and styles",
|
|
5
|
-
"
|
|
6
|
-
"keywords": [
|
|
7
|
-
"react",
|
|
8
|
-
"components",
|
|
9
|
-
"ui",
|
|
10
|
-
"design-system",
|
|
11
|
-
"finance",
|
|
12
|
-
"web"
|
|
13
|
-
],
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "Component library for web applications. Core UI components and styles.",
|
|
5
|
+
"displayName": "Finra UI",
|
|
14
6
|
"type": "module",
|
|
15
7
|
"main": "./dist/index.js",
|
|
16
8
|
"types": "./dist/index.d.ts",
|
|
@@ -69,6 +61,24 @@
|
|
|
69
61
|
"react": ">=18.0.0",
|
|
70
62
|
"react-dom": ">=18.0.0"
|
|
71
63
|
},
|
|
64
|
+
"author": {
|
|
65
|
+
"name": "@utk09"
|
|
66
|
+
},
|
|
67
|
+
"repository": {
|
|
68
|
+
"url": "https://github.com/utk09/finra-ui"
|
|
69
|
+
},
|
|
70
|
+
"homepage": "https://finra-ui.netlify.app/",
|
|
71
|
+
"license": "MIT",
|
|
72
|
+
"keywords": [
|
|
73
|
+
"components",
|
|
74
|
+
"react",
|
|
75
|
+
"design-system",
|
|
76
|
+
"finance",
|
|
77
|
+
"ecommerce",
|
|
78
|
+
"finra",
|
|
79
|
+
"storybook",
|
|
80
|
+
"web"
|
|
81
|
+
],
|
|
72
82
|
"scripts": {
|
|
73
83
|
"build": "vite build",
|
|
74
84
|
"dev": "vite build --watch",
|