mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): Upgrade Storybook to 8.0 (no-changelog) (#8867)

Browse Source
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™
2024-03-13 16:52:29 +01:00
committed by GitHub
parent 948c383999
commit 572af38383
32 changed files with 1826 additions and 3589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js → packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts
View File

@@ -1,7 +1,14 @@
import { action } from '@storybook/addon-actions';
import { type StoryFn } from '@storybook/vue3';
import { type ActionOptions, action } from '@storybook/addon-actions';
import N8nResizeWrapper from './ResizeWrapper.vue';
import { ref } from 'vue';
// TODO: remove this after converting ResizeWrapper to composition API
interface ResizeData extends ActionOptions {
height: number;
width: number;
}
export default {
title: 'Atoms/ResizeWrapper',
component: N8nResizeWrapper,
@@ -13,12 +20,12 @@ const methods = {
onResizeStart: action('resizestart'),
};
const Template = (args, { argTypes }) => ({
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => {
const newWidth = ref(args.width);
const newHeight = ref(args.height);
function onResize(resizeData) {
function onResize(resizeData: ResizeData) {
action('resize', resizeData);
newHeight.value = resizeData.height;
newWidth.value = resizeData.width;

0
packages/design-system/src/components/N8nResizeWrapper/index.js → packages/design-system/src/components/N8nResizeWrapper/index.ts
View File

0
packages/design-system/src/components/N8nSticky/index.js → packages/design-system/src/components/N8nSticky/index.ts
View File

7
packages/design-system/src/docs/Introduction.stories.mdx
View File

@@ -1,7 +0,0 @@
import { Meta } from '@storybook/addon-docs';
<Meta title="Docs/Introduction" />
# Welcome to n8n Storybook
This project includes components that make up n8n editor.

49
packages/design-system/src/styleguide/border.stories.mdx
View File

@@ -1,49 +0,0 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import VariableTable from './VariableTable.vue';
<Meta
title="Styleguide/Border"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
},
}}
/>
# Border Radius
<Canvas>
<Story name="border-radius">
{{
template: `<variable-table :variables="['--border-radius-small','--border-radius-base', '--border-radius-large', '--border-radius-xlarge']" />`,
components: {
VariableTable,
},
}}
</Story>
</Canvas>
# Border Width
<Canvas>
<Story name="border-width">
{{
template: `<variable-table :variables="['--border-width-base']" />`,
components: {
VariableTable,
},
}}
</Story>
</Canvas>
<Canvas>
<Story name="border-style">
{{
template: `<variable-table :variables="['--border-style-base']" />`,
components: {
VariableTable,
},
}}
</Story>
</Canvas>

29
packages/design-system/src/styleguide/border.stories.ts Normal file
View File

@@ -0,0 +1,29 @@
import { type StoryFn } from '@storybook/vue3';
import VariableTable from './VariableTable.vue';
export default {
title: 'Styleguide/Border',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
},
},
};
const Template =
(template: string): StoryFn =>
() => ({
components: {
VariableTable,
},
template,
});
export const BorderRadius = Template(
"<variable-table :variables=\"['--border-radius-small','--border-radius-base', '--border-radius-large', '--border-radius-xlarge']\" />",
);
export const BorderWidth = Template('<variable-table :variables="[\'--border-width-base\']" />');
export const BorderStyle = Template('<variable-table :variables="[\'--border-style-base\']" />');

118
packages/design-system/src/styleguide/colors.stories.mdx
View File

@@ -1,118 +0,0 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import ColorCircles from './ColorCircles.vue';
<Meta
title="Styleguide/Colors Tokens"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
},
}}
/>
# Colors
## Primary
<Canvas>
<Story name="primary">
{{
template: `<color-circles :colors="['--color-primary-shade-1', '--color-primary', '--color-primary-tint-1', '--color-primary-tint-2', '--color-primary-tint-3']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Secondary
<Canvas>
<Story name="secondary">
{{
template: `<color-circles :colors="['--color-secondary-shade-1', '--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-3']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Success
<Canvas>
<Story name="success">
{{
template: `<color-circles :colors="['--color-success-shade-1', '--color-success', '--color-success-light', '--color-success-light-2', '--color-success-tint-1', '--color-success-tint-2']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Warning
<Canvas>
<Story name="warning">
{{
template: `<color-circles :colors="['--color-warning-shade-1', '--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Danger
<Canvas>
<Story name="danger">
{{
template: `<color-circles :colors="['--color-danger-shade-1', '--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Text
<Canvas>
<Story name="text">
{{
template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight', '--color-text-danger']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Foreground
<Canvas>
<Story name="foreground">
{{
template: `<color-circles :colors="['--color-foreground-xdark', '--color-foreground-dark', '--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Background
<Canvas>
<Story name="background">
{{
template: `<color-circles :colors="['--color-background-dark', '--color-background-medium', '--color-background-base', '--color-background-light', '--color-background-xlight']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>

53
packages/design-system/src/styleguide/colors.stories.ts Normal file
View File

@@ -0,0 +1,53 @@
import { type StoryFn } from '@storybook/vue3';
import ColorCircles from './ColorCircles.vue';
export default {
title: 'Styleguide/Colors Tokens',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
},
},
};
const Template =
(template: string): StoryFn =>
() => ({
components: {
ColorCircles,
},
template,
});
export const Primary = Template(
"<color-circles :colors=\"['--color-primary-shade-1', '--color-primary', '--color-primary-tint-1', '--color-primary-tint-2', '--color-primary-tint-3']\" />",
);
export const Secondary = Template(
"<color-circles :colors=\"['--color-secondary-shade-1', '--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-3']\" />",
);
export const Success = Template(
"<color-circles :colors=\"['--color-success-shade-1', '--color-success', '--color-success-light', '--color-success-light-2', '--color-success-tint-1', '--color-success-tint-2']\" />",
);
export const Warning = Template(
"<color-circles :colors=\"['--color-warning-shade-1', '--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']\" />",
);
export const Danger = Template(
"<color-circles :colors=\"['--color-danger-shade-1', '--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']\" />",
);
export const Text = Template(
"<color-circles :colors=\"['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight', '--color-text-danger']\" />",
);
export const Foreground = Template(
"<color-circles :colors=\"['--color-foreground-xdark', '--color-foreground-dark', '--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']\" />",
);
export const Background = Template(
"<color-circles :colors=\"['--color-background-dark', '--color-background-medium', '--color-background-base', '--color-background-light', '--color-background-xlight']\" />",
);

183
packages/design-system/src/styleguide/colorsprimitives.stories.mdx
View File

@@ -1,183 +0,0 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import ColorCircles from './ColorCircles.vue';
<Meta
title="Styleguide/Colors Primitives"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
},
}}
/>
# Colors Primitives
## Gray
<Canvas>
<Story name="gray">
{{
template: `<color-circles :colors="['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-30', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Primary
<Canvas>
<Story name="primary">
{{
template: `<color-circles :colors="['--prim-color-primary-shade-300', '--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Secondary
<Canvas>
<Story name="secondary">
{{
template: `<color-circles :colors="['--prim-color-secondary-shade-250', '--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate A
<Canvas>
<Story name="alternate-a">
{{
template: `<color-circles :colors="['--prim-color-alt-a-shade-200', '--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate B
<Canvas>
<Story name="alternate-b">
{{
template: `<color-circles :colors="['--prim-color-alt-b-shade-350', '--prim-color-alt-b-shade-250', '--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-150', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-300', '--prim-color-alt-b-tint-400']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate C
<Canvas>
<Story name="alternate-c">
{{
template: `<color-circles :colors="['--prim-color-alt-c-shade-250', '--prim-color-alt-c-shade-150', '--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-300', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate D
<Canvas>
<Story name="alternate-d">
{{
template: `<color-circles :colors="['--prim-color-alt-d-shade-700', '--prim-color-alt-d-shade-600', '--prim-color-alt-d-shade-150', '--prim-color-alt-d']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate E
<Canvas>
<Story name="alternate-e">
{{
template: `<color-circles :colors="['--prim-color-alt-e-shade-350', '--prim-color-alt-e-shade-250', '--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e', '--prim-color-alt-e-tint-250', '--prim-color-alt-e-tint-350']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate F
<Canvas>
<Story name="alternate-f">
{{
template: `<color-circles :colors="['--prim-color-alt-f', '--prim-color-alt-f-tint-150']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate G
<Canvas>
<Story name="alternate-g">
{{
template: `<color-circles :colors="['--prim-color-alt-g', '--prim-color-alt-g-tint-150']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate H
<Canvas>
<Story name="alternate-h">
{{
template: `<color-circles :colors="['--prim-color-alt-h']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate I
<Canvas>
<Story name="alternate-i">
{{
template: `<color-circles :colors="['--prim-color-alt-i']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate J
<Canvas>
<Story name="alternate-j">
{{
template: `<color-circles :colors="['--prim-color-alt-j']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>

67
packages/design-system/src/styleguide/colorsprimitives.stories.ts Normal file
View File

@@ -0,0 +1,67 @@
import { type StoryFn } from '@storybook/vue3';
import ColorCircles from './ColorCircles.vue';
export default {
title: 'Styleguide/Colors Primitives',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
},
},
};
const Template =
(template: string): StoryFn =>
() => ({
components: {
ColorCircles,
},
template,
});
export const Gray = Template(
"<color-circles :colors=\"['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-30', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']\" />",
);
export const Primary = Template(
"<color-circles :colors=\"['--prim-color-primary-shade-300', '--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']\" />",
);
export const Secondary = Template(
"<color-circles :colors=\"['--prim-color-secondary-shade-250', '--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']\" />",
);
export const AlternateA = Template(
"<color-circles :colors=\"['--prim-color-alt-a-shade-200', '--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']\" />",
);
export const AlternateB = Template(
"<color-circles :colors=\"['--prim-color-alt-b-shade-350', '--prim-color-alt-b-shade-250', '--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-150', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-300', '--prim-color-alt-b-tint-400']\" />",
);
export const AlternateC = Template(
"<color-circles :colors=\"['--prim-color-alt-c-shade-250', '--prim-color-alt-c-shade-150', '--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-300', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']\" />",
);
export const AlternateD = Template(
"<color-circles :colors=\"['--prim-color-alt-d-shade-700', '--prim-color-alt-d-shade-600', '--prim-color-alt-d-shade-150', '--prim-color-alt-d']\" />",
);
export const AlternateE = Template(
"<color-circles :colors=\"['--prim-color-alt-e-shade-350', '--prim-color-alt-e-shade-250', '--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e', '--prim-color-alt-e-tint-250', '--prim-color-alt-e-tint-350']\" />",
);
export const AlternateF = Template(
"<color-circles :colors=\"['--prim-color-alt-f', '--prim-color-alt-f-tint-150']\" />",
);
export const AlternateG = Template(
"<color-circles :colors=\"['--prim-color-alt-g', '--prim-color-alt-g-tint-150']\" />",
);
export const AlternateH = Template('<color-circles :colors="[\'--prim-color-alt-h\']" />');
export const AlternateI = Template('<color-circles :colors="[\'--prim-color-alt-i\']" />');
export const AlternateJ = Template('<color-circles :colors="[\'--prim-color-alt-j\']" />');

59
packages/design-system/src/styleguide/fonts.stories.mdx
View File

@@ -1,59 +0,0 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Sizes from './Sizes.vue';
import VariableTable from './VariableTable.vue';
<Meta title="Styleguide/Font" />
# Font
## Font Sizes
<Canvas>
<Story name="font-size">
{{
template: `<sizes :variables="['--font-size-3xs', '--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']" attr="font-size" />`,
components: {
Sizes,
},
}}
</Story>
</Canvas>
## Line Heights
<Canvas>
<Story name="line-height">
{{
template: `<variable-table :variables="['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']" />`,
components: {
VariableTable,
},
}}
</Story>
</Canvas>
## Font Weights
<Canvas>
<Story name="font-weight">
{{
template: `<variable-table :variables="['--font-weight-regular','--font-weight-bold']" attr="font-weight" />`,
components: {
VariableTable,
},
}}
</Story>
</Canvas>
## Font Family
<Canvas>
<Story name="font-family">
{{
template: `<variable-table :variables="['--font-family']" attr="font-family" />`,
components: {
VariableTable,
},
}}
</Story>
</Canvas>

36
packages/design-system/src/styleguide/fonts.stories.ts Normal file
View File

@@ -0,0 +1,36 @@
import { type StoryFn } from '@storybook/vue3';
import Sizes from './Sizes.vue';
import VariableTable from './VariableTable.vue';
export default {
title: 'Styleguide/Font',
};
export const FontSize: StoryFn = () => ({
components: {
Sizes,
},
template:
"<sizes :variables=\"['--font-size-3xs', '--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']\" attr=\"font-size\" />",
});
const Template =
(template: string): StoryFn =>
() => ({
components: {
VariableTable,
},
template,
});
export const LineHeight = Template(
"<variable-table :variables=\"['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']\" />",
);
export const FontWeight = Template(
'<variable-table :variables="[\'--font-weight-regular\',\'--font-weight-bold\']" attr="font-weight" />',
);
export const FontFamily = Template(
'<variable-table :variables="[\'--font-family\']" attr="font-family" />',
);

25
packages/design-system/src/styleguide/spacing.stories.mdx
View File

@@ -1,25 +0,0 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Sizes from './Sizes.vue';
<Meta
title="Styleguide/Spacing"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
},
}}
/>
# Spacing
<Canvas>
<Story name="spacing">
{{
template: `<sizes :variables="['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']" />`,
components: {
Sizes,
},
}}
</Story>
</Canvas>

20
packages/design-system/src/styleguide/spacing.stories.ts Normal file
View File

@@ -0,0 +1,20 @@
import { type StoryFn } from '@storybook/vue3';
import Sizes from './Sizes.vue';
export default {
title: 'Styleguide/Spacing',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
},
},
};
export const Spacing: StoryFn = () => ({
components: {
Sizes,
},
template:
"<sizes :variables=\"['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']\" />",
});

27
packages/design-system/src/styleguide/utilities/float.stories.mdx
View File

@@ -1,27 +0,0 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
<Meta title="Utilities/Float" />
# `.float-left`
<Canvas>
<Story name="float-left">
{{
template: `<div>
<span class="float-left">Float left</span>
</div>`,
}}
</Story>
</Canvas>
# `.float-right`
<Canvas>
<Story name="float-right">
{{
template: `<div>
<span class="float-right">Float right</span>
</div>`,
}}
</Story>
</Canvas>

17
packages/design-system/src/styleguide/utilities/float.stories.ts Normal file
View File

@@ -0,0 +1,17 @@
import { type StoryFn } from '@storybook/vue3';
export default {
title: 'Utilities/Float',
};
const Template =
(template: string): StoryFn =>
() => ({ template });
export const FloatLeft = Template(`<div>
<span class="float-left">Float left</span>
</div>`);
export const FloatRight = Template(`<div>
<span class="float-right">Float right</span>
</div>`);