chore: updated readme and added component gen scripts (#467)

Co-authored-by: Michael Marszalek <[email protected]>

.github/workflows/storefront-preview.yml

@@ -33,5 +33,5 @@ jobs:
         uses: peter-evans/create-or-update-comment@v3
         with:
           issue-number: ${{ steps.findPr.outputs.pr }}
-          body: The preview deployment is available at  ${{ steps.deploy.outputs.url }}
+          body: Storefront preview deployment is available at  ${{ steps.deploy.outputs.url }}
           reactions: rocket, eyes

package.json

@@ -24,7 +24,11 @@
     "lint:all:fix": "yarn run lint:all --fix",
     "lint-style": "stylelint  \"**/*.css\"",
     "lint-style:fix": "yarn run lint-style --fix",
-    "pack:react": "yarn workspace @digdir/design-system-react pack"
+    "pack:react": "yarn workspace @digdir/design-system-react pack",
+    "generate-component-storefront": "ts-node ./scripts/generate-component/storefront.ts",
+    "gcsf": "ts-node ./scripts/generate-component/storefront.ts",
+    "generate-component-react": "ts-node ./scripts/generate-component/react.ts",
+    "gcr": "ts-node ./scripts/generate-component/react.ts"
   },
   "devDependencies": {
     "@altinn/figma-design-tokens": "^6.0.1",
@@ -102,6 +106,7 @@
     "stylelint-prettier": "^3.0.0",
     "terser": "^5.16.0",
     "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^5.0.0"

packages/tokens/package.json

@@ -17,7 +17,6 @@
   "devDependencies": {
     "@tokens-studio/sd-transforms": "^0.8.5",
     "change-case": "^4.1.2",
-    "style-dictionary": "^3.7.2",
-    "ts-node": "^10.9.1"
+    "style-dictionary": "^3.7.2"
   }
 }

packages/tokens/tsconfig.json

@@ -1,10 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "ts-node": {
-    "transpileOnly": true,
-    "files": true,
-    "compilerOptions": {
-      "module": "CommonJS"
-    }
-  }
+  "extends": "../../tsconfig.json"
 }

scripts/generate-component/fileTemplates.ts

@@ -0,0 +1,134 @@
+// Content for export file
+const exportContent = (componentName: string) => {
+  return `export { ${componentName} } from './${componentName}';
+export type { ${componentName}Props } from './${componentName}';
+`;
+};
+
+// Content for tsx file
+const mainContent = (
+  componentName: string,
+) => `import type { HTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+import classes from './${componentName}.module.css';
+
+export type ${componentName}Props = {
+  /** Description of what myProp does in the component */
+  myProp?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const ${componentName} = forwardRef<HTMLDivElement, ${componentName}Props>(
+  ({ myProp = false, children, ...rest }, ref) => {
+    return (
+      <div
+        {...rest}
+        className={cn(myProp && classes.myClass, rest.className)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+`;
+const cssContent = () => `.myClass {
+  color: red;
+}
+`;
+
+const storyContent = (componentName: string) => {
+  return `import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import { ${componentName} } from '.';
+
+type Story = StoryObj<typeof ${componentName}>;
+
+export default {
+  title: 'Kjernekomponenter/${componentName}',
+  component: ${componentName},
+  parameters: {
+    status: {
+      type: 'beta',
+      url: 'http://www.url.com/status',
+    },
+  },
+} as Meta;
+
+// Simple story
+// First story is the one displayed by <Preview /> and used for <Controls />
+export const Preview: Story = {
+  args: {
+    children: 'You created the ${componentName} component!',
+    myProp: false, // we set this so "boolean" is set in props table
+  },
+};
+
+// Function story
+// Use this story for listing our different variants, patterns with other components or examples usage with useState
+export const Composed: StoryFn<typeof ${componentName}> = () => (
+  <>
+    <${componentName} myProp>I</${componentName}>
+    <${componentName}>am</${componentName}>
+    <${componentName} myProp>stacked</${componentName}>
+  </>
+);
+`;
+};
+
+const mdxContent = (componentName: string) => {
+  return `import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks';
+import { Information } from '../../../../../docs-components';
+import * as ${componentName}Stories from './${componentName}.stories';
+
+<Meta of={${componentName}Stories} />
+
+# ${componentName}
+
+<Information text='development' />
+
+Description of the ${componentName} component.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+<Information text='token' />
+
+\`\`\`tsx
+import '@digdir/design-system-tokens/brand/altinn/tokens.css'; // Importeres kun en gang i appen din.
+import { ${componentName} } from '@digdir/design-system-react';
+
+<${componentName}>You are using the ${componentName} component!</${componentName}>;
+\`\`\`
+
+## Composed
+
+<Canvas of={${componentName}Stories.Composed} />
+`;
+};
+
+const testContent = (componentName: string) => `import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { ${componentName} } from './${componentName}';
+
+describe('${componentName}', () => {
+  test('myProp should add myClass', (): void => {
+    render(<${componentName} myProp>test text</${componentName}>);
+    expect(screen.getByText('test text')).toHaveClass('myClass');
+  });
+});
+`;
+
+export {
+  exportContent,
+  mainContent,
+  cssContent,
+  storyContent,
+  mdxContent,
+  testContent,
+};

scripts/generate-component/message.ts

@@ -0,0 +1,27 @@
+export const consoleMessage = (text: string) => {
+  console.log(' ');
+  console.log(
+    '======================================================================================',
+  );
+  console.log(
+    '|                                                                                    |',
+  );
+  console.log('|  ' + text + generateSpaces(82 - text.length) + '|');
+  console.log(
+    '|                                                                                    |',
+  );
+  console.log(
+    '======================================================================================',
+  );
+  console.log(' ');
+};
+
+const generateSpaces = (size: number) => {
+  if (typeof size !== 'number' || size < 0) {
+    throw new Error(
+      'Invalid size argument. Please provide a non-negative number.',
+    );
+  }
+
+  return ' '.repeat(size);
+};