[HOP-65, HOP-64] Add the style system (#91)

gsoft-inc · Nov 14, 2023 · 8bde51d · 8bde51d
1 parent ee7872e
commit 8bde51d
Show file tree

Hide file tree

Showing 66 changed files with 4,970 additions and 309 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -27,6 +27,9 @@ const storybookConfig: StorybookConfig = {
                 // TurboSnap only officially support webpack (https://www.chromatic.com/docs/turbosnap/#prerequisites)
                 // This plugin is suggested by storybook and maintained by a core storybook contributor.
                 // This is experimental, and may not support all project and storybook configurations, yet.
+                // TODO: ts-ignore, it suggests we should use turbosnap.default but i'm not sure yet
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 turbosnap({
                 // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
                     rootDir: config.root ?? process.cwd()

diff --git a/.storybook/preview.ts → .storybook/preview.tsx b/.storybook/preview.ts → .storybook/preview.tsx
@@ -1,3 +1,4 @@
+import { HopperProvider } from "@hopper-ui/components";
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
@@ -12,7 +13,16 @@ const preview: Preview = {
         designToken: {
             disable: true
         }
-    }
+    },
+    decorators: [
+        Story => {
+            return (
+                <HopperProvider colorScheme="light">
+                    <Story />
+                </HopperProvider>
+            );
+        }
+    ]
 };
 
 export default preview;
diff --git a/.stylelintrc.js → .stylelintrc.cjs b/.stylelintrc.js → .stylelintrc.cjs
@@ -1,4 +1,8 @@
+// @ts-check
+
 /** @type {import('stylelint').Config} */
-module.exports = {
+const config = {
     extends: "@workleap/stylelint-configs"
 };
+
+module.exports = config;
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,3 @@
+# Contributing
+
+TODO
diff --git a/apps/docs/components/copyButton/CopyButton.tsx b/apps/docs/components/copyButton/CopyButton.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import clsx from "clsx";
 import React from "react";
 import { Button } from "react-aria-components";
-import cx from "classnames";
 
 import "./copyButton.css";
 
@@ -25,7 +25,7 @@ const CopyButton = ({ text, size = "medium", isInlined = false, className }: Cop
         }, 5000);
     };
 
-    const classes = cx("hd-copy-button", {
+    const classes = clsx("hd-copy-button", {
         [`hd-copy-button--${size}`]: size !== "medium",
         "hd-copy-button--inlined": isInlined
     }, className);

diff --git a/apps/docs/components/tabs/Tabs.tsx b/apps/docs/components/tabs/Tabs.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Children, useState, type ReactElement, isValidElement } from "react";
-import cx from "classnames";
+import clsx from "clsx";
+import { Children, isValidElement, useState, type ReactElement } from "react";
 
 import "./tabs.css";
 
@@ -27,17 +27,17 @@ const Tabs = ({ tabs, className, children }: TabsProps) => {
     const selectedChild = arrayChildren[selected];
 
     return (
-        <div className={cx("hd-tabs", className)}>
+        <div className={clsx("hd-tabs", className)}>
             <ul className="hd-tabs__list">
                 {tabs.map((tab, index) => (
                     <li
                         key={`${index.toString()}_${tab.category}`}
-                        className={cx("hd-tabs__item", { "hd-tabs__item--active": index === selected })}
+                        className={clsx("hd-tabs__item", { "hd-tabs__item--active": index === selected })}
                     >
                         <button
                             type="button"
                             onClick={() => handleOnClick(index)}
-                            className={cx("hd-tabs__item-button", { "hd-tabs__item-button--active": index === selected })}
+                            className={clsx("hd-tabs__item-button", { "hd-tabs__item-button--active": index === selected })}
                         >
                             {tab.title}
                         </button>

diff --git a/apps/docs/components/ui/aside/Aside.tsx b/apps/docs/components/ui/aside/Aside.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
-import cx from "classnames";
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
 
 import "./aside.css";
 
@@ -112,7 +112,7 @@ const Aside = ({ title, links }: React.PropsWithoutRef<AsideProps>) => {
     }, [isOpen]);
 
     const listItems = links.map(link => (
-        <li className={cx("hd-aside__item", activeSection === link.id && "hd-aside__item--active")} key={link.id}>
+        <li className={clsx("hd-aside__item", activeSection === link.id && "hd-aside__item--active")} key={link.id}>
             <a href={link.url} className="hd-aside__link" >
                 {link.title}
             </a>
@@ -130,10 +130,10 @@ const Aside = ({ title, links }: React.PropsWithoutRef<AsideProps>) => {
                             <path d="M4 6L8 10L12 6" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
                         </svg>
                     </button>
-                    <ul className={cx("hd-aside__list", isOpen ? "hd-aside__item--active" : "hd-aside__list--closed")}>
+                    <ul className={clsx("hd-aside__list", isOpen ? "hd-aside__item--active" : "hd-aside__list--closed")}>
                         {activeItemIndex !== -1 && (
                             <span
-                                className={cx("hd-aside__marker", activeItemIndex === -1 && "hd-aside__marker--hide")}
+                                className={clsx("hd-aside__marker", activeItemIndex === -1 && "hd-aside__marker--hide")}
                                 style={{ top: activeItemIndex * titleHeight + "px" }}
                             ></span>)}
                         {listItems}

diff --git a/apps/docs/components/ui/iconButton/IconButton.tsx b/apps/docs/components/ui/iconButton/IconButton.tsx
@@ -1,4 +1,4 @@
-import cx from "classnames";
+import clsx from "clsx";
 
 import "./iconButton.css";
 
@@ -23,7 +23,7 @@ const IconButton = <Element extends React.ElementType = typeof defaultElement>(p
     } = props;
 
     return (
-        <Component className={cx(IconButtonClass, className)} {...rest}>
+        <Component className={clsx(IconButtonClass, className)} {...rest}>
             {children}
         </Component>
     );

diff --git a/apps/docs/components/ui/mobileMenu/MobileMenu.tsx b/apps/docs/components/ui/mobileMenu/MobileMenu.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import ThemeSwitch from "@/components/themeSwitch/ThemeSwitch";
+import IconButton from "@/components/ui/iconButton/IconButton";
+import { navigation } from "@/configs/navigation";
+import clsx from "clsx";
 import Link from "next/link";
-import cx from "classnames";
 import { usePathname } from "next/navigation";
-import { navigation } from "@/configs/navigation";
-import IconButton from "@/components/ui/iconButton/IconButton";
-import ThemeSwitch from "@/components/themeSwitch/ThemeSwitch";
+import { useEffect, useState } from "react";
 
 import CloseIcon from "./assets/close.svg";
 import GithubLogo from "./assets/github.svg";
@@ -65,15 +65,15 @@ const MobileMenu = ({ onClose, isOpen }: MobileMenuProps) => {
 
         return (
             <li key={label}>
-                <Link href={path} className={cx("hd-mobile-menu-nav-list__link", isActive && "hd-mobile-menu-nav-list__link--active", isReady && "hd-mobile-menu-nav-list__link--disabled")} onClick={onClose}>
+                <Link href={path} className={clsx("hd-mobile-menu-nav-list__link", isActive && "hd-mobile-menu-nav-list__link--active", isReady && "hd-mobile-menu-nav-list__link--disabled")} onClick={onClose}>
                     {label}
                 </Link>
             </li>
         );
     });
 
     return (
-        <div className={cx("hd-mobile-menu", isAnimating && "hd-mobile-menu--is-animating", `hd-mobile-menu--${animationDirection}`)}>
+        <div className={clsx("hd-mobile-menu", isAnimating && "hd-mobile-menu--is-animating", `hd-mobile-menu--${animationDirection}`)}>
             <div className="hd-mobile-menu__header">
                 <div className="hd-wrapper hd-flex">
                     <Link href="/" className="hd-brand" aria-label="Hopper Brand">

diff --git a/apps/docs/components/ui/nav/Nav.tsx b/apps/docs/components/ui/nav/Nav.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import clsx from "clsx";
 import Link from "next/link";
-import cx from "classnames";
 import { usePathname } from "next/navigation";
 
 import type { NavItem } from "@/configs/navigation";
@@ -22,7 +22,7 @@ const Nav = ({ items }: { items: React.PropsWithoutRef<NavItem[]> }) => {
         const isActive = path.includes(firstPathLevel) && firstPathLevel !== "";
 
         return (
-            <li key={label} className={cx("hd-nav__list-item", isActive && "hd-nav__list-item--active", status !== "ready" && "hd-nav__link--disabled")}>
+            <li key={label} className={clsx("hd-nav__list-item", isActive && "hd-nav__list-item--active", status !== "ready" && "hd-nav__link--disabled")}>
                 <Link href={path} className="hd-nav__link" >
                     {label}
                 </Link>

diff --git a/apps/docs/components/ui/overlay/Overlay.tsx b/apps/docs/components/ui/overlay/Overlay.tsx
@@ -1,5 +1,5 @@
+import clsx from "clsx";
 import { useEffect, useState } from "react";
-import cx from "classnames";
 
 import "./overlay.css";
 
@@ -30,7 +30,7 @@ const Overlay = ({ isOpen }: OverlayProps) => {
         return null;
     }
 
-    const overlayClassName = cx("hd-overlay", isAnimating && "hd-overlay--is-animating", `hd-overlay--${animationDirection}`);
+    const overlayClassName = clsx("hd-overlay", isAnimating && "hd-overlay--is-animating", `hd-overlay--${animationDirection}`);
 
     return (
         <div className={overlayClassName}></div>

diff --git a/apps/docs/components/ui/sectionPopover/sectionPopover.tsx b/apps/docs/components/ui/sectionPopover/sectionPopover.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import clsx from "clsx";
 import { useState } from "react";
-import cx from "classnames";
 import { Button } from "react-aria-components";
 
-import "./sectionPopover.css";
 import ChevronIcon from "./assets/chevron-icon.svg";
+import "./sectionPopover.css";
 
 interface Link {
     title: string;
@@ -46,11 +46,11 @@ const SectionPopover = ({ links }: React.PropsWithoutRef<SectionPopoverProps>) =
         <>
             {listItems.length > 0 && (
                 <div className="hd-section-popover">
-                    <Button className={cx("hd-section-popover__button", isOpen && "hd-section-popover__button--open")} onPress={togglePopover}>
+                    <Button className={clsx("hd-section-popover__button", isOpen && "hd-section-popover__button--open")} onPress={togglePopover}>
                         On this page
                         <ChevronIcon className="hd-section-popover__button-icon" />
                     </Button>
-                    <div className={cx("hd-section-popover__popover", isOpen && "hd-section-popover__popover--open")}>
+                    <div className={clsx("hd-section-popover__popover", isOpen && "hd-section-popover__popover--open")}>
                         <a className="hd-section-popover__top-section" href="#top" onClick={togglePopover}>Return to top</a>
                         <ul className="hd-section-popover__list">
                             {listItems}

diff --git a/apps/docs/components/ui/sidebar/Sidebar.tsx b/apps/docs/components/ui/sidebar/Sidebar.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-import { usePathname } from "next/navigation";
-import Link from "next/link";
-import cx from "classnames";
-import getPageLinks from "@/utils/getPageLinks";
 import Overlay from "@/components/ui/overlay/Overlay";
+import getPageLinks from "@/utils/getPageLinks";
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef } from "react";
 
 import type { Data } from "@/utils/getPageLinks";
 
@@ -80,7 +80,7 @@ const Sidebar = ({ data, isOpen, onClose }: SidebarProps) => {
                             const isActive = pathName === linkPath;
 
                             return (
-                                <li className={cx("hd-sidebar__item", isActive && "hd-sidebar__item--active")} key={item.id}>
+                                <li className={clsx("hd-sidebar__item", isActive && "hd-sidebar__item--active")} key={item.id}>
                                     <Link href={linkPath} className="hd-sidebar__link" onClick={handleLinkClick}>{item.title}</Link>
                                 </li>
                             );
@@ -94,7 +94,7 @@ const Sidebar = ({ data, isOpen, onClose }: SidebarProps) => {
     return (
         <>
             <Overlay isOpen={isOpen}></Overlay>
-            <nav className={cx("hd-sidebar", isOpen && "hd-sidebar--open")} aria-label="Sidebar" ref={sidebarRef}>
+            <nav className={clsx("hd-sidebar", isOpen && "hd-sidebar--open")} aria-label="Sidebar" ref={sidebarRef}>
                 <div className="hd-sidebar__container">
                     {linkItems}
                 </div>

diff --git a/apps/docs/components/ui/title/Title.tsx b/apps/docs/components/ui/title/Title.tsx
@@ -1,5 +1,5 @@
-import cx from "classnames";
 import formattingTitleId from "@/utils/formattingTitleId";
+import clsx from "clsx";
 
 import "./title.css";
 
@@ -26,7 +26,7 @@ const Title = ({
 
     return (
         <Component
-            className={cx("hd-title", className, {
+            className={clsx("hd-title", className, {
                 [`hd-title--level${level}`]: level
             })}
             id={level > 1 ? uniqueId : undefined}

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -22,7 +22,8 @@
         "react-dom": "18.2.0",
         "react-toggle": "4.1.3",
         "rehype-pretty-code": "0.10.1",
-        "unist-util-visit": "5.0.0"
+        "unist-util-visit": "5.0.0",
+        "clsx": "2.0.0"
     },
     "devDependencies": {
         "@hopper-ui/tokens": "workspace:*",
@@ -38,7 +39,6 @@
         "@types/node": "20.8.9",
         "@types/react": "18.2.32",
         "@types/react-dom": "18.2.14",
-        "classnames": "2.3.2",
         "eslint": "8.52.0",
         "eslint-config-next": "13.5.6",
         "eslint-plugin-storybook": "0.6.15",

diff --git a/jest.config.ts b/jest.config.ts
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     },
     "private": true,
     "license": "Apache-2.0",
+    "type": "module",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/gsoft-inc/wl-hopper.git"
@@ -19,12 +20,13 @@
         "test": "echo \"no test specified\"",
         "build": "pnpm -r build ",
         "build:tokens": "pnpm --filter=\"@hopper-ui/tokens\" build",
+        "build:pkg": "pnpm -r --filter \"{packages/**}\" build ",
         "changeset": "changeset",
         "ci-release": "pnpm build && changeset publish",
         "lint": "pnpm run \"/^lint:.*/\" && pnpm run typecheck",
         "lint:eslint": "eslint . --max-warnings=-1 --cache --cache-location node_modules/.cache/eslint",
         "lint:style": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-location node_modules/.cache/stylelint",
-        "typecheck": "pnpm -r --parallel exec tsc --noEmit",
+        "typecheck": "pnpm -r --parallel --include-workspace-root exec tsc --noEmit",
         "clean": "pnpm -r --parallel --include-workspace-root exec pnpm dlx rimraf dist node_modules/.cache",
         "reset": "pnpm clean && pnpm reset:modules",
         "reset:modules": "pnpm -r --parallel --include-workspace-root exec pnpm dlx rimraf node_modules pnpm-lock.yaml",

diff --git a/packages/components/README.md b/packages/components/README.md
@@ -0,0 +1,40 @@
+# @hopper-ui/components
+
+Hopper is a design system developed by Workleap to help create the best experience for our customers and drive consistency between all our web apps.
+
+[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
+[![npm version](https://img.shields.io/npm/v/@hopper-ui/components)](https://www.npmjs.com/package/@hopper-ui/components)
+
+## Installation
+
+Install the following packages:
+
+**With pnpm**
+
+```shell
+pnpm add @hopper-ui/components
+```
+
+**With yarn**
+
+```shell
+yarn add -D @hopper-ui/components
+```
+
+**With npm**
+
+```shell
+npm install -D @hopper-ui/components
+```
+
+## Usage
+
+View the [user's documentation](https://hopper.workleap.design/).
+
+## 🤝 Contributing
+
+View the [contributor's documentation](https://github.com/gsoft-inc/wl-hopper/blob/main/CONTRIBUTING.md).
+
+## License
+
+Copyright © 2023, Workleap. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/workleap-license/blob/master/LICENSE.