[ { "path": ".eslintignore", "content": "build/\ndist/\nnode_modules/\nperf/\n" }, { "path": ".eslintrc.js", "content": "const defaultExtends = [\n 'tui',\n 'prettier',\n 'plugin:@typescript-eslint/recommended',\n 'plugin:react/recommended',\n 'plugin:prettier/recommended',\n];\n\nmodule.exports = {\n root: true,\n env: {\n browser: true,\n es6: true,\n node: true,\n },\n parser: '@typescript-eslint/parser',\n parserOptions: {\n parser: 'typescript-eslint-parser',\n ecmaVersion: 2018,\n sourceType: 'module',\n },\n plugins: [\n 'unused-imports',\n 'simple-import-sort',\n 'prettier',\n 'react',\n 'react-hooks',\n '@typescript-eslint',\n 'jest',\n ],\n extends: defaultExtends,\n settings: {\n react: {\n pragma: 'h',\n version: '16.13',\n },\n },\n globals: {\n fixture: true,\n },\n ignorePatterns: ['**/*.d.ts'],\n rules: {\n '@typescript-eslint/explicit-module-boundary-types': 0,\n '@typescript-eslint/ban-types': 0,\n '@typescript-eslint/no-use-before-define': 0,\n '@typescript-eslint/explicit-function-return-type': 0,\n '@typescript-eslint/no-explicit-any': 0,\n '@typescript-eslint/no-shadow': 'error',\n '@typescript-eslint/consistent-type-imports': 'error',\n 'no-duplicate-imports': 'off',\n '@typescript-eslint/no-duplicate-imports': 'error',\n 'no-shadow': 'off',\n 'no-use-before-define': 0,\n // use unused-imports plugin\n '@typescript-eslint/no-unused-vars': 'off',\n 'unused-imports/no-unused-imports': 'error',\n 'unused-imports/no-unused-vars': [\n 'warn',\n { args: 'after-used', argsIgnorePattern: '^_', ignoreRestSiblings: true },\n ],\n 'react/prop-types': 0,\n 'react-hooks/rules-of-hooks': 'error',\n 'react-hooks/exhaustive-deps': 'error',\n 'jest/no-conditional-expect': 0,\n 'simple-import-sort/imports': [\n 'warn',\n {\n groups: [\n // Side effect imports.\n ['^\\\\u0000'],\n // Preact.\n ['^preact'],\n // Any other packages.\n ['^(\\\\w|@)(?!src/|test/|stories/|t/)'],\n // Source files.\n ['^@src/'],\n // stories files\n ['^@stories/'],\n // Types.\n ['^@t/'],\n // Absolute imports and other imports such as Vue-style `@/foo`.\n // Anything not matched in another group.\n ['^'],\n // Relative imports.\n // Anything that starts with a dot.\n ['^\\\\.'],\n ],\n },\n ],\n 'simple-import-sort/exports': 'warn',\n complexity: ['error', { max: 8 }],\n 'no-warning-comments': 0,\n },\n overrides: [\n {\n files: ['*.spec.ts', '*.spec.tsx'],\n extends: ['plugin:jest/recommended'],\n rules: {\n 'max-nested-callbacks': ['error', { max: 5 }],\n 'jest/expect-expect': [\n 'warn',\n {\n assertFunctionNames: ['expect', 'assert*'],\n },\n ],\n 'jest/no-conditional-expect': 'warn',\n },\n },\n {\n files: ['apps/calendar/playwright/**/*.ts'],\n extends: ['plugin:playwright/playwright-test'],\n rules: {\n 'playwright/no-force-option': 'off',\n 'max-nested-callbacks': ['error', { max: 5 }],\n 'dot-notation': ['error', { allowKeywords: true }],\n },\n },\n ],\n};\n" }, { "path": ".github/composite-actions/install-dependencies/action.yml", "content": "name: 'Install root dependencies using cache'\ndescription: 'Set Node.js and install dependencies using cache'\nruns:\n using: 'composite'\n steps:\n - name: Setup timezone\n uses: szenius/set-timezone@v1.0\n with:\n timezoneLinux: 'Asia/Seoul'\n - name: Use Node.js 16\n uses: actions/setup-node@v3\n with:\n node-version: '16'\n registry-url: https://registry.npmjs.org/\n cache: 'npm'\n - name: Install dependencies\n run: npm ci\n shell: bash\n" }, { "path": ".github/workflows/publish-calendar.yml", "content": "name: Publish calendar\non: [workflow_dispatch]\nenv:\n WORKING_DIRECTORY: ./apps/calendar\njobs:\n check-version:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout branch\n uses: actions/checkout@v3\n - name: Check the package version\n id: cpv\n uses: PostHog/check-package-version@v2\n with:\n path: ${{ env.WORKING_DIRECTORY }}\n - name: Log when unchanged\n if: steps.cpv.outputs.is-new-version == 'false'\n run: 'echo \"No version change\"'\n - name: Cancel workflow\n if: steps.cpv.outputs.is-new-version == 'false'\n uses: andymckay/cancel-action@0.2\n\n publish-npm:\n needs: check-version\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - name: Install dependencies\n uses: ./.github/composite-actions/install-dependencies\n - name: Build calendar\n run: |\n npm run build:calendar\n - name: Check package version\n id: cpv\n uses: PostHog/check-package-version@v2\n with:\n path: ${{ env.WORKING_DIRECTORY }}\n - name: Create new version tag\n run: |\n git tag calendar@${{ steps.cpv.outputs.committed-version }}\n - name: Push new version tag\n run: |\n git push origin calendar@${{ steps.cpv.outputs.committed-version }}\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n - name: Update the relative links in README\n run: |\n PACKAGES=core npm run update:readme\n - name: Publish the package to npm (Calendar)\n working-directory: ${{ env.WORKING_DIRECTORY }}\n run: |\n npm publish --access public\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n\n publish-cdn:\n needs: publish-npm\n runs-on: ubuntu-latest\n steps:\n - name: Checkout branch\n uses: actions/checkout@v3\n - uses: ./.github/composite-actions/install-dependencies\n - name: Upload files to CDN\n working-directory: ${{ env.WORKING_DIRECTORY }}\n run: |\n npm run build\n npm run publish:cdn\n env:\n TOAST_CLOUD_TENANTID: ${{ secrets.TOAST_CLOUD_TENANTID }}\n TOAST_CLOUD_STORAGEID: ${{ secrets.TOAST_CLOUD_STORAGEID }}\n TOAST_CLOUD_USERNAME: ${{ secrets.TOAST_CLOUD_USERNAME }}\n TOAST_CLOUD_PASSWORD: ${{ secrets.TOAST_CLOUD_PASSWORD }}\n" }, { "path": ".github/workflows/publish-docs.yml", "content": "name: Publish docs\non: [workflow_dispatch]\nenv:\n WORKING_DIRECTORY: ./apps/calendar\njobs:\n publish-docs:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n with:\n fetch-depth: 0\n - name: Get the package version\n id: cpv\n uses: PostHog/check-package-version@v2\n with:\n path: ${{ env.WORKING_DIRECTORY }}\n - name: Install dependencies\n uses: ./.github/composite-actions/install-dependencies\n - name: Update the relative links in README\n run: |\n PACKAGES=core npm run update:readme\n - name: Prebuild docs\n working-directory: ${{ env.WORKING_DIRECTORY }}\n run: |\n npm run docs:prebuild\n - name: Change node version to 10\n uses: actions/setup-node@v3\n with:\n node-version: '10'\n registry-url: https://registry.npmjs.org/\n - name: Install tuidoc\n run: |\n npm install -g @toast-ui/doc\n shell: bash\n - name: Build docs\n working-directory: ${{ env.WORKING_DIRECTORY }}\n run: |\n tuidoc\n shell: bash\n - name: Switch branch\n run: |\n git stash\n git switch gh-pages\n - name: Remove previous docs\n run: |\n rm -rf latest\n rm -rf ${{ steps.cpv.outputs.committed-version }}\n - name: Commit docs\n working-directory: ${{ env.WORKING_DIRECTORY }}\n run: |\n git config --local user.email \"dohyung.ahn@nhn.com\"\n git config --local user.name \"Dohyung Ahn\"\n mv -i _latest ../../latest\n mv _${{ steps.cpv.outputs.committed-version }} ../../${{ steps.cpv.outputs.committed-version }}\n git add -A\n git commit -m ${{ steps.cpv.outputs.committed-version }}\n - name: Publish new docs\n uses: ad-m/github-push-action@master\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n branch: gh-pages\n - name: Back to main branch\n run: |\n git switch main\n - name: Restore Node.js version to 16\n uses: actions/setup-node@v3\n with:\n node-version: '16'\n registry-url: https://registry.npmjs.org/\n cache: 'npm'\n" }, { "path": ".github/workflows/publish-wrappers.yml", "content": "name: Publish wrapper\non: [workflow_dispatch]\n\nenv:\n WORKING_DIRECTORY: ./apps/calendar\n REACT_WRAPPER_DIRECTORY: ./apps/react-calendar\n VUE_WRAPPER_DIRECTORY: ./apps/vue-calendar\n\njobs:\n publish-wrapper:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout branch\n uses: actions/checkout@v3\n - name: Install root dependencies\n uses: ./.github/composite-actions/install-dependencies\n - name: Use Node.js 16.x\n uses: actions/setup-node@v1\n with:\n node-version: '16.x'\n registry-url: https://registry.npmjs.org/\n - name: Build core\n working-directory: ${{ env.WORKING_DIRECTORY }}\n run: |\n npm run build\n - name: Get the package version\n id: version\n uses: PostHog/check-package-version@v2\n with:\n path: ${{ env.WORKING_DIRECTORY }}/\n - name: Update version of wrappers in package.json\n working-directory: ${{ env.WORKING_DIRECTORY }}\n run: |\n npm run update:wrapper\n - name: Update lock file of react wrapper\n working-directory: ${{ env.REACT_WRAPPER_DIRECTORY }}\n run: |\n npm install\n - name: Build react wrapper\n working-directory: ${{ env.REACT_WRAPPER_DIRECTORY }}\n run: |\n npm run build\n - name: Update lock file of Vue wrapper\n working-directory: ${{ env.VUE_WRAPPER_DIRECTORY }}\n run: |\n npm install\n - name: Build vue wrapper\n working-directory: ${{ env.VUE_WRAPPER_DIRECTORY }}\n run: |\n npm run build\n - name: Commit files\n run: |\n rm -rf ./apps/react-calendar/package-lock.json\n rm -rf ./apps/vue-calendar/package-lock.json\n git config --local user.name \"lja1018\"\n git config --local user.email \"jaeeon.lim@nhn.com\"\n git add .\n git commit -m \"chore: update version of wrappers to v${{ steps.version.outputs.committed-version }}\"\n - name: Push version update commit\n uses: ad-m/github-push-action@master\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n branch: main\n - name: Push new version tags\n run: |\n git tag react-calendar@${{ steps.version.outputs.committed-version }}\n git tag vue-calendar@${{ steps.version.outputs.committed-version }}\n git push origin react-calendar@${{ steps.version.outputs.committed-version }}\n git push origin vue-calendar@${{ steps.version.outputs.committed-version }}\n - name: Update the relative links in README\n run: |\n PACKAGES=react,vue npm run update:readme\n - name: Publish react wrapper\n working-directory: ${{ env.REACT_WRAPPER_DIRECTORY }}\n run: |\n npm publish\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n - name: Publish vue wrapper\n working-directory: ${{ env.VUE_WRAPPER_DIRECTORY }}\n run: |\n npm publish\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n" }, { "path": ".github/workflows/test.yml", "content": "name: Lint and test\non:\n pull_request:\n branches: [main]\n workflow_call:\njobs:\n lint:\n name: Lint & Type Checking\n runs-on: ubuntu-latest\n steps:\n - name: Checkout next branch\n uses: actions/checkout@v3\n - name: Install dependencies\n uses: ./.github/composite-actions/install-dependencies\n - name: Lint & Type Checking\n run: |\n npm run lint\n\n test-jest:\n name: Test jest\n needs: [lint]\n runs-on: ubuntu-latest\n steps:\n - name: Checkout next branch\n uses: actions/checkout@v3\n - name: Install dependencies\n uses: ./.github/composite-actions/install-dependencies\n - name: run unit test\n run: |\n npm run test\n\n test-playwright:\n name: Test playwright\n needs: [lint]\n runs-on: ubuntu-latest\n steps:\n - name: Checkout next branch\n uses: actions/checkout@v3\n - name: Install dependencies\n uses: ./.github/composite-actions/install-dependencies\n - name: Install playwright dependencies\n run: |\n npx playwright install --with-deps\n - name: Build storybook\n run: |\n npm run storybook:build -w \"@toast-ui/calendar\"\n - name: Run E2E test\n run: |\n npm run test:playwright\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\nscreenshots\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directory\nnode_modules\n\n# Bower Components\nbower_components\nlib\n\n# IDEA\n.idea\n*.iml\n\n# Window\nThumbs.db\nDesktop.ini\n\n# MAC\n.DS_Store\n\n# SVN\n.svn\n\n# eclipse\n.project\n.metadata\n\n# build\nbuild/\nstorybook-static/\ndist/\napps/calendar/types/\ntmpdoc/\n\n# etc\n*.swp\netc\ntemp\napi\ndoc\nreport\nkarma.conf.local.js\n.tern-project\n.tern-port\n*.vim\n.\\#*\n.vscode/\ntest-results/\nstats.json\n" }, { "path": ".husky/.gitignore", "content": "_\n" }, { "path": ".husky/pre-commit", "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged\n" }, { "path": ".prettierignore", "content": "*.md\n*.html\n" }, { "path": ".prettierrc", "content": "{\n \"singleQuote\": true,\n \"printWidth\": 100,\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"semi\": true,\n \"quoteProps\": \"as-needed\",\n \"jsxSingleQuote\": false,\n \"trailingComma\": \"es5\",\n \"arrowParens\": \"always\",\n \"endOfLine\": \"lf\",\n \"bracketSpacing\": true,\n \"requirePragma\": false,\n \"insertPragma\": false,\n \"proseWrap\": \"preserve\",\n \"vueIndentScriptAndStyle\": false\n}\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of experience,\neducation, socio-economic status, nationality, personal appearance, race,\nreligion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at dl_javascript@nhn.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to TOAST UI\n\nFirst off, thanks for taking the time to contribute! πŸŽ‰ 😘 ✨\n\nThe following is a set of guidelines for contributing to TOAST UI. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.\n\n## Reporting Bugs\n\nBugs are tracked as [GitHub issues](https://github.com/nhn/tui.calendar/issues). Search the issue list and try to reproduce on [demo](https://nhn.github.io/tui.calendar/latest/tutorial-00-calendar-app) before you create an issue. When you create an issue, please provide the following information by filling in the template.\n\nExplain the problem and include additional details to help maintainers reproduce the problem:\n\n* **Use a clear and descriptive title** for the issue to identify the problem.\n* **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard.\n* **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/paste-able snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks.\n* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior.\n* **Explain which behavior you expected to see instead and why.**\n* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem.\n\n## Suggesting Enhancements\n\nIn case you want to suggest for TOAST UI Calendar, please follow this guideline to help maintainers and the community understand your suggestion.\nBefore creating suggestions, please check [issue list](https://github.com/nhn/tui.calendar/labels/Type:%20Enhancement) if there's already a request.\n\nCreate an issue and provide the following information:\n\n* **Use a clear and descriptive title** for the issue to identify the suggestion.\n* **Provide a step-by-step description of the suggested enhancement** in as many details as possible.\n* **Provide specific examples to demonstrate the steps.** Include copy/paste-able snippets which you use in those examples, as Markdown code blocks.\n* **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of TOAST UI Calendar which the suggestion is related to.\n* **Explain why this enhancement would be useful** to most TOAST UI users.\n* **List some other applications where this enhancement exists.**\n\n## First Code Contribution\n\nUnsure where to begin contributing to TOAST UI? You can start by looking through these `document`, `good first issue` and `help wanted` issues:\n\n* **document issues**: issues which should be reviewed or improved.\n* **good first issues**: issues which should only require a few lines of code, and a test or two.\n* **help wanted issues**: issues which should be a bit more involved than beginner issues.\n\n## Pull Requests\n\n### Development WorkFlow\n\n- Set up your development environment\n- Make change from a right branch\n- Be sure the code passes `npm run lint`, `npm run test`, `npm run test:playwright`\n- Make a pull request\n\n### Development environment\n\n- Prepare your machine Node.js 16+ and it's packages installed.\n- Checkout to the right branch\n- Install dependencies by `npm install`\n- Start development by `npm run develop`\n - For wrappers, `npm run develop --workspace @toast-ui/react-calendar` or `npm run develop --workspace @toast-ui/vue-calendar`\n\n### Make changes\n\n#### Checkout a branch\n\n- **main**: PR base branch. merge features, updates for next minor or major release.\n- **v1**: Legacy version of the project.\n- **gh-pages**: API docs, examples and demo\n\n#### Check Code Style\n\nRun `npm run lint` and make sure all the tests pass. \n\n#### Test\n\nRun `npm run test` and verify all the tests pass.\nIf you are adding new commands or features, they must include tests.\nIf you are changing functionality, update the tests if you need to.\n\n#### Commit\n\nFollow our [commit message conventions](./docs/COMMIT_MESSAGE_CONVENTION.md).\n\n### Yes! Pull request\n\nMake your pull request, then describe your changes.\n\n#### Title\n\nFollow other PR title format on below.\n\n```\n : Short Description (fix #111)\n : Short Description (fix #123, #111, #122)\n : Short Description (ref #111)\n```\n\n* capitalize first letter of Type\n* use present tense: 'change' not 'changed' or 'changes'\n\n#### Description\n\nIf it has related to issues, add links to the issues(like `#123`) in the description.\nFill in the [Pull Request Template](./docs/PULL_REQUEST_TEMPLATE.md) by check your case.\n\n## Code of Conduct\n\nThis project and everyone participating in it is governed by the [Code of Conduct](./CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to dl_javascript@github.com.\n\n> This Guide is base on [atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md), [CocoaPods](http://guides.cocoapods.org/contributing/contribute-to-cocoapods.html) and [ESLint](http://eslint.org/docs/developer-guide/contributing/pull-requests)\n\n[demo]:https://nhn.github.io/tui.calendar/latest\n" }, { "path": "LICENSE", "content": "\nMIT License\n\nCopyright (c) 2021 NHN Corp.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "README.md", "content": "# ![TOAST UI Calendar](https://user-images.githubusercontent.com/26706716/39230183-7f8ff186-48a0-11e8-8d9c-9699d2d0e471.png)\n\n> πŸžπŸ“… A JavaScript calendar that is full featured. Now your service just got the customizable calendar.\n\n[![npm](https://img.shields.io/npm/v/@toast-ui/calendar.svg)](https://www.npmjs.com/package/@toast-ui/calendar)\n[![GitHub license](https://img.shields.io/github/license/nhn/tui.calendar.svg)](https://github.com/nhn/tui.calendar/blob/main/LICENSE)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/tui.calendar/labels/help%20wanted)\n[![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN_Cloud-ff1414.svg)](https://github.com/nhn)\n\n## 🚩 Table of Contents\n\n- [πŸ“¦ Packages](#-packages)\n- [πŸ“™ Documents](#-documents)\n- [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)\n- [πŸ“… Features](#-features)\n - [✨ Monthly, Weekly, Daily and Various View Types](#-monthly-weekly-daily-and-various-view-types)\n - [Easy to Use: Dragging and Resizing a Schedule](#easy-to-use-dragging-and-resizing-a-schedule)\n - [Ready to Use: Default Popups](#ready-to-use-default-popups)\n- [🎨 Other Features](#-other-features)\n- [πŸ’¬ Contributing](#-contributing)\n- [🌏 Browser Support](#-browser-support)\n- [πŸ”© Dependencies](#-dependencies)\n- [🍞 TOAST UI Family](#-toast-ui-family)\n- [πŸš€ Used By](#-used-by)\n- [πŸ“œ License](#-license)\n\n## πŸ“¦ Packages\n\nThe functionality of TOAST UI Calendar is available when using the Plain JavaScript, React, Vue Component.\n\n- [@toast-ui/calendar](/apps/calendar) - Plain JavaScript component implemented by [NHN Cloud](https://github.com/nhn).\n- [@toast-ui/react-calendar](/apps/react-calendar) - React wrapper component implemented by [NHN Cloud](https://github.com/nhn).\n- [@toast-ui/vue-calendar](/apps/vue-calendar) - Vue wrapper component implemented by [NHN Cloud](https://github.com/nhn).\n\n## πŸ“™ Documents\n\n- [English](./docs/README.md)\n- [Korean](./docs/ko/README.md)\n\n## Collect statistics on the use of open source\n\nTOAST UI Calendar applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Calendar is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > β€œui.toast.com\") is to be collected and the sole purpose is nothing but to measure statistics on the usage.\n\nTo disable GA, refer to the docs below.\n\n- [TOAST UI Calendar](/docs/en/guide/getting-started.md#disable-to-collect-hostname-for-google-analyticsga)\n- [TOAST UI Calendar for React](/apps/react-calendar/docs/en/guide/getting-started.md#disable-to-collect-hostname-for-google-analyticsga)\n- [TOAST UI Calendar for Vue](/apps/vue-calendar/docs/en/guide/getting-started.md#disable-to-collect-hostname-for-google-analyticsga)\n\n## πŸ“… Features\n\n### ✨ Monthly, Weekly, Daily and Various View Types\n\n| Monthly | Weekly |\n| --- | --- |\n| ![image](https://user-images.githubusercontent.com/26706716/39230396-4d79a592-48a1-11e8-9849-08e80f1bedf6.png) | ![image](https://user-images.githubusercontent.com/26706716/39230459-83beac38-48a1-11e8-8cd4-11b97817f1f8.png) |\n\n| Daily | 2 Weeks |\n| --- | --- |\n| ![image](https://user-images.githubusercontent.com/26706716/39230685-60a2a1d6-48a2-11e8-9d46-ce5693277a64.png) | ![image](https://user-images.githubusercontent.com/26706716/39230638-281d5266-48a2-11e8-84d8-ab289f372051.png) |\n\n### Easy to Use: Dragging and Resizing a Schedule\n\n| Dragging | Resizing |\n| --- | --- |\n| ![image](https://user-images.githubusercontent.com/26706716/39230930-591031f8-48a3-11e8-8f62-e12e6c19920c.gif) | ![image](https://user-images.githubusercontent.com/26706716/39231671-c926d0da-48a5-11e8-959d-35fd32f2c522.gif) |\n\n### Ready to Use: Default Popups\n\n| Creation Popup | Detail Popup |\n| --- | --- |\n| ![image](https://user-images.githubusercontent.com/26706716/39230798-d151a9ae-48a2-11e8-842d-b19b40432f48.png) | ![image](https://user-images.githubusercontent.com/26706716/39230820-e73fa11c-48a2-11e8-9348-8e3d81979a78.png) |\n\n## 🎨 Other Features\n\n- Supports various view types: daily, weekly, monthly(6 weeks, 2 weeks, 3 weeks)\n- Supports efficient management of milestone and task schedules\n- Supports the narrow width of weekend\n- Supports changing start day of week\n- Supports customizing the date and schedule information UI(including a header and a footer of grid cell)\n- Supports adjusting a schedule by mouse dragging\n- Supports customizing UI by theme\n\n## πŸ’¬ Contributing\n\n- [Code of Conduct](/CODE_OF_CONDUCT.md)\n- [Contributing Guidelines](/CONTRIBUTING.md)\n- [Commit Message Convention](/docs/COMMIT_MESSAGE_CONVENTION.md)\n- [Issue Guidelines](/docs/ISSUE_TEMPLATE.md)\n\n## 🌏 Browser Support\n\n| \"Chrome\" Chrome | \"IE\" Internet Explorer | \"Edge\" Edge | \"Safari\" Safari | \"Firefox\" Firefox |\n| :---------: | :---------: | :---------: | :---------: | :---------: |\n| Latest | 11+ | Latest | Latest | Latest |\n\n## πŸ”© Dependencies\n\n- [Preact](https://github.com/preactjs/preact)\n- [Immer](https://github.com/immerjs/immer)\n- [DOMPurify](https://github.com/cure53/DOMPurify)\n- (Optional) [tui-date-picker](https://github.com/nhn/tui.date-picker)\n- (Optional) [tui-time-picker](https://github.com/nhn/tui.time-picker)\n\n## 🍞 TOAST UI Family\n\n- [TOAST UI Grid](https://github.com/nhn/tui.grid)\n- [TOAST UI Chart](https://github.com/nhn/tui.chart)\n- [TOAST UI Editor](https://github.com/nhn/tui.editor)\n- [TOAST UI Image-Editor](https://github.com/nhn/tui.image-editor)\n- [TOAST UI Components](https://github.com/nhn?q=tui)\n\n## πŸš€ Used By\n\n- [NHN Dooray! - Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts)](https://dooray.com)\n- [NCP - Commerce Platform](https://www.e-ncp.com/)\n- [shopby](https://www.godo.co.kr/shopby/main.gd)\n- [payco-shopping](https://shopping.payco.com/)\n- [iamTeacher](https://teacher.iamservice.net)\n- [linder](https://www.linder.kr)\n\n## πŸ“œ License\n\nThis software is licensed under the [MIT](/LICENSE) Β© [NHN Cloud](https://github.com/nhn).\n" }, { "path": "apps/calendar/.browserslistrc", "content": "> 1%\nlast 2 versions\nnot ie <= 10\n" }, { "path": "apps/calendar/.lintstagedrc.js", "content": "module.exports = {\n '**/*.js': 'eslint --fix',\n '**/*.{ts,tsx}': [() => 'npm run check-types', 'eslint --fix', 'jest --bail --findRelatedTests'],\n '**/*.css': 'stylelint',\n};\n" }, { "path": "apps/calendar/.storybook/main.js", "content": "const path = require('path');\n\nmodule.exports = {\n core: {\n builder: 'webpack5',\n },\n stories: ['../**/*.stories.@(ts|tsx)'],\n babel: async (config) => {\n // Replace storybook babel preset & plugins with custom ones\n config.presets.splice(config.presets.length - 1, 1, [\n require.resolve('@babel/preset-typescript'),\n { jsxPragma: 'h', jsxPragmaFrag: 'Fragment' },\n ]);\n config.plugins.splice(config.plugins.length - 1, 1, [\n require.resolve('@babel/plugin-transform-react-jsx'),\n { pragma: 'h', pragmaFrag: 'Fragment' },\n 'preset',\n ]);\n\n return config;\n },\n webpackFinal: async (config) => {\n config.module.rules = config.module.rules\n .filter((rule) => !(rule?.test?.test('.css') ?? false))\n .concat([\n {\n test: /\\.css$/,\n include: /node_modules/,\n use: [\n require.resolve('style-loader'),\n {\n loader: require.resolve('css-loader'),\n options: {\n importLoaders: 1,\n },\n },\n ],\n },\n {\n test: /\\.css$/,\n exclude: /node_modules/,\n sideEffects: true,\n use: [\n require.resolve('style-loader'),\n {\n loader: require.resolve('css-loader'),\n options: {\n importLoaders: 1,\n },\n },\n require.resolve('postcss-loader'),\n ],\n },\n ]);\n\n Object.assign(config.resolve.alias, {\n 'core-js/modules': path.resolve(__dirname, '../../../node_modules/core-js/modules'),\n '@src': path.resolve(__dirname, '../src/'),\n '@t': path.resolve(__dirname, '../src/types/'),\n '@stories': path.resolve(__dirname, '../stories/'),\n });\n\n return config;\n },\n};\n" }, { "path": "apps/calendar/.storybook/manager.js", "content": "import { addons } from '@storybook/addons';\nimport calendarTheme from './theme';\n\naddons.setConfig({\n theme: calendarTheme,\n});\n" }, { "path": "apps/calendar/.storybook/preview.js", "content": "import 'preact/debug';\nimport '@src/css/index.css';\nimport 'tui-date-picker/dist/tui-date-picker.css';\nimport 'tui-time-picker/dist/tui-time-picker.css';\n\nexport const parameters = {\n layout: 'fullscreen',\n};\n" }, { "path": "apps/calendar/.storybook/theme.js", "content": "import { create } from '@storybook/theming';\n\nexport default create({\n base: 'light',\n brandTitle: 'TOAST UI Calendar',\n brandUrl: 'https://ui.toast.com/tui-calendar',\n brandImage: 'https://user-images.githubusercontent.com/26706716/39230183-7f8ff186-48a0-11e8-8d9c-9699d2d0e471.png',\n});\n" }, { "path": "apps/calendar/README.md", "content": "# ![TOAST UI Calendar](https://user-images.githubusercontent.com/26706716/39230183-7f8ff186-48a0-11e8-8d9c-9699d2d0e471.png)\n\n> A JavaScript calendar that is full featured. Now your service just got the customizable calendar.\n\n[![npm](https://img.shields.io/npm/v/@toast-ui/calendar.svg)](https://www.npmjs.com/package/@toast-ui/calendar)\n[![license](https://img.shields.io/github/license/nhn/tui.calendar.svg)](https://github.com/nhn/tui.calendar/blob/master/LICENSE)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/tui.calendar/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)\n[![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN_Cloud-ff1414.svg)](https://github.com/nhn)\n\n## 🚩 Table of Contents\n\n- [πŸ“™ Documents](#-documents)\n- [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)\n- [πŸ’Ύ Install](#-install)\n - [Using npm](#using-npm)\n - [Via Contents Delivery Network (CDN)](#via-contents-delivery-network-cdn)\n - [Download Source Files](#download-source-files)\n- [πŸ“… Usage](#-usage)\n - [Load](#load)\n - [Implement](#implement)\n- [πŸ”§ Pull Request Steps](#-pull-request-steps)\n - [Setup](#setup)\n - [Develop](#develop)\n - [Pull Request](#pull-request)\n- [πŸ’¬ Contributing](#-contributing)\n- [πŸ“œ License](#-license)\n\n## πŸ“™ Documents\n\n- [English](/docs/README.md)\n- [Korean](/docs/ko/README.md)\n\n## Collect statistics on the use of open source\n\nTOAST UI Calendar applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Calendar is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > β€œui.toast.com\") is to be collected and the sole purpose is nothing but to measure statistics on the usage.\n\nTo disable GA, set the [`usageStatistics` option](/docs/en/apis/options.md#usagestatistics) to `false`:\n\n```js\nconst calendar = new Calendar('#calendar', {\n usageStatistics: false\n});\n```\n\n## πŸ’Ύ Install\n\n### Using npm\n\n```sh\nnpm install --save @toast-ui/calendar\n```\n\n### Via Contents Delivery Network (CDN)\n\nTOAST UI products are available over the CDN powered by [NHN Cloud](https://www.toast.com).\n\n```html\n\n\n\n\n\n\n\n\n```\n\nIf you want to use a specific version, use the tag name instead of `latest` in the url's path.\n\nThe CDN directory has the following structure.\n\n```\n- uicdn.toast.com/\n β”œβ”€ calendar/\n β”‚ β”œβ”€ latest\n β”‚ β”‚ β”œβ”€ toastui-calendar.css\n β”‚ β”‚ β”œβ”€ toastui-calendar.js\n β”‚ β”‚ β”œβ”€ toastui-calendar.min.css\n β”‚ β”‚ β”œβ”€ toastui-calendar.min.js\n β”‚ β”‚ β”œβ”€ toastui-calendar.ie11.js\n β”‚ β”‚ β”œβ”€ toastui-calendar.ie11.min.js\n β”‚ β”‚ β”‚ toastui-calendar.mjs\n β”‚ β”œβ”€ v2.0.0/\n```\n\n### Download Source Files\n\n- [Download all sources for each version](https://github.com/nhn/tui.calendar/releases)\n\n## πŸ“… Usage\n\n### Load\n\nTOAST UI Calendar can be instantiated through the constructor function. There are three ways to access the constructor function depending on the environment.\n\n```js\n/* ES6 module in Node.js environment */\nimport Calendar from '@toast-ui/calendar';\nimport '@toast-ui/calendar/dist/toastui-calendar.min.css';\n```\n\n```js\n/* CommonJS in Node.js environment */\nconst Calendar = require('@toast-ui/calendar');\nrequire('@toast-ui/calendar/dist/toastui-calendar.min.css');\n```\n\n```js\n/* in the browser environment namespace */\nconst Calendar = tui.Calendar;\n```\n\n### Implement\n\n```html\n
\n```\n\n```javascript\nconst calendar = new Calendar('#calendar', {\n defaultView: 'week',\n template: {\n time(event) {\n const { start, end, title } = event;\n\n return `${formatTime(start)}~${formatTime(end)} ${title}`;\n },\n allday(event) {\n return `${event.title}`;\n },\n },\n calendars: [\n {\n id: 'cal1',\n name: 'Personal',\n backgroundColor: '#03bd9e',\n },\n {\n id: 'cal2',\n name: 'Work',\n backgroundColor: '#00a9ff',\n },\n ],\n});\n```\n\n## πŸ”§ Pull Request Steps\n\nTOAST UI products are open source, so you can create a pull request(PR) after you fix issues.\nRun npm scripts and develop yourself with the following process.\n\n### Setup\n\nFork `main` branch into your personal repository.\nClone it to local computer. Install node modules.\nBefore starting development, you should check to have any errors.\n\n``` sh\ngit clone https://github.com/{your-personal-repo}/[[repo name]].git\ncd [[repo name]]\nnpm install\n```\n\n### Develop\n\nLet's start development!\n\n### Pull Request\n\nBefore PR, check to test lastly and then check any errors.\nIf it has no error, commit and then push it!\n\nFor more information on PR's step, please see links of Contributing section.\n\n## πŸ’¬ Contributing\n\n- [Code of Conduct](/CODE_OF_CONDUCT.md)\n- [Contributing Guidelines](/CONTRIBUTING.md)\n- [Commit Message Convention](/docs/COMMIT_MESSAGE_CONVENTION.md)\n\n## πŸ“œ License\n\nThis software is licensed under the [MIT](/LICENSE) Β© [NHN Cloud](https://github.com/nhn).\n" }, { "path": "apps/calendar/examples/00-calendar-app.html", "content": "\n\n \n \n \n \n TOAST UI Calendar App Demo\n \n \n \n \n \n \n \n \n
\n
\n \n \n \n
\n
\n \n
\n \n
\n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/01-monthly-view-basic.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Monthly View Basic\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/02-monthly-view-2weeks.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Monthly View Basic\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/03-monthly-view-3weeks.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Monthly View Basic\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/04-weekly-view.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Weekly View\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/05-weekly-view-no-event-view.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Weekly View (No Event View)\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/06-daily-view.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Daily View\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/07-narrow-weekends.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Narrow Weekends\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/08-hidden-weekends.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Hidden Weekends\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/09-timezone.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Timezone (Weekly View)\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/10-theme-common.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Common Theme\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/11-theme-monthly.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Theme for Weekly View\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/12-theme-weekly.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Theme for Weekly View\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/13-template-monthly.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Templates for Monthly View\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/14-template-weekly.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Template for Weekly View\n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/15-template-popup.html", "content": "\n\n \n \n \n \n TOAST UI Calendar Example - Theme for Popup\n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n\n" }, { "path": "apps/calendar/examples/scripts/app.js", "content": "/* eslint-disable no-var,prefer-destructuring,prefer-template,no-undef,object-shorthand,no-console */\n// for testing IE11 compatibility, this file doesn't use ES6 syntax.\n(function (Calendar) {\n var cal;\n // Constants\n var CALENDAR_CSS_PREFIX = 'toastui-calendar-';\n var cls = function (className) {\n return CALENDAR_CSS_PREFIX + className;\n };\n\n // Elements\n var navbarRange = $('.navbar--range');\n var prevButton = $('.prev');\n var nextButton = $('.next');\n var todayButton = $('.today');\n var dropdown = $('.dropdown');\n var dropdownTrigger = $('.dropdown-trigger');\n var dropdownTriggerIcon = $('.dropdown-icon');\n var dropdownContent = $('.dropdown-content');\n var checkboxCollapse = $('.checkbox-collapse');\n var sidebar = $('.sidebar');\n\n // App State\n var appState = {\n activeCalendarIds: MOCK_CALENDARS.map(function (calendar) {\n return calendar.id;\n }),\n isDropdownActive: false,\n };\n\n // functions to handle calendar behaviors\n function reloadEvents() {\n var randomEvents;\n\n cal.clear();\n randomEvents = generateRandomEvents(\n cal.getViewName(),\n cal.getDateRangeStart(),\n cal.getDateRangeEnd()\n );\n cal.createEvents(randomEvents);\n }\n\n function getReadableViewName(viewType) {\n switch (viewType) {\n case 'month':\n return 'Monthly';\n case 'week':\n return 'Weekly';\n case 'day':\n return 'Daily';\n default:\n throw new Error('no view type');\n }\n }\n\n function displayRenderRange() {\n var rangeStart = cal.getDateRangeStart();\n var rangeEnd = cal.getDateRangeEnd();\n\n navbarRange.textContent = getNavbarRange(rangeStart, rangeEnd, cal.getViewName());\n }\n\n function setDropdownTriggerText() {\n var viewName = cal.getViewName();\n var buttonText = $('.dropdown .button-text');\n buttonText.textContent = getReadableViewName(viewName);\n }\n\n function toggleDropdownState() {\n appState.isDropdownActive = !appState.isDropdownActive;\n dropdown.classList.toggle('is-active', appState.isDropdownActive);\n dropdownTriggerIcon.classList.toggle(cls('open'), appState.isDropdownActive);\n }\n\n function setAllCheckboxes(checked) {\n var checkboxes = $$('.sidebar-item > input[type=\"checkbox\"]');\n\n checkboxes.forEach(function (checkbox) {\n checkbox.checked = checked;\n setCheckboxBackgroundColor(checkbox);\n });\n }\n\n function setCheckboxBackgroundColor(checkbox) {\n var calendarId = checkbox.value;\n var label = checkbox.nextElementSibling;\n var calendarInfo = MOCK_CALENDARS.find(function (calendar) {\n return calendar.id === calendarId;\n });\n\n if (!calendarInfo) {\n calendarInfo = {\n backgroundColor: '#2a4fa7',\n };\n }\n\n label.style.setProperty(\n '--checkbox-' + calendarId,\n checkbox.checked ? calendarInfo.backgroundColor : '#fff'\n );\n }\n\n function update() {\n setDropdownTriggerText();\n displayRenderRange();\n reloadEvents();\n }\n\n function bindAppEvents() {\n dropdownTrigger.addEventListener('click', toggleDropdownState);\n\n prevButton.addEventListener('click', function () {\n cal.prev();\n update();\n });\n\n nextButton.addEventListener('click', function () {\n cal.next();\n update();\n });\n\n todayButton.addEventListener('click', function () {\n cal.today();\n update();\n });\n\n dropdownContent.addEventListener('click', function (e) {\n var targetViewName;\n\n if ('viewName' in e.target.dataset) {\n targetViewName = e.target.dataset.viewName;\n cal.changeView(targetViewName);\n checkboxCollapse.disabled = targetViewName === 'month';\n toggleDropdownState();\n update();\n }\n });\n\n checkboxCollapse.addEventListener('change', function (e) {\n if ('checked' in e.target) {\n cal.setOptions({\n week: {\n collapseDuplicateEvents: !!e.target.checked,\n },\n useDetailPopup: !e.target.checked,\n });\n }\n });\n\n sidebar.addEventListener('click', function (e) {\n if ('value' in e.target) {\n if (e.target.value === 'all') {\n if (appState.activeCalendarIds.length > 0) {\n cal.setCalendarVisibility(appState.activeCalendarIds, false);\n appState.activeCalendarIds = [];\n setAllCheckboxes(false);\n } else {\n appState.activeCalendarIds = MOCK_CALENDARS.map(function (calendar) {\n return calendar.id;\n });\n cal.setCalendarVisibility(appState.activeCalendarIds, true);\n setAllCheckboxes(true);\n }\n } else if (appState.activeCalendarIds.indexOf(e.target.value) > -1) {\n appState.activeCalendarIds.splice(appState.activeCalendarIds.indexOf(e.target.value), 1);\n cal.setCalendarVisibility(e.target.value, false);\n setCheckboxBackgroundColor(e.target);\n } else {\n appState.activeCalendarIds.push(e.target.value);\n cal.setCalendarVisibility(e.target.value, true);\n setCheckboxBackgroundColor(e.target);\n }\n }\n });\n }\n\n function bindInstanceEvents() {\n cal.on({\n clickMoreEventsBtn: function (btnInfo) {\n console.log('clickMoreEventsBtn', btnInfo);\n },\n clickEvent: function (eventInfo) {\n console.log('clickEvent', eventInfo);\n },\n clickDayName: function (dayNameInfo) {\n console.log('clickDayName', dayNameInfo);\n },\n selectDateTime: function (dateTimeInfo) {\n console.log('selectDateTime', dateTimeInfo);\n },\n beforeCreateEvent: function (event) {\n console.log('beforeCreateEvent', event);\n event.id = chance.guid();\n\n cal.createEvents([event]);\n cal.clearGridSelections();\n },\n beforeUpdateEvent: function (eventInfo) {\n var event, changes;\n\n console.log('beforeUpdateEvent', eventInfo);\n\n event = eventInfo.event;\n changes = eventInfo.changes;\n\n cal.updateEvent(event.id, event.calendarId, changes);\n },\n beforeDeleteEvent: function (eventInfo) {\n console.log('beforeDeleteEvent', eventInfo);\n\n cal.deleteEvent(eventInfo.id, eventInfo.calendarId);\n },\n });\n }\n\n function initCheckbox() {\n var checkboxes = $$('input[type=\"checkbox\"]');\n\n checkboxes.forEach(function (checkbox) {\n setCheckboxBackgroundColor(checkbox);\n });\n }\n\n function getEventTemplate(event, isAllday) {\n var html = [];\n var start = moment(event.start.toDate().toUTCString());\n if (!isAllday) {\n html.push('' + start.format('HH:mm') + ' ');\n }\n\n if (event.isPrivate) {\n html.push('');\n html.push(' Private');\n } else {\n if (event.recurrenceRule) {\n html.push('');\n } else if (event.attendees.length > 0) {\n html.push('');\n } else if (event.location) {\n html.push('');\n }\n html.push(' ' + event.title);\n }\n\n return html.join('');\n }\n\n // Calendar instance with options\n // eslint-disable-next-line no-undef\n cal = new Calendar('#app', {\n calendars: MOCK_CALENDARS,\n useFormPopup: true,\n useDetailPopup: true,\n eventFilter: function (event) {\n var currentView = cal.getViewName();\n if (currentView === 'month') {\n return ['allday', 'time'].includes(event.category) && event.isVisible;\n }\n\n return event.isVisible;\n },\n template: {\n allday: function (event) {\n return getEventTemplate(event, true);\n },\n time: function (event) {\n return getEventTemplate(event, false);\n },\n },\n });\n\n // Init\n bindInstanceEvents();\n bindAppEvents();\n initCheckbox();\n update();\n})(tui.Calendar);\n" }, { "path": "apps/calendar/examples/scripts/mock-data.js", "content": "/* eslint-disable */\nvar MOCK_CALENDARS = [\n {\n id: '1',\n name: 'My Calendar',\n color: '#ffffff',\n borderColor: '#9e5fff',\n backgroundColor: '#9e5fff',\n dragBackgroundColor: '#9e5fff',\n },\n {\n id: '2',\n name: 'Work',\n color: '#ffffff',\n borderColor: '#00a9ff',\n backgroundColor: '#00a9ff',\n dragBackgroundColor: '#00a9ff',\n },\n {\n id: '3',\n name: 'Family',\n color: '#ffffff',\n borderColor: '#DB473F',\n backgroundColor: '#DB473F',\n dragBackgroundColor: '#DB473F',\n },\n {\n id: '4',\n name: 'Friends',\n color: '#ffffff',\n borderColor: '#03bd9e',\n backgroundColor: '#03bd9e',\n dragBackgroundColor: '#03bd9e',\n },\n {\n id: '5',\n name: 'Travel',\n color: '#ffffff',\n borderColor: '#bbdc00',\n backgroundColor: '#bbdc00',\n dragBackgroundColor: '#bbdc00',\n },\n];\n\nvar EVENT_CATEGORIES = ['milestone', 'task'];\n\nfunction generateRandomEvent(calendar, renderStart, renderEnd) {\n function generateTime(event, renderStart, renderEnd) {\n var startDate = moment(renderStart.getTime());\n var endDate = moment(renderEnd.getTime());\n var diffDate = endDate.diff(startDate, 'days');\n\n event.isAllday = chance.bool({ likelihood: 30 });\n if (event.isAllday) {\n event.category = 'allday';\n } else if (chance.bool({ likelihood: 30 })) {\n event.category = EVENT_CATEGORIES[chance.integer({ min: 0, max: 1 })];\n if (event.category === EVENT_CATEGORIES[1]) {\n event.dueDateClass = 'morning';\n }\n } else {\n event.category = 'time';\n }\n\n startDate.add(chance.integer({ min: 0, max: diffDate }), 'days');\n startDate.hours(chance.integer({ min: 0, max: 23 }));\n startDate.minutes(chance.bool() ? 0 : 30);\n event.start = startDate.toDate();\n\n endDate = moment(startDate);\n if (event.isAllday) {\n endDate.add(chance.integer({ min: 0, max: 3 }), 'days');\n }\n\n event.end = endDate.add(chance.integer({ min: 1, max: 4 }), 'hour').toDate();\n\n if (!event.isAllday && chance.bool({ likelihood: 20 })) {\n event.goingDuration = chance.integer({ min: 30, max: 120 });\n event.comingDuration = chance.integer({ min: 30, max: 120 });\n\n if (chance.bool({ likelihood: 50 })) {\n event.end = event.start;\n }\n }\n }\n\n function generateNames() {\n var names = [];\n var i = 0;\n var length = chance.integer({ min: 1, max: 10 });\n\n for (; i < length; i += 1) {\n names.push(chance.name());\n }\n\n return names;\n }\n\n var id = chance.guid();\n var calendarId = calendar.id;\n var title = chance.sentence({ words: 3 });\n var body = chance.bool({ likelihood: 20 }) ? chance.sentence({ words: 10 }) : '';\n var isReadOnly = chance.bool({ likelihood: 20 });\n var isPrivate = chance.bool({ likelihood: 20 });\n var location = chance.address();\n var attendees = chance.bool({ likelihood: 70 }) ? generateNames() : [];\n var recurrenceRule = '';\n var state = chance.bool({ likelihood: 50 }) ? 'Busy' : 'Free';\n var goingDuration = chance.bool({likelihood: 20}) ? chance.integer({ min: 30, max: 120 }) : 0;\n var comingDuration = chance.bool({likelihood: 20}) ? chance.integer({ min: 30, max: 120 }) : 0;\n var raw = {\n memo: chance.sentence(),\n creator: {\n name: chance.name(),\n avatar: chance.avatar(),\n email: chance.email(),\n phone: chance.phone(),\n },\n };\n\n var event = {\n id: id,\n calendarId: calendarId,\n title: title,\n body: body,\n isReadOnly: isReadOnly,\n isPrivate: isPrivate,\n location: location,\n attendees: attendees,\n recurrenceRule: recurrenceRule,\n state: state,\n goingDuration: goingDuration,\n comingDuration: comingDuration,\n raw: raw,\n }\n\n generateTime(event, renderStart, renderEnd);\n\n if (event.category === 'milestone') {\n event.color = '#000'\n event.backgroundColor = 'transparent';\n event.borderColor = 'transparent';\n event.dragBackgroundColor = 'transparent';\n }\n\n return event;\n}\n\nfunction generateRandomEvents(viewName, renderStart, renderEnd) {\n var i, j;\n var event, duplicateEvent;\n var events = [];\n\n MOCK_CALENDARS.forEach(function(calendar) {\n for (i = 0; i < chance.integer({ min: 20, max: 50 }); i += 1) {\n event = generateRandomEvent(calendar, renderStart, renderEnd);\n events.push(event);\n\n if (i % 5 === 0) {\n for (j = 0; j < chance.integer({min: 0, max: 2}); j+= 1) {\n duplicateEvent = JSON.parse(JSON.stringify(event));\n duplicateEvent.id += `-${j}`;\n duplicateEvent.calendarId = chance.integer({min: 1, max: 5}).toString();\n duplicateEvent.goingDuration = 30 * chance.integer({min: 0, max: 4});\n duplicateEvent.comingDuration = 30 * chance.integer({min: 0, max: 4});\n events.push(duplicateEvent);\n }\n }\n }\n });\n\n return events;\n}\n" }, { "path": "apps/calendar/examples/scripts/utils.js", "content": "/* eslint-disable no-var,prefer-template,no-undef */\nvar $ = function (selector) {\n return document.querySelector(selector);\n};\n\nvar $$ = function (selector) {\n return Array.prototype.slice.call(document.querySelectorAll(selector));\n};\n\nfunction getNavbarRange(tzStart, tzEnd, viewType) {\n var start = tzStart.toDate();\n var end = tzEnd.toDate();\n var middle;\n if (viewType === 'month') {\n middle = new Date(start.getTime() + (end.getTime() - start.getTime()) / 2);\n\n return moment(middle).format('YYYY-MM');\n }\n if (viewType === 'day') {\n return moment(start).format('YYYY-MM-DD');\n }\n if (viewType === 'week') {\n return moment(start).format('YYYY-MM-DD') + ' ~ ' + moment(end).format('YYYY-MM-DD');\n }\n throw new Error('no view type');\n}\n" }, { "path": "apps/calendar/examples/styles/app.css", "content": "@import \"https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css\";\n\n.header {\n padding: 1rem;\n border-bottom: 1px solid #bbb;\n}\n\n.app-container {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n height: 100%;\n}\n\n.content {\n display: flex;\n height: 100%;\n}\n\n.sidebar {\n display: flex;\n flex: 0 1 12rem;\n flex-direction: column;\n padding: 1.25rem;\n background-color: #fafafa;\n border-right: 1px solid #d5d5d5;\n}\n\n.sidebar hr {\n margin: 1rem 0;\n}\n\n.sidebar-item + .sidebar-item {\n margin-top: 0.75rem;\n}\n\n.sidebar .app-footer {\n margin-top: auto;\n font-size: 0.75rem;\n}\n\n.app-column {\n display: flex;\n flex-direction: column;\n flex: 1 0 auto;\n}\n\n.app-column nav {\n flex: 0 1 4rem;\n border-bottom: 1px solid #e5e5e5;\n}\n\n#app {\n flex: 1 0 auto;\n}\n\n.navbar {\n display: flex;\n align-items: center;\n padding: 1rem;\n}\n\n.navbar .dropdown {\n margin-right: 1rem;\n}\n\n.navbar .dropdown .toastui-calendar-icon {\n margin-left: 0.5rem;\n}\n\n.button.prev, .button.next {\n padding: 0.8rem;\n}\n\n.navbar .button + .button {\n margin-left: 0.25rem;\n}\n\n.navbar .navbar--range {\n margin-left: 1rem;\n font-size: 1.25rem;\n}\n\n.navbar .nav-checkbox {\n margin-left: auto;\n}\n\ninput:disabled + label {\n color: #ccc;\n cursor: not-allowed;\n}\n\n.toastui-calendar-template-time strong {\n color: inherit;\n}\n\n.sidebar-item input[type=\"checkbox\"]:not(.checkbox-all) {\n visibility: hidden;\n}\n\n.checkbox {\n position: relative;\n}\n\n.checkbox-calendar::before {\n content: \"\";\n position: absolute;\n left: -1.5rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 50%;\n border: 1px solid #ddd;\n}\n\n.checkbox.checkbox-1::before {\n background-color: var(--checkbox-1);\n}\n\n.checkbox.checkbox-2::before {\n background-color: var(--checkbox-2);\n}\n\n.checkbox.checkbox-3::before {\n background-color: var(--checkbox-3);\n}\n\n.checkbox.checkbox-4::before {\n background-color: var(--checkbox-4);\n}\n\n.checkbox.checkbox-5::before {\n background-color: var(--checkbox-5);\n}\n" }, { "path": "apps/calendar/examples/styles/icons.css", "content": "/* font icons */\n@font-face {\n font-family: 'tui-calendar-font-icon';\n src: url('../fonts/icon.eot') format('embedded-opentype'),\n url('../fonts/icon.ttf') format('truetype'),\n url('../fonts/icon.woff') format('woff'),\n url('../fonts/icon.svg') format('svg');\n}\n\n.calendar-icon {\n width: 14px;\n height: 14px;\n display: inline-block;\n vertical-align: middle;\n}\n\n.calendar-font-icon {\n font-family: 'tui-calendar-font-icon', sans-serif;\n font-size: 10px;\n font-weight: normal;\n}\n\n.img-bi {\n background: url('../images/img-bi.png') no-repeat;\n width: 215px;\n height: 16px;\n}\n\n.ic_view_month {\n background: url('../images/ic-view-month.png') no-repeat;\n}\n\n.ic_view_week {\n background: url('../images/ic-view-week.png') no-repeat;\n}\n\n.ic_view_day {\n background: url('../images/ic-view-day.png') no-repeat;\n}\n\n.ic-arrow-line-left {\n background: url('../images/ic-arrow-line-left.png') no-repeat;\n}\n\n.ic-arrow-line-right {\n background: url('../images/ic-arrow-line-right.png') no-repeat;\n}\n\n.ic-travel-time {\n background: url('../images/ic-traveltime-w.png') no-repeat;\n}\n\n/* font icons */\n.ic-location-b:before {\n content: '\\e900';\n}\n\n.ic-lock-b:before {\n content: '\\e901';\n}\n\n.ic-milestone-b:before {\n content: '\\e902';\n}\n\n.ic-readonly-b:before {\n content: '\\e903';\n}\n\n.ic-repeat-b:before {\n content: '\\e904';\n}\n\n.ic-state-b:before {\n content: '\\e905';\n}\n\n.ic-user-b:before {\n content: '\\e906';\n}\n" }, { "path": "apps/calendar/examples/styles/reset.css", "content": "@import url(https://fonts.googleapis.com/css?family=Noto+Sans);\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n* {\n margin: 0;\n}\n\nhtml, body {\n height: 100%;\n}\n\nbody {\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n font-family: 'Noto Sans', sans-serif;\n}\n\nimg, picture, video, canvas, svg {\n display: block;\n max-width: 100%;\n}\n\ninput, button, textarea, select {\n font: inherit;\n}\n\np, h1, h2, h3, h4, h5, h6 {\n overflow-wrap: break-word;\n}\n" }, { "path": "apps/calendar/jest.config.js", "content": "module.exports = {\n testEnvironment: 'jsdom',\n clearMocks: true,\n preset: 'ts-jest',\n moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'd.ts'],\n moduleNameMapper: {\n '\\\\.(css)$': '/src/test/cssFileMock.ts',\n '^@src/(.*)$': '/src/$1',\n '^@stories/(.*)$': '/stories/$1',\n },\n globals: { 'ts-jest': { tsconfig: '/tsconfig.test.json' } },\n watchPathIgnorePatterns: ['/.storybook', '/.stories', '/node_modules/'],\n testPathIgnorePatterns: ['/node_modules/', '/dist/', '/playwright/'],\n setupFilesAfterEnv: ['/src/setupTests.ts', '/src/test/matchers.ts'],\n};\n" }, { "path": "apps/calendar/jsdoc.conf.json", "content": "{\n \"source\": {\n \"include\": [\n \"src/js/factory/calendar.js\",\n \"src/js/theme/themeConfig.js\",\n \"src/js/common/timezone.js\",\n \"README.md\"\n ],\n \"exclude\": [],\n \"includePattern\": \".+\\\\.js(doc)?$\",\n \"excludePattern\": \"(^|\\\\/|\\\\\\\\)_\"\n },\n \"plugins\": [\n \"plugins/markdown\"\n ],\n \"templates\": {\n \"name\": \"Calendar\",\n \"logo\": {\n \"url\": \"https://cloud.githubusercontent.com/assets/12269563/20029815/01133928-a39a-11e6-80f3-12500a91c755.png\",\n \"width\": \"150px\",\n \"height\": \"13px\",\n \"link\": \"https://github.com/nhn/tui.jsdoc-template\"\n }\n },\n \"opts\": {\n \"private\": false,\n \"recurse\": true,\n \"destination\": \"doc\",\n \"tutorials\": \"examples\",\n \"template\": \"../../node_modules/tui-jsdoc-template\",\n \"package\": \"package.json\"\n }\n}\n" }, { "path": "apps/calendar/package.json", "content": "{\n \"name\": \"@toast-ui/calendar\",\n \"author\": \"NHN Cloud FE Development Lab \",\n \"version\": \"2.1.3\",\n \"main\": \"./dist/toastui-calendar.js\",\n \"types\": \"./types/index.d.ts\",\n \"sideEffects\": [\n \"*.css\"\n ],\n \"module\": \"./dist/toastui-calendar.mjs\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/toastui-calendar.mjs\",\n \"require\": \"./dist/toastui-calendar.js\"\n },\n \"./ie11\": \"./dist/toastui-calendar.ie11.js\",\n \"./esm\": \"./dist/toastui-calendar.mjs\",\n \"./toastui-calendar.css\": \"./dist/toastui-calendar.css\",\n \"./toastui-calendar.min.css\": \"./dist/toastui-calendar.min.css\",\n \"./dist/*\": \"./dist/*\"\n },\n \"typesVersions\": {\n \"*\": {\n \"*\": [\n \"./types/index.d.ts\"\n ]\n }\n },\n \"license\": \"MIT\",\n \"description\": \"TOAST UI Calendar\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/nhn/tui.calendar.git\"\n },\n \"keywords\": [\n \"nhn\",\n \"toast\",\n \"toastui\",\n \"toast-ui\",\n \"calendar\",\n \"fullcalendar\",\n \"daily\",\n \"weekly\",\n \"monthly\",\n \"business week\",\n \"milestone\",\n \"task\",\n \"allday\"\n ],\n \"files\": [\n \"dist\",\n \"types/index.d.ts\",\n \"types/factory\",\n \"types/time/date.d.ts\",\n \"types/types/@(events|options|template|theme|eventBus).d.ts\"\n ],\n \"dependencies\": {\n \"immer\": \"^9.0.15\",\n \"isomorphic-dompurify\": \"^0.20.0\",\n \"preact\": \"^10.10.0\",\n \"preact-render-to-string\": \"^5.2.1\",\n \"tui-date-picker\": \"^4.0.1\",\n \"tui-time-picker\": \"^2.0.1\"\n },\n \"devDependencies\": {\n \"@storybook/addons\": \"^6.5.9\",\n \"@storybook/builder-webpack5\": \"^6.5.9\",\n \"@storybook/core\": \"^6.5.9\",\n \"@storybook/manager-webpack5\": \"^6.5.9\",\n \"@storybook/preact\": \"^6.5.9\",\n \"@storybook/theming\": \"^6.5.9\",\n \"@types/chance\": \"^1.1.3\",\n \"chance\": \"^1.1.8\",\n \"css-loader\": \"^6.7.1\",\n \"css-minimizer-webpack-plugin\": \"^3.4.1\",\n \"eslint-webpack-plugin\": \"^3.2.0\",\n \"postcss\": \"^8.4.14\",\n \"postcss-loader\": \"^6.2.1\",\n \"postcss-prefixer\": \"^2.1.3\",\n \"storybook\": \"^6.5.9\",\n \"style-loader\": \"^3.3.1\",\n \"stylelint\": \"^14.9.1\",\n \"stylelint-config-recommended\": \"^8.0.0\",\n \"stylelint-webpack-plugin\": \"^3.3.0\",\n \"terser-webpack-plugin\": \"^5.3.3\",\n \"webpack-bundle-analyzer\": \"^4.5.0\",\n \"webpack-inject-plugin\": \"^1.5.5\"\n },\n \"scripts\": {\n \"check-types\": \"tsc -p ./tsconfig.json --noEmit\",\n \"lint\": \"npm run check-types && eslint .\",\n \"release-note\": \"tuie\",\n \"build\": \"rimraf dist/ && concurrently 'npm:build:*'\",\n \"build:modern\": \"webpack --config webpack.config.js && webpack --config webpack.config.js --env minify\",\n \"build:ie11\": \"webpack --config webpack.config.js --env ie11 && webpack --config webpack.config.js --env minify ie11\",\n \"build:esm\": \"vite build\",\n \"build:types\": \"rimraf types/ && tsc -p ./tsconfig.declaration.json\",\n \"analyze\": \"webpack --config webpack.config.js --env --profile --json > stats.json && webpack-bundle-analyzer stats.json ./dist\",\n \"develop\": \"npm run storybook\",\n \"storybook\": \"start-storybook -p 6006\",\n \"storybook:build\": \"build-storybook\",\n \"docs:prebuild\": \"npm run build && tsc --outDir tmpdoc --sourceMap false\",\n \"docs:dev\": \"rimraf tmpdoc/ && npm run docs:prebuild && source ~/.nvm/nvm.sh && nvm use 10 && tuidoc --serv\",\n \"docs:build\": \"rimraf tmpdoc/ && npm run docs:prebuild && source ~/.nvm/nvm.sh && nvm use 10 && tuidoc\",\n \"publish:cdn\": \"node scripts/publishToCDN.js\",\n \"update:wrapper\": \"node scripts/updateWrapper.js\"\n }\n}\n" }, { "path": "apps/calendar/playwright/assertions.ts", "content": "import type { Locator, Page } from '@playwright/test';\nimport { expect } from '@playwright/test';\n\nimport type { FormattedTimeString } from '@t/time/datetime';\n\nimport type { BoundingBox } from './types';\nimport { getBoundingBox } from './utils';\n\nexport async function assertDayGridSelectionMatching(\n page: Page,\n startIdx: number,\n endIdx: number,\n cellClassName: string,\n selectionClassName: string\n) {\n const startCellLocator = page.locator(cellClassName).nth(startIdx);\n const endCellLocator = page.locator(cellClassName).nth(endIdx);\n\n const selectionLocator = page.locator(selectionClassName);\n const selectionStartLocator = selectionLocator.first();\n const selectionEndLocator = selectionLocator.last();\n\n const [\n startCellBoundingBox,\n endCellBoundingBox,\n selectionStartBoundingBox,\n selectionEndBoundingBox,\n ] = await Promise.all([\n getBoundingBox(startCellLocator),\n getBoundingBox(endCellLocator),\n getBoundingBox(selectionStartLocator),\n getBoundingBox(selectionEndLocator),\n ]);\n\n expect(selectionStartBoundingBox.x).toBeCloseTo(startCellBoundingBox.x, -1);\n expect(selectionStartBoundingBox.y).toBeCloseTo(startCellBoundingBox.y, -1);\n expect(selectionEndBoundingBox.x + selectionEndBoundingBox.width).toBeCloseTo(\n endCellBoundingBox.x + endCellBoundingBox.width,\n -1\n );\n expect(selectionEndBoundingBox.y).toBeCloseTo(endCellBoundingBox.y, -1);\n\n const totalCellCount = endIdx - startIdx + 1;\n const totalSelectionWidth = await selectionLocator.evaluateAll((selections) =>\n (selections as HTMLElement[]).reduce(\n (total, selectionRow) => selectionRow.getBoundingClientRect().width + total,\n 0\n )\n );\n expect(Math.floor(totalSelectionWidth / totalCellCount)).toBeCloseTo(\n startCellBoundingBox.width,\n -1\n );\n}\n\nexport async function assertAccumulatedDayGridSelectionMatching(\n page: Page,\n startIdx: number,\n endIdx: number,\n nthSelection: number,\n isAcrossWeeks: boolean\n) {\n const cellClassName = '.toastui-calendar-daygrid-cell';\n const selectionClassName =\n '.toastui-calendar-accumulated-grid-selection .toastui-calendar-grid-selection';\n\n const startCellLocator = page.locator(cellClassName).nth(startIdx);\n const endCellLocator = page.locator(cellClassName).nth(endIdx);\n\n const selectionLocator = page.locator(selectionClassName);\n const selectionStartLocator = selectionLocator.nth(nthSelection);\n const selectionEndLocator = selectionLocator.nth(isAcrossWeeks ? nthSelection + 1 : nthSelection);\n\n const [\n startCellBoundingBox,\n endCellBoundingBox,\n selectionStartBoundingBox,\n selectionEndBoundingBox,\n ] = await Promise.all([\n getBoundingBox(startCellLocator),\n getBoundingBox(endCellLocator),\n getBoundingBox(selectionStartLocator),\n getBoundingBox(selectionEndLocator),\n ]);\n\n expect(selectionStartBoundingBox.x).toBeCloseTo(startCellBoundingBox.x, -1);\n expect(selectionStartBoundingBox.y).toBeCloseTo(startCellBoundingBox.y, -1);\n expect(selectionEndBoundingBox.x + selectionEndBoundingBox.width).toBeCloseTo(\n endCellBoundingBox.x + endCellBoundingBox.width,\n -1\n );\n expect(selectionEndBoundingBox.y).toBeCloseTo(endCellBoundingBox.y, -1);\n\n const totalCellCount = endIdx - startIdx + 1;\n const startSelectionWidth = await selectionStartLocator.evaluateAll((selections) =>\n (selections as HTMLElement[]).reduce(\n (total, selectionRow) => selectionRow.getBoundingClientRect().width + total,\n 0\n )\n );\n const endSelectionWidth = await selectionEndLocator.evaluateAll((selections) =>\n (selections as HTMLElement[]).reduce(\n (total, selectionRow) => selectionRow.getBoundingClientRect().width + total,\n 0\n )\n );\n const totalSelectionWidth = isAcrossWeeks\n ? startSelectionWidth + endSelectionWidth\n : (startSelectionWidth + endSelectionWidth) / 2;\n\n expect(Math.floor(totalSelectionWidth / totalCellCount)).toBeCloseTo(\n startCellBoundingBox.width,\n -1\n );\n}\n\nexport function assertBoundingBoxIncluded(targetBox: BoundingBox, wrappingBox: BoundingBox) {\n expect(targetBox.x).toBeGreaterThanOrEqual(wrappingBox.x);\n expect(targetBox.y).toBeGreaterThanOrEqual(wrappingBox.y);\n expect(targetBox.x + targetBox.width).toBeLessThanOrEqual(wrappingBox.x + wrappingBox.width);\n expect(targetBox.y + targetBox.height).toBeLessThanOrEqual(wrappingBox.y + wrappingBox.height);\n}\n\nexport async function assertTimeGridSelection(\n selectionLocator: Locator,\n expected: {\n startTop: number;\n endBottom: number;\n totalElements?: number; // not used in day view tests\n formattedTimes: FormattedTimeString[];\n }\n) {\n const timeGridSelectionElements = (await selectionLocator.evaluateAll(\n (selection) => selection\n )) as HTMLElement[];\n const expectedFormattedTime = expected.formattedTimes.join(' - ');\n\n if (expected.totalElements) {\n expect(timeGridSelectionElements).toHaveLength(expected.totalElements);\n }\n\n await expect(selectionLocator.first()).toHaveText(expectedFormattedTime);\n\n const firstElementBoundingBox = await getBoundingBox(selectionLocator.first());\n expect(firstElementBoundingBox.y).toBeCloseTo(expected.startTop, 0);\n\n const lastElementBoundingBox = await getBoundingBox(selectionLocator.last());\n expect(lastElementBoundingBox.y + lastElementBoundingBox.height).toBeCloseTo(\n expected.endBottom,\n 0\n );\n}\n" }, { "path": "apps/calendar/playwright/configs.ts", "content": "const PORT = process.env.CI ? 8080 : 6006;\n\nconst generatePageUrl = (viewId: string) =>\n `http://localhost:${PORT}/iframe.html?id=${viewId}&args=&viewMode=story`;\n\nexport const DAY_VIEW_PAGE_URL = generatePageUrl('e2e-day-view--fixed-events');\n\nexport const WEEK_VIEW_PAGE_URL = generatePageUrl('e2e-week-view--fixed-events');\n\nexport const WEEK_VIEW_TIMEZONE_PAGE_URL = generatePageUrl(\n 'e2e-week-view--different-primary-timezone'\n);\n\nexport const WEEK_VIEW_DUPLICATE_EVENTS_PAGE_URL = generatePageUrl(\n 'e2e-week-view--duplicate-events'\n);\n\nexport const WEEK_VIEW_HOUR_START_OPTION_PAGE_URL = generatePageUrl(\n 'e2e-week-view--hour-start-option'\n);\n\nexport const MONTH_VIEW_EMPTY_PAGE_URL = generatePageUrl('e2e-month-view--empty');\n\nexport const MONTH_VIEW_PAGE_URL = generatePageUrl('e2e-month-view--fixed-events');\n" }, { "path": "apps/calendar/playwright/constants.ts", "content": "export enum ClickDelay {\n Immediate = 1,\n Short = 100,\n Long = 300,\n}\n" }, { "path": "apps/calendar/playwright/day/timeGridEventMoving.e2e.ts", "content": "import { expect, test } from '@playwright/test';\nimport type { Matchers } from '@playwright/test/types/expect-types';\n\nimport type TZDate from '../../src/time/date';\nimport { addHours, isSameDate, setTimeStrToDate } from '../../src/time/datetime';\nimport type { FormattedTimeString } from '../../src/types/time/datetime';\nimport { mockDayViewEvents } from '../../stories/mocks/mockDayViewEvents';\nimport { DAY_VIEW_PAGE_URL } from '../configs';\nimport {\n dragAndDrop,\n getBoundingBox,\n getGuideTimeEventSelector,\n getTimeEventSelector,\n getTimeGridLineSelector,\n getTimeStrFromDate,\n waitForSingleElement,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(DAY_VIEW_PAGE_URL);\n});\n\nconst MOVE_EVENT_SELECTOR = '[class*=\"dragging--move-event\"]';\n\n// Every time grid events in mockDayViewEvents should include DRAG_START_TIME.\nconst DRAG_START_TIME = '04:00';\n\nconst cases: {\n title: string;\n step: number;\n matcherToCompare: Extract, 'toBeGreaterThan' | 'toBeLessThan'>;\n}[] = [\n {\n title: 'to the top',\n step: -3, // move to 3 hours back\n matcherToCompare: 'toBeLessThan',\n },\n {\n title: 'to the bottom',\n step: 5, // move to 5 hours later\n matcherToCompare: 'toBeGreaterThan',\n },\n];\n\nconst timeEvents = mockDayViewEvents.filter(({ isAllday }) => !isAllday);\nconst [, SHORT_TIME_EVENT] = timeEvents;\n\ntimeEvents.forEach(({ title: eventTitle, start, end }) => {\n test.describe(`Move the ${eventTitle} event in the time grid`, () => {\n cases.forEach(({ title, step }) => {\n test(`${title}`, async ({ page }) => {\n // Given\n const targetEventSelector = `[data-testid*=\"time-event-${eventTitle}\"]`;\n const eventLocator = page.locator(targetEventSelector);\n const eventBoundingBoxBeforeMove = await getBoundingBox(eventLocator);\n\n const dragStartRowLocator = page.locator(getTimeGridLineSelector(DRAG_START_TIME));\n const dragStartRowBoundingBox = await getBoundingBox(dragStartRowLocator);\n\n const targetTime = getTimeStrFromDate(\n addHours(setTimeStrToDate(end, DRAG_START_TIME), step)\n ) as FormattedTimeString;\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetTime));\n const expectedStartTimeAfterMove = getTimeStrFromDate(addHours(start, step));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetRowLocator,\n options: {\n sourcePosition: {\n x: 1,\n y: dragStartRowBoundingBox.y - eventBoundingBoxBeforeMove.y + 1,\n },\n targetPosition: {\n y: 1,\n x: 1,\n },\n },\n });\n await waitForSingleElement(eventLocator);\n\n // Then\n await expect\n .poll(() => eventLocator.textContent())\n .toMatch(new RegExp(expectedStartTimeAfterMove));\n });\n });\n });\n});\n\ntest('When pressing down the ESC key, the moving event resets to the initial position.', async ({\n page,\n}) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const eventBoundingBoxBeforeMove = await getBoundingBox(eventLocator);\n\n const targetStartTime = getTimeStrFromDate(\n addHours(SHORT_TIME_EVENT.end as TZDate, 1)\n ) as FormattedTimeString;\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetStartTime));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetRowLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const eventBoundingBoxAfterMove = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterMove).toEqual(eventBoundingBoxBeforeMove);\n});\n\ntest.describe('CSS class for a move event', () => {\n test('should be applied depending on a dragging state.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const eventBoundingBox = await getBoundingBox(eventLocator);\n const moveEventClassLocator = page.locator(MOVE_EVENT_SELECTOR);\n\n // When (a drag has not started yet)\n await page.mouse.move(eventBoundingBox.x + 10, eventBoundingBox.y + 10);\n await page.mouse.down();\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n\n // When (a drag is working)\n await page.mouse.move(eventBoundingBox.x + 10, eventBoundingBox.y + 50);\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(1);\n\n // When (a drag is finished)\n await page.mouse.up();\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n });\n\n test('should not be applied when a drag is canceled.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const moveEventClassLocator = page.locator(MOVE_EVENT_SELECTOR);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: eventLocator,\n options: {\n targetPosition: { x: 10, y: 30 },\n },\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n });\n});\n\nconst [LONG_TIME_EVENT] = mockDayViewEvents.filter(({ title }) => title === 'long time');\n\ntest.describe(`Calibrate event's height while dragging`, () => {\n cases.forEach(({ title, step, matcherToCompare }) => {\n test(`${title}`, async ({ page }) => {\n // Given\n const targetEventSelector = `[data-testid*=\"time-event-${LONG_TIME_EVENT.title}\"]`;\n const eventLocator = page.locator(targetEventSelector);\n const eventBoundingBoxBeforeMove = await getBoundingBox(eventLocator);\n\n const targetTime = getTimeStrFromDate(\n addHours(setTimeStrToDate(LONG_TIME_EVENT.end, DRAG_START_TIME), step)\n ) as FormattedTimeString;\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetTime));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetRowLocator,\n hold: true,\n });\n\n // Then\n await expect\n .poll(async () => {\n const guideBoundingBox = await getBoundingBox(eventLocator.first());\n return guideBoundingBox.height;\n })\n [matcherToCompare](eventBoundingBoxBeforeMove.height);\n });\n });\n});\n\nconst ONE_DAY_TIME_EVENTS = mockDayViewEvents.filter(\n ({ isAllday, start, end }) => !isAllday && isSameDate(start, end)\n);\n\nONE_DAY_TIME_EVENTS.forEach(({ title }) => {\n test(`The height of guide element should be same as the event element. - ${title}`, async ({\n page,\n }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(title));\n const eventBoundingBox = await getBoundingBox(eventLocator);\n\n const targetRowLocator = page.locator(getTimeGridLineSelector('02:00'));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetRowLocator,\n options: {\n sourcePosition: {\n x: 5,\n y: 5,\n },\n targetPosition: {\n y: 5,\n x: 5,\n },\n },\n hold: true,\n });\n\n // Then\n const guideLocator = page.locator(getGuideTimeEventSelector());\n const guideBoundingBox = await getBoundingBox(guideLocator);\n expect(guideBoundingBox.height).toBeCloseTo(eventBoundingBox.height, 0);\n });\n});\n" }, { "path": "apps/calendar/playwright/day/timeGridEventResizing.e2e.ts", "content": "import type { Page } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\nimport type { Matchers } from '@playwright/test/types/expect-types';\n\nimport type TZDate from '../../src/time/date';\nimport { addHours, addMinutes } from '../../src/time/datetime';\nimport type { FormattedTimeString } from '../../src/types/time/datetime';\nimport { mockDayViewEvents } from '../../stories/mocks/mockDayViewEvents';\nimport { DAY_VIEW_PAGE_URL } from '../configs';\nimport {\n dragAndDrop,\n getBoundingBox,\n getTimeEventSelector,\n getTimeGridLineSelector,\n getTimeStrFromDate,\n waitForSingleElement,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(DAY_VIEW_PAGE_URL);\n});\n\nconst RESIZE_HANDLER_SELECTOR = '[class*=\"resize-handler\"]';\nconst RESIZE_EVENT_SELECTOR = '[class*=\"dragging--resize-vertical-event\"]';\n\nconst cases: {\n title: string;\n step: number;\n matcherToCompare: Extract, 'toBeGreaterThan' | 'toBeLessThan'>;\n}[] = [\n {\n title: 'to the top',\n step: -1, // move the end time to 1 hour back\n matcherToCompare: 'toBeLessThan',\n },\n {\n title: 'to the bottom',\n step: 2, // move the end time to 2 hours later\n matcherToCompare: 'toBeGreaterThan',\n },\n];\n\nasync function setup({\n page,\n targetEventTitle,\n targetEndTime,\n}: {\n page: Page;\n targetEventTitle: string;\n targetEndTime: FormattedTimeString;\n}) {\n // Given\n const targetEventSelector = `[data-testid*=\"time-event-${targetEventTitle}\"]`;\n const eventLocator = page.locator(targetEventSelector);\n const eventBoundingBoxBeforeResize = await getBoundingBox(eventLocator);\n\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetEndTime));\n const targetRowBoundingBox = await getBoundingBox(targetRowLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: targetRowLocator,\n options: {\n sourcePosition: {\n x: 1,\n y: 1,\n },\n targetPosition: {\n x: 1,\n y: targetRowBoundingBox.height / 2,\n },\n },\n });\n\n await waitForSingleElement(eventLocator);\n const eventBoundingBoxAfterResize = await getBoundingBox(eventLocator);\n\n return {\n eventLocator,\n eventBoundingBoxBeforeResize,\n eventBoundingBoxAfterResize,\n targetRowBoundingBox,\n };\n}\n\nconst timeEvents = mockDayViewEvents.filter(\n ({ isAllday, goingDuration, comingDuration }) => !isAllday && !goingDuration && !comingDuration\n);\nconst [, SHORT_TIME_EVENT] = timeEvents;\n\ntimeEvents.forEach(({ title: eventTitle, start, end }) => {\n test.describe(`Resize the ${eventTitle} event in the time grid`, () => {\n cases.forEach(({ title, step, matcherToCompare: compareAssertion }) => {\n test(`${title}`, async ({ page }) => {\n const targetEndTime = getTimeStrFromDate(\n addMinutes(end, (step * 2 - 1) * 30)\n ) as FormattedTimeString;\n const {\n eventLocator,\n eventBoundingBoxBeforeResize,\n eventBoundingBoxAfterResize,\n targetRowBoundingBox,\n } = await setup({\n page,\n targetEventTitle: eventTitle,\n targetEndTime,\n });\n\n // Then\n expect(eventBoundingBoxAfterResize.height)[compareAssertion](\n eventBoundingBoxBeforeResize.height\n );\n\n await expect.poll(() => eventLocator.textContent()).toContain(getTimeStrFromDate(start));\n\n expect(\n eventBoundingBoxAfterResize.height - eventBoundingBoxBeforeResize.height\n ).toBeCloseTo(targetRowBoundingBox.height * step * 2, -1);\n });\n });\n\n test(`then it should have a minimum height(=1 row) even if the event is resized to before the start time`, async ({\n page,\n }) => {\n const { eventBoundingBoxAfterResize, targetRowBoundingBox } = await setup({\n page,\n targetEventTitle: eventTitle,\n targetEndTime: '00:00',\n });\n\n // Then\n expect(eventBoundingBoxAfterResize.height).toBeCloseTo(targetRowBoundingBox.height, -1);\n });\n });\n});\n\ntest('When pressing down the ESC key, the resizing event resets to the initial size.', async ({\n page,\n}) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const eventBoundingBoxBeforeResize = await getBoundingBox(eventLocator);\n\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n\n const targetStartTime = getTimeStrFromDate(\n addHours(SHORT_TIME_EVENT.end as TZDate, 1)\n ) as FormattedTimeString;\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetStartTime));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: targetRowLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const eventBoundingBoxAfterResize = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterResize).toEqual(eventBoundingBoxBeforeResize);\n});\n\ntest.describe('CSS class for a resize event', () => {\n test('should be applied depending on a dragging state.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n const resizeHandlerBoundingBox = await getBoundingBox(resizeHandlerLocator);\n\n const resizeEventClassLocator = page.locator(RESIZE_EVENT_SELECTOR);\n\n // When (a drag has not started yet)\n await page.mouse.move(resizeHandlerBoundingBox.x + 10, resizeHandlerBoundingBox.y + 3);\n await page.mouse.down();\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n\n // When (a drag is working)\n await page.mouse.move(resizeHandlerBoundingBox.x + 10, resizeHandlerBoundingBox.y + 50);\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(1);\n\n // When (a drag is finished)\n await page.mouse.up();\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n });\n\n test('should not be applied when a drag is canceled.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n\n const resizeEventClassLocator = page.locator(RESIZE_EVENT_SELECTOR);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: resizeHandlerLocator,\n options: {\n targetPosition: { x: 10, y: 30 },\n },\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n });\n});\n" }, { "path": "apps/calendar/playwright/day/timeGridScrollSync.e2e.ts", "content": "import type { Page } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport { mockDayViewEvents } from '../../stories/mocks/mockDayViewEvents';\nimport { DAY_VIEW_PAGE_URL } from '../configs';\nimport { getBoundingBox, getPrefixedClassName } from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(DAY_VIEW_PAGE_URL);\n});\n\n// NOTE: Syncing scroll only happens when the mousemove event is fired\n// and cannot use `dragAndDrop` because it's better to be manually controlled.\n\nfunction getScrollTop(el: HTMLElement) {\n return el.scrollTop;\n}\n\ntest.describe('Scroll syncing in time grid when selecting grid', () => {\n /**\n * Top right of the column should be empty\n */\n async function setup(page: Page) {\n const timeGridContainerLocator = page.locator(\n `${getPrefixedClassName('panel')}${getPrefixedClassName('time')}`\n );\n const targetColumnLocator = page.locator('[data-testid*=timegrid-column]');\n\n const containerBoundingBox = await getBoundingBox(timeGridContainerLocator);\n const columnBoundingBox = await getBoundingBox(targetColumnLocator);\n\n return {\n targetColumnLocator,\n timeGridContainerLocator,\n containerBoundingBox,\n columnBoundingBox,\n };\n }\n\n test('it should sync scroll while dragging down to the bottom', async ({ page }) => {\n // Given\n const {\n targetColumnLocator,\n columnBoundingBox,\n timeGridContainerLocator,\n containerBoundingBox,\n } = await setup(page);\n const scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n\n // When\n await targetColumnLocator.hover({\n position: {\n x: columnBoundingBox.width - 10,\n y: 10,\n },\n force: true,\n });\n await page.mouse.down();\n await page.mouse.move(\n columnBoundingBox.x + columnBoundingBox.width / 2,\n containerBoundingBox.y + containerBoundingBox.height - 10\n );\n\n // Then\n await expect\n .poll(async () => {\n const scrollTopAfterSync = await timeGridContainerLocator.evaluate(getScrollTop);\n return scrollTopAfterSync;\n })\n .toBeGreaterThan(scrollTopBeforeSync);\n });\n\n test('it should sync scroll while dragging up to the top', async ({ page }) => {\n // Given\n const {\n targetColumnLocator,\n columnBoundingBox,\n timeGridContainerLocator,\n containerBoundingBox,\n } = await setup(page);\n\n // Middle of the column\n const xPosition = columnBoundingBox.x + columnBoundingBox.width / 2;\n\n // Scroll down to the bottom of the column\n await targetColumnLocator.hover();\n await page.mouse.wheel(0, containerBoundingBox.height);\n let scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n await expect\n .poll(async () => {\n scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n\n return scrollTopBeforeSync;\n })\n .toBeCloseTo(containerBoundingBox.height, -2);\n\n // When\n // drag up to the top of the column\n await page.mouse.move(xPosition, containerBoundingBox.y + containerBoundingBox.height - 10);\n await page.mouse.down();\n\n await expect\n .poll(async () => {\n await page.mouse.move(xPosition, containerBoundingBox.y);\n\n // Then\n const scrollTopAfterSync = await timeGridContainerLocator.evaluate(getScrollTop);\n return scrollTopAfterSync;\n })\n .toBeLessThan(scrollTopBeforeSync);\n });\n});\n\nmockDayViewEvents\n .filter(({ isAllday }) => !isAllday)\n .forEach(({ title: eventTitle }) => {\n test.describe(`Scroll syncing in time grid when moving the ${eventTitle} event`, () => {\n async function setup(page: Page) {\n const timeGridContainerLocator = page.locator(\n `${getPrefixedClassName('panel')}${getPrefixedClassName('time')}`\n );\n const targetEventLocator = page.locator(`[data-testid*=\"time-event-${eventTitle}\"]`);\n const containerBoundingBox = await getBoundingBox(timeGridContainerLocator);\n const eventBoundingBox = await getBoundingBox(targetEventLocator);\n\n return {\n timeGridContainerLocator,\n targetEventLocator,\n containerBoundingBox,\n eventBoundingBox,\n };\n }\n\n test('it should sync scroll while moving event to the edge of the bottom', async ({\n page,\n }) => {\n // Given\n const {\n timeGridContainerLocator,\n targetEventLocator,\n containerBoundingBox,\n eventBoundingBox,\n } = await setup(page);\n const scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n\n // When\n await targetEventLocator.hover({\n position: {\n x: eventBoundingBox.width / 2,\n y: 3,\n },\n force: true,\n });\n await page.mouse.down();\n await page.mouse.move(\n eventBoundingBox.x + eventBoundingBox.width / 2,\n containerBoundingBox.y + containerBoundingBox.height - 10\n );\n await page.mouse.up();\n\n // Then\n await expect\n .poll(async () => {\n const scrollTopAfterSync = await timeGridContainerLocator.evaluate(getScrollTop);\n return scrollTopAfterSync;\n })\n .toBeGreaterThan(scrollTopBeforeSync);\n });\n\n test('it should sync scroll while moving event to the edge of the top', async ({ page }) => {\n // Given\n const {\n timeGridContainerLocator,\n targetEventLocator,\n containerBoundingBox,\n eventBoundingBox,\n } = await setup(page);\n\n // Let's move the event to the bottom first.\n const middleXOfEvent = eventBoundingBox.x + eventBoundingBox.width / 2;\n await targetEventLocator.hover({\n position: {\n x: eventBoundingBox.width / 2,\n y: 3,\n },\n force: true,\n });\n await page.mouse.down();\n await page.mouse.move(\n middleXOfEvent,\n containerBoundingBox.y + containerBoundingBox.height - 10\n );\n await page.mouse.up();\n\n // Then scroll down a little.\n await page.mouse.wheel(0, containerBoundingBox.height / 2);\n let scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n await expect\n .poll(async () => {\n scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n\n return scrollTopBeforeSync;\n })\n .toBeGreaterThan(containerBoundingBox.height / 2);\n\n // When\n await targetEventLocator.hover({\n position: {\n x: eventBoundingBox.width / 2,\n y: 3,\n },\n force: true,\n });\n await page.mouse.down();\n\n await expect\n .poll(async () => {\n await page.mouse.move(middleXOfEvent, containerBoundingBox.y);\n\n // Then\n const scrollTopAfterSync = await timeGridContainerLocator.evaluate(getScrollTop);\n return scrollTopAfterSync;\n })\n .toBeLessThan(scrollTopBeforeSync);\n });\n });\n });\n" }, { "path": "apps/calendar/playwright/day/timeGridSelection.e2e.ts", "content": "import { expect, test } from '@playwright/test';\n\nimport { assertTimeGridSelection } from '../assertions';\nimport { DAY_VIEW_PAGE_URL } from '../configs';\nimport { ClickDelay } from '../constants';\nimport {\n dragAndDrop,\n getBoundingBox,\n getTimeGridLineSelector,\n waitForSingleElement,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(DAY_VIEW_PAGE_URL);\n});\n\nconst GRID_SELECTION_SELECTOR = '[data-testid*=\"time-grid-selection\"]';\n\n// NOTE: Only firefox automatically scrolls into view at some random tests, so narrowing the range of movement.\n// Maybe `scrollIntoViewIfNeeded` is not supported in the firefox?\n// reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded\ntest.describe('TimeGrid Selection', () => {\n const SELECT_START_TIME = '03:00';\n\n test('should be able to select a time slot with clicking', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(getTimeGridLineSelector(SELECT_START_TIME));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n\n // When\n await startGridLineLocator.click({ force: true, delay: ClickDelay.Long });\n await waitForSingleElement(timeGridSelectionLocator); // Test for debounced click handler.\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n startTop: startGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n formattedTimes: ['03:00', '03:30'],\n });\n });\n\n test.fixme('should be able to select a time slot with double clicking', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(getTimeGridLineSelector(SELECT_START_TIME));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n\n // When\n await startGridLineLocator.dblclick({ force: true, delay: ClickDelay.Immediate });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n startTop: startGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n formattedTimes: ['03:00', '03:30'],\n });\n });\n\n test('should be able to select a range of time from top to bottom', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(getTimeGridLineSelector(SELECT_START_TIME));\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('05:00'));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n formattedTimes: ['03:00', '05:30'],\n startTop: startGridLineBoundingBox.y,\n endBottom: targetGridLineBoundingBox.y + targetGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time from bottom to top', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(getTimeGridLineSelector(SELECT_START_TIME));\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('01:00'));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n formattedTimes: ['01:00', '03:30'],\n startTop: targetGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n});\n\ntest('When pressing down the ESC key, the grid selection is canceled.', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(getTimeGridLineSelector('03:00'));\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('05:00'));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const gridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n expect(await gridSelectionLocator.count()).toBe(0);\n});\n" }, { "path": "apps/calendar/playwright/month/accumulatedGridSelection.e2e.ts", "content": "import { test } from '@playwright/test';\n\nimport { assertAccumulatedDayGridSelectionMatching } from '../assertions';\nimport { MONTH_VIEW_EMPTY_PAGE_URL } from '../configs';\nimport { selectMonthGridCells } from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(MONTH_VIEW_EMPTY_PAGE_URL);\n});\n\ntest('select 2 cells in each week', async ({ page }) => {\n await selectMonthGridCells(page, 21, 23);\n await selectMonthGridCells(page, 28, 30);\n\n await assertAccumulatedDayGridSelectionMatching(page, 21, 23, 0, false);\n});\n\ntest('select 2 cells across 2 weeks', async ({ page }) => {\n await selectMonthGridCells(page, 13, 14);\n await selectMonthGridCells(page, 20, 21);\n\n await assertAccumulatedDayGridSelectionMatching(page, 13, 14, 0, true);\n});\n\ntest('select cell across 2 weeks and select cell in 1 week', async ({ page }) => {\n await selectMonthGridCells(page, 13, 14);\n await selectMonthGridCells(page, 24, 25);\n\n await assertAccumulatedDayGridSelectionMatching(page, 13, 14, 0, true);\n});\n" }, { "path": "apps/calendar/playwright/month/eventMoving.e2e.ts", "content": "import type { Page } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport type { EventObject } from '../../src/types/events';\nimport { mockMonthViewEventsFixed } from '../../stories/mocks/mockMonthViewEvents';\nimport { MONTH_VIEW_PAGE_URL } from '../configs';\nimport { Direction } from '../types';\nimport {\n dragAndDrop,\n getBoundingBox,\n getCellSelector,\n getHorizontalEventSelector,\n waitForSingleElement,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(MONTH_VIEW_PAGE_URL);\n});\n\nconst MOVE_EVENT_SELECTOR = '[class*=\"dragging--move-event\"]';\n\nconst [TARGET_EVENT1, TARGET_EVENT2, TARGET_EVENT3] = mockMonthViewEventsFixed;\nconst testCases: {\n event: EventObject;\n startCellIndex: number;\n endCellIndex: number;\n directions: Direction[];\n}[] = [\n {\n event: TARGET_EVENT1,\n startCellIndex: 7,\n endCellIndex: 16,\n directions: [Direction.Up, Direction.Right, Direction.Down],\n },\n {\n event: TARGET_EVENT2,\n startCellIndex: 16,\n endCellIndex: 18,\n directions: [Direction.Up, Direction.Right, Direction.Down, Direction.Left],\n },\n {\n event: TARGET_EVENT3,\n startCellIndex: 25,\n endCellIndex: 27,\n directions: [Direction.Up, Direction.Right, Direction.Down, Direction.Left],\n },\n];\nconst rightDirectionTestCases = testCases.filter((testCase) =>\n testCase.directions.includes(Direction.Right)\n);\nconst leftDirectionTestCases = testCases.filter((testCase) =>\n testCase.directions.includes(Direction.Left)\n);\nconst lowerDirectionTestCases = testCases.filter((testCase) =>\n testCase.directions.includes(Direction.Down)\n);\nconst upperDirectionTestCases = testCases.filter((testCase) =>\n testCase.directions.includes(Direction.Up)\n);\n\nasync function setup(page: Page, event: EventObject, targetCellIndex: number) {\n const targetCellLocator = page.locator(getCellSelector(targetCellIndex));\n const targetCellBoundingBox = await getBoundingBox(targetCellLocator);\n const eventLocator = page.locator(getHorizontalEventSelector(event)).first();\n const boundingBoxBeforeMoving = await getBoundingBox(eventLocator);\n\n await dragAndDrop({ page, sourceLocator: eventLocator, targetLocator: targetCellLocator });\n await waitForSingleElement(eventLocator);\n\n let boundingBoxAfterMoving = await getBoundingBox(eventLocator);\n await expect\n .poll(async () => {\n boundingBoxAfterMoving = await getBoundingBox(eventLocator);\n\n return boundingBoxAfterMoving;\n })\n .not.toEqual(boundingBoxBeforeMoving);\n\n return {\n targetCellBoundingBox,\n boundingBoxBeforeMoving,\n boundingBoxAfterMoving,\n };\n}\n\ntest.describe('event moving', () => {\n /**\n * Suppose we have the following cells in the month view.\n * Each number represents the index of the cell.\n *\n * [\n * [ 0, 1, 2, 3, 4, 5, 6],\n * [ 7, 8, 9, 10, 11, 12, 13],\n * [14, 15, 16, 17, 18, 19 ,20],\n * [21, 22, 23, 24, 25, 26, 27],\n * [28, 29, 30, 31, 32, 33, 34],\n * ]\n */\n\n rightDirectionTestCases.forEach(({ event, startCellIndex }) => {\n const getRightCellIndex = (cellIndex: number) => cellIndex + 1;\n\n test(`moving month event ${event.title} for direction right`, async ({ page }) => {\n // Given\n const rightCellIndex = getRightCellIndex(startCellIndex);\n\n // When\n const { targetCellBoundingBox, boundingBoxBeforeMoving, boundingBoxAfterMoving } =\n await setup(page, event, rightCellIndex);\n\n // Then\n expect(boundingBoxAfterMoving.x).toBeGreaterThan(boundingBoxBeforeMoving.x);\n expect(boundingBoxAfterMoving.x).toBeCloseTo(targetCellBoundingBox.x, 1);\n expect(boundingBoxAfterMoving.x).toBeLessThan(\n targetCellBoundingBox.x + targetCellBoundingBox.width\n );\n });\n });\n\n leftDirectionTestCases.forEach(({ event, startCellIndex }) => {\n const getLeftCellIndex = (cellIndex: number) => cellIndex - 1;\n\n test(`moving month event ${event.title} for direction left`, async ({ page }) => {\n // Given\n const leftCellIndex = getLeftCellIndex(startCellIndex);\n\n // When\n const { targetCellBoundingBox, boundingBoxBeforeMoving, boundingBoxAfterMoving } =\n await setup(page, event, leftCellIndex);\n\n // Then\n expect(boundingBoxAfterMoving.x).toBeLessThan(boundingBoxBeforeMoving.x);\n expect(boundingBoxAfterMoving.x).toBeCloseTo(targetCellBoundingBox.x, 1);\n expect(boundingBoxAfterMoving.x).toBeLessThan(\n targetCellBoundingBox.x + targetCellBoundingBox.width\n );\n });\n });\n\n lowerDirectionTestCases.forEach(({ event, startCellIndex }) => {\n const getDownCellIndex = (cellIndex: number) => cellIndex + 7;\n\n test(`moving month event ${event.title} for direction down`, async ({ page }) => {\n // Given\n const downCellIndex = getDownCellIndex(startCellIndex);\n\n // When\n const { targetCellBoundingBox, boundingBoxBeforeMoving, boundingBoxAfterMoving } =\n await setup(page, event, downCellIndex);\n\n // Then\n expect(boundingBoxAfterMoving.y).toBeGreaterThan(boundingBoxBeforeMoving.y);\n expect(boundingBoxAfterMoving.width).toBeCloseTo(boundingBoxBeforeMoving.width);\n expect(boundingBoxAfterMoving.y).toBeGreaterThan(targetCellBoundingBox.y);\n expect(boundingBoxAfterMoving.y).toBeLessThan(\n targetCellBoundingBox.y + targetCellBoundingBox.height\n );\n });\n });\n\n upperDirectionTestCases.forEach(({ event, startCellIndex }) => {\n const getUpCellIndex = (cellIndex: number) => cellIndex - 7;\n\n test(`moving month event ${event.title} for direction up`, async ({ page }) => {\n // Given\n const upCellIndex = getUpCellIndex(startCellIndex);\n\n // When\n const { targetCellBoundingBox, boundingBoxBeforeMoving, boundingBoxAfterMoving } =\n await setup(page, event, upCellIndex);\n\n // Then\n expect(boundingBoxAfterMoving.y).toBeLessThan(boundingBoxBeforeMoving.y);\n expect(boundingBoxAfterMoving.width).toBeCloseTo(boundingBoxBeforeMoving.width);\n expect(boundingBoxAfterMoving.y).toBeGreaterThan(targetCellBoundingBox.y);\n expect(boundingBoxAfterMoving.y).toBeLessThan(\n targetCellBoundingBox.y + targetCellBoundingBox.height\n );\n });\n });\n\n test('moving month grid event to end of week', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getHorizontalEventSelector(TARGET_EVENT2));\n const endOfWeekCellLocator = page.locator(getCellSelector(20));\n const endOfWeekCellBoundingBox = await getBoundingBox(endOfWeekCellLocator);\n const secondOfWeekCellLocator = page.locator(getCellSelector(22));\n const secondOfWeekCellBoundingBox = await getBoundingBox(secondOfWeekCellLocator);\n\n // When\n await dragAndDrop({ page, sourceLocator: eventLocator, targetLocator: endOfWeekCellLocator });\n\n // Then\n await expect.poll(() => eventLocator.evaluateAll((events) => events.length)).toBe(2);\n\n const targetEventLength = await eventLocator.evaluateAll((events) =>\n (events as HTMLElement[]).reduce(\n (total, eventRow) => eventRow.getBoundingClientRect().width + total,\n 0\n )\n );\n const firstEventLocator = eventLocator.first();\n const lastEventLocator = eventLocator.last();\n const firstEventBoundingBox = await getBoundingBox(firstEventLocator);\n const lastEventBoundingBox = await getBoundingBox(lastEventLocator);\n\n expect(firstEventBoundingBox.x).toBeCloseTo(endOfWeekCellBoundingBox.x, 3);\n expect(lastEventBoundingBox.x).toBeLessThan(\n secondOfWeekCellBoundingBox.x + secondOfWeekCellBoundingBox.width\n );\n expect(firstEventBoundingBox.y).toBeLessThan(secondOfWeekCellBoundingBox.y);\n expect(lastEventBoundingBox.y).toBeGreaterThan(secondOfWeekCellBoundingBox.y);\n expect(targetEventLength).toBeCloseTo(endOfWeekCellBoundingBox.width * 3, 1);\n });\n});\n\ntest('When pressing down the ESC key, the moving event resets to the initial position.', async ({\n page,\n}) => {\n // Given\n const eventLocator = page.locator(getHorizontalEventSelector(TARGET_EVENT2)).first();\n const eventBoundingBoxBeforeMove = await getBoundingBox(eventLocator);\n\n const targetCellLocator = page.locator(getCellSelector(20));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetCellLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const eventBoundingBoxAfterMove = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterMove).toEqual(eventBoundingBoxBeforeMove);\n});\n\ntest.describe('CSS class for a move event', () => {\n test('should be applied depending on a dragging state.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getHorizontalEventSelector(TARGET_EVENT2)).first();\n const eventBoundingBox = await getBoundingBox(eventLocator);\n const moveEventClassLocator = page.locator(MOVE_EVENT_SELECTOR);\n\n // When (a drag has not started yet)\n await page.mouse.move(eventBoundingBox.x + 10, eventBoundingBox.y + 10);\n await page.mouse.down();\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n\n // When (a drag is working)\n await page.mouse.move(eventBoundingBox.x + 10, eventBoundingBox.y + 50);\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(1);\n\n // When (a drag is finished)\n await page.mouse.up();\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n });\n\n test('should not be applied when a drag is canceled.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getHorizontalEventSelector(TARGET_EVENT2)).first();\n const moveEventClassLocator = page.locator(MOVE_EVENT_SELECTOR);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: eventLocator,\n options: {\n targetPosition: { x: 10, y: 30 },\n },\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n });\n});\n" }, { "path": "apps/calendar/playwright/month/eventResizing.e2e.ts", "content": "import type { Locator } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport { mockMonthViewEventsFixed } from '../../stories/mocks/mockMonthViewEvents';\nimport { assertBoundingBoxIncluded } from '../assertions';\nimport { MONTH_VIEW_PAGE_URL } from '../configs';\nimport {\n dragAndDrop,\n getBoundingBox,\n getCellSelector,\n getHorizontalEventSelector,\n waitForSingleElement,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(MONTH_VIEW_PAGE_URL);\n});\n\nconst RESIZE_EVENT_SELECTOR = '[class*=\"dragging--resize-horizontal-event\"]';\n\nconst [TARGET_EVENT1, TARGET_EVENT2] = mockMonthViewEventsFixed;\n\nfunction getResizeIconLocatorOfEvent(eventLocator: Locator) {\n return eventLocator.last().locator('data-testid=horizontal-event-resize-icon');\n}\n\ntest.describe('event resizing', () => {\n /**\n * Suppose we have the following cells in the month view.\n * Each number represents the index of the cell.\n *\n * [\n * [ 0, 1, 2, 3, 4, 5, 6],\n * [ 7, 8, 9, 10, 11, 12, 13],\n * [14, 15, 16, 17, 18, 19 ,20],\n * [21, 22, 23, 24, 25, 26, 27],\n * [28, 29, 30, 31, 32, 33, 34],\n * ]\n */\n\n // target event is rendered from #7 to #16\n const RESIZE_TARGET_SELECTOR = getHorizontalEventSelector(TARGET_EVENT1);\n\n test('resize event to the right in the same row', async ({ page }) => {\n // Given\n const eventsLocator = page.locator(RESIZE_TARGET_SELECTOR);\n const resizeIconLocator = getResizeIconLocatorOfEvent(eventsLocator);\n const targetCellLocator = page.locator(getCellSelector(19));\n const eventBoundingBoxBeforeResizing = await getBoundingBox(eventsLocator.last());\n\n // When\n await dragAndDrop({ page, sourceLocator: resizeIconLocator, targetLocator: targetCellLocator });\n\n // Then\n await expect.poll(() => eventsLocator.count()).toBe(2);\n\n await expect\n .poll(async () => {\n const eventBoundingBoxAfterResizing = await getBoundingBox(eventsLocator.last());\n return eventBoundingBoxAfterResizing.width;\n })\n .toBeGreaterThan(eventBoundingBoxBeforeResizing.width);\n\n const targetCellBoundingBox = await getBoundingBox(targetCellLocator);\n const resizeIconBoundingBoxAfterResizing = await getBoundingBox(resizeIconLocator);\n assertBoundingBoxIncluded(resizeIconBoundingBoxAfterResizing, targetCellBoundingBox);\n });\n\n test('resize event to the left in the same row', async ({ page }) => {\n // Given\n const eventsLocator = page.locator(RESIZE_TARGET_SELECTOR);\n const resizeIconLocator = getResizeIconLocatorOfEvent(eventsLocator);\n const targetCellLocator = page.locator(getCellSelector(14));\n const eventBoundingBoxBeforeResizing = await getBoundingBox(eventsLocator.last());\n\n // When\n await dragAndDrop({ page, sourceLocator: resizeIconLocator, targetLocator: targetCellLocator });\n\n // Then\n await expect.poll(() => eventsLocator.count()).toBe(2);\n\n await expect\n .poll(async () => {\n const eventBoundingBoxAfterResizing = await getBoundingBox(eventsLocator.last());\n return eventBoundingBoxAfterResizing.width;\n })\n .toBeLessThan(eventBoundingBoxBeforeResizing.width);\n\n const targetCellBoundingBox = await getBoundingBox(targetCellLocator);\n const resizeIconBoundingBoxAfterResizing = await getBoundingBox(resizeIconLocator);\n assertBoundingBoxIncluded(resizeIconBoundingBoxAfterResizing, targetCellBoundingBox);\n });\n\n test('resize event to the right in the next two rows', async ({ page }) => {\n // Given\n const eventsLocator = page.locator(RESIZE_TARGET_SELECTOR);\n const resizeIconLocator = getResizeIconLocatorOfEvent(eventsLocator);\n const targetCellLocator = page.locator(getCellSelector(31));\n\n // When\n await dragAndDrop({ page, sourceLocator: resizeIconLocator, targetLocator: targetCellLocator });\n\n // Then\n await expect.poll(() => eventsLocator.count()).toBe(4);\n\n const resizeIconBoundingBoxAfterResizing = await getBoundingBox(resizeIconLocator);\n const targetCellBoundingBox = await getBoundingBox(targetCellLocator);\n assertBoundingBoxIncluded(resizeIconBoundingBoxAfterResizing, targetCellBoundingBox);\n });\n\n test('resize event to the left in the next two rows', async ({ page }) => {\n // Given\n const eventsLocator = page.locator(RESIZE_TARGET_SELECTOR);\n const resizeIconLocator = getResizeIconLocatorOfEvent(eventsLocator);\n const targetCellLocator = page.locator(getCellSelector(28));\n\n // When\n await dragAndDrop({ page, sourceLocator: resizeIconLocator, targetLocator: targetCellLocator });\n\n // Then\n await expect.poll(() => eventsLocator.count()).toBe(4);\n\n const resizeIconBoundingBoxAfterResizing = await getBoundingBox(resizeIconLocator);\n const targetCellBoundingBox = await getBoundingBox(targetCellLocator);\n assertBoundingBoxIncluded(resizeIconBoundingBoxAfterResizing, targetCellBoundingBox);\n });\n\n test('shrink event - to the end of the first row of rendered events', async ({ page }) => {\n // Given\n const eventsLocator = page.locator(RESIZE_TARGET_SELECTOR);\n const resizeIconLocator = getResizeIconLocatorOfEvent(eventsLocator);\n const targetCellLocator = page.locator(getCellSelector(13));\n\n // When\n await dragAndDrop({ page, sourceLocator: resizeIconLocator, targetLocator: targetCellLocator });\n await waitForSingleElement(eventsLocator);\n\n // Then\n const resizeIconBoundingBoxAfterResizing = await getBoundingBox(resizeIconLocator);\n const targetCellBoundingBox = await getBoundingBox(targetCellLocator);\n assertBoundingBoxIncluded(resizeIconBoundingBoxAfterResizing, targetCellBoundingBox);\n });\n\n test('shrink event - to take place of just one cell', async ({ page }) => {\n // Given\n const eventsLocator = page.locator(RESIZE_TARGET_SELECTOR);\n const resizeIconLocator = getResizeIconLocatorOfEvent(eventsLocator);\n const targetCellLocator = page.locator(getCellSelector(7));\n\n // When\n await dragAndDrop({ page, sourceLocator: resizeIconLocator, targetLocator: targetCellLocator });\n await waitForSingleElement(eventsLocator);\n\n // Then\n const resizeIconBoundingBoxAfterResizing = await getBoundingBox(resizeIconLocator);\n const targetCellBoundingBox = await getBoundingBox(targetCellLocator);\n assertBoundingBoxIncluded(resizeIconBoundingBoxAfterResizing, targetCellBoundingBox);\n });\n\n test('prevent resizing when dragging to above the first row of the event or left of the first cell of the event', async ({\n page,\n }) => {\n // Given\n const eventsLocator = page.locator(RESIZE_TARGET_SELECTOR);\n const resizeIconLocator = getResizeIconLocatorOfEvent(eventsLocator);\n const targetCellLocator = page.locator(getCellSelector(0));\n const expectedCellLocator = page.locator(getCellSelector(16));\n\n // When\n await dragAndDrop({ page, sourceLocator: resizeIconLocator, targetLocator: targetCellLocator });\n\n // Then\n await expect.poll(() => eventsLocator.count()).toBe(2);\n\n const resizeIconBoundingBoxAfterResizing = await getBoundingBox(resizeIconLocator);\n const expectedCellBoundingBox = await getBoundingBox(expectedCellLocator);\n assertBoundingBoxIncluded(resizeIconBoundingBoxAfterResizing, expectedCellBoundingBox);\n });\n});\n\ntest('When pressing down the ESC key, the resizing event resets to the initial size.', async ({\n page,\n}) => {\n // Given\n const eventLocator = page.locator(getHorizontalEventSelector(TARGET_EVENT2));\n const eventBoundingBoxBeforeResize = await getBoundingBox(eventLocator.last());\n\n const resizeHandlerLocator = getResizeIconLocatorOfEvent(eventLocator);\n\n const targetCellLocator = page.locator(getCellSelector(20));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: targetCellLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const eventBoundingBoxAfterResize = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterResize).toEqual(eventBoundingBoxBeforeResize);\n});\n\ntest.describe('CSS class for a resize event', () => {\n test('should be applied depending on a dragging state.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getHorizontalEventSelector(TARGET_EVENT2));\n const resizeHandlerLocator = getResizeIconLocatorOfEvent(eventLocator);\n const resizeHandlerBoundingBox = await getBoundingBox(resizeHandlerLocator);\n\n const resizeEventClassLocator = page.locator(RESIZE_EVENT_SELECTOR);\n\n // When (a drag has not started yet)\n await page.mouse.move(resizeHandlerBoundingBox.x + 1, resizeHandlerBoundingBox.y + 3);\n await page.mouse.down();\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n\n // When (a drag is working)\n await page.mouse.move(resizeHandlerBoundingBox.x + 10, resizeHandlerBoundingBox.y + 50);\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(1);\n\n // When (a drag is finished)\n await page.mouse.up();\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n });\n\n test('should not be applied when a drag is canceled.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getHorizontalEventSelector(TARGET_EVENT2));\n const resizeHandlerLocator = getResizeIconLocatorOfEvent(eventLocator);\n\n const resizeEventClassLocator = page.locator(RESIZE_EVENT_SELECTOR);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: resizeHandlerLocator,\n options: {\n targetPosition: { x: 10, y: 30 },\n },\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n });\n});\n" }, { "path": "apps/calendar/playwright/month/gridSelection.e2e.ts", "content": "import type { Page } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport { assertDayGridSelectionMatching } from '../assertions';\nimport { MONTH_VIEW_PAGE_URL } from '../configs';\nimport { ClickDelay } from '../constants';\nimport { dragAndDrop, getPrefixedClassName, selectMonthGridCells } from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(MONTH_VIEW_PAGE_URL);\n});\n\nconst MONTH_GRID_CELL_SELECTOR = getPrefixedClassName('daygrid-cell');\nconst GRID_SELECTION_SELECTOR = `${getPrefixedClassName('weekday')} > ${getPrefixedClassName(\n 'grid-selection'\n)}`;\n\n/**\n * Suppose we have the following cells in the month view.\n * Each number represents the index of the cell.\n *\n * [\n * [ 0, 1, 2, 3, 4, 5, 6],\n * [ 7, 8, 9, 10, 11, 12, 13],\n * [14, 15, 16, 17, 18, 19 ,20],\n * [21, 22, 23, 24, 25, 26, 27],\n * [28, 29, 30, 31, 32, 33, 34],\n * ]\n */\n\nfunction assertMonthGridSelectionMatching(page: Page, startIndex: number, endIndex: number) {\n return assertDayGridSelectionMatching(\n page,\n startIndex,\n endIndex,\n MONTH_GRID_CELL_SELECTOR,\n GRID_SELECTION_SELECTOR\n );\n}\n\ntest('select a cell by clicking.', async ({ page }) => {\n // Given\n const monthGridCellLocator = page.locator(MONTH_GRID_CELL_SELECTOR).nth(31);\n\n // When\n await monthGridCellLocator.click({ delay: ClickDelay.Short });\n\n // Then\n await assertMonthGridSelectionMatching(page, 31, 31);\n});\n\n// It looks like triple click happens.\n// Affected by auto clearing grid selection when form popup closed.\ntest.fixme('select a cell by double clicking.', async ({ page }) => {\n // Given\n const monthGridCellLocator = page.locator(MONTH_GRID_CELL_SELECTOR).nth(31);\n\n // When\n await monthGridCellLocator.dblclick({ delay: ClickDelay.Immediate });\n\n // Then\n await assertMonthGridSelectionMatching(page, 31, 31);\n});\n\ntest('select a cell by drag and drop.', async ({ page }) => {\n await selectMonthGridCells(page, 31, 31);\n\n await assertMonthGridSelectionMatching(page, 31, 31);\n});\n\ntest('select 2 cells from left to right', async ({ page }) => {\n await selectMonthGridCells(page, 31, 32);\n\n await assertMonthGridSelectionMatching(page, 31, 32);\n});\n\ntest('select 2 cells from right to left(reverse)', async ({ page }) => {\n await selectMonthGridCells(page, 32, 31);\n\n await assertMonthGridSelectionMatching(page, 31, 32);\n});\n\ntest('select 2 rows from top to bottom', async ({ page }) => {\n await selectMonthGridCells(page, 25, 32);\n\n await assertMonthGridSelectionMatching(page, 25, 32);\n});\n\ntest('select 2 rows from bottom to top(reverse)', async ({ page }) => {\n await selectMonthGridCells(page, 32, 25);\n\n await assertMonthGridSelectionMatching(page, 25, 32);\n});\n\ntest('select entire row', async ({ page }) => {\n await selectMonthGridCells(page, 28, 34);\n\n await assertMonthGridSelectionMatching(page, 28, 34);\n});\n\ntest('event form popup with grid selection', async ({ page }) => {\n await selectMonthGridCells(page, 28, 34);\n\n const floatingLayer = page.locator('css=[role=dialog]');\n\n expect(floatingLayer).not.toBeNull();\n});\n\ntest('When pressing down the ESC key, the grid selection is canceled.', async ({ page }) => {\n // Given\n const startCellLocator = page.locator(MONTH_GRID_CELL_SELECTOR).nth(31);\n const targetCellLocator = page.locator(MONTH_GRID_CELL_SELECTOR).nth(32);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startCellLocator,\n targetLocator: targetCellLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const gridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n expect(await gridSelectionLocator.count()).toBe(0);\n});\n" }, { "path": "apps/calendar/playwright/month/seeMoreEventsPopup.e2e.ts", "content": "import { expect, test } from '@playwright/test';\n\nimport { MONTH_VIEW_PAGE_URL } from '../configs';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(MONTH_VIEW_PAGE_URL);\n});\n\ntest.describe('more events popup', () => {\n test('when clicking on \"more events\" button, popup should be visible', async ({ page }) => {\n await page.click('text=/\\\\d+ more/i >> nth=0');\n\n const popupLocator = page.locator('css=[role=dialog]');\n expect(await popupLocator.isVisible()).toBe(true);\n\n const listLocator = popupLocator.locator('css=[class*=list]');\n const listItemCount = await listLocator.evaluate((list) => list.children.length);\n\n expect(listItemCount).toBeGreaterThan(0);\n });\n});\n" }, { "path": "apps/calendar/playwright/month/visibleEventCount.e2e.ts", "content": "import { expect, test } from '@playwright/test';\n\nimport { MONTH_VIEW_PAGE_URL } from '../configs';\nimport { getCellSelector, getPrefixedClassName } from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(MONTH_VIEW_PAGE_URL);\n});\n\nconst eventsRowClassName = getPrefixedClassName('weekday-events');\n\ntest.describe('visibleEventCount option', () => {\n // In the default viewport, 3 event blocks are visible.\n // 16th cell has 12 events.\n\n test('when visibleEventCount is set to 0, no events should be visible', async ({ page }) => {\n // Given\n const targetCell = page.locator(getCellSelector(16));\n const events = page.locator(eventsRowClassName).nth(2);\n\n // When\n await page.evaluate(() => {\n window.$cal.setOptions({\n month: {\n visibleEventCount: 0,\n },\n });\n });\n\n // Then\n expect(await events.evaluate((_events) => _events.children.length)).toBe(0);\n\n const moreButton = targetCell.locator('button');\n await expect(moreButton).toHaveText('12 more');\n });\n\n test('when visibleEventCount is bigger than the content area, it only shows events within the content area', async ({\n page,\n }) => {\n // Given\n const targetCell = page.locator(getCellSelector(16));\n const events = page.locator(eventsRowClassName).nth(2);\n\n // When\n await page.evaluate(() => {\n window.$cal.setOptions({\n month: {\n visibleEventCount: 10,\n },\n });\n });\n\n // Then\n expect(await events.evaluate((_events) => _events.children.length)).toBe(3);\n\n const moreButton = targetCell.locator('button');\n await expect(moreButton).toHaveText('9 more');\n });\n});\n" }, { "path": "apps/calendar/playwright/playwright-env.d.ts", "content": "import type Calendar from '../src/factory/calendar';\n\ndeclare global {\n interface Window {\n $cal: Calendar;\n }\n}\n" }, { "path": "apps/calendar/playwright/types.ts", "content": "export type BoundingBox = {\n x: number;\n y: number;\n width: number;\n height: number;\n};\n\nexport enum Direction {\n Up = 0,\n UpperRight = 1,\n Right = 2,\n LowerRight = 3,\n Down = 4,\n LowerLeft = 5,\n Left = 6,\n UpperLeft = 7,\n}\n" }, { "path": "apps/calendar/playwright/utils.ts", "content": "import type { Locator, Page } from '@playwright/test';\nimport { expect } from '@playwright/test';\n\nimport type TZDate from '../src/time/date';\nimport type { EventObject } from '../src/types/events';\nimport type { FormattedTimeString } from '../src/types/time/datetime';\nimport type { BoundingBox } from './types';\n\nexport function getPrefixedClassName(className: string) {\n return `.toastui-calendar-${className}`;\n}\n\nexport async function dragAndDrop({\n page,\n sourceLocator,\n targetLocator,\n options = {},\n hold = false,\n}: {\n page: Page;\n sourceLocator: Locator;\n targetLocator: Locator;\n options?: Parameters[1];\n hold?: boolean;\n}) {\n const sourceBoundingBox = await getBoundingBox(sourceLocator);\n const targetBoundingBox = await getBoundingBox(targetLocator);\n\n const sourceX = sourceBoundingBox.x + (options?.sourcePosition?.x ?? sourceBoundingBox.width / 2);\n const sourceY =\n sourceBoundingBox.y + (options?.sourcePosition?.y ?? sourceBoundingBox.height / 2);\n const targetX = targetBoundingBox.x + (options?.targetPosition?.x ?? targetBoundingBox.width / 2);\n const targetY =\n targetBoundingBox.y + (options?.targetPosition?.y ?? targetBoundingBox.height / 2);\n\n await page.mouse.move(sourceX, sourceY);\n await page.mouse.down();\n await page.mouse.move(targetX, targetY, { steps: 4 });\n if (!hold) {\n await page.mouse.up();\n }\n}\n\nexport async function selectGridCells(\n page: Page,\n startCellIdx: number,\n endCellIdx: number,\n className: string\n) {\n const startCellLocator = page.locator(className).nth(startCellIdx);\n const endCellLocator = page.locator(className).nth(endCellIdx);\n\n await dragAndDrop({ page, sourceLocator: startCellLocator, targetLocator: endCellLocator });\n}\n\nexport function selectMonthGridCells(page: Page, startCellIndex: number, endCellIndex: number) {\n return selectGridCells(page, startCellIndex, endCellIndex, '.toastui-calendar-daygrid-cell');\n}\n\nexport async function getBoundingBox(locator: Locator): Promise {\n const boundingBox = await locator.boundingBox();\n\n if (!boundingBox) {\n throw new Error(`BoundingBox of ${locator} is not found`);\n }\n\n return boundingBox;\n}\n\nexport function getTimeEventSelector(title: string): string {\n return `[data-testid^=\"time-event-${title}-\"]`;\n}\n\nexport function getGuideTimeEventSelector(): string {\n return `[data-testid^=\"guide-time-event\"]`;\n}\n\nexport function getHorizontalEventSelector(event: EventObject): string {\n return `data-testid=${event.calendarId}-${event.id}-${event.title}`;\n}\n\nexport function getTimeGridLineSelector(start: FormattedTimeString): string {\n return `[data-testid*=\"gridline-${start}\"]`;\n}\n\nexport function getCellSelector(cellIndex: number): string {\n return `.toastui-calendar-daygrid-cell >> nth=${cellIndex}`;\n}\n\nexport function getTimeStrFromDate(d: TZDate) {\n const fixToTwoDigits = (num: number) => num.toString().padStart(2, '0');\n\n const hour = d.getHours();\n const minute = d.getMinutes();\n\n return `${fixToTwoDigits(hour)}:${fixToTwoDigits(minute)}`;\n}\n\nexport function waitForSingleElement(locator: Locator) {\n return expect.poll(() => locator.count()).toBe(1);\n}\n\n/**\n * Get locator matches testId.\n */\nexport function queryLocatorByTestId(page: Page, testId: string) {\n return page.locator(`[data-testid*=\"${testId}\"]`);\n}\n" }, { "path": "apps/calendar/playwright/week/alldayGridEventMoving.e2e.ts", "content": "import type { Locator } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport { mockWeekViewEvents } from '../../stories/mocks/mockWeekViewEvents';\nimport { WEEK_VIEW_PAGE_URL } from '../configs';\nimport {\n dragAndDrop,\n getBoundingBox,\n getHorizontalEventSelector,\n getPrefixedClassName,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n});\n\nconst ALL_DAY_GRID_CELL_SELECTOR = `${getPrefixedClassName(\n 'panel'\n)}:has-text(\"All Day\") ${getPrefixedClassName('panel-grid')}`;\nconst MOVE_EVENT_SELECTOR = '[class*=\"dragging--move-event\"]';\n\nconst [TARGET_EVENT] = mockWeekViewEvents.filter(({ isAllday }) => isAllday);\nconst TARGET_EVENT_SELECTOR = getHorizontalEventSelector(TARGET_EVENT);\n\nasync function getX(locator: Locator) {\n const boundingBox = await getBoundingBox(locator);\n\n return boundingBox.x;\n}\n\nasync function getWidth(locator: Locator) {\n const boundingBox = await getBoundingBox(locator);\n\n return boundingBox.width;\n}\n\n/**\n * Suppose we have the following cells in the week view.\n * Each number represents the index of the cell.\n *\n * [ 0, 1, 2, 3, 4, 5, 6]\n */\ntest('moving allday grid row event from left to right', async ({ page }) => {\n // Given\n const targetEventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const boundingBoxBeforeMoving = await getBoundingBox(targetEventLocator);\n const fifthOfWeekCellLocator = page.locator(ALL_DAY_GRID_CELL_SELECTOR).nth(4);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: targetEventLocator,\n targetLocator: fifthOfWeekCellLocator,\n });\n\n // Then\n await expect.poll(() => getX(targetEventLocator)).toBeGreaterThan(boundingBoxBeforeMoving.x);\n await expect\n .poll(() => getWidth(targetEventLocator))\n .toBeCloseTo(boundingBoxBeforeMoving.width, 3);\n});\n\ntest.describe('moving allday grid row event when moving by holding the middle or end', () => {\n test('holding middle of event', async ({ page }) => {\n // Given\n const targetEventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const boundingBoxBeforeMoving = await getBoundingBox(targetEventLocator);\n const fourthOfWeekCellLocator = page.locator(ALL_DAY_GRID_CELL_SELECTOR).nth(3);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: targetEventLocator,\n targetLocator: fourthOfWeekCellLocator,\n });\n\n // Then\n await expect\n .poll(() => getX(targetEventLocator))\n .toBeCloseTo(boundingBoxBeforeMoving.x + (boundingBoxBeforeMoving.width * 2) / 3, 1);\n await expect\n .poll(() => getX(targetEventLocator))\n .toBeLessThan(boundingBoxBeforeMoving.x + boundingBoxBeforeMoving.width);\n });\n\n test('holding end of event', async ({ page }) => {\n // Given\n const targetEventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const boundingBoxBeforeMoving = await getBoundingBox(targetEventLocator);\n const fourthOfWeekCellLocator = page.locator(ALL_DAY_GRID_CELL_SELECTOR).nth(3);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: targetEventLocator,\n targetLocator: fourthOfWeekCellLocator,\n options: {\n sourcePosition: {\n x: (boundingBoxBeforeMoving.width * 5) / 6,\n y: boundingBoxBeforeMoving.height / 2,\n },\n },\n });\n\n // Then\n await expect\n .poll(() => getX(targetEventLocator))\n .toBeCloseTo(boundingBoxBeforeMoving.x + boundingBoxBeforeMoving.width / 3, 1);\n await expect\n .poll(() => getX(targetEventLocator))\n .toBeLessThan(boundingBoxBeforeMoving.x + boundingBoxBeforeMoving.width);\n });\n});\n\ntest('When pressing down the ESC key, the moving event resets to the initial position.', async ({\n page,\n}) => {\n // Given\n const eventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const eventBoundingBoxBeforeMove = await getBoundingBox(eventLocator);\n\n const targetCellLocator = page.locator(ALL_DAY_GRID_CELL_SELECTOR).nth(4);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetCellLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const eventBoundingBoxAfterMove = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterMove).toEqual(eventBoundingBoxBeforeMove);\n});\n\ntest.describe('CSS class for a move event', () => {\n test('should be applied depending on a dragging state.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const eventBoundingBox = await getBoundingBox(eventLocator);\n const moveEventClassLocator = page.locator(MOVE_EVENT_SELECTOR);\n\n // When (a drag has not started yet)\n await page.mouse.move(eventBoundingBox.x + 10, eventBoundingBox.y + 10);\n await page.mouse.down();\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n\n // When (a drag is working)\n await page.mouse.move(eventBoundingBox.x + 10, eventBoundingBox.y + 50);\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(1);\n\n // When (a drag is finished)\n await page.mouse.up();\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n });\n\n test('should not be applied when a drag is canceled.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const moveEventClassLocator = page.locator(MOVE_EVENT_SELECTOR);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: eventLocator,\n options: {\n targetPosition: { x: 10, y: 30 },\n },\n });\n await page.keyboard.down('Escape');\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n });\n});\n" }, { "path": "apps/calendar/playwright/week/alldayGridEventResizing.e2e.ts", "content": "import type { Locator } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport { mockWeekViewEvents } from '../../stories/mocks/mockWeekViewEvents';\nimport { WEEK_VIEW_PAGE_URL } from '../configs';\nimport {\n dragAndDrop,\n getBoundingBox,\n getHorizontalEventSelector,\n getPrefixedClassName,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n});\n\nconst ALL_DAY_GRID_CELL_SELECTOR = `${getPrefixedClassName(\n 'panel'\n)}:has-text(\"All Day\") ${getPrefixedClassName('panel-grid')}`;\nconst RESIZE_HANDLER_SELECTOR = getPrefixedClassName('handle-y');\nconst RESIZE_EVENT_SELECTOR = '[class*=\"dragging--resize-horizontal-event\"]';\n\nconst [TARGET_EVENT] = mockWeekViewEvents.filter(({ isAllday }) => isAllday);\nconst TARGET_EVENT_SELECTOR = getHorizontalEventSelector(TARGET_EVENT);\n\nasync function getWidth(locator: Locator) {\n const boundingBox = await getBoundingBox(locator);\n\n return boundingBox.width;\n}\n\n/**\n * Suppose we have the following cells in the week view.\n * Each number represents the index of the cell.\n *\n * [ 0, 1, 2, 3, 4, 5, 6]\n */\ntest('resizing allday grid row event from left to right', async ({ page }) => {\n // Given\n const targetEventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const boundingBoxBeforeResizing = await getBoundingBox(targetEventLocator);\n const resizerLocator = targetEventLocator.locator(RESIZE_HANDLER_SELECTOR);\n const endOfWeekCellLocator = page.locator(ALL_DAY_GRID_CELL_SELECTOR).last();\n\n // When\n await dragAndDrop({ page, sourceLocator: resizerLocator, targetLocator: endOfWeekCellLocator });\n\n // Then\n await expect\n .poll(() => getWidth(targetEventLocator))\n .toBeGreaterThan(boundingBoxBeforeResizing.width);\n});\n\ntest.describe('When pressing down the ESC key', () => {\n test('the resizing event resets to the initial size.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const eventBoundingBoxBeforeResize = await getBoundingBox(eventLocator);\n\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n\n const targetCellLocator = page.locator(ALL_DAY_GRID_CELL_SELECTOR).nth(4);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: targetCellLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const eventBoundingBoxAfterResize = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterResize).toEqual(eventBoundingBoxBeforeResize);\n });\n});\n\ntest.describe('CSS class for a resize event', () => {\n test('should be applied depending on a dragging state.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n const resizeHandlerBoundingBox = await getBoundingBox(resizeHandlerLocator);\n\n const resizeEventClassLocator = page.locator(RESIZE_EVENT_SELECTOR);\n\n // When (a drag has not started yet)\n await page.mouse.move(resizeHandlerBoundingBox.x + 1, resizeHandlerBoundingBox.y + 3);\n await page.mouse.down();\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n\n // When (a drag is working)\n await page.mouse.move(resizeHandlerBoundingBox.x + 10, resizeHandlerBoundingBox.y + 50);\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(1);\n\n // When (a drag is finished)\n await page.mouse.up();\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n });\n\n test('should not be applied when a drag is canceled.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(TARGET_EVENT_SELECTOR);\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n\n const resizeEventClassLocator = page.locator(RESIZE_EVENT_SELECTOR);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: resizeHandlerLocator,\n options: {\n targetPosition: { x: 10, y: 30 },\n },\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n });\n});\n" }, { "path": "apps/calendar/playwright/week/dayGridSelection.e2e.ts", "content": "import type { Page } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport { assertDayGridSelectionMatching } from '../assertions';\nimport { WEEK_VIEW_PAGE_URL } from '../configs';\nimport { ClickDelay } from '../constants';\nimport { dragAndDrop, getPrefixedClassName, selectGridCells } from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n});\n\nconst WEEK_GRID_CELL_SELECTOR = getPrefixedClassName('panel-grid');\nconst DAY_GRID_SELECTION_SELECTOR = getPrefixedClassName('grid-selection');\n\nfunction selectWeekGridCells(page: Page, startCellIndex: number, endCellIndex: number) {\n return selectGridCells(page, startCellIndex, endCellIndex, WEEK_GRID_CELL_SELECTOR);\n}\n\nfunction assertWeekGridSelectionMatching(page: Page, startIndex: number, endIndex: number) {\n return assertDayGridSelectionMatching(\n page,\n startIndex,\n endIndex,\n WEEK_GRID_CELL_SELECTOR,\n DAY_GRID_SELECTION_SELECTOR\n );\n}\n\ntest('select a cell by clicking.', async ({ page }) => {\n // Given\n const weekGridCellLocator = page.locator(WEEK_GRID_CELL_SELECTOR).nth(14);\n\n // When\n await weekGridCellLocator.click({ delay: ClickDelay.Short });\n\n // Then\n await assertWeekGridSelectionMatching(page, 14, 14);\n});\n\ntest('select a cell by double clicking.', async ({ page }) => {\n // Given\n const weekGridCellLocator = page.locator(WEEK_GRID_CELL_SELECTOR).nth(14);\n\n // When\n await weekGridCellLocator.dblclick({ delay: ClickDelay.Immediate });\n\n // Then\n await assertWeekGridSelectionMatching(page, 14, 14);\n});\n\ntest('select 2 cells from left to right', async ({ page }) => {\n await selectWeekGridCells(page, 14, 15);\n\n await assertWeekGridSelectionMatching(page, 14, 15);\n});\n\ntest('select 2 cells from right to left(reverse)', async ({ page }) => {\n await selectWeekGridCells(page, 15, 14);\n\n await assertWeekGridSelectionMatching(page, 14, 15);\n});\n\ntest('event form popup with grid selection', async ({ page }) => {\n await selectWeekGridCells(page, 14, 15);\n\n const floatingLayer = page.locator('css=[role=dialog]');\n\n expect(floatingLayer).not.toBeNull();\n});\n\ntest('When pressing down the ESC key, the grid selection is canceled.', async ({ page }) => {\n // Given\n const startCellLocator = page.locator(WEEK_GRID_CELL_SELECTOR).nth(14);\n const targetCellLocator = page.locator(WEEK_GRID_CELL_SELECTOR).nth(15);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startCellLocator,\n targetLocator: targetCellLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const gridSelectionLocator = page.locator(DAY_GRID_SELECTION_SELECTOR);\n expect(await gridSelectionLocator.count()).toBe(0);\n});\n" }, { "path": "apps/calendar/playwright/week/hourStartOption.e2e.ts", "content": "import { expect, test } from '@playwright/test';\n\nimport { WEEK_VIEW_PAGE_URL } from '../configs';\nimport { dragAndDrop, getBoundingBox, getTimeGridLineSelector } from '../utils';\n\n// Regression test for #1228\ntest.describe('Moving events with week.hourStart option', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n });\n\n test('it should be able to move an event when the week.hourStart option is set', async ({\n page,\n }) => {\n // Given\n await page.evaluate(() => {\n window.$cal.setOptions({\n week: {\n hourStart: 4,\n },\n });\n });\n const targetHourTextToMove = '08:00';\n const targetEventLocator = page.locator('text=/short time event/');\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetHourTextToMove));\n const { y: rowY } = await getBoundingBox(targetRowLocator);\n const { x: eventX } = await getBoundingBox(targetEventLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: targetEventLocator,\n targetLocator: targetRowLocator,\n options: {\n targetPosition: {\n x: eventX + 10,\n y: 10,\n },\n },\n });\n\n // Then\n const eventBoundingBoxAfterMoving = await getBoundingBox(targetEventLocator);\n expect(eventBoundingBoxAfterMoving.y).toBeCloseTo(rowY, -1);\n\n const parentText = await targetEventLocator.evaluate((el) => el?.parentElement?.textContent);\n expect(parentText).toContain(targetHourTextToMove);\n });\n});\n" }, { "path": "apps/calendar/playwright/week/primaryTimezone.e2e.ts", "content": "import { expect, test } from '@playwright/test';\n\nimport { mockWeekViewEvents } from '../../stories/mocks/mockWeekViewEvents';\nimport { WEEK_VIEW_TIMEZONE_PAGE_URL } from '../configs';\nimport { queryLocatorByTestId } from '../utils';\n\nconst [mockEvent] = mockWeekViewEvents.filter(({ title }) => title.includes('short'));\n\n// From local timezone (+09:00) to target timezone (+05:00)\nconst TARGET_TIMEZONE_HOUR_DIFFERENCE = 4;\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_TIMEZONE_PAGE_URL);\n});\n\ntest.describe('Primary Timezone', () => {\n test(`${mockEvent.title} should be rendered at the top of the time grid in Pakistan Standard Time`, async ({\n page,\n }) => {\n // Given\n const targetEventLocator = queryLocatorByTestId(page, `time-event-${mockEvent.title}`);\n const originalStartTime = mockEvent.start.toDate();\n const originalStartHour = originalStartTime.getHours();\n const originalStartMinute = originalStartTime.getMinutes();\n\n const expectedEventStartTimeStr = `${String(\n originalStartHour - TARGET_TIMEZONE_HOUR_DIFFERENCE\n ).padStart(2, '0')}:${String(originalStartMinute).padStart(2, '0')}`;\n\n // When\n // Rendered\n\n // Then\n await expect(targetEventLocator).toHaveText(new RegExp(expectedEventStartTimeStr));\n });\n});\n" }, { "path": "apps/calendar/playwright/week/timeGridEventClick.e2e.ts", "content": "import { expect, test } from '@playwright/test';\nimport type { BoundingBox } from 'playwright/types';\n\nimport { mockWeekViewEvents } from '../../stories/mocks/mockWeekViewEvents';\nimport { WEEK_VIEW_DUPLICATE_EVENTS_PAGE_URL, WEEK_VIEW_PAGE_URL } from '../configs';\nimport { getBoundingBox, getTimeEventSelector } from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n});\n\nconst targetEvents = mockWeekViewEvents.filter(({ isAllday }) => !isAllday);\ntargetEvents.forEach(({ title }) => {\n test(`Click event: show popup when ${title} is clicked`, async ({ page }) => {\n // Given\n const targetEventSelector = getTimeEventSelector(title);\n const targetEventLocator = page.locator(targetEventSelector).last();\n const targetEventBoundingBox = await getBoundingBox(targetEventLocator);\n\n // When\n await page.mouse.move(targetEventBoundingBox.x + 2, targetEventBoundingBox.y + 2);\n await page.mouse.down();\n await page.mouse.up();\n\n // Then\n const detailPopup = page.locator('css=[role=dialog]');\n await expect(detailPopup).toBeVisible();\n });\n});\n\ntest.describe('Collapse duplicate events', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_DUPLICATE_EVENTS_PAGE_URL);\n });\n\n const collapsedEvents = mockWeekViewEvents.filter(({ title }) =>\n title.match(/duplicate event(\\s\\d)?$/)\n );\n const [collapsedEvent] = collapsedEvents;\n\n test('The duplicate events are sorted according to the result of getDuplicateEvents option.', async ({\n page,\n }) => {\n // Given\n // getDuplicateEvents: sort by calendarId in descending order\n const sortedDuplicateEvents = mockWeekViewEvents\n .filter(({ title }) => title.startsWith('duplicate event 2'))\n .sort((a, b) => (b.calendarId > a.calendarId ? 1 : -1));\n\n // When\n // Nothing\n\n // Then\n const promiseBoundingBoxes: Promise[] = [];\n sortedDuplicateEvents.forEach((event) => {\n const eventLocator = page.locator(getTimeEventSelector(event.title));\n promiseBoundingBoxes.push(getBoundingBox(eventLocator));\n });\n\n await Promise.all(promiseBoundingBoxes).then((eventBoundingBoxes) => {\n let prevX = -1;\n eventBoundingBoxes.forEach(({ x }) => {\n expect(prevX).toBeLessThan(x);\n prevX = x;\n });\n });\n });\n\n collapsedEvents.forEach((event) => {\n test(`When clicking the collapsed duplicate event, it should be expanded. - ${event.title}`, async ({\n page,\n }) => {\n // Given\n const collapsedEventLocator = page.locator(getTimeEventSelector(event.title));\n const { x, y, width: widthBeforeClick } = await getBoundingBox(collapsedEventLocator);\n const mainEventLocator = page.locator(getTimeEventSelector(`${event.title} - main`));\n const { width: mainEventWidth } = await getBoundingBox(mainEventLocator);\n\n // When\n await page.mouse.move(x + 2, y + 2);\n await page.mouse.down();\n await page.mouse.up();\n\n // Then\n const { width: widthAfterClick } = await getBoundingBox(collapsedEventLocator);\n expect(widthAfterClick).toBeGreaterThan(widthBeforeClick);\n expect(widthAfterClick).toBeCloseTo(mainEventWidth, -1);\n });\n });\n\n const otherEvents = mockWeekViewEvents.filter(({ title }) => {\n return (\n title === 'duplicate event with durations' || // duplicate event in the same duplicate event group\n title === 'duplicate event 2' || // duplicate event but not in the same duplicate event group\n title === 'short time event' // normal event\n );\n });\n otherEvents.forEach((otherEvent) => {\n test(`When clicking the other event (title: ${otherEvent.title}), the previous expanded event should be collapsed.`, async ({\n page,\n }) => {\n // Given\n const collapsedEventLocator = page.locator(getTimeEventSelector(collapsedEvent.title));\n const { x, y, width: widthBeforeClick } = await getBoundingBox(collapsedEventLocator);\n await page.mouse.move(x + 2, y + 2);\n await page.mouse.down();\n await page.mouse.up();\n\n // When\n const otherEventLocator = page.locator(getTimeEventSelector(otherEvent.title));\n const {\n x: otherX,\n y: otherY,\n width: otherWidthBeforeClick,\n } = await getBoundingBox(otherEventLocator);\n await page.mouse.move(otherX + 2, otherY + 2);\n await page.mouse.down();\n await page.mouse.up();\n\n // Then\n const { width: widthAfterClick } = await getBoundingBox(collapsedEventLocator);\n const { width: otherWidthAfterClick } = await getBoundingBox(otherEventLocator);\n expect(widthAfterClick).toBeCloseTo(widthBeforeClick, -1);\n\n if (otherEvent.title.includes('duplicate')) {\n // if the next clicked event is duplicate, it should be expanded.\n expect(otherWidthAfterClick).toBeGreaterThan(otherWidthBeforeClick);\n }\n });\n });\n\n test('When clicking one day of a two-day duplicate event, the other day also should be expanded.', async ({\n page,\n }) => {\n // Given\n const longCollapsedEventTitle = 'duplicate long event';\n const longCollapsedEventLocator = page.locator(getTimeEventSelector(longCollapsedEventTitle));\n const firstDayLocator = longCollapsedEventLocator.first();\n const lastDayLocator = longCollapsedEventLocator.last();\n const { x, y, width: widthBeforeClick } = await getBoundingBox(firstDayLocator);\n\n // When\n await page.mouse.move(x + 2, y + 2);\n await page.mouse.down();\n await page.mouse.up();\n\n // Then\n const { width: widthAfterClick } = await getBoundingBox(firstDayLocator);\n const { width: widthAfterClickOnLastDay } = await getBoundingBox(lastDayLocator);\n expect(widthAfterClick).toBeGreaterThan(widthBeforeClick);\n expect(widthAfterClickOnLastDay).toBeCloseTo(widthAfterClick);\n });\n});\n" }, { "path": "apps/calendar/playwright/week/timeGridEventMoving.e2e.ts", "content": "import type { Locator } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport type TZDate from '../../src/time/date';\nimport { addHours, isSameDate } from '../../src/time/datetime';\nimport type { FormattedTimeString } from '../../src/types/time/datetime';\nimport { mockWeekViewEvents } from '../../stories/mocks/mockWeekViewEvents';\nimport { WEEK_VIEW_PAGE_URL } from '../configs';\nimport { Direction } from '../types';\nimport {\n dragAndDrop,\n getBoundingBox,\n getGuideTimeEventSelector,\n getTimeEventSelector,\n getTimeGridLineSelector,\n getTimeStrFromDate,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n});\n\nconst TIME_EVENTS = mockWeekViewEvents.filter(({ isAllday }) => !isAllday);\nconst [TWO_VIEW_EVENT, SHORT_TIME_EVENT, LONG_TIME_EVENT] = TIME_EVENTS;\n\nconst MOVE_EVENT_SELECTOR = '[class*=\"dragging--move-event\"]';\n\n/**\n * 8 Directions for testing\n *\n * 7 0 1\n * 6 2\n * 5 4 3\n */\nconst cases: {\n title: string;\n eventColumnIndex: number;\n directionInfo: {\n direction: Direction;\n startTimeAfterMoving: FormattedTimeString;\n timeToDrop: FormattedTimeString;\n }[];\n}[] = [\n {\n title: TWO_VIEW_EVENT.title,\n eventColumnIndex: 0,\n directionInfo: [\n {\n direction: Direction.Right,\n startTimeAfterMoving: '10:00',\n timeToDrop: '00:00',\n },\n {\n direction: Direction.LowerRight,\n startTimeAfterMoving: '12:00',\n timeToDrop: '02:00',\n },\n {\n direction: Direction.Down,\n startTimeAfterMoving: '12:00',\n timeToDrop: '02:00',\n },\n ],\n },\n {\n title: SHORT_TIME_EVENT.title,\n eventColumnIndex: 3,\n directionInfo: [\n {\n direction: Direction.Up,\n startTimeAfterMoving: '02:00',\n timeToDrop: '02:00',\n },\n {\n direction: Direction.UpperRight,\n startTimeAfterMoving: '02:00',\n timeToDrop: '02:00',\n },\n {\n direction: Direction.Right,\n startTimeAfterMoving: '04:00',\n timeToDrop: '04:00',\n },\n {\n direction: Direction.LowerRight,\n startTimeAfterMoving: '06:00',\n timeToDrop: '06:00',\n },\n {\n direction: Direction.Down,\n startTimeAfterMoving: '06:00',\n timeToDrop: '06:00',\n },\n {\n direction: Direction.LowerLeft,\n startTimeAfterMoving: '06:00',\n timeToDrop: '06:00',\n },\n {\n direction: Direction.Left,\n startTimeAfterMoving: '04:00',\n timeToDrop: '04:00',\n },\n {\n direction: Direction.UpperLeft,\n startTimeAfterMoving: '02:00',\n timeToDrop: '02:00',\n },\n ],\n },\n {\n title: LONG_TIME_EVENT.title,\n eventColumnIndex: 6,\n directionInfo: [\n {\n direction: Direction.Down,\n startTimeAfterMoving: '12:00',\n timeToDrop: '02:00',\n },\n {\n direction: Direction.LowerLeft,\n startTimeAfterMoving: '12:00',\n timeToDrop: '02:00',\n },\n {\n direction: Direction.Left,\n startTimeAfterMoving: '10:00',\n timeToDrop: '00:00',\n },\n ],\n },\n];\n\ncases.forEach(({ title, eventColumnIndex, directionInfo }) => {\n directionInfo.forEach(({ direction, startTimeAfterMoving, timeToDrop }) => {\n test(`Moving event: ${title} for ${direction}`, async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(title)).last();\n const targetRowLocator = page.locator(getTimeGridLineSelector(timeToDrop));\n const targetColumnLocator = page.locator(`data-testid=timegrid-column-${eventColumnIndex}`);\n\n const targetColumnBoundingBox = await getBoundingBox(targetColumnLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetRowLocator,\n options: {\n sourcePosition: {\n x: 5,\n y: 5,\n },\n targetPosition: {\n y: 5,\n x: targetColumnBoundingBox.x - 5,\n },\n },\n });\n\n // Then\n const eventBoundingBoxAfterMove = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterMove.x).toBeCloseTo(targetColumnBoundingBox.x, -1);\n await expect.poll(() => eventLocator.textContent()).toMatch(new RegExp(startTimeAfterMoving));\n });\n });\n});\n\ntest('When pressing down the ESC key, the moving event resets to the initial position.', async ({\n page,\n}) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const eventBoundingBoxBeforeMove = await getBoundingBox(eventLocator);\n\n const targetStartTime = getTimeStrFromDate(\n addHours(SHORT_TIME_EVENT.end as TZDate, 1)\n ) as FormattedTimeString;\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetStartTime));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetRowLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const eventBoundingBoxAfterMove = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterMove).toEqual(eventBoundingBoxBeforeMove);\n});\n\ntest.describe('CSS class for a move event', () => {\n test('should be applied depending on a dragging state.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const eventBoundingBox = await getBoundingBox(eventLocator);\n const moveEventClassLocator = page.locator(MOVE_EVENT_SELECTOR);\n\n // When (a drag has not started yet)\n await page.mouse.move(eventBoundingBox.x + 10, eventBoundingBox.y + 10);\n await page.mouse.down();\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n\n // When (a drag is working)\n await page.mouse.move(eventBoundingBox.x + 10, eventBoundingBox.y + 50);\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(1);\n\n // When (a drag is finished)\n await page.mouse.up();\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n });\n\n test('should not be applied when a drag is canceled.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const moveEventClassLocator = page.locator(MOVE_EVENT_SELECTOR);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: eventLocator,\n options: {\n targetPosition: { x: 10, y: 30 },\n },\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n expect(await moveEventClassLocator.count()).toBe(0);\n });\n});\n\ntest.describe(`Calibrate event's height while dragging`, () => {\n let lowerLongTimeEventLocator: Locator;\n let upperLongTimeEventLocator: Locator;\n let guideLocator: Locator;\n\n test.beforeEach(({ page }) => {\n const targetEventSelector = getTimeEventSelector(LONG_TIME_EVENT.title);\n\n lowerLongTimeEventLocator = page.locator(targetEventSelector).first();\n upperLongTimeEventLocator = page.locator(targetEventSelector).last();\n guideLocator = page.locator(getGuideTimeEventSelector());\n });\n\n test('lower long time event become longer while drag to upper side', async ({ page }) => {\n // Given\n const eventBoundingBox = await getBoundingBox(lowerLongTimeEventLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: lowerLongTimeEventLocator,\n targetLocator: lowerLongTimeEventLocator,\n options: {\n sourcePosition: { x: 10, y: 10 },\n targetPosition: { x: 10, y: -10 },\n },\n hold: true,\n });\n\n // Then\n const guideBoundingBox = await getBoundingBox(guideLocator);\n expect(guideBoundingBox.y).toBeLessThan(eventBoundingBox.y);\n expect(guideBoundingBox.height).toBeGreaterThan(eventBoundingBox.height);\n });\n\n test('lower long time event become shorter while drag to lower side', async ({ page }) => {\n // Given\n const eventBoundingBox = await getBoundingBox(lowerLongTimeEventLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: lowerLongTimeEventLocator,\n targetLocator: lowerLongTimeEventLocator,\n options: {\n sourcePosition: { x: 10, y: 10 },\n targetPosition: { x: 10, y: 30 },\n },\n hold: true,\n });\n\n // Then\n const guideBoundingBox = await getBoundingBox(guideLocator);\n // NOTE: the guide event's height is greater than event's height, but it looks like it isn't.\n // height is truncated because of stacking context.\n expect(guideBoundingBox.y).toBeGreaterThan(eventBoundingBox.y);\n });\n\n test('upper long time event become longer while drag to lower side', async ({ page }) => {\n // Given\n const eventBoundingBox = await getBoundingBox(upperLongTimeEventLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: upperLongTimeEventLocator,\n targetLocator: upperLongTimeEventLocator,\n options: {\n sourcePosition: { x: 10, y: 10 },\n targetPosition: { x: 10, y: 30 },\n },\n hold: true,\n });\n\n // Then\n const guideBoundingBox = await getBoundingBox(guideLocator);\n expect(guideBoundingBox.height).toBeGreaterThan(eventBoundingBox.height);\n });\n\n test('upper long time event become shorter while drag to upper side', async ({ page }) => {\n // Given\n const eventBoundingBox = await getBoundingBox(upperLongTimeEventLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: upperLongTimeEventLocator,\n targetLocator: upperLongTimeEventLocator,\n options: {\n sourcePosition: { x: 10, y: 100 },\n targetPosition: { x: 10, y: 50 },\n },\n hold: true,\n });\n\n // Then\n const guideBoundingBox = await getBoundingBox(guideLocator);\n expect(guideBoundingBox.height).toBeLessThan(eventBoundingBox.height);\n });\n});\n\nconst ONE_DAY_TIME_EVENTS = mockWeekViewEvents.filter(\n ({ isAllday, start, end }) => !isAllday && isSameDate(start, end)\n);\n\nONE_DAY_TIME_EVENTS.forEach(({ title }) => {\n test(`The height of guide element should be same as the event element. - ${title}`, async ({\n page,\n }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(title));\n const eventBoundingBox = await getBoundingBox(eventLocator);\n\n const targetRowLocator = page.locator(getTimeGridLineSelector('02:00'));\n const targetColumnLocator = page.locator('data-testid=timegrid-column-2');\n const targetColumnBoundingBox = await getBoundingBox(targetColumnLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: eventLocator,\n targetLocator: targetRowLocator,\n options: {\n sourcePosition: {\n x: 5,\n y: 5,\n },\n targetPosition: {\n y: 5,\n x: targetColumnBoundingBox.x - 5,\n },\n },\n hold: true,\n });\n\n // Then\n const guideLocator = page.locator(getGuideTimeEventSelector());\n const guideBoundingBox = await getBoundingBox(guideLocator);\n expect(guideBoundingBox.height).toBeCloseTo(eventBoundingBox.height, 0);\n });\n});\n" }, { "path": "apps/calendar/playwright/week/timeGridEventResizing.e2e.ts", "content": "import type { Page } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\nimport type { Matchers } from '@playwright/test/types/expect-types';\n\nimport type TZDate from '../../src/time/date';\nimport { addHours } from '../../src/time/datetime';\nimport type { FormattedTimeString } from '../../src/types/time/datetime';\nimport { mockWeekViewEvents } from '../../stories/mocks/mockWeekViewEvents';\nimport { WEEK_VIEW_PAGE_URL } from '../configs';\nimport {\n dragAndDrop,\n getBoundingBox,\n getGuideTimeEventSelector,\n getTimeEventSelector,\n getTimeGridLineSelector,\n getTimeStrFromDate,\n queryLocatorByTestId,\n waitForSingleElement,\n} from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n});\n\nconst RESIZE_HANDLER_SELECTOR = '[class*=\"resize-handler\"]';\nconst RESIZE_EVENT_SELECTOR = '[class*=\"dragging--resize-vertical-event\"]';\n\nfunction getHourDifference(minuend: FormattedTimeString, subtrahend: FormattedTimeString) {\n return Number(minuend.split(':')[0]) - Number(subtrahend.split(':')[0]);\n}\n\ninterface EventInfo {\n title: string;\n startTime: FormattedTimeString;\n endTime: FormattedTimeString;\n endDateColumnIndex: number;\n}\n\nconst [TWO_VIEW_EVENT, SHORT_TIME_EVENT, LONG_TIME_EVENT] = mockWeekViewEvents.filter(\n ({ isAllday }) => !isAllday\n);\n\nconst targetEvents: EventInfo[] = [\n {\n title: TWO_VIEW_EVENT.title,\n startTime: '10:00',\n endTime: '06:00',\n endDateColumnIndex: 0,\n },\n {\n title: SHORT_TIME_EVENT.title,\n startTime: '04:00',\n endTime: '06:00',\n endDateColumnIndex: 3,\n },\n {\n title: LONG_TIME_EVENT.title,\n startTime: '10:00',\n endTime: '06:00',\n endDateColumnIndex: 6,\n },\n];\n\nconst cases: {\n title: string;\n targetEndTime: FormattedTimeString;\n targetColumnIndex?: number;\n matcherToCompare: Extract, 'toBeGreaterThan' | 'toBeLessThan'>;\n}[] = [\n {\n title: 'to the bottom',\n targetEndTime: '08:00',\n matcherToCompare: 'toBeGreaterThan',\n },\n {\n title: 'to the top',\n targetEndTime: '04:00',\n matcherToCompare: 'toBeLessThan',\n },\n {\n title: 'up to the y of the cursor when the target column is to the right of the current column',\n targetEndTime: '08:00',\n targetColumnIndex: 5,\n matcherToCompare: 'toBeGreaterThan',\n },\n {\n title: 'up to the y of the cursor when the target column is to the left of the current column',\n targetEndTime: '04:00',\n targetColumnIndex: 0,\n matcherToCompare: 'toBeLessThan',\n },\n];\n\nasync function setup({\n page,\n targetEventTitle,\n targetEndTime,\n targetColumnIndex,\n}: {\n page: Page;\n targetEventTitle: string;\n targetEndTime: FormattedTimeString;\n targetColumnIndex: number;\n}) {\n // Given\n const eventLocator = queryLocatorByTestId(page, `time-event-${targetEventTitle}`).last();\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetEndTime));\n const targetColumnLocator = queryLocatorByTestId(page, `timegrid-column-${targetColumnIndex}`);\n const eventBoundingBoxBeforeResize = await getBoundingBox(eventLocator);\n\n const targetRowBoundingBox = await getBoundingBox(targetRowLocator);\n const targetColumnBoundingBox = await getBoundingBox(targetColumnLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: targetRowLocator,\n options: {\n sourcePosition: {\n x: 1,\n y: 1,\n },\n targetPosition: {\n x: targetColumnBoundingBox.x + 1,\n y: targetRowBoundingBox.height / 2,\n },\n },\n });\n await waitForSingleElement(eventLocator);\n\n let eventBoundingBoxAfterResize = await getBoundingBox(eventLocator);\n await expect\n .poll(async () => {\n eventBoundingBoxAfterResize = await getBoundingBox(eventLocator);\n\n return eventBoundingBoxAfterResize;\n })\n .not.toEqual(eventBoundingBoxBeforeResize);\n\n return {\n eventLocator,\n eventBoundingBoxBeforeResize,\n eventBoundingBoxAfterResize,\n targetRowBoundingBox,\n };\n}\n\ntargetEvents.forEach(({ title: eventTitle, startTime, endTime, endDateColumnIndex }) => {\n test.describe(`Resize a ${eventTitle} in the time grid`, () => {\n cases.forEach(\n ({ title, targetEndTime, targetColumnIndex, matcherToCompare: compareAssertion }) => {\n test(`${title}`, async ({ page }) => {\n // Given\n\n // When\n const {\n eventLocator,\n eventBoundingBoxBeforeResize,\n eventBoundingBoxAfterResize,\n targetRowBoundingBox,\n } = await setup({\n page,\n targetEventTitle: eventTitle,\n targetEndTime,\n targetColumnIndex: targetColumnIndex || endDateColumnIndex,\n });\n\n // Then\n expect(eventBoundingBoxAfterResize.height)[compareAssertion](\n eventBoundingBoxBeforeResize.height\n );\n\n await expect(eventLocator).toContainText(startTime);\n\n const rowCount = getHourDifference(targetEndTime, endTime) * 2 + 1;\n expect(\n eventBoundingBoxAfterResize.height - eventBoundingBoxBeforeResize.height\n ).toBeCloseTo(targetRowBoundingBox.height * rowCount, -1);\n });\n }\n );\n\n test(`then it should have a minimum height(=1 row) even if the event is resized to before the start time`, async ({\n page,\n }) => {\n // Given\n\n // When\n const { eventBoundingBoxAfterResize, targetRowBoundingBox } = await setup({\n page,\n targetEventTitle: eventTitle,\n targetEndTime: '00:00',\n targetColumnIndex: endDateColumnIndex,\n });\n\n // Then\n expect(eventBoundingBoxAfterResize.height).toBeCloseTo(targetRowBoundingBox.height, -1);\n });\n });\n});\n\ntest('When pressing down the ESC key, the resizing event resets to the initial size.', async ({\n page,\n}) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const eventBoundingBoxBeforeResize = await getBoundingBox(eventLocator);\n\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n\n const targetStartTime = getTimeStrFromDate(\n addHours(SHORT_TIME_EVENT.end as TZDate, 1)\n ) as FormattedTimeString;\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetStartTime));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: targetRowLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const eventBoundingBoxAfterResize = await getBoundingBox(eventLocator);\n expect(eventBoundingBoxAfterResize).toEqual(eventBoundingBoxBeforeResize);\n});\n\ntest.describe('CSS class for a resize event', () => {\n test('should be applied depending on a dragging state.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n const resizeHandlerBoundingBox = await getBoundingBox(resizeHandlerLocator);\n\n const resizeEventClassLocator = page.locator(RESIZE_EVENT_SELECTOR);\n\n // When (a drag has not started yet)\n await page.mouse.move(resizeHandlerBoundingBox.x + 10, resizeHandlerBoundingBox.y + 3);\n await page.mouse.down();\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n\n // When (a drag is working)\n await page.mouse.move(resizeHandlerBoundingBox.x + 10, resizeHandlerBoundingBox.y + 50);\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(1);\n\n // When (a drag is finished)\n await page.mouse.up();\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n });\n\n test('should not be applied when a drag is canceled.', async ({ page }) => {\n // Given\n const eventLocator = page.locator(getTimeEventSelector(SHORT_TIME_EVENT.title));\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n\n const resizeEventClassLocator = page.locator(RESIZE_EVENT_SELECTOR);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: resizeHandlerLocator,\n options: {\n targetPosition: { x: 10, y: 50 },\n },\n });\n await page.keyboard.down('Escape');\n\n // Then\n expect(await resizeEventClassLocator.count()).toBe(0);\n });\n});\n\ntest.describe('Resizing the event which has a going or coming duration', () => {\n const [event] = mockWeekViewEvents.filter(\n ({ isAllday, goingDuration, comingDuration }) => !isAllday && (goingDuration || comingDuration)\n );\n\n async function setupResizingGoingOrComingDuration(\n page: Page,\n targetEndTime: FormattedTimeString,\n hold?: boolean\n ) {\n const eventLocator = queryLocatorByTestId(page, `time-event-${event.title}`).last();\n\n const travelTimeLocator = eventLocator.locator('[class*=\"travel-time\"]');\n const goingDurationLocator = travelTimeLocator.first();\n const goingDurationBoundingBoxBeforeResize = await getBoundingBox(goingDurationLocator);\n const comingDurationLocator = travelTimeLocator.last();\n const comingDurationBoundingBoxBeforeResize = await getBoundingBox(comingDurationLocator);\n\n const eventTimeLocator = eventLocator.locator('[class*=\"event-time\"]');\n const modelDurationBoundingBoxBeforeResize = await getBoundingBox(eventTimeLocator);\n\n const resizeHandlerLocator = eventLocator.locator(RESIZE_HANDLER_SELECTOR);\n const targetRowLocator = page.locator(getTimeGridLineSelector(targetEndTime));\n const targetRowBoundingBox = await getBoundingBox(targetRowLocator);\n\n await dragAndDrop({\n page,\n sourceLocator: resizeHandlerLocator,\n targetLocator: targetRowLocator,\n options: {\n sourcePosition: {\n x: 1,\n y: 1,\n },\n targetPosition: {\n x: targetRowBoundingBox.width / 2,\n y: targetRowBoundingBox.height / 2,\n },\n },\n hold,\n });\n\n let draggingGoingDurationBoundingBox = null;\n let draggingComingDurationBoundingBox = null;\n let draggingModelDurationBoundingBox = null;\n if (hold) {\n const draggingEventLocator = page.locator(getGuideTimeEventSelector());\n const draggingTravelTimeLocator = draggingEventLocator.locator('[class*=\"travel-time\"]');\n const draggingGoingDurationLocator = draggingTravelTimeLocator.first();\n draggingGoingDurationBoundingBox = await getBoundingBox(draggingGoingDurationLocator);\n const draggingComingDurationLocator = draggingTravelTimeLocator.last();\n draggingComingDurationBoundingBox = await getBoundingBox(draggingComingDurationLocator);\n\n const draggingEventTimeLocator = draggingEventLocator.locator('[class*=\"event-time\"]');\n draggingModelDurationBoundingBox = await getBoundingBox(draggingEventTimeLocator);\n }\n\n const goingDurationBoundingBoxAfterResize = await getBoundingBox(goingDurationLocator);\n const comingDurationBoundingBoxAfterResize = await getBoundingBox(comingDurationLocator);\n const modelDurationBoundingBoxAfterResize = await getBoundingBox(eventTimeLocator);\n\n return {\n goingDurationBoundingBoxBeforeResize,\n goingDurationBoundingBoxAfterResize,\n comingDurationBoundingBoxBeforeResize,\n comingDurationBoundingBoxAfterResize,\n modelDurationBoundingBoxBeforeResize,\n modelDurationBoundingBoxAfterResize,\n draggingGoingDurationBoundingBox,\n draggingComingDurationBoundingBox,\n draggingModelDurationBoundingBox,\n rowHeight: targetRowBoundingBox.height,\n };\n }\n\n test('should change only the end time.', async ({ page }) => {\n // Given\n const targetEndTime = '10:00';\n\n // When\n const {\n goingDurationBoundingBoxBeforeResize,\n goingDurationBoundingBoxAfterResize,\n comingDurationBoundingBoxBeforeResize,\n comingDurationBoundingBoxAfterResize,\n modelDurationBoundingBoxBeforeResize,\n modelDurationBoundingBoxAfterResize,\n } = await setupResizingGoingOrComingDuration(page, targetEndTime);\n\n // Then\n expect(goingDurationBoundingBoxAfterResize.height).toBeCloseTo(\n goingDurationBoundingBoxBeforeResize.height,\n -1\n );\n expect(comingDurationBoundingBoxAfterResize.height).toBeCloseTo(\n comingDurationBoundingBoxBeforeResize.height,\n -1\n );\n expect(modelDurationBoundingBoxAfterResize.height).toBeGreaterThan(\n modelDurationBoundingBoxBeforeResize.height\n );\n });\n\n test('the dragging element should have a minimum height(=1 row) without going and coming durations.', async ({\n page,\n }) => {\n // Given\n const targetEndTime = '04:00';\n\n // When\n const {\n goingDurationBoundingBoxBeforeResize,\n comingDurationBoundingBoxBeforeResize,\n draggingGoingDurationBoundingBox,\n draggingComingDurationBoundingBox,\n draggingModelDurationBoundingBox,\n rowHeight,\n } = await setupResizingGoingOrComingDuration(page, targetEndTime, true);\n\n // Then\n expect(draggingGoingDurationBoundingBox?.height).toBeCloseTo(\n goingDurationBoundingBoxBeforeResize.height,\n -1\n );\n expect(draggingComingDurationBoundingBox?.height).toBeCloseTo(\n comingDurationBoundingBoxBeforeResize.height,\n -1\n );\n expect(draggingModelDurationBoundingBox?.height).toBeCloseTo(rowHeight, -1);\n });\n\n test('the result of resizing should have a minimum height(=1 row) without going and coming durations.', async ({\n page,\n }) => {\n // Given\n const targetEndTime = '04:00';\n\n // When\n const {\n goingDurationBoundingBoxBeforeResize,\n goingDurationBoundingBoxAfterResize,\n comingDurationBoundingBoxBeforeResize,\n comingDurationBoundingBoxAfterResize,\n modelDurationBoundingBoxAfterResize,\n rowHeight,\n } = await setupResizingGoingOrComingDuration(page, targetEndTime);\n\n // Then\n expect(goingDurationBoundingBoxAfterResize.height).toBeCloseTo(\n goingDurationBoundingBoxBeforeResize.height,\n -1\n );\n expect(comingDurationBoundingBoxAfterResize.height).toBeCloseTo(\n comingDurationBoundingBoxBeforeResize.height,\n -1\n );\n expect(modelDurationBoundingBoxAfterResize.height).toBeCloseTo(rowHeight, -1);\n });\n});\n" }, { "path": "apps/calendar/playwright/week/timeGridScrollSync.e2e.ts", "content": "import type { Page } from '@playwright/test';\nimport { expect, test } from '@playwright/test';\n\nimport { WEEK_VIEW_PAGE_URL } from '../configs';\nimport { getBoundingBox, getPrefixedClassName } from '../utils';\n\ntest.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n});\n\n// NOTE: Syncing scroll only happens when the mousemove event is fired\n// and cannot use `dragAndDrop` because it's better to be manually controlled.\n\nfunction getScrollTop(el: HTMLElement) {\n return el.scrollTop;\n}\n\ntest.describe('Scroll syncing in time grid when selecting grid', () => {\n /**\n * The third column should be empty\n */\n async function setup(page: Page) {\n const timeGridContainerLocator = page.locator(\n `${getPrefixedClassName('panel')}${getPrefixedClassName('time')}`\n );\n const targetColumnLocator = page.locator('data-testid=timegrid-column-2');\n\n const containerBoundingBox = await getBoundingBox(timeGridContainerLocator);\n const columnBoundingBox = await getBoundingBox(targetColumnLocator);\n\n return {\n targetColumnLocator,\n timeGridContainerLocator,\n containerBoundingBox,\n columnBoundingBox,\n };\n }\n\n test('it should sync scroll while dragging down to the bottom', async ({ page }) => {\n // Given\n const {\n targetColumnLocator,\n columnBoundingBox,\n timeGridContainerLocator,\n containerBoundingBox,\n } = await setup(page);\n const scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n\n // When\n await targetColumnLocator.hover({\n position: {\n x: columnBoundingBox.width / 2,\n y: 10,\n },\n force: true,\n });\n await page.mouse.down();\n await page.mouse.move(\n columnBoundingBox.x + columnBoundingBox.width / 2,\n containerBoundingBox.y + containerBoundingBox.height - 10\n );\n\n // Then\n const scrollTopAfterSync = await timeGridContainerLocator.evaluate(getScrollTop);\n expect(scrollTopAfterSync).toBeGreaterThan(scrollTopBeforeSync);\n });\n\n test('it should sync scroll while dragging up to the top', async ({ page }) => {\n // Given\n const {\n targetColumnLocator,\n columnBoundingBox,\n timeGridContainerLocator,\n containerBoundingBox,\n } = await setup(page);\n\n // Middle of the column\n const xPosition = columnBoundingBox.x + columnBoundingBox.width / 2;\n\n // Scroll down to the bottom of the column\n await targetColumnLocator.hover();\n await page.mouse.wheel(0, containerBoundingBox.height);\n let scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n await expect\n .poll(async () => {\n scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n\n return scrollTopBeforeSync;\n })\n .toBeCloseTo(containerBoundingBox.height, -2);\n\n // When\n // drag up to the top of the column\n await page.mouse.move(xPosition, containerBoundingBox.y + containerBoundingBox.height - 10);\n await page.mouse.down();\n\n await expect\n .poll(async () => {\n await page.mouse.move(xPosition, containerBoundingBox.y);\n\n // Then\n const scrollTopAfterSync = await timeGridContainerLocator.evaluate(getScrollTop);\n return scrollTopAfterSync;\n })\n .toBeLessThan(scrollTopBeforeSync);\n });\n});\n\ntest.describe('Scroll syncing in time grid when moving event', () => {\n async function setup(page: Page) {\n const timeGridContainerLocator = page.locator(\n `${getPrefixedClassName('panel')}${getPrefixedClassName('time')}`\n );\n const targetEventLocator = page.locator(\n '[data-testid*=\"time-event\"]:has-text(\"short time event\")'\n );\n const containerBoundingBox = await getBoundingBox(timeGridContainerLocator);\n const eventBoundingBox = await getBoundingBox(targetEventLocator);\n\n return {\n timeGridContainerLocator,\n targetEventLocator,\n containerBoundingBox,\n eventBoundingBox,\n };\n }\n\n test('it should sync scroll while moving event to the edge of the bottom', async ({ page }) => {\n // Given\n const { timeGridContainerLocator, targetEventLocator, containerBoundingBox, eventBoundingBox } =\n await setup(page);\n const scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n\n // When\n await targetEventLocator.hover({\n position: {\n x: eventBoundingBox.width / 2,\n y: 3,\n },\n force: true,\n });\n await page.mouse.down();\n await page.mouse.move(\n eventBoundingBox.x + eventBoundingBox.width / 2,\n containerBoundingBox.y + containerBoundingBox.height - 10\n );\n await page.mouse.up();\n\n // Then\n const scrollTopAfterSync = await timeGridContainerLocator.evaluate(getScrollTop);\n expect(scrollTopAfterSync).toBeGreaterThan(scrollTopBeforeSync);\n });\n\n test('it should sync scroll while moving event to the edge of the top', async ({ page }) => {\n // Given\n const { timeGridContainerLocator, targetEventLocator, containerBoundingBox, eventBoundingBox } =\n await setup(page);\n\n // Let's move the event to the bottom first.\n const middleXOfEvent = eventBoundingBox.x + eventBoundingBox.width / 2;\n await targetEventLocator.hover({\n position: {\n x: eventBoundingBox.width / 2,\n y: 3,\n },\n force: true,\n });\n await page.mouse.down();\n await page.mouse.move(\n middleXOfEvent,\n containerBoundingBox.y + containerBoundingBox.height - 10\n );\n await page.mouse.up();\n\n // Then scroll down a little.\n await page.mouse.wheel(0, containerBoundingBox.height / 2);\n let scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n await expect\n .poll(async () => {\n scrollTopBeforeSync = await timeGridContainerLocator.evaluate(getScrollTop);\n\n return scrollTopBeforeSync;\n })\n .toBeCloseTo(containerBoundingBox.height / 2, -2);\n\n // When\n await targetEventLocator.hover({\n position: {\n x: eventBoundingBox.width / 2,\n y: 3,\n },\n force: true,\n });\n await page.mouse.down();\n\n await expect\n .poll(async () => {\n await page.mouse.move(middleXOfEvent, containerBoundingBox.y - 10);\n\n // Then\n const scrollTopAfterSync = await timeGridContainerLocator.evaluate(getScrollTop);\n return scrollTopAfterSync;\n })\n .toBeLessThan(scrollTopBeforeSync);\n });\n});\n" }, { "path": "apps/calendar/playwright/week/timeGridSelection.e2e.ts", "content": "import { expect, test } from '@playwright/test';\n\nimport { assertTimeGridSelection } from '../assertions';\nimport { WEEK_VIEW_HOUR_START_OPTION_PAGE_URL, WEEK_VIEW_PAGE_URL } from '../configs';\nimport { ClickDelay } from '../constants';\nimport { dragAndDrop, getBoundingBox, getTimeGridLineSelector } from '../utils';\n\nconst GRID_SELECTION_SELECTOR = '[data-testid*=\"time-grid-selection\"]';\n\ntest.describe('Time Grid Selection - Default Options', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_PAGE_URL);\n });\n\n // NOTE: Only firefox automatically scrolls into view at some random tests, so narrowing the range of movement.\n // Maybe `scrollIntoViewIfNeeded` is not supported in the firefox?\n // reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded\n const BASE_GRIDLINE_SELECTOR = 'data-testid=gridline-03:00-03:30';\n\n test('should be able to select a time slot with clicking', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n\n // When\n await startGridLineLocator.click({ force: true, delay: ClickDelay.Short });\n await timeGridSelectionLocator.waitFor(); // Test for debounced click handler.\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 1,\n formattedTimes: ['03:00', '03:30'],\n startTop: startGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n\n // FIXME: it fails on safari & firefox\n test.fixme('should be able to select a time slot with double clicking', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n\n // When\n await startGridLineLocator.dblclick({ force: true, delay: ClickDelay.Immediate });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 1,\n formattedTimes: ['03:00', '03:30'],\n startTop: startGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time from bottom to top', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('01:00'));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 1,\n formattedTimes: ['01:00', '03:30'],\n startTop: targetGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time to upper right', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('01:00'));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n options: {\n targetPosition: {\n x: targetGridLineBoundingBox.width,\n y: startGridLineBoundingBox.height,\n },\n },\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 4,\n formattedTimes: ['03:00'],\n startTop: startGridLineBoundingBox.y,\n endBottom: targetGridLineBoundingBox.y + targetGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time to right', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: startGridLineLocator,\n options: {\n targetPosition: {\n x: startGridLineBoundingBox.width,\n y: 1,\n },\n },\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 4,\n formattedTimes: ['03:00'],\n startTop: startGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time to lower right', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('05:00'));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n options: {\n targetPosition: {\n x: targetGridLineBoundingBox.width,\n y: targetGridLineBoundingBox.height,\n },\n },\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 4,\n formattedTimes: ['03:00'],\n startTop: startGridLineBoundingBox.y,\n endBottom: targetGridLineBoundingBox.y + targetGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time from top to bottom', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('05:00'));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 1,\n formattedTimes: ['03:00', '05:30'],\n startTop: startGridLineBoundingBox.y,\n endBottom: targetGridLineBoundingBox.y + targetGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time to lower left', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('05:00'));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n options: {\n targetPosition: {\n x: 0,\n y: targetGridLineBoundingBox.height,\n },\n },\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 4,\n formattedTimes: ['05:00'],\n startTop: targetGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time to left', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: startGridLineLocator,\n options: {\n targetPosition: {\n x: 1,\n y: 1,\n },\n },\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 4,\n formattedTimes: ['03:00'],\n startTop: startGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time to upper left', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(BASE_GRIDLINE_SELECTOR);\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('01:00'));\n const timeGridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n options: {\n targetPosition: {\n x: 1,\n y: 1,\n },\n },\n });\n\n // Then\n await assertTimeGridSelection(timeGridSelectionLocator, {\n totalElements: 4,\n formattedTimes: ['01:00'],\n startTop: targetGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n\n test('When pressing down the ESC key, the grid selection is canceled.', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(getTimeGridLineSelector('03:00'));\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('05:00'));\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n hold: true,\n });\n await page.keyboard.down('Escape');\n\n // Then\n const gridSelectionLocator = page.locator(GRID_SELECTION_SELECTOR);\n expect(await gridSelectionLocator.count()).toBe(0);\n });\n});\n\n// Regression test for #1238\n// Since the most of the test duplicated with the normal one, check for a few cases including horizontal selections only.\ntest.describe('Time Grid Selection - With different hourStart and hourEnd', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto(WEEK_VIEW_HOUR_START_OPTION_PAGE_URL);\n });\n\n const getColumnSelector = (columnIndex: number) => `data-testid=timegrid-column-${columnIndex}`;\n\n test('should be able to select a range of time to lower right', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(getTimeGridLineSelector('06:00'));\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('08:00'));\n const startColumnLocator = page.locator(getColumnSelector(4));\n const targetColumnLocator = page.locator(getColumnSelector(5));\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n const startColumnBoundingBox = await getBoundingBox(startColumnLocator);\n const endColumnBoundingBox = await getBoundingBox(targetColumnLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n options: {\n sourcePosition: {\n x: startColumnBoundingBox.x,\n y: 5,\n },\n targetPosition: {\n x: endColumnBoundingBox.x,\n y: 5,\n },\n },\n });\n\n // Then\n await assertTimeGridSelection(page.locator(GRID_SELECTION_SELECTOR), {\n totalElements: 2,\n formattedTimes: ['06:00'],\n startTop: startGridLineBoundingBox.y,\n endBottom: targetGridLineBoundingBox.y + targetGridLineBoundingBox.height,\n });\n });\n\n test('should be able to select a range of time to upper left', async ({ page }) => {\n // Given\n const startGridLineLocator = page.locator(getTimeGridLineSelector('08:00'));\n const targetGridLineLocator = page.locator(getTimeGridLineSelector('06:00'));\n const startColumnLocator = page.locator(getColumnSelector(5));\n const targetColumnLocator = page.locator(getColumnSelector(4));\n\n const startGridLineBoundingBox = await getBoundingBox(startGridLineLocator);\n const targetGridLineBoundingBox = await getBoundingBox(targetGridLineLocator);\n const startColumnBoundingBox = await getBoundingBox(startColumnLocator);\n const endColumnBoundingBox = await getBoundingBox(targetColumnLocator);\n\n // When\n await dragAndDrop({\n page,\n sourceLocator: startGridLineLocator,\n targetLocator: targetGridLineLocator,\n options: {\n sourcePosition: {\n x: startColumnBoundingBox.x,\n y: 5,\n },\n targetPosition: {\n x: endColumnBoundingBox.x,\n y: 5,\n },\n },\n });\n\n // Then\n await assertTimeGridSelection(page.locator(GRID_SELECTION_SELECTOR), {\n totalElements: 2,\n formattedTimes: ['06:00'],\n startTop: targetGridLineBoundingBox.y,\n endBottom: startGridLineBoundingBox.y + startGridLineBoundingBox.height,\n });\n });\n});\n" }, { "path": "apps/calendar/postcss.config.js", "content": "module.exports = {\n plugins: [\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n require('postcss-prefixer')({\n prefix: 'toastui-calendar-',\n }),\n ],\n};\n" }, { "path": "apps/calendar/scripts/publishToCDN.js", "content": "/* eslint-disable */\nconst path = require('path');\nconst fs = require('fs');\nconst fetch = require('node-fetch');\nconst pkg = require('../package.json');\n\nconst LOCAL_DIST_PATH = path.join(__dirname, '../dist');\nconst STORAGE_API_URL = 'https://api-storage.cloud.toast.com/v1';\nconst IDENTITY_API_URL = 'https://api-identity.infrastructure.cloud.toast.com/v2.0';\n\nconst TOAST_CLOUD_TENANTID = process.env.TOAST_CLOUD_TENANTID;\nconst TOAST_CLOUD_STORAGEID = process.env.TOAST_CLOUD_STORAGEID;\nconst TOAST_CLOUD_USERNAME = process.env.TOAST_CLOUD_USERNAME;\nconst TOAST_CLOUD_PASSWORD = process.env.TOAST_CLOUD_PASSWORD;\n\nasync function getTOASTCloudContainer(token) {\n const response = await fetch(`${STORAGE_API_URL}/${TOAST_CLOUD_STORAGEID}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': token,\n },\n });\n const container = await response.text();\n\n return `${container.trim()}/calendar`;\n}\n\nasync function getTOASTCloudToken() {\n const data = {\n auth: {\n tenantId: TOAST_CLOUD_TENANTID,\n passwordCredentials: {\n username: TOAST_CLOUD_USERNAME,\n password: TOAST_CLOUD_PASSWORD,\n },\n },\n };\n\n const response = await fetch(`${IDENTITY_API_URL}/tokens`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data),\n });\n const result = await response.json();\n\n return result.access.token.id;\n}\n\nfunction publishToCdn(token, localPath, cdnPath) {\n const files = fs.readdirSync(localPath);\n\n files.forEach((fileName) => {\n const objectPath = `${cdnPath}/${fileName}`;\n\n if (fileName.match(/.(js|css|svg)$/)) {\n const readStream = fs.createReadStream(`${localPath}/${fileName}`);\n const contentType = /css$/.test(fileName)\n ? 'text/css'\n : /js$/.test(fileName)\n ? 'text/javascript'\n : 'image/svg+xml';\n\n fetch(`${STORAGE_API_URL}/${objectPath}`, {\n method: 'PUT',\n headers: {\n 'Content-Type': contentType,\n 'X-Auth-Token': token,\n },\n body: readStream,\n });\n } else {\n publishToCdn(token, `${localPath}/${fileName}`, objectPath);\n }\n });\n}\n\nasync function publish() {\n const token = await getTOASTCloudToken();\n const container = await getTOASTCloudContainer(token);\n const cdnPath = `${TOAST_CLOUD_STORAGEID}/${container}`;\n\n [`v${pkg.version}`, 'latest'].forEach((dir) => {\n publishToCdn(token, LOCAL_DIST_PATH, `${cdnPath}/${dir}`);\n });\n}\n\npublish();\n" }, { "path": "apps/calendar/scripts/updateWrapper.js", "content": "/* eslint-disable */\nconst path = require('path');\nconst fs = require('fs');\n\nconst CORE_PACKAGE_JSON_PATH = path.join(__dirname, '../package.json');\nconst REACT_PACKAGE_JSON_PATH = path.join(__dirname, '../../react-calendar/package.json');\nconst VUE_PACKAGE_JSON_PATH = path.join(__dirname, '../../vue-calendar/package.json');\n\nconst corePackage = require(CORE_PACKAGE_JSON_PATH);\nconst reactPackage = require(REACT_PACKAGE_JSON_PATH);\nconst vuePackage = require(VUE_PACKAGE_JSON_PATH);\n\nconst version = corePackage.version;\n\nreactPackage.version = version;\nreactPackage.dependencies['@toast-ui/calendar'] = `^${version}`;\n\nfs.writeFileSync(REACT_PACKAGE_JSON_PATH, `${JSON.stringify(reactPackage, null, 2)}\\n`);\n\nvuePackage.version = version;\nvuePackage.dependencies['@toast-ui/calendar'] = `^${version}`;\n\nfs.writeFileSync(VUE_PACKAGE_JSON_PATH, `${JSON.stringify(vuePackage, null, 2)}\\n`);\n" }, { "path": "apps/calendar/src/calendarContainer.tsx", "content": "import { h } from 'preact';\n\nimport { StoreProvider } from '@src/contexts/calendarStore';\nimport { EventBusProvider } from '@src/contexts/eventBus';\nimport { FloatingLayerProvider } from '@src/contexts/floatingLayer';\nimport { ThemeProvider } from '@src/contexts/themeStore';\nimport type { EventBus } from '@src/utils/eventBus';\n\nimport type { PropsWithChildren } from '@t/components/common';\nimport type { ExternalEventTypes } from '@t/eventBus';\nimport type { CalendarStore, InternalStoreAPI } from '@t/store';\nimport type { ThemeStore } from '@t/theme';\n\ninterface Props {\n theme: InternalStoreAPI;\n store: InternalStoreAPI;\n eventBus: EventBus;\n}\n\nexport function CalendarContainer({ theme, store, eventBus, children }: PropsWithChildren) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n" }, { "path": "apps/calendar/src/components/dayGridCommon/dayName.tsx", "content": "import { h } from 'preact';\n\nimport type { DayNameThemes } from '@src/components/dayGridCommon/gridHeader';\nimport { Template } from '@src/components/template';\nimport { useEventBus } from '@src/contexts/eventBus';\nimport { cls } from '@src/helpers/css';\nimport { getDayName } from '@src/helpers/dayName';\nimport { usePrimaryTimezone } from '@src/hooks/timezone/usePrimaryTimezone';\nimport type { TemplateName } from '@src/template/default';\nimport type TZDate from '@src/time/date';\nimport { isSameDate, isSaturday, isSunday, isWeekend, toFormat } from '@src/time/datetime';\n\nimport type { CalendarViewType, StyleProp } from '@t/components/common';\nimport type { TemplateMonthDayName, TemplateWeekDayName } from '@t/template';\n\ninterface Props {\n type: CalendarViewType;\n dayName: TemplateWeekDayName | TemplateMonthDayName;\n style: StyleProp;\n theme: DayNameThemes;\n}\n\nfunction isWeekDayName(\n type: 'week' | 'month',\n dayName: Props['dayName']\n): dayName is TemplateWeekDayName {\n return type === 'week';\n}\n\nfunction getWeekDayNameColor({\n dayName,\n theme,\n today,\n}: {\n dayName: TemplateWeekDayName;\n theme: Props['theme'];\n today: TZDate;\n}) {\n const { day, dateInstance } = dayName;\n const isToday = isSameDate(today, dateInstance);\n const isPastDay = !isToday && dateInstance < today;\n\n if (isSunday(day)) {\n return theme.common.holiday.color;\n }\n if (isPastDay) {\n return theme.week?.pastDay.color;\n }\n if (isSaturday(day)) {\n return theme.common.saturday.color;\n }\n if (isToday) {\n return theme.week?.today.color;\n }\n\n return theme.common.dayName.color;\n}\n\nfunction getMonthDayNameColor({\n dayName,\n theme,\n}: {\n dayName: TemplateMonthDayName;\n theme: Props['theme'];\n}) {\n const { day } = dayName;\n\n if (isSunday(day)) {\n return theme.common.holiday.color;\n }\n if (isSaturday(day)) {\n return theme.common.saturday.color;\n }\n\n return theme.common.dayName.color;\n}\n\nexport function DayName({ dayName, style, type, theme }: Props) {\n const eventBus = useEventBus();\n const [, getNow] = usePrimaryTimezone();\n const today = getNow();\n const { day } = dayName;\n const color =\n type === 'week'\n ? getWeekDayNameColor({ dayName: dayName as TemplateWeekDayName, theme, today })\n : getMonthDayNameColor({ dayName: dayName as TemplateMonthDayName, theme });\n\n const templateType = `${type}DayName` as TemplateName;\n\n const handleClick = () => {\n if (isWeekDayName(type, dayName)) {\n eventBus.fire('clickDayName', { date: toFormat(dayName.dateInstance, 'YYYY-MM-DD') });\n }\n };\n\n return (\n
\n \n