diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index c61f8820..737f937b 100644 --- a/.github/workflows/chromatic.yml +++ b/.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 diff --git a/.github/workflows/deploy-icons.yml b/.github/workflows/deploy-icons.yml new file mode 100644 index 00000000..8af0bb7d --- /dev/null +++ b/.github/workflows/deploy-icons.yml @@ -0,0 +1,31 @@ +# 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 }} + registry-url: https://registry.npmjs.org/ diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index cf8080ae..48a0f51b 100644 --- a/.github/workflows/deploy.yml +++ b/.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 }} diff --git a/.github/workflows/eslint-annotate.yml b/.github/workflows/eslint-annotate.yml deleted file mode 100644 index d6b9d303..00000000 --- a/.github/workflows/eslint-annotate.yml +++ /dev/null @@ -1,57 +0,0 @@ -name: Annotate ES Lint Results - -on: - push: - pull_request_target: - types: [assigned, opened, synchronize, reopened] - -env: - DISABLE_PROGRESS: true - -concurrency: - group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }} - cancel-in-progress: true - -jobs: - GenerateReport: - 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}} - persist-credential: false - - - name: Node.JS 16 - uses: actions/setup-node@v2 - with: - node-version: 16 - cache: "npm" - - # - run: git config --global url."https://${{ secrets.ES_LINT_TOKEN }}@github.com/".insteadOf ssh://git@github.com/ - - - name: Install Node Dependencies - run: npm ci - env: - CI: TRUE - - - 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 - env: - DISABLE_PROGRESS: true - - - name: Annotate Code Linting Results - uses: ataylorme/eslint-annotate-action@1.2.0 - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" - report-json: "eslint_report.json" - - - name: Upload ESLint report - uses: actions/upload-artifact@v2 - with: - name: eslint_report.json - path: eslint_report.json diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 10fda4a7..4dc7b19d 100644 --- a/.github/workflows/eslint.yml +++ b/.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/eslint-annotate-action@2.2.0 + 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 diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 02e74304..cdbfadfb 100644 --- a/.github/workflows/publish.yml +++ b/.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 diff --git a/README.md b/README.md index 410e2fe4..e57d9fb0 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 3f90c862..522e0483 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@xola/ui-kit", - "version": "2.1.41", + "version": "2.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@xola/ui-kit", - "version": "2.1.41", + "version": "2.2.0", "license": "MIT", "dependencies": { "@headlessui/react": "^1.4.0", diff --git a/package.json b/package.json index c75d4b2a..7b1d0b26 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,12 @@ { "name": "@xola/ui-kit", - "version": "2.1.41", + "version": "2.2.0", "description": "Xola UI Kit", "license": "MIT", + "repository": { + "type": "git", + "url": "git://github.com/xola/ui-kit.git" + }, "files": [ "build", "index.css", diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx index 57ba381c..6a715c71 100644 --- a/src/components/Alert.jsx +++ b/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", diff --git a/src/components/Buttons/SubmitButton.jsx b/src/components/Buttons/SubmitButton.jsx index ef90f042..f1876e26 100644 --- a/src/components/Buttons/SubmitButton.jsx +++ b/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 = { diff --git a/src/components/DatePicker/NavbarElement.jsx b/src/components/DatePicker/NavbarElement.jsx index cdefe15c..1cd76f6d 100644 --- a/src/components/DatePicker/NavbarElement.jsx +++ b/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 ( -
+
diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index 08d30ead..fb5c4ab7 100644 --- a/src/components/Drawer.jsx +++ b/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 = { diff --git a/src/components/Forms/BaseInput.jsx b/src/components/Forms/BaseInput.jsx index 50ab733f..fcae9708 100644 --- a/src/components/Forms/BaseInput.jsx +++ b/src/components/Forms/BaseInput.jsx @@ -25,7 +25,7 @@ export const BaseInput = ({ as: Tag, size = "medium", isError, className, isRequ sizes[size], isError ? "!focus:border-danger !border-danger focus:ring-0 focus:ring-danger" - : "!border-gray-light focus:border-primary focus:ring-0 focus:ring-primary", + : "border-gray-light focus:border-primary focus:ring-0 focus:ring-primary", className, )} value={value} diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx index 4e06c2f6..a582ab3e 100644 --- a/src/components/Modal.jsx +++ b/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 ? (