🥟 fully embrace Bun

README.md

@@ -2,7 +2,7 @@
 
 > Storybook-Tailwind distribution for Styleguide projects
 
-*If you're just too lazy to read the README  😏👉 `npx frontend-storybox@latest`*
+*If you're just too lazy to read the README  😏👉 `bun x frontend-storybox@latest`*
 
 Currently **provides**:
 - [🌊 Tailwind](https://tailwindcss.com/)
@@ -21,24 +21,23 @@ First you need to **kick off the generator**:
 
 ```bash
 $ mkdir new-styleguide && cd new-styleguide
-$ npx frontend-storybox@latest
+$ bun x frontend-storybox@latest
 ```
 
 If you want a good ESLint/Prettier/Cypress/Jest config, you can use the [Antistatique Frontend Development Configuration](https://github.com/antistatique/frontend-development-configuration) as so:
 
 ⚠️ Make sure everything has been added/commited before doing this
 
 ```bash
-$ npx antistatique-frontend@latest # Uncheck storybook and check stylelint, obviously
+$ bun x antistatique-frontend@latest # Uncheck storybook and check stylelint, obviously
 $ git checkout tsconfig.json
 ```
 
 ## 🔧 Installation
 
 You need to have the following tools installed globally on your environment:
 
-- [📗 NodeJS >= 16](https://nodejs.org/en/) - JavaScript runtime used to build and run the project
-- [🥟 Bun >= 1.0.13](https://bun.sh/) - Dependency manager
+- [🥟 Bun >= 1.0.13](https://bun.sh/) - Runtime & Dependency manager
 
 To install the project:
 

package.json

@@ -8,9 +8,6 @@
   "type": "module",
   "storyboxVersion": "2.0.0",
   "main": ".bin/init.js",
-  "engines": {
-    "node": ">=18"
-  },
   "bin": {
     "antistatique-frontend": ".bin/init.js",
     "init": ".bin/init.js"
@@ -21,18 +18,18 @@
   "scripts": {
     "clean": "rm -rf node_modules/.cache",
     "icons:build": "svg-sprite -s --symbol-inline --symbol-dest public/icons --symbol-sprite icons.svg src/assets/icons/*.svg",
-    "images:build": "npx zx bin/generate-image.mjs",
-    "tailwind:build": "export NODE_ENV=production && npx tailwindcss -i ./src/styles/base.css -o ./public/css/styles.css --minify",
-    "tailwind:start": "npx tailwindcss -i ./src/styles/base.css -o ./public/css/styles.css --watch",
+    "images:build": "bun x zx bin/generate-image.mjs",
+    "tailwind:build": "export NODE_ENV=production && bun x tailwindcss -i ./src/styles/base.css -o ./public/css/styles.css --minify",
+    "tailwind:start": "bun x tailwindcss -i ./src/styles/base.css -o ./public/css/styles.css --watch",
     "storybook:start": "npm run clean && storybook dev --no-open -p 6006",
     "storybook:build": "storybook build",
     "modules:start": "rollup --config --watch",
     "modules:build": "rollup --config",
     "start": "concurrently \"npm run tailwind:start\" \"npm run storybook:start\"",
     "build": "npm run build:assets",
-    "build:assets": "npm run icons:build && npm run tailwind:build && npm run modules:build && npx @ffflorian/[email protected] -c .jsziprc.json",
+    "build:assets": "npm run icons:build && npm run tailwind:build && npm run modules:build && bun x @ffflorian/[email protected] -c .jsziprc.json",
     "build:styleguide": "npm run build:assets && npm run storybook:build",
-    "generate": "npx generact",
+    "generate": "bun x generact",
     "lint:js": "eslint --ext js,jsx,ts,tsx ./ --max-warnings=0",
     "lint:css": "stylelint 'playground/**/*.css'",
     "fix:js": "eslint --ext js,jsx,ts,tsx ./ --max-warnings=0 --fix",

package.tpl.json

@@ -6,27 +6,24 @@
   "description": "A brand new styleguide project",
   "author": "you",
   "type": "module",
-  "engines": {
-    "node": ">=16"
-  },
   "chan": {
     "release-prefix": ""
   },
   "scripts": {
     "clean": "rm -rf node_modules/.cache",
     "icons:build": "svg-sprite -s --symbol-inline --symbol-dest public/icons --symbol-sprite icons.svg src/assets/icons/*.svg",
-    "images:build": "npx zx bin/generate-image.mjs",
-    "tailwind:build": "export NODE_ENV=production && npx tailwindcss -i ./src/styles/base.css -o ./public/css/styles.css --minify",
-    "tailwind:start": "npx tailwindcss -i ./src/styles/base.css -o ./public/css/styles.css --watch",
-    "storybook:start": "yarn run clean && storybook dev --no-open -p 6006",
+    "images:build": "bun x zx bin/generate-image.mjs",
+    "tailwind:build": "export NODE_ENV=production && bun x tailwindcss -i ./src/styles/base.css -o ./public/css/styles.css --minify",
+    "tailwind:start": "bun x tailwindcss -i ./src/styles/base.css -o ./public/css/styles.css --watch",
+    "storybook:start": "npm run clean && storybook dev --no-open -p 6006",
     "storybook:build": "storybook build",
     "modules:start": "rollup --config --watch",
     "modules:build": "rollup --config",
-    "start": "concurrently \"yarn tailwind:start\" \"yarn storybook:start\"",
-    "build": "yarn build:assets",
-    "build:assets": "yarn icons:build && yarn tailwind:build && yarn modules:build && npx @ffflorian/jszip-cli -c .jsziprc.json",
-    "build:styleguide": "yarn build:assets && yarn storybook:build",
-    "generate": "npx generact"
+    "start": "concurrently \"npm run tailwind:start\" \"npm run storybook:start\"",
+    "build": "npm run build:assets",
+    "build:assets": "npm run icons:build && npm run tailwind:build && npm run modules:build && bun x @ffflorian/jszip-cli -c .jsziprc.json",
+    "build:styleguide": "npm run build:assets && npm run storybook:build",
+    "generate": "bun x generact"
   },
   "dependencies": {
     "alpinejs": "^3.12.2",

src/components/atoms/Picture/Picture.mdx

@@ -32,7 +32,7 @@ brew install imagemagick
 Then you can run the following command to generate the placeholders:
 
 <Source language="bash" dark code={`
-yarn images:build
+bun run images:build
 `} />
 
 This will take all your `*.jpg` files from `src/assets/placeholders` and generate placeholders inside `public/placeholders`.

src/docs/Introduction.mdx

@@ -22,61 +22,60 @@ First you need to **kick off the generator**:
 
 ```bash
 $ mkdir new-styleguide && cd new-styleguide
-$ npx frontend-storybox@latest
+$ bun x frontend-storybox@latest
 ```
 
 If you want a good ESLint/Prettier/Cypress/Jest config, you can use the [Antistatique Frontend Development Configuration](https://github.com/antistatique/frontend-development-configuration) as so:
 
 ⚠️ Make sure everything has been added/commited before doing this
 
 ```bash
-$ npx antistatique-frontend@latest # Uncheck storybook and check stylelint, obviously
+$ bun x antistatique-frontend@latest # Uncheck storybook and check stylelint, obviously
 $ git checkout tsconfig.json
 ```
 
 ## 🔧 Requirements
 
 You need to have the following tools installed globally on your environment:
 
-- [📗 NodeJS >= 16](https://nodejs.org/en/) - JavaScript runtime used to build and run the project
-- [🐈 Yarn >= 1.22](https://yarnpkg.com/lang/en/) - Dependency manager built on top of the NPM registry
+- [🥟 Bun >= 1.0.13](https://bun.sh/) - Runtime & Dependency manager
 
 ## 🏁 Run the Project
 
 Start the following commands **in parallel** (with nicer output):
 
 ```bash
-$ yarn tailwind:start
-$ yarn storybook:start
+$ bun run tailwind:start
+$ bun run storybook:start
 ```
 
 **OR** (with uglier output)
 
 ```bash
-$ yarn start
+$ bun run start
 ```
 
 And here are **all the available commands**:
 
-- `yarn clean`: Purge build packages cache
-- `yarn tailwind:build`: Build Production Tailwind project
-- `yarn tailwind:start`: Start Tailwind development mode
-- `yarn storybook:start`: Start Storybook
-- `yarn storybook:build`: Build Storybook static deliverable
-- `yarn modules:build`: Build React modules
-- `yarn start`: Start all development processes
-- `yarn build`: Build all deliverables
-- `yarn build:assets`: Build all deliverables
-- `yarn build:styleguide`: Build styleguide for deployment
-- `yarn generate`: Generate new component (select `Blank` for ease)
+- `bun run clean`: Purge build packages cache
+- `bun run tailwind:build`: Build Production Tailwind project
+- `bun run tailwind:start`: Start Tailwind development mode
+- `bun run storybook:start`: Start Storybook
+- `bun run storybook:build`: Build Storybook static deliverable
+- `bun run modules:build`: Build React modules
+- `bun run start`: Start all development processes
+- `bun run build`: Build all deliverables
+- `bun run build:assets`: Build all deliverables
+- `bun run build:styleguide`: Build styleguide for deployment
+- `bun run generate`: Generate new component (select `Blank` for ease)
 
 
 ## 📦 Deliver Styleguide
 
 To deliver your styleguide, simply hit the following command:
 
 ```bash
-$ yarn build
+$ bun run build
 ```
 
 In `./public`, it will output you a `CSS` folder that includes a `styles.css` with your custom CSS and the *purged Tailwind utilities.
@@ -90,5 +89,5 @@ It will also take all the modules available in `./src/modules/` and create indep
 You can easily (and freely) **deploy your styleguide on Netlify**.
 
 Choose the following **options**:
-- Build command: `yarn build:styleguide`
+- Build command: `bun run build:styleguide`
 - Publish directory: `storybook-static/`