mirror of
https://github.com/n8n-io/n8n.git
synced 2024-08-17 09:00:30 +03:00
feat(editor): Upgrade Storybook to 8.0 (no-changelog) (#8867)
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™
GitHub
parent
948c383999
commit
572af38383
1
.gitignore
vendored
1
.gitignore
vendored
@ -22,3 +22,4 @@ cypress/screenshots/*
|
||||
cypress/downloads/*
|
||||
*.swp
|
||||
CHANGELOG-*.md
|
||||
*.mdx
|
||||
|
||||
@ -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": [
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -3,7 +3,6 @@ import './preview.scss';
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -28,6 +28,7 @@ export default defineConfig({
|
||||
alias: {
|
||||
'@': srcPath,
|
||||
'@n8n/chat': srcPath,
|
||||
lodash: 'lodash-es',
|
||||
},
|
||||
},
|
||||
define: {
|
||||
|
||||
22
packages/@n8n/storybook/main.ts
Normal file
22
packages/@n8n/storybook/main.ts
Normal 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
17
packages/@n8n/storybook/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
@ -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',
|
||||
},
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -12,4 +12,3 @@ vite.config.ts
|
||||
|
||||
*.md
|
||||
*.stories.js
|
||||
*.mdx
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -21,9 +21,6 @@ setup((app) => {
|
||||
});
|
||||
|
||||
export const parameters = {
|
||||
actions: {
|
||||
argTypesRegex: '^on[A-Z].*',
|
||||
},
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
@ -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.
|
||||
@ -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
29
packages/design-system/src/styleguide/border.stories.ts
Normal 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\']" />');
|
||||
@ -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
53
packages/design-system/src/styleguide/colors.stories.ts
Normal 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']\" />",
|
||||
);
|
||||
@ -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>
|
||||
@ -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\']" />');
|
||||
@ -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
36
packages/design-system/src/styleguide/fonts.stories.ts
Normal 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" />',
|
||||
);
|
||||
@ -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
20
packages/design-system/src/styleguide/spacing.stories.ts
Normal 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']\" />",
|
||||
});
|
||||
@ -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>
|
||||
@ -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>`);
|
||||
@ -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
4570
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user