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

package/src/components/Editor/index.ts

@@ -1,3 +1,3 @@
-export * from "./Editor.jsx";
-export * from "./EditorShow.jsx";
-export * from "./EditorList.jsx";
+export * from "./Editor.jsx";
+export * from "./EditorShow.jsx";
+export * from "./EditorList.jsx";

package/src/components/Editor/styles.ts

@@ -1,151 +1,151 @@
-import { Box } from "@adminjs/design-system";
-import { styled } from "@adminjs/design-system/styled-components";
-
-export const StyledLabel = styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-
-export const StyledShowLabel = styled(StyledLabel)`
-  color: rgb(137, 138, 154);
-  font-weight: 300;
-`;
-
-export const StyledEditorWrapper = styled(Box)`
-  padding: 12px;
-  margin-bottom: 24px;
-  border: 1px solid rgb(187, 195, 203);
-`;
-
-export const StyledEditorViewWrapper = styled(Box)`
-  h1,
-  h2,
-  h3 {
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-
-  h1 {
-    font-size: 18px;
-  }
-
-  h2 {
-    font-size: 16px;
-  }
-
-  h3 {
-    font-size: 14px;
-  }
-
-  p {
-    margin-bottom: 8px;
-  }
-
-  ol,
-  ul {
-    margin-left: 20px;
-    margin-bottom: 8px;
-  }
-
-  ol {
-    list-style: auto;
-  }
-
-  ul {
-    list-style: inherit;
-  }
-
-  table,
-  audio {
-    margin: 16px 0;
-  }
-
-  table,
-  th,
-  td {
-    border: 1px solid;
-  }
-
-  th {
-    font-weight: bold;
-  }
-
-  th,
-  td {
-    padding: 4px;
-  }
-
-  blockquote {
-    display: block;
-    padding: 5px 8px;
-    width: fit-content;
-    border-radius: 4px;
-    background-color: #e6e6e6;
-  }
-`;
-
-export const StyledEditorShowWrapper = styled(StyledEditorViewWrapper)`
-  margin-bottom: 24px;
-`;
-
-export const StyledEditor = styled.div`
-  audio,
-  .cdx-block,
-  .ce-header {
-    padding-left: 58px;
-  }
-
-  input {
-    margin-left: 58px;
-    width: auto;
-  }
-
-  .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;
-  }
-`;
+import { Box } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
+
+export const StyledLabel = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;
+
+export const StyledShowLabel = styled(StyledLabel)`
+  color: rgb(137, 138, 154);
+  font-weight: 300;
+`;
+
+export const StyledEditorWrapper = styled(Box)`
+  padding: 12px;
+  margin-bottom: 24px;
+  border: 1px solid rgb(187, 195, 203);
+`;
+
+export const StyledEditorViewWrapper = styled(Box)`
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3 {
+    font-size: 14px;
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
+
+  ol,
+  ul {
+    margin-left: 20px;
+    margin-bottom: 8px;
+  }
+
+  ol {
+    list-style: auto;
+  }
+
+  ul {
+    list-style: inherit;
+  }
+
+  table,
+  audio {
+    margin: 16px 0;
+  }
+
+  table,
+  th,
+  td {
+    border: 1px solid;
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  th,
+  td {
+    padding: 4px;
+  }
+
+  blockquote {
+    display: block;
+    padding: 5px 8px;
+    width: fit-content;
+    border-radius: 4px;
+    background-color: #e6e6e6;
+  }
+`;
+
+export const StyledEditorShowWrapper = styled(StyledEditorViewWrapper)`
+  margin-bottom: 24px;
+`;
+
+export const StyledEditor = styled.div`
+  audio,
+  .cdx-block,
+  .ce-header {
+    padding-left: 58px;
+  }
+
+  input {
+    margin-left: 58px;
+    width: auto;
+  }
+
+  .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/src/components/{CustomSlug/CustomSlug.tsx → Slug/SlugEdit.tsx}

@@ -1,68 +1,68 @@
-import { EditPropertyProps } from "adminjs";
-import React, {
-  ChangeEvent,
-  FC,
-  SyntheticEvent,
-  useEffect,
-  useState,
-} from "react";
-import { ThemeProvider } from "styled-components";
-
-import { theme } from "@adminjs/design-system";
-
-import { slugifyTitle } from "../../utils/index.js";
-
-import {
-  StyledCustomInput,
-  StyledGenerateButton,
-  StyledInputWrapper,
-  StyledLabel,
-} from "./styles.js";
-
-type CustomSlugTypes = Omit<EditPropertyProps, "where">;
-
-const CustomSlug: FC<CustomSlugTypes> = ({
-  property,
-  record,
-  resource,
-  onChange,
-}) => {
-  const [inputValue, setInputValue] = useState(record.params.slug);
-
-  useEffect(() => {
-    onChange(property.path, inputValue);
-  }, [inputValue]);
-
-  return (
-    <ThemeProvider theme={theme}>
-      <StyledLabel htmlFor="customSlug">{property.path}</StyledLabel>
-      <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: ChangeEvent<HTMLInputElement>) {
-    setInputValue(e.target.value);
-  }
-
-  function generateSlug(e: SyntheticEvent<HTMLInputElement>) {
-    e.preventDefault();
-    const slugSource =
-      record.params[property.props.sourceField ?? resource.titleProperty.name];
-
-    if (slugSource) {
-      setInputValue(slugifyTitle(slugSource));
-    }
-  }
-};
-
-export default CustomSlug;
+import { EditPropertyProps } from "adminjs";
+import React, {
+  ChangeEvent,
+  FC,
+  SyntheticEvent,
+  useEffect,
+  useState,
+} from "react";
+import { ThemeProvider } from "styled-components";
+
+import { theme } from "@adminjs/design-system";
+
+import { slugifyTitle } from "../../utils";
+
+import {
+  StyledCustomInput,
+  StyledGenerateButton,
+  StyledInputWrapper,
+  StyledLabel,
+} from "./styles.js";
+
+type CustomSlugTypes = Omit<EditPropertyProps, "where">;
+
+const SlugEdit: FC<CustomSlugTypes> = ({
+  property,
+  record,
+  resource,
+  onChange,
+}) => {
+  const [inputValue, setInputValue] = useState(record.params.slug);
+
+  useEffect(() => {
+    onChange(property.path, inputValue);
+  }, [inputValue]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <StyledLabel htmlFor="customSlug">{property.path}</StyledLabel>
+      <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: ChangeEvent<HTMLInputElement>) {
+    setInputValue(e.target.value);
+  }
+
+  function generateSlug(e: SyntheticEvent<HTMLInputElement>) {
+    e.preventDefault();
+    const slugSource =
+      record.params[property.props.sourceField ?? resource.titleProperty.name];
+
+    if (slugSource) {
+      setInputValue(slugifyTitle(slugSource));
+    }
+  }
+};
+
+export default SlugEdit;

package/src/components/Slug/SlugFeature.ts

@@ -0,0 +1,30 @@
+import {buildFeature, ComponentLoader, FeatureType} from "adminjs";
+import {bundleComponent} from "../../utils/bundle-component";
+
+const COMPONENT_NAME = 'Slug'
+
+type SlugOptions = {
+    componentLoader: ComponentLoader
+    key: string
+}
+const SlugFeature = (config: SlugOptions): FeatureType => {
+    const {componentLoader,key} = config
+
+    const slugFeature = () => {
+        const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, 'SlugEdit.tsx')
+        return buildFeature({
+            properties: {
+                [key]: {
+                    isVisible: { show: false, edit: true, list: false, filter: false },
+                    components: {
+                        edit: editComponent,
+                    },
+                },
+            },
+        })
+    }
+
+    return slugFeature()
+}
+
+export default SlugFeature

package/src/components/Slug/index.ts

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

package/src/components/{CustomSlug → Slug}/styles.ts

@@ -1,24 +1,24 @@
-// @ts-ignore
-import { styled } from "@adminjs/design-system/styled-components";
-// @ts-ignore
-import { Box, Button, 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;
-`;
-
-export const StyledLabel = styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
+// @ts-ignore
+import { styled } from "@adminjs/design-system/styled-components";
+// @ts-ignore
+import { Box, Button, 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;
+`;
+
+export const StyledLabel = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;