Feat: [HOP-82] hopper icons (#96)

Co-authored-by: alexandre.asselin <[email protected]>
Co-authored-by: Alexandre Asselin <[email protected]>

.changeset/few-actors-attack.md

@@ -0,0 +1,5 @@
+---
+"@hopper-ui/svg-icons": major
+---
+
+Initial release of the package

.changeset/fresh-falcons-build.md

@@ -0,0 +1,5 @@
+---
+"@hopper-ui/styled-system": minor
+---
+
+Added main, types and style to the package.json

.changeset/tricky-lions-type.md

@@ -0,0 +1,5 @@
+---
+"@hopper-ui/icons": major
+---
+
+Initial release of the icons package

.github/workflows/changeset.yml

@@ -22,6 +22,8 @@ jobs:
 
             - name: Install Node.js
               uses: actions/setup-node@v3
+              with:
+                node-version-file: ".nvmrc"
 
             - name: Install pnpm
               uses: pnpm/action-setup@v2

.github/workflows/chromatic.yml

@@ -26,8 +26,10 @@ jobs:
               with:
                   fetch-depth: 0
 
-            - name: Setup Node.js
+            - name: Install Node.js
               uses: actions/setup-node@v3
+              with:
+                node-version-file: ".nvmrc"
 
             - uses: pnpm/action-setup@v2
               name: Install pnpm

.storybook/preview.tsx

@@ -17,7 +17,14 @@ const preview: Preview = {
     decorators: [
         Story => {
             return (
-                <HopperProvider colorScheme="light">
+                <HopperProvider
+                    colorScheme="light"
+                    color="neutral"
+                    backgroundColor="neutral"
+                    lineHeight="body-md"
+                    fontFamily="body-md"
+                    fontSize="body-md"
+                >
                     <Story />
                 </HopperProvider>
             );

packages/components/package.json

@@ -17,8 +17,16 @@
     "sideEffects": [
         "*.css"
     ],
-    "exports": "./dist/index.js",
-    "types": "./dist/index.d.ts",
+
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        }
+    },
     "files": [
         "/dist",
         "CHANGELOG.md",
@@ -58,8 +66,5 @@
         "ts-jest": "29.1.1",
         "tsup": "7.2.0",
         "typescript": "5.2.2"
-    },
-    "engines": {
-        "node": ">=18.0.0"
     }
 }

packages/icons/.eslint.json

@@ -0,0 +1,5 @@
+{
+    "$schema": "https://json.schemastore.org/eslintrc",
+    "root": true,
+    "extends": "plugin:@workleap/react-library"
+}

packages/icons/README.md

@@ -0,0 +1,40 @@
+# @hopper-ui/icons
+
+A set of icons handcrafted by Workleap.
+
+[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
+[![npm version](https://img.shields.io/npm/v/@hopper-ui/icons)](https://www.npmjs.com/package/@hopper-ui/icons)
+
+## Installation
+
+Install the following packages:
+
+**With pnpm**
+
+```shell
+pnpm add @hopper-ui/icons
+```
+
+**With yarn**
+
+```shell
+yarn add -D @hopper-ui/icons
+```
+
+**With npm**
+
+```shell
+npm install -D @hopper-ui/icons
+```
+
+## 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.

packages/icons/docs/Icon.md

@@ -0,0 +1,83 @@
+// TODO: This is not an official documentation. This is a placeholder for the real documentation.
+
+# Icon
+
+An icon component allow you to render a custom icon.
+
+Hopper provides multiple ways to use icons in your project:
+- Using the [Workleap icon library](https://hopper.workleap.design/icons)
+- [Creating your own icons](#creating-your-custom-icons)
+
+## Creating your custom icons
+
+> To use an icon component to create custom icons you must first import your SVG icon as a component by using [`@svgr/webpack`](https://react-svgr.com/docs/getting-started/).
+
+Hopper provides two methods for creating your custom icons:
+- Using the createIcon function (recommended)
+- Using the Icon component
+
+```jsx
+import { Icon, createIcon } from "@hopper-ui/icons"
+```
+
+Both `Icon` and `createIcon` enable you to style the icon using the styled system.
+
+### Using the createIcon function
+
+The `createIcon` function is a convenience wrapper around the process of generating icons with Icon, allowing you to achieve the same functionality with less effort.
+
+```jsx
+import { ReactComponent as MyIcon16 } from "./path/to/my-icon-16.svg";
+import { ReactComponent as MyIcon24 } from "./path/to/my-icon-24.svg";
+import { ReactComponent as MyIcon32 } from "./path/to/my-icon-32.svg";
+import { createIcon } from "@hopper-ui/icons";
+
+const MyIcon = createIcon(MyIcon16, MyIcon24, MyIcon32, "MyIcon")
+```
+
+### Using the Icon component
+
+```jsx
+import { ReactComponent as MyIcon16 } from "./path/to/my-icon-16.svg"
+import { ReactComponent as MyIcon24 } from "./path/to/my-icon-24.svg"
+import { ReactComponent as MyIcon32 } from "./path/to/my-icon-32.svg"
+import { Icon, type CreatedIconProps } from "@hopper-ui/icons";
+
+function MyIcon(props: CreatedIconProps) {
+  return (
+    <Icon
+    src16={MyIcon16}
+    src24={MyIcon24}
+    src32={MyIcon32}
+    {...props} />
+  )
+}
+```
+
+## Usage
+
+## Sizing
+
+Icons support t-shirt sizing. When used inside another Hopper component, they'll generally be sized automatically, but if you use icons standalone, you can use the size prop to control the sizing. The default size is "md".
+
+```jsx
+<MyIcon size="sm" />
+<MyIcon size="md" />
+<MyIcon size="lg" />
+```
+
+## Styling
+
+The color of the icon can be change using the `color` prop.
+All the styled system props are also available.
+
+```jsx
+<MyIcon color="primary" />
+```
+
+## Guidelines
+
+### Accessibility
+
+- By default, icons are considered decorative, and are hidden from assistive technology. When used within a component like a button that has no label, an aria-label should be provided to the parent component. If used standalone, an aria-label can be provided to the icon itself.
+

packages/icons/docs/Installing-icons.md

@@ -0,0 +1,45 @@
+// TODO: This is not an official documentation. This is a placeholder for the real documentation.
+
+# Standalone Installation (without the @hopper-ui/components)
+
+Icons rely on the styled system to provide styling and responsive options.
+
+## Install packages
+```bash
+npm install @hopper-ui/icons @hopper-ui/styled-system
+```
+
+## Import styles
+```css
+/* index.css */
+
+@import "@hopper-ui/icons/index.css";
+```
+
+## Configure your application
+
+```tsx
+// index.tsx
+import { StyledSystemProvider } from "@hopper/styled-system";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+    <StyledSystemProvider withBodyStyles colorScheme="light">
+        <App />
+    </StyledSystemProvider>
+);
+```
+
+## Start using icons
+```tsx
+import { AddIcon } from "@hopper/icons";
+
+export const App = () => (
+    <div>
+        <span>Hello World!</span>
+        <AddIcon size="sm" />
+    </div>
+);
+```

packages/icons/jest.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "jest";
+import { pathsToModuleNameMapper } from "ts-jest";
+import { swcConfig } from "./swc.jest.ts";
+import { compilerOptions } from "./tsconfig.json";
+
+const config: Config = {
+    testEnvironment: "jsdom",
+    transform: {
+        "^.+\\.(js|ts|tsx)$": ["@swc/jest", swcConfig as Record<string, unknown>]
+    },
+    moduleNameMapper: {
+        "\\.css$": "identity-obj-proxy", // https://jestjs.io/docs/webpack#mocking-css-modules
+        ...pathsToModuleNameMapper(compilerOptions.paths, {
+            prefix: "<rootDir>"
+        })
+    },
+    setupFilesAfterEnv: ["<rootDir>/setupTests.ts"]
+};
+
+export default config;

packages/icons/package.json

@@ -0,0 +1,78 @@
+{
+    "name": "@hopper-ui/icons",
+    "author": "Workleap",
+    "version": "0.0.0",
+    "description": "The icons package.",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/gsoft-inc/wl-hopper.git",
+        "directory": "packages/icons"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    },
+    "type": "module",
+    "sideEffects": false,
+    "files": [
+        "/dist",
+        "CHANGELOG.md",
+        "README.md"
+    ],
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "style": "dist/index.css",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./index.css": "./dist/index.css"
+    },
+    "scripts": {
+        "build:ts": "tsup --config ./tsup.build.ts",
+        "build:generate-icons": "tsx scripts/build.ts",
+        "build": "pnpm run build:generate-icons && pnpm run build:ts"
+    },
+    "peerDependencies": {
+        "@hopper-ui/styled-system": "*",
+        "react": "*",
+        "react-dom": "*"
+    },
+    "dependencies": {
+        "react-aria-components": "1.0.0-rc.0",
+        "@react-aria/utils": "3.22.0",
+        "clsx": "2.0.0"
+    },
+    "devDependencies": {
+        "@hopper-ui/styled-system": "workspace:*",
+        "@hopper-ui/svg-icons": "workspace:*",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0",
+        "@svgr/plugin-svgo": "^8.1.0",
+        "@swc/core": "1.3.96",
+        "@swc/helpers": "0.5.3",
+        "@swc/jest": "0.2.29",
+        "@testing-library/jest-dom": "6.1.4",
+        "@testing-library/react": "14.1.2",
+        "@types/jest": "29.5.9",
+        "@types/node": "^20.9.3",
+        "@types/react": "18.2.38",
+        "@types/react-dom": "18.2.16",
+        "@types/react-test-renderer": "18.0.6",
+        "@workleap/eslint-plugin": "3.0.0",
+        "@workleap/swc-configs": "2.1.2",
+        "@workleap/typescript-configs": "3.0.2",
+        "identity-obj-proxy": "3.0.0",
+        "jest": "29.7.0",
+        "jest-environment-jsdom": "29.7.0",
+        "react-test-renderer": "18.2.0",
+        "ts-jest": "29.1.1",
+        "ts-node": "10.9.1",
+        "tsup": "8.0.0",
+        "tsx": "4.1.4",
+        "typescript": "5.3.2"
+    }
+}

packages/icons/scripts/build.ts

@@ -0,0 +1,17 @@
+// Purpose: Build script for the icons package.
+
+import { ComponentDirectory, SVGsDirectory } from "./constants.ts";
+import { fetchSvgs } from "./fetch-svgs.ts";
+import { generateComponents } from "./generate-components.ts";
+import { generateIndex } from "./generate-index.ts";
+
+console.log("⚙️ Fetching SVGs...\n");
+const multiSourceIcons = fetchSvgs(SVGsDirectory);
+
+console.log("⚙️ Generating react components...\n");
+generateComponents(ComponentDirectory, multiSourceIcons);
+
+console.log("📋 List of icons generation...\n");
+generateIndex(ComponentDirectory, multiSourceIcons);
+
+console.log("✨ Build completed!\n");

packages/icons/scripts/constants.ts

@@ -0,0 +1,6 @@
+export const ComponentDirectory = "src/generated-icon-components";
+export const SVGsDirectory = "node_modules/@hopper-ui/svg-icons/dist/icons";
+export const IconSizes = [16, 24, 32] as const;
+
+export const NeutralIconColor = "#3C3C3C"; // --hop-neutral-icon
+export const PrimaryIconColor = "#3B57FF"; // --hop-primary-icon