Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add tailwind showcase component. #778

Merged
merged 11 commits into from Nov 3, 2022
Merged

feat: add tailwind showcase component. #778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5c8e76a
feat: add tailwind showcase component.
javieri-empathy Oct 13, 2022
7c819aa
cleanup
javieri-empathy Oct 13, 2022
48e79f3
cleanup
javieri-empathy Oct 13, 2022
2eebd87
Change build to only use rollup
javieri-empathy Oct 13, 2022
cf34c61
Add gap
javieri-empathy Oct 13, 2022
a5d3d5e
Improve build
javieri-empathy Oct 13, 2022
f04a9dc
Pr fixes
javieri-empathy Nov 2, 2022
68e4c59
Pr fixes
javieri-empathy Nov 2, 2022
56ea836
Merge remote-tracking branch 'origin/main' into feature/EX-7088-x-tai…
javieri-empathy Nov 3, 2022
6827cdd
Merge branch 'main' into feature/EX-7088-x-tailwind-showcase
alvarodE Nov 3, 2022
35c431a
Merge branch 'feature/EX-7088-x-tailwind-showcase' of https://github.…
alvarodE Nov 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1,041 changes: 842 additions & 199 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/x-components/.postcssrc.js
View file
Open in desktop
@@ -1,6 +1,7 @@
module.exports = {
plugins: [
require('tailwindcss'),
require('tailwindcss/nesting'),
require('autoprefixer'),
require('postcss-logical'),
require('postcss-dir-pseudo-class')
Expand Down
5 changes: 5 additions & 0 deletions packages/x-components/src/router.ts
View file
Open in desktop
Expand Up @@ -38,6 +38,11 @@ if (process.env.NODE_ENV !== 'production') {
name: 'Design System',
component: () => import('./views/design-system/design-system.vue')
},
{
path: '/xds',
name: 'XDS',
component: () => import('@empathyco/x-tailwindcss/showcase').then(m => m.XdsShowCase)
},
{
path: '/result-app',
name: 'result-app',
Expand Down
20 changes: 17 additions & 3 deletions packages/x-components/tailwind.config.js
View file
Open in desktop
Expand Up @@ -3,13 +3,27 @@ const options = require('./src/tailwind/plugin-options');

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./public/index.html', './src/**/*.vue'],
content: [
'./public/index.html',
'./src/**/*.vue',
'./node_modules/@empathyco/x-tailwindcss/showcase/**/*.js'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have to be very careful with this if moved to the archetype. With this line it will include the full set of components CSS. It should only be included for development purposes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Different configs for dev and for build can be a solution for this:
tailwindlabs/tailwindcss#9405

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is another proposal that I thought yesterday (yeah, I know, too late) about exposing a dev server rather than a set of Vue components.
In my mind this would allow us to remove the rollup config for the showcase components, it would facilitate using this from a custom project regardless the components library used, and also ease up this configuration (run a command instead of setting up a view and a development tailwind config).
https://searchbroker.atlassian.net/browse/EX-7329

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love how that sounds Javi :sisi3:

],
prefix: 'x-',
plugins: [xTailwindPlugin(options), oldDsPlugin],
// In order to avoid conflicting class names with the old design system while the new XDS is being developed
// we are disabling all corePlugins from tailwindcss but `fontSize`, `fontWeight`, `lineHeight` and `textColor`.
// we are disabling all corePlugins from tailwindcss but some of them.
// You can check that tailwindcss is still working by checking the style of the heading `Test controls`
// below the `Start` button on the `x-components` internal demo app.
// See https://github.com/empathyco/x/pull/655#discussion_r948923711
corePlugins: ['fontSize', 'fontWeight', 'lineHeight', 'textColor']
corePlugins: [
diegopf marked this conversation as resolved.
Show resolved Hide resolved
'alignItems',
'display',
'flex',
'flexDirection',
'fontSize',
'fontWeight',
'gap',
'lineHeight',
'textColor'
]
};
1 change: 1 addition & 0 deletions packages/x-tailwindcss/.gitignore
View file
Open in desktop
@@ -0,0 +1 @@
/showcase
7 changes: 7 additions & 0 deletions packages/x-tailwindcss/demo/.eslintrc.js
View file
Open in desktop
@@ -0,0 +1,7 @@
module.exports = {
extends: ['plugin:@empathyco/x/all'],
parserOptions: {
tsconfigRootDir: __dirname,
project: 'tsconfig.json'
}
};
202 changes: 2 additions & 200 deletions packages/x-tailwindcss/demo/index.html
View file
Open in desktop
Expand Up @@ -6,206 +6,8 @@
<title>x-tailwindcss demo</title>
</head>
<body>
<div id="app" class="x-flex x-flex-col x-m-12">
<h1 class="x-text-lg x-m-4">Components</h1>
<div class="x-flex x-flex-col x-items-start x-gap-20">
<div class="x-flex x-flex-row x-items-start x-gap-12">
<h1 class="x-text-md x-m-4">Default</h1>
<button class="x-button">
<span>♥️</span>
<span>button</span>
</button>

<button class="x-button" disabled>
<span>♥️</span>
<span>button disabled</span>
</button>
</div>

<div class="x-flex x-flex-row x-items-start x-gap-12">
<h1 class="x-text-md x-m-4">Sizes</h1>

<button class="x-button x-button-xs">
<span>♥️</span>
<span>xs</span>
</button>

<button class="x-button x-button-sm">
<span>♥️</span>
<span>sm</span>
</button>

<button class="x-button x-button-md">
<span>♥️</span>
<span>md</span>
</button>

<button class="x-button x-button-lg">
<span>♥️</span>
<span>lg</span>
</button>
</div>

<div class="x-flex x-flex-row x-items-start x-gap-12">
<h1 class="x-text-md x-m-4">Colors</h1>

<button class="x-button x-button-lead">
<span>♥️</span>
<span>lead</span>
</button>

<button class="x-button x-button-auxiliary">
<span>♥️</span>
<span>auxiliary</span>
</button>

<button class="x-button x-button-accent">
<span>♥️</span>
<span>accent</span>
</button>

<button class="x-button x-button-highlight">
<span>♥️</span>
<span>highlight</span>
</button>

<button class="x-button x-button-success">
<span>♥️</span>
<span>success</span>
</button>

<button class="x-button x-button-warning">
<span>♥️</span>
<span>warning</span>
</button>

<button class="x-button x-button-error">
<span>♥️</span>
<span>error</span>
</button>

<button class="x-button x-button-lead" disabled>
<span>♥️</span>
<span>disabled</span>
</button>
</div>

<div class="x-flex x-flex-row x-items-start x-gap-12">
<h1 class="x-text-md x-m-4">Layout</h1>

<button class="x-button x-button-square" title="square">♥️</button>

<button class="x-button x-button-circle" title="circle">♥️</button>
</div>

<div class="x-flex x-flex-row x-items-start x-gap-12">
<h1 class="x-text-md x-m-4">Outlined</h1>

<button class="x-button x-button-outlined">
<span>♥️</span>
<span>outlined</span>
</button>

<button class="x-button x-button-outlined" disabled>
<span>♥️</span>
<span>outlined disabled</span>
</button>

<button class="x-button x-button-outlined x-button-lead">
<span>♥️</span>
<span>outlined lead</span>
</button>

<button class="x-button x-button-outlined x-button-auxiliary">
<span>♥️</span>
<span>outlined auxiliary</span>
</button>

<button class="x-button x-button-outlined x-button-accent">
<span>♥️</span>
<span>outlined accent</span>
</button>

<button class="x-button x-button-outlined x-button-highlight">
<span>♥️</span>
<span>outlined highlight</span>
</button>

<button class="x-button x-button-outlined x-button-success">
<span>♥️</span>
<span>outlined success</span>
</button>

<button class="x-button x-button-outlined x-button-warning">
<span>♥️</span>
<span>outlined warning</span>
</button>

<button class="x-button x-button-outlined x-button-error">
<span>♥️</span>
<span>outlined error</span>
</button>
</div>

<div class="x-flex x-flex-row x-items-start x-gap-12">
<h1 class="x-text-md x-m-4">Ghost</h1>

<button class="x-button x-button-ghost">
<span>♥️</span>
<span>ghost</span>
</button>

<button class="x-button x-button-ghost" disabled>
<span>♥️</span>
<span>ghost disabled</span>
</button>

<button class="x-button x-button-ghost x-button-lead">
<span>♥️</span>
<span>ghost lead</span>
</button>

<button class="x-button x-button-ghost x-button-auxiliary">
<span>♥️</span>
<span>ghost auxiliary</span>
</button>

<button class="x-button x-button-ghost x-button-accent">
<span>♥️</span>
<span>ghost accent</span>
</button>

<button class="x-button x-button-ghost x-button-highlight">
<span>♥️</span>
<span>ghost highlight</span>
</button>

<button class="x-button x-button-ghost x-button-success">
<span>♥️</span>
<span>ghost success</span>
</button>

<button class="x-button x-button-ghost x-button-warning">
<span>♥️</span>
<span>ghost warning</span>
</button>

<button class="x-button x-button-ghost x-button-error">
<span>♥️</span>
<span>ghost error</span>
</button>
</div>

<div class="x-flex x-flex-row x-items-start x-gap-12">
<h1 class="x-text-md x-m-4">Combined</h1>

<button class="x-custom-button">
<span>♥️</span>
<span>custom</span>
</button>
</div>
</div>
<div id="app">
</div>
</body>
<script type="module" src="./main.ts"></script>
<script type="module" src="./src/main.ts"></script>
</html>
1 change: 0 additions & 1 deletion packages/x-tailwindcss/demo/main.ts
View file
Open in desktop

This file was deleted.

23 changes: 0 additions & 23 deletions packages/x-tailwindcss/demo/options.ts
View file
Open in desktop

This file was deleted.

27 changes: 27 additions & 0 deletions packages/x-tailwindcss/demo/rollup.config.js
View file
Open in desktop
@@ -0,0 +1,27 @@
import { resolve } from 'path';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import vue from 'rollup-plugin-vue';

export default {
input: resolve(__dirname, 'src/index.ts'),
output: [{ format: 'esm', dir: resolve(__dirname, '../showcase') }],
preserveModules: true,
external: [
'vue',
'vue-property-decorator',
'vue-class-component',
'tslib',
/vue-runtime-helpers/
],
plugins: [
commonjs(),
typescript({
tsconfig: resolve(__dirname, 'tsconfig.json'),
tsconfigOverride: {
exclude: ['vite.config.ts', 'tailwindcss-nesting.d.ts', 'src/main.ts']
}
}),
vue()
]
};