@efiche/design 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +186 -21
  2. package/package.json +35 -29
package/README.md CHANGED
@@ -1,36 +1,201 @@
1
- This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1
+ # @efiche/design
2
2
 
3
- ## Getting Started
3
+ A pre-styled, accessible React component library. Install it, wrap your app in `ThemeProvider`, and start building.
4
4
 
5
- First, run the development server:
5
+ ## Installation
6
6
 
7
7
  ```bash
8
- npm run dev
9
- # or
10
- yarn dev
11
- # or
12
- pnpm dev
13
- # or
14
- bun dev
8
+ npm install @efiche/design
9
+ ```
10
+
11
+ > Add `recharts` too if you plan to use the chart components:
12
+ > ```bash
13
+ > npm install recharts
14
+ > ```
15
+
16
+ ---
17
+
18
+ ## Setup
19
+
20
+ Import the stylesheet and wrap your app root with `ThemeProvider` **once**.
21
+
22
+ **Next.js App Router** (`app/layout.tsx`):
23
+ ```tsx
24
+ import '@efiche/design/styles'
25
+ import { ThemeProvider } from '@efiche/design'
26
+
27
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
28
+ return (
29
+ <html>
30
+ <body>
31
+ <ThemeProvider defaultTheme="light">
32
+ {children}
33
+ </ThemeProvider>
34
+ </body>
35
+ </html>
36
+ )
37
+ }
38
+ ```
39
+
40
+ **Vite / CRA** (`src/main.tsx`):
41
+ ```tsx
42
+ import '@efiche/design/styles'
43
+ import { ThemeProvider } from '@efiche/design'
44
+ import { createRoot } from 'react-dom/client'
45
+
46
+ createRoot(document.getElementById('root')!).render(
47
+ <ThemeProvider defaultTheme="light">
48
+ <App />
49
+ </ThemeProvider>
50
+ )
51
+ ```
52
+
53
+ ---
54
+
55
+ ## Usage
56
+
57
+ ```tsx
58
+ import { Button, Card, CardHeader, CardTitle, CardContent, Badge, Input } from '@efiche/design'
59
+
60
+ export function MyPage() {
61
+ return (
62
+ <Card>
63
+ <CardHeader>
64
+ <CardTitle>Hello <Badge variant="success">New</Badge></CardTitle>
65
+ </CardHeader>
66
+ <CardContent>
67
+ <Input placeholder="Type something..." />
68
+ <Button variant="solid">Submit</Button>
69
+ </CardContent>
70
+ </Card>
71
+ )
72
+ }
73
+ ```
74
+
75
+ ### Dark mode
76
+
77
+ ```tsx
78
+ import { useTheme } from '@efiche/design'
79
+
80
+ function DarkModeToggle() {
81
+ const { theme, toggle } = useTheme()
82
+ return (
83
+ <button onClick={toggle}>
84
+ Switch to {theme === 'dark' ? 'light' : 'dark'} mode
85
+ </button>
86
+ )
87
+ }
88
+ ```
89
+
90
+ ---
91
+
92
+ ## Components
93
+
94
+ | Component | Import |
95
+ |-----------|--------|
96
+ | `Accordion` | `import { Accordion } from '@efiche/design'` |
97
+ | `Alert` | `import { Alert } from '@efiche/design'` |
98
+ | `Avatar` | `import { Avatar } from '@efiche/design'` |
99
+ | `Badge` | `import { Badge } from '@efiche/design'` |
100
+ | `Breadcrumb` | `import { Breadcrumb } from '@efiche/design'` |
101
+ | `Button` | `import { Button } from '@efiche/design'` |
102
+ | `Card` | `import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@efiche/design'` |
103
+ | `Checkbox` | `import { Checkbox } from '@efiche/design'` |
104
+ | `CopyButton` | `import { CopyButton } from '@efiche/design'` |
105
+ | `FileUpload` | `import { FileUpload } from '@efiche/design'` |
106
+ | `Input` | `import { Input } from '@efiche/design'` |
107
+ | `Label` | `import { Label } from '@efiche/design'` |
108
+ | `PasswordInput` | `import { PasswordInput } from '@efiche/design'` |
109
+ | `Progress` | `import { Progress } from '@efiche/design'` |
110
+ | `RadioGroup` | `import { RadioGroup } from '@efiche/design'` |
111
+ | `Select` | `import { Select } from '@efiche/design'` |
112
+ | `Skeleton` | `import { Skeleton } from '@efiche/design'` |
113
+ | `Slider` | `import { Slider } from '@efiche/design'` |
114
+ | `Spinner` | `import { Spinner } from '@efiche/design'` |
115
+ | `Switch` | `import { Switch } from '@efiche/design'` |
116
+ | `Table` | `import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@efiche/design'` |
117
+ | `Tabs` | `import { Tabs } from '@efiche/design'` |
118
+ | `Textarea` | `import { Textarea } from '@efiche/design'` |
119
+ | `Tooltip` | `import { Tooltip } from '@efiche/design'` |
120
+ | `ThemeProvider` | `import { ThemeProvider, useTheme } from '@efiche/design'` |
121
+
122
+ ---
123
+
124
+ ## Versioning
125
+
126
+ This package follows [semantic versioning](https://semver.org). Here is how to decide which version bump to use and how to publish it.
127
+
128
+ ### Version bump rules
129
+
130
+ | Type of change | Command | Example |
131
+ |----------------|---------|---------|
132
+ | Bug fix or style tweak | `npm version patch` | `0.1.0 → 0.1.1` |
133
+ | New component or new prop | `npm version minor` | `0.1.0 → 0.2.0` |
134
+ | Renamed/removed prop or component | `npm version major` | `0.1.0 → 1.0.0` |
135
+
136
+ ### How to publish a new version
137
+
138
+ ```bash
139
+ # 1. Make your changes and commit them
140
+ git add .
141
+ git commit -m "feat: add DatePicker component"
142
+
143
+ # 2. Bump the version (pick one)
144
+ npm version patch # bug fix
145
+ npm version minor # new feature, backwards-compatible
146
+ npm version major # breaking change
147
+
148
+ # 3. Publish — the build runs automatically before publish
149
+ npm publish
150
+
151
+ # 4. Push the version commit and tag created by npm version
152
+ git push && git push --tags
15
153
  ```
16
154
 
17
- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
155
+ ### What "breaking change" means for this library
18
156
 
19
- You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
157
+ A **major bump** is required when consumers would need to update their code after upgrading. Examples:
20
158
 
21
- This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
159
+ - Renaming a component (`CopyButton` → `ClipboardButton`)
160
+ - Renaming or removing a prop (`variant="primary"` → `variant="solid"`)
161
+ - Changing a prop type in a non-backwards-compatible way
162
+ - Removing a component entirely
22
163
 
23
- ## Learn More
164
+ A **minor bump** is safe — consumers can upgrade without touching their code. Examples:
24
165
 
25
- To learn more about Next.js, take a look at the following resources:
166
+ - Adding a new component
167
+ - Adding a new optional prop to an existing component
168
+ - Adding a new variant to `Badge`, `Button`, etc.
26
169
 
27
- - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28
- - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
170
+ A **patch bump** is a fix — no API changes at all. Examples:
29
171
 
30
- You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
172
+ - Fixing a broken style
173
+ - Fixing a component behaviour bug
174
+ - Updating documentation
31
175
 
32
- ## Deploy on Vercel
176
+ ### When to go from `0.x.x` to `1.0.0`
33
177
 
34
- The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
178
+ Stay on `0.x.x` while the API is still being shaped. Once the core components have been used in a real project and props feel settled, ship `1.0.0`:
35
179
 
36
- Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
180
+ ```bash
181
+ npm version 1.0.0
182
+ npm publish
183
+ git push && git push --tags
184
+ ```
185
+
186
+ From `1.0.0` onwards the rules above are strictly enforced.
187
+
188
+ ---
189
+
190
+ ## Contributing (for library maintainers)
191
+
192
+ ```bash
193
+ # Run the documentation site locally
194
+ npm run dev
195
+
196
+ # Build the library
197
+ npm run build:lib
198
+
199
+ # The docs site lives in src/app/
200
+ # The library source lives in src/components/
201
+ ```
package/package.json CHANGED
@@ -1,56 +1,62 @@
1
1
  {
2
2
  "name": "@efiche/design",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "eFiche UI component library — pre-styled, accessible React components",
5
5
  "license": "MIT",
6
6
  "private": false,
7
- "main": "./dist/index.cjs",
7
+ "main": "./dist/index.cjs",
8
8
  "module": "./dist/index.js",
9
- "types": "./dist/index.d.ts",
9
+ "types": "./dist/index.d.ts",
10
10
  "exports": {
11
11
  ".": {
12
- "types": "./dist/index.d.ts",
13
- "import": "./dist/index.js",
12
+ "types": "./dist/index.d.ts",
13
+ "import": "./dist/index.js",
14
14
  "require": "./dist/index.cjs"
15
15
  },
16
16
  "./styles": "./dist/index.css"
17
17
  },
18
- "files": ["dist"],
18
+ "files": [
19
+ "dist"
20
+ ],
19
21
  "publishConfig": {
20
22
  "access": "public",
21
23
  "registry": "https://registry.npmjs.org/"
22
24
  },
23
25
  "scripts": {
24
- "dev": "next dev",
25
- "build": "next build",
26
- "start": "next start",
27
- "lint": "eslint",
28
- "build:lib": "tsup",
26
+ "dev": "next dev",
27
+ "build": "next build",
28
+ "start": "next start",
29
+ "lint": "eslint",
30
+ "build:lib": "tsup",
29
31
  "prepublishOnly": "npm run build:lib"
30
32
  },
33
+ "dependencies": {
34
+ "lucide-react": "^1.16.0"
35
+ },
31
36
  "peerDependencies": {
32
- "react": ">=18",
33
- "react-dom": ">=18",
34
- "lucide-react": ">=0.300.0",
35
- "recharts": ">=2.0.0"
37
+ "react": ">=18",
38
+ "react-dom": ">=18",
39
+ "recharts": ">=2.0.0"
36
40
  },
37
41
  "peerDependenciesMeta": {
38
- "recharts": { "optional": true }
42
+ "recharts": {
43
+ "optional": true
44
+ }
39
45
  },
40
46
  "devDependencies": {
41
47
  "@tailwindcss/postcss": "^4",
42
- "@types/node": "^20",
43
- "@types/react": "^19",
44
- "@types/react-dom": "^19",
45
- "eslint": "^9",
46
- "eslint-config-next": "16.2.6",
47
- "lucide-react": "^1.16.0",
48
- "next": "16.2.6",
49
- "react": "19.2.4",
50
- "react-dom": "19.2.4",
51
- "recharts": "^3.8.1",
52
- "tailwindcss": "^4",
53
- "tsup": "^8.5.1",
54
- "typescript": "^5"
48
+ "@types/node": "^20",
49
+ "@types/react": "^19",
50
+ "@types/react-dom": "^19",
51
+ "eslint": "^9",
52
+ "eslint-config-next": "16.2.6",
53
+ "lucide-react": "^1.16.0",
54
+ "next": "16.2.6",
55
+ "react": "19.2.4",
56
+ "react-dom": "19.2.4",
57
+ "recharts": "^3.8.1",
58
+ "tailwindcss": "^4",
59
+ "tsup": "^8.5.1",
60
+ "typescript": "^5"
55
61
  }
56
62
  }