pixel-react 1.0.0

package/src/components/Search/Search.scss

@@ -0,0 +1,87 @@
+@import '../../assets/styles/fonts';
+
+
+.ff-search-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .ff-search-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        padding: 5px;
+        .ff-icon-container {
+            svg {
+                path {
+                    fill: var(--brand-color)
+                }
+            }
+        }
+    }
+    .ff-search-input {
+        @extend .fontXs;
+        border: none;
+        color: var(--tooltip-bg-color);
+        line-height: 12px;
+        visibility: hidden;
+        transition: width 0.4s ease;
+        &:focus {
+            outline: none;
+            border: none;
+        }
+
+        &:hover {
+            border: none;
+        }
+    }
+    &.disabled {
+        opacity: 0.5;
+    }
+    &.expanded {
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        .ff-vertical-line {
+            height: 8px;
+            width: 1px;
+            position: relative;
+            right: 2px;
+            border-radius: 1px;
+            margin: 8px 0px;
+            background-color: var(--border-color);
+        }
+        .ff-search-input {
+            visibility: visible;
+
+            &::placeholder {
+                color: var(--ff-search-filed-placeholder-text);
+            }
+        }
+        .ff-search-icon {
+            padding: 4px;
+            border: none;
+            cursor: default;
+
+        }
+        .ff-search-clear-button {
+            display: grid;
+            place-items: center;
+            cursor: pointer;
+            width: 22px;
+        }
+        .ff-search-close-icon {
+            margin: 4px;
+            cursor: pointer;
+
+            .ff-icon-container {
+                svg {
+                    path {
+                        fill: var(--ff-search-filed-close-Icon)
+                    }
+                }
+            }
+        }
+    }
+}

package/src/components/Search/Search.stories.tsx

@@ -0,0 +1,26 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+import Search from './Search';
+const meta: Meta<typeof Search> = {
+  title: 'Components/Search',
+  component: Search,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Search>;
+const defaultArgs = {
+  placeholder: 'Search',
+  onSearch: (query: string) => alert(`Searching for: ${query}`),
+  disabled: false,
+  width: 200,
+};
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export default meta;

package/src/components/Search/Search.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import './Search.scss';
+import Icon from '../Icon';
+import { SearchProps } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Typography from '../Typography';
+
+const Search = ({
+  placeholder = 'Search',
+  onSearch,
+  disabled = false,
+  width = 150,
+}: SearchProps) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const [searchvalue, setSearchValue] = useState<string>('');
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && !checkEmpty(searchvalue)) {
+      onSearch(searchvalue.trim());
+    } else if (event?.key === 'Escape') {
+      handleSearchClearAndClose('Close');
+    }
+  };
+  const onChange = (value: string) => {
+    setSearchValue(value);
+    if (value === '') {
+      onSearch('');
+    }
+  };
+  const handleIconClick = () => {
+    setIsExpanded(!disabled);
+  };
+  const handleSearchClearAndClose = (label: string) => {
+    setSearchValue('');
+    onSearch('');
+    if (label === 'Close') {
+      setIsExpanded(false);
+    }
+  };
+
+  return (
+    <div
+      className={classNames('ff-search-container', {
+        expanded: isExpanded,
+        disabled: disabled,
+      })}
+    >
+      <div className="ff-search-icon" onClick={handleIconClick}>
+        <Icon name="search" height={14} width={14} />
+      </div>
+      <div
+        className={classNames('ff-vertical-line', {
+          expanded: isExpanded,
+        })}
+      ></div>
+      <input
+        className="ff-search-input"
+        name="input"
+        style={{ width: isExpanded ? `${width}px` : '0px' }}
+        placeholder={placeholder}
+        type="text"
+        value={searchvalue}
+        disabled={disabled}
+        autoComplete="off"
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+      />
+
+      {isExpanded && (
+        <>
+          <div
+            className="ff-search-clear-button"
+            onClick={() => {
+              handleSearchClearAndClose('Clear');
+            }}
+          >
+            {searchvalue !== '' && (
+              <Typography
+                children={'clear'}
+                fontSize={8}
+                color={'var(--ff-search-filed-clear-text)'}
+              />
+            )}
+          </div>
+          <div className="ff-search-close-icon">
+            <Icon
+              height={6}
+              width={6}
+              name="close"
+              hoverEffect={true}
+              onClick={() => {
+                handleSearchClearAndClose('Close');
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+export default Search;

package/src/components/Search/index.ts

@@ -0,0 +1 @@
+export { default } from './Search';

package/src/components/Search/types.ts

@@ -0,0 +1,15 @@
+export interface SearchProps {
+  /**
+   * Placeholder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Callback function to be called when the search button is clicked or enter key is pressed
+   */
+  onSearch: (query: string) => void;
+  /**
+   * Additional styles for the button
+   */
+  disabled?: boolean;
+  width?: number;
+}

package/src/components/Select/Select.scss

@@ -0,0 +1,247 @@
+@use '../../assets/styles/fonts';
+
+// todo color need to be add into style guide
+@mixin transition-all($time: 0.3s) {
+  transition: opacity $time ease-out, transform $time ease-out,
+    font-size $time ease-out, padding $time ease-out;
+}
+
+@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
+  opacity: $opacity;
+
+  @if $color {
+    color: $color;
+  }
+
+  @if $border-color-arg {
+    border-color: $border-color-arg;
+  }
+}
+
+.ff-select-wrapper {
+  position: relative;
+
+  .ff-select {
+    @extend .fontSm;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    min-height: 32px;
+    min-width: 100px;
+    display: flex;
+    align-items: end;
+    position: relative;
+
+    &-fieldset {
+      margin: 0;
+      padding: 25px 0px 0px 8px;
+      border: 1px solid transparent;
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+      border-radius: 4px;
+      display: block;
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--no-label {
+        padding: 30px 0px 0px 8px;
+      }
+
+      &--default {
+        @include opacity-style(0, null, var(--ff-select-border-color));
+      }
+
+      &--active {
+        @include opacity-style(1, null, var(--ff-select-brand-color));
+      }
+
+      &--option {
+        opacity: 1;
+      }
+
+      &--no-border {
+        border-color: transparent;
+      }
+
+      &--error {
+        border-color: var(--error-light);
+      }
+
+      .ff-select-legend {
+        @extend .font-size-8;
+        padding: 0 2px;
+        letter-spacing: 0.5px;
+
+        &--default {
+          @include transition-all(0.3s);
+          opacity: 0;
+        }
+
+        &--active {
+          @include transition-all(0.25s);
+          @include opacity-style(1, var(--ff-select-brand-color));
+        }
+
+        &--option {
+          @include opacity-style(1, var(--ff-select-default-color));
+        }
+
+        &--error {
+          color: var(--error-light);
+        }
+
+        &--required {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &-input {
+      @extend .fontSm;
+      @include absolute-position(6px, auto, auto, auto);
+      width: calc(100% - 38px);
+      min-height: calc(100% - 8px);
+      padding: 0 28px 0 8px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      z-index: 100;
+      background: transparent;
+      outline: none;
+      color: var(--ff-select-text-color);
+
+      &:hover {
+        ~ .ff-select-label {
+          color: var(--ff-select-text-hover-color);
+        }
+      }
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--default {
+        @include opacity-style(1, null, var(--ff-select-border-color));
+
+        &:hover {
+          border-color: var(--ff-select-text-color);
+
+          ~ .ff-select-fieldset--option {
+            border-color: var(--ff-select-text-color);
+
+            .ff-select-legend--option {
+              color: var(--ff-select-text-color);
+            }
+          }
+        }
+      }
+
+      &--no-label {
+        min-height: calc(100% - 2px);
+        margin-top: 0px;
+        top: 0px;
+      }
+
+      &--active {
+        border-color: transparent;
+
+        &:hover {
+          border-color: transparent;
+        }
+      }
+
+      &--no-border {
+        border: none;
+        border-color: transparent;
+
+        &:hover {
+          border-color: transparent;
+
+          ~ .ff-select-fieldset--no-border {
+            border-color: transparent;
+          }
+        }
+      }
+
+      &--disable {
+        border-color: var(--ff-select-border-color);
+
+        &:hover {
+          border-color: var(--ff-select-border-color);
+
+          ~ .ff-select-label--default {
+            color: var(--ff-select-default-color);
+          }
+        }
+      }
+
+      &--error {
+        border-color: var(--error-light);
+
+        &:hover {
+          border-color: var(--error-light);
+        }
+      }
+    }
+
+    &-label {
+      @include absolute-position(13px, auto, auto, 8px);
+      z-index: 1;
+      font-size: 12px;
+      top: 60%;
+      padding-left: 8px;
+
+      &--default {
+        @include transition-all;
+        @include opacity-style(1, var(--ff-select-default-color));
+
+        transform: translateY(-50%);
+      }
+
+      &--active {
+        @extend .font-size-8;
+        @include transition-all;
+        opacity: 0;
+        transform: translateY(-150%);
+        padding: 0 6px;
+      }
+
+      &--required {
+        margin-right: 2px;
+      }
+    }
+
+    &-arrow {
+      position: absolute;
+      top: 60%;
+      height: 100%;
+      right: 10px;
+      transform: rotateX(180deg) translateY(50%);
+      cursor: pointer;
+
+      &--no-label {
+        top: 50%;
+      }
+
+      &--down {
+        transform: rotateX(0deg) translateY(-50%);
+        z-index: 101;
+      }
+    }
+  }
+
+  &-error-text {
+    @include absolute-position(auto, auto, -14px, 12px);
+    white-space: nowrap;
+  }
+}

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from './Select';
+import { useState } from 'react';
+import { Option } from './types';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Select>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Select',
+    optionsList: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Select',
+    optionsList: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ],
+    errorMsg: 'Please select a option',
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    showLabel: false,
+    optionsList: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ],
+  },
+};
+
+export const EmptyOptions: Story = {
+  args: {
+    label: 'Select',
+    optionsList: [],
+    errorMsg: 'No options available',
+  },
+};
+
+export const Disable: Story = {
+  args: {
+    label: 'Select',
+    optionsList: [],
+    disabled: true,
+  },
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    label: 'Select',
+    selectedOption: { label: 'Option 2', value: '2' },
+    optionsList: [
+      { label: 'Option 1', value: 'Option 1' },
+      { label: 'Option 2', value: 'Option 2' },
+      { label: 'Option 3', value: 'Option 3' },
+    ],
+  },
+};
+
+export const OptionSelection: Story = {
+  render: () => {
+    const optionsList = [
+      { label: 'Option 1', value: 'Option 1' },
+      { label: 'Option 2', value: 'Option 2' },
+      { label: 'Option 3', value: 'Option 3' },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'Option 2',
+      value: '2',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const CustomJSX: Story = {
+  render: () => {
+    const optionsList: Option[] = [
+      {
+        label: <p style={{ color: 'red' }}>Option 1</p>,
+        value: 'option 1',
+      },
+      {
+        label: <p style={{ color: 'green' }}>Option 2</p>,
+        value: 'option 2',
+      },
+      {
+        label: <p style={{ color: 'beige' }}>Option 3</p>,
+        value: 'option 3',
+      },
+      {
+        label: <p style={{ color: 'crimson' }}>Option 4</p>,
+        value: 'option 4',
+      },
+      {
+        label: <p style={{ color: 'cyan' }}>Option 5</p>,
+        value: 'option 5',
+      },
+      {
+        label: <p style={{ color: 'red' }}>Option 6</p>,
+        value: 'option 6',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: <p style={{ color: 'red' }}>Option 6</p>,
+      value: 'option 6',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export default meta;