Extract icons into separate package @xola/icons

.github/workflows/chromatic.yml

@@ -15,7 +15,9 @@ jobs:
 
             - uses: actions/setup-node@v3
               with:
-                node-version: 16
+                  node-version: 16
+                  cache: "npm"
+                  cache-dependency-path: "package-lock.json"
 
             - name: Install dependencies
               run: npm ci

.github/workflows/deploy-icons.yml

@@ -0,0 +1,30 @@
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+name: Publish @xola/icons
+
+on:
+    workflow_dispatch:
+        inputs:
+            tag:
+                description: "Tag version"
+                default: latest
+                required: true
+
+jobs:
+    publish:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+                  cache: "npm"
+                  cache-dependency-path: "package-lock.json"
+                  registry-url: https://registry.npmjs.org/
+
+            - run: cd src/icons && pwd && npm ci
+
+            - name: Publish to @xola/icons
+              run: cd src/icons && pwd && npm publish --tag ${{ github.event.inputs.tag }}
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/deploy.yml

@@ -1,25 +1,31 @@
 # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-name: Node.js Package
+name: Publish @xola/ui-kit
 
 on:
-  workflow_dispatch:
-    inputs:
-      tag:
-        description: "Tag version"
-        default: latest
-        required: true
+    workflow_dispatch:
+        inputs:
+            tag:
+                description: "Tag version"
+                default: latest
+                required: true
 
 jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm run build
-      - run: npm publish --tag ${{ github.event.inputs.tag }}
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+    publish:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+                  cache: "npm"
+                  cache-dependency-path: "package-lock.json"
+                  registry-url: https://registry.npmjs.org/
+
+            - run: npm ci
+
+            - run: npm run build
+
+            - run: npm publish --tag ${{ github.event.inputs.tag }}
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/eslint.yml

@@ -1,39 +1,60 @@
-name: Run ES Lint
+name: Lint
 
 on:
-    push:
-    pull_request_target:
-        types: [assigned, opened, synchronize, reopened]
+  push:
+  # Runs against the workflow and code from the merge commit
+  #  pull_request:
+  #    types: [ opened, synchronize, reopened ]
+  # Runs against the workflow and code from the base of the pull request
+  pull_request_target:
+    types: [opened, synchronize, reopened]
 
 env:
-    DISABLE_PROGRESS: true
+  DISABLE_PROGRESS: true
 
 concurrency:
-    group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-    cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 
 jobs:
-    RunLint:
-        runs-on: ubuntu-latest
-
-        steps:
-            - uses: actions/checkout@v2
-              with:
-                  token: "${{ secrets.ES_LINT_TOKEN }}"
-                  ref: ${{github.event.pull_request.head.sha}}
-                  repository: ${{github.event.pull_request.head.repo.full_name}}
-
-            - name: Node.JS 16
-              uses: actions/setup-node@v2
-              with:
-                  node-version: 16
-
-            - name: Install Node Dependencies
-              run: npm ci
-              env:
-                  CI: TRUE
-
-            - name: Lint Report
-              # This is to show the failures in Github actions
-              run: npm run lint
-              continue-on-error: true
+  Lint:
+    name: ⚡ ES Lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          token: "${{ secrets.ES_LINT_TOKEN }}"
+          ref: ${{github.event.pull_request.head.sha}}
+          repository: ${{github.event.pull_request.head.repo.full_name}}
+
+      - name: Node.JS 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: "npm"
+          cache-dependency-path: "package-lock.json"
+
+      - name: Install Node Dependencies
+        run: npm ci
+
+      - name: Save Code Linting Report to JSON
+        # This is to show failures in GitHub pull request using the action below
+        run: npm run lint:report
+        continue-on-error: true
+
+      - name: Annotate Code Linting Results
+        uses: ataylorme/[email protected]
+        with:
+          check-name: "View Lint Report"
+          markdown-report-on-step-summary: true
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          report-json: "eslint_report.json"
+
+#      # OPTIONAL: save a copy of the usage report for download or use in another job
+#      # Save a copy of the usage report for download or use in another job
+#      - name: Upload ESLint report
+#        uses: actions/upload-artifact@v3
+#        with:
+#          name: eslint_report.json
+#          path: eslint_report.json

.github/workflows/publish.yml

@@ -1,4 +1,4 @@
-name: Publish to GitHub Pages
+name: Publish UI Kit Storybook
 
 on:
     push:
@@ -14,7 +14,9 @@ jobs:
 
             - uses: actions/setup-node@v3
               with:
-                node-version: 16
+                  node-version: 16
+                  cache: "npm"
+                  cache-dependency-path: "package-lock.json"
 
             - name: Install dependencies
               run: npm ci

README.md

@@ -1,6 +1,13 @@
 ## Xola UI Kit
 
-Xola's React component library with Tailwind CSS for the next generation of Xola apps. See a preview at https://ui.xola.io
+Xola's React component library with Tailwind CSS for the next generation of Xola apps.
+
+This repository is published as two pieces:
+
+1. [@xola/ui-kit](https://www.npmjs.com/package/@xola/ui-kit)
+2. [@xola/icons](https://www.npmjs.com/package/@xola/icons)
+
+It's storybook is publicly published at [ui.xola.io](https://ui.xola.io). The icons can be previewed there as well.
 
 ### Requirements
 
@@ -151,7 +158,7 @@ Install [np](https://github.com/sindresorhus/np#readme) which will help you publ
 npm -g install np
 ```
 
-Once you're ready, run this command to publish your package 
+Once you're ready, run this command to publish your package
 
 ```bash
 npm run build

package.json

@@ -3,6 +3,10 @@
     "version": "2.1.42",
     "description": "Xola UI Kit",
     "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/xola/ui-kit.git"
+    },
     "files": [
         "build",
         "index.css",

src/components/Alert.jsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
-import { CloseIcon } from "../icons/CloseIcon";
+import { CloseIcon } from "../icons";
 
 const colors = {
     primary: "bg-primary-lighter text-black",

src/components/Buttons/SubmitButton.jsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
 import { Spinner } from "../Spinner";
-import { CheckIcon } from "../../icons/CheckIcon";
+import { CheckIcon } from "../../icons";
 import { Button, colors } from "./Button";
 
 const loadingColors = {

src/components/DatePicker/NavbarElement.jsx

@@ -1,15 +1,14 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
-import { ChevronLeftIcon } from "../../icons/ChevronLeftIcon";
-import { ChevronRightIcon } from "../../icons/ChevronRightIcon";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../icons";
 
 /**
  * Render the custom left & right arrows to change the current month.
  */
 export const NavbarElement = ({ onPreviousClick, onNextClick, className, showNextButton, showPreviousButton }) => {
     return (
-        <div className={clsx("absolute top-1.5 right-1 z-50", className)}>
+        <div className={clsx("absolute right-1 top-1.5 z-50", className)}>
             <ChevronButton isVisible={showPreviousButton} onClick={onPreviousClick}>
                 <ChevronLeftIcon />
             </ChevronButton>

src/components/Drawer.jsx

@@ -2,7 +2,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { Fragment } from "react";
-import { CloseIcon } from "../icons/CloseIcon";
+import { CloseIcon } from "../icons";
 import { Button } from "./Buttons/Button";
 
 const sizes = {

src/components/Modal.jsx

@@ -2,7 +2,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { Fragment } from "react";
-import { CloseIcon } from "../icons/CloseIcon";
+import { CloseIcon } from "../icons";
 
 const sizes = {
     small: "max-w-100", // 400px
@@ -110,7 +110,7 @@ export const Modal = ({
                             {onClose ? (
                                 <button
                                     type="button"
-                                    className="absolute top-0 right-0 m-4 hidden p-2 text-gray hover:text-gray-darker sm:block"
+                                    className="absolute right-0 top-0 m-4 hidden p-2 text-gray hover:text-gray-darker sm:block"
                                     onClick={onClose}
                                 >
                                     <CloseIcon />

src/components/Screens/Login.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React, { useState } from "react";
-import { XolaLogoSimple } from "../../images/XolaLogoSimple";
+import { XolaLogoSimple } from "../../icons";
 import { Alert } from "../Alert";
 import { Button } from "../Buttons/Button";
 import { Checkbox } from "../Forms/Checkbox";
@@ -59,7 +59,7 @@ export const Login = ({
             {...rest}
         >
             <div className="md:full flex h-[88%] w-full flex-col items-center justify-center space-y-8">
-                <div className="w-85 rounded-lg py-0 px-9 md:bg-white md:py-10">
+                <div className="w-85 rounded-lg px-9 py-0 md:bg-white md:py-10">
                     <div className="mb-12 space-y-4 md:mb-20">
                         <XolaLogoSimple className="mx-auto h-10 w-auto md:h-12" />
                         {label && <div className="flex items-center justify-center">{label}</div>}
@@ -127,7 +127,7 @@ export const Login = ({
             </div>
 
             <footer>
-                <div className="flex w-full flex-col items-center justify-center overflow-hidden py-1 px-4 sm:px-6 lg:px-8">
+                <div className="flex w-full flex-col items-center justify-center overflow-hidden px-4 py-1 sm:px-6 lg:px-8">
                     <div className="m-5 w-85 rounded-lg px-4 text-center text-xs opacity-80 md:text-sm">
                         <a
                             href="https://www.xola.com/team"

src/components/Search.jsx

@@ -7,7 +7,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { isOSX } from "../helpers/browser";
 import { useId } from "../hooks/useId";
 import { useIsClient } from "../hooks/useIsClient";
-import { SearchIcon } from "../icons/SearchIcon";
+import { SearchIcon } from "../icons";
 import { Key } from "./Key";
 import { Spinner } from "./Spinner";