Merge pull request #5 from maykinmedia/feature/#8-layout

Feature/#8 layout

.eslintrc.json

@@ -3,7 +3,7 @@
     "browser": true,
     "es2021": true
   },
-  "ignorePatterns": ["dist/**/*", "**/*.css"],
+  "ignorePatterns": ["dist/**/*", "**/*.css", "**/*.scss"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
+import * as path from "path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -22,5 +23,16 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ["style-loader", "css-loader", "sass-loader"],
+      include: path.resolve(__dirname, "../"),
+    });
+
+    // Add any other webpack config modifications here
+
+    return config;
+  },
 };
 export default config;

.storybook/preview-body.html

@@ -0,0 +1,8 @@
+<style>
+  html,
+  body,
+  #storybook-root {
+    height: 100%;
+    margin: 0;
+  }
+</style>

bin/create_component.sh

@@ -27,9 +27,9 @@ function create_index_file() {
 
 # Function to create the CSS file
 function create_css_file() {
-  echo ".$component_name_lowercase {" > "$2/$component_name_lowercase.css"
-  echo "  /* Rules here. */" >> "$2/$component_name_lowercase.css"
-  echo "}" >> "$2/$component_name_lowercase.css"
+  echo ".mykn-$component_name_lowercase {" > "$2/$component_name_lowercase.scss"
+  echo "  /* Rules here. */" >> "$2/$component_name_lowercase.scss"
+  echo "}" >> "$2/$component_name_lowercase.scss"
 }
 
 # Function to create the stories.tsx file
@@ -40,7 +40,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ${capitalized_component_name} } from "./$component_name_lowercase";
 
 const meta = {
-  title: "Components/${capitalized_component_name}",
+  title: "Uncategorized/${capitalized_component_name}",
   component: ${capitalized_component_name},
 } satisfies Meta<typeof ${capitalized_component_name}>;
 
@@ -60,7 +60,7 @@ function create_component_file() {
   cat > "$2/$component_name_lowercase.tsx" <<EOF
 import React from "react";
 
-import "./$component_name_lowercase.css";
+import "./$component_name_lowercase.scss";
 
 export type ${capitalized_component_name}Props = React.PropsWithChildren<{
   // Props here.
@@ -73,7 +73,7 @@ export type ${capitalized_component_name}Props = React.PropsWithChildren<{
  * @constructor
  */
 export const ${capitalized_component_name}: React.FC<${capitalized_component_name}Props> = ({ children, ...props }) => (
-  <div className="$component_name_lowercase" {...props}>
+  <div className="mykn-$component_name_lowercase" {...props}>
     {children}
   </div>
 );

package.json

@@ -67,6 +67,8 @@
     "rollup": "^4.9.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.69.7",
+    "sass-loader": "^13.3.3",
     "storybook": "^7.6.7",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
@@ -79,5 +81,8 @@
     "*.{css,js,jsx,ts,tsx,md}": "npm run lint:fix"
   },
   "readme": "ERROR: No README data found!",
-  "_id": "[email protected]"
+  "_id": "[email protected]",
+  "dependencies": {
+    "clsx": "^2.1.0"
+  }
 }

src/components/index.ts

@@ -1,2 +1,4 @@
 // Auto-generated file. Do not modify manually.
+export * from "./layout";
 export * from "./logo";
+export * from "./page";

src/components/layout/column/column.scss

@@ -0,0 +1,34 @@
+@import '../../../settings/style';
+
+.mykn-column {
+  grid-column: auto / 6 span;
+}
+
+.mykn-column--debug {
+  outline: 1px solid blue;
+}
+
+.mykn-column--debug:before {
+  color: blue;
+  content: "Mobile (full span)";
+  display: block;
+  font-family: monospace;
+  text-align: center;
+}
+
+.mykn-column--debug[data-testid]:before {
+  content: attr(data-testid)!important;
+}
+
+@media screen and (min-width: $breakpoint-desktop) {
+  @for $i from 1 through 12 {
+    .mykn-column--span-#{$i} {
+      grid-column: auto / span #{$i};
+    }
+
+    .mykn-column--debug.mykn-column--span-#{$i}:before {
+      content: "Span #{$i}";
+    }
+  }
+}
+

src/components/layout/column/column.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { Container } from "../container";
+import { Grid } from "../grid";
+import { Column } from "./column";
+
+const meta = {
+  title: "Layout/Column",
+  component: Column,
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: (args) => (
+    <Container debug={args.debug} data-testid="Container">
+      <Grid debug={args.debug} data-testid="Grid">
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+        <Column {...args}></Column>
+      </Grid>
+    </Container>
+  ),
+} satisfies Meta<typeof Column>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ColumnComponent: Story = {
+  args: {
+    debug: true,
+    span: 1,
+  },
+};

src/components/layout/column/column.tsx

@@ -0,0 +1,40 @@
+import clsx from "clsx";
+import React from "react";
+
+import "./column.scss";
+
+export type ColumnProps = React.PropsWithChildren<{
+  span: number;
+
+  /** If set, show the outline of the column. */
+  debug?: boolean;
+
+  /** Gets passed as props. */
+  [index: string]: unknown;
+}>;
+
+/**
+ * Column component, must be placed within a Grid component.
+ * @param children
+ * @param debug
+ * @param span
+ * @param props
+ * @constructor
+ */
+export const Column: React.FC<ColumnProps> = ({
+  children,
+  debug,
+  span,
+  ...props
+}) => {
+  return (
+    <div
+      className={clsx("mykn-column", `mykn-column--span-${span}`, {
+        "mykn-column--debug": debug,
+      })}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

src/components/layout/column/index.ts

@@ -0,0 +1 @@
+export * from "./column";

src/components/layout/container/container.scss

@@ -0,0 +1,21 @@
+.mykn-container {
+  margin: 0 auto;
+  max-width: 1240px;
+  width: 100%;
+}
+
+.mykn-container--debug {
+  outline: 1px solid red;
+}
+
+.mykn-container--debug[data-testid]:before {
+  content: attr(data-testid);
+  color: red;
+  display: block;
+  font-family: monospace;
+  text-align: center;
+}
+
+.mykn-container--debug[data-testid]:before {
+  content: attr(data-testid);
+}

src/components/layout/container/container.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Container } from "./container";
+
+const meta = {
+  title: "Layout/Container",
+  component: Container,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof Container>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ContainerComponent: Story = {
+  args: {
+    "data-testid": "Container",
+    debug: true,
+  },
+};