@kwantis-id3/frontend-library 1.0.0-rc.6 → 1.0.0-rc.8

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default, { PropsWithChildren, FC } from 'react';
-import { Interpolation, CreateStyled } from '@emotion/styled';
-import { Theme, Interpolation as Interpolation$1 } from '@emotion/react';
+import { Interpolation, Theme as Theme$1 } from '@emotion/react';
+import { Theme } from '@emotion/react/dist/declarations/src';
+import * as react from 'react';
+import { PropsWithChildren, ReactNode, FC } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
+import { CreateStyled } from '@emotion/styled';
 
-type ButtonVariants = "contained" | "outlined" | "text";
-type ButtonProps = {
+type TButtonVariants = "contained" | "outlined" | "text";
+type TButtonProps = {
     /** Color of the button */
     color?: string;
     /** Type of the button */
@@ -14,7 +15,7 @@ type ButtonProps = {
     /** Custom styles */
     sx?: Interpolation<Theme>;
     /** Variant of the button, either `contained`, `outlined` or `text` */
-    variant?: ButtonVariants;
+    variant?: TButtonVariants;
     /** The button size; either "large" or "small" */
     size?: "small" | "large";
     /** onClick handler */
@@ -25,9 +26,10 @@ type ButtonProps = {
     /** Disabled state */
     disabled?: boolean;
     /** Elements to render as children */
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 };
-declare const Button: (props: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const Button: (props: TButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TColorScale = {
     50: string;
@@ -140,7 +142,7 @@ interface IThemeContextValue {
 
 declare const defaultLightPalette: IPalette;
 declare const defaultDarkPalette: IPalette;
-declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: React__default.PropsWithChildren<IThemeContextProps>) => JSX.Element;
+declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactNode;
 declare const useThemeContext: () => IThemeContextValue;
 
 type TAccordionProps = PropsWithChildren & {
@@ -157,24 +159,29 @@ type TAccordionProps = PropsWithChildren & {
     /** Callback function to be called when the Accordion closes */
     onClose?: () => void;
     /** Custom trigger element */
-    trigger?: (isOpen: boolean) => React__default.ReactNode;
+    trigger?: (isOpen: boolean) => React.ReactNode;
     /** Variant of the Accordion. Default has everything wrapped in borders, while light just renders the content and the title without setting colors
      * @default "default"
      */
     variant?: "default" | "light";
 };
 
-declare const Accordion: React__default.FC<TAccordionProps>;
+declare const Accordion: FC<TAccordionProps>;
 
-interface TextFieldProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+declare const InputField: react.ForwardRefExoticComponent<react.InputHTMLAttributes<HTMLInputElement> & {
+    containerClassName?: string;
+    color?: string;
+    sx?: React.CSSProperties;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     /** Classname given to the container div */
     containerClassName?: string;
     /** The color of the input */
     color?: string;
     /** Change the styles of the input field */
-    sx?: React__default.CSSProperties;
-}
-declare const InputField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
+    sx?: React.CSSProperties;
+};
 
 interface SingleSelectProps<Option = {
     label: string;
@@ -264,7 +271,7 @@ interface MultiSelectProps<Option = {
 }
 declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type SliderProps = {
+type TSliderProps = {
     /** The values of the slider. */
     values: number[];
     /** The minimum value of the slider. */
@@ -296,7 +303,7 @@ type SliderProps = {
     /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
-declare const Slider: (props: SliderProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Slider: (props: TSliderProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * @property {string} value - The value displayed in the dropdown item
@@ -305,7 +312,7 @@ declare const Slider: (props: SliderProps) => _emotion_react_jsx_runtime.JSX.Ele
  * @property {DropdownItem[]} children - The children of the dropdown item
  * @property {() => void} onClick - The onClick handler of the dropdown item
  */
-type DropdownItem = {
+type TDropdownItem = {
     /** The value displayed in the item */
     value: string;
     /** The color of the item */
@@ -315,7 +322,7 @@ type DropdownItem = {
     /** The hover color of the item */
     hoverColor?: string;
     /** The children of the item */
-    children?: DropdownItem[];
+    children?: TDropdownItem[];
     /** Wether the item is hidden or not */
     isHidden?: boolean;
     /** Wether the dropdown should close when the item is clicked */
@@ -323,11 +330,11 @@ type DropdownItem = {
     /** The onClick handler of the item */
     onClick?: () => void;
 };
-type DropdownProps = {
+type TDropdownProps = {
     /** The content of the dropdown */
-    content: DropdownItem[];
+    content: TDropdownItem[];
     /** The trigger element of the dropdown. Clicking on this item will open the dropdown */
-    trigger: React__default.ReactNode;
+    trigger: React.ReactNode;
     /** The color of the dropdown */
     bgColor?: string;
     /** The hover color of the dropdown */
@@ -337,11 +344,16 @@ type DropdownProps = {
     /** The mobile breakpoint, by default it's 768px */
     mobileBreakpoint?: number;
 };
-declare const Dropdown: (props: DropdownProps) => _emotion_react_jsx_runtime.JSX.Element;
+type TDropdownItemProps = TDropdownItem & {
+    direction?: string;
+    closeBody: () => void;
+};
 
-interface ModalProps {
+declare const Dropdown: (props: TDropdownProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type TModalProps = {
     /** The content of the modal */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     /** Cointrols whether the modal should be open or not. */
     isOpen: boolean;
     /** The handler to be called when the modal is closed */
@@ -353,9 +365,10 @@ interface ModalProps {
     /** custom height */
     height?: string;
     /** custom css */
-    sx?: React__default.CSSProperties;
-}
-declare const Modal: React__default.FC<ModalProps>;
+    sx?: React.CSSProperties;
+};
+
+declare const Modal: FC<TModalProps>;
 
 type TIndicatorInstanceProps = {
     outerColor?: string;
@@ -393,11 +406,14 @@ type TTagProps = {
     textColor?: string;
     sx?: Interpolation<Theme>;
 };
+
+/** @jsxImportSource @emotion/react */
+
 declare const Tag: FC<TTagProps>;
 
 type TCardSectionProps = PropsWithChildren & {
-    sx?: Interpolation$1<Theme>;
-    onClick?: (e: React__default.MouseEvent<HTMLElement>) => void;
+    sx?: Interpolation<Theme$1>;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 
 /** @jsxImportSource @emotion/react */
@@ -440,7 +456,7 @@ declare const renderCell: (value: string | number | boolean | null) => _emotion_
 
 type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
     mode: "table" | "cards";
-    cardComponent: (item: Row) => React__default.ReactNode;
+    cardComponent: (item: Row) => React.ReactNode;
 };
 
 declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
@@ -462,16 +478,16 @@ type TCustomRenderProps = {
  * @property title: The title of the item. If the renderTitle callback is provided, this will be the result of that callback
  */
 type TRenderTriggerProps = TCustomRenderProps & {
-    icon: React__default.ReactNode;
-    title: React__default.ReactNode;
+    icon: React.ReactNode;
+    title: React.ReactNode;
 };
 type TTreeItemFunctions = {
     /** A callback to customize how the titles are rendered */
-    renderTitle?: (props: TCustomRenderProps) => React__default.ReactNode;
+    renderTitle?: (props: TCustomRenderProps) => React.ReactNode;
     /** A callback to customize how the icons are rendered */
-    renderIcon?: (props: TCustomRenderProps) => React__default.ReactNode;
+    renderIcon?: (props: TCustomRenderProps) => React.ReactNode;
     /** A callback to customize how the content of the items is rendered */
-    renderTrigger?: (props: TRenderTriggerProps) => React__default.ReactNode;
+    renderTrigger?: (props: TRenderTriggerProps) => React.ReactNode;
     /** A callback executed when an item is focused. An item gets focused when you click on it. Focusing and item will also select it. */
     onFocusItem?: (item: TTreeViewItem) => void;
     /** A callback executed when an item is selected. To select an item, ctrl+click on it. */
@@ -489,7 +505,7 @@ type TTreeViewProps = TTreeItemFunctions & {
     /** Disable multi-selection possibility */
     isMultiSelectionDisabled?: boolean;
     /** Custom styles */
-    sx?: Interpolation$1<Theme>;
+    sx?: Interpolation<Theme$1>;
 };
 type TUncontrolledTreeViewProps = TTreeViewProps & {
     items: TTreeViewItem[];
@@ -518,7 +534,7 @@ type TTreeViewItem = TTreeItemFunctions & {
     /** A callback to fetch children asynchronously */
     childrenAsync?: () => Promise<TTreeViewItem[]>;
     /** Custom styles */
-    sx?: Interpolation$1<Theme>;
+    sx?: Interpolation<Theme$1>;
 };
 
 /** @jsxImportSource @emotion/react */
@@ -527,6 +543,29 @@ declare const ControlledTreeView: FC<TControlledTreeViewProps>;
 
 declare const UncontrolledTreeView: FC<TUncontrolledTreeViewProps>;
 
+type TDrawerProps = {
+    /** Position of the drawer */
+    anchor: "top" | "right" | "bottom" | "left";
+    /** Trigger showed when drawer is closed */
+    closedTrigger?: ReactNode;
+    /** Trigger showed when drawer is open */
+    openTrigger?: ReactNode;
+    /** Component to be rendered when Drawer is open */
+    openContent?: ReactNode;
+    /** Component to be rendered when Drawer is closed */
+    closedContent?: ReactNode;
+    /** Min open of the drawer as number of pixels. If not defined the minOpen will be the height of closedContent if present, otherwise 0px */
+    minOpen?: number;
+    /** Max open of the drawer as number of pixels. If not defined the maxOpen will be the height of openContent with limit at 90vh/vw */
+    maxOpen?: number;
+    /** Background color */
+    bgColor?: string;
+    /** Trigger hover color */
+    triggerHoverColor?: string;
+};
+
+declare const Drawer: ({ anchor, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerHoverColor, }: TDrawerProps) => _emotion_react_jsx_runtime.JSX.Element;
+
 /**
  * Hook to check if the screen is mobile. The default breakpoint is 768px.
  * @param {number=} mobileBreakpoint breakpoint width to check against
@@ -576,4 +615,4 @@ declare const getHoverColor: (color: string) => string;
  */
 declare const getActiveColor: (color: string) => string;
 
-export { Accordion, Button, ButtonProps, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, ControlledTreeView, Dropdown, DropdownItem, DropdownProps, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewList, SingleSelect, SingleSelectProps, Slider, SliderProps, TAccordionProps, TCardSectionProps, TCellValues, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TIndicatorProps, TIndicatorVariants, TMultiViewListProps, TTableCell, TTableProps, TTableRow, TTagProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, styled, transientOptions, useIsMobile, useThemeContext };
+export { Accordion, Button, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, ControlledTreeView, Drawer, Dropdown, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewList, SingleSelect, SingleSelectProps, Slider, TAccordionProps, TButtonProps, TButtonVariants, TCardSectionProps, TCellValues, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TDrawerProps, TDropdownItem, TDropdownItemProps, TDropdownProps, TIndicatorInstanceProps, TIndicatorProps, TIndicatorVariants, TModalProps, TMultiViewListProps, TRenderTriggerProps, TSliderProps, TTableCell, TTableProps, TTableRow, TTagProps, TTextFieldProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, styled, transientOptions, useIsMobile, useThemeContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.8",
   "description": "Kwantis frontend components collection",
   "scriptsComments": {
     "storybook": "Starts storybook in development mode",
@@ -42,21 +42,25 @@
   },
   "license": "apache-2.0",
   "devDependencies": {
+    "@iconify/react": "^5.2.0",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-interactions": "7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/blocks": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-webpack5": "7.4.6",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-webpack5": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/types": "^8.6.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.0.33",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
@@ -67,23 +71,22 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.11.4",
     "jsdom": "^23.0.1",
     "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "rollup": "^3.20.2",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "7.4.6",
+    "storybook": "^8.6.4",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.0",
-    "typescript": "^5.0.3",
+    "typescript": "^5.7.3",
     "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.0.0",
-    "react": ">= 17.0.2"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -96,8 +99,6 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "react-collapsible": "^2.10.0",
-    "react-icons-kit": "^2.0.0",
     "react-range": "^1.8.14",
     "react-select": "^5.7.3",
     "tinycolor2": "^1.6.0"
@@ -114,5 +115,6 @@
       "word-wrap@<1.2.4": ">=1.2.4",
       "@babel/traverse@<7.23.2": ">=7.23.2"
     }
-  }
+  },
+  "packageManager": "pnpm@8.15.9+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81"
 }

package/changelog.md

@@ -1,229 +0,0 @@
-# v1.0.0-rc.6
-## Minor Changes
-- New TreeView Component
-
-## Patch CHanges
-- Buttons hover and active color now use specific utilities.
-- Selects and InputFields disabled prop now changes the appearance of the component slightly.
-
-# v1.0.0-rc.5
-## Minor Changes
-- New Accordion Component, more in line with the new UI choices.
-- Dropdown mobile now uses new accordion
-- Buttons now have a size prop
-
-
-# v1.0.0-rc.4
-## Minor Changes
-- New Table Component (uses tanstack's `react-table`)
-- New MultiViewList Component (switches between Table view and Cards view)
-
-# v1.0.0-rc.3
-## Minor Changes
-- New Card Component
-
-# v1.0.0-rc.0
-## Major Changes
-- New Theme Management
-- Theme Switcher in stories
-- New Indicator Component
-- New Tag Component
-- Adapted old components to new theme management
-
-# v0.27.2
-## Patch Changes
-- Updated @emotion/react from 11.10.6 to 11.14.0
-- Updated @emotion/styled from 11.10.6 to 11.14.0
-
-# v0.27.0
-## Minor Changes
-- The Modal component now doesn't use `setIsOpen` to close itself, but it now calls the `onClose` callback directly. This change was made to allow the user to pass a custom `onClose` callback that can be used to perform some actions before closing the modal.
-- The modal component now accepts 3 new props:
-  - `width`: a string that can be used to set the width of the modal. It can be a percentage or a fixed value.
-  - `height`: a string that can be used to set the height of the modal. It can be a percentage or a fixed value.
-  - `sx`: a prop to pass CSS properties to the dialog element.
-
-# v0.26.0
-## Minor Changes
-- The InputField component now accepts all input attributes as props (plus some custom ones)
-
-# v0.25.1
-## Patch Changes
-- Fixed InputField padding
-- added step prop to InputField
-
- 
-# v0.25.0
-## Minor Changes
-- InputField component now accepts a ref
-
- 
-# v0.24.0
-## Minor Changes
-- The onchange callback for InputField component will no longer have a string as a parameter, but an HTML onchange event.
-
- 
-# v0.23.0
-## Minor Changes
-- Added the `onOpen` callback to the `Modal` component.
-
- 
-# v0.22.2
-## Patch Changes
-- Modal `onClose` didn't work when closing the modal by updating the `isOpen` prop.
-
- 
-# v0.22.1
-## Patch Changes
-- InputField font size is now `inherit`
-
- 
-# v0.22.0
-## Minor Changes
-- Dropdown Items now accept a isHidden prop
-- Dropdown Items now accept a closeOnClick prop that can be used to close the dropdown when the item is clicked
-
-## Patch Changes
-- Fixed input field font family
-
- 
-# v0.21.0
-##  Minor Changes
-- Now the `ThemeContextProps` interface is exported, so that it can be used to type the `useTheme` hook return value.
-- Refactored the styling of the `Dropdown` component. It's cleaner and more readable now, both in mobile and desktop view.
-
- 
-# v0.20.3
-## Patch Changes
-- Fixed `isDefaultOpen` prop
-
- 
-# v0.20.2
-## Patch Changes
-- Added comments to each prop field in all components to better describe them
-- Added `isDefaultOpen` prop to Accordion component, usable when the component is uncontrolled
-
- 
-# v0.20.1
-## Patch Changes
-- Added labels to styled components to better identify them in the DOM
-
- 
-# v0.20.0
-## Minor Changes
-- Migrated from `jest` to `vitest` for testing
-
- 
-# v0.19.0
-## Minor Changes
-- TextField is now InputField
-  - It now accepts a `type` prop, that can be used to customize the input type (e.g. `text`, `password`, `email`, etc.)
-  - Not all the input types are supported. The supported ones are:
-    - `text`
-    - `password`
-    - `email`
-    - `number`
-    - `tel`
-    - `url`
-    - `search`
-    - `date`
-    - `time`
-    - `datetime-local`
-    - `month`
-    - `week`
-    - `color`
-
- 
-# v0.18.2
-## Patch changes
-- Modal now can be closed correctly with `ESC` key
-
- 
-# v0.18.1
-## Patch changes
--  Modal now has overflow shown
-
- 
-# v0.18.0
-## Minor changes
--  Created the `Modal` component
-
- 
-# v0.17.2
-## Patch changes
-- SingleSelect and MultiSelect component now accept a `menuPosition` prop, that can be used to customize the position of the menu (fixed or absolute).
-
- 
-# v0.17.1
-## Patch changes
-- Added `type` prop to Button component.
-
- 
-# v0.17.0
-## Minor Changes
-- For all input derived components, standard input attributes are now present in the props.
-  - For Select and MultiSelect were added:
-    - `name`
-    - `required`
-  - For TextField were added:
-    - `name`
-    - `required`
-    - `pattern`
-    - `readOnly`
-    - `autoFocus`
-    - `list`
-
- 
-# v0.16.3
-## Patch changes
-- Fixed the Dropdown component, items were not clicked when in mobile view
-- The html `id` in SingleSelect and MultiSelect components was forwarded to the wrong prop. Now it's forwarded to the `inputId` prop, as it should be.
-
- 
-# v0.16.2
-## Patch changes
-- Removed padding from Dropdown trigger
-
- 
-# v0.16.1
-## Patch changes
-- Exported DropdownItem type
-
- 
-# v0.16.0
-## Minor changes
-- Created the `Dropdown` component, that can be used to create multi-level dropdowns.
-- Created its related tests and stories.
-- `Accordion` component now accepts a `customTrigger` prop, that can be used to customize the trigger element.
-
- 
-# v0.15.0
-## Minor changes
-- updated the `getColor` function, so that it can now access the theme from a string path (e.g. `primary.contrastText`)
-
-Also improved code formatting.
-
- 
-# v0.14.2
-## Patch changes
-- Removed invalid not-null assertions in tests and stories
-- `css` prop is now allowed from eslint
-- Updated readme to describe how to avoid FOUC in case of fetching theme from an API
-
- 
-# v0.14.1
-## Patch changes
-- Updated storybook to v7.4.6
-- Updated readme
-- Renamed Button and Accordion folders (previously they weren't capitalized)
-
- 
-# v0.14.0
-## Minor changes
-- Created the `TextField` component, that can be used to create text inputs.
-- Created its related tests and stories.
-
-## Patch changes
-- changed some tests description
-- removed unused imports
-- updated readme to better describe the theming functionalities