mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-04-21 09:37:22 +00:00
chore(storybook): adding basic setup (#7329)
* chore(storybook): adding basic setup Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix: weird file movement Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix: github comments Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix(Storybook): packages.json Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix(Storybook): config files Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix: package version Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> --------- Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
This commit is contained in:
axel7083
GitHub
parent
833a273ed5
commit
49083f2b8f
13 changed files with 3726 additions and 71 deletions
|
|
@ -27,7 +27,8 @@
|
|||
"./website-argos/tsconfig.json",
|
||||
"./extensions/*/tsconfig.json",
|
||||
"./tests/playwright/tsconfig.json",
|
||||
"./tools/tsconfig.json"
|
||||
"./tools/tsconfig.json",
|
||||
"./storybook/tsconfig.json"
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"packages": [
|
||||
"packages/*",
|
||||
"extensions/*",
|
||||
"storybook",
|
||||
"website",
|
||||
"website-argos",
|
||||
"tools",
|
||||
|
|
@ -101,6 +102,8 @@
|
|||
"website:prod": "cd website && yarn run docusaurus build && yarn serve",
|
||||
"website:dev": "cd website && yarn run docusaurus start",
|
||||
"website:screenshots": "cd website-argos && yarn run screenshot",
|
||||
"storybook:dev": "cd storybook && yarn run dev",
|
||||
"storybook:build": "cd storybook && yarn run build",
|
||||
"prepare": "husky install",
|
||||
"postinstall": "playwright install"
|
||||
},
|
||||
|
|
|
|||
100
storybook/.storybook/dark.css
Normal file
100
storybook/.storybook/dark.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
@scope (.dark-scheme) {
|
||||
:scope {
|
||||
--pd-global-nav-bg: #27272a;
|
||||
--pd-global-nav-icon-notification-dot: #8b5cf6;
|
||||
--pd-global-nav-icon: #b4b4b4;
|
||||
--pd-global-nav-icon-hover: #fff;
|
||||
--pd-global-nav-icon-hover-bg: #6234b1;
|
||||
--pd-global-nav-icon-inset-bg: #18181b;
|
||||
--pd-global-nav-icon-selected: #fff;
|
||||
--pd-global-nav-icon-selected-bg: #36363d;
|
||||
--pd-global-nav-icon-selected-highlight: #8b5cf6;
|
||||
--pd-secondary-nav-bg: #222222;
|
||||
--pd-secondary-nav-header-text: #fff;
|
||||
--pd-secondary-nav-text: #e4e4e4;
|
||||
--pd-secondary-nav-text-hover: #fff;
|
||||
--pd-secondary-nav-text-hover-bg: #6234b1;
|
||||
--pd-secondary-nav-text-selected: #fff;
|
||||
--pd-secondary-nav-selected-bg: #36363d;
|
||||
--pd-secondary-nav-selected-highlight: #8b5cf6;
|
||||
--pd-secondary-nav-icon-notification-dot: #8b5cf6;
|
||||
--pd-secondary-nav-expander: #fff;
|
||||
--pd-titlebar-bg: #0f0f11;
|
||||
--pd-titlebar-text: #fff;
|
||||
--pd-titlebar-icon: #fff;
|
||||
--pd-content-breadcrumb: #b4b4b4;
|
||||
--pd-content-breadcrumb-2: #ad8bfa;
|
||||
--pd-content-header: #fff;
|
||||
--pd-content-header-icon: #b4b4b4;
|
||||
--pd-content-card-header-text: #f6f6f6;
|
||||
--pd-content-card-bg: #18181b;
|
||||
--pd-content-card-hover-bg: #36363d;
|
||||
--pd-content-card-text: #d1d1d1;
|
||||
--pd-content-card-title: #d1d1d1;
|
||||
--pd-content-card-light-title: #9a9a9a;
|
||||
--pd-content-card-inset-bg: #0f0f11;
|
||||
--pd-content-bg: #222222;
|
||||
--pd-content-card-icon: #d1d1d1;
|
||||
--pd-content-divider: #4a4b4f;
|
||||
--pd-content-card-carousel-card-bg: #27272a;
|
||||
--pd-content-card-carousel-card-hover-bg: #36363d;
|
||||
--pd-content-card-carousel-card-header-text: #f6f6f6;
|
||||
--pd-content-card-carousel-card-text: #d1d1d1;
|
||||
--pd-content-card-carousel-nav: #9a9a9a;
|
||||
--pd-content-card-carousel-hover-nav: #b4b4b4;
|
||||
--pd-content-card-carousel-disabled-nav: #222222;
|
||||
--pd-invert-content-bg: #18181b;
|
||||
--pd-invert-content-header-text: #fff;
|
||||
--pd-invert-content-header2-text: #fff;
|
||||
--pd-invert-content-card-bg: #27272a;
|
||||
--pd-invert-content-card-header-text: #fff;
|
||||
--pd-invert-content-card-text: #e4e4e4;
|
||||
--pd-invert-content-button-active: #8b5cf6;
|
||||
--pd-invert-content-button-inactive: #767676;
|
||||
--pd-invert-content-info-icon: #8b5cf6;
|
||||
--pd-card-bg: #18181b;
|
||||
--pd-card-header-text: #fff;
|
||||
--pd-card-text: #e4e4e4;
|
||||
--pd-input-field-bg: transparent;
|
||||
--pd-input-field-focused-bg: #0f0f11;
|
||||
--pd-input-field-disabled-bg: #0f0f11;
|
||||
--pd-input-field-hover-bg: transparent;
|
||||
--pd-input-field-focused-text: #fff;
|
||||
--pd-input-field-error-text: #f86847;
|
||||
--pd-input-field-disabled-text: #818181;
|
||||
--pd-input-field-hover-text: #818181;
|
||||
--pd-input-field-placeholder-text: #818181;
|
||||
--pd-input-field-stroke: #4a4b4f;
|
||||
--pd-input-field-hover-stroke: #ad8bfa;
|
||||
--pd-input-field-stroke-error: #f86847;
|
||||
--pd-input-field-stroke-readonly: #707073;
|
||||
--pd-input-field-icon: #c8c8c8;
|
||||
--pd-input-field-focused-icon: #c8c8c8;
|
||||
--pd-input-field-disabled-icon: #c8c8c8;
|
||||
--pd-input-field-hover-icon: #c8c8c8;
|
||||
--pd-input-checkbox-disabled: #aaabac;
|
||||
--pd-input-checkbox-indeterminate: #8b5cf6;
|
||||
--pd-input-checkbox-focused-indeterminate: #ad8bfa;
|
||||
--pd-input-checkbox-checked: #8b5cf6;
|
||||
--pd-input-checkbox-focused-checked: #ad8bfa;
|
||||
--pd-input-checkbox-unchecked: #d1d1d1;
|
||||
--pd-input-checkbox-focused-unchecked: #ad8bfa;
|
||||
--pd-input-toggle-off-bg: #818181;
|
||||
--pd-input-toggle-off-focused-bg: #6234b1;
|
||||
--pd-input-toggle-on-bg: #8b5cf6;
|
||||
--pd-input-toggle-on-focused-bg: #ad8bfa;
|
||||
--pd-input-toggle-switch: #fff;
|
||||
--pd-input-toggle-focused-switch: #fff;
|
||||
--pd-input-toggle-on-text: #fff;
|
||||
--pd-input-toggle-off-text: #aaabac;
|
||||
--pd-input-toggle-off-disabled-bg: #0f0f11;
|
||||
--pd-input-toggle-on-disabled-bg: #0f0f11;
|
||||
--pd-input-toggle-disabled-switch: #818181;
|
||||
--pd-table-header-text: #b4b4b4;
|
||||
--pd-table-header-unsorted: #5c5c5c;
|
||||
--pd-table-body-text: #aaabac;
|
||||
--pd-table-body-text-highlight: #e4e4e4;
|
||||
--pd-table-body-text-sub-secondary: #ad8bfa;
|
||||
--pd-table-body-text-sub-highlight: #d1d1d1;
|
||||
}
|
||||
}
|
||||
100
storybook/.storybook/light.css
Normal file
100
storybook/.storybook/light.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
@scope (.light-scheme) {
|
||||
:scope {
|
||||
--pd-global-nav-bg: #f6f6f6;
|
||||
--pd-global-nav-icon-notification-dot: #6d48bf;
|
||||
--pd-global-nav-icon: #5c5c5c;
|
||||
--pd-global-nav-icon-hover: #4d2d87;
|
||||
--pd-global-nav-icon-hover-bg: #bfa7f6;
|
||||
--pd-global-nav-icon-inset-bg: #d3d3f2;
|
||||
--pd-global-nav-icon-selected: #4d2d87;
|
||||
--pd-global-nav-icon-selected-bg: #bfa7f6;
|
||||
--pd-global-nav-icon-selected-highlight: #6d48bf;
|
||||
--pd-secondary-nav-bg: #e7e8f8;
|
||||
--pd-secondary-nav-header-text: #0f0f11;
|
||||
--pd-secondary-nav-text: #222222;
|
||||
--pd-secondary-nav-text-hover: #4d2d87;
|
||||
--pd-secondary-nav-text-hover-bg: #bfa7f6;
|
||||
--pd-secondary-nav-text-selected: #4d2d87;
|
||||
--pd-secondary-nav-selected-bg: #bfa7f6;
|
||||
--pd-secondary-nav-selected-highlight: #6d48bf;
|
||||
--pd-secondary-nav-icon-notification-dot: #6d48bf;
|
||||
--pd-secondary-nav-expander: #222222;
|
||||
--pd-titlebar-bg: #f9fafb;
|
||||
--pd-titlebar-text: #37255d;
|
||||
--pd-titlebar-icon: #37255d;
|
||||
--pd-content-breadcrumb: #37255d;
|
||||
--pd-content-breadcrumb-2: #6d48bf;
|
||||
--pd-content-header: #0f0f11;
|
||||
--pd-content-header-icon: #6234b1;
|
||||
--pd-content-card-header-text: #0f0f11;
|
||||
--pd-content-card-bg: #f9fafb;
|
||||
--pd-content-card-hover-bg: #e2d6fe;
|
||||
--pd-content-card-text: #37255d;
|
||||
--pd-content-card-title: #0f0f11;
|
||||
--pd-content-card-light-title: #37255d;
|
||||
--pd-content-card-inset-bg: #d3d3f2;
|
||||
--pd-content-bg: #e4e4e4;
|
||||
--pd-content-card-icon: #37255d;
|
||||
--pd-content-divider: #aaabac;
|
||||
--pd-content-card-carousel-card-bg: #e4e4e4;
|
||||
--pd-content-card-carousel-card-hover-bg: #efefef;
|
||||
--pd-content-card-carousel-card-header-text: #0f0f11;
|
||||
--pd-content-card-carousel-card-text: #37255d;
|
||||
--pd-content-card-carousel-nav: #d1d1d1;
|
||||
--pd-content-card-carousel-hover-nav: #b4b4b4;
|
||||
--pd-content-card-carousel-disabled-nav: #efefef;
|
||||
--pd-invert-content-bg: #f9fafb;
|
||||
--pd-invert-content-header-text: #0f0f11;
|
||||
--pd-invert-content-header2-text: #0f0f11;
|
||||
--pd-invert-content-card-bg: #e4e4e4;
|
||||
--pd-invert-content-card-header-text: #0f0f11;
|
||||
--pd-invert-content-card-text: #222222;
|
||||
--pd-invert-content-button-active: #6d48bf;
|
||||
--pd-invert-content-button-inactive: #767676;
|
||||
--pd-invert-content-info-icon: #6d48bf;
|
||||
--pd-card-bg: #e4e4e4;
|
||||
--pd-card-header-text: #0f0f11;
|
||||
--pd-card-text: #222222;
|
||||
--pd-input-field-bg: transparent;
|
||||
--pd-input-field-focused-bg: #f6f6f6;
|
||||
--pd-input-field-disabled-bg: #0f0f11;
|
||||
--pd-input-field-hover-bg: transparent;
|
||||
--pd-input-field-focused-text: #818181;
|
||||
--pd-input-field-error-text: #f86847;
|
||||
--pd-input-field-disabled-text: #818181;
|
||||
--pd-input-field-hover-text: #818181;
|
||||
--pd-input-field-placeholder-text: #818181;
|
||||
--pd-input-field-stroke: #4a4b4f;
|
||||
--pd-input-field-hover-stroke: #ad8bfa;
|
||||
--pd-input-field-stroke-error: #f86847;
|
||||
--pd-input-field-stroke-readonly: #707073;
|
||||
--pd-input-field-icon: #c8c8c8;
|
||||
--pd-input-field-focused-icon: #c8c8c8;
|
||||
--pd-input-field-disabled-icon: #c8c8c8;
|
||||
--pd-input-field-hover-icon: #c8c8c8;
|
||||
--pd-input-checkbox-disabled: #5c5c5c;
|
||||
--pd-input-checkbox-indeterminate: #37255d;
|
||||
--pd-input-checkbox-focused-indeterminate: #6234b1;
|
||||
--pd-input-checkbox-checked: #37255d;
|
||||
--pd-input-checkbox-focused-checked: #6234b1;
|
||||
--pd-input-checkbox-unchecked: #37255d;
|
||||
--pd-input-checkbox-focused-unchecked: #6234b1;
|
||||
--pd-input-toggle-off-bg: #818181;
|
||||
--pd-input-toggle-off-focused-bg: #6234b1;
|
||||
--pd-input-toggle-on-bg: #8b5cf6;
|
||||
--pd-input-toggle-on-focused-bg: #6d48bf;
|
||||
--pd-input-toggle-switch: #000;
|
||||
--pd-input-toggle-focused-switch: #000;
|
||||
--pd-input-toggle-on-text: #000;
|
||||
--pd-input-toggle-off-text: #818181;
|
||||
--pd-input-toggle-off-disabled-bg: #818181;
|
||||
--pd-input-toggle-on-disabled-bg: #818181;
|
||||
--pd-input-toggle-disabled-switch: #0f0f11;
|
||||
--pd-table-header-text: #5c5c5c;
|
||||
--pd-table-header-unsorted: #464649;
|
||||
--pd-table-body-text: #464649;
|
||||
--pd-table-body-text-highlight: #464649;
|
||||
--pd-table-body-text-sub-secondary: #6234b1;
|
||||
--pd-table-body-text-sub-highlight: #5c5c5c;
|
||||
}
|
||||
}
|
||||
62
storybook/.storybook/main.ts
Normal file
62
storybook/.storybook/main.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/**********************************************************************
|
||||
* Copyright (C) 2024 Red Hat, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
***********************************************************************/
|
||||
|
||||
import type { StorybookConfig } from '@storybook/svelte-vite';
|
||||
import { join, dirname } from 'node:path';
|
||||
|
||||
/**
|
||||
* This function is used to resolve the absolute path of a package.
|
||||
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
|
||||
*/
|
||||
function getAbsolutePath(value: string): any {
|
||||
return dirname(require.resolve(join(value, 'package.json')));
|
||||
}
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
|
||||
addons: [
|
||||
getAbsolutePath('@storybook/addon-links'),
|
||||
getAbsolutePath('@storybook/addon-essentials'),
|
||||
getAbsolutePath('@storybook/addon-interactions'),
|
||||
// Do not use getAbsolutePath
|
||||
'@storybook/addon-svelte-csf',
|
||||
'storybook-dark-mode',
|
||||
],
|
||||
typescript: {
|
||||
check: true,
|
||||
},
|
||||
framework: {
|
||||
name: getAbsolutePath('@storybook/svelte-vite'),
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: 'tag',
|
||||
},
|
||||
// @ts-ignore
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: {
|
||||
tailwindcss: { config: 'tailwind.config.js' },
|
||||
'postcss-import': {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
62
storybook/.storybook/preview.ts
Normal file
62
storybook/.storybook/preview.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/**********************************************************************
|
||||
* Copyright (C) 2024 Red Hat, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
***********************************************************************/
|
||||
|
||||
import type { Preview } from '@storybook/svelte';
|
||||
import 'tailwindcss/tailwind.css';
|
||||
import { createElement } from 'react';
|
||||
import { useDarkMode } from 'storybook-dark-mode';
|
||||
import { themes } from '@storybook/theming';
|
||||
import { DocsContainer } from '@storybook/addon-docs';
|
||||
import './dark.css';
|
||||
import './light.css';
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
darkMode: {
|
||||
current: 'light',
|
||||
darkClass: 'dark-scheme',
|
||||
lightClass: 'light-scheme',
|
||||
dark: {
|
||||
...themes.dark,
|
||||
appPreviewBg: 'transparent',
|
||||
},
|
||||
light: {
|
||||
...themes.light,
|
||||
appPreviewBg: 'transparent',
|
||||
},
|
||||
stylePreview: true,
|
||||
},
|
||||
docs: {
|
||||
container: props => {
|
||||
const isDark = useDarkMode();
|
||||
const currentProps = { ...props };
|
||||
currentProps.theme = isDark ? themes.dark : themes.light;
|
||||
return createElement(DocsContainer, currentProps);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
52
storybook/package.json
Normal file
52
storybook/package.json
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"name": "storybook",
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"dev": "storybook dev -p 6006",
|
||||
"build": "storybook build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^4.0.0",
|
||||
"svelte-fa": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.5.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@podman-desktop/ui-svelte": "^0.0.1",
|
||||
"eslint": "^9.3.0",
|
||||
"svelte-fa": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "^8.1.4",
|
||||
"@storybook/addon-interactions": "^8.1.4",
|
||||
"@storybook/addon-links": "^8.1.4",
|
||||
"@storybook/addon-svelte-csf": "^4.1.1",
|
||||
"@storybook/blocks": "^8.1.4",
|
||||
"@storybook/svelte": "^8.1.4",
|
||||
"@storybook/svelte-vite": "^8.1.4",
|
||||
"@storybook/test": "^8.1.4",
|
||||
"@sveltejs/package": "^2.2.6",
|
||||
"@sveltejs/vite-plugin-svelte": "3.1.1",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"@typescript-eslint/eslint-plugin": "7.11.0",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"postcss": "^8.4.35",
|
||||
"postcss-load-config": "^5.0.3",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.3.1",
|
||||
"storybook": "^8.0.9",
|
||||
"storybook-dark-mode": "^4.0.1",
|
||||
"svelte": "4.2.17",
|
||||
"svelte-check": "^3.6.6",
|
||||
"svelte-preprocess": "^5.1.3",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.2.11",
|
||||
"vitest": "^1.6.0"
|
||||
}
|
||||
}
|
||||
68
storybook/src/stories/Button.stories.svelte
Normal file
68
storybook/src/stories/Button.stories.svelte
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<script context="module" lang="ts">
|
||||
import { faBell } from '@fortawesome/free-regular-svg-icons';
|
||||
import { Button } from '@podman-desktop/ui-svelte';
|
||||
import { Story, Template } from '@storybook/addon-svelte-csf';
|
||||
|
||||
export const meta = {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
tags: ['autodocs'],
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<Button {...args}>{args.content}</Button>
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Primary"
|
||||
args="{{
|
||||
type: 'primary',
|
||||
content: 'primary',
|
||||
}}" />
|
||||
|
||||
<Story
|
||||
name="Secondary"
|
||||
args="{{
|
||||
type: 'secondary',
|
||||
content: 'secondary',
|
||||
}}" />
|
||||
|
||||
<Story
|
||||
name="Primary"
|
||||
args="{{
|
||||
type: 'primary',
|
||||
content: 'primary',
|
||||
}}" />
|
||||
|
||||
<Story
|
||||
name="Danger"
|
||||
args="{{
|
||||
type: 'danger',
|
||||
content: 'danger',
|
||||
}}" />
|
||||
|
||||
<Story
|
||||
name="With icon"
|
||||
args="{{
|
||||
type: 'primary',
|
||||
content: 'with icon',
|
||||
icon: faBell,
|
||||
}}" />
|
||||
|
||||
<Story
|
||||
name="Disabled"
|
||||
args="{{
|
||||
type: 'primary',
|
||||
content: 'disabled',
|
||||
disabled: true,
|
||||
}}" />
|
||||
|
||||
<Story
|
||||
name="Loading"
|
||||
args="{{
|
||||
type: 'primary',
|
||||
content: 'loading',
|
||||
inProgress: true,
|
||||
icon: faBell,
|
||||
}}" />
|
||||
33
storybook/svelte.config.js
Normal file
33
storybook/svelte.config.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/**********************************************************************
|
||||
* Copyright (C) 2024 Red Hat, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
***********************************************************************/
|
||||
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import { dirname, join } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
export default {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: sveltePreprocess({
|
||||
postcss: {
|
||||
configFilePath: join(__dirname, 'postcss.config.cjs'),
|
||||
},
|
||||
}),
|
||||
};
|
||||
7
storybook/tailwind.config.js
Normal file
7
storybook/tailwind.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import config from '../tailwind.config.cjs';
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
...config,
|
||||
content: ['./src/**/*.{svelte,ts,css}', '../packages/ui/**/*.{svelte,ts,css}'],
|
||||
};
|
||||
23
storybook/tsconfig.json
Normal file
23
storybook/tsconfig.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"resolveJsonModule": true,
|
||||
"preserveValueImports": false,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"/@/*": ["./src/*"]
|
||||
},
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||
* Note that setting allowJs false does not prevent the use
|
||||
* of JS in `.svelte` files.
|
||||
*/
|
||||
"allowJs": true,
|
||||
"checkJs": true
|
||||
},
|
||||
"include": ["src/**/*.d.ts", ".storybook", "src/**/*.ts", "src/**/*.svelte"]
|
||||
}
|
||||
72
storybook/vite.config.js
Normal file
72
storybook/vite.config.js
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/**********************************************************************
|
||||
* Copyright (C) 2024 Red Hat, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
***********************************************************************/
|
||||
|
||||
/* eslint-env node */
|
||||
import { join } from 'path';
|
||||
import * as path from 'path';
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||
import { defineConfig } from 'vite';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { coverageConfig } from '../vitest-shared-extensions.config';
|
||||
|
||||
let filename = fileURLToPath(import.meta.url);
|
||||
const PACKAGE_ROOT = path.dirname(filename);
|
||||
const PACKAGE_NAME = 'storybook';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
mode: process.env.MODE,
|
||||
root: PACKAGE_ROOT,
|
||||
resolve: {
|
||||
alias: {
|
||||
'/@/': join(PACKAGE_ROOT, 'src') + '/',
|
||||
},
|
||||
},
|
||||
plugins: [svelte({ hot: !process.env.VITEST })],
|
||||
test: {
|
||||
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
alias: [
|
||||
// https://github.com/vitest-dev/vitest/issues/2834
|
||||
{ find: /^svelte$/, replacement: 'svelte/internal' },
|
||||
],
|
||||
deps: {
|
||||
inline: ['moment'],
|
||||
},
|
||||
...coverageConfig(PACKAGE_ROOT, PACKAGE_NAME),
|
||||
},
|
||||
base: '',
|
||||
server: {
|
||||
fs: {
|
||||
strict: true,
|
||||
},
|
||||
},
|
||||
build: {
|
||||
sourcemap: true,
|
||||
outDir: 'dist',
|
||||
assetsDir: '.',
|
||||
lib: {
|
||||
entry: 'src/lib/index.ts',
|
||||
formats: ['es'],
|
||||
},
|
||||
|
||||
emptyOutDir: true,
|
||||
reportCompressedSize: false,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue