diff --git a/.changeset/next-prerelease-check.md b/.changeset/next-prerelease-check.md new file mode 100644 index 00000000..0dcf44e9 --- /dev/null +++ b/.changeset/next-prerelease-check.md @@ -0,0 +1,41 @@ +--- +"@tabula/dom-utils": patch +"@tabula/portal-root-for": patch +"@tabula/prettier-config": patch +"@tabula/svgr-config": patch +"@tabula/track-id": patch +"@tabula/tree-utils": patch +"@tabula/typescript-config": patch +"@tabula/ui-ai-chat": patch +"@tabula/ui-analytics": patch +"@tabula/ui-button": patch +"@tabula/ui-checkbox": patch +"@tabula/ui-checkbox-tree": patch +"@tabula/ui-data-type-icon": patch +"@tabula/ui-date-picker": patch +"@tabula/ui-icon": patch +"@tabula/ui-json-view": patch +"@tabula/ui-layout-view": patch +"@tabula/ui-menu": patch +"@tabula/ui-multi-selector": patch +"@tabula/ui-node-icon": patch +"@tabula/ui-selector": patch +"@tabula/ui-separator-icon": patch +"@tabula/ui-slider": patch +"@tabula/ui-status-badge": patch +"@tabula/ui-switch": patch +"@tabula/ui-tag": patch +"@tabula/ui-theme": patch +"@tabula/ui-tree": patch +"@tabula/use-async-state": patch +"@tabula/use-close-on-outside-events": patch +"@tabula/use-flag": patch +"@tabula/use-previous-value": patch +"@tabula/use-side-effect": patch +"@tabula/use-size": patch +"@tabula/use-track-id": patch +"@tabula/use-track-ids": patch +"@tabula/vitest-config": patch +--- + +Publish next prerelease packages for validation. diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000..4ff65811 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,46 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@tabula/ui-ai-chat": "2.1.3", + "@tabula/ui-analytics": "0.3.2", + "@tabula/ui-button": "9.1.2", + "@tabula/ui-checkbox": "4.1.2", + "@tabula/ui-checkbox-tree": "4.1.2", + "@tabula/ui-data-type-icon": "0.2.3", + "@tabula/ui-date-picker": "7.1.2", + "@tabula/ui-icon": "8.0.4", + "@tabula/ui-json-view": "7.3.3", + "@tabula/ui-layout-view": "8.1.2", + "@tabula/ui-menu": "1.2.2", + "@tabula/ui-multi-selector": "1.1.2", + "@tabula/ui-node-icon": "12.0.0", + "@tabula/ui-selector": "3.1.1", + "@tabula/ui-separator-icon": "0.2.3", + "@tabula/ui-slider": "2.1.2", + "@tabula/ui-status-badge": "1.1.2", + "@tabula/ui-switch": "1.1.2", + "@tabula/ui-tag": "0.1.2", + "@tabula/ui-theme": "3.3.2", + "@tabula/ui-tree": "0.1.2", + "@tabula/prettier-config": "0.1.7", + "@tabula/svgr-config": "0.3.2", + "@tabula/typescript-config": "0.3.3", + "@tabula/vitest-config": "0.3.0", + "@tabula/use-async-state": "0.1.0", + "@tabula/use-close-on-outside-events": "0.1.0", + "@tabula/use-flag": "0.1.0", + "@tabula/use-previous-value": "0.1.0", + "@tabula/use-side-effect": "0.1.0", + "@tabula/use-size": "0.2.2", + "@tabula/use-track-id": "0.1.1", + "@tabula/use-track-ids": "0.1.1", + "@tabula/dom-utils": "0.1.0", + "@tabula/portal-root-for": "0.1.0", + "@tabula/track-id": "0.1.0", + "@tabula/tree-utils": "0.1.0" + }, + "changesets": [ + "next-prerelease-check" + ] +} diff --git a/.idea/compiler.xml b/.idea/compiler.xml new file mode 100644 index 00000000..2c7251bf --- /dev/null +++ b/.idea/compiler.xml @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/.scaffold/component/.forgerc.hbs b/.scaffold/component/.forgerc.hbs index 0146787f..55c7bd8c 100644 --- a/.scaffold/component/.forgerc.hbs +++ b/.scaffold/component/.forgerc.hbs @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/.scaffold/component/package.json.hbs b/.scaffold/component/package.json.hbs index 290a55f5..c6f31820 100644 --- a/.scaffold/component/package.json.hbs +++ b/.scaffold/component/package.json.hbs @@ -7,9 +7,9 @@ "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, diff --git a/.scaffold/hook/.forgerc.hbs b/.scaffold/hook/.forgerc.hbs index 0146787f..55c7bd8c 100644 --- a/.scaffold/hook/.forgerc.hbs +++ b/.scaffold/hook/.forgerc.hbs @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/.scaffold/hook/package.json.hbs b/.scaffold/hook/package.json.hbs index 7d62e8bc..dabf4223 100644 --- a/.scaffold/hook/package.json.hbs +++ b/.scaffold/hook/package.json.hbs @@ -7,9 +7,9 @@ "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, diff --git a/.scaffold/library/.forgerc.hbs b/.scaffold/library/.forgerc.hbs index 0146787f..55c7bd8c 100644 --- a/.scaffold/library/.forgerc.hbs +++ b/.scaffold/library/.forgerc.hbs @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/.scaffold/library/package.json.hbs b/.scaffold/library/package.json.hbs index b2a1d0c7..338f86fc 100644 --- a/.scaffold/library/package.json.hbs +++ b/.scaffold/library/package.json.hbs @@ -7,9 +7,9 @@ "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, diff --git a/.storybook/main.js b/.storybook/main.js index 9b66eb7f..a6edc376 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,4 +1,4 @@ -import { readdirSync } from 'node:fs'; +import { readFileSync, readdirSync } from 'node:fs'; import { dirname, join, relative, resolve, sep } from 'node:path'; import { fileURLToPath } from 'node:url'; @@ -24,7 +24,7 @@ function searchStories(workspace) { // // If directory have no `package.json`, then just ignore it. try { - packageJson = require(join(packageDir, 'package.json')); + packageJson = JSON.parse(readFileSync(join(packageDir, 'package.json'), 'utf8')); } catch { continue; } @@ -34,7 +34,7 @@ function searchStories(workspace) { stories.push({ directory: packageDir, titlePrefix: `${workspace}/${name}@${packageJson.version}`, - files: 'stories/**/*.@(mdx|stories.@(mdx|ts|tsx))', + files: 'stories/**/*.@(mdx|stories.@(ts|tsx))', }); } @@ -56,7 +56,7 @@ const alias = { const [ns, pkgName] = relative(ROOT_DIR, importer).split(sep); - const resolvedTarget = target === '' ? 'lib/index.js' : `lib${target}.js`; + const resolvedTarget = target === '' ? 'lib/index.mjs' : `lib${target}.mjs`; return join(ROOT_DIR, ns, pkgName, resolvedTarget); }, @@ -64,8 +64,7 @@ const alias = { export default { addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', + '@storybook/addon-docs', '@storybook/addon-links', ], diff --git a/.storybook/manager.js b/.storybook/manager.js index 6f24fb4a..ac047721 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,4 +1,4 @@ -import { addons } from '@storybook/manager-api'; +import { addons } from 'storybook/manager-api'; import { theme } from './theme.js'; diff --git a/.storybook/theme.js b/.storybook/theme.js index 32672e80..d8dc01e2 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -1,4 +1,4 @@ -import { create } from '@storybook/theming/create'; +import { create } from 'storybook/theming'; export const theme = create({ base: 'light', diff --git a/.tool-versions b/.tool-versions index 6fc4488d..15f73c78 100644 --- a/.tool-versions +++ b/.tool-versions @@ -1,2 +1,2 @@ -nodejs 22.14.0 -pnpm 10.6.4 +nodejs 24.14.1 +pnpm 10.13.1 diff --git a/components/ui-ai-chat/.forgerc b/components/ui-ai-chat/.forgerc index 0146787f..55c7bd8c 100644 --- a/components/ui-ai-chat/.forgerc +++ b/components/ui-ai-chat/.forgerc @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/components/ui-ai-chat/CHANGELOG.md b/components/ui-ai-chat/CHANGELOG.md index 98cdf9e9..84d51f6f 100644 --- a/components/ui-ai-chat/CHANGELOG.md +++ b/components/ui-ai-chat/CHANGELOG.md @@ -1,5 +1,16 @@ # @tabula/ui-ai-chat +## 2.1.4-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/ui-button@9.1.3-next.0 + - @tabula/ui-theme@3.3.3-next.0 + ## 2.1.3 ### Patch Changes diff --git a/components/ui-ai-chat/package.json b/components/ui-ai-chat/package.json index a0e8ecfd..2772805d 100644 --- a/components/ui-ai-chat/package.json +++ b/components/ui-ai-chat/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-ai-chat", - "version": "2.1.3", + "version": "2.1.4-next.0", "description": "Allows to embed UI for conversation with AI assistant", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -48,15 +48,18 @@ }, "devDependencies": { "@tabula/ui-theme": "workspace:^", - "@types/react-transition-group": "catalog:" + "@types/react": "catalog:", + "@types/react-transition-group": "catalog:", + "react": "catalog:", + "react-dom": "catalog:" }, "dependencies": { "@tabula/ui-button": "workspace:^", "clsx": "catalog:", - "dompurify": "^3.2.4", - "js-xxhash": "^4.0.0", - "marked": "^14.1.2", - "react-textarea-autosize": "^8.5.5", + "dompurify": "^3.4.1", + "js-xxhash": "^5.0.1", + "marked": "^18.0.2", + "react-textarea-autosize": "^8.5.9", "react-transition-group": "catalog:" } } diff --git a/components/ui-ai-chat/src/Conversation/Conversation.hooks.ts b/components/ui-ai-chat/src/Conversation/Conversation.hooks.ts index f2345fbd..d3f92352 100644 --- a/components/ui-ai-chat/src/Conversation/Conversation.hooks.ts +++ b/components/ui-ai-chat/src/Conversation/Conversation.hooks.ts @@ -2,7 +2,9 @@ import { Ref, RefObject, useImperativeHandle, useRef } from 'react'; import { InternalConversationController } from '../types'; -export function useController(ref: Ref): RefObject { +export function useController( + ref: Ref, +): RefObject { const conversationRef = useRef(null); useImperativeHandle( diff --git a/components/ui-ai-chat/src/PromptInput/PromptInput.hooks.ts b/components/ui-ai-chat/src/PromptInput/PromptInput.hooks.ts index 9fa3ef00..e5251ad5 100644 --- a/components/ui-ai-chat/src/PromptInput/PromptInput.hooks.ts +++ b/components/ui-ai-chat/src/PromptInput/PromptInput.hooks.ts @@ -2,7 +2,9 @@ import { Ref, RefObject, useImperativeHandle, useRef } from 'react'; import { PromptInputController } from '../types'; -export function useController(ref: Ref): RefObject { +export function useController( + ref: Ref, +): RefObject { const inputRef = useRef(null); useImperativeHandle( diff --git a/components/ui-ai-chat/src/UiAiChat/hooks/useAutoScroll.ts b/components/ui-ai-chat/src/UiAiChat/hooks/useAutoScroll.ts index ec53b925..0f14de21 100644 --- a/components/ui-ai-chat/src/UiAiChat/hooks/useAutoScroll.ts +++ b/components/ui-ai-chat/src/UiAiChat/hooks/useAutoScroll.ts @@ -20,7 +20,7 @@ function shouldToScroll(previous: Request | null, current: Request | null): bool export function useAutoScroll( conversation: Request[], - conversationRef: RefObject, + conversationRef: RefObject, ): void { const lastRef = useRef(null); diff --git a/components/ui-ai-chat/src/UiAiChat/hooks/useController.ts b/components/ui-ai-chat/src/UiAiChat/hooks/useController.ts index d708fd2c..1f9aac14 100644 --- a/components/ui-ai-chat/src/UiAiChat/hooks/useController.ts +++ b/components/ui-ai-chat/src/UiAiChat/hooks/useController.ts @@ -5,8 +5,8 @@ import { Controller, ConversationController, PromptInputController } from '../.. type Options = { ref: Ref; - conversationRef: RefObject; - promptInputRef: RefObject; + conversationRef: RefObject; + promptInputRef: RefObject; }; export function useController({ ref, conversationRef, promptInputRef }: Options): void { diff --git a/components/ui-ai-chat/src/UiAiChat/hooks/usePrompt.ts b/components/ui-ai-chat/src/UiAiChat/hooks/usePrompt.ts index ba9e56cd..105dc7b5 100644 --- a/components/ui-ai-chat/src/UiAiChat/hooks/usePrompt.ts +++ b/components/ui-ai-chat/src/UiAiChat/hooks/usePrompt.ts @@ -7,7 +7,7 @@ type Options = { onSend: (prompt: string) => void; - promptInputRef: RefObject; + promptInputRef: RefObject; }; type Result = { diff --git a/components/ui-ai-chat/stories/Chat/Chat.hooks.ts b/components/ui-ai-chat/stories/Chat/Chat.hooks.ts index 23d66f79..c4113000 100644 --- a/components/ui-ai-chat/stories/Chat/Chat.hooks.ts +++ b/components/ui-ai-chat/stories/Chat/Chat.hooks.ts @@ -12,9 +12,7 @@ function answerWithTable(noRows = false): string { const colsCount = randNumber({ min: 1, max: 10 }); const rowsCount = noRows ? 0 : randNumber({ min: 5, max: 20 }); - const buffer: string[] = [`${randParagraph()}\n\n`]; - - buffer.push('|'); + const buffer: string[] = [`${randParagraph()}\n\n`, '|']; for (let c = 0; c < colsCount; c += 1) { buffer.push(` ${randWord()} |`); diff --git a/components/ui-ai-chat/stories/UiAiChat.stories.tsx b/components/ui-ai-chat/stories/UiAiChat.stories.tsx index df9d8244..f11f9941 100644 --- a/components/ui-ai-chat/stories/UiAiChat.stories.tsx +++ b/components/ui-ai-chat/stories/UiAiChat.stories.tsx @@ -1,4 +1,4 @@ -import { action } from '@storybook/addon-actions'; +import { action } from 'storybook/actions'; import { Decorator, Meta, StoryObj } from '@storybook/react'; import { UiAiChat, UiAiChatProps } from '~'; diff --git a/components/ui-ai-chat/tsconfig.forge.json b/components/ui-ai-chat/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-ai-chat/tsconfig.forge.json +++ b/components/ui-ai-chat/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-analytics/.forgerc b/components/ui-analytics/.forgerc index 0146787f..55c7bd8c 100644 --- a/components/ui-analytics/.forgerc +++ b/components/ui-analytics/.forgerc @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/components/ui-analytics/CHANGELOG.md b/components/ui-analytics/CHANGELOG.md index bb1f7cce..cefe5cd1 100644 --- a/components/ui-analytics/CHANGELOG.md +++ b/components/ui-analytics/CHANGELOG.md @@ -1,5 +1,16 @@ # @tabula/ui-analytics +## 0.3.3-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/use-track-id@0.1.2-next.0 + - @tabula/use-track-ids@0.1.2-next.0 + ## 0.3.2 ### Patch Changes diff --git a/components/ui-analytics/package.json b/components/ui-analytics/package.json index c73afb29..2131c4a1 100644 --- a/components/ui-analytics/package.json +++ b/components/ui-analytics/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-analytics", - "version": "0.3.2", + "version": "0.3.3-next.0", "description": "Allows to provide tracking ids to components", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -50,5 +50,8 @@ "dependencies": { "@tabula/use-track-id": "workspace:^", "@tabula/use-track-ids": "workspace:^" + }, + "devDependencies": { + "react": "catalog:" } } diff --git a/components/ui-analytics/stories/UiAnalytics.mdx b/components/ui-analytics/stories/UiAnalytics.mdx new file mode 100644 index 00000000..7d759d54 --- /dev/null +++ b/components/ui-analytics/stories/UiAnalytics.mdx @@ -0,0 +1,17 @@ +import { Controls, Canvas, Meta } from '@storybook/addon-docs/blocks'; + +import * as Stories from './UiAnalytics.stories'; + + + +# UiAnalytics + +This component provide track id through context to the children components. + +## Demo + + + +## Properties + + diff --git a/components/ui-analytics/stories/UiAnalytics.stories.mdx b/components/ui-analytics/stories/UiAnalytics.stories.mdx deleted file mode 100644 index 4b6a8243..00000000 --- a/components/ui-analytics/stories/UiAnalytics.stories.mdx +++ /dev/null @@ -1,25 +0,0 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; - -import { UiAnalytics } from '~'; - -import { UseUiTrackId } from './UseUiTrackId'; -import { UseUiTrackIds } from './UseUiTrackIds'; - - - -# UiAnalytics - -This component provide track id through context to the children components. - -## Demo - - - - - - - - -## Properties - - diff --git a/components/ui-analytics/stories/UiAnalytics.stories.tsx b/components/ui-analytics/stories/UiAnalytics.stories.tsx index 4ef32b93..38d9a5ad 100644 --- a/components/ui-analytics/stories/UiAnalytics.stories.tsx +++ b/components/ui-analytics/stories/UiAnalytics.stories.tsx @@ -20,6 +20,10 @@ export default { type Story = StoryObj; export const Default: Story = { + args: { + trackId: 'parent', + }, + render({ trackId }) { return ( diff --git a/components/ui-analytics/stories/useUiTrackId.stories.mdx b/components/ui-analytics/stories/useUiTrackId.mdx similarity index 78% rename from components/ui-analytics/stories/useUiTrackId.stories.mdx rename to components/ui-analytics/stories/useUiTrackId.mdx index 1b46dcc3..1bf9ffe8 100644 --- a/components/ui-analytics/stories/useUiTrackId.stories.mdx +++ b/components/ui-analytics/stories/useUiTrackId.mdx @@ -1,11 +1,9 @@ -import { Canvas, Meta } from '@storybook/blocks'; - -import { UiAnalytics } from '~'; +import { Canvas, Meta } from '@storybook/addon-docs/blocks'; import { Table } from './Table'; -import { UseUiTrackId } from './UseUiTrackId'; +import * as Stories from './useUiTrackId.stories'; - + # useUiTrackId @@ -45,8 +43,4 @@ This hook allows to fetch track id from context. ## Demo - - - - - + diff --git a/components/ui-analytics/stories/useUiTrackId.stories.tsx b/components/ui-analytics/stories/useUiTrackId.stories.tsx new file mode 100644 index 00000000..78e71bed --- /dev/null +++ b/components/ui-analytics/stories/useUiTrackId.stories.tsx @@ -0,0 +1,35 @@ +import { StoryObj } from '@storybook/react'; + +import { UiAnalytics } from '~'; + +import { UseUiTrackId } from './UseUiTrackId'; + +type Args = { + trackId?: string | null; +}; + +export default { + title: 'useUiTrackId', + + argTypes: { + trackId: { + control: 'text', + }, + }, +}; + +type Story = StoryObj; + +export const Default: Story = { + args: { + trackId: 'parent', + }, + + render({ trackId }) { + return ( + + + + ); + }, +}; diff --git a/components/ui-analytics/stories/useUiTrackIds.stories.mdx b/components/ui-analytics/stories/useUiTrackIds.mdx similarity index 80% rename from components/ui-analytics/stories/useUiTrackIds.stories.mdx rename to components/ui-analytics/stories/useUiTrackIds.mdx index 2720a6f6..5417cc0c 100644 --- a/components/ui-analytics/stories/useUiTrackIds.stories.mdx +++ b/components/ui-analytics/stories/useUiTrackIds.mdx @@ -1,11 +1,9 @@ -import { Canvas, Meta } from '@storybook/blocks'; - -import { UiAnalytics } from '~'; +import { Canvas, Meta } from '@storybook/addon-docs/blocks'; import { Table } from './Table'; -import { UseUiTrackIds } from './UseUiTrackIds'; +import * as Stories from './useUiTrackIds.stories'; - + # useUiTrackIds @@ -71,8 +69,4 @@ This hook allows to fetch track id from context and build ids map. ## Demo - - - - - + diff --git a/components/ui-analytics/stories/useUiTrackIds.stories.tsx b/components/ui-analytics/stories/useUiTrackIds.stories.tsx new file mode 100644 index 00000000..a6276e0e --- /dev/null +++ b/components/ui-analytics/stories/useUiTrackIds.stories.tsx @@ -0,0 +1,35 @@ +import { StoryObj } from '@storybook/react'; + +import { UiAnalytics } from '~'; + +import { UseUiTrackIds } from './UseUiTrackIds'; + +type Args = { + trackId?: string | null; +}; + +export default { + title: 'useUiTrackIds', + + argTypes: { + trackId: { + control: 'text', + }, + }, +}; + +type Story = StoryObj; + +export const Default: Story = { + args: { + trackId: 'parent', + }, + + render({ trackId }) { + return ( + + + + ); + }, +}; diff --git a/components/ui-analytics/tsconfig.forge.json b/components/ui-analytics/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-analytics/tsconfig.forge.json +++ b/components/ui-analytics/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-button/.forgerc b/components/ui-button/.forgerc index e4f6c63a..f00d06b3 100644 --- a/components/ui-button/.forgerc +++ b/components/ui-button/.forgerc @@ -11,5 +11,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/components/ui-button/CHANGELOG.md b/components/ui-button/CHANGELOG.md index 9c1bb7d2..6659bdc4 100644 --- a/components/ui-button/CHANGELOG.md +++ b/components/ui-button/CHANGELOG.md @@ -1,5 +1,15 @@ # @tabula/ui-button +## 9.1.3-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/ui-theme@3.3.3-next.0 + ## 9.1.2 ### Patch Changes diff --git a/components/ui-button/package.json b/components/ui-button/package.json index 3802d370..db7325e3 100644 --- a/components/ui-button/package.json +++ b/components/ui-button/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-button", - "version": "9.1.2", + "version": "9.1.3-next.0", "description": "Button components which are used to initialize an action", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -47,7 +47,8 @@ "react": "catalog:" }, "devDependencies": { - "@tabula/ui-theme": "workspace:^" + "@tabula/ui-theme": "workspace:^", + "react": "catalog:" }, "dependencies": { "clsx": "catalog:" diff --git a/components/ui-button/stories/UiButton20.stories.mdx b/components/ui-button/stories/UiButton20.mdx similarity index 96% rename from components/ui-button/stories/UiButton20.stories.mdx rename to components/ui-button/stories/UiButton20.mdx index 5464e091..a1645ec0 100644 --- a/components/ui-button/stories/UiButton20.stories.mdx +++ b/components/ui-button/stories/UiButton20.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { Controls, Canvas, Meta } from '@storybook/addon-docs/blocks'; import { UiButton20 } from '~'; @@ -6,8 +6,9 @@ import { contractBackground } from './style.css'; import { AddIcon } from './AddIcon'; import { Link } from './Link'; +import * as Stories from './UiButton20.stories'; - + # UiButton20 @@ -140,4 +141,4 @@ For example, you can provide `data-*` attribute for analytics purposes: ## Properties - + diff --git a/components/ui-button/stories/UiButton24.stories.mdx b/components/ui-button/stories/UiButton24.mdx similarity index 96% rename from components/ui-button/stories/UiButton24.stories.mdx rename to components/ui-button/stories/UiButton24.mdx index 09c30e07..4a8c4ba1 100644 --- a/components/ui-button/stories/UiButton24.stories.mdx +++ b/components/ui-button/stories/UiButton24.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { Controls, Canvas, Meta } from '@storybook/addon-docs/blocks'; import { UiButton24 } from '~'; @@ -6,8 +6,9 @@ import { darkBackground } from './style.css'; import { AddIcon } from './AddIcon'; import { Link } from './Link'; +import * as Stories from './UiButton24.stories'; - + # UiButton24 @@ -76,6 +77,7 @@ There are 9 appearance variants, which you can use: Test Ai + Secondary Header @@ -150,4 +152,4 @@ For example, you can provide `data-*` attribute for analytics purposes: ## Properties - + diff --git a/components/ui-button/stories/UiButton32.stories.mdx b/components/ui-button/stories/UiButton32.mdx similarity index 96% rename from components/ui-button/stories/UiButton32.stories.mdx rename to components/ui-button/stories/UiButton32.mdx index 326656ef..434d877b 100644 --- a/components/ui-button/stories/UiButton32.stories.mdx +++ b/components/ui-button/stories/UiButton32.mdx @@ -1,11 +1,12 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { Controls, Canvas, Meta } from '@storybook/addon-docs/blocks'; import { UiButton32 } from '~'; import { AddIcon } from './AddIcon'; import { Link } from './Link'; +import * as Stories from './UiButton32.stories'; - + # UiButton32 @@ -143,4 +144,4 @@ For example, you can provide `data-*` attribute for analytics purposes: ## Properties - + diff --git a/components/ui-button/stories/UiButton40.stories.mdx b/components/ui-button/stories/UiButton40.mdx similarity index 96% rename from components/ui-button/stories/UiButton40.stories.mdx rename to components/ui-button/stories/UiButton40.mdx index 0dd46eb8..031d7088 100644 --- a/components/ui-button/stories/UiButton40.stories.mdx +++ b/components/ui-button/stories/UiButton40.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { Controls, Canvas, Meta } from '@storybook/addon-docs/blocks'; import { UiButton40 } from '~'; @@ -6,8 +6,9 @@ import { darkBackground } from './style.css'; import { AddIcon } from './AddIcon'; import { Link } from './Link'; +import * as Stories from './UiButton40.stories'; - + # UiButton40 @@ -72,6 +73,7 @@ There are 5 appearance variants, which you can use: Secondary Blue Secondary Filled + Secondary Dark @@ -146,4 +148,4 @@ For example, you can provide `data-*` attribute for analytics purposes: ## Properties - + diff --git a/components/ui-button/stories/UiButton48.stories.mdx b/components/ui-button/stories/UiButton48.mdx similarity index 95% rename from components/ui-button/stories/UiButton48.stories.mdx rename to components/ui-button/stories/UiButton48.mdx index 58b0ef01..4676d56f 100644 --- a/components/ui-button/stories/UiButton48.stories.mdx +++ b/components/ui-button/stories/UiButton48.mdx @@ -1,11 +1,12 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { Controls, Canvas, Meta } from '@storybook/addon-docs/blocks'; import { UiButton48 } from '~'; import { AddIcon } from './AddIcon'; import { Link } from './Link'; +import * as Stories from './UiButton48.stories'; - + # UiButton48 @@ -139,4 +140,4 @@ For example, you can provide `data-*` attribute for analytics purposes: ## Properties - + diff --git a/components/ui-button/tsconfig.forge.json b/components/ui-button/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-button/tsconfig.forge.json +++ b/components/ui-button/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-checkbox-tree/.forgerc b/components/ui-checkbox-tree/.forgerc index 0146787f..55c7bd8c 100644 --- a/components/ui-checkbox-tree/.forgerc +++ b/components/ui-checkbox-tree/.forgerc @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/components/ui-checkbox-tree/CHANGELOG.md b/components/ui-checkbox-tree/CHANGELOG.md index f3111d78..ef2fb472 100644 --- a/components/ui-checkbox-tree/CHANGELOG.md +++ b/components/ui-checkbox-tree/CHANGELOG.md @@ -1,5 +1,18 @@ # @tabula/ui-checkbox-tree +## 4.1.3-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/tree-utils@0.1.1-next.0 + - @tabula/ui-checkbox@4.1.3-next.0 + - @tabula/ui-theme@3.3.3-next.0 + - @tabula/ui-tree@0.1.3-next.0 + ## 4.1.2 ### Patch Changes diff --git a/components/ui-checkbox-tree/package.json b/components/ui-checkbox-tree/package.json index b949bb7b..cce6c946 100644 --- a/components/ui-checkbox-tree/package.json +++ b/components/ui-checkbox-tree/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-checkbox-tree", - "version": "4.1.2", + "version": "4.1.3-next.0", "description": "Allows to select items in the tree", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -49,7 +49,8 @@ }, "devDependencies": { "@tabula/ui-theme": "workspace:^", - "@vanilla-extract/css-utils": "catalog:" + "@vanilla-extract/css-utils": "catalog:", + "react": "catalog:" }, "dependencies": { "@tabula/tree-utils": "workspace:^", diff --git a/components/ui-checkbox-tree/stories/UiCheckboxTree.mdx b/components/ui-checkbox-tree/stories/UiCheckboxTree.mdx index f108ee9b..5f2fd404 100644 --- a/components/ui-checkbox-tree/stories/UiCheckboxTree.mdx +++ b/components/ui-checkbox-tree/stories/UiCheckboxTree.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs/blocks'; import * as Stories from './UiCheckboxTree.stories'; @@ -87,4 +87,4 @@ If user toggle branch or `Select All` when disabled items is presented, then dis ## Properties - + diff --git a/components/ui-checkbox-tree/tsconfig.forge.json b/components/ui-checkbox-tree/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-checkbox-tree/tsconfig.forge.json +++ b/components/ui-checkbox-tree/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-checkbox/.forgerc b/components/ui-checkbox/.forgerc index 0146787f..55c7bd8c 100644 --- a/components/ui-checkbox/.forgerc +++ b/components/ui-checkbox/.forgerc @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/components/ui-checkbox/CHANGELOG.md b/components/ui-checkbox/CHANGELOG.md index 4948df07..0644c745 100644 --- a/components/ui-checkbox/CHANGELOG.md +++ b/components/ui-checkbox/CHANGELOG.md @@ -1,5 +1,15 @@ # @tabula/ui-checkbox +## 4.1.3-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/ui-theme@3.3.3-next.0 + ## 4.1.2 ### Patch Changes diff --git a/components/ui-checkbox/package.json b/components/ui-checkbox/package.json index d88c698e..ba8c56dd 100644 --- a/components/ui-checkbox/package.json +++ b/components/ui-checkbox/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-checkbox", - "version": "4.1.2", + "version": "4.1.3-next.0", "description": "Checkbox control for forms", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -47,7 +47,8 @@ "react": "catalog:" }, "devDependencies": { - "@tabula/ui-theme": "workspace:^" + "@tabula/ui-theme": "workspace:^", + "react": "catalog:" }, "dependencies": { "clsx": "catalog:" diff --git a/components/ui-checkbox/src/UiCheckbox.hooks.ts b/components/ui-checkbox/src/UiCheckbox.hooks.ts index 59f06390..3333c976 100644 --- a/components/ui-checkbox/src/UiCheckbox.hooks.ts +++ b/components/ui-checkbox/src/UiCheckbox.hooks.ts @@ -5,9 +5,9 @@ type Options = { onChange?: (isChecked: boolean) => void; }; -type Result = [RefObject, ChangeEventHandler]; +type Result = [RefObject, ChangeEventHandler]; -function setIndeterminate(ref: RefObject, isIndeterminate: boolean) { +function setIndeterminate(ref: RefObject, isIndeterminate: boolean) { if (ref.current != null) { ref.current.indeterminate = isIndeterminate; } diff --git a/components/ui-checkbox/stories/UiCheckbox.mdx b/components/ui-checkbox/stories/UiCheckbox.mdx index ad699f6a..a305fe2e 100644 --- a/components/ui-checkbox/stories/UiCheckbox.mdx +++ b/components/ui-checkbox/stories/UiCheckbox.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs/blocks'; import * as Stories from './UiCheckbox.stories'; @@ -41,4 +41,4 @@ This property allows to disable a control. ## Properties - + diff --git a/components/ui-checkbox/stories/UiCheckbox.stories.tsx b/components/ui-checkbox/stories/UiCheckbox.stories.tsx index b3039f67..1bf03362 100644 --- a/components/ui-checkbox/stories/UiCheckbox.stories.tsx +++ b/components/ui-checkbox/stories/UiCheckbox.stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; +import { action } from 'storybook/actions'; import { Meta, StoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/testing-library'; +import { userEvent, within } from 'storybook/test'; import { UiCheckbox } from '~'; diff --git a/components/ui-checkbox/tsconfig.forge.json b/components/ui-checkbox/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-checkbox/tsconfig.forge.json +++ b/components/ui-checkbox/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-data-type-icon/.forgerc.js b/components/ui-data-type-icon/.forgerc.js index 4b30b278..7113e1f6 100644 --- a/components/ui-data-type-icon/.forgerc.js +++ b/components/ui-data-type-icon/.forgerc.js @@ -3,6 +3,7 @@ export default { entry: 'index', check: true, typings: true, + postBuild: 'node ../../scripts/convert-forge-output-to-mjs.mjs', svgrComponentName(name) { return `Ui${name.slice(3)}Icon`; }, diff --git a/components/ui-data-type-icon/CHANGELOG.md b/components/ui-data-type-icon/CHANGELOG.md index d009b872..bd6d7941 100644 --- a/components/ui-data-type-icon/CHANGELOG.md +++ b/components/ui-data-type-icon/CHANGELOG.md @@ -1,5 +1,12 @@ # @tabula/ui-data-type-icon +## 0.2.4-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + ## 0.2.3 ### Patch Changes diff --git a/components/ui-data-type-icon/package.json b/components/ui-data-type-icon/package.json index 3e5dbab6..593bba08 100644 --- a/components/ui-data-type-icon/package.json +++ b/components/ui-data-type-icon/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-data-type-icon", - "version": "0.2.3", + "version": "0.2.4-next.0", "description": "Icons for data types", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./*.svg": "./lib/*.svg", "./package.json": "./package.json" @@ -45,5 +45,8 @@ }, "peerDependencies": { "react": "catalog:" + }, + "devDependencies": { + "react": "catalog:" } } diff --git a/components/ui-data-type-icon/stories/Docs.stories.mdx b/components/ui-data-type-icon/stories/Docs.mdx similarity index 70% rename from components/ui-data-type-icon/stories/Docs.stories.mdx rename to components/ui-data-type-icon/stories/Docs.mdx index b7127066..6998a2e0 100644 --- a/components/ui-data-type-icon/stories/Docs.stories.mdx +++ b/components/ui-data-type-icon/stories/Docs.mdx @@ -1,8 +1,10 @@ -import {Canvas, Meta, Source} from '@storybook/blocks'; +import {Canvas, Meta, Source} from '@storybook/addon-docs/blocks'; import { UiStringIcon } from '~'; - +import * as Stories from './UiDataTypeIcon.stories'; + + # Component @@ -12,9 +14,12 @@ We provide icons as React components.
- +`} + language="ts" +/>
@@ -22,7 +27,7 @@ import { UiStringIcon } from '@tabula/ui-data-type-icon'; Data types icons has `16x16` size by default. - + @@ -48,14 +53,14 @@ You can provide `className` property.
- +
@@ -75,9 +80,12 @@ Also, we provide icons as static images.
- +`} + language="ts" +/>
@@ -85,8 +93,11 @@ import { uiStringIconUrl } from "@tabula/ui-data-type-icon"; If you use a Vite bundler, you can use icons in your styles like this: - +`} + language="css" +/> diff --git a/components/ui-data-type-icon/stories/UiDataTypeIcon.stories.tsx b/components/ui-data-type-icon/stories/UiDataTypeIcon.stories.tsx index 8b6b6afc..844d4569 100644 --- a/components/ui-data-type-icon/stories/UiDataTypeIcon.stories.tsx +++ b/components/ui-data-type-icon/stories/UiDataTypeIcon.stories.tsx @@ -10,7 +10,7 @@ import { container, icon, root } from './styles.css'; type Args = { currentColor: string; - search: string; + search?: string; }; // endregion diff --git a/components/ui-data-type-icon/tsconfig.forge.json b/components/ui-data-type-icon/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-data-type-icon/tsconfig.forge.json +++ b/components/ui-data-type-icon/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-date-picker/.forgerc.js b/components/ui-date-picker/.forgerc.js index e2681b7f..d82a0d37 100644 --- a/components/ui-date-picker/.forgerc.js +++ b/components/ui-date-picker/.forgerc.js @@ -3,6 +3,7 @@ export default { entry: 'index', check: true, typings: true, + postBuild: 'node ../../scripts/convert-forge-output-to-mjs.mjs', svgrComponentName(name) { return `${name.slice(3)}Icon`; }, diff --git a/components/ui-date-picker/CHANGELOG.md b/components/ui-date-picker/CHANGELOG.md index 6b2e0258..cfa86998 100644 --- a/components/ui-date-picker/CHANGELOG.md +++ b/components/ui-date-picker/CHANGELOG.md @@ -1,5 +1,17 @@ # @tabula/ui-date-picker +## 7.1.3-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/ui-button@9.1.3-next.0 + - @tabula/ui-data-type-icon@0.2.4-next.0 + - @tabula/ui-theme@3.3.3-next.0 + ## 7.1.2 ### Patch Changes diff --git a/components/ui-date-picker/package.json b/components/ui-date-picker/package.json index 10b03921..4fe8aae6 100644 --- a/components/ui-date-picker/package.json +++ b/components/ui-date-picker/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-date-picker", - "version": "7.1.2", + "version": "7.1.3-next.0", "description": "Allows to pick a date, time or date and time together", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -48,13 +48,16 @@ }, "devDependencies": { "@tabula/ui-theme": "workspace:^", - "@types/react-transition-group": "catalog:" + "@types/react": "catalog:", + "@types/react-transition-group": "catalog:", + "react": "catalog:", + "react-dom": "catalog:" }, "dependencies": { "@tabula/ui-button": "workspace:^", "@tabula/ui-data-type-icon": "workspace:^", "clsx": "catalog:", - "date-fns": "^3.6.0", + "date-fns": "^4.1.0", "react-transition-group": "catalog:" } } diff --git a/components/ui-date-picker/src/Calendar/Calendar.tsx b/components/ui-date-picker/src/Calendar/Calendar.tsx index 6b6f8177..08d95ca3 100644 --- a/components/ui-date-picker/src/Calendar/Calendar.tsx +++ b/components/ui-date-picker/src/Calendar/Calendar.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useState } from 'react'; +import { FC, useCallback, useRef, useState } from 'react'; import { clsx } from 'clsx/lite'; import { add, format, setYear, sub } from 'date-fns'; @@ -28,6 +28,7 @@ export const Calendar: FC = ({ className, selected, onSelect }) => { const [shown, setShown] = useState(selected ?? new Date()); const [isYearsVisible, setIsYearsVisible] = useState(false); + const yearsRef = useRef(null); const days = useDaysOfMonth(shown, selected); @@ -57,7 +58,15 @@ export const Calendar: FC = ({ className, selected, onSelect }) => { setIsYearsVisible(false); }, []); - const handleEndListener = useCallback((node: HTMLElement, done: () => void) => { + const handleEndListener = useCallback((done: () => void) => { + const node = yearsRef.current; + + if (node == null) { + done(); + + return; + } + node.addEventListener('transitionend', done, false); }, []); @@ -86,11 +95,13 @@ export const Calendar: FC = ({ className, selected, onSelect }) => { classNames={styles.yearsTransitions} in={isYearsVisible} mountOnEnter + nodeRef={yearsRef} unmountOnExit > void; }>; -export const List: FC = ({ className, from, labelOf, onSelect, selected, to }) => { +export const List = forwardRef(function List( + { className, from, labelOf, onSelect, selected, to }, + forwardedRef, +) { const selectedRef = useRef(null); const handleClick = useCallback( @@ -78,5 +81,9 @@ export const List: FC = ({ className, from, labelOf, onSelect, selected, }); }, []); - return
{items}
; -}; + return ( +
+ {items} +
+ ); +}); diff --git a/components/ui-date-picker/stories/UiDatePicker.stories.mdx b/components/ui-date-picker/stories/UiDatePicker.mdx similarity index 55% rename from components/ui-date-picker/stories/UiDatePicker.stories.mdx rename to components/ui-date-picker/stories/UiDatePicker.mdx index a295d282..850bb5b9 100644 --- a/components/ui-date-picker/stories/UiDatePicker.stories.mdx +++ b/components/ui-date-picker/stories/UiDatePicker.mdx @@ -1,10 +1,8 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { Controls, Canvas, Meta } from '@storybook/addon-docs/blocks'; -import { UiDatePicker } from '~'; +import * as Stories from './UiDatePicker.stories'; -import { DateStory, DateTimeStory, TimeStory } from './UiDatePicker.stories'; - - + # UiDatePicker @@ -14,24 +12,18 @@ The `UiDatePicker` allows to select date, time or both date and time depends on If you provide the `date` value to the `type` property, then only date selection will be available. - - - + ## Time If you provide the `time` value to the `type` property, then only time selection will be available. - - - + ## Date & Time If you provide the `datetime` value to the `type` property, then date and time selection will be available. - - - + - + diff --git a/components/ui-date-picker/stories/UiDatePicker.stories.tsx b/components/ui-date-picker/stories/UiDatePicker.stories.tsx index 07675e3f..976bc445 100644 --- a/components/ui-date-picker/stories/UiDatePicker.stories.tsx +++ b/components/ui-date-picker/stories/UiDatePicker.stories.tsx @@ -27,7 +27,7 @@ const Template: FC = ({ type }) => { }, []); const handleUpdate = useCallback(() => { - setId((current) => (current += 1)); + setId((current) => current + 1); }, []); return ( diff --git a/components/ui-date-picker/tsconfig.forge.json b/components/ui-date-picker/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-date-picker/tsconfig.forge.json +++ b/components/ui-date-picker/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-icon/.forgerc b/components/ui-icon/.forgerc index 7eb3a0a3..0c2a6e7d 100644 --- a/components/ui-icon/.forgerc +++ b/components/ui-icon/.forgerc @@ -1,14 +1,18 @@ { "$schema": "https://github.com/ReTable/forge/blob/main/schemas/forgerc.json", "target": "browser", - "entries": ["dataTypes", "separators"], + "entries": [ + "dataTypes", + "separators" + ], "check": true, "typings": true, "postBuild": [ "mv typings/dataTypes/index.d.ts typings/dataTypes.d.ts", "rm -R typings/dataTypes", "mv typings/separators/index.d.ts typings/separators.d.ts", - "rm -R typings/separators" + "rm -R typings/separators", + "node ../../scripts/convert-forge-output-to-mjs.mjs" ], "build": { "production": true diff --git a/components/ui-icon/CHANGELOG.md b/components/ui-icon/CHANGELOG.md index ceb89c91..b6efd2a8 100644 --- a/components/ui-icon/CHANGELOG.md +++ b/components/ui-icon/CHANGELOG.md @@ -1,5 +1,12 @@ # @tabula/ui-icon +## 8.0.5-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + ## 8.0.4 ### Patch Changes diff --git a/components/ui-icon/package.json b/components/ui-icon/package.json index 5e4b65da..36e0256e 100644 --- a/components/ui-icon/package.json +++ b/components/ui-icon/package.json @@ -1,20 +1,20 @@ { "name": "@tabula/ui-icon", - "version": "8.0.4", + "version": "8.0.5-next.0", "description": "Sets of various icons", "type": "module", "exports": { "./dataTypes": { "types": "./typings/dataTypes.d.ts", - "module": "./lib/dataTypes.js", - "import": "./lib/dataTypes.js", - "default": "./lib/dataTypes.js" + "module": "./lib/dataTypes.mjs", + "import": "./lib/dataTypes.mjs", + "default": "./lib/dataTypes.mjs" }, "./separators": { "types": "./typings/separators.d.ts", - "module": "./lib/separators.js", - "import": "./lib/separators.js", - "default": "./lib/separators.js" + "module": "./lib/separators.mjs", + "import": "./lib/separators.mjs", + "default": "./lib/separators.mjs" }, "./package.json": "./package.json" }, @@ -48,5 +48,8 @@ }, "peerDependencies": { "react": "catalog:" + }, + "devDependencies": { + "react": "catalog:" } } diff --git a/components/ui-icon/stories/DataTypes.stories.mdx b/components/ui-icon/stories/DataTypes.mdx similarity index 67% rename from components/ui-icon/stories/DataTypes.stories.mdx rename to components/ui-icon/stories/DataTypes.mdx index 67e3e6c1..7560120d 100644 --- a/components/ui-icon/stories/DataTypes.stories.mdx +++ b/components/ui-icon/stories/DataTypes.mdx @@ -1,14 +1,19 @@ -import { Canvas, Meta, Source } from '@storybook/blocks'; +import { Canvas, Meta, Source } from '@storybook/addon-docs/blocks'; import { UiStringIcon } from '~/dataTypes'; - +import * as Stories from './DataTypes.stories'; + + # Import - +`} + language="ts" +/> # Default @@ -40,14 +45,14 @@ You can provide `className` property.
- +
diff --git a/components/ui-icon/stories/Separators.stories.mdx b/components/ui-icon/stories/Separators.mdx similarity index 67% rename from components/ui-icon/stories/Separators.stories.mdx rename to components/ui-icon/stories/Separators.mdx index 095afe2d..fcbb0a6f 100644 --- a/components/ui-icon/stories/Separators.stories.mdx +++ b/components/ui-icon/stories/Separators.mdx @@ -1,14 +1,19 @@ -import { Canvas, Meta, Source } from '@storybook/blocks'; +import { Canvas, Meta, Source } from '@storybook/addon-docs/blocks'; import { UiTabIcon } from '~/separators'; - +import * as Stories from './Separators.stories'; + + # Import - +`} + language="ts" +/> # Default @@ -40,14 +45,14 @@ You can provide `className` property.
- +
diff --git a/components/ui-icon/tsconfig.forge.json b/components/ui-icon/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-icon/tsconfig.forge.json +++ b/components/ui-icon/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-json-view/.forgerc.js b/components/ui-json-view/.forgerc.js index e2681b7f..d82a0d37 100644 --- a/components/ui-json-view/.forgerc.js +++ b/components/ui-json-view/.forgerc.js @@ -3,6 +3,7 @@ export default { entry: 'index', check: true, typings: true, + postBuild: 'node ../../scripts/convert-forge-output-to-mjs.mjs', svgrComponentName(name) { return `${name.slice(3)}Icon`; }, diff --git a/components/ui-json-view/CHANGELOG.md b/components/ui-json-view/CHANGELOG.md index 2cbd23d7..6333ce1a 100644 --- a/components/ui-json-view/CHANGELOG.md +++ b/components/ui-json-view/CHANGELOG.md @@ -1,5 +1,17 @@ # @tabula/ui-json-view +## 7.3.4-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/ui-analytics@0.3.3-next.0 + - @tabula/ui-theme@3.3.3-next.0 + - @tabula/use-size@0.2.3-next.0 + ## 7.3.3 ### Patch Changes diff --git a/components/ui-json-view/package.json b/components/ui-json-view/package.json index a2010743..b15e3f95 100644 --- a/components/ui-json-view/package.json +++ b/components/ui-json-view/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-json-view", - "version": "7.3.3", + "version": "7.3.4-next.0", "description": "Allows to view JSON in interactive way", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -49,14 +49,15 @@ "devDependencies": { "@tabula/ui-theme": "workspace:^", "@types/jsonpath": "^0.2.4", - "@types/react-window": "^1.8.8" + "@types/react": "catalog:", + "react": "catalog:" }, "dependencies": { "@tabula/ui-analytics": "workspace:^", "@tabula/use-size": "workspace:^", "@vanilla-extract/dynamic": "catalog:", "clsx": "catalog:", - "jsonpath": "^1.1.1", - "react-window": "^1.8.10" + "jsonpath": "^1.3.0", + "react-window": "^2.2.7" } } diff --git a/components/ui-json-view/src/Copy/Copy.tsx b/components/ui-json-view/src/Copy/Copy.tsx index ab83c3ef..2a64ef2b 100644 --- a/components/ui-json-view/src/Copy/Copy.tsx +++ b/components/ui-json-view/src/Copy/Copy.tsx @@ -1,4 +1,4 @@ -import { FC, MutableRefObject, useRef, useState } from 'react'; +import { FC, RefObject, useRef, useState } from 'react'; import { clsx } from 'clsx/lite'; @@ -28,7 +28,7 @@ export const Copy: FC = ({ }) => { const [isCopied, setIsCopied] = useState(false); - const timerRef: MutableRefObject = useRef(null); + const timerRef: RefObject = useRef(null); const action: ActionFn = (_, query) => { navigator.clipboard diff --git a/components/ui-json-view/src/UiJsonView/hooks/useActionHandler.ts b/components/ui-json-view/src/UiJsonView/hooks/useActionHandler.ts index 1b3868ab..6999f6fb 100644 --- a/components/ui-json-view/src/UiJsonView/hooks/useActionHandler.ts +++ b/components/ui-json-view/src/UiJsonView/hooks/useActionHandler.ts @@ -5,7 +5,7 @@ import jp from 'jsonpath'; import { JsonValue, OnActionFn, QueryFn } from '../../types'; export function useActionHandler(value: JsonValue, isValid: boolean): OnActionFn { - return useMemo(() => { + return useMemo(() => { if (!isValid) { return () => null; } diff --git a/components/ui-json-view/src/VirtualView/VirtualView.tsx b/components/ui-json-view/src/VirtualView/VirtualView.tsx index 6e21c8fe..8768d442 100644 --- a/components/ui-json-view/src/VirtualView/VirtualView.tsx +++ b/components/ui-json-view/src/VirtualView/VirtualView.tsx @@ -1,7 +1,7 @@ -import { ComponentType, useCallback } from 'react'; +import { ReactElement, useCallback, useMemo } from 'react'; import { clsx } from 'clsx/lite'; -import { ListChildComponentProps, VariableSizeList } from 'react-window'; +import { List, RowComponentProps } from 'react-window'; import { useSize } from '@tabula/use-size'; @@ -12,24 +12,26 @@ import { Line } from '../Line'; import { Options } from '../Options'; import { Line as LineType, ViewComponentType } from '../types'; -function itemKey(index: number, lines: LineType[]) { - return lines[index].path; -} +type RowProps = { + lines: LineType[]; +}; -const lineRenderer: ComponentType> = ({ +function lineRenderer({ index, - data, + lines, style, -}) => { - const line = data[index]; +}: RowComponentProps): ReactElement { + const line = lines[index]; return ; -}; +} export const VirtualView: ViewComponentType = ({ className, lines }) => { const [ref, { height }] = useSize(); - const itemSize = useCallback( + const rowProps = useMemo(() => ({ lines }), [lines]); + + const rowHeight = useCallback( (index: number) => { const { isFirst, isLast } = lines[index]; @@ -50,18 +52,15 @@ export const VirtualView: ViewComponentType = ({ className, lines }) => { return (
- + className={list} - height={height} - itemCount={lines.length} - itemData={lines} - itemKey={itemKey} - itemSize={itemSize} + rowComponent={lineRenderer} + rowCount={lines.length} + rowHeight={rowHeight} + rowProps={rowProps} overscanCount={Math.floor(height / itemHeight / 4)} - width="100%" - > - {lineRenderer} - + style={{ height, width: '100%' }} + />
); diff --git a/components/ui-json-view/stories/Options.tsx b/components/ui-json-view/stories/Options.tsx index 22083f48..37281676 100644 --- a/components/ui-json-view/stories/Options.tsx +++ b/components/ui-json-view/stories/Options.tsx @@ -1,4 +1,4 @@ -import { FC, ReactNode, useState } from 'react'; +import { ReactNode, useState } from 'react'; type RendererProps = { showDataTypes: boolean; @@ -14,7 +14,7 @@ type Props = { objectSize?: boolean; }; -export const Options: FC = ({ children, dataTypes, objectSize }) => { +export function Options({ children, dataTypes, objectSize }: Props): ReactNode { const [showDataTypes, setShowDataTypes] = useState(false); const [showObjectSize, setShowObjectSize] = useState(false); @@ -32,4 +32,4 @@ export const Options: FC = ({ children, dataTypes, objectSize }) => { } return children(props); -}; +} diff --git a/components/ui-json-view/stories/UiJsonView.stories.mdx b/components/ui-json-view/stories/UiJsonView.mdx similarity index 77% rename from components/ui-json-view/stories/UiJsonView.stories.mdx rename to components/ui-json-view/stories/UiJsonView.mdx index 130547cc..38cd5a7e 100644 --- a/components/ui-json-view/stories/UiJsonView.stories.mdx +++ b/components/ui-json-view/stories/UiJsonView.mdx @@ -1,13 +1,14 @@ -import { ArgsTable, Canvas, Meta } from '@storybook/blocks'; +import { Controls, Canvas, Meta } from '@storybook/addon-docs/blocks'; import { UiJsonView } from '~'; import { Container } from './Container'; import { Inspect } from './Inspect'; import { Options } from './Options'; +import * as Stories from './UiJsonView.stories'; import { samples } from './samples'; - + # UiJsonView @@ -94,42 +95,42 @@ You can provide handlers to allow toggle `showDataTypes` and `showObjectSize` op {({ onToggleDataTypes, onToggleObjectSize, showDataTypes, showObjectSize }) => ( - - )} + + )} {({ onToggleDataTypes, onToggleObjectSize, showDataTypes, showObjectSize }) => ( - - )} + + )} {({ onToggleDataTypes, onToggleObjectSize, showDataTypes, showObjectSize }) => ( - - )} + + )} @@ -192,18 +193,18 @@ But it's possible to control data types and object size visibility, and toggle t {({ onToggleDataTypes, onToggleObjectSize, showDataTypes, showObjectSize }) => ( - - )} + + )} @@ -233,11 +234,11 @@ For example, here we provide `Inspect` action, which will open an inspection win {({ actions }) => { - return ; - }} + return ; + }} ## Properties - + diff --git a/components/ui-json-view/stories/UiJsonView.stories.tsx b/components/ui-json-view/stories/UiJsonView.stories.tsx index 2a6793ec..b337e8d8 100644 --- a/components/ui-json-view/stories/UiJsonView.stories.tsx +++ b/components/ui-json-view/stories/UiJsonView.stories.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; -import { action } from '@storybook/addon-actions'; +import { action } from 'storybook/actions'; import { StoryObj } from '@storybook/react'; import { Actions, UiJsonView } from '~'; diff --git a/components/ui-json-view/tsconfig.forge.json b/components/ui-json-view/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-json-view/tsconfig.forge.json +++ b/components/ui-json-view/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-layout-view/.forgerc b/components/ui-layout-view/.forgerc index 0146787f..55c7bd8c 100644 --- a/components/ui-layout-view/.forgerc +++ b/components/ui-layout-view/.forgerc @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/components/ui-layout-view/CHANGELOG.md b/components/ui-layout-view/CHANGELOG.md index b4e7f755..ea625d3c 100644 --- a/components/ui-layout-view/CHANGELOG.md +++ b/components/ui-layout-view/CHANGELOG.md @@ -1,5 +1,15 @@ # @tabula/ui-layout-view +## 8.1.3-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/ui-theme@3.3.3-next.0 + ## 8.1.2 ### Patch Changes diff --git a/components/ui-layout-view/package.json b/components/ui-layout-view/package.json index 3aceba28..0e7ffabd 100644 --- a/components/ui-layout-view/package.json +++ b/components/ui-layout-view/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-layout-view", - "version": "8.1.2", + "version": "8.1.3-next.0", "description": "Layout component, that unifies sidebar functionality", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -48,7 +48,10 @@ }, "devDependencies": { "@tabula/ui-theme": "workspace:^", - "@types/react-transition-group": "catalog:" + "@types/react": "catalog:", + "@types/react-transition-group": "catalog:", + "react": "catalog:", + "react-dom": "catalog:" }, "dependencies": { "clsx": "catalog:", diff --git a/components/ui-layout-view/stories/UiLayoutView.mdx b/components/ui-layout-view/stories/UiLayoutView.mdx new file mode 100644 index 00000000..3cbb3548 --- /dev/null +++ b/components/ui-layout-view/stories/UiLayoutView.mdx @@ -0,0 +1,116 @@ +import { Canvas, Meta } from '@storybook/addon-docs/blocks'; + +import { UiLayoutView } from '~'; + +import { body, leftSidebar, rightSidebar, root } from './style.css'; + +import { LayoutContainer } from './LayoutContainer'; +import * as Stories from './UiLayoutView.stories'; + + + +# UiLayoutView + +The `UiLayoutView` component can be used to show collapsible left/right sidebar panels + + + + {({ isLeftSidebarVisible, isRightSidebarVisible }) => ( + 'left sidebar'} + leftSidebarClassName={leftSidebar} + isRightSidebarVisible={isRightSidebarVisible} + rightSidebar={() => 'right sidebar'} + rightSidebarClassName={rightSidebar} + > + body + + )} + + + +## CSS Variables + +We use `react-transition-group` to toggle sidebar panel.
+For controlling behaviour of sidebar's width and animation parameters there are css-variables: + +* `--left-sidebar-width` - px, default is `0px`. **Required, if sidebar exists.** Width of left sidebar. +* `--right-sidebar-width` - px, default is `0px`. **Required, if sidebar exists.** Width of right sidebar. +* `--duration` - ms, default is `duration--moderate--1`. Panel's animation duration. +* `--entrance-easing` - easing, default is `easing--entrance--productive`. Easing of entrance animation. +* `--exit-easing` - easing, default is `easing--exit--productive`. Easing of exit animation. + +## Props + +#### Common + +* `rootClassName` - `string` - style root div-element. Is used to overwrite css-variables +* `bodyClassName` - `string | undefined` - style body div-container +* `children` - `ReactNode` - Content of body panel + +#### Left sidebar + +* `isLeftSidebarVisible` - `boolean` - flag of visibility left panel +* `leftSidebar` - `() => ReactNode` - Content of left sidebar panel +* `leftSidebarClassName` - `string | undefined` - style left sidebar div-container + +#### Right sidebar + +* `isRightSidebarVisible` - `boolean` - flag of visibility right panel +* `rightSidebar` - `() => ReactNode` - Content of right sidebar panel +* `rightSidebarClassName` - `string | undefined` - style right sidebar div-container + +## Variants of usage + +We can use the component to display both sidebars, with one side or no sidebars at all + +#### Only left sidebar + + + + {({ isLeftSidebarVisible }) => ( + 'left sidebar'} + leftSidebarClassName={leftSidebar} + > + body + + )} + + + +#### Only right sidebar + + + + {({ isRightSidebarVisible }) => ( + 'right sidebar'} + rightSidebarClassName={rightSidebar} + > + body + + )} + + + +#### No one sidebar + + + + {() => ( + + body + + )} + + diff --git a/components/ui-layout-view/stories/UiLayoutView.stories.mdx b/components/ui-layout-view/stories/UiLayoutView.stories.mdx deleted file mode 100644 index 7409ae99..00000000 --- a/components/ui-layout-view/stories/UiLayoutView.stories.mdx +++ /dev/null @@ -1,116 +0,0 @@ -import { Canvas, Meta } from '@storybook/blocks'; - -import { UiLayoutView } from '~'; - -import { body, leftSidebar, rightSidebar, root } from './style.css'; - -import { LayoutContainer } from './LayoutContainer'; - - - -# UiLayoutView - -The `UiLayoutView` component can be used to show collapsible left/right sidebar panels - - - - {({ isLeftSidebarVisible, isRightSidebarVisible }) => ( - 'left sidebar'} - leftSidebarClassName={leftSidebar} - isRightSidebarVisible={isRightSidebarVisible} - rightSidebar={() => 'right sidebar'} - rightSidebarClassName={rightSidebar} - > - body - - )} - - - -## CSS Variables - -We use `react-transition-group` to toggle sidebar panel.
-For controlling behaviour of sidebar's width and animation parameters there are css-variables: - -- `--left-sidebar-width` - px, default is `0px`. **Required, if sidebar exists.** Width of left sidebar. -- `--right-sidebar-width` - px, default is `0px`. **Required, if sidebar exists.** Width of right sidebar. -- `--duration` - ms, default is `duration--moderate--1`. Panel's animation duration. -- `--entrance-easing` - easing, default is `easing--entrance--productive`. Easing of entrance animation. -- `--exit-easing` - easing, default is `easing--exit--productive`. Easing of exit animation. - -## Props - -#### Common - -- `rootClassName` - `string` - style root div-element. Is used to overwrite css-variables -- `bodyClassName` - `string | undefined` - style body div-container -- `children` - `ReactNode` - Content of body panel - -#### Left sidebar - -- `isLeftSidebarVisible` - `boolean` - flag of visibility left panel -- `leftSidebar` - `() => ReactNode` - Content of left sidebar panel -- `leftSidebarClassName` - `string | undefined` - style left sidebar div-container - -#### Right sidebar - -- `isRightSidebarVisible` - `boolean` - flag of visibility right panel -- `rightSidebar` - `() => ReactNode` - Content of right sidebar panel -- `rightSidebarClassName` - `string | undefined` - style right sidebar div-container - - -## Variants of usage - -We can use the component to display both sidebars, with one side or no sidebars at all - -#### Only left sidebar - - - - {({ isLeftSidebarVisible }) => ( - 'left sidebar'} - leftSidebarClassName={leftSidebar} - > - body - - )} - - - -#### Only right sidebar - - - - {({ isRightSidebarVisible }) => ( - 'right sidebar'} - rightSidebarClassName={rightSidebar} - > - body - - )} - - - -#### No one sidebar - - - - {() => ( - - body - - )} - - diff --git a/components/ui-layout-view/stories/UiLayoutView.stories.tsx b/components/ui-layout-view/stories/UiLayoutView.stories.tsx new file mode 100644 index 00000000..3a7887d0 --- /dev/null +++ b/components/ui-layout-view/stories/UiLayoutView.stories.tsx @@ -0,0 +1,63 @@ +import { ReactElement } from 'react'; + +import { StoryObj } from '@storybook/react'; + +import { UiLayoutView } from '~'; + +import { LayoutContainer } from './LayoutContainer'; +import { body, leftSidebar, rightSidebar, root } from './style.css'; + +type SidebarState = { + isLeftSidebarVisible: boolean; + isRightSidebarVisible: boolean; +}; + +export default { + component: UiLayoutView, + + title: 'UiLayoutView', +}; + +type Story = StoryObj; + +function renderLeftSidebar(): string { + return 'left sidebar'; +} + +function renderRightSidebar(): string { + return 'right sidebar'; +} + +function renderBothSidebars({ + isLeftSidebarVisible, + isRightSidebarVisible, +}: SidebarState): ReactElement { + return ( + + body + + ); +} + +function BothSidebarsView(): ReactElement { + return ( + + {renderBothSidebars} + + ); +} + +export const BothSidebars: Story = { + render() { + return ; + }, +}; diff --git a/components/ui-layout-view/tsconfig.forge.json b/components/ui-layout-view/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-layout-view/tsconfig.forge.json +++ b/components/ui-layout-view/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-menu/.forgerc b/components/ui-menu/.forgerc index 0146787f..55c7bd8c 100644 --- a/components/ui-menu/.forgerc +++ b/components/ui-menu/.forgerc @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/components/ui-menu/CHANGELOG.md b/components/ui-menu/CHANGELOG.md index 104c02ff..cba19029 100644 --- a/components/ui-menu/CHANGELOG.md +++ b/components/ui-menu/CHANGELOG.md @@ -1,5 +1,17 @@ # @tabula/ui-menu +## 1.2.3-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/dom-utils@0.1.1-next.0 + - @tabula/ui-theme@3.3.3-next.0 + - @tabula/use-flag@0.1.1-next.0 + ## 1.2.2 ### Patch Changes diff --git a/components/ui-menu/package.json b/components/ui-menu/package.json index fbc9d92e..f6838bb9 100644 --- a/components/ui-menu/package.json +++ b/components/ui-menu/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-menu", - "version": "1.2.2", + "version": "1.2.3-next.0", "description": "Menus display a list of actions or options that a user can choose", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -47,7 +47,8 @@ "react": "catalog:" }, "devDependencies": { - "@tabula/ui-theme": "workspace:^" + "@tabula/ui-theme": "workspace:^", + "react": "catalog:" }, "dependencies": { "@floating-ui/react": "catalog:", diff --git a/components/ui-menu/tsconfig.forge.json b/components/ui-menu/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-menu/tsconfig.forge.json +++ b/components/ui-menu/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-multi-selector/.forgerc b/components/ui-multi-selector/.forgerc index 0146787f..55c7bd8c 100644 --- a/components/ui-multi-selector/.forgerc +++ b/components/ui-multi-selector/.forgerc @@ -10,5 +10,6 @@ "watch": { "production": false, "storybook": true - } + }, + "postBuild": "node ../../scripts/convert-forge-output-to-mjs.mjs" } diff --git a/components/ui-multi-selector/CHANGELOG.md b/components/ui-multi-selector/CHANGELOG.md index fbee0a87..8e8cece1 100644 --- a/components/ui-multi-selector/CHANGELOG.md +++ b/components/ui-multi-selector/CHANGELOG.md @@ -1,5 +1,17 @@ # @tabula/ui-multi-selector +## 1.1.3-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/ui-tag@0.1.3-next.0 + - @tabula/ui-theme@3.3.3-next.0 + - @tabula/use-flag@0.1.1-next.0 + ## 1.1.2 ### Patch Changes diff --git a/components/ui-multi-selector/package.json b/components/ui-multi-selector/package.json index 394f9946..76d29204 100644 --- a/components/ui-multi-selector/package.json +++ b/components/ui-multi-selector/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-multi-selector", - "version": "1.1.2", + "version": "1.1.3-next.0", "description": "A MultiSelector allows users to select one or more items from a list of choices, or suggest own item.", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -48,7 +48,8 @@ }, "devDependencies": { "@tabula/ui-data-type-icon": "workspace:^", - "@tabula/ui-theme": "workspace:^" + "@tabula/ui-theme": "workspace:^", + "react": "catalog:" }, "dependencies": { "@floating-ui/react": "catalog:", diff --git a/components/ui-multi-selector/src/Dropdown/hooks/useController.ts b/components/ui-multi-selector/src/Dropdown/hooks/useController.ts index e615d40b..a1b7ddf3 100644 --- a/components/ui-multi-selector/src/Dropdown/hooks/useController.ts +++ b/components/ui-multi-selector/src/Dropdown/hooks/useController.ts @@ -24,8 +24,8 @@ type Result = { onMouseEnter: () => void; onMouseLeave: () => void; - rootRef: RefObject; - currentRef: RefObject; + rootRef: RefObject; + currentRef: RefObject; }; export function useController( diff --git a/components/ui-multi-selector/src/Tags/Tags.tsx b/components/ui-multi-selector/src/Tags/Tags.tsx index 98e6c9de..0549e89e 100644 --- a/components/ui-multi-selector/src/Tags/Tags.tsx +++ b/components/ui-multi-selector/src/Tags/Tags.tsx @@ -36,7 +36,7 @@ export function Tags({ {isNotEmpty && !isDisabled && }
- {tags.map((it) => renderTag(styles.tag, it))} + {tags.map((it): ReactNode => renderTag(styles.tag, it))} {children}
diff --git a/components/ui-multi-selector/src/UiMultiSelector/hooks/useDropdown.ts b/components/ui-multi-selector/src/UiMultiSelector/hooks/useDropdown.ts index b636f994..6907ea44 100644 --- a/components/ui-multi-selector/src/UiMultiSelector/hooks/useDropdown.ts +++ b/components/ui-multi-selector/src/UiMultiSelector/hooks/useDropdown.ts @@ -21,7 +21,7 @@ type Result = { context: FloatingContext; - dropdownRef: RefObject; + dropdownRef: RefObject; floatingRef: Ref; referenceRef: Ref; diff --git a/components/ui-multi-selector/src/UiMultiSelector/hooks/useSearch.ts b/components/ui-multi-selector/src/UiMultiSelector/hooks/useSearch.ts index 8cf9c962..49315bf6 100644 --- a/components/ui-multi-selector/src/UiMultiSelector/hooks/useSearch.ts +++ b/components/ui-multi-selector/src/UiMultiSelector/hooks/useSearch.ts @@ -7,7 +7,7 @@ type Result = { onSearch: SearchHandler; search: string; searchId: string; - searchRef: RefObject; + searchRef: RefObject; }; export function useSearch(isDisabled?: boolean, onAutocomplete?: SearchHandler): Result { diff --git a/components/ui-multi-selector/stories/UiMultiSelector.stories.tsx b/components/ui-multi-selector/stories/UiMultiSelector.stories.tsx index f08da7b5..62130e8c 100644 --- a/components/ui-multi-selector/stories/UiMultiSelector.stories.tsx +++ b/components/ui-multi-selector/stories/UiMultiSelector.stories.tsx @@ -1,6 +1,6 @@ import { useMemo, useState } from 'react'; -import { action } from '@storybook/addon-actions'; +import { action } from 'storybook/actions'; import { Meta, StoryObj } from '@storybook/react'; import * as icons from '@tabula/ui-data-type-icon'; diff --git a/components/ui-multi-selector/tsconfig.forge.json b/components/ui-multi-selector/tsconfig.forge.json index f48f8e4d..f0dad8fd 100644 --- a/components/ui-multi-selector/tsconfig.forge.json +++ b/components/ui-multi-selector/tsconfig.forge.json @@ -1,5 +1,9 @@ { "extends": "./tsconfig.json", - - "include": ["src"] + "include": [ + "src" + ], + "compilerOptions": { + "rootDir": "./src" + } } diff --git a/components/ui-node-icon/.forgerc.js b/components/ui-node-icon/.forgerc.js index 288d00b0..3b956dc3 100644 --- a/components/ui-node-icon/.forgerc.js +++ b/components/ui-node-icon/.forgerc.js @@ -3,6 +3,7 @@ export default { entry: 'index', check: true, typings: true, + postBuild: 'node ../../scripts/convert-forge-output-to-mjs.mjs', svgrComponentName(name) { if (name.endsWith('small')) { return `Ui${name.slice(3, -5)}SIcon`; diff --git a/components/ui-node-icon/CHANGELOG.md b/components/ui-node-icon/CHANGELOG.md index e90d30d4..2b1da94c 100644 --- a/components/ui-node-icon/CHANGELOG.md +++ b/components/ui-node-icon/CHANGELOG.md @@ -1,5 +1,15 @@ # @tabula/ui-node-icon +## 12.0.1-next.0 +### Patch Changes + + + +- Publish next prerelease packages for validation. + +- Updated dependencies []: + - @tabula/ui-theme@3.3.3-next.0 + ## 12.0.0 ### Major Changes diff --git a/components/ui-node-icon/package.json b/components/ui-node-icon/package.json index e6071a2c..1901a8ec 100644 --- a/components/ui-node-icon/package.json +++ b/components/ui-node-icon/package.json @@ -1,15 +1,15 @@ { "name": "@tabula/ui-node-icon", - "version": "12.0.0", + "version": "12.0.1-next.0", "description": "Icons for nodes", "type": "module", "typings": "./typings/index.d.ts", "exports": { ".": { "types": "./typings/index.d.ts", - "module": "./lib/index.js", - "import": "./lib/index.js", - "default": "./lib/index.js" + "module": "./lib/index.mjs", + "import": "./lib/index.mjs", + "default": "./lib/index.mjs" }, "./package.json": "./package.json" }, @@ -48,7 +48,8 @@ "react": "catalog:" }, "devDependencies": { - "@tabula/ui-theme": "workspace:^" + "@tabula/ui-theme": "workspace:^", + "react": "catalog:" }, "dependencies": { "clsx": "catalog:" diff --git a/components/ui-node-icon/stories/AllIcons.mdx b/components/ui-node-icon/stories/AllIcons.mdx new file mode 100644 index 00000000..43a5ad33 --- /dev/null +++ b/components/ui-node-icon/stories/AllIcons.mdx @@ -0,0 +1,12 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + +import { IconsTable } from './IconsTable'; +import * as Stories from './AllIcons.stories'; + + + +# All icons + +The table with all available icons is below: + + diff --git a/components/ui-node-icon/stories/AllIcons.stories.mdx b/components/ui-node-icon/stories/AllIcons.stories.mdx deleted file mode 100644 index 94c45eaa..00000000 --- a/components/ui-node-icon/stories/AllIcons.stories.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/blocks'; - -import { IconsTable } from './IconsTable'; - - - -# All icons - -The table with all available icons is below: - - diff --git a/components/ui-node-icon/stories/AllIcons.stories.tsx b/components/ui-node-icon/stories/AllIcons.stories.tsx new file mode 100644 index 00000000..5c3cf8f1 --- /dev/null +++ b/components/ui-node-icon/stories/AllIcons.stories.tsx @@ -0,0 +1,19 @@ +import { ReactElement } from 'react'; + +import { StoryObj } from '@storybook/react'; + +import { IconsTable } from './IconsTable'; + +export default { + component: IconsTable, + + title: 'All icons', +}; + +type Story = StoryObj; + +export const Icons: Story = { + render(): ReactElement { + return ; + }, +}; diff --git a/components/ui-node-icon/stories/Large.stories.mdx b/components/ui-node-icon/stories/Large.mdx similarity index 68% rename from components/ui-node-icon/stories/Large.stories.mdx rename to components/ui-node-icon/stories/Large.mdx index ee769d79..e5c79ac3 100644 --- a/components/ui-node-icon/stories/Large.stories.mdx +++ b/components/ui-node-icon/stories/Large.mdx @@ -1,24 +1,32 @@ -import { Canvas, Meta, Source } from '@storybook/blocks'; +import { Canvas, Meta, Source } from '@storybook/addon-docs/blocks'; import { UiInnerJoinLIcon } from '~'; - +import * as Stories from './Large.stories'; + + # Import You can import a single icon the following way: - +`} + language="ts" +/> Or you can import all icons another way: - ; -`} language="tsx"/> +`} + language="tsx" +/> # Default @@ -50,14 +58,14 @@ You can provide `className` property.
- +
@@ -81,16 +89,16 @@ For example, if an icon located inside disabled control, then an icon will have