math-main-components 0.0.198 → 0.0.202

package/README.md

@@ -24,4 +24,18 @@ In order to unlink the packages, run `yarn retreat math-main-components` in app
 ## Publishing
 1. increment version in `package.json`
 2. run `npm publish --access public`
-3. run `yarn add math-main-components@0.0.1` in project
+3. run `yarn add math-main-components@0.0.1` in project
+
+
+## Using styles
+
+In order to use styles you need to have 'sass' installed.
+
+In your _app.js file, import the styles like this:
+
+```ts
+import 'math-main-components/styles/font.scss'
+import 'math-main-components/styles/material-symbols.scss'
+import 'math-main-components/styles/theme-colors.scss'
+import 'math-main-components/styles/theme-styles.scss'
+```

package/dist/components/.Slider/Slider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SliderCard = {
+    title: string;
+    description: string;
+};
+export declare function Slider({ cards }: {
+    cards: SliderCard[];
+}): React.JSX.Element;

package/dist/components/.Slider/index.d.ts

@@ -0,0 +1 @@
+export { Slider, type SliderCard } from './Slider';

package/dist/components/.StepBack/StepBack.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function StepBack({ iconName, text }: {
+    iconName?: string;
+    text?: string;
+}): React.JSX.Element;

package/dist/components/.StepBack/index.d.ts

@@ -0,0 +1 @@
+export { StepBack } from './StepBack';

package/dist/components/ForwardButton/ForwardButton.stories.d.ts

@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/react';
-import { FormText } from '../FormText';
+import { ForwardButton } from './ForwardButton';
 declare const meta: {
     title: string;
-    component: typeof FormText;
+    component: typeof ForwardButton;
     parameters: {
         layout: string;
     };

package/dist/components/InputArea/InputArea.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { InputArea } from './InputArea';
+declare const meta: {
+    title: string;
+    component: typeof InputArea;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/InputMail/InputMail.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { InputMail } from './InputMail';
+declare const meta: {
+    title: string;
+    component: typeof InputMail;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/InputNames/InputNames.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { InputNames } from './InputNames';
+declare const meta: {
+    title: string;
+    component: typeof InputNames;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/InputNumber/InputNumber.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { InputNumber } from './InputNumber';
+declare const meta: {
+    title: string;
+    component: typeof InputNumber;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/InputPassword/InputPassword.d.ts

@@ -4,7 +4,7 @@ export declare function InputPassword({ id, placeholder, title, name, isVisible,
     placeholder?: string;
     autoComplete?: string;
     title?: string;
-    name: string;
+    name?: string;
     minLength?: number;
     isVisible?: boolean;
     width?: string;

package/dist/components/InputPassword/InputPassword.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { InputPassword } from './InputPassword';
+declare const meta: {
+    title: string;
+    component: typeof InputPassword;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/InputPin/InputPin.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { InputPin } from './InputPin';
+declare const meta: {
+    title: string;
+    component: typeof InputPin;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/InputText/InputText.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { InputText } from './InputText';
+declare const meta: {
+    title: string;
+    component: typeof InputText;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/NumberDropdown/NumberDropdown.stories.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: <Type extends string>({ options, unit, onChangeDropdown, onChangeInput, ...props }: {
+        options: import("./").NumberDropdownOption<Type>[];
+        onChangeDropdown?: ((value: Type) => void) | undefined;
+        onChangeInput?: ((value: number) => void) | undefined;
+        unit?: string | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement>) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/NumberDropdown/index.d.ts

@@ -0,0 +1,11 @@
+import React, { InputHTMLAttributes } from 'react';
+export type NumberDropdownOption<Type> = {
+    value: Type;
+    label: string;
+};
+export declare const NumberDropdown: <Type extends string>({ options, unit, onChangeDropdown, onChangeInput, ...props }: {
+    options: NumberDropdownOption<Type>[];
+    onChangeDropdown?: ((value: Type) => void) | undefined;
+    onChangeInput?: ((value: number) => void) | undefined;
+    unit?: string | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement>) => React.JSX.Element;

package/dist/components/NumberField/NumberField.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { NumberField } from '../NumberField';
+declare const meta: {
+    title: string;
+    component: typeof NumberField;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/NumberField/index.d.ts

@@ -0,0 +1,17 @@
+import React, { HTMLInputTypeAttribute } from 'react';
+export declare function NumberField<Type>({ placeholder, type, active, onChangeActive, enableLocked, locked, onChangeLocked, title, unit, name, defaultValue, onUpdate, disabled, min, max, validate, ...props }: {
+    placeholder?: string;
+    type?: HTMLInputTypeAttribute;
+    title?: string;
+    unit?: string;
+    active?: boolean;
+    onChangeActive?: (active: boolean) => void;
+    name: Type;
+    defaultValue?: number;
+    disabled?: boolean;
+    enableLocked?: boolean;
+    locked?: boolean;
+    onChangeLocked?: (locked: boolean) => void;
+    onUpdate?: (value: number) => void;
+    validate?: (name: Type, value: number) => boolean;
+} & React.InputHTMLAttributes<HTMLInputElement>): React.JSX.Element;

package/dist/components/OptionField/OptionField.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { OptionField } from './OptionField';
+declare const meta: {
+    title: string;
+    component: typeof OptionField;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/OptionField2/OptionField2.d.ts

@@ -0,0 +1,7 @@
+import React, { MouseEvent } from 'react';
+export declare function OptionField2({ title, iconName, onClick, preselected }: {
+    title: string;
+    iconName?: string;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    preselected?: boolean;
+}): React.JSX.Element;

package/dist/components/OptionField2/OptionField2.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { OptionField2 } from './OptionField2';
+declare const meta: {
+    title: string;
+    component: typeof OptionField2;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/OptionField2/index.d.ts

@@ -0,0 +1 @@
+export { OptionField2 } from './OptionField2';

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export declare function ProgressBar({ length, progress }: {
+export declare function ProgressBar({ length, progress, enableDot }: {
     length: number;
     progress: number;
+    enableDot?: boolean;
 }): React.JSX.Element;

package/dist/components/ProgressBar/ProgressBar.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { ProgressBar } from './ProgressBar';
+declare const meta: {
+    title: string;
+    component: typeof ProgressBar;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/RadioButtons/RadioButtons.d.ts

@@ -1,9 +1,8 @@
 import React, { ChangeEvent } from 'react';
-export declare class RadioOption {
+export type RadioOption = {
     text: string;
     name: string;
-    constructor(text: string, name: string);
-}
+};
 export declare function RadioButtons({ options, group, selected, onClick, width }: {
     options: RadioOption[];
     group: string;

package/dist/components/RadioButtons/RadioButtons.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { RadioButtons } from './RadioButtons';
+declare const meta: {
+    title: string;
+    component: typeof RadioButtons;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/RadioButtons/index.d.ts

@@ -1 +1 @@
-export { RadioButtons, RadioOption } from './RadioButtons';
+export { RadioButtons, type RadioOption } from './RadioButtons';

package/dist/components/RedirectButton/RedirectButton.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
-export declare function RedirectButton({ id, type, onClick }: {
+import React, { MouseEvent, ReactNode } from 'react';
+export declare function RedirectButton({ id, type, onClick, children }: {
     id?: string;
     type: "forward" | "back" | "middle";
-    onClick?: any;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    children?: ReactNode;
 }): React.JSX.Element;

package/dist/components/RedirectButton/RedirectButton.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { RedirectButton } from './RedirectButton';
+declare const meta: {
+    title: string;
+    component: typeof RedirectButton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Forward: Story;
+export declare const Backward: Story;
+export declare const Middle: Story;

package/dist/components/SearchChips/SearchChips.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
-export declare class SearchChip {
+export type SearchChip = {
     title: string;
     value: string;
     selected: boolean;
-    constructor(title: string, value: string);
-}
+};
 export declare function SearchChips({ items, onChange, chipsVisible }: {
     items: SearchChip[];
     onChange?: (chips: SearchChip[]) => void;
-    chipsVisible: number;
+    chipsVisible?: number;
 }): React.JSX.Element;

package/dist/components/SearchChips/Searchbar.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { SearchChips } from './SearchChips';
+declare const meta: {
+    title: string;
+    component: typeof SearchChips;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/SearchChips/index.d.ts

@@ -1 +1 @@
-export { SearchChip, SearchChips } from './SearchChips';
+export { SearchChips, type SearchChip } from './SearchChips';

package/dist/components/Searchbar/Searchbar.d.ts

@@ -3,7 +3,7 @@ export type SearchResult = {
     title: string;
     data: unknown;
 };
-export declare function Searchbar<Type extends SearchResult>({ placeholder, title, showNoResults, errorTitle, errorMessage, errorButton, helpTitle, helpMessage, marginBottom, marginTop, errorAction, onInput, onClickResult, withButton, buttonText, suggestions, autoFocus, results }: {
+export declare function Searchbar<Type extends SearchResult>({ placeholder, title, showNoResults, errorTitle, errorMessage, errorButton, helpTitle, helpMessage, width, marginBottom, marginTop, errorAction, onInput, onClickResult, withButton, buttonText, suggestions, autoFocus, results }: {
     placeholder: string;
     title?: string;
     showNoResults?: boolean;
@@ -12,6 +12,7 @@ export declare function Searchbar<Type extends SearchResult>({ placeholder, titl
     errorButton?: string;
     helpTitle?: string;
     helpMessage?: string;
+    width?: string;
     marginBottom?: number;
     marginTop?: number;
     errorAction?: (event: MouseEvent<HTMLButtonElement>) => void;

package/dist/components/Searchbar/Searchbar.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { Searchbar } from './Searchbar';
+declare const meta: {
+    title: string;
+    component: typeof Searchbar;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/Table/Table.d.ts

@@ -2,9 +2,9 @@ import React, { MouseEvent, ReactNode } from 'react';
 export type TableActionType = "red" | "default";
 export type TableItem<DataType> = {
     title: string;
-    subtitle: string;
-    moreText: string;
-    iconName: string;
+    subtitle?: string;
+    moreText?: string;
+    iconName?: string;
     data: DataType;
 };
 export type TableItemAction<DataType> = {
@@ -13,11 +13,12 @@ export type TableItemAction<DataType> = {
     onClick: (event: MouseEvent<HTMLDivElement>, item: TableItem<DataType>, index: number) => void;
     type: TableActionType;
 };
-export declare function Table<DataType>({ items, title, actions, moreActions, selected, style, marginTop, emptyTitle, emptySubtitle, emptyIconName, enableEmptyCard }: {
+export declare function Table<DataType>({ items, title, actions, moreActions, selected, style, marginTop, width, emptyTitle, emptySubtitle, emptyIconName, enableEmptyCard }: {
     items: TableItem<DataType>[];
     title: string;
     selected?: number;
     style?: "default" | "blue";
+    width?: string;
     actions?: TableItemAction<DataType>[];
     moreActions?: ((data: DataType, index: number) => ReactNode)[];
     marginTop?: number;

package/dist/components/Table/Table.stories.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ items, title, actions, moreActions, selected, style, marginTop, width, emptyTitle, emptySubtitle, emptyIconName, enableEmptyCard }: {
+        items: import("./Table").TableItem<null>[];
+        title: string;
+        selected?: number | undefined;
+        style?: "blue" | "default" | undefined;
+        width?: string | undefined;
+        actions?: import("./Table").TableItemAction<null>[] | undefined;
+        moreActions?: ((data: null, index: number) => import("react").ReactNode)[] | undefined;
+        marginTop?: number | undefined;
+        emptyTitle?: string | undefined;
+        emptySubtitle?: string | undefined;
+        emptyIconName?: string | undefined;
+        enableEmptyCard?: boolean | undefined;
+    }) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-interface TabItem {
+export type TabItem = {
     title: string;
     value: string;
-}
+};
 export declare function Tabs({ tabs, onSelect, selected }: {
     tabs: TabItem[];
     onSelect?: (value: string) => void;
     selected?: string;
 }): React.JSX.Element;
-export {};

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+declare const meta: {
+    title: string;
+    component: typeof Tabs;
+    parameters: {};
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/TextWithIcon/TextWithIcon.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import { TextWithIcon } from './TextWithIcon';
+declare const meta: {
+    title: string;
+    component: typeof TextWithIcon;
+    parameters: {};
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/ToggleBox/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const ToggleBox: ({ defaultActive, activeIcon, inactiveIcon, onSwitch }: {
+    defaultActive?: boolean | undefined;
+    activeIcon?: string | undefined;
+    inactiveIcon?: string | undefined;
+    onSwitch?: ((active: boolean) => void) | undefined;
+}) => React.JSX.Element;

package/dist/components/UsageCard/UsageCard.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import { UsageCard } from './UsageCard';
+declare const meta: {
+    title: string;
+    component: typeof UsageCard;
+    parameters: {};
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;