build: bump version

.dockerignore

@@ -1,3 +1,5 @@
 Dockerfile
 node_modules
-.vscode
+.vscode
+dist
+.git

Dockerfile

@@ -1,5 +1,7 @@
 FROM alpine:3.20
 
+# noircir repo: where to fetch updates
+ENV NOIRCIR_RELEASE=https://api.github.com/repos/BDX-town/Noircir/tags
 # noircir folder: where you saved noircir files
 ENV NOIRCIR_FOLDER="/noircir"
 # nginx root: all noircir data will be saved there, blogs and generated content
@@ -17,12 +19,14 @@ ENV WWW_GROUP=www-data
 COPY . $NOIRCIR_FOLDER 
 
 # install deps
-RUN apk add gettext gum nginx nginx-mod-http-lua nginx-mod-http-dav-ext openssl nodejs-current npm \
+RUN apk add gettext gum nginx nginx-mod-http-lua nginx-mod-http-dav-ext openssl nodejs-current npm jq curl \
     && corepack enable \
     && mkdir -p $NGINX_FOLDER \
-    && mkdir -p /tools && cp $NOIRCIR_FOLDER/tools/* /tools \
-    && cd $NOIRCIR_FOLDER && yarn workspaces focus cms template &&  yarn run build && rm -rf */node_modules/* && rm -rf node_modules/* &&  yarn workspaces focus generator && cd / \
-    && cp -r $NOIRCIR_FOLDER/cms/dist/* $NGINX_FOLDER
+    && mkdir -p /tools && cp $NOIRCIR_FOLDER/tools/* /tools
+RUN cd $NOIRCIR_FOLDER && yarn workspaces focus @bdxtown/canaille cms template && yarn run build 
+RUN cd $NOIRCIR_FOLDER && rm -rf */node_modules/* && rm -rf node_modules/*
+RUN cd $NOIRCIR_FOLDER && yarn workspaces focus generator 
+RUN cp -r $NOIRCIR_FOLDER/cms/dist/* $NGINX_FOLDER
 
 
 RUN adduser -D -u 1001 -h /home/$WWW_USER -G $WWW_GROUP $WWW_USER\

canaille/.eslintignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+*.mjs
+*.test.*
+*.stories.*

canaille/.eslintrc

@@ -0,0 +1,25 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "airbnb",
+    "airbnb-typescript"
+  ],
+  "rules": {
+    "import/prefer-default-export": 0,
+    // turn on errors for missing imports
+    "import/no-unresolved": "error",
+    "@typescript-eslint/dot-notation": 0,
+    "react/require-default-props": 0,
+    "react/jsx-props-no-spreading": 0,
+    "@typescript-eslint/naming-convention": 0,
+    "no-underscore-dangle": 0,
+    "default-case-last": 0,
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    }
+  }
+}

canaille/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.yarn
+build
+stats.json

canaille/Readme.md

@@ -0,0 +1,51 @@
+# Canaille
+
+## Overview
+
+Canaille is a design system created by Bdx.town for building our user interfaces. The system is composed of three libraries that work together to provide a seamless experience for developers and designers.
+
+The first library is a SASS library that provides a comprehensive set of utility CSS classes. These classes can be used to quickly and easily style any element on a page. The classes are designed to be modular, so developers can mix and match them as needed to achieve their desired look and feel.
+
+The second library is a React library that provides a collection of reusable UI components. These components are built using the design tokens from the SASS library, making it easy to create consistent and visually appealing interfaces. The React library includes everything from basic layout components to more complex interactive components like modals and dropdown menus.
+
+The third library is a SVG library that exports a JavaScript bundle for icons. These icons can be easily included in any project that uses Canaille, and are designed to be flexible and scalable to fit any design.
+
+Canaille (v3+) uses CSS layers to avoid messing with user's code. Utilities classes will take over components style, and other css code will win everything.
+
+## Live preview
+
+You can go there to see Canaille at it current state: [https://cl0v1s.github.io/Canaille](https://cl0v1s.github.io/Canaille)
+
+The current mockup can be found [here](https://www.figma.com/file/m8dLKnCxYvKt8WPxsSjIMH/Mangane?type=design&node-id=1-3&mode=design&t=GauHRHjwvP13vDM0-0)
+
+## Technical stack
+
+- node
+- javascript
+- typescript
+- sass
+
+## Requirements
+
+- Node version 20+
+- Yarn
+
+## Code style
+
+Please check `.eslintrc` file
+
+## Third-party libraries
+
+Please check `package.json` for a comprehensive list of canaille dependencies.
+
+`react` and `react-dom`, `react-router-dom` are exposed as externals of this project. Projects using Canaille must provide compatible versions.
+
+## Getting started
+
+1. `yarn`
+2. `yarn laddle`
+
+### Build project
+
+1. `yarn`
+2. `yarn build-prod`

canaille/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@bdxtown/canaille",
+  "version": "1.0.0",
+  "description": "bdx.town design system",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./src/scss/index.scss": {
+      "import": "./src/scss/index.scss",
+      "require": "./src/scss/index.scss"
+    }
+  },
+  "layers": {
+    "components": "components",
+    "utils": "utils"
+  },
+  "files": [
+    "./dist/**",
+    "./src/scss/**"
+  ],
+  "scripts": {
+    "build": "npx webpack -c webpack.dev.mjs",
+    "build-prod": "npx webpack -c webpack.prod.mjs",
+    "dev": "npx webpack --config webpack.dev.mjs --watch",
+    "stats": "npx webpack --profile --json=stats.json -c webpack.prod.mjs && npx webpack-bundle-analyzer stats.json",
+    "test": "npx jest",
+    "lint": "npx eslint --fix .",
+    "laddle": "npx ladle serve",
+    "laddle-build": "npx ladle build --base $BASE_URL",
+    "story": "node toolchain/create-story.mjs",
+    "publish-package": "npx yarn build-prod && npm publish"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@react-docgen/cli": "^2.0.1",
+    "@tabler/icons-react": "^2.44.0",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.9.0",
+    "debounce": "^2.0.0",
+    "deepmerge": "^4.3.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "file-loader": "^6.2.0",
+    "ladlescoop": "^1.0.8",
+    "react": "^18.2.0",
+    "react-docgen": "^7.0.1",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "devDependencies": {
+    "@ladle/react": "^4.0.2",
+    "@types/webpack-bundle-analyzer": "^4",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "webpack-bundle-analyzer": "^4.10.1"
+  },
+  "packageManager": "yarn@4.0.2"
+}

canaille/src/index.ts

@@ -0,0 +1,14 @@
+import './scss/index.scss';
+
+export * from './js/helpers/createUseStyles';
+export * from './js/helpers/useTranslations';
+export * from './js/Block/common';
+export * from './js/Button/common';
+export * from './js/Checkbox/common';
+export * from './js/Error/common';
+export * from './js/Line/common';
+export * from './js/Link/common';
+export * from './js/Radio/common';
+export * from './js/SearchInput/common';
+export * from './js/SmallInput/common';
+export * from './js/TextInput/common';

canaille/src/js/Block/Block.stories.tsx

@@ -0,0 +1,11 @@
+import type { Story } from '@ladle/react';
+import React from 'react';
+import { Block } from './common.tsx';
+
+export const BlockStory: Story = (props) => <Block {...props}>Test</Block>;
+BlockStory.storyName = 'Block';
+
+BlockStory.args = {};
+BlockStory.argTypes = {
+  state: { options: ['default', 'hover'], control: { type: 'select' } },
+};

canaille/src/js/Block/common.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ICommonProps } from '../types/ICommonProps';
+import { createUseStyles } from '../helpers/createUseStyles';
+import { block as blockCSS } from './style';
+
+const useStyle = createUseStyles({
+  block: {
+    '---border': 'unset',
+    '---padding': 'unset',
+    '---background-color': 'unset',
+    '---box-shadow': 'unset',
+    '---radius': 'unset',
+
+    border: 'var(---border)',
+    padding: 'var(---padding)',
+    backgroundColor: 'var(---background-color)',
+    boxShadow: 'var(---box-shadow)',
+    borderRadius: 'var(---radius)',
+  } as React.CSSProperties,
+  canaille: ({ state, variant }) => blockCSS(variant, state),
+});
+
+interface IBlock extends ICommonProps {
+  variant?: 'default' | 'interactive',
+  state?: 'default' | 'hover',
+  children: React.ReactNode,
+}
+
+export const Block = React.forwardRef(({
+  state = 'default', variant = 'default', className, children, ...rest
+}: IBlock, ref) => {
+  const { block, canaille } = useStyle({ state, variant });
+
+  return (
+    <div {...rest} ref={ref as React.LegacyRef<HTMLDivElement>} className={`${block} ${canaille} ${className}`}>
+      { children }
+    </div>
+  );
+});

canaille/src/js/Block/style.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { merge } from '../helpers/merge';
+
+function stateCSS(state): React.CSSProperties {
+  switch (state) {
+    case 'hover': {
+      return {
+        '---background-color': 'var(--additional-primary)',
+        '---box-shadow': 'var(--dp-25)',
+      } as React.CSSProperties;
+    }
+    case 'default':
+    default: {
+      return {
+
+      };
+    }
+  }
+}
+
+export const block = (variant, state) => merge({
+  '---border': '2px solid var(--grey-100)',
+  '---padding': 'var(--spacing-3)',
+  '---background-color': 'var(--white)',
+  '---box-shadow': 'unset',
+  '---radius': 'var(--rounded-100)',
+
+  '&:hover': variant === 'interactive' ? stateCSS('hover') : null,
+} as React.CSSProperties, stateCSS(state));

canaille/src/js/Button/Button.stories.tsx

@@ -0,0 +1,34 @@
+import type { Story } from '@ladle/react';
+import React from 'react';
+import { Button } from './common.tsx';
+
+import '../../scss/google-fonts.scss';
+
+export const ButtonStory: Story = (props) => <Button {...props}>Test</Button>;
+ButtonStory.storyName = 'Button';
+
+ButtonStory.args = {
+  htmlType: 'button',
+  disabled: false,
+  variant: 'primary',
+  size: 100,
+  state: 'default',
+};
+ButtonStory.argTypes = {
+  htmlType: {
+    options: ['button', 'submit'],
+    control: { type: 'select' },
+    defaultValue: 'button',
+  },
+  variant: {
+    options: ['primary', 'secondary', 'light'],
+    control: { type: 'select' },
+    defaultValue: 'primary',
+  },
+  size: { options: [50, 100], control: { type: 'select' }, defaultValue: 100 },
+  state: {
+    options: ['hover', 'default'],
+    control: { type: 'select' },
+    defaultValue: 'default',
+  },
+};