@reactor-team/ui 0.1.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/README.md +96 -0
- package/dist/components/Button/Button.d.ts +14 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/reactor-ui.cjs +2 -0
- package/dist/reactor-ui.cjs.map +1 -0
- package/dist/reactor-ui.mjs +37 -0
- package/dist/reactor-ui.mjs.map +1 -0
- package/dist/ui.css +1 -0
- package/package.json +73 -0
package/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# Reactor UI Components
|
|
2
|
+
|
|
3
|
+
A reusable React component library for Reactor applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @reactor/ui-components
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Button } from '@reactor/ui-components';
|
|
15
|
+
import '@reactor/ui-components/styles.css';
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
return (
|
|
19
|
+
<Button variant="primary" shadow>
|
|
20
|
+
Click Me
|
|
21
|
+
</Button>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Development
|
|
27
|
+
|
|
28
|
+
### Prerequisites
|
|
29
|
+
|
|
30
|
+
- Node.js 18+
|
|
31
|
+
- npm 9+
|
|
32
|
+
|
|
33
|
+
### Setup
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm install
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Storybook
|
|
40
|
+
|
|
41
|
+
Run Storybook for component development and documentation:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npm run dev
|
|
45
|
+
# or
|
|
46
|
+
npm run storybook
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Build
|
|
50
|
+
|
|
51
|
+
Build the library for production:
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npm run build
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Type Checking
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npm run typecheck
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Components
|
|
64
|
+
|
|
65
|
+
### Button
|
|
66
|
+
|
|
67
|
+
A customizable button component with multiple variants and sizes.
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<Button
|
|
71
|
+
variant="primary" // 'primary' | 'secondary' | 'ghost'
|
|
72
|
+
size="default" // 'small' | 'default' | 'large'
|
|
73
|
+
shadow={true} // Enable/disable shadow effect
|
|
74
|
+
disabled={false} // Disable the button
|
|
75
|
+
>
|
|
76
|
+
Button Text
|
|
77
|
+
</Button>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Design Tokens
|
|
81
|
+
|
|
82
|
+
The library uses CSS custom properties for design tokens:
|
|
83
|
+
|
|
84
|
+
### Colors
|
|
85
|
+
- `--reactor-color-interstellar`: #000000
|
|
86
|
+
- `--reactor-color-light-gold`: #FDF5C6
|
|
87
|
+
|
|
88
|
+
### Typography
|
|
89
|
+
- `--reactor-font-mono`: 'IBM Plex Mono', monospace
|
|
90
|
+
|
|
91
|
+
### Shadows
|
|
92
|
+
- `--reactor-shadow-button`: Multi-layer box shadow
|
|
93
|
+
|
|
94
|
+
## License
|
|
95
|
+
|
|
96
|
+
MIT
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
export type ButtonSize = 'small' | 'default' | 'large';
|
|
3
|
+
export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
|
|
4
|
+
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
/** The visual style variant of the button */
|
|
6
|
+
variant?: ButtonVariant;
|
|
7
|
+
/** The size of the button */
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
/** Whether to show the shadow effect */
|
|
10
|
+
shadow?: boolean;
|
|
11
|
+
/** The button label text */
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Button';
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),r=b.forwardRef(({variant:o="primary",size:a="default",shadow:n=!0,children:s,className:u="",disabled:t,...c},l)=>{const i=["reactor-button",`reactor-button--${o}`,`reactor-button--${a}`,n&&"reactor-button--shadow",t&&"reactor-button--disabled",u].filter(Boolean).join(" ");return e.jsx("button",{ref:l,className:i,disabled:t,...c,children:e.jsx("span",{className:"reactor-button__label",children:s})})});r.displayName="Button";exports.Button=r;
|
|
2
|
+
//# sourceMappingURL=reactor-ui.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reactor-ui.cjs","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react';\nimport './Button.css';\n\nexport type ButtonSize = 'small' | 'default' | 'large';\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** The visual style variant of the button */\n variant?: ButtonVariant;\n /** The size of the button */\n size?: ButtonSize;\n /** Whether to show the shadow effect */\n shadow?: boolean;\n /** The button label text */\n children: React.ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'default',\n shadow = true,\n children,\n className = '',\n disabled,\n ...props\n },\n ref\n ) => {\n const classNames = [\n 'reactor-button',\n `reactor-button--${variant}`,\n `reactor-button--${size}`,\n shadow && 'reactor-button--shadow',\n disabled && 'reactor-button--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={classNames}\n disabled={disabled}\n {...props}\n >\n <span className=\"reactor-button__label\">{children}</span>\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","variant","size","shadow","children","className","disabled","props","ref","classNames","jsx"],"mappings":"wIAiBaA,EAASC,EAAAA,WACpB,CACE,CACE,QAAAC,EAAU,UACV,KAAAC,EAAO,UACP,OAAAC,EAAS,GACT,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAa,CACjB,iBACA,mBAAmBR,CAAO,GAC1B,mBAAmBC,CAAI,GACvBC,GAAU,yBACVG,GAAY,2BACZD,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,EAAAA,IAAC,SAAA,CACC,IAAAF,EACA,UAAWC,EACX,SAAAH,EACC,GAAGC,EAEJ,SAAAG,EAAAA,IAAC,OAAA,CAAK,UAAU,wBAAyB,SAAAN,CAAA,CAAS,CAAA,CAAA,CAGxD,CACF,EAEAL,EAAO,YAAc"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as m } from "react";
|
|
3
|
+
const b = m(
|
|
4
|
+
({
|
|
5
|
+
variant: r = "primary",
|
|
6
|
+
size: a = "default",
|
|
7
|
+
shadow: e = !0,
|
|
8
|
+
children: n,
|
|
9
|
+
className: s = "",
|
|
10
|
+
disabled: t,
|
|
11
|
+
...c
|
|
12
|
+
}, u) => {
|
|
13
|
+
const l = [
|
|
14
|
+
"reactor-button",
|
|
15
|
+
`reactor-button--${r}`,
|
|
16
|
+
`reactor-button--${a}`,
|
|
17
|
+
e && "reactor-button--shadow",
|
|
18
|
+
t && "reactor-button--disabled",
|
|
19
|
+
s
|
|
20
|
+
].filter(Boolean).join(" ");
|
|
21
|
+
return /* @__PURE__ */ o(
|
|
22
|
+
"button",
|
|
23
|
+
{
|
|
24
|
+
ref: u,
|
|
25
|
+
className: l,
|
|
26
|
+
disabled: t,
|
|
27
|
+
...c,
|
|
28
|
+
children: /* @__PURE__ */ o("span", { className: "reactor-button__label", children: n })
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
b.displayName = "Button";
|
|
34
|
+
export {
|
|
35
|
+
b as Button
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=reactor-ui.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reactor-ui.mjs","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react';\nimport './Button.css';\n\nexport type ButtonSize = 'small' | 'default' | 'large';\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** The visual style variant of the button */\n variant?: ButtonVariant;\n /** The size of the button */\n size?: ButtonSize;\n /** Whether to show the shadow effect */\n shadow?: boolean;\n /** The button label text */\n children: React.ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'default',\n shadow = true,\n children,\n className = '',\n disabled,\n ...props\n },\n ref\n ) => {\n const classNames = [\n 'reactor-button',\n `reactor-button--${variant}`,\n `reactor-button--${size}`,\n shadow && 'reactor-button--shadow',\n disabled && 'reactor-button--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={classNames}\n disabled={disabled}\n {...props}\n >\n <span className=\"reactor-button__label\">{children}</span>\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","variant","size","shadow","children","className","disabled","props","ref","classNames","jsx"],"mappings":";;AAiBO,MAAMA,IAASC;AAAA,EACpB,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAa;AAAA,MACjB;AAAA,MACA,mBAAmBR,CAAO;AAAA,MAC1B,mBAAmBC,CAAI;AAAA,MACvBC,KAAU;AAAA,MACVG,KAAY;AAAA,MACZD;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWC;AAAA,QACX,UAAAH;AAAA,QACC,GAAGC;AAAA,QAEJ,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxD;AACF;AAEAL,EAAO,cAAc;"}
|
package/dist/ui.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap";:root{--reactor-color-interstellar: #000000;--reactor-color-light: #FFFFFF;--reactor-color-light-gold: #FDF5C6;--reactor-shadow-button: 0px 1px 2px rgba(0, 0, 0, .1), 0px 4px 4px rgba(0, 0, 0, .09), 0px 10px 6px rgba(0, 0, 0, .05), 0px 18px 7px rgba(0, 0, 0, .01), 0px 28px 8px rgba(0, 0, 0, 0)}:root{--reactor-font-mono: "IBM Plex Mono", monospace;--reactor-font-size-sm: 12px;--reactor-font-size-base: 14px;--reactor-font-size-lg: 16px;--reactor-line-height-tight: 1.2;--reactor-line-height-normal: 1.5;--reactor-font-weight-regular: 400;--reactor-font-weight-medium: 500;--reactor-font-weight-semibold: 600;--reactor-font-weight-bold: 700}.reactor-button{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:var(--reactor-font-mono);font-weight:var(--reactor-font-weight-regular);line-height:var(--reactor-line-height-tight);text-transform:uppercase;transition:all .15s ease-in-out;border-radius:4px;white-space:nowrap}.reactor-button--small{padding:6px 12px;font-size:var(--reactor-font-size-sm)}.reactor-button--default{padding:8px 16px;font-size:var(--reactor-font-size-base)}.reactor-button--large{padding:12px 24px;font-size:var(--reactor-font-size-lg)}.reactor-button--primary{background-color:var(--reactor-color-light-gold);color:var(--reactor-color-interstellar)}.reactor-button--primary:hover{background-color:#f5edb8}.reactor-button--primary:active{background-color:#ece4a8}.reactor-button--secondary{background-color:transparent;color:var(--reactor-color-interstellar);border:1px solid var(--reactor-color-interstellar)}.reactor-button--secondary:hover{background-color:#0000000d}.reactor-button--secondary:active{background-color:#0000001a}.reactor-button--tertiary{background-color:var(--reactor-color-light);color:var(--reactor-color-interstellar)}.reactor-button--tertiary:hover{background-color:#f5f5f5}.reactor-button--tertiary:active{background-color:#ebebeb}.reactor-button--ghost{background-color:transparent;color:var(--reactor-color-interstellar)}.reactor-button--ghost:hover{background-color:#0000000d}.reactor-button--ghost:active{background-color:#0000001a}.reactor-button--shadow{box-shadow:var(--reactor-shadow-button)}.reactor-button--shadow:hover{box-shadow:0 2px 3px #0000001f,0 6px 6px #0000001a,0 14px 8px #0000000f,0 24px 10px #00000005,0 36px 11px #0000}.reactor-button--disabled,.reactor-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.reactor-button:focus-visible{outline:2px solid var(--reactor-color-interstellar);outline-offset:2px}.reactor-button__label{display:inline-block}
|
package/package.json
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@reactor-team/ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Reactor UI Component Library - Reusable React components for Reactor applications",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/reactor-ui.cjs",
|
|
7
|
+
"module": "./dist/reactor-ui.mjs",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/reactor-ui.mjs",
|
|
13
|
+
"require": "./dist/reactor-ui.cjs"
|
|
14
|
+
},
|
|
15
|
+
"./styles.css": "./dist/ui.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"sideEffects": [
|
|
21
|
+
"**/*.css"
|
|
22
|
+
],
|
|
23
|
+
"scripts": {
|
|
24
|
+
"dev": "storybook dev -p 6006",
|
|
25
|
+
"build": "vite build",
|
|
26
|
+
"build:watch": "vite build --watch",
|
|
27
|
+
"lint": "eslint src --ext ts,tsx",
|
|
28
|
+
"typecheck": "tsc --noEmit",
|
|
29
|
+
"storybook": "storybook dev -p 6006",
|
|
30
|
+
"build-storybook": "storybook build",
|
|
31
|
+
"prepublishOnly": "npm run build"
|
|
32
|
+
},
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "git+https://github.com/reactor-team/reactor-ui-components.git"
|
|
36
|
+
},
|
|
37
|
+
"keywords": [
|
|
38
|
+
"react",
|
|
39
|
+
"components",
|
|
40
|
+
"ui",
|
|
41
|
+
"reactor",
|
|
42
|
+
"design-system"
|
|
43
|
+
],
|
|
44
|
+
"author": "Reactor Team",
|
|
45
|
+
"license": "MIT",
|
|
46
|
+
"bugs": {
|
|
47
|
+
"url": "https://github.com/reactor-team/reactor-ui-components/issues"
|
|
48
|
+
},
|
|
49
|
+
"homepage": "https://github.com/reactor-team/reactor-ui-components#readme",
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"react": ">=18.0.0",
|
|
52
|
+
"react-dom": ">=18.0.0"
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@chromatic-com/storybook": "^3.2.6",
|
|
56
|
+
"@storybook/addon-essentials": "^8.6.12",
|
|
57
|
+
"@storybook/addon-interactions": "^8.6.12",
|
|
58
|
+
"@storybook/addon-links": "^8.6.12",
|
|
59
|
+
"@storybook/blocks": "^8.6.12",
|
|
60
|
+
"@storybook/react": "^8.6.12",
|
|
61
|
+
"@storybook/react-vite": "^8.6.12",
|
|
62
|
+
"@storybook/test": "^8.6.12",
|
|
63
|
+
"@types/react": "^19.2.9",
|
|
64
|
+
"@types/react-dom": "^19.2.3",
|
|
65
|
+
"@vitejs/plugin-react": "^4.5.2",
|
|
66
|
+
"react": "^19.2.3",
|
|
67
|
+
"react-dom": "^19.2.3",
|
|
68
|
+
"storybook": "^8.6.12",
|
|
69
|
+
"typescript": "^5.9.3",
|
|
70
|
+
"vite": "^6.3.5",
|
|
71
|
+
"vite-plugin-dts": "^4.5.4"
|
|
72
|
+
}
|
|
73
|
+
}
|