https://github.com/lhapaipai/pentatrion-design
Design system
https://github.com/lhapaipai/pentatrion-design
react tailwindcss
Last synced: 8 months ago
JSON representation
Design system
- Host: GitHub
- URL: https://github.com/lhapaipai/pentatrion-design
- Owner: lhapaipai
- Created: 2024-06-25T20:48:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-24T13:18:53.000Z (8 months ago)
- Last Synced: 2025-02-24T14:29:33.739Z (8 months ago)
- Topics: react, tailwindcss
- Language: TypeScript
- Homepage: https://design.pentatrion.com
- Size: 1.71 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# [Pentatrion Design System](https://design.pentatrion.com)
## Prérequis
Créez un nouveau projet Vite + React v19 + TailwindCSS v4. [Official doc](https://tailwindcss.com/docs/installation/using-vite)
```bash
pnpm create vite my-app
# 1. React
# 2. TypeScript + SWC
cd my-app
# dépendances
pnpm add -D tailwindcss @tailwindcss/vite prettier-plugin-tailwindcss
pnpm add pentatrion-design
```
Supprimer les fichiers inutiles
```
.
└── src
├── App.tsx
├── index.css
├── main.tsx
└── vite-env.d.ts
```
Configuration de vite
```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
});
```
Mettre à jour le fichier `src/index.css`
```css
/* src/index.css */
@import "tailwindcss";
@source "./node_modules/pentatrion-design/dist/lib";
@source "./node_modules/pentatrion-design/dist/components";
@source "./node_modules/pentatrion-design/dist/hooks";
@source "./node_modules/pentatrion-design/dist/redux";
@import "pentatrion-design/tailwind/index.css";
/* facultatif */
@import "pentatrion-design/tailwind/prose.css";
```
si on désire plus de contrôle sur nos imports
```css
/* src/index.css */
@import "tailwindcss";
@source "./node_modules/pentatrion-design/dist/lib";
@source "./node_modules/pentatrion-design/dist/components";
@source "./node_modules/pentatrion-design/dist/hooks";
@source "./node_modules/pentatrion-design/dist/redux";
@import "pentatrion-design/tailwind/variants.css";
@import "pentatrion-design/tailwind/theme.css" layer(theme);
@import "pentatrion-design/tailwind/base.css" layer(base);
@import "pentatrion-design/tailwind/components-input-outline.css" layer(components);
@import "pentatrion-design/tailwind/components-range.css" layer(components);
@import "pentatrion-design/tailwind/components-resize-area.css" layer(components);
@import "pentatrion-design/tailwind/components-step.css" layer(components);
@import "pentatrion-design/tailwind/components.css" layer(components);
@import "pentatrion-design/tailwind/utilities.css";
@import "pentatrion-design/tailwind/utilities-dialog.css" layer(utilities);
@import "pentatrion-design/tailwind/prose.css";
```
```json
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}
```
La dépendance `pentatrion-fonts` est optionnelle.
Mettre à jour `src/App.tsx`
```tsx
import { Button } from "pentatrion-design/button";
import { useState } from "react"
function App() {
const [counter, setCounter] = useState(0);
return (
Vite + React
setCounter(c => c + 1)}>Click me !
{counter}
)
}
export default App
```
## VsCode
Create a `.vscode/settings.json` file
```json
{
"files.associations": {
"*.css": "tailwindcss"
}
}
```
## Développement avec watch
anciennement dans le `package.json`. plus nécessaire pour le moment
```json
{
"scripts": {
"dev:tsc": "tsc -w -p tsconfig.build.json",
"dev:alias": "tsc-alias -w -p tsconfig.build.json",
"dev": "run-p dev:tsc dev:alias",
}
}
```
## Inclure le design-system dans un autre projet sans dépendance npm
fichier `tsconfig.json`.
```json
{
"compilerOptions": {
"paths": {
"pentatrion-design/*": ["./*"]
},
}
}
```