feat: initial setup

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+storybook-static/
+.yarn/install-state.gz
+.yarn/unplugged/

.gitpod.yml

@@ -0,0 +1,10 @@
+tasks:
+  - command: |
+      yarn
+      time yarn build
+      yarn start
+
+ports:
+  - port: 6001
+    visibility: public
+    onOpen: open-preview

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  staticDirs: ['../public', '../dist'],
+  async viteFinal(config, { configType }) {
+    // Be sure to return the customized config
+    return mergeConfig(config, {
+      // Customize the Vite config for Storybook
+      resolve: {
+        alias: { foo: 'bar' },
+      },
+    });
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<script src="/dist/index.js" type="module"></script>
+<link rel="stylesheet" href="/dist/global.css" />

.storybook/preview.ts

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/web-components';
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        order: [
+          'Getting Started',
+          'Documentation',
+          'Design Tokens',
+          'Media',
+          'Navigation',
+          'Content',
+          'Templates',
+          'Pages',
+          'Code Examples',
+          'Utility Components',
+        ],
+      },
+    },
+  },
+};
+
+export default preview;

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

README.md

@@ -0,0 +1,39 @@
+# Outline Storybook Starter-kit
+
+This starter kit provides a comprehensive setup for developing web components using Outline, Storybook, and TypeScript. It aims to streamline the development and testing process by leveraging the power of Storybook for component visualization and testing.
+
+## Tools Utilized
+
+- **Outline**: Tooling infrastructure for modern web component development. [Outline GitHub](https://github.com/phase2/outline)
+- **Storybook**: Development environment for UI components. [Storybook Docs](https://storybook.js.org/docs/web-components/introduction)
+- **TypeScript**: Statically typed superset of JavaScript. [TypeScript Website](https://www.typescriptlang.org/)
+- **PostCSS**: CSS preprocessor for transforming styles with JavaScript. [PostCSS Website](https://postcss.org/)
+- **Vite**: Next-generation frontend build tool. [Vite Docs](https://vitejs.dev/)
+
+## Getting Started
+
+To begin using this starter kit, follow these steps:
+
+1. Clone this `storybook` starter kit.
+   - Inside a separate repository
+   - Nested in another application
+2. Install dependencies with `yarn install`.
+3. Start the development server with `yarn dev`.
+
+## Scripts
+
+- `yarn start`: Alias for `yarn dev`.
+- `yarn dev`: Alias for `yarn watch`.
+- `yarn watch`: Concurrently runs all watch scripts.
+- `yarn watch:bundle`: Watches Vite build.
+- `yarn watch:vite`: Starts Vite development server.
+- `yarn watch:storybook`: Starts Storybook development server.
+- `yarn build`: Concurrently runs all build scripts.
+- `yarn build:vite`: Builds project using Vite.
+- `yarn build:storybook`: Builds Storybook for production.
+- `yarn clean`: Concurrently runs all clean scripts.
+- `yarn clean:dist`: Removes the dist directory.
+- `yarn clean:storybook`: Removes the storybook-static directory.
+- `yarn clean:modules`: Removes the node_modules directory.
+- `yarn reset`: Cleans and reinstalls dependencies.
+- `yarn restart`: Resets and starts the development server.

commitlint.config.js

@@ -0,0 +1,31 @@
+/**
+ * This configuration file for commitlint extends the default configuration
+ * provided by '@phase2/outline-config/commitlint.config'.
+ *
+ * The process of extending the configuration works in two steps:
+ *
+ * 1. Creating a Baseline Default:
+ *    The default configuration is a set of rules defined in
+ *    '@phase2/outline-config/commitlint.config'. These rules provide a
+ *    baseline standard for commit messages, ensuring consistency and
+ *    readability across all commits.
+ *
+ * 2. Allowing Project-Specific Alterations:
+ *    By extending the default configuration in this file, we allow for
+ *    project-specific alterations. This means that while the baseline rules
+ *    are followed, there is flexibility for the project to define its own
+ *    rules or override the default ones. This is done by adding or modifying
+ *    rules in this file.
+ *
+ * If a project decides it doesn't need the default configuration, it can
+ * completely overwrite it by not extending '@phase2/outline-config/commitlint.config'
+ * and defining its own rules from scratch.
+ *
+ * The use of the spread operator (...) before 'defaultConfig' ensures that
+ * the rules from the default configuration are correctly imported and
+ * applied in this file.
+ */
+const defaultConfig = require(`@phase2/outline-config/commitlint.config`);
+module.exports = {
+  ...defaultConfig,
+};

index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Component Test Page</title>
+  <!-- <script src="/src/index.ts" type="module"></script> -->
+  <script src="/dist/index.js" type="module"></script>
+  <!--
+    To include the necessary assets for testing, you have several options:
+
+    1. Full Production Bundle: This is the entire application bundled together.
+       You can include it by uncommenting the following line:
+       <script src="dist/index.js" type="module"></script>
+
+    2. Individual Components: If you want to test specific components, you can
+       import them individually. You'll need to know the path to the component
+       file in the 'dist' directory. For example:
+       <script src="dist/components/your-component.js" type="module"></script>
+       <script src="/src/components/your-component.ts" type="module"></script>
+
+    3. Standard Includes: These are common files that are often needed in the
+       head tag. For example, a global stylesheet is included in this file:
+       <link rel="stylesheet" href="public/global.css" />
+
+    Remember to replace 'your-component' with the name of the component you want
+    to test. Also, ensure the paths to the files are correct relative to this
+    HTML file.
+  -->
+  <!-- <script src="dist/index.mjs" type="module"></script> -->
+  <link rel="stylesheet" href="/global.css" />
+</head>
+
+<body>
+  <h1>outline-yext</h1>
+  <outline-yext></outline-yext>
+</body>
+
+</html>

outline.config.js

@@ -0,0 +1,38 @@
+const destBasePath = 'dist';
+
+const config = {
+  destBasePath,
+  assets: {
+    dir: ['src/assets'],
+    sync: ['dist', 'src/.storybook/static/dist'],
+  },
+  css: {
+    global: [
+      {
+        src: '/public/global.css',
+        dest: `${destBasePath}/global.css`,
+      },
+      // {
+      //   src: 'src/tailwind.css',
+      //   dest: `${destBasePath}/tailwind.css`,
+      // },
+    ],
+  },
+  js: {
+    output: {
+      lazy: false,
+      eager: false,
+      full: true,
+      data: false,
+    },
+  },
+  youtube: {
+    defaultVideo: 'xiqgG8HUZXE',
+  },
+  vimeo: {
+    defaultVideo: '432639001',
+  },
+  excludedStories: [],
+};
+
+export default config;