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

package/src/components/StringList/StringList.tsx

@@ -1,136 +1,136 @@
-import { Button, Input, theme } from "@adminjs/design-system";
-import { EditPropertyProps } from "adminjs";
-import React, {
-  ChangeEvent,
-  FC,
-  KeyboardEvent,
-  SyntheticEvent,
-  useEffect,
-  useState,
-} from "react";
-import { ThemeProvider } from "styled-components";
-
-import {
-  StyledCustomInput,
-  StyledInputWrapper,
-  StyledLabel,
-  StyledListWrapper,
-  StyledWrapper,
-} from "./styles.js";
-
-import { SortableList } from "./SortableList/SortableList.js";
-import { separator } from "./constants.js";
-
-type ListDataTypes = {
-  id: string;
-  value: string;
-};
-
-type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
-
-interface StringListShowPropsType extends StringListTypes {
-  stringListSeparator?: string;
-}
-
-const StringList: FC<StringListShowPropsType> = ({
-  record,
-  onChange,
-  property,
-  stringListSeparator = separator,
-}) => {
-  const stringListValue =
-    record.params?.[property.path] ?? property.props.value ?? "";
-
-  const initialList = stringListValue
-    ? prepareDataForList(stringListValue)
-    : [];
-
-  const [inputValue, setInputValue] = useState("");
-  const [list, setList] = useState<ListDataTypes[]>(initialList);
-
-  const serializedData = prepareDataForDatabase(list);
-
-  useEffect(() => {
-    onChange(property.path, serializedData);
-  }, [serializedData]);
-
-  return (
-    <ThemeProvider theme={theme}>
-      <StyledLabel htmlFor="custom">{property.path}</StyledLabel>
-      <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: ChangeEvent<HTMLInputElement>) {
-    setInputValue(e.target.value);
-  }
-
-  function handleEnterPress(e: KeyboardEvent<HTMLInputElement>) {
-    if (e.key === "Enter") {
-      handleAddButton(e);
-    }
-  }
-
-  function handleAddButton(e: SyntheticEvent<HTMLInputElement>) {
-    e.preventDefault();
-
-    if (Boolean(inputValue)) {
-      setList([...list, createListObject(inputValue)]);
-
-      setInputValue("");
-    }
-  }
-
-  function handleDeleteButton(e: ChangeEvent<HTMLInputElement>, id: string) {
-    e.preventDefault();
-    const newData = list.filter((item: ListDataTypes) => item.id !== id);
-    setList(newData);
-  }
-
-  function prepareDataForDatabase(list: ListDataTypes[]) {
-    return list.map(({ value }) => value).join(stringListSeparator);
-  }
-
-  function prepareDataForList(str: string) {
-    return str.split(stringListSeparator).map((item) => createListObject(item));
-  }
-
-  function createListObject(value: string) {
-    return {
-      id: `${Date.now()}-${Math.floor(Math.random() * 1000)}`,
-      value: value,
-    };
-  }
-};
-
-export default StringList;
+import { Button, Input, theme } from "@adminjs/design-system";
+import { EditPropertyProps } from "adminjs";
+import React, {
+  ChangeEvent,
+  FC,
+  KeyboardEvent,
+  SyntheticEvent,
+  useEffect,
+  useState,
+} from "react";
+import { ThemeProvider } from "styled-components";
+
+import {
+  StyledCustomInput,
+  StyledInputWrapper,
+  StyledLabel,
+  StyledListWrapper,
+  StyledWrapper,
+} from "./styles.js";
+
+import { SortableList } from "./SortableList/SortableList.js";
+import { separator } from "./constants.js";
+
+type ListDataTypes = {
+  id: string;
+  value: string;
+};
+
+type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
+
+interface StringListShowPropsType extends StringListTypes {
+  stringListSeparator?: string;
+}
+
+const StringList: FC<StringListShowPropsType> = ({
+  record,
+  onChange,
+  property,
+  stringListSeparator = separator,
+}) => {
+  const stringListValue =
+    record.params?.[property.path] ?? property.props.value ?? "";
+
+  const initialList = stringListValue
+    ? prepareDataForList(stringListValue)
+    : [];
+
+  const [inputValue, setInputValue] = useState("");
+  const [list, setList] = useState<ListDataTypes[]>(initialList);
+
+  const serializedData = prepareDataForDatabase(list);
+
+  useEffect(() => {
+    onChange(property.path, serializedData);
+  }, [serializedData]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <StyledLabel htmlFor="custom">{property.path}</StyledLabel>
+      <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: ChangeEvent<HTMLInputElement>) {
+    setInputValue(e.target.value);
+  }
+
+  function handleEnterPress(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      handleAddButton(e);
+    }
+  }
+
+  function handleAddButton(e: SyntheticEvent<HTMLInputElement>) {
+    e.preventDefault();
+
+    if (Boolean(inputValue)) {
+      setList([...list, createListObject(inputValue)]);
+
+      setInputValue("");
+    }
+  }
+
+  function handleDeleteButton(e: ChangeEvent<HTMLInputElement>, id: string) {
+    e.preventDefault();
+    const newData = list.filter((item: ListDataTypes) => item.id !== id);
+    setList(newData);
+  }
+
+  function prepareDataForDatabase(list: ListDataTypes[]) {
+    return list.map(({ value }) => value).join(stringListSeparator);
+  }
+
+  function prepareDataForList(str: string) {
+    return str.split(stringListSeparator).map((item) => createListObject(item));
+  }
+
+  function createListObject(value: string) {
+    return {
+      id: `${Date.now()}-${Math.floor(Math.random() * 1000)}`,
+      value: value,
+    };
+  }
+};
+
+export default StringList;

package/src/components/StringList/StringListShow.tsx

@@ -1,37 +1,37 @@
-import React, { memo, useState, useEffect, useRef, FC } from "react";
-import { ShowPropertyProps } from "adminjs";
-
-import { ThemeProvider } from "styled-components";
-import { theme } from "@adminjs/design-system";
-
-import { StyledShowLabel, StyledShowWrapper, StyledListItem } from "./styles";
-import { separator } from "./constants";
-
-interface StringListShowPropsType extends ShowPropertyProps {
-  stringListSeparator?: string;
-}
-
-const StringListShow: FC<StringListShowPropsType> = ({
-  property,
-  record,
-  stringListSeparator = separator,
-}) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <StyledShowWrapper>
-        <StyledShowLabel>{property.path}</StyledShowLabel>
-        {record.params.facts && (
-          <ul>
-            {record.params.facts
-              .split(stringListSeparator)
-              .map((item: string, index: number) => (
-                <StyledListItem key={index}>{`- ${item}`}</StyledListItem>
-              ))}
-          </ul>
-        )}
-      </StyledShowWrapper>
-    </ThemeProvider>
-  );
-};
-
-export default StringListShow;
+import React, { memo, useState, useEffect, useRef, FC } from "react";
+import { ShowPropertyProps } from "adminjs";
+
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+
+import { StyledShowLabel, StyledShowWrapper, StyledListItem } from "./styles";
+import { separator } from "./constants";
+
+interface StringListShowPropsType extends ShowPropertyProps {
+  stringListSeparator?: string;
+}
+
+const StringListShow: FC<StringListShowPropsType> = ({
+  property,
+  record,
+  stringListSeparator = separator,
+}) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <StyledShowWrapper>
+        <StyledShowLabel>{property.path}</StyledShowLabel>
+        {record.params.facts && (
+          <ul>
+            {record.params.facts
+              .split(stringListSeparator)
+              .map((item: string, index: number) => (
+                <StyledListItem key={index}>{`- ${item}`}</StyledListItem>
+              ))}
+          </ul>
+        )}
+      </StyledShowWrapper>
+    </ThemeProvider>
+  );
+};
+
+export default StringListShow;

package/src/components/StringList/constants.ts

@@ -1 +1 @@
-export const separator = "|";
+export const separator = "|";

package/src/components/StringList/index.ts

@@ -1,2 +1,2 @@
-export * from "./StringList.js";
-export * from "./StringListShow.js";
+export * from "./StringList.js";
+export * from "./StringListShow.js";

package/src/components/StringList/styles.ts

@@ -1,41 +1,41 @@
-import { Box, Input } from "@adminjs/design-system";
-import { styled } from "@adminjs/design-system/styled-components";
-
-export const StyledWrapper = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 45px;
-`;
-
-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;
-`;
-
-export const StyledLabel = styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-
-export const StyledShowLabel = styled(StyledLabel)`
-  line-height: 16px;
-  color: rgb(137, 138, 154);
-  font-weight: 300;
-`;
-
-export const StyledShowWrapper = styled(Box)`
-  margin-bottom: 35px;
-`;
-
-export const StyledListItem = styled.li`
-  margin-bottom: 5px;
-`;
+import { Box, Input } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
+
+export const StyledWrapper = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 45px;
+`;
+
+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;
+`;
+
+export const StyledLabel = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;
+
+export const StyledShowLabel = styled(StyledLabel)`
+  line-height: 16px;
+  color: rgb(137, 138, 154);
+  font-weight: 300;
+`;
+
+export const StyledShowWrapper = styled(Box)`
+  margin-bottom: 35px;
+`;
+
+export const StyledListItem = styled.li`
+  margin-bottom: 5px;
+`;

package/src/components/index.ts

@@ -1,9 +1,10 @@
-export { default as ColorStatusEdit } from "./ColorStatus/ColorStatusEdit.jsx";
-export { default as ColorStatusShow } from "./ColorStatus/ColorStatusShow.js";
-export { default as ColorStatusList } from "./ColorStatus/ColorStatusList.js";
-export { default as CustomSlug } from "./CustomSlug/CustomSlug.js";
-export { default as Editor } from "./Editor/Editor.jsx";
-export { default as EditorList } from "./Editor/EditorList.jsx";
-export { default as EditorShow } from "./Editor/EditorShow.jsx";
-export { default as StringList } from "./StringList/StringList.js";
-export { default as StringListShow } from "./StringList/StringListShow.js";
+export { default as ColorStatusEdit } from "./ColorStatus/ColorStatusEdit.jsx";
+export { default as ColorStatusShow } from "./ColorStatus/ColorStatusShow.js";
+export { default as ColorStatusList } from "./ColorStatus/ColorStatusList.js";
+export { default as SlugEdit } from "./Slug/SlugEdit.js";
+//export { default as Editor } from "./Editor/Editor.jsx";
+//export { default as EditorList } from "./Editor/EditorList.jsx";
+//export { default as EditorShow } from "./Editor/EditorShow.jsx";
+export { default as StringList } from "./StringList/StringList.js";
+export { default as StringListShow } from "./StringList/StringListShow.js";
+export { default as SlugFeature} from "./Slug/SlugFeature.js"

package/dist/bundle.js

@@ -1,8 +0,0 @@
-import path from "path";
-import * as url from "url";
-const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
-const bundleComponent = (loader, componentName) => {
-    const componentPath = path.join(__dirname, `./components/${componentName}`);
-    return loader.add(componentName, componentPath);
-};
-export default bundleComponent;

package/dist/components/CustomSlug/CustomSlug.jsx

@@ -1,29 +0,0 @@
-import React, { useEffect, useState, } from "react";
-import { ThemeProvider } from "styled-components";
-import { theme, Label } from "@adminjs/design-system";
-import { slugifyTitle } from "../../utils/index.js";
-import { StyledInputWrapper, StyledCustomInput, StyledGenerateButton, } from "./styles.js";
-const CustomSlug = ({ property, record, onChange }) => {
-    const [inputValue, setInputValue] = useState(record.params.slug);
-    useEffect(() => {
-        onChange(property.path, inputValue);
-    }, [inputValue]);
-    return (<ThemeProvider theme={theme}>
-      <Label htmlFor="customSlug">Slug</Label>
-      <StyledInputWrapper>
-        <StyledCustomInput id={property.path} name={property.path} value={inputValue} onChange={handleInput}/>
-        <StyledGenerateButton variant="outlined" onClick={generateSlug}>
-          Generate Slug
-        </StyledGenerateButton>
-      </StyledInputWrapper>
-    </ThemeProvider>);
-    function handleInput(e) {
-        setInputValue(e.target.value);
-    }
-    function generateSlug(e) {
-        e.preventDefault();
-        const title = record.title;
-        setInputValue(slugifyTitle(title));
-    }
-};
-export default CustomSlug;

package/dist/components/CustomSlug/index.js

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

package/dist/components/CustomSlug/styles.js

@@ -1,15 +0,0 @@
-// @ts-ignore
-import { styled } from "@adminjs/design-system/styled-components";
-// @ts-ignore
-import { Button, Box, Input } from "@adminjs/design-system";
-export const StyledInputWrapper = styled(Box) `
-  display: flex;
-  margin-bottom: 40px;
-`;
-export const StyledCustomInput = styled(Input) `
-  width: 100%;
-  margin-right: 10px;
-`;
-export const StyledGenerateButton = styled(Button) `
-  white-space: nowrap;
-`;

package/dist/components/Editor/config.js

@@ -1,11 +0,0 @@
-import Header from "@editorjs/header";
-import Paragraph from "@editorjs/paragraph";
-import List from "@editorjs/list";
-export const EDITOR_TOOLS = {
-    paragraph: {
-        class: Paragraph,
-        inlineToolbar: true,
-    },
-    list: List,
-    header: Header,
-};

package/dist/components/Editor/index.js

@@ -1 +0,0 @@
-export { default } from "./Editor.jsx";

package/dist/components/Editor/styles.js

@@ -1,64 +0,0 @@
-import { Box } from "@adminjs/design-system";
-import { styled } from "@adminjs/design-system/styled-components";
-export const Label = styled.div `
-  font-size: 12px;
-  margin-bottom: 8px;
-`;
-export const EditorWrapper = styled(Box) `
-  padding: 12px;
-  border: 1px solid rgb(187, 195, 203);
-`;
-export const StyledEditor = styled.div `
-  .cdx-block,
-  .ce-header {
-    padding-left: 58px;
-  }
-
-  .cdx-list {
-    padding-left: 85px;
-  }
-
-  .ce-block__content {
-    width: 100%;
-    max-width: none;
-  }
-
-  .ce-toolbar__content {
-    max-width: none;
-    left: 0;
-  }
-
-  .ce-toolbar__actions {
-    left: 0;
-  }
-
-  h1.ce-header {
-    font-size: 22px;
-    font-weight: bold;
-  }
-
-  h2.ce-header {
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  h3.ce-header {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  h4.ce-header {
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  h5.ce-header {
-    font-size: 15px;
-    font-weight: bold;
-  }
-
-  h6.ce-header {
-    font-size: 14px;
-    font-weight: bold;
-  }
-`;

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

@@ -1,43 +0,0 @@
-import React, { Fragment, useMemo, useState } from 'react';
-import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay, defaultDropAnimationSideEffects, } from '@dnd-kit/core';
-import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy, } from '@dnd-kit/sortable';
-import { SortableItem } from './components/index.js';
-import { StyledListWrapper } from './styles.js';
-const dropAnimationConfig = {
-    sideEffects: defaultDropAnimationSideEffects({
-        styles: {
-            active: {
-                opacity: '0.4',
-            },
-        },
-    }),
-};
-export function SortableList({ items, onChange, renderItem, }) {
-    const [active, setActive] = useState(null);
-    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }));
-    return (<DndContext sensors={sensors} onDragStart={({ active }) => {
-            setActive(active);
-        }} onDragEnd={({ active, over }) => {
-            if (over && active.id !== over?.id) {
-                const activeIndex = items.findIndex(({ id }) => id === active.id);
-                const overIndex = items.findIndex(({ id }) => id === over.id);
-                onChange(arrayMove(items, activeIndex, overIndex));
-            }
-            setActive(null);
-        }} onDragCancel={() => {
-            setActive(null);
-        }}>
-      <SortableContext items={items} strategy={verticalListSortingStrategy}>
-        <StyledListWrapper role="application">
-          {items.map((item, index) => (<Fragment key={index}>{renderItem(item)}</Fragment>))}
-        </StyledListWrapper>
-      </SortableContext>
-      <DragOverlay dropAnimation={dropAnimationConfig}>
-        {activeItem ? renderItem(activeItem) : null}
-      </DragOverlay>
-    </DndContext>);
-}
-SortableList.Item = SortableItem;

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

@@ -1,10 +0,0 @@
-import React, { useContext } from 'react';
-import { DragButton } from './styles.js';
-export const DragHandle = ({ context }) => {
-    const { attributes, listeners, ref } = useContext(context);
-    return (<DragButton {...attributes} {...listeners} ref={ref}>
-      <svg viewBox="0 0 20 20" width="13">
-        <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
-      </svg>
-    </DragButton>);
-};