diff --git a/.storybook/helpers/templates.ts b/.storybook/helpers/templates.ts deleted file mode 100644 index b71a4d2aef..0000000000 --- a/.storybook/helpers/templates.ts +++ /dev/null @@ -1,8 +0,0 @@ -export function generateTemplate(story: string): string { - return ` -
-
- ${story} -
-
`; -} diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index 7f8369b40d..0000000000 --- a/.storybook/main.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'], -}; diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js deleted file mode 100644 index a05ac2165d..0000000000 --- a/.storybook/postcss.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - plugins: [ - require('tailwindcss')('../tailwind.config.js'), - require('postcss-nesting'), - require('autoprefixer'), - ], -}; diff --git a/.storybook/preview.js b/.storybook/preview.js deleted file mode 100644 index e519d58ce9..0000000000 --- a/.storybook/preview.js +++ /dev/null @@ -1,17 +0,0 @@ -import '../src/assets/css/tailwind.css'; -import '../src/assets/css/index.css'; -import resolveConfig from 'tailwindcss/resolveConfig'; -import tailwindConfig from '../tailwind.config'; -import '@storybook/addon-console'; - -const fullConfig = resolveConfig(tailwindConfig); - -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - backgrounds: { - values: [ - { name: 'light', value: fullConfig.theme.colors.gray['50'] }, - { name: 'dark', value: fullConfig.theme.colors.gray['900'] }, - ], - }, -}; diff --git a/docker-compose.yml b/docker-compose.yml index 3aeceaab10..81be716696 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -13,16 +13,3 @@ services: - 8080:8080 env_file: - ./.env.development - # storybook: - # build: - # context: . - # dockerfile: Dockerfile.dev - # restart: always - # command: npm run storybook - # volumes: - # - ./:/app - # - /app/node_modules - # ports: - # - 6006:6006 - # env_file: - # - ./.env.development diff --git a/src/assets/css/global/all.css b/src/assets/css/global/all.css index 0ad26b3f92..e3d3185c69 100644 --- a/src/assets/css/global/all.css +++ b/src/assets/css/global/all.css @@ -29,10 +29,6 @@ input { @apply text-gray-900 dark:text-gray-50; } -#storybook-app { - @apply text-gray-900 dark:text-gray-50; -} - a { @apply cursor-pointer; } diff --git a/src/components/_global/BalAlert/BalAlert.stories.ts b/src/components/_global/BalAlert/BalAlert.stories.ts deleted file mode 100644 index 2f9c6387a0..0000000000 --- a/src/components/_global/BalAlert/BalAlert.stories.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import BalAlert from './BalAlert.vue'; - -export default { - component: BalAlert, - title: 'Components/BalAlert', - parameters: { - layout: 'centered', - }, - args: { - type: 'warning', - size: 'md', - title: 'A title message', - description: 'A description message', - actionLabel: 'Action', - raised: false, - }, - argTypes: { - type: { - type: { name: 'string', default: 'button' }, - control: { - type: 'select', - options: ['warning', 'error', 'info'], - }, - }, - size: { - type: { name: 'string', default: 'md' }, - control: { - type: 'select', - options: ['sm', 'md', 'lg'], - }, - }, - }, -}; - -type Props = { - type?: string; - size?: string; - title?: string; -}; - -const Template = (args: Props) => ({ - components: { BalAlert }, - setup() { - return { args }; - }, - template: generateTemplate(` - -`), -}); - -export const Primary = Template.bind({}); -// @ts-ignore -// Warning.args = { type: 'warning' }; diff --git a/src/components/_global/BalBtn/BalBtn.stories.ts b/src/components/_global/BalBtn/BalBtn.stories.ts deleted file mode 100644 index 2d151675e0..0000000000 --- a/src/components/_global/BalBtn/BalBtn.stories.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import BalBtn from './BalBtn.vue'; - -export default { - component: BalBtn, - title: 'Components/BalBtn', - parameters: { - layout: 'centered', - actions: { handles: ['click'] }, - }, - args: { - darkMode: false, - tag: 'button', - size: 'md', - color: 'primary', - label: '', - loadingLabel: 'Loading...', - }, - argTypes: { - tag: { - type: { name: 'string', default: 'button' }, - control: { - type: 'select', - options: ['button', 'a', 'div'], - }, - }, - size: { - type: { name: 'string', default: 'md' }, - control: { - type: 'select', - options: ['sm', 'md', 'lg'], - }, - }, - color: { - type: { name: 'string', default: 'primary' }, - control: { - type: 'select', - options: ['primary', 'gradient', 'gray', 'red'], - }, - }, - }, -}; - -type Props = { - tag?: string; - size?: string; - color?: string; - label?: string; - block?: boolean; - circle?: boolean; - outline?: boolean; - loading?: boolean; - loadingLabel?: string; - disabled?: boolean; -}; - -const Template = (args: Props) => ({ - components: { BalBtn }, - setup() { - return { args }; - }, - template: generateTemplate(` - - Action -`), -}); - -export const Primary = Template.bind({}); diff --git a/src/components/_global/BalCard/BalCard.stories.ts b/src/components/_global/BalCard/BalCard.stories.ts deleted file mode 100644 index 9a30385e5d..0000000000 --- a/src/components/_global/BalCard/BalCard.stories.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import BalCard from './BalCard.vue'; - -export default { - component: BalCard, - title: 'Components/BalCard', - args: { - darkMode: false, - title: '', - titleTag: 'h3', - shadow: '', - }, - argTypes: { - titleTag: { control: { type: 'select', options: ['h1', 'h2', 'h3'] } }, - shadow: { - control: { - type: 'select', - options: ['', 'none', 'sm', 'md', 'lg', 'xl', '2xl'], - }, - }, - }, -}; - -type Props = { - title?: string; - titleTag?: string; - square?: boolean; - noPad?: boolean; - shadow?: string; -}; - -const Template = (args: Props) => ({ - components: { BalCard }, - setup() { - return { args }; - }, - template: generateTemplate(` - - content -`), -}); - -export const OnlyContent = Template.bind({}); - -export const WithTitle = Template.bind({}); -// @ts-ignore -WithTitle.args = { title: 'A title' }; - -export const WithFooter = (args: Props) => ({ - components: { BalCard }, - setup() { - return { args }; - }, - template: generateTemplate(` - - Content - -`), -}); - -export const Complete = WithFooter.bind({}); -// @ts-ignore -Complete.args = { title: 'A title' }; diff --git a/src/components/_global/BalChip/BalChip.stories.ts b/src/components/_global/BalChip/BalChip.stories.ts deleted file mode 100644 index 77f1facee6..0000000000 --- a/src/components/_global/BalChip/BalChip.stories.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import BalChip from './BalChip.vue'; - -export default { - component: BalChip, - title: 'Components/BalChip', - parameters: { - layout: 'centered', - actions: { handles: ['click .close'] }, - }, - args: { - darkMode: false, - label: 'tag', - closeable: true, - size: 'md', - color: 'gray', - }, - argTypes: { - size: { - type: { name: 'string', default: 'md' }, - control: { - type: 'select', - options: ['sm', 'md', 'lg'], - }, - }, - color: { - type: { name: 'string', default: 'text' }, - control: { - type: 'select', - options: ['gray', 'gradient'], - }, - }, - }, -}; - -type Props = { - size?: string; - color?: string; -}; - -const Template = (args: Props) => ({ - components: { BalChip }, - setup() { - return { args }; - }, - template: generateTemplate(` - -`), -}); - -export const Default = Template.bind({}); diff --git a/src/components/_global/BalIcon/BalIcon.stories.ts b/src/components/_global/BalIcon/BalIcon.stories.ts deleted file mode 100644 index 271e740118..0000000000 --- a/src/components/_global/BalIcon/BalIcon.stories.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import BalIcon from './BalIcon.vue'; - -export default { - component: BalIcon, - title: 'Components/BalIcon', - parameters: { - layout: 'centered', - }, - args: { - darkMode: false, - name: 'coffee', - size: 'md', - }, - argTypes: { - size: { - type: { name: 'string', default: 'md' }, - control: { - type: 'select', - options: ['xs', 'sm', 'md', 'lg'], - }, - }, - }, -}; - -type Props = { - name?: string; - size?: string; -}; - -const Template = (args: Props) => ({ - components: { BalIcon }, - setup() { - return { args }; - }, - template: generateTemplate(` - -`), -}); - -export const Default = Template.bind({}); diff --git a/src/components/_global/BalModal/BalModal.stories.ts b/src/components/_global/BalModal/BalModal.stories.ts deleted file mode 100644 index ed3c8ab391..0000000000 --- a/src/components/_global/BalModal/BalModal.stories.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import BalModal from './BalModal.vue'; - -export default { - component: BalModal, - title: 'Components/BalModal', - args: { - title: '', - darkMode: false, - }, -}; - -type Props = { - show?: boolean; - title?: string; - noPad?: boolean; -}; - -const Template = (args: Props) => ({ - components: { BalModal }, - setup() { - return { args }; - }, - template: generateTemplate(` - - content -`), -}); - -export const Primary = Template.bind({}); -// @ts-ignore -Primary.args = { title: 'A title', show: true }; - -export const WithFooter = (args: Props) => ({ - components: { BalModal }, - setup() { - return { args }; - }, - template: generateTemplate(` - - content - -`), -}); -WithFooter.args = { title: 'A title', show: true }; diff --git a/src/components/_global/BalSelectInput/BalSelectInput.stories.ts b/src/components/_global/BalSelectInput/BalSelectInput.stories.ts deleted file mode 100644 index c55aacc9d2..0000000000 --- a/src/components/_global/BalSelectInput/BalSelectInput.stories.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { Rules } from '@/types'; - -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import BalSelectInput from './BalSelectInput.vue'; - -export default { - component: BalSelectInput, - title: 'Components/inputs/BalSelectInput', - args: { - darkMode: false, - name: 'input1', - label: 'Withdrawal type', - size: 'md', - }, - argTypes: { - size: { - type: { name: 'string', default: 'md' }, - control: { - type: 'select', - options: ['sm', 'md', 'lg'], - }, - }, - }, -}; - -type Props = { - name: string; - label: string; - size: string; - rules: Array; -}; - -const Template = (args: Props) => ({ - components: { BalSelectInput }, - setup() { - return { args }; - }, - template: generateTemplate(` - -`), -}); - -export const Default = Template.bind({}); -// @ts-ignore -Default.args = { - modelValue: 'Proportional', - options: ['Proportional', 'Custom'], -}; diff --git a/src/components/_global/BalTextInput/BalTextInput.stories.ts b/src/components/_global/BalTextInput/BalTextInput.stories.ts deleted file mode 100644 index 1e695a6582..0000000000 --- a/src/components/_global/BalTextInput/BalTextInput.stories.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import BalTextInput from './BalTextInput.vue'; - -export default { - component: BalTextInput, - title: 'Components/inputs/BalTextInput', - args: { - darkMode: false, - inputAlignRight: false, - decimalLimit: 18, - }, - argTypes: { - size: { - type: { name: 'string', default: 'md' }, - control: { - type: 'select', - options: ['sm', 'md', 'lg'], - }, - }, - type: { - type: { name: 'string', default: 'text' }, - control: { - type: 'select', - options: ['text', 'number', 'password', 'email', 'date'], - }, - }, - }, -}; - -const Template = args => ({ - components: { BalTextInput }, - setup() { - return { args }; - }, - template: generateTemplate(` -
- - -
-`), -}); - -export function isRequired() { - return v => !!v || 'is required'; -} - -export const Default = Template.bind({}); -// @ts-ignore -Default.args = { - modelValue: '', - placeholder: '0.0', - name: 'input-1', - label: 'A label', - type: 'number', - rules: [isRequired()], -}; diff --git a/src/components/_global/BalTooltip/BalTooltip.stories.ts b/src/components/_global/BalTooltip/BalTooltip.stories.ts deleted file mode 100644 index ac15d18c4d..0000000000 --- a/src/components/_global/BalTooltip/BalTooltip.stories.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { generateTemplate } from '../../../../.storybook/helpers/templates'; -import Tooltip from './BalTooltip.vue'; - -export default { - component: Tooltip, - title: 'Components/BalTooltip', - parameters: { - layout: 'centered', - }, - args: { - title: 'Tooltip', - darkMode: false, - }, -}; - -type Props = { - show?: boolean; - title?: string; - noPad?: boolean; -}; - -const Template = (args: Props) => ({ - components: { Tooltip }, - setup() { - return { args }; - }, - template: generateTemplate(` - - This can be any sort of content I want - -`), -}); - -export const DefaultTooltip = Template.bind({}); -// @ts-ignore -DefaultTooltip.args = { title: 'Tooltip', show: true }; diff --git a/src/components/_global/README.md b/src/components/_global/README.md index e8617da559..d181f259de 100644 --- a/src/components/_global/README.md +++ b/src/components/_global/README.md @@ -4,7 +4,7 @@ A set of foundational components for use throughout the UI. ## Forms -Forms are difficult to demo via the storybook UI because they include stitching together a couple of different components plus validations. So instead here is a simple example of how a form can be used: +Here is a simple example of how a form can be used: ```vue // ExampleUserForm.vue