@bigbinary/neetoui 3.7.0-beta.9 → 4.0.0

package/CHANGELOG.md

@@ -8,6 +8,7 @@
 ** Represent a version as second level heading and write the version number inside a square bracket, eg: ##  [3.3.2]
 
 --->
+
 # Changelog
 
 All notable changes to this project will be documented in this file.
@@ -16,17 +17,269 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 Prefix the change with one of these keywords:
 
-- *Added*: for new features.
-- *Changed*: for changes in existing functionality.
-- *Deprecated*: for soon-to-be removed features.
-- *Removed*: for now removed features.
-- *Fixed*: for any bug fixes.
-- *Security*: in case of vulnerabilities.
+- _Added_: for new features.
+- _Changed_: for changes in existing functionality.
+- _Deprecated_: for soon-to-be removed features.
+- _Removed_: for now removed features.
+- _Fixed_: for any bug fixes.
+- _Security_: in case of vulnerabilities.
+
+## 4.0.0 - 2022-09-02
+
+- Updated: Color palette
+- Added: CSS variables support
+- Added: Custom theming support
+- Added: Default dark theme support
+- Added: Design preview in Storybook
+- Added: Guidelines to structure content in applications
+- Changed: bundle type to `CJS`
+- Fixed: delay while opening overlays
+- Removed: `framer-motion` from dependencies.
+
+### Color palette 🎨
+
+- Updated color naming convention
+- Added CSS variables support for colors
+- Implemented dynamic color palette to support default dark mode
+- Served color codes as RBG numbers in CSS variables to achieve color transparency
+- Enhanced contrast of status color (info, success, error, warning)
+- Included existing pastel colors as the color swatches of primary, success, error, warning, and info
+- Added new set of pastel colors
+- Removed unused colors from the palette
+- Updated utility classes to match the new variable naming
+- Restructured documentation and created new documentation for color palette
+- Deprecated `neeto-ui-accent1`, `neeto-ui-accent2`, `neeto-ui-accent3`, `neeto-ui-accent4` colors and utility classes
+- Deprecated `neeto-ui-secondary-indigo`, `neeto-ui-secondary-green`, `neeto-ui-secondary-teal` colors and utility classes
+- Deprecated `neeto-ui-pastel-teal`
+- Renamed `neeto-ui-success` to `neeto-ui-success-500`
+- Renamed `neeto-ui-info` to `neeto-ui-info-500`
+- Renamed `neeto-ui-error` to `neeto-ui-error-500`
+- Renamed `neeto-ui-warning` to `neeto-ui-warning-500`
+- Renamed `neeto-ui-pastel-blue` to `neeto-ui-info-100`
+- Renamed `neeto-ui-pastel-green` to `neeto-ui-success-100`
+- Renamed `neeto-ui-pastel-yellow` to `neeto-ui-warning-100`
+- Renamed `neeto-ui-pastel-red` to `neeto-ui-error-100`
+
+### Cosmetic changes 👁
+
+#### Button
+
+- Updated primary button color to `neeto-ui-primary-500`
+- Added `:focus` rings to buttons for accessibility
+- Updated `:focus-visible` styles to match the new design
+- Updated border radius to `5px`
+- Updated CSS transition from `all .3s ease-in-out` to `all .3s linear`
+- Deprecated variants story in Storybook doc
+- Created independent stories for `Styles`, `Sizes`, `Icon only` etc
+
+#### Checkbox
+
+- Replaced checked state icon with neetoIcon
+- Updated checked state color to `neeto-ui-primary-500`
+- Changed default state border color from `grey 300` to `grey 400`
+- Updated `:hover` border color to `grey 500`
+- Updated `:focus-visible` border color to `neeto-ui-primary-500`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Improved spacing in component
+
+#### Radio
+
+- Replaced checked state icon with neetoIcon
+- Updated checked state color to `neeto-ui-primary-500`
+- Changed default state border color from `grey 300` to `grey 400`
+- Updated `:hover` border color to `grey 500`
+- Updated `:focus-visible` border color to `neeto-ui-primary-500`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Improved spacing in component
+
+#### Input
+
+- Updated border-radius to `5px`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Fixed unwanted spacing in maxLength label
+- Fixed alignment issues in Input with maxLength and no label text
+- Fixed spacing inconsistencies in error test and helper text - used same margin value for both
+- Fixed alignment issues in naked inputs
+- Deprecate `variants` story in Storybook and created individual stories for `Input sizing`
+
+#### Textarea
+
+- Updated border-radius to `5px`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Fixed unwanted spacing in the maxLength label
+- Fixed alignment issues in Input with maxLength and no label text
+- Fix spacing inconsistencies in error test and helper text - used the same margin value for both
+- Fixed alignment issues in naked inputs
+- Added size prop to Textarea
+
+#### Select
+
+- Updated border-radius to `5px`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Replaced the default dropdown icons with neetoIcons
+- Added CSS transition to the select options
+- Applied Badge styles to Multi select items
+- Replaced multivalue remove icon with neetoIcon
+- Updated multivalue error styles
+- Increased Story heights for better view
+
+#### Email input
+
+- Updated border radius to `5px`
+- Updated selected values styles to match Tag styles
+- Fixed prefix and suffix spacing
+- Updated prefix icon size to `16px`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Fixed spacing issues in counter
+- Fixed alignment issues in label row
+- Fixed spacing inconsistencies in error test and helper text - used same margin for both
+- Updated error styles of multivalue select
+
+#### Label
+
+- Updated label bottom margin to 8px
+- Removed letter-spacing in label text
+
+#### Dropdown & Action Dropdown
+
+- Updated border-radius to `5px`
+- Reduced the height of Dropdown options to `32px`
+- Created Storybook examples with semantic markup for easy keyboard win
+- Separated Delete/Remove actions with a border
+- Updated `box-shadow`
+
+#### Date Time picker
+
+- Replaced default icons with neetoIcons
+- Updated selection color to `neeto-ui-primary`
+- Added border to date and time dropdown
+- Updated box shadow of dropdown
+
+#### Accordion
+
+- Updated font weight of Accordion title to `500`
+- Updated `border-radius` to `8px`
+
+#### Avatar
+
+- Updated background colors to new pastel colors
+- Updated square variant `border-radius` to `5px`
+
+#### Table
+
+- Updated column title color to `grey 600`
+- Updated column title font weight to 700
+- Reduced cell padding from `12px 16px` to `8px 16px` to accommodate more number of row in a given height
+- Removed border from pagination items
+- Updated pagination buttons to match neetoUI button style
+- Updated active pagination item styles to `neeto-ui-primary`
+- Replaced default icons with neetoIcons
+
+#### PageLoader
+
+- Updated neeto logo
+
+#### Color picker
+
+- Added border to input
+
+#### Alert & Modal
+
+- Reduced outer padding from `32px ` to `24px` to provide the compact view
+- Updated `border-radius` to `12px`
+
+#### Toast
+
+- Applied `48px` minimum height
+- Applied dark theme to all variants
+- Reduced text font weight to `400`
+
+#### Tooltip
+
+- Changed box shadow of light theme variant to `--neeto-ui-shadow-s`
+
+#### Sidebar
+
+- Increased width from `64px` to `72px`
+- Changed background color from `neeto-ui-gray-200` to `neeto-ui-white`
+- Added border on the right side
+- Updated `padding-top` and `padding-bottom` to `24px`
+
+### Functionality changes 🛠️
+
+#### Input
+
+- Changed: `maxlength` prop logic to allow typing characters beyond the specified maxlength. The character count will be shown only when the input length reaches 90% of maxlength and changes the state to error when input exceeds the maxlength
+
+#### TextArea
+
+- Changed: `maxlength` prop logic to allow typing characters beyond the specified maxlength. Character count will be shown only when the input length reaches 90% of maxlength and changes the state to error when input exceeds the maxlength
+
+#### Dropdown
+
+- Changed: **BREAKING** Renamed `ulProps` prop to `dropdownProps`
+- Added: `buttonSize` prop
+
+#### ActionDropdown
+
+- Changed: **BREAKING** Renamed `size` prop to `buttonSize`
+- Changed: **BREAKING** Renamed `style` prop to `buttonStyle`
+
+#### Tag
+
+- Changed: **BREAKING** Renamed `style` prop to `type`
+- Removed: **BREAKING** Renamed `color` and `indicatorColor` props
+- Added: **BREAKING** `style` and `indicatorStyle` props with options `"success" | "warning" | "danger" | "primary" | "inactive"`
+
+#### ColorPicker
+
+- Added: `Size` prop
+
+#### Typography
+
+- Added: new variant **nano**
+
+#### Modal
+
+- Added: `description` prop in header
+- Added: `initialFocusRef` and `finalFocusRef` to programmatically add focus to custom components.
+- Added: `blockScrollOnMount` prop to enable/disable body scrolling when the modal opens.
+- Added: focus trapping to focusable elements in Modal.
+
+#### Sidebar
+
+- Removed: **BREAKING** `footerLinks` props
+- Removed: **BREAKING** `isCollapsed` prop and **expanded state** of sidebar
+
+## 3.5.17 - 2022-08-25
+
+- Fixed: false positive type errors for tooltip
+
+## 3.5.16 - 2022-08-17
+
+- Changed: avoided showing duplicate toastr when called multiple times with the same arguments.
+
+## 3.5.15 - 2022-08-05
+
+- Fixed: Fixed false positive ts errors which were thrown since some of the fields were not marked optional.
+
+## 3.5.14 - 2022-08-01
+
+- Added: neetoTestify and neetoSite to AppSwitcher
+
+## 3.5.13 - 2022-07-28
+
+- Added: type support for all exported components. IDE will now auto-predict the component props.
+- Changed: Deprecated babel-eslint was replaced with @babel/eslint-parser
+
+## 3.5.12 - 2022-07-25
+
+- Security: Bump moment from 2.29.3 to 2.29.4
 
 ## 3.5.11 - 2022-07-06
 
-- Added: a *Button* component in neetoui/formik that automatically disables itself if the form is not in a submittable state. Example: the form contains any invalid data, the form content has not been changed, or the form is already being submitted. To make this work, you need to import *Button* from "neetoui/formik" as your submit button.
-- Changed: *ActionBlock* will now use the above-mentioned logic internally. So its submit/cancel buttons will also be automatically enabled or disabled.
+- Added: a _Button_ component in neetoui/formik that automatically disables itself if the form is not in a submittable state. Example: the form contains any invalid data, the form content has not been changed, or the form is already being submitted. To make this work, you need to import _Button_ from "neetoui/formik" as your submit button.
+- Changed: _ActionBlock_ will now use the above-mentioned logic internally. So its submit/cancel buttons will also be automatically enabled or disabled.
 
 ## 3.5.10 - 2022-07-05
 
@@ -34,7 +287,7 @@ Prefix the change with one of these keywords:
 
 ## 3.5.9 - 2022-07-05
 
-- Fixed: Checkbox in *Table* component cut off in lower screen resolutions.
+- Fixed: Checkbox in _Table_ component cut off in lower screen resolutions.
 
 ## 3.5.8 - 2022-07-01
 
@@ -42,7 +295,7 @@ Prefix the change with one of these keywords:
 
 ## 3.5.7 - 2022-06-24
 
-- Added: `startsFrom` to `counter` prop of *EmailInput* component.
+- Added: `startsFrom` to `counter` prop of _EmailInput_ component.
 
 ## 3.5.6 - 2022-06-13
 
@@ -50,19 +303,19 @@ Prefix the change with one of these keywords:
 
 ## 3.5.5 - 2022-06-09
 
-- Fixed: issue with `onClose` function reference when closing the *Modal* using `Esc`.
+- Fixed: issue with `onClose` function reference when closing the _Modal_ using `Esc`.
 
 ## 3.5.4 - 2022-06-08
 
-Fixed: `TypeError` issue in *Toastr* component.
+Fixed: `TypeError` issue in _Toastr_ component.
 
 ## 3.5.3 - 2022-06-07
 
-- Fixed: issue with `closeOnEsc` prop when the *Dropdown* is controlled.
+- Fixed: issue with `closeOnEsc` prop when the _Dropdown_ is controlled.
 
 ## 3.5.2 - 2022-06-07
 
-- Fixed : placeholder content extending into multiple lines in *Select* component.
+- Fixed : placeholder content extending into multiple lines in _Select_ component.
 
 ## 3.5.1 - 2022-06-07
 
@@ -82,22 +335,22 @@ Fixed: `TypeError` issue in *Toastr* component.
 
 ## 3.4.3
 
-- Added: `prefix` and `suffix` to *EmailInput*.
+- Added: `prefix` and `suffix` to _EmailInput_.
 
 ## 3.4.2
 
-- Fixed: issue with search not working with `isCreatable` *Select*.
+- Fixed: issue with search not working with `isCreatable` _Select_.
 
 ## 3.4.1
 
-- Fixed: issue with `autoFocus` not working on *Input* when inside *Dropdown*.
+- Fixed: issue with `autoFocus` not working on _Input_ when inside _Dropdown_.
 
 ## 3.4.0
 
 - Removed: all instances of TailwindCSS.
-- Added: `label` prop in *Tags* molecule.
-- Changed: Added `neetoCal` into *AppSwitcher* app list .
-- Removed: `count` limiting (to 99) logic from *MenuBar.Block*.
+- Added: `label` prop in _Tags_ molecule.
+- Changed: Added `neetoCal` into _AppSwitcher_ app list .
+- Removed: `count` limiting (to 99) logic from _MenuBar.Block_.
 
 ## 3.3.13
 
@@ -105,20 +358,20 @@ Fixed: `TypeError` issue in *Toastr* component.
 
 ## 3.3.12
 
-- Fixed: loading state in *ActionBlock* component.
+- Fixed: loading state in _ActionBlock_ component.
 
 ## 3.3.11
 
-- Added: New input format for the *EmailInput* component.
+- Added: New input format for the _EmailInput_ component.
 
 ## 3.3.10
 
-- Fixed: Removed unnecessary scrollbar in *Table* component.
-- Added: `maxHeight` prop to the *EmailInput* component.
+- Fixed: Removed unnecessary scrollbar in _Table_ component.
+- Added: `maxHeight` prop to the _EmailInput_ component.
 
 ## 3.3.9
 
-- Fixed: *ActionDropdown* issues with common props for button and dropdown
+- Fixed: _ActionDropdown_ issues with common props for button and dropdown
 
 ## 3.3.7
 
@@ -126,44 +379,44 @@ Fixed: `TypeError` issue in *Toastr* component.
 
 ## 3.3.6
 
-- Fixed: Reset Formik data on continue action in *BlockNavigation* component.
+- Fixed: Reset Formik data on continue action in _BlockNavigation_ component.
 
 ## 3.3.5
 
-- Added: active state to `NavLink` in *Sidebar* component.
+- Added: active state to `NavLink` in _Sidebar_ component.
 
 ## 3.3.4
 
-- Added: `hideOnTargetExit` prop to *Tooltip* component
+- Added: `hideOnTargetExit` prop to _Tooltip_ component
 
 ## 3.3.3
 
-- Added: data-cy for in *Alert* component elements
+- Added: data-cy for in _Alert_ component elements
 
 ## 3.3.2
 
-- Fixed: Added override for `onClick` prop in *Dropdown* component
+- Fixed: Added override for `onClick` prop in _Dropdown_ component
 
 ## 3.3.1
 
-- Fixed: Typography of Header in *Alert* component.
-- Fixed: Max width issue in *Dropdown* component.
+- Fixed: Typography of Header in _Alert_ component.
+- Fixed: Max width issue in _Dropdown_ component.
 
 ## 3.3.0
 
-- Changed: **BREAKING** `isLoading` prop of *Table* to `loading`.
-- Changed: Implemented *Dropdown* component with Tippy.js and removed `react-popper`
-- Deprecated: **BREAKING** `loading` prop of *Pane*, *Modal* and *Alert* components.
-- Removed: **BREAKING** `placement` prop from *Tooltip* (Use position instead).
+- Changed: **BREAKING** `isLoading` prop of _Table_ to `loading`.
+- Changed: Implemented _Dropdown_ component with Tippy.js and removed `react-popper`
+- Deprecated: **BREAKING** `loading` prop of _Pane_, _Modal_ and _Alert_ components.
+- Removed: **BREAKING** `placement` prop from _Tooltip_ (Use position instead).
 
 #### UI
 
-- Changed: colors of `$neeto-ui-warning` and `$neeto-ui-error` in *Color Palette*
-- Changed: the text color in *Table* to `$neeto-ui-black`
-- Changed: UI of *Tag* of component
-- Changed: look and feel of *Danger Button*
-- Changed: Contrast of *Avatar*, *Accordian*, *Toastr* and *Callout*
-- Changed: Made *Modal* Header text and Close icon aligned in a line
-- Added: new variant for *Danger Button* -`danger-text`
+- Changed: colors of `$neeto-ui-warning` and `$neeto-ui-error` in _Color Palette_
+- Changed: the text color in _Table_ to `$neeto-ui-black`
+- Changed: UI of _Tag_ of component
+- Changed: look and feel of _Danger Button_
+- Changed: Contrast of _Avatar_, _Accordian_, _Toastr_ and _Callout_
+- Changed: Made _Modal_ Header text and Close icon aligned in a line
+- Added: new variant for _Danger Button_ -`danger-text`
 - Added: new accent colors
 - ![accent-colors](https://user-images.githubusercontent.com/48869249/160755429-d2830f42-3086-4cbe-b9f5-4f0bca4f1a32.png)

package/README.md

@@ -69,4 +69,4 @@ https://neetoui.onrender.com
 ## Other Libraries
 
 - [neetoIcons](https://github.com/bigbinary/neeto-icons): **NeetoIcons** is the official icons library from BigBinary.
-- [neetoUtils](https://github.com/bigbinary/neeto-utils): **NeetoUtils** is a collection of react hooks and utility functions used at BigBinary.
+- [neetoEditor](https://github.com/bigbinary/neeto-editor-tiptap): **NeetoEditor** is a prose-mirror based rich-text editor used at BigBinary.

package/formik.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import {
+  Input as PlainInput,
+  Radio as PlainRadio,
+  Switch as PlainSwitch,
+  Textarea as PlainTextarea,
+  Checkbox as PlainCheckbox,
+  Select as PlainSelect,
+  EmailInput as PlainEmailInput,
+  Button as PlainButton,
+  ButtonProps,
+} from "./index";
+
+export interface ActionBlockProps {
+  className?: string;
+  submitButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+}
+export interface BlockNavigationProps {
+  isDirty?: boolean;
+}
+
+export const ActionBlock: React.FC<ActionBlockProps>;
+export const BlockNavigation: React.FC<BlockNavigationProps>;
+
+export const Input: typeof PlainInput;
+export const Radio: typeof PlainRadio;
+export const Switch: typeof PlainSwitch;
+export const Textarea: typeof PlainTextarea;
+export const Checkbox: typeof PlainCheckbox;
+export const Select: typeof PlainSelect;
+export const EmailInput: typeof PlainEmailInput;
+export const Button: typeof PlainButton;