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..19e563b01 --- /dev/null +++ b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.stories.tsx @@ -0,0 +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 = (props) => ( + +); + +export const Default = Template.bind({}); +Default.args = { + value: 30, +}; 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..3b95790ac --- /dev/null +++ b/system/libs/figa-ui/src/lib/bullshit-meter/bullshit-meter.tsx @@ -0,0 +1,120 @@ +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 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; + + &:nth-child(5n + 5) { + width: 50%; + } + } + } + } +`; + +const scale = Array.from({ length: 50 }); + +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((_, idx) => ( +
+ ))} +
+ +
+ {label} + + ); +}; + +export { BullshitMeter }; 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..483faafa8 --- /dev/null +++ b/system/libs/figa-ui/src/lib/bullshit-meter/defs.ts @@ -0,0 +1,20 @@ +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, + BullshitValue, + BullshitMeterHTMLElementProps, +}; 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';