├── .github ├── dependabot.yml └── workflows │ ├── test.yml │ └── updater.yaml ├── .gitignore ├── .husky └── pre-push ├── .prettierignore ├── .prettierrc.json ├── .storybook ├── components │ └── Container.tsx ├── main.ts ├── manager.ts ├── preview.tsx └── storybook.scss ├── LICENSE ├── README.md ├── babel.config.json ├── declarations.d.ts ├── docs ├── .nojekyll ├── assets │ ├── ActivityCalendar-CcM7Y7xD.css │ ├── ActivityCalendar.stories-BZ5yPopO.js │ ├── Color-YHDXOIA2-DUlIWsm9.js │ ├── DocsRenderer-CFRXHY34-YoEPFst5.js │ ├── entry-preview-CO6-uJzu.js │ ├── entry-preview-docs-BQY5RkOy.js │ ├── iframe-CyHCzw2A.js │ ├── index-2yJIXLcc.js │ ├── index-BCHAsNWv.js │ ├── index-BOBRWp11.js │ ├── index-Bn05qqr6.js │ ├── index-CNbbU42o.js │ ├── index-CXQShRbs.js │ ├── index-DrFu-skq.js │ ├── index-DwOlTBOG.js │ ├── preview-B8lJiyuQ.js │ ├── preview-BBWR9nbA.js │ ├── preview-BWzBA1C2.js │ ├── preview-CvbIS5ZJ.js │ ├── preview-DGUiP6tS.js │ ├── preview-DGgFcJKY.js │ ├── preview-DHQbi4pV.js │ ├── preview-DdtL0eBr.css │ ├── preview-tdGMCZtC.js │ ├── react-18-BFsVzg-s.js │ └── react-CxVRKATl.js ├── favicon.svg ├── iframe.html ├── index.html ├── index.json ├── nunito-sans-bold-italic.woff2 ├── nunito-sans-bold.woff2 ├── nunito-sans-italic.woff2 ├── nunito-sans-regular.woff2 ├── project.json ├── sb-addons │ ├── essentials-backgrounds-3 │ │ └── manager-bundle.js │ ├── essentials-controls-1 │ │ └── manager-bundle.js │ ├── essentials-docs-2 │ │ └── manager-bundle.js │ ├── essentials-measure-6 │ │ └── manager-bundle.js │ ├── essentials-outline-7 │ │ └── manager-bundle.js │ ├── essentials-toolbars-5 │ │ └── manager-bundle.js │ ├── essentials-viewport-4 │ │ └── manager-bundle.js │ ├── links-8 │ │ └── manager-bundle.js │ ├── storybook-10 │ │ └── manager-bundle.js │ ├── storybook-core-core-server-presets-0 │ │ └── common-manager-bundle.js │ └── storybook-dark-mode-esm-preset-9 │ │ └── manager-bundle.js ├── sb-common-assets │ ├── favicon.svg │ ├── nunito-sans-bold-italic.woff2 │ ├── nunito-sans-bold.woff2 │ ├── nunito-sans-italic.woff2 │ └── nunito-sans-regular.woff2 └── sb-manager │ ├── globals-module-info.js │ ├── globals-runtime.js │ ├── globals.js │ └── runtime.js ├── eslint.config.mjs ├── examples ├── customization.tsx ├── event-handlers-type.tsx ├── event-handlers.tsx ├── labels-shape.tsx ├── labels.tsx ├── ref.tsx ├── themes-explicit.tsx ├── themes.tsx ├── tooltips-mui.tsx └── tooltips-react.tsx ├── package.json ├── pnpm-lock.yaml ├── rollup.config.mjs ├── screenshot.png ├── src ├── component │ ├── ActivityCalendar.stories.tsx │ ├── ActivityCalendar.tsx │ └── styles.ts ├── constants.ts ├── hooks │ ├── useColorScheme.ts │ ├── useLoadingAnimation.ts │ └── usePrefersReducedMotion.ts ├── index.tsx ├── lib │ ├── calendar.test.ts │ ├── calendar.ts │ ├── label.test.ts │ ├── label.ts │ ├── theme.test.ts │ └── theme.ts └── types.ts ├── tsconfig.json └── vite.config.mts /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 2 | version: 2 3 | updates: 4 | - package-ecosystem: 'npm' 5 | directory: '/' 6 | schedule: 7 | interval: 'weekly' 8 | groups: 9 | dependencies: 10 | patterns: 11 | - '*' 12 | update-types: 13 | - 'minor' 14 | - 'patch' 15 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Tests 2 | 3 | on: 4 | - push 5 | - pull_request 6 | 7 | jobs: 8 | test: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v4.2.2 12 | 13 | - uses: actions/setup-node@v4.4.0 14 | with: 15 | node-version: 20 16 | 17 | - uses: pnpm/action-setup@v4.1.0 18 | name: Install pnpm 19 | with: 20 | version: 9 21 | run_install: false 22 | 23 | - name: Get pnpm store directory 24 | shell: bash 25 | run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV 26 | 27 | - uses: actions/cache@v4.2.3 28 | name: Setup pnpm cache 29 | with: 30 | path: ${{ env.STORE_PATH }} 31 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 32 | restore-keys: ${{ runner.os }}-pnpm-store- 33 | 34 | - name: Install dependencies 35 | run: pnpm install -r --ignore-scripts 36 | 37 | - name: Check formatting (Prettier) 38 | run: pnpx prettier -c . 39 | 40 | - name: Run unit tests 41 | run: pnpm test 42 | 43 | - name: Run type checks (TypeScript) 44 | run: pnpm tsc 45 | 46 | - name: Run linter (ESLint) 47 | run: pnpm lint 48 | -------------------------------------------------------------------------------- /.github/workflows/updater.yaml: -------------------------------------------------------------------------------- 1 | name: GitHub actions updater 2 | 3 | on: 4 | workflow_dispatch: 5 | schedule: 6 | - cron: '0 0 * * 0' # every Sunday 7 | 8 | jobs: 9 | build: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v4.2.2 13 | with: 14 | token: ${{ secrets.WORKFLOW_SECRET }} # Access token with `workflow` scope 15 | 16 | - name: Run GitHub Actions Version Updater 17 | uses: saadmk11/github-actions-version-updater@v0.8.1 18 | with: 19 | # [Required] Access token with `workflow` scope. 20 | token: ${{ secrets.WORKFLOW_SECRET }} # Access token with `workflow` scope 21 | committer_username: 'Jonathan Gruber' 22 | committer_email: 'gruberjonathan@gmail.com' 23 | commit_message: 'Update GitHub actions' 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | coverage/ 4 | bundle.html 5 | 6 | .env.* 7 | .log* 8 | 9 | .vscode/ 10 | .idea/ 11 | .directory 12 | .DS_Store 13 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | pnpm check 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | build/ 2 | docs/ 3 | examples/ 4 | pnpm-lock.yaml 5 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["@ianvs/prettier-plugin-sort-imports"], 3 | "importOrder": ["", "^react$", "", "^[.]"], 4 | "importOrderParserPlugins": ["typescript", "jsx", "importAttributes"], 5 | "importOrderTypeScriptVersion": "5.7.0", 6 | "arrowParens": "avoid", 7 | "printWidth": 100, 8 | "proseWrap": "always", 9 | "singleQuote": true, 10 | "semi": false, 11 | "overrides": [ 12 | { 13 | "files": "*.d.ts", 14 | "options": { 15 | "importOrderParserPlugins": ["[\"typescript\", { \"dts\": true }]"] 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /.storybook/components/Container.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from 'react' 2 | 3 | const Container = ({ children }: { children: ReactNode }) => { 4 | return
{children}
5 | } 6 | 7 | export default Container 8 | -------------------------------------------------------------------------------- /.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite' 2 | 3 | const config: StorybookConfig = { 4 | core: { 5 | builder: '@storybook/builder-vite', 6 | }, 7 | framework: '@storybook/react-vite', 8 | stories: ['../src/**/*.stories.@(ts|tsx)'], 9 | addons: [ 10 | { 11 | name: '@storybook/addon-essentials', 12 | options: { 13 | actions: false, 14 | }, 15 | }, 16 | '@storybook/addon-links', 17 | 'storybook-dark-mode', 18 | ], 19 | typescript: { 20 | reactDocgen: 'react-docgen', 21 | }, 22 | } 23 | 24 | export default config 25 | -------------------------------------------------------------------------------- /.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | import ReactGA from 'react-ga4' 2 | 3 | ReactGA.initialize('G-V30ERZKLWJ', { 4 | gtagOptions: { 5 | anonymizeIp: true, 6 | content_group: 'storybook', 7 | }, 8 | }) 9 | -------------------------------------------------------------------------------- /.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | import { DocsContainer, type DocsContainerProps } from '@storybook/blocks' 3 | import type { Preview } from '@storybook/react' 4 | import { themes, type ThemeVarsPartial } from '@storybook/theming' 5 | import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode' 6 | import './storybook.scss' 7 | 8 | const baseTheme = { 9 | base: 'light', 10 | brandTitle: 'React Activity Calendar', 11 | brandUrl: 'https://github.com/grubersjoe/react-activity-calendar', 12 | } satisfies ThemeVarsPartial 13 | 14 | const themeOverride = { 15 | fontBase: 'ui-sans-serif, sans-serif', 16 | fontCode: 'ui-monospace, monospace', 17 | } satisfies Omit 18 | 19 | const Container = (props: DocsContainerProps) => { 20 | const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches 21 | const [theme, setTheme] = useState(prefersDark ? themes.dark : themes.light) 22 | 23 | // useDarkMode() cannot be used for doc pages anymore: 24 | // https://github.com/hipstersmoothie/storybook-dark-mode/issues/282 25 | // Workaround: 26 | useEffect(() => { 27 | const listener = (isDark: boolean) => { 28 | setTheme(isDark ? themes.dark : themes.light) 29 | } 30 | 31 | props.context.channel.on(DARK_MODE_EVENT_NAME, listener) 32 | 33 | return () => { 34 | props.context.channel.removeListener(DARK_MODE_EVENT_NAME, listener) 35 | } 36 | }, [props.context.channel]) 37 | 38 | return ( 39 | 47 | ) 48 | } 49 | 50 | export const preview: Preview = { 51 | parameters: { 52 | docs: { 53 | toc: true, 54 | container: Container, 55 | source: { 56 | language: 'tsx', 57 | }, 58 | }, 59 | darkMode: { 60 | stylePreview: true, 61 | dark: { ...baseTheme, ...themes.dark, ...themeOverride }, 62 | light: { ...baseTheme, ...themes.light, ...themeOverride }, 63 | }, 64 | }, 65 | } 66 | 67 | export default preview 68 | -------------------------------------------------------------------------------- /.storybook/storybook.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: ui-sans-serif, sans-serif; 3 | font-size: 16px; 4 | line-height: 1.5; 5 | } 6 | 7 | h1, 8 | h2, 9 | h3 { 10 | margin-top: 1em; 11 | margin-bottom: 0.375em; 12 | 13 | a { 14 | text-decoration: none; 15 | 16 | &:hover { 17 | text-decoration: underline; 18 | } 19 | } 20 | } 21 | 22 | h1 { 23 | margin-top: 0; 24 | } 25 | 26 | p { 27 | margin: 0 0 1.25em; 28 | } 29 | 30 | p, 31 | pre { 32 | box-sizing: border-box; 33 | max-width: 720px; 34 | } 35 | 36 | pre, 37 | code { 38 | font-family: ui-monospace, monospace; 39 | font-size: 14px; 40 | } 41 | 42 | a { 43 | color: inherit; 44 | text-underline-offset: 3px; 45 | text-decoration-color: #bbb; 46 | 47 | &:hover { 48 | text-decoration-color: #888; 49 | } 50 | } 51 | 52 | #storybook-root { 53 | overflow: hidden; 54 | } 55 | 56 | .dark { 57 | &.sb-show-main { 58 | color: #fff; 59 | background-color: hsl(0, 0%, 12%); 60 | } 61 | 62 | .docblock-source { 63 | background: hsl(0, 0%, 12%); 64 | } 65 | } 66 | 67 | .sbdocs { 68 | td pre > code { 69 | white-space: pre !important; 70 | } 71 | } 72 | 73 | .sb-show-main.sb-main-centered #storybook-root { 74 | padding: 2.5rem; // weekday labels 75 | } 76 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Jonathan Gruber 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 | # React Activity Calendar 2 | 3 | [![CI](https://github.com/grubersjoe/react-activity-calendar/actions/workflows/test.yml/badge.svg)](https://github.com/grubersjoe/react-activity-calendar/actions/workflows/test.yml) 4 | [![npm version](https://badge.fury.io/js/react-activity-calendar.svg)](https://www.npmjs.com/package/react-activity-calendar) 5 | 6 | A React component to display activity data in a calendar (heatmap).
7 | **[Documentation (Storybook)](https://grubersjoe.github.io/react-activity-calendar)** 8 | 9 | ![Screenshot](screenshot.png) 10 | 11 | ## Installation 12 | 13 | ```shell 14 | npm install react-activity-calendar 15 | ``` 16 | 17 | ## Features 18 | 19 | - any number of activity levels 📈 20 | - color themes 🌈 21 | - dark & light mode ✨ 22 | - tooltips 🪧 23 | - event handlers ⁉️ 24 | - localization 🌍 25 | 26 | The component expects activity data in the following structure. Each activity level must be in the 27 | interval from 0 to `maxLevel`, which is 4 per default (see 28 | [documentation](https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--activity-levels)). 29 | It is up to you how to generate and classify your data. 30 | 31 | ```tsx 32 | import { ActivityCalendar } from 'react-activity-calendar' 33 | 34 | const data = [ 35 | { 36 | date: '2024-06-23', 37 | count: 2, 38 | level: 1, 39 | }, 40 | { 41 | date: '2024-08-02', 42 | count: 16, 43 | level: 4, 44 | }, 45 | { 46 | date: '2024-11-29', 47 | count: 11, 48 | level: 3, 49 | }, 50 | ] 51 | 52 | function Calendar() { 53 | return 54 | } 55 | ``` 56 | 57 | ## FAQ 58 | 59 | ### Why does the calendar not render in environment x? 60 | 61 | If you encounter issues rendering this component in a specific React framework, please refer to the 62 | following repository. It contains working examples for Astro, Next.js, Remix and Vite. Server side 63 | rendering (SSR) is supported. 64 | 65 | [Framework examples](https://github.com/grubersjoe/react-activity-calendar-tests) 66 | 67 | ### Why is Create React App unsupported? 68 | 69 | Create React App (CRA) is considered 70 | [abandoned](https://github.com/facebook/create-react-app/discussions/11086), and you probably should 71 | not use it anymore (more 72 | [background](https://github.com/facebook/create-react-app/issues/11180#issuecomment-874748552)). 73 | Using this component inside CRA will lead to errors for reasons described in issue 74 | [#105](https://github.com/grubersjoe/react-activity-calendar/issues/105). This repo is not for CRA 75 | support questions. If you encounter issues, you need to fix those yourself given the maintenance 76 | state of CRA. Personally, I would recommend using [Vite](https://vitejs.dev/) instead of CRA. 77 | 78 | ### Why is the tooltip library x unsupported? 79 | 80 | It seems impossible to support all kinds of tooltip libraries since they are all implemented 81 | differently. See this [issue](https://github.com/grubersjoe/react-activity-calendar/issues/32) and 82 | especially this 83 | [comment](https://github.com/grubersjoe/react-activity-calendar/issues/32#issuecomment-1735208729). 84 | The next major version will be based on a headless approach for tooltips, so that styling is 85 | completely up to the user. 86 | 87 | ## Development 88 | 89 | ### Start the Storybook 90 | 91 | ```shell 92 | npm run storybook 93 | ``` 94 | 95 | ### Update the documentation 96 | 97 | ```shell 98 | npm run build:storybook 99 | ``` 100 | 101 | ## Related projects 102 | 103 | - [grubersjoe/react-github-calendar](https://github.com/grubersjoe/react-github-calendar) 104 | - [grubersjoe/github-contributions-api](https://github.com/grubersjoe/github-contributions-api) 105 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | [ 6 | "@babel/preset-react", 7 | { 8 | "runtime": "automatic" 9 | } 10 | ] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*?raw' { 2 | const content: string 3 | export default content 4 | } 5 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/.nojekyll -------------------------------------------------------------------------------- /docs/assets/ActivityCalendar-CcM7Y7xD.css: -------------------------------------------------------------------------------- 1 | :root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:.9;--rt-transition-show-delay:.15s;--rt-transition-closing-delay:.15s}.core-styles-module_tooltip__3vRRp{left:0;opacity:0;pointer-events:none;position:absolute;top:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{background:inherit;position:absolute}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay) ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay) ease-in}.styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;padding:8px 16px;width:max-content}.styles-module_arrow__K0L3T{height:8px;width:8px}[class*=react-tooltip__place-top]>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*=react-tooltip__place-right]>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*=react-tooltip__place-bottom]>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*=react-tooltip__place-left]>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)} 2 | -------------------------------------------------------------------------------- /docs/assets/DocsRenderer-CFRXHY34-YoEPFst5.js: -------------------------------------------------------------------------------- 1 | const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-DwOlTBOG.js","./index-2yJIXLcc.js"])))=>i.map(i=>d[i]); 2 | import{_ as c}from"./iframe-CyHCzw2A.js";import{R as e,r as p}from"./index-2yJIXLcc.js";import{H as l,A as u,C as h,D as E}from"./index-BOBRWp11.js";import{renderElement as d,unmountElement as x}from"./react-18-BFsVzg-s.js";import"./index-BCHAsNWv.js";import"./index-Bn05qqr6.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";var D={code:h,a:u,...l},_=class extends p.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){let{showException:r}=this.props;r(t)}render(){let{hasError:t}=this.state,{children:r}=this.props;return t?null:e.createElement(e.Fragment,null,r)}},A=class{constructor(){this.render=async(t,r,n)=>{let s={...D,...r==null?void 0:r.components},a=E;return new Promise((m,i)=>{c(async()=>{const{MDXProvider:o}=await import("./index-DwOlTBOG.js");return{MDXProvider:o}},__vite__mapDeps([0,1]),import.meta.url).then(({MDXProvider:o})=>d(e.createElement(_,{showException:i,key:Math.random()},e.createElement(o,{components:s},e.createElement(a,{context:t,docsParameter:r}))),n)).then(()=>m())})},this.unmount=t=>{x(t)}}};export{A as DocsRenderer,D as defaultComponents}; 3 | -------------------------------------------------------------------------------- /docs/assets/index-2yJIXLcc.js: -------------------------------------------------------------------------------- 1 | function J(p,d){for(var v=0;vl[_]})}}}return Object.freeze(Object.defineProperty(p,Symbol.toStringTag,{value:"Module"}))}function V(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var S={exports:{}},o={};/** 2 | * @license React 3 | * react.production.js 4 | * 5 | * Copyright (c) Meta Platforms, Inc. and affiliates. 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */var x;function F(){if(x)return o;x=1;var p=Symbol.for("react.transitional.element"),d=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),l=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),R=Symbol.for("react.consumer"),D=Symbol.for("react.context"),U=Symbol.for("react.forward_ref"),q=Symbol.for("react.suspense"),z=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),h=Symbol.iterator;function G(t){return t===null||typeof t!="object"?null:(t=h&&t[h]||t["@@iterator"],typeof t=="function"?t:null)}var j={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},P=Object.assign,H={};function y(t,e,r){this.props=t,this.context=e,this.refs=H,this.updater=r||j}y.prototype.isReactComponent={},y.prototype.setState=function(t,e){if(typeof t!="object"&&typeof t!="function"&&t!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,t,e,"setState")},y.prototype.forceUpdate=function(t){this.updater.enqueueForceUpdate(this,t,"forceUpdate")};function $(){}$.prototype=y.prototype;function m(t,e,r){this.props=t,this.context=e,this.refs=H,this.updater=r||j}var C=m.prototype=new $;C.constructor=m,P(C,y.prototype),C.isPureReactComponent=!0;var N=Array.isArray,i={H:null,A:null,T:null,S:null},b=Object.prototype.hasOwnProperty;function g(t,e,r,n,s,f){return r=f.ref,{$$typeof:p,type:t,key:e,ref:r!==void 0?r:null,props:f}}function K(t,e){return g(t.type,e,void 0,void 0,void 0,t.props)}function w(t){return typeof t=="object"&&t!==null&&t.$$typeof===p}function B(t){var e={"=":"=0",":":"=2"};return"$"+t.replace(/[=:]/g,function(r){return e[r]})}var Y=/\/+/g;function A(t,e){return typeof t=="object"&&t!==null&&t.key!=null?B(""+t.key):e.toString(36)}function M(){}function W(t){switch(t.status){case"fulfilled":return t.value;case"rejected":throw t.reason;default:switch(typeof t.status=="string"?t.then(M,M):(t.status="pending",t.then(function(e){t.status==="pending"&&(t.status="fulfilled",t.value=e)},function(e){t.status==="pending"&&(t.status="rejected",t.reason=e)})),t.status){case"fulfilled":return t.value;case"rejected":throw t.reason}}throw t}function E(t,e,r,n,s){var f=typeof t;(f==="undefined"||f==="boolean")&&(t=null);var u=!1;if(t===null)u=!0;else switch(f){case"bigint":case"string":case"number":u=!0;break;case"object":switch(t.$$typeof){case p:case d:u=!0;break;case O:return u=t._init,E(u(t._payload),e,r,n,s)}}if(u)return s=s(t),u=n===""?"."+A(t,0):n,N(s)?(r="",u!=null&&(r=u.replace(Y,"$&/")+"/"),E(s,e,r,"",function(Z){return Z})):s!=null&&(w(s)&&(s=K(s,r+(s.key==null||t&&t.key===s.key?"":(""+s.key).replace(Y,"$&/")+"/")+u)),e.push(s)),1;u=0;var a=n===""?".":n+":";if(N(t))for(var c=0;c"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(u)}catch(g){console.error(g)}}return u(),y.exports=S(),y.exports}export{T as r}; 10 | -------------------------------------------------------------------------------- /docs/assets/index-CNbbU42o.js: -------------------------------------------------------------------------------- 1 | import{g as k}from"./index-2yJIXLcc.js";import{_ as b}from"./index-BCHAsNWv.js";var h="DARK_MODE",d,_;function I(){return _||(_=1,d=function t(r,e){if(r===e)return!0;if(r&&e&&typeof r=="object"&&typeof e=="object"){if(r.constructor!==e.constructor)return!1;var n,a,o;if(Array.isArray(r)){if(n=r.length,n!=e.length)return!1;for(a=n;a--!==0;)if(!t(r[a],e[a]))return!1;return!0}if(r.constructor===RegExp)return r.source===e.source&&r.flags===e.flags;if(r.valueOf!==Object.prototype.valueOf)return r.valueOf()===e.valueOf();if(r.toString!==Object.prototype.toString)return r.toString()===e.toString();if(o=Object.keys(r),n=o.length,n!==Object.keys(e).length)return!1;for(a=n;a--!==0;)if(!Object.prototype.hasOwnProperty.call(e,o[a]))return!1;for(a=n;a--!==0;){var u=o[a];if(!t(r[u],e[u]))return!1}return!0}return r!==r&&e!==e}),d}var R=I();const E=k(R);function s(t){"@babel/helpers - typeof";return s=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(r){return typeof r}:function(r){return r&&typeof Symbol=="function"&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},s(t)}var g;function A(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);r&&(n=n.filter(function(a){return Object.getOwnPropertyDescriptor(t,a).enumerable})),e.push.apply(e,n)}return e}function D(t){for(var r=1;rt.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&arguments[0]!==void 0?arguments[0]:{},e=m.localStorage.getItem(C);if(typeof e=="string"){var n=JSON.parse(e);return r&&(r.dark&&!E(n.dark,r.dark)&&(n.dark=r.dark,w(n)),r.light&&!E(n.light,r.light)&&(n.light=r.light,w(n))),n}return D(D({},O),r)};F(P());function G(t,r){return J(t)||$(t,r)||W(t,r)||V()}function V(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. 3 | In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function W(t,r){if(t){if(typeof t=="string")return T(t,r);var e=Object.prototype.toString.call(t).slice(8,-1);if(e==="Object"&&t.constructor&&(e=t.constructor.name),e==="Map"||e==="Set")return Array.from(t);if(e==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return T(t,r)}}function T(t,r){(r==null||r>t.length)&&(r=t.length);for(var e=0,n=new Array(r);e{var r;return!!((r=O==null?void 0:O.matchMedia("(prefers-reduced-motion: reduce)"))!=null&&r.matches)},A=r=>{(Array.isArray(r)?r:[r]).forEach(N)},N=r=>{var t;let e=b.getElementById(r);e&&((t=e.parentElement)==null||t.removeChild(e))},F=(r,e)=>{let t=b.getElementById(r);if(t)t.innerHTML!==e&&(t.innerHTML=e);else{let o=b.createElement("style");o.setAttribute("id",r),o.innerHTML=e,b.head.appendChild(o)}},Y=(r,e,t)=>{var a;let o=b.getElementById(r);if(o)o.innerHTML!==e&&(o.innerHTML=e);else{let d=b.createElement("style");d.setAttribute("id",r),d.innerHTML=e;let i=`addon-backgrounds-grid${t?`-docs-${t}`:""}`,n=b.getElementById(i);n?(a=n.parentElement)==null||a.insertBefore(d,n):b.head.appendChild(d)}},W={cellSize:100,cellAmount:10,opacity:.8},w="addon-backgrounds",R="addon-backgrounds-grid",q=D()?"":"transition: background-color 0.3s;",J=(r,e)=>{let{globals:t,parameters:o,viewMode:a,id:d}=e,{options:i=U,disable:n,grid:s=W}=o[p]||{},c=t[p]||{},u=c.value,l=u?i[u]:void 0,$=(l==null?void 0:l.value)||"transparent",f=c.grid||!1,y=!!l&&!n,m=a==="docs"?`#anchor--${d} .docs-story`:".sb-show-main",E=a==="docs"?`#anchor--${d} .docs-story`:".sb-show-main",H=o.layout===void 0||o.layout==="padded",L=a==="docs"?20:H?16:0,{cellAmount:k,cellSize:g,opacity:x,offsetX:v=L,offsetY:S=L}=s,B=a==="docs"?`${w}-docs-${d}`:`${w}-color`,G=a==="docs"?d:null;_(()=>{let M=` 2 | ${m} { 3 | background: ${$} !important; 4 | ${q} 5 | }`;if(!y){A(B);return}Y(B,M,G)},[m,B,G,y,$]);let T=a==="docs"?`${R}-docs-${d}`:`${R}`;return _(()=>{if(!f){A(T);return}let M=[`${g*k}px ${g*k}px`,`${g*k}px ${g*k}px`,`${g}px ${g}px`,`${g}px ${g}px`].join(", "),K=` 6 | ${E} { 7 | background-size: ${M} !important; 8 | background-position: ${v}px ${S}px, ${v}px ${S}px, ${v}px ${S}px, ${v}px ${S}px !important; 9 | background-blend-mode: difference !important; 10 | background-image: linear-gradient(rgba(130, 130, 130, ${x}) 1px, transparent 1px), 11 | linear-gradient(90deg, rgba(130, 130, 130, ${x}) 1px, transparent 1px), 12 | linear-gradient(rgba(130, 130, 130, ${x/2}) 1px, transparent 1px), 13 | linear-gradient(90deg, rgba(130, 130, 130, ${x/2}) 1px, transparent 1px) !important; 14 | } 15 | `;F(T,K)},[k,g,E,T,f,v,S,x]),r()},Q=(r,e=[],t)=>{if(r==="transparent")return"transparent";if(e.find(a=>a.value===r)||r)return r;let o=e.find(a=>a.name===t);if(o)return o.value;if(t){let a=e.map(d=>d.name).join(", ");X.warn(P` 16 | Backgrounds Addon: could not find the default color "${t}". 17 | These are the available colors for your story based on your configuration: 18 | ${a}. 19 | `)}return"transparent"},Z=(r,e)=>{var u;let{globals:t,parameters:o}=e,a=(u=t[p])==null?void 0:u.value,d=o[p],i=h(()=>d.disable?"transparent":Q(a,d.values,d.default),[d,a]),n=h(()=>i&&i!=="transparent",[i]),s=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",c=h(()=>` 20 | ${s} { 21 | background: ${i} !important; 22 | ${D()?"":"transition: background-color 0.3s;"} 23 | } 24 | `,[i,s]);return _(()=>{let l=e.viewMode==="docs"?`addon-backgrounds-docs-${e.id}`:"addon-backgrounds-color";if(!n){A(l);return}Y(l,c,e.viewMode==="docs"?e.id:null)},[n,c,e]),r()},V=(r,e)=>{var y;let{globals:t,parameters:o}=e,a=o[p].grid,d=((y=t[p])==null?void 0:y.grid)===!0&&a.disable!==!0,{cellAmount:i,cellSize:n,opacity:s}=a,c=e.viewMode==="docs",u=o.layout===void 0||o.layout==="padded"?16:0,l=a.offsetX??(c?20:u),$=a.offsetY??(c?20:u),f=h(()=>{let m=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",E=[`${n*i}px ${n*i}px`,`${n*i}px ${n*i}px`,`${n}px ${n}px`,`${n}px ${n}px`].join(", ");return` 25 | ${m} { 26 | background-size: ${E} !important; 27 | background-position: ${l}px ${$}px, ${l}px ${$}px, ${l}px ${$}px, ${l}px ${$}px !important; 28 | background-blend-mode: difference !important; 29 | background-image: linear-gradient(rgba(130, 130, 130, ${s}) 1px, transparent 1px), 30 | linear-gradient(90deg, rgba(130, 130, 130, ${s}) 1px, transparent 1px), 31 | linear-gradient(rgba(130, 130, 130, ${s/2}) 1px, transparent 1px), 32 | linear-gradient(90deg, rgba(130, 130, 130, ${s/2}) 1px, transparent 1px) !important; 33 | } 34 | `},[n]);return _(()=>{let m=e.viewMode==="docs"?`addon-backgrounds-grid-docs-${e.id}`:"addon-backgrounds-grid";if(!d){A(m);return}F(m,f)},[d,f,e]),r()},C,ae=(C=globalThis.FEATURES)!=null&&C.backgroundsStoryGlobals?[J]:[V,Z],I,oe={[p]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!((I=globalThis.FEATURES)!=null&&I.backgroundsStoryGlobals)&&{values:Object.values(U)}}},ee={[p]:{value:void 0,grid:!1}},z,de=(z=globalThis.FEATURES)!=null&&z.backgroundsStoryGlobals?ee:{[p]:null};export{ae as decorators,de as initialGlobals,oe as parameters}; 35 | -------------------------------------------------------------------------------- /docs/assets/preview-BBWR9nbA.js: -------------------------------------------------------------------------------- 1 | var j="Invariant failed";function S(e,t){if(!e)throw new Error(j)}const{useEffect:T}=__STORYBOOK_MODULE_PREVIEW_API__,{global:d}=__STORYBOOK_MODULE_GLOBAL__;var K="measureEnabled";function Y(){let e=d.document.documentElement,t=Math.max(e.scrollHeight,e.offsetHeight);return{width:Math.max(e.scrollWidth,e.offsetWidth),height:t}}function G(){let e=d.document.createElement("canvas");e.id="storybook-addon-measure";let t=e.getContext("2d");S(t!=null);let{width:o,height:l}=Y();return A(e,t,{width:o,height:l}),e.style.position="absolute",e.style.left="0",e.style.top="0",e.style.zIndex="2147483647",e.style.pointerEvents="none",d.document.body.appendChild(e),{canvas:e,context:t,width:o,height:l}}function A(e,t,{width:o,height:l}){e.style.width=`${o}px`,e.style.height=`${l}px`;let i=d.window.devicePixelRatio;e.width=Math.floor(o*i),e.height=Math.floor(l*i),t.scale(i,i)}var h={};function U(){h.canvas||(h=G())}function H(){h.context&&h.context.clearRect(0,0,h.width??0,h.height??0)}function V(e){H(),e(h.context)}function Z(){S(h.canvas),S(h.context),A(h.canvas,h.context,{width:0,height:0});let{width:e,height:t}=Y();A(h.canvas,h.context,{width:e,height:t}),h.width=e,h.height=t}function J(){var e;h.canvas&&(H(),(e=h.canvas.parentNode)==null||e.removeChild(h.canvas),h={})}var w={margin:"#f6b26b",border:"#ffe599",padding:"#93c47d",content:"#6fa8dc",text:"#232020"},c=6;function W(e,{x:t,y:o,w:l,h:i,r:n}){t=t-l/2,o=o-i/2,l<2*n&&(n=l/2),i<2*n&&(n=i/2),e.beginPath(),e.moveTo(t+n,o),e.arcTo(t+l,o,t+l,o+i,n),e.arcTo(t+l,o+i,t,o+i,n),e.arcTo(t,o+i,t,o,n),e.arcTo(t,o,t+l,o,n),e.closePath()}function Q(e,{padding:t,border:o,width:l,height:i,top:n,left:r}){let f=l-o.left-o.right-t.left-t.right,a=i-t.top-t.bottom-o.top-o.bottom,s=r+o.left+t.left,u=n+o.top+t.top;return e==="top"?s+=f/2:e==="right"?(s+=f,u+=a/2):e==="bottom"?(s+=f/2,u+=a):e==="left"?u+=a/2:e==="center"&&(s+=f/2,u+=a/2),{x:s,y:u}}function x(e,t,{margin:o,border:l,padding:i},n,r){let f=m=>0,a=0,s=0,u=r?1:.5,g=r?n*2:0;return e==="padding"?f=m=>i[m]*u+g:e==="border"?f=m=>i[m]+l[m]*u+g:e==="margin"&&(f=m=>i[m]+l[m]+o[m]*u+g),t==="top"?s=-f("top"):t==="right"?a=f("right"):t==="bottom"?s=f("bottom"):t==="left"&&(a=-f("left")),{offsetX:a,offsetY:s}}function tt(e,t){return Math.abs(e.x-t.x){let f=l&&n.position==="center"?lt(e,t,n):ot(e,t,n,i[r-1],l);i[r]=f})}function nt(e,t,o,l){let i=o.reduce((n,r)=>{var f;return Object.prototype.hasOwnProperty.call(n,r.position)||(n[r.position]=[]),(f=n[r.position])==null||f.push(r),n},{});i.top&&E(e,t,i.top,l),i.right&&E(e,t,i.right,l),i.bottom&&E(e,t,i.bottom,l),i.left&&E(e,t,i.left,l),i.center&&E(e,t,i.center,l)}var L={margin:"#f6b26ba8",border:"#ffe599a8",padding:"#93c47d8c",content:"#6fa8dca8"},B=30;function p(e){return parseInt(e.replace("px",""),10)}function b(e){return Number.isInteger(e)?e:e.toFixed(2)}function P(e){return e.filter(t=>t.text!==0&&t.text!=="0")}function ft(e){let t={top:d.window.scrollY,bottom:d.window.scrollY+d.window.innerHeight,left:d.window.scrollX,right:d.window.scrollX+d.window.innerWidth},o={top:Math.abs(t.top-e.top),bottom:Math.abs(t.bottom-e.bottom),left:Math.abs(t.left-e.left),right:Math.abs(t.right-e.right)};return{x:o.left>o.right?"left":"right",y:o.top>o.bottom?"top":"bottom"}}function rt(e){let t=d.getComputedStyle(e),{top:o,left:l,right:i,bottom:n,width:r,height:f}=e.getBoundingClientRect(),{marginTop:a,marginBottom:s,marginLeft:u,marginRight:g,paddingTop:m,paddingBottom:v,paddingLeft:k,paddingRight:F,borderBottomWidth:I,borderTopWidth:D,borderLeftWidth:$,borderRightWidth:N}=t;o=o+d.window.scrollY,l=l+d.window.scrollX,n=n+d.window.scrollY,i=i+d.window.scrollX;let y={top:p(a),bottom:p(s),left:p(u),right:p(g)},q={top:p(m),bottom:p(v),left:p(k),right:p(F)},z={top:p(D),bottom:p(I),left:p($),right:p(N)},_={top:o-y.top,bottom:n+y.bottom,left:l-y.left,right:i+y.right};return{margin:y,padding:q,border:z,top:o,left:l,bottom:n,right:i,width:r,height:f,extremities:_,floatingAlignment:ft(_)}}function at(e,{margin:t,width:o,height:l,top:i,left:n,bottom:r,right:f}){let a=l+t.bottom+t.top;e.fillStyle=L.margin,e.fillRect(n,i-t.top,o,t.top),e.fillRect(f,i-t.top,t.right,a),e.fillRect(n,r,o,t.bottom),e.fillRect(n-t.left,i-t.top,t.left,a);let s=[{type:"margin",text:b(t.top),position:"top"},{type:"margin",text:b(t.right),position:"right"},{type:"margin",text:b(t.bottom),position:"bottom"},{type:"margin",text:b(t.left),position:"left"}];return P(s)}function st(e,{padding:t,border:o,width:l,height:i,top:n,left:r,bottom:f,right:a}){let s=l-o.left-o.right,u=i-t.top-t.bottom-o.top-o.bottom;e.fillStyle=L.padding,e.fillRect(r+o.left,n+o.top,s,t.top),e.fillRect(a-t.right-o.right,n+t.top+o.top,t.right,u),e.fillRect(r+o.left,f-t.bottom-o.bottom,s,t.bottom),e.fillRect(r+o.left,n+t.top+o.top,t.left,u);let g=[{type:"padding",text:t.top,position:"top"},{type:"padding",text:t.right,position:"right"},{type:"padding",text:t.bottom,position:"bottom"},{type:"padding",text:t.left,position:"left"}];return P(g)}function ht(e,{border:t,width:o,height:l,top:i,left:n,bottom:r,right:f}){let a=l-t.top-t.bottom;e.fillStyle=L.border,e.fillRect(n,i,o,t.top),e.fillRect(n,r-t.bottom,o,t.bottom),e.fillRect(n,i+t.top,t.left,a),e.fillRect(f-t.right,i+t.top,t.right,a);let s=[{type:"border",text:t.top,position:"top"},{type:"border",text:t.right,position:"right"},{type:"border",text:t.bottom,position:"bottom"},{type:"border",text:t.left,position:"left"}];return P(s)}function ut(e,{padding:t,border:o,width:l,height:i,top:n,left:r}){let f=l-o.left-o.right-t.left-t.right,a=i-t.top-t.bottom-o.top-o.bottom;return e.fillStyle=L.content,e.fillRect(r+o.left+t.left,n+o.top+t.top,f,a),[{type:"content",position:"center",text:`${b(f)} x ${b(a)}`}]}function dt(e){return t=>{if(e&&t){let o=rt(e),l=at(t,o),i=st(t,o),n=ht(t,o),r=ut(t,o),f=o.width<=B*3||o.height<=B;nt(t,o,[...r,...i,...n,...l],f)}}}function mt(e){V(dt(e))}var gt=(e,t)=>{let o=d.document.elementFromPoint(e,t),l=i=>{if(i&&i.shadowRoot){let n=i.shadowRoot.elementFromPoint(e,t);return i.isEqualNode(n)?i:n.shadowRoot?l(n):n}return i};return l(o)||o},O,M={x:0,y:0};function R(e,t){O=gt(e,t),mt(O)}var pt=(e,t)=>{let{measureEnabled:o}=t.globals;return T(()=>{let l=i=>{window.requestAnimationFrame(()=>{i.stopPropagation(),M.x=i.clientX,M.y=i.clientY})};return document.addEventListener("pointermove",l),()=>{document.removeEventListener("pointermove",l)}},[]),T(()=>{let l=n=>{window.requestAnimationFrame(()=>{n.stopPropagation(),R(n.clientX,n.clientY)})},i=()=>{window.requestAnimationFrame(()=>{Z()})};return t.viewMode==="story"&&o&&(document.addEventListener("pointerover",l),U(),window.addEventListener("resize",i),R(M.x,M.y)),()=>{window.removeEventListener("resize",i),J()}},[o,t.viewMode]),e()},ct=[pt],wt={[K]:!1};export{ct as decorators,wt as initialGlobals}; 2 | -------------------------------------------------------------------------------- /docs/assets/preview-BWzBA1C2.js: -------------------------------------------------------------------------------- 1 | import{d as $}from"./index-DrFu-skq.js";const{useMemo:x,useEffect:f}=__STORYBOOK_MODULE_PREVIEW_API__,{global:p}=__STORYBOOK_MODULE_GLOBAL__;var m="outline",u=i=>{(Array.isArray(i)?i:[i]).forEach(r)},r=i=>{let t=typeof i=="string"?i:i.join(""),o=p.document.getElementById(t);o&&o.parentElement&&o.parentElement.removeChild(o)},b=(i,t)=>{let o=p.document.getElementById(i);if(o)o.innerHTML!==t&&(o.innerHTML=t);else{let n=p.document.createElement("style");n.setAttribute("id",i),n.innerHTML=t,p.document.head.appendChild(n)}};function s(i){return $` 2 | ${i} body { 3 | outline: 1px solid #2980b9 !important; 4 | } 5 | 6 | ${i} article { 7 | outline: 1px solid #3498db !important; 8 | } 9 | 10 | ${i} nav { 11 | outline: 1px solid #0088c3 !important; 12 | } 13 | 14 | ${i} aside { 15 | outline: 1px solid #33a0ce !important; 16 | } 17 | 18 | ${i} section { 19 | outline: 1px solid #66b8da !important; 20 | } 21 | 22 | ${i} header { 23 | outline: 1px solid #99cfe7 !important; 24 | } 25 | 26 | ${i} footer { 27 | outline: 1px solid #cce7f3 !important; 28 | } 29 | 30 | ${i} h1 { 31 | outline: 1px solid #162544 !important; 32 | } 33 | 34 | ${i} h2 { 35 | outline: 1px solid #314e6e !important; 36 | } 37 | 38 | ${i} h3 { 39 | outline: 1px solid #3e5e85 !important; 40 | } 41 | 42 | ${i} h4 { 43 | outline: 1px solid #449baf !important; 44 | } 45 | 46 | ${i} h5 { 47 | outline: 1px solid #c7d1cb !important; 48 | } 49 | 50 | ${i} h6 { 51 | outline: 1px solid #4371d0 !important; 52 | } 53 | 54 | ${i} main { 55 | outline: 1px solid #2f4f90 !important; 56 | } 57 | 58 | ${i} address { 59 | outline: 1px solid #1a2c51 !important; 60 | } 61 | 62 | ${i} div { 63 | outline: 1px solid #036cdb !important; 64 | } 65 | 66 | ${i} p { 67 | outline: 1px solid #ac050b !important; 68 | } 69 | 70 | ${i} hr { 71 | outline: 1px solid #ff063f !important; 72 | } 73 | 74 | ${i} pre { 75 | outline: 1px solid #850440 !important; 76 | } 77 | 78 | ${i} blockquote { 79 | outline: 1px solid #f1b8e7 !important; 80 | } 81 | 82 | ${i} ol { 83 | outline: 1px solid #ff050c !important; 84 | } 85 | 86 | ${i} ul { 87 | outline: 1px solid #d90416 !important; 88 | } 89 | 90 | ${i} li { 91 | outline: 1px solid #d90416 !important; 92 | } 93 | 94 | ${i} dl { 95 | outline: 1px solid #fd3427 !important; 96 | } 97 | 98 | ${i} dt { 99 | outline: 1px solid #ff0043 !important; 100 | } 101 | 102 | ${i} dd { 103 | outline: 1px solid #e80174 !important; 104 | } 105 | 106 | ${i} figure { 107 | outline: 1px solid #ff00bb !important; 108 | } 109 | 110 | ${i} figcaption { 111 | outline: 1px solid #bf0032 !important; 112 | } 113 | 114 | ${i} table { 115 | outline: 1px solid #00cc99 !important; 116 | } 117 | 118 | ${i} caption { 119 | outline: 1px solid #37ffc4 !important; 120 | } 121 | 122 | ${i} thead { 123 | outline: 1px solid #98daca !important; 124 | } 125 | 126 | ${i} tbody { 127 | outline: 1px solid #64a7a0 !important; 128 | } 129 | 130 | ${i} tfoot { 131 | outline: 1px solid #22746b !important; 132 | } 133 | 134 | ${i} tr { 135 | outline: 1px solid #86c0b2 !important; 136 | } 137 | 138 | ${i} th { 139 | outline: 1px solid #a1e7d6 !important; 140 | } 141 | 142 | ${i} td { 143 | outline: 1px solid #3f5a54 !important; 144 | } 145 | 146 | ${i} col { 147 | outline: 1px solid #6c9a8f !important; 148 | } 149 | 150 | ${i} colgroup { 151 | outline: 1px solid #6c9a9d !important; 152 | } 153 | 154 | ${i} button { 155 | outline: 1px solid #da8301 !important; 156 | } 157 | 158 | ${i} datalist { 159 | outline: 1px solid #c06000 !important; 160 | } 161 | 162 | ${i} fieldset { 163 | outline: 1px solid #d95100 !important; 164 | } 165 | 166 | ${i} form { 167 | outline: 1px solid #d23600 !important; 168 | } 169 | 170 | ${i} input { 171 | outline: 1px solid #fca600 !important; 172 | } 173 | 174 | ${i} keygen { 175 | outline: 1px solid #b31e00 !important; 176 | } 177 | 178 | ${i} label { 179 | outline: 1px solid #ee8900 !important; 180 | } 181 | 182 | ${i} legend { 183 | outline: 1px solid #de6d00 !important; 184 | } 185 | 186 | ${i} meter { 187 | outline: 1px solid #e8630c !important; 188 | } 189 | 190 | ${i} optgroup { 191 | outline: 1px solid #b33600 !important; 192 | } 193 | 194 | ${i} option { 195 | outline: 1px solid #ff8a00 !important; 196 | } 197 | 198 | ${i} output { 199 | outline: 1px solid #ff9619 !important; 200 | } 201 | 202 | ${i} progress { 203 | outline: 1px solid #e57c00 !important; 204 | } 205 | 206 | ${i} select { 207 | outline: 1px solid #e26e0f !important; 208 | } 209 | 210 | ${i} textarea { 211 | outline: 1px solid #cc5400 !important; 212 | } 213 | 214 | ${i} details { 215 | outline: 1px solid #33848f !important; 216 | } 217 | 218 | ${i} summary { 219 | outline: 1px solid #60a1a6 !important; 220 | } 221 | 222 | ${i} command { 223 | outline: 1px solid #438da1 !important; 224 | } 225 | 226 | ${i} menu { 227 | outline: 1px solid #449da6 !important; 228 | } 229 | 230 | ${i} del { 231 | outline: 1px solid #bf0000 !important; 232 | } 233 | 234 | ${i} ins { 235 | outline: 1px solid #400000 !important; 236 | } 237 | 238 | ${i} img { 239 | outline: 1px solid #22746b !important; 240 | } 241 | 242 | ${i} iframe { 243 | outline: 1px solid #64a7a0 !important; 244 | } 245 | 246 | ${i} embed { 247 | outline: 1px solid #98daca !important; 248 | } 249 | 250 | ${i} object { 251 | outline: 1px solid #00cc99 !important; 252 | } 253 | 254 | ${i} param { 255 | outline: 1px solid #37ffc4 !important; 256 | } 257 | 258 | ${i} video { 259 | outline: 1px solid #6ee866 !important; 260 | } 261 | 262 | ${i} audio { 263 | outline: 1px solid #027353 !important; 264 | } 265 | 266 | ${i} source { 267 | outline: 1px solid #012426 !important; 268 | } 269 | 270 | ${i} canvas { 271 | outline: 1px solid #a2f570 !important; 272 | } 273 | 274 | ${i} track { 275 | outline: 1px solid #59a600 !important; 276 | } 277 | 278 | ${i} map { 279 | outline: 1px solid #7be500 !important; 280 | } 281 | 282 | ${i} area { 283 | outline: 1px solid #305900 !important; 284 | } 285 | 286 | ${i} a { 287 | outline: 1px solid #ff62ab !important; 288 | } 289 | 290 | ${i} em { 291 | outline: 1px solid #800b41 !important; 292 | } 293 | 294 | ${i} strong { 295 | outline: 1px solid #ff1583 !important; 296 | } 297 | 298 | ${i} i { 299 | outline: 1px solid #803156 !important; 300 | } 301 | 302 | ${i} b { 303 | outline: 1px solid #cc1169 !important; 304 | } 305 | 306 | ${i} u { 307 | outline: 1px solid #ff0430 !important; 308 | } 309 | 310 | ${i} s { 311 | outline: 1px solid #f805e3 !important; 312 | } 313 | 314 | ${i} small { 315 | outline: 1px solid #d107b2 !important; 316 | } 317 | 318 | ${i} abbr { 319 | outline: 1px solid #4a0263 !important; 320 | } 321 | 322 | ${i} q { 323 | outline: 1px solid #240018 !important; 324 | } 325 | 326 | ${i} cite { 327 | outline: 1px solid #64003c !important; 328 | } 329 | 330 | ${i} dfn { 331 | outline: 1px solid #b4005a !important; 332 | } 333 | 334 | ${i} sub { 335 | outline: 1px solid #dba0c8 !important; 336 | } 337 | 338 | ${i} sup { 339 | outline: 1px solid #cc0256 !important; 340 | } 341 | 342 | ${i} time { 343 | outline: 1px solid #d6606d !important; 344 | } 345 | 346 | ${i} code { 347 | outline: 1px solid #e04251 !important; 348 | } 349 | 350 | ${i} kbd { 351 | outline: 1px solid #5e001f !important; 352 | } 353 | 354 | ${i} samp { 355 | outline: 1px solid #9c0033 !important; 356 | } 357 | 358 | ${i} var { 359 | outline: 1px solid #d90047 !important; 360 | } 361 | 362 | ${i} mark { 363 | outline: 1px solid #ff0053 !important; 364 | } 365 | 366 | ${i} bdi { 367 | outline: 1px solid #bf3668 !important; 368 | } 369 | 370 | ${i} bdo { 371 | outline: 1px solid #6f1400 !important; 372 | } 373 | 374 | ${i} ruby { 375 | outline: 1px solid #ff7b93 !important; 376 | } 377 | 378 | ${i} rt { 379 | outline: 1px solid #ff2f54 !important; 380 | } 381 | 382 | ${i} rp { 383 | outline: 1px solid #803e49 !important; 384 | } 385 | 386 | ${i} span { 387 | outline: 1px solid #cc2643 !important; 388 | } 389 | 390 | ${i} br { 391 | outline: 1px solid #db687d !important; 392 | } 393 | 394 | ${i} wbr { 395 | outline: 1px solid #db175b !important; 396 | }`}var e=(i,t)=>{let{globals:o}=t,n=[!0,"true"].includes(o[m]),d=t.viewMode==="docs",l=x(()=>s(d?'[data-story-block="true"]':".sb-show-main"),[t]);return f(()=>{let a=d?`addon-outline-docs-${t.id}`:"addon-outline";return n?b(a,l):u(a),()=>{u(a)}},[n,l,t]),i()},h=[e],g={[m]:!1};export{h as decorators,g as initialGlobals}; 397 | -------------------------------------------------------------------------------- /docs/assets/preview-CvbIS5ZJ.js: -------------------------------------------------------------------------------- 1 | var o="viewport",a={[o]:{value:void 0,isRotated:!1}},t={viewport:"reset",viewportRotated:!1},e,l=(e=globalThis.FEATURES)!=null&&e.viewportStoryGlobals?a:t;export{l as initialGlobals}; 2 | -------------------------------------------------------------------------------- /docs/assets/preview-DGUiP6tS.js: -------------------------------------------------------------------------------- 1 | const{STORY_CHANGED:r}=__STORYBOOK_MODULE_CORE_EVENTS__,{addons:s}=__STORYBOOK_MODULE_PREVIEW_API__,{global:O}=__STORYBOOK_MODULE_GLOBAL__;var d="storybook/highlight",i="storybookHighlight",g=`${d}/add`,E=`${d}/reset`,{document:l}=O,H=(e="#FF4785",t="dashed")=>` 2 | outline: 2px ${t} ${e}; 3 | outline-offset: 2px; 4 | box-shadow: 0 0 0 6px rgba(255,255,255,0.6); 5 | `,h=s.getChannel(),T=e=>{let t=i;n();let o=Array.from(new Set(e.elements)),_=l.createElement("style");_.setAttribute("id",t),_.innerHTML=o.map(a=>`${a}{ 6 | ${H(e.color,e.style)} 7 | }`).join(" "),l.head.appendChild(_)},n=()=>{var o;let e=i,t=l.getElementById(e);t&&((o=t.parentNode)==null||o.removeChild(t))};h.on(r,n);h.on(E,n);h.on(g,T); 8 | -------------------------------------------------------------------------------- /docs/assets/preview-DGgFcJKY.js: -------------------------------------------------------------------------------- 1 | import{a7 as p,v as d,l as h,O as T,w as b,z as g,b as f,c as y,e as S,$ as _,f as v,J as x,Y as B,y as k,h as L,x as C,i as E,E as j,R as H,S as M,j as w,k as O,F as R,m as A,o as D,p as I,r as P,L as F,T as N,s as W,t as z,u as U,B as q,G,I as J,U as V,K as Y,N as $,P as K,W as Z,Q,n as X,V as aa,q as ea,X as ta,Z as sa,a0 as oa,a1 as ra,a2 as na,a3 as ia,a4 as ua,a5 as ca,a6 as la}from"./index-BOBRWp11.js";import{_ as a,j as ma}from"./index-BCHAsNWv.js";import{r}from"./index-2yJIXLcc.js";import{D as n}from"./index-CNbbU42o.js";const ga=Object.freeze(Object.defineProperty({__proto__:null,A:d,get ActionBar(){return h},Bar:T,Blockquote:b,Button:g,Code:f,DL:y,Div:S,EmptyTabContent:_,ErrorFormatter:v,FlexBar:x,Form:B,H1:k,H2:L,H3:C,H4:E,H5:j,H6:H,HR:M,IconButton:w,Img:O,LI:R,Link:A,ListItem:D,Loader:I,OL:P,P:F,Pre:N,ResetWrapper:W,get ScrollArea(){return z},Separator:U,Span:q,SyntaxHighlighter:G,TT:J,TabBar:V,TabButton:Y,Table:$,Tabs:K,TabsState:Z,TooltipLinkList:Q,TooltipNote:X,UL:aa,WithTooltip:ea,WithTooltipPure:ta,Zoom:sa,codeCommon:oa,components:ra,createCopyToClipboardFunction:na,getStoryHref:ia,icons:ua,nameSpaceClassNames:ca,withReset:la},Symbol.toStringTag,{value:"Module"})),t={base:"light",brandTitle:"React Activity Calendar",brandUrl:"https://github.com/grubersjoe/react-activity-calendar"},s={fontBase:"ui-sans-serif, sans-serif",fontCode:"ui-monospace, monospace"},pa=e=>{const u=window.matchMedia("(prefers-color-scheme: dark)").matches,[c,l]=r.useState(u?a.dark:a.light);return r.useEffect(()=>{const o=m=>{l(m?a.dark:a.light)};return e.context.channel.on(n,o),()=>{e.context.channel.removeListener(n,o)}},[e.context.channel]),ma.jsx(p,{...e,theme:{...t,...c,...s}})},i={parameters:{docs:{toc:!0,container:pa,source:{language:"tsx"}},darkMode:{stylePreview:!0,dark:{...t,...a.dark,...s},light:{...t,...a.light,...s}}}},fa=Object.freeze(Object.defineProperty({__proto__:null,default:i,preview:i},Symbol.toStringTag,{value:"Module"}));export{ga as i,fa as p}; 2 | -------------------------------------------------------------------------------- /docs/assets/preview-DHQbi4pV.js: -------------------------------------------------------------------------------- 1 | const{makeDecorator:O,addons:_}=__STORYBOOK_MODULE_PREVIEW_API__,{STORY_CHANGED:l,SELECT_STORY:E}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:L}=__STORYBOOK_MODULE_GLOBAL__;var c="links",{document:s,HTMLElement:v}=L,d=e=>_.getChannel().emit(E,e),i=e=>{let{target:t}=e;if(!(t instanceof v))return;let o=t,{sbKind:a,sbStory:r}=o.dataset;(a||r)&&(e.preventDefault(),d({kind:a,story:r}))},n=!1,m=()=>{n||(n=!0,s.addEventListener("click",i))},k=()=>{n&&(n=!1,s.removeEventListener("click",i))},R=O({name:"withLinks",parameterName:c,wrapper:(e,t)=>(m(),_.getChannel().once(l,k),e(t))}),S=[R];export{S as decorators}; 2 | -------------------------------------------------------------------------------- /docs/assets/preview-DdtL0eBr.css: -------------------------------------------------------------------------------- 1 | body{font-family:ui-sans-serif,sans-serif;font-size:16px;line-height:1.5}h1,h2,h3{margin-top:1em;margin-bottom:.375em}h1 a,h2 a,h3 a{text-decoration:none}h1 a:hover,h2 a:hover,h3 a:hover{text-decoration:underline}h1{margin-top:0}p{margin:0 0 1.25em}p,pre{box-sizing:border-box;max-width:720px}pre,code{font-family:ui-monospace,monospace;font-size:14px}a{color:inherit;text-underline-offset:3px;text-decoration-color:#bbb}a:hover{text-decoration-color:#888}#storybook-root{overflow:hidden}.dark.sb-show-main{color:#fff;background-color:#1f1f1f}.dark .docblock-source{background:#1f1f1f}.sbdocs td pre>code{white-space:pre!important}.sb-show-main.sb-main-centered #storybook-root{padding:2.5rem} 2 | -------------------------------------------------------------------------------- /docs/assets/preview-tdGMCZtC.js: -------------------------------------------------------------------------------- 1 | const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-YoEPFst5.js","./iframe-CyHCzw2A.js","./index-2yJIXLcc.js","./index-BOBRWp11.js","./index-BCHAsNWv.js","./index-Bn05qqr6.js","./index-CXQShRbs.js","./index-DrFu-skq.js","./react-18-BFsVzg-s.js"])))=>i.map(i=>d[i]); 2 | import{_ as a}from"./iframe-CyHCzw2A.js";var i=Object.defineProperty,s=(e,r)=>{for(var t in r)i(e,t,{get:r[t],enumerable:!0})},_={};s(_,{parameters:()=>d});var p=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((e,r)=>{let[t,o]=r;return o.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await a(()=>import("./DocsRenderer-CFRXHY34-YoEPFst5.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>p[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters}; 3 | -------------------------------------------------------------------------------- /docs/assets/react-CxVRKATl.js: -------------------------------------------------------------------------------- 1 | var u=Object.create,_=Object.defineProperty,c=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,s=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,O=(e,r)=>function(){return e&&(r=(0,e[a(e)[0]])(e=0)),r},b=(e,r)=>function(){return r||(0,e[a(e)[0]])((r={exports:{}}).exports,r),r.exports},v=(e,r)=>{for(var t in r)_(e,t,{get:r[t],enumerable:!0})},p=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of a(r))!l.call(e,o)&&o!==t&&_(e,o,{get:()=>r[o],enumerable:!(n=c(r,o))||n.enumerable});return e},y=(e,r,t)=>(t=e!=null?u(s(e)):{},p(!e||!e.__esModule?_(t,"default",{value:e,enumerable:!0}):t,e)),P=e=>p(_({},"__esModule",{value:!0}),e);const i=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));export{y as _,b as a,O as b,P as c,v as d,i as r}; 2 | -------------------------------------------------------------------------------- /docs/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | @storybook/core - Storybook 7 | 8 | 9 | 10 | 11 | 12 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 77 | 78 | 79 | 80 | 81 |
82 | 83 | 84 | 145 | 146 | 147 | 176 | 177 | -------------------------------------------------------------------------------- /docs/index.json: -------------------------------------------------------------------------------- 1 | {"v":5,"entries":{"react-activity-calendar--docs":{"id":"react-activity-calendar--docs","title":"React Activity Calendar","name":"Docs","importPath":"./src/component/ActivityCalendar.stories.tsx","type":"docs","tags":["dev","test","autodocs"],"storiesImports":[]},"react-activity-calendar--default":{"type":"story","id":"react-activity-calendar--default","name":"Default","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--loading":{"type":"story","id":"react-activity-calendar--loading","name":"Loading","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--activity-levels":{"type":"story","id":"react-activity-calendar--activity-levels","name":"Activity Levels","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--date-ranges":{"type":"story","id":"react-activity-calendar--date-ranges","name":"Date Ranges","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--color-themes":{"type":"story","id":"react-activity-calendar--color-themes","name":"Color Themes","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--explicit-themes":{"type":"story","id":"react-activity-calendar--explicit-themes","name":"Explicit Themes","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--customization":{"type":"story","id":"react-activity-calendar--customization","name":"Customization","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--event-handlers":{"type":"story","id":"react-activity-calendar--event-handlers","name":"Event Handlers","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--tooltips":{"type":"story","id":"react-activity-calendar--tooltips","name":"Tooltips","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--without-labels":{"type":"story","id":"react-activity-calendar--without-labels","name":"Without Labels","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--weekday-labels":{"type":"story","id":"react-activity-calendar--weekday-labels","name":"Weekday Labels","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--localized-labels":{"type":"story","id":"react-activity-calendar--localized-labels","name":"Localized Labels","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--monday-as-week-start":{"type":"story","id":"react-activity-calendar--monday-as-week-start","name":"Monday As Week Start","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--narrow-screens":{"type":"story","id":"react-activity-calendar--narrow-screens","name":"Narrow Screens","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]},"react-activity-calendar--container-ref":{"type":"story","id":"react-activity-calendar--container-ref","name":"Container Ref","title":"React Activity Calendar","importPath":"./src/component/ActivityCalendar.stories.tsx","componentPath":"./src/component/ActivityCalendar.tsx","tags":["dev","test","autodocs"]}}} -------------------------------------------------------------------------------- /docs/nunito-sans-bold-italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/nunito-sans-bold-italic.woff2 -------------------------------------------------------------------------------- /docs/nunito-sans-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/nunito-sans-bold.woff2 -------------------------------------------------------------------------------- /docs/nunito-sans-italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/nunito-sans-italic.woff2 -------------------------------------------------------------------------------- /docs/nunito-sans-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/nunito-sans-regular.woff2 -------------------------------------------------------------------------------- /docs/project.json: -------------------------------------------------------------------------------- 1 | {"generatedAt":1741159187020,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@jest/globals":"29.7.0","@jest/types":"29.6.3","jest":"29.7.0","jest-environment-jsdom":"29.7.0"},"hasRouterPackage":false,"packageManager":{"type":"pnpm","version":"10.5.2"},"typescriptOptions":{"reactDocgen":"react-docgen"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":3,"applicationFileCount":0,"storybookVersion":"8.6.3","storybookVersionSpecifier":"^8.6.3","language":"typescript","storybookPackages":{"@storybook/addon-docs":{"version":"8.6.3"},"@storybook/blocks":{"version":"8.6.3"},"@storybook/builder-vite":{"version":"8.6.3"},"@storybook/react":{"version":"8.6.3"},"@storybook/react-vite":{"version":"8.6.3"},"@storybook/theming":{"version":"8.6.3"},"storybook":{"version":"8.6.3"}},"addons":{"@storybook/addon-essentials":{"options":{"actions":false},"version":"8.6.3"},"@storybook/addon-links":{"version":"8.6.3"},"storybook-dark-mode":{"version":"4.0.2"}}} -------------------------------------------------------------------------------- /docs/sb-addons/essentials-backgrounds-3/manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var re=Object.create;var Y=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var E=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(o,c)=>(typeof require<"u"?require:o)[c]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var M=(e,o)=>()=>(e&&(o=e(e=0)),o);var se=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports);var ue=(e,o,c,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of ae(o))!le.call(e,i)&&i!==c&&Y(e,i,{get:()=>o[i],enumerable:!(r=ie(o,i))||r.enumerable});return e};var Ie=(e,o,c)=>(c=e!=null?re(ce(e)):{},ue(o||!e||!e.__esModule?Y(c,"default",{value:e,enumerable:!0}):c,e));var p=M(()=>{});var h=M(()=>{});var f=M(()=>{});var X=se((Q,V)=>{p();h();f();(function(e){if(typeof Q=="object"&&typeof V<"u")V.exports=e();else if(typeof define=="function"&&define.amd)define([],e);else{var o;typeof window<"u"||typeof window<"u"?o=window:typeof self<"u"?o=self:o=this,o.memoizerific=e()}})(function(){var e,o,c;return function r(i,d,l){function t(a,I){if(!d[a]){if(!i[a]){var s=typeof E=="function"&&E;if(!I&&s)return s(a,!0);if(n)return n(a,!0);var S=new Error("Cannot find module '"+a+"'");throw S.code="MODULE_NOT_FOUND",S}var m=d[a]={exports:{}};i[a][0].call(m.exports,function(b){var C=i[a][1][b];return t(C||b)},m,m.exports,r,i,d,l)}return d[a].exports}for(var n=typeof E=="function"&&E,u=0;u=0)return this.lastItem=this.list[n],this.list[n].val},l.prototype.set=function(t,n){var u;return this.lastItem&&this.isEqual(this.lastItem.key,t)?(this.lastItem.val=n,this):(u=this.indexOf(t),u>=0?(this.lastItem=this.list[u],this.list[u].val=n,this):(this.lastItem={key:t,val:n},this.list.push(this.lastItem),this.size++,this))},l.prototype.delete=function(t){var n;if(this.lastItem&&this.isEqual(this.lastItem.key,t)&&(this.lastItem=void 0),n=this.indexOf(t),n>=0)return this.size--,this.list.splice(n,1)[0]},l.prototype.has=function(t){var n;return this.lastItem&&this.isEqual(this.lastItem.key,t)?!0:(n=this.indexOf(t),n>=0?(this.lastItem=this.list[n],!0):!1)},l.prototype.forEach=function(t,n){var u;for(u=0;u0&&(x[T]={cacheItem:b,arg:arguments[T]},O?t(s,x):s.push(x),s.length>a&&n(s.shift())),m.wasMemoized=O,m.numArgs=T+1,R};return m.limit=a,m.wasMemoized=!1,m.cache=I,m.lru=s,m}};function t(a,I){var s=a.length,S=I.length,m,b,C;for(b=0;b=0&&(s=a[m],S=s.cacheItem.get(s.arg),!S||!S.size);m--)s.cacheItem.delete(s.arg)}function u(a,I){return a===I||a!==a&&I!==I}},{"map-or-similar":1}]},{},[3])(3)})});p();h();f();p();h();f();p();h();f();p();h();f();var g=__REACT__,{Children:Ee,Component:we,Fragment:D,Profiler:Be,PureComponent:Re,StrictMode:xe,Suspense:Le,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Pe,cloneElement:Me,createContext:De,createElement:Ge,createFactory:Ue,createRef:Fe,forwardRef:Ne,isValidElement:He,lazy:qe,memo:w,startTransition:ze,unstable_act:Ke,useCallback:G,useContext:Ve,useDebugValue:We,useDeferredValue:Ye,useEffect:je,useId:$e,useImperativeHandle:Ze,useInsertionEffect:Je,useLayoutEffect:Qe,useMemo:j,useReducer:Xe,useRef:eo,useState:U,useSyncExternalStore:oo,useTransition:no,version:to}=__REACT__;p();h();f();var lo=__STORYBOOK_API__,{ActiveTabs:so,Consumer:uo,ManagerContext:Io,Provider:mo,RequestResponseError:po,addons:F,combineParameters:ho,controlOrMetaKey:fo,controlOrMetaSymbol:go,eventMatchesShortcut:bo,eventToShortcut:So,experimental_MockUniversalStore:Co,experimental_UniversalStore:yo,experimental_requestResponse:ko,experimental_useUniversalStore:vo,isMacLike:_o,isShortcutTaken:To,keyToSymbol:Ao,merge:Oo,mockChannel:Eo,optionOrAltSymbol:wo,shortcutMatchesShortcut:Bo,shortcutToHumanString:Ro,types:$,useAddonState:xo,useArgTypes:Lo,useArgs:Po,useChannel:Mo,useGlobalTypes:Do,useGlobals:L,useParameter:P,useSharedState:Go,useStoryPrepared:Uo,useStorybookApi:Fo,useStorybookState:No}=__STORYBOOK_API__;p();h();f();var Vo=__STORYBOOK_COMPONENTS__,{A:Wo,ActionBar:Yo,AddonPanel:jo,Badge:$o,Bar:Zo,Blockquote:Jo,Button:Qo,ClipboardCode:Xo,Code:en,DL:on,Div:nn,DocumentWrapper:tn,EmptyTabContent:rn,ErrorFormatter:an,FlexBar:cn,Form:ln,H1:sn,H2:un,H3:In,H4:dn,H5:mn,H6:pn,HR:hn,IconButton:B,IconButtonSkeleton:fn,Icons:gn,Img:bn,LI:Sn,Link:Cn,ListItem:yn,Loader:kn,Modal:vn,OL:_n,P:Tn,Placeholder:An,Pre:On,ProgressSpinner:En,ResetWrapper:wn,ScrollArea:Bn,Separator:Rn,Spaced:xn,Span:Ln,StorybookIcon:Pn,StorybookLogo:Mn,Symbols:Dn,SyntaxHighlighter:Gn,TT:Un,TabBar:Fn,TabButton:Nn,TabWrapper:Hn,Table:qn,Tabs:zn,TabsState:Kn,TooltipLinkList:N,TooltipMessage:Vn,TooltipNote:Wn,UL:Yn,WithTooltip:H,WithTooltipPure:jn,Zoom:$n,codeCommon:Zn,components:Jn,createCopyToClipboardFunction:Qn,getStoryHref:Xn,icons:et,interleaveSeparators:ot,nameSpaceClassNames:nt,resetComponents:tt,withReset:rt}=__STORYBOOK_COMPONENTS__;p();h();f();var st=__STORYBOOK_ICONS__,{AccessibilityAltIcon:ut,AccessibilityIcon:It,AddIcon:dt,AdminIcon:mt,AlertAltIcon:pt,AlertIcon:ht,AlignLeftIcon:ft,AlignRightIcon:gt,AppleIcon:bt,ArrowBottomLeftIcon:St,ArrowBottomRightIcon:Ct,ArrowDownIcon:yt,ArrowLeftIcon:kt,ArrowRightIcon:vt,ArrowSolidDownIcon:_t,ArrowSolidLeftIcon:Tt,ArrowSolidRightIcon:At,ArrowSolidUpIcon:Ot,ArrowTopLeftIcon:Et,ArrowTopRightIcon:wt,ArrowUpIcon:Bt,AzureDevOpsIcon:Rt,BackIcon:xt,BasketIcon:Lt,BatchAcceptIcon:Pt,BatchDenyIcon:Mt,BeakerIcon:Dt,BellIcon:Gt,BitbucketIcon:Ut,BoldIcon:Ft,BookIcon:Nt,BookmarkHollowIcon:Ht,BookmarkIcon:qt,BottomBarIcon:zt,BottomBarToggleIcon:Kt,BoxIcon:Vt,BranchIcon:Wt,BrowserIcon:Yt,ButtonIcon:jt,CPUIcon:$t,CalendarIcon:Zt,CameraIcon:Jt,CategoryIcon:Qt,CertificateIcon:Xt,ChangedIcon:er,ChatIcon:or,CheckIcon:nr,ChevronDownIcon:tr,ChevronLeftIcon:rr,ChevronRightIcon:ir,ChevronSmallDownIcon:ar,ChevronSmallLeftIcon:cr,ChevronSmallRightIcon:lr,ChevronSmallUpIcon:sr,ChevronUpIcon:ur,ChromaticIcon:Ir,ChromeIcon:dr,CircleHollowIcon:mr,CircleIcon:Z,ClearIcon:pr,CloseAltIcon:hr,CloseIcon:fr,CloudHollowIcon:gr,CloudIcon:br,CogIcon:Sr,CollapseIcon:Cr,CommandIcon:yr,CommentAddIcon:kr,CommentIcon:vr,CommentsIcon:_r,CommitIcon:Tr,CompassIcon:Ar,ComponentDrivenIcon:Or,ComponentIcon:Er,ContrastIcon:wr,ControlsIcon:Br,CopyIcon:Rr,CreditIcon:xr,CrossIcon:Lr,DashboardIcon:Pr,DatabaseIcon:Mr,DeleteIcon:Dr,DiamondIcon:Gr,DirectionIcon:Ur,DiscordIcon:Fr,DocChartIcon:Nr,DocListIcon:Hr,DocumentIcon:qr,DownloadIcon:zr,DragIcon:Kr,EditIcon:Vr,EllipsisIcon:Wr,EmailIcon:Yr,ExpandAltIcon:jr,ExpandIcon:$r,EyeCloseIcon:Zr,EyeIcon:Jr,FaceHappyIcon:Qr,FaceNeutralIcon:Xr,FaceSadIcon:ei,FacebookIcon:oi,FailedIcon:ni,FastForwardIcon:ti,FigmaIcon:ri,FilterIcon:ii,FlagIcon:ai,FolderIcon:ci,FormIcon:li,GDriveIcon:si,GithubIcon:ui,GitlabIcon:Ii,GlobeIcon:di,GoogleIcon:mi,GraphBarIcon:pi,GraphLineIcon:hi,GraphqlIcon:fi,GridAltIcon:gi,GridIcon:q,GrowIcon:bi,HeartHollowIcon:Si,HeartIcon:Ci,HomeIcon:yi,HourglassIcon:ki,InfoIcon:vi,ItalicIcon:_i,JumpToIcon:Ti,KeyIcon:Ai,LightningIcon:Oi,LightningOffIcon:Ei,LinkBrokenIcon:wi,LinkIcon:Bi,LinkedinIcon:Ri,LinuxIcon:xi,ListOrderedIcon:Li,ListUnorderedIcon:Pi,LocationIcon:Mi,LockIcon:Di,MarkdownIcon:Gi,MarkupIcon:Ui,MediumIcon:Fi,MemoryIcon:Ni,MenuIcon:Hi,MergeIcon:qi,MirrorIcon:zi,MobileIcon:Ki,MoonIcon:Vi,NutIcon:Wi,OutboxIcon:Yi,OutlineIcon:ji,PaintBrushIcon:$i,PaperClipIcon:Zi,ParagraphIcon:Ji,PassedIcon:Qi,PhoneIcon:Xi,PhotoDragIcon:ea,PhotoIcon:z,PinAltIcon:oa,PinIcon:na,PlayAllHollowIcon:ta,PlayBackIcon:ra,PlayHollowIcon:ia,PlayIcon:aa,PlayNextIcon:ca,PlusIcon:la,PointerDefaultIcon:sa,PointerHandIcon:ua,PowerIcon:Ia,PrintIcon:da,ProceedIcon:ma,ProfileIcon:pa,PullRequestIcon:ha,QuestionIcon:fa,RSSIcon:ga,RedirectIcon:ba,ReduxIcon:Sa,RefreshIcon:J,ReplyIcon:Ca,RepoIcon:ya,RequestChangeIcon:ka,RewindIcon:va,RulerIcon:_a,SaveIcon:Ta,SearchIcon:Aa,ShareAltIcon:Oa,ShareIcon:Ea,ShieldIcon:wa,SideBySideIcon:Ba,SidebarAltIcon:Ra,SidebarAltToggleIcon:xa,SidebarIcon:La,SidebarToggleIcon:Pa,SpeakerIcon:Ma,StackedIcon:Da,StarHollowIcon:Ga,StarIcon:Ua,StatusFailIcon:Fa,StatusPassIcon:Na,StatusWarnIcon:Ha,StickerIcon:qa,StopAltHollowIcon:za,StopAltIcon:Ka,StopIcon:Va,StorybookIcon:Wa,StructureIcon:Ya,SubtractIcon:ja,SunIcon:$a,SupportIcon:Za,SwitchAltIcon:Ja,SyncIcon:Qa,TabletIcon:Xa,ThumbsUpIcon:ec,TimeIcon:oc,TimerIcon:nc,TransferIcon:tc,TrashIcon:rc,TwitterIcon:ic,TypeIcon:ac,UbuntuIcon:cc,UndoIcon:lc,UnfoldIcon:sc,UnlockIcon:uc,UnpinIcon:Ic,UploadIcon:dc,UserAddIcon:mc,UserAltIcon:pc,UserIcon:hc,UsersIcon:fc,VSCodeIcon:gc,VerifiedIcon:bc,VideoIcon:Sc,WandIcon:Cc,WatchIcon:yc,WindowsIcon:kc,WrenchIcon:vc,XIcon:_c,YoutubeIcon:Tc,ZoomIcon:Ac,ZoomOutIcon:Oc,ZoomResetIcon:Ec,iconList:wc}=__STORYBOOK_ICONS__;p();h();f();var Pc=__STORYBOOK_CLIENT_LOGGER__,{deprecate:Mc,logger:K,once:Dc,pretty:Gc}=__STORYBOOK_CLIENT_LOGGER__;var W=Ie(X());p();h();f();var Wc=__STORYBOOK_THEMING__,{CacheProvider:Yc,ClassNames:jc,Global:$c,ThemeProvider:Zc,background:Jc,color:Qc,convert:Xc,create:el,createCache:ol,createGlobal:nl,createReset:tl,css:rl,darken:il,ensure:al,ignoreSsrWarning:cl,isPropValid:ll,jsx:sl,keyframes:ul,lighten:Il,styled:ee,themes:dl,typography:ml,useTheme:pl,withTheme:hl}=__STORYBOOK_THEMING__;p();h();f();function oe(e){for(var o=[],c=1;c{r({[y]:I})},[r]);return g.createElement(D,null,g.createElement(B,{key:"grid",active:n,disabled:t,title:"Apply a grid to the preview",onClick:()=>a({value:l,grid:!n})},g.createElement(q,null)),c>0?g.createElement(H,{key:"background",placement:"top",closeOnOutsideClick:!0,tooltip:({onHide:I})=>g.createElement(N,{links:[...o?[{id:"reset",title:"Reset background",icon:g.createElement(J,null),onClick:()=>{a({value:void 0,grid:n}),I()}}]:[],...Object.entries(d).map(([s,S])=>({id:s,title:S.name,icon:g.createElement(Z,{color:S?.value||"grey"}),active:s===l,onClick:()=>{a({value:s,grid:n}),I()}}))].flat()}),onVisibleChange:i},g.createElement(B,{disabled:t,key:"background",title:"Change the background of the preview",active:!!o||u},g.createElement(z,null))):null)}),he=ee.span(({background:e})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background:e}),({theme:e})=>({boxShadow:`${e.appBorderColor} 0 0 0 1px inset`})),fe=(e,o=[],c)=>{if(e==="transparent")return"transparent";if(o.find(i=>i.value===e)||e)return e;let r=o.find(i=>i.name===c);if(r)return r.value;if(c){let i=o.map(d=>d.name).join(", ");K.warn(oe` 8 | Backgrounds Addon: could not find the default color "${c}". 9 | These are the available colors for your story based on your configuration: 10 | ${i}. 11 | `)}return"transparent"},te=(0,W.default)(1e3)((e,o,c,r,i,d)=>({id:e||o,title:o,onClick:()=>{i({selected:c,name:o})},value:c,right:r?g.createElement(he,{background:c}):void 0,active:d})),ge=(0,W.default)(10)((e,o,c)=>{let r=e.map(({name:i,value:d})=>te(null,i,d,!0,c,d===o));return o!=="transparent"?[te("reset","Clear background","transparent",null,c,!1),...r]:r}),be={default:null,disable:!0,values:[]},Se=w(function(){let e=P(y,be),[o,c]=U(!1),[r,i]=L(),d=r[y]?.value,l=j(()=>fe(d,e.values,e.default),[e,d]);Array.isArray(e)&&K.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let t=G(n=>{i({[y]:{...r[y],value:n}})},[e,r,i]);return e.disable?null:g.createElement(H,{placement:"top",closeOnOutsideClick:!0,tooltip:({onHide:n})=>g.createElement(N,{links:ge(e.values,l,({selected:u})=>{l!==u&&t(u),n()})}),onVisibleChange:c},g.createElement(B,{key:"background",title:"Change the background of the preview",active:l!=="transparent"||o},g.createElement(z,null)))}),Ce=w(function(){let[e,o]=L(),{grid:c}=P(y,{grid:{disable:!1}});if(c?.disable)return null;let r=e[y]?.grid||!1;return g.createElement(B,{key:"background",active:r,title:"Apply a grid to the preview",onClick:()=>o({[y]:{...e[y],grid:!r}})},g.createElement(q,null))});F.register(ne,()=>{F.add(ne,{title:"Backgrounds",type:$.TOOL,match:({viewMode:e,tabId:o})=>!!(e&&e.match(/^(story|docs)$/))&&!o,render:()=>FEATURES?.backgroundsStoryGlobals?g.createElement(me,null):g.createElement(D,null,g.createElement(Se,null),g.createElement(Ce,null))})});})(); 12 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); } 13 | -------------------------------------------------------------------------------- /docs/sb-addons/essentials-measure-6/manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var t=__REACT__,{Children:O,Component:f,Fragment:R,Profiler:P,PureComponent:w,StrictMode:L,Suspense:E,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:D,cloneElement:M,createContext:v,createElement:x,createFactory:H,createRef:U,forwardRef:F,isValidElement:N,lazy:G,memo:W,startTransition:K,unstable_act:Y,useCallback:u,useContext:q,useDebugValue:V,useDeferredValue:Z,useEffect:d,useId:z,useImperativeHandle:J,useInsertionEffect:Q,useLayoutEffect:X,useMemo:$,useReducer:j,useRef:oo,useState:no,useSyncExternalStore:eo,useTransition:co,version:to}=__REACT__;var io=__STORYBOOK_API__,{ActiveTabs:so,Consumer:uo,ManagerContext:mo,Provider:po,RequestResponseError:So,addons:l,combineParameters:Co,controlOrMetaKey:ho,controlOrMetaSymbol:Ao,eventMatchesShortcut:_o,eventToShortcut:bo,experimental_MockUniversalStore:To,experimental_UniversalStore:go,experimental_requestResponse:yo,experimental_useUniversalStore:Bo,isMacLike:ko,isShortcutTaken:Oo,keyToSymbol:fo,merge:Ro,mockChannel:Po,optionOrAltSymbol:wo,shortcutMatchesShortcut:Lo,shortcutToHumanString:Eo,types:m,useAddonState:Do,useArgTypes:Mo,useArgs:vo,useChannel:xo,useGlobalTypes:Ho,useGlobals:p,useParameter:Uo,useSharedState:Fo,useStoryPrepared:No,useStorybookApi:S,useStorybookState:Go}=__STORYBOOK_API__;var Vo=__STORYBOOK_COMPONENTS__,{A:Zo,ActionBar:zo,AddonPanel:Jo,Badge:Qo,Bar:Xo,Blockquote:$o,Button:jo,ClipboardCode:on,Code:nn,DL:en,Div:cn,DocumentWrapper:tn,EmptyTabContent:rn,ErrorFormatter:In,FlexBar:an,Form:ln,H1:sn,H2:un,H3:dn,H4:mn,H5:pn,H6:Sn,HR:Cn,IconButton:C,IconButtonSkeleton:hn,Icons:An,Img:_n,LI:bn,Link:Tn,ListItem:gn,Loader:yn,Modal:Bn,OL:kn,P:On,Placeholder:fn,Pre:Rn,ProgressSpinner:Pn,ResetWrapper:wn,ScrollArea:Ln,Separator:En,Spaced:Dn,Span:Mn,StorybookIcon:vn,StorybookLogo:xn,Symbols:Hn,SyntaxHighlighter:Un,TT:Fn,TabBar:Nn,TabButton:Gn,TabWrapper:Wn,Table:Kn,Tabs:Yn,TabsState:qn,TooltipLinkList:Vn,TooltipMessage:Zn,TooltipNote:zn,UL:Jn,WithTooltip:Qn,WithTooltipPure:Xn,Zoom:$n,codeCommon:jn,components:oe,createCopyToClipboardFunction:ne,getStoryHref:ee,icons:ce,interleaveSeparators:te,nameSpaceClassNames:re,resetComponents:Ie,withReset:ae}=__STORYBOOK_COMPONENTS__;var de=__STORYBOOK_ICONS__,{AccessibilityAltIcon:me,AccessibilityIcon:pe,AddIcon:Se,AdminIcon:Ce,AlertAltIcon:he,AlertIcon:Ae,AlignLeftIcon:_e,AlignRightIcon:be,AppleIcon:Te,ArrowBottomLeftIcon:ge,ArrowBottomRightIcon:ye,ArrowDownIcon:Be,ArrowLeftIcon:ke,ArrowRightIcon:Oe,ArrowSolidDownIcon:fe,ArrowSolidLeftIcon:Re,ArrowSolidRightIcon:Pe,ArrowSolidUpIcon:we,ArrowTopLeftIcon:Le,ArrowTopRightIcon:Ee,ArrowUpIcon:De,AzureDevOpsIcon:Me,BackIcon:ve,BasketIcon:xe,BatchAcceptIcon:He,BatchDenyIcon:Ue,BeakerIcon:Fe,BellIcon:Ne,BitbucketIcon:Ge,BoldIcon:We,BookIcon:Ke,BookmarkHollowIcon:Ye,BookmarkIcon:qe,BottomBarIcon:Ve,BottomBarToggleIcon:Ze,BoxIcon:ze,BranchIcon:Je,BrowserIcon:Qe,ButtonIcon:Xe,CPUIcon:$e,CalendarIcon:je,CameraIcon:oc,CategoryIcon:nc,CertificateIcon:ec,ChangedIcon:cc,ChatIcon:tc,CheckIcon:rc,ChevronDownIcon:Ic,ChevronLeftIcon:ac,ChevronRightIcon:lc,ChevronSmallDownIcon:ic,ChevronSmallLeftIcon:sc,ChevronSmallRightIcon:uc,ChevronSmallUpIcon:dc,ChevronUpIcon:mc,ChromaticIcon:pc,ChromeIcon:Sc,CircleHollowIcon:Cc,CircleIcon:hc,ClearIcon:Ac,CloseAltIcon:_c,CloseIcon:bc,CloudHollowIcon:Tc,CloudIcon:gc,CogIcon:yc,CollapseIcon:Bc,CommandIcon:kc,CommentAddIcon:Oc,CommentIcon:fc,CommentsIcon:Rc,CommitIcon:Pc,CompassIcon:wc,ComponentDrivenIcon:Lc,ComponentIcon:Ec,ContrastIcon:Dc,ControlsIcon:Mc,CopyIcon:vc,CreditIcon:xc,CrossIcon:Hc,DashboardIcon:Uc,DatabaseIcon:Fc,DeleteIcon:Nc,DiamondIcon:Gc,DirectionIcon:Wc,DiscordIcon:Kc,DocChartIcon:Yc,DocListIcon:qc,DocumentIcon:Vc,DownloadIcon:Zc,DragIcon:zc,EditIcon:Jc,EllipsisIcon:Qc,EmailIcon:Xc,ExpandAltIcon:$c,ExpandIcon:jc,EyeCloseIcon:ot,EyeIcon:nt,FaceHappyIcon:et,FaceNeutralIcon:ct,FaceSadIcon:tt,FacebookIcon:rt,FailedIcon:It,FastForwardIcon:at,FigmaIcon:lt,FilterIcon:it,FlagIcon:st,FolderIcon:ut,FormIcon:dt,GDriveIcon:mt,GithubIcon:pt,GitlabIcon:St,GlobeIcon:Ct,GoogleIcon:ht,GraphBarIcon:At,GraphLineIcon:_t,GraphqlIcon:bt,GridAltIcon:Tt,GridIcon:gt,GrowIcon:yt,HeartHollowIcon:Bt,HeartIcon:kt,HomeIcon:Ot,HourglassIcon:ft,InfoIcon:Rt,ItalicIcon:Pt,JumpToIcon:wt,KeyIcon:Lt,LightningIcon:Et,LightningOffIcon:Dt,LinkBrokenIcon:Mt,LinkIcon:vt,LinkedinIcon:xt,LinuxIcon:Ht,ListOrderedIcon:Ut,ListUnorderedIcon:Ft,LocationIcon:Nt,LockIcon:Gt,MarkdownIcon:Wt,MarkupIcon:Kt,MediumIcon:Yt,MemoryIcon:qt,MenuIcon:Vt,MergeIcon:Zt,MirrorIcon:zt,MobileIcon:Jt,MoonIcon:Qt,NutIcon:Xt,OutboxIcon:$t,OutlineIcon:jt,PaintBrushIcon:or,PaperClipIcon:nr,ParagraphIcon:er,PassedIcon:cr,PhoneIcon:tr,PhotoDragIcon:rr,PhotoIcon:Ir,PinAltIcon:ar,PinIcon:lr,PlayAllHollowIcon:ir,PlayBackIcon:sr,PlayHollowIcon:ur,PlayIcon:dr,PlayNextIcon:mr,PlusIcon:pr,PointerDefaultIcon:Sr,PointerHandIcon:Cr,PowerIcon:hr,PrintIcon:Ar,ProceedIcon:_r,ProfileIcon:br,PullRequestIcon:Tr,QuestionIcon:gr,RSSIcon:yr,RedirectIcon:Br,ReduxIcon:kr,RefreshIcon:Or,ReplyIcon:fr,RepoIcon:Rr,RequestChangeIcon:Pr,RewindIcon:wr,RulerIcon:h,SaveIcon:Lr,SearchIcon:Er,ShareAltIcon:Dr,ShareIcon:Mr,ShieldIcon:vr,SideBySideIcon:xr,SidebarAltIcon:Hr,SidebarAltToggleIcon:Ur,SidebarIcon:Fr,SidebarToggleIcon:Nr,SpeakerIcon:Gr,StackedIcon:Wr,StarHollowIcon:Kr,StarIcon:Yr,StatusFailIcon:qr,StatusPassIcon:Vr,StatusWarnIcon:Zr,StickerIcon:zr,StopAltHollowIcon:Jr,StopAltIcon:Qr,StopIcon:Xr,StorybookIcon:$r,StructureIcon:jr,SubtractIcon:oI,SunIcon:nI,SupportIcon:eI,SwitchAltIcon:cI,SyncIcon:tI,TabletIcon:rI,ThumbsUpIcon:II,TimeIcon:aI,TimerIcon:lI,TransferIcon:iI,TrashIcon:sI,TwitterIcon:uI,TypeIcon:dI,UbuntuIcon:mI,UndoIcon:pI,UnfoldIcon:SI,UnlockIcon:CI,UnpinIcon:hI,UploadIcon:AI,UserAddIcon:_I,UserAltIcon:bI,UserIcon:TI,UsersIcon:gI,VSCodeIcon:yI,VerifiedIcon:BI,VideoIcon:kI,WandIcon:OI,WatchIcon:fI,WindowsIcon:RI,WrenchIcon:PI,XIcon:wI,YoutubeIcon:LI,ZoomIcon:EI,ZoomOutIcon:DI,ZoomResetIcon:MI,iconList:vI}=__STORYBOOK_ICONS__;var i="storybook/measure-addon",A=`${i}/tool`,_=()=>{let[r,c]=p(),{measureEnabled:I}=r,s=S(),a=u(()=>c({measureEnabled:!I}),[c,I]);return d(()=>{s.setAddonShortcut(i,{label:"Toggle Measure [M]",defaultShortcut:["M"],actionName:"measure",showInMenu:!1,action:a})},[a,s]),t.createElement(C,{key:A,active:I,title:"Enable measure",onClick:a},t.createElement(h,null))};l.register(i,()=>{l.add(A,{type:m.TOOL,title:"Measure",match:({viewMode:r,tabId:c})=>r==="story"&&!c,render:()=>t.createElement(_,null)})});})(); 3 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); } 4 | -------------------------------------------------------------------------------- /docs/sb-addons/essentials-outline-7/manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var t=__REACT__,{Children:k,Component:R,Fragment:P,Profiler:w,PureComponent:L,StrictMode:E,Suspense:D,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:v,cloneElement:x,createContext:H,createElement:M,createFactory:U,createRef:F,forwardRef:N,isValidElement:G,lazy:W,memo:u,startTransition:K,unstable_act:Y,useCallback:d,useContext:q,useDebugValue:V,useDeferredValue:Z,useEffect:p,useId:z,useImperativeHandle:J,useInsertionEffect:Q,useLayoutEffect:X,useMemo:$,useReducer:j,useRef:oo,useState:no,useSyncExternalStore:eo,useTransition:co,version:to}=__REACT__;var io=__STORYBOOK_API__,{ActiveTabs:so,Consumer:uo,ManagerContext:po,Provider:mo,RequestResponseError:So,addons:l,combineParameters:Co,controlOrMetaKey:ho,controlOrMetaSymbol:Ao,eventMatchesShortcut:_o,eventToShortcut:To,experimental_MockUniversalStore:bo,experimental_UniversalStore:go,experimental_requestResponse:yo,experimental_useUniversalStore:Oo,isMacLike:Bo,isShortcutTaken:fo,keyToSymbol:ko,merge:Ro,mockChannel:Po,optionOrAltSymbol:wo,shortcutMatchesShortcut:Lo,shortcutToHumanString:Eo,types:m,useAddonState:Do,useArgTypes:vo,useArgs:xo,useChannel:Ho,useGlobalTypes:Mo,useGlobals:S,useParameter:Uo,useSharedState:Fo,useStoryPrepared:No,useStorybookApi:C,useStorybookState:Go}=__STORYBOOK_API__;var Vo=__STORYBOOK_COMPONENTS__,{A:Zo,ActionBar:zo,AddonPanel:Jo,Badge:Qo,Bar:Xo,Blockquote:$o,Button:jo,ClipboardCode:on,Code:nn,DL:en,Div:cn,DocumentWrapper:tn,EmptyTabContent:rn,ErrorFormatter:In,FlexBar:an,Form:ln,H1:sn,H2:un,H3:dn,H4:pn,H5:mn,H6:Sn,HR:Cn,IconButton:h,IconButtonSkeleton:hn,Icons:An,Img:_n,LI:Tn,Link:bn,ListItem:gn,Loader:yn,Modal:On,OL:Bn,P:fn,Placeholder:kn,Pre:Rn,ProgressSpinner:Pn,ResetWrapper:wn,ScrollArea:Ln,Separator:En,Spaced:Dn,Span:vn,StorybookIcon:xn,StorybookLogo:Hn,Symbols:Mn,SyntaxHighlighter:Un,TT:Fn,TabBar:Nn,TabButton:Gn,TabWrapper:Wn,Table:Kn,Tabs:Yn,TabsState:qn,TooltipLinkList:Vn,TooltipMessage:Zn,TooltipNote:zn,UL:Jn,WithTooltip:Qn,WithTooltipPure:Xn,Zoom:$n,codeCommon:jn,components:oe,createCopyToClipboardFunction:ne,getStoryHref:ee,icons:ce,interleaveSeparators:te,nameSpaceClassNames:re,resetComponents:Ie,withReset:ae}=__STORYBOOK_COMPONENTS__;var de=__STORYBOOK_ICONS__,{AccessibilityAltIcon:pe,AccessibilityIcon:me,AddIcon:Se,AdminIcon:Ce,AlertAltIcon:he,AlertIcon:Ae,AlignLeftIcon:_e,AlignRightIcon:Te,AppleIcon:be,ArrowBottomLeftIcon:ge,ArrowBottomRightIcon:ye,ArrowDownIcon:Oe,ArrowLeftIcon:Be,ArrowRightIcon:fe,ArrowSolidDownIcon:ke,ArrowSolidLeftIcon:Re,ArrowSolidRightIcon:Pe,ArrowSolidUpIcon:we,ArrowTopLeftIcon:Le,ArrowTopRightIcon:Ee,ArrowUpIcon:De,AzureDevOpsIcon:ve,BackIcon:xe,BasketIcon:He,BatchAcceptIcon:Me,BatchDenyIcon:Ue,BeakerIcon:Fe,BellIcon:Ne,BitbucketIcon:Ge,BoldIcon:We,BookIcon:Ke,BookmarkHollowIcon:Ye,BookmarkIcon:qe,BottomBarIcon:Ve,BottomBarToggleIcon:Ze,BoxIcon:ze,BranchIcon:Je,BrowserIcon:Qe,ButtonIcon:Xe,CPUIcon:$e,CalendarIcon:je,CameraIcon:oc,CategoryIcon:nc,CertificateIcon:ec,ChangedIcon:cc,ChatIcon:tc,CheckIcon:rc,ChevronDownIcon:Ic,ChevronLeftIcon:ac,ChevronRightIcon:lc,ChevronSmallDownIcon:ic,ChevronSmallLeftIcon:sc,ChevronSmallRightIcon:uc,ChevronSmallUpIcon:dc,ChevronUpIcon:pc,ChromaticIcon:mc,ChromeIcon:Sc,CircleHollowIcon:Cc,CircleIcon:hc,ClearIcon:Ac,CloseAltIcon:_c,CloseIcon:Tc,CloudHollowIcon:bc,CloudIcon:gc,CogIcon:yc,CollapseIcon:Oc,CommandIcon:Bc,CommentAddIcon:fc,CommentIcon:kc,CommentsIcon:Rc,CommitIcon:Pc,CompassIcon:wc,ComponentDrivenIcon:Lc,ComponentIcon:Ec,ContrastIcon:Dc,ControlsIcon:vc,CopyIcon:xc,CreditIcon:Hc,CrossIcon:Mc,DashboardIcon:Uc,DatabaseIcon:Fc,DeleteIcon:Nc,DiamondIcon:Gc,DirectionIcon:Wc,DiscordIcon:Kc,DocChartIcon:Yc,DocListIcon:qc,DocumentIcon:Vc,DownloadIcon:Zc,DragIcon:zc,EditIcon:Jc,EllipsisIcon:Qc,EmailIcon:Xc,ExpandAltIcon:$c,ExpandIcon:jc,EyeCloseIcon:ot,EyeIcon:nt,FaceHappyIcon:et,FaceNeutralIcon:ct,FaceSadIcon:tt,FacebookIcon:rt,FailedIcon:It,FastForwardIcon:at,FigmaIcon:lt,FilterIcon:it,FlagIcon:st,FolderIcon:ut,FormIcon:dt,GDriveIcon:pt,GithubIcon:mt,GitlabIcon:St,GlobeIcon:Ct,GoogleIcon:ht,GraphBarIcon:At,GraphLineIcon:_t,GraphqlIcon:Tt,GridAltIcon:bt,GridIcon:gt,GrowIcon:yt,HeartHollowIcon:Ot,HeartIcon:Bt,HomeIcon:ft,HourglassIcon:kt,InfoIcon:Rt,ItalicIcon:Pt,JumpToIcon:wt,KeyIcon:Lt,LightningIcon:Et,LightningOffIcon:Dt,LinkBrokenIcon:vt,LinkIcon:xt,LinkedinIcon:Ht,LinuxIcon:Mt,ListOrderedIcon:Ut,ListUnorderedIcon:Ft,LocationIcon:Nt,LockIcon:Gt,MarkdownIcon:Wt,MarkupIcon:Kt,MediumIcon:Yt,MemoryIcon:qt,MenuIcon:Vt,MergeIcon:Zt,MirrorIcon:zt,MobileIcon:Jt,MoonIcon:Qt,NutIcon:Xt,OutboxIcon:$t,OutlineIcon:A,PaintBrushIcon:jt,PaperClipIcon:or,ParagraphIcon:nr,PassedIcon:er,PhoneIcon:cr,PhotoDragIcon:tr,PhotoIcon:rr,PinAltIcon:Ir,PinIcon:ar,PlayAllHollowIcon:lr,PlayBackIcon:ir,PlayHollowIcon:sr,PlayIcon:ur,PlayNextIcon:dr,PlusIcon:pr,PointerDefaultIcon:mr,PointerHandIcon:Sr,PowerIcon:Cr,PrintIcon:hr,ProceedIcon:Ar,ProfileIcon:_r,PullRequestIcon:Tr,QuestionIcon:br,RSSIcon:gr,RedirectIcon:yr,ReduxIcon:Or,RefreshIcon:Br,ReplyIcon:fr,RepoIcon:kr,RequestChangeIcon:Rr,RewindIcon:Pr,RulerIcon:wr,SaveIcon:Lr,SearchIcon:Er,ShareAltIcon:Dr,ShareIcon:vr,ShieldIcon:xr,SideBySideIcon:Hr,SidebarAltIcon:Mr,SidebarAltToggleIcon:Ur,SidebarIcon:Fr,SidebarToggleIcon:Nr,SpeakerIcon:Gr,StackedIcon:Wr,StarHollowIcon:Kr,StarIcon:Yr,StatusFailIcon:qr,StatusPassIcon:Vr,StatusWarnIcon:Zr,StickerIcon:zr,StopAltHollowIcon:Jr,StopAltIcon:Qr,StopIcon:Xr,StorybookIcon:$r,StructureIcon:jr,SubtractIcon:oI,SunIcon:nI,SupportIcon:eI,SwitchAltIcon:cI,SyncIcon:tI,TabletIcon:rI,ThumbsUpIcon:II,TimeIcon:aI,TimerIcon:lI,TransferIcon:iI,TrashIcon:sI,TwitterIcon:uI,TypeIcon:dI,UbuntuIcon:pI,UndoIcon:mI,UnfoldIcon:SI,UnlockIcon:CI,UnpinIcon:hI,UploadIcon:AI,UserAddIcon:_I,UserAltIcon:TI,UserIcon:bI,UsersIcon:gI,VSCodeIcon:yI,VerifiedIcon:OI,VideoIcon:BI,WandIcon:fI,WatchIcon:kI,WindowsIcon:RI,WrenchIcon:PI,XIcon:wI,YoutubeIcon:LI,ZoomIcon:EI,ZoomOutIcon:DI,ZoomResetIcon:vI,iconList:xI}=__STORYBOOK_ICONS__;var i="storybook/outline",_="outline",T=u(function(){let[c,r]=S(),s=C(),I=[!0,"true"].includes(c[_]),a=d(()=>r({[_]:!I}),[I]);return p(()=>{s.setAddonShortcut(i,{label:"Toggle Outline",defaultShortcut:["alt","O"],actionName:"outline",showInMenu:!1,action:a})},[a,s]),t.createElement(h,{key:"outline",active:I,title:"Apply outlines to the preview",onClick:a},t.createElement(A,null))});l.register(i,()=>{l.add(i,{title:"Outline",type:m.TOOL,match:({viewMode:c,tabId:r})=>!!(c&&c.match(/^(story|docs)$/))&&!r,render:()=>t.createElement(T,null)})});})(); 3 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); } 4 | -------------------------------------------------------------------------------- /docs/sb-addons/essentials-toolbars-5/manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var n=__REACT__,{Children:se,Component:ie,Fragment:ue,Profiler:ce,PureComponent:pe,StrictMode:me,Suspense:de,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:be,cloneElement:Se,createContext:_e,createElement:Te,createFactory:ye,createRef:ve,forwardRef:fe,isValidElement:Ce,lazy:Ie,memo:Oe,startTransition:xe,unstable_act:Ee,useCallback:f,useContext:ge,useDebugValue:ke,useDeferredValue:he,useEffect:g,useId:Ae,useImperativeHandle:Re,useInsertionEffect:Le,useLayoutEffect:Be,useMemo:Me,useReducer:Pe,useRef:L,useState:B,useSyncExternalStore:Ne,useTransition:we,version:De}=__REACT__;var Ge=__STORYBOOK_API__,{ActiveTabs:Ke,Consumer:Ue,ManagerContext:Ye,Provider:$e,RequestResponseError:qe,addons:k,combineParameters:ze,controlOrMetaKey:je,controlOrMetaSymbol:Ze,eventMatchesShortcut:Je,eventToShortcut:Qe,experimental_MockUniversalStore:Xe,experimental_UniversalStore:et,experimental_requestResponse:tt,experimental_useUniversalStore:rt,isMacLike:ot,isShortcutTaken:at,keyToSymbol:nt,merge:lt,mockChannel:st,optionOrAltSymbol:it,shortcutMatchesShortcut:ut,shortcutToHumanString:ct,types:M,useAddonState:pt,useArgTypes:mt,useArgs:dt,useChannel:bt,useGlobalTypes:P,useGlobals:h,useParameter:St,useSharedState:_t,useStoryPrepared:Tt,useStorybookApi:N,useStorybookState:yt}=__STORYBOOK_API__;var Ot=__STORYBOOK_COMPONENTS__,{A:xt,ActionBar:Et,AddonPanel:gt,Badge:kt,Bar:ht,Blockquote:At,Button:Rt,ClipboardCode:Lt,Code:Bt,DL:Mt,Div:Pt,DocumentWrapper:Nt,EmptyTabContent:wt,ErrorFormatter:Dt,FlexBar:Vt,Form:Ht,H1:Wt,H2:Ft,H3:Gt,H4:Kt,H5:Ut,H6:Yt,HR:$t,IconButton:w,IconButtonSkeleton:qt,Icons:A,Img:zt,LI:jt,Link:Zt,ListItem:Jt,Loader:Qt,Modal:Xt,OL:er,P:tr,Placeholder:rr,Pre:or,ProgressSpinner:ar,ResetWrapper:nr,ScrollArea:lr,Separator:D,Spaced:sr,Span:ir,StorybookIcon:ur,StorybookLogo:cr,Symbols:pr,SyntaxHighlighter:mr,TT:dr,TabBar:br,TabButton:Sr,TabWrapper:_r,Table:Tr,Tabs:yr,TabsState:vr,TooltipLinkList:V,TooltipMessage:fr,TooltipNote:Cr,UL:Ir,WithTooltip:H,WithTooltipPure:Or,Zoom:xr,codeCommon:Er,components:gr,createCopyToClipboardFunction:kr,getStoryHref:hr,icons:Ar,interleaveSeparators:Rr,nameSpaceClassNames:Lr,resetComponents:Br,withReset:Mr}=__STORYBOOK_COMPONENTS__;var K={type:"item",value:""},U=(r,t)=>({...t,name:t.name||r,description:t.description||r,toolbar:{...t.toolbar,items:t.toolbar.items.map(e=>{let o=typeof e=="string"?{value:e,title:e}:e;return o.type==="reset"&&t.toolbar.icon&&(o.icon=t.toolbar.icon,o.hideIcon=!0),{...K,...o}})}}),Y=["reset"],$=r=>r.filter(t=>!Y.includes(t.type)).map(t=>t.value),S="addon-toolbars",q=async(r,t,e)=>{e&&e.next&&await r.setAddonShortcut(S,{label:e.next.label,defaultShortcut:e.next.keys,actionName:`${t}:next`,action:e.next.action}),e&&e.previous&&await r.setAddonShortcut(S,{label:e.previous.label,defaultShortcut:e.previous.keys,actionName:`${t}:previous`,action:e.previous.action}),e&&e.reset&&await r.setAddonShortcut(S,{label:e.reset.label,defaultShortcut:e.reset.keys,actionName:`${t}:reset`,action:e.reset.action})},z=r=>t=>{let{id:e,toolbar:{items:o,shortcuts:a}}=t,c=N(),[_,i]=h(),l=L([]),u=_[e],C=f(()=>{i({[e]:""})},[i]),I=f(()=>{let s=l.current,m=s.indexOf(u),d=m===s.length-1?0:m+1,p=l.current[d];i({[e]:p})},[l,u,i]),O=f(()=>{let s=l.current,m=s.indexOf(u),d=m>-1?m:0,p=d===0?s.length-1:d-1,b=l.current[p];i({[e]:b})},[l,u,i]);return g(()=>{a&&q(c,e,{next:{...a.next,action:I},previous:{...a.previous,action:O},reset:{...a.reset,action:C}})},[c,e,a,I,O,C]),g(()=>{l.current=$(o)},[]),n.createElement(r,{cycleValues:l.current,...t})},W=({currentValue:r,items:t})=>r!=null&&t.find(e=>e.value===r&&e.type!=="reset"),j=({currentValue:r,items:t})=>{let e=W({currentValue:r,items:t});if(e)return e.icon},Z=({currentValue:r,items:t})=>{let e=W({currentValue:r,items:t});if(e)return e.title},J=({active:r,disabled:t,title:e,icon:o,description:a,onClick:c})=>n.createElement(w,{active:r,title:a,disabled:t,onClick:t?()=>{}:c},o&&n.createElement(A,{icon:o,__suppressDeprecationWarning:!0}),e?`\xA0${e}`:null),Q=({right:r,title:t,value:e,icon:o,hideIcon:a,onClick:c,disabled:_,currentValue:i})=>{let l=o&&n.createElement(A,{style:{opacity:1},icon:o,__suppressDeprecationWarning:!0}),u={id:e??"_reset",active:i===e,right:r,title:t,disabled:_,onClick:c};return o&&!a&&(u.icon=l),u},X=z(({id:r,name:t,description:e,toolbar:{icon:o,items:a,title:c,preventDynamicIcon:_,dynamicTitle:i}})=>{let[l,u,C]=h(),[I,O]=B(!1),s=l[r],m=!!s,d=r in C,p=o,b=c;_||(p=j({currentValue:s,items:a})||p),i&&(b=Z({currentValue:s,items:a})||b),!b&&!p&&console.warn(`Toolbar '${t}' has no title or icon`);let F=f(E=>{u({[r]:E})},[r,u]);return n.createElement(H,{placement:"top",tooltip:({onHide:E})=>{let G=a.filter(({type:x})=>{let R=!0;return x==="reset"&&!s&&(R=!1),R}).map(x=>Q({...x,currentValue:s,disabled:d,onClick:()=>{F(x.value),E()}}));return n.createElement(V,{links:G})},closeOnOutsideClick:!0,onVisibleChange:O},n.createElement(J,{active:I||m,disabled:d,description:e||"",icon:p,title:b||""}))}),ee=()=>{let r=P(),t=Object.keys(r).filter(e=>!!r[e].toolbar);return t.length?n.createElement(n.Fragment,null,n.createElement(D,null),t.map(e=>{let o=U(e,r[e]);return n.createElement(X,{key:e,id:e,...o})})):null};k.register(S,()=>k.add(S,{title:S,type:M.TOOL,match:({tabId:r})=>!r,render:()=>n.createElement(ee,null)}));})(); 3 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); } 4 | -------------------------------------------------------------------------------- /docs/sb-addons/essentials-viewport-4/manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var me=Object.create;var J=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty;var _=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,a)=>(typeof require<"u"?require:t)[a]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var H=(e,t)=>()=>(e&&(t=e(e=0)),t);var be=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var ye=(e,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of fe(t))!we.call(e,l)&&l!==a&&J(e,l,{get:()=>t[l],enumerable:!(s=he(t,l))||s.enumerable});return e};var Se=(e,t,a)=>(a=e!=null?me(ge(e)):{},ye(t||!e||!e.__esModule?J(a,"default",{value:e,enumerable:!0}):a,e));var f=H(()=>{});var g=H(()=>{});var w=H(()=>{});var ce=be((le,Z)=>{f();g();w();(function(e){if(typeof le=="object"&&typeof Z<"u")Z.exports=e();else if(typeof define=="function"&&define.amd)define([],e);else{var t;typeof window<"u"||typeof window<"u"?t=window:typeof self<"u"?t=self:t=this,t.memoizerific=e()}})(function(){var e,t,a;return function s(l,b,p){function o(n,d){if(!b[n]){if(!l[n]){var r=typeof _=="function"&&_;if(!d&&r)return r(n,!0);if(i)return i(n,!0);var u=new Error("Cannot find module '"+n+"'");throw u.code="MODULE_NOT_FOUND",u}var I=b[n]={exports:{}};l[n][0].call(I.exports,function(h){var y=l[n][1][h];return o(y||h)},I,I.exports,s,l,b,p)}return b[n].exports}for(var i=typeof _=="function"&&_,m=0;m=0)return this.lastItem=this.list[i],this.list[i].val},p.prototype.set=function(o,i){var m;return this.lastItem&&this.isEqual(this.lastItem.key,o)?(this.lastItem.val=i,this):(m=this.indexOf(o),m>=0?(this.lastItem=this.list[m],this.list[m].val=i,this):(this.lastItem={key:o,val:i},this.list.push(this.lastItem),this.size++,this))},p.prototype.delete=function(o){var i;if(this.lastItem&&this.isEqual(this.lastItem.key,o)&&(this.lastItem=void 0),i=this.indexOf(o),i>=0)return this.size--,this.list.splice(i,1)[0]},p.prototype.has=function(o){var i;return this.lastItem&&this.isEqual(this.lastItem.key,o)?!0:(i=this.indexOf(o),i>=0?(this.lastItem=this.list[i],!0):!1)},p.prototype.forEach=function(o,i){var m;for(m=0;m0&&(M[S]={cacheItem:h,arg:arguments[S]},x?o(r,M):r.push(M),r.length>n&&i(r.shift())),I.wasMemoized=x,I.numArgs=S+1,R};return I.limit=n,I.wasMemoized=!1,I.cache=d,I.lru=r,I}};function o(n,d){var r=n.length,u=d.length,I,h,y;for(h=0;h=0&&(r=n[I],u=r.cacheItem.get(r.arg),!u||!u.size);I--)r.cacheItem.delete(r.arg)}function m(n,d){return n===d||n!==n&&d!==d}},{"map-or-similar":1}]},{},[3])(3)})});f();g();w();f();g();w();f();g();w();f();g();w();var c=__REACT__,{Children:$e,Component:Je,Fragment:V,Profiler:Qe,PureComponent:Xe,StrictMode:et,Suspense:tt,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:ot,cloneElement:nt,createContext:rt,createElement:N,createFactory:it,createRef:at,forwardRef:lt,isValidElement:ct,lazy:st,memo:Q,startTransition:ut,unstable_act:It,useCallback:X,useContext:pt,useDebugValue:dt,useDeferredValue:mt,useEffect:O,useId:ht,useImperativeHandle:ft,useInsertionEffect:gt,useLayoutEffect:wt,useMemo:bt,useReducer:yt,useRef:ee,useState:z,useSyncExternalStore:St,useTransition:vt,version:Ct}=__REACT__;f();g();w();var Rt=__STORYBOOK_API__,{ActiveTabs:xt,Consumer:At,ManagerContext:_t,Provider:Ot,RequestResponseError:Lt,addons:U,combineParameters:Bt,controlOrMetaKey:Pt,controlOrMetaSymbol:Mt,eventMatchesShortcut:Vt,eventToShortcut:Dt,experimental_MockUniversalStore:Ht,experimental_UniversalStore:Nt,experimental_requestResponse:zt,experimental_useUniversalStore:Ut,isMacLike:Gt,isShortcutTaken:Ft,keyToSymbol:qt,merge:Wt,mockChannel:Yt,optionOrAltSymbol:jt,shortcutMatchesShortcut:Kt,shortcutToHumanString:Zt,types:te,useAddonState:$t,useArgTypes:Jt,useArgs:Qt,useChannel:Xt,useGlobalTypes:eo,useGlobals:G,useParameter:F,useSharedState:to,useStoryPrepared:oo,useStorybookApi:oe,useStorybookState:no}=__STORYBOOK_API__;f();g();w();var co=__STORYBOOK_COMPONENTS__,{A:so,ActionBar:uo,AddonPanel:Io,Badge:po,Bar:mo,Blockquote:ho,Button:fo,ClipboardCode:go,Code:wo,DL:bo,Div:yo,DocumentWrapper:So,EmptyTabContent:vo,ErrorFormatter:Co,FlexBar:Eo,Form:To,H1:ko,H2:Ro,H3:xo,H4:Ao,H5:_o,H6:Oo,HR:Lo,IconButton:L,IconButtonSkeleton:Bo,Icons:Po,Img:Mo,LI:Vo,Link:Do,ListItem:Ho,Loader:No,Modal:zo,OL:Uo,P:Go,Placeholder:Fo,Pre:qo,ProgressSpinner:Wo,ResetWrapper:Yo,ScrollArea:jo,Separator:Ko,Spaced:Zo,Span:$o,StorybookIcon:Jo,StorybookLogo:Qo,Symbols:Xo,SyntaxHighlighter:en,TT:tn,TabBar:on,TabButton:nn,TabWrapper:rn,Table:an,Tabs:ln,TabsState:cn,TooltipLinkList:q,TooltipMessage:sn,TooltipNote:un,UL:In,WithTooltip:W,WithTooltipPure:pn,Zoom:dn,codeCommon:mn,components:hn,createCopyToClipboardFunction:fn,getStoryHref:gn,icons:wn,interleaveSeparators:bn,nameSpaceClassNames:yn,resetComponents:Sn,withReset:vn}=__STORYBOOK_COMPONENTS__;f();g();w();var Rn=__STORYBOOK_THEMING__,{CacheProvider:xn,ClassNames:An,Global:Y,ThemeProvider:_n,background:On,color:Ln,convert:Bn,create:Pn,createCache:Mn,createGlobal:Vn,createReset:Dn,css:Hn,darken:Nn,ensure:zn,ignoreSsrWarning:Un,isPropValid:Gn,jsx:Fn,keyframes:qn,lighten:Wn,styled:v,themes:Yn,typography:jn,useTheme:Kn,withTheme:Zn}=__STORYBOOK_THEMING__;f();g();w();var er=__STORYBOOK_ICONS__,{AccessibilityAltIcon:tr,AccessibilityIcon:or,AddIcon:nr,AdminIcon:rr,AlertAltIcon:ir,AlertIcon:ar,AlignLeftIcon:lr,AlignRightIcon:cr,AppleIcon:sr,ArrowBottomLeftIcon:ur,ArrowBottomRightIcon:Ir,ArrowDownIcon:pr,ArrowLeftIcon:dr,ArrowRightIcon:mr,ArrowSolidDownIcon:hr,ArrowSolidLeftIcon:fr,ArrowSolidRightIcon:gr,ArrowSolidUpIcon:wr,ArrowTopLeftIcon:br,ArrowTopRightIcon:yr,ArrowUpIcon:Sr,AzureDevOpsIcon:vr,BackIcon:Cr,BasketIcon:Er,BatchAcceptIcon:Tr,BatchDenyIcon:kr,BeakerIcon:Rr,BellIcon:xr,BitbucketIcon:Ar,BoldIcon:_r,BookIcon:Or,BookmarkHollowIcon:Lr,BookmarkIcon:Br,BottomBarIcon:Pr,BottomBarToggleIcon:Mr,BoxIcon:Vr,BranchIcon:Dr,BrowserIcon:ne,ButtonIcon:Hr,CPUIcon:Nr,CalendarIcon:zr,CameraIcon:Ur,CategoryIcon:Gr,CertificateIcon:Fr,ChangedIcon:qr,ChatIcon:Wr,CheckIcon:Yr,ChevronDownIcon:jr,ChevronLeftIcon:Kr,ChevronRightIcon:Zr,ChevronSmallDownIcon:$r,ChevronSmallLeftIcon:Jr,ChevronSmallRightIcon:Qr,ChevronSmallUpIcon:Xr,ChevronUpIcon:ei,ChromaticIcon:ti,ChromeIcon:oi,CircleHollowIcon:ni,CircleIcon:ri,ClearIcon:ii,CloseAltIcon:ai,CloseIcon:li,CloudHollowIcon:ci,CloudIcon:si,CogIcon:ui,CollapseIcon:Ii,CommandIcon:pi,CommentAddIcon:di,CommentIcon:mi,CommentsIcon:hi,CommitIcon:fi,CompassIcon:gi,ComponentDrivenIcon:wi,ComponentIcon:bi,ContrastIcon:yi,ControlsIcon:Si,CopyIcon:vi,CreditIcon:Ci,CrossIcon:Ei,DashboardIcon:Ti,DatabaseIcon:ki,DeleteIcon:Ri,DiamondIcon:xi,DirectionIcon:Ai,DiscordIcon:_i,DocChartIcon:Oi,DocListIcon:Li,DocumentIcon:Bi,DownloadIcon:Pi,DragIcon:Mi,EditIcon:Vi,EllipsisIcon:Di,EmailIcon:Hi,ExpandAltIcon:Ni,ExpandIcon:zi,EyeCloseIcon:Ui,EyeIcon:Gi,FaceHappyIcon:Fi,FaceNeutralIcon:qi,FaceSadIcon:Wi,FacebookIcon:Yi,FailedIcon:ji,FastForwardIcon:Ki,FigmaIcon:Zi,FilterIcon:$i,FlagIcon:Ji,FolderIcon:Qi,FormIcon:Xi,GDriveIcon:ea,GithubIcon:ta,GitlabIcon:oa,GlobeIcon:na,GoogleIcon:ra,GraphBarIcon:ia,GraphLineIcon:aa,GraphqlIcon:la,GridAltIcon:ca,GridIcon:sa,GrowIcon:j,HeartHollowIcon:ua,HeartIcon:Ia,HomeIcon:pa,HourglassIcon:da,InfoIcon:ma,ItalicIcon:ha,JumpToIcon:fa,KeyIcon:ga,LightningIcon:wa,LightningOffIcon:ba,LinkBrokenIcon:ya,LinkIcon:Sa,LinkedinIcon:va,LinuxIcon:Ca,ListOrderedIcon:Ea,ListUnorderedIcon:Ta,LocationIcon:ka,LockIcon:Ra,MarkdownIcon:xa,MarkupIcon:Aa,MediumIcon:_a,MemoryIcon:Oa,MenuIcon:La,MergeIcon:Ba,MirrorIcon:Pa,MobileIcon:re,MoonIcon:Ma,NutIcon:Va,OutboxIcon:Da,OutlineIcon:Ha,PaintBrushIcon:Na,PaperClipIcon:za,ParagraphIcon:Ua,PassedIcon:Ga,PhoneIcon:Fa,PhotoDragIcon:qa,PhotoIcon:Wa,PinAltIcon:Ya,PinIcon:ja,PlayAllHollowIcon:Ka,PlayBackIcon:Za,PlayHollowIcon:$a,PlayIcon:Ja,PlayNextIcon:Qa,PlusIcon:Xa,PointerDefaultIcon:el,PointerHandIcon:tl,PowerIcon:ol,PrintIcon:nl,ProceedIcon:rl,ProfileIcon:il,PullRequestIcon:al,QuestionIcon:ll,RSSIcon:cl,RedirectIcon:sl,ReduxIcon:ul,RefreshIcon:ie,ReplyIcon:Il,RepoIcon:pl,RequestChangeIcon:dl,RewindIcon:ml,RulerIcon:hl,SaveIcon:fl,SearchIcon:gl,ShareAltIcon:wl,ShareIcon:bl,ShieldIcon:yl,SideBySideIcon:Sl,SidebarAltIcon:vl,SidebarAltToggleIcon:Cl,SidebarIcon:El,SidebarToggleIcon:Tl,SpeakerIcon:kl,StackedIcon:Rl,StarHollowIcon:xl,StarIcon:Al,StatusFailIcon:_l,StatusPassIcon:Ol,StatusWarnIcon:Ll,StickerIcon:Bl,StopAltHollowIcon:Pl,StopAltIcon:Ml,StopIcon:Vl,StorybookIcon:Dl,StructureIcon:Hl,SubtractIcon:Nl,SunIcon:zl,SupportIcon:Ul,SwitchAltIcon:Gl,SyncIcon:Fl,TabletIcon:ae,ThumbsUpIcon:ql,TimeIcon:Wl,TimerIcon:Yl,TransferIcon:K,TrashIcon:jl,TwitterIcon:Kl,TypeIcon:Zl,UbuntuIcon:$l,UndoIcon:Jl,UnfoldIcon:Ql,UnlockIcon:Xl,UnpinIcon:ec,UploadIcon:tc,UserAddIcon:oc,UserAltIcon:nc,UserIcon:rc,UsersIcon:ic,VSCodeIcon:ac,VerifiedIcon:lc,VideoIcon:cc,WandIcon:sc,WatchIcon:uc,WindowsIcon:Ic,WrenchIcon:pc,XIcon:dc,YoutubeIcon:mc,ZoomIcon:hc,ZoomOutIcon:fc,ZoomResetIcon:gc,iconList:wc}=__STORYBOOK_ICONS__;var $=Se(ce()),B="storybook/viewport",A="viewport",Ie={mobile1:{name:"Small mobile",styles:{height:"568px",width:"320px"},type:"mobile"},mobile2:{name:"Large mobile",styles:{height:"896px",width:"414px"},type:"mobile"},tablet:{name:"Tablet",styles:{height:"1112px",width:"834px"},type:"tablet"}},P={name:"Reset viewport",styles:{height:"100%",width:"100%"},type:"desktop"},Ce={[A]:{value:void 0,isRotated:!1}},Ee={viewport:"reset",viewportRotated:!1},Te=globalThis.FEATURES?.viewportStoryGlobals?Ce:Ee,pe=(e,t)=>e.indexOf(t),ke=(e,t)=>{let a=pe(e,t);return a===e.length-1?e[0]:e[a+1]},Re=(e,t)=>{let a=pe(e,t);return a<1?e[e.length-1]:e[a-1]},de=async(e,t,a,s)=>{await e.setAddonShortcut(B,{label:"Previous viewport",defaultShortcut:["alt","shift","V"],actionName:"previous",action:()=>{a({viewport:Re(s,t)})}}),await e.setAddonShortcut(B,{label:"Next viewport",defaultShortcut:["alt","V"],actionName:"next",action:()=>{a({viewport:ke(s,t)})}}),await e.setAddonShortcut(B,{label:"Reset viewport",defaultShortcut:["alt","control","V"],actionName:"reset",action:()=>{a(Te)}})},xe=v.div({display:"inline-flex",alignItems:"center"}),se=v.div(({theme:e})=>({display:"inline-block",textDecoration:"none",padding:10,fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"})),Ae=v(L)(()=>({display:"inline-flex",alignItems:"center"})),_e=v.div(({theme:e})=>({fontSize:e.typography.size.s2-1,marginLeft:10})),Oe={desktop:c.createElement(ne,null),mobile:c.createElement(re,null),tablet:c.createElement(ae,null),other:c.createElement(V,null)},Le=({api:e})=>{let t=F(A),[a,s,l]=G(),[b,p]=z(!1),{options:o=Ie,disable:i}=t||{},m=a?.[A]||{},n=m.value,d=m.isRotated,r=o[n]||P,u=b||r!==P,I=A in l,h=Object.keys(o).length;if(O(()=>{de(e,n,s,Object.keys(o))},[o,n,s,e]),r.styles===null||!o||h<1)return null;if(typeof r.styles=="function")return console.warn("Addon Viewport no longer supports dynamic styles using a function, use css calc() instead"),null;let y=d?r.styles.height:r.styles.width,R=d?r.styles.width:r.styles.height;return i?null:c.createElement(Be,{item:r,updateGlobals:s,viewportMap:o,viewportName:n,isRotated:d,setIsTooltipVisible:p,isLocked:I,isActive:u,width:y,height:R})},Be=c.memo(function(e){let{item:t,viewportMap:a,viewportName:s,isRotated:l,updateGlobals:b,setIsTooltipVisible:p,isLocked:o,isActive:i,width:m,height:n}=e,d=X(r=>b({[A]:r}),[b]);return c.createElement(V,null,c.createElement(W,{placement:"bottom",tooltip:({onHide:r})=>c.createElement(q,{links:[...length>0&&t!==P?[{id:"reset",title:"Reset viewport",icon:c.createElement(ie,null),onClick:()=>{d({value:void 0,isRotated:!1}),r()}}]:[],...Object.entries(a).map(([u,I])=>({id:u,title:I.name,icon:Oe[I.type],active:u===s,onClick:()=>{d({value:u,isRotated:!1}),r()}}))].flat()}),closeOnOutsideClick:!0,onVisibleChange:p},c.createElement(Ae,{disabled:o,key:"viewport",title:"Change the size of the preview",active:i,onDoubleClick:()=>{d({value:void 0,isRotated:!1})}},c.createElement(j,null),t!==P?c.createElement(_e,null,t.name," ",l?"(L)":"(P)"):null)),c.createElement(Y,{styles:{'iframe[data-is-storybook="true"]':{width:m,height:n}}}),t!==P?c.createElement(xe,null,c.createElement(se,{title:"Viewport width"},m.replace("px","")),o?"/":c.createElement(L,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{d({value:s,isRotated:!l})}},c.createElement(K,null)),c.createElement(se,{title:"Viewport height"},n.replace("px",""))):null)}),Pe=(0,$.default)(50)(e=>[...Me,...Object.entries(e).map(([t,{name:a,...s}])=>({...s,id:t,title:a}))]),D={id:"reset",title:"Reset viewport",styles:null,type:"other"},Me=[D],Ve=(0,$.default)(50)((e,t,a,s)=>e.filter(l=>l.id!==D.id||t.id!==l.id).map(l=>({...l,onClick:()=>{a({viewport:l.id}),s()}}))),De=({width:e,height:t,...a})=>({...a,height:e,width:t}),He=v.div({display:"inline-flex",alignItems:"center"}),ue=v.div(({theme:e})=>({display:"inline-block",textDecoration:"none",padding:10,fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"})),Ne=v(L)(()=>({display:"inline-flex",alignItems:"center"})),ze=v.div(({theme:e})=>({fontSize:e.typography.size.s2-1,marginLeft:10})),Ue=(e,t,a)=>{if(t===null)return;let s=typeof t=="function"?t(e):t;return a?De(s):s},Ge=Q(function(){let[e,t]=G(),{viewports:a=Ie,defaultOrientation:s,defaultViewport:l,disable:b}=F(A,{}),p=Pe(a),o=oe(),[i,m]=z(!1);l&&!p.find(u=>u.id===l)&&console.warn(`Cannot find "defaultViewport" of "${l}" in addon-viewport configs, please check the "viewports" setting in the configuration.`),O(()=>{de(o,e,t,Object.keys(a))},[a,e,e.viewport,t,o]),O(()=>{let u=s==="landscape";(l&&e.viewport!==l||s&&e.viewportRotated!==u)&&t({viewport:l,viewportRotated:u})},[s,l,t]);let n=p.find(u=>u.id===e.viewport)||p.find(u=>u.id===l)||p.find(u=>u.default)||D,d=ee(),r=Ue(d.current,n.styles,e.viewportRotated);return O(()=>{d.current=r},[n]),b||Object.entries(a).length===0?null:c.createElement(V,null,c.createElement(W,{placement:"top",tooltip:({onHide:u})=>c.createElement(q,{links:Ve(p,n,t,u)}),closeOnOutsideClick:!0,onVisibleChange:m},c.createElement(Ne,{key:"viewport",title:"Change the size of the preview",active:i||!!r,onDoubleClick:()=>{t({viewport:D.id})}},c.createElement(j,null),r?c.createElement(ze,null,e.viewportRotated?`${n.title} (L)`:`${n.title} (P)`):null)),r?c.createElement(He,null,c.createElement(Y,{styles:{'iframe[data-is-storybook="true"]':{...r||{width:"100%",height:"100%"}}}}),c.createElement(ue,{title:"Viewport width"},r.width.replace("px","")),c.createElement(L,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{t({viewportRotated:!e.viewportRotated})}},c.createElement(K,null)),c.createElement(ue,{title:"Viewport height"},r.height.replace("px",""))):null)});U.register(B,e=>{U.add(B,{title:"viewport / media-queries",type:te.TOOL,match:({viewMode:t,tabId:a})=>t==="story"&&!a,render:()=>FEATURES?.viewportStoryGlobals?N(Le,{api:e}):N(Ge,null)})});})(); 3 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); } 4 | -------------------------------------------------------------------------------- /docs/sb-addons/links-8/manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var y=__STORYBOOK_API__,{ActiveTabs:E,Consumer:T,ManagerContext:h,Provider:v,RequestResponseError:A,addons:a,combineParameters:b,controlOrMetaKey:O,controlOrMetaSymbol:k,eventMatchesShortcut:R,eventToShortcut:g,experimental_MockUniversalStore:x,experimental_UniversalStore:I,experimental_requestResponse:M,experimental_useUniversalStore:C,isMacLike:P,isShortcutTaken:U,keyToSymbol:f,merge:q,mockChannel:D,optionOrAltSymbol:G,shortcutMatchesShortcut:K,shortcutToHumanString:V,types:$,useAddonState:B,useArgTypes:N,useArgs:Q,useChannel:Y,useGlobalTypes:H,useGlobals:L,useParameter:j,useSharedState:w,useStoryPrepared:z,useStorybookApi:F,useStorybookState:J}=__STORYBOOK_API__;var e="storybook/links",n={NAVIGATE:`${e}/navigate`,REQUEST:`${e}/request`,RECEIVE:`${e}/receive`};a.register(e,t=>{t.on(n.REQUEST,({kind:u,name:l})=>{let i=t.storyId(u,l);t.emit(n.RECEIVE,i)})});})(); 3 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); } 4 | -------------------------------------------------------------------------------- /docs/sb-addons/storybook-10/manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var J=Object.create;var W=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var I=(t,e)=>()=>(t&&(e=t(t=0)),e);var P=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var ee=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of Y(e))!$.call(t,a)&&a!==n&&W(t,a,{get:()=>e[a],enumerable:!(r=X(e,a))||r.enumerable});return t};var te=(t,e,n)=>(n=t!=null?J(N(t)):{},ee(e||!t||!t.__esModule?W(n,"default",{value:t,enumerable:!0}):n,t));var g=I(()=>{});var d=I(()=>{});var p=I(()=>{});var z=P(C=>{"use strict";g();d();p();Object.defineProperty(C,"__esModule",{value:!0});C.default=void 0;var ne=function(){for(var e=arguments.length,n=new Array(e),r=0;r"u"&&(window.dataLayer=window.dataLayer||[],window.gtag=function(){window.dataLayer.push(arguments)}),(a=window).gtag.apply(a,n)}},re=ne;C.default=re});var D=P(G=>{"use strict";g();d();p();Object.defineProperty(G,"__esModule",{value:!0});G.default=fe;var ae=/^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs?\.?|via)$/i;function ie(t){return t.toString().trim().replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g,function(e,n,r){return n>0&&n+e.length!==r.length&&e.search(ae)>-1&&r.charAt(n-2)!==":"&&(r.charAt(n+e.length)!=="-"||r.charAt(n-1)==="-")&&r.charAt(n-1).search(/[^\s-]/)<0?e.toLowerCase():e.substr(1).search(/[A-Z]|\../)>-1?e:e.charAt(0).toUpperCase()+e.substr(1)})}function oe(t){return typeof t=="string"&&t.indexOf("@")!==-1}var ue="REDACTED (Potential Email Address)";function le(t){return oe(t)?(console.warn("This arg looks like an email address, redacting."),ue):t}function fe(){var t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:"",e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0,n=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!0,r=t||"";return e&&(r=ie(t)),n&&(r=le(r)),r}});var V=P(h=>{"use strict";g();d();p();Object.defineProperty(h,"__esModule",{value:!0});h.default=h.GA4=void 0;var se=k(z()),T=k(D()),ce=["eventCategory","eventAction","eventLabel","eventValue","hitType"],ge=["title","location"],de=["page","hitType"];function k(t){return t&&t.__esModule?t:{default:t}}function E(t,e){if(t==null)return{};var n=pe(t,e),r,a;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(a=0;a=0)&&Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}function pe(t,e){if(t==null)return{};var n={},r=Object.keys(t),a,i;for(i=0;i=0)&&(n[a]=t[a]);return n}function v(t){"@babel/helpers - typeof";return v=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v(t)}function y(t){return ve(t)||ye(t)||Q(t)||me()}function me(){throw new TypeError(`Invalid attempt to spread non-iterable instance. 3 | In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function ye(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}function ve(t){if(Array.isArray(t))return M(t)}function x(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(t,a).enumerable})),n.push.apply(n,r)}return n}function m(t){for(var e=1;et.length)&&(e=t.length);for(var n=0,r=new Array(e);n2&&arguments[2]!==void 0?arguments[2]:"https://www.googletagmanager.com/gtag/js";if(!(typeof window>"u"||typeof document>"u")&&!e._hasLoadedGA){var i=document.createElement("script");i.async=!0,i.src="".concat(a,"?id=").concat(n),r&&i.setAttribute("nonce",r),document.body.appendChild(i),window.dataLayer=window.dataLayer||[],window.gtag=function(){window.dataLayer.push(arguments)},e._hasLoadedGA=!0}}),f(this,"_toGtagOptions",function(n){if(n){var r={cookieUpdate:"cookie_update",cookieExpires:"cookie_expires",cookieDomain:"cookie_domain",cookieFlags:"cookie_flags",userId:"user_id",clientId:"client_id",anonymizeIp:"anonymize_ip",contentGroup1:"content_group1",contentGroup2:"content_group2",contentGroup3:"content_group3",contentGroup4:"content_group4",contentGroup5:"content_group5",allowAdFeatures:"allow_google_signals",allowAdPersonalizationSignals:"allow_ad_personalization_signals",nonInteraction:"non_interaction",page:"page_path",hitCallback:"event_callback"},a=Object.entries(n).reduce(function(i,o){var l=he(o,2),u=l[0],s=l[1];return r[u]?i[r[u]]=s:i[u]=s,i},{});return a}}),f(this,"initialize",function(n){var r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};if(!n)throw new Error("Require GA_MEASUREMENT_ID");var a=typeof n=="string"?[{trackingId:n}]:n;e._currentMeasurementId=a[0].trackingId;var i=r.gaOptions,o=r.gtagOptions,l=r.nonce,u=r.testMode,s=u===void 0?!1:u,c=r.gtagUrl;if(e._testMode=s,s||e._loadGA(e._currentMeasurementId,l,c),e.isInitialized||(e._gtag("js",new Date),a.forEach(function(S){var j=m(m(m({},e._toGtagOptions(m(m({},i),S.gaOptions))),o),S.gtagOptions);Object.keys(j).length?e._gtag("config",S.trackingId,j):e._gtag("config",S.trackingId)})),e.isInitialized=!0,!s){var O=y(e._queueGtag);for(e._queueGtag=[],e._isQueuing=!1;O.length;){var q=O.shift();e._gtag.apply(e,y(q)),q[0]==="get"&&(e._isQueuing=!0)}}}),f(this,"set",function(n){if(!n){console.warn("`fieldsObject` is required in .set()");return}if(v(n)!=="object"){console.warn("Expected `fieldsObject` arg to be an Object");return}Object.keys(n).length===0&&console.warn("empty `fieldsObject` given to .set()"),e._gaCommand("set",n)}),f(this,"_gaCommandSendEvent",function(n,r,a,i,o){e._gtag("event",r,m(m({event_category:n,event_label:a,value:i},o&&{non_interaction:o.nonInteraction}),e._toGtagOptions(o)))}),f(this,"_gaCommandSendEventParameters",function(){for(var n=arguments.length,r=new Array(n),a=0;a1?r-1:0),i=1;i{"use strict";g();d();p();function L(t){"@babel/helpers - typeof";return L=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},L(t)}Object.defineProperty(w,"__esModule",{value:!0});w.default=w.ReactGAImplementation=void 0;var K=Ce(V());function Z(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,n=new WeakMap;return(Z=function(a){return a?n:e})(t)}function Ce(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||L(t)!=="object"&&typeof t!="function")return{default:t};var n=Z(e);if(n&&n.has(t))return n.get(t);var r={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in t)if(i!=="default"&&Object.prototype.hasOwnProperty.call(t,i)){var o=a?Object.getOwnPropertyDescriptor(t,i):null;o&&(o.get||o.set)?Object.defineProperty(r,i,o):r[i]=t[i]}return r.default=t,n&&n.set(t,r),r}var Ie=K.GA4;w.ReactGAImplementation=Ie;var Ge=K.default;w.default=Ge});g();d();p();g();d();p();var H=te(B());H.default.initialize("G-V30ERZKLWJ",{gtagOptions:{anonymizeIp:!0,content_group:"storybook"}});})(); 5 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); } 6 | -------------------------------------------------------------------------------- /docs/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var g=__STORYBOOK_API__,{ActiveTabs:T,Consumer:O,ManagerContext:f,Provider:v,RequestResponseError:x,addons:n,combineParameters:A,controlOrMetaKey:k,controlOrMetaSymbol:M,eventMatchesShortcut:P,eventToShortcut:R,experimental_MockUniversalStore:w,experimental_UniversalStore:C,experimental_requestResponse:G,experimental_useUniversalStore:I,isMacLike:K,isShortcutTaken:U,keyToSymbol:q,merge:B,mockChannel:F,optionOrAltSymbol:Y,shortcutMatchesShortcut:j,shortcutToHumanString:E,types:H,useAddonState:L,useArgTypes:N,useArgs:z,useChannel:D,useGlobalTypes:J,useGlobals:Q,useParameter:V,useSharedState:W,useStoryPrepared:X,useStorybookApi:Z,useStorybookState:$}=__STORYBOOK_API__;var S=(()=>{let e;return typeof window<"u"?e=window:typeof globalThis<"u"?e=globalThis:typeof window<"u"?e=window:typeof self<"u"?e=self:e={},e})(),c="tag-filters",p="static-filter";n.register(c,e=>{let i=Object.entries(S.TAGS_OPTIONS??{}).reduce((t,r)=>{let[o,u]=r;return u.excludeFromSidebar&&(t[o]=!0),t},{});e.experimental_setFilter(p,t=>{let r=t.tags??[];return(r.includes("dev")||t.type==="docs")&&r.filter(o=>i[o]).length===0})});})(); 3 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); } 4 | -------------------------------------------------------------------------------- /docs/sb-addons/storybook-dark-mode-esm-preset-9/manager-bundle.js: -------------------------------------------------------------------------------- 1 | try{ 2 | (()=>{var Oe=Object.create;var Q=Object.defineProperty;var Re=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,Ae=Object.prototype.hasOwnProperty;var H=(o,e)=>()=>(o&&(e=o(o=0)),e);var ge=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports);var ve=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of ye(e))!Ae.call(o,n)&&n!==r&&Q(o,n,{get:()=>e[n],enumerable:!(t=Re(e,n))||t.enumerable});return o};var Ce=(o,e,r)=>(r=o!=null?Oe(he(o)):{},ve(e||!o||!o.__esModule?Q(r,"default",{value:o,enumerable:!0}):r,o));var c=H(()=>{});var a=H(()=>{});var i=H(()=>{});var ce=ge((ns,ne)=>{"use strict";c();a();i();ne.exports=function o(e,r){if(e===r)return!0;if(e&&r&&typeof e=="object"&&typeof r=="object"){if(e.constructor!==r.constructor)return!1;var t,n,l;if(Array.isArray(e)){if(t=e.length,t!=r.length)return!1;for(n=t;n--!==0;)if(!o(e[n],r[n]))return!1;return!0}if(e.constructor===RegExp)return e.source===r.source&&e.flags===r.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===r.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===r.toString();if(l=Object.keys(e),t=l.length,t!==Object.keys(r).length)return!1;for(n=t;n--!==0;)if(!Object.prototype.hasOwnProperty.call(r,l[n]))return!1;for(n=t;n--!==0;){var u=l[n];if(!o(e[u],r[u]))return!1}return!0}return e!==e&&r!==r}});c();a();i();c();a();i();c();a();i();var ze=__STORYBOOK_API__,{ActiveTabs:eo,Consumer:oo,ManagerContext:ro,Provider:to,RequestResponseError:no,addons:k,combineParameters:co,controlOrMetaKey:ao,controlOrMetaSymbol:io,eventMatchesShortcut:lo,eventToShortcut:uo,experimental_MockUniversalStore:so,experimental_UniversalStore:Io,experimental_requestResponse:fo,experimental_useUniversalStore:So,isMacLike:Eo,isShortcutTaken:po,keyToSymbol:_o,merge:mo,mockChannel:To,optionOrAltSymbol:Oo,shortcutMatchesShortcut:Ro,shortcutToHumanString:yo,types:ho,useAddonState:Ao,useArgTypes:go,useArgs:vo,useChannel:Co,useGlobalTypes:bo,useGlobals:Po,useParameter:X,useSharedState:Do,useStoryPrepared:No,useStorybookApi:wo,useStorybookState:ko}=__STORYBOOK_API__;c();a();i();var Ho=__STORYBOOK_TYPES__,{Addon_TypesEnum:Z}=__STORYBOOK_TYPES__;c();a();i();var Fo=__STORYBOOK_THEMING__,{CacheProvider:jo,ClassNames:Ko,Global:Vo,ThemeProvider:qo,background:Qo,color:Xo,convert:Zo,create:$o,createCache:Jo,createGlobal:zo,createReset:er,css:or,darken:rr,ensure:tr,ignoreSsrWarning:nr,isPropValid:cr,jsx:ar,keyframes:ir,lighten:lr,styled:ur,themes:v,typography:sr,useTheme:Ir,withTheme:fr}=__STORYBOOK_THEMING__;c();a();i();var dr=__REACT__,{Children:mr,Component:Tr,Fragment:Or,Profiler:Rr,PureComponent:yr,StrictMode:hr,Suspense:Ar,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:gr,cloneElement:vr,createContext:Cr,createElement:A,createFactory:br,createRef:Pr,forwardRef:Dr,isValidElement:Nr,lazy:wr,memo:kr,startTransition:Lr,unstable_act:Ur,useCallback:L,useContext:Mr,useDebugValue:Br,useDeferredValue:Hr,useEffect:C,useId:xr,useImperativeHandle:Gr,useInsertionEffect:Yr,useLayoutEffect:Wr,useMemo:$,useReducer:Fr,useRef:jr,useState:J,useSyncExternalStore:Kr,useTransition:Vr,version:qr}=__REACT__;c();a();i();c();a();i();var ee=(()=>{let o;return typeof window<"u"?o=window:typeof globalThis<"u"?o=globalThis:typeof window<"u"?o=window:typeof self<"u"?o=self:o={},o})();c();a();i();var ot=__STORYBOOK_COMPONENTS__,{A:rt,ActionBar:tt,AddonPanel:nt,Badge:ct,Bar:at,Blockquote:it,Button:lt,ClipboardCode:ut,Code:st,DL:It,Div:ft,DocumentWrapper:St,EmptyTabContent:Et,ErrorFormatter:pt,FlexBar:_t,Form:dt,H1:mt,H2:Tt,H3:Ot,H4:Rt,H5:yt,H6:ht,HR:At,IconButton:oe,IconButtonSkeleton:gt,Icons:vt,Img:Ct,LI:bt,Link:Pt,ListItem:Dt,Loader:Nt,Modal:wt,OL:kt,P:Lt,Placeholder:Ut,Pre:Mt,ProgressSpinner:Bt,ResetWrapper:Ht,ScrollArea:xt,Separator:Gt,Spaced:Yt,Span:Wt,StorybookIcon:Ft,StorybookLogo:jt,Symbols:Kt,SyntaxHighlighter:Vt,TT:qt,TabBar:Qt,TabButton:Xt,TabWrapper:Zt,Table:$t,Tabs:Jt,TabsState:zt,TooltipLinkList:en,TooltipMessage:on,TooltipNote:rn,UL:tn,WithTooltip:nn,WithTooltipPure:cn,Zoom:an,codeCommon:ln,components:un,createCopyToClipboardFunction:sn,getStoryHref:In,icons:fn,interleaveSeparators:Sn,nameSpaceClassNames:En,resetComponents:pn,withReset:_n}=__STORYBOOK_COMPONENTS__;c();a();i();var Rn=__STORYBOOK_ICONS__,{AccessibilityAltIcon:yn,AccessibilityIcon:hn,AddIcon:An,AdminIcon:gn,AlertAltIcon:vn,AlertIcon:Cn,AlignLeftIcon:bn,AlignRightIcon:Pn,AppleIcon:Dn,ArrowBottomLeftIcon:Nn,ArrowBottomRightIcon:wn,ArrowDownIcon:kn,ArrowLeftIcon:Ln,ArrowRightIcon:Un,ArrowSolidDownIcon:Mn,ArrowSolidLeftIcon:Bn,ArrowSolidRightIcon:Hn,ArrowSolidUpIcon:xn,ArrowTopLeftIcon:Gn,ArrowTopRightIcon:Yn,ArrowUpIcon:Wn,AzureDevOpsIcon:Fn,BackIcon:jn,BasketIcon:Kn,BatchAcceptIcon:Vn,BatchDenyIcon:qn,BeakerIcon:Qn,BellIcon:Xn,BitbucketIcon:Zn,BoldIcon:$n,BookIcon:Jn,BookmarkHollowIcon:zn,BookmarkIcon:ec,BottomBarIcon:oc,BottomBarToggleIcon:rc,BoxIcon:tc,BranchIcon:nc,BrowserIcon:cc,ButtonIcon:ac,CPUIcon:ic,CalendarIcon:lc,CameraIcon:uc,CategoryIcon:sc,CertificateIcon:Ic,ChangedIcon:fc,ChatIcon:Sc,CheckIcon:Ec,ChevronDownIcon:pc,ChevronLeftIcon:_c,ChevronRightIcon:dc,ChevronSmallDownIcon:mc,ChevronSmallLeftIcon:Tc,ChevronSmallRightIcon:Oc,ChevronSmallUpIcon:Rc,ChevronUpIcon:yc,ChromaticIcon:hc,ChromeIcon:Ac,CircleHollowIcon:gc,CircleIcon:vc,ClearIcon:Cc,CloseAltIcon:bc,CloseIcon:Pc,CloudHollowIcon:Dc,CloudIcon:Nc,CogIcon:wc,CollapseIcon:kc,CommandIcon:Lc,CommentAddIcon:Uc,CommentIcon:Mc,CommentsIcon:Bc,CommitIcon:Hc,CompassIcon:xc,ComponentDrivenIcon:Gc,ComponentIcon:Yc,ContrastIcon:Wc,ControlsIcon:Fc,CopyIcon:jc,CreditIcon:Kc,CrossIcon:Vc,DashboardIcon:qc,DatabaseIcon:Qc,DeleteIcon:Xc,DiamondIcon:Zc,DirectionIcon:$c,DiscordIcon:Jc,DocChartIcon:zc,DocListIcon:ea,DocumentIcon:oa,DownloadIcon:ra,DragIcon:ta,EditIcon:na,EllipsisIcon:ca,EmailIcon:aa,ExpandAltIcon:ia,ExpandIcon:la,EyeCloseIcon:ua,EyeIcon:sa,FaceHappyIcon:Ia,FaceNeutralIcon:fa,FaceSadIcon:Sa,FacebookIcon:Ea,FailedIcon:pa,FastForwardIcon:_a,FigmaIcon:da,FilterIcon:ma,FlagIcon:Ta,FolderIcon:Oa,FormIcon:Ra,GDriveIcon:ya,GithubIcon:ha,GitlabIcon:Aa,GlobeIcon:ga,GoogleIcon:va,GraphBarIcon:Ca,GraphLineIcon:ba,GraphqlIcon:Pa,GridAltIcon:Da,GridIcon:Na,GrowIcon:wa,HeartHollowIcon:ka,HeartIcon:La,HomeIcon:Ua,HourglassIcon:Ma,InfoIcon:Ba,ItalicIcon:Ha,JumpToIcon:xa,KeyIcon:Ga,LightningIcon:Ya,LightningOffIcon:Wa,LinkBrokenIcon:Fa,LinkIcon:ja,LinkedinIcon:Ka,LinuxIcon:Va,ListOrderedIcon:qa,ListUnorderedIcon:Qa,LocationIcon:Xa,LockIcon:Za,MarkdownIcon:$a,MarkupIcon:Ja,MediumIcon:za,MemoryIcon:ei,MenuIcon:oi,MergeIcon:ri,MirrorIcon:ti,MobileIcon:ni,MoonIcon:re,NutIcon:ci,OutboxIcon:ai,OutlineIcon:ii,PaintBrushIcon:li,PaperClipIcon:ui,ParagraphIcon:si,PassedIcon:Ii,PhoneIcon:fi,PhotoDragIcon:Si,PhotoIcon:Ei,PinAltIcon:pi,PinIcon:_i,PlayAllHollowIcon:di,PlayBackIcon:mi,PlayHollowIcon:Ti,PlayIcon:Oi,PlayNextIcon:Ri,PlusIcon:yi,PointerDefaultIcon:hi,PointerHandIcon:Ai,PowerIcon:gi,PrintIcon:vi,ProceedIcon:Ci,ProfileIcon:bi,PullRequestIcon:Pi,QuestionIcon:Di,RSSIcon:Ni,RedirectIcon:wi,ReduxIcon:ki,RefreshIcon:Li,ReplyIcon:Ui,RepoIcon:Mi,RequestChangeIcon:Bi,RewindIcon:Hi,RulerIcon:xi,SaveIcon:Gi,SearchIcon:Yi,ShareAltIcon:Wi,ShareIcon:Fi,ShieldIcon:ji,SideBySideIcon:Ki,SidebarAltIcon:Vi,SidebarAltToggleIcon:qi,SidebarIcon:Qi,SidebarToggleIcon:Xi,SpeakerIcon:Zi,StackedIcon:$i,StarHollowIcon:Ji,StarIcon:zi,StatusFailIcon:el,StatusPassIcon:ol,StatusWarnIcon:rl,StickerIcon:tl,StopAltHollowIcon:nl,StopAltIcon:cl,StopIcon:al,StorybookIcon:il,StructureIcon:ll,SubtractIcon:ul,SunIcon:te,SupportIcon:sl,SwitchAltIcon:Il,SyncIcon:fl,TabletIcon:Sl,ThumbsUpIcon:El,TimeIcon:pl,TimerIcon:_l,TransferIcon:dl,TrashIcon:ml,TwitterIcon:Tl,TypeIcon:Ol,UbuntuIcon:Rl,UndoIcon:yl,UnfoldIcon:hl,UnlockIcon:Al,UnpinIcon:gl,UploadIcon:vl,UserAddIcon:Cl,UserAltIcon:bl,UserIcon:Pl,UsersIcon:Dl,VSCodeIcon:Nl,VerifiedIcon:wl,VideoIcon:kl,WandIcon:Ll,WatchIcon:Ul,WindowsIcon:Ml,WrenchIcon:Bl,XIcon:Hl,YoutubeIcon:xl,ZoomIcon:Gl,ZoomOutIcon:Yl,ZoomResetIcon:Wl,iconList:Fl}=__STORYBOOK_ICONS__;c();a();i();var Ql=__STORYBOOK_CORE_EVENTS__,{ARGTYPES_INFO_REQUEST:Xl,ARGTYPES_INFO_RESPONSE:Zl,CHANNEL_CREATED:$l,CHANNEL_WS_DISCONNECT:Jl,CONFIG_ERROR:zl,CREATE_NEW_STORYFILE_REQUEST:eu,CREATE_NEW_STORYFILE_RESPONSE:ou,CURRENT_STORY_WAS_SET:ru,DOCS_PREPARED:tu,DOCS_RENDERED:x,FILE_COMPONENT_SEARCH_REQUEST:nu,FILE_COMPONENT_SEARCH_RESPONSE:cu,FORCE_REMOUNT:au,FORCE_RE_RENDER:iu,GLOBALS_UPDATED:lu,NAVIGATE_URL:uu,PLAY_FUNCTION_THREW_EXCEPTION:su,PRELOAD_ENTRIES:Iu,PREVIEW_BUILDER_PROGRESS:fu,PREVIEW_KEYDOWN:Su,REGISTER_SUBSCRIPTION:Eu,REQUEST_WHATS_NEW_DATA:pu,RESET_STORY_ARGS:_u,RESULT_WHATS_NEW_DATA:du,SAVE_STORY_REQUEST:mu,SAVE_STORY_RESPONSE:Tu,SELECT_STORY:Ou,SET_CONFIG:Ru,SET_CURRENT_STORY:yu,SET_FILTER:hu,SET_GLOBALS:Au,SET_INDEX:gu,SET_STORIES:G,SET_WHATS_NEW_CACHE:vu,SHARED_STATE_CHANGED:Cu,SHARED_STATE_SET:bu,STORIES_COLLAPSE_ALL:Pu,STORIES_EXPAND_ALL:Du,STORY_ARGS_UPDATED:Nu,STORY_CHANGED:Y,STORY_ERRORED:wu,STORY_FINISHED:ku,STORY_INDEX_INVALIDATED:Lu,STORY_MISSING:Uu,STORY_PREPARED:Mu,STORY_RENDERED:Bu,STORY_RENDER_PHASE_CHANGED:Hu,STORY_SPECIFIED:xu,STORY_THREW_EXCEPTION:Gu,STORY_UNCHANGED:Yu,TELEMETRY_ERROR:Wu,TESTING_MODULE_CANCEL_TEST_RUN_REQUEST:Fu,TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE:ju,TESTING_MODULE_CRASH_REPORT:Ku,TESTING_MODULE_PROGRESS_REPORT:Vu,TESTING_MODULE_RUN_ALL_REQUEST:qu,TESTING_MODULE_RUN_REQUEST:Qu,TOGGLE_WHATS_NEW_NOTIFICATIONS:Xu,UNHANDLED_ERRORS_WHILE_PLAYING:Zu,UPDATE_GLOBALS:$u,UPDATE_QUERY_PARAMS:Ju,UPDATE_STORY_ARGS:zu}=__STORYBOOK_CORE_EVENTS__;var K=Ce(ce());c();a();i();var ae="DARK_MODE",W="UPDATE_DARK_MODE";function P(o){"@babel/helpers - typeof";return P=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},P(o)}var be=["current","stylePreview"],F;function Pe(o,e){if(o==null)return{};var r=De(o,e),t,n;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(o);for(n=0;n=0)&&Object.prototype.propertyIsEnumerable.call(o,t)&&(r[t]=o[t])}return r}function De(o,e){if(o==null)return{};var r={},t=Object.keys(o),n,l;for(l=0;l=0)&&(r[n]=o[n]);return r}function Ne(o,e){return Le(o)||ke(o,e)||le(o,e)||we()}function we(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. 3 | In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function ke(o,e){var r=o==null?null:typeof Symbol<"u"&&o[Symbol.iterator]||o["@@iterator"];if(r!=null){var t,n,l,u,p=[],d=!0,O=!1;try{if(l=(r=r.call(o)).next,e===0){if(Object(r)!==r)return;d=!1}else for(;!(d=(t=l.call(r)).done)&&(p.push(t.value),p.length!==e);d=!0);}catch(s){O=!0,n=s}finally{try{if(!d&&r.return!=null&&(u=r.return(),Object(u)!==u))return}finally{if(O)throw n}}return p}}function Le(o){if(Array.isArray(o))return o}function ie(o,e){var r=Object.keys(o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);e&&(t=t.filter(function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable})),r.push.apply(r,t)}return r}function m(o){for(var e=1;eo.length)&&(e=o.length);for(var r=0,t=new Array(e);r0&&arguments[0]!==void 0?arguments[0]:{},r=B.localStorage.getItem(Ie);if(typeof r=="string"){var t=JSON.parse(r);return e&&(e.dark&&!(0,K.default)(t.dark,e.dark)&&(t.dark=e.dark,b(t)),e.light&&!(0,K.default)(t.light,e.light)&&(t.light=e.light,b(t))),t}return m(m({},V),e)};Se(T());function We(o){var e=o.api,r=J(g.matches),t=Ne(r,2),n=t[0],l=t[1],u=X("darkMode",{}),p=u.current,d=u.stylePreview,O=Pe(u,be),s=e.getChannel(),h=$(function(){return T(O).userHasExplicitlySetTheTheme},[O]),N=L(function(I){var _=T();e.setOptions({theme:_[I]}),l(I==="dark"),e.getChannel().emit(ae,I==="dark"),Se(_),d&&Ye(_)},[e,d]),y=L(function(I){var _=T(),w=I||(_.current==="dark"?"light":"dark");b(m(m({},_),{},{current:w})),N(w)},[N]);function q(I){h||p||y(I.matches?"dark":"light")}var R=L(function(){var I=T(),_=I.current,w=_===void 0?"light":_;N(w)},[N]),Te=function(){y();var _=T();b(m(m({},_),{},{userHasExplicitlySetTheTheme:!0}))};return C(function(){var I=T();b(m(m(m({},I),u),{},{current:I.current||u.current})),R()},[u,R]),C(function(){return s.on(Y,R),s.on(G,R),s.on(x,R),g.addListener(q),function(){s.removeListener(Y,R),s.removeListener(G,R),s.removeListener(x,R),g.removeListener(q)}}),C(function(){return s.on(W,y),function(){s.removeListener(W,y)}}),C(function(){h||(p?y(p):g.matches&&y("dark"))},[p,y,h]),A(oe,{key:"dark-mode",title:n?"Change theme to light mode":"Change theme to dark mode",onClick:Te},n?A(te,{"aria-hidden":"true"}):A(re,{"aria-hidden":"true"}))}var Ee=We;function D(o){"@babel/helpers - typeof";return D=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},D(o)}function pe(o,e){var r=Object.keys(o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);e&&(t=t.filter(function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable})),r.push.apply(r,t)}return r}function _e(o){for(var e=1;e -------------------------------------------------------------------------------- /docs/sb-common-assets/nunito-sans-bold-italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/sb-common-assets/nunito-sans-bold-italic.woff2 -------------------------------------------------------------------------------- /docs/sb-common-assets/nunito-sans-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/sb-common-assets/nunito-sans-bold.woff2 -------------------------------------------------------------------------------- /docs/sb-common-assets/nunito-sans-italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/sb-common-assets/nunito-sans-italic.woff2 -------------------------------------------------------------------------------- /docs/sb-common-assets/nunito-sans-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/docs/sb-common-assets/nunito-sans-regular.woff2 -------------------------------------------------------------------------------- /docs/sb-manager/globals.js: -------------------------------------------------------------------------------- 1 | import ESM_COMPAT_Module from "node:module"; 2 | import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url'; 3 | import { dirname as ESM_COMPAT_dirname } from 'node:path'; 4 | const __filename = ESM_COMPAT_fileURLToPath(import.meta.url); 5 | const __dirname = ESM_COMPAT_dirname(__filename); 6 | const require = ESM_COMPAT_Module.createRequire(import.meta.url); 7 | 8 | // src/manager/globals/globals.ts 9 | var _ = { 10 | react: "__REACT__", 11 | "react-dom": "__REACT_DOM__", 12 | "react-dom/client": "__REACT_DOM_CLIENT__", 13 | "@storybook/icons": "__STORYBOOK_ICONS__", 14 | "storybook/internal/manager-api": "__STORYBOOK_API__", 15 | "@storybook/manager-api": "__STORYBOOK_API__", 16 | "@storybook/core/manager-api": "__STORYBOOK_API__", 17 | "storybook/internal/components": "__STORYBOOK_COMPONENTS__", 18 | "@storybook/components": "__STORYBOOK_COMPONENTS__", 19 | "@storybook/core/components": "__STORYBOOK_COMPONENTS__", 20 | "storybook/internal/channels": "__STORYBOOK_CHANNELS__", 21 | "@storybook/channels": "__STORYBOOK_CHANNELS__", 22 | "@storybook/core/channels": "__STORYBOOK_CHANNELS__", 23 | "storybook/internal/core-errors": "__STORYBOOK_CORE_EVENTS__", 24 | "@storybook/core-events": "__STORYBOOK_CORE_EVENTS__", 25 | "@storybook/core/core-events": "__STORYBOOK_CORE_EVENTS__", 26 | "storybook/internal/manager-errors": "__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__", 27 | "@storybook/core-events/manager-errors": "__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__", 28 | "@storybook/core/manager-errors": "__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__", 29 | "storybook/internal/router": "__STORYBOOK_ROUTER__", 30 | "@storybook/router": "__STORYBOOK_ROUTER__", 31 | "@storybook/core/router": "__STORYBOOK_ROUTER__", 32 | "storybook/internal/theming": "__STORYBOOK_THEMING__", 33 | "@storybook/theming": "__STORYBOOK_THEMING__", 34 | "@storybook/core/theming": "__STORYBOOK_THEMING__", 35 | "storybook/internal/theming/create": "__STORYBOOK_THEMING_CREATE__", 36 | "@storybook/theming/create": "__STORYBOOK_THEMING_CREATE__", 37 | "@storybook/core/theming/create": "__STORYBOOK_THEMING_CREATE__", 38 | "storybook/internal/client-logger": "__STORYBOOK_CLIENT_LOGGER__", 39 | "@storybook/client-logger": "__STORYBOOK_CLIENT_LOGGER__", 40 | "@storybook/core/client-logger": "__STORYBOOK_CLIENT_LOGGER__", 41 | "storybook/internal/types": "__STORYBOOK_TYPES__", 42 | "@storybook/types": "__STORYBOOK_TYPES__", 43 | "@storybook/core/types": "__STORYBOOK_TYPES__" 44 | }, o = Object.keys(_); 45 | export { 46 | o as globalPackages, 47 | _ as globalsNameReferenceMap 48 | }; 49 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import eslint from '@eslint/js' 2 | import react from 'eslint-plugin-react' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import globals from 'globals' 5 | import typescript from 'typescript-eslint' 6 | 7 | export default typescript.config( 8 | eslint.configs.recommended, 9 | typescript.configs.strictTypeChecked, 10 | typescript.configs.stylisticTypeChecked, 11 | react.configs.flat.recommended, 12 | react.configs.flat['jsx-runtime'], 13 | reactHooks.configs['recommended-latest'], 14 | { 15 | rules: { 16 | 'no-console': 'error', 17 | '@typescript-eslint/array-type': ['error', { default: 'generic' }], 18 | '@typescript-eslint/consistent-type-definitions': ['error', 'type'], 19 | '@typescript-eslint/non-nullable-type-assertion-style': 'off', 20 | '@typescript-eslint/restrict-template-expressions': 'off', 21 | }, 22 | languageOptions: { 23 | globals: { 24 | ...globals.browser, 25 | ...globals.node, 26 | }, 27 | parserOptions: { 28 | projectService: true, 29 | tsconfigRootDir: import.meta.dirname, 30 | }, 31 | }, 32 | settings: { 33 | react: { 34 | version: 'detect', 35 | }, 36 | }, 37 | }, 38 | { 39 | // Note: there must be no other properties in this object 40 | ignores: ['build/', 'coverage/', 'docs/', 'examples/', 'rollup.config.mjs'], 41 | }, 42 | ) 43 | -------------------------------------------------------------------------------- /examples/customization.tsx: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /examples/event-handlers-type.tsx: -------------------------------------------------------------------------------- 1 | import { SyntheticEvent } from 'react' 2 | 3 | type EventHandler = (event: SyntheticEvent) => (activity: Activity) => void 4 | 5 | interface Activity { 6 | date: string 7 | count: number 8 | level: 0 | 1 | 2 | 3 | 4 9 | } 10 | -------------------------------------------------------------------------------- /examples/event-handlers.tsx: -------------------------------------------------------------------------------- 1 | activity => { 5 | alert(JSON.stringify(activity)) 6 | }, 7 | onMouseEnter: event => activity => { 8 | console.log('on mouse enter') 9 | }, 10 | }} 11 | /> 12 | -------------------------------------------------------------------------------- /examples/labels-shape.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | ActivityCalendar, 3 | Props as CalendarProps, 4 | } from 'react-activity-calendar' 5 | 6 | // Shape of `labels` property (default values). 7 | // All properties are optional. 8 | const labels = { 9 | months: [ 10 | 'Jan', 11 | 'Feb', 12 | 'Mar', 13 | 'Apr', 14 | 'May', 15 | 'Jun', 16 | 'Jul', 17 | 'Aug', 18 | 'Sep', 19 | 'Oct', 20 | 'Nov', 21 | 'Dec', 22 | ], 23 | weekdays: [ 24 | 'Sun', // Sunday first! 25 | 'Mon', 26 | 'Tue', 27 | 'Wed', 28 | 'Thu', 29 | 'Fri', 30 | 'Sat', 31 | ], 32 | totalCount: '{{count}} activities in {{year}}', 33 | legend: { 34 | less: 'Less', 35 | more: 'More', 36 | }, 37 | } satisfies CalendarProps['labels'] 38 | 39 | -------------------------------------------------------------------------------- /examples/labels.tsx: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /examples/ref.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | 3 | const calendarRef = useRef(null) 4 | 5 | if (calendar.current) { 6 | console.log(calendarRef.current) 7 | } 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/themes-explicit.tsx: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/themes.tsx: -------------------------------------------------------------------------------- 1 | const explicitTheme: ThemeInput = { 2 | light: ['#f0f0f0', '#c4edde', '#7ac7c4', '#f73859', '#384259'], 3 | dark: ['#383838', '#4D455D', '#7DB9B6', '#F5E9CF', '#E96479'], 4 | } 5 | 6 | 7 | 8 | const minimalTheme: ThemeInput = { 9 | light: ['hsl(0, 0%, 92%)', 'rebeccapurple'], 10 | // for `dark` the default theme will be used 11 | } 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/tooltips-mui.tsx: -------------------------------------------------------------------------------- 1 | import { Tooltip as MuiTooltip } from '@mui/material' 2 | 3 | ( 6 | 7 | {block} 8 | 9 | )} 10 | renderColorLegend={(block, level) => ( 11 | {block} 12 | )} 13 | /> 14 | -------------------------------------------------------------------------------- /examples/tooltips-react.tsx: -------------------------------------------------------------------------------- 1 | import { Tooltip as ReactTooltip } from 'react-tooltip' 2 | import 'react-tooltip/dist/react-tooltip.css' 3 | 4 | <> 5 | 8 | React.cloneElement(block, { 9 | 'data-tooltip-id': 'react-tooltip', 10 | 'data-tooltip-html': `${activity.count} activities on ${activity.date}`, 11 | }) 12 | } 13 | /> 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-activity-calendar", 3 | "version": "2.7.12", 4 | "description": "React component to display activity data in calendar", 5 | "author": "Jonathan Gruber ", 6 | "license": "MIT", 7 | "homepage": "https://grubersjoe.github.io/react-activity-calendar/", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/grubersjoe/react-activity-calendar.git" 11 | }, 12 | "main": "build/index.js", 13 | "types": "build/index.d.ts", 14 | "files": [ 15 | "build" 16 | ], 17 | "scripts": { 18 | "build": "rollup -c", 19 | "build:storybook": "storybook build -o docs/ && touch docs/.nojekyll", 20 | "bundlesize": "pnpm install && EXTERNAL_DEPS=false pnpm build && open bundle.html", 21 | "check": "pnpx prettier -c . && pnpm exec tsc && pnpm lint", 22 | "dev": "storybook dev -p 9000", 23 | "format": "prettier --write .", 24 | "lint": "eslint .", 25 | "postbuild": "dts-bundle-generator src/index.tsx -o build/index.d.ts --no-check --no-banner --external-imports react date-fns", 26 | "prepublishOnly": "pnpm check && pnpm build", 27 | "start": "rollup -c -w", 28 | "test": "jest", 29 | "prepare": "husky" 30 | }, 31 | "dependencies": { 32 | "date-fns": "^4.1.0" 33 | }, 34 | "devDependencies": { 35 | "@babel/core": "^7.27.1", 36 | "@babel/preset-env": "^7.27.1", 37 | "@babel/preset-react": "^7.27.1", 38 | "@babel/preset-typescript": "^7.27.1", 39 | "@emotion/react": "^11.14.0", 40 | "@emotion/styled": "^11.14.0", 41 | "@eslint/js": "^9.26.0", 42 | "@ianvs/prettier-plugin-sort-imports": "^4.3.1", 43 | "@jest/globals": "^29.7.0", 44 | "@jest/types": "^29.6.3", 45 | "@mui/material": "^7.0.1", 46 | "@rollup/plugin-babel": "^6.0.4", 47 | "@rollup/plugin-commonjs": "^28.0.1", 48 | "@rollup/plugin-node-resolve": "^16.0.0", 49 | "@rollup/plugin-replace": "^6.0.1", 50 | "@storybook/addon-docs": "^8.6.3", 51 | "@storybook/addon-essentials": "^8.6.3", 52 | "@storybook/addon-links": "^8.6.3", 53 | "@storybook/blocks": "^8.6.3", 54 | "@storybook/builder-vite": "^8.6.3", 55 | "@storybook/react": "^8.6.3", 56 | "@storybook/react-vite": "^8.6.3", 57 | "@storybook/theming": "^8.6.3", 58 | "@types/react": "^19.0.10", 59 | "@vitejs/plugin-react": "^4.3.4", 60 | "dts-bundle-generator": "^9.5.1", 61 | "eslint": "^9.26.0", 62 | "eslint-plugin-react": "^7.37.1", 63 | "eslint-plugin-react-hooks": "^5.2.0", 64 | "globals": "^16.0.0", 65 | "husky": "^9.1.7", 66 | "jest": "^29.7.0", 67 | "jest-environment-jsdom": "^29.7.0", 68 | "prettier": "^3.5.3", 69 | "prism-react-renderer": "^2.4.1", 70 | "react": "^19.0.0", 71 | "react-docgen": "^8.0.0", 72 | "react-ga4": "^2.1.0", 73 | "react-tooltip": "^5.27.0", 74 | "rollup": "^4.40.1", 75 | "rollup-plugin-copy": "^3.5.0", 76 | "rollup-plugin-filesize": "^10.0.0", 77 | "rollup-plugin-peer-deps-external": "^2.2.4", 78 | "rollup-plugin-visualizer": "^5.12.0", 79 | "storybook": "^8.6.3", 80 | "storybook-dark-mode": "^4.0.2", 81 | "typescript": "^5.8.2", 82 | "typescript-eslint": "^8.31.1", 83 | "vite": "^6.3.5" 84 | }, 85 | "peerDependencies": { 86 | "react": "^18.0.0 || ^19.0.0" 87 | }, 88 | "pnpm": { 89 | "overrides": { 90 | "react": "^19.0.0", 91 | "react-dom": "^19.0.0" 92 | }, 93 | "onlyBuiltDependencies": [ 94 | "esbuild" 95 | ] 96 | }, 97 | "jest": { 98 | "testEnvironment": "jsdom" 99 | }, 100 | "browserslist": [ 101 | "last 1 chrome version", 102 | "last 1 firefox version", 103 | "last 1 safari version" 104 | ] 105 | } 106 | -------------------------------------------------------------------------------- /rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import babel from '@rollup/plugin-babel' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import resolve from '@rollup/plugin-node-resolve' 4 | import replace from '@rollup/plugin-replace' 5 | import copy from 'rollup-plugin-copy' 6 | import filesize from 'rollup-plugin-filesize' 7 | import externalDeps from 'rollup-plugin-peer-deps-external' 8 | import { visualizer } from 'rollup-plugin-visualizer' 9 | 10 | const extensions = ['.ts', '.tsx'] 11 | 12 | // Pass EXTERNAL_DEPS=false to bundle this project including all dependencies. 13 | // Useful to analyze the bundle size. 14 | const useExternal = process.env.EXTERNAL_DEPS?.toLowerCase() !== 'false' 15 | 16 | export default { 17 | input: 'src/index.tsx', 18 | output: { 19 | file: 'build/index.js', 20 | format: 'cjs', 21 | sourcemap: true, 22 | exports: 'named', 23 | // Use 'auto' instead of 'default' for better interoperability with CRA etc. 24 | // https://rollupjs.org/guide/en/#outputinterop 25 | interop: 'auto', 26 | // Rollup does not support this React Server Components directive yet: 27 | // https://github.com/rollup/rollup/issues/4699 28 | banner: `'use client';`, 29 | }, 30 | plugins: [ 31 | replace({ 32 | preventAssignment: true, // recommended to set this to true, will be default in the next major version 33 | 'process.env.NODE_ENV': JSON.stringify('production'), 34 | }), 35 | ...(useExternal ? [externalDeps({ includeDependencies: true })] : [commonjs()]), 36 | babel({ 37 | extensions, 38 | exclude: 'node_modules/**', 39 | babelHelpers: 'bundled', 40 | }), 41 | resolve({ 42 | extensions, 43 | }), 44 | copy({ 45 | targets: [{ src: 'src/*.d.ts', dest: 'build/' }], 46 | }), 47 | filesize(), 48 | visualizer({ 49 | filename: 'bundle.html', 50 | }), 51 | ], 52 | onwarn(warning, warn) { 53 | if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('use client')) { 54 | return // ignore the error for now 55 | } 56 | warn(warning) 57 | }, 58 | } 59 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grubersjoe/react-activity-calendar/bf317488d0ea72e18f5458212b7002b552b69b35/screenshot.png -------------------------------------------------------------------------------- /src/component/ActivityCalendar.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { 4 | forwardRef, 5 | Fragment, 6 | useEffect, 7 | useState, 8 | type CSSProperties, 9 | type ForwardedRef, 10 | type ReactElement, 11 | } from 'react' 12 | import { getYear, parseISO } from 'date-fns' 13 | import { DEFAULT_LABELS, LABEL_MARGIN, NAMESPACE } from '../constants' 14 | import { useColorScheme } from '../hooks/useColorScheme' 15 | import { loadingAnimationName, useLoadingAnimation } from '../hooks/useLoadingAnimation' 16 | import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion' 17 | import { 18 | generateEmptyData, 19 | getClassName, 20 | groupByWeeks, 21 | range, 22 | validateActivities, 23 | } from '../lib/calendar' 24 | import { getMonthLabels, initWeekdayLabels, maxWeekdayLabelWidth } from '../lib/label' 25 | import { createTheme } from '../lib/theme' 26 | import type { 27 | Activity, 28 | BlockElement, 29 | DayIndex, 30 | DayName, 31 | EventHandlerMap, 32 | Labels, 33 | ReactEvent, 34 | SVGRectEventHandler, 35 | ThemeInput, 36 | } from '../types' 37 | import { styles } from './styles' 38 | 39 | export type Props = { 40 | /** 41 | * List of calendar entries. Every `Activity` object requires an ISO 8601 42 | * `date` string in the format `yyyy-MM-dd`, a `count` property with the 43 | * amount of tracked data and a `level` property in the range `0-maxLevel` 44 | * to specify activity intensity. The `maxLevel` prop is 4 by default. 45 | * 46 | * For missing dates, no activity is assumed. This allows choosing the start 47 | * and end date of the calendar arbitrarily by passing empty entries as the 48 | * first and last item. 49 | * 50 | * Example object: 51 | * 52 | * ```json 53 | * { 54 | * date: "2021-02-20", 55 | * count: 16, 56 | * level: 3 57 | * } 58 | * ``` 59 | */ 60 | data: Array 61 | /** 62 | * Margin between blocks in pixels. 63 | */ 64 | blockMargin?: number 65 | /** 66 | * Border radius of blocks in pixels. 67 | */ 68 | blockRadius?: number 69 | /** 70 | * Block size in pixels. 71 | */ 72 | blockSize?: number 73 | /** 74 | * Use a specific color scheme instead of the system one. Supported values 75 | * are `'light'` and `'dark'`. 76 | */ 77 | colorScheme?: 'light' | 'dark' 78 | /** 79 | * Event handlers to register for the SVG `` elements that are used to 80 | * render the calendar days. Handler signature: `event => activity => void` 81 | */ 82 | eventHandlers?: EventHandlerMap 83 | /** 84 | * Font size for text in pixels. 85 | */ 86 | fontSize?: number 87 | /** 88 | * Toggle to hide color legend below calendar. 89 | */ 90 | hideColorLegend?: boolean 91 | /** 92 | * Toggle to hide month labels above calendar. 93 | */ 94 | hideMonthLabels?: boolean 95 | /** 96 | * Toggle to hide the total count below calendar. 97 | */ 98 | hideTotalCount?: boolean 99 | /** 100 | * Localization strings for all calendar labels. 101 | * 102 | * `totalCount` supports the placeholders `{{count}}` and `{{year}}`. 103 | */ 104 | labels?: Labels 105 | /** 106 | * Maximum activity level (zero-indexed). 4 per default, 0 means "no activity". 107 | */ 108 | maxLevel?: number 109 | /** 110 | * Toggle for loading state. `data` property will be ignored if set. 111 | */ 112 | loading?: boolean 113 | /** 114 | * Ref to access the calendar DOM node. 115 | */ 116 | ref?: ForwardedRef 117 | /** 118 | * Render prop for calendar blocks (activities). For example, useful to wrap 119 | * the element with a tooltip component. Use `React.cloneElement` to pass 120 | * additional props to the element if necessary. 121 | */ 122 | renderBlock?: (block: BlockElement, activity: Activity) => ReactElement 123 | /** 124 | * Render prop for color legend blocks. For example, useful to wrap the 125 | * element with a tooltip component. Use `React.cloneElement` to pass 126 | * additional props to the element if necessary. 127 | */ 128 | renderColorLegend?: (block: BlockElement, level: number) => ReactElement 129 | /** 130 | * Toggle to show weekday labels left to the calendar. 131 | * Alternatively, pass a list of ISO 8601 weekday names to show. 132 | * For example `['mon', 'wed', 'fri']`. 133 | */ 134 | showWeekdayLabels?: boolean | Array 135 | /** 136 | * Style object to pass to component container. 137 | */ 138 | style?: CSSProperties 139 | /** 140 | * Set the calendar colors for the light and dark system color scheme. Pass 141 | * all colors per scheme explicitly (5 per default) or set exactly two colors 142 | * (the lowest and highest intensity) to calculate a single-hue scale. The 143 | * number of colors is controlled by the `maxLevel` property. Colors can be 144 | * specified in any valid CSS format. 145 | * 146 | * The colors for at least one scheme must be set. If undefined, the default 147 | * theme is used. By default, the calendar will select the current system color 148 | * scheme, but you can enforce a specific scheme with the `colorScheme` prop. 149 | * 150 | * Example: 151 | * 152 | * ```tsx 153 | * 160 | * ``` 161 | * 162 | */ 163 | theme?: ThemeInput 164 | /** 165 | * Overwrite the total activity count. 166 | */ 167 | totalCount?: number 168 | /** 169 | * Index of day to be used as start of week. 0 represents Sunday. 170 | */ 171 | weekStart?: DayIndex 172 | } 173 | 174 | export const ActivityCalendar = forwardRef( 175 | ( 176 | { 177 | data: activities, 178 | blockMargin = 4, 179 | blockRadius = 2, 180 | blockSize = 12, 181 | colorScheme: colorSchemeProp = undefined, 182 | eventHandlers = {}, 183 | fontSize = 14, 184 | hideColorLegend = false, 185 | hideMonthLabels = false, 186 | hideTotalCount = false, 187 | labels: labelsProp = undefined, 188 | maxLevel = 4, 189 | loading = false, 190 | renderBlock = undefined, 191 | renderColorLegend = undefined, 192 | showWeekdayLabels = false, 193 | style: styleProp = {}, 194 | theme: themeProp = undefined, 195 | totalCount: totalCountProp = undefined, 196 | weekStart = 0, // Sunday 197 | }: Props, // Required for react-docgen 198 | ref, 199 | ) => { 200 | const [isClient, setIsClient] = useState(false) 201 | useEffect(() => { 202 | setIsClient(true) 203 | }, []) 204 | 205 | maxLevel = Math.max(1, maxLevel) 206 | 207 | const theme = createTheme(themeProp, maxLevel + 1) 208 | const systemColorScheme = useColorScheme() 209 | const colorScheme = colorSchemeProp ?? systemColorScheme 210 | const colorScale = theme[colorScheme] 211 | 212 | useLoadingAnimation(colorScale[0] as string, colorScheme) 213 | const useAnimation = !usePrefersReducedMotion() 214 | 215 | if (loading) { 216 | activities = generateEmptyData() 217 | } 218 | 219 | validateActivities(activities, maxLevel) 220 | 221 | const firstActivity = activities[0] as Activity 222 | const year = getYear(parseISO(firstActivity.date)) 223 | const weeks = groupByWeeks(activities, weekStart) 224 | 225 | const labels = Object.assign({}, DEFAULT_LABELS, labelsProp) 226 | const labelHeight = hideMonthLabels ? 0 : fontSize + LABEL_MARGIN 227 | 228 | const weekdayLabels = initWeekdayLabels(showWeekdayLabels, weekStart) 229 | 230 | // Must be calculated on the client or SSR hydration errors will occur 231 | // because server and client HTML would not match. 232 | const weekdayLabelOffset = 233 | isClient && weekdayLabels.shouldShow 234 | ? maxWeekdayLabelWidth(labels.weekdays, weekdayLabels, fontSize) + LABEL_MARGIN 235 | : undefined 236 | 237 | function getDimensions() { 238 | return { 239 | width: weeks.length * (blockSize + blockMargin) - blockMargin, 240 | height: labelHeight + (blockSize + blockMargin) * 7 - blockMargin, 241 | } 242 | } 243 | 244 | function getEventHandlers(activity: Activity): SVGRectEventHandler { 245 | return ( 246 | Object.keys(eventHandlers) as Array 247 | ).reduce( 248 | (handlers, key) => ({ 249 | ...handlers, 250 | [key]: (event: ReactEvent) => eventHandlers[key]?.(event)(activity), 251 | }), 252 | {}, 253 | ) 254 | } 255 | 256 | function renderCalendar() { 257 | return weeks 258 | .map((week, weekIndex) => 259 | week.map((activity, dayIndex) => { 260 | if (!activity) { 261 | return null 262 | } 263 | 264 | const loadingAnimation = 265 | loading && useAnimation 266 | ? { 267 | animation: `${loadingAnimationName} 1.75s ease-in-out infinite`, 268 | animationDelay: `${weekIndex * 20 + dayIndex * 20}ms`, 269 | } 270 | : undefined 271 | 272 | const block = ( 273 | 286 | ) 287 | 288 | return ( 289 | 290 | {renderBlock ? renderBlock(block, activity) : block} 291 | 292 | ) 293 | }), 294 | ) 295 | .map((week, x) => ( 296 | 297 | {week} 298 | 299 | )) 300 | } 301 | 302 | function renderFooter() { 303 | if (hideTotalCount && hideColorLegend) { 304 | return null 305 | } 306 | 307 | const totalCount = 308 | typeof totalCountProp === 'number' 309 | ? totalCountProp 310 | : activities.reduce((sum, activity) => sum + activity.count, 0) 311 | 312 | return ( 313 |
317 | {/* Placeholder */} 318 | {loading &&
 
} 319 | 320 | {!loading && !hideTotalCount && ( 321 |
322 | {labels.totalCount 323 | ? labels.totalCount 324 | .replace('{{count}}', String(totalCount)) 325 | .replace('{{year}}', String(year)) 326 | : `${totalCount} activities in ${year}`} 327 |
328 | )} 329 | 330 | {!loading && !hideColorLegend && ( 331 |
332 | {labels.legend.less} 333 | {range(maxLevel + 1).map(level => { 334 | const block = ( 335 | 336 | 344 | 345 | ) 346 | 347 | return ( 348 | 349 | {renderColorLegend ? renderColorLegend(block, level) : block} 350 | 351 | ) 352 | })} 353 | {labels.legend.more} 354 |
355 | )} 356 |
357 | ) 358 | } 359 | 360 | function renderWeekdayLabels() { 361 | if (!weekdayLabels.shouldShow) { 362 | return null 363 | } 364 | 365 | return ( 366 | 367 | {range(7).map(index => { 368 | const dayIndex = ((index + weekStart) % 7) as DayIndex 369 | 370 | if (!weekdayLabels.byDayIndex(dayIndex)) { 371 | return null 372 | } 373 | 374 | return ( 375 | 383 | {labels.weekdays[dayIndex]} 384 | 385 | ) 386 | })} 387 | 388 | ) 389 | } 390 | 391 | function renderMonthLabels() { 392 | if (hideMonthLabels) { 393 | return null 394 | } 395 | 396 | return ( 397 | 398 | {getMonthLabels(weeks, labels.months).map(({ label, weekIndex }) => ( 399 | 406 | {label} 407 | 408 | ))} 409 | 410 | ) 411 | } 412 | 413 | const { width, height } = getDimensions() 414 | 415 | return ( 416 |
421 |
422 | 429 | {!loading && renderWeekdayLabels()} 430 | {!loading && renderMonthLabels()} 431 | {renderCalendar()} 432 | 433 |
434 | {renderFooter()} 435 |
436 | ) 437 | }, 438 | ) 439 | 440 | ActivityCalendar.displayName = 'ActivityCalendar' 441 | 442 | export const Skeleton = (props: Omit) => 443 | -------------------------------------------------------------------------------- /src/component/styles.ts: -------------------------------------------------------------------------------- 1 | import type { CSSProperties } from 'react' 2 | 3 | export const styles = { 4 | container: (fontSize: number) => 5 | ({ 6 | width: 'max-content', // Calendar should not grow 7 | maxWidth: '100%', // Do not remove - parent might be a flexbox 8 | display: 'flex', 9 | flexDirection: 'column', 10 | gap: '8px', 11 | fontSize: `${fontSize}px`, 12 | }) satisfies CSSProperties, 13 | scrollContainer: (fontSize: number) => 14 | ({ 15 | maxWidth: '100%', 16 | overflowX: 'auto', 17 | overflowY: 'hidden', 18 | paddingTop: Math.ceil(0.1 * fontSize), // SVG overflows in Firefox at y=0 19 | }) satisfies CSSProperties, 20 | calendar: { 21 | display: 'block', // SVGs are inline-block by default 22 | overflow: 'visible', // Weekday labels are rendered left of the container 23 | } satisfies CSSProperties, 24 | rect: (colorScheme: 'light' | 'dark') => 25 | ({ 26 | stroke: colorScheme === 'light' ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.04)', 27 | }) satisfies CSSProperties, 28 | footer: { 29 | container: { 30 | display: 'flex', 31 | flexWrap: 'wrap', 32 | gap: '4px 16px', 33 | whiteSpace: 'nowrap', 34 | } satisfies CSSProperties, 35 | legend: { 36 | marginLeft: 'auto', 37 | display: 'flex', 38 | alignItems: 'center', 39 | gap: '3px', 40 | } satisfies CSSProperties, 41 | }, 42 | } 43 | -------------------------------------------------------------------------------- /src/constants.ts: -------------------------------------------------------------------------------- 1 | export const NAMESPACE = 'react-activity-calendar' 2 | export const LABEL_MARGIN = 8 // px 3 | 4 | export const DEFAULT_MONTH_LABELS = [ 5 | 'Jan', 6 | 'Feb', 7 | 'Mar', 8 | 'Apr', 9 | 'May', 10 | 'Jun', 11 | 'Jul', 12 | 'Aug', 13 | 'Sep', 14 | 'Oct', 15 | 'Nov', 16 | 'Dec', 17 | ] 18 | 19 | export const DEFAULT_LABELS = { 20 | months: DEFAULT_MONTH_LABELS, 21 | weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 22 | totalCount: '{{count}} activities in {{year}}', 23 | legend: { 24 | less: 'Less', 25 | more: 'More', 26 | }, 27 | } 28 | -------------------------------------------------------------------------------- /src/hooks/useColorScheme.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | export function useColorScheme() { 4 | const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light') 5 | 6 | const onChange = (event: MediaQueryListEvent) => { 7 | setColorScheme(event.matches ? 'dark' : 'light') 8 | } 9 | 10 | useEffect(() => { 11 | const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') 12 | setColorScheme(mediaQuery.matches ? 'dark' : 'light') 13 | 14 | mediaQuery.addEventListener('change', onChange) 15 | 16 | return () => { 17 | mediaQuery.removeEventListener('change', onChange) 18 | } 19 | }, []) 20 | 21 | return colorScheme 22 | } 23 | -------------------------------------------------------------------------------- /src/hooks/useLoadingAnimation.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react' 2 | import { NAMESPACE } from '../constants' 3 | 4 | export const loadingAnimationName = `${NAMESPACE}--loading-animation` 5 | 6 | export function useLoadingAnimation(zeroColor: string, colorScheme: 'light' | 'dark') { 7 | useEffect(() => { 8 | const colorLoading = `oklab(from ${zeroColor} l a b)` 9 | const colorActive = 10 | colorScheme === 'light' 11 | ? `oklab(from ${zeroColor} calc(l * 0.96) a b)` 12 | : `oklab(from ${zeroColor} calc(l * 1.08) a b)` 13 | 14 | const style = document.createElement('style') 15 | style.innerHTML = ` 16 | @keyframes ${loadingAnimationName} { 17 | 0% { 18 | fill: ${colorLoading}; 19 | } 20 | 50% { 21 | fill: ${colorActive}; 22 | } 23 | 100% { 24 | fill: ${colorLoading}; 25 | } 26 | } 27 | ` 28 | document.head.appendChild(style) 29 | 30 | return () => { 31 | document.head.removeChild(style) 32 | } 33 | }, [zeroColor, colorScheme]) 34 | } 35 | -------------------------------------------------------------------------------- /src/hooks/usePrefersReducedMotion.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | const query = '(prefers-reduced-motion: reduce)' 4 | 5 | export function usePrefersReducedMotion() { 6 | const [prefersReducedMotion, setPrefersReducedMotion] = useState(true) 7 | 8 | useEffect(() => { 9 | const mediaQuery = window.matchMedia(query) 10 | setPrefersReducedMotion(mediaQuery.matches) 11 | 12 | const onChange = (event: MediaQueryListEvent) => { 13 | setPrefersReducedMotion(event.matches) 14 | } 15 | 16 | mediaQuery.addEventListener('change', onChange) 17 | 18 | return () => { 19 | mediaQuery.removeEventListener('change', onChange) 20 | } 21 | }, []) 22 | 23 | return prefersReducedMotion 24 | } 25 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import { ActivityCalendar, Skeleton } from './component/ActivityCalendar' 2 | 3 | export { ActivityCalendar, Skeleton } 4 | export default ActivityCalendar 5 | -------------------------------------------------------------------------------- /src/lib/calendar.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from '@jest/globals' 2 | import type { Activity } from '../types' 3 | import { validateActivities } from './calendar' 4 | 5 | describe('validateActivities', () => { 6 | it.each([ 7 | ['empty array', [], 4], 8 | ['invalid date', [{ date: 'invalid', count: 0, level: 0 }], 4], 9 | ['non-existing date', [{ date: '2023-02-29', count: 0, level: 0 }], 4], 10 | ['negative count', [{ date: '2024-01-01', count: -1, level: 0 }], 4], 11 | ['negative level', [{ date: '2024-01-01', count: 0, level: -1 }], 4], 12 | ['invalid level', [{ date: '2024-01-01', count: 0, level: 5 }], 4], 13 | ] as Array<[string, Array, number]>)( 14 | 'should throw error for invalid input: %s', 15 | (_, activities, maxLevel) => { 16 | expect(() => { 17 | validateActivities(activities, maxLevel) 18 | }).toThrow() 19 | }, 20 | ) 21 | 22 | it.each([ 23 | [[{ date: '2024-01-01', count: 0, level: 0 }], 4], 24 | [[{ date: '2024-02-29', count: 4, level: 4 }], 4], 25 | [[{ date: '2024-12-31', count: 10, level: 10 }], 10], 26 | ] as Array<[Array, number]>)('should accept valid input', (activities, maxLevel) => { 27 | expect(() => { 28 | validateActivities(activities, maxLevel) 29 | }).not.toThrow() 30 | }) 31 | }) 32 | -------------------------------------------------------------------------------- /src/lib/calendar.ts: -------------------------------------------------------------------------------- 1 | import { 2 | differenceInCalendarDays, 3 | eachDayOfInterval, 4 | endOfYear, 5 | formatISO, 6 | getDay, 7 | isValid, 8 | nextDay, 9 | parseISO, 10 | startOfYear, 11 | subWeeks, 12 | } from 'date-fns' 13 | import { NAMESPACE } from '../constants' 14 | import type { Activity, DayIndex, Week } from '../types' 15 | 16 | export function validateActivities(activities: Array, maxLevel: number) { 17 | if (activities.length === 0) { 18 | throw new Error('Activity data must not be empty.') 19 | } 20 | 21 | for (const { date, level, count } of activities) { 22 | if (!isValid(parseISO(date))) { 23 | throw new Error(`Activity date '${date}' is not a valid ISO 8601 date string.`) 24 | } 25 | 26 | if (count < 0) { 27 | throw new RangeError(`Activity count must not be negative, found ${count}.`) 28 | } 29 | 30 | if (level < 0 || level > maxLevel) { 31 | throw new RangeError( 32 | `Activity level ${level} for ${date} is out of range. It must be between 0 and ${maxLevel}.`, 33 | ) 34 | } 35 | } 36 | } 37 | 38 | export function groupByWeeks( 39 | activities: Array, 40 | weekStart: DayIndex = 0, // 0 = Sunday 41 | ): Array { 42 | const normalizedActivities = fillHoles(activities) 43 | 44 | // Determine the first date of the calendar. If the first date is not the 45 | // passed weekday, the respective weekday one week earlier is used. 46 | const firstActivity = normalizedActivities[0] as Activity 47 | const firstDate = parseISO(firstActivity.date) 48 | const firstCalendarDate = 49 | getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1) 50 | 51 | // To correctly group activities by week, it is necessary to left-pad the list 52 | // because the first date might not be set start weekday. 53 | const paddedActivities = [ 54 | ...(Array(differenceInCalendarDays(firstDate, firstCalendarDate)).fill( 55 | undefined, 56 | ) as Array), 57 | ...normalizedActivities, 58 | ] 59 | 60 | const numberOfWeeks = Math.ceil(paddedActivities.length / 7) 61 | 62 | // Finally, group activities by week 63 | return range(numberOfWeeks).map(weekIndex => 64 | paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7), 65 | ) 66 | } 67 | 68 | /** 69 | * The calendar expects a continuous sequence of days, 70 | * so fill gaps with empty activity data. 71 | */ 72 | function fillHoles(activities: Array): Array { 73 | const calendar = new Map(activities.map(a => [a.date, a])) 74 | const firstActivity = activities[0] as Activity 75 | const lastActivity = activities[activities.length - 1] as Activity 76 | 77 | return eachDayOfInterval({ 78 | start: parseISO(firstActivity.date), 79 | end: parseISO(lastActivity.date), 80 | }).map(day => { 81 | const date = formatISO(day, { representation: 'date' }) 82 | 83 | if (calendar.has(date)) { 84 | return calendar.get(date) as Activity 85 | } 86 | 87 | return { 88 | date, 89 | count: 0, 90 | level: 0, 91 | } 92 | }) 93 | } 94 | 95 | export function getClassName(name: string) { 96 | return `${NAMESPACE}__${name}` 97 | } 98 | 99 | export function generateEmptyData(): Array { 100 | const year = new Date().getFullYear() 101 | const days = eachDayOfInterval({ 102 | start: new Date(year, 0, 1), 103 | end: new Date(year, 11, 31), 104 | }) 105 | 106 | return days.map(date => ({ 107 | date: formatISO(date, { representation: 'date' }), 108 | count: 0, 109 | level: 0, 110 | })) 111 | } 112 | 113 | export function generateTestData(args: { 114 | interval?: { start: Date; end: Date } 115 | maxLevel?: number 116 | }): Array { 117 | const maxCount = 20 118 | const maxLevel = args.maxLevel ? Math.max(1, args.maxLevel) : 4 119 | const now = new Date() 120 | 121 | const days = eachDayOfInterval( 122 | args.interval ?? { 123 | start: startOfYear(now), 124 | end: endOfYear(now), 125 | }, 126 | ) 127 | 128 | return days.map(date => { 129 | // The random activity count is shifted by up to 80% towards zero. 130 | const c = Math.round(Math.random() * maxCount - Math.random() * (0.8 * maxCount)) 131 | const count = Math.max(0, c) 132 | const level = Math.ceil((count / maxCount) * maxLevel) 133 | 134 | return { 135 | date: formatISO(date, { representation: 'date' }), 136 | count, 137 | level, 138 | } 139 | }) 140 | } 141 | 142 | export function range(n: number) { 143 | return [...Array(n).keys()] 144 | } 145 | -------------------------------------------------------------------------------- /src/lib/label.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from '@jest/globals' 2 | import type { DayIndex, Week } from '../types' 3 | import { generateTestData, groupByWeeks } from './calendar' 4 | import { getMonthLabels, initWeekdayLabels } from './label' 5 | 6 | describe('getMonthLabels', () => { 7 | it('returns empty list for empty input', () => { 8 | expect(getMonthLabels([])).toStrictEqual([]) 9 | }) 10 | 11 | it('throws if a week has no activity defined', () => { 12 | const weeks = [Array(7).fill(undefined)] as Array 13 | 14 | expect(() => { 15 | expect(getMonthLabels(weeks)).toStrictEqual([]) 16 | }).toThrow() 17 | }) 18 | 19 | it('returns correct month labels', () => { 20 | const weeks = groupByWeeks( 21 | generateTestData({ 22 | interval: { 23 | start: new Date(2023, 2, 12), 24 | end: new Date(2023, 5, 1), 25 | }, 26 | }), 27 | ) 28 | 29 | expect(getMonthLabels(weeks)).toStrictEqual([ 30 | { label: 'Mar', weekIndex: 0 }, 31 | { label: 'Apr', weekIndex: 3 }, 32 | { label: 'May', weekIndex: 8 }, 33 | ]) 34 | }) 35 | 36 | it('skips label for first month if it does not contain at least three weeks of data', () => { 37 | const weeks = groupByWeeks( 38 | generateTestData({ 39 | interval: { 40 | start: new Date(2023, 9, 22), 41 | end: new Date(2023, 11, 31), 42 | }, 43 | }), 44 | ) 45 | 46 | expect(getMonthLabels(weeks)).toStrictEqual([ 47 | { label: 'Nov', weekIndex: 2 }, 48 | { label: 'Dec', weekIndex: 6 }, 49 | ]) 50 | }) 51 | 52 | it('skips label for last month if it does not contain at least three weeks of data', () => { 53 | const weeks = groupByWeeks( 54 | generateTestData({ 55 | interval: { 56 | start: new Date(2023, 3, 1), 57 | end: new Date(2023, 4, 20), 58 | }, 59 | }), 60 | ) 61 | 62 | expect(getMonthLabels(weeks)).toStrictEqual([{ label: 'Apr', weekIndex: 0 }]) 63 | }) 64 | 65 | it('skips first and last label if both months do not contain at least three weeks of data', () => { 66 | const weeks = groupByWeeks( 67 | generateTestData({ 68 | interval: { 69 | start: new Date(2023, 1, 22), 70 | end: new Date(2023, 4, 10), 71 | }, 72 | }), 73 | ) 74 | 75 | expect(getMonthLabels(weeks)).toStrictEqual([ 76 | { label: 'Mar', weekIndex: 2 }, 77 | { label: 'Apr', weekIndex: 6 }, 78 | ]) 79 | }) 80 | }) 81 | 82 | describe('initWeekdayLabels', () => { 83 | const days: Array = [0, 1, 2, 3, 4, 5, 6] 84 | 85 | it.each([[undefined], [false]])('should return false for `%p` as input', input => { 86 | for (const weekStart of days) { 87 | const actual = initWeekdayLabels(input, weekStart) 88 | 89 | expect(actual.shouldShow).toBe(false) 90 | for (const dayIndex of days) { 91 | expect(actual.byDayIndex(dayIndex)).toBe(false) 92 | } 93 | } 94 | }) 95 | 96 | it.each([ 97 | [0, [false, true, false, true, false, true, false]], 98 | [1, [false, false, true, false, true, false, true]], 99 | [2, [true, false, false, true, false, true, false]], 100 | [3, [false, true, false, false, true, false, true]], 101 | [4, [true, false, true, false, false, true, false]], 102 | [5, [false, true, false, true, false, false, true]], 103 | [6, [true, false, true, false, true, false, false]], 104 | ])( 105 | 'should return true for every second weekday for `true` as input with %d as week start', 106 | (weekStart, expected) => { 107 | const actual = initWeekdayLabels(true, weekStart as DayIndex) 108 | 109 | expect(actual.shouldShow).toBe(true) 110 | for (const weekStart of days) { 111 | expect(actual.byDayIndex(weekStart)).toBe(expected[weekStart]) 112 | } 113 | }, 114 | ) 115 | 116 | it('should return false for no days as input', () => { 117 | for (const weekStart of days) { 118 | const actual = initWeekdayLabels([], weekStart) 119 | 120 | expect(actual.shouldShow).toBe(false) 121 | for (const dayIndex of days) { 122 | expect(actual.byDayIndex(dayIndex)).toBe(false) 123 | } 124 | } 125 | }) 126 | 127 | it('should return true for given days', () => { 128 | for (const weekStart of days) { 129 | const actual = initWeekdayLabels(['mon', 'wed', 'sat'], weekStart) 130 | 131 | expect(actual.shouldShow).toBe(true) 132 | expect(actual.byDayIndex(0)).toBe(false) 133 | expect(actual.byDayIndex(1)).toBe(true) 134 | expect(actual.byDayIndex(2)).toBe(false) 135 | expect(actual.byDayIndex(3)).toBe(true) 136 | expect(actual.byDayIndex(4)).toBe(false) 137 | expect(actual.byDayIndex(5)).toBe(false) 138 | expect(actual.byDayIndex(6)).toBe(true) 139 | } 140 | }) 141 | 142 | it('should return true all days as input', () => { 143 | for (const weekStart of days) { 144 | const actual = initWeekdayLabels(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'], weekStart) 145 | 146 | expect(actual.shouldShow).toBe(true) 147 | for (const dayIndex of days) { 148 | expect(actual.byDayIndex(dayIndex)).toBe(true) 149 | } 150 | } 151 | }) 152 | 153 | it('should handle wrong capitalization correctly', () => { 154 | // @ts-expect-error we want to test incorrect input 155 | const actual = initWeekdayLabels(['SUN'], 0) 156 | 157 | expect(actual.shouldShow).toBe(true) 158 | for (const dayIndex of days) { 159 | expect(actual.byDayIndex(dayIndex)).toBe(dayIndex === 0) 160 | } 161 | }) 162 | }) 163 | -------------------------------------------------------------------------------- /src/lib/label.ts: -------------------------------------------------------------------------------- 1 | import { getMonth, parseISO } from 'date-fns' 2 | import type { Props } from '../component/ActivityCalendar' 3 | import { DEFAULT_MONTH_LABELS } from '../constants' 4 | import type { DayIndex, DayName, Week, WeekdayLabels } from '../types' 5 | 6 | type MonthLabel = { 7 | weekIndex: number 8 | label: string 9 | } 10 | 11 | export function getMonthLabels( 12 | weeks: Array, 13 | monthNames: Array = DEFAULT_MONTH_LABELS, 14 | ): Array { 15 | return weeks 16 | .reduce>((labels, week, weekIndex) => { 17 | const firstActivity = week.find(activity => activity !== undefined) 18 | 19 | if (!firstActivity) { 20 | throw new Error(`Unexpected error: Week ${weekIndex + 1} is empty.`) 21 | } 22 | 23 | const month = monthNames[getMonth(parseISO(firstActivity.date))] 24 | 25 | if (!month) { 26 | const monthName = new Date(firstActivity.date).toLocaleString('en-US', { month: 'short' }) 27 | throw new Error(`Unexpected error: undefined month label for ${monthName}.`) 28 | } 29 | 30 | const prevLabel = labels[labels.length - 1] 31 | 32 | if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) { 33 | return [...labels, { weekIndex, label: month }] 34 | } 35 | 36 | return labels 37 | }, []) 38 | .filter(({ weekIndex }, index, labels) => { 39 | // Labels should only be shown if there is "enough" space (data). 40 | // This is a naive implementation that does not take the block size, 41 | // font size, etc. into account. 42 | const minWeeks = 3 43 | 44 | // Skip the first month label if there is not enough space to the next one. 45 | if (index === 0) { 46 | return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks 47 | } 48 | 49 | // Skip the last month label if there is not enough data in that month 50 | // to avoid overflowing the calendar on the right. 51 | if (index === labels.length - 1) { 52 | return weeks.slice(weekIndex).length >= minWeeks 53 | } 54 | 55 | return true 56 | }) 57 | } 58 | 59 | export function maxWeekdayLabelWidth( 60 | labels: Array, 61 | showWeekdayLabel: WeekdayLabels, 62 | fontSize: number, 63 | ): number { 64 | if (labels.length !== 7) { 65 | throw new Error('Exactly 7 labels, one for each weekday must be passed.') 66 | } 67 | 68 | return labels.reduce( 69 | (maxWidth, label, index) => 70 | showWeekdayLabel.byDayIndex(index as DayIndex) 71 | ? Math.max(maxWidth, Math.ceil(calcTextDimensions(label, fontSize).width)) 72 | : maxWidth, 73 | 0, 74 | ) 75 | } 76 | 77 | export function calcTextDimensions(text: string, fontSize: number) { 78 | if (typeof document === 'undefined' || typeof window === 'undefined') { 79 | return { width: 0, height: 0 } 80 | } 81 | 82 | if (fontSize < 1) { 83 | throw new RangeError('fontSize must be positive') 84 | } 85 | 86 | if (text.length === 0) { 87 | return { width: 0, height: 0 } 88 | } 89 | 90 | const namespace = 'http://www.w3.org/2000/svg' 91 | const svg = document.createElementNS(namespace, 'svg') 92 | 93 | svg.style.position = 'absolute' 94 | svg.style.visibility = 'hidden' 95 | svg.style.fontFamily = window.getComputedStyle(document.body).fontFamily 96 | svg.style.fontSize = `${fontSize}px` 97 | 98 | const textNode = document.createElementNS(namespace, 'text') 99 | textNode.textContent = text 100 | 101 | svg.appendChild(textNode) 102 | document.body.appendChild(svg) 103 | const boundingBox = textNode.getBBox() 104 | 105 | document.body.removeChild(svg) 106 | 107 | return { width: boundingBox.width, height: boundingBox.height } 108 | } 109 | 110 | export function initWeekdayLabels( 111 | input: Props['showWeekdayLabels'], 112 | weekStart: DayIndex, 113 | ): WeekdayLabels { 114 | if (!input) 115 | return { 116 | byDayIndex: () => false, 117 | shouldShow: false, 118 | } 119 | 120 | // Default: Show every second day of the week. 121 | if (input === true) { 122 | return { 123 | byDayIndex: index => { 124 | return ((7 + index - weekStart) % 7) % 2 !== 0 125 | }, 126 | shouldShow: true, 127 | } 128 | } 129 | 130 | const indexed: Array = [] 131 | for (const name of input) { 132 | const index = dayNameToIndex[name.toLowerCase() as DayName] 133 | indexed[index] = true 134 | } 135 | 136 | return { 137 | byDayIndex: index => indexed[index] ?? false, 138 | shouldShow: input.length > 0, 139 | } 140 | } 141 | 142 | const dayNameToIndex: Record = { 143 | sun: 0, 144 | mon: 1, 145 | tue: 2, 146 | wed: 3, 147 | thu: 4, 148 | fri: 5, 149 | sat: 6, 150 | } 151 | -------------------------------------------------------------------------------- /src/lib/theme.test.ts: -------------------------------------------------------------------------------- 1 | import { beforeEach, describe, expect, it, jest } from '@jest/globals' 2 | import type { Theme, ThemeInput } from '../types' 3 | import { createTheme } from './theme' 4 | 5 | describe('createTheme', () => { 6 | const defaultTheme = { 7 | light: [ 8 | 'hsl(0, 0%, 92%)', 9 | 'color-mix(in oklab, hsl(0, 0%, 26%) 25%, hsl(0, 0%, 92%))', 10 | 'color-mix(in oklab, hsl(0, 0%, 26%) 50%, hsl(0, 0%, 92%))', 11 | 'color-mix(in oklab, hsl(0, 0%, 26%) 75%, hsl(0, 0%, 92%))', 12 | 'hsl(0, 0%, 26%)', 13 | ], 14 | dark: [ 15 | 'hsl(0, 0%, 22%)', 16 | 'color-mix(in oklab, hsl(0, 0%, 92%) 25%, hsl(0, 0%, 22%))', 17 | 'color-mix(in oklab, hsl(0, 0%, 92%) 50%, hsl(0, 0%, 22%))', 18 | 'color-mix(in oklab, hsl(0, 0%, 92%) 75%, hsl(0, 0%, 22%))', 19 | 'hsl(0, 0%, 92%)', 20 | ], 21 | } 22 | 23 | const explicitTheme: Theme = { 24 | light: ['#f0f0f0', '#c4edde', '#7ac7c4', '#f73859', '#384259'], 25 | dark: ['hsl(0, 0%, 22%)', '#4D455D', '#7DB9B6', '#F5E9CF', '#E96479'], 26 | } 27 | 28 | const cssSpy = jest.fn() 29 | 30 | beforeEach(() => { 31 | // @ts-expect-error only this method needs to be mocked 32 | global.CSS = { 33 | supports: cssSpy.mockReturnValue(true), 34 | } 35 | }) 36 | 37 | it('returns the default theme if no input is passed', () => { 38 | expect(createTheme()).toStrictEqual(defaultTheme) 39 | }) 40 | 41 | it('throws an error if input is not an object', () => { 42 | // @ts-expect-error test invalid input 43 | expect(() => createTheme('invalid')).toThrow() 44 | }) 45 | 46 | it('throws an error if neither "light" or "dark" inputs are set', () => { 47 | // @ts-expect-error test invalid input 48 | expect(() => createTheme({})).toThrow() 49 | }) 50 | 51 | it('throws an error if too few colors are passed', () => { 52 | expect(() => 53 | createTheme( 54 | { 55 | light: ['blue'], 56 | }, 57 | 2, 58 | ), 59 | ).toThrow() 60 | }) 61 | 62 | it('throws an error if too many colors are passed', () => { 63 | expect(() => 64 | createTheme( 65 | { 66 | dark: Array(4).fill('green'), 67 | }, 68 | 3, 69 | ), 70 | ).toThrow() 71 | }) 72 | 73 | it('uses default dark color scale if undefined in input', () => { 74 | expect( 75 | createTheme({ 76 | light: explicitTheme.light, 77 | }), 78 | ).toStrictEqual({ 79 | light: explicitTheme.light, 80 | dark: defaultTheme.dark, 81 | }) 82 | }) 83 | 84 | it('uses default light color scale if undefined in input', () => { 85 | expect( 86 | createTheme({ 87 | dark: explicitTheme.dark, 88 | }), 89 | ).toStrictEqual({ 90 | light: defaultTheme.light, 91 | dark: explicitTheme.dark, 92 | }) 93 | }) 94 | 95 | it('throws if an invalid color is passed', () => { 96 | cssSpy.mockReturnValue(false) 97 | expect(() => 98 | createTheme({ 99 | dark: ['#333', '🙃'], 100 | }), 101 | ).toThrow() 102 | }) 103 | 104 | it('returns the same value for explicit inputs', () => { 105 | expect(createTheme(explicitTheme)).toStrictEqual(explicitTheme) 106 | }) 107 | 108 | it('calculates color scales for minimal input', () => { 109 | const input: ThemeInput = { 110 | light: ['hsl(0, 0%, 92%)', 'hsl(0, 0%, 26%)'], 111 | dark: ['hsl(0, 0%, 20%)', 'hsl(0, 0%, 92%)'], 112 | } 113 | 114 | const actual = createTheme(input) 115 | expect(actual.light).toHaveLength(5) 116 | expect(actual.dark).toHaveLength(5) 117 | }) 118 | 119 | it('calculates color scales with correct size', () => { 120 | const input: ThemeInput = { 121 | light: ['hsl(0, 0%, 92%)', 'hsl(0, 0%, 26%)'], 122 | dark: ['hsl(0, 0%, 20%)', 'hsl(0, 0%, 92%)'], 123 | } 124 | 125 | const actual = createTheme(input, 3) 126 | expect(actual.light).toHaveLength(3) 127 | expect(actual.dark).toHaveLength(3) 128 | }) 129 | }) 130 | -------------------------------------------------------------------------------- /src/lib/theme.ts: -------------------------------------------------------------------------------- 1 | import type { Color, ColorScale, Theme, ThemeInput } from '../types' 2 | import { range } from './calendar' 3 | 4 | export function createTheme(input?: ThemeInput, steps = 5): Theme { 5 | const defaultTheme = createDefaultTheme(steps) 6 | 7 | if (input) { 8 | validateThemeInput(input, steps) 9 | 10 | input.light = input.light ?? defaultTheme.light 11 | input.dark = input.dark ?? defaultTheme.dark 12 | 13 | return { 14 | light: isPair(input.light) ? calcColorScale(input.light, steps) : input.light, 15 | dark: isPair(input.dark) ? calcColorScale(input.dark, steps) : input.dark, 16 | } 17 | } 18 | 19 | return defaultTheme 20 | } 21 | 22 | function createDefaultTheme(steps: number): Theme { 23 | return { 24 | light: calcColorScale(['hsl(0, 0%, 92%)', 'hsl(0, 0%, 26%)'], steps), 25 | dark: calcColorScale(['hsl(0, 0%, 22%)', 'hsl(0, 0%, 92%)'], steps), 26 | } 27 | } 28 | 29 | function validateThemeInput(input: ThemeInput, steps: number) { 30 | const maxLevelHint = 'The number of colors is controlled by the "maxLevel" property.' 31 | 32 | if (typeof input !== 'object' || (input.light === undefined && input.dark === undefined)) { 33 | throw new Error( 34 | `The theme object must contain at least one of the fields "light" and "dark" with exactly 2 or ${steps} colors respectively. ${maxLevelHint}`, 35 | ) 36 | } 37 | 38 | if (input.light) { 39 | const { length } = input.light 40 | if (length !== 2 && length !== steps) { 41 | throw new Error( 42 | `theme.light must contain exactly 2 or ${steps} colors, ${length} passed. ${maxLevelHint}`, 43 | ) 44 | } 45 | 46 | for (const c of input.light) { 47 | if (typeof window !== 'undefined' && !CSS.supports('color', c)) { 48 | throw new Error(`Invalid color "${String(c)}" passed. All CSS color formats are accepted.`) 49 | } 50 | } 51 | } 52 | 53 | if (input.dark) { 54 | const { length } = input.dark 55 | if (length !== 2 && length !== steps) { 56 | throw new Error( 57 | `theme.dark must contain exactly 2 or ${steps} colors, ${length} passed. ${maxLevelHint}`, 58 | ) 59 | } 60 | 61 | for (const c of input.dark) { 62 | if (typeof window !== 'undefined' && !CSS.supports('color', c)) { 63 | throw new Error(`Invalid color "${String(c)}" passed. All CSS color formats are accepted.`) 64 | } 65 | } 66 | } 67 | } 68 | 69 | function calcColorScale([start, end]: [Color, Color], steps: number): ColorScale { 70 | return range(steps).map(i => { 71 | // In the loading animation the zero color is used. 72 | // However, Safari 16 crashes if a CSS color-mix expression like below is 73 | // combined with relative color syntax to calculate a hue variation for the 74 | // animation. Since the start and end colors do not need to be mixed, they 75 | // can be returned directly to work around this issue. 76 | switch (i) { 77 | case 0: 78 | return start 79 | case steps - 1: 80 | return end 81 | default: { 82 | const pos = (i / (steps - 1)) * 100 83 | return `color-mix(in oklab, ${end} ${parseFloat(pos.toFixed(2))}%, ${start})` 84 | } 85 | } 86 | }) 87 | } 88 | 89 | function isPair(val: Array): val is [T, T] { 90 | return val.length === 2 91 | } 92 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | AnimationEvent, 3 | ClipboardEvent, 4 | CompositionEvent, 5 | DOMAttributes, 6 | DragEvent, 7 | FocusEvent, 8 | FormEvent, 9 | HTMLAttributes, 10 | JSXElementConstructor, 11 | KeyboardEvent, 12 | MouseEvent, 13 | PointerEvent, 14 | ReactElement, 15 | SVGAttributes, 16 | SyntheticEvent, 17 | TouchEvent, 18 | TransitionEvent, 19 | UIEvent, 20 | WheelEvent, 21 | } from 'react' 22 | 23 | export type Activity = { 24 | date: string 25 | count: number 26 | level: number 27 | } 28 | 29 | export type Week = Array 30 | export type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 // 0 = Sunday, 1 = Monday etc. 31 | export type DayName = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' 32 | 33 | export type WeekdayLabels = { 34 | byDayIndex: (index: DayIndex) => boolean 35 | shouldShow: boolean 36 | } 37 | 38 | export type Labels = Partial<{ 39 | months: Array 40 | weekdays: Array 41 | totalCount: string 42 | legend: Partial<{ 43 | less: string 44 | more: string 45 | }> 46 | }> 47 | 48 | export type Color = string 49 | export type ColorScale = Array 50 | 51 | export type Theme = { 52 | light: ColorScale 53 | dark: ColorScale 54 | } 55 | 56 | // Require that at least one color scheme is passed. 57 | export type ThemeInput = 58 | | { 59 | light: ColorScale 60 | dark?: ColorScale 61 | } 62 | | { 63 | light?: ColorScale 64 | dark: ColorScale 65 | } 66 | 67 | type BlockAttributes = SVGAttributes & HTMLAttributes 68 | 69 | export type BlockElement = ReactElement> 70 | 71 | export type SVGRectEventHandler = Omit< 72 | DOMAttributes, 73 | 'css' | 'children' | 'dangerouslySetInnerHTML' 74 | > 75 | 76 | export type EventHandlerMap = { 77 | [key in keyof SVGRectEventHandler]: ( 78 | ...event: Parameters> 79 | ) => (activity: Activity) => void 80 | } 81 | 82 | export type ReactEvent = AnimationEvent & 83 | ClipboardEvent & 84 | CompositionEvent & 85 | DragEvent & 86 | FocusEvent & 87 | FormEvent & 88 | KeyboardEvent & 89 | MouseEvent & 90 | PointerEvent & 91 | SyntheticEvent & 92 | TouchEvent & 93 | TransitionEvent & 94 | UIEvent & 95 | WheelEvent 96 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src/**/*", ".storybook/**/*", "./*"], 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "esModuleInterop": true, 6 | "isolatedModules": true, 7 | "jsx": "preserve", 8 | "lib": ["es2022", "dom", "dom.iterable"], 9 | "module": "preserve", 10 | "moduleDetection": "force", 11 | "noEmit": true, 12 | "noImplicitOverride": true, 13 | "noUncheckedIndexedAccess": true, 14 | "resolveJsonModule": true, 15 | "skipLibCheck": true, 16 | "strict": true, 17 | "target": "es2022", 18 | "verbatimModuleSyntax": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /vite.config.mts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react' 2 | import { defineConfig } from 'vite' 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }) 7 | --------------------------------------------------------------------------------