From c7207555f650078bd95a6ebe900938d818e5fee3 Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Thu, 1 Feb 2024 21:26:54 +0300 Subject: [PATCH 1/6] feat(design-system): base setup, part 1 --- design-system/.eslintrc | 21 + design-system/README.md | 34 + design-system/package.json | 33 + design-system/postcss.config.js | 21 + design-system/src/index.ts | 1 + design-system/src/styles/index.pcss | 10 + design-system/src/styles/index.ts | 1 + design-system/src/styles/typography.pcss | 35 + design-system/src/ui/button/vue/Button.vue | 26 + design-system/src/ui/index.ts | 5 + design-system/tsconfig.json | 30 + design-system/vite.config.ts | 49 ++ package.json | 6 +- src/presentation/pages/Home.vue | 19 +- yarn.lock | 704 ++++++++++++++++++++- 15 files changed, 989 insertions(+), 6 deletions(-) create mode 100644 design-system/.eslintrc create mode 100644 design-system/README.md create mode 100644 design-system/package.json create mode 100644 design-system/postcss.config.js create mode 100644 design-system/src/index.ts create mode 100644 design-system/src/styles/index.pcss create mode 100644 design-system/src/styles/index.ts create mode 100644 design-system/src/styles/typography.pcss create mode 100644 design-system/src/ui/button/vue/Button.vue create mode 100644 design-system/src/ui/index.ts create mode 100644 design-system/tsconfig.json create mode 100644 design-system/vite.config.ts diff --git a/design-system/.eslintrc b/design-system/.eslintrc new file mode 100644 index 00000000..922c1ade --- /dev/null +++ b/design-system/.eslintrc @@ -0,0 +1,21 @@ +{ + "extends": [ + "codex/ts", + "plugin:vue/vue3-recommended", + ".architecture.eslintrc" + ], + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module", + "parser": "@typescript-eslint/parser" + }, + "rules": { + "vue/multi-word-component-names": "off", + "jsdoc/check-tag-names": ["error", { + "definedTags": ["template"] + }], + "jsdoc/require-param-type": "off", + "jsdoc/require-returns": "off", + "jsdoc/require-returns-type": "off" + } +} diff --git a/design-system/README.md b/design-system/README.md new file mode 100644 index 00000000..fcd8368b --- /dev/null +++ b/design-system/README.md @@ -0,0 +1,34 @@ +# CodeX Design + +- [x] Components import/export +- [x] Styles import/export +- [ ] Separate styles form components and base styles +- [ ] Prepare props/event example +- [ ] Prepare hooks/composables example +- [ ] Fix Eslint +- [ ] Improve DX for components debug +- [ ] Test Web/React/Native implementations +- [ ] Think about i18n + +## Project structure + +Subject to change + +``` +src/ + styles/ + index.pcss + sizes.pcss + typography.pcss + theme.pcss + ui/ + button/ + vue/ + Button.vue + react/ + web/ + native/ +``` + + + diff --git a/design-system/package.json b/design-system/package.json new file mode 100644 index 00000000..bc65114a --- /dev/null +++ b/design-system/package.json @@ -0,0 +1,33 @@ +{ + "name": "design-system", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vue-tsc && vite build", + "preview": "vite preview" + }, + "files": [ + "dist" + ], + "main": "./dist/codex-design.umd.cjs", + "module": "./dist/codex-design.js", + "exports": { + "./ui": { + "import": "./dist/ui.js" + }, + "./styles": { + "import": "./dist/styles.js" + } + }, + "devDependencies": { + "@types/node": "^20.11.15", + "@vitejs/plugin-vue": "^5.0.3", + "postcss-apply": "^0.12.0", + "postcss-hover-media-feature": "^1.0.2", + "postcss-nested": "^6.0.1", + "postcss-preset-env": "^9.3.0", + "vite": "^5.0.12", + "vite-plugin-css-injected-by-js": "^3.3.1", + "vue-tsc": "^1.8.27" + } +} diff --git a/design-system/postcss.config.js b/design-system/postcss.config.js new file mode 100644 index 00000000..266c55dc --- /dev/null +++ b/design-system/postcss.config.js @@ -0,0 +1,21 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +import postcssNested from 'postcss-nested'; +import postcssPresetEnv from 'postcss-preset-env'; +import postcssApply from 'postcss-apply'; +import postcssHoverMediaFeature from 'postcss-hover-media-feature'; + +/** + * Returns PostCSS config + * + * @returns {object} PostCSS config + */ +export default function () { + return { + plugins: [ + postcssNested(), + postcssPresetEnv(), + postcssApply(), + postcssHoverMediaFeature(), + ], + }; +}; diff --git a/design-system/src/index.ts b/design-system/src/index.ts new file mode 100644 index 00000000..096f6c44 --- /dev/null +++ b/design-system/src/index.ts @@ -0,0 +1 @@ +export * as ui from './ui'; diff --git a/design-system/src/styles/index.pcss b/design-system/src/styles/index.pcss new file mode 100644 index 00000000..70346617 --- /dev/null +++ b/design-system/src/styles/index.pcss @@ -0,0 +1,10 @@ +/* @import 'typography.pcss'; */ + +body { + background-color: red; +} + +:root { + --ds-color: red; +} + diff --git a/design-system/src/styles/index.ts b/design-system/src/styles/index.ts new file mode 100644 index 00000000..502e9c13 --- /dev/null +++ b/design-system/src/styles/index.ts @@ -0,0 +1 @@ +export * from "./index.pcss" diff --git a/design-system/src/styles/typography.pcss b/design-system/src/styles/typography.pcss new file mode 100644 index 00000000..76d6d64a --- /dev/null +++ b/design-system/src/styles/typography.pcss @@ -0,0 +1,35 @@ +:root { + --text-heading-1 { + font-weight: 700; + font-size: 2.75rem; + line-height: 120%; + letter-spacing: 0.1px; + } + + --text-heading-2 { + font-weight: 700; + line-height: 120%; + font-size: 1.75rem; + letter-spacing: 0.1px; + } + + --text-heading-3 { + font-weight: 700; + font-size: 1.375rem; + line-height: 120%; + letter-spacing: 0.1px; + } + + --text-body { + font-weight: 400; + line-height: 25px; + font-size: 1rem; + } + + --text-small { + font-weight: 400; + font-size: 0.875rem; + line-height: 120%; + letter-spacing: 0.14px; + } +} diff --git a/design-system/src/ui/button/vue/Button.vue b/design-system/src/ui/button/vue/Button.vue new file mode 100644 index 00000000..5e397292 --- /dev/null +++ b/design-system/src/ui/button/vue/Button.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/design-system/src/ui/index.ts b/design-system/src/ui/index.ts new file mode 100644 index 00000000..c7341431 --- /dev/null +++ b/design-system/src/ui/index.ts @@ -0,0 +1,5 @@ +import Button from './button/vue/Button.vue'; + +export { + Button +} diff --git a/design-system/tsconfig.json b/design-system/tsconfig.json new file mode 100644 index 00000000..c518908c --- /dev/null +++ b/design-system/tsconfig.json @@ -0,0 +1,30 @@ +{ + "compilerOptions": { + "strict": true, + "types": ["vite/client"], + "target": "ES2020", + "baseUrl": "./src" , + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + "moduleResolution": "node", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "allowSyntheticDefaultImports": true, + "paths": { + "@/infrastructure/*": ["infrastructure/*"], + "@/infrastructure": ["infrastructure"], + "@/presentation/*": ["presentation/*"], + "@/presentation": ["presentation"], + "@/domain/*": ["domain/*"], + "@/domain": ["domain"], + "@/application/*": ["application/*"], + "@/application": ["application"], + } + }, + "include": ["src", "vite.config.ts"], +} diff --git a/design-system/vite.config.ts b/design-system/vite.config.ts new file mode 100644 index 00000000..78af4f84 --- /dev/null +++ b/design-system/vite.config.ts @@ -0,0 +1,49 @@ +import { resolve } from 'path'; +import { defineConfig } from 'vite'; +import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; + + +import vue from '@vitejs/plugin-vue'; +export default defineConfig({ + plugins: [ + vue(), + cssInjectedByJsPlugin({ + jsAssetsFilterFunction(outputChunk) { + return outputChunk.facadeModuleId ? outputChunk.facadeModuleId.includes('src/styles') : true; + } + }), + ], + build: { + minify: false, + lib: { + // Could also be a dictionary or array of multiple entry points + entry: resolve(__dirname, 'src/index.ts'), + name: 'CodeXDesign', + // the proper extensions will be added + fileName: (format, entryName) => `${entryName}.js`, + formats: ['es'], + }, + rollupOptions: { + input: { + styles: resolve(__dirname, 'src/styles/index.ts'), + ui: resolve(__dirname, 'src/ui/index.ts'), + }, + output: { + inlineDynamicImports: false, + // Provide global variables to use in the UMD build + // for externalized deps + globals: { + vue: 'Vue', + }, + }, + // make sure to externalize deps that shouldn't be bundled + // into your library + external: ['vue'], + }, + }, + resolve: { + alias: { + '@/': '/src/', + }, + }, +}) diff --git a/package.json b/package.json index 762fbb67..3d8155d8 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,16 @@ "author": "CodeX (https://codex.so)", "type": "module", "scripts": { - "dev": "vite & yarn watch-ts", + "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", "lint": "eslint . --ext .ts,.vue", "lint:fix": "yarn lint --fix", "watch-ts": "vue-tsc --noEmit --watch" }, + "workspaces": [ + "design-system" + ], "dependencies": { "@codexteam/icons": "^0.3.0", "@editorjs/checklist": "^1.5.0", @@ -28,6 +31,7 @@ "@editorjs/table": "^2.2.2", "@editorjs/warning": "^1.3.0", "@vueuse/core": "^10.3.0", + "design-system": "workspace:^", "jwt-decode": "^3.1.2", "normalize.css": "^8.0.1", "typescript-cookie": "^1.0.6", diff --git a/src/presentation/pages/Home.vue b/src/presentation/pages/Home.vue index 2a18a564..2e04614f 100644 --- a/src/presentation/pages/Home.vue +++ b/src/presentation/pages/Home.vue @@ -1,13 +1,21 @@ - diff --git a/codex-ui/src/vue/heading/Heading.vue b/codex-ui/src/vue/heading/Heading.vue new file mode 100644 index 00000000..e92ef2ba --- /dev/null +++ b/codex-ui/src/vue/heading/Heading.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/codex-ui/src/vue/index.ts b/codex-ui/src/vue/index.ts new file mode 100644 index 00000000..f14ab09e --- /dev/null +++ b/codex-ui/src/vue/index.ts @@ -0,0 +1,9 @@ +import Button from './button/Button.vue'; +import Input from './input/Input.vue'; +import Heading from './heading/Heading.vue'; + +export { + Button, + Input, + Heading +} diff --git a/codex-ui/src/vue/input/Input.vue b/codex-ui/src/vue/input/Input.vue new file mode 100644 index 00000000..a0e42a05 --- /dev/null +++ b/codex-ui/src/vue/input/Input.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/codex-ui/tsconfig.dts.json b/codex-ui/tsconfig.dts.json new file mode 100644 index 00000000..52bd48bd --- /dev/null +++ b/codex-ui/tsconfig.dts.json @@ -0,0 +1,11 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "rootDir": "src", + "declaration": true, + "noEmit": false, + "emitDeclarationOnly": true, + "outDir": "dist", + }, + "include": ["src"] +} diff --git a/codex-ui/tsconfig.json b/codex-ui/tsconfig.json new file mode 100644 index 00000000..5394b68b --- /dev/null +++ b/codex-ui/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "strict": true, + "types": ["vite/client"], + "target": "ES2020", + "baseUrl": "src" , + "useDefineForClassFields": true, + "module": "NodeNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + "moduleResolution": "NodeNext", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "allowSyntheticDefaultImports": true, + "allowJs": true, + "declaration": true, + "declarationDir": "./dist/types", + "paths": { + }, + }, + "include": ["src", "vite.config.ts"], +} diff --git a/design-system/vite.config.ts b/codex-ui/vite.config.ts similarity index 77% rename from design-system/vite.config.ts rename to codex-ui/vite.config.ts index 78af4f84..fc9846fe 100644 --- a/design-system/vite.config.ts +++ b/codex-ui/vite.config.ts @@ -2,15 +2,15 @@ import { resolve } from 'path'; import { defineConfig } from 'vite'; import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; - import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ vue(), cssInjectedByJsPlugin({ - jsAssetsFilterFunction(outputChunk) { - return outputChunk.facadeModuleId ? outputChunk.facadeModuleId.includes('src/styles') : true; - } + /** + * Used to inject Vue component styles into vue.js bundle + */ + relativeCSSInjection: true, }), ], build: { @@ -18,15 +18,16 @@ export default defineConfig({ lib: { // Could also be a dictionary or array of multiple entry points entry: resolve(__dirname, 'src/index.ts'), - name: 'CodeXDesign', + name: 'CodexUi', // the proper extensions will be added fileName: (format, entryName) => `${entryName}.js`, formats: ['es'], }, + cssCodeSplit: false, rollupOptions: { input: { - styles: resolve(__dirname, 'src/styles/index.ts'), - ui: resolve(__dirname, 'src/ui/index.ts'), + styles: resolve(__dirname, 'src/styles/index.pcss'), + vue: resolve(__dirname, 'src/vue/index.ts'), }, output: { inlineDynamicImports: false, diff --git a/design-system/.eslintrc b/design-system/.eslintrc deleted file mode 100644 index 922c1ade..00000000 --- a/design-system/.eslintrc +++ /dev/null @@ -1,21 +0,0 @@ -{ - "extends": [ - "codex/ts", - "plugin:vue/vue3-recommended", - ".architecture.eslintrc" - ], - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module", - "parser": "@typescript-eslint/parser" - }, - "rules": { - "vue/multi-word-component-names": "off", - "jsdoc/check-tag-names": ["error", { - "definedTags": ["template"] - }], - "jsdoc/require-param-type": "off", - "jsdoc/require-returns": "off", - "jsdoc/require-returns-type": "off" - } -} diff --git a/design-system/README.md b/design-system/README.md deleted file mode 100644 index fcd8368b..00000000 --- a/design-system/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# CodeX Design - -- [x] Components import/export -- [x] Styles import/export -- [ ] Separate styles form components and base styles -- [ ] Prepare props/event example -- [ ] Prepare hooks/composables example -- [ ] Fix Eslint -- [ ] Improve DX for components debug -- [ ] Test Web/React/Native implementations -- [ ] Think about i18n - -## Project structure - -Subject to change - -``` -src/ - styles/ - index.pcss - sizes.pcss - typography.pcss - theme.pcss - ui/ - button/ - vue/ - Button.vue - react/ - web/ - native/ -``` - - - diff --git a/design-system/src/index.ts b/design-system/src/index.ts deleted file mode 100644 index 096f6c44..00000000 --- a/design-system/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * as ui from './ui'; diff --git a/design-system/src/styles/index.pcss b/design-system/src/styles/index.pcss deleted file mode 100644 index 70346617..00000000 --- a/design-system/src/styles/index.pcss +++ /dev/null @@ -1,10 +0,0 @@ -/* @import 'typography.pcss'; */ - -body { - background-color: red; -} - -:root { - --ds-color: red; -} - diff --git a/design-system/src/styles/index.ts b/design-system/src/styles/index.ts deleted file mode 100644 index 502e9c13..00000000 --- a/design-system/src/styles/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./index.pcss" diff --git a/design-system/src/ui/button/vue/Button.vue b/design-system/src/ui/button/vue/Button.vue deleted file mode 100644 index 5e397292..00000000 --- a/design-system/src/ui/button/vue/Button.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - - - diff --git a/design-system/src/ui/index.ts b/design-system/src/ui/index.ts deleted file mode 100644 index c7341431..00000000 --- a/design-system/src/ui/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Button from './button/vue/Button.vue'; - -export { - Button -} diff --git a/design-system/tsconfig.json b/design-system/tsconfig.json deleted file mode 100644 index c518908c..00000000 --- a/design-system/tsconfig.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "compilerOptions": { - "strict": true, - "types": ["vite/client"], - "target": "ES2020", - "baseUrl": "./src" , - "useDefineForClassFields": true, - "module": "ESNext", - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "skipLibCheck": true, - "moduleResolution": "node", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "preserve", - "allowSyntheticDefaultImports": true, - "paths": { - "@/infrastructure/*": ["infrastructure/*"], - "@/infrastructure": ["infrastructure"], - "@/presentation/*": ["presentation/*"], - "@/presentation": ["presentation"], - "@/domain/*": ["domain/*"], - "@/domain": ["domain"], - "@/application/*": ["application/*"], - "@/application": ["application"], - } - }, - "include": ["src", "vite.config.ts"], -} diff --git a/package.json b/package.json index 3d8155d8..2ddb787c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "watch-ts": "vue-tsc --noEmit --watch" }, "workspaces": [ - "design-system" + "codex-ui" ], "dependencies": { "@codexteam/icons": "^0.3.0", @@ -31,7 +31,7 @@ "@editorjs/table": "^2.2.2", "@editorjs/warning": "^1.3.0", "@vueuse/core": "^10.3.0", - "design-system": "workspace:^", + "codex-ui": "workspace:^", "jwt-decode": "^3.1.2", "normalize.css": "^8.0.1", "typescript-cookie": "^1.0.6", diff --git a/src/presentation/pages/Home.vue b/src/presentation/pages/Home.vue index 2e04614f..55f50d91 100644 --- a/src/presentation/pages/Home.vue +++ b/src/presentation/pages/Home.vue @@ -2,20 +2,22 @@

{{ $t('home.title') }}

This page will contain your Notes you recently worked with

-
-@/application/services/useMarketplace + diff --git a/src/presentation/pages/Settings.vue b/src/presentation/pages/Settings.vue index f3c29e35..842b8a68 100644 --- a/src/presentation/pages/Settings.vue +++ b/src/presentation/pages/Settings.vue @@ -17,18 +17,12 @@ @click="userLogout" /> -
-

- 🎡 Marketplace -

- - Insert Tool Id and press Enter: - -
+