@algorithm-shift/design-system 1.2.12 → 1.2.13

package/src/components/Inputs/NumberInput/NumberInput.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-
-import { Calculator } from 'lucide-react';
-
-import { Input } from '@/components/ui/input';
-import { NumberInputProps } from '@/types/global';
-
-const NumberInput = ({ className, style, ...props }: NumberInputProps) => {
-
-  const placeholder = props.placeholder ?? 'Placeholder text';
-
-  // Controls
-  const regexPattern = props.regexPattern ?? '';
-  const errorMessage = props.errorMessage ?? 'Required';
-  const noOfCharacters = props.noOfCharacters ?? 100;
-  const isRequired = props.isRequired ?? false;
-  const isEditable = props.isEditable ?? true;
-  const isDisabled = props.isDisabled ?? false;
-  const isReadonly = props.isReadonly ?? false;
-  const isAutocomplete = props.isAutocomplete ?? false;
-
-  const [value, setValue] = React.useState('');
-  const [error, setError] = React.useState<string | null>(null);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    if (val.length > noOfCharacters) return;
-    setValue(val);
-    if (isRequired && val.trim() === '') {
-      setError(errorMessage);
-    } else if (regexPattern && !new RegExp(regexPattern).test(val)) {
-      setError(errorMessage);
-    } else {
-      setError(null);
-    }
-  };
-
-  return (
-    <>
-      <div className="flex justify-start items-center relative">
-        <Calculator className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" />
-        <Input
-          type="number"
-          id={'number-field'}
-          value={value}
-          className={className}
-          style={style}
-          autoComplete={isAutocomplete ? 'on' : 'off'}
-          placeholder={placeholder}
-          onChange={handleChange}
-          disabled={isDisabled || !isEditable}
-          readOnly={isReadonly}
-          required={isRequired}
-          maxLength={noOfCharacters}
-          pattern={regexPattern || undefined}
-        />
-      </div>
-
-      {error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </>
-  );
-}
-
-export { NumberInput };

package/src/components/Inputs/PasswordInput/PasswordInput.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-
-import { ScanEye } from 'lucide-react';
-
-import { Input } from '@/components/ui/input';
-import { PasswordInputProps } from '@/types/global';
-
-const PasswordInput = ({ className, style, ...props }: PasswordInputProps) => {
-
-  const placeholder = props.placeholder ?? 'Placeholder text';
-
-  // Controls
-  const regexPattern = props.regexPattern ?? '';
-  const errorMessage = props.errorMessage ?? 'Required';
-  const noOfCharacters = props.noOfCharacters ?? 100;
-  const isRequired = props.isRequired ?? false;
-  const isEditable = props.isEditable ?? true;
-  const isDisabled = props.isDisabled ?? false;
-  const isReadonly = props.isReadonly ?? false;
-  const isAutocomplete = props.isAutocomplete ?? false;
-
-  const [value, setValue] = React.useState('');
-  const [error, setError] = React.useState<string | null>(null);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    if (val.length > noOfCharacters) return;
-    setValue(val);
-    if (isRequired && val.trim() === '') {
-      setError(errorMessage);
-    } else if (regexPattern && !new RegExp(regexPattern).test(val)) {
-      setError(errorMessage);
-    } else {
-      setError(null);
-    }
-  };
-
-  return (
-    <>
-      <div className="flex justify-start items-center relative">
-        <ScanEye className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" />
-        <Input
-          type="password"
-          id={'password-field'}
-          className={className}
-          style={style}
-          value={value}
-          autoComplete={isAutocomplete ? 'on' : 'off'}
-          placeholder={placeholder}
-          onChange={handleChange}
-          disabled={isDisabled || !isEditable}
-          readOnly={isReadonly}
-          required={isRequired}
-          maxLength={noOfCharacters}
-          pattern={regexPattern || undefined}
-        />
-      </div>
-
-      {error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </>
-  );
-}
-
-export { PasswordInput };

package/src/components/Inputs/PhoneInput/PhoneInput.tsx

@@ -1,58 +0,0 @@
-import { PhoneInputProps } from '@/types/global';
-import * as React from 'react';
-
-import { PhoneInput as PhoneInputField } from 'react-international-phone';
-import 'react-international-phone/style.css';
-
-const PhoneInput = ({ className, style, ...props }: PhoneInputProps) => {
-  const placeholder = props.placeholder ?? 'Enter phone number';
-
-  const [value, setValue] = React.useState('');
-
-  // Controls
-  const regexPattern = props.regexPattern ?? '';
-  const errorMessage = props.errorMessage ?? 'Required';
-  const noOfCharacters = props.noOfCharacters ?? 100;
-  const isRequired = props.isRequired ?? false;
-  const isEditable = props.isEditable ?? true;
-  const isDisabled = props.isDisabled ?? false;
-
-  const [error, setError] = React.useState<string | null>(null);
-
-  const handleChange = (val: any) => {
-    if (val.length > noOfCharacters) return;
-    setValue(val);
-    if (isRequired && val.trim() === '') {
-      setError(errorMessage);
-    } else if (regexPattern && !new RegExp(regexPattern).test(val)) {
-      setError(errorMessage);
-    } else {
-      setError(null);
-    }
-  };
-
-  return (
-    <>
-      <PhoneInputField
-        defaultCountry="in"
-        value={value}
-        onChange={(phone: string) => handleChange(phone)}
-        inputProps={{
-          id: 'phone-field',
-          required: isRequired,
-        }}
-        placeholder={placeholder}
-        disabled={isDisabled || !isEditable}
-        required={isRequired}
-        className={className}
-        style={style}
-      />
-
-      {error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </>
-  );
-}
-
-export { PhoneInput };

package/src/components/Inputs/RadioInput/RadioInput.tsx

@@ -1,24 +0,0 @@
-import { Label } from '@/components/ui/label';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { RadioInputProps } from '@/types/global';
-
-const RadioInput = ({ className, style, ...props }: RadioInputProps) => {
-  const text = Array.isArray(props.text)
-    ? props.text
-    : [props.text ?? 'Subscribe'];
-
-  return (
-    <div className={className} style={style}>
-      <RadioGroup defaultValue="option-1">
-        {text?.map((item: string, index: number) => (
-          <div className="flex items-center space-x-2" key={index}>
-            <RadioGroupItem value={item} id={`r${index}`} />
-            <Label htmlFor={`r${index}`}>{item}</Label>
-          </div>
-        ))}
-      </RadioGroup>
-    </div>
-  );
-}
-
-export { RadioInput };

package/src/components/Inputs/RichText/RichText.tsx

@@ -1,10 +0,0 @@
-import TinyMceEditor from '@/components/Global/TinyMceEditor';
-import { RichTextInputProps } from '@/types/global';
-
-export default function RichText({ className, style }: RichTextInputProps) {
-  return (
-    <div className={className} style={style}>
-      <TinyMceEditor isDefault={true} />
-    </div>
-  );
-}

package/src/components/Inputs/SearchInput/SearchInput.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-
-import { Search } from 'lucide-react';
-
-import { Input } from '@/components/ui/input';
-import { SearchInputProps } from '@/types/global';
-
-const SearchInput = ({ className, style, ...props }: SearchInputProps) => {
-  const placeholder = props.placeholder ?? 'Placeholder text';
-  // Controls
-  const regexPattern = props.regexPattern ?? '';
-  const errorMessage = props.errorMessage ?? 'Required';
-  const noOfCharacters = props.noOfCharacters ?? 100;
-  const isRequired = props.isRequired ?? false;
-  const isEditable = props.isEditable ?? true;
-  const isDisabled = props.isDisabled ?? false;
-  const isReadonly = props.isReadonly ?? false;
-  const isAutocomplete = props.isAutocomplete ?? false;
-
-  const [value, setValue] = React.useState('');
-  const [error, setError] = React.useState<string | null>(null);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    if (val.length > noOfCharacters) return;
-    setValue(val);
-    if (isRequired && val.trim() === '') {
-      setError(errorMessage);
-    } else if (regexPattern && !new RegExp(regexPattern).test(val)) {
-      setError(errorMessage);
-    } else {
-      setError(null);
-    }
-  };
-
-  return (
-    <>
-      <div className="flex justify-start items-center relative">
-        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" />
-        <Input
-          type="text"
-          id={'text-field'}
-          className={className}
-          style={style}
-          value={value}
-          autoComplete={isAutocomplete ? 'on' : 'off'}
-          placeholder={placeholder}
-          onChange={handleChange}
-          disabled={isDisabled || !isEditable}
-          readOnly={isReadonly}
-          required={isRequired}
-          maxLength={noOfCharacters}
-          pattern={regexPattern || undefined}
-        />
-      </div>
-
-      {error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </>
-  );
-}
-
-export { SearchInput };

package/src/components/Inputs/SwitchToggle/SwitchToggle.tsx

@@ -1,22 +0,0 @@
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { SwitchToggleInputProps } from '@/types/global';
-
-const SwitchToggle = ({ className, style, ...props }: SwitchToggleInputProps) => {
-  const text = Array.isArray(props.text)
-    ? props.text
-    : [props.text ?? 'Subscribe'];
-
-  return (
-    <div className={className} style={style}>
-      {text?.map((item: string, index: number) => (
-        <div className="flex items-center space-x-2 mb-2" key={index}>
-          <Switch id={`switch-${index}`} />
-          <Label htmlFor={`switch-${index}`}>{item}</Label>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export { SwitchToggle }

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react';
-
-import { Input } from '@/components/ui/input';
-import { TextInputProps } from '@/types/global';
-
-const TextInput = ({ className, style, ...props }: TextInputProps) => {
-
-  const placeholder = props.placeholder || 'Placeholder text';
-
-  // Controls
-  const regexPattern = props.regexPattern ?? '';
-  const errorMessage = props.errorMessage ?? 'Required';
-  const noOfCharacters = props.noOfCharacters ?? 100;
-  const isRequired = props.isRequired ?? false;
-  const isEditable = props.isEditable ?? true;
-  const isDisabled = props.isDisabled ?? false;
-  const isReadonly = props.isReadonly ?? false;
-  const isAutocomplete = props.isAutocomplete ?? false;
-
-  const [value, setValue] = React.useState('');
-  const [error, setError] = React.useState<string | null>(null);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    if (val.length > noOfCharacters) return;
-    setValue(val);
-    if (isRequired && val.trim() === '') {
-      setError(errorMessage);
-    } else if (regexPattern && !new RegExp(regexPattern).test(val)) {
-      setError(errorMessage);
-    } else {
-      setError(null);
-    }
-  };
-
-  return (
-    <>
-      <Input
-        type="text"
-        className={className}
-        style={style}
-        value={value}
-        autoComplete={isAutocomplete ? 'on' : 'off'}
-        placeholder={placeholder}
-        onChange={handleChange}
-        disabled={isDisabled || !isEditable}
-        readOnly={isReadonly}
-        required={isRequired}
-        maxLength={noOfCharacters}
-        pattern={regexPattern || undefined}
-      />
-      {error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </>
-  );
-}
-
-export { TextInput };

package/src/components/Inputs/Textarea/Textarea.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-
-import { Textarea as TextareaInput } from '@/components/ui/textarea';
-import { TextAreaProps } from '@/types/global';
-
-const Textarea = ({ className, style, ...props }: TextAreaProps) => {
-  const placeholder = props.placeholder ?? 'Placeholder text';
-
-  // Controls
-  const regexPattern = props.regexPattern ?? '';
-  const errorMessage = props.errorMessage ?? 'Required';
-  const noOfCharacters = props.noOfCharacters ?? 100;
-  const isRequired = props.isRequired ?? false;
-  const isEditable = props.isEditable ?? true;
-  const isDisabled = props.isDisabled ?? false;
-  const isReadonly = props.isReadonly ?? false;
-  const isAutocomplete = props.isAutocomplete ?? false;
-
-  const [value, setValue] = React.useState('');
-  const [error, setError] = React.useState<string | null>(null);
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const val = e.target.value;
-    if (val.length > noOfCharacters) return;
-    setValue(val);
-    if (isRequired && val.trim() === '') {
-      setError(errorMessage);
-    } else if (regexPattern && !new RegExp(regexPattern).test(val)) {
-      setError(errorMessage);
-    } else {
-      setError(null);
-    }
-  };
-
-  return (
-    <>
-      <TextareaInput
-        id={'textarea-field'}
-        className={className}
-        style={style}
-        value={value}
-        autoComplete={isAutocomplete ? 'on' : 'off'}
-        placeholder={placeholder}
-        onChange={handleChange}
-        disabled={isDisabled || !isEditable}
-        readOnly={isReadonly}
-        required={isRequired}
-        maxLength={noOfCharacters}
-      />
-
-      {error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </>
-  );
-}
-
-export { Textarea };

package/src/components/Inputs/UrlInput/UrlInput.tsx

@@ -1,66 +0,0 @@
-
-import * as React from 'react';
-
-import { Input } from '@/components/ui/input';
-import { UrlInputProps } from '@/types/global';
-
-const UrlInput = ({ className, style, ...props }: UrlInputProps) => {
-  const placeholder = props.placeholder ?? 'Placeholder text';
-
-  // Controls
-  const regexPattern = props.regexPattern ?? '';
-  const errorMessage = props.errorMessage ?? 'Required';
-  const noOfCharacters = props.noOfCharacters ?? 100;
-  const isRequired = props.isRequired ?? false;
-  const isEditable = props.isEditable ?? true;
-  const isDisabled = props.isDisabled ?? false;
-  const isReadonly = props.isReadonly ?? false;
-  const isAutocomplete = props.isAutocomplete ?? false;
-
-  const [value, setValue] = React.useState('');
-  const [error, setError] = React.useState<string | null>(null);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    if (val.length > noOfCharacters) return;
-    setValue(val);
-    if (isRequired && val.trim() === '') {
-      setError(errorMessage);
-    } else if (regexPattern && !new RegExp(regexPattern).test(val)) {
-      setError(errorMessage);
-    } else {
-      setError(null);
-    }
-  };
-
-  return (
-    <>
-      <div className="flex justify-start items-center relative">
-        <div className="bg-[#E9E9E9] absolute px-10 text-center top-1/2 h-full justify-center items-center flex w-10 -translate-y-1/2 text-[#383838] font-[500] text-[12px]">
-          https://
-        </div>
-        <Input
-          type="url"
-          className={className}
-          style={style}
-          id={'url-field'}
-          value={value}
-          autoComplete={isAutocomplete ? 'on' : 'off'}
-          placeholder={placeholder}
-          onChange={handleChange}
-          disabled={isDisabled || !isEditable}
-          readOnly={isReadonly}
-          required={isRequired}
-          maxLength={noOfCharacters}
-          pattern={regexPattern || undefined}
-        />
-      </div>
-
-      {error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </>
-  );
-}
-
-export { UrlInput };

package/src/components/Layout/Flex.tsx

@@ -1,13 +0,0 @@
-import { ElementProps } from "@/types/global";
-
-const Flex = ({
-  children, className, style
-}: ElementProps) => {
-  return (
-    <div className={className} style={style}>
-      {children}
-    </div>
-  );
-};
-
-export default Flex;

package/src/components/Layout/Grid.tsx

@@ -1,13 +0,0 @@
-import { ElementProps } from "@/types/global";
-
-const Grid = ({
-  children, className, style
-}: ElementProps) => {
-  return (
-    <div className={className} style={style}>
-      {children}
-    </div>
-  );
-};
-
-export default Grid;

package/src/components/Navigation/Logo/Logo.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import Logo from './Logo';
-
-const meta = {
-  component: Logo,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Logo>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    imageUrl: 'https://placehold.co/200x200',
-    className: '',
-    style: {
-      width: '200PX',
-      height: '200PX',
-      objectFit: 'contain',
-      borderColor: '#E5E7EB',
-    }
-  },
-};

package/src/components/Navigation/Logo/Logo.tsx

@@ -1,33 +0,0 @@
-import { LogoProps } from '@/types/global';
-
-const ImageControl = ({
-  className,
-  style,
-  imageUrl
-}: LogoProps) => {
-
-  let src: string;
-  let extraProps: Record<string, any>;
-
-  if (imageUrl) {
-    src = imageUrl;
-    extraProps = {
-      className: 'w-full h-full',
-    };
-  } else {
-    src = 'https://builder.development.algorithmshift.ai/_next/image?url=%2Fdrag_and_drop.png&w=1920&q=75';
-    extraProps = {
-      width: 50,
-      height: 50,
-      className: 'opacity-50',
-    };
-  }
-
-  return (
-    <div className={className} style={style}>
-      <img src={src} alt="Preview" sizes="100vw" {...extraProps} />
-    </div>
-  );
-};
-
-export default ImageControl;

package/src/components/Navigation/Notification/Notification.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import Notification from './Notification';
-
-const meta = {
-  component: Notification,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Notification>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    badgeType: 'number',
-    badgeCount: 5,
-    hideBadgeWhenZero: true
-  },
-};

package/src/components/Navigation/Notification/Notification.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { NotificationProps } from "@/types/global";
-
-const Notification = ({ className, style, badgeType, badgeCount = 0, hideBadgeWhenZero }: NotificationProps) => {
-  return (
-    <div className={className} style={style}>
-      <div className='w-[34px] h-[34px] bg-[#E9E9E9] rounded-md text-center flex items-center justify-center relative'>
-        <img
-          src='https://builder.development.algorithmshift.ai/images/toolset/notification.svg' alt="auto" width={18} height={18}
-        />
-        {badgeType === 'number' && !(hideBadgeWhenZero && badgeCount === 0) && badgeCount > 0 ? (
-          <span className='text-[10px] text-[#fff] bg-[#FF4A4A] w-[20px] h-[20px] rounded-full absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 leading-[20px]'>{badgeCount}</span>
-        ) : <span className='bg-[#FF4A4A] w-[10px] h-[10px] rounded-full absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 leading-[20px]'></span>}
-      </div>
-    </div>
-  );
-};
-
-export default Notification;

package/src/components/Navigation/Profile/Profile.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import Profile from './Profile';
-
-const meta = {
-  component: Profile,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Profile>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    profileType: 'initial',
-    showName: true,
-    userName: 'Akbar Sheriff'
-  },
-};

package/src/components/Navigation/Profile/Profile.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import { ProfileProps } from "@/types/global";
-
-const Profile = ({ profileType, showName, userName, className, style }: ProfileProps) => {
-  return (
-    <div className={className} style={style}>
-      <div className='flex gap-2 items-center justify-between w-30 cursor-pointer'>
-        {showName && (
-          <h4 className='text-[#000000] dark:text-[#fff] text-[13px] font-[500] mb-0'>{userName}</h4>
-        )}
-        {profileType === 'avatar' ? (
-          <img
-            src='https://builder.development.algorithmshift.ai/images/toolset/profile.svg' alt="auto" width={24} height={24}
-          />
-        ) : (
-          <div className='w-6 h-6 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center'>A</div>
-        )}
-
-      </div>
-    </div>
-  );
-};
-
-export default Profile;