+ setSelectedOption(option?.key)}
+ clearable
+ />
+
+ );
+};
+
+export default App;
+```
+
+In this example:
+- The `Dropdown` is populated with three options, where one of the options is disabled.
+- The selected option is stored in the `selectedOption` state.
+- A clearable dropdown is demonstrated, allowing users to reset their selection.
+
+For more detailed examples and live usage, check out the [Storybook Documentation](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-dropdown--docs).
+
+### Icon Component
+
+The `Icon` component serves as a flexible and reusable way to display various icons within your application. It allows for easy integration of SVG icons, enhancing the visual appeal and usability of your UI.
+
+Explore the full documentation and examples in Storybook: [Icon Component Storybook](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-icon--docs).
+
+#### Props:
+
+- **`name`**: A required property that specifies the name of the icon to be displayed. It should correspond to one of the predefined icon types in your application.
+
+- **`className`**: An optional property for adding additional class names to the icon for custom styling.
+
+- **`...props`**: This spread operator allows you to pass any additional SVG properties (such as `onClick`, `style`, etc.) directly to the SVG element.
+
+#### Example Usage:
+
+```tsx
+import React from 'react';
+import { Icon } from 'simple-react-ui-kit';
+
+const App = () => {
+ return (
+
+
+ );
+};
+
+export default App;
+```
+
+In this example:
+- The `Icon` component is used to render icons for home, settings, and user, each with custom class names for styling.
+
+#### Features:
+
+- **Customizable**: The `Icon` component can accept additional properties that allow for further customization, such as event handlers and styling.
+
+- **Flexible Integration**: Use the component anywhere in your application where an icon is needed, ensuring consistency across your UI.
+
+- **SVG Support**: The component is built to render SVG icons, providing scalability and clarity in display.
+
+#### Utility:
+The `Icon` component is ideal for applications requiring a variety of icons, such as navigation bars, buttons, and informational displays. It enhances the user experience through intuitive iconography while maintaining a clean and manageable codebase.
+
+For more detailed examples and interactive demonstrations, visit the [Storybook Documentation](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-icon--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.
+
+Explore the full documentation and examples in Storybook: [Popout Component Storybook](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-popout--docs).
+
+#### Props:
+- **`className`**: Additional class names for custom styling.
+- **`position`**: Position of the popout relative to the trigger element. Possible values: `'left'` or `'right'`.
+- **`action`**: The content inside the button that triggers the popout (could be text, an icon, or a React node).
+- **`children`**: The content to display inside the popout when it's open.
+- **`closeOnChildrenClick`**: A boolean flag that, when set to `true`, closes the popout when any child inside the popout is clicked.
+
+#### Example Usage:
+
+```tsx
+import React, { useRef } from 'react';
+import { Popout, PopoutHandleProps } from 'simple-react-ui-kit';
+
+const App = () => {
+ const popoutRef = useRefMy Application
+
+
+
+
+ );
+};
+
+export default App;
+```
+
+In this example:
+- The `Popout` component is positioned to the right of the trigger button.
+- The `closeOnChildrenClick` prop is set to `true`, meaning the popout will close when any of its children are clicked.
+- A reference to the popout is used to manually close it via the `close` function.
+
+#### Imperative Handle:
+The `Popout` component provides an imperative handle with a `close()` method, which allows programmatic control over closing the popout.
+
+For more detailed examples and interactive demonstrations, visit the [Storybook Documentation](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-popout--docs).
+
+### Skeleton Component
+
+The `Skeleton` component is a simple placeholder used to indicate the loading state of content, typically displayed as a gray box or shape that mimics the layout of the actual content. It helps improve user experience by showing an outline of the content while it's being loaded.
+
+Explore the full documentation and examples in Storybook: [Skeleton Component Storybook](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-skeleton--docs).
+
+#### Props:
+- **`className`**: Additional class names for custom styling. You can use this prop to apply different styles or layouts to match the skeleton to the shape and size of the content it represents.
+- **`...props`**: This component also accepts all standard `HTMLDivElement` attributes, allowing you to customize it further (e.g., setting width, height, etc.).
+
+#### Example Usage:
+
+```tsx
+import React from 'react';
+import { Skeleton } from 'simple-react-ui-kit';
+
+const App = () => {
+ return (
+
+
+ Popout Content
+ +
+
+ );
+};
+
+export default App;
+```
+
+In this example:
+- The `Skeleton` component is used as a placeholder for a large block of content that is still loading.
+- Inline styles define the skeleton's width and height, making it flexible for different layouts and components.
+
+#### Customization:
+You can apply additional CSS classes via the `className` prop to further style the skeleton. The skeleton automatically fills the space of its parent, making it suitable for a variety of content-loading placeholders such as text, images, and buttons.
+
+#### Utility:
+- The skeleton is commonly used in list views, card layouts, or media-heavy sections where content loading might take longer.
+- It provides a smooth transition once the content is loaded, enhancing user experience.
+
+For more detailed examples and interactive demonstrations, visit the [Storybook Documentation](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-skeleton--docs).
+
+### Spinner Component
+
+The `Spinner` component is a loading indicator represented as a rotating circle or animation. It visually communicates to users that a process is ongoing, enhancing the user experience during loading states or asynchronous operations.
+
+Explore the full documentation and examples in Storybook: [Spinner Component Storybook](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-spinner--docs).
+
+#### Props:
+- **`className`**: Additional class names for custom styling. Use this prop to apply different styles or sizes to the spinner.
+- **`...props`**: The spinner component accepts all standard `SVGSVGElement` attributes, allowing for further customization, such as setting dimensions or color.
+
+#### Example Usage:
+
+```tsx
+import React from 'react';
+import { Spinner } from 'simple-react-ui-kit';
+
+const App = () => {
+ return (
+ Loading Content
+
+
+ );
+};
+
+export default App;
+```
+
+In this example:
+- The `Spinner` component is used as a loading indicator while content is being fetched.
+- Additional properties like `width` and `height` can be set to control the spinner's size, while the `className` prop allows for custom styling.
+
+#### Customization:
+You can customize the appearance of the spinner by adding a `className` for your CSS styles. The spinner's fill colors and sizes can also be adjusted using inline styles or CSS classes.
+
+#### Utility:
+- The spinner is an essential component in any application that requires user feedback during loading processes, such as data fetching or processing tasks.
+- It provides a clear visual cue, helping to reduce user frustration and confusion during wait times.
+
+For more detailed examples and interactive demonstrations, visit the [Storybook Documentation](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-spinner--docs).
+
+### Table Component
+
+The `Table` component is a versatile data representation tool designed for displaying tabular data with support for sorting, loading states, and custom formatting. It enhances data visibility and interaction, making it ideal for applications requiring organized data presentation.
+
+Explore the full documentation and examples in Storybook: [Table Component Storybook](https://miksrv.github.io/simple-react-ui-kit/?path=/docs/components-table--docs).
+
+#### Props:
+
+- **`data`**: An optional array of data objects to be displayed in the table. Each object corresponds to a row in the table.
+
+- **`defaultSort`**: An optional configuration object for default sorting behavior. It defines the key and direction (ascending or descending) for initial sorting.
+
+- **`className`**: Additional class names for custom styling, allowing you to integrate your CSS styles.
+
+- **`height`**: Specifies the table height in pixels or allows auto height if set to `null`.
+
+- **`columns`**: An array defining the column configurations, including header content, accessor keys, sortability, and custom formatters.
+
+- **`loading`**: A boolean that indicates whether the table is in a loading state. When `true`, skeleton placeholders are displayed instead of data.
+
+- **`stickyHeader`**: A boolean that, when set to `true`, keeps the table header fixed at the top during scrolling.
+
+- **`verticalBorder`**: A boolean to control the visibility of vertical borders between columns for improved readability.
+
+#### Example Usage:
+
+```tsx
+import React from 'react';
+import { Table } from 'simple-react-ui-kit';
+
+const App = () => {
+ const data = [
+ { id: 1, name: 'Item 1', price: 100 },
+ { id: 2, name: 'Item 2', price: 200 },
+ ];
+
+ const columns = [
+ { header: 'ID', accessor: 'id', isSortable: true },
+ { header: 'Name', accessor: 'name', isSortable: true },
+ { header: 'Price', accessor: 'price', isSortable: true, formatter: (value) => `$${value}` },
+ ];
+
+ return (
+ Loading...
++ (Back to top) +
+ + +## Contributing + +Contributions are what make the open-source community such an incredible resource for developers. Any contributions you make are greatly appreciated! + +**To contribute:** + +1. Fork the project. +2. Create your feature branch (`git checkout -b feature/AmazingFeature`). +3. Commit your changes (`git commit -m 'Add AmazingFeature'`). +4. Push to the branch (`git push origin feature/AmazingFeature`). +5. Open a pull request. + +For more detailed contributing guidelines, see [CONTRIBUTING.md](CONTRIBUTING.md). + +### Top contributors + + ++ (Back to top) +
+ + +## License + +This project is distributed under the MIT License. See [LICENSE](LICENSE) for more information. + ++ (Back to top) +
+ + +## Acknowledgments + +Here are a few resources that helped inspire or were invaluable during the development of this project: + +1. [GutHub Readme Template](https://github.com/miksrv/GitHub-Project-README-Template) +2. [React Documentation](https://react.dev/) +3. [Styled Components](https://styled-components.com/) +4. [Jest Testing Framework](https://jestjs.io/) + ++ (Back to top) +
+ + +## Contact + +Misha - [miksoft.pro](https://miksoft.pro) + ++ (Back to top) +
+ + + +[contributors-badge]: https://img.shields.io/github/contributors/miksrv/simple-react-ui-kit.svg?style=for-the-badge +[contributors-url]: https://github.com/miksrv/simple-react-ui-kit/graphs/contributors +[forks-badge]: https://img.shields.io/github/forks/miksrv/simple-react-ui-kit.svg?style=for-the-badge +[forks-url]: https://github.com/miksrv/simple-react-ui-kit/network/members +[stars-badge]: https://img.shields.io/github/stars/miksrv/simple-react-ui-kit.svg?style=for-the-badge +[stars-url]: https://github.com/miksrv/simple-react-ui-kit/stargazers +[issues-badge]: https://img.shields.io/github/issues/miksrv/simple-react-ui-kit.svg?style=for-the-badge +[issues-url]: https://github.com/miksrv/simple-react-ui-kit/issues +[license-badge]: https://img.shields.io/github/license/miksrv/simple-react-ui-kit.svg?style=for-the-badge +[license-url]: https://github.com/miksrv/simple-react-ui-kit/blob/master/LICENSE + + +[js-badge]: https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000 +[js-url]: https://www.javascript.com/ +[ts-badge]: https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff +[ts-url]: https://www.typescriptlang.org/ +[sass-badge]: https://img.shields.io/badge/Sass-C69?logo=sass&logoColor=fff +[sass-url]: https://sass-lang.com/ +[jest-badge]: https://img.shields.io/badge/Jest-C21325?logo=jest&logoColor=white +[jest-url]: https://jestjs.io/ +[sonarcloud-badge]: https://img.shields.io/badge/SonarCloud-F3702A?logo=sonarcloud&logoColor=fff +[sonarcloud-url]: https://sonarcloud.io/ +[githubactions-badge]: https://img.shields.io/badge/GitHub_Actions-2088FF?logo=github-actions&logoColor=white +[githubactions-url]: https://docs.github.com/en/actions