bianic-ui 2.2.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/cjs/index.js +269 -73
  2. package/dist/cjs/lib.css +1 -1
  3. package/dist/cjs/types/components/Card/config.d.ts +6 -0
  4. package/dist/cjs/types/components/Card/index.d.ts +8 -0
  5. package/dist/cjs/types/components/FileTree/FileTreeSimulation.d.ts +3 -0
  6. package/dist/cjs/types/components/FileTree/TreeItem.d.ts +13 -0
  7. package/dist/cjs/types/components/FileTree/useFileTree.d.ts +12 -0
  8. package/dist/cjs/types/components/Forms/SelectInput/Example/CustomDropdown.d.ts +2 -1
  9. package/dist/cjs/types/components/PaginationBar/SelectedPage.d.ts +7 -0
  10. package/dist/cjs/types/components/Popover/PropInterface.d.ts +21 -0
  11. package/dist/cjs/types/components/Popover/index.d.ts +2 -10
  12. package/dist/cjs/types/components/Tooltip/PropsInterface.d.ts +6 -2
  13. package/dist/cjs/types/components/index.d.ts +4 -0
  14. package/dist/cjs/types/stories/Card/Card.stories.d.ts +17 -0
  15. package/dist/cjs/types/stories/FileTree/FileTreeSimulation.stories.d.ts +12 -0
  16. package/dist/cjs/types/stories/Form/LiveSearch/LivesearchCustomDropdownExample.stories.d.ts +2 -2
  17. package/dist/cjs/types/stories/Form/SelectInput/SelectInputCustom.stories.d.ts +1 -1
  18. package/dist/cjs/types/utility/index.d.ts +1 -0
  19. package/dist/cjs/types/utility/public/words.d.ts +13 -0
  20. package/dist/esm/index.js +266 -74
  21. package/dist/esm/lib.css +1 -1
  22. package/dist/esm/types/components/Card/config.d.ts +6 -0
  23. package/dist/esm/types/components/Card/index.d.ts +8 -0
  24. package/dist/esm/types/components/FileTree/FileTreeSimulation.d.ts +3 -0
  25. package/dist/esm/types/components/FileTree/TreeItem.d.ts +13 -0
  26. package/dist/esm/types/components/FileTree/useFileTree.d.ts +12 -0
  27. package/dist/esm/types/components/Forms/SelectInput/Example/CustomDropdown.d.ts +2 -1
  28. package/dist/esm/types/components/PaginationBar/SelectedPage.d.ts +7 -0
  29. package/dist/esm/types/components/Popover/PropInterface.d.ts +21 -0
  30. package/dist/esm/types/components/Popover/index.d.ts +2 -10
  31. package/dist/esm/types/components/Tooltip/PropsInterface.d.ts +6 -2
  32. package/dist/esm/types/components/index.d.ts +4 -0
  33. package/dist/esm/types/stories/Card/Card.stories.d.ts +17 -0
  34. package/dist/esm/types/stories/FileTree/FileTreeSimulation.stories.d.ts +12 -0
  35. package/dist/esm/types/stories/Form/LiveSearch/LivesearchCustomDropdownExample.stories.d.ts +2 -2
  36. package/dist/esm/types/stories/Form/SelectInput/SelectInputCustom.stories.d.ts +1 -1
  37. package/dist/esm/types/utility/index.d.ts +1 -0
  38. package/dist/esm/types/utility/public/words.d.ts +13 -0
  39. package/dist/index.d.ts +54 -6
  40. package/package.json +8 -2
@@ -0,0 +1,6 @@
1
+ declare const config: {
2
+ 'dark-background': string;
3
+ 'light-background': string;
4
+ 'outline-light-background': string;
5
+ };
6
+ export default config;
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import config from './config';
3
+ declare const Card: ({ children, disabled, variant, }: {
4
+ children: React.ReactNode;
5
+ disabled?: boolean | undefined;
6
+ variant?: "dark-background" | "light-background" | "outline-light-background" | undefined;
7
+ }) => React.JSX.Element;
8
+ export default Card;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const FileTreeSimulation: () => React.JSX.Element;
3
+ export default FileTreeSimulation;
@@ -0,0 +1,13 @@
1
+ import React, { ComponentPropsWithRef } from 'react';
2
+ interface TreeItemInterface extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
3
+ data: any;
4
+ expandedData: Map<string, boolean>;
5
+ setExpandedData: (data: Map<string, boolean>) => void;
6
+ dataMap: Map<string, any>;
7
+ activeUnitId?: string;
8
+ handleChevronClick?: (data: any) => void;
9
+ handleRightClick?: (data: any) => void;
10
+ handleCLick?: (data: any) => void;
11
+ }
12
+ declare const TreeItem: ({ data, expandedData, setExpandedData, dataMap, activeUnitId, handleChevronClick, handleRightClick, handleCLick, }: TreeItemInterface) => React.JSX.Element;
13
+ export default TreeItem;
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ declare const useFileTree: (data: any[], alias?: {
3
+ id: null;
4
+ label: null;
5
+ parent: null;
6
+ }) => {
7
+ tree: any[];
8
+ map: Map<any, any>;
9
+ expandedData: Map<string, boolean>;
10
+ setExpandedData: React.Dispatch<React.SetStateAction<Map<string, boolean>>>;
11
+ };
12
+ export default useFileTree;
@@ -1,3 +1,4 @@
1
1
  import React from 'react';
2
- declare const CustomDropdown: () => React.JSX.Element;
2
+ import SelectInputProps from '../PropsInterface';
3
+ declare const CustomDropdown: ({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps) => React.JSX.Element;
3
4
  export default CustomDropdown;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ interface SelectedPageProps {
3
+ label?: string;
4
+ size?: 'sm' | 'md';
5
+ }
6
+ declare const SelectedPage: ({ label, size }: SelectedPageProps) => React.JSX.Element;
7
+ export default SelectedPage;
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ export interface PopoverProps {
3
+ className?: string;
4
+ children: React.ReactNode;
5
+ content: string;
6
+ delay?: number;
7
+ maxWidth?: string;
8
+ title?: string;
9
+ style?: React.CSSProperties;
10
+ zIndex?: number;
11
+ direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
12
+ }
13
+ export interface PopoverItemProps {
14
+ anchorRef: React.RefObject<HTMLElement>;
15
+ className?: string;
16
+ content: string;
17
+ style?: React.CSSProperties;
18
+ title: string;
19
+ zIndex?: number;
20
+ direction: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
21
+ }
@@ -1,16 +1,8 @@
1
1
  import React from 'react';
2
- interface PopoverProps {
3
- children: React.ReactNode;
4
- content: string;
5
- delay?: number;
6
- direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
7
- title?: string;
8
- maxWidth?: string;
9
- }
10
- declare function Popover({ children, content, delay, direction, title, maxWidth, }: PopoverProps): React.JSX.Element;
2
+ import { PopoverProps } from './PropInterface';
3
+ declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React.JSX.Element;
11
4
  declare namespace Popover {
12
5
  var defaultProps: {
13
- delay: number;
14
6
  direction: string;
15
7
  title: string;
16
8
  };
@@ -1,16 +1,20 @@
1
- import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
1
+ import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, RefObject } from 'react';
2
2
  interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
3
3
  children: ReactNode;
4
4
  content: ReactNode | string;
5
5
  delay?: number;
6
6
  maxWidth?: string;
7
+ zIndex?: number;
7
8
  direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
8
9
  }
9
10
  interface TooltipItemProps {
10
11
  anchorRef: RefObject<HTMLDivElement>;
11
- direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
12
+ className?: string;
12
13
  content: ReactNode | string;
13
14
  tooltipContainerRef: React.RefObject<HTMLDivElement>;
14
15
  tooltipContainerStyle: React.CSSProperties;
16
+ style?: ComponentPropsWithRef<'div'>['style'];
17
+ zIndex: number;
18
+ direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
15
19
  }
16
20
  export { TooltipProps, TooltipItemProps };
@@ -6,9 +6,12 @@ export { default as Banner } from './Banner';
6
6
  export { default as Brand } from './Brand/Brand';
7
7
  export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
8
8
  export { Button, ButtonApp, ContextualButton } from './Button';
9
+ export { default as Card } from './Card';
9
10
  export { default as Color } from './Color';
10
11
  export { default as Divider } from './Divider/Divider';
11
12
  export { default as FileTree } from './FileTree';
13
+ export { default as TreeItem } from './FileTree/TreeItem';
14
+ export { default as useFileTree } from './FileTree/useFileTree';
12
15
  export { MenuContainer, MenuItem } from './Menu';
13
16
  export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle, SegmentButtonItem, SegmentButtonGroup, FormLabel, FormGroup, FormGroupButton, FormGroupLabel, DropdownItem, DropdownContainer, DatePicker, PickerCalendar, } from './Forms';
14
17
  export * from './Icons';
@@ -29,3 +32,4 @@ export { default as Tooltip } from './Tooltip';
29
32
  export { Display, P, Heading, Text, Link } from './Typography';
30
33
  export { Toaster } from './Toaster';
31
34
  export { default as Window } from './Window';
35
+ export { getRelativeTime } from '../utility';
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import type { StoryObj } from '@storybook/react';
3
+ declare const meta: {
4
+ title: string;
5
+ component: ({ children, disabled, variant, }: {
6
+ children: import("react").ReactNode;
7
+ disabled?: boolean | undefined;
8
+ variant?: "dark-background" | "light-background" | "outline-light-background" | undefined;
9
+ }) => import("react").JSX.Element;
10
+ parameters: {
11
+ layout: string;
12
+ };
13
+ argTypes: {};
14
+ };
15
+ export default meta;
16
+ type Story = StoryObj<typeof meta>;
17
+ export declare const Demo: Story;
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import type { StoryObj } from '@storybook/react';
3
+ declare const meta: {
4
+ title: string;
5
+ component: () => import("react").JSX.Element;
6
+ parameters: {
7
+ layout: string;
8
+ };
9
+ };
10
+ export default meta;
11
+ type Story = StoryObj<typeof meta>;
12
+ export declare const NewFileTreeSimulation: Story;
@@ -1,5 +1,5 @@
1
- import { StoryObj } from "@storybook/react/*";
2
- import React from "react";
1
+ import { StoryObj } from '@storybook/react/*';
2
+ import React from 'react';
3
3
  declare const meta: {
4
4
  title: string;
5
5
  component: ({ children, ...props }: import("../../../components/Forms/LiveSearch/types").LiveSearchProps) => React.JSX.Element;
@@ -2,7 +2,7 @@
2
2
  import type { StoryObj } from '@storybook/react';
3
3
  declare const meta: {
4
4
  title: string;
5
- component: () => import("react").JSX.Element;
5
+ component: ({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: import("../../../components/Forms/SelectInput/PropsInterface").default) => import("react").JSX.Element;
6
6
  parameters: {
7
7
  layout: string;
8
8
  };
@@ -0,0 +1 @@
1
+ export { getRelativeTime } from './public/words';
@@ -0,0 +1,13 @@
1
+ /**
2
+ * getRelativeTime
3
+ * Accepts a JavaScript Date and returns a human friendly relative time string.
4
+ * Rules:
5
+ * - < 1 minute: "just now"
6
+ * - < 1 hour: "x minutes ago"
7
+ * - < 1 day: "x hours ago"
8
+ * - < 30 days: "x days ago"
9
+ * - < 12 months: "x months ago" (uses 30-day months approximation)
10
+ * - >= 1 year: "x years ago" (uses 365-day years approximation; floors to whole years,
11
+ * so e.g. 1 year 11 months => "1 years ago" as requested)
12
+ */
13
+ export declare function getRelativeTime(date: Date): string;
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import React$1, { ComponentPropsWithoutRef, ComponentPropsWithRef, ChangeEvent, ReactNode, MouseEvent, HTMLAttributes } from 'react';
2
3
 
3
4
  interface AccordionsProps extends ComponentPropsWithoutRef<'div'> {
@@ -125,6 +126,12 @@ interface ContextualButtonProps extends ComponentPropsWithoutRef<'button'> {
125
126
  }
126
127
  declare const ContextualButton: React$1.ForwardRefExoticComponent<ContextualButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
127
128
 
129
+ declare const Card: ({ children, disabled, variant, }: {
130
+ children: React$1.ReactNode;
131
+ disabled?: boolean | undefined;
132
+ variant?: "dark-background" | "light-background" | "outline-light-background" | undefined;
133
+ }) => React$1.JSX.Element;
134
+
128
135
  declare function Color(): React$1.JSX.Element;
129
136
 
130
137
  interface DividerProps extends ComponentPropsWithoutRef<'div'> {
@@ -156,6 +163,29 @@ interface FileTreeProps {
156
163
  }
157
164
  declare const FileTree: ({ data, color, chevronColor, contextMenu, onMouseDown, }: FileTreeProps) => React$1.JSX.Element;
158
165
 
166
+ interface TreeItemInterface extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
167
+ data: any;
168
+ expandedData: Map<string, boolean>;
169
+ setExpandedData: (data: Map<string, boolean>) => void;
170
+ dataMap: Map<string, any>;
171
+ activeUnitId?: string;
172
+ handleChevronClick?: (data: any) => void;
173
+ handleRightClick?: (data: any) => void;
174
+ handleCLick?: (data: any) => void;
175
+ }
176
+ declare const TreeItem: ({ data, expandedData, setExpandedData, dataMap, activeUnitId, handleChevronClick, handleRightClick, handleCLick, }: TreeItemInterface) => React$1.JSX.Element;
177
+
178
+ declare const useFileTree: (data: any[], alias?: {
179
+ id: null;
180
+ label: null;
181
+ parent: null;
182
+ }) => {
183
+ tree: any[];
184
+ map: Map<any, any>;
185
+ expandedData: Map<string, boolean>;
186
+ setExpandedData: React$1.Dispatch<React$1.SetStateAction<Map<string, boolean>>>;
187
+ };
188
+
159
189
  interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
160
190
  isTopFlat?: boolean;
161
191
  children: React$1.ReactNode | undefined;
@@ -605,17 +635,20 @@ declare namespace Pills {
605
635
  }
606
636
 
607
637
  interface PopoverProps {
608
- children: React$1.ReactNode;
638
+ className?: string;
639
+ children: React.ReactNode;
609
640
  content: string;
610
641
  delay?: number;
611
- direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
612
- title?: string;
613
642
  maxWidth?: string;
643
+ title?: string;
644
+ style?: React.CSSProperties;
645
+ zIndex?: number;
646
+ direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
614
647
  }
615
- declare function Popover({ children, content, delay, direction, title, maxWidth, }: PopoverProps): React$1.JSX.Element;
648
+
649
+ declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React$1.JSX.Element;
616
650
  declare namespace Popover {
617
651
  var defaultProps: {
618
- delay: number;
619
652
  direction: string;
620
653
  title: string;
621
654
  };
@@ -739,6 +772,7 @@ interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
739
772
  content: ReactNode | string;
740
773
  delay?: number;
741
774
  maxWidth?: string;
775
+ zIndex?: number;
742
776
  direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
743
777
  }
744
778
 
@@ -828,4 +862,18 @@ interface WindowProps extends ComponentPropsWithRef<'div'> {
828
862
  }
829
863
  declare function Window({ size, title, zIndex, onClose, ...rest }: WindowProps): React$1.JSX.Element;
830
864
 
831
- export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };
865
+ /**
866
+ * getRelativeTime
867
+ * Accepts a JavaScript Date and returns a human friendly relative time string.
868
+ * Rules:
869
+ * - < 1 minute: "just now"
870
+ * - < 1 hour: "x minutes ago"
871
+ * - < 1 day: "x hours ago"
872
+ * - < 30 days: "x days ago"
873
+ * - < 12 months: "x months ago" (uses 30-day months approximation)
874
+ * - >= 1 year: "x years ago" (uses 365-day years approximation; floors to whole years,
875
+ * so e.g. 1 year 11 months => "1 years ago" as requested)
876
+ */
877
+ declare function getRelativeTime(date: Date): string;
878
+
879
+ export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, getRelativeTime, useFileTree };
package/package.json CHANGED
@@ -3,8 +3,12 @@
3
3
  "publishConfig": {
4
4
  "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
5
5
  },
6
- "version": "2.2.0",
6
+ "version": "2.3.1",
7
7
  "description": "Design Language System develop by BIAENERGI",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git@github.com:bia-energi/bianic-2.0.git"
11
+ },
8
12
  "scripts": {
9
13
  "rollup": "rollup -c",
10
14
  "storybook": "storybook dev -p 6006",
@@ -13,7 +17,9 @@
13
17
  "lint": "npx eslint src/components",
14
18
  "lint:fix": "npx eslint src/components --fix",
15
19
  "prepare": "husky install",
16
- "release": "standard-version"
20
+ "release": "standard-version",
21
+ "full-release": "npm run release && git push --follow-tags origin development && npm publish",
22
+ "release:beta": "npm run release -- --prerelease beta && git push --follow-tags origin development && npm publish --tag beta"
17
23
  },
18
24
  "standard-version": {
19
25
  "types": [