Merge branch 'main' into feat/note-parents

Author: TheGeniusOfEternity

.architecture.eslintrc

@@ -2,7 +2,7 @@
   "plugins": [
     "boundaries"
   ],
-  "ignorePatterns": ["codex-ui"],
+  "ignorePatterns": ["@codexteam/ui"],
   "settings": {
     "boundaries/elements": [
       /**
@@ -112,7 +112,7 @@
        */
       {
         "type": "CodeX UI",
-        "pattern": "**/codex-ui/**/*",
+        "pattern": "**/@codexteam/ui/**/*",
         "mode": "file"
       }
     ],

.dockerignore

@@ -18,7 +18,7 @@
 !vite.config.ts
 !postcss.config.js
 !.yarn/releases
-!codex-ui
+!@codexteam/ui/
 
 # Ignore unnecessary files inside allowed directories
 **/*~

.github/workflows/eslint-check.yml

@@ -22,11 +22,11 @@ jobs:
       - name: Run ESLint
         run: yarn lint
 
-      - name: Install codex-ui dependencies
+      - name: Install @codexteam/ui dependencies
         run: |
           yarn install
-        working-directory: ./codex-ui
+        working-directory: ./@codexteam/ui
 
-      - name: Run ESLint on codex-ui
+      - name: Run ESLint on @codexteam/ui
         run: yarn lint
-        working-directory: ./codex-ui
+        working-directory: ./@codexteam/ui

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "eslint.workingDirectories": ["./", "./codex-ui"],
+  "eslint.workingDirectories": ["./", "./@codexteam/ui"],
 
   // Enable the ESlint flat config support
   "eslint.experimental.useFlatConfig": true,

@codexteam/ui/.npmignore

@@ -0,0 +1,19 @@
+dev/
+node_modules/
+src/
+*.log
+*.lock
+.npmrc
+.git/
+.gitignore
+.github/
+.idea/
+.vscode/
+
+tsconfig.json
+tsconfig.dts.json
+eslint.config.mjs
+postcss.config.js
+vite.config.ts
+
+README.md

codex-ui/README.md @codexteam/ui/README.mdcodex-ui/README.md renamed to @codexteam/ui/README.md

@@ -9,7 +9,7 @@ The Design System forged in the fires of open-source development
 ## Access Vue components
 
 ```ts
-import { Button, Input, Heading } from 'codex-ui/vue';
+import { Button, Input, Heading } from '@codexteam/ui/vue';
 ```
 
 ```vue
@@ -28,23 +28,23 @@ Add the following "path" to the "tsconfig.json"
 {
   "compilerOptions": {
     "paths": {
-      "codex-ui/vue": ["../codex-ui/dist/types/vue/index.d.ts"],
+      "@codexteam/ui/vue": ["../@codexteam/ui/dist/types/vue/index.d.ts"],
     }
   },
 }
 
 ```
 
 ## Build Design System
-Build the design system to be able to use the codex-ui/styles import
+Build the design system to be able to use the @codexteam/ui/styles import
 
 ```
 yarn build
 ```
 
 ## Access CSS variables
 
-1. Import `codex-ui/styles` somewhere in App
+1. Import `@codexteam/ui/styles` somewhere in App
 2. Use variable in CSS, e.g `var(--ui-color)`
 
 ## Using Typography

codex-ui/dev/Playground.vue @codexteam/ui/dev/Playground.vuecodex-ui/dev/Playground.vue renamed to @codexteam/ui/dev/Playground.vue

@@ -1,35 +1,33 @@
 <template>
   <div :class="$style.playground">
-    <div :class="$style.header">
+    <Navbar>
       <a
         :class="$style.logo"
         href="/dev/index.html"
       >
         CodeX UI
       </a>
-      <Tabbar
-        :class="$style.headerRight"
-        :tabs="[{
-          title: 'Figma',
-          id: 'figma-button',
-          picture: 'https://cdn.svgporn.com/logos/figma.svg',
-          link: 'https://www.figma.com/design/YmJc2Vqmev25xZgXic5bjL/CodeX-Design-System?node-id=1288-953&t=PhdeYMJcGnLqT4js-0'
-        }]"
-      />
-    </div>
-    <div :class="$style.body">
-      <div
-        :class="$style.aside"
-      >
+      <template #right>
+        <Tabbar
+          :tabs="[{
+            title: 'Figma',
+            id: 'figma-button',
+            picture: 'https://cdn.svgporn.com/logos/figma.svg',
+            link: 'https://www.figma.com/design/YmJc2Vqmev25xZgXic5bjL/CodeX-Design-System?node-id=1288-953&t=PhdeYMJcGnLqT4js-0'
+          }]"
+        />
+      </template>
+    </Navbar>
+    <PageBlock :stretched="true">
+      <template #left>
         <VerticalMenu
           :items="pages"
         />
-      </div>
-      <div :class="$style.content">
-        <router-view />
-      </div>
-    </div>
+      </template>
+      <router-view />
+    </PageBlock>
     <Popover />
+    <Popup />
   </div>
 </template>
 
@@ -38,9 +36,12 @@ import { computed } from 'vue';
 import {
   VerticalMenu,
   Tabbar,
-  Popover
+  Popover,
+  Popup
 } from '../src/vue';
 import { useTheme } from '../src/vue/composables/useTheme';
+import { Navbar } from '../src/vue/layout/navbar';
+import { PageBlock } from '../src/vue/layout/page-block';
 
 import { useRouter, useRoute } from 'vue-router';
 
@@ -94,6 +95,21 @@ const pages = computed(() => [
       },
     ],
   },
+  {
+    title: 'Layout',
+    items: [
+      {
+        title: 'Navbar',
+        onActivate: () => router.push('/layout/navbar'),
+        isActive: route.path === '/layout/navbar',
+      },
+      {
+        title: 'PageBlock',
+        onActivate: () => router.push('/layout/page-block'),
+        isActive: route.path === '/layout/page-block',
+      },
+    ],
+  },
   {
     title: 'Components',
     items: [
@@ -197,6 +213,16 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/editor'),
         isActive: route.path === '/components/editor',
       },
+      {
+        title: 'Popup',
+        onActivate: () => router.push('/components/popup'),
+        isActive: route.path === '/components/popup',
+      },
+      {
+        title: 'Confirm',
+        onActivate: () => router.push('/components/confirm'),
+        isActive: route.path === '/components/confirm',
+      },
     ],
   },
 ]);
@@ -206,15 +232,6 @@ const pages = computed(() => [
 .playground {
   background-color: var(--base--bg-primary);
   color: var(--base--text);
-  min-height: 100%;
-}
-.header {
-  display: grid;
-  grid-template-columns: auto auto;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--base--border);
-  padding: var(--spacing-xs) var(--spacing-m);
 }
 
 .logo {
@@ -226,12 +243,4 @@ const pages = computed(() => [
   text-decoration: none;
   color: var(--base--text);
 }
-
-.body {
-  padding: var(--spacing-l);
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--spacing-xxl);
-  max-width: 1200px;
-}
 </style>