8 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/stories/Buttons/RoundButtons/RepeatRoundButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react'
2 |
3 | import RepeatRoundButton from '../../../ui/Buttons/RoundButtons/presets/RepeatRoundButton/RepeatRoundButton'
4 |
5 | const meta: Meta
9 |
10 |
11 |
12 |
13 |
14 |
15 | {childrenWithProps}
14 | }
15 |
--------------------------------------------------------------------------------
/src/ui/Icons/Note.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Note = (isActive?: boolean) => (
4 |
14 | )
15 |
16 | export default Note
17 |
--------------------------------------------------------------------------------
/src/stories/Buttons/NavbarButtons/NavbarButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react'
2 | import React from 'react'
3 |
4 | import NavbarButton from '../../../ui/Buttons/NavbarButtons/NavbarButton/NavbarButton'
5 |
6 | const meta: Meta
11 |
13 | )
14 | ]
15 | }
16 |
17 | export default meta
18 | type Story = StoryObj
11 |
13 | )
14 | ]
15 | }
16 |
17 | export default meta
18 | type Story = StoryObj
11 |
13 | )
14 | ]
15 | }
16 |
17 | export default meta
18 | type Story = StoryObj
11 |
13 | )
14 | ]
15 | }
16 |
17 | export default meta
18 | type Story = StoryObjNavButton
18 | NavButton
19 | NavButton
20 | NavButton
21 |
22 | )
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/stories/Buttons/NavbarButtons/SettingsNavbarButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react'
2 | import React from 'react'
3 |
4 | import SettingsNavbarButton from '../../../ui/Buttons/NavbarButtons/presets/SettingsNavbarButton/SettingsNavbarButton'
5 |
6 | const meta: Meta
11 |
13 | )
14 | ]
15 | }
16 |
17 | export default meta
18 | type Story = StoryObj
11 |
13 | )
14 | ]
15 | }
16 |
17 | export default meta
18 | type Story = StoryObj
8 | {storyFn()}
9 |
10 | )
11 |
12 | const meta: Meta
12 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/storybook-static/984.df1c629b.iframe.bundle.js:
--------------------------------------------------------------------------------
1 | "use strict";(self.webpackChunkradio_app_uikit=self.webpackChunkradio_app_uikit||[]).push([[984],{"./node_modules/@storybook/components/dist/WithTooltip-4HIR6TLV.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{WithToolTipState:()=>_chunk_7V7F47IN_mjs__WEBPACK_IMPORTED_MODULE_0__.WA,WithTooltip:()=>_chunk_7V7F47IN_mjs__WEBPACK_IMPORTED_MODULE_0__.WA,WithTooltipPure:()=>_chunk_7V7F47IN_mjs__WEBPACK_IMPORTED_MODULE_0__.DG});var _chunk_7V7F47IN_mjs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/components/dist/chunk-7V7F47IN.mjs")}}]);
--------------------------------------------------------------------------------
/src/ui/Buttons/BlockButtons/BlockButton/BlockButton.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../constants/colors.scss';
2 |
3 | .BlockButton {
4 | background-color: $primary-grey;
5 | opacity: 0.5;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | padding: 0.7em 2em;
10 | gap: 10px;
11 | width: fit-content;
12 | border: none;
13 | border-radius: 5px;
14 | transition: all 0.2s ease-in-out;
15 | }
16 |
17 | .IconContainer {
18 | width: 2em;
19 | height: 2em;
20 | }
21 |
22 | .BlockButton:hover {
23 | background-color: $primary-violet;
24 | box-shadow:
25 | 0 0 5px $primary-violet,
26 | 0 0 25px $primary-violet,
27 | 0 0 50px $primary-violet;
28 | opacity: 1;
29 | }
30 |
31 |
32 |
--------------------------------------------------------------------------------
/storybook-static/296.1c9158ee.iframe.bundle.js:
--------------------------------------------------------------------------------
1 | "use strict";(self.webpackChunkradio_app_uikit=self.webpackChunkradio_app_uikit||[]).push([[296],{"./node_modules/@storybook/components/dist/syntaxhighlighter-NMPM6SWI.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{SyntaxHighlighter:()=>_chunk_V3JBNODJ_mjs__WEBPACK_IMPORTED_MODULE_0__.d3,createCopyToClipboardFunction:()=>_chunk_V3JBNODJ_mjs__WEBPACK_IMPORTED_MODULE_0__.xV,default:()=>_chunk_V3JBNODJ_mjs__WEBPACK_IMPORTED_MODULE_0__.qG});var _chunk_V3JBNODJ_mjs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/components/dist/chunk-V3JBNODJ.mjs")}}]);
--------------------------------------------------------------------------------
/src/ui/Buttons/NavbarButtons/NavbarButton/NavbarButton.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../constants/colors.scss';
2 |
3 | .navbarButton {
4 | overflow: hidden;
5 | background-color: transparent;
6 | display: flex;
7 | align-items: center;
8 | width: 100%;
9 | transition: transform 0.5s ease-in-out;
10 | }
11 |
12 | .navbarButtonActive {
13 | border-right: 2px solid $primary-violet;
14 | }
15 |
16 | .iconContainer {
17 | margin: 10px;
18 | margin-left: 20px;
19 | width: 30px;
20 | height: 30px;
21 | }
22 |
23 | .iconContainer svg {
24 | width: 25px;
25 | height: 25px;
26 | }
27 |
28 | .navbarButton:hover {
29 | background-color: #ADADAE;
30 | }
31 |
32 | .navbarButton span {
33 | color: $primary-grey;
34 | }
35 |
--------------------------------------------------------------------------------
/src/ui/Buttons/RoundButtons/RoundButton/RoundButton.tsx:
--------------------------------------------------------------------------------
1 | //@ts-ignore
2 | import styles from './RoundButton.module.scss'
3 | import React from 'react'
4 | import { RoundButtonProps } from './types'
5 |
6 | export default function RoundButton({
7 | icon,
8 | color,
9 | onClick,
10 | size,
11 | className,
12 | ariaLabel
13 | }: RoundButtonProps) {
14 | return (
15 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/src/ui/Navbar/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { INavbarProps } from './types'
3 | //@ts-ignore
4 | import styles from './Navbar.module.scss'
5 |
6 | function Navbar({ children, isHovered, setIsHovered }: INavbarProps) {
7 | const childrenWithProps = React.Children.map(children, child => {
8 | if (React.isValidElement(child)) {
9 | return React.cloneElement(child, { isHovered } as React.Attributes)
10 | }
11 | return child
12 | })
13 |
14 | return (
15 | {prePhrase}
13 | 14 |-
15 | {rotatedPhrases.map(phrase => (
16 |
- 20 | {phrase} 21 | 22 | ))} 23 |
setIsHovered(true)}
17 | onMouseLeave={() => setIsHovered(false)}
18 | className={styles.navbar}
19 | >
20 | {childrenWithProps}
21 |
22 | )
23 | }
24 |
25 | export default Navbar
26 |
--------------------------------------------------------------------------------
/src/ui/Card/Card.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../constants/colors.scss';
2 |
3 | .card img {
4 | border: solid transparent 1px;
5 | border-top-right-radius: 14px;
6 | border-bottom-left-radius: 14px;
7 | transition: transform 0.5s ease;
8 | width: 100%;
9 | height: 100%;
10 | }
11 |
12 | .card {
13 | transition: transform 0.5s ease;
14 | display: flex;
15 | align-items: center;
16 | flex-direction: column;
17 | justify-content: space-between;
18 | gap: 10px;
19 | width: 18%;
20 | }
21 |
22 | .card :hover {
23 | transform: scale(1.1);
24 | }
25 |
26 | @media screen and (max-width: 479px) {
27 | .card span {
28 | font-size: 0.3em !important;
29 | }
30 | .card img {
31 | width: 4em;
32 | height: 4em;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/.storybook/main.ts:
--------------------------------------------------------------------------------
1 | import type { StorybookConfig } from '@storybook/react-webpack5'
2 |
3 | const config: StorybookConfig = {
4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
5 | staticDirs: ['../public'],
6 | addons: [
7 | '@storybook/addon-links',
8 | '@storybook/addon-essentials',
9 | '@storybook/addon-onboarding',
10 | '@storybook/addon-interactions',
11 | {
12 | name: '@storybook/preset-scss',
13 | options: {
14 | cssLoaderOptions: {
15 | modules: true,
16 | sourceMap: true
17 | }
18 | }
19 | }
20 | ],
21 | framework: {
22 | name: '@storybook/react-webpack5',
23 | options: {}
24 | },
25 | docs: {
26 | autodocs: true,
27 | }
28 | }
29 | export default config
30 |
--------------------------------------------------------------------------------
/.github/workflows/github-actions-demo.yml:
--------------------------------------------------------------------------------
1 | name: onPush
2 | run-name: Actions on push
3 | on: [push]
4 | jobs:
5 | init:
6 | runs-on: ubuntu-latest
7 | strategy:
8 | matrix:
9 | node-version: [21.x]
10 | steps:
11 | - uses: actions/checkout@v3
12 | - name: Staring Node.js ${{matrix.node-version}}
13 | uses: actions/setup-node@v3
14 | with:
15 | node-version: ${{matrix.node-version}}
16 | - name: install modules
17 | run: npm install
18 | - name: install prettier
19 | run: npm install --global prettier
20 | - name: formatting code
21 | run: prettier . -w
--------------------------------------------------------------------------------
/src/ui/Icons/Repeat.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Repeat = (
4 |
22 | )
23 |
24 | export default Repeat
25 |
--------------------------------------------------------------------------------
/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js.LEGAL.txt:
--------------------------------------------------------------------------------
1 | Bundled license information:
2 |
3 | telejson/dist/index.mjs:
4 | /*!
5 | * isobject onClick()}
24 | aria-label={text}
25 | >
26 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/ui/Icons/DownArrow.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const DownArrow = (
4 |
32 | )
33 |
34 | export default DownArrow
35 |
--------------------------------------------------------------------------------
/src/ui/Icons/LeftArrow.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const LeftArrow = (
4 |
32 | )
33 |
34 | export default LeftArrow
35 |
--------------------------------------------------------------------------------
/src/ui/Icons/RightArrow.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const RightArrow = (
4 |
32 | )
33 |
34 | export default RightArrow
35 |
--------------------------------------------------------------------------------
/storybook-static/project.json:
--------------------------------------------------------------------------------
1 | {"generatedAt":1697975510321,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"npm","version":"9.5.0"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.5.1","storybookVersionSpecifier":"^7.2.0","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"7.5.1"},"@storybook/react":{"version":"7.5.1"},"@storybook/react-webpack5":{"version":"7.5.1"},"@storybook/testing-library":{"version":"0.2.2"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.5.1"}},"addons":{"@storybook/addon-links":{"version":"7.5.1"},"@storybook/addon-essentials":{"version":"7.5.1"},"@storybook/addon-onboarding":{"version":"1.0.8"},"@storybook/addon-interactions":{"version":"7.5.1"},"@storybook/preset-scss":{"version":"1.0.3"}}}
2 |
--------------------------------------------------------------------------------
/src/ui/Icons/Play.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Play = (
4 |
21 | )
22 |
23 | export default Play
24 |
--------------------------------------------------------------------------------
/src/ui/Card/Card.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Typography from '../Typography/Typography'
3 | import { ICardProps } from './types'
4 | //@ts-ignore
5 | import style from './Card.module.scss'
6 |
7 | export default function Card({ srcImg, title, subTitle, onClick }: ICardProps) {
8 | return (
9 | {icon(isActive)}
27 | {isHovered ? (
28 |
10 | 
18 | {title ? (
19 | 20 ? `${title.slice(0, 20)}...` : title
22 | }
23 | fontSize="1.5em"
24 | weight="semibold"
25 | />
26 | ) : null}
27 | {subTitle ? (
28 | 10
31 | ? `${subTitle.slice(0, 10)}...`
32 | : subTitle
33 | }
34 | fontSize="1em"
35 | weight="regular"
36 | />
37 | ) : null}
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/src/ui/Icons/Like.tsx:
--------------------------------------------------------------------------------
1 | import React, { SVGProps } from 'react'
2 |
3 | const Like = (isActive: boolean, rest: any) => (
4 |
25 | )
26 |
27 | export default Like
28 |
--------------------------------------------------------------------------------
/src/ui/Buttons/InteractiveButtons/PlayButton/PlayButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './PlayButton.module.scss'
3 | import { PlayButtonProps } from './types'
4 |
5 | export default function PlayButton({ isPlaying, onClick }: PlayButtonProps) {
6 | return (
7 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/ui/Icons/Home.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Home = (isActive?: boolean) => (
4 |
32 | )
33 |
34 | export default Home
35 |
--------------------------------------------------------------------------------
/src/ui/Icons/Reminder.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Reminder = (
4 |
22 | )
23 |
24 | export default Reminder
25 |
--------------------------------------------------------------------------------
/src/ui/Buttons/InteractiveButtons/PlayButton/PlayButton.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../constants/colors.scss';
2 |
3 | .container {
4 | --size: 30px;
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | position: relative;
9 | cursor: pointer;
10 | font-size: var(--size);
11 | user-select: none;
12 | fill: $primary-grey;
13 | background-color: transparent;
14 | border: none;
15 | }
16 |
17 | .container:hover {
18 | fill: $primary-violet;
19 | }
20 |
21 | .container .play {
22 | position: absolute;
23 | animation: keyframes-fill 0.5s;
24 | }
25 |
26 | .container .pause {
27 | position: absolute;
28 | display: none;
29 | animation: keyframes-fill 0.5s;
30 | }
31 |
32 | /* ------ On check event ------ */
33 | .container input:checked ~ .play {
34 | display: none;
35 | }
36 |
37 | .container input:checked ~ .pause {
38 | display: block;
39 | }
40 |
41 | /* ------ Hide the default checkbox ------ */
42 | .container input {
43 | position: absolute;
44 | opacity: 0;
45 | cursor: pointer;
46 | height: 0;
47 | width: 0;
48 | }
49 |
50 | /* ------ Animation ------ */
51 | @keyframes keyframes-fill {
52 | 0% {
53 | transform: rotate(-180deg) scale(0);
54 | opacity: 0;
55 | }
56 |
57 | 50% {
58 | transform: rotate(-10deg) scale(1.2);
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/storybook-static/341.3cbc6f24.iframe.bundle.js:
--------------------------------------------------------------------------------
1 | "use strict";(self.webpackChunkradio_app_uikit=self.webpackChunkradio_app_uikit||[]).push([[341],{"./node_modules/@mdx-js/react/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{MDXContext:()=>MDXContext,MDXProvider:()=>MDXProvider,useMDXComponents:()=>useMDXComponents,withMDXComponents:()=>withMDXComponents});var react=__webpack_require__("./node_modules/react/index.js");const MDXContext=react.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react.useContext(MDXContext);return react.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react.createElement(MDXContext.Provider,{value:allComponents},children)}}}]);
--------------------------------------------------------------------------------
/storybook-static/favicon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/ui/Icons/Share.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Share = (
4 |
42 | )
43 |
44 | export default Share
45 |
--------------------------------------------------------------------------------
/storybook-static/sb-preview/globals.js:
--------------------------------------------------------------------------------
1 | "use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var globals_exports={};__export(globals_exports,{globals:()=>globals});module.exports=__toCommonJS(globals_exports);var globals={"@storybook/addons":"__STORYBOOK_MODULE_ADDONS__","@storybook/global":"__STORYBOOK_MODULE_GLOBAL__","@storybook/channel-postmessage":"__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__","@storybook/channel-websocket":"__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__","@storybook/channels":"__STORYBOOK_MODULE_CHANNELS__","@storybook/client-api":"__STORYBOOK_MODULE_CLIENT_API__","@storybook/client-logger":"__STORYBOOK_MODULE_CLIENT_LOGGER__","@storybook/core-client":"__STORYBOOK_MODULE_CORE_CLIENT__","@storybook/core-events":"__STORYBOOK_MODULE_CORE_EVENTS__","@storybook/preview-web":"__STORYBOOK_MODULE_PREVIEW_WEB__","@storybook/preview-api":"__STORYBOOK_MODULE_PREVIEW_API__","@storybook/store":"__STORYBOOK_MODULE_STORE__"};0&&(module.exports={globals});
2 |
--------------------------------------------------------------------------------
/storybook-static/102.65c19aa0.iframe.bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*!
2 | * The buffer module from node.js, for the browser.
3 | *
4 | * @author Feross Aboukhadijeh
9 |
16 |
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/storybook-static/sb-addons/onboarding-8/manager-bundle.js.LEGAL.txt:
--------------------------------------------------------------------------------
1 | Bundled license information:
2 |
3 | @storybook/addon-onboarding/dist/manager.mjs:
4 | /*! Bundled license information:
5 |
6 | exenv/index.js:
7 | (*!
8 | Copyright (c) 2015 Jed Watson.
9 | Based on code that is Copyright 2013-2015, Facebook, Inc.
10 | All rights reserved.
11 | *)
12 |
13 | react-is/cjs/react-is.production.min.js:
14 | (** @license React v16.13.1
15 | * react-is.production.min.js
16 | *
17 | * Copyright (c) Facebook, Inc. and its affiliates.
18 | *
19 | * This source code is licensed under the MIT license found in the
20 | * LICENSE file in the root directory of this source tree.
21 | *)
22 |
23 | popper.js/dist/esm/popper.js:
24 | (**!
25 | * @fileOverview Kickass library to create and place poppers near their reference elements.
26 | * @version 1.16.1
27 | * @license
28 | * Copyright (c) 2016 Federico Zivolo and contributors
29 | *
30 | * Permission is hereby granted, free of charge, to any person obtaining a copy
31 | * of this software and associated documentation files (the "Software"), to deal
32 | * in the Software without restriction, including without limitation the rights
33 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
34 | * copies of the Software, and to permit persons to whom the Software is
35 | * furnished to do so, subject to the following conditions:
36 | *
37 | * The above copyright notice and this permission notice shall be included in all
38 | * copies or substantial portions of the Software.
39 | *
40 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
41 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
42 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
43 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
44 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
45 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
46 | * SOFTWARE.
47 | *)
48 | */
49 |
--------------------------------------------------------------------------------
/src/ui/Icons/Radio.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Radio = (isActive?: boolean) => (
4 |
40 | )
41 |
42 | export default Radio
43 |
--------------------------------------------------------------------------------
/storybook-static/sb-addons/essentials-measure-6/manager-bundle.js:
--------------------------------------------------------------------------------
1 | try{
2 | var r="storybook/measure-addon",u=`${r}/tool`;var a=__REACT__,{Children:M,Component:B,Fragment:P,Profiler:D,PureComponent:x,StrictMode:N,Suspense:v,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:H,cloneElement:F,createContext:K,createElement:W,createFactory:Y,createRef:G,forwardRef:w,isValidElement:U,lazy:V,memo:q,useCallback:p,useContext:z,useDebugValue:Z,useEffect:S,useImperativeHandle:$,useLayoutEffect:j,useMemo:J,useReducer:Q,useRef:X,useState:ee,version:oe}=__REACT__;var se=__STORYBOOKAPI__,{ActiveTabs:le,Consumer:ue,ManagerContext:ce,Provider:me,addons:c,combineParameters:ie,controlOrMetaKey:pe,controlOrMetaSymbol:Se,eventMatchesShortcut:de,eventToShortcut:_e,isMacLike:Te,isShortcutTaken:be,keyToSymbol:Oe,merge:ye,mockChannel:Ce,optionOrAltSymbol:Ee,shortcutMatchesShortcut:he,shortcutToHumanString:fe,types:d,useAddonState:Ae,useArgTypes:ge,useArgs:Ie,useChannel:Re,useGlobalTypes:ke,useGlobals:_,useParameter:Le,useSharedState:Me,useStoryPrepared:Be,useStorybookApi:T,useStorybookState:Pe}=__STORYBOOKAPI__;var He=__STORYBOOKCOMPONENTS__,{A:Fe,ActionBar:Ke,AddonPanel:We,Badge:Ye,Bar:Ge,Blockquote:we,Button:Ue,ClipboardCode:Ve,Code:qe,DL:ze,Div:Ze,DocumentWrapper:$e,ErrorFormatter:je,FlexBar:Je,Form:Qe,H1:Xe,H2:eo,H3:oo,H4:to,H5:ro,H6:ao,HR:no,IconButton:b,IconButtonSkeleton:so,Icons:O,Img:lo,LI:uo,Link:co,ListItem:mo,Loader:io,OL:po,P:So,Placeholder:_o,Pre:To,ResetWrapper:bo,ScrollArea:Oo,Separator:yo,Spaced:Co,Span:Eo,StorybookIcon:ho,StorybookLogo:fo,Symbols:Ao,SyntaxHighlighter:go,TT:Io,TabBar:Ro,TabButton:ko,TabWrapper:Lo,Table:Mo,Tabs:Bo,TabsState:Po,TooltipLinkList:Do,TooltipMessage:xo,TooltipNote:No,UL:vo,WithTooltip:Ho,WithTooltipPure:Fo,Zoom:Ko,codeCommon:Wo,components:Yo,createCopyToClipboardFunction:Go,getStoryHref:wo,icons:Uo,interleaveSeparators:Vo,nameSpaceClassNames:qo,resetComponents:zo,withReset:Zo}=__STORYBOOKCOMPONENTS__;var y=()=>{let[n,m]=_(),{measureEnabled:s}=n,i=T(),l=p(()=>m({measureEnabled:!s}),[m,s]);return S(()=>{i.setAddonShortcut(r,{label:"Toggle Measure [M]",defaultShortcut:["M"],actionName:"measure",showInMenu:!1,action:l})},[l,i]),a.createElement(b,{key:u,active:s,title:"Enable measure",onClick:l},a.createElement(O,{icon:"ruler"}))};c.register(r,()=>{c.add(u,{type:d.TOOL,title:"Measure",match:({viewMode:n})=>n==="story",render:()=>a.createElement(y,null)})});
3 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }
4 |
--------------------------------------------------------------------------------
/storybook-static/sb-addons/essentials-outline-7/manager-bundle.js:
--------------------------------------------------------------------------------
1 | try{
2 | var a="storybook/outline",u="outline";var n=__REACT__,{Children:L,Component:x,Fragment:M,Profiler:v,PureComponent:D,StrictMode:N,Suspense:H,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:F,cloneElement:K,createContext:Y,createElement:W,createFactory:G,createRef:w,forwardRef:U,isValidElement:V,lazy:q,memo:p,useCallback:m,useContext:z,useDebugValue:Z,useEffect:S,useImperativeHandle:$,useLayoutEffect:j,useMemo:J,useReducer:Q,useRef:X,useState:ee,version:te}=__REACT__;var le=__STORYBOOKAPI__,{ActiveTabs:se,Consumer:ue,ManagerContext:ce,Provider:ie,addons:c,combineParameters:pe,controlOrMetaKey:me,controlOrMetaSymbol:Se,eventMatchesShortcut:_e,eventToShortcut:de,isMacLike:Oe,isShortcutTaken:Te,keyToSymbol:be,merge:ye,mockChannel:Ae,optionOrAltSymbol:Ce,shortcutMatchesShortcut:he,shortcutToHumanString:fe,types:_,useAddonState:Ee,useArgTypes:ge,useArgs:Re,useChannel:ke,useGlobalTypes:Ie,useGlobals:d,useParameter:Pe,useSharedState:Be,useStoryPrepared:Le,useStorybookApi:O,useStorybookState:xe}=__STORYBOOKAPI__;var He=__STORYBOOKCOMPONENTS__,{A:Fe,ActionBar:Ke,AddonPanel:Ye,Badge:We,Bar:Ge,Blockquote:we,Button:Ue,ClipboardCode:Ve,Code:qe,DL:ze,Div:Ze,DocumentWrapper:$e,ErrorFormatter:je,FlexBar:Je,Form:Qe,H1:Xe,H2:et,H3:tt,H4:ot,H5:rt,H6:at,HR:nt,IconButton:T,IconButtonSkeleton:lt,Icons:b,Img:st,LI:ut,Link:ct,ListItem:it,Loader:pt,OL:mt,P:St,Placeholder:_t,Pre:dt,ResetWrapper:Ot,ScrollArea:Tt,Separator:bt,Spaced:yt,Span:At,StorybookIcon:Ct,StorybookLogo:ht,Symbols:ft,SyntaxHighlighter:Et,TT:gt,TabBar:Rt,TabButton:kt,TabWrapper:It,Table:Pt,Tabs:Bt,TabsState:Lt,TooltipLinkList:xt,TooltipMessage:Mt,TooltipNote:vt,UL:Dt,WithTooltip:Nt,WithTooltipPure:Ht,Zoom:Ft,codeCommon:Kt,components:Yt,createCopyToClipboardFunction:Wt,getStoryHref:Gt,icons:wt,interleaveSeparators:Ut,nameSpaceClassNames:Vt,resetComponents:qt,withReset:zt}=__STORYBOOKCOMPONENTS__;var A=p(function(){let[r,y]=d(),i=O(),l=[!0,"true"].includes(r[u]),s=m(()=>y({[u]:!l}),[l]);return S(()=>{i.setAddonShortcut(a,{label:"Toggle Outline [O]",defaultShortcut:["O"],actionName:"outline",showInMenu:!1,action:s})},[s,i]),n.createElement(T,{key:"outline",active:l,title:"Apply outlines to the preview",onClick:s},n.createElement(b,{icon:"outline"}))});c.register(a,()=>{c.add(a,{title:"Outline",type:_.TOOL,match:({viewMode:r})=>!!(r&&r.match(/^(story|docs)$/)),render:()=>n.createElement(A,null)})});
3 | }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nirvana-uikit",
3 | "version": "1.0.29",
4 | "description": "",
5 | "main": "./dist/index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "build": "webpack",
9 | "build:img": "copyfiles -f public/icons/*.* dist/static/icons/",
10 | "local": "npm run build:img && webpack && npm version patch",
11 | "pb": "npm run build:img && webpack && npm version patch && npm publish",
12 | "sb": "storybook dev -p 6006",
13 | "build-storybook": "storybook build"
14 | },
15 | "keywords": [],
16 | "author": "AndreyBurov",
17 | "license": "ISC",
18 | "devDependencies": {
19 | "@babel/preset-env": "^7.22.9",
20 | "@babel/preset-react": "^7.22.5",
21 | "@babel/preset-typescript": "^7.22.5",
22 | "@storybook/addon-essentials": "^7.2.0",
23 | "@storybook/addon-interactions": "^7.2.0",
24 | "@storybook/addon-links": "^7.2.0",
25 | "@storybook/addon-onboarding": "^1.0.8",
26 | "@storybook/blocks": "^7.2.0",
27 | "@storybook/preset-scss": "^1.0.3",
28 | "@storybook/react": "^7.2.0",
29 | "@storybook/react-webpack5": "^7.2.0",
30 | "@storybook/testing-library": "^0.2.0",
31 | "@trivago/prettier-plugin-sort-imports": "^1.4.4",
32 | "@types/react": "^18.2.17",
33 | "@typescript-eslint/eslint-plugin": "^5.62.0",
34 | "clean-webpack-plugin": "^4.0.0",
35 | "copy-webpack-plugin": "^11.0.0",
36 | "css-loader": "^6.8.1",
37 | "css-minimizer-webpack-plugin": "^5.0.1",
38 | "dotenv": "^16.3.1",
39 | "eslint": "^8.46.0",
40 | "eslint-config-standard-with-typescript": "^37.0.0",
41 | "eslint-plugin-import": "^2.28.0",
42 | "eslint-plugin-n": "^16.0.1",
43 | "eslint-plugin-promise": "^6.1.1",
44 | "eslint-plugin-react": "^7.33.1",
45 | "eslint-plugin-storybook": "^0.6.13",
46 | "file-loader": "^6.2.0",
47 | "html-minimizer-webpack-plugin": "^4.4.0",
48 | "html-webpack-plugin": "^5.5.3",
49 | "image-minimizer-webpack-plugin": "^3.8.3",
50 | "json-minimizer-webpack-plugin": "^4.0.0",
51 | "mini-css-extract-plugin": "^2.7.6",
52 | "path": "^0.12.7",
53 | "prettier": "^3.0.0",
54 | "react": "^18.2.0",
55 | "react-dom": "^18.2.0",
56 | "sass": "^1.69.7",
57 | "sass-loader": "^13.3.2",
58 | "storybook": "^7.2.0",
59 | "style-loader": "^3.3.3",
60 | "terser-webpack-plugin": "^5.3.9",
61 | "ts-loader": "^9.4.4",
62 | "typescript": "^5.1.6",
63 | "webpack": "^5.89.0",
64 | "webpack-cli": "^5.1.4"
65 | },
66 | "peerDependencies": {
67 | "react": "*",
68 | "react-dom": "*",
69 | "react-share": "*"
70 | },
71 | "files": [
72 | "dist"
73 | ],
74 | "dependencies": {
75 | "@emotion/react": "^11.11.1",
76 | "@emotion/styled": "^11.11.0",
77 | "@mui/icons-material": "^5.15.0",
78 | "@mui/material": "^5.15.0",
79 | "copyfiles": "^2.4.1",
80 | "react-share": "^5.0.3"
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/ui/Icons/Logo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Logo = (isActive?: boolean) => (
4 |
76 | )
77 |
78 | export default Logo
79 |
--------------------------------------------------------------------------------
/src/ui/Icons/Setting.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Setting = (isActive?: boolean) => (
4 |
33 | )
34 |
35 | export default Setting
36 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
3 | const JsonMinimizerPlugin = require('json-minimizer-webpack-plugin')
4 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
6 | const TerserPlugin = require('terser-webpack-plugin')
7 | const { DefinePlugin } = require('webpack')
8 | const { CleanWebpackPlugin } = require('clean-webpack-plugin')
9 |
10 | module.exports = {
11 | mode: 'production',
12 | entry: './src/index.ts',
13 | output: {
14 | filename: 'index.js',
15 | assetModuleFilename: 'public/[name].[contenthash][ext][query]',
16 | path: path.resolve(__dirname, 'dist'),
17 | libraryTarget: 'umd',
18 | clean: true
19 | },
20 | resolve: {
21 | extensions: ['.ts', '.tsx', '.js']
22 | },
23 | externals: {
24 | react: 'react'
25 | },
26 | module: {
27 | rules: [
28 | {
29 | test: /\.(ts|tsx)$/,
30 | exclude: /node_modules/,
31 | use: {
32 | loader: 'ts-loader'
33 | }
34 | },
35 | {
36 | test: /\.(png|jpe?g|gif)$/i,
37 | use: [
38 | {
39 | loader: 'file-loader'
40 | }
41 | ]
42 | },
43 | {
44 | test: /\.s(a|c)ss$/i,
45 | exclude: /node_modules/,
46 | use: [
47 | 'style-loader',
48 | {
49 | loader: 'css-loader',
50 | options: {
51 | sourceMap: true,
52 | modules: true
53 | }
54 | },
55 | {
56 | loader: 'sass-loader',
57 | options: {
58 | sourceMap: true
59 | }
60 | }
61 | ]
62 | },
63 | {
64 | test: /\.css$/,
65 | use: [
66 | 'style-loader',
67 | {
68 | loader: 'css-loader',
69 | options: {
70 | sourceMap: true
71 | }
72 | }
73 | ]
74 | },
75 | {
76 | test: /\.(jpe?g|png|gif|svg)$/i,
77 | exclude: /node_modules/,
78 | type: 'asset'
79 | }
80 | ]
81 | },
82 | optimization: {
83 | minimizer: [
84 | new CssMinimizerPlugin(),
85 | new JsonMinimizerPlugin(),
86 | new TerserPlugin({
87 | parallel: true,
88 | terserOptions: {
89 | format: {
90 | comments: false
91 | }
92 | }
93 | }),
94 | new ImageMinimizerPlugin({
95 | minimizer: {
96 | implementation: ImageMinimizerPlugin.imageminMinify,
97 | options: {
98 | plugins: [
99 | ['gifsicle', { interlaced: true }],
100 | ['jpegtran', { progressive: true }],
101 | ['optipng', { optimizationLevel: 5 }],
102 |
103 | [
104 | 'svgo',
105 | {
106 | plugins: [
107 | {
108 | name: 'preset-default',
109 | params: {
110 | overrides: {
111 | addAttributesToSVGElement: {
112 | params: {
113 | attributes: [
114 | {
115 | xmlns: 'http://www.w3.org/2000/svg'
116 | }
117 | ]
118 | }
119 | }
120 | }
121 | }
122 | }
123 | ]
124 | }
125 | ]
126 | ]
127 | }
128 | }
129 | })
130 | ]
131 | },
132 | plugins: [
133 | new MiniCssExtractPlugin({
134 | filename: '[name].[contenthash].css',
135 | chunkFilename: '[id].[contenthash].css'
136 | }),
137 | new CleanWebpackPlugin()
138 | ],
139 | stats: {
140 | errorDetails: false
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/storybook-static/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
17 |
24 |
31 |
44 |
45 |
18 |
152 | )
153 | }
154 |
155 | export default ShareButton
156 |
--------------------------------------------------------------------------------
/storybook-static/sb-addons/essentials-backgrounds-3/manager-bundle.js:
--------------------------------------------------------------------------------
1 | try{
2 | var ne=Object.create;var F=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var x=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,s)=>(typeof require<"u"?require:t)[s]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var L=(e,t)=>()=>(e&&(t=e(e=0)),t);var le=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var ue=(e,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ie(t))!se.call(e,i)&&i!==s&&F(e,i,{get:()=>t[i],enumerable:!(o=oe(t,i))||o.enumerable});return e};var de=(e,t,s)=>(s=e!=null?ne(ae(e)):{},ue(t||!e||!e.__esModule?F(s,"default",{value:e,enumerable:!0}):s,e));var c=L(()=>{});var f=L(()=>{});var m=L(()=>{});var Q=le((J,D)=>{c();f();m();(function(e){if(typeof J=="object"&&typeof D<"u")D.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,s;return function o(i,g,l){function n(a,h){if(!g[a]){if(!i[a]){var d=typeof x=="function"&&x;if(!h&&d)return d(a,!0);if(r)return r(a,!0);var b=new Error("Cannot find module '"+a+"'");throw b.code="MODULE_NOT_FOUND",b}var p=g[a]={exports:{}};i[a][0].call(p.exports,function(y){var S=i[a][1][y];return n(S||y)},p,p.exports,o,i,g,l)}return g[a].exports}for(var r=typeof x=="function"&&x,u=0;u
19 |
33 |
52 |
75 |
98 |
112 |
150 |
151 |