@edvisor/product-language 0.10.9 → 0.10.10

package/src/lib/components/molecules/button/button-flags.tsx

@@ -1,340 +0,0 @@
-// this file was generated, but it is safe to modify
-import {
-  bitwiseOr,
-  MappedEnum,
-  RequireOnlyOne,
-  PropsWithChildren,
-  getRightmostSetBitNumber,
-} from '@helpers'
-import { Actions, Padding, Interactive, Text, Borders, Icons } from '@foundations'
-
-export const enum ButtonType {
-  basic = 1,
-  primary = 2,
-  destructive = 4,
-  destructivePrimary = 6,
-  outline = 8,
-  plain = 16,
-  subtle = 32,
-  plainSubtle = 48,
-}
-
-const enum ButtonSize {
-  default = 1,
-  small = 2,
-  large = 4,
-}
-
-const enum ButtonDisabledType {
-  enabled = 1,
-  disabled = 2,
-}
-
-type ButtonTypes<T> = MappedEnum<typeof ButtonType, T>
-type ButtonSizes<T> = MappedEnum<typeof ButtonSize, T>
-type ButtonDisabledTypes<T> = MappedEnum<typeof ButtonDisabledType, T>
-
-function toButtonSize(n: number): ButtonSize {
-  switch (n) {
-    case ButtonSize.default:
-      return ButtonSize.default
-    case ButtonSize.small:
-      return ButtonSize.small
-    case ButtonSize.large:
-      return ButtonSize.large
-    default:
-      return ButtonSize.default
-  }
-}
-
-function toButtonDisabledType(n: number): ButtonDisabledType {
-  switch (n) {
-    case ButtonDisabledType.enabled:
-      return ButtonDisabledType.enabled
-    case ButtonDisabledType.disabled:
-      return ButtonDisabledType.disabled
-    default:
-      return ButtonDisabledType.enabled
-  }
-}
-
-function toButtonTypes(n: number): ButtonType {
-  const defaultType = 0
-  switch (n) {
-    case defaultType:
-    case ButtonType.basic:
-      return ButtonType.basic
-    case ButtonType.primary:
-      return ButtonType.primary
-    case ButtonType.destructivePrimary:
-      return ButtonType.destructivePrimary
-    case ButtonType.destructive:
-      return ButtonType.destructive
-    case ButtonType.outline:
-      return ButtonType.outline
-    case ButtonType.plain:
-      return ButtonType.plain
-    case ButtonType.plainSubtle:
-      return ButtonType.plainSubtle
-    default:
-      return getRightmostSetBitNumber(n)
-  }
-}
-
-const ButtonBackgroundColorValues = {
-  [ButtonType.basic]: Actions.Secondary.Default,
-  [ButtonType.primary]: Actions.Primary.Default,
-  [ButtonType.destructivePrimary]: Actions.Critical.Default,
-  [ButtonType.destructive]: 'none',
-  [ButtonType.outline]: 'none',
-  [ButtonType.plain]: 'none',
-  [ButtonType.subtle]: 'none',
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBackgroundColorDisabledValues = {
-  [ButtonType.basic]: Actions.Secondary.Disabled,
-  [ButtonType.primary]: Actions.Primary.Disabled,
-  [ButtonType.destructivePrimary]: Actions.Critical.Disabled,
-  [ButtonType.destructive]: Actions.Secondary.Disabled,
-  [ButtonType.outline]: 'none',
-  [ButtonType.plain]: 'none',
-  [ButtonType.subtle]: Actions.Secondary.Disabled,
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBackgroundColorHoverValues = {
-  [ButtonType.basic]: Actions.Secondary.Hover,
-  [ButtonType.primary]: Actions.Primary.Hover,
-  [ButtonType.destructivePrimary]: Actions.Critical.Hover,
-  [ButtonType.destructive]: Actions.Critical.Hover,
-  [ButtonType.outline]: Actions.Secondary.Hover,
-  [ButtonType.plain]: '',
-  [ButtonType.subtle]: Actions.Secondary.Hover,
-  [ButtonType.plainSubtle]: '',
-}
-
-const ButtonTextDecorationHoverValues = {
-  [ButtonType.basic]: '',
-  [ButtonType.primary]: '',
-  [ButtonType.destructivePrimary]: '',
-  [ButtonType.destructive]: '',
-  [ButtonType.outline]: '',
-  [ButtonType.plain]: 'underline',
-  [ButtonType.subtle]: '',
-  [ButtonType.plainSubtle]: 'underline',
-}
-
-const ButtonBackgroundColorPressedValues = {
-  [ButtonType.basic]: Actions.Secondary.Pressed,
-  [ButtonType.primary]: Actions.Primary.Pressed,
-  [ButtonType.destructivePrimary]: Actions.Critical.Pressed,
-  [ButtonType.destructive]: Actions.Critical.Pressed,
-  [ButtonType.outline]: Actions.Secondary.Pressed,
-  [ButtonType.plain]: Actions.Secondary.Hover,
-  [ButtonType.subtle]: Actions.Secondary.Pressed,
-  [ButtonType.plainSubtle]: Actions.Secondary.Hover,
-}
-
-const ButtonTextColorValues = {
-  [ButtonType.basic]: Text.Default,
-  [ButtonType.primary]: Text.OnPrimary,
-  [ButtonType.destructivePrimary]: Text.OnCritical,
-  [ButtonType.destructive]: Text.Default,
-  [ButtonType.outline]: Text.Default,
-  [ButtonType.plain]: Interactive.Default.Default,
-  [ButtonType.subtle]: Text.Default,
-  [ButtonType.plainSubtle]: Interactive.Subtle.Default,
-}
-
-const IconTextColorValues = {
-  [ButtonType.basic]: Icons.Default,
-  [ButtonType.primary]: Icons.OnPrimary,
-  [ButtonType.destructivePrimary]: Icons.OnCritical,
-  [ButtonType.destructive]: Icons.Default,
-  [ButtonType.outline]: Icons.Default,
-  [ButtonType.plain]: Interactive.Default.Default,
-  [ButtonType.subtle]: Icons.Default,
-  [ButtonType.plainSubtle]: Icons.Default,
-}
-
-const ButtonTextColorHoverValues = {
-  [ButtonType.basic]: Text.Default,
-  [ButtonType.primary]: Text.OnPrimary,
-  [ButtonType.destructivePrimary]: Text.OnCritical,
-  [ButtonType.destructive]: Text.OnCritical,
-  [ButtonType.outline]: Text.Default,
-  [ButtonType.plain]: Interactive.Default.Hover,
-  [ButtonType.subtle]: Text.Default,
-  [ButtonType.plainSubtle]: Interactive.Subtle.Hover,
-}
-
-const IconColorHoverValues = {
-  [ButtonType.basic]: Icons.Default,
-  [ButtonType.primary]: Icons.OnPrimary,
-  [ButtonType.destructivePrimary]: Icons.OnCritical,
-  [ButtonType.destructive]: Icons.OnCritical,
-  [ButtonType.outline]: Icons.Default,
-  [ButtonType.plain]: Interactive.Default.Hover,
-  [ButtonType.subtle]: Icons.Default,
-  [ButtonType.plainSubtle]: Interactive.Subtle.Hover,
-}
-
-const ButtonBorderValues = {
-  [ButtonType.basic]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.primary]: 'none',
-  [ButtonType.destructivePrimary]: 'none',
-  [ButtonType.destructive]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.outline]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.plain]: 'none',
-  [ButtonType.subtle]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBorderDisabledValues = {
-  [ButtonType.basic]: `1px solid ${Borders.Default.Subdued}`,
-  [ButtonType.primary]: 'none',
-  [ButtonType.destructivePrimary]: 'none',
-  [ButtonType.destructive]: `1px solid ${Borders.Default.Subdued}`,
-  [ButtonType.outline]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.plain]: 'none',
-  [ButtonType.subtle]: `1px solid ${Borders.Default.Subdued}`,
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonTextColorDisabled = {
-  [ButtonDisabledType.enabled]: '',
-  [ButtonDisabledType.disabled]: Text.Light,
-}
-
-const ButtonCursor = {
-  [ButtonDisabledType.enabled]: 'pointer',
-  [ButtonDisabledType.disabled]: 'not-allowed',
-}
-
-const ButtonSizeValues = {
-  [ButtonSize.small]: `${Padding.xxs} ${Padding.s}`,
-  [ButtonSize.default]: `${Padding.xs} ${Padding.m}`,
-  [ButtonSize.large]: `${Padding.s} ${Padding.l}`,
-}
-
-const ButtonSizeValuesByType = {
-  [ButtonType.basic]: '',
-  [ButtonType.primary]: '',
-  [ButtonType.destructivePrimary]: '',
-  [ButtonType.destructive]: '',
-  [ButtonType.outline]: '',
-  [ButtonType.plain]: `${Padding.xxxs} ${Padding.xxs}`,
-  [ButtonType.subtle]: '',
-  [ButtonType.plainSubtle]: `${Padding.xxxs} ${Padding.xxs}`,
-}
-
-const ButtonTypeValues = {
-  [ButtonType.basic]: 1,
-  [ButtonType.primary]: 2,
-  [ButtonType.destructive]: 4,
-  [ButtonType.destructivePrimary]: 6,
-  [ButtonType.outline]: 8,
-  [ButtonType.plain]: 16,
-  [ButtonType.subtle]: 32,
-  [ButtonType.plainSubtle]: 48,
-}
-
-export type ButtonTypeProps = Partial<ButtonTypes<boolean>> &
-  PropsWithChildren
-
-export type ButtonSizeProps = Partial<RequireOnlyOne<ButtonSizes<boolean>>> &
-  PropsWithChildren
-
-export type ButtonDisabledTypeProps = Partial<
-  RequireOnlyOne<ButtonDisabledTypes<boolean>>
-> &
-  PropsWithChildren
-
-export function getBackgroundColorByType(type: ButtonType): string {
-  return ButtonBackgroundColorValues[type]
-}
-
-export function getBackgroundColorHoverByType(type: ButtonType): string {
-  return ButtonBackgroundColorHoverValues[type]
-}
-
-export function getTextDecorationHoverByType(type: ButtonType): string {
-  return ButtonTextDecorationHoverValues[type]
-}
-
-export function getBackgroundColorDisabledByType(type: ButtonType): string {
-  return ButtonBackgroundColorDisabledValues[type]
-}
-
-export function getBackgroundColorPressedByType(type: ButtonType): string {
-  return ButtonBackgroundColorPressedValues[type]
-}
-
-export function getTextColorByType(type: ButtonType): string {
-  return ButtonTextColorValues[type]
-}
-
-export function getIconColorByType(type: ButtonType): string {
-  return IconTextColorValues[type]
-}
-
-export function getTextColorOnHoverByType(type: ButtonType): string {
-  return ButtonTextColorHoverValues[type]
-}
-
-export function getIconColorOnHoverByType(type: ButtonType): string {
-  return IconColorHoverValues[type]
-}
-
-export function getBorderByType(type: ButtonType): string {
-  return ButtonBorderValues[type]
-}
-
-export function getBorderDisabledByType(type: ButtonType): string {
-  return ButtonBorderDisabledValues[type]
-}
-
-export function getPaddingBySize(props: ButtonSizeProps): string {
-  return ButtonSizeValues[
-    toButtonSize(bitwiseOr([props.default, props.small, props.large]))
-  ]
-}
-
-export function getPaddingByType(type: ButtonType): string {
-  return ButtonSizeValuesByType[type]
-}
-
-export function getTextColorIfDisabled(props: ButtonDisabledTypeProps): string {
-  return ButtonTextColorDisabled[
-    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled]))
-  ]
-}
-
-export function getCursor(props: ButtonDisabledTypeProps): string {
-  return ButtonCursor[
-    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled]))
-  ]
-}
-
-export function getIsDisabled(props: ButtonDisabledTypeProps): boolean {
-  return (
-    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled])) ===
-    ButtonDisabledType.disabled
-  )
-}
-
-export function getButtonType(props: ButtonTypeProps) {
-  return ButtonTypeValues[
-    toButtonTypes(
-      bitwiseOr([
-        props.basic,
-        props.primary,
-        props.destructive,
-        props.outline,
-        props.plain,
-        props.subtle,
-      ])
-    )
-  ]
-}

package/src/lib/components/molecules/button/button.test.tsx

@@ -1,77 +0,0 @@
-import { Actions } from '@foundations'
-import {render, screen } from '@testing-library/react'
-import { Button } from './index'
-
-describe('Button Tests', () => {
-  describe('ButtonBasic Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonPrimary Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button primary>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonDestructive Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button destructive>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toHaveStyle('background: none')
-    })
-    
-    it('should render Button with given Text', async () => {
-      render(
-        <Button destructive primary>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toHaveStyle(`background: ${Actions.Critical.Default}`)
-    })
-    
-
-  })
-
-  describe('ButtonOutline Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button outline>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonPlain Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button plain>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-  })
-
-})

package/src/lib/components/molecules/button/button.tsx

@@ -1,213 +0,0 @@
-import styled, { css } from 'styled-components'
-import { FC, is, isDefined, Nothing } from '@helpers'
-import { Focused } from '@foundations'
-import {
-  ButtonSizeProps,
-  getBackgroundColorByType,
-  getIsDisabled,
-  getTextColorByType,
-  getIconColorByType,
-  getTextColorIfDisabled,
-  getCursor,
-  getPaddingBySize,
-  getBackgroundColorHoverByType,
-  getTextDecorationHoverByType,
-  getTextColorOnHoverByType,
-  getIconColorOnHoverByType,
-  getBorderByType,
-  getPaddingByType,
-  getBackgroundColorDisabledByType,
-  getBorderDisabledByType,
-  ButtonType,
-  getBackgroundColorPressedByType,
-  getButtonType,
-  ButtonTypeProps,
-} from './button-flags'
-import { ComponentType } from 'react'
-import { Label } from 'components/typography'
-import { Spinner } from 'components/spinner'
-
-const ButtonFrame = styled.button<
-  {
-    backgroundColor: string,
-    buttonSize: string,
-    cursor: string,
-    backgroundHover: string,
-    textDecorationHover: string,
-    backgroundPressed: string,
-    textColorHover: string,
-    buttonBorder: string,
-    isDisabled: boolean,
-    iconColor: string,
-    iconColorHover: string,
-  }
->`
-  padding: ${(props) => props.buttonSize};
-  border: ${(props) => props.buttonBorder};
-  border-radius: 6px;
-  background: ${(props) => props.backgroundColor};
-  cursor: ${(props) => props.cursor};
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 8px;
-  align-items: center;
-  position: relative;
-  svg[role='icon'] {
-    path {
-      fill: ${(props) => props.iconColor};
-    }
-  }
-
-
-  ${(props) => !props.isDisabled && css`
-    &:hover {
-      background: ${props.backgroundHover};
-      color: ${props.textColorHover};
-      text-decoration:  ${props.textDecorationHover};
-      div {
-        color: ${props.textColorHover};
-      }
-      svg[role='icon'] {
-        path {
-          fill: ${props.iconColorHover};
-        }
-      }
-    }
-
-    outline-offset: -2px;
-    &:focus, focus-visible  {
-      outline: 2px solid ${Focused.Default};
-    }
-
-    &:active {
-      text-decoration: 'none';
-      background: ${props.backgroundPressed};
-    }
-  `}
-`
-
-
-const ButtonText = styled(Label)<{ textColor: string, textColorDisabled: string, isLoading: boolean }>`
-  color: ${(props) =>
-    props.textColorDisabled !== '' ? props.textColorDisabled : props.textColor};
-
-  ${(props) =>
-    props.isLoading
-      ? `
-    opacity: 0;
-  `
-      : ''}
-`
-
-const IconContainer = styled.div<{ isLoading: boolean }>`
-  width: 20px;
-  ${(props) =>
-    props.isLoading
-      ? 'visibility: hidden;'
-      : ''
-  }
-`
-
-const Loading = styled(Spinner)`
-  position: absolute;
-`
-
-interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  loading?: boolean
-  IconPrefix?: ComponentType
-  IconSuffix?: ComponentType
-  children?: string
-  subtle?: boolean
-}
-
-function makeButtonConfig(props: IButtonProps & ButtonTypeProps & ButtonSizeProps) {
-  const buttonType  = getButtonType(props)
-  const isDisabled = getIsDisabled(props)
-  const backgroundColor = isDisabled
-    ? getBackgroundColorDisabledByType(buttonType)
-    : getBackgroundColorByType(buttonType)
-  const buttonPadding = getPaddingBySize(props)
-  const buttonOverridePadding = getPaddingByType(buttonType)
-  const cursor = getCursor(props)
-  const backgroundHover = getBackgroundColorHoverByType(buttonType)
-  const textDecorationHover = getTextDecorationHoverByType(buttonType)
-  const backgroundPressed = getBackgroundColorPressedByType(buttonType)
-  const textColorHover = getTextColorOnHoverByType(buttonType)
-  const iconColorHover = getIconColorOnHoverByType(buttonType)
-  const buttonBorder = isDisabled
-    ? getBorderDisabledByType(buttonType)
-    : getBorderByType(buttonType)
-  const buttonSize =
-    buttonOverridePadding !== '' ? buttonOverridePadding : buttonPadding
-  const textColor = getTextColorByType(buttonType)
-  const iconColor = getIconColorByType(buttonType)
-  const textColorDisabled = getTextColorIfDisabled(props)
-
-  return {
-    backgroundColor,
-    buttonSize,
-    cursor,
-    backgroundHover,
-    textDecorationHover,
-    backgroundPressed,
-    textColorHover,
-    iconColorHover,
-    buttonBorder,
-    isDisabled,
-    textColor,
-    iconColor,
-    textColorDisabled,
-    buttonType,
-  }
-}
-
-export const Button: FC<IButtonProps & ButtonTypeProps & ButtonSizeProps> = (
-  props
-) => {
-  const {
-    children,
-    loading,
-    IconPrefix,
-    IconSuffix,
-    type = 'button',
-    ...htmlProps
-  } = props
-  const { textColor, textColorDisabled, buttonType, ...buttonConfig } =
-    makeButtonConfig(props)
-  return (
-    <ButtonFrame {...htmlProps} type={type} {...buttonConfig} data-testid="button-test" role="button">
-      {isDefined(IconPrefix) ? (
-        <IconContainer isLoading={is(loading)}>
-          <IconPrefix />
-        </IconContainer>
-      ) : <Nothing />}
-      <ButtonText
-        strong
-        textColor={textColor}
-        textColorDisabled={textColorDisabled}
-        isLoading={is(loading)}
-      >
-        {children}
-      </ButtonText>
-      {is(loading) ? (
-        <Loading
-          small
-          onPrimary={
-            buttonType === ButtonType.primary ||
-            buttonType === ButtonType.destructivePrimary
-          }
-        />
-      ) : (
-        ''
-      )}
-
-      {isDefined(IconSuffix) ? (
-        <IconContainer isLoading={is(loading)}>
-          <IconSuffix />
-        </IconContainer>
-      ) : <Nothing />}
-    </ButtonFrame>
-  )
-}
-

package/src/lib/components/molecules/button/index.tsx

@@ -1 +0,0 @@
-export * from './button'