colibri-ui 0.8.0 → 0.8.1

package/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

package/.config/jest/__mocks__/noop.js

@@ -0,0 +1 @@
+module.exports = {};

package/.config/jest/jest.config.ts

@@ -0,0 +1,207 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+import { resolve } from "path";
+import type { Config } from "jest";
+
+const config: Config = {
+  rootDir: resolve(__dirname, "../.."),
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "/tmp/jest_rs",
+
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: true,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: undefined,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: ".coverage",
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // Indicates which provider should be used to instrument code for coverage
+  // coverageProvider: "babel",
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // The default configuration for fake timers
+  // fakeTimers: {
+  //   "enableGlobally": false
+  // },
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "mjs",
+  //   "cjs",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "json",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+    "^.+\\.(css|sass|scss)$": "<rootDir>/.config/jest/__mocks__/noop.js",
+    "^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$": `<rootDir>/.config/jest/__mocks__/noop.js`,
+  },
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state before every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  setupFilesAfterEnv: ["<rootDir>/.config/jest/jest.setup.ts"],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  testEnvironment: "jsdom",
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  // testMatch: [
+  //   "**/__tests__/**/*.[jt]s?(x)",
+  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  testPathIgnorePatterns: ["<rootDir>/node_modules/"],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
+
+  // A map from regular expressions to paths to transformers
+  transform: {
+    // Use babel-jest to transpile tests with the next/babel preset
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+  },
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  transformIgnorePatterns: [
+    "<rootDir>/node_modules/",
+    "^.+\\.module\\.(css|sass|scss)$",
+  ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};
+
+export default config;

package/.config/jest/jest.setup.ts

@@ -0,0 +1,4 @@
+import "@testing-library/jest-dom";
+
+global.requestAnimationFrame = (callback: FrameRequestCallback): number =>
+  setTimeout(callback, 0);

package/.prettierignore

@@ -0,0 +1,5 @@
+package.json
+dist/
+scripts/
+node_modules/
+.swc/

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "arrowParens": "always",
+    "singleQuote": true,
+    "trailingComma": "all",
+    "tabWidth": 2,
+    "endOfLine": "auto",
+    "semi": true
+}

package/.storybook/AddonThemesSwitcher/constants.ts

@@ -0,0 +1,7 @@
+export const ADDON_ID = "addon-themes-switcher";
+export const PARAM_KEY = "themes";
+export const THEME_COOKIE = "storybook_theme";
+
+export const events = {
+  CHANGE: `${ADDON_ID}/change`,
+};

package/.storybook/AddonThemesSwitcher/index.ts

@@ -0,0 +1,45 @@
+import { addons, makeDecorator } from "@storybook/preview-api";
+
+import { THEMES } from "../../src/components/Theme";
+import { events, THEME_COOKIE } from "./constants";
+
+const getThemeByName = (name) => {
+  switch (name) {
+    case "BA":
+      return THEMES.BA;
+    case "DEFAULT":
+      return THEMES.DEFAULT;
+    default:
+      return THEMES.DEFAULT;
+  }
+};
+
+export const withThemesDecorator = makeDecorator({
+  name: "withThemes",
+  parameterName: "theme",
+  skipIfNoParametersOrOptions: false,
+  wrapper: (getStory, context) => {
+    const channel = addons.getChannel();
+
+    channel.on(events.CHANGE, ({ name }) => {
+      const theme = getThemeByName(name);
+
+      // set CSS variables
+      Object.entries(theme).forEach(([key, value]) => {
+        document.documentElement.style.setProperty(`--${key}`, value);
+      });
+
+      document.cookie = `${THEME_COOKIE}=${name || "DEFAULT"}`;
+    });
+
+    const name = new Map(
+      document.cookie.split("; ").map((keyValue) => keyValue.split("=")),
+    ).get(THEME_COOKIE);
+
+    channel.emit(events.CHANGE, { name });
+
+    return getStory(context);
+  },
+});
+
+export default withThemesDecorator;

package/.storybook/AddonThemesSwitcher/register.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { addons, types, useParameter } from "@storybook/manager-api";
+import {
+  IconButton,
+  TooltipLinkList,
+  WithTooltip,
+} from "@storybook/components";
+import { PhotoIcon } from "@storybook/icons";
+
+import { ADDON_ID, PARAM_KEY, events } from "./constants";
+
+interface ColoredIconProps {
+  background: string;
+}
+
+const ColoredIcon = ({ background }: ColoredIconProps): JSX.Element => (
+  <div
+    style={{
+      background,
+      borderRadius: "1rem",
+      display: "block",
+      height: "1rem",
+      width: "1rem",
+    }}
+  />
+);
+
+const ThemeSelect = ({ channel }): JSX.Element => {
+  const [activeTheme, setActiveTheme] = useState();
+
+  const handleSelect = useCallback(
+    (name) => {
+      channel.emit(events.CHANGE, { name });
+      window.location.reload();
+    },
+    [activeTheme],
+  );
+
+  useEffect(() => {
+    const handleChange = ({ name }) => setActiveTheme(name);
+    channel.on(events.CHANGE, handleChange);
+
+    return () => {
+      channel.off(events.CHANGE, handleChange);
+    };
+  }, []);
+
+  const themes = useParameter(PARAM_KEY) || [];
+  const links = themes.map(({ name, color }) => ({
+    active: activeTheme === name,
+    id: name,
+    onClick: () => handleSelect(name),
+    right: color ? <ColoredIcon background={color} /> : undefined,
+    title: name,
+    value: name,
+  }));
+
+  return (
+    <WithTooltip
+      placement="top"
+      tooltip={<TooltipLinkList links={links} />}
+      trigger="click"
+    >
+      <IconButton key="theme" active={true} title="">
+        <PhotoIcon />
+      </IconButton>
+    </WithTooltip>
+  );
+};
+
+addons.register(ADDON_ID, () => {
+  const channel = addons.getChannel();
+
+  addons.add(ADDON_ID, {
+    title: "Themes",
+    type: types.TOOL,
+    render: () => <ThemeSelect channel={channel} />,
+  });
+});

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-sass-postcss",
+    "storybook-css-modules",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  staticDirs: ["../static"],
+};
+export default config;

package/.storybook/manager.tsx

@@ -0,0 +1 @@
+import "./AddonThemesSwitcher/register";

package/.storybook/preview-head.html

@@ -0,0 +1,19 @@
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+  rel="stylesheet">
+<style>
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  body {
+    font-family: "Roboto", Arial, sans-serif;
+    font-weight: 400;
+    font-style: normal;
+  }
+</style>

package/.storybook/preview.tsx

@@ -0,0 +1,14 @@
+import withTheme from "./AddonThemesSwitcher";
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    themes: [
+      { name: "BA", color: "#ffdc82" },
+      { name: "DEFAULT", color: "#ccc", default: true },
+    ],
+  },
+  decorators: [withTheme],
+};
+
+export default preview;

package/.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": "stylelint-config-standard",
+  "plugins": [
+    "stylelint-scss",
+    "stylelint-order",
+    "stylelint-prettier"
+  ],
+  "rules": {
+    "order/properties-alphabetical-order": true,
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "block-no-empty": true,
+    "color-no-invalid-hex": true,
+    "prettier/prettier": true,
+    "selector-class-pattern": "^[a-z0-9_-]+$"
+  }
+}

package/@types/image.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg" {
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+
+  export default ReactComponent;
+}

package/@types/typings.d.ts

@@ -0,0 +1,2 @@
+declare module "*.module.scss";
+declare module "*.module.css";

package/eslint.config.mjs

@@ -0,0 +1,83 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import eslintPluginImportOrder from "eslint-plugin-import";
+import eslintPluginReactHooks from "eslint-plugin-react-hooks";
+import eslintPluginJSXA11Y from "eslint-plugin-jsx-a11y";
+
+export default [
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReactConfig,
+  eslintPluginPrettierRecommended,
+  {
+    plugins: {
+      import: eslintPluginImportOrder,
+      "react-hooks": eslintPluginReactHooks,
+      "jsx-a11y": eslintPluginJSXA11Y,
+    },
+    rules: {
+      "@typescript-eslint/consistent-type-imports": "error",
+      "react/display-name": "off",
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+      "import/order": [
+        "error",
+        {
+          groups: [
+            ["builtin", "external"],
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+            "object",
+            "type",
+          ],
+        },
+      ],
+      "max-len": [
+        "error",
+        {
+          code: 100,
+          comments: 130,
+          ignoreUrls: true,
+          ignoreStrings: true,
+          ignoreTemplateLiterals: true,
+          ignoreRegExpLiterals: true,
+          ignoreTrailingComments: true,
+        },
+      ],
+      "import/no-extraneous-dependencies": "error",
+      "react-hooks/exhaustive-deps": "error",
+      "@typescript-eslint/ban-ts-comment": "error",
+      "@typescript-eslint/no-use-before-define": "error",
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-shadow": "error",
+      "react-hooks/rules-of-hooks": "error",
+      "react/no-unused-prop-types": "error",
+      "jsx-a11y/no-static-element-interactions": "error",
+      "jsx-a11y/click-events-have-key-events": "error",
+      "arrow-body-style": ["error", "as-needed"],
+      "jsx-a11y/label-has-associated-control": "error",
+      "no-console": "error",
+    },
+  },
+  {
+    ignores: [
+      ".git/*",
+      "dist/*",
+      ".storybook",
+      "scripts/*",
+      "node_modules/*",
+      "storybook-static/*",
+      "**/*.stories.tsx",
+      "src/**/*.test.ts",
+      "src/**/*.test.tsx",
+      ".config",
+      "rollup.config.js",
+    ],
+  },
+];

package/package.json

@@ -1,9 +1,25 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "React UI components library",
   "main": "index.js",
-  "scripts": {},
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c --bundleConfigAsCjs && npm run build:sass && npm run build:updateImports && npm run build:variables && npm run build:postbuild",
+    "build:sass": "node scripts/buildSass.js",
+    "build:updateImports": "node scripts/updateImports.js",
+    "build:postbuild": "node scripts/copyFiles.js && node scripts/postbuild.js",
+    "build:variables": "ts-node scripts/variables.ts",
+    "lint": "npm run lint:ts && npm run lint:css",
+    "lint:ts": "eslint .",
+    "lint:ts:fix": "eslint . --fix",
+    "lint:css": "stylelint 'src/**/*.scss'",
+    "lint:css:fix": "stylelint 'src/**/*.scss' --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test:coverage": "npm run test --coverage",
+    "test": "jest --config ./.config/jest/jest.config.ts"
+  },
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/ColibriMQLab/ColibriUI.git"
@@ -30,9 +46,75 @@
     "react-popper": "^2.3.0",
     "react-textarea-autosize": "^8.5.4"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "7.24.7",
+    "@babel/preset-typescript": "^7.26.0",
+    "@eslint/js": "9.6.0",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "26.0.1",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-typescript": "11.1.6",
+    "@rollup/plugin-url": "8.0.2",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-themes": "^8.1.11",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/manager-api": "^8.1.11",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-webpack5": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@svgr/rollup": "8.1.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "chroma-js": "^3.1.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.34.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-storybook": "0.8.0",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "^11.2.0",
+    "globals": "15.7.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.39",
+    "postcss-import": "^16.1.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.3.2",
+    "rollup": "4.18.0",
+    "sass": "^1.77.6",
+    "storybook": "^8.1.11",
+    "storybook-addon-sass-postcss": "^0.2.0",
+    "storybook-css-modules": "^1.0.8",
+    "stylelint": "^16.8.2",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-order": "^6.0.4",
+    "stylelint-prettier": "^5.0.2",
+    "stylelint-scss": "^6.5.0",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "5.5.2",
+    "typescript-eslint": "^7.14.1",
+    "webpack-cli": "^5.1.4"
+  },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
     "tslib": "^2.5.0"
   }
-}
+}