Skip to content

Instantly share code, notes, and snippets.

@lmartim
lmartim / index.html
Last active September 28, 2021 03:07
Index file for Vite project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Project Name</title>
</head>
<body>
<div id="app"></div>
@lmartim
lmartim / vite.config.js
Last active September 28, 2021 03:07
Vite's default config.
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
@lmartim
lmartim / config.json
Last active September 28, 2021 03:07
Amazon Style Dictionary's config file.
{
"source": ["tokens/properties/**/*.json"],
"platforms": {
"scss": {
"transformGroup": "scss",
"buildPath": "tokens/build/",
"files": [{
"destination": "_variables.scss",
"format": "scss/variables"
}]
@lmartim
lmartim / vite.config.js
Last active September 28, 2021 03:06
Adding token's file to Vite.
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@lmartim
lmartim / main.js
Last active September 28, 2021 03:06
Storybook's main config file.
module.exports = {
stories: [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
core: {
@lmartim
lmartim / rollup.config.js
Last active October 1, 2021 02:26
The rollup config for building the component library.
import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'
module.exports = [
{
input: 'src/index.js',
output: [
{
sourcemap: true,
@lmartim
lmartim / Header.vue
Created September 28, 2021 03:04
Header component using color token
<template>
<h1>{{ text }}</h1>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
props: {
text: {
@lmartim
lmartim / colors.json
Last active September 30, 2021 03:08
Some tokens
//.tokens/properties/colors
{
"color": {
"success": {
"darkest" : {
"value": "#004020",
"comment": "the darkest sucess color"
},
"dark" : {
"value": "#007339",
@lmartim
lmartim / _flex.scss
Last active September 30, 2021 03:16
Some styles
//.src/assets/styles/_flex.scss
.d {
&-iflex {
display: inline-flex !important;
}
&-flex {
display: flex !important;
}
}
@lmartim
lmartim / Button.stories.js
Last active September 30, 2021 04:03
Button component
//.src/components/Button/Button.stories.js
import Button from './Button.vue'
export default {
title: 'Components/Button',
component: { Button },
argTypes: {
label: {
type: 'string'
},