@bolttech/atoms-checkbox - npm Package Compare versions

Comparing version 0.11.0 to 0.12.0

package.json

 {
   "name": "@bolttech/atoms-checkbox",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "main": "./index.cjs",
@@ -8,3 +8,3 @@ "type": "commonjs",
   "dependencies": {
-    "@edirect/frontend-foundations": "0.0.58",
+    "@edirect/frontend-foundations": "0.0.67",
     "react": "18.2.0",
@@ -11,0 +11,0 @@ "styled-components": "5.3.6"

README.md

@@ -1,8 +0,70 @@
-# atoms-checkbox
+# Checkbox Component
 
-This library was generated with [Nx](https://nx.dev).
+A simple React checkbox component.
 
-## Running unit tests
+## Installation
 
+Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component.
 
-Run `nx test atoms-checkbox` to execute the unit tests via [Jest](https://jestjs.io).
+```bash
+npm install @edirect/frontend-foundations @bolttech/atoms-checkbox
+```
+
+or
+
+```bash
+yarn add @edirect/frontend-foundations @bolttech/atoms-checkbox
+```
+
+## Props
+
+The `Checkbox` component accepts the following properties:
+
+| Prop         | Type          | Description                                                                                       |
+|--------------|---------------|---------------------------------------------------------------------------------------------------|
+| id           | `string`      | The ID attribute for the checkbox element.                                                         |
+| label        | `string`      | The label text for the checkbox.                                                                  |
+| disabled     | `boolean`     | Disables the checkbox when set to `true`.                                                         |
+| errorMessage | `string`      | An optional error message to be displayed.                                                        |
+| ref          | `object`      | A reference object for the checkbox element.                                                       |
+| checked      | `boolean`     | Determines whether the checkbox is checked or not.                                                 |
+| onChange     | `function`    | Callback function to handle the checkbox change event.                                            |
+| onBlur       | `function`    | Callback function to handle the checkbox blur event.                                              |
+| onFocus      | `function`    | Callback function to handle the checkbox focus event.                                             |
+
+## Usage
+
+```jsx
+import React, {useState} from 'react';
+import {Checkbox} from '@bolttech/atoms-checkbox';
+import {bolttechTheme, BolttechThemeProvider} from "@edirect/frontend-foundations";
+
+const ExampleComponent = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = (event) => {
+    setIsChecked(event.target.checked);
+  };
+
+  return (
+    <BolttechThemeProvider theme={bolttechTheme}>
+      <Checkbox
+        id="custom-checkbox"
+        label="Check me"
+        disabled={false}
+        errorMessage="This field is required"
+        checked={isChecked}
+        onChange={handleCheckboxChange}
+      />
+    </BolttechThemeProvider>
+  );
+};
+
+export default ExampleComponent;
+```
+
+## Contributing
+
+Contributions are welcome! For any bug fixes, improvements, or new features, please open an [issue](link-to-issues) or submit a pull request.
+
+Please make sure to follow the code standards and test your changes before submitting.

src/lib/atoms-checkbox.d.ts

@@ -0,2 +1,4 @@
+import React from 'react';
 import { CheckboxProps } from './atoms-checkbox.type';
-export declare function Checkbox({ id, label, disabled, errorMessage, ref, checked, onChange, onBlur, onFocus, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

src/lib/atoms-checkbox.styles.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 interface LabelProps {
@@ -11,5 +12,5 @@ disabled?: boolean;
 } & InputProps, "type">;
-declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, LabelProps, never>;
+declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@edirect/frontend-foundations/dist/src/shared/types/typography.type").TypographyPropsType & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, LabelProps, never>;
 declare const CheckboxContainerError: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, {}, never>;
 declare const LabelError: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
 export { CheckboxContainer, Input, Label, CheckboxContainerError, LabelError };

src/lib/atoms-checkbox.type.d.ts

@@ -8,3 +8,2 @@ import { ChangeEventHandler } from 'react';
     checked?: boolean;
-    ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
     onChange?: ChangeEventHandler<HTMLInputElement>;
@@ -11,0 +10,0 @@ onBlur?: ChangeEventHandler<HTMLInputElement>;

No alert changes

Improved metrics

Total package byte prevSize

9984

increased by42.63%

Lines of code

153

increased by4.08%

Number of lines in readme file

71

increased by688.89%

Dependency changes

• + Added@edirect/frontend-foundations@0.0.67(transitive)

• - Removed@edirect/frontend-foundations@0.0.58(transitive)

• Updated@edirect/frontend-foundations@0.0.67