@szum-tech/design-system 1.18.3 → 2.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Szum-Tech
+Copyright (c) 2025 Szum-Tech
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,97 +1,151 @@
-# Szum-Tech Design System
+<h1 align="center">@szum-tech/design-system</h1>
+<p align="center">Szum-Tech design system.</p>
+<br>
+<div align="center" style="display: flex; flex-direction: column; gap: 1em;">
+    <div style="display: flex; gap: .5em; justify-content: center">
+        <a href="https://github.com/JanSzewczyk/design-system"><img alt="GitHub Release" src="https://img.shields.io/github/v/release/JanSzewczyk/design-system"></a>
+        <a href="https://github.com/JanSzewczyk/design-system/pulls"><img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/JanSzewczyk/design-system"></a>
+        <a href="https://github.com/JanSzewczyk/design-system/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/JanSzewczyk/design-system"></a>
+        <a href="https://github.com/JanSzewczyk/design-system"><img alt="Github stars" src="https://img.shields.io/github/stars/JanSzewczyk/design-system?style=social"></a>
+    </div>
+    <div style="display: flex; gap: .5em; justify-content: center">
+        <a href="https://github.com/JanSzewczyk/design-system/actions/workflows/publish.yml"><img alt="Publish action" src="https://github.com/JanSzewczyk/design-system/actions/workflows/publish.yml/badge.svg?branch=main"></a>
+        <a href="https://github.com/JanSzewczyk/design-system/actions/workflows/codeql.yml"><img alt="CodeQL action" src="https://github.com/JanSzewczyk/design-system/actions/workflows/codeql.yml/badge.svg"></a>
+    </div>
+    <div style="display: flex; gap: .5em; justify-content: center">
+        <a href="https://www.npmjs.com/package/@szum-tech/design-system"><img alt="NPM version" src="https://img.shields.io/npm/v/@szum-tech/design-system"></a>
+        <a href="https://www.npmjs.com/package/@szum-tech/design-system"><img alt="Downloads" src="https://img.shields.io/npm/dm/@szum-tech/design-system"></a>
+    </div>
+</div>
+<br>
+<p align="center">
+    Design system supported by <a href="https://tailwindcss.com/">Tailwind CSS</a> library, it allows the creation of applications
+    supporting light and dark themes, shares UI React Components and a color palette in compliance with the Szum-Tech
+    standards.
+</p>
+
+---
+
+## 📚 Features
+
+- Predefined [Tailwind CSS](https://tailwindcss.com/) 4+ configuration, custom color palettes and more
+- Support for two themes:
+  - `light`
+  - `dark`
+- Ready to use [Components](#components) created based on [Radix UI](https://www.radix-ui.com/)
+- [Icons collection](#icons)
+
+## 📖 Table of Contents
+
+<!-- TOC -->
+
+- [📚 Features](#-features)
+- [📖 Table of Contents](#-table-of-contents)
+- [🎯 Getting Started](#-getting-started)
+  - [⚙️ Installation](#-installation)
+  - [Tailwindcss Configuration](#tailwindcss-configuration)
+  - [CSS file](#css-file)
+  - [Usage](#usage)
+    - [Components](#components)
+    - [Icons](#icons)
+- [🛠️ Developer Info](#-developer-info)
+  - [Dependencies](#dependencies)
+  - [Peer Dependencies](#peer-dependencies)
+  - [Documentation](#documentation)
+- [📓 Changelog](#-changelog)
+- [📜 License](#-license)
+<!-- TOC -->
+
+## 🎯 Getting Started
+
+### ⚙️ Installation
+
+[@szum-tech/design-system](https://www.npmjs.com/package/@szum-tech/design-system) is available as
+[npm package](https://www.npmjs.com/package/@szum-tech/design-system),
+
+Install `tailwindcss` and `@szum-tech/design-system` via npm.
 
-![GitHub release (latest by date)](https://img.shields.io/github/v/release/JanSzewczyk/design-system)
-[![GitHub pull requests](https://img.shields.io/github/issues-pr/JanSzewczyk/design-system)](https://github.com/JanSzewczyk/design-system/pulls)
-[![GitHub issues](https://img.shields.io/github/issues/JanSzewczyk/design-system)](https://github.com/JanSzewczyk/design-system/issues)
-![GitHub Repo stars](https://img.shields.io/github/stars/JanSzewczyk/design-system?style=social)
+```shell
+# NPM
+npm install tailwindcss @szum-tech/design-system
 
-[![released](https://github.com/JanSzewczyk/design-system/actions/workflows/publish.yml/badge.svg?branch=main)](https://github.com/JanSzewczyk/design-system/actions/workflows/publish.yml)
-[![deployed](https://github.com/JanSzewczyk/design-system/actions/workflows/gh-deploy.yml/badge.svg?branch=main)](https://github.com/JanSzewczyk/design-system/actions/workflows/gh-deploy.yml)
+# YARN
+yarn add tailwindcss @szum-tech/design-system
 
-[![npm](https://img.shields.io/npm/v/@szum-tech/design-system)](https://www.npmjs.com/package/@szum-tech/design-system)
-![npm](https://img.shields.io/npm/dm/@szum-tech/design-system)
+# PNPM
+pnpm add tailwindcss @szum-tech/design-system
 
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/JanSzewczyk/design-system/blob/main/LICENSE)
+# BUN
+bun add tailwindcss @szum-tech/design-system
+```
 
-Design system supported by [tailwindcss](https://tailwindcss.com/) library, it allows the creation of applications supporting light and dark themes, shares UI React Components and a color palette in compliance with the Szum-Tech standards.
+### Tailwindcss Configuration
 
-## Installation
+To configure Tailwind CSS, follow the [Installation](https://tailwindcss.com/docs/installation) section in the Tailwind
+CSS documentation.
 
-Szum-Tech Design System is available as an [npm package](https://www.npmjs.com/package/@szum-tech/design-system).
+On this page, you can find all the necessary information for integrating Tailwind in various ways - you can choose the
+one that suits you best.
 
-**npm:**
+### CSS file
 
-```shell
-npm install @szum-tech/design-system
-npm install -D tailwindcss
-```
+Add the following lines to your CSS file:
 
-**yarn:**
+```css
+@import "tailwindcss";
 
-```shell
-yarn add @szum-tech/design-system
-yarn add -D tailwindcss
-```
+/* Use the @import directive to inline import CSS file with predefined styles */
+@import "@szum-tech/design-system/tailwind/global.css";
 
-## Configuration
+/* Use the @source directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection */
+@source "../node_modules/@szum-tech/design-system";
+```
 
-After installing the [@szum-tech/design-system](https://www.npmjs.com/package/@szum-tech/design-system) package in accordance with paragraph [Installation](#Installation), during [Tailwind initialization](https://tailwindcss.com/docs/installation), follow these steps:
+### Usage
 
-### 1. Add preset to `tailwind.config.js` file
+#### Components
 
-> Add path to `@szum-tech/design-system` UI Components files and add preset file to Tailwind configuration
+All components of the design system, context, hooks, functions, etc., are imported from `@szum-tech/design-system`
 
-```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["...", "./node_modules/@szum-tech/design-system/{components,hooks,contexts}/**/*{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {}
-  },
-  plugins: [],
-  presets: [require("@szum-tech/design-system/theme/main-preset")]
-};
+```tsx
+import { Button } from "@szum-tech/design-system";
 ```
 
-### 2. Import theme styles to CSS file with Tailwind directives
-
-> Import CSS file from `@szum-tech/design-system/theme` with colors palette for dark and light theme and default styles (see file with [theme styles](https://github.com/JanSzewczyk/design-system/blob/main/src/theme/global.css))
+#### Icons
 
-```css
-@import "@szum-tech/design-system/theme/global.css";
+To use Icons you need to import them from `@szum-tech/design-system/icons`
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+```tsx
+import { GoogleLogoIcon } from "@szum-tech/design-system/icons";
 ```
 
-## Getting started
+## 🛠️ Developer Info
 
-### Theme Provider
+### Dependencies
 
-`ThemeProvider` relies on the [context feature of React](https://reactjs.org/docs/context.html) to handle theme mode and pass it to components, so you need to make sure `ThemeProvider` is the parent of the components you are trying to customize.
+![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/class-variance-authority)
+![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/clsx)
+![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/radix-ui)
+![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/tailwind-merge)
+![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/tailwindcss-animate)
 
-Here is an example of a basic app using `ThemeProvider` component:
+### Peer Dependencies
 
-```jsx
-import * as React from "react";
-
-import { ThemeProvider } from "@szum-tech/design-system";
-
-function Providers({ children }) {
-  return <ThemeProvider>{children}</ThemeProvider>;
-}
-```
+![NPM dev or peer Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/peer/react)
+![NPM dev or peer Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/peer/react-dom)
+![NPM dev or peer Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/peer/react-hook-form)
+![NPM dev or peer Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Fdesign-system/peer/tailwindcss)
 
-## Documentation
+### Documentation
 
 [Szum-Tech Design System](https://janszewczyk.github.io/design-system)
 
-## Changelog
+## 📓 Changelog
 
-The [changelog](https://github.com/JanSzewczyk/design-system/blob/main/CHANGELOG.md) is regularly updated to reflect what's changed in each new release.
+The [changelog](https://github.com/JanSzewczyk/design-system/blob/main/CHANGELOG.md) is regularly updated to reflect
+what's changed in each new release.
 
-## License
+## 📜 License
 
 This project is licensed under the terms of the
 [MIT license](https://github.com/JanSzewczyk/design-system/blob/main/LICENSE).