mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
32 changed files with 1826 additions and 3589 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -22,3 +22,4 @@ cypress/screenshots/*
cypress/downloads/*
*.swp
CHANGELOG-*.md
*.mdx

4
package.json
View file

@ -68,10 +68,10 @@
"tsc-watch": "^6.0.4",
"turbo": "1.10.12",
"typescript": "*",
"vite": "^5.1.5",
"vite": "^5.1.6",
"vite-plugin-checker": "^0.6.4",
"vitest": "^1.3.1",
"vue-tsc": "^2.0.4"
"vue-tsc": "^2.0.6"
},
"pnpm": {
"onlyBuiltDependencies": [

27
packages/@n8n/chat/.storybook/main.ts
View file

@ -1,27 +1,4 @@
import type { StorybookConfig } from '@storybook/vue3-vite';
import { sharedConfig } from '@n8n/storybook/main';
import { join, dirname } from 'path';
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, 'package.json')));
}
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-interactions'),
],
framework: {
name: getAbsolutePath('@storybook/vue3-vite'),
options: {},
},
docs: {
autodocs: 'tag',
},
};
const config = { ...sharedConfig };
export default config;

1
packages/@n8n/chat/.storybook/preview.ts
View file

@ -3,7 +3,6 @@ import './preview.scss';
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,

1
packages/@n8n/chat/package.json
View file

@ -45,6 +45,7 @@
"vue-markdown-render": "^2.0.1"
},
"devDependencies": {
"@n8n/storybook": "workspace:*",
"@iconify-json/mdi": "^1.1.54",
"shelljs": "^0.8.5",
"unbuild": "^2.0.0",

1
packages/@n8n/chat/vite.config.ts
View file

@ -28,6 +28,7 @@ export default defineConfig({
alias: {
'@': srcPath,
'@n8n/chat': srcPath,
lodash: 'lodash-es',
},
},
define: {

22
packages/@n8n/storybook/main.ts Normal file
View file

@ -0,0 +1,22 @@
import type { StorybookConfig } from '@storybook/vue3-vite';
export const sharedConfig: StorybookConfig = {
stories: ['../src/**/*.stories.ts'],
addons: [
'@storybook/addon-a11y',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-links',
],
staticDirs: ['../public'],
framework: {
name: '@storybook/vue3-vite',
options: {},
},
core: {
disableTelemetry: true,
},
docs: {
autodocs: true,
},
};

17
packages/@n8n/storybook/package.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "@n8n/storybook",
"private": true,
"devDependencies": {
"@storybook/addon-a11y": "^8.0.0",
"@storybook/addon-actions": "^8.0.0",
"@storybook/addon-docs": "^8.0.0",
"@storybook/addon-essentials": "^8.0.0",
"@storybook/addon-interactions": "^8.0.0",
"@storybook/addon-links": "^8.0.0",
"@storybook/blocks": "^8.0.0",
"@storybook/test": "^8.0.0",
"@storybook/vue3": "^8.0.0",
"@storybook/vue3-vite": "^8.0.0",
"storybook": "^8.0.0"
}
}

7
packages/@n8n_io/eslint-config/frontend.js
View file

@ -16,7 +16,12 @@ module.exports = {
overrides: [
{
files: ['**/*.test.ts', '**/test/**/*.ts', '**/__tests__/**/*.ts'],
files: [
'**/*.test.ts',
'**/test/**/*.ts',
'**/__tests__/**/*.ts',
'**/*.stories.ts',
],
rules: {
'import/no-extraneous-dependencies': 'off',
},

6
packages/design-system/.eslintrc.js
View file

@ -20,12 +20,6 @@ module.exports = {
},
overrides: [
{
files: ['src/**/*.stories.ts'],
rules: {
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
},
},
{
files: ['src/**/*.stories.ts', 'src/**/*.vue', 'src/**/*.spec.ts'],
rules: {

1
packages/design-system/.npmignore
View file

@ -12,4 +12,3 @@ vite.config.ts
*.md
*.stories.js
*.mdx

29
packages/design-system/.storybook/main.ts
View file

@ -1,29 +1,4 @@
import { dirname, join } from 'path';
import type { StorybookConfig } from '@storybook/vue3-vite';
function getAbsolutePath(value: string): string {
return dirname(require.resolve(join(value, 'package.json'))).toString();
}
const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-a11y'),
getAbsolutePath('storybook-dark-mode'),
],
staticDirs: ['../public'],
framework: {
name: getAbsolutePath('@storybook/vue3-vite') as '@storybook/vue3-vite',
options: {},
},
core: {
disableTelemetry: true,
},
docs: {
autodocs: true,
},
};
import { sharedConfig } from '@n8n/storybook/main';
const config = { ...sharedConfig, staticDirs: ['../public'] };
export default config;

3
packages/design-system/.storybook/preview.js
View file

@ -21,9 +21,6 @@ setup((app) => {
});
export const parameters = {
actions: {
argTypesRegex: '^on[A-Z].*',
},
controls: {
matchers: {
color: /(background|color)$/i,

21
packages/design-system/package.json
View file

@ -27,17 +27,7 @@
"lintfix": "eslint src --ext .js,.ts,.vue --fix"
},
"devDependencies": {
"@storybook/addon-a11y": "^7.5.2",
"@storybook/addon-actions": "^7.5.2",
"@storybook/addon-docs": "^7.5.2",
"@storybook/addon-essentials": "^7.5.2",
"@storybook/addon-interactions": "^7.5.2",
"@storybook/addon-links": "^7.5.2",
"@storybook/addon-postcss": "3.0.0-alpha.1",
"@storybook/blocks": "^7.5.2",
"@storybook/testing-library": "^0.2.2",
"@storybook/vue3": "^7.5.2",
"@storybook/vue3-vite": "^7.5.2",
"@n8n/storybook": "workspace:*",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/user-event": "^14.5.1",
"@testing-library/vue": "^8.0.1",
@ -47,19 +37,14 @@
"@types/markdown-it-emoji": "^2.0.2",
"@types/markdown-it-link-attributes": "^3.0.1",
"@types/sanitize-html": "^2.11.0",
"@vitejs/plugin-vue": "^4.5.2",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/test-utils": "^2.4.3",
"@vue/tsconfig": "^0.5.1",
"autoprefixer": "^10.4.14",
"core-js": "^3.31.0",
"jsdom": "^23.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.64.1",
"sass-loader": "^13.3.2",
"storybook": "^7.5.2",
"storybook-addon-themes": "^6.1.0",
"storybook-dark-mode": "^3.0.1"
"sass-loader": "^13.3.2"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",

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>`);

1
packages/design-system/vite.config.mts
View file

@ -41,6 +41,7 @@ export default mergeConfig(
alias: {
'@': resolve(__dirname, 'src'),
'n8n-design-system': resolve(__dirname, 'src'),
lodash: 'lodash-es',
},
},
build: {

4570
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff