chili-ui 0.0.1

package/leda/components/Tabs/ScrollArrows.tsx

@@ -0,0 +1,19 @@
+import type { ArrowProps } from './types';
+import { Icon } from '../Icon';
+import { IconTypes } from '../..';
+
+export const ArrowRight = ({ onClick, theme }: ArrowProps) => (
+  <Icon
+    icon={IconTypes.Icons.ChevronRight}
+    className={theme?.arrowRight}
+    onClick={onClick}
+  />
+);
+
+export const ArrowLeft = ({ onClick, theme }: ArrowProps) => (
+  <Icon
+    icon={IconTypes.Icons.ChevronLeft}
+    onClick={onClick}
+    className={theme?.arrowLeft}
+  />
+);

package/leda/components/Tabs/Tab.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import React from 'react';
+import {
+  getClassNames, useElement, useProps,
+} from '../../utils';
+import type { LiProps } from '../Li';
+import { Li } from '../Li';
+import { TabsContext } from './TabsContext';
+import type { TabProps } from './types';
+
+export const Tab = React.forwardRef((props: TabProps, ref: React.Ref<HTMLElement>): React.ReactElement => {
+  const {
+    onTabSelect, activeTabKey, theme: parentTheme, tabRender: parentTabRender,
+  } = React.useContext(TabsContext);
+
+  const {
+    isDisabled, tabKey, title, className, theme: themeProp, tabRender: childTabRender,
+  } = useProps(props);
+
+  const tabRender = childTabRender ?? parentTabRender;
+
+  // the theme passed to the tab overrides the parent theme and the default theme
+  const theme = { ...parentTheme, ...themeProp };
+
+  const isTabActive = tabKey === activeTabKey;
+
+  const combinedClassNames = getClassNames(
+    theme.tab,
+    { [theme.tabActive]: isTabActive },
+    { [theme.tabDisabled]: isDisabled },
+    className,
+  );
+
+  const TabItem = useElement<TabProps, Record<string, never>, LiProps>(
+    'TabItem',
+    Li,
+    tabRender,
+    props,
+  );
+
+  const handleClick: React.MouseEventHandler<HTMLLIElement> = React.useCallback((event) => {
+    if (!isDisabled) {
+      onTabSelect(event, tabKey);
+    }
+  }, [onTabSelect, isDisabled, tabKey]);
+
+  return (
+    <TabItem
+      className={combinedClassNames}
+      onClick={handleClick}
+      ref={ref}
+    >
+      {title}
+    </TabItem>
+  );
+}) as React.FC<TabProps>;
+
+Tab.displayName = 'Tab';

package/leda/components/Tabs/TabContent.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { isNil } from 'lodash';
+import type { TabContentProps } from './types';
+
+export const TabContent = (props: TabContentProps): React.ReactElement | null => {
+  // if children are not passed - the function will return an empty array
+  const children = React.Children.toArray(props.children);
+  // search for the selected tab
+  const selectedTab = children.find((child) => React.isValidElement(child) && child.props.tabKey === props.activeTabKey);
+  // render the content of the selected tab
+  return React.isValidElement(selectedTab) && !isNil(selectedTab.props.children)
+    ? selectedTab.props.children
+    : null;
+};

package/leda/components/Tabs/Tabs.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import React from 'react';
+import isNil from 'lodash/isNil';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { createSelectHandler } from './handlers';
+import { useCustomElements, useTabsScroll } from './hooks';
+import { TabContent } from './TabContent';
+import { Tab } from './Tab';
+import {
+  getClassNames, useProps, useTheme,
+} from '../../utils';
+import { TabsContext } from './TabsContext';
+import type { TabsProps } from './types';
+import { ArrowLeft, ArrowRight } from './ScrollArrows';
+import { Div } from '../Div';
+
+export const Tabs = React.forwardRef((props: TabsProps, ref?: React.Ref<HTMLElement>): React.ReactElement | null => {
+  const {
+    theme: themeProp,
+    activeTabKey: activeTabKeyProp,
+    children,
+    className,
+    shouldScrollTabs,
+    style,
+    tabContentNode,
+    tabRender,
+  } = useProps(props);
+
+  const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.tabs);
+
+  const [activeTabKeyState, setActiveTabKeyState] = React.useState<string | number>(0);
+
+  // if activeTabKey is not passed - work in uncontrolled mode
+  const activeTabKey = isNil(activeTabKeyProp)
+    ? activeTabKeyState
+    : activeTabKeyProp;
+
+  const handleSelect = createSelectHandler(props, activeTabKeyState, setActiveTabKeyState);
+
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const tabsContext = {
+    activeTabKey, onTabSelect: handleSelect, theme, tabRender,
+  };
+
+  const combinedClassNames = getClassNames(theme.wrapper, className);
+
+  const {
+    Wrapper,
+    Content,
+    Heading,
+  } = useCustomElements(props, { activeTabKey: activeTabKeyState });
+
+  const {
+    containerRef,
+    hasScroll,
+    hasLeftArrow,
+    hasRightArrow,
+    onRightClick,
+    onLeftClick,
+  } = useTabsScroll({ shouldScrollTabs, theme });
+
+  const containerClassNames = getClassNames(
+    theme.container,
+    hasScroll && theme.scroll,
+  );
+
+  const headingClassNames = getClassNames(
+    theme.tabsBar,
+    shouldScrollTabs && theme.scroll,
+  );
+
+  if (!children) return null;
+
+  return (
+    <Wrapper
+      className={combinedClassNames}
+      style={style as React.CSSProperties}
+      ref={ref}
+    >
+      <Div
+        ref={containerRef}
+        className={containerClassNames}
+      >
+        {hasLeftArrow && (
+          <ArrowLeft
+            onClick={onLeftClick}
+            theme={theme}
+          />
+        )}
+
+        {hasRightArrow && (
+          <ArrowRight
+            onClick={onRightClick}
+            theme={theme}
+          />
+        )}
+
+        <Heading className={headingClassNames}>
+          <TabsContext.Provider value={tabsContext}>
+            {React.Children.map(children, (child) => {
+              if (!React.isValidElement(child)) return null;
+
+              return (
+                <Tab {...child.props} />
+              );
+            })}
+          </TabsContext.Provider>
+        </Heading>
+      </Div>
+      <Content className={theme.content} tabContentNode={tabContentNode}>
+        <TabContent activeTabKey={activeTabKey} key={activeTabKey}>
+          {children}
+        </TabContent>
+      </Content>
+    </Wrapper>
+  );
+}) as React.FC<TabsProps>;
+
+Tabs.displayName = 'Tabs';

package/leda/components/Tabs/TabsContext.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { globalDefaultTheme } from '../LedaProvider';
+import type { TabsContextType } from './types';
+
+export const TabsContext = React.createContext<TabsContextType>({
+  onTabSelect: () => {},
+  activeTabKey: 0,
+  theme: globalDefaultTheme[COMPONENTS_NAMESPACES.tabs],
+});

package/leda/components/Tabs/__snapshots__/Tabs.test.tsx.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs SNAPSHOTS should render 1`] = `
+<Tabs
+  onChange={[MockFunction]}
+>
+  <Wrapper
+    className="tabs-wrapper"
+  >
+    <Div
+      className="tabs-wrapper"
+    >
+      <div
+        className="tabs-wrapper"
+      >
+        <Div
+          className="tabs-container"
+        >
+          <div
+            className="tabs-container"
+          >
+            <Heading
+              className="tabs-bar"
+            >
+              <Ul
+                className="tabs-bar"
+              >
+                <ul
+                  className="tabs-bar"
+                >
+                  <Tab
+                    key=".0"
+                    tabKey={0}
+                    title="Tab1"
+                  >
+                    <TabItem
+                      className="tabs-item active"
+                      onClick={[Function]}
+                    >
+                      <Li
+                        className="tabs-item active"
+                        onClick={[Function]}
+                      >
+                        <li
+                          className="tabs-item active"
+                          onClick={[Function]}
+                        >
+                          Tab1
+                        </li>
+                      </Li>
+                    </TabItem>
+                  </Tab>
+                  <Tab
+                    key=".1"
+                    tabKey={1}
+                    title="Tab2"
+                  >
+                    <TabItem
+                      className="tabs-item"
+                      onClick={[Function]}
+                    >
+                      <Li
+                        className="tabs-item"
+                        onClick={[Function]}
+                      >
+                        <li
+                          className="tabs-item"
+                          onClick={[Function]}
+                        >
+                          Tab2
+                        </li>
+                      </Li>
+                    </TabItem>
+                  </Tab>
+                </ul>
+              </Ul>
+            </Heading>
+          </div>
+        </Div>
+        <Content
+          className="tabs-content"
+        >
+          <Component
+            className="tabs-content"
+          >
+            <Div
+              className="tabs-content"
+            >
+              <div
+                className="tabs-content"
+              >
+                <Component
+                  activeTabKey={0}
+                  key="0"
+                >
+                  Tab1
+                </Component>
+              </div>
+            </Div>
+          </Component>
+        </Content>
+      </div>
+    </Div>
+  </Wrapper>
+</Tabs>
+`;

package/leda/components/Tabs/handlers.ts

@@ -0,0 +1,20 @@
+import { isNil } from 'lodash';
+import type { CreateSelectHandler } from './types';
+
+export const createSelectHandler: CreateSelectHandler = (props, activeTabKeyState, setActiveTabKeyState) => (ev, tabKey) => {
+  const { activeTabKey, onChange } = props;
+  // If activeTabKey is not passed - use state
+  if (isNil(activeTabKey)) {
+    setActiveTabKeyState(tabKey);
+  }
+  if (onChange) {
+    const customEvent = {
+      ...ev,
+      component: {
+        value: tabKey,
+      },
+    };
+
+    onChange(customEvent);
+  }
+};

package/leda/components/Tabs/hooks.ts

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { useElement, useElementRef } from '../../utils';
+import { Div } from '../Div';
+import { LedaContext } from '../LedaProvider';
+import { Ul } from '../Ul';
+import type {
+  CustomElements, TabsProps, TabsScroll, TabsScrollProps,
+} from './types';
+import { ContentElement } from './ContentElement';
+
+export const useCustomElements = (props: TabsProps, state: { activeTabKey: string | number }): CustomElements => {
+  const { renders: { [COMPONENTS_NAMESPACES.tabs]: tabsRenders } } = React.useContext(LedaContext);
+
+  const {
+    wrapperRender, contentRender, headingRender,
+  } = props;
+
+  const Wrapper = useElement(
+    'Wrapper',
+    Div,
+    wrapperRender || tabsRenders.wrapperRender,
+    props,
+    state,
+  );
+
+  const Content = useElement(
+    'Content',
+    ContentElement,
+    contentRender || tabsRenders.contentRender,
+    props,
+    state,
+  );
+
+  const Heading = useElement(
+    'Heading',
+    Ul,
+    headingRender || tabsRenders.headerRender,
+    props,
+    state,
+  );
+
+  return {
+    Wrapper,
+    Content,
+    Heading,
+  };
+};
+
+export const useTabsScroll = ({ shouldScrollTabs, theme }: TabsScrollProps): TabsScroll => {
+  const [Element, containerRef] = useElementRef();
+  const [hasScroll, setHasScroll] = React.useState(false);
+  const [hasLeftArrow, setHasLeftArrow] = React.useState(false);
+  const [hasRightArrow, setHasRightArrow] = React.useState(false);
+  const mainElementRect = Element?.getBoundingClientRect();
+  const tabsContainer = Element?.querySelector(`.${theme.tabsBar}`);
+  const tabs = Element?.querySelectorAll(`.${theme.tab}`);
+  const elementRect = Element?.getBoundingClientRect();
+
+  const setScrollControls = () => {
+    if (shouldScrollTabs && Element && elementRect && tabsContainer) {
+      const tabsContainerRect = tabsContainer.getBoundingClientRect();
+
+      if (tabsContainerRect.width > elementRect.width) {
+        setHasScroll(true);
+
+        setHasLeftArrow(tabsContainerRect.left < elementRect.left);
+        setHasRightArrow(Math.round(tabsContainerRect.right) > elementRect.right);
+      }
+    }
+  };
+
+  const onRightClick = () => {
+    if (tabsContainer == null || mainElementRect == null) return;
+
+    if (tabs === undefined) return;
+
+    const tabCrossingRightBorder = [...tabs].find((el) => el.getBoundingClientRect().right > mainElementRect.right);
+    if (tabCrossingRightBorder == null) return;
+
+    const tabShift = tabCrossingRightBorder.getBoundingClientRect().right - mainElementRect.right;
+    const leftShift = Math.abs(tabsContainer.getBoundingClientRect().left - mainElementRect.left);
+
+    Element?.scrollTo({
+      top: mainElementRect.top,
+      left: mainElementRect.left + tabShift + leftShift,
+      behavior: 'smooth',
+    });
+  };
+
+  const onLeftClick = () => {
+    if (tabsContainer == null || mainElementRect == null) return;
+
+    if (tabs === undefined) return;
+
+    const tabCrossingLeftBorder = [...tabs].reverse().find((el) => el.getBoundingClientRect().left < mainElementRect.left);
+    if (tabCrossingLeftBorder == null) return;
+
+    const tabShift = Math.ceil(Math.abs(tabCrossingLeftBorder.getBoundingClientRect().left - mainElementRect.left));
+    const leftShift = Math.abs(tabsContainer.getBoundingClientRect().left - mainElementRect.left);
+
+    Element?.scrollTo({
+      top: mainElementRect.top,
+      left: leftShift - tabShift,
+      behavior: 'smooth',
+    });
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(setScrollControls, [Element]);
+
+  React.useEffect(() => {
+    Element?.addEventListener('scroll', setScrollControls);
+
+    return () => {
+      Element?.removeEventListener('scroll', setScrollControls);
+    };
+  });
+
+  return {
+    containerRef,
+    hasLeftArrow,
+    hasRightArrow,
+    hasScroll,
+    onLeftClick,
+    onRightClick,
+  };
+};

package/leda/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export { Tab } from './Tab';

package/leda/components/Tabs/theme.ts

@@ -0,0 +1,14 @@
+/* eslint-disable key-spacing */
+export const defaultTabsTheme = {
+  arrowLeft:                'ld-tabs-arrow ld-tabs-arrow-left',
+  arrowRight:               'ld-tabs-arrow ld-tabs-arrow-right',
+  container:                'ld-tabs-container',
+  content:                  'ld-tabs-content',
+  scroll:                   'ld-tab-scroll',
+  tab:                      'ld-tab',
+  tabActive:                'ld-tab-active',
+  tabDisabled:              'ld-tab-disabled',
+  tabsBar:                  'ld-tabs-bar',
+  wrapper:                  'ld-tabs-wrapper',
+};
+/* eslint-enable key-spacing */

package/leda/components/Tabs/types.ts

@@ -0,0 +1,129 @@
+import type React from 'react';
+import type { CustomRender } from '../../commonTypes';
+import type { COMPONENTS_NAMESPACES } from '../../constants';
+import type { GlobalDefaultTheme, PartialGlobalDefaultTheme } from '../../utils/useTheme';
+import type { LiProps } from '../Li';
+import type { defaultTabsTheme } from './theme';
+
+export interface TabsProps {
+  /** Active tab number */
+  activeTabKey?: string | number,
+  /** Tabs */
+  children?: React.ReactNode,
+  /** Content customizator */
+  contentRender?: CustomRender<TabsProps, TabsState, ContentProps>,
+  /** Heading customizator */
+  headingRender?: CustomRender<TabsProps, TabsState, HeadingProps>,
+  /** Tab change handler */
+  onChange?: (event: ChangeEvent) => void,
+  /** Reference */
+  ref?: React.Ref<HTMLElement>,
+  /** Horizontal tabs scroll if there are too many tabs */
+  shouldScrollTabs?: boolean,
+  /** DOM-node to put tab content in */
+  tabContentNode?: HTMLElement | null,
+  /** Tab customizator */
+  tabRender?: CustomRender<TabProps, Record<string, never>, LiProps>,
+  /** Theme */
+  theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.tabs],
+  /** Wrapper customizator */
+  wrapperRender?: CustomRender<TabsProps, TabsState, WrapperProps>,
+  /** _css-class-names */
+  [x: string]: unknown,
+}
+
+export interface TabsState {
+  activeTabKey: string | number,
+}
+
+export type TabProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+  /** Tab content */
+  children?: React.ReactNode,
+  /** In case you want the tab to be disabled */
+  isDisabled?: boolean,
+  /** Tab number. Numbering from 0, because the onSelect handler of the Tabs comoponent returns the tab number starting from 0 */
+  tabKey: string | number,
+  /** Tab customizator */
+  tabRender?: CustomRender<TabProps, Record<string, never>, LiProps>,
+  /** Theme */
+  theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.tabs],
+  /** Title */
+  title: React.ReactNode,
+  /** _css-class-names */
+  [x: string]: unknown,
+};
+
+export interface TabsContextType {
+  activeTabKey: string | number,
+  onTabSelect: SelectHandler,
+  tabRender?: CustomRender<TabProps, Record<string, never>, LiProps>,
+  theme: GlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.tabs],
+}
+
+export interface SelectHandler {
+  (ev: React.MouseEvent<HTMLLIElement>, tabKey: string | number): void,
+}
+
+export interface CreateSelectHandler {
+  (
+    props: TabsProps,
+    activeTabKey: string | number,
+    setActiveTabKey: React.Dispatch<React.SetStateAction<string | number>>
+  ): SelectHandler,
+}
+
+export interface TabContentProps {
+  /** EventKey of the selected tab */
+  activeTabKey: string | number,
+  /** Nested elements */
+  children?: React.ReactNode,
+}
+
+export interface ChangeEvent extends React.MouseEvent {
+  component: {
+    value: string | number,
+  },
+}
+
+export interface WrapperProps {
+  className?: string,
+  style?: React.CSSProperties,
+  ref?: React.Ref<HTMLElement>,
+  children?: React.ReactNode,
+}
+
+export interface ContentProps {
+  className?: string,
+  children?: React.ReactNode,
+  tabContentNode?: Element | null,
+}
+
+export interface HeadingProps {
+  className?: string,
+  children?: React.ReactNode,
+}
+
+export interface CustomElements {
+  Wrapper: React.FC<WrapperProps>,
+  Content: React.FC<ContentProps>,
+  Heading: React.FC<HeadingProps>,
+}
+
+export interface ArrowProps {
+  onClick: React.MouseEventHandler,
+  theme: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.tabs],
+}
+
+export interface TabsScroll {
+  containerRef: React.Ref<HTMLElement>,
+  hasScroll: boolean,
+  hasLeftArrow: boolean,
+  hasRightArrow: boolean,
+  onRightClick: React.MouseEventHandler,
+  onLeftClick: React.MouseEventHandler,
+}
+
+export interface TabsScrollProps {
+  shouldScrollTabs?: boolean,
+  theme: typeof defaultTabsTheme,
+}

package/leda/components/Tags/Tag.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+// Static HTML element with event handler requires role
+import * as React from 'react';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import {
+  getClassNames, useElement, useProps,
+} from '../../utils';
+import { globalDefaultTheme, LedaContext } from '../LedaProvider';
+import { Span } from '../Span';
+import type { TagProps } from './types';
+import { Icon } from '../Icon';
+import { IconTypes } from '../..';
+
+export const Tag = React.forwardRef((props: TagProps, ref?: React.Ref<HTMLElement>): React.ReactElement => {
+  const {
+    children,
+    className,
+    iconRender,
+    wrapperRender,
+    onIconClick,
+    theme = globalDefaultTheme[COMPONENTS_NAMESPACES.tags],
+    ...restProps
+  } = useProps(props);
+
+  const { renders: { [COMPONENTS_NAMESPACES.tags]: tagsRenders } } = React.useContext(LedaContext);
+
+  const combinedClassNames = getClassNames(
+    theme.tag,
+    className,
+  );
+
+  const Wrapper = useElement(
+    'Wrapper',
+    Span,
+    wrapperRender || tagsRenders.tagWrapperRender,
+    props,
+  );
+
+  return (
+    <Wrapper
+      className={combinedClassNames}
+      {...restProps}
+      ref={ref}
+    >
+      { children }
+      <Icon
+        icon={IconTypes.Icons.X}
+        className={theme.closeIcon}
+        onClick={onIconClick}
+      />
+    </Wrapper>
+  );
+}) as React.FC<TagProps>;
+
+Tag.displayName = 'Tag';