├── .gitignore ├── .prettierignore ├── src ├── IOptions.ts ├── index.ts ├── stories │ ├── assets │ │ ├── github-logo.png │ │ ├── code-brackets.svg │ │ └── colors.svg │ ├── utils.ts │ ├── Introduction.stories.mdx │ └── Timetable.stories.ts ├── ITimeline.ts ├── Timeline.ts ├── templates.ts ├── index.html ├── index.css └── Timetable.ts ├── docs ├── favicon.ico ├── static │ └── media │ │ ├── github-logo.b039b2d8.png │ │ ├── code-brackets.2e1112d7.svg │ │ └── colors.a4bd0486.svg ├── main.a0a63ef2.iframe.bundle.js.LICENSE.txt ├── 272.183a3589.iframe.bundle.js.LICENSE.txt ├── 691.c3763c49c05513e4b09c.manager.bundle.js.LICENSE.txt ├── 142.1a57d80e.iframe.bundle.js.LICENSE.txt ├── 142.ffe48afc0f2491651726.manager.bundle.js.LICENSE.txt ├── main.5f0702b00412b16621ef.manager.bundle.js ├── 935.d5bcabf6.iframe.bundle.js.LICENSE.txt ├── project.json ├── 295.36f1b828a5aacf1c1279.manager.bundle.js ├── 566.4f92258f.iframe.bundle.js.LICENSE.txt ├── 566.516db255c453b0f37198.manager.bundle.js.LICENSE.txt ├── 826.089662b3.iframe.bundle.js.LICENSE.txt ├── index.html ├── 177.6f4f2421d44599bc2a1d.manager.bundle.js.LICENSE.txt ├── 701.0e5a8a49.iframe.bundle.js ├── runtime~main.9603c75b.iframe.bundle.js ├── runtime~main.ec9e680b4b28f7a379fe.manager.bundle.js ├── 551.b377d91b04a23bd3a7cd.manager.bundle.js ├── 551.63ece5c9.iframe.bundle.js ├── iframe.html └── 32.828162f86cbc9f70ce7f.manager.bundle.js ├── .husky └── pre-commit ├── .prettierrc.js ├── .github └── ISSUE_TEMPLATE │ ├── custom.md │ ├── feature_request.md │ └── bug_report.md ├── .storybook ├── preview.js └── main.js ├── .eslintrc.js ├── tsconfig.json ├── types └── index.d.ts ├── LICENSE ├── README.md ├── webpack.config.js ├── dist └── index.html ├── package.json ├── CODE_OF_CONDUCT.md ├── test ├── Timetable.test.ts └── __snapshots__ │ └── Timetable.test.ts.snap ├── markup └── index.html └── jest.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | docs 2 | dist 3 | docs-html-demo -------------------------------------------------------------------------------- /src/IOptions.ts: -------------------------------------------------------------------------------- 1 | export interface IOptions { 2 | startHour?: number 3 | } 4 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/youjung-hong/my-timetable/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | yarn test 5 | npx lint-staged 6 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { Timetable } from './Timetable' 2 | import './index.css' 3 | 4 | export default Timetable 5 | -------------------------------------------------------------------------------- /src/stories/assets/github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/youjung-hong/my-timetable/HEAD/src/stories/assets/github-logo.png -------------------------------------------------------------------------------- /docs/static/media/github-logo.b039b2d8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/youjung-hong/my-timetable/HEAD/docs/static/media/github-logo.b039b2d8.png -------------------------------------------------------------------------------- /src/ITimeline.ts: -------------------------------------------------------------------------------- 1 | export interface ITimeline { 2 | id: number 3 | color: string 4 | startAt: string 5 | endAt: string 6 | meta?: any 7 | } 8 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tabWidth: 2, 3 | useTabs: false, 4 | printWidth: 80, 5 | semi: false, 6 | trailingComma: 'all', 7 | singleQuote: true, 8 | } 9 | -------------------------------------------------------------------------------- /src/stories/utils.ts: -------------------------------------------------------------------------------- 1 | export async function sleep(ms?: number): Promise { 2 | return await new Promise((resolve) => { 3 | setTimeout(resolve, ms) 4 | }) 5 | } 6 | -------------------------------------------------------------------------------- /docs/main.a0a63ef2.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: '^on[A-Z].*' }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /docs/272.183a3589.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * 4 | * @license MIT 5 | * @author Lea Verou 6 | * @namespace 7 | * @public 8 | */ 9 | -------------------------------------------------------------------------------- /docs/691.c3763c49c05513e4b09c.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * 4 | * @license MIT 5 | * @author Lea Verou 6 | * @namespace 7 | * @public 8 | */ 9 | -------------------------------------------------------------------------------- /docs/142.1a57d80e.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * OverlayScrollbars 3 | * https://github.com/KingSora/OverlayScrollbars 4 | * 5 | * Version: 1.13.0 6 | * 7 | * Copyright KingSora | Rene Haas. 8 | * https://github.com/KingSora 9 | * 10 | * Released under the MIT license. 11 | * Date: 02.08.2020 12 | */ 13 | -------------------------------------------------------------------------------- /docs/142.ffe48afc0f2491651726.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * OverlayScrollbars 3 | * https://github.com/KingSora/OverlayScrollbars 4 | * 5 | * Version: 1.13.0 6 | * 7 | * Copyright KingSora | Rene Haas. 8 | * https://github.com/KingSora 9 | * 10 | * Released under the MIT license. 11 | * Date: 02.08.2020 12 | */ 13 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], 3 | addons: [ 4 | '@storybook/addon-links', 5 | '@storybook/addon-essentials', 6 | '@storybook/addon-interactions', 7 | ], 8 | framework: '@storybook/html', 9 | core: { 10 | builder: '@storybook/builder-webpack5', 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | node: true, 6 | }, 7 | extends: ['standard-with-typescript', 'prettier'], 8 | overrides: [], 9 | parserOptions: { 10 | ecmaVersion: 'latest', 11 | sourceType: 'module', 12 | project: ['./tsconfig.json'], 13 | }, 14 | rules: { 15 | 'comma-dangle': ['error', 'always-multiline'], 16 | }, 17 | } 18 | -------------------------------------------------------------------------------- /src/Timeline.ts: -------------------------------------------------------------------------------- 1 | import { ITimeline } from './ITimeline' 2 | 3 | export class Timeline { 4 | id: number 5 | color: string 6 | startAt: Date 7 | endAt: Date 8 | meta?: any 9 | 10 | constructor(data: ITimeline) { 11 | this.id = data.id 12 | this.color = data.color 13 | this.startAt = new Date(data.startAt) 14 | this.endAt = new Date(data.endAt) 15 | this.meta = data.meta 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/main.5f0702b00412b16621ef.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunkmy_timetable=self.webpackChunkmy_timetable||[]).push([[179],{72006:()=>{},24654:()=>{}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[177],(()=>(__webpack_exec__(30091),__webpack_exec__(33735),__webpack_exec__(78295),__webpack_exec__(15887),__webpack_exec__(59288),__webpack_exec__(10566),__webpack_exec__(50213),__webpack_exec__(75259),__webpack_exec__(57464),__webpack_exec__(10165),__webpack_exec__(13457),__webpack_exec__(405))));__webpack_require__.O()}]); -------------------------------------------------------------------------------- /docs/935.d5bcabf6.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** @license React v0.19.1 2 | * scheduler.production.min.js 3 | * 4 | * Copyright (c) Facebook, Inc. and its affiliates. 5 | * 6 | * This source code is licensed under the MIT license found in the 7 | * LICENSE file in the root directory of this source tree. 8 | */ 9 | 10 | /** @license React v16.14.0 11 | * react-dom.production.min.js 12 | * 13 | * Copyright (c) Facebook, Inc. and its affiliates. 14 | * 15 | * This source code is licensed under the MIT license found in the 16 | * LICENSE file in the root directory of this source tree. 17 | */ 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /docs/project.json: -------------------------------------------------------------------------------- 1 | {"generatedAt":1661523959599,"builder":{"name":"@storybook/builder-webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.9","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.9"},"@storybook/builder-webpack5":{"version":"6.5.9"},"@storybook/html":{"version":"6.5.9"},"@storybook/jest":{"version":"0.0.10"},"@storybook/manager-webpack5":{"version":"6.5.9"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"html"},"addons":{"@storybook/addon-links":{"version":"6.5.9"},"@storybook/addon-essentials":{"version":"6.5.9"},"@storybook/addon-interactions":{"version":"6.5.10"}}} 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "incremental": true /* Enable incremental compilation */, 4 | "esModuleInterop": true /* Enables intero between CommonJS and ES */, 5 | // "skipLibCheck": true, /* Skip type checking of declaration files. */ 6 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently */, 7 | "outDir": "./dist/", 8 | "strict": true, 9 | "sourceMap": true, 10 | "module": "CommonJS" /* 'none', 'commonjs', 'amd', 'system', etc */, 11 | "target": "ES2016", 12 | "moduleResolution": "node", 13 | "emitDecoratorMetadata": true, 14 | "experimentalDecorators": true, 15 | "lib": ["ES2016", "DOM"], 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true 18 | }, 19 | "include": ["src/**/*", "test/**/*"] 20 | } 21 | -------------------------------------------------------------------------------- /docs/295.36f1b828a5aacf1c1279.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunkmy_timetable=self.webpackChunkmy_timetable||[]).push([[295],{19295:module=>{module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]); -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /docs/566.4f92258f.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google Inc. All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | /** 10 | * @license 11 | * Copyright Google Inc. All Rights Reserved. 12 | * 13 | * Use of this source code is governed by an MIT-style license that can be 14 | * found in the LICENSE file at https://angular.io/license 15 | */ 16 | 17 | /** 18 | * @license 19 | * Copyright Google Inc. All Rights Reserved. 20 | * 21 | * Use of this source code is governed by an MIT-style license that can be 22 | * found in the LICENSE file at https://angular.io/license 23 | */ 24 | 25 | /** 26 | * @license 27 | * Copyright Google Inc. All Rights Reserved. 28 | * 29 | * Use of this source code is governed by an MIT-style license that can be 30 | * found in the LICENSE file at https://angular.io/license 31 | */ 32 | -------------------------------------------------------------------------------- /docs/566.516db255c453b0f37198.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google Inc. All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | /** 10 | * @license 11 | * Copyright Google Inc. All Rights Reserved. 12 | * 13 | * Use of this source code is governed by an MIT-style license that can be 14 | * found in the LICENSE file at https://angular.io/license 15 | */ 16 | 17 | /** 18 | * @license 19 | * Copyright Google Inc. All Rights Reserved. 20 | * 21 | * Use of this source code is governed by an MIT-style license that can be 22 | * found in the LICENSE file at https://angular.io/license 23 | */ 24 | 25 | /** 26 | * @license 27 | * Copyright Google Inc. All Rights Reserved. 28 | * 29 | * Use of this source code is governed by an MIT-style license that can be 30 | * found in the LICENSE file at https://angular.io/license 31 | */ 32 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | // Generated by dts-bundle-generator v6.11.0 2 | 3 | export interface IOptions { 4 | startHour?: number 5 | } 6 | export interface ITimeline { 7 | id: number 8 | color: string 9 | startAt: string 10 | endAt: string 11 | meta?: any 12 | } 13 | declare class Timeline { 14 | id: number 15 | color: string 16 | startAt: Date 17 | endAt: Date 18 | meta?: any 19 | constructor(data: ITimeline) 20 | } 21 | declare class Timetable { 22 | private rootElement 23 | private hourElements 24 | private readonly timelines 25 | private readonly options 26 | constructor( 27 | rootElement: HTMLElement, 28 | timelines?: ITimeline[], 29 | options?: IOptions, 30 | ) 31 | private init 32 | private draw 33 | getTimelines(): Timeline[] 34 | getTimeline(id: number): Timeline | undefined 35 | addTimelines(_timelines: ITimeline[]): void 36 | addTimeline(_timeline: ITimeline): void 37 | removeTimelines(ids: number[]): void 38 | removeTimeline(id: number): void 39 | } 40 | 41 | export { Timetable as default } 42 | 43 | export as namespace MyTimetable 44 | 45 | export {} 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Youjung Hong 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # my-timetable 2 | 3 | ![my-timetable](https://user-images.githubusercontent.com/13758710/186532935-d792a92e-1fd9-42c3-b2b5-7e8d4bc45a1c.png) 4 | 5 | ## Get Started 6 | 7 | ### Install 8 | 9 | ```html 10 | 11 | ``` 12 | 13 | ### Initialize 14 | 15 | ```js 16 | const timetable = new MyTimetable(document.getElementById('root'), [ 17 | { 18 | id: 1, 19 | color: '#51FF0D', 20 | startAt: '2022-01-02T07:15:00', 21 | endAt: '2022-01-02T07:20:00', 22 | }, 23 | ]) 24 | ``` 25 | 26 | ### Get timelines 27 | 28 | ```js 29 | timetable.getTimelines() 30 | timetable.getTimeline(1) // find by id 31 | ``` 32 | 33 | ### Create/Update timelines 34 | 35 | ```js 36 | timetable.addTimelines([ 37 | { 38 | id: 2, 39 | color: '#FF0DCA', 40 | startAt: '2022-06-20T18:10:00', 41 | endAt: '2022-06-20T18:55:00', 42 | }, 43 | ]) 44 | ``` 45 | 46 | ### Delete timelines 47 | 48 | ```js 49 | timetable.removeTimelines([1]) 50 | ``` 51 | 52 | ## Links 53 | 54 | - [Storybook](https://youjung-hong.github.io/my-timetable/) 55 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin') 2 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 3 | const path = require('path') 4 | 5 | module.exports = { 6 | entry: './src/index.ts', 7 | devtool: 'inline-source-map', 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.tsx?$/, 12 | use: 'ts-loader', 13 | exclude: /node_modules/, 14 | }, 15 | { 16 | test: /\.css$/i, 17 | use: ['style-loader', 'css-loader'], 18 | }, 19 | ], 20 | }, 21 | resolve: { 22 | extensions: ['.ts', '.js'], 23 | }, 24 | output: { 25 | filename: '[name].js', 26 | path: path.resolve(__dirname, 'dist'), 27 | library: 'MyTimetable', 28 | libraryTarget: 'umd', 29 | libraryExport: 'default', 30 | umdNamedDefine: true, 31 | }, 32 | devServer: { 33 | static: { 34 | directory: path.join(__dirname, 'dist'), 35 | }, 36 | compress: true, 37 | }, 38 | plugins: [ 39 | new HtmlWebpackPlugin({ 40 | title: 'My Timetable', 41 | template: 'src/index.html', 42 | }), 43 | // new CleanWebpackPlugin() 44 | ], 45 | } 46 | -------------------------------------------------------------------------------- /src/templates.ts: -------------------------------------------------------------------------------- 1 | import { Timeline } from './Timeline' 2 | 3 | export const TIMETABLE_INNERHTML = (_startHour: number = 0): string => { 4 | const startHour = _startHour % 24 5 | const hourRange = [] 6 | for (let i = 0; i < 24; i += 1) { 7 | hourRange.push((startHour + i) % 24) 8 | } 9 | 10 | return ( 11 | '
' + 12 | '
' + 13 | hourRange.map((hour) => `
${hour}
`).join('') + 14 | '
' + 15 | `
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
` + 24 | '
' + 25 | hourRange 26 | .map((hour) => `
`) 27 | .join('') + 28 | '
' + 29 | '
' + 30 | '
' 31 | ) 32 | } 33 | 34 | export const TIMELINE_INNERHTML = ( 35 | timeline: Timeline, 36 | left: number | string, 37 | width: number | string, 38 | ): string => 39 | `
` 40 | -------------------------------------------------------------------------------- /src/stories/assets/code-brackets.svg: -------------------------------------------------------------------------------- 1 | illustration/code-brackets -------------------------------------------------------------------------------- /docs/static/media/code-brackets.2e1112d7.svg: -------------------------------------------------------------------------------- 1 | illustration/code-brackets -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | My Timetable
-------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= htmlWebpackPlugin.options.title %> 7 | 8 | 9 |
10 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-border-color: #dadce0; 3 | --main-font-color: #444950; 4 | --main-bg-color: #ffffff; 5 | } 6 | 7 | .planner { 8 | display: flex; 9 | background-color: black; 10 | height: 720px; 11 | } 12 | .todolist { 13 | width: 70%; 14 | height: 100%; 15 | background-color: red; 16 | } 17 | .timetable { 18 | width: 100%; 19 | height: 100%; 20 | background-color: var(--main-bg-color); 21 | display: flex; 22 | font-family: sans-serif; 23 | color: var(--main-font-color); 24 | border: 1px solid var(--main-border-color); 25 | } 26 | .hours.hour-header { 27 | width: 15%; 28 | display: flex; 29 | flex-direction: column; 30 | text-align: center; 31 | } 32 | .hours.hour-header .hour { 33 | border-bottom: 1px solid var(--main-border-color); 34 | flex-grow: 1; 35 | height: 100%; 36 | padding: 5px 0; 37 | } 38 | .hours.hour-header .hour:last-child { 39 | border-bottom: none; 40 | } 41 | .contents { 42 | position: relative; 43 | width: 100%; 44 | } 45 | .contents .minutes { 46 | position: absolute; 47 | top: 0; 48 | left: 0; 49 | right: 0; 50 | bottom: 0; 51 | display: flex; 52 | } 53 | .contents .minutes .minute { 54 | flex-grow: 1; 55 | border-left: 1px solid var(--main-border-color); 56 | } 57 | .contents .hours { 58 | position: absolute; 59 | top: 0; 60 | left: 0; 61 | right: 0; 62 | bottom: 0; 63 | display: flex; 64 | flex-direction: column; 65 | } 66 | .contents .hours .hour { 67 | flex-grow: 1; 68 | border-bottom: 1px solid var(--main-border-color); 69 | position: relative; 70 | } 71 | .contents .hours .hour:last-child { 72 | border-bottom: none; 73 | } 74 | 75 | .contents .hours .hour .timeline { 76 | position: absolute; 77 | height: 100%; 78 | top: 0; 79 | } 80 | -------------------------------------------------------------------------------- /docs/826.089662b3.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * https://github.com/es-shims/es5-shim 9 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 10 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 11 | */ 12 | 13 | /*! 14 | * isobject 15 | * 16 | * Copyright (c) 2014-2017, Jon Schlinkert. 17 | * Released under the MIT License. 18 | */ 19 | 20 | /*! ***************************************************************************** 21 | Copyright (c) Microsoft Corporation. 22 | 23 | Permission to use, copy, modify, and/or distribute this software for any 24 | purpose with or without fee is hereby granted. 25 | 26 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 27 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 28 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 29 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 30 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 31 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 32 | PERFORMANCE OF THIS SOFTWARE. 33 | ***************************************************************************** */ 34 | 35 | /** @license React v16.14.0 36 | * react.production.min.js 37 | * 38 | * Copyright (c) Facebook, Inc. and its affiliates. 39 | * 40 | * This source code is licensed under the MIT license found in the 41 | * LICENSE file in the root directory of this source tree. 42 | */ 43 | 44 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 45 | 46 | //! © 2018 Angry Bytes and contributors. MIT licensed. 47 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Webpack App
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-timetable", 3 | "version": "0.0.4", 4 | "homepage": "youjung-hong.github.io/my-timetable/", 5 | "license": "MIT", 6 | "main": "./dist/main.js", 7 | "types": "./types/index.d.ts", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+ssh://git@github.com:youjung-hong/my-timetable.git" 11 | }, 12 | "keywords": [ 13 | "planner", 14 | "timetable", 15 | "time tracker", 16 | "goal tracker", 17 | "10 minutes planner" 18 | ], 19 | "scripts": { 20 | "build": "webpack --mode=production", 21 | "dev": "webpack --mode=development", 22 | "test": "jest", 23 | "storybook": "start-storybook -p 6006", 24 | "release:types": "dts-bundle-generator --umd-module-name MyTimetable ./src/index.ts -o ./types/index.d.ts", 25 | "release:docs": "rm -rf docs && npx build-storybook && mv storybook-static docs", 26 | "release": "yarn release:types && yarn release:docs && yarn build", 27 | "lint": "eslint --fix", 28 | "prettier": "prettier --write ." 29 | }, 30 | "lint-staged": { 31 | "**/*.{js,jsx,ts,tsx}": [ 32 | "npx prettier --write" 33 | ], 34 | "/src/**/*.{ts, tsx}": [ 35 | "npx eslint --fix" 36 | ] 37 | }, 38 | "devDependencies": { 39 | "@babel/core": "^7.18.6", 40 | "@storybook/addon-actions": "^6.5.9", 41 | "@storybook/addon-essentials": "^6.5.9", 42 | "@storybook/addon-interactions": "^6.5.10", 43 | "@storybook/addon-links": "^6.5.9", 44 | "@storybook/builder-webpack5": "^6.5.9", 45 | "@storybook/html": "^6.5.9", 46 | "@storybook/jest": "^0.0.10", 47 | "@storybook/manager-webpack5": "^6.5.9", 48 | "@storybook/testing-library": "^0.0.13", 49 | "@types/jest": "^28.1.3", 50 | "@typescript-eslint/eslint-plugin": "^5.0.0", 51 | "babel-loader": "^8.2.5", 52 | "clean-webpack-plugin": "^4.0.0", 53 | "css-loader": "^6.7.1", 54 | "dts-bundle-generator": "^6.11.0", 55 | "eslint": "^8.0.1", 56 | "eslint-config-prettier": "^8.5.0", 57 | "eslint-config-standard-with-typescript": "^22.0.0", 58 | "eslint-plugin-import": "^2.25.2", 59 | "eslint-plugin-n": "^15.0.0", 60 | "eslint-plugin-promise": "^6.0.0", 61 | "html-webpack-plugin": "^5.5.0", 62 | "jest": "^28.1.1", 63 | "jest-environment-jsdom": "^28.1.2", 64 | "style-loader": "^3.3.1", 65 | "ts-jest": "^28.0.5", 66 | "ts-loader": "^9.2.8", 67 | "typescript": "*", 68 | "webpack": "^5.72.0", 69 | "webpack-cli": "^4.9.2", 70 | "webpack-dev-server": "^4.9.0", 71 | "husky": "^8.0.0" 72 | }, 73 | "dependencies": {} 74 | } 75 | -------------------------------------------------------------------------------- /docs/177.6f4f2421d44599bc2a1d.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io) 9 | * 10 | * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me) 11 | * All Rights Reserved. Apache Software License 2.0 12 | * 13 | * http://www.apache.org/licenses/LICENSE-2.0 14 | */ 15 | 16 | /*! 17 | * https://github.com/es-shims/es5-shim 18 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 19 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 20 | */ 21 | 22 | /*! 23 | * isobject 24 | * 25 | * Copyright (c) 2014-2017, Jon Schlinkert. 26 | * Released under the MIT License. 27 | */ 28 | 29 | /*! ***************************************************************************** 30 | Copyright (c) Microsoft Corporation. 31 | 32 | Permission to use, copy, modify, and/or distribute this software for any 33 | purpose with or without fee is hereby granted. 34 | 35 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 36 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 37 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 38 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 39 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 40 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 41 | PERFORMANCE OF THIS SOFTWARE. 42 | ***************************************************************************** */ 43 | 44 | /*! store2 - v2.13.1 - 2021-12-20 45 | * Copyright (c) 2021 Nathan Bubna; Licensed (MIT OR GPL-3.0) */ 46 | 47 | /** 48 | * React Router DOM v6.0.2 49 | * 50 | * Copyright (c) Remix Software Inc. 51 | * 52 | * This source code is licensed under the MIT license found in the 53 | * LICENSE.md file in the root directory of this source tree. 54 | * 55 | * @license MIT 56 | */ 57 | 58 | /** 59 | * React Router v6.0.2 60 | * 61 | * Copyright (c) Remix Software Inc. 62 | * 63 | * This source code is licensed under the MIT license found in the 64 | * LICENSE.md file in the root directory of this source tree. 65 | * 66 | * @license MIT 67 | */ 68 | 69 | /** @license React v0.19.1 70 | * scheduler.production.min.js 71 | * 72 | * Copyright (c) Facebook, Inc. and its affiliates. 73 | * 74 | * This source code is licensed under the MIT license found in the 75 | * LICENSE file in the root directory of this source tree. 76 | */ 77 | 78 | /** @license React v16.14.0 79 | * react-dom.production.min.js 80 | * 81 | * Copyright (c) Facebook, Inc. and its affiliates. 82 | * 83 | * This source code is licensed under the MIT license found in the 84 | * LICENSE file in the root directory of this source tree. 85 | */ 86 | 87 | /** @license React v16.14.0 88 | * react.production.min.js 89 | * 90 | * Copyright (c) Facebook, Inc. and its affiliates. 91 | * 92 | * This source code is licensed under the MIT license found in the 93 | * LICENSE file in the root directory of this source tree. 94 | */ 95 | -------------------------------------------------------------------------------- /src/Timetable.ts: -------------------------------------------------------------------------------- 1 | import { IOptions } from './IOptions' 2 | import { ITimeline } from './ITimeline' 3 | import { TIMETABLE_INNERHTML, TIMELINE_INNERHTML } from './templates' 4 | import { Timeline } from './Timeline' 5 | 6 | export class Timetable { 7 | private rootElement: HTMLElement 8 | private hourElements: HTMLElement[] 9 | private readonly timelines: Timeline[] 10 | private readonly options: { 11 | startHour: number 12 | } 13 | 14 | constructor( 15 | rootElement: HTMLElement, 16 | timelines?: ITimeline[], 17 | options?: IOptions, 18 | ) { 19 | this.rootElement = rootElement 20 | this.hourElements = [] 21 | this.timelines = (timelines ?? []).map((item) => new Timeline(item)) 22 | this.options = { 23 | startHour: options?.startHour ?? 0, 24 | } 25 | this.init() 26 | } 27 | 28 | private init(): void { 29 | this.rootElement.innerHTML = TIMETABLE_INNERHTML( 30 | this.options.startHour ?? 0, 31 | ) 32 | 33 | const hourElements = this.rootElement.querySelectorAll( 34 | '.contents .hours div.hour', 35 | ) 36 | this.hourElements = [].slice.call(hourElements) 37 | 38 | this.timelines.forEach((item) => this.draw(item)) 39 | } 40 | 41 | private draw(timeline: Timeline): void { 42 | const startAtHours = timeline.startAt.getHours() 43 | const endAtHours = timeline.endAt.getHours() 44 | 45 | for (let i = startAtHours; i <= endAtHours; i += 1) { 46 | const startAtMinutes = 47 | startAtHours === i ? timeline.startAt.getMinutes() : 0 48 | const endAtMinutes = endAtHours === i ? timeline.endAt.getMinutes() : 60 49 | if (startAtMinutes === endAtMinutes) { 50 | break 51 | } 52 | 53 | const left = (startAtMinutes / 60) * 100 54 | const width = ((endAtMinutes - startAtMinutes) / 60) * 100 55 | 56 | const timelineElement = document.createElement('div') 57 | timelineElement.innerHTML = TIMELINE_INNERHTML( 58 | timeline, 59 | `${left}%`, 60 | `${width}%`, 61 | ) 62 | this.hourElements[i - this.options.startHour]?.append(timelineElement) 63 | } 64 | } 65 | 66 | getTimelines(): Timeline[] { 67 | return this.timelines 68 | } 69 | 70 | getTimeline(id: number): Timeline | undefined { 71 | return this.timelines.find((item) => item.id === id) 72 | } 73 | 74 | addTimelines(_timelines: ITimeline[]): void { 75 | _timelines.forEach((timeline) => this.addTimeline(timeline)) 76 | } 77 | 78 | addTimeline(_timeline: ITimeline): void { 79 | this.removeTimeline(_timeline.id) 80 | 81 | const timeline = new Timeline(_timeline) 82 | this.timelines.push(timeline) 83 | this.timelines.sort((a, b) => a.id - b.id) 84 | 85 | this.draw(timeline) 86 | } 87 | 88 | removeTimelines(ids: number[]): void { 89 | ids.forEach((id) => this.removeTimeline(id)) 90 | } 91 | 92 | removeTimeline(id: number): void { 93 | const idx = this.timelines.findIndex((item) => item.id === id) 94 | if (idx === -1) { 95 | return 96 | } 97 | 98 | this.timelines.splice(idx, 1) 99 | const timelineElements = this.rootElement.querySelectorAll( 100 | `.timeline[data-timeline-id="${id}"]`, 101 | ) 102 | timelineElements.forEach((element) => { 103 | element.parentElement?.remove() 104 | }) 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /docs/701.0e5a8a49.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkmy_timetable=self.webpackChunkmy_timetable||[]).push([[701],{"./node_modules/@storybook/preview-web/dist/esm/renderDocs.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{renderDocs:()=>renderDocs,unmountDocs:()=>unmountDocs});__webpack_require__("./node_modules/regenerator-runtime/runtime.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.promise.js");var react=__webpack_require__("./node_modules/react/index.js"),react_dom=__webpack_require__("./node_modules/react-dom/index.js"),wrapper={fontSize:"14px",letterSpacing:"0.2px",margin:"10px 0"},main={margin:"auto",padding:30,borderRadius:10,background:"rgba(0,0,0,0.03)"},heading={textAlign:"center"},NoDocs=function NoDocs(){return react.createElement("div",{style:wrapper,className:"sb-nodocs sb-wrapper"},react.createElement("div",{style:main},react.createElement("h1",{style:heading},"No Docs"),react.createElement("p",null,"Sorry, but there are no docs for the selected story. To add them, set the story's ",react.createElement("code",null,"docs")," parameter. If you think this is an error:"),react.createElement("ul",null,react.createElement("li",null,"Please check the story definition."),react.createElement("li",null,"Please check the Storybook config."),react.createElement("li",null,"Try reloading the page.")),react.createElement("p",null,"If the problem persists, check the browser console, or the terminal you've run Storybook from.")))};function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function renderDocs(story,docsContext,element,callback){return function renderDocsAsync(_x,_x2,_x3){return _renderDocsAsync.apply(this,arguments)}(story,docsContext,element).then(callback)}function _renderDocsAsync(){return(_renderDocsAsync=_asyncToGenerator(regeneratorRuntime.mark((function _callee(story,docsContext,element){var _docs$getContainer,_docs$getPage,docs,DocsContainer,Page,docsElement;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(!(null!=(docs=story.parameters.docs)&&docs.getPage||null!=docs&&docs.page)||(null!=docs&&docs.getContainer||null!=docs&&docs.container)){_context.next=3;break}throw new Error("No `docs.container` set, did you run `addon-docs/preset`?");case 3:if(_context.t1=docs.container,_context.t1){_context.next=8;break}return _context.next=7,null===(_docs$getContainer=docs.getContainer)||void 0===_docs$getContainer?void 0:_docs$getContainer.call(docs);case 7:_context.t1=_context.sent;case 8:if(_context.t0=_context.t1,_context.t0){_context.next=11;break}_context.t0=function(_ref){var children=_ref.children;return react.createElement(react.Fragment,null,children)};case 11:if(DocsContainer=_context.t0,_context.t3=docs.page,_context.t3){_context.next=17;break}return _context.next=16,null===(_docs$getPage=docs.getPage)||void 0===_docs$getPage?void 0:_docs$getPage.call(docs);case 16:_context.t3=_context.sent;case 17:if(_context.t2=_context.t3,_context.t2){_context.next=20;break}_context.t2=NoDocs;case 20:return Page=_context.t2,docsElement=react.createElement(DocsContainer,{key:story.componentId,context:docsContext},react.createElement(Page,null)),_context.next=24,new Promise((function(resolve){react_dom.render(docsElement,element,resolve)}));case 24:case"end":return _context.stop()}}),_callee)})))).apply(this,arguments)}function unmountDocs(element){react_dom.unmountComponentAtNode(element)}NoDocs.displayName="NoDocs"}}]); -------------------------------------------------------------------------------- /src/stories/Introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Story } from '@storybook/addon-docs' 2 | import Code from './assets/code-brackets.svg' 3 | import Colors from './assets/colors.svg' 4 | import GitHub from './assets/github-logo.png' 5 | 6 | 7 | 8 | 111 | 112 | # my-timetable 113 | 114 |
10 minuites timetable
115 | 116 | 117 | 118 |
Quick Links
119 | 120 | 146 | 147 |
148 | TipEdit the Markdown in{' '} 149 | stories/Introduction.stories.mdx 150 |
151 | -------------------------------------------------------------------------------- /src/stories/Timetable.stories.ts: -------------------------------------------------------------------------------- 1 | import { Story } from '@storybook/html' 2 | import { ITimeline } from '../ITimeline' 3 | import { Timetable } from '../Timetable' 4 | import '../index.css' 5 | import { sleep } from './utils' 6 | 7 | const now = new Date() 8 | const after45min = new Date(now.getTime() + 2700000) // 2700000 = 45 * 60000 9 | 10 | // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export 11 | export default { 12 | title: 'Example/Timetable', 13 | viewport: { 14 | defaultViewport: 'iPad', 15 | }, 16 | // More on argTypes: https://storybook.js.org/docs/html/api/argtypes 17 | argTypes: { 18 | rootElement: { 19 | name: 'rootElement', 20 | table: { 21 | type: { summary: 'HTMLElement' }, 22 | }, 23 | }, 24 | timelines: { 25 | name: 'timelines[]', 26 | type: { name: 'array', required: false }, 27 | defaultValue: [ 28 | { 29 | id: 1, 30 | color: '#51FF0D', 31 | startAt: '2022-08-20T10:15:00', 32 | endAt: '2022-08-20T11:30:00', 33 | }, 34 | { 35 | id: 2, 36 | color: '#FF0DCA', 37 | startAt: '2022-08-20T12:05:00', 38 | endAt: '2022-08-20T12:20:00', 39 | }, 40 | { 41 | id: 3, 42 | color: '#F2FF00', 43 | startAt: '2022-08-20T15:15:00', 44 | endAt: '2022-08-20T16:00:00', 45 | }, 46 | ], 47 | description: 'timeline data', 48 | table: { 49 | type: { summary: 'ITimeline[]' }, 50 | defaultValue: { summary: '[]' }, 51 | }, 52 | control: { 53 | type: 'object', 54 | }, 55 | }, 56 | startAt: { 57 | name: 'timelines[].startAt', 58 | type: { name: 'date', required: true }, 59 | defaultValue: now, 60 | description: 'time at which a timeline block start', 61 | table: { 62 | type: { summary: 'yyyy-MM-ddThh:mm:ss' }, 63 | }, 64 | control: { 65 | type: 'date', 66 | }, 67 | }, 68 | endAt: { 69 | name: 'timelines[].endAt', 70 | type: { name: 'date', required: true }, 71 | defaultValue: after45min, 72 | description: 'time at which a timeline block end', 73 | table: { 74 | type: { summary: 'yyyy-MM-ddThh:mm:ss' }, 75 | }, 76 | control: { 77 | type: 'date', 78 | }, 79 | }, 80 | color: { 81 | name: 'timelines[].color', 82 | type: { name: 'color', required: true }, 83 | defaultValue: '#51FF0D', 84 | description: 'color of a timeline block', 85 | table: { 86 | type: { summary: 'color' }, 87 | }, 88 | control: { 89 | type: 'color', 90 | }, 91 | }, 92 | startHour: { 93 | name: 'options.startHour', 94 | type: { name: 'number', required: false }, 95 | defaultValue: 0, 96 | description: 'timetable start rendering from this time', 97 | table: { 98 | type: { summary: 'number' }, 99 | defaultValue: { summary: 0 }, 100 | }, 101 | control: { 102 | type: 'number', 103 | min: 0, 104 | max: 23, 105 | step: 1, 106 | }, 107 | }, 108 | }, 109 | } 110 | 111 | interface TemplateArgs { 112 | timelines: ITimeline[] 113 | startAt: ITimeline['startAt'] 114 | endAt: ITimeline['endAt'] 115 | color: ITimeline['color'] 116 | startHour: number 117 | } 118 | 119 | let timetable: Timetable 120 | // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args 121 | const Template: Story = (args): HTMLElement => { 122 | // You can either use a function to create DOM elements or use a plain html string! 123 | // return `
${label}
`; 124 | const rootElement = document.createElement('div') 125 | rootElement.className = [ 126 | 'example-timetable', 127 | 'example-timetable--medium', 128 | 'example-timetable--primary', 129 | ].join(' ') 130 | 131 | const { timelines, startAt, endAt, color, startHour } = args 132 | if (timelines.length > 0) { 133 | timelines[0].startAt = startAt 134 | timelines[0].endAt = endAt 135 | timelines[0].color = color 136 | } 137 | 138 | timetable = new Timetable(rootElement, timelines, { 139 | startHour, 140 | }) 141 | 142 | return rootElement 143 | } 144 | 145 | export const Timelines = Template.bind({}) 146 | Timelines.play = async () => { 147 | await sleep(10000) 148 | 149 | timetable.addTimelines([ 150 | { 151 | id: 2, 152 | color: '#FF0DCA', 153 | startAt: '2022-08-20T12:10:00', 154 | endAt: '2022-08-20T12:45:00', 155 | }, 156 | ]) 157 | 158 | await sleep(2000) 159 | 160 | timetable.addTimelines([ 161 | { 162 | id: 4, 163 | color: '#0AC2FF', 164 | startAt: '2022-08-20T12:50:00', 165 | endAt: '2022-08-20T13:05:00', 166 | }, 167 | ]) 168 | 169 | await sleep(2000) 170 | 171 | timetable.removeTimelines([2]) 172 | } 173 | 174 | export const Empty = Template.bind({}) 175 | Empty.args = { 176 | timelines: [], 177 | } 178 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | dev.youjung.hong@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /test/Timetable.test.ts: -------------------------------------------------------------------------------- 1 | import { Timetable } from '../src/Timetable' 2 | 3 | beforeEach(() => { 4 | document.body.innerHTML = '
' 5 | }) 6 | 7 | // 초기화 8 | // - rootElement가 없으면 에러난다. 9 | // - rootelement가 있으면, 그 아래에 생성된다. 10 | // - timelines가 없어도 된다. 11 | // - timelines가 있으면 추가된다. 12 | // - options가 없어도 된다. 13 | // - options.startHour가 있으면, 시작 시점이 변경된다. 14 | test('initialization OK: new Timetable(rootElement)', () => { 15 | const rootElement = document.getElementById('root') as HTMLDivElement 16 | const timetable = new Timetable(rootElement) 17 | expect(timetable).toBeInstanceOf(Timetable) 18 | expect(timetable.getTimelines()).toEqual([]) 19 | expect(rootElement.outerHTML).toMatchSnapshot() 20 | }) 21 | 22 | test('initialization Error: new Timetable(null)', () => { 23 | expect(() => { 24 | const rootElement = document.getElementById('root1') as HTMLDivElement 25 | // eslint-disable-next-line no-new 26 | new Timetable(rootElement) 27 | }).toThrowError() 28 | }) 29 | 30 | test('initialization OK: new Timetable(rootElement, timelines)', () => { 31 | const rootElement = document.getElementById('root') as HTMLDivElement 32 | const timetable1 = new Timetable(rootElement, []) 33 | expect(timetable1).toBeInstanceOf(Timetable) 34 | expect(timetable1.getTimelines()).toEqual([]) 35 | expect(rootElement.outerHTML).toMatchSnapshot() 36 | 37 | const timetable2 = new Timetable(rootElement, [ 38 | { 39 | id: 1, 40 | color: 'yellow', 41 | startAt: '2022-06-23T07:30:00', 42 | endAt: '2022-06-23T09:00:00', 43 | }, 44 | ]) 45 | expect(timetable2).toBeInstanceOf(Timetable) 46 | expect(timetable2.getTimelines().length).toEqual(1) 47 | expect(timetable2.getTimelines()[0].id).toEqual(1) 48 | expect(timetable2.getTimelines()[0].color).toEqual('yellow') 49 | expect(timetable2.getTimelines()[0].startAt).toEqual( 50 | new Date('2022-06-23T07:30:00'), 51 | ) 52 | expect(timetable2.getTimelines()[0].endAt).toEqual( 53 | new Date('2022-06-23T09:00:00'), 54 | ) 55 | expect(timetable2.getTimelines()[0].meta).toBeUndefined() 56 | expect(rootElement.outerHTML).toMatchSnapshot() 57 | }) 58 | 59 | test('initialization OK: new Timetable(rootElement, timelines, options)', () => { 60 | const rootElement = document.getElementById('root') as HTMLDivElement 61 | const timetable = new Timetable(rootElement, [], { 62 | startHour: 5, 63 | }) 64 | expect(timetable).toBeInstanceOf(Timetable) 65 | expect(timetable.getTimelines()).toEqual([]) 66 | expect(rootElement.outerHTML).toMatchSnapshot() 67 | }) 68 | 69 | // addTimeline: 추가한다 // 수정한다 70 | // - 값이 없는 것을 추가하면 새로 생긴다.화면에도 추가된다. 71 | // - 값이 있는 것을 추가하면 수정한다.화면에도 수정된다 72 | test('addTimelines: create new timelines', () => { 73 | const rootElement = document.getElementById('root') as HTMLDivElement 74 | const timetable = new Timetable(rootElement) 75 | timetable.addTimelines([ 76 | { 77 | id: 3, 78 | color: 'blue', 79 | startAt: '2022-06-20T10:30:00', 80 | endAt: '2022-06-20T11:15:00', 81 | }, 82 | ]) 83 | 84 | expect(timetable.getTimelines().length).toEqual(1) 85 | expect(timetable.getTimelines()[0].id).toEqual(3) 86 | expect(timetable.getTimelines()[0].color).toEqual('blue') 87 | expect(timetable.getTimelines()[0].startAt).toEqual( 88 | new Date('2022-06-20T10:30:00'), 89 | ) 90 | expect(timetable.getTimelines()[0].endAt).toEqual( 91 | new Date('2022-06-20T11:15:00'), 92 | ) 93 | expect(timetable.getTimelines()[0].meta).toBeUndefined() 94 | expect(rootElement.outerHTML).toMatchSnapshot() 95 | }) 96 | 97 | test('addTimelines: modify existing timelines', () => { 98 | const rootElement = document.getElementById('root') as HTMLDivElement 99 | const timetable = new Timetable(rootElement, [ 100 | { 101 | id: 1, 102 | color: 'yellow', 103 | startAt: '2022-06-23T07:30:00', 104 | endAt: '2022-06-23T09:00:00', 105 | }, 106 | ]) 107 | 108 | timetable.addTimelines([ 109 | { 110 | id: 1, 111 | color: 'blue', 112 | startAt: '2022-06-23T11:00:00', 113 | endAt: '2022-06-23T12:15:00', 114 | }, 115 | ]) 116 | 117 | expect(timetable.getTimelines().length).toEqual(1) 118 | expect(timetable.getTimelines()[0].id).toEqual(1) 119 | expect(timetable.getTimelines()[0].color).toEqual('blue') 120 | expect(timetable.getTimelines()[0].startAt).toEqual( 121 | new Date('2022-06-23T11:00:00'), 122 | ) 123 | expect(timetable.getTimelines()[0].endAt).toEqual( 124 | new Date('2022-06-23T12:15:00'), 125 | ) 126 | expect(timetable.getTimelines()[0].meta).toBeUndefined() 127 | expect(rootElement.outerHTML).toMatchSnapshot() 128 | }) 129 | 130 | // removeTimeline: 지운다 131 | // - id가 있는 애들을 넣는다, 삭제된다. 화면에서도 지워진다. 132 | // - id가 안 맞는 애들을 넣으면, 아무것도 변하지 않는다. 133 | test('removeTimelines: remove existing timelines', () => { 134 | const rootElement = document.getElementById('root') as HTMLDivElement 135 | const timetable = new Timetable(rootElement, [ 136 | { 137 | id: 1, 138 | color: 'yellow', 139 | startAt: '2022-06-23T07:30:00', 140 | endAt: '2022-06-23T09:00:00', 141 | }, 142 | ]) 143 | 144 | timetable.removeTimelines([1]) 145 | 146 | expect(timetable.getTimelines().length).toEqual(0) 147 | expect(rootElement.outerHTML).toMatchSnapshot() 148 | }) 149 | 150 | test('removeTimelines: cannot remove timelines which is not exist inside timetable', () => { 151 | const rootElement = document.getElementById('root') as HTMLDivElement 152 | const timetable = new Timetable(rootElement, [ 153 | { 154 | id: 1, 155 | color: 'yellow', 156 | startAt: '2022-06-23T07:30:00', 157 | endAt: '2022-06-23T09:00:00', 158 | }, 159 | ]) 160 | 161 | timetable.removeTimelines([2]) 162 | 163 | expect(timetable.getTimelines().length).toEqual(1) 164 | expect(rootElement.outerHTML).toMatchSnapshot() 165 | }) 166 | -------------------------------------------------------------------------------- /markup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Webpack App 6 | 7 | 8 | 72 | 73 | 74 |
75 |
76 |
    77 |
  • 오늘 할일1
    • 78 |
  • 오늘 할일2
    • 79 |
  • 오늘 할일3
    • 80 |
  • 오늘 할일4
    • 81 |
  • 오늘 할일5
    • 82 |
  • 오늘 할일6
    • 83 |
84 |
85 |
86 |
87 |
0
88 |
1
89 |
2
90 |
3
91 |
4
92 |
5
93 |
6
94 |
7
95 |
8
96 |
9
97 |
10
98 |
11
99 |
12
100 |
13
101 |
14
102 |
15
103 |
16
104 |
17
105 |
18
106 |
19
107 |
20
108 |
21
109 |
22
110 |
23
111 |
112 |
113 |
114 |
0
115 |
10
116 |
20
117 |
30
118 |
40
119 |
50
120 |
121 |
122 |
123 | 0 124 |
128 | 요가 129 |
130 |
131 |
1
132 |
2
133 |
3
134 |
4
135 |
5
136 |
6
137 |
7
138 |
139 | 8 140 |
144 | 낮잠 145 |
146 |
147 |
9
148 |
10
149 |
11
150 |
12
151 |
13
152 |
14
153 |
15
154 |
16
155 |
17
156 |
157 | 18 158 |
162 | 긍살 163 |
164 |
165 |
19
166 |
20
167 |
21
168 |
22
169 |
23
170 |
171 |
172 |
173 |
174 | 175 | 176 | -------------------------------------------------------------------------------- /docs/runtime~main.9603c75b.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{32:"ed0d85c1",142:"1a57d80e",272:"183a3589",551:"63ece5c9",566:"4f92258f",701:"0e5a8a49",725:"a3be64e6",935:"d5bcabf6"}[chunkId]+".iframe.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{32:"828162f86cbc9f70ce7f",142:"ffe48afc0f2491651726",295:"36f1b828a5aacf1c1279",551:"b377d91b04a23bd3a7cd",566:"516db255c453b0f37198",691:"c3763c49c05513e4b09c",725:"49f6bc5582740330060e"}[chunkId]+".manager.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i" 129 | // ], 130 | 131 | // Allows you to use a custom runner instead of Jest's default test runner 132 | // runner: "jest-runner", 133 | 134 | // The paths to modules that run some code to configure or set up the testing environment before each test 135 | // setupFiles: [], 136 | 137 | // A list of paths to modules that run some code to configure or set up the testing framework before each test 138 | // setupFilesAfterEnv: [], 139 | 140 | // The number of seconds after which a test is considered as slow and reported as such in the results. 141 | // slowTestThreshold: 5, 142 | 143 | // A list of paths to snapshot serializer modules Jest should use for snapshot testing 144 | // snapshotSerializers: [], 145 | 146 | // The test environment that will be used for testing 147 | testEnvironment: 'jsdom', 148 | 149 | // Options that will be passed to the testEnvironment 150 | // testEnvironmentOptions: {}, 151 | 152 | // Adds a location field to test results 153 | // testLocationInResults: false, 154 | 155 | // The glob patterns Jest uses to detect test files 156 | // testMatch: [ 157 | // "**/__tests__/**/*.[jt]s?(x)", 158 | // "**/?(*.)+(spec|test).[tj]s?(x)" 159 | // ], 160 | 161 | // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped 162 | // testPathIgnorePatterns: [ 163 | // "/node_modules/" 164 | // ], 165 | 166 | // The regexp pattern or array of patterns that Jest uses to detect test files 167 | // testRegex: [], 168 | 169 | // This option allows the use of a custom results processor 170 | // testResultsProcessor: undefined, 171 | 172 | // This option allows use of a custom test runner 173 | // testRunner: "jest-circus/runner", 174 | 175 | // A map from regular expressions to paths to transformers 176 | transform: { 177 | '^.+\\.ts$': 'ts-jest', 178 | }, 179 | 180 | // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation 181 | // transformIgnorePatterns: [ 182 | // "/node_modules/", 183 | // "\\.pnp\\.[^\\/]+$" 184 | // ], 185 | 186 | // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them 187 | // unmockedModulePathPatterns: undefined, 188 | 189 | // Indicates whether each individual test should be reported during the run 190 | // verbose: undefined, 191 | 192 | // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode 193 | // watchPathIgnorePatterns: [], 194 | 195 | // Whether to use watchman for file crawling 196 | // watchman: true, 197 | } 198 | -------------------------------------------------------------------------------- /src/stories/assets/colors.svg: -------------------------------------------------------------------------------- 1 | illustration/colors -------------------------------------------------------------------------------- /docs/static/media/colors.a4bd0486.svg: -------------------------------------------------------------------------------- 1 | illustration/colors -------------------------------------------------------------------------------- /docs/551.b377d91b04a23bd3a7cd.manager.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkmy_timetable=self.webpackChunkmy_timetable||[]).push([[551],{82551:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>GlobalScrollAreaStyles,getScrollAreaStyles:()=>getScrollAreaStyles});__webpack_require__(47042),__webpack_require__(43371);var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(67294),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(65316);var hsResizeObserverDummyAnimation=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.F4)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.mediumdark,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2__.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.xB,{styles:getScrollAreaStyles})}}}]); -------------------------------------------------------------------------------- /docs/551.63ece5c9.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkmy_timetable=self.webpackChunkmy_timetable||[]).push([[551],{"./node_modules/@storybook/components/dist/esm/GlobalScrollAreaStyles-8793ce4a.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>GlobalScrollAreaStyles,getScrollAreaStyles:()=>getScrollAreaStyles});__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.object.freeze.js");var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/index.js"),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@storybook/theming/dist/esm/index.js");var hsResizeObserverDummyAnimation=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.F4)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.mediumdark,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2__.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.xB,{styles:getScrollAreaStyles})}}}]); -------------------------------------------------------------------------------- /docs/iframe.html: -------------------------------------------------------------------------------- 1 | Webpack App

No Preview

Sorry, but you either have no stories or none are selected somehow.

  • Please check the Storybook config.
  • Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.




--------------------------------------------------------------------------------
/test/__snapshots__/Timetable.test.ts.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`addTimelines: create new timelines 1`] = `
 4 | "
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

 5 |             

 6 |                 

 7 |                 

 8 |                 

 9 |                 

10 |                 

11 |                 

12 |             
"
13 | `;
14 | 
15 | exports[`addTimelines: modify existing timelines 1`] = `
16 | "
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

17 |             

18 |                 

19 |                 

20 |                 

21 |                 

22 |                 

23 |                 

24 |             
"
25 | `;
26 | 
27 | exports[`initialization OK: new Timetable(rootElement) 1`] = `
28 | "
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

29 |             

30 |                 

31 |                 

32 |                 

33 |                 

34 |                 

35 |                 

36 |             
"
37 | `;
38 | 
39 | exports[`initialization OK: new Timetable(rootElement, timelines) 1`] = `
40 | "
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

41 |             

42 |                 

43 |                 

44 |                 

45 |                 

46 |                 

47 |                 

48 |             
"
49 | `;
50 | 
51 | exports[`initialization OK: new Timetable(rootElement, timelines) 2`] = `
52 | "
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

53 |             

54 |                 

55 |                 

56 |                 

57 |                 

58 |                 

59 |                 

60 |             
"
61 | `;
62 | 
63 | exports[`initialization OK: new Timetable(rootElement, timelines, options) 1`] = `
64 | "
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
0
1
2
3
4

65 |             

66 |                 

67 |                 

68 |                 

69 |                 

70 |                 

71 |                 

72 |             
"
73 | `;
74 | 
75 | exports[`removeTimelines: cannot remove timelines which is not exist inside timetable 1`] = `
76 | "
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

77 |             

78 |                 

79 |                 

80 |                 

81 |                 

82 |                 

83 |                 

84 |             
"
85 | `;
86 | 
87 | exports[`removeTimelines: remove existing timelines 1`] = `
88 | "
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

89 |             

90 |                 

91 |                 

92 |                 

93 |                 

94 |                 

95 |                 

96 |             
"
97 | `;
98 | 


--------------------------------------------------------------------------------
/docs/32.828162f86cbc9f70ce7f.manager.bundle.js:
--------------------------------------------------------------------------------
1 | "use strict";(self.webpackChunkmy_timetable=self.webpackChunkmy_timetable||[]).push([[32],{31032:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ColorControl:()=>ColorControl,default:()=>ColorControl});__webpack_require__(19601),__webpack_require__(47941),__webpack_require__(69600),__webpack_require__(57327),__webpack_require__(41539),__webpack_require__(9653),__webpack_require__(74916),__webpack_require__(39714),__webpack_require__(15306),__webpack_require__(66992),__webpack_require__(51532),__webpack_require__(78783),__webpack_require__(33948),__webpack_require__(4723),__webpack_require__(21249),__webpack_require__(23123),__webpack_require__(54747),__webpack_require__(47042),__webpack_require__(92222),__webpack_require__(26833),__webpack_require__(23157),__webpack_require__(68309),__webpack_require__(82526),__webpack_require__(41817),__webpack_require__(32165),__webpack_require__(91038);var _ColorPicker,_fallbackColor,_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__=__webpack_require__(72857),react__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__(67294),_storybook_theming__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__(65316);__webpack_require__(52326),__webpack_require__(35032),__webpack_require__(80129);function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _typeof(obj){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(o[t]=e[t]);return o}function i(e){var t=(0,react__WEBPACK_IMPORTED_MODULE_26__.useRef)(e),n=(0,react__WEBPACK_IMPORTED_MODULE_26__.useRef)((function(e){t.current&&t.current(e)}));return t.current=e,n.current}var s=function s(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e0:_e.buttons>0)&&m.current?g(d(m.current,_e,b.current)):t(!1)},r=function r(){return t(!1)};function t(t){var n=_.current,o=v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=m.current;if(n&&(h(r),!function(e,r){return r&&!f(e)}(r,_.current)&&n)){if(f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier)}n.focus(),g(d(n,r,b.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]}),[p,g]),C=x[0],E=x[1],H=x[2];return(0,react__WEBPACK_IMPORTED_MODULE_26__.useEffect)((function(){return H}),[H]),react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))})),g=function g(e){return e.filter(Boolean).join(" ")},p=function p(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=g(["react-colorful__pointer",r.className]);return react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},b=function b(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},_={grad:.9,turn:360,rad:360/(2*Math.PI)},x=function x(e){return"#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},C=function C(e,r){return void 0===r&&(r="deg"),Number(e)*(_[r]||1)},M=function M(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},N=function N(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:b(e.h),s:b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:b(o/2),a:b(n,2)}},w=function w(e){var r=N(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},y=function y(e){var r=N(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},q=function q(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:b(255*[n,u,l,l,c,n][i]),g:b(255*[c,n,n,u,l,l][i]),b:b(255*[l,l,c,n,n,u][i]),a:b(o,2)}},z=function z(e){var r=e.toString(16);return r.length<2?"0"+r:r},B=function B(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:b(60*(u<0?u+6:u)),s:b(a?l/a*100:0),v:b(a/255*100),a:o}},K=react__WEBPACK_IMPORTED_MODULE_26__.memo((function(r){var t=r.hue,n=r.onChange,o=g(["react-colorful__hue",r.className]);return react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",{className:o},react__WEBPACK_IMPORTED_MODULE_26__.createElement(m,{onMove:function onMove(e){n({h:360*e.left})},onKey:function onKey(e){n({h:s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":b(t)},react__WEBPACK_IMPORTED_MODULE_26__.createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:w({h:t,s:100,v:100,a:1})})))})),L=react__WEBPACK_IMPORTED_MODULE_26__.memo((function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:w({h:t.h,s:100,v:100,a:1})};return react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",{className:"react-colorful__saturation",style:o},react__WEBPACK_IMPORTED_MODULE_26__.createElement(m,{onMove:function onMove(e){n({s:100*e.left,v:100-100*e.top})},onKey:function onKey(e){n({s:s(t.s+100*e.left,0,100),v:s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+b(t.s)+"%, Brightness "+b(t.v)+"%"},react__WEBPACK_IMPORTED_MODULE_26__.createElement(p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:w(t)})))})),A=function A(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},S=function S(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function T(e,t,l){var u=i(l),c=(0,react__WEBPACK_IMPORTED_MODULE_26__.useState)((function(){return e.toHsva(t)})),s=c[0],f=c[1],v=(0,react__WEBPACK_IMPORTED_MODULE_26__.useRef)({color:t,hsva:s});(0,react__WEBPACK_IMPORTED_MODULE_26__.useEffect)((function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}}),[t,e]),(0,react__WEBPACK_IMPORTED_MODULE_26__.useEffect)((function(){var r;A(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))}),[s,e,u]);var d=(0,react__WEBPACK_IMPORTED_MODULE_26__.useCallback)((function(e){f((function(r){return Object.assign({},r,e)}))}),[]);return[s,d]}for(var P="undefined"!=typeof window?react__WEBPACK_IMPORTED_MODULE_26__.useLayoutEffect:react__WEBPACK_IMPORTED_MODULE_26__.useEffect,R=new Map,V=function V(e){P((function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!R.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',R.set(r,t);var n=function X(){return __webpack_require__.nc}();n&&t.setAttribute("nonce",n),r.head.appendChild(t)}}),[])},$=function $(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=c(t,["className","colorModel","color","onChange"]),f=(0,react__WEBPACK_IMPORTED_MODULE_26__.useRef)(null);V(f);var v=T(o,l,i),d=v[0],h=v[1],m=g(["react-colorful",n]);return react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",u({},s,{ref:f,className:m}),react__WEBPACK_IMPORTED_MODULE_26__.createElement(L,{hsva:d,onChange:h}),react__WEBPACK_IMPORTED_MODULE_26__.createElement(K,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function toHsva(e){return B(x(e))},fromHsva:function fromHsva(e){return t=(r=q(e)).g,n=r.b,"#"+z(r.r)+z(t)+z(n);var r,t,n},equal:function equal(e,r){return e.toLowerCase()===r.toLowerCase()||A(x(e),x(r))}},Q=function Q(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+y(Object.assign({},n,{a:0}))+", "+y(Object.assign({},n,{a:1}))+")"},l=g(["react-colorful__alpha",t]);return react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",{className:l},react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),react__WEBPACK_IMPORTED_MODULE_26__.createElement(m,{onMove:function onMove(e){o({a:e.left})},onKey:function onKey(e){o({a:s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":b(100*n.a)+"%"},react__WEBPACK_IMPORTED_MODULE_26__.createElement(p,{className:"react-colorful__alpha-pointer",left:n.a,color:y(n)})))},U=function U(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=c(t,["className","colorModel","color","onChange"]),f=(0,react__WEBPACK_IMPORTED_MODULE_26__.useRef)(null);V(f);var v=T(o,l,i),d=v[0],h=v[1],m=g(["react-colorful",n]);return react__WEBPACK_IMPORTED_MODULE_26__.createElement("div",u({},s,{ref:f,className:m}),react__WEBPACK_IMPORTED_MODULE_26__.createElement(L,{hsva:d,onChange:h}),react__WEBPACK_IMPORTED_MODULE_26__.createElement(K,{hue:d.h,onChange:h}),react__WEBPACK_IMPORTED_MODULE_26__.createElement(Q,{hsva:d,onChange:h,className:"react-colorful__last-control"}))},ee={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:function E(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?M({h:C(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},fromHsva:y,equal:S},ge={defaultColor:"rgba(0, 0, 0, 1)",toHsva:function I(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?B({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},fromHsva:function fromHsva(e){var r=q(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:S},cssKeywords={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},reverseKeywords={},_i=0,_Object$keys=Object.keys(cssKeywords);_i<_Object$keys.length;_i++){var key=_Object$keys[_i];reverseKeywords[cssKeywords[key]]=key}for(var convert$1={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}},conversions$2=convert$1,_i2=0,_Object$keys2=Object.keys(convert$1);_i2<_Object$keys2.length;_i2++){var model=_Object$keys2[_i2];if(!("channels"in convert$1[model]))throw new Error("missing channels property: "+model);if(!("labels"in convert$1[model]))throw new Error("missing channel labels property: "+model);if(convert$1[model].labels.length!==convert$1[model].channels)throw new Error("channel and label counts mismatch: "+model);var _convert$1$model=convert$1[model],channels=_convert$1$model.channels,labels=_convert$1$model.labels;delete convert$1[model].channels,delete convert$1[model].labels,Object.defineProperty(convert$1[model],"channels",{value:channels}),Object.defineProperty(convert$1[model],"labels",{value:labels})}function comparativeDistance(x,y){return Math.pow(x[0]-y[0],2)+Math.pow(x[1]-y[1],2)+Math.pow(x[2]-y[2],2)}convert$1.rgb.hsl=function(rgb){var h,r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min;max===min?h=0:r===max?h=(g-b)/delta:g===max?h=2+(b-r)/delta:b===max&&(h=4+(r-g)/delta),(h=Math.min(60*h,360))<0&&(h+=360);var l=(min+max)/2;return[h,100*(max===min?0:l<=.5?delta/(max+min):delta/(2-max-min)),100*l]},convert$1.rgb.hsv=function(rgb){var rdif,gdif,bdif,h,s,r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,v=Math.max(r,g,b),diff=v-Math.min(r,g,b),diffc=function diffc(c){return(v-c)/6/diff+.5};return 0===diff?(h=0,s=0):(s=diff/v,rdif=diffc(r),gdif=diffc(g),bdif=diffc(b),r===v?h=bdif-gdif:g===v?h=1/3+rdif-bdif:b===v&&(h=2/3+gdif-rdif),h<0?h+=1:h>1&&(h-=1)),[360*h,100*s,100*v]},convert$1.rgb.hwb=function(rgb){var r=rgb[0],g=rgb[1],b=rgb[2];return[convert$1.rgb.hsl(rgb)[0],100*(1/255*Math.min(r,Math.min(g,b))),100*(b=1-1/255*Math.max(r,Math.max(g,b)))]},convert$1.rgb.cmyk=function(rgb){var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,k=Math.min(1-r,1-g,1-b);return[100*((1-r-k)/(1-k)||0),100*((1-g-k)/(1-k)||0),100*((1-b-k)/(1-k)||0),100*k]},convert$1.rgb.keyword=function(rgb){var reversed=reverseKeywords[rgb];if(reversed)return reversed;for(var currentClosestKeyword,currentClosestDistance=1/0,_i3=0,_Object$keys3=Object.keys(cssKeywords);_i3<_Object$keys3.length;_i3++){var keyword=_Object$keys3[_i3],distance=comparativeDistance(rgb,cssKeywords[keyword]);distance.04045?Math.pow((r+.055)/1.055,2.4):r/12.92)+.3576*(g=g>.04045?Math.pow((g+.055)/1.055,2.4):g/12.92)+.1805*(b=b>.04045?Math.pow((b+.055)/1.055,2.4):b/12.92)),100*(.2126*r+.7152*g+.0722*b),100*(.0193*r+.1192*g+.9505*b)]},convert$1.rgb.lab=function(rgb){var xyz=convert$1.rgb.xyz(rgb),x=xyz[0],y=xyz[1],z=xyz[2];return y/=100,z/=108.883,x=(x/=95.047)>.008856?Math.pow(x,1/3):7.787*x+16/116,[116*(y=y>.008856?Math.pow(y,1/3):7.787*y+16/116)-16,500*(x-y),200*(y-(z=z>.008856?Math.pow(z,1/3):7.787*z+16/116))]},convert$1.hsl.rgb=function(hsl){var t2,t3,val,h=hsl[0]/360,s=hsl[1]/100,l=hsl[2]/100;if(0===s)return[val=255*l,val,val];for(var t1=2*l-(t2=l<.5?l*(1+s):l+s-l*s),rgb=[0,0,0],_i4=0;_i4<3;_i4++)(t3=h+1/3*-(_i4-1))<0&&t3++,t3>1&&t3--,val=6*t3<1?t1+6*(t2-t1)*t3:2*t3<1?t2:3*t3<2?t1+(t2-t1)*(2/3-t3)*6:t1,rgb[_i4]=255*val;return rgb},convert$1.hsl.hsv=function(hsl){var h=hsl[0],s=hsl[1]/100,l=hsl[2]/100,smin=s,lmin=Math.max(l,.01);return s*=(l*=2)<=1?l:2-l,smin*=lmin<=1?lmin:2-lmin,[h,100*(0===l?2*smin/(lmin+smin):2*s/(l+s)),100*((l+s)/2)]},convert$1.hsv.rgb=function(hsv){var h=hsv[0]/60,s=hsv[1]/100,v=hsv[2]/100,hi=Math.floor(h)%6,f=h-Math.floor(h),p=255*v*(1-s),q=255*v*(1-s*f),t=255*v*(1-s*(1-f));switch(v*=255,hi){case 0:return[v,t,p];case 1:return[q,v,p];case 2:return[p,v,t];case 3:return[p,q,v];case 4:return[t,p,v];case 5:return[v,p,q]}},convert$1.hsv.hsl=function(hsv){var sl,l,h=hsv[0],s=hsv[1]/100,v=hsv[2]/100,vmin=Math.max(v,.01);l=(2-s)*v;var lmin=(2-s)*vmin;return sl=s*vmin,[h,100*(sl=(sl/=lmin<=1?lmin:2-lmin)||0),100*(l/=2)]},convert$1.hwb.rgb=function(hwb){var f,h=hwb[0]/360,wh=hwb[1]/100,bl=hwb[2]/100,ratio=wh+bl;ratio>1&&(wh/=ratio,bl/=ratio);var i=Math.floor(6*h),v=1-bl;f=6*h-i,0!=(1&i)&&(f=1-f);var r,g,b,n=wh+f*(v-wh);switch(i){default:case 6:case 0:r=v,g=n,b=wh;break;case 1:r=n,g=v,b=wh;break;case 2:r=wh,g=v,b=n;break;case 3:r=wh,g=n,b=v;break;case 4:r=n,g=wh,b=v;break;case 5:r=v,g=wh,b=n}return[255*r,255*g,255*b]},convert$1.cmyk.rgb=function(cmyk){var c=cmyk[0]/100,m=cmyk[1]/100,y=cmyk[2]/100,k=cmyk[3]/100;return[255*(1-Math.min(1,c*(1-k)+k)),255*(1-Math.min(1,m*(1-k)+k)),255*(1-Math.min(1,y*(1-k)+k))]},convert$1.xyz.rgb=function(xyz){var r,g,b,x=xyz[0]/100,y=xyz[1]/100,z=xyz[2]/100;return g=-.9689*x+1.8758*y+.0415*z,b=.0557*x+-.204*y+1.057*z,r=(r=3.2406*x+-1.5372*y+-.4986*z)>.0031308?1.055*Math.pow(r,1/2.4)-.055:12.92*r,g=g>.0031308?1.055*Math.pow(g,1/2.4)-.055:12.92*g,b=b>.0031308?1.055*Math.pow(b,1/2.4)-.055:12.92*b,[255*(r=Math.min(Math.max(0,r),1)),255*(g=Math.min(Math.max(0,g),1)),255*(b=Math.min(Math.max(0,b),1))]},convert$1.xyz.lab=function(xyz){var x=xyz[0],y=xyz[1],z=xyz[2];return y/=100,z/=108.883,x=(x/=95.047)>.008856?Math.pow(x,1/3):7.787*x+16/116,[116*(y=y>.008856?Math.pow(y,1/3):7.787*y+16/116)-16,500*(x-y),200*(y-(z=z>.008856?Math.pow(z,1/3):7.787*z+16/116))]},convert$1.lab.xyz=function(lab){var x,y,z,l=lab[0];x=lab[1]/500+(y=(l+16)/116),z=y-lab[2]/200;var y2=Math.pow(y,3),x2=Math.pow(x,3),z2=Math.pow(z,3);return y=y2>.008856?y2:(y-16/116)/7.787,x=x2>.008856?x2:(x-16/116)/7.787,z=z2>.008856?z2:(z-16/116)/7.787,[x*=95.047,y*=100,z*=108.883]},convert$1.lab.lch=function(lab){var h,l=lab[0],a=lab[1],b=lab[2];return(h=360*Math.atan2(b,a)/2/Math.PI)<0&&(h+=360),[l,Math.sqrt(a*a+b*b),h]},convert$1.lch.lab=function(lch){var l=lch[0],c=lch[1],hr=lch[2]/360*2*Math.PI;return[l,c*Math.cos(hr),c*Math.sin(hr)]},convert$1.rgb.ansi16=function(args){var saturation=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,_args=_slicedToArray(args,3),r=_args[0],g=_args[1],b=_args[2],value=null===saturation?convert$1.rgb.hsv(args)[2]:saturation;if(0===(value=Math.round(value/50)))return 30;var ansi=30+(Math.round(b/255)<<2|Math.round(g/255)<<1|Math.round(r/255));return 2===value&&(ansi+=60),ansi},convert$1.hsv.ansi16=function(args){return convert$1.rgb.ansi16(convert$1.hsv.rgb(args),args[2])},convert$1.rgb.ansi256=function(args){var r=args[0],g=args[1],b=args[2];return r===g&&g===b?r<8?16:r>248?231:Math.round((r-8)/247*24)+232:16+36*Math.round(r/255*5)+6*Math.round(g/255*5)+Math.round(b/255*5)},convert$1.ansi16.rgb=function(args){var color=args%10;if(0===color||7===color)return args>50&&(color+=3.5),[color=color/10.5*255,color,color];var mult=.5*(1+~~(args>50));return[(1&color)*mult*255,(color>>1&1)*mult*255,(color>>2&1)*mult*255]},convert$1.ansi256.rgb=function(args){if(args>=232){var _c=10*(args-232)+8;return[_c,_c,_c]}var rem;return args-=16,[Math.floor(args/36)/5*255,Math.floor((rem=args%36)/6)/5*255,rem%6/5*255]},convert$1.rgb.hex=function(args){var string=(((255&Math.round(args[0]))<<16)+((255&Math.round(args[1]))<<8)+(255&Math.round(args[2]))).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert$1.hex.rgb=function(args){var match=args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!match)return[0,0,0];var colorString=match[0];3===match[0].length&&(colorString=colorString.split("").map((function(char){return char+char})).join(""));var integer=parseInt(colorString,16);return[integer>>16&255,integer>>8&255,255&integer]},convert$1.rgb.hcg=function(rgb){var hue,r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,max=Math.max(Math.max(r,g),b),min=Math.min(Math.min(r,g),b),chroma=max-min;return hue=chroma<=0?0:max===r?(g-b)/chroma%6:max===g?2+(b-r)/chroma:4+(r-g)/chroma,hue/=6,[360*(hue%=1),100*chroma,100*(chroma<1?min/(1-chroma):0)]},convert$1.hsl.hcg=function(hsl){var s=hsl[1]/100,l=hsl[2]/100,c=l<.5?2*s*l:2*s*(1-l),f=0;return c<1&&(f=(l-.5*c)/(1-c)),[hsl[0],100*c,100*f]},convert$1.hsv.hcg=function(hsv){var s=hsv[1]/100,v=hsv[2]/100,c=s*v,f=0;return c<1&&(f=(v-c)/(1-c)),[hsv[0],100*c,100*f]},convert$1.hcg.rgb=function(hcg){var h=hcg[0]/360,c=hcg[1]/100,g=hcg[2]/100;if(0===c)return[255*g,255*g,255*g];var mg,pure=[0,0,0],hi=h%1*6,v=hi%1,w=1-v;switch(Math.floor(hi)){case 0:pure[0]=1,pure[1]=v,pure[2]=0;break;case 1:pure[0]=w,pure[1]=1,pure[2]=0;break;case 2:pure[0]=0,pure[1]=1,pure[2]=v;break;case 3:pure[0]=0,pure[1]=w,pure[2]=1;break;case 4:pure[0]=v,pure[1]=0,pure[2]=1;break;default:pure[0]=1,pure[1]=0,pure[2]=w}return mg=(1-c)*g,[255*(c*pure[0]+mg),255*(c*pure[1]+mg),255*(c*pure[2]+mg)]},convert$1.hcg.hsv=function(hcg){var c=hcg[1]/100,v=c+hcg[2]/100*(1-c),f=0;return v>0&&(f=c/v),[hcg[0],100*f,100*v]},convert$1.hcg.hsl=function(hcg){var c=hcg[1]/100,l=hcg[2]/100*(1-c)+.5*c,s=0;return l>0&&l<.5?s=c/(2*l):l>=.5&&l<1&&(s=c/(2*(1-l))),[hcg[0],100*s,100*l]},convert$1.hcg.hwb=function(hcg){var c=hcg[1]/100,v=c+hcg[2]/100*(1-c);return[hcg[0],100*(v-c),100*(1-v)]},convert$1.hwb.hcg=function(hwb){var w=hwb[1]/100,v=1-hwb[2]/100,c=v-w,g=0;return c<1&&(g=(v-c)/(1-c)),[hwb[0],100*c,100*g]},convert$1.apple.rgb=function(apple){return[apple[0]/65535*255,apple[1]/65535*255,apple[2]/65535*255]},convert$1.rgb.apple=function(rgb){return[rgb[0]/255*65535,rgb[1]/255*65535,rgb[2]/255*65535]},convert$1.gray.rgb=function(args){return[args[0]/100*255,args[0]/100*255,args[0]/100*255]},convert$1.gray.hsl=function(args){return[0,0,args[0]]},convert$1.gray.hsv=convert$1.gray.hsl,convert$1.gray.hwb=function(gray){return[0,100,gray[0]]},convert$1.gray.cmyk=function(gray){return[0,0,0,gray[0]]},convert$1.gray.lab=function(gray){return[gray[0],0,0]},convert$1.gray.hex=function(gray){var val=255&Math.round(gray[0]/100*255),string=((val<<16)+(val<<8)+val).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert$1.rgb.gray=function(rgb){return[(rgb[0]+rgb[1]+rgb[2])/3/255*100]};var conversions$1=conversions$2;function deriveBFS(fromModel){var graph=function buildGraph(){for(var graph={},models=Object.keys(conversions$1),len=models.length,_i5=0;_i51&&(args=arg0);var result=fn(args);if("object"===_typeof(result))for(var len=result.length,_i8=0;_i81&&(args=arg0),fn(args))};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn)}))}));var colorConvert=convert,root=_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.u,now_1=function now$1(){return root.Date.now()},reWhitespace=/\s/;var trimmedEndIndex=function trimmedEndIndex$1(string){for(var index=string.length;index--&&reWhitespace.test(string.charAt(index)););return index},reTrimStart=/^\s+/;var baseTrim=function baseTrim$1(string){return string?string.slice(0,trimmedEndIndex(string)+1).replace(reTrimStart,""):string},isObject$2=_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.x,isSymbol=_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.y,reIsBadHex=/^[-+]0x[0-9a-f]+$/i,reIsBinary=/^0b[01]+$/i,reIsOctal=/^0o[0-7]+$/i,freeParseInt=parseInt;var toNumber_1=function toNumber$1(value){if("number"==typeof value)return value;if(isSymbol(value))return NaN;if(isObject$2(value)){var other="function"==typeof value.valueOf?value.valueOf():value;value=isObject$2(other)?other+"":other}if("string"!=typeof value)return 0===value?value:+value;value=baseTrim(value);var isBinary=reIsBinary.test(value);return isBinary||reIsOctal.test(value)?freeParseInt(value.slice(2),isBinary?2:8):reIsBadHex.test(value)?NaN:+value},isObject$1=_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.x,now=now_1,toNumber=toNumber_1,nativeMax=Math.max,nativeMin=Math.min;var debounce=function debounce$1(func,wait,options){var lastArgs,lastThis,maxWait,result,timerId,lastCallTime,lastInvokeTime=0,leading=!1,maxing=!1,trailing=!0;if("function"!=typeof func)throw new TypeError("Expected a function");function invokeFunc(time){var args=lastArgs,thisArg=lastThis;return lastArgs=lastThis=void 0,lastInvokeTime=time,result=func.apply(thisArg,args)}function leadingEdge(time){return lastInvokeTime=time,timerId=setTimeout(timerExpired,wait),leading?invokeFunc(time):result}function shouldInvoke(time){var timeSinceLastCall=time-lastCallTime;return void 0===lastCallTime||timeSinceLastCall>=wait||timeSinceLastCall<0||maxing&&time-lastInvokeTime>=maxWait}function timerExpired(){var time=now();if(shouldInvoke(time))return trailingEdge(time);timerId=setTimeout(timerExpired,function remainingWait(time){var timeWaiting=wait-(time-lastCallTime);return maxing?nativeMin(timeWaiting,maxWait-(time-lastInvokeTime)):timeWaiting}(time))}function trailingEdge(time){return timerId=void 0,trailing&&lastArgs?invokeFunc(time):(lastArgs=lastThis=void 0,result)}function debounced(){var time=now(),isInvoking=shouldInvoke(time);if(lastArgs=arguments,lastThis=this,lastCallTime=time,isInvoking){if(void 0===timerId)return leadingEdge(lastCallTime);if(maxing)return clearTimeout(timerId),timerId=setTimeout(timerExpired,wait),invokeFunc(lastCallTime)}return void 0===timerId&&(timerId=setTimeout(timerExpired,wait)),result}return wait=toNumber(wait)||0,isObject$1(options)&&(leading=!!options.leading,maxWait=(maxing="maxWait"in options)?nativeMax(toNumber(options.maxWait)||0,wait):maxWait,trailing="trailing"in options?!!options.trailing:trailing),debounced.cancel=function cancel(){void 0!==timerId&&clearTimeout(timerId),lastInvokeTime=0,lastArgs=lastCallTime=lastThis=timerId=void 0},debounced.flush=function flush(){return void 0===timerId?result:trailingEdge(now())},debounced},isObject=_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.x;var ColorSpace,throttle_1=function throttle(func,wait,options){var leading=!0,trailing=!0;if("function"!=typeof func)throw new TypeError("Expected a function");return isObject(options)&&(leading="leading"in options?!!options.leading:leading,trailing="trailing"in options?!!options.trailing:trailing),debounce(func,wait,{leading,maxWait:wait,trailing})},Wrapper=_storybook_theming__WEBPACK_IMPORTED_MODULE_31__.zo.div({position:"relative",maxWidth:250}),PickerTooltip=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_31__.zo)(_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.W)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=_storybook_theming__WEBPACK_IMPORTED_MODULE_31__.zo.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_31__.zo)(_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.T)((function(_ref){return{fontFamily:_ref.theme.typography.fonts.base}})),Swatches=_storybook_theming__WEBPACK_IMPORTED_MODULE_31__.zo.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=_storybook_theming__WEBPACK_IMPORTED_MODULE_31__.zo.div((function(_ref2){var theme=_ref2.theme;return{width:16,height:16,boxShadow:_ref2.active?"".concat(theme.appBorderColor," 0 0 0 1px inset, ").concat(theme.color.mediumdark,"50 0 0 0 4px"):"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:theme.appBorderRadius}})),Swatch=function Swatch(_a){var value=_a.value,active=_a.active,onClick=_a.onClick,style=_a.style,props=(0,_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.a)(_a,["value","active","onClick","style"]),backgroundImage="linear-gradient(".concat(value,", ").concat(value,"), ").concat('url(\'data:image/svg+xml;charset=utf-8,\')',", linear-gradient(#fff, #fff)");return react__WEBPACK_IMPORTED_MODULE_26__.createElement(SwatchColor,Object.assign({},props,{active,onClick},{style:Object.assign(Object.assign({},style),{backgroundImage})}))},Input=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_31__.zo)(_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.F.Input)((function(_ref3){return{width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:_ref3.theme.typography.fonts.base}})),ToggleIcon=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_31__.zo)(_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.I)((function(_ref4){return{position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:_ref4.theme.input.color}}));!function(ColorSpace){ColorSpace.RGB="rgb",ColorSpace.HSL="hsl",ColorSpace.HEX="hex"}(ColorSpace||(ColorSpace={}));var COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker=(_defineProperty(_ColorPicker={},ColorSpace.HEX,(function J(r){return react__WEBPACK_IMPORTED_MODULE_26__.createElement($,u({},r,{colorModel:G}))})),_defineProperty(_ColorPicker,ColorSpace.RGB,(function pe(r){return react__WEBPACK_IMPORTED_MODULE_26__.createElement(U,u({},r,{colorModel:ge}))})),_defineProperty(_ColorPicker,ColorSpace.HSL,(function re(r){return react__WEBPACK_IMPORTED_MODULE_26__.createElement(U,u({},r,{colorModel:ee}))})),_ColorPicker),fallbackColor=(_defineProperty(_fallbackColor={},ColorSpace.HEX,"transparent"),_defineProperty(_fallbackColor,ColorSpace.RGB,"rgba(0, 0, 0, 0)"),_defineProperty(_fallbackColor,ColorSpace.HSL,"hsla(0, 0%, 0%, 0)"),_fallbackColor),stringToArgs=function stringToArgs(value){var match=null==value?void 0:value.match(COLOR_REGEXP);if(!match)return[0,0,0,1];var _match=_slicedToArray(match,5),x=_match[1],y=_match[2],z=_match[3],_match$=_match[4];return[x,y,z,void 0===_match$?1:_match$].map(Number)},parseValue=function parseValue(value){var _ref11;if(value){var valid=!0;if(RGB_REGEXP.test(value)){var _ref7,_stringToArgs2=_slicedToArray(stringToArgs(value),4),r=_stringToArgs2[0],_g=_stringToArgs2[1],_b=_stringToArgs2[2],a=_stringToArgs2[3],_ref6=_slicedToArray(colorConvert.rgb.hsl([r,_g,_b])||[0,0,0],3),_h=_ref6[0],_s2=_ref6[1],l=_ref6[2];return _defineProperty(_ref7={valid,value,keyword:colorConvert.rgb.keyword([r,_g,_b]),colorSpace:ColorSpace.RGB},ColorSpace.RGB,value),_defineProperty(_ref7,ColorSpace.HSL,"hsla(".concat(_h,", ").concat(_s2,"%, ").concat(l,"%, ").concat(a,")")),_defineProperty(_ref7,ColorSpace.HEX,"#".concat(colorConvert.rgb.hex([r,_g,_b]).toLowerCase())),_ref7}if(HSL_REGEXP.test(value)){var _ref10,_stringToArgs4=_slicedToArray(stringToArgs(value),4),_h2=_stringToArgs4[0],_s3=_stringToArgs4[1],_l=_stringToArgs4[2],_a2=_stringToArgs4[3],_ref9=_slicedToArray(colorConvert.hsl.rgb([_h2,_s3,_l])||[0,0,0],3),_r=_ref9[0],_g2=_ref9[1],_b2=_ref9[2];return _defineProperty(_ref10={valid,value,keyword:colorConvert.hsl.keyword([_h2,_s3,_l]),colorSpace:ColorSpace.HSL},ColorSpace.RGB,"rgba(".concat(_r,", ").concat(_g2,", ").concat(_b2,", ").concat(_a2,")")),_defineProperty(_ref10,ColorSpace.HSL,value),_defineProperty(_ref10,ColorSpace.HEX,"#".concat(colorConvert.hsl.hex([_h2,_s3,_l]).toLowerCase())),_ref10}var plain=value.replace("#",""),rgb=colorConvert.keyword.rgb(plain)||colorConvert.hex.rgb(plain),hsl=colorConvert.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped="#".concat(plain)),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{colorConvert.keyword.hex(mapped)}catch(e){valid=!1}return _defineProperty(_ref11={valid,value:mapped,keyword:colorConvert.rgb.keyword(rgb),colorSpace:ColorSpace.HEX},ColorSpace.RGB,"rgba(".concat(rgb[0],", ").concat(rgb[1],", ").concat(rgb[2],", 1)")),_defineProperty(_ref11,ColorSpace.HSL,"hsla(".concat(hsl[0],", ").concat(hsl[1],"%, ").concat(hsl[2],"%, 1)")),_defineProperty(_ref11,ColorSpace.HEX,mapped),_ref11}},useColorInput=function useColorInput(initialValue,onChange){var _useState2=_slicedToArray((0,react__WEBPACK_IMPORTED_MODULE_26__.useState)(initialValue||""),2),value=_useState2[0],setValue=_useState2[1],_useState4=_slicedToArray((0,react__WEBPACK_IMPORTED_MODULE_26__.useState)((function(){return parseValue(value)})),2),color=_useState4[0],setColor=_useState4[1],_useState6=_slicedToArray((0,react__WEBPACK_IMPORTED_MODULE_26__.useState)((null==color?void 0:color.colorSpace)||ColorSpace.HEX),2),colorSpace=_useState6[0],setColorSpace=_useState6[1];(0,react__WEBPACK_IMPORTED_MODULE_26__.useEffect)((function(){void 0===initialValue&&(setValue(""),setColor(void 0),setColorSpace(ColorSpace.HEX))}),[initialValue]);var realValue=(0,react__WEBPACK_IMPORTED_MODULE_26__.useMemo)((function(){return function getRealValue(value,color,colorSpace){if(!value||!(null==color?void 0:color.valid))return fallbackColor[colorSpace];if(colorSpace!==ColorSpace.HEX)return(null==color?void 0:color[colorSpace])||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return"#".concat(colorConvert.keyword.hex(color.hex))}catch(e){return fallbackColor.hex}var short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;var _short$1$split2=_slicedToArray(short[1].split(""),3),r=_short$1$split2[0],g=_short$1$split2[1],b=_short$1$split2[2];return"#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b)}(value,color,colorSpace).toLowerCase()}),[value,color,colorSpace]),updateValue=(0,react__WEBPACK_IMPORTED_MODULE_26__.useCallback)((function(update){var parsed=parseValue(update);setValue((null==parsed?void 0:parsed.value)||update||""),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))}),[onChange]),cycleColorSpace=(0,react__WEBPACK_IMPORTED_MODULE_26__.useCallback)((function(){var next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);var update=(null==color?void 0:color[COLOR_SPACES[next]])||"";setValue(update),onChange(update)}),[color,colorSpace,onChange]);return{value,realValue,updateValue,color,colorSpace,cycleColorSpace}},id=function id(value){return value.replace(/\s*/,"").toLowerCase()},ColorControl=function ColorControl(_ref12){var name=_ref12.name,initialValue=_ref12.value,onChange=_ref12.onChange,onFocus=_ref12.onFocus,onBlur=_ref12.onBlur,presetColors=_ref12.presetColors,startOpen=_ref12.startOpen,_useColorInput=useColorInput(initialValue,throttle_1(onChange,200)),value=_useColorInput.value,realValue=_useColorInput.realValue,updateValue=_useColorInput.updateValue,color=_useColorInput.color,colorSpace=_useColorInput.colorSpace,cycleColorSpace=_useColorInput.cycleColorSpace,_usePresets=function usePresets(presetColors,currentColor,colorSpace){var _useState8=_slicedToArray((0,react__WEBPACK_IMPORTED_MODULE_26__.useState)((null==currentColor?void 0:currentColor.valid)?[currentColor]:[]),2),selectedColors=_useState8[0],setSelectedColors=_useState8[1];(0,react__WEBPACK_IMPORTED_MODULE_26__.useEffect)((function(){void 0===currentColor&&setSelectedColors([])}),[currentColor]);var presets=(0,react__WEBPACK_IMPORTED_MODULE_26__.useMemo)((function(){return(presetColors||[]).map((function(preset){return"string"==typeof preset?parseValue(preset):preset.title?Object.assign(Object.assign({},parseValue(preset.color)),{keyword:preset.title}):parseValue(preset.color)})).concat(selectedColors).filter(Boolean).slice(-27)}),[presetColors,selectedColors]),addPreset=(0,react__WEBPACK_IMPORTED_MODULE_26__.useCallback)((function(color){(null==color?void 0:color.valid)&&(presets.some((function(preset){return id(preset[colorSpace])===id(color[colorSpace])}))||setSelectedColors((function(arr){return arr.concat(color)})))}),[colorSpace,presets]);return{presets,addPreset}}(presetColors,color,colorSpace),presets=_usePresets.presets,addPreset=_usePresets.addPreset,Picker=ColorPicker[colorSpace];return react__WEBPACK_IMPORTED_MODULE_26__.createElement(Wrapper,null,react__WEBPACK_IMPORTED_MODULE_26__.createElement(PickerTooltip,{trigger:"click",startOpen,closeOnClick:!0,onVisibilityChange:function onVisibilityChange(){return addPreset(color)},tooltip:react__WEBPACK_IMPORTED_MODULE_26__.createElement(TooltipContent,null,react__WEBPACK_IMPORTED_MODULE_26__.createElement(Picker,Object.assign({color:"transparent"===realValue?"#000000":realValue},{onChange:updateValue,onFocus,onBlur})),presets.length>0&&react__WEBPACK_IMPORTED_MODULE_26__.createElement(Swatches,null,presets.map((function(preset,index){return react__WEBPACK_IMPORTED_MODULE_26__.createElement(_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.W,{key:"".concat(preset.value,"-").concat(index),hasChrome:!1,tooltip:react__WEBPACK_IMPORTED_MODULE_26__.createElement(Note,{note:preset.keyword||preset.value})},react__WEBPACK_IMPORTED_MODULE_26__.createElement(Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:function onClick(){return updateValue(preset.value)}}))}))))},react__WEBPACK_IMPORTED_MODULE_26__.createElement(Swatch,{value:realValue,style:{margin:4}})),react__WEBPACK_IMPORTED_MODULE_26__.createElement(Input,{id:(0,_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_30__.z)(name),value,onChange:function onChange(e){return updateValue(e.target.value)},onFocus:function onFocus(e){return e.target.select()},placeholder:"Choose color..."}),value?react__WEBPACK_IMPORTED_MODULE_26__.createElement(ToggleIcon,{icon:"markup",onClick:cycleColorSpace}):null)}}}]);


--------------------------------------------------------------------------------