startbit-timezone-select 0.0.0

package/README.md

@@ -0,0 +1,3 @@
+# Strapi plugin startbit-timezone-select
+
+A quick description of startbit-timezone-select.

package/admin/src/components/CustomField.css

@@ -0,0 +1,110 @@
+.toggle-slider .toggle-label {
+  margin-bottom: 5px;
+}
+.toggle-slider span:first-child {
+  align-items: center;
+  display: flex;
+  margin-right: 8px;
+}
+.toggle-slider span:last-child {
+  align-items: center;
+  display: flex;
+  margin-left: 8px;
+}
+.toggle-slider span.slider {
+  margin: 0px;
+}
+.toggle-slider .toggle-content {
+  display: flex;
+}
+.toggle-slider .switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.toggle-slider .switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.toggle-slider .slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.toggle-slider input:checked + .slider {
+  background-color: #171a1f;
+}
+
+.toggle-slider input:focus + .slider {
+  box-shadow: 0 0 1px #171a1f;
+}
+
+.toggle-slider input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.toggle-slider .slider.round {
+  border-radius: 34px;
+}
+
+.toggle-slider .slider.round:before {
+  border-radius: 50%;
+}
+
+.table-container {
+  overflow-y: auto; /* Add vertical scrolling */
+  margin-top: 20px;
+}
+
+.sms-container {
+  display: noned;
+}
+
+.group-buttons .button {
+  padding: 7px 12px;
+  cursor: pointer;
+}
+.action-buttons {
+  display: block;
+  margin: 13px auto;
+}
+
+.group-buttons .button {
+  background: #ffff;
+  color: #000;
+  border: 1px solid #f2f2f2;
+}
+
+.group-buttons .button.active {
+  background: #565e6d;
+  color: #fff;
+}
+.sms-participants table input[type="checkbox"] {
+  cursor: pointer;
+}

package/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;

package/admin/src/components/PluginIcon/index.js

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

package/admin/src/components/PluginIcons.js

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

package/admin/src/components/TimeZone.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from "react";
+import { SingleSelect, SingleSelectOption, Typography } from "@strapi/design-system";
+import { useIntl } from "react-intl";
+import { useTimezoneSelect, allTimezones } from "react-timezone-select";
+
+const TimeZone = ({ attribute, disabled, intlLabel, name, onChange, required, value }) => {
+  const { formatMessage } = useIntl();  
+  const [hasError, setHasError] = useState(false);
+
+  const labelStyle = "original";
+  const displayValue = "UTC";
+  const timezones = {
+    ...allTimezones,
+    "Europe/Berlin": "Frankfurt",
+  };
+  const { options, parseTimezone } = useTimezoneSelect({
+    labelStyle,
+    timezones,
+    displayValue,
+  });
+
+  useEffect(() => {
+    if (required && (!value || value === "")) {
+      setHasError(true);
+    } else {
+      setHasError(false);
+    }
+  }, [value, required]);
+
+  const handleChange = (selectedOption) => {
+    // If required, check if the value is empty
+    if (required && !selectedOption) {
+      setHasError(true);
+    } else {
+      setHasError(false);
+    }
+
+    onChange({
+      target: { name, type: attribute.type, value: selectedOption },
+    });
+  };
+
+  return (
+    <div className="Timezone sc-bdvvtL sc-gsDKAQ bOQZK hFpgBC">
+      <Typography textColor="neutral800">
+        {formatMessage(intlLabel)}
+      </Typography>
+      <SingleSelect
+        name={name}
+        onChange={handleChange}
+        value={value || ""}
+        required={required}
+        disabled={disabled}
+      >
+         {/* Default option for placeholder */}
+         <SingleSelectOption value="" >
+          {formatMessage({ id: "select.any.timezone", defaultMessage: "Select any timezone" })}
+        </SingleSelectOption>
+        {options.map((timezone, index) => (
+          <SingleSelectOption key={index} value={timezone?.value}>{timezone?.label}</SingleSelectOption>
+        ))}
+      </SingleSelect>
+      {required && hasError && (
+        <p style={{ color: 'red' }}>This field is required.</p> // Display error message
+      )}
+    </div>
+  );
+};
+
+export default TimeZone;

package/admin/src/index.js

@@ -0,0 +1,84 @@
+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 {TimezoneIcon} from './components/PluginIcons';
+//import "./components/CustomField.css"; // Import CSS file
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app) {    
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    });
+    app.customFields.register([
+      {
+        name: "timeZone",
+        pluginId: pluginId,
+        type: "string", // Store the timezone value as a string
+        intlLabel: {
+          id: `${pluginId}.timeZone.name`,
+          defaultMessage: "Timezone",
+        },
+        intlDescription: {
+          id: `${pluginId}.timeZone.description`,
+          defaultMessage: "Dynamic TimeZone listing",
+        },
+        icon: PluginIcon,
+        components: {
+          Input: async () =>
+            import(/* webpackChunkName: "input-component" */ "./components/TimeZone"),
+        },
+        options: {
+          advanced: [
+            {
+              sectionTitle: {
+                id: 'global.advanced',
+                defaultMessage: 'Settings',
+              },
+              items: [
+                {
+                  intlLabel: { id: 'global.required', defaultMessage: 'Required' },
+                  name: 'required',
+                  type: 'checkbox',
+                  description: {
+                    id: 'global.required.description',
+                    defaultMessage: 'Make this field required',
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      }
+    ]);
+  },
+
+  bootstrap(app) {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

package/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 { AnErrorOccurred } 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={AnErrorOccurred} />
+      </Switch>
+    </div>
+  );
+};
+
+export default App;

package/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;

package/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;

package/admin/src/translations/en.json

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

package/admin/src/translations/fr.json

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

package/admin/src/utils/getTrad.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = (id) => `${pluginId}.${id}`;
+
+export default getTrad;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "startbit-timezone-select",
+  "version": "0.0.0",
+  "description": "This is the description of the plugin.",
+  "strapi": {
+    "name": "startbit-timezone-select",
+    "description": "Description of Startbit Timezone Select plugin",
+    "kind": "plugin",
+    "displayName": "Startbit Timezone Select"
+  },
+  "dependencies": {
+    "@strapi/design-system": "^1.6.3",
+    "@strapi/helper-plugin": "^4.6.0",
+    "@strapi/icons": "^1.6.3",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^5.3.4",
+    "styled-components": "^5.3.6"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^5.2.0",
+    "styled-components": "^5.2.1",
+    "react-timezone-select": "^3.2.8"
+  },
+  "author": {
+    "name": "A Strapi developer"
+  },
+  "maintainers": [
+    {
+      "name": "A Strapi developer"
+    }
+  ],
+  "engines": {
+    "node": ">=18.0.0 <=20.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT"
+}

package/server/bootstrap.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // bootstrap phase
+};

package/server/config/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  default: {},
+  validator() {},
+};

package/server/content-types/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/server/controllers/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const myController = require('./my-controller');
+
+module.exports = {
+  myController,
+};

package/server/controllers/my-controller.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = ({ strapi }) => ({
+  index(ctx) {
+    ctx.body = strapi
+      .plugin('startbit-timezone-select')
+      .service('myService')
+      .getWelcomeMessage();
+  },
+});

package/server/destroy.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // destroy phase
+};

package/server/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const register = require('./register');
+const bootstrap = require('./bootstrap');
+const destroy = require('./destroy');
+const config = require('./config');
+const contentTypes = require('./content-types');
+const controllers = require('./controllers');
+const routes = require('./routes');
+const middlewares = require('./middlewares');
+const policies = require('./policies');
+const services = require('./services');
+
+module.exports = {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares,
+};

package/server/middlewares/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/server/policies/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/server/register.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // register phase
+  strapi.customFields.register([{
+    name: "timeZone",
+    plugin: "startbit-timezone-select",
+    type: "string",    
+  }]);
+};

package/server/routes/index.js

@@ -0,0 +1,10 @@
+module.exports = [
+  {
+    method: 'GET',
+    path: '/',
+    handler: 'myController.index',
+    config: {
+      policies: [],
+    },
+  },
+];

package/server/services/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const myService = require('./my-service');
+
+module.exports = {
+  myService,
+};

package/server/services/my-service.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = ({ strapi }) => ({
+  getWelcomeMessage() {
+    return 'Welcome to Strapi 🚀';
+  },
+});

package/strapi-admin.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./admin/src').default;

package/strapi-server.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./server');