v1.5.0

Release Notes

Welcome to the latest release of Keep React! This version brings numerous improvements and updates to our components while preserving the familiar UI look and feel.

Animation

We are excited to announce that we are now using the highly popular animation framework, Framer Motion, in our components such as Tabs, Modal, and Notification. This will enhance the user experience with smooth and engaging animations.

Features

• Keep Presets Removed: We have streamlined our package by removing Keep Presets.
• Import cn() Function: You can now import the cn() function directly from keep-react for better convenience.
• Customizable Colors Theme: You can now customize the color themes according to your project requirements.
• Avatar Structure Update: The Avatar component structure has been updated for better performance and flexibility.
• Checkbox, Switch, Slider: These components now utilize @radix-ui, ensuring better accessibility and usability.
• asChild Prop Available: The asChild prop is now available, allowing greater control over component rendering.
• KeepPortal: You can use KeepPortal to create your own Portal easily.

Installation Process

We have simplified the integration process. You can now import keepTheme from keep-react/keepTheme to achieve the same functionality. For more details, please check out the installation docs here.

import { keepTheme } from 'keep-react/keepTheme'

const config = {
  content: ['./components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {},
}

export default keepTheme(config)

Radix UI Components Integration

We have integrated several components with Radix UI for enhanced functionality and accessibility. Here is the list of components now using Radix UI:

• Checkbox
• Slider
• Switch

Updated Component Styles

We have updated the styles for some of our components to improve their appearance and usability:

• Alert
• Badge

Removal of Extra div Elements

To optimize our components, we have removed extra div elements from the following components:

• Modal
• Notification
• Drawer

Structural Updates to Components

We have made structural updates to several components for better performance and flexibility:

• Avatar
• Number Input
• Steps
• Tabs

Contributors

This release was made possible by the hard work and dedication of our contributors. Special thanks to:

• Arifulislam5577

These updates aim to improve your development experience and the performance of your applications. For detailed documentation and examples, please visit our official documentation. Thank you for using Keep React!

v1.4.0

Keep React V1.4.0

Welcome to the latest release of Keep React! This version brings several improvements and updates to our components while maintaining the familiar UI look and feel.

Alert

The Alert component structure has been updated for better consistency. Here are the changes:

• Alert.Container is now AlertContainer
• Alert.Body is now AlertBody
• Alert.Dismiss is now AlertDismiss
• Alert.Link is now AlertLink
• Alert.Icon is now AlertIcon
• Alert.Title is now AlertTitle
• Alert.Description is now AlertDescription

import { Alert, AlertContainer, AlertDescription, AlertDismiss, AlertIcon, AlertLink, AlertTitle } from 'keep-react'

const AlertComponent = () => {
  return (
    <Alert color="primary">
      <AlertContainer>
        <AlertIcon />
        <AlertTitle>Alert here</AlertTitle>
        <AlertDescription>A short description followed by two actions items.</AlertDescription>
      </AlertContainer>
      <AlertLink href="/">Learn More</AlertLink>
      <AlertDismiss />
    </Alert>
  )
}

export default AlertComponent

Carousel

We have revamped the Carousel component structure. Here are the changes:

• Carousel.Control is now CarouselControl
• Carousel.Buttons is now CarouselButtons
• Carousel.Item is now CarouselItem
• Carousel.Slides is now CarouselSlides
• Carousel.Indicators is now CarouselIndicators
• Carousel.PrevButton is now CarouselPrevButton
• Carousel.NextButton is now CarouselNextButton

import {
  Carousel,
  CarouselButtons,
  CarouselControl,
  CarouselIndicators,
  CarouselItem,
  CarouselNextButton,
  CarouselPrevButton,
  CarouselSlides,
} from 'keep-react'

const CarouselComponent = () => (
  return (
    <Carousel>
      <CarouselSlides>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="flex items-center justify-center rounded-xl border border-metal-100 bg-primary-25 p-20 dark:border-metal-900 dark:bg-metal-900">
              <h1 className="text-heading-1 font-medium text-metal-900 dark:text-white">{index + 1}</h1>
            </div>
          </CarouselItem>
        ))}
      </CarouselSlides>
      <CarouselControl>
        <CarouselButtons>
          <CarouselPrevButton />
          <CarouselNextButton />
        </CarouselButtons>
        <CarouselIndicators />
      </CarouselControl>
    </Carousel>
  )
}

export default CarouselComponent

Card, Modal, Accordion, and More

Similarly, other components like Card, Modal, Accordion, and many more have undergone structural updates for consistency and clarity.

Updated Component List

• Accordion
• Alert
• Avatar
• Breadcrumb
• ButtonGroup
• Card
• Carousel
• Drawer
• Dropdown
• Empty
• Input
• Modal
• Navbar
• Notification
• Number Input
• Pagination
• Popover
• Progress
• Rating
• Sidebar
• Skeleton
• Slider
• Steps
• Table
• Tabs
• Timeline
• Upload

Dark Mode

With the release of Keep React v.1.4.0, dark mode is now available for all components. Enhance your user interface with this sleek new feature and provide a better experience for users who prefer darker themes.

Next Js Server and Client Component

Starting from this version, you can now use Keep components in our Next.js server components without the need for the "use client" directive. Even though our components are still client-side components, they can seamlessly integrate with Next.js server components, offering greater flexibility in your project architecture.

Contributors

This release was made possible by:

• Arifulislam5577

v1.3.0

Keep React V1.3.0 Release Notes

Welcome to the latest release of Keep React! We're excited to introduce several new features and enhancements to improve your development experience. Let's dive in and explore what's new:

Carousel

• Migrated from "react-indiana-drag-scroll" to "embla-carousel-react"
• Enhanced customization and appearance of Carousel Component
• Overhauled Carousel API
• Added New Carousel Component documentation

Modal

• Implemented RemoveScroll to prevent scrolling outside of the modal
• Introduced FocusLock to maintain keyboard focus within the modal
• Updated Modal API
• Added New Documentation with improved UI and customization options

Typography

• Removed Typography classes in favor of Tailwind CSS classes
• Updated documentation for Typography component
• Improved accessibility

Color

• Added default color palettes with Tailwind CSS classes support and hex color codes

Toast

• Added Toast component with simplified integration
• Customizable appearance and behavior

Layout

• Introduced layout styles utilizing Tailwind CSS grid system, flexbox, and column layout
• Expanded selection of layout options with plans for further enhancements

Date Picker

• Replaced 'react-datepicker' library with 'react-day-picker'
• Expanded customization options
• Updated documentation and UI

Drawer

• Added New Drawer component with extensive customization options
• Enhanced UI and improved documentation

Rating

• Functional Rating component with enhanced UI and customization options

Timeline

• Introduced Timeline component with modern styling
• Customizable appearance and behavior
• Updated documentation

Tooltip

• Added Tooltip component with refreshed styling
• Enhanced customization options
• Improved documentation

Contributors

This release was made possible by:

• Arifulislam5577
• anjankarmakar10
• shuvo-me

v1.2.0

What's Changed

• Feature: add top progress bar while changing route. by @shuvo-me in #138
• Feature: add top progress bar while changing route. by @Arifulislam5577 in #139
• Feature: Top progress bar feature added. by @shuvo-me in #141
• Keep/Update-V1.2.0 by @Arifulislam5577 in #148

New Contributors

• @shuvo-me made their first contribution in #138

Full Changelog: v1.1.2...v1.2.0

v1.1.2

What's Changed

• Add better hover effect by @codeblitz97 in #95
• Added: Contributor img added by @Arifulislam5577 in #97
• chore: commented on newly added component and update the old component by @TajwarSaiyeed in #99
• Keep/storybook control by @Arifulislam5577 in #100
• Added: Storybook New Deploy link added by @Arifulislam5577 in #102
• Related issue 90 feat: add focus when search field was opened by @gfpaiva in #103
• Keep/GitHub action by @Arifulislam5577 in #109
• Issue: Checkbox transition issue fixed. by @Arifulislam5577 in #111
• Keep/checkbox transition by @Arifulislam5577 in #112
• Documentation Page Design Updated. by @Arifulislam5577 in #116
• Keep/docs design update by @Arifulislam5577 in #117
• Updated: Update conduct email & Commit rule. by @Arifulislam5577 in #124
• Keep/update conduct email by @Arifulislam5577 in #125
• Keep/update-conduct-email. by @Arifulislam5577 in #126
• Enhance: Change accordion icon plus to cross while accordion panel is open by @ridoystarlord in #122
• Fixed: Responsive Issue Fixed. by @Arifulislam5577 in #129

New Contributors

• @codeblitz97 made their first contribution in #95
• @gfpaiva made their first contribution in #103
• @ridoystarlord made their first contribution in #122

Full Changelog: v1.1.0...v1.1.2

v1.1.0

v1.1.0 (2023-12-18)

Features

• Alert component props and structure changed
• Accordion component props and structure changed
• Notification component props and structure changed
• Popover component props and structure changed
• Added Modal and Notification component open animation
• Added Typography component
• CSS Import Style changed
• Keep Preset import styles changed

Bug fixes

• Date Picker Type Issue
• Popover width Issue

v1.0.2

v1.0.2 (2023-11-17)

• Fixed Typography Error
• Update Documentation
• Add className Props in every component
• customClass props removed with className props

v1.0.1

Keep React v1.0.1 - Initial Release

We are thrilled to announce the initial release of Keep React, our open-source component library built on React and Tailwind CSS. This release marks the beginning of our journey in providing a collection of pre-designed UI components to simplify web application development.

Key Features

• Basic Components: Our library includes a set of essential UI components, such as buttons, modals, alerts, and more.

• Seamless Integration: Keep React is designed to seamlessly integrate with your React projects. Just install the library and start using the components.

• Tailwind CSS Integration: Our components come with Tailwind CSS styles, making it easy to maintain and customize the look and feel of your app.

Getting Started

To get started with Keep React v1.0.0, you can use npm:

npm install keep-react

Or, if you prefer yarn:

yarn add keep-react

Visit our GitHub repository for detailed documentation and examples to kickstart your project.

Community & Contributions

We'd like to extend our gratitude to our community for their support and contributions. Keep React is open-source, and we encourage you to get involved, report issues, and contribute to the development.