import { color } from "@quotalab/qds-token";
import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';

export const groupColors = (colors) => {
  const groups = {};
  Object.entries(colors).forEach(([key, value]) => {
    const prefix = key.match(/^[a-zA-Z]+/)[0];
    if (!groups[prefix]) {
      groups[prefix] = {};
    }
    groups[prefix][key.replace(prefix, '')] = value;
  });
  return groups;
};

export const groups = groupColors(color);
export const generateColor = Object.entries(groups)
  .filter(([, colors]) => Object.keys(colors).length > 1);
export const semanticColors = Object.entries(groups)
  .filter(([, colors]) => Object.keys(colors).length === 1);

<Meta title="TOKEN / Colors" />

# Colors

## Generic Token

<ColorPalette>
  {generateColor.map(([groupName, colors]) => (
      <ColorItem
        key={groupName}
        title={groupName}
        colors={colors}
      />
  ))}
</ColorPalette>

## Semantic Token

<ColorPalette>
  {semanticColors.map(([groupName, colors]) => (
      <ColorItem
        key={groupName}
        title={groupName}
        colors={colors}
      />
  ))}
</ColorPalette>