@algorithm-shift/design-system 1.2.12 → 1.2.14

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@algorithm-shift/design-system",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "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

@@ -1,13 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,15 +0,0 @@
-
-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

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

package/src/components/Global/SelectDropdown.tsx

@@ -1,61 +0,0 @@
-'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

@@ -1,81 +0,0 @@
-'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

@@ -1,18 +0,0 @@
-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

@@ -1,81 +0,0 @@
-'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

@@ -1,64 +0,0 @@
-
-'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

@@ -1,62 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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 };