forstok-ui-lib 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Forstok UI Components Library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/checkbox/checkbox.styles.ts

@@ -0,0 +1,109 @@
+import styled, { css } from 'styled-components';
+
+const getInputContainerStyled = css`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+`
+const arrowIconStyles = css`
+  padding-right: 18px;
+  i {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    margin-top: -10px;
+  }
+`
+const getCheckboxModifiedStyled = ({ $flow, $iconRight, disabled }:{ $flow?: string, $iconRight?: boolean, disabled: boolean }) => {
+  let style = ``;
+  if (disabled) {
+    style += `
+      cursor: default; 
+    `
+  }
+  switch ($flow) {
+    case 'column':
+      style +=  `
+        display: inline-grid; 
+        grid-auto-flow: column;
+      `
+      break
+    default:
+      style += `
+        display: grid; 
+        grid-auto-flow: row;
+      `
+      break
+  }
+  if ($iconRight) {
+    style += arrowIconStyles
+  }
+  return style;
+}
+const getCheckmarkPropsModifiedStyled = ({ $isError }:{ $isError?: boolean }) => {
+  let style = ``;
+  if ($isError) {
+    style += ` 
+      border:1px solid #fc5c64; 
+    `
+  }
+  return style;
+}
+
+export const CheckmarkContainer = styled.span<{ $isError?: boolean }>`
+  position: absolute;
+  left: 0;
+  height: 14px;
+  width: 14px;
+  background-color: var(--cl-clr-bg);
+  border: 1px solid var(--ck-clr-ln);
+  border-radius: var(--ter-rd);
+  &:after {
+    content: "";
+    position: absolute;
+    display: none;
+    left: -1px;
+    top: -1px;
+    width: 16px;
+    height: 16px;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E");
+    border-radius: var(--ter-rd);
+  }
+  ${getCheckmarkPropsModifiedStyled}
+`
+export const CheckboxContainer = styled.label<{ $flow?: string, $iconRight?: boolean, disabled: boolean }>`
+  grid-gap: 6px;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+  padding-left: 24px;
+  > input { 
+    ${getInputContainerStyled} 
+  }
+  input:checked ~ span, 
+  input.checked ~ span {
+    background-color: var(--ck-clr-bg__act);
+    border: 0;
+  }
+  input:checked ~ span:after, 
+  input.checked ~ span:after {
+    display: grid;
+  }
+  @media (min-width: 425px) {
+    padding-left: 24px;
+  }
+  ${getCheckboxModifiedStyled}
+`
+export const InputContainer = styled.input`
+  &:disabled {
+    cursor: default;
+    & + span {
+      background-color: var(--mt-clr-bg);
+      border-color: var(--pri-clr-ln);
+    }
+  }
+  ${getInputContainerStyled}
+`

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,68 @@
+import { useRef, useEffect, useState, type PropsWithChildren, type InputHTMLAttributes, type ChangeEvent } from 'react';
+import InputComponent from '../input/input';
+import { CheckboxContainer, CheckmarkContainer } from './checkbox.styles';
+import type { TState } from '../../typeds/base.typed';
+
+type TInput = InputHTMLAttributes<HTMLInputElement> & {
+  evChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  $flow?: string
+  extendKey?: string | null
+  extendClass?: string
+  reset?: boolean 
+  setReset?: TState<boolean>
+  isForceUpdate?: boolean 
+  setForceUpdate?: (value: boolean) => void | TState<boolean>
+  $isError?: boolean
+  $iconRight?: boolean
+  'data-qa-id'?: string
+};
+
+const CheckboxComponent = ({ id, name, children, $flow, extendKey, extendClass, reset, setReset, isForceUpdate, setForceUpdate, evChange, $isError, $iconRight, ...props }:PropsWithChildren<TInput>) => {
+  const { disabled, defaultChecked } = props;
+  const [inputChecked, evInputChecked] = useState<boolean>(defaultChecked||false);
+  const checkboxRef = useRef<HTMLLabelElement | null>(null);
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      evInputChecked(defaultChecked||false);
+      setForceUpdate && setForceUpdate(false);
+    }
+    if (reset) {
+      evInputChecked(false);
+      setReset && setReset(false);
+    }
+  }, [reset, setReset, isForceUpdate, setForceUpdate, defaultChecked]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    evInputChecked(e.target.checked);
+    evChange && evChange(e);
+  };
+
+  let parseProps = {...props};
+  delete parseProps.defaultChecked;
+
+  return (
+    <CheckboxContainer 
+      $flow={$flow} 
+      $iconRight={$iconRight} 
+      ref={checkboxRef} 
+      htmlFor={id} 
+      disabled={disabled || false} >
+      {children}
+      <InputComponent 
+        id={id} 
+        type='checkbox' 
+        checked={inputChecked}
+        name={name} 
+        evChange={handleChange} 
+        {...extendClass && { className: extendClass }} 
+        {...extendKey !== '' && { 'data-key': extendKey }} 
+        {...props} />
+      <CheckmarkContainer 
+        $isError={$isError} 
+        {...props['data-qa-id'] && { 'data-qa-id': props['data-qa-id'] }} />
+    </CheckboxContainer>
+  );
+};
+
+export default CheckboxComponent;

package/src/components/link/link.tsx

@@ -21,8 +21,34 @@ type TLinkBase = {
 
 const LinkComponent = ({ children, mode, $activated=false, href, $elipsis=false, $shadow=false, disabled=false, ...props }: TLinkBase) => {
   const { onClick } = props
-  return ( 
-    href ? <AnchorLinkContainer className='_refLink' mode={mode} $activated={$activated ? true : false} $elipsis={$elipsis ? true : false} $shadow={$shadow ? true : false} disabled={disabled ? true : false} href={href} {...props}>{children}</AnchorLinkContainer> : <ElLinkContainer className='_refLink' mode={mode} $activated={$activated ? true : false} $elipsis={$elipsis ? true : false} $shadow={$shadow ? true : false} disabled={disabled ? true : false} onClick={onClick} {...props}>{children}</ElLinkContainer>)
+  return (
+    href ? (
+      <AnchorLinkContainer 
+        className='_refLink'
+        mode={mode}
+        $activated={$activated}
+        $elipsis={$elipsis}
+        $shadow={$shadow}
+        disabled={disabled}
+        href={href}
+        {...props}
+      >
+        {children}
+      </AnchorLinkContainer>
+    ) : (
+      <ElLinkContainer
+        className='_refLink'
+        mode={mode}
+        $activated={$activated}
+        $elipsis={$elipsis}
+        $shadow={$shadow}
+        disabled={disabled}
+        onClick={onClick}
+        {...props}
+      >
+        {children}
+      </ElLinkContainer>
+    )
   );
 };