@rulab/adminjs-components 0.0.13 → 0.1.0-alpha.2

package/dist/components/StringList/SortableList/components/SortableItem/SortableItem.jsx

@@ -1,32 +0,0 @@
-import React, { createContext, useMemo } from 'react';
-import { useSortable } from '@dnd-kit/sortable';
-import { Button, Icon } from '@adminjs/design-system';
-import { DragHandle } from './DragHandle.js';
-import { StyledListItem } from './styles.js';
-const SortableItemContext = createContext({
-    attributes: {},
-    listeners: undefined,
-    ref() { },
-});
-export function SortableItem({ children, id, onDelete, }) {
-    const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } = useSortable({ id });
-    const context = useMemo(() => ({
-        attributes,
-        listeners,
-        ref: setActivatorNodeRef,
-    }), [attributes, listeners, setActivatorNodeRef]);
-    const style = {
-        opacity: isDragging ? 0.4 : undefined,
-    };
-    return (<SortableItemContext.Provider value={context}>
-      <StyledListItem ref={setNodeRef} style={style}>
-        <div>
-          <DragHandle context={SortableItemContext}/>
-          {children}
-        </div>
-        <Button variant="outlined" color="danger" size="icon" onClick={(e) => onDelete(e, id)}>
-          <Icon icon="X" color="red"/>
-        </Button>
-      </StyledListItem>
-    </SortableItemContext.Provider>);
-}

package/dist/components/StringList/SortableList/components/SortableItem/styles.js

@@ -1,20 +0,0 @@
-import { styled } from '@adminjs/design-system/styled-components';
-export const StyledListItem = styled.li `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #fff;
-  padding: 10px 20px 10px 15px;
-  box-shadow:
-    0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
-    0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-  border-radius: 5px;
-  list-style: none;
-`;
-export const DragButton = styled.button `
-  padding: 3px;
-  margin-right: 15px;
-  cursor: move;
-  background: none;
-  border: none;
-`;

package/dist/components/StringList/SortableList/components/SortableItem/types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/StringList/SortableList/components/index.js

@@ -1,2 +0,0 @@
-export { SortableItem } from './SortableItem/SortableItem.js';
-export { DragHandle } from './SortableItem/DragHandle.js';

package/dist/components/StringList/SortableList/index.js

@@ -1 +0,0 @@
-export { SortableList } from './SortableList.js';

package/dist/components/StringList/SortableList/styles.js

@@ -1,8 +0,0 @@
-import { styled } from '@adminjs/design-system/styled-components';
-export const StyledListWrapper = styled.ul `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0;
-  list-style: none;
-`;

package/dist/components/StringList/StringList.jsx

@@ -1,67 +0,0 @@
-import React, { useState, useEffect, } from "react";
-import { ThemeProvider } from "styled-components";
-import { theme, Button, Input, Label } from "@adminjs/design-system";
-import { StyledWrapper, StyledCustomInput, StyledListWrapper, StyledInputWrapper, } from "./styles.js";
-import { SortableList } from "./SortableList/SortableList.js";
-const StringList = ({ record, onChange, property }) => {
-    const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
-    const initialList = stringListValue
-        ? prepareDataForList(stringListValue)
-        : [];
-    const [inputValue, setInputValue] = useState("");
-    const [list, setList] = useState(initialList);
-    const serializedData = prepareDataForDatabase(list);
-    useEffect(() => {
-        onChange(property.path, serializedData);
-    }, [serializedData]);
-    return (<ThemeProvider theme={theme}>
-      <Label htmlFor="custom">String List</Label>
-      <StyledWrapper>
-        <StyledListWrapper>
-          <SortableList items={list} onChange={setList} renderItem={(item) => (<SortableList.Item id={item.id} onDelete={handleDeleteButton}>
-                {item.value}
-              </SortableList.Item>)}/>
-        </StyledListWrapper>
-        <StyledInputWrapper>
-          <Input id="stringList" name={property.path} value={serializedData} hidden/>
-          <StyledCustomInput id="custom" name="customInput" value={inputValue} onChange={handleInput} onKeyPress={handleEnterPress}/>
-          <Button variant="outlined" onClick={handleAddButton}>
-            Add
-          </Button>
-        </StyledInputWrapper>
-      </StyledWrapper>
-    </ThemeProvider>);
-    function handleInput(e) {
-        setInputValue(e.target.value);
-    }
-    function handleEnterPress(e) {
-        if (e.key === "Enter") {
-            handleAddButton(e);
-        }
-    }
-    function handleAddButton(e) {
-        e.preventDefault();
-        if (Boolean(inputValue)) {
-            setList([...list, createListObject(inputValue)]);
-            setInputValue("");
-        }
-    }
-    function handleDeleteButton(e, id) {
-        e.preventDefault();
-        const newData = list.filter((item) => item.id !== id);
-        setList(newData);
-    }
-    function prepareDataForDatabase(list) {
-        return list.map(({ value }) => value).join("|");
-    }
-    function prepareDataForList(str) {
-        return str.split("|").map((item) => createListObject(item));
-    }
-    function createListObject(value) {
-        return {
-            id: `${Date.now()}-${Math.floor(Math.random() * 1000)}`,
-            value: value,
-        };
-    }
-};
-export default StringList;

package/dist/components/StringList/index.js

@@ -1 +0,0 @@
-export { default } from "./StringList.js";

package/dist/components/StringList/styles.js

@@ -1,16 +0,0 @@
-import { styled } from "@adminjs/design-system/styled-components";
-import { Box, Input } from "@adminjs/design-system";
-export const StyledWrapper = styled(Box) `
-  display: flex;
-  flex-direction: column;
-`;
-export const StyledCustomInput = styled(Input) `
-  width: 100%;
-  margin-right: 10px;
-`;
-export const StyledInputWrapper = styled(Box) `
-  display: flex;
-`;
-export const StyledListWrapper = styled(Box) `
-  margin-bottom: 15px;
-`;

package/dist/components/index.js

@@ -1,3 +0,0 @@
-export { default as CustomSlug } from "./CustomSlug/CustomSlug.js";
-export { default as StringList } from "./StringList/StringList.js";
-export { default as Editor } from "./Editor";

package/dist/editorFeature.js

@@ -1,16 +0,0 @@
-import { buildFeature, } from "adminjs";
-import bundleComponent from "./bundle.js";
-const editorFeature = (options) => {
-    const { componentLoader, name } = options;
-    const editComponent = bundleComponent(componentLoader, "Editor");
-    return buildFeature({
-        properties: {
-            [name]: {
-                components: {
-                    edit: editComponent,
-                },
-            },
-        },
-    });
-};
-export default editorFeature;

package/dist/index.d.mts

@@ -1,8 +0,0 @@
-import { FeatureType, ComponentLoader } from 'adminjs';
-
-type EditorOptions = {
-    componentLoader: ComponentLoader;
-};
-declare const editorFeature: (options: EditorOptions) => FeatureType;
-
-export { editorFeature as default, editorFeature };

package/dist/index.mjs

@@ -1,37 +0,0 @@
-// src/features/editorFeature.ts
-import {
-  buildFeature
-} from "adminjs";
-
-// src/bundle.ts
-import path from "path";
-import * as url from "url";
-var __dirname = url.fileURLToPath(new URL(".", import.meta.url));
-var bundle = (loader, componentName) => {
-  const componentPath = path.join(__dirname, `./components/${componentName}`);
-  return loader.add(componentName, componentPath);
-};
-var bundle_default = bundle;
-
-// src/features/editorFeature.ts
-var editorFeature = (options) => {
-  const { componentLoader } = options;
-  const editComponent = bundle_default(componentLoader, "Editor");
-  return buildFeature({
-    properties: {
-      editor: {
-        components: {
-          edit: editComponent
-        }
-      }
-    }
-  });
-};
-var editorFeature_default = editorFeature;
-
-// src/index.ts
-var src_default = editorFeature_default;
-export {
-  src_default as default,
-  editorFeature_default as editorFeature
-};

package/dist/utils/index.js

@@ -1 +0,0 @@
-export { slugifyTitle } from "./slugifyTitle.js";

package/dist/utils/slugifyImport.js

@@ -1,3 +0,0 @@
-// This is a fix of typescript module import error
-import * as slugify from "slugify";
-export default slugify;

package/dist/utils/slugifyTitle.js

@@ -1,10 +0,0 @@
-import * as slugify from "slugify";
-export const slugifyTitle = (title) => {
-    return slugify.default(title, {
-        replacement: "-",
-        remove: undefined,
-        lower: true,
-        locale: "vi",
-        trim: true,
-    });
-};

package/src/components/CustomSlug/index.ts

@@ -1 +0,0 @@
-export { default } from "./CustomSlug.js";

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from "./components/index.js";
-export { parseHtml } from "./utils/parseHtml.js";

package/src/types.d.ts

@@ -1,3 +0,0 @@
-declare module "@editorjs/header";
-declare module "@editorjs/paragraph";
-declare module "@editorjs/list";

package/src/utils/index.ts

@@ -1,3 +0,0 @@
-export { parseHtml } from "./parseHtml.js";
-export { slugifyTitle } from "./slugifyTitle.js";
-

package/src/utils/parseHtml.ts

@@ -1,56 +0,0 @@
-import edjsHTML from "editorjs-html";
-
-type TableBlockType = {
-  type: "table";
-  data: {
-    content: string[][];
-    withHeadings: boolean;
-  };
-};
-
-type AudioPlayerBlockType = {
-  type: "audioPlayer";
-  data: {
-    src: string;
-  };
-};
-
-const tableParser = (block: TableBlockType) => {
-  const rows = block.data.content.map((row, index) => {
-    const tableHtml = [];
-    if (block.data.withHeadings && index === 0) {
-      tableHtml.push(`<tr>${row.map((cell) => `<th>${cell}</th>`)}</tr>`);
-    } else {
-      tableHtml.push(`<tr>${row.map((cell) => `<td>${cell}</td>`)}</tr>`);
-    }
-
-    return tableHtml;
-  });
-
-  if (block.data.withHeadings) {
-    const heading = rows[0] as string[];
-    const [, ...content] = rows;
-
-    return `<table><thead>${heading.join("")}</thead><tbody>${content.join("")}</tbody></table>`;
-  } else {
-    return `<table><tbody>${rows.join("")}</tbody></table>`;
-  }
-};
-
-const audioPlayerParser = (block: AudioPlayerBlockType) => {
-  return `<audio controls src={${block.data.src}} />`;
-};
-
-export const parseHtml = (jsonData: string) => {
-  const edjsParser = edjsHTML({
-    table: tableParser,
-    audioPlayer: audioPlayerParser,
-  });
-
-  try {
-    const data = edjsParser.parse(JSON.parse(jsonData));
-    return String(data).replace(/>,</g, "><");
-  } catch (e) {
-    console.log("error", e);
-  }
-};

package/src/utils/slugifyImport.ts

@@ -1,4 +0,0 @@
-// This is a fix of typescript module import error
-import slugify from "slugify";
-
-export default slugify as unknown as typeof slugify.default;

package/src/utils/slugifyTitle.ts

@@ -1,11 +0,0 @@
-import slugify from "./slugifyImport.js";
-
-export const slugifyTitle = (title: string) => {
-  return slugify(title, {
-    replacement: "-",
-    remove: /[*+~.()'"!:@]/g,
-    lower: true,
-    locale: "vi",
-    trim: true,
-  });
-};

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "target": "es2022",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "moduleDetection": "force",
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "moduleResolution": "Bundler",
-    "module": "ESNext",
-    "lib": ["es2022", "dom", "dom.iterable"],
-    "jsx": "react",
-    "noEmit": true
-  }
-}