Components for your project

:mortar_board: my-storybook-react-library is library that provides some components for using them in a project, and for each component a story is implemented, thanks to which the component can be viewes in the storybook.

The library provides the following components:

• Button
• CalendarTask
• Loader
• SearchInput
• Today
• WeatherItem

To start working and use the components you need to import them into the project: import * as L from "my-storybook-react-library"

1. Button

:pencil: Description

The Button component is customizable button build with React and styled-components. It allows to easily create buttons with different sizes and click handlers.

Props

• children: ReactNode. The content to be displayed inside the button
• onClick: () => void (optional)
• size: "small" | "medium" (optional). The size of button.

Example

<L.Button onClick={handleSearch}>Search</L.Button>

2. CalendarTask

:pencil: Description

The CalendarTask component is a simple and reusable component designed to display a task with its scheduled time.

Props

• time: string. The time associated with task, displayed prominently in the oval area
• task: string

Example

<div>
   <L.CalendarTask time="10:00" task="New task" />
</div>

3. Loader

:pencil: Description

This is a common rotating circle loading component.

4. SearchInput

:pencil: Description

This is an input field designed for searching and selecting options. It supports dynamic search filtering with a dropdown list.

Props

• placeholder: string (optional)
• onChange: (string) => void. Callback function triggered whenever the input value changes. It receives the current input value as a parametr
• areas: Area[]. The array of objects with a name property representing the list of searchable items
• onSelect: (area) => void. Callback function triggered when an item from the dropdown is selected. It receives the selected item as a parameter.

Example

 <L.SearchInput
      placeholder="Введите город..."
      areas={[
        { name: "Минск" },
        { name: "Витебск" },
        { name: "Гродно" },
        { name: "Брест" },
        { name: "Гомель" },
        { name: "Могилёв" },
      ]}
      onChange={handleInputChange}
      onSelect={handleSelect}
    />

5. Today

:pencil: Description

The Today component displays the current date and time in a user-friendly format. It uses Intl.DateTimeFormatOptions to localize the date and time presentation.

Props

• screenSize: "mediumScreen" | "extraLargeScreen" (optional)

6. WeatherItem

:pencil: Description

This component displays a single card for the daily weather forecast. It includes a day, an icon representing the weather conditions, and a temperature in degrees Celsius. The component uses images from OpenWeatherMap API.

Props

• day: string. The name or date of the day to display
• icon: string. The code of the OpenWeatherMap icon representing the weather conditions (e.g. "01d" for a sunny day, "10n" for a rainy night)
• temp: number. The temperature for the specified day in degrees Celsius

Example

<L.WeatherItem day="Monday" icon="01d" temp={20} />