From 290f5c68addc3ae8b2e5041a0d7fd2ea8ba55072 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Wed, 23 Feb 2022 18:57:44 +0100 Subject: [PATCH] Extract tailwindcss config to libs --- apps/trading/pages/_app.tsx | 3 +- apps/trading/pages/index.module.scss | 2 - apps/trading/pages/index.tsx | 435 +++++++++++++++++- apps/trading/postcss.config.js | 1 - apps/trading/tailwind.config.js | 11 +- libs/tailwindcss-config/.eslintrc.json | 18 + libs/tailwindcss-config/README.md | 11 + libs/tailwindcss-config/jest.config.js | 14 + libs/tailwindcss-config/package.json | 5 + libs/tailwindcss-config/project.json | 33 ++ libs/tailwindcss-config/src/index.js | 4 + libs/tailwindcss-config/src/theme.js | 151 ++++++ libs/tailwindcss-config/tsconfig.json | 23 + libs/tailwindcss-config/tsconfig.lib.json | 10 + libs/tailwindcss-config/tsconfig.spec.json | 9 + libs/ui-toolkit/project.json | 4 +- .../components/callout/callout.stories.tsx | 2 + libs/ui-toolkit/tailwind.config.js | 132 +----- tsconfig.base.json | 3 + workspace.json | 1 + 20 files changed, 706 insertions(+), 166 deletions(-) delete mode 100644 apps/trading/pages/index.module.scss create mode 100644 libs/tailwindcss-config/.eslintrc.json create mode 100644 libs/tailwindcss-config/README.md create mode 100644 libs/tailwindcss-config/jest.config.js create mode 100644 libs/tailwindcss-config/package.json create mode 100644 libs/tailwindcss-config/project.json create mode 100644 libs/tailwindcss-config/src/index.js create mode 100644 libs/tailwindcss-config/src/theme.js create mode 100644 libs/tailwindcss-config/tsconfig.json create mode 100644 libs/tailwindcss-config/tsconfig.lib.json create mode 100644 libs/tailwindcss-config/tsconfig.spec.json diff --git a/apps/trading/pages/_app.tsx b/apps/trading/pages/_app.tsx index e73955f07..b9063c3d9 100644 --- a/apps/trading/pages/_app.tsx +++ b/apps/trading/pages/_app.tsx @@ -1,8 +1,7 @@ import { AppProps } from 'next/app'; import Head from 'next/head'; -//import './styles.css'; -import 'tailwindcss/tailwind.css'; import { Navbar } from '../components/navbar'; +import './styles.css'; function VegaTradingApp({ Component, pageProps }: AppProps) { return ( diff --git a/apps/trading/pages/index.module.scss b/apps/trading/pages/index.module.scss deleted file mode 100644 index 8a13e21cb..000000000 --- a/apps/trading/pages/index.module.scss +++ /dev/null @@ -1,2 +0,0 @@ -.page { -} diff --git a/apps/trading/pages/index.tsx b/apps/trading/pages/index.tsx index a1db657c2..0172ebb7e 100644 --- a/apps/trading/pages/index.tsx +++ b/apps/trading/pages/index.tsx @@ -1,33 +1,418 @@ -// apps/site/pages/index.tsx -export default function Index() { +import { EtherscanLink } from '@vegaprotocol/ui-toolkit'; +import { Callout } from '@vegaprotocol/ui-toolkit'; +import { ReactHelpers } from '@vegaprotocol/react-helpers'; + +export function Index() { + /* + * Replace the elements below with your own. + * + * Note: The corresponding styles are in the ./index.scss file. + */ return ( -
-
-

- Ready to dive in? - - Start your free trial today. - -

-
-
- - Get started - +
+
+
+
+ + Welcome trading 👋 + + +
-
- - Learn more - + +
+
+

+ + + + You're up and running +

+ What's next? +
+
+ + + +
+ +
+ + +
+ +
+

Next steps

+

Here are some things you can do with Nx:

+
+ + + + + Add UI library + + 
+                # Generate UI lib
+                nx g @nrwl/angular:lib ui
+                # Add a component
+                nx g @nrwl/angular:component button --project ui
+
+
+
+ + + + + View interactive project graph + + 
nx graph
+
+
+ + + + + Run affected commands + + 
+                # see what's been affected by changes
+                nx affected:graph
+                # run tests for current changes
+                nx affected:test
+                # run e2e tests for current changes
+                nx affected:e2e
+
+
+
+ +

+ Carefully crafted with + + + +

); } + +export default Index; diff --git a/apps/trading/postcss.config.js b/apps/trading/postcss.config.js index 3971d7bbf..cbdd9c22c 100644 --- a/apps/trading/postcss.config.js +++ b/apps/trading/postcss.config.js @@ -1,4 +1,3 @@ -// apps/site/postcss.config.js const { join } = require('path'); module.exports = { diff --git a/apps/trading/tailwind.config.js b/apps/trading/tailwind.config.js index 99c2d902a..5852af786 100644 --- a/apps/trading/tailwind.config.js +++ b/apps/trading/tailwind.config.js @@ -1,12 +1,13 @@ const { join } = require('path'); +const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind'); +const theme = require('../../libs/tailwindcss-config/src/theme'); module.exports = { content: [ - join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'), - join(__dirname, './components/**/*.{js,ts,jsx,tsx}'), + join(__dirname, 'pages/**/*.{js,ts,jsx,tsx}'), + ...createGlobPatternsForDependencies(__dirname), ], - theme: { - extend: {}, - }, + darkMode: 'class', + theme, plugins: [], }; diff --git a/libs/tailwindcss-config/.eslintrc.json b/libs/tailwindcss-config/.eslintrc.json new file mode 100644 index 000000000..9d9c0db55 --- /dev/null +++ b/libs/tailwindcss-config/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/libs/tailwindcss-config/README.md b/libs/tailwindcss-config/README.md new file mode 100644 index 000000000..f329e2102 --- /dev/null +++ b/libs/tailwindcss-config/README.md @@ -0,0 +1,11 @@ +# tailwindcss-config + +This library was generated with [Nx](https://nx.dev). + +## Building + +Run `nx build tailwindcss-config` to build the library. + +## Running unit tests + +Run `nx test tailwindcss-config` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/tailwindcss-config/jest.config.js b/libs/tailwindcss-config/jest.config.js new file mode 100644 index 000000000..7ca6dcddc --- /dev/null +++ b/libs/tailwindcss-config/jest.config.js @@ -0,0 +1,14 @@ +module.exports = { + displayName: 'tailwindcss-config', + preset: '../../jest.preset.js', + globals: { + 'ts-jest': { + tsconfig: '/tsconfig.spec.json', + }, + }, + transform: { + '^.+\\.[tj]s$': 'ts-jest', + }, + moduleFileExtensions: ['ts', 'js', 'html'], + coverageDirectory: '../../coverage/libs/tailwindcss-config', +}; diff --git a/libs/tailwindcss-config/package.json b/libs/tailwindcss-config/package.json new file mode 100644 index 000000000..726ea8a84 --- /dev/null +++ b/libs/tailwindcss-config/package.json @@ -0,0 +1,5 @@ +{ + "name": "@vegaprotocol/tailwindcss-config", + "version": "0.0.1", + "type": "commonjs" +} diff --git a/libs/tailwindcss-config/project.json b/libs/tailwindcss-config/project.json new file mode 100644 index 000000000..80ed67346 --- /dev/null +++ b/libs/tailwindcss-config/project.json @@ -0,0 +1,33 @@ +{ + "root": "libs/tailwindcss-config", + "sourceRoot": "libs/tailwindcss-config/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nrwl/js:tsc", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/tailwindcss-config", + "main": "libs/tailwindcss-config/src/index.js", + "tsConfig": "libs/tailwindcss-config/tsconfig.lib.json", + "assets": ["libs/tailwindcss-config/*.md"] + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["libs/tailwindcss-config/**/*.js"] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["coverage/libs/tailwindcss-config"], + "options": { + "jestConfig": "libs/tailwindcss-config/jest.config.js", + "passWithNoTests": true + } + } + }, + "tags": [] +} diff --git a/libs/tailwindcss-config/src/index.js b/libs/tailwindcss-config/src/index.js new file mode 100644 index 000000000..da88950a9 --- /dev/null +++ b/libs/tailwindcss-config/src/index.js @@ -0,0 +1,4 @@ +const theme = require('./theme'); +module.exports = { + theme, +}; diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js new file mode 100644 index 000000000..ee750194c --- /dev/null +++ b/libs/tailwindcss-config/src/theme.js @@ -0,0 +1,151 @@ +const defaultTheme = require('tailwindcss/defaultTheme'); + +module.exports = { + screens: { + sm: '500px', + lg: '960px', + }, + colors: { + transparent: 'transparent', + current: 'currentColor', + black: '#000', + white: '#FFF', + + neutral: { + // 250 - 23 = 227; (900-50) / 227 = 850 / 227 = 3.74449339207 + 50: '#fafafa', // FA = 250 + 100: '#ebebeb', + 150: '#dcdcdc', + 200: '#cdcdcd', + 250: '#bebebe', + 300: '#afafaf', + 350: '#a1a1a1', + 400: '#939393', + 450: '#858585', + 500: '#787878', + 550: '#6a6a6a', + 593: '#696969', // dark muted + 600: '#5d5d5d', + 650: '#515151', + 700: '#444444', + 753: '#3E3E3E', // dark -> 3F is muted + 750: '#383838', + 800: '#2d2d2d', // breakdown-background was 2C + 850: '#222222', + 900: '#171717', // 17 = 23 + }, + + 'light-gray-50': '#F5F8FA', //off-white - https://blueprintjs.com/docs/#core/colors + 'gray-50': '#BFCCD6', // muted - https://blueprintjs.com/docs/#core/colors + coral: '#FF6057', + // below colors are not defined as atoms + vega: { + yellow: '#EDFF22', + pink: '#FF2D5E', + green: '#00F780', + }, + intent: { + danger: '#FF261A', + warning: '#FF7A1A', + prompt: '#EDFF22', + progress: '#FFF', + success: '#26FF8A', + help: '#494949', + background: { + danger: '#9E0025', // for white text + }, + } /*, + data: { + red: { + white: { + 50: '#FFFFFF', + 220: '#FF6057', // overlay FFF 80% + 390: '#FF6057', // overlay FFF 60% + 560: '#FF6057', // overlay FFF 40% + 730: '#FF6057', // overlay FFF 20% + 900: '#FF6057', + }, + green: { + 50: '#30F68B', + 220: '#89DC50', + 475: '#F2BD09', + 730: '#FF8501', + 900: '#FF6057', + }, + }, + },*/, + }, + spacing: { + 0: '0px', + 2: '0.125rem', + 4: '0.25rem', + 8: '0.5rem', + 12: '0.75rem', + 28: '1.75rem', + 44: '2.75rem', + }, + backgroundColor: ({ theme }) => ({ + transparent: 'transparent', + dark: theme('colors.dark'), + black: '#000', + white: theme('colors.white'), + danger: theme('colors.intent.background.danger'), + }), + borderWidth: { + DEFAULT: '1px', + 4: '4px', + }, + fontFamily: { + mono: defaultTheme.fontFamily.mono, + serif: defaultTheme.fontFamily.serif, + sans: [ + '"Helvetica Neue"', + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + 'Arial', + '"Noto Sans"', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + '"Noto Color Emoji"', + ], + alpha: [ + 'AlphaLyrae-Medium', + '"Helvetica Neue"', + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + 'Arial', + '"Noto Sans"', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + '"Noto Color Emoji"', + ], + }, + fontSize: { + h1: ['72px', { lineHeight: '92px', letterSpacing: '-1%' }], + h2: ['48px', { lineHeight: '64px', letterSpacing: '-1%' }], + h3: ['32px', { lineHeight: '40px', letterSpacing: '-1%' }], + + h4: ['24px', { lineHeight: '36px', letterSpacing: '-1%' }], + h5: ['18px', { lineHeight: '28px', letterSpacing: '-1%' }], + + 'body-large': ['16px', '24px'], + body: ['14px', '20px'], + + ui: ['14px', '20px'], + 'ui-small': ['10px', '16px'], + }, + + extend: { + boxShadow: { + callout: '5px 5px 0 1px rgba(0, 0, 0, 0.05)', + }, + }, +}; diff --git a/libs/tailwindcss-config/tsconfig.json b/libs/tailwindcss-config/tsconfig.json new file mode 100644 index 000000000..aafbcbd30 --- /dev/null +++ b/libs/tailwindcss-config/tsconfig.json @@ -0,0 +1,23 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "module": "CommonJS", + "allowJs": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/tailwindcss-config/tsconfig.lib.json b/libs/tailwindcss-config/tsconfig.lib.json new file mode 100644 index 000000000..9607e66b1 --- /dev/null +++ b/libs/tailwindcss-config/tsconfig.lib.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "declaration": true, + "types": [] + }, + "include": ["**/*.ts", "**/*.js"], + "exclude": ["**/*.spec.ts", "**/*.spec.js"] +} diff --git a/libs/tailwindcss-config/tsconfig.spec.json b/libs/tailwindcss-config/tsconfig.spec.json new file mode 100644 index 000000000..a18afb604 --- /dev/null +++ b/libs/tailwindcss-config/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] +} diff --git a/libs/ui-toolkit/project.json b/libs/ui-toolkit/project.json index 2bb76699c..8c32676d4 100644 --- a/libs/ui-toolkit/project.json +++ b/libs/ui-toolkit/project.json @@ -1,6 +1,6 @@ { - "root": "libs/ui-toolkit", - "sourceRoot": "libs/ui-toolkit/src", + "root": "libs/ui-toolkit/src", + "sourceRoot": "libs/ui-toolkit", "projectType": "library", "tags": [], "targets": { diff --git a/libs/ui-toolkit/src/components/callout/callout.stories.tsx b/libs/ui-toolkit/src/components/callout/callout.stories.tsx index 399100e2c..f8b3cc854 100644 --- a/libs/ui-toolkit/src/components/callout/callout.stories.tsx +++ b/libs/ui-toolkit/src/components/callout/callout.stories.tsx @@ -12,6 +12,8 @@ const Template: ComponentStory = (args) => ( Content ); +export const Default = Template.bind({}); + export const Danger = Template.bind({}); Danger.args = { intent: 'danger', diff --git a/libs/ui-toolkit/tailwind.config.js b/libs/ui-toolkit/tailwind.config.js index 4686de3aa..104d4055c 100644 --- a/libs/ui-toolkit/tailwind.config.js +++ b/libs/ui-toolkit/tailwind.config.js @@ -1,6 +1,6 @@ -const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind'); const { join } = require('path'); -// const defaultTheme = require('tailwindcss/defaultTheme') +const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind'); +const theme = require('../tailwindcss-config/src/theme'); module.exports = { content: [ @@ -9,132 +9,6 @@ module.exports = { ...createGlobPatternsForDependencies(__dirname), ], darkMode: 'class', - theme: { - screens: { - sm: '500px', - lg: '960px', - }, - colors: { - transparent: 'transparent', - current: 'currentColor', - dark: '#3E3E3E', - black: '#000', - white: '#FFF', - 'off-white': '#F5F8FA', - muted: '#BFCCD6', - warning: '#FF6057', - // below colors are not defined as atoms - 'input-background': '#3F3F3F', - 'breakdown-background': '#2C2C2C', - 'dark-muted': '#696969', - vega: { - yellow: '#EDFF22', - pink: '#FF2D5E', - green: '#00F780', - }, - intent: { - danger: '#FF261A', - warning: '#FF7A1A', - prompt: '#EDFF22', - progress: '#FFF', - success: '#26FF8A', - help: '#494949', - background: { - danger: '#9E0025', // for white text - }, - }, - data: { - red: { - white: { - 50: '#FFFFFF', - 220: '#FF6057', // overlay FFF 80% - 390: '#FF6057', // overlay FFF 60% - 560: '#FF6057', // overlay FFF 40% - 730: '#FF6057', // overlay FFF 20% - 900: '#FF6057', - }, - green: { - 50: '#30F68B', - 220: '#89DC50', - 475: '#F2BD09', - 730: '#FF8501', - 900: '#FF6057', - }, - }, - }, - }, - spacing: { - px: '1px', - 0: '0px', - 4: '0.25rem', - 8: '0.5rem', - 12: '0.75rem', - 28: '1.75rem', - 44: '2.75rem', - }, - backgroundColor: (theme) => ({ - transparent: 'transparent', - dark: theme('colors.dark'), - black: '#000', - white: theme('colors.white'), - danger: theme('colors.intent.background.danger'), - }), - borderWidth: { - DEFAULT: '1px', - 4: '4px', - }, - fontFamily: (theme) => ({ - ...theme.fontFamily, - sans: [ - '"Helvetica Neue"', - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - 'Arial', - '"Noto Sans"', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', - ], - alpha: [ - 'AlphaLyrae-Medium', - '"Helvetica Neue"', - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - 'Arial', - '"Noto Sans"', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', - ], - }), - fontSize: { - h1: ['72px', { lineHeight: '92px', letterSpacing: '-1%' }], - h2: ['48px', { lineHeight: '64px', letterSpacing: '-1%' }], - h3: ['32px', { lineHeight: '40px', letterSpacing: '-1%' }], - - h4: ['24px', { lineHeight: '36px', letterSpacing: '-1%' }], - h5: ['18px', { lineHeight: '28px', letterSpacing: '-1%' }], - - 'body-large': ['16px', '24px'], - body: ['14px', '20px'], - - ui: ['14px', '20px'], - 'ui-small': ['10px', '16px'], - }, - - extend: { - boxShadow: { - callout: '5px 5px 0 1px rgba(0, 0, 0, 0.05)', - }, - }, - }, + theme, plugins: [], }; diff --git a/tsconfig.base.json b/tsconfig.base.json index 1a5f59912..7b50969ae 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -16,6 +16,9 @@ "baseUrl": ".", "paths": { "@vegaprotocol/react-helpers": ["libs/react-helpers/src/index.ts"], + "@vegaprotocol/tailwindcss-config": [ + "libs/tailwindcss-config/src/index.js" + ], "@vegaprotocol/ui-toolkit": ["libs/ui-toolkit/src/index.ts"] } }, diff --git a/workspace.json b/workspace.json index a03038533..9cfe73a45 100644 --- a/workspace.json +++ b/workspace.json @@ -4,6 +4,7 @@ "explorer": "apps/explorer", "explorer-e2e": "apps/explorer-e2e", "react-helpers": "libs/react-helpers", + "tailwindcss-config": "libs/tailwindcss-config", "trading": "apps/trading", "trading-e2e": "apps/trading-e2e", "ui-toolkit": "libs/ui-toolkit"