Skip to content

Commit

Permalink
docs and postbuild script updates
Browse files Browse the repository at this point in the history
  • Loading branch information
mrksbnc committed Nov 19, 2023
1 parent 234b418 commit 9a0f6cb
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 21 deletions.
25 changes: 25 additions & 0 deletions .storybook/storybook.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,28 @@
background: rgba(51, 51, 51) !important;
}
}

.css-1njl3fa {
border: none !important;
box-shadow: none !important;
background-image: none !important;

div {
:first-child {
margin-left: 2px;
}

:last-child {
margin-right: 2px;
}

&:not(:first-child):not(:last-child) {
margin: 0 2px;
}
}

::before {
content: none;
border-radius: 8px;
}
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "Vue 3 UI library built with Vite and Storybook",
"scripts": {
"dev": "vite",
"build": "npm run type-check && npm run lint && vite optimize --force && vite build --mode production",
"build": "npm run type-check && npm run lint && vite optimize --force && vite build --mode production && node scripts/postbuild.cjs",
"preview": "vite preview",
"test": "vitest --run --update",
"build-only": "vite build",
Expand Down
92 changes: 92 additions & 0 deletions scripts/postbuild.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
'use strict';

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

const start = performance.now();

process.stdout.write('\x1b[33m$ Post build script running...\x1b[0m\n');
process.stdout.write(
'\x1b[33m$ Removing unnecessary files and directories...\x1b[0m\n',
);

const WORKING_DIRECTORY = path.join(__dirname, '../dist');

const files_to_remove_on_root = [
'inter.es.js',
'inter.cjs.js',
'colors.es.js',
'colors.cjs.js',
'animation.es.js',
'animation.cjs.js',
'assistant.es.js',
'assistant.cjs.js',
'vite.config.d.ts',
'vitest.config.d.ts',
];

const sub_dirs_to_remove = ['__stories__', '__tests__'];

process.stdout.write(
'\x1b[35m$ WORKING DIRECTORY: ' + WORKING_DIRECTORY + '\x1b[0m\n',
);

const utils_path = path.join(WORKING_DIRECTORY, 'utils');

// Remove directories on roo
if (fs.existsSync(utils_path)) {
process.stdout.write(
'\x1b[35m$ Removing directory: ' + utils_path + '\x1b[0m\n',
);
execSync(`rm -rf ${utils_path}`);
}

// Remove files on root
files_to_remove_on_root.forEach((artifact) => {
const artifact_path = path.join(WORKING_DIRECTORY, artifact);
const should_delete = files_to_remove_on_root.includes(artifact);

if (should_delete) {
execSync('rm -rf ' + artifact_path);
process.stdout.write(
'\x1b[31m$ Deleting file:\x1b[0m \x1b[41m' + artifact_path + '\x1b[0m\n',
);
} else {
process.stdout.write(
'\x1b[34m$ Skipping file:\x1b[0m \x1b[44m' + artifact_path + '\x1b[0m\n',
);
}
});

const COMPONENT_DIRECTORY = path.join(WORKING_DIRECTORY, 'src', 'components');
const COMPONENT_CONTENT = fs.readdirSync(COMPONENT_DIRECTORY);

COMPONENT_CONTENT.forEach((dir) => {
const artifact = path.join(COMPONENT_DIRECTORY, dir);
if (fs.statSync(artifact).isDirectory()) {
const sub_dir_path = fs.readdirSync(artifact);
sub_dir_path.forEach((sub_dir) => {
const sub_dir_item_path = path.join(artifact, sub_dir);
if (
fs.statSync(sub_dir_item_path).isDirectory() &&
sub_dirs_to_remove.includes(sub_dir)
) {
execSync('rm -rf ' + sub_dir_item_path);
process.stdout.write(
'\x1b[31m$ Deleting directory:\x1b[0m \x1b[41m' +
sub_dir_item_path +
'\x1b[0m\n',
);
}
});
}
});

const end = performance.now();
const time = end - start;
const rounded = time.toFixed(3);

process.stdout.write(
'\x1b[32m$ Post build script completed in ' + rounded + 'ms\x1b[0m\n',
);
91 changes: 76 additions & 15 deletions src/components/Badge/__stories__/BoBadge.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,13 +170,34 @@ export const Filled: Story = {
render: () => ({
components: { BoBadge },
template: `
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="sm" label="Label" />
<BoBadge variant="info" size="sm" label="Label" />
<BoBadge variant="tertiary" size="sm" label="Label" />
<BoBadge variant="success" size="sm" label="Label" />
<BoBadge variant="danger" size="sm" label="Label" />
<BoBadge variant="warning" size="sm" label="Label" />
<div style="display: flex; flex-direction: column; gap: 20px;">
Pill
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="sm" label="Label" type="filled"/>
<BoBadge variant="info" size="sm" label="Label" type="filled"/>
<BoBadge variant="tertiary" size="sm" label="Label" type="filled"/>
<BoBadge variant="success" size="sm" label="Label" type="filled"/>
<BoBadge variant="danger" size="sm" label="Label" type="filled"/>
<BoBadge variant="warning" size="sm" label="Label" type="filled"/>
</div>
Circle
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="sm" label="1" type="filled" form="circle"/>
<BoBadge variant="info" size="sm" label="2" type="filled" form="circle" />
<BoBadge variant="tertiary" size="sm" label="3" type="filled" form="circle"/>
<BoBadge variant="success" size="sm" label="4" type="filled" form="circle"/>
<BoBadge variant="danger" size="sm" label="5" type="filled" form="circle"/>
<BoBadge variant="warning" size="sm" label="6" type="filled" form="circle"/>
</div>
Square
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="sm" label="1" type="filled" form="square"/>
<BoBadge variant="info" size="sm" label="2" type="filled" form="square" />
<BoBadge variant="tertiary" size="sm" label="3" type="filled" form="square"/>
<BoBadge variant="success" size="sm" label="4" type="filled" form="square"/>
<BoBadge variant="danger" size="sm" label="5" type="filled" form="square"/>
<BoBadge variant="warning" size="sm" label="6" type="filled" form="square"/>
</div>
</div>
`,
}),
Expand All @@ -187,13 +208,34 @@ export const Outline: Story = {
render: () => ({
components: { BoBadge },
template: `
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="sm" label="Label" type="outline"/>
<BoBadge variant="info" size="sm" label="Label" type="outline"/>
<BoBadge variant="tertiary" size="sm" label="Label" type="outline"/>
<BoBadge variant="success" size="sm" label="Label" type="outline"/>
<BoBadge variant="danger" size="sm" label="Label" type="outline"/>
<BoBadge variant="warning" size="sm" label="Label" type="outline"/>
<div style="display: flex; flex-direction: column; gap: 20px;">
Pill
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="sm" label="Label" type="outline"/>
<BoBadge variant="info" size="sm" label="Label" type="outline"/>
<BoBadge variant="tertiary" size="sm" label="Label" type="outline"/>
<BoBadge variant="success" size="sm" label="Label" type="outline"/>
<BoBadge variant="danger" size="sm" label="Label" type="outline"/>
<BoBadge variant="warning" size="sm" label="Label" type="outline"/>
</div>
Circle
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="sm" label="1" type="outline" form="circle"/>
<BoBadge variant="info" size="sm" label="2" type="outline" form="circle" />
<BoBadge variant="tertiary" size="sm" label="3" type="outline" form="circle"/>
<BoBadge variant="success" size="sm" label="4" type="outline" form="circle"/>
<BoBadge variant="danger" size="sm" label="5" type="outline" form="circle"/>
<BoBadge variant="warning" size="sm" label="6" type="outline" form="circle"/>
</div>
Square
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="sm" label="1" type="outline" form="square"/>
<BoBadge variant="info" size="sm" label="2" type="outline" form="square" />
<BoBadge variant="tertiary" size="sm" label="3" type="outline" form="square"/>
<BoBadge variant="success" size="sm" label="4" type="outline" form="square"/>
<BoBadge variant="danger" size="sm" label="5" type="outline" form="square"/>
<BoBadge variant="warning" size="sm" label="6" type="outline" form="square"/>
</div>
</div>
`,
}),
Expand All @@ -204,13 +246,32 @@ export const Sizes: Story = {
render: () => ({
components: { BoBadge },
template: `
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<div style="display: flex; flex-direction: column; gap: 20px;">
Pill
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" size="xs" label="Label" />
<BoBadge variant="default" size="sm" label="Label" />
<BoBadge variant="default" size="md" label="Label" />
<BoBadge variant="default" size="lg" label="Label" />
<BoBadge variant="default" size="xl" label="Label" />
</div>
Circle
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" form="circle" size="xs" label="1" />
<BoBadge variant="default" form="circle" size="sm" label="2" />
<BoBadge variant="default" form="circle" size="md" label="3" />
<BoBadge variant="default" form="circle" size="lg" label="4" />
<BoBadge variant="default" form="circle" size="xl" label="5" />
</div>
Square
<div style="display: flex; flex-direction: row; align-items: center; gap: 10px;">
<BoBadge variant="default" form="square" size="xs" label="1" />
<BoBadge variant="default" form="square" size="sm" label="2" />
<BoBadge variant="default" form="square" size="md" label="3" />
<BoBadge variant="default" form="square" size="lg" label="4" />
<BoBadge variant="default" form="square" size="xl" label="5" />
</div>
</div>
`,
}),
};
Expand Down
10 changes: 5 additions & 5 deletions src/components/Badge/badge.scss
Original file line number Diff line number Diff line change
Expand Up @@ -99,23 +99,23 @@
border-radius: 50%;

&.xs {
width: 8px;
width: 6px;
}

&.sm {
width: 12px;
width: 8px;
}

&.md {
width: 16px;
width: 12px;
}

&.lg {
width: 20px;
width: 16px;
}

&.xl {
width: 24px;
width: 20px;
}
}

Expand Down

0 comments on commit 9a0f6cb

Please sign in to comment.