Merge branch 'master' into ci-switch-trigger-jenkins-job

.storybook/main.js

@@ -60,6 +60,26 @@ module.exports = {
 
     const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions
 
+    const cssRule = config.module.rules.find(
+      rule => rule.test && rule.test.toString().includes('.css')
+    )
+
+    // Use the 'postcss-loader' to process TailwindCSS
+    cssRule.use.push({
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: {
+          config: false,
+          plugins: {
+            tailwindcss: {
+              config: require.resolve('../tailwind.config.js'),
+            },
+            autoprefixer: {},
+          },
+        },
+      },
+    })
+
     return {
       ...config,
       module: {
@@ -162,6 +182,10 @@ module.exports = {
             __dirname,
             '../packages/picasso-query-builder/src'
           ),
+          '@toptal/picasso-tailwind': path.resolve(
+            __dirname,
+            '../packages/picasso-tailwind/src'
+          ),
         },
       },
     }

.storybook/preview.js

@@ -2,6 +2,7 @@ import React from 'react'
 import 'github-markdown-css/github-markdown-light.css'
 import 'happo-plugin-storybook/register'
 import { getCheckpoints } from '../packages/picasso/src/test-utils/get-happo-targets/get-checkpoints.ts'
+import './styles.css'
 
 import Picasso from '@toptal/picasso-provider'
 
@@ -62,6 +63,7 @@ const withPicasso = story => (
     fixViewport={false}
     loadFavicon={false}
     preventPageWidthChangeOnScrollbar={false}
+    injectFirst
   >
     {story()}
   </Picasso>

.storybook/styles.css

@@ -0,0 +1,5 @@
+/* we can't apply reset.css here as it would override current styles */
+/* @tailwind base; */
+
+@tailwind components;
+@tailwind utilities;

cypress.config.mjs

@@ -40,7 +40,7 @@ export default defineConfig({
                     plugins: [
                       '@babel/plugin-proposal-nullish-coalescing-operator',
                       '@babel/plugin-proposal-optional-chaining',
-                      'istanbul'
+                      'istanbul',
                     ],
                   },
                 },
@@ -52,7 +52,20 @@ export default defineConfig({
             },
             {
               test: /\.css$/i,
-              use: ['style-loader', 'css-loader'],
+              use: ['style-loader', 'css-loader', {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    config: false,
+                    plugins: {
+                      tailwindcss: {
+                        config: './tailwind.config.js',
+                      },
+                      autoprefixer: {},
+                    },
+                  },
+                },
+              }],
             },
           ],
         },

package.json

@@ -89,6 +89,7 @@
     "@toptal/davinci-engine": "^10.9.0",
     "@toptal/davinci-qa": "^16.2.4",
     "@toptal/davinci-syntax": "^21.0.8",
+    "@toptal/picasso-tailwind": "1.0.1",
     "@types/debounce": "^3.0.0",
     "@types/esprima": "^4.0.3",
     "@types/happo-cypress": "^4.1.3",
@@ -121,6 +122,8 @@
     "jest-canvas-mock": "^2.5.0",
     "lerna": "^7.4.2",
     "madge": "^6.1.0",
+    "postcss": "^8.4.32",
+    "postcss-loader": "^7.3.3",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
@@ -133,12 +136,13 @@
     "react-test-renderer": "^18.2.0",
     "remark-gfm": "^4.0.0",
     "syncpack": "^11.2.1",
+    "tailwindcss": "^3.3.6",
     "thread-loader": "^4.0.2",
     "ts-loader": "^9.5.1",
     "typescript": "~4.7.0",
     "url-loader": "^4.1.1",
     "yargs": "^17.5.1",
-    "yarn-deduplicate": "^3.1.0"
+    "yarn-deduplicate": "^6.0.2"
   },
   "lint-staged": {
     "{**/*.{js,jsx,ts,tsx},.changeset/*.md}": [
@@ -150,7 +154,7 @@
     "lodash": "^4.17.21",
     "**/marksy/marked": "^0.7.0",
     "**/find-babel-config/json5": "1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "**/default-browser-id/meow/trim-newlines": "^3",
     "**/@types/unist": "3.0.0",
     "@storybook/react": "^6.5.15",

packages/picasso-pictograms/package.json

@@ -28,7 +28,7 @@
     "react": ">=16.12.0 < 19.0.0"
   },
   "devDependencies": {
-    "@toptal/picasso": "42.2.3",
+    "@toptal/picasso": "42.2.4",
     "storybook-readme": "^5.0.9",
     "@babel/types": "^7.20.7"
   },

packages/picasso-tailwind/package.json

@@ -27,7 +27,7 @@
     "prepublishOnly": "if [ -d dist-package ]; then cp ./package.json ./dist-package/package.json; fi"
   },
   "devDependencies": {
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.3.6"
   },
   "peerDependencies": {
     "tailwindcss": "^3.3.5"

packages/picasso/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 42.2.4
+
+### Patch Changes
+
+- [#4067](https://github.com/toptal/picasso/pull/4067) [`60d622ed4`](https://github.com/toptal/picasso/commit/60d622ed47c1c908304464877cfd474bf84863f2) Thanks [@iatanas0v](https://github.com/iatanas0v)!
+
+### picasso-shared types
+
+- fixed `data-private` type to allow `lipsum` value as well
+- Updated dependencies [[`60d622ed4`](https://github.com/toptal/picasso/commit/60d622ed47c1c908304464877cfd474bf84863f2)]:
+  - @toptal/[email protected]
+
 ## 42.2.3
 
 ### Patch Changes

packages/picasso/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "42.2.3",
+  "version": "42.2.4",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",
@@ -31,7 +31,7 @@
     "typescript": "~4.7.0"
   },
   "dependencies": {
-    "@toptal/picasso-shared": "13.1.1",
+    "@toptal/picasso-shared": "13.1.2",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.3.1",
     "d3": "^7.8.2",

packages/picasso/src/CarouselNavigation/styles.ts

@@ -15,6 +15,7 @@ export default ({ palette, transitions }: Theme) =>
         backgroundColor: palette.blue.main,
         opacity: 0.2,
         '&.active': {
+          backgroundColor: palette.blue.main,
           opacity: 1,
         },
         '&:hover:not(.active)': {

packages/picasso/src/OutlinedInput/styles.ts

@@ -73,6 +73,7 @@ PicassoProvider.override(
       },
       error: {
         backgroundColor: 'transparent',
+        color: palette.common.black,
         '&$focused': {
           '& $notchedOutline': {
             borderWidth: '1px',

packages/picasso/src/test-utils/TestingPicasso.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Picasso from '@toptal/picasso-provider'
 import type { TextLabelProps } from '@toptal/picasso-shared'
+import './styles.css'
 
 export type Props = TextLabelProps & {
   children: React.ReactNode
@@ -15,6 +16,7 @@ export const TestingPicasso = ({ children, titleCase }: Props) => {
       preventPageWidthChangeOnScrollbar={false}
       titleCase={titleCase}
       disableTransitions
+      injectFirst
     >
       {children}
     </Picasso>

packages/picasso/src/test-utils/styles.css

@@ -0,0 +1,5 @@
+/* we can't apply reset.css here as it would override current styles */
+/* @tailwind base; */
+
+@tailwind components;
+@tailwind utilities;

packages/shared/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 13.1.2
+
+### Patch Changes
+
+- [#4067](https://github.com/toptal/picasso/pull/4067) [`60d622ed4`](https://github.com/toptal/picasso/commit/60d622ed47c1c908304464877cfd474bf84863f2) Thanks [@iatanas0v](https://github.com/iatanas0v)!
+
+### picasso-shared types
+
+- fixed `data-private` type to allow `lipsum` value as well
+
 ## 13.1.1
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-shared",
-  "version": "13.1.1",
+  "version": "13.1.2",
   "description": "Shared types, utils for Picasso internal usage",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-shared#readme",

packages/shared/src/types.ts

@@ -23,7 +23,7 @@ export interface BaseProps {
   /** Style applied to root element */
   style?: CSSProperties
   'data-testid'?: string
-  'data-private'?: boolean
+  'data-private'?: boolean | 'lipsum'
 }
 
 export interface JssProps {

tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['packages/**/*.{ts,tsx}'],
+  presets: [require('@toptal/picasso-tailwind')],
+  plugins: [],
+}

yarn.lock

@@ -8789,7 +8789,7 @@ comma-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz#d4c25abb679b7751c880be623c1179780fe1dd98"
   integrity sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==
 
-[email protected]:
+[email protected], commander@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
   integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
@@ -8818,7 +8818,7 @@ commander@^4.0.0, commander@^4.0.1, commander@^4.1.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
-commander@^6.1.0, commander@^6.2.1:
+commander@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
@@ -17691,10 +17691,10 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.1, nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+nanoid@^3.3.1, nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -19426,12 +19426,12 @@ postcss-values-parser@^6.0.2:
     is-url-superb "^4.0.0"
     quote-unquote "^1.0.0"
 
-postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6, postcss@^8.1.7, postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.23, postcss@^8.4.28, postcss@^8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6, postcss@^8.1.7, postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.23, postcss@^8.4.28, postcss@^8.4.31, postcss@^8.4.32:
+  version "8.4.32"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
+  integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
   dependencies:
-    nanoid "^3.3.6"
+    nanoid "^3.3.7"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
@@ -21408,7 +21408,7 @@ [email protected]:
   dependencies:
     lru-cache "^6.0.0"
 
-[email protected], semver@^7.0.0, semver@^7.1.1, semver@^7.1.2, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3, semver@^7.5.4:
+[email protected], semver@^7.0.0, semver@^7.1.1, semver@^7.1.2, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.0, semver@^7.5.3, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -22720,10 +22720,10 @@ table@^6.8.1:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@^3.3.5:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
-  integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==
+tailwindcss@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.6.tgz#4dd7986bf4902ad385d90d45fd4b2fa5fab26d5f"
+  integrity sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
@@ -24957,14 +24957,15 @@ yargs@^17.0.0, yargs@^17.3.1, yargs@^17.5.1, yargs@^17.6.2, yargs@^17.7.1, yargs
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
-yarn-deduplicate@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/yarn-deduplicate/-/yarn-deduplicate-3.1.0.tgz"
-  integrity sha512-q2VZ6ThNzQpGfNpkPrkmV7x5HT9MOhCUsTxVTzyyZB0eSXz1NTodHn+r29DlLb+peKk8iXxzdUVhQG9pI7moFw==
+yarn-deduplicate@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/yarn-deduplicate/-/yarn-deduplicate-6.0.2.tgz#63498d2d4c3a8567e992a994ce0ab51aa5681f2e"
+  integrity sha512-Efx4XEj82BgbRJe5gvQbZmEO7pU5DgHgxohYZp98/+GwPqdU90RXtzvHirb7hGlde0sQqk5G3J3Woyjai8hVqA==
   dependencies:
     "@yarnpkg/lockfile" "^1.1.0"
-    commander "^6.1.0"
-    semver "^7.3.2"
+    commander "^10.0.1"
+    semver "^7.5.0"
+    tslib "^2.5.0"
 
 yauzl@^2.10.0:
   version "2.10.0"