@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/components/Label/Label.tsx

@@ -1,120 +0,0 @@
-import React, { ReactNode } from 'react'
-import type { LabelHTMLAttributes } from 'react'
-import styled from 'styled-components'
-import clsx from 'clsx'
-import { isNil } from '@loadsmart/utils-object'
-
-import type ColorScheme from 'utils/types/ColorScheme'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import ellipsizable from 'styles/ellipsizable'
-import font from 'styles/font'
-import { getToken as token } from 'theming'
-
-import { Tooltip, TooltipProps } from '../Tooltip'
-
-type AcceptedType = 'label' | 'div' | 'span'
-
-interface WithAdditionalProps {
-  as?: AcceptedType
-  disabled?: boolean
-  required?: boolean
-  scheme?: ColorScheme
-  tip?: ReactNode
-  tipProps?: Omit<TooltipProps, 'message'>
-}
-
-export interface LabelProps
-  extends LabelHTMLAttributes<HTMLLabelElement | HTMLDivElement | HTMLSpanElement>,
-    WithAdditionalProps {
-  className?: string
-}
-
-const StyledWrapper = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  line-height: ${token('font-height-2')};
-  ${disableable()}
-`
-
-const StyledChildren = styled.span<WithAdditionalProps>`
-  display: inline-block;
-
-  ${font({
-    height: 'label-font-height',
-    weight: 'label-font-weight',
-  })}
-
-  font-size: ${token('label-font-size')};
-  color: ${conditional({
-    'label-font-color': whenProps({ scheme: 'light' }),
-    'color-neutral-white': whenProps({ scheme: 'dark' }),
-  })};
-  ${ellipsizable()}
-`
-
-const StyledRequired = styled.sup`
-  top: 0;
-
-  color: ${token('label-required-color')};
-  font-size: ${token('label-font-size')};
-`
-
-const StyledTooltipAnchor = styled.span<WithAdditionalProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin: 0 0 0 ${token('label-tooltip-margin-left')};
-
-  color: ${conditional({
-    'label-tooltip-font-color': whenProps({ scheme: 'light' }),
-    'label-tooltip-dark-font-color': whenProps({ scheme: 'dark' }),
-  })};
-  font-weight: ${token('label-tooltip-font-weight')};
-  font-size: ${token('label-tooltip-font-size')};
-
-  background: ${conditional({
-    'label-tooltip-background-color': whenProps({ scheme: 'light' }),
-    'label-tooltip-dark-background-color': whenProps({ scheme: 'dark' }),
-  })};
-  border-radius: ${token('border-radius-circle')};
-`
-
-function Label({
-  as = 'label',
-  children,
-  className,
-  disabled = false,
-  required,
-  scheme = 'light',
-  tip,
-  tipProps = {},
-  ...others
-}: LabelProps): JSX.Element {
-  const tag = String(as || 'label') as AcceptedType
-
-  return (
-    <StyledWrapper
-      data-testid="label"
-      as={tag}
-      className={clsx(className, {
-        'is-disabled': disabled,
-      })}
-      {...others}
-    >
-      <StyledChildren scheme={scheme}>{children}</StyledChildren>
-      {required && <StyledRequired>*</StyledRequired>}
-      {!isNil(tip) && (
-        <Tooltip scheme={scheme} message={tip || ''} {...tipProps}>
-          <StyledTooltipAnchor scheme={scheme}>?</StyledTooltipAnchor>
-        </Tooltip>
-      )}
-    </StyledWrapper>
-  )
-}
-
-export default Label

package/src/components/Label/index.ts

@@ -1,2 +0,0 @@
-export { default as Label } from './Label'
-export type { LabelProps } from './Label'

package/src/components/Layout/Box.tsx

@@ -1,98 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import conditional, { whenProps } from 'tools/conditional'
-import type { Spacing } from './Layout.types'
-import { getSpace } from './Layout.utils'
-
-import type { HTMLAttributes } from 'react'
-
-export interface BoxProps extends HTMLAttributes<HTMLElement> {
-  background?: 'transparent' | 'neutral-white' | 'neutral-lighter' | 'neutral-lightest'
-  padding?: Spacing
-  borderRadius?: 'none' | 's' | 'm' | 'l'
-  borderWidth?: 'medium' | 'thin' | 'none'
-  borderColor?: 'neutral-darker' | 'neutral-light' | 'neutral-lighter' | 'neutral-white' | 'primary'
-  textAlign?: 'left' | 'center' | 'right'
-}
-
-const BoxContainer = styled.div<{
-  $background: BoxProps['background']
-  $padding: BoxProps['padding']
-  $borderRadius: BoxProps['borderRadius']
-  $borderWidth: BoxProps['borderWidth']
-  $borderColor: BoxProps['borderColor']
-  $textAlign: BoxProps['textAlign']
-}>`
-  padding: ${getSpace('$padding')};
-
-  color: ${token('color-neutral-darker')};
-
-  text-align: ${conditional({
-    left: whenProps({ $textAlign: 'left' }),
-    center: whenProps({ $textAlign: 'center' }),
-    right: whenProps({ $textAlign: 'right' }),
-  })};
-
-  background-color: ${conditional({
-    'color-transparent': whenProps({ $background: 'transparent' }),
-    'color-neutral-white': whenProps({ $background: 'neutral-white' }),
-    'color-neutral-lighter': whenProps({ $background: 'neutral-lighter' }),
-    'color-neutral-lightest': whenProps({ $background: 'neutral-lightest' }),
-  })};
-
-  border-color: ${conditional({
-    'color-neutral-darker': whenProps({ $borderColor: 'neutral-darker' }),
-    'color-neutral-light': whenProps({ $borderColor: 'neutral-light' }),
-    'color-neutral-lighter': whenProps({ $borderColor: 'neutral-lighter' }),
-    'color-neutral-white': whenProps({ $borderColor: 'neutral-white' }),
-    'color-primary': whenProps({ $borderColor: 'primary' }),
-  })};
-
-  border-style: solid;
-
-  border-width: ${conditional({
-    'border-width-medium': whenProps({ $borderWidth: 'medium' }),
-    'border-width-thin': whenProps({ $borderWidth: 'thin' }),
-    'border-width-none': whenProps({ $borderWidth: 'none' }),
-  })};
-
-  border-radius: ${conditional({
-    'border-radius-none': whenProps({ $borderRadius: 'none' }),
-    'border-radius-s': whenProps({ $borderRadius: 's' }),
-    'border-radius-m': whenProps({ $borderRadius: 'm' }),
-    'border-radius-l': whenProps({ $borderRadius: 'l' }),
-  })};
-`
-
-/**
- * Box layout component.
- * @param {BoxProps} props
- */
-export function Box(props: BoxProps): JSX.Element {
-  const {
-    background = 'transparent',
-    borderColor = 'neutral-light',
-    borderRadius = 's',
-    borderWidth = 'none',
-    padding = 'm',
-    textAlign = 'left',
-    children,
-    ...rest
-  } = props
-
-  return (
-    <BoxContainer
-      $background={background}
-      $borderColor={borderColor}
-      $borderRadius={borderRadius}
-      $borderWidth={borderWidth}
-      $padding={padding}
-      $textAlign={textAlign}
-      {...rest}
-    >
-      {children}
-    </BoxContainer>
-  )
-}

package/src/components/Layout/Grid.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import prop from 'tools/prop'
-
-import { getSpace } from 'components/Layout/Layout.utils'
-import type { Spacing } from './Layout.types'
-
-import type { HTMLAttributes } from 'react'
-
-export interface GridProps extends HTMLAttributes<HTMLElement> {
-  space?: Spacing
-  minColumnWidth?: string
-}
-
-const GridContainer = styled.div<{
-  $space: GridProps['space']
-  $minColumnWidth: GridProps['minColumnWidth']
-}>`
-  display: grid;
-  grid-gap: ${getSpace('$space')};
-
-  @supports (width: min(${prop('$minColumnWidth')}, 100%)) {
-    & {
-      grid-template-columns: repeat(auto-fit, minmax(min(${prop('$minColumnWidth')}, 100%), 1fr));
-    }
-  }
-`
-
-/**
- * Grid layout component.
- * @param {GridProps} props
- */
-export function Grid(props: GridProps): JSX.Element {
-  const { space = 'm', minColumnWidth = '50%', children, ...rest } = props
-
-  return (
-    <GridContainer $space={space} $minColumnWidth={minColumnWidth} {...rest}>
-      {children}
-    </GridContainer>
-  )
-}

package/src/components/Layout/Group.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import type { HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-import conditional, { whenProps } from 'tools/conditional'
-
-import { getSpace } from './Layout.utils'
-import type { Spacing, JustifyValue, AlignValue } from './Layout.types'
-
-export interface GroupProps extends HTMLAttributes<HTMLElement> {
-  space?: Spacing
-  justify?: JustifyValue
-  align?: AlignValue
-  as?: string | React.ComponentType<any>
-}
-
-const GroupContainer = styled.div<{
-  $space: GroupProps['space']
-  $justify: GroupProps['justify']
-  $align: GroupProps['align']
-}>`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${getSpace('$space')};
-
-  align-items: ${conditional({
-    center: whenProps({ $align: 'center' }),
-    'flex-start': whenProps({ $align: 'flex-start' }),
-    'flex-end': whenProps({ $align: 'flex-end' }),
-    stretch: whenProps({ $align: 'stretch' }),
-  })};
-
-  justify-content: ${conditional({
-    center: whenProps({ $justify: 'center' }),
-    'flex-start': whenProps({ $justify: 'flex-start' }),
-    'flex-end': whenProps({ $justify: 'flex-end' }),
-    'space-between': whenProps({ $justify: 'space-between' }),
-    'space-around': whenProps({ $justify: 'space-around' }),
-    'space-evenly': whenProps({ $justify: 'space-evenly' }),
-  })};
-`
-
-/**
- * Group layout component.
- * @param {GroupProps} props
- */
-export function Group(props: GroupProps): JSX.Element {
-  const { space = 'm', justify = 'flex-start', align = 'flex-start', children, ...rest } = props
-
-  return (
-    <GroupContainer $space={space} $justify={justify} $align={align} {...rest}>
-      {children}
-    </GroupContainer>
-  )
-}