chore: fix stories in errors (#4942)

* chore: remove stories around code that do not exists * chore: fix RHF/Select/Valdation error * fix: storybook * Add style for icons in storybook one to be able to use it in chromatic * Fix Icon stories * fix: story * fix customValidation * Fix call to ToggleSwitch --------- Co-authored-by: Sebastien LE MOUILLOUR <[email protected]> Co-authored-by: smouillour <[email protected]>
Talend · Oct 20, 2023 · 35263df · 35263df
1 parent e83b74b
commit 35263df
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 115 deletions.
diff --git a/.changeset/small-kiwis-end.md b/.changeset/small-kiwis-end.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-storybook-lib': patch
+---
+
+fix: icon url to support prefix
diff --git a/packages/components/src/Toggle/Toggle.stories.js b/packages/components/src/Toggle/Toggle.stories.js
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
 import { action } from '@storybook/addon-actions';
 
 import Toggle from './Toggle.component';
@@ -31,33 +29,6 @@ const withLabel = {
 	label: 'Some label',
 };
 
-const labelToggleProps = {
-	values: [
-		{ value: 'val1', label: 'Value 1' },
-		{ value: 'val2', label: 'Value 2' },
-		{ value: 'val3', label: 'Value 3' },
-	],
-};
-
-const InteractiveLabelToggle = ({ defaultValue = '', name, autoFocus }) => {
-	const [value, setValue] = useState(defaultValue);
-
-	return (
-		<Toggle.Label
-			{...labelToggleProps}
-			value={value}
-			onChange={setValue}
-			name={name}
-			autoFocus={autoFocus}
-		/>
-	);
-};
-InteractiveLabelToggle.propTypes = {
-	defaultValue: PropTypes.string,
-	autoFocus: PropTypes.bool,
-	name: PropTypes.string.isRequired,
-};
-
 export default {
 	title: 'Components/Form - Controls/Toggle',
 };
@@ -89,35 +60,3 @@ export const Default = () => (
 		</form>
 	</div>
 );
-
-export const LabelToggle = () => (
-	<div>
-		<h1>Label Toggle</h1>
-		<form>
-			<h3>Non interactive two states</h3>
-			<Toggle.Label
-				name="toggle1"
-				values={[
-					{ value: 'basic', label: 'Basic' },
-					{ value: 'advanced', label: 'Advanced' },
-				]}
-				value="advanced"
-				onChange={onChange}
-			/>
-			<h3>Interactive</h3>
-			<InteractiveLabelToggle name="toggle2" />
-			<h3>Interactive autofocused</h3>
-			<InteractiveLabelToggle name="toggle3" autoFocus />
-			<h3>Interactive with default selected value</h3>
-			<InteractiveLabelToggle defaultValue="val3" name="toggle4" />
-			<h3>Disabled with selected value</h3>
-			<Toggle.Label
-				{...labelToggleProps}
-				value="val2"
-				disabled
-				name="toggle5"
-				onChange={onChange}
-			/>
-		</form>
-	</div>
-);
diff --git a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { Form, ToggleSwitch } from '@talend/design-system';
+import { Form } from '@talend/design-system';
 import { getTheme } from '@talend/react-components/lib/theme';
 
 import { FACETED_MODE, USAGE_TRACKING_TAGS } from '../../constants';
@@ -11,7 +11,7 @@ const theme = getTheme(cssModule);
 
 const SwitchFacetedMode = ({ facetedMode, onChange, t }) => (
 	<Form className={theme('tc-faceted-switch-mode')}>
-		<ToggleSwitch
+		<Form.ToggleSwitch
 			label={t('FACETED_SEARCH_QUERY', 'Query')}
 			checked={facetedMode === FACETED_MODE.ADVANCED}
 			onChange={() =>

diff --git a/packages/forms/src/rhf/fields/Select/Select.stories.js b/packages/forms/src/rhf/fields/Select/Select.stories.js
@@ -104,7 +104,13 @@ export const Validation = props => {
 
 				<Select
 					id="notBlue"
-					{...props}
+					name="notBlue"
+					label="Not blue"
+					placeholde="Select a color"
+					options={[
+						{ value: 'blue', name: 'Blue color' },
+						{ value: 'red', name: 'Red color' },
+					]}
 					rules={{
 						validate(value) {
 							return value === 'blue' ? 'This should not be blue' : null;
@@ -122,8 +128,8 @@ export const Validation = props => {
 };
 
 Validation.args = {
+	...States.args,
 	name: 'required',
 	label: 'Required',
 	required: true,
-	options: States.args.options,
 };
diff --git a/packages/forms/stories/SchemaCore.stories.tsx b/packages/forms/stories/SchemaCore.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { UIForm } from '../src';
 import { concepts } from './json';
 import { argTypes } from './argTypes';
@@ -18,6 +19,10 @@ export const ConditionalRender = {
 export const CustomValidation = {
 	args: {
 		data: concepts.customValidation,
+		CustomValidation: (schema: any, value: any, properties: any) => {
+			action('customValidation')(schema, value, properties);
+			return value.length >= 5 && 'Custom validation : The value should be less than 5 chars';
+		},
 	},
 };
 export const FormatValidation = {

diff --git a/packages/forms/stories/SchemaFields.stories.tsx b/packages/forms/stories/SchemaFields.stories.tsx
@@ -154,6 +154,7 @@ export const CoreRadios = {
 		data: fields.coreRadios,
 	},
 };
+
 export const CoreResourcePicker = {
 	parameters: {
 		formStoryDisplayMode: {
@@ -162,6 +163,63 @@ export const CoreResourcePicker = {
 	},
 	args: {
 		data: fields.coreResourcePicker,
+		onTrigger: () =>
+			new Promise(resolve => {
+				setTimeout(
+					() =>
+						resolve({
+							collection: [
+								{
+									id: '0',
+									name: 'Title with few actions',
+									modified: 1442880000000,
+									icon: 'talend-file-xls-o',
+									author: 'First Author',
+									flags: ['CERTIFIED', 'FAVORITE'],
+								},
+								{
+									id: '1',
+									name: 'Title with lot of actions',
+									modified: 1537574400000,
+									icon: 'talend-file-xls-o',
+									author: 'Second Author',
+								},
+								{
+									id: '2',
+									name: 'Title with persistant actions',
+									modified: 1474502400000,
+									author: 'Jean-Pierre DUPONT',
+									icon: 'talend-file-xls-o',
+									flags: ['FAVORITE'],
+								},
+								{
+									id: '3',
+									name: 'Title with icon',
+									modified: 1506038400000,
+									author: 'Third Author',
+									icon: 'talend-file-xls-o',
+									flags: ['CERTIFIED'],
+								},
+								{
+									id: '4',
+									name: 'Title in input mode',
+									modified: 1506038400000,
+									author: 'Jean-Pierre DUPONT',
+									icon: 'talend-file-xls-o',
+								},
+								{
+									id: '5',
+									name: 'Title with long long long long long long long long long long long text',
+									modified: 1547478328552,
+									author: 'Jean-Pierre DUPONT with super super super long text',
+									icon: 'talend-file-xls-o',
+									flags: ['CERTIFIED', 'FAVORITE'],
+								},
+							],
+						}),
+					3000,
+				);
+			}),
 	},
 };
 export const CoreSelect = {

diff --git a/packages/icons/.storybook/preview-head.html b/packages/icons/.storybook/preview-head.html
diff --git a/packages/icons/stories/Icon.stories.tsx b/packages/icons/stories/Icon.stories.tsx
@@ -1,4 +1,4 @@
-import Icon from './Icon';
+import Icon, { StyleIcon } from './Icon';
 import { info as icons } from '../dist/info';
 
 export default {
@@ -23,21 +23,24 @@ export const Usage = {
 export const All = props => {
 	const names = Object.keys(icons);
 	return (
-		<div style={{ display: 'flex', flexWrap: 'wrap' }}>
-			{names.map(name => (
-				<div
-					key={name}
-					style={{
-						display: 'flex',
-						flexDirection: 'column',
-						alignItems: 'center',
-						margin: '1rem',
-					}}
-				>
-					<Icon name={name} />
-					<span style={{ fontSize: '2rem' }}>{name}</span>
-				</div>
-			))}
+		<div>
+			<StyleIcon />
+			<div style={{ display: 'flex', flexWrap: 'wrap' }}>
+				{names.map(name => (
+					<div
+						key={name}
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'center',
+							margin: '1rem',
+						}}
+					>
+						<Icon name={name} />
+						<span style={{ fontSize: '2rem' }}>{name}</span>
+					</div>
+				))}
+			</div>
 		</div>
 	);
 };
diff --git a/packages/icons/stories/Icon.tsx b/packages/icons/stories/Icon.tsx
@@ -373,6 +373,30 @@ const Icon = ({ name, size }: { name: string; size?: keyof typeof iconSizes }) =
 	);
 };
 
+export const StyleIcon = () => (
+	<style>
+		{`
+			svg {
+				max-width: 2.4rem;
+				max-height: 2.4rem;
+			}
+			svg path {
+				shape-rendering: geometricPrecision;
+			}
+			.colormapping > svg {
+				filter: url(#colormapping);
+			}
+			.grayscale > svg {
+				filter: url(#talend-grayscale);
+			}
+			.colormapping:hover > svg,
+			.grayscale:hover > svg {
+				filter: none;
+			}
+		`}
+	</style>
+);
+
 Icon.displayName = 'Icon';
 
 export default Icon;
diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
@@ -96,11 +96,11 @@ const defaultPreview = {
 				React.createElement(IconsProvider, {
 					key: 'icons-provider-decorator',
 					bundles: [
-						'/all.svg',
-						'/XS.svg',
-						'/S.svg',
-						'/M.svg',
-						'/L.svg',
+						'all.svg',
+						'XS.svg',
+						'S.svg',
+						'M.svg',
+						'L.svg',
 					]
 				}),
 				React.createElement(ToggleBootstrap, {