The PrestaShop UI Kit
- Documentation + Documentation ## About The Project Puik is a component library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem. -## Using the VueJS components +๐ง Please note that version 2 of this project is still in beta. There are significant changes from version 1 to version 2. For more informations, please refer to the [release-notes-v2](./RELEASE-NOTES-V2.md) + +## Contributing + +Please make sure to read the Contributing Guide before making a pull request. + + + +## About the repository + +This monorepo contains the following libraries: + +- [@prestashopcorp/puik-components](https://www.npmjs.com/package/@prestashopcorp/puik-components) a Vue 3 component library +- [@prestashopcorp/puik-web-components](https://www.npmjs.com/package/@prestashopcorp/puik-web-components) a Web component library +- [@prestashopcorp/puik-resolver](https://www.npmjs.com/package/@prestashopcorp/puik-resolver) a component resolver for our Vue 3 component library +- [@prestashopcorp/puik-theme](https://www.npmjs.com/package/@prestashopcorp/puik-theme) a CSS library containing all the classes used in our components +- [@prestashopcorp/puik-tailwind-preset](https://www.npmjs.com/package/@prestashopcorp/puik-tailwind-preset) a Tailwind Css preset that contains all the design tokens used to create the components +- [@prestashopcorp/puik](https://www.npmjs.com/package/@prestashopcorp/puik) a library containing all the other libraries + +## Installation + +โน๏ธ This README only covers the Vue components library usage if you need more information about the usage of the other packages please refer to their README ### Prerequisites -- Node.js LTS is required +- Node.js LTS is required. +- Vue 3 -### Installation +#### Vue components only ```sh -# chose your favorite package manager +# @prestashopcorp/puik-resolver is optional but strongly recommended # NPM -$ npm install @prestashopcorp/puik --save +$ npm install @prestashopcorp/puik-components @prestashopcorp/puik-resolver --save # Yarn -$ yarn add @prestashopcorp/puik +$ yarn add @prestashopcorp/puik-components @prestashopcorp/puik-resolver # pnpm -$ pnpm install @prestashopcorp/puik +$ pnpm install @prestashopcorp/puik-components @prestashopcorp/puik-resolver ``` @@ -57,11 +79,13 @@ $ pnpm install unplugin-vue-components unplugin-auto-import -D Then add the code below in your vite.config file +โน๏ธ if you don't use Vite [follow this link](https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#installation) + ```typescript -import { defineConfig } from 'vite' -import Components from 'unplugin-vue-components/vite' -import AutoImport from 'unplugin-auto-import/vite' -import { PuikResolver } from '@prestashopcorp/puik' +import { defineConfig } from 'vite'; +import Components from 'unplugin-vue-components/vite'; +import AutoImport from 'unplugin-auto-import/vite'; +import { PuikResolver } from '@prestashopcorp/puik-resolver'; export default defineConfig({ plugins: [ @@ -73,17 +97,19 @@ export default defineConfig({ resolvers: [PuikResolver()], }), ], -}) +}); ``` +โน๏ธ If you are using the puik global package you can import PuikResolver directly from `@prestashopcorp/puik` + #### On demand import Import the vue component and the component css directly into your vue file ```vue @@ -93,67 +119,6 @@ import { PuikButton } from '@prestashopcorp/puik' -#### Full import - -If you don't care about bundle size you can full import the library by following these instructions - -Import the vue library and the css directly into your main.js / main.ts - -```typescript -import { createApp } from 'vue' -import Puik from '@prestashopcorp/puik' -import '@prestashopcorp/puik/dist/index.css' -import App from './App.vue' - -const app = createApp(App) - -app.use(Puik) -app.mount('#app') -``` - - - -#### Dark Mode - -We are using the [Tailwind Dark Mode](https://tailwindcss.com/docs/dark-mode). - -To use it you just have to write the css dark rules with `dark:.puik-body-large-bold
@@ -50,4 +50,4 @@ export const Body = generateStory(`.puik-body-small-medium
.puik-body-small
.puik-body-default-link
-`) +`); diff --git a/docs/stub/types__react/index.d.ts b/docs/stub/types__react/index.d.ts deleted file mode 100644 index c1aad2e4..00000000 --- a/docs/stub/types__react/index.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -// fix for error with volar and react types -// https://github.com/johnsoncodehk/volar/blob/master/extensions/vscode-vue-language-features/README.md#notes -// solution : https://github.com/johnsoncodehk/volar/discussions/592#discussioncomment-2163181 -export {} diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 12b35f4b..40e607cd 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -1,8 +1,8 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires module.exports = { - presets: [require('@puik/theme/tailwind.config')], + presets: [require('@prestashopcorp/puik-theme/tailwind.config')], content: [ '../packages/components/**/*.stories.@(js|jsx|ts|tsx)', - './stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))', - ], -} + './stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))' + ] +}; diff --git a/docs/tsconfig.json b/docs/tsconfig.json index d18c6aac..7e903500 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,16 +1,4 @@ { - "compilerOptions": { - "target": "ESNext", - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "allowSyntheticDefaultImports": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitAny": false, - "skipLibCheck": true - }, - "include": ["**/*", ".vitepress/**/*"], - "exclude": ["node_modules"] + "extends": "../tsconfig.json", + "include": ["**/*"], } diff --git a/package.json b/package.json index 793e85a1..66dbeafc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "description": "PUIK - PrestaShop UI kit.", "private": true, - "packageManager": "pnpm@8.2.0", + "type": "module", + "packageManager": "pnpm@9.1.2", "workspaces": [ "packages/*", "docs", @@ -12,25 +13,21 @@ }, "scripts": { "cz": "git-cz", - "test": "vitest --no-threads", + "test": "vitest", "coverage": "vitest run --coverage", - "gen:version": "tsx scripts/gen-version.ts", - "update:version": "tsx scripts/update-version.ts", - "clean": "pnpm clean:dist && pnpm -r --parallel clean", - "clean:dist": "rimraf dist", - "build": "pnpm --filter @puik/build start", - "build:theme": "pnpm --filter @puik/theme build", - "format": "prettier --write .", - "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx && pretty-quick --check --branch main", - "lint:fix": "eslint --fix . --ext .vue,.js,.ts,.jsx,.tsx && pretty-quick --branch main", - "docs:dev": "pnpm --filter @puik/docs dev", - "build-storybook": "pnpm --filter @puik/docs build", + "build": "pnpm --parallel --filter './packages/**' build", + "build:components": "pnpm --filter @prestashopcorp/puik-components build", + "build:web": "pnpm --filter @prestashopcorp/puik-web-components build", + "build:theme": "pnpm --filter @prestashopcorp/puik-theme build", + "lint": "eslint . --ext .vue,.js,.ts,", + "lint:fix": "eslint --fix . --ext .vue,.js,.ts", + "docs:dev": "pnpm --filter @prestashopcorp/puik-docs dev", + "build-storybook": "pnpm --filter @prestashopcorp/puik-docs build", "chromatic": "chromatic", - "dev": "pnpm --filter @puik/playground dev", + "dev": "pnpm --filter @prestashopcorp/puik-playground dev", "component": "hygen component new", - "stub": "pnpm --filter @puik/build stub", + "pack:all": "pnpm -r --parallel --filter './packages/**' exec pnpm pack --pack-destination ../../packages-tars/tmp && scripts/increment_version.sh", "prepare": "husky install", - "postinstall": "pnpm gen:version && npx rimraf ./node_modules/@types/react && pnpm stub", "preinstall": "npx only-allow pnpm -y" }, "config": { @@ -39,78 +36,49 @@ } }, "lint-staged": { - "*.{vue,js,ts,jsx,tsx}": "eslint --fix" + "*.{vue,js,ts}": "eslint --fix" }, "browserslist": [ "> 1%", "not ie 11", "not op_mini all" ], - "peerDependencies": { - "vue": "^3.2.0" - }, "dependencies": { - "@headlessui/vue": "^1.7.13", - "@popperjs/core": "^2.11.7", - "@puik/components": "workspace:*", - "@puik/hooks": "workspace:*", - "@puik/locale": "workspace:*", - "@puik/tailwind-preset": "workspace:*", - "@puik/theme": "workspace:*", - "@puik/tokens": "workspace:*", - "@puik/utils": "workspace:*", - "@vueuse/core": "^9.13.0", - "lodash-es": "^4.17.21", - "lodash-unified": "^1.0.3" + "@prestashopcorp/puik": "workspace:*", + "@prestashopcorp/puik-components": "workspace:*", + "@prestashopcorp/puik-locale": "workspace:*", + "@prestashopcorp/puik-resolver": "workspace:*", + "@prestashopcorp/puik-tailwind-preset": "workspace:*", + "@prestashopcorp/puik-theme": "workspace:*", + "@prestashopcorp/puik-utils": "workspace:*", + "@prestashopcorp/puik-web-components": "workspace:*" }, "devDependencies": { - "@commitlint/cli": "^17.5.1", - "@commitlint/config-conventional": "^17.4.4", - "@esbuild-kit/cjs-loader": "^2.4.2", - "@faker-js/faker": "^8.0.2", - "@pnpm/find-workspace-packages": "^6.0.5", - "@pnpm/logger": "5.0.0", - "@pnpm/types": "^9.0.0", - "@puik/build": "workspace:^0.0.1", - "@types/fs-extra": "^11.0.1", - "@types/gulp": "^4.0.10", - "@types/lodash": "^4.14.192", - "@types/lodash-es": "^4.17.7", - "@types/node": "^18.15.11", - "@types/sass": "^1.43.1", - "@typescript-eslint/eslint-plugin": "5.58.0", - "@typescript-eslint/parser": "5.58.0", - "@vitejs/plugin-vue": "^4.1.0", - "@vitest/coverage-v8": "^0.32.4", - "@vue/test-utils": "^2.3.2", - "@vue/tsconfig": "^0.1.3", - "chalk": "^5.2.0", - "chromatic": "^6.17.3", - "consola": "^2.15.3", + "@changesets/cli": "^2.27.1", + "@commitlint/cli": "^18.6.1", + "@commitlint/config-conventional": "^18.6.3", + "@faker-js/faker": "^8.4.1", + "@prestashopcorp/eslint-config-ts": "^0.2.0", + "@rollup/plugin-node-resolve": "^15.2.3", + "@types/node": "^20.12.12", + "@vitejs/plugin-vue": "^4.6.2", + "@vitest/coverage-v8": "^1.6.0", + "@vue/test-utils": "^2.4.6", + "chromatic": "^10.9.6", "cz-conventional-changelog": "^3.3.0", - "eslint": "^8.38.0", - "eslint-config-prettier": "8.8.0", - "eslint-define-config": "^1.17.0", - "eslint-plugin-import": "2.27.5", - "eslint-plugin-prettier": "4.2.1", - "eslint-plugin-vue": "9.10.0", - "fast-glob": "^3.2.12", + "eslint": "^8.57.0", + "eslint-define-config": "^2.1.0", + "eslint-plugin-vue": "9.19.2", + "fast-glob": "^3.3.2", "husky": "^8.0.3", "hygen": "^6.2.11", - "jsdom": "^21.1.1", - "lint-staged": "^13.2.1", - "prettier": "^2.8.7", - "pretty-quick": "^3.1.3", - "rimraf": "^5.0.0", - "sass": "^1.62.0", - "ts-morph": "^14.0.0", - "tsx": "^3.12.6", - "type-fest": "^2.19.0", - "typescript": "^5.0.4", - "unplugin-vue-define-options": "^1.3.3", - "vitest": "^0.32.4", - "vue": "^3.2.47", - "vue-router": "^4.1.6", - "vue-tsc": "^1.2.0" + "jsdom": "^23.2.0", + "lint-staged": "^15.2.2", + "sass": "^1.77.1", + "typescript": "^5.4.5", + "vite": "^5.2.11", + "vite-plugin-dts": "^3.9.1", + "vitest": "^1.6.0", + "vue": "3.3.10" } } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md new file mode 100644 index 00000000..924ff2de --- /dev/null +++ b/packages/components/CHANGELOG.md @@ -0,0 +1,78 @@ +# @prestashopcorp/puik-components + +## 2.0.0 + +### Major Changes + +- ad02b14: Init Puik v2 + + For more informations, please refer to the [release-notes-v2](../RELEASE-NOTES-V2.md) and [readme file](../RELEASE-NOTES-V2.md) + +### Minor Changes + +- 86b0a60: update pnpm version and fix ci workflows +- 62b93eb: update dependencies + +### Patch Changes + +- e1968b8: merge main branch (see release v1.14.2) and update packages descriptions +- 13cc8a6: - Changing package descriptions. + - upgrade unplugin-vue-components +- Updated dependencies [e1968b8] +- Updated dependencies [86b0a60] +- Updated dependencies [13cc8a6] +- Updated dependencies [62b93eb] +- Updated dependencies [ad02b14] + - @prestashopcorp/puik-theme@2.0.0 + +## 2.0.0-beta.4 + +### Minor Changes + +- update pnpm version and fix ci workflows + +### Patch Changes + +- Updated dependencies + - @prestashopcorp/puik-theme@2.0.0-beta.4 + +## 2.0.0-beta.3 + +### Minor Changes + +- update dependencies + +### Patch Changes + +- Updated dependencies + - @prestashopcorp/puik-theme@2.0.0-beta.3 + +## 2.0.0-beta.2 + +### Patch Changes + +- merge main branch (see release v1.14.2) and update packages descriptions +- Updated dependencies + - @prestashopcorp/puik-theme@2.0.0-beta.2 + +## 2.0.0-beta.1 + +### Patch Changes + +- 13cc8a6: - Changing package descriptions. + - upgrade unplugin-vue-components +- Updated dependencies [13cc8a6] + - @prestashopcorp/puik-theme@2.0.0-beta.1 + +## 2.0.0-beta.0 + +### Major Changes + +- Init Puik v2 beta + + For more informations, please refer to the [release-notes-v2](../RELEASE-NOTES-V2.md) and [readme file](../RELEASE-NOTES-V2.md) + +### Patch Changes + +- Updated dependencies + - @prestashopcorp/puik-theme@2.0.0-beta.0 diff --git a/packages/components/README.md b/packages/components/README.md new file mode 100644 index 00000000..a996362c --- /dev/null +++ b/packages/components/README.md @@ -0,0 +1,88 @@ + + +## About The Project + +Puik Components is a Vue Component library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem. + +## Prerequisites + +- Node.js LTS is required. +- Vue 3 + +## Installation + +```sh +# NPM +$ npm install @prestashopcorp/puik-components --save + +# Yarn +$ yarn add @prestashopcorp/puik-components + +# pnpm +$ pnpm install @prestashopcorp/puik-components +``` + +## Usage + +### Auto import using Puik Resolver (recommended) + +First you need to install `unplugin-vue-components`, `unplugin-auto-import` and the Puik resolver `@prestashopcorp/puik-resolver` + +```sh +$ npm install -D unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver + +# Yarn +$ yarn add unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D + +# pnpm +$ pnpm install unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D +``` + +Then add the code below in your vite.config file + +โน๏ธ if you don't use Vite [follow this link](https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#installation) + +```typescript +import { defineConfig } from 'vite' +import Components from 'unplugin-vue-components/vite' +import AutoImport from 'unplugin-auto-import/vite' +import { PuikResolver } from '@prestashopcorp/puik-resolver' + +export default defineConfig({ + plugins: [ + // ... + Components({ + resolvers: [PuikResolver()], + }), + AutoImport({ + resolvers: [PuikResolver()], + }), + ], +}) +``` + +### On demand import + +Import the vue component and the component css directly into your vue file + +```vue + + + +- {{ props.content }} + {{ content }}
+