@300codes/design-system 1.0.0

package/src/components/SelectInputField/SelectInputField.stories.ts

@@ -0,0 +1,141 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { SelectInputFieldProps } from './SelectInputField.vue';
+import SelectInputField from './SelectInputField.vue';
+
+const OPTIONS = [
+  { value: 'pl', label: 'Poland' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+  { value: 'es', label: 'Spain' },
+  { value: 'it', label: 'Italy' },
+];
+
+const meta: Meta<SelectInputFieldProps> = {
+  title: 'Form/SelectInputField',
+  component: SelectInputField as unknown as ConcreteComponent<SelectInputFieldProps>,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({ template: '<div style="max-width: 25rem; width: 100%;"><story /></div>' }),
+  ],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    invalid: { control: 'boolean' },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SelectInputFieldProps>;
+
+export const Default: Story = {
+  args: {
+    name: 'country',
+    label: 'Country',
+    options: OPTIONS,
+    placeholder: 'Select country',
+    size: 'md',
+  },
+  render: (args: SelectInputFieldProps) => ({
+    components: { SelectInputField },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SelectInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const WithMessage: Story = {
+  args: {
+    name: 'country',
+    label: 'Country',
+    options: OPTIONS,
+    placeholder: 'Select country',
+    message: 'Please select a country',
+    invalid: true,
+  },
+  render: (args: SelectInputFieldProps) => ({
+    components: { SelectInputField },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SelectInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Valid: Story = {
+  args: {
+    name: 'country',
+    label: 'Country',
+    options: OPTIONS,
+    placeholder: 'Select country',
+    invalid: false,
+  },
+  render: (args: SelectInputFieldProps) => ({
+    components: { SelectInputField },
+    setup() {
+      const value = ref('de');
+      return { args, value };
+    },
+    template: '<SelectInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Required: Story = {
+  args: {
+    name: 'country',
+    label: 'Country',
+    options: OPTIONS,
+    placeholder: 'Select country',
+    required: true,
+  },
+  render: (args: SelectInputFieldProps) => ({
+    components: { SelectInputField },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SelectInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    name: 'country',
+    label: 'Country',
+    options: OPTIONS,
+    placeholder: 'Select country',
+    disabled: true,
+  },
+  render: (args: SelectInputFieldProps) => ({
+    components: { SelectInputField },
+    setup() {
+      const value = ref('pl');
+      return { args, value };
+    },
+    template: '<SelectInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { SelectInputField },
+    setup() {
+      const sm = ref('');
+      const md = ref('');
+      const lg = ref('');
+      return { sm, md, lg, OPTIONS };
+    },
+    template: `
+      <div class="flex flex-col gap-4 w-80">
+        <SelectInputField name="sm" label="Small" size="sm" placeholder="Select..." :options="OPTIONS" v-model="sm" />
+        <SelectInputField name="md" label="Medium" size="md" placeholder="Select..." :options="OPTIONS" v-model="md" />
+        <SelectInputField name="lg" label="Large" size="lg" placeholder="Select..." :options="OPTIONS" v-model="lg" />
+      </div>
+    `,
+  }),
+};

package/src/components/SelectInputField/SelectInputField.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import SelectInput from '../SelectInput/SelectInput.vue';
+import LabelInput from '../LabelInput/LabelInput.vue';
+import type { SelectOption } from '../SelectInput/SelectInput.vue';
+
+export interface SelectInputFieldProps {
+  name: string;
+  label: string;
+  id?: string;
+  options: readonly SelectOption[];
+  placeholder?: string;
+  mobileTitle?: string;
+  message?: string;
+  invalid?: boolean | null;
+  required?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  hasStatus?: boolean;
+}
+
+const props = withDefaults(defineProps<SelectInputFieldProps>(), {
+  id: undefined,
+  placeholder: '',
+  mobileTitle: undefined,
+  size: 'md',
+  invalid: null,
+  message: '',
+  disabled: false,
+  hasStatus: false,
+});
+
+const model = defineModel<string>({ required: true });
+
+const selectInvalid = computed(() =>
+  typeof props.invalid === 'boolean' ? props.invalid : undefined,
+);
+</script>
+
+<template>
+  <LabelInput
+    :name="id || name"
+    :label="label"
+    :message="message"
+    :required="required"
+    :invalid="invalid"
+    :disabled="disabled"
+    :size="size"
+    :has-status="hasStatus"
+  >
+    <SelectInput
+      :id="id"
+      v-model="model"
+      :name="name"
+      :options="options"
+      :placeholder="placeholder"
+      :mobile-title="mobileTitle"
+      :invalid="selectInvalid"
+      :required="required"
+      :disabled="disabled"
+      :size="size"
+    />
+  </LabelInput>
+</template>

package/src/components/SelectInputField/index.ts

@@ -0,0 +1,2 @@
+export { default as SelectInputField } from './SelectInputField.vue';
+export type { SelectInputFieldProps } from './SelectInputField.vue';

package/src/components/SimpleButton/SimpleButton.stories.ts

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { SimpleButtonProps } from './SimpleButton.vue';
+import SimpleButton from './SimpleButton.vue';
+
+const meta: Meta<SimpleButtonProps> = {
+  title: 'Components/SimpleButton',
+  component: SimpleButton as unknown as ConcreteComponent<SimpleButtonProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+    },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+    },
+    loading: { control: 'boolean' },
+    full: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    href: { control: 'text' },
+    target: { control: 'text' },
+    rel: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SimpleButtonProps>;
+
+export const Primary: Story = {
+  args: { variant: 'primary', size: 'md' },
+  render: (args: SimpleButtonProps) => ({
+    components: { SimpleButton },
+    setup() {
+      return { args };
+    },
+    template: '<SimpleButton v-bind="args">Button label</SimpleButton>',
+  }),
+};
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', size: 'md' },
+  render: (args: SimpleButtonProps) => ({
+    components: { SimpleButton },
+    setup() {
+      return { args };
+    },
+    template: '<SimpleButton v-bind="args">Button label</SimpleButton>',
+  }),
+};
+
+export const Tertiary: Story = {
+  args: { variant: 'tertiary', size: 'md' },
+  render: (args: SimpleButtonProps) => ({
+    components: { SimpleButton },
+    setup() {
+      return { args };
+    },
+    template: '<SimpleButton v-bind="args">Button label</SimpleButton>',
+  }),
+};
+
+export const Loading: Story = {
+  args: { variant: 'primary', size: 'md', loading: true },
+  render: (args: SimpleButtonProps) => ({
+    components: { SimpleButton },
+    setup() {
+      return { args };
+    },
+    template: '<SimpleButton v-bind="args">Button label</SimpleButton>',
+  }),
+};
+
+export const Disabled: Story = {
+  args: { variant: 'primary', size: 'md', disabled: true },
+  render: (args: SimpleButtonProps) => ({
+    components: { SimpleButton },
+    setup() {
+      return { args };
+    },
+    template: '<SimpleButton v-bind="args">Button label</SimpleButton>',
+  }),
+};
+
+export const AsLink: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    href: 'https://example.com',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  } satisfies SimpleButtonProps,
+  render: (args: SimpleButtonProps) => ({
+    components: { SimpleButton },
+    setup() {
+      return { args };
+    },
+    template: '<SimpleButton v-bind="args">Open link</SimpleButton>',
+  }),
+};
+
+export const AsButtonSubmit: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    type: 'submit',
+  } satisfies SimpleButtonProps,
+  render: (args: SimpleButtonProps) => ({
+    components: { SimpleButton },
+    setup() {
+      return { args };
+    },
+    template: '<SimpleButton v-bind="args">Submit form</SimpleButton>',
+  }),
+};
+
+export const FullWidth: Story = {
+  args: { variant: 'primary', size: 'md', full: true },
+  render: (args: SimpleButtonProps) => ({
+    components: { SimpleButton },
+    setup() {
+      return { args };
+    },
+    template: '<SimpleButton v-bind="args">Full width</SimpleButton>',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { SimpleButton },
+    template: `
+      <div class="flex items-center gap-4">
+        <SimpleButton size="sm">Small</SimpleButton>
+        <SimpleButton size="md">Medium</SimpleButton>
+      </div>
+    `,
+  }),
+};

package/src/components/SimpleButton/SimpleButton.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue';
+
+export interface SimpleButtonProps {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  size?: 'sm' | 'md';
+  loading?: boolean;
+  full?: boolean;
+  disabled?: boolean;
+  href?: string;
+  type?: ButtonHTMLAttributes['type'];
+  name?: ButtonHTMLAttributes['name'];
+  value?: ButtonHTMLAttributes['value'];
+  target?: AnchorHTMLAttributes['target'];
+  rel?: AnchorHTMLAttributes['rel'];
+  download?: AnchorHTMLAttributes['download'];
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<SimpleButtonProps>(), {
+  variant: 'primary',
+  size: 'md',
+  loading: false,
+  full: false,
+  disabled: false,
+  href: undefined,
+  type: undefined,
+  name: undefined,
+  value: undefined,
+  target: undefined,
+  rel: undefined,
+  download: undefined,
+  ariaLabel: undefined,
+});
+
+const tag = computed(() => (props.href ? 'a' : 'button'));
+
+const nativeAttrs = computed((): Record<string, unknown> => {
+  if (props.href) {
+    const isInactive = props.disabled || props.loading;
+    return {
+      href: isInactive ? undefined : props.href,
+      target: props.target,
+      rel: props.rel,
+      download: props.download,
+      'aria-disabled': isInactive ? 'true' : undefined,
+      'aria-label': props.ariaLabel,
+      tabindex: isInactive ? -1 : undefined,
+    };
+  }
+  return {
+    type: props.type ?? 'button',
+    disabled: props.disabled || props.loading,
+    name: props.name,
+    value: props.value,
+    'aria-label': props.ariaLabel,
+  };
+});
+</script>
+
+<template>
+  <component
+    :is="tag"
+    v-bind="nativeAttrs"
+    :aria-busy="props.loading ? 'true' : undefined"
+    :class="[
+      'simpleButton',
+      `simpleButton--${props.variant}`,
+      `simpleButton--${props.size}`,
+      'outline-offset-2 relative inline-flex items-center justify-center select-none cursor-pointer',
+      {
+        'w-full': props.full,
+        'simpleButton--loading': props.loading,
+        'simpleButton--disabled': props.disabled || props.loading,
+      },
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.simpleButton {
+  --_fg: var(--simpleButton-fg, #ffffff);
+  background-color: var(--simpleButton-bg, #0024d6);
+  color: var(--_fg);
+  border: var(--simpleButton-border-width, 1px) solid var(--simpleButton-border, #0024d6);
+  border-radius: var(--simpleButton-radius, 3.5rem);
+  padding: var(--simpleButton-py, 0.375rem) var(--simpleButton-px, 1.5rem);
+  min-height: var(--simpleButton-min-h, 3.5rem);
+  font-size: var(--simpleButton-font-size, 1rem);
+  font-weight: var(--simpleButton-font-weight, 600);
+  line-height: 1.2;
+  gap: var(--simpleButton-gap, 1rem);
+}
+
+.simpleButton:hover:not(.simpleButton--disabled) {
+  background-color: var(--simpleButton-bg-hover, #0e161b);
+  color: var(--simpleButton-fg-hover, var(--_fg));
+  border-color: var(--simpleButton-border-hover, #0e161b);
+}
+
+.simpleButton:focus-visible {
+  outline: 2px solid var(--simpleButton-ring, #0066cc);
+}
+
+.simpleButton--disabled {
+  --_fg: var(--simpleButton-disabled-fg, #89979f);
+  background-color: var(--simpleButton-disabled-bg, #f3f5f7);
+  color: var(--_fg);
+  border-color: var(--simpleButton-disabled-border, #f3f5f7);
+
+  @apply cursor-not-allowed pointer-events-none;
+}
+
+/* ── secondary ── */
+
+.simpleButton--secondary {
+  --_fg: var(--simpleButton-secondary-fg, #0e161b);
+  background-color: var(--simpleButton-secondary-bg, #f3f5f7);
+  color: var(--_fg);
+  border-color: var(--simpleButton-secondary-border, #f3f5f7);
+}
+
+.simpleButton--secondary:hover:not(.simpleButton--disabled) {
+  background-color: var(--simpleButton-secondary-bg-hover, #0e161b);
+  color: var(--simpleButton-secondary-fg-hover, #ffffff);
+  border-color: var(--simpleButton-secondary-border-hover, #0e161b);
+}
+
+.simpleButton--secondary:focus-visible {
+  outline: 2px solid var(--simpleButton-secondary-ring, #0066cc);
+}
+
+.simpleButton--secondary.simpleButton--disabled {
+  --_fg: var(--simpleButton-secondary-disabled-fg, #89979f);
+  background-color: var(--simpleButton-secondary-disabled-bg, #f3f5f7);
+  color: var(--_fg);
+  border-color: var(--simpleButton-secondary-disabled-border, #f3f5f7);
+}
+
+/* ── tertiary ── */
+
+.simpleButton--tertiary {
+  --_fg: var(--simpleButton-tertiary-fg, #0e161b);
+  background-color: var(--simpleButton-tertiary-bg, transparent);
+  color: var(--_fg);
+  border-color: var(--simpleButton-tertiary-border, transparent);
+}
+
+.simpleButton--tertiary:hover:not(.simpleButton--disabled) {
+  background-color: var(--simpleButton-tertiary-bg-hover, #f3f4f6);
+  color: var(--simpleButton-tertiary-fg-hover, var(--_fg));
+  border-color: var(--simpleButton-tertiary-border-hover, #f3f4f6);
+}
+
+.simpleButton--tertiary:focus-visible {
+  outline: 2px solid var(--simpleButton-tertiary-ring, #0066cc);
+}
+
+.simpleButton--tertiary.simpleButton--disabled {
+  --_fg: var(--simpleButton-tertiary-disabled-fg, #89979f);
+  background-color: var(--simpleButton-tertiary-disabled-bg, transparent);
+  color: var(--_fg);
+  border-color: var(--simpleButton-tertiary-disabled-border, transparent);
+}
+
+/* ── sm ── */
+
+.simpleButton--sm {
+  padding: var(--simpleButton-sm-py, 0.25rem) var(--simpleButton-sm-px, 1rem);
+  font-size: var(--simpleButton-sm-font-size, 0.875rem);
+  font-weight: var(--simpleButton-sm-font-weight, 600);
+  min-height: var(--simpleButton-sm-min-h, 2.5rem);
+  gap: var(--simpleButton-sm-gap, 0.625rem);
+}
+
+/* ── loading ── */
+
+.simpleButton--loading {
+  color: transparent !important;
+}
+
+.simpleButton--loading::after {
+  content: '';
+  border-color: var(--_fg);
+
+  @apply absolute top-1/2 left-1/2 w-4 h-4 -mt-2 -ml-2 border-2 border-solid border-t-transparent border-b-transparent rounded-full animate-spin;
+}
+</style>

package/src/components/SimpleButton/index.ts

@@ -0,0 +1,2 @@
+export { default as SimpleButton } from './SimpleButton.vue';
+export type { SimpleButtonProps } from './SimpleButton.vue';

package/src/components/TabsList/TabsList.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import { ref } from 'vue';
+import type { TabsListProps } from './TabsList.vue';
+import TabsList from './TabsList.vue';
+
+const meta: Meta<TabsListProps> = {
+  title: 'Components/TabsList',
+  component: TabsList as unknown as ConcreteComponent<TabsListProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+    },
+    items: { control: 'object' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TabsListProps>;
+
+const defaultItems = [
+  { label: 'Overview', value: 'overview' },
+  { label: 'Analytics', value: 'analytics' },
+  { label: 'Reports', value: 'reports' },
+  { label: 'Settings', value: 'settings' },
+];
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    items: defaultItems,
+  },
+  render: (args: TabsListProps) => ({
+    components: { TabsList },
+    setup() {
+      const active = ref('overview');
+      return { args, active };
+    },
+    template: '<TabsList v-bind="args" v-model="active" />',
+  }),
+};
+
+export const Sizes: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: () => ({
+    components: { TabsList },
+    setup() {
+      const activeMd = ref('overview');
+      const activeLg = ref('overview');
+      return { activeMd, activeLg, defaultItems };
+    },
+    template: `
+      <div class="flex flex-col gap-6">
+        <TabsList :items="defaultItems" v-model="activeMd" size="md" />
+        <TabsList :items="defaultItems" v-model="activeLg" size="lg" />
+      </div>
+    `,
+  }),
+};
+
+export const WithDisabled: Story = {
+  args: {
+    size: 'md',
+    items: [
+      { label: 'Overview', value: 'overview' },
+      { label: 'Analytics', value: 'analytics' },
+      { label: 'Reports', value: 'reports', disabled: true },
+      { label: 'Settings', value: 'settings' },
+    ],
+  },
+  render: (args: TabsListProps) => ({
+    components: { TabsList },
+    setup() {
+      const active = ref('overview');
+      return { args, active };
+    },
+    template: '<TabsList v-bind="args" v-model="active" />',
+  }),
+};