@e-infra/design-system 0.0.6 → 0.0.7

package/README.md

@@ -1,9 +1,9 @@
-# e-INFRA Design System
+# e-INFRA CZ Design System
 
 [![npm version](https://img.shields.io/npm/v/@e-infra/design-system.svg)](https://www.npmjs.com/package/@e-infra/design-system)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-A comprehensive React component library built with shadcn/ui and Tailwind CSS v4, designed for the e-INFRA ecosystem.
+A comprehensive React component library built with shadcn/ui and Tailwind CSS v4, designed for the e-INFRA CZ app ecosystem.
 
 ## ✨ Features
 
@@ -19,16 +19,16 @@ A comprehensive React component library built with shadcn/ui and Tailwind CSS v4
 
 ```bash
 # Using npm
-npm install @muni-ics/e-infra-design-system
+npm install @e-infra/design-system
 
 # Using yarn
-yarn add @muni-ics/e-infra-design-system
+yarn add @e-infra/design-system
 
 # Using pnpm
-pnpm add @muni-ics/e-infra-design-system
+pnpm add @e-infra/design-system
 
 # Using bun
-bun add @muni-ics/e-infra-design-system
+bun add @e-infra/design-system
 ```
 
 ### Peer Dependencies
@@ -43,40 +43,36 @@ npm install react react-dom tailwindcss
 
 ### 1. Import Styles
 
-**Important:** Import the CSS file in your main application file:
+**Important:** Import the CSS file in your main application file **AFTER importing tailwindcss**:
 
 ```typescript
-import '@muni-ics/e-infra-design-system/style.css';
+import "@e-infra/design-system/setup.css";
 ```
 
-### 2. Configure Tailwind CSS
-
-Add the design system to your `tailwind.config.js`:
-
-```javascript
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@muni-ics/e-infra-design-system/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
+Example:
+
+```css
+@import "tailwindcss";
+
+@import "@e-infra/design-system/setup.css";
 ```
 
-### 3. Use Components
+### 2. Use Components
 
 ```tsx
-import { Button, Card, CardHeader, CardTitle, CardContent } from '@muni-ics/e-infra-design-system';
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@muni-ics/e-infra-design-system";
 
 function App() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Welcome to e-INFRA</CardTitle>
+        <CardTitle>Welcome to e-INFRA CZ</CardTitle>
       </CardHeader>
       <CardContent>
         <p>Start building with our design system!</p>
@@ -157,7 +153,7 @@ The design system uses CSS variables for theming. You can customize colors by ov
 
 For full documentation and live examples, visit:
 
-🔗 **[Live Showcase](https://your-showcase-url.vercel.app)** *(Update after deployment)*
+🔗 **[Live Showcase](https://design-system.e-infra.cz/)**
 
 ## 🛠️ Development
 
@@ -181,9 +177,35 @@ bun run lint
 bun run type:check
 ```
 
+For other commands consult `package.json`.
+
+## Docker
+
+**Be in root of the project directory!**
+
+### Using Compose File (build and run)
+
+```sh
+docker compose -f ./env/prod/docker-compose.yml up --build
+```
+
+### Build Only Image
+
+#### Bun as Package Manager and Runtime
+
+```sh
+docker build -t design-system-showcase:latest -f ./env/prod/Dockerfile.bun .
+```
+
+#### Bun as Package Manager, Node as Runtime
+
+```sh
+docker build -t design-system-showcase:latest -f ./env/prod/Dockerfile .
+```
+
 ## 📄 License
 
-MIT © CERIT-SC
+MIT © [CERIT-SC, Masaryk University](https://cerit-sc.cz)
 
 ## 👥 Maintainers