foundry-ui/src/components/InteractionFeedback/InteractionFeedback.stories.tsx at a162542b26bf5adc0d36d34e4394fb7acbf0b10d · Headstorm/foundry-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React from 'react';
import styled from 'styled-components';
import { Story, Meta } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import InteractionFeedback from './InteractionFeedback';
import colors from '../../enums/colors';
import Text from '../Text';

const InteractionInnerContainer = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
`;

interface SplashProps {
  entranceOpacity: number;
  exitOpacity: number;
  startingRadius: number;
  endingRadius: number;
  mass: number;
  tension: number;
  friction: number;
  clamp: boolean;
  color: string;
}

export const Splash: Story<SplashProps> = ({
  startingRadius,
  entranceOpacity,
  endingRadius,
  exitOpacity,
  mass,
  tension,
  friction,
  clamp,
  color,
}: SplashProps) => {
  const transitionProps = {
    from: {
      r: `${startingRadius}`,
      opacity: entranceOpacity,
    },
    enter: {
      r: `${endingRadius}`,
      opacity: exitOpacity,
    },
    config: {
      mass,
      tension,
      friction,
      clamp,
    },
  };
  // const interpolationFunctions = {
  //   r: (r: any) => r.to((val: string) => `${Math.abs(parseFloat(val)).toFixed(1)}`),
  //   opacity: (opacity: any) => opacity.to((val: number) => val.toFixed(2)),
  // };
  return (
    <InteractionFeedback
      color={color}
      // interpolationFunctions={interpolationFunctions}
      transitionProps={transitionProps}
    >
      <InteractionInnerContainer onClick={action('button-click')}>
        <Text>Click Anywhere!</Text>
      </InteractionInnerContainer>
    </InteractionFeedback>
  );
};
Splash.args = {
  entranceOpacity: 0.5,
  exitOpacity: 0,
  startingRadius: 0,
  endingRadius: 100,
  mass: 90,
  tension: 1000,
  friction: 20,
  clamp: true,
  color: colors.grayDark,
} as SplashProps;

export default {
  title: 'InteractionFeedback',
  argTypes: {
    entranceOpacity: {
      control: { type: 'range', min: 0, max: 1, step: 0.05, label: 'Circle entrance opacity' },
    },
    exitOpacity: {
      control: { type: 'range', min: 0, max: 1, step: 0.05, label: 'Circle exit opacity' },
    },
    startingRadius: {
      control: { type: 'range', min: 0, max: 100, step: 1, label: 'Starting circle radius' },
    },
    endingRadius: {
      control: { type: 'range', min: 0, max: 100, step: 1, label: 'Ending circle radius' },
    },
    mass: { control: { type: 'range', min: 1, max: 100, step: 1 } },
    tension: { control: { type: 'range', min: 50, max: 1000, step: 50 } },
    friction: { control: { type: 'range', min: 1, max: 100, step: 1 } },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Generic-UI-Style?node-id=102%3A88',
    },
  },
} as Meta;