@traefik-labs/faency 12.0.8 → 12.0.10
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/dist/components/DateTimePickerInput/DateTimePickerInput.cjs +11 -8
- package/dist/components/DateTimePickerInput/DateTimePickerInput.cjs.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.js +13 -10
- package/dist/components/DateTimePickerInput/DateTimePickerInput.js.map +1 -1
- package/package.json +34 -8
|
@@ -78,18 +78,21 @@ const DateTimePickerInput = React.forwardRef(
|
|
|
78
78
|
const [inputValue, setInputValue] = React.useState("");
|
|
79
79
|
const [selectedDates, onDatesChange] = React.useState([]);
|
|
80
80
|
const [isPickerOpen, setIsPickerOpen] = React.useState(false);
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
onOpenChange: setIsPickerOpen,
|
|
84
|
-
placement: pickerPlacement,
|
|
85
|
-
middleware: [
|
|
81
|
+
const middleware = React.useMemo(
|
|
82
|
+
() => [
|
|
86
83
|
react.offset(10),
|
|
87
84
|
react.flip(),
|
|
88
85
|
react.shift(),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
})
|
|
86
|
+
// arrowRef is passed to floating-ui which handles it correctly
|
|
87
|
+
react.arrow({ element: arrowRef })
|
|
92
88
|
],
|
|
89
|
+
[]
|
|
90
|
+
);
|
|
91
|
+
const { refs, floatingStyles, context } = react.useFloating({
|
|
92
|
+
open: isPickerOpen,
|
|
93
|
+
onOpenChange: setIsPickerOpen,
|
|
94
|
+
placement: pickerPlacement,
|
|
95
|
+
middleware,
|
|
93
96
|
whileElementsMounted: react.autoUpdate
|
|
94
97
|
});
|
|
95
98
|
const click = react.useClick(context);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePickerInput.cjs","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const
|
|
1
|
+
{"version":3,"file":"DateTimePickerInput.cjs","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const middleware = useMemo(\n () => [\n offset(10),\n flip(),\n shift(),\n // arrowRef is passed to floating-ui which handles it correctly\n arrow({ element: arrowRef }),\n ],\n [],\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open: isPickerOpen,\n onOpenChange: setIsPickerOpen,\n placement: pickerPlacement,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n return (\n <StyledWrapper ref={fowardedRef}>\n <Input\n startAdornment={<CalendarIcon />}\n {...getReferenceProps()}\n {...inputProps}\n css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n onChange={(evt) => {\n const value = evt.currentTarget.value;\n setInputValue(value);\n try {\n const newDates = (value as string)\n .split(',')\n .map((d) => parse(d.trim(), formatStr, new Date()));\n onDatesChange(newDates);\n if (onChange) onChange(newDates);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (err) {\n // empty\n }\n }}\n ref={refs.setReference as Ref<InputHandle>}\n type=\"datetime-local\"\n value={inputValue}\n />\n <div\n className=\"firefox-patch\"\n onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n />\n {isPickerOpen && (\n <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n {/* refs.setFloating is a stable callback ref from floating-ui */}\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <Card>\n <DateTimePicker\n {...pickerProps}\n css={pickerCSS}\n onDatesChange={(d) => {\n onDatesChange(d);\n setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n if (onChange) onChange(d);\n }}\n onFastTravelClick={() => setIsPickerOpen(false)}\n onTimeButtonClick={() => setIsPickerOpen(false)}\n selectedDates={selectedDates}\n showDatePresets={showDatePresets}\n showTimePicker={showTimePicker}\n />\n </Card>\n <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n </div>\n </FloatingFocusManager>\n )}\n </StyledWrapper>\n );\n },\n);\n"],"names":["styled","useRef","useState","useMemo","offset","flip","shift","arrow","useFloating","autoUpdate","useClick","useDismiss","useRole","useInteractions","jsxs","jsx","Input","CalendarIcon","parse","FloatingFocusManager","Card","DateTimePicker","format","FloatingArrow"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { offset, flip, shift, arrow, useFloating, autoUpdate, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingArrow } from "@floating-ui/react";
|
|
3
3
|
import { CalendarIcon } from "@radix-ui/react-icons";
|
|
4
4
|
import { parse, format } from "date-fns";
|
|
5
|
-
import React, { useRef, useState } from "react";
|
|
5
|
+
import React, { useRef, useState, useMemo } from "react";
|
|
6
6
|
import { styled } from "../../stitches.config.js";
|
|
7
7
|
import { Input } from "../Input/Input.js";
|
|
8
8
|
import { DateTimePicker } from "../DateTimePicker/DateTimePicker.js";
|
|
@@ -76,18 +76,21 @@ const DateTimePickerInput = React.forwardRef(
|
|
|
76
76
|
const [inputValue, setInputValue] = useState("");
|
|
77
77
|
const [selectedDates, onDatesChange] = useState([]);
|
|
78
78
|
const [isPickerOpen, setIsPickerOpen] = useState(false);
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
onOpenChange: setIsPickerOpen,
|
|
82
|
-
placement: pickerPlacement,
|
|
83
|
-
middleware: [
|
|
79
|
+
const middleware = useMemo(
|
|
80
|
+
() => [
|
|
84
81
|
offset(10),
|
|
85
82
|
flip(),
|
|
86
83
|
shift(),
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
})
|
|
84
|
+
// arrowRef is passed to floating-ui which handles it correctly
|
|
85
|
+
arrow({ element: arrowRef })
|
|
90
86
|
],
|
|
87
|
+
[]
|
|
88
|
+
);
|
|
89
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
90
|
+
open: isPickerOpen,
|
|
91
|
+
onOpenChange: setIsPickerOpen,
|
|
92
|
+
placement: pickerPlacement,
|
|
93
|
+
middleware,
|
|
91
94
|
whileElementsMounted: autoUpdate
|
|
92
95
|
});
|
|
93
96
|
const click = useClick(context);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePickerInput.js","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const
|
|
1
|
+
{"version":3,"file":"DateTimePickerInput.js","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const middleware = useMemo(\n () => [\n offset(10),\n flip(),\n shift(),\n // arrowRef is passed to floating-ui which handles it correctly\n arrow({ element: arrowRef }),\n ],\n [],\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open: isPickerOpen,\n onOpenChange: setIsPickerOpen,\n placement: pickerPlacement,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n return (\n <StyledWrapper ref={fowardedRef}>\n <Input\n startAdornment={<CalendarIcon />}\n {...getReferenceProps()}\n {...inputProps}\n css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n onChange={(evt) => {\n const value = evt.currentTarget.value;\n setInputValue(value);\n try {\n const newDates = (value as string)\n .split(',')\n .map((d) => parse(d.trim(), formatStr, new Date()));\n onDatesChange(newDates);\n if (onChange) onChange(newDates);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (err) {\n // empty\n }\n }}\n ref={refs.setReference as Ref<InputHandle>}\n type=\"datetime-local\"\n value={inputValue}\n />\n <div\n className=\"firefox-patch\"\n onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n />\n {isPickerOpen && (\n <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n {/* refs.setFloating is a stable callback ref from floating-ui */}\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <Card>\n <DateTimePicker\n {...pickerProps}\n css={pickerCSS}\n onDatesChange={(d) => {\n onDatesChange(d);\n setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n if (onChange) onChange(d);\n }}\n onFastTravelClick={() => setIsPickerOpen(false)}\n onTimeButtonClick={() => setIsPickerOpen(false)}\n selectedDates={selectedDates}\n showDatePresets={showDatePresets}\n showTimePicker={showTimePicker}\n />\n </Card>\n <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n </div>\n </FloatingFocusManager>\n )}\n </StyledWrapper>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@traefik-labs/faency",
|
|
3
3
|
"description": "Traefik Labs design system",
|
|
4
|
-
"version": "12.0.
|
|
4
|
+
"version": "12.0.10",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"traefiklabs",
|
|
@@ -90,10 +90,10 @@
|
|
|
90
90
|
"@semantic-release/npm": "^9.0.0",
|
|
91
91
|
"@semantic-release/release-notes-generator": "^10.0.3",
|
|
92
92
|
"@stitches/react": "1.2.8",
|
|
93
|
-
"@storybook/addon-docs": "10.
|
|
94
|
-
"@storybook/addon-links": "10.
|
|
95
|
-
"@storybook/builder-vite": "10.
|
|
96
|
-
"@storybook/react-vite": "10.
|
|
93
|
+
"@storybook/addon-docs": "10.2.10",
|
|
94
|
+
"@storybook/addon-links": "10.2.10",
|
|
95
|
+
"@storybook/builder-vite": "10.2.10",
|
|
96
|
+
"@storybook/react-vite": "10.2.10",
|
|
97
97
|
"@types/jest": "^27.4.1",
|
|
98
98
|
"@types/jest-axe": "^3.5.3",
|
|
99
99
|
"@types/lodash.merge": "^4.6.6",
|
|
@@ -106,7 +106,6 @@
|
|
|
106
106
|
"@vanilla-extract/recipes": "^0.5.7",
|
|
107
107
|
"@vanilla-extract/vite-plugin": "^5.1.1",
|
|
108
108
|
"@vitejs/plugin-react": "^5.1.1",
|
|
109
|
-
"@vueless/storybook-dark-mode": "^10.0.3",
|
|
110
109
|
"babel-loader": "^8.2.2",
|
|
111
110
|
"conventional-changelog-conventionalcommits": "^4.6.3",
|
|
112
111
|
"cross-env": "^7.0.3",
|
|
@@ -120,7 +119,7 @@
|
|
|
120
119
|
"react": "18.2.0",
|
|
121
120
|
"react-dom": "18.2.0",
|
|
122
121
|
"semantic-release": "^19.0.2",
|
|
123
|
-
"storybook": "10.
|
|
122
|
+
"storybook": "10.2.10",
|
|
124
123
|
"tinycolor2": "^1.4.2",
|
|
125
124
|
"typescript": "^5.8.3",
|
|
126
125
|
"use-debounce": "9.0.2",
|
|
@@ -130,8 +129,13 @@
|
|
|
130
129
|
"devDependencies": {
|
|
131
130
|
"@eslint/compat": "^1.3.1",
|
|
132
131
|
"@eslint/js": "^9.32.0",
|
|
132
|
+
"@storybook/addon-docs": "10.0.8",
|
|
133
|
+
"@storybook/addon-links": "10.0.8",
|
|
134
|
+
"@storybook/builder-vite": "10.0.8",
|
|
135
|
+
"@storybook/react-vite": "10.0.8",
|
|
133
136
|
"@testing-library/jest-dom": "^5.16.5",
|
|
134
137
|
"@testing-library/react": "^13.4.0",
|
|
138
|
+
"@vueless/storybook-dark-mode": "^10.0.3",
|
|
135
139
|
"babel-jest": "^27.5.1",
|
|
136
140
|
"eslint": "^9.32.0",
|
|
137
141
|
"eslint-config-prettier": "^10.1.8",
|
|
@@ -140,13 +144,35 @@
|
|
|
140
144
|
"eslint-plugin-react": "^7.37.5",
|
|
141
145
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
142
146
|
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
143
|
-
"eslint-plugin-storybook": "10.
|
|
147
|
+
"eslint-plugin-storybook": "10.2.10",
|
|
144
148
|
"globals": "^15.8.0",
|
|
145
149
|
"jest": "^27.5.1",
|
|
146
150
|
"jest-axe": "^6.0.0",
|
|
151
|
+
"storybook": "10.0.8",
|
|
147
152
|
"typescript-eslint": "^8.38.0",
|
|
148
153
|
"webpack": "^5.94.0"
|
|
149
154
|
},
|
|
155
|
+
"resolutions": {
|
|
156
|
+
"@typescript-eslint/project-service@^8.56.0": "8.56.0",
|
|
157
|
+
"@typescript-eslint/scope-manager@^8.56.0": "8.56.0",
|
|
158
|
+
"@typescript-eslint/tsconfig-utils@^8.56.0": "8.56.0",
|
|
159
|
+
"@typescript-eslint/types@^8.56.0": "8.56.0",
|
|
160
|
+
"@typescript-eslint/typescript-estree@^8.56.0": "8.56.0",
|
|
161
|
+
"@typescript-eslint/utils@^8.56.0": "8.56.0",
|
|
162
|
+
"@typescript-eslint/visitor-keys@^8.56.0": "8.56.0",
|
|
163
|
+
"balanced-match@^4.0.2": "4.0.3",
|
|
164
|
+
"brace-expansion@^5.0.2": "5.0.2",
|
|
165
|
+
"glob@^13.0.1": "13.0.5",
|
|
166
|
+
"minimatch@^3.0.4": "3.1.2",
|
|
167
|
+
"minimatch@^3.1.1": "3.1.2",
|
|
168
|
+
"minimatch@^5.0.1": "5.1.2",
|
|
169
|
+
"minimatch@^5.1.0": "5.1.2",
|
|
170
|
+
"minimatch@^9.0.0": "9.0.5",
|
|
171
|
+
"minimatch@^9.0.5": "9.0.5",
|
|
172
|
+
"minimatch@^10.2.1": "10.2.1",
|
|
173
|
+
"minimatch@^10.2.2": "10.2.1",
|
|
174
|
+
"path-scurry@^2.0.0": "2.0.1"
|
|
175
|
+
},
|
|
150
176
|
"publishConfig": {
|
|
151
177
|
"access": "public",
|
|
152
178
|
"registry": "https://registry.npmjs.org"
|