@elementor/elementor-one-assets 0.3.11 → 0.4.5

package/README.md

@@ -5,155 +5,67 @@ A publishable npm package containing shared UI components and utilities for Elem
 ## Installation
 
 ```bash
-npm install @elementor/elementor-one-assets
-```
-
-### Required Dependencies
-
-```bash
-npm install react react-dom @elementor/ui @elementor/icons
-```
-
-### Optional Dependencies
-
-Install based on features you use:
-
-| Dependency                         | Required for                               |
-| ---------------------------------- | ------------------------------------------ |
-| `react-redux` + `@reduxjs/toolkit` | Redux state management                     |
-| `react-router-dom`                 | Routing features                           |
-| `axios`                            | HTTP requests                              |
-| `react-hook-form`                  | Form components (e.g., SendFeedbackDialog) |
-
-```bash
-# Example: Install all optional deps
-npm install react-redux @reduxjs/toolkit react-router-dom axios react-hook-form
+npm install @elementor/elementor-one-assets --legacy-peer-dependencies
 ```
 
 ---
 
-## Quick Start (Development)
-
-```bash
-# Build the package
-npx nx build elementor-one-assets
-
-# Run tests
-npx nx test elementor-one-assets
-
-# Lint
-npx nx lint elementor-one-assets
-
-#Test build
-npx nx test-build elementor-one-assets
-```
-
----
-
-## Local Development
-
-> **Note:** This local development workflow only works within the **elementor-acd-workspace** monorepo. For external projects, you must install the published package from npm.
-
-Local development is designed for **instant hot reload** without any build steps. You just need to install the package:
-
-```bash
-npm install ./dist/packages/elementor-one-assets
-```
-
-### How It Works
+## Usage
 
-When running locally (`NX_PUBLIC_LOCAL=true`), rspack resolves imports from `@elementor/elementor-one-assets` directly to the **source files** instead of `node_modules`. This means:
+### ElementorOneAssetsProvider
 
-- ✅ **No build step required** - just edit and save
-- ✅ **True hot module replacement** - changes appear instantly
-- ✅ **Same experience as workspace libs** - feels like editing any other library
+The `ElementorOneAssetsProvider` is a context provider that initializes the package's core functionality. It should wrap your application or the components that use this package.
 
-This works via a **path alias** in `global.rspack.config.ts`:
+**Basic Example:**
 
-```ts
-resolve: {
-  alias: isLocalDev
-    ? { '@elementor/elementor-one-assets': packageSourcePath }
-    : {},
-},
-```
-
-This code is commented out since we want to use the published version. When working on the package itself uncomment this part.
-
-## Testing the Built Package
-
-Before publishing, verify that the rollup-bundled package works correctly.
-
-### Why Test the Build?
-
-Local development uses **rspack** to compile source files directly, but the published package uses **rollup**. Testing ensures both produce the same result.
-
-### Quick Build Test
+```tsx
+import { ElementorOneAssetsProvider, Environment } from '@elementor/elementor-one-assets';
 
-```bash
-npx nx test-build elementor-one-assets
+function App() {
+	return <ElementorOneAssetsProvider env={'staging' as Environment}>{/* Your app components */}</ElementorOneAssetsProvider>;
+}
 ```
 
-This will:
-
-1. Build the package with rollup
-2. Verify the bundle loads correctly
-3. Print the exported modules
+**Props:**
 
-### Full Integration Test
+| Prop       | Type                                                    | Required | Default | Description                                                                                                                                                                  |
+| ---------- | ------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `env`      | `'local' \| 'development' \| 'staging' \| 'production'` | Yes      | -       | Environment configuration for API endpoints and other environment-specific settings. **Note:** The `'local'` environment uses staging API endpoints (`my.stg.elementor.red`) |
+| `language` | `string`                                                | No       | `'en'`  | Language code for i18n (e.g., 'en', 'es', 'fr', 'de', 'he-IL')                                                                                                               |
 
-To test the actual installed package (from `node_modules`) in a running app:
+**Features:**
 
-**Step 1:** Comment out the alias in `global.rspack.config.ts`
+- Initializes i18n with the specified language
+- Configures HTTP client with environment settings
+- Provides environment configuration via context (`ElementorOneAssetsContext`)
+- Applies scoped styles for package components
 
-```ts
-resolve: {
-  // Temporarily comment out for testing
-  // alias: isLocalDev
-  //   ? { '@elementor/elementor-one-assets': packageSourcePath }
-  //   : {},
-},
-```
+---
 
-**Step 2:** If testing unpublished changes, build and install from dist
+### ElementorOneHeader
 
-```bash
-# Build the package
-npx nx build elementor-one-assets
+The `ElementorOneHeader` component provides a standardized header for Elementor One applications with logo, title, help link, feedback dialog, and user info.
 
-# Install from local dist
-npm install ./dist/packages/elementor-one-assets
-```
+**Basic Example:**
 
-**Step 3:** Run and test the app
+```tsx
+import { ElementorOneHeader } from '@elementor/elementor-one-assets';
 
-```bash
-npx nx serve acd-client:locally
+function App() {
+	return (
+		<>
+			<ElementorOneHeader appSettings={{ slug: 'elementor-pro', version: '1.0.0' }} />
+			{/* Rest of your app */}
+		</>
+	);
+}
 ```
 
-**Step 4:** After testing, revert your changes
-
-1. Uncomment the alias in `global.rspack.config.ts`
-2. Revert `package.json` and `package-lock.json`:
-
-### Checklist Before Publishing
-
-- [ ] `npx nx lint elementor-one-assets` passes
-- [ ] `npx nx test elementor-one-assets` passes
-- [ ] `npx nx test-build elementor-one-assets` passes
-- [ ] Tested installed version from dist
-- [ ] Version bumped appropriately
-
----
-
-## Publishing
-
-```bash
-# Dry run first
-npx nx release --group=elementor-one-assets --dry-run
-
-# Release (patch/minor/major)
-npx nx release --group=elementor-one-assets patch
-```
+**Props:**
 
----
+| Prop              | Type             | Required | Default | Description                                                                                                                                                                                      |
+| ----------------- | ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `appSettings`     | `AppSettings`    | Yes      | -       | Application settings object containing `slug` and `version`. Supported slug values: `'elementor'`, `'elementor-pro'`, `'pojo-accessibility'`, `'image-optimization'`, `'site-mailer'`, `'angie'` |
+| `title`           | `string`         | No       | -       | Custom title to display next to the logo. If not provided, uses the default translated title from i18n                                                                                           |
+| `isWithinWpAdmin` | `boolean`        | No       | `true`  | When `true`, adjusts the header positioning and drawer behavior for WordPress admin context                                                                                                      |
+| `containerSx`     | `SxProps<Theme>` | No       | `{}`    | MUI `sx` prop for custom styling of the AppBar container. Useful for positioning                                                                                                                 |