this.gui 1.0.12 → 1.0.14

package/src/stories/Layouts/Grid/Grid.css

@@ -0,0 +1,4 @@
+/* src/components/Layout/Grid/Grid.css */
+.grid-container {
+    display: grid;
+  }

package/src/stories/Layouts/Grid/Grid.jsx

@@ -0,0 +1,15 @@
+// src/stories/Layout/Grid/Grid.jsx
+import React from 'react';
+import './Grid.css'; // Import the component-specific styles
+
+const Grid = ({ children, columns = 3, gap = '10px' }) => {
+  const gridStyle = {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+    gap,
+  };
+
+  return <div style={gridStyle} className="grid-container">{children}</div>;
+};
+
+export default Grid;

package/src/stories/Layouts/Grid/Grid.stories.jsx

@@ -0,0 +1,26 @@
+// src/stories/Layout/Grid/Grid.stories.jsx
+import React from 'react';
+import Grid from './Grid';
+
+export default {
+  title: 'Layout/Grid',
+  component: Grid,
+  argTypes: {
+    columns: { control: 'number', defaultValue: 3 },
+    gap: { control: 'text', defaultValue: '10px' },
+  },
+};
+
+const Template = (args) => (
+  <Grid {...args}>
+    <div style={{ backgroundColor: '#FFDDC1', padding: '20px' }}>Item 1</div>
+    <div style={{ backgroundColor: '#FEC8D8', padding: '20px' }}>Item 2</div>
+    <div style={{ backgroundColor: '#D4A5A5', padding: '20px' }}>Item 3</div>
+  </Grid>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  columns: 3,
+  gap: '10px',
+};

package/src/stories/Layouts/Layout.js

@@ -0,0 +1,28 @@
+const Layout = {
+"Layout": {
+      "Grid": [
+        { name: "Grid", paths: { css: "./Grid/Grid.css", globalCss: "styles/global.css", jsx: "./Layout/Grid/Grid.jsx", stories: "src/stories/Layout/Grid/Grid.stories.jsx" }},
+      ],
+      "Section": [
+        { name: "Section", paths: { css: "./Section/Section.css", globalCss: "styles/global.css", jsx: "./Layout/Section/Section.jsx", stories: "src/stories/Layout/Section/Section.stories.jsx" }},
+      ],
+      "FlexboxLayout": [
+        { name: "Flexbox", paths: { css: "./Flexbox/Flexbox.css", globalCss: "styles/global.css", jsx: "./Layout/Flexbox/Flexbox.jsx", stories: "src/stories/Layout/Flexbox/Flexbox.stories.jsx" }},
+      ],
+      "NavigationAndMenus": [
+        { name: "Header", paths: { css: "./Header/Header.css", globalCss: "styles/global.css", jsx: "./Layout/Header/Header.jsx", stories: "src/stories/Layout/Header/Header.stories.jsx" }},
+        { name: "Footer", paths: { css: "./Footer/Footer.css", globalCss: "styles/global.css", jsx: "./Layout/Footer/Footer.jsx", stories: "src/stories/Layout/Footer/Footer.stories.jsx" }},
+        { name: "DropdownMenu", paths: { css: "./DropdownMenu/DropdownMenu.css", globalCss: "styles/global.css", jsx: "./Layout/DropdownMenu/DropdownMenu.jsx", stories: "src/stories/Layout/DropdownMenu/DropdownMenu.stories.jsx" }},
+        { name: "Pagination", paths: { css: "./Pagination/Pagination.css", globalCss: "styles/global.css", jsx: "./Layout/Pagination/Pagination.jsx", stories: "src/stories/Layout/Pagination/Pagination.stories.jsx" }},
+      ],
+      "ContentOrganization": [
+        { name: "Sidebar", paths: { css: "./Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "./Layout/Sidebar/Sidebar.jsx", stories: "src/stories/Layout/Sidebar/Sidebar.stories.jsx" }},
+        { name: "Tabs", paths: { css: "./Tabs/Tabs.css", globalCss: "styles/global.css", jsx: "./Layout/Tabs/Tabs.jsx", stories: "src/stories/Layout/Tabs/Tabs.stories.jsx" }},
+        { name: "Accordion", paths: { css: "./Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "./Layout/Accordion/Accordion.jsx", stories: "src/stories/Layout/Accordion/Accordion.stories.jsx" }},
+      ],
+      "HeroSections": [
+        { name: "HeroBanner", paths: { css: "./HeroBanner/HeroBanner.css", globalCss: "styles/global.css", jsx: "./Layout/HeroBanner/HeroBanner.jsx", stories: "src/stories/Layout/HeroBanner/HeroBanner.stories.jsx" }},
+        { name: "HeroImageVideo", paths: { css: "./HeroImageVideo/HeroImageVideo.css", globalCss: "styles/global.css", jsx: "./Layout/HeroImageVideo/HeroImageVideo.jsx", stories: "src/stories/Layout/HeroImageVideo/HeroImageVideo.stories.jsx" }},
+      ]
+    }
+    }

package/src/stories/MDX.mdx

@@ -0,0 +1,118 @@
+# This.GUI
+**MDX** is a powerful format because it allows you to combine the simplicity of **Markdown** with the flexibility of **React components**. This means you can write documentation, content, or pages using normal Markdown syntax and sprinkle in **React components** wherever needed.
+
+Here’s a breakdown of how it works:
+
+### 1. **Markdown + JSX**
+MDX lets you write Markdown like usual, but when you need interactive or dynamic content, you can directly insert React components. It merges **Markdown** and **JSX** seamlessly in the same file.
+
+Example:
+
+```mdx
+# Welcome to My Site
+
+This is a simple introduction written in Markdown.
+
+## Here’s a custom button:
+
+<Button label="Click Me" />
+
+Here is more markdown text below the button!
+```
+
+In this example:
+- The heading `# Welcome to My Site` and the paragraph are standard **Markdown**.
+- The `<Button />` component is a **React component** that you import and use directly in the MDX file.
+
+### 2. **Passing Props to Components**
+You can pass props to React components just like you would in a React project. This allows you to create dynamic, reusable content.
+
+```mdx
+## Example with Props
+
+Here’s a button with dynamic props:
+
+<Button label="Submit" color="primary" />
+```
+
+### 3. **Reusability with Components**
+Since you can use any React component, you can integrate complex UI elements, such as forms, charts, or interactive widgets, into your content.
+
+For example:
+
+```mdx
+# User Statistics
+
+<Chart data={userData} />
+
+This chart is embedded directly into the documentation!
+```
+
+### 4. **How to Set It Up**
+To use **MDX** in your project, you’ll typically configure a tool like **Storybook**, **Next.js**, or a custom React setup.
+
+#### With **Storybook**:
+MDX is perfect for writing component documentation in **Storybook**. You can write documentation for your components and render the components directly in the docs.
+
+```mdx
+import { Button } from './Button';
+
+<Meta title="Button" component={Button} />
+
+# Button Component
+
+This is the `Button` component with different styles.
+
+<Canvas>
+  <Story name="Primary Button">
+    <Button label="Primary" color="primary" />
+  </Story>
+</Canvas>
+```
+
+#### With **Next.js**:
+Next.js makes it easy to integrate MDX for static pages or blogs.
+
+1. Install MDX support for Next.js:
+   ```bash
+   npm install @next/mdx @mdx-js/loader
+   ```
+
+2. Configure Next.js in `next.config.js`:
+   ```js
+   const withMDX = require('@next/mdx')({
+     extension: /\.mdx?$/
+   });
+   
+   module.exports = withMDX({
+     pageExtensions: ['js', 'jsx', 'md', 'mdx'],
+   });
+   ```
+
+3. Create an `.mdx` file and use React components inside:
+   ```mdx
+   # Hello World
+
+   <Button label="Click Me" />
+   ```
+
+#### With **Gatsby**:
+MDX can also be used in **Gatsby** to create rich blog posts or pages by embedding React components within Markdown.
+
+### 5. **Where to Use MDX**
+MDX is often used for:
+- **Technical documentation** (with live component previews).
+- **Component libraries** (Storybook).
+- **Blogs or content management systems** (Next.js/Gatsby).
+- **Interactive tutorials**.
+
+### Key Advantages of MDX:
+- **Markdown simplicity**: Use the same syntax you’re used to for writing docs or blog posts.
+- **React components**: Dynamically enhance content with interactivity, custom UI, or reusable components.
+- **Reusable content**: Leverage the power of React to make your content dynamic and interactive.
+
+---
+
+MDX gives you the **best of both worlds**: you can write content in **Markdown**, and whenever you need dynamic or interactive elements, you simply drop in a React component. It’s ideal for use cases where you want content and code to live together seamlessly.
+
+Let me know if you'd like help with setting up or using MDX further!

package/src/stories/Miscellaneous/Miscellaneous.js

@@ -0,0 +1,24 @@
+const Miscellaneous = {
+"Miscellaneous": {
+    "TooltipsPopovers": [
+      { name: "Tooltip", paths: { css: "./Tooltip/Tooltip.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Tooltip/Tooltip.jsx", stories: "./Tooltip/Tooltip.stories.jsx" }},
+      { name: "Popover", paths: { css: "./Popover/Popover.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Popover/Popover.jsx", stories: "./Popover/Popover.stories.jsx" }},
+    ],
+    "Overlays": [
+      { name: "ModalWindow", paths: { css: "./ModalWindow/ModalWindow.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/ModalWindow/ModalWindow.jsx", stories: "./ModalWindow/ModalWindow.stories.jsx" }},
+      { name: "Drawer", paths: { css: "./Drawer/Drawer.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Drawer/Drawer.jsx", stories: "./Drawer/Drawer.stories.jsx" }},
+    ],
+    "SearchComponents": [
+      { name: "SearchBox", paths: { css: "./SearchBox/SearchBox.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/SearchBox/SearchBox.jsx", stories: "./SearchBox/SearchBox.stories.jsx" }},
+      { name: "Autocomplete", paths: { css: "./Autocomplete/Autocomplete.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Autocomplete/Autocomplete.jsx", stories: "./Autocomplete/Autocomplete.stories.jsx" }},
+    ],
+    "MediaAndContentControls": [
+      { name: "AudioControls", paths: { css: "./MediaAndContentControls/AudioControls.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/AudioControls.jsx", stories: "./MediaAndContentControls/AudioControls.stories.jsx" }},
+      { name: "VideoControls", paths: { css: "./MediaAndContentControls/VideoControls.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/VideoControls.jsx", stories: "./MediaAndContentControls/VideoControls.stories.jsx" }},
+      { name: "Filters", paths: { css: "./MediaAndContentControls/Filters.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/Filters.jsx", stories: "./MediaAndContentControls/Filters.stories.jsx" }},
+    ],
+    "InteractiveMaps": [
+      { name: "Map", paths: { css: "./InteractiveMaps/Map.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/InteractiveMaps/Map.jsx", stories: "./InteractiveMaps/Map.stories.jsx" }},
+    ]
+  }
+}

package/src/stories/Molecules/Accordion/Accordion.css

@@ -0,0 +1,4 @@
+
+.accordion {
+  /* Default styles for Accordion */
+}

package/src/stories/Molecules/Accordion/Accordion.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Accordion.css';
+
+/**
+ * Accordion component
+ */
+export const Accordion = (props) => {
+  return (
+    <div className="accordion" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+Accordion.propTypes = {
+  // Define prop types here
+};
+
+Accordion.defaultProps = {
+  // Define default props here
+};
+
+export default Accordion;

package/src/stories/Molecules/Accordion/Accordion.stories.jsx

@@ -0,0 +1,20 @@
+
+import { Accordion } from './Accordion';
+
+// Storybook configuration for Accordion component
+export default {
+  title: 'Molecules/ContentDisplay/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/AudioPlayer/AudioPlayer.css

@@ -0,0 +1,4 @@
+
+.audioplayer {
+  /* Default styles for AudioPlayer */
+}

package/src/stories/Molecules/AudioPlayer/AudioPlayer.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './AudioPlayer.css';
+
+/**
+ * AudioPlayer component
+ */
+export const AudioPlayer = (props) => {
+  return (
+    <div className="audioplayer" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+AudioPlayer.propTypes = {
+  // Define prop types here
+};
+
+AudioPlayer.defaultProps = {
+  // Define default props here
+};
+
+export default AudioPlayer;

package/src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx

@@ -0,0 +1,20 @@
+
+import { AudioPlayer } from './AudioPlayer';
+
+// Storybook configuration for AudioPlayer component
+export default {
+  title: 'Molecules/MediaMolecules/AudioPlayer',
+  component: AudioPlayer,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/AvatarWithName/AvatarWithName.css

@@ -0,0 +1,4 @@
+
+.avatarwithname {
+  /* Default styles for AvatarWithName */
+}

package/src/stories/Molecules/AvatarWithName/AvatarWithName.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './AvatarWithName.css';
+
+/**
+ * AvatarWithName component
+ */
+export const AvatarWithName = (props) => {
+  return (
+    <div className="avatarwithname" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+AvatarWithName.propTypes = {
+  // Define prop types here
+};
+
+AvatarWithName.defaultProps = {
+  // Define default props here
+};
+
+export default AvatarWithName;

package/src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx

@@ -0,0 +1,20 @@
+
+import { AvatarWithName } from './AvatarWithName';
+
+// Storybook configuration for AvatarWithName component
+export default {
+  title: 'Molecules/MediaMolecules/AvatarWithName',
+  component: AvatarWithName,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,4 @@
+
+.breadcrumbs {
+  /* Default styles for Breadcrumbs */
+}

package/src/stories/Molecules/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Breadcrumbs.css';
+
+/**
+ * Breadcrumbs component
+ */
+export const Breadcrumbs = (props) => {
+  return (
+    <div className="breadcrumbs" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+Breadcrumbs.propTypes = {
+  // Define prop types here
+};
+
+Breadcrumbs.defaultProps = {
+  // Define default props here
+};
+
+export default Breadcrumbs;

package/src/stories/Molecules/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -0,0 +1,20 @@
+
+import { Breadcrumbs } from './Breadcrumbs';
+
+// Storybook configuration for Breadcrumbs component
+export default {
+  title: 'Molecules/Navigation/Breadcrumbs',
+  component: Breadcrumbs,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,4 @@
+
+.buttongroup {
+  /* Default styles for ButtonGroup */
+}

package/src/stories/Molecules/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ButtonGroup.css';
+
+/**
+ * ButtonGroup component
+ */
+export const ButtonGroup = (props) => {
+  return (
+    <div className="buttongroup" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+ButtonGroup.propTypes = {
+  // Define prop types here
+};
+
+ButtonGroup.defaultProps = {
+  // Define default props here
+};
+
+export default ButtonGroup;

package/src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx

@@ -0,0 +1,20 @@
+
+import { ButtonGroup } from './ButtonGroup';
+
+// Storybook configuration for ButtonGroup component
+export default {
+  title: 'Molecules/ButtonsWithIcons/ButtonGroup',
+  component: ButtonGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/Card/Card.css

@@ -0,0 +1,4 @@
+
+.card {
+  /* Default styles for Card */
+}

package/src/stories/Molecules/Card/Card.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Card.css';
+
+/**
+ * Card component
+ */
+export const Card = (props) => {
+  return (
+    <div className="card" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+Card.propTypes = {
+  // Define prop types here
+};
+
+Card.defaultProps = {
+  // Define default props here
+};
+
+export default Card;

package/src/stories/Molecules/Card/Card.stories.jsx

@@ -0,0 +1,20 @@
+
+import { Card } from './Card';
+
+// Storybook configuration for Card component
+export default {
+  title: 'Molecules/ContentDisplay/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/ComparisonTable/ComparisonTable.css

@@ -0,0 +1,4 @@
+
+.comparisontable {
+  /* Default styles for ComparisonTable */
+}

package/src/stories/Molecules/ComparisonTable/ComparisonTable.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ComparisonTable.css';
+
+/**
+ * ComparisonTable component
+ */
+export const ComparisonTable = (props) => {
+  return (
+    <div className="comparisontable" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+ComparisonTable.propTypes = {
+  // Define prop types here
+};
+
+ComparisonTable.defaultProps = {
+  // Define default props here
+};
+
+export default ComparisonTable;

package/src/stories/Molecules/ComparisonTable/ComparisonTable.stories.jsx

@@ -0,0 +1,20 @@
+
+import { ComparisonTable } from './ComparisonTable';
+
+// Storybook configuration for ComparisonTable component
+export default {
+  title: 'Molecules/Tables/ComparisonTable',
+  component: ComparisonTable,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/DataTable/DataTable.css

@@ -0,0 +1,4 @@
+
+.datatable {
+  /* Default styles for DataTable */
+}

package/src/stories/Molecules/DataTable/DataTable.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './DataTable.css';
+
+/**
+ * DataTable component
+ */
+export const DataTable = (props) => {
+  return (
+    <div className="datatable" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+DataTable.propTypes = {
+  // Define prop types here
+};
+
+DataTable.defaultProps = {
+  // Define default props here
+};
+
+export default DataTable;

package/src/stories/Molecules/DataTable/DataTable.stories.jsx

@@ -0,0 +1,20 @@
+
+import { DataTable } from './DataTable';
+
+// Storybook configuration for DataTable component
+export default {
+  title: 'Molecules/Tables/DataTable',
+  component: DataTable,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/FileUpload/FileUpload.css

@@ -0,0 +1,4 @@
+
+.fileupload {
+  /* Default styles for FileUpload */
+}