Feat/tabs

.changeset/afraid-camels-itch.md

@@ -0,0 +1,7 @@
+---
+'@cocokits/angular-components': minor
+---
+
+- Add Avatar component
+- Add Accordion component
+- Add Tabs component

.changeset/cuddly-tigers-cheer.md

@@ -0,0 +1,7 @@
+---
+'@cocokits/core': minor
+---
+
+- Add Avatar component
+- Add Accordion component
+- Add Tabs component

.changeset/funny-gifts-share.md

@@ -0,0 +1,6 @@
+---
+'@cocokits/angular-tabs': minor
+'@cocokits/react-tabs': minor
+---
+
+- Add Tabs component

.changeset/gentle-tables-happen.md

@@ -0,0 +1,6 @@
+---
+'@cocokits/angular-avatar': minor
+'@cocokits/react-avatar': minor
+---
+
+- Add Avatar component

.changeset/giant-pets-judge.md

@@ -0,0 +1,7 @@
+---
+'@cocokits/react-components': minor
+---
+
+- Add Avatar component
+- Add Accordion component
+- Add Tabs component

.changeset/olive-rules-visit.md

@@ -0,0 +1,7 @@
+---
+'@cocokits/common-utils': minor
+---
+
+- Add Animation
+- Add Math
+- Add common model

.changeset/six-kids-call.md

@@ -0,0 +1,6 @@
+---
+'@cocokits/react-utils': minor
+---
+
+- Add Feature Store
+- Add Animation, onInit, onDestroy, selection, slotChildren hooks

.changeset/ten-pots-think.md

@@ -0,0 +1,8 @@
+---
+'@cocokits/theme-cocokits': minor
+'@cocokits/theme-frames-x': minor
+---
+
+- Add Avatar styles
+- Add Accordion styles
+- Add Tabs styles

.changeset/wise-lions-watch.md

@@ -0,0 +1,6 @@
+---
+'@cocokits/angular-accordion': minor
+'@cocokits/react-accordion': minor
+---
+
+- Add Accordion component

.github/workflows/main-branch-pull-request.yml

@@ -29,7 +29,7 @@ jobs:
         run: pnpm exec nx run cocokits:depcheck
 
       - name: Build All
-        run: pnpm nx affected:build --base=main --head=HEAD --parallel=4
+        run: pnpm nx affected:build --base=main --head=HEAD --exclude=website --parallel=4
 
       - name: Test
-        run: pnpm nx affected:test --base=main --head=HEAD --exclude=cocokits --parallel=1
+        run: pnpm nx affected:test --base=main --head=HEAD --exclude=cocokits,website --parallel=1

apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx

@@ -167,6 +167,8 @@ export function getMergeThemesStep3Scss() {
 @include Cocokits.components_accordion;
 @include Cocokits.components_accordion_header;
 @include Cocokits.components_accordion_panel;
+@include Cocokits.components_tabs;
+@include Cocokits.components_tab;
 
   `);
 }

apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md

@@ -0,0 +1,21 @@
+The `tabs` component form `@cocokits` provides a flexible tabs component for Angular applications. Designed for performance, it supports custom templates, programmatic control, and adaptive behaviors for complex UI scenarios.
+
+## features
+
+- **Custom Header Templates:**
+Fully customize tab headers using Angular templates
+
+- **Animation Control:**
+Toggle transition animations
+
+- **Disabled Tabs:**
+Disable individual tabs using [disabled] property
+
+- **Imperative Control:**
+Programmatically activate tabs
+
+- **Tab Align:**
+Configure tab headers alignment (left/right/center/stretch)
+
+- **Content Persistence:**
+Option to preserve DOM state when switching tabs

apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts

@@ -0,0 +1,66 @@
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+
+import { TabComponent, TabsComponent } from '@cocokits/angular-tabs';
+import {
+  ngArgType,
+  StoriesMeta,
+  withThemeConfigProvider,
+  withWrapperDecorator,
+} from '@cocokits/storybook-addon-theme-angular';
+
+import descriptionMd from './description.md';
+
+export { Default } from './overview/default.stories';
+export { Type } from './overview/type.stories';
+export { Size } from './overview/size.stories';
+export { Color } from './overview/color.stories';
+export { Disabled } from './overview/disabled.stories';
+export { CustomHeader } from './overview/custom-header.stories';
+export { Control } from './overview/control.stories';
+
+const meta: StoriesMeta = {
+  component: TabsComponent,
+  title: 'UI Components/Tabs',
+  tags: ['status:new'],
+  subcomponents: [TabComponent],
+  decorators: [
+    withWrapperDecorator({ insideBox: true }, { width: '500px' }),
+    applicationConfig({
+      providers: [withThemeConfigProvider()],
+    }),
+    moduleMetadata({
+      imports: [TabComponent],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+    cckAddon: {
+      componentName: 'tabs',
+      subcomponents: {
+        TabComponent: {
+          name: 'tab',
+          description: 'The Tab component represents a single tab within the Tabs component.',
+          argsTypes: {
+            ...ngArgType({ name: 'disabled', type: 'boolean', defaultValue: 'false' }),
+            ...ngArgType({ name: 'header', type: 'string', defaultValue: '' }),
+            ...ngArgType({ name: 'value', type: 'TValue', defaultValue: '' }),
+          },
+        },
+      },
+    },
+  },
+  argTypes: {
+    ...ngArgType({ name: 'change', category: 'outputs', type: 'TabSelectionChangeEvent' }),
+    ...ngArgType({ name: 'selectedChange', type: 'TValue' }),
+    ...ngArgType({ name: 'selectedIndexChange', type: 'number' }),
+    ...ngArgType({ name: 'headerAlign', type: `left | center | right | stretch`, defaultValue: 'left' }),
+    ...ngArgType({ name: 'hideContent', type: `boolean`, defaultValue: 'false' }),
+    ...ngArgType({ name: 'instantAnimation', type: `boolean`, defaultValue: 'false' }),
+    ...ngArgType({ name: 'selectedIndex', defaultValue: '0' }),
+  },
+};
+export default meta;

apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts

@@ -0,0 +1,54 @@
+import { TabsComponent } from '@cocokits/angular-tabs';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<TabsComponent> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Color options enable seamless integration with various themes or to highlight specific actions.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.color.values.map(color => { %>
+
+            <!------------ <%= color %> ------------>
+            <cck-tabs
+              <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+              color='<%= color %>'
+              [hideContent]="true"
+            >
+              <cck-tab header="Header 1"/>
+              <cck-tab header="Header 2"/>
+              <cck-tab header="Header 3"/>
+            </cck-tabs>
+          <% }) %>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
+        <cck-tabs [type]="cckControl.type" [color]="color" [hideContent]="true">
+          <cck-tab header="Header 1"/>
+            <cck-tab header="Header 2"/>
+            <cck-tab header="Header 3"/>
+        </cck-tabs>
+      }
+    `,
+  }),
+};