chili-ui 0.0.1

package/leda/components/Icon/types.ts

@@ -0,0 +1,316 @@
+import type { SVGProps } from 'react';
+
+export type IconProps = {
+  // fill color, e.g. red or #ff0000 or rgb(255,0,0), default is none
+  fill?: string | null,
+  // one of the feather icons
+  icon: `${Icons}`,
+  // in case you don't want the component to show up
+  shouldRender?: boolean,
+  // icon size, default is 24
+  size?: number | string | null,
+  // stroke color, e.g. red or #ff0000 or rgb(255,0,0), defaults to currentColor
+  stroke?: string | null,
+  // stroke opacity
+  strokeOpacity?: number | string | null,
+  // stroke width, default is 2
+  strokeWidth?: number | string | null,
+  // _ css classes
+  [x: string]: unknown,
+} & Omit<
+SVGProps<SVGElement>,
+'fill'
+| 'stroke'
+| 'strokeOpacity'
+| 'strokeWidth'
+>;
+
+export enum Icons {
+  Activity = 'activity',
+  Airplay = 'airplay',
+  AlertCircle = 'alert-circle',
+  AlertOctagon = 'alert-octagon',
+  AlertTriangle = 'alert-triangle',
+  AlignCenter = 'align-center',
+  AlignJustify = 'align-justify',
+  AlignLeft = 'align-left',
+  AlignRight = 'align-right',
+  Anchor = 'anchor',
+  Aperture = 'aperture',
+  Archive = 'archive',
+  ArrowDownCircle = 'arrow-down-circle',
+  ArrowDownLeft = 'arrow-down-left',
+  ArrowDownRight = 'arrow-down-right',
+  ArrowDown = 'arrow-down',
+  ArrowLeftCircle = 'arrow-left-circle',
+  ArrowLeft = 'arrow-left',
+  ArrowRightCircle = 'arrow-right-circle',
+  ArrowRight = 'arrow-right',
+  ArrowUpCircle = 'arrow-up-circle',
+  ArrowUpLeft = 'arrow-up-left',
+  ArrowUpRight = 'arrow-up-right',
+  ArrowUp = 'arrow-up',
+  AtSign = 'at-sign',
+  Award = 'award',
+  BarChart2 = 'bar-chart-2',
+  BarChart = 'bar-chart',
+  BatteryCharging = 'battery-charging',
+  Battery = 'battery',
+  BellOff = 'bell-off',
+  Bell = 'bell',
+  Bluetooth = 'bluetooth',
+  Bold = 'bold',
+  BookOpen = 'book-open',
+  Book = 'book',
+  Bookmark = 'bookmark',
+  Box = 'box',
+  Briefcase = 'briefcase',
+  Calendar = 'calendar',
+  CameraOff = 'camera-off',
+  Camera = 'camera',
+  Cast = 'cast',
+  CheckCircle = 'check-circle',
+  CheckSquare = 'check-square',
+  Check = 'check',
+  ChevronDown = 'chevron-down',
+  ChevronLeft = 'chevron-left',
+  ChevronRight = 'chevron-right',
+  ChevronUp = 'chevron-up',
+  ChevronsDown = 'chevrons-down',
+  ChevronsLeft = 'chevrons-left',
+  ChevronsRight = 'chevrons-right',
+  ChevronsUp = 'chevrons-up',
+  Chrome = 'chrome',
+  Circle = 'circle',
+  Clipboard = 'clipboard',
+  Clock = 'clock',
+  CloudDrizzle = 'cloud-drizzle',
+  CloudLightning = 'cloud-lightning',
+  CloudOff = 'cloud-off',
+  CloudRain = 'cloud-rain',
+  CloudSnow = 'cloud-snow',
+  Cloud = 'cloud',
+  Code = 'code',
+  Codepen = 'codepen',
+  Codesandbox = 'codesandbox',
+  Coffee = 'coffee',
+  Columns = 'columns',
+  Command = 'command',
+  Compass = 'compass',
+  Copy = 'copy',
+  CornerDownLeft = 'corner-down-left',
+  CornerDownRight = 'corner-down-right',
+  CornerLeftDown = 'corner-left-down',
+  CornerLeftUp = 'corner-left-up',
+  CornerRightDown = 'corner-right-down',
+  CornerRightUp = 'corner-right-up',
+  CornerUpLeft = 'corner-up-left',
+  CornerUpRight = 'corner-up-right',
+  Cpu = 'cpu',
+  CreditCard = 'credit-card',
+  Crop = 'crop',
+  Crosshair = 'crosshair',
+  Database = 'database',
+  Delete = 'delete',
+  Disc = 'disc',
+  DivideCircle = 'divide-circle',
+  DivideSquare = 'divide-square',
+  Divide = 'divide',
+  DollarSign = 'dollar-sign',
+  DownloadCloud = 'download-cloud',
+  Download = 'download',
+  Dribbble = 'dribbble',
+  Droplet = 'droplet',
+  Edit2 = 'edit-2',
+  Edit3 = 'edit-3',
+  Edit = 'edit',
+  ExternalLink = 'external-link',
+  EyeOff = 'eye-off',
+  Eye = 'eye',
+  Facebook = 'facebook',
+  FastForward = 'fast-forward',
+  Feather = 'feather',
+  Figma = 'figma',
+  FileMinus = 'file-minus',
+  FilePlus = 'file-plus',
+  FileText = 'file-text',
+  File = 'file',
+  Film = 'film',
+  Filter = 'filter',
+  Flag = 'flag',
+  FolderMinus = 'folder-minus',
+  FolderPlus = 'folder-plus',
+  Folder = 'folder',
+  Framer = 'framer',
+  Frown = 'frown',
+  Gift = 'gift',
+  GitBranch = 'git-branch',
+  GitCommit = 'git-commit',
+  GitMerge = 'git-merge',
+  GitPullRequest = 'git-pull-request',
+  Github = 'github',
+  Gitlab = 'gitlab',
+  Globe = 'globe',
+  Grid = 'grid',
+  HardDrive = 'hard-drive',
+  Hash = 'hash',
+  Headphones = 'headphones',
+  Heart = 'heart',
+  HelpCircle = 'help-circle',
+  Hexagon = 'hexagon',
+  Home = 'home',
+  Image = 'image',
+  Inbox = 'inbox',
+  Info = 'info',
+  Instagram = 'instagram',
+  Italic = 'italic',
+  Key = 'key',
+  Layers = 'layers',
+  Layout = 'layout',
+  LifeBuoy = 'life-buoy',
+  Link2 = 'link-2',
+  Link = 'link',
+  Linkedin = 'linkedin',
+  List = 'list',
+  Loader = 'loader',
+  Lock = 'lock',
+  LogIn = 'log-in',
+  LogOut = 'log-out',
+  Mail = 'mail',
+  MapPin = 'map-pin',
+  Map = 'map',
+  Maximize2 = 'maximize-2',
+  Maximize = 'maximize',
+  Meh = 'meh',
+  Menu = 'menu',
+  MessageCircle = 'message-circle',
+  MessageSquare = 'message-square',
+  MicOff = 'mic-off',
+  Mic = 'mic',
+  Minimize2 = 'minimize-2',
+  Minimize = 'minimize',
+  MinusCircle = 'minus-circle',
+  MinusSquare = 'minus-square',
+  Minus = 'minus',
+  Monitor = 'monitor',
+  Moon = 'moon',
+  MoreHorizontal = 'more-horizontal',
+  MoreVertical = 'more-vertical',
+  MousePointer = 'mouse-pointer',
+  Move = 'move',
+  Music = 'music',
+  Navigation2 = 'navigation-2',
+  Navigation = 'navigation',
+  Octagon = 'octagon',
+  Package = 'package',
+  Paperclip = 'paperclip',
+  PauseCircle = 'pause-circle',
+  Pause = 'pause',
+  PenTool = 'pen-tool',
+  Percent = 'percent',
+  PhoneCall = 'phone-call',
+  PhoneForwarded = 'phone-forwarded',
+  PhoneIncoming = 'phone-incoming',
+  PhoneMissed = 'phone-missed',
+  PhoneOff = 'phone-off',
+  PhoneOutgoing = 'phone-outgoing',
+  Phone = 'phone',
+  PieChart = 'pie-chart',
+  PlayCircle = 'play-circle',
+  Play = 'play',
+  PlusCircle = 'plus-circle',
+  PlusSquare = 'plus-square',
+  Plus = 'plus',
+  Pocket = 'pocket',
+  Power = 'power',
+  Printer = 'printer',
+  Radio = 'radio',
+  RefreshCcw = 'refresh-ccw',
+  RefreshCw = 'refresh-cw',
+  Repeat = 'repeat',
+  Rewind = 'rewind',
+  RotateCcw = 'rotate-ccw',
+  RotateCw = 'rotate-cw',
+  Rss = 'rss',
+  Save = 'save',
+  Scissors = 'scissors',
+  Search = 'search',
+  Send = 'send',
+  Server = 'server',
+  Settings = 'settings',
+  Share2 = 'share-2',
+  Share = 'share',
+  ShieldOff = 'shield-off',
+  Shield = 'shield',
+  ShoppingBag = 'shopping-bag',
+  ShoppingCart = 'shopping-cart',
+  Shuffle = 'shuffle',
+  Sidebar = 'sidebar',
+  SkipBack = 'skip-back',
+  SkipForward = 'skip-forward',
+  Slack = 'slack',
+  Slash = 'slash',
+  Sliders = 'sliders',
+  Smartphone = 'smartphone',
+  Smile = 'smile',
+  Speaker = 'speaker',
+  Square = 'square',
+  Star = 'star',
+  StopCircle = 'stop-circle',
+  Sun = 'sun',
+  Sunrise = 'sunrise',
+  Sunset = 'sunset',
+  Table = 'table',
+  Tablet = 'tablet',
+  Tag = 'tag',
+  Target = 'target',
+  Terminal = 'terminal',
+  Thermometer = 'thermometer',
+  ThumbsDown = 'thumbs-down',
+  ThumbsUp = 'thumbs-up',
+  ToggleLeft = 'toggle-left',
+  ToggleRight = 'toggle-right',
+  Tool = 'tool',
+  Trash2 = 'trash-2',
+  Trash = 'trash',
+  Trello = 'trello',
+  TrendingDown = 'trending-down',
+  TrendingUp = 'trending-up',
+  Triangle = 'triangle',
+  Truck = 'truck',
+  Tv = 'tv',
+  Twitch = 'twitch',
+  Twitter = 'twitter',
+  Type = 'type',
+  Umbrella = 'umbrella',
+  Underline = 'underline',
+  Unlock = 'unlock',
+  UploadCloud = 'upload-cloud',
+  Upload = 'upload',
+  UserCheck = 'user-check',
+  UserMinus = 'user-minus',
+  UserPlus = 'user-plus',
+  UserX = 'user-x',
+  User = 'user',
+  Users = 'users',
+  VideoOff = 'video-off',
+  Video = 'video',
+  Voicemail = 'voicemail',
+  Volume1 = 'volume-1',
+  Volume2 = 'volume-2',
+  VolumeX = 'volume-x',
+  Volume = 'volume',
+  Watch = 'watch',
+  WifiOff = 'wifi-off',
+  Wifi = 'wifi',
+  Wind = 'wind',
+  XCircle = 'x-circle',
+  XOctagon = 'x-octagon',
+  XSquare = 'x-square',
+  X = 'x',
+  Youtube = 'youtube',
+  ZapOff = 'zap-off',
+  Zap = 'zap',
+  ZoomIn = 'zoom-in',
+  ZoomOut = 'zoom-out',
+}

package/leda/components/Img/index.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+import { htmlTagFactory } from '../../src/HTMLTagsFactory';
+
+export interface ImgProps extends React.HTMLAttributes<HTMLImageElement> {
+  ref?: React.Ref<HTMLElement>,
+  shouldRender?: boolean,
+  [x: string]: unknown,
+}
+
+export const Img = htmlTagFactory('Img') as React.FC<ImgProps>;

package/leda/components/Input/Input.test.tsx

@@ -0,0 +1,175 @@
+import {
+  fireEvent, render, screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Input } from './index';
+
+describe('Input SNAPSHOTS', () => {
+  it('should render basic usage', () => {
+    const wrapper = render((
+      <Input onChange={jest.fn()} />
+    ));
+
+    expect(wrapper.container).toMatchSnapshot();
+  });
+
+  it('should render value in controllable mode', () => {
+    const wrapper = render((
+      <Input onChange={jest.fn()} value="test value" />
+    ));
+
+    expect(screen.getByRole('textbox')).toHaveValue('test value');
+
+    expect(wrapper.container).toMatchSnapshot();
+
+    wrapper.rerender((
+      <Input onChange={jest.fn()} value="new test value" />
+    ));
+
+    expect(screen.getByRole('textbox')).toHaveValue('new test value');
+
+    expect(wrapper.container).toMatchSnapshot();
+  });
+
+  describe('should render different component states', () => {
+    it('should render disabled', () => {
+      const wrapper = render((
+        <Input onChange={jest.fn()} isDisabled />
+      ));
+
+      expect(screen.getByRole('textbox')).toBeDisabled();
+
+      expect(wrapper.container).toMatchSnapshot();
+    });
+  });
+});
+
+describe('Input HANDLERS', () => {
+  it('should test onBlur', () => {
+    const handleBlur = jest.fn();
+
+    render((
+      <Input onBlur={handleBlur} />
+    ));
+
+    screen.getByRole('textbox').focus();
+    screen.getByRole('textbox').blur();
+
+    expect(handleBlur).toBeCalled();
+  });
+
+  it('should test onChange', () => {
+    const handleChange = jest.fn();
+    const name = 'name';
+    const value = 'value';
+    const eventMatcher = expect.objectContaining({
+      component: expect.objectContaining({
+        value, name,
+      }),
+      target: expect.objectContaining({
+        value,
+      }),
+    });
+
+    render((
+      <Input onChange={handleChange} name={name} />
+    ));
+
+    userEvent.type(screen.getByRole('textbox'), value);
+
+    expect(handleChange).lastCalledWith(eventMatcher);
+  });
+
+  it('should test onEnterPress', () => {
+    const handleEnterPress = jest.fn();
+
+    render((
+      <Input name="auto" value="text" onEnterPress={handleEnterPress} />
+    ));
+
+    fireEvent.keyDown(screen.getByRole('textbox'), {
+      key: 'Enter',
+    });
+
+    expect(handleEnterPress).toBeCalledTimes(1);
+  });
+});
+
+describe('Input ATTRIBUTES', () => {
+  it('should have className, change classes through props and className should not change prop-classes', () => {
+    const wrapper = render((
+      <Input onBlur={jest.fn()} _box />
+    ));
+
+    expect(document.querySelector('div.input-wrapper')).toHaveClass('box');
+
+    wrapper.rerender((
+      <Input onBlur={jest.fn()} _active />
+    ));
+
+    expect(document.querySelector('div.input-wrapper')).not.toHaveClass('box');
+
+    expect(document.querySelector('div.input-wrapper')).toHaveClass('active');
+
+    wrapper.rerender((
+      <Input onBlur={jest.fn()} _active className="testClass" />
+    ));
+
+    expect(document.querySelector('div.input-wrapper')).not.toHaveClass('box');
+
+    expect(document.querySelector('div.input-wrapper')).toHaveClass('active');
+    expect(document.querySelector('div.input-wrapper')).toHaveClass('testClass');
+  });
+
+  it('should have maxLength limit', () => {
+    const handleChange = jest.fn();
+    const value = 'new v';
+    const eventMatcher = expect.objectContaining({
+      component: expect.objectContaining({
+        value,
+      }),
+      target: expect.objectContaining({
+        value,
+      }),
+    });
+
+    render((
+      <Input onChange={handleChange} maxLength={5} onBlur={jest.fn()} />
+    ));
+
+    userEvent.type(screen.getByRole('textbox'), 'new value', {
+      allAtOnce: true,
+    });
+
+    expect(handleChange).lastCalledWith(eventMatcher);
+  });
+});
+
+describe('Input VALIDATION', () => {
+  it('should be invalid if component is isRequired, value is empty and onBlur was called', () => {
+    render((
+      <Input isRequired form="form" name="name" />
+    ));
+
+    screen.getByRole('textbox').focus();
+    screen.getByRole('textbox').blur();
+
+    expect(document.querySelector('div.input-element-wrapper')).toHaveClass('danger');
+  });
+
+  it('should be invalid if value passes validation and vice versa', () => {
+    const validator = (value: string): boolean => value.length > 2;
+
+    render((
+      <Input isRequired name="name" form="form" invalidMessage="value length must be more than 2" validator={validator} />
+    ));
+
+    screen.getByRole('textbox').focus();
+
+    userEvent.type(screen.getByRole('textbox'), 'a');
+
+    screen.getByRole('textbox').blur();
+
+    expect(document.querySelector('div.input-element-wrapper')).toHaveClass('danger');
+  });
+});

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

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input SNAPSHOTS should render basic usage 1`] = `
+<div>
+  <div
+    class="input-wrapper"
+  >
+    <div
+      class="input-element-wrapper"
+    >
+      <input
+        aria-invalid="false"
+        class="input-element"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Input SNAPSHOTS should render different component states should render disabled 1`] = `
+<div>
+  <div
+    class="input-wrapper"
+  >
+    <div
+      class="input-element-wrapper disabled"
+    >
+      <input
+        aria-invalid="false"
+        class="input-element"
+        disabled=""
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Input SNAPSHOTS should render value in controllable mode 1`] = `
+<div>
+  <div
+    class="input-wrapper"
+  >
+    <div
+      class="input-element-wrapper"
+    >
+      <input
+        aria-invalid="false"
+        class="input-element"
+        value="test value"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Input SNAPSHOTS should render value in controllable mode 2`] = `
+<div>
+  <div
+    class="input-wrapper"
+  >
+    <div
+      class="input-element-wrapper"
+    >
+      <input
+        aria-invalid="false"
+        class="input-element"
+        value="new test value"
+      />
+    </div>
+  </div>
+</div>
+`;

package/leda/components/Input/constants.ts

@@ -0,0 +1,7 @@
+export const predefinedAllowedSymbols = {
+  numbers: /\d/,
+};
+
+export const predefinedForbiddenSymbols = {
+  numbers: /\d/,
+};

package/leda/components/Input/handlers.ts

@@ -0,0 +1,120 @@
+import type * as React from 'react';
+import type { CustomEventHandler, SetState } from '../../commonTypes';
+import type { InputProps } from './types';
+import { isSymbolAllowed, isSymbolForbidden, transformToCase } from './helpers';
+import { stringToMaxLength } from '../../utils';
+
+export const createChangeHandler = (
+  props: InputProps,
+  setValue: SetState<string>,
+): CustomEventHandler<React.ChangeEvent<HTMLInputElement>> => (event) => {
+  const { value } = event.target;
+  const {
+    allowedSymbols, forbiddenSymbols, letterCase, maxLength,
+  } = props;
+
+  if (isSymbolForbidden(value, forbiddenSymbols)) return;
+
+  if (!isSymbolAllowed(value, allowedSymbols)) return;
+
+  const maxLengthAdjustedValue = stringToMaxLength(value, maxLength);
+
+  const newValue = letterCase ? transformToCase(maxLengthAdjustedValue, letterCase) : maxLengthAdjustedValue;
+
+  if (props.value === undefined) {
+    setValue(newValue);
+  }
+
+  props.onChange?.({
+    ...event,
+    component: {
+      value: newValue,
+      name: props.name,
+    },
+  });
+};
+
+export const createClearHandler = (
+  props: InputProps,
+  setValue: SetState<string>,
+): CustomEventHandler<React.MouseEvent<SVGElement>> => (event) => {
+  event.preventDefault();
+
+  if (props.value === undefined) {
+    setValue('');
+  }
+
+  props.onChange?.({
+    ...event,
+    component: {
+      value: '',
+      name: props.name,
+    },
+  });
+};
+
+export const createBlurHandler = (
+  props: InputProps,
+  setFocused: SetState<boolean>,
+  validate: () => boolean,
+): React.FocusEventHandler<HTMLInputElement> => (event) => {
+  setFocused(false);
+
+  const newValid = validate();
+
+  props.onBlur?.({
+    ...event,
+    component: {
+      value: event.target.value,
+      name: props.name,
+      isValid: newValid,
+    },
+  });
+};
+
+export const createFocusHandler = (
+  props: InputProps,
+  isValid: boolean,
+  setFocused: SetState<boolean>,
+): React.FocusEventHandler<HTMLInputElement> => (event) => {
+  setFocused(true);
+
+  props.onFocus?.({
+    ...event,
+    component: {
+      value: event.target.value,
+      name: props.name,
+      isValid,
+    },
+  });
+};
+
+export const createKeyDownHandler = (
+  props: InputProps,
+): React.KeyboardEventHandler<HTMLInputElement> => (event) => {
+  if (event.key === 'Enter') {
+    props.onEnterPress?.({
+      ...event,
+      component: {
+        value: event.currentTarget.value,
+        name: props.name,
+      },
+    });
+  }
+};
+
+export const createResetHandler = (
+  props: InputProps,
+  setValue: SetState<string>,
+) => () => {
+  const newValue = props.defaultValue || '';
+
+  setValue(newValue);
+
+  props.onChange?.({
+    component: {
+      name: props.name,
+      value: newValue,
+    },
+  });
+};