From d381228692ff8d5755c570352f28d32f3c26020a Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Mon, 7 Oct 2024 17:21:06 -0400 Subject: [PATCH 1/8] Introduce the new @linode/ui package --- .github/workflows/ci.yml | 63 ++++++++++- .github/workflows/coverage.yml | 3 + .github/workflows/coverage_badge.yml | 3 + README.md | 2 +- package.json | 5 +- packages/manager/package.json | 1 + packages/ui/.changeset/README.md | 18 +++ packages/ui/.eslintrc.json | 75 +++++++++++++ packages/ui/.prettierrc | 4 + packages/ui/package.json | 105 ++++++++++++++++++ .../components/BetaChip/BetaChip.stories.tsx | 17 +++ .../src/components/BetaChip/BetaChip.test.tsx | 30 +++++ .../ui/src/components/BetaChip/BetaChip.tsx | 61 ++++++++++ packages/ui/src/components/Chip.tsx | 13 +++ packages/ui/src/components/index.ts | 2 + packages/ui/src/index.ts | 1 + packages/ui/tsconfig.json | 47 ++++++++ scripts/changelog/utils/constants.mjs | 2 +- scripts/package-versions/index.js | 3 + 19 files changed, 450 insertions(+), 5 deletions(-) create mode 100644 packages/ui/.changeset/README.md create mode 100644 packages/ui/.eslintrc.json create mode 100644 packages/ui/.prettierrc create mode 100644 packages/ui/package.json create mode 100644 packages/ui/src/components/BetaChip/BetaChip.stories.tsx create mode 100644 packages/ui/src/components/BetaChip/BetaChip.test.tsx create mode 100644 packages/ui/src/components/BetaChip/BetaChip.tsx create mode 100644 packages/ui/src/components/Chip.tsx create mode 100644 packages/ui/src/components/index.ts create mode 100644 packages/ui/src/index.ts create mode 100644 packages/ui/tsconfig.json diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 119f95cec4f..f465116df57 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -12,7 +12,7 @@ jobs: lint: strategy: matrix: - package: ["linode-manager", "@linode/api-v4", "@linode/validation"] + package: ["linode-manager", "@linode/api-v4", "@linode/validation", "@linode/ui"] runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -152,6 +152,40 @@ jobs: - run: cp scripts/validatePackages/sdk-commonjs.cjs test-sdk-cjs/ - run: cd test-sdk-cjs && node ./sdk-commonjs.cjs + test-ui: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: "20.17" + - uses: actions/cache@v4 + with: + path: | + **/node_modules + key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} + - run: yarn --frozen-lockfile + - run: yarn workspace @linode/ui run test + + build-ui: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: "20.17" + - uses: actions/cache@v4 + with: + path: | + **/node_modules + key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} + - run: yarn --frozen-lockfile + - run: yarn workspace @linode/ui run build + - uses: actions/upload-artifact@v4 + with: + name: packages-ui-lib + path: packages/ui/lib + test-manager: runs-on: ubuntu-latest needs: build-sdk @@ -237,6 +271,10 @@ jobs: with: name: packages-api-v4-lib path: packages/api-v4/lib + - uses: actions/download-artifact@v4 + with: + name: packages-ui-lib + path: packages/ui/lib - run: yarn --frozen-lockfile - run: yarn workspace linode-manager run build - uses: actions/upload-artifact@v4 @@ -275,6 +313,29 @@ jobs: SLACK_ICON_EMOJI: ":package:" MSG_MINIMAL: true + publish-ui: + runs-on: ubuntu-latest + if: false + steps: + - uses: actions/checkout@v4 + - uses: JS-DevTools/npm-publish@v1 + id: npm-publish + with: + token: ${{ secrets.NPM_AUTH_TOKEN }} + package: ./packages/ui/package.json + - name: slack-notify + uses: rtCamp/action-slack-notify@master + if: steps.npm-publish.outputs.type != 'none' + env: + SLACK_CHANNEL: api-js-client + SLACK_TITLE: "Linode UI Library v${{ steps.npm-publish.outputs.version}}" + SLACK_MESSAGE: ":rocket: Linode UI Library has been published to NPM: ${{ steps.npm-publish.outputs.old-version }} => ${{ steps.npm-publish.outputs.version }}. View the changelog at https://github.com/linode/manager/blob/master/packages/api-v4/CHANGELOG.md" + SLACK_USERNAME: npm-bot + SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} + SLACK_ICON_EMOJI: ":package:" + MSG_MINIMAL: true + + build-storybook: runs-on: ubuntu-latest needs: build-sdk diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml index 146bea26c61..700a1c0efcb 100644 --- a/.github/workflows/coverage.yml +++ b/.github/workflows/coverage.yml @@ -31,6 +31,9 @@ jobs: - name: Build @linode/api-v4 run: yarn build:sdk + - name: Build @linode/ui + run: yarn build:ui + - name: Run Base Branch Coverage run: yarn coverage:summary diff --git a/.github/workflows/coverage_badge.yml b/.github/workflows/coverage_badge.yml index ca07bfd7f27..61563f8908e 100644 --- a/.github/workflows/coverage_badge.yml +++ b/.github/workflows/coverage_badge.yml @@ -33,6 +33,9 @@ jobs: - name: Build @linode/api-v4 run: yarn build:sdk + - name: Build @linode/ui + run: yarn build:ui + - name: Run Base Branch Coverage run: yarn coverage:summary diff --git a/README.md b/README.md index 942c886ab92..618cc77f6c0 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ ## Overview -This repository is home to the Akamai Connected **[Cloud Manager](https://cloud.linode.com)** and related [`@linode/api-v4`](packages/api-v4/) and [`@linode/validation`](packages/validation/) Typescript packages. +This repository is home to the Akamai Connected **[Cloud Manager](https://cloud.linode.com)** and related [`@linode/api-v4`](packages/api-v4/), [`@linode/validation`](packages/validation/) and [`@linode/ui`](packages/ui/) Typescript packages. ## Developing Locally diff --git a/package.json b/package.json index 92048af4679..83749286c6c 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,10 @@ "upgrade:sdk": "yarn workspace @linode/api-v4 version --no-git-tag-version --no-commit-hooks && yarn workspace linode-manager upgrade @linode/api-v4", "build:sdk": "yarn workspace @linode/api-v4 build", "build:validation": "yarn workspace @linode/validation build", - "build": "yarn build:validation && yarn build:sdk && yarn workspace linode-manager build", + "build:ui": "yarn workspace @linode/ui build", + "build": "yarn build:validation && yarn build:sdk && yarn build:ui && yarn workspace linode-manager build", "build:analyze": "yarn workspace linode-manager build:analyze", - "up": "yarn install:all && yarn build:validation && yarn build:sdk && yarn start:all", + "up": "yarn install:all && yarn build:validation && yarn build:sdk && yarn build:ui && yarn start:all", "up:expose": "yarn install:all && yarn build:validation && yarn build:sdk && yarn start:all:expose", "dev": "yarn install:all && yarn start:all", "start:all": "concurrently -n api-v4,validation,manager -c blue,yellow,green \"yarn workspace @linode/api-v4 start\" \"yarn workspace @linode/validation start\" \"yarn workspace linode-manager start\"", diff --git a/packages/manager/package.json b/packages/manager/package.json index 05ab3b5db7e..4be7ed5db69 100644 --- a/packages/manager/package.json +++ b/packages/manager/package.json @@ -20,6 +20,7 @@ "@linode/api-v4": "*", "@linode/design-language-system": "^2.6.1", "@linode/search": "*", + "@linode/ui": "*", "@linode/validation": "*", "@lukemorales/query-key-factory": "^1.3.4", "@mui/icons-material": "^5.14.7", diff --git a/packages/ui/.changeset/README.md b/packages/ui/.changeset/README.md new file mode 100644 index 00000000000..d96182a25b0 --- /dev/null +++ b/packages/ui/.changeset/README.md @@ -0,0 +1,18 @@ +# Changesets + +This directory gets auto-populated when running `yarn changeset`. +You can however add your changesets manually as well, knowing that the [TYPE] is limited to the following options `Added`, `Fixed`, `Changed`, `Removed`, `Tech Stories`, `Tests`, `Upcoming Features` and follow this format: + +```md +--- +"@linode/[PACKAGE]": [TYPE] +--- + +My PR Description ([#`PR number`](`PR link`)) +``` + +You must commit them to the repo so they can be picked up for the changelog generation. + +This directory get wiped out when running `yarn generate-changelog`. + +See `changeset.mjs` for implementation details. diff --git a/packages/ui/.eslintrc.json b/packages/ui/.eslintrc.json new file mode 100644 index 00000000000..3388926d8ea --- /dev/null +++ b/packages/ui/.eslintrc.json @@ -0,0 +1,75 @@ +{ + "ignorePatterns": [ + "node_modules", + "lib", + "index.js", + "!.eslintrc.js" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": 2020, + "warnOnUnsupportedTypeScriptVersion": true + }, + "plugins": [ + "@typescript-eslint", + "sonarjs", + "prettier", + "@linode/eslint-plugin-cloud-manager" + ], + "extends": [ + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "plugin:sonarjs/recommended", + "plugin:prettier/recommended" + ], + "rules": { + "no-unused-vars": [ + "warn", + { + "argsIgnorePattern": "^_" + } + ], + "no-unused-expressions": "warn", + "no-bitwise": "error", + "no-caller": "error", + "no-eval": "error", + "no-throw-literal": "warn", + "no-loop-func": "error", + "no-await-in-loop": "error", + "array-callback-return": "error", + "no-invalid-this": "off", + "no-new-wrappers": "error", + "no-restricted-imports": [ + "error", + "rxjs" + ], + "no-console": "error", + "no-undef-init": "off", + "radix": "error", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-namespace": "warn", + "@typescript-eslint/camelcase": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/no-empty-interface": "warn", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/interface-name-prefix": "off", + "sonarjs/cognitive-complexity": "warn", + "sonarjs/no-duplicate-string": "warn", + "sonarjs/prefer-immediate-return": "warn", + "sonarjs/no-identical-functions": "warn", + "sonarjs/no-redundant-jump": "warn", + "sonarjs/no-small-switch": "warn", + "no-multiple-empty-lines": "error", + "curly": "warn", + "sort-keys": "off", + "comma-dangle": "off", + "no-trailing-spaces": "warn", + "no-mixed-requires": "warn", + "spaced-comment": "warn", + "object-shorthand": "warn", + "prettier/prettier": "warn" + } +} \ No newline at end of file diff --git a/packages/ui/.prettierrc b/packages/ui/.prettierrc new file mode 100644 index 00000000000..c563e850dad --- /dev/null +++ b/packages/ui/.prettierrc @@ -0,0 +1,4 @@ +{ + "printWidth": 80, + "singleQuote": true +} diff --git a/packages/ui/package.json b/packages/ui/package.json new file mode 100644 index 00000000000..3f46cd4678b --- /dev/null +++ b/packages/ui/package.json @@ -0,0 +1,105 @@ +{ + "name": "@linode/ui", + "author": "Linode", + "description": "Linode UI component library", + "version": "0.0.1", + "private": true, + "type": "module", + "main": "lib/index.cjs", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js", + "require": "./lib/index.cjs" + }, + "./lib": { + "import": "./lib/index.js", + "require": "./lib/index.cjs" + }, + "./lib/*": { + "import": "./lib/index.js", + "require": "./lib/index.cjs" + } + }, + "types": "./lib/index.d.ts", + "browser": "./lib/index.global.js", + "unpkg": "./lib/index.global.js", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/linode/manager/tree/develop/packages/ui" + }, + "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@linode/design-language-system": "^2.6.1", + "@mui/icons-material": "^5.14.7", + "@mui/material": "^5.14.7", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "scripts": { + "start": "concurrently --raw \"tsc -w --preserveWatchOutput\" \"tsup --watch\"", + "build": "concurrently --raw \"tsc\" \"tsup\"", + "lint": "eslint . --quiet --ext .js,.ts,.tsx", + "typecheck": "tsc --noEmit true --emitDeclarationOnly false", + "precommit": "lint-staged", + "test": "vitest run", + "test:debug": "node --inspect-brk scripts/test.js --runInBand", + "storybook": "storybook dev -p 6006", + "storybook-static": "storybook build -c .storybook -o .out", + "build-storybook": "storybook build", + "coverage": "vitest run --coverage && open coverage/index.html", + "coverage:summary": "vitest run --coverage.enabled --reporter=junit --coverage.reporter=json-summary" + }, + "lint-staged": { + "*.{ts,tsx,js}": [ + "prettier --write", + "eslint --ext .js,.ts,.tsx --quiet" + ] + }, + "devDependencies": { + "@linode/eslint-plugin-cloud-manager": "^0.0.5", + "@storybook/addon-a11y": "^8.3.0", + "@storybook/addon-actions": "^8.3.0", + "@storybook/addon-controls": "^8.3.0", + "@storybook/addon-docs": "^8.3.0", + "@storybook/addon-mdx-gfm": "^8.3.0", + "@storybook/addon-measure": "^8.3.0", + "@storybook/addon-storysource": "^8.3.0", + "@storybook/addon-viewport": "^8.3.0", + "@storybook/blocks": "^8.3.0", + "@storybook/manager-api": "^8.3.0", + "@storybook/preview-api": "^8.3.0", + "@storybook/react": "^8.3.0", + "@storybook/react-vite": "^8.3.0", + "@storybook/theming": "^8.3.0", + "@swc/core": "^1.3.1", + "@testing-library/dom": "^10.1.0", + "@testing-library/react": "~16.0.0", + "@testing-library/user-event": "^14.5.2", + "@types/node": "^12.7.1", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.18", + "@typescript-eslint/eslint-plugin": "^6.21.0", + "@typescript-eslint/parser": "^6.21.0", + "@vitejs/plugin-react-swc": "^3.7.0", + "@vitest/coverage-v8": "^2.1.1", + "@vitest/ui": "^2.1.1", + "eslint": "^7.1.0", + "eslint-config-prettier": "~8.1.0", + "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-perfectionist": "^1.4.0", + "eslint-plugin-prettier": "~3.3.1", + "eslint-plugin-react": "^7.19.0", + "eslint-plugin-testing-library": "^3.1.2", + "eslint-plugin-xss": "^0.1.10", + "lint-staged": "^15.2.9", + "prettier": "~2.2.1", + "storybook": "^8.3.0", + "storybook-dark-mode": "4.0.1", + "tsx": "^4.19.1", + "vite": "^5.4.6", + "vitest": "^2.1.1" + } +} diff --git a/packages/ui/src/components/BetaChip/BetaChip.stories.tsx b/packages/ui/src/components/BetaChip/BetaChip.stories.tsx new file mode 100644 index 00000000000..3cc3a4ea934 --- /dev/null +++ b/packages/ui/src/components/BetaChip/BetaChip.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { BetaChip } from './BetaChip'; + +import type { BetaChipProps } from './BetaChip'; +import type { Meta, StoryObj } from '@storybook/react'; + +export const Default: StoryObj = { + render: (args) => , +}; + +const meta: Meta = { + args: { color: 'default' }, + component: BetaChip, + title: 'Foundations/Chip/BetaChip', +}; +export default meta; diff --git a/packages/ui/src/components/BetaChip/BetaChip.test.tsx b/packages/ui/src/components/BetaChip/BetaChip.test.tsx new file mode 100644 index 00000000000..8ec099137f7 --- /dev/null +++ b/packages/ui/src/components/BetaChip/BetaChip.test.tsx @@ -0,0 +1,30 @@ +import { fireEvent, render } from '@testing-library/react'; +import React from 'react'; + +import { BetaChip } from './BetaChip'; + +describe('BetaChip', () => { + it('renders with default color', () => { + const { getByTestId } = render(); + const betaChip = getByTestId('betaChip'); + expect(betaChip).toBeInTheDocument(); + expect(betaChip).toHaveStyle('background-color: rgba(0, 0, 0, 0.08)'); + }); + + it('renders with primary color', () => { + const { getByTestId } = render(); + const betaChip = getByTestId('betaChip'); + expect(betaChip).toBeInTheDocument(); + expect(betaChip).toHaveStyle('background-color: rgb(16, 138, 214)'); + }); + + it('triggers an onClick callback', () => { + const onClickMock = vi.fn(); + const { getByTestId } = render( + + ); + const betaChip = getByTestId('betaChip'); + fireEvent.click(betaChip); + expect(onClickMock).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/ui/src/components/BetaChip/BetaChip.tsx b/packages/ui/src/components/BetaChip/BetaChip.tsx new file mode 100644 index 00000000000..11a801f989e --- /dev/null +++ b/packages/ui/src/components/BetaChip/BetaChip.tsx @@ -0,0 +1,61 @@ +import { styled } from '@mui/material/styles'; +import * as React from 'react'; +import { Chip, ChipProps } from '../Chip'; + +export interface BetaChipProps + extends Omit< + ChipProps, + | 'avatar' + | 'clickable' + | 'deleteIcon' + | 'disabled' + | 'icon' + | 'label' + | 'onDelete' + | 'outlineColor' + | 'size' + | 'variant' + > { + /** + * The color of the chip. + * default renders a gray chip, primary renders a blue chip. + */ + color?: 'default' | 'primary'; +} + +/** + * ## Usage + * + * Beta chips label features that are not yet part of Cloud Manager's core supported functionality.
+ * **Example:** A beta chip may appear in the [primary navigation](https://github.com/linode/manager/pull/8104#issuecomment-1309334374), + * breadcrumbs, [banners](/docs/components-notifications-dismissible-banners--beta-banners), tabs, and/or plain text to designate beta functionality.
+ * **Visual style:** bold, capitalized text; reduced height, letter spacing, and font size; solid color background. + * + */ +export const BetaChip = (props: BetaChipProps) => { + const { color } = props; + + return ( + + ); +}; + +const StyledBetaChip = styled(Chip, { + label: 'StyledBetaChip', +})(({ theme }) => ({ + '& .MuiChip-label': { + padding: 0, + }, + fontFamily: theme.font.bold, + fontSize: '0.625rem', + height: 16, + letterSpacing: '.25px', + marginLeft: theme.spacing(0.5), + padding: theme.spacing(0.5), + textTransform: 'uppercase', +})); diff --git a/packages/ui/src/components/Chip.tsx b/packages/ui/src/components/Chip.tsx new file mode 100644 index 00000000000..8842a818c8e --- /dev/null +++ b/packages/ui/src/components/Chip.tsx @@ -0,0 +1,13 @@ +import { default as _Chip, ChipProps as _ChipProps } from '@mui/material/Chip'; +import * as React from 'react'; + +export interface ChipProps extends _ChipProps { + /** + * Optional component to render instead of a span. + */ + component?: React.ElementType; +} + +export const Chip = (props: ChipProps) => { + return <_Chip {...props} />; +}; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts new file mode 100644 index 00000000000..b379d274846 --- /dev/null +++ b/packages/ui/src/components/index.ts @@ -0,0 +1,2 @@ +export * from './Chip'; +export * from './BetaChip/BetaChip'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts new file mode 100644 index 00000000000..07635cbbc8e --- /dev/null +++ b/packages/ui/src/index.ts @@ -0,0 +1 @@ +export * from './components'; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json new file mode 100644 index 00000000000..a49e9a2556d --- /dev/null +++ b/packages/ui/tsconfig.json @@ -0,0 +1,47 @@ +{ + "compilerOptions": { + /* Language and Environment */ + "jsx": "react", + "lib": ["dom", "dom.iterable", "es2020"], + "target": "es5", + + /* Modules */ + "baseUrl": ".", + "moduleResolution": "node", + "paths": { + "src/*": ["src/*"] + }, + "resolveJsonModule": true, + "rootDir": ".", + + /* JavaScript Support */ + "allowJs": false, + + /* Emit */ + "sourceMap": true, + "noEmit": true, + + /* Interop Constraints */ + "allowSyntheticDefaultImports": true, + "forceConsistentCasingInFileNames": true, + + /* Type Checking */ + "allowUnreachableCode": false, + "module": "esnext", + "noImplicitAny": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noUnusedLocals": true, + "strictNullChecks": true, + "types": ["vitest/globals", "@testing-library/jest-dom"], + + /* Completeness */ + "skipLibCheck": true, + + /* Optimizations */ + "incremental": true + }, + "include": [ + "src", + ] +} diff --git a/scripts/changelog/utils/constants.mjs b/scripts/changelog/utils/constants.mjs index a2a017cf3b3..c82be817eef 100644 --- a/scripts/changelog/utils/constants.mjs +++ b/scripts/changelog/utils/constants.mjs @@ -6,7 +6,7 @@ const __dirname = path.dirname(__filename); export const BOT = 'linode-gh-bot'; -export const PACKAGES = ["api-v4", "manager", "validation"]; +export const PACKAGES = ["api-v4", "manager", "validation", "ui"]; export const CHANGESET_TYPES = [ "Added", "Fixed", diff --git a/scripts/package-versions/index.js b/scripts/package-versions/index.js index 6272dea5b90..f03f9654e79 100644 --- a/scripts/package-versions/index.js +++ b/scripts/package-versions/index.js @@ -9,6 +9,7 @@ * - `` (Optional) Desired Cloud Manager package version. * - `` (Optional) Desired APIv4 package version. * - `` (Optional) Desired Validation package version. + * - `` (Optional) Desired UI package version. * * Optional Flags: * - `-f | --force` Forces the script to update package versions without @@ -99,6 +100,7 @@ const [ desiredManagerVersion, desiredApiVersion, desiredValidationVersion, + desiredUiVersion ] = desiredVersions; // Describes packages that should be modified by this script. @@ -106,6 +108,7 @@ const jobs = [ { name: 'manager', path: getPackagePath('manager'), desiredVersion: desiredManagerVersion }, { name: 'api-v4', path: getPackagePath('api-v4'), desiredVersion: desiredApiVersion }, { name: 'validation', path: getPackagePath('validation'), desiredVersion: desiredValidationVersion }, + { name: 'ui', path: getPackagePath('ui'), desiredVersion: desiredUiVersion }, ]; // Describes the files that will be written to, and the changes that will be made. From ffdafafdcd4e01fce92072e2a6ce316cd6fcb729 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Tue, 8 Oct 2024 14:06:40 -0400 Subject: [PATCH 2/8] Feedback @bnussman-akamai --- .github/workflows/ci.yml | 72 ++++--------------- .../src/components/PrimaryNav/PrimaryNav.tsx | 2 +- packages/ui/package.json | 60 ++-------------- .../components/BetaChip/BetaChip.stories.tsx | 17 ----- .../src/components/BetaChip/BetaChip.test.tsx | 3 + .../ui/src/components/BetaChip/BetaChip.tsx | 2 +- packages/ui/src/components/BetaChip/index.ts | 1 + packages/ui/src/components/index.ts | 2 +- packages/ui/tsconfig.json | 46 ++---------- packages/ui/vitest.config.ts | 7 ++ yarn.lock | 44 +++++------- 11 files changed, 57 insertions(+), 199 deletions(-) delete mode 100644 packages/ui/src/components/BetaChip/BetaChip.stories.tsx create mode 100644 packages/ui/src/components/BetaChip/index.ts create mode 100644 packages/ui/vitest.config.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f465116df57..d7b3ae12dde 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -152,8 +152,9 @@ jobs: - run: cp scripts/validatePackages/sdk-commonjs.cjs test-sdk-cjs/ - run: cd test-sdk-cjs && node ./sdk-commonjs.cjs - test-ui: + test-manager: runs-on: ubuntu-latest + needs: build-sdk steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 @@ -164,31 +165,19 @@ jobs: path: | **/node_modules key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} - - run: yarn --frozen-lockfile - - run: yarn workspace @linode/ui run test - - build-ui: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 + - uses: actions/download-artifact@v4 with: - node-version: "20.17" - - uses: actions/cache@v4 + name: packages-validation-lib + path: packages/validation/lib + - uses: actions/download-artifact@v4 with: - path: | - **/node_modules - key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} + name: packages-api-v4-lib + path: packages/api-v4/lib - run: yarn --frozen-lockfile - - run: yarn workspace @linode/ui run build - - uses: actions/upload-artifact@v4 - with: - name: packages-ui-lib - path: packages/ui/lib + - run: yarn workspace linode-manager run test - test-manager: + test-search: runs-on: ubuntu-latest - needs: build-sdk steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 @@ -199,18 +188,10 @@ jobs: path: | **/node_modules key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} - - uses: actions/download-artifact@v4 - with: - name: packages-validation-lib - path: packages/validation/lib - - uses: actions/download-artifact@v4 - with: - name: packages-api-v4-lib - path: packages/api-v4/lib - run: yarn --frozen-lockfile - - run: yarn workspace linode-manager run test + - run: yarn workspace @linode/search run test - test-search: + test-ui: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -223,7 +204,7 @@ jobs: **/node_modules key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} - run: yarn --frozen-lockfile - - run: yarn workspace @linode/search run test + - run: yarn workspace @linode/ui run test typecheck-manager: runs-on: ubuntu-latest @@ -271,10 +252,6 @@ jobs: with: name: packages-api-v4-lib path: packages/api-v4/lib - - uses: actions/download-artifact@v4 - with: - name: packages-ui-lib - path: packages/ui/lib - run: yarn --frozen-lockfile - run: yarn workspace linode-manager run build - uses: actions/upload-artifact@v4 @@ -312,30 +289,7 @@ jobs: SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} SLACK_ICON_EMOJI: ":package:" MSG_MINIMAL: true - - publish-ui: - runs-on: ubuntu-latest - if: false - steps: - - uses: actions/checkout@v4 - - uses: JS-DevTools/npm-publish@v1 - id: npm-publish - with: - token: ${{ secrets.NPM_AUTH_TOKEN }} - package: ./packages/ui/package.json - - name: slack-notify - uses: rtCamp/action-slack-notify@master - if: steps.npm-publish.outputs.type != 'none' - env: - SLACK_CHANNEL: api-js-client - SLACK_TITLE: "Linode UI Library v${{ steps.npm-publish.outputs.version}}" - SLACK_MESSAGE: ":rocket: Linode UI Library has been published to NPM: ${{ steps.npm-publish.outputs.old-version }} => ${{ steps.npm-publish.outputs.version }}. View the changelog at https://github.com/linode/manager/blob/master/packages/api-v4/CHANGELOG.md" - SLACK_USERNAME: npm-bot - SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} - SLACK_ICON_EMOJI: ":package:" - MSG_MINIMAL: true - build-storybook: runs-on: ubuntu-latest needs: build-sdk diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx b/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx index 73c476bdb9d..3e2a30baaee 100644 --- a/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx +++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx @@ -1,3 +1,4 @@ +import { BetaChip } from '@linode/ui/src/components/BetaChip/BetaChip'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Link, useLocation } from 'react-router-dom'; @@ -22,7 +23,6 @@ import VPC from 'src/assets/icons/entityIcons/vpc.svg'; import TooltipIcon from 'src/assets/icons/get_help.svg'; import Longview from 'src/assets/icons/longview.svg'; import AkamaiLogo from 'src/assets/logo/akamai-logo.svg'; -import { BetaChip } from 'src/components/BetaChip/BetaChip'; import { Box } from 'src/components/Box'; import { Divider } from 'src/components/Divider'; import { useIsACLPEnabled } from 'src/features/CloudPulse/Utils/utils'; diff --git a/packages/ui/package.json b/packages/ui/package.json index 3f46cd4678b..6450713a166 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -3,27 +3,11 @@ "author": "Linode", "description": "Linode UI component library", "version": "0.0.1", - "private": true, "type": "module", - "main": "lib/index.cjs", - "module": "lib/index.js", - "exports": { - ".": { - "import": "./lib/index.js", - "require": "./lib/index.cjs" - }, - "./lib": { - "import": "./lib/index.js", - "require": "./lib/index.cjs" - }, - "./lib/*": { - "import": "./lib/index.js", - "require": "./lib/index.cjs" - } - }, - "types": "./lib/index.d.ts", - "browser": "./lib/index.global.js", - "unpkg": "./lib/index.global.js", + "main": "src/index.ts", + "module": "src/index.ts", + "types": "src/index.ts", + "exports": "./src/index.ts", "license": "Apache-2.0", "repository": { "type": "git", @@ -32,8 +16,6 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@linode/design-language-system": "^2.6.1", - "@mui/icons-material": "^5.14.7", "@mui/material": "^5.14.7", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -46,9 +28,6 @@ "precommit": "lint-staged", "test": "vitest run", "test:debug": "node --inspect-brk scripts/test.js --runInBand", - "storybook": "storybook dev -p 6006", - "storybook-static": "storybook build -c .storybook -o .out", - "build-storybook": "storybook build", "coverage": "vitest run --coverage && open coverage/index.html", "coverage:summary": "vitest run --coverage.enabled --reporter=junit --coverage.reporter=json-summary" }, @@ -60,46 +39,21 @@ }, "devDependencies": { "@linode/eslint-plugin-cloud-manager": "^0.0.5", - "@storybook/addon-a11y": "^8.3.0", - "@storybook/addon-actions": "^8.3.0", - "@storybook/addon-controls": "^8.3.0", - "@storybook/addon-docs": "^8.3.0", - "@storybook/addon-mdx-gfm": "^8.3.0", - "@storybook/addon-measure": "^8.3.0", - "@storybook/addon-storysource": "^8.3.0", - "@storybook/addon-viewport": "^8.3.0", - "@storybook/blocks": "^8.3.0", - "@storybook/manager-api": "^8.3.0", - "@storybook/preview-api": "^8.3.0", - "@storybook/react": "^8.3.0", - "@storybook/react-vite": "^8.3.0", - "@storybook/theming": "^8.3.0", - "@swc/core": "^1.3.1", "@testing-library/dom": "^10.1.0", + "@testing-library/jest-dom": "^6.5.0", "@testing-library/react": "~16.0.0", - "@testing-library/user-event": "^14.5.2", "@types/node": "^12.7.1", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.18", "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", - "@vitejs/plugin-react-swc": "^3.7.0", - "@vitest/coverage-v8": "^2.1.1", "@vitest/ui": "^2.1.1", "eslint": "^7.1.0", "eslint-config-prettier": "~8.1.0", - "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-perfectionist": "^1.4.0", "eslint-plugin-prettier": "~3.3.1", - "eslint-plugin-react": "^7.19.0", - "eslint-plugin-testing-library": "^3.1.2", - "eslint-plugin-xss": "^0.1.10", + "eslint-plugin-sonarjs": "^0.5.0", "lint-staged": "^15.2.9", "prettier": "~2.2.1", - "storybook": "^8.3.0", - "storybook-dark-mode": "4.0.1", - "tsx": "^4.19.1", - "vite": "^5.4.6", "vitest": "^2.1.1" } -} +} \ No newline at end of file diff --git a/packages/ui/src/components/BetaChip/BetaChip.stories.tsx b/packages/ui/src/components/BetaChip/BetaChip.stories.tsx deleted file mode 100644 index 3cc3a4ea934..00000000000 --- a/packages/ui/src/components/BetaChip/BetaChip.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { BetaChip } from './BetaChip'; - -import type { BetaChipProps } from './BetaChip'; -import type { Meta, StoryObj } from '@storybook/react'; - -export const Default: StoryObj = { - render: (args) => , -}; - -const meta: Meta = { - args: { color: 'default' }, - component: BetaChip, - title: 'Foundations/Chip/BetaChip', -}; -export default meta; diff --git a/packages/ui/src/components/BetaChip/BetaChip.test.tsx b/packages/ui/src/components/BetaChip/BetaChip.test.tsx index 8ec099137f7..66cdec7e4d6 100644 --- a/packages/ui/src/components/BetaChip/BetaChip.test.tsx +++ b/packages/ui/src/components/BetaChip/BetaChip.test.tsx @@ -3,6 +3,9 @@ import React from 'react'; import { BetaChip } from './BetaChip'; +import { expect, vi, describe, it } from 'vitest'; +import '@testing-library/jest-dom/vitest'; + describe('BetaChip', () => { it('renders with default color', () => { const { getByTestId } = render(); diff --git a/packages/ui/src/components/BetaChip/BetaChip.tsx b/packages/ui/src/components/BetaChip/BetaChip.tsx index 11a801f989e..3da9f6f3c06 100644 --- a/packages/ui/src/components/BetaChip/BetaChip.tsx +++ b/packages/ui/src/components/BetaChip/BetaChip.tsx @@ -51,8 +51,8 @@ const StyledBetaChip = styled(Chip, { '& .MuiChip-label': { padding: 0, }, - fontFamily: theme.font.bold, fontSize: '0.625rem', + fontFamily: '"LatoWebBold", sans-serif', // TODO: remove hardcoded font once theme is added to this package height: 16, letterSpacing: '.25px', marginLeft: theme.spacing(0.5), diff --git a/packages/ui/src/components/BetaChip/index.ts b/packages/ui/src/components/BetaChip/index.ts new file mode 100644 index 00000000000..3badebf5d28 --- /dev/null +++ b/packages/ui/src/components/BetaChip/index.ts @@ -0,0 +1 @@ +export * from './BetaChip'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index b379d274846..ea92b0846b8 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -1,2 +1,2 @@ export * from './Chip'; -export * from './BetaChip/BetaChip'; +export * from './BetaChip'; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index a49e9a2556d..a9b006a91d5 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -1,47 +1,15 @@ { "compilerOptions": { - /* Language and Environment */ "jsx": "react", - "lib": ["dom", "dom.iterable", "es2020"], - "target": "es5", - - /* Modules */ - "baseUrl": ".", - "moduleResolution": "node", - "paths": { - "src/*": ["src/*"] - }, - "resolveJsonModule": true, - "rootDir": ".", - - /* JavaScript Support */ - "allowJs": false, - - /* Emit */ - "sourceMap": true, + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "Bundler", + "skipLibCheck": true, "noEmit": true, - - /* Interop Constraints */ - "allowSyntheticDefaultImports": true, - "forceConsistentCasingInFileNames": true, - - /* Type Checking */ - "allowUnreachableCode": false, - "module": "esnext", - "noImplicitAny": true, - "noImplicitReturns": true, - "noImplicitThis": true, + "strict": true, "noUnusedLocals": true, - "strictNullChecks": true, - "types": ["vitest/globals", "@testing-library/jest-dom"], - - /* Completeness */ - "skipLibCheck": true, - - /* Optimizations */ + "forceConsistentCasingInFileNames": true, "incremental": true }, - "include": [ - "src", - ] + "include": ["src"], } diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts new file mode 100644 index 00000000000..647a9e54c8c --- /dev/null +++ b/packages/ui/vitest.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + test: { + environment: 'jsdom', + }, +}); diff --git a/yarn.lock b/yarn.lock index 1fa26ee4676..11c12b69d51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1991,6 +1991,19 @@ lz-string "^1.5.0" pretty-format "^27.0.2" +"@testing-library/jest-dom@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz#50484da3f80fb222a853479f618a9ce5c47bfe54" + integrity sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA== + dependencies: + "@adobe/css-tools" "^4.4.0" + aria-query "^5.0.0" + chalk "^3.0.0" + css.escape "^1.5.1" + dom-accessibility-api "^0.6.3" + lodash "^4.17.21" + redent "^3.0.0" + "@testing-library/jest-dom@~6.4.2": version "6.4.8" resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz#9c435742b20c6183d4e7034f2b329d562c079daa" @@ -9272,7 +9285,7 @@ string-argv@~0.3.2: resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6" integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q== -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -9290,15 +9303,6 @@ string-width@^3.0.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^5.1.0" -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -9379,7 +9383,7 @@ string.prototype.trimstart@^1.0.8: define-properties "^1.2.1" es-object-atoms "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -9393,13 +9397,6 @@ strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -10350,7 +10347,7 @@ word-wrap@^1.2.5, word-wrap@~1.2.3: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -10368,15 +10365,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From df0f1cd7d3671eb79f74cc5fb5ae6d379c03a64a Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Tue, 8 Oct 2024 14:43:26 -0400 Subject: [PATCH 3/8] Move existing usages of to new package --- package.json | 9 ++++----- .../manager/src/components/PrimaryNav/PrimaryNav.tsx | 2 +- .../features/Databases/DatabaseCreate/DatabaseCreate.tsx | 2 +- .../features/Databases/DatabaseLanding/DatabaseLogo.tsx | 2 +- packages/ui/package.json | 8 +++++--- packages/ui/src/components/BetaChip/BetaChip.test.tsx | 2 +- packages/ui/testSetup.ts | 6 ++++++ packages/ui/vitest.config.ts | 1 + 8 files changed, 20 insertions(+), 12 deletions(-) create mode 100644 packages/ui/testSetup.ts diff --git a/package.json b/package.json index 83749286c6c..e84e1d54952 100644 --- a/package.json +++ b/package.json @@ -13,14 +13,13 @@ "upgrade:sdk": "yarn workspace @linode/api-v4 version --no-git-tag-version --no-commit-hooks && yarn workspace linode-manager upgrade @linode/api-v4", "build:sdk": "yarn workspace @linode/api-v4 build", "build:validation": "yarn workspace @linode/validation build", - "build:ui": "yarn workspace @linode/ui build", - "build": "yarn build:validation && yarn build:sdk && yarn build:ui && yarn workspace linode-manager build", + "build": "yarn build:validation && yarn build:sdk && yarn workspace linode-manager build", "build:analyze": "yarn workspace linode-manager build:analyze", - "up": "yarn install:all && yarn build:validation && yarn build:sdk && yarn build:ui && yarn start:all", + "up": "yarn install:all && yarn build:validation && yarn build:sdk && yarn start:all", "up:expose": "yarn install:all && yarn build:validation && yarn build:sdk && yarn start:all:expose", "dev": "yarn install:all && yarn start:all", - "start:all": "concurrently -n api-v4,validation,manager -c blue,yellow,green \"yarn workspace @linode/api-v4 start\" \"yarn workspace @linode/validation start\" \"yarn workspace linode-manager start\"", - "start:all:expose": "concurrently -n api-v4,validation,manager -c blue,yellow,green \"yarn workspace @linode/api-v4 start\" \"yarn workspace @linode/validation start\" \"yarn workspace linode-manager start:expose\"", + "start:all": "concurrently -n api-v4,validation,ui,manager -c blue,yellow,magenta,green \"yarn workspace @linode/api-v4 start\" \"yarn workspace @linode/validation start\" \"yarn workspace @linode/ui start\" \"yarn workspace linode-manager start\"", + "start:all:expose": "concurrently -n api-v4,validation,ui,manager -c blue,yellow,magenta,green \"yarn workspace @linode/api-v4 start\" \"yarn workspace @linode/validation start\" \"yarn workspace @linode/ui start\" \"yarn workspace linode-manager start:expose\"", "start:manager": "yarn workspace linode-manager start", "start:manager:ci": "yarn workspace linode-manager start:ci", "clean": "rm -rf node_modules && rm -rf packages/@linode/api-v4/node_modules && rm -rf packages/manager/node_modules && rm -rf packages/@linode/validation/node_modules", diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx b/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx index 3e2a30baaee..b6f614a24d4 100644 --- a/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx +++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx @@ -1,4 +1,4 @@ -import { BetaChip } from '@linode/ui/src/components/BetaChip/BetaChip'; +import { BetaChip } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Link, useLocation } from 'react-router-dom'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 3fbae61e3b9..ab8868f93f8 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -1,3 +1,4 @@ +import { BetaChip } from '@linode/ui'; import { createDatabaseSchema } from '@linode/validation/lib/databases.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -10,7 +11,6 @@ import { makeStyles } from 'tss-react/mui'; import MongoDBIcon from 'src/assets/icons/mongodb.svg'; import MySQLIcon from 'src/assets/icons/mysql.svg'; import PostgreSQLIcon from 'src/assets/icons/postgresql.svg'; -import { BetaChip } from 'src/components/BetaChip/BetaChip'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx index 71c7dd23b1e..78d6e2a9abd 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx @@ -1,9 +1,9 @@ +import { BetaChip } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import LogoWhite from 'src/assets/icons/db-logo-white.svg'; import Logo from 'src/assets/icons/db-logo.svg'; -import { BetaChip } from 'src/components/BetaChip/BetaChip'; import { Box } from 'src/components/Box'; import { Typography } from 'src/components/Typography'; diff --git a/packages/ui/package.json b/packages/ui/package.json index 6450713a166..dd5124d9e15 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -7,7 +7,9 @@ "main": "src/index.ts", "module": "src/index.ts", "types": "src/index.ts", - "exports": "./src/index.ts", + "exports": { + ".": "./src/index.ts" + }, "license": "Apache-2.0", "repository": { "type": "git", @@ -21,12 +23,12 @@ "react-dom": "^18.2.0" }, "scripts": { - "start": "concurrently --raw \"tsc -w --preserveWatchOutput\" \"tsup --watch\"", - "build": "concurrently --raw \"tsc\" \"tsup\"", + "start": "tsc -w --preserveWatchOutput", "lint": "eslint . --quiet --ext .js,.ts,.tsx", "typecheck": "tsc --noEmit true --emitDeclarationOnly false", "precommit": "lint-staged", "test": "vitest run", + "test:watch": "vitest", "test:debug": "node --inspect-brk scripts/test.js --runInBand", "coverage": "vitest run --coverage && open coverage/index.html", "coverage:summary": "vitest run --coverage.enabled --reporter=junit --coverage.reporter=json-summary" diff --git a/packages/ui/src/components/BetaChip/BetaChip.test.tsx b/packages/ui/src/components/BetaChip/BetaChip.test.tsx index 66cdec7e4d6..c4da709edd5 100644 --- a/packages/ui/src/components/BetaChip/BetaChip.test.tsx +++ b/packages/ui/src/components/BetaChip/BetaChip.test.tsx @@ -18,7 +18,7 @@ describe('BetaChip', () => { const { getByTestId } = render(); const betaChip = getByTestId('betaChip'); expect(betaChip).toBeInTheDocument(); - expect(betaChip).toHaveStyle('background-color: rgb(16, 138, 214)'); + expect(betaChip).toHaveStyle('background-color: rgb(25, 118, 210)'); }); it('triggers an onClick callback', () => { diff --git a/packages/ui/testSetup.ts b/packages/ui/testSetup.ts new file mode 100644 index 00000000000..e42051f8ee3 --- /dev/null +++ b/packages/ui/testSetup.ts @@ -0,0 +1,6 @@ +import { cleanup } from '@testing-library/react'; +import { afterEach } from 'vitest'; + +afterEach(() => { + cleanup(); +}); diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts index 647a9e54c8c..95754d431b5 100644 --- a/packages/ui/vitest.config.ts +++ b/packages/ui/vitest.config.ts @@ -3,5 +3,6 @@ import { defineConfig } from 'vitest/config'; export default defineConfig({ test: { environment: 'jsdom', + setupFiles: './testSetup.ts', }, }); From ea34d2726f21ae2826c72612a38e5379130d9765 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Tue, 8 Oct 2024 14:55:59 -0400 Subject: [PATCH 4/8] Tweaks --- .github/workflows/ci.yml | 2 +- .github/workflows/coverage.yml | 3 --- .github/workflows/coverage_badge.yml | 3 --- packages/ui/package.json | 2 +- yarn.lock | 13 ------------- 5 files changed, 2 insertions(+), 21 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d7b3ae12dde..d03cbe59b0d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -289,7 +289,7 @@ jobs: SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} SLACK_ICON_EMOJI: ":package:" MSG_MINIMAL: true - + build-storybook: runs-on: ubuntu-latest needs: build-sdk diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml index 700a1c0efcb..146bea26c61 100644 --- a/.github/workflows/coverage.yml +++ b/.github/workflows/coverage.yml @@ -31,9 +31,6 @@ jobs: - name: Build @linode/api-v4 run: yarn build:sdk - - name: Build @linode/ui - run: yarn build:ui - - name: Run Base Branch Coverage run: yarn coverage:summary diff --git a/.github/workflows/coverage_badge.yml b/.github/workflows/coverage_badge.yml index 61563f8908e..ca07bfd7f27 100644 --- a/.github/workflows/coverage_badge.yml +++ b/.github/workflows/coverage_badge.yml @@ -33,9 +33,6 @@ jobs: - name: Build @linode/api-v4 run: yarn build:sdk - - name: Build @linode/ui - run: yarn build:ui - - name: Run Base Branch Coverage run: yarn coverage:summary diff --git a/packages/ui/package.json b/packages/ui/package.json index dd5124d9e15..ea98b224ce3 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -42,7 +42,7 @@ "devDependencies": { "@linode/eslint-plugin-cloud-manager": "^0.0.5", "@testing-library/dom": "^10.1.0", - "@testing-library/jest-dom": "^6.5.0", + "@testing-library/jest-dom": "~6.4.2", "@testing-library/react": "~16.0.0", "@types/node": "^12.7.1", "@types/react": "^18.2.55", diff --git a/yarn.lock b/yarn.lock index 11c12b69d51..fae2749ae80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1991,19 +1991,6 @@ lz-string "^1.5.0" pretty-format "^27.0.2" -"@testing-library/jest-dom@^6.5.0": - version "6.5.0" - resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz#50484da3f80fb222a853479f618a9ce5c47bfe54" - integrity sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA== - dependencies: - "@adobe/css-tools" "^4.4.0" - aria-query "^5.0.0" - chalk "^3.0.0" - css.escape "^1.5.1" - dom-accessibility-api "^0.6.3" - lodash "^4.17.21" - redent "^3.0.0" - "@testing-library/jest-dom@~6.4.2": version "6.4.8" resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz#9c435742b20c6183d4e7034f2b329d562c079daa" From 07e44509a8a5885d601be7e80cf2bd8f75e4277f Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Wed, 9 Oct 2024 13:44:20 -0400 Subject: [PATCH 5/8] Fix unnecessary prop on component --- packages/ui/src/components/BetaChip/BetaChip.tsx | 3 ++- packages/ui/src/components/Chip.tsx | 9 ++------- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/BetaChip/BetaChip.tsx b/packages/ui/src/components/BetaChip/BetaChip.tsx index 3da9f6f3c06..981003043fa 100644 --- a/packages/ui/src/components/BetaChip/BetaChip.tsx +++ b/packages/ui/src/components/BetaChip/BetaChip.tsx @@ -1,6 +1,7 @@ import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { Chip, ChipProps } from '../Chip'; +import { Chip } from '../Chip'; +import type { ChipProps } from '@mui/material'; export interface BetaChipProps extends Omit< diff --git a/packages/ui/src/components/Chip.tsx b/packages/ui/src/components/Chip.tsx index 8842a818c8e..882b98a26f7 100644 --- a/packages/ui/src/components/Chip.tsx +++ b/packages/ui/src/components/Chip.tsx @@ -1,12 +1,7 @@ -import { default as _Chip, ChipProps as _ChipProps } from '@mui/material/Chip'; +import { default as _Chip } from '@mui/material/Chip'; import * as React from 'react'; -export interface ChipProps extends _ChipProps { - /** - * Optional component to render instead of a span. - */ - component?: React.ElementType; -} +import type { ChipProps } from '@mui/material/Chip'; export const Chip = (props: ChipProps) => { return <_Chip {...props} />; From 7385010cafa60a98d1198d1c145f72114d173336 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Wed, 9 Oct 2024 13:49:41 -0400 Subject: [PATCH 6/8] Add CHANGELOG.md for UI package --- packages/ui/CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/ui/CHANGELOG.md diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md new file mode 100644 index 00000000000..05d6f8b91b1 --- /dev/null +++ b/packages/ui/CHANGELOG.md @@ -0,0 +1,5 @@ +# Change Log + +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). From f8051478d21951fba7ff967c02ca8f9800d197e2 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Wed, 9 Oct 2024 13:54:08 -0400 Subject: [PATCH 7/8] Added changeset: new `@linode/ui` package with `BetaChip` as the first component --- packages/ui/.changeset/pr-11057-added-1728496448213.md | 5 +++++ packages/ui/CHANGELOG.md | 5 ----- 2 files changed, 5 insertions(+), 5 deletions(-) create mode 100644 packages/ui/.changeset/pr-11057-added-1728496448213.md diff --git a/packages/ui/.changeset/pr-11057-added-1728496448213.md b/packages/ui/.changeset/pr-11057-added-1728496448213.md new file mode 100644 index 00000000000..a3d689c48ab --- /dev/null +++ b/packages/ui/.changeset/pr-11057-added-1728496448213.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +new `@linode/ui` package with `BetaChip` as the first component ([#11057](https://github.com/linode/manager/pull/11057)) diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 05d6f8b91b1..e69de29bb2d 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. - -The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). From 45078a5e6ba87f7fb90214dfd4b15e166e74b945 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Wed, 9 Oct 2024 14:09:48 -0400 Subject: [PATCH 8/8] Add UI typechecking step to ci.yml --- .github/workflows/ci.yml | 16 ++++++++++++++++ packages/ui/package.json | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d03cbe59b0d..e2d1bd208bd 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -206,6 +206,22 @@ jobs: - run: yarn --frozen-lockfile - run: yarn workspace @linode/ui run test + typecheck-ui: + runs-on: ubuntu-latest + needs: build-sdk + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: "20.17" + - uses: actions/cache@v4 + with: + path: | + **/node_modules + key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} + - run: yarn --frozen-lockfile + - run: yarn workspace @linode/ui run typecheck + typecheck-manager: runs-on: ubuntu-latest needs: build-sdk diff --git a/packages/ui/package.json b/packages/ui/package.json index ea98b224ce3..ee91f171d29 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -25,7 +25,7 @@ "scripts": { "start": "tsc -w --preserveWatchOutput", "lint": "eslint . --quiet --ext .js,.ts,.tsx", - "typecheck": "tsc --noEmit true --emitDeclarationOnly false", + "typecheck": "tsc", "precommit": "lint-staged", "test": "vitest run", "test:watch": "vitest",