pixel-react 1.0.0

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Tabs from './Tabs';
+import Typography from '../Typography';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Tabs>;
+
+const TabContentOne = () => (
+  <div>
+    <Typography as="h1" children="Tab--1" fontSize={32} fontWeight="bold" />
+    <Typography as="p" children="This is the content for Tab - 1" />
+  </div>
+);
+const TabContentTwo = () => (
+  <div>
+    <Typography as="h1" children="Tab--2" fontSize={32} fontWeight="bold" />
+    <Typography as="p" children="This is the content for Tab - 2" />
+  </div>
+);
+const TabContentThree = () => (
+  <div>
+    <Typography as="h1" children="Tab--3" fontSize={32} fontWeight="bold" />
+    <Typography as="p" children="This is the content for Tab - 3" />
+  </div>
+);
+const TabContentFour = () => (
+  <div>
+    <Typography as="h1" children="Tab--4" fontSize={32} fontWeight="bold" />
+    <Typography as="p" children="This is the content for Tab - 4" />
+  </div>
+);
+
+export const DefaultTabs: Story = {
+  render: () => {
+    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('0');
+
+    const tabsData = [
+      { label: 'Tab--1', component: <TabContentOne /> },
+      { label: 'Tab--2', component: <TabContentTwo /> },
+      { label: 'Tab--3', component: <TabContentThree /> },
+    ];
+
+    return (
+      <Tabs
+        tabsData={tabsData}
+        activeTabId={activeTabIdDefault}
+        onTabClick={setActiveTabIdDefault}
+      />
+    );
+  },
+};
+export const CapsuleTabs: Story = {
+  render: () => {
+    const [activeTabIdCapsule, setActiveTabIdCapsule] = useState<string>('0');
+
+    const tabsDataForCapsule = [
+      { label: 'Loremipsum_1', component: <TabContentOne /> },
+      { label: 'Loremipsum_2', component: <TabContentTwo /> },
+      { label: 'Loremipsum_3', component: <TabContentThree /> },
+      { label: 'Loremipsum_4', component: <TabContentFour /> },
+      { label: 'Loremipsum_5', component: <TabContentFour /> },
+    ];
+
+    return (
+      <Tabs
+        variant={'capsule'}
+        tabsData={tabsDataForCapsule}
+        activeTabId={activeTabIdCapsule}
+        onTabClick={setActiveTabIdCapsule}
+      />
+    );
+  },
+};
+
+export const TabsWithDisabledTab: Story = {
+  render: () => {
+    const [activeTabId, setActiveTabId] = useState<string>('0');
+
+    const tabsDataWithOneDisableAttribute = [
+      { label: 'Tab--1', component: <TabContentOne /> },
+      { label: 'Tab--2', component: <TabContentTwo />, disabled: true },
+      { label: 'Tab--3', component: <TabContentThree /> },
+    ];
+
+    return (
+      <Tabs
+        tabsData={tabsDataWithOneDisableAttribute}
+        activeTabId={activeTabId}
+        onTabClick={setActiveTabId}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,64 @@
+import { TabsProps } from './types';
+import './Tabs.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import '../../assets/styles/_colors.scss';
+
+const Tabs = ({
+  variant = 'default',
+  tabsData,
+  activeTabId,
+  onTabClick,
+}: TabsProps) => {
+  const tabs = tabsData.map((tab, index) => ({
+    id: index.toString(),
+    label: tab.label,
+    component: tab.component,
+    disabled: tab.disabled,
+  }));
+
+  return (
+    <div className={`ff-tabs-container`}>
+      <div className={`ff-tab-row--${variant}`}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => !tab.disabled && onTabClick(tab.id)}
+            disabled={tab.disabled}
+            className={classNames(`ff-tab-button--${variant}`, {
+              disabled: tab.disabled,
+              active: activeTabId === tab.id,
+            })}
+          >
+            <Typography
+              children={tab.label}
+              lineHeight="18px"
+              fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
+              color={
+                activeTabId === tab.id
+                  ? 'var(--tabs-label-active-color)'
+                  : 'var(--tabs-label-default-color)'
+              }
+              className={classNames('ff-tab-label', {
+                'ff-tab-label--active': activeTabId === tab.id,
+              })}
+            />
+
+            <Typography
+              children=""
+              color=""
+              className={classNames('ff-tab-bar', {
+                'ff-tab-bar--active': activeTabId === tab.id,
+              })}
+            />
+          </button>
+        ))}
+      </div>
+      <div className={`ff-tab-content`}>
+        {tabs.find((tab) => tab.id === activeTabId)?.component}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

package/src/components/Tabs/index.ts

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

package/src/components/Tabs/types.ts

@@ -0,0 +1,38 @@
+export interface Tab {
+  /**
+   * Unique identifier for the tab, for handling click events.
+   */
+  id: string;
+  /**
+   * Display label for the tab.
+   */
+  label: string;
+  /**
+   * The content to display when this tab is active.
+   */
+  component: JSX.Element | React.ReactNode;
+  /**
+   * Optional property to indicate if the tab is disabled.
+   */
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  /**
+   * An array of tab objects containing label, component, and optional disabled status.
+   */
+  tabsData: { label: string; component: JSX.Element; disabled?: boolean }[];
+  /**
+   * Defines the styling variant of the tabs.
+   */
+  variant?: 'default' | 'capsule';
+  /**
+   * activeTabId : The ID of the currently active tab.
+   */
+  activeTabId: string;
+
+  /**
+   * onTabClick : function updates the active tab state when a user interacts with the tabs,
+   */
+  onTabClick: (id: string) => void;
+}

package/src/components/TextArea/Textarea.scss

@@ -0,0 +1,145 @@
+@use '../../assets/styles/colors' as *;
+@import '../../assets/styles/fonts';
+
+.ff-textarea-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  gap: 5px;
+  @extend .fontSm;
+  .msg-character-count {
+    @extend .font-size-8;
+    display: flex;
+    color: var(--text-area-default-color);
+    justify-content: flex-end;
+  }
+  .ff-textarea {
+    padding: 8px;
+    min-width: 428px;
+    min-height: 80px;
+    gap: 0px;
+    border: 1px solid var(--default-icon-color);
+    border-radius: 4px;
+    outline: none;
+    line-height: 18px;
+    font-weight: 400;
+    &--resize {
+      resize: none;
+    }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      &:hover {
+        border-color: var(--default-icon-color);
+        color: inherit;
+      }
+    }
+    &::placeholder {
+      opacity: 0;
+    }
+    &--danger {
+      border-color: var(--error_light);
+    }
+    &--transparentBackground {
+      background: transparent;
+    }
+  }
+
+  .ff-textarea-label-container {
+    @extend .ff-textarea;
+    display: flex;
+    position: absolute;
+    border: none;
+    outline: none;
+    margin-top: 1px;
+    transition: all 0.3s ease-in-out;
+
+    .ff-textarea-label {
+      padding: 1px;
+      height: 10px;
+      width: auto;
+      background-color: var(--drawer-footer-bg);
+      color: var(--text-area-default-color);
+      &--danger {
+        color: var(--error_light);
+      }
+    }
+
+    .required-asterisk {
+      color: var(--error_light);
+    }
+  }
+  &:hover {
+    .ff-textarea-label {
+      color: var(--text-color);
+    }
+    .ff-textarea {
+      border-color: var(--text-color);
+    }
+  }
+  &:focus-within {
+    .ff-textarea-label-container {
+      font-weight: 400;
+      line-height: 12px;
+      letter-spacing: 0.5px;
+      text-align: left;
+      top: -6px;
+      @extend .font-size-8;
+      background-color: transparent;
+      padding: 0px 2px;
+      margin-left: 7px;
+    }
+    .ff-textarea-label {
+      &--primary {
+        color: var(--brand-color);
+      }
+    }
+    .ff-textarea {
+      &--primary {
+        border-color: var(--brand-color);
+      }
+
+      &::placeholder {
+        opacity: 1;
+        margin-bottom: 1px;
+        @extend .font-size-8;
+      }
+    }
+  }
+
+  .ff-textarea-message {
+    @extend .font-size-8;
+    padding: 0px 4px;
+    margin-left: 8px;
+    line-height: 12px;
+    &--danger {
+      color: var(--error_light);
+    }
+  }
+
+  &--float {
+    .ff-textarea-label-container {
+      letter-spacing: 0.5px;
+      top: -6px;
+      @extend .font-size-8;
+      background-color: transparent;
+      line-height: 12px;
+      padding: 0px 2px;
+      margin-left: 7px;
+    }
+  }
+  &--disabled {
+    &:hover {
+      .ff-textarea-label {
+        color: var(--text-area-default-color);
+      }
+      .ff-textarea {
+        border-color: var(--default-icon-color);
+      }
+    }
+    cursor: not-allowed;
+    .ff-textarea-label-container {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/TextArea/Textarea.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Textarea from './Textarea';
+import { ChangeEvent, useState } from 'react';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Textarea>;
+
+const defaultArgs = {
+  name: 'textarea',
+  label: '',
+  disabled: false,
+  placeholder: 'Type Your Description Here',
+  value: '',
+  variant: 'primary',
+  rows: 4,
+  cols: 30,
+  capacity: 200,
+  resize: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'default',
+  },
+};
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'primary',
+  },
+};
+export const Disabled: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'primary',
+    disabled: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>();
+
+    const onChangeHandler = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      const value = event.target.value;
+      if (event.target.required) {
+        if (checkEmpty(value)) {
+          setError(true);
+          setHelperText(`${event?.target?.name} is required`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+      setValue(value);
+    };
+    return (
+      <>
+        <Textarea
+          {...defaultArgs}
+          onChange={onChangeHandler}
+          disabled={false}
+          capacity={200}
+          value={value}
+          name="Description"
+          label="Description"
+          placeholder="Type Your Description Here"
+          variant="primary"
+          required={false}
+          error={error}
+          helperText={helperText}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/TextArea/Textarea.tsx

@@ -0,0 +1,84 @@
+import classNames from 'classnames';
+import './Textarea.scss';
+import { TextareaProps } from './Types';
+import { truncateText } from '../../utils/truncateText/truncateText';
+const Textarea = ({
+  capacity = 200,
+  name,
+  label,
+  value,
+  variant = 'primary',
+  error,
+  helperText = '',
+  disabled = false,
+  required = false,
+  placeholder = 'Enter text',
+  className = '',
+  onChange,
+  onBlur,
+  onFocus,
+  rows = 4,
+  cols = 40,
+  resize = false,
+  ...props
+}: TextareaProps) => {
+  return (
+    <div
+      className={classNames('ff-textarea-container', {
+        'ff-textarea-container--disabled': disabled,
+        'ff-textarea-container--float': !!value,
+      })}
+    >
+      <label
+        htmlFor={name}
+        className={classNames('ff-textarea-label-container', {
+          'ff-textarea-label-container--danger': error,
+        })}
+      >
+        <span
+          className={classNames(
+            `ff-textarea-label ff-textarea-label--${variant}`,
+            {
+              'ff-textarea-label--danger': error,
+            }
+          )}
+        >
+          {required && <span className="required-asterisk">*</span>}
+          {label}
+        </span>
+      </label>
+      <textarea
+        maxLength={capacity}
+        name={name}
+        value={value}
+        id={name}
+        className={classNames(
+          `ff-textarea ff-textarea--${variant}`,
+          className,
+          {
+            'ff-textarea--danger': error,
+            'ff-textarea--resize': !resize,
+          }
+        )}
+        placeholder={truncateText(placeholder, 25)}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        required={required}
+        rows={rows}
+        cols={cols}
+        {...props}
+      />
+      <div className="msg-character-count">
+        {!!capacity && (
+          <span>
+            <span>{value?.length}</span>/{capacity}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Textarea;

package/src/components/TextArea/Types.ts

@@ -0,0 +1,82 @@
+export interface TextareaProps {
+  /**
+   * Name | name of the textarea field
+   */
+  name: string;
+  /**
+   * Label | field label to be displayed
+   */
+  label: string;
+  /**
+   * value | textarea field value
+   */
+  value: string;
+  /**
+   * variants to set color/style of the textarea field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the textarea field
+   */
+  disabled?: boolean;
+  /**
+   * if true, textarea field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * placeholder for the textarea field
+   */
+  placeholder?: string;
+  /**
+   * classnames to style the textarea field
+   */
+  className?: string;
+  /**
+   * onChange, onKeyDown, onBlur, onFocus actions
+   */
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+
+  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  /**
+   * id to select the textarea field uniquely
+   */
+  id?: string;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   * background of the textarea field prop
+   */
+
+  /**
+   * capacity | Maximum number of characters allowed in the textarea.
+   */
+  capacity?: number;
+  /**
+   * rows | Number of visible text lines in the textarea.
+   * Used to control the height of the textarea.
+   */
+  rows?: number;
+  /**
+   * cols | Number of visible character widths in the textarea.
+   * Used to control the width of the textarea.
+   */
+  cols?: number;
+  /**
+   * for resizing purpose
+   */
+  resize?: boolean;
+}

package/src/components/TextArea/index.tsx

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

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,24 @@
+import React, { createContext, useState } from 'react';
+import { ThemeContextType, ThemeProviderProps, Theme } from './types';
+import '../../assets/Themes/Theme.scss';
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, theme }) => {
+  const [currentTheme, setCurrentTheme] = useState<Theme>(
+    theme || 'ff-light-theme'
+  );
+
+  const applyTheme = (newTheme: Theme) => setCurrentTheme(newTheme);
+
+  return (
+    <ThemeContext.Provider
+      value={{ currentTheme, setCurrentTheme, applyTheme }}
+    >
+      <div className={currentTheme}>{children}</div>
+    </ThemeContext.Provider>
+  );
+};
+
+export { ThemeContext };
+export default ThemeProvider;

package/src/components/ThemeProvider/index.ts

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

package/src/components/ThemeProvider/types.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+
+export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme';
+
+export interface ThemeContextType {
+  currentTheme: Theme;
+  setCurrentTheme: React.Dispatch<React.SetStateAction<Theme>>;
+  applyTheme: (newTheme: Theme) => void;
+}
+
+export interface ThemeProviderProps {
+  children?: ReactNode;
+  theme?: Theme;
+}