@teiler/svelte 0.0.3 → 0.0.5

package/src/index.ts

@@ -1,17 +1,13 @@
-import type { Expression, Style, TeilerComponent, Compile, Target } from '@teiler/core'
+import type { Compile, Properties, Style, Target, TeilerComponent } from '@teiler/core'
+import type { ComponentType, SvelteComponent } from 'svelte'
 
-import styled, { component, global } from '@teiler/core'
-import type { SvelteComponent, ComponentType } from 'svelte'
+import { component, global, keyframes, styled } from '@teiler/core'
 import Styled from './Styled.svelte'
 import tags from './tags'
 
 type SvelteTeilerComponent<Target, Props> = TeilerComponent<Target, Props> & ComponentType<SvelteComponent>
 
-let componentsIds = 0
 const createComponent = <Target, Props>(compile: Compile, tag: Target, styles: Array<Style<Props>>): SvelteTeilerComponent<Target, Props> => {
-  const componentId = componentsIds++;
-  console.log('create component', componentId)
-  
   return class extends Styled {
     static styles = styles
     static tag = tag
@@ -34,16 +30,20 @@ type InferProps<Component, Props> = Component extends SvelteTeilerComponent<Targ
 type InferComponent<Component, Props> = Component extends SvelteTeilerComponent<infer E, infer P> ? SvelteTeilerComponent<E, Props & P> : SvelteTeilerComponent<Target, Props>
 
 type Component<Target> = {
-  <Props extends object = {}>(string: TemplateStringsArray, ...expressions: Expression<Props>[]): SvelteTeilerComponent<Target, Props>
-  <Component>(binded: Component): <Props extends object = {}>(string: TemplateStringsArray, ...expressions: Expression<InferProps<Component, Props>>[]) => InferComponent<Component, Props>
+  <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<Target, Props>
+  <Component>(binded: Component): <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<InferProps<Component, Props>>[]) => InferComponent<Component, Props>
+}
+
+type Global = {
+  <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<unknown, Props>
 }
 
 type ComponentWithTags = Component<'div'> & { [K in (typeof tags)[number]]: Component<K> }
 
 const construct = (tag: string, compile: Compile) => {
-  return <Props extends object = {}>(stringOrBinded: TeilerComponent<Target, Props> | TemplateStringsArray, ...expressions: Expression<Props>[]) => {
+  return <Props extends object = {}>(stringOrBinded: TeilerComponent<Target, Props> | TemplateStringsArray, ...properties: Properties<Props>[]) => {
     const binded = createComponent.bind(null, compile, (stringOrBinded as TeilerComponent<Target, Props>).tag || tag)
-    return styled<Props, SvelteTeilerComponent<Target, Props>>(binded, stringOrBinded, ...expressions)
+    return styled<Props, SvelteTeilerComponent<Target, Props>>(binded, stringOrBinded, ...properties)
   }
 }
 
@@ -53,7 +53,7 @@ tags.forEach((tag) => {
   svelteComponent[tag] = construct(tag, component)
 })
 
-const svelteGlobal = construct(null, global)
+const svelteGlobal = construct(null, global) as Global
 
-export { svelteGlobal as global, createComponent }
+export { svelteGlobal as global, keyframes, createComponent }
 export default svelteComponent as ComponentWithTags

package/src/sheet.ts

@@ -1,4 +1,4 @@
-import { createStyleSheet, type Sheet } from "@teiler/core";
+import { type Sheet, createStyleSheet } from "@teiler/core";
 import { getContext } from "svelte";
 
 export const styleSheet = createStyleSheet({})

package/.storybook/main.ts

@@ -1,21 +0,0 @@
-import type { StorybookConfig } from '@storybook/svelte-vite';
-
-const config: StorybookConfig = {
-  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx|svelte)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf', '@storybook/addon-interactions', '@storybook/addon-mdx-gfm'],
-  features: {
-    buildStoriesJson: true
-  },
-  typescript: {
-    check: false,
-  },
-  framework: '@storybook/svelte-vite',
-  docs: {
-    autodocs: true
-  },
-  async viteFinal(config, options) {
-    return config
-  },
-};
-
-export default config

package/.storybook/preview.js

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

package/.turbo/turbo-storybook.log

@@ -1,59 +0,0 @@
-@storybook/cli v7.0.23
-
-WARN The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version.
-WARN It's recommended you read this document:
-WARN https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
-WARN 
-WARN Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.
-info => Starting manager..
-╭─────────────────────────────────────────────────────────────────────╮
-│                                                                     │
-│   Storybook 7.0.23 for svelte-vite started                          │
-│   4.62 s for manager and 2.09 s for preview                         │
-│                                                                     │
-│   Local:            http://localhost:6006/                          │
-│   On your network:  http://192.168.2.2:6006/                        │
-│                                                                     │
-│   A new version (7.0.26) is available!                              │
-│                                                                     │
-│   Upgrade now: npx storybook@latest upgrade                         │
-│                                                                     │
-│   Read full changelog:                                              │
-│   https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md   │
-│                                                                     │
-╰─────────────────────────────────────────────────────────────────────╯
-6:30:09 AM [vite] hmr update /stories/Palette.svelte
-6:30:28 AM [vite] hmr update /stories/Palette.svelte
-6:30:34 AM [vite] hmr update /stories/Palette.svelte
-6:30:44 AM [vite] hmr update /stories/Palette.svelte
-6:30:51 AM [vite] hmr update /stories/Palette.svelte
-6:30:58 AM [vite] hmr update /stories/Palette.svelte
-6:31:07 AM [vite] hmr update /stories/Palette.svelte
-6:32:12 AM [vite] hmr update /stories/Palette.svelte
-6:32:14 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-6:32:30 AM [vite] hmr update /stories/Palette.svelte
-6:32:32 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-6:33:09 AM [vite] hmr update /stories/Palette.svelte
-6:33:11 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-6:33:38 AM [vite] hmr update /stories/Palette.svelte
-6:33:40 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-6:56:14 AM [vite] hmr update /stories/Palette.svelte
-6:56:17 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-6:57:35 AM [vite] hmr update /stories/Palette.svelte
-6:57:37 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-7:02:16 AM [vite] hmr update /stories/Palette.svelte
-7:02:18 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-7:11:45 AM [vite] hmr update /stories/Palette.svelte
-7:11:48 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-7:12:01 AM [vite] hmr update /stories/Palette.svelte
-7:12:03 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-7:12:14 AM [vite] hmr update /stories/Palette.svelte
-7:12:15 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-7:13:14 AM [vite] hmr update /stories/Palette.svelte
-7:13:16 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-7:14:39 AM [vite] hmr update /stories/Palette.svelte
-7:14:41 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-7:14:45 AM [vite] hmr update /stories/Palette.svelte
-7:14:47 AM [vite] hmr update /stories/Palette.svelte, /stories/Buttons.svelte
-7:17:50 AM [vite] hmr update /stories/Palette.svelte
-7:17:52 AM [vite] hmr

package/rollup.config.js

@@ -1,80 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import json from '@rollup/plugin-json'
-import svelte from 'rollup-plugin-svelte'
-import sveltePreprocess from 'svelte-preprocess'
-import esbuild from 'rollup-plugin-esbuild'
-import dts from 'rollup-plugin-dts'
-import { transformSync } from 'esbuild'
-
-import { terser } from 'rollup-plugin-terser'
-
-const globals = {
-  'svelte/internal': 'svelte/internal',
-  svelte: 'svelte',
-}
-
-const defaultPlugins = [
-  commonjs(),
-  nodeResolve({ resolveOnly: [/^(?!svelte.*$)/] }),
-  json(),
-  esbuild.default({ sourceMap: true }),
-  svelte({
-    emitCss: false,
-    compilerOptions: {
-      // dev: production === false,
-      sourcemap: true,
-      // generate: 'ssr',
-    },
-    preprocess: sveltePreprocess({
-      typescript({ content }) {
-        const { code, map } = transformSync(content, {
-          loader: 'ts',
-          tsconfigRaw: {
-            compilerOptions: {
-              importsNotUsedAsValues: 'error',
-              preserveValueImports: true,
-            },
-          },
-        })
-        return { code, map }
-      },
-    }),
-  }),
-]
-
-export default [
-  {
-    input: 'src/index.ts',
-    output: [
-      {
-        file: 'dist/teiler-svelte.umd.js',
-        name: 'teiler-svelte',
-        format: 'umd',
-        sourcemap: true,
-        globals,
-      },
-      {
-        file: 'dist/teiler-svelte.cjs.js',
-        format: 'cjs',
-        sourcemap: true,
-        globals,
-      },
-      {
-        file: 'dist/teiler-svelte.esm.js',
-        format: 'esm',
-        sourcemap: true,
-        globals,
-      },
-    ],
-    plugins: [...defaultPlugins, terser()],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      file: `dist/teiler-svelte.d.ts`,
-      format: 'es',
-    },
-    plugins: [...defaultPlugins, dts.default()],
-  },
-]

package/stories/Buttons.stories.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-  import Buttons from "./Buttons.svelte";
-</script>
-
-<Meta
-  title="Svelte/Button"
-  component={Buttons}
-  argTypes={{
-    label: { control: "text" },
-    _primary: { control: "boolean" },
-    _primaryColor: { control: "color" },
-    _size: {
-      control: { type: "select", options: ["small", "medium", "large"] },
-    },
-    onClick: { action: "onClick" },
-  }}
-/>
-
-<Template let:args>
-  <Buttons {...args} on:click={args.onClick} />
-</Template>
-
-<Story
-  name="Primary"
-  args={{
-    _primary: true,
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Secondary"
-  args={{
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Small"
-  args={{
-    _size: "small",
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Disabled"
-  args={{
-    disabled: true,
-    label: "Button",
-  }}
-/>

package/stories/Buttons.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { Button, ExtendedButton } from './buttons'
-
-  // import teiler from '@teiler/svelte'
-  import { createEventDispatcher } from 'svelte'
-
-  export let _primary = false
-  export let _primaryColor = "#f18805"
-
-  export let _size: 'normal' | 'small' = 'normal'
-
-  export let label = ''
-
-  export let disabled
-
-  const dispatch = createEventDispatcher()
-
-  /**
-   * Optional click handler
-   */
-  function onClick(event) {
-    dispatch('click', event)
-  }
-</script>
-
-<Button {_primary} {_size} {_primaryColor} {disabled} on:click={onClick}>
-  {label}
-</Button>
-<ExtendedButton {_primary} {_size} {_primaryColor}>Test</ExtendedButton>

package/stories/Introduction.stories.mdx

@@ -1,197 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Example/Introduction" />
-
-<style>
-  {`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-  `}
-</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>

package/stories/Palette.stories.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-  import Palette from "./Palette.svelte";
-</script>
-
-<Meta
-  title="Svelte/Palette"
-  component={Palette}
-  argTypes={{
-    label: { control: "text" },
-    _primary: { control: "boolean" },
-    _primaryColor: { control: "color" },
-    _size: {
-      control: { type: "select", options: ["small", "medium", "large"] },
-    },
-    onClick: { action: "onClick" },
-  }}
-/>
-
-<Template let:args>
-  <Palette {...args} on:click={args.onClick} />
-</Template>
-
-<Story
-  name="Primary"
-  args={{
-    _primary: true,
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Secondary"
-  args={{
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Small"
-  args={{
-    _size: "small",
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Disabled"
-  args={{
-    disabled: true,
-    label: "Button",
-  }}
-/>

package/stories/Palette.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { Button, ExtendedButton} from './palette'
-
-  // import teiler from '@teiler/svelte'
-  import { createEventDispatcher } from 'svelte'
-
-  export let _primary = false
-  export let _primaryColor = "#f18805"
-
-  export let _size: 'normal' | 'small' = 'normal'
-
-  export let label = ''
-
-  export let disabled
-
-  const dispatch = createEventDispatcher()
-
-  /**
-   * Optional click handler
-   */
-  function onClick(event) {
-    dispatch('click', event)
-  }
-</script>
-
-<Button {_primary} {_size} {_primaryColor} {disabled} on:click={onClick}>
-  {label}
-</Button>
-<ExtendedButton {_primary} {_size} {_primaryColor}>Test</ExtendedButton>

package/stories/buttons.ts

@@ -1,69 +0,0 @@
-import component from '@teiler/svelte'
-
-const Button = component.button<{
-  _primary: boolean
-  _size: 'normal' | 'small'
-  _primaryColor: string
-}>`
-  border-radius: 4px;
-  box-shadow: none;
-  display: inline-block;
-  padding: 0.5rem 1.6rem;
-  text-align: center;
-  font-size: 0.8rem;
-  line-height: 1.5rem;
-  background: transparent;
-  box-shadow: 0 0 0 3px #CBCBCB inset;
-  border: 0;
-  color: #0f121a;
-  appearance: none;
-  cursor: pointer;
-  font-weight: 700;
-  font-family: Roboto;
-
-  &:hover {
-    text-decoration: none;
-    color: #fcfbff;
-    background: ${({ _primaryColor }) => _primaryColor};
-    box-shadow: 0 0 0 3px ${({ _primaryColor }) => _primaryColor} inset;
-  }
-
-  ${({ _primary, _primaryColor }) =>
-    _primary &&
-    `
-      color: #fff;
-      box-shadow: none;
-      background: ${_primaryColor};
-
-      &:hover {
-        opacity: 0.9;
-      }
-    `}
-
-  ${({ _size }) =>
-    _size === 'small' &&
-    `
-    font-size: 0.81rem;
-    padding: 0.3rem 1.2rem;
-    min-width: auto;
-  `}
-
-  &[disabled] {
-    background-image: none !important;
-    background-color: #C0C0C0 !important;
-    box-shadow: 0 0 0 3px #C0C0C0 inset !important;
-    color: #fff !important;
-    cursor: not-allowed;
-  }
-`
-
-const ExtendedButton = component(Button)<{ test?: boolean }>`
-  font-weight: 300;
-  background: red;
-
-  ${(props) => `
-    color: ${props.test ? 'red' : 'blue'};
-  `}
-`
-
-export { Button, ExtendedButton }