From ff215d0f5673368b5da5abbcf64793bde48dba12 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Mon, 6 Nov 2023 19:43:24 +0900
Subject: [PATCH] feat(m): add `<SM>` (motion) component

---
 lib/components/SM.vue                         | 56 ++++++++++++++++
 lib/components/SMFade.vue                     | 18 +++++
 stories/components/SM.01_Playground.story.vue | 66 +++++++++++++++++++
 .../components/SM.02_Presets_SMFade.story.vue | 60 +++++++++++++++++
 stories/styles.css                            | 10 ++-
 5 files changed, 208 insertions(+), 2 deletions(-)
 create mode 100644 lib/components/SM.vue
 create mode 100644 lib/components/SMFade.vue
 create mode 100644 stories/components/SM.01_Playground.story.vue
 create mode 100644 stories/components/SM.02_Presets_SMFade.story.vue

diff --git a/lib/components/SM.vue b/lib/components/SM.vue
new file mode 100644
index 00000000..8920752b
--- /dev/null
+++ b/lib/components/SM.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
+import { ref } from 'vue'
+
+export interface Props {
+  as?: string
+  x?: string
+  y?: string
+  opacity?: string | number
+  duration?: string
+  delay?: string
+  once?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'div',
+  x: '0',
+  y: '0',
+  opacity: 1,
+  duration: '0.75s',
+  delay: '0s',
+  once: true
+})
+
+const target = ref<HTMLElement | null>(null)
+const on = ref(false)
+
+const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  on.value = isIntersecting
+  if (on.value && props.once) {
+    stop()
+  }
+})
+</script>
+
+<template>
+  <component :is="as" class="SM" :class="{ on }" ref="target">
+    <slot :on="on" />
+  </component>
+</template>
+
+<style scoped lang="postcss">
+.SM {
+  position: relative;
+  opacity: v-bind(opacity);
+  transform: translate(v-bind(x), v-bind(y));
+  transition: opacity, transform;
+  transition-duration: v-bind(duration);
+  transition-delay: v-bind(delay);
+}
+
+.SM.on {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+</style>
diff --git a/lib/components/SMFade.vue b/lib/components/SMFade.vue
new file mode 100644
index 00000000..160e6093
--- /dev/null
+++ b/lib/components/SMFade.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import SM, { type Props as BaseProps } from './SM.vue'
+
+export type Props = Omit<BaseProps, 'opacity'>
+
+defineProps<Props>()
+</script>
+
+<template>
+  <SM
+    class="SMFade"
+    opacity="0"
+    v-bind="$props"
+    v-slot="{ on }"
+  >
+    <slot :on="on" />
+  </SM>
+</template>
diff --git a/stories/components/SM.01_Playground.story.vue b/stories/components/SM.01_Playground.story.vue
new file mode 100644
index 00000000..b9f19b44
--- /dev/null
+++ b/stories/components/SM.01_Playground.story.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import SM from 'sefirot/components/SM.vue'
+
+const title = 'Components / SM / 01. Playground'
+const docs = '/components/m'
+
+function state() {
+  return {
+    opacity: 0,
+    x: '16px',
+    y: '0',
+    duration: '0.75s',
+    delay: '0s',
+    once: true
+  }
+}
+</script>
+
+<template>
+  <Story :title="title" :init-state="state" source="Not available" auto-props-disabled>
+    <template #controls="{ state }">
+      <HstText
+        title="opacity"
+        v-model="state.opacity"
+      />
+      <HstText
+        title="x"
+        v-model="state.x"
+      />
+      <HstText
+        title="y"
+        v-model="state.y"
+      />
+      <HstText
+        title="duration"
+        v-model="state.duration"
+      />
+      <HstText
+        title="delay"
+        v-model="state.delay"
+      />
+      <HstCheckbox
+        title="once"
+        v-model="state.once"
+      />
+    </template>
+
+    <template #default="{ state }">
+      <Board :title="title" :docs="docs">
+        <div>Scroll down to see animation.</div>
+        <div v-for="i in [...Array(5).keys()]" :key="i" class="py-256">
+          <SM
+            :opacity="state.opacity"
+            :x="state.x"
+            :y="state.y"
+            :duration="state.duration"
+            :delay="state.delay"
+            :once="state.once"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </SM>
+        </div>
+      </Board>
+    </template>
+  </Story>
+</template>
diff --git a/stories/components/SM.02_Presets_SMFade.story.vue b/stories/components/SM.02_Presets_SMFade.story.vue
new file mode 100644
index 00000000..11de0d80
--- /dev/null
+++ b/stories/components/SM.02_Presets_SMFade.story.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import SMFade from 'sefirot/components/SMFade.vue'
+
+const title = 'Components / SM / 02. Presets: SMFade'
+const docs = '/components/m'
+
+function state() {
+  return {
+    x: '16px',
+    y: '0',
+    duration: '0.75s',
+    delay: '0s',
+    once: true
+  }
+}
+</script>
+
+<template>
+  <Story :title="title" :init-state="state" source="Not available" auto-props-disabled>
+    <template #controls="{ state }">
+      <HstText
+        title="x"
+        v-model="state.x"
+      />
+      <HstText
+        title="y"
+        v-model="state.y"
+      />
+      <HstText
+        title="duration"
+        v-model="state.duration"
+      />
+      <HstText
+        title="delay"
+        v-model="state.delay"
+      />
+      <HstCheckbox
+        title="once"
+        v-model="state.once"
+      />
+    </template>
+
+    <template #default="{ state }">
+      <Board :title="title" :docs="docs">
+        <div>Scroll down to see animation.</div>
+        <div v-for="i in [...Array(5).keys()]" :key="i" class="py-256">
+          <SMFade
+            :x="state.x"
+            :y="state.y"
+            :duration="state.duration"
+            :delay="state.delay"
+            :once="state.once"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </SMFade>
+        </div>
+      </Board>
+    </template>
+  </Story>
+</template>
diff --git a/stories/styles.css b/stories/styles.css
index 715dfb9c..fd4f4c1e 100644
--- a/stories/styles.css
+++ b/stories/styles.css
@@ -39,8 +39,14 @@ body {
 
 .rounded-6 { border-radius: 6px; }
 
-.p-8  { padding: 8px; }
-.p-12 { padding: 12px; }
+.p-8   { padding: 8px; }
+.p-12  { padding: 12px; }
+.p-256 { padding: 256px; }
+
+.py-256 { padding: 256px 0 256px; }
+
+.pt-256 { padding-top: 256px; }
+.pt-512 { padding-top: 512px; }
 
 .flex {
   display: flex;