├── .gitattributes ├── dist ├── keystone6-document-gallery-block.cjs.d.ts ├── keystone6-document-gallery-block.cjs.js ├── declarations │ └── src │ │ ├── views │ │ ├── drawer.d.ts │ │ └── index.d.ts │ │ └── index.d.ts ├── keystone6-document-gallery-block.esm.js ├── keystone6-document-gallery-block.cjs.dev.js └── keystone6-document-gallery-block.cjs.prod.js ├── babel.config.js ├── tsconfig.json ├── LICENSE ├── package.json ├── README.md ├── .gitignore └── src ├── index.tsx └── views ├── index.tsx └── drawer.tsx /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /dist/keystone6-document-gallery-block.cjs.d.ts: -------------------------------------------------------------------------------- 1 | export * from "./declarations/src/index"; 2 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | "@babel/preset-env", 4 | "@babel/preset-react", 5 | "@babel/preset-typescript" 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react", 4 | "isolatedModules": true, 5 | "esModuleInterop": true 6 | }, 7 | "include": ["**/*"], 8 | "exclude": ["**/node_modules/**/*"] 9 | } -------------------------------------------------------------------------------- /dist/keystone6-document-gallery-block.cjs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | if (process.env.NODE_ENV === "production") { 4 | module.exports = require("./keystone6-document-gallery-block.cjs.prod.js"); 5 | } else { 6 | module.exports = require("./keystone6-document-gallery-block.cjs.dev.js"); 7 | } 8 | -------------------------------------------------------------------------------- /dist/declarations/src/views/drawer.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsxRuntime classic */ 2 | /** @jsx jsx */ 3 | import { jsx } from "@keystone-ui/core"; 4 | import { GalleryItem as GalleryItemType } from "../"; 5 | export default function GalleryDrawer({ listKey, isOpen, onCancel, onChange, }: { 6 | listKey: string; 7 | isOpen: boolean; 8 | onCancel(): void; 9 | onChange(items: GalleryItemType[]): void; 10 | }): jsx.JSX.Element; 11 | -------------------------------------------------------------------------------- /dist/declarations/src/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FormField } from "@keystone-6/fields-document/component-blocks"; 2 | export declare type ImageData = { 3 | height: number; 4 | width: number; 5 | filesize: number; 6 | extension: string; 7 | id: string; 8 | url: string; 9 | }; 10 | export declare type GalleryItem = { 11 | id: string; 12 | name: string; 13 | image: ImageData; 14 | }; 15 | export declare const gallery: ({ listKey }: { 16 | listKey: string; 17 | }) => import("@keystone-6/fields-document/component-blocks").ComponentBlock<{ 18 | items: FormField; 19 | capture: import("@keystone-6/fields-document/component-blocks").ChildField; 20 | }>; 21 | -------------------------------------------------------------------------------- /dist/declarations/src/views/index.d.ts: -------------------------------------------------------------------------------- 1 | /** @jsxRuntime classic */ 2 | /** @jsx jsx */ 3 | import { jsx } from "@keystone-ui/core"; 4 | import { GalleryItem as GalleryItemFields } from "../"; 5 | export declare const GalleryItem: ({ onClick, onRemove, item, checked, }: { 6 | onClick?(value: GalleryItemFields): void; 7 | onRemove?(value: GalleryItemFields): void; 8 | item: GalleryItemFields; 9 | checked?: boolean; 10 | }) => jsx.JSX.Element; 11 | export declare const GalleryItemPlaceholder: ({ children, onClick }: { 12 | children?: any; 13 | onClick?(): void; 14 | }) => jsx.JSX.Element; 15 | export declare const GalleryItemsWrapper: ({ children }: { 16 | children: any; 17 | }) => jsx.JSX.Element; 18 | export declare const Gallery: ({ listKey, value, onChange, }: { 19 | listKey: string; 20 | value: GalleryItemFields[]; 21 | onChange(value: GalleryItemFields[]): void; 22 | }) => jsx.JSX.Element; 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Dima 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "keystone6-document-gallery-block", 3 | "version": "1.0.1", 4 | "license": "MIT", 5 | "author": "jutiss", 6 | "main": "dist/keystone6-document-gallery-block.cjs.js", 7 | "module": "dist/keystone6-document-gallery-block.esm.js", 8 | "keywords": [ 9 | "keystone6", 10 | "gallery", 11 | "image-library" 12 | ], 13 | "scripts": { 14 | "build": "preconstruct build" 15 | }, 16 | "devDependencies": { 17 | "@preconstruct/cli": "^2.1.5" 18 | }, 19 | "dependencies": { 20 | "@babel/preset-env": "^7.16.4", 21 | "@babel/preset-react": "^7.16.0", 22 | "@babel/preset-typescript": "^7.16.0", 23 | "@keystone-6/core": "^1.0.0", 24 | "@keystone-ui/button": "^6.0.0", 25 | "@keystone-ui/core": "^4.0.0", 26 | "@keystone-ui/fields": "^6.0.0", 27 | "@keystone-ui/loading": "^5.0.0", 28 | "@keystone-ui/modals": "^4.0.2", 29 | "@keystone-ui/toast": "^4.0.4", 30 | "@keystone-6/fields-document": "^1.0.0", 31 | "react": "^17.0.2", 32 | "typescript": "^4.4.3" 33 | }, 34 | "engines": { 35 | "node": "^12.20 || >= 14.13" 36 | }, 37 | "bugs": { 38 | "url": "https://github.com/jutiss/keystone6-document-gallery-block/issues" 39 | }, 40 | "homepage": "https://github.com/jutiss/keystone6-document-gallery-block" 41 | } 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Keystone 6 Document Gallery Block 2 | 3 | Manage and upload your post images with a gallery block for powerful [Keystone's Document Editor](https://keystonejs.com/docs/guides/document-field-demo)! 4 | 5 | ![Demonstration](https://i.imgur.com/DNrVcXs.gif) 6 | ## Installation 7 | 8 | Install the yarn package: 9 | 10 | ```bash 11 | yarn add keystone6-document-gallery-block 12 | ``` 13 | 14 | ## Usage 15 | 16 | Make sure you [configure image uploading](https://keystonejs.com/docs/apis/config#images) in keystone.ts config, otherwise it will not work: 17 | 18 | ```bash 19 | images: { 20 | upload: 'local', 21 | local: { 22 | storagePath: 'public/images', 23 | baseUrl: '/images', 24 | }, 25 | } 26 | ``` 27 | 28 | Add a new list to your schema (you can set your own list key, if needed): 29 | 30 | ```bash 31 | Image: list({ 32 | fields: { 33 | name: text(), 34 | image: image(), 35 | publishDate: timestamp(), 36 | } 37 | }) 38 | ``` 39 | 40 | Create **component-blocks.tsx** in your root directory and import the gallery block (don't forget to change **listKey**, if it is different): 41 | 42 | ```bash 43 | import { gallery } from "keystone6-document-gallery-block"; 44 | 45 | // naming the export componentBlocks is important because the Admin UI 46 | // expects to find the components like on the componentBlocks export 47 | export const componentBlocks = { 48 | gallery: gallery({ 49 | listKey: "Image", 50 | }), 51 | }; 52 | ``` 53 | 54 | Import the file in schema.ts: 55 | 56 | ```bash 57 | import { componentBlocks } from './component-blocks'; 58 | ``` 59 | 60 | Add the component blocks to the document configuration for the list that you want (e.g. Post): 61 | 62 | ```bash 63 | Post: list({ 64 | ... 65 | content: document({ 66 | ui: { 67 | views: require.resolve('./component-blocks') 68 | }, 69 | componentBlocks 70 | }) 71 | }), 72 | ``` 73 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | 84 | # Gatsby files 85 | .cache/ 86 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 87 | # https://nextjs.org/blog/next-9-1#public-directory-support 88 | # public 89 | 90 | # vuepress build output 91 | .vuepress/dist 92 | 93 | # Serverless directories 94 | .serverless/ 95 | 96 | # FuseBox cache 97 | .fusebox/ 98 | 99 | # DynamoDB Local files 100 | .dynamodb/ 101 | 102 | # TernJS port file 103 | .tern-port 104 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | NotEditable, 4 | component, 5 | fields, 6 | FormField, 7 | } from "@keystone-6/fields-document/component-blocks"; 8 | 9 | import { FieldContainer } from "@keystone-ui/fields"; 10 | import { 11 | Gallery, 12 | GalleryItem, 13 | GalleryItemsWrapper, 14 | GalleryItemPlaceholder, 15 | } from "./views"; 16 | 17 | export type ImageData = { 18 | height: number; 19 | width: number; 20 | filesize: number; 21 | extension: string; 22 | id: string; 23 | url: string; 24 | }; 25 | 26 | export type GalleryItem = { 27 | id: string; 28 | name: string; 29 | image: ImageData; 30 | }; 31 | 32 | const customFields = { 33 | gallery