Update README.md

Signed-off-by: markoburcul <marko@status.im>

README.md

@@ -6,13 +6,13 @@ This monorepo contains packages for building web applications in the Status ecos
 
 ## Packages
 
-| Name                                                   | `npm`                                                                                                                     | Description                                                                                                                                                                   |
-| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`@status-im/components`](./packages/components)       | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components) | Component library built with Radix UI, React Aria, Tailwind CSS.                                                                                                              |
-| [`@status-im/js`](./packages/status-js)                | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                 | Libary for Waku protocol integration and blockchain interactions.                                                                                                             |
-| [`@status-im/icons`](./packages/icons)                 | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)           | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
-| [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)     | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |
-| [`@status-im/eslint-config`](./packages/eslint-config) |                                                                                                                           | Shared ESLint configuration for consistent code style across projects.                                                                                                        |
+| Name                                                   | `npm`                                                                                                                               | Description                                                                                                                                                                   |
+| ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@status-im/components`](./packages/components)       | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components)           | Component library built with Radix UI, React Aria, Tailwind CSS.                                                                                                              |
+| [`@status-im/js`](./packages/status-js)                | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                           | Libary for Waku protocol integration and blockchain interactions.                                                                                                             |
+| [`@status-im/icons`](./packages/icons)                 | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)                     | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
+| [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)               | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |
+| [`@status-im/eslint-config`](./packages/eslint-config) | [![npm version](https://img.shields.io/npm/v/@status-im/eslint-config.svg)](https://www.npmjs.com/package/@status-im/eslint-config) | Shared ESLint configuration for consistent code style across projects.                                                                                                        |
 
 ## Apps
 

apps/connector/Jenkinsfile

@@ -1,5 +1,7 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.9.1'
+library 'status-jenkins-lib@v1.9.11'
+
+def changesDetected = false
 
 pipeline {
   agent { label 'linux' }
@@ -27,47 +29,120 @@ pipeline {
   }
 
   stages {
+    stage('Check Changed Files') {
+        steps {
+          script {
+            // Get the list of changed files
+            def changedFiles = sh(
+                script: "git diff --name-only origin/main...HEAD",
+                returnStdout: true
+            ).trim()
+            
+            // Check if the changes are relevant
+            def isRelevant = changedFiles.split('\n').any { file ->
+                file.startsWith('apps/connector/')
+            }
+
+            // If no relevant changes, skip the build
+            if (isRelevant) {
+                changesDetected = true
+            }
+          }
+        }
+    }
+
     stage('Install') {
-      steps { script {
-        nix.shell('yarn install --frozen-lockfile', pure: false)
-      } }
+      when {
+          expression { changesDetected }
+      }
+      steps {
+          dir("${env.WORKSPACE}/apps/connector") {
+            script {
+              nix.shell(
+                'yarn install --frozen-lockfile',
+                pure: false,
+                entryPoint: "${env.WORKSPACE}/apps/connector/shell.nix"
+              )
+            }
+          }
+      }
     }
 
     stage('Build') {
-      steps { script {
-        nix.shell('yarn build:chrome', pure: false)
-      } }
+      when {
+          expression { changesDetected }
+      }
+      steps {
+          dir("${env.WORKSPACE}/apps/connector") {
+            script {
+              nix.shell(
+                'yarn build:chrome',
+                pure: false,
+                entryPoint: "${env.WORKSPACE}/apps/connector/shell.nix"
+              )
+            }
+          }
+      }
     }
 
     stage('Zip') {
+      when {
+          expression { changesDetected }
+      }
       steps {
-        zip(
-          zipFile: env.ZIP_NAME,
-          dir: 'build/chrome-mv3-prod',
-          archive: false,
-        )
+        dir("${env.WORKSPACE}/apps/connector") {
+          zip(
+            zipFile: env.ZIP_NAME,
+            dir: 'build/chrome-mv3-prod',
+            archive: false,
+          )
+        }
       }
     }
 
     stage('Archive') {
+      when {
+          expression { changesDetected }
+      }
       steps {
-        archiveArtifacts(
-          artifacts: env.ZIP_NAME,
-          fingerprint: true,
-        )
+        dir("${env.WORKSPACE}/apps/connector") {
+          archiveArtifacts(
+            artifacts: env.ZIP_NAME,
+            fingerprint: true,
+          )
+        }
       }
     }
 
     stage('Upload') {
-      steps { script {
-        env.PKG_URL = s5cmd.upload(env.ZIP_NAME)
-      } }
+      when {
+          expression { changesDetected }
+      }
+      steps {
+        dir("${env.WORKSPACE}/apps/connector") {
+          script {
+            env.PKG_URL = s5cmd.upload(env.ZIP_NAME)
+          }
+        }
+      }
     }
   }
 
   post {
-    success { script { github.notifyPR(true) } }
-    failure { script { github.notifyPR(false) } }
+    success {
+      script {
+        if(changesDetected) {
+          github.notifyPR(true) 
+        } 
+      }
+    }
+    failure {
+      script {
+        if(changesDetected) {
+          github.notifyPR(false) 
+        } 
+      }
+    }
     cleanup { cleanWs() }
   }
 }

packages/components/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @status-im/components
 
+## 1.0.6
+
+### Patch Changes
+
+- 7f21132: fix `<Shortcut />`icon prop and symbol centering
+
+## 1.0.5
+
+### Patch Changes
+
+- 3ad28ea: chore: Remove flex-1 class from button component (#602)
+
+## 1.0.4
+
+### Patch Changes
+
+- a3f9252: fix `<Button />` icon color for blur variant
+
+## 1.0.3
+
+### Patch Changes
+
+- 8f1980e: Update fontSize in tailwind.config.ts
+
 ## 1.0.2
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@status-im/components",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "license": "MPL-2.0",
   "sideEffects": [
     "*.css"

packages/components/src/button/button.tsx

@@ -76,7 +76,7 @@ function Button(
           {iconBefore}
         </span>
       )}
-      <span className="flex-1 whitespace-nowrap">{children}</span>
+      <span className="whitespace-nowrap">{children}</span>
       {iconAfter && (
         <span className={iconStyles({ size, placement: 'after', variant })}>
           {iconAfter}
@@ -143,16 +143,18 @@ const iconStyles = cva({
     variant: {
       primary: ['text-blur-white/70'],
       positive: ['text-blur-white/70'],
-      grey: ['text-neutral-50'],
-      darkGrey: [
+      grey: [
         'text-neutral-50',
+        'blur:text-neutral-80/40',
         'dark:text-neutral-40',
-        'blur:dark:text-neutral-80/40',
+        'blur:dark:text-white-40',
       ],
+      darkGrey: ['text-neutral-40'],
       outline: [
         'text-neutral-50',
+        'blur:text-neutral-80/40',
         'dark:text-neutral-40',
-        'blur:dark:text-neutral-80/40',
+        'blur:dark:text-white-40',
       ],
       ghost: ['text-neutral-50'],
       danger: ['text-blur-white/70'],

packages/components/src/shortcut/shortcut.stories.tsx

@@ -9,7 +9,7 @@ const variants = ['primary', 'secondary', 'gray'] as const
 // eslint-disable-next-line react/display-name
 const renderVariant = (variant: (typeof variants)[number]) => (props: any) => (
   <div className="flex items-center gap-2">
-    <Shortcut {...props} variant={variant} icon={CommandIcon} />
+    <Shortcut {...props} variant={variant} icon={<CommandIcon />} />
     <Shortcut {...props} variant={variant} symbol="K" />
   </div>
 )

packages/components/src/shortcut/shortcut.tsx

@@ -1,13 +1,14 @@
-import { forwardRef } from 'react'
+import { cloneElement, forwardRef } from 'react'
 
 import { match, P } from 'ts-pattern'
 
 import { cva } from '../utils/variants'
 
+import type { IconElement } from '../types'
 import type { VariantProps } from '../utils/variants'
 
 const styles = cva({
-  base: 'flex size-4 flex-shrink-0 items-center justify-center rounded-6 border',
+  base: 'grid size-4 flex-shrink-0 place-items-center rounded-6 border',
   variants: {
     variant: {
       primary: [
@@ -32,7 +33,7 @@ const styles = cva({
 type Props = VariantProps<typeof styles> &
   (
     | {
-        icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+        icon: IconElement
         symbol?: never
       }
     | {
@@ -42,15 +43,17 @@ type Props = VariantProps<typeof styles> &
   )
 
 const Shortcut = (props: Props, ref: React.Ref<HTMLDivElement>) => {
-  const { variant = 'primary', ...rest } = props
+  const { variant = 'primary' } = props
 
   return (
-    <div className={styles({ variant })} ref={ref} {...rest}>
+    <div className={styles({ variant })} ref={ref}>
       {match(props)
         .with({ symbol: P.string }, ({ symbol }) => (
           <span className="text-11 font-medium">{symbol}</span>
         ))
-        .with({ icon: P._ }, ({ icon: Icon }) => <Icon className="size-3" />)
+        .with({ icon: P._ }, ({ icon }) =>
+          cloneElement(icon, { className: 'size-3' }),
+        )
         .exhaustive()}
     </div>
   )

packages/components/tailwind.config.ts

@@ -34,14 +34,62 @@ export default {
     },
 
     fontSize: {
-      88: ['5.5rem', { lineHeight: '5.25rem', letterSpacing: '-0.1155rem' }],
-      64: ['4rem', { lineHeight: '4.25rem', letterSpacing: '-0.08rem' }],
-      40: ['2.5rem', { lineHeight: '2.75rem', letterSpacing: '-0.05rem' }],
-      27: ['1.6875rem', { lineHeight: '2rem', letterSpacing: '0rem' }],
-      19: ['1.1875rem', { lineHeight: '1.75rem', letterSpacing: '0rem' }],
-      15: ['0.9375rem', { lineHeight: '1.36rem', letterSpacing: '0rem' }],
-      13: ['0.8125rem', { lineHeight: '1.1375rem', letterSpacing: '0rem' }],
-      11: ['0.6875rem', { lineHeight: '1', letterSpacing: '0rem' }],
+      88: [
+        '5.5rem',
+        {
+          lineHeight: '5.25rem',
+          letterSpacing: '-0.1155rem',
+        },
+      ],
+      64: [
+        '4rem',
+        {
+          lineHeight: '4.25rem',
+          letterSpacing: '-0.08rem',
+        },
+      ],
+      40: [
+        '2.5rem',
+        {
+          lineHeight: '2.75rem',
+          letterSpacing: '-0.05rem',
+        },
+      ],
+      27: [
+        '1.6875rem',
+        {
+          lineHeight: '2rem',
+          letterSpacing: '-0.0354375rem',
+        },
+      ],
+      19: [
+        '1.1875rem',
+        {
+          lineHeight: '1.75rem',
+          letterSpacing: '-0.019rem',
+        },
+      ],
+      15: [
+        '0.9375rem',
+        {
+          lineHeight: '1.359375rem',
+          letterSpacing: '-0.0084375rem',
+        },
+      ],
+      13: [
+        '0.8125rem',
+        {
+          lineHeight: '1.1375rem',
+          letterSpacing: '-0.0024375rem',
+        },
+      ],
+      11: [
+        '0.6875rem',
+        {
+          lineHeight: '0.97625rem',
+          letterSpacing: '-0.0034375rem',
+        },
+      ],
     },
 
     opacity: {},