Merge pull request #95 from codex-team/feat/ds-setup

feat(codex-ui): codex-ui package base setup

.architecture.eslintrc

@@ -104,6 +104,15 @@
         "type": "Component Type",
         "pattern": "src/presentation/components/**/types/*",
         "mode": "full"
+      },
+
+      /**
+       * External modules
+       */
+      {
+        "type": "CodeX UI",
+        "pattern": "**/codex-ui/**/*",
+        "mode": "file"
       }
     ],
     "import/resolver": {
@@ -234,7 +243,8 @@
               "Application Service",
               "Entity",
               "Utils",
-              "Component Type"
+              "Component Type",
+              "CodeX UI"
             ]
           },
           {

.eslintignore

@@ -0,0 +1 @@
+/codex-ui

codex-ui/README.md

@@ -0,0 +1,74 @@
+# CodeX Design
+
+- [x] Components import/export
+- [x] Styles import/export
+- [x] Create Vue and Style sub-packages
+- [x] Setup TypeScript support for Vue components
+- [x] Allow to use CSS mixins internally
+- [x] Separate styles form components and base styles
+- [x] Prepare props/event example
+- [ ] Make tree-shaking work
+- [ ] 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/
+    mixins/
+      typography.pcss
+    index.pcss
+    colors.pcss
+  vue/
+    button/
+      Button.vue
+  react/
+  web/
+  js/
+```
+
+## Access Vue components
+
+```ts
+import { Button, Input, Heading } from 'codex-ui/vue';
+```
+
+```vue
+<Heading
+  :level="2"
+>
+  CodeX UI showcase
+</Heading>
+<Button text="Button text" />
+<Input text="Input text" />
+```
+
+## Types for Vue Components
+
+Add the following "path" to the "tsconfig.json"
+
+```
+{
+  "compilerOptions": {
+    "paths": {
+      "codex-ui/vue": ["../codex-ui/dist/types/vue/index.d.ts"],
+    }
+  },
+}
+
+```
+
+## Access CSS variables
+
+1. Import `codex-ui/styles` somewhere in App
+2. Use variable in CSS, e.g `var(--ui-color)`
+
+
+
+

codex-ui/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "codex-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "yarn build-src && yarn build-types",
+    "build-src": "vite build",
+    "build-types": "vue-tsc --declaration --emitDeclarationOnly --project tsconfig.dts.json",
+    "preview": "vite preview"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./vue": {
+      "import": {
+        "default": "./dist/vue.js"
+      }
+    },
+    "./styles": {
+      "import": "./dist/styles.css"
+    }
+  },
+  "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",
+    "tsc": "^2.0.4",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-css-injected-by-js": "^3.3.1",
+    "vue-tsc": "latest"
+  },
+  "dependencies": {
+    "vue": "^3.4.16"
+  }
+}

codex-ui/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(),
+    ],
+  };
+};

codex-ui/src/index.ts

@@ -0,0 +1 @@
+export * from './vue/index.js';

codex-ui/src/styles/colors.pcss

@@ -0,0 +1,3 @@
+:root {
+  --ui-color: black;
+}

codex-ui/src/styles/index.pcss

@@ -0,0 +1 @@
+@import './colors.pcss';

codex-ui/src/styles/mixins/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;
+  }
+}

codex-ui/src/vue/button/Button.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <button :class="$style.button">
+      {{ text || 'No text passed' }}
+    </button>
+  </div>
+</template>
+
+<script setup lang=ts>
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  /**
+   * The text to display on the button
+   */
+  text: string;
+}>();
+
+</script>
+
+<style lang="postcss" module>
+.button {
+  border: 1px solid green;
+  background-color: blue;
+}
+</style>

codex-ui/src/vue/heading/Heading.vue

@@ -0,0 +1,27 @@
+<template>
+  <component
+   :is="`h${props.level}`"
+   :class="$style.heading"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  /**
+   * Heading level. From 1 to 6
+   */
+  level: number;
+}>();
+</script>
+
+<style module>
+@import '@/styles/mixins/typography.pcss';
+
+.heading {
+  @apply --text-heading-1;
+}
+</style>

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
+}

codex-ui/src/vue/input/Input.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <input
+      :class="$style.input"
+      :value="props.text"
+    />
+  </div>
+</template>
+
+<script setup lang=ts>
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  /**
+   * The text to display on the input
+   */
+  text: string;
+}>();
+
+</script>
+
+<style lang="postcss" module>
+.input {
+  background-color: red;
+}
+</style>

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"]
+}

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"],
+}

codex-ui/vite.config.ts

@@ -0,0 +1,50 @@
+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({
+      /**
+       * Used to inject Vue component styles into vue.js bundle
+       */
+      relativeCSSInjection: true,
+    }),
+  ],
+  build: {
+    minify: false,
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, 'src/index.ts'),
+      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.pcss'),
+        vue: resolve(__dirname, 'src/vue/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/',
+    },
+  },
+})