@lotte-innovate/ui-component-test 0.1.64 → 0.1.66

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,3 @@
1
+ import type { StorybookConfig } from '@storybook/nextjs';
2
+ declare const config: StorybookConfig;
3
+ export default config;
@@ -0,0 +1,22 @@
1
+ var config = {
2
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
3
+ addons: [
4
+ '@storybook/addon-links',
5
+ '@storybook/addon-essentials',
6
+ '@chromatic-com/storybook',
7
+ '@storybook/addon-interactions',
8
+ '@storybook/addon-styling-webpack',
9
+ '@storybook/addon-a11y',
10
+ 'storybook-dark-mode',
11
+ 'storybook-addon-deep-controls',
12
+ ],
13
+ framework: {
14
+ name: '@storybook/nextjs',
15
+ options: {},
16
+ },
17
+ docs: {
18
+ autodocs: 'tag',
19
+ },
20
+ staticDirs: ['../public'],
21
+ };
22
+ export default config;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,12 @@
1
+ import { addons } from '@storybook/manager-api';
2
+ import { create } from '@storybook/theming';
3
+ import logo from '../src/stories/assets/logo.png';
4
+ var lightTheme = create({
5
+ base: 'light', // 밝은 테마 설정
6
+ brandImage: logo,
7
+ brandTitle: '롯데이노베이트',
8
+ brandUrl: '/', // 로고 클릭 시 이동 페이지
9
+ });
10
+ addons.setConfig({
11
+ theme: lightTheme,
12
+ });
@@ -0,0 +1,8 @@
1
+ import type { Preview } from '@storybook/react';
2
+ import '../src/app/globals.css';
3
+ import '../src/app/styles.css';
4
+ import '../src/app/stories.css';
5
+ import 'tailwindcss/tailwind.css';
6
+ declare const preview: Preview;
7
+ export default preview;
8
+ export declare const decorators: ((Story: any, context: any) => import("react/jsx-runtime").JSX.Element)[];
@@ -0,0 +1,81 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { useEffect } from 'react';
14
+ import { themes } from '@storybook/theming';
15
+ import { useDarkMode } from 'storybook-dark-mode';
16
+ import '../src/app/globals.css';
17
+ import '../src/app/styles.css';
18
+ import '../src/app/stories.css';
19
+ import 'tailwindcss/tailwind.css';
20
+ var preview = {
21
+ parameters: {
22
+ controls: {
23
+ matchers: {
24
+ color: /(background|color)$/i,
25
+ date: /Date$/i,
26
+ },
27
+ },
28
+ options: {
29
+ storySort: {
30
+ method: 'alphabetical',
31
+ order: [
32
+ 'Welcome',
33
+ 'Typography',
34
+ 'Component',
35
+ 'Chart',
36
+ 'Light Color',
37
+ 'Dark Color',
38
+ 'Light Alpha Color',
39
+ 'Dark Alpha Color',
40
+ ],
41
+ },
42
+ },
43
+ docs: {
44
+ theme: themes.light,
45
+ },
46
+ darkMode: {
47
+ dark: __assign(__assign({}, themes.dark), { appBg: '#272a2d', textColor: '#edeef0' }),
48
+ light: __assign(__assign({}, themes.light), { appBg: 'white', textColor: '#2E3438' }),
49
+ },
50
+ backgrounds: { disable: true },
51
+ deepControls: { enabled: true },
52
+ },
53
+ };
54
+ export default preview;
55
+ var changeClassOnBody = function (oldClassName, newClassName) {
56
+ var classList = document.body.classList;
57
+ if (classList.contains(oldClassName)) {
58
+ classList.replace(oldClassName, newClassName);
59
+ }
60
+ };
61
+ var withBackground = function (Story, context) {
62
+ var isDarkMode = useDarkMode();
63
+ useEffect(function () {
64
+ if (isDarkMode) {
65
+ changeClassOnBody('light', 'dark');
66
+ }
67
+ else {
68
+ changeClassOnBody('dark', 'light');
69
+ }
70
+ var docsStoryElements = document.querySelectorAll('.docs-story');
71
+ docsStoryElements.forEach(function (element) {
72
+ element.style.backgroundColor = isDarkMode ? '#111113' : 'white';
73
+ });
74
+ docsStoryElements = document.querySelectorAll('.sb-show-main');
75
+ docsStoryElements.forEach(function (element) {
76
+ element.style.backgroundColor = isDarkMode ? '#111113' : 'white';
77
+ });
78
+ }, [isDarkMode]);
79
+ return _jsx(Story, __assign({}, context));
80
+ };
81
+ export var decorators = [withBackground];