colibri-ui 0.8.0 → 0.8.1

package/rollup.config.js

@@ -0,0 +1,81 @@
+import typescript from "@rollup/plugin-typescript";
+import babel from "@rollup/plugin-babel";
+import url from "@rollup/plugin-url";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import svgr from "@svgr/rollup";
+import { DEFAULT_EXTENSIONS } from "@babel/core";
+
+const external = (id) =>
+  (!id.startsWith(".") && !id.startsWith("/")) || id.endsWith(".scss");
+
+const getBabelOptions = ({ value }) => ({
+  babelrc: false,
+  presets: [
+    ["@babel/preset-env", { modules: false }],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: [["@babel/transform-runtime", { useESModules: value }]],
+  babelHelpers: "runtime",
+  exclude: "/node_modules/**",
+  extensions: [...DEFAULT_EXTENSIONS, ".ts", ".tsx"],
+});
+
+export default [
+  {
+    input: "./src/components/index.ts",
+    output: [
+      {
+        dir: "dist/esm",
+        format: "esm",
+        preserveModules: true,
+        preserveModulesRoot: "src/components",
+        interop: "auto",
+      },
+    ],
+    external,
+    treeshake: false,
+    plugins: [
+      url(),
+      svgr(),
+      nodeResolve({
+        preferBuiltins: true,
+        extensions: [".ts", ".tsx"],
+      }),
+      typescript(),
+      commonjs({
+        include: "node_modules/**",
+      }),
+      babel(getBabelOptions(true)),
+    ],
+  },
+  {
+    input: "./src/components/index.ts",
+    output: [
+      {
+        dir: "dist",
+        format: "cjs",
+        preserveModules: true,
+        preserveModulesRoot: "src/components",
+        exports: "named",
+        interop: "auto",
+      },
+    ],
+    external,
+    treeshake: false,
+    plugins: [
+      url(),
+      svgr(),
+      nodeResolve({
+        preferBuiltins: true,
+        extensions: [".ts", ".tsx"],
+      }),
+      typescript({ outDir: "dist", declarationDir: "dist" }),
+      commonjs({
+        include: "node_modules/**",
+      }),
+      babel(getBabelOptions(false)),
+    ],
+  },
+];

package/scripts/buildSass.js

@@ -0,0 +1,23 @@
+const { writeFile, mkdir } = require('fs-extra');
+const { relative, join, dirname } = require("path");
+const fg = require("fast-glob");
+const sass = require('sass')
+
+const inputDir = './src';
+const distPaths = ["dist", "dist/esm"];
+
+async function compileSass() {
+  const files = await fg(`${inputDir}/**/*.scss`);
+  files.forEach(async (fileName) => {
+    const relativePath = relative(`${inputDir}/components`, fileName);
+    const result = sass.compile(fileName);
+
+    for (const outputDir of distPaths) {
+        const outputFilePath = join(outputDir, relativePath.replace(/\.scss$/, '.css'));
+        await mkdir(dirname(outputFilePath), { recursive: true });
+        await writeFile(outputFilePath, result.css);
+    }
+  })
+}
+
+compileSass().catch(err => console.error(err));

package/scripts/copyFiles.js

@@ -0,0 +1,32 @@
+const path = require("path");
+const { existsSync, writeFileSync } = require("fs");
+const { execSync } = require("child_process");
+
+const existPackageJson = existsSync("package.json");
+const existReadme = existsSync("README.md");
+
+if (existPackageJson) {
+  try {
+    execSync("cp package.json dist", { stdio: "inherit" });
+    const packageJsonPath = path.join(
+      path.resolve(__dirname, "../dist"),
+      "package.json",
+    );
+    const packageJson = require(packageJsonPath);
+    packageJson.scripts = {};
+    packageJson.devDependencies = {};
+    writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+  } catch (err) {
+    throw new Error(
+      `Could not copy package.json file because of an error: ${err}`,
+    );
+  }
+}
+
+if (existReadme) {
+  try {
+    execSync("cp README.md dist", { stdio: "inherit" });
+  } catch (err) {
+    throw new Error(`Could not copy .npmrc file because of an error: ${err}`);
+  }
+}

package/scripts/postbuild.js

@@ -0,0 +1,52 @@
+const path = require("path");
+const {
+  promises: { readdir },
+  writeFileSync,
+} = require("fs");
+
+const generatePackageJsons = async () => {
+  try {
+    const components = (
+      await readdir(path.resolve(__dirname, "../dist"), { withFileTypes: true })
+    )
+      .filter((dir) => dir.isDirectory())
+      .filter((dir) => {
+        if (dir.name[0].toUpperCase() == dir.name[0]) {
+          return dir.name;
+        }
+      })
+      .map((dir) => dir.name);
+
+    for (let item of components) {
+      const packageJsonContent = {
+        sideEffects: false,
+        module: `../esm/${item}/index.js`,
+        main: "./index.js",
+        types: "./index.d.ts",
+      };
+      const componentPath = path.join(
+        path.resolve(__dirname, `../dist/`),
+        item,
+      );
+      writeFileSync(
+        `${componentPath}/package.json`,
+        JSON.stringify(packageJsonContent, null, 2),
+      );
+    }
+  } catch (err) {
+    throw new Error(
+      `Could not create package.json file because of an error: ${err}`,
+    );
+  }
+};
+
+async function run() {
+  try {
+    await generatePackageJsons();
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+run();

package/scripts/transformCSS.js

@@ -0,0 +1,35 @@
+const { dirname, relative, resolve } = require("path");
+const { readFile, writeFile, ensureDir } = require('fs-extra');
+const fg = require("fast-glob");
+const postcss = require('postcss')
+
+const inputDir = './src';
+const distPaths = ["dist", "dist/esm"];
+
+const plugins = [
+    require('postcss-import')(),
+    require('autoprefixer'),
+  ];
+
+const transformCSS = async () => {
+    const files = await fg(`${inputDir}/**/*.scss`);
+    const firstDistPath = distPaths[0];
+    const postcssProcessor = postcss([
+        ...plugins
+    ]);
+    
+    files.forEach(async (fileName) => {
+        const css = await readFile(fileName);
+        const distFilename = resolve(firstDistPath, relative(inputDir, fileName));
+        const processedCss = await postcssProcessor.process(css, { from: fileName, to: distFilename });
+        for (const outputDir of distPaths) {
+            const relativePath = relative(`${inputDir}/components`, fileName);
+            const newPath = resolve(outputDir, relativePath);
+            await ensureDir(dirname(newPath));
+            writeFile(newPath, processedCss.css);
+            console.log(`Compiled ${newPath} to SASS.`);
+        }
+    });
+};
+
+transformCSS().catch(err => console.error(err));

package/scripts/updateImports.js

@@ -0,0 +1,16 @@
+const { writeFile, readFile } = require('fs-extra');
+const fg = require("fast-glob");
+
+const inputDir = 'dist';
+
+async function updateTsImports() {
+  const files = await fg(`${inputDir}/**/*.js`);
+
+  for (const file of files) {
+    const fileContent = await readFile(file, 'utf-8');
+    const updatedTsFileContent = fileContent.replace(/\.scss/g, '.css');
+    await writeFile(file, updatedTsFileContent);
+  }
+}
+
+updateTsImports().catch(err => console.error(err));

package/scripts/variables.ts

@@ -0,0 +1,29 @@
+const { writeFile, ensureDir } = require('fs-extra');
+const { resolve, dirname } = require("path");
+const { THEMES } = require('../src/components/Theme');
+
+const inputDir = './src';
+const distPaths = ["dist", "dist/esm"];
+
+async function variables() {
+  let themeDefault = "";
+  let themeBA = "";
+  Object.entries(THEMES.DEFAULT).forEach(([key, value]) => {
+    themeDefault += `--${key}: ${value};\r\n`;
+  });
+  Object.entries(THEMES.BA).forEach(([key, value]) => {
+    themeBA += `--${key}: ${value};\r\n`;
+  });
+  const defaultContent = `.theme {\r\n${themeDefault}}`;
+  const baContent = `.theme {\r\n${themeBA}}`;
+
+  for (const outputDir of distPaths) {
+    const defaultPath = resolve(outputDir, 'theme_default_variables.css');
+    const baPath = resolve(outputDir, 'theme_ba_variables.css');
+    await ensureDir(dirname(defaultPath));
+    await writeFile(defaultPath, defaultContent);
+    await writeFile(baPath, baContent);
+  }
+}
+
+variables().catch(err => console.error(err));

package/{Accordion/Accordion.module.css → src/components/Accordion/Accordion.module.scss}

@@ -21,9 +21,10 @@
   inline-size: 100%;
   outline: none;
   padding: 0;
-}
-.button svg {
-  flex: none;
+
+  & svg {
+    flex: none;
+  }
 }
 
 .text {
@@ -38,9 +39,10 @@
 
 .chevron {
   transition: transform 0.2s ease-in-out;
-}
-.chevron_open {
-  transform: rotate(180deg);
+
+  &_open {
+    transform: rotate(180deg);
+  }
 }
 
 .line {
@@ -48,4 +50,4 @@
   block-size: 1px;
   flex: 1;
   margin-inline-start: 8px;
-}
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Accordion from '.';
+import { Meta } from '@storybook/react';
+
+const meta: Meta<typeof Accordion> = {
+  title: "UI/Accordion",
+  parameters: {
+  },
+  argTypes: {
+    boldTitle: {
+      control: { type: "boolean" },
+      options: [true, false],
+    },
+  },
+  args: {
+    title: "Accordion title",
+  },
+  component: Accordion,
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+const wrapperStyles = {
+  height: '400px',
+  width: '600px',
+  backgroundColor: '#DFE7FA',
+};
+
+export const Default = (args): React.ReactElement => {
+  return (
+    <div style={wrapperStyles}>
+      <Accordion {...args}>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+      </Accordion>
+    </div>
+  );
+};
+
+export const BoldTitle = (args): React.ReactElement => {
+  return (
+    <div style={wrapperStyles}>
+      <Accordion boldTitle {...args}>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+      </Accordion>
+    </div>
+  );
+};

package/src/components/Accordion/index.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import classNames from "classnames/bind";
+import { Chevron } from "../Icons";
+import Typography from "../Typography";
+import styles from "./Accordion.module.scss";
+import type { FC, ReactNode, PropsWithChildren } from "react";
+
+const clx = classNames.bind(styles);
+
+type Props = {
+  title: ReactNode;
+  className?: string;
+  boldTitle?: boolean;
+  tabIndex?: number;
+};
+
+const Accordion: FC<PropsWithChildren<Props>> = ({
+  title,
+  boldTitle = false,
+  children,
+  className,
+  tabIndex,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const toggleAccordion = () => setIsOpen(!isOpen);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.style.blockSize = isOpen
+        ? `${contentRef.current.scrollHeight}px`
+        : "0px";
+    }
+  }, [isOpen]);
+
+  return (
+    <div className={clx("root", className)}>
+      <div className={clx("header")}>
+        <button
+          className={clx("button")}
+          onClick={toggleAccordion}
+          type="button"
+          role="button"
+          aria-expanded={isOpen}
+          tabIndex={tabIndex}
+          aria-label="Toggle"
+        >
+          <Chevron
+            className={clx("chevron", { chevron_open: isOpen })}
+            width={20}
+            height={20}
+          />
+          <Typography
+            className={clx("text")}
+            fontWeight={boldTitle ? "bold" : "normal"}
+          >
+            {title}
+          </Typography>
+          <div className={clx("line")} />
+        </button>
+      </div>
+      <div ref={contentRef} className={clx("content")}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

package/{Avatar/Avatar.module.css → src/components/Avatar/Avatar.module.scss}

@@ -9,7 +9,8 @@
   background-color: var(--palette-white);
   border: 3px solid var(--palette-bg-2);
   padding: 3px;
+
+  &:hover {
+    border-color: var(--palette-bg-4);
+  }
 }
-.avatar_bordered:hover {
-  border-color: var(--palette-bg-4);
-}

package/src/components/Avatar/assets/org-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="none" viewBox="0 0 42 42"><circle cx="21" cy="21" r="21" fill="#eceef2"/><mask id="org-circle_svg__a" width="42" height="42" x="0" y="0" maskUnits="userSpaceOnUse"><circle cx="21" cy="21" r="21" fill="#eceef2"/></mask><g mask="url(#org-circle_svg__a)"><path fill="#bcc1cc" fill-rule="evenodd" d="M19.103 27.36V34H9V12.062L22.567 6v21.36h-3.464zm-6.64 0v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732h-6.64zm0-4.042v1.732h6.64V16.68h-6.64zM32.67 27.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526v9.237z" clip-rule="evenodd"/></g></svg>

package/src/components/Avatar/assets/user-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42" height="39" fill="none"><path fill="#ECEEF2" fillRule="evenodd" d="M33.6 37.997c-2.9-1.709-7-4.725-8.6-4.725h-3.802c-.9 0-2.8-.805-3-1.507-.199-.503-.199-1.408-.1-2.212 0-.1.303-.1.402 0 .8.905 1.099 1.508 1.9 1.508h1.8c.7 0 3.1-2.111 4.099-4.725.2-.603.4-1.608.5-2.713 0-.1.1-.202.1-.1.1.501.3 1.105.4 1.105.3.201.7-.603 1.2-1.709.5-1.006.5-1.608.7-2.413.3-1.105-.1-1.91-.4-1.91a.91.91 0 0 0-.7.302c-.1 0-.2 0-.2-.1 0-.704.1-1.81.9-2.413-1.1-1.005-.4-2.714-.4-2.714.4.2.4 0 .4 0l-.2-1.106c.6-.1 1.1-.603 1.1-.603s-1.6-.402-2.4-1.005c.7-.202 1.117-.957 1.117-.957S27 9.952 26 9.65c.9-.904.3-2.15.3-2.15s-1.6.441-4.7.441c-2.2-.1-3-.402-4.6 1.207-1.9 1.909-1.9 2.412-3.1 2.412 1 1.407.5 2.814.5 2.814l-.1 2.112.1.401s0 .1.1.302c0 .101 0 .303.1.402l.3 1.61s-.1.1-.2 0a1.42 1.42 0 0 0-1.2-.604c-.3 0-.8.805-.4 1.91.3.804.6 1.306.9 2.412s.9 1.91 1.2 1.71q.15-.153.3-.906c0-.1.1 0 .2.102.1 1.004.3 1.908.5 2.411.2.302.4.703.6 1.005-.2 1.709-.4 3.82-.8 5.428-2.6.704-6.6 1.91-10 2.714C2.2 31.967 0 26.74 0 21.11 0 9.45 9.4 0 21 0s21 9.45 21 21.11c0 6.936-3.3 13.066-8.4 16.887" clipRule="evenodd"/></svg>

package/src/components/Avatar/constants.ts

@@ -0,0 +1,7 @@
+export enum AvatarSizes {
+  S = 30,
+  M = 34,
+  L = 42,
+  XL = 80,
+  XXL = 96,
+}

package/src/components/Avatar/index.props.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from "react";
+import type { AvatarSizes } from "./constants";
+
+export enum AccountType {
+  Person = "person",
+  Organization = "org",
+}
+
+export type AvatarProps = {
+  accountType?: AccountType;
+  style?: CSSProperties;
+  alt?: string;
+  size?: AvatarSizes | number;
+  avatarURL?: string;
+  bordered?: boolean;
+  className?: string;
+};

package/src/components/Avatar/index.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Avatar from ".";
+import type { Meta } from "@storybook/react";
+import { AccountType } from "./index.props";
+import { AvatarSizes } from "./constants";
+
+const meta: Meta<typeof Avatar> = {
+  title: "UI/Avatar",
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    accountType: {
+      control: { type: "select" },
+      options: Object.values(AccountType),
+    },
+    size: {
+      control: { type: "select" },
+      options: [AvatarSizes.S, AvatarSizes.M, AvatarSizes.L, AvatarSizes.XL, AvatarSizes.XXL],
+    },
+  },
+  args: {
+    size: AvatarSizes.XXL
+  },
+  component: Avatar,
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+export const Default = (args) => {
+  return <Avatar {...args}/>;
+};
+
+export const Bordered = (args) => {
+  return <Avatar bordered {...args}/>;
+};

package/src/components/Avatar/index.tsx

@@ -0,0 +1,49 @@
+import React, { memo } from "react";
+
+import classNames from "classnames/bind";
+import { AvatarSizes } from "./constants";
+import userCircleUrl from "./assets/user-circle.svg";
+import orgCircleUrl from "./assets/org-circle.svg";
+import styles from "./Avatar.module.scss";
+import { AccountType } from "./index.props";
+import type { AvatarProps } from "./index.props";
+import type { FC } from "react";
+
+const clx = classNames.bind(styles);
+
+const getStubImage = (type: AccountType) =>
+  type === AccountType.Organization ? orgCircleUrl : userCircleUrl;
+
+const Avatar: FC<AvatarProps> = memo((props) => {
+  const {
+    avatarURL,
+    style,
+    size = AvatarSizes.M,
+    className,
+    bordered,
+    alt = "profile image",
+    accountType = AccountType.Organization,
+    ...rest
+  } = props;
+  const stubImageURL = getStubImage(accountType);
+
+  return (
+    <img
+      alt={alt}
+      src={(avatarURL || stubImageURL) as string}
+      width={size}
+      height={size}
+      style={style}
+      className={clx(
+        "avatar",
+        {
+          avatar_bordered: !!bordered,
+        },
+        [className],
+      )}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

package/{esm/Badge/Badge.module.css → src/components/Badge/Badge.module.scss}

@@ -14,17 +14,20 @@
   position: absolute;
   user-select: none;
   z-index: 1;
+
+  &_direction_right {
+    right: 0;
+    top: 0;
+    transform: scale(1) translate(60%, -50%);
+  }
+
+  &_direction_left {
+    left: 0;
+    top: 0;
+    transform: scale(1) translate(-60%, -50%);
+  }
+
+  &_invisible {
+    transform: scale(0) translate(50%, -50%);
+  }
 }
-.root_direction_right {
-  right: 0;
-  top: 0;
-  transform: scale(1) translate(60%, -50%);
-}
-.root_direction_left {
-  left: 0;
-  top: 0;
-  transform: scale(1) translate(-60%, -50%);
-}
-.root_invisible {
-  transform: scale(0) translate(50%, -50%);
-}

package/{esm/Badge/Control/Control.module.css → src/components/Badge/Control/Control.module.scss}

@@ -3,4 +3,4 @@
   flex-shrink: 0;
   position: relative;
   vertical-align: middle;
-}
+}

package/{esm/Badge/Control/index.props.d.ts → src/components/Badge/Control/index.props.ts}

@@ -1,3 +1,3 @@
 export interface ControlProps {
-    className?: string;
+  className?: string;
 }

package/src/components/Badge/Control/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import classNames from "classnames";
+import styles from "./Control.module.scss";
+import type { FC, PropsWithChildren } from "react";
+
+import type { ControlProps } from "./index.props";
+
+export const BadgeControl: FC<PropsWithChildren<ControlProps>> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <span className={classNames(styles.root, className)} {...props}>
+    {children}
+  </span>
+);

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Cart from "../../Icons/Cart";
+import Badge from "..";
+
+describe("<Badge />", () => {
+  it('should render correctly', () => {
+      const { container } = render(
+        <Badge content={3}>
+          <Cart />
+        </Badge>,
+      );
+      expect(container).toMatchSnapshot();
+  });
+
+  it('has the correct number', () => {
+    render(
+      <Badge content={3}>
+        <Cart />
+      </Badge>
+    );
+  
+    const badge = screen.getByTestId('badge');
+    expect(badge).toHaveTextContent('3');
+  });
+});