@dynamic-mockups/design-system 0.1.0 → 0.1.2
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.
- package/README.md +4 -49
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
# 🎨
|
|
2
|
-
|
|
3
|
-
## ✅ Project Successfully Created
|
|
1
|
+
# 🎨 Dynamic Mockups Design System
|
|
4
2
|
|
|
5
3
|
A production-ready, scalable design system built with modern best practices.
|
|
6
4
|
|
|
@@ -326,37 +324,6 @@ yarn typecheck # Run TypeScript type checking
|
|
|
326
324
|
|
|
327
325
|
---
|
|
328
326
|
|
|
329
|
-
## 🔥 What Makes This Professional
|
|
330
|
-
|
|
331
|
-
1. **Proper Token System** - Centralized colors, spacing, typography
|
|
332
|
-
2. **Extends Radix UI** - More colors & variants than default
|
|
333
|
-
3. **SCSS Architecture** - Clean, maintainable styles with nesting
|
|
334
|
-
4. **Full TypeScript** - Type-safe props and exports
|
|
335
|
-
5. **Component Variants** - Multiple styles per component
|
|
336
|
-
6. **Error States** - Proper validation and error handling
|
|
337
|
-
7. **Storybook Docs** - Every component fully documented
|
|
338
|
-
8. **Build Optimization** - Tree-shaking, source maps, dual formats
|
|
339
|
-
|
|
340
|
-
---
|
|
341
|
-
|
|
342
|
-
## 🚢 Publishing to NPM
|
|
343
|
-
|
|
344
|
-
```bash
|
|
345
|
-
# 1. Update package.json name
|
|
346
|
-
"name": "@yourcompany/design-system"
|
|
347
|
-
|
|
348
|
-
# 2. Login to npm
|
|
349
|
-
npm login
|
|
350
|
-
|
|
351
|
-
# 3. Build
|
|
352
|
-
yarn build
|
|
353
|
-
|
|
354
|
-
# 4. Publish
|
|
355
|
-
npm publish --access public
|
|
356
|
-
```
|
|
357
|
-
|
|
358
|
-
---
|
|
359
|
-
|
|
360
327
|
## 📖 Next Steps
|
|
361
328
|
|
|
362
329
|
1. **Run Storybook** to see all components:
|
|
@@ -375,22 +342,10 @@ npm publish --access public
|
|
|
375
342
|
|
|
376
343
|
4. **Test in your primary project** using `npm link`
|
|
377
344
|
|
|
378
|
-
5. **Publish to npm** when ready
|
|
379
|
-
|
|
380
345
|
---
|
|
381
346
|
|
|
382
|
-
## 🎉 Summary
|
|
383
|
-
|
|
384
|
-
You now have a **professional, production-ready design system** with:
|
|
385
|
-
|
|
386
|
-
- ✅ 5 fully-functional components
|
|
387
|
-
- ✅ Complete token system
|
|
388
|
-
- ✅ SCSS styling architecture
|
|
389
|
-
- ✅ TypeScript types
|
|
390
|
-
- ✅ Storybook documentation
|
|
391
|
-
- ✅ Build system configured
|
|
392
|
-
- ✅ Ready to install as npm package
|
|
393
|
-
|
|
394
347
|
The system is scalable, maintainable, and follows industry best practices used by companies like Shopify, Atlassian, and GitHub.
|
|
395
348
|
|
|
396
|
-
|
|
349
|
+
---
|
|
350
|
+
|
|
351
|
+
**Developed by https://dynamicmockups.com**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynamic-mockups/design-system",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A professional, scalable design system built with React 18, TypeScript, Radix UI, and Storybook",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -45,7 +45,6 @@
|
|
|
45
45
|
"storybook:test": "storybook dev -p 6006 --test",
|
|
46
46
|
"build-storybook": "storybook build",
|
|
47
47
|
"prepublishOnly": "npm run typecheck && npm run test && npm run build",
|
|
48
|
-
"version": "npm run build && git add -A dist",
|
|
49
48
|
"postversion": "git push && git push --tags"
|
|
50
49
|
},
|
|
51
50
|
"keywords": [
|