datastake-daf 0.6.97 → 0.6.98

package/rollup.config.js

@@ -1,145 +1,103 @@
-import babel from "rollup-plugin-babel";
-import commonjs from "rollup-plugin-commonjs";
-import resolve from "rollup-plugin-node-resolve";
-import peerDep from "rollup-plugin-peer-deps-external";
-import nodePolyfills from "rollup-plugin-node-polyfills";
-import postcss from "rollup-plugin-postcss"; // Add this plugin
-import copy from "rollup-plugin-copy";
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import resolve from 'rollup-plugin-node-resolve';
+import peerDep from 'rollup-plugin-peer-deps-external';
+import nodePolyfills from 'rollup-plugin-node-polyfills';
+import postcss from 'rollup-plugin-postcss'; // Add this plugin
+
 
 // When you add a new package and you have problems publishing, you can add it here and try publishing again
 const external = [
-  "react",
-  "react-dom",
-  "react-dom/client",
-  "antd",
-  "prop-types",
-  "dayjs",
-  "dayjs",
-  "moment",
-  "leaflet",
-  "react-is",
-  "countries-list",
-  "react/jsx-runtime",
-  "lodash",
-  "lodash.camelcase",
-  "@antv/g2",
-  "dot-object",
-  "react-collapsed",
-  "leaflet-geosearch",
-  "react-html-parser",
-  "styled-component",
-  "@ant-design/icons",
-  "deepmerge",
-  "leaflet.heat",
-  "leaflet.markercluster",
-  "react-flow-renderer",
-  "country-city-location",
-  "@antv/g2plot",
-  "@xyflow/react",
-  "leaflet-editable",
-  "@xyflow/react",
-  "zustand/shallow",
-  "@elfalem/leaflet-curve",
+  'react', 'react-dom', 'react-dom/client', 'antd', 'prop-types', 'dayjs',
+  'dayjs', 'moment', 'leaflet', 'react-is', 'countries-list',
+  'react/jsx-runtime', 'lodash', 'lodash.camelcase',
+  '@antv/g2', 'dot-object', 'react-collapsed', 'leaflet-geosearch',
+  'react-html-parser', 'styled-component', '@ant-design/icons',
+  'deepmerge', 'leaflet.heat', 'leaflet.markercluster', 'react-flow-renderer',
+  'country-city-location', '@antv/g2plot', '@xyflow/react', 'leaflet-editable',
+  '@xyflow/react', 'zustand/shallow', '@elfalem/leaflet-curve'
 ];
 
-// Four builds, components, utils, hooks, context
+// Four builds, components, utils, hooks and context
 export default [
   {
-    input: "src/index.js",
+    input: 'src/index.js',
     output: [
       {
-        file: "dist/components/index.js",
-        format: "cjs",
+        file: 'dist/components/index.js',
+        format: 'cjs',
       },
     ],
     external,
     plugins: [
       nodePolyfills(),
       resolve({ browser: true }),
-      babel({ exclude: "node_modules/**", babelrc: true }),
+      babel({ exclude: 'node_modules/**', babelrc: true }),
       peerDep(),
       commonjs({
         include: /node_modules/,
-        requireReturnsDefault: "auto",
+        requireReturnsDefault: 'auto',
       }),
-      postcss({
-        extract: true,
-        minimize: true,
-        modules: true,
+      postcss({ 
+        extract: true, 
+        minimize: true, 
+        modules: true, 
       }),
     ],
   },
   {
-    input: "src/utils.js",
+    input: 'src/utils.js',
     output: [
       {
-        file: "dist/utils/index.js",
-        format: "cjs",
+        file: 'dist/utils/index.js',
+        format: 'cjs',
       },
     ],
     external,
     plugins: [
       nodePolyfills(),
       resolve({ browser: true }),
-      babel({ exclude: "node_modules/**", babelrc: true }),
+      babel({ exclude: 'node_modules/**', babelrc: true }),
       peerDep(),
       commonjs({
         include: /node_modules/,
-        requireReturnsDefault: "auto",
+        requireReturnsDefault: 'auto',
       }),
     ],
   },
   {
-    input: "src/hooks.js",
+    input: 'src/hooks.js',
     output: [
       {
-        file: "dist/hooks/index.js",
-        format: "cjs",
+        file: 'dist/hooks/index.js',
+        format: 'cjs',
       },
     ],
     external,
     plugins: [
       nodePolyfills(),
       resolve({ browser: true }),
-      babel({ exclude: "node_modules/**", babelrc: true }),
+      babel({ exclude: 'node_modules/**', babelrc: true }),
       peerDep(),
       commonjs({
         include: /node_modules/,
-        requireReturnsDefault: "auto",
+        requireReturnsDefault: 'auto',
       }),
     ],
   },
   {
-    input: "src/context.js",
+    input: 'src/context.js',
     output: [
       {
-        file: "dist/context/index.js",
-        format: "cjs",
+        file: 'dist/context/index.js',
+        format: 'cjs',
       },
     ],
     external,
-    plugins: [resolve(), babel({ exclude: "node_modules/**" }), peerDep()],
-  },
-  {
-    input: "src/styles/datastake.scss",
-    output: [
-      {
-        file: "dist/style/style.css",
-      },
-    ],
     plugins: [
-      postcss({
-        extract: "style.css",
-        minimize: true,
-        sourceMap: false,
-        extensions: [".scss"],
-        use: [["sass", { javascriptEnabled: true }]],
-      }),
-      copy({
-        targets: [
-          { src: "src/styles/datastake/*", dest: "dist/style/datastake" },
-        ],
-      }),
+      resolve(),
+      babel({ exclude: 'node_modules/**' }),
+      peerDep(),
     ],
   },
 ];

package/src/@daf/core/components/Dashboard/DashboardLayout/DashboardLayout.stories.jsx

@@ -2,7 +2,7 @@ import DashboardLayout from "./index.jsx";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../Widget/index.jsx";
 import Header from "../../Header/index.jsx";
-
+import Footer from "../../Footer/index.jsx";
 export default {
 	title: "Dashboard/DashboardLayout",
 	component: DashboardLayout,
@@ -23,6 +23,7 @@ export const Primary = {
 	render: () => (
 		<DashboardLayout
 			header={<Header title="Dashboard" supportText="The Support text for the header" />}
+			footer={<Footer actionButtons={[{ label: "Next", type: "primary", onClick: () => console.log("Next clicked") }]} />}
 		>
 			<section>
 				<Widget title="Widget Title">

package/src/@daf/core/components/Dashboard/DashboardLayout/index.jsx

@@ -5,7 +5,7 @@
  *
  *	Every Widget inside the component (children)  must be wrapped by a section tag, because i say so and if you dont like it you can change the code in the entire codebase, included but not limited to the following projects: nashiriki, tazama, kustawi, sbg, cukura, kota, mmt, and wherever the daf library is used.
  */
-export default function DashboardLayout({ children, header }) {
+export default function DashboardLayout({ children, header, footer }) {
 	return (
 		<div
 			className="daf-analysis"
@@ -19,6 +19,7 @@ export default function DashboardLayout({ children, header }) {
 					<div className="sections-cont w-pt">{children}</div>
 				</div>
 			</div>
+			{footer}
 		</div>
 	);
 }

package/src/@daf/core/components/Footer/Footer.stories.jsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { default as Footer } from './index.jsx';
+import { Button } from 'antd';
+
+export default {
+  title: 'Components/Footer',
+  component: Footer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template = (args) => (
+  <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', background: '#2c2c2c' }}>
+    <div style={{ flex: 1, padding: '20px', background: '#2c2c2c', color: 'white' }}>
+      <h2>Main Content Area</h2>
+      <p>This is the main content area. The footer will be at the bottom.</p>
+    </div>
+    <Footer {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  leftContent: null,
+  centerContent: null,
+  rightContent: null,
+  actionButtons: [
+    {
+      label: 'Next',
+      type: 'primary',
+      onClick: () => console.log('Next clicked'),
+    },
+  ],
+};
+
+export const WithLeftContent = Template.bind({});
+WithLeftContent.args = {
+  leftContent: (
+    <div>
+      <span>© 2024 DataStake</span>
+      <br />
+      <span style={{ fontSize: '12px', color: '#666' }}>
+        All rights reserved
+      </span>
+    </div>
+  ),
+  centerContent: null,
+  rightContent: null,
+  actionButtons: [],
+};
+
+export const WithCenterContent = Template.bind({});
+WithCenterContent.args = {
+  leftContent: null,
+  centerContent: (
+    <div style={{ textAlign: 'center' }}>
+      <span>Last updated: {new Date().toLocaleDateString()}</span>
+    </div>
+  ),
+  rightContent: null,
+  actionButtons: [],
+};
+
+export const WithRightContent = Template.bind({});
+WithRightContent.args = {
+  leftContent: null,
+  centerContent: null,
+  rightContent: (
+    <div>
+      <Button type="link" size="small">
+        Help
+      </Button>
+      <Button type="link" size="small">
+        Support
+      </Button>
+    </div>
+  ),
+  actionButtons: [],
+};
+
+export const FixedFooter = Template.bind({});
+FixedFooter.args = {
+  fixed: true,
+  leftContent: <span>Fixed Footer</span>,
+  centerContent: <span>This footer is fixed to the bottom</span>,
+  rightContent: null,
+  actionButtons: [
+    {
+      label: 'Action',
+      type: 'primary',
+      onClick: () => console.log('Action clicked'),
+    },
+  ],
+};
+
+export const FullContent = Template.bind({});
+FullContent.args = {
+  leftContent: (
+    <div>
+      <span>© 2024 DataStake</span>
+      <br />
+      <span style={{ fontSize: '12px', color: '#666' }}>
+        All rights reserved
+      </span>
+    </div>
+  ),
+  centerContent: (
+    <div style={{ textAlign: 'center' }}>
+      <span>Version 1.0.0</span>
+      <br />
+      <span style={{ fontSize: '12px', color: '#666' }}>
+        Last updated: {new Date().toLocaleDateString()}
+      </span>
+    </div>
+  ),
+  rightContent: (
+    <div>
+      <Button type="link" size="small">
+        Help
+      </Button>
+      <Button type="link" size="small">
+        Support
+      </Button>
+    </div>
+  ),
+  actionButtons: [
+    {
+      label: 'Save',
+      type: 'primary',
+      onClick: () => console.log('Save clicked'),
+    },
+    {
+      label: 'Cancel',
+      onClick: () => console.log('Cancel clicked'),
+    },
+  ],
+};
+
+export const ImageStyle = Template.bind({});
+ImageStyle.args = {
+  leftContent: null,
+  centerContent: null,
+  rightContent: null,
+  actionButtons: [
+    {
+      label: 'Next',
+      type: 'primary',
+      onClick: () => console.log('Next clicked'),
+    },
+  ],
+};

package/src/@daf/core/components/Footer/hook.js

@@ -0,0 +1,84 @@
+import { useMemo } from "react";
+import { Space } from "antd";
+import DafButton from "../Button/index.jsx";
+import CustomIcon from "../Icon/CustomIcon.jsx";
+import { BTN_TYPES, BTN_SIZE } from "../../../utils/button.js";
+
+/**
+ * Custom hook for managing footer state and rendering logic
+ */
+export const useFooter = ({
+	leftContent,
+	centerContent,
+	rightContent,
+	actionButtons,
+	app,
+	isViewMode,
+}) => {
+	const renderFooterContent = useMemo(() => {
+		const FooterContent = () => (
+			<div className="daf-footer-content">
+				<div className="daf-footer-left">
+					{leftContent}
+				</div>
+				
+				<div className="daf-footer-center">
+					{centerContent}
+				</div>
+				
+				<div className="daf-footer-right">
+					{rightContent}
+					{actionButtons.length > 0 && (
+						<Space className="daf-footer-actions">
+							{actionButtons.map((button, index) => {
+								const {
+									label,
+									onClick,
+									icon,
+									type = BTN_TYPES.PRIMARY,
+									tooltip,
+									disabled = false,
+									loading = false,
+									style = {},
+									className = "",
+									...restProps
+								} = button;
+
+								return (
+									<DafButton
+										key={index}
+										content={label}
+										type={type}
+										size={BTN_SIZE.MD}
+										icon={typeof icon === "string" ? <CustomIcon name={icon} /> : icon}
+										onClick={onClick}
+										disabled={disabled || isViewMode}
+										loading={loading}
+										title={tooltip}
+										style={style}
+										className={className}
+										{...restProps}
+									/>
+								);
+							})}
+						</Space>
+					)}
+				</div>
+			</div>
+		);
+		
+		FooterContent.displayName = 'FooterContent';
+		return FooterContent;
+	}, [
+		leftContent,
+		centerContent,
+		rightContent,
+		actionButtons,
+		app,
+		isViewMode,
+	]);
+
+	return {
+		renderFooterContent,
+	};
+};

package/src/@daf/core/components/Footer/index.jsx

@@ -0,0 +1,101 @@
+import PropTypes from "prop-types";
+import { useFooter } from "./hook.js";
+import { FooterContainer } from "./style.js";
+
+/**
+ * DAFFooter Component
+ *
+ * A flexible footer component for the DAF dashboard layout.
+ *
+ * Props:
+ * - `leftContent` (ReactNode):
+ *   Optional content to display on the left side of the footer.
+ *   Default: `null`.
+ *
+ * - `centerContent` (ReactNode):
+ *   Optional content to display in the center of the footer.
+ *   Default: `null`.
+ *
+ * - `rightContent` (ReactNode):
+ *   Optional content to display on the right side of the footer.
+ *   Default: `null`.
+ *
+ * - `actionButtons` (Array):
+ *   An array of action button configurations to be rendered in the footer.
+ *   Each item in the array is an object with the following optional properties:
+ *     - `label` (string): Text displayed on the button.
+ *     - `onClick` (function): Callback when the button is clicked.
+ *     - `icon` (ReactNode | string): Optional icon shown before or inside the button.
+ *     - `type` (string): Visual style (e.g., `"primary"`, `"danger"`, `"ghost"`).
+ *     - `tooltip` (string | ReactNode): Tooltip text or component shown on hover.
+ *     - `disabled` (boolean): Whether the button is disabled.
+ *     - `loading` (boolean): Whether the button is in loading state.
+ *     - `style` (object): Inline styles for the button.
+ *     - `className` (string): Additional class names for custom styling.
+ *   Default: `[]`.
+ *
+ * - `className` (string):
+ *   Additional CSS class names for the footer container.
+ *   Default: `''`.
+ *
+ * - `style` (object):
+ *   Inline styles for the footer container.
+ *   Default: `{}`.
+ *
+ * - `fixed` (boolean):
+ *   Whether the footer should be fixed to the bottom of the viewport.
+ *   Default: `false`.
+ *
+ * - `app` (string):
+ *   Optional app identifier for app-specific styling or logic.
+ *   Default: `''`.
+ *
+ * - `isViewMode` (boolean):
+ *   Indicates read-only or view-only mode, useful for disabling actions.
+ *   Default: `false`.
+ *
+ */
+
+export default function DAFFooter({
+	leftContent = null,
+	centerContent = null,
+	rightContent = null,
+	actionButtons = [],
+	className = "",
+	style = {},
+	fixed = false,
+	app = "",
+	isViewMode = false,
+}) {
+	const { renderFooterContent } = useFooter({
+		leftContent,
+		centerContent,
+		rightContent,
+		actionButtons,
+		app,
+		isViewMode,
+	});
+
+	return (
+		<FooterContainer 
+			className={`${fixed ? 'daf-footer-fixed' : ''} ${className}`}
+			style={style}
+		>
+			<div className={`daf-footer ${fixed ? 'daf-footer-fixed' : ''}`}>
+				{renderFooterContent()}
+			</div>
+		</FooterContainer>
+	);
+}
+
+DAFFooter.propTypes = {
+	leftContent: PropTypes.any,
+	centerContent: PropTypes.any,
+	rightContent: PropTypes.any,
+	actionButtons: PropTypes.array,
+	className: PropTypes.string,
+	style: PropTypes.object,
+	fixed: PropTypes.bool,
+	app: PropTypes.string,
+	isViewMode: PropTypes.bool,
+};