pixel-react 1.7.1 → 1.7.3

package/src/components/Paper/Paper.stories.tsx

@@ -1,77 +1,77 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Paper from './Paper';
-import { Children } from 'react';
-import Typography from '../Typography';
-import './Paper.scss';
-
-const meta: Meta<typeof Paper> = {
-  title: 'Components/Paper',
-  component: Paper,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Paper>;
-
-const defaultArgs = {
-  Children,
-  className: '',
-  rounded: false,
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    children: <p>This is a simple Paper component with default styles.</p>,
-    className: 'ff_paper_default_style',
-  },
-};
-
-export const PrimaryPaper: Story = {
-  render: () => {
-    return (
-      <Paper className="ff_paper_default_style">
-        <Typography>
-          This Paper component has custom background color and padding.
-        </Typography>
-      </Paper>
-    );
-  },
-};
-
-export const PaperWithLowShadow: Story = {
-  render: () => {
-    return (
-      <Paper className="ff_paper_default_style">
-        <Typography>This Paper component has a shadow depth of 6.</Typography>
-      </Paper>
-    );
-  },
-};
-
-export const PaperWithHighShadow: Story = {
-  render: () => {
-    return (
-      <Paper className="ff_paper_basic_style" rounded>
-        <Typography>
-          This Paper component combines custom styles, shadow depth of 10, and
-          rounded corners.
-        </Typography>
-      </Paper>
-    );
-  },
-};
-
-export const PaperWithRounded: Story = {
-  render: () => {
-    return (
-      <Paper rounded className="ff_paper_default_style">
-        <Typography>This Paper component has Rounded Corners.</Typography>
-      </Paper>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Paper from './Paper';
+import { Children } from 'react';
+import Typography from '../Typography';
+import './Paper.scss';
+
+const meta: Meta<typeof Paper> = {
+  title: 'Components/Paper',
+  component: Paper,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Paper>;
+
+const defaultArgs = {
+  Children,
+  className: '',
+  rounded: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    children: <p>This is a simple Paper component with default styles.</p>,
+    className: 'ff_paper_default_style',
+  },
+};
+
+export const PrimaryPaper: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_default_style">
+        <Typography>
+          This Paper component has custom background color and padding.
+        </Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithLowShadow: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_default_style">
+        <Typography>This Paper component has a shadow depth of 6.</Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithHighShadow: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_basic_style" rounded>
+        <Typography>
+          This Paper component combines custom styles, shadow depth of 10, and
+          rounded corners.
+        </Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithRounded: Story = {
+  render: () => {
+    return (
+      <Paper rounded className="ff_paper_default_style">
+        <Typography>This Paper component has Rounded Corners.</Typography>
+      </Paper>
+    );
+  },
+};
+
+export default meta;

package/src/components/Paper/Paper.tsx

@@ -1,14 +1,14 @@
-import classNames from 'classnames';
-import './Paper.scss';
-import { PaperProps } from './types';
-
-const Paper = ({ children, className = '', rounded = false }: PaperProps) => {
-  const dynamicClassName = classNames(
-    { ['ff_rounded_lg']: rounded },
-    className
-  );
-
-  return <div className={dynamicClassName}>{children}</div>;
-};
-
-export default Paper;
+import classNames from 'classnames';
+import './Paper.scss';
+import { PaperProps } from './types';
+
+const Paper = ({ children, className = '', rounded = false }: PaperProps) => {
+  const dynamicClassName = classNames(
+    { ['ff_rounded_lg']: rounded },
+    className
+  );
+
+  return <div className={dynamicClassName}>{children}</div>;
+};
+
+export default Paper;

package/src/components/Paper/types.ts

@@ -1,19 +1,19 @@
-export interface PaperProps {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  className?: string;
-  /**
-   * If `true`, rounded corners are Enabled.
-   * @default false
-   */
-  rounded?: boolean;
-}
-
-
-
-
+export interface PaperProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string;
+  /**
+   * If `true`, rounded corners are Enabled.
+   * @default false
+   */
+  rounded?: boolean;
+}
+
+
+
+

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -1,3 +1,3 @@
-declare module 'react-phone-input-2' {
-  export * from 'react-phone-input-2';
-}
+declare module 'react-phone-input-2' {
+  export * from 'react-phone-input-2';
+}

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,95 +1,70 @@
-import React, { useState } from 'react';
-import { PhoneInputProps } from './types';
-import PhoneInputField from './PhoneInput';
-
-export default {
-  title: 'Components/PhoneInputComponent',
-  component: PhoneInputField,
-};
-
-const Template = ({
-  value,
-  country,
-  width,
-  onChange,
-  placeholder,
-  onFocus,
-  onBlur,
-  isValid,
-}: PhoneInputProps) => {
-  const [phone, setPhone] = useState<string>(value || '');
-  const [valid, setValid] = useState(true);
-
-  const handlePhoneChange = (newPhone: string) => {
-    setPhone(newPhone);
-    const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
-    const phoneIsValid = newPhone.length === validPhoneNumberLength;
-    setValid(phoneIsValid);
-    onChange(newPhone);
-  };
-
-  return (
-    <PhoneInputField
-      value={phone}
-      country={country}
-      onChange={handlePhoneChange}
-      width={width}
-      placeholder={placeholder}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      isValid={valid}
-    />
-  );
-};
-
-// Default story
-export const Default = Template.bind({});
-Default.args = {
-  country: 'IN',
-  value: '9134567890',
-  width: '400px',
-  placeholder: 'Enter phone number',
-  onChange: () => {},
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with initial value
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with a custom country
-export const WithCustomCountry = Template.bind({});
-WithCustomCountry.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with empty value
-export const EmptyValue = Template.bind({});
-EmptyValue.args = {
-  country: 'IN',
-  value: '91',
-  width: '500px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: false,
-};
+import React, { useState } from 'react';
+import { PhoneInputProps } from './types';
+import PhoneInputField from './PhoneInput';
+
+export default {
+  title: 'Components/PhoneInputComponent',
+  component: PhoneInputField,
+};
+
+const Template = ({
+  value,
+  country,
+  width,
+  onChange,
+  placeholder,
+  onFocus,
+  onBlur,
+  international,
+  enableAreaCodeStretch,
+  defaultCountry,
+  disabled,
+  id,
+}: PhoneInputProps) => {
+  const [phone, setPhone] = useState<string>(value || '');
+  const [valid, setValid] = useState(true);
+
+  const handlePhoneChange = (newPhone: string) => {
+    setPhone(newPhone);
+    const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
+    const phoneIsValid = newPhone.length === validPhoneNumberLength;
+    setValid(phoneIsValid);
+    onChange(newPhone);
+  };
+
+  return (
+    <PhoneInputField
+      value={phone}
+      country={country}
+      onChange={handlePhoneChange}
+      width={width}
+      placeholder={placeholder}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      isValid={valid}
+      international={international}
+      enableAreaCodeStretch={enableAreaCodeStretch}
+      defaultCountry={defaultCountry}
+      disabled={disabled}
+      id={id}
+    />
+  );
+};
+
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+  country: 'IN',
+  value: '91',
+  width: '400px',
+  placeholder: 'Enter phone number',
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: true,
+  international: true,
+  enableAreaCodeStretch: true,
+  defaultCountry: 'IN',
+  disabled: false,
+  id: 'addPrimaryNumberId',
+};

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,90 +1,98 @@
-import React, { useState, useEffect } from 'react';
-import PhoneInput from 'react-phone-input-2';
-import 'react-phone-input-2/lib/style.css';
-import { PhoneInputProps } from './types';
-import Typography from '../Typography';
-import './PhoneInput.scss';
-
-const PhoneInputField: React.FC<PhoneInputProps> = ({
-  country,
-  value,
-  onChange,
-  width = '100%',
-  placeholder = 'Enter phone number',
-  onFocus,
-  onBlur,
-}) => {
-  const [phone, setPhone] = useState<string>(value);
-  const [isFocused, setIsFocused] = useState(false);
-  const [error, setError] = useState<string>('');
-
-  useEffect(() => {
-    if (value !== phone) {
-      setPhone(value);
-    }
-  }, [value]);
-
-  const handlePhoneChange = (phone: string) => {
-    const numericPhone = phone.replace(/[^0-9+]/g, '');
-    const countryCode = numericPhone.startsWith('+')
-      ? numericPhone.substring(0, 3)
-      : '';
-    let phoneNumber = numericPhone.replace(countryCode, '');
-
-    let validPhoneNumberLength = 10;
-    if (country === 'IN') {
-      if (phoneNumber.length < validPhoneNumberLength) {
-        setError('Phone number should be exactly 10 digits');
-      } else {
-        setError('');
-      }
-    }
-
-    if (phoneNumber.length <= validPhoneNumberLength) {
-      setPhone(numericPhone);
-      onChange(numericPhone);
-    }
-  };
-
-  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-    setIsFocused(true);
-    if (onFocus) onFocus(event);
-  };
-
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    setIsFocused(false);
-    if (onBlur) onBlur(event);
-  };
-
-  return (
-    <div>
-      <PhoneInput
-        country={country}
-        value={phone}
-        onChange={handlePhoneChange}
-        inputStyle={{
-          width,
-          height: '32px',
-          border: isFocused
-            ? '1px solid var(--brand-color)'
-            : error
-            ? '1px solid var(--error_light)'
-            : '1px solid var(--default-color)',
-          borderRadius: '4px',
-          fontSize: '14px',
-          transition: 'border-color 0.3s ease',
-        }}
-        placeholder={placeholder}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-      />
-      {error && !isFocused && (
-        <Typography color={'var(--error_light)'} className="error">
-          {error}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default PhoneInputField;
+import React, { useState, useEffect } from 'react';
+import PhoneInput from 'react-phone-input-2';
+import { PhoneInputProps } from './types';
+import Typography from '../Typography';
+import './PhoneInput.scss';
+
+const PhoneInputField: React.FC<PhoneInputProps> = ({
+  country,
+  value,
+  onChange,
+  width = '100%',
+  placeholder = 'Enter phone number',
+  onFocus,
+  onBlur,
+  id,
+  dropdownStyle = {},
+  enableAreaCodeStretch = false,
+  disabled = false,
+}) => {
+  const [phone, setPhone] = useState<string>(value);
+  const [isFocused, setIsFocused] = useState(false);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    if (value !== phone) {
+      setPhone(value);
+    }
+  }, [value]);
+
+  const handlePhoneChange = (phone: string) => {
+    const numericPhone = phone.replace(/[^0-9+]/g, '');
+    const countryCode = numericPhone.startsWith('+')
+      ? numericPhone.substring(0, 3)
+      : '';
+    let phoneNumber = numericPhone.replace(countryCode, '');
+
+    let validPhoneNumberLength = 10;
+    if (country === 'IN') {
+      if (phoneNumber.length < validPhoneNumberLength) {
+        setError('Phone number should be exactly 10 digits');
+      } else {
+        setError('');
+      }
+    }
+
+    if (phoneNumber.length <= validPhoneNumberLength) {
+      setPhone(numericPhone);
+      onChange(numericPhone);
+    }
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(true);
+    if (onFocus) onFocus(event);
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false);
+    if (onBlur) onBlur(event);
+  };
+
+  return (
+    <div id={id}>
+      <PhoneInput
+        specialLabel=""
+        countryCodeEditable={false}
+        country={country}
+        value={phone}
+        onChange={handlePhoneChange}
+        inputStyle={{
+          width,
+          height: '32px',
+          border: isFocused
+            ? '1px solid var(--brand-color)'
+            : error
+            ? '1px solid var(--error_light)'
+            : '1px solid var(--default-color)',
+          borderRadius: '4px',
+          fontSize: '14px',
+          transition: 'border-color 0.3s ease',
+        }}
+        placeholder={placeholder}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        dropdownStyle={dropdownStyle}
+        enableAreaCodeStretch={enableAreaCodeStretch}
+        disabled={disabled}
+      />
+      {error && !isFocused && (
+        <Typography color={'var(--error_light)'} className="error">
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default PhoneInputField;

package/src/components/PhoneInput/index.ts

@@ -1 +1 @@
-export { default } from './PhoneInput';
+export { default } from './PhoneInput';