Feat/lib 1271 fzlayout

apps/storybook/package.json

@@ -37,6 +37,7 @@
     "@fiscozen/dropdown": "workspace:^",
     "@fiscozen/icons": "workspace:^",
     "@fiscozen/input": "workspace:^",
+    "@fiscozen/layout": "workspace:^",
     "@fiscozen/link": "workspace:^",
     "@fiscozen/navbar": "workspace:^",
     "@fiscozen/navlink": "workspace:^",

apps/storybook/src/stories/Layout.stories.ts

@@ -0,0 +1,197 @@
+import type { Meta } from '@storybook/vue3'
+import { FzLayout, FzLayoutProps } from '@fiscozen/layout'
+
+const meta: Meta<typeof FzLayout> = {
+  title: '@fiscozen/layout/FzLayout',
+  component: FzLayout,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  decorators: [
+    () => ({
+      template: `
+      <div class="opacity">
+        <div>
+          <story /> 
+        </div>
+      </div>
+      `
+    })
+  ]
+}
+
+const leftShoulder = (args: FzLayoutProps) => ({
+  setup() {
+    return { args }
+  },
+  components: {FzLayout},
+  template: `
+    <FzLayout v-bind="args">
+      <div class="w-full h-full bg-red-100"></div>
+      <div class="w-full h-full bg-green-100"></div>
+    </FzLayout>
+  `
+})
+
+export const LeftShoulder = {
+  render: leftShoulder,
+  args: {
+    layout: 'leftShoulder'
+  }
+}
+
+const twoColumns = (args: FzLayoutProps) => ({
+  setup() {
+    return { args }
+  },
+  components: {FzLayout},
+  template: `
+    <FzLayout v-bind="args">
+      <div class="w-full h-full bg-red-100"></div>
+      <div class="w-full h-full bg-green-100"></div>
+    </FzLayout>
+  `
+})
+
+export const TwoColumns = {
+  render: twoColumns,
+  args: {
+    layout: 'twoColumns'
+  }
+}
+
+
+const multipleRows = (args: FzLayoutProps) => ({
+  setup() {
+    return { args }
+  },
+  components: {FzLayout},
+  template: `
+    <FzLayout v-bind="args">
+      <div class="w-full h-full bg-red-100"></div>
+      <div class="w-full h-full bg-green-100"></div>
+      <div class="w-full h-full bg-orange-200"></div>
+      <div class="w-full h-full bg-cyan-100"></div>
+    </FzLayout>
+  `
+})
+
+const leftShoulderNavbar = (args: FzLayoutProps) => ({
+  setup() {
+    return { args }
+  },
+  components: {FzLayout},
+  template: `
+    <FzLayout v-bind="args">
+      <template #navbar>
+        <div class="w-full h-full bg-red-100"></div>
+      </template>
+      <template #header>
+        <div class="w-full h-full bg-green-100"></div>
+      </template>
+      <template #left-shoulder>
+        <div class="w-full h-full bg-orange-200"></div>
+      </template>
+      <template #default>
+        <div class="w-full h-full bg-cyan-100"></div>
+      </template>
+    </FzLayout>
+  `
+})
+
+export const LeftShoulderNavbar = {
+  render: leftShoulderNavbar,
+  args: {
+    layout: 'leftShoulderNavbar'
+  }
+}
+
+const rightShoulderNavbar = (args: FzLayoutProps) => ({
+  setup() {
+    return { args }
+  },
+  components: {FzLayout},
+  template: `
+    <FzLayout v-bind="args">
+      <template #navbar>
+        <div class="w-full h-full bg-red-100"></div>
+      </template>
+      <template #header>
+        <div class="w-full h-full bg-green-100"></div>
+      </template>
+      <template #right-shoulder>
+        <div class="w-full h-full bg-orange-200"></div>
+      </template>
+      <template #default>
+        <div class="w-full h-full bg-cyan-100"></div>
+      </template>
+    </FzLayout>
+  `
+})
+
+export const RightShoulderNavbar = {
+  render: rightShoulderNavbar,
+  args: {
+    layout: 'rightShoulderNavbar'
+  }
+}
+
+export const MultipleRows = {
+  render: multipleRows,
+  args: {
+    layout: 'multipleRows'
+  }
+}
+
+const squares = (args: FzLayoutProps) => ({
+  setup() {
+    return { args }
+  },
+  components: {FzLayout},
+  template: `
+    <FzLayout v-bind="args">
+      <div class="w-full h-full bg-red-100"></div>
+      <div class="w-full h-full bg-green-100"></div>
+      <div class="w-full h-full bg-orange-200"></div>
+      <div class="w-full h-full bg-cyan-100"></div>
+      <div class="w-full h-full bg-slate-100"></div>
+      <div class="w-full h-full bg-purple-100"></div>
+    </FzLayout>
+  `
+})
+
+export const Squares = {
+  render: squares,
+  args: {
+    layout: 'squares'
+  }
+}
+
+const shoulderWithSquares = (args: FzLayoutProps) => ({
+  setup() {
+    return { args }
+  },
+  components: {FzLayout},
+  template: `
+    <FzLayout v-bind="args">
+      <template #main>
+        <div class="w-full h-full bg-red-100"></div>
+      </template>
+      <template #shoulder>
+        <div class="h-full w-full bg-green-100"></div>
+        <div class="h-full w-full bg-orange-200"></div>
+        <div class="h-full w-full bg-cyan-100"></div>
+        <div class="h-full w-full bg-slate-100"></div>
+      </template>
+    </FzLayout>
+  `
+})
+
+export const ShoulderWithSquares = {
+  render: shoulderWithSquares,
+  args: {
+    layout: 'rightShoulder',
+  }
+}
+
+export default meta

apps/storybook/tailwind.config.js

@@ -10,6 +10,7 @@ export default {
         "./node_modules/@fiscozen/input/src/**/*.{html,js,ts,vue}",
         "./node_modules/@fiscozen/typeahead/src/**/*.{html,js,ts,vue}",
         "./node_modules/@fiscozen/datepicker/src/**/*.{html,js,ts,vue}",
-        "./node_modules/@fiscozen/divider/src/**/*.{html,js,ts,vue}"
+        "./node_modules/@fiscozen/divider/src/**/*.{html,js,ts,vue}",
+        "./node_modules/@fiscozen/layout/src/**/*.{html,js,ts,vue}"
     ],
 }

packages/layout/README.md

@@ -0,0 +1,3 @@
+# @fiscozen/layout
+
+TODO

packages/layout/eslintrc.cjs

@@ -0,0 +1,18 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': ['@fiscozen/eslint-config', 'plugin:storybook/recommended'],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        'cypress/support/**/*.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ]
+}

packages/layout/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@fiscozen/layout",
+  "version": "0.1.0",
+  "description": "Design System Layout component",
+  "scripts": {
+    "coverage": "vitest run --coverage",
+    "format": "prettier --write src/",
+    "test:unit": "vitest run",
+    "build": "vue-tsc && vite build"
+  },
+  "main": "src/index.ts",
+  "type": "module",
+  "keywords": [],
+  "author": "Riccardo Agnoletto",
+  "peerDependencies": {
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.13"
+  },
+  "devDependencies": {
+    "@fiscozen/eslint-config": "workspace:^",
+    "@fiscozen/prettier-config": "workspace:^",
+    "@fiscozen/tsconfig": "workspace:^",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "eslint": "^8.49.0",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.8.3",
+    "vitest": "^1.2.0",
+    "vue-tsc": "^1.8.25"
+  },
+  "license": "MIT"
+}

packages/layout/prettierrc.js

@@ -0,0 +1,5 @@
+import fiscozenPrettierConfig from '@fiscozen/prettier-config';
+
+export default {
+    ...fiscozenPrettierConfig
+};

packages/layout/src/FzLayout.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="fz-layout w-dvw h-dvh grid gap-10 p-16" :class="layoutClass">
+        <template v-if="['multipleRows', 'twoColumns', 'leftShoulder', 'squares'].includes(props.layout)">
+            <slot></slot>
+        </template>
+        <template v-if="props.layout === 'leftShoulderNavbar'">
+            <div class="col-span-2">
+                <slot name="navbar"></slot>
+            </div>
+            <div class="col-span-2">
+                <slot name="header"></slot>
+            </div>
+            <div class="col-span-2 lg:col-span-1">
+                <slot name="left-shoulder"></slot>
+            </div>
+            <div class="col-span-2 lg:col-span-1">
+                <slot></slot>
+            </div>
+        </template>
+        <template v-if="props.layout === 'rightShoulderNavbar'">
+            <div class="col-span-2">
+                <slot name="navbar"></slot>
+            </div>
+            <div class="col-span-2">
+                <slot name="header"></slot>
+            </div>
+            <div class="col-span-2 lg:col-span-1">
+                <slot></slot>
+            </div>
+            <div class="col-span-2 lg:col-span-1">
+                <slot name="right-shoulder"></slot>
+            </div>
+        </template>
+        <template v-if="props.layout === 'rightShoulder'">
+            <div class="col-span-2 row-start-2 lg:col-span-1 lg:row-start-1">
+                <slot name="main"></slot>
+            </div>
+            <div class="fz-layout__shoulder gap-10 overflow-auto col-span-2 lg:col-span-1 flex flex-row lg:flex-col">
+                <slot name="shoulder"></slot>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { FzLayoutProps } from './types'
+
+const props = withDefaults(defineProps<FzLayoutProps>(), {})
+
+const emit = defineEmits([])
+
+const layoutClass = computed(() => {
+    let res = undefined;
+    switch (props.layout) {
+        case 'multipleRows':
+            res = 'grid-rows-auto'
+            break;
+        case 'twoColumns':
+            res = 'grid-cols-1 grid-rows-[60px_1fr] lg:grid-rows-1 lg:grid-cols-2'
+            break;
+        case 'leftShoulder':
+            res = 'grid-rows-[60px_1fr] grid-cols-1 lg:grid-rows-1 lg:grid-cols-[260px_1fr]'
+            break;
+        case 'leftShoulderNavbar':
+            res = 'grid-rows-[40px_160px_60px_1fr] grid-cols-1 lg:grid-rows-[40px_160px_1fr] lg:grid-cols-[260px_1fr]'
+            break;
+        case 'rightShoulderNavbar':
+            res = 'grid-rows-[40px_160px_60px_1fr] grid-cols-1 lg:grid-rows-[40px_160px_1fr] lg:grid-cols-[1fr_260px]'
+            break;
+        case 'squares':
+            res = 'grid-cols-1 grid-rows-auto sm:grid-cols-2 sm:grid-rows-auto md:grid-cols-3 md:grid-rows-auto auto-rows-[332px]'
+            break;
+        case 'rightShoulder':
+            res = 'grid-cols-1 grid-rows-[216px_1fr] lg:grid-cols-[1fr_260px] lg:grid-rows-1 no-scrollbar'
+            break;
+        default:
+            break;
+    }
+    return res;
+});
+
+</script>
+
+<style scoped>
+:deep(.fz-layout__shoulder > *) {
+    @apply h-[216px] w-[260px] shrink-0;
+}
+.fz-layout__shoulder::-webkit-scrollbar {
+    display: none;
+}
+.fz-layout__shoulder {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+</style>