@toptal/davinci-storybook 5.2.2 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @toptal/davinci-storybook
 
+## 7.0.0
+
+### Major Changes
+
+- [#2643](https://github.com/toptal/davinci/pull/2643) [`ab9666f`](https://github.com/toptal/davinci/commit/ab9666f999e7a610f6068e0145200257d8511b46) Thanks [@rocodesign](https://github.com/rocodesign)!
+  Migrate package manager from Yarn to pnpm
+  **WHAT (breaking change):**
+  - switch package manager from Yarn to pnpm across the entire Davinci monorepo
+  - add `pnpm-workspace.yaml`, `.npmrc`, and `packageManager` field for corepack support
+  - convert Yarn `resolutions` to `pnpm.overrides` in root `package.json`
+  - update lerna `npmClient` from `yarn` to `pnpm`
+  - replace `yarn` with `pnpm` in root scripts (postinstall, test, test:unit:update)
+  **HOW to update:**
+  - install pnpm (`corepack enable` or `npm install -g pnpm@10.6.1`)
+  - replace `yarn install` with `pnpm install` in local workflows
+  - replace `yarn <script>` with `pnpm <script>` when running commands
+
+### Patch Changes
+
+- Updated dependencies [[`ab9666f`](https://github.com/toptal/davinci/commit/ab9666f999e7a610f6068e0145200257d8511b46)]:
+  - @toptal/davinci-cli-shared@3.0.0
+  - @toptal/davinci-storybook-addons@5.0.0
+  - @toptal/davinci-storybook-theme@4.0.0
+  - @toptal/davinci-workspace-root@2.0.0
+
+## 6.0.0
+
+### Major Changes
+
+- [#2633](https://github.com/toptal/davinci/pull/2633) [`bd08a93`](https://github.com/toptal/davinci/commit/bd08a9352e73fe136145b66c26eb7a1a24814aa4) Thanks [@javier-delgado](https://github.com/javier-delgado)!
+  Upgraded Tailwind to V4
+  - updated `tailwindcss` peer dependency from `^3.4.10` to `^4.2.1`
+  - updated `picasso` peer dependency
+
 ## 5.2.2
 
 ### Patch Changes

package/README.md

@@ -17,17 +17,17 @@ It will install storybook along with predefined addons.
 Simple run
 
 ```shell
-yarn storybook
+pnpm storybook
 ```
 
 To run storybook only for a particular `stories` file
 
 ```shell
-yarn storybook -s hosts/host-1/src/stories/Button.stories.tsx
+pnpm storybook -s hosts/host-1/src/stories/Button.stories.tsx
 ```
 
 To run storybook from a particular directory:
 
 ```shell
-yarn storybook -s hosts/host-1/src/stories/
+pnpm storybook -s hosts/host-1/src/stories/
 ```

package/bin/davinci-storybook-init.mjs

@@ -11,11 +11,10 @@ let spinner = ora('Installing davinci dependencies...').start()
 
 try {
   runSync(
-    'yarn',
+    'pnpm',
     [
       'add',
-      '--dev',
-      '-W',
+      '--save-dev',
       '@toptal/davinci-skeleton@latest',
       '@toptal/davinci-qa@latest',
       '@toptal/davinci-storybook@latest',
@@ -112,7 +111,7 @@ fs.writeFileSync(
 spinner = ora('Installing packages...').start()
 
 try {
-  runSync('yarn', ['install'], {
+  runSync('pnpm', ['install'], {
     stdio: undefined,
     stdout: 'ignore',
   })

package/docs/visual-testing.md

@@ -42,7 +42,7 @@ To make this check required you need to add it repository settings (**Admin perm
 
 If you have followed instructions from `Basic setup`, you will have generated GitHub workflow `davinci-storybook-visual.yml` which will trigger visual testing for every PR. It also will trigger on merge to master to set correct `commit sha` to Happo.
 
-Or if you want to use custom GitHub workflow, it just needs to call `yarn storybook:test:visual:ci`
+Or if you want to use custom GitHub workflow, it just needs to call `pnpm storybook:test:visual:ci`
 
 ## Tips and Tricks
 
@@ -50,4 +50,4 @@ We strongly recommend reading [tips and tricks](https://docs.happo.io/docs/story
 
 ## Local debugging
 
-To create screenshots locally, you can run `yarn storybook:test:visual`, but first you need to setup env variables: `HAPPO_PROJECT`, `HAPPO_API_KEY`, `HAPPO_API_SECRET`
+To create screenshots locally, you can run `pnpm storybook:test:visual`, but first you need to setup env variables: `HAPPO_PROJECT`, `HAPPO_API_KEY`, `HAPPO_API_SECRET`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/davinci-storybook",
-  "version": "5.2.2",
+  "version": "7.0.0",
   "keywords": [
     "essentials",
     "storybook",
@@ -25,15 +25,7 @@
     "docs",
     "CHANGELOG.md"
   ],
-  "scripts": {
-    "build-storybook": "storybook build",
-    "storybook": "storybook dev -p 6006"
-  },
   "dependencies": {
-    "@toptal/davinci-cli-shared": "^2.6.1",
-    "@toptal/davinci-storybook-addons": "^4.0.1",
-    "@toptal/davinci-storybook-theme": "^3.0.1",
-    "@toptal/davinci-workspace-root": "^1.0.1",
     "acorn": "^8.8.0",
     "acorn-walk": "^8.2.0",
     "find-up": "^5.0.0",
@@ -43,7 +35,11 @@
     "js-yaml": "^4.1.1",
     "ora": "^5.4.1",
     "ws": "^6.2.3",
-    "yargs": "17.7.2"
+    "yargs": "17.7.2",
+    "@toptal/davinci-cli-shared": "^3.0.0",
+    "@toptal/davinci-storybook-addons": "^5.0.0",
+    "@toptal/davinci-storybook-theme": "^4.0.0",
+    "@toptal/davinci-workspace-root": "^2.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.17.12",
@@ -60,6 +56,7 @@
     "@storybook/react-webpack5": "^8.6.9",
     "@storybook/test": "^8.6.9",
     "@swc/plugin-styled-components": "^9.1.0",
+    "@tailwindcss/postcss": "^4.2.1",
     "autoprefixer": "^10.4.15",
     "babel-plugin-styled-components": "^2.1.4",
     "postcss": "^8.4.32",
@@ -69,7 +66,7 @@
     "react-dom": ">= 16 < 19",
     "react-refresh": "^0.14.0",
     "storybook": "^8.6.9",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^4.2.1",
     "webpack": "^5.94.0"
   },
   "peerDependencies": {
@@ -84,14 +81,19 @@
     "@storybook/react": "8",
     "@storybook/react-webpack5": "8",
     "@swc/plugin-styled-components": "^9.1.0",
+    "@tailwindcss/postcss": "^4.2.1",
     "babel-plugin-styled-components": "^2.1.4",
     "happo-plugin-storybook": "^4.4.3",
     "react-refresh": "^0.14.0",
     "storybook": "8",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^4.2.1",
     "webpack": "^5.94.0"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build-storybook": "storybook build",
+    "storybook": "storybook dev -p 6006"
   }
-}
+}

package/src/webpack.conf.js

@@ -56,9 +56,7 @@ const webpackFinal = config => {
         postcssOptions: {
           config: false,
           plugins: {
-            tailwindcss: {
-              config: tailwindConfigPath,
-            },
+            '@tailwindcss/postcss': {},
             autoprefixer: {},
           },
         },