├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── run-e2e.yml ├── .gitignore ├── .npmignore ├── .storybook ├── main.js ├── manager.js ├── preview.jsx └── readme.js ├── .travis.yml ├── LICENSE ├── NOTICE ├── README.md ├── codecept.conf.js ├── demo ├── images │ ├── FrameGrid.png │ ├── JustifiedGrid.png │ ├── MasonryGrid.png │ ├── PackingGrid.png │ └── logo.png └── index.html ├── global.d.ts ├── jsdoc.json ├── karma.conf.js ├── mocha.opts ├── package-lock.json ├── package.json ├── packages ├── ngx-grid │ ├── .editorconfig │ ├── .gitignore │ ├── .npmrc │ ├── .prettierrc │ ├── .storybook │ │ ├── main.js │ │ ├── manager.js │ │ ├── preview-head.html │ │ ├── preview.js │ │ └── tsconfig.json │ ├── README.md │ ├── angular.json │ ├── e2e │ │ ├── protractor.conf.js │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── projects │ │ └── ngx-grid │ │ │ ├── README.md │ │ │ ├── karma.conf.js │ │ │ ├── ng-package.json │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── src │ │ │ ├── lib │ │ │ │ ├── grids │ │ │ │ │ ├── ngx-frame-grid.component.ts │ │ │ │ │ ├── ngx-justified-grid.component.ts │ │ │ │ │ ├── ngx-masonry-grid.component.ts │ │ │ │ │ └── ngx-packing-grid.component.ts │ │ │ │ ├── ngx-grid.component.ts │ │ │ │ ├── ngx-grid.interface.ts │ │ │ │ ├── ngx-grid.module.ts │ │ │ │ ├── ngx-grid.service.ts │ │ │ │ └── types.ts │ │ │ ├── public-api.ts │ │ │ └── test.ts │ │ │ ├── tsconfig.json │ │ │ ├── tsconfig.lib.json │ │ │ ├── tsconfig.lib.prod.json │ │ │ ├── tsconfig.spec.json │ │ │ └── tslint.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── stories │ │ ├── 1-MasonryGrid │ │ │ ├── 0-MasonryGrid.stories.ts │ │ │ ├── 1-MasonryGrid.stories.ts │ │ │ ├── 2-MasonryGridMultiple.stories.ts │ │ │ ├── 3-MasonryGrid100.stories.ts │ │ │ └── apps │ │ │ │ ├── NgxMasonryGrid100App │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ │ │ ├── NgxMasonryGridApp │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ │ │ └── NgxMasonryGridMultipleApp │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ ├── 2-JustifiedGrid │ │ │ ├── 0-JustifiedGrid.stories.ts │ │ │ ├── 1-JustifiedGrid.stories.ts │ │ │ ├── 2-CroppedJustifiedGrid.stories.ts │ │ │ ├── 3-KeepRatioWithOffset.stories.ts │ │ │ ├── 4-KeepRatioWithMaintainedTarget.stories.ts │ │ │ ├── 5-StretchedJustifiedGrid.stories.ts │ │ │ └── apps │ │ │ │ ├── NgxJustifiedGridApp │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ │ │ ├── NgxKeepRatioWithMaintainedTargetApp │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ │ │ └── NgxKeepRatioWithOffsetApp │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ ├── 3-FrameGrid │ │ │ ├── 0-FrameGrid.stories.ts │ │ │ ├── 1-FrameGrid.stories.ts │ │ │ └── apps │ │ │ │ └── NgxFrameGridApp │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ ├── 4-PackingGrid │ │ │ ├── 0-PackingGrid.stories.ts │ │ │ ├── 1-PackingGrid.stories.ts │ │ │ └── apps │ │ │ │ └── NgxPackingGridApp │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ ├── 5-MethodsEvents │ │ │ ├── 0-MethodsEvents.stories.ts │ │ │ ├── 1-MethodsEvents.stories.ts │ │ │ └── apps │ │ │ │ └── NgxMethodsEventsApp │ │ │ │ ├── app.component.html │ │ │ │ └── app.component.ts │ │ ├── apps │ │ │ └── default │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ └── app.module.ts │ │ └── global.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── react-grid │ ├── .eslintrc │ ├── .gitignore │ ├── .storybook │ │ ├── main.js │ │ ├── manager.js │ │ └── preview.jsx │ ├── README.md │ ├── global.d.ts │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── rollup.config.js │ ├── src │ │ ├── Grid.tsx │ │ ├── consts.ts │ │ ├── grids │ │ │ ├── FrameGrid.tsx │ │ │ ├── JustifiedGrid.tsx │ │ │ ├── MasonryGrid.tsx │ │ │ └── PackingGrid.tsx │ │ ├── index.ts │ │ ├── index.umd.ts │ │ └── types.ts │ ├── stories │ │ ├── 1-MasonryGrid │ │ │ ├── 0-MasonryGrid.stories.tsx │ │ │ ├── 1-MasonryGrid.stories.tsx │ │ │ ├── 2-MasonryGridMultiple.stories.tsx │ │ │ ├── 3-MasonryGrid100.stories.tsx │ │ │ └── apps │ │ │ │ ├── ReactMasonryGrid100App.tsx │ │ │ │ ├── ReactMasonryGridApp.tsx │ │ │ │ └── ReactMasonryGridMultipleApp.tsx │ │ ├── 2-JustifiedGrid │ │ │ ├── 0-JustifiedGrid.stories.tsx │ │ │ ├── 1-JustifiedGrid.stories.tsx │ │ │ ├── 2-CroppedJustifiedGrid.stories.tsx │ │ │ ├── 3-KeepRatioWithOffset.stories.tsx │ │ │ ├── 4-KeepRatioWithMaintainedTarget.stories.tsx │ │ │ ├── 5-StretchedJustifiedGrid.stories.ts │ │ │ └── apps │ │ │ │ ├── ReactJustifiedGridApp.tsx │ │ │ │ ├── ReactKeepRatioWithMaintainedTargetApp.tsx │ │ │ │ └── ReactKeepRatioWithOffsetApp.tsx │ │ ├── 3-FrameGrid │ │ │ ├── 0-FrameGrid.stories.tsx │ │ │ ├── 1-FrameGrid.stories.tsx │ │ │ └── apps │ │ │ │ └── ReactFrameGridApp.tsx │ │ ├── 4-PackingGrid │ │ │ ├── 0-PackingGrid.stories.tsx │ │ │ ├── 1-PackingGrid.stories.tsx │ │ │ └── apps │ │ │ │ └── ReactPackingGridApp.tsx │ │ └── 5-MethodsEvents │ │ │ ├── 0-MethodsEvents.stories.tsx │ │ │ ├── 1-MethodsEvents.stories.tsx │ │ │ └── apps │ │ │ └── ReactMethodsEventsApp.tsx │ ├── tsconfig.build.json │ ├── tsconfig.declaration.json │ └── tsconfig.json ├── svelte-grid │ ├── .gitignore │ ├── .storybook │ │ ├── main.js │ │ ├── manager.js │ │ └── preview.js │ ├── README.md │ ├── global.d.ts │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.png │ │ ├── global.css │ │ └── index.html │ ├── rollup.build.config.js │ ├── rollup.config.js │ ├── src │ │ ├── Grid.js │ │ ├── Grid.svelte │ │ ├── grids │ │ │ ├── FrameGrid.js │ │ │ ├── JustifiedGrid.js │ │ │ ├── MasonryGrid.js │ │ │ └── PackingGrid.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.umd.js │ │ └── main.ts │ ├── stories │ │ ├── 1-MasonryGrid │ │ │ ├── 0-MasonryGrid.stories.tsx │ │ │ ├── 1-MasonryGrid.stories.tsx │ │ │ ├── 2-MasonryGridMultiple.stories.tsx │ │ │ ├── 3-MasonryGrid100.stories.tsx │ │ │ └── apps │ │ │ │ ├── SvelteMasonryGrid100App.svelte │ │ │ │ ├── SvelteMasonryGridApp.svelte │ │ │ │ └── SvelteMasonryGridMultipleApp.svelte │ │ ├── 2-JustifiedGrid │ │ │ ├── 0-JustifiedGrid.stories.tsx │ │ │ ├── 1-JustifiedGrid.stories.tsx │ │ │ ├── 2-CroppedJustifiedGrid.stories.tsx │ │ │ ├── 3-KeepRatioWithOffset.stories.tsx │ │ │ ├── 4-KeepRatioWithMaintainedTarget.stories.tsx │ │ │ ├── 5-StretchedJustifiedGrid.stories.ts │ │ │ └── apps │ │ │ │ ├── SvelteJustifiedGridApp.svelte │ │ │ │ ├── SvelteKeepRatioWithMaintainedTargetApp.svelte │ │ │ │ └── SvelteKeepRatioWithOffsetApp.svelte │ │ ├── 3-FrameGrid │ │ │ ├── 0-FrameGrid.stories.tsx │ │ │ ├── 1-FrameGrid.stories.tsx │ │ │ └── apps │ │ │ │ └── SvelteFrameGridApp.svelte │ │ ├── 4-PackingGrid │ │ │ ├── 0-PackingGrid.stories.tsx │ │ │ ├── 1-PackingGrid.stories.tsx │ │ │ └── apps │ │ │ │ └── SveltePackingGridApp.svelte │ │ └── 5-MethodsEvents │ │ │ ├── 0-MasonryGrid.stories.tsx │ │ │ ├── 1-MethodsEvents.stories.tsx │ │ │ └── apps │ │ │ └── SvelteMethodsEventsApp.svelte │ └── tsconfig.json └── vue-grid │ ├── .browserslistrc │ ├── .editorconfig │ ├── .eslintrc.js │ ├── .npmignore │ ├── .storybook │ ├── main.js │ ├── manager.js │ └── preview.jsx │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── rollup.config.js │ ├── src │ ├── Grid.ts │ ├── global.d.ts │ ├── grids │ │ ├── FrameGrid.ts │ │ ├── JustifiedGrid.ts │ │ ├── MasonryGrid.ts │ │ └── PackingGrid.ts │ ├── index.ts │ ├── index.umd.ts │ ├── types.ts │ └── utils.ts │ ├── stories │ ├── 1-MasonryGrid │ │ ├── 0-MasonryGrid.stories.tsx │ │ ├── 1-MasonryGrid.stories.tsx │ │ ├── 2-MasonryGridMultiple.stories.tsx │ │ ├── 3-MasonryGrid100.stories.tsx │ │ └── apps │ │ │ ├── VueMasonryGrid100App.vue │ │ │ ├── VueMasonryGridApp.vue │ │ │ └── VueMasonryGridMultipleApp.vue │ ├── 2-JustifiedGrid │ │ ├── 0-JustifiedGrid.stories.tsx │ │ ├── 1-JustifiedGrid.stories.tsx │ │ ├── 2-CroppedJustifiedGrid.stories.tsx │ │ ├── 3-KeepRatioWithOffset.stories.tsx │ │ ├── 4-KeepRatioWithMaintainedTarget.stories.tsx │ │ ├── 5-StretchedJustifiedGrid.stories.ts │ │ └── apps │ │ │ ├── VueJustifiedGridApp.vue │ │ │ ├── VueKeepRatioWithMaintainedTargetApp.vue │ │ │ └── VueKeepRatioWithOffsetApp.vue │ ├── 3-FrameGrid │ │ ├── 0-FrameGrid.stories.tsx │ │ ├── 1-FrameGrid.stories.tsx │ │ └── apps │ │ │ └── VueFrameGridApp.vue │ ├── 4-PackingGrid │ │ ├── 0-PackingGrid.stories.tsx │ │ ├── 1-PackingGrid.stories.tsx │ │ └── apps │ │ │ └── VuePackingGridApp.vue │ ├── 5-MethodsEvents │ │ ├── 0-MethodsEvents.stories.tsx │ │ ├── 1-MethodsEvents.stories.tsx │ │ └── apps │ │ │ └── VueMethodsEventsApp.vue │ ├── global.d.ts │ └── utils.ts │ ├── tsconfig.declaration.json │ ├── tsconfig.json │ └── vue3 │ ├── .storybook │ ├── main.js │ ├── manager.js │ └── preview.jsx │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── storybook-static │ ├── favicon.ico │ ├── iframe.html │ └── index.html ├── rollup.config.js ├── src ├── ContainerManager.ts ├── Grid.ts ├── GridItem.ts ├── ItemRenderer.ts ├── ResizeWatcher.ts ├── consts.ts ├── grids │ ├── FrameGrid.ts │ ├── JustifiedGrid.ts │ ├── MasonryGrid.ts │ ├── PackingGrid.ts │ └── lib │ │ ├── BoxModel.ts │ │ └── dijkstra.ts ├── index.cjs.ts ├── index.ts ├── index.umd.ts ├── types.ts └── utils.ts ├── stories ├── 0-Introduction.stories.mdx ├── 1-MasonryGrid │ ├── 0-MasonryGrid.stories.tsx │ ├── 1-MasonryGrid.stories.tsx │ ├── 2-MasonryGridMultiple.stories.tsx │ ├── 3-MasonryGrid100.stories.tsx │ ├── apps │ │ └── VanillaMasonryGridApp.tsx │ └── templates │ │ ├── VanillaMasonryGrid100.html │ │ └── VanillaMasonryGridMultiple.html ├── 2-JustifiedGrid │ ├── 0-JustifiedGrid.stories.tsx │ ├── 1-JustifiedGrid.stories.tsx │ ├── 2-CroppedJustifiedGrid.stories.tsx │ ├── 3-KeepRatioWithOffset.stories.tsx │ ├── 4-KeepRatioWithMaintainedTarget.stories.tsx │ ├── 5-StretchedJustifiedGrid.stories.tsx │ ├── apps │ │ └── VanillaJustifiedGridApp.tsx │ └── templates │ │ ├── VanillaKeepRatioWithMaintainedTarget.html │ │ └── VanillaKeepRatioWithOffset.html ├── 3-FrameGrid │ ├── 0-FrameGrid.stories.tsx │ ├── 1-FrameGrid.stories.tsx │ └── apps │ │ └── VanillaFrameGridApp.tsx ├── 4-PackingGrid │ ├── 0-PackingGrid.stories.tsx │ ├── 1-PackingGrid.stories.tsx │ └── apps │ │ └── VanillaPackingGridApp.tsx ├── 5-MethodsEvents │ ├── 0-MethodsEvents.stories.tsx │ ├── 1-MethodsEvents.stories.tsx │ ├── apps │ │ └── VanillaMethodsEventsApp.tsx │ └── templates │ │ └── VanillaMethodsEvents.html ├── templates │ ├── ReactJSX.tsx │ ├── controls.ts │ ├── default.css │ ├── default.html │ └── preview.ts └── utils.ts ├── test ├── e2e │ ├── helper │ │ ├── HTMLHelper.ts │ │ └── StorybookHelper.ts │ ├── manual │ │ └── index.html │ ├── steps.d.ts │ ├── tests │ │ ├── 100MasonryGrid.e2e.ts │ │ ├── CroppedJustifiedGrid.e2e.ts │ │ ├── DefaultMasonryGrid.e2e.ts │ │ ├── FrameGrid.e2e.ts │ │ ├── JustifiedGrid.e2e.ts │ │ ├── KeepRatioWithMaintainedTarget.e2e.ts │ │ ├── KeepRatioWithOffset.e2e.ts │ │ ├── MethodsEvents.e2e.ts │ │ ├── MultipleMasonryGrid.e2e.ts │ │ ├── PackingGrid.e2e.ts │ │ └── utils.ts │ └── tsconfig.json ├── manual │ ├── contentAlign.html │ ├── justified.html │ ├── justifiedgrid-stretch.html │ ├── justifiedinfinitegrid-stretch.html │ ├── size-group.html │ ├── stretch-column.html │ └── stretch.html └── unit │ ├── ContainerManager.spec.ts │ ├── FrameGrid.spec.ts │ ├── Grid.spec.ts │ ├── GridItem.spec.ts │ ├── ItemRenderer.spec.ts │ ├── JustifiedGrid.spec.ts │ ├── MasonryGrid.spec.ts │ ├── PackingGrid.spec.ts │ ├── ResizeWatcher.spec.ts │ ├── samples │ ├── SampleGrid.ts │ └── SampleGridFramework.ts │ ├── utils.spec.ts │ └── utils │ ├── consts.ts │ └── utils.ts ├── tsconfig.declaration.json ├── tsconfig.json └── tsconfig.test.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | charset = utf-8 8 | end_of_line = lf 9 | indent_style = space 10 | indent_size = 2 11 | max_line_length = 80 12 | 13 | [{*.json,.travis.yml}] 14 | indent_style = space 15 | indent_size = 2 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/ 3 | *.js 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": [ 5 | "@typescript-eslint", 6 | "import" 7 | ], 8 | "extends": [ 9 | "eslint:recommended", 10 | "plugin:@typescript-eslint/eslint-recommended", 11 | "plugin:@typescript-eslint/recommended", 12 | "plugin:react/recommended" 13 | ], 14 | "rules": { 15 | "import/no-webpack-loader-syntax": "off", 16 | "no-unused-vars": "off", 17 | "no-console": "error", 18 | "no-shadow": "error", 19 | "@typescript-eslint/no-var-requires": "off", 20 | "@typescript-eslint/no-unused-vars": ["error"], 21 | "@typescript-eslint/explicit-module-boundary-types": "off", 22 | "@typescript-eslint/no-explicit-any": "off", 23 | "@typescript-eslint/no-non-null-assertion": "off", 24 | "@typescript-eslint/no-empty-interface": "off", 25 | "@typescript-eslint/ban-types": "off", 26 | "@typescript-eslint/indent": ["error", 2], 27 | "@typescript-eslint/adjacent-overload-signatures": "off", 28 | "max-len": ["error", { "code": 120, "comments": 400, "ignoreTemplateLiterals": true }], 29 | "arrow-parens": ["error", "always"], 30 | "@typescript-eslint/naming-convention": [ 31 | "error", 32 | { "selector": "default", "modifiers": ["protected"], "format": [] }, 33 | { "selector": "default", "modifiers": ["private"], "format": ["camelCase"], "leadingUnderscore": "require" } 34 | ], 35 | "no-empty-interface": "off", 36 | "comma-dangle": [ 37 | "error", 38 | "always-multiline" 39 | ], 40 | "semi": [ 41 | "error", 42 | "always" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 4 | ## Steps to check or reproduce 5 | 6 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Issue 2 | 3 | 4 | ## Details 5 | 6 | -------------------------------------------------------------------------------- /.github/workflows/run-e2e.yml: -------------------------------------------------------------------------------- 1 | name: Run tests 2 | on: [push, pull_request] 3 | jobs: 4 | unit: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - uses: actions/checkout@v2 8 | - uses: actions/setup-node@v2.1.5 9 | with: 10 | node-version: 14.15.4 11 | - name: install 12 | run: npm install 13 | - name: lint 14 | run: npm run lint 15 | - name: test 16 | run: npm run coverage 17 | - name: Coveralls GitHub Action 18 | uses: coverallsapp/github-action@v1.1.2 19 | with: 20 | github-token: ${{ secrets.GITHUB_TOKEN }} 21 | # e2e: 22 | # runs-on: ubuntu-latest 23 | # steps: 24 | # - uses: actions/checkout@v2 25 | # - uses: actions/setup-node@v2.1.5 26 | # with: 27 | # node-version: 14.15.4 28 | # - uses: microsoft/playwright-github-action@v1.4.4 29 | # - run: npm install 30 | # - name: install packages 31 | # run: npm run e2e:pre-install 32 | # - name: build grid 33 | # run: npm run e2e:pre-build 34 | # - name: run tests 35 | # run: npm run e2e:headless 36 | # - name: Archive logs 37 | # if: ${{ failure() }} 38 | # uses: actions/upload-artifact@v2 39 | # with: 40 | # name: e2e log 41 | # path: test/e2e/log 42 | 43 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | #configs 2 | config 3 | bower.json 4 | 5 | #tests 6 | test 7 | karma.conf.js 8 | 9 | #build tools 10 | webpack.*.js 11 | .travis.yml 12 | .codeclimate.yml 13 | 14 | #linters 15 | .eslintrc* 16 | 17 | #docs 18 | doc 19 | demo 20 | jsdoc.json 21 | README.md 22 | 23 | #editor settings 24 | .idea 25 | .editorconfig 26 | _site 27 | coverage/ 28 | node_modules/ 29 | .github 30 | .babelrc 31 | mocha.opts 32 | demo/ 33 | 34 | #packages 35 | packages 36 | 37 | 38 | #storybook 39 | .storybook 40 | stories/ 41 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const createCompiler = require("@storybook/addon-docs/mdx-compiler-plugin"); 2 | 3 | module.exports = { 4 | webpackFinal: config => { 5 | config.module.rules.push({ 6 | test: /\.(ts|tsx)$/, 7 | use: [ 8 | { 9 | loader: require.resolve("awesome-typescript-loader"), 10 | }, 11 | // Optional 12 | { 13 | loader: require.resolve("react-docgen-typescript-loader"), 14 | }, 15 | ], 16 | }); 17 | return config; 18 | }, 19 | stories: [ 20 | "../stories/**/*.stories.mdx", 21 | "../stories/**/*.stories.@(js|jsx|ts|tsx)" 22 | ], 23 | addons: [ 24 | "@storybook/addon-google-analytics", 25 | "@storybook/addon-controls/register", 26 | "@storybook/addon-viewport/register", 27 | "storybook-addon-preview/register", 28 | "storybook-dark-mode/register", 29 | "@storybook/addon-essentials", 30 | ], 31 | }; 32 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | panelPosition: "right", 5 | }); 6 | 7 | 8 | if (location.hostname.indexOf("localhost") === -1) { 9 | window.STORYBOOK_GA_ID = "G-LWLTCXMENE"; 10 | window.STORYBOOK_REACT_GA_OPTIONS = {}; 11 | } 12 | -------------------------------------------------------------------------------- /.storybook/preview.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { themes } from "@storybook/theming"; 3 | import { 4 | INITIAL_VIEWPORTS, 5 | // or MINIMAL_VIEWPORTS, 6 | } from "@storybook/addon-viewport"; 7 | 8 | import { 9 | Title, 10 | Description, 11 | Primary, 12 | PRIMARY_STORY, 13 | ArgsTable, 14 | DocsContainer, 15 | DocsContext, 16 | } from "@storybook/addon-docs/blocks"; 17 | 18 | // or global addParameters 19 | export const parameters = { 20 | docs: { 21 | container: DocsContainer, 22 | page: () => { 23 | const context = React.useContext(DocsContext); 24 | 25 | return <> 26 | 27 | <h2 className={"sbdocs-subtitle"}>{context.name}</h2> 28 | <Primary /> 29 | <ArgsTable story={PRIMARY_STORY} /> 30 | </>; 31 | }, 32 | }, 33 | controls: { 34 | passArgsFirst: true, 35 | expanded: true, 36 | hideNoControlsWarning: true, 37 | }, 38 | viewport: { 39 | viewports: { 40 | ...INITIAL_VIEWPORTS, 41 | }, 42 | }, 43 | darkMode: { 44 | // Override the default light theme 45 | light: { ...themes.normal }, 46 | // Override the default dark theme 47 | dark: { ...themes.dark }, 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /.storybook/readme.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs"); 3 | 4 | 5 | const introductionText = fs.readFileSync(path.resolve(__dirname, "../stories/0-Introduction.stories.mdx"), { 6 | encoding: "utf-8", 7 | }); 8 | const readmeText = fs.readFileSync(path.resolve(__dirname, "../README.md"), { 9 | encoding: "utf-8", 10 | }); 11 | 12 | const startIndex = introductionText.indexOf("<!-- README -->"); 13 | 14 | 15 | if (startIndex === -1) { 16 | throw new Error("No Set <!-- README --> comment"); 17 | } 18 | 19 | fs.writeFileSync(path.resolve(__dirname, "../stories/0-Introduction.stories.mdx"), `${introductionText.substring(0, startIndex)}<!-- README -->\n${readmeText}`, { 20 | encoding: "utf-8", 21 | }); 22 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "12" 4 | dist: trusty 5 | sudo: false 6 | install: 7 | - npm install 8 | addons: 9 | chrome: stable 10 | cache: 11 | directories: 12 | - "node_modules" 13 | before_script: 14 | - npm run lint 15 | script: 16 | - npm run coverage 17 | after_success: 18 | - npm run coveralls 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | egjs-grid 2 | 3 | Copyright (c) 2021-present NAVER Corp. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /codecept.conf.js: -------------------------------------------------------------------------------- 1 | // Set e2e config 2 | process.env.TS_NODE_PROJECT = "./test/e2e/tsconfig.json"; 3 | require('ts-node/register') 4 | // Restore config 5 | process.env.TS_NODE_PROJECT = ""; 6 | 7 | const { setHeadlessWhen } = require('@codeceptjs/configure'); 8 | 9 | // turn on headless mode when running with HEADLESS=true environment variable 10 | setHeadlessWhen(process.env.HEADLESS); 11 | 12 | exports.config = { 13 | tests: './test/e2e/**/*.e2e.ts', 14 | output: './test/e2e/log', 15 | helpers: { 16 | Playwright: { 17 | url: 'http://localhost:6005', 18 | show: true, 19 | browser: 'chromium' 20 | }, 21 | StorybookHelper: { 22 | require: './test/e2e/helper/StorybookHelper' 23 | }, 24 | HTMLHelper: { 25 | require: './test/e2e/helper/HTMLHelper' 26 | }, 27 | }, 28 | async bootstrap() { 29 | return new Promise(resolve => { 30 | setTimeout(() => { 31 | resolve(); 32 | }, 60000); 33 | }); 34 | }, 35 | mocha: {}, 36 | name: 'egjs-flicking', 37 | plugins: { 38 | pauseOnFail: {}, 39 | retryFailedStep: { 40 | enabled: true 41 | }, 42 | tryTo: { 43 | enabled: true 44 | }, 45 | screenshotOnFail: { 46 | enabled: true 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /demo/images/FrameGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/demo/images/FrameGrid.png -------------------------------------------------------------------------------- /demo/images/JustifiedGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/demo/images/JustifiedGrid.png -------------------------------------------------------------------------------- /demo/images/MasonryGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/demo/images/MasonryGrid.png -------------------------------------------------------------------------------- /demo/images/PackingGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/demo/images/PackingGrid.png -------------------------------------------------------------------------------- /demo/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/demo/images/logo.png -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | <meta http-equiv="refresh" content="0; URL='./storybook/" /> 2 | -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "!!raw-loader!*" { 2 | const content: string; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /jsdoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "tags": { 3 | "allowUnknownTags" : true, 4 | "dictionaries": ["jsdoc","closure"] 5 | }, 6 | "source": { 7 | "include": [ 8 | "src", "README.md", 9 | "node_modules/@egjs/component/src" 10 | ], 11 | "includePattern": ".+\\.(j|t)s(doc|x)?$", 12 | "excludePattern": "(^|\\/|\\\\)_" 13 | }, 14 | "opts": { 15 | "template": "node_modules/egjs-jsdoc-template", 16 | "destination": "./doc/", 17 | "ignores": ["eg.Component"], 18 | "expendsItemMembers": true, 19 | "recurse": true 20 | }, 21 | "plugins": [ 22 | "plugins/markdown", 23 | "node_modules/egjs-jsdoc-template/jsdoc-plugin/ko", 24 | "node_modules/egjs-jsdoc-template/jsdoc-plugin/group", 25 | "node_modules/egjs-jsdoc-template/jsdoc-plugin/support" 26 | ], 27 | "templates": { 28 | "cleverLinks": true, 29 | "monospaceLinks": true, 30 | "default": { 31 | "outputSourceFiles" : true 32 | }, 33 | "applicationName": "eg.Grid", 34 | "disqus": "egjs", 35 | "googleAnalytics": "G-4139M7LXY0", 36 | "openGraph": { 37 | "title": "", 38 | "type": "website", 39 | "image": "", 40 | "site_name": "", 41 | "url": "" 42 | }, 43 | "meta": { 44 | "title": "egjs::Grid - API", 45 | "description": "..", 46 | "keyword": "Grid, Masonry, Justified, Layout, Packing, Frame, Square" 47 | }, 48 | "linenums": true, 49 | "link": { 50 | "canonical": "https://naver.github.io/egjs-grid/release/latest/doc/" 51 | } 52 | }, 53 | "markdown": { 54 | "parser": "gfm", 55 | "hardwrap": true, 56 | "tags": ["examples", "ko"] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | const karmaConfig = { 3 | frameworks: ["mocha", "chai", "karma-typescript", "viewport"], 4 | mime: { 5 | 'text/x-typescript': ['ts', 'tsx'] 6 | }, 7 | client: { 8 | mocha: { 9 | opts: "./mocha.opts", 10 | }, 11 | }, 12 | files: [ 13 | "./src/**/*.ts", 14 | "./test/unit/**/*.ts", 15 | ], 16 | preprocessors: { 17 | "src/**/*.ts": ["karma-typescript"], 18 | "test/unit/**/*.ts": ["karma-typescript"], 19 | }, 20 | karmaTypescriptConfig: { 21 | tsconfig: "./tsconfig.test.json", 22 | reports: { 23 | html: { 24 | "directory": "coverage", 25 | "subdirectory": "./" 26 | }, 27 | lcovonly: { 28 | "directory": "coverage", 29 | "filename": "lcov.info", 30 | "subdirectory": "." 31 | }, 32 | }, 33 | coverageOptions: { 34 | instrumentation: true, 35 | exclude: /test/i, 36 | } 37 | }, 38 | browsers: [], 39 | customLaunchers: { 40 | CustomChromeHeadless: { 41 | base: "ChromeHeadless", 42 | flags: ["--window-size=400,400", "--no-sandbox", "--disable-setuid-sandbox"], 43 | }, 44 | }, 45 | reporters: ["mocha"], 46 | }; 47 | 48 | karmaConfig.browsers.push(config.chrome ? "Chrome" : "CustomChromeHeadless"); 49 | 50 | if (config.coverage) { 51 | karmaConfig.reporters.push("karma-typescript"); 52 | karmaConfig.singleRun = true; 53 | } 54 | 55 | config.set(karmaConfig); 56 | }; 57 | -------------------------------------------------------------------------------- /mocha.opts: -------------------------------------------------------------------------------- 1 | --timeout 10000 -------------------------------------------------------------------------------- /packages/ngx-grid/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /packages/ngx-grid/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.angular/cache 36 | /.sass-cache 37 | /connect.lock 38 | /coverage 39 | /libpeerconnection.log 40 | npm-debug.log 41 | yarn-error.log 42 | testem.log 43 | /typings 44 | 45 | # System Files 46 | .DS_Store 47 | Thumbs.db 48 | -------------------------------------------------------------------------------- /packages/ngx-grid/.npmrc: -------------------------------------------------------------------------------- 1 | omit=optional 2 | -------------------------------------------------------------------------------- /packages/ngx-grid/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /packages/ngx-grid/.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | webpackFinal: config => { 5 | config.resolve.alias["@egjs/grid"] = path.resolve(__dirname, '../../../dist/grid.esm.js'); 6 | 7 | return config; 8 | }, 9 | "stories": [ 10 | "../stories/**/*.stories.@(js|jsx|ts|tsx)" 11 | ], 12 | "addons": [ 13 | "@storybook/addon-controls/register", 14 | "@storybook/addon-viewport/register", 15 | "storybook-addon-preview/register", 16 | "storybook-dark-mode/register", 17 | ], 18 | }; 19 | -------------------------------------------------------------------------------- /packages/ngx-grid/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | panelPosition: "right", 5 | }); 6 | -------------------------------------------------------------------------------- /packages/ngx-grid/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | <style> 2 | html, 3 | body { 4 | position: relative; 5 | height: 100%; 6 | padding: 0 !important; 7 | margin: 0 !important; 8 | } 9 | </style> 10 | -------------------------------------------------------------------------------- /packages/ngx-grid/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { themes } from "@storybook/theming"; 2 | import { 3 | INITIAL_VIEWPORTS, 4 | // or MINIMAL_VIEWPORTS, 5 | } from "@storybook/addon-viewport"; 6 | 7 | // or global addParameters 8 | export const parameters = { 9 | controls: { 10 | passArgsFirst: true, 11 | expanded: true, 12 | hideNoControlsWarning: true, 13 | }, 14 | viewport: { 15 | viewports: { 16 | ...INITIAL_VIEWPORTS, 17 | }, 18 | }, 19 | darkMode: { 20 | // Override the default light theme 21 | light: { ...themes.normal }, 22 | // Override the default dark theme 23 | dark: { ...themes.dark }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/ngx-grid/.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.app.json", 3 | "compilerOptions": { 4 | "types": [ 5 | "node" 6 | ] 7 | }, 8 | "exclude": [ 9 | "../src/test.ts", 10 | "../src/**/*.spec.ts", 11 | "../projects/**/*.spec.ts" 12 | ], 13 | "include": [ 14 | "../stories/global.d.ts", 15 | "../src/**/*", 16 | "../stories/**/*", 17 | "../../../stories/templates/controls.ts", 18 | "../../../stories/utils.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/ngx-grid/README.md: -------------------------------------------------------------------------------- 1 | # @egjs/ngx-grid 2 | 3 | See [readme](./projects/ngx-grid/README.md) for more info. 4 | -------------------------------------------------------------------------------- /packages/ngx-grid/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | SELENIUM_PROMISE_MANAGER: false, 20 | baseUrl: 'http://localhost:4200/', 21 | framework: 'jasmine', 22 | jasmineNodeOpts: { 23 | showColors: true, 24 | defaultTimeoutInterval: 30000, 25 | print: function() {} 26 | }, 27 | onPrepare() { 28 | require('ts-node').register({ 29 | project: require('path').join(__dirname, './tsconfig.json') 30 | }); 31 | jasmine.getEnv().addReporter(new SpecReporter({ 32 | spec: { 33 | displayStacktrace: StacktraceOption.PRETTY 34 | } 35 | })); 36 | } 37 | }; -------------------------------------------------------------------------------- /packages/ngx-grid/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../out-tsc/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/ngx-grid/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/ngx-grid-project'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/ngx-grid'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-grid", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | }, 7 | "allowedNonPeerDependencies": [ 8 | "@egjs/grid" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@egjs/ngx-grid", 3 | "version": "1.16.0", 4 | "description": "An Angular component that can arrange items according to the type of grids", 5 | "author": { 6 | "name": "NAVER Corp." 7 | }, 8 | "license": "MIT", 9 | "homepage": "https://github.com/naver/egjs-grid", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/naver/egjs-grid" 13 | }, 14 | "keywords": [ 15 | "svelte", 16 | "lazyloading", 17 | "ready", 18 | "grid", 19 | "image", 20 | "video", 21 | "egjs", 22 | "masonry", 23 | "justified", 24 | "packing", 25 | "frame", 26 | "layout" 27 | ], 28 | "dependencies": { 29 | "@egjs/grid": "~1.16.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/lib/grids/ngx-frame-grid.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, Input, 3 | } from '@angular/core'; 4 | import { GridFunction, FrameGrid, FrameGridOptions } from '@egjs/grid'; 5 | import { NgxGridComponent } from '../ngx-grid.component'; 6 | 7 | @Component({ 8 | selector: 'ngx-frame-grid, [NgxFrameGrid]', 9 | template: '<ng-content></ng-content>', 10 | styles: [ 11 | ':host { display: block }', 12 | ], 13 | }) 14 | export class NgxFrameGridComponent 15 | extends NgxGridComponent 16 | implements Required<FrameGridOptions> { 17 | public static GridClass: GridFunction = FrameGrid; 18 | 19 | @Input() frame!: Required<FrameGrid>['frame']; 20 | @Input() rectSize!: Required<FrameGrid>['rectSize']; 21 | @Input() useFrameFill!: Required<FrameGrid>['useFrameFill']; 22 | } 23 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/lib/grids/ngx-justified-grid.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, Input, 3 | } from '@angular/core'; 4 | import { GridFunction, JustifiedGrid, JustifiedGridOptions } from '@egjs/grid'; 5 | import { NgxGridComponent } from '../ngx-grid.component'; 6 | 7 | @Component({ 8 | selector: 'ngx-justified-grid, [NgxJustifiedGrid]', 9 | template: '<ng-content></ng-content>', 10 | styles: [ 11 | ':host { display: block }', 12 | ], 13 | }) 14 | export class NgxJustifiedGridComponent 15 | extends NgxGridComponent 16 | implements Required<JustifiedGridOptions> { 17 | public static GridClass: GridFunction = JustifiedGrid; 18 | 19 | @Input() columnRange!: Required<JustifiedGrid>['columnRange']; 20 | @Input() rowRange!: Required<JustifiedGrid>['rowRange']; 21 | @Input() sizeRange!: Required<JustifiedGrid>['sizeRange']; 22 | @Input() isCroppedSize!: Required<JustifiedGrid>['isCroppedSize']; 23 | @Input() displayedRow!: Required<JustifiedGrid>['displayedRow']; 24 | @Input() stretch!: Required<JustifiedGrid>['stretch']; 25 | @Input() stretchRange!: Required<JustifiedGrid>['stretchRange']; 26 | @Input() inlineOffset!: Required<JustifiedGrid>['inlineOffset']; 27 | @Input() contentOffset!: Required<JustifiedGrid>['contentOffset']; 28 | @Input() passUnstretchRow!: Required<JustifiedGrid>['passUnstretchRow']; 29 | } 30 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/lib/grids/ngx-masonry-grid.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, Input, 3 | } from '@angular/core'; 4 | import { GridFunction, MasonryGrid, MasonryGridOptions } from '@egjs/grid'; 5 | import { NgxGridComponent } from '../ngx-grid.component'; 6 | 7 | @Component({ 8 | selector: 'ngx-masonry-grid, [NgxMasonryGrid]', 9 | template: '<ng-content></ng-content>', 10 | styles: [ 11 | ':host { display: block }', 12 | ], 13 | }) 14 | export class NgxMasonryGridComponent 15 | extends NgxGridComponent 16 | implements Required<MasonryGridOptions> { 17 | public static GridClass: GridFunction = MasonryGrid; 18 | 19 | @Input() column!: Required<MasonryGrid>['column']; 20 | @Input() columnSize!: Required<MasonryGrid>['columnSize']; 21 | @Input() columnSizeRatio!: Required<MasonryGrid>['columnSizeRatio']; 22 | @Input() align!: Required<MasonryGrid>['align']; 23 | @Input() columnCalculationThreshold!: Required<MasonryGrid>['columnCalculationThreshold']; 24 | @Input() maxStretchColumnSize!: Required<MasonryGrid>['maxStretchColumnSize']; 25 | @Input() contentAlign!: Required<MasonryGrid>['contentAlign']; 26 | } 27 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/lib/grids/ngx-packing-grid.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, Input, 3 | } from '@angular/core'; 4 | import { GridFunction, PackingGrid, PackingGridOptions } from '@egjs/grid'; 5 | import { NgxGridComponent } from '../ngx-grid.component'; 6 | 7 | @Component({ 8 | selector: 'ngx-packing-grid, [NgxPackingGrid]', 9 | template: '<ng-content></ng-content>', 10 | styles: [ 11 | ':host { display: block }', 12 | ], 13 | }) 14 | export class NgxPackingGridComponent 15 | extends NgxGridComponent 16 | implements Required<PackingGridOptions> { 17 | public static GridClass: GridFunction = PackingGrid; 18 | 19 | @Input() sizeWeight!: Required<PackingGrid>['sizeWeight']; 20 | @Input() ratioWeight!: Required<PackingGrid>['ratioWeight']; 21 | @Input() aspectRatio!: Required<PackingGrid>['aspectRatio']; 22 | @Input() weightPriority!: Required<PackingGrid>['weightPriority']; 23 | } 24 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/lib/ngx-grid.interface.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import { Directive } from '@angular/core'; 7 | import VanillaGrid, { GridMethods, withGridMethods } from '@egjs/grid'; 8 | 9 | import { NgxGridComponent } from './ngx-grid.component'; 10 | 11 | @Directive() 12 | export class NgxGridInterface { 13 | @withGridMethods 14 | protected vanillaGrid!: VanillaGrid; 15 | } 16 | 17 | export interface NgxGridInterface extends GridMethods<NgxGridComponent> {} 18 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/lib/ngx-grid.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import { NgModule } from '@angular/core'; 7 | import { NgxMasonryGridComponent } from './grids/ngx-masonry-grid.component'; 8 | import { NgxJustifiedGridComponent } from './grids/ngx-justified-grid.component'; 9 | import { NgxFrameGridComponent } from './grids/ngx-frame-grid.component'; 10 | import { NgxPackingGridComponent } from './grids/ngx-packing-grid.component'; 11 | 12 | @NgModule({ 13 | declarations: [ 14 | NgxMasonryGridComponent, 15 | NgxJustifiedGridComponent, 16 | NgxFrameGridComponent, 17 | NgxPackingGridComponent, 18 | ], 19 | imports: [ 20 | ], 21 | exports: [ 22 | NgxMasonryGridComponent, 23 | NgxJustifiedGridComponent, 24 | NgxFrameGridComponent, 25 | NgxPackingGridComponent, 26 | ], 27 | }) 28 | export class NgxGridModule { } 29 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/lib/ngx-grid.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class NgxGridService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/lib/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import { EventEmitter } from "@angular/core"; 7 | import { GridEvents } from "@egjs/grid"; 8 | 9 | export type NgxGridEvents = { 10 | [key in keyof GridEvents]: EventEmitter<GridEvents[key]> 11 | }; 12 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | 7 | export * from './lib/ngx-grid.service'; 8 | export * from './lib/ngx-grid.component'; 9 | export * from './lib/ngx-grid.module'; 10 | export * from './lib/grids/ngx-masonry-grid.component'; 11 | export * from './lib/grids/ngx-justified-grid.component'; 12 | export * from './lib/grids/ngx-frame-grid.component'; 13 | export * from './lib/grids/ngx-packing-grid.component'; 14 | export * from './lib/types'; 15 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | // First, initialize the Angular testing environment. 12 | getTestBed().initTestEnvironment( 13 | BrowserDynamicTestingModule, 14 | platformBrowserDynamicTesting(), { 15 | teardown: { destroyAfterEach: false } 16 | } 17 | ); 18 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [], 10 | "lib": [ 11 | "dom", 12 | "es2018" 13 | ] 14 | }, 15 | "angularCompilerOptions": { 16 | "skipTemplateCodegen": true, 17 | "strictMetadataEmit": true, 18 | "enableResourceInlining": true 19 | }, 20 | "exclude": [ 21 | "src/test.ts", 22 | "**/*.spec.ts" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/ngx-grid/projects/ngx-grid/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/ngx-grid/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/packages/ngx-grid/src/app/app.component.css -------------------------------------------------------------------------------- /packages/ngx-grid/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'ngx-grid-project'; 10 | } 11 | -------------------------------------------------------------------------------- /packages/ngx-grid/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /packages/ngx-grid/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/packages/ngx-grid/src/assets/.gitkeep -------------------------------------------------------------------------------- /packages/ngx-grid/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /packages/ngx-grid/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /packages/ngx-grid/src/index.html: -------------------------------------------------------------------------------- 1 | <!doctype html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="utf-8"> 5 | <title>NgxGridProject 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/ngx-grid/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /packages/ngx-grid/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /packages/ngx-grid/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | // First, initialize the Angular testing environment. 11 | getTestBed().initTestEnvironment( 12 | BrowserDynamicTestingModule, 13 | platformBrowserDynamicTesting(), { 14 | teardown: { destroyAfterEach: false } 15 | } 16 | ); 17 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/0-MasonryGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { moduleMetadata } from '@storybook/angular'; 3 | import { NgxGridModule } from '../../projects/ngx-grid/src/public-api'; 4 | 5 | export default { 6 | title: "Examples/MasonryGrid", 7 | decorators: [ 8 | moduleMetadata({ 9 | declarations: [], 10 | imports: [NgxGridModule, CommonModule], 11 | }), 12 | ], 13 | }; 14 | export * from "./1-MasonryGrid.stories"; 15 | export * from "./2-MasonryGridMultiple.stories"; 16 | export * from "./3-MasonryGrid100.stories"; 17 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/1-MasonryGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import { AppComponent } from './apps/NgxMasonryGridApp/app.component'; 2 | import { MASONRY_GRID_CONTROLS } from '../../../../stories/templates/controls'; 3 | import { convertPath, convertAngularTemplate, makeArgs } from '../../../../stories/utils'; 4 | import HTML_TEMPLATE from '!!raw-loader!./apps/NgxMasonryGridApp/app.component.html'; 5 | import CSS_TEMPLATE from '!!raw-loader!../../../../stories/templates/default.css'; 6 | import RawNgxMasonryGridApp from '!!raw-loader!./apps/NgxMasonryGridApp/app.component.ts'; 7 | import MODULE_TEMPLATE from '!!raw-loader!../apps/default/app.module.ts'; 8 | 9 | export const MasonryGridTemplate = (props: any) => ({ 10 | component: AppComponent, 11 | props: { 12 | ...props, 13 | key: JSON.stringify(props), 14 | }, 15 | }); 16 | MasonryGridTemplate.storyName = "MasonryGrid"; 17 | 18 | 19 | MasonryGridTemplate.argTypes = MASONRY_GRID_CONTROLS; 20 | MasonryGridTemplate.args = { 21 | ...makeArgs(MasonryGridTemplate.argTypes), 22 | }; 23 | 24 | MasonryGridTemplate.parameters = { 25 | preview: [ 26 | { 27 | tab: "CSS", 28 | template: CSS_TEMPLATE, 29 | language: "css", 30 | }, 31 | { 32 | tab: "Angular", 33 | template: HTML_TEMPLATE, 34 | language: "html", 35 | description: "app.component.html", 36 | }, 37 | { 38 | tab: "Angular", 39 | template: convertAngularTemplate(convertPath(RawNgxMasonryGridApp, "projects", "@egjs/ngx-grid")), 40 | language: "ts", 41 | description: "app.component.ts", 42 | }, 43 | { 44 | tab: "Angular", 45 | template: convertPath(MODULE_TEMPLATE, "projects", "@egjs/ngx-grid"), 46 | language: "ts", 47 | description: "app.module.ts", 48 | }, 49 | ], 50 | }; 51 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/3-MasonryGrid100.stories.ts: -------------------------------------------------------------------------------- 1 | import { AppComponent } from './apps/NgxMasonryGrid100App/app.component'; 2 | import { MASONRY_GRID_CONTROLS } from '../../../../stories/templates/controls'; 3 | import { convertPath, convertAngularTemplate, makeArgs } from '../../../../stories/utils'; 4 | import HTML_TEMPLATE from '!!raw-loader!./apps/NgxMasonryGrid100App/app.component.html'; 5 | import CSS_TEMPLATE from '!!raw-loader!../../../../stories/templates/default.css'; 6 | import RawNgxMasonryGrid100App from '!!raw-loader!./apps/NgxMasonryGrid100App/app.component.ts'; 7 | import MODULE_TEMPLATE from '!!raw-loader!../apps/default/app.module.ts'; 8 | 9 | export const MasonryGrid100Template = (props: any) => ({ 10 | component: AppComponent, 11 | props: { 12 | ...props, 13 | key: JSON.stringify(props), 14 | }, 15 | }); 16 | 17 | MasonryGrid100Template.storyName = "MasonryGrid with item that place 100% columns"; 18 | MasonryGrid100Template.argTypes = MASONRY_GRID_CONTROLS; 19 | MasonryGrid100Template.args = { 20 | ...makeArgs(MasonryGrid100Template.argTypes), 21 | }; 22 | 23 | MasonryGrid100Template.parameters = { 24 | preview: [ 25 | { 26 | tab: "CSS", 27 | template: CSS_TEMPLATE, 28 | language: "css", 29 | }, 30 | { 31 | tab: "Angular", 32 | template: HTML_TEMPLATE, 33 | language: "html", 34 | description: "app.component.html", 35 | }, 36 | { 37 | tab: "Angular", 38 | template: convertAngularTemplate(convertPath(RawNgxMasonryGrid100App, "projects", "@egjs/ngx-grid")), 39 | language: "ts", 40 | description: "app.component.ts", 41 | }, 42 | { 43 | tab: "Angular", 44 | template: convertPath(MODULE_TEMPLATE, "projects", "@egjs/ngx-grid"), 45 | language: "ts", 46 | description: "app.module.ts", 47 | }, 48 | ], 49 | }; 50 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/apps/NgxMasonryGrid100App/app.component.html: -------------------------------------------------------------------------------- 1 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
21 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/apps/NgxMasonryGrid100App/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ["../../../../../../stories/templates/default.css"], 7 | }) 8 | export class AppComponent { 9 | @Input() defaultDirection: any; 10 | @Input() gap: any; 11 | @Input() align: any; 12 | @Input() column: any; 13 | @Input() columnSize: any; 14 | @Input() columnSizeRatio: any; 15 | @Input() key: any; 16 | trackBy = () => this.key; 17 | } 18 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/apps/NgxMasonryGridApp/app.component.html: -------------------------------------------------------------------------------- 1 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
21 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/apps/NgxMasonryGridApp/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ["../../../../../../stories/templates/default.css"], 7 | }) 8 | export class AppComponent { 9 | @Input() defaultDirection: any; 10 | @Input() gap: any; 11 | @Input() align: any; 12 | @Input() column: any; 13 | @Input() columnSize: any; 14 | @Input() columnSizeRatio: any; 15 | @Input() key: any; 16 | trackBy = () => this.key; 17 | } 18 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/apps/NgxMasonryGridMultipleApp/app.component.html: -------------------------------------------------------------------------------- 1 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
21 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/1-MasonryGrid/apps/NgxMasonryGridMultipleApp/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ["../../../../../../stories/templates/default.css"], 7 | }) 8 | export class AppComponent { 9 | @Input() defaultDirection: any; 10 | @Input() gap: any; 11 | @Input() align: any; 12 | @Input() column: any; 13 | @Input() columnSize: any; 14 | @Input() columnSizeRatio: any; 15 | @Input() key: any; 16 | trackBy = () => this.key; 17 | } 18 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/2-JustifiedGrid/0-JustifiedGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { moduleMetadata } from '@storybook/angular'; 3 | import { NgxGridModule } from '../../projects/ngx-grid/src/public-api'; 4 | 5 | export default { 6 | title: "Examples/JustifiedGrid", 7 | decorators: [ 8 | moduleMetadata({ 9 | declarations: [], 10 | imports: [NgxGridModule, CommonModule], 11 | }), 12 | ], 13 | }; 14 | export * from "./1-JustifiedGrid.stories"; 15 | export * from "./2-CroppedJustifiedGrid.stories"; 16 | export * from "./3-KeepRatioWithOffset.stories"; 17 | export * from "./4-KeepRatioWithMaintainedTarget.stories"; 18 | export * from "./5-StretchedJustifiedGrid.stories"; 19 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/2-JustifiedGrid/1-JustifiedGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import { AppComponent } from './apps/NgxJustifiedGridApp/app.component'; 2 | import { JUSTIFIED_GRID_CONTROLS } from '../../../../stories/templates/controls'; 3 | import { convertPath, convertAngularTemplate, makeArgs } from '../../../../stories/utils'; 4 | import HTML_TEMPLATE from '!!raw-loader!./apps/NgxJustifiedGridApp/app.component.html'; 5 | import CSS_TEMPLATE from '!!raw-loader!../../../../stories/templates/default.css'; 6 | import RawNgxJustifiedGridApp from '!!raw-loader!./apps/NgxJustifiedGridApp/app.component.ts'; 7 | import MODULE_TEMPLATE from '!!raw-loader!../apps/default/app.module.ts'; 8 | 9 | export const JustifiedGridTemplate = (props: any) => ({ 10 | component: AppComponent, 11 | props: { 12 | ...props, 13 | key: JSON.stringify(props), 14 | }, 15 | }); 16 | JustifiedGridTemplate.storyName = "JustifiedGrid"; 17 | 18 | 19 | JustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 20 | JustifiedGridTemplate.args = { 21 | ...makeArgs(JustifiedGridTemplate.argTypes), 22 | }; 23 | 24 | JustifiedGridTemplate.parameters = { 25 | preview: [ 26 | { 27 | tab: "CSS", 28 | template: CSS_TEMPLATE, 29 | language: "css", 30 | }, 31 | { 32 | tab: "Angular", 33 | template: HTML_TEMPLATE, 34 | language: "html", 35 | description: "app.component.html", 36 | }, 37 | { 38 | tab: "Angular", 39 | template: convertAngularTemplate(convertPath(RawNgxJustifiedGridApp, "projects", "@egjs/ngx-grid")), 40 | language: "ts", 41 | description: "app.component.ts", 42 | }, 43 | { 44 | tab: "Angular", 45 | template: convertPath(MODULE_TEMPLATE, "projects", "@egjs/ngx-grid"), 46 | language: "ts", 47 | description: "app.module.ts", 48 | }, 49 | ], 50 | }; 51 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxJustifiedGridApp/app.component.html: -------------------------------------------------------------------------------- 1 |
15 |
1
16 |
2
17 |
3
18 |
4
19 |
5
20 |
6
21 |
7
22 |
8
23 |
9
24 |
10
25 |
26 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxJustifiedGridApp/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ["../../../../../../stories/templates/default.css"], 7 | }) 8 | export class AppComponent { 9 | @Input() defaultDirection: any; 10 | @Input() gap: any; 11 | @Input() columnRange: any; 12 | @Input() rowRange: any; 13 | @Input() sizeRange: any; 14 | @Input() isCroppedSize: any; 15 | @Input() displayedRow: any; 16 | @Input() stretch!: any; 17 | @Input() stretchRange!: any; 18 | @Input() passUnstretchRow!: any; 19 | @Input() key: any; 20 | trackBy = () => this.key; 21 | } 22 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxKeepRatioWithMaintainedTargetApp/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ["../../../../../../stories/templates/default.css"], 7 | }) 8 | export class AppComponent { 9 | @Input() defaultDirection: any; 10 | @Input() gap: any; 11 | @Input() columnRange: any; 12 | @Input() rowRange: any; 13 | @Input() sizeRange: any; 14 | @Input() isCroppedSize: any; 15 | @Input() displayedRow: any; 16 | @Input() stretch!: any; 17 | @Input() stretchRange!: any; 18 | @Input() passUnstretchRow!: any; 19 | @Input() key: any; 20 | trackBy = () => this.key; 21 | } 22 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxKeepRatioWithOffsetApp/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ["../../../../../../stories/templates/default.css"], 7 | }) 8 | export class AppComponent { 9 | @Input() defaultDirection: any; 10 | @Input() gap: any; 11 | @Input() columnRange: any; 12 | @Input() rowRange: any; 13 | @Input() sizeRange: any; 14 | @Input() isCroppedSize: any; 15 | @Input() displayedRow: any; 16 | @Input() stretch!: any; 17 | @Input() stretchRange!: any; 18 | @Input() passUnstretchRow!: any; 19 | @Input() key: any; 20 | trackBy = () => this.key; 21 | } 22 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/3-FrameGrid/0-FrameGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { moduleMetadata } from '@storybook/angular'; 3 | import { NgxGridModule } from '../../projects/ngx-grid/src/public-api'; 4 | 5 | export default { 6 | title: "Examples/FrameGrid", 7 | decorators: [ 8 | moduleMetadata({ 9 | declarations: [], 10 | imports: [NgxGridModule, CommonModule], 11 | }), 12 | ], 13 | }; 14 | export * from "./1-FrameGrid.stories"; 15 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/3-FrameGrid/1-FrameGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import { AppComponent } from './apps/NgxFrameGridApp/app.component'; 2 | import { FRAME_GRID_CONTROLS } from '../../../../stories/templates/controls'; 3 | import { convertPath, convertAngularTemplate, makeArgs } from '../../../../stories/utils'; 4 | import HTML_TEMPLATE from '!!raw-loader!./apps/NgxFrameGridApp/app.component.html'; 5 | import CSS_TEMPLATE from '!!raw-loader!../../../../stories/templates/default.css'; 6 | import RawNgxFrameGridApp from '!!raw-loader!./apps/NgxFrameGridApp/app.component.ts'; 7 | import MODULE_TEMPLATE from '!!raw-loader!../apps/default/app.module.ts'; 8 | 9 | export const FrameGridTemplate = (props: any) => ({ 10 | component: AppComponent, 11 | props: { 12 | ...props, 13 | key: JSON.stringify(props), 14 | }, 15 | }); 16 | FrameGridTemplate.storyName = "FrameGrid"; 17 | 18 | 19 | FrameGridTemplate.argTypes = FRAME_GRID_CONTROLS; 20 | FrameGridTemplate.args = { 21 | ...makeArgs(FrameGridTemplate.argTypes), 22 | }; 23 | 24 | FrameGridTemplate.parameters = { 25 | preview: [ 26 | { 27 | tab: "CSS", 28 | template: CSS_TEMPLATE, 29 | language: "css", 30 | }, 31 | { 32 | tab: "Angular", 33 | template: HTML_TEMPLATE, 34 | language: "html", 35 | description: "app.component.html", 36 | }, 37 | { 38 | tab: "Angular", 39 | template: convertAngularTemplate(convertPath(RawNgxFrameGridApp, "projects", "@egjs/ngx-grid")), 40 | language: "ts", 41 | description: "app.component.ts", 42 | }, 43 | { 44 | tab: "Angular", 45 | template: convertPath(MODULE_TEMPLATE, "projects", "@egjs/ngx-grid"), 46 | language: "ts", 47 | description: "app.module.ts", 48 | }, 49 | ], 50 | }; 51 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/3-FrameGrid/apps/NgxFrameGridApp/app.component.html: -------------------------------------------------------------------------------- 1 |
9 |
1
10 |
2
11 |
3
12 |
4
13 |
5
14 |
6
15 |
7
16 |
8
17 |
9
18 |
10
19 |
20 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/3-FrameGrid/apps/NgxFrameGridApp/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ["../../../../../../stories/templates/default.css"], 7 | }) 8 | export class AppComponent { 9 | @Input() frame: any; 10 | @Input() rectSize: any; 11 | @Input() useFrameFill: any; 12 | @Input() key: any; 13 | trackBy = () => this.key; 14 | } 15 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/4-PackingGrid/0-PackingGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { moduleMetadata } from '@storybook/angular'; 3 | import { NgxGridModule } from '../../projects/ngx-grid/src/public-api'; 4 | 5 | export default { 6 | title: "Examples/PackingGrid", 7 | decorators: [ 8 | moduleMetadata({ 9 | declarations: [], 10 | imports: [NgxGridModule, CommonModule], 11 | }), 12 | ], 13 | }; 14 | export * from "./1-PackingGrid.stories"; 15 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/4-PackingGrid/1-PackingGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import { AppComponent } from './apps/NgxPackingGridApp/app.component'; 2 | import { PACKING_GRID_CONTROLS } from '../../../../stories/templates/controls'; 3 | import { convertPath, convertAngularTemplate, makeArgs } from '../../../../stories/utils'; 4 | import HTML_TEMPLATE from '!!raw-loader!./apps/NgxPackingGridApp/app.component.html'; 5 | import CSS_TEMPLATE from '!!raw-loader!../../../../stories/templates/default.css'; 6 | import RawNgxPackingGridApp from '!!raw-loader!./apps/NgxPackingGridApp/app.component.ts'; 7 | import MODULE_TEMPLATE from '!!raw-loader!../apps/default/app.module.ts'; 8 | 9 | export const PackingGridTemplate = (props: any) => ({ 10 | component: AppComponent, 11 | props: { 12 | ...props, 13 | key: JSON.stringify(props), 14 | }, 15 | }); 16 | PackingGridTemplate.storyName = "PackingGrid"; 17 | 18 | 19 | PackingGridTemplate.argTypes = PACKING_GRID_CONTROLS; 20 | PackingGridTemplate.args = { 21 | ...makeArgs(PackingGridTemplate.argTypes), 22 | }; 23 | 24 | PackingGridTemplate.parameters = { 25 | preview: [ 26 | { 27 | tab: "CSS", 28 | template: CSS_TEMPLATE, 29 | language: "css", 30 | }, 31 | { 32 | tab: "Angular", 33 | template: HTML_TEMPLATE, 34 | language: "html", 35 | description: "app.component.html", 36 | }, 37 | { 38 | tab: "Angular", 39 | template: convertAngularTemplate(convertPath(RawNgxPackingGridApp, "projects", "@egjs/ngx-grid")), 40 | language: "ts", 41 | description: "app.component.ts", 42 | }, 43 | { 44 | tab: "Angular", 45 | template: convertPath(MODULE_TEMPLATE, "projects", "@egjs/ngx-grid"), 46 | language: "ts", 47 | description: "app.module.ts", 48 | }, 49 | ], 50 | }; 51 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/4-PackingGrid/apps/NgxPackingGridApp/app.component.html: -------------------------------------------------------------------------------- 1 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
21 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/4-PackingGrid/apps/NgxPackingGridApp/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ["../../../../../../stories/templates/default.css"], 7 | }) 8 | export class AppComponent { 9 | @Input() sizeWeight: any; 10 | @Input() ratioWeight: any; 11 | @Input() aspectRatio: any; 12 | @Input() key: any; 13 | trackBy = () => this.key; 14 | } 15 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/5-MethodsEvents/0-MethodsEvents.stories.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { moduleMetadata } from '@storybook/angular'; 3 | import { NgxGridModule } from '../../projects/ngx-grid/src/public-api'; 4 | 5 | export default { 6 | title: "Examples/Use Methods & Events", 7 | decorators: [ 8 | moduleMetadata({ 9 | declarations: [], 10 | imports: [NgxGridModule, CommonModule], 11 | }), 12 | ], 13 | }; 14 | export * from "./1-MethodsEvents.stories"; 15 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/5-MethodsEvents/1-MethodsEvents.stories.ts: -------------------------------------------------------------------------------- 1 | import { AppComponent } from './apps/NgxMethodsEventsApp/app.component'; 2 | import { MASONRY_GRID_CONTROLS } from '../../../../stories/templates/controls'; 3 | import { convertPath, convertAngularTemplate, makeArgs } from '../../../../stories/utils'; 4 | import HTML_TEMPLATE from '!!raw-loader!./apps/NgxMethodsEventsApp/app.component.html'; 5 | import CSS_TEMPLATE from '!!raw-loader!../../../../stories/templates/default.css'; 6 | import RawApp from '!!raw-loader!./apps/NgxMethodsEventsApp/app.component.ts'; 7 | import MODULE_TEMPLATE from '!!raw-loader!../apps/default/app.module.ts'; 8 | 9 | export const MethodsEventsTemplate = (props: any) => ({ 10 | component: AppComponent, 11 | props: { 12 | ...props, 13 | key: JSON.stringify(props), 14 | }, 15 | }); 16 | MethodsEventsTemplate.storyName = "Use Methods & Events"; 17 | 18 | 19 | MethodsEventsTemplate.argTypes = MASONRY_GRID_CONTROLS; 20 | MethodsEventsTemplate.args = { 21 | ...makeArgs(MethodsEventsTemplate.argTypes), 22 | }; 23 | 24 | MethodsEventsTemplate.parameters = { 25 | preview: [ 26 | { 27 | tab: "CSS", 28 | template: CSS_TEMPLATE, 29 | language: "css", 30 | }, 31 | { 32 | tab: "Angular", 33 | template: HTML_TEMPLATE, 34 | language: "html", 35 | description: "app.component.html", 36 | }, 37 | { 38 | tab: "Angular", 39 | template: convertAngularTemplate(convertPath(RawApp, "projects", "@egjs/ngx-grid")), 40 | language: "ts", 41 | description: "app.component.ts", 42 | }, 43 | { 44 | tab: "Angular", 45 | template: convertPath(MODULE_TEMPLATE, "projects", "@egjs/ngx-grid"), 46 | language: "ts", 47 | description: "app.module.ts", 48 | }, 49 | ], 50 | }; 51 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/5-MethodsEvents/apps/NgxMethodsEventsApp/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
15 |
1
16 |
2
17 |
3
18 |
4
19 |
5
20 |
6
21 |
7
22 |
8
23 |
9
24 |
10
25 |
26 |
27 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/5-MethodsEvents/apps/NgxMethodsEventsApp/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewChild, ElementRef } from '@angular/core'; 2 | import { NgxMasonryGridComponent } from '../../../../projects/ngx-grid/src/public-api'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ["../../../../../../stories/templates/default.css"], 8 | }) 9 | export class AppComponent { 10 | @ViewChild("grid") grid!: NgxMasonryGridComponent; 11 | @ViewChild("result") resultRef!: ElementRef; 12 | @Input() defaultDirection: any; 13 | @Input() gap: any; 14 | @Input() align: any; 15 | @Input() column: any; 16 | @Input() columnSize: any; 17 | @Input() columnSizeRatio: any; 18 | @Input() key: any; 19 | trackBy = () => this.key; 20 | 21 | onRenderComplete(e: any) { 22 | this.resultRef.nativeElement!.innerHTML = `updated: ${e.updated.length}`; 23 | } 24 | onClick() { 25 | const items = this.grid.getItems(); 26 | 27 | items[1].element!.style.height = "150px"; 28 | this.grid.updateItems([items[1]]); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/apps/default/app.component.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | height: 100%; 4 | } 5 | 6 | .item { 7 | position: absolute; 8 | width: 100px; 9 | /* border: 1px solid #ccc; */ 10 | color: white; 11 | text-align: center; 12 | } 13 | 14 | .item:nth-child(6n + 1) { 15 | background: #f55; 16 | height: 200px; 17 | } 18 | 19 | .item:nth-child(6n + 2) { 20 | background: #7e7; 21 | height: 300px; 22 | } 23 | 24 | .item:nth-child(6n + 3) { 25 | background: #66e; 26 | height: 200px; 27 | } 28 | 29 | .item:nth-child(6n + 4) { 30 | background: #4af; 31 | height: 100px; 32 | } 33 | 34 | .item:nth-child(6n + 5) { 35 | background: #ed5; 36 | height: 150px; 37 | } 38 | .item:nth-child(6n + 6) { 39 | background: #d5e; 40 | height: 130px; 41 | } 42 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/apps/default/app.component.html: -------------------------------------------------------------------------------- 1 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
21 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/apps/default/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-masonry-grid-app', 5 | templateUrl: './app.component.html', 6 | styleUrls: [], 7 | }) 8 | export class AppComponent {} 9 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/apps/default/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from "@angular/platform-browser"; 2 | import { NgModule } from "@angular/core"; 3 | 4 | import { AppComponent } from "./app.component"; 5 | import { NgxGridModule } from "../../../projects/ngx-grid/src/public-api"; 6 | 7 | @NgModule({ 8 | declarations: [AppComponent], 9 | imports: [BrowserModule, NgxGridModule], 10 | providers: [], 11 | bootstrap: [AppComponent], 12 | }) 13 | export class AppModule {} 14 | -------------------------------------------------------------------------------- /packages/ngx-grid/stories/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "!!raw-loader!*" { 2 | const content: string; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /packages/ngx-grid/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "**/*.stories.*", 14 | "src/**/*.d.ts", 15 | "stories/**/*.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/ngx-grid/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "skipLibCheck": true, 9 | "strict": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "sourceMap": true, 13 | "declaration": false, 14 | "downlevelIteration": true, 15 | "paths": { 16 | "ngx-grid": [ 17 | "dist/ngx-grid/ngx-grid", 18 | "dist/ngx-grid" 19 | ] 20 | }, 21 | "experimentalDecorators": true, 22 | "moduleResolution": "node", 23 | "importHelpers": true, 24 | "target": "es2020", 25 | "module": "es2020", 26 | "lib": [ 27 | "es2018", 28 | "dom" 29 | ], 30 | "useDefineForClassFields": false 31 | }, 32 | "angularCompilerOptions": { 33 | "enableI18nLegacyMessageIdFormat": false, 34 | "strictInjectionParameters": true, 35 | "strictInputAccessModifiers": true, 36 | "strictTemplates": true 37 | }, 38 | "include": [ 39 | "stories/global.d.ts" 40 | ], 41 | "exclude": [ 42 | "node_modules" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/ngx-grid/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-grid/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": [ 5 | "@typescript-eslint", 6 | "import" 7 | ], 8 | "extends": [ 9 | "eslint:recommended", 10 | "plugin:@typescript-eslint/eslint-recommended", 11 | "plugin:@typescript-eslint/recommended" 12 | ], 13 | "rules": { 14 | "import/no-webpack-loader-syntax": "off", 15 | "no-unused-vars": "off", 16 | "@typescript-eslint/no-unused-vars": ["error"], 17 | "@typescript-eslint/explicit-module-boundary-types": "off", 18 | "@typescript-eslint/no-explicit-any": "off", 19 | "@typescript-eslint/no-non-null-assertion": "off", 20 | "@typescript-eslint/no-empty-interface": "off", 21 | "@typescript-eslint/ban-types": "off", 22 | "@typescript-eslint/indent": ["error", 2], 23 | "@typescript-eslint/adjacent-overload-signatures": "off", 24 | "max-len": ["error", { "code": 120, "comments": 400, "ignoreTemplateLiterals": true }], 25 | "arrow-parens": ["error", "always"], 26 | "@typescript-eslint/naming-convention": [ 27 | "error", 28 | { "selector": "default", "modifiers": ["protected"], "format": ["camelCase"], "leadingUnderscore": "forbid" }, 29 | { "selector": "default", "modifiers": ["private"], "format": ["camelCase"], "leadingUnderscore": "require" } 30 | ], 31 | "no-empty-interface": "off", 32 | "comma-dangle": [ 33 | "error", 34 | "always-multiline" 35 | ], 36 | "semi": [ 37 | "error", 38 | "always" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/react-grid/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/react-grid/.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | webpackFinal: config => { 5 | config.module.rules.push(...[ 6 | { 7 | test: /\.(ts|tsx)$/, 8 | use: [ 9 | { 10 | loader: require.resolve('awesome-typescript-loader'), 11 | }, 12 | // Optional 13 | { 14 | loader: require.resolve('react-docgen-typescript-loader'), 15 | }, 16 | ], 17 | }, 18 | ]); 19 | 20 | config.resolve.alias["@egjs/grid"] = path.resolve(__dirname, '../../../dist/grid.esm.js'); 21 | 22 | return config; 23 | }, 24 | stories: [ 25 | "../stories/**/*.stories.@(js|jsx|ts|tsx)" 26 | ], 27 | addons: [ 28 | // "@storybook/addon-knobs/register", 29 | "@storybook/addon-docs/register", 30 | "@storybook/addon-controls/register", 31 | "@storybook/addon-viewport/register", 32 | "storybook-addon-preview/register", 33 | "storybook-dark-mode/register", 34 | ], 35 | }; 36 | -------------------------------------------------------------------------------- /packages/react-grid/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | panelPosition: "right", 5 | }); 6 | -------------------------------------------------------------------------------- /packages/react-grid/.storybook/preview.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { themes } from "@storybook/theming"; 3 | import { 4 | INITIAL_VIEWPORTS, 5 | // or MINIMAL_VIEWPORTS, 6 | } from "@storybook/addon-viewport"; 7 | 8 | import { 9 | Title, 10 | Description, 11 | Primary, 12 | PRIMARY_STORY, 13 | ArgsTable, 14 | DocsContainer, 15 | DocsContext, 16 | } from "@storybook/addon-docs/blocks"; 17 | 18 | // or global addParameters 19 | export const parameters = { 20 | docs: { 21 | container: DocsContainer, 22 | page: () => { 23 | const context = React.useContext(DocsContext); 24 | 25 | return <> 26 | 27 | <h2 className={"sbdocs-subtitle"}>{context.name}</h2> 28 | <Primary /> 29 | <ArgsTable story={PRIMARY_STORY} /> 30 | </>; 31 | }, 32 | }, 33 | controls: { 34 | passArgsFirst: true, 35 | expanded: true, 36 | hideNoControlsWarning: true, 37 | }, 38 | viewport: { 39 | viewports: { 40 | ...INITIAL_VIEWPORTS, 41 | }, 42 | }, 43 | darkMode: { 44 | // Override the default light theme 45 | light: { ...themes.normal }, 46 | // Override the default dark theme 47 | dark: { ...themes.dark }, 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /packages/react-grid/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "!!raw-loader!*" { 2 | const content: string; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /packages/react-grid/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-grid/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /packages/react-grid/rollup.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@egjs/build-helper"); 2 | 3 | const defaultOptions = { 4 | tsconfig: "tsconfig.build.json", 5 | sourcemap: true, 6 | name: "ReactGrid" 7 | }; 8 | export default buildHelper([ 9 | { 10 | ...defaultOptions, 11 | input: "./src/index.ts", 12 | exports: "named", 13 | format: "es", 14 | output: "./dist/grid.esm.js", 15 | }, 16 | { 17 | ...defaultOptions, 18 | input: "./src/index.umd.ts", 19 | exports: "default", 20 | format: "cjs", 21 | output: "./dist/grid.cjs.js", 22 | }, 23 | { 24 | ...defaultOptions, 25 | input: "./src/index.umd.ts", 26 | exports: "default", 27 | format: "umd", 28 | output: "./dist/grid.umd.js", 29 | external: { 30 | "@egjs/grid": "Grid", 31 | "react": "React", 32 | } 33 | }, 34 | ]); 35 | -------------------------------------------------------------------------------- /packages/react-grid/src/consts.ts: -------------------------------------------------------------------------------- 1 | 2 | export const REACT_GRID_EVENT_MAP = { 3 | "contentError": "onContentError", 4 | "renderComplete": "onRenderComplete", 5 | } as const; 6 | 7 | export const REACT_GRID_EVENTS = [ 8 | "onContentError", 9 | "onRenderComplete", 10 | ] as const; 11 | export const REACT_GRID_PROPS = [ 12 | "tag", 13 | ...REACT_GRID_EVENTS, 14 | ] as const; 15 | -------------------------------------------------------------------------------- /packages/react-grid/src/grids/FrameGrid.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FrameGrid as VanillaFrameGrid, 3 | FrameGridOptions, 4 | } from "@egjs/grid"; 5 | import { Grid } from "../Grid"; 6 | 7 | export class FrameGrid extends Grid<FrameGridOptions> { 8 | public static GridClass = VanillaFrameGrid; 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-grid/src/grids/JustifiedGrid.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | JustifiedGrid as VanillaJustifiedGrid, 3 | JustifiedGridOptions, 4 | } from "@egjs/grid"; 5 | import { Grid } from "../Grid"; 6 | 7 | export class JustifiedGrid extends Grid<JustifiedGridOptions> { 8 | public static GridClass = VanillaJustifiedGrid; 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-grid/src/grids/MasonryGrid.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | MasonryGrid as VanillaMasonryGrid, 3 | MasonryGridOptions, 4 | } from "@egjs/grid"; 5 | import { Grid } from "../Grid"; 6 | 7 | export class MasonryGrid extends Grid<MasonryGridOptions> { 8 | public static GridClass = VanillaMasonryGrid; 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-grid/src/grids/PackingGrid.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | PackingGrid as VanillaPackingGrid, 3 | PackingGridOptions, 4 | } from "@egjs/grid"; 5 | import { Grid } from "../Grid"; 6 | 7 | export class PackingGrid extends Grid<PackingGridOptions> { 8 | public static GridClass = VanillaPackingGrid; 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-grid/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Grid"; 2 | export * from "./grids/MasonryGrid"; 3 | export * from "./grids/JustifiedGrid"; 4 | export * from "./grids/FrameGrid"; 5 | export * from "./grids/PackingGrid"; 6 | export * from "./types"; 7 | -------------------------------------------------------------------------------- /packages/react-grid/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import * as modules from "./index"; 2 | 3 | export default modules; 4 | -------------------------------------------------------------------------------- /packages/react-grid/src/types.ts: -------------------------------------------------------------------------------- 1 | import { GridEvents } from "@egjs/grid"; 2 | import { REACT_GRID_EVENT_MAP } from "./consts"; 3 | 4 | 5 | export type Entries< 6 | Obj extends { [key: string]: any }, 7 | Key = keyof Obj 8 | > = Key extends string ? [Key, Obj[Key]] : never; 9 | 10 | export type EventEntries = Entries<typeof REACT_GRID_EVENT_MAP>; 11 | export type ReactEvents = EventEntries[1]; 12 | 13 | export type FindEventName< 14 | Value extends string, 15 | E = EventEntries, 16 | > = E extends [infer Name, Value] ? Name : never; 17 | 18 | export type ReactGridEvents = { 19 | [ReactEventName in ReactEvents]?: (e: GridEvents[FindEventName<ReactEventName>]) => any; 20 | }; 21 | export interface ReactGridProps extends ReactGridEvents { 22 | tag?: string; 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-grid/stories/1-MasonryGrid/0-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | 3 | export default { 4 | title: "Examples/MasonryGrid", 5 | }; 6 | export * from "./1-MasonryGrid.stories"; 7 | export * from "./2-MasonryGridMultiple.stories"; 8 | export * from "./3-MasonryGrid100.stories"; 9 | -------------------------------------------------------------------------------- /packages/react-grid/stories/1-MasonryGrid/1-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import MasonryGridApp from "./apps/ReactMasonryGridApp"; 3 | import RawMaonsryGridApp from "!!raw-loader!./apps/ReactMasonryGridApp"; 4 | import "../../../../stories/templates/default.css"; 5 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 6 | import { convertPath, convertReactTemplate, makeArgs } from "../../../../stories/utils"; 7 | 8 | export const MasonryGridTemplate = MasonryGridApp as any; 9 | 10 | 11 | MasonryGridTemplate.storyName = "MasonryGrid"; 12 | MasonryGridTemplate.argTypes = MASONRY_GRID_CONTROLS; 13 | MasonryGridTemplate.args = { 14 | ...makeArgs(MasonryGridTemplate.argTypes), 15 | }; 16 | 17 | MasonryGridTemplate.parameters = { 18 | preview: [ 19 | { 20 | tab: "React", 21 | template: convertReactTemplate(convertPath(RawMaonsryGridApp, "react-grid", "@egjs/react-grid")), 22 | language: "tsx", 23 | }, 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-grid/stories/1-MasonryGrid/2-MasonryGridMultiple.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import MasonryGridApp from "./apps/ReactMasonryGridMultipleApp"; 3 | import RawMaonsryGridApp from "!!raw-loader!./apps/ReactMasonryGridMultipleApp"; 4 | import "../../../../stories/templates/default.css"; 5 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 6 | import { convertPath, convertReactTemplate, makeArgs } from "../../../../stories/utils"; 7 | 8 | export const MasonryGridMultipleTemplate = MasonryGridApp as any; 9 | 10 | 11 | MasonryGridMultipleTemplate.storyName = "MasonryGrid with item that place multiple columns"; 12 | MasonryGridMultipleTemplate.argTypes = MASONRY_GRID_CONTROLS; 13 | MasonryGridMultipleTemplate.args = { 14 | ...makeArgs(MasonryGridMultipleTemplate.argTypes), 15 | }; 16 | 17 | MasonryGridMultipleTemplate.parameters = { 18 | preview: [ 19 | { 20 | tab: "React", 21 | template: convertReactTemplate(convertPath(RawMaonsryGridApp, "react-grid", "@egjs/react-grid")), 22 | language: "tsx", 23 | }, 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-grid/stories/1-MasonryGrid/3-MasonryGrid100.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import MasonryGridApp from "./apps/ReactMasonryGrid100App"; 3 | import RawMaonsryGridApp from "!!raw-loader!./apps/ReactMasonryGrid100App"; 4 | import "../../../../stories/templates/default.css"; 5 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 6 | import { convertPath, convertReactTemplate, makeArgs } from "../../../../stories/utils"; 7 | 8 | export const MasonryGrid100Template = MasonryGridApp as any; 9 | 10 | 11 | MasonryGrid100Template.storyName = "MasonryGrid with item that place 100% columns"; 12 | MasonryGrid100Template.argTypes = MASONRY_GRID_CONTROLS; 13 | MasonryGrid100Template.args = { 14 | ...makeArgs(MasonryGrid100Template.argTypes), 15 | }; 16 | 17 | MasonryGrid100Template.parameters = { 18 | preview: [ 19 | { 20 | tab: "React", 21 | template: convertReactTemplate(convertPath(RawMaonsryGridApp, "react-grid", "@egjs/react-grid")), 22 | language: "tsx", 23 | }, 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-grid/stories/1-MasonryGrid/apps/ReactMasonryGrid100App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MasonryGrid } from "../../../src"; 3 | 4 | export default function App(props: Record<string, any>) { 5 | return <MasonryGrid 6 | className="container" 7 | gap={props.gap} 8 | defaultDirection={props.defaultDirection} 9 | align={props.align} 10 | column={props.column} 11 | columnSize={props.columnSize} 12 | columnSizeRatio={props.columnSizeRatio} 13 | key={Math.random()} 14 | > 15 | <div className={"item"} data-grid-column="0" style={{ 16 | width: "100%", 17 | }}>1</div> 18 | <div className={"item"}>2</div> 19 | <div className={"item"}>3</div> 20 | <div className={"item"}>4</div> 21 | <div className={"item"}>5</div> 22 | <div className={"item"}>6</div> 23 | <div className={"item"}>7</div> 24 | <div className={"item"}>8</div> 25 | <div className={"item"}>9</div> 26 | <div className={"item"}>10</div> 27 | </MasonryGrid>; 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-grid/stories/1-MasonryGrid/apps/ReactMasonryGridApp.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MasonryGrid } from "../../../src"; 3 | 4 | export default function App(props: Record<string, any>) { 5 | return <MasonryGrid 6 | className="container" 7 | gap={props.gap} 8 | defaultDirection={props.defaultDirection} 9 | align={props.align} 10 | column={props.column} 11 | columnSize={props.columnSize} 12 | columnSizeRatio={props.columnSizeRatio} 13 | key={Math.random()} 14 | onRenderComplete={e => { 15 | console.log(e); 16 | }} 17 | > 18 | <div className={"item"}>1</div> 19 | <div className={"item"}>2</div> 20 | <div className={"item"}>3</div> 21 | <div className={"item"}>4</div> 22 | <div className={"item"}>5</div> 23 | <div className={"item"}>6</div> 24 | <div className={"item"}>7</div> 25 | <div className={"item"}>8</div> 26 | <div className={"item"}>9</div> 27 | <div className={"item"}>10</div> 28 | </MasonryGrid>; 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-grid/stories/1-MasonryGrid/apps/ReactMasonryGridMultipleApp.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MasonryGrid } from "../../../src"; 3 | 4 | export default function App(props: Record<string, any>) { 5 | return <MasonryGrid 6 | className="container" 7 | gap={props.gap} 8 | defaultDirection={props.defaultDirection} 9 | align={props.align} 10 | column={props.column} 11 | columnSize={props.columnSize} 12 | columnSizeRatio={props.columnSizeRatio} 13 | key={Math.random()} 14 | > 15 | <div className={"item"} data-grid-column="4">1</div> 16 | <div className={"item"}>2</div> 17 | <div className={"item"}>3</div> 18 | <div className={"item"}>4</div> 19 | <div className={"item"}>5</div> 20 | <div className={"item"}>6</div> 21 | <div className={"item"}>7</div> 22 | <div className={"item"} data-grid-column="3">8</div> 23 | <div className={"item"}>9</div> 24 | <div className={"item"}>10</div> 25 | </MasonryGrid>; 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-grid/stories/2-JustifiedGrid/0-JustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | 3 | export default { 4 | title: "Examples/JustifiedGrid", 5 | }; 6 | export * from "./1-JustifiedGrid.stories"; 7 | export * from "./2-CroppedJustifiedGrid.stories"; 8 | export * from "./3-KeepRatioWithOffset.stories"; 9 | export * from "./4-KeepRatioWithMaintainedTarget.stories"; 10 | export * from "./5-StretchedJustifiedGrid.stories"; 11 | -------------------------------------------------------------------------------- /packages/react-grid/stories/2-JustifiedGrid/1-JustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import JustifiedGridApp from "./apps/ReactJustifiedGridApp"; 2 | import ReactJustifiedGridApp from "!!raw-loader!./apps/ReactJustifiedGridApp"; 3 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { makeArgs, convertReactTemplate, convertPath } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const JustifiedGridTemplate = JustifiedGridApp.bind({}) as any; 8 | 9 | 10 | JustifiedGridTemplate.storyName = "JustifiedGrid"; 11 | JustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 12 | JustifiedGridTemplate.args = { 13 | ...makeArgs(JustifiedGridTemplate.argTypes), 14 | }; 15 | 16 | JustifiedGridTemplate.parameters = { 17 | preview: [ 18 | { 19 | tab: "React", 20 | template: convertReactTemplate(convertPath(ReactJustifiedGridApp, "react-grid", "@egjs/react-grid")), 21 | language: "tsx", 22 | }, 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-grid/stories/2-JustifiedGrid/2-CroppedJustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import App from "./apps/ReactJustifiedGridApp"; 2 | import RawApp from "!!raw-loader!./apps/ReactJustifiedGridApp"; 3 | import { CROPPED_JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { makeArgs, convertReactTemplate, convertPath } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const CroppedJustifiedGridTemplate = App.bind({}) as any; 8 | 9 | 10 | CroppedJustifiedGridTemplate.storyName = "Cropped JustifiedGrid"; 11 | CroppedJustifiedGridTemplate.argTypes = CROPPED_JUSTIFIED_GRID_CONTROLS; 12 | CroppedJustifiedGridTemplate.args = { 13 | ...makeArgs(CroppedJustifiedGridTemplate.argTypes), 14 | }; 15 | 16 | CroppedJustifiedGridTemplate.parameters = { 17 | preview: [ 18 | { 19 | tab: "React", 20 | template: convertReactTemplate(convertPath(RawApp, "react-grid", "@egjs/react-grid")), 21 | language: "tsx", 22 | }, 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-grid/stories/2-JustifiedGrid/3-KeepRatioWithOffset.stories.tsx: -------------------------------------------------------------------------------- 1 | import App from "./apps/ReactKeepRatioWithOffsetApp"; 2 | import RawApp from "!!raw-loader!./apps/ReactKeepRatioWithOffsetApp"; 3 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { makeArgs, convertReactTemplate, convertPath } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const KeepRatioWithOffsetTemplate = App.bind({}) as any; 8 | 9 | 10 | KeepRatioWithOffsetTemplate.storyName = "Keep ratio with offset"; 11 | KeepRatioWithOffsetTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 12 | KeepRatioWithOffsetTemplate.args = { 13 | ...makeArgs(KeepRatioWithOffsetTemplate.argTypes), 14 | }; 15 | 16 | KeepRatioWithOffsetTemplate.parameters = { 17 | preview: [ 18 | { 19 | tab: "React", 20 | template: convertReactTemplate(convertPath(RawApp, "react-grid", "@egjs/react-grid")), 21 | language: "tsx", 22 | }, 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-grid/stories/2-JustifiedGrid/4-KeepRatioWithMaintainedTarget.stories.tsx: -------------------------------------------------------------------------------- 1 | import App from "./apps/ReactKeepRatioWithMaintainedTargetApp"; 2 | import RawApp from "!!raw-loader!./apps/ReactKeepRatioWithMaintainedTargetApp"; 3 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { makeArgs, convertReactTemplate, convertPath } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const KeepRatioWithMaintainedTargetTemplate = App.bind({}) as any; 8 | 9 | 10 | KeepRatioWithMaintainedTargetTemplate.storyName = "Keep ratio with maintained target"; 11 | KeepRatioWithMaintainedTargetTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 12 | KeepRatioWithMaintainedTargetTemplate.args = { 13 | ...makeArgs(KeepRatioWithMaintainedTargetTemplate.argTypes), 14 | }; 15 | 16 | KeepRatioWithMaintainedTargetTemplate.parameters = { 17 | preview: [ 18 | { 19 | tab: "React", 20 | template: convertReactTemplate(convertPath(RawApp, "react-grid", "@egjs/react-grid")), 21 | language: "tsx", 22 | }, 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-grid/stories/2-JustifiedGrid/5-StretchedJustifiedGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import App from "./apps/ReactKeepRatioWithMaintainedTargetApp"; 2 | import RawApp from "!!raw-loader!./apps/ReactKeepRatioWithMaintainedTargetApp"; 3 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { makeArgs, convertReactTemplate, convertPath } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const StretchedJustifiedGridTemplate = App.bind({}) as any; 8 | 9 | 10 | StretchedJustifiedGridTemplate.storyName = "Stretched Items with JustifiedGrid"; 11 | StretchedJustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 12 | StretchedJustifiedGridTemplate.args = { 13 | ...makeArgs(StretchedJustifiedGridTemplate.argTypes), 14 | stretch: true, 15 | sizeRange: [200, 300], 16 | }; 17 | 18 | StretchedJustifiedGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "React", 22 | template: convertReactTemplate(convertPath(RawApp, "react-grid", "@egjs/react-grid")), 23 | language: "tsx", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/react-grid/stories/2-JustifiedGrid/apps/ReactJustifiedGridApp.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { JustifiedGrid } from "../../../src"; 3 | 4 | export default function App(props: Record<string, any>) { 5 | return <JustifiedGrid 6 | className="container" 7 | gap={props.gap} 8 | defaultDirection={props.defaultDirection} 9 | align={props.align} 10 | columnRange={props.columnRange} 11 | rowRange={props.rowRange} 12 | sizeRange={props.sizeRange} 13 | isCroppedSize={props.isCroppedSize} 14 | displayedRow={props.displayedRow} 15 | stretch={props.stretch} 16 | stretchRange={props.stretchRange} 17 | passUnstretchRow={props.passUnstretchRow} 18 | > 19 | <div className={"item"}>1</div> 20 | <div className={"item"}>2</div> 21 | <div className={"item"}>3</div> 22 | <div className={"item"}>4</div> 23 | <div className={"item"}>5</div> 24 | <div className={"item"}>6</div> 25 | <div className={"item"}>7</div> 26 | <div className={"item"}>8</div> 27 | <div className={"item"}>9</div> 28 | <div className={"item"}>10</div> 29 | </JustifiedGrid>; 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-grid/stories/3-FrameGrid/0-FrameGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | 3 | export default { 4 | title: "Examples/FrameGrid", 5 | }; 6 | export * from "./1-FrameGrid.stories"; 7 | -------------------------------------------------------------------------------- /packages/react-grid/stories/3-FrameGrid/1-FrameGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import FrameGridApp from "./apps/ReactFrameGridApp"; 2 | import RawFrameGridApp from "!!raw-loader!./apps/ReactFrameGridApp"; 3 | import "../../../../stories/templates/default.css"; 4 | import { FRAME_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { makeArgs, convertReactTemplate, convertPath } from "../../../../stories/utils"; 6 | 7 | export const FrameGridTemplate = FrameGridApp as any; 8 | 9 | 10 | FrameGridTemplate.storyName = "FrameGrid"; 11 | FrameGridTemplate.argTypes = FRAME_GRID_CONTROLS; 12 | FrameGridTemplate.args = { 13 | ...makeArgs(FrameGridTemplate.argTypes), 14 | }; 15 | 16 | FrameGridTemplate.parameters = { 17 | preview: [ 18 | { 19 | tab: "React", 20 | template: convertReactTemplate(convertPath(RawFrameGridApp, "react-grid", "@egjs/react-grid")), 21 | language: "tsx", 22 | }, 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-grid/stories/3-FrameGrid/apps/ReactFrameGridApp.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FrameGrid } from "../../../src"; 3 | 4 | export default function App(props: Record<string, any>) { 5 | return <FrameGrid 6 | className="container" 7 | gap={props.gap} 8 | defaultDirection={props.defaultDirection} 9 | frame={props.frame} 10 | rectSize={props.rectSize} 11 | useFrameFill={props.useFrameFill} 12 | > 13 | <div className={"item"}>1</div> 14 | <div className={"item"}>2</div> 15 | <div className={"item"}>3</div> 16 | <div className={"item"}>4</div> 17 | <div className={"item"}>5</div> 18 | <div className={"item"}>6</div> 19 | <div className={"item"}>7</div> 20 | <div className={"item"}>8</div> 21 | <div className={"item"}>9</div> 22 | <div className={"item"}>10</div> 23 | </FrameGrid>; 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-grid/stories/4-PackingGrid/0-PackingGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | 3 | export default { 4 | title: "Examples/PackingGrid", 5 | }; 6 | export * from "./1-PackingGrid.stories"; 7 | -------------------------------------------------------------------------------- /packages/react-grid/stories/4-PackingGrid/1-PackingGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import PackingGridApp from "./apps/ReactPackingGridApp"; 2 | import RawPackingGridApp from "!!raw-loader!./apps/ReactPackingGridApp"; 3 | import { PACKING_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { makeArgs, convertReactTemplate, convertPath } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const PackingGridTemplate = PackingGridApp as any; 8 | 9 | 10 | PackingGridTemplate.storyName = "PackingGrid"; 11 | PackingGridTemplate.argTypes = PACKING_GRID_CONTROLS; 12 | PackingGridTemplate.args = { 13 | ...makeArgs(PackingGridTemplate.argTypes), 14 | }; 15 | 16 | PackingGridTemplate.parameters = { 17 | preview: [ 18 | { 19 | tab: "React", 20 | template: convertReactTemplate(convertPath(RawPackingGridApp, "react-grid", "@egjs/react-grid")), 21 | language: "tsx", 22 | }, 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-grid/stories/4-PackingGrid/apps/ReactPackingGridApp.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { PackingGrid } from "../../../src"; 3 | 4 | export default function App(props: Record<string, any>) { 5 | return <PackingGrid 6 | className="container" 7 | gap={props.gap} 8 | defaultDirection={props.defaultDirection} 9 | sizeWeight={props.sizeWeight} 10 | ratioWeight={props.ratioWeight} 11 | aspectRatio={props.aspectRatio} 12 | weightPriority={props.weightPriority} 13 | > 14 | <div className={"item"}>1</div> 15 | <div className={"item"}>2</div> 16 | <div className={"item"}>3</div> 17 | <div className={"item"}>4</div> 18 | <div className={"item"}>5</div> 19 | <div className={"item"}>6</div> 20 | <div className={"item"}>7</div> 21 | <div className={"item"}>8</div> 22 | <div className={"item"}>9</div> 23 | <div className={"item"}>10</div> 24 | </PackingGrid>; 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-grid/stories/5-MethodsEvents/0-MethodsEvents.stories.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Examples/Use Methods & Events", 3 | }; 4 | 5 | export * from "./1-MethodsEvents.stories"; 6 | -------------------------------------------------------------------------------- /packages/react-grid/stories/5-MethodsEvents/1-MethodsEvents.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import App from "./apps/ReactMethodsEventsApp"; 3 | import RawApp from "!!raw-loader!./apps/ReactMethodsEventsApp"; 4 | import "../../../../stories/templates/default.css"; 5 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 6 | import { convertPath, convertReactTemplate, makeArgs } from "../../../../stories/utils"; 7 | 8 | export const MethodsEventsTemplate = App as any; 9 | 10 | 11 | MethodsEventsTemplate.storyName = "Use Methods & Events"; 12 | MethodsEventsTemplate.argTypes = MASONRY_GRID_CONTROLS; 13 | MethodsEventsTemplate.args = { 14 | ...makeArgs(MethodsEventsTemplate.argTypes), 15 | }; 16 | 17 | MethodsEventsTemplate.parameters = { 18 | preview: [ 19 | { 20 | tab: "React", 21 | template: convertReactTemplate(convertPath(RawApp, "react-grid", "@egjs/react-grid")), 22 | language: "tsx", 23 | }, 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-grid/stories/5-MethodsEvents/apps/ReactMethodsEventsApp.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MasonryGrid } from "../../../src"; 3 | 4 | export default function App(props: Record<string, any>) { 5 | const resultRef = React.useRef<HTMLDivElement>(null); 6 | const gridRef = React.useRef<MasonryGrid>(null); 7 | 8 | return (<div className="root"> 9 | <div className="result" ref={resultRef}></div> 10 | <button className="button" onClick={() => { 11 | const items = gridRef.current!.getItems(); 12 | 13 | items[1].element!.style.height = "150px"; 14 | gridRef.current!.updateItems([items[1]]); 15 | }}>Resize Item 2</button> 16 | <MasonryGrid 17 | ref={gridRef} 18 | className="container" 19 | gap={props.gap} 20 | defaultDirection={props.defaultDirection} 21 | align={props.align} 22 | column={props.column} 23 | columnSize={props.columnSize} 24 | columnSizeRatio={props.columnSizeRatio} 25 | key={Math.random()} 26 | onRenderComplete={(e) => { 27 | resultRef.current!.innerHTML = `updated: ${e.updated.length}`; 28 | }}> 29 | <div className="item">1</div> 30 | <div className="item item2">2</div> 31 | <div className="item">3</div> 32 | <div className="item">4</div> 33 | <div className="item">5</div> 34 | <div className="item">6</div> 35 | <div className="item">7</div> 36 | <div className="item">8</div> 37 | <div className="item">9</div> 38 | <div className="item">10</div> 39 | </MasonryGrid> 40 | </div>); 41 | } 42 | -------------------------------------------------------------------------------- /packages/react-grid/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | } 6 | } -------------------------------------------------------------------------------- /packages/react-grid/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": true, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/**/*", 14 | "./global.d.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-grid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "experimentalDecorators": true, 22 | "jsx": "react-jsx" 23 | }, 24 | "include": [ 25 | "src", 26 | "./global.d.ts" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /packages/svelte-grid/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /packages/svelte-grid/.storybook/main.js: -------------------------------------------------------------------------------- 1 | const autoPreprocess = require('svelte-preprocess'); 2 | const path = require("path"); 3 | 4 | module.exports = { 5 | webpackFinal: (config) => { 6 | const svelteLoader = config.module.rules.find( 7 | r => r.loader && r.loader.includes('svelte-loader'), 8 | ); 9 | svelteLoader.options.preprocess = autoPreprocess({ 10 | less: { includePaths: ['src', 'node_modules'] }, 11 | css: { includePaths: ['src', 'node_modules'] }, 12 | typescript: { 13 | tsconfigFile: './tsconfig.json', 14 | transpileOnly: true, 15 | }, 16 | }); 17 | config.resolve.extensions.push('.ts', '.tsx'); 18 | config.resolve.alias["@egjs/grid"] = path.resolve(__dirname, '../../../dist/grid.esm.js'); 19 | return config; 20 | }, 21 | stories: [ 22 | "../stories/**/*.stories.@(js|jsx|ts|tsx)" 23 | ], 24 | addons: [ 25 | // "@storybook/addon-knobs/register", 26 | "@storybook/addon-docs/register", 27 | "@storybook/addon-controls/register", 28 | "@storybook/addon-viewport/register", 29 | "storybook-addon-preview/register", 30 | "storybook-dark-mode/register", 31 | ], 32 | }; 33 | -------------------------------------------------------------------------------- /packages/svelte-grid/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | panelPosition: "right", 5 | }); 6 | -------------------------------------------------------------------------------- /packages/svelte-grid/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { themes } from "@storybook/theming"; 2 | import { 3 | INITIAL_VIEWPORTS, 4 | // or MINIMAL_VIEWPORTS, 5 | } from "@storybook/addon-viewport"; 6 | 7 | // or global addParameters 8 | export const parameters = { 9 | controls: { 10 | passArgsFirst: true, 11 | expanded: true, 12 | hideNoControlsWarning: true, 13 | }, 14 | viewport: { 15 | viewports: { 16 | ...INITIAL_VIEWPORTS, 17 | }, 18 | }, 19 | darkMode: { 20 | // Override the default light theme 21 | light: { ...themes.normal }, 22 | // Override the default dark theme 23 | dark: { ...themes.dark }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/svelte-grid/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "!!raw-loader!*" { 2 | const content: string; 3 | export default content; 4 | } 5 | declare module "*.svelte" { 6 | const content: any; 7 | export default content; 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelte-grid/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/packages/svelte-grid/public/favicon.png -------------------------------------------------------------------------------- /packages/svelte-grid/public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | -webkit-padding: 0.4em 0; 36 | padding: 0.4em; 37 | margin: 0 0 0.5em 0; 38 | box-sizing: border-box; 39 | border: 1px solid #ccc; 40 | border-radius: 2px; 41 | } 42 | 43 | input:disabled { 44 | color: #ccc; 45 | } 46 | 47 | button { 48 | color: #333; 49 | background-color: #f4f4f4; 50 | outline: none; 51 | } 52 | 53 | button:disabled { 54 | color: #999; 55 | } 56 | 57 | button:not(:disabled):active { 58 | background-color: #ddd; 59 | } 60 | 61 | button:focus { 62 | border-color: #666; 63 | } 64 | -------------------------------------------------------------------------------- /packages/svelte-grid/public/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset='utf-8'> 5 | <meta name='viewport' content='width=device-width,initial-scale=1'> 6 | 7 | <title>Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /packages/svelte-grid/rollup.build.config.js: -------------------------------------------------------------------------------- 1 | import buildHelper from "@egjs/build-helper"; 2 | import svelte from "rollup-plugin-svelte"; 3 | import sveltePreprocess from "svelte-preprocess"; 4 | 5 | const defaultOptions = { 6 | tsconfig: "", 7 | commonjs: true, 8 | external: { 9 | svelte: "svelte", 10 | }, 11 | plugins: [ 12 | svelte({ 13 | preprocess: sveltePreprocess(), 14 | }), 15 | ], 16 | }; 17 | 18 | export default buildHelper([ 19 | { 20 | ...defaultOptions, 21 | input: "./src/index.umd.js", 22 | output: "dist/grid.cjs.js", 23 | format: "cjs", 24 | }, 25 | { 26 | ...defaultOptions, 27 | input: "./src/index.js", 28 | output: "dist/grid.esm.js", 29 | format: "es", 30 | exports: "named", 31 | }, 32 | ]); 33 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/Grid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import Grid from './Grid.svelte'; 7 | import { GRID_METHODS } from '@egjs/grid'; 8 | 9 | export default /*#__PURE__*/ (() => { 10 | const prototype = Grid.prototype; 11 | 12 | if (prototype) { 13 | GRID_METHODS.forEach(name => { 14 | if (name in prototype) { 15 | return; 16 | } 17 | prototype[name] = function (...args) { 18 | const self = this.getInstance(); 19 | const result = self[name](...args); 20 | 21 | if (result === self) { 22 | return this; 23 | } else { 24 | return result; 25 | } 26 | }; 27 | }); 28 | } 29 | return Grid; 30 | })(); 31 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/grids/FrameGrid.js: -------------------------------------------------------------------------------- 1 | import Grid from "../Grid.svelte"; 2 | import { FrameGrid as GridClass } from "@egjs/grid"; 3 | 4 | let SvelteFrameGrid; 5 | 6 | if (typeof Grid === "object") { 7 | SvelteFrameGrid = Grid; 8 | } else { 9 | SvelteFrameGrid = class SvelteFrameGrid extends Grid { 10 | constructor(options) { 11 | options.props.GridClass = GridClass; 12 | super(options); 13 | } 14 | } 15 | } 16 | export { SvelteFrameGrid as FrameGrid }; 17 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/grids/JustifiedGrid.js: -------------------------------------------------------------------------------- 1 | import Grid from "../Grid.svelte"; 2 | import { JustifiedGrid as GridClass } from "@egjs/grid"; 3 | 4 | let SvelteJustifiedGrid; 5 | 6 | if (typeof Grid === "object") { 7 | SvelteJustifiedGrid = Grid; 8 | } else { 9 | SvelteJustifiedGrid = class SvelteJustifiedGrid extends Grid { 10 | constructor(options) { 11 | options.props.GridClass = GridClass; 12 | super(options); 13 | } 14 | } 15 | } 16 | export { SvelteJustifiedGrid as JustifiedGrid }; 17 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/grids/MasonryGrid.js: -------------------------------------------------------------------------------- 1 | import Grid from "../Grid.svelte"; 2 | import { MasonryGrid as GridClass } from "@egjs/grid"; 3 | 4 | let SvelteMasonryGrid; 5 | 6 | if (typeof Grid === "object") { 7 | SvelteMasonryGrid = Grid; 8 | } else { 9 | SvelteMasonryGrid = class SvelteMasonryGrid extends Grid { 10 | constructor(options) { 11 | options.props.GridClass = GridClass; 12 | super(options); 13 | } 14 | } 15 | } 16 | export { SvelteMasonryGrid as MasonryGrid }; 17 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/grids/PackingGrid.js: -------------------------------------------------------------------------------- 1 | import Grid from "../Grid.svelte"; 2 | import { PackingGrid as GridClass } from "@egjs/grid"; 3 | 4 | let SveltePackingGrid; 5 | 6 | if (typeof Grid === "object") { 7 | SveltePackingGrid = Grid; 8 | } else { 9 | SveltePackingGrid = class SveltePackingGrid extends Grid { 10 | constructor(options) { 11 | options.props.GridClass = GridClass; 12 | super(options); 13 | } 14 | } 15 | } 16 | export { SveltePackingGrid as PackingGrid }; 17 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/index.d.ts: -------------------------------------------------------------------------------- 1 | import VanillaGrid, { 2 | FrameGridOptions, GridMethods, GridOptions, JustifiedGridOptions, 3 | MasonryGridOptions, PackingGridOptions, 4 | } from "@egjs/grid"; 5 | import type { SvelteComponent } from "svelte"; 6 | 7 | 8 | export default abstract class Grid extends SvelteComponent { 9 | $$prop_def: T; 10 | getInstance(): VanillaGrid; 11 | } 12 | 13 | export default interface Grid extends GridMethods> { 14 | // eslint-disable-next-line semi 15 | } 16 | 17 | export class MasonryGrid extends Grid { } 18 | export class JustifiedGrid extends Grid { } 19 | export class FrameGrid extends Grid { } 20 | export class PackingGrid extends Grid { } 21 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/index.js: -------------------------------------------------------------------------------- 1 | import Grid from "./Grid"; 2 | 3 | export { Grid }; 4 | export * from "./grids/MasonryGrid"; 5 | export * from "./grids/JustifiedGrid"; 6 | export * from "./grids/FrameGrid"; 7 | export * from "./grids/PackingGrid"; 8 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/index.umd.js: -------------------------------------------------------------------------------- 1 | import * as modules from "./index"; 2 | 3 | 4 | export default modules; 5 | -------------------------------------------------------------------------------- /packages/svelte-grid/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; -------------------------------------------------------------------------------- /packages/svelte-grid/stories/1-MasonryGrid/0-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Examples/MasonryGrid", 3 | }; 4 | export * from "./1-MasonryGrid.stories"; 5 | export * from "./2-MasonryGridMultiple.stories"; 6 | export * from "./3-MasonryGrid100.stories"; 7 | 8 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/1-MasonryGrid/1-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import MasonryGridApp from "./apps/SvelteMasonryGridApp.svelte"; 2 | import RawMasonryGridApp from "!!raw-loader!./apps/SvelteMasonryGridApp.svelte"; 3 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | 8 | export const MasonryGridTemplate = (props) => ({ 9 | Component: MasonryGridApp, 10 | props, 11 | }); 12 | 13 | MasonryGridTemplate.storyName = "MasonryGrid"; 14 | MasonryGridTemplate.argTypes = MASONRY_GRID_CONTROLS; 15 | MasonryGridTemplate.args = { 16 | ...makeArgs(MasonryGridTemplate.argTypes), 17 | }; 18 | 19 | MasonryGridTemplate.parameters = { 20 | preview: [ 21 | { 22 | tab: "Svelte", 23 | template: convertSvelteTemplate(convertPath(RawMasonryGridApp, "src", "@egjs/svelte-grid")), 24 | language: "html", 25 | }, 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/1-MasonryGrid/2-MasonryGridMultiple.stories.tsx: -------------------------------------------------------------------------------- 1 | import MasonryGridApp from "./apps/SvelteMasonryGridMultipleApp.svelte"; 2 | import RawMasonryGridApp from "!!raw-loader!./apps/SvelteMasonryGridMultipleApp.svelte"; 3 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | 8 | export const MasonryGridMultipleTemplate = (props) => ({ 9 | Component: MasonryGridApp, 10 | props, 11 | }); 12 | 13 | MasonryGridMultipleTemplate.storyName = "MasonryGrid with item that place multiple columns"; 14 | MasonryGridMultipleTemplate.argTypes = MASONRY_GRID_CONTROLS; 15 | MasonryGridMultipleTemplate.args = { 16 | ...makeArgs(MasonryGridMultipleTemplate.argTypes), 17 | }; 18 | 19 | MasonryGridMultipleTemplate.parameters = { 20 | preview: [ 21 | { 22 | tab: "Svelte", 23 | template: convertSvelteTemplate(convertPath(RawMasonryGridApp, "src", "@egjs/svelte-grid")), 24 | language: "html", 25 | }, 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/1-MasonryGrid/3-MasonryGrid100.stories.tsx: -------------------------------------------------------------------------------- 1 | import MasonryGridApp from "./apps/SvelteMasonryGrid100App.svelte"; 2 | import RawMasonryGridApp from "!!raw-loader!./apps/SvelteMasonryGrid100App.svelte"; 3 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | 8 | export const MasonryGrid100Template = (props) => ({ 9 | Component: MasonryGridApp, 10 | props, 11 | }); 12 | 13 | MasonryGrid100Template.storyName = "MasonryGrid with item that place 100% columns"; 14 | MasonryGrid100Template.argTypes = MASONRY_GRID_CONTROLS; 15 | MasonryGrid100Template.args = { 16 | ...makeArgs(MasonryGrid100Template.argTypes), 17 | }; 18 | 19 | MasonryGrid100Template.parameters = { 20 | preview: [ 21 | { 22 | tab: "Svelte", 23 | template: convertSvelteTemplate(convertPath(RawMasonryGridApp, "src", "@egjs/svelte-grid")), 24 | language: "html", 25 | }, 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/1-MasonryGrid/apps/SvelteMasonryGrid100App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 |
1
22 |
2
23 |
3
24 |
4
25 |
5
26 |
6
27 |
7
28 |
8
29 |
9
30 |
10
31 | 32 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/1-MasonryGrid/apps/SvelteMasonryGridApp.svelte: -------------------------------------------------------------------------------- 1 | 11 | 20 |
1
21 |
2
22 |
3
23 |
4
24 |
5
25 |
6
26 |
7
27 |
8
28 |
9
29 |
10
30 | 31 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/1-MasonryGrid/apps/SvelteMasonryGridMultipleApp.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 |
1
22 |
2
23 |
3
24 |
4
25 |
5
26 |
6
27 |
7
28 |
8
29 |
9
30 |
10
31 | 32 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/2-JustifiedGrid/0-JustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Examples/JustifiedGrid", 3 | }; 4 | export * from "./1-JustifiedGrid.stories"; 5 | export * from "./2-CroppedJustifiedGrid.stories"; 6 | export * from "./3-KeepRatioWithOffset.stories"; 7 | export * from "./4-KeepRatioWithMaintainedTarget.stories"; 8 | export * from "./5-StretchedJustifiedGrid.stories"; 9 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/2-JustifiedGrid/1-JustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import JustifiedGridApp from "./apps/SvelteJustifiedGridApp.svelte"; 2 | import RawJustifiedGridApp from "!!raw-loader!./apps/SvelteJustifiedGridApp.svelte"; 3 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const JustifiedGridTemplate = (props) => ({ 8 | Component: JustifiedGridApp, 9 | props, 10 | }); 11 | 12 | JustifiedGridTemplate.storyName = "JustifiedGrid"; 13 | JustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 14 | JustifiedGridTemplate.args = { 15 | ...makeArgs(JustifiedGridTemplate.argTypes), 16 | }; 17 | 18 | JustifiedGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Svelte", 22 | template: convertSvelteTemplate(convertPath(RawJustifiedGridApp, "src", "@egjs/svelte-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/2-JustifiedGrid/2-CroppedJustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import JustifiedGridApp from "./apps/SvelteJustifiedGridApp.svelte"; 2 | import RawJustifiedGridApp from "!!raw-loader!./apps/SvelteJustifiedGridApp.svelte"; 3 | import { CROPPED_JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const CroppedJustifiedGridTemplate = (props) => ({ 8 | Component: JustifiedGridApp, 9 | props, 10 | }); 11 | 12 | CroppedJustifiedGridTemplate.storyName = "Cropped JustifiedGrid"; 13 | CroppedJustifiedGridTemplate.argTypes = CROPPED_JUSTIFIED_GRID_CONTROLS; 14 | CroppedJustifiedGridTemplate.args = { 15 | ...makeArgs(CroppedJustifiedGridTemplate.argTypes), 16 | }; 17 | 18 | CroppedJustifiedGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Svelte", 22 | template: convertSvelteTemplate(convertPath(RawJustifiedGridApp, "src", "@egjs/svelte-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/2-JustifiedGrid/3-KeepRatioWithOffset.stories.tsx: -------------------------------------------------------------------------------- 1 | import JustifiedGridApp from "./apps/SvelteKeepRatioWithOffsetApp.svelte"; 2 | import RawJustifiedGridApp from "!!raw-loader!./apps/SvelteKeepRatioWithOffsetApp.svelte"; 3 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const KeepRatioWithOffsetTemplate = (props) => ({ 8 | Component: JustifiedGridApp, 9 | props, 10 | }); 11 | 12 | KeepRatioWithOffsetTemplate.storyName = "Keep ratio with offset"; 13 | KeepRatioWithOffsetTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 14 | KeepRatioWithOffsetTemplate.args = { 15 | ...makeArgs(KeepRatioWithOffsetTemplate.argTypes), 16 | }; 17 | 18 | KeepRatioWithOffsetTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Svelte", 22 | template: convertSvelteTemplate(convertPath(RawJustifiedGridApp, "src", "@egjs/svelte-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/2-JustifiedGrid/4-KeepRatioWithMaintainedTarget.stories.tsx: -------------------------------------------------------------------------------- 1 | import JustifiedGridApp from "./apps/SvelteKeepRatioWithMaintainedTargetApp.svelte"; 2 | import RawJustifiedGridApp from "!!raw-loader!./apps/SvelteKeepRatioWithMaintainedTargetApp.svelte"; 3 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const KeepRatioWithMaintainedTargetTemplate = (props) => ({ 8 | Component: JustifiedGridApp, 9 | props, 10 | }); 11 | 12 | KeepRatioWithMaintainedTargetTemplate.storyName = "Keep ratio with offset"; 13 | KeepRatioWithMaintainedTargetTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 14 | KeepRatioWithMaintainedTargetTemplate.args = { 15 | ...makeArgs(KeepRatioWithMaintainedTargetTemplate.argTypes), 16 | }; 17 | 18 | KeepRatioWithMaintainedTargetTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Svelte", 22 | template: convertSvelteTemplate(convertPath(RawJustifiedGridApp, "src", "@egjs/svelte-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/2-JustifiedGrid/5-StretchedJustifiedGrid.stories.ts: -------------------------------------------------------------------------------- 1 | import JustifiedGridApp from "./apps/SvelteKeepRatioWithMaintainedTargetApp.svelte"; 2 | import RawJustifiedGridApp from "!!raw-loader!./apps/SvelteKeepRatioWithMaintainedTargetApp.svelte"; 3 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const StretchedJustifiedGridTemplate = (props) => ({ 8 | Component: JustifiedGridApp, 9 | props, 10 | }); 11 | 12 | StretchedJustifiedGridTemplate.storyName = "Stretched Items with JustifiedGrid"; 13 | StretchedJustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 14 | StretchedJustifiedGridTemplate.args = { 15 | ...makeArgs(StretchedJustifiedGridTemplate.argTypes), 16 | stretch: true, 17 | sizeRange: [200, 300], 18 | }; 19 | 20 | StretchedJustifiedGridTemplate.parameters = { 21 | preview: [ 22 | { 23 | tab: "Svelte", 24 | template: convertSvelteTemplate(convertPath(RawJustifiedGridApp, "src", "@egjs/svelte-grid")), 25 | language: "html", 26 | }, 27 | ], 28 | }; 29 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/2-JustifiedGrid/apps/SvelteJustifiedGridApp.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 |
1
30 |
2
31 |
3
32 |
4
33 |
5
34 |
6
35 |
7
36 |
8
37 |
9
38 |
10
39 | 40 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/3-FrameGrid/0-FrameGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Examples/FrameGrid", 3 | }; 4 | export * from "./1-FrameGrid.stories"; 5 | 6 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/3-FrameGrid/1-FrameGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import FrameGridApp from "./apps/SvelteFrameGridApp.svelte"; 2 | import RawFrameGridApp from "!!raw-loader!./apps/SvelteFrameGridApp.svelte"; 3 | import { FRAME_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const FrameGridTemplate = (props) => ({ 8 | Component: FrameGridApp, 9 | props, 10 | }); 11 | 12 | FrameGridTemplate.storyName = "FrameGrid"; 13 | FrameGridTemplate.argTypes = FRAME_GRID_CONTROLS; 14 | FrameGridTemplate.args = { 15 | ...makeArgs(FrameGridTemplate.argTypes), 16 | }; 17 | 18 | FrameGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Svelte", 22 | template: convertSvelteTemplate(convertPath(RawFrameGridApp, "src", "@egjs/svelte-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/3-FrameGrid/apps/SvelteFrameGridApp.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 |
1
20 |
2
21 |
3
22 |
4
23 |
5
24 |
6
25 |
7
26 |
8
27 |
9
28 |
10
29 | 30 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/4-PackingGrid/0-PackingGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Examples/PackingGrid", 3 | }; 4 | export * from "./1-PackingGrid.stories"; 5 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/4-PackingGrid/1-PackingGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import PackingGridApp from "./apps/SveltePackingGridApp.svelte"; 2 | import RawPackingGridApp from "!!raw-loader!./apps/SveltePackingGridApp.svelte"; 3 | import { PACKING_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | export const PackingGridTemplate = (props) => ({ 8 | Component: PackingGridApp, 9 | props, 10 | }); 11 | 12 | PackingGridTemplate.storyName = "PackingGrid"; 13 | PackingGridTemplate.argTypes = PACKING_GRID_CONTROLS; 14 | PackingGridTemplate.args = { 15 | ...makeArgs(PackingGridTemplate.argTypes), 16 | }; 17 | 18 | PackingGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Svelte", 22 | template: convertSvelteTemplate(convertPath(RawPackingGridApp, "src", "@egjs/svelte-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/4-PackingGrid/apps/SveltePackingGridApp.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 |
1
22 |
2
23 |
3
24 |
4
25 |
5
26 |
6
27 |
7
28 |
8
29 |
9
30 |
10
31 | 32 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/5-MethodsEvents/0-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Examples/Use Methods & Events", 3 | }; 4 | 5 | export * from "./1-MethodsEvents.stories"; 6 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/5-MethodsEvents/1-MethodsEvents.stories.tsx: -------------------------------------------------------------------------------- 1 | import App from "./apps/SvelteMethodsEventsApp.svelte"; 2 | import RawApp from "!!raw-loader!./apps/SvelteMethodsEventsApp.svelte"; 3 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 4 | import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils"; 5 | import "../../../../stories/templates/default.css"; 6 | 7 | 8 | export const MethodsEventsTemplate = (props) => ({ 9 | Component: App, 10 | props, 11 | }); 12 | 13 | MethodsEventsTemplate.storyName = "Use Methods & Events"; 14 | MethodsEventsTemplate.argTypes = MASONRY_GRID_CONTROLS; 15 | MethodsEventsTemplate.args = { 16 | ...makeArgs(MethodsEventsTemplate.argTypes), 17 | }; 18 | 19 | MethodsEventsTemplate.parameters = { 20 | preview: [ 21 | { 22 | tab: "Svelte", 23 | template: convertSvelteTemplate(convertPath(RawApp, "src", "@egjs/svelte-grid")), 24 | language: "html", 25 | }, 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /packages/svelte-grid/stories/5-MethodsEvents/apps/SvelteMethodsEventsApp.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |
16 | 25 | { 35 | result.innerHTML = `updated: ${e.updated.length}`; 36 | }} 37 | > 38 |
1
39 |
2
40 |
3
41 |
4
42 |
5
43 |
6
44 |
7
45 |
8
46 |
9
47 |
10
48 | 49 |
50 | -------------------------------------------------------------------------------- /packages/svelte-grid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | 4 | "include": ["src/**/*", "./global.d.ts", "stories/**/*"], 5 | "exclude": ["node_modules/*", "__sapper__/*", "public/*"] 6 | } 7 | -------------------------------------------------------------------------------- /packages/vue-grid/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /packages/vue-grid/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /packages/vue-grid/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | "plugin:vue/essential", 8 | "@vue/airbnb", 9 | "@vue/typescript/recommended", 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 2020, 13 | }, 14 | rules: { 15 | "max-len": ["error", { "code": 120, "comments": 400, "ignoreTemplateLiterals": true }], 16 | "quotes": ["error", "double"], 17 | "no-shadow": "error", 18 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 19 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /packages/vue-grid/.npmignore: -------------------------------------------------------------------------------- 1 | .storybook 2 | stories/ 3 | vue3/ 4 | public/ 5 | -------------------------------------------------------------------------------- /packages/vue-grid/.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | webpackFinal: (config) => { 5 | config.resolve.alias["@egjs/grid"] = path.resolve(__dirname, '../../../dist/grid.esm.js'); 6 | return config; 7 | }, 8 | "stories": [ 9 | "../stories/**/*.stories.mdx", 10 | "../stories/**/*.stories.@(js|jsx|ts|tsx)" 11 | ], 12 | "addons": [ 13 | "@storybook/addon-docs/register", 14 | "@storybook/addon-controls", 15 | "@storybook/addon-viewport/register", 16 | "storybook-addon-preview/register", 17 | "storybook-dark-mode/register", 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/vue-grid/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | panelPosition: "right", 5 | }); 6 | -------------------------------------------------------------------------------- /packages/vue-grid/.storybook/preview.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { themes } from "@storybook/theming"; 3 | import { 4 | INITIAL_VIEWPORTS, 5 | // or MINIMAL_VIEWPORTS, 6 | } from "@storybook/addon-viewport"; 7 | 8 | // or global addParameters 9 | export const parameters = { 10 | controls: { 11 | passArgsFirst: true, 12 | expanded: true, 13 | hideNoControlsWarning: true, 14 | }, 15 | viewport: { 16 | viewports: { 17 | ...INITIAL_VIEWPORTS, 18 | }, 19 | }, 20 | darkMode: { 21 | // Override the default light theme 22 | light: { ...themes.normal }, 23 | // Override the default dark theme 24 | dark: { ...themes.dark }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/packages/vue-grid/public/favicon.ico -------------------------------------------------------------------------------- /packages/vue-grid/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/vue-grid/rollup.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@egjs/build-helper"); 2 | const vuePlugin = require("rollup-plugin-vue"); 3 | 4 | const defaultOptions = { 5 | sourcemap: true, 6 | input: "./src/index.ts", 7 | exports: "named", 8 | plugins: [ 9 | vuePlugin(), 10 | ] 11 | }; 12 | export default buildHelper([ 13 | { 14 | ...defaultOptions, 15 | format: "es", 16 | output: "./dist/grid.esm.js", 17 | }, 18 | { 19 | ...defaultOptions, 20 | format: "cjs", 21 | input: "./src/index.umd.ts", 22 | exports: "default", 23 | output: "./dist/grid.cjs.js", 24 | }, 25 | ]); 26 | -------------------------------------------------------------------------------- /packages/vue-grid/src/Grid.ts: -------------------------------------------------------------------------------- 1 | import { ShapeFlags } from "@vue/shared"; 2 | 3 | 4 | function hForVue3(instance: any) { 5 | return function h(type: string, props: any, children: any[]) { 6 | let ref = null; 7 | 8 | if (props.ref) { 9 | ref = { 10 | i: instance.$, 11 | r: props.ref, 12 | }; 13 | } 14 | return { 15 | // https://github.com/vuejs/vue-next/blob/master/packages/shared/src/shapeFlags.ts 16 | // ELEMENT 1, ARRAY_CHILDREN 16 17 | shapeFlag: 17, 18 | type, 19 | props, 20 | ref, 21 | children, 22 | } 23 | }; 24 | } 25 | 26 | /** 27 | * egjs-grid 28 | * Copyright (c) 2021-present NAVER Corp. 29 | * MIT license 30 | */ 31 | export default { 32 | render(this: any, h1: any) { 33 | const h = typeof h1 === "function" ? h1 : hForVue3(this); 34 | 35 | let slots = this.$slots.default; 36 | const tag = this.$props.tag || "div"; 37 | 38 | if (typeof slots === "function") { 39 | slots = slots(); 40 | } 41 | 42 | return h( 43 | tag, 44 | { 45 | ref: "container", 46 | }, 47 | slots 48 | ); 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /packages/vue-grid/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | 4 | export default Vue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/vue-grid/src/grids/FrameGrid.ts: -------------------------------------------------------------------------------- 1 | import { 2 | FrameGrid as VanillaFrameGrid, 3 | } from "@egjs/grid"; 4 | import Grid from "../Grid"; 5 | import { makeGrid } from "../utils"; 6 | import { VueGridInterface } from "../types"; 7 | 8 | export const FrameGrid = makeGrid("frame-grid", VanillaFrameGrid, Grid); 9 | export type FrameGrid = VueGridInterface; 10 | -------------------------------------------------------------------------------- /packages/vue-grid/src/grids/JustifiedGrid.ts: -------------------------------------------------------------------------------- 1 | import { 2 | JustifiedGrid as VanillaJustifiedGrid, 3 | } from "@egjs/grid"; 4 | import Grid from "../Grid"; 5 | import { makeGrid } from "../utils"; 6 | import { VueGridInterface } from "../types"; 7 | 8 | export const JustifiedGrid = makeGrid("justified-grid", VanillaJustifiedGrid, Grid); 9 | export type JustifiedGrid = VueGridInterface; 10 | -------------------------------------------------------------------------------- /packages/vue-grid/src/grids/MasonryGrid.ts: -------------------------------------------------------------------------------- 1 | import { 2 | MasonryGrid as VanillaMasonryGrid, 3 | } from "@egjs/grid"; 4 | import Grid from "../Grid"; 5 | import { makeGrid } from "../utils"; 6 | import { VueGridInterface } from "../types"; 7 | 8 | export const MasonryGrid = makeGrid("masonry-grid", VanillaMasonryGrid, Grid); 9 | export type MasonryGrid = VueGridInterface; 10 | -------------------------------------------------------------------------------- /packages/vue-grid/src/grids/PackingGrid.ts: -------------------------------------------------------------------------------- 1 | import { 2 | PackingGrid as VanillaPackingGrid, 3 | } from "@egjs/grid"; 4 | import Grid from "../Grid"; 5 | import { makeGrid } from "../utils"; 6 | import { VueGridInterface } from "../types"; 7 | 8 | export const PackingGrid = makeGrid("packing-grid", VanillaPackingGrid, Grid); 9 | export type PackingGrid = VueGridInterface; 10 | -------------------------------------------------------------------------------- /packages/vue-grid/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import Grid from "./Grid"; 7 | 8 | export { Grid }; 9 | export * from "./grids/MasonryGrid"; 10 | export * from "./grids/JustifiedGrid"; 11 | export * from "./grids/FrameGrid"; 12 | export * from "./grids/PackingGrid"; 13 | export * from "./utils"; 14 | export * from "./types"; 15 | -------------------------------------------------------------------------------- /packages/vue-grid/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import * as modules from "./index"; 2 | 3 | 4 | export default modules; 5 | -------------------------------------------------------------------------------- /packages/vue-grid/src/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import Grid, { GridFunction, GridMethods } from "@egjs/grid"; 7 | 8 | export type VueGridProps = T["defaultOptions"] & { 9 | tag?: string; 10 | }; 11 | export interface VueGridInterface extends GridMethods> { 12 | $el: HTMLElement; 13 | $_grid: Grid; 14 | $props: VueGridProps; 15 | } 16 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/1-MasonryGrid/0-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | title: "Examples/MasonryGrid", 4 | }; 5 | export * from "./1-MasonryGrid.stories"; 6 | export * from "./2-MasonryGridMultiple.stories"; 7 | export * from "./3-MasonryGrid100.stories"; 8 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/1-MasonryGrid/1-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import MasonryGridApp from "./apps/VueMasonryGridApp.vue"; 3 | import RawMaonsryGridApp from "!!raw-loader!./apps/VueMasonryGridApp.vue"; 4 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | 10 | export const MasonryGridTemplate = makeVueApp(MasonryGridApp); 11 | 12 | 13 | MasonryGridTemplate.storyName = "MasonryGrid"; 14 | MasonryGridTemplate.argTypes = MASONRY_GRID_CONTROLS; 15 | MasonryGridTemplate.args = { 16 | ...makeArgs(MasonryGridTemplate.argTypes), 17 | }; 18 | 19 | MasonryGridTemplate.parameters = { 20 | preview: [ 21 | { 22 | tab: "Vue", 23 | template: convertVueTemplate(convertPath(RawMaonsryGridApp, "src", "@egjs/vue-grid")), 24 | language: "html", 25 | }, 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/1-MasonryGrid/2-MasonryGridMultiple.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import MasonryGridApp from "./apps/VueMasonryGridMultipleApp.vue"; 3 | import RawMaonsryGridApp from "!!raw-loader!./apps/VueMasonryGridMultipleApp.vue"; 4 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const MasonryGridMultipleTemplate = makeVueApp(MasonryGridApp); 10 | 11 | MasonryGridMultipleTemplate.storyName = "MasonryGrid with item that place multiple columns"; 12 | MasonryGridMultipleTemplate.argTypes = MASONRY_GRID_CONTROLS; 13 | MasonryGridMultipleTemplate.args = { 14 | ...makeArgs(MasonryGridMultipleTemplate.argTypes), 15 | }; 16 | 17 | MasonryGridMultipleTemplate.parameters = { 18 | preview: [ 19 | { 20 | tab: "Vue", 21 | template: convertVueTemplate(convertPath(RawMaonsryGridApp, "src", "@egjs/vue-grid")), 22 | language: "html", 23 | }, 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/1-MasonryGrid/3-MasonryGrid100.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import MasonryGridApp from "./apps/VueMasonryGrid100App.vue"; 3 | import RawMaonsryGridApp from "!!raw-loader!./apps/VueMasonryGrid100App.vue"; 4 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const MasonryGrid100Template = makeVueApp(MasonryGridApp); 10 | 11 | 12 | MasonryGrid100Template.storyName = "MasonryGrid with item that place 100% columns"; 13 | MasonryGrid100Template.argTypes = MASONRY_GRID_CONTROLS; 14 | MasonryGrid100Template.args = { 15 | ...makeArgs(MasonryGrid100Template.argTypes), 16 | }; 17 | 18 | MasonryGrid100Template.parameters = { 19 | preview: [ 20 | { 21 | tab: "Vue", 22 | template: convertVueTemplate(convertPath(RawMaonsryGridApp, "src", "@egjs/vue-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/1-MasonryGrid/apps/VueMasonryGridApp.vue: -------------------------------------------------------------------------------- 1 | 23 | 40 | 83 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/2-JustifiedGrid/0-JustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | title: "Examples/JustifiedGrid", 4 | }; 5 | export * from "./1-JustifiedGrid.stories"; 6 | export * from "./2-CroppedJustifiedGrid.stories"; 7 | export * from "./3-KeepRatioWithOffset.stories"; 8 | export * from "./4-KeepRatioWithMaintainedTarget.stories"; 9 | export * from "./5-StretchedJustifiedGrid.stories"; 10 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/2-JustifiedGrid/1-JustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import JustifiedGridApp from "./apps/VueJustifiedGridApp.vue"; 3 | import RawJustifiedGridApp from "!!raw-loader!./apps/VueJustifiedGridApp.vue"; 4 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const JustifiedGridTemplate = makeVueApp(JustifiedGridApp); 10 | 11 | 12 | JustifiedGridTemplate.storyName = "JustifiedGrid"; 13 | JustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 14 | JustifiedGridTemplate.args = { 15 | ...makeArgs(JustifiedGridTemplate.argTypes), 16 | }; 17 | 18 | JustifiedGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Vue", 22 | template: convertVueTemplate(convertPath(RawJustifiedGridApp, "src", "@egjs/vue-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/2-JustifiedGrid/2-CroppedJustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import JustifiedGridApp from "./apps/VueJustifiedGridApp.vue"; 3 | import RawJustifiedGridApp from "!!raw-loader!./apps/VueJustifiedGridApp.vue"; 4 | import { CROPPED_JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const CroppedJustifiedGridTemplate = makeVueApp(JustifiedGridApp); 10 | 11 | 12 | CroppedJustifiedGridTemplate.storyName = "Cropped JustifiedGrid"; 13 | CroppedJustifiedGridTemplate.argTypes = CROPPED_JUSTIFIED_GRID_CONTROLS; 14 | CroppedJustifiedGridTemplate.args = { 15 | ...makeArgs(CroppedJustifiedGridTemplate.argTypes), 16 | }; 17 | 18 | CroppedJustifiedGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Vue", 22 | template: convertVueTemplate(convertPath(RawJustifiedGridApp, "src", "@egjs/vue-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/2-JustifiedGrid/3-KeepRatioWithOffset.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import App from "./apps/VueKeepRatioWithOffsetApp.vue"; 3 | import RawApp from "!!raw-loader!./apps/VueKeepRatioWithOffsetApp.vue"; 4 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const KeepRatioWithOffsetTemplate = makeVueApp(App); 10 | 11 | 12 | KeepRatioWithOffsetTemplate.storyName = "Keep ratio with offset"; 13 | KeepRatioWithOffsetTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 14 | KeepRatioWithOffsetTemplate.args = { 15 | ...makeArgs(KeepRatioWithOffsetTemplate.argTypes), 16 | }; 17 | 18 | KeepRatioWithOffsetTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Vue", 22 | template: convertVueTemplate(convertPath(RawApp, "src", "@egjs/vue-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/2-JustifiedGrid/4-KeepRatioWithMaintainedTarget.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import App from "./apps/VueKeepRatioWithMaintainedTargetApp.vue"; 3 | import RawApp from "!!raw-loader!./apps/VueKeepRatioWithMaintainedTargetApp.vue"; 4 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const KeepRatioWithMaintainedTargetTemplate = makeVueApp(App); 10 | 11 | 12 | KeepRatioWithMaintainedTargetTemplate.storyName = "Keep ratio with maintained target"; 13 | KeepRatioWithMaintainedTargetTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 14 | KeepRatioWithMaintainedTargetTemplate.args = { 15 | ...makeArgs(KeepRatioWithMaintainedTargetTemplate.argTypes), 16 | }; 17 | 18 | KeepRatioWithMaintainedTargetTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Vue", 22 | template: convertVueTemplate(convertPath(RawApp, "src", "@egjs/vue-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/2-JustifiedGrid/5-StretchedJustifiedGrid.stories.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import App from "./apps/VueKeepRatioWithMaintainedTargetApp.vue"; 3 | import RawApp from "!!raw-loader!./apps/VueKeepRatioWithMaintainedTargetApp.vue"; 4 | import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const StretchedJustifiedGridTemplate = makeVueApp(App); 10 | 11 | 12 | StretchedJustifiedGridTemplate.storyName = "Stretched Items with JustifiedGrid"; 13 | StretchedJustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 14 | StretchedJustifiedGridTemplate.args = { 15 | ...makeArgs(StretchedJustifiedGridTemplate.argTypes), 16 | stretch: true, 17 | sizeRange: [200, 300], 18 | }; 19 | 20 | StretchedJustifiedGridTemplate.parameters = { 21 | preview: [ 22 | { 23 | tab: "Vue", 24 | template: convertVueTemplate(convertPath(RawApp, "src", "@egjs/vue-grid")), 25 | language: "html", 26 | }, 27 | ], 28 | }; 29 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/3-FrameGrid/0-FrameGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | title: "Examples/FrameGrid", 4 | }; 5 | export * from "./1-FrameGrid.stories"; 6 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/3-FrameGrid/1-FrameGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import FrameGridApp from "./apps/VueFrameGridApp.vue"; 3 | import RawFrameGridApp from "!!raw-loader!./apps/VueFrameGridApp.vue"; 4 | import { FRAME_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const FrameGridTemplate = makeVueApp(FrameGridApp); 10 | 11 | 12 | FrameGridTemplate.storyName = "FrameGrid"; 13 | FrameGridTemplate.argTypes = FRAME_GRID_CONTROLS; 14 | FrameGridTemplate.args = { 15 | ...makeArgs(FrameGridTemplate.argTypes), 16 | }; 17 | 18 | FrameGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Vue", 22 | template: convertVueTemplate(convertPath(RawFrameGridApp, "src", "@egjs/vue-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/3-FrameGrid/apps/VueFrameGridApp.vue: -------------------------------------------------------------------------------- 1 | 22 | 38 | 81 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/4-PackingGrid/0-PackingGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | title: "Examples/PackingGrid", 4 | }; 5 | export * from "./1-PackingGrid.stories"; 6 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/4-PackingGrid/1-PackingGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import PackingGridApp from "./apps/VuePackingGridApp.vue"; 3 | import RawPackingGridApp from "!!raw-loader!./apps/VuePackingGridApp.vue"; 4 | import { PACKING_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | export const PackingGridTemplate = makeVueApp(PackingGridApp); 10 | 11 | 12 | PackingGridTemplate.storyName = "PackingGrid"; 13 | PackingGridTemplate.argTypes = PACKING_GRID_CONTROLS; 14 | PackingGridTemplate.args = { 15 | ...makeArgs(PackingGridTemplate.argTypes), 16 | }; 17 | 18 | PackingGridTemplate.parameters = { 19 | preview: [ 20 | { 21 | tab: "Vue", 22 | template: convertVueTemplate(convertPath(RawPackingGridApp, "src", "@egjs/vue-grid")), 23 | language: "html", 24 | }, 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/4-PackingGrid/apps/VuePackingGridApp.vue: -------------------------------------------------------------------------------- 1 | 23 | 40 | 83 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/5-MethodsEvents/0-MethodsEvents.stories.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Examples/Use Methods & Events", 3 | }; 4 | 5 | export * from "./1-MethodsEvents.stories"; 6 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/5-MethodsEvents/1-MethodsEvents.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import App from "./apps/VueMethodsEventsApp.vue"; 3 | import RawApp from "!!raw-loader!./apps/VueMethodsEventsApp.vue"; 4 | import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls"; 5 | import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils"; 6 | import "../../../../stories/templates/default.css"; 7 | import { makeVueApp } from "../utils"; 8 | 9 | 10 | export const MethodsEventsTemplate = makeVueApp(App); 11 | 12 | 13 | MethodsEventsTemplate.storyName = "Use Methods & Events"; 14 | MethodsEventsTemplate.argTypes = MASONRY_GRID_CONTROLS; 15 | MethodsEventsTemplate.args = { 16 | ...makeArgs(MethodsEventsTemplate.argTypes), 17 | }; 18 | 19 | MethodsEventsTemplate.parameters = { 20 | preview: [ 21 | { 22 | tab: "Vue", 23 | template: convertVueTemplate(convertPath(RawApp, "src", "@egjs/vue-grid")), 24 | language: "html", 25 | }, 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | declare module "!!raw-loader!*" { 6 | const content: string; 7 | export default content; 8 | } 9 | -------------------------------------------------------------------------------- /packages/vue-grid/stories/utils.ts: -------------------------------------------------------------------------------- 1 | export function makeVueApp(AppComponent: any): any { 2 | return (args: any, { argTypes }: any) => ({ 3 | components: { 4 | App: AppComponent, 5 | }, 6 | props: ["args", ...Object.keys(argTypes)], 7 | setup() { 8 | return { ...args, args }; 9 | }, 10 | template: '', 11 | }); 12 | } 13 | -------------------------------------------------------------------------------- /packages/vue-grid/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": true, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.tsx", 12 | "src/**/*.vue" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/vue-grid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx", 35 | "stories/**/*.ts", 36 | "stories/**/*.tsx", 37 | "stories/**/*.vue" 38 | ], 39 | "exclude": [ 40 | "node_modules" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /packages/vue-grid/vue3/.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | 4 | module.exports = { 5 | webpackFinal: config => { 6 | const alias = config.resolve.alias; 7 | alias["@egjs/grid"] = path.resolve(__dirname, "../../../../dist/grid.esm.js"); 8 | alias["vue"] = require.resolve("vue"); 9 | alias["@storybook/vue"] = require.resolve("@storybook/vue3"); 10 | 11 | return config; 12 | }, 13 | "stories": [ 14 | "../../stories/**/*.stories.mdx", 15 | "../../stories/**/*.stories.@(js|jsx|ts|tsx)" 16 | ], 17 | "addons": [ 18 | "@storybook/addon-docs/register", 19 | "@storybook/addon-controls", 20 | "@storybook/addon-viewport/register", 21 | "storybook-addon-preview/register", 22 | "storybook-dark-mode/register", 23 | ], 24 | } 25 | -------------------------------------------------------------------------------- /packages/vue-grid/vue3/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | panelPosition: "right", 5 | }); 6 | -------------------------------------------------------------------------------- /packages/vue-grid/vue3/.storybook/preview.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { themes } from "@storybook/theming"; 3 | import { 4 | INITIAL_VIEWPORTS, 5 | // or MINIMAL_VIEWPORTS, 6 | } from "@storybook/addon-viewport"; 7 | 8 | // or global addParameters 9 | export const parameters = { 10 | controls: { 11 | passArgsFirst: true, 12 | expanded: true, 13 | hideNoControlsWarning: true, 14 | }, 15 | viewport: { 16 | viewports: { 17 | ...INITIAL_VIEWPORTS, 18 | }, 19 | }, 20 | darkMode: { 21 | // Override the default light theme 22 | light: { ...themes.normal }, 23 | // Override the default dark theme 24 | dark: { ...themes.dark }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-grid/vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-storybook", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "storybook": "start-storybook -p 6011 -s public", 7 | "build-storybook": "build-storybook -s public" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/naver/egjs-grid/tree/main/packages/vue-grid" 12 | }, 13 | "author": { 14 | "name": "NAVER Corp." 15 | }, 16 | "namespace": { 17 | "eg": "eg" 18 | }, 19 | "homepage": "https://naver.github.io/egjs-grid", 20 | "bugs": { 21 | "url": "https://github.com/naver/egjs-grid/issues" 22 | }, 23 | "keywords": [ 24 | "vue", 25 | "lazyloading", 26 | "ready", 27 | "grid", 28 | "image", 29 | "video", 30 | "egjs", 31 | "masonry", 32 | "justified", 33 | "packing", 34 | "frame", 35 | "layout" 36 | ], 37 | "devDependencies": { 38 | "@babel/core": "^7.13.16", 39 | "@storybook/vue3": "^6.2.9", 40 | "babel-loader": "^8.2.2", 41 | "vue": "^3.0.11", 42 | "webpack-cli": "^4.6.0", 43 | "webpack-command": "^0.5.1" 44 | }, 45 | "dependencies": { 46 | "@vue/compiler-sfc": "^3.0.11", 47 | "vue-loader": "^16.2.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/vue-grid/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/packages/vue-grid/vue3/public/favicon.ico -------------------------------------------------------------------------------- /packages/vue-grid/vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/vue-grid/vue3/storybook-static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-grid/9f397ac37d5ffecbc1ce7f0868a72d7c498e351a/packages/vue-grid/vue3/storybook-static/favicon.ico -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | // imready.js 3 | // imready.min.js 4 | // imready.pkgd.js 5 | // imready.pkgd.min.js 6 | // imready.esm.js 7 | 8 | 9 | const buildHelper = require("@egjs/build-helper"); 10 | const name = "Grid"; 11 | 12 | export default buildHelper([ 13 | { 14 | name, 15 | input: "./src/index.umd.ts", 16 | output: "./dist/grid.js", 17 | format: "umd", 18 | resolve: true, 19 | }, 20 | { 21 | name, 22 | input: "./src/index.umd.ts", 23 | output: "./dist/grid.min.js", 24 | format: "umd", 25 | uglify: true, 26 | resolve: true, 27 | }, 28 | { 29 | input: "./src/index.cjs.ts", 30 | output: "./dist/grid.cjs.js", 31 | format: "cjs", 32 | exports: "named", 33 | }, 34 | { 35 | input: "./src/index.ts", 36 | output: "./dist/grid.esm.js", 37 | format: "esm", 38 | exports: "named", 39 | }, 40 | ]); 41 | 42 | -------------------------------------------------------------------------------- /src/index.cjs.ts: -------------------------------------------------------------------------------- 1 | import Grid, * as modules from './index'; 2 | 3 | for (const name in modules) { 4 | (Grid as any)[name] = (modules as any)[name]; 5 | } 6 | 7 | declare const module: any; 8 | module.exports = Grid; 9 | export default Grid; 10 | export * from './index'; 11 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import Grid from "./Grid"; 7 | 8 | export * from "./grids/MasonryGrid"; 9 | export * from "./grids/JustifiedGrid"; 10 | export * from "./grids/FrameGrid"; 11 | export * from "./grids/PackingGrid"; 12 | export * from "./ItemRenderer"; 13 | export * from "./types"; 14 | export * from "./Grid"; 15 | export * from "./GridItem"; 16 | export * from "./ContainerManager"; 17 | export * from "./ResizeWatcher"; 18 | export * from "./consts"; 19 | export { 20 | GetterSetter, 21 | withGridMethods, 22 | withMethods, 23 | getMountedElements, 24 | getUpdatedItems, 25 | } from "./utils"; 26 | export default Grid; 27 | -------------------------------------------------------------------------------- /src/index.umd.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import Grid, * as modules from "./index"; 7 | 8 | for (const name in modules) { 9 | (Grid as any)[name] = (modules as any)[name]; 10 | } 11 | export default Grid; 12 | -------------------------------------------------------------------------------- /stories/1-MasonryGrid/0-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | 3 | export default { 4 | title: "Examples/MasonryGrid", 5 | }; 6 | export * from "./1-MasonryGrid.stories"; 7 | export * from "./2-MasonryGridMultiple.stories"; 8 | export * from "./3-MasonryGrid100.stories"; 9 | -------------------------------------------------------------------------------- /stories/1-MasonryGrid/1-MasonryGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | import { makeArgs } from "../utils"; 2 | import MasonryGridApp from "./apps/VanillaMasonryGridApp"; 3 | import { MASONRY_GRID_CONTROLS } from "../templates/controls"; 4 | import { MasonryGrid } from "../../src"; 5 | import { getApp, renderContainer } from "../templates/ReactJSX"; 6 | import { getPreview } from "../templates/preview"; 7 | import "../templates/default.css"; 8 | 9 | export const MasonryGridTemplate = getApp(MasonryGrid, MasonryGridApp, renderContainer); 10 | 11 | MasonryGridTemplate.storyName = "MasonryGrid"; 12 | MasonryGridTemplate.argTypes = MASONRY_GRID_CONTROLS; 13 | MasonryGridTemplate.args = { ...makeArgs(MasonryGridTemplate.argTypes) }; 14 | 15 | MasonryGridTemplate.parameters = { 16 | preview: getPreview("1-MasonryGrid", "MasonryGrid"), 17 | }; 18 | 19 | 20 | -------------------------------------------------------------------------------- /stories/1-MasonryGrid/2-MasonryGridMultiple.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import * as React from "react"; 3 | import { makeArgs } from "../utils"; 4 | import MasonryGridApp from "./apps/VanillaMasonryGridApp"; 5 | import { MASONRY_GRID_CONTROLS } from "../templates/controls"; 6 | import { MasonryGrid } from "../../src"; 7 | import { getPreview } from "../templates/preview"; 8 | import "../templates/default.css"; 9 | import { getApp } from "../templates/ReactJSX"; 10 | 11 | export const MasonryGridMultipleTemplate = getApp(MasonryGrid, MasonryGridApp, () => { 12 | return
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
; 24 | }); 25 | 26 | MasonryGridMultipleTemplate.storyName = "MasonryGrid with item that place multiple columns"; 27 | MasonryGridMultipleTemplate.argTypes = MASONRY_GRID_CONTROLS; 28 | MasonryGridMultipleTemplate.args = { ...makeArgs(MasonryGridMultipleTemplate.argTypes) }; 29 | 30 | MasonryGridMultipleTemplate.parameters = { 31 | preview: getPreview("1-MasonryGrid", "MasonryGridMultiple", { 32 | vanillaCode: require("!!raw-loader!./apps/VanillaMasonryGridApp").default, 33 | htmlCode: require("!!raw-loader!./templates/VanillaMasonryGridMultiple.html").default, 34 | }), 35 | }; 36 | 37 | 38 | -------------------------------------------------------------------------------- /stories/1-MasonryGrid/3-MasonryGrid100.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import * as React from "react"; 3 | import { makeArgs } from "../utils"; 4 | import MasonryGridApp from "./apps/VanillaMasonryGridApp"; 5 | import { MASONRY_GRID_CONTROLS } from "../templates/controls"; 6 | import { MasonryGrid } from "../../src"; 7 | import { getPreview } from "../templates/preview"; 8 | import "../templates/default.css"; 9 | import { getApp } from "../templates/ReactJSX"; 10 | 11 | export const MasonryGrid100Template = getApp(MasonryGrid, MasonryGridApp, () => { 12 | return
13 |
1
16 |
2
17 |
3
18 |
4
19 |
5
20 |
6
21 |
7
22 |
8
23 |
9
24 |
10
25 |
; 26 | }); 27 | 28 | 29 | MasonryGrid100Template.storyName = "MasonryGrid with item that place 100% columns"; 30 | MasonryGrid100Template.argTypes = MASONRY_GRID_CONTROLS; 31 | MasonryGrid100Template.args = { ...makeArgs(MasonryGrid100Template.argTypes) }; 32 | 33 | MasonryGrid100Template.parameters = { 34 | preview: getPreview("1-MasonryGrid", "MasonryGrid100", { 35 | vanillaCode: require("!!raw-loader!./apps/VanillaMasonryGridApp").default, 36 | htmlCode: require("!!raw-loader!./templates/VanillaMasonryGrid100.html").default, 37 | }), 38 | }; 39 | 40 | 41 | -------------------------------------------------------------------------------- /stories/1-MasonryGrid/apps/VanillaMasonryGridApp.tsx: -------------------------------------------------------------------------------- 1 | import { MasonryGrid } from "../../../src"; 2 | 3 | export default function App(props: Record) { 4 | const grid = new MasonryGrid(".container", { 5 | defaultDirection: props.defaultDirection, 6 | gap: props.gap, 7 | align: props.align, 8 | column: props.column, 9 | columnSize: props.columnSize, 10 | columnSizeRatio: props.columnSizeRatio, 11 | }); 12 | grid.renderItems(); 13 | 14 | return grid; 15 | } 16 | -------------------------------------------------------------------------------- /stories/1-MasonryGrid/templates/VanillaMasonryGrid100.html: -------------------------------------------------------------------------------- 1 |
2 |
1
3 |
2
4 |
3
5 |
4
6 |
5
7 |
6
8 |
7
9 |
8
10 |
9
11 |
10
12 |
13 | -------------------------------------------------------------------------------- /stories/1-MasonryGrid/templates/VanillaMasonryGridMultiple.html: -------------------------------------------------------------------------------- 1 |
2 |
1
3 |
2
4 |
3
5 |
4
6 |
5
7 |
6
8 |
7
9 |
8
10 |
9
11 |
10
12 |
13 | -------------------------------------------------------------------------------- /stories/2-JustifiedGrid/0-JustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | 3 | export default { 4 | title: "Examples/JustifiedGrid", 5 | }; 6 | export * from "./1-JustifiedGrid.stories"; 7 | export * from "./2-CroppedJustifiedGrid.stories"; 8 | export * from "./3-KeepRatioWithOffset.stories"; 9 | export * from "./4-KeepRatioWithMaintainedTarget.stories"; 10 | export * from "./5-StretchedJustifiedGrid.stories"; 11 | -------------------------------------------------------------------------------- /stories/2-JustifiedGrid/1-JustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import * as React from "react"; 3 | import { makeArgs } from "../utils"; 4 | import JustifiedGridApp from "./apps/VanillaJustifiedGridApp"; 5 | import { JUSTIFIED_GRID_CONTROLS } from "../templates/controls"; 6 | import { JustifiedGrid } from "../../src"; 7 | import { getApp, renderContainer } from "../templates/ReactJSX"; 8 | import "../templates/default.css"; 9 | import { getPreview } from "../templates/preview"; 10 | 11 | export const JustifiedGridTemplate = getApp(JustifiedGrid, JustifiedGridApp, renderContainer); 12 | 13 | 14 | JustifiedGridTemplate.storyName = "JustifiedGrid"; 15 | JustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS; 16 | JustifiedGridTemplate.args = { ...makeArgs(JustifiedGridTemplate.argTypes) }; 17 | 18 | JustifiedGridTemplate.parameters = { 19 | preview: getPreview("2-JustifiedGrid", "JustifiedGrid"), 20 | }; 21 | -------------------------------------------------------------------------------- /stories/2-JustifiedGrid/2-CroppedJustifiedGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import * as React from "react"; 3 | import { makeArgs } from "../utils"; 4 | import JustifiedGridApp from "./apps/VanillaJustifiedGridApp"; 5 | import { CROPPED_JUSTIFIED_GRID_CONTROLS } from "../templates/controls"; 6 | import { JustifiedGrid } from "../../src"; 7 | import { getApp, renderContainer } from "../templates/ReactJSX"; 8 | import "../templates/default.css"; 9 | import { getPreview } from "../templates/preview"; 10 | 11 | export const CroppedJustifiedGridTemplate = getApp(JustifiedGrid, JustifiedGridApp, renderContainer); 12 | 13 | 14 | CroppedJustifiedGridTemplate.storyName = "Cropped JustifiedGrid"; 15 | CroppedJustifiedGridTemplate.argTypes = CROPPED_JUSTIFIED_GRID_CONTROLS; 16 | CroppedJustifiedGridTemplate.args = { ...makeArgs(CroppedJustifiedGridTemplate.argTypes) }; 17 | 18 | CroppedJustifiedGridTemplate.parameters = { 19 | preview: getPreview("2-JustifiedGrid", "JustifiedGrid"), 20 | }; 21 | -------------------------------------------------------------------------------- /stories/2-JustifiedGrid/apps/VanillaJustifiedGridApp.tsx: -------------------------------------------------------------------------------- 1 | import { JustifiedGrid } from "../../../src"; 2 | 3 | export default function App(props: Record) { 4 | const grid = new JustifiedGrid(".container", { 5 | defaultDirection: props.defaultDirection, 6 | gap: props.gap, 7 | rowRange: props.rowRange, 8 | columnRange: props.columnRange, 9 | sizeRange: props.sizeRange, 10 | isCroppedSize: props.isCroppedSize, 11 | displayedRow: props.displayedRow, 12 | stretch: props.stretch, 13 | stretchRange: props.stretchRange, 14 | passUnstretchRow: props.passUnstretchRow, 15 | }); 16 | 17 | grid.renderItems(); 18 | 19 | return grid; 20 | } 21 | -------------------------------------------------------------------------------- /stories/3-FrameGrid/0-FrameGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | 3 | export default { 4 | title: "Examples/FrameGrid", 5 | }; 6 | export * from "./1-FrameGrid.stories"; 7 | -------------------------------------------------------------------------------- /stories/3-FrameGrid/1-FrameGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import * as React from "react"; 3 | import { makeArgs } from "../utils"; 4 | import FrameGridApp from "./apps/VanillaFrameGridApp"; 5 | import { FRAME_GRID_CONTROLS } from "../templates/controls"; 6 | import { FrameGrid } from "../../src"; 7 | import { getApp, renderContainer } from "../templates/ReactJSX"; 8 | import "../templates/default.css"; 9 | import { getPreview } from "../templates/preview"; 10 | 11 | export const FrameGridTemplate = getApp(FrameGrid, FrameGridApp, renderContainer); 12 | 13 | 14 | FrameGridTemplate.storyName = "FrameGrid"; 15 | FrameGridTemplate.argTypes = FRAME_GRID_CONTROLS; 16 | FrameGridTemplate.args = { ...makeArgs(FrameGridTemplate.argTypes) }; 17 | 18 | FrameGridTemplate.parameters = { 19 | preview: getPreview("3-FrameGrid", "FrameGrid"), 20 | }; 21 | -------------------------------------------------------------------------------- /stories/3-FrameGrid/apps/VanillaFrameGridApp.tsx: -------------------------------------------------------------------------------- 1 | import { FrameGrid } from "../../../src"; 2 | 3 | export default function App(props: Record) { 4 | const grid = new FrameGrid(".container", { 5 | defaultDirection: props.defaultDirection, 6 | gap: props.gap, 7 | frame: props.frame, 8 | rectSize: props.rectSize, 9 | useFrameFill: props.useFrameFill, 10 | }); 11 | 12 | grid.renderItems(); 13 | 14 | return grid; 15 | } 16 | -------------------------------------------------------------------------------- /stories/4-PackingGrid/0-PackingGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | 3 | export default { 4 | title: "Examples/PackingGrid", 5 | }; 6 | export * from "./1-PackingGrid.stories"; 7 | -------------------------------------------------------------------------------- /stories/4-PackingGrid/1-PackingGrid.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import * as React from "react"; 3 | import { makeArgs } from "../utils"; 4 | import PackingGridApp from "./apps/VanillaPackingGridApp"; 5 | import { PACKING_GRID_CONTROLS } from "../templates/controls"; 6 | import { PackingGrid } from "../../src"; 7 | import { getApp, renderContainer } from "../templates/ReactJSX"; 8 | import "../templates/default.css"; 9 | import { getPreview } from "../templates/preview"; 10 | 11 | export const PackingGridTemplate = getApp(PackingGrid, PackingGridApp, renderContainer); 12 | 13 | 14 | PackingGridTemplate.storyName = "PackingGrid"; 15 | PackingGridTemplate.argTypes = PACKING_GRID_CONTROLS; 16 | PackingGridTemplate.args = { ...makeArgs(PackingGridTemplate.argTypes) }; 17 | 18 | PackingGridTemplate.parameters = { 19 | preview: getPreview("4-PackingGrid", "PackingGrid"), 20 | }; 21 | -------------------------------------------------------------------------------- /stories/4-PackingGrid/apps/VanillaPackingGridApp.tsx: -------------------------------------------------------------------------------- 1 | import { PackingGrid } from "../../../src"; 2 | 3 | export default function App(props: Record) { 4 | const grid = new PackingGrid(".container", { 5 | defaultDirection: props.defaultDirection, 6 | gap: props.gap, 7 | sizeWeight: props.sizeWeight, 8 | ratioWeight: props.ratioWeight, 9 | aspectRatio: props.aspectRatio, 10 | weightPriority: props.weightPriority, 11 | }); 12 | 13 | grid.renderItems(); 14 | 15 | return grid; 16 | } 17 | -------------------------------------------------------------------------------- /stories/5-MethodsEvents/0-MethodsEvents.stories.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Examples/Use Methods & Events", 3 | }; 4 | 5 | export * from "./1-MethodsEvents.stories"; 6 | -------------------------------------------------------------------------------- /stories/5-MethodsEvents/1-MethodsEvents.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-webpack-loader-syntax */ 2 | import * as React from "react"; 3 | import App from "./apps/VanillaMethodsEventsApp"; 4 | import { MASONRY_GRID_CONTROLS } from "../templates/controls"; 5 | import "../templates/default.css"; 6 | import { getPreview } from "../templates/preview"; 7 | import { makeArgs } from "../utils"; 8 | import { getApp } from "../templates/ReactJSX"; 9 | import { MasonryGrid } from "../../src"; 10 | 11 | export const MethodsEventsTemplate = getApp(MasonryGrid, App, () => { 12 | return
13 |
14 | 15 |
16 |
1
17 |
2
18 |
3
19 |
4
20 |
5
21 |
6
22 |
7
23 |
8
24 |
9
25 |
10
26 |
27 |
; 28 | }); 29 | 30 | MethodsEventsTemplate.storyName = "Use Methods & Events"; 31 | MethodsEventsTemplate.argTypes = MASONRY_GRID_CONTROLS; 32 | MethodsEventsTemplate.args = { 33 | ...makeArgs(MethodsEventsTemplate.argTypes), 34 | }; 35 | 36 | MethodsEventsTemplate.parameters = { 37 | preview: getPreview("5-MethodsEvents", "MethodsEvents", { 38 | htmlCode: require("!!raw-loader!./templates/VanillaMethodsEvents.html").default, 39 | }), 40 | }; 41 | -------------------------------------------------------------------------------- /stories/5-MethodsEvents/apps/VanillaMethodsEventsApp.tsx: -------------------------------------------------------------------------------- 1 | import { MasonryGrid } from "../../../src"; 2 | 3 | export default function App(props: Record) { 4 | const grid = new MasonryGrid(".container", { 5 | defaultDirection: props.defaultDirection, 6 | gap: props.gap, 7 | align: props.align, 8 | column: props.column, 9 | columnSize: props.columnSize, 10 | columnSizeRatio: props.columnSizeRatio, 11 | }); 12 | 13 | grid.on("renderComplete", (e) => { 14 | document.querySelector(".result")!.innerHTML = `updated: ${e.updated.length}`; 15 | }); 16 | 17 | grid.renderItems(); 18 | 19 | document.querySelector(".button")!.addEventListener("click", () => { 20 | const items = grid.getItems(); 21 | 22 | items[1].element!.style.height = "150px"; 23 | grid.updateItems([items[1]]); 24 | }); 25 | 26 | return grid; 27 | } 28 | -------------------------------------------------------------------------------- /stories/5-MethodsEvents/templates/VanillaMethodsEvents.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
Resize Item 2
4 |
5 |
1
6 |
2
7 |
3
8 |
4
9 |
5
10 |
6
11 |
7
12 |
8
13 |
9
14 |
10
15 |
16 |
17 | -------------------------------------------------------------------------------- /stories/templates/ReactJSX.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Grid, { GridFunction } from "../../src"; 3 | 4 | export function renderContainer() { 5 | return
6 |
1
7 |
2
8 |
3
9 |
4
10 |
5
11 |
6
12 |
7
13 |
8
14 |
9
15 |
10
16 |
; 17 | } 18 | 19 | export function getApp( 20 | gridFunc: GridFunction, 21 | appFunc: (props: Record) => Grid, 22 | containerFunc: () => JSX.Element, 23 | ) { 24 | function App(props: Record) { 25 | const gridRef = React.useRef(null); 26 | 27 | React.useEffect(() => { 28 | gridRef.current = appFunc(props); 29 | 30 | return () => { 31 | gridRef.current!.destroy(); 32 | }; 33 | }, []); 34 | 35 | return containerFunc(); 36 | } 37 | 38 | return function render (props: Record) { 39 | return ; 40 | }.bind({}); 41 | } 42 | -------------------------------------------------------------------------------- /stories/templates/default.html: -------------------------------------------------------------------------------- 1 |
2 |
1
3 |
2
4 |
3
5 |
4
6 |
5
7 |
6
8 |
7
9 |
8
10 |
9
11 |
10
12 |
13 | -------------------------------------------------------------------------------- /test/e2e/helper/StorybookHelper.ts: -------------------------------------------------------------------------------- 1 | 2 | function getEventArgs(storyId: string, args: Record) { 3 | return { 4 | "key": "storybook-channel", 5 | "event": { 6 | "type": "updateStoryArgs", 7 | "args": [ 8 | { 9 | "storyId": storyId, 10 | "updatedArgs": args, 11 | }, 12 | ], 13 | }, 14 | }; 15 | } 16 | 17 | 18 | class StorybookHelper extends Helper { 19 | public async updateArgs(storyId: string, args: Record) { 20 | const I = this.helpers.Playwright as CodeceptJS.I; 21 | 22 | const data = JSON.stringify(getEventArgs(storyId, args)); 23 | 24 | await I.executeScript(` 25 | window.postMessage(${"`"}${data}${"`"}); 26 | `); 27 | } 28 | public async waitImageLoaded() { 29 | const I = this.helpers.Playwright as CodeceptJS.I; 30 | await I.executeScript(` 31 | window.isLoaded = false; 32 | 33 | const imgs = document.querySelectorAll("img"); 34 | let loadCount = 0; 35 | let imgsLengh = imgs.length; 36 | 37 | function load() { 38 | setTimeout(() => { 39 | isLoaded = imgsLengh === ++loadCount; 40 | }, 100); 41 | } 42 | imgs.forEach(img => { 43 | if (img.complete) { 44 | load(); 45 | } else { 46 | img.addEventListener("load", () => { 47 | load(); 48 | }, { 49 | once: true, 50 | }); 51 | } 52 | }); 53 | `); 54 | 55 | await I.waitForFunction(() => (window as any).isLoaded, 100); 56 | } 57 | } 58 | 59 | export default StorybookHelper; 60 | module.exports = StorybookHelper; 61 | -------------------------------------------------------------------------------- /test/e2e/steps.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | 4 | type StorybookHelper = typeof import("./helper/StorybookHelper")["default"]["prototype"]; 5 | type HTMLHelper = typeof import("./helper/HTMLHelper")["default"]["prototype"]; 6 | 7 | declare namespace CodeceptJS { 8 | interface SupportObject { I: I } 9 | interface Methods extends Playwright {} 10 | interface I extends WithTranslation, StorybookHelper, HTMLHelper { 11 | } 12 | namespace Translation { 13 | interface Actions {} 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /test/e2e/tests/CroppedJustifiedGrid.e2e.ts: -------------------------------------------------------------------------------- 1 | 2 | import { JustifiedGrid } from "../../../src"; 3 | import { CFCScenario } from "./utils"; 4 | 5 | Feature('Test Cropped JustifiedGrid'); 6 | 7 | const storyId = "examples-justifiedgrid--cropped-justified-grid-template"; 8 | 9 | const { 10 | add, 11 | execute, 12 | } = CFCScenario(storyId, { 13 | gap: 5, 14 | columnRange: [1, 8], 15 | isCroppedSize: true, 16 | sizeRange: [400, 400], 17 | rowRange: [4, 4], 18 | }); 19 | 20 | add("Cropped JustifiedGrid Initialization", async ({ seeJSONDiffWithScreenshot }) => { 21 | seeJSONDiffWithScreenshot("cropped-justifiedgrid-default.json"); 22 | }); 23 | add("test displayedRow", async ({ seeJSONDiffWithScreenshot, updateArgs }) => { 24 | await updateArgs({ displayedRow: 2 }); 25 | seeJSONDiffWithScreenshot("cropped-justifiedgrid-diaplayedRow-2.json"); 26 | }); 27 | 28 | execute(); 29 | -------------------------------------------------------------------------------- /test/e2e/tests/FrameGrid.e2e.ts: -------------------------------------------------------------------------------- 1 | import { FrameGrid } from "../../../src/"; 2 | import { CFCScenario } from "./utils"; 3 | 4 | Feature('Test FrameGrid'); 5 | 6 | const storyId = "examples-framegrid--frame-grid-template"; 7 | 8 | const { 9 | add, 10 | execute, 11 | } = CFCScenario(storyId, { 12 | gap: 5, 13 | frame: [[1,1,2,2],[3,3,2,2],[4,4,4,5]], 14 | rectSize: 0, 15 | useFrameFill: true, 16 | }); 17 | 18 | add("FrameGrid Initialization", async ({ seeJSONDiffWithScreenshot }) => { 19 | seeJSONDiffWithScreenshot("framegrid-default.json"); 20 | }); 21 | [0, 100, { inlineSize: 100, contentSize: 50}].forEach((rectSize) => { 22 | add(`test rectSize: ${rectSize}`, async ({ seeJSONDiffWithScreenshot, updateArgs }) => { 23 | await updateArgs({ rectSize }); 24 | seeJSONDiffWithScreenshot(`framegrid-rectSize-${JSON.stringify(rectSize)}.json`); 25 | }); 26 | }); 27 | [true, false].forEach((useFrameFill) => { 28 | add(`test useFrameFill: ${useFrameFill}`, async ({ seeJSONDiffWithScreenshot, updateArgs }) => { 29 | await updateArgs({ frame: [ 30 | [0, 1, 2, 3], 31 | [4, 0, 0, 0], 32 | ], useFrameFill }); 33 | seeJSONDiffWithScreenshot(`framegrid-useFrameFill-${useFrameFill}.json`); 34 | }); 35 | }); 36 | execute(); 37 | -------------------------------------------------------------------------------- /test/e2e/tests/JustifiedGrid.e2e.ts: -------------------------------------------------------------------------------- 1 | 2 | import { JustifiedGrid } from "../../../src"; 3 | import { CFCScenario } from "./utils"; 4 | 5 | Feature('Test JustifiedGrid'); 6 | 7 | const storyId = "examples-justifiedgrid--justified-grid-template"; 8 | 9 | const { 10 | add, 11 | execute, 12 | } = CFCScenario(storyId, { 13 | gap: 5, 14 | columnRange: [1, 8], 15 | rowRange: 0, 16 | sizeRange: [0, 1000], 17 | }); 18 | 19 | add("JustifiedGrid Initialization", async ({ seeJSONDiffWithScreenshot }) => { 20 | seeJSONDiffWithScreenshot("justifiedgrid-default.json"); 21 | }); 22 | 23 | [[4, 4], [1, 4], [3, 8]].forEach((columnRange) => { 24 | add(`test columnRange: ${columnRange}`, async ({ seeJSONDiffWithScreenshot, updateArgs }) => { 25 | await updateArgs({ columnRange }); 26 | seeJSONDiffWithScreenshot(`justifiedgrid-columnRange-${columnRange.join("_")}.json`); 27 | }); 28 | }); 29 | ([0, [1, 4], [4, 4]] as const).forEach((rowRange) => { 30 | add(`test rowRange: ${rowRange}`, async ({ seeJSONDiffWithScreenshot, updateArgs }) => { 31 | await updateArgs({ rowRange }); 32 | seeJSONDiffWithScreenshot(`justifiedgrid-rowRange-${rowRange ? rowRange.join("_") : "none"}.json`); 33 | }); 34 | }); 35 | [[0, 1000], [600, 800], [700, 1000]].forEach((sizeRange) => { 36 | add(`test sizeRange: ${sizeRange}`, async ({ seeJSONDiffWithScreenshot, updateArgs }) => { 37 | await updateArgs({ sizeRange }); 38 | seeJSONDiffWithScreenshot(`justifiedgrid-sizeRange-${sizeRange.join("_")}.json`); 39 | }); 40 | }); 41 | 42 | execute(); 43 | -------------------------------------------------------------------------------- /test/e2e/tests/KeepRatioWithMaintainedTarget.e2e.ts: -------------------------------------------------------------------------------- 1 | 2 | import { JustifiedGrid } from "../../../src"; 3 | import { CFCScenario } from "./utils"; 4 | 5 | Feature('Test JustifiedGrid KeepRatioWithMaintainedTarget'); 6 | 7 | const storyId = "examples-justifiedgrid--keep-ratio-with-maintained-target-template"; 8 | 9 | const { 10 | add, 11 | execute, 12 | } = CFCScenario(storyId, { 13 | gap: 5, 14 | columnRange: [1, 8], 15 | sizeRange: [300, 400], 16 | rowRange: [4, 4], 17 | }); 18 | 19 | add("JustifiedGrid KeepRatioWithMaintainedTarget Initialization", async ({ seeJSONDiffWithScreenshot, I }) => { 20 | await I.waitImageLoaded(); 21 | seeJSONDiffWithScreenshot("keep-ratio-with-maintained-target-default.json"); 22 | }); 23 | 24 | execute(); 25 | -------------------------------------------------------------------------------- /test/e2e/tests/KeepRatioWithOffset.e2e.ts: -------------------------------------------------------------------------------- 1 | 2 | import { JustifiedGrid } from "../../../src"; 3 | import { CFCScenario } from "./utils"; 4 | 5 | Feature('Test JustifiedGrid KeepRatioWithOffet'); 6 | 7 | const storyId = "examples-justifiedgrid--keep-ratio-with-offset-template"; 8 | 9 | const { 10 | add, 11 | execute, 12 | } = CFCScenario(storyId, { 13 | gap: 5, 14 | columnRange: [1, 8], 15 | sizeRange: [300, 400], 16 | rowRange: [4, 4], 17 | }); 18 | 19 | add("JustifiedGrid KeepRatioWithOffet Initialization", async ({ seeJSONDiffWithScreenshot, I }) => { 20 | await I.waitImageLoaded(); 21 | seeJSONDiffWithScreenshot("keep-ratio-with-offset-default.json"); 22 | }); 23 | 24 | execute(); 25 | -------------------------------------------------------------------------------- /test/e2e/tests/MethodsEvents.e2e.ts: -------------------------------------------------------------------------------- 1 | import { MasonryGrid } from "../../../src"; 2 | import { CFCScenario, wait } from "./utils"; 3 | 4 | Feature('Test Method & Events'); 5 | 6 | const storyId = "examples-use-methods-events--methods-events-template"; 7 | 8 | const { 9 | add, 10 | execute, 11 | } = CFCScenario(storyId, { 12 | gap: 5, 13 | align: "justify", 14 | column: 0, 15 | columnSize: 0, 16 | columnSizeRatio: 0, 17 | }); 18 | 19 | add("Method & Events Initialization", async ({ seeJSONDiffWithScreenshot }) => { 20 | seeJSONDiffWithScreenshot("methods-events-default.json", ".root"); 21 | }); 22 | add("Click Button & Resize Item 2", async ({ seeJSONDiffWithScreenshot, I }) => { 23 | I.click(".button"); 24 | 25 | await wait(50); 26 | seeJSONDiffWithScreenshot("methods-events-click-button.json", ".root"); 27 | }); 28 | 29 | execute(); 30 | -------------------------------------------------------------------------------- /test/e2e/tests/PackingGrid.e2e.ts: -------------------------------------------------------------------------------- 1 | import { PackingGrid } from "../../../src"; 2 | import { CFCScenario } from "./utils"; 3 | 4 | Feature('Test PackingGrid'); 5 | 6 | const storyId = "examples-packinggrid--packing-grid-template"; 7 | 8 | const { 9 | add, 10 | execute, 11 | } = CFCScenario(storyId, { 12 | weightPriority: "custom", 13 | }); 14 | 15 | add("PackingGrid Initialization", async ({ seeJSONDiffWithScreenshot }) => { 16 | seeJSONDiffWithScreenshot("packinggrid-default.json"); 17 | }); 18 | 19 | ["ratio", "size", "custom"].forEach((weightPriority) => { 20 | [0.5, 1, 1.5].forEach((aspectRatio) => { 21 | add(`test weightPriority: ${weightPriority}, aspectRatio: ${aspectRatio}`, async ({ seeJSONDiffWithScreenshot, updateArgs }) => { 22 | await updateArgs({ weightPriority, aspectRatio }); 23 | seeJSONDiffWithScreenshot(`packinggrid-weightPriority-${weightPriority}-aspectRatio-${aspectRatio}.json`); 24 | }); 25 | }); 26 | }); 27 | execute(); 28 | -------------------------------------------------------------------------------- /test/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "ts-node": { 3 | "files": true 4 | }, 5 | "compilerOptions": { 6 | "target": "es2018", 7 | "lib": ["es2018", "DOM"], 8 | "esModuleInterop": true, 9 | "module": "commonjs", 10 | "strictNullChecks": true, 11 | "types": ["codeceptjs"], 12 | "jsx": "react", 13 | "experimentalDecorators": true, 14 | "emitDecoratorMetadata": true, 15 | "baseUrl": ".", 16 | "paths": { 17 | "~/*": ["../../src/*"] 18 | } 19 | }, 20 | "include": [ 21 | "../../src/**/*.ts", 22 | "./**/*.ts" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /test/unit/ResizeWatcher.spec.ts: -------------------------------------------------------------------------------- 1 | import * as sinon from "sinon"; 2 | import { ResizeWatcher } from "../../src"; 3 | import { cleanup, sandbox, waitFor } from "./utils/utils"; 4 | 5 | describe("test ResizeObserver", () => { 6 | let watcher!: ResizeWatcher; 7 | let container!: HTMLElement; 8 | 9 | beforeEach(() => { 10 | const root = sandbox("")!; 11 | root.innerHTML = ` 12 | 19 |
`; 20 | container = document.querySelector(".sample")!; 21 | }); 22 | afterEach(() => { 23 | watcher?.destroy(); 24 | (watcher as any) = null; 25 | (container as any) = null; 26 | cleanup(); 27 | }); 28 | it(`should check if resize works even if there is no resize contentRectSize or blockRectSize in safari 15.3 or less`, async () => { 29 | // Given 30 | watcher = new ResizeWatcher(container); 31 | 32 | const resizeSpy = sinon.spy(); 33 | watcher.listen(resizeSpy); 34 | 35 | // When 36 | // Test like safari 15.3 37 | await waitFor(100); 38 | (watcher as any)._onObserve([ 39 | { 40 | contentRect: { 41 | width: 201, 42 | height: 100, 43 | }, 44 | }, 45 | ]); 46 | 47 | await waitFor(100); 48 | 49 | // Then 50 | expect(resizeSpy.callCount).to.be.equals(1); 51 | expect(resizeSpy.args[0][0].childEntries[0].size.inlineSize).to.be.equals(201); 52 | expect(resizeSpy.args[0][0].childEntries[0].size.blockSize).to.be.equals(100); 53 | }); 54 | }); 55 | -------------------------------------------------------------------------------- /test/unit/samples/SampleGrid.ts: -------------------------------------------------------------------------------- 1 | import Grid, { 2 | GridOptions, 3 | PROPERTY_TYPE, 4 | Properties, 5 | GetterSetter, 6 | GridItem, 7 | } from "../../../src/index"; 8 | 9 | export interface SampleGridOptions extends GridOptions { 10 | renderProperty?: number; 11 | property?: string; 12 | } 13 | 14 | @GetterSetter 15 | export class SampleGrid extends Grid { 16 | public static propertyTypes = { 17 | ...Grid.propertyTypes, 18 | renderProperty: PROPERTY_TYPE.RENDER_PROPERTY, 19 | property: PROPERTY_TYPE.PROPERTY, 20 | }; 21 | public static defaultOptions: Required = { 22 | ...Grid.defaultOptions, 23 | renderProperty: -1, 24 | property: "property1", 25 | }; 26 | 27 | public applyGrid(items: GridItem[], direction: "start" | "end", outline: number[]) { 28 | const startOutline = outline.length ? [...outline] : [0]; 29 | let prevOutline = [...startOutline]; 30 | 31 | if (direction === "end") { 32 | items.forEach((item) => { 33 | const prevPos = prevOutline[0] || 0; 34 | const rect = item.rect; 35 | 36 | 37 | item.setCSSGridRect({ 38 | inlineSize: item.inlineSize, 39 | contentSize: item.contentSize, 40 | contentPos: prevPos, 41 | }); 42 | 43 | prevOutline = [prevPos + (rect?.height ?? 0)]; 44 | }); 45 | } 46 | return { 47 | start: startOutline, 48 | end: prevOutline, 49 | }; 50 | } 51 | } 52 | 53 | export interface SampleGrid extends Properties {} 54 | -------------------------------------------------------------------------------- /test/unit/samples/SampleGridFramework.ts: -------------------------------------------------------------------------------- 1 | import{ 2 | GridMethods, 3 | withGridMethods, 4 | } from "../../../src/index"; 5 | import { SampleGrid } from "./SampleGrid"; 6 | 7 | export class SampleGridFramework { 8 | @withGridMethods 9 | private _grid!: SampleGrid; 10 | 11 | constructor(container: HTMLElement) { 12 | this._grid = new SampleGrid(container); 13 | } 14 | } 15 | 16 | export interface SampleGridFramework extends GridMethods { } 17 | -------------------------------------------------------------------------------- /test/unit/utils/consts.ts: -------------------------------------------------------------------------------- 1 | export const SIZES = [ 2 | [518, 517], 3 | [550, 825], 4 | [640, 640], 5 | [364, 520], 6 | [710, 1020], 7 | [600, 819], 8 | [486, 729], 9 | [544, 784], 10 | [720, 720], 11 | [381, 555], 12 | [521, 775], 13 | ]; 14 | -------------------------------------------------------------------------------- /tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": false, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration", 8 | "strictNullChecks": false, 9 | }, 10 | "include": [ 11 | "./src/**/*.ts", 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "sourceMap": true, 5 | "module": "es2015", 6 | "target": "es5", 7 | "strictNullChecks": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "jsx": "react", 11 | "lib": [ 12 | "es2015", 13 | "dom" 14 | ] 15 | }, 16 | "baseUrl": ".", 17 | "include": [ 18 | "./src/**/*.ts", 19 | "./test/unit/**/*.ts", 20 | "./stories/**/*.ts", 21 | "./global.d.ts" 22 | ], 23 | "exclude": [ 24 | "node_modules" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "noImplicitAny": false, 6 | "strictNullChecks": false, 7 | "types": [ 8 | "karma-chai", 9 | "mocha", 10 | ] 11 | }, 12 | "include": [ 13 | "./src/**/*.ts", 14 | "./test/unit/**/*.ts" 15 | ], 16 | "exclude": [ 17 | "./node_modules/**/*.ts" 18 | ] 19 | } 20 | --------------------------------------------------------------------------------