Skip to content

Commit

Permalink
✨ Implement design system (n8n-io#2050)
Browse files Browse the repository at this point in the history
* split up main, sass imports, import new nds

* migrate most buttons

* update sizes based on feedback

* update copy buttons

* update executions list

* fix issues

* force message box buttons

* update warning color

* update more buttons

* wrap message box buttons

* update last component

* lint fixes

* add build report step

* breakout imports

* set package.json

* fix notification bug

* clean up imports

* use build directories directly

* update imports

* remove xl size

* update number inputs

* fix input width

* update line height, fix icon bug

* fix up editor

* fix spacing between buttons

* Reset line height

* revert changes to this

* revert changes

* clean up button sizes

* change to outline

* update select height

* update tooltip

* remove build report step

* clean up impl

* remove regenerator runtime

* add design system repo

* apply editorconfig

* apply editor config prettier

* lint issue

* switch to tabs

* switch to single space

* update eslintrc

* remove git modules

* update sass package

* support dart sass

* add build

* update dependency

* update contributing.md

* set repo

* update versions

* add tslint step

* update spacing to spaces, add dev step

* add test step

* add test step

* update browser lint rc

* remove .github

* delete .gitignore

* set comment for icons

* remove preview link

* update button interface

* update types

* set types

* clean up intro

* update intro

* remove assets

* move into preview

* remove headline comment

* reduce theme build

* loading executions

* match deps versions

* match deps versions

* fix lint issues

* fix lint issues

* update callback

* disable codacy for docs.css

* fix storybook issues

* add design system to docker image

* update spacing around delete sort button

* set line height to stop juggling headline

* update sizes

* clean up vars

* fix scss issues

* update button vars

* add shade color

* fix button without click

* fix buttons bug

* fix bug with executions list

* clean up theme

* update link styling

* fix typo

* run prettier

* 🎨 code format

* 🎨 code format

* 🔥 remove empty files

* ✨ N8n 2284 new inputs (n8n-io#2075)

* implement inputs

* prettier fixes

* revert unnessary change

* move input components and tooltip

* remove form elements

* move select

* update input placements

* update sizes

* update credentails

* clean up select size

* fix caret issue

* update inputs

* clean up select

* fix tags dropdown border

* clean up tags input

* fix workflow name bug

* clean up select here

* add sizes template

* fix option caret

* fix input sizes

* update date input size

* remove tags input override

* update prop

* update input size

* center run data inputs

* update disabled colors

* update execution header

* update scrollbar

* update text area spacing

* fix items in header

* update run data tooltip

* remove popover

* update prefix positions

* add filterable demo

* address design issues

* fix input issues, flip boolean input to text

* update input sufffix colors

* remove override

* speed up switch, fix toggle spacing issue

* update icon

* remove icon classes

* clean up inputs

* clean up inputs with icons

* update input spacing again

* update suffix position

* build

* Add support for xlarge inputs

* fix input issues

* fix input issue

* update listeners

* update number inputs for settings

* update append/prepend spacing

* clean up inputs, set expression input as text

* fix type errors

* fix workflow number input

* fix tags dropdown bug

* fix bugs

* fix menu item bug

* remove font weight from link element

* remove default

* fix select option

* fix contrast issues

* allow overflow x for multi selects

* fix icon

* update options select

* fix issue that resolves expression to null

* update how actions are centered

* fix up selects

* update selects to support limiting size

* update option styles

* ⚡ Apply suggestions BHesseldieck

Co-authored-by: Ben Hesseldieck <[email protected]>

* 🎨 code format

Co-authored-by: Jan <[email protected]>
Co-authored-by: Ben Hesseldieck <[email protected]>
Co-authored-by: Ben Hesseldieck <[email protected]>

* ⏪ Revert "🔥 remove empty files"

This reverts commit e91ace4.

* ⚡ Remove private from n8n-design-system package

* 🎨 Change to spaces to stay consistent with editorconfig & others
package files

* ⚡ Fix year in license

Co-authored-by: Ben Hesseldieck <[email protected]>
Co-authored-by: Ben Hesseldieck <[email protected]>
Co-authored-by: Jan <[email protected]>
Co-authored-by: Jan Oberhauser <[email protected]>
  • Loading branch information
5 people authored Aug 29, 2021
1 parent 8dd0d54 commit 5bd8f7c
Show file tree
Hide file tree
Showing 240 changed files with 22,655 additions and 1,213 deletions.
1 change: 1 addition & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ The most important directories:
- [/packages/core](/packages/core) - Core code which handles workflow
execution, active webhooks and
workflows
- [/packages/design-system](/packages/design-system) - Vue frontend components
- [/packages/editor-ui](/packages/editor-ui) - Vue frontend workflow editor
- [/packages/node-dev](/packages/node-dev) - CLI to create new n8n-nodes
- [/packages/nodes-base](/packages/nodes-base) - Base n8n nodes
Expand Down
1 change: 1 addition & 0 deletions docker/images/n8n-custom/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ COPY lerna.json .
COPY package.json .
COPY packages/cli/ ./packages/cli/
COPY packages/core/ ./packages/core/
COPY packages/design-system/ ./packages/design-system/
COPY packages/editor-ui/ ./packages/editor-ui/
COPY packages/nodes-base/ ./packages/nodes-base/
COPY packages/workflow/ ./packages/workflow/
Expand Down
3 changes: 3 additions & 0 deletions packages/design-system/.browserslistrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not ie <= 8
15 changes: 15 additions & 0 deletions packages/design-system/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
root = true

[*]
charset = utf-8
indent_style = tab
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[package.json]
indent_style = space
indent_size = 2

[*.ts]
quote_type = single
19 changes: 19 additions & 0 deletions packages/design-system/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', '@vue/typescript'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
semi: [2, 'always'],
indent: ['error', 'tab'],
'comma-dangle': ['error', 'always-multiline'],
'no-tabs': 0,
'no-labels': 0,
},
parserOptions: {
parser: '@typescript-eslint/parser',
},
};
26 changes: 26 additions & 0 deletions packages/design-system/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.DS_Store
storybook-static


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

*.md
*.stories.js
*.mdx
169 changes: 169 additions & 0 deletions packages/design-system/.storybook/font-awesome-icons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
/**
* These icons are only defined for storybook build
* Editor icons are defined seperately
*/
import { library } from '@fortawesome/fontawesome-svg-core';
import {
faAngleDoubleLeft,
faAngleDown,
faAngleRight,
faAngleUp,
faArrowLeft,
faArrowRight,
faAt,
faBook,
faBug,
faCalendar,
faCheck,
faChevronDown,
faChevronUp,
faCode,
faCodeBranch,
faCog,
faCogs,
faClone,
faCloud,
faCloudDownloadAlt,
faCopy,
faCut,
faDotCircle,
faEdit,
faEnvelope,
faEye,
faExclamationTriangle,
faExpand,
faExternalLinkAlt,
faExchangeAlt,
faFile,
faFileArchive,
faFileCode,
faFileDownload,
faFileExport,
faFileImport,
faFilePdf,
faFolderOpen,
faGift,
faHdd,
faHome,
faHourglass,
faImage,
faInbox,
faInfo,
faInfoCircle,
faKey,
faMapSigns,
faNetworkWired,
faPause,
faPen,
faPlay,
faPlayCircle,
faPlus,
faPlusCircle,
faQuestion,
faQuestionCircle,
faRedo,
faRss,
faSave,
faSearch,
faSearchMinus,
faSearchPlus,
faServer,
faSignInAlt,
faSlidersH,
faSpinner,
faStop,
faSun,
faSync,
faSyncAlt,
faTable,
faTasks,
faTerminal,
faThLarge,
faTimes,
faTrash,
faUndo,
faUsers,
faClock,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(faAngleDoubleLeft);
library.add(faAngleDown);
library.add(faAngleRight);
library.add(faAngleUp);
library.add(faArrowLeft);
library.add(faArrowRight);
library.add(faAt);
library.add(faBook);
library.add(faBug);
library.add(faCalendar);
library.add(faCheck);
library.add(faChevronDown);
library.add(faChevronUp);
library.add(faCode);
library.add(faCodeBranch);
library.add(faCog);
library.add(faCogs);
library.add(faClone);
library.add(faCloud);
library.add(faCloudDownloadAlt);
library.add(faCopy);
library.add(faCut);
library.add(faDotCircle);
library.add(faEdit);
library.add(faEnvelope);
library.add(faEye);
library.add(faExclamationTriangle);
library.add(faExpand);
library.add(faExternalLinkAlt);
library.add(faExchangeAlt);
library.add(faFile);
library.add(faFileArchive);
library.add(faFileCode);
library.add(faFileDownload);
library.add(faFileExport);
library.add(faFileImport);
library.add(faFilePdf);
library.add(faFolderOpen);
library.add(faGift);
library.add(faHdd);
library.add(faHome);
library.add(faHourglass);
library.add(faImage);
library.add(faInbox);
library.add(faInfo);
library.add(faInfoCircle);
library.add(faKey);
library.add(faMapSigns);
library.add(faNetworkWired);
library.add(faPause);
library.add(faPen);
library.add(faPlay);
library.add(faPlayCircle);
library.add(faPlus);
library.add(faPlusCircle);
library.add(faQuestion);
library.add(faQuestionCircle);
library.add(faRedo);
library.add(faRss);
library.add(faSave);
library.add(faSearch);
library.add(faSearchMinus);
library.add(faSearchPlus);
library.add(faServer);
library.add(faSignInAlt);
library.add(faSlidersH);
library.add(faSpinner);
library.add(faStop);
library.add(faSun);
library.add(faSync);
library.add(faSyncAlt);
library.add(faTable);
library.add(faTasks);
library.add(faTerminal);
library.add(faThLarge);
library.add(faTimes);
library.add(faTrash);
library.add(faUndo);
library.add(faUsers);
library.add(faClock);
1 change: 1 addition & 0 deletions packages/design-system/.storybook/fonts.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
38 changes: 38 additions & 0 deletions packages/design-system/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
const path = require('path');

module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'storybook-addon-designs',
'storybook-addon-themes',
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.scss$/,
oneOf: [
{
resourceQuery: /module/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true,
},
},
'sass-loader',
],
include: path.resolve(__dirname, '../'),
},
{
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
},
],
});

return config;
},
};
65 changes: 65 additions & 0 deletions packages/design-system/.storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import './font-awesome-icons';
import './storybook.scss';

import lang from 'element-ui/lib/locale/lang/en';
import locale from 'element-ui/lib/locale';

import Vue from 'vue';

locale.use(lang);

// https://github.com/storybookjs/storybook/issues/6153
Vue.prototype.toJSON = function () {
return this;
};

export const parameters = {
actions: {
argTypesRegex: '^on[A-Z].*',
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
backgrounds: {
default: '--color-background-xlight',
values: [
{
name: '--color-background-dark',
value: 'var(--color-background-dark)',
},
{
name: '--color-background-base',
value: 'var(--color-background-base)',
},
{
name: '--color-background-light',
value: 'var(--color-background-light)',
},
{
name: '--color-background-lighter',
value: 'var(--color-background-lighter)',
},
{
name: '--color-background-xlight',
value: 'var(--color-background-xlight)',
},
],
},
themes: {
list: [
{
name: 'dark',
class: 'theme-dark',
color: '#000',
},
],
},
options: {
storySort: {
order: ['Docs', 'Styleguide', 'Atoms'],
},
},
};
12 changes: 12 additions & 0 deletions packages/design-system/.storybook/storybook.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@use "./fonts.scss";

@use "~/theme/src/base.scss" with (
$font-path: '~element-ui/lib/theme-chalk/fonts',
);

@use "~/theme/src/reset.scss";
@use "~/theme/src/index.scss";

.multi-container > * {
margin-bottom: 10px;
}
Loading

0 comments on commit 5bd8f7c

Please sign in to comment.