Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Felicio Mununga
|
f029428a0f | ||
|
Felicio Mununga
|
bc299b098a | ||
|
Felicio Mununga
|
de3cfbb580 | ||
|
Felicio Mununga
|
c52c02d2cf |
@@ -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) | [](https://www.npmjs.com/package/@status-im/components) | Component library built with Radix UI, React Aria, Tailwind CSS. |
|
||||
| [`@status-im/js`](./packages/status-js) | [](https://www.npmjs.com/package/@status-im/js) | Libary for Waku protocol integration and blockchain interactions. |
|
||||
| [`@status-im/icons`](./packages/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) | [](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) | [](https://www.npmjs.com/package/@status-im/eslint-config) | Shared ESLint configuration for consistent code style across projects. |
|
||||
| Name | `npm` | Description |
|
||||
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [`@status-im/components`](./packages/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) | [](https://www.npmjs.com/package/@status-im/js) | Libary for Waku protocol integration and blockchain interactions. |
|
||||
| [`@status-im/icons`](./packages/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) | [](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. |
|
||||
|
||||
## Apps
|
||||
|
||||
|
||||
Vendored
+2
-53
@@ -1,8 +1,6 @@
|
||||
#!/usr/bin/env groovy
|
||||
library 'status-jenkins-lib@v1.9.11'
|
||||
|
||||
def changesDetected = false
|
||||
|
||||
pipeline {
|
||||
agent { label 'linux' }
|
||||
|
||||
@@ -29,32 +27,7 @@ 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') {
|
||||
when {
|
||||
expression { changesDetected }
|
||||
}
|
||||
steps {
|
||||
dir("${env.WORKSPACE}/apps/connector") {
|
||||
script {
|
||||
@@ -69,9 +42,6 @@ pipeline {
|
||||
}
|
||||
|
||||
stage('Build') {
|
||||
when {
|
||||
expression { changesDetected }
|
||||
}
|
||||
steps {
|
||||
dir("${env.WORKSPACE}/apps/connector") {
|
||||
script {
|
||||
@@ -86,9 +56,6 @@ pipeline {
|
||||
}
|
||||
|
||||
stage('Zip') {
|
||||
when {
|
||||
expression { changesDetected }
|
||||
}
|
||||
steps {
|
||||
dir("${env.WORKSPACE}/apps/connector") {
|
||||
zip(
|
||||
@@ -101,9 +68,6 @@ pipeline {
|
||||
}
|
||||
|
||||
stage('Archive') {
|
||||
when {
|
||||
expression { changesDetected }
|
||||
}
|
||||
steps {
|
||||
dir("${env.WORKSPACE}/apps/connector") {
|
||||
archiveArtifacts(
|
||||
@@ -115,9 +79,6 @@ pipeline {
|
||||
}
|
||||
|
||||
stage('Upload') {
|
||||
when {
|
||||
expression { changesDetected }
|
||||
}
|
||||
steps {
|
||||
dir("${env.WORKSPACE}/apps/connector") {
|
||||
script {
|
||||
@@ -129,20 +90,8 @@ pipeline {
|
||||
}
|
||||
|
||||
post {
|
||||
success {
|
||||
script {
|
||||
if(changesDetected) {
|
||||
github.notifyPR(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
failure {
|
||||
script {
|
||||
if(changesDetected) {
|
||||
github.notifyPR(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
success { script { github.notifyPR(true) } }
|
||||
failure { script { github.notifyPR(false) } }
|
||||
cleanup { cleanWs() }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
# @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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@status-im/components",
|
||||
"version": "1.0.6",
|
||||
"version": "1.0.4",
|
||||
"license": "MPL-2.0",
|
||||
"sideEffects": [
|
||||
"*.css"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { PlaceholderIcon } from '@status-im/icons/20'
|
||||
|
||||
import { Button } from './button'
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
@@ -55,6 +57,52 @@ const meta: Meta<
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{(
|
||||
[
|
||||
'primary',
|
||||
'positive',
|
||||
'grey',
|
||||
'darkGrey',
|
||||
'outline',
|
||||
'ghost',
|
||||
'danger',
|
||||
] as const
|
||||
).map(variant => (
|
||||
<div key={variant} className="flex items-center gap-4">
|
||||
{(['40', '32', '24'] as const).map(size => (
|
||||
<Button
|
||||
key={size}
|
||||
{...args}
|
||||
variant={variant}
|
||||
size={size}
|
||||
iconAfter={<PlaceholderIcon />}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{(
|
||||
[
|
||||
'primary',
|
||||
'positive',
|
||||
'grey',
|
||||
'darkGrey',
|
||||
'outline',
|
||||
'ghost',
|
||||
'danger',
|
||||
] as const
|
||||
).map(variant => (
|
||||
<div key={variant} className="flex items-center gap-4">
|
||||
{(['40', '32', '24'] as const).map(size => (
|
||||
<Button
|
||||
key={size}
|
||||
{...args}
|
||||
variant={variant}
|
||||
size={size}
|
||||
iconBefore={<PlaceholderIcon />}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
@@ -69,18 +69,19 @@ function Button(
|
||||
onClick={onClick}
|
||||
{...buttonProps}
|
||||
ref={ref}
|
||||
className={styles({ variant, size })}
|
||||
className={styles({
|
||||
variant,
|
||||
size,
|
||||
iconPlacement:
|
||||
(iconBefore && 'before') || (iconAfter && 'after') || 'unset',
|
||||
})}
|
||||
>
|
||||
{iconBefore && (
|
||||
<span className={iconStyles({ size, placement: 'before', variant })}>
|
||||
{iconBefore}
|
||||
</span>
|
||||
<span className={iconStyles({ size, variant })}>{iconBefore}</span>
|
||||
)}
|
||||
<span className="whitespace-nowrap">{children}</span>
|
||||
<span className="flex-1 whitespace-nowrap">{children}</span>
|
||||
{iconAfter && (
|
||||
<span className={iconStyles({ size, placement: 'after', variant })}>
|
||||
{iconAfter}
|
||||
</span>
|
||||
<span className={iconStyles({ size, variant })}>{iconAfter}</span>
|
||||
)}
|
||||
</Element>
|
||||
)
|
||||
@@ -126,15 +127,67 @@ const styles = cva({
|
||||
'dark:bg-danger-60 dark:hover:bg-danger-50 dark:pressed:bg-danger-50/[.9]',
|
||||
],
|
||||
},
|
||||
iconPlacement: {
|
||||
before: '',
|
||||
after: '',
|
||||
unset: '',
|
||||
},
|
||||
size: {
|
||||
'40': 'h-[40px] rounded-12 px-4 text-15',
|
||||
'32': 'h-[32px] rounded-10 px-3 text-15',
|
||||
'24': 'h-[24px] rounded-8 px-2 text-13',
|
||||
'40': 'h-[40px] rounded-12 text-15',
|
||||
'32': 'h-[32px] rounded-10 text-15',
|
||||
'24': 'h-[24px] rounded-8 text-13',
|
||||
},
|
||||
iconOnly: {
|
||||
true: 'aspect-square !px-0',
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
size: '40',
|
||||
iconPlacement: 'unset',
|
||||
className: 'px-4',
|
||||
},
|
||||
{
|
||||
size: '32',
|
||||
iconPlacement: 'unset',
|
||||
className: 'px-3',
|
||||
},
|
||||
{
|
||||
size: '24',
|
||||
iconPlacement: 'unset',
|
||||
className: 'px-2',
|
||||
},
|
||||
{
|
||||
size: '40',
|
||||
iconPlacement: 'before',
|
||||
className: 'pl-3 pr-4',
|
||||
},
|
||||
{
|
||||
size: '40',
|
||||
iconPlacement: 'after',
|
||||
className: 'pl-4 pr-3',
|
||||
},
|
||||
{
|
||||
size: '32',
|
||||
iconPlacement: 'before',
|
||||
className: 'pl-2 pr-3',
|
||||
},
|
||||
{
|
||||
size: '32',
|
||||
iconPlacement: 'after',
|
||||
className: 'pl-3 pr-2',
|
||||
},
|
||||
{
|
||||
size: '24',
|
||||
iconPlacement: 'before',
|
||||
className: 'pl-1.5 pr-2',
|
||||
},
|
||||
{
|
||||
size: '24',
|
||||
iconPlacement: 'after',
|
||||
className: 'pl-2 pr-1.5',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const iconStyles = cva({
|
||||
@@ -159,10 +212,6 @@ const iconStyles = cva({
|
||||
ghost: ['text-neutral-50'],
|
||||
danger: ['text-blur-white/70'],
|
||||
},
|
||||
placement: {
|
||||
before: '',
|
||||
after: '',
|
||||
},
|
||||
size: {
|
||||
'40': 'size-5',
|
||||
'32': 'size-5',
|
||||
@@ -173,26 +222,6 @@ const iconStyles = cva({
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
size: ['40', '32'],
|
||||
placement: 'before',
|
||||
className: '-ml-1',
|
||||
},
|
||||
{
|
||||
size: ['40', '32'],
|
||||
placement: 'after',
|
||||
className: '-mr-1',
|
||||
},
|
||||
{
|
||||
size: '24',
|
||||
placement: 'before',
|
||||
className: '-ml-0.5',
|
||||
},
|
||||
{
|
||||
size: '24',
|
||||
placement: 'after',
|
||||
className: '-mr-0.5',
|
||||
},
|
||||
{
|
||||
variant: 'outline',
|
||||
iconOnly: true,
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import { cloneElement, forwardRef } from 'react'
|
||||
import { 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: 'grid size-4 flex-shrink-0 place-items-center rounded-6 border',
|
||||
base: 'flex size-4 flex-shrink-0 items-center justify-center rounded-6 border',
|
||||
variants: {
|
||||
variant: {
|
||||
primary: [
|
||||
@@ -33,7 +32,7 @@ const styles = cva({
|
||||
type Props = VariantProps<typeof styles> &
|
||||
(
|
||||
| {
|
||||
icon: IconElement
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
|
||||
symbol?: never
|
||||
}
|
||||
| {
|
||||
@@ -43,17 +42,15 @@ type Props = VariantProps<typeof styles> &
|
||||
)
|
||||
|
||||
const Shortcut = (props: Props, ref: React.Ref<HTMLDivElement>) => {
|
||||
const { variant = 'primary' } = props
|
||||
const { variant = 'primary', ...rest } = props
|
||||
|
||||
return (
|
||||
<div className={styles({ variant })} ref={ref}>
|
||||
<div className={styles({ variant })} ref={ref} {...rest}>
|
||||
{match(props)
|
||||
.with({ symbol: P.string }, ({ symbol }) => (
|
||||
<span className="text-11 font-medium">{symbol}</span>
|
||||
))
|
||||
.with({ icon: P._ }, ({ icon }) =>
|
||||
cloneElement(icon, { className: 'size-3' }),
|
||||
)
|
||||
.with({ icon: P._ }, ({ icon: Icon }) => <Icon className="size-3" />)
|
||||
.exhaustive()}
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user