smartzi-lib 1.0.0

package/README.md

@@ -0,0 +1,254 @@
+# Smartzi UI
+
+An UI Component Library Created by Smartzi.
+
+## Table of Contents
+
+- [Carousel Component](#carousel-component)
+  - [Features](#features)
+  - [Installation](#installation)
+  - [Importing](#importing)
+    - [For React App](#for-react-app)
+    - [For Next App](#for-next-app)
+  - [Usage](#usage)
+  - [Props](#props)
+  - [Styling](#styling)
+  - [Dependencies](#dependencies)
+- [Button Component](#button-component)
+  - [Features](#features-1)
+  - [Installation](#installation-1)
+  - [Importing](#importing-1)
+  - [Usage](#usage-1)
+  - [Props](#props-1)
+  - [Styling](#styling-1)
+  - [Dependencies](#dependencies-1)
+- [DropdownText Component](#dropdowntext-component)
+  - [Features](#features-2)
+  - [Installation](#installation-2)
+  - [Importing](#importing-2)
+  - [Usage](#usage-2)
+  - [Props](#props-2)
+  - [Styling](#styling-2)
+  - [Dependencies](#dependencies-2)
+
+## Carousel Component
+
+A customizable Carousel component for React applications.
+
+### Features
+
+- Dynamically display a list of items in a carousel format.
+- Customizable background color, text color, wrapper height, and icon for each slide.
+- Auto-scroll functionality with adjustable interval duration.
+- Responsive design compatible with various screen sizes.
+- Optional back bar with customizable color and angle for additional styling.
+
+### Installation
+
+Install the Carousel component via npm:
+
+```bash
+npm install smartziui
+```
+
+### Importing
+
+Due to rendering methods, React and Next have some conflicts in using the Carousel Component. Further discussion will be mentioned under the "Next App usage" section.
+
+#### For React App
+
+```jsx
+import Carousel from "smartziui";
+```
+
+#### For Next App
+
+In Next.js apps, a normal import will cause a `Document is not defined` error. To overcome this, we have to import our Carousel Component for client-side rendering only. The reason is that we use the document object to get the browser dimension to increase compatibility with the user's browser. However, in server-side rendering, the browser window isn't available.
+
+```jsx
+import dynamic from "next/dynamic";
+const Carousel = dynamic(
+  () => import("smartziui").then((mod) => mod.Carousel),
+  {
+    ssr: false,
+  }
+);
+```
+
+### Usage
+
+Here is a basic example of how to use the Carousel component:
+
+```jsx
+import React from 'react';
+import Carousel from 'smartziui'; // Consider that Next.js import will be another method which mentioned above.
+
+const App = () => {
+  const scrollContent = [
+    'First item', 'Second item', 'Third item'
+  ];
+
+  return (
+    <Carousel
+      scrollContent=scrollContent,
+      intervalDuration={3000},
+      bgColor="#3FA535",
+      textColor="#FFFFFF",
+      WrapperHeight={50},
+      icon="<i class='bi bi-star-fill'></i>",
+      iconWidth={20},
+      scrollerId={0},
+      backBar=true,
+      backBarColor="#27205B",
+      backBarAngle="-2"
+    />
+  );
+}
+
+export default App;
+```
+
+### Props
+
+| Prop               | Type     | Default                            | Description                                                       |
+| ------------------ | -------- | ---------------------------------- | ----------------------------------------------------------------- |
+| `scrollContent`    | string[] | ['first item', 'second item', ...] | Array of strings to display in the carousel.                      |
+| `intervalDuration` | number   | 3000                               | Duration (in milliseconds) before transitioning to the next item. |
+| `bgColor`          | string   | "#3FA535"                          | Background color of the carousel wrapper.                         |
+| `textColor`        | string   | "#FFFFFF"                          | Text color for the content in the carousel.                       |
+| `WrapperHeight`    | number   | 50                                 | Minimum height of the carousel wrapper in pixels.                 |
+| `icon`             | string   | ""                                 | HTML string for an icon to display before the text.               |
+| `iconWidth`        | number   | 20                                 | Font size for the icon in pixels.                                 |
+| `scrollerID`       | number   | 0                                  | Only needed while using multiple carousels in one app.            |
+| `backBar`          | boolean  | true                               | Enable or disable the back bar behind the carousel.               |
+| `backBarColor`     | string   | "#27205B"                          | Background color of the back bar.                                 |
+| `backBarAngle`     | string   | "-2"                               | Rotation angle of the back bar in degrees.                        |
+
+### Styling
+
+The Carousel component uses Bootstrap classes for styling and layout. You can override these styles by writing your own CSS rules. Ensure to import `Carousel.css` in your project for custom styles.
+
+### Dependencies
+
+- React
+- Bootstrap (for styling and responsive design)
+- html-react-parser (to parse strings into HTML elements)
+
+## Button Component
+
+A customizable Button component for React applications.
+
+### Features
+
+- Customizable label and variant (e.g., primary, secondary, success, etc.).
+- Simple implementation for adding buttons with different styles throughout the application.
+- Scalable and reusable for various button requirements in a project.
+
+### Installation
+
+Install the Button component via npm:
+
+```bash
+npm install smartziui
+```
+
+### Importing
+
+Import the Button component in your React application:
+
+```jsx
+import Button from "smartziui/Button";
+```
+
+### Usage
+
+Here is a basic example of how to use the Button component:
+
+```jsx
+import React from 'react';
+import Button from 'smartziui/Button';
+
+const App = () => {
+  return (
+    <Button label="Click me" varient="primary" />
+  );
+}
+
+export default App;
+```
+
+### Props
+
+| Prop      | Type   | Default | Description                                         |
+| --------- | ------ | ------- | --------------------------------------------------- |
+| `label`   | string | "Button"   | Text to display on the button.                          |
+| `variant` | string | "primary"   | Variant style of the button (e.g., primary, secondary, success, etc.). |
+
+### Styling
+
+The Button component uses its own CSS file for styling. You can customize the button styles by modifying the `Button.css` file in your project.
+
+### Dependencies
+
+- React
+- PropTypes (for prop validation)
+## DropdownText Component
+
+A customizable DropdownText component for React applications.
+
+### Features
+
+- Display a collapsible dropdown list with a parent and child items.
+- Customizable parent text, child list, text color, and number of items displayed before scrolling.
+- Simple implementation for creating dropdowns with various content.
+
+### Installation
+
+Install the DropdownText component via npm:
+
+```bash
+npm install smartziui
+```
+
+### Importing
+
+Import the DropdownText component in your React application:
+
+```jsx
+import DropdownText from "smartziui/DropdownText";
+```
+
+### Usage
+
+Here is a basic example of how to use the DropdownText component:
+
+```jsx
+import React from 'react';
+import DropdownText from 'smartziui/DropdownText';
+
+const App = () => {
+  return (
+    <DropdownText Parent="Parent" childList={["child1","child2","child3","child4"]} textColor="black" scrollOver={3} />
+  );
+}
+
+export default App;
+```
+
+### Props
+
+| Prop        | Type   | Default       | Description                                                |
+| ----------- | ------ | ------------- | ---------------------------------------------------------- |
+| `Parent`    | string | "Parent"      | Text displayed for the parent item in the dropdown.         |
+| `childList` | array  | ["child1",...] | Array of strings representing the child items in the dropdown. |
+| `textColor` | string | "black"       | Text color for both the parent and child items.            |
+| `scrollOver`| number | 3             | Number of items displayed before scrolling in the dropdown. |
+
+### Styling
+
+The DropdownText component uses its own CSS file for styling. You can customize the dropdown styles by modifying the `DropdownText.css` file in your project.
+
+### Dependencies
+
+- React
+- PropTypes (for prop validation)