frappe-ui 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/resources/documentResource.js

@@ -1,4 +1,4 @@
-import { reactive } from 'vue'
+import { reactive, watch } from 'vue'
 import { getCacheKey, createResource } from './resources'
 import {
   updateRowInListResource,
@@ -39,6 +39,7 @@ export function createDocumentResource(options, vm) {
     },
     onSuccess(data) {
       out.doc = transform(data)
+      out.originalDoc = JSON.parse(JSON.stringify(out.doc))
       options.setValue?.onSuccess?.call(vm, data)
     },
     onError(error) {
@@ -55,6 +56,8 @@ export function createDocumentResource(options, vm) {
     doctype: options.doctype,
     name: options.name,
     doc: null,
+    originalDoc: null,
+    isDirty: false,
     auto: autoPropIsPassed ? options.auto : true,
     get: createResource(
       {
@@ -68,6 +71,7 @@ export function createDocumentResource(options, vm) {
         onSuccess(data) {
           saveLocal(cacheKey, data)
           out.doc = transform(data)
+          out.originalDoc = JSON.parse(JSON.stringify(out.doc))
           options.onSuccess?.call(vm, out.doc)
         },
         onError: options.onError,
@@ -82,6 +86,22 @@ export function createDocumentResource(options, vm) {
       },
       vm
     ),
+    save: createResource(
+      {
+        ...setValueOptions,
+        makeParams() {
+          let values = JSON.parse(JSON.stringify(out.doc))
+          delete values.doctype
+          delete values.name
+          return {
+            doctype: out.doctype,
+            name: out.name,
+            fieldname: values,
+          }
+        },
+      },
+      vm
+    ),
     delete: createResource(
       {
         url: 'frappe.client.delete',
@@ -105,6 +125,17 @@ export function createDocumentResource(options, vm) {
     setDoc,
   })
 
+  // keep track of isDirty as doc changes
+  watch(
+    () => out.doc,
+    () => {
+      out.isDirty = JSON.stringify(out.doc) !== JSON.stringify(out.originalDoc)
+    },
+    {
+      deep: true,
+    }
+  )
+
   for (let methodKey in options.whitelistedMethods) {
     let methodOptions = options.whitelistedMethods[methodKey]
     if (typeof methodOptions == 'string') {

package/src/components/Avatar.stories.ts

@@ -1,110 +0,0 @@
-import { Avatar } from '../index'
-
-const IconOnline = {
-  template: `<svg xmlns="http://www.w3.org/2000/svg" class="h-full w-full text-green-500" viewBox="0 0 20 20" fill="currentColor"><circle cx="10" cy="10" r="10"/></svg>`,
-}
-
-const IconOffline = {
-  template: `<svg xmlns="http://www.w3.org/2000/svg" class="h-full w-full text-gray-500" viewBox="0 0 20 20" fill="currentColor"><circle cx="10" cy="10" r="10"/></svg>`,
-}
-
-const IconSleep = {
-  template: `<svg class="h-full w-full" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="18" height="18" rx="9" fill="white"/>
-    <path d="M16.9819 9.71993C16.9899 9.63114 16.8851 9.57883 16.8161 9.63536C15.7802 10.4848 14.4551 10.9946 13.0109 10.9946C9.69415 10.9946 7.00543 8.30585 7.00543 4.98914C7.00543 3.54495 7.51521 2.21982 8.36464 1.18388C8.42117 1.11495 8.36886 1.0101 8.28008 1.01809C4.19856 1.3855 1 4.8156 1 8.99276C1 13.415 4.58496 17 9.00724 17C13.1844 17 16.6145 13.8014 16.9819 9.71993Z" fill="#7C7C7C"/>
-    </svg>
-    `,
-}
-
-const IconUser = {
-  template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-  <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd" />
-</svg>`,
-}
-
-export default {
-  component: Avatar,
-  tags: ['autodocs'],
-  render: function (args, { argTypes }) {
-    return {
-      props: Object.keys(argTypes),
-      components: { Avatar },
-      template: `<Avatar v-bind="$props">
-            <template v-if="$props.default" #default>
-                <component :is="$props.default" />
-            </template>
-            <template v-if="$props.indicator" #indicator>
-                <component :is="$props.indicator" />
-            </template>
-        </Avatar>`,
-    }
-  },
-  argTypes: {
-    size: {
-      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
-      control: { type: 'inline-radio' },
-    },
-    shape: {
-      options: ['circle', 'square'],
-      control: { type: 'inline-radio' },
-    },
-    indicator: {
-      options: ['online', 'offline', 'sleep'],
-      mapping: {
-        online: IconOnline,
-        offline: IconOffline,
-        sleep: IconSleep,
-      },
-    },
-    default: {
-      options: ['user', 'none'],
-      mapping: {
-        none: null,
-        user: IconUser,
-      },
-    },
-  },
-  args: {
-    size: '3xl',
-    shape: 'circle',
-  },
-}
-
-export const Normal = {
-  args: {
-    image: 'https://randomuser.me/api/portraits/women/1.jpg',
-  },
-}
-
-export const SizeSmall = {
-  args: {
-    size: 'sm',
-    image: 'https://randomuser.me/api/portraits/women/2.jpg',
-  },
-}
-
-export const Label = {
-  args: {
-    label: 'A',
-  },
-}
-
-export const RoundedSquare = {
-  args: {
-    shape: 'square',
-    image: 'https://randomuser.me/api/portraits/women/3.jpg',
-  },
-}
-
-export const WithIndicator = {
-  args: {
-    indicator: 'online',
-    image: 'https://randomuser.me/api/portraits/women/4.jpg',
-  },
-}
-
-export const IconViaDefaultSlot = {
-  args: {
-    default: 'user',
-  },
-}

package/src/components/Badge.stories.js

@@ -1,149 +0,0 @@
-import { h } from 'vue'
-import { Badge, FeatherIcon } from '../index'
-
-let ActivityIcon = {
-  render() {
-    return h(FeatherIcon, {
-      name: 'activity',
-      class: 'h-3',
-    })
-  },
-}
-
-let prefixSuffixOptions = {
-  options: ['None', '1', '100', 'Icon'],
-  mapping: {
-    None: null,
-    Icon: ActivityIcon,
-  },
-}
-
-export default {
-  component: Badge,
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Badge },
-    template: `<Badge v-bind="$props">
-        <template #prefix>
-            <template v-if="typeof $props.prefix == 'string'">{{ $props.prefix }}</template>
-            <component v-else :is="$props.prefix" />
-        </template>
-        <template #default>
-            <template v-if="typeof $props.default == 'string'">{{ $props.default }}</template>
-            <component v-else :is="$props.default" />
-        </template>
-        <template #suffix>
-            <template v-if="typeof $props.suffix == 'string'">{{ $props.suffix }}</template>
-            <component v-else :is="$props.suffix" />
-        </template>
-    </Badge>`,
-  }),
-  tags: ['autodocs'],
-  argTypes: {
-    prefix: prefixSuffixOptions,
-    suffix: prefixSuffixOptions,
-    default: {
-      control: 'text',
-    },
-    theme: {
-      options: ['gray', 'blue', 'green', 'orange', 'red'],
-      control: 'select',
-    },
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: 'select',
-    },
-    variant: {
-      options: ['solid', 'subtle', 'outline', 'ghost'],
-      control: 'select',
-    },
-  },
-  args: {
-    label: 'Gamma',
-    theme: 'gray',
-    size: 'md',
-    variant: 'solid',
-  },
-}
-
-export const Small = {
-  args: {
-    size: 'sm',
-  },
-}
-export const Medium = {
-  args: {
-    size: 'md',
-  },
-}
-export const Large = {
-  args: {
-    size: 'lg',
-  },
-}
-
-export const Gray = {
-  args: {
-    theme: 'gray',
-  },
-}
-
-export const Blue = {
-  args: {
-    theme: 'blue',
-  },
-}
-
-export const Green = {
-  args: {
-    theme: 'green',
-  },
-}
-
-export const Orange = {
-  args: {
-    theme: 'orange',
-  },
-}
-
-export const Red = {
-  args: {
-    theme: 'red',
-  },
-}
-
-export const Solid = {
-  args: {
-    variant: 'solid',
-  },
-}
-
-export const Subtle = {
-  args: {
-    variant: 'subtle',
-  },
-}
-
-export const Outline = {
-  args: {
-    variant: 'outline',
-  },
-}
-
-export const Ghost = {
-  args: {
-    variant: 'ghost',
-  },
-}
-
-export const Prefix = {
-  args: {
-    prefix: 'Icon',
-  },
-}
-
-export const Suffix = {
-  args: {
-    suffix: 'Icon',
-  },
-}

package/src/components/Button.stories.js

@@ -1,173 +0,0 @@
-import { h } from 'vue'
-import { Button, FeatherIcon } from '../index'
-
-let ActivityIcon = {
-  render() {
-    return h(FeatherIcon, {
-      name: 'activity',
-      class: 'h-3',
-    })
-  },
-}
-
-let prefixSuffixOptions = {
-  options: ['None', '1', '100', 'Icon'],
-  mapping: {
-    None: null,
-    Icon: ActivityIcon,
-  },
-}
-
-export default {
-  component: Button,
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Button },
-    template: `<Button v-bind="$props">
-        <template #prefix>
-            <template v-if="typeof $props.prefix == 'string'">{{ $props.prefix }}</template>
-            <component v-else :is="$props.prefix" />
-        </template>
-        <template #default>
-            <template v-if="typeof $props.default == 'string'">{{ $props.default }}</template>
-            <component v-else :is="$props.default" />
-        </template>
-        <template #suffix>
-            <template v-if="typeof $props.suffix == 'string'">{{ $props.suffix }}</template>
-            <component v-else :is="$props.suffix" />
-        </template>
-    </Button>`,
-  }),
-  tags: ['autodocs'],
-  argTypes: {
-    prefix: prefixSuffixOptions,
-    suffix: prefixSuffixOptions,
-    icon: {
-      options: ['None', 'edit', 'plus'],
-      mapping: {
-        None: null,
-      },
-    },
-    default: {
-      control: 'text',
-    },
-    theme: {
-      options: ['gray', 'blue', 'green'],
-      control: 'inline-radio',
-    },
-    size: {
-      options: ['sm', 'md', 'lg', 'xl', '2xl'],
-      control: 'inline-radio',
-    },
-    variant: {
-      options: ['solid', 'subtle', 'outline', 'ghost'],
-      control: 'inline-radio',
-    },
-  },
-  args: {
-    label: 'Discover',
-    theme: 'gray',
-    size: 'md',
-    variant: 'solid',
-  },
-}
-
-export const Small = {
-  args: {
-    size: 'sm',
-  },
-}
-export const Medium = {
-  args: {
-    size: 'md',
-  },
-}
-export const Large = {
-  args: {
-    size: 'lg',
-  },
-}
-
-export const ExtraLarge = {
-  args: {
-    size: 'xl',
-  },
-}
-
-export const ExtraExtraLarge = {
-  args: {
-    size: '2xl',
-  },
-}
-
-export const Gray = {
-  args: {
-    theme: 'gray',
-  },
-}
-
-export const Blue = {
-  args: {
-    theme: 'blue',
-  },
-}
-
-export const Green = {
-  args: {
-    theme: 'green',
-  },
-}
-
-export const Red = {
-  args: {
-    theme: 'red',
-  },
-}
-
-export const Solid = {
-  args: {
-    variant: 'solid',
-  },
-}
-
-export const Subtle = {
-  args: {
-    variant: 'subtle',
-  },
-}
-
-export const Outline = {
-  args: {
-    variant: 'outline',
-  },
-}
-
-export const Ghost = {
-  args: {
-    variant: 'ghost',
-  },
-}
-
-export const Loading = {
-  args: {
-    loading: true,
-  },
-}
-
-export const Prefix = {
-  args: {
-    prefix: 'Icon',
-  },
-}
-
-export const Suffix = {
-  args: {
-    suffix: 'Icon',
-  },
-}
-
-export const Icon = {
-  args: {
-    icon: 'edit-2',
-  },
-}

package/src/components/Divider.stories.ts

@@ -1,110 +0,0 @@
-import { Divider, Badge } from '../index'
-
-export default {
-  component: Divider,
-  tags: ['autodocs'],
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Divider },
-    template:
-      args.orientation == 'horizontal'
-        ? `<Divider class="min-w-[300px]" v-bind="$props"/>`
-        : `<Divider class="min-h-[100px]" v-bind="$props"/>`,
-  }),
-  argTypes: {
-    orientation: {
-      options: ['horizontal', 'vertical'],
-      control: { type: 'select' },
-    },
-    position: {
-      options: ['start', 'center', 'end'],
-      control: 'select',
-    },
-  },
-  args: {
-    orientation: 'horizontal',
-    position: 'center',
-    flexItem: false,
-  },
-}
-
-export const Horizontal = {
-  args: {
-    orientation: 'horizontal',
-  },
-}
-
-export const Vertical = {
-  args: {
-    orientation: 'vertical',
-  },
-}
-
-export const InFlexContainer = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Divider, Badge },
-    template: `
-      <div class="flex flex-row space-x-1">
-        <Badge variant="ghost" label="One" />
-        <Divider v-bind="$props" />
-        <Badge variant="ghost" label="Two" />
-        <Divider v-bind="$props" />
-        <Badge variant="ghost" label="Three" />
-      </div>
-    `,
-  }),
-  args: {
-    orientation: 'vertical',
-    flexItem: true,
-  },
-}
-
-export const HorizontalWithAction = {
-  args: {
-    action: {
-      label: 'Load More',
-      handler: () => {},
-    },
-  },
-}
-
-export const WithActionLoading = {
-  args: {
-    action: {
-      label: 'Loading More',
-      handler: () => {},
-      loading: true,
-    },
-  },
-}
-
-export const WithActionAtStart = {
-  args: {
-    position: 'start',
-    action: {
-      label: 'Load More',
-      handler: () => {},
-    },
-  },
-}
-
-export const WithActionAtEnd = {
-  args: {
-    position: 'end',
-    action: {
-      label: 'Load More',
-      handler: () => {},
-    },
-  },
-}
-
-export const VerticalWithAction = {
-  args: {
-    orientation: 'vertical',
-    action: {
-      label: 'Load More',
-      handler: () => {},
-    },
-  },
-}

package/src/components/Dropdown.stories.ts

@@ -1,73 +0,0 @@
-import { Dropdown, Button, FeatherIcon } from '../index'
-
-function getStory(code) {
-  return {
-    render: (args, { argTypes }) => ({
-      props: ['style'],
-      components: { Dropdown, FeatherIcon, Button },
-      template: code,
-    }),
-    parameters: {
-      docs: {
-        source: {
-          code,
-        },
-      },
-    },
-  }
-}
-
-export default {
-  component: Dropdown,
-  tags: ['autodocs'],
-}
-
-export const Basic = {
-  ...getStory(`<Dropdown
-    :options="[
-        { label: 'Edit Title', onClick: () => alert('Edit Title'), icon: 'edit' },
-        { label: 'Manage Members', onClick: () => alert('Manage Members'), icon: 'users' },
-        { label: 'Delete this project', onClick: () => alert('Delete this project'), icon: 'trash' },
-    ]"
-/>`),
-}
-
-export const WithButtonProp = {
-  ...getStory(`<Dropdown
-    :options="[
-        { label: 'Edit Title', onClick: () => alert('Edit Title'), icon: 'edit' },
-        { label: 'Manage Members', onClick: () => alert('Manage Members'), icon: 'users' },
-        { label: 'Delete this project', onClick: () => alert('Delete this project'), icon: 'trash' },
-    ]"
-    :button="{
-      label: 'Actions',
-    }"
-/>`),
-}
-
-export const WithCustomButtonAndGroups = {
-  ...getStory(`<Dropdown
-    :options="[
-        {
-            group: 'Manage',
-            items: [
-                { label: 'Edit Title', onClick: () => alert('Edit Title'), icon: 'edit' },
-                { label: 'Manage Members', onClick: () => alert('Manage Members'), icon: 'users' },
-            ]
-        },
-        {
-            group: 'Delete',
-            items: [
-                { label: 'Delete users', onClick: () => alert('Delete users'), icon: 'edit' },
-                { label: 'Delete this project', onClick: () => alert('Delete this project'), icon: 'trash' },
-            ]
-        }
-    ]"
->
-    <Button>
-        <template #icon>
-            <FeatherIcon name="more-horizontal" class="w-4 h-4" />
-        </template>
-    </Button>
-</Dropdown>`),
-}

package/src/components/Progress.stories.js

@@ -1,80 +0,0 @@
-import { Progress } from '../index'
-
-export default {
-  component: Progress,
-  tags: ['autodocs'],
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Progress },
-    template: `<Progress v-bind="$props"/>`,
-  }),
-  argTypes: {
-    value: {
-      control: { type: 'number' },
-    },
-    size: {
-      options: ['sm', 'md', 'lg', 'xl'],
-      control: { type: 'select' },
-    },
-  },
-  args: {
-    value: 32,
-    size: 'md',
-    label: 'Progress',
-    hint: true,
-  },
-}
-
-export const Small = {
-  args: {
-    size: 'sm',
-  },
-}
-
-export const Medium = {
-  args: {
-    size: 'md',
-  },
-}
-
-export const Large = {
-  args: {
-    size: 'lg',
-  },
-}
-
-export const ExtraLarge = {
-  args: {
-    size: 'xl',
-  },
-}
-
-export const WithOnlyLabel = {
-  args: {
-    label: 'Progress',
-    hint: false,
-  },
-}
-
-export const WithOnlyHint = {
-  args: {
-    hint: true,
-    label: null,
-  },
-}
-
-export const WithHintAndLabel = {
-  args: {
-    hint: true,
-    label: 'Progress',
-  },
-}
-
-export const WithIntervals = {
-  args: {
-    value: 50,
-    hint: true,
-    label: 'Progress',
-    intervals: true,
-  },
-}

package/src/components/Spinner.stories.ts

@@ -1,13 +0,0 @@
-import { Spinner } from '../index'
-
-export default {
-  component: Spinner,
-  tags: ['autodocs'],
-  render: (args, { argTypes }) => ({
-    props: ['style'],
-    components: { Spinner },
-    template: `<Spinner v-bind="$props" class="w-10" />`,
-  }),
-}
-
-export const Normal = {}

package/src/components/Switch.stories.js

@@ -1,52 +0,0 @@
-import { Switch } from '../index'
-
-export default {
-  component: Switch,
-  tags: ['autodocs'],
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Switch },
-    template: `<Switch v-bind="$props"/>`,
-  }),
-  argTypes: {
-    size: {
-      options: ['sm', 'md'],
-      control: { type: 'select' },
-    },
-  },
-  args: {
-    size: 'sm',
-  },
-}
-
-export const Small = {
-  args: {
-    size: 'sm',
-  },
-}
-
-export const Medium = {
-  args: {
-    size: 'md',
-  },
-}
-
-export const Disabled = {
-  args: {
-    disabled: true,
-  },
-}
-
-export const WithLabel = {
-  args: {
-    label: 'Switch Off',
-  },
-}
-
-export const WithLabelAndDescription = {
-  args: {
-    label: 'Switch Off',
-    description:
-      'Used when the checkbox is selected and will use its value for the form submission.',
-  },
-}

package/src/components/TextInput.stories.ts

@@ -1,143 +0,0 @@
-import { h } from 'vue'
-import { FeatherIcon, TextInput } from '../index'
-import AvatarVue from './Avatar.vue'
-
-let ActivityIcon = {
-  render() {
-    return h(FeatherIcon, {
-      name: 'activity',
-      class: 'h-4',
-    })
-  },
-}
-
-let Avatar = {
-  render() {
-    return h(AvatarVue, {
-      src: 'https://randomuser.me/api/portraits/women/2.jpg',
-      size: 'xs',
-    })
-  },
-}
-
-let prefixSuffixOptions = {
-  options: ['None', '1', '100', 'Icon', 'Avatar'],
-  mapping: {
-    None: null,
-    Icon: ActivityIcon,
-    Avatar: Avatar,
-  },
-}
-
-export default {
-  component: TextInput,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      options: [
-        'date',
-        'datetime-local',
-        'email',
-        'file',
-        'month',
-        'number',
-        'password',
-        'search',
-        'tel',
-        'text',
-        'time',
-        'url',
-        'week',
-      ],
-      control: { type: 'select' },
-    },
-    size: {
-      options: ['sm', 'md', 'lg', 'xl'],
-      control: { type: 'inline-radio' },
-    },
-    variant: {
-      options: ['subtle', 'outline'],
-      control: { type: 'inline-radio' },
-    },
-    disabled: 'boolean',
-    prefix: prefixSuffixOptions,
-    suffix: prefixSuffixOptions,
-  },
-  args: {
-    size: 'sm',
-    variant: 'subtle',
-    placeholder: 'Type something...',
-  },
-}
-
-export const Normal = {
-  args: {
-    type: 'text',
-  },
-}
-
-export const WithPrefixIcon = {
-  args: {
-    prefix: 'Icon',
-  },
-  render: function (args, { argTypes }) {
-    return {
-      props: Object.keys(argTypes),
-      components: { TextInput },
-      template: `<TextInput v-bind="$props">
-            <template #prefix>
-                <template v-if="typeof $props.prefix == 'string'">{{ $props.prefix }}</template>
-                <component v-else-if="$props.prefix" :is="$props.prefix" />
-            </template>
-        </TextInput>`,
-    }
-  },
-}
-
-export const WithSuffixIcon = {
-  args: {
-    suffix: 'Icon',
-  },
-  render: function (args, { argTypes }) {
-    return {
-      props: Object.keys(argTypes),
-      components: { TextInput },
-      template: `<TextInput v-bind="$props">
-            <template #suffix>
-                <template v-if="typeof $props.suffix == 'string'">{{ $props.suffix }}</template>
-                <component v-else-if="$props.suffix" :is="$props.suffix" />
-            </template>
-        </TextInput>`,
-    }
-  },
-}
-
-export const WithPrefixAvatar = {
-  args: {
-    prefix: 'Avatar',
-  },
-  render: WithPrefixIcon.render,
-}
-
-export const WithPrefixAndSuffixIcon = {
-  args: {
-    prefix: 'Icon',
-    suffix: 'Icon',
-  },
-  render: function (args, { argTypes }) {
-    return {
-      props: Object.keys(argTypes),
-      components: { TextInput },
-      template: `<TextInput v-bind="$props">
-            <template #prefix>
-                <template v-if="typeof $props.prefix == 'string'">{{ $props.prefix }}</template>
-                <component v-else-if="$props.prefix" :is="$props.prefix" />
-            </template>
-            <template #suffix>
-                <template v-if="typeof $props.suffix == 'string'">{{ $props.suffix }}</template>
-                <component v-else-if="$props.suffix" :is="$props.suffix" />
-            </template>
-        </TextInput>`,
-    }
-  },
-}

package/src/tokens/Color.vue

@@ -1,194 +0,0 @@
-<template>
-  <div class="mb-4 space-y-2" v-for="color in colors">
-    <div class="text-base">{{ color }}</div>
-    <div class="flex space-x-1">
-      <div
-        v-for="shade in [
-          '50',
-          '100',
-          '200',
-          '300',
-          '400',
-          '500',
-          '600',
-          '700',
-          '800',
-          '900',
-        ]"
-        class="h-8 w-8 rounded-md"
-        :class="colorShades[color][shade]"
-      ></div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'Color',
-  computed: {
-    colors() {
-      return [
-        'gray',
-        'blue',
-        'green',
-        'red',
-        'orange',
-        'yellow',
-        'teal',
-        'violet',
-        'cyan',
-        'amber',
-        'pink',
-        'purple',
-      ]
-    },
-    colorShades() {
-      return {
-        gray: {
-          50: 'bg-gray-50',
-          100: 'bg-gray-100',
-          200: 'bg-gray-200',
-          300: 'bg-gray-300',
-          400: 'bg-gray-400',
-          500: 'bg-gray-500',
-          600: 'bg-gray-600',
-          700: 'bg-gray-700',
-          800: 'bg-gray-800',
-          900: 'bg-gray-900',
-        },
-        blue: {
-          50: 'bg-blue-50',
-          100: 'bg-blue-100',
-          200: 'bg-blue-200',
-          300: 'bg-blue-300',
-          400: 'bg-blue-400',
-          500: 'bg-blue-500',
-          600: 'bg-blue-600',
-          700: 'bg-blue-700',
-          800: 'bg-blue-800',
-          900: 'bg-blue-900',
-        },
-        green: {
-          50: 'bg-green-50',
-          100: 'bg-green-100',
-          200: 'bg-green-200',
-          300: 'bg-green-300',
-          400: 'bg-green-400',
-          500: 'bg-green-500',
-          600: 'bg-green-600',
-          700: 'bg-green-700',
-          800: 'bg-green-800',
-          900: 'bg-green-900',
-        },
-        red: {
-          50: 'bg-red-50',
-          100: 'bg-red-100',
-          200: 'bg-red-200',
-          300: 'bg-red-300',
-          400: 'bg-red-400',
-          500: 'bg-red-500',
-          600: 'bg-red-600',
-          700: 'bg-red-700',
-          800: 'bg-red-800',
-          900: 'bg-red-900',
-        },
-        orange: {
-          50: 'bg-orange-50',
-          100: 'bg-orange-100',
-          200: 'bg-orange-200',
-          300: 'bg-orange-300',
-          400: 'bg-orange-400',
-          500: 'bg-orange-500',
-          600: 'bg-orange-600',
-          700: 'bg-orange-700',
-          800: 'bg-orange-800',
-          900: 'bg-orange-900',
-        },
-        yellow: {
-          50: 'bg-yellow-50',
-          100: 'bg-yellow-100',
-          200: 'bg-yellow-200',
-          300: 'bg-yellow-300',
-          400: 'bg-yellow-400',
-          500: 'bg-yellow-500',
-          600: 'bg-yellow-600',
-          700: 'bg-yellow-700',
-          800: 'bg-yellow-800',
-          900: 'bg-yellow-900',
-        },
-        teal: {
-          50: 'bg-teal-50',
-          100: 'bg-teal-100',
-          200: 'bg-teal-200',
-          300: 'bg-teal-300',
-          400: 'bg-teal-400',
-          500: 'bg-teal-500',
-          600: 'bg-teal-600',
-          700: 'bg-teal-700',
-          800: 'bg-teal-800',
-          900: 'bg-teal-900',
-        },
-        violet: {
-          50: 'bg-violet-50',
-          100: 'bg-violet-100',
-          200: 'bg-violet-200',
-          300: 'bg-violet-300',
-          400: 'bg-violet-400',
-          500: 'bg-violet-500',
-          600: 'bg-violet-600',
-          700: 'bg-violet-700',
-          800: 'bg-violet-800',
-          900: 'bg-violet-900',
-        },
-        cyan: {
-          50: 'bg-cyan-50',
-          100: 'bg-cyan-100',
-          200: 'bg-cyan-200',
-          300: 'bg-cyan-300',
-          400: 'bg-cyan-400',
-          500: 'bg-cyan-500',
-          600: 'bg-cyan-600',
-          700: 'bg-cyan-700',
-          800: 'bg-cyan-800',
-          900: 'bg-cyan-900',
-        },
-        amber: {
-          50: 'bg-amber-50',
-          100: 'bg-amber-100',
-          200: 'bg-amber-200',
-          300: 'bg-amber-300',
-          400: 'bg-amber-400',
-          500: 'bg-amber-500',
-          600: 'bg-amber-600',
-          700: 'bg-amber-700',
-          800: 'bg-amber-800',
-          900: 'bg-amber-900',
-        },
-        pink: {
-          50: 'bg-pink-50',
-          100: 'bg-pink-100',
-          200: 'bg-pink-200',
-          300: 'bg-pink-300',
-          400: 'bg-pink-400',
-          500: 'bg-pink-500',
-          600: 'bg-pink-600',
-          700: 'bg-pink-700',
-          800: 'bg-pink-800',
-          900: 'bg-pink-900',
-        },
-        purple: {
-          50: 'bg-purple-50',
-          100: 'bg-purple-100',
-          200: 'bg-purple-200',
-          300: 'bg-purple-300',
-          400: 'bg-purple-400',
-          500: 'bg-purple-500',
-          600: 'bg-purple-600',
-          700: 'bg-purple-700',
-          800: 'bg-purple-800',
-          900: 'bg-purple-900',
-        },
-      }
-    },
-  },
-}
-</script>

package/src/utils/tailwind.config.stories.js

@@ -1,8 +0,0 @@
-import Color from '../tokens/Color.vue'
-
-export default {
-  title: 'Tokens/Color',
-  component: Color,
-}
-
-export const Colors = {}