https://github.com/samdouble/fikasio-react-ui-components
https://github.com/samdouble/fikasio-react-ui-components
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/samdouble/fikasio-react-ui-components
- Owner: samdouble
- License: mit
- Created: 2023-10-02T13:41:16.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-11-15T04:43:36.000Z (8 months ago)
- Last Synced: 2025-11-15T06:08:23.183Z (8 months ago)
- Language: TypeScript
- Size: 1.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @fikasio/react-ui-components
## Installation
Use **npm**:
```
npm install --save @fikasio/react-ui-components
```
or **Yarn**:
```
yarn add @fikasio/react-ui-components
```
## Usage
Import components from the package in your React application, for example:
```
import { Footer } from '@fikasio/react-ui-components';
```
## Components
### AutosaveTextarea
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the textarea |
| defaultValue | string | No | Initial text content of the textarea |
| name | string | No | Name attribute for the textarea input |
| onSave | function | No | Handler called when content should be saved |
| placeholder | string | No | Placeholder text when textarea is empty |
| style | CSSProperties | No | Additional CSS styles for the textarea |
| value | string | No | Controlled text content value |
### Button
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the button |
| disabled | boolean | No | Whether the button is disabled |
| onClick | function | No | Handler called when button is clicked |
| style | CSSProperties | No | Additional CSS styles for the button |
### Checkbox
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the checkbox |
| defaultIsChecked | boolean | No | Initial checked state of the checkbox |
| isChecked | boolean | No | Controlled checked state of the checkbox |
| name | string | No | Name attribute for the checkbox input |
| onClick | function | No | Click handler function for the checkbox |
| style | CSSProperties | No | Additional CSS styles for the Checkbox |
### DatePicker
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the DatePicker |
| dateFormat | string | No | Format for date value (e.g. 'yyyy-MM-dd') |
| defaultValue | Date | No | Initial date value |
| displayFormat | string | No | Format for displaying the date |
| displayFunction | function | No | Function for displaying the date |
| isOpen | boolean | No | Controls whether the picker is open |
| name | string | No | Name attribute for the input |
| onChange | function | No | Handler called when date selection changes |
| onClose | function | No | Handler called when picker closes |
| onOpen | function | No | Handler called when picker opens |
| onRemoveValue | function | No | Handler called when value is cleared |
| shouldCloseOnSelect | boolean | No | Whether to close picker after selection |
| showRemoveValue | boolean | No | Show option to clear the selected value |
| showTimeSelect | boolean | No | Enable time selection |
| style | CSSProperties | No | Additional CSS styles for the DatePicker |
| timeCaption | string | No | Label shown above time selector |
| timeFormat | string | No | Format for time value (e.g. 'HH:mm') |
| timeIntervals | number | No | Interval in minutes between time options |
| value | Date | No | Controlled date value |
### Dot
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the Dot |
| color | string | No | Color of the dot (any valid CSS color) |
| size | number | No | Size of the dot in pixels |
| style | CSSProperties | No | Additional CSS styles for the dot |
### Error
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| children | string/ReactNode| Yes | Content to display in the error message |
| className | string | No | Additional CSS class name for the Error |
| style | CSSProperties | No | Additional CSS styles for the Error |
### Footer
The Footer component provides a flexible layout with multiple sections for content placement. It can contain children elements in the center, left, right, and top positions.
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| childrenCenter | ReactNode | No | Content to be displayed in the center section |
| childrenLeft | ReactNode | No | Content to be displayed in the left section |
| childrenRight | ReactNode | No | Content to be displayed in the right section |
| childrenTop | ReactNode | No | Content to be displayed in the top section |
| className | string | No | Additional CSS class name for the Footer |
| style | CSSProperties | No | Additional CSS styles for the Footer |
### Input
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the Input |
| defaultValue | string | No | Initial value for uncontrolled input |
| disabled | boolean | No | Whether the input is disabled |
| name | string | No | Name attribute for the input |
| onChange | function | No | Handler called when input value changes |
| placeholder | string | No | Placeholder text shown when input is empty |
| style | CSSProperties | No | Additional CSS styles for the Input |
| value | string | No | Controlled input value |
### SearchBar
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the SearchBar |
| defaultValue | string | No | Initial value for uncontrolled input |
| onChange | function | No | Handler called when input value changes |
| onSelect | function | No | Handler called when an option is selected from the menu |
| onSubmit | function | No | Handler called when the Enter key is pressed |
| options | array | No | Suggestion options that will appear below |
| placeholder | string | No | Placeholder text when textarea is empty |
| style | CSSProperties | No | Additional CSS styles for the SearchBar |
| value | string | No | Controlled input value |
### Select
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the Select |
| defaultValue | string | No | Initial value for uncontrolled select |
| disabled | boolean | No | Whether the select is disabled |
| name | string | No | Name attribute for the select |
| onChange | function | No | Handler called when select value changes |
| options | array | Yes | Array of options to display in the select |
| style | CSSProperties | No | Additional CSS styles for the Select |
| value | string | No | Controlled select value |
### Selector
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the Selector |
| defaultValue | string | No | Initial value for uncontrolled select |
| name | string | No | Name attribute for the select |
| onChange | function | No | Handler called when select value changes |
| options | array | No | Array of options to display in the select |
| render | function | No | Describes how to render the main button |
| style | CSSProperties | No | Additional CSS styles for the Selector |
| value | string | No | Controlled select value |
### Success
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the Success |
| style | CSSProperties | No | Additional CSS styles for the Success |
### Warning
#### Props
| Name | Type | Required | Description |
|-------------------------|:----------------|:----------------|:------------------------------------------------|
| className | string | No | Additional CSS class name for the Warning |
| style | CSSProperties | No | Additional CSS styles for the Warning |
## Hooks
### useTheme
TODO
## Development
See DEVELOPMENT.md.