[UIK-5387][chore] init spectrum theme

pnpm-workspace.yaml

@@ -1,5 +1,6 @@
 packages:
   - 'semcore/*'
+  - 'spectrum'
   - 'tools/*'
   - 'website'
   - 'stories'

spectrum/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@semcore/spectrum",
+  "version": "17.3.0",
+  "description": "Semrush design system package with adobe skin.",
+  "author": "UI-kit team <ui-kit-team@semrush.com>",
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "build": "pnpm vite build && tsgo --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "@semcore/core": "^17.2.1",
+    "@semcore/base-trigger": "^17.2.1",
+    "@semcore/button": "^17.2.1",
+    "@semcore/dropdown-menu": "^17.3.0"
+  },
+  "peerDependencies": {
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19",
+    "@semcore/icon": "^17.2.0",
+    "@semcore/illustration": "^16.0.0 || ^17.0.1"
+  },
+  "devDependencies": {
+    "@semcore/core": "workspace:*",
+    "@semcore/base-trigger": "workspace:*",
+    "@semcore/button": "workspace:*",
+    "@semcore/dropdown-menu": "workspace:*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/spectrum"
+  }
+}

spectrum/src/base-trigger/FilterTrigger.tsx

@@ -0,0 +1,22 @@
+import { FilterTrigger as UIFilterTrigger } from '@semcore/base-trigger';
+import React from 'react';
+
+import styles from './filterTrigger.module.css';
+
+function FilterTrigger(props: any) {
+  const classNames = [styles.filterTrigger, styles.sizeM];
+
+  if (!props.empty || props.active) {
+    classNames.push(styles.selected);
+  }
+
+  return <UIFilterTrigger {...props} className={classNames.join(' ')} />;
+}
+
+FilterTrigger.Text = UIFilterTrigger.Text;
+FilterTrigger.Addon = UIFilterTrigger.Addon;
+FilterTrigger.Counter = UIFilterTrigger.Counter;
+FilterTrigger.TriggerButton = UIFilterTrigger.TriggerButton;
+FilterTrigger.ClearButton = UIFilterTrigger.ClearButton;
+
+export default FilterTrigger;

spectrum/src/base-trigger/filterTrigger.module.css

@@ -0,0 +1,15 @@
+.filterTrigger.sizeM button {
+  background: rgb(240, 240, 240);
+  border-color:  rgb(240, 240, 240);
+  padding: 0 14px;
+}
+
+.filterTrigger.sizeM.selected button {
+  color: #fff;
+  background: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+}
+
+.filterTrigger.sizeM.selected button [data-ui-name='FilterTrigger.Text'] {
+  color: #fff;
+}

spectrum/src/base-trigger/index.ts

@@ -0,0 +1,5 @@
+import FilterTrigger from './FilterTrigger.tsx';
+
+export {
+  FilterTrigger,
+};

spectrum/src/button/Button.tsx

@@ -0,0 +1,30 @@
+import UIButton from '@semcore/button';
+import React from 'react';
+
+import styles from './button.module.css';
+import type { NSButton } from './Button.type.ts';
+
+function Button(props: NSButton.Props) {
+  const classNames = [styles.button, styles.size];
+
+  if (props.theme === 'outline') {
+    classNames.push(styles.outline);
+
+    if (props.use === 'primary') {
+      classNames.push(styles.primaryOutline);
+    }
+  }
+
+  if (props.use === 'accent') {
+    classNames.push(styles.accent);
+  }
+
+  // @ts-expect-error because of spectrum theme
+  return <UIButton {...props} className={classNames.join(' ')} />;
+}
+
+Button.Text = UIButton.Text;
+
+Button.Addon = UIButton.Addon;
+
+export default Button;

spectrum/src/button/Button.type.ts

@@ -0,0 +1,12 @@
+import type { ButtonProps } from '@semcore/button';
+
+declare namespace NSButton {
+  type Props = Omit<ButtonProps, 'use' | 'theme'> & {
+    use: ButtonProps['use'] | 'accent';
+    theme: ButtonProps['theme'] | 'outline';
+  };
+}
+
+export {
+  NSButton,
+};

spectrum/src/button/ButtonLink.tsx

@@ -0,0 +1,3 @@
+export default function () {
+  return 'Button link';
+}

spectrum/src/button/button.module.css

@@ -0,0 +1,23 @@
+.button.size {
+  border-width: 2px;
+  border-radius: 16px;
+}
+
+.button.outline {
+  background: transparent;
+}
+
+.button.primaryOutline {
+  color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+}
+.button.primaryOutline:hover {
+  color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+  background: var(--intergalactic-control-secondary-neutral-hover,
+  oklch(0.176 0.033 175.6 / 0.056));
+}
+
+.button.accent {
+  color: #fff;
+  background-color: #3b63fb;
+}

spectrum/src/button/index.ts

@@ -0,0 +1,12 @@
+import Button from './Button.tsx';
+import type { NSButton as NSSpectrumButton } from './Button.type.ts';
+import ButtonLink from './ButtonLink.tsx';
+
+export type {
+  NSSpectrumButton,
+};
+
+export {
+  Button as default,
+  ButtonLink,
+};

spectrum/src/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,13 @@
+import UIDropdownMenu from '@semcore/dropdown-menu';
+import React from 'react';
+
+function DropdownMenu(props: any) {
+  return <UIDropdownMenu {...props} />;
+}
+
+DropdownMenu.Trigger = UIDropdownMenu.Trigger;
+DropdownMenu.Menu = UIDropdownMenu.Menu;
+DropdownMenu.Group = UIDropdownMenu.Group;
+DropdownMenu.Item = UIDropdownMenu.Item;
+
+export default DropdownMenu;

spectrum/src/dropdown-menu/index.ts

@@ -0,0 +1,3 @@
+import DropdownMenu from './DropdownMenu';
+
+export default DropdownMenu;

spectrum/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./lib"
+  }
+}

spectrum/vite.config.ts

@@ -0,0 +1,29 @@
+import { unpluginSemcoreResolve } from '@semcore/builder/plugins';
+import copy from 'rollup-plugin-copy';
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../commonVite.config';
+
+export default defineConfig({
+  esbuild: {
+    legalComments: 'inline',
+  },
+  build: {
+    minify: false,
+    emptyOutDir: true,
+    outDir: 'lib',
+    lib: {
+      entry: {
+        'base-trigger': './src/base-trigger/index.ts',
+        'button': './src/button/index.ts',
+        'dropdown-menu': './src/dropdown-menu/index.ts',
+      },
+      formats: ['es'],
+      fileName: (format, entryName) => `${entryName}.mjs`,
+    },
+    rollupOptions: {
+      treeshake: false,
+      external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+    },
+  },
+});

stories/spectrum/button/button.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import ButtonBaseExample, { defaultButtonProps } from './examples/button_base';
+import { themeArg, THEMES } from './themeUtils';
+
+const meta: Meta = { title: 'Spectrum/Button' };
+export default meta;
+
+const commonArgTypes = {
+  size: { control: { type: 'select' }, options: ['m', 'l'] },
+  use: { control: { type: 'select' }, options: Object.keys(THEMES).concat('accent') },
+  theme: { table: { disable: true } },
+  theme_primary: themeArg('primary'),
+  theme_secondary: themeArg('secondary'),
+  theme_tertiary: themeArg('tertiary'),
+  active: { control: { type: 'boolean' } },
+  disabled: { control: { type: 'boolean' } },
+  loading: { control: { type: 'boolean' } },
+  style: { control: { type: 'select' }, options: [undefined, { backgroundColor: '#191B23' }] },
+} as const;
+
+const themeDefaults = {
+  theme_primary: THEMES.primary[0],
+  theme_secondary: THEMES.secondary[0],
+  theme_tertiary: THEMES.tertiary[0],
+  theme_accent: THEMES.accent[0],
+};
+
+export const ButtonBase: StoryObj<typeof defaultButtonProps> = {
+  render: ButtonBaseExample,
+  argTypes: commonArgTypes,
+  args: { ...defaultButtonProps, ...themeDefaults },
+};