feat: more storybook stories

components/smart/AccentModePicker.stories.js

@@ -0,0 +1,15 @@
+import AccentModePicker from "./AccentModePicker.vue"
+
+export default {
+  component: AccentModePicker,
+  title: "Smart/AccentModePicker",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { AccentModePicker },
+  props: Object.keys(argTypes),
+  template: `<SmartAccentModePicker v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartAccentModePicker = Template.bind({})
+SmartAccentModePicker.args = {}

components/smart/Anchor.stories.js

@@ -0,0 +1,17 @@
+import Anchor from "./Anchor.vue"
+
+export default {
+  component: Anchor,
+  title: "Smart/Anchor",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Anchor },
+  props: Object.keys(argTypes),
+  template: `<SmartAnchor v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartAnchor = Template.bind({})
+SmartAnchor.args = {
+  label: "Link",
+}

components/smart/AutoComplete.stories.js

@@ -0,0 +1,17 @@
+import AutoComplete from "./AutoComplete.vue"
+
+export default {
+  component: AutoComplete,
+  title: "Smart/AutoComplete",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { AutoComplete },
+  props: Object.keys(argTypes),
+  template: `<SmartAutoComplete v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartAutoComplete = Template.bind({})
+SmartAutoComplete.args = {
+  source: ["Apple", "Mango", "Carrot"],
+}

components/smart/ChangeLanguage.stories.js

@@ -0,0 +1,15 @@
+import ChangeLanguage from "./ChangeLanguage.vue"
+
+export default {
+  component: ChangeLanguage,
+  title: "Smart/ChangeLanguage",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { ChangeLanguage },
+  props: Object.keys(argTypes),
+  template: `<SmartChangeLanguage v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartChangeLanguage = Template.bind({})
+SmartChangeLanguage.args = {}

components/smart/ColorModePicker.stories.js

@@ -0,0 +1,15 @@
+import ColorModePicker from "./ColorModePicker.vue"
+
+export default {
+  component: ColorModePicker,
+  title: "Smart/ColorModePicker",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { ColorModePicker },
+  props: Object.keys(argTypes),
+  template: `<SmartColorModePicker v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartColorModePicker = Template.bind({})
+SmartColorModePicker.args = {}

components/smart/ConfirmModal.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("confirm") }}</h3>
+      <h3 class="heading">{{ $t("modal.confirm") }}</h3>
       <div>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>

components/smart/DeletableChip.stories.js

@@ -0,0 +1,15 @@
+import DeletableChip from "./DeletableChip.vue"
+
+export default {
+  component: DeletableChip,
+  title: "Smart/DeletableChip",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { DeletableChip },
+  props: Object.keys(argTypes),
+  template: `<SmartDeletableChip v-bind="$props" v-on="$props">file</DeletableChip>`,
+})
+
+export const SmartDeletableChip = Template.bind({})
+SmartDeletableChip.args = {}

components/smart/EnvInput.stories.js

@@ -0,0 +1,18 @@
+import EnvInput from "./EnvInput.vue"
+
+export default {
+  component: EnvInput,
+  title: "Smart/EnvInput",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { EnvInput },
+  props: Object.keys(argTypes),
+  template: `<SmartEnvInput v-bind="$props" v-on="$props" class="h-8 w-8" />`,
+})
+
+export const SmartEnvInput = Template.bind({})
+SmartEnvInput.args = {
+  placeholder: "<<env_var>>",
+  value: "<<url>>/<<path>>",
+}

components/smart/Icon.stories.js

@@ -0,0 +1,17 @@
+import Icon from "./Icon.vue"
+
+export default {
+  component: Icon,
+  title: "Smart/Icon",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Icon },
+  props: Object.keys(argTypes),
+  template: `<SmartIcon v-bind="$props" v-on="$props" class="h-8 w-8" />`,
+})
+
+export const SmartIcon = Template.bind({})
+SmartIcon.args = {
+  name: "github",
+}

components/smart/Item.stories.js

@@ -0,0 +1,17 @@
+import Item from "./Item.vue"
+
+export default {
+  component: Item,
+  title: "Smart/Item",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Item },
+  props: Object.keys(argTypes),
+  template: `<SmartItem v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartItem = Template.bind({})
+SmartItem.args = {
+  label: "Item",
+}

components/smart/Modal.stories.js

@@ -0,0 +1,19 @@
+import Modal from "./Modal.vue"
+
+export default {
+  component: Modal,
+  title: "Smart/Modal",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Modal },
+  props: Object.keys(argTypes),
+  template: `<SmartModal v-bind="$props" v-on="$props">
+    <template #header>Header</template>
+    <template #body><div class="px-2">Body</template>
+    <template #footer>Footer</template>
+    </SmartModal>`,
+})
+
+export const SmartModal = Template.bind({})
+SmartModal.args = {}

components/smart/ProgressRing.stories.js

@@ -0,0 +1,19 @@
+import ProgressRing from "./ProgressRing.vue"
+
+export default {
+  component: ProgressRing,
+  title: "Smart/ProgressRing",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { ProgressRing },
+  props: Object.keys(argTypes),
+  template: `<SmartProgressRing v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartProgressRing = Template.bind({})
+SmartProgressRing.args = {
+  radius: 16,
+  stroke: 4,
+  progress: 25,
+}

components/smart/Spinner.stories.js

@@ -0,0 +1,15 @@
+import Spinner from "./Spinner.vue"
+
+export default {
+  component: Spinner,
+  title: "Smart/Spinner",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Spinner },
+  props: Object.keys(argTypes),
+  template: `<SmartSpinner v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartSpinner = Template.bind({})
+SmartSpinner.args = {}

components/smart/Tabs.stories.js

@@ -0,0 +1,16 @@
+import Tabs from "./Tabs.vue"
+
+export default {
+  component: Tabs,
+  title: "Smart/Tabs",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Tabs },
+  props: Object.keys(argTypes),
+  template:
+    '<SmartTabs v-bind="$props" v-on="$props"><SmartTab selected label="Tab 1"></SmartTab></SmartTabs>',
+})
+
+export const SmartTabs = Template.bind({})
+SmartTabs.args = {}

components/smart/Toggle.stories.js

@@ -0,0 +1,18 @@
+import Toggle from "./Toggle.vue"
+
+export default {
+  component: Toggle,
+  title: "Smart/Toggle",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Toggle },
+  props: Object.keys(argTypes),
+  template: `<SmartToggle v-bind="$props" v-on="$props" />`,
+})
+
+export const SmartToggle = Template.bind({})
+SmartToggle.args = {
+  label: "Toggle",
+  on: true,
+}