@companix/uikit 0.0.2 → 0.0.3

package/dist/types/__hooks/useCalendarOptions-copy.d.ts

@@ -0,0 +1,22 @@
+export declare const defaultMax: Date;
+export declare const defaultMin: Date;
+interface Options {
+    min?: Date;
+    max?: Date;
+    now: Date;
+}
+export declare const useCalendarOptions2: ({ min, max, now }: Options) => {
+    years: {
+        title: string;
+        value: number;
+    }[];
+    months: {
+        title: string;
+        value: number;
+    }[];
+    days: {
+        title: string;
+        value: number;
+    }[];
+};
+export {};

package/dist/types/__hooks/useCalendarOptions.d.ts

@@ -0,0 +1,31 @@
+import { DateFormat } from '..';
+export declare const defaultMax: {
+    day: number;
+    month: number;
+    year: number;
+};
+export declare const defaultMin: {
+    day: number;
+    month: number;
+    year: number;
+};
+interface Options {
+    min?: DateFormat;
+    max?: DateFormat;
+    now: DateFormat;
+}
+export declare const useCalendarOptions: ({ min, max, now }: Options) => {
+    years: {
+        title: string;
+        value: number;
+    }[];
+    months: {
+        title: string;
+        value: number;
+    }[];
+    days: {
+        title: string;
+        value: number;
+    }[];
+};
+export {};

package/dist/types/__libs/calendar.d.ts

@@ -0,0 +1,25 @@
+import { CalendarProps } from '../DatePicker/Calendar';
+export declare function isSameDate(d1: Date, d2: Date): boolean;
+export declare const MONDAY = 1;
+export declare function startOfWeek(date: Date, { weekStartsOn }: {
+    weekStartsOn?: number | undefined;
+}): Date;
+export declare function endOfWeek(date: Date, { weekStartsOn }: {
+    weekStartsOn?: number | undefined;
+}): Date;
+export declare function startOfDay(date: Date): Date;
+export declare function endOfDay(date: Date): Date;
+export declare function isDayMinMaxRestricted(day: Date, options?: {
+    min?: Date;
+    max?: Date;
+    withTime?: boolean;
+}): boolean;
+export declare function addMonths(date: Date, amount: number): Date;
+export declare function subMonths(date: Date, amount: number): Date;
+export declare function setYear(date: Date, year: number): Date;
+export declare function setMonth(date: Date, month: number): Date;
+interface DisableOptions extends Pick<CalendarProps, 'disableFuture' | 'disablePast' | 'maxDateTime' | 'minDateTime' | 'shouldDisableDate'> {
+}
+export declare const createDayDisableChecker: (options: DisableOptions) => (day: Date, withTime?: boolean) => boolean;
+export declare const useDayDisableCheker: (options: DisableOptions) => (day: Date, withTime?: boolean) => boolean;
+export {};

package/dist/types/__utils/utils.d.ts

@@ -0,0 +1,25 @@
+import { DateFormat, Option } from '..';
+export declare const getMonthMaxDay: (month: number, year: number) => number;
+export declare const getFirstDay: (month: number, year: number) => number;
+export declare const getDayIndex: (day: number) => number;
+export declare const createVoids: (length: number) => any[];
+export declare const dateToFormat: (date: Date) => DateFormat;
+export declare const createDateValidation: ({ min, max }: {
+    min: DateFormat;
+    max: DateFormat;
+}) => (value: DateFormat) => DateFormat | undefined;
+export declare const createRangeValidation: ({ min, max }: {
+    min?: DateFormat;
+    max?: DateFormat;
+}) => {
+    isDateMinValid: (value: DateFormat) => boolean;
+    isDateMaxValid: (value: DateFormat) => boolean;
+    isDateInRange: (value: DateFormat) => boolean;
+};
+export declare const formatToDate: (format: DateFormat) => Date;
+export declare const weeks: string[];
+export declare const DefaultMonths: string[];
+export declare const DEFAULT_MAX_YEAR = 9999;
+export declare const DEFAULT_MIN_YEAR = 100;
+export declare const getYears: (currentYear: number, range: number) => Option<number>[];
+export declare const getMonths: (locale?: string) => Option<number>[];

package/dist/types/index.d.ts

@@ -0,0 +1,31 @@
+export { Button } from './Button';
+export { Spinner } from './Spinner';
+export { Scrollable } from './Scrollable';
+export { ImitateScroll } from './Scrollable/ImitateScroll';
+export { Popover } from './Popover';
+export { Tooltip } from './Tooltip';
+export { StepperInput } from './Stepper';
+export { Select } from './Select';
+export { Form } from './Form';
+export { OptionItem } from './OptionItem/OptionItem';
+export { NumberInput } from './NumberInput';
+export { OptionsList } from './OptionItem/OptionsList';
+export { ButtonGroup } from './ButtonGroup';
+export { Checkbox } from './Checkbox';
+export { Switch } from './Switch';
+export { Radio } from './Radio';
+export { Drawer } from './Drawer';
+export { Dialog } from './Dialog';
+export { AlertDialog } from './DialogAlert/Alert';
+export { LoadButton } from './LoadButton';
+export { Tabs } from './Tabs';
+export { Countdown } from './Countdown';
+export { TextArea } from './TextArea';
+export { SelectTags } from './SelectTags';
+export { DatePicker } from './DatePicker';
+export { FileOverlay } from './File';
+export * from './__hooks/use-local-storage';
+export { createAlertAgent } from './DialogAlert';
+export { createToaster } from './Toaster';
+export * from './types';
+export type { Appearance } from './Button';

package/dist/types/types.d.ts

@@ -0,0 +1,13 @@
+export interface Option<T> {
+    title: string;
+    value: T;
+    icon?: React.ReactNode;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export interface DateFormat {
+    month: number;
+    year: number;
+    day: number;
+}

package/dist/uikit.css

@@ -0,0 +1 @@
+@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;border-style:solid;border-color:currentColor;border-right-color:transparent;border-radius:50%;animation:.75s linear infinite spinner-border}.scrollable::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.scrollable::-webkit-scrollbar-thumb{background-clip:padding-box;border:var(--thumb-padding) solid transparent;border-radius:999px;background-color:var(--thumb-color)}.scrollable::-webkit-scrollbar-corner{background-color:transparent}.scrollable-hover-interaction::-webkit-scrollbar-thumb,.scrollable-hover-interaction::-webkit-scrollbar-track{visibility:hidden}.scrollable-hover-interaction:hover::-webkit-scrollbar-thumb,.scrollable-hover-interaction:hover::-webkit-scrollbar-track{visibility:visible}.scrollable-border-position::-webkit-scrollbar-thumb{border-radius:0;border-right-width:0px;border-bottom-width:0px;border-left-width:calc(var(--thumb-padding) * 2);border-top-width:calc(var(--thumb-padding) * 2)}.hidden-scroll::-webkit-scrollbar{display:none}.hidden-scroll::-webkit-scrollbar-thumb{display:none}.hidden-scroll::-webkit-scrollbar-track{display:none}.hidden-scroll::-webkit-scrollbar-corner{display:none}.number-input-container{display:flex;gap:4px}.number-stepper{display:flex;flex-direction:column;height:30px;min-height:30px;line-height:30px;border:1px solid var(--border-color);box-shadow:0 1px 2px #00000078;border-radius:4px}.number-stepper-splitter{height:1px;background-color:var(--border-color)}.number-stepper-slot{border-radius:0;height:13.5px}.number-stepper-slot[data-slot=decrement]{border-bottom-left-radius:3px;border-bottom-right-radius:3px}.number-stepper-slot[data-slot=increment]{border-top-left-radius:3px;border-top-right-radius:3px}.button-group{display:flex}.button-group[data-fill]{width:100%}.button-group>.button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.button-group>.button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0;margin-right:-1px}

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.02",
+  "version": "0.0.03",
   "module": "./dist/bundle.es.js",
-  "types": "./src/index.ts",
+  "types": "./dist/types/index.d.ts",
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "author": "Pavel Victorov",
   "scripts": {
     "echo": "echo \"uikit\"",
@@ -38,9 +41,6 @@
     "react-merge-refs": "^3.0.2"
   },
   "devDependencies": {
-    "sass": "^1.96.0",
-    "sass-embedded": "^1.96.0",
-    "rollup-plugin-scss": "^4.0.1",
     "@blueprintjs/core": "^6.2.1",
     "@radix-ui/react-icons": "^1.3.2",
     "@react-aria/interactions": "^3.25.3",
@@ -60,7 +60,11 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-scss": "^4.0.1",
+    "sass": "^1.96.0",
+    "sass-embedded": "^1.96.0",
     "vite": "^7.0.0",
-    "vite-plugin-checker": "^0.9.3"
+    "vite-plugin-checker": "^0.9.3",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/.eslintrc

@@ -1,54 +0,0 @@
-{
-  "env": {
-    "node": true,
-    "browser": true,
-    "es6": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "react-app"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["react"],
-  "parserOptions": {
-    "sourceType": "module",
-    "requireConfigFile": false,
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "no-var": "error",
-    "typescript-eslint/typescript-estree": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/no-children-prop": "off",
-    "react/display-name": "off",
-    "jsx-a11y/aria-role": "off",
-    "react/prop-types": "off",
-    "react/jsx-no-target-blank": "off",
-    "import/no-anonymous-default-export": "off",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": true,
-        "peerDependencies": false
-      }
-    ],
-    "no-throw-literal": "off",
-    "react/no-multi-comp": [2, { "ignoreStateless": true }],
-    "no-restricted-syntax": [
-      "error",
-      {
-        "selector": "CallExpression[arguments.length=1][callee.property.name='reduce']",
-        "message": "Provide initialValue to .reduce()."
-      }
-    ]
-  }
-}

package/declaration.d.ts

@@ -1,4 +0,0 @@
-declare module '*.css'
-declare module '*.module.css'
-declare module '*.ttf'
-declare module '*.svg'

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Playground</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./playground/bootstrap.tsx"></script>
-  </body>
-</html>

package/playground/App.tsx

@@ -1,166 +0,0 @@
-// import { Test1Animation } from './animation-test-1'
-// import { Test2Animation, Test2CompletedAnimation } from './animation-test-2'
-// import { SelectExample } from './select'
-// import { PopupExample } from './popup'
-// import { TextInput } from './text-input'
-// import { NumberInputs } from './number-inputs'
-// import { Button } from '../Button'
-// import { useState } from 'react'
-// import { Drawer } from '../Drawer'
-// import { Popup } from '../Popup'
-// import { TestApp } from './Test'
-import { useLayoutEffect } from 'react'
-import { ButtonsExample, ButtonsGroupExample } from './buttons'
-import { PopoversExample } from './popovers'
-import { Example } from './Example'
-import { SelectExample } from './select'
-import { TooltipExample } from './tooltip'
-import { CheckboxExample } from './checkbox'
-import { RadioGroupExample } from './radio-group'
-import { TabsExample } from './tabs'
-import { ToasterExample } from './toaster'
-import { DialogExample } from './dialog'
-import { InputsExample } from './input'
-import { TextAreaExample } from './text-area'
-import { SelectTagsExample } from './select-tags'
-import { DateInputExample } from './date-input'
-import { DatePickerExample } from './date-picker'
-import { SwitchExample } from './switch'
-import { DialogAlertExample } from './dialog-alert'
-import { DrawerExample } from './drawer'
-// import { Tabs } from '../Tabs'
-
-export const App = () => {
-  useLayoutEffect(() => {
-    document.body.classList.add('theme-light')
-  }, [])
-
-  // return <TestApp />
-  return (
-    <div className="examples-list">
-      <div />
-      <div />
-      {/* <div style={{ height: '200px', width: '100%', position: 'relative' }}>
-        <div className="row-group" style={{ position: 'absolute' }}>
-          <Test1Animation />
-          <Test2Animation />
-          <Test2CompletedAnimation />
-        </div>
-      </div>
-      <TabsApp />
-      <ButtonsExample />
-      <SelectExample /> */}
-      <Example name="Popovers">
-        <PopoversExample />
-      </Example>
-      <Example name="Tooltip">
-        <TooltipExample />
-      </Example>
-      <Example name="Dialog">
-        <DialogExample />
-      </Example>
-      <Example name="DialogAlert">
-        <DialogAlertExample />
-      </Example>
-      <Example name="Drawer">
-        <DrawerExample />
-      </Example>
-      <Example name="Input">
-        <InputsExample />
-      </Example>
-      <Example name="TextArea">
-        <TextAreaExample />
-      </Example>
-      <Example name="Select">
-        <SelectExample />
-      </Example>
-      <Example name="SelectTags">
-        <SelectTagsExample />
-      </Example>
-      <Example name="DateInput">
-        <DateInputExample />
-      </Example>
-      <Example name="DatePicker">
-        <DatePickerExample />
-      </Example>
-      <Example name="Checkbox">
-        <CheckboxExample />
-      </Example>
-      <Example name="RadioGroup">
-        <RadioGroupExample />
-      </Example>
-      <Example name="Switch">
-        <SwitchExample />
-      </Example>
-      <Example name="Tabs">
-        <TabsExample />
-      </Example>
-      <Example name="Buttons">
-        <ButtonsExample />
-      </Example>
-      <Example name="ButtonGroup">
-        <ButtonsGroupExample />
-      </Example>
-      <Example name="Toaster">
-        <ToasterExample />
-      </Example>
-
-      {/* <div className="flex flex-col gap-10">
-        <DrawerApp />
-        <PopupApp />
-      </div>
-      <PopupExample />
-      <TextInput />
-      <NumberInputs /> */}
-      <div />
-      <div />
-    </div>
-  )
-}
-
-// const TabsApp = () => {
-//   const [tab, setTab] = useState('tab-1')
-
-//   return (
-//     <div>
-//       <Tabs onChange={setTab} value={tab}>
-//         <Tabs.Tab value="tab-1">Tab1</Tabs.Tab>
-//         <Tabs.Tab value="tab-2">Tab2</Tabs.Tab>
-//       </Tabs>
-//       Active: {tab}
-//     </div>
-//   )
-// }
-
-// const DrawerApp = () => {
-//   const [isOpen, setOpen] = useState(false)
-
-//   return (
-//     <>
-//       <Drawer onClose={() => setOpen(false)} isOpen={isOpen} size="60%">
-//         <Content close={() => setOpen(false)} />
-//       </Drawer>
-//       <Button onClick={() => setOpen((value) => !value)}>{isOpen ? 'Close' : 'Open'} drawer</Button>
-//     </>
-//   )
-// }
-
-// const Content = ({ close }: { close: () => void }) => {
-//   console.log('RENDER')
-//   return <div onClick={close}>App: click to close</div>
-// }
-
-// const PopupApp = () => {
-//   const [isOpen, setOpen] = useState(false)
-
-//   return (
-//     <>
-//       <Popup onClose={() => setOpen(false)} isOpen={isOpen} className="popup-1">
-//         <div style={{ padding: '10px' }}>
-//           <Button onClick={() => setOpen(false)}>App: click to close</Button>
-//         </div>
-//       </Popup>
-//       <Button onClick={() => setOpen((value) => !value)}>{isOpen ? 'Close' : 'Open'} popup</Button>
-//     </>
-//   )
-// }

package/playground/Example.tsx

@@ -1,14 +0,0 @@
-interface ExampleProps {
-  children: React.ReactNode
-  pane?: React.ReactNode
-  name: string
-}
-
-export const Example = ({ name, children, pane }: ExampleProps) => {
-  return (
-    <div className="sample">
-      <div className="sample-name">{name}</div>
-      <div>{children}</div>
-    </div>
-  )
-}

package/playground/Test.tsx

@@ -1,44 +0,0 @@
-import './test.scss'
-
-// import { Popover } from '../Popover'
-// import { Calendar } from '../DatePicker/Calendar'
-import { useLayoutEffect } from 'react'
-import { DatePickerControl } from './date-picker'
-
-const PopoverDemo = () => {
-  return (
-    <div style={{ width: '280px' }}>
-      <DatePickerControl size="md" />
-    </div>
-  )
-  // const [value, setValue] = useState(new Date())
-
-  // return (
-  //   <Popover
-  //     open
-  //     fitMaxHeight={false}
-  //     content={() => <Calendar value={value} onChange={setValue} disableFuture />}
-  //   >
-  //     <div></div>
-  //   </Popover>
-  // )
-}
-
-// const Check = () => {
-//   console.log('render')
-//   return <div>Check</div>
-// }
-
-export const TestApp = () => {
-  useLayoutEffect(() => {
-    document.body.classList.add('theme-light')
-  }, [])
-
-  return (
-    <div className="examples-list" style={{ alignItems: 'center' }}>
-      <div />
-      <PopoverDemo />
-      <div />
-    </div>
-  )
-}

package/playground/animation-test-1/index.scss

@@ -1,20 +0,0 @@
-.test-1-animation {
-  transition-duration: 4s;
-  transition-property: all;
-  transition-timing-function: linear;
-
-  // presets before transition in (initial state)
-  &[data-closed][data-enter] {
-    opacity: 0;
-  }
-
-  // transition in
-  &[data-enter] {
-    opacity: 1;
-  }
-
-  // transition out
-  &[data-leave] {
-    opacity: 0;
-  }
-}

package/playground/animation-test-1/index.tsx

@@ -1,17 +0,0 @@
-import './index.scss'
-// import { useState } from 'react'
-
-export const Test1Animation = () => {
-  // const [open, setOpen] = useState(false)
-
-  return (
-    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
-      <div style={{ padding: '10px', width: '200px' }}>
-        {/* <button onClick={() => setOpen((open) => !open)}>Animation 1</button> */}
-        {/* <Transition show={open}> */}
-        <div className="test-1-animation box-styles">Target element</div>
-        {/* </Transition> */}
-      </div>
-    </div>
-  )
-}

package/playground/animation-test-2/index.scss

@@ -1,62 +0,0 @@
-// Описание test-2-animation: анимация запускается через transform, а исчезает через opacity
-
-// Данный пример необходим для понимания прерывания enter анимации
-// Анимация появления (data-enter) намеренно сделана долгой, чтобы запустить завершение анимации ещё до окончания анимации enter.
-// В случае если анимация enter была бы окончена, вызов завершения анимации запускал бы этап [data-leave], однако при вызове завершения
-// в моменте выполнения enter, [data-leave] не будет вызван, а вместо этого будет добавлен атрибут [data-closed], который запустит анимацию вспять, до initial состояния, которое описано в [data-closed][data-enter]
-
-.test-2-animation {
-  // initial - начальное состояние (перед появлением)
-  &[data-closed][data-enter] {
-    transform: scale(0.3);
-  }
-
-  // animate from initial - анимация до конечного состояния, от начального
-  &[data-enter] {
-    transform: scale(1);
-    transition-delay: 0;
-    transition-duration: 2s;
-    transition-property: transform;
-    transition-timing-function: linear;
-  }
-
-  // exit - анимация завершения
-  &[data-leave] {
-    transition-delay: 0;
-    transition-duration: 1s;
-    transition-property: opacity;
-    transition-timing-function: linear;
-    opacity: 0;
-  }
-}
-
-// В данном примере, анимировано прерывание enter
-
-.test-2-completed-animation {
-  // начальное состояние
-  // также будет запускаться при прерывании enter-анимации
-  &[data-closed][data-enter] {
-    // описываем начальное состояние (перед появлением). Обращаю внимание что "opacity: 0" не будет учтен при data-enter анимации
-    transform: scale(0.3);
-    opacity: 0;
-    // стили использующиеся при прерывании data-enter анимации (переход в начальное состояние)
-    transition-duration: 200ms;
-    transition-property: transform, opacity; // учитываем opacity
-  }
-
-  // animate - анимация появления запускаемая от начального до конечного состояния
-  &[data-enter] {
-    transform: scale(1);
-    transition-duration: 2s;
-    transition-property: transform;
-    transition-timing-function: linear;
-  }
-
-  // exit - анимация завершения
-  &[data-leave] {
-    transition-duration: 1s;
-    transition-property: opacity;
-    transition-timing-function: linear;
-    opacity: 0;
-  }
-}

package/playground/animation-test-2/index.tsx

@@ -1,32 +0,0 @@
-import './index.scss'
-// import { useState } from 'react'
-
-export const Test2Animation = () => {
-  // const [open, setOpen] = useState(false)
-
-  return (
-    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
-      <div style={{ padding: '10px', width: '200px' }}>
-        {/* <button onClick={() => setOpen((open) => !open)}>Animation 2(*1)</button> */}
-        {/* <Transition show={open}> */}
-        <div className="test-2-animation box-styles">Target element</div>
-        {/* </Transition> */}
-      </div>
-    </div>
-  )
-}
-
-export const Test2CompletedAnimation = () => {
-  // const [open, setOpen] = useState(false)
-
-  return (
-    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
-      <div style={{ padding: '10px', width: '200px' }}>
-        {/* <button onClick={() => setOpen((open) => !open)}>Animation 2(*2)</button> */}
-        {/* <Transition show={open}> */}
-        <div className="test-2-completed-animation box-styles">Target element</div>
-        {/* </Transition> */}
-      </div>
-    </div>
-  )
-}

package/playground/bootstrap.tsx

@@ -1,19 +0,0 @@
-import './styles.scss'
-
-import './index.scss'
-import './index.css'
-import '../src/theme.scss'
-
-import { createRoot } from 'react-dom/client'
-import { App } from './App'
-// import { TestApp } from './Test'
-
-createRoot(document.getElementById('root')!).render(<App />)
-
-const error = console.error
-console.error = (...args: any) => {
-  if (/defaultProps/.test(args[0])) return
-  if (/findDOMNode/.test(args[0])) return
-
-  error(...args)
-}