@flipdish/ui-library 0.3.1 → 0.4.0

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 +21 -0
  2. package/package.json +78 -16
package/README.md CHANGED
@@ -48,6 +48,27 @@ Install the peers for the platform(s) you target. Platform-specific peers are de
48
48
  | `@react-native-aria/interactions` | `>=0.2.7` |
49
49
  | `@react-native-aria/focus` | `>=0.2.7` |
50
50
 
51
+ ### Component-specific peer dependencies
52
+
53
+ A handful of components are backed by larger third-party libraries. Those libraries are declared as **optional** peer dependencies so consumers only install what they actually use — importing `Button` never pulls in the charting or rich-text stack. Install the matching peer(s) only for the components you import; if a peer is missing, that component will fail to resolve at build/runtime.
54
+
55
+ | Component | Required peer(s) |
56
+ | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
57
+ | `Charts` | `recharts` |
58
+ | `CodeSnippet` | `shiki`, `hast-util-to-jsx-runtime` |
59
+ | `TextEditor` | `@tiptap/core`, `@tiptap/pm`, `@tiptap/react`, `@tiptap/starter-kit`, `@tiptap/extension-image`, `@tiptap/extension-placeholder`, `@tiptap/extension-text-align`, `@tiptap/extension-text-style` |
60
+ | `Carousel` | `embla-carousel-react` |
61
+ | `QRCode` | `qr-code-styling` |
62
+ | `VerificationCodeInput` | `input-otp` |
63
+ | `CommandMenu` | `react-hotkeys-hook` |
64
+ | `FileUpload`, `SidebarNavigation` | `motion` |
65
+
66
+ For example, to use the rich-text editor:
67
+
68
+ ```bash
69
+ pnpm add @tiptap/core @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-placeholder @tiptap/extension-text-align @tiptap/extension-text-style
70
+ ```
71
+
51
72
  ## Tailwind setup
52
73
 
53
74
  The library ships a shared Tailwind runtime — plugins, custom variants, `@utility` definitions, and base resets — at `@flipdish/ui-library/styles`. Import it from your Tailwind entry CSS, alongside the tokens, so each app doesn't re-declare it:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flipdish/ui-library",
3
- "version": "0.3.1",
3
+ "version": "0.4.0",
4
4
  "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -63,7 +63,14 @@
63
63
  "@react-aria/utils": "^3.34.1",
64
64
  "@react-stately/utils": "^3.12.1",
65
65
  "@react-types/shared": "^3.36.0",
66
- "@shikijs/transformers": "^4.2.0",
66
+ "react-error-boundary": "^4.1.2",
67
+ "tailwindcss-animate": "^1.0.7",
68
+ "tailwindcss-react-aria-components": "^2.1.1",
69
+ "@flipdish/ui-icons": "^0.3.0"
70
+ },
71
+ "peerDependencies": {
72
+ "@react-native-aria/focus": ">=0.2.7",
73
+ "@react-native-aria/interactions": ">=0.2.7",
67
74
  "@tiptap/core": "^3.27.1",
68
75
  "@tiptap/extension-image": "^3.27.1",
69
76
  "@tiptap/extension-placeholder": "^3.27.1",
@@ -72,30 +79,21 @@
72
79
  "@tiptap/pm": "^3.27.1",
73
80
  "@tiptap/react": "^3.27.1",
74
81
  "@tiptap/starter-kit": "^3.27.1",
82
+ "clsx": "^2.1.1",
75
83
  "embla-carousel-react": "^8.6.0",
76
84
  "hast-util-to-jsx-runtime": "^2.3.6",
77
85
  "input-otp": "^1.4.2",
78
86
  "motion": "^12.40.0",
79
- "qr-code-styling": "^1.9.2",
80
- "react-error-boundary": "^4.1.2",
81
- "react-hotkeys-hook": "^5.3.2",
82
- "recharts": "^3.8.1",
83
- "shiki": "^4.2.0",
84
- "sonner": "^2.0.7",
85
- "tailwindcss-animate": "^1.0.7",
86
- "tailwindcss-react-aria-components": "^2.1.1",
87
- "@flipdish/ui-icons": "^0.3.0"
88
- },
89
- "peerDependencies": {
90
- "@react-native-aria/focus": ">=0.2.7",
91
- "@react-native-aria/interactions": ">=0.2.7",
92
- "clsx": "^2.1.1",
93
87
  "nativewind": "^4.1.0",
88
+ "qr-code-styling": "^1.9.2",
94
89
  "react": "^19.0.0",
95
90
  "react-aria-components": "^1.18.0",
96
91
  "react-dom": "^19.0.0",
92
+ "react-hotkeys-hook": "^5.3.2",
97
93
  "react-native": ">=0.79.0",
98
94
  "react-router": "^7.0.0",
95
+ "recharts": "^3.8.1",
96
+ "shiki": "^4.2.0",
99
97
  "tailwind-merge": "^3.6.0",
100
98
  "tailwind-variants": "^3.2.2"
101
99
  },
@@ -106,20 +104,68 @@
106
104
  "@react-native-aria/interactions": {
107
105
  "optional": true
108
106
  },
107
+ "@tiptap/core": {
108
+ "optional": true
109
+ },
110
+ "@tiptap/extension-image": {
111
+ "optional": true
112
+ },
113
+ "@tiptap/extension-placeholder": {
114
+ "optional": true
115
+ },
116
+ "@tiptap/extension-text-align": {
117
+ "optional": true
118
+ },
119
+ "@tiptap/extension-text-style": {
120
+ "optional": true
121
+ },
122
+ "@tiptap/pm": {
123
+ "optional": true
124
+ },
125
+ "@tiptap/react": {
126
+ "optional": true
127
+ },
128
+ "@tiptap/starter-kit": {
129
+ "optional": true
130
+ },
131
+ "embla-carousel-react": {
132
+ "optional": true
133
+ },
134
+ "hast-util-to-jsx-runtime": {
135
+ "optional": true
136
+ },
137
+ "input-otp": {
138
+ "optional": true
139
+ },
140
+ "motion": {
141
+ "optional": true
142
+ },
109
143
  "nativewind": {
110
144
  "optional": true
111
145
  },
146
+ "qr-code-styling": {
147
+ "optional": true
148
+ },
112
149
  "react-aria-components": {
113
150
  "optional": true
114
151
  },
115
152
  "react-dom": {
116
153
  "optional": true
117
154
  },
155
+ "react-hotkeys-hook": {
156
+ "optional": true
157
+ },
118
158
  "react-native": {
119
159
  "optional": true
120
160
  },
121
161
  "react-router": {
122
162
  "optional": true
163
+ },
164
+ "recharts": {
165
+ "optional": true
166
+ },
167
+ "shiki": {
168
+ "optional": true
123
169
  }
124
170
  },
125
171
  "devDependencies": {
@@ -128,16 +174,32 @@
128
174
  "@storybook/addon-docs": "^10.4.6",
129
175
  "@storybook/react-vite": "^10.4.6",
130
176
  "@tailwindcss/vite": "^4.3.1",
177
+ "@tiptap/core": "^3.27.1",
178
+ "@tiptap/extension-image": "^3.27.1",
179
+ "@tiptap/extension-placeholder": "^3.27.1",
180
+ "@tiptap/extension-text-align": "^3.27.1",
181
+ "@tiptap/extension-text-style": "^3.27.1",
182
+ "@tiptap/pm": "^3.27.1",
183
+ "@tiptap/react": "^3.27.1",
184
+ "@tiptap/starter-kit": "^3.27.1",
131
185
  "@types/node": "^24.0.0",
132
186
  "@types/react": "^19.0.0",
133
187
  "@types/react-dom": "^19.0.0",
134
188
  "chromatic": "^17.4.1",
135
189
  "clsx": "^2.1.1",
190
+ "embla-carousel-react": "^8.6.0",
191
+ "hast-util-to-jsx-runtime": "^2.3.6",
192
+ "input-otp": "^1.4.2",
193
+ "motion": "^12.40.0",
194
+ "qr-code-styling": "^1.9.2",
136
195
  "react": "^19.0.0",
137
196
  "react-aria-components": "^1.18.0",
138
197
  "react-dom": "^19.0.0",
198
+ "react-hotkeys-hook": "^5.3.2",
139
199
  "react-router": "^7.17.0",
200
+ "recharts": "^3.8.1",
140
201
  "remark-gfm": "^4.0.1",
202
+ "shiki": "^4.2.0",
141
203
  "storybook": "^10.4.6",
142
204
  "tailwind-merge": "^3.6.0",
143
205
  "tailwind-variants": "^3.2.2",