Skip to content

Commit

Permalink
feat(design-system): add tailwind showcase component (#778)
Browse files Browse the repository at this point in the history 
EX-7078

Co-authored-by: alvarodE <alvarod@empathy.co>
  • Loading branch information
@javieri-empathy @alvarodE
javieri-empathy and alvarodE committed Nov 3, 2022
1 parent 881bef5 commit 0178ef5
Show file tree
Hide file tree
Showing 27 changed files with 1,131 additions and 494 deletions.
1,041 changes: 842 additions & 199 deletions package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/x-components/.postcssrc.js
View file
@@ -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
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
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'
],
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: [
'alignItems',
'display',
'flex',
'flexDirection',
'fontSize',
'fontWeight',
'gap',
'lineHeight',
'textColor'
]
};
1 change: 1 addition & 0 deletions packages/x-tailwindcss/.gitignore
View file
@@ -0,0 +1 @@
/showcase
7 changes: 7 additions & 0 deletions packages/x-tailwindcss/demo/.eslintrc.js
View file
@@ -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
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

This file was deleted.

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

This file was deleted.

27 changes: 27 additions & 0 deletions packages/x-tailwindcss/demo/rollup.config.js
View file
@@ -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()
]
};

0 comments on commit 0178ef5

Please sign in to comment.