diff --git a/.storybook/vite.config.ts b/.storybook/vite.config.ts index 85b2ce8ab7..2959fcd3c0 100644 --- a/.storybook/vite.config.ts +++ b/.storybook/vite.config.ts @@ -131,11 +131,11 @@ export const defaultConfig: UserConfigExport = { // UI - compositions (must come before base alias) { find: /^@ultraviolet\/ui\/compositions\/(.*)/, - replacement: resolve('packages/ui/src/components/compositions/$1'), + replacement: resolve('packages/ui/src/compositions/$1'), }, { find: '@ultraviolet/ui/compositions', - replacement: resolve('packages/ui/src/components/compositions'), + replacement: resolve('packages/ui/src/compositions'), }, // UI - base alias @@ -147,13 +147,11 @@ export const defaultConfig: UserConfigExport = { // Form - compositions (must come before base alias) { find: /^@ultraviolet\/form\/compositions\/(.*)/, - replacement: resolve( - 'packages/form/src/components/compositions/$1.tsx', - ), + replacement: resolve('packages/form/src/compositions/$1.tsx'), }, { find: '@ultraviolet/form/compositions', - replacement: resolve('packages/form/src/components/compositions'), + replacement: resolve('packages/form/src/compositions'), }, // Form - base alias diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 9c4ff5e9cc..25fe7ffa73 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -7,19 +7,66 @@ import { Stack, Text, ThemeProvider, + Badge, + SelectableCardOptionGroup, } from '@ultraviolet/ui' +import { InfoTable } from '@ultraviolet/ui/compositions/InfoTable' import { useState } from 'react' import '@ultraviolet/ui/styles' // Import styles for the UI components // import '@ultraviolet/icons/styles' // Import styles for the UI components import '@ultraviolet/themes/global' +import centos from './assets/centos.svg' +import debian from './assets/debian.svg' +import ubuntu from './assets/ubuntu.svg' +import { centosOptions, debianOptions, ubuntuOptions } from './constants' export const App = () => { const [count, setCount] = useState(0) const [darkMode, setDarkMode] = useState(false) + const [value, onChange] = useState() + const [option, onChangeOption] = useState() return ( - + + + test + + + + Coucou + + + ) => { + console.log('ok') + onChange(event.currentTarget.value) + }} + onChangeOption={(newValue: string) => { + onChangeOption(newValue) + }} + optionValue={option} + value={value} + > + + + + Classic diff --git a/examples/vite/src/assets/centos.svg b/examples/vite/src/assets/centos.svg new file mode 100644 index 0000000000..92cb5b3869 --- /dev/null +++ b/examples/vite/src/assets/centos.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/examples/vite/src/assets/debian.svg b/examples/vite/src/assets/debian.svg new file mode 100644 index 0000000000..4a300e588d --- /dev/null +++ b/examples/vite/src/assets/debian.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/examples/vite/src/assets/mysql.svg b/examples/vite/src/assets/mysql.svg new file mode 100644 index 0000000000..1aa0281a86 --- /dev/null +++ b/examples/vite/src/assets/mysql.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + diff --git a/examples/vite/src/assets/postgresql.svg b/examples/vite/src/assets/postgresql.svg new file mode 100644 index 0000000000..8666f75c1d --- /dev/null +++ b/examples/vite/src/assets/postgresql.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/vite/src/assets/ubuntu.svg b/examples/vite/src/assets/ubuntu.svg new file mode 100644 index 0000000000..50679b4a2c --- /dev/null +++ b/examples/vite/src/assets/ubuntu.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/examples/vite/src/constants.tsx b/examples/vite/src/constants.tsx new file mode 100644 index 0000000000..76ab3bb1fe --- /dev/null +++ b/examples/vite/src/constants.tsx @@ -0,0 +1,78 @@ +import { Badge, SelectInput } from '@ultraviolet/ui' + +import type { ComponentProps } from 'react' + +export const mysqlOptions: ComponentProps['options'] = [ + { + label: 'MySQL 8.0', + value: 'mysql-8.0', + }, + { + label: 'MySQL 5.7', + value: 'mysql-5.7', + }, +] + +export const postgresqlOptions: ComponentProps['options'] = + [ + { + label: 'PostgreSQL 13', + value: 'postgresql-13', + }, + { + label: 'PostgreSQL 12', + value: 'postgresql-12', + }, + ] + +export const ubuntuOptions: ComponentProps['options'] = [ + { + label: 'Ubuntu 20.04 Focal Fossa', + value: 'ubuntu-20.04', + }, + { + label: 'Ubuntu 18.04 LTS', + value: 'ubuntu-18.04', + }, +] + +export const ubuntuOptionsLegacy: ComponentProps< + typeof SelectInput +>['options'] = [ + { + label: 'Ubuntu 20.04 Focal Fossa', + value: 'ubuntu-20.04', + }, + { + description: 'This version is legacy please choose a higher version.', + label: 'Ubuntu 18.04 LTS', + optionalInfo: ( + + Legacy + + ), + value: 'ubuntu-18.04', + }, +] + +export const debianOptions: ComponentProps['options'] = [ + { + label: 'Debian 10', + value: 'debian-10', + }, + { + label: 'Debian 9', + value: 'debian-9', + }, +] + +export const centosOptions: ComponentProps['options'] = [ + { + label: 'CentOS 8', + value: 'centos-8', + }, + { + label: 'CentOS 7', + value: 'centos-7', + }, +] diff --git a/packages/form/package.json b/packages/form/package.json index ba7f6a2017..f4835d82a8 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -30,9 +30,9 @@ "default": "./dist/index.js" }, "./compositions/*": { - "types": "./dist/components/compositions/*/index.d.ts", - "require": "./dist/components/compositions/*/index.js", - "default": "./dist/components/compositions/*/index.js" + "types": "./dist/compositions/*/index.d.ts", + "require": "./dist/compositions/*/index.js", + "default": "./dist/compositions/*/index.js" } }, "publishConfig": { diff --git a/packages/form/src/composition.ts b/packages/form/src/composition.ts new file mode 100644 index 0000000000..b002f49b88 --- /dev/null +++ b/packages/form/src/composition.ts @@ -0,0 +1 @@ +export * from './compositions' diff --git a/packages/form/src/components/compositions/CodeEditorField/__stories__/Playground.stories.tsx b/packages/form/src/compositions/CodeEditorField/__stories__/Playground.stories.tsx similarity index 100% rename from packages/form/src/components/compositions/CodeEditorField/__stories__/Playground.stories.tsx rename to packages/form/src/compositions/CodeEditorField/__stories__/Playground.stories.tsx diff --git a/packages/form/src/components/compositions/CodeEditorField/__stories__/Required.stories.tsx b/packages/form/src/compositions/CodeEditorField/__stories__/Required.stories.tsx similarity index 90% rename from packages/form/src/components/compositions/CodeEditorField/__stories__/Required.stories.tsx rename to packages/form/src/compositions/CodeEditorField/__stories__/Required.stories.tsx index 7c16600de4..f7ae424b3c 100644 --- a/packages/form/src/components/compositions/CodeEditorField/__stories__/Required.stories.tsx +++ b/packages/form/src/compositions/CodeEditorField/__stories__/Required.stories.tsx @@ -1,7 +1,7 @@ import { Stack } from '@ultraviolet/ui' import { CodeEditorField } from '..' -import { Submit } from '../../../Submit' +import { Submit } from '../../../components/Submit' import type { StoryFn } from '@storybook/react-vite' import type { ComponentProps } from 'react' diff --git a/packages/form/src/components/compositions/CodeEditorField/__stories__/Template.stories.tsx b/packages/form/src/compositions/CodeEditorField/__stories__/Template.stories.tsx similarity index 100% rename from packages/form/src/components/compositions/CodeEditorField/__stories__/Template.stories.tsx rename to packages/form/src/compositions/CodeEditorField/__stories__/Template.stories.tsx diff --git a/packages/form/src/components/compositions/CodeEditorField/__stories__/index.stories.tsx b/packages/form/src/compositions/CodeEditorField/__stories__/index.stories.tsx similarity index 94% rename from packages/form/src/components/compositions/CodeEditorField/__stories__/index.stories.tsx rename to packages/form/src/compositions/CodeEditorField/__stories__/index.stories.tsx index eadbc29376..aa0a2d2947 100644 --- a/packages/form/src/components/compositions/CodeEditorField/__stories__/index.stories.tsx +++ b/packages/form/src/compositions/CodeEditorField/__stories__/index.stories.tsx @@ -1,9 +1,8 @@ import { Snippet, Stack, Text } from '@ultraviolet/ui' import { CodeEditorField } from '..' -import { Form } from '../../..' -import { useForm } from '../../../..' -import { mockErrors } from '../../../../mocks' +import { Form, useForm } from '../../..' +import { mockErrors } from '../../../mocks' import type { Meta } from '@storybook/react-vite' diff --git a/packages/form/src/components/compositions/CodeEditorField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/compositions/CodeEditorField/__tests__/__snapshots__/index.test.tsx.snap similarity index 95% rename from packages/form/src/components/compositions/CodeEditorField/__tests__/__snapshots__/index.test.tsx.snap rename to packages/form/src/compositions/CodeEditorField/__tests__/__snapshots__/index.test.tsx.snap index 0652f531f4..a4270869fe 100644 --- a/packages/form/src/components/compositions/CodeEditorField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/compositions/CodeEditorField/__tests__/__snapshots__/index.test.tsx.snap @@ -16,11 +16,11 @@ exports[`optionSelectorField > should render correctly 1`] = ` class="uv_toi52u0 uv_toi52u2d uv_toi52u5j" >
should render correctly disabled 1`] = ` class="uv_toi52u0 uv_toi52u2d uv_toi52u3p" >
renders correctly 1`] = ` class="uv_toi52u0 uv_toi52u2j uv_toi52u77" >