forked from n8n-io/n8n
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Implement design system (n8n-io#2050)
* 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
1 parent
8dd0d54
commit 5bd8f7c
Showing
240 changed files
with
22,655 additions
and
1,213 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
> 1% | ||
last 2 versions | ||
not ie <= 8 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
169
packages/design-system/.storybook/font-awesome-icons.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'], | ||
}, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
Oops, something went wrong.