Updated libraries, README and CSS variables

Update Message.test.tsx

CHANGELOG.md

@@ -1,5 +1,18 @@
 # simple-react-ui-kit
 
+## 1.2.4
+
+### Patch Changes
+
+-   Added new UI Message component
+-   Implemented Unit tests for Message component
+-   Implemented stories for Message component
+-   Fixed Container component margin top for header
+-   Fixed Checkbox component styles
+-   Added CSS vars colors: --color-(green|orange|red|main)-background
+-   Updated Readme (Message component, Style Variables Customization)
+-   Updated UI libraries (typescript, globals)
+
 ## 1.2.3
 
 ### Patch Changes

README.md

@@ -53,6 +53,7 @@ Welcome to the **Simple React UI Kit** repository! This project is designed to p
     - [Container](#container-component)
     - [Dropdown](#dropdown-component)
     - [Icon](#icon-component)
+    - [Message](#message-component)
     - [Popout](#popout-component)
     - [Skeleton](#skeleton-component)
     - [Spinner](#spinner-component)
@@ -443,6 +444,55 @@ The `Icon` component is ideal for applications requiring a variety of icons, suc
 
 For more detailed examples and interactive demonstrations, visit the [Storybook Documentation](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-icon--docs).
 
+### Message Component
+
+The `Message` component is a versatile message display box that supports different visual styles (`error`, `warning`, `success`, and `info`). It is used to present messages to users, providing a title and content area, with the ability to customize the type of message displayed.
+
+Check out the full documentation and examples in Storybook: [Message Component Storybook](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-message--docs).
+
+#### Props:
+- **`type`**: Defines the visual style of the message. Accepts one of the following values: `'error'`, `'warning'`, `'success'`, or `'info'`.
+- **`title`**: The title of the message that appears at the top (optional).
+- **`children`**: The content inside the message box, which can be any React node (optional).
+
+#### Example Usage:
+
+```tsx
+import React from 'react';
+import { Message } from 'simple-react-ui-kit';
+
+const App = () => (
+  <div>
+    {/* Error message with title and content */}
+    <Message type="error" title="Error!">
+      There was an issue with your request.
+    </Message>
+
+    {/* Success message without title */}
+    <Message type="success">
+      Operation completed successfully!
+    </Message>
+
+    {/* Info message with custom content */}
+    <Message type="info" title="Information">
+      <ul>
+        <li>First info item</li>
+        <li>Second info item</li>
+      </ul>
+    </Message>
+  </div>
+);
+
+export default App;
+```
+
+In this example:
+- The first `Message` displays an error with a title and content.
+- The second `Message` shows a success message without a title.
+- The third `Message` provides information with a custom list as its content.
+
+For more details and live examples, check out the [Storybook Documentation](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-message--docs).
+
 ### Popout Component
 
 The `Popout` component is designed to create a floating container that opens and closes when triggered, often used for menus, tooltips, or additional actions. It provides a button as a trigger and offers flexible positioning for the popout content, either to the left or right of the button.
@@ -673,19 +723,23 @@ The components in this UI Kit are designed to be highly customizable, allowing y
 Here is a list of all the CSS variables you can override to customize the look and feel of the components:
 
 - **Primary Colors:**
+    - `--color-contrast`: Contrast color (typically used for text on colored backgrounds).
     - `--color-green`: Default green color.
     - `--color-green-hover`: Hover state for green color.
     - `--color-green-active`: Active state for green color.
+    - `--color-green-background`: Background green color (for success input, message etc.).
     - `--color-orange`: Default orange color.
     - `--color-orange-hover`: Hover state for orange color.
     - `--color-orange-active`: Active state for orange color.
+    - `--color-orange-background`: Background orange color (for warning input, message etc.).
     - `--color-red`: Default red color.
     - `--color-red-hover`: Hover state for red color.
     - `--color-red-active`: Active state for red color.
-    - `--color-contrast`: Contrast color (typically used for text on colored backgrounds).
+    - `--color-red-background`: Background red color (for error input, message etc.).
     - `--color-main`: Main base color, used for buttons, links, checkbox icons.
     - `--color-main-hover`: Hover state for main color.
     - `--color-main-active`: Active state for main color.
+    - `--color-main-background`: Background main color (for info input, message etc.).
 
 - **Text and Typography:**
     - `--font-size`: Default font size.
@@ -747,23 +801,27 @@ To customize the theme, simply override the default values in your stylesheet:
 ```css
 :root {
     /* Primary Colors */
+    --color-contrast: #FFF;
+
     --color-green: #4bb34b;
     --color-green-hover: #48AC4A;
     --color-green-active: #45A64A;
+    --color-green-background: #e5ffe5; /* For dark: #2E3E2B */
 
     --color-orange: #F8A01C;
     --color-orange-hover: #EE9A1D;
     --color-orange-active: #E4941F;
+    --color-orange-background: #fff2db; /* For dark: #5e5443 */
 
     --color-red: #e64646;
     --color-red-hover: #DD4446;
     --color-red-active: #D44245;
+    --color-red-background: #ffdddd; /* For dark: #522e2e */
 
-    --color-contrast: #FFF;
-
-    --color-main: #3770b1;
-    --color-main-hover: #356cac;
-    --color-main-active: #3368a8;
+    --color-main: #2688eb;
+    --color-main-hover: #2483e4;
+    --color-main-active: #237edd;
+    --color-main-background: #d6eaff; /* For dark: #3c4957 */
 
     /* Text and Typography */
     --font-size: 14px;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "simple-react-ui-kit",
-    "version": "1.2.3",
+    "version": "1.2.4",
     "description": "A lightweight and flexible UI framework for building responsive React applications with customizable components.",
     "repository": "https://github.com/miksrv/simple-react-ui-kit.git",
     "scripts": {
@@ -63,7 +63,7 @@
         "eslint-plugin-jest": "^28.8.3",
         "eslint-plugin-react": "^7.37.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "globals": "^15.10.0",
+        "globals": "^15.11.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
@@ -78,7 +78,7 @@
         "style-loader": "^4.0.0",
         "ts-jest": "^29.2.5",
         "ts-node": "^10.9.2",
-        "typescript": "^5.6.2",
+        "typescript": "^5.6.3",
         "typescript-eslint": "^8.8.1"
     },
     "dependencies": {

src/components/message/Message.test.tsx

@@ -34,31 +34,12 @@ describe('Message Component', () => {
         expect(sectionElement).toHaveClass('warning')
     })
 
-    it('renders list items when list is provided', () => {
-        const items = ['Item 1', 'Item 2', 'Item 3']
-        render(<Message list={items} />)
-
-        items.forEach((item) => {
-            const listItem = screen.getByText(item)
-            expect(listItem).toBeInTheDocument()
-        })
-    })
-
-    it('does not render empty list items', () => {
-        const items = ['Item 1', '', 'Item 3']
-        render(<Message list={items} />)
-
-        expect(screen.getByText('Item 1')).toBeInTheDocument()
-        expect(screen.getByText('Item 3')).toBeInTheDocument()
-    })
-
     it('renders correctly without a title or list', () => {
         render(<Message>This message has no title or list</Message>)
 
         const contentElement = screen.getByText(/This message has no title or list/i)
         expect(contentElement).toBeInTheDocument()
 
         expect(screen.queryByRole('heading')).not.toBeInTheDocument()
-        expect(screen.queryByRole('list')).not.toBeInTheDocument()
     })
 })

src/index.ts

@@ -23,6 +23,10 @@ export { default as Icon } from './components/icon'
 export { iconNames } from './components/icon'
 export type { IconTypes } from './components/icon'
 
+// Message Component
+export { default as Message } from './components/message'
+export type { MessageProps } from './components/message'
+
 // Popout Component
 export { default as Popout } from './components/popout'
 export type { PopoutProps, PopoutHandleProps } from './components/popout'

src/styles/global.css

@@ -1,23 +1,27 @@
 /* global.css */
 :root {
     /* Primary Colors */
+    --color-contrast: #FFF;
+
     --color-green: #4bb34b;
     --color-green-hover: #48AC4A;
     --color-green-active: #45A64A;
+    --color-green-background: #e5ffe5; /* For dark: #2E3E2B */
 
     --color-orange: #F8A01C;
     --color-orange-hover: #EE9A1D;
     --color-orange-active: #E4941F;
+    --color-orange-background: #fff2db; /* For dark: #5e5443 */
 
     --color-red: #e64646;
     --color-red-hover: #DD4446;
     --color-red-active: #D44245;
-
-    --color-contrast: #FFF;
+    --color-red-background: #ffdddd; /* For dark: #522e2e */
 
     --color-main: #2688eb;
     --color-main-hover: #2483e4;
     --color-main-active: #237edd;
+    --color-main-background: #d6eaff; /* For dark: #3c4957 */
 
     /* Text and Typography */
     --font-size: 14px;
@@ -46,7 +50,6 @@
     --input-border: 0.5px solid var(--input-border-color);
     /*--input-border-focus-color: #1976d2;*/
     /*--input-background-content: #ffffff;*/
-    /*--input-background-color-error: var(--container-error-background-color);*/
 
     /* Buttons */
     --button-font-weight: 500;

yarn.lock

@@ -4182,10 +4182,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^15.10.0":
-  version: 15.10.0
-  resolution: "globals@npm:15.10.0"
-  checksum: 10c0/fef8f320e88f01f1492fef1b04b056908e1f6726eeaffe3bca03247237300c2d86e71585ee641b62ba71460a6eaff0d6ca7fca284e61bd1b3f833c7ad68b160a
+"globals@npm:^15.11.0":
+  version: 15.11.0
+  resolution: "globals@npm:15.11.0"
+  checksum: 10c0/861e39bb6bd9bd1b9f355c25c962e5eb4b3f0e1567cf60fa6c06e8c502b0ec8706b1cce055d69d84d0b7b8e028bec5418cf629a54e7047e116538d1c1c1a375c
   languageName: node
   linkType: hard
 
@@ -7665,7 +7665,7 @@ __metadata:
     eslint-plugin-jest: "npm:^28.8.3"
     eslint-plugin-react: "npm:^7.37.1"
     eslint-plugin-simple-import-sort: "npm:^12.1.1"
-    globals: "npm:^15.10.0"
+    globals: "npm:^15.11.0"
     identity-obj-proxy: "npm:^3.0.0"
     jest: "npm:^29.7.0"
     jest-environment-jsdom: "npm:^29.7.0"
@@ -7683,7 +7683,7 @@ __metadata:
     style-loader: "npm:^4.0.0"
     ts-jest: "npm:^29.2.5"
     ts-node: "npm:^10.9.2"
-    typescript: "npm:^5.6.2"
+    typescript: "npm:^5.6.3"
     typescript-eslint: "npm:^8.8.1"
   languageName: unknown
   linkType: soft
@@ -8362,23 +8362,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.6.2":
-  version: 5.6.2
-  resolution: "typescript@npm:5.6.2"
+"typescript@npm:^5.6.3":
+  version: 5.6.3
+  resolution: "typescript@npm:5.6.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/3ed8297a8c7c56b7fec282532503d1ac795239d06e7c4966b42d4330c6cf433a170b53bcf93a130a7f14ccc5235de5560df4f1045eb7f3550b46ebed16d3c5e5
+  checksum: 10c0/44f61d3fb15c35359bc60399cb8127c30bae554cd555b8e2b46d68fa79d680354b83320ad419ff1b81a0bdf324197b29affe6cc28988cd6a74d4ac60c94f9799
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.6.2#optional!builtin<compat/typescript>":
-  version: 5.6.2
-  resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>::version=5.6.2&hash=8c6c40"
+"typescript@patch:typescript@npm%3A^5.6.3#optional!builtin<compat/typescript>":
+  version: 5.6.3
+  resolution: "typescript@patch:typescript@npm%3A5.6.3#optional!builtin<compat/typescript>::version=5.6.3&hash=8c6c40"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/94eb47e130d3edd964b76da85975601dcb3604b0c848a36f63ac448d0104e93819d94c8bdf6b07c00120f2ce9c05256b8b6092d23cf5cf1c6fa911159e4d572f
+  checksum: 10c0/7c9d2e07c81226d60435939618c91ec2ff0b75fbfa106eec3430f0fcf93a584bc6c73176676f532d78c3594fe28a54b36eb40b3d75593071a7ec91301533ace7
   languageName: node
   linkType: hard