should have committed way earlier

Author: Daniel Phiri

README.md

@@ -0,0 +1,3 @@
+# Strapi plugin ai-text-gneration
+
+A quick description of ai-text-gneration.

admin/src/components/AITextIcon/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '@strapi/design-system/Icon';
+import { Flex } from '@strapi/design-system/Flex';
+import Alien from '@strapi/icons/Alien';
+
+const IconBox = styled(Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+
+const MyIcon = () => {
+  return (
+    <IconBox justifyContent="center" alignItems="center" width={7} height={6} hasRadius aria-hidden>
+      <Icon as={Alien} />
+    </IconBox>
+  );
+};
+
+export default AITextIcon;

admin/src/components/Initializer/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef();
+  ref.current = setPlugin;
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  setPlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;

admin/src/components/Input/index.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { TextInput } from '@strapi/design-system/TextInput';
+import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import { Textarea } from '@strapi/design-system';
+import { TwoColsLayout } from '@strapi/design-system';
+
+
+export default function Index({
+  name,
+  error,
+  description,
+  onChange,
+  value,
+  intlLabel,
+  attribute,
+}) {
+  const { formatMessage } = useIntl();
+  const [content, setContent] = useState('');
+  const [prompt, setPrompt] = useState('');
+  const [err, setErr] = useState('');
+  const xet = process.env.OPEN_AI_ACCESS_TOKEN
+
+
+  const aiClick = async () => {
+    console.log('vars: ', xet)
+    try {
+      const response = await fetch('https://api.openai.com/v1/completions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${accessToken}` //functionality to be added
+        },
+        body: JSON.stringify({
+          'model': 'text-davinci-001',
+          'prompt': `${prompt}`,
+          'temperature': 0.4,
+          'max_tokens': 64,
+          'top_p': 1,
+          'frequency_penalty': 0,
+          'presence_penalty': 0
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`Error! status: ${response.status}`);
+      }
+
+      const result = await response.json();
+      onChange({ target: { name, value: result.choices[0].text, type: attribute.type } })
+    } catch (err) {
+      setErr(err.message);
+    }
+  }
+
+  const clearGeneratedText = async () => {
+    onChange({ target: { name, value: '', type: attribute.type } })
+
+  }
+
+  return (
+    <Box>
+      <Stack spacing={1}>
+        <Stack spacing={1}>
+          <TextInput 
+          placeholder="Please write a prompt for content to generate" 
+          label="Prompt" name="Prompt" 
+          onChange={e => setPrompt(e.target.value)} value={prompt} />
+        </Stack>
+        <Box as="p" padding={4}>
+          <Textarea 
+          placeholder="Generated text" 
+          label="Content" 
+          name="content" 
+          onChange={e => onChange({ target: { name, value: e.target.value, type: attribute.type } })}>
+            {value}
+          </Textarea>
+        </Box>
+      </Stack>
+      <Box padding={4}>
+        <TwoColsLayout 
+        startCol={<Button onClick={aiClick}>Generate</Button>} 
+        endCol={<Button onClick={() => clearGeneratedText()}>Clear</Button>
+      } 
+        />
+      </Box>
+    </Box>
+  )
+}

admin/src/components/PluginIcon/index.js

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import Puzzle from '@strapi/icons/Puzzle';
+
+const PluginIcon = () => <Puzzle />;
+
+export default PluginIcon;

admin/src/index.js

@@ -0,0 +1,114 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './components/Initializer';
+import PluginIcon from './components/PluginIcon';
+import AITextIcon from './components/PluginIcon';
+
+
+const name = pluginPkg.strapi.name;
+
+export default { 
+  register(app) {
+    // app.addMenuLink({
+    //   to: `/plugins/${pluginId}`,
+    //   icon: PluginIcon,
+    //   intlLabel: {
+    //     id: `${pluginId}.plugin.name`,
+    //     defaultMessage: name,
+    //   },
+    //   Component: async () => {
+    //     const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
+
+    //     return component;
+    //   },
+    //   permissions: [
+    //     // Uncomment to set the permissions of the plugin here
+    //     // {
+    //     //   action: '', // the action name should be plugin::plugin-name.actionType
+    //     //   subject: null,
+    //     // },
+    //   ],
+    // });
+    // app.registerPlugin({
+    //   id: pluginId,
+    //   initializer: Initializer,
+    //   isReady: false,
+    //   name,
+    // });
+    app.customFields.register({
+      name: "text-ai",
+      pluginId: "ai-text-generation", // the custom field is created by a color-picker plugin
+      type: "string", // the color will be stored as a string
+      intlLabel: {
+        id: "ai-text-generation.text-ai.label",
+        defaultMessage: "Text AI",
+      },
+      intlDescription: {
+        id: "ai-text-generation.text-ai.description",
+        defaultMessage: "Let AI do your writing!",
+      },
+      icon: AITextIcon, // don't forget to create/import your icon component 
+      components: {
+        Input: async () => import(/* webpackChunkName: "input-component" */ "./components/Input"),
+      },
+      options: {
+        base: [
+          /*
+            Declare settings to be added to the "Base settings" section
+            of the field in the Content-Type Builder
+          */
+          {
+            sectionTitle: { // Add a "Format" settings section
+              id: 'ai-text-generation.text-ai.api.details',
+              defaultMessage: 'API Details',
+            },
+            items: [ // Add settings items to the section
+              {
+                /*
+                  Add a "Color format" dropdown
+                  to choose between 2 different format options
+                  for the color value: hexadecimal or RGBA
+                */
+                intlLabel: {
+                  id: 'ai-text-generation.text-ai.key',
+                  defaultMessage: 'Key',
+                },
+                name: 'options.key',
+                type: 'input',
+                value: '', // option selected by default
+              },
+            ],
+          },
+        ],
+      },
+    });
+  },
+
+  
+
+  bootstrap(app) {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(
+          /* webpackChunkName: "translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

admin/src/pages/App/index.js

@@ -0,0 +1,25 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { NotFound } from '@strapi/helper-plugin';
+import pluginId from '../../pluginId';
+import HomePage from '../HomePage';
+
+const App = () => {
+  return (
+    <div>
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+export default App;

admin/src/pages/HomePage/index.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+// import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const HomePage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s HomePage</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default HomePage;

admin/src/pluginId.js

@@ -0,0 +1,5 @@
+import pluginPkg from '../../package.json';
+
+const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
+
+export default pluginId;

admin/src/translations/en.json

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