groovinads-ui 1.9.94 → 1.9.96

package/README.md

@@ -34,6 +34,7 @@ The library includes the following components:
 
 - [Labels](#labels):
   - [Alert](#alert): For displaying alerts.
+  - [Card](#card): For containing and grouping related content.
   - [EditableContent](#editablecontent): For inline editing of text content.
   - [Icon](#icon): For displaying icons.
   - [LoginSource](#loginsource): For show icons of login sources.
@@ -82,6 +83,78 @@ Instead, they should be included in the `index.html` file of your project. This
 
 # Installation
 
+## 1. Configure FontAwesome Pro Access
+
+This library requires **FontAwesome Pro** packages. Before installing, you need to configure access to the FontAwesome Pro registry.
+
+### For Yarn Berry (v2+) users:
+
+Create or update `.yarnrc.yml` in your project root:
+
+```yaml
+npmScopes:
+  fortawesome:
+    npmAlwaysAuth: true
+    npmRegistryServer: "https://npm.fontawesome.com/"
+    npmAuthToken: "YOUR_FONTAWESOME_TOKEN_HERE"
+  awesome.me:
+    npmAlwaysAuth: true
+    npmRegistryServer: "https://npm.fontawesome.com/"
+    npmAuthToken: "YOUR_FONTAWESOME_TOKEN_HERE"
+```
+
+### For npm and Yarn Classic (v1.x) users:
+
+Create or update `.npmrc` in your project root:
+
+```
+@fortawesome:registry=https://npm.fontawesome.com/
+@awesome.me:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=YOUR_FONTAWESOME_TOKEN_HERE
+```
+
+Replace `YOUR_FONTAWESOME_TOKEN_HERE` with your FontAwesome Pro token (available at https://fontawesome.com/account).
+
+**Note:** This library is for internal use only and requires a valid FontAwesome Pro license.
+
+**Important:** Check your Yarn version with `yarn --version`:
+- If you see `1.x.x`, use the `.npmrc` file
+- If you see `2.x.x` or higher, use the `.yarnrc.yml` file
+
+## 2. Install Required Dependencies
+
+This library requires several peer dependencies. Install them first:
+
+```bash
+# For npm users
+npm install @awesome.me/kit-9889deefc5@^1.0.3 \
+  @fortawesome/fontawesome-svg-core@^7.1.0 \
+  @fortawesome/free-brands-svg-icons@^7.1.0 \
+  @fortawesome/duotone-regular-svg-icons@^7.1.0 \
+  @fortawesome/pro-duotone-svg-icons@^7.1.0 \
+  @fortawesome/pro-regular-svg-icons@^7.1.0 \
+  @fortawesome/pro-solid-svg-icons@^7.1.0 \
+  @fortawesome/react-fontawesome@^3.1.1 \
+  react-datepicker@^7.3.0 \
+  react-loading-skeleton@^3.5.0 \
+  react-responsive@^10.0.0
+
+# For Yarn users
+yarn add @awesome.me/kit-9889deefc5@^1.0.3 \
+  @fortawesome/fontawesome-svg-core@^7.1.0 \
+  @fortawesome/free-brands-svg-icons@^7.1.0 \
+  @fortawesome/duotone-regular-svg-icons@^7.1.0 \
+  @fortawesome/pro-duotone-svg-icons@^7.1.0 \
+  @fortawesome/pro-regular-svg-icons@^7.1.0 \
+  @fortawesome/pro-solid-svg-icons@^7.1.0 \
+  @fortawesome/react-fontawesome@^3.1.1 \
+  react-datepicker@^7.3.0 \
+  react-loading-skeleton@^3.5.0 \
+  react-responsive@^10.0.0
+```
+
+## 3. Install the Library
+
 To use the Groovinads UI library in your project, run the following command:
 
 ```bash
@@ -965,6 +1038,48 @@ import { BlockIcon } from 'groovinads-ui';
 | `name`      | String | No       | n/a                                                                       | `font-awesome` | FontAwesome icon name.                |
 | `size`      | String | No       | `sm` `md` `lg`                                                            | `md`        | Size of the block icon container.        |
 
+### Card
+
+```jsx
+import React from 'react';
+import { Card } from 'groovinads-ui';
+
+const ExampleCard = () => (
+	<div>
+		<Card className='p-4' depth={1} size='md'>
+			<h3>Card Title</h3>
+			<p>This is a simple card component that can contain any content.</p>
+		</Card>
+
+		<Card className='mt-3 p-4' depth={2} size='lg'>
+			<h4>User Profile</h4>
+			<p>Name: John Doe</p>
+			<p>Email: john@example.com</p>
+			<button className='btn btn-primary'>Edit Profile</button>
+		</Card>
+
+		<Card className='mt-3 p-4' depth={0} size='sm'>
+			<h4>Small card without shadow</h4>
+			<p>This card has no shadow depth and is small size.</p>
+		</Card>
+
+		<Card className='mt-3 p-4' depth={3} size='full'>
+			<h4>Full width card</h4>
+			<p>This card takes the full width of its container.</p>
+		</Card>
+	</div>
+);
+
+export default ExampleCard;
+```
+
+| Property    | Type   | Required | Options                   | Default | Description                                                                              |
+| ----------- | ------ | -------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `children`  | Node   | No       | n/a                       | n/a     | Content to be displayed inside the card.                                                 |
+| `className` | String | No       | n/a                       | n/a     | Additional CSS class names that can be applied to the card.                              |
+| `depth`     | Number | No       | `0` `1` `2` `3` `4`       | `1`     | Shadow depth level. Adds `.shadow-{depth}` class. Use `0` for no shadow.                |
+| `size`      | String | No       | `sm` `md` `lg` `full`     | `md`    | Card size. Adds `.card-{size}` class. Use `md` for default size (no additional class).  |
+
 ### EditableContent
 
 ```jsx