Alto - YouCan UI Version 3 (#314)

Co-authored-by: mosarabi <149577299+mosarabi@users.noreply.github.com> Co-authored-by: GhitaNektt <152861043+GhitaNektt@users.noreply.github.com> Co-authored-by: Ghita Nekt <ghitanekt@admins-MacBook-Pro.local>
youcan-shop · May 28, 2024 · 8c133c2 · 8c133c2
1 parent 23a5b5e
commit 8c133c2
Show file tree

Hide file tree

Showing 191 changed files with 16,195 additions and 206 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -0,0 +1,32 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: install node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.9.0
+
+      - uses: pnpm/action-setup@v2
+        name: install pnpm
+        with:
+          version: 8.10.0
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/alto
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
@@ -40,7 +40,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: install dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
 
       - name: lint
         run: npm run lint

diff --git a/.github/workflows/storybook-tests.yml b/.github/workflows/storybook-tests.yml
@@ -0,0 +1,36 @@
+name: 'Storybook Tests'
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.9.0
+
+      - uses: pnpm/action-setup@v2
+        name: install pnpm
+        with:
+          version: 8.10.0
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Build Storybook
+        run: pnpm build-storybook --quiet
+        working-directory: packages/alto
+
+      - name: Install wait-on
+        run: pnpm add -D wait-on
+        working-directory: packages/alto
+
+      - name: Serve Storybook and run tests
+        run: pnpm test-storybook:ci
+        working-directory: packages/alto
diff --git a/packages/alto/ .babblerc b/packages/alto/ .babblerc
diff --git a/packages/alto/.storybook/main.ts b/packages/alto/.storybook/main.ts
@@ -0,0 +1,28 @@
+import path from 'path';
+import Unocss from 'unocss/vite';
+
+module.exports = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@chromatic-com/storybook",
+    "storybook-addon-rtl"
+  ],
+  "framework": {
+    "name": "@storybook/vue3-vite",
+    "options": {}
+  },
+  "docs": {
+    autodocs: true
+  },
+  async viteFinal(config, { configType }) {
+    config.resolve.alias['~'] =  `${path.resolve(__dirname, 'src')}/`;
+    config.plugins.push(Unocss);
+    return config;
+  }
+}
diff --git a/packages/alto/.storybook/preview-head.html b/packages/alto/.storybook/preview-head.html
@@ -0,0 +1,16 @@
+<script>
+  window.global = window;
+</script>
+
+<style>
+  .sb-c-preview-text {
+    display: block;
+    padding: 2px;
+    color: black;
+    background-color: white;
+    border-radius: 2px;
+    width: fit-content;
+    margin: 4px 0;
+  }
+
+</style>
diff --git a/packages/alto/.storybook/preview.ts b/packages/alto/.storybook/preview.ts
@@ -0,0 +1,12 @@
+import 'uno.css';
+import '../src/assets/main.css';
+import '@youcan/ui-core/tokens';
+
+export const parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/packages/alto/chromatic.config.json b/packages/alto/chromatic.config.json
@@ -0,0 +1,4 @@
+{
+  "projectId": "Project:66432575dd302195a63c304b",
+  "zip": true
+}
diff --git a/packages/alto/index.html b/packages/alto/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>YouCan-UI</title>
+</head>
+
+<body style="margin: 0;">
+  <div id="app"></div>
+  <script type="module" src="/src/_dev/index.ts"></script>
+</body>
+
+</html>
diff --git a/packages/alto/package.json b/packages/alto/package.json
@@ -0,0 +1,112 @@
+{
+  "name": "@youcan/alto",
+  "version": "0.0.1",
+  "description": "YouCan Vue3 components library",
+  "author": {
+    "name": "YouCan",
+    "email": "tech@youcan.shop",
+    "url": "https://github.com/youcan-shop/"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/youcan-shop/youcan-ui",
+  "keywords": [
+    "youcan",
+    "ui",
+    "vue3",
+    "components"
+  ],
+  "exports": {
+    ".": {
+      "require": {
+        "default": "./dist/index.umd.js",
+        "types": "./dist/types/index.d.ts"
+      },
+      "import": {
+        "default": "./dist/index.es.js",
+        "types": "./dist/types/index.d.ts"
+      }
+    },
+    "./helpers": {
+      "require": "./src/helpers/index.ts",
+      "import": "./src/helpers/index.ts"
+    },
+    "./assets": {
+      "require": "./src/assets/index.ts",
+      "import": "./src/assets/index.ts"
+    },
+    "./style": {
+      "require": "./dist/index.css",
+      "import": "./dist/index.css"
+    },
+    "./types": {
+      "require": "./dist/types/types/index.d.ts",
+      "import": "./dist/types/types/index.d.ts"
+    }
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "./src/helpers",
+    "./src/types"
+  ],
+  "scripts": {
+    "story:dev": "storybook dev -p 6007",
+    "story:build": "storybook build",
+    "components:dev": "vite dev",
+    "components:build": "rimraf dist && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && vite build",
+    "dev": "pnpm story:dev & pnpm components:dev",
+    "build": "pnpm components:build & pnpm story:build",
+    "ship": "pnpm build && bumpp package.json --commit \"[chore]: Release v\" --push --tag && pnpm publish --access public",
+    "lint": "eslint .",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
+    "bench": "node vue3.bench.mjs",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "test-storybook": "test-storybook --url http://127.0.0.1:6007",
+    "test-storybook:ci": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6007 --silent\" \"npx wait-on tcp:6007 && pnpm test-storybook --url http://127.0.0.1:6007\""
+  },
+  "peerDependencies": {
+    "vue": "^3.4.5"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.7",
+    "quill": "^1.3.7",
+    "vue-slicksort": "^2.0.5"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.4",
+    "@iconify-json/line-md": "^1.1.20",
+    "@iconify-json/tabler": "^1.1.53",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/test": "^8.0.10",
+    "@storybook/test-runner": "^0.18.0",
+    "@storybook/vue3": "^8.0.10",
+    "@storybook/vue3-vite": "^8.0.10",
+    "@types/node": "18.7.15",
+    "@types/quill": "^2.0.14",
+    "@vitejs/plugin-vue": "^5.0.2",
+    "@vueuse/core": "^9.9.0",
+    "@youcan/ui-core": "*",
+    "@youcan/ui-icons": "*",
+    "@youcan/ui-visuals": "*",
+    "chromatic": "^11.3.1",
+    "playwright": "^1.44.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "1.54.8",
+    "storybook": "^8.0.10",
+    "storybook-addon-rtl": "^1.0.0",
+    "typescript": "4.8.2",
+    "unocss": "^0.47.6",
+    "vite": "^5.0.11",
+    "vite-bundle-visualizer": "^1.0.1",
+    "vue": "^3.4.5",
+    "vue-tsc": "1.8.27"
+  }
+}
diff --git a/packages/alto/src/_dev/App.vue b/packages/alto/src/_dev/App.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import 'uno.css';
+import '../assets/main.css';
+import { ref, watch } from 'vue';
+import { Upload, UploadPreview } from '~/components';
+
+const attachments = ref<File[]>([]);
+const disabled = ref(false);
+const limit = 5;
+const file = new File(['meditations_marcus_aurelius'], 'Meditations.pdf', {
+  type: 'application/pdf',
+});
+const media = new File(['meditations_marcus_aurelius'], 'Meditations.jpg', {
+  type: 'image/*',
+});
+
+const checkLimit = () => {
+  disabled.value = attachments.value.length >= limit;
+};
+
+const deleteFile = (file: File) => {
+  const idx = attachments.value.indexOf(file);
+  if (idx > -1) {
+    attachments.value.splice(idx, 1);
+    checkLimit();
+  }
+};
+watch(attachments, () => {
+  checkLimit();
+});
+</script>
+
+<template>
+  <div class="container">
+    <Upload v-model="attachments" :limit="limit" :disabled="disabled" accept=".pdf, image/jpeg, video/*" />
+  </div>
+  <div class="container">
+    <div class="files-grid">
+      <UploadPreview
+        v-for="(attachment, index) in attachments"
+        :key="index"
+        :file="attachment"
+        @delete="deleteFile(attachment)"
+      />
+    </div>
+  </div>
+  <div class="container">
+    <div class="files-grid">
+      <UploadPreview
+        :progress="10" :file="file"
+      />
+      <UploadPreview :file="file" />
+      <UploadPreview :file="file" error="Failed to upload file" />
+      <UploadPreview :file="media" />
+      <UploadPreview :file="media" error="Failed to upload file" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 500px;
+  height: 100vh;
+  margin: auto;
+  padding: 0 40px;
+  gap: 40px;
+}
+</style>
diff --git a/packages/alto/src/_dev/index.ts b/packages/alto/src/_dev/index.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'uno.css';
+import '@youcan/ui-core/tokens';
+
+const app = createApp(App, {});
+
+app.mount('#app');
diff --git a/packages/alto/src/assets/index.ts b/packages/alto/src/assets/index.ts
@@ -0,0 +1,2 @@
+import 'uno.css';
+import './main.css';
diff --git a/packages/alto/src/assets/main.css b/packages/alto/src/assets/main.css
@@ -0,0 +1,9 @@
+@font-face {
+  font-family: Mona-sans;
+  src: url("https://ui-assets.ycdn.store/fonts/Mona-Sans.ttf");
+}
+
+@font-face {
+  font-family: DroidKufi;
+  src: url("https://ui-assets.ycdn.store/fonts/DroidKufi-Regular.ttf");
+}