diff --git a/.changeset/README.md b/.changeset/README.md new file mode 100644 index 00000000..e5b6d8d6 --- /dev/null +++ b/.changeset/README.md @@ -0,0 +1,8 @@ +# Changesets + +Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works +with multi-package repos, or single-package repos to help you version and publish your code. You can +find the full documentation for it [in our repository](https://github.com/changesets/changesets) + +We have a quick list of common questions to get you started engaging with this project in +[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) diff --git a/.changeset/config.json b/.changeset/config.json new file mode 100644 index 00000000..1e226fbf --- /dev/null +++ b/.changeset/config.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", + "changelog": "@changesets/cli/changelog", + "commit": false, + "fixed": [], + "linked": [], + "access": "public", + "baseBranch": "feat/2.0.0-beta", + "updateInternalDependencies": "patch", + "ignore": [] +} diff --git a/.eslintignore b/.eslintignore index 9d2bbb08..3b9233a5 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,6 @@ node_modules dist pnpm-lock.yaml -CHANGELOG.en-US.md +storybook-static +coverage !.* diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 00000000..0ff6b6c7 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,30 @@ +const { defineConfig } = require('eslint-define-config'); + +module.exports = defineConfig({ + root: true, + parser: 'vue-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser', + ecmaVersion: 'latest', + sourceType: 'module', + extraFileExtensions: ['.vue'], + project: ['./tsconfig.eslint.json'] + }, + env: { + browser: true, + node: true + }, + extends: [ + '@prestashopcorp/eslint-config-ts', + 'plugin:vue/vue3-recommended' + ], + rules: { + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/restrict-template-expressions': 'off', + '@typescript-eslint/strict-boolean-expressions': 'off', + '@typescript-eslint/consistent-type-definitions': 'off', + '@typescript-eslint/consistent-type-assertions': 'off', + '@typescript-eslint/restrict-plus-operands': 'off', + 'no-template-curly-in-string': 'off' + } +}); diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 2eb3363c..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,121 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -const { defineConfig } = require('eslint-define-config') - -module.exports = defineConfig({ - root: true, - parser: 'vue-eslint-parser', - parserOptions: { - parser: '@typescript-eslint/parser', - sourceType: 'module', - ecmaFeatures: { - jsx: true, - tsx: true, - }, - }, - env: { - browser: true, - node: true, - }, - globals: { - jest: 'readonly', - }, - plugins: ['@typescript-eslint', 'prettier', 'import'], - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:vue/vue3-recommended', - 'prettier', - ], - overrides: [ - { - files: ['*.ts', '*.vue'], - rules: { - 'no-undef': 'off', - }, - }, - { - files: ['**/__tests__/**', '**/gulpfile.ts'], - rules: { - 'no-console': 'off', - }, - }, - ], - rules: { - // js/ts - 'no-console': ['warn', { allow: ['error'] }], - 'no-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'], - camelcase: ['error', { properties: 'never' }], - - 'no-var': 'error', - 'no-empty': ['error', { allowEmptyCatch: true }], - 'no-void': 'error', - 'prefer-const': [ - 'warn', - { destructuring: 'all', ignoreReadBeforeAssign: true }, - ], - 'prefer-template': 'error', - 'object-shorthand': [ - 'error', - 'always', - { ignoreConstructors: false, avoidQuotes: true }, - ], - 'block-scoped-var': 'error', - 'no-constant-condition': ['error', { checkLoops: false }], - - '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/no-explicit-any': 'off', - '@typescript-eslint/no-non-null-assertion': 'off', - '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', - '@typescript-eslint/consistent-type-imports': [ - 'error', - { disallowTypeAnnotations: false }, - ], - - // vue - 'vue/no-v-html': 'off', - 'vue/require-default-prop': 'off', - 'vue/require-explicit-emits': 'off', - 'vue/multi-word-component-names': 'off', - 'vue/prefer-import-from-vue': 'off', - - // prettier - 'prettier/prettier': 'error', - - // import - 'import/first': 'error', - 'import/no-duplicates': 'error', - 'import/order': [ - 'error', - { - groups: [ - 'builtin', - 'external', - 'internal', - 'parent', - 'sibling', - 'index', - 'object', - 'type', - ], - - pathGroups: [ - { - pattern: 'vue', - group: 'external', - position: 'before', - }, - { - pattern: '@vue/**', - group: 'external', - position: 'before', - }, - { - pattern: '@puik/**', - group: 'internal', - }, - ], - pathGroupsExcludedImportTypes: ['type'], - }, - ], - }, -}) diff --git a/.github/actions/build-and-publish/action.yml b/.github/actions/build-and-publish/action.yml index 6077b728..397f7bc7 100644 --- a/.github/actions/build-and-publish/action.yml +++ b/.github/actions/build-and-publish/action.yml @@ -25,12 +25,12 @@ runs: using: 'composite' steps: - - name: Set version - shell: bash - run: | - git config user.email "${{ inputs.git_author_email }}" - git config user.name "Github action" - npm version ${{ inputs.version }} --allow-same-version + # - name: Set version + # shell: bash + # run: | + # git config user.email "${{ inputs.git_author_email }}" + # git config user.name "Github action" + # npm version ${{ inputs.version }} --allow-same-version - name: Setup pnpm uses: pnpm/action-setup@v2 diff --git a/.github/renovate.json5 b/.github/renovate.json5 index b1a7e511..77ca4a84 100644 --- a/.github/renovate.json5 +++ b/.github/renovate.json5 @@ -11,9 +11,6 @@ }, ], ignoreDeps: [ - // Latest breaks build - 'ts-morph', - 'type-fest', // MDX style is broken for 0.4.x '@storybook/builder-vite', ], diff --git a/.github/workflows/cd-publish-beta-release.yml b/.github/workflows/cd-publish-beta-release.yml new file mode 100644 index 00000000..b950f5b5 --- /dev/null +++ b/.github/workflows/cd-publish-beta-release.yml @@ -0,0 +1,47 @@ +name: Publish beta + +on: + push: + tags: + - '*beta*' + +jobs: + publish-github-packages: + name: Publish beta on registry + runs-on: ubuntu-latest + + permissions: + contents: read + packages: write + + steps: + - name: Get tag + id: get_tag + run: echo ::set-output name=TAG::$(echo $GITHUB_REF | cut -d / -f 3) + + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: 9.1.2 + + - name: Setup node env ๐Ÿ— + uses: actions/setup-node@v3 + with: + node-version: lts/hydrogen + registry-url: https://registry.npmjs.org/ + cache: "pnpm" + + - name: Install dependencies ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป + run: pnpm i --frozen-lockfile + + - name: Build + run: pnpm build + + - name: Publish beta + run: pnpm -r --filter './packages/**' publish --no-git-checks --access public --tag beta + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + VERSION: ${{ steps.get_tag.outputs.TAG }} \ No newline at end of file diff --git a/.github/workflows/cd-publish-package.yml b/.github/workflows/cd-publish-package.yml deleted file mode 100644 index 27a313fb..00000000 --- a/.github/workflows/cd-publish-package.yml +++ /dev/null @@ -1,37 +0,0 @@ -name: Publish package for Production - -on: - push: - tags: - - '*' - -jobs: - publish-github-packages: - name: Publish on registry - runs-on: ubuntu-latest - - permissions: - contents: read - packages: write - - steps: - - name: Checkout repository - uses: actions/checkout@v3 - - - name: Get tag - id: get_tag - run: echo ::set-output name=TAG::$(echo $GITHUB_REF | cut -d / -f 3) - - - name: Get git head - id: get_head - run: echo ::set-output name=GIT_HEAD::$(echo $GITHUB_SHA) - - - name: Build and Publish - uses: ./.github/actions/build-and-publish - with: - git_author_email: squad-engagement@prestashop.com - node_version: 18 - github_token: ${{ secrets.GITHUB_TOKEN }} - npm_token: ${{ secrets.NPM_TOKEN }} - version: ${{ steps.get_tag.outputs.TAG }} - git_head: ${{ steps.get_head.outputs.GIT_HEAD }} diff --git a/.github/workflows/cd-publish-release.yml b/.github/workflows/cd-publish-release.yml new file mode 100644 index 00000000..ed6be352 --- /dev/null +++ b/.github/workflows/cd-publish-release.yml @@ -0,0 +1,47 @@ +name: Publish Release + +on: + release: + types: [published] + +jobs: + publish-github-packages: + name: Publish on registry + runs-on: ubuntu-latest + if: success() && !contains(github.ref, 'beta') + + permissions: + contents: read + packages: write + + steps: + - name: Get tag + id: get_tag + run: echo ::set-output name=TAG::${GITHUB_REF#refs/tags/} + + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: 9.1.2 + + - name: Setup node env ๐Ÿ— + uses: actions/setup-node@v3 + with: + node-version: lts/hydrogen + registry-url: https://registry.npmjs.org/ + cache: "pnpm" + + - name: Install dependencies ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป + run: pnpm i --frozen-lockfile + + - name: Build + run: pnpm build + + - name: Publish + run: pnpm -r --filter './packages/**' publish --no-git-checks --access public + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + VERSION: ${{ steps.get_tag.outputs.TAG }} diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index dd96dfaf..ad867436 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -27,12 +27,12 @@ jobs: - name: Setup node version uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: Setup pnpm uses: pnpm/action-setup@v2 with: - version: 8 + version: 9.1.2 - name: Install dependencies run: pnpm i --frozen-lockfile diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 3314b230..9773b10d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -18,7 +18,7 @@ jobs: - name: Setup pnpm uses: pnpm/action-setup@v2 with: - version: 8 + version: 9.1.2 - name: Setup node env ๐Ÿ— uses: actions/setup-node@v3.6.0 @@ -44,7 +44,4 @@ jobs: run: pnpm lint - name: Run tests ๐Ÿงช - run: pnpm test - - - name: Run coverage ๐Ÿ“ˆ run: pnpm coverage diff --git a/.gitignore b/.gitignore index e6f9e342..e024bc0e 100644 --- a/.gitignore +++ b/.gitignore @@ -17,4 +17,8 @@ packages/puik/version.ts *.local # playground test file -playground/src/App.vue \ No newline at end of file +playground/src/App.vue +storybook-static + +# Ignore the packages-tars directory +/packages-tars/ \ No newline at end of file diff --git a/.husky/pre-commit b/.husky/pre-commit index 5b22231f..80480adf 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,5 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -pnpm exec lint-staged -pnpm exec pretty-quick --staged +pnpm exec lint-staged \ No newline at end of file diff --git a/.npmrc b/.npmrc index cf040424..903dad5d 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,3 @@ shamefully-hoist=true strict-peer-dependencies=false +save-workspace-protocol=true diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 69cf68df..00000000 --- a/.prettierignore +++ /dev/null @@ -1,5 +0,0 @@ -dist -node_modules -coverage -CHANGELOG.en-US.md -pnpm-lock.yaml diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index f4ccd33b..00000000 --- a/.prettierrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "semi": false, - "singleQuote": true, - "overrides": [ - { - "files": ".prettierrc", - "options": { - "parser": "json" - } - } - ] -} diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 80b7ae08..00e5b398 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,11 +1,11 @@ { "recommendations": [ - "Vue.volar", - "Vue.vscode-typescript-vue-plugin", + "vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "antfu.vite", "lokalise.i18n-ally", - "ZixuanChen.vitest-explorer" + "vitest.explorer", + "davidanson.vscode-markdownlint" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 329afa6d..817c3034 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,8 +12,7 @@ "typescript", "typescriptreact", "html", - "vue", - "markdown" + "vue" ], "eslint.validate": [ "javascript", @@ -21,13 +20,15 @@ "typescript", "typescriptreact", "html", - "vue", - "markdown" + "vue" ], "css.customData": [".vscode/tailwind.json"], "vite.devCommand": "pnpm run dev -- --", "i18n-ally.localesPaths": "packages/locale/lang", "i18n-ally.enabledParsers": ["ts"], "i18n-ally.enabledFrameworks": ["vue", "vue-sfc"], - "i18n-ally.keystyle": "nested" + "i18n-ally.keystyle": "nested", + "vue3snippets.trailingComma": "none", + "prettier.trailingComma": "none", + "eslint.format.enable": true } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3bbf6981..25786c9e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,12 +10,35 @@ If you want to contribute to this project, make your PR from a feature branch to โš ๏ธ We use `commitlint` for conventional commit format. ([How to use](https://github.com/conventional-changelog/commitlint)) +You can also use [commitizen](https://github.com/commitizen/cz-cli) to create your commit with an interactive command line to respect our commit conventions + +```sh +$ pnpm cz +``` + +## Mono repository structure + +This mono repository contains multiple packages under the folder `packages` +- `components` contains all the vue components and is released under the name `@prestashopcorp/puik-components` +- `locale` contains all the translations files for the default wording in the components, this package is bundled with the other packages when it's used and isn't released as a standalone +- `puik` contains all the other packages and is released under the name `@prestashopcorp/puik` +- `resolver` contains the code of the vue component resolver for [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) and is released under the name `@prestashopcorp/puik-resolver` +- `tailwind-preset` contains the [Tailwind Css](https://tailwindcss.com/) preset and is released under the name `@prestashopcorp/puik-tailwind-preset` +- `theme` contains all the CSS classes used in our components and is released under the name `@prestashopcorp/puik-theme` +- `utils` contains all the utility functions used across our packages, this package is bundled with the other packages when it's used and isn't released as a standalone + +The `playground` folder contains a Vue 3 to help you develop your components + +The `docs` folder contains the configuration and the global documentation of the [Storybook](https://storybook.js.org/) + +โ„น๏ธ All the packages with the `private: true` property in the `package.json` aren't released but bundled when used + ## Development ### Prerequisites -- NodeJS >= 16 -- [PNPM 6 or higher](https://pnpm.io/) +- NodeJS >= 18 +- [PNPM 8 or higher](https://pnpm.io/) ### Local development @@ -35,7 +58,7 @@ $ pnpm dev ```vue + + diff --git a/packages/components/accordion/src/accordion.ts b/packages/components/accordion/src/accordion.ts index 100990aa..a5cc8505 100644 --- a/packages/components/accordion/src/accordion.ts +++ b/packages/components/accordion/src/accordion.ts @@ -1,46 +1,13 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type accordion from './accordion.vue' - -export const accordionProps = buildProps({ - name: { - type: String, - required: true, - }, - title: { - type: String, - required: false, - default: undefined, - }, - subTitle: { - type: String, - required: false, - default: undefined, - }, - icon: { - type: String, - required: false, - default: undefined, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - borderNone: { - type: Boolean, - required: false, - default: false, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) - -export const accordionEmits = ['click'] - -export type AccordionProps = ExtractPropTypes - -export type AccordionInstance = InstanceType +import type accordion from './accordion.vue'; + +export interface AccordionProps { + name: string + title?: string + subTitle?: string + icon?: string + disabled?: boolean + borderNone?: boolean + dataTest?: string +} + +export type AccordionInstance = InstanceType; diff --git a/packages/components/accordion/src/accordion.vue b/packages/components/accordion/src/accordion.vue index 9ca3ccd2..986ffd08 100644 --- a/packages/components/accordion/src/accordion.vue +++ b/packages/components/accordion/src/accordion.vue @@ -22,7 +22,7 @@ :icon="icon" :font-size="24" :data-test="dataTest != undefined ? `icon-${dataTest}` : undefined" - > + />
+ /> -
- +
+
+ + diff --git a/packages/components/accordion/stories/accordion-group.stories.ts b/packages/components/accordion/stories/accordion-group.stories.ts index ced20934..ec726bda 100644 --- a/packages/components/accordion/stories/accordion-group.stories.ts +++ b/packages/components/accordion/stories/accordion-group.stories.ts @@ -1,7 +1,6 @@ -import { ref } from 'vue' -import PuikAccordionGroup from '../src/accordion-group.vue' -import PuikAccordion from '../src/accordion.vue' -import type { Meta, StoryFn, Args } from '@storybook/vue3' +import { ref } from 'vue'; +import { PuikAccordion, PuikAccordionGroup } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Accordion/AccordionGroup', @@ -12,18 +11,18 @@ export default { description: 'Allow multiple accordions to be expanded', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, contained: { control: 'boolean', description: 'Remove space between accordion', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, modelValue: { control: 'select', @@ -31,29 +30,29 @@ export default { description: 'v-model to control expanded accordions', table: { defaultValue: { - summary: 'null', - }, - }, + summary: 'null' + } + } }, default: { control: 'none', - description: 'Accordions slots', - }, + description: 'Accordions slots' + } }, args: { multiple: false, - modelValue: 'accordion-2', - }, -} as Meta + modelValue: 'accordion-2' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikAccordionGroup, - PuikAccordion, + PuikAccordion }, setup() { - const expandedAccordions = ref('accordion-1') - return { args, expandedAccordions } + const expandedAccordions = ref('accordion-1'); + return { args, expandedAccordions }; }, template: ` @@ -67,15 +66,15 @@ const Template: StoryFn = (args: Args) => ({ Content 3 - `, -}) + ` +}); export const Default = { render: Template, args: { multiple: false, - contained: false, + contained: false }, parameters: { @@ -140,11 +139,11 @@ export const Default = {
`, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Multiple = { render: Template, @@ -152,7 +151,7 @@ export const Multiple = { args: { multiple: true, contained: false, - modelValue: ['accordion-1', 'accordion-2', 'accordion-3'], + modelValue: ['accordion-1', 'accordion-2', 'accordion-3'] }, parameters: { @@ -208,18 +207,18 @@ export const Multiple = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Contained = { render: Template, args: { multiple: false, - contained: true, + contained: true }, parameters: { @@ -275,8 +274,8 @@ export const Contained = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/accordion/stories/accordion.stories.ts b/packages/components/accordion/stories/accordion.stories.ts index c566d4ad..c0bb327a 100644 --- a/packages/components/accordion/stories/accordion.stories.ts +++ b/packages/components/accordion/stories/accordion.stories.ts @@ -1,6 +1,5 @@ -import PuikAccordionGroup from '../src/accordion-group.vue' -import PuikAccordion from '../src/accordion.vue' -import type { Meta, StoryFn, Args } from '@storybook/vue3' +import { PuikAccordion, PuikAccordionGroup } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Accordion/Accordion', @@ -9,58 +8,58 @@ export default { name: { control: 'text', description: - 'name used by parent AccordionGroup to expand/collapse accordion', + 'name used by parent AccordionGroup to expand/collapse accordion' }, title: { control: 'text', - description: 'Title displayed in the header', + description: 'Title displayed in the header' }, subTitle: { control: 'text', - description: 'Sub title displayed in the header', + description: 'Sub title displayed in the header' }, icon: { control: 'text', - description: 'Icon used in the header', + description: 'Icon used in the header' }, disabled: { control: 'boolean', description: 'Set accordion disabled', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, default: { control: 'none', - description: 'Accordion content', + description: 'Accordion content' }, borderNone: { control: 'boolean', description: 'remove borders', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, dataTest: { control: 'text', description: - 'Set the data-test attribute for the accordion `button-${dataTest}` `title-${dataTest}` `icon-${dataTest}` `subTitle-${dataTest}`', - }, - }, -} as Meta + 'Set the data-test attribute for the accordion `button-${dataTest}` `title-${dataTest}` `icon-${dataTest}` `subTitle-${dataTest}`' + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikAccordionGroup, - PuikAccordion, + PuikAccordion }, args: {}, setup() { - return { args } + return { args }; }, template: ` @@ -68,8 +67,8 @@ const Template: StoryFn = (args: Args) => ({ Content 1 - `, -}) + ` +}); export const Default = { render: Template, @@ -79,7 +78,7 @@ export const Default = { title: 'Accordion title', subTitle: 'Accordion subtitle', icon: 'home', - disabled: false, + disabled: false }, parameters: { @@ -119,11 +118,11 @@ export const Default = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Disabled = { render: Template, @@ -133,7 +132,7 @@ export const Disabled = { name: 'accordion-1', title: 'Disabled accordion title', subTitle: 'Disabled accordion sub-title', - icon: 'home', + icon: 'home' }, parameters: { @@ -162,11 +161,11 @@ export const Disabled = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const NoBorders = { render: Template, @@ -176,7 +175,7 @@ export const NoBorders = { title: 'Accordion title', subTitle: 'Accordion subtitle', icon: 'home', - borderNone: true, + borderNone: true }, parameters: { @@ -205,8 +204,8 @@ export const NoBorders = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/accordion/style/css.ts b/packages/components/accordion/style/css.ts index a68e01f8..6407e3e3 100644 --- a/packages/components/accordion/style/css.ts +++ b/packages/components/accordion/style/css.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-accordion.css' -import '@puik/theme/puik-icon.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-accordion.css'; +import '@prestashopcorp/puik-theme/puik-icon.css'; diff --git a/packages/components/accordion/style/index.ts b/packages/components/accordion/style/index.ts index b4827eca..d69c0c65 100644 --- a/packages/components/accordion/style/index.ts +++ b/packages/components/accordion/style/index.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style' -import '@puik/theme/src/accordion.scss' -import '@puik/theme/src/icon.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-accordion.scss'; +import '@prestashopcorp/puik-theme/src/puik-icon.scss'; diff --git a/packages/components/accordion/test/accordion-group.spec.ts b/packages/components/accordion/test/accordion-group.spec.ts index 37c18b91..99cadedd 100644 --- a/packages/components/accordion/test/accordion-group.spec.ts +++ b/packages/components/accordion/test/accordion-group.spec.ts @@ -1,28 +1,26 @@ -import { nextTick } from 'vue' -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikAccordionGroup from '../src/accordion-group.vue' -import PuikAccordion from '../src/accordion.vue' -import { getAccordion, getAccordionHeader } from './accordion.spec' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' - -let wrapper: VueWrapper -const factory = (template: string, options: MountingOptions = {}) => { +import { nextTick } from 'vue'; +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikAccordion, PuikAccordionGroup } from '@prestashopcorp/puik-components'; +import { getAccordion, getAccordionHeader } from './accordion.spec'; + +let wrapper: VueWrapper; +const factory = (template: string, options: ComponentMountingOptions = {}) => { wrapper = mount({ components: { 'puik-accordion-group': PuikAccordionGroup, - 'puik-accordion': PuikAccordion, + 'puik-accordion': PuikAccordion }, template, - ...options, - }) -} + ...options + }); +}; -const rootClass = 'puik-accordion' -const expandedClass = 'puik-accordion--expanded' +const rootClass = 'puik-accordion'; +const expandedClass = 'puik-accordion--expanded'; -const getAccordionGroup = () => wrapper.find('.puik-accordion-group') -const getAccordions = () => wrapper.findAll(`.${rootClass}`) +const getAccordionGroup = () => wrapper.find('.puik-accordion-group'); +const getAccordions = () => wrapper.findAll(`.${rootClass}`); describe('AccordionGroup collapse/expand tests', () => { it('should be a vue instance', () => { @@ -38,10 +36,10 @@ describe('AccordionGroup collapse/expand tests', () => { Content 3 - ` - factory(template) - expect(wrapper).toBeTruthy() - }) + `; + factory(template); + expect(wrapper).toBeTruthy(); + }); it('should accordion be expanded', () => { const template = ` @@ -50,12 +48,12 @@ describe('AccordionGroup collapse/expand tests', () => { Content 1 - ` - factory(template) + `; + factory(template); - const accordion = getAccordion(wrapper) - expect(accordion.classes()).toContain(expandedClass) - }) + const accordion = getAccordion(wrapper); + expect(accordion.classes()).toContain(expandedClass); + }); it('should accordions title have aria-expanded', () => { const template = ` @@ -67,15 +65,15 @@ describe('AccordionGroup collapse/expand tests', () => { Content 2 - ` - factory(template) + `; + factory(template); const accordionsHeaders = getAccordions().map((accordion) => getAccordionHeader(accordion) - ) - expect(accordionsHeaders[0].attributes('aria-expanded')).toBe('true') - expect(accordionsHeaders[1].attributes('aria-expanded')).toBe('false') - }) + ); + expect(accordionsHeaders[0].attributes('aria-expanded')).toBe('true'); + expect(accordionsHeaders[1].attributes('aria-expanded')).toBe('false'); + }); it('should have multiple accordions expanded', () => { const template = ` @@ -90,13 +88,13 @@ describe('AccordionGroup collapse/expand tests', () => { Content 3 - ` - factory(template) + `; + factory(template); - const accordionsExpanded = wrapper.findAll('.puik-accordion--expanded') - expect(accordionsExpanded.length).toBe(2) - }) -}) + const accordionsExpanded = wrapper.findAll('.puik-accordion--expanded'); + expect(accordionsExpanded.length).toBe(2); + }); +}); describe('AccordionGroup props tests', () => { it('should have contained class', () => { const template = ` @@ -111,12 +109,12 @@ describe('AccordionGroup props tests', () => { Content 3 - ` - factory(template) + `; + factory(template); - const group = getAccordionGroup() - expect(group.classes()).toContain('puik-accordion-group--contained') - }) + const group = getAccordionGroup(); + expect(group.classes()).toContain('puik-accordion-group--contained'); + }); it('should change expanded accordion on v-model change', async () => { const template = ` @@ -130,26 +128,26 @@ describe('AccordionGroup props tests', () => { Content 3 - ` + `; factory(template, { data() { - return { expandedAccordions: 'accordion-1' } - }, - }) - - wrapper.setData({ expandedAccordions: 'accordion-2' }) - await nextTick() - - const accordions = getAccordions() - expect(accordions[1].classes()).toEqual([rootClass, expandedClass]) - expect(accordions[2].classes()).toEqual([rootClass]) - - wrapper.setData({ expandedAccordions: ['accordion-3'] }) - await nextTick() - expect(accordions[1].classes()).toEqual([rootClass]) - expect(accordions[2].classes()).toEqual([rootClass, expandedClass]) - }) + return { expandedAccordions: 'accordion-1' }; + } + }); + + await wrapper.setData({ expandedAccordions: 'accordion-2' }); + await nextTick(); + + const accordions = getAccordions(); + expect(accordions[1].classes()).toEqual([rootClass, expandedClass]); + expect(accordions[2].classes()).toEqual([rootClass]); + + await wrapper.setData({ expandedAccordions: ['accordion-3'] }); + await nextTick(); + expect(accordions[1].classes()).toEqual([rootClass]); + expect(accordions[2].classes()).toEqual([rootClass, expandedClass]); + }); it('should change expanded accordion on click on multiple mode', async () => { const template = ` @@ -163,19 +161,19 @@ describe('AccordionGroup props tests', () => { Content 3 - ` + `; - factory(template) + factory(template); - const accordions = getAccordions() - const accordionButtons = wrapper.findAll('.puik-accordion__header') + const accordions = getAccordions(); + const accordionButtons = wrapper.findAll('.puik-accordion__header'); - accordionButtons[0].trigger('click') - accordionButtons[1].trigger('click') - await nextTick() + await accordionButtons[0].trigger('click'); + await accordionButtons[1].trigger('click'); + await nextTick(); - expect(accordions[0].classes()).toEqual([rootClass, expandedClass]) - expect(accordions[1].classes()).toEqual([rootClass, expandedClass]) - expect(accordions[2].classes()).toEqual([rootClass]) - }) -}) + expect(accordions[0].classes()).toEqual([rootClass, expandedClass]); + expect(accordions[1].classes()).toEqual([rootClass, expandedClass]); + expect(accordions[2].classes()).toEqual([rootClass]); + }); +}); diff --git a/packages/components/accordion/test/accordion.spec.ts b/packages/components/accordion/test/accordion.spec.ts index 63eb6f97..ee034610 100644 --- a/packages/components/accordion/test/accordion.spec.ts +++ b/packages/components/accordion/test/accordion.spec.ts @@ -1,36 +1,34 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikAccordionGroup from '../src/accordion-group.vue' -import PuikAccordion from '../src/accordion.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' - -let wrapper: VueWrapper -const factory = (template: string, options: MountingOptions = {}) => { +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikAccordion, PuikAccordionGroup } from '@prestashopcorp/puik-components'; + +let wrapper: VueWrapper; +const factory = (template: string, options: ComponentMountingOptions = {}) => { wrapper = mount({ components: { 'puik-accordion-group': PuikAccordionGroup, - 'puik-accordion': PuikAccordion, + 'puik-accordion': PuikAccordion }, template, - ...options, - }) -} - -export const getAccordion = (wrapper) => wrapper.findComponent(PuikAccordion) -export const getAccordionContainer = (component) => - component.find('.puik-accordion') -export const getAccordionContent = (component) => - component.find('.puik-accordion__content') -export const getAccordionHeader = (component) => - component.find('.puik-accordion__header') -export const getAccordionTitle = (component) => - component.find('.puik-accordion__header__content__title') -export const getAccordionSubTitle = (component) => - component.find('.puik-accordion__header__content__sub-title') -export const getAccordionExpandIcon = (component) => - component.find('.puik-accordion__header__expand__icon') -export const getAccordionIcon = (component) => - component.find('.puik-accordion__header__icon') + ...options + }); +}; + +export const getAccordion = (wrapper: VueWrapper) => wrapper.findComponent(PuikAccordion); +export const getAccordionContainer = (component: VueWrapper) => + component.find('.puik-accordion'); +export const getAccordionContent = (component: VueWrapper) => + component.find('.puik-accordion__content'); +export const getAccordionHeader = (component: VueWrapper) => + component.find('.puik-accordion__header'); +export const getAccordionTitle = (component: VueWrapper) => + component.find('.puik-accordion__header__content__title'); +export const getAccordionSubTitle = (component: VueWrapper) => + component.find('.puik-accordion__header__content__sub-title'); +export const getAccordionExpandIcon = (component: VueWrapper) => + component.find('.puik-accordion__header__expand__icon'); +export const getAccordionIcon = (component: VueWrapper) => + component.find('.puik-accordion__header__icon'); describe('Accordion tests', () => { it('should be a vue instance', () => { @@ -43,58 +41,58 @@ describe('Accordion tests', () => { Content 2 - ` - factory(template) - expect(wrapper).toBeTruthy() - }) + `; + factory(template); + expect(wrapper).toBeTruthy(); + }); - it('should accordion emit event', () => { + it('should accordion emit event', async () => { const template = ` Content 1 - ` - factory(template) + `; + factory(template); - const accordion = getAccordion(wrapper) - getAccordionHeader(accordion).trigger('click') - expect(accordion.emitted('click')).toBeTruthy() - }) + const accordion = getAccordion(wrapper); + await getAccordionHeader(accordion).trigger('click'); + expect(accordion.emitted('click')).toBeTruthy(); + }); it('should accordion display title', () => { - const title = 'title 1' + const title = 'title 1'; const template = ` Content 1 - ` - factory(template) + `; + factory(template); - const accordion = getAccordion(wrapper) - expect(getAccordionTitle(accordion).text()).toContain(title) - }) + const accordion = getAccordion(wrapper); + expect(getAccordionTitle(accordion).text()).toContain(title); + }); it('should accordion display sub-title', () => { - const subTitle = 'sub-title 1' + const subTitle = 'sub-title 1'; const template = ` Content 1 - ` - factory(template) + `; + factory(template); - const accordion = getAccordion(wrapper) - expect(getAccordionSubTitle(accordion).text()).toContain(subTitle) - }) + const accordion = getAccordion(wrapper); + expect(getAccordionSubTitle(accordion).text()).toContain(subTitle); + }); it('should accordion title have aria-controls', () => { - const title = 'title 1' + const title = 'title 1'; const template = ` @@ -102,29 +100,29 @@ describe('Accordion tests', () => { Content 1 - ` - factory(template) + `; + factory(template); - const accordion = getAccordion(wrapper) - const contentId = getAccordionContent(accordion).attributes('id') - const accordionTitle = getAccordionHeader(accordion) - expect(accordionTitle.attributes('aria-controls')).toBe(contentId) - }) + const accordion = getAccordion(wrapper); + const contentId = getAccordionContent(accordion).attributes('id'); + const accordionTitle = getAccordionHeader(accordion); + expect(accordionTitle.attributes('aria-controls')).toBe(contentId); + }); it('should default slot render correctly', () => { - const content = 'Content 1' + const content = 'Content 1'; const template = ` ${content} - ` - factory(template) + `; + factory(template); - const accordion = getAccordion(wrapper) - expect(getAccordionContent(accordion).text()).toBe(content) - }) + const accordion = getAccordion(wrapper); + expect(getAccordionContent(accordion).text()).toBe(content); + }); it('should be disabled', () => { const template = ` @@ -133,27 +131,27 @@ describe('Accordion tests', () => { Content - ` - factory(template) + `; + factory(template); - const accordion = getAccordion(wrapper) - expect(accordion.classes()).toContain('puik-accordion--disabled') - expect(getAccordionHeader(accordion).attributes('disabled')).toBeDefined() - }) + const accordion = getAccordion(wrapper); + expect(accordion.classes()).toContain('puik-accordion--disabled'); + expect(getAccordionHeader(accordion).attributes('disabled')).toBeDefined(); + }); it('should have icon', () => { - const icon = 'home' + const icon = 'home'; const template = ` Content - ` - factory(template) + `; + factory(template); - expect(getAccordionIcon(wrapper).text()).toBe(icon) - }) + expect(getAccordionIcon(wrapper).text()).toBe(icon); + }); it('should have data-test attribute on accordion container div, button, title, sub-title, icon', () => { const template = ` @@ -162,26 +160,26 @@ describe('Accordion tests', () => { Content - ` - factory(template) + `; + factory(template); - const accordion = getAccordion(wrapper) + const accordion = getAccordion(wrapper); expect(getAccordionContainer(accordion).attributes('data-test')).toBe( 'accordion' - ) + ); expect(getAccordionHeader(accordion).attributes('data-test')).toBe( 'button-accordion' - ) + ); expect(getAccordionTitle(accordion).attributes('data-test')).toBe( 'title-accordion' - ) + ); expect(getAccordionSubTitle(accordion).attributes('data-test')).toBe( 'subTitle-accordion' - ) + ); expect(getAccordionIcon(accordion).attributes('data-test')).toBe( 'icon-accordion' - ) - }) + ); + }); it('should not contain borders', () => { const template = ` @@ -190,11 +188,11 @@ describe('Accordion tests', () => { Content 1 - ` - factory(template) - const accordion = getAccordion(wrapper) + `; + factory(template); + const accordion = getAccordion(wrapper); expect(getAccordionContainer(accordion).classes()).toContain( 'puik-accordion--border-none' - ) - }) -}) + ); + }); +}); diff --git a/packages/components/alert/index.ts b/packages/components/alert/index.ts index 1825c60f..9b31d956 100644 --- a/packages/components/alert/index.ts +++ b/packages/components/alert/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Alert from './src/alert.vue'; -import Alert from './src/alert.vue' +export const PuikAlert = Alert; +export default PuikAlert; -export const PuikAlert = withInstall(Alert) -export default PuikAlert - -export * from './src/alert' +export * from './src/alert'; diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts index 8ae26503..4a26a6c5 100644 --- a/packages/components/alert/src/alert.ts +++ b/packages/components/alert/src/alert.ts @@ -1,72 +1,36 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Alert from './alert.vue' +import type Alert from './alert.vue'; -export const alertVariants = ['success', 'warning', 'danger', 'info'] as const - -export type PuikAlertVariant = (typeof alertVariants)[number] +export enum PuikAlertVariants { + Success = 'success', + Warning = 'warning', + Danger = 'danger', + Info = 'info', +} export const ICONS = { success: 'check_circle', warning: 'warning', danger: 'error', - info: 'info', -} + info: 'info' +}; -export const alertProps = buildProps({ - title: { - type: String, - required: false, - default: undefined, - }, - description: { - type: String, - required: false, - default: undefined, - }, - variant: { - type: String as PropType, - default: 'success', - }, - disableBorders: { - type: Boolean, - default: false, - }, - buttonLabel: { - type: String, - required: false, - default: undefined, - }, - buttonWrapLabel: { - type: Boolean, - required: false, - default: false, - }, - isClosable: { - type: Boolean, - required: false, - default: false, - }, - ariaLive: { - type: String as PropType<'polite' | 'assertive'>, - required: false, - default: 'polite', - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, - linkLabel: { - type: String, - required: false, - default: undefined, - }, -} as const) - -export type AlertProps = ExtractPropTypes +export interface AlertProps { + title?: string + description?: string + variant?: `${PuikAlertVariants}` + disableBorders?: boolean + isClosable?: boolean + buttonLabel?: string + buttonWrapLabel?: boolean + linkLabel?: string + ariaLive?: 'polite' | 'assertive' + dataTest?: string +} -export const alertEmits = ['click', 'clickLink', 'close'] -export type AlertEmits = typeof alertEmits +export type AlertEmits = { + click: [event: Event] + close: [event: Event] + clickLink: [event: Event] +}; -export type AlertInstance = InstanceType +export type AlertInstance = InstanceType; diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue index ea3aa603..97502afd 100644 --- a/packages/components/alert/src/alert.vue +++ b/packages/components/alert/src/alert.vue @@ -10,7 +10,11 @@ >
- +

{{ description }} + >{{ description }}

+ + diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts index a393a5a8..76875b8c 100644 --- a/packages/components/alert/stories/alert.stories.ts +++ b/packages/components/alert/stories/alert.stories.ts @@ -1,19 +1,19 @@ -import { action } from '@storybook/addon-actions' -import { alertVariants } from '../src/alert' -import PuikAlert from './../src/alert.vue' -import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3' +import { action } from '@storybook/addon-actions'; +import { PuikAlert, PuikAlertVariants } from '@prestashopcorp/puik-components'; +import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; -const alertVariantsSummary = alertVariants.join('|') +const alertVariants = Object.values(PuikAlertVariants); +const alertVariantsSummary = alertVariants.join('|'); export default { title: 'Components/Alert', component: PuikAlert, argTypes: { title: { - description: 'Set the alert title', + description: 'Set the alert title' }, description: { - description: 'Set the alert description (also exists as a default slot)', + description: 'Set the alert description (also exists as a default slot)' }, variant: { control: 'select', @@ -21,48 +21,48 @@ export default { options: alertVariants, table: { defaultValue: { - summary: 'success', + summary: 'success' }, type: { - summary: alertVariantsSummary, - }, - }, + summary: alertVariantsSummary + } + } }, disableBorders: { description: 'Disable alert borders (only for info, warning, error variants)', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, buttonLabel: { - description: 'Label of the button', + description: 'Label of the button' }, buttonWrapLabel: { description: 'Set the carriage return of the button label', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, isClosable: { - description: 'Display a close button', + description: 'Display a close button' }, default: { control: 'none', - description: 'Set the alert description', + description: 'Set the alert description' }, dataTest: { control: 'text', description: - 'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}` `link-${dataTest}`', + 'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}` `link-${dataTest}`' }, linkLabel: { - description: 'Label of the link', - }, + description: 'Label of the link' + } }, args: { title: 'Title', @@ -72,21 +72,21 @@ export default { buttonLabel: 'Button', buttonWrapLabel: false, isClosable: false, - linkLabel: 'See more', - }, -} as Meta + linkLabel: 'See more' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikAlert, + PuikAlert }, setup() { - return { args } + return { args }; }, methods: { click: action('click'), - clickLink: action('click-link'), close: action('close'), + clickLink: action('clickLink') }, template: ` ({ @click="click" @click-link="clickLink" @close="close" - >`, -}) + >` +}); export const Default = { render: Template, @@ -134,16 +134,16 @@ export const Default = {
`, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const buttonWrapLabel: StoryObj = { render: () => ({ components: { - PuikAlert, + PuikAlert }, template: `
@@ -170,7 +170,7 @@ export const buttonWrapLabel: StoryObj = { This an alert with a very long description.
- `, + ` }), parameters: { @@ -238,16 +238,16 @@ export const buttonWrapLabel: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Success: StoryObj = { render: () => ({ components: { - PuikAlert, + PuikAlert }, template: `
@@ -256,7 +256,7 @@ export const Success: StoryObj = { This a success alert with a title and a description and a button. This a success alert with a description and a button.
- `, + ` }), parameters: { @@ -285,16 +285,16 @@ export const Success: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Warning: StoryObj = { render: () => ({ components: { - PuikAlert, + PuikAlert }, template: `
@@ -304,7 +304,7 @@ export const Warning: StoryObj = { This a warning alert with a title and a description and a button. This a warning alert with a description and a button.
- `, + ` }), parameters: { @@ -334,16 +334,16 @@ export const Warning: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Info: StoryObj = { render: () => ({ components: { - PuikAlert, + PuikAlert }, template: `
@@ -353,7 +353,7 @@ export const Info: StoryObj = { This a info alert with a title and a description and a button. This a info alert with a description and a button.
- `, + ` }), parameters: { @@ -383,16 +383,16 @@ export const Info: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Danger: StoryObj = { render: () => ({ components: { - PuikAlert, + PuikAlert }, template: `
@@ -402,7 +402,7 @@ export const Danger: StoryObj = { This a danger alert with a title and a description and a button. This a danger alert with a description and a button.
- `, + ` }), parameters: { @@ -432,8 +432,8 @@ export const Danger: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/alert/style/css.ts b/packages/components/alert/style/css.ts index 7fa1c143..e2522a44 100644 --- a/packages/components/alert/style/css.ts +++ b/packages/components/alert/style/css.ts @@ -1,4 +1,5 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-alert.css' -import '@puik/theme/puik-button.css' -import '@puik/theme/puik-icon.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-alert.css'; +import '@prestashopcorp/puik-theme/puik-button.css'; +import '@prestashopcorp/puik-theme/puik-icon.css'; +import '@prestashopcorp/puik-theme/puik-link.css'; diff --git a/packages/components/alert/style/index.ts b/packages/components/alert/style/index.ts index e8563ce2..9cdffd55 100644 --- a/packages/components/alert/style/index.ts +++ b/packages/components/alert/style/index.ts @@ -1,4 +1,4 @@ -import '@puik/components/base/style' -import '@puik/theme/src/alert.scss' -import '@puik/theme/src/button.scss' -import '@puik/theme/src/icon.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-alert.scss'; +import '@prestashopcorp/puik-theme/src/puik-button.scss'; +import '@prestashopcorp/puik-theme/src/puik-icon.scss'; diff --git a/packages/components/alert/test/alert.spec.ts b/packages/components/alert/test/alert.spec.ts index f8f7359a..be44bae6 100644 --- a/packages/components/alert/test/alert.spec.ts +++ b/packages/components/alert/test/alert.spec.ts @@ -1,93 +1,90 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import { faker } from '@faker-js/faker' -import Alert from '../src/alert.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { faker } from '@faker-js/faker'; +import { PuikAlert, AlertProps } from '@prestashopcorp/puik-components'; describe('Alert tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; - const findAlert = () => wrapper.find('.puik-alert') - const findButton = () => wrapper.find('.puik-alert__button') - const findTitle = () => wrapper.find('.puik-alert__title') - const findDesc = () => wrapper.find('.puik-alert__description') - const findCloseButton = () => wrapper.find('.puik-alert__close') - const findLink = () => wrapper.find('.puik-alert__link') + const findAlert = () => wrapper.find('.puik-alert'); + const findButton = () => wrapper.find('.puik-alert__button'); + const findTitle = () => wrapper.find('.puik-alert__title'); + const findDesc = () => wrapper.find('.puik-alert__description'); + const findCloseButton = () => wrapper.find('.puik-alert__close'); + const findLink = () => wrapper.find('.puik-alert__link'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: AlertProps, + options?: ComponentMountingOptions ) => { - wrapper = mount(Alert, { - props: { - ...propsData, - }, - ...options, - }) - } + wrapper = mount(PuikAlert, { + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should display an success alert by default', () => { - factory() - expect(findAlert().classes()).toContain('puik-alert--success') - }) + factory(); + expect(findAlert().classes()).toContain('puik-alert--success'); + }); it('should display a warning alert', () => { - factory({ variant: 'warning' }) - expect(findAlert().classes()).toContain('puik-alert--warning') - }) + factory({ variant: 'warning' }); + expect(findAlert().classes()).toContain('puik-alert--warning'); + }); it('should set the button label wrap to false', () => { - factory({ buttonLabel: 'Button', buttonWrapLabel: false }) - expect(findButton().classes()).toContain('puik-button--no-wrap') - }) + factory({ buttonLabel: 'Button', buttonWrapLabel: false }); + expect(findButton().classes()).toContain('puik-button--no-wrap'); + }); - it('should display a button which emits the click event on click', () => { - factory({ buttonLabel: 'Button' }) - expect(findButton().exists()).toBeTruthy() - findButton().trigger('click') - expect(wrapper.emitted('click')).toBeTruthy() - }) + it('should display a button which emits the click event on click', async () => { + factory({ buttonLabel: 'Button' }); + expect(findButton().exists()).toBeTruthy(); + await findButton().trigger('click'); + expect(wrapper.emitted('click')).toBeTruthy(); + }); - it('should display a link which emits the clickLink event on click', () => { - factory({ linkLabel: 'See more' }) - expect(findLink().exists()).toBeTruthy() - findLink().trigger('click') - expect(wrapper.emitted('clickLink')).toBeTruthy() - }) + it('should display a link which emits the clickLink event on click', async () => { + factory({ linkLabel: 'See more' }); + expect(findLink().exists()).toBeTruthy(); + await findLink().trigger('click'); + expect(wrapper.emitted('clickLink')).toBeTruthy(); + }); it('should display a title and a description', async () => { factory({ title: faker.lorem.word(2), - description: faker.lorem.sentence(60), - }) - expect(findTitle().exists()).toBeTruthy() - expect(findDesc().exists()).toBeTruthy() - }) + description: faker.lorem.sentence(60) + }); + expect(findTitle().exists()).toBeTruthy(); + expect(findDesc().exists()).toBeTruthy(); + }); it('should display an alert without borders', () => { factory({ title: faker.lorem.word(2), description: faker.lorem.sentence(60), - disableBorders: true, - }) - expect(findAlert().classes()).toContain('puik-alert--no-borders') - }) + disableBorders: true + }); + expect(findAlert().classes()).toContain('puik-alert--no-borders'); + }); it('should display a close icon and emit a close event on click', async () => { factory({ title: faker.lorem.word(2), description: faker.lorem.sentence(60), - isClosable: true, - }) - expect(findCloseButton()).toBeTruthy() - await findCloseButton().trigger('click') - expect(wrapper.emitted('close')).toBeTruthy() - }) + isClosable: true + }); + expect(findCloseButton()).toBeTruthy(); + await findCloseButton().trigger('click'); + expect(wrapper.emitted('close')).toBeTruthy(); + }); it('should have a data-test attribute on container div, title, description button, close button, and link', () => { factory({ @@ -96,13 +93,13 @@ describe('Alert tests', () => { buttonLabel: 'Button', linkLabel: 'See more', isClosable: true, - dataTest: 'alert', - }) - expect(findAlert().attributes('data-test')).toBe('alert') - expect(findTitle().attributes('data-test')).toBe('title-alert') - expect(findDesc().attributes('data-test')).toBe('description-alert') - expect(findButton().attributes('data-test')).toBe('button-alert') - expect(findCloseButton().attributes('data-test')).toBe('close-alert') - expect(findLink().attributes('data-test')).toBe('link-alert') - }) -}) + dataTest: 'alert' + }); + expect(findAlert().attributes('data-test')).toBe('alert'); + expect(findTitle().attributes('data-test')).toBe('title-alert'); + expect(findDesc().attributes('data-test')).toBe('description-alert'); + expect(findButton().attributes('data-test')).toBe('button-alert'); + expect(findCloseButton().attributes('data-test')).toBe('close-alert'); + expect(findLink().attributes('data-test')).toBe('link-alert'); + }); +}); diff --git a/packages/components/avatar/index.ts b/packages/components/avatar/index.ts index 8e96fb3c..504b83fa 100644 --- a/packages/components/avatar/index.ts +++ b/packages/components/avatar/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Avatar from './src/avatar.vue'; -import Avatar from './src/avatar.vue' +export const PuikAvatar = Avatar; +export default PuikAvatar; -export const PuikAvatar = withInstall(Avatar) -export default PuikAvatar - -export * from './src/avatar' +export * from './src/avatar'; diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts index 454d9bf9..e6fa7010 100644 --- a/packages/components/avatar/src/avatar.ts +++ b/packages/components/avatar/src/avatar.ts @@ -1,93 +1,45 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Avatar from './avatar.vue' +import type Avatar from './avatar.vue'; export enum PuikAvatarMode { - PRIMARY = 'primary', - REVERSE = 'reverse', + Primary = 'primary', + Reverse = 'reverse', } export const AVATAR_MODE = { primary: 'white', - reverse: 'black', -} + reverse: 'black' +}; export enum PuikAvatarSize { - SMALL = 'small', - MEDIUM = 'medium', - LARGE = 'large', - JUMBO = 'jumbo', + Small = 'small', + Medium = 'medium', + Large = 'large', + Jumbo = 'jumbo', } export const ICONS_FONTSIZE = { small: '1rem', medium: '1.5rem', large: '2rem', - jumbo: '2.8rem', -} + jumbo: '2.8rem' +}; export enum PuikAvatarType { - PHOTO = 'photo', - ICON = 'icon', - INITIALS = 'initials', + Photo = 'photo', + Icon = 'icon', + Initials = 'initials', } -export const avatarProps = buildProps({ - id: { - type: String, - required: false, - default: undefined, - }, - mode: { - type: String as PropType, - required: false, - default: PuikAvatarMode.PRIMARY, - }, - size: { - type: String as PropType, - required: false, - default: PuikAvatarSize.MEDIUM, - }, - type: { - type: String as PropType, - required: false, - default: PuikAvatarType.INITIALS, - }, - icon: { - type: String, - required: false, - default: '', - }, - src: { - type: String, - required: false, - default: '', - }, - alt: { - type: String, - required: false, - default: '', - }, - firstname: { - type: String, - required: false, - default: '', - }, - lastname: { - type: String, - required: false, - default: '', - }, - singleInitial: { - type: Boolean, - required: false, - default: false, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) - -export type AvatarProps = ExtractPropTypes +export interface AvatarProps { + id?: string + mode?: `${PuikAvatarMode}` + size?: `${PuikAvatarSize}` + type?: `${PuikAvatarType}` + icon?: string + src?: string + alt?: string + firstName?: string + lastName?: string + singleInitial?: Boolean + dataTest?: string +} -export type AvatarInstance = InstanceType +export type AvatarInstance = InstanceType; diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue index d87a2cc3..020e4b15 100644 --- a/packages/components/avatar/src/avatar.vue +++ b/packages/components/avatar/src/avatar.vue @@ -5,13 +5,13 @@ :data-test="dataTest" > + > + + diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts index 07b4312c..735a9245 100644 --- a/packages/components/avatar/stories/avatar.stories.ts +++ b/packages/components/avatar/stories/avatar.stories.ts @@ -1,15 +1,13 @@ -import { ref } from 'vue' -import { PuikIcon } from '@puik/components' -import { PuikAvatarMode, PuikAvatarSize, PuikAvatarType } from '../src/avatar' -import PuikAvatar from './../src/avatar.vue' -import type { Meta, StoryFn, Args } from '@storybook/vue3' +import { ref } from 'vue'; +import { PuikIcon, PuikAvatar, PuikAvatarMode, PuikAvatarSize, PuikAvatarType } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args } from '@storybook/vue3'; -const avatarModes = Object.values(PuikAvatarMode) -const avatarSizes = Object.values(PuikAvatarSize) -const avatarTypes = Object.values(PuikAvatarType) -const avatarModesSummary = avatarModes.join('|') -const avatarSizesSummary = avatarSizes.join('|') -const avatarTypesSummary = avatarTypes.join('|') +const avatarModes = Object.values(PuikAvatarMode); +const avatarSizes = Object.values(PuikAvatarSize); +const avatarTypes = Object.values(PuikAvatarType); +const avatarModesSummary = avatarModes.join('|'); +const avatarSizesSummary = avatarSizes.join('|'); +const avatarTypesSummary = avatarTypes.join('|'); export default { title: 'Components/Avatar', @@ -21,12 +19,12 @@ export default { control: 'text', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'undefined', - }, - }, + summary: 'undefined' + } + } }, mode: { description: @@ -35,12 +33,12 @@ export default { options: avatarModes, table: { type: { - summary: avatarModesSummary, + summary: avatarModesSummary }, defaultValue: { - summary: 'primary', - }, - }, + summary: 'primary' + } + } }, size: { description: @@ -49,12 +47,12 @@ export default { options: avatarSizes, table: { type: { - summary: avatarSizesSummary, + summary: avatarSizesSummary }, defaultValue: { - summary: 'medium', - }, - }, + summary: 'medium' + } + } }, type: { description: 'Content type of avatar (initials, image or icon)', @@ -62,89 +60,89 @@ export default { options: avatarTypes, table: { type: { - summary: avatarTypesSummary, + summary: avatarTypesSummary }, defaultValue: { - summary: 'initials', - }, - }, + summary: 'initials' + } + } }, icon: { description: 'Material icon name (cf https://fonts.google.com/icons)', control: 'text', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, src: { description: 'Image source if avatar type is set to "photo"', control: 'text', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, alt: { description: 'Image alt attribute if avatar type prop is set to "photo"', control: 'text', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, - firstname: { + firstName: { description: - 'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of firstname prop corresponds to the first). NB: if the lastname prop is missing then the initials will be the first two letters of the firstname prop in the case where the singleInitial prop is false. Special characters are removed', + 'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of firstName prop corresponds to the first). NB: if the lastName prop is missing then the initials will be the first two letters of the firstName prop in the case where the singleInitial prop is false. Special characters are removed', control: 'text', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, - lastname: { + lastName: { description: - 'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of lastname corresponds to the last). NB : if the firstname prop is missing then the initials will be the first two letters of the lastname prop in the case where the singleInitial prop is false. Special characters are removed.', + 'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of lastName corresponds to the last). NB : if the firstName prop is missing then the initials will be the first two letters of the lastName prop in the case where the singleInitial prop is false. Special characters are removed.', control: 'text', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, singleInitial: { description: - 'Initials match a single letter (first letter of firstname. If the firstname conditions are not met this is the first letter of lastname). NB: if the conditions for the firstname and lastname props are not met then the default value is "P" (singleInitial set to true) or "PS" (singleInitial set to false).', + 'Initials match a single letter (first letter of firstName. If the firstName conditions are not met this is the first letter of lastName). NB: if the conditions for the firstName and lastName props are not met then the default value is "P" (singleInitial set to true) or "PS" (singleInitial set to false).', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, dataTest: { control: 'text', description: - 'Set the data-test attribute for the avatar `image-${dataTest}` `icon-${dataTest}` `initials-${dataTest}`', - }, + 'Set the data-test attribute for the avatar `image-${dataTest}` `icon-${dataTest}` `initials-${dataTest}`' + } }, args: { id: 'puik-avatar-id', @@ -154,40 +152,40 @@ export default { icon: 'home', src: 'https://picsum.photos/200', alt: 'puik-avatar-alt', - firstname: 'Presta', - lastname: 'Shop', + firstName: 'Presta', + lastName: 'Shop', singleInitial: false, - dataTest: undefined, - }, -} as Meta + dataTest: undefined + } +} as Meta; const DefaultTemplate: StoryFn = (args: Args) => ({ components: { PuikIcon, - PuikAvatar, + PuikAvatar }, setup() { - return { args } + return { args }; }, template: ` -`, -}) +` +}); const TypesTemplate: StoryFn = (args: Args) => ({ components: { PuikIcon, - PuikAvatar, + PuikAvatar }, setup() { - return { args } + return { args }; }, template: `
({ :alt="args.alt" />
-`, -}) +` +}); const SizesTemplate: StoryFn = (args: Args) => ({ components: { PuikIcon, - PuikAvatar, + PuikAvatar }, setup() { const avatars = ref([ { type: 'initials', - size: 'small', + size: 'small' }, { type: 'initials', - size: 'medium', + size: 'medium' }, { type: 'initials', - size: 'large', + size: 'large' }, { type: 'initials', - size: 'jumbo', + size: 'jumbo' }, { type: 'icon', size: 'small', - icon: 'home', + icon: 'home' }, { type: 'icon', size: 'medium', - icon: 'home', + icon: 'home' }, { type: 'icon', size: 'large', - icon: 'home', + icon: 'home' }, { type: 'icon', size: 'jumbo', - icon: 'home', + icon: 'home' }, { type: 'photo', size: 'small', - src: 'https://picsum.photos/200', + src: 'https://picsum.photos/200' }, { type: 'photo', size: 'medium', - src: 'https://picsum.photos/200', + src: 'https://picsum.photos/200' }, { type: 'photo', size: 'large', - src: 'https://picsum.photos/200', + src: 'https://picsum.photos/200' }, { type: 'photo', size: 'jumbo', - src: 'https://picsum.photos/200', - }, - ]) - return { avatars, args } + src: 'https://picsum.photos/200' + } + ]); + return { avatars, args }; }, template: `
@@ -279,40 +277,40 @@ const SizesTemplate: StoryFn = (args: Args) => ({ :src="avatar.src" />
-`, -}) +` +}); const ModesTemplate: StoryFn = (args: Args) => ({ components: { PuikIcon, - PuikAvatar, + PuikAvatar }, setup() { const avatarsPrimary = ref([ { type: 'initials', - mode: 'primary', + mode: 'primary' }, { type: 'icon', mode: 'primary', - icon: 'home', - }, - ]) + icon: 'home' + } + ]); const avatarsReverse = ref([ { type: 'initials', - mode: 'reverse', + mode: 'reverse' }, { type: 'icon', mode: 'reverse', - icon: 'home', - }, - ]) + icon: 'home' + } + ]); - return { avatarsPrimary, avatarsReverse, args } + return { avatarsPrimary, avatarsReverse, args }; }, template: `
@@ -333,8 +331,8 @@ const ModesTemplate: StoryFn = (args: Args) => ({ :icon="avatar.icon" />
-`, -}) +` +}); export const Default = { render: DefaultTemplate, @@ -353,8 +351,8 @@ export const Default = { :src="args.src" :alt="args.alt" :icon="args.icon" - :firstname="args.firstname" - :lastname="args.lastname" + :firstName="args.firstName" + :lastName="args.lastName" /> @@ -365,11 +363,11 @@ export const Default = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Types = { render: TypesTemplate, @@ -382,8 +380,8 @@ export const Types = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Sizes = { render: SizesTemplate, @@ -462,11 +460,11 @@ NB: values of {$iconFontSize} to apply depending on the prop size: puik-avatar-alt `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Modes = { render: ModesTemplate, @@ -499,8 +497,8 @@ NB: values of {$iconColor} to apply depending on the prop mode: `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/avatar/style/css.ts b/packages/components/avatar/style/css.ts index baf5bacb..b2ab03ea 100644 --- a/packages/components/avatar/style/css.ts +++ b/packages/components/avatar/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-avatar.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-avatar.css'; diff --git a/packages/components/avatar/style/index.ts b/packages/components/avatar/style/index.ts index 22f633c6..f8ae4135 100644 --- a/packages/components/avatar/style/index.ts +++ b/packages/components/avatar/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/avatar.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-avatar.scss'; diff --git a/packages/components/avatar/test/avatar.spec.ts b/packages/components/avatar/test/avatar.spec.ts index 08c0abab..05d15ae4 100644 --- a/packages/components/avatar/test/avatar.spec.ts +++ b/packages/components/avatar/test/avatar.spec.ts @@ -1,96 +1,93 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikAvatar from '../src/avatar.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikAvatar, AvatarProps } from '@prestashopcorp/puik-components'; describe('Avatar tests', () => { - let wrapper: VueWrapper - const findAvatar = () => wrapper.find('.puik-avatar') - const findInitialsWrapper = () => wrapper.find('.puik-avatar_initials') - const findIcon = () => wrapper.find('.puik-icon') - const findImg = () => wrapper.find('.puik-avatar img') + let wrapper: VueWrapper; + const findAvatar = () => wrapper.find('.puik-avatar'); + const findInitialsWrapper = () => wrapper.find('.puik-avatar_initials'); + const findIcon = () => wrapper.find('.puik-icon'); + const findImg = () => wrapper.find('.puik-avatar img'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: AvatarProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikAvatar, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('as id prop value is "puik-avatar-id", id html attribute of puik-avatar should be "puik-avatar-id"', () => { - factory({ id: 'puik-avatar-id' }) - expect(findAvatar().attributes().id).toBe('puik-avatar-id') - }) + factory({ id: 'puik-avatar-id' }); + expect(findAvatar().attributes().id).toBe('puik-avatar-id'); + }); it('should display the avatar in reverse mode', () => { - factory({ mode: 'reverse' }) - expect(findAvatar().classes()).toContain('puik-avatar--reverse') - }) + factory({ mode: 'reverse' }); + expect(findAvatar().classes()).toContain('puik-avatar--reverse'); + }); it('should display the avatar in large size', () => { - factory({ size: 'large' }) - expect(findAvatar().classes()).toContain('puik-avatar--large') - }) + factory({ size: 'large' }); + expect(findAvatar().classes()).toContain('puik-avatar--large'); + }); it('should display the initials "PA"', () => { - factory({ firstname: 'Puik', lastname: 'Avatar' }) - expect(findInitialsWrapper().text()).toBe('PA') - }) + factory({ firstName: 'Puik', lastName: 'Avatar' }); + expect(findInitialsWrapper().text()).toBe('PA'); + }); it('icon type avatar should display the icon material "home"', () => { - factory({ type: 'icon', icon: 'home' }) - expect(findIcon().text()).toBe('home') - }) + factory({ type: 'icon', icon: 'home' }); + expect(findIcon().text()).toBe('home'); + }); it('photo type avatar should display an image with src attribute set to "src-img" and an attribute alt set to "alt-img"', () => { - factory({ type: 'photo', src: 'src-img', alt: 'alt-img' }) - expect(findImg().attributes().src).toBe('src-img') - expect(findImg().attributes().alt).toBe('alt-img') - }) + factory({ type: 'photo', src: 'src-img', alt: 'alt-img' }); + expect(findImg().attributes().src).toBe('src-img'); + expect(findImg().attributes().alt).toBe('alt-img'); + }); it('should have data-test attribute on container div of avatar', () => { factory({ type: 'initials', - dataTest: 'example', - }) - expect(findAvatar().attributes('data-test')).toBe('example') - }) + dataTest: 'example' + }); + expect(findAvatar().attributes('data-test')).toBe('example'); + }); it('should have data-test attribute on initials wrapper', () => { factory({ type: 'initials', - dataTest: 'example', - }) + dataTest: 'example' + }); expect(findInitialsWrapper().attributes('data-test')).toBe( 'initials-example' - ) - }) + ); + }); it('should have data-test attribute on icon', () => { factory({ type: 'icon', icon: 'home', - dataTest: 'example', - }) - expect(findIcon().attributes('data-test')).toBe('icon-example') - }) + dataTest: 'example' + }); + expect(findIcon().attributes('data-test')).toBe('icon-example'); + }); it('should have data-test attribute on image', () => { factory({ type: 'photo', src: 'src-example', alt: 'alt-example', - dataTest: 'example', - }) - expect(findImg().attributes('data-test')).toBe('image-example') - }) -}) + dataTest: 'example' + }); + expect(findImg().attributes('data-test')).toBe('image-example'); + }); +}); diff --git a/packages/components/badge/index.ts b/packages/components/badge/index.ts index 5249e9e3..c56ebe7b 100644 --- a/packages/components/badge/index.ts +++ b/packages/components/badge/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Badge from './src/badge.vue'; -import Badge from './src/badge.vue' +export const PuikBadge = Badge; +export default PuikBadge; -export const PuikBadge = withInstall(Badge) -export default PuikBadge - -export * from './src/badge' +export * from './src/badge'; diff --git a/packages/components/badge/src/badge.ts b/packages/components/badge/src/badge.ts index bc2790e2..98c27071 100644 --- a/packages/components/badge/src/badge.ts +++ b/packages/components/badge/src/badge.ts @@ -1,29 +1,16 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Badge from './badge.vue' +import type Badge from './badge.vue'; -export const badgeVariants = [ - 'success', - 'warning', - 'danger', - 'info', - 'neutral', -] as const +export enum PuikBadgeVariants { + Success = 'success', + Warning = 'warning', + Danger = 'danger', + Info = 'info', + Neutral = 'neutral', +} -export type PuikBadgeVariant = (typeof badgeVariants)[number] +export interface BadgeProps { + variant?: PuikBadgeVariants | `${PuikBadgeVariants}` + dataTest?: string +} -export const badgeProps = buildProps({ - variant: { - type: String as PropType, - default: 'neutral', - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) - -export type BadgeProps = ExtractPropTypes - -export type BadgeInstance = InstanceType +export type BadgeInstance = InstanceType; diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue index 692c7269..921a7507 100644 --- a/packages/components/badge/src/badge.vue +++ b/packages/components/badge/src/badge.vue @@ -4,15 +4,23 @@ :class="[`puik-badge--${variant}`]" :data-test="dataTest" > - + + + diff --git a/packages/components/badge/stories/badge.stories.ts b/packages/components/badge/stories/badge.stories.ts index e77a28e4..e16de876 100644 --- a/packages/components/badge/stories/badge.stories.ts +++ b/packages/components/badge/stories/badge.stories.ts @@ -1,8 +1,8 @@ -import { badgeVariants } from '../src/badge' -import PuikBadge from './../src/badge.vue' -import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3' +import { PuikBadge, PuikBadgeVariants } from '@prestashopcorp/puik-components'; +import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; -const badgeVariantsSummary = badgeVariants.join('|') +const badgeVariants = Object.values(PuikBadgeVariants); +const badgeVariantsSummary = badgeVariants.join('|'); export default { title: 'Components/Badge', @@ -10,7 +10,7 @@ export default { argTypes: { default: { control: 'text', - description: 'Badge content', + description: 'Badge content' }, variant: { control: 'select', @@ -18,33 +18,33 @@ export default { options: badgeVariants, table: { type: { - summary: badgeVariantsSummary, + summary: badgeVariantsSummary }, defaultValue: { - summary: 'neutral', - }, - }, + summary: 'neutral' + } + } }, dataTest: { control: 'text', - description: 'Set the data-test attribute on the badge', - }, + description: 'Set the data-test attribute on the badge' + } }, args: { default: 'Status', - variant: 'neutral', - }, -} as Meta + variant: 'neutral' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikBadge, + PuikBadge }, setup() { - return { args } + return { args }; }, - template: `{{ args.default }}`, -}) + template: '{{ args.default }}' +}); export const Default = { render: Template, @@ -70,27 +70,27 @@ export const Default = { The text of the badge `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const success: StoryObj = { render: (args: Args) => ({ components: { - PuikBadge, + PuikBadge }, setup() { return { - args, - } + args + }; }, - template: `{{ args.default }}`, + template: '{{ args.default }}' }), args: { - variant: 'success', + variant: 'success' }, parameters: { @@ -107,27 +107,27 @@ export const success: StoryObj = { Status `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const warning: StoryObj = { render: (args: Args) => ({ components: { - PuikBadge, + PuikBadge }, setup() { return { - args, - } + args + }; }, - template: `{{ args.default }}`, + template: '{{ args.default }}' }), args: { - variant: 'warning', + variant: 'warning' }, parameters: { @@ -144,27 +144,27 @@ export const warning: StoryObj = { Status `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const danger: StoryObj = { render: (args: Args) => ({ components: { - PuikBadge, + PuikBadge }, setup() { return { - args, - } + args + }; }, - template: `{{ args.default }}`, + template: '{{ args.default }}' }), args: { - variant: 'danger', + variant: 'danger' }, parameters: { @@ -181,27 +181,27 @@ export const danger: StoryObj = { Status `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const info: StoryObj = { render: (args: Args) => ({ components: { - PuikBadge, + PuikBadge }, setup() { return { - args, - } + args + }; }, - template: `{{ args.default }}`, + template: '{{ args.default }}' }), args: { - variant: 'info', + variant: 'info' }, parameters: { @@ -218,27 +218,27 @@ export const info: StoryObj = { Status `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const neutral: StoryObj = { render: (args: Args) => ({ components: { - PuikBadge, + PuikBadge }, setup() { return { - args, - } + args + }; }, - template: `{{ args.default }}`, + template: '{{ args.default }}' }), args: { - variant: 'neutral', + variant: 'neutral' }, parameters: { @@ -255,8 +255,8 @@ export const neutral: StoryObj = { Status `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/badge/style/css.ts b/packages/components/badge/style/css.ts index cbefe9d7..b0b11b7b 100644 --- a/packages/components/badge/style/css.ts +++ b/packages/components/badge/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-badge.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-badge.css'; diff --git a/packages/components/badge/style/index.ts b/packages/components/badge/style/index.ts index 4a42a862..b66360af 100644 --- a/packages/components/badge/style/index.ts +++ b/packages/components/badge/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/badge.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-badge.scss'; diff --git a/packages/components/badge/test/badge.spec.ts b/packages/components/badge/test/badge.spec.ts index 10e80c0f..e0101e63 100644 --- a/packages/components/badge/test/badge.spec.ts +++ b/packages/components/badge/test/badge.spec.ts @@ -1,55 +1,52 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikBadge from '../src/badge.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikBadge, BadgeProps } from '@prestashopcorp/puik-components'; describe('Badge tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; - const findBadge = () => wrapper.find('.puik-badge') + const findBadge = () => wrapper.find('.puik-badge'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: BadgeProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikBadge, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should display a neutral badge by default', () => { - factory() - expect(findBadge().classes()).toContain('puik-badge--neutral') - }) + factory(); + expect(findBadge().classes()).toContain('puik-badge--neutral'); + }); it('should display an info badge', () => { - factory({ variant: 'info' }) - expect(findBadge().classes()).toContain('puik-badge--info') - }) + factory({ variant: 'info' }); + expect(findBadge().classes()).toContain('puik-badge--info'); + }); it('should display a text', () => { - const slotDefault = 'Badge content' + const slotDefault = 'Badge content'; factory( {}, { slots: { - default: slotDefault, - }, + default: slotDefault + } } - ) - expect(findBadge().text()).toBe(slotDefault) - }) + ); + expect(findBadge().text()).toBe(slotDefault); + }); it('should have a data-test attribute', () => { - factory({ 'data-test': 'test' }) - expect(findBadge().attributes('data-test')).toBe('test') - }) -}) + factory({ dataTest: 'test' }); + expect(findBadge().attributes('data-test')).toBe('test'); + }); +}); diff --git a/packages/components/base/style/css.ts b/packages/components/base/style/css.ts index 52e3823b..6337bfba 100644 --- a/packages/components/base/style/css.ts +++ b/packages/components/base/style/css.ts @@ -1 +1 @@ -import '@puik/theme/base.css' +import '@prestashopcorp/puik-theme/base.css'; diff --git a/packages/components/base/style/index.ts b/packages/components/base/style/index.ts index 20fb4489..b1a0bec9 100644 --- a/packages/components/base/style/index.ts +++ b/packages/components/base/style/index.ts @@ -1 +1 @@ -import '@puik/theme/src/base.scss' +import '@prestashopcorp/puik-theme/src/base.scss'; diff --git a/packages/components/breadcrumb/index.ts b/packages/components/breadcrumb/index.ts index 16aac6b2..2ab90ab7 100644 --- a/packages/components/breadcrumb/index.ts +++ b/packages/components/breadcrumb/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Breadcrumb from './src/breadcrumb.vue'; -import Breadcrumb from './src/breadcrumb.vue' +export const PuikBreadcrumb = Breadcrumb; +export default PuikBreadcrumb; -export const PuikBreadcrumb = withInstall(Breadcrumb) -export default PuikBreadcrumb - -export * from './src/breadcrumb' +export * from './src/breadcrumb'; diff --git a/packages/components/breadcrumb/src/breadcrumb.ts b/packages/components/breadcrumb/src/breadcrumb.ts index 94ad999f..117186f6 100644 --- a/packages/components/breadcrumb/src/breadcrumb.ts +++ b/packages/components/breadcrumb/src/breadcrumb.ts @@ -1,35 +1,20 @@ -import { buildProps } from '@puik/utils' -import type { RouteLocationRaw } from 'vue-router' -import type { ExtractPropTypes, PropType } from 'vue' -import type Breadcrumb from './breadcrumb.vue' +import type { RouteLocationRaw } from 'vue-router'; +import type Breadcrumb from './breadcrumb.vue'; +import type { PuikLinkTargetVariants } from '../../link'; -import type { PuikTargetString } from '../../link/src/link' export interface BreadcrumbItem { label: string to?: RouteLocationRaw href?: string - target?: PuikTargetString + target?: `${PuikLinkTargetVariants}` dataTest?: string } -export const breadcrumbProps = buildProps({ - items: { - type: Array as PropType, - required: false, - default: () => [], - }, - separatorIcon: { - type: String, - required: false, - default: 'keyboard_arrow_right', - }, - icon: { - type: String, - required: false, - default: undefined, - }, -} as const) - -export type BreadcrumbProps = ExtractPropTypes +export interface BreadcrumbProps { + items?: BreadcrumbItem[] + itemsJson?: string + separatorIcon?: string + icon?: string +} -export type BreadcrumbInstance = InstanceType +export type BreadcrumbInstance = InstanceType; diff --git a/packages/components/breadcrumb/src/breadcrumb.vue b/packages/components/breadcrumb/src/breadcrumb.vue index 9aba01fd..0f48f3f5 100644 --- a/packages/components/breadcrumb/src/breadcrumb.vue +++ b/packages/components/breadcrumb/src/breadcrumb.vue @@ -1,14 +1,18 @@ + + diff --git a/packages/components/breadcrumb/stories/breadcrumb.stories.ts b/packages/components/breadcrumb/stories/breadcrumb.stories.ts index 9761907a..3449c33f 100644 --- a/packages/components/breadcrumb/stories/breadcrumb.stories.ts +++ b/packages/components/breadcrumb/stories/breadcrumb.stories.ts @@ -1,5 +1,5 @@ -import PuikBreadcrumb from './../src/breadcrumb.vue' -import type { Meta, StoryFn, Args } from '@storybook/vue3' +import { PuikBreadcrumb } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Breadcrumb', component: PuikBreadcrumb, @@ -9,13 +9,13 @@ export default { description: 'Link displayed in breadcrumb', table: { defaultValue: { - summary: `[]`, + summary: 'undefined' }, type: { summary: 'BreadcrumbItem[]', detail: ` // Import -import { BreadcrumbItem } from '@prestashopcorp/puik/components/breadcrumb/src/breadcrumb' +import { BreadcrumbItem } from '@prestashopcorp/puik-components'; // Detail interface BreadBreadcrumbItem { @@ -24,9 +24,22 @@ interface BreadBreadcrumbItem { href: string | undefined, target: '_blank' | '_self' | '_parent' | '_top' | undefined, dataTest: string | undefined, -}`, +}` + } + } + }, + itemsJson: { + control: 'text', + description: 'The breadcrumb items as a JSON string. Use this prop when using the component as a Web Component. For regular Vue usage, prefer the `items` prop.', + table: { + defaultValue: { + summary: 'undefined' }, - }, + type: { + summary: 'string', + detail: 'A JSON string representing an array of BreadcrumbItem' + } + } }, separatorIcon: { control: 'text', @@ -34,9 +47,9 @@ interface BreadBreadcrumbItem { type: 'string', table: { defaultValue: { - summary: 'keyboard_arrow_right', - }, - }, + summary: 'keyboard_arrow_right' + } + } }, icon: { control: 'text', @@ -44,41 +57,56 @@ interface BreadBreadcrumbItem { type: 'string', table: { defaultValue: { - summary: 'undefined', - }, - }, - }, + summary: 'undefined' + } + } + } }, args: { items: [ { label: 'First link', - href: '#', + href: '#' }, { label: 'Second link', - href: '#', + href: '#' }, { label: 'Third link', to: 'name', - target: '_blank', - }, + target: '_blank' + } ], + itemsJson: JSON.stringify([ + { + label: 'First link', + href: '#' + }, + { + label: 'Second link', + href: '#' + }, + { + label: 'Third link', + to: 'name', + target: '_blank' + } + ]), separatorIcon: 'keyboard_arrow_right', - icon: 'home', - }, -} as Meta + icon: 'home' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikBreadcrumb, + PuikBreadcrumb }, setup() { - return { args } + return { args }; }, - template: ``, -}) + template: '' +}); export const Default = { render: Template, @@ -89,6 +117,22 @@ export const Default = { source: { code: ` + const items = [ + { + label: 'First link', + href: '#' + }, + { + label: 'Second link', + href: '#' + }, + { + label: 'Third link', + to: 'name', + target: '_blank' + } + ] + Third link `, - language: 'html', + language: 'html' + } + } + } +}; + +export const WithDataItems = { + render: Template, + args: { + itemsJson: JSON.stringify([ + { + label: 'First link', + href: '#' }, - }, + { + label: 'Second link', + href: '#' + }, + { + label: 'Third link', + to: 'name', + target: '_blank' + } + ]), + separatorIcon: 'keyboard_arrow_right', + icon: 'home' }, -} + + parameters: { + docs: { + source: { + code: ` + + itemsJson: JSON.stringify([ + { + label: 'First link', + href: '#' + }, + { + label: 'Second link', + href: '#' + }, + { + label: 'Third link', + to: 'name', + target: '_blank' + } + ]) + + + + + + `, + language: 'html' + } + } + } +}; diff --git a/packages/components/breadcrumb/style/css.ts b/packages/components/breadcrumb/style/css.ts index 34b5ff0e..e8575d75 100644 --- a/packages/components/breadcrumb/style/css.ts +++ b/packages/components/breadcrumb/style/css.ts @@ -1,4 +1,4 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-breadcrumb.css' -import '@puik/theme/puik-link.css' -import '@puik/theme/puik-icon.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-breadcrumb.css'; +import '@prestashopcorp/puik-theme/puik-link.css'; +import '@prestashopcorp/puik-theme/puik-icon.css'; diff --git a/packages/components/breadcrumb/style/index.ts b/packages/components/breadcrumb/style/index.ts index 761cccbd..cc0abcf6 100644 --- a/packages/components/breadcrumb/style/index.ts +++ b/packages/components/breadcrumb/style/index.ts @@ -1,4 +1,4 @@ -import '@puik/components/base/style' -import '@puik/theme/src/breadcrumb.scss' -import '@puik/theme/src/link.scss' -import '@puik/theme/src/icon.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-breadcrumb.scss'; +import '@prestashopcorp/puik-theme/src/puik-link.scss'; +import '@prestashopcorp/puik-theme/src/puik-icon.scss'; diff --git a/packages/components/breadcrumb/test/breadcrumb.spec.ts b/packages/components/breadcrumb/test/breadcrumb.spec.ts index 49c77870..0d936972 100644 --- a/packages/components/breadcrumb/test/breadcrumb.spec.ts +++ b/packages/components/breadcrumb/test/breadcrumb.spec.ts @@ -1,109 +1,109 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikBreadcrumb from '../src/breadcrumb.vue' -import { PuikLinkTarget } from '../../link' -import type { BreadcrumbItem } from '../src/breadcrumb' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikBreadcrumb, BreadcrumbProps, BreadcrumbItem, PuikLinkTargetVariants } from '@prestashopcorp/puik-components'; describe('Breadcrumb tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props: BreadcrumbProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikBreadcrumb, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; const getBreadcrumbItems = () => - wrapper.findAll('.puik-breadcrumb__item-link, .puik-breadcrumb__item--last') + wrapper.findAll('.puik-breadcrumb__item-link, .puik-breadcrumb__item--last'); const getBreadcrumbSeparatorIcons = () => - wrapper.findAll('.puik-breadcrumb__item-icon') + wrapper.findAll('.puik-breadcrumb__item-icon'); const getBreadcrumbHomeIcon = () => - wrapper.find('.puik-breadcrumb__home-icon') + wrapper.find('.puik-breadcrumb__home-icon'); const items: BreadcrumbItem[] = [ { label: 'First link', href: '#', - target: PuikLinkTarget.BLANK, - dataTest: 'test-1', + target: PuikLinkTargetVariants.Blank, + dataTest: 'test-1' }, { label: 'Second link', - href: '#', + href: '#' }, { label: 'Third link', to: 'name', - dataTest: 'test-3', + dataTest: 'test-3' }, { - label: 'Last link', - }, - ] + label: 'Last link' + } + ]; + const itemsJson: string = JSON.stringify(items); + it('should be a vue instance', () => { - factory({ items }) - expect(wrapper).toBeTruthy() - }) + factory({ items }); + expect(wrapper).toBeTruthy(); + }); it('should not display without items', () => { - factory() - expect(wrapper.element.tagName).toBeFalsy() - }) + factory({ items: [] }); + expect(wrapper.element.tagName).toBeFalsy(); + }); it('should first item be A with href and data-test', () => { - factory({ items }) - const localItems = getBreadcrumbItems() - expect(localItems[0].element.tagName).toBe('A') - expect(localItems[0].element.getAttribute('href')).toBe(items[0].href) + factory({ items }); + const localItems = getBreadcrumbItems(); + expect(localItems[0].element.tagName).toBe('A'); + expect(localItems[0].element.getAttribute('href')).toBe(items[0].href); expect( - localItems[0].element - .getAttribute('data-test') - .includes(items[0].dataTest) - ) - }) + localItems[0].element.getAttribute('data-test')?.includes(items[0].dataTest) + ); + }); it('should third item be ROUTER-LINK with to and data-test', () => { - factory({ items }) - const localItems = getBreadcrumbItems() - expect(localItems[2].element.tagName).toBe('ROUTER-LINK') - expect(localItems[2].element.getAttribute('to')).toBe(items[2].to) - expect( - localItems[2].element - .getAttribute('data-test') - .includes(items[2].dataTest) - ) - }) + factory({ items }); + const localItems = getBreadcrumbItems(); + expect(localItems[2].element.tagName).toBe('ROUTER-LINK'); + expect(localItems[2].element.getAttribute('to')).toBe(items[2].to); + expect(localItems[2].element.getAttribute('data-test')?.includes(items[2].dataTest) + ); + }); it('should display only three separator icon', () => { - factory({ items }) - expect(getBreadcrumbSeparatorIcons().length).toBe(3) - }) + factory({ items }); + expect(getBreadcrumbSeparatorIcons().length).toBe(3); + }); it('should not display separator icon', () => { - factory({ items: [items[0]] }) - expect(getBreadcrumbSeparatorIcons().length).toBe(0) - }) + factory({ items: [items[0]] }); + expect(getBreadcrumbSeparatorIcons().length).toBe(0); + }); it('should display custom icon', () => { - const separatorIcon = 'check' - factory({ items, separatorIcon }) - const icons = getBreadcrumbSeparatorIcons() - expect(icons[0].text()).toBe(separatorIcon) - }) + const separatorIcon = 'check'; + factory({ items, separatorIcon }); + const icons = getBreadcrumbSeparatorIcons(); + expect(icons[0].text()).toBe(separatorIcon); + }); it('should display home icon', () => { - const icon = 'home' - factory({ items, icon }) - expect(getBreadcrumbHomeIcon().text()).toBe(icon) - }) + const icon = 'home'; + factory({ items, icon }); + expect(getBreadcrumbHomeIcon().text()).toBe(icon); + }); it('should have target', () => { - factory({ items }) + factory({ items }); expect(getBreadcrumbItems()[0].element.getAttribute('target')).toBe( '_blank' - ) - }) + ); + }); it('should last item be div', () => { - factory({ items }) - const lastItem = getBreadcrumbItems().pop() - expect(lastItem.element.tagName).toBe('DIV') - }) -}) + factory({ items }); + const lastItem = getBreadcrumbItems().pop(); + expect(lastItem?.element.tagName).toBe('DIV'); + }); + it('should handle dataItems prop correctly', () => { + factory({ itemsJson }); + const localItems = getBreadcrumbItems(); + expect(localItems.length).toBe(items.length); + items.forEach((item, index) => { + expect(localItems[index].text()).toContain(item.label); + }); + }); +}); diff --git a/packages/components/button-group/index.ts b/packages/components/button-group/index.ts index 26d0e982..89c1abc6 100644 --- a/packages/components/button-group/index.ts +++ b/packages/components/button-group/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import ButtonGroup from './src/button-group.vue'; -import ButtonGroup from './src/button-group.vue' +export const PuikButtonGroup = ButtonGroup; +export default PuikButtonGroup; -export const PuikButtonGroup = withInstall(ButtonGroup) -export default PuikButtonGroup - -export * from './src/button-group' +export * from './src/button-group'; diff --git a/packages/components/button-group/src/button-group.ts b/packages/components/button-group/src/button-group.ts index 09b9a549..8c641b88 100644 --- a/packages/components/button-group/src/button-group.ts +++ b/packages/components/button-group/src/button-group.ts @@ -1,26 +1,23 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, InjectionKey, Ref } from 'vue' -import type ButtonGroup from './button-group.vue' -import type { ButtonProps } from '@puik/components' +import type { InjectionKey, Ref, WritableComputedRef } from 'vue'; +import type ButtonGroup from './button-group.vue'; +import type { ButtonProps } from '@prestashopcorp/puik-components'; export type ButtonGroupType = ButtonProps & { label: string -} - -export const buttonGroupProps = buildProps({ - modelValue: { - type: [String, Number, Object, Array], - required: false, - default: undefined, - }, -} as const) +}; -export type ButtonGroupProps = ExtractPropTypes +export interface ButtonGroupProps { + modelValue?: string | number | Record | any[] +} -export type ButtonGroupInstance = InstanceType +export type ButtonGroupInstance = InstanceType; export type ButtonGroupContext = { - selected: Ref> -} + selected: + | Ref | undefined> + | WritableComputedRef< + string | number | any[] | Record | undefined + > +}; export const ButtonGroupKey: InjectionKey = - Symbol('ButtonGroup') + Symbol('ButtonGroup'); diff --git a/packages/components/button-group/src/button-group.vue b/packages/components/button-group/src/button-group.vue index 9b2fba4f..f68d7873 100644 --- a/packages/components/button-group/src/button-group.vue +++ b/packages/components/button-group/src/button-group.vue @@ -1,20 +1,25 @@ + + diff --git a/packages/components/button-group/stories/button-group.stories.ts b/packages/components/button-group/stories/button-group.stories.ts index 0e681f9e..b837bf22 100644 --- a/packages/components/button-group/stories/button-group.stories.ts +++ b/packages/components/button-group/stories/button-group.stories.ts @@ -1,7 +1,7 @@ -import { ref } from 'vue' -import PuikButtonGroup from './../src/button-group.vue' -import PuikButton from './../../button/src/button.vue' -import type { Meta, StoryFn, Args } from '@storybook/vue3' +import { ref } from 'vue'; +import { PuikButton, PuikButtonGroup } from '@prestashopcorp/puik-components'; + +import type { Meta, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/ButtonGroup', @@ -12,35 +12,35 @@ export default { control: 'none', table: { defaultValue: { - summary: 'undefined', + summary: 'undefined' }, type: { - summary: 'string | number | object | []', - }, - }, + summary: 'string | number | object | []' + } + } }, default: { control: 'none', - description: 'Use puik buttons in the puik button group', - }, + description: 'Use puik buttons in the puik button group' + } }, args: { - modelValue: 'btn1', - }, -} as Meta + modelValue: 'btn1' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikButtonGroup, - PuikButton, + PuikButton }, setup() { - const selectedValue = ref('btn1') + const selectedValue = ref('btn1'); return { selectedValue, - args, - } + args + }; }, template: ` @@ -49,8 +49,8 @@ const Template: StoryFn = (args: Args) => ({ Button 3 - `, -}) + ` +}); export const Default = { render: Template, @@ -74,8 +74,8 @@ export const Default = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/button-group/style/css.ts b/packages/components/button-group/style/css.ts index e20af82e..fb267e3f 100644 --- a/packages/components/button-group/style/css.ts +++ b/packages/components/button-group/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-button-group.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-button-group.css'; diff --git a/packages/components/button-group/style/index.ts b/packages/components/button-group/style/index.ts index 17a6be59..69b83b16 100644 --- a/packages/components/button-group/style/index.ts +++ b/packages/components/button-group/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/button-group.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-button-group.scss'; diff --git a/packages/components/button-group/test/button-group.spec.ts b/packages/components/button-group/test/button-group.spec.ts index 56113a2e..eb1427f4 100644 --- a/packages/components/button-group/test/button-group.spec.ts +++ b/packages/components/button-group/test/button-group.spec.ts @@ -1,24 +1,21 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikButtonGroup from '../src/button-group.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikButtonGroup, ButtonGroupProps } from '@prestashopcorp/puik-components'; describe('ButtonGroup tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: ButtonGroupProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikButtonGroup, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) -}) + factory(); + expect(wrapper).toBeTruthy(); + }); +}); diff --git a/packages/components/button/index.ts b/packages/components/button/index.ts index 449f174d..01ee4b6e 100644 --- a/packages/components/button/index.ts +++ b/packages/components/button/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Button from './src/button.vue'; -import Button from './src/button.vue' +export const PuikButton = Button; +export default PuikButton; -export const PuikButton = withInstall(Button) -export default PuikButton - -export * from './src/button' +export * from './src/button'; diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts index f0158d3f..e6cd6043 100644 --- a/packages/components/button/src/button.ts +++ b/packages/components/button/src/button.ts @@ -1,85 +1,39 @@ -import { buildProps } from '@puik/utils' -import type { RouteLocationRaw } from 'vue-router' -import type { ExtractPropTypes, PropType } from 'vue' -import type Button from './button.vue' +import type { RouteLocationRaw } from 'vue-router'; +import type Button from './button.vue'; -export const buttonVariants = [ - 'primary', - 'primary-reverse', - 'destructive', - 'secondary', - 'secondary-reverse', - 'tertiary', - 'text', - 'text-reverse', - 'info', - 'success', - 'warning', - 'danger', -] as const -export type PuikButtonVariant = (typeof buttonVariants)[number] +export enum PuikButtonVariants { + Primary = 'primary', + PrimaryReverse = 'primary-reverse', + Destructive = 'destructive', + Secondary = 'secondary', + SecondaryReverse = 'secondary-reverse', + Tertiary = 'tertiary', + Text = 'text', + TextReverse = 'text-reverse', + Info = 'info', + Success = 'success', + Warning = 'warning', + Danger = 'danger', +} -export const buttonSizes = ['sm', 'md', 'lg'] as const -export type PuikButtonSize = (typeof buttonSizes)[number] +export enum PuikButtonSizes { + Small = 'sm', + Medium = 'md', + Large = 'lg', +} -export const buttonProps = buildProps({ - variant: { - type: String as PropType, - required: false, - default: 'primary', - }, - size: { - type: String as PropType, - required: false, - default: 'md', - }, - fluid: { - type: Boolean, - required: false, - default: false, - }, - wrapLabel: { - type: Boolean, - required: false, - default: false, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - leftIcon: { - type: String, - required: false, - default: '', - }, - rightIcon: { - type: String, - required: false, - default: '', - }, - to: { - type: [Object, String] as PropType, - required: false, - default: undefined, - }, - href: { - type: String, - required: false, - default: undefined, - }, - value: { - type: [String, Number, Object, Array], - required: false, - default: undefined, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface ButtonProps { + variant?: PuikButtonVariants | `${PuikButtonVariants}` + size?: PuikButtonSizes | `${PuikButtonSizes}` + fluid?: boolean + wrapLabel?: boolean + disabled?: boolean + leftIcon?: string + rightIcon?: string + to?: RouteLocationRaw + href?: string + value?: string | number | Record | any[] + dataTest?: string +} -export type ButtonProps = ExtractPropTypes - -export type ButtonInstance = InstanceType +export type ButtonInstance = InstanceType; diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue index 4f667329..e92aa3f5 100644 --- a/packages/components/button/src/button.vue +++ b/packages/components/button/src/button.vue @@ -21,7 +21,7 @@ class="puik-button__left-icon" :data-test="dataTest != undefined ? `leftIcon-${dataTest}` : undefined" /> - + + + diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts index 728cbcdb..56036640 100644 --- a/packages/components/button/stories/button.stories.ts +++ b/packages/components/button/stories/button.stories.ts @@ -1,10 +1,10 @@ -import { capitalize } from 'lodash-unified' -import PuikButton from './../src/button.vue' -import { buttonVariants, buttonSizes } from './../src/button' -import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3' +import { PuikButton, PuikButtonVariants, PuikButtonSizes } from '@prestashopcorp/puik-components'; +import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; -const buttonVariantsSummary = buttonVariants.join('|') -const buttonSizesSummary = buttonSizes.join('|') +const buttonVariants = Object.values(PuikButtonVariants); +const buttonVariantsSummary = buttonVariants.join('|'); +const buttonSizes = Object.values(PuikButtonSizes); +const buttonSizesSummary = buttonSizes.join('|'); export default { title: 'Components/Button', @@ -16,12 +16,12 @@ export default { options: buttonVariants, table: { defaultValue: { - summary: 'primary', + summary: 'primary' }, type: { - summary: buttonVariantsSummary, - }, - }, + summary: buttonVariantsSummary + } + } }, size: { control: 'select', @@ -29,61 +29,61 @@ export default { options: buttonSizes, table: { defaultValue: { - summary: 'md', + summary: 'md' }, type: { - summary: buttonSizesSummary, - }, - }, + summary: buttonSizesSummary + } + } }, fluid: { description: 'Set the button as fluid', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, wrapLabel: { description: 'Set the carriage return of the button label', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, disabled: { description: 'Set the button as disabled', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, leftIcon: { - description: 'Set the button left icon', + description: 'Set the button left icon' }, rightIcon: { - description: 'Set the button right icon', + description: 'Set the button right icon' }, default: { control: 'text', - description: 'Label/Content of the button', + description: 'Label/Content of the button' }, to: { control: 'text', description: - 'Set a vue router link for the button (changes button to router-link)', + 'Set a vue router link for the button (changes button to router-link)' }, href: { control: 'text', - description: 'Set a link for the button (changes button to "a" html tag)', + description: 'Set a link for the button (changes button to "a" html tag)' }, dataTest: { control: 'text', description: - 'Set a data-test attribute to the button `${dataTest}` `left-icon-${dataTest}` `right-icon-${dataTest}`', - }, + 'Set a data-test attribute to the button `${dataTest}` `left-icon-${dataTest}` `right-icon-${dataTest}`' + } }, args: { variant: 'primary', @@ -95,19 +95,19 @@ export default { rightIcon: '', to: undefined, href: undefined, - default: 'Add to cart', - }, -} as Meta + default: 'Add to cart' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikButton, + PuikButton }, setup() { - return { args } + return { args }; }, - template: `{{ args.default }}`, -}) + template: '{{ args.default }}' +}); export const Default = { render: Template, @@ -141,55 +141,53 @@ export const Default = { --> `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; const ButtonTemplate = (args: Args) => ({ components: { PuikButton }, setup() { return { - args, - capitalize, - } + args + }; }, template: `
- {{ capitalize(args.variant) }} Button lg - {{ capitalize(args.variant) }} Button md - {{ capitalize(args.variant) }} Button sm + {{ args.variant }} Button lg + {{ args.variant }} Button md + {{ args.variant }} Button sm
- `, -}) + ` +}); -const AllVariantTemplate = (args: Args, storyContext) => ({ +const AllVariantTemplate: StoryFn = (args: Args, storyContext) => ({ components: { PuikButton }, setup() { - const variants = storyContext.argTypes.variant.options + const variants = storyContext.argTypes.variant.options; return { args, - capitalize, - variants, - } + variants + }; }, template: `
- `, -}) + ` +}); export const Primary: StoryObj = { render: ButtonTemplate, args: { - variant: 'primary', + variant: 'primary' }, parameters: { @@ -202,17 +200,17 @@ export const Primary: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const PrimaryReverse: StoryObj = { render: ButtonTemplate, args: { - variant: 'primary-reverse', + variant: 'primary-reverse' }, parameters: { @@ -226,17 +224,17 @@ export const PrimaryReverse: StoryObj = { `, language: 'html', - dark: true, - }, - }, - }, -} + dark: true + } + } + } +}; export const Secondary: StoryObj = { render: ButtonTemplate, args: { - variant: 'secondary', + variant: 'secondary' }, parameters: { @@ -249,17 +247,17 @@ export const Secondary: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const SecondaryReverse: StoryObj = { render: ButtonTemplate, args: { - variant: 'secondary-reverse', + variant: 'secondary-reverse' }, parameters: { @@ -273,17 +271,17 @@ export const SecondaryReverse: StoryObj = { `, language: 'html', - dark: true, - }, - }, - }, -} + dark: true + } + } + } +}; export const Tertiary: StoryObj = { render: ButtonTemplate, args: { - variant: 'tertiary', + variant: 'tertiary' }, parameters: { @@ -296,17 +294,17 @@ export const Tertiary: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Destructive: StoryObj = { render: ButtonTemplate, args: { - variant: 'destructive', + variant: 'destructive' }, parameters: { @@ -319,17 +317,17 @@ export const Destructive: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Text: StoryObj = { render: ButtonTemplate, args: { - variant: 'text', + variant: 'text' }, parameters: { @@ -342,17 +340,17 @@ export const Text: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const TextReverse: StoryObj = { render: ButtonTemplate, args: { - variant: 'text-reverse', + variant: 'text-reverse' }, parameters: { @@ -366,17 +364,17 @@ export const TextReverse: StoryObj = { `, language: 'html', - dark: true, - }, - }, - }, -} + dark: true + } + } + } +}; export const Info: StoryObj = { render: ButtonTemplate, args: { - variant: 'info', + variant: 'info' }, parameters: { @@ -389,17 +387,17 @@ export const Info: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Success: StoryObj = { render: ButtonTemplate, args: { - variant: 'success', + variant: 'success' }, parameters: { @@ -412,17 +410,17 @@ export const Success: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Warning: StoryObj = { render: ButtonTemplate, args: { - variant: 'warning', + variant: 'warning' }, parameters: { @@ -435,17 +433,17 @@ export const Warning: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Danger: StoryObj = { render: ButtonTemplate, args: { - variant: 'danger', + variant: 'danger' }, parameters: { @@ -458,17 +456,17 @@ export const Danger: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Disabled: StoryObj = { render: AllVariantTemplate, args: { - disabled: true, + disabled: true }, parameters: { @@ -481,20 +479,20 @@ export const Disabled: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Fluid: StoryObj = { render: () => ({ components: { - PuikButton, + PuikButton }, template: ` Primary Button lg - `, + ` }), parameters: { @@ -507,23 +505,23 @@ export const Fluid: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const WithIcon: StoryObj = { render: () => ({ components: { - PuikButton, + PuikButton }, template: `
Left Icon Right Icon
- `, + ` }), parameters: { @@ -544,11 +542,11 @@ export const WithIcon: StoryObj = { shopping_cart `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Variants: StoryObj = { render: AllVariantTemplate, @@ -563,8 +561,8 @@ export const Variants: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/button/style/css.ts b/packages/components/button/style/css.ts index 1eaeecaf..dd7a965b 100644 --- a/packages/components/button/style/css.ts +++ b/packages/components/button/style/css.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-button.css' -import '@puik/theme/puik-icon.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-button.css'; +import '@prestashopcorp/puik-theme/puik-icon.css'; diff --git a/packages/components/button/style/index.ts b/packages/components/button/style/index.ts index 5feddd95..eb159db5 100644 --- a/packages/components/button/style/index.ts +++ b/packages/components/button/style/index.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style' -import '@puik/theme/src/button.scss' -import '@puik/theme/src/icon.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-button.scss'; +import '@prestashopcorp/puik-theme/src/puik-icon.scss'; diff --git a/packages/components/button/test/button.spec.ts b/packages/components/button/test/button.spec.ts index da319d3e..7ed6cd3c 100644 --- a/packages/components/button/test/button.spec.ts +++ b/packages/components/button/test/button.spec.ts @@ -1,121 +1,118 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import Button from '../src/button.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikButton, ButtonProps } from '@prestashopcorp/puik-components'; describe('Button tests', () => { - let wrapper: VueWrapper - const findButton = () => wrapper.find('.puik-button') - const findButtonLeftIcon = () => wrapper.find('.puik-button__left-icon') - const findButtonRightIcon = () => wrapper.find('.puik-button__right-icon') + let wrapper: VueWrapper; + const findButton = () => wrapper.find('.puik-button'); + const findButtonLeftIcon = () => wrapper.find('.puik-button__left-icon'); + const findButtonRightIcon = () => wrapper.find('.puik-button__right-icon'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: ButtonProps, + options?: ComponentMountingOptions ) => { - wrapper = mount(Button, { - props: { - ...propsData, - }, - ...options, - }) - } + wrapper = mount(PuikButton, { + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should display the button on size lg', () => { - factory({ size: 'lg' }) - expect(findButton().classes()).toContain('puik-button--lg') - }) + factory({ size: 'lg' }); + expect(findButton().classes()).toContain('puik-button--lg'); + }); it('should display the button variant as destructive', () => { - factory({ variant: 'destructive' }) - expect(findButton().classes()).toContain('puik-button--destructive') - }) + factory({ variant: 'destructive' }); + expect(findButton().classes()).toContain('puik-button--destructive'); + }); it('should display the button variant as secondary', () => { - factory({ variant: 'secondary' }) - expect(findButton().classes()).toContain('puik-button--secondary') - }) + factory({ variant: 'secondary' }); + expect(findButton().classes()).toContain('puik-button--secondary'); + }); it('should display the button variant as tertiary', () => { - factory({ variant: 'tertiary' }) - expect(findButton().classes()).toContain('puik-button--tertiary') - }) + factory({ variant: 'tertiary' }); + expect(findButton().classes()).toContain('puik-button--tertiary'); + }); it('should display the button variant as text', () => { - factory({ variant: 'text' }) - expect(findButton().classes()).toContain('puik-button--text') - }) + factory({ variant: 'text' }); + expect(findButton().classes()).toContain('puik-button--text'); + }); it('should display the button variant as info', () => { - factory({ variant: 'info' }) - expect(findButton().classes()).toContain('puik-button--info') - }) + factory({ variant: 'info' }); + expect(findButton().classes()).toContain('puik-button--info'); + }); it('should display the button variant as success', () => { - factory({ variant: 'success' }) - expect(findButton().classes()).toContain('puik-button--success') - }) + factory({ variant: 'success' }); + expect(findButton().classes()).toContain('puik-button--success'); + }); it('should display the button variant as warning', () => { - factory({ variant: 'warning' }) - expect(findButton().classes()).toContain('puik-button--warning') - }) + factory({ variant: 'warning' }); + expect(findButton().classes()).toContain('puik-button--warning'); + }); it('should display the button variant as danger', () => { - factory({ variant: 'danger' }) - expect(findButton().classes()).toContain('puik-button--danger') - }) + factory({ variant: 'danger' }); + expect(findButton().classes()).toContain('puik-button--danger'); + }); it('should display a left icon', () => { - factory({ leftIcon: 'close' }) - expect(findButtonLeftIcon().exists()).toBeTruthy() - }) + factory({ leftIcon: 'close' }); + expect(findButtonLeftIcon().exists()).toBeTruthy(); + }); it('should display a right icon', () => { - factory({ rightIcon: 'close' }) - expect(findButtonRightIcon().exists()).toBeTruthy() - }) + factory({ rightIcon: 'close' }); + expect(findButtonRightIcon().exists()).toBeTruthy(); + }); it('should display the button on disabled mode', () => { - factory({ disabled: true }) - expect((findButton().element as HTMLButtonElement).disabled).toBeTruthy() - }) + factory({ disabled: true }); + expect((findButton().element as HTMLButtonElement).disabled).toBeTruthy(); + }); it('should set the button on fluid mode', () => { - factory({ fluid: true }) - expect(findButton().classes()).toContain('puik-button--fluid') - }) + factory({ fluid: true }); + expect(findButton().classes()).toContain('puik-button--fluid'); + }); it('should set the button label wrap to false', () => { - factory({ wrapLabel: false }) - expect(findButton().classes()).toContain('puik-button--no-wrap') - }) + factory({ wrapLabel: false }); + expect(findButton().classes()).toContain('puik-button--no-wrap'); + }); it('should be a router-link if to prop is defined', () => { - factory({ to: '/test' }) - expect(findButton().element.tagName).toBe('ROUTER-LINK') - }) + factory({ to: '/test' }); + expect(findButton().element.tagName).toBe('ROUTER-LINK'); + }); it('should be a link if href prop is defined', () => { - factory({ href: '/test' }) - expect(findButton().element.tagName).toBe('A') - }) + factory({ href: '/test' }); + expect(findButton().element.tagName).toBe('A'); + }); it('should have a data-test attribute on global component, left-icon and right-icon', () => { factory({ leftIcon: 'close', rightIcon: 'close', - dataTest: 'button', - }) - expect(findButton().attributes('data-test')).toBe('button') - expect(findButtonLeftIcon().attributes('data-test')).toBe('leftIcon-button') + dataTest: 'button' + }); + expect(findButton().attributes('data-test')).toBe('button'); + expect(findButtonLeftIcon().attributes('data-test')).toBe('leftIcon-button'); expect(findButtonRightIcon().attributes('data-test')).toBe( 'rightIcon-button' - ) - }) -}) + ); + }); +}); diff --git a/packages/components/card/index.ts b/packages/components/card/index.ts index 146a96e3..19062ade 100644 --- a/packages/components/card/index.ts +++ b/packages/components/card/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Card from './src/card.vue'; -import Card from './src/card.vue' +export const PuikCard = Card; +export default PuikCard; -export const PuikCard = withInstall(Card) -export default PuikCard - -export * from './src/card' +export * from './src/card'; diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts index 51dc83b8..bcb4e2c1 100644 --- a/packages/components/card/src/card.ts +++ b/packages/components/card/src/card.ts @@ -1,26 +1,16 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Card from './card.vue' +import type Card from './card.vue'; -export const cardVariants = [ - 'highlight', - 'blue', - 'purple', - 'amber', - 'green', - 'default', -] as const +export enum PuikCardVariants { + Highlight = 'highlight', + Blue = 'blue', + Purple = 'purple', + Amber = 'amber', + Green = 'green', + Default = 'default', +} -export type PuikCardVariant = (typeof cardVariants)[number] +export interface CardProps { + variant?: PuikCardVariants | `${PuikCardVariants}` +} -export const cardProps = buildProps({ - variant: { - type: String as PropType, - required: false, - default: 'default', - }, -} as const) - -export type CardProps = ExtractPropTypes - -export type CardInstance = InstanceType +export type CardInstance = InstanceType; diff --git a/packages/components/card/src/card.vue b/packages/components/card/src/card.vue index 77891eb0..15370276 100644 --- a/packages/components/card/src/card.vue +++ b/packages/components/card/src/card.vue @@ -1,13 +1,20 @@ + + diff --git a/packages/components/card/stories/card.stories.ts b/packages/components/card/stories/card.stories.ts index 4545c44a..b7462658 100644 --- a/packages/components/card/stories/card.stories.ts +++ b/packages/components/card/stories/card.stories.ts @@ -1,10 +1,9 @@ -import PrestaShopSloganBg from '../../../../docs/assets/img/prestashop-slogan-bg.jpg' -import { cardVariants } from '../src/card' -import PuikCard from './../src/card.vue' -import PuikButton from './../../button/src/button.vue' -import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3' +import PrestaShopSloganBg from '../../../../docs/assets/img/prestashop-slogan-bg.jpg'; +import { PuikButton, PuikCard, PuikCardVariants } from '@prestashopcorp/puik-components'; +import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; -const cardVariantsSummary = cardVariants.join('|') +const cardVariants = Object.values(PuikCardVariants); +const cardVariantsSummary = cardVariants.join('|'); export default { title: 'Components/Card', @@ -14,42 +13,42 @@ export default { description: 'Set the card variant', table: { defaultValue: { - summary: 'default', + summary: 'default' }, type: { - summary: cardVariantsSummary, - }, - }, + summary: cardVariantsSummary + } + } }, default: { control: 'text', - description: 'Card content', - }, + description: 'Card content' + } }, args: { - default: 'Card content', + default: 'Card content' }, decorators: [ () => ({ - template: '
', - }), - ], -} as Meta + template: '
' + }) + ] +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikCard, + PuikCard }, setup() { - return { args } + return { args }; }, template: `

Card title

{{ args.default }}
- `, -}) + ` +}); export const Default = { render: Template, @@ -75,17 +74,17 @@ export const Default = { Card content `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Highlight = { render: Template, args: { - variant: 'highlight', + variant: 'highlight' }, parameters: { @@ -102,17 +101,17 @@ export const Highlight = { Card content `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Blue = { render: Template, args: { - variant: 'blue', + variant: 'blue' }, parameters: { @@ -129,17 +128,17 @@ export const Blue = { Card content `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Purple = { render: Template, args: { - variant: 'purple', + variant: 'purple' }, parameters: { @@ -156,17 +155,17 @@ export const Purple = { Card content `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Amber = { render: Template, args: { - variant: 'amber', + variant: 'amber' }, parameters: { @@ -183,17 +182,17 @@ export const Amber = { Card content `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Green = { render: Template, args: { - variant: 'green', + variant: 'green' }, parameters: { @@ -210,20 +209,20 @@ export const Green = { Card content `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const WithPictureTitleTextAndAction: StoryObj = { render: (args: Args) => ({ components: { PuikButton, - PuikCard, + PuikCard }, setup() { - return { args, PrestaShopSloganBg } + return { args, PrestaShopSloganBg }; }, template: ` @@ -234,7 +233,7 @@ export const WithPictureTitleTextAndAction: StoryObj = { Button - `, + ` }), parameters: { @@ -261,8 +260,8 @@ export const WithPictureTitleTextAndAction: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/card/style/css.ts b/packages/components/card/style/css.ts index 44ac848c..e751ba1f 100644 --- a/packages/components/card/style/css.ts +++ b/packages/components/card/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-card.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-card.css'; diff --git a/packages/components/card/style/index.ts b/packages/components/card/style/index.ts index ad7d9439..32ecf256 100644 --- a/packages/components/card/style/index.ts +++ b/packages/components/card/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/card.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-card.scss'; diff --git a/packages/components/card/test/card.spec.ts b/packages/components/card/test/card.spec.ts index 395e4be3..9d6d9fb0 100644 --- a/packages/components/card/test/card.spec.ts +++ b/packages/components/card/test/card.spec.ts @@ -1,48 +1,45 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikCard from '../src/card.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikCard, CardProps } from '@prestashopcorp/puik-components'; describe('Card tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: CardProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikCard, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should display the slot content', () => { - const slotDefault = 'Card content' + const slotDefault = 'Card content'; factory( {}, { slots: { - default: slotDefault, - }, + default: slotDefault + } } - ) - expect(wrapper.text()).toEqual(slotDefault) - }) + ); + expect(wrapper.text()).toEqual(slotDefault); + }); it('should display the default variant', () => { - factory() - expect(wrapper.classes()).toContain('puik-card--default') - }) + factory(); + expect(wrapper.classes()).toContain('puik-card--default'); + }); it('should display the blue variant', () => { - const variant = 'blue' - factory({ variant }) - expect(wrapper.classes()).toContain(`puik-card--${variant}`) - }) -}) + const variant = 'blue'; + factory({ variant }); + expect(wrapper.classes()).toContain(`puik-card--${variant}`); + }); +}); diff --git a/packages/components/checkbox/index.ts b/packages/components/checkbox/index.ts index 23f5f5cc..078e1ff2 100644 --- a/packages/components/checkbox/index.ts +++ b/packages/components/checkbox/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Checkbox from './src/checkbox.vue'; -import Checkbox from './src/checkbox.vue' +export const PuikCheckbox = Checkbox; +export default PuikCheckbox; -export const PuikCheckbox = withInstall(Checkbox) -export default PuikCheckbox - -export * from './src/checkbox' +export * from './src/checkbox'; diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts index b47f0491..3b9f79d3 100644 --- a/packages/components/checkbox/src/checkbox.ts +++ b/packages/components/checkbox/src/checkbox.ts @@ -1,34 +1,11 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type Checkbox from './checkbox.vue' +import type Checkbox from './checkbox.vue'; -export const checkboxProps = buildProps({ - modelValue: { - type: Boolean, - required: true, - }, - label: { - type: String, - required: false, - default: undefined, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - indeterminate: { - type: Boolean, - required: false, - default: false, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface CheckboxProps { + modelValue: boolean + label?: string + disabled?: boolean + indeterminate?: boolean + dataTest?: string +} -export type CheckboxProps = ExtractPropTypes - -export type CheckboxInstance = InstanceType +export type CheckboxInstance = InstanceType; diff --git a/packages/components/checkbox/src/checkbox.vue b/packages/components/checkbox/src/checkbox.vue index adccb67a..761ce465 100644 --- a/packages/components/checkbox/src/checkbox.vue +++ b/packages/components/checkbox/src/checkbox.vue @@ -1,5 +1,8 @@ + + diff --git a/packages/components/icon/stories/icon.stories.ts b/packages/components/icon/stories/icon.stories.ts index 211b0c85..6819d93c 100644 --- a/packages/components/icon/stories/icon.stories.ts +++ b/packages/components/icon/stories/icon.stories.ts @@ -1,12 +1,12 @@ -import PuikIcon from './../src/icon.vue' -import type { Args, Meta, StoryFn } from '@storybook/vue3' +import { PuikIcon } from '@prestashopcorp/puik-components'; +import type { Args, Meta, StoryFn } from '@storybook/vue3'; export default { title: 'Components/Icon', component: PuikIcon, argTypes: { icon: { - description: 'Set the icon name', + description: 'Set the icon name' }, fontSize: { description: 'Set the icon font size', @@ -14,44 +14,44 @@ export default { type: 'range', min: 1, max: 100, - step: 1, - }, + step: 1 + } }, color: { description: 'Set the icon color', control: { - type: 'color', - }, + type: 'color' + } }, nodeType: { description: 'Set the HTML node type', default: 'div', control: { type: 'radio', - options: ['div', 'span'], - }, + options: ['div', 'span'] + } }, dataTest: { - description: 'Set the data-test attribute', + description: 'Set the data-test attribute' }, isDisabled: { description: 'If the icon is disable', control: { - type: 'boolean', - }, - }, - }, -} as Meta + type: 'boolean' + } + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikIcon, + PuikIcon }, setup() { - return { args } + return { args }; }, - template: ``, -}) + template: '' +}); export const Default = { render: Template, @@ -62,7 +62,7 @@ export const Default = { fontSize: 24, nodeType: 'span', dataTest: '', - isDisabled: false, + isDisabled: false }, parameters: { @@ -75,8 +75,8 @@ export const Default = { check `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/icon/style/css.ts b/packages/components/icon/style/css.ts index da576c29..7dfc85c3 100644 --- a/packages/components/icon/style/css.ts +++ b/packages/components/icon/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-icon.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-icon.css'; diff --git a/packages/components/icon/style/index.ts b/packages/components/icon/style/index.ts index 1aab5caf..ceace908 100644 --- a/packages/components/icon/style/index.ts +++ b/packages/components/icon/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/icon.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-icon.scss'; diff --git a/packages/components/icon/test/icon.spec.ts b/packages/components/icon/test/icon.spec.ts index 48da78e6..c64e9b90 100644 --- a/packages/components/icon/test/icon.spec.ts +++ b/packages/components/icon/test/icon.spec.ts @@ -1,86 +1,83 @@ -import { mount } from '@vue/test-utils' -import { describe, expect, it } from 'vitest' -import PuikIcon from '../src/icon.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, expect, it } from 'vitest'; +import { PuikIcon, IconProps } from '@prestashopcorp/puik-components'; describe('Icon tests', () => { - let wrapper: VueWrapper - const findIcon = () => wrapper.find('.puik-icon') + let wrapper: VueWrapper; + const findIcon = () => wrapper.find('.puik-icon'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props: IconProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikIcon, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { factory({ - icon: 'check', - }) - expect(wrapper).toBeTruthy() - }) + icon: 'check' + }); + expect(wrapper).toBeTruthy(); + }); it('should set the icon', async () => { factory({ icon: 'check', - color: 'red', - }) - expect(findIcon().text()).toBe('check') - }) + color: 'red' + }); + expect(findIcon().text()).toBe('check'); + }); it('should set the icon disabled', async () => { factory({ icon: 'check', color: 'red', - isDisabled: true, - }) + isDisabled: true + }); - expect(findIcon().classes()).toContain('puik-icon--disabled') - }) + expect(findIcon().classes()).toContain('puik-icon--disabled'); + }); it('should set the color', async () => { factory({ icon: 'check', - color: 'red', - }) + color: 'red' + }); - expect(findIcon().element.style.color).toBe('red') - }) + expect(findIcon().element.style.color).toBe('red'); + }); it('should set the font size when value is not number', async () => { factory({ icon: 'check', - fontSize: '56px', - }) + fontSize: '56px' + }); - expect(findIcon().element.style.fontSize).toBe('56px') - }) + expect(findIcon().element.style.fontSize).toBe('56px'); + }); it('should set the font size when value is number', async () => { factory({ icon: 'check', - fontSize: 26, - }) + fontSize: 26 + }); - expect(findIcon().element.style.fontSize).toBe('26px') - }) + expect(findIcon().element.style.fontSize).toBe('26px'); + }); it('should set the node type into HTML DOM', async () => { factory({ icon: 'check', - nodeType: 'span', - }) + nodeType: 'span' + }); - expect(findIcon().element.nodeName).toBe('SPAN') - }) + expect(findIcon().element.nodeName).toBe('SPAN'); + }); it('should have a data-test attribute', () => { - factory({ 'data-test': 'test' }) - expect(findIcon().attributes('data-test')).toBe('test') - }) -}) + factory({ icon: 'check', dataTest: 'test' }); + expect(findIcon().attributes('data-test')).toBe('test'); + }); +}); diff --git a/packages/components/index.ts b/packages/components/index.ts index b6c80236..5eeb725f 100644 --- a/packages/components/index.ts +++ b/packages/components/index.ts @@ -1,34 +1,34 @@ -export * from './config-provider' -export * from './button' -export * from './input' -export * from './alert' -export * from './tooltip' -export * from './switch' -export * from './checkbox' -export * from './label' -export * from './radio' -export * from './link' -export * from './card' -export * from './select' -export * from './icon' -export * from './progress-bar' -export * from './pagination' -export * from './accordion' -export * from './badge' -export * from './button-group' -export * from './skeleton-loader' -export * from './breadcrumb' -export * from './modal' -export * from './snackbar' -export * from './table' -export * from './spinner-loader' -export * from './menu' -export * from './sidebar' -export * from './textarea' -export * from './tab-navigation' -export * from './progress-stepper' -export * from './chip' -export * from './tag' -export * from './avatar' -export * from './divider' -export * from './notification-bar' +export * from './config-provider'; +export * from './button'; +export * from './input'; +export * from './alert'; +export * from './tooltip'; +export * from './switch'; +export * from './checkbox'; +export * from './label'; +export * from './radio'; +export * from './link'; +export * from './card'; +export * from './select'; +export * from './icon'; +export * from './progress-bar'; +export * from './pagination'; +export * from './accordion'; +export * from './badge'; +export * from './button-group'; +export * from './skeleton-loader'; +export * from './breadcrumb'; +export * from './modal'; +export * from './snackbar'; +export * from './table'; +export * from './spinner-loader'; +export * from './menu'; +export * from './sidebar'; +export * from './textarea'; +export * from './tab-navigation'; +export * from './progress-stepper'; +export * from './chip'; +export * from './tag'; +export * from './avatar'; +export * from './divider'; +export * from './notification-bar'; diff --git a/packages/components/input/index.ts b/packages/components/input/index.ts index 5b8c45da..6041c968 100644 --- a/packages/components/input/index.ts +++ b/packages/components/input/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Input from './src/input.vue'; -import Input from './src/input.vue' +export const PuikInput = Input; +export default PuikInput; -export const PuikInput = withInstall(Input) -export default PuikInput - -export * from './src/input' +export * from './src/input'; diff --git a/packages/components/input/src/controls/controls.ts b/packages/components/input/src/controls/controls.ts index 7ff97a6b..2d121a54 100644 --- a/packages/components/input/src/controls/controls.ts +++ b/packages/components/input/src/controls/controls.ts @@ -1,15 +1,3 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' - -export const controlsProps = buildProps({ - disabled: { - type: Boolean, - required: false, - default: false, - }, -} as const) - -export type ControlsProps = ExtractPropTypes - -export const controlsEmits = ['increase', 'decrease'] -export type ControlsEmits = typeof controlsEmits +export interface ControlsProps { + disabled?: boolean +} diff --git a/packages/components/input/src/controls/controls.vue b/packages/components/input/src/controls/controls.vue index 1707f671..5bfa4410 100644 --- a/packages/components/input/src/controls/controls.vue +++ b/packages/components/input/src/controls/controls.vue @@ -21,12 +21,15 @@ diff --git a/packages/components/input/src/input.ts b/packages/components/input/src/input.ts index 339111e8..63b98f15 100644 --- a/packages/components/input/src/input.ts +++ b/packages/components/input/src/input.ts @@ -1,6 +1,4 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Input from './input.vue' +import type Input from './input.vue'; export enum PuikInputTypes { Text = 'text', @@ -12,92 +10,23 @@ export enum PuikInputTypes { Phone = 'tel', } -export const inputProps = buildProps({ - modelValue: { - type: [String, Number], - required: false, - default: '', - }, - type: { - type: String as PropType, - required: false, - default: PuikInputTypes.Text, - }, - id: { - type: String, - required: false, - default: undefined, - }, - placeholder: { - type: String, - required: false, - default: undefined, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - name: { - type: String, - required: false, - default: undefined, - }, - autocomplete: { - type: String, - required: false, - default: undefined, - }, - step: { - type: Number, - required: false, - default: 1, - }, - precision: { - type: Number, - required: false, - default: undefined, - }, - min: { - type: Number, - required: false, - default: Number.NEGATIVE_INFINITY, - }, - max: { - type: Number, - required: false, - default: Number.POSITIVE_INFINITY, - }, - required: { - type: Boolean, - required: false, - default: false, - }, - error: { - type: String, - required: false, - default: undefined, - }, - success: { - type: Boolean, - required: false, - default: false, - }, - hideHint: { - type: Boolean, - required: false, - default: false, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) - -export type InputProps = ExtractPropTypes - -export const inputEmits = ['update:modelValue'] -export type InputEmits = typeof inputEmits +export interface InputProps { + modelValue?: string | number + type?: `${PuikInputTypes}` + id?: string + placeholder?: string + disabled?: boolean + name?: string + autocomplete?: string + step?: number + precision?: number + min?: number + max?: number + required?: boolean + error?: string + success?: boolean + hideHint?: boolean + dataTest?: string +} -export type InputInstance = InstanceType +export type InputInstance = InstanceType; diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue index a2287fa7..4b1db20d 100644 --- a/packages/components/input/src/input.vue +++ b/packages/components/input/src/input.vue @@ -1,8 +1,17 @@ + + diff --git a/packages/components/input/stories/input.stories.ts b/packages/components/input/stories/input.stories.ts index 4fe82475..2aab61fe 100644 --- a/packages/components/input/stories/input.stories.ts +++ b/packages/components/input/stories/input.stories.ts @@ -1,6 +1,9 @@ -import { ref } from 'vue' -import PuikInput from './../src/input.vue' -import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3' +import { ref } from 'vue'; +import { PuikInput, PuikInputTypes } from '@prestashopcorp/puik-components'; +import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; + +const inputTypes = Object.values(PuikInputTypes); +const inputTypesSummary = inputTypes.join('|'); export default { title: 'Components/Input', @@ -8,109 +11,112 @@ export default { argTypes: { type: { control: 'select', - options: ['text', 'password', 'email', 'number', 'search', 'url', 'tel'], + options: inputTypes, description: 'Set the type of the input', table: { - defaultValue: { - summary: 'text', + type: { + summary: inputTypesSummary }, - }, + defaultValue: { + summary: PuikInputTypes.Text + } + } }, id: { - description: 'Set the id of the input', + description: 'Set the id of the input' }, placeholder: { - description: 'Set the placeholder of the input', + description: 'Set the placeholder of the input' }, disabled: { control: 'boolean', description: 'Set the input as disabled', table: { defaultValue: { - summary: 'false', - }, - }, + summary: 'false' + } + } }, name: { - description: 'Set the name of the input', + description: 'Set the name of the input' }, autocomplete: { - description: 'Set the autocomplete mode of the input', + description: 'Set the autocomplete mode of the input' }, required: { description: 'Set the input as required', table: { defaultValue: { - summary: 'false', - }, - }, + summary: 'false' + } + } }, error: { - description: 'Set an error for the input', + description: 'Set an error for the input' }, success: { description: 'Set the input in a success state', table: { defaultValue: { - summary: 'false', - }, - }, + summary: 'false' + } + } }, hideHint: { description: 'Hide the input hint', table: { defaultValue: { - summary: 'false', - }, - }, + summary: 'false' + } + } }, step: { control: 'number', description: 'Set the incremental step (for number input only)', table: { defaultValue: { - summary: '1', - }, - }, + summary: '1' + } + } }, precision: { control: 'number', description: - 'Set the precision of the input value (for number input only)', + 'Set the precision of the input value (for number input only)' }, min: { control: 'number', - description: 'Set the min value of the input (for number input only)', + description: 'Set the min value of the input (for number input only)' }, max: { control: 'number', - description: 'Set the max value of the input (for number input only)', + description: 'Set the max value of the input (for number input only)' }, prepend: { - description: 'Prepend an icon or text to the input', + description: 'Prepend an icon or text to the input' }, append: { control: 'none', - description: 'Append an icon or text to the input', + description: 'Append an icon or text to the input' }, dataTest: { description: 'Set the data-test attribute on the input and error text elements `input-${dataTest}` `error-${dataTest}`', - control: 'text', - }, - }, -} as Meta + control: 'text' + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref('') - return { myValue, args } + const myValue = ref(''); + return { myValue, args }; }, - template: ``, -}) + template: '' +}); export const Default = { render: Template, @@ -128,7 +134,7 @@ export const Default = { precision: undefined, min: undefined, max: undefined, - disabled: false, + disabled: false }, parameters: { @@ -145,22 +151,22 @@ export const Default = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Disabled: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref('') - return { myValue } + const myValue = ref(''); + return { myValue }; }, - template: ``, + template: '' }), parameters: { @@ -177,22 +183,22 @@ export const Disabled: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Placeholder: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref('') - return { myValue } + const myValue = ref(''); + return { myValue }; }, - template: ``, + template: '' }), parameters: { @@ -209,22 +215,22 @@ export const Placeholder: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Password: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref('') - return { myValue } + const myValue = ref(''); + return { myValue }; }, - template: ``, + template: '' }), parameters: { @@ -241,22 +247,22 @@ export const Password: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Number: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref(0) - return { myValue } + const myValue = ref(0); + return { myValue }; }, - template: ``, + template: '' }), parameters: { @@ -289,22 +295,22 @@ export const Number: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const MinMax: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref(0) - return { myValue } + const myValue = ref(0); + return { myValue }; }, - template: ``, + template: '' }), parameters: { @@ -337,22 +343,22 @@ export const MinMax: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Step: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref(0) - return { myValue } + const myValue = ref(0); + return { myValue }; }, - template: ``, + template: '' }), parameters: { @@ -385,22 +391,22 @@ export const Step: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Success: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref('') - return { myValue } + const myValue = ref(''); + return { myValue }; }, - template: ``, + template: '' }), parameters: { @@ -417,26 +423,26 @@ export const Success: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Error: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref('') - return { myValue } + const myValue = ref(''); + return { myValue }; }, template: ` - `, + ` }), parameters: { @@ -466,26 +472,26 @@ export const Error: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Hint: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref('') - return { myValue } + const myValue = ref(''); + return { myValue }; }, template: ` - `, + ` }), parameters: { @@ -512,27 +518,27 @@ export const Hint: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const PrependAppend: StoryObj = { render: () => ({ components: { - PuikInput, + PuikInput }, setup() { - const myValue = ref('') - return { myValue } + const myValue = ref(''); + return { myValue }; }, template: ` - `, + ` }), parameters: { @@ -561,8 +567,8 @@ export const PrependAppend: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/input/style/css.ts b/packages/components/input/style/css.ts index 6b816753..8c2d44cf 100644 --- a/packages/components/input/style/css.ts +++ b/packages/components/input/style/css.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-input.css' -import '@puik/theme/puik-icon.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-input.css'; +import '@prestashopcorp/puik-theme/puik-icon.css'; diff --git a/packages/components/input/style/index.ts b/packages/components/input/style/index.ts index 19cdd678..af84c944 100644 --- a/packages/components/input/style/index.ts +++ b/packages/components/input/style/index.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style' -import '@puik/theme/src/input.scss' -import '@puik/theme/src/icon.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-input.scss'; +import '@prestashopcorp/puik-theme/src/puik-icon.scss'; diff --git a/packages/components/input/test/input.spec.ts b/packages/components/input/test/input.spec.ts index c827584b..33e4fd78 100644 --- a/packages/components/input/test/input.spec.ts +++ b/packages/components/input/test/input.spec.ts @@ -1,203 +1,200 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikInput from '../src/input.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikInput, InputProps } from '@prestashopcorp/puik-components'; describe('Input tests', () => { - let wrapper: VueWrapper - - const findField = () => wrapper.find('.puik-input__field') - const findInput = () => wrapper.find('.puik-input') - const findWrapper = () => wrapper.find('.puik-input__wrapper') - const findHint = () => wrapper.find('.puik-input__hint__text') - const findError = () => wrapper.find('.puik-input__hint__error') - const findErrorMessage = () => wrapper.find('.puik-input__hint__error__text') - const findIncrement = () => wrapper.find('.puik-input__controls__increment') - const findDecrement = () => wrapper.find('.puik-input__controls__decrement') - const findRevealPassword = () => wrapper.find('.puik-input__reveal-password') - const findPrepend = () => wrapper.find('.puik-input__prepend') - const findAppend = () => wrapper.find('.puik-input__append') + let wrapper: VueWrapper; + + const findField = () => wrapper.find('.puik-input__field'); + const findInput = () => wrapper.find('.puik-input'); + const findWrapper = () => wrapper.find('.puik-input__wrapper'); + const findHint = () => wrapper.find('.puik-input__hint__text'); + const findError = () => wrapper.find('.puik-input__hint__error'); + const findErrorMessage = () => wrapper.find('.puik-input__hint__error__text'); + const findIncrement = () => wrapper.find('.puik-input__controls__increment'); + const findDecrement = () => wrapper.find('.puik-input__controls__decrement'); + const findRevealPassword = () => wrapper.find('.puik-input__reveal-password'); + const findPrepend = () => wrapper.find('.puik-input__prepend'); + const findAppend = () => wrapper.find('.puik-input__append'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: InputProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikInput, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should render a text input by default', () => { - factory() - expect(findField().attributes('type')).toBe('text') - }) + factory(); + expect(findField().attributes('type')).toBe('text'); + }); it('should emit a value', async () => { - const text = 'This is a text' - factory() - await wrapper.setValue(text) - expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([text]) - }) + const text = 'This is a text'; + factory(); + await wrapper.setValue(text); + expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([text]); + }); it('should be disabled', () => { - factory({ disabled: true }) - expect(findField().attributes('disabled')).toBeDefined() - expect(findWrapper().classes()).toContain('puik-input__wrapper--disabled') - }) + factory({ disabled: true }); + expect(findField().attributes('disabled')).toBeDefined(); + expect(findWrapper().classes()).toContain('puik-input__wrapper--disabled'); + }); it('should add a focus class when input is focused', async () => { - factory() - await findField().trigger('focus') - expect(findWrapper().classes()).toContain('puik-input__wrapper--focus') - }) + factory(); + await findField().trigger('focus'); + expect(findWrapper().classes()).toContain('puik-input__wrapper--focus'); + }); it('should render an hint', () => { - const hint = 'This is an hint message' + const hint = 'This is an hint message'; factory( {}, { slots: { - hint, - }, + hint + } } - ) - expect(findHint().text()).toBe(hint) - }) + ); + expect(findHint().text()).toBe(hint); + }); it('should hide the hint when hideHint is true', async () => { - const hint = 'This is an hint message' + const hint = 'This is an hint message'; factory( {}, { slots: { - hint, - }, + hint + } } - ) - expect(findHint().text()).toBe(hint) - await wrapper.setProps({ hideHint: true }) - expect(findHint().isVisible()).toBeFalsy() - }) + ); + expect(findHint().text()).toBe(hint); + await wrapper.setProps({ hideHint: true }); + expect(findHint().isVisible()).toBeFalsy(); + }); it('should be on success state', () => { - factory({ success: true }) - expect(findWrapper().classes()).toContain('puik-input__wrapper--success') - }) + factory({ success: true }); + expect(findWrapper().classes()).toContain('puik-input__wrapper--success'); + }); it('should render an error', () => { - const error = 'This is an error message' - factory({ error }) - expect(findError().text()).toContain(error) - expect(findWrapper().classes()).toContain('puik-input__wrapper--error') - }) + const error = 'This is an error message'; + factory({ error }); + expect(findError().text()).toContain(error); + expect(findWrapper().classes()).toContain('puik-input__wrapper--error'); + }); it('should render an error and hide the hint', () => { - const hint = 'This is an hint message' - const error = 'This is an error message' + const hint = 'This is an hint message'; + const error = 'This is an error message'; factory( {}, { slots: { hint, - error, - }, + error + } } - ) - expect(findHint().exists()).toBeFalsy() - expect(findError().text()).toContain(error) - }) + ); + expect(findHint().exists()).toBeFalsy(); + expect(findError().text()).toContain(error); + }); it('should render a number input', () => { - factory({ type: 'number' }) - expect(findField().attributes('type')).toBe('number') - }) + factory({ type: 'number' }); + expect(findField().attributes('type')).toBe('number'); + }); it('should increment and decrement a number on click on the controls', async () => { - factory({ modelValue: 0, type: 'number' }) - await findIncrement().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([1]) - await findDecrement().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[1]).toStrictEqual([-1]) - }) + factory({ modelValue: 0, type: 'number' }); + await findIncrement().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([1]); + await findDecrement().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[1]).toStrictEqual([-1]); + }); it('should have a min and max', async () => { - factory({ modelValue: 1, type: 'number', max: 1, min: 0 }) - await findIncrement().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[0]).toBeFalsy() - await wrapper.setProps({ modelValue: 0 }) - await findDecrement().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[0]).toBeFalsy() - }) + factory({ modelValue: 1, type: 'number', max: 1, min: 0 }); + await findIncrement().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[0]).toBeFalsy(); + await wrapper.setProps({ modelValue: 0 }); + await findDecrement().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[0]).toBeFalsy(); + }); it('should increment following a defined step', async () => { - factory({ modelValue: 0, type: 'number', step: 2 }) - await findIncrement().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([2]) - await findDecrement().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[1]).toStrictEqual([-2]) - }) + factory({ modelValue: 0, type: 'number', step: 2 }); + await findIncrement().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([2]); + await findDecrement().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[1]).toStrictEqual([-2]); + }); it('should increment following a defined step and precision', async () => { - factory({ modelValue: 0, type: 'number', step: 0.01, precision: 2 }) - await findIncrement().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([0.01]) - await findDecrement().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[1]).toStrictEqual([-0.01]) - }) + factory({ modelValue: 0, type: 'number', step: 0.01, precision: 2 }); + await findIncrement().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([0.01]); + await findDecrement().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[1]).toStrictEqual([-0.01]); + }); it('should reveal the password on click of the reveal icon', async () => { - factory({ type: 'password' }) - await findRevealPassword().trigger('click') - expect(findField().attributes('type')).toBe('text') - await findRevealPassword().trigger('click') - expect(findField().attributes('type')).toBe('password') - }) + factory({ type: 'password' }); + await findRevealPassword().trigger('click'); + expect(findField().attributes('type')).toBe('text'); + await findRevealPassword().trigger('click'); + expect(findField().attributes('type')).toBe('password'); + }); it('should prepend content', () => { factory( {}, { slots: { - prepend: '$', - }, + prepend: '$' + } } - ) - expect(findPrepend().exists).toBeTruthy() - expect(findPrepend().text()).toBe('$') - }) + ); + expect(findPrepend().exists).toBeTruthy(); + expect(findPrepend().text()).toBe('$'); + }); it('should append content', () => { factory( {}, { slots: { - append: '$', - }, + append: '$' + } } - ) - expect(findAppend().exists).toBeTruthy() - expect(findAppend().text()).toBe('$') - }) + ); + expect(findAppend().exists).toBeTruthy(); + expect(findAppend().text()).toBe('$'); + }); it('should have a data-tes attribut for the container div, the input and the error message', () => { - const error = 'This is an error message' + const error = 'This is an error message'; factory( { modelValue: 'value', type: 'text', dataTest: 'test' }, { slots: { - error, - }, + error + } } - ) - expect(findInput().attributes('data-test')).toBe('test') - expect(findField().attributes('data-test')).toBe('input-test') - expect(findErrorMessage().attributes('data-test')).toBe('error-test') - }) -}) + ); + expect(findInput().attributes('data-test')).toBe('test'); + expect(findField().attributes('data-test')).toBe('input-test'); + expect(findErrorMessage().attributes('data-test')).toBe('error-test'); + }); +}); diff --git a/packages/components/label/index.ts b/packages/components/label/index.ts index 9f5f8adb..d9ef9d90 100644 --- a/packages/components/label/index.ts +++ b/packages/components/label/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Label from './src/label.vue'; -import Label from './src/label.vue' +export const PuikLabel = Label; +export default PuikLabel; -export const PuikLabel = withInstall(Label) -export default PuikLabel - -export * from './src/label' +export * from './src/label'; diff --git a/packages/components/label/src/label.ts b/packages/components/label/src/label.ts index 4e25ff2a..2be1ab6a 100644 --- a/packages/components/label/src/label.ts +++ b/packages/components/label/src/label.ts @@ -1,33 +1,11 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type Label from './label.vue' -export const labelProps = buildProps({ - dataTest: { - type: String, - required: false, - default: undefined, - }, - optional: { - type: Boolean, - required: false, - default: false, - }, - required: { - type: Boolean, - required: false, - default: false, - }, - readonly: { - type: Boolean, - required: false, - default: false, - }, - for: { - type: String, - required: true, - }, -} as const) +import type Label from './label.vue'; -export type LabelProps = ExtractPropTypes +export interface LabelProps { + for: string + optional?: boolean + required?: boolean + readonly?: boolean + dataTest?: string +} -export type LabelInstance = InstanceType +export type LabelInstance = InstanceType; diff --git a/packages/components/label/src/label.vue b/packages/components/label/src/label.vue index a89c0d56..e607fe87 100644 --- a/packages/components/label/src/label.vue +++ b/packages/components/label/src/label.vue @@ -1,23 +1,38 @@ + + diff --git a/packages/components/label/stories/label.stories.ts b/packages/components/label/stories/label.stories.ts index 46815d0c..6cc65bfa 100644 --- a/packages/components/label/stories/label.stories.ts +++ b/packages/components/label/stories/label.stories.ts @@ -1,5 +1,5 @@ -import PuikLabel from '../src/label.vue' -import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3' +import { PuikLabel } from '@prestashopcorp/puik-components'; +import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Label', @@ -10,51 +10,51 @@ export default { control: 'boolean', table: { type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, + defaultValue: { summary: false } + } }, required: { description: 'Set label in required mode', control: 'boolean', table: { type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, + defaultValue: { summary: false } + } }, readonly: { description: 'Set label in readonly mode', control: 'boolean', table: { type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, + defaultValue: { summary: false } + } }, for: { description: 'Id of the form related element', control: 'text', table: { - type: { summary: 'string' }, - }, + type: { summary: 'string' } + } }, default: { control: 'text', - description: 'Default slot to set label text', + description: 'Default slot to set label text' }, dataTest: { - description: 'Set the data-test attribute', - }, - }, -} as Meta + description: 'Set the data-test attribute' + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikLabel, + PuikLabel }, setup() { - return { args } + return { args }; }, - template: `{{ args.default }}`, -}) + template: '{{ args.default }}' +}); export const Default = { render: Template, @@ -65,7 +65,7 @@ export const Default = { readonly: false, for: 'input', default: 'My Label', - dataTest: '', + dataTest: '' }, parameters: { @@ -78,21 +78,21 @@ export const Default = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Optional: StoryObj = { render: (args: Args) => ({ components: { - PuikLabel, + PuikLabel }, setup() { - return { args } + return { args }; }, - template: `My Label`, + template: 'My Label' }), parameters: { @@ -108,21 +108,21 @@ export const Optional: StoryObj = { (Optional) `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Required: StoryObj = { render: (args: Args) => ({ components: { - PuikLabel, + PuikLabel }, setup() { - return { args } + return { args }; }, - template: `My Label`, + template: 'My Label' }), parameters: { @@ -138,21 +138,21 @@ export const Required: StoryObj = { * `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Readonly: StoryObj = { render: (args: Args) => ({ components: { - PuikLabel, + PuikLabel }, setup() { - return { args } + return { args }; }, - template: `My Label`, + template: 'My Label' }), parameters: { @@ -168,8 +168,8 @@ export const Readonly: StoryObj = { (Read only) `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/label/style/css.ts b/packages/components/label/style/css.ts index 3787b924..37e9292b 100644 --- a/packages/components/label/style/css.ts +++ b/packages/components/label/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-label.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-label.css'; diff --git a/packages/components/label/style/index.ts b/packages/components/label/style/index.ts index 6a465e00..7be364fc 100644 --- a/packages/components/label/style/index.ts +++ b/packages/components/label/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/label.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-label.scss'; diff --git a/packages/components/label/test/label.spec.ts b/packages/components/label/test/label.spec.ts index 2ee952dc..24cac705 100644 --- a/packages/components/label/test/label.spec.ts +++ b/packages/components/label/test/label.spec.ts @@ -1,84 +1,81 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import { faker } from '@faker-js/faker' -import PuikLabel from '../src/label.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { faker } from '@faker-js/faker'; +import { PuikLabel, LabelProps } from '@prestashopcorp/puik-components'; describe('Label tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; - const findLabel = () => wrapper.find('.puik-label') - const findLabelOptional = () => wrapper.find('.puik-label--optional') - const findLabelRequired = () => wrapper.find('.puik-label--required') - const findLabelReadonly = () => wrapper.find('.puik-label--readonly') + const findLabel = () => wrapper.find('.puik-label'); + const findLabelOptional = () => wrapper.find('.puik-label--optional'); + const findLabelRequired = () => wrapper.find('.puik-label--required'); + const findLabelReadonly = () => wrapper.find('.puik-label--readonly'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props: LabelProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikLabel, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory({ for: '' }); + expect(wrapper).toBeTruthy(); + }); it('should set the label', () => { - const label = faker.lorem.words(2) + const label = faker.lorem.words(2); factory( - {}, + { for: '' }, { slots: { - default: label, - }, + default: label + } } - ) - expect(findLabel().text()).toBe(label) - }) + ); + expect(findLabel().text()).toBe(label); + }); it('should set the label in optional mode', () => { factory( - { optional: true }, + { for: '', optional: true }, { slots: { - default: faker.lorem.words(2), - }, + default: faker.lorem.words(2) + } } - ) - expect(findLabelOptional().exists()).toBeTruthy() - }) + ); + expect(findLabelOptional().exists()).toBeTruthy(); + }); it('should set the label in required mode', () => { factory( - { required: true }, + { for: '', required: true }, { slots: { - default: faker.lorem.words(2), - }, + default: faker.lorem.words(2) + } } - ) - expect(findLabelRequired().exists()).toBeTruthy() - }) + ); + expect(findLabelRequired().exists()).toBeTruthy(); + }); it('should set the label in readonly mode', () => { factory( - { readonly: true }, + { for: '', readonly: true }, { slots: { - default: faker.lorem.words(2), - }, + default: faker.lorem.words(2) + } } - ) - expect(findLabelReadonly().exists()).toBeTruthy() - }) + ); + expect(findLabelReadonly().exists()).toBeTruthy(); + }); it('should have a data-test attribute', () => { - factory({ 'data-test': 'test' }) - expect(findLabel().attributes('data-test')).toBe('test') - }) -}) + factory({ for: '', dataTest: 'test' }); + expect(findLabel().attributes('data-test')).toBe('test'); + }); +}); diff --git a/packages/components/link/index.ts b/packages/components/link/index.ts index 77368177..2cd3e816 100644 --- a/packages/components/link/index.ts +++ b/packages/components/link/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Link from './src/link.vue'; -import Link from './src/link.vue' +export const PuikLink = Link; +export default PuikLink; -export const PuikLink = withInstall(Link) -export default PuikLink - -export * from './src/link' +export * from './src/link'; diff --git a/packages/components/link/src/link.ts b/packages/components/link/src/link.ts index 5bd2c74f..c4bfbc00 100644 --- a/packages/components/link/src/link.ts +++ b/packages/components/link/src/link.ts @@ -1,76 +1,28 @@ -import { buildProps } from '@puik/utils' -import type { RouteLocationRaw } from 'vue-router' -import type { ExtractPropTypes, PropType } from 'vue' -import type Link from './link.vue' +import type { RouteLocationRaw } from 'vue-router'; +import type Link from './link.vue'; -export enum PuikLinkTarget { - BLANK = '_blank', - SELF = '_self', - PARENT = '_parent', - TOP = '_top', +export enum PuikLinkTargetVariants { + Blank = '_blank', + Self = '_self', + Parent = '_parent', + Top = '_top', } -export const targetVariants = ['_blank', '_self', '_parent', '_top'] as const -export type PuikTargetString = (typeof targetVariants)[number] - -export enum PuikLinkSize { - SMALL = 'sm', - MEDIUM = 'md', - LARGE = 'lg', +export enum PuikLinkSizes { + Small = 'sm', + Medium = 'md', + Large = 'lg', } -export const linkSizes = ['sm', 'md', 'lg'] as const -export type PuikLinkSizeString = (typeof linkSizes)[number] - -export const linkProps = buildProps({ - size: { - type: [ - String as PropType, - String as PropType, - ], - required: false, - default: PuikLinkSize.MEDIUM, - }, - href: { - type: String, - required: false, - default: undefined, - }, - to: { - type: [Object, String] as PropType, - required: false, - default: undefined, - }, - target: { - type: [ - String as PropType, - String as PropType, - ], - required: false, - default: PuikLinkTarget.SELF, - }, - title: { - type: String, - required: false, - default: undefined, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, - highContrast: { - type: Boolean, - required: false, - default: false, - }, - articles: { - type: Boolean, - required: false, - default: false, - }, -} as const) - -export type LinkProps = ExtractPropTypes +export interface LinkProps { + size?: `${PuikLinkSizes}` + href?: string + to?: RouteLocationRaw + target?: `${PuikLinkTargetVariants}` + title?: string + highContrast?: boolean + articles?: boolean + dataTest?: string +} -export type LinkInstance = InstanceType +export type LinkInstance = InstanceType; diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue index fd7e762d..1c1a15b2 100644 --- a/packages/components/link/src/link.vue +++ b/packages/components/link/src/link.vue @@ -12,10 +12,10 @@ ]" :data-test="dataTest" > - + {{ TARGET_BLANK_ICON }} @@ -24,24 +24,32 @@ + + diff --git a/packages/components/link/stories/link.stories.ts b/packages/components/link/stories/link.stories.ts index 651324c0..ea3e35b6 100644 --- a/packages/components/link/stories/link.stories.ts +++ b/packages/components/link/stories/link.stories.ts @@ -1,9 +1,10 @@ -import PuikLink from './../src/link.vue' -import { linkSizes, targetVariants } from './../src/link' -import type { Meta, StoryFn, Args } from '@storybook/vue3' +import { PuikLink, PuikLinkSizes, PuikLinkTargetVariants } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args } from '@storybook/vue3'; -const targetVariantsSummary = targetVariants.join('|') -const linkSizesSummary = linkSizes.join('|') +const targetVariants = Object.values(PuikLinkTargetVariants); +const targetVariantsSummary = targetVariants.join('|'); +const linkSizes = Object.values(PuikLinkSizes); +const linkSizesSummary = linkSizes.join('|'); export default { title: 'Components/Link', @@ -11,12 +12,12 @@ export default { argTypes: { href: { control: 'text', - description: 'Set a link (changes link to "a" html tag)', + description: 'Set a link (changes link to "a" html tag)' }, to: { control: 'text', description: - 'Set a vue router link (changes link to "router-link" or html tag)', + 'Set a vue router link (changes link to "router-link" or html tag)' }, target: { control: 'select', @@ -25,12 +26,12 @@ export default { options: targetVariants, table: { defaultValue: { - summary: '_self', + summary: '_self' }, type: { - summary: targetVariantsSummary, - }, - }, + summary: targetVariantsSummary + } + } }, size: { control: 'select', @@ -38,42 +39,42 @@ export default { options: linkSizes, table: { defaultValue: { - summary: 'md', + summary: 'md' }, type: { - summary: linkSizesSummary, - }, - }, + summary: linkSizesSummary + } + } }, highContrast: { description: 'Sets the link in high contrast mode by changing the gray underline color', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, articles: { description: 'Sets the link in articles mode, adding the purple color for the visited stated', table: { defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, default: { control: 'text', - description: 'Label of the link', + description: 'Label of the link' }, title: { control: 'text', - description: 'Title displayed in tooltips then your cursor stay in link', + description: 'Title displayed in tooltips then your cursor stay in link' }, dataTest: { - description: 'Set the data-test attribute', - }, + description: 'Set the data-test attribute' + } }, args: { href: '#', @@ -84,19 +85,19 @@ export default { default: "I'm a cool link", title: "I'm a tooltip for your link", size: 'md', - dataTest: '', - }, -} as Meta + dataTest: '' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikLink, + PuikLink }, setup() { - return { args } + return { args }; }, - template: `{{ args.default }}`, -}) + template: '{{ args.default }}' +}); export const Default = { render: Template, @@ -125,17 +126,17 @@ export const Default = { I'm a cool link `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Blank = { render: Template, args: { - target: '_blank', + target: '_blank' }, parameters: { @@ -152,8 +153,8 @@ export const Blank = { I'm a cool link `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/link/style/css.ts b/packages/components/link/style/css.ts index c4448e47..9ae43a3a 100644 --- a/packages/components/link/style/css.ts +++ b/packages/components/link/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-link.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-link.css'; diff --git a/packages/components/link/style/index.ts b/packages/components/link/style/index.ts index 57fa4655..cb387808 100644 --- a/packages/components/link/style/index.ts +++ b/packages/components/link/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/link.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-link.scss'; diff --git a/packages/components/link/test/link.spec.ts b/packages/components/link/test/link.spec.ts index b3cab39b..6b341026 100644 --- a/packages/components/link/test/link.spec.ts +++ b/packages/components/link/test/link.spec.ts @@ -1,54 +1,51 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikLink from '../src/link.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikLink, LinkProps } from '@prestashopcorp/puik-components'; describe('Link tests', () => { - let wrapper: VueWrapper - const findLink = () => wrapper.find('.puik-link') + let wrapper: VueWrapper; + const findLink = () => wrapper.find('.puik-link'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: LinkProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikLink, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should be a router-link if to prop is defined', () => { - factory({ to: '/test' }) - expect(findLink().element.tagName).toBe('ROUTER-LINK') - }) + factory({ to: '/test' }); + expect(findLink().element.tagName).toBe('ROUTER-LINK'); + }); it('should be a link if href prop is defined', () => { - factory({ href: '/test' }) - expect(findLink().element.tagName).toBe('A') - }) + factory({ href: '/test' }); + expect(findLink().element.tagName).toBe('A'); + }); it('should have size class', () => { - factory({ href: '/test', size: 'sm' }) - expect(findLink().classes()).toContain('puik-link--sm') - }) + factory({ href: '/test', size: 'sm' }); + expect(findLink().classes()).toContain('puik-link--sm'); + }); it('should have a data-test attribute', () => { - factory({ href: '/test', 'data-test': 'test' }) - expect(findLink().attributes('data-test')).toBe('test') - }) + factory({ href: '/test', dataTest: 'test' }); + expect(findLink().attributes('data-test')).toBe('test'); + }); it('should set the link in high-contrast mode', () => { - factory({ highContrast: true }) - expect(findLink().classes()).toContain('puik-link--high-contrast') - }) + factory({ highContrast: true }); + expect(findLink().classes()).toContain('puik-link--high-contrast'); + }); it('should set the link in articles mode', () => { - factory({ articles: true }) - expect(findLink().classes()).toContain('puik-link--articles') - }) -}) + factory({ articles: true }); + expect(findLink().classes()).toContain('puik-link--articles'); + }); +}); diff --git a/packages/components/menu-item-separator/style/css.ts b/packages/components/menu-item-separator/style/css.ts index a90afc23..f8a7f191 100644 --- a/packages/components/menu-item-separator/style/css.ts +++ b/packages/components/menu-item-separator/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-menu-item-separator.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-menu-item-separator.css'; diff --git a/packages/components/menu-item-separator/style/index.ts b/packages/components/menu-item-separator/style/index.ts index d8658dcc..6ee6476f 100644 --- a/packages/components/menu-item-separator/style/index.ts +++ b/packages/components/menu-item-separator/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/menu-item-separator.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-menu-item-separator.scss'; diff --git a/packages/components/menu-item-title/style/css.ts b/packages/components/menu-item-title/style/css.ts index 9d4b727d..ba0d2860 100644 --- a/packages/components/menu-item-title/style/css.ts +++ b/packages/components/menu-item-title/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-menu-item-title.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-menu-item-title.css'; diff --git a/packages/components/menu-item-title/style/index.ts b/packages/components/menu-item-title/style/index.ts index aba0a9ba..1231d4d4 100644 --- a/packages/components/menu-item-title/style/index.ts +++ b/packages/components/menu-item-title/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/menu-item-title.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-menu-item-title.scss'; diff --git a/packages/components/menu-item/style/css.ts b/packages/components/menu-item/style/css.ts index 2d6f329d..02b70f6c 100644 --- a/packages/components/menu-item/style/css.ts +++ b/packages/components/menu-item/style/css.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-menu-item.css' -import '@puik/theme/puik-button.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-menu-item.css'; +import '@prestashopcorp/puik-theme/puik-button.css'; diff --git a/packages/components/menu-item/style/index.ts b/packages/components/menu-item/style/index.ts index 6685556e..c16f3697 100644 --- a/packages/components/menu-item/style/index.ts +++ b/packages/components/menu-item/style/index.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style' -import '@puik/theme/src/menu-item.scss' -import '@puik/theme/src/button.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-menu-item.scss'; +import '@prestashopcorp/puik-theme/src/puik-button.scss'; diff --git a/packages/components/menu/index.ts b/packages/components/menu/index.ts index 66badc6e..bd75416f 100644 --- a/packages/components/menu/index.ts +++ b/packages/components/menu/index.ts @@ -1,16 +1,14 @@ -import { withInstall } from '@puik/utils' +import Menu from './src/menu.vue'; +import MenuItem from './src/menu-item.vue'; +import MenuItemSeparator from './src/menu-item-separator.vue'; +import MenuItemTitle from './src/menu-item-title.vue'; -import Menu from './src/menu.vue' -import MenuItem from './src/menu-item.vue' -import MenuItemSeparator from './src/menu-item-separator.vue' -import MenuItemTitle from './src/menu-item-title.vue' +export const PuikMenu = Menu; +export const PuikMenuItem = MenuItem; +export const PuikMenuItemSeparator = MenuItemSeparator; +export const PuikMenuItemTitle = MenuItemTitle; +export default PuikMenu; -export const PuikMenu = withInstall(Menu) -export const PuikMenuItem = withInstall(MenuItem) -export const PuikMenuItemSeparator = withInstall(MenuItemSeparator) -export const PuikMenuItemTitle = withInstall(MenuItemTitle) -export default PuikMenu - -export * from './src/menu' -export * from './src/menu-item' -export * from './src/menu-item-separator' +export * from './src/menu'; +export * from './src/menu-item'; +export * from './src/menu-item-separator'; diff --git a/packages/components/menu/src/menu-item-separator.ts b/packages/components/menu/src/menu-item-separator.ts index a8c0659f..5fac4fb7 100644 --- a/packages/components/menu/src/menu-item-separator.ts +++ b/packages/components/menu/src/menu-item-separator.ts @@ -1,11 +1,3 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type MenuItemSeparator from './menu-item-separator.vue' +import type MenuItemSeparator from './menu-item-separator.vue'; -export const menuItemSeparatorProps = buildProps({} as const) - -export type MenuItemSeparatorProps = ExtractPropTypes< - typeof menuItemSeparatorProps -> - -export type MenuItemSeparatorInstance = InstanceType +export type MenuItemSeparatorInstance = InstanceType; diff --git a/packages/components/menu/src/menu-item-separator.vue b/packages/components/menu/src/menu-item-separator.vue index 2b8c1ffc..ea9fb6b4 100644 --- a/packages/components/menu/src/menu-item-separator.vue +++ b/packages/components/menu/src/menu-item-separator.vue @@ -1,9 +1,14 @@ + + diff --git a/packages/components/menu/src/menu-item-title.ts b/packages/components/menu/src/menu-item-title.ts index 139d95d4..56c41c0c 100644 --- a/packages/components/menu/src/menu-item-title.ts +++ b/packages/components/menu/src/menu-item-title.ts @@ -1,15 +1,7 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type MenuItemTitle from './menu-item-title.vue' +import type MenuItemTitle from './menu-item-title.vue'; -export const menuItemTitleProps = buildProps({ - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface MenuItemTitleProps { + dataTest?: string +} -export type MenuItemTitleProps = ExtractPropTypes - -export type MenuItemTitleInstance = InstanceType +export type MenuItemTitleInstance = InstanceType; diff --git a/packages/components/menu/src/menu-item-title.vue b/packages/components/menu/src/menu-item-title.vue index 8f44715f..a8daf1dc 100644 --- a/packages/components/menu/src/menu-item-title.vue +++ b/packages/components/menu/src/menu-item-title.vue @@ -3,15 +3,21 @@ class="puik-menu-item-title" :data-test="dataTest != undefined ? `title-${dataTest}` : undefined" > - + + + diff --git a/packages/components/menu/src/menu-item.ts b/packages/components/menu/src/menu-item.ts index 9db93bce..09ae9e39 100644 --- a/packages/components/menu/src/menu-item.ts +++ b/packages/components/menu/src/menu-item.ts @@ -1,9 +1,3 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type MenuItem from './menu-item.vue' +import type MenuItem from './menu-item.vue'; -export const menuItemProps = buildProps({} as const) - -export type MenuItemProps = ExtractPropTypes - -export type MenuItemInstance = InstanceType +export type MenuItemInstance = InstanceType; diff --git a/packages/components/menu/src/menu-item.vue b/packages/components/menu/src/menu-item.vue index 1584610b..dc56a137 100644 --- a/packages/components/menu/src/menu-item.vue +++ b/packages/components/menu/src/menu-item.vue @@ -1,13 +1,16 @@ + + diff --git a/packages/components/menu/src/menu.ts b/packages/components/menu/src/menu.ts index c9a33424..89b4ab5d 100644 --- a/packages/components/menu/src/menu.ts +++ b/packages/components/menu/src/menu.ts @@ -1,60 +1,20 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Menu from './menu.vue' +import type Menu from './menu.vue'; -/** - * @deprecated Replace with string value - */ -export enum MenuAlignEnum { - LEFT = 'left', - RIGHT = 'right', +export enum PuikMenuAligns { + Left = 'left', + Right = 'right', } -/** - * @deprecated Use `menuAligns` instead - */ -export const menuAlignValues = Object.values(MenuAlignEnum) as string[] -/** - * @deprecated Replace with string value - */ -export enum MenuPositionEnum { - TOP = 'top', - BOTTOM = 'bottom', +export enum PuikMenuPositions { + Top = 'top', + Bottom = 'bottom', } -/** - * @deprecated Use `menuPositions` instead - */ -export const menuPositionValues = Object.values(MenuPositionEnum) as string[] -export const menuAligns = ['left', 'right'] as const -export type PuikMenuAlign = (typeof menuAligns)[number] - -export const menuPositions = ['top', 'bottom'] as const -export type PuikMenuPosition = (typeof menuPositions)[number] - -export const menuProps = buildProps({ - maxHeight: { - type: String, - required: false, - default: 'none', - }, - width: { - type: String, - required: false, - default: '200px', - }, - align: { - type: String as PropType, - required: false, - default: 'left', - }, - position: { - type: String as PropType, - required: false, - default: 'bottom', - }, -} as const) - -export type MenuProps = ExtractPropTypes +export interface MenuProps { + maxHeight?: string + width?: string + align?: `${PuikMenuAligns}` + position?: `${PuikMenuPositions}` +} -export type MenuInstance = InstanceType +export type MenuInstance = InstanceType; diff --git a/packages/components/menu/src/menu.vue b/packages/components/menu/src/menu.vue index f011b69a..11c2f4f3 100644 --- a/packages/components/menu/src/menu.vue +++ b/packages/components/menu/src/menu.vue @@ -5,8 +5,14 @@ :class="[`puik-menu--position-${position}`, `puik-menu--align-${align}`]" as="div" > - - + + - + + + diff --git a/packages/components/menu/stories/menu-item-title.stories.ts b/packages/components/menu/stories/menu-item-title.stories.ts index c519c2f6..5a3c0b88 100644 --- a/packages/components/menu/stories/menu-item-title.stories.ts +++ b/packages/components/menu/stories/menu-item-title.stories.ts @@ -1,5 +1,5 @@ -import PuikMenuItemTitle from '../src/menu-item-title.vue' -import type { Meta, StoryFn, Args } from '@storybook/vue3' +import PuikMenuItemTitle from '../src/menu-item-title.vue'; +import type { Meta, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Menu/MenuItemTitle', @@ -7,30 +7,30 @@ export default { argTypes: { default: { control: 'text', - description: 'Default slot to set title text', + description: 'Default slot to set title text' }, dataTest: { description: 'Set the data-test attribute for title `title-${dataTest}`', - control: 'text', - }, - }, -} as Meta + control: 'text' + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikMenuItemTitle, + PuikMenuItemTitle }, setup() { - return { args } + return { args }; }, - template: `{{ args.default }}`, -}) + template: '{{ args.default }}' +}); export const Default = { render: Template, args: { default: 'Menu Item Title', - titleDataTest: '', + titleDataTest: '' }, parameters: { @@ -41,8 +41,8 @@ export const Default = { Menu Item Title `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/menu/stories/menu.stories.ts b/packages/components/menu/stories/menu.stories.ts index 283dac5b..8cc510be 100644 --- a/packages/components/menu/stories/menu.stories.ts +++ b/packages/components/menu/stories/menu.stories.ts @@ -1,14 +1,10 @@ -import { menuAligns, menuPositions } from '../src/menu' -import PuikMenu from '../src/menu.vue' -import PuikMenuItem from '../src/menu-item.vue' -import PuikMenuItemSeparator from '../src/menu-item-separator.vue' -import PuikMenuItemTitle from '../src/menu-item-title.vue' -import PuikButton from '../../button/src/button.vue' -import PuikLink from '../../link/src/link.vue' -import type { Meta, Args, StoryFn } from '@storybook/vue3' +import { PuikMenu, PuikMenuItem, PuikMenuItemSeparator, PuikMenuItemTitle, PuikMenuAligns, PuikMenuPositions, PuikButton, PuikLink } from '@prestashopcorp/puik-components'; +import type { Meta, Args, StoryFn } from '@storybook/vue3'; -const menuAlignsJoined = menuAligns.join('|') -const menuPositionsJoined = menuPositions.join('|') +const menuAligns = Object.values(PuikMenuAligns); +const menuAlignsJoined = menuAligns.join('|'); +const menuPositions = Object.values(PuikMenuPositions); +const menuPositionsJoined = menuPositions.join('|'); export default { title: 'Components/Menu/Menu', @@ -20,12 +16,12 @@ export default { options: menuPositions, table: { defaultValue: { - summary: 'bottom', + summary: 'bottom' }, type: { - summary: menuPositionsJoined, - }, - }, + summary: menuPositionsJoined + } + } }, align: { description: 'Menu alignment', @@ -33,30 +29,30 @@ export default { options: menuAligns, table: { defaultValue: { - summary: 'left', + summary: 'left' }, type: { - summary: menuAlignsJoined, - }, - }, + summary: menuAlignsJoined + } + } }, maxHeight: { control: 'text', description: 'Menu max height', table: { defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, width: { control: 'text', description: 'Menu width', table: { defaultValue: { - summary: '200px', - }, - }, + summary: '200px' + } + } }, trigger: { control: 'none', @@ -68,9 +64,9 @@ export default { { open: boolean } - `, - }, - }, + ` + } + } }, default: { control: 'none', @@ -83,23 +79,23 @@ export default { open: boolean, close: () => void } - `, - }, - }, - }, + ` + } + } + } }, args: { - width: '200px', + width: '200px' }, parameters: { docs: { story: { inline: false, - iframeHeight: 500, - }, - }, - }, -} as Meta + iframeHeight: 500 + } + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ args: {}, @@ -109,10 +105,10 @@ const Template: StoryFn = (args: Args) => ({ PuikMenu, PuikMenuItem, PuikMenuItemSeparator, - PuikMenuItemTitle, + PuikMenuItemTitle }, setup() { - return { args } + return { args }; }, template: ` @@ -171,8 +167,8 @@ const Template: StoryFn = (args: Args) => ({ - `, -}) + ` +}); export const Default = { render: Template, @@ -180,7 +176,7 @@ export const Default = { args: { maxHeight: 'none', position: 'bottom', - align: 'left', + align: 'left' }, parameters: { @@ -282,8 +278,8 @@ export const Default = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/menu/style/css.ts b/packages/components/menu/style/css.ts index aa294e39..82ddad94 100644 --- a/packages/components/menu/style/css.ts +++ b/packages/components/menu/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-menu.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-menu.css'; diff --git a/packages/components/menu/style/index.ts b/packages/components/menu/style/index.ts index 60157709..91ecc9de 100644 --- a/packages/components/menu/style/index.ts +++ b/packages/components/menu/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/menu.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-menu.scss'; diff --git a/packages/components/menu/test/menu-item-separator.spec.ts b/packages/components/menu/test/menu-item-separator.spec.ts index 3b7c4125..30e966f6 100644 --- a/packages/components/menu/test/menu-item-separator.spec.ts +++ b/packages/components/menu/test/menu-item-separator.spec.ts @@ -1,11 +1,11 @@ -import { describe, it, expect } from 'vitest' -import { factoryMenu, showMenu } from './menu.spec' -import type { VueWrapper } from '@vue/test-utils' +import { describe, it, expect } from 'vitest'; +import { factoryMenu, showMenu } from './menu.spec'; +import type { VueWrapper } from '@vue/test-utils'; describe('Menu item separator tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; - const getMenuSeparator = () => wrapper.find('.puik-menu-item-separator') + const getMenuSeparator = () => wrapper.find('.puik-menu-item-separator'); const template = ` @@ -21,14 +21,14 @@ describe('Menu item separator tests', () => { Third link - ` + `; it('should be a vue instance', () => { - wrapper = factoryMenu(template) - expect(wrapper).toBeTruthy() - }) + wrapper = factoryMenu(template); + expect(wrapper).toBeTruthy(); + }); it('should have separator', async () => { - wrapper = factoryMenu(template) - await showMenu(wrapper) - expect(getMenuSeparator().exists()).toBeTruthy() - }) -}) + wrapper = factoryMenu(template); + await showMenu(wrapper); + expect(getMenuSeparator().exists()).toBeTruthy(); + }); +}); diff --git a/packages/components/menu/test/menu-item-title.spec.ts b/packages/components/menu/test/menu-item-title.spec.ts index d52cc942..9bba11ea 100644 --- a/packages/components/menu/test/menu-item-title.spec.ts +++ b/packages/components/menu/test/menu-item-title.spec.ts @@ -1,7 +1,7 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikMenuItemTitle from './../src/menu-item-title.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import PuikMenuItemTitle from './../src/menu-item-title.vue'; +import type { MountingOptions, VueWrapper } from '@vue/test-utils'; export function factoryMenu( template: string, @@ -9,26 +9,26 @@ export function factoryMenu( ) { return mount({ components: { - PuikMenuItemTitle, + PuikMenuItemTitle }, template, - ...options, - }) + ...options + }); } -export const getTitle = (wrapper) => wrapper.find('.puik-menu-item-title') +export const getTitle = (wrapper) => wrapper.find('.puik-menu-item-title'); describe('Menu title tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; it('should be a vue instance and have a data-test attribut', () => { wrapper = factoryMenu(` Title - `) - expect(wrapper).toBeTruthy() - expect(getTitle(wrapper).text()).toBe('Title') - expect(wrapper.attributes('data-test')).toBe('title-test') - }) -}) + `); + expect(wrapper).toBeTruthy(); + expect(getTitle(wrapper).text()).toBe('Title'); + expect(wrapper.attributes('data-test')).toBe('title-test'); + }); +}); diff --git a/packages/components/menu/test/menu-item.spec.ts b/packages/components/menu/test/menu-item.spec.ts index 71642625..f9ab5219 100644 --- a/packages/components/menu/test/menu-item.spec.ts +++ b/packages/components/menu/test/menu-item.spec.ts @@ -1,9 +1,9 @@ -import { describe, it, expect } from 'vitest' -import { factoryMenu } from './menu.spec' -import type { VueWrapper } from '@vue/test-utils' +import { describe, it, expect } from 'vitest'; +import { factoryMenu } from './menu.spec'; +import type { VueWrapper } from '@vue/test-utils'; describe('Menu item group tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; const template = ` diff --git a/packages/components/pagination/src/pagination-loader.ts b/packages/components/pagination/src/pagination-loader.ts index b5f621a7..da25804a 100644 --- a/packages/components/pagination/src/pagination-loader.ts +++ b/packages/components/pagination/src/pagination-loader.ts @@ -1,34 +1,11 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type PaginationLoader from './pagination-loader.vue' +import type PaginationLoader from './pagination-loader.vue'; -export const paginationLoaderProps = buildProps({ - modelValue: { - type: Number, - required: false, - default: 1, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - label: { - type: String, - required: true, - }, - loaderButtonLabel: { - type: String, - required: false, - default: undefined, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface PaginationLoaderProps { + modelValue?: number + disabled?: boolean + label?: string + loaderButtonLabel?: string + dataTest?: string +} -export type PaginationProps = ExtractPropTypes - -export type PaginationInstance = InstanceType +export type PaginationInstance = InstanceType; diff --git a/packages/components/pagination/src/pagination-loader.vue b/packages/components/pagination/src/pagination-loader.vue index 24d618f3..f296cd8c 100644 --- a/packages/components/pagination/src/pagination-loader.vue +++ b/packages/components/pagination/src/pagination-loader.vue @@ -18,22 +18,25 @@ diff --git a/packages/components/pagination/src/pagination-medium.ts b/packages/components/pagination/src/pagination-medium.ts index e711f31b..7d71accc 100644 --- a/packages/components/pagination/src/pagination-medium.ts +++ b/packages/components/pagination/src/pagination-medium.ts @@ -1,43 +1,13 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type PaginationMedium from './pagination-medium.vue' +import type PaginationMedium from './pagination-medium.vue'; -export const paginationMediumProps = buildProps({ - modelValue: { - type: Number, - required: false, - default: 1, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - totalItem: { - type: Number, - required: true, - }, - maxPage: { - type: Number, - required: true, - }, - itemCount: { - type: Number, - required: false, - default: 0, - }, - label: { - type: String, - required: false, - default: undefined, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface PaginationMediumProps { + modelValue?: number + disabled?: boolean + totalItem: number + maxPage: number + itemCount?: number + label?: string + dataTest?: string +} -export type PaginationProps = ExtractPropTypes - -export type PaginationInstance = InstanceType +export type PaginationInstance = InstanceType; diff --git a/packages/components/pagination/src/pagination-medium.vue b/packages/components/pagination/src/pagination-medium.vue index 01573dd5..c6226bb8 100644 --- a/packages/components/pagination/src/pagination-medium.vue +++ b/packages/components/pagination/src/pagination-medium.vue @@ -17,9 +17,12 @@ dataTest != undefined ? `previousButton-${dataTest}` : undefined " @click="page -= 1" - > + /> -
    +
    • -
    • +
    • + /> diff --git a/packages/components/pagination/src/pagination-mobile.ts b/packages/components/pagination/src/pagination-mobile.ts index 09041a14..6fff36fc 100644 --- a/packages/components/pagination/src/pagination-mobile.ts +++ b/packages/components/pagination/src/pagination-mobile.ts @@ -1,34 +1,11 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type PaginationMobile from './pagination-mobile.vue' +import type PaginationMobile from './pagination-mobile.vue'; -export const paginationMobileProps = buildProps({ - modelValue: { - type: Number, - required: false, - default: 1, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - maxPage: { - type: Number, - required: true, - }, - label: { - type: String, - required: false, - default: undefined, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface PaginationMobileProps { + modelValue?: number + disabled?: boolean + maxPage: number + label?: string + dataTest?: string +} -export type PaginationProps = ExtractPropTypes - -export type PaginationInstance = InstanceType +export type PaginationInstance = InstanceType; diff --git a/packages/components/pagination/src/pagination-mobile.vue b/packages/components/pagination/src/pagination-mobile.vue index 677b36e4..9b34a90e 100644 --- a/packages/components/pagination/src/pagination-mobile.vue +++ b/packages/components/pagination/src/pagination-mobile.vue @@ -9,7 +9,7 @@ dataTest != undefined ? `previousButton-${dataTest}` : undefined " @click="emit('update:modelValue', modelValue - 1)" - > + /> + /> diff --git a/packages/components/pagination/src/pagination-small.ts b/packages/components/pagination/src/pagination-small.ts index 7deaf8a8..3dda36b4 100644 --- a/packages/components/pagination/src/pagination-small.ts +++ b/packages/components/pagination/src/pagination-small.ts @@ -1,34 +1,11 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type PaginationSmall from './pagination-small.vue' +import type PaginationSmall from './pagination-small.vue'; -export const paginationSmallProps = buildProps({ - modelValue: { - type: Number, - required: false, - default: 1, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - maxPage: { - type: Number, - required: true, - }, - label: { - type: String, - required: false, - default: undefined, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface PaginationSmallProps { + modelValue?: number + disabled?: boolean + maxPage: number + label?: string + dataTest?: string +} -export type PaginationProps = ExtractPropTypes - -export type PaginationInstance = InstanceType +export type PaginationInstance = InstanceType; diff --git a/packages/components/pagination/src/pagination-small.vue b/packages/components/pagination/src/pagination-small.vue index 09ae9cfb..26d8c43a 100644 --- a/packages/components/pagination/src/pagination-small.vue +++ b/packages/components/pagination/src/pagination-small.vue @@ -16,7 +16,7 @@ left-icon="keyboard_arrow_left" variant="secondary" @click="page -= 1" - > + /> + /> diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts index 528b57ef..de342245 100644 --- a/packages/components/pagination/src/pagination.ts +++ b/packages/components/pagination/src/pagination.ts @@ -1,73 +1,24 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Pagination from './pagination.vue' +import type Pagination from './pagination.vue'; -export enum PuikPaginationVariantEnum { - loader = 'loader', - mobile = 'mobile', - small = 'small', - medium = 'medium', - large = 'large', +export enum PuikPaginationVariants { + Loader = 'loader', + Mobile = 'mobile', + Small = 'small', + Medium = 'medium', + Large = 'large', } -export const puikPaginationVariants = Object.values( - PuikPaginationVariantEnum -) as string[] - -export const puikPaginationItemsPerPageOptions = [5, 10, 15] - -export const paginationProps = buildProps({ - variant: { - type: String, - required: false, - values: puikPaginationVariants, - default: PuikPaginationVariantEnum.medium, - }, - totalItem: { - type: Number, - required: true, - }, - itemsPerPage: { - type: Number, - required: false, - default: puikPaginationItemsPerPageOptions[0], - }, - itemsPerPageOptions: { - type: Array as PropType, - required: false, - default: () => puikPaginationItemsPerPageOptions, - }, - page: { - type: Number, - required: true, - }, - itemCount: { - type: Number, - required: false, - default: 0, - }, - label: { - type: String, - required: false, - default: undefined, - }, - loaderButtonLabel: { - type: String, - required: false, - default: undefined, - }, - loaderButtonDisabled: { - type: Boolean, - required: false, - default: false, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) - -export type PaginationProps = ExtractPropTypes +export interface PaginationProps { + variant?: `${PuikPaginationVariants}` + totalItem: number + itemsPerPage?: number + itemsPerPageOptions?: number[] + page: number + itemCount?: number + label?: string + loaderButtonLabel?: string + loaderButtonDisabled?: boolean + dataTest?: string +} -export type PaginationInstance = InstanceType +export type PaginationInstance = InstanceType; diff --git a/packages/components/pagination/src/pagination.vue b/packages/components/pagination/src/pagination.vue index fd8a97ca..fbd79901 100644 --- a/packages/components/pagination/src/pagination.vue +++ b/packages/components/pagination/src/pagination.vue @@ -7,7 +7,7 @@ :data-test="dataTest" > -
      +
      + + diff --git a/packages/components/pagination/stories/pagination.stories.ts b/packages/components/pagination/stories/pagination.stories.ts index 3cc34016..a1b25510 100644 --- a/packages/components/pagination/stories/pagination.stories.ts +++ b/packages/components/pagination/stories/pagination.stories.ts @@ -1,13 +1,9 @@ -import { ref } from 'vue' -import { - PuikPaginationVariantEnum, - puikPaginationItemsPerPageOptions, - puikPaginationVariants, -} from '../src/pagination' -import PuikPagination from './../src/pagination.vue' -import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3' +import { ref } from 'vue'; +import { PuikPagination, PuikPaginationVariants } from '@prestashopcorp/puik-components'; +import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; -const paginationVariantsSummary = puikPaginationVariants.join('|') +const paginationVariants = Object.values(PuikPaginationVariants); +const paginationVariantsSummary = paginationVariants.join('|'); export default { title: 'Components/Pagination', @@ -15,123 +11,123 @@ export default { argTypes: { variant: { control: 'select', - options: puikPaginationVariants, + options: paginationVariants, description: 'Set the pagination variant', table: { defaultValue: { - summary: PuikPaginationVariantEnum.medium, + summary: PuikPaginationVariants.Medium }, type: { - summary: paginationVariantsSummary, - }, - }, + summary: paginationVariantsSummary + } + } }, totalItem: { control: 'number', description: 'Set the total item count', table: { type: { - summary: 'number', - }, - }, + summary: 'number' + } + } }, itemsPerPage: { control: 'none', table: { type: { - summary: 'number', + summary: 'number' }, - defaultValue: { summary: 5 }, + defaultValue: { summary: 5 } }, - description: 'v-model of the items per page', + description: 'v-model of the items per page' }, itemsPerPageOptions: { control: 'none', description: 'Set the items per page options', table: { type: { - summary: 'number[]', + summary: 'number[]' }, defaultValue: { - summary: puikPaginationItemsPerPageOptions, - }, - }, + summary: [5, 10, 15] + } + } }, page: { control: 'numbnoneer', description: 'v-model of the current page', table: { type: { - summary: 'number', - }, - }, + summary: 'number' + } + } }, itemCount: { control: 'number', description: 'Set the current item count', table: { type: { - summary: 'number', + summary: 'number' }, defaultValue: { - summary: '0', - }, - }, + summary: '0' + } + } }, label: { control: 'text', description: 'Set the label', table: { defaultValue: { - summary: 'undefined', + summary: 'undefined' }, type: { - summary: 'string', - }, - }, + summary: 'string' + } + } }, loaderButtonLabel: { control: 'text', description: 'Set the text used in button on loader variant', table: { defaultValue: { - summary: 'undefined', + summary: 'undefined' }, type: { - summary: 'string', - }, - }, + summary: 'string' + } + } }, dataTest: { control: 'text', description: - 'Set the data-test attribute `nextButton-${dataTest}` `previousButton-${dataTest}` `label-${dataTest}` `loadMoreButton-${dataTest}` (only for loader variant)', - }, + 'Set the data-test attribute `nextButton-${dataTest}` `previousButton-${dataTest}` `label-${dataTest}` `loadMoreButton-${dataTest}` (only for loader variant)' + } }, args: { - variant: PuikPaginationVariantEnum.medium, + variant: PuikPaginationVariants.Medium, totalItem: 500, itemCount: 25, label: '', - loaderButtonLabel: undefined, - }, -} as Meta + loaderButtonLabel: undefined + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikPagination, + PuikPagination }, setup() { - const page = ref(1) - const itemsPerPage = ref(5) - return { args, page, itemsPerPage } + const page = ref(1); + const itemsPerPage = ref(5); + return { args, page, itemsPerPage }; }, template: ``, -}) + >` +}); export const Default = { render: Template, @@ -212,17 +208,17 @@ export const Default = {
      `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Small: StoryObj = { render: Template, args: { - variant: 'small', + variant: 'small' }, parameters: { @@ -258,17 +254,17 @@ export const Small: StoryObj = {
      `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Medium: StoryObj = { render: Template, args: { - variant: 'medium', + variant: 'medium' }, parameters: { @@ -347,17 +343,17 @@ export const Medium: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Large: StoryObj = { render: Template, args: { - variant: 'large', + variant: 'large' }, parameters: { @@ -455,17 +451,17 @@ export const Large: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Mobile: StoryObj = { render: Template, args: { - variant: 'mobile', + variant: 'mobile' }, parameters: { @@ -494,17 +490,17 @@ export const Mobile: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Loader: StoryObj = { render: Template, args: { - variant: 'loader', + variant: 'loader' }, parameters: { @@ -528,8 +524,8 @@ export const Loader: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/pagination/style/css.ts b/packages/components/pagination/style/css.ts index 14c5c420..1c4286ff 100644 --- a/packages/components/pagination/style/css.ts +++ b/packages/components/pagination/style/css.ts @@ -1,4 +1,4 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-pagination.css' -import '@puik/theme/puik-button.css' -import '@puik/theme/puik-select.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-pagination.css'; +import '@prestashopcorp/puik-theme/puik-button.css'; +import '@prestashopcorp/puik-theme/puik-select.css'; diff --git a/packages/components/pagination/style/index.ts b/packages/components/pagination/style/index.ts index 447dbcd8..9789a98a 100644 --- a/packages/components/pagination/style/index.ts +++ b/packages/components/pagination/style/index.ts @@ -1,4 +1,4 @@ -import '@puik/components/base/style' -import '@puik/theme/src/pagination.scss' -import '@puik/theme/src/puik-button.scss' -import '@puik/theme/src/puik-select.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-pagination.scss'; +import '@prestashopcorp/puik-theme/src/puik-puik-button.scss'; +import '@prestashopcorp/puik-theme/src/puik-puik-select.scss'; diff --git a/packages/components/pagination/test/pagination.spec.ts b/packages/components/pagination/test/pagination.spec.ts index c1a10fba..70370cc7 100644 --- a/packages/components/pagination/test/pagination.spec.ts +++ b/packages/components/pagination/test/pagination.spec.ts @@ -1,157 +1,152 @@ -import { nextTick, ref } from 'vue' -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import { useLocale } from '@puik/hooks' -import PuikPagination from '../src/pagination.vue' -import { PuikPaginationVariantEnum } from '../src/pagination' -import { PuikOption } from '../../select' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { nextTick, ref } from 'vue'; +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { useLocale } from '@prestashopcorp/puik-locale'; +import { PuikPagination, PuikPaginationVariants, PuikOption, PaginationProps } from '@prestashopcorp/puik-components'; describe('Pagination tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; - const findPagination = () => wrapper.find('.puik-pagination') - const findPaginationComponent = () => wrapper.findComponent(PuikPagination) + const findPagination = () => wrapper.find('.puik-pagination'); + const findPaginationComponent = () => wrapper.findComponent(PuikPagination); const findPreviousButton = () => - wrapper.find('.puik-pagination__previous-button') + wrapper.find('.puik-pagination__previous-button'); const findPreviousButtonText = () => - wrapper.find('.puik-pagination__previous-button-text') + wrapper.find('.puik-pagination__previous-button-text'); - const findNextButton = () => wrapper.find('.puik-pagination__next-button') + const findNextButton = () => wrapper.find('.puik-pagination__next-button'); const findNextButtonText = () => - wrapper.find('.puik-pagination__next-button-text') + wrapper.find('.puik-pagination__next-button-text'); - const findLabel = () => wrapper.find('.puik-pagination__label') + const findLabel = () => wrapper.find('.puik-pagination__label'); const findLoaderButton = () => - wrapper.find('.puik-pagination__load-more-button') + wrapper.find('.puik-pagination__load-more-button'); const findSeparators = () => - wrapper.findAll('.puik-pagination__pager-separator') + wrapper.findAll('.puik-pagination__pager-separator'); - const findButtons = () => wrapper.findAll('.puik-pagination__pager-button') + const findButtons = () => wrapper.findAll('.puik-pagination__pager-button'); const findItemsPerPageSelect = () => - wrapper.find('.puik-pagination__items-per-page-select') - const findAllOptions = (select) => select.findAllComponents(PuikOption) + wrapper.find('.puik-pagination__items-per-page-select'); + const findAllOptions = (select) => select.findAllComponents(PuikOption); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props: PaginationProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikPagination, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; const propsData = { page: 5, itemsPerPage: 10, totalItem: 500, - itemCount: 50, - } + itemCount: 50 + }; it('should be a vue instance', () => { - factory(propsData) - expect(wrapper).toBeTruthy() - }) + factory(propsData); + expect(wrapper).toBeTruthy(); + }); it('should display a medium pagination by default', () => { - factory(propsData) - expect(findPagination().classes()).toContain('puik-pagination--medium') - }) + factory(propsData); + expect(findPagination().classes()).toContain('puik-pagination--medium'); + }); it('should display a small pagination', () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.small, - }) - expect(findPagination().classes()).toContain('puik-pagination--small') - }) + variant: PuikPaginationVariants.Small + }); + expect(findPagination().classes()).toContain('puik-pagination--small'); + }); it('should display a medium pagination', () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.medium, - }) - expect(findPagination().classes()).toContain('puik-pagination--medium') - }) + variant: PuikPaginationVariants.Medium + }); + expect(findPagination().classes()).toContain('puik-pagination--medium'); + }); it('should display a large pagination', () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.large, - }) - expect(findPagination().classes()).toContain('puik-pagination--large') - }) + variant: PuikPaginationVariants.Large + }); + expect(findPagination().classes()).toContain('puik-pagination--large'); + }); it('should display a mobile pagination', () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.mobile, - }) - expect(findPagination().classes()).toContain('puik-pagination--mobile') - }) + variant: PuikPaginationVariants.Mobile + }); + expect(findPagination().classes()).toContain('puik-pagination--mobile'); + }); it('should display a loader pagination', () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.loader, - }) - expect(findPagination().classes()).toContain('puik-pagination--loader') - }) + variant: PuikPaginationVariants.Loader + }); + expect(findPagination().classes()).toContain('puik-pagination--loader'); + }); // Generic tests it('should emit event when clicking on previous button', async () => { - factory(propsData) - await findPreviousButton().trigger('click') - await nextTick() + factory(propsData); + await findPreviousButton().trigger('click'); + await nextTick(); expect(findPaginationComponent().emitted('update:page')?.[0]).toStrictEqual( [4] - ) - }) + ); + }); it('should emit event when clicking on next button', async () => { - factory(propsData) - await findNextButton().trigger('click') - await nextTick() + factory(propsData); + await findNextButton().trigger('click'); + await nextTick(); expect(findPaginationComponent().emitted('update:page')?.[0]).toStrictEqual( [6] - ) - }) + ); + }); it('should render with custom label', async () => { - const label = 'Custom label given to pagination' - factory({ ...propsData, label }) - expect(findLabel().text()).toBe(label) - }) + const label = 'Custom label given to pagination'; + factory({ ...propsData, label }); + expect(findLabel().text()).toBe(label); + }); // Loader tests it('should render with custom button label on loader', async () => { - const loaderButtonLabel = 'Custom label given to pagination' + const loaderButtonLabel = 'Custom label given to pagination'; factory({ ...propsData, - variant: PuikPaginationVariantEnum.loader, - loaderButtonLabel, - }) - expect(findLoaderButton().text()).toBe(loaderButtonLabel) - }) + variant: PuikPaginationVariants.Loader, + loaderButtonLabel + }); + expect(findLoaderButton().text()).toBe(loaderButtonLabel); + }); it('should emit event when clicking on load more button', async () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.loader, - }) - await findLoaderButton().trigger('click') - await nextTick() + variant: PuikPaginationVariants.Loader + }); + await findLoaderButton().trigger('click'); + await nextTick(); expect(findPaginationComponent().emitted('update:page')?.[0]).toStrictEqual( [6] - ) - }) + ); + }); // Medium tests it('should both separators be visible', () => { @@ -159,50 +154,50 @@ describe('Pagination tests', () => { page: 10, itemsPerPage: 20, totalItem: 500, - itemCount: 50, - }) - expect(findSeparators().length).toBe(2) - }) + itemCount: 50 + }); + expect(findSeparators().length).toBe(2); + }); it('should first separator be visible', () => { factory({ page: 10, itemsPerPage: 50, totalItem: 500, - itemCount: 50, - }) - expect(findSeparators().length).toBe(1) - }) + itemCount: 50 + }); + expect(findSeparators().length).toBe(1); + }); it('should last separator be visible', () => { factory({ page: 2, itemsPerPage: 20, totalItem: 500, - itemCount: 50, - }) - expect(findSeparators().length).toBe(1) - }) + itemCount: 50 + }); + expect(findSeparators().length).toBe(1); + }); it('should separators be invisible', () => { factory({ page: 3, itemsPerPage: 100, totalItem: 500, - itemCount: 50, - }) - expect(findSeparators().length).toBe(0) - }) + itemCount: 50 + }); + expect(findSeparators().length).toBe(0); + }); it('should click page emit event', async () => { - factory(propsData) - const buttonPage1 = findButtons()[0] - await buttonPage1.trigger('click') - await nextTick() + factory(propsData); + const buttonPage1 = findButtons()[0]; + await buttonPage1.trigger('click'); + await nextTick(); expect(findPaginationComponent().emitted('update:page')?.[0]).toStrictEqual( [1] - ) - }) + ); + }); it('should click page change active class and aria-current', async () => { wrapper = mount({ @@ -213,114 +208,114 @@ describe('Pagination tests', () => { :items-per-page="20" />`, components: { - 'puik-pagination': PuikPagination, + 'puik-pagination': PuikPagination }, data() { - const page = ref(1) - return { page } - }, - }) + const page = ref(1); + return { page }; + } + }); - const buttons = findButtons() - const getAriaCurrent = (button) => button.attributes('aria-current') + const buttons = findButtons(); + const getAriaCurrent = (button) => button.attributes('aria-current'); // Click first pager button - const firstPagerButton = buttons[0] - await firstPagerButton.trigger('click') - await nextTick() - expect(getAriaCurrent(firstPagerButton)).toBe('true') + const firstPagerButton = buttons[0]; + await firstPagerButton.trigger('click'); + await nextTick(); + expect(getAriaCurrent(firstPagerButton)).toBe('true'); // Click middle pager button - await buttons[4].trigger('click') - await nextTick() - expect(getAriaCurrent(buttons[3])).toBe('true') + await buttons[4].trigger('click'); + await nextTick(); + expect(getAriaCurrent(buttons[3])).toBe('true'); // Click last pager button - const lastPagerButton = buttons[buttons.length - 1] - await lastPagerButton.trigger('click') - await nextTick() - expect(getAriaCurrent(lastPagerButton)).toBe('true') - }) + const lastPagerButton = buttons[buttons.length - 1]; + await lastPagerButton.trigger('click'); + await nextTick(); + expect(getAriaCurrent(lastPagerButton)).toBe('true'); + }); // Large tests it('should previous and next button have text', async () => { - const { t } = useLocale() - const previousText = t('puik.pagination.previous') - const nextText = t('puik.pagination.next') + const { t } = useLocale(); + const previousText = t('puik.pagination.previous'); + const nextText = t('puik.pagination.next'); - factory({ ...propsData, variant: PuikPaginationVariantEnum.large }) - expect(findPreviousButtonText().text()).toContain(previousText) - expect(findNextButtonText().text()).toBe(nextText) - }) + factory({ ...propsData, variant: PuikPaginationVariants.Large }); + expect(findPreviousButtonText().text()).toContain(previousText); + expect(findNextButtonText().text()).toBe(nextText); + }); it('should click page change active class and aria-current', async () => { - factory({ ...propsData, variant: PuikPaginationVariantEnum.large }) + factory({ ...propsData, variant: PuikPaginationVariants.Large }); - const findSelect = () => wrapper.find('.puik-pagination__select') - const findAllOptions = () => wrapper.findAllComponents(PuikOption) + const findSelect = () => wrapper.find('.puik-pagination__select'); + const findAllOptions = () => wrapper.findAllComponents(PuikOption); // Click first pager button - await findSelect().trigger('click') - await findAllOptions()[5].trigger('click') - await nextTick() + await findSelect().trigger('click'); + await findAllOptions()[5].trigger('click'); + await nextTick(); expect(findPaginationComponent().emitted('update:page')?.[0]).toStrictEqual( [5] - ) - }) + ); + }); it('should emit when selecting item per page', async () => { - factory({ ...propsData, variant: PuikPaginationVariantEnum.large }) + factory({ ...propsData, variant: PuikPaginationVariants.Large }); - const itemsPerPageSelect = findItemsPerPageSelect() + const itemsPerPageSelect = findItemsPerPageSelect(); - await findItemsPerPageSelect().trigger('click') - await findAllOptions(itemsPerPageSelect)[1].trigger('click') - await nextTick() + await findItemsPerPageSelect().trigger('click'); + await findAllOptions(itemsPerPageSelect)[1].trigger('click'); + await nextTick(); expect( findPaginationComponent().emitted('update:itemsPerPage')?.[0] - ).toStrictEqual([10]) - }) + ).toStrictEqual([10]); + }); - it('should have custom items per page options', () => { + it('should have custom items per page options', async () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.large, - itemsPerPageOptions: [1, 2], - }) + variant: PuikPaginationVariants.Large, + itemsPerPageOptions: [1, 2] + }); - const itemsPerPageSelect = findItemsPerPageSelect() + const itemsPerPageSelect = findItemsPerPageSelect(); - findItemsPerPageSelect().trigger('click') - const options = findAllOptions(itemsPerPageSelect) - expect(options[0].text()).toBe('1') - expect(options[1].text()).toBe('2') - expect(options.length).toBe(2) - }) + await findItemsPerPageSelect().trigger('click'); + const options = findAllOptions(itemsPerPageSelect); + expect(options[0].text()).toBe('1'); + expect(options[1].text()).toBe('2'); + expect(options.length).toBe(2); + }); it('should have a data-test attribute on container nav, nextButton, previousButton and label', () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.large, - dataTest: 'test', - }) + variant: PuikPaginationVariants.Large, + dataTest: 'test' + }); expect(findPreviousButton().attributes('data-test')).toBe( 'previousButton-test' - ) - expect(findPagination().attributes('data-test')).toBe('test') - expect(findNextButton().attributes('data-test')).toBe('nextButton-test') - expect(findLabel().attributes('data-test')).toBe('label-test') - }) + ); + expect(findPagination().attributes('data-test')).toBe('test'); + expect(findNextButton().attributes('data-test')).toBe('nextButton-test'); + expect(findLabel().attributes('data-test')).toBe('label-test'); + }); it('should have a data-test attribute on loaderButton', () => { factory({ ...propsData, - variant: PuikPaginationVariantEnum.loader, - dataTest: 'test', - }) + variant: PuikPaginationVariants.Loader, + dataTest: 'test' + }); expect(findLoaderButton().attributes('data-test')).toBe( 'loadMoreButton-test' - ) - }) -}) + ); + }); +}); diff --git a/packages/components/progress-bar/index.ts b/packages/components/progress-bar/index.ts index b5954b1c..762d93c8 100644 --- a/packages/components/progress-bar/index.ts +++ b/packages/components/progress-bar/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import ProgressBar from './src/progress-bar.vue'; -import ProgressBar from './src/progress-bar.vue' +export const PuikProgressBar = ProgressBar; +export default PuikProgressBar; -export const PuikProgressBar = withInstall(ProgressBar) -export default PuikProgressBar - -export * from './src/progress-bar' +export * from './src/progress-bar'; diff --git a/packages/components/progress-bar/src/progress-bar.ts b/packages/components/progress-bar/src/progress-bar.ts index fb299e8d..6cbd0b7c 100644 --- a/packages/components/progress-bar/src/progress-bar.ts +++ b/packages/components/progress-bar/src/progress-bar.ts @@ -1,23 +1,9 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type ProgressBar from './progress-bar.vue' +import type ProgressBar from './progress-bar.vue'; -export const progressBarProps = buildProps({ - percentage: { - type: [Number, String], - required: true, - }, - barClass: { - type: String, - default: '', - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface ProgressBarProps { + percentage: number | string + barClass?: string + dataTest?: string +} -export type ProgressBarProps = ExtractPropTypes - -export type ProgressBarInstance = InstanceType +export type ProgressBarInstance = InstanceType; diff --git a/packages/components/progress-bar/src/progress-bar.vue b/packages/components/progress-bar/src/progress-bar.vue index eb285f34..0f3b9b21 100644 --- a/packages/components/progress-bar/src/progress-bar.vue +++ b/packages/components/progress-bar/src/progress-bar.vue @@ -1,5 +1,8 @@ + + diff --git a/packages/components/sidebar/src/sidebar-item.ts b/packages/components/sidebar/src/sidebar-item.ts index 1bfdd318..6463703c 100644 --- a/packages/components/sidebar/src/sidebar-item.ts +++ b/packages/components/sidebar/src/sidebar-item.ts @@ -1,40 +1,13 @@ -import { buildProps } from '@puik/utils' -import type { RouteLocationRaw } from 'vue-router' -import type { ExtractPropTypes, PropType } from 'vue' -import type SidebarItem from './sidebar-item.vue' +import type { RouteLocationRaw } from 'vue-router'; +import type SidebarItem from './sidebar-item.vue'; -export const sidebarItemProps = buildProps({ - title: { - type: String, - required: true, - }, - href: { - type: String, - required: false, - default: undefined, - }, - to: { - type: [Object, String] as PropType, - required: false, - default: undefined, - }, - icon: { - type: String, - required: false, - default: undefined, - }, - active: { - type: Boolean, - required: false, - default: false, - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface SidebarItemProps { + title: string + href?: string + to?: RouteLocationRaw + icon?: string + active?: boolean + dataTest?: string +} -export type SidebarItemProps = ExtractPropTypes - -export type SidebarItemInstance = InstanceType +export type SidebarItemInstance = InstanceType; diff --git a/packages/components/sidebar/src/sidebar-item.vue b/packages/components/sidebar/src/sidebar-item.vue index 8995dd6a..723ff52e 100644 --- a/packages/components/sidebar/src/sidebar-item.vue +++ b/packages/components/sidebar/src/sidebar-item.vue @@ -36,28 +36,33 @@ {{ title }} + >{{ title }}
      + + diff --git a/packages/components/sidebar/src/sidebar-title.ts b/packages/components/sidebar/src/sidebar-title.ts index 3e8f42ab..c8d44692 100644 --- a/packages/components/sidebar/src/sidebar-title.ts +++ b/packages/components/sidebar/src/sidebar-title.ts @@ -1,19 +1,8 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type SidebarTitle from './sidebar-title.vue' +import type SidebarTitle from './sidebar-title.vue'; -export const sidebarTitleProps = buildProps({ - tag: { - type: String, - required: false, - default: 'h3', - }, - dataTest: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface SidebarTitleProps { + tag?: string + dataTest?: string +} -export type SidebarTitleProps = ExtractPropTypes -export type SidebarTitleInstance = InstanceType +export type SidebarTitleInstance = InstanceType; diff --git a/packages/components/sidebar/src/sidebar-title.vue b/packages/components/sidebar/src/sidebar-title.vue index baed4111..858ba166 100644 --- a/packages/components/sidebar/src/sidebar-title.vue +++ b/packages/components/sidebar/src/sidebar-title.vue @@ -5,20 +5,27 @@ class="puik-sidebar-title" :data-test="dataTest != undefined ? `sidebarTitle-${dataTest}` : undefined" > - + + + diff --git a/packages/components/sidebar/src/sidebar.ts b/packages/components/sidebar/src/sidebar.ts index 5ff85195..3619a52b 100644 --- a/packages/components/sidebar/src/sidebar.ts +++ b/packages/components/sidebar/src/sidebar.ts @@ -1,32 +1,17 @@ -import { buildProps } from '@puik/utils' -import type { Ref, ExtractPropTypes, InjectionKey } from 'vue' -import type Sidebar from './sidebar.vue' +import type { Ref, InjectionKey } from 'vue'; +import type Sidebar from './sidebar.vue'; -export const sidebarProps = buildProps({ - expanded: { - type: Boolean, - required: false, - default: false, - }, - openAccordion: { - type: String, - required: false, - default: '', - }, - mobile: { - type: Boolean, - required: false, - default: false, - }, -} as const) - -export type SidebarProps = ExtractPropTypes +export interface SidebarProps { + expanded?: boolean + openAccordion?: string + mobile?: boolean +} -export type SidebarInstance = InstanceType +export type SidebarInstance = InstanceType; export type SidebarContext = { extended: Ref -} +}; -export const sidebarKey: InjectionKey = Symbol('sidebar') -export const groupItemKey: InjectionKey = Symbol('sidebar-group-item') +export const sidebarKey: InjectionKey = Symbol('sidebar'); +export const groupItemKey: InjectionKey = Symbol('sidebar-group-item'); diff --git a/packages/components/sidebar/src/sidebar.vue b/packages/components/sidebar/src/sidebar.vue index baf06e45..1156f4ae 100644 --- a/packages/components/sidebar/src/sidebar.vue +++ b/packages/components/sidebar/src/sidebar.vue @@ -16,30 +16,36 @@ 'puik-sidebar--collapsed': !localExpanded, }" > -
      +
      + />
      -
      +
      + />
      - + @@ -48,68 +54,75 @@ class="puik-sidebar__backdrop" aria-hidden="true" @click="setExpanded(false)" - >
      + />
      + + diff --git a/packages/components/sidebar/stories/sidebar-group-item.stories.ts b/packages/components/sidebar/stories/sidebar-group-item.stories.ts index e3ab8fe6..2ba61d49 100644 --- a/packages/components/sidebar/stories/sidebar-group-item.stories.ts +++ b/packages/components/sidebar/stories/sidebar-group-item.stories.ts @@ -1,6 +1,5 @@ -import { PuikSidebarGroupItem, PuikSidebarItem, PuikSidebarTitle } from '..' -import PuikSidebar from './../src/sidebar.vue' -import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3' +import { PuikSidebarGroupItem, PuikSidebar, PuikSidebarItem, PuikSidebarTitle } from '@prestashopcorp/puik-components'; +import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Sidebar/SidebarGroupItem', @@ -11,78 +10,78 @@ export default { description: 'Set the item title', table: { type: { - summary: 'string', - }, - }, + summary: 'string' + } + } }, name: { control: 'text', description: 'Set the name', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: undefined, - }, - }, + summary: undefined + } + } }, icon: { control: 'text', description: 'Set the icon', table: { type: { - summary: 'string', - }, - }, + summary: 'string' + } + } }, active: { control: 'boolean', description: 'Set an active state', table: { type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, default: { control: 'none', - description: 'Set the defaut content slot', + description: 'Set the defaut content slot' }, dataTest: { control: 'text', description: - 'Set the data-test attribute on the sidebar group item `sidebarAccordion-${dataTest}` `sidebarMenuButton-${dataTest}` ', - }, + 'Set the data-test attribute on the sidebar group item `sidebarAccordion-${dataTest}` `sidebarMenuButton-${dataTest}` ' + } }, args: { title: 'title', active: false, name: undefined, - icon: 'home', + icon: 'home' }, parameters: { docs: { story: { inline: false, - iframeHeight: 500, - }, - }, - }, -} as Meta + iframeHeight: 500 + } + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikSidebar, PuikSidebarGroupItem, PuikSidebarItem, - PuikSidebarTitle, + PuikSidebarTitle }, setup() { - return { args } + return { args }; }, template: ` @@ -95,8 +94,8 @@ const Template: StoryFn = (args: Args) => ({ - `, -}) + ` +}); export const Default: StoryObj = { render: Template, @@ -120,8 +119,8 @@ export const Default: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/sidebar/stories/sidebar-item.stories.ts b/packages/components/sidebar/stories/sidebar-item.stories.ts index 41572548..38c80a64 100644 --- a/packages/components/sidebar/stories/sidebar-item.stories.ts +++ b/packages/components/sidebar/stories/sidebar-item.stories.ts @@ -1,6 +1,5 @@ -import { PuikSidebarGroupItem, PuikSidebarItem, PuikSidebarTitle } from '..' -import PuikSidebar from './../src/sidebar.vue' -import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3' +import { PuikSidebarGroupItem, PuikSidebar, PuikSidebarItem, PuikSidebarTitle } from '@prestashopcorp/puik-components'; +import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Sidebar/SidebarItem', @@ -11,94 +10,94 @@ export default { description: 'Set the item title', table: { type: { - summary: 'string', - }, - }, + summary: 'string' + } + } }, href: { control: 'text', description: 'Set the href of the item', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: undefined, - }, - }, + summary: undefined + } + } }, to: { control: 'text', description: 'Set the to destination of the item (router-link)', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: undefined, - }, - }, + summary: undefined + } + } }, icon: { control: 'text', description: 'Set the icon', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: undefined, - }, - }, + summary: undefined + } + } }, active: { control: 'boolean', description: 'Set an active state', table: { type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, default: { control: 'none', - description: 'Set the defaut content slot', + description: 'Set the defaut content slot' }, dataTest: { control: 'text', description: - 'Set the data-test attribute on the item `menubuttonTitle-${dataTest}` `buttonTitle-${dataTest}` `title-${dataTest}`', - }, + 'Set the data-test attribute on the item `menubuttonTitle-${dataTest}` `buttonTitle-${dataTest}` `title-${dataTest}`' + } }, args: { title: 'title', active: false, href: undefined, to: undefined, - icon: 'home', + icon: 'home' }, parameters: { docs: { story: { inline: false, - iframeHeight: 500, - }, - }, - }, -} as Meta + iframeHeight: 500 + } + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikSidebar, PuikSidebarGroupItem, PuikSidebarItem, - PuikSidebarTitle, + PuikSidebarTitle }, setup() { - return { args } + return { args }; }, template: ` @@ -115,8 +114,8 @@ const Template: StoryFn = (args: Args) => ({ - `, -}) + ` +}); export const Default: StoryObj = { render: Template, @@ -141,8 +140,8 @@ export const Default: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/sidebar/stories/sidebar-title.stories.ts b/packages/components/sidebar/stories/sidebar-title.stories.ts index ebcf35e8..654ee749 100644 --- a/packages/components/sidebar/stories/sidebar-title.stories.ts +++ b/packages/components/sidebar/stories/sidebar-title.stories.ts @@ -1,6 +1,5 @@ -import { PuikSidebarItem, PuikSidebarTitle } from '..' -import PuikSidebar from './../src/sidebar.vue' -import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3' +import { PuikSidebar, PuikSidebarItem, PuikSidebarTitle } from '@prestashopcorp/puik-components'; +import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Sidebar/SidebarTitle', @@ -11,53 +10,53 @@ export default { description: 'Set the node type', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'h3', - }, - }, + summary: 'h3' + } + } }, default: { control: 'text', description: 'Set the defaut content slot', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: undefined, - }, - }, + summary: undefined + } + } }, dataTest: { control: 'text', description: - 'Set the data-test attribute on the sidebar title `sidebarTitle-${dataTest}`', - }, + 'Set the data-test attribute on the sidebar title `sidebarTitle-${dataTest}`' + } }, args: { tag: 'h3', - default: 'Title', + default: 'Title' }, parameters: { docs: { story: { inline: false, - iframeHeight: 500, - }, - }, - }, -} as Meta + iframeHeight: 500 + } + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikSidebar, PuikSidebarItem, - PuikSidebarTitle, + PuikSidebarTitle }, setup() { - return { args } + return { args }; }, template: ` @@ -65,8 +64,8 @@ const Template: StoryFn = (args: Args) => ({ - `, -}) + ` +}); export const Default: StoryObj = { render: Template, @@ -78,8 +77,8 @@ export const Default: StoryObj = { Title `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/sidebar/stories/sidebar.stories.ts b/packages/components/sidebar/stories/sidebar.stories.ts index ae2f43dd..b1933fcb 100644 --- a/packages/components/sidebar/stories/sidebar.stories.ts +++ b/packages/components/sidebar/stories/sidebar.stories.ts @@ -1,7 +1,5 @@ -import { PuikSidebarGroupItem, PuikSidebarItem, PuikSidebarTitle } from '..' -import { PuikButton } from '../..' -import PuikSidebar from './../src/sidebar.vue' -import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3' +import { PuikButton, PuikSidebarGroupItem, PuikSidebar, PuikSidebarItem, PuikSidebarTitle } from '@prestashopcorp/puik-components'; +import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3'; export default { title: 'Components/Sidebar', @@ -12,24 +10,24 @@ export default { description: 'v-model of the expansion state', table: { type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: false, - }, - }, + summary: false + } + } }, openAccordion: { control: 'text', description: 'v-model of the open accordion name', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: undefined, - }, - }, + summary: undefined + } + } }, mobile: { control: 'boolean', @@ -37,33 +35,33 @@ export default { 'Add a backdrop for dismiss and hide the sidebar when collapsed (mobile usage), expansion is triggered by the v-model', table: { type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: false, - }, - }, - }, + summary: false + } + } + } }, parameters: { docs: { story: { inline: false, - iframeHeight: 500, - }, - }, - }, -} as Meta + iframeHeight: 500 + } + } + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikSidebar, PuikSidebarGroupItem, PuikSidebarItem, - PuikSidebarTitle, + PuikSidebarTitle }, setup() { - return { args } + return { args }; }, template: ` @@ -96,14 +94,14 @@ const Template: StoryFn = (args: Args) => ({ icon="extension" /> - `, -}) + ` +}); export const Default: StoryObj = { render: Template, args: { expanded: false, - mobile: false, + mobile: false }, parameters: { docs: { @@ -319,11 +317,11 @@ export const Default: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; const MobileTemplate: StoryFn = (args: Args) => ({ components: { @@ -331,15 +329,15 @@ const MobileTemplate: StoryFn = (args: Args) => ({ PuikSidebarGroupItem, PuikSidebarItem, PuikSidebarTitle, - PuikButton, + PuikButton }, setup() { - return { args } + return { args }; }, data() { return { - expanded: false, - } + expanded: false + }; }, template: ` @@ -375,14 +373,14 @@ const MobileTemplate: StoryFn = (args: Args) => ({ Open/Close - `, -}) + ` +}); export const Mobile: StoryObj = { render: MobileTemplate, args: { expanded: false, - mobile: true, + mobile: true }, parameters: { docs: { @@ -548,8 +546,8 @@ export const Mobile: StoryObj = { Open/Close `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/sidebar/style/css.ts b/packages/components/sidebar/style/css.ts index f0ffa7df..9ed2420c 100644 --- a/packages/components/sidebar/style/css.ts +++ b/packages/components/sidebar/style/css.ts @@ -1,4 +1,4 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-sidebar.css' -import '@puik/theme/puik-accordion-group.css' -import '@puik/theme/puik-button.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-sidebar.css'; +import '@prestashopcorp/puik-theme/puik-accordion-group.css'; +import '@prestashopcorp/puik-theme/puik-button.css'; diff --git a/packages/components/sidebar/style/index.ts b/packages/components/sidebar/style/index.ts index 03121b2d..81d70dea 100644 --- a/packages/components/sidebar/style/index.ts +++ b/packages/components/sidebar/style/index.ts @@ -1,4 +1,4 @@ -import '@puik/components/base/style' -import '@puik/theme/src/sidebar.scss' -import '@puik/theme/src/accordion-group.scss' -import '@puik/theme/src/button.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-sidebar.scss'; +import '@prestashopcorp/puik-theme/src/puik-accordion-group.scss'; +import '@prestashopcorp/puik-theme/src/puik-button.scss'; diff --git a/packages/components/sidebar/test/sidebar-group-item.spec.ts b/packages/components/sidebar/test/sidebar-group-item.spec.ts index fbee0827..be147ae0 100644 --- a/packages/components/sidebar/test/sidebar-group-item.spec.ts +++ b/packages/components/sidebar/test/sidebar-group-item.spec.ts @@ -1,31 +1,30 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import { PuikSidebar, PuikSidebarItem, PuikSidebarGroupItem } from '..' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSidebar, PuikSidebarItem, PuikSidebarGroupItem } from '@prestashopcorp/puik-components'; -let wrapper: VueWrapper -const factory = (template: string, options: MountingOptions = {}) => { +let wrapper: VueWrapper; +const factory = (template: string, options: ComponentMountingOptions = {}) => { wrapper = mount({ components: { PuikSidebar, PuikSidebarGroupItem, - PuikSidebarItem, + PuikSidebarItem }, template, - ...options, - }) -} + ...options + }); +}; const getSidebarGroupItemContainer = () => - wrapper.find('.puik-sidebar-group-item') -const getIcon = () => wrapper.find('.puik-sidebar-group-item .puik-icon') -const getAccordion = () => wrapper.find('.puik-sidebar-group-item__accordion') + wrapper.find('.puik-sidebar-group-item'); +const getIcon = () => wrapper.find('.puik-sidebar-group-item .puik-icon'); +const getAccordion = () => wrapper.find('.puik-sidebar-group-item__accordion'); const getAccordionTitle = () => - wrapper.find('.puik-accordion__header__content__title') + wrapper.find('.puik-accordion__header__content__title'); const getMenuButton = () => - wrapper.find('.puik-sidebar-group-item__menu-button') + wrapper.find('.puik-sidebar-group-item__menu-button'); const getMenuContent = () => - wrapper.find('.puik-sidebar-group-item__menu-content') + wrapper.find('.puik-sidebar-group-item__menu-content'); describe('Sidebar tests', () => { it('should be a vue instance', () => { @@ -33,30 +32,30 @@ describe('Sidebar tests', () => { - ` - factory(template) - expect(wrapper).toBeTruthy() - }) + `; + factory(template); + expect(wrapper).toBeTruthy(); + }); it('should be active', () => { const template = ` - ` - factory(template) - expect(wrapper.classes()).toContain('puik-sidebar-group-item--active') - }) + `; + factory(template); + expect(wrapper.classes()).toContain('puik-sidebar-group-item--active'); + }); it('should render a title when the sidebar is expanded', () => { const template = ` - ` - factory(template) - expect(getAccordionTitle().text()).toBe('title') - }) + `; + factory(template); + expect(getAccordionTitle().text()).toBe('title'); + }); it('should render an icon when expanded', () => { const template = ` @@ -64,10 +63,10 @@ describe('Sidebar tests', () => { - ` - factory(template) - expect(getIcon().text()).toBe('store') - }) + `; + factory(template); + expect(getIcon().text()).toBe('store'); + }); it('should render an icon when collapsed', () => { const template = ` @@ -75,10 +74,10 @@ describe('Sidebar tests', () => { - ` - factory(template) - expect(getIcon().text()).toBe('store') - }) + `; + factory(template); + expect(getIcon().text()).toBe('store'); + }); it('should render as a menu when collapsed', () => { const template = ` @@ -86,10 +85,10 @@ describe('Sidebar tests', () => { - ` - factory(template) - expect(getMenuButton().exists()).toBeTruthy() - }) + `; + factory(template); + expect(getMenuButton().exists()).toBeTruthy(); + }); it('should render as an accordion when expanded', () => { const template = ` @@ -97,10 +96,10 @@ describe('Sidebar tests', () => { - ` - factory(template) - expect(getAccordion().exists()).toBeTruthy() - }) + `; + factory(template); + expect(getAccordion().exists()).toBeTruthy(); + }); it('should render menu content when collapsed', async () => { const template = ` @@ -109,11 +108,11 @@ describe('Sidebar tests', () => { - ` - factory(template) - await getMenuButton().trigger('click') - expect(getMenuContent().exists()).toBeTruthy() - }) + `; + factory(template); + await getMenuButton().trigger('click'); + expect(getMenuContent().exists()).toBeTruthy(); + }); it('should render data-test attribute on container div', async () => { const template = ` @@ -122,8 +121,8 @@ describe('Sidebar tests', () => { - ` - factory(template) - expect(getSidebarGroupItemContainer().attributes('data-test')).toBe('test') - }) -}) + `; + factory(template); + expect(getSidebarGroupItemContainer().attributes('data-test')).toBe('test'); + }); +}); diff --git a/packages/components/sidebar/test/sidebar-item.spec.ts b/packages/components/sidebar/test/sidebar-item.spec.ts index b126bacb..90b130da 100644 --- a/packages/components/sidebar/test/sidebar-item.spec.ts +++ b/packages/components/sidebar/test/sidebar-item.spec.ts @@ -1,87 +1,85 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import { PuikSidebar, PuikSidebarItem } from '../..' -import { PuikMenuItem } from './../../menu/index' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSidebar, PuikSidebarItem, PuikMenuItem } from '@prestashopcorp/puik-components'; -let wrapper: VueWrapper -const factory = (template: string, options: MountingOptions = {}) => { +let wrapper: VueWrapper; +const factory = (template: string, options: ComponentMountingOptions = {}) => { wrapper = mount({ components: { PuikSidebarItem, PuikSidebar, - PuikMenuItem, + PuikMenuItem }, template, - ...options, - }) -} + ...options + }); +}; -const getSideBarItem = () => wrapper.find('.puik-sidebar-item') -const getSideBarItemLabel = () => wrapper.find('.puik-sidebar-item span') -const getItemButton = () => wrapper.find('.puik-sidebar-item__button') +const getSideBarItem = () => wrapper.find('.puik-sidebar-item'); +const getSideBarItemLabel = () => wrapper.find('.puik-sidebar-item span'); +const getItemButton = () => wrapper.find('.puik-sidebar-item__button'); describe('Sidebar tests', () => { it('should be a vue instance', () => { const template = ` - ` - factory(template) - expect(wrapper).toBeTruthy() - }) + `; + factory(template); + expect(wrapper).toBeTruthy(); + }); it('should be active', () => { const template = ` - ` - factory(template) - expect(wrapper.classes()).toContain('puik-sidebar-item--active') - }) + `; + factory(template); + expect(wrapper.classes()).toContain('puik-sidebar-item--active'); + }); it('should render as a router-link', () => { const template = ` - ` - factory(template) - expect(getItemButton().element.tagName).toBe('ROUTER-LINK') - }) + `; + factory(template); + expect(getItemButton().element.tagName).toBe('ROUTER-LINK'); + }); it('should render as a link', () => { const template = ` - ` - factory(template) - expect(getItemButton().element.tagName).toBe('A') - }) + `; + factory(template); + expect(getItemButton().element.tagName).toBe('A'); + }); it('should not render a title when the sidebar is collapsed', () => { const template = ` - ` - factory(template) - expect(getItemButton().text()).not.toBe('title') - }) + `; + factory(template); + expect(getItemButton().text()).not.toBe('title'); + }); it('should render a title when the sidebar is expanded', () => { const template = ` - ` - factory(template) - expect(getItemButton().text()).toBe('title') - }) + `; + factory(template); + expect(getItemButton().text()).toBe('title'); + }); it('should render a data-test attribute on sidebar item button and label (if sidebar is expanded)', () => { const template = ` - ` - factory(template) - expect(getSideBarItem().attributes('data-test')).toBe('buttonTitle-test') - expect(getSideBarItemLabel().attributes('data-test')).toBe('title-test') - }) -}) + `; + factory(template); + expect(getSideBarItem().attributes('data-test')).toBe('buttonTitle-test'); + expect(getSideBarItemLabel().attributes('data-test')).toBe('title-test'); + }); +}); diff --git a/packages/components/sidebar/test/sidebar-title.spec.ts b/packages/components/sidebar/test/sidebar-title.spec.ts index 7a88e8cd..34748217 100644 --- a/packages/components/sidebar/test/sidebar-title.spec.ts +++ b/packages/components/sidebar/test/sidebar-title.spec.ts @@ -1,38 +1,37 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import { PuikSidebar, PuikSidebarTitle } from '..' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSidebar, PuikSidebarTitle } from '@prestashopcorp/puik-components'; -let wrapper: VueWrapper -const factory = (template: string, options: MountingOptions = {}) => { +let wrapper: VueWrapper; +const factory = (template: string, options: ComponentMountingOptions = {}) => { wrapper = mount({ components: { PuikSidebar, - PuikSidebarTitle, + PuikSidebarTitle }, template, - ...options, - }) -} + ...options + }); +}; -const getTitle = () => wrapper.find('.puik-sidebar-title') +const getTitle = () => wrapper.find('.puik-sidebar-title'); describe('Sidebar tests', () => { it('should be a vue instance', () => { const template = ` Title - ` - factory(template) - expect(wrapper).toBeTruthy() - }) + `; + factory(template); + expect(wrapper).toBeTruthy(); + }); it('should render according to tag props', () => { const template = ` Title - ` - factory(template) - expect(getTitle().element.tagName).toBe('SPAN') - }) -}) + `; + factory(template); + expect(getTitle().element.tagName).toBe('SPAN'); + }); +}); diff --git a/packages/components/sidebar/test/sidebar.spec.ts b/packages/components/sidebar/test/sidebar.spec.ts index b58a2782..49f34098 100644 --- a/packages/components/sidebar/test/sidebar.spec.ts +++ b/packages/components/sidebar/test/sidebar.spec.ts @@ -1,29 +1,25 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikSidebar from '../src/sidebar.vue' -import PuikSidebarGroupItem from '../src/sidebar-group-item.vue' -import PuikSidebarItem from '../src/sidebar-item.vue' -import PuikSidebarTitle from '../src/sidebar-title.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSidebar, PuikSidebarGroupItem, PuikSidebarItem, PuikSidebarTitle } from '@prestashopcorp/puik-components'; -let wrapper: VueWrapper -const factory = (template: string, options: MountingOptions = {}) => { +let wrapper: VueWrapper; +const factory = (template: string, options: ComponentMountingOptions = {}) => { wrapper = mount({ components: { PuikSidebarTitle, PuikSidebarItem, PuikSidebarGroupItem, - PuikSidebar, + PuikSidebar }, template, - ...options, - }) -} + ...options + }); +}; -const getSidebar = () => wrapper.find('.puik-sidebar') -const getSidebarsItem = () => wrapper.findAll('.puik-sidebar-item') -const getExpandButton = () => wrapper.find('.puik-sidebar__header .puik-button') -const getSidebarBackdrop = () => wrapper.find('.puik-sidebar__backdrop') +const getSidebar = () => wrapper.find('.puik-sidebar'); +const getSidebarsItem = () => wrapper.findAll('.puik-sidebar-item'); +const getExpandButton = () => wrapper.find('.puik-sidebar__header .puik-button'); +const getSidebarBackdrop = () => wrapper.find('.puik-sidebar__backdrop'); describe('Sidebar tests', () => { it('should be a vue instance', () => { @@ -33,10 +29,10 @@ describe('Sidebar tests', () => { - ` - factory(template) - expect(wrapper).toBeTruthy() - }) + `; + factory(template); + expect(wrapper).toBeTruthy(); + }); it('should expand', async () => { const template = ` @@ -45,13 +41,13 @@ describe('Sidebar tests', () => { - ` - await factory(template) - const expandButton = getExpandButton() - expect(getSidebar().classes()).toContain('puik-sidebar--collapsed') - await expandButton.trigger('click') - expect(getSidebar().classes()).not.toContain('puik-sidebar--collapsed') - }) + `; + await factory(template); + const expandButton = getExpandButton(); + expect(getSidebar().classes()).toContain('puik-sidebar--collapsed'); + await expandButton.trigger('click'); + expect(getSidebar().classes()).not.toContain('puik-sidebar--collapsed'); + }); it('should expand with v-model', async () => { const template = ` @@ -60,26 +56,26 @@ describe('Sidebar tests', () => { - ` + `; - await factory(template) - expect(getSidebar().classes()).toContain('puik-sidebar--collapsed') - await wrapper.setProps({ expanded: true }) - expect(getSidebar().classes()).not.toContain('puik-sidebar--collapsed') - }) + await factory(template); + expect(getSidebar().classes()).toContain('puik-sidebar--collapsed'); + await wrapper.setProps({ expanded: true }); + expect(getSidebar().classes()).not.toContain('puik-sidebar--collapsed'); + }); it('should be mobile', async () => { const template = ` - ` - factory(template) - const items = getSidebarsItem()[0] - expect(items.exists()).toBeTruthy() - const backdrop = getSidebarBackdrop() - expect(backdrop).toBeTruthy() - }) + `; + factory(template); + const items = getSidebarsItem()[0]; + expect(items.exists()).toBeTruthy(); + const backdrop = getSidebarBackdrop(); + expect(backdrop).toBeTruthy(); + }); it('should have group-1 open by default', async () => { const template = ` @@ -88,12 +84,12 @@ describe('Sidebar tests', () => { - ` + `; - await factory(template) - const accordion = wrapper.find('.puik-accordion') - expect(accordion.classes()).toContain('puik-accordion--expanded') - }) + await factory(template); + const accordion = wrapper.find('.puik-accordion'); + expect(accordion.classes()).toContain('puik-accordion--expanded'); + }); it('should open props accordion as default', async () => { const template = ` @@ -105,14 +101,14 @@ describe('Sidebar tests', () => { - ` + `; - await factory(template) - const accordion = wrapper.findAll('.puik-accordion') - expect(accordion[0].classes()).toContain('puik-accordion--expanded') - expect(accordion[1].classes()).not.toContain('puik-accordion--expanded') - await wrapper.setProps({ openAccordion: 'group-2' }) - expect(accordion[1].classes()).toContain('puik-accordion--expanded') - expect(accordion[0].classes()).not.toContain('puik-accordion--expanded') - }) -}) + await factory(template); + const accordion = wrapper.findAll('.puik-accordion'); + expect(accordion[0].classes()).toContain('puik-accordion--expanded'); + expect(accordion[1].classes()).not.toContain('puik-accordion--expanded'); + await wrapper.setProps({ openAccordion: 'group-2' }); + expect(accordion[1].classes()).toContain('puik-accordion--expanded'); + expect(accordion[0].classes()).not.toContain('puik-accordion--expanded'); + }); +}); diff --git a/packages/components/skeleton-loader-group/style/css.ts b/packages/components/skeleton-loader-group/style/css.ts index 4c722bac..a0ce421f 100644 --- a/packages/components/skeleton-loader-group/style/css.ts +++ b/packages/components/skeleton-loader-group/style/css.ts @@ -1 +1 @@ -import '@puik/components/base/style/css' +import '@prestashopcorp/puik-components/base/style/css'; diff --git a/packages/components/skeleton-loader-group/style/index.ts b/packages/components/skeleton-loader-group/style/index.ts index 1ea9036d..3e774f39 100644 --- a/packages/components/skeleton-loader-group/style/index.ts +++ b/packages/components/skeleton-loader-group/style/index.ts @@ -1 +1 @@ -import '@puik/components/base/style' +import '@prestashopcorp/puik-components/base/style'; diff --git a/packages/components/skeleton-loader/index.ts b/packages/components/skeleton-loader/index.ts index daad5fc3..82914a69 100644 --- a/packages/components/skeleton-loader/index.ts +++ b/packages/components/skeleton-loader/index.ts @@ -1,11 +1,9 @@ -import { withInstall } from '@puik/utils' +import SkeletonLoader from './src/skeleton-loader.vue'; +import SkeletonLoaderGroup from './src/skeleton-loader-group.vue'; -import SkeletonLoader from './src/skeleton-loader.vue' -import SkeletonLoaderGroup from './src/skeleton-loader-group.vue' +export const PuikSkeletonLoader = SkeletonLoader; +export const PuikSkeletonLoaderGroup = SkeletonLoaderGroup; +export default PuikSkeletonLoader; -export const PuikSkeletonLoader = withInstall(SkeletonLoader) -export const PuikSkeletonLoaderGroup = withInstall(SkeletonLoaderGroup) -export default PuikSkeletonLoader - -export * from './src/skeleton-loader' -export * from './src/skeleton-loader-group' +export * from './src/skeleton-loader'; +export * from './src/skeleton-loader-group'; diff --git a/packages/components/skeleton-loader/src/skeleton-loader-group.ts b/packages/components/skeleton-loader/src/skeleton-loader-group.ts index 1d9c5f38..7bdb8387 100644 --- a/packages/components/skeleton-loader/src/skeleton-loader-group.ts +++ b/packages/components/skeleton-loader/src/skeleton-loader-group.ts @@ -1,19 +1,9 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type SkeletonLoaderGroup from './skeleton-loader-group.vue' +import type SkeletonLoaderGroup from './skeleton-loader-group.vue'; -export const skeletonLoaderGroupProps = buildProps({ - tag: { - type: String, - required: false, - default: 'div', - }, -} as const) - -export type SkeletonLoaderGroupProps = ExtractPropTypes< - typeof skeletonLoaderGroupProps -> +export interface SkeletonLoaderGroupProps { + tag?: string +} export type SkeletonLoaderGroupInstance = InstanceType< typeof SkeletonLoaderGroup -> +>; diff --git a/packages/components/skeleton-loader/src/skeleton-loader-group.vue b/packages/components/skeleton-loader/src/skeleton-loader-group.vue index 9d3ab95b..798a9854 100644 --- a/packages/components/skeleton-loader/src/skeleton-loader-group.vue +++ b/packages/components/skeleton-loader/src/skeleton-loader-group.vue @@ -6,17 +6,19 @@ aria-live="polite" role="status" > - + diff --git a/packages/components/skeleton-loader/src/skeleton-loader.ts b/packages/components/skeleton-loader/src/skeleton-loader.ts index 572404e8..0b8c9789 100644 --- a/packages/components/skeleton-loader/src/skeleton-loader.ts +++ b/packages/components/skeleton-loader/src/skeleton-loader.ts @@ -1,51 +1,29 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type SkeletonLoader from './skeleton-loader.vue' +import type SkeletonLoader from './skeleton-loader.vue'; -export const skeletonLoaderVariants = [ - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'jumbotron', - 'mega-jumbotron', - 'text-small', - 'text-medium', - 'text-large', - 'badge', - 'tag', - 'image', - 'graph', - 'video', -] as const +export enum PuikSkeletonLoaderVariants { + H1 = 'h1', + H2 = 'h2', + H3 = 'h3', + H4 = 'h4', + H5 = 'h5', + H6 = 'h6', + Jumbotron = 'jumbotron', + MegaJumbotron = 'mega-jumbotron', + TextSmall = 'text-small', + TextMedium = 'text-medium', + TextLarge = 'text-large', + Badge = 'badge', + Tag = 'tag', + Image = 'image', + Graph = 'graph', + Video = 'video', +} -export type PuikSkeletonLoader = (typeof skeletonLoaderVariants)[number] +export interface SkeletonLoaderProps { + variant?: `${PuikSkeletonLoaderVariants}` + tag?: string + width?: string + height?: string +} -export const skeletonLoaderProps = buildProps({ - variant: { - type: String as PropType, - required: false, - default: 'text-medium', - }, - tag: { - type: String, - required: false, - default: 'div', - }, - width: { - type: String, - required: false, - default: undefined, - }, - height: { - type: String, - required: false, - default: undefined, - }, -} as const) - -export type SkeletonLoaderProps = ExtractPropTypes - -export type SkeletonLoaderInstance = InstanceType +export type SkeletonLoaderInstance = InstanceType; diff --git a/packages/components/skeleton-loader/src/skeleton-loader.vue b/packages/components/skeleton-loader/src/skeleton-loader.vue index d77cab92..66303878 100644 --- a/packages/components/skeleton-loader/src/skeleton-loader.vue +++ b/packages/components/skeleton-loader/src/skeleton-loader.vue @@ -4,14 +4,25 @@ class="puik-skeleton-loader material-icons-round" :class="[`puik-skeleton-loader--${variant}`]" :style="{ width, height }" - > + /> + + diff --git a/packages/components/skeleton-loader/stories/skeleton-loader-group.stories.ts b/packages/components/skeleton-loader/stories/skeleton-loader-group.stories.ts index cf892528..393757b0 100644 --- a/packages/components/skeleton-loader/stories/skeleton-loader-group.stories.ts +++ b/packages/components/skeleton-loader/stories/skeleton-loader-group.stories.ts @@ -1,10 +1,8 @@ -import PuikSkeletonLoader from '../src/skeleton-loader.vue' -import PuikSkeletonLoaderGroup from '../src/skeleton-loader-group.vue' -import PuikCard from '../../card/src/card.vue' -import { skeletonLoaderVariants } from '../src/skeleton-loader' -import type { Meta, StoryFn, Args } from '@storybook/vue3' +import { PuikCard, PuikSkeletonLoaderVariants, PuikSkeletonLoader, PuikSkeletonLoaderGroup } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args } from '@storybook/vue3'; -const skeletonLoaderVariantsSummary = skeletonLoaderVariants.join('|') +const skeletonLoaderVariants = Object.values(PuikSkeletonLoaderVariants); +const skeletonLoaderVariantsSummary = skeletonLoaderVariants.join('|'); export default { title: 'Components/SkeletonLoader/SkeletonLoaderGroup', @@ -16,29 +14,29 @@ export default { 'Set the balise used as root element in the skeleton loader group', table: { defaultValue: { - summary: 'div', - }, - }, + summary: 'div' + } + } }, default: { control: 'none', description: - 'Set the skeleton loader group content, can be anything, but skeleton loader must be wrapper in it (for accessibility purpose)', - }, + 'Set the skeleton loader group content, can be anything, but skeleton loader must be wrapper in it (for accessibility purpose)' + } }, args: { - tag: 'div', - }, -} as Meta + tag: 'div' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikSkeletonLoader, PuikSkeletonLoaderGroup, - PuikCard, + PuikCard }, setup() { - return { args } + return { args }; }, template: ` @@ -48,8 +46,8 @@ const Template: StoryFn = (args: Args) => ({ - `, -}) + ` +}); export const Default = { render: Template, @@ -80,8 +78,8 @@ export const Default = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/skeleton-loader/stories/skeleton-loader.stories.ts b/packages/components/skeleton-loader/stories/skeleton-loader.stories.ts index c0ab3275..69c27057 100644 --- a/packages/components/skeleton-loader/stories/skeleton-loader.stories.ts +++ b/packages/components/skeleton-loader/stories/skeleton-loader.stories.ts @@ -1,9 +1,8 @@ -import { skeletonLoaderVariants } from '../src/skeleton-loader' -import PuikSkeletonLoader from './../src/skeleton-loader.vue' -import PuikSkeletonLoaderGroup from './../src/skeleton-loader-group.vue' -import type { Meta, StoryFn, StoryObj, Args } from '@storybook/vue3' +import { PuikSkeletonLoader, PuikSkeletonLoaderGroup, PuikSkeletonLoaderVariants } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, StoryObj, Args } from '@storybook/vue3'; -const skeletonLoaderVariantsSummary = skeletonLoaderVariants.join('|') +const skeletonLoaderVariants = Object.values(PuikSkeletonLoaderVariants); +const skeletonLoaderVariantsSummary = skeletonLoaderVariants.join('|'); export default { title: 'Components/SkeletonLoader/SkeletonLoader', @@ -15,61 +14,61 @@ export default { options: skeletonLoaderVariants, table: { type: { - summary: skeletonLoaderVariantsSummary, + summary: skeletonLoaderVariantsSummary }, defaultValue: { - summary: 'text-medium', - }, - }, + summary: 'text-medium' + } + } }, width: { control: 'text', description: 'Force the skeleton loader width', table: { defaultValue: { - summary: 'undefined', - }, - }, + summary: 'undefined' + } + } }, height: { control: 'text', description: 'Force the skeleton loader height', table: { defaultValue: { - summary: 'undefined', - }, - }, + summary: 'undefined' + } + } }, tag: { control: 'text', description: 'Set the balise used as root element in the skeleton loader', table: { defaultValue: { - summary: 'div', - }, - }, - }, + summary: 'div' + } + } + } }, args: { tag: 'div', variant: 'text-medium', width: '', - height: '', - }, -} as Meta + height: '' + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { PuikSkeletonLoader, - PuikSkeletonLoaderGroup, + PuikSkeletonLoaderGroup }, setup() { - return { args } + return { args }; }, template: ` - `, -}) + ` +}); export const Default = { render: Template, @@ -95,17 +94,17 @@ export const Default = {
      `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; function generateStory(variant: string): StoryObj { return { render: Template, args: { - variant, + variant }, parameters: { docs: { @@ -121,26 +120,26 @@ function generateStory(variant: string): StoryObj {
      `, - language: 'html', - }, - }, - }, - } + language: 'html' + } + } + } + }; } -export const h1: StoryObj = generateStory('h1') -export const h2: StoryObj = generateStory('h2') -export const h3: StoryObj = generateStory('h3') -export const h4: StoryObj = generateStory('h4') -export const h5: StoryObj = generateStory('h5') -export const h6: StoryObj = generateStory('h6') -export const Jumbotron: StoryObj = generateStory('jumbotron') -export const MegaJumbotron: StoryObj = generateStory('mega-jumbotron') -export const TextSmall: StoryObj = generateStory('text-small') -export const TextMedium: StoryObj = generateStory('text-medium') -export const TextLarge: StoryObj = generateStory('text-large') -export const Badge: StoryObj = generateStory('badge') -export const Tag: StoryObj = generateStory('tag') -export const Image: StoryObj = generateStory('image') -export const Graph: StoryObj = generateStory('graph') -export const Video: StoryObj = generateStory('video') +export const h1: StoryObj = generateStory('h1'); +export const h2: StoryObj = generateStory('h2'); +export const h3: StoryObj = generateStory('h3'); +export const h4: StoryObj = generateStory('h4'); +export const h5: StoryObj = generateStory('h5'); +export const h6: StoryObj = generateStory('h6'); +export const Jumbotron: StoryObj = generateStory('jumbotron'); +export const MegaJumbotron: StoryObj = generateStory('mega-jumbotron'); +export const TextSmall: StoryObj = generateStory('text-small'); +export const TextMedium: StoryObj = generateStory('text-medium'); +export const TextLarge: StoryObj = generateStory('text-large'); +export const Badge: StoryObj = generateStory('badge'); +export const Tag: StoryObj = generateStory('tag'); +export const Image: StoryObj = generateStory('image'); +export const Graph: StoryObj = generateStory('graph'); +export const Video: StoryObj = generateStory('video'); diff --git a/packages/components/skeleton-loader/style/css.ts b/packages/components/skeleton-loader/style/css.ts index 7768c46b..845dcace 100644 --- a/packages/components/skeleton-loader/style/css.ts +++ b/packages/components/skeleton-loader/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-skeleton-loader.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-skeleton-loader.css'; diff --git a/packages/components/skeleton-loader/style/index.ts b/packages/components/skeleton-loader/style/index.ts index cd30e8a9..f667b74c 100644 --- a/packages/components/skeleton-loader/style/index.ts +++ b/packages/components/skeleton-loader/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/skeleton-loader.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-skeleton-loader.scss'; diff --git a/packages/components/skeleton-loader/test/skeleton-loader-group.spec.ts b/packages/components/skeleton-loader/test/skeleton-loader-group.spec.ts index 25653265..5369ab30 100644 --- a/packages/components/skeleton-loader/test/skeleton-loader-group.spec.ts +++ b/packages/components/skeleton-loader/test/skeleton-loader-group.spec.ts @@ -1,30 +1,24 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikSkeletonLoader from '../src/skeleton-loader.vue' -import PuikSkeletonLoaderGroup from '../src/skeleton-loader-group.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSkeletonLoader, PuikSkeletonLoaderGroup } from '@prestashopcorp/puik-components'; describe('SkeletonLoaderGroup tests', () => { - let wrapper: VueWrapper + let wrapper: VueWrapper; const getSkeletonLoaderGroup = () => - wrapper.find('.puik-skeleton-loader-group') + wrapper.find('.puik-skeleton-loader-group'); const factory = ( template: string, - propsData: Record = {}, - options: MountingOptions = {} + options?: ComponentMountingOptions ) => { wrapper = mount({ template, - props: { - ...propsData, - }, ...options, components: { PuikSkeletonLoader, - PuikSkeletonLoaderGroup, - }, - }) - } + PuikSkeletonLoaderGroup + } + }); + }; it('should be a vue instance', () => { const template = ` @@ -32,20 +26,20 @@ describe('SkeletonLoaderGroup tests', () => { - ` - factory(template) - expect(wrapper).toBeTruthy() - }) + `; + factory(template); + expect(wrapper).toBeTruthy(); + }); it('should display the skeleton loader group with tag span', () => { - const tag = 'span' + const tag = 'span'; const template = ` - ` - factory(template) - expect(getSkeletonLoaderGroup().element.tagName).toBe(tag.toUpperCase()) - }) -}) + `; + factory(template); + expect(getSkeletonLoaderGroup().element.tagName).toBe(tag.toUpperCase()); + }); +}); diff --git a/packages/components/skeleton-loader/test/skeleton-loader.spec.ts b/packages/components/skeleton-loader/test/skeleton-loader.spec.ts index 19726680..1e55bf9e 100644 --- a/packages/components/skeleton-loader/test/skeleton-loader.spec.ts +++ b/packages/components/skeleton-loader/test/skeleton-loader.spec.ts @@ -1,46 +1,43 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikSkeletonLoader from '../src/skeleton-loader.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSkeletonLoader, SkeletonLoaderProps } from '@prestashopcorp/puik-components'; describe('SkeletonLoader tests', () => { - let wrapper: VueWrapper - const getSkeletonLoader = () => wrapper.find('.puik-skeleton-loader') + let wrapper: VueWrapper; + const getSkeletonLoader = () => wrapper.find('.puik-skeleton-loader'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: SkeletonLoaderProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikSkeletonLoader, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should display the skeleton loader with variant h1', () => { - const variant = 'h1' - factory({ variant }) + const variant = 'h1'; + factory({ variant }); expect(getSkeletonLoader().classes()).toContain( `puik-skeleton-loader--${variant}` - ) - }) + ); + }); it('should display with specific height', () => { - const height = '100px' - factory({ height }) - expect(getSkeletonLoader().element.style.height).toBe(height) - }) + const height = '100px'; + factory({ height }); + expect(getSkeletonLoader().element.style.height).toBe(height); + }); it('should display with specific width', () => { - const width = '100px' - factory({ width }) - expect(getSkeletonLoader().element.style.width).toBe(width) - }) + const width = '100px'; + factory({ width }); + expect(getSkeletonLoader().element.style.width).toBe(width); + }); it('should display as span', () => { - const tag = 'span' - factory({ tag }) - expect(getSkeletonLoader().element.tagName).toBe(tag.toUpperCase()) - }) -}) + const tag = 'span'; + factory({ tag }); + expect(getSkeletonLoader().element.tagName).toBe(tag.toUpperCase()); + }); +}); diff --git a/packages/components/snackbar-provider/style/css.ts b/packages/components/snackbar-provider/style/css.ts new file mode 100644 index 00000000..844c33ae --- /dev/null +++ b/packages/components/snackbar-provider/style/css.ts @@ -0,0 +1,2 @@ +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-snackbar-provider.css'; diff --git a/packages/components/snackbar-provider/style/index.ts b/packages/components/snackbar-provider/style/index.ts new file mode 100644 index 00000000..b42351da --- /dev/null +++ b/packages/components/snackbar-provider/style/index.ts @@ -0,0 +1,2 @@ +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-snackbar-provider.scss'; diff --git a/packages/components/snackbar/index.ts b/packages/components/snackbar/index.ts index aeb4e87c..b3d22709 100644 --- a/packages/components/snackbar/index.ts +++ b/packages/components/snackbar/index.ts @@ -1,8 +1,9 @@ -import { withInstallFunction } from '@puik/utils' +import Snackbar from './src/snackbar.vue'; +import SnackbarProvider from './src/snackbar-provider.vue'; -import Notify from './src/notify' +export const PuikSnackbar = Snackbar; +export const PuikSnackbarProvider = SnackbarProvider; +export default PuikSnackbar; -export const PuikSnackbar = withInstallFunction(Notify, '$notify') -export default PuikSnackbar - -export * from './src/snackbar' +export * from './src/snackbar'; +export * from './src/snackbar-provider'; diff --git a/packages/components/snackbar/src/notify.ts b/packages/components/snackbar/src/notify.ts deleted file mode 100644 index 99182381..00000000 --- a/packages/components/snackbar/src/notify.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { - createVNode, - render, - type AppContext, - type VNode, - ref, - type Ref, -} from 'vue' -import Snackbar from './snackbar.vue' -import type { PuikSnackbarOptions } from './snackbar' - -const currentNotification: Ref = ref(null) -const PUIK_SNACKBAR_ID = 'puik-snackbar-id' - -const notify = ( - options: PuikSnackbarOptions, - context: AppContext | null = null -) => { - const customOnClose = options.onClose - const offset = options.offset || 32 - - const documentBody: HTMLElement | null = document.body - - const props = { - ...options, - offset, - id: PUIK_SNACKBAR_ID, - onClose: () => { - currentNotification.value = null - return customOnClose - }, - } - - const newNotification = createVNode(Snackbar, props) - newNotification.appContext = context ?? notify._context - - const container = document.createElement('div') - - newNotification.props!.onDestroy = () => render(null, container) - render(newNotification, container) - documentBody.appendChild(container.firstElementChild!) - - if (currentNotification.value) { - const curNot = document.getElementById(PUIK_SNACKBAR_ID) - curNot?.remove() - } - - currentNotification.value = newNotification -} - -notify._context = null - -export default notify diff --git a/packages/components/snackbar/src/snackbar-provider.ts b/packages/components/snackbar/src/snackbar-provider.ts new file mode 100644 index 00000000..afeaf1e5 --- /dev/null +++ b/packages/components/snackbar/src/snackbar-provider.ts @@ -0,0 +1,29 @@ +import type SnackbarProvider from './snackbar-provider.vue'; + +export enum PuikSnackbarSwipeDirections { + Right = 'right', + Left = 'left', + Up = 'up', + Down = 'down', +} + +export enum PuikSnackbarPositionsX { + Left = 'left', + Center = 'center', + Right = 'right', +} +export enum PuikSnackbarPositionsY { + Up = 'up', + Down = 'down', +} + +export interface SnackbarProviderProps { + label?: string + duration?: number + swipeDirection?: `${PuikSnackbarSwipeDirections}` + swipeThreshold?: number + positionX?: `${PuikSnackbarPositionsX}` + positionY?: `${PuikSnackbarPositionsY}` +} + +export type SnackbarProviderInstance = InstanceType; diff --git a/packages/components/snackbar/src/snackbar-provider.vue b/packages/components/snackbar/src/snackbar-provider.vue new file mode 100644 index 00000000..07299a27 --- /dev/null +++ b/packages/components/snackbar/src/snackbar-provider.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/components/snackbar/src/snackbar.ts b/packages/components/snackbar/src/snackbar.ts index 9b9bccb4..81fae441 100644 --- a/packages/components/snackbar/src/snackbar.ts +++ b/packages/components/snackbar/src/snackbar.ts @@ -1,72 +1,29 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Snackbar from './snackbar.vue' +import type Snackbar from './snackbar.vue'; -export const snackbarVariants = ['default', 'danger', 'success'] as const -export type PuikSnackbarVariant = (typeof snackbarVariants)[number] - -export interface SnackbarAction { - label: string - callback: () => void +export enum PuikSnackbarVariants { + Default = 'default', + Danger = 'danger', + Success = 'success', } -export interface PuikSnackbarOptions { - text: string - variant?: PuikSnackbarVariant - action?: SnackbarAction +export enum PuikSnackbarSwipeAnimations { + Right = 'slide-right', + Left = 'slide-left', + Up = 'slide-up', + Down = 'slide-down', +} +export interface SnackbarProps { + open?: boolean + title?: string + description: string duration?: number - offset?: number + variant?: `${PuikSnackbarVariants}` + swipeAnimation?: `${PuikSnackbarSwipeAnimations}` hasCloseButton?: boolean - onClose?: () => void -} - -export const snackbarProps = buildProps({ - text: { - type: String, - required: false, - default: undefined, - }, - id: { - type: String, - required: false, - }, - action: { - type: Object as PropType, - required: false, - default: undefined, - }, - variant: { - type: String as PropType, - required: false, - default: 'default', - }, - duration: { - type: Number, - required: false, - default: 3000, - }, - offset: { - type: Number, - required: false, - default: 0, - }, - hasCloseButton: { - type: Boolean, - required: false, - default: true, - }, - onClose: { - type: Function, - required: false, - default: undefined, - }, -} as const) - -export const snackbarEmits = { - destroy: () => true, } -export type SnackbarProps = ExtractPropTypes -export type SnackbarEmits = typeof snackbarEmits +export type SnackbarEmits = { + 'update:open': [value: boolean] +}; -export type SnackbarInstance = InstanceType +export type SnackbarInstance = InstanceType; diff --git a/packages/components/snackbar/src/snackbar.vue b/packages/components/snackbar/src/snackbar.vue index 582ea41b..2040be08 100644 --- a/packages/components/snackbar/src/snackbar.vue +++ b/packages/components/snackbar/src/snackbar.vue @@ -1,89 +1,61 @@ + + diff --git a/packages/components/snackbar/stories/snackbar-provider.stories.ts b/packages/components/snackbar/stories/snackbar-provider.stories.ts new file mode 100644 index 00000000..3dbd17ab --- /dev/null +++ b/packages/components/snackbar/stories/snackbar-provider.stories.ts @@ -0,0 +1,210 @@ +import { ref } from 'vue'; +import { PuikSnackbarPositionsX, PuikSnackbarPositionsY, PuikSnackbarSwipeDirections, PuikSnackbarProvider, PuikSnackbar, PuikButton } from '@prestashopcorp/puik-components'; +import { Meta, StoryFn, Args } from '@storybook/vue3'; + +const snackbarSwipeDirectionsVariants = Object.values(PuikSnackbarSwipeDirections); +const snackbarSwipeDirectionsVariantsSummary = snackbarSwipeDirectionsVariants.join('|'); + +const snackbarPositionsX = Object.values(PuikSnackbarPositionsX); +const snackbarPositionsXSummary = snackbarPositionsX.join('|'); + +const snackbarPositionsY = Object.values(PuikSnackbarPositionsY); +const snackbarPositionsYSummary = snackbarPositionsY.join('|'); + +export default { + title: 'Components/Snackbar/SnackbarProvider', + component: PuikSnackbarProvider, + argTypes: { + label: { + control: 'text', + description: 'A label located on each toast. Used to help screen reader users associate the interruption with a toast.', + table: { + type: { + summary: 'string' + }, + defaultValue: { + summary: 'Notification' + } + } + }, + duration: { + description: 'Time in milliseconds that snackbars should remain visible for.', + control: 'number', + table: { + type: { + summary: 'number' + }, + defaultValue: { + summary: 5000 + } + } + }, + swipeDirection: { + control: 'select', + description: 'Set the swipe direction on mobile (to close the snackbar dialog)', + options: snackbarSwipeDirectionsVariants, + table: { + type: { + summary: snackbarSwipeDirectionsVariantsSummary, + detail: ` +import { PuikSnackbarSwipeDirections } from '@prestashopcorp/puik-components'; + +enum PuikSnackbarSwipeDirections { + Right = 'right', + Left = 'left', + Up = 'up', + Down = 'down', +} + ` + }, + defaultValue: { + summary: 'right' + } + } + }, + swipeThreshold: { + description: 'Distance in pixels that the swipe must pass before a close is triggered.', + control: 'number', + table: { + type: { + summary: 'number' + }, + defaultValue: { + summary: 50 + } + } + }, + positionX: { + control: 'select', + description: 'Set horizontal axis position of the snackbars viewport', + options: snackbarPositionsX, + table: { + type: { + summary: snackbarPositionsXSummary, + detail: ` +import { PuikSnackbarPositionsX } from '@prestashopcorp/puik-components'; + +enum PuikSnackbarPositionsX { + Left = 'left', + Center = 'center', + Right = 'right', +} + ` + }, + defaultValue: { + summary: 'center' + } + } + }, + positionY: { + control: 'select', + description: 'Set vertical axis position of the snackbars viewport', + options: snackbarPositionsY, + table: { + type: { + summary: snackbarPositionsYSummary, + detail: ` +import { PuikSnackbarPositionsY } from '@prestashopcorp/puik-components'; + +enum PuikSnackbarPositionsY { + Up = 'up', + Down = 'down', +} + ` + }, + defaultValue: { + summary: 'down' + } + } + } + }, + args: { + label: 'Notification', + duration: 5000, + swipeDirection: 'right', + swipeThreshold: 50, + positionX: 'center', + positionY: 'down' + } +} as Meta; + +const Template: StoryFn = (args: Args) => ({ + components: { + PuikSnackbarProvider, + PuikSnackbar, + PuikButton + }, + setup() { + const snackbarArgs = ref({ + open: false, + title: 'Snackbar Title', + description: 'Snackbar Description', + variant: 'default', + duration: 5000, + swipeDirection: 'right', + hasCloseButton: true + }); + return { snackbarArgs, args }; + }, + template: ` + + + Display snackbar + + + + + + +` +}); + +export const Default = { + render: Template, + args: {}, + parameters: { + docs: { + source: { + code: ` + + + + Display snackbar + + + + + + + + + `, + language: 'html' + } + } + } +}; diff --git a/packages/components/snackbar/stories/snackbar-use.stories.mdx b/packages/components/snackbar/stories/snackbar-use.stories.mdx deleted file mode 100644 index c98c2b4b..00000000 --- a/packages/components/snackbar/stories/snackbar-use.stories.mdx +++ /dev/null @@ -1,60 +0,0 @@ -import { Meta } from '@storybook/addon-docs' - - - -# Using snackbar component - -## Display snackbar - -To display a snackbar, call the function `PuikSnackbar`: - -```js -import { PuikSnackbar } from '@prestashopcorp/puik' -import { PuikSnackbarOptions } from '@prestashopcorp/puik/components/snackbar/src/snackbar' - -PuikSnackbar(args as PuikSnackbarOptions) - -interface PuikSnackbarOptions { - text: string - variant?: PuikSnackbarVariant - action?: SnackbarAction - duration?: number - offset?: number - hasCloseButton?: boolean - onClose?: () => void -} -``` - -## Usage - -```html - - - -``` - -```html - - - -``` diff --git a/packages/components/snackbar/stories/snackbar.stories.ts b/packages/components/snackbar/stories/snackbar.stories.ts index 8fbc1f1f..b58f99a1 100644 --- a/packages/components/snackbar/stories/snackbar.stories.ts +++ b/packages/components/snackbar/stories/snackbar.stories.ts @@ -1,364 +1,186 @@ -import { action } from '@storybook/addon-actions' -import { PuikSnackbar } from '..' -import { snackbarVariants, type PuikSnackbarOptions } from '../src/snackbar' -import { PuikButton } from '../../button/index' -import type { Meta, StoryFn, StoryObj, Args } from '@storybook/vue3' +import { PuikSnackbarVariants, PuikSnackbarSwipeAnimations, PuikSnackbarProvider, PuikSnackbar, PuikButton } from '@prestashopcorp/puik-components'; +import { Meta, StoryFn, Args } from '@storybook/vue3'; +import { ref } from 'vue'; -const snackbarVariantSummary = snackbarVariants.join('|') +const snackbarVariants = Object.values(PuikSnackbarVariants); +const snackbarVariantsSummary = snackbarVariants.join('|'); + +const snackbarSwipeAnimations = Object.values(PuikSnackbarSwipeAnimations); +const snackbarSwipeAnimationsSummary = snackbarSwipeAnimations.join('|'); export default { title: 'Components/Snackbar', - component: PuikSnackbar, + components: PuikSnackbar, argTypes: { - text: { - description: 'The text of the snackbar', + open: { + control: 'boolean', + description: 'The controlled open state of the snackbar. Can be bind as v-model:open.', table: { - type: { - summary: 'string', - }, defaultValue: { - summary: 'undefined', - }, - }, + summary: false + } + } }, - variant: { - description: 'The color variant of the snackbar', - control: 'select', - options: snackbarVariants, - table: { - type: { - summary: snackbarVariantSummary, - }, - defaultValue: { - summary: 'undefined', - }, - }, + title: { + control: 'text', + description: 'Set the snackbar title' }, - action: { - description: 'The action label of the snackbar', + description: { control: 'text', - table: { - type: { - summary: 'string', - }, - defaultValue: { - summary: 'undefined', - }, - }, + description: 'Set the snackbar description' }, duration: { - description: - 'Duration in ms before the snackbar closes. Can be disabled if set to 0', + description: 'Time in milliseconds that snackbar should remain visible for. Overrides value given to PuikSnackbarProvider component.', control: 'number', table: { type: { - summary: 'number', + summary: 'number' }, defaultValue: { - summary: 3000, - }, - }, + summary: 5000 + } + } }, - offset: { - description: - 'Offset from the bottom edge of the screen. Every Snackbar must have the same offset', - control: 'number', + variant: { + control: 'select', + description: 'Set the color variant of the snackbar', + options: snackbarVariants, table: { type: { - summary: 'number', + summary: snackbarVariantsSummary, + detail: ` +import { PuikSnackbarVariants } from '@prestashopcorp/puik-components'; + +enum PuikSnackbarVariants { + Default = 'default', + Danger = 'danger', + Success = 'success', +} + ` }, defaultValue: { - summary: 0, - }, - }, + summary: 'default' + } + } }, - isClosable: { - description: 'Display a close button or not', - control: 'boolean', + swipeAnimation: { + control: 'select', + description: 'Set the swipe animation (to close the snackbar dialog)', + options: snackbarSwipeAnimations, table: { type: { - summary: 'boolean', + summary: snackbarSwipeAnimationsSummary, + detail: ` +import { PuikSnackbarSwipeAnimations } from '@prestashopcorp/puik-components'; + +enum PuikSnackbarSwipeAnimations { + Right = 'slide-right', + Left = 'slide-left', + Up = 'slide-up', + Down = 'slide-down', +} + ` }, defaultValue: { - summary: false, - }, - }, + summary: 'slide-right' + } + } }, - onClose: { - description: 'Set the function to call when the snackbar has been closed', + hasCloseButton: { + control: 'boolean', + description: 'Add a close button', table: { - type: { - summary: '() => void', - }, defaultValue: { - summary: 'undefined', - }, - }, - }, + summary: false + } + } + } }, - args: {}, -} as Meta + args: { + open: false, + title: 'Snackbar Title', + description: 'Snackbar Description', + variant: 'default', + duration: 5000, + swipeAnimation: 'slide-right', + hasCloseButton: true + } +} as Meta; const Template: StoryFn = (args: Args) => ({ components: { - PuikButton, + PuikSnackbarProvider, + PuikSnackbar, + PuikButton }, setup() { - const open = () => PuikSnackbar(args as PuikSnackbarOptions) - return { args, open } + const snackbarProviderArgs = ref({ + label: 'Notification', + duration: 3000, + swipeDirection: 'right', + swipeThreshold: 50, + positionX: 'center', + positionY: 'down' + + }); + return { snackbarProviderArgs, args }; }, - template: `Display Snackbar`, -}) + template: ` + + + Display snackbar + + + + + + + ` +}); export const Default = { render: Template, - args: { - text: 'New category added.', - }, -} - -const HasNoCloseButtonTemplate: StoryFn = (args: Args) => ({ - components: { - PuikButton, - }, - setup() { - const open = () => PuikSnackbar(args as PuikSnackbarOptions) - return { args, open } - }, - template: `Display Snackbar`, -}) - -export const HasNoCloseButton = { - render: HasNoCloseButtonTemplate, - args: { - text: 'New category added.', - hasCloseButton: false, - }, -} - -const WithoutActionTemplate: StoryFn = () => ({ - components: { - PuikButton, - }, - setup() { - const displaySnackbar = () => - PuikSnackbar({ - text: 'New category added.', - }) - const displayErrorSnackbar = () => - PuikSnackbar({ - text: 'Unable to update settings.', - variant: 'danger', - }) - const displaySuccessSnackbar = () => - PuikSnackbar({ - text: 'Settings updated successfully.', - variant: 'success', - }) - return { displaySnackbar, displayErrorSnackbar, displaySuccessSnackbar } - }, - template: ` -
      - Display Snackbar - Display Error Snackbar - Display Success Snackbar -
      - `, -}) - -export const WithoutAction: StoryObj = { - render: WithoutActionTemplate, - parameters: { - docs: { - source: { - code: ` - - - - - - - -
      - New category added. - -
      - -
      - Unable to update settings. - -
      - -
      - Settings updated successfully. - -
      - `, - language: 'html', - }, - }, - }, -} - -const WithActionTemplate: StoryFn = () => ({ - components: { - PuikButton, - }, - setup() { - const displaySnackbar = () => - PuikSnackbar({ - text: 'New attribute โ€œSizeโ€ added.', - action: { - label: 'Cancel', - callback: action('Default snackbar action callback function'), - }, - }) - const displayErrorSnackbar = () => - PuikSnackbar({ - text: 'Unable to update settings.', - variant: 'danger', - action: { - label: 'Cancel', - callback: action('Error snackbar action callback function'), - }, - }) - const displaySuccessSnackbar = () => - PuikSnackbar({ - text: 'Settings updated successfully.', - variant: 'success', - action: { - label: 'Cancel', - callback: action('Success snackbar action callback function'), - }, - }) - return { displaySnackbar, displayErrorSnackbar, displaySuccessSnackbar } - }, - template: ` -
      - Display Snackbar - Display Error Snackbar - Display Success Snackbar -
      - `, -}) + args: {}, -export const WithAction: StoryObj = { - render: WithActionTemplate, parameters: { docs: { source: { code: ` - - - + + + Display snackbar + + + + + + - -
      - New category added. - - -
      - -
      - Unable to update settings. - - -
      - -
      - Settings updated successfully. - - -
      `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/snackbar/style/css.ts b/packages/components/snackbar/style/css.ts index 5812415d..993c731a 100644 --- a/packages/components/snackbar/style/css.ts +++ b/packages/components/snackbar/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-snackbar.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-snackbar.css'; diff --git a/packages/components/snackbar/style/index.ts b/packages/components/snackbar/style/index.ts index ba639bc6..afb3326e 100644 --- a/packages/components/snackbar/style/index.ts +++ b/packages/components/snackbar/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/snackbar.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-snackbar.scss'; diff --git a/packages/components/snackbar/test/snackbar-provider.spec.ts b/packages/components/snackbar/test/snackbar-provider.spec.ts new file mode 100644 index 00000000..052ad6a8 --- /dev/null +++ b/packages/components/snackbar/test/snackbar-provider.spec.ts @@ -0,0 +1,58 @@ +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSnackbarPositionsX, PuikSnackbarPositionsY, PuikSnackbarProvider, PuikSnackbarSwipeDirections, SnackbarProviderProps } from '@prestashopcorp/puik-components'; + +describe('SnackbarProvider tests', () => { + let wrapper: VueWrapper; + + const factory = ( + props?: SnackbarProviderProps, + options?: ComponentMountingOptions + ) => { + wrapper = mount(PuikSnackbarProvider, { + props, + ...options + }); + }; + + it('should be a vue instance', () => { + factory(); + expect(wrapper).toBeTruthy(); + }); + + it('should have correct duration prop', () => { + factory({ duration: 3000 }); + expect(wrapper.props().duration).toBe(3000); + }); + + it('should have correct label prop', () => { + factory({ label: 'Test Notification' }); + expect(wrapper.props().label).toBe('Test Notification'); + }); + + it('should have correct swipeDirection prop', () => { + factory({ swipeDirection: PuikSnackbarSwipeDirections.Left }); + expect(wrapper.props().swipeDirection).toBe(PuikSnackbarSwipeDirections.Left); + }); + + it('should have correct swipeThreshold prop', () => { + factory({ swipeThreshold: 100 }); + expect(wrapper.props().swipeThreshold).toBe(100); + }); + + it('should have correct positionX prop', () => { + factory({ positionX: PuikSnackbarPositionsX.Left }); + expect(wrapper.props().positionX).toBe(PuikSnackbarPositionsX.Left); + }); + + it('should have correct positionY prop', () => { + factory({ positionY: PuikSnackbarPositionsY.Up }); + expect(wrapper.props().positionY).toBe(PuikSnackbarPositionsY.Up); + }); + + it('should have correct classes for positionX and positionY', () => { + factory({ positionX: PuikSnackbarPositionsX.Left, positionY: PuikSnackbarPositionsY.Up }); + expect(document.body.querySelector('.puik-snackbar-viewport--left')).toBeTruthy(); + expect(document.body.querySelector('.puik-snackbar-viewport--up')).toBeTruthy(); + }); +}); diff --git a/packages/components/snackbar/test/snackbar.spec.ts b/packages/components/snackbar/test/snackbar.spec.ts index f54f7a9a..dbb568de 100644 --- a/packages/components/snackbar/test/snackbar.spec.ts +++ b/packages/components/snackbar/test/snackbar.spec.ts @@ -1,160 +1,97 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect, vi } from 'vitest' -import { faker } from '@faker-js/faker' -import PuikSnackbar from '../src/snackbar.vue' -import type { PuikSnackbarOptions } from '../src/snackbar' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' -describe('Snackbar tests', () => { - let wrapper: VueWrapper - - const findText = () => wrapper.find('.puik-snackbar__text') - const findAction = () => wrapper.find('.puik-snackbar__action') - const findSnackbar = () => wrapper.find('.puik-snackbar') - const findCloseButton = () => wrapper.find('.puik-snackbar__close-button') - - const factory = ( - propsData: PuikSnackbarOptions, - options: MountingOptions = {} - ) => { - wrapper = mount(PuikSnackbar, { - props: { - ...propsData, - }, - attachTo: document.body, - ...options, - }) - } +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSnackbar, PuikSnackbarProvider } from '@prestashopcorp/puik-components'; + +let wrapper: VueWrapper; +const factory = (template: string, options: ComponentMountingOptions = {}) => { + wrapper = mount({ + components: { + PuikSnackbarProvider, + PuikSnackbar + }, + template, + ...options + }); +}; +describe('Snackbar tests', () => { it('should be a vue instance', () => { - const text = faker.lorem.sentence() - factory({ text }) - expect(wrapper).toBeTruthy() - }) - - it('should be a default snackbar without action', () => { - const text = faker.lorem.sentence() - factory({ text }) - expect(findText().text()).toEqual(text) - expect(findSnackbar().classes()).toContain('puik-snackbar--default') - expect(findAction().exists()).toBeFalsy() - }) - - it('should be a snackbar without close button', () => { - const text = faker.lorem.sentence() - factory({ text, hasCloseButton: false }) - expect(findCloseButton().exists()).toBeFalsy() - }) - - it('should be a default snackbar with action', async () => { - const text = faker.lorem.sentence() - const label = faker.lorem.word() - const callback = vi.fn() - factory({ - text, - action: { - label, - callback, - }, - }) - expect(findText().text()).toEqual(text) - expect(findAction().exists()).toBeTruthy() - expect(findSnackbar().classes()).toContain('puik-snackbar--default') - expect(findAction().text()).toEqual(label) - await findAction().trigger('click') - expect(callback).toBeCalled() - }) - - it('should be a dangerous snackbar without action', () => { - const text = faker.lorem.sentence() - factory({ text, variant: 'danger' }) - expect(findText().text()).toEqual(text) - expect(findSnackbar().classes()).toContain('puik-snackbar--danger') - expect(findAction().exists()).toBeFalsy() - }) - - it('should be a success snackbar without action', () => { - const text = faker.lorem.sentence() - factory({ text, variant: 'success' }) - expect(findText().text()).toEqual(text) - expect(findSnackbar().classes()).toContain('puik-snackbar--success') - expect(findAction().exists()).toBeFalsy() - }) - - it('should be a dangerous snackbar with action', async () => { - const text = faker.lorem.sentence() - const label = faker.lorem.word() - const callback = vi.fn() - factory({ - text, - action: { - label, - callback, - }, - variant: 'danger', - }) - expect(findAction().exists()).toBeTruthy() - expect(findText().text()).toEqual(text) - expect(findSnackbar().classes()).toContain('puik-snackbar--danger') - expect(findAction().text()).toEqual(label) - await findAction().trigger('click') - expect(callback).toBeCalled() - }) - - it('should be a success snackbar with action', async () => { - const text = faker.lorem.sentence() - const label = faker.lorem.word() - const callback = vi.fn() - factory({ - text, - action: { - label, - callback, - }, - variant: 'success', - }) - expect(findAction().exists()).toBeTruthy() - expect(findText().text()).toEqual(text) - expect(findSnackbar().classes()).toContain('puik-snackbar--success') - expect(findAction().text()).toEqual(label) - await findAction().trigger('click') - expect(callback).toBeCalled() - }) - - it('should close the snackbar when clicking on the close button', async () => { - const text = faker.lorem.sentence() - await factory({ text }) - expect(findSnackbar().isVisible()).toBeTruthy() - await findCloseButton().trigger('click') - expect(findSnackbar().isVisible()).toBeFalsy() - }) - - it('should dismiss the snackbar after 3 seconds', async () => { - vi.useFakeTimers() - const text = faker.lorem.sentence() - await factory({ text, duration: 3000 }) - expect(findSnackbar().isVisible()).toBeTruthy() - await vi.advanceTimersByTime(3000) - expect(findSnackbar().isVisible()).toBeFalsy() - await vi.clearAllTimers() - }) - - it('should reset the snack bar timer on mouse hover', async () => { - vi.useFakeTimers() - const text = faker.lorem.sentence() - - await factory({ text, duration: 3000 }) - expect(findSnackbar().isVisible()).toBeTruthy() - - await vi.advanceTimersByTime(2000) - await findSnackbar().trigger('mouseenter') - await findSnackbar().trigger('mouseleave') - - await vi.advanceTimersByTime(1000) - expect(findSnackbar().isVisible()).toBeTruthy() - - await vi.advanceTimersByTime(2000) - expect(findSnackbar().isVisible()).toBeFalsy() - - await vi.clearAllTimers() - }) -}) + const template = ` + + + + + `; + factory(template); + expect(wrapper).toBeTruthy(); + }); + + it('should have correct open prop', () => { + const template = ` + + + + + `; + factory(template); + expect(wrapper.findComponent({ name: 'PuikSnackbar' }).props().open).toBe(false); + }); + + it('should have correct title prop', () => { + const template = ` + + + + + `; + factory(template); + expect(wrapper.findComponent({ name: 'PuikSnackbar' }).props().title).toBe('text'); + }); + + it('should have correct description prop', () => { + const template = ` + + + + + `; + factory(template); + expect(wrapper.findComponent({ name: 'PuikSnackbar' }).props().description).toBe('description'); + }); + + it('should have correct hasCloseButton prop', () => { + const template = ` + + + + + `; + factory(template); + expect(wrapper.findComponent({ name: 'PuikSnackbar' }).props().hasCloseButton).toBe(false); + }); +}); diff --git a/packages/components/spinner-loader/index.ts b/packages/components/spinner-loader/index.ts index 603c800e..c9894261 100644 --- a/packages/components/spinner-loader/index.ts +++ b/packages/components/spinner-loader/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import SpinnerLoader from './src/spinner-loader.vue'; -import SpinnerLoader from './src/spinner-loader.vue' +export const PuikSpinnerLoader = SpinnerLoader; +export default PuikSpinnerLoader; -export const PuikSpinnerLoader = withInstall(SpinnerLoader) -export default PuikSpinnerLoader - -export * from './src/spinner-loader' +export * from './src/spinner-loader'; diff --git a/packages/components/spinner-loader/src/spinner-loader.ts b/packages/components/spinner-loader/src/spinner-loader.ts index d2ea4486..163fa383 100644 --- a/packages/components/spinner-loader/src/spinner-loader.ts +++ b/packages/components/spinner-loader/src/spinner-loader.ts @@ -1,45 +1,27 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type SpinnerLoader from './spinner-loader.vue' +import type SpinnerLoader from './spinner-loader.vue'; -export const puikSpinnerLoaderSizes = ['sm', 'md', 'lg'] as const -export type PuikSpinnerSizeType = (typeof puikSpinnerLoaderSizes)[number] +export enum PuikSpinnerLoaderSizes { + Small = 'sm', + Medium = 'md', + Large = 'lg', +} -export const puikSpinnerLoaderColors = ['primary', 'reverse'] as const -export type PuikspinnerColorsType = (typeof puikSpinnerLoaderColors)[number] +export enum PuikSpinnerLoaderColors { + Primary = 'primary', + Reverse = 'reverse', +} -export const puikSpinnerLoaderPositions = ['bottom', 'right'] as const -export type PuikspinnerPositionType = - (typeof puikSpinnerLoaderPositions)[number] +export enum PuikSpinnerLoaderPositions { + Bottom = 'bottom', + Right = 'right', +} -export const spinnerLoaderProps = buildProps({ - size: { - type: String as PropType, - required: false, - default: 'md', - }, - color: { - type: String as PropType, - required: false, - default: 'primary', - }, - label: { - type: String, - required: false, - default: undefined, - }, - position: { - type: String as PropType, - required: false, - default: 'bottom', - }, - dataTest: { - type: String, - required: false, - default: 'spinner-loader', - }, -} as const) +export interface SpinnerLoaderProps { + size?: `${PuikSpinnerLoaderSizes}` + color?: `${PuikSpinnerLoaderColors}` + position?: `${PuikSpinnerLoaderPositions}` + label?: string + dataTest?: string +} -export type SpinnerLoaderProps = ExtractPropTypes - -export type SpinnerLoaderInstance = InstanceType +export type SpinnerLoaderInstance = InstanceType; diff --git a/packages/components/spinner-loader/src/spinner-loader.vue b/packages/components/spinner-loader/src/spinner-loader.vue index 89b649d3..ca2b7409 100644 --- a/packages/components/spinner-loader/src/spinner-loader.vue +++ b/packages/components/spinner-loader/src/spinner-loader.vue @@ -14,19 +14,37 @@ class="puik-spinner-loader__spinner" aria-hidden="true" data-chromatic="ignore" - > - + /> + {{ label }} + + diff --git a/packages/components/spinner-loader/stories/spinner-loader.stories.ts b/packages/components/spinner-loader/stories/spinner-loader.stories.ts index 2578ff76..b05eb5fe 100644 --- a/packages/components/spinner-loader/stories/spinner-loader.stories.ts +++ b/packages/components/spinner-loader/stories/spinner-loader.stories.ts @@ -1,14 +1,12 @@ -import PuikSpinnerLoader from './../src/spinner-loader.vue' -import { - puikSpinnerLoaderSizes, - puikSpinnerLoaderColors, - puikSpinnerLoaderPositions, -} from './../src/spinner-loader' -import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3' +import { PuikSpinnerLoader, PuikSpinnerLoaderColors, PuikSpinnerLoaderPositions, PuikSpinnerLoaderSizes } from '@prestashopcorp/puik-components'; +import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'; -const sizesSummary = puikSpinnerLoaderSizes.join('|') -const colorsSummary = puikSpinnerLoaderColors.join('|') -const positionSummary = puikSpinnerLoaderPositions.join('|') +const puikSpinnerLoaderSizes = Object.values(PuikSpinnerLoaderSizes); +const sizesSummary = puikSpinnerLoaderSizes.join('|'); +const puikSpinnerLoaderColors = Object.values(PuikSpinnerLoaderColors); +const colorsSummary = puikSpinnerLoaderColors.join('|'); +const puikSpinnerLoaderPositions = Object.values(PuikSpinnerLoaderPositions); +const positionSummary = puikSpinnerLoaderPositions.join('|'); export default { title: 'Components/SpinnerLoader', @@ -20,12 +18,12 @@ export default { options: puikSpinnerLoaderSizes, table: { type: { - summary: sizesSummary, + summary: sizesSummary }, defaultValue: { - summary: 'md', - }, - }, + summary: 'md' + } + } }, color: { control: 'select', @@ -33,21 +31,21 @@ export default { options: puikSpinnerLoaderColors, table: { type: { - summary: colorsSummary, + summary: colorsSummary }, defaultValue: { - summary: 'primary', - }, - }, + summary: 'primary' + } + } }, label: { control: 'text', description: 'Set label below the spinner', table: { defaultValue: { - summary: 'undefined', - }, - }, + summary: 'undefined' + } + } }, position: { control: 'select', @@ -55,37 +53,37 @@ export default { options: puikSpinnerLoaderPositions, table: { type: { - summary: positionSummary, + summary: positionSummary }, defaultValue: { - summary: 'bottom', - }, - }, + summary: 'bottom' + } + } }, dataTest: { control: 'text', - description: 'Set the data-test attribute on the spinner loader', - }, + description: 'Set the data-test attribute on the spinner loader' + } }, args: { size: 'md', label: '', - color: 'primary', - }, -} as Meta + color: 'primary' + } +} as Meta; const Template: StoryFn = (args: Args, storyContext) => ({ components: { - PuikSpinnerLoader, + PuikSpinnerLoader }, setup() { - const color = args.color ?? storyContext?.args?.color ?? '' - const isDark = color !== 'primary' ? 'bg-primary-800' : '' + const color = args.color ?? storyContext?.args?.color ?? ''; + const isDark = color !== 'primary' ? 'bg-primary-800' : ''; return { args, - isDark, - } + isDark + }; }, template: `
      ({ >
      - `, -}) + ` +}); export const Default = { render: Template, @@ -132,22 +130,22 @@ export const Default = { label `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; const SpinnerTemplate = (args: Args, storyContext) => ({ components: { PuikSpinnerLoader }, setup() { - const color = args.color ?? storyContext?.args?.color ?? '' - const isDark = color !== 'primary' ? 'bg-primary-800' : '' + const color = args.color ?? storyContext?.args?.color ?? ''; + const isDark = color !== 'primary' ? 'bg-primary-800' : ''; return { args, - isDark, - } + isDark + }; }, template: `
      ({
      - `, -}) + ` +}); export const Primary: StoryObj = { render: SpinnerTemplate, args: { - color: 'primary', + color: 'primary' }, parameters: { @@ -182,17 +180,17 @@ export const Primary: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const Reverse: StoryObj = { render: SpinnerTemplate, args: { - color: 'reverse', + color: 'reverse' }, parameters: { @@ -207,17 +205,17 @@ export const Reverse: StoryObj = { `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const LabelBottom: StoryObj = { render: SpinnerTemplate, args: { - label: 'In progress', + label: 'In progress' }, parameters: { @@ -233,18 +231,18 @@ export const LabelBottom: StoryObj = { In progress `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; export const LabelRight: StoryObj = { render: SpinnerTemplate, args: { label: 'In progress ', - position: 'right', + position: 'right' }, parameters: { @@ -260,8 +258,8 @@ export const LabelRight: StoryObj = { In progress `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/spinner-loader/style/css.ts b/packages/components/spinner-loader/style/css.ts index 7f041213..e4b34eb7 100644 --- a/packages/components/spinner-loader/style/css.ts +++ b/packages/components/spinner-loader/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-spinner-loader.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-spinner-loader.css'; diff --git a/packages/components/spinner-loader/style/index.ts b/packages/components/spinner-loader/style/index.ts index 6add89dd..a2baa8ab 100644 --- a/packages/components/spinner-loader/style/index.ts +++ b/packages/components/spinner-loader/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/spinner-loader.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-spinner-loader.scss'; diff --git a/packages/components/spinner-loader/test/spinner-loader.spec.ts b/packages/components/spinner-loader/test/spinner-loader.spec.ts index 583c67fd..7ccd5910 100644 --- a/packages/components/spinner-loader/test/spinner-loader.spec.ts +++ b/packages/components/spinner-loader/test/spinner-loader.spec.ts @@ -1,71 +1,68 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import PuikSpinnerLoader from '../src/spinner-loader.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSpinnerLoader, SpinnerLoaderProps } from '@prestashopcorp/puik-components'; describe('SpinnerLoader tests', () => { - let wrapper: VueWrapper - const findComponent = () => wrapper.find('.puik-spinner-loader') - const findLabel = () => wrapper.find('.puik-spinner-loader__label') + let wrapper: VueWrapper; + const findComponent = () => wrapper.find('.puik-spinner-loader'); + const findLabel = () => wrapper.find('.puik-spinner-loader__label'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: SpinnerLoaderProps, + options?: ComponentMountingOptions ) => { wrapper = mount(PuikSpinnerLoader, { - props: { - ...propsData, - }, - ...options, - }) - } + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should display the spinner loader on size lg', () => { - factory({ size: 'lg' }) - expect(findComponent().classes()).toContain('puik-spinner-loader--lg') - }) + factory({ size: 'lg' }); + expect(findComponent().classes()).toContain('puik-spinner-loader--lg'); + }); it('should display the spinner loader on size md', () => { - factory() - expect(findComponent().classes()).toContain('puik-spinner-loader--md') - }) + factory(); + expect(findComponent().classes()).toContain('puik-spinner-loader--md'); + }); it('should display the spinner loader on size sm', () => { - factory({ size: 'sm' }) - expect(findComponent().classes()).toContain('puik-spinner-loader--sm') - }) + factory({ size: 'sm' }); + expect(findComponent().classes()).toContain('puik-spinner-loader--sm'); + }); it('should display the spinner loader color as primary', () => { - factory({ color: 'primary' }) - expect(findComponent().classes()).toContain('puik-spinner-loader--primary') - }) + factory({ color: 'primary' }); + expect(findComponent().classes()).toContain('puik-spinner-loader--primary'); + }); it('should display the spinner loader color as reverse', () => { - factory({ color: 'reverse' }) - expect(findComponent().classes()).toContain('puik-spinner-loader--reverse') - }) + factory({ color: 'reverse' }); + expect(findComponent().classes()).toContain('puik-spinner-loader--reverse'); + }); it('should display the spinner loader label below the spinner.', () => { - const label = 'Loading ...' - factory({ label }) - expect(findLabel().exists()).toBeTruthy() - expect(findLabel().text()).toBe(label) - }) + const label = 'Loading ...'; + factory({ label }); + expect(findLabel().exists()).toBeTruthy(); + expect(findLabel().text()).toBe(label); + }); it('should display the spinner loader label next to the right the spinner.', () => { - const label = 'Loading ...' - factory({ label, position: 'right' }) - expect(findComponent().classes()).toContain('puik-spinner-loader--right') - expect(findLabel().exists()).toBeTruthy() - expect(findLabel().text()).toBe(label) - }) + const label = 'Loading ...'; + factory({ label, position: 'right' }); + expect(findComponent().classes()).toContain('puik-spinner-loader--right'); + expect(findLabel().exists()).toBeTruthy(); + expect(findLabel().text()).toBe(label); + }); it('should have a data-test attribute', () => { - factory({ 'data-test': 'test' }) - expect(findComponent().attributes('data-test')).toBe('test') - }) -}) + factory({ dataTest: 'test' }); + expect(findComponent().attributes('data-test')).toBe('test'); + }); +}); diff --git a/packages/components/switch/index.ts b/packages/components/switch/index.ts index 3375bc64..ac9ebd2b 100644 --- a/packages/components/switch/index.ts +++ b/packages/components/switch/index.ts @@ -1,8 +1,6 @@ -import { withInstall } from '@puik/utils' +import Switch from './src/switch.vue'; -import Switch from './src/switch.vue' +export const PuikSwitch = Switch; +export default PuikSwitch; -export const PuikSwitch = withInstall(Switch) -export default PuikSwitch - -export * from './src/switch' +export * from './src/switch'; diff --git a/packages/components/switch/src/switch.ts b/packages/components/switch/src/switch.ts index c16bb6ce..8ff2c887 100644 --- a/packages/components/switch/src/switch.ts +++ b/packages/components/switch/src/switch.ts @@ -1,38 +1,11 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type Switch from './switch.vue' +import type Switch from './switch.vue'; -export const switchProps = buildProps({ - label: { - type: String, - required: false, - default: undefined, - }, - labelRight: { - type: String, - required: false, - default: undefined, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - modelValue: { - type: Boolean, - required: false, - default: false, - }, - screenReaderText: { - type: String, - required: false, - default: undefined, - }, -} as const) +export interface SwitchProps { + label?: string + labelRight?: string + disabled?: boolean + modelValue?: boolean | string + screenReaderText?: string +} -export type SwitchProps = ExtractPropTypes - -export const switchEmits = ['update:modelValue'] -export type SwitchEmits = typeof switchEmits - -export type SwitchInstance = InstanceType +export type SwitchInstance = InstanceType; diff --git a/packages/components/switch/src/switch.vue b/packages/components/switch/src/switch.vue index 087a6a80..3869e8a8 100644 --- a/packages/components/switch/src/switch.vue +++ b/packages/components/switch/src/switch.vue @@ -4,8 +4,9 @@ {{ label }} + {{ label }} + - + {{ screenReader }} {{ labelRight }} + + {{ labelRight }} + + + + diff --git a/packages/components/switch/stories/switch.stories.ts b/packages/components/switch/stories/switch.stories.ts index 614d0e2a..5664a796 100644 --- a/packages/components/switch/stories/switch.stories.ts +++ b/packages/components/switch/stories/switch.stories.ts @@ -1,7 +1,7 @@ -import { ref } from 'vue' -import { useArgs } from '@storybook/client-api' -import PuikSwitch from './../src/switch.vue' -import type { StoryObj, StoryFn, Meta, Args } from '@storybook/vue3' +import { ref } from 'vue'; +import { useArgs } from '@storybook/client-api'; +import { PuikSwitch } from '@prestashopcorp/puik-components'; +import type { StoryObj, StoryFn, Meta } from '@storybook/vue3'; export default { title: 'Components/Switch', @@ -12,50 +12,50 @@ export default { description: 'Label of the switch toggle', table: { defaultValue: { - summary: 'undefined', - }, - }, + summary: 'undefined' + } + } }, labelRight: { control: 'text', description: 'Right label of the switch toggle (props or slot)', table: { defaultValue: { - summary: 'undefined', - }, - }, + summary: 'undefined' + } + } }, disabled: { control: 'boolean', description: 'Set if the switch toggle is disabled', table: { defaultValue: { - summary: 'false', - }, - }, + summary: 'false' + } + } }, screenReaderText: { control: 'text', description: 'Add text visible by screen reader only', table: { defaultValue: { - summary: 'undefined', - }, - }, + summary: 'undefined' + } + } }, modelValue: { control: 'boolean', description: 'v-model of the switch', table: { defaultValue: { - summary: 'false', - }, - }, + summary: 'false' + } + } }, default: { control: 'text', - description: 'Label of the switch toggle using the slot', - }, + description: 'Label of the switch toggle using the slot' + } }, args: { label: '', @@ -63,23 +63,23 @@ export default { disabled: false, default: null, screenReaderText: '', - modelValue: false, - }, -} as Meta + modelValue: false + } +} as Meta; -const Template: StoryFn = (args: Args) => { - const [updateArgs] = useArgs() +const Template: StoryFn = () => { + const [args, updateArgs] = useArgs(); return { components: { - PuikSwitch, + PuikSwitch }, setup() { - const onClick = () => updateArgs({ modelValue: !args.modelValue }) - return { args, onClick } + const onClick = () => updateArgs({ modelValue: !args.modelValue }); + return { args, onClick }; }, - template: '', - } -} + template: '' + }; +}; export const Default = { render: Template, @@ -99,35 +99,35 @@ export const Default = { - `, - }, - }, - }, -} + ` + } + } + } +}; export const Label: StoryFn = () => ({ components: { - PuikSwitch, + PuikSwitch }, setup() { - const enabled = ref(false) - return { enabled } + const enabled = ref(false); + return { enabled }; }, template: - '', -}) + '' +}); export const LabelRight: StoryObj = { render: () => ({ components: { - PuikSwitch, + PuikSwitch }, setup() { - const enabled = ref(false) - return { enabled } + const enabled = ref(false); + return { enabled }; }, template: - '', + '' }), parameters: { @@ -144,34 +144,34 @@ export const LabelRight: StoryObj = { - `, - }, - }, - }, -} + ` + } + } + } +}; export const LabelBySlot: StoryFn = () => ({ components: { - PuikSwitch, + PuikSwitch }, setup() { - const enabled = ref(false) - return { enabled } + const enabled = ref(false); + return { enabled }; }, - template: 'Switch Label Slot', -}) + template: 'Switch Label Slot' +}); export const LabelRightBySlot: StoryObj = { render: () => ({ components: { - PuikSwitch, + PuikSwitch }, setup() { - const enabled = ref(false) - return { enabled } + const enabled = ref(false); + return { enabled }; }, template: - '', + '' }), parameters: { @@ -190,26 +190,26 @@ export const LabelRightBySlot: StoryObj = { - `, - }, - }, - }, -} + ` + } + } + } +}; export const Disabled: StoryObj = { render: () => ({ components: { - PuikSwitch, + PuikSwitch }, setup() { - const firstSwitch = ref(true) - const secondSwitch = ref(false) - return { firstSwitch, secondSwitch } + const firstSwitch = ref(true); + const secondSwitch = ref(false); + return { firstSwitch, secondSwitch }; }, template: ` Disabled On Disabled Off - `, + ` }), parameters: { @@ -226,22 +226,22 @@ export const Disabled: StoryObj = { - `, - }, - }, - }, -} + ` + } + } + } +}; export const Active: StoryObj = { render: () => ({ components: { - PuikSwitch, + PuikSwitch }, setup() { - const enabled = ref(true) - return { enabled } + const enabled = ref(true); + return { enabled }; }, - template: 'On', + template: 'On' }), parameters: { @@ -258,30 +258,30 @@ export const Active: StoryObj = { - `, - }, - }, - }, -} + ` + } + } + } +}; export const AllStates: StoryObj = { render: () => ({ components: { - PuikSwitch, + PuikSwitch }, setup() { - const firstSwitch = ref(true) - const secondSwitch = ref(false) - const thirdSwitch = ref(true) - const lastSwitch = ref(false) - return { firstSwitch, secondSwitch, thirdSwitch, lastSwitch } + const firstSwitch = ref(true); + const secondSwitch = ref(false); + const thirdSwitch = ref(true); + const lastSwitch = ref(false); + return { firstSwitch, secondSwitch, thirdSwitch, lastSwitch }; }, template: ` Off Disabled On Disabled Off - `, + ` }), parameters: { @@ -298,8 +298,8 @@ export const AllStates: StoryObj = { - `, - }, - }, - }, -} + ` + } + } + } +}; diff --git a/packages/components/switch/style/css.ts b/packages/components/switch/style/css.ts index 0dcca972..9e7616f5 100644 --- a/packages/components/switch/style/css.ts +++ b/packages/components/switch/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-switch.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-switch.css'; diff --git a/packages/components/switch/style/index.ts b/packages/components/switch/style/index.ts index b5932a24..3572abf1 100644 --- a/packages/components/switch/style/index.ts +++ b/packages/components/switch/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/switch.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-switch.scss'; diff --git a/packages/components/switch/test/switch.spec.ts b/packages/components/switch/test/switch.spec.ts index 0cb2853c..e6498875 100644 --- a/packages/components/switch/test/switch.spec.ts +++ b/packages/components/switch/test/switch.spec.ts @@ -1,63 +1,60 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' -import Switch from '../src/switch.vue' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import { PuikSwitch, SwitchProps } from '@prestashopcorp/puik-components'; describe('Switch tests', () => { - let wrapper: VueWrapper - const findLeftLabel = () => wrapper.find('.puik-switch__label--left') - const findRightLabel = () => wrapper.find('.puik-switch__label--right') - const findScreenReader = () => wrapper.find('.puik-switch__screen-readers') - const findSwitch = () => wrapper.find('.puik-switch') + let wrapper: VueWrapper; + const findLeftLabel = () => wrapper.find('.puik-switch__label--left'); + const findRightLabel = () => wrapper.find('.puik-switch__label--right'); + const findScreenReader = () => wrapper.find('.puik-switch__screen-readers'); + const findSwitch = () => wrapper.find('.puik-switch'); const factory = ( - propsData: Record = {}, - options: MountingOptions = {} + props?: SwitchProps, + options?: ComponentMountingOptions ) => { - wrapper = mount(Switch, { - props: { - ...propsData, - }, - ...options, - }) - } + wrapper = mount(PuikSwitch, { + props, + ...options + }); + }; it('should be a vue instance', () => { - factory() - expect(wrapper).toBeTruthy() - }) + factory(); + expect(wrapper).toBeTruthy(); + }); it('should have a label on the left of the Switch', () => { - const label = 'Switch label' - factory({ label }) - expect(findLeftLabel().text()).toBe(label) - }) + const label = 'Switch label'; + factory({ label }); + expect(findLeftLabel().text()).toBe(label); + }); it('should have a label on the right of the Switch', () => { - const labelRight = 'Switch label' - factory({ labelRight }) - expect(findRightLabel().text()).toBe(labelRight) - }) + const labelRight = 'Switch label'; + factory({ labelRight }); + expect(findRightLabel().text()).toBe(labelRight); + }); it('should have a screen reader text', async () => { - const screenReaderText = 'Switch' - factory({ screenReaderText }) - expect(findScreenReader().text()).toBe(`Enable ${screenReaderText}`) - await wrapper.setProps({ modelValue: true }) - expect(findScreenReader().text()).toBe(`Disable ${screenReaderText}`) - }) + const screenReaderText = 'Switch'; + factory({ screenReaderText }); + expect(findScreenReader().text()).toBe(`Enable ${screenReaderText}`); + await wrapper.setProps({ modelValue: true }); + expect(findScreenReader().text()).toBe(`Disable ${screenReaderText}`); + }); it('should be disabled', () => { - factory({ disabled: true }) - expect((findSwitch().element as HTMLButtonElement).disabled).toBeTruthy() - }) + factory({ disabled: true }); + expect((findSwitch().element as HTMLButtonElement).disabled).toBeTruthy(); + }); it('should be set as enabled', () => { - factory({ modelValue: true }) - expect(findSwitch().classes()).toContain('puik-switch--enabled') - }) + factory({ modelValue: true }); + expect(findSwitch().classes()).toContain('puik-switch--enabled'); + }); it('should emit an event on click', async () => { - factory({ modelValue: false }) - await findSwitch().trigger('click') - expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([true]) - }) -}) + factory({ modelValue: false }); + await findSwitch().trigger('click'); + expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([true]); + }); +}); diff --git a/packages/components/tab-navigation-group-panels/style/css.ts b/packages/components/tab-navigation-group-panels/style/css.ts index 7ff596b2..5c27bef7 100644 --- a/packages/components/tab-navigation-group-panels/style/css.ts +++ b/packages/components/tab-navigation-group-panels/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-tab-navigation-group-panels.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-tab-navigation-group-panels.css'; diff --git a/packages/components/tab-navigation-group-panels/style/index.ts b/packages/components/tab-navigation-group-panels/style/index.ts index 4fc616ba..12a416f5 100644 --- a/packages/components/tab-navigation-group-panels/style/index.ts +++ b/packages/components/tab-navigation-group-panels/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/tab-navigation-group-panels.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-tab-navigation-group-panels.scss'; diff --git a/packages/components/tab-navigation-group-titles/style/css.ts b/packages/components/tab-navigation-group-titles/style/css.ts index 34d90eac..a4668c75 100644 --- a/packages/components/tab-navigation-group-titles/style/css.ts +++ b/packages/components/tab-navigation-group-titles/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-tab-navigation-group-titles.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-tab-navigation-group-titles.css'; diff --git a/packages/components/tab-navigation-group-titles/style/index.ts b/packages/components/tab-navigation-group-titles/style/index.ts index 66b32522..95b631c5 100644 --- a/packages/components/tab-navigation-group-titles/style/index.ts +++ b/packages/components/tab-navigation-group-titles/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/tab-navigation-group-titles.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-tab-navigation-group-titles.scss'; diff --git a/packages/components/tab-navigation-panel/style/css.ts b/packages/components/tab-navigation-panel/style/css.ts index 081970f9..ad3064b8 100644 --- a/packages/components/tab-navigation-panel/style/css.ts +++ b/packages/components/tab-navigation-panel/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-tab-navigation-panel.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-tab-navigation-panel.css'; diff --git a/packages/components/tab-navigation-panel/style/index.ts b/packages/components/tab-navigation-panel/style/index.ts index fa7e3b73..a310704e 100644 --- a/packages/components/tab-navigation-panel/style/index.ts +++ b/packages/components/tab-navigation-panel/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/tab-navigation-panel.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-tab-navigation-panel.scss'; diff --git a/packages/components/tab-navigation-title/style/css.ts b/packages/components/tab-navigation-title/style/css.ts index a658419a..a84ad0f5 100644 --- a/packages/components/tab-navigation-title/style/css.ts +++ b/packages/components/tab-navigation-title/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-tab-navigation-title.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-tab-navigation-title.css'; diff --git a/packages/components/tab-navigation-title/style/index.ts b/packages/components/tab-navigation-title/style/index.ts index a9a74216..87be7918 100644 --- a/packages/components/tab-navigation-title/style/index.ts +++ b/packages/components/tab-navigation-title/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/tab-navigation-title.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-tab-navigation-title.scss'; diff --git a/packages/components/tab-navigation/index.ts b/packages/components/tab-navigation/index.ts index 2281d1d9..6c0c216d 100644 --- a/packages/components/tab-navigation/index.ts +++ b/packages/components/tab-navigation/index.ts @@ -1,25 +1,21 @@ -import { withInstall } from '@puik/utils' +import TabNavigation from './src/tab-navigation.vue'; +import TabNavigationGroupTitles from './src/tab-navigation-group-titles.vue'; +import TabNavigationGroupPanels from './src/tab-navigation-group-panels.vue'; +import TabNavigationTitle from './src/tab-navigation-title.vue'; +import TabNavigationPanel from './src/tab-navigation-panel.vue'; -import TabNavigation from './src/tab-navigation.vue' -import TabNavigationGroupTitles from './src/tab-navigation-group-titles.vue' -import TabNavigationGroupPanels from './src/tab-navigation-group-panels.vue' -import TabNavigationTitle from './src/tab-navigation-title.vue' -import TabNavigationPanel from './src/tab-navigation-panel.vue' +export const PuikTabNavigation = TabNavigation; +export const PuikTabNavigationGroupTitles = TabNavigationGroupTitles; -export const PuikTabNavigation = withInstall(TabNavigation) -export const PuikTabNavigationGroupTitles = withInstall( - TabNavigationGroupTitles -) -export const PuikTabNavigationGroupPanels = withInstall( - TabNavigationGroupPanels -) -export const PuikTabNavigationTitle = withInstall(TabNavigationTitle) -export const PuikTabNavigationPanel = withInstall(TabNavigationPanel) +export const PuikTabNavigationGroupPanels = TabNavigationGroupPanels; -export default PuikTabNavigation +export const PuikTabNavigationTitle = TabNavigationTitle; +export const PuikTabNavigationPanel = TabNavigationPanel; -export * from './src/tab-navigation' -export * from './src/tab-navigation-group-titles' -export * from './src/tab-navigation-group-panels' -export * from './src/tab-navigation-title' -export * from './src/tab-navigation-panel' +export default PuikTabNavigation; + +export * from './src/tab-navigation'; +export * from './src/tab-navigation-group-titles'; +export * from './src/tab-navigation-group-panels'; +export * from './src/tab-navigation-title'; +export * from './src/tab-navigation-panel'; diff --git a/packages/components/tab-navigation/src/tab-navigation-group-panels.ts b/packages/components/tab-navigation/src/tab-navigation-group-panels.ts index 5c086ac9..7765383e 100644 --- a/packages/components/tab-navigation/src/tab-navigation-group-panels.ts +++ b/packages/components/tab-navigation/src/tab-navigation-group-panels.ts @@ -1,13 +1,5 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type TabNavigationGroupPanels from './tab-navigation-group-panels.vue' - -export const tabNavigationGroupPanelsProps = buildProps({} as const) - -export type TabNavigationGroupPanelsProps = ExtractPropTypes< - typeof tabNavigationGroupPanelsProps -> +import type TabNavigationGroupPanels from './tab-navigation-group-panels.vue'; export type TabNavigationGroupPanelsInstance = InstanceType< typeof TabNavigationGroupPanels -> +>; diff --git a/packages/components/tab-navigation/src/tab-navigation-group-panels.vue b/packages/components/tab-navigation/src/tab-navigation-group-panels.vue index f16b1daf..84e37b3a 100644 --- a/packages/components/tab-navigation/src/tab-navigation-group-panels.vue +++ b/packages/components/tab-navigation/src/tab-navigation-group-panels.vue @@ -5,9 +5,12 @@ + + diff --git a/packages/components/tab-navigation/src/tab-navigation-group-titles.ts b/packages/components/tab-navigation/src/tab-navigation-group-titles.ts index 7638f009..9dbd2824 100644 --- a/packages/components/tab-navigation/src/tab-navigation-group-titles.ts +++ b/packages/components/tab-navigation/src/tab-navigation-group-titles.ts @@ -1,18 +1,9 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type TabNavigationGroupTitles from './tab-navigation-group-titles.vue' +import type TabNavigationGroupTitles from './tab-navigation-group-titles.vue'; -export const tabNavigationGroupTitlesProps = buildProps({ - ariaLabel: { - type: String, - required: true, - }, -} as const) - -export type TabNavigationGroupTitlesProps = ExtractPropTypes< - typeof tabNavigationGroupTitlesProps -> +export interface TabNavigationGroupTitlesProps { + ariaLabel: string +} export type TabNavigationGroupTitlesInstance = InstanceType< typeof TabNavigationGroupTitles -> +>; diff --git a/packages/components/tab-navigation/src/tab-navigation-group-titles.vue b/packages/components/tab-navigation/src/tab-navigation-group-titles.vue index 51ae8d71..fc3c88b0 100644 --- a/packages/components/tab-navigation/src/tab-navigation-group-titles.vue +++ b/packages/components/tab-navigation/src/tab-navigation-group-titles.vue @@ -1,7 +1,7 @@ + + diff --git a/packages/components/tab-navigation/src/tab-navigation-panel.ts b/packages/components/tab-navigation/src/tab-navigation-panel.ts index b5c2ab90..a1918636 100644 --- a/packages/components/tab-navigation/src/tab-navigation-panel.ts +++ b/packages/components/tab-navigation/src/tab-navigation-panel.ts @@ -1,16 +1,7 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type TabNavigationPanel from './tab-navigation-panel.vue' +import type TabNavigationPanel from './tab-navigation-panel.vue'; -export const tabNavigationPanelProps = buildProps({ - position: { - type: Number, - required: true, - }, -} as const) +export interface TabNavigationPanelProps { + position: number +} -export type TabNavigationPanelProps = ExtractPropTypes< - typeof tabNavigationPanelProps -> - -export type TabNavigationPanelInstance = InstanceType +export type TabNavigationPanelInstance = InstanceType; diff --git a/packages/components/tab-navigation/src/tab-navigation-panel.vue b/packages/components/tab-navigation/src/tab-navigation-panel.vue index 46e484e7..28b26deb 100644 --- a/packages/components/tab-navigation/src/tab-navigation-panel.vue +++ b/packages/components/tab-navigation/src/tab-navigation-panel.vue @@ -12,19 +12,24 @@ + + diff --git a/packages/components/tab-navigation/src/tab-navigation-title.ts b/packages/components/tab-navigation/src/tab-navigation-title.ts index 79da284c..5e1ee918 100644 --- a/packages/components/tab-navigation/src/tab-navigation-title.ts +++ b/packages/components/tab-navigation/src/tab-navigation-title.ts @@ -1,21 +1,8 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes } from 'vue' -import type TabNavigationTitle from './tab-navigation-title.vue' +import type TabNavigationTitle from './tab-navigation-title.vue'; -export const tabNavigationTitleProps = buildProps({ - position: { - type: Number, - required: true, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, -} as const) +export interface TabNavigationTitleProps { + disabled?: boolean + position: number +} -export type TabNavigationTitleProps = ExtractPropTypes< - typeof tabNavigationTitleProps -> - -export type TabNavigationTitleInstance = InstanceType +export type TabNavigationTitleInstance = InstanceType; diff --git a/packages/components/tab-navigation/src/tab-navigation-title.vue b/packages/components/tab-navigation/src/tab-navigation-title.vue index 1b6e9a41..5e61fd19 100644 --- a/packages/components/tab-navigation/src/tab-navigation-title.vue +++ b/packages/components/tab-navigation/src/tab-navigation-title.vue @@ -19,24 +19,23 @@ + + diff --git a/packages/components/tab-navigation/src/tab-navigation.ts b/packages/components/tab-navigation/src/tab-navigation.ts index 0659710f..ab9d214d 100644 --- a/packages/components/tab-navigation/src/tab-navigation.ts +++ b/packages/components/tab-navigation/src/tab-navigation.ts @@ -1,30 +1,20 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, InjectionKey, Ref } from 'vue' -import type TabNavigation from './tab-navigation.vue' +import type { InjectionKey, Ref } from 'vue'; +import type TabNavigation from './tab-navigation.vue'; -export const tabNavigationProps = buildProps({ - name: { - type: String, - required: true, - }, - defaultPosition: { - type: Number, - required: false, - default: 1, - }, -} as const) - -export type TabNavigationProps = ExtractPropTypes +export interface TabNavigationProps { + name: string + defaultPosition?: number +} -export type TabNavigationInstance = InstanceType +export type TabNavigationInstance = InstanceType; export type currentTabKeyContext = { name: Ref numberOfTabs: Ref currentPosition: Ref - keyEventDirection: Ref + keyEventDirection: Ref handleTabClick: (index: number) => void -} +}; export const currentTabKey: InjectionKey = - Symbol('current-tab') + Symbol('current-tab'); diff --git a/packages/components/tab-navigation/src/tab-navigation.vue b/packages/components/tab-navigation/src/tab-navigation.vue index 0aeee491..f95d4d6f 100644 --- a/packages/components/tab-navigation/src/tab-navigation.vue +++ b/packages/components/tab-navigation/src/tab-navigation.vue @@ -1,76 +1,87 @@ + + diff --git a/packages/components/tab-navigation/stories/tab-navigation-group-panels.stories.ts b/packages/components/tab-navigation/stories/tab-navigation-group-panels.stories.ts index e44c1c62..fa06927c 100644 --- a/packages/components/tab-navigation/stories/tab-navigation-group-panels.stories.ts +++ b/packages/components/tab-navigation/stories/tab-navigation-group-panels.stories.ts @@ -1,19 +1,12 @@ -import PuikIcon from '../../icon/src/icon.vue' -import { - PuikTabNavigation, - PuikTabNavigationGroupTitles, - PuikTabNavigationGroupPanels, - PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3' +import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, PuikTabNavigationPanel, PuikIcon } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3'; const meta: Meta< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel > = { title: 'Components/TabNavigation/TabNavigationGroupPanels', component: PuikTabNavigationGroupPanels, @@ -25,12 +18,12 @@ const meta: Meta< table: { disable: true, type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, defaultPosition: { description: @@ -39,12 +32,12 @@ const meta: Meta< table: { disable: true, type: { - summary: 'number', + summary: 'number' }, defaultValue: { - summary: 1, - }, - }, + summary: 1 + } + } }, ariaLabel: { description: 'value of aria-label attribute', @@ -52,19 +45,19 @@ const meta: Meta< table: { disable: true, type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, position: { description: 'position of tab inside PuiktabNavigationGroupTitles component. NB: must be greater than 1', table: { - disable: true, - }, + disable: true + } }, disabled: { description: 'disable a navigation tab', @@ -72,24 +65,24 @@ const meta: Meta< table: { disable: true, type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: 'false', - }, - }, - }, - }, -} + summary: 'false' + } + } + } + } +}; -export default meta +export default meta; type Story = StoryObj< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel -> +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel +>; const Template: StoryFn = (args: Args) => ({ components: { @@ -98,10 +91,10 @@ const Template: StoryFn = (args: Args) => ({ PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, setup() { - return { args } + return { args }; }, template: ` @@ -131,21 +124,21 @@ const Template: StoryFn = (args: Args) => ({ -`, -}) +` +}); export const Default: Story = { args: { name: 'name-example', defaultPosition: 1, - ariaLabel: 'aria-label-example', + ariaLabel: 'aria-label-example' }, render: Template, parameters: { docs: { description: { story: - 'This subcomponent has no props. its role is to contain all the panels and to apply a css class to it', + 'This subcomponent has no props. its role is to contain all the panels and to apply a css class to it' }, source: { code: ` @@ -186,8 +179,8 @@ export const Default: Story = { padding: 0.5rem; } `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/tab-navigation/stories/tab-navigation-group-titles.stories.ts b/packages/components/tab-navigation/stories/tab-navigation-group-titles.stories.ts index 4fedf19d..106ce376 100644 --- a/packages/components/tab-navigation/stories/tab-navigation-group-titles.stories.ts +++ b/packages/components/tab-navigation/stories/tab-navigation-group-titles.stories.ts @@ -1,19 +1,12 @@ -import PuikIcon from '../../icon/src/icon.vue' -import { - PuikTabNavigation, - PuikTabNavigationGroupTitles, - PuikTabNavigationGroupPanels, - PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3' +import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, PuikTabNavigationPanel, PuikIcon } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3'; const meta: Meta< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel > = { title: 'Components/TabNavigation/TabNavigationGroupTitles', component: PuikTabNavigationGroupTitles, @@ -25,12 +18,12 @@ const meta: Meta< table: { disable: true, type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, defaultPosition: { description: @@ -39,31 +32,31 @@ const meta: Meta< table: { disable: true, type: { - summary: 'number', + summary: 'number' }, defaultValue: { - summary: 1, - }, - }, + summary: 1 + } + } }, ariaLabel: { description: 'value of aria-label attribute', control: 'text', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, position: { description: 'position of tab inside PuiktabNavigationGroupTitles component. NB: must be greater than 1', table: { - disable: true, - }, + disable: true + } }, disabled: { description: 'disable a navigation tab', @@ -71,24 +64,24 @@ const meta: Meta< table: { disable: true, type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: 'false', - }, - }, - }, - }, -} + summary: 'false' + } + } + } + } +}; -export default meta +export default meta; type Story = StoryObj< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel -> +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel +>; const Template: StoryFn = (args: Args) => ({ components: { @@ -97,10 +90,10 @@ const Template: StoryFn = (args: Args) => ({ PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, setup() { - return { args } + return { args }; }, template: ` @@ -130,19 +123,19 @@ const Template: StoryFn = (args: Args) => ({ -`, -}) +` +}); export const Default: Story = { args: { name: 'name-example', defaultPosition: 1, - ariaLabel: 'aria-label-example', + ariaLabel: 'aria-label-example' }, render: Template, parameters: { args: { - ariaLabel: 'aria-label-example', + ariaLabel: 'aria-label-example' }, docs: { controls: { exclude: ['name', 'defaultPosition'] }, @@ -187,8 +180,8 @@ export const Default: Story = { overflow-x: auto; } `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/tab-navigation/stories/tab-navigation-panel.stories.ts b/packages/components/tab-navigation/stories/tab-navigation-panel.stories.ts index 0f7f00e2..e624de1b 100644 --- a/packages/components/tab-navigation/stories/tab-navigation-panel.stories.ts +++ b/packages/components/tab-navigation/stories/tab-navigation-panel.stories.ts @@ -1,20 +1,13 @@ -import { ref } from 'vue' -import PuikIcon from '../../icon/src/icon.vue' -import { - PuikTabNavigation, - PuikTabNavigationGroupTitles, - PuikTabNavigationGroupPanels, - PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3' +import { ref } from 'vue'; +import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, PuikTabNavigationPanel, PuikIcon } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3'; const meta: Meta< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel > = { title: 'Components/TabNavigation/TabNavigationPanel', component: PuikTabNavigationPanel, @@ -26,12 +19,12 @@ const meta: Meta< table: { disable: true, type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, defaultPosition: { description: @@ -40,12 +33,12 @@ const meta: Meta< table: { disable: true, type: { - summary: 'number', + summary: 'number' }, defaultValue: { - summary: 1, - }, - }, + summary: 1 + } + } }, ariaLabel: { description: 'value of aria-label attribute', @@ -53,16 +46,16 @@ const meta: Meta< table: { disable: true, type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, position: { description: - 'position of tab inside PuiktabNavigationGroupTitles component. NB: must be greater than or equal to 1', + 'position of tab inside PuiktabNavigationGroupTitles component. NB: must be greater than or equal to 1' }, disabled: { description: 'disable a navigation tab', @@ -70,24 +63,24 @@ const meta: Meta< table: { disable: true, type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: 'false', - }, - }, - }, - }, -} + summary: 'false' + } + } + } + } +}; -export default meta +export default meta; type Story = StoryObj< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel -> +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel +>; const Template: StoryFn = (args: Args) => ({ components: { @@ -96,15 +89,15 @@ const Template: StoryFn = (args: Args) => ({ PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, setup() { const tabs = ref([ { name: 'Title-1', content: 'content 1' }, { name: 'Title-2', content: 'content 2' }, - { name: 'Title-3', content: 'content 3' }, - ]) - return { tabs, args } + { name: 'Title-3', content: 'content 3' } + ]); + return { tabs, args }; }, template: ` @@ -123,21 +116,21 @@ const Template: StoryFn = (args: Args) => ({ - `, -}) + ` +}); export const Default: Story = { args: { name: 'name-example', defaultPosition: 1, - ariaLabel: 'aria-label-example', + ariaLabel: 'aria-label-example' }, render: Template, parameters: { docs: { description: { story: - 'NB: The position prop must be greater than or equal to 1, in the case of a loop it is therefore necessary to increment the index by 1 (see example below)', + 'NB: The position prop must be greater than or equal to 1, in the case of a loop it is therefore necessary to increment the index by 1 (see example below)' }, source: { code: ` @@ -162,8 +155,8 @@ export const Default: Story = {
      `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/tab-navigation/stories/tab-navigation-title.stories.ts b/packages/components/tab-navigation/stories/tab-navigation-title.stories.ts index 0be4b64d..bd1be2fb 100644 --- a/packages/components/tab-navigation/stories/tab-navigation-title.stories.ts +++ b/packages/components/tab-navigation/stories/tab-navigation-title.stories.ts @@ -1,19 +1,12 @@ -import PuikIcon from '../../icon/src/icon.vue' -import { - PuikTabNavigation, - PuikTabNavigationGroupTitles, - PuikTabNavigationGroupPanels, - PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3' +import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, PuikTabNavigationPanel, PuikIcon } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3'; const meta: Meta< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel > = { title: 'Components/TabNavigation/TabNavigationTitle', component: PuikTabNavigationTitle, @@ -25,12 +18,12 @@ const meta: Meta< table: { disable: true, type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, defaultPosition: { description: @@ -39,12 +32,12 @@ const meta: Meta< table: { disable: true, type: { - summary: 'number', + summary: 'number' }, defaultValue: { - summary: 1, - }, - }, + summary: 1 + } + } }, ariaLabel: { description: 'value of aria-label attribute', @@ -52,16 +45,16 @@ const meta: Meta< table: { disable: true, type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, position: { description: - 'position of tab inside PuiktabNavigationGroupTitles component. NB: must be greater than or equal to 1', + 'position of tab inside PuiktabNavigationGroupTitles component. NB: must be greater than or equal to 1' }, disabled: { description: @@ -69,24 +62,24 @@ const meta: Meta< control: 'boolean', table: { type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: 'false', - }, - }, - }, - }, -} + summary: 'false' + } + } + } + } +}; -export default meta +export default meta; type Story = StoryObj< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel -> +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel +>; const Template: StoryFn = (args: Args) => ({ components: { @@ -95,10 +88,10 @@ const Template: StoryFn = (args: Args) => ({ PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, setup() { - return { args } + return { args }; }, template: ` @@ -134,21 +127,21 @@ const Template: StoryFn = (args: Args) => ({ -`, -}) +` +}); export const Default: Story = { args: { name: 'name-example', defaultPosition: 1, - ariaLabel: 'aria-label-example', + ariaLabel: 'aria-label-example' }, render: Template, parameters: { docs: { description: { story: - 'NB: 1) The position prop must be greater than or equal to 1, in the case of a loop it is therefore necessary to increment the index by 1 (see the example with the linked component: tabNavigationPanel). 2) Special attention regarding disabled prop: the defaultPosition prop of tabNavigation component takes precedence over the disabled prop. During the initialization of the TabNavigation component the content of the panel will be visible (it is only once the panel is switched that the disabled behavior is applied). 3) tabNavigationTitle component has a slot tag that allows you to integrate any content (ex: adding an icon in the example below)', + 'NB: 1) The position prop must be greater than or equal to 1, in the case of a loop it is therefore necessary to increment the index by 1 (see the example with the linked component: tabNavigationPanel). 2) Special attention regarding disabled prop: the defaultPosition prop of tabNavigation component takes precedence over the disabled prop. During the initialization of the TabNavigation component the content of the panel will be visible (it is only once the panel is switched that the disabled behavior is applied). 3) tabNavigationTitle component has a slot tag that allows you to integrate any content (ex: adding an icon in the example below)' }, controls: { exclude: ['name', 'defaultPosition', 'ariaLabel'] }, source: { @@ -223,8 +216,8 @@ export const Default: Story = { } } `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/tab-navigation/stories/tab-navigation.stories.ts b/packages/components/tab-navigation/stories/tab-navigation.stories.ts index 61bfef07..4b5b5a3a 100644 --- a/packages/components/tab-navigation/stories/tab-navigation.stories.ts +++ b/packages/components/tab-navigation/stories/tab-navigation.stories.ts @@ -1,20 +1,13 @@ -import { ref } from 'vue' -import PuikIcon from '../../icon/src/icon.vue' -import { - PuikTabNavigation, - PuikTabNavigationGroupTitles, - PuikTabNavigationGroupPanels, - PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3' +import { ref } from 'vue'; +import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, PuikTabNavigationPanel, PuikIcon } from '@prestashopcorp/puik-components'; +import type { Meta, StoryFn, Args, StoryObj } from '@storybook/vue3'; const meta: Meta< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel > = { title: 'Components/TabNavigation', component: PuikTabNavigation, @@ -25,12 +18,12 @@ const meta: Meta< control: 'text', table: { type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, defaultPosition: { description: @@ -38,12 +31,12 @@ const meta: Meta< control: { type: 'number', min: 1 }, table: { type: { - summary: 'number', + summary: 'number' }, defaultValue: { - summary: 1, - }, - }, + summary: 1 + } + } }, ariaLabel: { description: 'value of aria-label attribute', @@ -51,19 +44,19 @@ const meta: Meta< table: { disable: true, type: { - summary: 'string', + summary: 'string' }, defaultValue: { - summary: 'none', - }, - }, + summary: 'none' + } + } }, position: { description: 'position of tab inside PuiktabNavigationGroupTitles component. NB: must be greater than 1', table: { - disable: true, - }, + disable: true + } }, disabled: { description: 'disable a navigation tab', @@ -71,24 +64,24 @@ const meta: Meta< table: { disable: true, type: { - summary: 'boolean', + summary: 'boolean' }, defaultValue: { - summary: 'false', - }, - }, - }, - }, -} + summary: 'false' + } + } + } + } +}; -export default meta +export default meta; type Story = StoryObj< - | typeof PuikTabNavigation - | typeof PuikTabNavigationGroupTitles - | typeof PuikTabNavigationGroupPanels - | typeof PuikTabNavigationTitle - | typeof PuikTabNavigationPanel -> +| typeof PuikTabNavigation +| typeof PuikTabNavigationGroupTitles +| typeof PuikTabNavigationGroupPanels +| typeof PuikTabNavigationTitle +| typeof PuikTabNavigationPanel +>; const Template: StoryFn = (args: Args) => ({ components: { @@ -97,15 +90,15 @@ const Template: StoryFn = (args: Args) => ({ PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, setup() { const tabs = ref([ { name: 'title-1', content: 'content 1' }, { name: 'title-2', content: 'content 2' }, - { name: 'title-3', content: 'content 3' }, - ]) - return { tabs, args } + { name: 'title-3', content: 'content 3' } + ]); + return { tabs, args }; }, template: ` @@ -124,14 +117,14 @@ const Template: StoryFn = (args: Args) => ({ -`, -}) +` +}); export const Default: Story = { args: { name: 'name-example', defaultPosition: 1, - ariaLabel: 'aria-label-example', + ariaLabel: 'aria-label-example' }, render: Template, parameters: { @@ -143,7 +136,7 @@ export const Default: Story = { Tips: - If you want to set a width: set a width on the 'puik-tab-navigation' - If you want to set a width on tab nav: set a MIN-WIDTH on the 'puik-tab-navigation-title' - `, + ` }, source: { code: ` @@ -169,8 +162,8 @@ export const Default: Story = {
      `, - language: 'html', - }, - }, - }, -} + language: 'html' + } + } + } +}; diff --git a/packages/components/tab-navigation/style/css.ts b/packages/components/tab-navigation/style/css.ts index 06fdee09..225183b9 100644 --- a/packages/components/tab-navigation/style/css.ts +++ b/packages/components/tab-navigation/style/css.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-tab-navigation.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-tab-navigation.css'; diff --git a/packages/components/tab-navigation/style/index.ts b/packages/components/tab-navigation/style/index.ts index 91237692..a646809f 100644 --- a/packages/components/tab-navigation/style/index.ts +++ b/packages/components/tab-navigation/style/index.ts @@ -1,2 +1,2 @@ -import '@puik/components/base/style' -import '@puik/theme/src/tab-navigation.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-tab-navigation.scss'; diff --git a/packages/components/tab-navigation/test/tab-navigation-group-panels.spec.ts b/packages/components/tab-navigation/test/tab-navigation-group-panels.spec.ts index 0368bdbc..753c275f 100644 --- a/packages/components/tab-navigation/test/tab-navigation-group-panels.spec.ts +++ b/packages/components/tab-navigation/test/tab-navigation-group-panels.spec.ts @@ -1,15 +1,15 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' +import { mount } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' + PuikTabNavigationPanel +} from '@prestashopcorp/puik-components'; +import type { MountingOptions, VueWrapper } from '@vue/test-utils'; -let wrapper: VueWrapper +let wrapper: VueWrapper; const factory = (template: string, options: MountingOptions = {}) => { wrapper = mount({ components: { @@ -17,15 +17,15 @@ const factory = (template: string, options: MountingOptions = {}) => { PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, template, - ...options, - }) -} + ...options + }); +}; const getTabNavigationGroupPanelsComponent = () => - wrapper.findComponent(PuikTabNavigationGroupPanels) + wrapper.findComponent(PuikTabNavigationGroupPanels); const template = ` @@ -53,10 +53,10 @@ const template = ` -` +`; describe('TabNavigation tests', () => { it('should be a vue instance', () => { - factory(template) - expect(getTabNavigationGroupPanelsComponent).toBeTruthy() - }) -}) + factory(template); + expect(getTabNavigationGroupPanelsComponent).toBeTruthy(); + }); +}); diff --git a/packages/components/tab-navigation/test/tab-navigation-group-titles.spec.ts b/packages/components/tab-navigation/test/tab-navigation-group-titles.spec.ts index 2d17a189..d5b224a0 100644 --- a/packages/components/tab-navigation/test/tab-navigation-group-titles.spec.ts +++ b/packages/components/tab-navigation/test/tab-navigation-group-titles.spec.ts @@ -1,15 +1,15 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' +import { mount } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' + PuikTabNavigationPanel +} from '@prestashopcorp/puik-components'; +import type { MountingOptions, VueWrapper } from '@vue/test-utils'; -let wrapper: VueWrapper +let wrapper: VueWrapper; const factory = (template: string, options: MountingOptions = {}) => { wrapper = mount({ components: { @@ -17,17 +17,17 @@ const factory = (template: string, options: MountingOptions = {}) => { PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, template, - ...options, - }) -} + ...options + }); +}; const getTabNavigationGroupTitlesHtml = () => - wrapper.find('.puik-tab-navigation__group-titles') + wrapper.find('.puik-tab-navigation__group-titles'); const getTabNavigationGroupTitlesComponent = () => - wrapper.findComponent(PuikTabNavigationGroupTitles) + wrapper.findComponent(PuikTabNavigationGroupTitles); const template = ` @@ -55,17 +55,17 @@ const template = ` -` +`; describe('TabNavigationGroupTitles tests', () => { it('should be a vue instance', () => { - factory(template) - expect(getTabNavigationGroupTitlesComponent).toBeTruthy() - }) + factory(template); + expect(getTabNavigationGroupTitlesComponent).toBeTruthy(); + }); it('As ariaLabel prop value is "aria-label-example", aria-label attribute of puik-tab-navigation-group-titles should be "aria-label-example"', () => { - factory(template) + factory(template); expect(getTabNavigationGroupTitlesHtml().attributes('aria-label')).toBe( 'aria-label-example' - ) - }) -}) + ); + }); +}); diff --git a/packages/components/tab-navigation/test/tab-navigation-panel.spec.ts b/packages/components/tab-navigation/test/tab-navigation-panel.spec.ts index fda6d520..fd656ef8 100644 --- a/packages/components/tab-navigation/test/tab-navigation-panel.spec.ts +++ b/packages/components/tab-navigation/test/tab-navigation-panel.spec.ts @@ -1,15 +1,15 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' +import { mount } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' + PuikTabNavigationPanel +} from '@prestashopcorp/puik-components'; +import type { MountingOptions, VueWrapper } from '@vue/test-utils'; -let wrapper: VueWrapper +let wrapper: VueWrapper; const factory = (template: string, options: MountingOptions = {}) => { wrapper = mount({ components: { @@ -17,15 +17,15 @@ const factory = (template: string, options: MountingOptions = {}) => { PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, template, - ...options, - }) -} + ...options + }); +}; const getTabNavigationPanelComponent = () => - wrapper.findComponent(PuikTabNavigationPanel) + wrapper.findComponent(PuikTabNavigationPanel); const template = ` @@ -53,10 +53,10 @@ const template = ` -` +`; describe('TabNavigation tests', () => { it('should be a vue instance', () => { - factory(template) - expect(getTabNavigationPanelComponent).toBeTruthy() - }) -}) + factory(template); + expect(getTabNavigationPanelComponent).toBeTruthy(); + }); +}); diff --git a/packages/components/tab-navigation/test/tab-navigation-title.spec.ts b/packages/components/tab-navigation/test/tab-navigation-title.spec.ts index 2866cd0b..92a9e640 100644 --- a/packages/components/tab-navigation/test/tab-navigation-title.spec.ts +++ b/packages/components/tab-navigation/test/tab-navigation-title.spec.ts @@ -1,15 +1,15 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' +import { mount } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' + PuikTabNavigationPanel +} from '@prestashopcorp/puik-components'; +import type { MountingOptions, VueWrapper } from '@vue/test-utils'; -let wrapper: VueWrapper +let wrapper: VueWrapper; const factory = (template: string, options: MountingOptions = {}) => { wrapper = mount({ components: { @@ -17,17 +17,17 @@ const factory = (template: string, options: MountingOptions = {}) => { PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, template, - ...options, - }) -} + ...options + }); +}; const getTabNavigationTitleComponent = () => - wrapper.findComponent(PuikTabNavigationTitle) + wrapper.findComponent(PuikTabNavigationTitle); const getTabNavigationTitleHtml = () => - wrapper.findAll('.puik-tab-navigation__title ') + wrapper.findAll('.puik-tab-navigation__title '); const template = ` @@ -55,17 +55,17 @@ const template = ` -` +`; describe('TabNavigation tests', () => { it('should be a vue instance', () => { - factory(template) - expect(getTabNavigationTitleComponent).toBeTruthy() - }) + factory(template); + expect(getTabNavigationTitleComponent).toBeTruthy(); + }); it('As disabled prop value is true for tab-3, tab-3 should be disabled', () => { - factory(template) - const disabledTab = getTabNavigationTitleHtml()[2] + factory(template); + const disabledTab = getTabNavigationTitleHtml()[2]; expect(disabledTab.classes()).toContain( 'puik-tab-navigation__title--disabled' - ) - }) -}) + ); + }); +}); diff --git a/packages/components/tab-navigation/test/tab-navigation.spec.ts b/packages/components/tab-navigation/test/tab-navigation.spec.ts index 29ed1007..3d89536a 100644 --- a/packages/components/tab-navigation/test/tab-navigation.spec.ts +++ b/packages/components/tab-navigation/test/tab-navigation.spec.ts @@ -1,15 +1,15 @@ -import { mount } from '@vue/test-utils' -import { describe, it, expect } from 'vitest' +import { mount } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; import { PuikTabNavigation, PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, -} from '..' -import type { MountingOptions, VueWrapper } from '@vue/test-utils' + PuikTabNavigationPanel +} from '@prestashopcorp/puik-components'; +import type { MountingOptions, VueWrapper } from '@vue/test-utils'; -let wrapper: VueWrapper +let wrapper: VueWrapper; const factory = (template: string, options: MountingOptions = {}) => { wrapper = mount({ components: { @@ -17,17 +17,17 @@ const factory = (template: string, options: MountingOptions = {}) => { PuikTabNavigationGroupTitles, PuikTabNavigationGroupPanels, PuikTabNavigationTitle, - PuikTabNavigationPanel, + PuikTabNavigationPanel }, template, - ...options, - }) -} + ...options + }); +}; -const getTabNavigationHtml = () => wrapper.find('.puik-tab-navigation') -const getTabNavigationComponent = () => wrapper.findComponent(PuikTabNavigation) +const getTabNavigationHtml = () => wrapper.find('.puik-tab-navigation'); +const getTabNavigationComponent = () => wrapper.findComponent(PuikTabNavigation); const getTabNavigationTitleHtml = () => - wrapper.findAll('.puik-tab-navigation__title ') + wrapper.findAll('.puik-tab-navigation__title '); const template = ` @@ -55,19 +55,19 @@ const template = ` -` +`; describe('TabNavigation tests', () => { it('should be a vue instance', () => { - factory(template) - expect(getTabNavigationComponent).toBeTruthy() - }) + factory(template); + expect(getTabNavigationComponent).toBeTruthy(); + }); it('As defaultPosition prop value is 2, tab-2 should be selected', () => { - factory(template) - const tab2 = getTabNavigationTitleHtml()[1] - expect(tab2.classes()).toContain('puik-tab-navigation__title--selected') - }) + factory(template); + const tab2 = getTabNavigationTitleHtml()[1]; + expect(tab2.classes()).toContain('puik-tab-navigation__title--selected'); + }); it('As name prop value is "name-example", id attribute of puik-tab-navigation should be "name-example"', () => { - factory(template) - expect(getTabNavigationHtml().attributes().id).toBe('name-example') - }) -}) + factory(template); + expect(getTabNavigationHtml().attributes().id).toBe('name-example'); + }); +}); diff --git a/packages/components/table-search-input/style/css.ts b/packages/components/table-search-input/style/css.ts index cf7c6e9d..cdc9616b 100644 --- a/packages/components/table-search-input/style/css.ts +++ b/packages/components/table-search-input/style/css.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style/css' -import '@puik/theme/puik-input.css' -import '@puik/theme/puik-table-search-input.css' +import '@prestashopcorp/puik-components/base/style/css'; +import '@prestashopcorp/puik-theme/puik-table-search-input.css'; +import '@prestashopcorp/puik-theme/puik-input.css'; diff --git a/packages/components/table-search-input/style/index.ts b/packages/components/table-search-input/style/index.ts index 2060c2fc..2c27e765 100644 --- a/packages/components/table-search-input/style/index.ts +++ b/packages/components/table-search-input/style/index.ts @@ -1,3 +1,3 @@ -import '@puik/components/base/style' -import '@puik/theme/src/input.scss' -import '@puik/theme/src/table-search-input.scss' +import '@prestashopcorp/puik-components/base/style'; +import '@prestashopcorp/puik-theme/src/puik-table-search-input.scss'; +import '@prestashopcorp/puik-theme/src/puik-input.scss'; diff --git a/packages/components/table/index.ts b/packages/components/table/index.ts index 77da7310..99d66212 100644 --- a/packages/components/table/index.ts +++ b/packages/components/table/index.ts @@ -1,12 +1,9 @@ -import { withInstall } from '@puik/utils' +import Table from './src/table.vue'; +import TableSearchInput from './src/table-search-input.vue'; -import Table from './src/table.vue' -import TableSearchInput from './src/table-search-input.vue' +export const PuikTable = Table; +export const PuikTableSearchInput = TableSearchInput; +export default PuikTable; -export const PuikTable = withInstall(Table) -export const PuikTableSearchInput = withInstall(TableSearchInput) - -export default PuikTable - -export * from './src/table' -export * from './src/table-search-input' +export * from './src/table'; +export * from './src/table-search-input'; diff --git a/packages/components/table/src/table-search-input.ts b/packages/components/table/src/table-search-input.ts index d50875da..110781df 100644 --- a/packages/components/table/src/table-search-input.ts +++ b/packages/components/table/src/table-search-input.ts @@ -1,6 +1,4 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type TableSearchInput from './table-search-input.vue' +import type TableSearchInput from './table-search-input.vue'; export enum PuikTableSearchInputTypes { Text = 'text', @@ -10,44 +8,19 @@ export enum PuikTableSearchInputTypes { export type inputRange = { min?: number max?: number -} +}; export type searchOption = { searchBy: string inputText?: string inputRange?: inputRange +}; +export interface TableSearchInputProps { + name?: string + column?: string + searchSubmit?: boolean + searchReset?: boolean + searchType?: `${PuikTableSearchInputTypes}` } -export const tableSearchInputProps = buildProps({ - name: { - type: String, - required: false, - default: '', - }, - column: { - type: String, - required: false, - default: '', - }, - searchSubmit: { - type: Boolean, - required: false, - default: false, - }, - searchReset: { - type: Boolean, - required: false, - default: false, - }, - searchType: { - type: String as PropType, - required: false, - default: PuikTableSearchInputTypes.Text, - }, -} as const) - -export type TableSearchInputProps = ExtractPropTypes< - typeof tableSearchInputProps -> - -export type TableSearchInputInstance = InstanceType +export type TableSearchInputInstance = InstanceType; diff --git a/packages/components/table/src/table-search-input.vue b/packages/components/table/src/table-search-input.vue index d3bf8da3..6f2d1c98 100644 --- a/packages/components/table/src/table-search-input.vue +++ b/packages/components/table/src/table-search-input.vue @@ -5,7 +5,7 @@ @@ -38,7 +38,10 @@ + + diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts index a324fbc8..072758fb 100644 --- a/packages/components/table/src/table.ts +++ b/packages/components/table/src/table.ts @@ -1,7 +1,17 @@ -import { buildProps } from '@puik/utils' -import type { ExtractPropTypes, PropType } from 'vue' -import type Table from './table.vue' -import type { PuikTableSearchInputTypes } from '../src/table-search-input' +import type Table from './table.vue'; +import type { PuikTableSearchInputTypes } from '../src/table-search-input'; + +export enum PuikTableHeaderSize { + Small = 'sm', + Medium = 'md', + Large = 'lg', +} + +export enum PuikTableHeaderAlign { + Left = 'left', + Center = 'center', + Right = 'right', +} export enum PuikTableSortOrder { Asc = 'ASC', @@ -23,12 +33,13 @@ export enum PuikTableScrollBarPosition { export type sortOption = { sortBy?: string sortOrder?: PuikTableSortOrder -} +}; + export interface PuikTableHeader { value: string text?: string - size?: 'sm' | 'md' | 'lg' - align?: 'left' | 'center' | 'right' + size?: `${PuikTableHeaderSize}` + align?: `${PuikTableHeaderAlign}` width?: string sortable?: boolean preventExpand?: boolean @@ -37,63 +48,18 @@ export interface PuikTableHeader { searchType?: `${PuikTableSearchInputTypes}` } -export const tableProps = buildProps({ - headers: { - type: Array as PropType, - required: true, - }, - items: { - type: Array as PropType, - required: false, - default: () => [], - }, - expandable: { - type: Boolean, - required: false, - default: false, - }, - selectable: { - type: Boolean, - required: false, - default: false, - }, - selection: { - type: Array as PropType, - required: false, - default: () => [], - }, - searchBar: { - type: Boolean, - required: false, - default: false, - }, - searchFromServer: { - type: Boolean, - required: false, - default: false, - }, - sortFromServer: { - type: Boolean, - required: false, - default: false, - }, - fullWidth: { - type: Boolean, - required: false, - default: false, - }, - stickyFirstCol: { - type: Boolean, - required: false, - default: false, - }, - stickyLastCol: { - type: Boolean, - required: false, - default: false, - }, -} as const) - -export type TableProps = ExtractPropTypes +export interface TableProps { + headers: PuikTableHeader[] + items?: any[] + expandable?: boolean + selectable?: boolean + selection?: number[] + searchBar?: boolean + searchFromServer?: boolean + sortFromServer?: boolean + fullWidth?: boolean + stickyFirstCol?: boolean + stickyLastCol?: boolean +} -export type TableInstance = InstanceType +export type TableInstance = InstanceType; diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue index 6ff25f72..fbb8f7e9 100644 --- a/packages/components/table/src/table.vue +++ b/packages/components/table/src/table.vue @@ -1,6 +1,12 @@ + ` +}); const SearchableTemplate: StoryFn = (args: Args) => ({ components: { PuikTable, PuikButton, - PuikIcon, + PuikIcon }, setup() { - const selection = ref([]) - const items = generateData() + const selection = ref([]); + const items = generateData(); const headers: PuikTableHeader[] = [ { text: 'Nom', value: 'lastname', size: 'md', searchable: true, - searchType: 'text', + searchType: 'text' }, { text: 'Prรฉnom', value: 'firstname', size: 'md', searchable: true, - searchType: 'text', + searchType: 'text' }, { text: 'Age', @@ -363,14 +354,14 @@ const SearchableTemplate: StoryFn = (args: Args) => ({ size: 'sm', align: 'right', searchable: true, - searchType: 'range', + searchType: 'range' }, { text: 'Email', value: 'email', align: 'left', searchable: true, - searchType: 'text', + searchType: 'text' }, { value: 'actions', @@ -378,10 +369,10 @@ const SearchableTemplate: StoryFn = (args: Args) => ({ align: 'center', preventExpand: true, searchable: true, - searchSubmit: true, - }, - ] - return { args, headers, items, selection } + searchSubmit: true + } + ]; + return { args, headers, items, selection }; }, template: ` @@ -394,50 +385,50 @@ const SearchableTemplate: StoryFn = (args: Args) => ({ aria-label="Delete item" > - `, -}) + ` +}); const SortableTemplate: StoryFn = (args: Args) => ({ components: { PuikTable, PuikButton, - PuikIcon, + PuikIcon }, setup() { - const selection = ref([]) - const items = generateData() + const selection = ref([]); + const items = generateData(); const headers: PuikTableHeader[] = [ { text: 'Nom', value: 'lastname', size: 'md', - sortable: true, + sortable: true }, { text: 'Prรฉnom', value: 'firstname', size: 'md', - sortable: true, + sortable: true }, { text: 'Age', value: 'age', size: 'sm', align: 'right', - sortable: true, + sortable: true }, { text: 'Email', value: 'email', - align: 'left', + align: 'left' }, { value: 'actions', align: 'center', - size: 'sm', - }, - ] - return { args, headers, items, selection } + size: 'sm' + } + ]; + return { args, headers, items, selection }; }, template: ` - `, -}) + ` +}); export const Default: StoryObj = { render: Template, @@ -499,14 +490,14 @@ export const Default: StoryObj = { v-model:selection="selection" :headers="headers" :items="items" - :expandable: args.expandable, - :selectable: args.selectable, - :searchBar: args.searchBar, - :searchFromServer: args.searchFromServer, - :sortFromServer: args.sortFromServer, - :fullWidth: args.fullWidth, - :stickyFirstCol: args.stickyFirstCol, - :stickyLastCol: args.stickyLastCol, + :expandable="args.expandable", + :selectable="args.selectable", + :searchBar="args.searchBar", + :searchFromServer="args.searchFromServer", + :sortFromServer="args.sortFromServer", + :fullWidth="args.fullWidth", + :stickyFirstCol="args.stickyFirstCol", + :stickyLastCol="args.stickyLastCol", >