Skip to content

Commit

Permalink
Merge pull request #68 from appsignal/upgradeDesignSystem
Browse files Browse the repository at this point in the history
Update the design system
  • Loading branch information
jvanbaarsen authored Jun 7, 2023
2 parents 09de3f6 + be9dcdf commit f541dca
Show file tree
Hide file tree
Showing 10 changed files with 681 additions and 340 deletions.
9 changes: 6 additions & 3 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ jobs:
- name: Install dependencies
run: |
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}"
npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_TOKEN }}"
rm .npmrc
yarn install
- name: Run ESLint
run: yarn lint
Expand All @@ -43,7 +44,8 @@ jobs:
- name: Install dependencies
run: |
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}"
npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_TOKEN }}"
rm .npmrc
yarn install
- name: Run Format check
run: yarn format:check
Expand All @@ -66,7 +68,8 @@ jobs:
- name: Install dependencies
run: |
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}"
npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_TOKEN }}"
rm .npmrc
yarn install
- name: Run jest
run: yarn test
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ yarn-error.log*
.env.development.local
.env.test.local
.env.production.local
.env

# vercel
.vercel
Expand Down
2 changes: 2 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_TOKEN}
5 changes: 5 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
const path = require("path");
module.exports = {
reactStrictMode: true,
webpack: (config) => {
config.resolve.alias["react"] = path.resolve("./node_modules/react");
return config;
},
};
11 changes: 8 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,25 @@
"format:check": "prettier --check './**/*.{js,jsx,ts,tsx,css,md,mdx,json}'"
},
"dependencies": {
"@appsignal/design-system": "^9.1.0",
"@appsignal-tools/design-system": "^16.0.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
"@tailwindcss/typography": "^0.5.9",
"@tippyjs/react": "^4.2.5",
"autoprefixer": "^10.4.14",
"dayjs": "^1.10.6",
"mockdate": "^3.0.5",
"msw": "^0.35.0",
"next": "11.1.1",
"postcss": "^8.4.24",
"postcss-import": "^15.1.0",
"postcss-url": "^10.1.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-test-renderer": "^17.0.2",
"whatwg-fetch": "^3.6.2",
"mockdate": "^3.0.5"
"tailwindcss": "^3.3.2",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^4.0.3",
Expand Down
2 changes: 1 addition & 1 deletion pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import PropTypes from "prop-types";
import "@appsignal/design-system";
import "./main.css";

if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
require("../mocks");
Expand Down
4 changes: 4 additions & 0 deletions pages/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "@appsignal-tools/design-system";
50 changes: 6 additions & 44 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,8 @@
const enablePurgeCSS =
process.env.NEXT_PURGE_CSS === "enabled" ||
process.env.NODE_ENV === "production";

module.exports = {
plugins: [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
features: {
"custom-properties": false,
},
},
],

[
"@fullhuman/postcss-purgecss",
enablePurgeCSS
? {
content: [
"./components/**/*.{js,ts,jsx,tsx}",
"./data/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./lib/**/*.{js,ts,jsx,tsx}",
],
safelist: [/fa(.*)/, /svg(.*)/, "hidden", "body", "html", /tippy/],
deep: [/tippy/],
defaultExtractor: (content) => {
// Capture as liberally as possible, including things like `h-(screen-1.5)`
const broadMatches =
content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
// Capture classes within other delimiters like .block(class="w-1/2") in Pug
const innerMatches =
content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
return broadMatches.concat(innerMatches);
},
}
: false,
],
],
plugins: {
"postcss-url": {},
"postcss-import": {},
tailwindcss: {},
autoprefixer: {},
},
};
9 changes: 9 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.{js, jsx}"],
theme: {
extend: {},
},
presets: [require("@appsignal-tools/design-system/tailwind.config")],
plugins: [require("@tailwindcss/typography")],
};
Loading

0 comments on commit f541dca

Please sign in to comment.