Skip to content

Commit

Permalink
Merge pull request #426 from AppQuality/develop
Browse files Browse the repository at this point in the history
Update to vite and zendesk 8.76
  • Loading branch information
d-beezee authored Oct 18, 2024
2 parents b29f59f + fa461cd commit 14aa56d
Show file tree
Hide file tree
Showing 128 changed files with 4,722 additions and 9,967 deletions.
17 changes: 11 additions & 6 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app",
"@storybook/addon-a11y"
"@storybook/addon-a11y",
],
framework: {
name: "@storybook/react-webpack5",
name: "@storybook/react-vite",
options: {},
},
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgen: "react-docgen-typescript",
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true, // makes union prop types like variant and size appear as select controls
shouldRemoveUndefinedFromOptional: true, // makes string and boolean types that can be undefined appear as inputs and switches
Expand All @@ -27,6 +26,12 @@ const config = {
},
core: {
disableTelemetry: true,
builder: {
name: "@storybook/builder-vite",
options: {
viteConfigPath: "./vite.config.storybook.mts",
},
},
},
};
export default config;
8 changes: 4 additions & 4 deletions .storybook/manager.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {addons} from '@storybook/addons';
import unguessTheme from './unguessTheme';
import { addons } from "@storybook/manager-api";
import unguessTheme from "./unguessTheme";

addons.setConfig({
theme: unguessTheme,
});
theme: unguessTheme,
});
1 change: 1 addition & 0 deletions .storybook/preview.js → .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ThemeProvider } from "@zendeskgarden/react-theming";
import React from "react";
import { GlobalStyle } from "../src/stories/shared/globalStyle";
import { theme } from "../src/stories/theme";

Expand Down
18 changes: 18 additions & 0 deletions .vite/commands/setEnv.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { readFileSync } from "fs";
import { loadEnv } from "vite";

export function setEnv(mode: string) {
Object.assign(
process.env,
loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"])
);
process.env.NODE_ENV ||= mode;
const { homepage } = JSON.parse(readFileSync("package.json", "utf-8"));
process.env.PUBLIC_URL ||= homepage
? `${
homepage.startsWith("http") || homepage.startsWith("/")
? homepage
: `/${homepage}`
}`.replace(/\/$/, "")
: "";
}
40 changes: 40 additions & 0 deletions .vite/plugins/svgr.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { readFileSync } from "node:fs";

import { Plugin, createFilter, transformWithEsbuild } from "vite";

// In Create React App, SVGs can be imported directly as React components. This is achieved by svgr libraries.
// https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
export function svgrPlugin(): Plugin {
const filter = createFilter("**/*.svg");
const postfixRE = /[?#].*$/s;

return {
name: "svgr-plugin",
async transform(code, id) {
if (filter(id)) {
const { transform } = await import("@svgr/core");
const { default: jsx } = await import("@svgr/plugin-jsx");

const filePath = id.replace(postfixRE, "");
const svgCode = readFileSync(filePath, "utf8");

const componentCode = await transform(svgCode, undefined, {
filePath,
caller: {
previousExport: code,
defaultPlugins: [jsx],
},
});

const res = await transformWithEsbuild(componentCode, id, {
loader: "jsx",
});

return {
code: res.code,
map: null,
};
}
},
};
}
143 changes: 79 additions & 64 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@
"main": "build/index.js",
"types": "build/index.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"build": "yarn run clean && rollup -c",
"clean": "rimraf build",
"build": "vite build",
"build:watch": "vite build --mode development --watch",
"release": "npx auto shipit --base-branch=master",
"type:check": "tsc"
"type:check": "tsc",
"dev": "vite",
"start": "vite",
"lint": "eslint --ext .tsx,.ts .",
"analyze": "npx vite-bundle-visualizer"
},
"repository": {
"type": "git",
Expand All @@ -26,15 +29,15 @@
"homepage": "https://github.com/AppQuality/unguess-design-system#readme",
"dependencies": {
"@appquality/stream-player": "1.0.6",
"@nivo/bar": "^0.80.0",
"@nivo/bullet": "^0.80.0",
"@nivo/core": "^0.80.0",
"@nivo/line": "^0.80.0",
"@nivo/pie": "^0.80.0",
"@nivo/stream": "^0.80.0",
"@nivo/sunburst": "^0.80.0",
"@nivo/tooltip": "^0.80.0",
"@nivo/waffle": "^0.80.0",
"@nivo/bar": "^0.87.0",
"@nivo/bullet": "^0.87.0",
"@nivo/core": "^0.87.0",
"@nivo/line": "^0.87.0",
"@nivo/pie": "^0.87.0",
"@nivo/stream": "^0.87.0",
"@nivo/sunburst": "^0.87.0",
"@nivo/tooltip": "^0.87.0",
"@nivo/waffle": "^0.87.0",
"@sereneinserenade/tiptap-search-and-replace": "^0.1.1",
"@tiptap/extension-bubble-menu": "2.4.0",
"@tiptap/extension-character-count": "2.2.4",
Expand All @@ -51,25 +54,29 @@
"@tiptap/react": "2.2.4",
"@tiptap/starter-kit": "2.2.4",
"@tiptap/suggestion": "2.2.4",
"@types/react-slick": "^0.23.10",
"@zendeskgarden/container-utilities": "^2.0.0",
"@zendeskgarden/css-bedrock": "^9.0.0",
"@zendeskgarden/react-accordions": "^8.49.0",
"@zendeskgarden/react-avatars": "^8.49.0",
"@zendeskgarden/react-breadcrumbs": "^8.49.0",
"@zendeskgarden/react-buttons": "^8.48.2",
"@zendeskgarden/react-chrome": "^8.49.0",
"@zendeskgarden/react-colorpickers": "^8.73.2",
"@zendeskgarden/react-grid": "^8.49.0",
"@zendeskgarden/react-loaders": "^8.49.0",
"@zendeskgarden/react-modals": "^8.49.0",
"@zendeskgarden/react-notifications": "^8.49.0",
"@zendeskgarden/react-pagination": "^8.49.0",
"@zendeskgarden/react-tables": "8.62.0",
"@zendeskgarden/react-tabs": "^8.49.0",
"@zendeskgarden/react-tags": "^8.49.0",
"@zendeskgarden/react-tooltips": "^8.49.0",
"@zendeskgarden/react-typography": "^8.49.0",
"@zendeskgarden/react-accordions": "8.76.8",
"@zendeskgarden/react-avatars": "8.76.8",
"@zendeskgarden/react-breadcrumbs": "8.76.8",
"@zendeskgarden/react-buttons": "8.76.8",
"@zendeskgarden/react-chrome": "8.76.8",
"@zendeskgarden/react-colorpickers": "8.76.8",
"@zendeskgarden/react-datepickers": "8.76.8",
"@zendeskgarden/react-dropdowns": "8.76.8",
"@zendeskgarden/react-dropdowns.next": "^8.76.8",
"@zendeskgarden/react-forms": "8.76.8",
"@zendeskgarden/react-grid": "8.76.8",
"@zendeskgarden/react-loaders": "8.76.8",
"@zendeskgarden/react-modals": "8.76.8",
"@zendeskgarden/react-notifications": "8.76.8",
"@zendeskgarden/react-pagination": "8.76.8",
"@zendeskgarden/react-tables": "8.76.8",
"@zendeskgarden/react-tabs": "8.76.8",
"@zendeskgarden/react-theming": "8.76.8",
"@zendeskgarden/react-tags": "8.76.8",
"@zendeskgarden/react-tooltips": "8.76.8",
"@zendeskgarden/react-typography": "8.76.8",
"react-slick": "^0.29.0",
"react-window": "^1.8.6",
"tippy.js": "^6.3.7",
Expand All @@ -81,57 +88,70 @@
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.5",
"@rollup/plugin-image": "^3.0.2",
"@storybook/addon-a11y": "^7.6.10",
"@storybook/addon-essentials": "^7.0.9",
"@storybook/addon-interactions": "^7.0.9",
"@storybook/addon-links": "^7.0.9",
"@storybook/blocks": "^7.0.9",
"@storybook/preset-create-react-app": "^7.0.9",
"@storybook/react": "^7.0.9",
"@storybook/react-webpack5": "^7.0.9",
"@storybook/testing-library": "^0.0.14-next.2",
"@storybook/addon-a11y": "^8.3.5",
"@storybook/addon-essentials": "^8.3.5",
"@storybook/addon-interactions": "^8.3.5",
"@storybook/addon-links": "^8.3.5",
"@storybook/blocks": "^8.3.5",
"@storybook/builder-vite": "^8.3.5",
"@storybook/preset-create-react-app": "^8.3.5",
"@storybook/react": "^8.3.5",
"@storybook/react-vite": "^8.3.5",
"@storybook/react-webpack5": "^8.3.5",
"@svgr/core": "^8.1.0",
"@svgr/plugin-jsx": "^8.1.0",
"@svgr/rollup": "^8.0.1",
"@types/jest": "^27.4.1",
"@types/node": "^16.11.26",
"@types/node": "^20.14.2",
"@types/react": "^17.0.0 || ^18.0.0",
"@types/react-dom": "^17.0.0 || ^18.0.0",
"@types/react-slick": "^0.23.10",
"@types/react-window": "^1.8.5",
"@types/ua-parser-js": "^0.7.36",
"@types/uuid": "^9.0.8",
"@zendeskgarden/react-dropdowns": "^8.49.0",
"@zendeskgarden/react-forms": "8.49.0",
"@zendeskgarden/react-theming": "^8.48.2",
"@zendeskgarden/svg-icons": "^6.31.1",
"@typescript-eslint/parser": "^8.8.1",
"@vitejs/plugin-react": "^4.3.1",
"@zendeskgarden/svg-icons": "7.3.0",
"auto": "^11.1.1",
"eslint": "^7.32.0",
"eslint-plugin-react": "^7.37.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.12",
"formik": "^2.2.9",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"rimraf": "3.0.2",
"rollup": "~2.66",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.34.1",
"storybook": "^7.0.9",
"storybook": "^8.3.5",
"styled-components": "6.1.1",
"typescript": "^4.5.0",
"vite": "^5.2.13",
"vite-plugin-chunk-split": "^0.5.0",
"vite-plugin-dts": "^4.2.3",
"vite-plugin-lib-inject-css": "^2.1.1",
"vite-tsconfig-paths": "^4.3.2",
"web-vitals": "^2.1.4"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
"plugins": [
"react",
"react-hooks",
"react-refresh"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
"rules": {
"react-refresh/only-export-components": "warn"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
}
},
"browserslist": {
"production": [
Expand All @@ -146,11 +166,6 @@
]
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
"@types/react-dom": "^17.0.0 || ^18.0.0",
"@zendeskgarden/react-dropdowns": "^8.49.0",
"@zendeskgarden/react-forms": "8.49.0",
"@zendeskgarden/react-theming": "^8.48.2",
"formik": "^2.2.9",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0",
Expand Down
24 changes: 0 additions & 24 deletions rollup.config.js

This file was deleted.

2 changes: 2 additions & 0 deletions src/assets/icons/dots-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 11 additions & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,18 @@ export * from "./stories/color-swatch";
export * from "./stories/drawers";

// --- Dropdowns ---
export * from "./stories/buttonMenu";
export * from "./stories/dotsMenu";
export * from "./stories/dropdowns/autocomplete";
export * from "./stories/dropdowns/countermultiselect";
export * as DropdownField from "./stories/dropdowns/field";
export * from "./stories/dropdowns/field";
export * from "./stories/dropdowns/fieldNew";
export * from "./stories/dropdowns/item";
export * from "./stories/dropdowns/item-content";
export * from "./stories/dropdowns/menu";
export * from "./stories/dropdowns/menuheader";
export * from "./stories/dropdowns/optGroup";
export * from "./stories/dropdowns/option";
export * from "./stories/dropdowns/select";

// --- Editor ---
Expand All @@ -73,7 +78,7 @@ export * from "./stories/editor";
// --- Forms ---
export * from "./stories/forms/checkbox";
export * from "./stories/forms/checkbox/cards";
export * as FormField from "./stories/forms/field";
export * from "./stories/forms/field";
export * from "./stories/forms/input";
export * from "./stories/forms/input-toggle";
export * from "./stories/forms/mediaInput";
Expand Down Expand Up @@ -199,6 +204,10 @@ export * from "./stories/typography/paragraph";
export * from "./stories/typography/span";
export * from "./stories/typography/typescale";

export * from "./stories/datepicker";
export * from "./stories/tableNew";
export * from "./stories/transcript";

export { Message } from "@zendeskgarden/react-forms";

export { GlobalStyle };
Loading

0 comments on commit 14aa56d

Please sign in to comment.