add apps/connector

.changeset/early-ligers-act.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+fix `<DropdowMenu.SubTrigger />` expanded state 

.changeset/famous-maps-burn.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+add `<DropdownMenu.Label />`

.changeset/nasty-dots-eat.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+add dark grey dropdown button

.changeset/stupid-pumpkins-grow.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+fix `<Button />` text alignment

.changeset/warm-countries-cry.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+Add `<Switch />` and `<DropdownMenu.SwitchItem />`

.vscode/settings.json

@@ -9,6 +9,10 @@
   ],
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    "clsx\\(([^)]*)\\)"
+  ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
 }

README.md

@@ -5,7 +5,7 @@
 This monorepo contains packages for building web applications in the Status ecosystem. These packages can be used separately or combined to create consistent and beautiful user interfaces.
 
 ## Packages
-test
+
 | 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.                                                                                                              |

apps/connector/Jenkinsfile

@@ -1,7 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.9.11'
-
-def changesDetected = false
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
   agent { label 'linux' }
@@ -29,108 +27,47 @@ pipeline {
   }
 
   stages {
-    stage('Check changes') {
-      when {
-          changeset pattern: "apps/connector/**", comparator: "GLOB"
-      }
-      steps {
-        script {
-            changesDetected = true
-        }
-      }
-    }
     stage('Install') {
-      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"
-              )
-            }
-          }
-      }
+      steps { script {
+        nix.shell('yarn install --frozen-lockfile', pure: false)
+      } }
     }
 
     stage('Build') {
-      when {
-          expression { changesDetected }
-      }
-      steps {
-          dir("${env.WORKSPACE}/apps/connector") {
-            script {
-              nix.shell(
-                'yarn build:chrome',
-                pure: false,
-                entryPoint: "${env.WORKSPACE}/apps/connector/shell.nix"
-              )
-            }
-          }
-      }
+      steps { script {
+        nix.shell('yarn build:chrome', pure: false)
+      } }
     }
 
     stage('Zip') {
-      when {
-          expression { changesDetected }
-      }
       steps {
-        dir("${env.WORKSPACE}/apps/connector") {
-          zip(
-            zipFile: env.ZIP_NAME,
-            dir: 'build/chrome-mv3-prod',
-            archive: false,
-          )
-        }
+        zip(
+          zipFile: env.ZIP_NAME,
+          dir: 'build/chrome-mv3-prod',
+          archive: false,
+        )
       }
     }
 
     stage('Archive') {
-      when {
-          expression { changesDetected }
-      }
       steps {
-        dir("${env.WORKSPACE}/apps/connector") {
-          archiveArtifacts(
-            artifacts: env.ZIP_NAME,
-            fingerprint: true,
-          )
-        }
+        archiveArtifacts(
+          artifacts: env.ZIP_NAME,
+          fingerprint: true,
+        )
       }
     }
 
     stage('Upload') {
-      when {
-          expression { changesDetected }
-      }
-      steps {
-        dir("${env.WORKSPACE}/apps/connector") {
-          script {
-            env.PKG_URL = s5cmd.upload(env.ZIP_NAME)
-          }
-        }
-      }
+      steps { script {
+        env.PKG_URL = s5cmd.upload(env.ZIP_NAME)
+      } }
     }
   }
 
   post {
-    success {
-      script {
-        if(changesDetected) {
-          github.notifyPR(true) 
-        } 
-      }
-    }
-    success {
-      script {
-        if(changesDetected) {
-          github.notifyPR(false) 
-        } 
-      }
-    }
+    success { script { github.notifyPR(true) } }
+    failure { script { github.notifyPR(false) } }
     cleanup { cleanWs() }
   }
 }

apps/connector/package.json

@@ -1,12 +1,11 @@
 {
-  "name": "connector",
+  "name": "status-browser-extension",
   "version": "0.0.1",
   "license": "MPL-2.0",
   "private": true,
   "repository": {
     "type": "git",
-    "url": "https://github.com/status-im/status-web.git",
-    "directory": "apps/connector"
+    "url": "https://github.com/status-im/status-browser-extension.git"
   },
   "scripts": {
     "dev:chrome": "plasmo dev --target=chrome-mv3",

packages/components/CHANGELOG.md

@@ -1,34 +1,5 @@
 # @status-im/components
 
-## 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
-
-- 15c9640: Switch icon button from aria button to regular button
-
-## 1.0.1
-
-### Patch Changes
-
-- 447cce7: fix `<DropdowMenu.SubTrigger />` expanded state
-- 1ce026c: add `<DropdownMenu.Label />`
-- 4e53b3e: Fix tag and tabs
-- 273db4e: add dark grey dropdown button
-- 4452f05: fix `<Button />` text alignment
-- 433558a: Add `<Switch />` and `<DropdownMenu.SwitchItem />`
-
 ## 1.0.0
 
 ### Major Changes

packages/components/package.json

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

packages/components/src/button/button.tsx

@@ -14,7 +14,7 @@ type Variants = VariantProps<typeof styles>
 type Props = {
   size?: Variants['size']
   variant?: Variants['variant']
-  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  onPress?: () => void
 } & (
   | {
       children: React.ReactNode
@@ -143,18 +143,16 @@ const iconStyles = cva({
     variant: {
       primary: ['text-blur-white/70'],
       positive: ['text-blur-white/70'],
-      grey: [
+      grey: ['text-neutral-50'],
+      darkGrey: [
         'text-neutral-50',
-        'blur:text-neutral-80/40',
         'dark:text-neutral-40',
-        'blur:dark:text-white-40',
+        'blur:dark:text-neutral-80/40',
       ],
-      darkGrey: ['text-neutral-40'],
       outline: [
         'text-neutral-50',
-        'blur:text-neutral-80/40',
         'dark:text-neutral-40',
-        'blur:dark:text-white-40',
+        'blur:dark:text-neutral-80/40',
       ],
       ghost: ['text-neutral-50'],
       danger: ['text-blur-white/70'],

packages/components/src/icon-button/icon-button.stories.tsx

@@ -1,5 +1,4 @@
 import { BoldIcon } from '@status-im/icons/20'
-import { action } from '@storybook/addon-actions'
 
 import { IconButton } from './icon-button'
 
@@ -11,13 +10,7 @@ const sizes = ['40', '32', '24'] as const
 const renderVariant = (variant: string) => (props: any) => (
   <div className="flex items-center gap-4">
     {sizes.map(size => (
-      <IconButton
-        {...props}
-        key={size}
-        variant={variant}
-        icon={<BoldIcon />}
-        onPress={action('press')}
-      />
+      <IconButton {...props} key={size} variant={variant} icon={BoldIcon} />
     ))}
   </div>
 )
@@ -26,7 +19,7 @@ const meta = {
   component: IconButton,
   title: 'Components/Icon Button',
   args: {
-    disabled: false,
+    isDisabled: false,
   },
 
   parameters: {

packages/components/src/icon-button/icon-button.tsx

@@ -3,36 +3,27 @@
 import { forwardRef } from 'react'
 
 import { cva } from 'cva'
+import { Button as AriaButton } from 'react-aria-components'
 
 import type { IconElement } from '../types'
 import type { VariantProps } from 'cva'
 import type { Ref } from 'react'
+import type { ButtonProps as AriaButtonProps } from 'react-aria-components'
 
 type Variants = VariantProps<typeof styles>
 
-type Props = {
+type Props = AriaButtonProps & {
   variant?: Variants['variant']
   icon: IconElement
-  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void
 }
 
-type ButtonProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>
-
-const IconButton = (
-  props: Props & ButtonProps,
-  ref: Ref<HTMLButtonElement>,
-) => {
-  const { variant = 'default', onPress: onClick, icon, ...buttonProps } = props
+const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
+  const { variant = 'default', icon, ...buttonProps } = props
 
   return (
-    <button
-      {...buttonProps}
-      onClick={onClick}
-      ref={ref}
-      className={styles({ variant })}
-    >
+    <AriaButton {...buttonProps} ref={ref} className={styles({ variant })}>
       {icon}
-    </button>
+    </AriaButton>
   )
 }
 
@@ -46,16 +37,16 @@ const styles = cva({
   variants: {
     variant: {
       default: [
-        'border-transparent bg-neutral-10 text-neutral-50 active:border-neutral-20 active:bg-neutral-10 active:text-neutral-100 hover:bg-neutral-20',
-        'dark:bg-neutral-90 dark:text-neutral-40 dark:active:border-neutral-60 dark:active:bg-neutral-80/70 dark:active:text-white-100 dark:hover:bg-neutral-80',
+        'border-transparent bg-neutral-10 text-neutral-50 hover:bg-neutral-20 pressed:border-neutral-20 pressed:bg-neutral-10 pressed:text-neutral-100',
+        'dark:bg-neutral-90 dark:text-neutral-40 dark:hover:bg-neutral-80 dark:pressed:border-neutral-60 dark:pressed:bg-neutral-80/70 dark:pressed:text-white-100',
       ],
       outline: [
-        'border-neutral-30 text-neutral-50 active:border-neutral-20 active:bg-neutral-10 active:text-neutral-100 hover:border-neutral-40',
-        'dark:border-neutral-70 dark:text-neutral-40 dark:active:border-neutral-60 dark:active:bg-neutral-80/70 dark:active:text-white-100 dark:hover:bg-neutral-60',
+        'border-neutral-30 text-neutral-50 hover:border-neutral-40 pressed:border-neutral-20 pressed:bg-neutral-10 pressed:text-neutral-100',
+        'dark:border-neutral-70 dark:text-neutral-40 dark:hover:bg-neutral-60 dark:pressed:border-neutral-60 dark:pressed:bg-neutral-80/70 dark:pressed:text-white-100',
       ],
       ghost: [
-        'border-transparent text-neutral-50 active:border-neutral-20 active:bg-neutral-10 active:text-neutral-100 hover:bg-neutral-10',
-        'dark:text-neutral-40 dark:active:border-neutral-60 dark:active:bg-neutral-80/70 dark:active:text-white-100 dark:hover:bg-neutral-80/70',
+        'border-transparent text-neutral-50 hover:bg-neutral-10 pressed:border-neutral-20 pressed:bg-neutral-10 pressed:text-neutral-100',
+        'dark:text-neutral-40 dark:hover:bg-neutral-80/70 dark:pressed:border-neutral-60 dark:pressed:bg-neutral-80/70 dark:pressed:text-white-100',
       ],
     },
   },

packages/components/src/tabs/tabs.tsx

@@ -101,7 +101,7 @@ Trigger.displayName = Tabs.Trigger.displayName
 const tabStyles = cva({
   base: [
     'group inline-flex items-center gap-1 whitespace-nowrap',
-    'disabled:opacity-[.3]',
+    'disabled:pointer-events-none disabled:opacity-[.3]',
   ],
   variants: {
     variant: {

packages/components/src/tag/tag.stories.tsx

@@ -1,17 +1,15 @@
 import { PlaceholderIcon } from '@status-im/icons/20'
-import { action } from '@storybook/addon-actions'
 
 import { Tag } from './tag'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-const meta: Meta<typeof Tag> = {
+const meta = {
   component: Tag,
   title: 'Components/Tag',
   args: {
     label: 'Tag',
     disabled: false,
-    selected: false,
     icon: <PlaceholderIcon />,
     iconPlacement: 'left',
   },
@@ -26,17 +24,17 @@ const meta: Meta<typeof Tag> = {
   render: props => (
     <div className="flex flex-col items-start gap-4">
       <Tag {...props} />
-      <Tag {...props} onPress={action('pressed')} selected />
-      <Tag {...props} onPress={action('pressed')} disabled />
+      <Tag {...props} selected />
+      <Tag {...props} disabled />
       <Tag {...props} size="24" />
-      <Tag {...props} size="24" onPress={action('pressed')} selected />
-      <Tag {...props} size="24" onPress={action('pressed')} disabled />
+      <Tag {...props} size="24" selected />
+      <Tag {...props} size="24" disabled />
       <Tag {...props} icon={undefined} />
       <Tag {...props} label={undefined} />
       <Tag {...props} iconPlacement="right" />
     </div>
   ),
-}
+} satisfies Meta<typeof Tag>
 
 type Story = StoryObj<typeof Tag>
 

packages/components/src/tag/tag.tsx

@@ -8,83 +8,52 @@ import type { Ref } from 'react'
 
 type Variants = VariantProps<typeof styles>
 
-type Props = {
+type Props = React.ComponentProps<'button'> & {
   size?: Variants['size']
   label?: string
   icon?: IconElement
   iconPlacement?: 'left' | 'right'
+  selected?: boolean
+  onPress?: () => void
 }
 
-type ButtonProps = {
-  onPress: (event: React.MouseEvent<HTMLButtonElement>) => void
-  selected?: boolean
-  disabled?: boolean
-} & Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>
-
-type DivProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>
-
-function Tag(
-  props: Props & (ButtonProps | DivProps),
-  ref: Ref<HTMLButtonElement | HTMLDivElement>,
-) {
+const Tag = (props: Props, ref: Ref<HTMLButtonElement>) => {
   const {
     size = '32',
     icon,
     iconPlacement = 'left',
     label,
-    ...rest
+    selected = false,
+    disabled = false,
+    onPress: onClick,
+    ...buttonProps
   } = props
 
   const iconOnly = Boolean(icon && !label)
 
-  const content = (
-    <>
+  return (
+    <button
+      onClick={onClick}
+      {...buttonProps}
+      disabled={disabled}
+      ref={ref}
+      data-selected={selected}
+      className={styles({ size, selected, disabled, iconOnly })}
+    >
       {icon && iconPlacement === 'left' && (
         <span className={iconStyles({ size, placement: 'left', iconOnly })}>
           {cloneElement(icon)}
         </span>
       )}
+
       {label && <span className="flex-1 whitespace-nowrap">{label}</span>}
+
       {icon && iconPlacement === 'right' && (
         <span className={iconStyles({ size, placement: 'right', iconOnly })}>
           {cloneElement(icon)}
         </span>
       )}
-    </>
-  )
-
-  if ('onPress' in props) {
-    const { selected, disabled, ...buttonProps } = props as ButtonProps
-
-    return (
-      <button
-        {...buttonProps}
-        onClick={props.onPress}
-        ref={ref as Ref<HTMLButtonElement>}
-        data-selected={selected ? selected : undefined}
-        className={styles({
-          size,
-          selected,
-          disabled,
-          iconOnly,
-        })}
-      >
-        {content}
-      </button>
-    )
-  }
-
-  return (
-    <div
-      {...(rest as DivProps)}
-      ref={ref as Ref<HTMLDivElement>}
-      className={styles({
-        size,
-        iconOnly,
-      })}
-    >
-      {content}
-    </div>
+    </button>
   )
 }
 
@@ -93,6 +62,8 @@ const styles = cva({
     'inline-flex shrink-0 items-center justify-center gap-1 border border-neutral-20 font-medium transition-all hover:border-neutral-30',
     'outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-customisation-50 focus-visible:ring-offset-2',
     'disabled:cursor-default disabled:opacity-[.3]',
+
+    // dark
     'dark:border-neutral-80 dark:text-white-100 dark:hover:border-neutral-60',
   ],
   variants: {

packages/components/tailwind.config.ts

@@ -34,62 +34,14 @@ 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: '-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',
-        },
-      ],
+      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' }],
     },
 
     opacity: {},

patches/test

@@ -1 +0,0 @@
-test