@algorithm-shift/design-system 1.2.11 → 1.2.12

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@algorithm-shift/design-system",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "description": "A React + Tailwind CSS design system",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
+    "src",
     "public"
   ],
   "scripts": {

package/src/components/Basic/Image/Image.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import Image from './Image';
+
+const meta = {
+  component: Image,
+} satisfies Meta<typeof Image>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Basic/Image/Image.tsx

@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+import { ImageProps } from '@/types/global';
+
+const ImageControl = ({
+  className,
+  style, 
+  imageUrl,
+  imageUrlExternal,
+  altText = 'Preview',
+}: ImageProps) => {
+
+  const imageClass = cn(
+    'h-[200px] w-[200px] border-1',
+    'border-2 border-dashed border-gray-400 flex items-center justify-center cursor-pointer hover:border-blue-500 transition',
+    className
+  );
+
+  const defaultImgClass = cn(
+    'w-full h-full',
+    className
+  );
+
+  let src: string;
+  let extraProps: Record<string, any>;
+
+  if (imageUrlExternal) {
+    src = imageUrlExternal;
+    extraProps = {
+      className: defaultImgClass,
+    };
+  } else if (imageUrl) {
+    src = imageUrl;
+    extraProps = {
+      className: defaultImgClass,
+    };
+  } else {
+    src = './image-placeholder.png';
+    extraProps = {
+      width: 50,
+      height: 50,
+      className: 'opacity-50',
+    };
+  }
+
+  return (
+    <div className={imageClass} style={style}>
+      <img src={src} alt={altText} {...extraProps} />
+    </div>
+  );
+};
+
+export default ImageControl;

package/src/components/Basic/Shape/Shape.tsx

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

package/src/components/Basic/Typography/Typography.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import Typography from './Typography';
+
+const meta = {
+  component: Typography,
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    tagName: 'p',
+    textContent: 'This is a sample typography component.',
+  },
+};

package/src/components/Basic/Typography/Typography.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+import { TypographyProps } from '@/types/global';
+
+const Typography = ({
+  className,
+  style,
+  tagName,
+  textContent,
+}: TypographyProps) => {
+
+  const Tag = tagName || 'h1';
+
+  return React.createElement(
+    Tag,
+    {
+      style,
+      className: cn(className, 'pointer-events-auto'),
+    },
+    [
+      React.createElement('span', {
+        key: 'html',
+        className: 'pointer-events-none',
+        dangerouslySetInnerHTML: { __html: textContent },
+      })
+    ]
+  );
+};
+
+export default Typography;

package/src/components/DataDisplay/Table/Table.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import Table from './Table';
+
+const meta = {
+  component: Table,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    columns: [
+      { accessorKey: 'id', header: 'ID' },
+      { accessorKey: 'name', header: 'Name' },
+      { accessorKey: 'age', header: 'Age' },
+    ],
+    data: [
+      { id: 1, name: 'John Doe', age: 28 },
+      { id: 2, name: 'Jane Smith', age: 34 },
+      { id: 3, name: 'Sam Johnson', age: 45 },
+    ],
+    rowActions: [
+      {
+        header: 'Edit'
+      },
+      {
+        header: 'Delete'
+      },
+    ],
+  },
+};

package/src/components/DataDisplay/Table/Table.tsx

@@ -0,0 +1,15 @@
+
+import { DataTable } from '@/components/ui/data-table';
+import { TableProps } from '@/types/global';
+
+const Table = ({ columns, data, rowActions }: TableProps) => {
+  const rawColumns = Array.isArray(columns) ? columns : [];
+  const rawData = Array.isArray(data) ? data : [];
+  const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
+
+  return (
+    <DataTable columns={rawColumns} data={rawData} rowActions={rawRowActions} />
+  );
+};
+
+export default Table;

package/src/components/DataDisplay/index.ts

@@ -0,0 +1 @@
+export { default as Table } from './Table/Table'

package/src/components/Global/SelectDropdown.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface SelectDropdownProps {
+  options: Option[];
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  id?: string;
+  autoComplete?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  pattern?: string;
+}
+
+export default function SelectDropdown({
+  options,
+  placeholder = 'Select an option',
+  value,
+  onChange,
+  className,
+  id,
+  disabled,
+  readOnly,
+  style
+}: SelectDropdownProps) {
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger
+        id={id}
+        className={className}
+        style={style ?? {}}
+        aria-readonly={readOnly}
+      >
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((opt) => (
+          <SelectItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/Global/TinyMceEditor.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useMemo, useRef } from 'react';
+
+import { Editor } from '@tinymce/tinymce-react';
+
+export default function MyEditor({
+  value,
+  onChange,
+  isDefault
+}: {
+  value?: string;
+  onChange?: (value: string) => void;
+  isDefault?: boolean;
+}) {
+  const editorRef = useRef<any>(null);
+
+  function stripOuterP(html: string): string {
+    const trimmedHtml = html.trim();
+    if (!trimmedHtml) return '';
+    const div = document.createElement('div');
+    div.innerHTML = trimmedHtml;
+    const firstChild = div.firstElementChild;
+    if (div.childElementCount === 1 && firstChild?.tagName === 'P') {
+      return firstChild.innerHTML;
+    }
+    return trimmedHtml;
+  }
+
+  const isDefaultToolbar = useMemo(() => {
+    let toolbar = 'undo redo | formatselect | bold italic forecolor';
+    if (isDefault) {
+      toolbar = 'undo redo | blocks | ' +
+        'bold italic forecolor | alignleft aligncenter ' +
+        'alignright alignjustify | bullist numlist outdent indent | ' +
+        'removeformat | help';
+    }
+    return toolbar;
+  }, [isDefault]);
+
+  return (
+    <Editor
+      apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
+      tinymceScriptSrc={process.env.NEXT_PUBLIC_TINYMCE_SCRIPT_SRC}
+      onInit={(_evt, editor) => (editorRef.current = editor)}
+      value={value}
+      licenseKey='gpl'
+      init={{
+        height: 300,
+        menubar: false,
+        forced_root_block: false,
+        plugins: [
+          'advlist',
+          'autolink',
+          'lists',
+          'link',
+          'image',
+          'charmap',
+          'preview',
+          'anchor',
+          'searchreplace',
+          'visualblocks',
+          'code',
+          'fullscreen',
+          'insertdatetime',
+          'media',
+          'table',
+          'help',
+          'wordcount',
+        ],
+        toolbar: isDefaultToolbar,
+        content_style: `
+          body {
+            outline: none;
+          }
+        `,
+      }}
+      onEditorChange={(content) => onChange?.(stripOuterP(content))}
+    />
+  );
+}

package/src/components/Inputs/Checkbox/Checkbox.tsx

@@ -0,0 +1,18 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { CheckboxInputProps } from '@/types/global';
+
+const CheckboxInput = ({ className, style, ...props }: CheckboxInputProps) => {
+  const text = props.text ? props.text : 'Subscribe';
+
+  return (
+    <div className={className} style={style}>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="newsletter" />
+        <Label htmlFor="newsletter">{text}</Label>
+      </div>
+    </div>
+  );
+}
+
+export { CheckboxInput };

package/src/components/Inputs/DatePicker/DatePicker.tsx

@@ -0,0 +1,81 @@
+'use client';
+import React from 'react';
+
+import { Calendar } from 'lucide-react';
+
+import { Input } from '@/components/ui/input';
+import { DatePickerInputProps } from '@/types/global';
+
+export default function DatePicker({ className, style, ...props }: DatePickerInputProps) {
+  const placeholder = props.placeholder ?? 'Placeholder text';
+
+  // Controls (now option objects)
+  const minimumDate = props.minimumDate ?? 'none';
+  const customMinimumDate = props.customMinimumDate ?? '';
+
+  const maximumDate = props.maximumDate ?? 'none';
+  const customMaximumDate = props.customMaximumDate ?? '';
+
+  const errorMessage = props.errorMessage ?? 'Required';
+  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 resolveDate = (option: any, customOption?: any): string | undefined => {
+    if (!option) return undefined;
+
+    switch (option) {
+      case 'today':
+        return new Date().toISOString().split('T')[0];
+      case 'custom':
+        return customOption ?? undefined;
+      case 'none':
+      default:
+        return undefined;
+    }
+  };
+
+  const minDate = resolveDate(minimumDate, customMinimumDate);
+  const maxDate = resolveDate(maximumDate, customMaximumDate);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setValue(val);
+
+    if (isRequired && val.trim() === '') {
+      setError(errorMessage);
+    } else {
+      setError(null);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex justify-start items-center relative">
+        <Calendar className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" />
+        <Input
+          type="date"
+          id="date"
+          autoComplete={isAutocomplete ? 'on' : 'off'}
+          onChange={handleChange}
+          disabled={isDisabled || !isEditable}
+          value={value}
+          readOnly={isReadonly}
+          required={isRequired}
+          placeholder={placeholder}
+          min={minDate}
+          max={maxDate}
+          className={className}
+          style={style}
+        />
+      </div>
+
+      {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
+    </>
+  );
+}

package/src/components/Inputs/DateRange/DateRange.tsx

@@ -0,0 +1,64 @@
+
+'use client';
+import * as React from 'react';
+
+import { addDays, format } from 'date-fns';
+import { DateRange as DateRangeProps } from 'react-day-picker';
+
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+import { DateRangeInputProps } from '@/types/global';
+
+const DateRange = ({ className, style }: DateRangeInputProps) => {
+  const [date, setDate] = React.useState<DateRangeProps | undefined>({
+    from: new Date(),
+    to: addDays(new Date(), 7),
+  });
+
+  return (
+    <div className={className} style={style}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={'outline'}
+            className={cn(
+              'w-[300px] justify-start text-left font-normal text-[11px]',
+              !date && 'text-muted-foreground'
+            )}
+          >
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, 'LLL dd, y')} -{' '}
+                  {format(date.to, 'LLL dd, y')}
+                </>
+              ) : (
+                format(date.from, 'LLL dd, y')
+              )
+            ) : (
+              <span>Pick a date range</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export default DateRange;

package/src/components/Inputs/Dropdown/Dropdown.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import SelectDropdown from '@/components/Global/SelectDropdown';
+import { SelectDropdownInputProps } from '@/types/global';
+
+const Dropdown = ({ className, style, ...props }: SelectDropdownInputProps) => {
+  const text = Array.isArray(props.text) ? props.text : [props.text ?? 'Default'];
+  const placeholder = props.placeholder ? props.placeholder : 'Placeholder text';
+  const formatList = text.map((item: any) => ({
+    label: item || 'value1',
+    value: item
+  }));
+
+  // Controls
+  const regexPattern = props.regexPattern ?? '';
+  const errorMessage = props.errorMessage ?? 'Required';
+  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 = (val: string) => {
+    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 gap-3 flex-col">
+        <SelectDropdown
+          options={formatList}
+          placeholder={placeholder}
+          id={'select-field'}
+          value={value}
+          className={className}
+          style={style}
+          autoComplete={isAutocomplete ? 'on' : 'off'}
+          onChange={handleChange}
+          disabled={isDisabled || !isEditable}
+          readOnly={isReadonly}
+          required={isRequired}
+          pattern={regexPattern || undefined}
+        />
+      </div>
+      {error && (
+        <p className="mt-1 text-xs text-red-500">{error}</p>
+      )}
+    </>
+  );
+}
+
+export { Dropdown };

package/src/components/Inputs/EmailInput/EmailInput.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { Mail } from 'lucide-react';
+
+import { Input } from '@/components/ui/input';
+import { EmailInputProps } from '@/types/global';
+
+const EmailInput = ({ className, style, ...props }: EmailInputProps) => {
+  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">
+        <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" />
+        <Input
+          type="email"
+          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 { EmailInput };

package/src/components/Inputs/FileInput/FileInput.tsx

@@ -0,0 +1,24 @@
+import { Input } from '@/components/ui/input';
+import { FileInputProps } from '@/types/global';
+
+const FileInput = ({ className, style, ...props }: FileInputProps) => {
+  const placeholder = props.placeholder ?? 'Placeholder text';
+
+  return (
+      <div className="d-flex items-center relative align-middle">
+        <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-[11px]">
+          Browse
+        </div>
+        <Input
+          type="file"
+          id="file"
+          autoComplete="off"
+          placeholder={placeholder}
+          className={className}
+          style={style}
+        />
+      </div>
+  );
+}
+
+export { FileInput };

package/src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx

@@ -0,0 +1,24 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { MultiCheckboxInputProps } from '@/types/global';
+
+const MultiCheckbox = ({ className, style, ...props }: MultiCheckboxInputProps) => {
+  const text = Array.isArray(props.text)
+    ? props.text
+    : [props.text ?? 'Subscribe'];
+
+  return (
+    <div className={className} style={style}>
+      <div className="flex gap-3 flex-col">
+        {text?.map((item: string, index: number) => (
+          <div className="flex items-center space-x-2" key={index}>
+            <Checkbox id={`newsletter-${index}`} />
+            <Label htmlFor={`newsletter-${index}`}>{item}</Label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { MultiCheckbox };