@kwantis-id3/frontend-library 0.9.1 → 0.10.1

package/README.md

@@ -23,3 +23,97 @@ With pnpm
 ```bash
 pnpm add @kwantis-id3/frontend-library
 ```
+
+Note that the library uses @emotion/styled and @emotion/react as peer dependencies. Depending on your package manager, you may need to install them manually.
+
+## Usage
+The library has various components, each one with its own documentation. Please refer to the storybook documentation for more information.
+
+### Components List
+At the moment, the library contains the following components:
+- Accordion
+- Button
+- Select (both single and multi)
+- Slider
+
+The following are under development or on our roadmap:
+- Label
+- Checkbox
+- Radio
+- Textfield
+- Datepicker
+- Timepicker
+- Datetimepicker
+- Table
+- Modal
+- Tabs
+
+
+You can find various examples of usage in the projects stories.
+
+### Theming
+The library internally uses the [emotion](https://emotion.sh/docs/introduction) library for styling. By default, the library uses a default theme, that looks like this:
+
+```js
+export const defaultThemeColors = {
+  primary: { main: "#1d4e89", contrastText: "#ffffff" },
+  secondary: { main: "#00b2ca", contrastText: "#ffffff" },
+  tertiary: { main: "#7dcfb6", contrastText: "#ffffff" },
+  statusOk: { main: "#00e200", contrastText: "#ffffff" },
+  statusWarning: { main: "#efff00", contrastText: "#ffffff" },
+  statusCritical: { main: "#ff3838", contrastText: "#ffffff" },
+  statusNeutral: { main: "#7b8089", contrastText: "#ffffff" },
+};
+```
+
+You can override the default theme by passing a custom theme to the `ThemeContextProvider` component, like this:
+```js
+import { ThemeContextProvider } from "@kwantis-id3/frontend-library";
+
+const customTheme = {
+  primary: { main: "#1d4e89", contrastText: "#ffffff" },
+  secondary: { main: "#00b2ca", contrastText: "#ffffff" },
+  tertiary: { main: "#7dcfb6", contrastText: "#ffffff" },
+  statusOk: { main: "#00e200", contrastText: "#ffffff" },
+  statusWarning: { main: "#efff00", contrastText: "#ffffff" },
+  statusCritical: { main: "#ff3838", contrastText: "#ffffff" },
+  statusNeutral: { main: "#7b8089", contrastText: "#ffffff" },
+};
+
+const App = () => {
+  return (
+    <ThemeContextProvider theme={customTheme}>
+      <YourApp />
+    </ThemeContextProvider>
+  );
+};
+```
+
+To add custom properties to the theme, you can extend the `ThemeColorsObject` interface in a **.d.ts** file, like this:
+
+```js
+import "@kwantis-id3/frontend-library";
+
+declare module "@kwantis-id3/frontend-library" {
+  interface ThemeColorsObject {
+    newColor: Color;
+    newColor2: Color;
+  }
+}
+```
+
+### The Color prop
+Each component that has a **color** prop, accepts a string.
+The string can be a color name, a hex code, or a css color function.
+
+```js
+// Color name
+<Button color="primary" />
+
+// Hex code
+<Button color="#1d4e89" />
+
+// Css color function
+<Button color="rgb(29, 78, 137)" />
+```
+