forstok-ui-lib 4.1.0 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "4.1.0",
+  "version": "5.0.1",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/button/{button.tsx → index.tsx}

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode, RefObject } from 'react' ;
-import { ButtonContainer, IndicatorsArrowIconSvg } from './button.styles';
+import { ButtonContainer, IndicatorsArrowIconSvg } from './styles';
 
 type TButton = ButtonHTMLAttributes<HTMLButtonElement> & {
   children?: ReactNode

package/src/components/checkbox/{checkbox.tsx → index.tsx}

@@ -1,6 +1,6 @@
 import { useRef, useEffect, useState, type PropsWithChildren, type InputHTMLAttributes, type ChangeEvent } from 'react';
-import InputComponent from '../input/input';
-import { CheckboxContainer, CheckmarkContainer } from './checkbox.styles';
+import InputComponent from '../input';
+import { CheckboxContainer, CheckmarkContainer } from './styles';
 import type { TState } from '../../typeds/base.typed';
 
 type TInput = InputHTMLAttributes<HTMLInputElement> & {

package/src/components/dropdown/{dropdown.tsx → index.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useRef, isValidElement } from 'react';
-import ReactPortalComponent from '../portal/react_portal';
-import { DropDownContainer, DropDownTitle, DropDownSubTitle, DropDownWrapper, DropDownOverlayWrapper, DropDownControl, DropDownBody, DropDownAction, DropdownControlWrapper, DropdownPortalContainer } from './dropdown.styles';
+import ReactPortalComponent from '../portal';
+import { DropDownContainer, DropDownTitle, DropDownSubTitle, DropDownWrapper, DropDownOverlayWrapper, DropDownControl, DropDownBody, DropDownAction, DropdownControlWrapper, DropdownPortalContainer } from './styles';
 import type { TMouseEvent } from '../../typeds/base.typed';
-import type { TDropdown } from './dropdown.typed';
+import type { TDropdown } from './typed';
 
 const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externalMinWidth, $internalWidth, $area, $openPosition, $placement, $top, onClick, $alias, type, portalId, $bottom, ...props }: TDropdown) => {
   const buttonRef = useRef<HTMLElement>(null);

package/src/components/dropdown/{dropdown.styles.ts → styles.ts}

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { dropBase } from '../../assets/stylesheets/bases.styles';
-import type { TDropdown } from './dropdown.typed';
+import type { TDropdown } from './typed';
 
 type TDropdownChild = Pick<TDropdown, '$internalWidth' | '$openPosition' | '$placement' | '$bottom' | '$top'>
 type TDropdownParent = Pick<TDropdown, '$openPosition' | '$placement' | '$bottom' | '$top' | '$alias' | '$externalWidth' | '$externalMinWidth' | '$area'>

package/src/components/form/styles.ts

@@ -0,0 +1,56 @@
+import styled, { css } from 'styled-components'
+
+const PartialFormContainerStyles = css`
+  display: grid;
+  grid-row-gap: 12px;
+  grid-column-gap: 16px;
+  width: 100%;
+  margin-bottom: 12px;
+  align-items: start;
+`
+
+const getFormContainerModifiedStyles = ({ name }:{ name?: string }) => {
+  let style = ``
+  if (name === 'invoiceForm') {
+    style += `
+      grid-gap: 15px;
+    `
+  }
+  return style
+}
+
+const getInnerFormContainerModifiedStyles =({ $width }:{ $width?: string | number }) => {
+  let style = ``
+  if ($width) {
+    style += ` 
+      @media (min-width: 768px) {
+        width: ${$width}; 
+      }
+    `
+  }
+  return style
+}
+
+export const FormContainer = styled.form.attrs((props: { name?: string; autoComplete?: string }) => ({
+    name: props.name || 'form',
+    autoComplete: props.autoComplete || 'off'
+}))<{ name?: string }>`
+  display: inline-grid;
+  grid-auto-flow: row;
+  grid-gap: 25px;
+  width: 100%;
+  height: 100%;
+  [class*='singleValue'] {
+    width: 100%;
+    color: var(--inp-clr);
+    ._refLabel {
+      top: 5.5px;
+      right: 0;
+    }
+  }
+  ${getFormContainerModifiedStyles}
+`
+export const SingleFormContainer = styled.section<{ $width?: string | number }>`
+  ${PartialFormContainerStyles}
+  ${getInnerFormContainerModifiedStyles}
+`

package/src/components/icon/{icon.tsx → index.tsx}

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
-import LoadingComponent from '../loading/loading';
-import { IconContainer } from './icon.styles';
+import LoadingComponent from '../loading';
+import { IconContainer } from './styles';
 
 type TIcon = HTMLAttributes<HTMLElement> & {
   $mode?: string

package/src/components/index.ts

@@ -1,17 +1,19 @@
-export { default as TextComponent } from './text/text';
-export { default as LinkComponent } from './link/link';
-export { default as InputComponent } from './input/input';
-export { default as CheckboxComponent } from './checkbox/checkbox';
-export { default as ButtonComponent } from './button/button';
-export { default as LabelComponent } from './label/label';
-export { default as IconComponent } from './icon/icon';
-export { default as LoadingComponent } from './loading/loading';
-export { default as DropdownComponent } from './dropdown/dropdown';
-export { default as MessageComponent } from './message/message';
-export { default as MessageQuestionComponent } from './message/message_question'; 
-export { default as PopupComponent } from './popup/popup';
-export { default as ReactPortalComponent } from './portal/react_portal';
+export { default as TextComponent } from './text';
+export { default as LinkComponent } from './link';
+export { default as InputComponent } from './input';
+export { default as CheckboxComponent } from './checkbox';
+export { default as ButtonComponent } from './button';
+export { default as LabelComponent } from './label';
+export { default as IconComponent } from './icon';
+export { default as LoadingComponent } from './loading';
+export { default as DropdownComponent } from './dropdown';
+export { default as MessageComponent } from './message';
+export { default as MessageQuestionComponent } from './message/question'; 
+export { default as PopupComponent } from './popup';
+export { default as ReactPortalComponent } from './portal';
 
-export * from './dropdown/dropdown.typed';
-export * from './message/message.typed';
-export * from './popup/popup.typed';
+export * from './dropdown/typed';
+export * from './message/typed';
+export * from './popup/typed';
+
+export * from './form/styles';

package/src/components/input/{input.tsx → index.tsx}

@@ -1,5 +1,5 @@
 import { useState, useEffect, type InputHTMLAttributes, type ChangeEvent, type FocusEvent, type KeyboardEvent, type ClipboardEvent } from 'react';
-import { InputContainer } from './input.styles';
+import { InputContainer } from './styles';
 import type { TEnterEvent, TKeyboadEvent, TState } from '../../typeds/base.typed';
 
 type TInput = InputHTMLAttributes<HTMLInputElement> & {

package/src/components/label/{label.tsx → index.tsx}

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
-import { ElContainer } from './label.styles';
+import { ElContainer } from './styles';
 
 type TLabel = HTMLAttributes<HTMLSpanElement> & {
   children: ReactNode

package/src/components/link/{link.tsx → index.tsx}

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, ReactNode, MouseEvent, HTMLAttributes } from 'react';
-import { AnchorLinkContainer, ElLinkContainer } from './link.styles';
+import { AnchorLinkContainer, ElLinkContainer } from './styles';
 
 type TLinkBase = {
   children: ReactNode

package/src/components/loading/{loading.tsx → index.tsx}

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import { LoadingContainer, LoadingParentContainer } from './loading.styles';
+import { LoadingContainer, LoadingParentContainer } from './styles';
 
 export type TLoading = HTMLAttributes<HTMLDivElement> & {
   $mode?: string

package/src/components/loading/{loading.styles.ts → styles.ts}

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-import type { TLoading } from './loading'
+import type { TLoading } from '.'
 
 type TLoadingChild = Omit<TLoading, 'shape' | 'extendClass'>
 

package/src/components/message/{message.tsx → index.tsx}

@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react';
 import { useStateWithCallbackLazy } from 'use-state-with-callback';
-import ButtonComponent from '../button/button';
-import { Message, MessageOverlay, MessageContainer, MessageWrapper, MessageContent } from './message.styles';
-import type { TMessage } from './message.typed';
+import ButtonComponent from '../button';
+import { Message, MessageOverlay, MessageContainer, MessageWrapper, MessageContent } from './styles';
+import type { TMessage } from './typed';
 
 const MessageComponent = ({ timer=500, $type, message, callback }: TMessage) => {
   const [isOpen, setOpen] = useStateWithCallbackLazy<boolean>(false);

package/src/components/message/{message_question.tsx → question.tsx}

@@ -1,10 +1,10 @@
 import { useCallback, useEffect } from 'react';
 import { htmlToText } from 'html-to-text';
 import { useStateWithCallbackLazy } from 'use-state-with-callback';
-import ButtonComponent from '../button/button';
-import TextComponent from '../text/text';
-import { Message, MessageOverlay, MessageContainer, MessageWrapper, MessageContent } from './message.styles'
-import type { TMessageQuestion } from './message.typed'
+import ButtonComponent from '../button';
+import TextComponent from '../text';
+import { Message, MessageOverlay, MessageContainer, MessageWrapper, MessageContent } from './styles'
+import type { TMessageQuestion } from './typed'
 
 const MessageQuestionComponent = ({ $type, title, subtitle, callback, buttonSubmit, cancelCallback }: TMessageQuestion) => {
   const [isOpen, setOpen] = useStateWithCallbackLazy<boolean>(false);

package/src/components/popup/{popup.tsx → index.tsx}

@@ -1,9 +1,9 @@
 import { type ReactNode, isValidElement, useEffect, useRef, useCallback } from 'react';
 import { useStateWithCallbackLazy } from 'use-state-with-callback';
-import ButtonComponent from '../button/button';
-import IconComponent from '../icon/icon';
-import { PopupPanel, PopupOverlay, PopupContainer, PopupWrapper, PopupHeaderWrapper, PopupHeader, PopupBody, PopupFooter, PopupQuestionWrapper } from './popup.styles';
-import type { TPopup } from './popup.typed';
+import ButtonComponent from '../button';
+import IconComponent from '../icon';
+import { PopupPanel, PopupOverlay, PopupContainer, PopupWrapper, PopupHeaderWrapper, PopupHeader, PopupBody, PopupFooter, PopupQuestionWrapper } from './styles';
+import type { TPopup } from './typed';
 
 type TPopupOtherProp = {
   children: ReactNode[]

package/src/components/popup/{popup.typed.ts → typed.ts}

@@ -1,6 +1,6 @@
 import type { MouseEvent } from 'react'
 
-import type { TMessageFunction } from '../message/message.typed'
+import type { TMessageFunction } from '../message/typed'
 
 export type TPopupOpenFunction = (e: MouseEvent, el?: string) => void
 
@@ -21,7 +21,7 @@ export type TPopupFunctionGroup = {
 
 export type TPopupContainer = {
   isOpen: boolean
-} & Required<TPopupFunctionParam> & Required<TPopupFunctionGroup>
+} & Required<TPopupFunctionParam> & TPopupFunctionGroup
 
 
 export type TPopup = {

package/src/components/text/{text.tsx → index.tsx}

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { TextContainer } from './text.styles';
+import { TextContainer } from './styles';
 
 type TText = HTMLAttributes<HTMLSpanElement> & { 
   children: ReactNode

package/src/typeds/shares.typed.ts

@@ -1,7 +1,7 @@
 import { TObject } from './base.typed';
-import { TCloseDropdownFunction } from '../components/dropdown/dropdown.typed';
-import { TMessageFunction, TMessageQuestionFunction } from '../components/message/message.typed';
-import { TPopupFunction, TPopupOpenFunction } from '../components/popup/popup.typed';
+import { TCloseDropdownFunction } from '../components/dropdown/typed';
+import { TMessageFunction, TMessageQuestionFunction } from '../components/message/typed';
+import { TPopupFunction, TPopupOpenFunction } from '../components/popup/typed';
 
 export type TUser = {
   profile_id: number,