@unkn0wndo3s/nova-design-system 0.1.0

package/src/components/Notifications/notification.astro

@@ -0,0 +1,23 @@
+---
+import { CloseIcon } from "../Icons";
+
+
+export interface Props {
+  type:        'info' | 'success' | 'warning' | 'error';
+}
+const notificationUUID  = `notification-${Math.random().toString(36).substr(2, 9)}`;
+const { type } = Astro.props;
+---
+
+<div class={`notification notification__${type}`} role="alert" id={notificationUUID}>
+  <div class=`notification__${type}__content`>
+    <slot />
+  </div>
+  <button class={`notification__${type}__close`} aria-label="Close notification" onclick={`document.getElementById('${notificationUUID}')?.remove()`}>
+    <CloseIcon size={16} label="Close notification" />
+  </button>
+</div>
+
+<style lang="scss">
+@use './_notification.scss';
+</style>

package/src/components/Tabs/_tab.scss

@@ -0,0 +1,33 @@
+@use '../../styles/tokens/typography' as *;
+
+.tab {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nds-spacing-xs);
+    justify-content: center;
+    width: fit-content;
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        cursor: pointer;
+        padding: var(--nds-spacing-2xs);
+        @include text-base;
+
+        &--active {
+            color: var(--nds-primary);
+
+            &::after {
+                content: '';
+                display: block;
+                width: 120%;
+                height: 1px;
+                background-color: var(--nds-primary);
+                border-radius: var(--nds-radius-sm);
+            }
+        }
+    }
+}

package/src/components/Tabs/tab.astro

@@ -0,0 +1,54 @@
+---
+export interface Props {
+  id: string;
+  defaultActive?: string;
+}
+
+const { id, defaultActive } = Astro.props;
+---
+
+<div class="tab" data-tab-group id={id} data-default-active={defaultActive}>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-tab-group]').forEach((group) => {
+    const defaultActive = group.dataset.defaultActive;
+
+    function setActive(itemId: string) {
+      const groupId = group.id;
+
+      group.querySelectorAll<HTMLElement>('[data-tab-item]').forEach((item) => {
+        item.classList.toggle('tab__item--active', item.dataset.tabItem === itemId);
+        item.setAttribute('aria-selected', String(item.dataset.tabItem === itemId));
+      });
+
+      document.querySelectorAll<HTMLElement>(`[data-tab-content][data-tab-id="${groupId}"]`).forEach((content) => {
+        content.hidden = content.dataset.tabItemId !== itemId;
+      });
+
+      group.dispatchEvent(new CustomEvent('tab:change', {
+        detail: { itemId },
+        bubbles: true,
+      }));
+    }
+
+    const firstItem = group.querySelector<HTMLElement>('[data-tab-item]');
+    const initialId = defaultActive ?? firstItem?.dataset.tabItem ?? '';
+    if (initialId) setActive(initialId);
+
+    group.addEventListener('tab-item:click', (e: Event) => {
+      setActive((e as CustomEvent<{ itemId: string }>).detail.itemId);
+    });
+
+    group.addEventListener('tab:set', (e: Event) => {
+      setActive((e as CustomEvent<{ itemId: string }>).detail.itemId);
+    });
+
+    (group as any).setActiveTab = (itemId: string) => setActive(itemId);
+  });
+</script>
+
+<style lang="scss">
+@use './tab';
+</style>

package/src/components/Tabs/tabContent.astro

@@ -0,0 +1,21 @@
+---
+export interface Props {
+  id: string;
+  itemId: string;
+}
+
+const { id, itemId } = Astro.props;
+---
+
+<div
+  data-tab-content
+  data-tab-id={id}
+  data-tab-item-id={itemId}
+  hidden
+>
+  <slot />
+</div>
+
+<style lang="scss">
+@use './tab';
+</style>

package/src/components/Tabs/tabItem.astro

@@ -0,0 +1,41 @@
+---
+export interface Props {
+  id: string;
+}
+
+const { id } = Astro.props;
+---
+
+<div
+  class="tab__item"
+  data-tab-item={id}
+  role="tab"
+  aria-selected="false"
+  tabindex="0"
+>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-tab-item]').forEach((item) => {
+    function notify() {
+      const group = item.closest('[data-tab-group]');
+      if (!group) return;
+      group.dispatchEvent(new CustomEvent('tab-item:click', {
+        detail: { itemId: item.dataset.tabItem },
+      }));
+    }
+
+    item.addEventListener('click', notify);
+    item.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        notify();
+      }
+    });
+  });
+</script>
+
+<style lang="scss">
+@use './tab';
+</style>

package/src/components/Toggle/_toggle.scss

@@ -0,0 +1,33 @@
+.toggle {
+    background-color: var(--nds-disabled);
+    border-radius: var(--nds-radius-full);
+    padding: var(--nds-spacing-2xs);
+    width: 50px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    cursor: pointer;
+    transition: background-color 160ms ease;
+    position: relative;
+    &-switch {
+        color: var(--nds-text);
+        width: 15px;
+        height: 15px;
+        background-color: var(--nds-text);
+        border-radius: var(--nds-radius-full);
+        position: absolute;
+        left: var(--nds-spacing-2xs);
+        top: 50%;
+        transform: translateY(-50%);
+        transition: left 160ms ease, background-color 160ms ease, transform 160ms ease;
+    }
+    &-active {
+        display: flex;
+        justify-content: right;
+        background-color: var(--nds-primary);
+        .toggle-switch {
+            left: calc(100% - var(--nds-spacing-2xs) - 15px);
+        }
+    }
+}

package/src/components/Toggle/toggle.astro

@@ -0,0 +1,62 @@
+---
+import { boolean } from 'astro:schema';
+
+export interface Props {
+    'data-checked': boolean;
+    name?: string;
+    id: string;
+}
+
+const { 'data-checked': dataChecked = 'false', name = 'toggle', id } = Astro.props;
+---
+
+<toggle-switch data-checked={dataChecked} data-name={name} id={id}>
+    <div class="toggle">
+        <div class="toggle-switch"></div>
+    </div>
+</toggle-switch>
+
+<script>
+    class ToggleSwitch extends HTMLElement {
+        private _checked: boolean = false;
+
+        connectedCallback() {
+            this._checked = this.dataset.checked === 'true';
+            this.updateUI();
+
+            this.querySelector('.toggle')?.addEventListener('click', () => {
+                this.toggle();
+            });
+        }
+
+        toggle() {
+            this._checked = !this._checked;
+            this.updateUI();
+
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { checked: this._checked, name: this.dataset.name },
+                bubbles: true, 
+                composed: true,
+            }));
+        }
+        set checked(value: boolean) {
+            this._checked = value;
+            this.updateUI();
+        }
+
+        get checked() {
+            return this._checked;
+        }
+
+        private updateUI() {
+            this.dataset.checked = String(this._checked);
+            this.querySelector('.toggle')?.classList.toggle('toggle-active', this._checked);
+        }
+    }
+
+    customElements.define('toggle-switch', ToggleSwitch);
+</script>
+
+<style lang="scss">
+@use './_toggle.scss';
+</style>

package/src/components/index.ts

@@ -0,0 +1,10 @@
+// Auto-generated by scripts/generate-barrel.mjs — do not edit manually.
+
+export * from './Icons/index.ts';
+export { default as Notification } from './Notifications/notification.astro';
+export { default as Toggle }       from './Toggle/toggle.astro';
+export { default as Tab }          from './Tabs/tab.astro';
+export { default as TabItem }      from './Tabs/tabItem.astro';
+export { default as TabContent }   from './Tabs/tabContent.astro';
+export { default as Button }       from './Button/button.astro';
+export { default as Link }         from './Link/link.astro';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/index.ts';

package/src/layouts/Layout.astro

@@ -0,0 +1,29 @@
+---
+import '../styles/index.scss';
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Nova Design System</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		width: 100%;
+		min-height: 100%;
+		font-family: var(--nds-font-family-base);
+		background-color: var(--nds-page-low);
+		color: var(--nds-default);
+	}
+</style>

package/src/pages/index.astro

@@ -0,0 +1,338 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Notification from '../components/Notifications/notification.astro';
+import Toggle from '../components/Toggle/toggle.astro';
+import Tab from '../components/Tabs/tab.astro';
+import TabItem from '../components/Tabs/tabItem.astro';
+import TabContent from '../components/Tabs/tabContent.astro';
+import Button from '../components/Button/button.astro';
+import Link from '../components/Link/link.astro';
+import ListItem from '../components/ListItem/listItem.astro';
+import ListItemTitle from '../components/ListItem/listItemTitle.astro';
+import ListItemSubtitle from '../components/ListItem/listItemSubtitle.astro';
+import {
+  Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
+  CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
+  LinkIcon, MinusIcon, MoreIcon, OverviewIcon, PlusIcon, ProfileIcon,
+  SearchIcon, SettingsIcon, ShareIcon, ShieldIcon, SortIcon, StatsIcon,
+  UploadIcon,
+} from '../components/Icons/index.ts';
+
+const initialChecked = true;
+---
+
+<Layout>
+  <main>
+    <h1>Nova Design System</h1>
+    <section>
+      <h2>List Item</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <ListItem>
+          <ListItemTitle>List Item Title</ListItemTitle>
+          <ListItemSubtitle>List Item Subtitle</ListItemSubtitle>
+        </ListItem>
+      </div>
+    </section>
+    <section>
+      <h2>Link</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Link url="https://example.com">Example Link</Link>
+        <Link url="https://example.com" blank={true}>Example Link (opens in new tab)</Link>
+      </div>
+    </section>
+    <section>
+      <h2>Button</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Button type="primary">Primary Button</Button>
+        <Button type="secondary">Secondary Button</Button>
+        <Button type="primary" disabled>disabled</Button>
+      </div>
+    </section>
+    <section>
+      <h2>Tabs</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Tab id="my-tab" defaultActive="images">
+          <TabItem id="images">images</TabItem>
+          <TabItem id="videos">Videos</TabItem>
+          <TabItem id="docs">Documents</TabItem>
+        </Tab>
+        <TabContent id="my-tab" itemId="images">
+          <p>my images</p>
+        </TabContent>
+
+        <TabContent id="my-tab" itemId="videos">
+          <p>Video player here</p>
+        </TabContent>
+
+        <TabContent id="my-tab" itemId="docs">
+          <p>Document list here</p>
+        </TabContent>
+      </div>
+    </section>
+    <section>
+      <h2>Toggle</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Toggle data-checked={initialChecked} data-name="notifications" id="my-toggle" />
+        <p id="toggle-state">State: {initialChecked ? 'Checked' : 'Unchecked'}</p>
+      </div>
+    </section>
+    <section>
+      <h2>Notifications — Error / Warning / Success / Info</h2>
+      <div style="max-width: 400px; display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Notification type="error">
+            An error occurred during the operation. Please try again.
+        </Notification>
+        <Notification type="success">
+            The operation was completed successfully.
+        </Notification>
+        <Notification type="warning">
+            A warning occurred during the operation. Please check the details.
+        </Notification>
+        <Notification type="info">
+            Information about the operation.
+        </Notification>
+      </div>
+    </section>
+    <section>
+      <h2>Icon — 16 / 24 / 32</h2>
+      <div class="icon-grid">
+        <div class="icon-row">
+          <Arrow2Icon size={16} orientation="up" />
+          <Arrow2Icon size={16} orientation="right" />
+          <Arrow2Icon size={16} orientation="down" />
+          <Arrow2Icon size={16} orientation="left" />
+        </div>
+        <div class="icon-row">
+          <Arrow2Icon size={24} orientation="up" />
+          <Arrow2Icon size={24} orientation="right" />
+          <Arrow2Icon size={24} orientation="down" />
+          <Arrow2Icon size={24} orientation="left" />
+        </div>
+        <div class="icon-row">
+          <Arrow2Icon size={32} orientation="up" />
+          <Arrow2Icon size={32} orientation="right" />
+          <Arrow2Icon size={32} orientation="down" />
+          <Arrow2Icon size={32} orientation="left" />
+        </div>
+        <div class="icon-row">
+          <ProfileIcon size={16} />
+          <ProfileIcon size={24} />
+          <ProfileIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <ShareIcon size={16} />
+          <ShareIcon size={24} />
+          <ShareIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <SearchIcon size={16} />
+          <SearchIcon size={24} />
+          <SearchIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CloseIcon size={16} />
+          <CloseIcon size={24} />
+          <CloseIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <UploadIcon size={16} />
+          <UploadIcon size={24} />
+          <UploadIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <BinIcon size={16} />
+          <BinIcon size={24} />
+          <BinIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <BurgerIcon size={16} />
+          <BurgerIcon size={24} />
+          <BurgerIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CalendarIcon size={16} />
+          <CalendarIcon size={24} />
+          <CalendarIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CheckIcon size={16} />
+          <CheckIcon size={24} />
+          <CheckIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CodeIcon size={16} />
+          <CodeIcon size={24} />
+          <CodeIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CubeIcon size={16} />
+          <CubeIcon size={24} />
+          <CubeIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <DownloadIcon size={16} />
+          <DownloadIcon size={24} />
+          <DownloadIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <FilterIcon size={16} />
+          <FilterIcon size={24} />
+          <FilterIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <HelpIcon size={16} />
+          <HelpIcon size={24} />
+          <HelpIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <HomeIcon size={16} />
+          <HomeIcon size={24} />
+          <HomeIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <LinkIcon size={16} />
+          <LinkIcon size={24} />
+          <LinkIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <MinusIcon size={16} />
+          <MinusIcon size={24} />
+          <MinusIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <MoreIcon size={16} />
+          <MoreIcon size={24} />
+          <MoreIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <OverviewIcon size={16} />
+          <OverviewIcon size={24} />
+          <OverviewIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <PlusIcon size={16} />
+          <PlusIcon size={24} />
+          <PlusIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <SettingsIcon size={16} />
+          <SettingsIcon size={24} />
+          <SettingsIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <ShieldIcon size={16} />
+          <ShieldIcon size={24} />
+          <ShieldIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <SortIcon size={16} variant="default" />
+          <SortIcon size={16} variant="ascend" />
+          <SortIcon size={16} variant="descend" />
+          <SortIcon size={24} variant="default" />
+          <SortIcon size={24} variant="ascend" />
+          <SortIcon size={24} variant="descend" />
+          <SortIcon size={32} variant="default" />
+          <SortIcon size={32} variant="ascend" />
+          <SortIcon size={32} variant="descend" />
+        </div>
+        <div class="icon-row">
+          <StatsIcon size={16} />
+          <StatsIcon size={24} />
+          <StatsIcon size={32} />
+        </div>
+      </div>
+    </section>
+  </main>
+</Layout>
+
+<script>
+    const toggle = document.getElementById('my-toggle') as any;
+    const stateLabel = document.getElementById('toggle-state');
+
+    // Défaut: thème sombre
+    if (!document.documentElement.hasAttribute('data-theme')) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+    if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
+
+    toggle?.addEventListener('change', (e: CustomEvent) => {
+      const { checked } = e.detail;
+
+      if (checked) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
+      } else {
+        document.documentElement.setAttribute('data-theme', 'light');
+        if (stateLabel) stateLabel.textContent = 'Thème : Clair';
+      }
+    });
+</script>
+
+<style lang="scss" scoped>
+
+  body {
+    background-color: var(--nds-background);
+    color: var(--nds-text);
+  }
+  
+  main {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: var(--nds-spacing-xl) var(--nds-spacing-md);
+  }
+
+  h1 {
+    font-size: var(--nds-type-h1-size);
+    font-weight: var(--nds-type-h1-weight);
+    line-height: var(--nds-type-h1-line-height);
+    letter-spacing: var(--nds-type-h1-letter-spacing);
+    margin-bottom: var(--nds-spacing-xl);
+  }
+
+  h2 {
+    font-size: var(--nds-type-h2-size);
+    font-weight: var(--nds-type-h2-weight);
+    line-height: var(--nds-type-h2-line-height);
+    letter-spacing: var(--nds-type-h2-letter-spacing);
+    color: var(--nds-text-muted);
+    margin-bottom: var(--nds-spacing-md);
+  }
+
+  section {
+    margin-bottom: var(--nds-spacing-2xl);
+  }
+
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nds-spacing-sm);
+  }
+
+  .icon-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nds-spacing-xs);
+  }
+
+  .icon-row {
+    display: flex;
+    align-items: center;
+    gap: var(--nds-spacing-lg);
+    color: var(--nds-text);
+  }
+
+  .icon-name {
+    font-size: var(--nds-type-body-small-size);
+    color: var(--nds-text-muted);
+    width: 100px;
+    flex-shrink: 0;
+  }
+
+  .icon-sizes {
+    display: flex;
+    align-items: center;
+    gap: var(--nds-spacing-md);
+    color: var(--nds-default);
+  }
+</style>

package/src/styles/index.scss

@@ -0,0 +1,10 @@
+@use 'tokens/colors';
+@use 'tokens/typography';
+@use 'tokens/spacing';
+
+// Global reset (opt-in)
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}