manolis-ui 0.0.10 → 0.0.11

package/.github/workflows/deploy_and_publish.yml

@@ -0,0 +1,113 @@
+name: Deploy to GitHub Pages and npm
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0  # Important: Fetch all history for accurate version bumping
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      # --- Version Bumping ---
+      - name: Bump Version and Commit
+        id: version_bump
+        run: |
+          LAST_COMMIT_MESSAGE=$(git log -1 --pretty=%B)
+
+          if [[ "$LAST_COMMIT_MESSAGE" == *"BREAKING CHANGE"* ]]; then
+            BUMP_TYPE="major"
+          elif [[ "$LAST_COMMIT_MESSAGE" == *"feat:"* ]]; then
+            BUMP_TYPE="minor"
+          else
+            BUMP_TYPE="patch"
+          fi
+
+          # Get the current version
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+
+          # Determine the new version based on bump type (you might need to implement your own logic here)
+          if [[ "$BUMP_TYPE" == "major" ]]; then
+            NEW_VERSION=$(node -p "('${CURRENT_VERSION}'.split('.').map((x, i) => i === 0 ? parseInt(x) + 1 : 0)).join('.')")
+          elif [[ "$BUMP_TYPE" == "minor" ]]; then
+            NEW_VERSION=$(node -p "('${CURRENT_VERSION}'.split('.').map((x, i) => i === 1 ? parseInt(x) + 1 : (i > 1 ? 0 : x))).join('.')")
+          else
+            NEW_VERSION=$(node -p "('${CURRENT_VERSION}'.split('.').map((x, i) => i === 2 ? parseInt(x) + 1 : x)).join('.')")
+          fi
+
+          # Update package.json with the new version (using a temporary file)
+          TMP_FILE=$(mktemp)
+          node -p "JSON.stringify({...require('./package.json'), version: '$NEW_VERSION'}, null, 2)" > "$TMP_FILE"
+          mv "$TMP_FILE" package.json
+
+          # Validate JSON syntax
+          jq '.' package.json
+          
+          # Configure Git user
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+
+          # Stage and commit the changes
+          git add package.json
+          git commit -m "chore(release): v$NEW_VERSION [skip ci]"
+
+          # Now create the tag
+          git tag "v$NEW_VERSION"
+
+          echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
+        shell: bash
+
+      - name: Push changes
+        run: |
+          git push origin HEAD --tags
+        shell: bash
+
+
+      # --- Build ---
+      - name: Build Library
+        run: pnpm build  # Replace 'build' with your actual library build script
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+
+      - name: Deploy Storybook to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static
+
+      # --- Publish ---
+      # Step 6: Publish to npm
+      - name: Publish to npm
+        run: pnpm publish --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_ }} # Use the npm token stored in GitHub Secrets
+
+      # --- Push Changes (including new tag) ---
+      - name: Push Changes (including tag)
+        run: |
+          git config --global user.name "GitHub Actions Bot"
+          git config --global user.email "actions@github.com"
+          git push origin HEAD:master --follow-tags
+        if: success()  # Only push if the previous steps were successful

package/.storybook/main.ts

@@ -0,0 +1,34 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
+  addons: [
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-links",
+    "storybook-addon-vue-slots",
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        cssLoaderOptions: {
+          importLoaders: 1,
+        },
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    }    
+  ],
+
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+
+  docs: {
+    autodocs: true
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from "@storybook/vue3";
+import "../src/style.css"
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  tags: ["autodocs"]
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1,12 +1,8 @@
 {
   "name": "manolis-ui",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
-  "files": [
-    "dist/*",
-    "src/components/"
-  ],
   "main": "dist/manolis-ui.js",
   "module": "dist/manolis-ui.umd.js",
   "types": "./dist/index.d.ts",

package/postcss.config.js

@@ -0,0 +1,2 @@
+export default {
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue

@@ -0,0 +1,19 @@
+<!-- <script setup lang="ts">
+import { ref } from 'vue';
+import Input from './components/data-input/input.vue';
+// Reactive properties for input values
+const password = ref("");
+const email = ref("");
+
+// import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <div class="p-4">
+    <Input
+      v-model="password"
+      placeholder="Enter your username"
+      type="tel"
+    />
+  </div>
+</template> -->

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/composables/useLocalStorage.ts

@@ -0,0 +1,24 @@
+import { onMounted, ref, watch } from "vue";
+
+// composables/useLocalStorage.ts
+export const useLocalStorage = <T>(key: string, initialValue: T) => {
+    const storedValue = ref<T | null>(null);
+  
+    // Load value from localStorage on mount
+    onMounted(() => {
+      if (typeof window !== 'undefined') {
+        const stored = window.localStorage.getItem(key);
+        storedValue.value = stored ? JSON.parse(stored) : initialValue;
+      }
+    });
+  
+    // Watch the value and save it to localStorage when it changes
+    watch(storedValue, (newValue) => {
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(newValue));
+      }
+    });
+  
+    return storedValue;
+  };
+  

package/src/index.ts

@@ -0,0 +1,30 @@
+// actions src/components
+export { default as ButtonComponent } from './components/actions/ButtonComponent.vue';
+export { default as Dropdown } from './components/actions/dropdown.vue';
+export { default as Modal } from './components/actions/modal.vue';
+export { default as Swap } from './components/actions/swap.vue';
+export { default as ThemeController } from './components/actions/theme-controller.vue';
+
+// data display
+export { default as Accordion } from './components/data-display/accordion.vue';
+export { default as Avatar } from './components/data-display/avatar.vue';
+export { default as Badge } from './components/data-display/badge.vue';
+export { default as Card } from './components/data-display/card.vue';
+
+// data input
+export { default as AdvancedSearch } from './components/data-input/advancedSearch.vue';
+export { default as DatetimePicker } from './components/data-input/datetimePicker.vue';
+export { default as Rating } from './components/data-input/rating.vue';
+
+// feedback
+export { default as Loader } from "./components/feedback/loader.vue";
+
+// layout
+export { default as Footer } from "./components/layout/footer.vue";
+export { default as Hero } from "./components/layout/hero.vue";
+
+// navigation
+export { default as CategoryNavigation } from "./components/navigation/categoryNavigation.vue";
+export { default as NavigationBar } from "./components/navigation/navigationBar.vue";
+export { default as Tab } from "./components/navigation/tab.vue";
+

package/src/main.ts

@@ -0,0 +1,5 @@
+import './style.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/stories/actions/Button.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Button from "../../components/actions/ButtonComponent.vue"
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'Actions/Buttons',
+  component: Button,
+  parameters: {
+    slots: {
+      default: "Button",
+    },
+  },
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    outlined: { control: 'boolean' },
+    active: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    size: { control: 'select', options: ['wide', 'tiny', 'small', 'large'] },
+    shape: {control: 'select', options: ['square', 'circle']},
+    type: {
+      control: 'select',
+      options: ['neutral', 'primary', 'secondary', 'accent', 'ghost', 'link', 'info', 'success', 'warning', 'error']
+    },
+  },
+
+  args: {
+
+    // primary: false,
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    // onClick: fn(),
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+    args: {
+      type: 'primary',
+      default: 'Button',
+    },
+  };

package/src/stories/actions/Dropdown.stories.ts

@@ -0,0 +1,70 @@
+import Dropdown from '../../components/actions/dropdown.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Actions/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of dropdown items with `text` and `link`.',
+    },
+    position: {
+      control: 'select',
+      options: ['left', 'right', 'bottom', 'top'],
+      description: 'Controls the position of the dropdown relative to the button.',
+    },
+    floatPosition: {
+      control: 'select',
+      options: ['start', 'end'],
+      description: 'Determines the float position (start or end).',
+    },
+    openOnHover: {
+      control: 'boolean',
+      description: 'If true, the dropdown opens on hover.',
+    },
+    forceOpen: {
+      control: 'boolean',
+      description: 'If true, the dropdown remains open.',
+    },
+  },
+} as Meta<typeof Dropdown>;
+
+const Template: StoryFn<typeof Dropdown> = (args, { slots }) => ({
+  components: { Dropdown },
+  setup() {
+    return { args, slots };
+  },
+  template: `
+    <Dropdown v-bind="args">
+      <template #default>
+        <div class="btn m-1"><button>Custom Trigger</button></div>
+      </template>
+      <template #additional>
+        <div class="p-2 text-sm">Additional Slot Content</div>
+      </template>
+    </Dropdown>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    { text: 'Item 1', link: '#' },
+    { text: 'Item 2', link: '#' },
+    { text: 'Item 3', link: '#' },
+  ],
+  position: 'bottom',
+  floatPosition: 'start',
+  openOnHover: false,
+  forceOpen: false,
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component:
+        'A dropdown component with configurable props and slots for customization. Be sure to put a button in the default slot to get the desired results!',
+    },
+  },
+};

package/src/stories/actions/Modal.stories.ts

@@ -0,0 +1,56 @@
+import Modal from '../../components/actions/modal.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Actions/Modal',
+  component: Modal,
+  tags: ['autodocs'], // Added autodocs tag
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['top', 'bottom', 'center'],
+      description: 'Controls the position of the modal.',
+    },
+    withBackdrop: {
+      control: 'boolean',
+      description: 'If true, a backdrop is displayed behind the modal.',
+    },
+  },
+} as Meta<typeof Modal>;
+
+const Template: StoryFn<typeof Modal> = (args, { slots }) => ({
+  components: { Modal },
+  setup() {
+    return { args, slots };
+  },
+  template: `
+    <Modal v-bind="args">
+      <template #trigger>
+        <button class="btn">Custom Trigger</button>
+      </template>
+      <template #default>
+        <h2 class="text-xl font-bold">Modal Content</h2>
+        <p>This is an example modal.</p>
+      </template>
+      <template #actions>
+        <button class="btn btn-primary">Confirm</button>
+      </template>
+      <template #close-button>
+        <button class="btn btn-secondary">Dismiss</button>
+      </template>
+    </Modal>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  position: 'center',
+  withBackdrop: true,
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A customizable modal component with slots for trigger, content, actions, and a close button.',
+    },
+  },
+};

package/src/stories/actions/Swap.stories.ts

@@ -0,0 +1,56 @@
+import Swap from '../../components/actions/swap.vue'; // Adjust the path as per your setup
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Actions/Swap',
+  component: Swap,
+  tags: ['autodocs'], // Include autodocs tag
+  argTypes: {
+    effect: {
+      control: 'select',
+      options: ['rotate', 'flip'],
+      description: 'The effect applied to the swap component.',
+    },
+  },
+} as Meta<typeof Swap>;
+
+const Template: StoryFn<typeof Swap> = (args, { slots }) => ({
+  components: { Swap },
+  setup() {
+    return { args, slots };
+  },
+  template: `
+    <Swap v-bind="args">
+      <template #on>
+        <div class="text-green-500 font-bold">On</div>
+      </template>
+      <template #off>
+        <div class="text-red-500 font-bold">Off</div>
+      </template>
+    </Swap>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  effect: 'rotate',
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A swap component with optional effects and customizable slots for "on" and "off" states.',
+    },
+  },
+};
+
+export const FlipEffect = Template.bind({});
+FlipEffect.args = {
+  effect: 'flip',
+};
+FlipEffect.parameters = {
+  docs: {
+    description: {
+      story: 'This variant applies the "flip" effect to the swap component.',
+    },
+  },
+};

package/src/stories/actions/ThemeSwitcher.stories.ts

@@ -0,0 +1,41 @@
+import ThemeSwitcher from '../../components/actions/theme-controller.vue'; // Adjust the path as per your setup
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Actions/ThemeSwitcher',
+  component: ThemeSwitcher,
+  tags: ['autodocs'], // Include autodocs tag
+  argTypes: {
+    darkTheme: {
+      control: 'text',
+      description: "Define the name of your dark theme here",
+    },
+    lightTheme: {
+      control: 'text',
+      description: "Define the name of your light theme here",
+    }
+  },
+} as Meta<typeof ThemeSwitcher>;
+
+const Template: StoryFn<typeof ThemeSwitcher> = (args) => ({
+  components: { ThemeSwitcher },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ThemeSwitcher v-bind="args" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  darkTheme: 'reserveren-dark',
+  lightTheme: 'reserveren-light',
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A theme switcher component that toggles between light and dark themes with localStorage support.',
+    },
+  },
+};

package/src/stories/data-display/accordion.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Accordion from '../../components/data-display/accordion.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: 'Data Display/Accordion',
+    component: Accordion,
+    parameters: {
+        slots: {
+        },
+    },
+    // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    argTypes: {
+        name: {control: "text", type: "string"},
+        items: {control: "object"},
+        joinItems: {control: "boolean", description: "Glue every item together or seperate every item."},
+        icon: {control: "radio", options: ["arrow", "plus"]}
+    },
+
+    args: {
+        joinItems: false,
+        items: [
+            {
+                title: "item 1",
+                content: "this is some text you can adjust with a wysiwyg editor or just in plain text",
+            },
+            {
+                title: "item 2",
+                content: "this is also some text you can adjust with a <strong>wysiwyg</strong> editor or just in plain text/html",
+            }
+        ],
+    },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+    args: {
+        name: "demo-accordion",
+        joinItems: false,
+        icon: "plus",
+    },
+};