@memberjunction/ng-react 4.0.0 → 4.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.
Files changed (8) hide show
  1. package/README.md +91 -250
  2. package/package.json +9 -9
  3. package/dist/lib/cdn-urls.d.ts +0 -22
  4. package/dist/lib/cdn-urls.js +0 -28
  5. package/dist/lib/cdn-urls.js.map +0 -1
  6. package/dist/lib/default-styles.d.ts +0 -10
  7. package/dist/lib/default-styles.js +0 -106
  8. package/dist/lib/default-styles.js.map +0 -1
package/README.md CHANGED
@@ -1,20 +1,6 @@
1
1
  # @memberjunction/ng-react
2
2
 
3
- Angular components for hosting React components in MemberJunction applications. This package provides a seamless bridge between Angular and React, allowing you to use React components within your Angular applications.
4
-
5
- ## Overview
6
-
7
- The `@memberjunction/ng-react` package enables Angular applications to render React components dynamically. It handles all the complexity of loading React, compiling JSX, managing component lifecycles, and bridging Angular/React data flow.
8
-
9
- ## Features
10
-
11
- - **Dynamic React Component Rendering**: Compile and render React components from source code
12
- - **Automatic Dependency Loading**: Loads React, ReactDOM, and Babel from CDN
13
- - **Dynamic Library Management**: Configure external libraries per organization or use case
14
- - **Component Registry**: Manages compiled components with namespace support
15
- - **Error Boundaries**: Comprehensive error handling for React components
16
- - **Two-Way Data Binding**: Seamless data flow between Angular and React
17
- - **TypeScript Support**: Full type safety with TypeScript definitions
3
+ An Angular integration library for rendering React components inside Angular applications. Provides a bridge component, script loader, and debugging tools for embedding React-based UI within the MemberJunction Angular ecosystem.
18
4
 
19
5
  ## Installation
20
6
 
@@ -22,277 +8,132 @@ The `@memberjunction/ng-react` package enables Angular applications to render Re
22
8
  npm install @memberjunction/ng-react
23
9
  ```
24
10
 
25
- ## Basic Usage
11
+ ## Overview
12
+
13
+ This package provides a seamless bridge between Angular and React, allowing React components to be loaded and rendered within Angular templates. It handles React and ReactDOM script loading, Babel transpilation of JSX, component lifecycle management, and two-way communication between the Angular host and React guest.
14
+
15
+ ```mermaid
16
+ flowchart TD
17
+ subgraph Angular["Angular Host"]
18
+ A["MJReactComponent"] -->|Props| B["ReactBridgeService"]
19
+ end
20
+ subgraph Bridge["Bridge Layer"]
21
+ B --> C["ScriptLoaderService"]
22
+ C --> D["Load React + ReactDOM + Babel"]
23
+ B --> E["AngularAdapterService"]
24
+ end
25
+ subgraph React["React Guest"]
26
+ D --> F["React Component"]
27
+ F -->|Events| E
28
+ E -->|Callbacks| A
29
+ end
30
+
31
+ style Angular fill:#2d6a9f,stroke:#1a4971,color:#fff
32
+ style Bridge fill:#7c5295,stroke:#563a6b,color:#fff
33
+ style React fill:#2d8659,stroke:#1a5c3a,color:#fff
34
+ ```
35
+
36
+ ## Usage
26
37
 
27
- ### 1. Import the Module
38
+ ### Module Import
28
39
 
29
40
  ```typescript
30
- import { MJReactModule } from '@memberjunction/ng-react';
41
+ import { ReactModule } from '@memberjunction/ng-react';
31
42
 
32
43
  @NgModule({
33
- imports: [
34
- CommonModule,
35
- MJReactModule
36
- ]
44
+ imports: [ReactModule]
37
45
  })
38
- export class YourModule { }
46
+ export class YourModule {}
39
47
  ```
40
48
 
41
- ### 2. Use in Templates
49
+ ### Basic React Component Rendering
42
50
 
43
51
  ```html
44
52
  <mj-react-component
45
- [component]="componentSpec"
46
- [data]="componentData"
47
- [state]="componentState"
48
- [utilities]="utilities"
49
- [styles]="styles"
50
- (stateChange)="onStateChange($event)"
51
- (componentEvent)="onComponentEvent($event)"
52
- (refreshData)="onRefreshData()"
53
- (openEntityRecord)="onOpenEntityRecord($event)">
53
+ [ComponentCode]="reactComponentCode"
54
+ [Props]="componentProps"
55
+ (ComponentEvent)="handleReactEvent($event)"
56
+ (StateChange)="handleStateChange($event)"
57
+ (ComponentError)="handleError($event)">
54
58
  </mj-react-component>
55
59
  ```
56
60
 
57
- ### 3. Component Controller
58
-
59
- ```typescript
60
- import { Component } from '@angular/core';
61
- import { ComponentSpec } from '@memberjunction/interactive-component-types';
62
-
63
- @Component({
64
- selector: 'app-example',
65
- template: `
66
- <mj-react-component
67
- [component]="reactComponent"
68
- [data]="data">
69
- </mj-react-component>
70
- `
71
- })
72
- export class ExampleComponent {
73
- reactComponent: ComponentSpec = {
74
- name: 'MyReactComponent',
75
- code: `
76
- function MyReactComponent({ data, callbacks }) {
77
- return (
78
- <div>
79
- <h1>Hello, {data.name}!</h1>
80
- <button onClick={() => callbacks.RefreshData()}>
81
- Refresh
82
- </button>
83
- </div>
84
- );
85
- }
86
- `
87
- };
88
-
89
- data = {
90
- name: 'World'
91
- };
92
- }
93
- ```
94
-
95
- ## Component Props
96
-
97
- React components receive the following props:
98
-
99
- ```typescript
100
- interface ComponentProps {
101
- data: any; // Data passed from Angular
102
- userState: any; // Component state managed by Angular
103
- utilities: any; // Utility functions
104
- callbacks: { // Callbacks to Angular
105
- RefreshData: () => void;
106
- OpenEntityRecord: (entityName: string, key: any) => void;
107
- UpdateUserState: (state: any) => void;
108
- NotifyEvent: (event: string, data: any) => void;
109
- };
110
- components?: Record<string, any>; // Child components
111
- styles?: ComponentStyles; // Style configuration
112
- }
113
- ```
114
-
115
- ## Advanced Features
116
-
117
- ### Dynamic Library Configuration
118
-
119
- Configure which external libraries are available to React components:
61
+ ### Providing React Code
120
62
 
121
63
  ```typescript
122
- import { ScriptLoaderService, LibraryConfiguration } from '@memberjunction/ng-react';
123
-
124
- // Define organization-specific library configuration
125
- const orgLibraryConfig: LibraryConfiguration = {
126
- libraries: [
127
- {
128
- id: 'lodash',
129
- name: 'lodash',
130
- displayName: 'Lodash',
131
- category: 'utility',
132
- globalVariable: '_',
133
- version: '4.17.21',
134
- cdnUrl: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js',
135
- isEnabled: true,
136
- isCore: false
137
- },
138
- {
139
- id: 'chart-js',
140
- name: 'Chart',
141
- displayName: 'Chart.js',
142
- category: 'charting',
143
- globalVariable: 'Chart',
144
- version: '4.4.0',
145
- cdnUrl: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js',
146
- isEnabled: true,
147
- isCore: false
148
- }
149
- // Add more libraries as needed
150
- ],
151
- metadata: {
152
- version: '1.0.0',
153
- lastUpdated: '2024-01-01'
64
+ reactComponentCode = `
65
+ function MyComponent({ title, onAction }) {
66
+ const [count, setCount] = React.useState(0);
67
+ return (
68
+ <div>
69
+ <h2>{title}</h2>
70
+ <p>Count: {count}</p>
71
+ <button onClick={() => setCount(c => c + 1)}>Increment</button>
72
+ <button onClick={() => onAction('submit')}>Submit</button>
73
+ </div>
74
+ );
154
75
  }
155
- };
156
-
157
- // Load libraries before rendering components
158
- async ngOnInit() {
159
- await this.scriptLoader.loadReactEcosystem(orgLibraryConfig);
160
- }
161
- ```
76
+ `;
162
77
 
163
- ### Component Hierarchies
164
-
165
- ```typescript
166
- const componentSpec: ComponentSpec = {
167
- name: 'ParentComponent',
168
- code: '...',
169
- dependencies: [
170
- {
171
- name: 'ChildComponent1',
172
- code: '...'
173
- },
174
- {
175
- name: 'ChildComponent2',
176
- code: '...'
177
- }
178
- ]
179
- };
180
- ```
181
-
182
- ### Custom Styles
183
-
184
- ```typescript
185
- const styles: SkipComponentStyles = {
186
- colors: {
187
- primary: '#5B4FE9',
188
- secondary: '#64748B'
189
- },
190
- typography: {
191
- fontFamily: 'Inter, sans-serif'
192
- }
78
+ componentProps = {
79
+ title: 'My React Widget',
80
+ onAction: (action: string) => console.log('React action:', action)
193
81
  };
194
82
  ```
195
-
196
83
 
197
- ## Services
84
+ ## Components
198
85
 
199
- ### ScriptLoaderService
86
+ | Component | Selector | Purpose |
87
+ |-----------|----------|---------|
88
+ | `MJReactComponent` | `mj-react-component` | Renders a React component inside Angular |
200
89
 
201
- Manages loading of external scripts and CSS with support for dynamic library configurations:
90
+ ### MJReactComponent Inputs
202
91
 
203
- ```typescript
204
- constructor(private scriptLoader: ScriptLoaderService) {}
205
-
206
- // Load with default configuration
207
- async loadDefaultLibraries() {
208
- await this.scriptLoader.loadReactEcosystem();
209
- }
210
-
211
- // Load with custom configuration
212
- async loadCustomLibraries() {
213
- const customConfig = {
214
- libraries: [
215
- // Define your custom library set
216
- ],
217
- metadata: { version: '1.0.0' }
218
- };
219
-
220
- await this.scriptLoader.loadReactEcosystem(customConfig);
221
- }
222
-
223
- // Load individual library
224
- async loadSingleLibrary() {
225
- const lib = await this.scriptLoader.loadScript(
226
- 'https://cdn.example.com/lib.js',
227
- 'MyLibrary'
228
- );
229
- }
230
- ```
92
+ | Property | Type | Default | Description |
93
+ |----------|------|---------|-------------|
94
+ | `ComponentCode` | `string` | `''` | JSX/React code to transpile and render |
95
+ | `Props` | `Record<string, unknown>` | `{}` | Props passed to the React component |
96
+ | `EnableDebug` | `boolean` | `false` | Enable debug logging |
231
97
 
232
- ### ReactBridgeService
98
+ ### MJReactComponent Outputs
233
99
 
234
- Manages React instances and roots:
100
+ | Event | Type | Description |
101
+ |-------|------|-------------|
102
+ | `ComponentEvent` | `EventEmitter<ReactComponentEvent>` | Custom events from the React component |
103
+ | `StateChange` | `EventEmitter<StateChangeEvent>` | React component state changes |
104
+ | `ComponentError` | `EventEmitter<Error>` | Errors during rendering or transpilation |
105
+ | `ComponentReady` | `EventEmitter<void>` | React component has mounted |
235
106
 
236
- ```typescript
237
- constructor(private reactBridge: ReactBridgeService) {}
107
+ ## Services
238
108
 
239
- async checkReactStatus() {
240
- const isReady = this.reactBridge.isReady();
241
- const rootCount = this.reactBridge.getActiveRootsCount();
242
- }
243
- ```
109
+ | Service | Purpose |
110
+ |---------|---------|
111
+ | `ScriptLoaderService` | Loads React, ReactDOM, and Babel from CDN with caching |
112
+ | `ReactBridgeService` | Manages React component lifecycle and prop synchronization |
113
+ | `AngularAdapterService` | Provides Angular context (router, DI) to React components |
244
114
 
245
- ### AngularAdapterService
115
+ ## Configuration
246
116
 
247
- Provides access to the React runtime:
117
+ ### Debug Configuration
248
118
 
249
119
  ```typescript
250
- constructor(private adapter: AngularAdapterService) {}
251
-
252
- async compileCustomComponent() {
253
- const result = await this.adapter.compileComponent({
254
- componentName: 'CustomComponent',
255
- componentCode: '...'
256
- });
257
- }
258
- ```
120
+ import { ReactDebugConfig } from '@memberjunction/ng-react';
259
121
 
260
- ## Error Handling
261
-
262
- The component automatically wraps React components in error boundaries:
263
-
264
- ```typescript
265
- onComponentEvent(event: ReactComponentEvent) {
266
- if (event.type === 'error') {
267
- console.error('React component error:', event.payload);
268
- // Handle error in Angular
269
- }
270
- }
122
+ // Enable verbose logging for development
123
+ ReactDebugConfig.enabled = true;
124
+ ReactDebugConfig.logLevel = 'verbose';
271
125
  ```
272
126
 
273
- ## Performance Considerations
274
-
275
- 1. **Component Caching**: Compiled components are cached automatically
276
- 2. **Lazy Loading**: React libraries are loaded on-demand
277
- 3. **Change Detection**: Uses OnPush strategy for optimal performance
278
- 4. **Resource Cleanup**: Automatic cleanup of React roots on destroy
279
-
280
- ## Browser Support
127
+ ## How It Works
281
128
 
282
- - Chrome (latest)
283
- - Firefox (latest)
284
- - Safari (latest)
285
- - Edge (latest)
129
+ 1. `ScriptLoaderService` loads React, ReactDOM, and Babel scripts if not already present
130
+ 2. The React component code (JSX string) is transpiled using Babel in the browser
131
+ 3. `ReactBridgeService` creates a React root and renders the component into a DOM container
132
+ 4. Props from Angular are passed to React; events from React are forwarded to Angular
133
+ 5. On Angular component destruction, the React tree is properly unmounted
286
134
 
287
135
  ## Dependencies
288
136
 
289
- This package requires:
290
- - Angular 21+
291
- - React 18+
292
- - @memberjunction/react-runtime
293
- - @memberjunction/interactive-component-types
294
- - @memberjunction/core
295
-
296
- ## License
297
-
298
- See the main MemberJunction LICENSE file in the repository root.
137
+ - [@memberjunction/global](../../MJGlobal/README.md) -- Global utilities
138
+ - React and ReactDOM (loaded at runtime from CDN)
139
+ - Babel standalone (loaded at runtime for JSX transpilation)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-react",
3
- "version": "4.0.0",
3
+ "version": "4.1.0",
4
4
  "description": "Angular components for hosting React components in MemberJunction applications",
5
5
  "scripts": {
6
6
  "build": "ngc -p tsconfig.json",
@@ -40,14 +40,14 @@
40
40
  "styles"
41
41
  ],
42
42
  "dependencies": {
43
- "@memberjunction/ai-vectors-memory": "4.0.0",
44
- "@memberjunction/core": "4.0.0",
45
- "@memberjunction/core-entities": "4.0.0",
46
- "@memberjunction/global": "4.0.0",
47
- "@memberjunction/graphql-dataprovider": "4.0.0",
48
- "@memberjunction/interactive-component-types": "4.0.0",
49
- "@memberjunction/ng-notifications": "4.0.0",
50
- "@memberjunction/react-runtime": "4.0.0",
43
+ "@memberjunction/ai-vectors-memory": "4.1.0",
44
+ "@memberjunction/core": "4.1.0",
45
+ "@memberjunction/core-entities": "4.1.0",
46
+ "@memberjunction/global": "4.1.0",
47
+ "@memberjunction/graphql-dataprovider": "4.1.0",
48
+ "@memberjunction/interactive-component-types": "4.1.0",
49
+ "@memberjunction/ng-notifications": "4.1.0",
50
+ "@memberjunction/react-runtime": "4.1.0",
51
51
  "@angular/common": "21.1.3",
52
52
  "@angular/core": "21.1.3",
53
53
  "@angular/platform-browser": "21.1.3",
package/dist/lib/cdn-urls.d.ts DELETED
@@ -1,22 +0,0 @@
1
- /**
2
- * @fileoverview CDN URLs for external React and related dependencies.
3
- * These URLs are used to load React ecosystem libraries in the browser.
4
- * @module @memberjunction/ng-react
5
- */
6
- /**
7
- * CDN URLs for external dependencies
8
- * These can be configured via environment variables in the future
9
- */
10
- export declare const CDN_URLS: {
11
- BABEL_STANDALONE: string;
12
- REACT: string;
13
- REACT_DOM: string;
14
- DAYJS: string;
15
- ANTD_JS: string;
16
- ANTD_CSS: string;
17
- REACT_BOOTSTRAP_JS: string;
18
- BOOTSTRAP_CSS: string;
19
- D3_JS: string;
20
- CHART_JS: string;
21
- LODASH_JS: string;
22
- };
package/dist/lib/cdn-urls.js DELETED
@@ -1,28 +0,0 @@
1
- /**
2
- * @fileoverview CDN URLs for external React and related dependencies.
3
- * These URLs are used to load React ecosystem libraries in the browser.
4
- * @module @memberjunction/ng-react
5
- */
6
- /**
7
- * CDN URLs for external dependencies
8
- * These can be configured via environment variables in the future
9
- */
10
- export const CDN_URLS = {
11
- // Core React dependencies
12
- BABEL_STANDALONE: 'https://unpkg.com/@babel/standalone@7/babel.min.js',
13
- REACT: 'https://unpkg.com/react@18/umd/react.production.min.js',
14
- REACT_DOM: 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js',
15
- // Ant Design dependencies
16
- DAYJS: 'https://unpkg.com/dayjs@1.11.10/dayjs.min.js',
17
- // UI Libraries - Using UMD builds that work with global React
18
- ANTD_JS: 'https://unpkg.com/antd@5.12.8/dist/antd.js',
19
- ANTD_CSS: 'https://unpkg.com/antd@5.12.8/dist/reset.css',
20
- REACT_BOOTSTRAP_JS: 'https://unpkg.com/react-bootstrap@2.9.1/dist/react-bootstrap.js',
21
- BOOTSTRAP_CSS: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css',
22
- // Data Visualization
23
- D3_JS: 'https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js',
24
- CHART_JS: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js',
25
- // Utilities
26
- LODASH_JS: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'
27
- };
28
- //# sourceMappingURL=cdn-urls.js.map
package/dist/lib/cdn-urls.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"cdn-urls.js","sourceRoot":"","sources":["../../src/lib/cdn-urls.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,0BAA0B;IAC1B,gBAAgB,EAAE,oDAAoD;IACtE,KAAK,EAAE,wDAAwD;IAC/D,SAAS,EAAE,gEAAgE;IAE3E,0BAA0B;IAC1B,KAAK,EAAE,8CAA8C;IAErD,8DAA8D;IAC9D,OAAO,EAAE,4CAA4C;IACrD,QAAQ,EAAE,8CAA8C;IACxD,kBAAkB,EAAE,iEAAiE;IACrF,aAAa,EAAE,yEAAyE;IAExF,qBAAqB;IACrB,KAAK,EAAE,2DAA2D;IAClE,QAAQ,EAAE,oEAAoE;IAE9E,YAAY;IACZ,SAAS,EAAE,wEAAwE;CACpF,CAAC","sourcesContent":["/**\n * @fileoverview CDN URLs for external React and related dependencies.\n * These URLs are used to load React ecosystem libraries in the browser.\n * @module @memberjunction/ng-react\n */\n\n/**\n * CDN URLs for external dependencies\n * These can be configured via environment variables in the future\n */\nexport const CDN_URLS = {\n // Core React dependencies\n BABEL_STANDALONE: 'https://unpkg.com/@babel/standalone@7/babel.min.js',\n REACT: 'https://unpkg.com/react@18/umd/react.production.min.js',\n REACT_DOM: 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js',\n \n // Ant Design dependencies\n DAYJS: 'https://unpkg.com/dayjs@1.11.10/dayjs.min.js',\n \n // UI Libraries - Using UMD builds that work with global React\n ANTD_JS: 'https://unpkg.com/antd@5.12.8/dist/antd.js',\n ANTD_CSS: 'https://unpkg.com/antd@5.12.8/dist/reset.css',\n REACT_BOOTSTRAP_JS: 'https://unpkg.com/react-bootstrap@2.9.1/dist/react-bootstrap.js',\n BOOTSTRAP_CSS: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css',\n \n // Data Visualization\n D3_JS: 'https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js',\n CHART_JS: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js',\n \n // Utilities\n LODASH_JS: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'\n};"]}
package/dist/lib/default-styles.d.ts DELETED
@@ -1,10 +0,0 @@
1
- /**
2
- * @fileoverview Default styles for React components in MemberJunction.
3
- * These styles provide a consistent design system for React components.
4
- * @module @memberjunction/ng-react
5
- */
6
- import { ComponentStyles } from '@memberjunction/interactive-component-types';
7
- /**
8
- * Default styles that match the Skip design system
9
- */
10
- export declare const DEFAULT_STYLES: ComponentStyles;
package/dist/lib/default-styles.js DELETED
@@ -1,106 +0,0 @@
1
- /**
2
- * @fileoverview Default styles for React components in MemberJunction.
3
- * These styles provide a consistent design system for React components.
4
- * @module @memberjunction/ng-react
5
- */
6
- /**
7
- * Default styles that match the Skip design system
8
- */
9
- export const DEFAULT_STYLES = {
10
- colors: {
11
- // Primary colors - modern purple/blue gradient feel
12
- primary: '#5B4FE9',
13
- primaryHover: '#4940D4',
14
- primaryLight: '#E8E6FF',
15
- // Secondary colors - sophisticated gray
16
- secondary: '#64748B',
17
- secondaryHover: '#475569',
18
- // Status colors
19
- success: '#10B981',
20
- successLight: '#D1FAE5',
21
- warning: '#F59E0B',
22
- warningLight: '#FEF3C7',
23
- error: '#EF4444',
24
- errorLight: '#FEE2E2',
25
- info: '#3B82F6',
26
- infoLight: '#DBEAFE',
27
- // Base colors
28
- background: '#FFFFFF',
29
- surface: '#F8FAFC',
30
- surfaceHover: '#F1F5F9',
31
- // Text colors with better contrast
32
- text: '#1E293B',
33
- textSecondary: '#64748B',
34
- textTertiary: '#94A3B8',
35
- textInverse: '#FFFFFF',
36
- // Border colors
37
- border: '#E2E8F0',
38
- borderLight: '#F1F5F9',
39
- borderFocus: '#5B4FE9',
40
- // Shadows (as color strings for easy use)
41
- shadow: 'rgba(0, 0, 0, 0.05)',
42
- shadowMedium: 'rgba(0, 0, 0, 0.1)',
43
- shadowLarge: 'rgba(0, 0, 0, 0.15)',
44
- },
45
- spacing: {
46
- xs: '4px',
47
- sm: '8px',
48
- md: '16px',
49
- lg: '24px',
50
- xl: '32px',
51
- xxl: '48px',
52
- xxxl: '64px',
53
- },
54
- typography: {
55
- fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif',
56
- fontSize: {
57
- xs: '11px',
58
- sm: '12px',
59
- md: '14px',
60
- lg: '16px',
61
- xl: '20px',
62
- xxl: '24px',
63
- xxxl: '32px',
64
- },
65
- fontWeight: {
66
- light: '300',
67
- regular: '400',
68
- medium: '500',
69
- semibold: '600',
70
- bold: '700',
71
- },
72
- lineHeight: {
73
- tight: '1.25',
74
- normal: '1.5',
75
- relaxed: '1.75',
76
- },
77
- },
78
- borders: {
79
- radius: {
80
- sm: '6px',
81
- md: '8px',
82
- lg: '12px',
83
- xl: '16px',
84
- full: '9999px',
85
- },
86
- width: {
87
- thin: '1px',
88
- medium: '2px',
89
- thick: '3px',
90
- },
91
- },
92
- shadows: {
93
- sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
94
- md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
95
- lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
96
- xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
97
- inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
98
- },
99
- transitions: {
100
- fast: '150ms ease-in-out',
101
- normal: '250ms ease-in-out',
102
- slow: '350ms ease-in-out',
103
- },
104
- overflow: 'auto'
105
- };
106
- //# sourceMappingURL=default-styles.js.map
package/dist/lib/default-styles.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"default-styles.js","sourceRoot":"","sources":["../../src/lib/default-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC7C,MAAM,EAAE;QACN,oDAAoD;QACpD,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,YAAY,EAAE,SAAS;QAEvB,wCAAwC;QACxC,SAAS,EAAE,SAAS;QACpB,cAAc,EAAE,SAAS;QAEzB,gBAAgB;QAChB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,SAAS;QACrB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS;QAEpB,cAAc;QACd,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QAEvB,mCAAmC;QACnC,IAAI,EAAE,SAAS;QACf,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,SAAS;QACvB,WAAW,EAAE,SAAS;QAEtB,gBAAgB;QAChB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,WAAW,EAAE,SAAS;QAEtB,0CAA0C;QAC1C,MAAM,EAAE,qBAAqB;QAC7B,YAAY,EAAE,oBAAoB;QAClC,WAAW,EAAE,qBAAqB;KACnC;IACD,OAAO,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,MAAM;KACb;IACD,UAAU,EAAE;QACV,UAAU,EAAE,4EAA4E;QACxF,QAAQ,EAAE;YACR,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;SACb;QACD,UAAU,EAAE;YACV,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,KAAK;SACZ;QACD,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,MAAM;SAChB;KACF;IACD,OAAO,EAAE;QACP,MAAM,EAAE;YACN,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,QAAQ;SACf;QACD,KAAK,EAAE;YACL,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;SACb;KACF;IACD,OAAO,EAAE;QACP,EAAE,EAAE,iCAAiC;QACrC,EAAE,EAAE,uEAAuE;QAC3E,EAAE,EAAE,yEAAyE;QAC7E,EAAE,EAAE,2EAA2E;QAC/E,KAAK,EAAE,uCAAuC;KAC/C;IACD,WAAW,EAAE;QACX,IAAI,EAAE,mBAAmB;QACzB,MAAM,EAAE,mBAAmB;QAC3B,IAAI,EAAE,mBAAmB;KAC1B;IACD,QAAQ,EAAE,MAAM;CACjB,CAAC","sourcesContent":["/**\n * @fileoverview Default styles for React components in MemberJunction.\n * These styles provide a consistent design system for React components.\n * @module @memberjunction/ng-react\n */\n\nimport { ComponentStyles } from '@memberjunction/interactive-component-types';\n\n/**\n * Default styles that match the Skip design system\n */\nexport const DEFAULT_STYLES: ComponentStyles = {\n colors: {\n // Primary colors - modern purple/blue gradient feel\n primary: '#5B4FE9',\n primaryHover: '#4940D4',\n primaryLight: '#E8E6FF',\n \n // Secondary colors - sophisticated gray\n secondary: '#64748B',\n secondaryHover: '#475569',\n \n // Status colors\n success: '#10B981',\n successLight: '#D1FAE5',\n warning: '#F59E0B',\n warningLight: '#FEF3C7',\n error: '#EF4444',\n errorLight: '#FEE2E2',\n info: '#3B82F6',\n infoLight: '#DBEAFE',\n \n // Base colors\n background: '#FFFFFF',\n surface: '#F8FAFC',\n surfaceHover: '#F1F5F9',\n \n // Text colors with better contrast\n text: '#1E293B',\n textSecondary: '#64748B',\n textTertiary: '#94A3B8',\n textInverse: '#FFFFFF',\n \n // Border colors\n border: '#E2E8F0',\n borderLight: '#F1F5F9',\n borderFocus: '#5B4FE9',\n \n // Shadows (as color strings for easy use)\n shadow: 'rgba(0, 0, 0, 0.05)',\n shadowMedium: 'rgba(0, 0, 0, 0.1)',\n shadowLarge: 'rgba(0, 0, 0, 0.15)',\n },\n spacing: {\n xs: '4px',\n sm: '8px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '48px',\n xxxl: '64px',\n },\n typography: {\n fontFamily: '-apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif',\n fontSize: {\n xs: '11px',\n sm: '12px',\n md: '14px',\n lg: '16px',\n xl: '20px',\n xxl: '24px',\n xxxl: '32px',\n },\n fontWeight: {\n light: '300',\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n lineHeight: {\n tight: '1.25',\n normal: '1.5',\n relaxed: '1.75',\n },\n },\n borders: {\n radius: {\n sm: '6px',\n md: '8px',\n lg: '12px',\n xl: '16px',\n full: '9999px',\n },\n width: {\n thin: '1px',\n medium: '2px',\n thick: '3px',\n },\n },\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',\n },\n transitions: {\n fast: '150ms ease-in-out',\n normal: '250ms ease-in-out',\n slow: '350ms ease-in-out',\n },\n overflow: 'auto'\n};"]}