+ );
+ },
+ ],
+ args: {
+ themeUI: "light",
+ backgroundUI: "white",
+ },
+ argTypes: {
+ themeUI: {
+ options: ["light", "dark"],
+ control: { type: "radio" },
+ },
+ backgroundUI: {
+ options: ["white", "light"],
+ control: { type: "radio" },
+ },
+ },
+ parameters: {
+ layout: "centered",
+ },
+};
+
+export default preview;
diff --git a/README.md b/README.md
index fe5559f..c812645 100644
--- a/README.md
+++ b/README.md
@@ -14,39 +14,182 @@
## Introduction
-**[📖 Storybook](https://www.figma.com/file/b7DEUKDeHlOl4ocDTMv7UIhZ/Kleros?node-id=7515%3A9807)**
+The Kleros UI Components Library is a comprehensive collection of React components that implement the Kleros design system. This library provides a consistent and accessible user interface for Kleros applications, making it easier to build cohesive user experiences across the Kleros ecosystem.
-**[👨🎨 Figma](https://www.figma.com/file/b7DEUKDeHlOl4ocDTMv7UIhZ/Kleros?node-id=7515%3A9807)**
+Built with React, TypeScript, and Tailwind CSS, this library offers a wide range of components from basic UI elements to complex interactive widgets. Each component is designed with accessibility, customization, and ease of use in mind.
+
+## Features
+
+- **React-based components**: Built with React 18 and TypeScript for type safety
+- **Tailwind CSS integration**: Leverages Tailwind for styling with consistent design tokens
+- **Accessibility**: Components follow WAI-ARIA guidelines for maximum accessibility
+- **Responsive design**: Components adapt to different screen sizes
+- **Customizable**: Easily theme and extend components to match your application's design
+- **Storybook documentation**: Interactive documentation with usage examples
+
+## Components
+
+The library includes a wide variety of components, including but not limited to:
+
+- **Layout**: Box, Card, Modal
+- **Navigation**: Breadcrumb, Pagination, Tabs
+- **Form Elements**: TextField, TextArea, NumberField, Checkbox, RadioGroup, Switch, DatePicker, FileUploader
+- **Data Display**: DisplaySmall, DisplayLarge, DisplayIcon, Tag, Tooltip
+- **Feedback**: Alert, Push Notifications
+- **Progress**: LinearProgress, CircularProgress, Steps, Timeline
+- **Interactive Elements**: Button, Accordion, Dropdown, Cascader
## Usage
-#### Install the package
-With `yarn add @kleros/ui-components-library` or `npm install @kleros/ui-components-library`
+### Installation
+
+Install the package using your preferred package manager:
+
+```bash
+# Using yarn
+yarn add @kleros/ui-components-library
-#### Create a theme file
-Wwhere you destructure `lightTheme` or `darkTheme` (or both) in your theme object to provide the correct colors to the components. ([example](https://github.com/kleros/kleros-v2/blob/dev/web/src/styles/themes.ts)).
+# Using npm
+npm install @kleros/ui-components-library
+```
-#### Provide the theme
-With styled-components `ThemeProvider` ([example](https://github.com/kleros/kleros-v2/blob/dev/web/src/context/StyledComponentsProvider.tsx)).
+### Setup
-## Package Publication
+1. Import the CSS at the top level of your application:
-#### Tagging
-1. Bump the version in `package.json`
-1. Run a clean build: `yarn clean && yarn build`
-1. Commit the change to git: `git add -u ; git commit -m "chore: release"`
-1. Tag this version: `version=v$(cat package.json | jq -r .version) && git tag -m $version $version`
-1. Push both commit and tag: `git push && git push --tags`
+```javascript
+import "@kleros/ui-components-library/style.css";
+```
+
+2. Import and use components in your application:
+
+```jsx
+import { Button, TextField, Alert } from "@kleros/ui-components-library";
+
+function MyComponent() {
+ return (
+
+
+
+ Operation completed successfully!
+
+ );
+}
+```
+
+### Theme usage
+
+If you wish the use the library's tailwind theme variables in your tailwind app. You can utilize it by importing the theme file in your `global.css` file.
+
+```css
+@import tailwindcss @import
+ "../../../node_modules/@kleros/ui-components-library/dist/theme/theme.css";
+```
+
+You can find the available theme variables [here](src/styles/theme.css).
+If want to override or edit the defined theme variables, you can do so like this:
+
+```css
+:root {
+ --klerosUIComponentsWhiteBackground: #832323;
+}
+:root[class="dark"] {
+ --klerosUIComponentsWhiteBackground: #832323;
+}
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- React 18+
+- React DOM 18+
+- Tailwind CSS 4+
+
+Make sure these are installed in your project.
+
+## Development
-#### Publish to NPM
-1. Export your NPM token: ` export YARN_NPM_AUTH_TOKEN=`
-1. Publish: `yarn publish`
+### Local Setup
+
+1. Clone the repository:
+
+ ```bash
+ git clone https://github.com/kleros/ui-components-library.git
+ cd ui-components-library
+ ```
+
+2. Install dependencies:
+
+ ```bash
+ yarn install
+ ```
+
+3. Start the Storybook development server:
+
+ ```bash
+ yarn start
+ ```
+
+4. Build the library:
+ ```bash
+ yarn build
+ ```
+
+### Code Quality
+
+This project uses:
+
+- TypeScript for type checking
+- ESLint for code linting
+- Prettier for code formatting
+- Husky for Git hooks
+- Conventional Commits for commit messages
+
+Run checks with:
-#### Publish to Github
-1. Login
```bash
-npm login --registry https://npm.pkg.github.com --auth-type legacy
-> Username: YOUR_GITHUB_USERNAME
-> Password: YOUR_GITHUB_PERSONAL_ACCESS_TOKEN`
+yarn check-types # Type checking
+yarn check-style # Linting
```
+
+## Package Publication
+
+### Tagging
+
+1. Bump the version in `package.json`
+2. Run a clean build: `yarn clean && yarn build`
+3. Commit the change to git: `git add -u ; git commit -m "chore: release"`
+4. Tag this version: `version=v$(cat package.json | jq -r .version) && git tag -m $version $version`
+5. Push both commit and tag: `git push && git push --tags`
+
+### Publish to NPM
+
+1. Export your NPM token: `export YARN_NPM_AUTH_TOKEN=`
+2. Publish: `yarn publish`
+
+### Publish to GitHub
+
+1. Login:
+
+ ```bash
+ npm login --registry https://npm.pkg.github.com --auth-type legacy
+ > Username: YOUR_GITHUB_USERNAME
+ > Password: YOUR_GITHUB_PERSONAL_ACCESS_TOKEN
+ ```
+
2. Publish: `npm publish --registry https://npm.pkg.github.com`
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes using conventional commits (`git commit -m 'feat: add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
diff --git a/commitlint.config.js b/commitlint.config.cjs
similarity index 100%
rename from commitlint.config.js
rename to commitlint.config.cjs
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..5a3d118
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,119 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import security from "eslint-plugin-security";
+import _import from "eslint-plugin-import";
+import globals from "globals";
+// eslint-disable-next-line import/no-unresolved
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+ recommendedConfig: js.configs.recommended,
+ allConfig: js.configs.all,
+});
+
+export default [
+ {
+ ignores: ["src/assets"],
+ },
+ ...fixupConfigRules(
+ compat.extends(
+ "eslint:recommended",
+ "plugin:react/recommended",
+ "plugin:react-hooks/recommended",
+ "plugin:import/recommended",
+ "plugin:import/react",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:prettier/recommended",
+ "prettier",
+ "plugin:security/recommended-legacy",
+ ),
+ ),
+ {
+ plugins: {
+ react: fixupPluginRules(react),
+ "react-hooks": fixupPluginRules(reactHooks),
+ security: fixupPluginRules(security),
+ import: fixupPluginRules(_import),
+ },
+
+ languageOptions: {
+ globals: {
+ ...globals.browser,
+ ...globals.node,
+ Atomics: "readonly",
+ SharedArrayBuffer: "readonly",
+ },
+
+ parser: tsParser,
+ ecmaVersion: 2020,
+ sourceType: "module",
+
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ },
+
+ settings: {
+ react: {
+ version: "^18.2.0",
+ },
+ "import/resolver": {
+ node: {
+ extensions: [".js", ".jsx", ".ts", ".tsx"],
+ },
+ },
+ },
+
+ rules: {
+ "max-len": [
+ "warn",
+ {
+ code: 120,
+ },
+ ],
+
+ "react/prop-types": 0,
+ "no-unused-vars": "off",
+
+ "@typescript-eslint/no-unused-vars": [
+ "error",
+ {
+ varsIgnorePattern: "(^_+[0-9]*$)|([iI]gnored$)|(^ignored)",
+ argsIgnorePattern: "(^_+[0-9]*$)|([iI]gnored$)|(^ignored)",
+ },
+ ],
+
+ "no-console": [
+ "error",
+ {
+ allow: ["warn", "error", "info", "debug"],
+ },
+ ],
+
+ "@typescript-eslint/no-explicit-any": ["off"],
+ "security/detect-object-injection": "off",
+ "security/detect-non-literal-fs-filename": "off",
+
+ "import/extensions": [
+ "error",
+ "ignorePackages",
+ {
+ js: "never",
+ jsx: "never",
+ ts: "never",
+ tsx: "never",
+ },
+ ],
+ },
+ },
+];
diff --git a/global.d.ts b/global.d.ts
deleted file mode 100644
index 1debe4a..0000000
--- a/global.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {} from "styled-components";
-import { lightTheme } from "./src/styles/themes";
-
-declare global {
- module "*.svg" {
- const content: React.FunctionComponent>;
- export default content;
- }
-}
-
-declare module "styled-components" {
- type Theme = typeof lightTheme;
- //eslint-disable-next-line @typescript-eslint/no-empty-interface
- export interface DefaultTheme extends Theme {}
-}
diff --git a/src/index.html b/index.html
similarity index 65%
rename from src/index.html
rename to index.html
index 5472d89..0f263c8 100644
--- a/src/index.html
+++ b/index.html
@@ -3,10 +3,11 @@
+
UI Components Library
-
+