diff --git a/.storybook/main.js b/.storybook/main.mjs similarity index 87% rename from .storybook/main.js rename to .storybook/main.mjs index da288c6d..f31247ab 100644 --- a/.storybook/main.js +++ b/.storybook/main.mjs @@ -23,13 +23,21 @@ module.exports = { }, }, ], + core: { + builder: '@storybook/builder-vite', + }, loader: { '.js': 'jsx' }, async viteFinal(config, { configType }) { if (configType === 'DEVELOPMENT') { config.optimizeDeps.include = [...config?.optimizeDeps?.include, 'jest-mock'] } - config.plugins.push(linaria(), svgrPlugin({ icon: true })) + config.plugins.push( + linaria(), + svgrPlugin({ + icon: true, + }), + ) config.define = { ...config.define, diff --git a/package.json b/package.json index 30a52444..7ddea560 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "@storybook/addon-storysource": "^7.6.17", "@storybook/addons": "^7.6.17", "@storybook/blocks": "^7.6.17", + "@storybook/builder-vite": "^7.6.17", "@storybook/cli": "^7.6.17", "@storybook/csf": "^0.1.2", "@storybook/react": "^7.6.17", @@ -102,7 +103,7 @@ "dashify": "2.0.0", "eslint": "8.54.0", "eslint-config-prettier": "^8.10.0", - "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-storybook": "^0.6.15", @@ -113,7 +114,7 @@ "node-polyfill-webpack-plugin": "^1.1.4", "postcss": "^8.4.31", "postcss-flexbugs-fixes": "^5.0.2", - "prettier": "^3.2.5", + "prettier": "2.2.1", "react": "^18.0.2", "react-docgen-typescript-loader": "^3.7.2", "react-dom": "^18.0.2", @@ -128,7 +129,7 @@ "tslib": "^2.6.2", "typescript": "4.9.5", "url-loader": "^4.1.1", - "vite": "^5.0.12", + "vite": "^5.1.4", "vite-plugin-svgr": "^4.2.0" }, "peerDependencies": { diff --git a/src/components/accordion/__tests__/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__tests__/__snapshots__/accordion.test.tsx.snap index 2832c856..6f4f25ee 100644 --- a/src/components/accordion/__tests__/__snapshots__/accordion.test.tsx.snap +++ b/src/components/accordion/__tests__/__snapshots__/accordion.test.tsx.snap @@ -16,6 +16,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -26,6 +27,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -34,6 +36,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` @@ -55,6 +58,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -65,6 +69,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -73,6 +78,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` @@ -97,6 +103,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -107,6 +114,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -115,6 +123,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` @@ -136,6 +145,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -146,6 +156,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -154,6 +165,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = ` @@ -225,7 +237,10 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` "baseElement":
- + Accordion Item 1 @@ -235,6 +250,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -245,6 +261,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -255,6 +272,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 1.25rem;" > - + Accordion Item 2 @@ -279,6 +304,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -289,6 +315,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -299,6 +326,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 1.25rem;" > @@ -318,7 +350,10 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` , "container":
- + Accordion Item 1 @@ -328,6 +363,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -338,6 +374,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -348,6 +385,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 1.25rem;" > - + Accordion Item 2 @@ -372,6 +417,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -382,6 +428,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. margin-right: 0.25rem; " + role="img" > @@ -392,6 +439,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = ` classname="mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 1.25rem;" > diff --git a/src/components/accordion/accordion.mdx b/src/components/accordion/accordion.mdx index 58806580..8f4c9848 100644 --- a/src/components/accordion/accordion.mdx +++ b/src/components/accordion/accordion.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/blocks' +import { Meta, Story, Canvas, Source, Controls } from '@storybook/blocks' import { Accordion } from './index' import { RenderHtmlMarkup } from '../../storybook/render-html-markup' import * as AccordionStories from './accordion.stories' @@ -13,28 +13,24 @@ To open the accordion for vanilla usage, you will need to both toggle the `elIsA ## Basic Usage - - - + - + ## React Usage -The React shorthand version of the Accordion handles the toggling of active classes for you. The props accepted by the `AccordionItem` are below along with the `AccordionItemProps` interface. + - +The React shorthand version of the Accordion handles the toggling of active classes for you. The props accepted by the `AccordionItem` are below along with the `AccordionItemProps` interface. -```ts + - - - + - + diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx index e038afc5..3ac07a4f 100644 --- a/src/components/accordion/accordion.stories.tsx +++ b/src/components/accordion/accordion.stories.tsx @@ -10,16 +10,19 @@ import { import { Icon } from '../icon' import { elMr1 } from '../../styles/spacing' import { elIsActive } from '../../styles/states' +import { Meta, StoryObj } from '@storybook/react' -export default { +const meta: Meta = { title: 'Accordion', component: Accordion, } +export default meta + export const BasicUsage = { render: ({}) => ( - + Accordion Item 1 @@ -33,8 +36,16 @@ export const BasicUsage = { - Accordion Content 1 - + + Accordion Content 1 + + Accordion Item 2 @@ -48,8 +59,10 @@ export const BasicUsage = { - Accordion Content 2 - + + Accordion Item 3 @@ -63,54 +76,54 @@ export const BasicUsage = { - Accordion Content 3 + ), } -export const ReactUsage = { - render: ({}) => ( - = { + args: { + items: [ + { + title: 'Accordion Item 1', + content: 'Accordion Content 1', - titleItems: [ - <> - 2 - , - <> - 5 - , - ], - }, - { - title: 'Accordion Item 2', - content: 'Accordion Content 2', + titleItems: [ + <> + 2 + , + <> + 5 + , + ], + }, + { + title: 'Accordion Item 2', + content: 'Accordion Content 2', - titleItems: [ - <> - 2 - , - <> - 5 - , - ], - }, - { - title: 'Accordion Item 3', - content: 'Accordion Content 3', - titleItems: [ - <> - 2 - , - <> - 5 - , - ], - }, - ]} - /> - ), + titleItems: [ + <> + 2 + , + <> + 5 + , + ], + }, + { + title: 'Accordion Item 3', + content: 'Accordion Content 3', + titleItems: [ + <> + 2 + , + <> + 5 + , + ], + }, + ], + }, } diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index d7739099..962e6bdd 100644 --- a/src/components/accordion/accordion.tsx +++ b/src/components/accordion/accordion.tsx @@ -1,4 +1,4 @@ -import React, { Dispatch, FC, Fragment, HTMLAttributes, ReactNode, SetStateAction, useState } from 'react' +import React, { Dispatch, FC, Fragment, HTMLAttributes, ReactNode, SetStateAction, useState, useId } from 'react' import { cx } from '@linaria/core' import { ElAccordionContainer, @@ -60,11 +60,17 @@ export const handleSetOpenItem = (openItem: number, setOpenItem: Dispatch = ({ items, className, ...rest }) => { const [openItem, setOpenItem] = useState(null) + const itemContentId = useId() + const itemButtonId = useId() return ( {items.map((item, index) => ( - + {item.title} {item.titleItems && @@ -76,7 +82,15 @@ export const Accordion: FC = ({ items, className, ...rest }) => - {item.content} + + {item.content} + ))} diff --git a/src/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap index d19943b7..b58c914a 100644 --- a/src/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap +++ b/src/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap @@ -7,6 +7,7 @@ exports[`Avatar component should match a snapshot 1`] = `
Some Content @@ -15,6 +16,7 @@ exports[`Avatar component should match a snapshot 1`] = ` "container":
Some Content @@ -80,6 +82,7 @@ exports[`Avatar component should match a snapshot for an image src 1`] = `
https://picsum.photos/200 https://picsum.photos/200 + ## Basic Usage - - - + - + ## With Src - - - + - + ## With Image - - - + - + diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index 1ff6d42d..2185b8e7 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -9,11 +9,11 @@ export interface AvatarProps extends HTMLAttributes { export const Avatar: FC = ({ children, src, type, className, ...rest }) => { return type === 'image' ? ( - + {src ? {src} : children} ) : ( - + {src ? : children} ) diff --git a/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap b/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap index b4a213ae..5f022ff6 100644 --- a/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap +++ b/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap @@ -7,6 +7,7 @@ exports[`Badge component should match a snapshot 1`] = `
50% @@ -15,6 +16,7 @@ exports[`Badge component should match a snapshot 1`] = ` "container":
50% @@ -80,6 +82,7 @@ exports[`Badge component should match a snapshot for intent 1`] = `
Some Content @@ -88,6 +91,7 @@ exports[`Badge component should match a snapshot for intent 1`] = ` "container":
Some Content @@ -153,6 +157,7 @@ exports[`Badge component should match a snapshot for intent 2`] = `
Some Content @@ -161,6 +166,7 @@ exports[`Badge component should match a snapshot for intent 2`] = ` "container":
Some Content @@ -226,6 +232,7 @@ exports[`Badge component should match a snapshot for intent 3`] = `
Some Content @@ -234,6 +241,7 @@ exports[`Badge component should match a snapshot for intent 3`] = ` "container":
Some Content @@ -299,6 +307,7 @@ exports[`Badge component should match a snapshot for intent 4`] = `
Some Content @@ -307,6 +316,7 @@ exports[`Badge component should match a snapshot for intent 4`] = ` "container":
Some Content @@ -372,6 +382,7 @@ exports[`Badge component should match a snapshot for intent 5`] = `
Some Content @@ -380,6 +391,7 @@ exports[`Badge component should match a snapshot for intent 5`] = ` "container":
Some Content @@ -445,6 +457,7 @@ exports[`Badge component should match a snapshot for intent 6`] = `
Some Content @@ -453,6 +466,7 @@ exports[`Badge component should match a snapshot for intent 6`] = ` "container":
Some Content @@ -518,6 +532,7 @@ exports[`Badge component should match a snapshot for intent 7`] = `
Some Content @@ -526,6 +541,7 @@ exports[`Badge component should match a snapshot for intent 7`] = ` "container":
Some Content @@ -595,11 +611,13 @@ exports[`BadgeGroup component should match a snapshot 1`] = ` Some Content Some Content @@ -614,11 +632,13 @@ exports[`BadgeGroup component should match a snapshot 1`] = ` Some Content Some Content diff --git a/src/components/badge/badge.mdx b/src/components/badge/badge.mdx index daade484..4520ab4f 100644 --- a/src/components/badge/badge.mdx +++ b/src/components/badge/badge.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/blocks' +import { Meta, Story, Canvas, Controls } from '@storybook/blocks' import { Badge } from '.' import { RenderHtmlMarkup } from '../../storybook/render-html-markup' import * as BadgeStories from './badge.stories' @@ -9,20 +9,16 @@ import * as BadgeStories from './badge.stories' A simple low impact visual indicator label. The component simply renders children and does not have any additional props. - + ## Basic Usage - - - + - + ## With Intent - - - + - + diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index 9ea7c558..0cd9cce0 100644 --- a/src/components/badge/badge.tsx +++ b/src/components/badge/badge.tsx @@ -8,7 +8,7 @@ export interface BadgeProps extends HTMLAttributes { } export const Badge: FC = ({ children, intent, className, ...rest }) => ( - + {children} ) diff --git a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap index 581803ff..aa9094b8 100644 --- a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap +++ b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap @@ -5,13 +5,17 @@ exports[`BreadCrumb should match a snapshot 1`] = ` "asFragment": [Function], "baseElement":
- + - + Home @@ -26,13 +30,16 @@ exports[`BreadCrumb should match a snapshot 1`] = ` mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 12px;" > - + Level 1 @@ -47,13 +54,16 @@ exports[`BreadCrumb should match a snapshot 1`] = ` mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 12px;" > - + Level 2 @@ -68,13 +78,16 @@ exports[`BreadCrumb should match a snapshot 1`] = ` mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 12px;" > - + Level 3 @@ -82,13 +95,17 @@ exports[`BreadCrumb should match a snapshot 1`] = `
, "container":
- + - + Home @@ -103,13 +120,16 @@ exports[`BreadCrumb should match a snapshot 1`] = ` mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 12px;" > - + Level 1 @@ -124,13 +144,16 @@ exports[`BreadCrumb should match a snapshot 1`] = ` mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 12px;" > - + Level 2 @@ -145,13 +168,16 @@ exports[`BreadCrumb should match a snapshot 1`] = ` mock-css. mock-css. font-size: 1.5rem; " + role="img" style="font-size: 12px;" > - + Level 3 diff --git a/src/components/breadcrumb/breadcrumb.mdx b/src/components/breadcrumb/breadcrumb.mdx index 3ea6932e..e15f670a 100644 --- a/src/components/breadcrumb/breadcrumb.mdx +++ b/src/components/breadcrumb/breadcrumb.mdx @@ -1,4 +1,4 @@ -import { Story, Canvas, ArgsTable, Meta } from '@storybook/blocks' +import { Story, Canvas, Controls, Meta } from '@storybook/blocks' import { BreadCrumb } from './index' import { RenderHtmlMarkup } from '../../storybook/render-html-markup' import * as BreadcrumbStories from './breadcrumb.stories' @@ -9,7 +9,7 @@ import * as BreadcrumbStories from './breadcrumb.stories' ## Basic Usage - + Breadcrumbs are used to indicate to the user their flow in the application and provide a navigation back step to previous pages. @@ -17,7 +17,7 @@ Breadcrumbs are used to indicate to the user their flow in the application and p - + ## Default Index @@ -27,4 +27,4 @@ By setting the `defaultActiveIndex` prop, you can open the Bread crumb at the co - + diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx index 72e16492..134e89ec 100644 --- a/src/components/breadcrumb/breadcrumb.tsx +++ b/src/components/breadcrumb/breadcrumb.tsx @@ -14,26 +14,31 @@ export interface BreadCrumbProps extends HTMLAttributes { defaultActiveIndex?: number } -export const handleNext = - (setActive: Dispatch>, onClick: () => void, index: number) => - (e: MouseEvent) => { - e.preventDefault() - setActive(index) - onClick() - } +export const handleNext = (setActive: Dispatch>, onClick: () => void, index: number) => ( + e: MouseEvent, +) => { + e.preventDefault() + setActive(index) + onClick() +} export const BreadCrumb: FC = ({ items, defaultActiveIndex = 0, ...rest }) => { const [active, setActive] = useState(defaultActiveIndex) return ( - + {items.map(({ onClick, text }, index) => { if (index > active) return null return ( {Boolean(index) && } - {text} + + {text} + ) })} diff --git a/src/components/button/__tests__/__snapshots__/button.test.tsx.snap b/src/components/button/__tests__/__snapshots__/button.test.tsx.snap index f13b28ba..e753e682 100644 --- a/src/components/button/__tests__/__snapshots__/button.test.tsx.snap +++ b/src/components/button/__tests__/__snapshots__/button.test.tsx.snap @@ -92,6 +92,7 @@ exports[`Button should match a snapshot 2`] = ` @@ -107,6 +108,7 @@ exports[`Button should match a snapshot 2`] = ` @@ -181,6 +183,7 @@ exports[`Button should match a snapshot with all modifiers 1`] = ` classname="mock-css. margin-right: 0.25rem; mock-css." + role="img" style="font-size: 1rem;" > + Styled button component with multiple flavours depending on use case. Props available for the React version of the component; - - ## Default Usage A button with no addtional props / classes applied. - - - + - + ## With Intent @@ -29,51 +27,41 @@ Different intents are supported, to enable buttons to be used in different conte Whereas most components support the full range of intents, `Buttons` only support `primary`, `danger` and `default`, the latter being the default. - - - + - + ## Is Loading Add a loading spinner to indicate progress of a background activity after the button was clicked. - - - + - + ## Is Disabled Indicate that a button is disabled for whatever reason. - - - + - + ## Other attributes All other standard HTML attributes for `https://via.placeholder.com/72x72.svg @@ -99,6 +105,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = classname="mock-css. font-size: 1.5rem; " + role="img" > @@ -106,6 +113,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -113,6 +121,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -130,6 +139,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -147,6 +157,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -173,6 +184,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = classname="mock-css. font-size: 1.5rem; " + role="img" > @@ -185,6 +197,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = classname="mock-css. font-size: 1.5rem; " + role="img" > @@ -192,6 +205,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -199,6 +213,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -208,6 +223,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = https://via.placeholder.com/72x72.svg @@ -258,6 +275,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = classname="mock-css. font-size: 1.5rem; " + role="img" > @@ -265,6 +283,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -272,6 +291,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -289,6 +309,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -306,6 +327,7 @@ exports[`Card should match a snapshot and render children with full props 1`] = @@ -455,6 +477,7 @@ exports[`CardContextMenu should match a snapshot and render children with full p classname="mock-css. font-size: 1.5rem; " + role="img" > @@ -467,6 +490,7 @@ exports[`CardContextMenu should match a snapshot and render children with full p classname="mock-css. font-size: 1.5rem; " + role="img" > @@ -474,6 +498,7 @@ exports[`CardContextMenu should match a snapshot and render children with full p @@ -481,6 +506,7 @@ exports[`CardContextMenu should match a snapshot and render children with full p @@ -496,6 +522,7 @@ exports[`CardContextMenu should match a snapshot and render children with full p classname="mock-css. font-size: 1.5rem; " + role="img" > @@ -508,6 +535,7 @@ exports[`CardContextMenu should match a snapshot and render children with full p classname="mock-css. font-size: 1.5rem; " + role="img" > @@ -515,6 +543,7 @@ exports[`CardContextMenu should match a snapshot and render children with full p @@ -522,6 +551,7 @@ exports[`CardContextMenu should match a snapshot and render children with full p diff --git a/src/components/card/__tests__/card-components.test.tsx b/src/components/card/__tests__/card-components.test.tsx index 1a7096d5..3d931b2f 100644 --- a/src/components/card/__tests__/card-components.test.tsx +++ b/src/components/card/__tests__/card-components.test.tsx @@ -96,7 +96,7 @@ describe('handleToggleContextMenu', () => { stopPropagation: jest.fn(), } - curried(event as unknown as MouseEvent) + curried((event as unknown) as MouseEvent) expect(mockSetValue).toHaveBeenCalledTimes(1) expect(mockSetValue).toHaveBeenCalledWith(true) @@ -113,7 +113,7 @@ describe('handleToggleMainMobileOpen', () => { stopPropagation: jest.fn(), } - curried(event as unknown as MouseEvent) + curried((event as unknown) as MouseEvent) expect(mockSetValue).toHaveBeenCalledTimes(1) expect(mockSetValue).toHaveBeenCalledWith(true) @@ -130,7 +130,7 @@ describe('handleToggleListMobileOpen', () => { stopPropagation: jest.fn(), } - curried(event as unknown as MouseEvent) + curried((event as unknown) as MouseEvent) expect(mockSetValue).toHaveBeenCalledTimes(1) expect(mockSetValue).toHaveBeenCalledWith(true) @@ -149,7 +149,7 @@ describe('handleToggleBothMobileOpen', () => { stopPropagation: jest.fn(), } - curried(event as unknown as MouseEvent) + curried((event as unknown) as MouseEvent) expect(mockSetValue).toHaveBeenCalledTimes(1) expect(mockSetValue).toHaveBeenCalledWith(true) diff --git a/src/components/card/card-components.tsx b/src/components/card/card-components.tsx index 06d12c36..35f673f4 100644 --- a/src/components/card/card-components.tsx +++ b/src/components/card/card-components.tsx @@ -70,44 +70,50 @@ export interface CardProps extends HTMLAttributes { isSelected?: boolean // Does the card have the blue selected border } -export const handleToggleContextMenu = - (contextMenuOpen: boolean, setContextMenuOpen: Dispatch>) => (event: MouseEvent) => { - event.stopPropagation() - setContextMenuOpen(!contextMenuOpen) - } +export const handleToggleContextMenu = ( + contextMenuOpen: boolean, + setContextMenuOpen: Dispatch>, +) => (event: MouseEvent) => { + event.stopPropagation() + setContextMenuOpen(!contextMenuOpen) +} -export const handleToggleMainMobileOpen = - (mainMobileOpen: boolean, setMainMobileOpen: Dispatch>) => (event: MouseEvent) => { - event.stopPropagation() - deprecateFunction('handleToggleMainMobileOpen') - setMainMobileOpen(!mainMobileOpen) - } +export const handleToggleMainMobileOpen = ( + mainMobileOpen: boolean, + setMainMobileOpen: Dispatch>, +) => (event: MouseEvent) => { + event.stopPropagation() + deprecateFunction('handleToggleMainMobileOpen') + setMainMobileOpen(!mainMobileOpen) +} -export const handleToggleListMobileOpen = - (listMobileOpen: boolean, setListMobileOpen: Dispatch>) => (event: MouseEvent) => { - event.stopPropagation() - deprecateFunction('handleToggleListMobileOpen') - setListMobileOpen(!listMobileOpen) - } +export const handleToggleListMobileOpen = ( + listMobileOpen: boolean, + setListMobileOpen: Dispatch>, +) => (event: MouseEvent) => { + event.stopPropagation() + deprecateFunction('handleToggleListMobileOpen') + setListMobileOpen(!listMobileOpen) +} -export const handleToggleBothMobileOpen = - ( - mainMobileOpen: boolean, - setMainMobileOpen: Dispatch>, - listMobileOpen: boolean, - setListMobileOpen: Dispatch>, - ) => - (event: MouseEvent) => { - event.stopPropagation() - deprecateFunction('handleToggleBothMobileOpen') - setMainMobileOpen(!mainMobileOpen) - setListMobileOpen(!listMobileOpen) - } +export const handleToggleBothMobileOpen = ( + mainMobileOpen: boolean, + setMainMobileOpen: Dispatch>, + listMobileOpen: boolean, + setListMobileOpen: Dispatch>, +) => (event: MouseEvent) => { + event.stopPropagation() + deprecateFunction('handleToggleBothMobileOpen') + setMainMobileOpen(!mainMobileOpen) + setListMobileOpen(!listMobileOpen) +} -export const handleMouseHover = - (hoverIndex: number | null, setHoverIndex: Dispatch>) => () => { - setHoverIndex(hoverIndex) - } +export const handleMouseHover = ( + hoverIndex: number | null, + setHoverIndex: Dispatch>, +) => () => { + setHoverIndex(hoverIndex) +} export const CardContextMenu: FC = ({ className, contextMenuItems, ...rest }) => { const [contextMenuOpen, setContextMenuOpen] = useState(false) diff --git a/src/components/card/card.mdx b/src/components/card/card.mdx index 54747b29..38c79482 100644 --- a/src/components/card/card.mdx +++ b/src/components/card/card.mdx @@ -1,4 +1,4 @@ -import { Story, Canvas, ArgsTable, Meta } from '@storybook/blocks' +import { Story, Canvas, Meta, Controls } from '@storybook/blocks' import { RenderHtmlMarkup } from '../../storybook/render-html-markup' import { Card } from './card-components' import * as CardStories from './card.stories' @@ -17,84 +17,66 @@ For non-React users, the following examples show how applying and removing class React users, may wish to use the shorthand component to reduce markup. + + ## Card With Avatar - - - + - + ## Card With Image - - - + - + ## Card With Body - - - + - + ## Card Focussed Adding the `elCardFocussed` class to the `CardWrap` will draw the contact's attention. - - - + - + ## Card With List - - - + - + ## Card Complete Example - - - + - + ## React Shorthand In the React Shorthand, you can compose your card by applying props as appropriate following the `CardProps` interface: - - All of the props are optional - you can have Avatar, Image, List and Complete versions depending on how you mix and match the props. ## React Shorthand Avatar & Body - - - + - + ## React Shorthand List - - - + - + ## React Shorthand Complete - - - + - + diff --git a/src/components/chip/chip.mdx b/src/components/chip/chip.mdx index 0fb436d2..c1525a15 100644 --- a/src/components/chip/chip.mdx +++ b/src/components/chip/chip.mdx @@ -12,18 +12,14 @@ They are used to toggle filters and the state of pages on click or on form submi ## Basic Usage - - - + - + ## Chip Group A group of Chips has it's own wrapper to display responsively in a CSS grid. - - - + - + diff --git a/src/components/drawer/__tests__/__snapshots__/drawer.test.tsx.snap b/src/components/drawer/__tests__/__snapshots__/drawer.test.tsx.snap index f7fc1395..f7fee3b8 100644 --- a/src/components/drawer/__tests__/__snapshots__/drawer.test.tsx.snap +++ b/src/components/drawer/__tests__/__snapshots__/drawer.test.tsx.snap @@ -82,6 +82,7 @@ exports[`Drawer component should match a snapshot when open 1`] = ` classname="mock-css. mock-css. font-size: 1.5rem; " + role="img" > @@ -109,6 +110,7 @@ exports[`Drawer component should match a snapshot when open 1`] = ` classname="mock-css. mock-css. font-size: 1.5rem; " + role="img" > diff --git a/src/components/drawer/drawer.mdx b/src/components/drawer/drawer.mdx index 59bd4c49..7a532f1e 100644 --- a/src/components/drawer/drawer.mdx +++ b/src/components/drawer/drawer.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/blocks' +import { Meta, Story, Canvas, Controls } from '@storybook/blocks' import { RenderHtmlMarkup } from '../../storybook/render-html-markup' import { Drawer } from './drawer' import * as DrawerStories from './drawer.stories' @@ -9,7 +9,7 @@ import * as DrawerStories from './drawer.stories' The drawer component renders a slide in from the right hand side of the page. It is typically used for displaying forms, tabs, and other "quick view" or "quick edit" content and is dismissable without losing page context. In mobile, it fills the screen. - + ## Basic Usage @@ -23,11 +23,9 @@ By default, the drawer fills it's current container so you will likely wish to p Click "Show code" below to see JSX / HTML code for a closed drawer, along with the corresponding rendered markup. To see how an opened one behaves and the markup, move to the React examples below. - - - + - + ## React usage with `useDrawer` hook @@ -35,9 +33,7 @@ The `useDrawer` hook exports both a `Drawer` component and state helpers for tog It also leverages our `Portal` component to render the `Drawer` at the top level of your app. The default container is `#root` so if you need your portal to render on another element, pass a different id to the `useDrawer` hook when you instantiate it - in the example below, we use Storybook's `#docs-root`. - - - + ## `useDrawer` API @@ -52,6 +48,4 @@ Exports the following properties as an array - `[Drawer, openDrawer, closeDrawer Variant in on the above however, the user can dismiss the drawer by clicking on the background or using the icon in the header. - - - + diff --git a/src/components/drawer/drawer.stories.tsx b/src/components/drawer/drawer.stories.tsx index fb46a6f9..fba10180 100644 --- a/src/components/drawer/drawer.stories.tsx +++ b/src/components/drawer/drawer.stories.tsx @@ -66,6 +66,5 @@ export const ReactUsageCanDismiss = { ) }, - name: 'React Usage canDismiss', } diff --git a/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap b/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap index e186062d..70e432fb 100644 --- a/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap +++ b/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap @@ -25,6 +25,7 @@ exports[`FileInput component should match a snapshot 1`] = ` type="file" /> - +{/* Cannot use because of portals error? */} +{/* */} diff --git a/src/components/file-input/file-input.tsx b/src/components/file-input/file-input.tsx index 37ff5d4b..65560174 100644 --- a/src/components/file-input/file-input.tsx +++ b/src/components/file-input/file-input.tsx @@ -53,60 +53,60 @@ export interface ImageUploadModel { Url: string } -export const handleFileChange = - ( - setFileName: Dispatch>, - fileName: string, - onFileUpload?: (uploadImageModel: CreateImageUploadModel) => Promise, - ) => - (event: ChangeEvent) => { - if (event.target && event.target.files && event.target.files[0]) { - const file = event.target.files[0] - - const fileUrl = URL.createObjectURL(file) - - if (typeof fileUrl === 'string') { - setFileName(fileUrl) - } +export const handleFileChange = ( + setFileName: Dispatch>, + fileName: string, + onFileUpload?: (uploadImageModel: CreateImageUploadModel) => Promise, +) => (event: ChangeEvent) => { + if (event.target && event.target.files && event.target.files[0]) { + const file = event.target.files[0] + + const fileUrl = URL.createObjectURL(file) + + if (typeof fileUrl === 'string') { + setFileName(fileUrl) + } - const reader = new FileReader() - reader.readAsDataURL(file) - reader.onload = async () => { - const base64 = reader.result + const reader = new FileReader() + reader.readAsDataURL(file) + reader.onload = async () => { + const base64 = reader.result - if (onFileUpload && typeof base64 === 'string') { - const uploaded = await onFileUpload({ - imageData: base64, - name: `${fileName ? fileName : file.name}`, - }) + if (onFileUpload && typeof base64 === 'string') { + const uploaded = await onFileUpload({ + imageData: base64, + name: `${fileName ? fileName : file.name}`, + }) - if (uploaded && (uploaded as ImageUploadModel).Url) { - setFileName((uploaded as ImageUploadModel).Url) - } + if (uploaded && (uploaded as ImageUploadModel).Url) { + setFileName((uploaded as ImageUploadModel).Url) } } - reader.onerror = (error) => { - console.error(`file upload error: ${error}`) - } - - return reader } + reader.onerror = (error) => { + console.error(`file upload error: ${error}`) + } + + return reader } +} -export const handleFileClear = - (setFileName: Dispatch>) => (event: MouseEvent) => { - event.stopPropagation() - event.preventDefault() +export const handleFileClear = (setFileName: Dispatch>) => ( + event: MouseEvent, +) => { + event.stopPropagation() + event.preventDefault() - setFileName('') - } + setFileName('') +} -export const handleFileView = - (onFileView: (fileUrl: string) => void, fileUrl: string) => (event: MouseEvent) => { - event.stopPropagation() - event.preventDefault() - onFileView(fileUrl) - } +export const handleFileView = (onFileView: (fileUrl: string) => void, fileUrl: string) => ( + event: MouseEvent, +) => { + event.stopPropagation() + event.preventDefault() + onFileView(fileUrl) +} export const FilePreviewImage: FC = ({ src }) => { if (!src) return @@ -148,15 +148,17 @@ export const FileInput: FileInputWrapped = forwardRef( onChange={handleFileChange(setFileName, fileName, onFileUpload)} />
), - name: 'flex-align-self-start', } @@ -458,6 +431,5 @@ export const FlexAlignSelfEnd = { 4
), - name: 'flex-align-self-end', } diff --git a/src/styles/theming.mdx b/src/styles/theming.mdx index f7775aa0..8aa00006 100644 --- a/src/styles/theming.mdx +++ b/src/styles/theming.mdx @@ -18,11 +18,9 @@ Here we are overriding the `--intent-primary` variable by wrapping the component In both examples the markup is identical however, the demo wrapper component has overridden the default `--intent-primary` value by simply setting `--intent-primary: #a0c862;` - - - + - + ## Available Variables diff --git a/src/styles/utilities.stories.mdx b/src/styles/utilities.stories.mdx index 9a15ebb6..0442cfb3 100644 --- a/src/styles/utilities.stories.mdx +++ b/src/styles/utilities.stories.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' +import { Meta, Story, Canvas, ArgsTable, Source } from '@storybook/addon-docs' import * as styles from './spacing' import { cx } from '@linaria/core' import { RenderHtmlMarkup } from '../storybook/render-html-markup' @@ -74,7 +74,10 @@ This is best explained with some examples and varaible values below; - +elMb6, el-mb6
+
elM6, el-mb6
+`} /> #### Padding @@ -95,7 +98,10 @@ This is best explained with some examples and varaible values below; - +elP6, el-pb6
+
elP6, el-pb6
+`} /> ### Height and Width @@ -156,7 +162,10 @@ As per above, this is best demonstrated with some examples - in each case the he - +elW6 elH6, el-w6 el-h6
+
elWScreen elHScreen, el-w-screen el-h-screen
+`} /> ### Border, Border Radius and Box Shadow @@ -185,4 +194,11 @@ As per above some examples; - +elBorderGrey, el-border-grey
+
elBorderBlue, el-border-blue
+
elBorderGreyL, el-border-grey-l
+
elBorderRadius elBorderBlue, el-border-radius el-border-blue
+
elBorderRadiusR elBorderGrey, el-border-radius-r el-border-grey
+
elBoxShadow, el-box-shadow
+`} /> diff --git a/yarn.lock b/yarn.lock index 89ef2a7a..c0a51a7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2755,13 +2755,6 @@ __metadata: languageName: node linkType: hard -"@pkgr/core@npm:^0.1.0": - version: 0.1.1 - resolution: "@pkgr/core@npm:0.1.1" - checksum: 6f25fd2e3008f259c77207ac9915b02f1628420403b2630c92a07ff963129238c9262afc9e84344c7a23b5cc1f3965e2cd17e3798219f5fd78a63d144d3cceba - languageName: node - linkType: hard - "@radix-ui/number@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/number@npm:1.0.1" @@ -3361,6 +3354,7 @@ __metadata: "@storybook/addon-storysource": "npm:^7.6.17" "@storybook/addons": "npm:^7.6.17" "@storybook/blocks": "npm:^7.6.17" + "@storybook/builder-vite": "npm:^7.6.17" "@storybook/cli": "npm:^7.6.17" "@storybook/csf": "npm:^0.1.2" "@storybook/react": "npm:^7.6.17" @@ -3394,7 +3388,7 @@ __metadata: dashify: "npm:2.0.0" eslint: "npm:8.54.0" eslint-config-prettier: "npm:^8.10.0" - eslint-plugin-prettier: "npm:^5.1.3" + eslint-plugin-prettier: "npm:^4.2.1" eslint-plugin-react: "npm:^7.33.2" eslint-plugin-react-hooks: "npm:^4.6.0" eslint-plugin-storybook: "npm:^0.6.15" @@ -3405,7 +3399,7 @@ __metadata: node-polyfill-webpack-plugin: "npm:^1.1.4" postcss: "npm:^8.4.31" postcss-flexbugs-fixes: "npm:^5.0.2" - prettier: "npm:^3.2.5" + prettier: "npm:2.2.1" react: "npm:^18.0.2" react-docgen-typescript-loader: "npm:^3.7.2" react-dom: "npm:^18.0.2" @@ -3420,7 +3414,7 @@ __metadata: tslib: "npm:^2.6.2" typescript: "npm:4.9.5" url-loader: "npm:^4.1.1" - vite: "npm:^5.0.12" + vite: "npm:^5.1.4" vite-plugin-svgr: "npm:^4.2.0" peerDependencies: react: ">=18.0.2" @@ -3554,93 +3548,93 @@ __metadata: languageName: node linkType: hard -"@rollup/rollup-android-arm-eabi@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.6" +"@rollup/rollup-android-arm-eabi@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.12.0" conditions: os=android & cpu=arm languageName: node linkType: hard -"@rollup/rollup-android-arm64@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-android-arm64@npm:4.9.6" +"@rollup/rollup-android-arm64@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-android-arm64@npm:4.12.0" conditions: os=android & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-darwin-arm64@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-darwin-arm64@npm:4.9.6" +"@rollup/rollup-darwin-arm64@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-darwin-arm64@npm:4.12.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-darwin-x64@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-darwin-x64@npm:4.9.6" +"@rollup/rollup-darwin-x64@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-darwin-x64@npm:4.12.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@rollup/rollup-linux-arm-gnueabihf@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.6" +"@rollup/rollup-linux-arm-gnueabihf@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.12.0" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@rollup/rollup-linux-arm64-gnu@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.9.6" +"@rollup/rollup-linux-arm64-gnu@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.12.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-arm64-musl@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-linux-arm64-musl@npm:4.9.6" +"@rollup/rollup-linux-arm64-musl@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.12.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@rollup/rollup-linux-riscv64-gnu@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.9.6" +"@rollup/rollup-linux-riscv64-gnu@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.12.0" conditions: os=linux & cpu=riscv64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-x64-gnu@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-linux-x64-gnu@npm:4.9.6" +"@rollup/rollup-linux-x64-gnu@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.12.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-x64-musl@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-linux-x64-musl@npm:4.9.6" +"@rollup/rollup-linux-x64-musl@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.12.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@rollup/rollup-win32-arm64-msvc@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.9.6" +"@rollup/rollup-win32-arm64-msvc@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.12.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-win32-ia32-msvc@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.9.6" +"@rollup/rollup-win32-ia32-msvc@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.12.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@rollup/rollup-win32-x64-msvc@npm:4.9.6": - version: 4.9.6 - resolution: "@rollup/rollup-win32-x64-msvc@npm:4.9.6" +"@rollup/rollup-win32-x64-msvc@npm:4.12.0": + version: 4.12.0 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.12.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -3972,7 +3966,7 @@ __metadata: languageName: node linkType: hard -"@storybook/builder-vite@npm:7.6.17": +"@storybook/builder-vite@npm:7.6.17, @storybook/builder-vite@npm:^7.6.17": version: 7.6.17 resolution: "@storybook/builder-vite@npm:7.6.17" dependencies: @@ -8413,23 +8407,18 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-prettier@npm:^5.1.3": - version: 5.1.3 - resolution: "eslint-plugin-prettier@npm:5.1.3" +"eslint-plugin-prettier@npm:^4.2.1": + version: 4.2.1 + resolution: "eslint-plugin-prettier@npm:4.2.1" dependencies: prettier-linter-helpers: "npm:^1.0.0" - synckit: "npm:^0.8.6" peerDependencies: - "@types/eslint": ">=8.0.0" - eslint: ">=8.0.0" - eslint-config-prettier: "*" - prettier: ">=3.0.0" + eslint: ">=7.28.0" + prettier: ">=2.0.0" peerDependenciesMeta: - "@types/eslint": - optional: true eslint-config-prettier: optional: true - checksum: 4f26a30444adc61ed692cdb5a9f7e8d9f5794f0917151051e66755ce032a08c3cc72c8b5d56101412e90f6d77035bd8194ea8731e9c16aacdd5ae345a8dae188 + checksum: d387f85dd1bfcb6bc6b794845fee6afb9ebb2375653de6bcde6e615892fb97f85121a7c012a4651b181fc09953bdf54c9bc70cab7ad297019d89ae87dd007e28 languageName: node linkType: hard @@ -13282,7 +13271,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.1.4": +"postcss@npm:^8.1.4, postcss@npm:^8.4.35": version: 8.4.35 resolution: "postcss@npm:8.4.35" dependencies: @@ -13293,7 +13282,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.31, postcss@npm:^8.4.32": +"postcss@npm:^8.4.31": version: 8.4.33 resolution: "postcss@npm:8.4.33" dependencies: @@ -13320,21 +13309,21 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^2.8.0": - version: 2.8.8 - resolution: "prettier@npm:2.8.8" +"prettier@npm:2.2.1": + version: 2.2.1 + resolution: "prettier@npm:2.2.1" bin: prettier: bin-prettier.js - checksum: 00cdb6ab0281f98306cd1847425c24cbaaa48a5ff03633945ab4c701901b8e96ad558eb0777364ffc312f437af9b5a07d0f45346266e8245beaf6247b9c62b24 + checksum: 7bad7ef9cf2da3059a83de0729d480879f5adbe9974419a16a953dee69b2c720ebf1df8d1a713306547a5af8c2b6168a79cd94bda15202de0121348123f7903f languageName: node linkType: hard -"prettier@npm:^3.2.5": - version: 3.2.5 - resolution: "prettier@npm:3.2.5" +"prettier@npm:^2.8.0": + version: 2.8.8 + resolution: "prettier@npm:2.8.8" bin: - prettier: bin/prettier.cjs - checksum: d509f9da0b70e8cacc561a1911c0d99ec75117faed27b95cc8534cb2349667dee6351b0ca83fa9d5703f14127faa52b798de40f5705f02d843da133fc3aa416a + prettier: bin-prettier.js + checksum: 00cdb6ab0281f98306cd1847425c24cbaaa48a5ff03633945ab4c701901b8e96ad558eb0777364ffc312f437af9b5a07d0f45346266e8245beaf6247b9c62b24 languageName: node linkType: hard @@ -14312,22 +14301,22 @@ __metadata: linkType: hard "rollup@npm:^4.2.0": - version: 4.9.6 - resolution: "rollup@npm:4.9.6" - dependencies: - "@rollup/rollup-android-arm-eabi": "npm:4.9.6" - "@rollup/rollup-android-arm64": "npm:4.9.6" - "@rollup/rollup-darwin-arm64": "npm:4.9.6" - "@rollup/rollup-darwin-x64": "npm:4.9.6" - "@rollup/rollup-linux-arm-gnueabihf": "npm:4.9.6" - "@rollup/rollup-linux-arm64-gnu": "npm:4.9.6" - "@rollup/rollup-linux-arm64-musl": "npm:4.9.6" - "@rollup/rollup-linux-riscv64-gnu": "npm:4.9.6" - "@rollup/rollup-linux-x64-gnu": "npm:4.9.6" - "@rollup/rollup-linux-x64-musl": "npm:4.9.6" - "@rollup/rollup-win32-arm64-msvc": "npm:4.9.6" - "@rollup/rollup-win32-ia32-msvc": "npm:4.9.6" - "@rollup/rollup-win32-x64-msvc": "npm:4.9.6" + version: 4.12.0 + resolution: "rollup@npm:4.12.0" + dependencies: + "@rollup/rollup-android-arm-eabi": "npm:4.12.0" + "@rollup/rollup-android-arm64": "npm:4.12.0" + "@rollup/rollup-darwin-arm64": "npm:4.12.0" + "@rollup/rollup-darwin-x64": "npm:4.12.0" + "@rollup/rollup-linux-arm-gnueabihf": "npm:4.12.0" + "@rollup/rollup-linux-arm64-gnu": "npm:4.12.0" + "@rollup/rollup-linux-arm64-musl": "npm:4.12.0" + "@rollup/rollup-linux-riscv64-gnu": "npm:4.12.0" + "@rollup/rollup-linux-x64-gnu": "npm:4.12.0" + "@rollup/rollup-linux-x64-musl": "npm:4.12.0" + "@rollup/rollup-win32-arm64-msvc": "npm:4.12.0" + "@rollup/rollup-win32-ia32-msvc": "npm:4.12.0" + "@rollup/rollup-win32-x64-msvc": "npm:4.12.0" "@types/estree": "npm:1.0.5" fsevents: "npm:~2.3.2" dependenciesMeta: @@ -14361,7 +14350,7 @@ __metadata: optional: true bin: rollup: dist/bin/rollup - checksum: 7c343d9d8ece2ebfbde20b62545f7ee16cbba719da94584fef72ad2f0bdea5f2c49cc429839350e7a4181be04e01bfcd1bd45e1654b8b288a612c409eaebdae4 + checksum: 098eac4dcaf051b71c4efb7e3df059f6563d030b4dfbd2622a4d70acf4d02c463885643c63a21dda45153470f9be5047acd11eab19d4b2ed1c06b8ff57997e8e languageName: node linkType: hard @@ -15197,16 +15186,6 @@ __metadata: languageName: node linkType: hard -"synckit@npm:^0.8.6": - version: 0.8.8 - resolution: "synckit@npm:0.8.8" - dependencies: - "@pkgr/core": "npm:^0.1.0" - tslib: "npm:^2.6.2" - checksum: 2864a5c3e689ad5b991bebbd8a583c5682c4fa08a4f39986b510b6b5d160c08fc3672444069f8f96ed6a9d12772879c674c1f61e728573eadfa90af40a765b74 - languageName: node - linkType: hard - "table@npm:^6.8.1": version: 6.8.1 resolution: "table@npm:6.8.1" @@ -16205,13 +16184,13 @@ __metadata: languageName: node linkType: hard -"vite@npm:^5.0.12": - version: 5.0.12 - resolution: "vite@npm:5.0.12" +"vite@npm:^5.1.4": + version: 5.1.4 + resolution: "vite@npm:5.1.4" dependencies: esbuild: "npm:^0.19.3" fsevents: "npm:~2.3.3" - postcss: "npm:^8.4.32" + postcss: "npm:^8.4.35" rollup: "npm:^4.2.0" peerDependencies: "@types/node": ^18.0.0 || >=20.0.0 @@ -16241,7 +16220,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: ed0bb26a0d0c8e1dae0b70af9e36adffd7e15d80297443fe4da762596dc81570bad7f0291f590a57c1553f5e435338d8c7ffc483bd9431a95c09d9ac90665fad + checksum: e9003b853f0784260f4fe7ce0190124b347fd8fd6bf889a07080facd0d9a9667eaff4022eddb1ba3f0283ef69d15d77f84bca832082e48874a7a62e7f6d66b08 languageName: node linkType: hard