New components

.storybook/main.js

@@ -6,6 +6,7 @@ module.exports = {
     webpackFinal: async (config) => {
         config.resolve.alias['next/link'] = path.resolve(__dirname, '../src/utils/next-link');
         config.resolve.alias['next/head'] = path.resolve(__dirname, '../node_modules/react-helmet');
+        config.resolve.alias['next/dynamic'] = path.resolve(__dirname, '../src/utils/dynamic');
         return config;
     }
 };

.storybook/preview-head.html

@@ -1,7 +1,12 @@
-<link href="/css/tailwind.light.css" rel="stylesheet" id="theme-css-light" />
-<link href="/css/tailwind.dark.css" rel="stylesheet" id="theme-css-dark" media="max-width: 1px" />
+<link href="/css/tailwind.bold.css" rel="stylesheet" id="theme-css-bold" />
+<link href="/css/tailwind.classic.css" rel="stylesheet" id="theme-css-classic" />
+<link href="/css/tailwind.eco.css" rel="stylesheet" id="theme-css-eco" />
 
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
 
 <script>
     const themeProvider = { theme: null };
@@ -27,5 +32,5 @@
         themeProvider.theme = theme;
     }
 
-    setCurrentTheme('light');
+    setCurrentTheme('bold');
 </script>

.storybook/preview.js

@@ -4,7 +4,7 @@ export const parameters = {
     backgrounds: { disable: true },
     options: {
         storySort: {
-            order: ['Layouts', ['Landing'], 'Components', ['Navigation Bar', 'Footer', 'Hero Section', 'Team Section'], 'Atoms']
+            order: ['Layouts', ['Advanced'], 'Components', ['Navigation Bar', 'Footer', 'Contact Section', 'CTA Section', 'Hero Section', 'Posts Section', 'Testimonials Section'], 'Atoms']
         }
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -13,19 +13,21 @@ export const parameters = {
             color: /(background|color)$/i,
             date: /Date$/
         }
-    }
+    },
+    layout: 'fullscreen'
 };
 
 export const globalTypes = {
     theme: {
         name: 'Theme',
         description: 'Global theme for components',
-        defaultValue: 'light',
+        defaultValue: 'bold',
         toolbar: {
-            icon: 'photo',
+            icon: 'cog',
             items: [
-                { value: 'light', title: 'Light Theme' },
-                { value: 'dark', title: 'Dark Theme' }
+                { value: 'bold', title: 'Bold Theme' },
+                { value: 'classic', title: 'Classic Theme' },
+                { value: 'eco', title: 'Eco Theme' }
             ]
         }
     }

README.md

@@ -1,11 +1,11 @@
 # Stackbit Components Library
 
 
-## Run locally
+## Develop locally
 
 1. Clone the repo
 1. run `npm install`
-1. run `npm run develop`
+1. run `npm run develop` or `npm run develop-watch-themes` to watch for `themes/tailwind.{theme_name}.config.js` files and rebuild them.
 1. Navigate to http://localhost:6006/ to open Storybook
 
 
@@ -26,10 +26,20 @@ Where the `{theme_name}` is an ID of a theme.
 To build all tailwind configs run:
 
 ```shell
-npm run build-theme-css
+npm run build-themes
 ```
 
-The generated CSS files will be written to `public/css/tailwind.{theme_name}.css`. These CSS files are only used by Storybook. When importing this library from your project, import tailwind config of a particular theme directly.
+The generated CSS files will be written to `public/css/tailwind.{theme_name}.css`. These CSS files are only used by Storybook. When importing this library from your project, import tailwind config of a particular theme directly and use it as a preset:
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [
+    require('@stackbit/components/themes/tailwind.classic.config.js')
+  ],
+  // ...
+}
+```
 
 
 ## Variants

babel.config.json

@@ -0,0 +1,12 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        [
+            "@babel/preset-react",
+            {
+                "runtime": "automatic"
+            }
+        ]
+    ],
+    "ignore": ["**/*.stories.js", "themes"]
+}

build-themes.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+themes=(
+  "bold"
+  "classic"
+  "eco"
+)
+
+for theme in "${themes[@]}"; do
+  echo ""
+  echo "Building CSS for '$theme' theme..."
+  tailwindcss build --minify -i "./src/css/global.css" --config "./themes/tailwind.$theme.config.js" --output "./public/css/tailwind.$theme.css"
+done

develop.sh

@@ -1,8 +1,9 @@
 #!/bin/bash
 
 themes=(
-  "light"
-  "dark"
+  "bold"
+  "classic"
+  "eco"
 )
 
 command=("./node_modules/.bin/concurrently" "--kill-others-on-fail" "--names")

models/action.yaml

@@ -0,0 +1,35 @@
+name: action
+label: Action
+fields:
+  - type: string
+    name: label
+    label: Label
+  - type: string
+    name: url
+    label: URL
+    default: '#'
+  - type: string
+    name: alt
+    label: Title
+  - type: enum
+    name: type
+    label: Type
+    options:
+      - label: Link
+        value: link
+      - label: Primary button
+        value: primary-button
+      - label: Secondary button
+        value: secondary-button
+    default: link
+  - type: enum
+    name: icon
+    label: Icon
+    options:
+      - arrowRight
+      - cart
+      - facebook
+      - github
+      - instagram
+      - linkedin
+      - twitter

models/contact_section.yaml

@@ -0,0 +1,89 @@
+name: contact_section
+label: Contact section
+fields:
+  - type: enum
+    name: variant
+    label: Arrangement
+    options:
+      - label: Contact form with image on the left
+        value: variant-a
+      - label: Contact form with image on the right
+        value: variant-b
+    default: variant-a
+  - type: enum
+    name: colors
+    label: Colors
+    options:
+      - label: Dark text on light background
+        value: colors-a
+      - label: Light text on dark background
+        value: colors-b
+      - label: Primary text on dark background
+        value: colors-c
+      - label: Dark text on primary background
+        value: colors-d
+      - label: Dark text on secondary background
+        value: colors-e
+    default: colors-a
+  - type: enum
+    name: width
+    label: Width
+    options:
+      - label: Narrow
+        value: narrow
+      - label: Wide
+        value: wide
+      - label: Full
+        value: full
+    default: wide
+  - type: enum
+    name: height
+    label: Height
+    options:
+      - label: Auto
+        value: auto
+      - label: Viewport
+        value: viewport
+    default: auto
+  - type: enum
+    name: alignHoriz
+    label: Horizontal alignment
+    options:
+      - left
+      - right
+      - center
+    default: left
+  - type: string
+    name: badge
+    label: Badge
+  - type: string
+    name: title
+    label: Title
+  - type: markdown
+    name: text
+    label: Text
+  - type: image
+    name: imageUrl
+    label: Image URL
+  - type: string
+    name: imageAltText
+    label: Image alt text
+  - type: string
+    name: imageCaption
+    label: Image caption
+    description: The caption of the image
+  - type: string
+    name: formId
+    label: Form ID
+  - type: string
+    name: formAction
+    label: Form action
+  - type: list
+    name: formFields
+    label: Form fields
+    items:
+      type: model
+      models: [form_field]
+  - type: string
+    name: submitLabel
+    label: Submit button label

models/cta_section.yaml

@@ -0,0 +1,70 @@
+name: cta_section
+label: CTA section
+fields:
+  - type: enum
+    name: variant
+    label: Arrangement
+    options:
+      - label: CTA with buttons at the bottom
+        value: variant-a
+      - label: CTA with buttons on the right
+        value: variant-b
+    default: variant-a
+  - type: enum
+    name: colors
+    label: Colors
+    options:
+      - label: Dark text on light background
+        value: colors-a
+      - label: Light text on dark background
+        value: colors-b
+      - label: Primary text on dark background
+        value: colors-c
+      - label: Dark text on primary background
+        value: colors-d
+      - label: Dark text on secondary background
+        value: colors-e
+    default: colors-a
+  - type: enum
+    name: width
+    label: Width
+    options:
+      - label: Narrow
+        value: narrow
+      - label: Wide
+        value: wide
+      - label: Full
+        value: full
+    default: wide
+  - type: enum
+    name: height
+    label: Height
+    options:
+      - label: Auto
+        value: auto
+      - label: Viewport
+        value: viewport
+    default: auto
+  - type: enum
+    name: alignHoriz
+    label: Horizontal alignment
+    options:
+      - left
+      - right
+      - center
+    default: left
+  - type: string
+    name: badge
+    label: Badge
+  - type: string
+    name: title
+    label: Title
+  - type: markdown
+    name: text
+    label: Text
+  - type: list
+    name: actions
+    label: Action buttons
+    items:
+      type: model
+      models: [action]