From 472306739207237cd167cd52a68ce59347a5d42a Mon Sep 17 00:00:00 2001 From: Adamell000 Date: Wed, 12 Jul 2023 20:06:43 +0200 Subject: [PATCH 1/2] bullshit-meter-initial-commit --- node_modules/.package-lock.json | 6 + package-lock.json | 6 + package.json | 1 + system/libs/figa-ui/src/index.ts | 1 + .../bullshit-meter/bullshit-meter.stories.tsx | 15 ++ .../bullshit-meter/bullshit-meter.test.tsx | 0 .../src/lib/bullshit-meter/bullshit-meter.tsx | 179 ++++++++++++++++++ .../figa-ui/src/lib/bullshit-meter/defs.ts | 5 + .../figa-ui/src/lib/bullshit-meter/index.tsx | 2 + 9 files changed, 215 insertions(+) create mode 100644 node_modules/.package-lock.json create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx create mode 100644 system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.test.tsx create mode 100644 system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx create mode 100644 system/libs/figa-ui/src/lib/bullshit-meter/defs.ts create mode 100644 system/libs/figa-ui/src/lib/bullshit-meter/index.tsx diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 000000000..58d10b00c --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Dream-stack-for-React-dev", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..58d10b00c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Dream-stack-for-React-dev", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} diff --git a/package.json b/package.json new file mode 100644 index 000000000..0967ef424 --- /dev/null +++ b/package.json @@ -0,0 +1 @@ +{} diff --git a/system/libs/figa-ui/src/index.ts b/system/libs/figa-ui/src/index.ts index ba8e9057e..8c9d08439 100644 --- a/system/libs/figa-ui/src/index.ts +++ b/system/libs/figa-ui/src/index.ts @@ -29,3 +29,4 @@ export * from './lib/alert'; export * from './lib/avatars'; export * from './lib/loader'; export * from './lib/shared'; +export * from './lib/bullshit-meter'; diff --git a/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx new file mode 100644 index 000000000..d8e599dd0 --- /dev/null +++ b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx @@ -0,0 +1,15 @@ +import type { Story, Meta } from '@storybook/react'; + +import { BullshitMeter } from './bullshit-meter'; + +export default { + component: BullshitMeter, + title: 'BullshitMeter', +} as Meta; + +const Template: Story = () => { + return ; +}; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.test.tsx b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.test.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx new file mode 100644 index 000000000..26e8fadbc --- /dev/null +++ b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx @@ -0,0 +1,179 @@ +import { useState, FC } from 'react'; +import styled, { CSSObject } from 'styled-components'; + +import type { BullshitMeterProps } from './defs'; + +const scale = [ + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '20%' }, + { size: '50%' }, +]; + +const BullshitMeter: FC = () => { + const [sliderValue, setSliderValue] = useState(0); + const [invertedSliderValue, setInvertedSliderValue] = useState(100); + + const handleSliderChangeValue = (e: any) => { + const invertedSliderValue = 100 - e.target.value; + setInvertedSliderValue(invertedSliderValue); + setSliderValue(e.target.value); + }; + + return ( + + + + {scale.map((line) => ( + + ))} + + + + {sliderValue > 87 ? 'HOT!!!' : sliderValue} + + ); +}; + +export { BullshitMeter }; + +const BullshitMeterWrapper = styled.div` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 1.4rem; +`; + +const StyledBullshitMeter = styled.div` + position: relative; + height: 400px; + width: 80px; + border-top-right-radius: 50px; + background-color: rgba(255, 255, 255, 0.2); + overflow: hidden; + -webkit-box-shadow: ${({ shadowValue }: any) => + `0px 0px ${shadowValue / 3}px 0px rgba(255, 0, 0, 1)`}; + -moz-box-shadow: ${({ shadowValue }: any) => + `0px 0px ${shadowValue / 3}px 0px rgba(255, 0, 0, 1)`}; + box-shadow: ${({ shadowValue }: any) => + `0px 0px ${shadowValue / 3}px 0px rgba(255, 0, 0, 1)`}; +`; + +const Scale = styled.div` + position: absolute; + width: 100%; + height: 350px; + bottom: 0; + left: 0; + display: flex; + flex-direction: column-reverse; + align-items: end; + justify-content: space-between; + padding: 5px; + z-index: 1; + pointer-events: none; +`; + +const ScaleLine = styled.span` + width: ${({ size }: CSSObject) => size}; + height: 3px; + border-radius: 3px; + background-color: white; +`; + +const StyledRange = styled.input.attrs({ type: 'range' })` + -webkit-appearance: none; + -moz-appearance: none; + position: absolute; + margin: 0; + padding: 0; + border: none; + outline: none; + height: 80px; + width: 400px; + right: 80px; + transform: rotate(-90deg); + transform-origin: top right; + background-color: ${({ invertedValue }: CSSObject) => + `hsla(${invertedValue}, 50%, 50%, 1)`}; + + &::-webkit-slider-runnable-track { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 100%; + width: 80px; + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 20px; + width: 10px; + border-radius: 3px; + background-color: white; + clip-path: polygon(100% 0, 50% 100%, 0 0); + } +`; + +const ValueDisplay = styled.p` + color: white; + font-size: 30px; +`; diff --git a/system/libs/figa-ui/src/lib/bullshit-meter/defs.ts b/system/libs/figa-ui/src/lib/bullshit-meter/defs.ts new file mode 100644 index 000000000..b8e88b5ef --- /dev/null +++ b/system/libs/figa-ui/src/lib/bullshit-meter/defs.ts @@ -0,0 +1,5 @@ +interface BullshitMeterProps { + className?: string; +} + +export type { BullshitMeterProps }; diff --git a/system/libs/figa-ui/src/lib/bullshit-meter/index.tsx b/system/libs/figa-ui/src/lib/bullshit-meter/index.tsx new file mode 100644 index 000000000..02949c414 --- /dev/null +++ b/system/libs/figa-ui/src/lib/bullshit-meter/index.tsx @@ -0,0 +1,2 @@ +export * from './bullshit-meter'; +export * from './defs'; From e32136ec9bb723ca5b413bd3cf8c2897d686718a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20Po=C5=82ubi=C5=84ski?= Date: Fri, 14 Jul 2023 18:05:34 +0200 Subject: [PATCH 2/2] Add improvements --- .../bullshit-meter/bullshit-meter.stories.tsx | 11 +- .../src/lib/bullshit-meter/bullshit-meter.tsx | 267 +++++++----------- .../figa-ui/src/lib/bullshit-meter/defs.ts | 21 +- 3 files changed, 129 insertions(+), 170 deletions(-) diff --git a/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx index d8e599dd0..19e563b01 100644 --- a/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx +++ b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx @@ -1,15 +1,18 @@ import type { Story, Meta } from '@storybook/react'; import { BullshitMeter } from './bullshit-meter'; +import type { BullshitMeterProps } from './defs'; export default { component: BullshitMeter, title: 'BullshitMeter', } as Meta; -const Template: Story = () => { - return ; -}; +const Template: Story = (props) => ( + +); export const Default = Template.bind({}); -Default.args = {}; +Default.args = { + value: 30, +}; diff --git a/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx index 26e8fadbc..3b95790ac 100644 --- a/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx +++ b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx @@ -1,179 +1,120 @@ -import { useState, FC } from 'react'; -import styled, { CSSObject } from 'styled-components'; +import { type ChangeEventHandler, useMemo } from 'react'; +import styled from 'styled-components'; import type { BullshitMeterProps } from './defs'; +import { central, column, size } from '../shared'; +import c from 'classnames'; -const scale = [ - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '20%' }, - { size: '50%' }, -]; +const Container = styled.div` + ${central('absolute')} + ${column()} + align-items: center; + gap: 1.4rem; + + .scale-container { + position: relative; + height: 400px; + width: 80px; + border-top-right-radius: 50px; + background-color: rgba(255, 255, 255, 0.2); + overflow: hidden; + + input { + ${size('80px', '400px')} + position: absolute; + margin: 0; + padding: 0; + border: none; + outline: none; + right: 80px; + transform: rotate(-90deg); + transform-origin: top right; + + &::-webkit-slider-runnable-track { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + ${size('80px', '100')} + } + + &::-webkit-slider-thumb { + ${size('20px', '10px')} + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 3px; + background-color: white; + clip-path: polygon(100% 0, 50% 100%, 0 0); + } + } + + .scale { + ${size('350px', '100%')} + position: absolute; + bottom: 0; + left: 0; + display: flex; + flex-direction: column-reverse; + align-items: end; + justify-content: space-between; + padding: 5px; + z-index: 1; + pointer-events: none; + + & > * { + ${size('3px', '20%')} + border-radius: 3px; + background-color: white; -const BullshitMeter: FC = () => { - const [sliderValue, setSliderValue] = useState(0); - const [invertedSliderValue, setInvertedSliderValue] = useState(100); + &:nth-child(5n + 5) { + width: 50%; + } + } + } + } +`; + +const scale = Array.from({ length: 50 }); - const handleSliderChangeValue = (e: any) => { - const invertedSliderValue = 100 - e.target.value; - setInvertedSliderValue(invertedSliderValue); - setSliderValue(e.target.value); +const BullshitMeter = ({ + className, + label, + value, + onChange, + ...props +}: BullshitMeterProps) => { + const handleSliderChangeValue: ChangeEventHandler = (e) => { + onChange(Number.parseInt(e.target.value)); }; + const invertedValue = useMemo(() => 100 - value, [value]); + return ( - - - - {scale.map((line) => ( - + +
+
+ {scale.map((_, idx) => ( +
))} - - + - - {sliderValue > 87 ? 'HOT!!!' : sliderValue} - +
+ {label} + ); }; export { BullshitMeter }; - -const BullshitMeterWrapper = styled.div` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - flex-direction: column; - align-items: center; - gap: 1.4rem; -`; - -const StyledBullshitMeter = styled.div` - position: relative; - height: 400px; - width: 80px; - border-top-right-radius: 50px; - background-color: rgba(255, 255, 255, 0.2); - overflow: hidden; - -webkit-box-shadow: ${({ shadowValue }: any) => - `0px 0px ${shadowValue / 3}px 0px rgba(255, 0, 0, 1)`}; - -moz-box-shadow: ${({ shadowValue }: any) => - `0px 0px ${shadowValue / 3}px 0px rgba(255, 0, 0, 1)`}; - box-shadow: ${({ shadowValue }: any) => - `0px 0px ${shadowValue / 3}px 0px rgba(255, 0, 0, 1)`}; -`; - -const Scale = styled.div` - position: absolute; - width: 100%; - height: 350px; - bottom: 0; - left: 0; - display: flex; - flex-direction: column-reverse; - align-items: end; - justify-content: space-between; - padding: 5px; - z-index: 1; - pointer-events: none; -`; - -const ScaleLine = styled.span` - width: ${({ size }: CSSObject) => size}; - height: 3px; - border-radius: 3px; - background-color: white; -`; - -const StyledRange = styled.input.attrs({ type: 'range' })` - -webkit-appearance: none; - -moz-appearance: none; - position: absolute; - margin: 0; - padding: 0; - border: none; - outline: none; - height: 80px; - width: 400px; - right: 80px; - transform: rotate(-90deg); - transform-origin: top right; - background-color: ${({ invertedValue }: CSSObject) => - `hsla(${invertedValue}, 50%, 50%, 1)`}; - - &::-webkit-slider-runnable-track { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - height: 100%; - width: 80px; - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - height: 20px; - width: 10px; - border-radius: 3px; - background-color: white; - clip-path: polygon(100% 0, 50% 100%, 0 0); - } -`; - -const ValueDisplay = styled.p` - color: white; - font-size: 30px; -`; diff --git a/system/libs/figa-ui/src/lib/bullshit-meter/defs.ts b/system/libs/figa-ui/src/lib/bullshit-meter/defs.ts index b8e88b5ef..483faafa8 100644 --- a/system/libs/figa-ui/src/lib/bullshit-meter/defs.ts +++ b/system/libs/figa-ui/src/lib/bullshit-meter/defs.ts @@ -1,5 +1,20 @@ -interface BullshitMeterProps { - className?: string; +import type { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'; + +type BullshitMeterHTMLElementProps = Omit< + DetailedHTMLProps, HTMLDivElement>, + 'children' | 'onChange' | 'ref' +>; + +type BullshitValue = number; + +interface BullshitMeterProps extends BullshitMeterHTMLElementProps { + onChange: (value: BullshitValue) => void; + label?: ReactNode; + value: BullshitValue; } -export type { BullshitMeterProps }; +export type { + BullshitMeterProps, + BullshitValue, + BullshitMeterHTMLElementProps, +};