@indico-data/design-system 1.0.52 → 1.0.53
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.
- package/jest.config.js +1 -2
- package/lib/components/Icon/Icon.stories.d.ts +2 -2
- package/lib/components/Icon/indicons.d.ts +1 -0
- package/lib/components/Navigation/Drawer/constants.d.ts +3 -0
- package/lib/components/index.d.ts +1 -1
- package/lib/components/inputs/DatePicker/DatePicker.d.ts +15 -0
- package/lib/components/inputs/DatePicker/DatePicker.stories.d.ts +6 -0
- package/lib/components/inputs/DatePicker/DatePicker.styles.d.ts +2 -0
- package/lib/components/inputs/DatePicker/index.d.ts +1 -0
- package/lib/components/inputs/NoInputDatePicker/NoInputDatePicker.d.ts +19 -0
- package/lib/components/inputs/NoInputDatePicker/NoInputDatePicker.stories.d.ts +7 -0
- package/lib/components/inputs/NoInputDatePicker/NoInputDatePicker.styles.d.ts +2 -0
- package/lib/components/inputs/NoInputDatePicker/__tests__/NoInputDatePicker.test.d.ts +1 -0
- package/lib/components/inputs/NoInputDatePicker/index.d.ts +1 -0
- package/lib/components/inputs/index.d.ts +2 -0
- package/lib/components/text-truncate/TextTruncate.d.ts +1 -1
- package/lib/index.d.ts +61 -28
- package/lib/index.esm.js +21441 -13325
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +21462 -13328
- package/lib/index.js.map +1 -1
- package/lib/types.d.ts +1 -0
- package/lib/utils/color.d.ts +21 -0
- package/lib/utils/index.d.ts +4 -0
- package/lib/utils/number.d.ts +21 -0
- package/lib/utils/string.d.ts +12 -0
- package/package.json +10 -3
- package/src/components/Icon/indicons.tsx +6 -0
- package/src/components/ListTable/Header/Header.tsx +1 -1
- package/src/components/Pagination/Pagination.tsx +1 -1
- package/src/components/basic-section/SectionTable/SectionTable.styles.ts +1 -2
- package/src/components/basic-section/SectionTable/SectionTable.tsx +12 -10
- package/src/components/dropdowns/MultiCombobox/MultiCombobox.stories.tsx +1 -1
- package/src/components/dropdowns/MultiCombobox/MultiCombobox.tsx +1 -1
- package/src/components/dropdowns/SingleCombobox/SingleCombobox.tsx +1 -1
- package/src/components/index.ts +2 -0
- package/src/components/inputs/DatePicker/DatePicker.stories.tsx +30 -0
- package/src/components/inputs/DatePicker/DatePicker.styles.ts +437 -0
- package/src/components/inputs/DatePicker/DatePicker.tsx +165 -0
- package/src/components/inputs/DatePicker/index.ts +1 -0
- package/src/components/inputs/EditableInput/EditableInput.tsx +1 -1
- package/src/components/inputs/NoInputDatePicker/NoInputDatePicker.stories.tsx +52 -0
- package/src/components/inputs/NoInputDatePicker/NoInputDatePicker.styles.ts +449 -0
- package/src/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx +204 -0
- package/src/components/inputs/NoInputDatePicker/__tests__/NoInputDatePicker.test.tsx +126 -0
- package/src/components/inputs/NoInputDatePicker/index.ts +1 -0
- package/src/components/inputs/TextInput/TextInput.stories.tsx +1 -1
- package/src/components/inputs/index.ts +2 -0
- package/src/components/modals/ModalBase/ModalBase.styles.tsx +1 -1
- package/src/components/text-truncate/TextTruncate.test.tsx +3 -4
- package/src/components/text-truncate/TextTruncate.tsx +3 -2
- package/src/index.ts +2 -0
- package/src/styles/globals/forms.ts +1 -9
- package/src/styles/globals/tables.ts +1 -5
- package/src/utils/color.ts +139 -0
- package/src/utils/index.ts +5 -0
- package/src/utils/number.ts +29 -0
- package/src/utils/string.ts +87 -0
package/jest.config.js
CHANGED
|
@@ -4,12 +4,11 @@ module.exports = {
|
|
|
4
4
|
testEnvironment: 'jest-environment-jsdom',
|
|
5
5
|
testPathIgnorePatterns: ['/node_modules/', '/lib/', '__mocks__'],
|
|
6
6
|
setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
|
|
7
|
-
|
|
7
|
+
moduleNameMapper: {
|
|
8
8
|
'^@/(.*)$': '<rootDir>/src/$1',
|
|
9
9
|
},
|
|
10
10
|
transform: {
|
|
11
11
|
'^.+\\.(ts|tsx)?$': 'ts-jest',
|
|
12
12
|
'^.+\\.(js|jsx)$': 'babel-jest',
|
|
13
13
|
},
|
|
14
|
-
|
|
15
14
|
};
|
|
@@ -15,7 +15,7 @@ declare const meta: {
|
|
|
15
15
|
name: {
|
|
16
16
|
control: {
|
|
17
17
|
type: string;
|
|
18
|
-
options: ("checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list")[];
|
|
18
|
+
options: ("checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "calendar" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list")[];
|
|
19
19
|
};
|
|
20
20
|
};
|
|
21
21
|
};
|
|
@@ -26,7 +26,7 @@ declare const meta: {
|
|
|
26
26
|
'data-testid'?: string | undefined;
|
|
27
27
|
ariaLabel?: string | undefined;
|
|
28
28
|
fill?: string | undefined;
|
|
29
|
-
name: "checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list";
|
|
29
|
+
name: "checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "calendar" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list";
|
|
30
30
|
size?: [string | number] | [string | number, string | number] | undefined;
|
|
31
31
|
style?: any;
|
|
32
32
|
onClick?: (() => void) | undefined;
|
|
@@ -11,6 +11,7 @@ declare const indicons: {
|
|
|
11
11
|
bookmarks: import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
'bookmark-saved': import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
branch: import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
calendar: import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
'check-circle': import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
'circle-help': import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
check: import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,7 +3,7 @@ export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from
|
|
|
3
3
|
export { Button, IconButton } from './buttons';
|
|
4
4
|
export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
|
|
5
5
|
export { Icon, faIcons, indicons } from './Icon';
|
|
6
|
-
export { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, } from './inputs';
|
|
6
|
+
export { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, DatePicker, NoInputDatePicker, } from './inputs';
|
|
7
7
|
export { BarSpinner, CirclePulse, CircleSpinner, LoadingList, PercentageRing, RandomLoadingMessage, LoadingIndicator, } from './loading-indicators';
|
|
8
8
|
export { ListTable } from './ListTable';
|
|
9
9
|
export { Pagination } from './Pagination';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { PermafrostComponent } from '@/types';
|
|
2
|
+
type Props = PermafrostComponent & {
|
|
3
|
+
ariaLabel?: string;
|
|
4
|
+
disableBeforeDate?: Date;
|
|
5
|
+
disableAfterDate?: Date;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
id: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
onChange: (value: Date | undefined) => void;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
selected?: Date | undefined;
|
|
12
|
+
value: Date | undefined;
|
|
13
|
+
};
|
|
14
|
+
export declare const DatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { DatePicker } from '@/components/inputs/DatePicker';
|
|
3
|
+
declare const meta: Meta<typeof DatePicker>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof DatePicker>;
|
|
6
|
+
export declare const Normal: Story;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledDatePicker: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DatePicker } from './DatePicker';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { DateRange } from 'react-day-picker';
|
|
2
|
+
import { IconName, PermafrostComponent } from '@/types';
|
|
3
|
+
type Props = PermafrostComponent & {
|
|
4
|
+
ariaLabel?: string;
|
|
5
|
+
disableBeforeDate?: Date;
|
|
6
|
+
disableAfterDate?: Date;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
id: string;
|
|
9
|
+
label?: string;
|
|
10
|
+
onChange: (value: Date | DateRange | undefined) => void;
|
|
11
|
+
selected?: Date | undefined;
|
|
12
|
+
value: Date | undefined;
|
|
13
|
+
triggerIcon: IconName;
|
|
14
|
+
triggerIconSize: [string | number];
|
|
15
|
+
isRangePicker?: boolean;
|
|
16
|
+
isOpen?: boolean;
|
|
17
|
+
};
|
|
18
|
+
export declare const NoInputDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { NoInputDatePicker } from '@/components/inputs/NoInputDatePicker';
|
|
3
|
+
declare const meta: Meta<typeof NoInputDatePicker>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof NoInputDatePicker>;
|
|
6
|
+
export declare const Single: Story;
|
|
7
|
+
export declare const Range: Story;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledNoInputDatePicker: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { NoInputDatePicker } from './NoInputDatePicker';
|
|
@@ -4,3 +4,5 @@ export { SearchInput } from './SearchInput';
|
|
|
4
4
|
export { TextInput } from './TextInput';
|
|
5
5
|
export { Radio, RadioGroup } from './RadioButtons';
|
|
6
6
|
export { AbstractRadio, AbstractRadioGroup } from './RadioGroup';
|
|
7
|
+
export { DatePicker } from './DatePicker';
|
|
8
|
+
export { NoInputDatePicker } from './NoInputDatePicker';
|
package/lib/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import * as styled_components from 'styled-components';
|
|
|
6
6
|
import { PermafrostComponent, IconName } from '@/types';
|
|
7
7
|
import { AriaButtonProps } from '@react-types/button';
|
|
8
8
|
import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupProps } from '@react-types/radio';
|
|
9
|
+
import { DateRange } from 'react-day-picker';
|
|
9
10
|
import * as styled_components_dist_types from 'styled-components/dist/types';
|
|
10
11
|
|
|
11
12
|
declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
|
|
@@ -98,6 +99,7 @@ declare const indicons: {
|
|
|
98
99
|
bookmarks: react_jsx_runtime.JSX.Element;
|
|
99
100
|
'bookmark-saved': react_jsx_runtime.JSX.Element;
|
|
100
101
|
branch: react_jsx_runtime.JSX.Element;
|
|
102
|
+
calendar: react_jsx_runtime.JSX.Element;
|
|
101
103
|
'check-circle': react_jsx_runtime.JSX.Element;
|
|
102
104
|
'circle-help': react_jsx_runtime.JSX.Element;
|
|
103
105
|
check: react_jsx_runtime.JSX.Element;
|
|
@@ -442,25 +444,25 @@ declare const allColors: {
|
|
|
442
444
|
readonly backgroundColor: "#182432";
|
|
443
445
|
};
|
|
444
446
|
|
|
445
|
-
type Props$
|
|
447
|
+
type Props$q = PermafrostComponent & {
|
|
446
448
|
content: React__default.ReactNode;
|
|
447
449
|
header?: React__default.ReactNode | string;
|
|
448
450
|
open?: boolean;
|
|
449
451
|
};
|
|
450
|
-
declare const Accordion: (props: Props$
|
|
452
|
+
declare const Accordion: (props: Props$q) => react_jsx_runtime.JSX.Element;
|
|
451
453
|
|
|
452
|
-
type Props$
|
|
454
|
+
type Props$p = PermafrostComponent & {
|
|
453
455
|
style?: object;
|
|
454
456
|
children: React__default.ReactNode;
|
|
455
457
|
};
|
|
456
|
-
declare const Section: (props: Props$
|
|
458
|
+
declare const Section: (props: Props$p) => react_jsx_runtime.JSX.Element;
|
|
457
459
|
|
|
458
|
-
type Props$
|
|
460
|
+
type Props$o = PermafrostComponent & {
|
|
459
461
|
title?: string;
|
|
460
462
|
style?: object;
|
|
461
463
|
children: React__default.ReactNode;
|
|
462
464
|
};
|
|
463
|
-
declare const SectionBlock: (props: Props$
|
|
465
|
+
declare const SectionBlock: (props: Props$o) => react_jsx_runtime.JSX.Element;
|
|
464
466
|
|
|
465
467
|
type SectionBodyProps = PermafrostComponent & {
|
|
466
468
|
style?: object;
|
|
@@ -468,12 +470,12 @@ type SectionBodyProps = PermafrostComponent & {
|
|
|
468
470
|
};
|
|
469
471
|
declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
|
|
470
472
|
|
|
471
|
-
type Props$
|
|
473
|
+
type Props$n = PermafrostComponent & {
|
|
472
474
|
style?: object;
|
|
473
475
|
children?: React__default.ReactNode;
|
|
474
476
|
};
|
|
475
477
|
declare const SectionHeader: {
|
|
476
|
-
(props: Props$
|
|
478
|
+
(props: Props$n): react_jsx_runtime.JSX.Element;
|
|
477
479
|
defaultProps: {
|
|
478
480
|
className: string;
|
|
479
481
|
style: {};
|
|
@@ -505,7 +507,7 @@ declare function Button(props: ButtonProps): React__default.ReactElement;
|
|
|
505
507
|
type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
|
|
506
508
|
type ButtonSize = 'normal' | 'large';
|
|
507
509
|
|
|
508
|
-
type Props$
|
|
510
|
+
type Props$m = PermafrostComponent & {
|
|
509
511
|
/**
|
|
510
512
|
* Adjusts vertical alignment of the text label, in relation to the icon
|
|
511
513
|
*/
|
|
@@ -531,9 +533,9 @@ type Props$k = PermafrostComponent & {
|
|
|
531
533
|
*
|
|
532
534
|
* @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
|
|
533
535
|
*/
|
|
534
|
-
declare function IconButton(props: Props$
|
|
536
|
+
declare function IconButton(props: Props$m): react_jsx_runtime.JSX.Element;
|
|
535
537
|
|
|
536
|
-
type Props$
|
|
538
|
+
type Props$l = PermafrostComponent & {
|
|
537
539
|
defaultValue?: string;
|
|
538
540
|
disabled?: boolean;
|
|
539
541
|
horizontal?: boolean;
|
|
@@ -548,7 +550,7 @@ type Props$j = PermafrostComponent & {
|
|
|
548
550
|
value?: string | number;
|
|
549
551
|
validationErrors?: string[];
|
|
550
552
|
};
|
|
551
|
-
declare const BorderSelect: (props: Props$
|
|
553
|
+
declare const BorderSelect: (props: Props$l) => react_jsx_runtime.JSX.Element;
|
|
552
554
|
|
|
553
555
|
type ComboboxProps = {
|
|
554
556
|
'aria-label'?: string;
|
|
@@ -596,7 +598,7 @@ type ComboboxOption = {
|
|
|
596
598
|
type ComboboxSize = 'small' | 'medium';
|
|
597
599
|
type ComboboxVariant = 'default' | 'light';
|
|
598
600
|
|
|
599
|
-
type Props$
|
|
601
|
+
type Props$k = PermafrostComponent & {
|
|
600
602
|
disabled?: boolean;
|
|
601
603
|
initialText?: string;
|
|
602
604
|
options: {
|
|
@@ -610,7 +612,7 @@ type Props$i = PermafrostComponent & {
|
|
|
610
612
|
onChange(e: React__default.ChangeEvent<HTMLSelectElement>): void;
|
|
611
613
|
onClick?(e: React__default.MouseEvent<HTMLDivElement, MouseEvent>): void;
|
|
612
614
|
};
|
|
613
|
-
declare const Select: (props: Props$
|
|
615
|
+
declare const Select: (props: Props$k) => react_jsx_runtime.JSX.Element;
|
|
614
616
|
|
|
615
617
|
/**
|
|
616
618
|
* Multiselect combobox component. If selections are not bound to outside state
|
|
@@ -651,7 +653,7 @@ declare const SingleCombobox: React__default.ForwardRefExoticComponent<Permafros
|
|
|
651
653
|
onChange: (selectedOption: ComboboxOption) => void;
|
|
652
654
|
} & React__default.RefAttributes<unknown>>;
|
|
653
655
|
|
|
654
|
-
type Props$
|
|
656
|
+
type Props$j = PermafrostComponent & {
|
|
655
657
|
ariaLabel?: string;
|
|
656
658
|
fill?: string;
|
|
657
659
|
name: IconName;
|
|
@@ -663,9 +665,9 @@ type Props$h = PermafrostComponent & {
|
|
|
663
665
|
* Generic icon component, hidden from Assistive Technology by default.
|
|
664
666
|
* If icon should be available to AT, pass the desired name into the `ariaLabel` prop.
|
|
665
667
|
*/
|
|
666
|
-
declare function Icon({ style, ...props }: Props$
|
|
668
|
+
declare function Icon({ style, ...props }: Props$j): React__default.ReactElement | null;
|
|
667
669
|
|
|
668
|
-
type Props$
|
|
670
|
+
type Props$i = PermafrostComponent & {
|
|
669
671
|
children: React__default.ReactNode | string;
|
|
670
672
|
minLength?: number;
|
|
671
673
|
onUpdate?(newValue: string): void;
|
|
@@ -674,9 +676,9 @@ type Props$g = PermafrostComponent & {
|
|
|
674
676
|
* Wrapper component which enables text editing in place directly on a child component,
|
|
675
677
|
* element, or plain text.
|
|
676
678
|
*/
|
|
677
|
-
declare function EditableInput(props: Props$
|
|
679
|
+
declare function EditableInput(props: Props$i): react_jsx_runtime.JSX.Element;
|
|
678
680
|
|
|
679
|
-
type Props$
|
|
681
|
+
type Props$h = PermafrostComponent & {
|
|
680
682
|
autoFocus?: boolean;
|
|
681
683
|
decrement?(): void;
|
|
682
684
|
disabled?: boolean;
|
|
@@ -696,9 +698,9 @@ type Props$f = PermafrostComponent & {
|
|
|
696
698
|
* Basic numeric input field. A label is required, but may be visually hidden
|
|
697
699
|
* using the `hiddenLabel` property.
|
|
698
700
|
*/
|
|
699
|
-
declare function NumberInput(props: Props$
|
|
701
|
+
declare function NumberInput(props: Props$h): React__default.ReactElement;
|
|
700
702
|
|
|
701
|
-
type Props$
|
|
703
|
+
type Props$g = PermafrostComponent & {
|
|
702
704
|
border?: boolean;
|
|
703
705
|
showClearInputIcon?: boolean;
|
|
704
706
|
showSearchIcon?: boolean;
|
|
@@ -712,13 +714,13 @@ type Props$e = PermafrostComponent & {
|
|
|
712
714
|
value?: string;
|
|
713
715
|
};
|
|
714
716
|
declare const SearchInput: {
|
|
715
|
-
(props: Props$
|
|
717
|
+
(props: Props$g): react_jsx_runtime.JSX.Element;
|
|
716
718
|
defaultProps: {
|
|
717
719
|
className: string;
|
|
718
720
|
};
|
|
719
721
|
};
|
|
720
722
|
|
|
721
|
-
type Props$
|
|
723
|
+
type Props$f = PermafrostComponent & {
|
|
722
724
|
autoComplete?: 'email' | 'current-password' | 'new-password' | string;
|
|
723
725
|
autoFocus?: boolean;
|
|
724
726
|
defaultValue?: string;
|
|
@@ -739,9 +741,9 @@ type Props$d = PermafrostComponent & {
|
|
|
739
741
|
value?: string;
|
|
740
742
|
readOnly?: boolean;
|
|
741
743
|
};
|
|
742
|
-
declare function TextInput(props: Props$
|
|
744
|
+
declare function TextInput(props: Props$f): React__default.ReactElement;
|
|
743
745
|
|
|
744
|
-
type Props$
|
|
746
|
+
type Props$e = {
|
|
745
747
|
['aria-label']: string;
|
|
746
748
|
children?: React__default.ReactNode;
|
|
747
749
|
hideFocusRing: boolean;
|
|
@@ -757,7 +759,7 @@ type Props$c = {
|
|
|
757
759
|
* A group label must be included: either pass a string or markup into the
|
|
758
760
|
* `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
|
|
759
761
|
*/
|
|
760
|
-
declare function RadioGroup$1({ children, ...props }: Props$
|
|
762
|
+
declare function RadioGroup$1({ children, ...props }: Props$e): react_jsx_runtime.JSX.Element;
|
|
761
763
|
/**
|
|
762
764
|
* A single radio button and its label.
|
|
763
765
|
*/
|
|
@@ -786,6 +788,37 @@ declare function Radio(props: AriaRadioProps & {
|
|
|
786
788
|
isVisuallySelected?: (selectedValue: string) => void;
|
|
787
789
|
}): react_jsx_runtime.JSX.Element;
|
|
788
790
|
|
|
791
|
+
type Props$d = PermafrostComponent & {
|
|
792
|
+
ariaLabel?: string;
|
|
793
|
+
disableBeforeDate?: Date;
|
|
794
|
+
disableAfterDate?: Date;
|
|
795
|
+
disabled?: boolean;
|
|
796
|
+
id: string;
|
|
797
|
+
label?: string;
|
|
798
|
+
onChange: (value: Date | undefined) => void;
|
|
799
|
+
placeholder?: string;
|
|
800
|
+
selected?: Date | undefined;
|
|
801
|
+
value: Date | undefined;
|
|
802
|
+
};
|
|
803
|
+
declare const DatePicker: (props: Props$d) => react_jsx_runtime.JSX.Element;
|
|
804
|
+
|
|
805
|
+
type Props$c = PermafrostComponent & {
|
|
806
|
+
ariaLabel?: string;
|
|
807
|
+
disableBeforeDate?: Date;
|
|
808
|
+
disableAfterDate?: Date;
|
|
809
|
+
disabled?: boolean;
|
|
810
|
+
id: string;
|
|
811
|
+
label?: string;
|
|
812
|
+
onChange: (value: Date | DateRange | undefined) => void;
|
|
813
|
+
selected?: Date | undefined;
|
|
814
|
+
value: Date | undefined;
|
|
815
|
+
triggerIcon: IconName;
|
|
816
|
+
triggerIconSize: [string | number];
|
|
817
|
+
isRangePicker?: boolean;
|
|
818
|
+
isOpen?: boolean;
|
|
819
|
+
};
|
|
820
|
+
declare const NoInputDatePicker: (props: Props$c) => react_jsx_runtime.JSX.Element;
|
|
821
|
+
|
|
789
822
|
type Props$b = PermafrostComponent & {
|
|
790
823
|
ariaLabel?: string;
|
|
791
824
|
size?: string;
|
|
@@ -1074,8 +1107,8 @@ declare const Drawer: (props: Props) => react_jsx_runtime.JSX.Element;
|
|
|
1074
1107
|
interface TextTruncateProps {
|
|
1075
1108
|
string: string;
|
|
1076
1109
|
maxChars: number;
|
|
1077
|
-
children
|
|
1110
|
+
children?: any;
|
|
1078
1111
|
}
|
|
1079
1112
|
declare function TextTruncate({ string, maxChars, children }: TextTruncateProps): react_jsx_runtime.JSX.Element;
|
|
1080
1113
|
|
|
1081
|
-
export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
|
|
1114
|
+
export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
|