.gitignore

@@ -1,3 +1,24 @@
-/node_modules/
-/build
-.npmrc
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.storybook/main.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  core: {
+    builder: "@storybook/builder-vite", // 👈 The builder enabled here.
+  },
+  framework: "@storybook/react",
+  async viteFinal(config) {
+    return {
+      ...config,
+      define: {
+        ...config.define,
+        global: "window",
+      },
+      // esbuild: {
+      //   ...config.esbuild,
+      //   jsxInject: `import React from 'react'`,
+      // },
+    };
+  },
+};

.storybook/preview.cjs

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

README.md

@@ -1,181 +1,42 @@
-# Aerian Component Library
+# Aerated - Component Library
 
-# Installation
+## Installation
 
+TODO This is coming while we decide how best to manage versioning. See below for local development.
+
+<!--
 ```bash
-npm install --save @aerian-studios/aerian-component-library@0.0.1
+npm install --save @aerian-studios/aerated@0.0.1
 # or
-yarn add @aerian-studios/aerian-component-library@0.0.1
-```
-
-# Usage
-
-# Form
-
-The `Form` component is an implimentation of `react-hook-form`. 
-The component has 2 required props `onSubmitFn` and `validationSchema`.
-
-- onSubmitFn:
-  - Is called when the form is submitted and passed data from the form. Data is passed to the function as an object where each key is the `name` of the form elements that are passed as children to `Form` (see adding children)
-- validationSchema:
-  - Uses the `yup` schema builder library to validate inputs to the form. `yup` needs to be installed and imported separately. The schema can be passed to `Form` as a plain object, as it is wrapped internally with `yup.object().shape()`
-
-## Full example
-
-```tsx
-import { 
-    Form, 
-    FormContents, 
-    FormControls, 
-    FormInput, 
-    FormInputGroup, 
-    FormSelect 
-} from 'aerian-component-library';
-import * as yup from 'yup';
-
-const validationSchema = {
-    email: yup.string().email().required()
-}
-
-const FormComponent = () => {
-    const submitHandler = (data) => {
-        // do something with the data returned from the form
-        // data is passed to onSubmitFn with the names of 
-        // each input as the key e.g.:
-
-        /* 
-            {
-                email: "someemail@email.com,
-                types_of_fish: "pike",
-                peoples_name: ["jon", "amy"],
-                types_of_cheese: "cheddar
-            }
-        */
-    }
-
-    return (
-        <Form onSubmitFn={submitHandler} validationSchema={validationSchema}>
-            <FormContents>
-                <FormInput label="Name" name="email" type="email" />
-
-                <FormInputGroup
-                    name="types_of_fish"
-                    label="Types of fish"
-                    inputs={[
-                    {
-                        label: "Salmon",
-                        value: "salmon",
-                        defaultChecked: true,
-                    },
-                    {
-                        label: "Pike",
-                        value: "pike",
-                    },
-                    ]}
-                />
-
-                <FormInputGroup
-                    name="peoples_names"
-                    label="People's Names"
-                    type="checkbox"
-                    inputs={[
-                    {
-                        label: "Jon",
-                        value: "jon",
-                        defaultChecked: true,
-                    },
-                    {
-                        label: "Amy",
-                        value: "amy",
-                    },
-                    {
-                        label: "Carol",
-                        value: "carol",
-                    },
-                    ]}
-                />
-
-                <FormSelect
-                    name="types_of_cheese"
-                    label="Types of cheese"
-                    options={[
-                    { label: "Cheddar", value: "cheddar" },
-                    { label: "Gouda", value: "gouda" },
-                    { label: "Brie", value: "brie" },
-                    ]}
-                />
-            </FormContents>
-
-            <FormControls />
-        </Form>
-    );
-}
-
-export default FormComponent;
-```
-
-## Form Element
+yarn add @aerian-studios/aerated@0.0.1
+``` -->
 
-```tsx
-import { Form } from 'aerian-component-library';
+## Usage
 
-const FormComponent = () => {
-    return (
-        <Form onSubmitFn={() => {}} validationSchema={{}}>
-        </Form>
-    );
-}
+TODO
 
-export default FormComponent;
-```
-
-### Props
-| Name             | Type                                                     | Default   |
-| :--------------- | :------------------------------------------------------- | :-------- |
-| onSubmitFn       | `(data: Record<string, string &#124; string[]>) => void` | undefined |
-| validationSchema | `Record<string, YupTypes>`                               | undefined |
-| onResetFn?       | `() => void`                                             | undefined |
+## Form
 
-## Developing locally 
-<hr />
+TODO
 
-The repository contains storybooks for building and testing new components. To add components to the library use the following steps:
+## Developing the component library
 
-Clone this repository:
+There are generators to quickly output the files and boilerplate that you need to output a component:
 
 ```bash
-https://github.com/matt-hardman/aerian-component-library.git
-```
+yarn generate
 
-Install dependencies:
+# or npm
 
-```bash
-yarn
+npm run generate
 ```
 
-Run:
+All components should have tests, a story, some local theming. Largely speaking the development and documentation of a component occurs in storybooks. This encourages thinking about the the component in isolation.
 
-```bash
-yarn storybook
-```
-
-Then create a component and relevant story within the `src` folder.
+### Developing locally
 
-## Linking a local version of aerian-component-library to another project
 <hr />
 
-Based on: [this article](https://medium.com/@mtfranchetto/the-solution-for-a-working-npm-yarn-link-ddcb4f3c785e)
-
-Sometimes it is useul to link a local version of a library to another react project, to ensure everything is working correctly, before publishing an update to the npm dirctory.
-
-Using `npm link` or `yarn link` can cause problems as the whole project is linked and multiple versions of react are detected.
-
-To solve this problem `yalc` can be used.
-
-```bash
-yarn global add yalc
-```
-
-Once yalc is installed running `yarn npm-publish:local` will build the library as if it was being published to npm, but store it locally.
+The repository contains storybooks for building and testing new components. There is also a simple `main.tsx` to allow you to test adding classes.
 
-Next go to the react project you want to install the local version of `aerian-component-library` and run `yalc add aerian-component-library`.  
+## [Using themes and local styles](./src/styles/README.md)

generator-templates/Component/Component.modules.scss.hbs

@@ -0,0 +1,6 @@
+/** Local theme
+ *
+ */
+.component {
+
+}