v1.1.1

What's Changed

• Feature/colors by @9ssi7 in #151
• bugs/ui-colors: fix bug by @9ssi7 in #152
• bug/ui-colors: fix header color by @9ssi7 in #153
• Feature/calendar by @9ssi7 in #154
• Feature/calendar v2 by @9ssi7 in #155

Full Changelog: v1.0.0...v1.1.1

v1.0.0

What's Changed

• Feature/effects by @9ssi7 in #147
• Feature/readme by @9ssi7 in #148
• Feature/organize by @9ssi7 in #149
• feature/fonts: minify and reorganize project by @9ssi7 in #150

Full Changelog: 0.9.0...v1.0.0

0.9.0

What's Changed

• Feature/parse api err by @9ssi7 in #146

Full Changelog: 0.8.7...0.9.0

0.8.7

What's Changed

• feature/timeline: add system sub component by @9ssi7 in #145

Full Changelog: v0.8.6...0.8.7

v0.8.6

What's Changed

• Feature/design by @9ssi7 in #130
• Feature/design by @9ssi7 in #131
• Feature/design by @9ssi7 in #132
• feature/design: add no margin option to content loader by @9ssi7 in #133
• Feature/design by @9ssi7 in #134
• feature/design: add image loaded hook for perfect image by @9ssi7 in #135
• Feature/design by @9ssi7 in #136
• Feature/design by @9ssi7 in #137
• feature/design: add optional className props to badge by @9ssi7 in #138
• Feature/design by @9ssi7 in #139
• feature/image-loading: fix issue by @9ssi7 in #140
• feature/timeline: add component by @9ssi7 in #142
• feature/timeline: fix time item min-width by @9ssi7 in #143

Full Changelog: v0.2.5...v0.8.6

v0.2.5

🎉 New Release: Version 0.2.5 🎉

We are excited to present the latest release of @turistikrota/ui, introducing an array of exciting new optimizations, bug fixes, and useful utilities to elevate your React applications! Version 0.2.5 comes with numerous enhancements and contributions from the community, making your development experience even more enjoyable.

🔄 Updated Features

• Optimized and perfected the image handling. Thanks to the valuable contribution by @ssibrahimbas in Pull Request #121.

🐛 Bug Fixes

• Resolved the modal z-index issue. Thanks to the important fix by @ssibrahimbas in Pull Request #122.

🛠️ Utilities

• Added a new utility, deep-merge, allowing for more sophisticated merging of objects. Many thanks to @ssibrahimbas for the implementation in Pull Request #123.
• Introduced the find-diff utility, which aids in identifying differences between objects. This utility was contributed by @ssibrahimbas in Pull Request #124.

For a detailed comparison between version 0.2.0 and version 0.2.5, please refer to the Full Changelog.

🚀 Upgrade Instructions

To start leveraging the latest features and improvements, upgrade your @turistikrota/ui package to version 0.2.5 using your preferred package manager:

npm install @turistikrota/[email protected]
# or
yarn add @turistikrota/[email protected]

We appreciate the outstanding contributions from @ssibrahimbas and the entire community, making this release possible. We hope you enjoy using @turistikrota/ui version 0.2.5, and as always, happy coding! 😊🚀

v0.2.0

🎉 New Release: Version 0.2.0 🎉

We are excited to present the latest release of @turistikrota/ui, introducing an array of exciting new features, bug fixes, and useful utilities to elevate your React applications! Version 0.2.0 comes with numerous enhancements and contributions from the community, making your development experience even more enjoyable.

🐛 Bug Fixes

• Resolved an issue related to dark mode alerts that caused them not to display correctly. Thanks to the valuable contribution by @ssibrahimbas in Pull Request #106.

🛠️ Utilities

• Added a new utility, deep-equal, allowing for deep comparison of objects to determine equality. Many thanks to @ssibrahimbas for the implementation in Pull Request #105.
• Introduced a handy markdown utility, making it easier to parse and handle markdown content within the application. This utility was contributed by @ssibrahimbas in Pull Request #107.

🆕 New Components

• Introducing the stars component, contributed by @ssibrahimbas. This component allows you to display star ratings, perfect for showcasing user ratings and reviews. Check out the implementation details in Pull Request #108.
• Added the versatile feature-card component, contributed by @ssibrahimbas. This component enables you to highlight various features or content in an elegant card format. See how it works in Pull Request #109.
• Included the badge component, thanks to the contribution by @ssibrahimbas. This component allows you to add badges or labels to your elements, providing additional context or information. Learn more in Pull Request #110.
• Included the ImagePreview component, thanks to the contribution by @ssibrahimbas. This component allows you to preview image list. Learn more in Pull Request #113.

🔄 Updated Features

• Enhanced the carousel-next feature by adding various optimizations and improvements. Thanks to @ssibrahimbas for the valuable updates in Pull Request #111.

➕ New Features

• Added the sticky-section feature, contributed by @ssibrahimbas. This feature allows you to create sections that stick to the viewport while scrolling, offering a more immersive user experience. Explore the implementation in Pull Request #112.
• Further extended the sticky-section feature with additional functionalities and improvements, thanks to @ssibrahimbas in Pull Request #113.

➰ New Hooks

• Introduced the infinite-scroll hook, courtesy of @ssibrahimbas. This hook facilitates easy implementation of infinite scrolling behavior, perfect for loading additional content dynamically as the user scrolls down. Check out the implementation details in Pull Request #114.
• Intorduced the useInterval hook. Check out the implementation details in Documentation

For a detailed comparison between version 0.1.5 and version 0.2.0, please refer to the Full Changelog.

🚀 Upgrade Instructions

To start leveraging the latest features and improvements, upgrade your @turistikrota/ui package to version 0.2.0 using your preferred package manager:

npm install @turistikrota/[email protected]
# or
yarn add @turistikrota/[email protected]

We appreciate the outstanding contributions from @ssibrahimbas and the entire community, making this release possible. We hope you enjoy using @turistikrota/ui version 0.2.0, and as always, happy coding! 😊🚀

v0.1.5

🎉 New Release: Version 0.1.5 🎉

We are thrilled to announce the latest release of @turistikrota/ui, introducing exciting new features and components to enhance your React applications! Version 0.1.5 brings two fantastic additions: SelectGroup and RadioGroup components, designed to simplify form interactions and improve user experience.

📦 SelectGroup Component

The SelectGroup component allows users to select one or more options from a dropdown list. It provides a user-friendly interface and can be easily integrated into your forms. With customizable titles and clear options, you can provide clearer instructions to users and allow them to reset their selections easily.

Example Usage:

import SelectGroup from '@turistikrota/ui/form/select/group'

<SelectGroup title='Select Group' clear-text='Clear Filter'>
  <SelectGroup.Item name='select-item' id='select-item-1' reversed>
    Select 1
  </SelectGroup.Item>
  <SelectGroup.Item name='select-item' id='select-item-2' value reversed>
    Select 2
  </SelectGroup.Item>
  <SelectGroup.Item name='select-item' id='select-item-3' reversed>
    Select 3
  </SelectGroup.Item>
</SelectGroup>

📻 RadioGroup Component

The RadioGroup component simplifies single-option selection within a group of radio buttons. It is perfect for scenarios where users need to make a single choice from multiple options. With intuitive styling and straightforward implementation, RadioGroup enhances the user experience in your applications.

Example Usage:

import RadioGroup from '@turistikrota/ui/form/radio/group'

const OrderSection: React.FC<OrderSectionProps> = ({ selected, onSelect }) => {
  // ... (your existing code)

  return (
    <RadioGroup title='Sort Order' clearText='Clear Selection' clearAriaLabel='Clear Selected Option'>
      {orders.map((order, idx) => (
        <RadioGroup.Item
          key={idx}
          id={`${order}-${idx}`}
          name='order'
          reverse
          checked={currentOrder === order}
          onChange={() => onSelect(order)}
        >
          {order}
        </RadioGroup.Item>
      ))}
    </RadioGroup>
  )
}

🚀 Upgrade Instructions

To get started with the latest version of @turistikrota/ui, simply update your package to 0.1.5 using your favorite package manager.

Installation:

npm install @turistikrota/[email protected]
# or
yarn add @turistikrota/[email protected]

Happy coding! 😊🚀

v0.1.2

🚀 New Feature Alert! 🚀

Introducing the useImageSrc Hook

Hey there, fellow developers! We are excited to announce a new feature in our latest release - the "useImageSrc" hook! 🎉

With the useImageSrc hook, you can now effortlessly manage image sources in your React applications using the power of React's built-in useState hook. Whether you are using Next.js or Vite as your build tool, this hook is fully compatible and designed to work seamlessly in both environments.

How does it work?

The useImageSrc hook comes with two main functionalities:

1. setDefaultImageSrc: Set a default image source that will be used in case of image loading errors or when the original image source is unavailable.

2. useImageSrc: A custom hook that allows you to use the default or custom image source in your components. If the provided image source encounters an error, it will automatically fallback to the default image source.

Installation

To start using the useImageSrc hook in your React project, simply follow these steps:

1. Install the @turistikrota/ui v0.1.2 or higher:

npm install @turistikrota/ui@latest

Usage

Import and use the hook in your components:

With NextJS

'use client'

import Image from 'next/image'
import { useImageSrc, setDefaultImageSrc } from '@turistikrota/ui/hooks/image'

setDefaultImageSrc('/path/to/dummy-image.png')

export default function MyComponent()  {
  const { src, onError } = useImageSrc('/path/to/image.png')

  return (
    <Image src={src} onError={onError} alt='Image' width={100} height={100} />
  )
}

With Vite

import { useImageSrc, setDefaultImageSrc } from '@turistikrota/ui/hooks/image'

setDefaultImageSrc('/path/to/dummy-image.png')

export default function MyComponent()  {
  const { src, onError } = useImageSrc('/path/to/image.png')

  return (
    <img src={src} onError={onError} alt='Image' />
  )
}

Why should you use it?

The useImageSrc hook offers a simple and elegant solution for handling image sources in your React applications. By setting a default image source, you ensure that your users always see a fallback image when the original one is not available or failed to load. This enhances the user experience and eliminates broken image issues on your website or web application.

Upgrade now!

Don't wait any longer to improve your image handling in React projects. Upgrade to the latest version and start using the useImageSrc hook today! We're confident it will make your development process smoother and your users happier.

Happy coding! 🎉🚀

v0.1.1

🚀 Turistikrota UI Kit v0.1.1 Release Notes 🚀

We're thrilled to announce the release of version 0.1.1 of our UI Kit! This update introduces some exciting new components that will enhance your design and development experience. Let's take a closer look at the latest additions:

1. Top Header Component:
   Introducing the Top Header component, a versatile and stylish navigation element that sits at the top of your web pages. It's designed to provide a seamless user experience and improve the overall visual appeal of your application. The Top Header is fully customizable, allowing you to tailor it to your specific brand and design requirements.

2. Mobile Header Component:
   Our new Mobile Header component ensures that your application looks stunning on mobile devices as well. With a focus on responsiveness and user-friendliness, the Mobile Header makes navigation on smaller screens a breeze. It elegantly collapses and expands, adapting to different screen sizes, without compromising on functionality or aesthetics.

3. Error Page:
   Error pages don't have to be dull anymore! We're excited to present the Error Page component, which will help you turn error moments into opportunities to showcase your brand's personality. Whether it's a 404 or a server error, the Error Page component lets you communicate with your users in a visually appealing and informative way.

🎉 Other Enhancements:

• Bug fixes: We've resolved some pesky bugs reported by our amazing community, making the UI Kit even more robust and stable.
• Performance improvements: We've optimized the UI Kit's performance to ensure smoother rendering and interaction.

📝 How to Get Started:
To start using version 0.1.1 of our UI Kit, you can either download it directly from our website or update it using package managers like npm or yarn. Check out our updated documentation for detailed instructions and examples on how to implement the new components.

🤝 Community and Feedback:
We want to extend our heartfelt thanks to our fantastic community of developers and designers who have been actively providing feedback and suggestions. Your valuable input has shaped this release, making it better for everyone.

If you encounter any issues or have ideas for further improvements, please don't hesitate to reach out to us on our GitHub repository or join our community forum. We'd love to hear from you!

Stay tuned for more exciting updates in the near future! Happy designing and coding! 🎉