@lukso/web-components 1.6.3 → 1.7.3

package/src/components/lukso-icon/index.ts

@@ -1,310 +0,0 @@
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { TailwindStyledElement } from '@/shared/tailwind-element'
-import style from './style.scss?inline'
-import { addPhoto } from './icons/add-photo'
-import { arrowDownLg } from './icons/arrow-down-lg'
-import { arrowDownSm } from './icons/arrow-down-sm'
-import { arrowLeftLg } from './icons/arrow-left-lg'
-import { arrowLeftSm } from './icons/arrow-left-sm'
-import { arrowRightLg } from './icons/arrow-right-lg'
-import { arrowRightSm } from './icons/arrow-right-sm'
-import { arrowUpLg } from './icons/arrow-up-lg'
-import { arrowUpSm } from './icons/arrow-up-sm'
-import { barbellOutline } from './icons/barbell-outline'
-import { bulbOutline } from './icons/bulb-outline'
-import { camera } from './icons/camera'
-import { clipboard } from './icons/clipboard'
-import { clock } from './icons/clock'
-import { closeLg } from './icons/close-lg'
-import { closeSm } from './icons/close-sm'
-import { cloud } from './icons/cloud'
-import { compassOutline } from './icons/compass-outline'
-import { completeFilled } from './icons/complete-filled'
-import { completeOutline } from './icons/complete-outline'
-import { contractLock } from './icons/contract-lock'
-import { connect } from './icons/connect'
-import { connections } from './icons/connections'
-import { controller } from './icons/controller'
-import { copy } from './icons/copy'
-import { crossOutline } from './icons/cross-outline'
-import { dots } from './icons/dots'
-import { edit } from './icons/edit'
-import { error } from './icons/error'
-import { expand } from './icons/expand'
-import { extension } from './icons/extension'
-import { eyeHide } from './icons/eye-hide'
-import { eyeShow } from './icons/eye-show'
-import { filter } from './icons/filter'
-import { fishOutline } from './icons/fish-outline'
-import { flip } from './icons/flip'
-import { globe } from './icons/globe'
-import { hamburger } from './icons/hamburger'
-import { infinite } from './icons/infinite'
-import { information } from './icons/information'
-import { keyOutline } from './icons/key-outline'
-import { link } from './icons/link'
-import { link1 } from './icons/link1'
-import { link2 } from './icons/link2'
-import { link3 } from './icons/link3'
-import { link4 } from './icons/link4'
-import { loading } from './icons/loading'
-import { location } from './icons/location'
-import { locked } from './icons/locked'
-import { login } from './icons/login'
-import { login2 } from './icons/login-2'
-import { login3 } from './icons/login-3'
-import { logoChrome } from './icons/logo-chrome'
-import { mail } from './icons/mail'
-import { menu1 } from './icons/menu-1'
-import { menu2 } from './icons/menu-2'
-import { migrate } from './icons/migrate'
-import { minimize } from './icons/minimize'
-import { network } from './icons/network'
-import { notifications } from './icons/notifications'
-import { phonePortraitOutline } from './icons/phone-portrait-outline'
-import { pin } from './icons/pin'
-import { playFilled } from './icons/play-filled'
-import { playOutline } from './icons/play-outline'
-import { plus } from './icons/plus'
-import { profileAdd } from './icons/profile-add'
-import { profileExport } from './icons/profile-export'
-import { profileImport } from './icons/profile-import'
-import { profileRecovery } from './icons/profile-recovery'
-import { profileRecovery2 } from './icons/profile-recovery-2'
-import { profileRestore } from './icons/profile-restore'
-import { profile } from './icons/profile'
-import { qrCode } from './icons/qr-code'
-import { relayer } from './icons/relayer'
-import { reload } from './icons/reload'
-import { returnDown } from './icons/return-down'
-import { returnLeft } from './icons/return-left'
-import { returnRight } from './icons/return-right'
-import { returnUp } from './icons/return-up'
-import { search } from './icons/search'
-import { settings } from './icons/settings'
-import { smartContractDoc } from './icons/smart-contract-doc'
-import { smartContract } from './icons/smart-contract'
-import { starFilled } from './icons/star-filled'
-import { starOutline } from './icons/star-outline'
-import { stepDot } from './icons/step-dot'
-import { stepProgress } from './icons/step-progress'
-import { steps } from './icons/steps'
-import { tick } from './icons/tick'
-import { timerOutline } from './icons/timer-outline'
-import { transactionReceive } from './icons/transaction-receive'
-import { transactionSend } from './icons/transaction-send'
-import { transfer } from './icons/transfer'
-import { trash } from './icons/trash'
-import { turnDown } from './icons/turn-down'
-import { turnLeft } from './icons/turn-left'
-import { turnRight } from './icons/turn-right'
-import { turnUp } from './icons/turn-up'
-import { unlocked } from './icons/unlocked'
-import { walletOutline } from './icons/wallet-outline'
-import { warningRound } from './icons/warning-round'
-import { warningTriangle } from './icons/warning-triangle'
-import { googleColor } from './icons/google-color'
-import { ethLogo } from './icons/eth-logo'
-import { lyxLogo } from './icons/lyx-logo'
-import { progressIndicator } from './icons/progress-indicator'
-import { pulseDot } from './icons/pulse-dot'
-import { progressComplete } from './icons/progress-complete'
-import { completeFilledFadeIn } from './icons/complete-filled-fade-in'
-
-export type IconOptions = {
-  width: number
-  height: number
-  color: string
-  strokeWidth: number
-  secondaryColor?: string
-}
-
-export type IconSize = 'small' | 'medium' | 'large' | 'x-large'
-
-type IconSizeDef = {
-  width: number
-  height: number
-  strokeWidth: number
-}
-
-const iconMap = {
-  'add-photo': addPhoto,
-  'arrow-down-lg': arrowDownLg,
-  'arrow-down-sm': arrowDownSm,
-  'arrow-left-lg': arrowLeftLg,
-  'arrow-left-sm': arrowLeftSm,
-  'arrow-right-lg': arrowRightLg,
-  'arrow-right-sm': arrowRightSm,
-  'arrow-up-lg': arrowUpLg,
-  'arrow-up-sm': arrowUpSm,
-  'barbell-outline': barbellOutline,
-  'bulb-outline': bulbOutline,
-  camera,
-  clipboard,
-  clock,
-  'close-lg': closeLg,
-  'close-sm': closeSm,
-  cloud,
-  'compass-outline': compassOutline,
-  'complete-filled': completeFilled,
-  'complete-outline': completeOutline,
-  connect,
-  connections,
-  'contract-lock': contractLock,
-  controller,
-  copy,
-  'cross-outline': crossOutline,
-  dots,
-  edit,
-  error,
-  expand,
-  extension,
-  'eye-hide': eyeHide,
-  'eye-show': eyeShow,
-  filter,
-  'fish-outline': fishOutline,
-  flip,
-  globe,
-  hamburger,
-  infinite,
-  information,
-  'key-outline': keyOutline,
-  link,
-  'link-1': link1,
-  'link-2': link2,
-  'link-3': link3,
-  'link-4': link4,
-  loading,
-  location,
-  locked,
-  login,
-  'login-2': login2,
-  'login-3': login3,
-  'logo-chrome': logoChrome,
-  mail,
-  'menu-1': menu1,
-  'menu-2': menu2,
-  migrate,
-  minimize,
-  network,
-  notifications,
-  'phone-portrait-outline': phonePortraitOutline,
-  pin,
-  'play-filled': playFilled,
-  'play-outline': playOutline,
-  plus,
-  'profile-add': profileAdd,
-  'profile-export': profileExport,
-  'profile-import': profileImport,
-  'profile-recovery': profileRecovery,
-  'profile-recovery-2': profileRecovery2,
-  'profile-restore': profileRestore,
-  profile,
-  'qr-code': qrCode,
-  relayer,
-  reload,
-  'return-down': returnDown,
-  'return-left': returnLeft,
-  'return-right': returnRight,
-  'return-up': returnUp,
-  search,
-  settings,
-  'smart-contract-doc': smartContractDoc,
-  'smart-contract': smartContract,
-  'star-filled': starFilled,
-  'star-outline': starOutline,
-  'step-dot': stepDot,
-  'step-progress': stepProgress,
-  steps,
-  tick,
-  'timer-outline': timerOutline,
-  'transaction-receive': transactionReceive,
-  'transaction-send': transactionSend,
-  transfer,
-  trash,
-  'turn-down': turnDown,
-  'turn-left': turnLeft,
-  'turn-right': turnRight,
-  'turn-up': turnUp,
-  unlocked,
-  'wallet-outline': walletOutline,
-  'warning-round': warningRound,
-  'warning-triangle': warningTriangle,
-  'google-color': googleColor,
-  'eth-logo': ethLogo,
-  'lyx-logo': lyxLogo,
-  'progress-indicator': progressIndicator,
-  'pulse-dot': pulseDot,
-  'progress-complete': progressComplete,
-  'complete-filled-fade-in': completeFilledFadeIn,
-}
-
-@customElement('lukso-icon')
-export class LuksoIcon extends TailwindStyledElement(style) {
-  @property({ type: String })
-  name = ''
-
-  @property({ type: String })
-  size = 'medium'
-
-  @property({ type: String })
-  color = 'neutral-20'
-
-  @property({ type: String, attribute: 'secondary-color' })
-  secondaryColor = ''
-
-  private sizes: { [key in IconSize]: IconSizeDef } = {
-    small: {
-      width: 16,
-      height: 16,
-      strokeWidth: 2,
-    },
-    medium: {
-      width: 24,
-      height: 24,
-      strokeWidth: 1.5,
-    },
-    large: {
-      width: 32,
-      height: 32,
-      strokeWidth: 1.5,
-    },
-    'x-large': {
-      width: 40,
-      height: 40,
-      strokeWidth: 1.5,
-    },
-  }
-
-  render() {
-    const icon = iconMap[this.name]
-
-    if (!icon) {
-      console.warn(`Icon ${this.name} not found`)
-    }
-
-    const size = this.sizes[this.size]
-
-    if (!size) {
-      console.warn(`Size ${this.size} not found`)
-    }
-
-    return html`
-      ${icon({
-        width: size.width,
-        height: size.height,
-        color: this.color,
-        strokeWidth: size.strokeWidth,
-        secondaryColor: this.secondaryColor,
-      })}
-    `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'lukso-icon': LuksoIcon
-  }
-}

package/src/components/lukso-icon/lukso-icon.stories.ts

@@ -1,116 +0,0 @@
-import { html } from 'lit-html'
-import './index'
-
-/**  Documentation and examples of `lukso-icon` component. Icons comes in `small`, `medium`, `large` and `x-large` size that is set in `size` property.
- *  Please check all available icons in Icons Showcase.
- */
-export default {
-  title: 'Design System/Components/lukso-icon',
-  component: 'lukso-icon',
-  argTypes: {
-    name: {
-      control: { type: 'text' },
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large', 'x-large'],
-    },
-    color: {
-      control: { type: 'text' },
-    },
-    secondaryColor: {
-      control: { type: 'text' },
-    },
-    animation: {
-      control: { type: 'select' },
-      options: [
-        'animate-spin',
-        'animate-ping',
-        'animate-pulse',
-        'animate-bounce',
-        'animate-pulse-resize',
-      ],
-    },
-  },
-  args: {
-    name: 'profile-recovery',
-    size: 'medium',
-    color: 'neutral-20',
-    secondaryColor: '',
-    animation: undefined,
-  },
-  parameters: {
-    controls: {
-      exclude: ['sizes', 'secondary-color', 'styles'],
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=52%3A1473&t=loplCvndobu6AA6P-4',
-    },
-  },
-}
-
-const Template = ({ name, size, color, secondaryColor, animation }) =>
-  html`<lukso-icon
-    name=${name}
-    size=${size}
-    color=${color}
-    secondary-color=${secondaryColor}
-    class=${animation}
-  ></lukso-icon>`
-
-/** By default icon comes in `medium` size of `24x24` pixels with `neutral-20` color.  */
-export const DefaultIcon = Template.bind({})
-DefaultIcon.args = {
-  name: 'profile-recovery',
-}
-
-/** Example of `small` size of `16x16` pixels. */
-export const SmallIcon = Template.bind({})
-SmallIcon.args = {
-  name: 'profile-recovery',
-  size: 'small',
-}
-
-/** Example of `large` size of `32x32` pixels. */
-export const LargeIcon = Template.bind({})
-LargeIcon.args = {
-  name: 'profile-recovery',
-  size: 'large',
-}
-
-/** Example of `x-large` size of `40x40` pixels. */
-export const XLargeIcon = Template.bind({})
-XLargeIcon.args = {
-  name: 'profile-recovery',
-  size: 'x-large',
-}
-
-/** You can change color to any from the palette with `color` property. */
-export const CustomColorIcon = Template.bind({})
-CustomColorIcon.args = {
-  name: 'profile-recovery',
-  color: 'coral-65',
-}
-
-/** Some icons contain secondary color that is applied with `secondary-color` property. */
-export const SecondaryColorIcon = Template.bind({})
-SecondaryColorIcon.args = {
-  name: 'complete-filled',
-  color: 'coral-65',
-  secondaryColor: 'honey-72',
-}
-
-/** Some icons contain multiple colors and they don't use `color` property. You can still use different sizes tho. */
-export const ColoredIcon = Template.bind({})
-ColoredIcon.args = {
-  name: 'google-color',
-}
-
-/** You can animate any icon by applying `animate-[name]` property. Some icons come with build in animation. Check more details in `Animations` and `Icons` section. */
-export const AnimatedIcon = Template.bind({})
-AnimatedIcon.args = {
-  name: 'step-progress',
-  secondaryColor: 'neutral-100',
-  animation: 'animate-spin',
-}

package/src/components/lukso-icon/style.scss

@@ -1,3 +0,0 @@
-:host {
-  @apply inline-flex;
-}

package/src/components/lukso-input/index.ts

@@ -1,211 +0,0 @@
-import { html, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { HTMLInputTypeAttribute } from 'react'
-
-import { TailwindElement } from '@/shared/tailwind-element'
-import { customClassMap } from '@/shared/directives'
-
-@customElement('lukso-input')
-export class LuksoInput extends TailwindElement {
-  @property({ type: String })
-  value = ''
-
-  @property({ type: String })
-  name = ''
-
-  @property({ type: String })
-  type: HTMLInputTypeAttribute = 'text'
-
-  @property({ type: String })
-  placeholder = ''
-
-  @property({ type: String })
-  label = ''
-
-  @property({ type: String })
-  description = ''
-
-  @property({ type: String })
-  error = ''
-
-  @property({ type: String })
-  unit = ''
-
-  @property({ type: Boolean, attribute: 'is-full-width' })
-  isFullWidth = false
-
-  @property({ type: Boolean })
-  autofocus = false
-
-  @property({ type: Number })
-  max: number | undefined = undefined
-
-  @property({ type: Number })
-  min: number | undefined = undefined
-
-  @state()
-  private hasHocus = false
-
-  @state()
-  private hasHighlight = false
-
-  private defaultInputStyles = `bg-neutral-100 text-neutral-20 paragraph-16-regular px-4 py-3
-    border border-solid h-[48px] placeholder:text-neutral-70
-    outline-none transition transition-all duration-150 appearance-none`
-
-  private defaultUnitStyles = `paragraph-12-regular text-neutral-60 flex px-3.5 items-center relative
-    border border-solid h-[48px] transition transition-all duration-150
-    rounded-r-xl border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
-    before:w-[1px] before:h-[24px] whitespace-nowrap`
-
-  inputTemplate() {
-    return html`
-      <input
-        data-testid="input"
-        id=${this.name}
-        name=${this.name}
-        type=${this.type}
-        value=${this.value}
-        placeholder=${this.placeholder}
-        ?autofocus=${this.autofocus}
-        min=${this.min}
-        max=${this.max}
-        class=${customClassMap({
-          [this.defaultInputStyles]: true,
-          [this.error === '' ? 'border-neutral-90' : 'border-red-85']:
-            !this.hasHighlight,
-          [this.error === '' ? 'border-neutral-35' : 'border-red-65']:
-            this.hasHighlight,
-          ['rounded-l-xl border-r-0']: this.unit !== '',
-          ['rounded-xl']: this.unit === '',
-          ['w-full']: this.isFullWidth,
-          ['w-[350px]']: !this.isFullWidth && this.unit === '',
-          ['w-[300px]']: !this.isFullWidth && this.unit !== '',
-        })}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        @keyup=${this.handleKeyUp}
-        @keydown=${this.handleKeyDown}
-        @keypress=${this.handleKeyPress}
-        @mouseenter=${this.handleMouseOver}
-        @mouseleave=${this.handleMouseOut}
-      />
-    `
-  }
-
-  labelTemplate() {
-    return html`
-      <label for=${this.name} class="heading-h5 text-neutral-20 pb-2 block"
-        >${this.label}</label
-      >
-    `
-  }
-
-  descriptionTemplate() {
-    return html`
-      <div class="paragraph-12-regular text-neutral-20 pb-2">
-        ${this.description ?? nothing}
-      </div>
-    `
-  }
-
-  errorTemplate() {
-    return html`<div class="paragraph-12-regular text-red-65 pt-2">
-      ${this.error}
-    </div>`
-  }
-
-  unitTemplate() {
-    return html`<div
-      class=${customClassMap({
-        [this.defaultUnitStyles]: true,
-        [this.error === '' ? 'border-neutral-90' : 'border-red-85']:
-          !this.hasHighlight,
-        [this.error === '' ? 'border-neutral-35' : 'border-red-65']:
-          this.hasHighlight,
-      })}
-      @mouseenter=${this.handleMouseOver}
-      @mouseleave=${this.handleMouseOut}
-    >
-      ${this.unit}
-    </div>`
-  }
-
-  private handleFocus() {
-    this.hasHocus = true
-    this.hasHighlight = true
-  }
-
-  private handleBlur() {
-    this.hasHocus = false
-    this.hasHighlight = false
-  }
-
-  private handleKeyUp(event: KeyboardEvent) {
-    const target = event.target as HTMLInputElement
-    const keyEvent = new CustomEvent('on-key-up', {
-      detail: {
-        value: target.value,
-        event,
-      },
-      bubbles: true,
-      composed: true,
-    })
-    this.dispatchEvent(keyEvent)
-  }
-
-  private handleKeyDown(event: KeyboardEvent) {
-    const target = event.target as HTMLInputElement
-    const keyEvent = new CustomEvent('on-key-down', {
-      detail: {
-        value: target.value,
-        event,
-      },
-      bubbles: true,
-      composed: true,
-    })
-    this.dispatchEvent(keyEvent)
-  }
-
-  private handleKeyPress(event: KeyboardEvent) {
-    const target = event.target as HTMLInputElement
-    const keyEvent = new CustomEvent('on-key-press', {
-      detail: {
-        value: target.value,
-        event,
-      },
-      bubbles: true,
-      composed: true,
-    })
-    this.dispatchEvent(keyEvent)
-  }
-
-  private handleMouseOver() {
-    this.hasHighlight = true
-  }
-
-  private handleMouseOut() {
-    if (!this.hasHocus) {
-      this.hasHighlight = false
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        ${this.label ? this.labelTemplate() : nothing}
-        ${this.description ? this.descriptionTemplate() : nothing}
-        <div class="flex">
-          ${this.inputTemplate()} ${this.unit ? this.unitTemplate() : nothing}
-        </div>
-        ${this.error ? this.errorTemplate() : nothing}
-      </div>
-    `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'lukso-input': LuksoInput
-  }
-}